From bbbe2a28f5ec074787a6d8dded98c94ad8f2510d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Jun 2026 07:27:36 +0000
Subject: [PATCH 1/3] fix(configurator): resolve color swatches from preview
 and accept CSS variables

Replace all <input type="color"> occurrences across Effects, Misc, Borders,
Shadows, and Colors panels with a new ColorInput component that:

- Resolves the actual displayed color via resolveColor() from the live preview
  iframe so swatches show the real computed value instead of hardcoded fallbacks
- Accepts CSS variable syntax (var(--token)) as text input; hides the native
  color picker when a variable is entered since type="color" can't handle them
- Clicking the swatch still opens the native picker for concrete color values,
  seeded with the resolved hex

Also fixes TokenRow swatch to use resolveColor() so tokens whose values
reference CSS variables (not in the configurator DOM scope) render correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EyxX99kENNBAiWeZvLQNBT
---
 .../src/components/inputs/ColorInput.svelte   | 89 +++++++++++++++++++
 .../src/components/inputs/TokenRow.svelte     |  9 +-
 .../src/components/panels/BordersPanel.svelte | 53 +++++------
 .../src/components/panels/ColorsPanel.svelte  | 26 ++----
 .../src/components/panels/EffectsPanel.svelte | 37 ++++----
 .../src/components/panels/MiscPanel.svelte    | 61 ++++++-------
 .../src/components/panels/ShadowsPanel.svelte | 41 ++++-----
 7 files changed, 188 insertions(+), 128 deletions(-)
 create mode 100644 configurator/src/components/inputs/ColorInput.svelte

diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
new file mode 100644
index 00000000..e001c0b5
--- /dev/null
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
+
+  let {
+    token,
+    value,
+    placeholder,
+    isOverridden,
+    onSet,
+    onReset,
+  }: {
+    token: string;
+    value: string;
+    placeholder?: string;
+    isOverridden: boolean;
+    onSet: (v: string) => void;
+    onReset: () => void;
+  } = $props();
+
+  let editing = $state(false);
+
+  function paint(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || expr || "transparent";
+  }
+
+  let swatchColor = $derived(paint(value || `var(${token})`));
+
+  // Detect if the current value is a CSS variable reference (can't use native picker)
+  let isVar = $derived(value.trim().startsWith("var(") || value.trim().startsWith("--"));
+
+  // Convert rgb(...) string to hex for native picker seed
+  function toHex(rgb: string): string {
+    const m = rgb.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (!m) return "#6366f1";
+    return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+  }
+</script>
+
+<div class="flex items-center gap-2">
+  <!-- Swatch / native picker trigger -->
+  <div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer">
+    <div class="absolute inset-0" style={`background: ${swatchColor}`}></div>
+    {#if !isVar}
+      <input
+        type="color"
+        value={toHex(swatchColor)}
+        oninput={(e) => onSet((e.target as HTMLInputElement).value)}
+        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+        tabindex="-1"
+      />
+    {/if}
+  </div>
+
+  <!-- Text display / editable input -->
+  {#if editing}
+    <input
+      value={value}
+      autofocus
+      onblur={(e) => {
+        const v = (e.target as HTMLInputElement).value.trim();
+        if (!v) onReset();
+        else onSet(v);
+        editing = false;
+      }}
+      onkeydown={(e) => {
+        if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
+        if (e.key === "Escape") editing = false;
+      }}
+      placeholder={placeholder ?? "default"}
+      class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"
+    />
+  {:else}
+    <button
+      onclick={() => { editing = true; }}
+      class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"
+    >
+      {#if isOverridden}
+        <span class="text-indigo-300">{value}</span>
+      {:else}
+        {placeholder ?? "default"}
+      {/if}
+    </button>
+  {/if}
+
+  {#if isOverridden}
+    <button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+  {/if}
+</div>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index a198012b..c7becf3a 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SlashedToken } from '../../types';
+  import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
 
   let { token, overrideValue, onSet, onReset }: {
     token: SlashedToken;
@@ -21,6 +22,12 @@
 
   let displayValue = $derived(overrideValue ?? token.value);
   let isOverridden = $derived(overrideValue !== undefined);
+
+  function paintSwatch(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || resolveColor(`var(${token.name})`) || expr;
+  }
+  let swatchColor = $derived(paintSwatch(displayValue));
   let type = $derived(guessType(token));
   let shortName = $derived(token.name.replace("--sf-", ""));
 </script>
@@ -31,7 +38,7 @@
   {#if type === "color"}
     <div
       class="w-4 h-4 rounded-sm border border-white/10 shrink-0"
-      style={`background: ${displayValue}`}
+      style={`background: ${swatchColor}`}
     ></div>
   {:else}
     <div class="w-4 h-4 shrink-0"></div>
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index 750cacf6..b4adda51 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -4,6 +4,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import StylePresetCards from '../inputs/StylePresetCards.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -103,18 +104,14 @@
       <span class="text-[10px] text-slate-500">{showBorderColor ? "▲" : "▼"}</span>
     </button>
     {#if showBorderColor}
-      <div class="flex items-center gap-2">
-        <input
-          type="color"
-          value={borderColor || "#e2e8f0"}
-          oninput={(e) => onSet("--sf-color-border", (e.target as HTMLInputElement).value)}
-          class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-        />
-        <span class="text-[9px] font-mono text-slate-400 flex-1">{borderColor || "auto-derived"}</span>
-        {#if "--sf-color-border" in overrides}
-          <button onclick={() => onReset("--sf-color-border")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
-      </div>
+      <ColorInput
+        token="--sf-color-border"
+        value={borderColor}
+        placeholder="auto-derived"
+        isOverridden={"--sf-color-border" in overrides}
+        onSet={(v) => onSet("--sf-color-border", v)}
+        onReset={() => onReset("--sf-color-border")}
+      />
       <p class="text-[9px] text-slate-600">
         Drives --sf-color-border--strong, --subtle, --translucent automatically.
       </p>
@@ -242,16 +239,14 @@
     {#if showDividers}
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div>
-        <input
-          type="color"
-          value={dividerColor || "#e2e8f0"}
-          oninput={(e) => onSet("--sf-divider-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-divider-color"
+          value={dividerColor}
+          placeholder="inherits border"
+          isOverridden={"--sf-divider-color" in overrides}
+          onSet={(v) => onSet("--sf-divider-color", v)}
+          onReset={() => onReset("--sf-divider-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{dividerColor || "inherits border"}</span>
-        {#if "--sf-divider-color" in overrides}
-          <button onclick={() => onReset("--sf-divider-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
       <SliderRow
         label="Width" value={dividerWidth} min={0.5} max={4} step={0.5} unit="px"
@@ -299,16 +294,14 @@
       />
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div>
-        <input
-          type="color"
-          value={focusRingColor || "#6366f1"}
-          oninput={(e) => onSet("--sf-focus-ring-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-focus-ring-color"
+          value={focusRingColor}
+          placeholder="default (action)"
+          isOverridden={"--sf-focus-ring-color" in overrides}
+          onSet={(v) => onSet("--sf-focus-ring-color", v)}
+          onReset={() => onReset("--sf-focus-ring-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{focusRingColor || "default (action)"}</span>
-        {#if "--sf-focus-ring-color" in overrides}
-          <button onclick={() => onReset("--sf-focus-ring-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
       <!-- Focus ring preview -->
       <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center">
diff --git a/configurator/src/components/panels/ColorsPanel.svelte b/configurator/src/components/panels/ColorsPanel.svelte
index 6cffc7c0..b473d2bd 100644
--- a/configurator/src/components/panels/ColorsPanel.svelte
+++ b/configurator/src/components/panels/ColorsPanel.svelte
@@ -7,6 +7,7 @@
   import OklchColorDesk from '../inputs/OklchColorDesk.svelte';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { tokens, overrides, onSet, onReset, onBulkChange, onSelectDomain }: {
     tokens: SlashedToken[];
@@ -956,23 +957,14 @@
           {@const resolved = paint(`var(${s.name})`, "")}
           <div>
             <div class="text-[10px] font-semibold text-slate-400 mb-1">{s.label}</div>
-            <div class="flex items-center gap-2">
-              <span class="relative w-7 h-7 rounded border border-white/10 shrink-0 overflow-hidden" style={`background:${(s.name in overrides ? "" : resolved) || "transparent"}`}>
-                <input
-                  type="color"
-                  value={overrides[s.name] ?? "#6366f1"}
-                  oninput={(e) => onSet(s.name, (e.target as HTMLInputElement).value)}
-                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                />
-                {#if s.name in overrides}
-                  <span class="absolute inset-0" style={`background:${overrides[s.name]}`}></span>
-                {/if}
-              </span>
-              <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{overrides[s.name] ?? (resolved ? `auto-derived · ${resolved}` : "auto-derived")}</span>
-              {#if s.name in overrides}
-                <button onclick={() => onReset(s.name)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-              {/if}
-            </div>
+            <ColorInput
+              token={s.name}
+              value={overrides[s.name] ?? ""}
+              placeholder={resolved ? `auto-derived · ${resolved}` : "auto-derived"}
+              isOverridden={s.name in overrides}
+              onSet={(v) => onSet(s.name, v)}
+              onReset={() => onReset(s.name)}
+            />
           </div>
         {/each}
       </div>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index aa56fc59..41e0e12f 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset }: {
     overrides: Record<string, string>;
@@ -152,16 +153,14 @@
       <!-- Scrim color -->
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div>
-        <input
-          type="color"
-          value={scrimColor || "#000000"}
-          oninput={(e) => onSet("--sf-scrim-color", (e.target as HTMLInputElement).value)}
-          class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+        <ColorInput
+          token="--sf-scrim-color"
+          value={scrimColor}
+          placeholder="default (base color)"
+          isOverridden={"--sf-scrim-color" in overrides}
+          onSet={(v) => onSet("--sf-scrim-color", v)}
+          onReset={() => onReset("--sf-scrim-color")}
         />
-        <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{scrimColor || "default (base color)"}</span>
-        {#if "--sf-scrim-color" in overrides}
-          <button onclick={() => onReset("--sf-scrim-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-        {/if}
       </div>
 
       <div>
@@ -212,21 +211,19 @@
     </button>
     {#if showScrollbar}
       {#each [
-        { label: "Thumb color", token: "--sf-scrollbar-thumb", val: scrollbarThumb, default: "#6366f1" },
-        { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack, default: "transparent" },
+        { label: "Thumb color", token: "--sf-scrollbar-thumb", val: scrollbarThumb },
+        { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack },
       ] as row (row.token)}
         <div class="flex items-center gap-2">
           <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">{row.label}</div>
-          <input
-            type="color"
-            value={row.val || (row.default === "transparent" ? "#000000" : row.default)}
-            oninput={(e) => onSet(row.token, (e.target as HTMLInputElement).value)}
-            class="w-7 h-7 rounded border border-white/10 bg-transparent cursor-pointer"
+          <ColorInput
+            token={row.token}
+            value={row.val}
+            placeholder="default"
+            isOverridden={row.token in overrides}
+            onSet={(v) => onSet(row.token, v)}
+            onReset={() => onReset(row.token)}
           />
-          <span class="text-[9px] font-mono text-slate-500 flex-1 truncate">{row.val || "default"}</span>
-          {#if row.token in overrides}
-            <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
         </div>
       {/each}
       <!-- Scrollbar strip preview -->
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index fa889263..00adbf1b 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -180,33 +181,25 @@
       <div class="space-y-2">
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={overrides["--sf-color-selection-bg"] ?? "#6366f1"}
-              oninput={(e) => onSet("--sf-color-selection-bg", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{overrides["--sf-color-selection-bg"] ?? "default"}</span>
-            {#if "--sf-color-selection-bg" in overrides}
-              <button onclick={() => onReset("--sf-color-selection-bg")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-color-selection-bg"
+            value={overrides["--sf-color-selection-bg"] ?? ""}
+            placeholder="default"
+            isOverridden={"--sf-color-selection-bg" in overrides}
+            onSet={(v) => onSet("--sf-color-selection-bg", v)}
+            onReset={() => onReset("--sf-color-selection-bg")}
+          />
         </div>
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={overrides["--sf-color-selection-text"] ?? "#ffffff"}
-              oninput={(e) => onSet("--sf-color-selection-text", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{overrides["--sf-color-selection-text"] ?? "default"}</span>
-            {#if "--sf-color-selection-text" in overrides}
-              <button onclick={() => onReset("--sf-color-selection-text")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-color-selection-text"
+            value={overrides["--sf-color-selection-text"] ?? ""}
+            placeholder="default"
+            isOverridden={"--sf-color-selection-text" in overrides}
+            onSet={(v) => onSet("--sf-color-selection-text", v)}
+            onReset={() => onReset("--sf-color-selection-text")}
+          />
         </div>
         <!-- Selection preview -->
         <div class="bg-white/4 rounded-xl border border-white/8 p-3">
@@ -320,18 +313,14 @@
     {#if showCaretLinks}
       <div>
         <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div>
-        <div class="flex items-center gap-2">
-          <input
-            type="color"
-            value={caretColor || "#6366f1"}
-            oninput={(e) => onSet("--sf-caret-color", (e.target as HTMLInputElement).value)}
-            class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-          />
-          <span class="text-[9px] font-mono text-slate-400 flex-1">{caretColor || "default (action color)"}</span>
-          {#if "--sf-caret-color" in overrides}
-            <button onclick={() => onReset("--sf-caret-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
-        </div>
+        <ColorInput
+          token="--sf-caret-color"
+          value={caretColor}
+          placeholder="default (action color)"
+          isOverridden={"--sf-caret-color" in overrides}
+          onSet={(v) => onSet("--sf-caret-color", v)}
+          onReset={() => onReset("--sf-caret-color")}
+        />
       </div>
       <SliderRow
         label="Underline offset" value={underlineOffset} min={0} max={0.5} step={0.01} unit="em"
diff --git a/configurator/src/components/panels/ShadowsPanel.svelte b/configurator/src/components/panels/ShadowsPanel.svelte
index d1586073..0300475e 100644
--- a/configurator/src/components/panels/ShadowsPanel.svelte
+++ b/configurator/src/components/panels/ShadowsPanel.svelte
@@ -4,6 +4,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import StylePresetCards from '../inputs/StylePresetCards.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -85,18 +86,14 @@
     {#if showShadowColor}
       <div>
         <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div>
-        <div class="flex items-center gap-2">
-          <input
-            type="color"
-            value={shadowColor || "#1a1a2e"}
-            oninput={(e) => onSet("--sf-shadow-color", (e.target as HTMLInputElement).value)}
-            class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-          />
-          <span class="text-[9px] font-mono text-slate-400 flex-1">{shadowColor || "auto (neutral hue)"}</span>
-          {#if "--sf-shadow-color" in overrides}
-            <button onclick={() => onReset("--sf-shadow-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-          {/if}
-        </div>
+        <ColorInput
+          token="--sf-shadow-color"
+          value={shadowColor}
+          placeholder="auto (neutral hue)"
+          isOverridden={"--sf-shadow-color" in overrides}
+          onSet={(v) => onSet("--sf-shadow-color", v)}
+          onReset={() => onReset("--sf-shadow-color")}
+        />
         <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p>
       </div>
     {/if}
@@ -139,18 +136,14 @@
       {#if !glowDisabled}
         <div>
           <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div>
-          <div class="flex items-center gap-2">
-            <input
-              type="color"
-              value={shadowGlowColor || "#6366f1"}
-              oninput={(e) => onSet("--sf-shadow-glow-color", (e.target as HTMLInputElement).value)}
-              class="w-8 h-8 rounded border border-white/10 bg-transparent cursor-pointer"
-            />
-            <span class="text-[9px] font-mono text-slate-400 flex-1">{shadowGlowColor || "default (primary color)"}</span>
-            {#if "--sf-shadow-glow-color" in overrides}
-              <button onclick={() => onReset("--sf-shadow-glow-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
-            {/if}
-          </div>
+          <ColorInput
+            token="--sf-shadow-glow-color"
+            value={shadowGlowColor}
+            placeholder="default (primary color)"
+            isOverridden={"--sf-shadow-glow-color" in overrides}
+            onSet={(v) => onSet("--sf-shadow-glow-color", v)}
+            onReset={() => onReset("--sf-shadow-glow-color")}
+          />
           <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p>
         </div>
       {/if}

From 7c9a5c6fc9ac2e49a5e2ef40cb2654cb9e0a689c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Jun 2026 07:34:56 +0000
Subject: [PATCH 2/3] fix(configurator): address ColorInput normalization and
 picker seed bugs

- Normalize bare "--token" input to "var(--token)" before storing or
  resolving so overrides emit valid CSS instead of a literal string
- Extend toHex() to pass through hex strings (#RGB / #RRGGBB) so the
  native picker is seeded correctly when the preview resolver is not yet
  available
- Gate TokenRow's swatchColor resolution behind type === "color" so
  non-color rows don't subscribe to previewVersion bumps unnecessarily

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EyxX99kENNBAiWeZvLQNBT
---
 .../src/components/inputs/ColorInput.svelte   | 27 ++++++++++++++-----
 .../src/components/inputs/TokenRow.svelte     |  7 ++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
index e001c0b5..55836046 100644
--- a/configurator/src/components/inputs/ColorInput.svelte
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -19,9 +19,16 @@
 
   let editing = $state(false);
 
+  // Bare "--token" is a UI shorthand; normalize to "var(--token)" before resolving or storing.
+  function normalize(v: string): string {
+    const t = v.trim();
+    return t.startsWith("--") && !t.startsWith("var(") ? `var(${t})` : t;
+  }
+
   function paint(expr: string): string {
     void previewVersion.value;
-    return resolveColor(expr) || expr || "transparent";
+    const norm = normalize(expr);
+    return resolveColor(norm) || norm || "transparent";
   }
 
   let swatchColor = $derived(paint(value || `var(${token})`));
@@ -29,11 +36,17 @@
   // Detect if the current value is a CSS variable reference (can't use native picker)
   let isVar = $derived(value.trim().startsWith("var(") || value.trim().startsWith("--"));
 
-  // Convert rgb(...) string to hex for native picker seed
-  function toHex(rgb: string): string {
-    const m = rgb.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
-    if (!m) return "#6366f1";
-    return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+  // Convert a resolved rgb(...) or a raw hex string to a #RRGGBB seed for the native picker.
+  function toHex(color: string): string {
+    // Pass through hex colors directly (3- or 6-digit)
+    const hex6 = color.match(/^#([0-9a-fA-F]{6})$/);
+    if (hex6) return color.toLowerCase();
+    const hex3 = color.match(/^#([0-9a-fA-F]{3})$/);
+    if (hex3) return "#" + hex3[1].split("").map(c => c + c).join("");
+    // Parse computed rgb()/rgba() strings from resolveColor
+    const m = color.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (m) return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+    return "#6366f1";
   }
 </script>
 
@@ -58,7 +71,7 @@
       value={value}
       autofocus
       onblur={(e) => {
-        const v = (e.target as HTMLInputElement).value.trim();
+        const v = normalize((e.target as HTMLInputElement).value);
         if (!v) onReset();
         else onSet(v);
         editing = false;
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index c7becf3a..fb90767d 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -22,14 +22,15 @@
 
   let displayValue = $derived(overrideValue ?? token.value);
   let isOverridden = $derived(overrideValue !== undefined);
+  let type = $derived(guessType(token));
+  let shortName = $derived(token.name.replace("--sf-", ""));
 
   function paintSwatch(expr: string): string {
     void previewVersion.value;
     return resolveColor(expr) || resolveColor(`var(${token.name})`) || expr;
   }
-  let swatchColor = $derived(paintSwatch(displayValue));
-  let type = $derived(guessType(token));
-  let shortName = $derived(token.name.replace("--sf-", ""));
+  // Only subscribe to previewVersion for color tokens to avoid unnecessary recomputation.
+  let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");
 </script>
 
 <div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-white/4"}`}>

From 0c2d8d69af2675a635e2cdcd32bd76f39ca04cc1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Jun 2026 07:37:02 +0000
Subject: [PATCH 3/3] fix(configurator): escape key in ColorInput should
 cancel, not commit

Setting editing = false on Escape caused the input to unmount, firing
blur and committing the draft value. Use a cancelBlur flag to suppress
the blur handler when Escape is pressed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EyxX99kENNBAiWeZvLQNBT
---
 configurator/src/components/inputs/ColorInput.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
index 55836046..87af50b3 100644
--- a/configurator/src/components/inputs/ColorInput.svelte
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -18,6 +18,7 @@
   } = $props();
 
   let editing = $state(false);
+  let cancelBlur = $state(false);
 
   // Bare "--token" is a UI shorthand; normalize to "var(--token)" before resolving or storing.
   function normalize(v: string): string {
@@ -71,6 +72,7 @@
       value={value}
       autofocus
       onblur={(e) => {
+        if (cancelBlur) { cancelBlur = false; editing = false; return; }
         const v = normalize((e.target as HTMLInputElement).value);
         if (!v) onReset();
         else onSet(v);
@@ -78,7 +80,7 @@
       }}
       onkeydown={(e) => {
         if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
-        if (e.key === "Escape") editing = false;
+        if (e.key === "Escape") { cancelBlur = true; editing = false; }
       }}
       placeholder={placeholder ?? "default"}
       class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"