Clean up Object panel tag layout and selected geometry summary display - PR_26133_014-object-panel-and-geometry-summary-cleanup

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_013 Playwright V8 Coverage Report
+# PR_26133_014 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,13 +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`: 92%, executed lines 3689/3689, executed functions 393/426.
-  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 102/102, executed functions 4/5.
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 92%, executed lines 3701/3701, executed functions 395/428.
 - 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: 47 passed.
-- Focused Object Vector Studio V2 layout, preview coordinate, mouse-editing, and asset-authoring scenarios passed.
-- Coverage includes the runtime paths for transform summary updates, negative snapped movement, compact preview controls, Up/Down panning, larger center dot rendering, preview mouse edits, polygon X/Y point-list geometry editing, invalid point rejection, and two-row inline ellipse fields. The compact Add/Rename/Dup/Delete object action row is covered by Playwright layout assertions.
+- Focused Object Vector Studio V2 layout, preview coordinate, animation-state, and asset-authoring scenarios passed.
+- Coverage includes the runtime paths for cleaned Object Details summary rendering and explicit selected-shape color labeling. Tag-row layout, Polygon Geometry spacing, and removal of duplicate/helper text are covered by Playwright layout/text assertions.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,25 +1,21 @@
-# PR_26133_013 Workspace V2 Results
+# PR_26133_014 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.
-- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2 (layout shell|preview coordinates|preview shapes with mouse actions|asset authoring controls)"`: 4 passed.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2 (layout shell|preview coordinates|animation states|asset authoring controls)"`: 4 passed.
 - `npm run test:workspace-v2`: 47 passed.
 - `git diff --check`: passed with LF-to-CRLF working-copy warnings for touched files.
 
 ## Targeted Object Vector Studio V2 Verification
 
-- Confirmed negative snapped Move X/Move Y values move the selected shape back across both axes instead of snapping half-step negatives to zero.
-- Confirmed Object Transform summary renders as `Transform x 0, y 0, rot 0, scale 1 x 1` and updates after transform actions.
-- Confirmed Object Preview controls use compact final-word labels and include working Up/Down pan controls after In.
-- Confirmed Object actions render as a single compact Add/Rename/Dup/Delete row.
-- Confirmed the center origin dot renders at radius 9.
-- Confirmed preview mouse drag, negative drag, rectangle handle resize, and line endpoint movement still edit the selected shape.
-- Confirmed Polygon Geometry renders separate X/Y point inputs, applies valid edits, marks invalid point cells with `aria-invalid`, and preserves invalid text without partial apply.
-- Confirmed the polygon point list uses a fixed scrolling area.
-- Confirmed Ellipse Geometry renders as two inline label/input rows: Cx/Cy, then Rx/Ry.
-- Confirmed Object Preview coordinate/grid/zoom expectations from prior PRs remain covered by the workspace-v2 suite.
+- Confirmed Object Tag input and Add button render inline with no visible `Tag` label text.
+- Confirmed Polygon Geometry section spacing is reduced to 5px, including section gap, point-list gap, and heading margins.
+- Confirmed Object Details no longer renders the helper text or duplicate `Selected Shape` summary text.
+- Confirmed Object Details keeps concise shape/group metadata without the duplicate selected-shape heading.
+- Confirmed selected shape color is labeled as `Fill Color`, `Stroke Color`, or `Transparent Color` so transparent/background state is not confused with the selected color.
+- Confirmed Object Vector Studio V2 geometry editing and animation detail states remain covered by the targeted workspace-v2 slice.
 - Confirmed targeted Object Vector Studio tests reported no console/page errors.
 
 ## Scope Checks

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1218,21 +1218,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const objectPanelLayout = await page.locator("#objectVectorStudioV2ObjectContent").evaluate((element) => {
         const nameLabel = element.querySelector("label[for='objectVectorStudioV2ObjectNameInput'] span");
         const nameInput = element.querySelector("#objectVectorStudioV2ObjectNameInput");
-        const tagLabel = element.querySelector("label[for='objectVectorStudioV2ObjectTagInput'] span");
         const tagInput = element.querySelector("#objectVectorStudioV2ObjectTagInput");
+        const tagButton = element.querySelector("#objectVectorStudioV2AddTagButton");
         const actions = element.querySelector(".object-vector-studio-v2__object-actions");
         const actionButtons = Array.from(actions.querySelectorAll("button"));
         const actionButtonRects = actionButtons.map((button) => button.getBoundingClientRect());
+        const tagInputRect = tagInput.getBoundingClientRect();
+        const tagButtonRect = tagButton.getBoundingClientRect();
         return {
           actionButtonLabels: actionButtons.map((button) => button.textContent.trim()),
           actionButtonMaxHeight: Math.max(...actionButtonRects.map((rect) => Math.round(rect.height))),
           actionsSingleLine: actionButtonRects.every((rect) => Math.abs(rect.top - actionButtonRects[0].top) < 2),
           actionsAtBottom: actions.getBoundingClientRect().bottom >= element.getBoundingClientRect().bottom - 12,
           nameInline: Math.abs((nameLabel.getBoundingClientRect().top + nameLabel.getBoundingClientRect().height / 2) - (nameInput.getBoundingClientRect().top + nameInput.getBoundingClientRect().height / 2)) < 4,
-          tagInline: Math.abs((tagLabel.getBoundingClientRect().top + tagLabel.getBoundingClientRect().height / 2) - (tagInput.getBoundingClientRect().top + tagInput.getBoundingClientRect().height / 2)) < 4
+          noVisibleTagLabel: element.querySelector("label[for='objectVectorStudioV2ObjectTagInput']") === null,
+          tagAddText: tagButton.textContent.trim(),
+          tagAriaLabel: tagInput.getAttribute("aria-label"),
+          tagInline: Math.abs((tagInputRect.top + tagInputRect.height / 2) - (tagButtonRect.top + tagButtonRect.height / 2)) < 4 && tagInputRect.right <= tagButtonRect.left
         };
       });
-      expect(objectPanelLayout).toEqual({ actionButtonLabels: ["Add", "Rename", "Dup", "Delete"], actionButtonMaxHeight: 28, actionsAtBottom: true, actionsSingleLine: true, nameInline: true, tagInline: true });
+      expect(objectPanelLayout).toEqual({ actionButtonLabels: ["Add", "Rename", "Dup", "Delete"], actionButtonMaxHeight: 28, actionsAtBottom: true, actionsSingleLine: true, nameInline: true, noVisibleTagLabel: true, tagAddText: "Add", tagAriaLabel: "Object tag", tagInline: true });
       await page.locator("#objectVectorStudioV2ObjectNameInput").fill("Blocked Object");
       await page.locator("#objectVectorStudioV2AddObjectButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Add object blocked: load a schema-valid Object Vector Studio V2 payload before adding objects\./);
@@ -1550,34 +1555,37 @@ 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-tile-shape-id='rectangle-1']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"selectedShape"');
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"type": "rectangle"');
-      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Editable fields below are limited to schema-valid geometry");
-      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Selected Shaperectangle-1 (rectangle)");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Editable fields below are limited to schema-valid geometry");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Selected Shape");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Shaperectangle-1 (rectangle)");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Transform");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails #objectVectorStudioV2MoveShapeButton")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ObjectTransform")).toContainText("Selected Shape: rectangle-1");
       await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 0, y 0, rot 0, scale 1 x 1");
       await expect(page.locator("#objectVectorStudioV2ObjectTransform #objectVectorStudioV2MoveShapeButton")).toHaveCount(1);
       const objectDetailsOrder = await page.locator("#objectVectorStudioV2ObjectDetails").evaluate((details) => {
         const applyButton = details.querySelector("#objectVectorStudioV2ApplyGeometryButton");
-        const summaryHeading = Array.from(details.querySelectorAll("h3")).find((heading) => heading.textContent.trim() === "Selected Shape: rectangle-1");
+        const summaryGrid = details.querySelector(".object-vector-studio-v2__shape-panel .object-vector-studio-v2__object-detail-grid");
         return {
-          applyBeforeSummary: Boolean(applyButton && summaryHeading && (applyButton.compareDocumentPosition(summaryHeading) & Node.DOCUMENT_POSITION_FOLLOWING)),
-          summaryItems: Array.from(details.querySelectorAll("h4, #objectVectorStudioV2ApplyGeometryButton, h3, .object-vector-studio-v2__detail-label, .object-vector-studio-v2__detail-value, .tool-starter__hint"))
-            .map((element) => element.textContent.trim())
+          applyBeforeSummary: Boolean(applyButton && summaryGrid && (applyButton.compareDocumentPosition(summaryGrid) & Node.DOCUMENT_POSITION_FOLLOWING)),
+          noHelperText: !details.textContent.includes("Editable fields below"),
+          noSelectedShapeText: !details.textContent.includes("Selected Shape"),
+          summaryItems: Array.from(details.querySelectorAll("h4, #objectVectorStudioV2ApplyGeometryButton, .object-vector-studio-v2__detail-label, .object-vector-studio-v2__detail-value"))
+            .map((element) => element.textContent.trim()),
         };
       });
       expect(objectDetailsOrder.applyBeforeSummary).toBe(true);
+      expect(objectDetailsOrder.noHelperText).toBe(true);
+      expect(objectDetailsOrder.noSelectedShapeText).toBe(true);
       expect(objectDetailsOrder.summaryItems).toEqual([
         "Rectangle Geometry",
         "Apply Geometry",
-        "Selected Shape: rectangle-1",
-        "Selected Shape",
+        "Shape",
         "rectangle-1 (rectangle)",
         "Group",
         "None",
-        "Color",
-        "#ffffff",
-        "Editable fields below are limited to schema-valid geometry fields for the selected shape."
+        "Fill Color",
+        "#ffffff"
       ]);
       const transformFieldLayout = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => (
         Array.from(panel.querySelectorAll(".object-vector-studio-v2__edit-field--inline")).map((field) => {
@@ -2272,10 +2280,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         { label: "Point 4", x: "-14", y: "16" }
       ]);
       const polygonPointListLayout = await page.locator("#objectVectorStudioV2ObjectDetails .object-vector-studio-v2__polygon-point-list").evaluate((list) => ({
+        headingMarginBottom: Number.parseFloat(getComputedStyle(list.previousElementSibling).marginBottom),
+        headingMarginTop: Number.parseFloat(getComputedStyle(list.previousElementSibling).marginTop),
+        listGap: Number.parseFloat(getComputedStyle(list).gap),
         maxHeight: Number.parseFloat(getComputedStyle(list).maxHeight),
-        overflowY: getComputedStyle(list).overflowY
+        overflowY: getComputedStyle(list).overflowY,
+        sectionGap: Number.parseFloat(getComputedStyle(list.closest(".object-vector-studio-v2__edit-panel--polygon")).gap)
       }));
-      expect(polygonPointListLayout).toEqual({ maxHeight: 138, overflowY: "auto" });
+      expect(polygonPointListLayout).toEqual({ headingMarginBottom: 0, headingMarginTop: 0, listGap: 5, maxHeight: 138, overflowY: "auto", sectionGap: 5 });
       await page.locator("#objectVectorStudioV2ObjectDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']").fill("17");
       await page.locator("#objectVectorStudioV2ApplyGeometryButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='asteroids-ship-outline']")).toHaveAttribute("points", "0,-180 140,170 0,80 -140,160");
@@ -2791,7 +2803,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='idle']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='idle-frame-1']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"id": "idle"');
-      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Selected Shape");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Selected Shape");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("ship-template-hull");
 
       await page.locator("#objectVectorStudioV2DuplicateFrameButton").click();

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

@@ -61,11 +61,8 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <input id="objectVectorStudioV2ObjectNameInput" type="text" autocomplete="off" placeholder="Object name">
             </label>
             <div class="object-vector-studio-v2__tag-editor" aria-label="Object tags">
-              <label class="tool-starter__field tool-starter__field--compact" for="objectVectorStudioV2ObjectTagInput">
-                <span>Tag</span>
-                <input id="objectVectorStudioV2ObjectTagInput" type="text" autocomplete="off" placeholder="Add tag">
-              </label>
-              <button id="objectVectorStudioV2AddTagButton" type="button">Add Tag</button>
+              <input id="objectVectorStudioV2ObjectTagInput" type="text" autocomplete="off" placeholder="Add tag" aria-label="Object tag">
+              <button id="objectVectorStudioV2AddTagButton" type="button" title="Add tag">Add</button>
               <div id="objectVectorStudioV2ObjectTagList" class="object-vector-studio-v2__tag-list" aria-label="Selected object tags"></div>
             </div>
             <div class="object-vector-studio-v2__object-actions" aria-label="Object actions">

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

@@ -1323,11 +1323,9 @@ export class ToolStarterApp {
     if (!shape) {
       const shapePanel = document.createElement("section");
       shapePanel.className = "object-vector-studio-v2__shape-panel";
-      const heading = document.createElement("h3");
-      heading.textContent = "Selected Shape";
       const empty = document.createElement("p");
       empty.textContent = "No shape selected. Create a primitive from Shape/Tools.";
-      shapePanel.append(heading, empty);
+      shapePanel.append(empty);
       wrapper.append(shapePanel);
       return wrapper;
     }
@@ -1339,19 +1337,32 @@ export class ToolStarterApp {
   createSelectedShapeSummary(shape) {
     const shapePanel = document.createElement("section");
     shapePanel.className = "object-vector-studio-v2__shape-panel";
-    const heading = document.createElement("h3");
-    heading.textContent = `Selected Shape: ${shape.id}`;
-    const editableHint = document.createElement("p");
-    editableHint.className = "tool-starter__hint";
-    editableHint.textContent = "Editable fields below are limited to schema-valid geometry fields for the selected shape.";
-    shapePanel.append(heading, this.createDetailGrid([
-      ["Selected Shape", `${shape.id} (${shape.type})`],
+    const [colorLabel, colorValue] = this.selectedShapeColorEntry(shape);
+    shapePanel.append(this.createDetailGrid([
+      ["Shape", `${shape.id} (${shape.type})`],
       ["Group", shape.groupId || "None"],
-      ["Color", shape.style.fill === "none" ? shape.style.stroke : shape.style.fill]
-    ]), editableHint);
+      [colorLabel, colorValue]
+    ]));
     return shapePanel;
   }
 
+  selectedShapeColorEntry(shape) {
+    const fill = String(shape.style?.fill || "").trim();
+    const stroke = String(shape.style?.stroke || "").trim();
+    if (fill && !this.isTransparentColor(fill)) {
+      return ["Fill Color", fill];
+    }
+    if (stroke && !this.isTransparentColor(stroke)) {
+      return ["Stroke Color", stroke];
+    }
+    return ["Transparent Color", fill || stroke || "none"];
+  }
+
+  isTransparentColor(color) {
+    const normalized = String(color || "").trim().toLowerCase();
+    return !normalized || normalized === "none" || normalized === "transparent" || /^rgba\([^)]*,\s*0(?:\.0+)?\)$/u.test(normalized);
+  }
+
   createObjectTransformDetails(shape) {
     const wrapper = document.createElement("div");
     wrapper.className = "object-vector-studio-v2__object-detail-stack";
@@ -1398,6 +1409,9 @@ export class ToolStarterApp {
   createShapeGeometryControls(shape) {
     const section = document.createElement("section");
     section.className = "object-vector-studio-v2__edit-panel";
+    if (shape.type === "polygon") {
+      section.classList.add("object-vector-studio-v2__edit-panel--polygon");
+    }
     const heading = document.createElement("h4");
     heading.textContent = `${shapeTypeLabel(shape)} Geometry`;
     const grid = document.createElement("div");

tools/object-vector-studio-v2/styles/toolStarter.css

@@ -1438,12 +1438,20 @@ textarea:hover {
 
 .object-vector-studio-v2__polygon-point-list {
   display: grid;
-  gap: 6px;
+  gap: 5px;
   max-height: 138px;
   overflow-y: auto;
   padding-right: 2px;
 }
 
+.object-vector-studio-v2__edit-panel--polygon {
+  gap: 5px;
+}
+
+.object-vector-studio-v2__edit-panel--polygon h4 {
+  margin: 0;
+}
+
 .object-vector-studio-v2__edit-grid--ellipse {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1580,7 +1588,23 @@ textarea:hover {
   gap: 8px;
 }
 
+.object-vector-studio-v2__tag-editor {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 5px;
+}
+
+.object-vector-studio-v2__tag-editor input {
+  width: 100%;
+}
+
+#objectVectorStudioV2AddTagButton {
+  min-height: 28px;
+  padding: 3px 7px !important;
+}
+
 .object-vector-studio-v2__tag-list {
+  grid-column: 1 / -1;
   grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
 }