Align opacity controls with Paint Stroke mode based application workflow - PR_26133_059-palette-opacity-mode-and-application-flow

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_058 Playwright V8 Coverage Report
+# PR_26133_059 Playwright V8 Coverage Report
 
-Task: PR_26133_058-palette-tag-sort-and-paint-stroke-mode-flow
+Task: PR_26133_059-palette-opacity-mode-and-application-flow
 Date: 2026-05-15
 
 ## Result
@@ -24,7 +24,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 ## Relevant Runtime Coverage
 
 ```text
-(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5688/5688; executed functions 600/631
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5669/5669; executed functions 600/631
 ```
 
 ## Guardrail
@@ -35,4 +35,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 Palette Tag sorting, compact five-button sort layout, Paint/Stroke mode selection, swatch-only color selection, shape-click color application, schema validation, and Asteroids runtime object-vector rendering.
+The Workspace V2 run exercised Object Vector Studio V2 opacity control layout, active Fill/Stroke opacity selection without immediate shape mutation, shape-click opacity application through the existing Paint/Stroke workflow, schema validation, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_058 Workspace V2 Playwright Results
+# PR_26133_059 Workspace V2 Playwright Results
 
-Task: PR_26133_058-palette-tag-sort-and-paint-stroke-mode-flow
+Task: PR_26133_059-palette-opacity-mode-and-application-flow
 Date: 2026-05-15
 
 ## Result
@@ -14,18 +14,14 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified Tag appears as the fifth Palette sort option and sorts swatches by swatch tags.
-- Verified Hue/Sat/Bri/Name/Tag sort controls stay on one line.
-- Verified Paint and Stroke buttons select mode only and do not directly recolor the selected shape.
-- Verified swatch clicks update the active Paint/Stroke color without directly recoloring the selected shape.
-- Verified clicking a shape applies the currently selected Paint/Stroke color.
+- Verified the Palette opacity controls render as `Opacity`, then compact `Fill` and `Stroke` inputs.
+- Verified changing Fill opacity updates the active Fill opacity value only and does not immediately mutate the selected shape.
+- Verified changing Stroke opacity updates the active Stroke opacity value only and does not immediately mutate the selected shape.
+- Verified clicking a shape applies the currently selected Fill/Stroke opacity values through the existing Paint/Stroke application flow.
+- Verified Paint/Stroke color mode behavior remains selection-first and shape-click apply.
 
 ## Additional Validation
 
 - Focused palette/layout slice passed:
   `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "layout shell"` completed with 1 passed, 0 failed.
-- Focused Object Vector dirty-state slice passed:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "dirty state"` completed with 1 passed, 0 failed.
-- Focused Asteroids runtime asset slice passed:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "runtime assets into Asteroids"` completed with 1 passed, 0 failed.
 - `git diff --check` passed. The command reported existing Windows LF-to-CRLF warnings for touched files and no whitespace errors.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1740,14 +1740,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const widthInput = content.querySelector("#objectVectorStudioV2StrokeWidth").getBoundingClientRect();
         const fillOpacityLabel = content.querySelector("label[for='objectVectorStudioV2FillOpacity']").getBoundingClientRect();
         const strokeOpacityLabel = content.querySelector("label[for='objectVectorStudioV2StrokeOpacity']").getBoundingClientRect();
+        const opacityHeading = content.querySelector(".object-vector-studio-v2__palette-opacity-heading").getBoundingClientRect();
         const opacityInputs = Array.from(opacityRow.querySelectorAll("input"));
         const opacityInputRects = opacityInputs.map((input) => input.getBoundingClientRect());
         return {
           opacityBelowPrimary: fillOpacityLabel.top >= Math.max(paintButton.bottom, strokeButton.bottom, widthLabel.bottom),
-          opacityInline: Math.abs((fillOpacityLabel.top + fillOpacityLabel.height / 2) - (strokeOpacityLabel.top + strokeOpacityLabel.height / 2)) < 4,
+          opacityHeading: content.querySelector(".object-vector-studio-v2__palette-opacity-heading").textContent.trim(),
+          opacityInline: [fillOpacityLabel, strokeOpacityLabel].every((rect) => Math.abs((opacityHeading.top + opacityHeading.height / 2) - (rect.top + rect.height / 2)) < 4),
           opacityInputFitsFourDigits: opacityInputRects.every((rect) => Math.round(rect.width) >= 54),
           opacityInputRanges: opacityInputs.map((input) => ({ max: input.max, min: input.min, step: input.step, value: input.value })),
           opacityLabels: Array.from(opacityRow.querySelectorAll("label > span")).map((label) => label.textContent.trim()),
+          opacityOrder: Array.from(opacityRow.children).map((element) => element.textContent.trim().replace(/\s+/g, " ")),
           primaryInline: [strokeButton, widthLabel].every((rect) => Math.abs((paintButton.top + paintButton.height / 2) - (rect.top + rect.height / 2)) < 4),
           primaryOrder: Array.from(primaryRow.children).map((element) => element.textContent.trim()),
           widthInputFitsXxDotX: Math.round(widthInput.width) >= 58,
@@ -1756,13 +1759,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       });
       expect(paletteControlLayout).toEqual({
         opacityBelowPrimary: true,
+        opacityHeading: "Opacity",
         opacityInline: true,
         opacityInputFitsFourDigits: true,
         opacityInputRanges: [
           { max: "255", min: "0", step: "1", value: "255" },
           { max: "255", min: "0", step: "1", value: "255" }
         ],
-        opacityLabels: ["Fill Op", "Stroke Op"],
+        opacityLabels: ["Fill", "Stroke"],
+        opacityOrder: ["Opacity", "Fill", "Stroke"],
         primaryInline: true,
         primaryOrder: ["Paint", "Stroke", "Width"],
         widthInputFitsXxDotX: true,
@@ -2625,9 +2630,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2FillOpacity").dispatchEvent("change");
       await expect(page.locator("#objectVectorStudioV2FillOpacity")).not.toHaveAttribute("aria-invalid", "true");
       await expect(page.locator("#objectVectorStudioV2FillOpacity")).toHaveValue("128");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"fillOpacity": 0.502');
+      await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("fill-opacity", "1");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected fill opacity 0\.502\./);
+      const shapeOneStyleAfterFillOpacityInput = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().style }));
+      expect(shapeOneStyleAfterFillOpacityInput.fillOpacity).toBe(1);
+      await clickPreviewShape(1);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"fillOpacity": 0.502');
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("fill-opacity", "0.502");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied fill opacity 0\.502 to shape row 1\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #6fd3ff from cyan to shape row 1 by render surface click\. Target: paint opacity 0\.502\./);
       const shapeOneStyleBeforeStrokeMode = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().style }));
       await page.locator("#objectVectorStudioV2StrokeModeButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Palette target set to Stroke\./);
@@ -2649,9 +2660,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2StrokeOpacity").dispatchEvent("change");
       await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).not.toHaveAttribute("aria-invalid", "true");
       await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).toHaveValue("166");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"strokeOpacity": 0.651');
+      await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("stroke-opacity", "1");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Selected stroke opacity 0\.651\./);
+      const shapeOneStyleAfterStrokeOpacityInput = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().style }));
+      expect(shapeOneStyleAfterStrokeOpacityInput.strokeOpacity).toBe(1);
+      await clickPreviewShape(1);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"strokeOpacity": 0.651');
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("stroke-opacity", "0.651");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied stroke opacity 0\.651 to shape row 1\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #6fd3ff from cyan to shape row 1 by render surface click\. Target: stroke width 2, opacity 0\.651\./);
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.selectedStrokeColor = "#123456";
         window.__objectVectorStudioV2App.selectedStrokeLabel = "manual rogue";

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

@@ -247,12 +247,13 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                 </label>
               </div>
               <div class="object-vector-studio-v2__palette-opacity-row">
+                <span class="object-vector-studio-v2__palette-opacity-heading">Opacity</span>
                 <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2FillOpacity">
-                  <span>Fill Op</span>
+                  <span>Fill</span>
                   <input id="objectVectorStudioV2FillOpacity" type="number" min="0" max="255" step="1" value="255">
                 </label>
                 <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeOpacity">
-                  <span>Stroke Op</span>
+                  <span>Stroke</span>
                   <input id="objectVectorStudioV2StrokeOpacity" type="number" min="0" max="255" step="1" value="255">
                 </label>
               </div>

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

@@ -4199,26 +4199,7 @@ export class ToolStarterApp {
       this.selectedFillOpacity = opacity.value;
     }
     this.updatePaletteModeSwatches();
-    if (this.selectedShapeIndex < 0) {
-      this.statusLog.write(`OK Palette ${normalizedTarget} opacity set to ${opacity.value}.`);
-      return;
-    }
-    const selected = sortedShapes(this.selectedObject())[this.selectedShapeIndex] || null;
-    if (!selected) {
-      this.statusLog.write(`OK Palette ${normalizedTarget} opacity set to ${opacity.value}.`);
-      return;
-    }
-    if (selected.locked) {
-      this.statusLog.write(`WARN Palette ${normalizedTarget} opacity skipped: shape row ${this.selectedShapeIndex} is locked.`);
-      return;
-    }
-    if (this.guardSelectedObjectMutation("Palette opacity application")) {
-      return;
-    }
-    const nextPayload = this.cloneCurrentPayload();
-    const shape = this.findShapeInPayload(nextPayload, this.selectedShapeIndex);
-    shape.style[normalizedTarget === "stroke" ? "strokeOpacity" : "fillOpacity"] = opacity.value;
-    this.commitPayloadUpdate(nextPayload, this.selectedObjectId, this.selectedShapeIndex, `OK Applied ${normalizedTarget} opacity ${opacity.value} to shape row ${this.selectedShapeIndex}.`, "Palette opacity application failed schema validation");
+    this.statusLog.write(`OK Selected ${normalizedTarget} opacity ${opacity.value}.`);
   }
 
   selectPaletteColor(color, label) {

tools/object-vector-studio-v2/styles/toolStarter.css

@@ -1322,6 +1322,13 @@ textarea:hover {
   font-size: 0.72rem;
 }
 
+.object-vector-studio-v2__palette-opacity-heading {
+  flex: 0 0 auto;
+  font-size: 0.74rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .object-vector-studio-v2__palette-opacity-row .object-vector-studio-v2__inline-field input {
   width: 54px;
 }