From f1d4a28e9d8d7019c35ea73cebf245e055f8b917 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 20:00:56 +0000
Subject: [PATCH 1/7] fix(configurator): live var() previews everywhere;
 unified per-type tabs incl. display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar previews computed their CSS from parseNum(override) with hardcoded
fallbacks, so they broke whenever a control stored a var() reference (the
default mode for scale-backed dropdowns) and showed panel guesses instead of
framework defaults. The panel document already loads the framework token CSS
and receives live override injection, so previews now reference the live
tokens directly and can never disagree with reality:

- Borders: media radius (also fixes its wrong "radius-m" default — the
  framework default is 0), focus ring, radius steps, border width bars,
  border sample.
- Effects: blur, opacity rows, scrollbar strip.
- Misc: touch target, focus ring.
- Macros: scrim, surface-bg composite, flow gap.

Typography — one system for text and display, as requested:
- Per-type styles now covers Body, H1–H6 AND D·S/D·M/D·L with the same tabs
  and controls; display tabs edit --sf-display-*-line-height and the shared
  --sf-font-weight-display, with Size pointing at the modular-scale controls.
- The live sample and the Scale preview render from the real tokens (var())
  with DOM-measured size labels (new TypeSpecimenRow) — no caps, no approximations.
- Display type section slims down to scale-level controls; per-size sliders
  and the duplicate Display weight grid moved into the tabs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 .../components/inputs/TypeSpecimenRow.svelte  |  39 ++++
 .../src/components/panels/BordersPanel.svelte |  23 +--
 .../src/components/panels/EffectsPanel.svelte |  14 +-
 .../src/components/panels/MacrosPanel.svelte  |   6 +-
 .../src/components/panels/MiscPanel.svelte    |   8 +-
 .../components/panels/TypographyPanel.svelte  | 184 +++++++-----------
 6 files changed, 134 insertions(+), 140 deletions(-)
 create mode 100644 configurator/src/components/inputs/TypeSpecimenRow.svelte

diff --git a/configurator/src/components/inputs/TypeSpecimenRow.svelte b/configurator/src/components/inputs/TypeSpecimenRow.svelte
new file mode 100644
index 00000000..f7b38eb2
--- /dev/null
+++ b/configurator/src/components/inputs/TypeSpecimenRow.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  /**
+   * TypeSpecimenRow — one row of the typographic scale preview. The "Aa"
+   * renders at the token's real, live font-size (`var(--sf-…)` resolved in
+   * this document, which loads the framework tokens plus live overrides), and
+   * the label reports the actually rendered size measured from the DOM — the
+   * preview can never disagree with reality.
+   */
+  let { label, varName, family = "--sf-font-body" }: {
+    label: string;
+    varName: string;
+    family?: string;
+  } = $props();
+
+  let el = $state<HTMLElement | null>(null);
+  let px = $state(0);
+
+  $effect(() => {
+    if (!el) return;
+    const node = el;
+    const measure = () => { px = parseFloat(getComputedStyle(node).fontSize) || 0; };
+    measure();
+    // A font-size change resizes the span, so ResizeObserver re-measures on
+    // every token/override change and on viewport-driven fluid changes alike.
+    const ro = new ResizeObserver(measure);
+    ro.observe(node);
+    return () => ro.disconnect();
+  });
+</script>
+
+<div class="flex items-baseline gap-2">
+  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
+  <span
+    bind:this={el}
+    class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
+    style={`font-size: var(${varName}); font-family: var(${family})`}
+  >Aa</span>
+  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{px ? `${(px / 16).toFixed(2)}rem` : ""}</span>
+</div>
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index acb20af2..0c1e54b7 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -14,7 +14,6 @@
 
   const BORDER_STYLES = ["solid", "dashed", "dotted"];
   const RADIUS_STEPS = ["xs", "s", "m", "l", "xl", "2xl", "full"];
-  const BASE_RADII: Record<string, number> = { xs: 2, s: 4, m: 8, l: 12, xl: 16, "2xl": 24, full: 9999 };
 
   const RADIUS_FINE: Array<{ step: string; name: string; default: number; max: number; step_size: number; rawDefault: string }> = [
     { step: "xs",  name: "--sf-radius-xs",  default: 2,  max: 16, step_size: 0.5, rawDefault: "calc(2px * var(--sf-radius-scale))"  },
@@ -50,7 +49,6 @@
     return isNaN(v) ? fallback : v;
   }
 
-  let radiusScale  = $derived(parseNum(overrides["--sf-radius-scale"], 1));
   let borderScale  = $derived(parseNum(overrides["--sf-border-scale"], 1));
   let focusWidth   = $derived(parseNum(overrides["--sf-focus-ring-width"], 2, "px"));
   let focusOffset  = $derived(parseNum(overrides["--sf-focus-ring-offset"], 2, "px"));
@@ -130,14 +128,11 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [1, 2, 3, 4] as base (base)}
           <div class="flex items-center gap-3">
-            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-10">{base}px →</span>
+            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-14">width-{base}</span>
             <div
               class="flex-1 bg-indigo-400/50 rounded"
-              style={`height: ${Math.max(base * borderScale, 0.5)}px`}
+              style={`height: max(var(--sf-border-width-${base}, ${base}px), 0.5px)`}
             ></div>
-            <span class="text-[9px] font-mono text-slate-500 w-10 text-right">
-              {(base * borderScale).toFixed(1)}px
-            </span>
           </div>
         {/each}
       </div>
@@ -178,11 +173,11 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center gap-3">
         <div
           class="px-4 py-2 rounded-lg text-[11px] text-slate-700 dark:text-slate-300 bg-black/4 dark:bg-white/4"
-          style={`border: ${Math.max(borderScale, 0.5)}px ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
+          style={`border: var(--sf-border-width-1, 1px) ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
         >
           Border sample
         </div>
-        <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">width-1 · {borderStyle}</span>
       </div>
   </Section>
 
@@ -258,7 +253,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
-          style={`outline: ${focusWidth}px solid ${focusRingColor || "oklch(0.7 0.2 235)"}; outline-offset: ${focusOffset}px`}
+          style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
         >
           Focus preview
         </div>
@@ -316,12 +311,10 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4">
         <div class="flex gap-3 flex-wrap">
           {#each RADIUS_STEPS as step (step)}
-            {@const base = BASE_RADII[step] ?? 6}
-            {@const computed = step === "full" ? 9999 : base * radiusScale}
             <div class="flex flex-col items-center gap-1">
               <div
                 class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"
-                style={`border-radius: ${Math.min(computed, 9999)}px`}
+                style={`border-radius: var(--sf-radius-${step})`}
               ></div>
               <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{step}</span>
             </div>
@@ -345,7 +338,7 @@
         overridden={"--sf-media-radius" in overrides}
         onChange={(v) => onSet("--sf-media-radius", `${v}rem`)}
         onReset={() => onReset("--sf-media-radius")}
-        rawDefault="var(--sf-radius-m)"
+        rawDefault="0"
         variableOptions={RADIUS_SCALE}
         currentRaw={overrides["--sf-media-radius"]}
         onRawSet={(v) => onSet("--sf-media-radius", v)}
@@ -353,7 +346,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="w-16 h-16 bg-indigo-500/40 border border-indigo-500/30"
-          style={`border-radius: ${mediaRadius}rem`}
+          style={`border-radius: var(--sf-media-radius, 0)`}
         ></div>
       </div>
   </Section>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index 27d19086..58d5487c 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -59,7 +59,7 @@
         </div>
         <div
           class="relative z-10 w-20 h-12 rounded-lg border border-black/20 dark:border-white/20 bg-black/10 dark:bg-white/10 flex items-center justify-center"
-          style={`backdrop-filter: blur(${blur}px)`}
+          style={`backdrop-filter: blur(var(--sf-blur, 12px))`}
         >
           <span class="text-[9px] font-mono text-slate-900/70 dark:text-white/70">{blur}px</span>
         </div>
@@ -94,13 +94,13 @@
       <!-- Opacity preview -->
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [
-          { label: "muted", val: opacityMuted },
-          { label: "disabled", val: opacityDisabled },
-          { label: "pending", val: pendingOpacity },
+          { label: "muted", token: "--sf-opacity-muted", val: opacityMuted },
+          { label: "disabled", token: "--sf-opacity-disabled", val: opacityDisabled },
+          { label: "pending", token: "--sf-state-pending-opacity", val: pendingOpacity },
         ] as row (row.label)}
           <div class="flex items-center gap-3">
             <span class="text-[9px] text-slate-400 dark:text-slate-600 w-14">{row.label}</span>
-            <div class="flex-1 h-4 bg-indigo-400 rounded" style={`opacity: ${row.val}`}></div>
+            <div class="flex-1 h-4 bg-indigo-400 rounded" style={`opacity: var(${row.token}, ${row.val})`}></div>
             <span class="text-[9px] font-mono text-slate-500 w-8">{row.val}</span>
           </div>
         {/each}
@@ -129,8 +129,8 @@
       {/each}
       <!-- Scrollbar strip preview -->
       <div class="flex items-center gap-2 p-2 rounded-lg bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
-        <div class="w-16 h-3 rounded-full" style:background={scrollbarTrack || "rgba(255,255,255,0.08)"}>
-          <div class="w-6 h-3 rounded-full" style:background={scrollbarThumb || "oklch(0.52 0.025 260)"}></div>
+        <div class="w-16 h-3 rounded-full" style:background={"var(--sf-scrollbar-track, rgba(255,255,255,0.08))"}>
+          <div class="w-6 h-3 rounded-full" style:background={"var(--sf-scrollbar-thumb, oklch(0.52 0.025 260))"}></div>
         </div>
         <span class="text-[9px] text-slate-400 dark:text-slate-600">Scrollbar preview</span>
       </div>
diff --git a/configurator/src/components/panels/MacrosPanel.svelte b/configurator/src/components/panels/MacrosPanel.svelte
index aa7134fa..122aeb61 100644
--- a/configurator/src/components/panels/MacrosPanel.svelte
+++ b/configurator/src/components/panels/MacrosPanel.svelte
@@ -131,7 +131,7 @@
         currentRaw={overrides["--sf-flow-space"]}
         onRawSet={(v) => onSet("--sf-flow-space", v)}
       />
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3" style={`display:flex;flex-direction:column;gap:${flowSpace}rem`}>
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3" style={`display:flex;flex-direction:column;gap:var(--sf-flow-space, 0.5rem)`}>
         {#each [0, 1, 2] as i (i)}
           <div class="h-2.5 rounded bg-indigo-500/40" style={`width:${90 - i * 12}%`}></div>
         {/each}
@@ -228,7 +228,7 @@
       </div>
       <div class="relative h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
         style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)">
-        <div class="absolute inset-0" style={`background:linear-gradient(${scrimDir}, ${scrimColor}, transparent)`}></div>
+        <div class="absolute inset-0" style={`background:linear-gradient(var(--sf-scrim-direction, to top), var(--sf-scrim-color, oklch(0 0 0 / 0.55)), transparent)`}></div>
         <span class="relative text-[11px] font-bold text-white">Caption over scrim</span>
       </div>
       <RawTokenRow
@@ -366,7 +366,7 @@
 
       <div
         class="h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
-        style={`background-color:${surfaceBgColor};background-image:${surfaceBgOverlay}, ${surfaceBgImage};background-size:${surfaceBgSize};background-position:${surfaceBgPosition};background-repeat:${surfaceBgRepeat};background-attachment:${surfaceBgAttachment};animation:${surfaceBgAnimation}`}
+        style={`background-color:var(--sf-surface-bg-color, transparent);background-image:var(--sf-surface-bg-overlay, none), var(--sf-surface-bg-image, none);background-size:var(--sf-surface-bg-size, cover);background-position:var(--sf-surface-bg-position, center);background-repeat:var(--sf-surface-bg-repeat, no-repeat);background-attachment:var(--sf-surface-bg-attachment, scroll);animation:var(--sf-surface-bg-animation, none)`}
       >
         <span class="text-[11px] font-bold text-white mix-blend-difference">.sf-surface-bg preview</span>
       </div>
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index 424f14d1..e0c66989 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -88,10 +88,8 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-center gap-3">
         <div
           class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-600/70 dark:text-indigo-400/70 shrink-0"
-          style={`width: ${touchTarget}px; height: ${touchTarget}px`}
-        >
-          {touchTarget}px
-        </div>
+          style={`width: var(--sf-touch-target, 2.75rem); height: var(--sf-touch-target, 2.75rem)`}
+        ></div>
         <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
       </div>
   </Section>
@@ -240,7 +238,7 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
           class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
-          style={`outline: 2px ${focusRingStyle} ${overrides["--sf-focus-ring-color"] || "oklch(0.7 0.2 235)"}; outline-offset: 2px`}
+          style={`outline: var(--sf-focus-ring-width, 2px) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color, oklch(0.7 0.2 235)); outline-offset: var(--sf-focus-ring-offset, 2px)`}
         >
           Focus ring · {focusRingStyle}
         </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index c47741be..6655b4c1 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -6,6 +6,7 @@
   import RangeWithNumber from '../inputs/RangeWithNumber.svelte';
   import ClampField from '../inputs/ClampField.svelte';
   import Section from '../inputs/Section.svelte';
+  import TypeSpecimenRow from '../inputs/TypeSpecimenRow.svelte';
   import { themeState } from '../../lib/theme.svelte';
 
   // <option> only reliably accepts a background via inline style (no dark:
@@ -128,22 +129,38 @@
   const TRACKING_OPTIONS = TRACKING_TOKENS.map((t) => ({ label: t.label, value: `var(${t.token})`, em: t.default }));
 
   // level → { tokens + framework defaults }
-  const TYPE_LEVELS = [
-    { id: "body", label: "Body", size: "--sf-body-font-size", lh: "--sf-body-line-height", wt: "--sf-body-font-weight", ls: null,
+  // `sizeVar` — the token whose live var() the sample renders at (the size
+  // token itself for body/h levels; the generated display size for display).
+  // Display levels: size is generated by the modular scale (no size select);
+  // weight is the shared --sf-font-weight-display role token.
+  type TypeLevel = {
+    id: string; label: string; size: string | null; sizeVar: string;
+    lh: string; wt: string; ls: string | null;
+    dSize: string; dLh: string; dWt: string; dLs: string;
+    sharedWeight?: boolean;
+  };
+  const TYPE_LEVELS: TypeLevel[] = [
+    { id: "body", label: "Body", size: "--sf-body-font-size", sizeVar: "--sf-body-font-size", lh: "--sf-body-line-height", wt: "--sf-body-font-weight", ls: null,
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "400", dLs: "" },
-    { id: "h1", label: "H1", size: "--sf-h1-size", lh: "--sf-h1-line-height", wt: "--sf-h1-font-weight", ls: "--sf-h1-letter-spacing",
+    { id: "h1", label: "H1", size: "--sf-h1-size", sizeVar: "--sf-h1-size", lh: "--sf-h1-line-height", wt: "--sf-h1-font-weight", ls: "--sf-h1-letter-spacing",
       dSize: "var(--sf-text-4xl)", dLh: "var(--sf-leading-tight)", dWt: "600", dLs: "var(--sf-tracking-tight)" },
-    { id: "h2", label: "H2", size: "--sf-h2-size", lh: "--sf-h2-line-height", wt: "--sf-h2-font-weight", ls: "--sf-h2-letter-spacing",
+    { id: "h2", label: "H2", size: "--sf-h2-size", sizeVar: "--sf-h2-size", lh: "--sf-h2-line-height", wt: "--sf-h2-font-weight", ls: "--sf-h2-letter-spacing",
       dSize: "var(--sf-text-3xl)", dLh: "var(--sf-leading-tight)", dWt: "600", dLs: "var(--sf-tracking-tight)" },
-    { id: "h3", label: "H3", size: "--sf-h3-size", lh: "--sf-h3-line-height", wt: "--sf-h3-font-weight", ls: "--sf-h3-letter-spacing",
+    { id: "h3", label: "H3", size: "--sf-h3-size", sizeVar: "--sf-h3-size", lh: "--sf-h3-line-height", wt: "--sf-h3-font-weight", ls: "--sf-h3-letter-spacing",
       dSize: "var(--sf-text-2xl)", dLh: "var(--sf-leading-snug)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h4", label: "H4", size: "--sf-h4-size", lh: "--sf-h4-line-height", wt: "--sf-h4-font-weight", ls: "--sf-h4-letter-spacing",
+    { id: "h4", label: "H4", size: "--sf-h4-size", sizeVar: "--sf-h4-size", lh: "--sf-h4-line-height", wt: "--sf-h4-font-weight", ls: "--sf-h4-letter-spacing",
       dSize: "var(--sf-text-xl)", dLh: "var(--sf-leading-snug)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h5", label: "H5", size: "--sf-h5-size", lh: "--sf-h5-line-height", wt: "--sf-h5-font-weight", ls: "--sf-h5-letter-spacing",
+    { id: "h5", label: "H5", size: "--sf-h5-size", sizeVar: "--sf-h5-size", lh: "--sf-h5-line-height", wt: "--sf-h5-font-weight", ls: "--sf-h5-letter-spacing",
       dSize: "var(--sf-text-l)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h6", label: "H6", size: "--sf-h6-size", lh: "--sf-h6-line-height", wt: "--sf-h6-font-weight", ls: "--sf-h6-letter-spacing",
+    { id: "h6", label: "H6", size: "--sf-h6-size", sizeVar: "--sf-h6-size", lh: "--sf-h6-line-height", wt: "--sf-h6-font-weight", ls: "--sf-h6-letter-spacing",
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-wide)" },
-  ] as const;
+    { id: "display-s", label: "D·S", size: null, sizeVar: "--sf-text-display-s", lh: "--sf-display-s-line-height", wt: "--sf-font-weight-display", ls: null,
+      dSize: "", dLh: "var(--sf-leading-tight)", dWt: "700", dLs: "", sharedWeight: true },
+    { id: "display-m", label: "D·M", size: null, sizeVar: "--sf-text-display-m", lh: "--sf-display-m-line-height", wt: "--sf-font-weight-display", ls: null,
+      dSize: "", dLh: "1.05", dWt: "700", dLs: "", sharedWeight: true },
+    { id: "display-l", label: "D·L", size: null, sizeVar: "--sf-text-display-l", lh: "--sf-display-l-line-height", wt: "--sf-font-weight-display", ls: null,
+      dSize: "", dLh: "1", dWt: "700", dLs: "", sharedWeight: true },
+  ];
 
   let activeLevelId = $state<string>("h1");
   let activeLevel = $derived(TYPE_LEVELS.find((l) => l.id === activeLevelId)!);
@@ -224,33 +241,6 @@
     if (!token) return;
     if (value === dflt) onReset(token); else onSet(token, value);
   }
-  // Approximate sample size (rem) for the active level's current size.
-  let sampleSize = $derived.by(() => {
-    const v = levelVal(activeLevel.size, activeLevel.dSize);
-    const opt = SIZE_OPTIONS.find((o) => o.value === v);
-    const mid = (baseMin + baseMax) / 2;
-    return Math.min((opt?.approx ?? 1) * mid * textScale, 2.4);
-  });
-  let sampleWeight = $derived.by(() => {
-    const v = levelVal(activeLevel.wt, activeLevel.dWt);
-    const n = parseInt(v);
-    return isNaN(n) ? 600 : n;
-  });
-  let sampleTracking = $derived.by(() => {
-    if (!activeLevel.ls) return 0;
-    const v = levelVal(activeLevel.ls, activeLevel.dLs);
-    const opt = TRACKING_OPTIONS.find((o) => o.value === v);
-    if (opt) return opt.em;
-    const parsed = parseFloat(v.replace("em", ""));
-    return isNaN(parsed) ? 0 : parsed;
-  });
-  let sampleLeading = $derived.by(() => {
-    const v = levelVal(activeLevel.lh, activeLevel.dLh);
-    const opt = LEADING_OPTIONS.find((o) => o.value === v);
-    if (opt) return opt.num;
-    const parsed = parseFloat(v);
-    return isNaN(parsed) ? 1.3 : parsed;
-  });
 </script>
 
 <!-- Shared weight button-grid — one markup for every role-weight token
@@ -360,10 +350,10 @@
   <!-- PER-TYPE (body + h1–h6) -->
   <Section title="Per-type styles" bind:open={showPerType}>
 
-    <!-- Level selector -->
-    <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
+    <!-- Level selector — body + h1–h6 + the three display sizes, one system -->
+    <div class="grid grid-cols-5 bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each TYPE_LEVELS as lvl (lvl.id)}
-        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
+        {@const isOv = (!!lvl.size && lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
         <button
           onclick={() => { activeLevelId = lvl.id; }}
           class={`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
@@ -376,31 +366,42 @@
       {/each}
     </div>
 
-    <!-- Live sample -->
+    <!-- Live sample — renders with the level's real tokens (var() resolved
+         against the framework CSS + live overrides loaded in this document),
+         so it can never disagree with what actually ships. -->
     <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 px-3 py-3 overflow-hidden">
       <div
         class="text-slate-900/85 dark:text-white/85 truncate"
-        style={`font-size:${sampleSize}rem; font-weight:${sampleWeight}; letter-spacing:${sampleTracking}em; line-height:${sampleLeading}; font-family:${activeLevel.id === "body" ? (currentBodyFont || "inherit") : (currentHeadingFont || currentBodyFont || "inherit")}`}
+        style={`font-size:var(${activeLevel.sizeVar}); font-weight:var(${activeLevel.wt}, ${activeLevel.dWt}); letter-spacing:${activeLevel.ls ? `var(${activeLevel.ls}, normal)` : "normal"}; line-height:var(${activeLevel.lh}, ${activeLevel.dLh}); font-family:var(${activeLevel.id === "body" ? "--sf-font-body" : "--sf-font-heading"})`}
       >The quick brown fox
       </div>
     </div>
 
     <!-- Size -->
-    <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
-      <select
-        value={levelVal(activeLevel.size, activeLevel.dSize)}
-        onchange={(e) => setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)}
-        class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
-      >
-        {#each SIZE_OPTIONS as o (o.value)}
-          <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
-        {/each}
-        {#if !SIZE_OPTIONS.some((o) => o.value === levelVal(activeLevel.size, activeLevel.dSize))}
-          <option value={levelVal(activeLevel.size, activeLevel.dSize)} style={`background:${optionBg};`}>custom</option>
-        {/if}
-      </select>
-    </div>
+    {#if activeLevel.size}
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
+        <select
+          value={levelVal(activeLevel.size, activeLevel.dSize)}
+          onchange={(e) => setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)}
+          class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+        >
+          {#each SIZE_OPTIONS as o (o.value)}
+            <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
+          {/each}
+          {#if !SIZE_OPTIONS.some((o) => o.value === levelVal(activeLevel.size, activeLevel.dSize))}
+            <option value={levelVal(activeLevel.size, activeLevel.dSize)} style={`background:${optionBg};`}>custom</option>
+          {/if}
+        </select>
+      </div>
+    {:else}
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
+        <span class="flex-1 text-[9px] text-slate-400 dark:text-slate-600 leading-snug">
+          Generated by the modular scale — adjust “Display base size” &amp; “Scale multiplier” in Display type.
+        </span>
+      </div>
+    {/if}
 
     <!-- Line height -->
     <div class="flex items-center gap-2">
@@ -421,7 +422,7 @@
 
     <!-- Weight -->
     <div>
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight{activeLevel.sharedWeight ? " — shared by all display sizes (--sf-font-weight-display)" : ""}</span>
       <div class="flex gap-1 mt-1">
         {#each WEIGHT_OPTIONS as w (w)}
           {@const cur = levelVal(activeLevel.wt, activeLevel.dWt)}
@@ -455,8 +456,8 @@
       </div>
     {/if}
 
-    <!-- Max width (heading levels only) -->
-    {#if activeLevel.id !== "body"}
+    <!-- Max width (heading levels only — no per-display max-width token) -->
+    {#if activeLevel.id.startsWith("h")}
       {@const maxWidthToken = `--sf-${activeLevel.id}-max-width`}
       <div class="flex items-center gap-2">
         <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Max width</span>
@@ -477,10 +478,11 @@
     {/if}
 
     <div class="flex justify-end">
-      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
+      {#if (!!activeLevel.size && activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
         <button
           onclick={() => {
-            const patch: Record<string, null> = { [activeLevel.size]: null, [activeLevel.lh]: null, [activeLevel.wt]: null };
+            const patch: Record<string, null> = { [activeLevel.lh]: null, [activeLevel.wt]: null };
+            if (activeLevel.size) patch[activeLevel.size] = null;
             if (activeLevel.ls) patch[activeLevel.ls] = null;
             onBulkChange(patch);
           }}
@@ -653,27 +655,11 @@
       Modular ratio is shared with the text scale (Mobile {ratioMin} → Desktop {ratioMax}) — edit it under “Modular scale”.
     </p>
 
-    <!-- Display line heights (s / m / l) -->
-    <div class="grid grid-cols-3 gap-3">
-      {#each [
-        { label: "Display S", token: "--sf-display-s-line-height", def: 1.1 },
-        { label: "Display M", token: "--sf-display-m-line-height", def: 1.05 },
-        { label: "Display L", token: "--sf-display-l-line-height", def: 1 },
-      ] as row (row.token)}
-        <div>
-          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">{row.label} line-height</div>
-          <SliderRow
-            label="" value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
-            overridden={row.token in overrides}
-            onChange={(v) => onSet(row.token, String(v))}
-            onReset={() => onReset(row.token)}
-          />
-        </div>
-      {/each}
-    </div>
+    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+      Per-size line-height and weight for D·S / D·M / D·L live in “Per-type styles”, alongside body and h1–h6.
+    </p>
 
-    <!-- Display weight -->
-    {@render weightGrid("Display", "--sf-font-weight-display", WEIGHT_DEFAULTS["--sf-font-weight-display"] ?? "700")}
+    <!-- Heading weight — role default that h1–h6 per-level weights build on -->
     {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "700")}
   </Section>
 
@@ -810,40 +796,18 @@
       <span class="text-[10px] text-slate-500">{showScalePreview ? "▲" : "▼"}</span>
     </button>
     {#if showScalePreview}
-    {@const midBase = (baseMin + baseMax) / 2}
-    {@const midDisp = (dispMin + dispMax) / 2}
-    {@const midRatio = (ratioMin + ratioMax) / 2}
-    <!-- Each "Aa" renders at its real midpoint rem size — no cap. The box
-         scrolls if the largest steps are tall so nothing is distorted. -->
+    <!-- Every "Aa" renders at its token's real, live size (var() against the
+         framework CSS + overrides in this document); labels are measured from
+         the DOM, so the preview can never lie. -->
     <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
       <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
-      {#each [...TEXT_STEPS].reverse() as { label, factor } (label)}
-        {@const size = midBase * factor * textScale}
-        <div class="flex items-baseline gap-2">
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
-          <span
-            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
-            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentBodyFont || "inherit"}`}
-          >Aa</span>
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
-        </div>
+      {#each [...TEXT_STEPS].reverse() as { label } (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-${label}`} family="--sf-font-body" />
       {/each}
 
       <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
-      {#each [
-        { label: "l", factor: midRatio * midRatio },
-        { label: "m", factor: midRatio },
-        { label: "s", factor: 1 },
-      ] as { label, factor } (label)}
-        {@const size = midDisp * factor * displayScale}
-        <div class="flex items-baseline gap-2">
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
-          <span
-            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
-            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentHeadingFont || currentBodyFont || "inherit"}`}
-          >Aa</span>
-          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
-        </div>
+      {#each ["l", "m", "s"] as label (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-display-${label}`} family="--sf-font-heading" />
       {/each}
     </div>
     {/if}

From ffe96e0297aa02b9039e10d6edac8e1b93701eaa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 20:16:08 +0000
Subject: [PATCH 2/7] refactor(configurator): reorganize typography into
 sorted, complete sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the per-size display tabs (unnecessary) and the old scattered section
split (Body text / Font weight scale / Display type / Per-type / Modular scale
/ Scale preview / Advanced typography). All controls are re-sorted by concern
into seven complete sections:

1. Fonts — families, Google loader, OpenType axes (numeric, optical sizing,
   features, variation).
2. Fluid scale — text and display generators with IDENTICAL controls: shared
   viewport range, each with the same base-size ClampField + modular-ratio
   block (display's ratio edits the same shared --sf-text-ratio-* tokens the
   framework derives display sizes from) + scale multiplier, plus the live
   DOM-measured ramp and the Advanced power knobs.
3. Line heights — leading scale, taper, display line-heights.
4. Letter spacing — the tracking scale.
5. Font weights — the base weight scale and role weights (heading, display,
   strong, interactive) in one place, all through the shared weight grid.
6. Elements — body + h1–h6 editor (size / line height / weight / tracking /
   max width) with the live token-driven sample, plus body & prose details
   (emphasis, code size, wraps, external-link marker/label).
7. Line lengths — per-step max-widths.

No tokens gained or lost — every previously editable control is still
present, just organized.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 .../components/panels/TypographyPanel.svelte  | 867 ++++++++----------
 1 file changed, 401 insertions(+), 466 deletions(-)

diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index 6655b4c1..c0952095 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -81,17 +81,7 @@
     "--sf-font-weight-interactive": "600",
   };
 
-  const TEXT_STEPS = [
-    { label: "2xs", factor: 0.64 },
-    { label: "xs",  factor: 0.75 },
-    { label: "s",   factor: 0.875 },
-    { label: "m",   factor: 1 },
-    { label: "l",   factor: 1.125 },
-    { label: "xl",  factor: 1.25 },
-    { label: "2xl", factor: 1.5 },
-    { label: "3xl", factor: 1.875 },
-    { label: "4xl", factor: 2.25 },
-  ];
+  const TEXT_STEPS = ["2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
 
   const TRACKING_TOKENS = [
     { label: "Tight",   token: "--sf-tracking-tight",   default: -0.025 },
@@ -108,58 +98,52 @@
     { label: "Relaxed", token: "--sf-leading-relaxed", default: 1.625 },
   ];
 
-  // ---- Per-type (body + h1–h6) editor data ------------------------------
+  const DISPLAY_LEADING = [
+    { label: "Display S", token: "--sf-display-s-line-height", def: 1.1 },
+    { label: "Display M", token: "--sf-display-m-line-height", def: 1.05 },
+    { label: "Display L", token: "--sf-display-l-line-height", def: 1 },
+  ];
+
+  // ---- Per-element (body + h1–h6) editor data ---------------------------
   // Size options map to the modular scale steps + display sizes (the framework
   // defaults reference these var()s, so editing stays semantic).
   const SIZE_OPTIONS = [
-    { label: "2xs", value: "var(--sf-text-2xs)", approx: 0.64 },
-    { label: "xs",  value: "var(--sf-text-xs)",  approx: 0.75 },
-    { label: "s",   value: "var(--sf-text-s)",   approx: 0.875 },
-    { label: "m",   value: "var(--sf-text-m)",   approx: 1 },
-    { label: "l",   value: "var(--sf-text-l)",   approx: 1.125 },
-    { label: "xl",  value: "var(--sf-text-xl)",  approx: 1.25 },
-    { label: "2xl", value: "var(--sf-text-2xl)", approx: 1.5 },
-    { label: "3xl", value: "var(--sf-text-3xl)", approx: 1.875 },
-    { label: "4xl", value: "var(--sf-text-4xl)", approx: 2.25 },
-    { label: "display-s", value: "var(--sf-text-display-s)", approx: 2.6 },
-    { label: "display-m", value: "var(--sf-text-display-m)", approx: 3.2 },
-    { label: "display-l", value: "var(--sf-text-display-l)", approx: 3.8 },
+    { label: "2xs", value: "var(--sf-text-2xs)" },
+    { label: "xs",  value: "var(--sf-text-xs)" },
+    { label: "s",   value: "var(--sf-text-s)" },
+    { label: "m",   value: "var(--sf-text-m)" },
+    { label: "l",   value: "var(--sf-text-l)" },
+    { label: "xl",  value: "var(--sf-text-xl)" },
+    { label: "2xl", value: "var(--sf-text-2xl)" },
+    { label: "3xl", value: "var(--sf-text-3xl)" },
+    { label: "4xl", value: "var(--sf-text-4xl)" },
+    { label: "display-s", value: "var(--sf-text-display-s)" },
+    { label: "display-m", value: "var(--sf-text-display-m)" },
+    { label: "display-l", value: "var(--sf-text-display-l)" },
   ];
   const LEADING_OPTIONS = LEADING_TOKENS.map((t) => ({ label: t.label, value: `var(${t.token})`, num: t.default }));
   const TRACKING_OPTIONS = TRACKING_TOKENS.map((t) => ({ label: t.label, value: `var(${t.token})`, em: t.default }));
 
   // level → { tokens + framework defaults }
-  // `sizeVar` — the token whose live var() the sample renders at (the size
-  // token itself for body/h levels; the generated display size for display).
-  // Display levels: size is generated by the modular scale (no size select);
-  // weight is the shared --sf-font-weight-display role token.
   type TypeLevel = {
-    id: string; label: string; size: string | null; sizeVar: string;
-    lh: string; wt: string; ls: string | null;
+    id: string; label: string; size: string; lh: string; wt: string; ls: string | null;
     dSize: string; dLh: string; dWt: string; dLs: string;
-    sharedWeight?: boolean;
   };
   const TYPE_LEVELS: TypeLevel[] = [
-    { id: "body", label: "Body", size: "--sf-body-font-size", sizeVar: "--sf-body-font-size", lh: "--sf-body-line-height", wt: "--sf-body-font-weight", ls: null,
+    { id: "body", label: "Body", size: "--sf-body-font-size", lh: "--sf-body-line-height", wt: "--sf-body-font-weight", ls: null,
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "400", dLs: "" },
-    { id: "h1", label: "H1", size: "--sf-h1-size", sizeVar: "--sf-h1-size", lh: "--sf-h1-line-height", wt: "--sf-h1-font-weight", ls: "--sf-h1-letter-spacing",
+    { id: "h1", label: "H1", size: "--sf-h1-size", lh: "--sf-h1-line-height", wt: "--sf-h1-font-weight", ls: "--sf-h1-letter-spacing",
       dSize: "var(--sf-text-4xl)", dLh: "var(--sf-leading-tight)", dWt: "600", dLs: "var(--sf-tracking-tight)" },
-    { id: "h2", label: "H2", size: "--sf-h2-size", sizeVar: "--sf-h2-size", lh: "--sf-h2-line-height", wt: "--sf-h2-font-weight", ls: "--sf-h2-letter-spacing",
+    { id: "h2", label: "H2", size: "--sf-h2-size", lh: "--sf-h2-line-height", wt: "--sf-h2-font-weight", ls: "--sf-h2-letter-spacing",
       dSize: "var(--sf-text-3xl)", dLh: "var(--sf-leading-tight)", dWt: "600", dLs: "var(--sf-tracking-tight)" },
-    { id: "h3", label: "H3", size: "--sf-h3-size", sizeVar: "--sf-h3-size", lh: "--sf-h3-line-height", wt: "--sf-h3-font-weight", ls: "--sf-h3-letter-spacing",
+    { id: "h3", label: "H3", size: "--sf-h3-size", lh: "--sf-h3-line-height", wt: "--sf-h3-font-weight", ls: "--sf-h3-letter-spacing",
       dSize: "var(--sf-text-2xl)", dLh: "var(--sf-leading-snug)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h4", label: "H4", size: "--sf-h4-size", sizeVar: "--sf-h4-size", lh: "--sf-h4-line-height", wt: "--sf-h4-font-weight", ls: "--sf-h4-letter-spacing",
+    { id: "h4", label: "H4", size: "--sf-h4-size", lh: "--sf-h4-line-height", wt: "--sf-h4-font-weight", ls: "--sf-h4-letter-spacing",
       dSize: "var(--sf-text-xl)", dLh: "var(--sf-leading-snug)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h5", label: "H5", size: "--sf-h5-size", sizeVar: "--sf-h5-size", lh: "--sf-h5-line-height", wt: "--sf-h5-font-weight", ls: "--sf-h5-letter-spacing",
+    { id: "h5", label: "H5", size: "--sf-h5-size", lh: "--sf-h5-line-height", wt: "--sf-h5-font-weight", ls: "--sf-h5-letter-spacing",
       dSize: "var(--sf-text-l)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-normal)" },
-    { id: "h6", label: "H6", size: "--sf-h6-size", sizeVar: "--sf-h6-size", lh: "--sf-h6-line-height", wt: "--sf-h6-font-weight", ls: "--sf-h6-letter-spacing",
+    { id: "h6", label: "H6", size: "--sf-h6-size", lh: "--sf-h6-line-height", wt: "--sf-h6-font-weight", ls: "--sf-h6-letter-spacing",
       dSize: "var(--sf-text-m)", dLh: "var(--sf-leading-normal)", dWt: "600", dLs: "var(--sf-tracking-wide)" },
-    { id: "display-s", label: "D·S", size: null, sizeVar: "--sf-text-display-s", lh: "--sf-display-s-line-height", wt: "--sf-font-weight-display", ls: null,
-      dSize: "", dLh: "var(--sf-leading-tight)", dWt: "700", dLs: "", sharedWeight: true },
-    { id: "display-m", label: "D·M", size: null, sizeVar: "--sf-text-display-m", lh: "--sf-display-m-line-height", wt: "--sf-font-weight-display", ls: null,
-      dSize: "", dLh: "1.05", dWt: "700", dLs: "", sharedWeight: true },
-    { id: "display-l", label: "D·L", size: null, sizeVar: "--sf-text-display-l", lh: "--sf-display-l-line-height", wt: "--sf-font-weight-display", ls: null,
-      dSize: "", dLh: "1", dWt: "700", dLs: "", sharedWeight: true },
   ];
 
   let activeLevelId = $state<string>("h1");
@@ -178,23 +162,23 @@
   let baseMax   = $derived(num("--sf-text-base-max", 1.25));
   let dispMin   = $derived(num("--sf-text-display-base-min", 2.4));
   let dispMax   = $derived(num("--sf-text-display-base-max", 3));
-  let taper        = $derived(num("--sf-leading-taper", 0));
+  let taper     = $derived(num("--sf-leading-taper", 0));
   let textScale    = $derived(num("--sf-text-scale", 1));
   let displayScale = $derived(num("--sf-text-display-scale", 1));
   // Shared fluid viewport endpoints (rem, unitless). Min = mobile, max = desktop.
   let vwMin     = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax     = $derived(num("--sf-fluid-max-vw", 90));
 
-  let showFontFamilies  = $state(false);
-  let showPerType       = $state(false);
-  let showBodyText      = $state(false);
-  let showDisplayType   = $state(false);
-  let showModularScale  = $state(false);
+  // Sorted section toggles — fonts → scale → rhythm → tracking → weights →
+  // elements → measures. Every control lives in exactly one of these.
+  let showFonts       = $state(false);
+  let showScale       = $state(false);
+  let showLineHeights = $state(false);
+  let showTracking    = $state(false);
+  let showWeights     = $state(false);
+  let showElements    = $state(false);
+  let showLineLengths = $state(false);
   let showScaleAdvanced = $state(false);
-  let showScalePreview  = $state(false);
-  let showAdvancedType  = $state(false);
-  let showLineLengths   = $state(false);
-  let showFontWeights   = $state(false);
 
   let currentBodyFont    = $derived(overrides["--sf-font-body"] ?? "");
   let currentHeadingFont = $derived(overrides["--sf-font-heading"] ?? "");
@@ -232,7 +216,7 @@
     onSet(token, `'${fontName}', sans-serif`);
   }
 
-  // Per-type helpers
+  // Per-element helpers
   function levelVal(token: string | null, dflt: string): string {
     if (!token) return dflt;
     return overrides[token] ?? dflt;
@@ -243,14 +227,14 @@
   }
 </script>
 
-<!-- Shared weight button-grid — one markup for every role-weight token
-     (body-strong, interactive, display, heading). Clicking the default resets. -->
+<!-- Shared weight button-grid — one markup for every weight token (base scale
+     steps and role weights alike). Clicking the default resets. -->
 {#snippet weightGrid(label: string, tokenName: string, defaultVal: string)}
   {@const current = overrides[tokenName] ?? defaultVal}
   {@const isOverridden = tokenName in overrides}
   <div class="group">
     <div class="flex items-center justify-between mb-1.5">
-      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label} weight</span>
+      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</span>
       {#if isOverridden}
         <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
       {/if}
@@ -273,8 +257,8 @@
 
 <div class="p-4 space-y-6">
 
-  <!-- FONT FAMILIES (compact dropdowns) -->
-  <Section title="Font families" bind:open={showFontFamilies}>
+  <!-- ═══ 1. FONTS — families, loader, OpenType ═══ -->
+  <Section title="Fonts" spacing="space-y-4" bind:open={showFonts}>
     {#each [
       { label: "Body", token: "--sf-font-body", current: currentBodyFont, opts: BODY_STACKS },
       { label: "Heading", token: "--sf-font-heading", current: currentHeadingFont, opts: HEADING_STACKS },
@@ -343,17 +327,287 @@
         Load &amp; apply to {customFontTarget}
       </button>
     </div>
+
+    <!-- OpenType / variable-font axes -->
+    <div class="pt-1 space-y-3">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">OpenType</div>
+      <div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Numeric figures</div>
+        <div class="flex gap-1">
+          {#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)}
+            {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"}
+            <button
+              onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)}
+              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${
+                cur === val
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+              }`}
+            >{label}</button>
+          {/each}
+        </div>
+      </div>
+      <div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Optical sizing</div>
+        <div class="flex gap-1">
+          {#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)}
+            {@const cur = overrides["--sf-optical-sizing"] ?? "auto"}
+            <button
+              onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)}
+              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                cur === val
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+              }`}
+            >{label}</button>
+          {/each}
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Font features</span>
+        <input
+          type="text"
+          value={overrides["--sf-font-features"] ?? ""}
+          placeholder="normal"
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value.trim();
+            v ? onSet("--sf-font-features", v) : onReset("--sf-font-features");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-font-features" in overrides}
+          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Variation</span>
+        <input
+          type="text"
+          value={overrides["--sf-font-variation"] ?? ""}
+          placeholder="normal"
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value.trim();
+            v ? onSet("--sf-font-variation", v) : onReset("--sf-font-variation");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-font-variation" in overrides}
+          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
+      </div>
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 2. FLUID SCALE — text & display, identical generators ═══ -->
+  <Section title="Fluid scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showScale}>
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+      Utopia-style fluid scale. The viewport range and the modular ratio are shared;
+      text and display each have their own base size and multiplier.
+    </p>
+
+    <!-- Shared viewport endpoints (also used by the space scale) -->
+    <ClampField
+      title="Viewport range (shared)"
+      minValue={vwMin} maxValue={vwMax}
+      min={15} max={120} step={0.5} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      overridden={"--sf-fluid-min-vw" in overrides || "--sf-fluid-max-vw" in overrides}
+      onReset={() => { onReset("--sf-fluid-min-vw"); onReset("--sf-fluid-max-vw"); }}
+      onMinChange={(v) => onSet("--sf-fluid-min-vw", String(v))}
+      onMaxChange={(v) => onSet("--sf-fluid-max-vw", String(v))}
+    />
+
+    <!-- TEXT generator -->
+    <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-1">Text</div>
+    <ClampField
+      title="Base size &amp; ratio"
+      minValue={baseMin} maxValue={baseMax}
+      min={0.7} max={2} step={0.01} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      previewKind="type"
+      overridden={"--sf-text-base-min" in overrides || "--sf-text-base-max" in overrides}
+      onReset={() => { onReset("--sf-text-base-min"); onReset("--sf-text-base-max"); }}
+      onMinChange={(v) => onSet("--sf-text-base-min", String(v))}
+      onMaxChange={(v) => onSet("--sf-text-base-max", String(v))}
+      ratioPresets={RATIO_PRESETS}
+      ratioMin={ratioMin} ratioMax={ratioMax}
+      ratioMin_bound={1.05} ratioMax_bound={1.8}
+      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
+      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
+    />
+    <SliderRow
+      label="Scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-scale — multiplies every text size at once."
+      overridden={"--sf-text-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-scale", String(v))}
+      onReset={() => onReset("--sf-text-scale")}
+    />
+
+    <!-- DISPLAY generator — identical controls; the ratio block edits the SAME
+         shared --sf-text-ratio-* tokens (the framework derives display sizes
+         from the text ratio), so the two generators stay in lockstep. -->
+    <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-1">Display</div>
+    <ClampField
+      title="Base size &amp; ratio (ratio shared with text)"
+      minValue={dispMin} maxValue={dispMax}
+      min={1.5} max={6} step={0.05} unit="rem"
+      minLabel="Mobile" maxLabel="Desktop"
+      previewKind="type"
+      overridden={"--sf-text-display-base-min" in overrides || "--sf-text-display-base-max" in overrides}
+      onReset={() => { onReset("--sf-text-display-base-min"); onReset("--sf-text-display-base-max"); }}
+      onMinChange={(v) => onSet("--sf-text-display-base-min", String(v))}
+      onMaxChange={(v) => onSet("--sf-text-display-base-max", String(v))}
+      ratioPresets={RATIO_PRESETS}
+      ratioMin={ratioMin} ratioMax={ratioMax}
+      ratioMin_bound={1.05} ratioMax_bound={1.8}
+      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
+      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
+    />
+    <SliderRow
+      label="Scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-display-scale — multiplies every display size at once."
+      overridden={"--sf-text-display-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-display-scale", String(v))}
+      onReset={() => onReset("--sf-text-display-scale")}
+    />
+
+    <!-- Live ramp — every "Aa" renders at its token's real size (var() against
+         the framework CSS + live overrides); labels are DOM-measured. -->
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
+      <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
+      {#each [...TEXT_STEPS].reverse() as label (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-${label}`} family="--sf-font-body" />
+      {/each}
+      <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
+      {#each ["l", "m", "s"] as label (label)}
+        <TypeSpecimenRow {label} varName={`--sf-text-display-${label}`} family="--sf-font-heading" />
+      {/each}
+    </div>
+
+    <!-- Advanced power knobs — de-emphasised, at end of the scale group -->
+    <div class="pt-1">
+      <button
+        onclick={() => { showScaleAdvanced = !showScaleAdvanced; }}
+        aria-expanded={showScaleAdvanced}
+        class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
+      >
+        <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
+        <span class="text-[10px]">{showScaleAdvanced ? "▲" : "▼"}</span>
+      </button>
+      {#if showScaleAdvanced}
+        <div class="mt-3 space-y-4">
+          {#each knobs as k (k.name)}
+            <PowerKnobRow
+              knob={k}
+              {overrides}
+              onChange={(name, val) => val === null ? onReset(name) : onSet(name, val)}
+            />
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 3. LINE HEIGHTS — leading scale, taper, display leadings ═══ -->
+  <Section title="Line heights" spacing="space-y-4" bind:open={showLineHeights}>
+    <div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Leading scale</div>
+      <div class="space-y-2">
+        {#each LEADING_TOKENS as t (t.token)}
+          <SliderRow
+            label={t.label} value={getLeadingVal(t)} min={1.0} max={2.2} step={0.05}
+            help={`${t.token} — ${t.label.toLowerCase()} line height`}
+            overridden={t.token in overrides}
+            onChange={(v) => onSet(t.token, String(v))}
+            onReset={() => onReset(t.token)}
+          />
+        {/each}
+      </div>
+    </div>
+
+    <SliderRow
+      label="Leading taper" value={taper} min={0} max={0.5} step={0.01}
+      help="--sf-leading-taper — how aggressively large sizes shrink their line-height."
+      overridden={"--sf-leading-taper" in overrides}
+      onChange={(v) => onSet("--sf-leading-taper", String(v))}
+      onReset={() => onReset("--sf-leading-taper")}
+    />
+
+    <div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Display line heights</div>
+      <div class="space-y-2">
+        {#each DISPLAY_LEADING as row (row.token)}
+          <SliderRow
+            label={row.label} value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
+            help={`${row.token}`}
+            overridden={row.token in overrides}
+            onChange={(v) => onSet(row.token, String(v))}
+            onReset={() => onReset(row.token)}
+          />
+        {/each}
+      </div>
+    </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 4. LETTER SPACING — tracking scale ═══ -->
+  <Section title="Letter spacing" bind:open={showTracking}>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 mb-2">
+        Overriding these propagates to heading sizes that reference them.
+      </p>
+      <div class="space-y-2">
+        {#each TRACKING_TOKENS as t (t.token)}
+          <div class="group">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
+              {#if t.token in overrides}
+                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+              {/if}
+            </div>
+            <RangeWithNumber
+              value={getTrackingVal(t)}
+              min={-0.1} max={0.2} step={0.005} unit="em"
+              onChange={(v) => onSet(t.token, `${v}em`)}
+            />
+          </div>
+        {/each}
+      </div>
+  </Section>
+
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
+
+  <!-- ═══ 5. FONT WEIGHTS — base scale + role weights ═══ -->
+  <Section title="Font weights" spacing="space-y-4" bind:open={showWeights}>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight scale</div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed -mt-2">Named weight tokens. Override if your font uses non-standard axis values.</p>
+      {@render weightGrid("Light", "--sf-font-weight-light", "300")}
+      {@render weightGrid("Normal", "--sf-font-weight-normal", "400")}
+      {@render weightGrid("Medium", "--sf-font-weight-medium", "500")}
+      {@render weightGrid("Semibold", "--sf-font-weight-semibold", "600")}
+      {@render weightGrid("Bold", "--sf-font-weight-bold", "700")}
+
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-2">Role weights</div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed -mt-2">Semantic defaults the elements build on — reweight the whole site from here.</p>
+      {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "600")}
+      {@render weightGrid("Display", "--sf-font-weight-display", WEIGHT_DEFAULTS["--sf-font-weight-display"] ?? "700")}
+      {@render weightGrid("Body strong", "--sf-font-weight-strong", "700")}
+      {@render weightGrid("Interactive", "--sf-font-weight-interactive", WEIGHT_DEFAULTS["--sf-font-weight-interactive"] ?? "600")}
   </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- PER-TYPE (body + h1–h6) -->
-  <Section title="Per-type styles" bind:open={showPerType}>
+  <!-- ═══ 6. ELEMENTS — body + h1–h6 per-element styles & body details ═══ -->
+  <Section title="Elements (body, h1–h6)" bind:open={showElements}>
 
-    <!-- Level selector — body + h1–h6 + the three display sizes, one system -->
-    <div class="grid grid-cols-5 bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
+    <!-- Level selector -->
+    <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each TYPE_LEVELS as lvl (lvl.id)}
-        {@const isOv = (!!lvl.size && lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
+        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
         <button
           onclick={() => { activeLevelId = lvl.id; }}
           class={`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
@@ -372,36 +626,27 @@
     <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 px-3 py-3 overflow-hidden">
       <div
         class="text-slate-900/85 dark:text-white/85 truncate"
-        style={`font-size:var(${activeLevel.sizeVar}); font-weight:var(${activeLevel.wt}, ${activeLevel.dWt}); letter-spacing:${activeLevel.ls ? `var(${activeLevel.ls}, normal)` : "normal"}; line-height:var(${activeLevel.lh}, ${activeLevel.dLh}); font-family:var(${activeLevel.id === "body" ? "--sf-font-body" : "--sf-font-heading"})`}
+        style={`font-size:var(${activeLevel.size}, ${activeLevel.dSize}); font-weight:var(${activeLevel.wt}, ${activeLevel.dWt}); letter-spacing:${activeLevel.ls ? `var(${activeLevel.ls}, normal)` : "normal"}; line-height:var(${activeLevel.lh}, ${activeLevel.dLh}); font-family:var(${activeLevel.id === "body" ? "--sf-font-body" : "--sf-font-heading"})`}
       >The quick brown fox
       </div>
     </div>
 
     <!-- Size -->
-    {#if activeLevel.size}
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
-        <select
-          value={levelVal(activeLevel.size, activeLevel.dSize)}
-          onchange={(e) => setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)}
-          class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
-        >
-          {#each SIZE_OPTIONS as o (o.value)}
-            <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
-          {/each}
-          {#if !SIZE_OPTIONS.some((o) => o.value === levelVal(activeLevel.size, activeLevel.dSize))}
-            <option value={levelVal(activeLevel.size, activeLevel.dSize)} style={`background:${optionBg};`}>custom</option>
-          {/if}
-        </select>
-      </div>
-    {:else}
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
-        <span class="flex-1 text-[9px] text-slate-400 dark:text-slate-600 leading-snug">
-          Generated by the modular scale — adjust “Display base size” &amp; “Scale multiplier” in Display type.
-        </span>
-      </div>
-    {/if}
+    <div class="flex items-center gap-2">
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
+      <select
+        value={levelVal(activeLevel.size, activeLevel.dSize)}
+        onchange={(e) => setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)}
+        class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+      >
+        {#each SIZE_OPTIONS as o (o.value)}
+          <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
+        {/each}
+        {#if !SIZE_OPTIONS.some((o) => o.value === levelVal(activeLevel.size, activeLevel.dSize))}
+          <option value={levelVal(activeLevel.size, activeLevel.dSize)} style={`background:${optionBg};`}>custom</option>
+        {/if}
+      </select>
+    </div>
 
     <!-- Line height -->
     <div class="flex items-center gap-2">
@@ -422,7 +667,7 @@
 
     <!-- Weight -->
     <div>
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight{activeLevel.sharedWeight ? " — shared by all display sizes (--sf-font-weight-display)" : ""}</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight</span>
       <div class="flex gap-1 mt-1">
         {#each WEIGHT_OPTIONS as w (w)}
           {@const cur = levelVal(activeLevel.wt, activeLevel.dWt)}
@@ -456,7 +701,7 @@
       </div>
     {/if}
 
-    <!-- Max width (heading levels only — no per-display max-width token) -->
+    <!-- Max width (heading levels only) -->
     {#if activeLevel.id.startsWith("h")}
       {@const maxWidthToken = `--sf-${activeLevel.id}-max-width`}
       <div class="flex items-center gap-2">
@@ -478,11 +723,10 @@
     {/if}
 
     <div class="flex justify-end">
-      {#if (!!activeLevel.size && activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
+      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
         <button
           onclick={() => {
-            const patch: Record<string, null> = { [activeLevel.lh]: null, [activeLevel.wt]: null };
-            if (activeLevel.size) patch[activeLevel.size] = null;
+            const patch: Record<string, null> = { [activeLevel.size]: null, [activeLevel.lh]: null, [activeLevel.wt]: null };
             if (activeLevel.ls) patch[activeLevel.ls] = null;
             onBulkChange(patch);
           }}
@@ -490,332 +734,102 @@
         >reset {activeLevel.label}</button>
       {/if}
     </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- BODY TEXT -->
-  <Section title="Body text" spacing="space-y-4" bind:open={showBodyText}>
-
-    <!-- Font weights -->
-    {@render weightGrid("Body strong", "--sf-font-weight-strong", WEIGHT_DEFAULTS["--sf-font-weight-strong"] ?? "600")}
-    {@render weightGrid("Interactive", "--sf-font-weight-interactive", WEIGHT_DEFAULTS["--sf-font-weight-interactive"] ?? "600")}
-
-    <!-- Em style toggle -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Emphasis style</div>
-      <div class="flex gap-1">
-        {#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)}
-          {@const current = overrides["--sf-body-em-style"] ?? "italic"}
-          <button
-            onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)}
-            class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
-              current === val
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-            }`}
-          ><span style={`font-style: ${val}`}>{label}</span></button>
-        {/each}
-      </div>
-    </div>
 
-    <!-- Code font size -->
-    <SliderRow
-      label="Code font size" value={num("--sf-code-font-size", 0.875)} min={0.7} max={1.1} step={0.005} unit="em"
-      help="--sf-code-font-size — size of inline code relative to surrounding text"
-      overridden={"--sf-code-font-size" in overrides}
-      onChange={(v) => onSet("--sf-code-font-size", `${v}em`)}
-      onReset={() => onReset("--sf-code-font-size")}
-    />
+    <!-- Body & prose details -->
+    <div class="pt-2 space-y-4 border-t border-black/6 dark:border-white/6">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Body &amp; prose details</div>
 
-    <!-- Text wrap -->
-    {#each [
-      { label: "Heading wrap", token: "--sf-heading-text-wrap", defaultVal: "balance" },
-      { label: "Body wrap",    token: "--sf-body-text-wrap",    defaultVal: "pretty" },
-    ] as row (row.token)}
-      {@const current = overrides[row.token] ?? row.defaultVal}
+      <!-- Em style toggle -->
       <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">{row.label}</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Emphasis style</div>
         <div class="flex gap-1">
-          {#each WRAP_OPTIONS as o (o.value)}
+          {#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)}
+            {@const current = overrides["--sf-body-em-style"] ?? "italic"}
             <button
-              onclick={() => o.value === row.defaultVal && !(row.token in overrides) ? undefined : (o.value === row.defaultVal ? onReset(row.token) : onSet(row.token, o.value))}
-              class={`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                current === o.value
+              onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)}
+              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                current === val
                   ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
                   : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
-            >{o.label}</button>
+            ><span style={`font-style: ${val}`}>{label}</span></button>
           {/each}
         </div>
       </div>
-    {/each}
-
-    <!-- Link external marker -->
-    <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External marker</span>
-      <input
-        type="text"
-        value={overrides["--sf-link-external-marker"] ?? ""}
-        placeholder={'" ↗"'}
-        oninput={(e) => {
-          const v = (e.target as HTMLInputElement).value;
-          v ? onSet("--sf-link-external-marker", v) : onReset("--sf-link-external-marker");
-        }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-      />
-      {#if "--sf-link-external-marker" in overrides}
-        <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-      {/if}
-    </div>
 
-    <!-- Link external label (screen-reader text for the marker glyph) -->
-    <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External label</span>
-      <input
-        type="text"
-        value={overrides["--sf-link-external-label"] ?? ""}
-        placeholder={'"opens in a new window or external site"'}
-        oninput={(e) => {
-          const v = (e.target as HTMLInputElement).value;
-          v ? onSet("--sf-link-external-label", v) : onReset("--sf-link-external-label");
-        }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+      <!-- Code font size -->
+      <SliderRow
+        label="Code font size" value={num("--sf-code-font-size", 0.875)} min={0.7} max={1.1} step={0.005} unit="em"
+        help="--sf-code-font-size — size of inline code relative to surrounding text"
+        overridden={"--sf-code-font-size" in overrides}
+        onChange={(v) => onSet("--sf-code-font-size", `${v}em`)}
+        onReset={() => onReset("--sf-code-font-size")}
       />
-      {#if "--sf-link-external-label" in overrides}
-        <button onclick={() => onReset("--sf-link-external-label")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-      {/if}
-    </div>
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- FONT WEIGHT SCALE -->
-  <Section title="Font weight scale" bind:open={showFontWeights}>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p>
+      <!-- Text wrap -->
       {#each [
-        { label: "Light",    token: "--sf-font-weight-light",    def: 300 },
-        { label: "Normal",   token: "--sf-font-weight-normal",   def: 400 },
-        { label: "Medium",   token: "--sf-font-weight-medium",   def: 500 },
-        { label: "Semibold", token: "--sf-font-weight-semibold", def: 600 },
-        { label: "Bold",     token: "--sf-font-weight-bold",     def: 700 },
+        { label: "Heading wrap", token: "--sf-heading-text-wrap", defaultVal: "balance" },
+        { label: "Body wrap",    token: "--sf-body-text-wrap",    defaultVal: "pretty" },
       ] as row (row.token)}
-        <div class="group">
-          <div class="flex items-center justify-between mb-1">
-            <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{row.label}</span>
-            {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
-            {/if}
-          </div>
+        {@const current = overrides[row.token] ?? row.defaultVal}
+        <div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">{row.label}</div>
           <div class="flex gap-1">
-            {#each WEIGHT_OPTIONS as w (w)}
-              {@const cur = overrides[row.token] ?? String(row.def)}
+            {#each WRAP_OPTIONS as o (o.value)}
               <button
-                onclick={() => w === String(row.def) && !(row.token in overrides) ? undefined : (w === String(row.def) ? onReset(row.token) : onSet(row.token, w))}
-                style={`font-weight:${parseInt(w)}`}
-                class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-                  cur === w
+                onclick={() => o.value === row.defaultVal && !(row.token in overrides) ? undefined : (o.value === row.defaultVal ? onReset(row.token) : onSet(row.token, o.value))}
+                class={`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
+                  current === o.value
                     ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
                     : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
                 }`}
-              >{w}</button>
+              >{o.label}</button>
             {/each}
           </div>
         </div>
       {/each}
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- DISPLAY TYPE -->
-  <Section title="Display type" spacing="space-y-4" bind:open={showDisplayType}>
-
-    <ClampField
-      title="Display base size"
-      minValue={dispMin} maxValue={dispMax}
-      min={1.5} max={6} step={0.05} unit="rem"
-      previewKind="type"
-      overridden={"--sf-text-display-base-min" in overrides || "--sf-text-display-base-max" in overrides}
-      onReset={() => { onReset("--sf-text-display-base-min"); onReset("--sf-text-display-base-max"); }}
-      onMinChange={(v) => onSet("--sf-text-display-base-min", String(v))}
-      onMaxChange={(v) => onSet("--sf-text-display-base-max", String(v))}
-    />
-
-    <!-- Display scale multiplier — mirrors the text scale's "Scale multiplier"
-         so both fluid scales expose the same set of adjustments. -->
-    <SliderRow
-      label="Scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
-      help="--sf-text-display-scale — multiplies every display size at once."
-      overridden={"--sf-text-display-scale" in overrides}
-      onChange={(v) => onSet("--sf-text-display-scale", String(v))}
-      onReset={() => onReset("--sf-text-display-scale")}
-    />
-
-    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
-      Modular ratio is shared with the text scale (Mobile {ratioMin} → Desktop {ratioMax}) — edit it under “Modular scale”.
-    </p>
-
-    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
-      Per-size line-height and weight for D·S / D·M / D·L live in “Per-type styles”, alongside body and h1–h6.
-    </p>
-
-    <!-- Heading weight — role default that h1–h6 per-level weights build on -->
-    {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "700")}
-  </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- FINE-TUNE (type ramp clamp + rhythm + tracking) -->
-  <Section title="Modular scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showModularScale}>
-    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
-      Utopia-style fluid scale. Each endpoint has three values — viewport width,
-      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.
-    </p>
-
-    <!-- Viewport endpoints (shared by the type + space scales) -->
-    <ClampField
-      title="Viewport range"
-      minValue={vwMin} maxValue={vwMax}
-      min={15} max={120} step={0.5} unit="rem"
-      minLabel="Mobile" maxLabel="Desktop"
-      overridden={"--sf-fluid-min-vw" in overrides || "--sf-fluid-max-vw" in overrides}
-      onReset={() => { onReset("--sf-fluid-min-vw"); onReset("--sf-fluid-max-vw"); }}
-      onMinChange={(v) => onSet("--sf-fluid-min-vw", String(v))}
-      onMaxChange={(v) => onSet("--sf-fluid-max-vw", String(v))}
-    />
-
-    <ClampField
-      title="Base size &amp; ratio"
-      minValue={baseMin} maxValue={baseMax}
-      min={0.7} max={2} step={0.01} unit="rem"
-      minLabel="Mobile" maxLabel="Desktop"
-      previewKind="type"
-      overridden={"--sf-text-base-min" in overrides || "--sf-text-base-max" in overrides}
-      onReset={() => { onReset("--sf-text-base-min"); onReset("--sf-text-base-max"); }}
-      onMinChange={(v) => onSet("--sf-text-base-min", String(v))}
-      onMaxChange={(v) => onSet("--sf-text-base-max", String(v))}
-      ratioPresets={RATIO_PRESETS}
-      ratioMin={ratioMin} ratioMax={ratioMax}
-      ratioMin_bound={1.05} ratioMax_bound={1.8}
-      onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
-      onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
-    />
-
-    <!-- Text scale multiplier — mirrors the display scale's "Scale multiplier". -->
-    <SliderRow
-      label="Scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
-      help="--sf-text-scale — multiplies every text size at once."
-      overridden={"--sf-text-scale" in overrides}
-      onChange={(v) => onSet("--sf-text-scale", String(v))}
-      onReset={() => onReset("--sf-text-scale")}
-    />
 
-    <!-- Line height scale -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Line height scale</div>
-      <div class="space-y-2">
-        {#each LEADING_TOKENS as t (t.token)}
-          <SliderRow
-            label={t.label} value={getLeadingVal(t)} min={1.0} max={2.2} step={0.05}
-            help={`${t.token} — ${t.label.toLowerCase()} line height`}
-            overridden={t.token in overrides}
-            onChange={(v) => onSet(t.token, String(v))}
-            onReset={() => onReset(t.token)}
-          />
-        {/each}
+      <!-- Link external marker -->
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External marker</span>
+        <input
+          type="text"
+          value={overrides["--sf-link-external-marker"] ?? ""}
+          placeholder={'" ↗"'}
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value;
+            v ? onSet("--sf-link-external-marker", v) : onReset("--sf-link-external-marker");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-link-external-marker" in overrides}
+          <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
       </div>
-    </div>
 
-    <SliderRow
-      label="Leading taper" value={taper} min={0} max={0.5} step={0.01}
-      help="How aggressively large display sizes shrink their line-height."
-      overridden={"--sf-leading-taper" in overrides}
-      onChange={(v) => onSet("--sf-leading-taper", String(v))}
-      onReset={() => onReset("--sf-leading-taper")}
-    />
-
-    <!-- Letter-spacing scale -->
-    <div>
-      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Letter-spacing scale</div>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 mb-2">
-        Overriding these propagates to heading sizes that reference them.
-      </p>
-      <div class="space-y-2">
-        {#each TRACKING_TOKENS as t (t.token)}
-          <div class="group">
-            <div class="flex items-center justify-between mb-1">
-              <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
-              {#if t.token in overrides}
-                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
-              {/if}
-            </div>
-            <RangeWithNumber
-              value={getTrackingVal(t)}
-              min={-0.1} max={0.2} step={0.005} unit="em"
-              onChange={(v) => onSet(t.token, `${v}em`)}
-            />
-          </div>
-        {/each}
+      <!-- Link external label (screen-reader text for the marker glyph) -->
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External label</span>
+        <input
+          type="text"
+          value={overrides["--sf-link-external-label"] ?? ""}
+          placeholder={'"opens in a new window or external site"'}
+          oninput={(e) => {
+            const v = (e.target as HTMLInputElement).value;
+            v ? onSet("--sf-link-external-label", v) : onReset("--sf-link-external-label");
+          }}
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        />
+        {#if "--sf-link-external-label" in overrides}
+          <button onclick={() => onReset("--sf-link-external-label")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        {/if}
       </div>
     </div>
-
-    <!-- Advanced power knobs — de-emphasised, at end of the scale group -->
-    <div class="pt-1">
-      <button
-        onclick={() => { showScaleAdvanced = !showScaleAdvanced; }}
-        aria-expanded={showScaleAdvanced}
-        class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-      >
-        <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-        <span class="text-[10px]">{showScaleAdvanced ? "▲" : "▼"}</span>
-      </button>
-      {#if showScaleAdvanced}
-        <div class="mt-3 space-y-4">
-          {#each knobs as k (k.name)}
-            <PowerKnobRow
-              knob={k}
-              {overrides}
-              onChange={(name, val) => val === null ? onReset(name) : onSet(name, val)}
-            />
-          {/each}
-        </div>
-      {/if}
-    </div>
   </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
-  <!-- SCALE PREVIEW -->
-  <section>
-    <button
-      onclick={() => { showScalePreview = !showScalePreview; }}
-      aria-expanded={showScalePreview}
-      class="w-full flex items-center justify-between cursor-pointer mb-3"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div>
-      <span class="text-[10px] text-slate-500">{showScalePreview ? "▲" : "▼"}</span>
-    </button>
-    {#if showScalePreview}
-    <!-- Every "Aa" renders at its token's real, live size (var() against the
-         framework CSS + overrides in this document); labels are measured from
-         the DOM, so the preview can never lie. -->
-    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
-      <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
-      {#each [...TEXT_STEPS].reverse() as { label } (label)}
-        <TypeSpecimenRow {label} varName={`--sf-text-${label}`} family="--sf-font-body" />
-      {/each}
-
-      <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
-      {#each ["l", "m", "s"] as label (label)}
-        <TypeSpecimenRow {label} varName={`--sf-text-display-${label}`} family="--sf-font-heading" />
-      {/each}
-    </div>
-    {/if}
-  </section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- LINE LENGTHS -->
+  <!-- ═══ 7. LINE LENGTHS — per-step max-widths ═══ -->
   <Section title="Line lengths (max-width)" bind:open={showLineLengths}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Per-text-size max-width caps on <span class="font-mono text-slate-600 dark:text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-600 dark:text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-600 dark:text-slate-400">ch</span> units for character-based measures.
@@ -851,83 +865,4 @@
         {/each}
       </div>
   </Section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- ADVANCED TYPOGRAPHY -->
-  <Section title="Advanced typography" bind:open={showAdvancedType}>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-600 dark:text-slate-400">normal</span> unless your font supports these features.</p>
-
-      <!-- font-numeric -->
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Numeric figures</div>
-        <div class="flex gap-1">
-          {#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)}
-            {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"}
-            <button
-              onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)}
-              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${
-                cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{label}</button>
-          {/each}
-        </div>
-      </div>
-
-      <!-- optical-sizing -->
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Optical sizing</div>
-        <div class="flex gap-1">
-          {#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)}
-            {@const cur = overrides["--sf-optical-sizing"] ?? "auto"}
-            <button
-              onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)}
-              class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{label}</button>
-          {/each}
-        </div>
-      </div>
-
-      <!-- font-features -->
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Font features</span>
-        <input
-          type="text"
-          value={overrides["--sf-font-features"] ?? ""}
-          placeholder="normal"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-font-features", v) : onReset("--sf-font-features");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-font-features" in overrides}
-          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
-      </div>
-
-      <!-- font-variation -->
-      <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Variation</span>
-        <input
-          type="text"
-          value={overrides["--sf-font-variation"] ?? ""}
-          placeholder="normal"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-font-variation", v) : onReset("--sf-font-variation");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-font-variation" in overrides}
-          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
-      </div>
-  </Section>
 </div>

From 660fbea989c34640642a1808f8b48624ac362619 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 21:02:14 +0000
Subject: [PATCH 3/7] fix(configurator): unique, self-describing labels in the
 fluid scale section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both generators used the same "Base size & ratio" / "Scale multiplier" labels,
distinguished only by a small group header above them — ambiguous when
scanning and in ClampField's title-derived aria-labels. Labels now carry their
own context ("Text base size & ratio", "Display scale multiplier", …), and the
now-redundant Text/Display mini-headers are dropped. Verified this was the
only duplicated control label across all panels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 .../src/components/panels/TypographyPanel.svelte       | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index c0952095..32823f65 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -420,9 +420,8 @@
     />
 
     <!-- TEXT generator -->
-    <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-1">Text</div>
     <ClampField
-      title="Base size &amp; ratio"
+      title="Text base size &amp; ratio"
       minValue={baseMin} maxValue={baseMax}
       min={0.7} max={2} step={0.01} unit="rem"
       minLabel="Mobile" maxLabel="Desktop"
@@ -438,7 +437,7 @@
       onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
     />
     <SliderRow
-      label="Scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
+      label="Text scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
       help="--sf-text-scale — multiplies every text size at once."
       overridden={"--sf-text-scale" in overrides}
       onChange={(v) => onSet("--sf-text-scale", String(v))}
@@ -448,9 +447,8 @@
     <!-- DISPLAY generator — identical controls; the ratio block edits the SAME
          shared --sf-text-ratio-* tokens (the framework derives display sizes
          from the text ratio), so the two generators stay in lockstep. -->
-    <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 pt-1">Display</div>
     <ClampField
-      title="Base size &amp; ratio (ratio shared with text)"
+      title="Display base size &amp; ratio"
       minValue={dispMin} maxValue={dispMax}
       min={1.5} max={6} step={0.05} unit="rem"
       minLabel="Mobile" maxLabel="Desktop"
@@ -466,7 +464,7 @@
       onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
     />
     <SliderRow
-      label="Scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
+      label="Display scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
       help="--sf-text-display-scale — multiplies every display size at once."
       overridden={"--sf-text-display-scale" in overrides}
       onChange={(v) => onSet("--sf-text-display-scale", String(v))}

From ed4017f18d78a99b94b1831767cbe89cf880780b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 21:07:19 +0000
Subject: [PATCH 4/7] =?UTF-8?q?fix(configurator):=20stack=20TokenRow=20lay?=
 =?UTF-8?q?out=20=E2=80=94=20name,=20description,=20full-width=20value?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The All-tokens / generic token rows squeezed the value control into a narrow
right-aligned column (w-28), clipping longer values (clamp()/var()
expressions). Restack each row vertically: token name (+ override dot, colour
swatch, reset), description, then a full-width value control — the scale
dropdown, the text editor and the value display all span the row. The reset
affordance becomes a labelled "reset" button consistent with every other
control; tests updated accordingly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 .../src/components/inputs/TokenRow.svelte     | 141 +++++++++---------
 .../tests-components/token-editing.test.js    |   8 +-
 2 files changed, 75 insertions(+), 74 deletions(-)

diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 70691ee5..4a9ee2a8 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -46,81 +46,82 @@
   let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");
 </script>
 
-<div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"}`}>
-  <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-indigo-500" : "bg-transparent"}`}></div>
-
-  {#if type === "color"}
-    <div
-      class="w-4 h-4 rounded-sm border border-black/10 dark:border-white/10 shrink-0"
-      style:background={swatchColor}
-    ></div>
-  {:else}
-    <div class="w-4 h-4 shrink-0"></div>
-  {/if}
-
-  <div class="flex-1 min-w-0">
-    <div class="text-[10px] font-mono text-slate-600 dark:text-slate-400 truncate" title={token.name}>
+<!-- Stacked layout — name, description, then a full-width value control, so
+     long values (clamp()/var() expressions) are never clipped by a narrow
+     right-aligned field. -->
+<div class={`px-3 py-2 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"}`}>
+  <div class="flex items-center gap-2">
+    <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-indigo-500" : "bg-black/15 dark:bg-white/15"}`}></div>
+    {#if type === "color"}
+      <div
+        class="w-4 h-4 rounded-sm border border-black/10 dark:border-white/10 shrink-0"
+        style:background={swatchColor}
+      ></div>
+    {/if}
+    <div class="text-[10px] font-mono text-slate-700 dark:text-slate-300 truncate flex-1" title={token.name}>
       {shortName}
     </div>
-    {#if token.description}
-      <div class="text-[9px] text-slate-400 dark:text-slate-600 truncate">{token.description}</div>
+    {#if isOverridden}
+      <button
+        onclick={onReset}
+        class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
+      >
+        reset
+      </button>
     {/if}
   </div>
 
-  {#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-32 shrink-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 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-28 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none text-right"
-    />
-  {:else}
-    <button
-      onclick={() => { expanded = true; }}
-      class="text-[10px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"
-      title={displayValue}
-    >
-      {#if isOverridden}
-        <span class="text-indigo-700 dark:text-indigo-300">{displayValue}</span>
-      {:else}
-        {displayValue}
-      {/if}
-    </button>
+  {#if token.description}
+    <div class="text-[9px] text-slate-400 dark:text-slate-600 leading-snug mt-0.5 pl-3.5">{token.description}</div>
   {/if}
 
-  {#if isOverridden}
-    <button
-      onclick={onReset}
-      class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
-    >
-      ✕
-    </button>
-  {/if}
+  <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}
+  </div>
 </div>
diff --git a/configurator/tests-components/token-editing.test.js b/configurator/tests-components/token-editing.test.js
index 714e3f76..b8db28ce 100644
--- a/configurator/tests-components/token-editing.test.js
+++ b/configurator/tests-components/token-editing.test.js
@@ -106,13 +106,13 @@ describe('TokenRow', () => {
     render(TokenRow, { props: { token, onSet: () => {}, onReset: () => {} } });
     expect(screen.getByText('space-m')).toBeTruthy();
     expect(screen.getByText('1rem')).toBeTruthy();
-    expect(screen.queryByText('✕')).toBeNull();
+    expect(screen.queryByText('reset')).toBeNull();
   });
 
   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.getByText('✕')).toBeTruthy();
+    expect(screen.getByText('reset')).toBeTruthy();
   });
 
   test('override-set: editing the value and blurring with a new value calls onSet', async () => {
@@ -143,10 +143,10 @@ describe('TokenRow', () => {
     expect(onSet).not.toHaveBeenCalled();
   });
 
-  test('reset: clicking the ✕ button calls onReset directly', async () => {
+  test('reset: clicking the reset button calls onReset directly', async () => {
     const onReset = vi.fn();
     render(TokenRow, { props: { token, overrideValue: '2rem', onSet: () => {}, onReset } });
-    await fireEvent.click(screen.getByText('✕'));
+    await fireEvent.click(screen.getByText('reset'));
     expect(onReset).toHaveBeenCalledOnce();
   });
 });

From 61a38c5bf295fb5382c994d803b538b8f6618ee7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 21:17:06 +0000
Subject: [PATCH 5/7] fix(configurator): reset buttons always visible when a
 token is overridden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nine reset affordances (SliderRow, TokenRow, PowerKnobRow, weight grids,
tracking rows, Motion/Misc/Themes inline resets) used a hide-until-hover
pattern (sm:opacity-0 + group-hover reveal), so on desktop they were invisible
until the exact row was hovered — users reported reset "missing". A reset
button only renders when the token IS overridden, so it carries information
and should always be visible; drop the opacity dance everywhere. SliderRow's
</> raw-CSS toggle loses its hover-hide too — same discoverability problem,
same fix.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 configurator/src/components/inputs/PowerKnobRow.svelte    | 2 +-
 configurator/src/components/inputs/SliderRow.svelte       | 4 ++--
 configurator/src/components/inputs/TokenRow.svelte        | 2 +-
 configurator/src/components/panels/MiscPanel.svelte       | 2 +-
 configurator/src/components/panels/MotionPanel.svelte     | 2 +-
 configurator/src/components/panels/ThemesPanel.svelte     | 2 +-
 configurator/src/components/panels/TypographyPanel.svelte | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/configurator/src/components/inputs/PowerKnobRow.svelte b/configurator/src/components/inputs/PowerKnobRow.svelte
index 6d156ca4..5ade0e70 100644
--- a/configurator/src/components/inputs/PowerKnobRow.svelte
+++ b/configurator/src/components/inputs/PowerKnobRow.svelte
@@ -36,7 +36,7 @@
     {#if isOverridden}
       <button
         onclick={handleReset}
-        class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+        class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer "
       >
         reset
       </button>
diff --git a/configurator/src/components/inputs/SliderRow.svelte b/configurator/src/components/inputs/SliderRow.svelte
index b4207b11..7f656181 100644
--- a/configurator/src/components/inputs/SliderRow.svelte
+++ b/configurator/src/components/inputs/SliderRow.svelte
@@ -116,14 +116,14 @@
           class={`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${
             showRawText
               ? 'text-indigo-600 dark:text-indigo-400'
-              : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
+              : 'text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
           }`}
         >&lt;/&gt;</button>
       {/if}
       {#if overridden}
         <button
           onclick={() => { manualView = 'none'; onReset(); }}
-          class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors"
+          class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer transition-colors"
         >reset</button>
       {/if}
     </div>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 4a9ee2a8..80149a8f 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -64,7 +64,7 @@
     {#if isOverridden}
       <button
         onclick={onReset}
-        class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
+        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"
       >
         reset
       </button>
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index e0c66989..b09bc1f8 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -306,7 +306,7 @@
         <div class="flex items-center justify-between mb-1.5">
           <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Underline thickness</span>
           {#if "--sf-link-underline-thickness" in overrides}
-            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
           {/if}
         </div>
         <div class="flex gap-1">
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index f61cb56f..65e5ca74 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -258,7 +258,7 @@
         <div class="flex items-center justify-between mb-1.5">
           <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Stagger base</span>
           {#if STAGGER_TOKENS.some(t => t in overrides)}
-            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
           {/if}
         </div>
         <SliderRow
diff --git a/configurator/src/components/panels/ThemesPanel.svelte b/configurator/src/components/panels/ThemesPanel.svelte
index 21556b8b..3c26d0ba 100644
--- a/configurator/src/components/panels/ThemesPanel.svelte
+++ b/configurator/src/components/panels/ThemesPanel.svelte
@@ -104,7 +104,7 @@
               <button
                 aria-label="Delete theme"
                 onclick={() => handleDelete(theme.id)}
-                class="p-1.5 rounded-lg border border-black/8 dark:border-white/8 text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+                class="p-1.5 rounded-lg border border-black/8 dark:border-white/8 text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer "
               ><Trash2 class="w-3.5 h-3.5" /></button>
             </div>
           </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index 32823f65..a2ba193b 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -236,7 +236,7 @@
     <div class="flex items-center justify-between mb-1.5">
       <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</span>
       {#if isOverridden}
-        <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
+        <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer transition-colors">reset</button>
       {/if}
     </div>
     <div class="flex gap-1">
@@ -564,7 +564,7 @@
             <div class="flex items-center justify-between mb-1">
               <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
               {#if t.token in overrides}
-                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer ">reset</button>
               {/if}
             </div>
             <RangeWithNumber

From c6926e96157c03e38213d3931446d7bfaf9d7f99 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 21:28:20 +0000
Subject: [PATCH 6/7] fix(configurator): address PR review comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Greptile:
- Elements section: the per-level tab dot and the "reset {label}" bulk reset
  now track --sf-h{n}-max-width alongside size/line-height/weight/tracking,
  so a max-width-only override is indicated and actually cleared.
- Drop the required-but-unused tokens prop (and its type import) from
  TypographyPanel — the panel builds its type data statically.

CodeRabbit:
- TokenRow reset gets a token-specific aria-label (`Reset {shortName}`).
- TypeSpecimenRow converts px→rem using the document root's computed
  font-size instead of a hardcoded 16.
- Every plain text input in TypographyPanel (font features, variation, Google
  font, external link marker/label, per-level and per-step max-widths) gets an
  accessible name.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 .../src/components/inputs/TokenRow.svelte     |  1 +
 .../components/inputs/TypeSpecimenRow.svelte  |  8 +++++--
 .../components/panels/TypographyPanel.svelte  | 21 +++++++++++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 80149a8f..a5ec5a7b 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -64,6 +64,7 @@
     {#if isOverridden}
       <button
         onclick={onReset}
+        aria-label={`Reset ${shortName}`}
         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"
       >
         reset
diff --git a/configurator/src/components/inputs/TypeSpecimenRow.svelte b/configurator/src/components/inputs/TypeSpecimenRow.svelte
index f7b38eb2..a1554f01 100644
--- a/configurator/src/components/inputs/TypeSpecimenRow.svelte
+++ b/configurator/src/components/inputs/TypeSpecimenRow.svelte
@@ -14,11 +14,15 @@
 
   let el = $state<HTMLElement | null>(null);
   let px = $state(0);
+  let rootPx = $state(16);
 
   $effect(() => {
     if (!el) return;
     const node = el;
-    const measure = () => { px = parseFloat(getComputedStyle(node).fontSize) || 0; };
+    const measure = () => {
+      px = parseFloat(getComputedStyle(node).fontSize) || 0;
+      rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    };
     measure();
     // A font-size change resizes the span, so ResizeObserver re-measures on
     // every token/override change and on viewport-driven fluid changes alike.
@@ -35,5 +39,5 @@
     class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
     style={`font-size: var(${varName}); font-family: var(${family})`}
   >Aa</span>
-  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{px ? `${(px / 16).toFixed(2)}rem` : ""}</span>
+  <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{px ? `${(px / rootPx).toFixed(2)}rem` : ""}</span>
 </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index a2ba193b..55db8ddf 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { SlashedToken } from '../../types';
   import { KNOBS_BY_DOMAIN } from '../../lib/powerKnobs';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
@@ -14,7 +13,6 @@
   let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet, onReset, onBulkChange }: {
-    tokens: SlashedToken[];
     overrides: Record<string, string>;
     onSet: (name: string, value: string) => void;
     onReset: (name: string) => void;
@@ -148,6 +146,7 @@
 
   let activeLevelId = $state<string>("h1");
   let activeLevel = $derived(TYPE_LEVELS.find((l) => l.id === activeLevelId)!);
+  let activeMw = $derived(levelMaxWidthToken(activeLevelId));
 
   const knobs = KNOBS_BY_DOMAIN["typography"] ?? [];
 
@@ -225,6 +224,11 @@
     if (!token) return;
     if (value === dflt) onReset(token); else onSet(token, value);
   }
+  // Heading levels also own a --sf-h{n}-max-width token; the tab dot and the
+  // bulk reset must track it alongside size/lh/weight/tracking.
+  function levelMaxWidthToken(id: string): string | null {
+    return id.startsWith("h") ? `--sf-${id}-max-width` : null;
+  }
 </script>
 
 <!-- Shared weight button-grid — one markup for every weight token (base scale
@@ -315,6 +319,7 @@
       </div>
       <input
         type="text"
+        aria-label="Google font name"
         placeholder="…or type any Google font name"
         oninput={(e) => { googleFontChoice = (e.target as HTMLInputElement).value; }}
         value={googleFontChoice}
@@ -368,6 +373,7 @@
         <input
           type="text"
           value={overrides["--sf-font-features"] ?? ""}
+          aria-label="Font features"
           placeholder="normal"
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value.trim();
@@ -384,6 +390,7 @@
         <input
           type="text"
           value={overrides["--sf-font-variation"] ?? ""}
+          aria-label="Font variation settings"
           placeholder="normal"
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value.trim();
@@ -605,7 +612,8 @@
     <!-- Level selector -->
     <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each TYPE_LEVELS as lvl (lvl.id)}
-        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
+        {@const lvlMw = levelMaxWidthToken(lvl.id)}
+        {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides) || (!!lvlMw && lvlMw in overrides)}
         <button
           onclick={() => { activeLevelId = lvl.id; }}
           class={`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
@@ -707,6 +715,7 @@
         <input
           type="text"
           value={overrides[maxWidthToken] ?? ""}
+          aria-label={`${activeLevel.label} max width`}
           placeholder="none"
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value.trim();
@@ -721,11 +730,12 @@
     {/if}
 
     <div class="flex justify-end">
-      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides)}
+      {#if (activeLevel.size in overrides) || (activeLevel.lh in overrides) || (activeLevel.wt in overrides) || (!!activeLevel.ls && activeLevel.ls in overrides) || (!!activeMw && activeMw in overrides)}
         <button
           onclick={() => {
             const patch: Record<string, null> = { [activeLevel.size]: null, [activeLevel.lh]: null, [activeLevel.wt]: null };
             if (activeLevel.ls) patch[activeLevel.ls] = null;
+            if (activeMw) patch[activeMw] = null;
             onBulkChange(patch);
           }}
           class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer"
@@ -793,6 +803,7 @@
         <input
           type="text"
           value={overrides["--sf-link-external-marker"] ?? ""}
+          aria-label="External link marker"
           placeholder={'" ↗"'}
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value;
@@ -811,6 +822,7 @@
         <input
           type="text"
           value={overrides["--sf-link-external-label"] ?? ""}
+          aria-label="External link label"
           placeholder={'"opens in a new window or external site"'}
           oninput={(e) => {
             const v = (e.target as HTMLInputElement).value;
@@ -849,6 +861,7 @@
             <input
               type="text"
               value={overrides[row.token] ?? ""}
+              aria-label={`${row.label} max width`}
               placeholder={row.def}
               oninput={(e) => {
                 const v = (e.target as HTMLInputElement).value.trim();

From d88c7f8a965d7ff3fcebc2993a99e87ba0ceddc7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 21:31:23 +0000
Subject: [PATCH 7/7] fix(configurator): drop tokens from the TypographyPanel
 call site

The previous commit removed TypographyPanel's unused tokens prop but left the
caller passing it, which svelte-check (CI's Configurator tests gate) rejects.
Verified locally with npm run check: 0 errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN
---
 configurator/src/components/DomainPanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/configurator/src/components/DomainPanel.svelte b/configurator/src/components/DomainPanel.svelte
index 37edf4b3..470d6176 100644
--- a/configurator/src/components/DomainPanel.svelte
+++ b/configurator/src/components/DomainPanel.svelte
@@ -77,7 +77,7 @@
           {#if domain === "colors"}
             <ColorsPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} {onSelectDomain} />
           {:else if domain === "typography"}
-            <TypographyPanel {tokens} {overrides} {onSet} {onReset} {onBulkChange} />
+            <TypographyPanel {overrides} {onSet} {onReset} {onBulkChange} />
           {:else if domain === "spacing"}
             <SpacingPanel {tokens} {overrides} {onSet} {onReset} />
           {:else if domain === "layout"}