diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 22d3f0316..41265ac6e 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -20,7 +20,7 @@
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
     layout: "Layout", borders: "Borders", shadows: "Shadows", motion: "Motion",
     effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
-    themes: "Themes", wcag: "WCAG", setup: "Install", cheatsheet: "Classes",
+    changes: "Changes", themes: "Themes", wcag: "WCAG", setup: "Install", cheatsheet: "Classes",
   };
 
   function overridesByDomain(ov: Record<string, string>): Record<string, number> {
diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index a638d1f90..7368f83b4 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -17,6 +17,7 @@
   import ThemesPanel from './panels/ThemesPanel.svelte';
   import ExportPanel from './panels/ExportPanel.svelte';
   import CheatsheetPanel from './panels/CheatsheetPanel.svelte';
+  import ChangesPanel from './panels/ChangesPanel.svelte';
   import GenericTokenPanel from './panels/GenericTokenPanel.svelte';
   import AllTokensTab from './panels/AllTokensTab.svelte';
   import WcagPanel from './panels/WcagPanel.svelte';
@@ -35,7 +36,7 @@
 
 
   // Domains that skip the two-tab treatment
-  const NO_CONTROLS_TAB = new Set(["home", "themes", "wcag", "setup", "cheatsheet"]);
+  const NO_CONTROLS_TAB = new Set(["home", "changes", "themes", "wcag", "setup", "cheatsheet"]);
 
   let view = $state<"controls" | "tokens">("controls");
 
@@ -55,6 +56,8 @@
 {#if NO_CONTROLS_TAB.has(domain)}
   {#if domain === "home"}
     <HomePanel {overrides} onSelect={onSelectDomain} {onApplyTheme} {onResetAll} />
+  {:else if domain === "changes"}
+    <ChangesPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} {onResetAll} {onSelectDomain} />
   {:else if domain === "themes"}
     <ThemesPanel {overrides} {onApplyTheme} {onResetAll} />
   {:else if domain === "wcag"}
diff --git a/configurator/src/components/panels/ChangesPanel.svelte b/configurator/src/components/panels/ChangesPanel.svelte
new file mode 100644
index 000000000..f9bfe89fc
--- /dev/null
+++ b/configurator/src/components/panels/ChangesPanel.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+  import { RotateCcw, AlertTriangle, Unlink, Link2, SlidersHorizontal, HelpCircle, Check } from '@lucide/svelte';
+  import type { SlashedToken } from '../../types';
+  import TokenRow from '../inputs/TokenRow.svelte';
+  import { summarizeChanges, scaleShadows, buildDependencyGraph, type ChangeEntry } from '../../lib/tokenModel';
+  import { domainOf } from '../../lib/domains';
+
+  let { tokens, overrides, onSet, onReset, onBulkChange, onResetAll, onSelectDomain }: {
+    tokens: SlashedToken[];
+    overrides: Record<string, string>;
+    onSet: (name: string, value: string) => void;
+    onReset: (name: string) => void;
+    onBulkChange: (patch: Record<string, string | null>) => void;
+    onResetAll: () => void;
+    onSelectDomain: (d: string) => void;
+  } = $props();
+
+  const DOMAIN_LABEL: Record<string, string> = {
+    colors: "Colors", typography: "Typography", spacing: "Spacing", layout: "Layout",
+    borders: "Borders", shadows: "Shadows", motion: "Motion", effects: "Effects",
+    macros: "Macros", components: "Components", misc: "Misc",
+  };
+
+  let summary = $derived(summarizeChanges(tokens, overrides));
+  let shadows = $derived(scaleShadows(overrides));
+  let graph = $derived(buildDependencyGraph(tokens));
+
+  // Consequence groups, most-actionable first. Each carries its own colour and
+  // a one-line "why this matters".
+  type GroupDef = {
+    key: "invalid" | "detached" | "relinked" | "custom" | "unknown";
+    label: string;
+    blurb: string;
+    icon: typeof AlertTriangle;
+    accent: string;
+  };
+  const GROUPS: GroupDef[] = [
+    { key: "invalid",  label: "Invalid",  blurb: "Contains a malformed or CSS-breaking value — fix or reset it before export.", icon: AlertTriangle, accent: "text-rose-600 dark:text-rose-400" },
+    { key: "detached", label: "Detached", blurb: "Frozen — no longer follows the token that would produce it.", icon: Unlink, accent: "text-amber-600 dark:text-amber-400" },
+    { key: "relinked", label: "Re-linked", blurb: "Re-pointed at another token instead of a fixed value.", icon: Link2, accent: "text-sky-600 dark:text-sky-400" },
+    { key: "custom",   label: "Custom",   blurb: "A source value you set. Expected and safe.", icon: SlidersHorizontal, accent: "text-indigo-600 dark:text-indigo-400" },
+    { key: "unknown",  label: "Not in this build", blurb: "Override keys that aren't tokens in this framework version.", icon: HelpCircle, accent: "text-slate-500 dark:text-slate-500" },
+  ];
+
+  function resetGroup(entries: ChangeEntry[]) {
+    const patch: Record<string, null> = {};
+    for (const e of entries) patch[e.name] = null;
+    onBulkChange(patch);
+  }
+
+  function clearShadow(steps: string[]) {
+    const patch: Record<string, null> = {};
+    for (const s of steps) patch[s] = null;
+    onBulkChange(patch);
+  }
+</script>
+
+<div class="flex flex-col h-full min-h-0">
+  <!-- Header -->
+  <div class="px-4 pt-4 pb-3 shrink-0">
+    <div class="flex items-center justify-between gap-2">
+      <div>
+        <h2 class="text-[13px] font-bold text-slate-800 dark:text-slate-100">Changes</h2>
+        <p class="text-[10px] text-slate-500 dark:text-slate-500 mt-0.5">
+          Every active override, grouped by what it does to the system.
+        </p>
+      </div>
+      {#if summary.total > 0}
+        <button
+          onclick={onResetAll}
+          class="flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"
+        >
+          <RotateCcw class="w-3 h-3" /> Reset all
+        </button>
+      {/if}
+    </div>
+
+    {#if summary.total > 0}
+      <!-- Consequence summary chips -->
+      <div class="flex flex-wrap gap-1.5 mt-3">
+        {#each GROUPS as g (g.key)}
+          {@const n = summary[g.key].length}
+          {#if n > 0}
+            <span class={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-bold bg-black/5 dark:bg-white/8 ${g.accent}`}>
+              <g.icon class="w-2.5 h-2.5" /> {n} {g.label}
+            </span>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+
+  <div class="w-full h-px bg-black/6 dark:bg-white/6 shrink-0"></div>
+
+  <!-- Body -->
+  <div class="flex-1 min-h-0 overflow-y-auto px-2 py-3 space-y-4">
+    {#if summary.total === 0}
+      <div class="flex flex-col items-center justify-center text-center py-16 px-6 gap-2">
+        <div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center">
+          <Check class="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
+        </div>
+        <p class="text-[12px] font-bold text-slate-700 dark:text-slate-300">No changes yet</p>
+        <p class="text-[10px] text-slate-500 dark:text-slate-500 max-w-[15rem]">
+          You're on the framework defaults. Edit any panel and your overrides will collect here.
+        </p>
+      </div>
+    {:else}
+      <!-- Scale-shadow callouts: pinned steps that make a source knob inert. -->
+      {#each shadows as sh (sh.family.id)}
+        <div class="mx-1 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
+          <div class="flex items-start gap-2">
+            <AlertTriangle class="w-3.5 h-3.5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+            <div class="flex-1 min-w-0">
+              <div class="text-[10px] font-bold text-amber-700 dark:text-amber-300">
+                {sh.shadowedSteps.length} {sh.family.label} step{sh.shadowedSteps.length !== 1 ? "s" : ""} pinned
+              </div>
+              <div class="text-[9px] text-amber-700/80 dark:text-amber-300/80 leading-snug mt-0.5">
+                These fixed values override the generated ladder, so its source
+                knob{sh.overriddenSources.length === 1 ? "" : "s"} can't move them.
+              </div>
+              <button
+                onclick={() => clearShadow(sh.shadowedSteps)}
+                class="mt-1.5 text-[9px] font-bold text-amber-800 dark:text-amber-200 underline hover:no-underline cursor-pointer"
+              >
+                Restore generated scale
+              </button>
+            </div>
+          </div>
+        </div>
+      {/each}
+
+      <!-- Consequence groups -->
+      {#each GROUPS as g (g.key)}
+        {@const entries = summary[g.key]}
+        {#if entries.length > 0}
+          <section>
+            <div class="flex items-center gap-2 px-2 mb-1">
+              <g.icon class={`w-3 h-3 ${g.accent}`} />
+              <span class={`text-[10px] font-bold uppercase tracking-wider ${g.accent}`}>{g.label}</span>
+              <span class="text-[9px] text-slate-400 dark:text-slate-600">{entries.length}</span>
+              <div class="h-px flex-1 bg-black/6 dark:bg-white/6"></div>
+              <button
+                onclick={() => resetGroup(entries)}
+                class="text-[9px] font-bold text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer"
+              >
+                Reset {entries.length}
+              </button>
+            </div>
+            <p class="text-[9px] text-slate-400 dark:text-slate-600 px-2 mb-1.5">{g.blurb}</p>
+
+            <div class="space-y-0.5 px-1">
+              {#each entries as entry (entry.name)}
+                {#if entry.token}
+                  {@const dom = domainOf(entry.name)}
+                  <div>
+                    <button
+                      onclick={() => onSelectDomain(dom)}
+                      class="ml-3.5 mb-px text-[8px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-600 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer"
+                      title={`Open in ${DOMAIN_LABEL[dom] ?? dom}`}
+                    >
+                      {DOMAIN_LABEL[dom] ?? dom} →
+                    </button>
+                    <TokenRow
+                      token={entry.token}
+                      overrideValue={overrides[entry.name]}
+                      dependentsCount={graph.usedBy[entry.name]?.length ?? 0}
+                      onSet={(v) => onSet(entry.name, v)}
+                      onReset={() => onReset(entry.name)}
+                    />
+                  </div>
+                {:else}
+                  <!-- Unknown key: no catalogue token, so a minimal row. -->
+                  <div class="px-3 py-2 rounded-lg bg-black/4 dark:bg-white/4 flex items-center gap-2">
+                    <div class="min-w-0 flex-1">
+                      <div class="text-[10px] font-mono text-slate-600 dark:text-slate-400 truncate" title={entry.name}>
+                        {entry.name.replace("--sf-", "")}
+                      </div>
+                      <div class="text-[9px] font-mono text-slate-400 dark:text-slate-600 truncate" title={entry.value}>
+                        {entry.value}
+                      </div>
+                    </div>
+                    <button
+                      onclick={() => onReset(entry.name)}
+                      class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer shrink-0"
+                    >
+                      remove
+                    </button>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          </section>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+</div>
diff --git a/configurator/src/components/shell/SidebarNav.svelte b/configurator/src/components/shell/SidebarNav.svelte
index 576983121..1e300b5c1 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,
+    Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
   } from '@lucide/svelte';
 
   let { activeId, onSelect, overridesByDomain = {} }: {
@@ -23,6 +23,7 @@
     { 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" },
@@ -31,6 +32,12 @@
 
   let tokens = $derived(NAV_ITEMS.filter((i) => i.group === "tokens"));
   let tools = $derived(NAV_ITEMS.filter((i) => i.group === "tools"));
+
+  // 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.
+  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">
@@ -64,7 +71,7 @@
   <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 = overridesByDomain[item.id] || 0}
+      {@const count = countFor(item.id)}
       {@const Icon = item.icon}
       <button
         onclick={() => onSelect(item.id)}
diff --git a/configurator/src/lib/tokenModel.ts b/configurator/src/lib/tokenModel.ts
index 5fe1f579e..86de1b38f 100644
--- a/configurator/src/lib/tokenModel.ts
+++ b/configurator/src/lib/tokenModel.ts
@@ -69,8 +69,19 @@ export function referencesIn(value: string | null | undefined): string[] {
 /** The single token a pure `var(--sf-x)` value points at, else null. */
 export function pureVarTarget(value: string | null | undefined): string | null {
   if (!value || !hasBalancedParens(value)) return null;
-  const m = PURE_VAR_RE.exec(value.trim());
-  return m ? m[1] : null;
+  const v = value.trim();
+  const m = PURE_VAR_RE.exec(v);
+  if (!m) return null;
+  // PURE_VAR_RE's fallback group is greedy, so it can span past the var()'s own
+  // closing paren (e.g. `var(--sf-a, x) var(--sf-b)` matches with target --sf-a).
+  // A genuine single-var alias closes the leading `var(` at the very end of the
+  // string; if the first paren-depth-0 close is not the last char, it's compound.
+  let depth = 0;
+  for (let i = 0; i < v.length; i++) {
+    if (v[i] === "(") depth += 1;
+    else if (v[i] === ")" && --depth === 0) return i === v.length - 1 ? m[1] : null;
+  }
+  return m[1];
 }
 
 /**
@@ -282,6 +293,27 @@ const CSS_BREAKING_RE = /[;{}]|\/\*|\*\//;
 const CONTROL_CHAR_RE = /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/;
 const MAX_CODEC_BYTES = 65_535;
 
+/**
+ * Whether a value can be safely written into a `--token: value;` declaration
+ * and survive export. This is the authoritative "unsafe → will be dropped"
+ * gate — it mirrors exactly what codec.ts / themeFile.ts refuse (empty values
+ * and CSS-breaking characters), so a value flagged unsafe here is genuinely the
+ * value that would be stripped on export. Deliberately does NOT judge semantic
+ * correctness (e.g. "notacolor" for a colour token): that renders as nothing
+ * but is not *dropped*, so it is a softer signal handled by validateTokenValue.
+ */
+export function isStructurallySafe(value: string): boolean {
+  if (typeof value !== "string") return false;
+  const v = value.trim();
+  if (v === "") return false;
+  // Mirror every rejection the export path (codec.ts / themeFile.ts) enforces:
+  // CSS-breaking characters, control characters, and the share-link byte limit.
+  // Anything that would be dropped or refused on export must read as unsafe here
+  // so the Changes panel never labels it Custom/Detached/Re-linked.
+  if (CSS_BREAKING_RE.test(v) || CONTROL_CHAR_RE.test(v)) return false;
+  return new TextEncoder().encode(v).byteLength <= MAX_CODEC_BYTES;
+}
+
 /** Map a token's `syntax` metadata to a real CSS property we can probe. */
 function probePropertyForSyntax(syntax: string | null | undefined): string | null {
   const s = (syntax ?? "").toLowerCase();
@@ -289,8 +321,10 @@ function probePropertyForSyntax(syntax: string | null | undefined): string | nul
   if (s.includes("<color>")) return "color";
   if (s.includes("<length>") || s.includes("<length-percentage>")) return "width";
   if (s.includes("<percentage>")) return "width";
-  // z-index also accepts `auto`, which is not part of CSS <integer>; reject
-  // that keyword explicitly. Opacity preserves fractional <number> support.
+  // <integer> is integer-only, so probe z-index; <number> allows fractionals,
+  // so probe opacity (z-index would reject "1.4"). z-index also accepts `auto`,
+  // which is not valid <integer>/<number> — validateTokenValue rejects that
+  // keyword explicitly below.
   if (s.includes("<integer>")) return "z-index";
   if (s.includes("<number>")) return "opacity";
   if (s.includes("<time>")) return "transition-duration";
@@ -299,14 +333,15 @@ function probePropertyForSyntax(syntax: string | null | undefined): string | nul
 }
 
 /**
- * Best-effort validation of an override value for a token. Always applies the
- * structural checks (non-empty, no CSS-breaking characters). In a browser it
- * additionally probes `CSS.supports()` against a property matching the token's
- * declared syntax; under Node/jsdom it stops at the structural checks.
+ * Best-effort *semantic* validation of an override value for a token. Applies
+ * the structural safety check first, then — in a browser, for non-expression
+ * values — probes `CSS.supports()` against a property matching the token's
+ * declared syntax. Under Node/jsdom it stops at the structural check.
  *
- * Values containing `var()`/`calc()`/`clamp()`/`env()` are never syntax-probed
- * — they resolve at compute time and `CSS.supports` can't judge them — but they
- * still must pass the structural checks.
+ * This is a softer, advisory signal (used by the value editor to warn "this
+ * doesn't look like a valid <color>"); it is NOT what decides the `invalid`
+ * token state, which uses {@link isStructurallySafe} so the "will be dropped on
+ * export" copy stays truthful.
  */
 export function validateTokenValue(token: SlashedToken, value: string): ValidationResult {
   if (typeof value !== "string") return { valid: false, reason: "not a string" };
@@ -361,7 +396,9 @@ export type TokenState = "default" | "custom" | "relinked" | "detached" | "inval
 export function tokenState(token: SlashedToken, overrides: Record<string, string>): TokenState {
   const ov = overrides[token.name];
   if (ov === undefined) return "default";
-  if (!validateTokenValue(token, ov).valid) return "invalid";
+  const syntax = (token.syntax ?? "").toLowerCase();
+  const numericAuto = (syntax.includes("<number>") || syntax.includes("<integer>")) && ov.trim().toLowerCase() === "auto";
+  if (!isStructurallySafe(ov) || !hasBalancedParens(ov) || numericAuto) return "invalid";
   if (pureVarTarget(ov)) return "relinked";
   const role = roleOf(token);
   if (role === "output" || role === "alias" || isGeneratedScaleStep(token.name)) {
@@ -386,3 +423,73 @@ export const STATE_LABEL: Record<TokenState, string> = {
 export function inheritsByDefault(token: SlashedToken): boolean {
   return aliasTargetOf(token) !== null || referencesIn(token.value).length > 0;
 }
+
+// ---------------------------------------------------------------------------
+// Change summary — the model behind the Changes panel
+// ---------------------------------------------------------------------------
+
+/** A single active override, classified by its consequence. */
+export interface ChangeEntry {
+  name: string;
+  /** The catalogue token, or null when the override key isn't a known token. */
+  token: SlashedToken | null;
+  /** The override value currently applied. */
+  value: string;
+  /** How this override relates to the framework default. */
+  state: TokenState | "unknown";
+}
+
+/**
+ * All active overrides grouped by *consequence* rather than by panel — the
+ * organising idea of the Changes panel. `detached` and `invalid` are the ones a
+ * user most needs to see (they silently disconnect a token from the system or
+ * can't be applied), so they lead; `unknown` collects override keys that aren't
+ * tokens in this framework build (e.g. imported from a newer/older version).
+ */
+export interface ChangeSummary {
+  invalid: ChangeEntry[];
+  detached: ChangeEntry[];
+  relinked: ChangeEntry[];
+  custom: ChangeEntry[];
+  unknown: ChangeEntry[];
+  total: number;
+}
+
+const EMPTY_GROUPS = (): Omit<ChangeSummary, "total"> => ({
+  invalid: [], detached: [], relinked: [], custom: [], unknown: [],
+});
+
+/**
+ * Classify every active override into consequence buckets. Entries within a
+ * bucket are sorted by name for stable, diff-friendly rendering.
+ */
+export function summarizeChanges(
+  tokens: SlashedToken[],
+  overrides: Record<string, string>,
+): ChangeSummary {
+  const byName = new Map(tokens.map((t) => [t.name, t]));
+  const groups = EMPTY_GROUPS();
+
+  for (const [name, value] of Object.entries(overrides)) {
+    const token = byName.get(name) ?? null;
+    if (!token) {
+      groups.unknown.push({ name, token: null, value, state: "unknown" });
+      continue;
+    }
+    const state = tokenState(token, overrides);
+    const entry: ChangeEntry = { name, token, value, state };
+    // A token in its default state can't be an override; guard anyway.
+    if (state === "default") continue;
+    groups[state].push(entry);
+  }
+
+  for (const key of Object.keys(groups) as (keyof typeof groups)[]) {
+    groups[key].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  const total =
+    groups.invalid.length + groups.detached.length + groups.relinked.length +
+    groups.custom.length + groups.unknown.length;
+
+  return { ...groups, total };
+}
diff --git a/configurator/tests/tokenModel.test.ts b/configurator/tests/tokenModel.test.ts
index ca230d3b9..f7fae9e58 100644
--- a/configurator/tests/tokenModel.test.ts
+++ b/configurator/tests/tokenModel.test.ts
@@ -20,8 +20,10 @@ import {
   scaleShadows,
   isGeneratedScaleStep,
   validateTokenValue,
+  isStructurallySafe,
   tokenState,
   inheritsByDefault,
+  summarizeChanges,
   SCALE_FAMILIES,
 } from '../src/lib/tokenModel';
 import type { SlashedToken } from '../src/types';
@@ -62,6 +64,14 @@ describe('pureVarTarget', () => {
     expect(pureVarTarget('var(--sf-space-m, 1rem))')).toBeNull();
     expect(pureVarTarget('1rem')).toBeNull();
   });
+  test('rejects a var() with a fallback followed by more content', () => {
+    // The fallback group is greedy; it must not span past the var()'s own `)`.
+    expect(pureVarTarget('var(--sf-a, red) var(--sf-b)')).toBeNull();
+    expect(pureVarTarget('var(--sf-a, red) solid')).toBeNull();
+  });
+  test('accepts a var() whose fallback is itself a function', () => {
+    expect(pureVarTarget('var(--sf-a, calc(1rem + 2px))')).toBe('--sf-a');
+  });
 });
 
 describe('aliasTargetOf', () => {
@@ -181,6 +191,24 @@ describe('validateTokenValue', () => {
   });
 });
 
+describe('isStructurallySafe (the export-safety gate behind tokenState invalid)', () => {
+  test('rejects only what export would actually drop', () => {
+    expect(isStructurallySafe('')).toBe(false);
+    expect(isStructurallySafe('   ')).toBe(false);
+    expect(isStructurallySafe('1rem; }')).toBe(false);
+    expect(isStructurallySafe('red /* x */')).toBe(false);
+    // Control characters and oversized values are dropped/refused on export too.
+    expect(isStructurallySafe('red\u0007')).toBe(false);
+    expect(isStructurallySafe('a'.repeat(65_536))).toBe(false);
+  });
+  test('accepts safe values regardless of semantic oddness', () => {
+    // A fractional number, an odd colour, an expression — none are *dropped*.
+    expect(isStructurallySafe('1.1')).toBe(true);
+    expect(isStructurallySafe('notacolor')).toBe(true);
+    expect(isStructurallySafe('clamp(1rem, 2vw, 3rem)')).toBe(true);
+  });
+});
+
 describe('tokenState', () => {
   const source = tok('--sf-space-base-min', { value: '1', role: 'knob' });
   const alias = tok('--sf-heading-font', { value: 'var(--sf-body-font)', role: 'consumption' });
@@ -205,9 +233,14 @@ describe('tokenState', () => {
   test('concrete override on a generated scale step → detached', () => {
     expect(tokenState(step, { '--sf-radius-m': '10px' })).toBe('detached');
   });
-  test('invalid value wins over everything', () => {
+  test('only structurally-unsafe or malformed values are invalid', () => {
     expect(tokenState(source, { '--sf-space-base-min': '1; }' })).toBe('invalid');
+    // A fractional number for a <number> source remains a valid custom value.
+    expect(tokenState(source, { '--sf-space-base-min': '1.1' })).toBe('custom');
     expect(tokenState(source, { '--sf-space-base-min': 'var(--sf-space-m, 1rem))' })).toBe('invalid');
+    // Control characters and oversized values are dropped/refused on export.
+    expect(tokenState(source, { '--sf-space-base-min': '1\u0007' })).toBe('invalid');
+    expect(tokenState(source, { '--sf-space-base-min': 'a'.repeat(65_536) })).toBe('invalid');
   });
 });
 
@@ -221,6 +254,43 @@ describe('inheritsByDefault', () => {
   });
 });
 
+describe('summarizeChanges', () => {
+  const catalogue: SlashedToken[] = [
+    tok('--sf-space-base-min', { value: '1', role: 'knob' }),      // source
+    tok('--sf-heading-font', { value: 'var(--sf-body-font)', role: 'consumption' }), // alias
+    tok('--sf-radius-m', { value: '8px', role: 'knob' }),          // generated step
+    tok('--sf-body-font', { value: 'system-ui', role: 'knob' }),   // source
+  ];
+
+  test('buckets each override by consequence and counts the total', () => {
+    const s = summarizeChanges(catalogue, {
+      '--sf-space-base-min': '1.1',                 // custom
+      '--sf-heading-font': 'Georgia',               // detached (alias frozen)
+      '--sf-radius-m': '10px',                       // detached (scale step)
+      '--sf-body-font': 'var(--sf-heading-font)',    // relinked
+      '--sf-space-base-min-typo': '9',               // unknown (not a token)
+      '--sf-body-font-bad': '1; }',                  // unknown key, ignored-by-name
+    });
+    expect(s.custom.map((e) => e.name)).toEqual(['--sf-space-base-min']);
+    expect(s.detached.map((e) => e.name)).toEqual(['--sf-heading-font', '--sf-radius-m']);
+    expect(s.relinked.map((e) => e.name)).toEqual(['--sf-body-font']);
+    expect(s.unknown.map((e) => e.name)).toEqual(['--sf-body-font-bad', '--sf-space-base-min-typo']);
+    expect(s.total).toBe(6);
+  });
+
+  test('an invalid value lands in the invalid bucket', () => {
+    const s = summarizeChanges(catalogue, { '--sf-space-base-min': '1; }' });
+    expect(s.invalid.map((e) => e.name)).toEqual(['--sf-space-base-min']);
+    expect(s.total).toBe(1);
+  });
+
+  test('no overrides → empty summary', () => {
+    const s = summarizeChanges(catalogue, {});
+    expect(s.total).toBe(0);
+    expect(s.detached).toEqual([]);
+  });
+});
+
 // --- Real catalogue: the model must survive every shipping token ------------
 describe('real baked catalogue', () => {
   const tokens = ((apiIndex as ApiIndex).tokens ?? []) as SlashedToken[];