From 5d87c4b024896124347915b3d9ba15bd78c53bb2 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Wed, 19 Aug 2026 22:14:21 +0000
Subject: [PATCH 1/6] feat(configurator): unified validated import + mobile
 preview template dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two phase-7 fixes.

1) Unified import (src/lib/importOverrides.ts). The header import had two silent,
   inconsistent paths — a .json REPLACED the whole state with no validation, a
   .css MERGED via a loose regex, and an unrecognisable file did nothing with no
   feedback. Now one pipeline handles both: detect JSON (flat map or a
   theme-file { tokens }) vs CSS, sanitise every value, drop keys that aren't a
   real --sf-* name or are empty/unsafe after sanitising, migrate renamed/
   removed tokens and flag unknown ones, and return a report. App.handleImport
   MERGES the result (predictable, non-destructive for both formats) and shows a
   transient status banner ("Imported N tokens · M migrated · K skipped"), so an
   import can no longer fail silently. Header tooltip fixed to "Import overrides
   (CSS or JSON)". parseImport/summarizeImport are unit-tested (10 tests).

2) Mobile preview template selector. The horizontal tab strip was clipped in the
   narrow mobile viewport; it's now a compact <select> dropdown on mobile and the
   full tab strip on sm+.

check + lint clean; 282 unit tests and the shell e2e suite pass; import merge +
banner and the mobile dropdown screenshot-verified.

Scope: lands the validated/merged import + mobile preview dropdown. A full
mobile category drawer and an explicit merge-vs-replace chooser modal remain
follow-ups (replace + rename migration is already available via the Install &
export panel's theme-file import).
---
 configurator/src/App.svelte                   |  60 ++++-----
 .../src/components/shell/PreviewPanel.svelte  |  15 ++-
 .../src/components/shell/StudioHeader.svelte  |   2 +-
 configurator/src/lib/importOverrides.ts       | 126 ++++++++++++++++++
 configurator/tests/importOverrides.test.ts    |  78 +++++++++++
 5 files changed, 244 insertions(+), 37 deletions(-)
 create mode 100644 configurator/src/lib/importOverrides.ts
 create mode 100644 configurator/tests/importOverrides.test.ts

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 33bde2957..ad9c0a0ac 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -11,10 +11,13 @@
   import { generateCSS } from './lib/codec';
   import { loadInitialOverrides, injectLivePreview, saveOverrides, hasWpBoot } from './lib/persistence';
   import { domainOf } from './lib/domains';
+  import { changedKeys, shouldCoalesce, NO_COALESCE, type CoalesceState } from './lib/history';
+  import { parseImport, summarizeImport } from './lib/importOverrides';
   import tokensRaw from './data/api-index.generated.json';
   import CommandPalette from './components/CommandPalette.svelte';
 
   const ALL_TOKENS = ((tokensRaw as ApiIndex).tokens ?? tokensRaw) as SlashedToken[];
+  const LIVE_TOKEN_NAMES = new Set(ALL_TOKENS.map((t) => t.name));
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
@@ -54,17 +57,9 @@
   // be re-focused (a second search for it still scrolls/highlights).
   let focusRequest = $state<{ token: string; nonce: number } | null>(null);
   let focusNonce = 0;
-
-  function navigateTo(domainId: string, token?: string) {
-    domain = domainId;
-    if (token) {
-      focusNonce += 1;
-      focusRequest = { token, nonce: focusNonce };
-    } else {
-      focusRequest = null;
-    }
-    mobileView = "controls";
-  }
+  // Transient feedback after an import (the old flow failed silently).
+  let importStatus = $state<string | null>(null);
+  let importStatusTimer: ReturnType<typeof setTimeout> | null = null;
   // On narrow screens the controls panel and the live preview can't both fit, so
   // we show one at a time and let the user fold between them (desktop shows both).
   let mobileView = $state<"controls" | "preview">("controls");
@@ -210,6 +205,12 @@
     overrides = next;
   }
 
+  function showImportStatus(msg: string) {
+    importStatus = msg;
+    if (importStatusTimer) clearTimeout(importStatusTimer);
+    importStatusTimer = setTimeout(() => { importStatus = null; importStatusTimer = null; }, 6000);
+  }
+
   function handleImport() {
     const input = document.createElement("input");
     input.type = "file";
@@ -221,30 +222,13 @@
       reader.onload = (ev) => {
         const text = ev.target?.result as string;
         if (!text) return;
-        if (file.name.endsWith(".json")) {
-          try {
-            const data = JSON.parse(text);
-            if (data !== null && typeof data === "object" && !Array.isArray(data)) {
-              // Restrict to real token-name keys too, not just string values — an
-              // imported JSON file is untrusted input and its keys end up as
-              // object property names downstream (CodeQL: remote-property-injection).
-              const safe = Object.fromEntries(
-                Object.entries(data as Record<string, unknown>).filter(
-                  ([k, v]) => typeof v === "string" && /^--sf-[\w-]+$/.test(k)
-                )
-              ) as Record<string, string>;
-              if (Object.keys(safe).length > 0) setOverrides(safe);
-            }
-          } catch {}
-        } else {
-          const parsed: Record<string, string> = {};
-          const re = /(--sf-[\w-]+)\s*:\s*([^;]+);/g;
-          let m;
-          while ((m = re.exec(text)) !== null) {
-            parsed[m[1].trim()] = m[2].trim();
-          }
-          if (Object.keys(parsed).length > 0) setOverrides((prev) => ({ ...prev, ...parsed }));
+        // One validated pipeline for both CSS and JSON: sanitised, migrated,
+        // merged (non-destructive), and always reported — no more silent no-ops.
+        const { overrides: imported, report } = parseImport(text, file.name, LIVE_TOKEN_NAMES);
+        if (Object.keys(imported).length > 0) {
+          setOverrides((prev) => ({ ...prev, ...imported }));
         }
+        showImportStatus(summarizeImport(report));
       };
       reader.readAsText(file);
     };
@@ -322,6 +306,14 @@
     onOpenSearch={() => { showPalette = true; }}
   />
 
+  <!-- Import feedback: a transient banner (the previous import flow gave none). -->
+  {#if importStatus}
+    <div class="shrink-0 flex items-center gap-2 px-4 py-1.5 bg-indigo-500/10 border-b border-indigo-500/20 text-[11px] text-indigo-700 dark:text-indigo-300">
+      <span class="flex-1">{importStatus}</span>
+      <button onclick={() => { importStatus = null; }} aria-label="Dismiss" class="text-indigo-500 hover:text-indigo-700 dark:hover:text-indigo-200 cursor-pointer font-bold">×</button>
+    </div>
+  {/if}
+
   <!-- Mobile fold toggle: switch between the controls panel and the live
        preview. Lives right under the header (not at the bottom) so it's
        visible without scrolling and doesn't compete with the status bar. -->
diff --git a/configurator/src/components/shell/PreviewPanel.svelte b/configurator/src/components/shell/PreviewPanel.svelte
index 18503e50c..bbdfe8470 100644
--- a/configurator/src/components/shell/PreviewPanel.svelte
+++ b/configurator/src/components/shell/PreviewPanel.svelte
@@ -258,8 +258,19 @@ ${buildTab(template)}
   <!-- Preview toolbar — always a single row (scrolls horizontally instead of
        wrapping) so it can't eat a growing chunk of a short mobile viewport. -->
   <div class="min-h-10 bg-slate-50 dark:bg-[#0d0d14] border-b border-black/8 dark:border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
-    <!-- Template tabs -->
-    <div class="shrink-0 flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
+    <!-- Template selector. Mobile: a compact dropdown (the tab strip used to be
+         clipped in the narrow viewport). Desktop (sm+): the full tab strip. -->
+    <select
+      value={previewTemplate}
+      onchange={(e) => onTemplateChange((e.target as HTMLSelectElement).value as PreviewTemplate)}
+      aria-label="Preview template"
+      class="sm:hidden shrink-0 bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg px-2 py-1 text-[11px] font-bold text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+    >
+      {#each TABS as t (t.id)}
+        <option value={t.id}>{t.label}</option>
+      {/each}
+    </select>
+    <div class="hidden sm:flex shrink-0 bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
       {#each TABS as t (t.id)}
         <button
           onclick={() => onTemplateChange(t.id)}
diff --git a/configurator/src/components/shell/StudioHeader.svelte b/configurator/src/components/shell/StudioHeader.svelte
index f76962bff..3755130b6 100644
--- a/configurator/src/components/shell/StudioHeader.svelte
+++ b/configurator/src/components/shell/StudioHeader.svelte
@@ -163,7 +163,7 @@
 
     <button
       onclick={onImport}
-      title="Import CSS overrides"
+      title="Import overrides (CSS or JSON)"
       class="p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-black/8 dark:hover:bg-white/8 transition-all cursor-pointer shrink-0"
     >
       <FolderOpen class="w-3.5 h-3.5" />
diff --git a/configurator/src/lib/importOverrides.ts b/configurator/src/lib/importOverrides.ts
new file mode 100644
index 000000000..eb0870fe8
--- /dev/null
+++ b/configurator/src/lib/importOverrides.ts
@@ -0,0 +1,126 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Unified override import.
+ *
+ * The header import used to have two silent, inconsistent paths: a `.json` file
+ * REPLACED the whole state with no validation, while a `.css` file MERGED via a
+ * loose regex — and a file with nothing recognisable just did nothing, with no
+ * feedback. This parses either format through ONE pipeline:
+ *
+ *   1. detect JSON (flat map or a theme-file `{ tokens }`) vs CSS
+ *   2. sanitise every value (codec.sanitizeValue) and drop keys that aren't a
+ *      real `--sf-*` name or whose value is structurally unsafe (would be
+ *      dropped on export anyway)
+ *   3. migrate renamed/removed tokens and flag unknown ones (themeFile)
+ *   4. return the cleaned overrides plus a report the caller can surface
+ *
+ * The caller decides merge vs replace; the default header flow merges, which is
+ * the predictable, non-destructive choice for both formats.
+ */
+import { parseCSS, sanitizeValue } from "./codec";
+import { migrateOverrides } from "./themeFile";
+import { isStructurallySafe } from "./tokenModel";
+
+export interface ImportReport {
+  format: "json" | "css";
+  /** Tokens accepted into the result. */
+  accepted: number;
+  /** Old names migrated to their current name. */
+  renamed: number;
+  /** Tokens dropped because the framework removed them. */
+  removed: number;
+  /** Accepted tokens that aren't part of this framework build. */
+  unknown: number;
+  /** Keys rejected for a bad name or an unsafe/empty value. */
+  invalid: string[];
+  /** True when the file couldn't be parsed into any tokens. */
+  malformed: boolean;
+}
+
+export interface ImportResult {
+  overrides: Record<string, string>;
+  report: ImportReport;
+}
+
+const KEY_RE = /^--sf-[\w-]+$/;
+
+function looksLikeJson(text: string): boolean {
+  return text.trim().startsWith("{");
+}
+
+/** Extract a raw name→value map from JSON (flat, or a theme-file `{ tokens }`). */
+function readJsonMap(text: string): { map: Record<string, string>; malformed: boolean } {
+  try {
+    const data = JSON.parse(text);
+    if (!data || typeof data !== "object" || Array.isArray(data)) return { map: {}, malformed: true };
+    const src =
+      "tokens" in data && data.tokens && typeof data.tokens === "object"
+        ? (data.tokens as Record<string, unknown>)
+        : (data as Record<string, unknown>);
+    const map: Record<string, string> = {};
+    for (const [k, v] of Object.entries(src)) {
+      if (typeof v === "string") map[k] = v;
+    }
+    return { map, malformed: false };
+  } catch {
+    return { map: {}, malformed: true };
+  }
+}
+
+/**
+ * Parse and validate an imported CSS or JSON override file.
+ *
+ * @param text      the raw file contents
+ * @param filename  used (with a content sniff) to pick the JSON vs CSS path
+ * @param liveTokens the set of token names in the current framework build
+ */
+export function parseImport(
+  text: string,
+  filename: string,
+  liveTokens: Set<string>,
+): ImportResult {
+  const isJson = /\.json$/i.test(filename) || looksLikeJson(text);
+  const { map: rawMap, malformed } = isJson
+    ? readJsonMap(text)
+    : { map: parseCSS(text), malformed: false };
+
+  const cleaned: Record<string, string> = {};
+  const invalid: string[] = [];
+  for (const [key, value] of Object.entries(rawMap)) {
+    if (!KEY_RE.test(key)) { invalid.push(key); continue; }
+    const safe = sanitizeValue(value);
+    if (!isStructurallySafe(safe)) { invalid.push(key); continue; }
+    cleaned[key] = safe;
+  }
+
+  const migrated = migrateOverrides(cleaned, { live: liveTokens });
+
+  return {
+    overrides: migrated.overrides,
+    report: {
+      format: isJson ? "json" : "css",
+      accepted: Object.keys(migrated.overrides).length,
+      renamed: migrated.renamed.length,
+      removed: migrated.removed.length,
+      unknown: migrated.unknown.length,
+      invalid,
+      malformed: malformed && Object.keys(cleaned).length === 0,
+    },
+  };
+}
+
+/** A short human summary of an import for a status banner. */
+export function summarizeImport(r: ImportReport): string {
+  if (r.malformed) return "Import failed — the file has no recognisable SLASHED tokens.";
+  if (r.accepted === 0) return "Nothing imported — no valid SLASHED tokens found.";
+  const parts = [`Imported ${r.accepted} token${r.accepted === 1 ? "" : "s"}`];
+  if (r.renamed) parts.push(`${r.renamed} migrated`);
+  if (r.removed) parts.push(`${r.removed} removed`);
+  if (r.unknown) parts.push(`${r.unknown} unknown`);
+  if (r.invalid.length) parts.push(`${r.invalid.length} skipped`);
+  return parts.join(" · ") + ".";
+}
diff --git a/configurator/tests/importOverrides.test.ts b/configurator/tests/importOverrides.test.ts
new file mode 100644
index 000000000..8e2ecd793
--- /dev/null
+++ b/configurator/tests/importOverrides.test.ts
@@ -0,0 +1,78 @@
+/**
+ * Unit tests for src/lib/importOverrides.ts — the single, validated import
+ * pipeline that replaced the two silent, inconsistent header-import paths.
+ * Pins that CSS and JSON behave the same, values are sanitised, bad keys/values
+ * are reported (not silently dropped), and renamed tokens are migrated.
+ */
+import { describe, test, expect } from 'vitest';
+import { parseImport, summarizeImport } from '../src/lib/importOverrides';
+
+const LIVE = new Set([
+  '--sf-color-primary', '--sf-space-m', '--sf-radius-l',
+  '--sf-color-primary-source-light', // migration target
+]);
+
+describe('parseImport — JSON', () => {
+  test('accepts a flat name→value map', () => {
+    const r = parseImport('{"--sf-color-primary":"red","--sf-space-m":"2rem"}', 'x.json', LIVE);
+    expect(r.overrides).toEqual({ '--sf-color-primary': 'red', '--sf-space-m': '2rem' });
+    expect(r.report.format).toBe('json');
+    expect(r.report.accepted).toBe(2);
+  });
+  test('accepts a theme-file { tokens } shape', () => {
+    const r = parseImport('{"schemaVersion":1,"tokens":{"--sf-space-m":"3rem"}}', 't.json', LIVE);
+    expect(r.overrides).toEqual({ '--sf-space-m': '3rem' });
+  });
+  test('repairs CSS-breaking values but rejects bad keys and empty-after-sanitise ones', () => {
+    // "1rem; }" sanitises to "1rem" (kept); ";;" sanitises to "" (rejected);
+    // a non --sf key is rejected.
+    const r = parseImport('{"notatoken":"x","--sf-space-m":";;","--sf-color-primary":"1rem; }","--sf-radius-l":"8px"}', 'x.json', LIVE);
+    expect(r.overrides).toEqual({ '--sf-color-primary': '1rem', '--sf-radius-l': '8px' });
+    expect(r.report.invalid.sort()).toEqual(['--sf-space-m', 'notatoken']);
+  });
+  test('malformed JSON is reported, not thrown', () => {
+    const r = parseImport('{ not json', 'x.json', LIVE);
+    expect(r.report.malformed).toBe(true);
+    expect(r.report.accepted).toBe(0);
+  });
+});
+
+describe('parseImport — CSS', () => {
+  test('parses declarations and merges consistently with JSON', () => {
+    const css = ':root{ --sf-color-primary: blue; --sf-radius-l: 12px; }';
+    const r = parseImport(css, 'overrides.css', LIVE);
+    expect(r.overrides).toEqual({ '--sf-color-primary': 'blue', '--sf-radius-l': '12px' });
+    expect(r.report.format).toBe('css');
+  });
+  test('a CSS file with no --sf tokens is reported empty', () => {
+    const r = parseImport('body { color: red; }', 'x.css', LIVE);
+    expect(r.report.accepted).toBe(0);
+  });
+});
+
+describe('parseImport — migration & unknown', () => {
+  test('migrates a renamed token to its current name', () => {
+    const r = parseImport('{"--sf-color-primary-light":"red"}', 'x.json', LIVE);
+    expect(r.overrides['--sf-color-primary-source-light']).toBe('red');
+    expect(r.report.renamed).toBe(1);
+  });
+  test('keeps but flags a token not in this build', () => {
+    const r = parseImport('{"--sf-made-up-token":"1px"}', 'x.json', LIVE);
+    expect(r.overrides['--sf-made-up-token']).toBe('1px');
+    expect(r.report.unknown).toBe(1);
+  });
+});
+
+describe('summarizeImport', () => {
+  test('summarises a mixed result', () => {
+    const msg = summarizeImport({ format: 'json', accepted: 3, renamed: 1, removed: 0, unknown: 1, invalid: ['x'], malformed: false });
+    expect(msg).toContain('Imported 3 tokens');
+    expect(msg).toContain('1 migrated');
+    expect(msg).toContain('1 unknown');
+    expect(msg).toContain('1 skipped');
+  });
+  test('reports malformed and empty distinctly', () => {
+    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], malformed: true })).toMatch(/failed/i);
+    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], malformed: false })).toMatch(/Nothing imported/i);
+  });
+});

From 5cad98662a5abfa279e07587f34b7341b1b193ee Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Wed, 19 Aug 2026 23:22:54 +0000
Subject: [PATCH 2/6] feat(configurator): merge Shadows + Effects into one
 Depth panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completes the phase-4 intent the IA PR deferred. Shadows and Effects overlapped
(drop-shadow lived in Effects, shadow in Shadows) and split one mental area —
"how things sit above the page" — across two rail items.

- New `depth` domain: namespaces shadow/blur/opacity/drop now classify to it in
  domain-map.json; DOMAINS drops shadows+effects for depth. One classifier still
  drives badge/reset/All-tokens, so the merged panel's counts stay consistent.
- DepthPanel composes the existing ShadowsPanel + EffectsPanel under "Elevation
  & shadows" and "Effects" headers — no control logic duplicated (both already
  take the same props; their internal powerKnobs["shadows"] data key is
  unchanged).
- Rail/Home show a single Depth item; App/CommandPalette/ChangesPanel labels and
  the preview auto-follow (depth → shadows gallery tab) updated. The separate
  Shadows/Effects preview gallery tabs stay available.

Tests: domains.test.ts updated (shadow/blur/opacity/drop → depth); shell e2e
NAV_LABELS updated. check, lint, curation, 283 unit tests and shell e2e pass;
screenshot-verified the merged panel and consistent Depth badge.
---
 configurator/src/App.svelte                   |  4 +--
 .../src/components/CommandPalette.svelte      |  6 ++--
 .../src/components/DomainPanel.svelte         |  9 ++----
 .../src/components/panels/ChangesPanel.svelte |  2 +-
 .../src/components/panels/DepthPanel.svelte   | 31 +++++++++++++++++++
 .../src/components/panels/HomePanel.svelte    |  3 +-
 .../src/components/shell/SidebarNav.svelte    |  5 ++-
 configurator/src/data/domain-map.json         |  8 ++---
 configurator/src/lib/domains.ts               |  4 +--
 configurator/src/lib/preview/index.ts         |  3 +-
 configurator/tests-e2e/shell.spec.js          |  2 +-
 configurator/tests/domains.test.ts            |  9 +++---
 12 files changed, 56 insertions(+), 30 deletions(-)
 create mode 100644 configurator/src/components/panels/DepthPanel.svelte

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index ad9c0a0ac..d62521085 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -21,8 +21,8 @@
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
-    layout: "Layout", borders: "Shape", shadows: "Shadows", motion: "Motion",
-    effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
+    layout: "Layout", borders: "Shape", depth: "Depth", motion: "Motion",
+    macros: "Macros", misc: "Misc", components: "Components",
     changes: "Changes", themes: "Presets", wcag: "Accessibility",
     setup: "Install & export", cheatsheet: "Reference",
   };
diff --git a/configurator/src/components/CommandPalette.svelte b/configurator/src/components/CommandPalette.svelte
index 5406e1fb9..38ab1aaf4 100644
--- a/configurator/src/components/CommandPalette.svelte
+++ b/configurator/src/components/CommandPalette.svelte
@@ -16,8 +16,8 @@
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
-    layout: "Layout", borders: "Shape", shadows: "Shadows", motion: "Motion",
-    effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
+    layout: "Layout", borders: "Shape", depth: "Depth", motion: "Motion",
+    macros: "Macros", misc: "Misc", components: "Components",
     changes: "Changes", wcag: "Accessibility", themes: "Presets",
     setup: "Install & export", cheatsheet: "Reference",
   };
@@ -32,7 +32,7 @@
   };
   const NAV = [
     "home", "colors", "typography", "spacing", "borders", "motion",
-    "layout", "shadows", "effects", "macros", "components", "misc",
+    "layout", "depth", "macros", "components", "misc",
     "changes", "wcag", "themes", "setup", "cheatsheet",
   ].map((id) => ({ id, label: DOMAIN_LABELS[id] ?? id, terms: [id, ...(NAV_ALIASES[id] ?? [])] }));
 
diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index d6cc67d4f..7df0d516b 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -8,9 +8,8 @@
   import SpacingPanel from './panels/SpacingPanel.svelte';
   import LayoutPanel from './panels/LayoutPanel.svelte';
   import BordersPanel from './panels/BordersPanel.svelte';
-  import ShadowsPanel from './panels/ShadowsPanel.svelte';
+  import DepthPanel from './panels/DepthPanel.svelte';
   import MotionPanel from './panels/MotionPanel.svelte';
-  import EffectsPanel from './panels/EffectsPanel.svelte';
   import MacrosPanel from './panels/MacrosPanel.svelte';
   import MiscPanel from './panels/MiscPanel.svelte';
   import ComponentsPanel from './panels/ComponentsPanel.svelte';
@@ -95,12 +94,10 @@
             <LayoutPanel {overrides} {onSet} {onReset} {onBulkChange} />
           {:else if domain === "borders"}
             <BordersPanel {overrides} {onSet} {onReset} />
-          {:else if domain === "shadows"}
-            <ShadowsPanel {overrides} {onSet} {onReset} />
+          {:else if domain === "depth"}
+            <DepthPanel {overrides} {onSet} {onReset} />
           {:else if domain === "motion"}
             <MotionPanel {overrides} {onSet} {onReset} />
-          {:else if domain === "effects"}
-            <EffectsPanel {overrides} {onSet} {onReset} />
           {:else if domain === "macros"}
             <MacrosPanel {overrides} {onSet} {onReset} />
           {:else if domain === "misc"}
diff --git a/configurator/src/components/panels/ChangesPanel.svelte b/configurator/src/components/panels/ChangesPanel.svelte
index f9bfe89fc..5c3d991bc 100644
--- a/configurator/src/components/panels/ChangesPanel.svelte
+++ b/configurator/src/components/panels/ChangesPanel.svelte
@@ -17,7 +17,7 @@
 
   const DOMAIN_LABEL: Record<string, string> = {
     colors: "Colors", typography: "Typography", spacing: "Spacing", layout: "Layout",
-    borders: "Borders", shadows: "Shadows", motion: "Motion", effects: "Effects",
+    borders: "Shape", depth: "Depth", motion: "Motion",
     macros: "Macros", components: "Components", misc: "Misc",
   };
 
diff --git a/configurator/src/components/panels/DepthPanel.svelte b/configurator/src/components/panels/DepthPanel.svelte
new file mode 100644
index 000000000..99049b92d
--- /dev/null
+++ b/configurator/src/components/panels/DepthPanel.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  // Depth = the merged "Shadows + Effects" panel. The audit found these two
+  // overlapped (drop-shadow lived in Effects, shadow in Shadows) and split one
+  // mental area — "how things sit above the page" — across two rail items. This
+  // composes the two existing, self-contained panels under one destination:
+  // elevation/shadow/glow first, then the standalone effects (blur, opacity,
+  // scrollbar, text/drop shadow). Both panels already take the same props, so
+  // no control logic is duplicated.
+  import ShadowsPanel from './ShadowsPanel.svelte';
+  import EffectsPanel from './EffectsPanel.svelte';
+
+  let { overrides, onSet, onReset }: {
+    overrides: Record<string, string>;
+    onSet: (name: string, value: string) => void;
+    onReset: (name: string) => void;
+  } = $props();
+</script>
+
+<div>
+  <div class="px-4 pt-3 pb-1 text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">
+    Elevation & shadows
+  </div>
+  <ShadowsPanel {overrides} {onSet} {onReset} />
+
+  <div class="mx-4 my-2 h-px bg-black/8 dark:bg-white/8"></div>
+
+  <div class="px-4 pt-2 pb-1 text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">
+    Effects
+  </div>
+  <EffectsPanel {overrides} {onSet} {onReset} />
+</div>
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 846a64191..f6320bf7c 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -31,8 +31,7 @@
       label: "Composition",
       items: [
         { id: "layout",     icon: Layout,    label: "Layout",     desc: "Containers, grids & primitives" },
-        { id: "shadows",    icon: Layers,    label: "Shadows",    desc: "Elevation & depth control" },
-        { id: "effects",    icon: Sparkles,  label: "Effects",    desc: "Blur, opacity & scrollbars" },
+        { id: "depth",      icon: Layers,    label: "Depth",      desc: "Shadows, glow, blur & opacity" },
         { id: "macros",     icon: Blocks,    label: "Macros",     desc: "Flow, prose, aspect & scrim" },
         { id: "components", icon: Component, label: "Components", desc: "Button & card component tokens" },
         { id: "misc",       icon: Puzzle,    label: "Misc",       desc: "Z-index & remaining tokens" },
diff --git a/configurator/src/components/shell/SidebarNav.svelte b/configurator/src/components/shell/SidebarNav.svelte
index 224b0ee44..25ed57005 100644
--- a/configurator/src/components/shell/SidebarNav.svelte
+++ b/configurator/src/components/shell/SidebarNav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Blocks,
+    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Blocks,
     Puzzle, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
   } from '@lucide/svelte';
 
@@ -31,8 +31,7 @@
       label: "Composition",
       items: [
         { id: "layout",     icon: Layout,    label: "Layout" },
-        { id: "shadows",    icon: Layers,    label: "Shadows" },
-        { id: "effects",    icon: Sparkles,  label: "Effects" },
+        { id: "depth",      icon: Layers,    label: "Depth" },
         { id: "macros",     icon: Blocks,    label: "Macros" },
         { id: "components", icon: Component, label: "Components" },
         { id: "misc",       icon: Puzzle,    label: "Misc" },
diff --git a/configurator/src/data/domain-map.json b/configurator/src/data/domain-map.json
index 2c8d76982..f347c7344 100644
--- a/configurator/src/data/domain-map.json
+++ b/configurator/src/data/domain-map.json
@@ -62,7 +62,7 @@
     "field": "borders",
     "media": "borders",
 
-    "shadow": "shadows",
+    "shadow": "depth",
 
     "motion": "motion",
     "duration": "motion",
@@ -74,9 +74,9 @@
     "theme": "motion",
     "animation": "motion",
 
-    "blur": "effects",
-    "opacity": "effects",
-    "drop": "effects",
+    "blur": "depth",
+    "opacity": "depth",
+    "drop": "depth",
 
     "prose": "macros",
     "flow": "macros",
diff --git a/configurator/src/lib/domains.ts b/configurator/src/lib/domains.ts
index a1f9ff68c..f4f45f1ad 100644
--- a/configurator/src/lib/domains.ts
+++ b/configurator/src/lib/domains.ts
@@ -35,8 +35,8 @@ export const FALLBACK_DOMAIN = 'misc';
 
 /** All domain ids a token can classify into, in canonical panel order. */
 export const DOMAINS = [
-  'colors', 'typography', 'spacing', 'layout', 'borders', 'shadows',
-  'motion', 'effects', 'macros', 'components', 'misc',
+  'colors', 'typography', 'spacing', 'layout', 'borders', 'depth',
+  'motion', 'macros', 'components', 'misc',
 ] as const;
 
 export type Domain = (typeof DOMAINS)[number];
diff --git a/configurator/src/lib/preview/index.ts b/configurator/src/lib/preview/index.ts
index 3f43f37f9..de825c157 100644
--- a/configurator/src/lib/preview/index.ts
+++ b/configurator/src/lib/preview/index.ts
@@ -42,8 +42,7 @@ export const PANEL_TO_TAB: Record<string, PreviewTab> = {
   typography: "type",
   spacing: "space",
   borders: "borders",
-  shadows: "shadows",
-  effects: "effects",
+  depth: "shadows",
   motion: "motion",
   layout: "layout",
   components: "components",
diff --git a/configurator/tests-e2e/shell.spec.js b/configurator/tests-e2e/shell.spec.js
index 7cd2e8fc4..238900a06 100644
--- a/configurator/tests-e2e/shell.spec.js
+++ b/configurator/tests-e2e/shell.spec.js
@@ -6,7 +6,7 @@ import { watchErrors, gotoClean, navButton } from './helpers.js';
 
 const NAV_LABELS = [
   'Home', 'Colors', 'Typography', 'Spacing', 'Shape',
-  'Layout', 'Shadows', 'Motion', 'Effects', 'Misc', 'Components',
+  'Layout', 'Depth', 'Motion', 'Macros', 'Misc', 'Components',
   'Changes', 'Accessibility', 'Presets', 'Install & export', 'Reference',
 ];
 
diff --git a/configurator/tests/domains.test.ts b/configurator/tests/domains.test.ts
index f15b393d0..6570f9684 100644
--- a/configurator/tests/domains.test.ts
+++ b/configurator/tests/domains.test.ts
@@ -19,13 +19,14 @@ describe('domainOf', () => {
     ['--sf-font-body', 'typography'],
     ['--sf-space-m', 'spacing'],
     ['--sf-radius-l', 'borders'],
-    ['--sf-shadow-m', 'shadows'],
+    ['--sf-shadow-m', 'depth'],
     ['--sf-motion-scale', 'motion'],
     ['--sf-container-wide', 'layout'],
     ['--sf-btn-padding-block', 'components'],
-    ['--sf-blur-m', 'effects'],
-    // Namespace-driven fixes for the old substring collisions:
-    ['--sf-drop-shadow-m', 'effects'],   // was "shadows" via the "shadow" fragment
+    ['--sf-blur-m', 'depth'],
+    // Shadows + Effects are merged into the Depth panel:
+    ['--sf-drop-shadow-m', 'depth'],
+    ['--sf-opacity-muted', 'depth'],
     ['--sf-focus-ring-color', 'misc'],   // was "colors" via the "color" fragment
     ['--sf-transition-fast', 'motion'],  // was "misc" (no pattern)
     ['--sf-box-padding', 'layout'],      // was "misc"

From fddfcaec8ba9bb715c5f477334c1b0504cf2cb59 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Wed, 19 Aug 2026 23:28:56 +0000
Subject: [PATCH 3/6] feat(configurator): expand Accessibility into a real
 panel owning focus ring + touch target
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Accessibility destination was a contrast-only tool, while the focus ring
lived in Shape and the touch target in Misc — and classification routed those
tokens elsewhere, so the badge/Reset never matched where you edited them. This
makes Accessibility a proper token domain that owns them.

- Classification: namespaces `focus` and `touch` now map to the `wcag` domain
  (added to DOMAINS); the single classifier drives badge/Reset/All-tokens.
- New AccessibilityPanel: Focus ring (width/offset/colour/style + live preview)
  and Touch target controls, then the embedded contrast checker (WcagPanel).
  `wcag` leaves NO_CONTROLS_TAB, so it gains Controls + All-tokens tabs.
- Removed the Focus ring section from BordersPanel and the Touch target section
  from MiscPanel (and their now-unused state), so each control has exactly one
  home and no classification mismatch remains.
- Home: Accessibility now shows an override count; description updated.

Tests: domains.test.ts adds focus/touch → wcag (and DOMAINS membership). check,
lint, curation, 285 unit tests and shell e2e pass; screenshot + e2e verified the
panel, a matching Reset-2 badge, and that Focus ring no longer appears in Shape.
---
 .../src/components/DomainPanel.svelte         |   8 +-
 .../panels/AccessibilityPanel.svelte          | 124 ++++++++++++++++++
 .../src/components/panels/BordersPanel.svelte |  63 +--------
 .../src/components/panels/HomePanel.svelte    |   4 +-
 .../src/components/panels/MiscPanel.svelte    |  27 +---
 configurator/src/data/domain-map.json         |   7 +-
 configurator/src/lib/domains.ts               |   2 +-
 configurator/tests/domains.test.ts            |   7 +-
 8 files changed, 144 insertions(+), 98 deletions(-)
 create mode 100644 configurator/src/components/panels/AccessibilityPanel.svelte

diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 7df0d516b..1884bff03 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -19,7 +19,7 @@
   import ChangesPanel from './panels/ChangesPanel.svelte';
   import GenericTokenPanel from './panels/GenericTokenPanel.svelte';
   import AllTokensTab from './panels/AllTokensTab.svelte';
-  import WcagPanel from './panels/WcagPanel.svelte';
+  import AccessibilityPanel from './panels/AccessibilityPanel.svelte';
 
   let { domain, tokens, overrides, focusToken = null, focusNonce = 0, onSet, onReset, onBulkChange, onApplyTheme, onSelectDomain, onResetAll }: {
     domain: string;
@@ -38,7 +38,7 @@
 
 
   // Domains that skip the two-tab treatment
-  const NO_CONTROLS_TAB = new Set(["home", "changes", "themes", "wcag", "setup", "cheatsheet"]);
+  const NO_CONTROLS_TAB = new Set(["home", "changes", "themes", "setup", "cheatsheet"]);
 
   let view = $state<"controls" | "tokens">("controls");
 
@@ -71,8 +71,6 @@
     <ChangesPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} {onResetAll} {onSelectDomain} />
   {:else if domain === "themes"}
     <ThemesPanel {overrides} {onApplyTheme} {onResetAll} />
-  {:else if domain === "wcag"}
-    <WcagPanel {tokens} {overrides} {onSet} {onBulkChange} />
   {:else if domain === "setup"}
     <ExportPanel {overrides} {tokens} {onApplyTheme} />
   {:else if domain === "cheatsheet"}
@@ -104,6 +102,8 @@
             <MiscPanel {overrides} {onSet} {onReset} {onBulkChange} />
           {:else if domain === "components"}
             <ComponentsPanel {overrides} {onSet} {onReset} />
+          {:else if domain === "wcag"}
+            <AccessibilityPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} />
           {:else}
             <GenericTokenPanel {domain} {tokens} {overrides} {onSet} {onReset} />
           {/if}
diff --git a/configurator/src/components/panels/AccessibilityPanel.svelte b/configurator/src/components/panels/AccessibilityPanel.svelte
new file mode 100644
index 000000000..44f517b4b
--- /dev/null
+++ b/configurator/src/components/panels/AccessibilityPanel.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+  // Accessibility = the cross-cutting "Quality" panel. It now OWNS the tokens
+  // whose whole purpose is accessibility — the focus ring (moved out of Shape)
+  // and the touch target (moved out of Misc) — alongside the contrast checker.
+  // Previously these controls sat in unrelated panels while classification
+  // routed them elsewhere, so the badge/Reset never matched where you edited
+  // them. Here the control, the classification and the tools finally agree.
+  import type { SlashedToken } from '../../types';
+  import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
+  import Section from '../inputs/Section.svelte';
+  import WcagPanel from './WcagPanel.svelte';
+
+  let { tokens, overrides, onSet, onReset, onBulkChange }: {
+    tokens: SlashedToken[];
+    overrides: Record<string, string>;
+    onSet: (name: string, value: string) => void;
+    onReset: (name: string) => void;
+    onBulkChange: (patch: Record<string, string | null>) => void;
+  } = $props();
+
+  const BORDER_STYLES = ["solid", "dashed", "dotted"];
+
+  function parseNum(val: string | undefined, fallback: number, strip?: string): number {
+    if (!val) return fallback;
+    const v = parseFloat(strip ? val.replace(strip, "") : val);
+    return isNaN(v) ? fallback : v;
+  }
+
+  let focusWidth = $derived(parseNum(overrides["--sf-focus-ring-width"], 2, "px"));
+  let focusOffset = $derived(parseNum(overrides["--sf-focus-ring-offset"], 2, "px"));
+  let focusRingColor = $derived(overrides["--sf-focus-ring-color"] ?? "");
+  let touchTarget = $derived(parseNum(overrides["--sf-touch-target"], 44, "px"));
+
+  let showFocusRing = $state(true);
+  let showTouchTarget = $state(false);
+</script>
+
+<div class="p-4 space-y-6">
+  <!-- FOCUS RING -->
+  <Section title="Focus ring" bind:open={showFocusRing}>
+    <SliderRow
+      label="Ring width" value={focusWidth} min={0} max={6} step={0.5} unit="px"
+      help="Thickness of the keyboard focus indicator"
+      overridden={"--sf-focus-ring-width" in overrides}
+      onChange={(v) => onSet("--sf-focus-ring-width", `${v}px`)}
+      onReset={() => onReset("--sf-focus-ring-width")}
+    />
+    <SliderRow
+      label="Ring offset" value={focusOffset} min={0} max={8} step={0.5} unit="px"
+      help="Gap between element edge and focus ring"
+      overridden={"--sf-focus-ring-offset" in overrides}
+      onChange={(v) => onSet("--sf-focus-ring-offset", `${v}px`)}
+      onReset={() => onReset("--sf-focus-ring-offset")}
+    />
+    <div class="flex items-center gap-2">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Ring color</div>
+      <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")}
+      />
+    </div>
+    <div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Ring style</div>
+      <div class="flex gap-2">
+        {#each BORDER_STYLES as style (style)}
+          {@const current = overrides["--sf-focus-ring-style"] ?? "solid"}
+          <button
+            onclick={() => style === "solid" ? onReset("--sf-focus-ring-style") : onSet("--sf-focus-ring-style", style)}
+            class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${
+              current === style
+                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+            }`}
+          >
+            {style}
+          </button>
+        {/each}
+      </div>
+    </div>
+    <!-- Focus ring preview -->
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
+      <div
+        class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
+        style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
+      >
+        Focus ring · {overrides["--sf-focus-ring-style"] ?? "solid"}
+      </div>
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- TOUCH TARGET -->
+  <Section title="Touch target" bind:open={showTouchTarget}>
+    <SliderRow
+      label="Min touch size" value={touchTarget} min={32} max={64} step={1} unit="px"
+      help="--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5). Independent literal (2.75rem / 44px) — deliberately NOT an alias of the --sf-size-* scale, so retuning sizes never drops below the accessibility floor."
+      overridden={"--sf-touch-target" in overrides}
+      onChange={(v) => onSet("--sf-touch-target", `${v}px`)}
+      onReset={() => onReset("--sf-touch-target")}
+      rawDefault="2.75rem"
+      currentRaw={overrides["--sf-touch-target"]}
+      onRawSet={(v) => onSet("--sf-touch-target", v)}
+    />
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-center gap-3">
+      <div
+        class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-600/70 dark:text-indigo-400/70 shrink-0"
+        style={`width: var(--sf-touch-target, 2.75rem); height: var(--sf-touch-target, 2.75rem)`}
+      ></div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- CONTRAST TOOLS -->
+  <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Colour contrast</div>
+  <WcagPanel {tokens} {overrides} {onSet} {onBulkChange} />
+</div>
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index f59bc1ccc..52c8bbb97 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -36,7 +36,6 @@
   let showBorderWidths = $state(false);
   let showLineStyles = $state(false);
   let showDividers = $state(false);
-  let showFocusRing = $state(false);
   let showRadiusScale = $state(false);
   let showRadiusPreview = $state(false);
   let showMediaRadius = $state(false);
@@ -50,13 +49,10 @@
   }
 
   let borderScale  = $derived(parseNum(overrides["--sf-border-scale"], 1));
-  let focusWidth   = $derived(parseNum(overrides["--sf-focus-ring-width"], 2, "px"));
-  let focusOffset  = $derived(parseNum(overrides["--sf-focus-ring-offset"], 2, "px"));
   let dividerWidth = $derived(parseNum(overrides["--sf-divider-width"]?.replace("px",""), 1));
   let dividerGap   = $derived(parseNum(overrides["--sf-divider-gap"]?.replace("rem",""), 1));  // ~1rem ≈ var(--sf-space-m) at default scale
   let borderColor  = $derived(overrides["--sf-color-border"] ?? "");
   let borderStyle  = $derived(overrides["--sf-border-style"] ?? "solid");
-  let focusRingColor = $derived(overrides["--sf-focus-ring-color"] ?? "");
   let dividerColor = $derived(overrides["--sf-divider-color"] ?? "");
   let mediaRadius  = $derived(parseNum(overrides["--sf-media-radius"]?.replace("rem",""), 0));
 
@@ -222,63 +218,8 @@
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- FOCUS RING -->
-  <Section title="Focus ring" bind:open={showFocusRing}>
-      <SliderRow
-        label="Ring width" value={focusWidth} min={0} max={6} step={0.5} unit="px"
-        help="Thickness of the keyboard focus indicator"
-        overridden={"--sf-focus-ring-width" in overrides}
-        onChange={(v) => onSet("--sf-focus-ring-width", `${v}px`)}
-        onReset={() => onReset("--sf-focus-ring-width")}
-      />
-      <SliderRow
-        label="Ring offset" value={focusOffset} min={0} max={8} step={0.5} unit="px"
-        help="Gap between element edge and focus ring"
-        overridden={"--sf-focus-ring-offset" in overrides}
-        onChange={(v) => onSet("--sf-focus-ring-offset", `${v}px`)}
-        onReset={() => onReset("--sf-focus-ring-offset")}
-      />
-      <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Ring color</div>
-        <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")}
-        />
-      </div>
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Ring style</div>
-        <div class="flex gap-2">
-          {#each BORDER_STYLES as style (style)}
-            {@const current = overrides["--sf-focus-ring-style"] ?? "solid"}
-            <button
-              onclick={() => style === "solid" ? onReset("--sf-focus-ring-style") : onSet("--sf-focus-ring-style", style)}
-              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${
-                current === style
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >
-              {style}
-            </button>
-          {/each}
-        </div>
-      </div>
-      <!-- Focus ring preview -->
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
-        <div
-          class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
-          style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
-        >
-          Focus ring · {overrides["--sf-focus-ring-style"] ?? "solid"}
-        </div>
-      </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+  <!-- Focus ring moved to the Accessibility panel (it's an a11y control and now
+       classifies there, so badge/Reset match where it's edited). -->
 
   <!-- RADIUS -->
   <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius</div>
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index f6320bf7c..5913d5fed 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -41,7 +41,7 @@
       label: "Quality",
       items: [
         { id: "changes",    icon: ListChecks,  label: "Changes",       desc: "Review every active override" },
-        { id: "wcag",       icon: ShieldCheck, label: "Accessibility", desc: "Contrast checker & fixes" },
+        { id: "wcag",       icon: ShieldCheck, label: "Accessibility", desc: "Focus ring, touch target & contrast" },
       ],
     },
     {
@@ -59,7 +59,7 @@
   // Per-destination override count — the same canonical domainOf() classifier
   // the sidebar and Reset use, so counts never disagree. `changes` shows the
   // total; non-token tools show nothing.
-  const NON_TOKEN_IDS = new Set<string>(["changes", "wcag", "themes", "setup", "cheatsheet"]);
+  const NON_TOKEN_IDS = new Set<string>(["changes", "themes", "setup", "cheatsheet"]);
   const TOKEN_DOMAIN_IDS = new Set<string>(
     GROUPS.flatMap((g) => g.items.map((i) => i.id as string)).filter((id) => !NON_TOKEN_IDS.has(id)),
   );
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index bdcde2a81..a281fbf15 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -36,13 +36,11 @@
     return isNaN(v) ? fallback : v;
   }
 
-  let touchTarget = $derived(parseNum(overrides["--sf-touch-target"], 44, "px"));
   let zBaseOffset = $derived(parseNum(overrides["--sf-z-base"], 0));
   let caretColor = $derived(overrides["--sf-color-caret"] ?? "");
   let underlineOffset = $derived(parseNum(overrides["--sf-link-underline-offset"]?.replace("em",""), 0.15));
   let underlineThickness = $derived(overrides["--sf-link-underline-thickness"] ?? "auto");
 
-  let showTouchTarget = $state(false);
   let showZIndex = $state(false);
   let showTextSelection = $state(false);
   let showComponentSizes = $state(false);
@@ -59,29 +57,8 @@
 
 <div class="p-4 space-y-6">
 
-  <!-- TOUCH TARGET -->
-  <Section title="Touch target" bind:open={showTouchTarget}>
-      <SliderRow
-        label="Min touch size" value={touchTarget} min={32} max={64} step={1} unit="px"
-        help="--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5). Independent literal (2.75rem / 44px) — deliberately NOT an alias of the --sf-size-* scale, so retuning sizes never drops below the accessibility floor."
-        overridden={"--sf-touch-target" in overrides}
-        onChange={(v) => onSet("--sf-touch-target", `${v}px`)}
-        onReset={() => onReset("--sf-touch-target")}
-        rawDefault="2.75rem"
-        currentRaw={overrides["--sf-touch-target"]}
-        onRawSet={(v) => onSet("--sf-touch-target", v)}
-      />
-      <!-- Preview -->
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-center gap-3">
-        <div
-          class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-600/70 dark:text-indigo-400/70 shrink-0"
-          style={`width: var(--sf-touch-target, 2.75rem); height: var(--sf-touch-target, 2.75rem)`}
-        ></div>
-        <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
-      </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+  <!-- Touch target moved to the Accessibility panel (WCAG 2.5.5 control; now
+       classifies there so badge/Reset match where it's edited). -->
 
   <!-- Z-INDEX -->
   <Section title="Z-index layers" bind:open={showZIndex}>
diff --git a/configurator/src/data/domain-map.json b/configurator/src/data/domain-map.json
index f347c7344..74c7aead4 100644
--- a/configurator/src/data/domain-map.json
+++ b/configurator/src/data/domain-map.json
@@ -50,7 +50,6 @@
     "header": "layout",
     "sticky": "layout",
     "safe": "layout",
-    "touch": "layout",
     "breakout": "layout",
     "box": "layout",
     "bg": "layout",
@@ -93,8 +92,10 @@
     "size": "misc",
     "object": "misc",
     "scrollbar": "misc",
-    "focus": "misc",
-    "is": "misc"
+    "is": "misc",
+
+    "focus": "wcag",
+    "touch": "wcag"
   },
   "exceptions": {
     "--sf-content-width": "layout",
diff --git a/configurator/src/lib/domains.ts b/configurator/src/lib/domains.ts
index f4f45f1ad..44a3b1ffc 100644
--- a/configurator/src/lib/domains.ts
+++ b/configurator/src/lib/domains.ts
@@ -36,7 +36,7 @@ export const FALLBACK_DOMAIN = 'misc';
 /** All domain ids a token can classify into, in canonical panel order. */
 export const DOMAINS = [
   'colors', 'typography', 'spacing', 'layout', 'borders', 'depth',
-  'motion', 'macros', 'components', 'misc',
+  'motion', 'macros', 'components', 'misc', 'wcag',
 ] as const;
 
 export type Domain = (typeof DOMAINS)[number];
diff --git a/configurator/tests/domains.test.ts b/configurator/tests/domains.test.ts
index 6570f9684..815b874db 100644
--- a/configurator/tests/domains.test.ts
+++ b/configurator/tests/domains.test.ts
@@ -27,7 +27,10 @@ describe('domainOf', () => {
     // Shadows + Effects are merged into the Depth panel:
     ['--sf-drop-shadow-m', 'depth'],
     ['--sf-opacity-muted', 'depth'],
-    ['--sf-focus-ring-color', 'misc'],   // was "colors" via the "color" fragment
+    // Accessibility owns focus ring + touch target:
+    ['--sf-focus-ring-color', 'wcag'],   // was "colors" via the "color" fragment
+    ['--sf-focus-ring-width', 'wcag'],
+    ['--sf-touch-target', 'wcag'],
     ['--sf-transition-fast', 'motion'],  // was "misc" (no pattern)
     ['--sf-box-padding', 'layout'],      // was "misc"
   ])('%s → %s', (name, expected) => {
@@ -40,7 +43,7 @@ describe('domainOf', () => {
 
   test('misc-namespace tokens resolve to "misc" explicitly (not via fallback)', () => {
     expect(domainOf('--sf-z-modal')).toBe('misc');
-    expect(domainOf('--sf-focus-ring-width')).toBe('misc');
+    expect(domainOf('--sf-icon-l')).toBe('misc');
     expect(classifyKnown('--sf-z-modal')).toBe('misc');
   });
 

From 8cf28502ba5769723858c130e856d8a23f41fa5c Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Thu, 20 Aug 2026 05:05:28 +0000
Subject: [PATCH 4/6] fix(configurator): preserve editor intent and undo steps

---
 configurator/src/App.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index d62521085..2c10e35f9 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -11,7 +11,6 @@
   import { generateCSS } from './lib/codec';
   import { loadInitialOverrides, injectLivePreview, saveOverrides, hasWpBoot } from './lib/persistence';
   import { domainOf } from './lib/domains';
-  import { changedKeys, shouldCoalesce, NO_COALESCE, type CoalesceState } from './lib/history';
   import { parseImport, summarizeImport } from './lib/importOverrides';
   import tokensRaw from './data/api-index.generated.json';
   import CommandPalette from './components/CommandPalette.svelte';

From ab2f64449698f1bf7b694890b328e7db77a1a5f2 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Thu, 20 Aug 2026 05:07:23 +0000
Subject: [PATCH 5/6] fix(configurator): report validated import outcomes

---
 configurator/src/App.svelte                |  6 +++--
 configurator/src/lib/importOverrides.ts    | 27 +++++++++++++---------
 configurator/tests/importOverrides.test.ts | 11 ++++++---
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 2c10e35f9..0349b8b12 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -220,7 +220,7 @@
       const reader = new FileReader();
       reader.onload = (ev) => {
         const text = ev.target?.result as string;
-        if (!text) return;
+        if (!text) { showImportStatus("Nothing imported — the selected file is empty."); return; }
         // One validated pipeline for both CSS and JSON: sanitised, migrated,
         // merged (non-destructive), and always reported — no more silent no-ops.
         const { overrides: imported, report } = parseImport(text, file.name, LIVE_TOKEN_NAMES);
@@ -229,6 +229,7 @@
         }
         showImportStatus(summarizeImport(report));
       };
+      reader.onerror = () => { showImportStatus("Import failed — the selected file could not be read."); };
       reader.readAsText(file);
     };
     input.click();
@@ -268,6 +269,7 @@
     return () => {
       window.removeEventListener("keydown", handler);
       if (saveStateTimer) clearTimeout(saveStateTimer);
+      if (importStatusTimer) clearTimeout(importStatusTimer);
     };
   });
 </script>
@@ -307,7 +309,7 @@
 
   <!-- Import feedback: a transient banner (the previous import flow gave none). -->
   {#if importStatus}
-    <div class="shrink-0 flex items-center gap-2 px-4 py-1.5 bg-indigo-500/10 border-b border-indigo-500/20 text-[11px] text-indigo-700 dark:text-indigo-300">
+    <div role="status" class="shrink-0 flex items-center gap-2 px-4 py-1.5 bg-indigo-500/10 border-b border-indigo-500/20 text-[11px] text-indigo-700 dark:text-indigo-300">
       <span class="flex-1">{importStatus}</span>
       <button onclick={() => { importStatus = null; }} aria-label="Dismiss" class="text-indigo-500 hover:text-indigo-700 dark:hover:text-indigo-200 cursor-pointer font-bold">×</button>
     </div>
diff --git a/configurator/src/lib/importOverrides.ts b/configurator/src/lib/importOverrides.ts
index eb0870fe8..49acd132b 100644
--- a/configurator/src/lib/importOverrides.ts
+++ b/configurator/src/lib/importOverrides.ts
@@ -37,6 +37,8 @@ export interface ImportReport {
   unknown: number;
   /** Keys rejected for a bad name or an unsafe/empty value. */
   invalid: string[];
+  /** Keys dropped because multiple legacy names map to one current token. */
+  collisions: number;
   /** True when the file couldn't be parsed into any tokens. */
   malformed: boolean;
 }
@@ -52,20 +54,18 @@ function looksLikeJson(text: string): boolean {
   return text.trim().startsWith("{");
 }
 
-/** Extract a raw name→value map from JSON (flat, or a theme-file `{ tokens }`). */
-function readJsonMap(text: string): { map: Record<string, string>; malformed: boolean } {
+/** Extract a raw name→value map from JSON (flat, or a theme-file wrapper). */
+function readJsonMap(text: string): { map: Record<string, unknown>; malformed: boolean } {
   try {
     const data = JSON.parse(text);
     if (!data || typeof data !== "object" || Array.isArray(data)) return { map: {}, malformed: true };
     const src =
-      "tokens" in data && data.tokens && typeof data.tokens === "object"
-        ? (data.tokens as Record<string, unknown>)
-        : (data as Record<string, unknown>);
-    const map: Record<string, string> = {};
-    for (const [k, v] of Object.entries(src)) {
-      if (typeof v === "string") map[k] = v;
-    }
-    return { map, malformed: false };
+      "overrides" in data && data.overrides && typeof data.overrides === "object" && !Array.isArray(data.overrides)
+        ? (data.overrides as Record<string, unknown>)
+        : "tokens" in data && data.tokens && typeof data.tokens === "object" && !Array.isArray(data.tokens)
+          ? (data.tokens as Record<string, unknown>)
+          : (data as Record<string, unknown>);
+    return { map: src, malformed: false };
   } catch {
     return { map: {}, malformed: true };
   }
@@ -91,7 +91,10 @@ export function parseImport(
   const cleaned: Record<string, string> = {};
   const invalid: string[] = [];
   for (const [key, value] of Object.entries(rawMap)) {
-    if (!KEY_RE.test(key)) { invalid.push(key); continue; }
+    if (!KEY_RE.test(key) || typeof value !== "string") { invalid.push(key); continue; }
+    // Preserve normal whitespace (sanitizeValue will collapse it) but reject
+    // non-printing control characters that theme files and share links reject.
+    if (/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/.test(value)) { invalid.push(key); continue; }
     const safe = sanitizeValue(value);
     if (!isStructurallySafe(safe)) { invalid.push(key); continue; }
     cleaned[key] = safe;
@@ -108,6 +111,7 @@ export function parseImport(
       removed: migrated.removed.length,
       unknown: migrated.unknown.length,
       invalid,
+      collisions: migrated.collisions.length,
       malformed: malformed && Object.keys(cleaned).length === 0,
     },
   };
@@ -122,5 +126,6 @@ export function summarizeImport(r: ImportReport): string {
   if (r.removed) parts.push(`${r.removed} removed`);
   if (r.unknown) parts.push(`${r.unknown} unknown`);
   if (r.invalid.length) parts.push(`${r.invalid.length} skipped`);
+  if (r.collisions) parts.push(`${r.collisions} migration collision${r.collisions === 1 ? "" : "s"}`);
   return parts.join(" · ") + ".";
 }
diff --git a/configurator/tests/importOverrides.test.ts b/configurator/tests/importOverrides.test.ts
index 8e2ecd793..692becd36 100644
--- a/configurator/tests/importOverrides.test.ts
+++ b/configurator/tests/importOverrides.test.ts
@@ -23,6 +23,11 @@ describe('parseImport — JSON', () => {
     const r = parseImport('{"schemaVersion":1,"tokens":{"--sf-space-m":"3rem"}}', 't.json', LIVE);
     expect(r.overrides).toEqual({ '--sf-space-m': '3rem' });
   });
+  test('accepts exported theme-file { overrides } and reports invalid values', () => {
+    const r = parseImport('{"schemaVersion":1,"overrides":{"--sf-space-m":"3rem","--sf-radius-l":4}}', 'theme.json', LIVE);
+    expect(r.overrides).toEqual({ '--sf-space-m': '3rem' });
+    expect(r.report.invalid).toEqual(['--sf-radius-l']);
+  });
   test('repairs CSS-breaking values but rejects bad keys and empty-after-sanitise ones', () => {
     // "1rem; }" sanitises to "1rem" (kept); ";;" sanitises to "" (rejected);
     // a non --sf key is rejected.
@@ -65,14 +70,14 @@ describe('parseImport — migration & unknown', () => {
 
 describe('summarizeImport', () => {
   test('summarises a mixed result', () => {
-    const msg = summarizeImport({ format: 'json', accepted: 3, renamed: 1, removed: 0, unknown: 1, invalid: ['x'], malformed: false });
+    const msg = summarizeImport({ format: 'json', accepted: 3, renamed: 1, removed: 0, unknown: 1, invalid: ['x'], collisions: 0, malformed: false });
     expect(msg).toContain('Imported 3 tokens');
     expect(msg).toContain('1 migrated');
     expect(msg).toContain('1 unknown');
     expect(msg).toContain('1 skipped');
   });
   test('reports malformed and empty distinctly', () => {
-    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], malformed: true })).toMatch(/failed/i);
-    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], malformed: false })).toMatch(/Nothing imported/i);
+    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], collisions: 0, malformed: true })).toMatch(/failed/i);
+    expect(summarizeImport({ format: 'css', accepted: 0, renamed: 0, removed: 0, unknown: 0, invalid: [], collisions: 0, malformed: false })).toMatch(/Nothing imported/i);
   });
 });

From a5822aabec630ca71a4253ef4970d4a2e8a4c44b Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Thu, 20 Aug 2026 05:06:06 +0000
Subject: [PATCH 6/6] fix(configurator): clear stale search focus

---
 configurator/src/App.svelte | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 0349b8b12..38f054cef 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -59,6 +59,17 @@
   // Transient feedback after an import (the old flow failed silently).
   let importStatus = $state<string | null>(null);
   let importStatusTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function navigateTo(domainId: string, token?: string) {
+    domain = domainId;
+    if (token) {
+      focusNonce += 1;
+      focusRequest = { token, nonce: focusNonce };
+    } else {
+      focusRequest = null;
+    }
+    mobileView = "controls";
+  }
   // On narrow screens the controls panel and the live preview can't both fit, so
   // we show one at a time and let the user fold between them (desktop shows both).
   let mobileView = $state<"controls" | "preview">("controls");