diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 41265ac6..33bde295 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -18,9 +18,10 @@
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
-    layout: "Layout", borders: "Borders", shadows: "Shadows", motion: "Motion",
+    layout: "Layout", borders: "Shape", shadows: "Shadows", motion: "Motion",
     effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
-    changes: "Changes", themes: "Themes", wcag: "WCAG", setup: "Install", cheatsheet: "Classes",
+    changes: "Changes", themes: "Presets", wcag: "Accessibility",
+    setup: "Install & export", cheatsheet: "Reference",
   };
 
   function overridesByDomain(ov: Record<string, string>): Record<string, number> {
@@ -48,6 +49,22 @@
 
   let domain = $state("home");
   let showPalette = $state(false);
+  // One-shot deep-link request from search: navigate to a domain AND focus a
+  // specific token's row in its All-tokens list. The nonce lets the same token
+  // 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";
+  }
   // 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");
@@ -96,10 +113,16 @@
     if (tab) untrack(() => { previewTemplate = tab; });
   });
 
+  // Each user-visible edit is its own undo step. Controls currently do not
+  // expose a reliable gesture boundary, so time-based coalescing could merge
+  // two distinct actions on the same token.
+
   function setOverrides(updater: ((prev: Record<string, string>) => Record<string, string>) | Record<string, string>) {
     const prev = overrides;
     const next = typeof updater === "function" ? updater(prev) : updater;
     if (!shallowEq(prev, next)) {
+      // Keep discrete edits independently undoable. Range input events are
+      // intentionally not time-grouped until the control provides boundaries.
       past = [...past.slice(-49), prev];
       future = [];
       if (saveState === 'saved' || saveState === 'error') saveState = 'idle';
@@ -296,6 +319,7 @@
     onImport={handleImport}
     onExport={handleExport}
     onSave={handleSave}
+    onOpenSearch={() => { showPalette = true; }}
   />
 
   <!-- Mobile fold toggle: switch between the controls panel and the live
@@ -312,7 +336,7 @@
     <div class={`shrink-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
       <SidebarNav
         activeId={domain}
-        onSelect={(d) => { domain = d; }}
+        onSelect={(d) => { navigateTo(d); }}
         overridesByDomain={domainBadges}
       />
     </div>
@@ -344,11 +368,13 @@
           {domain}
           tokens={ALL_TOKENS}
           {overrides}
+          focusToken={focusRequest?.token ?? null}
+          focusNonce={focusRequest?.nonce ?? 0}
           onSet={handleSet}
           onReset={handleReset}
           onBulkChange={handleBulkChange}
           onApplyTheme={handleApplyTheme}
-          onSelectDomain={(d) => { domain = d; }}
+          onSelectDomain={(d) => { navigateTo(d); }}
           onResetAll={handleResetAll}
         />
       </div>
@@ -381,7 +407,9 @@
     <CommandPalette
       tokens={ALL_TOKENS}
       {overrides}
-      onNavigate={(d) => { domain = d; }}
+      onNavigate={(d, token) => {
+        navigateTo(d, token);
+      }}
       onClose={() => { showPalette = false; }}
     />
   {/if}
diff --git a/configurator/src/components/CommandPalette.svelte b/configurator/src/components/CommandPalette.svelte
index f71e3047..5406e1fb 100644
--- a/configurator/src/components/CommandPalette.svelte
+++ b/configurator/src/components/CommandPalette.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import type { SlashedToken } from '../types';
   import { domainOf } from '../lib/domains';
 
   let { tokens, overrides, onNavigate, onClose }: {
     tokens: SlashedToken[];
     overrides: Record<string, string>;
-    onNavigate: (domain: string) => void;
+    /** Navigate to a panel; when `token` is given, deep-link to that token's row. */
+    onNavigate: (domain: string, token?: string) => void;
     onClose: () => void;
   } = $props();
 
@@ -15,69 +15,82 @@
   let inputEl = $state<HTMLInputElement | null>(null);
 
   const DOMAIN_LABELS: Record<string, string> = {
-    colors: "Colors", typography: "Typography", spacing: "Spacing", layout: "Layout",
-    borders: "Borders", shadows: "Shadows", motion: "Motion", effects: "Effects",
-    macros: "Macros", misc: "Misc", components: "Components",
+    home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
+    layout: "Layout", borders: "Shape", shadows: "Shadows", motion: "Motion",
+    effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
+    changes: "Changes", wcag: "Accessibility", themes: "Presets",
+    setup: "Install & export", cheatsheet: "Reference",
   };
 
-  let results = $derived((() => {
+  // Navigation destinations — makes this a real command palette (jump to any
+  // panel/tool), not just a token search.
+  const NAV_ALIASES: Record<string, string[]> = {
+    borders: ["border", "radius", "shape"], shadows: ["shadow", "depth"],
+    effects: ["effect"], wcag: ["accessibility", "contrast"],
+    themes: ["theme", "preset"], setup: ["install", "export"],
+    cheatsheet: ["reference", "classes"], misc: ["system"],
+  };
+  const NAV = [
+    "home", "colors", "typography", "spacing", "borders", "motion",
+    "layout", "shadows", "effects", "macros", "components", "misc",
+    "changes", "wcag", "themes", "setup", "cheatsheet",
+  ].map((id) => ({ id, label: DOMAIN_LABELS[id] ?? id, terms: [id, ...(NAV_ALIASES[id] ?? [])] }));
+
+  type Result =
+    | { kind: "nav"; id: string; label: string }
+    | { kind: "token"; token: SlashedToken; domain: string; overridden: boolean };
+
+  let results = $derived.by<Result[]>(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return [];
-    const matches: Array<{ token: SlashedToken; domain: string; overridden: boolean }> = [];
-    for (const t of tokens) {
-      if (t.tier === "INTERNAL") continue;
-      const nameMatch = t.name.toLowerCase().includes(q);
-      const descMatch = t.description?.toLowerCase().includes(q) ?? false;
-      if (nameMatch || descMatch) {
-        matches.push({ token: t, domain: domainOf(t.name), overridden: t.name in overrides });
-        if (matches.length >= 40) break;
+    // Navigation matches (all destinations when empty, so the palette is useful
+    // before typing).
+    const nav: Result[] = (q ? NAV.filter((n) =>
+      n.label.toLowerCase().includes(q) || n.terms.some((term) => term.includes(q))
+    ) : NAV)
+      .map((n) => ({ kind: "nav", id: n.id, label: n.label }));
+
+    const tokenMatches: Result[] = [];
+    if (q) {
+      for (const t of tokens) {
+        if (t.tier === "INTERNAL") continue;
+        if (t.name.toLowerCase().includes(q) || (t.description?.toLowerCase().includes(q) ?? false)) {
+          tokenMatches.push({ kind: "token", token: t, domain: domainOf(t.name), overridden: t.name in overrides });
+          if (tokenMatches.length >= 40) break;
+        }
       }
     }
-    return matches;
-  })());
-
-  $effect(() => {
-    query; // re-run when query changes so selectedIndex stays in bounds
-    selectedIndex = 0;
+    return [...nav, ...tokenMatches];
   });
 
-  $effect(() => {
-    if (inputEl) inputEl.focus();
-  });
+  // Number of nav results (for the "Go to" / "Tokens" section split).
+  let navCount = $derived(results.filter((r) => r.kind === "nav").length);
+
+  $effect(() => { query; selectedIndex = 0; });
+  $effect(() => { if (inputEl) inputEl.focus(); });
 
-  function handleSelect(domain: string) {
-    onNavigate(domain);
+  function select(r: Result) {
+    if (r.kind === "nav") onNavigate(r.id);
+    else onNavigate(r.domain, r.token.name);
     onClose();
   }
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === "Escape") { e.preventDefault(); onClose(); return; }
-    if (results.length === 0 && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      e.preventDefault();
-      selectedIndex = 0;
-      return;
-    }
     if (e.key === "ArrowDown") { e.preventDefault(); selectedIndex = Math.min(selectedIndex + 1, results.length - 1); return; }
     if (e.key === "ArrowUp") { e.preventDefault(); selectedIndex = Math.max(selectedIndex - 1, 0); return; }
-    if (e.key === "Enter" && results[selectedIndex]) {
-      e.preventDefault();
-      handleSelect(results[selectedIndex].domain);
-    }
+    if (e.key === "Enter" && results[selectedIndex]) { e.preventDefault(); select(results[selectedIndex]); }
   }
 </script>
 
-<!-- Backdrop -->
 <div
   class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-[15vh]"
   role="dialog"
   aria-modal="true"
-  aria-label="Token search"
+  aria-label="Search"
   tabindex="-1"
   onmousedown={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
-  <!-- Panel -->
   <div class="w-[560px] max-w-[95vw] bg-white dark:bg-[#111118] border border-black/12 dark:border-white/12 rounded-2xl shadow-2xl overflow-hidden">
-    <!-- Search input -->
     <div class="flex items-center gap-3 px-4 py-3 border-b border-black/8 dark:border-white/8">
       <svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -86,56 +99,58 @@
         bind:this={inputEl}
         bind:value={query}
         onkeydown={handleKeydown}
-        placeholder="Search tokens… (e.g. radius, primary, duration)"
+        placeholder="Search panels & tokens… (e.g. Shape, radius, primary)"
         class="flex-1 bg-transparent text-[13px] text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 outline-none"
       />
       <kbd class="text-[9px] font-mono text-slate-400 dark:text-slate-600 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd>
     </div>
 
-    <!-- Results -->
     <div class="max-h-[360px] overflow-y-auto">
-      {#if query.trim() && results.length === 0}
-        <div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">No tokens matching "{query}"</div>
-      {:else if !query.trim()}
-        <div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">Type to search tokens by name or description</div>
+      {#if results.length === 0}
+        <div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">No matches for "{query}"</div>
       {:else}
-        {#each results as r, i (r.token.name)}
+        {#each results as r, i (r.kind === "nav" ? `nav:${r.id}` : `tok:${r.token.name}`)}
+          {#if i === 0 && navCount > 0}
+            <div class="px-4 pt-2 pb-1 text-[8px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Go to</div>
+          {/if}
+          {#if r.kind === "token" && i === navCount}
+            <div class="px-4 pt-2 pb-1 text-[8px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">Tokens</div>
+          {/if}
           <button
             onmouseenter={() => { selectedIndex = i; }}
-            onclick={() => handleSelect(r.domain)}
-            class={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${
+            onclick={() => select(r)}
+            class={`w-full flex items-center gap-3 px-4 py-2 text-left transition-colors cursor-pointer ${
               selectedIndex === i ? "bg-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"
             }`}
           >
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="text-[11px] font-mono text-slate-800 dark:text-slate-200 truncate">{r.token.name}</span>
-                {#if r.overridden}
-                  <span class="shrink-0 text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>
+            {#if r.kind === "nav"}
+              <span class="text-[12px] font-semibold text-slate-800 dark:text-slate-200 flex-1 truncate">{r.label}</span>
+              <span class="text-[9px] text-slate-400 dark:text-slate-600">panel</span>
+            {:else}
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="text-[11px] font-mono text-slate-800 dark:text-slate-200 truncate">{r.token.name}</span>
+                  {#if r.overridden}
+                    <span class="shrink-0 text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>
+                  {/if}
+                </div>
+                {#if r.token.description}
+                  <div class="text-[10px] text-slate-400 dark:text-slate-600 truncate mt-0.5">{r.token.description}</div>
                 {/if}
               </div>
-              {#if r.token.description}
-                <div class="text-[10px] text-slate-400 dark:text-slate-600 truncate mt-0.5">{r.token.description}</div>
-              {/if}
-            </div>
-            <div class="flex items-center gap-2 shrink-0">
-              <span class="text-[9px] text-slate-400 dark:text-slate-600 font-mono truncate max-w-[100px]">
-                {r.overridden ? overrides[r.token.name] : r.token.value}
-              </span>
-              <span class="text-[9px] font-bold text-slate-500 dark:text-slate-400 bg-black/5 dark:bg-white/5 rounded px-1.5 py-0.5">
+              <span class="text-[9px] font-bold text-slate-500 dark:text-slate-400 bg-black/5 dark:bg-white/5 rounded px-1.5 py-0.5 shrink-0">
                 {DOMAIN_LABELS[r.domain] ?? r.domain}
               </span>
-            </div>
+            {/if}
           </button>
         {/each}
       {/if}
     </div>
 
-    <!-- Footer hint -->
     {#if results.length > 0}
       <div class="px-4 py-2 border-t border-black/6 dark:border-white/6 flex items-center gap-3 text-[9px] text-slate-400 dark:text-slate-600">
         <span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">↑↓</kbd> navigate</span>
-        <span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">↵</kbd> open panel</span>
+        <span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">↵</kbd> open</span>
         <span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">Esc</kbd> close</span>
       </div>
     {/if}
diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 7368f83b..d6cc67d4 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -22,10 +22,13 @@
   import AllTokensTab from './panels/AllTokensTab.svelte';
   import WcagPanel from './panels/WcagPanel.svelte';
 
-  let { domain, tokens, overrides, onSet, onReset, onBulkChange, onApplyTheme, onSelectDomain, onResetAll }: {
+  let { domain, tokens, overrides, focusToken = null, focusNonce = 0, onSet, onReset, onBulkChange, onApplyTheme, onSelectDomain, onResetAll }: {
     domain: string;
     tokens: SlashedToken[];
     overrides: Record<string, string>;
+    /** Deep-link target token from search; opens the All-tokens list on it. */
+    focusToken?: string | null;
+    focusNonce?: number;
     onSet: (name: string, value: string) => void;
     onReset: (name: string) => void;
     onBulkChange: (patch: Record<string, string | null>) => void;
@@ -40,10 +43,19 @@
 
   let view = $state<"controls" | "tokens">("controls");
 
-  // Reset view to controls when domain changes
+  // A domain change resets to Controls — UNLESS it arrived with a fresh deep-link
+  // focus request, which opens the All-tokens list on the target token. Both
+  // signals are read in one effect so their order can't race.
+  let lastFocusNonce = -1;
   $effect(() => {
     const _ = domain;
-    view = "controls";
+    const nonce = focusNonce;
+    if (focusToken && nonce !== lastFocusNonce) {
+      lastFocusNonce = nonce;
+      view = "tokens";
+    } else {
+      view = "controls";
+    }
   });
 
   // domainOf() is the single classifier shared with the sidebar badge and the
@@ -104,6 +116,8 @@
           {tokens}
           {overrides}
           {domain}
+          {focusToken}
+          {focusNonce}
           {onSet}
           {onReset}
         />
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 632bad68..142a80dc 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -3,6 +3,7 @@
   import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
   import { scaleForValue } from '../../lib/variableScales';
   import { roleOf, aliasTargetOf, tokenState, ROLE_LABEL, type TokenRole, type TokenState } from '../../lib/tokenModel';
+  import ValueField from './ValueField.svelte';
 
   let { token, overrideValue, onSet, onReset, dependentsCount = 0 }: {
     token: SlashedToken;
@@ -29,19 +30,9 @@
   };
   let aliasShort = $derived(aliasTarget ? aliasTarget.replace("--sf-", "") : "");
 
-  const CUSTOM = "__sf_custom__";
-  let expanded = $state(false);
-
   // When a token's default is itself a scale variable (e.g. var(--sf-space-m)),
-  // offer that scale's steps as a dropdown — variable-first, with the raw text
-  // box available via "Custom…". Mirrors SliderRow's picker for the generic row.
-  let scaleOpts = $derived(scaleForValue(token.value));
-  let matchedScale = $derived(
-    !!scaleOpts && (scaleOpts.some((o) => o.value === (overrideValue ?? token.value)))
-  );
-  let showScalePicker = $derived(
-    !!scaleOpts && !expanded && (overrideValue === undefined || matchedScale)
-  );
+  // offer that scale's steps as quick "relink" targets in the value editor.
+  let scaleOpts = $derived(scaleForValue(token.value) ?? []);
 
   function guessType(t: SlashedToken): "color" | "font" | "number" | "text" {
     const n = t.name;
@@ -162,53 +153,10 @@
     </div>
   {/if}
 
+  <!-- Unified value editor: explicit Inherit / Value / Expression modes. An
+       expression override is always shown verbatim (never parsed to a fallback
+       number), and switching to a fixed value is a deliberate tab click. -->
   <div class="mt-1 pl-3.5">
-    {#if showScalePicker && scaleOpts}
-      <select
-        value={displayValue}
-        aria-label={`${shortName} value`}
-        onchange={(e) => {
-          const v = (e.target as HTMLSelectElement).value;
-          if (v === CUSTOM) { expanded = true; return; }
-          if (v === token.value) onReset(); else onSet(v);
-        }}
-        class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[10px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
-      >
-        {#if !scaleOpts.some((o) => o.value === token.value)}
-          <option value={token.value}>{token.value} (default)</option>
-        {/if}
-        {#each scaleOpts as o (o.value)}
-          <option value={o.value}>{o.label}</option>
-        {/each}
-        <option value={CUSTOM}>Custom…</option>
-      </select>
-    {:else if expanded}
-      <input
-        value={displayValue}
-        onblur={(e) => {
-          const v = (e.target as HTMLInputElement).value.trim();
-          if (v && v !== token.value) onSet(v);
-          else if (!v || v === token.value) onReset();
-          expanded = false;
-        }}
-        onkeydown={(e) => {
-          if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
-          if (e.key === "Escape") { expanded = false; }
-        }}
-        class="w-full bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-1 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none"
-      />
-    {:else}
-      <button
-        onclick={() => { expanded = true; }}
-        class="w-full text-left text-[10px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate cursor-pointer transition-colors"
-        title={displayValue}
-      >
-        {#if isOverridden}
-          <span class="text-indigo-700 dark:text-indigo-300">{displayValue}</span>
-        {:else}
-          {displayValue}
-        {/if}
-      </button>
-    {/if}
+    <ValueField {token} {overrideValue} {onSet} {onReset} scaleOptions={scaleOpts} />
   </div>
 </div>
diff --git a/configurator/src/components/inputs/ValueField.svelte b/configurator/src/components/inputs/ValueField.svelte
new file mode 100644
index 00000000..7e3d81bc
--- /dev/null
+++ b/configurator/src/components/inputs/ValueField.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { SlashedToken } from '../../types';
+  import type { VarOption } from '../../lib/variableScales';
+  import { detectMode, type ValueMode } from '../../lib/valueField';
+
+  let { token, overrideValue, onSet, onReset, scaleOptions = [] }: {
+    token: SlashedToken;
+    overrideValue?: string;
+    onSet: (value: string) => void;
+    onReset: () => void;
+    /** Sibling scale steps offered as quick "relink" targets in Inherit mode. */
+    scaleOptions?: VarOption[];
+  } = $props();
+
+  // Auto-detect the mode from the current value; a user tab-click overrides it
+  // until the value changes underneath (mirrors SliderRow's manualView idea).
+  // Crucially, an expression override always resolves to 'expression' mode, so
+  // a var()/calc() is shown verbatim and never silently parsed to a number.
+  let manualMode = $state<ValueMode | null>(null);
+  let mode = $derived<ValueMode>(manualMode ?? detectMode(overrideValue));
+
+  let draft = $state("");
+  let editing = $state(false);
+  let cancelling = $state(false);
+  // Reset a user-selected tab when another surface changes this token.
+  $effect(() => {
+    overrideValue;
+    manualMode = null;
+  });
+  // Seed the text field from the live value whenever we're not mid-edit.
+  $effect(() => {
+    if (!editing) draft = overrideValue ?? token.value ?? "";
+  });
+
+  const RELINK = "__sf_relink__";
+
+  function commit(raw: string) {
+    const v = raw.trim();
+    if (!v || v === token.value) onReset();
+    else onSet(v);
+  }
+
+  function setMode(m: ValueMode) {
+    manualMode = m;
+    if (m === "inherit") { onReset(); manualMode = null; }
+  }
+
+  const TABS: { id: ValueMode; label: string }[] = [
+    { id: "inherit", label: "Inherit" },
+    { id: "value", label: "Value" },
+    { id: "expression", label: "Expression" },
+  ];
+</script>
+
+<div class="space-y-1">
+  <!-- Mode tabs -->
+  <div class="flex items-center gap-0.5 p-0.5 rounded-md bg-black/5 dark:bg-white/5 w-fit">
+    {#each TABS as t (t.id)}
+      <button
+        onclick={() => setMode(t.id)}
+        aria-pressed={mode === t.id}
+        class={`px-1.5 py-0.5 rounded text-[9px] font-bold transition-colors cursor-pointer ${
+          mode === t.id
+            ? "bg-white dark:bg-slate-700 text-indigo-700 dark:text-indigo-300 shadow-sm"
+            : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
+        }`}
+      >{t.label}</button>
+    {/each}
+  </div>
+
+  {#if mode === "inherit"}
+    <div class="text-[10px] font-mono text-slate-500 dark:text-slate-500">
+      default: <span class="text-slate-600 dark:text-slate-400">{token.value}</span>
+    </div>
+    {#if scaleOptions.length > 0}
+      <select
+        value={RELINK}
+        aria-label={`Relink ${token.name}`}
+        onchange={(e) => {
+          const v = (e.target as HTMLSelectElement).value;
+          if (v !== RELINK) onSet(v);
+          (e.target as HTMLSelectElement).value = RELINK;
+        }}
+        class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[10px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+      >
+        <option value={RELINK}>Relink to a scale step…</option>
+        {#each scaleOptions as o (o.value)}
+          <option value={o.value}>{o.label}</option>
+        {/each}
+      </select>
+    {/if}
+  {:else}
+    <!-- Value and Expression share a text field. The distinction is intent:
+         Value is a literal you type; Expression is a var()/calc() shown as-is.
+         Neither ever rewrites the other silently — switching is a tab click. -->
+    <input
+      type="text"
+      value={draft}
+      spellcheck="false"
+      placeholder={mode === "expression" ? "var(--sf-…) / calc(…)" : token.value}
+      onfocus={() => { editing = true; }}
+      oninput={(e) => { draft = (e.target as HTMLInputElement).value; }}
+      onblur={(e) => {
+        editing = false;
+        if (cancelling) { cancelling = false; return; }
+        commit((e.target as HTMLInputElement).value);
+      }}
+      onkeydown={(e) => {
+        if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
+        if (e.key === "Escape") {
+          cancelling = true;
+          editing = false;
+          draft = overrideValue ?? token.value ?? "";
+          (e.currentTarget as HTMLInputElement).blur();
+        }
+      }}
+      class="w-full bg-black/8 dark:bg-white/8 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500"
+    />
+  {/if}
+</div>
diff --git a/configurator/src/components/panels/AllTokensTab.svelte b/configurator/src/components/panels/AllTokensTab.svelte
index 6dd11aa5..44d955c9 100644
--- a/configurator/src/components/panels/AllTokensTab.svelte
+++ b/configurator/src/components/panels/AllTokensTab.svelte
@@ -4,14 +4,41 @@
   import { buildDependencyGraph } from '../../lib/tokenModel';
   import { domainOf } from '../../lib/domains';
 
-  let { tokens, overrides, domain, onSet, onReset }: {
+  let { tokens, overrides, domain, focusToken = null, focusNonce = 0, onSet, onReset }: {
     tokens: SlashedToken[];
     overrides: Record<string, string>;
     domain: string;
+    /** Deep-link target: filter to and highlight this token when it changes. */
+    focusToken?: string | null;
+    focusNonce?: number;
     onSet: (name: string, value: string) => void;
     onReset: (name: string) => void;
   } = $props();
 
+  let listEl = $state<HTMLDivElement | null>(null);
+  let highlightName = $state<string | null>(null);
+  let highlightTimer: ReturnType<typeof setTimeout> | null = null;
+  let lastFocusNonce = -1;
+
+  // React to a search deep-link: pre-fill the query with the token and briefly
+  // highlight + scroll to its row so the user lands exactly on the control.
+  $effect(() => {
+    const nonce = focusNonce;
+    if (!focusToken || nonce === lastFocusNonce) return;
+    lastFocusNonce = nonce;
+    query = focusToken.replace("--sf-", "");
+    showInternal = tokens.some((t) => t.name === focusToken && t.tier === "INTERNAL") || showInternal;
+    onlyModified = false;
+    highlightName = focusToken;
+    if (highlightTimer) clearTimeout(highlightTimer);
+    highlightTimer = setTimeout(() => { highlightName = null; }, 2600);
+    // Scroll to the row after the filtered list renders.
+    requestAnimationFrame(() => {
+      const el = listEl?.querySelector(`[data-token="${CSS.escape(focusToken)}"]`);
+      el?.scrollIntoView({ block: "center", behavior: "smooth" });
+    });
+  });
+
   const TIER_ORDER: Record<string, number> = { PUBLIC: 0, "PUBLIC-ADVANCED": 1, INTERNAL: 2 };
 
   // Whole-catalogue dependency graph (built once from the full token set, not
@@ -113,7 +140,7 @@
   <div class="w-full h-px bg-black/6 dark:bg-white/6 shrink-0"></div>
 
   <!-- Token list -->
-  <div class="flex-1 min-h-0 overflow-y-auto py-1">
+  <div class="flex-1 min-h-0 overflow-y-auto py-1" bind:this={listEl}>
     {#if filtered().length === 0}
       <div class="text-center py-8 text-[11px] text-slate-400 dark:text-slate-600">
         {onlyModified ? "No modified tokens in this domain" : "No tokens found"}
@@ -139,7 +166,10 @@
               <div class="h-px flex-1 bg-rose-800/25"></div>
             </div>
           {/if}
-          <div class="relative">
+          <div
+            class={`relative rounded-lg transition-shadow ${highlightName === t.name ? "ring-2 ring-indigo-500/70" : ""}`}
+            data-token={t.name}
+          >
             {#if t.tier === "PUBLIC-ADVANCED"}
               <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-amber-600/40 rounded-full"></div>
             {/if}
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 0078d853..846a6419 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
     Sparkles, Palette, Type, Ruler, Layout, Square, Layers, Zap,
-    Puzzle, Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, Save,
+    Puzzle, Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, Save, ListChecks,
   } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme } from '../../lib/savedThemes';
@@ -14,38 +14,61 @@
     onResetAll: () => void;
   } = $props();
 
-  const TOKEN_DOMAINS = [
-    { id: "colors",     icon: Palette,  label: "Colors",     desc: "Brand, semantic & neutral palettes" },
-    { id: "typography", icon: Type,     label: "Typography", desc: "Font families & fluid type scale" },
-    { id: "spacing",    icon: Ruler,    label: "Spacing",    desc: "Space scale & section rhythm" },
-    { id: "layout",     icon: Layout,   label: "Layout",     desc: "Containers, grids & primitives" },
-    { id: "borders",    icon: Square,   label: "Borders",    desc: "Corner radius & border widths" },
-    { id: "shadows",    icon: Layers,   label: "Shadows",    desc: "Elevation & depth control" },
-    { id: "motion",     icon: Zap,      label: "Motion",     desc: "Duration & easing curves" },
-    { id: "effects",    icon: Sparkles, label: "Effects",    desc: "Blur, opacity & scrollbars" },
-    { id: "macros",     icon: Blocks,    label: "Macros",     desc: "Flow, prose, aspect & scrim" },
-    { id: "misc",       icon: Puzzle,    label: "Misc",       desc: "Z-index & remaining tokens" },
-    { id: "components", icon: Component, label: "Components", desc: "Button & card component tokens" },
+  // Mirrors SidebarNav's grouped information architecture so Home and the rail
+  // always tell the same story (same order, names and descriptions).
+  const GROUPS = [
+    {
+      label: "Foundations",
+      items: [
+        { id: "colors",     icon: Palette,   label: "Colors",     desc: "Brand, semantic & neutral palettes" },
+        { id: "typography", icon: Type,      label: "Typography", desc: "Font families & fluid type scale" },
+        { id: "spacing",    icon: Ruler,     label: "Spacing",    desc: "Space scale & section rhythm" },
+        { id: "borders",    icon: Square,    label: "Shape",      desc: "Corner radius & border widths" },
+        { id: "motion",     icon: Zap,       label: "Motion",     desc: "Duration & easing curves" },
+      ],
+    },
+    {
+      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: "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" },
+      ],
+    },
+    {
+      label: "Quality",
+      items: [
+        { id: "changes",    icon: ListChecks,  label: "Changes",       desc: "Review every active override" },
+        { id: "wcag",       icon: ShieldCheck, label: "Accessibility", desc: "Contrast checker & fixes" },
+      ],
+    },
+    {
+      label: "Project",
+      items: [
+        { id: "themes",     icon: SwatchBook, label: "Presets",          desc: "Save & re-apply configurations" },
+        { id: "setup",      icon: Package,    label: "Install & export", desc: "Export overrides & setup" },
+        { id: "cheatsheet", icon: BookOpen,   label: "Reference",        desc: "Class & token catalogue" },
+      ],
+    },
   ] as const;
 
-  const TOOLS = [
-    { id: "themes",     icon: SwatchBook,  label: "Themes",  desc: "Save & re-apply configurations" },
-    { id: "wcag",       icon: ShieldCheck, label: "WCAG",    desc: "Contrast checker & fixes" },
-    { id: "setup",      icon: Package,     label: "Install", desc: "Export overrides & setup" },
-    { id: "cheatsheet", icon: BookOpen,    label: "Classes", desc: "Utility class reference" },
-  ] as const;
+  let overridesCount = $derived(Object.keys(overrides).length);
 
-  // Per-domain override counts for the Home screen tiles — uses the same
-  // canonical, ordered domainOf() classification as the sidebar badges and
-  // App.svelte's "Reset N" button, so counts can't disagree or double-count
-  // (unlike independent substring-per-domain matching, where e.g.
-  // --sf-btn-radius could match both "components" and a loose "radius"
-  // pattern in another domain's own list).
-  function domainCount(id: string): number {
+  // 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 TOKEN_DOMAIN_IDS = new Set<string>(
+    GROUPS.flatMap((g) => g.items.map((i) => i.id as string)).filter((id) => !NON_TOKEN_IDS.has(id)),
+  );
+  function countFor(id: string): number {
+    if (id === "changes") return overridesCount;
+    if (!TOKEN_DOMAIN_IDS.has(id)) return 0;
     return Object.keys(overrides).filter((k) => domainOf(k) === id).length;
   }
-
-  let overridesCount = $derived(Object.keys(overrides).length);
   let savedThemes = $state<SavedSlot[]>(listSavedThemes());
   let newName = $state("");
 
@@ -81,60 +104,39 @@
     {/if}
   </div>
 
-  <!-- Token domains -->
-  <div>
-    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div>
-    <div class="space-y-1">
-      {#each TOKEN_DOMAINS as d (d.id)}
-        {@const count = domainCount(d.id)}
-        {@const DomainIcon = d.icon}
-        <button
-          onclick={() => onSelect(d.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
-        >
-          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
-            <DomainIcon class="w-4 h-4" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{d.label}</div>
-            <div class="text-[9px] text-slate-400 dark:text-slate-600">{d.desc}</div>
-          </div>
-          {#if count > 0}
-            <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
-          {/if}
-          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
-        </button>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Tools -->
-  <div>
-    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Tools</div>
-    <div class="space-y-1">
-      {#each TOOLS as t (t.id)}
-        {@const ToolIcon = t.icon}
-        <button
-          onclick={() => onSelect(t.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
-        >
-          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
-            <ToolIcon class="w-4 h-4" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t.label}</div>
-            <div class="text-[9px] text-slate-400 dark:text-slate-600">{t.desc}</div>
-          </div>
-          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
-        </button>
-      {/each}
+  <!-- Grouped destinations (mirror of the sidebar IA) -->
+  {#each GROUPS as group (group.label)}
+    <div>
+      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{group.label}</div>
+      <div class="space-y-1">
+        {#each group.items as d (d.id)}
+          {@const count = countFor(d.id)}
+          {@const DomainIcon = d.icon}
+          <button
+            onclick={() => onSelect(d.id)}
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
+          >
+            <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
+              <DomainIcon class="w-4 h-4" />
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{d.label}</div>
+              <div class="text-[9px] text-slate-400 dark:text-slate-600">{d.desc}</div>
+            </div>
+            {#if count > 0}
+              <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
+            {/if}
+            <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
+          </button>
+        {/each}
+      </div>
     </div>
-  </div>
+  {/each}
 
   <!-- Saved themes -->
   <div>
     <div class="flex items-center justify-between mb-2">
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Saved themes</div>
+      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Presets</div>
       <button
         onclick={() => onSelect("themes")}
         class="text-[10px] text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer"
diff --git a/configurator/src/components/shell/SidebarNav.svelte b/configurator/src/components/shell/SidebarNav.svelte
index 1e300b5c..224b0ee4 100644
--- a/configurator/src/components/shell/SidebarNav.svelte
+++ b/configurator/src/components/shell/SidebarNav.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
-    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Puzzle,
-    Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
+    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Blocks,
+    Puzzle, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
   } from '@lucide/svelte';
 
   let { activeId, onSelect, overridesByDomain = {} }: {
@@ -10,88 +10,118 @@
     overridesByDomain?: Record<string, number>;
   } = $props();
 
-  const NAV_ITEMS = [
-    { id: "home",       icon: Home,        label: "Home",       group: "tokens" },
-    { id: "colors",     icon: Palette,     label: "Colors",     group: "tokens" },
-    { id: "typography", icon: Type,        label: "Typography", group: "tokens" },
-    { id: "spacing",    icon: Ruler,       label: "Spacing",    group: "tokens" },
-    { id: "layout",     icon: Layout,      label: "Layout",     group: "tokens" },
-    { id: "borders",    icon: Square,      label: "Borders",    group: "tokens" },
-    { id: "shadows",    icon: Layers,      label: "Shadows",    group: "tokens" },
-    { id: "motion",     icon: Zap,         label: "Motion",     group: "tokens" },
-    { id: "effects",    icon: Sparkles,    label: "Effects",    group: "tokens" },
-    { id: "macros",     icon: Blocks,      label: "Macros",     group: "tokens" },
-    { id: "misc",       icon: Puzzle,      label: "Misc",       group: "tokens" },
-    { id: "components", icon: Component,   label: "Components", group: "tokens" },
-    { id: "changes",    icon: ListChecks,  label: "Changes",    group: "tools" },
-    { id: "themes",     icon: SwatchBook,  label: "Themes",     group: "tools" },
-    { id: "wcag",       icon: ShieldCheck, label: "WCAG",       group: "tools" },
-    { id: "setup",      icon: Package,     label: "Install",    group: "tools" },
-    { id: "cheatsheet", icon: BookOpen,    label: "Classes",    group: "tools" },
-  ] as const;
-
-  let tokens = $derived(NAV_ITEMS.filter((i) => i.group === "tokens"));
-  let tools = $derived(NAV_ITEMS.filter((i) => i.group === "tools"));
+  // Grouped information architecture. Every destination lives under one of four
+  // named groups so a user reasons about *areas of the design system* instead
+  // of decoding an unlabelled icon rail. `home` sits above the groups; the
+  // labels are shown on desktop and collapse to tooltips on mobile.
+  type NavItem = { id: string; icon: typeof Home; label: string };
+  const HOME: NavItem = { id: "home", icon: Home, label: "Home" };
+  const GROUPS: { label: string; items: NavItem[] }[] = [
+    {
+      label: "Foundations",
+      items: [
+        { id: "colors",     icon: Palette,   label: "Colors" },
+        { id: "typography", icon: Type,      label: "Typography" },
+        { id: "spacing",    icon: Ruler,     label: "Spacing" },
+        { id: "borders",    icon: Square,    label: "Shape" },
+        { id: "motion",     icon: Zap,       label: "Motion" },
+      ],
+    },
+    {
+      label: "Composition",
+      items: [
+        { id: "layout",     icon: Layout,    label: "Layout" },
+        { id: "shadows",    icon: Layers,    label: "Shadows" },
+        { id: "effects",    icon: Sparkles,  label: "Effects" },
+        { id: "macros",     icon: Blocks,    label: "Macros" },
+        { id: "components", icon: Component, label: "Components" },
+        { id: "misc",       icon: Puzzle,    label: "Misc" },
+      ],
+    },
+    {
+      label: "Quality",
+      items: [
+        { id: "changes",    icon: ListChecks,  label: "Changes" },
+        { id: "wcag",       icon: ShieldCheck, label: "Accessibility" },
+      ],
+    },
+    {
+      label: "Project",
+      items: [
+        { id: "themes",     icon: SwatchBook, label: "Presets" },
+        { id: "setup",      icon: Package,    label: "Install & export" },
+        { id: "cheatsheet", icon: BookOpen,   label: "Reference" },
+      ],
+    },
+  ];
 
   // Every override maps to exactly one token domain, so their sum is the total
-  // override count — which is what the Changes overview badge should show.
+  // override count — what the Changes overview badge should show.
   let totalOverrides = $derived(Object.values(overridesByDomain).reduce((a, b) => a + b, 0));
   const countFor = (id: string): number =>
     id === "changes" ? totalOverrides : (overridesByDomain[id] || 0);
 </script>
 
-<nav class="w-14 bg-slate-50 dark:bg-[#0a0a0f] border-r border-black/8 dark:border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden">
-  <div class="flex flex-col items-center gap-1 w-full px-2">
-    {#each tokens as item (item.id)}
-      {@const isActive = activeId === item.id}
-      {@const count = overridesByDomain[item.id] || 0}
-      {@const Icon = item.icon}
-      <button
-        onclick={() => onSelect(item.id)}
-        title={item.label}
-        class={`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${
-          isActive
-            ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
-            : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
-        }`}
-      >
-        <Icon class="w-4 h-4" />
-        {#if count > 0 && !isActive}
-          <span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center">
-            {count > 9 ? "+" : count}
-          </span>
-        {/if}
-        <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
-          {item.label}
+<nav
+  class="w-14 md:w-52 bg-slate-50 dark:bg-[#0a0a0f] border-r border-black/8 dark:border-white/8 flex flex-col items-center md:items-stretch py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"
+  aria-label="Panels"
+>
+  {#snippet navButton(item: NavItem)}
+    {@const isActive = activeId === item.id}
+    {@const count = countFor(item.id)}
+    {@const Icon = item.icon}
+    <button
+      onclick={() => onSelect(item.id)}
+      title={item.label}
+      aria-current={isActive ? "page" : undefined}
+      class={`relative flex items-center justify-center md:justify-start gap-2.5 w-10 md:w-full h-10 md:h-8 px-0 md:px-2.5 rounded-xl transition-all cursor-pointer group ${
+        isActive
+          ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
+          : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
+      }`}
+    >
+      <Icon class="w-4 h-4 shrink-0" />
+      <span class="hidden md:block text-[11px] font-semibold truncate">{item.label}</span>
+
+      {#if count > 0}
+        <!-- Mobile: corner dot. Desktop: trailing count pill. -->
+        <span
+          class={`md:hidden absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full text-[8px] font-black flex items-center justify-center ${
+            isActive ? "bg-white text-indigo-700" : "bg-indigo-500 text-white"
+          }`}
+        >
+          {count > 9 ? "+" : count}
         </span>
-      </button>
-    {/each}
-  </div>
-  <div class="w-8 h-px bg-black/8 dark:bg-white/8 my-2"></div>
-  <div class="flex flex-col items-center gap-1 w-full px-2">
-    {#each tools as item (item.id)}
-      {@const isActive = activeId === item.id}
-      {@const count = countFor(item.id)}
-      {@const Icon = item.icon}
-      <button
-        onclick={() => onSelect(item.id)}
-        title={item.label}
-        class={`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${
-          isActive
-            ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
-            : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
-        }`}
-      >
-        <Icon class="w-4 h-4" />
-        {#if count > 0 && !isActive}
-          <span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center">
-            {count > 9 ? "+" : count}
-          </span>
-        {/if}
-        <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
-          {item.label}
+        <span
+          class={`hidden md:flex ml-auto min-w-4 h-4 px-1 rounded-full text-[9px] font-black items-center justify-center ${
+            isActive ? "bg-white/25 text-white" : "bg-indigo-500/15 text-indigo-600 dark:text-indigo-400"
+          }`}
+        >
+          {count > 99 ? "99+" : count}
         </span>
-      </button>
-    {/each}
+      {/if}
+
+      <!-- Tooltip: mobile only (desktop shows the label inline). -->
+      <span class="md:hidden absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
+        {item.label}
+      </span>
+    </button>
+  {/snippet}
+
+  <!-- Home -->
+  <div class="flex flex-col items-center md:items-stretch gap-1 w-full px-2">
+    {@render navButton(HOME)}
   </div>
+
+  {#each GROUPS as group (group.label)}
+    <div class="w-8 md:w-auto md:mx-2.5 h-px bg-black/8 dark:bg-white/8 my-2"></div>
+    <div class="hidden md:block px-3 pb-1 text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">
+      {group.label}
+    </div>
+    <div class="flex flex-col items-center md:items-stretch gap-1 w-full px-2">
+      {#each group.items as item (item.id)}
+        {@render navButton(item)}
+      {/each}
+    </div>
+  {/each}
 </nav>
diff --git a/configurator/src/components/shell/StudioHeader.svelte b/configurator/src/components/shell/StudioHeader.svelte
index daf8e72c..f76962bf 100644
--- a/configurator/src/components/shell/StudioHeader.svelte
+++ b/configurator/src/components/shell/StudioHeader.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2, AlertTriangle, Sun, Moon } from '@lucide/svelte';
+  import { Undo2, Redo2, Trash2, Share2, FolderOpen, Check, Save, Loader2, AlertTriangle, Sun, Moon, Search } from '@lucide/svelte';
   import { themeState, toggleTheme } from '../../lib/theme.svelte';
   import { buildShareUrl } from '../../lib/codec';
   import { getShareBaseUrl } from '../../lib/persistence';
 
   const version = typeof __SLASHED_VERSION__ !== "undefined" ? __SLASHED_VERSION__ : "";
 
-  let { overrides, overridesCount, canUndo, canRedo, hasPendingChanges, saveState, onUndo, onRedo, onResetAll, onImport, onExport, onSave }: {
+  let { overrides, overridesCount, canUndo, canRedo, hasPendingChanges, saveState, onUndo, onRedo, onResetAll, onImport, onExport, onSave, onOpenSearch }: {
     overrides: Record<string, string>;
     overridesCount: number;
     canUndo: boolean;
@@ -20,6 +20,7 @@
     onImport: () => void;
     onExport: () => void;
     onSave: () => void;
+    onOpenSearch: () => void;
   } = $props();
 
   let shareFeedback = $state(false);
@@ -75,6 +76,17 @@
     </div>
   </div>
 
+  <!-- Discoverable global search (was hidden behind Cmd/Ctrl+K only). -->
+  <button
+    onclick={onOpenSearch}
+    title="Search panels & tokens (Ctrl/Cmd+K)"
+    class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8 transition-colors cursor-pointer shrink-0"
+  >
+    <Search class="w-3.5 h-3.5 shrink-0" />
+    <span class="hidden md:inline text-[11px]">Search…</span>
+    <kbd class="hidden md:inline text-[9px] font-mono border border-black/10 dark:border-white/10 rounded px-1 py-px">⌘K</kbd>
+  </button>
+
   {#if overridesCount > 0}
     <button
       onclick={onExport}
diff --git a/configurator/src/lib/history.ts b/configurator/src/lib/history.ts
new file mode 100644
index 00000000..8a177a1d
--- /dev/null
+++ b/configurator/src/lib/history.ts
@@ -0,0 +1,54 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Undo-history coalescing.
+ *
+ * A slider drag fires `input` on every tick, so without coalescing a single
+ * gesture pushes dozens of near-identical snapshots onto the undo stack and one
+ * Ctrl+Z rewinds a single pixel of movement. These pure helpers let the store
+ * merge a run of consecutive edits to the *same* token into one history entry:
+ * the first change opens a group, subsequent same-token changes within a short
+ * window extend it (no new snapshot), and any different edit — or a pause —
+ * starts a fresh group.
+ */
+
+/** The single-token key currently being coalesced, and when it last changed. */
+export interface CoalesceState {
+  key: string | null;
+  time: number;
+}
+
+export const NO_COALESCE: CoalesceState = { key: null, time: 0 };
+
+/** Keys whose value differs between two flat override maps. */
+export function changedKeys(
+  prev: Record<string, string>,
+  next: Record<string, string>,
+): string[] {
+  const all = new Set([...Object.keys(prev), ...Object.keys(next)]);
+  const out: string[] = [];
+  for (const k of all) {
+    if (prev[k] !== next[k]) out.push(k);
+  }
+  return out;
+}
+
+/**
+ * Whether this change should be merged into the current history group rather
+ * than pushed as a new undo step. True only when the change touches exactly one
+ * token, it's the same token as the open group, and it arrived within
+ * `windowMs` of the previous change (a continuous gesture).
+ */
+export function shouldCoalesce(
+  state: CoalesceState,
+  changed: string[],
+  now: number,
+  windowMs = 600,
+): boolean {
+  if (changed.length !== 1) return false;
+  if (state.key === null || state.key !== changed[0]) return false;
+  return now - state.time <= windowMs;
+}
diff --git a/configurator/src/lib/valueField.ts b/configurator/src/lib/valueField.ts
new file mode 100644
index 00000000..9c724379
--- /dev/null
+++ b/configurator/src/lib/valueField.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Value-editing modes shared by the unified value editor (ValueField.svelte).
+ *
+ * The audit found controls that silently parse a `var()`/`calc()` override down
+ * to a fallback number, so the next slider nudge overwrites the expression. The
+ * fix is an explicit three-mode model where an expression is always shown *as*
+ * an expression and can only become a fixed value through a deliberate switch:
+ *
+ *   inherit    — no override; the framework default (possibly an alias) is used
+ *   value      — a fixed, literal value the user typed
+ *   expression — a var()/calc()/clamp()/… expression, shown verbatim
+ */
+export type ValueMode = "inherit" | "value" | "expression";
+
+const EXPRESSION_RE = /\b(?:var|calc|clamp|min|max|env)\s*\(/;
+
+/** Whether a value is a CSS expression (references/computes other values). */
+export function isExpression(value: string | null | undefined): boolean {
+  return !!value && EXPRESSION_RE.test(value);
+}
+
+/**
+ * The mode a given override value belongs to. `undefined` (no override) is
+ * inherit; an expression is expression; anything else is a fixed value.
+ */
+export function detectMode(value: string | undefined): ValueMode {
+  if (value === undefined) return "inherit";
+  if (isExpression(value)) return "expression";
+  return "value";
+}
+
+/** Split a numeric CSS value into its number and unit, e.g. "1.5rem" → [1.5,"rem"]. */
+export function splitValueUnit(value: string): { num: number | null; unit: string } {
+  const m = /^\s*(-?\d*\.?\d+)\s*([a-z%]*)\s*$/i.exec(value ?? "");
+  if (!m) return { num: null, unit: "" };
+  return { num: parseFloat(m[1]), unit: m[2] ?? "" };
+}
diff --git a/configurator/tests-components/token-editing.test.js b/configurator/tests-components/token-editing.test.js
index b8db28ce..cb32d1f4 100644
--- a/configurator/tests-components/token-editing.test.js
+++ b/configurator/tests-components/token-editing.test.js
@@ -111,7 +111,7 @@ describe('TokenRow', () => {
 
   test('bind: renders the override value and reset affordance when overridden', () => {
     render(TokenRow, { props: { token, overrideValue: '2rem', onSet: () => {}, onReset: () => {} } });
-    expect(screen.getByText('2rem')).toBeTruthy();
+    expect(screen.getByDisplayValue('2rem')).toBeTruthy();
     expect(screen.getByText('reset')).toBeTruthy();
   });
 
@@ -120,8 +120,8 @@ describe('TokenRow', () => {
     const onReset = vi.fn();
     render(TokenRow, { props: { token, onSet, onReset } });
 
-    await fireEvent.click(screen.getByTitle('1rem'));
-    const input = screen.getByDisplayValue('1rem');
+    await fireEvent.click(screen.getByRole('button', { name: 'Value' }));
+    const input = screen.getByRole('textbox');
     await fireEvent.input(input, { target: { value: '1.5rem' } });
     await fireEvent.blur(input);
 
@@ -129,13 +129,26 @@ describe('TokenRow', () => {
     expect(onReset).not.toHaveBeenCalled();
   });
 
+  test('cancel: Escape discards the draft instead of committing it on blur', async () => {
+    const onSet = vi.fn();
+    const onReset = vi.fn();
+    render(TokenRow, { props: { token, onSet, onReset } });
+    await fireEvent.click(screen.getByRole('button', { name: 'Value' }));
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+    await fireEvent.input(input, { target: { value: '1.5rem' } });
+    await fireEvent.keyDown(input, { key: 'Escape' });
+    expect(onSet).not.toHaveBeenCalled();
+    expect(onReset).not.toHaveBeenCalled();
+  });
+
   test('reset: blurring with the value unchanged from the default calls onReset, not onSet', async () => {
     const onSet = vi.fn();
     const onReset = vi.fn();
     render(TokenRow, { props: { token, overrideValue: '2rem', onSet, onReset } });
 
-    await fireEvent.click(screen.getByTitle('2rem'));
-    const input = screen.getByDisplayValue('2rem');
+    await fireEvent.click(screen.getByRole('button', { name: 'Value' }));
+    const input = screen.getByRole('textbox');
     await fireEvent.input(input, { target: { value: '1rem' } }); // back to token.value
     await fireEvent.blur(input);
 
diff --git a/configurator/tests-e2e/shell.spec.js b/configurator/tests-e2e/shell.spec.js
index 0b7e7237..7cd2e8fc 100644
--- a/configurator/tests-e2e/shell.spec.js
+++ b/configurator/tests-e2e/shell.spec.js
@@ -5,9 +5,9 @@ import { test, expect } from '@playwright/test';
 import { watchErrors, gotoClean, navButton } from './helpers.js';
 
 const NAV_LABELS = [
-  'Home', 'Colors', 'Typography', 'Spacing', 'Layout',
-  'Borders', 'Shadows', 'Motion', 'Effects', 'Misc', 'Components',
-  'Themes', 'WCAG', 'Install', 'Classes',
+  'Home', 'Colors', 'Typography', 'Spacing', 'Shape',
+  'Layout', 'Shadows', 'Motion', 'Effects', 'Misc', 'Components',
+  'Changes', 'Accessibility', 'Presets', 'Install & export', 'Reference',
 ];
 
 test('loads with the SLASHED Studio branding', async ({ page }) => {
diff --git a/configurator/tests/history.test.ts b/configurator/tests/history.test.ts
new file mode 100644
index 00000000..9128f1d6
--- /dev/null
+++ b/configurator/tests/history.test.ts
@@ -0,0 +1,41 @@
+/**
+ * Unit tests for src/lib/history.ts — the undo-coalescing decision behind the
+ * store. Pins that a continuous same-token gesture merges into one history
+ * entry while distinct edits or a pause start a new one.
+ */
+import { describe, test, expect } from 'vitest';
+import { changedKeys, shouldCoalesce, NO_COALESCE } from '../src/lib/history';
+
+describe('changedKeys', () => {
+  test('reports added, removed and altered keys', () => {
+    expect(changedKeys({ a: '1' }, { a: '2' })).toEqual(['a']);              // altered
+    expect(changedKeys({}, { a: '1' })).toEqual(['a']);                       // added
+    expect(changedKeys({ a: '1' }, {})).toEqual(['a']);                       // removed
+    expect(changedKeys({ a: '1' }, { a: '1' })).toEqual([]);                  // no change
+  });
+  test('reports every differing key for a multi-key change', () => {
+    expect(changedKeys({ a: '1', b: '1' }, { a: '2', b: '2' }).sort()).toEqual(['a', 'b']);
+  });
+});
+
+describe('shouldCoalesce', () => {
+  test('merges a same-token change within the window', () => {
+    expect(shouldCoalesce({ key: '--sf-x', time: 1000 }, ['--sf-x'], 1200)).toBe(true);
+  });
+  test('does not merge after the window elapses', () => {
+    expect(shouldCoalesce({ key: '--sf-x', time: 1000 }, ['--sf-x'], 2000)).toBe(false);
+  });
+  test('does not merge a different token', () => {
+    expect(shouldCoalesce({ key: '--sf-x', time: 1000 }, ['--sf-y'], 1100)).toBe(false);
+  });
+  test('does not merge a multi-key change', () => {
+    expect(shouldCoalesce({ key: '--sf-x', time: 1000 }, ['--sf-x', '--sf-y'], 1100)).toBe(false);
+  });
+  test('never merges from the initial (null) state', () => {
+    expect(shouldCoalesce(NO_COALESCE, ['--sf-x'], 1)).toBe(false);
+  });
+  test('respects a custom window', () => {
+    expect(shouldCoalesce({ key: '--sf-x', time: 0 }, ['--sf-x'], 50, 100)).toBe(true);
+    expect(shouldCoalesce({ key: '--sf-x', time: 0 }, ['--sf-x'], 150, 100)).toBe(false);
+  });
+});
diff --git a/configurator/tests/valueField.test.ts b/configurator/tests/valueField.test.ts
new file mode 100644
index 00000000..83d474a2
--- /dev/null
+++ b/configurator/tests/valueField.test.ts
@@ -0,0 +1,52 @@
+/**
+ * Unit tests for src/lib/valueField.ts — the Inherit/Value/Expression mode
+ * detection behind the unified value editor. Pins that an expression override
+ * is always classified as an expression (never a fixed value), so the editor
+ * shows it verbatim instead of a fallback number.
+ */
+import { describe, test, expect } from 'vitest';
+import { isExpression, detectMode, splitValueUnit } from '../src/lib/valueField';
+
+describe('isExpression', () => {
+  test('detects var/calc/clamp/min/max/env', () => {
+    expect(isExpression('var(--sf-space-m)')).toBe(true);
+    expect(isExpression('calc(1rem + 2px)')).toBe(true);
+    expect(isExpression('clamp(1rem, 2vw, 3rem)')).toBe(true);
+    expect(isExpression('min(1rem, 2vw)')).toBe(true);
+    expect(isExpression('env(safe-area-inset-top)')).toBe(true);
+  });
+  test('plain literals are not expressions', () => {
+    expect(isExpression('1.5rem')).toBe(false);
+    expect(isExpression('#ff0000')).toBe(false);
+    expect(isExpression('')).toBe(false);
+    expect(isExpression(undefined)).toBe(false);
+  });
+});
+
+describe('detectMode', () => {
+  test('undefined → inherit', () => {
+    expect(detectMode(undefined)).toBe('inherit');
+  });
+  test('expression → expression', () => {
+    expect(detectMode('var(--sf-space-m)')).toBe('expression');
+    expect(detectMode('calc(1rem * 2)')).toBe('expression');
+  });
+  test('literal → value', () => {
+    expect(detectMode('1.5rem')).toBe('value');
+    expect(detectMode('Georgia, serif')).toBe('value');
+  });
+});
+
+describe('splitValueUnit', () => {
+  test('splits number and unit', () => {
+    expect(splitValueUnit('1.5rem')).toEqual({ num: 1.5, unit: 'rem' });
+    expect(splitValueUnit('12px')).toEqual({ num: 12, unit: 'px' });
+    expect(splitValueUnit('50%')).toEqual({ num: 50, unit: '%' });
+    expect(splitValueUnit('1.25')).toEqual({ num: 1.25, unit: '' });
+    expect(splitValueUnit('-3px')).toEqual({ num: -3, unit: 'px' });
+  });
+  test('non-numeric values yield null', () => {
+    expect(splitValueUnit('Georgia').num).toBeNull();
+    expect(splitValueUnit('var(--sf-x)').num).toBeNull();
+  });
+});