Build Object Vector Studio V2 layout shell and schema-loading foundation - PR_26132_004-object-vector-studio-v2-layout-shell

Author: DavidQ

docs/pr/PR_26132_004-object-vector-studio-v2-layout-shell.md

@@ -0,0 +1,119 @@
+# PR_26132_004-object-vector-studio-v2-layout-shell
+
+## Purpose
+
+Build the Object Vector Studio V2 layout shell without implementing full object editing.
+
+## Scope
+
+- Added the Object Vector Studio V2 workspace nav with Return to Workspace.
+- Added the standalone tool nav with Import, Copy JSON, and Export actions.
+- Replaced the copied template content with the requested left, center, and right layout shell.
+- Added left column accordions for Object, Shape/Tools, and Objects.
+- Added right column accordions for Palette, Object Details, JSON Details, and Status Log.
+- Added equal accordion space sharing, collapsed-state height adjustment, and scrollable control content.
+- Added placeholder object tiles and shape/tool icon/text toggle buttons.
+- Added schema-only payload loading foundation that requires a palette before rendering.
+- Preserved Object Vector Studio V2 scope only. World Vector Studio V2 was not modified.
+
+## Validation
+
+Playwright impacted: Yes.
+
+Command run:
+
+```powershell
+npm run test:workspace-v2
+```
+
+Result:
+
+```text
+39 passed
+```
+
+Additional checks:
+
+```powershell
+node --check tools/object-vector-studio-v2/js/bootstrap.js
+node --check tools/object-vector-studio-v2/js/ToolStarterApp.js
+node --check tools/object-vector-studio-v2/js/controls/ActionNavControl.js
+node --check tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js
+node --check tools/object-vector-studio-v2/tests/playwright/FirstClassToolStarter.spec.mjs
+node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs
+git diff --check
+```
+
+All checks passed.
+
+## Playwright Coverage
+
+The Workspace Manager V2 suite now validates:
+
+- Object Vector Studio V2 launch from the tools surface.
+- Tool nav actions for Import, Copy JSON, and Export.
+- Workspace launch nav with Return to Workspace and preserved `hostContextId`.
+- Requested left and right accordion shell labels.
+- Schema-only palette gate and invalid payload rejection before render.
+- Valid palette-backed payload render into object tiles, selected object details, JSON details, and status log.
+- Shape/tool toggle state and status logging.
+- Equal accordion space sharing and collapsed-state adjustment.
+- Scrollable object tile content.
+- Hide Header and Details fullscreen-style layout with side columns and filled center work area.
+
+Expected pass behavior:
+
+- A palette-backed Object Vector Studio V2 payload renders shell details and enables JSON actions.
+- A payload missing `palette` fails visibly and leaves the empty state rendered.
+- Workspace launch shows Return to Workspace only.
+
+Expected fail behavior:
+
+- Missing palette, invalid JSON, or missing workspace toolState data is rejected before render and logged as actionable status.
+
+## V8 Coverage
+
+The required Playwright V8 coverage report was produced at:
+
+```text
+docs/dev/reports/playwright_v8_coverage_report.txt
+```
+
+Changed runtime JavaScript coverage includes:
+
+```text
+(86%) tools/object-vector-studio-v2/js/ToolStarterApp.js
+(91%) tools/object-vector-studio-v2/js/controls/ActionNavControl.js
+(92%) tools/object-vector-studio-v2/js/controls/ToolStarterShellControl.js
+(100%) tools/object-vector-studio-v2/js/bootstrap.js
+(100%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js
+```
+
+Guardrail:
+
+```text
+docs/dev/reports/coverage_changed_js_guardrail.txt
+```
+
+No changed-runtime-JS warnings were reported.
+
+## Full Samples Smoke Test
+
+Skipped. This PR is limited to Object Vector Studio V2 layout shell behavior and targeted Workspace Manager V2 launch/layout coverage. It does not modify shared sample loading or broad sample runtime behavior.
+
+## Manual Test Steps
+
+1. Open `tools/object-vector-studio-v2/index.html`.
+2. Confirm the header shows Object Vector Studio V2 and the standalone nav shows Import, Copy JSON, Export.
+3. Confirm left accordions are Object, Shape/Tools, Objects.
+4. Confirm right accordions are Palette, Object Details, JSON Details, Status Log.
+5. Import JSON without `palette` and confirm it is rejected before render.
+6. Import JSON with `palette.swatches` and `objects[]` containing `id` and `name`, then confirm object tiles render and JSON actions enable.
+7. Launch with `?launch=workspace&fromTool=workspace-manager-v2&hostContextId=manual-check` and confirm Return to Workspace appears.
+
+## Out Of Scope
+
+- Full vector object editing.
+- Shape editing, path editing, animation structures, and palette editing.
+- World Vector Studio V2 runtime behavior.
+- Full samples smoke test.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { readFile } from "node:fs/promises";
+import { readFile, writeFile } from "node:fs/promises";
 import { startRepoServer } from "../../helpers/playwrightRepoServer.mjs";
 import { workspaceV2CoverageReporter as coverageReporter } from "../../helpers/workspaceV2CoverageReporter.mjs";
 
@@ -1142,10 +1142,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         await expect(page.locator("[data-tool-starter-header]")).toContainText(tool.description);
         await expect(page.locator(".tool-starter__tool__menu")).toBeVisible();
         await expect(page.locator(".tool-starter__workspace__menu")).toBeHidden();
-        await page.locator("#sourceInput").fill(`${tool.name} launch coverage`);
-        await page.locator("#toolExportButton").click();
-        await expect(page.locator("#inspectorOutput")).toContainText(`"toolId": "${tool.id}"`);
-        await expect(page.locator("#statusLog")).toHaveValue(new RegExp(`Processed source value: ${tool.name} launch coverage`));
+        if (tool.id === "world-vector-studio-v2") {
+          await page.locator("#sourceInput").fill(`${tool.name} launch coverage`);
+          await page.locator("#toolExportButton").click();
+          await expect(page.locator("#inspectorOutput")).toContainText(`"toolId": "${tool.id}"`);
+          await expect(page.locator("#statusLog")).toHaveValue(new RegExp(`Processed source value: ${tool.name} launch coverage`));
+        } else {
+          await expect(page.locator('[data-launch-mode-nav="tool"] button')).toHaveText(["Import", "Copy JSON", "Export"]);
+          await expect(page.locator("#objectVectorStudioV2LoadStatus")).toContainText("Schema-only loading is idle");
+          await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("No objects loaded");
+        }
       }
       expect(pageErrors).toEqual([]);
     } finally {
@@ -1154,6 +1160,138 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
+  test("shows Object Vector Studio V2 layout shell and schema-only palette gate", async ({ page }, testInfo) => {
+    const server = await startRepoServer();
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    await coverageReporter.start(page);
+    try {
+      await page.goto(`${server.baseUrl}/tools/object-vector-studio-v2/index.html`, { waitUntil: "networkidle" });
+      await expect(page.locator("body.tools-platform-tool-page[data-tool-id='object-vector-studio-v2']")).toBeVisible();
+      await expect(page.locator("[data-tool-starter-header]")).toContainText("Object Vector Studio V2");
+      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeVisible();
+      await expect(page.locator('[data-launch-mode-nav="tool"] button')).toHaveText(["Import", "Copy JSON", "Export"]);
+      await expect(page.locator('[data-launch-mode-nav="workspace"]')).toBeHidden();
+      await expect(page.locator("#objectVectorStudioV2CopyJsonButton")).toBeDisabled();
+      await expect(page.locator("#objectVectorStudioV2ExportJsonButton")).toBeDisabled();
+
+      await expect(page.locator(".tool-starter__panel--left > .accordion-v2 > .accordion-v2__header > span:first-child")).toHaveText(["Object", "Shape/Tools", "Objects"]);
+      await expect(page.locator(".tool-starter__panel--right > .accordion-v2 > .accordion-v2__header > span:first-child")).toHaveText(["Palette", "Object Details", "JSON Details", "Status Log"]);
+      await expect(page.locator("#objectVectorStudioV2PaletteGate")).toHaveValue("Required before render");
+      await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("No objects loaded");
+      await expect(page.locator(".object-vector-studio-v2__tool-toggle")).toHaveText(["+ Select", "Sh Shape", "P Path", "M Move", "R Rotate", "G Group"]);
+
+      await page.locator('[data-shape-tool="path"]').click();
+      await expect(page.locator('[data-shape-tool="path"]')).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#statusLog")).toHaveValue(/INFO Shape\/Tools shell toggle selected: path/);
+
+      const invalidPayloadPath = testInfo.outputPath("object-vector-invalid.json");
+      await writeFile(invalidPayloadPath, JSON.stringify({ objects: [] }, null, 2), "utf8");
+      await page.locator("#objectVectorStudioV2ImportJsonInput").setInputFiles(invalidPayloadPath);
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Object Vector Studio V2 schema validation failed from import:object-vector-invalid\.json: root\.palette is required\./);
+      await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("No objects loaded");
+
+      const validPayload = {
+        palette: {
+          id: "arcade-primary",
+          swatches: [
+            { id: "white", value: "#ffffff" },
+            { id: "cyan", value: "#6fd3ff" }
+          ]
+        },
+        objects: Array.from({ length: 18 }, (_, index) => ({
+          id: `object-${index + 1}`,
+          name: index === 0 ? "Asteroids Ship" : `Object ${index + 1}`,
+          type: index === 1 ? "enemy" : "ship"
+        }))
+      };
+      const validPayloadPath = testInfo.outputPath("object-vector-valid.json");
+      await writeFile(validPayloadPath, JSON.stringify(validPayload, null, 2), "utf8");
+      await page.locator("#objectVectorStudioV2ImportJsonInput").setInputFiles(validPayloadPath);
+      await expect(page.locator("#objectVectorStudioV2PaletteGate")).toHaveValue("Palette loaded");
+      await expect(page.locator("#objectVectorStudioV2PaletteSummary")).toContainText("Palette arcade-primary: 2 swatches.");
+      await expect(page.locator("#objectVectorStudioV2ObjectTiles .object-vector-studio-v2__object-tile")).toHaveCount(18);
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Asteroids Ship");
+      await expect(page.locator("#objectVectorStudioV2SelectedItemVisibility")).toContainText("Selected item visible: Asteroids Ship");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"palette"');
+      await expect(page.locator("#objectVectorStudioV2CopyJsonButton")).toBeEnabled();
+      await expect(page.locator("#objectVectorStudioV2ExportJsonButton")).toBeEnabled();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Loaded Object Vector Studio V2 schema payload from import:object-vector-valid\.json: 18 objects, 2 palette swatches\./);
+
+      await page.locator('[data-object-id="object-2"]').click();
+      await expect(page.locator('[data-object-id="object-2"]')).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Object 2");
+
+      const leftOpenHeights = await page.locator(".tool-starter__panel--left .accordion-v2.is-open").evaluateAll((sections) => (
+        sections.map((section) => Math.round(section.getBoundingClientRect().height))
+      ));
+      expect(Math.max(...leftOpenHeights) - Math.min(...leftOpenHeights)).toBeLessThanOrEqual(18);
+
+      const tileScrollState = await page.locator("#objectVectorStudioV2ObjectTiles").evaluate((element) => ({
+        clientHeight: Math.round(element.clientHeight),
+        scrollHeight: Math.round(element.scrollHeight)
+      }));
+      expect(tileScrollState.scrollHeight).toBeGreaterThan(tileScrollState.clientHeight);
+
+      await page.getByRole("button", { name: "Shape/Tools" }).click();
+      await expect(page.locator("#objectVectorStudioV2ShapeToolsContent")).toBeHidden();
+      const collapsedLayout = await page.locator(".tool-starter__panel--left .accordion-v2").evaluateAll((sections) => (
+        sections.map((section) => ({
+          isOpen: section.classList.contains("is-open"),
+          height: Math.round(section.getBoundingClientRect().height)
+        }))
+      ));
+      const collapsedHeight = collapsedLayout.find((entry) => !entry.isOpen)?.height || 0;
+      expect(collapsedHeight).toBeLessThan(64);
+      const remainingHeights = collapsedLayout.filter((entry) => entry.isOpen).map((entry) => entry.height);
+      expect(Math.max(...remainingHeights) - Math.min(...remainingHeights)).toBeLessThanOrEqual(18);
+
+      const summary = page.locator("[data-tool-starter-summary]");
+      await summary.click();
+      await expect(page.locator(".is-collapsible")).not.toHaveAttribute("open", "");
+      const fullscreenActive = await page.locator("body").evaluate((body) => body.classList.contains("tools-platform-fullscreen-active"));
+      if (!fullscreenActive) {
+        await page.evaluate(() => {
+          window.__objectVectorStudioV2App.shell.applyFullscreenState(true);
+          window.__objectVectorStudioV2App.shell.updateSummary();
+        });
+      }
+      await expect(page.locator("body")).toHaveClass(/tools-platform-fullscreen-active/);
+      const fullscreenLayout = await page.evaluate(() => {
+        const left = document.querySelector(".tool-starter__panel--left").getBoundingClientRect();
+        const center = document.querySelector(".tool-starter__panel--center").getBoundingClientRect();
+        const right = document.querySelector(".tool-starter__panel--right").getBoundingClientRect();
+        return {
+          centerHeight: Math.round(center.height),
+          centerWidth: Math.round(center.width),
+          leftBeforeCenter: left.right <= center.left,
+          rightAfterCenter: right.left >= center.right
+        };
+      });
+      expect(fullscreenLayout.leftBeforeCenter).toBe(true);
+      expect(fullscreenLayout.rightAfterCenter).toBe(true);
+      expect(fullscreenLayout.centerWidth).toBeGreaterThan(300);
+      expect(fullscreenLayout.centerHeight).toBeGreaterThan(300);
+
+      await page.goto(`${server.baseUrl}/tools/object-vector-studio-v2/index.html?launch=workspace&fromTool=workspace-manager-v2&hostContextId=object-vector-v2-shell&workspaceMode=uat`, { waitUntil: "networkidle" });
+      await expect(page.locator('[data-launch-mode-nav="tool"]')).toBeHidden();
+      await expect(page.locator('[data-launch-mode-nav="workspace"] button')).toHaveText(["Return to Workspace"]);
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Schema-only workspace loading blocked: workspace\.tools\.object-vector-studio-v2 is missing/);
+      await page.locator("#returnToWorkspaceButton").click();
+      await expect(page).toHaveURL(/workspace-manager-v2\/index\.html.*hostContextId=object-vector-v2-shell/);
+      await expect(page).toHaveURL(/workspace=uat/);
+
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("uses First-Class Tool V2 theme contract", async ({ page }) => {
     const server = await openWorkspaceManagerV2(page);
     const pageErrors = [];