Allow Object Vector V2 Shape Geometry panel to use available vertical space - PR_26133_112-object-vector-shape-geometry-layout

Author: DavidQ

docs/dev/reports/PR_26133_112-object-vector-shape-geometry-layout_report.md

@@ -0,0 +1,40 @@
+# PR_26133_112-object-vector-shape-geometry-layout Report
+
+## Summary
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Used available `PR_26133_111-engine-background-render-pipeline_report.md` as prior reference; the `PR_26133_111` delta ZIP was not present under `tmp/`.
+- Scoped the change to Object Vector Studio V2 Shape Geometry layout only.
+- Added a dedicated Shape Geometry accordion class and CSS rules so the Shape Geometry panel can flex into available right-panel vertical space and is no longer capped by the shared `260px` content max-height.
+- Preserved transform, snap, scale, and collision behavior; no geometry calculation JavaScript was changed.
+
+## Changed Files
+- `tools/object-vector-studio-v2/index.html`
+- `tools/object-vector-studio-v2/styles/toolStarter.css`
+- `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `docs/dev/reports/PR_26133_112-object-vector-shape-geometry-layout_report.md`
+
+## Validation
+- PASS: `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- PASS: `git diff --check -- tools/object-vector-studio-v2/index.html tools/object-vector-studio-v2/styles/toolStarter.css tests/playwright/tools/WorkspaceManagerV2.spec.mjs docs/dev/reports/playwright_v8_coverage_report.txt docs/dev/reports/coverage_changed_js_guardrail.txt` (line-ending warnings only)
+- PASS: `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "compacts Object Vector Studio V2 geometry layouts and selected palette state"` (1 passed)
+- PASS: targeted Object Vector V2 layout validation asserted Shape Geometry uses the dedicated layout class, removes the old content max-height cap, flexes its accordion/content, and grows beyond the previous `260px` limit when neighboring right-panel sections are collapsed.
+- PASS: `npm run test:workspace-v2` (56 passed)
+
+## Playwright
+- Playwright impacted: Yes.
+- Validated Object Vector Studio V2 Shape Geometry layout expansion, selected palette state, geometry field compact layout, and the full Workspace V2 regression gate.
+- Expected pass behavior: Shape Geometry can use freed vertical space while existing Object Vector geometry controls continue to render and behave normally.
+- Expected fail behavior: tests fail if Shape Geometry remains capped at `260px`, loses its layout hook, fails to flex, or Workspace V2 regressions appear.
+
+## Full Samples Smoke
+- Skipped full samples smoke test by request.
+- Reason: this is a targeted Object Vector V2 panel layout change covered by targeted Playwright and `npm run test:workspace-v2`; sample JSON launch validation remains out-of-scope.
+
+## Manual Validation
+1. Open `tools/object-vector-studio-v2/index.html`.
+2. Import or create an object with a selected shape.
+3. Collapse neighboring right-panel sections such as Palette, Tools, Shapes, and Shape Transform.
+4. Expected: Shape Geometry expands vertically into the available right-panel space, its fields remain usable, and fullscreen frame/control behavior remains unchanged.
+
+## ZIP
+- Output path: `tmp/PR_26133_112-object-vector-shape-geometry-layout_delta.zip`

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -4899,9 +4899,18 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         expect(Math.abs(layout.tops[left] - layout.tops[right])).toBeLessThanOrEqual(3);
       });
     };
+    const setRightAccordionOpen = async (contentId, open) => {
+      const header = page.locator(`.tool-starter__panel--right [aria-controls="${contentId}"]`).first();
+      const expanded = await header.getAttribute("aria-expanded");
+      if ((expanded === "true") !== open) {
+        await header.click();
+      }
+      await expect(header).toHaveAttribute("aria-expanded", String(open));
+    };
 
     await coverageReporter.start(page);
     try {
+      await page.setViewportSize({ width: 1366, height: 1000 });
       await page.goto(`${server.baseUrl}/tools/object-vector-studio-v2/index.html`, { waitUntil: "networkidle" });
       await page.evaluate(() => {
         sessionStorage.setItem("object-vector-studio-v2.runtimePalette", JSON.stringify({
@@ -5043,6 +5052,42 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action]")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']")).toHaveCount(0);
       await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").evaluateAll((rows) => rows.map((row) => row.querySelectorAll("input[type='checkbox']").length))).toEqual([1, 1, 1]);
+      await setRightAccordionOpen("objectVectorStudioV2PaletteContent", false);
+      await setRightAccordionOpen("objectVectorStudioV2ShapeToolsContent", false);
+      await setRightAccordionOpen("objectVectorStudioV2ShapesContent", false);
+      await setRightAccordionOpen("objectVectorStudioV2ShapeTransformContent", false);
+      const expandedShapeGeometryLayout = await page.locator("#objectVectorStudioV2ShapeGeometryDetails").evaluate((details) => {
+        const content = document.querySelector("#objectVectorStudioV2ShapeGeometryContent");
+        const accordion = document.querySelector(".object-vector-studio-v2__shape-geometry-accordion");
+        const contentRect = content.getBoundingClientRect();
+        const detailsRect = details.getBoundingClientRect();
+        const contentStyle = getComputedStyle(content);
+        const accordionStyle = getComputedStyle(accordion);
+        return {
+          accordionFlexGrow: Number.parseFloat(accordionStyle.flexGrow),
+          accordionHasLayoutClass: accordion.classList.contains("object-vector-studio-v2__shape-geometry-accordion"),
+          contentFlexGrow: Number.parseFloat(contentStyle.flexGrow),
+          contentHeight: Math.round(contentRect.height),
+          contentMaxHeight: contentStyle.maxHeight,
+          detailsHeight: Math.round(detailsRect.height),
+          paletteExpanded: document.querySelector('[aria-controls="objectVectorStudioV2PaletteContent"]').getAttribute("aria-expanded"),
+          shapeToolOptionsExpanded: document.querySelector('[aria-controls="objectVectorStudioV2ShapeToolsContent"]').getAttribute("aria-expanded"),
+          shapeToolsExpanded: document.querySelector('[aria-controls="objectVectorStudioV2ShapesContent"]').getAttribute("aria-expanded"),
+          transformExpanded: document.querySelector('[aria-controls="objectVectorStudioV2ShapeTransformContent"]').getAttribute("aria-expanded")
+        };
+      });
+      expect(expandedShapeGeometryLayout).toMatchObject({
+        accordionHasLayoutClass: true,
+        contentMaxHeight: "none",
+        paletteExpanded: "false",
+        shapeToolOptionsExpanded: "false",
+        shapeToolsExpanded: "false",
+        transformExpanded: "false"
+      });
+      expect(expandedShapeGeometryLayout.accordionFlexGrow).toBeGreaterThanOrEqual(1);
+      expect(expandedShapeGeometryLayout.contentFlexGrow).toBeGreaterThanOrEqual(1);
+      expect(expandedShapeGeometryLayout.contentHeight).toBeGreaterThan(260);
+      expect(expandedShapeGeometryLayout.detailsHeight).toBeGreaterThan(240);
 
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);

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

@@ -327,7 +327,7 @@ <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">
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact object-vector-studio-v2__shape-geometry-accordion 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">
               <span class="object-vector-studio-v2__geometry-header-line">Shape Geometry <span id="objectVectorStudioV2ShapeGeometrySummary" class="object-vector-studio-v2__header-count"></span></span>

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

@@ -448,6 +448,25 @@ textarea:hover {
   max-height: 260px;
 }
 
+.tool-starter__panel--right > .object-vector-studio-v2__shape-geometry-accordion.is-open {
+  flex: 1 1 320px;
+  min-height: 220px;
+}
+
+.tool-starter__panel--right > .accordion-v2.object-vector-studio-v2__shape-geometry-accordion.is-open > .accordion-v2__content#objectVectorStudioV2ShapeGeometryContent {
+  flex: 1 1 auto;
+  max-height: none;
+}
+
+#objectVectorStudioV2ShapeGeometryDetails {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+#objectVectorStudioV2ShapeGeometryDetails > .object-vector-studio-v2__object-detail-stack {
+  min-height: 100%;
+}
+
 .object-vector-studio-v2__palette-swatch-list {
   display: grid;
   flex: 0 0 auto;