Use 0xProto Nerd Font glyphs for Object Vector Studio V2 icon buttons - PR_26133_018-object-vector-studio-nerd-font-icons

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_017 Playwright V8 Coverage Report
+# PR_26133_018 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,12 @@ 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 3735/3735, executed functions 403/434.
+  - `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.
 
 ## 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 compact Object Details geometry rendering, selected-shape summary cleanup, selected palette swatch styling, and Triangle tool display labeling.
+- 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.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,19 +1,21 @@
-# PR_26133_017 Workspace V2 Results
+# PR_26133_018 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 Details no longer renders the `Fill Color` summary row/value.
-- Confirmed Rectangle, Circle, Ellipse, Line, Arc, and Text Geometry controls use compact reduced spacing.
-- Confirmed requested geometry input rows render on the same line: rectangle `x/y` and `width/height`, circle `cx/cy` and inline `r`, ellipse `cx/cy` and `rx/ry`, line `x1/y1` and `x2/y2`, arc `cx/cy`, and text `x/y` plus inline `fontSize` and `text` fields.
-- Confirmed the selected palette swatch renders with a visible selected state, outline, shadow, and check mark.
-- Confirmed Triangle tool creation displays `Triangle Geometry`, not `Polygon Geometry`, while preserving schema-valid polygon storage.
+- 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.
 
 ## Scope Checks

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1244,41 +1244,88 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".object-vector-studio-v2__tool-toggle")).toHaveText(["Select", "Triangle", "Rectangle", "Circle", "Ellipse", "Line", "Polygon", "Arc", "Text"]);
       await expect(page.locator(".object-vector-studio-v2__shape-icon--triangle")).toBeVisible();
       await expect(page.locator(".object-vector-studio-v2__shape-icon--arc")).toBeVisible();
-      const iconStyleState = await page.evaluate(() => {
-        const style = (selector, pseudo = null) => {
+      const iconStyleState = await page.evaluate(async () => {
+        const fontResponse = await fetch("/src/shared/font/0xProtoNerdFont/0xProtoNerdFontMono-Regular.ttf", { cache: "no-store" });
+        const icon = (selector) => {
           const element = document.querySelector(selector);
-          return getComputedStyle(element, pseudo);
+          const before = getComputedStyle(element, "::before");
+          return {
+            fontFamily: before.fontFamily,
+            glyphPresent: Boolean(element.dataset.ovsIcon),
+            iconKey: element.dataset.ovsIconKey
+          };
         };
+        const title = (selector) => document.querySelector(selector).title;
         return {
-          arcBorderBottomColor: style(".object-vector-studio-v2__shape-icon--arc").borderBottomColor,
-          arcBorderBottomWidth: style(".object-vector-studio-v2__shape-icon--arc").borderBottomWidth,
-          circleBorderTopColor: style(".object-vector-studio-v2__shape-icon--circle").borderTopColor,
-          circleBorderTopWidth: style(".object-vector-studio-v2__shape-icon--circle").borderTopWidth,
-          ellipseBorderTopColor: style(".object-vector-studio-v2__shape-icon--ellipse").borderTopColor,
-          ellipseBorderTopWidth: style(".object-vector-studio-v2__shape-icon--ellipse").borderTopWidth,
-          polygonOutlineColor: style(".object-vector-studio-v2__shape-icon--polygon").outlineColor,
-          polygonOutlineWidth: style(".object-vector-studio-v2__shape-icon--polygon").outlineWidth,
-          rectangleBorderTopColor: style(".object-vector-studio-v2__shape-icon--rectangle").borderTopColor,
-          rectangleBorderTopWidth: style(".object-vector-studio-v2__shape-icon--rectangle").borderTopWidth,
-          triangleBackground: style(".object-vector-studio-v2__shape-icon--triangle").backgroundColor,
-          triangleBorderBottomWidth: style(".object-vector-studio-v2__shape-icon--triangle").borderBottomWidth,
-          triangleStrokeWidth: style(".object-vector-studio-v2__shape-icon--triangle", "::before").borderLeftWidth
+          actionIcons: {
+            add: icon("#objectVectorStudioV2AddObjectButton"),
+            delete: icon("#objectVectorStudioV2DeleteObjectButton"),
+            rename: icon("#objectVectorStudioV2RenameObjectButton")
+          },
+          fontAssetOk: fontResponse.ok,
+          shapeIcons: {
+            arc: icon(".object-vector-studio-v2__shape-icon--arc"),
+            circle: icon(".object-vector-studio-v2__shape-icon--circle"),
+            ellipse: icon(".object-vector-studio-v2__shape-icon--ellipse"),
+            polygon: icon(".object-vector-studio-v2__shape-icon--polygon"),
+            rectangle: icon(".object-vector-studio-v2__shape-icon--rectangle"),
+            select: icon(".object-vector-studio-v2__shape-icon--select"),
+            text: icon(".object-vector-studio-v2__shape-icon--text"),
+            triangle: icon(".object-vector-studio-v2__shape-icon--triangle")
+          },
+          titles: {
+            add: title("#objectVectorStudioV2AddObjectButton"),
+            grid: title("#objectVectorStudioV2GridRenderButton"),
+            rename: title("#objectVectorStudioV2RenameObjectButton"),
+            shape: title("[data-shape-tool='rectangle']"),
+            zoomIn: title("#objectVectorStudioV2ZoomInButton")
+          },
+          viewportIcons: {
+            down: icon("#objectVectorStudioV2PanDownButton"),
+            reset: icon("#objectVectorStudioV2ResetViewButton"),
+            up: icon("#objectVectorStudioV2PanUpButton"),
+            zoomIn: icon("#objectVectorStudioV2ZoomInButton"),
+            zoomOut: icon("#objectVectorStudioV2ZoomOutButton")
+          },
+          zIcons: {
+            group: icon(".object-vector-studio-v2__z-icon--group"),
+            ungroup: icon(".object-vector-studio-v2__z-icon--ungroup")
+          }
         };
       });
-      expect(iconStyleState).toEqual({
-        arcBorderBottomColor: "rgb(255, 255, 255)",
-        arcBorderBottomWidth: "4px",
-        circleBorderTopColor: "rgb(255, 255, 255)",
-        circleBorderTopWidth: "4px",
-        ellipseBorderTopColor: "rgb(255, 255, 255)",
-        ellipseBorderTopWidth: "4px",
-        polygonOutlineColor: "rgb(255, 255, 255)",
-        polygonOutlineWidth: "4px",
-        rectangleBorderTopColor: "rgb(255, 255, 255)",
-        rectangleBorderTopWidth: "4px",
-        triangleBackground: "rgba(0, 0, 0, 0)",
-        triangleBorderBottomWidth: "0px",
-        triangleStrokeWidth: "4px"
+      expect(iconStyleState.fontAssetOk).toBe(true);
+      [
+        ...Object.values(iconStyleState.actionIcons),
+        ...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(Object.fromEntries(Object.entries(iconStyleState.shapeIcons).map(([key, value]) => [key, value.iconKey]))).toEqual({
+        arc: "arc",
+        circle: "circle",
+        ellipse: "ellipse",
+        polygon: "polygon",
+        rectangle: "rectangle",
+        select: "select",
+        text: "text",
+        triangle: "triangle"
+      });
+      expect(Object.fromEntries(Object.entries(iconStyleState.viewportIcons).map(([key, value]) => [key, value.iconKey]))).toEqual({
+        down: "panDown",
+        reset: "reset",
+        up: "panUp",
+        zoomIn: "zoomIn",
+        zoomOut: "zoomOut"
+      });
+      expect(iconStyleState.titles).toEqual({
+        add: "Add a schema-valid object to the loaded payload",
+        grid: "Show or hide the preview grid",
+        rename: "Disabled until a schema-valid object is selected.",
+        shape: "Create a rectangle shape on the selected object",
+        zoomIn: "Zoom the work surface in"
       });
 
       await page.locator('[data-shape-tool="rectangle"]').click();
@@ -1714,6 +1761,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           controlOrder: controls.map((control) => control.dataset.objectControl),
           deleteAtFarRight: Math.abs(tileRect.right - deleteRect.right) <= 12,
           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),
           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))
@@ -1724,6 +1773,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         controlOrder: ["visibility", "lock", "delete"],
         deleteAtFarRight: true,
         deleteTitle: "Delete this object",
+        iconFontsUseNerd: true,
+        iconKeys: ["eye", "unlock", "delete"],
         iconSizes: [26, 26, 26],
         stacked: true
       });
@@ -1735,11 +1786,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete'] .object-vector-studio-v2__tile-icon--delete")).toHaveCount(1);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']").click();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-hidden/);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility'] [data-ovs-icon-key='eyeOff']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id]")).toHaveCount(0);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']").click();
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility'] [data-ovs-icon-key='eye']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id]")).toHaveCount(2);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']").click();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-locked/);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock'] [data-ovs-icon-key='lock']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeDisabled();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete']")).toBeDisabled();
       await page.locator('[data-shape-tool="line"]').click();

tools/object-vector-studio-v2/js/ToolStarterApp.js

@@ -16,6 +16,81 @@ const MAX_ZOOM = 0.5;
 const MIN_ZOOM = 0.01;
 const ZOOM_STEP = 0.01;
 
+const OBJECT_VECTOR_STUDIO_ICON_GLYPHS = Object.freeze({
+  add: "\uf067",
+  angle: "\uf1de",
+  arc: "\uf1da",
+  bringForward: "\uf062",
+  bringFront: "\uf102",
+  center: "\uf192",
+  circle: "\uf111",
+  delete: "\uf00d",
+  duplicate: "\uf0c5",
+  edit: "\uf044",
+  ellipse: "\uf111",
+  eye: "\uf06e",
+  eyeOff: "\uf070",
+  grid: "\uf00a",
+  group: "\uf247",
+  line: "\uf068",
+  lock: "\uf023",
+  move: "\uf047",
+  panDown: "\uf063",
+  panLeft: "\uf060",
+  panRight: "\uf061",
+  panUp: "\uf062",
+  polygon: "\uf1fe",
+  rectangle: "\uf096",
+  reset: "\uf0e2",
+  resize: "\uf065",
+  rotate: "\uf01e",
+  scale: "\uf065",
+  select: "\uf245",
+  sendBack: "\uf103",
+  sendBackward: "\uf063",
+  text: "\uf031",
+  triangle: "\uf0d8",
+  ungroup: "\uf248",
+  unlock: "\uf09c",
+  zoomIn: "\uf00e",
+  zoomOut: "\uf010"
+});
+
+const OBJECT_VECTOR_STUDIO_STATIC_ICON_TARGETS = Object.freeze([
+  ["#objectVectorStudioV2AddTagButton", "add"],
+  ["#objectVectorStudioV2AddObjectButton", "add"],
+  ["#objectVectorStudioV2RenameObjectButton", "edit"],
+  ["#objectVectorStudioV2DuplicateObjectButton", "duplicate"],
+  ["#objectVectorStudioV2DeleteObjectButton", "delete"],
+  ["#objectVectorStudioV2ZoomOutButton", "zoomOut"],
+  ["#objectVectorStudioV2ZoomInButton", "zoomIn"],
+  ["#objectVectorStudioV2PanUpButton", "panUp"],
+  ["#objectVectorStudioV2PanDownButton", "panDown"],
+  ["#objectVectorStudioV2PanLeftButton", "panLeft"],
+  ["#objectVectorStudioV2PanRightButton", "panRight"],
+  ["#objectVectorStudioV2ResetViewButton", "reset"],
+  ["#objectVectorStudioV2CenterDotButton", "center"],
+  ["#objectVectorStudioV2DuplicateFrameButton", "duplicate"],
+  ["#objectVectorStudioV2GridSnapButton", "grid"],
+  ["#objectVectorStudioV2AngleSnapButton", "angle"],
+  ["#objectVectorStudioV2GridRenderButton", "grid"],
+  [".object-vector-studio-v2__shape-icon--select", "select"],
+  [".object-vector-studio-v2__shape-icon--triangle", "triangle"],
+  [".object-vector-studio-v2__shape-icon--rectangle", "rectangle"],
+  [".object-vector-studio-v2__shape-icon--circle", "circle"],
+  [".object-vector-studio-v2__shape-icon--ellipse", "ellipse"],
+  [".object-vector-studio-v2__shape-icon--line", "line"],
+  [".object-vector-studio-v2__shape-icon--polygon", "polygon"],
+  [".object-vector-studio-v2__shape-icon--arc", "arc"],
+  [".object-vector-studio-v2__shape-icon--text", "text"],
+  [".object-vector-studio-v2__z-icon--bring-forward", "bringForward"],
+  [".object-vector-studio-v2__z-icon--send-backward", "sendBackward"],
+  [".object-vector-studio-v2__z-icon--bring-front", "bringFront"],
+  [".object-vector-studio-v2__z-icon--send-back", "sendBack"],
+  [".object-vector-studio-v2__z-icon--group", "group"],
+  [".object-vector-studio-v2__z-icon--ungroup", "ungroup"]
+]);
+
 const OBJECT_STATE_IDS = Object.freeze(["idle", "thrust", "damaged", "destroyed", "active", "inactive"]);
 
 const OBJECT_STATE_LABELS = Object.freeze({
@@ -263,6 +338,7 @@ export class ToolStarterApp {
       }
     });
     this.statusLog.mount();
+    this.applyNerdFontIcons();
     this.bindObjectActions();
     this.bindToolToggles();
     this.bindSnapControls();
@@ -404,6 +480,22 @@ export class ToolStarterApp {
     this.elements.ungroupButton.addEventListener("click", () => this.ungroupSelectedShapes());
   }
 
+  applyNerdFontIcons() {
+    OBJECT_VECTOR_STUDIO_STATIC_ICON_TARGETS.forEach(([selector, iconKey]) => {
+      this.window.document.querySelectorAll(selector).forEach((element) => this.applyIconGlyph(element, iconKey));
+    });
+  }
+
+  applyIconGlyph(element, iconKey) {
+    const glyph = OBJECT_VECTOR_STUDIO_ICON_GLYPHS[iconKey];
+    if (!element || !glyph) {
+      return;
+    }
+    element.dataset.ovsIcon = glyph;
+    element.dataset.ovsIconKey = iconKey;
+    element.classList.add("object-vector-studio-v2__nerd-icon");
+  }
+
   bindAnimationControls() {
     this.elements.duplicateFrameButton.addEventListener("click", () => this.duplicateSelectedFrame());
     this.elements.frameEarlierButton.addEventListener("click", () => this.moveSelectedFrame("earlier"));
@@ -1019,6 +1111,8 @@ export class ToolStarterApp {
     icon.className = `object-vector-studio-v2__tile-icon object-vector-studio-v2__tile-icon--${kind}`;
     icon.classList.toggle("is-off", !isActive);
     icon.setAttribute("aria-hidden", "true");
+    const iconKey = kind === "eye" && !isActive ? "eyeOff" : kind === "lock" && !isActive ? "unlock" : kind;
+    this.applyIconGlyph(icon, iconKey);
     return icon;
   }
 
@@ -1474,6 +1568,7 @@ export class ToolStarterApp {
     applyButton.id = "objectVectorStudioV2ApplyGeometryButton";
     applyButton.type = "button";
     applyButton.textContent = "Apply Geometry";
+    this.applyIconGlyph(applyButton, "edit");
     applyButton.addEventListener("click", () => this.applyShapeGeometryEdits());
     section.append(heading, grid, applyButton);
     return section;
@@ -1515,16 +1610,17 @@ export class ToolStarterApp {
     const actions = document.createElement("div");
     actions.className = "object-vector-studio-v2__shape-actions";
     [
-      ["objectVectorStudioV2MoveShapeButton", "Move", () => this.moveSelectedShape()],
-      ["objectVectorStudioV2RotateShapeButton", "Rotate", () => this.rotateSelectedShape()],
-      ["objectVectorStudioV2ScaleShapeButton", "Scale", () => this.scaleSelectedShape()],
-      ["objectVectorStudioV2ResizeShapeButton", "Resize", () => this.resizeSelectedShape()],
-      ["objectVectorStudioV2ApplyOriginButton", "Apply Origin", () => this.applySelectedShapeOrigin()]
-    ].forEach(([id, label, handler]) => {
+      ["objectVectorStudioV2MoveShapeButton", "Move", "move", () => this.moveSelectedShape()],
+      ["objectVectorStudioV2RotateShapeButton", "Rotate", "rotate", () => this.rotateSelectedShape()],
+      ["objectVectorStudioV2ScaleShapeButton", "Scale", "scale", () => this.scaleSelectedShape()],
+      ["objectVectorStudioV2ResizeShapeButton", "Resize", "resize", () => this.resizeSelectedShape()],
+      ["objectVectorStudioV2ApplyOriginButton", "Apply Origin", "center", () => this.applySelectedShapeOrigin()]
+    ].forEach(([id, label, iconKey, handler]) => {
       const button = document.createElement("button");
       button.id = id;
       button.type = "button";
       button.textContent = label;
+      this.applyIconGlyph(button, iconKey);
       button.addEventListener("click", handler);
       actions.append(button);
     });