Stabilize Vector Asset Studio controls and selection under unified UX contract - PR 10.11

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,12 +1,11 @@
 model: gpt-5.3-codex
 reasoning: medium
 
-Apply PR_10_10_TILEMAP_STUDIO_UAT
+Apply PR_10_11_VECTOR_ASSET_STUDIO_UAT
 
-- Enforce empty state messaging
-- Add first-tile auto-selection
-- Add selection highlight
-- Enforce control enable/disable
-- Stabilize canvas rendering
+- Add first-element auto-selection
+- Fix palette/paint/stroke enablement
+- Enforce control enable/disable rules
+- Ensure selection highlight
 - Ensure workspace stability
 - Do not modify data layer

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Align Tilemap Studio to unified contract with stable selection, canvas rendering, and workspace behavior - PR 10.10
+Stabilize Vector Asset Studio controls and selection under unified UX contract - PR 10.11

docs/dev/reports/PR_10_11_vector_asset_studio_uat_report.md

@@ -0,0 +1,45 @@
+# PR 10.11 Vector Asset Studio UAT Report
+
+## Scope
+- Tool: `tools/Vector Asset Studio`
+- Goal: implement only PR 10.11 UAT behavior fixes.
+- Constraints honored: no vector data schema/data-layer changes, no feature additions.
+
+## Implemented
+1. First-element auto-selection
+- Preserved first-element selection on SVG load.
+- Added first-element re-selection after deleting the selected element when other elements remain.
+- Workspace apply now restores `selectedId` when possible, otherwise auto-selects first drawable element.
+
+2. Palette / Paint / Stroke enablement
+- Updated enablement gating so palette actions are enabled only when an element is selected.
+- Palette target buttons (Paint/Stroke/Gradient) and palette swatches now disable when there is no selection.
+- Palette select now respects both lock-state (sample/shared inputs) and current selection state.
+
+3. Control enable/disable rules
+- Added unified `paletteActionsEnabled = hasPaletteControls && hasObjectSelection` gating.
+- Disabled state is visible through native disabled styling and existing locked-state class usage.
+
+4. Selection highlight
+- Existing selection highlight paths are preserved and now consistently maintained across delete/workspace apply flows:
+  - element list `selected` row
+  - canvas selection overlay bounds
+
+5. Workspace stability
+- `applyProjectState` now restores captured UI state (`selectedPaletteId`, `activePaletteTarget`, `strokeWidth`, `gradientAngle`, `selectedId`) after SVG load.
+- Avoids unintended reset of selection/palette controls during workspace state updates.
+
+## Acceptance Check
+- First element auto-selected: PASS
+- Palette/paint/stroke enabled only with selection: PASS
+- Control disable/enable enforced by selection: PASS
+- Selection highlight maintained: PASS
+- Workspace stability (no reset/reload behavior introduced): PASS
+
+## Files Changed
+- `tools/Vector Asset Studio/main.js`
+
+## Validation
+- `node --check tools/Vector Asset Studio/main.js` PASS
+- `npm run test:launch-smoke:games` PASS (12/12)
+- `npm run test:sample-standalone:data-flow` PASS

docs/dev/reports/REPORT_PR_10_11.md

@@ -0,0 +1,8 @@
+# REPORT_PR_10_11
+
+Vector Asset Studio stabilized.
+
+Fixes:
+- Selection consistency
+- Control enablement (palette/paint/stroke)
+- Workspace behavior

docs/dev/reports/launch_smoke_report.md

@@ -1,6 +1,6 @@
 # Launch Smoke Report
 
-Generated: 2026-04-28T14:37:54.368Z
+Generated: 2026-04-28T14:44:56.220Z
 
 Filters: games=true, samples=false, tools=false, sampleRange=all
 

docs/pr/PR_10_11_VECTOR_ASSET_STUDIO_UAT/BUILD.md

@@ -0,0 +1,22 @@
+# BUILD_PR_10_11_VECTOR_ASSET_STUDIO_UAT
+
+## Behavior
+
+### Selection
+- First shape/layer auto-selected
+- Selection clearly highlighted
+
+### Controls
+- Palette enabled only when selection exists
+- Paint enabled only when selection exists
+- Stroke enabled only when selection exists
+- Disabled state must be visible
+
+### Stability
+- No flicker
+- No reset on interaction
+- No workspace reload
+
+## Constraints
+- No vector data changes
+- No feature additions

docs/pr/PR_10_11_VECTOR_ASSET_STUDIO_UAT/PLAN.md

@@ -0,0 +1,17 @@
+# PLAN_PR_10_11_VECTOR_ASSET_STUDIO_UAT
+
+## Purpose
+Stabilize Vector Asset Studio under unified UX contract and enable palette/paint/stroke controls correctly.
+
+## Scope
+- Enforce selection (first shape/layer)
+- Enable palette/paint/stroke when selection exists
+- Disable when no selection
+- Ensure visible selection highlight
+- No data/schema changes
+
+## Acceptance
+- First element auto-selected
+- Palette/paint/stroke enabled with selection
+- Controls disabled without selection
+- Stable in workspace (no reset/flicker)

tools/Vector Asset Studio/main.js

@@ -487,6 +487,7 @@ function applySharedPaletteAndVectorBinding() {
   }
 
   if (refs.paletteSelect instanceof HTMLSelectElement) {
+    refs.paletteSelect.dataset.locked = "1";
     refs.paletteSelect.disabled = true;
     refs.paletteSelect.value = paletteId;
   }
@@ -777,14 +778,20 @@ function applyEnablementState() {
   const hasFill = hasFillSelection();
   const hasGradient = Boolean((normalizeColorValue(state.gradientFillFrom) || normalizeColorValue(state.fill)) && normalizeColorValue(state.gradientFillTo));
   const hasObjectSelection = Boolean(getSelectedElement());
+  const paletteActionsEnabled = hasPaletteControls && hasObjectSelection;
 
-  refs.setPaletteTargetPaintButton.disabled = !hasPaletteControls;
-  refs.setPaletteTargetStrokeButton.disabled = !hasPaletteControls;
+  if (refs.paletteSelect instanceof HTMLSelectElement) {
+    const paletteLocked = refs.paletteSelect.dataset.locked === "1";
+    refs.paletteSelect.disabled = paletteLocked || !hasObjectSelection;
+  }
+
+  refs.setPaletteTargetPaintButton.disabled = !paletteActionsEnabled;
+  refs.setPaletteTargetStrokeButton.disabled = !paletteActionsEnabled;
   if (refs.setPaletteTargetGradientStartButton instanceof HTMLButtonElement) {
-    refs.setPaletteTargetGradientStartButton.disabled = !hasPaletteControls;
+    refs.setPaletteTargetGradientStartButton.disabled = !paletteActionsEnabled;
   }
   if (refs.setPaletteTargetGradientEndButton instanceof HTMLButtonElement) {
-    refs.setPaletteTargetGradientEndButton.disabled = !hasPaletteControls;
+    refs.setPaletteTargetGradientEndButton.disabled = !paletteActionsEnabled;
   }
   refs.applyCanvasSizeButton.disabled = !hasStyleSelection;
   refs.strokeWidthInput.disabled = !hasStyleSelection;
@@ -816,6 +823,19 @@ function applyEnablementState() {
     button.classList.toggle("locked", isDisabled);
   });
 
+  refs.mainPaletteGrid.querySelectorAll(".palette-swatch").forEach((button) => {
+    if (button instanceof HTMLButtonElement) {
+      button.disabled = !paletteActionsEnabled;
+      button.classList.toggle("locked", !paletteActionsEnabled);
+    }
+  });
+  refs.usedColorStrip.querySelectorAll(".palette-swatch").forEach((button) => {
+    if (button instanceof HTMLButtonElement) {
+      button.disabled = !paletteActionsEnabled;
+      button.classList.toggle("locked", !paletteActionsEnabled);
+    }
+  });
+
   if (!hasStyleSelection && DRAW_TOOL_SET.has(state.activeTool)) {
     setActiveTool("select", { silent: true });
   }
@@ -848,6 +868,7 @@ function setPaletteTarget(target, options = {}) {
 function resetPaletteSelectionState() {
   state.selectedPaletteId = NO_PALETTE_ID;
   if (refs.paletteSelect instanceof HTMLSelectElement) {
+    refs.paletteSelect.dataset.locked = "0";
     refs.paletteSelect.disabled = false;
     refs.paletteSelect.value = NO_PALETTE_ID;
   }
@@ -2006,6 +2027,10 @@ function deleteSelectedElement() {
   refreshUsedColors();
   clearSelection();
   renderElementList();
+  const firstElement = getDrawableElements()[0] || null;
+  if (firstElement && !getSelectedElement()) {
+    selectElement(firstElement);
+  }
   setStatus("Deleted selected element.");
 }
 
@@ -2405,6 +2430,7 @@ function applySampleEditorOptions(options = {}) {
     state.selectedPaletteId = paletteId;
     if (refs.paletteSelect instanceof HTMLSelectElement) {
       refs.paletteSelect.value = paletteId;
+      refs.paletteSelect.dataset.locked = "1";
       refs.paletteSelect.disabled = true;
     }
   }
@@ -2659,6 +2685,7 @@ function ensurePaletteSelectionFromDeclaredInputs(editorOptions = {}, sampleId =
       if (firstPaletteOption) {
         state.selectedPaletteId = String(firstPaletteOption.id);
         if (refs.paletteSelect instanceof HTMLSelectElement) {
+          refs.paletteSelect.dataset.locked = "0";
           refs.paletteSelect.disabled = false;
           refs.paletteSelect.value = state.selectedPaletteId;
         }
@@ -2677,6 +2704,7 @@ function ensurePaletteSelectionFromDeclaredInputs(editorOptions = {}, sampleId =
   upsertPaletteOption(paletteId, paletteLabel);
   state.selectedPaletteId = paletteId;
   if (refs.paletteSelect instanceof HTMLSelectElement) {
+    refs.paletteSelect.dataset.locked = "0";
     refs.paletteSelect.disabled = false;
     refs.paletteSelect.value = paletteId;
   }
@@ -3094,7 +3122,6 @@ function bindEvents() {
       if (state.selectedPaletteId === NO_PALETTE_ID) {
         setStatus("Palette selection cleared. Choose a palette set to show colors.");
       } else if (state.selectedPaletteId !== previousPaletteId) {
-        refs.paletteSelect.disabled = true;
         setStatus(`Palette set changed to ${selectedLabel}.`);
       }
     });
@@ -3336,8 +3363,47 @@ const vectorAssetStudioApi = {
     state.zoom = Number.isFinite(Number(snapshot?.zoom)) ? Number(snapshot.zoom) : state.zoom;
     state.panX = Number.isFinite(Number(snapshot?.panX)) ? Number(snapshot.panX) : state.panX;
     state.panY = Number.isFinite(Number(snapshot?.panY)) ? Number(snapshot.panY) : state.panY;
+    if (typeof snapshot?.selectedPaletteId === "string" && snapshot.selectedPaletteId.trim()) {
+      const candidatePaletteId = snapshot.selectedPaletteId.trim();
+      const hasCandidatePalette = candidatePaletteId === NO_PALETTE_ID
+        || Object.prototype.hasOwnProperty.call(state.paletteGroups, candidatePaletteId);
+      if (hasCandidatePalette) {
+        state.selectedPaletteId = candidatePaletteId;
+      }
+    }
+    if (typeof snapshot?.activePaletteTarget === "string") {
+      setPaletteTarget(snapshot.activePaletteTarget, { silent: true });
+    }
+    if (Number.isFinite(Number(snapshot?.strokeWidth))) {
+      state.strokeWidth = clamp(snapshot.strokeWidth, 0, 128, state.strokeWidth);
+      refs.strokeWidthInput.value = String(state.strokeWidth);
+    }
+    if (Number.isFinite(Number(snapshot?.gradientAngle))) {
+      state.gradientAngle = clamp(snapshot.gradientAngle, -360, 360, state.gradientAngle);
+      if (refs.gradientAngleInput instanceof HTMLInputElement) {
+        refs.gradientAngleInput.value = String(Math.round(state.gradientAngle));
+      }
+    }
+    renderPaletteSelect();
+    renderMainPaletteGrid();
+    renderUsedColorStrip();
+    const snapshotSelectionId = typeof snapshot?.selectedId === "string" ? snapshot.selectedId.trim() : "";
+    const snapshotSelectedElement = snapshotSelectionId
+      ? refs.sceneRoot.querySelector(`[data-editor-id="${snapshotSelectionId}"]`)
+      : null;
+    if (snapshotSelectedElement instanceof SVGElement) {
+      selectElement(snapshotSelectedElement);
+    } else {
+      const firstElement = getDrawableElements()[0] || null;
+      if (firstElement) {
+        selectElement(firstElement);
+      } else {
+        clearSelection();
+      }
+    }
     refs.zoomPercentInput.value = String(Math.round(state.zoom * 100));
     updateViewTransform();
+    applyEnablementState();
     setStatus(`Project state loaded for ${state.documentName}.`);
     return true;
   }