Separate Object Transform into its own accordion section in Object Vector Studio V2 - PR_26133_010-object-transform-accordion-separation

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,19 +1,19 @@
-# PR_26133_009 Playwright V8 Coverage Report
+# PR_26133_010 Playwright V8 Coverage Report
 
 Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
 ## Summary
 
 - 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`: 91%, executed lines 3313/3313, executed functions 348/384.
-  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 99/99, executed functions 4/5.
-- The generated report lists `tools/object-vector-studio-v2/js/ToolStarterApp.js` as a changed JS file with browser V8 coverage.
+- Changed Object Vector Studio V2 runtime coverage entries:
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 91%, executed lines 3335/3335, executed functions 349/385.
+  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 100/100, executed functions 4/5.
+- 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: 46 passed.
-- Focused Object Vector Studio V2 layout and preview-coordinate scenarios also passed.
-- Manual Object Preview probe confirmed the applied zoom hack values, confirmed default view, max zoom cap, preserved logical coordinates, and no console/runtime errors.
+- Focused Object Vector Studio V2 layout scenario passed.
+- Manual Object Transform probe confirmed accordion separation, transform controls, collapse/reopen behavior, a move action, compact layout, and no console/runtime errors.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,29 +1,28 @@
-# PR_26133_009 Workspace V2 Results
+# PR_26133_010 Workspace V2 Results
 
 ## Command Results
 
 - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`: passed.
+- `node --check tools/object-vector-studio-v2/js/bootstrap.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)"`: 2 passed.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "shows Object Vector Studio V2 layout shell and schema-only palette gate"`: 1 passed.
 - `npm run test:workspace-v2`: 46 passed.
-- `git diff --check`: passed with the existing LF-to-CRLF working-copy warning for `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`.
+- `git diff --check`: passed with LF-to-CRLF working-copy warnings for touched files.
 
-## Targeted Object Preview Verification
+## Targeted Object Vector Studio V2 Verification
 
-- Standalone Playwright manual probe reported `consoleErrors: []` and `pageErrors: []`.
-- Confirmed values are applied: `DEFAULT_VIEWPORT.zoom = 0.1`, `MAX_ZOOM = 0.5`, and zoom text/status use `formatZoomPercentage() * 10`.
-- Startup/default Object Preview display is `Origin: 0, 0 | Canvas 0,0 centered | Zoom 100%` with viewBox `-1600 -1100 3200 2200`.
-- Zoom in from startup displays `Zoom 110%` with viewBox `-1454.545 -1000 2909.091 2000`.
-- Max zoom clamps at the confirmed cap: `Zoom 500%` with viewBox `-320 -220 640 440`.
-- Internal `0.25` displays `Zoom 250%` with viewBox `-640 -440 1280 880`.
-- Visual scale remains aligned to the confirmed grid/object contract: grid step `10`, Asteroids ship drawn points `0,-180`, `140,160`, `0,80`, `-140,160`.
-- Pointer/origin coordinate math remains logical: panned origin displays `Origin: 2, 0`; grid-space pointer `-140,-160` displays `Pointer -14, -16`.
+- Confirmed left accordion order: `Object`, `Object Details`, `Object Transform`, `Objects`.
+- Confirmed `Object Transform` renders directly under `Object Details`.
+- Confirmed `Object Details` no longer contains Transform text or transform action buttons.
+- Confirmed `Object Transform` contains the selected-shape transform section and the existing move/rotate/scale/resize/origin controls.
+- Confirmed `Object Transform` collapses and reopens through the existing accordion behavior.
+- Confirmed transform functionality by moving the selected rectangle and verifying JSON updated with transform `x: 7`.
+- Confirmed compact left sections use non-growing layout and their content reaches the section bottom.
+- Confirmed manual probe reported `consoleErrors: []` and `pageErrors: []`.
 
-## Contract Checks
+## Scope Checks
 
-- Canvas size was not changed.
-- Grid size was not changed.
-- Object drawing scale was not changed.
-- Pointer/origin coordinate normalization was preserved.
+- Transform controls were moved without changing their handlers.
+- Existing Object Vector Studio V2 JSON contracts were preserved.
 - No sample JSON files were changed.
 - No unrelated tool/runtime files were changed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1193,7 +1193,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ExportJsonButton")).toBeDisabled();
       await expect(page.locator("#objectVectorStudioV2ExportSvgButton")).toBeDisabled();
 
-      await expect(page.locator(".tool-starter__panel--left > .accordion-v2 > .accordion-v2__header > span:first-child")).toHaveText(["Object", "Object Details (0 obj, 0 shapes)", "Objects"]);
+      await expect(page.locator(".tool-starter__panel--left > .accordion-v2 > .accordion-v2__header > span:first-child")).toHaveText(["Object", "Object Details (0 obj, 0 shapes)", "Object Transform", "Objects"]);
       await expect(page.locator(".tool-starter__panel--right > .accordion-v2 > .accordion-v2__header > span:first-child")).toHaveText(["Shape/Tools", "Palette (0 swatches)", "JSON Details", "Dependency Graph", "Status Log"]);
       await expect(page.locator(".tool-starter__panel--right > .accordion-v2").first().locator(".accordion-v2__header > span:first-child")).toHaveText("Shape/Tools");
       await expect(page.locator("#objectVectorStudioV2JsonDetailsContent")).toBeHidden();
@@ -1202,6 +1202,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2PaletteSwatchCount")).toHaveText("(0 swatches)");
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("No objects loaded");
       await expect(page.locator("#objectVectorStudioV2ObjectDetailsCount")).toHaveText("(0 obj, 0 shapes)");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform")).toHaveText("No shape selected.");
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeDisabled();
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toHaveAttribute("data-disabled-reason", "Disabled until a schema-valid object is selected.");
       await expect(page.locator("#objectVectorStudioV2DeleteObjectButton")).toBeDisabled();
@@ -1544,6 +1545,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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("Transform");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails #objectVectorStudioV2MoveShapeButton")).toHaveCount(0);
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform")).toContainText("Selected Shape: rectangle-1");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform")).toContainText("Transform");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform #objectVectorStudioV2MoveShapeButton")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2ObjectDetailsActions")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ShapeVisibilityButton")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ShapeLockButton")).toHaveCount(0);
@@ -1729,6 +1735,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await clickPreviewShape("rectangle-1");
       await expect(page.locator("[data-palette-color='#6fd3ff']")).toHaveClass(/is-selected/);
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Rectangle Geometry");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform")).toContainText("Transform");
+      await page.locator('button[aria-controls="objectVectorStudioV2ObjectTransformContent"]').click();
+      await expect(page.locator("#objectVectorStudioV2ObjectTransformContent")).toBeHidden();
+      await page.locator('button[aria-controls="objectVectorStudioV2ObjectTransformContent"]').click();
+      await expect(page.locator("#objectVectorStudioV2ObjectTransformContent")).toBeVisible();
       const reviewLayoutState = await page.evaluate(() => {
         const jsonContent = document.querySelector("#objectVectorStudioV2JsonDetailsContent");
         const statusSection = document.querySelector("#statusLogContent").closest(".accordion-v2");
@@ -1980,10 +1991,22 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator('[data-object-id="object.asteroids.object-1"]')).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted object Shield Pickup\./);
 
-      const leftOpenHeights = await page.locator(".tool-starter__panel--left .accordion-v2.is-open").evaluateAll((sections) => (
-        sections.map((section) => Math.round(section.getBoundingClientRect().height))
+      const leftAccordionLayout = await page.locator(".tool-starter__panel--left > .accordion-v2").evaluateAll((sections) => (
+        sections.map((section) => {
+          const content = section.querySelector(".accordion-v2__content");
+          const sectionRect = section.getBoundingClientRect();
+          const contentRect = content?.getBoundingClientRect();
+          const style = getComputedStyle(section);
+          return {
+            contentReachesSectionBottom: !content || content.hidden || Math.abs(contentRect.bottom - sectionRect.bottom) <= 2,
+            flexGrow: style.flexGrow,
+            isOpen: section.classList.contains("is-open"),
+            title: section.querySelector(".accordion-v2__header > span:first-child")?.textContent.trim() || ""
+          };
+        })
       ));
-      expect(Math.max(...leftOpenHeights) - Math.min(...leftOpenHeights)).toBeLessThanOrEqual(18);
+      expect(leftAccordionLayout.map((entry) => entry.title)).toEqual(["Object", "Object Details (18 obj, 2 shapes)", "Object Transform", "Objects"]);
+      expect(leftAccordionLayout.slice(0, 3).every((entry) => entry.isOpen && entry.contentReachesSectionBottom && entry.flexGrow === "0")).toBe(true);
 
       const tileScrollState = await page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => ({
         actionsInsideObjects: element.querySelector(":scope > .object-vector-studio-v2__objects-actions") !== null,

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

@@ -50,7 +50,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
 
     <main class="tool-starter object-vector-studio-v2 app-shell" data-tool-id="object-vector-studio-v2">
       <aside class="tool-starter__panel tool-starter__panel--left" aria-label="Tool inputs">
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ObjectContent">
             <span>Object</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -77,7 +77,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
           </div>
         </section>
 
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ObjectDetailsContent">
             <span>Object Details <span id="objectVectorStudioV2ObjectDetailsCount" class="object-vector-studio-v2__header-count">(0 obj, 0 shapes)</span></span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -87,6 +87,16 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
           </div>
         </section>
 
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ObjectTransformContent">
+            <span>Object Transform</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="objectVectorStudioV2ObjectTransformContent" class="accordion-v2__content object-vector-studio-v2__scroll-content">
+            <div id="objectVectorStudioV2ObjectTransform" class="object-vector-studio-v2__details">No shape selected.</div>
+          </div>
+        </section>
+
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ObjectsContent">
             <span>Objects</span>

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

@@ -657,6 +657,7 @@ export class ToolStarterApp {
     this.renderObjectTagList(null);
     this.elements.paletteSummary.textContent = this.runtimePalette ? "" : "Palette required before render.";
     this.elements.objectDetails.textContent = "No object selected.";
+    this.elements.objectTransform.textContent = "No shape selected.";
     this.elements.objectPreviewFooter.textContent = "Object ID: none";
     this.elements.jsonDetails.textContent = "{}";
     this.renderFrameTimeline();
@@ -815,6 +816,7 @@ export class ToolStarterApp {
     this.elements.objectTagInput.value = "";
     this.renderObjectTagList(null);
     this.elements.objectDetails.textContent = "Runtime palette required before object render.";
+    this.elements.objectTransform.textContent = "Runtime palette required before object transform.";
     this.elements.objectPreviewFooter.textContent = "Object ID: none";
     this.elements.jsonDetails.textContent = "{}";
     this.renderFrameTimeline();
@@ -1171,6 +1173,7 @@ export class ToolStarterApp {
       this.renderObjectTagList(null);
       this.updateObjectDetailsHeader(this.currentPayload?.objects.length || 0, 0);
       this.elements.objectDetails.textContent = "No object selected.";
+      this.elements.objectTransform.textContent = "No shape selected.";
       this.elements.objectPreviewFooter.textContent = "Object ID: none";
       this.elements.jsonDetails.textContent = "{}";
       this.renderFrameTimeline();
@@ -1182,6 +1185,7 @@ export class ToolStarterApp {
     this.renderObjectTagList(selected);
     this.updateObjectDetailsHeader(this.currentPayload.objects.length, selected.shapes.length);
     this.elements.objectDetails.replaceChildren(this.createObjectDetails(selected, shape));
+    this.elements.objectTransform.replaceChildren(this.createObjectTransformDetails(shape));
     this.elements.objectPreviewFooter.textContent = `Object ID: ${selected.id}`;
     this.elements.jsonDetails.textContent = JSON.stringify({
       object: selected,
@@ -1290,23 +1294,43 @@ export class ToolStarterApp {
       return wrapper;
     }
 
-    const transform = this.shapeTransform(shape);
     const editableHint = document.createElement("p");
     editableHint.className = "tool-starter__hint";
-    editableHint.textContent = "Editable fields below are limited to schema-valid geometry, transform, visibility, lock, order, and grouping fields for the selected shape.";
+    editableHint.textContent = "Editable fields below are limited to schema-valid geometry fields for the selected shape.";
     shapePanel.append(this.createDetailGrid([
       ["Selected Shape", `${shape.id} (${shape.type})`],
       ["Group", shape.groupId || "None"],
-      ["Color", shape.style.fill === "none" ? shape.style.stroke : shape.style.fill],
-      ["Transform", `x ${transform.x}, y ${transform.y}, rot ${transform.rotation}, scale ${transform.scaleX} x ${transform.scaleY}`]
+      ["Color", shape.style.fill === "none" ? shape.style.stroke : shape.style.fill]
     ]));
     shapePanel.append(editableHint);
     shapePanel.append(this.createShapeGeometryControls(shape));
-    shapePanel.append(this.createShapeTransformControls(shape));
     wrapper.append(shapePanel);
     return wrapper;
   }
 
+  createObjectTransformDetails(shape) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "object-vector-studio-v2__object-detail-stack";
+    if (!shape) {
+      const empty = document.createElement("p");
+      empty.textContent = "No shape selected. Create a primitive from Shape/Tools.";
+      wrapper.append(empty);
+      return wrapper;
+    }
+
+    const transformPanel = document.createElement("section");
+    transformPanel.className = "object-vector-studio-v2__shape-panel";
+    const heading = document.createElement("h3");
+    heading.textContent = `Selected Shape: ${shape.id}`;
+    const transform = this.shapeTransform(shape);
+    transformPanel.append(heading, this.createDetailGrid([
+      ["Transform", `x ${transform.x}, y ${transform.y}, rot ${transform.rotation}, scale ${transform.scaleX} x ${transform.scaleY}`]
+    ]));
+    transformPanel.append(this.createShapeTransformControls(shape));
+    wrapper.append(transformPanel);
+    return wrapper;
+  }
+
   createDetailGrid(entries) {
     const grid = document.createElement("div");
     grid.className = "object-vector-studio-v2__object-detail-grid";

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

@@ -59,6 +59,7 @@ window.addEventListener("DOMContentLoaded", () => {
       objectPreviewFooter: requireElement("#objectVectorStudioV2ObjectPreviewFooter"),
       objectTagInput: requireElement("#objectVectorStudioV2ObjectTagInput"),
       objectTagList: requireElement("#objectVectorStudioV2ObjectTagList"),
+      objectTransform: requireElement("#objectVectorStudioV2ObjectTransform"),
       objectsContent: requireElement("#objectVectorStudioV2ObjectsContent"),
       objectTiles: requireElement("#objectVectorStudioV2ObjectTiles"),
       paintModeButton: requireElement("#objectVectorStudioV2PaintModeButton"),

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

@@ -206,6 +206,14 @@ textarea:hover {
   flex: 1 0 220px;
 }
 
+.tool-starter__panel--left > .accordion-v2.tool-starter__accordion--compact.is-open {
+  flex: 0 0 auto;
+}
+
+.tool-starter__panel--left > .accordion-v2.tool-starter__accordion--compact.is-open > .accordion-v2__content {
+  flex: 0 0 auto;
+}
+
 .accordion-v2 {
   --accordion-v2-accent: var(--tool-starter-accent);
   --accordion-v2-line: var(--tool-starter-line);