Reverse shape list display order and align front back controls with visual stacking - PR_26133_051-shape-order-ui-reverse-sort-and-action-order

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_050 Playwright V8 Coverage Report
+# PR_26133_051 Playwright V8 Coverage Report
 
-Task: PR_26133_050-object-state-shape-grouping-and-order-controls
+Task: PR_26133_051-shape-order-ui-reverse-sort-and-action-order
 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
-(94%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5070/5070; executed functions 532/563
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5073/5073; executed functions 533/564
 ```
 
 ## 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 object header counts, state help text, shape grouping selection, group indicators, z-order controls, state/frame visibility overrides, base shape deletion cleanup, Object Vector schema validation, and Asteroids runtime object-vector rendering.
+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.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_050 Workspace V2 Playwright Results
+# PR_26133_051 Workspace V2 Playwright Results
 
-Task: PR_26133_050-object-state-shape-grouping-and-order-controls
+Task: PR_26133_051-shape-order-ui-reverse-sort-and-action-order
 Date: 2026-05-15
 
 ## Result
@@ -14,15 +14,15 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified Objects header includes object count, selected object state count, and selected object shape count.
-- Verified state `?` help lists the descriptions for every state available in the dropdown.
-- Verified selected shape order controls use the restored z-order glyphs and perform forward/back/front/back order changes.
-- Verified grouped shapes select together, render group indicators, use a deterministic group color, and ungroup cleanly.
-- Verified state/frame visibility toggles write frame overrides without deleting the base object shape.
-- Verified explicit shape delete remains a base-shape delete and cleans dependent frame override indexes.
+- 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.
 
 ## Additional Validation
 
-- Focused Object Vector slices passed before the full run:
-  `shows Object Vector Studio V2 layout shell`, `edits Object Vector Studio V2 preview shapes`, and `supports Object Vector Studio V2 animation states`.
+- 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.
 - `git diff --check` passed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2084,8 +2084,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveClass(/is-selected/);
       await expect(page.locator("[data-palette-color='#ffffff']")).toHaveClass(/is-selected/);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-selected/);
-      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index]")).toHaveCount(2);
-      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index] .object-vector-studio-v2__shape-select-label")).toHaveText(["0. Rectangle", "1. Circle"]);
+      const objectOneShapeButtons = page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index]");
+      await expect(objectOneShapeButtons).toHaveCount(2);
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("data-object-tile-shape-index", "1");
+      await expect(objectOneShapeButtons.last()).toHaveAttribute("data-object-tile-shape-index", "0");
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index] .object-vector-studio-v2__shape-select-label")).toHaveText(["1. Circle", "0. Rectangle"]);
       await expect(page.locator(".object-vector-studio-v2__object-tile-shape-row.is-selected [data-object-tile-shape-index='1']")).toHaveCount(1);
       const shapeTileActionLayout = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] .object-vector-studio-v2__object-tile-shape-row").first().evaluate((row) => {
         const visibility = row.querySelector("[data-shape-visibility-index]");
@@ -2467,12 +2470,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
       const selectedShapeActions = page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] .object-vector-studio-v2__object-tile-shapes .object-vector-studio-v2__shape-list-actions");
       await expect(selectedShapeActions.locator("[data-shape-list-action]")).toHaveCount(6);
-      await expect(selectedShapeActions.locator("[data-shape-list-action] .object-vector-studio-v2__z-label")).toHaveText(["Bring Forward", "Send Backward", "Bring To Front", "Send To Back", "Group", "Ungroup"]);
+      await expect(selectedShapeActions.locator("[data-shape-list-action] .object-vector-studio-v2__z-label")).toHaveText(["Send To Back", "Move Backward", "Move Forward", "Bring To Front", "Group", "Ungroup"]);
       const selectedShapeActionLayout = await selectedShapeActions.evaluate((actions) => {
         const shapeList = actions.closest(".object-vector-studio-v2__object-tile-shapes");
         const buttons = Array.from(actions.querySelectorAll("[data-shape-list-action]"));
         const buttonRects = buttons.map((button) => button.getBoundingClientRect());
         return {
+          iconKeys: buttons.map((button) => button.querySelector("[data-ovs-icon]")?.dataset.ovsIconKey),
           iconOnly: actions.classList.contains("is-icon-only"),
           labelsHidden: buttons.every((button) => {
             const label = button.querySelector(".object-vector-studio-v2__z-label").getBoundingClientRect();
@@ -2482,14 +2486,31 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           squareButtons: buttonRects.every((rect) => Math.round(rect.width) === Math.round(rect.height))
         };
       });
-      expect(selectedShapeActionLayout).toEqual({ iconOnly: true, labelsHidden: true, parentIsShapeList: true, squareButtons: true });
+      expect(selectedShapeActionLayout).toEqual({
+        iconKeys: ["sendBack", "sendBackward", "bringForward", "bringFront", "group", "ungroup"],
+        iconOnly: true,
+        labelsHidden: true,
+        parentIsShapeList: true,
+        squareButtons: true
+      });
 
-      await selectedShapeActions.locator("[data-shape-list-action='bring-forward']").click();
-      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"order": 2');
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Shape row 0 z-order forward\./);
+      await selectedShapeActions.locator("[data-shape-list-action='bring-to-front']").click();
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("data-object-tile-shape-index", "1");
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Shape row 0 z-order front\./);
       await selectedShapeActions.locator("[data-shape-list-action='send-to-back']").click();
-      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"order": 1');
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("data-object-tile-shape-index", "1");
+      await expect(objectOneShapeButtons.last()).toHaveAttribute("data-object-tile-shape-index", "0");
+      await expect(objectOneShapeButtons.last()).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Shape row 1 z-order back\./);
+      await selectedShapeActions.locator("[data-shape-list-action='move-forward']").click();
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("data-object-tile-shape-index", "1");
+      await expect(objectOneShapeButtons.first()).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Shape row 0 z-order forward\./);
+      await selectedShapeActions.locator("[data-shape-list-action='move-backward']").click();
+      await expect(objectOneShapeButtons.last()).toHaveAttribute("data-object-tile-shape-index", "0");
+      await expect(objectOneShapeButtons.last()).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Shape row 1 z-order backward\./);
 
       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();
@@ -7480,7 +7501,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await smallUfoTile.scrollIntoViewIfNeeded();
       await smallUfoTile.click();
       await expect(smallUfoTile).toContainText("object > asteroids > Small UFO");
-      await expect(smallUfoTile.locator("[data-object-tile-shape-index] .object-vector-studio-v2__shape-select-label")).toHaveText(["0. Ellipse", "1. Ellipse"]);
+      await expect(smallUfoTile.locator("[data-object-tile-shape-index] .object-vector-studio-v2__shape-select-label")).toHaveText(["1. Ellipse", "0. Ellipse"]);
       await page.locator('button[aria-controls="objectVectorStudioV2DependencyGraphContent"]').click();
       await expect(page.locator("#objectVectorStudioV2DependencyGraph")).toContainText("Object tags:");
       await expect(page.locator("#objectVectorStudioV2DependencyGraph")).toContainText("object.asteroids.ship: Asteroids Ship");

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

@@ -1410,7 +1410,10 @@ export class ToolStarterApp {
   createObjectTileShapeList(object) {
     const list = document.createElement("div");
     list.className = "object-vector-studio-v2__object-tile-shapes";
-    sortedShapes(object).forEach((shape, shapeIndex) => {
+    const displayedShapes = sortedShapes(object)
+      .map((shape, shapeIndex) => ({ shape, shapeIndex }))
+      .reverse();
+    displayedShapes.forEach(({ shape, shapeIndex }) => {
       const displayShape = object.id === this.selectedObjectId ? this.effectiveShape(shape, shapeIndex) : shape;
       const row = document.createElement("div");
       row.className = "object-vector-studio-v2__object-tile-shape-row";
@@ -1497,10 +1500,10 @@ export class ToolStarterApp {
     const isLocked = this.isObjectLocked(object.id);
     const noShapeReason = "Disabled until a schema-valid shape is selected.";
     [
-      { action: "forward", iconClass: "bring-forward", iconKey: "bringForward", label: "Bring Forward", title: "Move selected shape up one row / bring forward." },
-      { action: "backward", iconClass: "send-backward", iconKey: "sendBackward", label: "Send Backward", title: "Move selected shape down one row / send backward." },
-      { action: "front", iconClass: "bring-front", iconKey: "bringFront", label: "Bring To Front", title: "Bring selected shape to the front." },
-      { action: "back", iconClass: "send-back", iconKey: "sendBack", label: "Send To Back", title: "Send selected shape to the back." }
+      { action: "back", iconClass: "send-back", iconKey: "sendBack", label: "Send To Back", title: "Send selected shape to the back." },
+      { action: "backward", iconClass: "send-backward", iconKey: "sendBackward", label: "Move Backward", title: "Move selected shape backward one row." },
+      { action: "forward", iconClass: "bring-forward", iconKey: "bringForward", label: "Move Forward", title: "Move selected shape forward one row." },
+      { action: "front", iconClass: "bring-front", iconKey: "bringFront", label: "Bring To Front", title: "Bring selected shape to the front." }
     ].forEach((definition) => {
       const button = this.createShapeActionButton(definition.label, definition.iconClass, definition.iconKey, definition.title, () => this.changeSelectedShapeOrder(definition.action));
       this.setControlDisabled(button, !shape || isLocked, isLocked ? `Disabled because ${object.name} is locked for this runtime session.` : noShapeReason, definition.title);