Fix shape delete and refine Object Vector Studio Nerd Font icon coverage - PR_26133_019-object-vector-studio-icon-and-shape-delete-fixes

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_018 Playwright V8 Coverage Report
+# PR_26133_019 Playwright V8 Coverage Report
 
 Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
@@ -7,12 +7,14 @@ Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed
 - Coverage is advisory only; no thresholds are enforced.
 - Workspace Manager V2 entry point: 91%.
 - Object Vector Studio V2 runtime coverage entries from the generated report:
-  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 93%, executed lines 3827/3827, executed functions 407/438.
-- The generated report lists `tests/playwright/tools/WorkspaceManagerV2.spec.mjs` as changed JS not collected by browser runtime coverage.
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 93%, executed lines 3849/3849, executed functions 409/440.
+- Changed JS files considered by the generated report:
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: covered by browser V8 coverage.
+  - `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: not collected as browser runtime coverage.
 
 ## Validation Context
 
 - Main command: `npm run test:workspace-v2`.
 - Result: 48 passed.
-- Focused Object Vector Studio V2 layout, preview coordinate, geometry-layout, mouse-editing, animation-state, and asset-authoring scenarios passed as part of the workspace-v2 run.
-- Coverage includes the runtime paths for the scoped Nerd Font icon mapping, static icon decoration, dynamic tile icon decoration, and existing icon button behavior checks.
+- Focused Object Vector Studio V2 layout, icon, palette, geometry-layout, preview coordinate, mouse-editing, animation-state, and asset-authoring scenarios passed as part of the workspace-v2 run.
+- Coverage includes the scoped Nerd Font icon mapping, trash/delete glyph mapping, static palette/action icon decoration, dynamic tile icon decoration, shape delete targeting, and geometry layout checks.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,25 +1,25 @@
-# PR_26133_018 Workspace V2 Results
+# PR_26133_019 Workspace V2 Results
 
 ## Command Results
 
 - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`: passed.
 - `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: passed.
-- `npm run test:workspace-v2 -- --grep "shows Object Vector Studio V2 layout shell"`: 48 passed.
 - `npm run test:workspace-v2`: 48 passed.
 - `git diff --check`: passed with LF-to-CRLF working-copy warnings for touched files.
 
 ## Targeted Object Vector Studio V2 Verification
 
-- Confirmed Object Vector Studio V2 registers `@font-face` for `0xProto Nerd Font` from `src/shared/font/0xProtoNerdFont/0xProtoNerdFontMono-Regular.ttf`.
-- Confirmed static and dynamic Object Vector Studio V2 icon targets render glyphs with `0xProto Nerd Font` through the scoped icon mapping.
-- Confirmed object action, viewport, shape tool, z-order/group, snap/grid, transform, shape tile, and object tile icons preserve their existing click actions.
-- Confirmed visible button text, aria labels, and titles/tooltips remain available; disabled controls keep their existing disabled-reason tooltip behavior.
-- Confirmed show/hide and lock/unlock tile buttons swap to the matching visible/hidden and locked/unlocked glyph keys without changing behavior.
-- Confirmed `src/shared/font/0xProtoNerdFont` had no file changes.
-- Confirmed workspace-v2 Object Vector Studio V2 scenarios reported no console/page errors.
+- Confirmed shape tile delete carries the source object id and removes the targeted shape only; no console/page errors were reported by the workspace-v2 scenarios.
+- Confirmed all Object Vector Studio V2 delete icon paths use `nf-md-trash_can_outline`.
+- Confirmed Object Vector Studio V2 icon glyphs render 75% larger through the scoped Nerd Font CSS scale without changing button actions, accessible labels, or tooltips.
+- Confirmed Paint, Stroke, Hue, Sat, Bri, and Name controls receive mapped Nerd Font icons.
+- Confirmed Palette UI no longer renders visible `Sort` text.
+- Confirmed the polygon tool uses `nf-md-vector_polygon`.
+- Confirmed Apply Geometry spacing is reduced and Arc Geometry renders `startAngle`/`endAngle` on the same row.
+- Confirmed `src/shared/font/0xProtoNerdFont` was preserved.
 
 ## Scope Checks
 
-- Existing Object Vector Studio V2 JSON contracts were preserved.
+- Existing Object Vector Studio V2 contracts were preserved.
 - No sample JSON files were changed.
 - No unrelated tool/runtime files were changed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1251,18 +1251,28 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           const before = getComputedStyle(element, "::before");
           return {
             fontFamily: before.fontFamily,
+            fontSize: Number.parseFloat(before.fontSize),
             glyphPresent: Boolean(element.dataset.ovsIcon),
-            iconKey: element.dataset.ovsIconKey
+            iconKey: element.dataset.ovsIconKey,
+            iconName: element.dataset.ovsIconName
           };
         };
         const title = (selector) => document.querySelector(selector).title;
         return {
           actionIcons: {
             add: icon("#objectVectorStudioV2AddObjectButton"),
             delete: icon("#objectVectorStudioV2DeleteObjectButton"),
-            rename: icon("#objectVectorStudioV2RenameObjectButton")
+            paint: icon("#objectVectorStudioV2PaintModeButton"),
+            rename: icon("#objectVectorStudioV2RenameObjectButton"),
+            stroke: icon("#objectVectorStudioV2StrokeModeButton")
           },
           fontAssetOk: fontResponse.ok,
+          paletteSortIcons: {
+            bri: icon("[data-palette-sort='bri']"),
+            hue: icon("[data-palette-sort='hue']"),
+            name: icon("[data-palette-sort='name']"),
+            sat: icon("[data-palette-sort='sat']")
+          },
           shapeIcons: {
             arc: icon(".object-vector-studio-v2__shape-icon--arc"),
             circle: icon(".object-vector-studio-v2__shape-icon--circle"),
@@ -1296,12 +1306,23 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(iconStyleState.fontAssetOk).toBe(true);
       [
         ...Object.values(iconStyleState.actionIcons),
+        ...Object.values(iconStyleState.paletteSortIcons),
         ...Object.values(iconStyleState.shapeIcons),
         ...Object.values(iconStyleState.viewportIcons),
         ...Object.values(iconStyleState.zIcons)
       ].forEach((icon) => {
         expect(icon.glyphPresent).toBe(true);
         expect(icon.fontFamily).toContain("0xProto Nerd Font");
+        expect(icon.fontSize).toBeGreaterThanOrEqual(21);
+      });
+      expect(iconStyleState.actionIcons.delete.iconName).toBe("nf-md-trash_can_outline");
+      expect(iconStyleState.actionIcons.paint.iconName).toBe("nf-fa-paint_brush");
+      expect(iconStyleState.actionIcons.stroke.iconName).toBe("nf-fa-pencil");
+      expect(iconStyleState.paletteSortIcons).toMatchObject({
+        bri: { iconKey: "bri", iconName: "nf-fa-sun_o" },
+        hue: { iconKey: "hue", iconName: "nf-fa-eyedropper" },
+        name: { iconKey: "name", iconName: "nf-fa-font" },
+        sat: { iconKey: "sat", iconName: "nf-fa-tint" }
       });
       expect(Object.fromEntries(Object.entries(iconStyleState.shapeIcons).map(([key, value]) => [key, value.iconKey]))).toEqual({
         arc: "arc",
@@ -1313,6 +1334,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         text: "text",
         triangle: "triangle"
       });
+      expect(iconStyleState.shapeIcons.polygon.iconName).toBe("nf-md-vector_polygon");
+      expect(iconStyleState.shapeIcons.circle.iconName).toBe("nf-fa-circle_o");
+      expect(iconStyleState.shapeIcons.ellipse.iconName).toBe("nf-fa-circle_o");
       expect(Object.fromEntries(Object.entries(iconStyleState.viewportIcons).map(([key, value]) => [key, value.iconKey]))).toEqual({
         down: "panDown",
         reset: "reset",
@@ -1535,7 +1559,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/INFO Runtime palette is read-only session\/workspace data; Object Vector JSON remains palette-free\./);
       await expect(page.locator("#objectVectorStudioV2PaletteSummary")).not.toContainText(/^Palette/);
       await expect(page.locator("#objectVectorStudioV2StrokeWidth")).toHaveValue("2");
-      await expect(page.locator(".object-vector-studio-v2__palette-sort button")).toHaveText(["hue", "sat", "bri", "name"]);
+      await expect(page.locator(".object-vector-studio-v2__palette-sort")).not.toContainText("Sort");
+      await expect(page.locator(".object-vector-studio-v2__palette-sort button")).toHaveText(["Hue", "Sat", "Bri", "Name"]);
       const swatchState = await page.locator(".object-vector-studio-v2__palette-swatch").evaluateAll((swatches) => swatches.map((swatch) => {
         const rect = swatch.getBoundingClientRect();
         return {
@@ -1763,21 +1788,25 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           deleteTitle: deleteButton.title,
           iconFontsUseNerd: controls.every((control) => getComputedStyle(control.querySelector("[data-ovs-icon]"), "::before").fontFamily.includes("0xProto Nerd Font")),
           iconKeys: controls.map((control) => control.querySelector("[data-ovs-icon]")?.dataset.ovsIconKey),
+          iconNames: controls.map((control) => control.querySelector("[data-ovs-icon]")?.dataset.ovsIconName),
+          iconGlyphSizes: controls.map((control) => Number.parseFloat(getComputedStyle(control.querySelector("[data-ovs-icon]"), "::before").fontSize)),
           iconSizes: rects.map((rect) => Math.round(Math.max(rect.width, rect.height))),
           stacked: rects.every((rect, index) => index === 0
             || (Math.abs(rect.left - rects[index - 1].left) <= 1 && rect.top > rects[index - 1].top))
         };
       });
-      expect(objectTileActionLayout).toEqual({
+      expect(objectTileActionLayout).toMatchObject({
         allTextEmpty: true,
         controlOrder: ["visibility", "lock", "delete"],
         deleteAtFarRight: true,
         deleteTitle: "Delete this object",
         iconFontsUseNerd: true,
         iconKeys: ["eye", "unlock", "delete"],
+        iconNames: ["nf-fa-eye", "nf-fa-unlock", "nf-md-trash_can_outline"],
         iconSizes: [26, 26, 26],
         stacked: true
       });
+      expect(objectTileActionLayout.iconGlyphSizes.every((size) => size >= 22)).toBe(true);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete']")).toHaveText("");
@@ -2535,8 +2564,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     const geometryLayout = async () => page.locator("#objectVectorStudioV2ObjectDetails").evaluate((details) => {
       const panel = details.querySelector(".object-vector-studio-v2__edit-panel--geometry");
       const grid = panel?.querySelector(".object-vector-studio-v2__edit-grid");
+      const applyButton = panel?.querySelector("#objectVectorStudioV2ApplyGeometryButton");
+      const shapePanel = details.querySelector(".object-vector-studio-v2__edit-panel--geometry + .object-vector-studio-v2__shape-panel");
       const panelStyle = panel ? getComputedStyle(panel) : null;
       const gridStyle = grid ? getComputedStyle(grid) : null;
+      const shapePanelStyle = shapePanel ? getComputedStyle(shapePanel) : null;
+      const applyRect = applyButton?.getBoundingClientRect();
+      const shapePanelRect = shapePanel?.getBoundingClientRect();
       const fields = Array.from(panel?.querySelectorAll(".object-vector-studio-v2__edit-field") || []).map((field) => {
         const input = field.querySelector("input");
         const label = field.querySelector("span");
@@ -2551,13 +2585,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         };
       });
       return {
+        applyToSummaryGap: applyRect && shapePanelRect ? Math.round(shapePanelRect.top - applyRect.bottom) : null,
         fieldOrder: fields.map((field) => field.key),
         fillColorRemoved: !details.textContent.includes("Fill Color"),
         heading: panel?.querySelector("h4")?.textContent.trim(),
         inlineFields: fields.every((field) => field.inline),
         inputPaddingTopMax: Math.max(...fields.map((field) => field.paddingTop)),
         panelGap: Number.parseFloat(panelStyle?.gap || "0"),
         rowGap: Number.parseFloat(gridStyle?.rowGap || "0"),
+        shapePanelPaddingTop: Number.parseFloat(shapePanelStyle?.paddingTop || "0"),
         tops: Object.fromEntries(fields.map((field) => [field.key, field.top])),
         wideFields: fields.filter((field) => field.wide).map((field) => field.key)
       };
@@ -2574,6 +2610,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(layout.inputPaddingTopMax).toBeLessThanOrEqual(4);
       expect(layout.panelGap).toBeLessThanOrEqual(5);
       expect(layout.rowGap).toBeLessThanOrEqual(4);
+      expect(layout.applyToSummaryGap).toBeLessThanOrEqual(8);
+      expect(layout.shapePanelPaddingTop).toBeLessThanOrEqual(6);
       expect(layout.wideFields).toEqual(wideFields);
       pairs.forEach(([left, right]) => {
         expect(Math.abs(layout.tops[left] - layout.tops[right])).toBeLessThanOrEqual(3);
@@ -2658,8 +2696,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expectGeometryLayout({
         heading: "Arc Geometry",
         order: ["cx", "cy", "r", "startAngle", "endAngle"],
-        pairs: [["cx", "cy"]],
-        shapeId: "arc-5"
+        pairs: [["cx", "cy"], ["startAngle", "endAngle"]],
+        shapeId: "arc-5",
+        wideFields: ["r"]
       });
       await expectGeometryLayout({
         heading: "Text Geometry",
@@ -2793,6 +2832,21 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(lineAfterEndpoint.geometry.y2).not.toBe(lineBeforeEndpoint.geometry.y2);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Moved line end for shape line-2\./);
 
+      const shapeDeleteIconState = await page.locator("[data-shape-delete-id='line-2']").evaluate((button) => {
+        const icon = button.querySelector("[data-ovs-icon]");
+        return {
+          objectId: button.dataset.shapeDeleteObjectId,
+          title: button.title,
+          iconKey: icon?.dataset.ovsIconKey,
+          iconName: icon?.dataset.ovsIconName
+        };
+      });
+      expect(shapeDeleteIconState).toEqual({
+        objectId: "object.mouse.editor",
+        title: "Delete this shape",
+        iconKey: "delete",
+        iconName: "nf-md-trash_can_outline"
+      });
       await page.locator("[data-shape-delete-id='line-2']").click();
       await expect(page.locator("[data-object-tile-shape-id='line-2']")).toHaveCount(0);
       await expect(page.locator("[data-object-tile-shape-id='rectangle-1']")).toHaveCount(1);

tools/object-vector-studio-v2/index.html

@@ -264,11 +264,10 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             <hr class="object-vector-studio-v2__separator">
             <div id="objectVectorStudioV2PaletteSummary" class="object-vector-studio-v2__palette-swatch-list" aria-label="Read-only palette swatches"></div>
             <div class="object-vector-studio-v2__palette-sort" aria-label="Palette sorting">
-              <span>Sort</span>
-              <button type="button" data-palette-sort="hue" aria-pressed="false">hue</button>
-              <button type="button" data-palette-sort="sat" aria-pressed="false">sat</button>
-              <button type="button" data-palette-sort="bri" aria-pressed="false">bri</button>
-              <button type="button" data-palette-sort="name" aria-pressed="true">name</button>
+              <button type="button" data-palette-sort="hue" aria-pressed="false">Hue</button>
+              <button type="button" data-palette-sort="sat" aria-pressed="false">Sat</button>
+              <button type="button" data-palette-sort="bri" aria-pressed="false">Bri</button>
+              <button type="button" data-palette-sort="name" aria-pressed="true">Name</button>
             </div>
           </div>
         </section>