Add object-level transform accordion and reorganize shape transform layout - PR_26133_090-object-transform-accordion-and-layout-reorganization

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# Playwright V8 Coverage Report
+# Playwright V8 Coverage Report
 
-PR: PR_26133_089-auto-origin-terminology-final-polish
+PR: PR_26133_090-object-transform-accordion-and-layout-reorganization
 
 Command: `npm run test:workspace-v2`
 
@@ -9,10 +9,10 @@ Result: PASS
 Coverage source: Playwright/Chromium built-in V8 coverage from the final passing workspace-v2 run.
 
 Changed runtime JS coverage:
-- `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 95% entry coverage, 7574/7574 executed lines, 771/809 executed functions.
+- `tools/object-vector-studio-v2/js/bootstrap.js`: 83% entry coverage, 110/110 executed lines, 5/6 executed functions.
+- `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 94% entry coverage, 8031/8031 executed lines, 783/835 executed functions.
 
 Notes:
 - The generated detailed text artifact remains at `docs/dev/reports/playwright_v8_coverage_report.txt`.
 - Coverage is advisory for this PR; no new thresholds were introduced.
-- The changed runtime JS file was exercised by the passing Playwright run.
-- `tools/object-vector-studio-v2/js/bootstrap.js` remains covered by the run but is not changed by PR089.
+- The changed runtime JS files were exercised by the passing Playwright run.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,22 +1,21 @@
-# Playwright Workspace V2 Results
+# Playwright Workspace V2 Results
 
-PR: PR_26133_089-auto-origin-terminology-final-polish
+PR: PR_26133_090-object-transform-accordion-and-layout-reorganization
 
 Command: `npm run test:workspace-v2`
 
 Result: PASS
 
 Summary:
 - 54/54 Playwright tests passed.
-- Final run completed in 5.5 minutes.
-- Object Transform now shows `Auto Origin` directly under the Origin X/Y/Apply row.
-- The origin-balancing action no longer uses Auto Center or Balance Center wording.
-- Auto Origin coverage verifies origin/pivot recalculation from visible object bounds without changing geometry or moving visible bounds, and dirty state is set through the existing transform update path.
-- Select All rotation behavior from PR088 remains covered and passing.
-- Copy icon remains `nf-fa-copy`.
+- Final run completed in 5.2 minutes.
+- Object Transform now owns object-level Move, Rotate, Scale, Origin/Apply, Auto Origin, and Resize controls in the left column after Object.
+- Shape Transform is a separate right-column accordion directly under Shape/Tools and contains the existing single-shape transform workflow.
+- Shape Transform controls are disabled when multiple shapes are selected; Object Transform does not require Select All and can affect every shape in the selected object.
+- Right-column order now starts with Shape/Tools, Shape Transform, then Palette and Shape Geometry.
 - Existing console/page error assertions remained clean in the covered flows.
 
 Manual/targeted verification notes:
-- Origin controls remain grouped together: Origin row followed immediately by Auto Origin.
-- Preview Center dot control remains separate and unchanged.
-- Auto Origin logs an OK status after successful origin/pivot update.
+- Targeted layout, dirty-state, object authoring, and grouping/transform Playwright checks passed before the final full run.
+- Object-level move/rotate behavior was verified through updated Object Vector Studio V2 coverage.
+- Shape-level move/rotate/scale/resize behavior remains covered through the existing Shape Transform IDs.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -79,7 +79,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             <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 id="objectVectorStudioV2ObjectTransform" class="object-vector-studio-v2__details">No object selected.</div>
           </div>
         </section>
 
@@ -165,54 +165,6 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
       </section>
 
       <aside class="tool-starter__panel tool-starter__panel--right" aria-label="Tool output">
-        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact object-vector-studio-v2__palette-accordion is-open" data-accordion-v2-open="true">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2PaletteContent">
-            <span>Palette <span id="objectVectorStudioV2PaletteSwatchCount" class="object-vector-studio-v2__header-count">(0 swatches)</span></span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
-          <div id="objectVectorStudioV2PaletteContent" class="accordion-v2__content object-vector-studio-v2__scroll-content">
-            <div class="object-vector-studio-v2__palette-controls" aria-label="Palette paint controls">
-              <div class="object-vector-studio-v2__palette-primary-row">
-                <button id="objectVectorStudioV2PaintModeButton" type="button" aria-pressed="true">
-                  <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="paint" aria-hidden="true"></span>
-                  <span class="object-vector-studio-v2__palette-mode-label">Paint</span>
-                </button>
-                <button id="objectVectorStudioV2PalettePickerButton" class="object-vector-studio-v2__palette-picker-button" type="button" aria-pressed="false" data-shape-tool="picker" title="Sample a shape style into Palette controls" aria-label="Picker">
-                  <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--picker" aria-hidden="true"></span>
-                </button>
-                <button id="objectVectorStudioV2StrokeModeButton" type="button" aria-pressed="false">
-                  <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="stroke" aria-hidden="true"></span>
-                  <span class="object-vector-studio-v2__palette-mode-label">Stroke</span>
-                </button>
-                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeWidth">
-                  <span>Width</span>
-                  <input id="objectVectorStudioV2StrokeWidth" type="number" min="0.1" step="0.1" value="2">
-                </label>
-              </div>
-              <div class="object-vector-studio-v2__palette-opacity-row">
-                <span class="object-vector-studio-v2__palette-opacity-heading">Opacity</span>
-                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2FillOpacity">
-                  <span>Fill</span>
-                  <input id="objectVectorStudioV2FillOpacity" type="number" min="0" max="255" step="1" value="255">
-                </label>
-                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeOpacity">
-                  <span>Stroke</span>
-                  <input id="objectVectorStudioV2StrokeOpacity" type="number" min="0" max="255" step="1" value="255">
-                </label>
-              </div>
-            </div>
-            <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">
-              <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="tag" aria-pressed="false">Tag</button>
-            </div>
-          </div>
-        </section>
-
         <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ShapeToolsContent">
             <span>Shape/Tools</span>
@@ -275,6 +227,64 @@ <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="objectVectorStudioV2ShapeTransformContent">
+            <span>Shape Transform</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="objectVectorStudioV2ShapeTransformContent" class="accordion-v2__content object-vector-studio-v2__scroll-content">
+            <div id="objectVectorStudioV2ShapeTransform" class="object-vector-studio-v2__details">No shape selected.</div>
+          </div>
+        </section>
+
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact object-vector-studio-v2__palette-accordion is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2PaletteContent">
+            <span>Palette <span id="objectVectorStudioV2PaletteSwatchCount" class="object-vector-studio-v2__header-count">(0 swatches)</span></span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="objectVectorStudioV2PaletteContent" class="accordion-v2__content object-vector-studio-v2__scroll-content">
+            <div class="object-vector-studio-v2__palette-controls" aria-label="Palette paint controls">
+              <div class="object-vector-studio-v2__palette-primary-row">
+                <button id="objectVectorStudioV2PaintModeButton" type="button" aria-pressed="true">
+                  <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="paint" aria-hidden="true"></span>
+                  <span class="object-vector-studio-v2__palette-mode-label">Paint</span>
+                </button>
+                <button id="objectVectorStudioV2PalettePickerButton" class="object-vector-studio-v2__palette-picker-button" type="button" aria-pressed="false" data-shape-tool="picker" title="Sample a shape style into Palette controls" aria-label="Picker">
+                  <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--picker" aria-hidden="true"></span>
+                </button>
+                <button id="objectVectorStudioV2StrokeModeButton" type="button" aria-pressed="false">
+                  <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="stroke" aria-hidden="true"></span>
+                  <span class="object-vector-studio-v2__palette-mode-label">Stroke</span>
+                </button>
+                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeWidth">
+                  <span>Width</span>
+                  <input id="objectVectorStudioV2StrokeWidth" type="number" min="0.1" step="0.1" value="2">
+                </label>
+              </div>
+              <div class="object-vector-studio-v2__palette-opacity-row">
+                <span class="object-vector-studio-v2__palette-opacity-heading">Opacity</span>
+                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2FillOpacity">
+                  <span>Fill</span>
+                  <input id="objectVectorStudioV2FillOpacity" type="number" min="0" max="255" step="1" value="255">
+                </label>
+                <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeOpacity">
+                  <span>Stroke</span>
+                  <input id="objectVectorStudioV2StrokeOpacity" type="number" min="0" max="255" step="1" value="255">
+                </label>
+              </div>
+            </div>
+            <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">
+              <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="tag" aria-pressed="false">Tag</button>
+            </div>
+          </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="objectVectorStudioV2ShapeGeometryContent">
             <span class="object-vector-studio-v2__geometry-header-title">