Clean single member groups and fix Object Vector Studio add state enablement - PR_26133_052-group-cleanup-and-add-state-enable-fix

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_051 Playwright V8 Coverage Report
+# PR_26133_052 Playwright V8 Coverage Report
 
-Task: PR_26133_051-shape-order-ui-reverse-sort-and-action-order
+Task: PR_26133_052-group-cleanup-and-add-state-enable-fix
 Date: 2026-05-15
 
 ## Result
@@ -25,7 +25,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ```text
 (83%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 105/105; executed functions 5/6
-(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5073/5073; executed functions 533/564
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5093/5093; executed functions 542/570
 ```
 
 ## Guardrail
@@ -36,4 +36,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 shape-list rendering, reversed visual shape ordering, selected shape z-order actions, preserved render-order behavior, Object Vector schema validation, and Asteroids runtime object-vector rendering.
+The Workspace V2 run exercised Object Vector Studio V2 group cleanup, group icon removal, Add State enablement, duplicate state warnings, state tile/timeline refresh, workspace dirty tracking after state creation, Object Vector schema validation, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_051 Workspace V2 Playwright Results
+# PR_26133_052 Workspace V2 Playwright Results
 
-Task: PR_26133_051-shape-order-ui-reverse-sort-and-action-order
+Task: PR_26133_052-group-cleanup-and-add-state-enable-fix
 Date: 2026-05-15
 
 ## Result
@@ -9,20 +9,20 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 - Command: `npm run test:workspace-v2`
 - Playwright target: `tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list`
-- Final result: 51 passed, 0 failed.
+- Final result: 52 passed, 0 failed.
 - Runtime/console guard: Workspace Manager V2, Object Vector Studio V2, and Asteroids runtime scenarios completed with no reported page errors.
 
 ## PR-Specific Coverage
 
-- Verified Object Vector Studio V2 keeps underlying render/order semantics unchanged: lower order remains back and higher order remains front.
-- Verified the object tile shape list displays in reverse UI order, with the front-most rendered shape at the top and the back-most shape at the bottom.
-- Verified shape stacking controls render in the requested visual order: Send To Back, Move Backward, Move Forward, Bring To Front.
-- Verified the reordered controls keep the existing send/backward/forward/front icon mappings.
-- Verified Bring To Front moves the selected shape to the top of the displayed list.
-- Verified Send To Back moves the selected shape to the bottom of the displayed list.
+- Verified Ungroup removes selected group membership and prunes leftover single-member group metadata.
+- Verified group icons disappear when a group is removed.
+- Verified Add State is enabled for selected unlocked objects with valid state values.
+- Verified Add State creates a new state, selects it, and refreshes state tiles/timeline immediately.
+- Verified duplicate state creation is rejected with a visible warning.
+- Verified adding a state marks Object Vector Studio V2 workspace toolState dirty.
 
 ## Additional Validation
 
-- Focused Object Vector Studio V2 slice passed before the full run:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --grep "Object Vector Studio V2"` completed with 12 passed, 0 failed.
+- Focused PR052 slice passed before the full run:
+  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --grep "single-member groups|dirty state"` completed with 2 passed, 0 failed.
 - `git diff --check` passed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -4214,6 +4214,114 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
+  test("cleans Object Vector Studio V2 single-member groups and adds selected object states", 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 page.evaluate(() => {
+        sessionStorage.setItem("object-vector-studio-v2.runtimePalette", JSON.stringify({
+          id: "group-cleanup-palette",
+          swatches: [
+            { id: "white", value: "#ffffff" },
+            { id: "cyan", value: "#6fd3ff" }
+          ]
+        }));
+      });
+
+      const payloadPath = testInfo.outputPath("object-vector-group-state.json");
+      await writeFile(payloadPath, JSON.stringify({
+        name: "Group Cleanup Payload",
+        objects: [
+          {
+            id: "object.test.group-state",
+            name: "Group State",
+            shapes: [
+              {
+                geometry: { x: -20, y: -20, width: 16, height: 16 },
+                groupId: "group-1",
+                locked: false,
+                order: 1,
+                style: { fill: "#ffffff", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, strokeWidth: 2 },
+                tool: "rectangle",
+                transform: { origin: { x: 0, y: 0 }, rotation: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 },
+                visible: true
+              },
+              {
+                geometry: { x: 8, y: -20, width: 16, height: 16 },
+                groupId: "group-1",
+                locked: false,
+                order: 2,
+                style: { fill: "#ffffff", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, strokeWidth: 2 },
+                tool: "rectangle",
+                transform: { origin: { x: 0, y: 0 }, rotation: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 },
+                visible: true
+              }
+            ],
+            states: [
+              {
+                frames: [
+                  { durationFrames: 1, id: "frame-1", order: 1, shapeOverrides: [] }
+                ],
+                id: "idle",
+                name: "Idle"
+              }
+            ],
+            tags: []
+          }
+        ],
+        toolId: "object-vector-studio-v2",
+        version: 1
+      }, null, 2), "utf8");
+      await page.locator("#objectVectorStudioV2ImportJsonInput").setInputFiles(payloadPath);
+
+      const objectTile = page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.test.group-state']");
+      const statePanel = objectTile.locator(".object-vector-studio-v2__object-state-panel");
+      const addStateButton = statePanel.locator("[data-object-state-action='add']");
+      const stateSelect = statePanel.locator("[data-object-state-select='object.test.group-state']");
+      await expect(addStateButton).toBeEnabled();
+      await addStateButton.click();
+      await expect(page.locator("#statusLog")).toHaveValue(/WARN Create state skipped: Idle already exists for Group State\./);
+      await expect(statePanel.locator("[data-object-state-tile]")).toHaveText(["idle"]);
+
+      await stateSelect.selectOption("move");
+      await expect(page.locator("#statusLog")).toHaveValue(/INFO State move is ready to add for Group State\./);
+      await expect(addStateButton).toBeEnabled();
+      await addStateButton.click();
+      await expect(statePanel.locator("[data-object-state-tile]")).toHaveText(["idle", "move"]);
+      await expect(statePanel.locator("[data-object-state-tile='move']")).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='move']")).toHaveCount(1);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Created state Move with frame frame-1\./);
+      await addStateButton.click();
+      await expect(page.locator("#statusLog")).toHaveValue(/WARN Create state skipped: Move already exists for Group State\./);
+      await expect(statePanel.locator("[data-object-state-tile='move']")).toHaveCount(1);
+
+      await expect(objectTile.locator("[data-shape-group-id='group-1']")).toHaveCount(2);
+      await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        app.selectedShapeIndex = 0;
+        app.selectedShapeIndexes = new Set([0]);
+        app.renderPayload();
+      });
+      const selectedShapeActions = objectTile.locator(".object-vector-studio-v2__shape-list-actions");
+      await selectedShapeActions.locator("[data-shape-list-action='ungroup']").click();
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"groupId": "group-1"');
+      await expect(objectTile.locator("[data-shape-group-id='group-1']")).toHaveCount(0);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Ungrouped 1 selected shapes from group-1\./);
+
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("supports Object Vector Studio V2 asset library inheritance foundation", async ({ page }, testInfo) => {
     const server = await startRepoServer();
     const pageErrors = [];
@@ -8120,6 +8228,19 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         await page.locator("#objectVectorStudioV2ObjectTagInput").fill("dirty-state");
         await page.locator("#objectVectorStudioV2AddTagButton").click();
       });
+      await expectObjectVectorDirtyAfter("object state add edit", async () => {
+        const selectedObjectId = await page.evaluate(() => window.__objectVectorStudioV2App.selectedObjectId);
+        const stateId = await page.evaluate(() => {
+          const app = window.__objectVectorStudioV2App;
+          const existing = new Set(app.objectStates(app.selectedObject()).map((state) => state.id));
+          return ["idle", "move", "active", "inactive", "damaged", "destroyed"].find((candidate) => !existing.has(candidate)) || "";
+        });
+        expect(stateId).toBeTruthy();
+        const selectedObjectTile = page.locator(`.object-vector-studio-v2__object-tile[data-object-id="${selectedObjectId}"]`);
+        await selectedObjectTile.locator(`[data-object-state-select="${selectedObjectId}"]`).selectOption(stateId);
+        await expect(selectedObjectTile.locator("[data-object-state-action='add']")).toBeEnabled();
+        await selectedObjectTile.locator("[data-object-state-action='add']").click();
+      });
       await expectObjectVectorDirtyAfter("object geometry edit", async () => {
         await page.locator("#objectVectorStudioV2ObjectDetails [data-shape-geometry-field='points'][data-polygon-point-index='0'][data-polygon-point-axis='x']").fill("11");
         await page.locator("#objectVectorStudioV2ApplyGeometryButton").click();

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

@@ -1312,8 +1312,8 @@ export class ToolStarterApp {
     addButton.type = "button";
     addButton.dataset.objectStateAction = "add";
     addButton.textContent = "Add";
-    addButton.title = stateExists ? "Selected state already exists." : `Add ${selectedStateId} state`;
-    addButton.disabled = isLocked || stateExists;
+    addButton.title = stateExists ? "Selected state already exists; Add will report a duplicate warning." : `Add ${selectedStateId} state`;
+    addButton.disabled = isLocked || !OBJECT_STATE_IDS.includes(selectedStateId);
     addButton.addEventListener("click", (event) => {
       event.stopPropagation();
       this.createSelectedState(selectedStateId);
@@ -3099,7 +3099,6 @@ export class ToolStarterApp {
     }
     if (this.objectStates(object).some((state) => state.id === stateId)) {
       this.statusLog.write(`WARN Create state skipped: ${OBJECT_STATE_LABELS[stateId] || stateId} already exists for ${object.name}.`);
-      this.selectState(stateId, "existing state");
       return;
     }
 
@@ -4333,11 +4332,29 @@ export class ToolStarterApp {
         delete shape.groupId;
       }
     });
+    this.pruneSingleMemberShapeGroups(nextObject);
     this.commitPayloadUpdate(nextPayload, object.id, this.selectedShapeIndex, `OK Ungrouped ${selectedIndexes.size} selected shapes from ${Array.from(selectedGroupIds).join(", ")}.`, "Ungroup shapes failed schema validation", {
       selectedShapeIndexes: selectedIndexes
     });
   }
 
+  pruneSingleMemberShapeGroups(object) {
+    const groupCounts = new Map();
+    sortedShapes(object).forEach((shape) => {
+      const groupId = String(shape.groupId || "").trim();
+      if (!groupId) {
+        return;
+      }
+      groupCounts.set(groupId, (groupCounts.get(groupId) || 0) + 1);
+    });
+    sortedShapes(object).forEach((shape) => {
+      const groupId = String(shape.groupId || "").trim();
+      if (groupId && groupCounts.get(groupId) < 2) {
+        delete shape.groupId;
+      }
+    });
+  }
+
   applyShapeGeometryEdits() {
     const selected = this.selectedShape();
     if (!selected) {
@@ -4693,6 +4710,7 @@ export class ToolStarterApp {
     const deleteIndex = this.selectedShapeIndex;
     object.shapes = sortedShapes(object).filter((shape, shapeIndex) => shapeIndex !== deleteIndex)
       .map((shape, index) => ({ ...shape, order: index + 1 }));
+    this.pruneSingleMemberShapeGroups(object);
     this.removeDeletedShapeReferences(object, deleteIndex);
     this.removeDanglingShapeOverrideReferences(nextPayload);
     const selectedShapeIndex = sortedShapes(object).length ? 0 : -1;
@@ -4720,6 +4738,7 @@ export class ToolStarterApp {
     const nextObject = nextPayload.objects.find((candidate) => candidate.id === object.id);
     nextObject.shapes = sortedShapes(nextObject).filter((candidate, index) => index !== deleteIndex)
       .map((candidate, index) => ({ ...candidate, order: index + 1 }));
+    this.pruneSingleMemberShapeGroups(nextObject);
     this.removeDeletedShapeReferences(nextObject, deleteIndex);
     this.removeDanglingShapeOverrideReferences(nextPayload);
     const selectedShapeStillExists = this.selectedShapeIndex >= 0 && this.selectedShapeIndex < sortedShapes(nextObject).length;
@@ -5107,7 +5126,9 @@ export class ToolStarterApp {
     const states = this.objectStates(object);
     const state = states.find((candidate) => candidate.id === this.selectedStateId) || states[0] || null;
     this.selectedStateId = state?.id || "";
-    this.stateControlStateId = this.selectedStateId || this.stateControlStateId;
+    if (!OBJECT_STATE_IDS.includes(this.stateControlStateId)) {
+      this.stateControlStateId = this.selectedStateId || OBJECT_STATE_IDS[0];
+    }
     if (!state) {
       this.selectedFrameId = "";
       return;