Preserve Object Vector Studio V2 scroll state and finalize object panel cleanup consistency - PR_26133_001-object-vector-studio-scroll-persistence

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -0,0 +1,18 @@
+# PR_26133_001 Playwright V8 Coverage Report
+
+Coverage source: `docs/dev/reports/playwright_v8_coverage.txt`, refreshed by the Workspace V2 Playwright run.
+
+## Summary
+
+- Coverage is advisory only; no thresholds are enforced.
+- Workspace Manager V2 entry point: 91%.
+- Object Vector Studio V2 changed runtime files covered:
+  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 97/97, executed functions 4/5.
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 90%, executed lines 3187/3187, executed functions 331/369.
+- The coverage report lists no low-coverage changed runtime JS files.
+
+## Validation Context
+
+- Main command: `npm run test:workspace-v2`.
+- Result: 45 passed.
+- Focused Object Vector Studio V2 layout/scroll contract test also passed.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -0,0 +1,28 @@
+# PR_26133_001 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.
+- `node -e` JSON parse for `games/Asteroids/game.manifest.json` and `tools/schemas/tools/object-vector-studio-v2.schema.json`: passed.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "shows Object Vector Studio V2 layout shell"`: 1 passed.
+- `npm run test:workspace-v2`: 45 passed.
+- `git diff --check`: passed.
+
+## Targeted Object Vector Studio V2 Verification
+
+- Standalone Object Vector Studio V2 Playwright manual pass reported `consoleErrors: []` and `pageErrors: []`.
+- Object selection preserved left-panel and Objects accordion scroll: before `{ leftPanel: 30, objects: 36 }`, after `{ leftPanel: 30, objects: 36 }`.
+- Shape selection preserved left-panel and Objects accordion scroll: before `{ leftPanel: 30, objects: 36 }`, after `{ leftPanel: 30, objects: 36 }`.
+- Shape/Tools content reached its accordion bottom.
+- Object Name and Tag rows were inline.
+- Shape row density measured `11.2px` font size and `22px` row height.
+- Left panel was scrollable during the verification pass.
+
+## Contract Checks
+
+- `objectType` UI controls remain absent from Object Vector Studio V2.
+- Object-level `type` drift remains rejected by the Object Vector Studio V2 schema path.
+- Exact Asteroids Object Vector `asteroids` tag search found no persisted tag values.
+- Existing Object Vector Studio V2 payload contracts remain schema-first with no `imageDataUrl` persistence.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1563,14 +1563,60 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Create line blocked: object Asteroids Ship is locked for this runtime session\./);
       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("#objectVectorStudioV2RenameObjectButton")).toBeEnabled();
-      const shapeScrollBefore = await page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => {
-        element.scrollTop = 32;
-        return element.scrollTop;
+
+      const forceLeftPanelScroll = async () => page.evaluate(() => {
+        const leftPanel = document.querySelector(".tool-starter__panel--left");
+        const objectsContent = document.querySelector("#objectVectorStudioV2ObjectsContent");
+        if (!leftPanel.dataset.scrollPersistenceStylesCaptured) {
+          leftPanel.dataset.scrollPersistenceStylesCaptured = "true";
+          leftPanel.dataset.scrollPersistenceHeight = leftPanel.style.height;
+          leftPanel.dataset.scrollPersistenceMaxHeight = leftPanel.style.maxHeight;
+          leftPanel.dataset.scrollPersistenceOverflowY = leftPanel.style.overflowY;
+        }
+        leftPanel.style.height = "150px";
+        leftPanel.style.maxHeight = "150px";
+        leftPanel.style.overflowY = "auto";
+        leftPanel.scrollTop = 24;
+        objectsContent.scrollTop = 32;
+        return {
+          leftPanelScrollTop: leftPanel.scrollTop,
+          objectsScrollTop: objectsContent.scrollTop
+        };
       });
+      const readLeftPanelScroll = async () => page.evaluate(() => {
+        const leftPanel = document.querySelector(".tool-starter__panel--left");
+        const objectsContent = document.querySelector("#objectVectorStudioV2ObjectsContent");
+        return {
+          leftPanelScrollTop: leftPanel.scrollTop,
+          objectsScrollTop: objectsContent.scrollTop
+        };
+      });
+      const restoreLeftPanelStyle = async () => page.evaluate(() => {
+        const leftPanel = document.querySelector(".tool-starter__panel--left");
+        leftPanel.style.height = leftPanel.dataset.scrollPersistenceHeight || "";
+        leftPanel.style.maxHeight = leftPanel.dataset.scrollPersistenceMaxHeight || "";
+        leftPanel.style.overflowY = leftPanel.dataset.scrollPersistenceOverflowY || "";
+        delete leftPanel.dataset.scrollPersistenceStylesCaptured;
+        delete leftPanel.dataset.scrollPersistenceHeight;
+        delete leftPanel.dataset.scrollPersistenceMaxHeight;
+        delete leftPanel.dataset.scrollPersistenceOverflowY;
+      });
+
+      const leftPanelObjectScrollBefore = await forceLeftPanelScroll();
+      expect(leftPanelObjectScrollBefore.leftPanelScrollTop).toBeGreaterThan(0);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-2']").evaluate((tile) => tile.click());
+      await expect.poll(readLeftPanelScroll).toEqual(leftPanelObjectScrollBefore);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-2']")).toHaveClass(/is-selected/);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']").evaluate((tile) => tile.click());
+      await expect.poll(readLeftPanelScroll).toEqual(leftPanelObjectScrollBefore);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-selected/);
+
+      const shapeScrollBefore = await forceLeftPanelScroll();
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-id='rectangle-1']").evaluate((button) => button.click());
-      await expect.poll(async () => page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => element.scrollTop)).toBe(shapeScrollBefore);
+      await expect.poll(readLeftPanelScroll).toEqual(shapeScrollBefore);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']")).toHaveClass(/is-selected/);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected shape from object tile shape list: rectangle-1 \(rectangle\)\./);
+      await restoreLeftPanelStyle();
 
       await page.locator("[data-palette-color='#6fd3ff']").click();
       await expect(page.locator("[data-palette-color='#6fd3ff']")).toHaveClass(/is-selected/);

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

@@ -156,7 +156,7 @@ <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 is-open" data-accordion-v2-open="true">
+        <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>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>

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

@@ -930,8 +930,24 @@ export class ToolStarterApp {
   }
 
   restoreObjectsScroll(scrollTop) {
-    const maxScrollTop = Math.max(0, this.elements.objectsContent.scrollHeight - this.elements.objectsContent.clientHeight);
-    this.elements.objectsContent.scrollTop = Math.min(scrollTop, maxScrollTop);
+    this.restoreElementScrollTop(this.elements.objectsContent, scrollTop);
+  }
+
+  captureLeftPanelScrollState() {
+    return {
+      leftPanelScrollTop: this.elements.leftPanel.scrollTop,
+      objectsScrollTop: this.elements.objectsContent.scrollTop
+    };
+  }
+
+  restoreLeftPanelScrollState(scrollState) {
+    this.restoreElementScrollTop(this.elements.leftPanel, scrollState.leftPanelScrollTop);
+    this.restoreElementScrollTop(this.elements.objectsContent, scrollState.objectsScrollTop);
+  }
+
+  restoreElementScrollTop(element, scrollTop) {
+    const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+    element.scrollTop = Math.min(scrollTop, maxScrollTop);
   }
 
   createObjectTileControl(object, kind) {
@@ -1850,6 +1866,7 @@ export class ToolStarterApp {
       return;
     }
 
+    const scrollState = this.captureLeftPanelScrollState();
     this.selectedObjectId = objectId;
     const selectedObject = this.selectedObject();
     this.selectedShapeId = sortedShapes(selectedObject)[0]?.id || "";
@@ -1858,6 +1875,7 @@ export class ToolStarterApp {
     this.selectedStateId = selectedState?.id || "";
     this.selectedFrameId = selectedState ? sortedFrames(selectedState)[0]?.id || "" : "";
     this.renderPayload();
+    this.restoreLeftPanelScrollState(scrollState);
     const selected = this.selectedObject();
     this.statusLog.write(`OK Selected object from ${sourceLabel}: ${selected.name}.`);
   }
@@ -1869,6 +1887,7 @@ export class ToolStarterApp {
       return;
     }
 
+    const scrollState = this.captureLeftPanelScrollState();
     this.selectedShapeId = shapeId;
     if (options.additive) {
       if (this.selectedShapeIds.has(shapeId) && this.selectedShapeIds.size > 1) {
@@ -1881,6 +1900,7 @@ export class ToolStarterApp {
       this.selectedShapeIds = new Set([shapeId]);
     }
     this.renderPayload();
+    this.restoreLeftPanelScrollState(scrollState);
     const shape = this.selectedShape();
     this.statusLog.write(`OK Selected shape from ${sourceLabel}: ${shape.id} (${shape.type}). Multi-select count: ${this.selectedShapeIds.size}.`);
   }

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

@@ -50,6 +50,7 @@ window.addEventListener("DOMContentLoaded", () => {
       gridSnapButton: requireElement("#objectVectorStudioV2GridSnapButton"),
       groupShapesButton: requireElement("#objectVectorStudioV2GroupShapesButton"),
       jsonDetails: requireElement("#objectVectorStudioV2JsonDetails"),
+      leftPanel: requireElement(".tool-starter__panel--left"),
       loopToggle: requireElement("#objectVectorStudioV2LoopToggle"),
       objectDetails: requireElement("#objectVectorStudioV2ObjectDetails"),
       objectDetailsCount: requireElement("#objectVectorStudioV2ObjectDetailsCount"),

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

@@ -198,6 +198,10 @@ textarea:hover {
   overflow-y: auto;
 }
 
+.tool-starter__panel--left > .accordion-v2.is-open {
+  flex: 1 0 220px;
+}
+
 .accordion-v2 {
   --accordion-v2-accent: var(--tool-starter-accent);
   --accordion-v2-line: var(--tool-starter-line);
@@ -328,6 +332,10 @@ textarea:hover {
   padding: 7px 9px;
 }
 
+#objectVectorStudioV2ObjectContent .tool-starter__field--compact > span {
+  white-space: nowrap;
+}
+
 .tool-starter__field input[readonly] {
   color: var(--tool-starter-muted);
   cursor: default;
@@ -384,8 +392,9 @@ textarea:hover {
 }
 
 #objectVectorStudioV2ShapeToolsContent {
-  flex: 1 1 auto;
+  flex: 1 1 0;
   max-height: none;
+  min-height: 0;
 }
 
 .object-vector-studio-v2__palette-swatch-list {
@@ -908,27 +917,27 @@ textarea:hover {
 .object-vector-studio-v2__object-tile-shapes {
   grid-column: 1 / -1;
   display: grid;
-  gap: 2px;
+  gap: 1px;
   border-top: 1px solid var(--tool-starter-line);
-  padding-top: 5px;
+  padding-top: 4px;
 }
 
 .object-vector-studio-v2__object-tile-shape-row {
   display: block;
-  font-size: 0.74rem;
-  line-height: 1.12;
+  font-size: 0.7rem;
+  line-height: 1.08;
 }
 
 .object-vector-studio-v2__shape-select {
   width: 100% !important;
-  min-height: 24px;
+  min-height: 22px;
   position: relative;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 3px 6px !important;
+  gap: 6px;
+  padding: 2px 5px !important;
   text-align: left;
 }