Add enablement rules for state creation and ungroup actions - PR_26133_053-state-add-and-ungroup-enable-rules

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_052 Playwright V8 Coverage Report
+# PR_26133_053 Playwright V8 Coverage Report
 
-Task: PR_26133_052-group-cleanup-and-add-state-enable-fix
+Task: PR_26133_053-state-add-and-ungroup-enable-rules
 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 5093/5093; executed functions 542/570
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5098/5098; executed functions 544/571
 ```
 
 ## 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 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.
+The Workspace V2 run exercised Object Vector Studio V2 state-control ordering, Add State existing/new-state disabled rules, grouped and non-grouped Ungroup disabled rules, group cleanup after ungroup, Object Vector schema validation, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_052 Workspace V2 Playwright Results
+# PR_26133_053 Workspace V2 Playwright Results
 
-Task: PR_26133_052-group-cleanup-and-add-state-enable-fix
+Task: PR_26133_053-state-add-and-ungroup-enable-rules
 Date: 2026-05-15
 
 ## Result
@@ -14,15 +14,15 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- 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.
+- Verified state controls render in the requested order: state dropdown, Add, help.
+- Verified Add is disabled when the selected dropdown state already exists on the object.
+- Verified Add enables for a valid non-existing state and creates/selects the new state.
+- Verified Ungroup is disabled for non-grouped selected shapes.
+- Verified Ungroup enables for grouped selected shapes and updates immediately after selection/render changes.
+- Verified prior single-member group cleanup remains active after ungroup.
 
 ## Additional Validation
 
-- 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.
+- Focused PR053 slice passed before the full run:
+  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --grep "single-member groups|animation states|layout shell"` completed with 3 passed, 0 failed.
 - `git diff --check` passed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2515,12 +2515,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='0']").click();
       await expect(selectedShapeActions.locator("[data-shape-list-action='group']")).toBeDisabled();
       await expect(selectedShapeActions.locator("[data-shape-list-action='group']")).toHaveAttribute("data-disabled-reason", /Shift-click shapes/);
+      await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeDisabled();
+      await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toHaveAttribute("data-disabled-reason", /belongs to a group/);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='1']").click({ modifiers: ["Shift"] });
       await expect(selectedShapeActions.locator("[data-shape-list-action='group']")).toBeEnabled();
       await expect(selectedShapeActions.locator("[data-shape-list-action='group']")).toHaveAttribute("title", /Shift-click shapes to select more than one/);
       await selectedShapeActions.locator("[data-shape-list-action='group']").click();
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"groupId": "group-1"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Grouped 2 shapes into group-1\./);
+      await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeEnabled();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']")).toHaveCount(2);
       const groupIconColors = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']").evaluateAll((icons) => icons.map((icon) => getComputedStyle(icon).color));
       expect(new Set(groupIconColors).size).toBe(1);
@@ -2532,6 +2535,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await selectedShapeActions.locator("[data-shape-list-action='ungroup']").click();
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"groupId": "group-1"');
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']")).toHaveCount(0);
+      await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeDisabled();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Ungrouped 2 selected shapes from group-1\./);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='0']").click();
 
@@ -4049,8 +4053,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-state-select]")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-frame-state-help]")).toHaveCount(0);
       const selectedObjectStatePanel = page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.animation.ship-template'] .object-vector-studio-v2__object-state-panel");
-      await expect(selectedObjectStatePanel.locator(".object-vector-studio-v2__object-state-controls button")).toHaveText(["Add", "Delete", "?"]);
+      await expect(selectedObjectStatePanel.locator(".object-vector-studio-v2__object-state-controls button")).toHaveText(["Add", "?"]);
+      const stateControlLayout = await selectedObjectStatePanel.locator(".object-vector-studio-v2__object-state-controls").evaluate((controls) => Array.from(controls.children).map((element) => {
+        if (element.tagName.toLowerCase() === "select") {
+          return `select:${element.dataset.objectStateSelect}`;
+        }
+        return `${element.dataset.objectStateAction || element.dataset.objectStateHelp}:${element.textContent.trim()}`;
+      }));
+      expect(stateControlLayout).toEqual(["select:object.animation.ship-template", "add:Add", "all:?"]);
       await expect(selectedObjectStatePanel.locator("[data-object-state-select='object.animation.ship-template']")).toHaveValue("idle");
+      await expect(selectedObjectStatePanel.locator("[data-object-state-action='add']")).toBeDisabled();
       await expect(selectedObjectStatePanel.locator("[data-object-state-help='all']")).toHaveAttribute("title", /idle\nDefault stationary state\.\nNo movement or action animation active\.\n\nmove\nMovement\/action state\.\nUsed for thrusting, walking, flying, or active movement visuals\./);
       await expect(selectedObjectStatePanel.locator("[data-object-state-tile]")).toHaveText(["idle", "move"]);
       await expect(selectedObjectStatePanel.locator("[data-object-state-tile='idle']")).toHaveAttribute("aria-pressed", "true");
@@ -4119,6 +4131,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await selectedObjectStatePanel.locator("[data-object-state-select='object.animation.ship-template']").selectOption("move");
       await expect(page.locator('[data-object-id="object.animation.ship-template"]')).toHaveAttribute("aria-pressed", "true");
       await expect(selectedObjectStatePanel.locator("[data-object-state-select='object.animation.ship-template']")).toHaveValue("move");
+      await expect(selectedObjectStatePanel.locator("[data-object-state-action='add']")).toBeDisabled();
       await expect(selectedObjectStatePanel.locator("[data-object-state-help='all']")).toHaveAttribute("title", /active\nObject is enabled and participating in gameplay\.\nTypically the default active runtime state\./);
       await expect(selectedObjectStatePanel.locator("[data-object-state-tile='move']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2FrameTimeline [data-state-id='move']")).toHaveCount(1);
@@ -4285,9 +4298,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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\./);
+      const stateControlLayout = await statePanel.locator(".object-vector-studio-v2__object-state-controls").evaluate((controls) => Array.from(controls.children).map((element) => {
+        if (element.tagName.toLowerCase() === "select") {
+          return "select";
+        }
+        return element.dataset.objectStateAction || element.dataset.objectStateHelp;
+      }));
+      expect(stateControlLayout).toEqual(["select", "add", "all"]);
+      await expect(addStateButton).toBeDisabled();
       await expect(statePanel.locator("[data-object-state-tile]")).toHaveText(["idle"]);
 
       await stateSelect.selectOption("move");
@@ -4298,8 +4316,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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(addStateButton).toBeDisabled();
       await expect(statePanel.locator("[data-object-state-tile='move']")).toHaveCount(1);
 
       await expect(objectTile.locator("[data-shape-group-id='group-1']")).toHaveCount(2);
@@ -4310,9 +4327,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         app.renderPayload();
       });
       const selectedShapeActions = objectTile.locator(".object-vector-studio-v2__shape-list-actions");
+      await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeEnabled();
       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(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeDisabled();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Ungrouped 1 selected shapes from group-1\./);
 
       expect(pageErrors).toEqual([]);

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 will report a duplicate warning." : `Add ${selectedStateId} state`;
-    addButton.disabled = isLocked || !OBJECT_STATE_IDS.includes(selectedStateId);
+    addButton.title = stateExists ? "Selected state already exists." : `Add ${selectedStateId} state`;
+    addButton.disabled = isLocked || stateExists || !OBJECT_STATE_IDS.includes(selectedStateId);
     addButton.addEventListener("click", (event) => {
       event.stopPropagation();
       this.createSelectedState(selectedStateId);
@@ -1341,17 +1341,6 @@ export class ToolStarterApp {
       this.statusLog.write(`INFO State ${select.value} is ready to add for ${object.name}.`);
     });
 
-    const deleteButton = document.createElement("button");
-    deleteButton.type = "button";
-    deleteButton.dataset.objectStateAction = "delete";
-    deleteButton.textContent = "Delete";
-    deleteButton.title = stateExists ? `Delete ${selectedStateId} state` : "Selected state has not been added.";
-    deleteButton.disabled = isLocked || !stateExists || this.objectStates(object).length <= 1;
-    deleteButton.addEventListener("click", (event) => {
-      event.stopPropagation();
-      this.deleteSelectedState(selectedStateId);
-    });
-
     const helpButton = document.createElement("button");
     helpButton.className = "object-vector-studio-v2__object-state-help";
     helpButton.type = "button";
@@ -1361,7 +1350,7 @@ export class ToolStarterApp {
     helpButton.dataset.objectStateHelp = "all";
     helpButton.setAttribute("aria-label", `State help for all states: ${allHelpText.replace(/\s+/gu, " ")}`);
 
-    controls.append(addButton, select, deleteButton, helpButton);
+    controls.append(select, addButton, helpButton);
     panel.append(controls, this.createObjectStateTileList(object));
     return panel;
   }
@@ -1520,7 +1509,13 @@ export class ToolStarterApp {
     actions.append(groupButton);
 
     const ungroupButton = this.createShapeActionButton("Ungroup", "ungroup", "ungroup", "Ungroup selected shapes.", () => this.ungroupSelectedShapes());
-    this.setControlDisabled(ungroupButton, !shape || isLocked, isLocked ? `Disabled because ${object.name} is locked for this runtime session.` : noShapeReason, "Ungroup selected shapes.");
+    const hasValidGroup = this.shapeBelongsToValidGroup(object, this.selectedShapeIndex);
+    this.setControlDisabled(
+      ungroupButton,
+      !shape || isLocked || !hasValidGroup,
+      isLocked ? `Disabled because ${object.name} is locked for this runtime session.` : "Disabled until the selected shape belongs to a group with at least two shapes.",
+      "Ungroup selected shapes."
+    );
     actions.append(ungroupButton);
     return actions;
   }
@@ -3035,6 +3030,16 @@ export class ToolStarterApp {
       .filter((index) => index >= 0);
   }
 
+  shapeBelongsToValidGroup(object, shapeIndex) {
+    const shapes = sortedShapes(object);
+    const shape = shapes[normalizeShapeIndex(shapeIndex)];
+    const groupId = String(shape?.groupId || "").trim();
+    if (!groupId) {
+      return false;
+    }
+    return shapes.filter((candidate) => String(candidate?.groupId || "").trim() === groupId).length >= 2;
+  }
+
   selectState(stateId, sourceLabel) {
     const object = this.selectedObject();
     if (!object) {