Consolidate frame state schema SSoT and add frame tile state dropdown - PR_26133_048-frame-state-schema-ssot-and-palette-filter-layout

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_047 Playwright V8 Coverage Report
+# PR_26133_048 Playwright V8 Coverage Report
 
-Task: PR_26133_047-frame-state-help-and-frame-id-generation-fix
+Task: PR_26133_048-frame-state-schema-ssot-and-palette-filter-layout
 Date: 2026-05-15
 
 ## Result
@@ -27,6 +27,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 (80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 97/97; executed functions 4/5
 (90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 3187/3187; executed functions 331/369
 (95%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js - executed lines 409/409; executed functions 53/56
+(91%) tools/workspace-manager-v2/js/services/WorkspaceManagerV2ContextService.js - executed lines 1598/1598; executed functions 145/159
 ```
 
 ## Guardrail
@@ -37,4 +38,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 state selection, contextual state help text, legacy state/frame manifest loading, generic frame duplication, playback, runtime preview, and export paths.
+The Workspace V2 run exercised Object Vector Studio V2 palette sort layout, frame-tile state dropdown/help controls, Object Vector state schema validation, Workspace Manager game-manifest validation with an external Object Vector schema reference, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_047 Workspace V2 Playwright Results
+# PR_26133_048 Workspace V2 Playwright Results
 
-Task: PR_26133_047-frame-state-help-and-frame-id-generation-fix
+Task: PR_26133_048-frame-state-schema-ssot-and-palette-filter-layout
 Date: 2026-05-15
 
 ## Result
@@ -14,14 +14,14 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified the Object Vector Studio V2 frame state dropdown renders beside a `?` help button.
-- Verified the `idle` help text title is `Default stationary state.` and `No movement or action animation active.`
-- Verified the `move` help text title is `Movement/action state.` and `Used for thrusting, walking, flying, or active movement visuals.`
-- Verified new schema-valid state IDs include `move` while legacy `thrust` manifests still load.
-- Verified duplicate frame generation uses generic `frame-x` IDs and does not continue legacy `idle-frame-x` naming.
-- Verified a legacy `idle-frame-1` import duplicates into `frame-1`.
+- Verified Hue, Sat, Bri, and Name palette sort controls fit on one line with reduced text and icon sizing.
+- Verified `thrust` is removed from the Object Vector Studio V2 state enum.
+- Verified `game.manifest.schema.json` references the Object Vector Studio V2 `objectState` definition instead of duplicating a local state enum.
+- Verified Asteroids runtime state selection now uses `move` for thrust visuals.
+- Verified each frame tile renders a compact state dropdown directly under the frame tile label.
+- Verified each frame tile renders a `?` hover help button using the contextual state help text.
 
 ## Additional Validation
 
-- Targeted Playwright check passed for `supports Object Vector Studio V2 animation states and frame timeline foundation`.
+- Targeted Playwright checks passed for Object Vector Studio V2 shell/schema/palette layout and animation frame controls.
 - `git diff --check` passed.

games/Asteroids/game.manifest.json

@@ -353,8 +353,8 @@
                   ]
                 },
                 {
-                  "id": "thrust",
-                  "name": "Thrust",
+                  "id": "move",
+                  "name": "Move",
                   "frames": [
                     {
                       "id": "frame-1",

games/Asteroids/game/AsteroidsGameScene.js

@@ -794,7 +794,7 @@ export default class AsteroidsGameScene extends Scene {
         elapsedMs: this.objectVectorPlaybackMs,
         fps: 12,
         rotation: this.world.ship.angle + Math.PI / 2,
-        stateId: this.world.ship.thrusting && this.session.mode === 'playing' ? "thrust" : "idle",
+        stateId: this.world.ship.thrusting && this.session.mode === 'playing' ? "move" : "idle",
         x: this.world.ship.x,
         y: this.world.ship.y,
       });

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1215,23 +1215,33 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const toolSchema = window.__objectVectorStudioV2App.schemaService.schema;
         const gameSchema = await fetch("/tools/schemas/game.manifest.schema.json", { cache: "no-store" }).then((response) => response.json());
         return {
+          gameHasLocalObjectStateDefinition: Object.prototype.hasOwnProperty.call(gameSchema.$defs, "objectVectorStudioState"),
           gameObjectDefaultTags: gameSchema.$defs.objectVectorStudioObject.default.tags,
           gamePolygonDefaultPointCount: gameSchema.$defs.objectVectorStudioPolygonGeometry.default.points.length,
           gameShapeCommonDefaultTool: gameSchema.$defs.objectVectorStudioShapeCommon.default.tool,
+          gameStateSchemaRef: gameSchema.$defs.objectVectorStudioObject.properties.states.items.$ref,
+          gameStateThrustMentionRemoved: !JSON.stringify(gameSchema).includes('"thrust"'),
           gameTransformDefaultOrigin: gameSchema.$defs.objectVectorStudioTransform.default.origin,
           toolPolygonDefaultPointCount: toolSchema.$defs.polygonGeometry.default.points.length,
           toolShapeCommonDefaultTool: toolSchema.$defs.shapeCommon.default.tool,
+          toolStateEnum: toolSchema.$defs.objectState.properties.id.enum,
+          toolStateThrustRemoved: !toolSchema.$defs.objectState.properties.id.enum.includes("thrust"),
           toolStyleDefaultStrokeWidth: toolSchema.$defs.style.default.strokeWidth,
           toolTransformDefaultOrigin: toolSchema.$defs.transform.default.origin
         };
       });
       expect(objectVectorSchemaDefaults).toEqual({
+        gameHasLocalObjectStateDefinition: false,
         gameObjectDefaultTags: [],
         gamePolygonDefaultPointCount: 5,
         gameShapeCommonDefaultTool: "polygon",
+        gameStateSchemaRef: "tools/object-vector-studio-v2.schema.json#/$defs/objectState",
+        gameStateThrustMentionRemoved: true,
         gameTransformDefaultOrigin: { x: 0, y: 0 },
         toolPolygonDefaultPointCount: 5,
         toolShapeCommonDefaultTool: "polygon",
+        toolStateEnum: ["idle", "move", "active", "inactive", "damaged", "destroyed"],
+        toolStateThrustRemoved: true,
         toolStyleDefaultStrokeWidth: 3,
         toolTransformDefaultOrigin: { x: 0, y: 0 }
       });
@@ -1317,6 +1327,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           };
         };
         const title = (selector) => document.querySelector(selector).title;
+        const paletteSortButtons = Array.from(document.querySelectorAll(".object-vector-studio-v2__palette-sort button"));
+        const paletteSortRects = paletteSortButtons.map((button) => button.getBoundingClientRect());
+        const paletteSortButtonStyles = paletteSortButtons.map((button) => getComputedStyle(button));
         return {
           actionIcons: {
             add: icon("#objectVectorStudioV2AddObjectButton"),
@@ -1332,6 +1345,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             name: icon("[data-palette-sort='name']"),
             sat: icon("[data-palette-sort='sat']")
           },
+          paletteSortLayout: {
+            buttonFontSizes: paletteSortButtonStyles.map((style) => Number.parseFloat(style.fontSize)),
+            iconFontSizes: paletteSortButtons.map((button) => Number.parseFloat(getComputedStyle(button, "::before").fontSize)),
+            singleLine: paletteSortRects.every((rect) => Math.abs(rect.top - paletteSortRects[0].top) < 2)
+          },
           gridIcons: {
             angle: icon("#objectVectorStudioV2AngleSnapButton"),
             render: icon("#objectVectorStudioV2GridRenderButton"),
@@ -1387,7 +1405,6 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       [
         ...Object.values(iconStyleState.actionIcons),
         ...Object.values(iconStyleState.gridIcons),
-        ...Object.values(iconStyleState.paletteSortIcons),
         ...Object.values(iconStyleState.shapeIcons),
         ...Object.values(iconStyleState.viewportIcons),
         ...Object.values(iconStyleState.zIcons)
@@ -1396,6 +1413,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         expect(icon.fontFamily).toContain("0xProto Nerd Font");
         expect(icon.fontSize).toBeGreaterThanOrEqual(21);
       });
+      Object.values(iconStyleState.paletteSortIcons).forEach((icon) => {
+        expect(icon.glyphPresent).toBe(true);
+        expect(icon.fontFamily).toContain("0xProto Nerd Font");
+        expect(icon.fontSize).toBeGreaterThanOrEqual(10);
+        expect(icon.fontSize).toBeLessThanOrEqual(16);
+      });
+      expect(iconStyleState.paletteSortLayout.singleLine).toBe(true);
+      expect(Math.max(...iconStyleState.paletteSortLayout.buttonFontSizes)).toBeLessThanOrEqual(12);
+      expect(Math.max(...iconStyleState.paletteSortLayout.iconFontSizes)).toBeLessThanOrEqual(16);
       expect(iconStyleState.actionIcons.paint.iconName).toBe("nf-fa-paint_brush");
       expect(iconStyleState.actionIcons.stroke.iconName).toBe("nf-fa-pencil");
       expect(iconStyleState.modeButtons).toEqual({
@@ -3997,8 +4023,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator('[data-object-id="object.animation.ship-template"]')).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='idle']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1']")).toHaveAttribute("aria-pressed", "true");
-      await expect(page.locator("#objectVectorStudioV2StateSelect")).toHaveValue("idle");
-      await expect(page.locator("#objectVectorStudioV2StateHelpButton")).toHaveAttribute("title", "Default stationary state.\nNo movement or action animation active.");
+      await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1'] [data-frame-state-select='frame-1']")).toHaveValue("idle");
+      await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1'] [data-frame-state-help='frame-1']")).toHaveAttribute("title", "Default stationary state.\nNo movement or action animation active.");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"id": "idle"');
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Selected Shape");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("ship-template-hull");
@@ -4044,12 +4070,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-onion-skin-frame='frame-2']")).toHaveCount(1);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Onion-skin preview enabled\./);
 
-      await page.evaluate(() => window.__objectVectorStudioV2App.selectState("move", "test state selection"));
+      await page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1'] [data-frame-state-select='frame-1']").selectOption("move");
       await expect(page.locator('[data-object-id="object.animation.ship-template"]')).toHaveAttribute("aria-pressed", "true");
-      await expect(page.locator("#objectVectorStudioV2StateSelect")).toHaveValue("move");
-      await expect(page.locator("#objectVectorStudioV2StateHelpButton")).toHaveAttribute("title", "Movement/action state.\nUsed for thrusting, walking, flying, or active movement visuals.");
+      await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1'] [data-frame-state-select='frame-1']")).toHaveValue("move");
+      await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-id='frame-1'] [data-frame-state-help='frame-1']")).toHaveAttribute("title", "Movement/action state.\nUsed for thrusting, walking, flying, or active movement visuals.");
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='move']")).toHaveCount(1);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected state Move from test state selection; active object remains Ship Template\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected state Move from frame frame-1 state dropdown; active object remains Ship Template\./);
       await page.evaluate(() => window.__objectVectorStudioV2App.selectState("idle", "test state selection"));
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='idle']")).toHaveCount(2);
 
@@ -4131,7 +4157,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         version: 1
       }, 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-animation\.json: root\.objects\[0\]\.states\[0\]\.id must be one of idle, move, active, inactive, damaged, destroyed, thrust\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Object Vector Studio V2 schema validation failed from import:object-vector-invalid-animation\.json: root\.objects\[0\]\.states\[0\]\.id must be one of idle, move, active, inactive, damaged, destroyed\./);
 
       expect(pageErrors).toEqual([]);
     } finally {

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

@@ -165,10 +165,6 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <div id="objectVectorStudioV2ObjectPreviewFooter" class="object-vector-studio-v2__preview-footer">Object ID: none</div>
               <hr class="object-vector-studio-v2__separator">
               <div class="object-vector-studio-v2__animation-controls" aria-label="Animation controls">
-                <select id="objectVectorStudioV2StateSelect" class="object-vector-studio-v2__state-select" aria-label="Frame state" disabled>
-                  <option value="">No state</option>
-                </select>
-                <button id="objectVectorStudioV2StateHelpButton" class="object-vector-studio-v2__state-help" type="button" disabled title="Disabled until a state is selected" aria-label="State help">?</button>
                 <button id="objectVectorStudioV2PlayButton" type="button" disabled title="Disabled until a state frame is selected">Play</button>
                 <button id="objectVectorStudioV2PauseButton" type="button" disabled title="Disabled until playback starts">Pause</button>
                 <button id="objectVectorStudioV2StopButton" type="button" disabled title="Disabled until a state frame is selected">Stop</button>