twiddle-panel 0.8.2 → 0.9.1

package/dist/twiddle.mjs

@@ -1,6 +1,6 @@
-const gt = /* @__PURE__ */ new Set();
-let M = sa(), Q = [], ke = [], qe = null, an = 0;
-function sa() {
+const Ct = /* @__PURE__ */ new Set();
+let M = ya(), oe = [], Ee = [], Ze = null, gn = 0;
+function ya() {
   const e = new URLSearchParams(location.search).get("twd");
   if (!e) return {};
   try {
@@ -9,140 +9,163 @@ function sa() {
     return {};
   }
 }
-function ia() {
+function ka() {
   const e = new URL(location.href);
   Object.keys(M).length ? e.searchParams.set("twd", JSON.stringify(M)) : e.searchParams.delete("twd"), history.replaceState(history.state, "", e);
 }
-function Et() {
-  ia(), gt.forEach((e) => e(M));
+function Rt() {
+  ka(), Ct.forEach((e) => e(M));
 }
-function pe(e, t) {
+function re(e, t) {
   if (JSON.stringify(e) === JSON.stringify(M)) return;
   const n = Date.now();
-  t && t === qe && n - an < 400 || (Q.push(M), Q.length > 100 && Q.shift()), ke = [], qe = t, an = n, M = e, Et();
+  t && t === Ze && n - gn < 400 || (oe.push(M), oe.length > 100 && oe.shift()), Ee = [], Ze = t, gn = n, M = e, Rt();
 }
-function Ve(e, t) {
+function Te(e, t) {
   const n = { ...e, ...t };
   return Object.keys(n).forEach((a) => {
     n[a] == null && delete n[a];
   }), Object.keys(n).length ? n : null;
 }
-function B(e, t, n) {
+function I(e, t, n) {
   const a = { ...e };
   return n == null ? delete a[t] : a[t] = n, a;
 }
-function mt() {
+function Mt() {
   return JSON.parse(JSON.stringify(M));
 }
-function la(e, t) {
-  pe(B(M, e, Ve(M[e], t)), `${e}:${Object.keys(t)}`);
+function Sa(e, t) {
+  re(I(M, e, Te(M[e], t)), `${e}:${Object.keys(t)}`);
+}
+function $a(e, t = `multi:${Object.keys(e)}`) {
+  const n = Object.entries(e).reduce((a, [o, r]) => I(a, o, Te(a[o], r)), M);
+  re(n, t);
 }
-function da(e, t = `multi:${Object.keys(e)}`) {
-  const n = Object.entries(e).reduce((a, [o, s]) => B(a, o, Ve(a[o], s)), M);
-  pe(n, t);
+function In(e, t, n) {
+  const a = I(M.scopes?.[e], t, Te(M.scopes?.[e]?.[t], n)), o = I(M.scopes, e, Object.keys(a).length ? a : null);
+  re(I(M, "scopes", Object.keys(o).length ? o : null), `${e}|${t}:${Object.keys(n)}`);
 }
-function Mn(e, t, n) {
-  const a = B(M.scopes?.[e], t, Ve(M.scopes?.[e]?.[t], n)), o = B(M.scopes, e, Object.keys(a).length ? a : null);
-  pe(B(M, "scopes", Object.keys(o).length ? o : null), `${e}|${t}:${Object.keys(n)}`);
+function Ea(e, t, n = `multi:${Object.keys(t)}`) {
+  const a = Object.entries(t).reduce((r, [s, i]) => I(r, s, Te(r?.[s], i)), M.scopes?.[e]), o = I(M.scopes, e, Object.keys(a).length ? a : null);
+  re(I(M, "scopes", Object.keys(o).length ? o : null), `${e}|${n}`);
 }
-function ca(e, t) {
-  if (t) return Mn(e, t, Object.fromEntries(
+function Ca(e, t) {
+  if (t) return In(e, t, Object.fromEntries(
     Object.keys(M.scopes?.[e]?.[t] || {}).map((a) => [a, null])
   ));
-  const n = B(M.scopes, e, null);
-  pe(B(M, "scopes", Object.keys(n).length ? n : null));
+  const n = I(M.scopes, e, null);
+  re(I(M, "scopes", Object.keys(n).length ? n : null));
 }
-function pa(e, t) {
+function Ma(e, t) {
   const n = M.scopes?.[e];
   if (!n || e === t) return;
   let a = { ...M.scopes[t] };
-  Object.entries(n).forEach(([s, r]) => {
-    a = B(a, s, Ve(a[s], r));
+  Object.entries(n).forEach(([r, s]) => {
+    a = I(a, r, Te(a[r], s));
   });
-  const o = B(B(M.scopes, e, null), t, a);
-  pe(B(M, "scopes", o));
+  const o = I(I(M.scopes, e, null), t, a);
+  re(I(M, "scopes", o));
 }
-function Tn() {
-  pe({});
+function Dn() {
+  re({});
 }
-function An() {
-  Q.length && (ke.push(M), M = Q.pop(), qe = null, Et());
+function Bn() {
+  oe.length && (Ee.push(M), M = oe.pop(), Ze = null, Rt());
 }
-function Ln() {
-  ke.length && (Q.push(M), M = ke.pop(), qe = null, Et());
+function Un() {
+  Ee.length && (oe.push(M), M = Ee.pop(), Ze = null, Rt());
 }
-const ua = () => Q.length > 0, ha = () => ke.length > 0;
-function Pn(e) {
-  return gt.add(e), () => gt.delete(e);
+const Ta = () => oe.length > 0, La = () => Ee.length > 0;
+function Vn(e) {
+  return Ct.add(e), () => Ct.delete(e);
 }
-const fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  canRedo: ha,
-  canUndo: ua,
-  getState: mt,
-  moveScope: pa,
-  onChange: Pn,
-  redo: Ln,
-  removeScope: ca,
-  resetState: Tn,
-  setScope: Mn,
-  setSection: la,
-  setSections: da,
-  undo: An
-}, Symbol.toStringTag, { value: "Module" })), On = [];
-let bt = [], Ct = {}, R = null, de = !1, Fn = {};
-function ga(e) {
-  typeof e == "function" && On.push(e);
-}
-const on = (e) => Object.assign({}, ...On.map((t) => t(e) || {})), xt = (e) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(e), ma = (e) => {
+  canRedo: La,
+  canUndo: Ta,
+  getState: Mt,
+  moveScope: Ma,
+  onChange: Vn,
+  redo: Un,
+  removeScope: Ca,
+  resetState: Dn,
+  setScope: In,
+  setScopeSections: Ea,
+  setSection: Sa,
+  setSections: $a,
+  undo: Bn
+}, Symbol.toStringTag, { value: "Module" })), qn = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}', Pa = [...qn.matchAll(/(--twd-[\w-]+):\s*([^;]*var\(--twd-[^;]*);/g)].map((e) => [e[1], e[2].trim()]);
+function Oa(e) {
+  const t = document.documentElement, n = document.createElement("div");
+  n.hidden = !0, t.appendChild(n);
+  const a = getComputedStyle(t), o = getComputedStyle(n), r = [];
+  return Pa.forEach(([s, i]) => {
+    const l = e[s];
+    if (l != null) {
+      String(l).includes("var(") && r.push([s, l]);
+      return;
+    }
+    n.style.setProperty("--twd-probe", i), o.getPropertyValue("--twd-probe").trim() === a.getPropertyValue(s).trim() && r.push([s, i]);
+  }), n.remove(), r;
+}
+const Hn = [];
+let Tt = [], zt = {}, R = null, fe = !1, _n = {};
+function ja(e) {
+  typeof e == "function" && Hn.push(e);
+}
+const mn = (e) => Object.assign({}, ...Hn.map((t) => t(e) || {})), Lt = (e) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(e), Fa = (e) => {
   try {
     return document.querySelector(e), !0;
   } catch {
     return !1;
   }
 };
-function ba() {
+function Na() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function Nn() {
+function Kn() {
   const e = document.documentElement;
-  bt.forEach((t) => e.style.removeProperty(t)), bt = [], Ct = {};
+  Tt.forEach((t) => e.style.removeProperty(t)), Tt = [], zt = {};
 }
-function wt(e) {
-  if (Fn = e, de) return;
+function At(e) {
+  if (_n = e, fe) return;
   const t = document.documentElement;
-  Nn();
-  const n = on(e), a = Object.entries(e.scopes || {}).filter(([s]) => ma(s)).sort(([s], [r]) => xt(r) - xt(s)).map(([s, r]) => [s, on(r)]);
-  Object.entries(n).forEach(([s, r]) => t.style.setProperty(s, r)), bt = Object.keys(n), Ct = n;
-  const o = a.filter(([, s]) => Object.keys(s).length).map(([s, r]) => `${s} {
-${Object.entries(r).map(([i, l]) => `  ${i}: ${l} !important;`).join(`
+  Kn();
+  const n = mn(e), a = e.scopes ? Oa(n) : [], o = Object.entries(e.scopes || {}).filter(([s]) => Fa(s)).sort(([s], [i]) => Lt(i) - Lt(s)).map(([s, i]) => [s, mn(i)]);
+  Object.entries(n).forEach(([s, i]) => t.style.setProperty(s, i)), Tt = Object.keys(n), zt = n;
+  const r = o.filter(([, s]) => Object.keys(s).length).map(([s, i]) => `${s} {
+${[
+    // Derived tokens first, without !important, so the page's own rules for them still win.
+    ...a.filter(([l]) => !(l in i)).map(([l, d]) => `  ${l}: ${d};`),
+    ...Object.entries(i).map(([l, d]) => `  ${l}: ${d} !important;`)
+  ].join(`
 `)}
 }`).join(`
 `);
-  (o || R) && (ba().textContent = o);
+  (r || R) && (Na().textContent = r);
 }
-function jn(e) {
-  const t = document.documentElement, n = de, a = { ...Ct };
+function Wn(e) {
+  const t = document.documentElement, n = fe, a = { ...zt };
   Object.keys(a).forEach((o) => t.style.removeProperty(o)), R && (R.disabled = !0);
   try {
     return e();
   } finally {
-    n || (Object.entries(a).forEach(([o, s]) => t.style.setProperty(o, s)), R && (R.disabled = !1));
+    n || (Object.entries(a).forEach(([o, r]) => t.style.setProperty(o, r)), R && (R.disabled = !1));
   }
 }
-function xa(e, t = document.documentElement) {
-  return jn(() => {
+function Ra(e, t = document.documentElement) {
+  return Wn(() => {
     const n = getComputedStyle(t);
     return Object.fromEntries(e.map((a) => [a, n.getPropertyValue(a).trim()]));
   });
 }
-function wa() {
-  de || (Nn(), R && (R.disabled = !0), de = !0);
+function za() {
+  fe || (Kn(), R && (R.disabled = !0), fe = !0);
 }
-function ya() {
-  de && (de = !1, R && (R.disabled = !1), wt(Fn));
+function Ia() {
+  fe && (fe = !1, R && (R.disabled = !1), At(_n));
 }
-const va = `
+const Da = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -154,6 +177,9 @@ const va = `
     --p-hover: #f4f4f5;
     --p-track: #f4f4f5;
     --p-selected: #ffffff;
+    --p-line-strong: #d4d4d8;  /* tile and segmented outlines */
+    --p-brand: #4f46e5;        /* selected borders (Twiddle accent) */
+    --p-brand-fg: #4f46e5;     /* selected icons and labels */
     --p-accent: #18181b;
     --p-on-accent: #ffffff;
     --p-shadow: 0 12px 40px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
@@ -184,6 +210,11 @@ const va = `
     --p-hover: #27272a;
     --p-track: #27272a;
     --p-selected: #3f3f46;
+    --p-line-strong: #3f3f46;
+    /* Brand on dark (Ravi, 2026-10-16): the accent #4f46e5 is too dark to read on
+       #1c1c1f, so borders use #6366f1 and icons/labels the lighter #818cf8. */
+    --p-brand: #6366f1;
+    --p-brand-fg: #818cf8;
     --p-accent: #f4f4f5;
     --p-on-accent: #18181b;
     --p-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
@@ -202,14 +233,14 @@ const va = `
     cursor: pointer;
     padding: 0;
   }
-  /* Open or minimised: centred on the tabs. 10px = panel border 1 + tab bar
+  /* Minimised: centred on the tab bar. 10px = panel border 1 + tab bar
      padding 6 + half a tab (~49px) − half the launcher (22). */
   .launcher { transition: margin-bottom .2s cubic-bezier(0.2, 0.8, 0.2, 1); }
-  .wrap.is-open .launcher { margin-bottom: 10px; }
+  .wrap.is-min .launcher { margin-bottom: 10px; } /* open: the actions row is at the bottom, already centred (~40px tall) */
   /* Left corners: the panel opens to the right of the launcher. Top corners: tops aligned. */
   .wrap.at-left { flex-direction: row-reverse; }
   .wrap.at-top { align-items: flex-start; }
-  .wrap.at-top.is-open .launcher { margin-bottom: 0; }
+  .wrap.at-top.is-min .launcher { margin-bottom: 0; }
   .launcher { touch-action: none; }
   .wrap.dragging .launcher { cursor: grabbing; }
   .wrap.dragging .panel { pointer-events: none; }
@@ -245,15 +276,10 @@ const va = `
   }
   .panel[hidden] { display: none; }
 
-  .head {
-    display: flex; align-items: center; gap: 4px;
-    padding: 10px 10px 6px 14px; /* the actions row below carries the divider */
-  }
-  .brand { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; flex: 1; }
   .icon-btn {
     width: 28px; height: 28px; padding: 0;
     border: 0; border-radius: 6px;
-    background: transparent; color: var(--p-muted);
+    background: transparent; color: var(--p-fg);
     display: grid; place-items: center;
     cursor: pointer;
   }
@@ -297,6 +323,7 @@ const va = `
     display: flex; gap: 2px; padding: 2px;
     border-radius: 6px;
     background: var(--p-track);
+    border: 1px solid var(--p-line-strong); /* clearer group edge (Ravi, 2026-10-16) */
   }
   .seg [role="radio"] {
     flex: 1 1 0; min-width: 0;
@@ -313,7 +340,7 @@ const va = `
   .seg [role="radio"]:hover { background: var(--p-hover); color: var(--p-fg); }
   .seg [aria-checked="true"] {
     background: var(--p-bg); color: var(--p-fg);
-    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+    box-shadow: inset 0 0 0 1px var(--p-brand);
   }
   .seg [aria-checked="true"]:hover { background: var(--p-hover); }
   .seg [role="radio"]:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 0; position: relative; }
@@ -438,7 +465,7 @@ const va = `
     box-shadow: inset 0 0 0 2px transparent;
   }
   .swatch:hover .swatch-ring { box-shadow: inset 0 0 0 2px var(--p-line); }
-  .swatch[aria-checked="true"] .swatch-ring { box-shadow: inset 0 0 0 2px var(--p-accent); }
+  .swatch[aria-checked="true"] .swatch-ring { box-shadow: inset 0 0 0 2px var(--p-brand); }
   .swatch:focus-visible .swatch-ring { box-shadow: none; outline: 2px dashed var(--p-accent); outline-offset: -2px; }
   .swatch-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
   .swatch-label { font-size: 12px; color: var(--p-muted); }
@@ -446,16 +473,60 @@ const va = `
 
   /* Second header row: the global actions that used to be the footer */
   .actions {
-    border-bottom: 1px solid var(--p-line);
-    padding: 2px 10px 10px;
+    padding: 8px 8px 8px 8px;
+    border-top: 1px solid var(--p-line);
     display: flex; align-items: center; gap: 2px;
     color: var(--p-muted); font-size: 12px;
   }
   .spacer { flex: 1; }
+  .sep { width: 1px; height: 16px; margin: 0 3px; background: var(--p-line-strong); flex: none; }
+  /* Changes: an icon with the count badge on its corner */
+  /* Changes: just the count in a circle (Ravi, 2026-10-16); opens the side panel */
+  .changes-btn {
+    flex: none; height: 28px; padding: 0 3px; border: 0; border-radius: 6px;
+    background: transparent; display: grid; place-items: center; cursor: pointer;
+  }
+  .changes-btn .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; background: var(--p-hover); color: var(--p-muted); }
+  .changes-btn.has-changes .badge { background: var(--p-brand); color: #fff; }
+  .changes-btn:hover .badge { box-shadow: 0 0 0 2px var(--p-line-strong); }
+  .changes-btn[aria-pressed="true"] .badge { box-shadow: 0 0 0 2px var(--p-brand-fg); }
+  .changes-btn:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 0; }
+
+  /* Changes side panel: beside the main panel, on the side away from the edge */
+  .side {
+    width: 300px; max-width: calc(100vw - var(--off-x) - 440px);
+    max-height: calc(100vh - var(--off-y) - 16px);
+    max-height: calc(100dvh - var(--off-y) - 16px);
+    background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 14px;
+    box-shadow: var(--p-shadow);
+    display: flex; flex-direction: column; overflow: hidden;
+  }
+  .side[hidden] { display: none; }
+  .side-head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 8px 8px 14px; border-bottom: 1px solid var(--p-line);
+    font-size: 13px; font-weight: 600;
+  }
+  .side .body { flex: 0 1 auto; min-height: 0; } /* as tall as the list; scrolls when the window is shorter */
+  .wrap.at-top .side { align-self: flex-start; }
+  /* Phones: the one footer row gets compact (no dividers, "Copy", 26px icons) */
+  @media (max-width: 440px) {
+    .actions .sep, .apply-btn .wide { display: none; }
+    .actions .icon-btn { width: 26px; }
+    /* icons only; the names stay as tooltips and for screen readers */
+    .tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+    .tab { padding: 9px 0; }
+  }
+  /* Not enough room beside it (phones): over the main panel instead */
+  @media (max-width: 780px) {
+    .side { position: absolute; bottom: 0; right: 54px; width: min(360px, calc(100vw - var(--off-x) - 70px)); max-width: none; z-index: 4; }
+    .wrap.at-left .side { right: auto; left: 54px; }
+    .wrap.at-top .side { bottom: auto; top: 0; }
+  }
   .icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
   .actions .icon-btn, .actions .apply { flex: none; } /* Undo / Redo / Copy prompt keep their size; Changes gives way if space runs out */
   .actions .text-btn { min-width: 0; overflow: hidden; }
-  .icon-btn[aria-pressed="true"] { background: var(--p-accent); color: var(--p-on-accent); }
+  .icon-btn[aria-pressed="true"], .icon-btn[aria-pressed="true"]:hover { background: var(--p-hover); color: var(--p-brand-fg); }
   kbd {
     font: 11px ui-monospace, "SF Mono", Menlo, monospace;
     border: 1px solid var(--p-line); border-radius: 4px;
@@ -489,9 +560,9 @@ const va = `
     color: var(--p-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
   }
   .text-btn:hover { background: var(--p-hover); color: var(--p-fg); }
-  .text-btn[aria-pressed="true"] { background: var(--p-hover); color: var(--p-fg); }
+  .text-btn[aria-pressed="true"] { background: var(--p-hover); color: var(--p-brand-fg); }
   .badge {
-    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
+    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; line-height: 1;
     display: inline-grid; place-items: center;
     background: var(--p-accent); color: var(--p-on-accent);
     font-size: 11px; font-weight: 600;
@@ -503,20 +574,22 @@ const va = `
   .apply-btn {
     height: 28px; padding: 0 12px;
     border: 0; border-radius: 6px;
-    background: var(--p-accent); color: var(--p-on-accent);
-    font: inherit; font-size: 12px; font-weight: 400; cursor: pointer;
+    /* Soft brand button (Ravi, 2026-10-16): was solid white */
+    background: color-mix(in srgb, var(--p-brand) 22%, transparent); color: var(--p-brand-fg);
+    font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
   }
   .apply { flex: none; }
+  .apply-btn:hover, .apply-menu-btn:hover { background: color-mix(in srgb, var(--p-brand) 32%, transparent); }
   .apply .apply-btn { border-radius: 6px 0 0 6px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap; }
   .apply-menu-btn {
     width: 22px; height: 28px; padding: 0;
     display: grid; place-items: center;
-    border: 0; border-left: 1px solid color-mix(in srgb, var(--p-on-accent) 25%, transparent);
+    border: 0; border-left: 1px solid color-mix(in srgb, var(--p-brand) 45%, transparent);
     border-radius: 0 6px 6px 0;
-    background: var(--p-accent); color: var(--p-on-accent); cursor: pointer;
+    background: color-mix(in srgb, var(--p-brand) 22%, transparent); color: var(--p-brand-fg); cursor: pointer;
   }
   .menu {
-    position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; /* opens downwards from the header */
+    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 2; /* opens upwards from the bottom actions */
     min-width: 180px; padding: 4px; display: grid; gap: 2px;
     background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 8px;
     box-shadow: var(--p-shadow);
@@ -571,6 +644,7 @@ const va = `
   }
   .scope-name .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .scope-target:empty, .warnings:empty { display: none; }
+  .scope-note { font-size: 12px; line-height: 1.45; color: var(--p-muted); }
   .muted { color: var(--p-muted); }
   .empty { padding: 14px; color: var(--p-muted); font-size: 12px; line-height: 1.5; }
 
@@ -776,23 +850,26 @@ const va = `
   /* ---------- Tabbed layout (Figma: Panel — tabbed layout (proposal), 254:323) ---------- */
   .tabbar {
     display: flex; gap: 2px; padding: 6px;
-    border-top: 1px solid var(--p-line);
+    border-bottom: 1px solid var(--p-line); /* tabs on top (Ravi, 2026-10-16) */
   }
   .tab {
     flex: 1 1 0; min-width: 0;
     display: grid; justify-items: center; gap: 3px;
-    padding: 7px 2px 6px; border: 0; border-radius: 8px;
-    background: transparent; color: var(--p-muted);
+    padding: 7px 0 6px; border: 0; border-radius: 8px; /* no side padding: six labels + the Minimise chevron fit 360px */
+    background: transparent; color: var(--p-fg);
     font: inherit; font-size: 11px; cursor: pointer;
   }
   .tab:hover { background: var(--p-hover); color: var(--p-fg); }
-  .tab[aria-pressed="true"] { background: var(--p-hover); color: var(--p-fg); font-weight: 600; }
+  .tab[aria-pressed="true"] { background: var(--p-hover); color: var(--p-brand-fg); font-weight: 600; }
   .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   /* Minimised (proposal, not yet in Figma): only the tab bar (and the Compare
      strip while it shows); clicking a tab opens the panel on that tab. */
   .panel.minimised > :not(.tabbar):not(.original-pill) { display: none; }
-  .panel.minimised .tabbar { border-top: 0; }
+  .panel.minimised .tabbar { border-bottom: 0; }
+  .tab-min { flex: none; align-self: center; width: 24px; }
+  .tab-min svg { transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .panel.minimised .tab-min svg { transform: rotate(180deg); }
   .page-fields { gap: 16px; }
   .page-heading { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--p-fg); margin-bottom: -6px; }
   .page-heading .muted { font-size: 12px; font-weight: 400; }
@@ -801,12 +878,13 @@ const va = `
   .tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
   .tile {
     display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0;
-    padding: 8px; border: 1px solid var(--p-line); border-radius: 10px;
+    padding: 8px; border: 1px solid var(--p-line-strong); border-radius: 10px;
     background: var(--p-bg); color: var(--p-muted);
     font: inherit; font-size: 11px; text-align: center; cursor: pointer;
   }
   .tile:hover { border-color: var(--p-muted); }
-  .tile[aria-checked="true"] { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); color: var(--p-fg); font-weight: 600; }
+  .tile[aria-checked="true"] { border-color: var(--p-brand); box-shadow: inset 0 0 0 1px var(--p-brand); color: var(--p-fg); font-weight: 600; }
+  .tile.near:not([aria-checked="true"]) { border-style: dashed; border-color: var(--p-brand); } /* between two presets (Figma 275:921) */
   .tile:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
   .tile.wide { grid-column: 1 / -1; }
   .tile-text { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
@@ -831,26 +909,35 @@ const va = `
   .sketch i { height: 9px; border-radius: 2px; background: var(--p-line); }
   .sketch i:first-child { background: var(--p-muted); }
   .shape { display: block; }
-  .shape-button { width: 52px; height: 24px; background: #4f46e5; }
-  .shape-button.size-small { width: 38px; height: 16px; border-radius: 4px; }
-  .shape-button.size-medium { width: 52px; height: 22px; border-radius: 5px; }
-  .shape-button.size-large { width: 66px; height: 28px; border-radius: 6px; }
+  /* Live previews: --pv-* come from the page (panel.js syncPreviews); fallbacks = defaults. */
+  .shape-button { width: 52px; height: 24px; background: var(--pv-primary, #4f46e5); }
+  .shape-button.size-small { width: 38px; height: 16px; border-radius: min(var(--pv-radius-control, 8px), 8px); }
+  .shape-button.size-medium { width: 52px; height: 22px; border-radius: min(var(--pv-radius-control, 8px), 11px); }
+  .shape-button.size-large { width: 66px; height: 28px; border-radius: min(var(--pv-radius-control, 8px), 14px); }
   .shape-card { width: 52px; height: 38px; background: var(--p-bg); border: 1px solid var(--p-muted); }
-  .shape-card.border-none { border-color: transparent; background: var(--p-hover); border-radius: 6px; }
-  .shape-card.border-thin { border-radius: 6px; }
-  .shape-card.border-thick { border-width: 2px; border-radius: 6px; }
-  /* Style tiles (v0.4): Figma "Shape — with styles" 257:711 */
-  .shape-button[class*="style-"] { width: 52px; height: 22px; border-radius: 5px; display: grid; place-items: center; border: 1.5px solid transparent; }
-  .shape-button[class*="style-"]::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: #a5b4fc; }
-  .shape-button.style-solid::after { background: #fff; }
-  .shape-button.style-soft { background: rgb(79 70 229 / 0.32); }
-  .shape-button.style-outline { background: transparent; border-color: #818cf8; }
+  .shape-card[class*="border-"] { border-radius: min(calc(var(--pv-radius-container, 12px) / 2), 10px); }
+  .shape-card.border-none { border-color: transparent; background: var(--p-hover); }
+  .shape-card.border-thick { border-width: 2px; }
+  /* Button style tiles (Figma 281:1158) */
+  .shape-button[class*="style-"] { width: 52px; height: 22px; border-radius: min(var(--pv-radius-control, 8px), 11px); display: grid; place-items: center; border: 1.5px solid transparent; }
+  .shape-button[class*="style-"]::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--pv-primary, #4f46e5) 55%, white); }
+  .shape-button.style-solid::after { background: var(--pv-on-primary, #fff); }
+  .shape-button.style-soft { background: color-mix(in srgb, var(--pv-primary, #4f46e5) 32%, transparent); }
+  .shape-button.style-outline { background: transparent; border-color: color-mix(in srgb, var(--pv-primary, #4f46e5) 70%, white); }
   .shape-button.style-ghost { background: transparent; }
-  .shape-card[class*="style-"] { border-radius: 6px; }
-  .shape-card.style-filled { background: var(--p-hover); border-color: var(--p-line); }
-  .shape-card.style-outlined { background: transparent; border-color: var(--p-muted); }
-  .shape-card.style-elevated { background: color-mix(in oklch, var(--p-hover) 88%, white); border-color: transparent; box-shadow: 0 5px 12px rgb(0 0 0 / 0.55); }
-  .shape-card.style-tinted { background: rgb(79 70 229 / 0.2); border-color: rgb(129 140 248 / 0.5); }
+  /* Card style tiles: a mini card with content lines on a page backdrop (Figma 281:1421) */
+  .mini { display: grid; place-items: center; width: 60px; height: 42px; border-radius: 6px; background: var(--p-hover); }
+  .mini-card {
+    width: 44px; height: 28px; padding: 0 7px; box-sizing: border-box;
+    display: grid; align-content: center; gap: 4px;
+    border: 1px solid transparent; border-radius: min(calc(var(--pv-radius-container, 12px) / 2), 10px);
+  }
+  .mini-card i { display: block; width: 22px; height: 3px; border-radius: 2px; background: #a1a1aa; }
+  .mini-card i + i { width: 30px; background: #71717a; }
+  .mini-card.style-filled { background: #3f3f46; border-color: #52525b; }
+  .mini-card.style-outlined { background: transparent; border-color: #a1a1aa; }
+  .mini-card.style-elevated { background: #52525b; box-shadow: 0 4px 8px rgb(0 0 0 / 0.7); }
+  .mini-card.style-tinted { background: color-mix(in srgb, var(--pv-primary, #6366f1) 30%, transparent); border-color: color-mix(in srgb, var(--pv-primary, #6366f1) 70%, white); }
   .shape-card[class*="shadow-"] { width: 44px; height: 32px; border-radius: 6px; border-color: var(--p-line); margin: 4px 0 6px; }
   .shape-card.shadow-bold { border-color: var(--p-fg); }
 
@@ -901,106 +988,109 @@ const va = `
   .summary-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
   .summary-swatch[hidden] { display: none; }
   .summary-row .chev { display: grid; color: var(--p-muted); }
-`, P = (e, t, n) => `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${t}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
-  dial: P(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  link: P(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
-  reset: P(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
-  close: P(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
-  chevron: P(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
+`, A = (e, t, n) => `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${t}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, P = {
+  dial: A(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  link: A(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
+  reset: A(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
+  close: A(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
+  chevron: A(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
   // Proposals: not yet in the Figma Icon/* set.
-  pick: P(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
-  compare: P(15, 2, '<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),
-  undo: P(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
-  redo: P(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
-  back: P(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
-  down: P(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
-  minimise: P(15, 2, '<path d="M5 12h14"/>'),
-  copy: P(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
-  warn: P(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
+  // Figma: Icon/Cursor (39:313), the header's Pick button.
+  pick: A(15, 2, '<path d="M17.202 10.5576C17.6738 10.3035 17.9098 10.1765 17.9694 10.0236C18.0212 9.89097 18.0066 9.74158 17.9301 9.6215C17.8419 9.48312 17.5858 9.40424 17.0737 9.24647L7.05204 6.15943C6.63366 6.03055 6.42447 5.96611 6.28318 6.01796C6.16011 6.06312 6.06312 6.16011 6.01796 6.28317C5.96611 6.42446 6.03055 6.63365 6.15943 7.05204L9.24645 17.0737C9.40422 17.5858 9.4831 17.8419 9.62147 17.9301C9.74156 18.0066 9.89095 18.0212 10.0236 17.9694C10.1764 17.9098 10.3035 17.6738 10.5576 17.202L12.7816 13.0717C12.8193 13.0016 12.8382 12.9666 12.8625 12.9359C12.884 12.9086 12.9086 12.884 12.9359 12.8624C12.9666 12.8382 13.0016 12.8193 13.0717 12.7816L17.202 10.5576Z"/>'),
+  compare: A(15, 2, '<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),
+  undo: A(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
+  redo: A(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
+  back: A(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
+  down: A(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
+  minimise: A(15, 2, '<path d="M6 9l6 6 6-6"/>'),
+  // chevron at the end of the tab bar; flips to ˄ when minimised (Ravi, 2026-10-16)
+  changes: A(15, 2, '<path d="M9 6h11M9 12h11M9 18h11"/><path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>'),
+  copy: A(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
+  warn: A(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
   // Launcher: the Panel product mark (Twiddle brand; Figma Logo page › Panel mark; also site/favicon.svg).
   // A switch knocked out of a disc; knob + two-dot trail. Classes let the Toggle animation move them.
   panelMark: '<svg class="mark" width="44" height="44" viewBox="0 0 120 120" aria-hidden="true"><path class="mark-disc" fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120ZM86 76C86 90.3594 74.3594 102 60 102C45.6406 102 34 90.3594 34 76V44C34 29.6406 45.6406 18 60 18C74.3594 18 86 29.6406 86 44V76ZM60 22C72.1503 22 82 31.8497 82 44V76C82 88.1503 72.1503 98 60 98C47.8497 98 38 88.1503 38 76V44C38 31.8497 47.8497 22 60 22Z"/><circle class="mark-t2" cx="60" cy="80.46" r="4.28"/><circle class="mark-t1" cx="60" cy="66.04" r="7.14"/><circle class="mark-knob" cx="60" cy="44" r="11.9"/></svg>',
   // Tab bar (Figma: Panel — tabbed layout (proposal), Icon/Tab * components)
-  tabOverview: P(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  tabColour: P(18, 2, '<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),
-  tabType: P(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
-  tabSpacing: P(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
-  tabShape: P(18, 2, '<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),
-  tabShadows: P(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
-  sliders: P(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
+  tabOverview: A(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  tabColour: A(18, 2, '<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),
+  tabType: A(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
+  tabSpacing: A(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
+  tabShape: A(18, 2, '<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),
+  tabShadows: A(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
+  sliders: A(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
   // Figma: Icon/Sliders (proposal)
-}, Rn = "twiddle:";
-function Z(e) {
+}, Gn = "twiddle:";
+function ne(e) {
   try {
-    return localStorage.getItem(Rn + e);
+    return localStorage.getItem(Gn + e);
   } catch {
     return null;
   }
 }
-function oe(e, t) {
+function ce(e, t) {
   try {
-    localStorage.setItem(Rn + e, t);
+    localStorage.setItem(Gn + e, t);
   } catch {
   }
 }
-const re = 44, ae = 8, ka = 4, zn = { corner: "br", x: 16, y: 16 };
-function Sa() {
+const pe = 44, de = 8, Ba = 4, Yn = { corner: "br", x: 16, y: 16 };
+function Ua() {
   try {
-    const e = JSON.parse(Z("position"));
+    const e = JSON.parse(ne("position"));
     if (e && /^[tb][lr]$/.test(e.corner) && isFinite(e.x) && isFinite(e.y)) return e;
   } catch {
   }
-  return { ...zn };
+  return { ...Yn };
 }
-function rn(e) {
-  const t = Math.max(ae, innerWidth - re - ae), n = Math.max(ae, innerHeight - re - ae);
-  return { corner: e.corner, x: Math.round(Math.min(Math.max(e.x, ae), t)), y: Math.round(Math.min(Math.max(e.y, ae), n)) };
+function bn(e) {
+  const t = Math.max(de, innerWidth - pe - de), n = Math.max(de, innerHeight - pe - de);
+  return { corner: e.corner, x: Math.round(Math.min(Math.max(e.x, de), t)), y: Math.round(Math.min(Math.max(e.y, de), n)) };
 }
-function $a({ wrapEl: e, launcherEl: t }) {
-  let n = Sa();
+function Va({ wrapEl: e, launcherEl: t }) {
+  let n = Ua();
   function a() {
-    const d = rn(n), p = d.corner[1] === "l", u = d.corner[0] === "t";
+    const d = bn(n), p = d.corner[1] === "l", f = d.corner[0] === "t";
     Object.assign(e.style, {
       left: p ? `${d.x}px` : "auto",
       right: p ? "auto" : `${d.x}px`,
-      top: u ? `${d.y}px` : "auto",
-      bottom: u ? "auto" : `${d.y}px`
-    }), e.style.setProperty("--off-x", `${d.x}px`), e.style.setProperty("--off-y", `${d.y}px`), e.classList.toggle("at-left", p), e.classList.toggle("at-top", u);
+      top: f ? `${d.y}px` : "auto",
+      bottom: f ? "auto" : `${d.y}px`
+    }), e.style.setProperty("--off-x", `${d.x}px`), e.style.setProperty("--off-y", `${d.y}px`), e.classList.toggle("at-left", p), e.classList.toggle("at-top", f);
   }
   function o(d, p = !0) {
-    n = rn(d), a(), p && oe("position", JSON.stringify(n));
+    n = bn(d), a(), p && ce("position", JSON.stringify(n));
   }
-  function s(d, p) {
-    const u = d + re / 2 < innerWidth / 2, v = p + re / 2 < innerHeight / 2, f = !v && e.classList.contains("is-open") ? 10 : 0;
+  function r(d, p) {
+    const f = d + pe / 2 < innerWidth / 2, v = p + pe / 2 < innerHeight / 2, u = !v && e.classList.contains("is-open") ? 10 : 0;
     return {
-      corner: (v ? "t" : "b") + (u ? "l" : "r"),
-      x: u ? d : innerWidth - d - re,
-      y: v ? p : innerHeight - p - re - f
+      corner: (v ? "t" : "b") + (f ? "l" : "r"),
+      x: f ? d : innerWidth - d - pe,
+      y: v ? p : innerHeight - p - pe - u
     };
   }
-  let r = null, i = !1;
+  let s = null, i = !1;
   t.addEventListener("pointerdown", (d) => {
     if (d.button !== 0) return;
     const p = t.getBoundingClientRect();
-    r = { id: d.pointerId, sx: d.clientX, sy: d.clientY, dx: d.clientX - p.left, dy: d.clientY - p.top, moving: !1 };
+    s = { id: d.pointerId, sx: d.clientX, sy: d.clientY, dx: d.clientX - p.left, dy: d.clientY - p.top, moving: !1 };
   }), t.addEventListener("pointermove", (d) => {
-    if (!(!r || d.pointerId !== r.id)) {
-      if (!r.moving) {
-        if (Math.hypot(d.clientX - r.sx, d.clientY - r.sy) < ka) return;
-        r.moving = !0, t.setPointerCapture(d.pointerId), e.classList.add("dragging");
+    if (!(!s || d.pointerId !== s.id)) {
+      if (!s.moving) {
+        if (Math.hypot(d.clientX - s.sx, d.clientY - s.sy) < Ba) return;
+        s.moving = !0, t.setPointerCapture(d.pointerId), e.classList.add("dragging");
       }
-      o(s(d.clientX - r.dx, d.clientY - r.dy), !1);
+      o(r(d.clientX - s.dx, d.clientY - s.dy), !1);
     }
   });
   const l = (d) => {
-    !r || d.pointerId !== r.id || (r.moving && (i = !0, e.classList.remove("dragging"), o(n)), r = null);
+    !s || d.pointerId !== s.id || (s.moving && (i = !0, e.classList.remove("dragging"), o(n)), s = null);
   };
   return t.addEventListener("pointerup", l), t.addEventListener("pointercancel", l), t.addEventListener("keydown", (d) => {
     const p = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[d.key];
     if (!p || d.altKey || d.metaKey || d.ctrlKey) return;
     d.preventDefault();
-    const u = d.shiftKey ? 10 : 1, v = n.corner[1] === "l" ? 1 : -1, f = n.corner[0] === "t" ? 1 : -1;
-    o({ corner: n.corner, x: n.x + p[0] * u * v, y: n.y + p[1] * u * f });
+    const f = d.shiftKey ? 10 : 1, v = n.corner[1] === "l" ? 1 : -1, u = n.corner[0] === "t" ? 1 : -1;
+    o({ corner: n.corner, x: n.x + p[0] * f * v, y: n.y + p[1] * f * u });
   }), window.addEventListener("resize", a), a(), {
     /** Call from the launcher's click handler: true = ignore this click (it ended a drag). */
     consumeClick() {
@@ -1008,11 +1098,11 @@ function $a({ wrapEl: e, launcherEl: t }) {
       return i = !1, d;
     },
     reset() {
-      o({ ...zn });
+      o({ ...Yn });
     }
   };
 }
-function ce({ label: e, options: t, onSelect: n }) {
+function ge({ label: e, options: t, onSelect: n }) {
   const a = document.createElement("div");
   a.className = "seg", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", e);
   const o = t.map((l) => {
@@ -1020,35 +1110,35 @@ function ce({ label: e, options: t, onSelect: n }) {
     return d.type = "button", d.setAttribute("role", "radio"), d.dataset.value = l.value, d.textContent = l.label, l.title && (d.title = l.title), d.addEventListener("click", () => i(l.value)), d;
   });
   a.append(...o);
-  let s = null;
-  function r(l) {
-    s = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
+  let r = null;
+  function s(l) {
+    r = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
     const d = Math.max(0, o.findIndex((p) => p.dataset.value === l));
-    o.forEach((p, u) => {
-      p.tabIndex = u === d ? 0 : -1;
+    o.forEach((p, f) => {
+      p.tabIndex = f === d ? 0 : -1;
     });
   }
   function i(l, d) {
-    l !== s && (r(l), n(l)), d && o.find((p) => p.dataset.value === l).focus();
+    l !== r && (s(l), n(l)), d && o.find((p) => p.dataset.value === l).focus();
   }
   return a.addEventListener("keydown", (l) => {
     const d = o.indexOf(l.target);
     if (d < 0) return;
     const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let u;
-    if (p) u = (d + p + o.length) % o.length;
-    else if (l.key === "Home") u = 0;
-    else if (l.key === "End") u = o.length - 1;
+    let f;
+    if (p) f = (d + p + o.length) % o.length;
+    else if (l.key === "Home") f = 0;
+    else if (l.key === "End") f = o.length - 1;
     else return;
-    l.preventDefault(), i(o[u].dataset.value, !0);
-  }), r(null), { el: a, setValue: r };
+    l.preventDefault(), i(o[f].dataset.value, !0);
+  }), s(null), { el: a, setValue: s };
 }
-const In = /var\(\s*(--twd-[\w-]+)/g, Ea = /::?[\w-]+(\([^)]*\))?/g;
-function* _e(e) {
+const Xn = /var\(\s*(--twd-[\w-]+)/g, qa = /::?[\w-]+(\([^)]*\))?/g;
+function* Qe(e) {
   for (const t of e)
-    t.selectorText != null && (yield t), t.cssRules && (yield* _e(t.cssRules));
+    t.selectorText != null && (yield t), t.cssRules && (yield* Qe(t.cssRules));
 }
-function Ca() {
+function Ha() {
   const e = [];
   for (const t of document.styleSheets) {
     if (t.ownerNode?.id === "twiddle-scoped") continue;
@@ -1058,92 +1148,92 @@ function Ca() {
     } catch {
       continue;
     }
-    for (const a of _e(n)) {
-      const o = [...a.style.cssText.matchAll(In)].map((s) => s[1]);
+    for (const a of Qe(n)) {
+      const o = [...a.style.cssText.matchAll(Xn)].map((r) => r[1]);
       o.length && e.push({ selectors: a.selectorText.split(","), vars: o });
     }
   }
   return e;
 }
-function Ma(e, t) {
-  const n = t.replace(Ea, "").trim() || "*";
+function _a(e, t) {
+  const n = t.replace(qa, "").trim() || "*";
   try {
     return e.matches(n);
   } catch {
     return !1;
   }
 }
-function Dn(e) {
+function Zn(e) {
   const t = /* @__PURE__ */ new Set(), n = [];
-  return Ca().forEach(({ selectors: a, vars: o }) => {
-    const s = a.find((r) => Ma(e, r));
-    s && (o.forEach((r) => t.add(r)), n.push(s.trim()));
-  }), [...(e.getAttribute("style") || "").matchAll(In)].forEach((a) => t.add(a[1])), { names: t, selectors: n };
+  return Ha().forEach(({ selectors: a, vars: o }) => {
+    const r = a.find((s) => _a(e, s));
+    r && (o.forEach((s) => t.add(s)), n.push(r.trim()));
+  }), [...(e.getAttribute("style") || "").matchAll(Xn)].forEach((a) => t.add(a[1])), { names: t, selectors: n };
 }
-const yt = (e) => window.CSS && CSS.escape ? CSS.escape(e) : e;
-function Ta(e) {
+const Pt = (e) => window.CSS && CSS.escape ? CSS.escape(e) : e;
+function Ka(e) {
   const t = [];
   let n = e;
   for (; n && n.nodeType === 1 && n !== document.body && n !== document.documentElement; ) {
-    if (n.id && document.querySelectorAll(`#${yt(n.id)}`).length === 1)
-      return t.unshift(`#${yt(n.id)}`), t.join(" > ");
-    const a = n.localName, o = [...n.parentElement.children].filter((s) => s.localName === a);
+    if (n.id && document.querySelectorAll(`#${Pt(n.id)}`).length === 1)
+      return t.unshift(`#${Pt(n.id)}`), t.join(" > ");
+    const a = n.localName, o = [...n.parentElement.children].filter((r) => r.localName === a);
     t.unshift(o.length > 1 ? `${a}:nth-of-type(${o.indexOf(n) + 1})` : a), n = n.parentElement;
   }
   return ["body", ...t].join(" > ");
 }
-function Aa(e, t = Dn(e).selectors) {
+function Wa(e, t = Zn(e).selectors) {
   const n = e.getAttribute("data-twd");
   if (n) return `[data-twd="${n.replace(/"/g, "")}"]`;
-  const a = [...e.classList], s = a.find((r) => t.some((i) => new RegExp(`\\.${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
-  return s ? `.${yt(s)}` : null;
+  const a = [...e.classList], r = a.find((s) => t.some((i) => new RegExp(`\\.${s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
+  return r ? `.${Pt(r)}` : null;
 }
-function La(e) {
-  const t = Dn(e), n = Aa(e, t.selectors), a = (e.getAttribute("aria-label") || e.placeholder || e.textContent || "").trim().replace(/\s+/g, " ");
+function Ga(e) {
+  const t = Zn(e), n = Wa(e, t.selectors), a = (e.getAttribute("aria-label") || e.placeholder || e.textContent || "").trim().replace(/\s+/g, " ");
   return {
     el: e,
     tag: e.localName,
     classes: [...e.classList],
     text: a.length > 40 ? `${a.slice(0, 40)}…` : a,
     tokens: t.names,
-    elementSelector: Ta(e),
+    elementSelector: Ka(e),
     classSelector: n,
     classCount: n ? document.querySelectorAll(n).length : 0
   };
 }
-const vt = (e) => e.localName + [...e.classList].map((t) => `.${t}`).join(""), Pa = { radius: "px", intensity: "%", base: "px" }, Un = (e) => e.charAt(0).toUpperCase() + e.slice(1), Oa = (e, t) => typeof t == "number" || /^\d+$/.test(t) ? `${t}${Pa[e] || ""}` : Un(String(t));
-function sn(e, t, n) {
-  const a = jn(() => e.tokens({ [e.id]: t }) || {}), o = Object.keys(a);
-  let s = {};
+const Ot = (e) => e.localName + [...e.classList].map((t) => `.${t}`).join(""), Ya = { radius: "px", intensity: "%", base: "px" }, Jn = (e) => e.charAt(0).toUpperCase() + e.slice(1), Xa = (e, t) => typeof t == "number" || /^\d+$/.test(t) ? `${t}${Ya[e] || ""}` : Jn(String(t));
+function xn(e, t, n) {
+  const a = Wn(() => e.tokens({ [e.id]: t }) || {}), o = Object.keys(a);
+  let r = {};
   if (o.length) {
-    const r = n.selector ? document.querySelector(n.selector) : void 0;
-    s = xa(o, r || void 0);
+    const s = n.selector ? document.querySelector(n.selector) : void 0;
+    r = Ra(o, s || void 0);
   }
   return {
     ...n,
     sectionId: e.id,
     title: e.title,
-    settings: Object.entries(t).map(([r, i]) => ({ key: r, label: Un(r), value: Oa(r, i), ...e.describe?.(r, i) || {} })),
-    tokens: o.map((r) => ({ name: r, from: s[r] || "", to: a[r] }))
+    settings: Object.entries(t).map(([s, i]) => ({ key: s, label: Jn(s), value: Xa(s, i), ...e.describe?.(s, i) || {} })),
+    tokens: o.map((s) => ({ name: s, from: r[s] || "", to: a[s] }))
   };
 }
-function ln(e, t) {
+function wn(e, t) {
   const n = [];
   return t.forEach((a) => {
-    e[a.id] && n.push(sn(a, e[a.id], { kind: "global", selector: null }));
+    e[a.id] && n.push(xn(a, e[a.id], { kind: "global", selector: null }));
   }), Object.entries(e.scopes || {}).forEach(([a, o]) => {
-    const s = xt(a) ? "class" : "element";
-    t.forEach((r) => {
-      o[r.id] && n.push(sn(r, o[r.id], { kind: s, selector: a }));
+    const r = Lt(a) ? "class" : "element";
+    t.forEach((s) => {
+      o[s.id] && n.push(xn(s, o[s.id], { kind: r, selector: a }));
     });
   }), n;
 }
-function Fa(e) {
-  const t = (o) => Object.values(o || {}).reduce((s, r) => s + Object.keys(r || {}).length, 0), { scopes: n, ...a } = e;
-  return t(a) + Object.values(n || {}).reduce((o, s) => o + t(s), 0);
+function Za(e) {
+  const t = (o) => Object.values(o || {}).reduce((r, s) => r + Object.keys(s || {}).length, 0), { scopes: n, ...a } = e;
+  return t(a) + Object.values(n || {}).reduce((o, r) => o + t(r), 0);
 }
-const le = (e) => `\`${e}\``, et = (e) => e.map((t) => `  - ${le(t.name)}: ${t.from ? `${le(t.from)} → ` : ""}${le(t.to)}`), tt = (e) => `${e.title} › ${e.settings.map((t) => `${t.label}: ${t.value}`).join(", ")}`;
-function Na(e) {
+const ue = (e) => `\`${e}\``, ct = (e) => e.map((t) => `  - ${ue(t.name)}: ${t.from ? `${ue(t.from)} → ` : ""}${ue(t.to)}`), pt = (e) => `${e.title} › ${e.settings.map((t) => `${t.label}: ${t.value}`).join(", ")}`;
+function Ja(e) {
   let t = null;
   try {
     t = document.querySelector(e);
@@ -1151,58 +1241,58 @@ function Na(e) {
   }
   if (!t) return "not found on the current page";
   const n = (t.getAttribute("aria-label") || t.placeholder || t.textContent || "").trim().replace(/\s+/g, " ").slice(0, 60);
-  return `${le(vt(t))}${n ? ` with text “${n}”` : ""}`;
+  return `${ue(Ot(t))}${n ? ` with text “${n}”` : ""}`;
 }
-function dn(e, t) {
+function vn(e, t) {
   const n = /* @__PURE__ */ new Map();
   return e.forEach((a) => {
     const o = a[t];
     n.has(o) || n.set(o, []), n.get(o).push(a);
   }), [...n];
 }
-function ja(e, { link: t = location.href, warnings: n = [] } = {}) {
+function Qa(e, { link: t = location.href, warnings: n = [] } = {}) {
   if (!e.length) return "";
-  const a = e.filter((i) => i.kind === "global"), o = e.filter((i) => i.kind === "class"), s = e.filter((i) => i.kind === "element"), r = [];
-  if (r.push(
+  const a = e.filter((i) => i.kind === "global"), o = e.filter((i) => i.kind === "class"), r = e.filter((i) => i.kind === "element"), s = [];
+  if (s.push(
     "# Apply design tweaks from Panel",
     "",
     "I explored design changes to this prototype with Panel (by Twiddle), a tweak panel that overrides the prototype's `--twd-*` CSS custom properties (design tokens) at runtime. Make these changes permanent in the source code.",
     "",
     `Preview of the tweaked version: ${t}`
-  ), a.length && (r.push(
+  ), a.length && (s.push(
     "",
     "## 1. Global token changes",
     "",
     "Update the default value of each token where it is defined (usually a `:root` rule or a `tokens.css` / `twiddle-tokens.css` file). Change the definition, not the places that use it.",
     ""
-  ), a.forEach((i) => r.push(`- **${tt(i)}**`, ...et(i.tokens)))), o.length && (r.push(
+  ), a.forEach((i) => s.push(`- **${pt(i)}**`, ...ct(i.tokens)))), o.length && (s.push(
     "",
     `## ${a.length ? 2 : 1}. Component-wide changes`,
     "",
     "These apply to every element matching the selector. In the CSS rule for that component, redeclare the token, e.g. `.input { --twd-radius-control: 999px; }`. Don't replace the `var(--twd-…)` usages with fixed values.",
     ""
-  ), dn(o, "selector").forEach(([i, l]) => {
-    r.push(`- ${le(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((d) => r.push(`  - **${tt(d)}**`, ...et(d.tokens).map((p) => `  ${p}`)));
-  })), s.length) {
+  ), vn(o, "selector").forEach(([i, l]) => {
+    s.push(`- ${ue(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((d) => s.push(`  - **${pt(d)}**`, ...ct(d.tokens).map((p) => `  ${p}`)));
+  })), r.length) {
     const i = 1 + (a.length ? 1 : 0) + (o.length ? 1 : 0);
-    r.push(
+    s.push(
       "",
       `## ${i}. Single-element changes`,
       "",
       "These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",
       ""
-    ), dn(s, "selector").forEach(([l, d]) => {
-      r.push(`- ${Na(l)}, found at ${le(l)}`), d.forEach((p) => r.push(`  - **${tt(p)}**`, ...et(p.tokens).map((u) => `  ${u}`)));
+    ), vn(r, "selector").forEach(([l, d]) => {
+      s.push(`- ${Ja(l)}, found at ${ue(l)}`), d.forEach((p) => s.push(`  - **${pt(p)}**`, ...ct(p.tokens).map((f) => `  ${f}`)));
     });
   }
-  return n.length && r.push(
+  return n.length && s.push(
     "",
     "## Contrast to check",
     "",
     "Panel flagged these colour pairs as below WCAG AA with the new values:",
     "",
     ...n.map((i) => `- ${i.text}`)
-  ), r.push(
+  ), s.push(
     "",
     "## Constraints",
     "",
@@ -1210,71 +1300,71 @@ function ja(e, { link: t = location.href, warnings: n = [] } = {}) {
     "- Change only what is listed above.",
     "- If a value uses `color-mix()` and the project targets older browsers, ask before converting it.",
     "- When done, list the files you changed."
-  ), r.join(`
+  ), s.join(`
 `);
 }
-const Ue = 4.5, Ra = 3, za = [
+const Ye = 4.5, eo = 3, to = [
   ["--twd-text", "--twd-bg", "Text on background"],
   ["--twd-text", "--twd-surface", "Text on surface"],
   ["--twd-text-muted", "--twd-surface", "Muted text on surface"],
   ["--twd-on-primary", "--twd-primary", "Text on brand"]
 ];
-let Y;
-function Mt(e) {
-  if (!e || (Y ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !Y)) return null;
-  Y.clearRect(0, 0, 1, 1), Y.fillStyle = "#000", Y.fillStyle = e, Y.fillRect(0, 0, 1, 1);
-  const [t, n, a, o] = Y.getImageData(0, 0, 1, 1).data;
+let Q;
+function It(e) {
+  if (!e || (Q ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !Q)) return null;
+  Q.clearRect(0, 0, 1, 1), Q.fillStyle = "#000", Q.fillStyle = e, Q.fillRect(0, 0, 1, 1);
+  const [t, n, a, o] = Q.getImageData(0, 0, 1, 1).data;
   return [t, n, a, o / 255];
 }
-function cn(e) {
+function yn(e) {
   const t = document.createElement("i");
   t.style.cssText = `position:absolute;visibility:hidden;color:var(${e})`, document.documentElement.appendChild(t);
   const n = getComputedStyle(t).color;
-  return t.remove(), Mt(n);
+  return t.remove(), It(n);
 }
-const pn = ([e, t, n]) => {
+const kn = ([e, t, n]) => {
   const a = (o) => (o /= 255, o <= 0.03928 ? o / 12.92 : ((o + 0.055) / 1.055) ** 2.4);
   return 0.2126 * a(e) + 0.7152 * a(t) + 0.0722 * a(n);
-}, Bn = (e, t) => e.slice(0, 3).map((n, a) => n * e[3] + t[a] * (1 - e[3])).concat(1);
-function qn(e, t) {
-  const n = pn(e[3] < 1 ? Bn(e, t) : e), a = pn(t);
+}, Qn = (e, t) => e.slice(0, 3).map((n, a) => n * e[3] + t[a] * (1 - e[3])).concat(1);
+function ea(e, t) {
+  const n = kn(e[3] < 1 ? Qn(e, t) : e), a = kn(t);
   return (Math.max(n, a) + 0.05) / (Math.min(n, a) + 0.05);
 }
-const Hn = (e) => `${e.toFixed(1)}:1`;
-function nt() {
+const ta = (e) => `${e.toFixed(1)}:1`;
+function ut() {
   const e = [];
-  return za.forEach(([t, n, a]) => {
-    const o = cn(t), s = cn(n);
-    if (!o || !s || s[3] === 0) return;
-    const r = qn(o, s);
-    r < Ue && e.push({ label: a, ratio: r, needed: Ue, text: `${a}: ${Hn(r)} · AA needs ${Ue}` });
+  return to.forEach(([t, n, a]) => {
+    const o = yn(t), r = yn(n);
+    if (!o || !r || r[3] === 0) return;
+    const s = ea(o, r);
+    s < Ye && e.push({ label: a, ratio: s, needed: Ye, text: `${a}: ${ta(s)} · AA needs ${Ye}` });
   }), e;
 }
-function Ia(e) {
+function no(e) {
   const t = [];
   for (let n = e; n && n.nodeType === 1; n = n.parentElement) {
-    const a = Mt(getComputedStyle(n).backgroundColor);
+    const a = It(getComputedStyle(n).backgroundColor);
     if (a && a[3] > 0 && (t.push(a), a[3] >= 1))
       break;
   }
-  return t.reduceRight((n, a) => Bn(a, n), [255, 255, 255, 1]);
+  return t.reduceRight((n, a) => Qn(a, n), [255, 255, 255, 1]);
 }
-function Da(e) {
+function ao(e) {
   if (!e.textContent.trim() && !e.placeholder) return null;
-  const t = getComputedStyle(e), n = Mt(t.color);
+  const t = getComputedStyle(e), n = It(t.color);
   if (!n) return null;
-  const a = parseFloat(t.fontSize), s = a >= 24 || a >= 18.66 && parseInt(t.fontWeight, 10) >= 700 ? Ra : Ue, r = qn(n, Ia(e));
-  return r < s ? { label: "This element", ratio: r, needed: s, text: `This element’s text: ${Hn(r)} · AA needs ${s}` } : null;
+  const a = parseFloat(t.fontSize), r = a >= 24 || a >= 18.66 && parseInt(t.fontWeight, 10) >= 700 ? eo : Ye, s = ea(n, no(e));
+  return s < r ? { label: "This element", ratio: s, needed: r, text: `This element’s text: ${ta(s)} · AA needs ${r}` } : null;
 }
-const un = "twiddle-panel", Ua = "0.8.2", hn = "https://panel.twiddle.in", Ba = "--twd-radius-control", qa = /var\(\s*--twd-/;
-function Ha(e) {
+const Sn = "twiddle-panel", oo = "0.9.1", $n = "https://panel.twiddle.in", ro = "--twd-radius-control", so = /var\(\s*--twd-/;
+function io(e) {
   return e.style.cssText.split(";").some((t) => {
     const n = t.slice(0, t.indexOf(":")).trim();
-    return n && !n.startsWith("--") && qa.test(t);
+    return n && !n.startsWith("--") && so.test(t);
   });
 }
-function Va() {
-  if (!getComputedStyle(document.documentElement).getPropertyValue(Ba).trim()) return "no-tokens";
+function lo() {
+  if (!getComputedStyle(document.documentElement).getPropertyValue(ro).trim()) return "no-tokens";
   let e = !1;
   for (const t of document.styleSheets) {
     if (t.ownerNode?.id === "twiddle-scoped") continue;
@@ -1285,11 +1375,11 @@ function Va() {
       e = !0;
       continue;
     }
-    for (const a of _e(n)) if (Ha(a)) return "ok";
+    for (const a of Qe(n)) if (io(a)) return "ok";
   }
   return document.querySelector('[style*="var(--twd-"]') ? "ok" : e ? "unknown" : "unused";
 }
-function _a() {
+function co() {
   const e = /* @__PURE__ */ new Set(), t = (n) => {
     for (const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g)) e.add(a[1]);
   };
@@ -1301,19 +1391,19 @@ function _a() {
     } catch {
       continue;
     }
-    for (const o of _e(a))
-      o.style.cssText.split(";").forEach((s) => {
-        const r = s.slice(0, s.indexOf(":")).trim();
-        r && !r.startsWith("--") && t(s);
+    for (const o of Qe(a))
+      o.style.cssText.split(";").forEach((r) => {
+        const s = r.slice(0, r.indexOf(":")).trim();
+        s && !s.startsWith("--") && t(r);
       });
   }
   return document.querySelectorAll('[style*="var(--twd-"]').forEach((n) => t(n.getAttribute("style"))), e;
 }
-const fn = [
-  { label: "With a build tool, in your entry file", code: `import '${un}/tokens.css';` },
+const En = [
+  { label: "With a build tool, in your entry file", code: `import '${Sn}/tokens.css';` },
   // Pinned to this build's version: unversioned jsDelivr links can lag a release by days, and unpkg once failed for a fresh one.
-  { label: "Plain HTML, in <head>", code: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${un}@${Ua}/dist/twiddle-tokens.css">` }
-], Ka = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
+  { label: "Plain HTML, in <head>", code: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${Sn}@${oo}/dist/twiddle-tokens.css">` }
+], po = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
 
 1. Keep the current look. In a :root rule loaded after twiddle-tokens.css, set each token below to the value this project already uses (for example, if buttons use #0f766e, set --twd-primary: #0f766e). Only set the tokens the project actually needs.
 2. Replace fixed values in component styles with var(--twd-…). Map each value to the closest token by role:
@@ -1331,7 +1421,7 @@ const fn = [
 3. Leave values that don't match a role as they are (layout widths, one-off illustrations, icon sizes). Don't invent new --twd-* tokens.
 4. Don't change the layout or how the page looks; after the change it should look the same until someone uses the panel.
 5. When done, list the files you changed and any values you left fixed, with the reason.`;
-function U(e) {
+function D(e) {
   const t = document.createElement("div");
   t.className = "field";
   const n = document.createElement("div");
@@ -1341,246 +1431,268 @@ function U(e) {
   const o = document.createElement("span");
   return o.className = "field-value", o.hidden = !0, n.append(a, o), t.append(n), {
     el: t,
-    setValue(s) {
-      o.textContent = s || "", o.hidden = !s;
+    setValue(r) {
+      o.textContent = r || "", o.hidden = !r;
     },
-    append(...s) {
-      t.append(...s);
+    append(...r) {
+      t.append(...r);
     }
   };
 }
-function Wa({ label: e, ends: t, cols: n = 9, rows: a = 5, onInput: o }) {
-  const s = document.createElement("div");
-  s.className = "pad", s.tabIndex = 0, s.setAttribute("role", "group"), s.setAttribute("aria-roledescription", "2D slider");
-  const r = (b, h) => {
-    const y = document.createElement("span");
-    return y.className = `pad-edge ${b}`, y.textContent = h, y.setAttribute("aria-hidden", "true"), y;
+function uo({ label: e, ends: t, cols: n = 9, rows: a = 5, onInput: o }) {
+  const r = document.createElement("div");
+  r.className = "pad", r.tabIndex = 0, r.setAttribute("role", "group"), r.setAttribute("aria-roledescription", "2D slider");
+  const s = (b, h) => {
+    const w = document.createElement("span");
+    return w.className = `pad-edge ${b}`, w.textContent = h, w.setAttribute("aria-hidden", "true"), w;
   };
-  s.append(r("top", t.top), r("bottom", t.bottom), r("left", t.left), r("right", t.right));
+  r.append(s("top", t.top), s("bottom", t.bottom), s("left", t.left), s("right", t.right));
   const i = document.createElement("div");
   i.className = "pad-area";
   for (let b = 0; b < a; b++)
     for (let h = 0; h < n; h++) {
-      const y = document.createElement("i");
-      y.className = "pad-dot", y.style.left = `${h / (n - 1) * 100}%`, y.style.top = `${b / (a - 1) * 100}%`, i.append(y);
+      const w = document.createElement("i");
+      w.className = "pad-dot", w.style.left = `${h / (n - 1) * 100}%`, w.style.top = `${b / (a - 1) * 100}%`, i.append(w);
     }
   const l = document.createElement("span");
-  l.className = "pad-knob", i.append(l), s.append(i);
+  l.className = "pad-knob", i.append(l), r.append(i);
   let d = 0.5, p = 0.5;
-  const u = (b, h) => Math.round(Math.min(1, Math.max(0, b)) * (h - 1)) / (h - 1);
+  const f = (b, h) => Math.round(Math.min(1, Math.max(0, b)) * (h - 1)) / (h - 1);
   function v() {
     l.style.left = `${d * 100}%`, l.style.top = `${p * 100}%`;
   }
-  function f(b, h, y) {
-    b = y === "x" ? d : u(b, n), h = y === "y" ? p : u(h, a), !(b === d && h === p) && (d = b, p = h, v(), o(d, p));
+  function u(b, h, w) {
+    b = w === "x" ? d : f(b, n), h = w === "y" ? p : f(h, a), !(b === d && h === p) && (d = b, p = h, v(), o(d, p));
   }
   const m = (b) => {
     const h = i.getBoundingClientRect();
-    f((b.clientX - h.left) / h.width, (b.clientY - h.top) / h.height);
+    u((b.clientX - h.left) / h.width, (b.clientY - h.top) / h.height);
   };
-  s.addEventListener("pointerdown", (b) => {
-    s.setPointerCapture(b.pointerId), s.classList.add("dragging"), m(b);
-  }), s.addEventListener("pointermove", (b) => {
-    s.hasPointerCapture(b.pointerId) && m(b);
+  r.addEventListener("pointerdown", (b) => {
+    r.setPointerCapture(b.pointerId), r.classList.add("dragging"), m(b);
+  }), r.addEventListener("pointermove", (b) => {
+    r.hasPointerCapture(b.pointerId) && m(b);
   });
   const x = (b) => {
-    s.hasPointerCapture(b.pointerId) && s.releasePointerCapture(b.pointerId), s.classList.remove("dragging");
+    r.hasPointerCapture(b.pointerId) && r.releasePointerCapture(b.pointerId), r.classList.remove("dragging");
   };
-  return s.addEventListener("pointerup", x), s.addEventListener("pointercancel", x), s.addEventListener("keydown", (b) => {
+  return r.addEventListener("pointerup", x), r.addEventListener("pointercancel", x), r.addEventListener("keydown", (b) => {
     const h = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[b.key];
-    h && (b.preventDefault(), h[0] ? f(u(d, n) + h[0] / (n - 1), p, "y") : f(d, u(p, a) + h[1] / (a - 1), "x"));
+    h && (b.preventDefault(), h[0] ? u(f(d, n) + h[0] / (n - 1), p, "y") : u(d, f(p, a) + h[1] / (a - 1), "x"));
   }), {
-    el: s,
+    el: r,
     /** Show a position without telling anyone (used to sync). Off-grid values are shown as they are. */
-    setValue(b, h, y) {
-      d = Math.min(1, Math.max(0, b)), p = Math.min(1, Math.max(0, h)), v(), s.setAttribute("aria-label", y ? `${e}: ${y}` : e);
+    setValue(b, h, w) {
+      d = Math.min(1, Math.max(0, b)), p = Math.min(1, Math.max(0, h)), v(), r.setAttribute("aria-label", w ? `${e}: ${w}` : e);
     }
   };
 }
-function Vn({ label: e, min: t, max: n, step: a = 1, format: o = String, onInput: s }) {
-  const r = document.createElement("div");
-  r.className = "slider";
+function na({ label: e, min: t, max: n, step: a = 1, format: o = String, onInput: r }) {
+  const s = document.createElement("div");
+  s.className = "slider";
   const i = document.createElement("input");
   i.type = "range", i.min = String(t), i.max = String(n), i.step = String(a), i.setAttribute("aria-label", e);
   const l = document.createElement("span");
-  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), r.append(i, l);
+  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), s.append(i, l);
   const d = (p) => {
-    const u = (Number(i.value) - t) / (n - t) * 100;
-    i.style.setProperty("--fill", `${u}%`), l.textContent = p ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
+    const f = (Number(i.value) - t) / (n - t) * 100;
+    i.style.setProperty("--fill", `${f}%`), l.textContent = p ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
   };
   return i.addEventListener("input", () => {
-    d(), s(Number(i.value));
+    d(), r(Number(i.value));
   }), {
-    el: r,
+    el: s,
     /** Show a value without reporting it (sync after reset / URL load). */
-    setValue(p, u) {
-      i.value = String(p), d(u);
+    setValue(p, f) {
+      i.value = String(p), d(f);
     }
   };
 }
-function Ga({ label: e, options: t, columns: n = 3, className: a = "", onSelect: o }) {
-  const s = document.createElement("div");
-  s.className = `tiles ${a}`.trim(), s.style.setProperty("--cols", n), s.setAttribute("role", "radiogroup"), s.setAttribute("aria-label", e);
-  const r = t.map((p) => {
-    const u = document.createElement("button");
-    return u.type = "button", u.className = "tile", p.wide && u.classList.add("wide"), u.setAttribute("role", "radio"), u.dataset.value = p.value, p.title && (u.title = p.title), u.innerHTML = `${p.preview ? `<span class="tile-preview" aria-hidden="true">${p.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${p.sub ? '<span class="tile-sub"></span>' : ""}</span>`, u.querySelector(".tile-label").textContent = p.label, p.sub && (u.querySelector(".tile-sub").textContent = p.sub), u.addEventListener("click", () => d(p.value)), u;
+function ho({ label: e, options: t, columns: n = 3, className: a = "", onSelect: o }) {
+  const r = document.createElement("div");
+  r.className = `tiles ${a}`.trim(), r.style.setProperty("--cols", n), r.setAttribute("role", "radiogroup"), r.setAttribute("aria-label", e);
+  const s = t.map((p) => {
+    const f = document.createElement("button");
+    return f.type = "button", f.className = "tile", p.wide && f.classList.add("wide"), f.setAttribute("role", "radio"), f.dataset.value = p.value, p.title && (f.title = p.title), f.innerHTML = `${p.preview ? `<span class="tile-preview" aria-hidden="true">${p.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${p.sub ? '<span class="tile-sub"></span>' : ""}</span>`, f.querySelector(".tile-label").textContent = p.label, p.sub && (f.querySelector(".tile-sub").textContent = p.sub), f.addEventListener("click", () => l(p.value)), f;
   });
-  s.append(...r);
-  let i = null;
-  function l(p) {
-    i = p, r.forEach((v) => v.setAttribute("aria-checked", String(v.dataset.value === p)));
-    const u = Math.max(0, r.findIndex((v) => v.dataset.value === p));
-    r.forEach((v, f) => {
-      v.tabIndex = f === u ? 0 : -1;
+  r.append(...s);
+  function i(p) {
+    s.forEach((v) => v.setAttribute("aria-checked", String(v.dataset.value === p)));
+    const f = Math.max(0, s.findIndex((v) => v.dataset.value === p));
+    s.forEach((v, u) => {
+      v.tabIndex = u === f ? 0 : -1;
     });
   }
-  function d(p, u) {
-    p !== i && (l(p), o(p)), u && r.find((v) => v.dataset.value === p).focus();
+  function l(p, f) {
+    i(p), o(p), f && s.find((v) => v.dataset.value === p).focus();
+  }
+  function d(p = []) {
+    s.forEach((f) => f.classList.toggle("near", p.includes(f.dataset.value)));
   }
-  return s.addEventListener("keydown", (p) => {
-    const u = r.indexOf(p.target.closest(".tile"));
-    if (u < 0) return;
+  return r.addEventListener("keydown", (p) => {
+    const f = s.indexOf(p.target.closest(".tile"));
+    if (f < 0) return;
     const v = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[p.key];
-    let f;
-    if (v) f = (u + v + r.length) % r.length;
-    else if (p.key === "Home") f = 0;
-    else if (p.key === "End") f = r.length - 1;
+    let u;
+    if (v) u = (f + v + s.length) % s.length;
+    else if (p.key === "Home") u = 0;
+    else if (p.key === "End") u = s.length - 1;
     else return;
-    p.preventDefault(), d(r[f].dataset.value, !0);
-  }), l(null), { el: s, setValue: l };
+    p.preventDefault(), l(s[u].dataset.value, !0);
+  }), i(null), { el: r, setValue: i, setNear: d };
 }
-const F = (e) => getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-function Se(e, t) {
+const L = (e) => getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+function Ce(e, t) {
   const n = /^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(e).trim());
   if (!n) return null;
   const a = parseFloat(n[1]) * t, o = n[2] || "px";
   return o === "px" ? `${Math.round(a)}px` : `${+a.toFixed(3)}${o}`;
 }
-const Ya = 999;
-function _n({ id: e, title: t, hint: n, token: a, uses: o = [], presets: s, max: r, extra: i = [], extraTokens: l = () => ({}), shape: d = "card" }) {
-  const p = (f) => s.find((m) => m.value === f), u = (f) => f >= Ya ? "full" : `${f}px`, v = (f) => {
-    if (typeof f.radius == "number" && isFinite(f.radius))
-      return { [a]: `${Math.min(Math.max(f.radius, 0), r)}px` };
-    const m = p(f.corners);
+const fo = 999;
+function aa({ id: e, title: t, hint: n, token: a, uses: o = [], presets: r, max: s, extra: i = [], extraTokens: l = () => ({}), shape: d = "card" }) {
+  const p = (u) => r.find((m) => m.value === u), f = (u) => u >= fo ? "full" : `${u}px`, v = (u) => {
+    if (typeof u.radius == "number" && isFinite(u.radius))
+      return { [a]: `${Math.min(Math.max(u.radius, 0), s)}px` };
+    const m = p(u.corners);
     return m ? { [a]: `${m.radius}px` } : {};
   };
   return {
     id: e,
     title: t,
     hint: n,
-    presets: s,
+    presets: r,
     uses: [a, ...o],
-    tokens(f) {
-      const m = f[e] || {};
+    tokens(u) {
+      const m = u[e] || {};
       return { ...v(m), ...l(m) };
     },
     // One render function per knob, so a layout can place them separately.
     // Each takes an optional label (e.g. "Buttons" on the Corners page).
     parts: {
-      corners(f, m, { label: x = "Corners" } = {}) {
-        const b = U(x), h = ce({
+      corners(u, m, { label: x = "Corners" } = {}) {
+        const b = D(x), h = ge({
           label: `${t} corners`,
-          options: s.map((E) => ({ value: E.value, label: E.label, title: u(E.radius) })),
-          onSelect: (E) => m.setSection(e, { corners: E, radius: null })
-        }), y = Vn({
+          options: r.map(($) => ({ value: $.value, label: $.label, title: f($.radius) })),
+          onSelect: ($) => m.setSection(e, { corners: $, radius: null })
+        }), w = na({
           label: `${t} corner radius`,
           min: 0,
-          max: r,
-          format: u,
-          onInput: (E) => m.setSection(e, { radius: E, corners: null })
+          max: s,
+          format: f,
+          onInput: ($) => m.setSection(e, { radius: $, corners: null })
         });
-        b.append(h.el, y.el), f.append(b.el);
-        const L = () => {
-          const E = parseFloat((m.readToken || F)(a)), ee = m.getState()[e] || {}, K = p(ee.corners) || s.find((W) => W.radius === E);
-          if (h.setValue(K ? K.value : null), isNaN(E)) {
-            y.setValue(0, "—"), b.setValue("");
+        b.append(h.el, w.el), u.append(b.el);
+        const S = () => {
+          const $ = parseFloat((m.readToken || L)(a)), K = m.getState()[e] || {}, Z = p(K.corners) || r.find((Le) => Le.radius === $);
+          if (h.setValue(Z ? Z.value : null), isNaN($)) {
+            w.setValue(0, "—"), b.setValue("");
             return;
           }
-          y.setValue(Math.min(E, r), u(E)), b.setValue(u(E));
+          w.setValue(Math.min($, s), f($)), b.setValue(f($));
         };
-        L(), m.onChange(L);
+        S(), m.onChange(S);
       },
-      ...Object.fromEntries(i.map((f) => [f.key, (m, x, { label: b } = {}) => m.append($e(x, { section: e, ...f, label: b || f.label }))])),
+      ...Object.fromEntries(i.map((u) => [u.key, (m, x, { label: b } = {}) => m.append(Me(x, { section: e, ...u, label: b || u.label }))])),
       // Tabbed layout: presets as tiles showing the real rounding.
-      cornerTiles(f, m, { label: x = "Corners" } = {}) {
+      cornerTiles(u, m, { label: x = "Corners" } = {}) {
         const b = (h) => `<span class="shape shape-${d}" style="border-radius:${Math.min(h, d === "button" ? 12 : 16)}px"></span>`;
-        f.append(V(m, {
+        u.append(_(m, {
           section: e,
           key: "corners",
           label: x,
-          columns: s.length,
-          options: s.map((h) => ({ value: h.value, label: h.label, title: u(h.radius), preview: b(h.radius) })),
+          columns: r.length,
+          options: r.map((h) => ({ value: h.value, label: h.label, title: f(h.radius), preview: b(h.radius) })),
           current: (h) => {
-            const y = h[e] || {};
-            if (y.radius != null) return null;
-            const L = parseFloat((m.readToken || F)(a));
-            return (p(y.corners) || s.find((E) => E.radius === L))?.value || null;
+            const w = h[e] || {};
+            if (w.radius != null) return null;
+            if (p(w.corners)) return w.corners;
+            if (he(h, a)) return null;
+            const S = parseFloat((m.readToken || L)(a));
+            return r.find(($) => $.radius === S)?.value || null;
           },
           select: (h) => m.setSection(e, { corners: h, radius: null }),
-          valueText: () => {
-            const h = parseFloat((m.readToken || F)(a));
-            return isNaN(h) ? "" : u(h);
+          valueText: (h, w) => {
+            const S = parseFloat((m.readToken || L)(a));
+            if (isNaN(S)) return "";
+            const $ = w[e] || {};
+            return f(S) + Cn(w, a, $.radius != null ? "custom" : p($.corners)?.label);
           }
         }));
       },
-      ...Object.fromEntries(i.filter((f) => f.preview).map((f) => [`${f.key}Tiles`, (m, x, { label: b } = {}) => m.append(V(x, {
+      ...Object.fromEntries(i.filter((u) => u.preview).map((u) => [`${u.key}Tiles`, (m, x, { label: b } = {}) => m.append(_(x, {
         section: e,
-        key: f.key,
-        label: b || f.label,
-        fallback: f.fallback,
-        columns: f.columns || f.options.length,
-        options: f.options.map((h) => ({ ...h, preview: f.preview(h.value) }))
+        key: u.key,
+        label: b || u.label,
+        fallback: u.fallback,
+        columns: u.columns || u.options.length,
+        options: u.options.map((h) => ({ ...h, preview: u.preview(h.value) })),
+        ...u.token && {
+          current: (h) => (h[e] || {})[u.key] || (he(h, u.token) ? null : u.fallback || null),
+          valueText: (h, w) => {
+            if (!he(w, u.token)) return "";
+            const S = u.options.find(($) => $.value === (w[e] || {})[u.key]);
+            return `${(x.readToken || L)(u.token)}${Cn(w, u.token, S && S.label)}`;
+          }
+        },
+        // A knob can bring its own rules (e.g. Cards › Fill reads "from Style").
+        ...u.current && { current: (h) => u.current(h[e] || {}) },
+        ...u.valueText && { valueText: (h, w) => u.valueText(w[e] || {}, x.readToken || L) },
+        ...u.select && { select: (h) => x.setSection(e, u.select(h)) }
       }))]))
     },
-    render(f, m) {
-      Object.entries(this.parts).filter(([x]) => !x.endsWith("Tiles")).forEach(([, x]) => x(f, m));
+    render(u, m) {
+      Object.entries(this.parts).filter(([x]) => !x.endsWith("Tiles")).forEach(([, x]) => x(u, m));
     }
   };
 }
-function $e(e, { section: t, key: n, label: a, options: o, fallback: s, valueText: r }) {
-  const i = U(a), l = ce({
+function Me(e, { section: t, key: n, label: a, options: o, fallback: r, valueText: s }) {
+  const i = D(a), l = ge({
     label: a,
     options: o,
     onSelect: (p) => e.setSection(t, { [n]: p })
   });
   i.append(l.el);
   const d = () => {
-    const p = (e.getState()[t] || {})[n] || s;
-    l.setValue(p), i.setValue(r ? r(p) : "");
+    const p = (e.getState()[t] || {})[n] || r;
+    l.setValue(p), i.setValue(s ? s(p) : "");
   };
   return d(), e.onChange(d), i.el;
 }
-function Xa(e, { section: t, key: n, label: a, min: o, max: s, fallback: r, format: i }) {
-  const l = U(a), d = Vn({ label: a, min: o, max: s, format: i, onInput: (u) => e.setSection(t, { [n]: u }) });
-  l.append(d.el);
-  const p = () => {
-    const u = (e.getState()[t] || {})[n];
-    d.setValue(typeof u == "number" ? u : r);
+function go(e, { section: t, key: n, label: a, min: o, max: r, fallback: s, format: i, note: l, value: d }) {
+  const p = D(a), f = na({ label: a, min: o, max: r, format: i, onInput: (u) => e.setSection(t, { [n]: u }) });
+  p.append(f.el);
+  const v = () => {
+    const u = e.getState(), m = d ? d(u) : (u[t] || {})[n];
+    f.setValue(typeof m == "number" ? m : s), l && (p.el.querySelector(".field-label").textContent = `${a}${l(u) ? ` · ${l(u)}` : ""}`);
   };
-  return p(), e.onChange(p), l.el;
-}
-function V(e, { section: t, key: n, label: a, options: o, columns: s = 3, className: r = "", fallback: i, valueText: l, current: d, select: p }) {
-  const u = U(a), v = Ga({
+  return v(), e.onChange(v), p.el;
+}
+let oa = () => ({});
+const mo = (e) => {
+  oa = e;
+}, he = (e, t) => Object.prototype.hasOwnProperty.call(oa(e), t), Cn = (e, t, n) => he(e, t) ? n ? ` · ${n}, adjusted by Character` : " · from Character" : "";
+function _(e, { section: t, key: n, label: a, options: o, columns: r = 3, className: s = "", fallback: i, valueText: l, current: d, select: p, near: f }) {
+  const v = D(a), u = ho({
     label: a,
     options: o,
-    columns: s,
-    className: r,
-    onSelect: (m) => p ? p(m) : e.setSection(t, { [n]: m })
+    columns: r,
+    className: s,
+    onSelect: (x) => p ? p(x) : e.setSection(t, { [n]: x })
   });
-  u.append(v.el);
-  const f = () => {
-    const m = e.getState(), x = d ? d(m) : (m[t] || {})[n] || i || null;
-    v.setValue(x), u.setValue(l ? l(x, m) : "");
+  v.append(u.el);
+  const m = () => {
+    const x = e.getState(), b = d ? d(x) : (x[t] || {})[n] || i || null;
+    u.setValue(b), u.setNear(f ? f(x) : []), v.setValue(l ? l(b, x) : "");
   };
-  return f(), e.onChange(f), u.el;
+  return m(), e.onChange(m), v.el;
 }
-const gn = (e, t) => t.map((n) => `${e}${n}`), Kn = {
+const Mn = (e, t) => t.map((n) => `${e}${n}`), ra = {
   fonts: { label: "Tokens", tokens: ["font-heading", "font-body"], kind: "text" },
-  type: { label: "Tokens", tokens: gn("text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"]), kind: "length" },
+  type: { label: "Tokens", tokens: Mn("text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"]), kind: "length" },
   leading: { label: "Line height", tokens: ["leading-tight", "leading-normal"], kind: "number" },
   weights: { label: "Weights", tokens: ["weight-heading", "weight-strong"], kind: "number" },
   colours: { label: "Tokens", tokens: ["bg", "surface", "surface-raised", "text", "text-muted", "border", "primary", "primary-hover", "on-primary", "focus", "success", "warning", "danger"], kind: "colour" },
-  spacing: { label: "Steps", tokens: gn("space-", [1, 2, 3, 4, 5, 6, 7, 8]), kind: "length", bar: 64 },
+  spacing: { label: "Steps", tokens: Mn("space-", [1, 2, 3, 4, 5, 6, 7, 8]), kind: "length", bar: 64 },
   controls: { label: "Controls", tokens: ["control-height", "control-pad-x"], kind: "length" },
   corners: { label: "Tokens", tokens: ["radius-control", "radius-container"], kind: "length" },
   borders: { label: "Tokens", tokens: ["border-width", "border-width-container"], kind: "length" },
@@ -1588,124 +1700,138 @@ const gn = (e, t) => t.map((n) => `${e}${n}`), Kn = {
   buttonStyle: { label: "Button", tokens: ["button-bg", "button-fg", "button-border", "button-hover"], kind: "colour" },
   cardStyle: { label: "Card", tokens: ["card-bg", "card-border"], kind: "colour" },
   cardShadow: { label: "Card shadow", tokens: ["card-shadow"], kind: "text" }
-}, _ = (e) => `--twd-${e}`, at = (e, t) => Object.prototype.hasOwnProperty.call(e.getState().custom || {}, t), mn = (e, t) => Kn[t].tokens.some((n) => (e.custom || {})[n] != null);
-function Za(e, t) {
+}, Y = (e) => `--twd-${e}`, ht = (e, t) => Object.prototype.hasOwnProperty.call(e.getState().custom || {}, t), $e = (e, t) => ra[t].tokens.some((n) => (e.custom || {})[n] != null);
+function bo(e, t) {
   const n = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(e).trim());
   return !n || t === "text" || t === "colour" ? null : n[2] === "rem" ? { n: +(parseFloat(n[1]) * 16).toFixed(1), unit: "px" } : { n: +parseFloat(n[1]).toFixed(3), unit: n[2] || (t === "length" ? "px" : "") };
 }
-function Ja(e, t) {
+function xo(e, t) {
   const n = e.trim();
   return n ? t === "length" && /^-?\d*\.?\d+$/.test(n) ? `${n}px` : n : null;
 }
-function Qa(e, t, n, a) {
+function wo(e, t, n, a) {
   const o = document.createElement("div");
   o.className = `token-row kind-${n}`, o.innerHTML = `
-    <code class="token-name" title="${_(t)}">${t}</code>
+    <code class="token-name" title="${Y(t)}">${t}</code>
     ${a ? '<span class="token-bar"><span></span></span>' : '<span class="token-gap"></span>'}
     <span class="custom-tag" hidden>Custom</span>
     <label class="token-value">
       ${n === "colour" ? '<span class="token-swatch"></span>' : ""}
-      <input type="text" spellcheck="false" aria-label="${_(t)}" ${n === "length" || n === "number" ? 'inputmode="decimal"' : ""}>
+      <input type="text" spellcheck="false" aria-label="${Y(t)}" ${n === "length" || n === "number" ? 'inputmode="decimal"' : ""}>
       <span class="token-unit"></span>
     </label>
-    <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${_(t)}" hidden>${A.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${Y(t)}" hidden>${P.reset}</button>
   `;
-  const s = o.querySelector("input"), r = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), d = o.querySelector(".custom-tag"), p = o.querySelector(".token-reset");
-  let u = "";
+  const r = o.querySelector("input"), s = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), d = o.querySelector(".custom-tag"), p = o.querySelector(".token-reset");
+  let f = "";
   const v = () => {
-    let m = s.value;
-    u && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${u}`);
-    const x = Ja(m, n), b = F(_(t));
+    let m = r.value;
+    f && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${f}`);
+    const x = xo(m, n), b = L(Y(t));
     if (x === null) {
-      at(e, t) ? e.setSection("custom", { [t]: null }) : f();
+      ht(e, t) ? e.setSection("custom", { [t]: null }) : u();
       return;
     }
-    if (x === b && !at(e, t)) return f();
+    if (x === b && !ht(e, t)) return u();
     e.setSection("custom", { [t]: x });
   };
-  s.addEventListener("change", v), s.addEventListener("blur", () => f()), s.addEventListener("keydown", (m) => {
-    m.key === "Enter" && (m.preventDefault(), s.blur()), m.key === "Escape" && (m.stopPropagation(), f(), s.blur());
+  r.addEventListener("change", v), r.addEventListener("blur", () => u()), r.addEventListener("keydown", (m) => {
+    m.key === "Enter" && (m.preventDefault(), r.blur()), m.key === "Escape" && (m.stopPropagation(), u(), r.blur());
   }), p.addEventListener("click", () => e.setSection("custom", { [t]: null }));
-  function f() {
-    const m = F(_(t)), x = at(e, t), b = Za(m, n);
-    u = b ? b.unit : "", document.activeElement !== s && o.getRootNode().activeElement !== s && (s.value = b ? String(b.n) : m), s.title = m, r.textContent = u, r.hidden = !u, i && (i.style.width = `${Math.max(2, Math.min(100, (b ? b.n : 0) / a * 100))}%`), l && (l.style.background = m), o.classList.toggle("edited", x), d.hidden = !x, p.hidden = !x;
+  function u() {
+    const m = L(Y(t)), x = ht(e, t), b = bo(m, n);
+    f = b ? b.unit : "", document.activeElement !== r && o.getRootNode().activeElement !== r && (r.value = b ? String(b.n) : m), r.title = m, s.textContent = f, s.hidden = !f, i && (i.style.width = `${Math.max(2, Math.min(100, (b ? b.n : 0) / a * 100))}%`), l && (l.style.background = m), o.classList.toggle("edited", x), d.hidden = !x, p.hidden = !x;
   }
-  return f(), e.onChange(f), o;
+  return u(), e.onChange(u), o;
 }
-const eo = {
+const vo = {
   id: "custom",
   title: "Custom tokens",
   hint: "Any token, set to a fixed value",
   uses: [],
   // not offered for a single picked element (yet)
   tokens(e) {
-    return Object.fromEntries(Object.entries(e.custom || {}).map(([t, n]) => [_(t), n]));
+    return Object.fromEntries(Object.entries(e.custom || {}).map(([t, n]) => [Y(t), n]));
   },
-  describe: (e, t) => ({ label: _(e), value: String(t) }),
+  describe: (e, t) => ({ label: Y(e), value: String(t) }),
   // One part per Edit page group, e.g. parts.spacing → rows for --twd-space-1 … 8.
-  parts: Object.fromEntries(Object.entries(Kn).map(([e, t]) => [e, (n, a, { label: o = t.label } = {}) => {
-    const s = U(o);
-    s.el.classList.add("token-field");
-    const r = t.tokens[0], i = t.tokens[t.tokens.length - 1];
-    s.setValue(t.tokens.length > 2 && /-\w+$/.test(r) ? `${_(r)} … ${i.split("-").pop()}` : "");
+  parts: Object.fromEntries(Object.entries(ra).map(([e, t]) => [e, (n, a, { label: o = t.label } = {}) => {
+    const r = D(o);
+    r.el.classList.add("token-field");
+    const s = t.tokens[0], i = t.tokens[t.tokens.length - 1];
+    r.setValue(t.tokens.length > 2 && /-\w+$/.test(s) ? `${Y(s)} … ${i.split("-").pop()}` : "");
     const l = document.createElement("div");
-    l.className = "token-rows", t.tokens.forEach((d) => l.append(Qa(a, d, t.kind, t.bar))), s.append(l), n.append(s.el);
+    l.className = "token-rows", t.tokens.forEach((d) => l.append(wo(a, d, t.kind, t.bar))), r.append(l), n.append(r.el);
   }]))
-}, ve = { compact: 0.75, regular: 1, comfy: 1.25 }, kt = [0.75, 1.25], bn = [1, 2, 3, 4, 5, 6, 7, 8].map((e) => `--twd-space-${e}`);
-function se(e = {}) {
-  return typeof e.factor == "number" && isFinite(e.factor) ? Math.min(kt[1], Math.max(kt[0], e.factor)) : ve[e.spacing] || 1;
-}
-const ot = (e) => `${Math.round(e * 100)}%`, to = {
+}, X = { compact: 0.75, regular: 1, comfy: 1.25 }, jt = [0.75, 1.25], Tn = [1, 2, 3, 4, 5, 6, 7, 8].map((e) => `--twd-space-${e}`);
+function sa(e) {
+  const t = Object.entries(X).sort((a, o) => a[1] - o[1]);
+  if (t.some(([, a]) => a === e)) return [];
+  const n = t.findIndex(([, a]) => a > e);
+  return n > 0 ? [t[n - 1][0], t[n][0]] : [];
+}
+const ft = (e) => e[0].toUpperCase() + e.slice(1);
+function Dt(e) {
+  const t = Object.keys(X).find((a) => X[a] === e);
+  if (t) return ft(t);
+  const n = sa(e);
+  return n.length ? `Between ${ft(n[0])} and ${ft(n[1])}` : e > 1 ? "Comfy" : "Compact";
+}
+function H(e = {}) {
+  return typeof e.factor == "number" && isFinite(e.factor) ? Math.min(jt[1], Math.max(jt[0], e.factor)) : X[e.spacing] || 1;
+}
+const gt = (e) => `${Math.round(e * 100)}%`, yo = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
-  uses: bn,
+  uses: Tn,
   tokens(e) {
-    const t = se(e.density);
+    const t = H(e.density);
     if (t === 1) return {};
     const n = {};
-    return bn.forEach((a) => {
-      const o = Se(F(a), t);
+    return Tn.forEach((a) => {
+      const o = Ce(L(a), t);
       o && (n[a] = o);
     }), n;
   },
   /** How the Changes list and prompt describe a setting. */
-  describe: (e, t) => e === "factor" ? { label: "Spacing", value: ot(t) } : null,
+  describe: (e, t) => e === "factor" ? { label: "Spacing", value: gt(t) } : null,
   parts: {
     // Tabbed layout: presets as tiles with a tiny layout sketch.
     spacingTiles(e, t, { label: n = "Density" } = {}) {
-      const a = (o, s) => `<span class="sketch" style="padding:${s}px;gap:${o}px"><i></i><i></i><i></i></span>`;
-      e.append(V(t, {
+      const a = (o, r) => `<span class="sketch" style="padding:${r}px;gap:${o}px"><i></i><i></i><i></i></span>`;
+      e.append(_(t, {
         section: "density",
         key: "spacing",
         label: n,
         options: [{ value: "compact", label: "Compact", preview: a(2, 5) }, { value: "regular", label: "Regular", preview: a(4, 8) }, { value: "comfy", label: "Comfy", preview: a(6, 11) }],
         current: (o) => {
-          const s = se(o.density);
-          return Object.keys(ve).find((r) => ve[r] === s) || null;
+          const r = H(o.density);
+          return Object.keys(X).find((s) => X[s] === r) || null;
         },
         select: (o) => t.setSection("density", { spacing: o, factor: null }),
-        valueText: (o, s) => mn(s, "spacing") ? "Custom" : o ? "" : ot(se(s.density))
+        near: (o) => $e(o, "spacing") ? [] : sa(H(o.density)),
+        valueText: (o, r) => $e(r, "spacing") ? "Custom" : o ? "" : `${Dt(H(r.density))} · ${gt(H(r.density))}`
       }));
     },
     spacing(e, t, { label: n = "Spacing" } = {}) {
-      const a = U(n), o = ce({
+      const a = D(n), o = ge({
         label: n,
         options: [{ value: "compact", label: "Compact" }, { value: "regular", label: "Regular" }, { value: "comfy", label: "Comfy" }],
-        onSelect: (r) => t.setSection("density", { spacing: r, factor: null })
+        onSelect: (s) => t.setSection("density", { spacing: s, factor: null })
       });
       a.append(o.el);
-      const s = () => {
-        const r = t.getState().density || {}, i = se(r), l = Object.keys(ve).find((d) => ve[d] === i);
-        o.setValue(l || null), a.setValue(mn(t.getState(), "spacing") ? "Custom" : l ? "" : ot(i));
+      const r = () => {
+        const s = t.getState().density || {}, i = H(s), l = Object.keys(X).find((d) => X[d] === i);
+        o.setValue(l || null), a.setValue($e(t.getState(), "spacing") ? "Custom" : l ? "" : gt(i));
       };
-      s(), t.onChange(s), e.append(a.el);
+      r(), t.onChange(r), e.append(a.el);
     }
   },
   render(e, t) {
     Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, no = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', ao = [
+}, ko = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', So = [
   [50, "white", 10],
   [100, "white", 20],
   [200, "white", 36],
@@ -1717,35 +1843,35 @@ const ot = (e) => `${Math.round(e * 100)}%`, to = {
   [800, "black", 58],
   [900, "black", 45],
   [950, "black", 30]
-], rt = (e) => {
+], mt = (e) => {
   let t = String(e).trim().replace(/^#/, "");
   return /^[0-9a-f]{3}$/i.test(t) && (t = t.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(t) ? `#${t.toUpperCase()}` : null;
 };
-function oo({ label: e, onInput: t }) {
+function $o({ label: e, onInput: t }) {
   const n = document.createElement("div");
   n.className = "colour";
   const a = document.createElement("div");
   a.className = "colour-field";
   const o = document.createElement("input");
   o.type = "color", o.className = "colour-picker", o.tabIndex = -1, o.setAttribute("aria-hidden", "true");
-  const s = document.createElement("button");
-  s.type = "button", s.className = "colour-swatch", s.setAttribute("aria-label", `${e}: open colour picker`);
-  const r = document.createElement("input");
-  r.type = "text", r.className = "colour-hex", r.spellcheck = !1, r.maxLength = 7, r.setAttribute("aria-label", `${e} hex value`);
+  const r = document.createElement("button");
+  r.type = "button", r.className = "colour-swatch", r.setAttribute("aria-label", `${e}: open colour picker`);
+  const s = document.createElement("input");
+  s.type = "text", s.className = "colour-hex", s.spellcheck = !1, s.maxLength = 7, s.setAttribute("aria-label", `${e} hex value`);
   const i = document.createElement("button");
-  i.type = "button", i.className = "colour-pipette", i.innerHTML = no, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, s, r, i);
+  i.type = "button", i.className = "colour-pipette", i.innerHTML = ko, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, r, s, i);
   const l = document.createElement("div");
-  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = ao.map(([f, m, x]) => {
+  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = So.map(([u, m, x]) => {
     const b = m ? `color-mix(in oklch, var(--brand) ${x}%, ${m})` : "var(--brand)";
-    return `<span title="${f}" style="background:${b}"></span>`;
+    return `<span title="${u}" style="background:${b}"></span>`;
   }).join(""), n.append(a, l);
   let d = "#000000";
-  const p = (f) => {
-    d = f, o.value = f.toLowerCase(), s.style.background = f, n.getRootNode().activeElement !== r && (r.value = f), n.style.setProperty("--brand", f);
-  }, u = (f) => {
-    f !== d && (p(f), t(f));
+  const p = (u) => {
+    d = u, o.value = u.toLowerCase(), r.style.background = u, n.getRootNode().activeElement !== s && (s.value = u), n.style.setProperty("--brand", u);
+  }, f = (u) => {
+    u !== d && (p(u), t(u));
   };
-  s.addEventListener("click", () => {
+  r.addEventListener("click", () => {
     if (o.showPicker)
       try {
         o.showPicker();
@@ -1753,27 +1879,27 @@ function oo({ label: e, onInput: t }) {
       } catch {
       }
     o.click();
-  }), o.addEventListener("input", () => u(o.value.toUpperCase())), r.addEventListener("input", () => {
-    const f = rt(r.value);
-    f && u(f);
+  }), o.addEventListener("input", () => f(o.value.toUpperCase())), s.addEventListener("input", () => {
+    const u = mt(s.value);
+    u && f(u);
   });
   const v = () => {
-    r.value = d;
+    s.value = d;
   };
-  return r.addEventListener("blur", v), r.addEventListener("keydown", (f) => {
-    f.key === "Enter" && (v(), r.select());
+  return s.addEventListener("blur", v), s.addEventListener("keydown", (u) => {
+    u.key === "Enter" && (v(), s.select());
   }), i.addEventListener("click", async () => {
     if ("EyeDropper" in window)
       try {
-        const { sRGBHex: f } = await new window.EyeDropper().open(), m = rt(f);
-        m && u(m);
+        const { sRGBHex: u } = await new window.EyeDropper().open(), m = mt(u);
+        m && f(m);
       } catch {
       }
     else
-      s.click();
-  }), { el: n, setValue: (f) => p(rt(f) || d) };
+      r.click();
+  }), { el: n, setValue: (u) => p(mt(u) || d) };
 }
-function ro({ label: e, options: t, onSelect: n }) {
+function Eo({ label: e, options: t, onSelect: n }) {
   const a = document.createElement("div");
   a.className = "swatches", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", e);
   const o = t.map((l) => {
@@ -1781,36 +1907,36 @@ function ro({ label: e, options: t, onSelect: n }) {
     return d.type = "button", d.className = "swatch", d.setAttribute("role", "radio"), d.dataset.value = l.value, d.innerHTML = `<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`, d.addEventListener("click", () => i(l.value)), d;
   });
   a.append(...o);
-  let s = null;
-  function r(l) {
-    s = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
+  let r = null;
+  function s(l) {
+    r = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
     const d = Math.max(0, o.findIndex((p) => p.dataset.value === l));
-    o.forEach((p, u) => {
-      p.tabIndex = u === d ? 0 : -1;
+    o.forEach((p, f) => {
+      p.tabIndex = f === d ? 0 : -1;
     });
   }
   function i(l, d) {
-    l !== s && (r(l), n(l)), d && o.find((p) => p.dataset.value === l).focus();
+    l !== r && (s(l), n(l)), d && o.find((p) => p.dataset.value === l).focus();
   }
   return a.addEventListener("keydown", (l) => {
     const d = o.indexOf(l.target.closest(".swatch"));
     if (d < 0) return;
     const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let u;
-    if (p) u = (d + p + o.length) % o.length;
-    else if (l.key === "Home") u = 0;
-    else if (l.key === "End") u = o.length - 1;
+    let f;
+    if (p) f = (d + p + o.length) % o.length;
+    else if (l.key === "Home") f = 0;
+    else if (l.key === "End") f = o.length - 1;
     else return;
-    l.preventDefault(), i(o[u].dataset.value, !0);
-  }), r(null), { el: a, setValue: r };
-}
-const so = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], xe = (e) => Object.fromEntries(e.split(" ").map((t, n) => [so[n], `#${t}`])), st = {
-  slate: xe("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
-  gray: xe("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
-  zinc: xe("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
-  neutral: xe("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
-  stone: xe("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
-}, N = (e) => Object.fromEntries(e.split(" ").map((t, n) => [400 + 100 * n, `#${t}`])), it = {
+    l.preventDefault(), i(o[f].dataset.value, !0);
+  }), s(null), { el: a, setValue: s };
+}
+const Co = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], ke = (e) => Object.fromEntries(e.split(" ").map((t, n) => [Co[n], `#${t}`])), bt = {
+  slate: ke("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
+  gray: ke("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
+  zinc: ke("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
+  neutral: ke("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
+  stone: ke("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
+}, N = (e) => Object.fromEntries(e.split(" ").map((t, n) => [400 + 100 * n, `#${t}`])), xt = {
   red: N("f87171 ef4444 dc2626 b91c1c 991b1b"),
   orange: N("fb923c f97316 ea580c c2410c 9a3412"),
   amber: N("fbbf24 f59e0b d97706 b45309 92400e"),
@@ -1828,17 +1954,17 @@ const so = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], xe = (e) => O
   fuchsia: N("e879f9 d946ef c026d3 a21caf 86198f"),
   pink: N("f472b6 ec4899 db2777 be185d 9d174d"),
   rose: N("fb7185 f43f5e e11d48 be123c 9f1239")
-}, Be = [
+}, Xe = [
   { value: "indigo-zinc", label: "Indigo · Zinc", primary: "indigo", neutral: "zinc" },
   { value: "emerald-stone", label: "Emerald · Stone", primary: "emerald", neutral: "stone" },
   { value: "rose-slate", label: "Rose · Slate", primary: "rose", neutral: "slate" },
   { value: "amber-neutral", label: "Amber · Neutral", primary: "amber", neutral: "neutral" }
-], xn = "#4F46E5", io = "#A0743C", lo = [
+], Ln = "#4F46E5", Mo = "#A0743C", To = [
   // Figma Swatch row sample colours
   { value: "pure", label: "Pure", colour: "#8E8E93" },
   { value: "subtle", label: "Subtle", colour: "#8A89A6" },
   { value: "warm", label: "Warm", colour: "#9C9389" }
-], wn = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], co = {
+], An = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], Lo = {
   // proposal
   bg: "#0F0F11",
   surface: "#18181B",
@@ -1846,32 +1972,32 @@ const so = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], xe = (e) => O
   text: "#F4F4F5",
   "text-muted": "#A1A1AA",
   border: "#2E2E33"
-}, po = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, X = (e) => /^#[0-9a-f]{6}$/i.test(e || ""), lt = (e) => [500, 600, 700].includes(Number(e.shade)) ? Number(e.shade) : 600, dt = (e) => e[0].toUpperCase() + e.slice(1);
-function yn(e) {
-  const t = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => t(parseInt(e.slice(l, l + 2), 16))), s = 0.2126 * n + 0.7152 * a + 0.0722 * o, r = 1.05 / (s + 0.05), i = (s + 0.05) / (98e-4 + 0.05);
-  return r >= i ? "#FFFFFF" : "#18181B";
+}, Ao = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, ee = (e) => /^#[0-9a-f]{6}$/i.test(e || ""), wt = (e) => [500, 600, 700].includes(Number(e.shade)) ? Number(e.shade) : 600, vt = (e) => e[0].toUpperCase() + e.slice(1);
+function Pn(e) {
+  const t = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => t(parseInt(e.slice(l, l + 2), 16))), r = 0.2126 * n + 0.7152 * a + 0.0722 * o, s = 1.05 / (r + 0.05), i = (r + 0.05) / (98e-4 + 0.05);
+  return s >= i ? "#FFFFFF" : "#18181B";
 }
-const He = {
+const Je = {
   id: "colour",
   title: "Colour",
   hint: "Brand colour · neutral tint · mode",
-  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...wn.map((e) => `--twd-${e}`)],
+  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...An.map((e) => `--twd-${e}`)],
   tokens(e) {
-    const t = e.colour || {}, n = {}, a = t.mode === "dark", o = it[t.primary];
-    if (!X(t.brand) && o) {
-      const i = lt(t);
-      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = yn(o[i]), n["--twd-focus"] = o[500];
+    const t = e.colour || {}, n = {}, a = t.mode === "dark", o = xt[t.primary];
+    if (!ee(t.brand) && o) {
+      const i = wt(t);
+      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = Pn(o[i]), n["--twd-focus"] = o[500];
     }
-    X(t.brand) && (n["--twd-primary"] = t.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${t.brand} 85%, white)` : `color-mix(in oklch, ${t.brand} 86%, black)`, n["--twd-on-primary"] = yn(t.brand), n["--twd-focus"] = t.brand);
-    const s = t.tint === "subtle" ? X(t.brand) ? t.brand : F("--twd-primary") || xn : t.tint === "warm" ? io : null, r = st[t.neutral];
-    if (r) {
-      const i = a ? { bg: r[950], surface: r[900], "surface-raised": r[800], text: r[100], "text-muted": r[400], border: r[800] } : { bg: r[50], surface: "#ffffff", "surface-raised": "#ffffff", text: r[900], "text-muted": r[500], border: r[200] };
+    ee(t.brand) && (n["--twd-primary"] = t.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${t.brand} 85%, white)` : `color-mix(in oklch, ${t.brand} 86%, black)`, n["--twd-on-primary"] = Pn(t.brand), n["--twd-focus"] = t.brand);
+    const r = t.tint === "subtle" ? ee(t.brand) ? t.brand : L("--twd-primary") || Ln : t.tint === "warm" ? Mo : null, s = bt[t.neutral];
+    if (s) {
+      const i = a ? { bg: s[950], surface: s[900], "surface-raised": s[800], text: s[100], "text-muted": s[400], border: s[800] } : { bg: s[50], surface: "#ffffff", "surface-raised": "#ffffff", text: s[900], "text-muted": s[500], border: s[200] };
       Object.entries(i).forEach(([l, d]) => {
         n[`--twd-${l}`] = d;
       });
-    } else (a || s) && wn.forEach((i) => {
-      const l = a ? co[i] : F(`--twd-${i}`);
-      l && (n[`--twd-${i}`] = s ? `color-mix(in oklch, ${l} ${100 - po[i]}%, ${s})` : l);
+    } else (a || r) && An.forEach((i) => {
+      const l = a ? Lo[i] : L(`--twd-${i}`);
+      l && (n[`--twd-${i}`] = r ? `color-mix(in oklch, ${l} ${100 - Ao[i]}%, ${r})` : l);
     });
     return n;
   },
@@ -1879,61 +2005,61 @@ const He = {
     // ---- Tabbed layout (Colour tab): themes, then Tailwind fine-tuning ----
     themeTiles(e, t, { label: n = "Theme" } = {}) {
       const a = (o) => {
-        const s = st[o.neutral], r = it[o.primary];
-        return `<span class="theme" style="--bg:${s[50]};--line:${s[200]};--ink:${s[900]};--soft:${s[500]};--pri:${r[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[r[400], r[500], r[600], r[700], r[800], s[200], s[500], s[900]].map((i) => `<i style="background:${i}"></i>`).join("")}</span>`;
+        const r = bt[o.neutral], s = xt[o.primary];
+        return `<span class="theme" style="--bg:${r[50]};--line:${r[200]};--ink:${r[900]};--soft:${r[500]};--pri:${s[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[s[400], s[500], s[600], s[700], s[800], r[200], r[500], r[900]].map((i) => `<i style="background:${i}"></i>`).join("")}</span>`;
       };
-      e.append(V(t, {
+      e.append(_(t, {
         section: "colour",
         key: "theme",
         label: n,
         columns: 2,
         className: "tiles-themes",
-        options: Be.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
+        options: Xe.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
         current: (o) => {
-          const s = o.colour || {};
-          return X(s.brand) ? null : Be.find((r) => r.primary === s.primary && r.neutral === s.neutral)?.value || null;
+          const r = o.colour || {};
+          return ee(r.brand) ? null : Xe.find((s) => s.primary === r.primary && s.neutral === r.neutral)?.value || null;
         },
         select: (o) => {
-          const s = Be.find((r) => r.value === o);
-          t.setSection("colour", { primary: s.primary, neutral: s.neutral, shade: null, brand: null, tint: null });
+          const r = Xe.find((s) => s.value === o);
+          t.setSection("colour", { primary: r.primary, neutral: r.neutral, shade: null, brand: null, tint: null });
         },
-        valueText: (o, s) => {
-          const r = s.colour || {};
-          return o ? "" : r.primary || r.neutral || r.brand ? "Custom" : "Prototype colours";
+        valueText: (o, r) => {
+          const s = r.colour || {};
+          return o ? "" : s.primary || s.neutral || s.brand ? "Custom" : "Prototype colours";
         }
       }));
     },
     primary(e, t, { label: n = "Primary" } = {}) {
-      const a = U(n), o = V(t, {
+      const a = D(n), o = _(t, {
         section: "colour",
         key: "primary",
         label: `${n} colour family`,
         columns: 9,
         className: "tiles-swatches",
-        options: Object.entries(it).map(([i, l]) => ({ value: i, label: dt(i), title: dt(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
+        options: Object.entries(xt).map(([i, l]) => ({ value: i, label: vt(i), title: vt(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
         current: (i) => {
           const l = i.colour || {};
-          return X(l.brand) ? null : l.primary || null;
+          return ee(l.brand) ? null : l.primary || null;
         },
         select: (i) => t.setSection("colour", { primary: i, brand: null })
       });
       o.querySelector(".field-head").remove();
-      const s = ce({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => t.setSection("colour", { shade: Number(i) }) });
-      a.append(o, s.el);
-      const r = () => {
+      const r = ge({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => t.setSection("colour", { shade: Number(i) }) });
+      a.append(o, r.el);
+      const s = () => {
         const i = t.getState().colour || {};
-        s.setValue(String(lt(i))), a.setValue(X(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${lt(i)}` : "");
+        r.setValue(String(wt(i))), a.setValue(ee(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${wt(i)}` : "");
       };
-      r(), t.onChange(r), e.append(a.el);
+      s(), t.onChange(s), e.append(a.el);
     },
     neutralTiles(e, t, { label: n = "Neutral" } = {}) {
-      e.append(V(t, {
+      e.append(_(t, {
         section: "colour",
         key: "neutral",
         label: n,
         columns: 5,
         className: "tiles-greys",
-        options: Object.entries(st).map(([a, o]) => ({ value: a, label: dt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((s) => `<i style="background:${s}"></i>`).join("")}</span>` })),
+        options: Object.entries(bt).map(([a, o]) => ({ value: a, label: vt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((r) => `<i style="background:${r}"></i>`).join("")}</span>` })),
         select: (a) => t.setSection("colour", { neutral: a, tint: null }),
         valueText: (a) => a || ""
       }));
@@ -1942,22 +2068,22 @@ const He = {
       const n = document.createElement("details");
       n.className = "more more-custom", n.innerHTML = '<summary><span class="rainbow" aria-hidden="true"></span><span>Custom colour…</span><span class="muted">any hex</span></summary>';
       const a = document.createElement("div");
-      a.className = "more-body", n.append(a), He.parts.brand(a, t, { label: "Brand" }), X((t.getState().colour || {}).brand) && (n.open = !0), e.append(n);
+      a.className = "more-body", n.append(a), Je.parts.brand(a, t, { label: "Brand" }), ee((t.getState().colour || {}).brand) && (n.open = !0), e.append(n);
     },
     brand(e, t, { label: n = "Brand" } = {}) {
-      const a = U(n), o = oo({ label: "Brand colour", onInput: (r) => t.setSection("colour", { brand: r }) });
+      const a = D(n), o = $o({ label: "Brand colour", onInput: (s) => t.setSection("colour", { brand: s }) });
       a.append(o.el);
-      const s = () => o.setValue((t.getState().colour || {}).brand || (t.readToken || F)("--twd-primary") || xn);
-      s(), t.onChange(s), e.append(a.el);
+      const r = () => o.setValue((t.getState().colour || {}).brand || (t.readToken || L)("--twd-primary") || Ln);
+      r(), t.onChange(r), e.append(a.el);
     },
     neutral(e, t, { label: n = "Neutral" } = {}) {
-      const a = U(n), o = ro({ label: "Neutral tint", options: lo, onSelect: (r) => t.setSection("colour", { tint: r }) });
+      const a = D(n), o = Eo({ label: "Neutral tint", options: To, onSelect: (s) => t.setSection("colour", { tint: s }) });
       a.append(o.el);
-      const s = () => o.setValue((t.getState().colour || {}).tint || "pure");
-      s(), t.onChange(s), e.append(a.el);
+      const r = () => o.setValue((t.getState().colour || {}).tint || "pure");
+      r(), t.onChange(r), e.append(a.el);
     },
     mode(e, t, { label: n = "Mode" } = {}) {
-      e.append($e(t, {
+      e.append(Me(t, {
         section: "colour",
         key: "mode",
         label: n,
@@ -1969,12 +2095,12 @@ const He = {
   render(e, t) {
     ["brand", "neutral", "mode"].forEach((n) => this.parts[n](e, t));
   }
-}, Ne = (e, t = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${e}%, ${t})`, uo = {
+}, Ve = (e, t = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${e}%, ${t})`, Po = {
   // proposal recipes; Solid leaves tokens.css defaults
-  soft: { bg: Ne(14), fg: "var(--twd-primary)", border: "transparent", hover: Ne(22) },
-  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Ne(8, "transparent") },
-  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Ne(10, "transparent") }
-}, ho = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, Wn = _n({
+  soft: { bg: Ve(14), fg: "var(--twd-primary)", border: "transparent", hover: Ve(22) },
+  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Ve(8, "transparent") },
+  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Ve(10, "transparent") }
+}, Oo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, ia = aa({
   id: "buttons",
   title: "Buttons",
   hint: "Style · corners · size",
@@ -1994,14 +2120,14 @@ const He = {
     { value: "pill", label: "Pill", radius: 999 }
   ],
   extraTokens(e) {
-    const t = {}, n = uo[e.style];
-    n && Object.entries(n).forEach(([r, i]) => {
-      t[`--twd-button-${r}`] = i;
+    const t = {}, n = Po[e.style];
+    n && Object.entries(n).forEach(([s, i]) => {
+      t[`--twd-button-${s}`] = i;
     });
-    const a = ho[e.size];
+    const a = Oo[e.size];
     if (!a) return t;
-    const o = Se(F("--twd-control-height"), a.height), s = Se(F("--twd-control-pad-x"), a.pad);
-    return o && (t["--twd-control-height"] = o), s && (t["--twd-control-pad-x"] = s), t;
+    const o = Ce(L("--twd-control-height"), a.height), r = Ce(L("--twd-control-pad-x"), a.pad);
+    return o && (t["--twd-control-height"] = o), r && (t["--twd-control-pad-x"] = r), t;
   },
   extra: [
     {
@@ -2016,16 +2142,18 @@ const He = {
       key: "size",
       label: "Size",
       fallback: "medium",
+      valueText: (e, t) => t("--twd-control-height"),
+      // the height in effect (Shape pass)
       preview: (e) => `<span class="shape shape-button size-${e}"></span>`,
       options: [{ value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }]
     }
   ]
-}), fo = {
+}), jo = {
   // proposal recipes; Filled leaves tokens.css defaults
   outlined: { bg: "transparent", border: "color-mix(in oklch, var(--twd-border) 60%, var(--twd-text))", shadow: "none" },
   elevated: { bg: "var(--twd-surface-raised)", border: "transparent", shadow: "var(--twd-shadow-md)" },
   tinted: { bg: "color-mix(in oklch, var(--twd-primary) 8%, var(--twd-surface))", border: "color-mix(in oklch, var(--twd-primary) 25%, var(--twd-surface))", shadow: "none" }
-}, St = _n({
+}, Ft = aa({
   id: "cards",
   title: "Cards",
   hint: "Style · corners · border",
@@ -2045,11 +2173,11 @@ const He = {
     // proposal (cards don't go fully pill)
   ],
   extraTokens(e) {
-    const t = {}, n = fo[e.style];
+    const t = {}, n = jo[e.style];
     if (n && Object.entries(n).forEach(([a, o]) => {
       t[`--twd-card-${a}`] = o;
     }), e.border === "none" && (t["--twd-border-width-container"] = "0px"), e.border === "thick") {
-      const a = Se(F("--twd-border-width-container"), 2);
+      const a = Ce(L("--twd-border-width-container"), 2);
       a && (t["--twd-border-width-container"] = a);
     }
     return t;
@@ -2060,59 +2188,64 @@ const He = {
       label: "Style",
       fallback: "filled",
       columns: 4,
-      preview: (e) => `<span class="shape shape-card style-${e}"></span>`,
+      // A mini card with two content lines on a page backdrop (Figma 281:1421)
+      preview: (e) => `<span class="mini"><span class="mini-card style-${e}"><i></i><i></i></span></span>`,
       options: [{ value: "filled", label: "Filled" }, { value: "outlined", label: "Outlined" }, { value: "elevated", label: "Elevated" }, { value: "tinted", label: "Tinted" }]
     },
     {
       key: "border",
       label: "Border",
       fallback: "thin",
+      token: "--twd-border-width-container",
+      // Bold widens it
       preview: (e) => `<span class="shape shape-card border-${e}"></span>`,
       options: [{ value: "none", label: "None" }, { value: "thin", label: "Thin" }, { value: "thick", label: "Thick" }]
     }
   ]
-}), ie = 60, ct = {
+}), qe = (e) => !(e.depth || {}).style && he(e, "--twd-shadow-md"), Fo = (e) => ((e.character || {}).bold || 0.5) > 0.5, G = 60, yt = {
   soft: { sm: [0, 1, 2, 0, 0.06], md: [0, 4, 12, 0, 0.08], lg: [0, 12, 32, 0, 0.12] },
   // = tokens.css
   crisp: { sm: [0, 1, 1, 0, 0.12], md: [0, 2, 4, 0, 0.14], lg: [0, 4, 8, 0, 0.16] },
   bold: { sm: [2, 2, 0, 0, 0.85], md: [3, 3, 0, 0, 0.85], lg: [5, 5, 0, 0, 0.85] }
-}, je = ([e, t, n, a, o], s) => {
-  const r = Math.min(1, +(o * s).toFixed(3));
-  return r <= 0 ? "none" : `${e}px ${t}px ${n}px ${a}px rgb(0 0 0 / ${r})`;
-}, $t = {
+}, He = ([e, t, n, a, o], r) => {
+  const s = Math.min(1, +(o * r).toFixed(3));
+  return s <= 0 ? "none" : `${e}px ${t}px ${n}px ${a}px rgb(0 0 0 / ${s})`;
+}, Nt = {
   id: "depth",
   title: "Depth",
   hint: "Flat · soft · crisp · bold",
   uses: ["--twd-shadow-sm", "--twd-shadow-md", "--twd-shadow-lg"],
   tokens(e) {
-    const t = e.depth || {}, n = t.style || "soft", a = typeof t.intensity == "number" ? Math.min(100, Math.max(0, t.intensity)) : ie;
+    const t = e.depth || {}, n = t.style || "soft", a = typeof t.intensity == "number" ? Math.min(100, Math.max(0, t.intensity)) : G;
     if (n === "flat")
       return { "--twd-shadow-sm": "none", "--twd-shadow-md": "none", "--twd-shadow-lg": "none" };
-    const o = ct[n];
+    const o = yt[n];
     if (!o) return {};
-    if (n === "soft" && a === ie) return {};
-    const s = a / ie;
+    if (n === "soft" && a === G) return {};
+    const r = a / G;
     return {
-      "--twd-shadow-sm": je(o.sm, s),
-      "--twd-shadow-md": je(o.md, s),
-      "--twd-shadow-lg": je(o.lg, s)
+      "--twd-shadow-sm": He(o.sm, r),
+      "--twd-shadow-md": He(o.md, r),
+      "--twd-shadow-lg": He(o.lg, r)
     };
   },
   parts: {
     // Tabbed layout: each style as a small card wearing that shadow.
     styleTiles(e, t, { label: n = "Style" } = {}) {
-      const a = (o) => `<span class="shape shape-card shadow-${o}" style="box-shadow:${ct[o] ? je(ct[o].md, 1) : "none"}"></span>`;
-      e.append(V(t, {
+      const a = (o) => `<span class="shape shape-card shadow-${o}" style="box-shadow:${yt[o] ? He(yt[o].md, 1) : "none"}"></span>`;
+      e.append(_(t, {
         section: "depth",
         key: "style",
         label: n,
         fallback: "soft",
         columns: 4,
-        options: ["flat", "soft", "crisp", "bold"].map((o) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(o) }))
+        options: ["flat", "soft", "crisp", "bold"].map((o) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(o) })),
+        current: (o) => (o.depth || {}).style || (qe(o) ? null : "soft"),
+        valueText: (o, r) => qe(r) ? `${Fo(r) ? "Bold recipe" : "Soft, faded"} · from Character` : ""
       }));
     },
     style(e, t, { label: n = "Style" } = {}) {
-      e.append($e(t, {
+      e.append(Me(t, {
         section: "depth",
         key: "style",
         label: n,
@@ -2121,98 +2254,115 @@ const He = {
       }));
     },
     intensity(e, t, { label: n = "Intensity" } = {}) {
-      e.append(Xa(t, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: ie, format: (a) => `${a}%` }));
+      e.append(go(t, {
+        section: "depth",
+        key: "intensity",
+        label: n,
+        min: 0,
+        max: 100,
+        fallback: G,
+        format: (a) => `${a}%`,
+        note: (a) => qe(a) ? "from Character" : "",
+        // What the pad actually uses (character.js): Bold = 60% × bold; Subtle fades this slider's value.
+        value: (a) => {
+          if (!qe(a)) return (a.depth || {}).intensity;
+          const o = a.character.bold, r = typeof (a.depth || {}).intensity == "number" ? a.depth.intensity : G;
+          return Math.round(o > 0.5 ? G * (2 * o - 1) : r * (1 - (1 - 2 * o)));
+        }
+      }));
     }
   },
   render(e, t) {
     Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, go = (e) => Math.min(1, Math.max(0, e)), vn = (e) => Math.round(e / 50) * 50, pt = (e) => `${+e.toFixed(1)}%`;
-function Tt(e = {}) {
-  return typeof e.bold == "number" && isFinite(e.bold) && e.bold !== 0.5 ? go(e.bold) : null;
+}, No = (e) => Math.min(1, Math.max(0, e)), On = (e) => Math.round(e / 50) * 50, kt = (e) => `${+e.toFixed(1)}%`;
+function Bt(e = {}) {
+  return typeof e.bold == "number" && isFinite(e.bold) && e.bold !== 0.5 ? No(e.bold) : null;
 }
-const Re = (e, t, n) => (e.tokens(t) || {})[n] || F(n), mo = {
+const _e = (e, t, n) => (e.tokens(t) || {})[n] || L(n), la = {
   id: "character",
   title: "Character",
   hint: "Subtle ↔ Bold",
   uses: [],
   // set from the Simple page only
   tokens(e) {
-    const t = Tt(e.character);
+    const t = Bt(e.character);
     if (t === null) return {};
-    const n = {}, a = 2 * t - 1, o = Math.max(0, a), s = Math.max(0, -a);
-    n["--twd-weight-heading"] = String(vn(600 + 200 * a)), n["--twd-weight-strong"] = String(vn(600 + 100 * a));
-    const r = Re(He, e, "--twd-border");
-    if (s && (n["--twd-border"] = `color-mix(in oklch, ${r} ${pt(100 - 50 * s)}, var(--twd-bg))`), o) {
-      n["--twd-border"] = `color-mix(in oklch, ${r} ${pt(100 - 90 * o)}, var(--twd-text))`;
-      const l = Re(He, e, "--twd-text-muted");
-      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${pt(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((d) => {
-        const p = d === "--twd-border-width-container" ? Re(St, e, d) : F(d), u = parseFloat(p);
-        isNaN(u) || (n[d] = `${Math.round(u * (1 + o))}px`);
-      }), [[Wn, "--twd-radius-control"], [St, "--twd-radius-container"]].forEach(([d, p]) => {
-        const u = parseFloat(Re(d, e, p));
-        !isNaN(u) && u < 999 && (n[p] = Se(`${u}px`, 1 - 0.5 * o));
+    const n = {}, a = 2 * t - 1, o = Math.max(0, a), r = Math.max(0, -a);
+    n["--twd-weight-heading"] = String(On(600 + 200 * a)), n["--twd-weight-strong"] = String(On(600 + 100 * a));
+    const s = _e(Je, e, "--twd-border");
+    if (r && (n["--twd-border"] = `color-mix(in oklch, ${s} ${kt(100 - 50 * r)}, var(--twd-bg))`), o) {
+      n["--twd-border"] = `color-mix(in oklch, ${s} ${kt(100 - 90 * o)}, var(--twd-text))`;
+      const l = _e(Je, e, "--twd-text-muted");
+      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${kt(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((d) => {
+        const p = d === "--twd-border-width-container" ? _e(Ft, e, d) : L(d), f = parseFloat(p);
+        f > 0 && (n[d] = `${Math.round(f * (1 + o))}px`);
+      }), [[ia, "--twd-radius-control"], [Ft, "--twd-radius-container"]].forEach(([d, p]) => {
+        const f = parseFloat(_e(d, e, p));
+        f > 0 && f < 999 && (n[p] = Ce(`${f}px`, 1 - 0.5 * o));
       });
     }
     const i = e.depth || {};
     if (!i.style) {
-      const l = typeof i.intensity == "number" ? i.intensity : ie, d = s ? $t.tokens({ depth: { style: "soft", intensity: l * (1 - s) } }) : $t.tokens({ depth: { style: "bold", intensity: ie * o } });
+      const l = typeof i.intensity == "number" ? i.intensity : G, d = r ? Nt.tokens({ depth: { style: "soft", intensity: l * (1 - r) } }) : Nt.tokens({ depth: { style: "bold", intensity: G * o } });
       Object.assign(n, d);
     }
     return n;
   },
   describe: (e, t) => e === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(t * 100)}%` } : null
-}, bo = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>', xo = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
-let wo = 0;
-function yo({ label: e, options: t, onSelect: n, placeholder: a, onOpen: o }) {
-  const s = `twd-fonts-${++wo}`, r = document.createElement("div");
-  r.className = "font-select";
+};
+mo((e) => la.tokens(e));
+const Ro = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>', zo = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+let Io = 0;
+function Do({ label: e, options: t, onSelect: n, placeholder: a, onOpen: o }) {
+  const r = `twd-fonts-${++Io}`, s = document.createElement("div");
+  s.className = "font-select";
   const i = document.createElement("button");
-  i.type = "button", i.className = "font-trigger", i.setAttribute("aria-haspopup", "listbox"), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-controls", s), i.innerHTML = `
+  i.type = "button", i.className = "font-trigger", i.setAttribute("aria-haspopup", "listbox"), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-controls", r), i.innerHTML = `
     <span class="font-aa" aria-hidden="true">Aa</span>
     <span class="font-name"></span>
     <span class="font-fonts"></span>
-    <span class="font-chevron">${bo}</span>`;
+    <span class="font-chevron">${Ro}</span>`;
   const l = document.createElement("div");
-  l.className = "font-menu", l.id = s, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", e), l.hidden = !0;
+  l.className = "font-menu", l.id = r, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", e), l.hidden = !0;
   const d = t.map((h) => {
-    const y = document.createElement("div");
-    return y.className = "font-option", y.setAttribute("role", "option"), y.tabIndex = -1, y.dataset.value = h.value, y.innerHTML = `
+    const w = document.createElement("div");
+    return w.className = "font-option", w.setAttribute("role", "option"), w.tabIndex = -1, w.dataset.value = h.value, w.innerHTML = `
       <span class="font-aa" style="font-family:${h.preview}" aria-hidden="true">Aa</span>
       <span class="font-text"><span class="font-name">${h.name}</span><span class="font-fonts">${h.fonts}</span></span>
-      <span class="font-check">${xo}</span>`, y.addEventListener("click", () => b(h.value)), y;
+      <span class="font-check">${zo}</span>`, w.addEventListener("click", () => b(h.value)), w;
   });
-  l.append(...d), r.append(i, l);
+  l.append(...d), s.append(i, l);
   let p = null;
-  function u(h) {
-    const y = t.find((E) => E.value === h), L = y || a || t[0];
-    p = y ? y.value : a ? null : t[0].value, i.querySelector(".font-name").textContent = L.name, i.querySelector(".font-fonts").textContent = L.fonts, i.querySelector(".font-aa").style.fontFamily = L.preview, i.setAttribute("aria-label", `${e}: ${L.name}, ${L.fonts}`), d.forEach((E) => E.setAttribute("aria-selected", String(E.dataset.value === p)));
+  function f(h) {
+    const w = t.find(($) => $.value === h), S = w || a || t[0];
+    p = w ? w.value : a ? null : t[0].value, i.querySelector(".font-name").textContent = S.name, i.querySelector(".font-fonts").textContent = S.fonts, i.querySelector(".font-aa").style.fontFamily = S.preview, i.setAttribute("aria-label", `${e}: ${S.name}, ${S.fonts}`), d.forEach(($) => $.setAttribute("aria-selected", String($.dataset.value === p)));
   }
   function v() {
-    const h = i.getBoundingClientRect(), y = l.offsetHeight, E = window.innerHeight - h.bottom - 8 >= y ? h.bottom + 4 : Math.max(8, h.top - 4 - y);
-    l.style.top = `${E}px`, l.style.left = `${h.left}px`, l.style.width = `${h.width}px`;
+    const h = i.getBoundingClientRect(), w = l.offsetHeight, $ = window.innerHeight - h.bottom - 8 >= w ? h.bottom + 4 : Math.max(8, h.top - 4 - w);
+    l.style.top = `${$}px`, l.style.left = `${h.left}px`, l.style.width = `${h.width}px`;
   }
-  function f() {
-    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), v(), (d.find((h) => h.dataset.value === p) || d[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", m), r.closest(".body")?.addEventListener("scroll", m, { once: !0 }));
+  function u() {
+    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), v(), (d.find((h) => h.dataset.value === p) || d[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", m), s.closest(".body")?.addEventListener("scroll", m, { once: !0 }));
   }
   function m(h) {
     l.hidden || (l.hidden = !0, i.setAttribute("aria-expanded", "false"), document.removeEventListener("pointerdown", x, !0), window.removeEventListener("resize", m), h === !0 && i.focus());
   }
   function x(h) {
-    h.composedPath().includes(r) || m();
+    h.composedPath().includes(s) || m();
   }
   function b(h) {
-    h !== p && (u(h), n(h)), m(!0);
+    h !== p && (f(h), n(h)), m(!0);
   }
-  return i.addEventListener("click", () => l.hidden ? f() : m(!0)), i.addEventListener("keydown", (h) => {
-    (h.key === "ArrowDown" || h.key === "ArrowUp") && (h.preventDefault(), f());
+  return i.addEventListener("click", () => l.hidden ? u() : m(!0)), i.addEventListener("keydown", (h) => {
+    (h.key === "ArrowDown" || h.key === "ArrowUp") && (h.preventDefault(), u());
   }), l.addEventListener("keydown", (h) => {
-    const y = d.indexOf(h.target);
-    let L = null;
-    if (h.key === "ArrowDown") L = Math.min(d.length - 1, y + 1);
-    else if (h.key === "ArrowUp") L = Math.max(0, y - 1);
-    else if (h.key === "Home") L = 0;
-    else if (h.key === "End") L = d.length - 1;
+    const w = d.indexOf(h.target);
+    let S = null;
+    if (h.key === "ArrowDown") S = Math.min(d.length - 1, w + 1);
+    else if (h.key === "ArrowUp") S = Math.max(0, w - 1);
+    else if (h.key === "Home") S = 0;
+    else if (h.key === "End") S = d.length - 1;
     else if (h.key === "Enter" || h.key === " ") {
       h.preventDefault(), b(h.target.dataset.value);
       return;
@@ -2223,57 +2373,57 @@ function yo({ label: e, options: t, onSelect: n, placeholder: a, onOpen: o }) {
       m();
       return;
     }
-    L !== null && (h.preventDefault(), d[L].focus());
-  }), u(a ? null : t[0].value), { el: r, setValue: u };
-}
-const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', ze = 'Georgia, "Times New Roman", serif', J = [
-  { value: "neutral", name: "Neutral", fonts: "Inter · Inter", heading: `"Inter", ${I}`, body: `"Inter", ${I}`, load: ["Inter:wght@400;500;600;700"] },
-  { value: "modern", name: "Modern", fonts: "Geist · Geist", heading: `"Geist", ${I}`, body: `"Geist", ${I}`, load: ["Geist:wght@400;500;600;700"] },
-  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${ze}`, body: `"Inter", ${I}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
-  { value: "technical", name: "Technical", fonts: "Space Grotesk · DM Sans", heading: `"Space Grotesk", ${I}`, body: `"DM Sans", ${I}`, load: ["Space+Grotesk:wght@500;600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${ze}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${ze}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
-  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${ze}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
-  { value: "friendly", name: "Friendly", fonts: "Manrope · Manrope", heading: `"Manrope", ${I}`, body: `"Manrope", ${I}`, load: ["Manrope:wght@400;500;600;700"] }
-], we = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, kn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, Sn = /* @__PURE__ */ new Set();
-function ut(e) {
-  const t = e.filter((a) => !Sn.has(a));
+    S !== null && (h.preventDefault(), d[S].focus());
+  }), f(a ? null : t[0].value), { el: s, setValue: f };
+}
+const z = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', Ke = 'Georgia, "Times New Roman", serif', ae = [
+  { value: "neutral", name: "Neutral", fonts: "Inter · Inter", heading: `"Inter", ${z}`, body: `"Inter", ${z}`, load: ["Inter:wght@400;500;600;700"] },
+  { value: "modern", name: "Modern", fonts: "Geist · Geist", heading: `"Geist", ${z}`, body: `"Geist", ${z}`, load: ["Geist:wght@400;500;600;700"] },
+  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${Ke}`, body: `"Inter", ${z}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
+  { value: "technical", name: "Technical", fonts: "Space Grotesk · DM Sans", heading: `"Space Grotesk", ${z}`, body: `"DM Sans", ${z}`, load: ["Space+Grotesk:wght@500;600;700", "DM+Sans:wght@400;500;600;700"] },
+  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${Ke}`, body: `"DM Sans", ${z}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
+  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${Ke}`, body: `"IBM Plex Sans", ${z}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
+  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${Ke}`, body: `"Inter", ${z}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
+  { value: "friendly", name: "Friendly", fonts: "Manrope · Manrope", heading: `"Manrope", ${z}`, body: `"Manrope", ${z}`, load: ["Manrope:wght@400;500;600;700"] }
+], Se = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, jn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, Fn = /* @__PURE__ */ new Set();
+function St(e) {
+  const t = e.filter((a) => !Fn.has(a));
   if (!t.length) return;
-  t.forEach((a) => Sn.add(a));
+  t.forEach((a) => Fn.add(a));
   const n = document.createElement("link");
   n.rel = "stylesheet", n.href = `https://fonts.googleapis.com/css2?${t.map((a) => `family=${a}`).join("&")}&display=swap`, n.dataset.twiddle = "fonts", document.head.appendChild(n);
 }
-const vo = {
+const Bo = {
   id: "typography",
   title: "Typography",
   hint: "Font pairing · base size · scale",
-  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(kn).map((e) => `--twd-text-${e}`)],
+  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(jn).map((e) => `--twd-text-${e}`)],
   tokens(e) {
-    const t = e.typography || {}, n = {}, a = J.find((o) => o.value === t.font);
-    if (a && (ut(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), t.base || t.scale) {
-      const o = Number(t.base) || 16, s = we[t.scale] || we.balanced;
-      Object.entries(kn).forEach(([r, i]) => {
-        n[`--twd-text-${r}`] = `${+(o * s ** i / 16).toFixed(3)}rem`;
+    const t = e.typography || {}, n = {}, a = ae.find((o) => o.value === t.font);
+    if (a && (St(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), t.base || t.scale) {
+      const o = Number(t.base) || 16, r = Se[t.scale] || Se.balanced;
+      Object.entries(jn).forEach(([s, i]) => {
+        n[`--twd-text-${s}`] = `${+(o * r ** i / 16).toFixed(3)}rem`;
       });
     }
     return n;
   },
   parts: {
     fonts(e, t, { label: n = "Fonts" } = {}) {
-      const a = U(n), o = yo({
+      const a = D(n), o = Do({
         label: "Font pairing",
-        options: J.map((r) => ({ value: r.value, name: r.name, fonts: r.fonts, preview: r.heading })),
-        placeholder: { name: "Default", fonts: "Prototype fonts", preview: I },
+        options: ae.map((s) => ({ value: s.value, name: s.name, fonts: s.fonts, preview: s.heading })),
+        placeholder: { name: "Default", fonts: "Prototype fonts", preview: z },
         // Load every pairing's fonts when the list opens, so the "Aa" previews are real.
-        onOpen: () => ut([...new Set(J.flatMap((r) => r.load))]),
-        onSelect: (r) => t.setSection("typography", { font: r })
+        onOpen: () => St([...new Set(ae.flatMap((s) => s.load))]),
+        onSelect: (s) => t.setSection("typography", { font: s })
       });
       a.append(o.el);
-      const s = () => o.setValue((t.getState().typography || {}).font || null);
-      s(), t.onChange(s), e.append(a.el);
+      const r = () => o.setValue((t.getState().typography || {}).font || null);
+      r(), t.onChange(r), e.append(a.el);
     },
     base(e, t, { label: n = "Base size" } = {}) {
-      e.append($e(t, {
+      e.append(Me(t, {
         section: "typography",
         key: "base",
         label: n,
@@ -2285,92 +2435,100 @@ const vo = {
     // Tabbed layout: pairings as tiles, each "Aa" in its own heading font.
     // The fonts load (from Google Fonts) only once the tiles are on screen.
     fontTiles(e, t, { label: n = "Fonts" } = {}) {
-      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, s = V(t, {
+      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, r = _(t, {
         section: "typography",
         key: "font",
         label: n,
         columns: 2,
         className: "tiles-fonts",
         options: [
-          { value: "default", label: "Prototype fonts", sub: "Default", preview: o(I), wide: !0 },
-          ...J.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
+          { value: "default", label: "Prototype fonts", sub: "Default", preview: o(z), wide: !0 },
+          ...ae.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
         ],
         current: (i) => (i.typography || {}).font || "default",
         select: (i) => t.setSection("typography", { font: i === "default" ? null : i }),
-        valueText: (i) => i === "default" ? "Default" : J.find((l) => l.value === i)?.name || ""
-      }), r = new IntersectionObserver((i) => {
-        i.some((l) => l.isIntersecting) && (ut([...new Set(J.flatMap((l) => l.load))]), r.disconnect());
+        valueText: (i) => i === "default" ? "Default" : ae.find((l) => l.value === i)?.name || ""
+      }), s = new IntersectionObserver((i) => {
+        i.some((l) => l.isIntersecting) && (St([...new Set(ae.flatMap((l) => l.load))]), s.disconnect());
       });
-      r.observe(s), e.append(s);
+      s.observe(r), e.append(r);
+    },
+    // The weights in effect; Subtle ↔ Bold on the Character pad moves them (linked settings, rule 2).
+    weights(e, t, { label: n = "Weights" } = {}) {
+      const a = D(n), o = () => {
+        const r = t.getState(), s = L("--twd-weight-heading"), i = L("--twd-weight-strong");
+        a.setValue(s || i ? `Headings ${s || "—"} · strong ${i || "—"}${he(r, "--twd-weight-heading") ? " · from Character" : ""}` : "");
+      };
+      o(), t.onChange(o), e.append(a.el);
     },
     scaleTiles(e, t, { label: n = "Scale" } = {}) {
-      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((s) => `<b style="font-size:${Math.round(13 * o ** s)}px">A</b>`).join("")}</span>`;
-      e.append(V(t, {
+      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((r) => `<b style="font-size:${Math.round(13 * o ** r)}px">A</b>`).join("")}</span>`;
+      e.append(_(t, {
         section: "typography",
         key: "scale",
         label: n,
         fallback: "balanced",
-        options: Object.entries(we).map(([o, s]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(s) })),
-        valueText: (o) => String(we[o])
+        options: Object.entries(Se).map(([o, r]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(r) })),
+        valueText: (o) => String(Se[o])
       }));
     },
     scale(e, t, { label: n = "Scale" } = {}) {
-      e.append($e(t, {
+      e.append(Me(t, {
         section: "typography",
         key: "scale",
         label: n,
         fallback: "balanced",
         options: [{ value: "compact", label: "Compact" }, { value: "balanced", label: "Balanced" }, { value: "expressive", label: "Expressive" }],
-        valueText: (a) => String(we[a])
+        valueText: (a) => String(Se[a])
       }));
     }
   },
   render(e, t) {
     Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, [$n, Ie] = kt;
-function ko(e) {
+}, [Nn, We] = jt;
+function Uo(e) {
   return e > 0.56 ? "Bold" : e < 0.44 ? "Subtle" : "Balanced";
 }
-function Gn(e) {
-  return e > 1.06 ? "Comfy" : e < 0.94 ? "Compact" : "Regular";
+function Vo(e) {
+  return $e(e, "spacing") ? "Custom spacing" : Dt(H(e.density));
 }
-const De = (e) => e && e[0].toUpperCase() + e.slice(1), En = [
+const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), Rn = [
   ["colour", "Colour", (e) => {
-    const t = e.colour || {}, n = Be.find((o) => o.primary === t.primary && o.neutral === t.neutral);
-    return { text: `${t.brand ? t.brand.toUpperCase() : n && !t.shade ? n.label : t.primary ? `${De(t.primary)}${t.neutral ? ` · ${De(t.neutral)}` : ""}` : "Prototype colours"}${t.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
+    const t = e.colour || {}, n = Xe.find((o) => o.primary === t.primary && o.neutral === t.neutral);
+    return { text: `${t.brand ? t.brand.toUpperCase() : n && !t.shade ? n.label : t.primary ? `${Ge(t.primary)}${t.neutral ? ` · ${Ge(t.neutral)}` : ""}` : "Prototype colours"}${t.mode === "dark" ? " · Dark" : ""}`, swatch: L("--twd-primary") };
   }],
   ["type", "Type", (e) => {
     const t = e.typography || {};
-    return { text: `${J.find((n) => n.value === t.font)?.name || "Prototype fonts"} · ${t.base || 16}px` };
+    return { text: `${ae.find((n) => n.value === t.font)?.name || "Prototype fonts"} · ${t.base || 16}px` };
   }],
-  ["spacing", "Spacing", (e) => ({ text: Gn(se(e.density)) })],
-  ["shape", "Shape", (e) => ({ text: `${De((e.buttons || {}).corners) || "Default"} corners` })],
-  ["shadows", "Shadows", (e) => ({ text: De((e.depth || {}).style) || (Tt(e.character) !== null ? "From the pad" : "Default") })]
-], So = {
+  ["spacing", "Spacing", (e) => ({ text: $e(e, "spacing") ? "Custom" : Dt(H(e.density)) })],
+  ["shape", "Shape", (e) => ({ text: `${Ge((e.buttons || {}).corners) || "Default"} corners` })],
+  ["shadows", "Shadows", (e) => ({ text: Ge((e.depth || {}).style) || (Bt(e.character) !== null ? "From the pad" : "Default") })]
+], qo = {
   summary(e, t, { label: n = "Current look", goTab: a } = {}) {
-    const o = U(n), s = document.createElement("div");
-    s.className = "summary", En.forEach(([i, l]) => {
+    const o = D(n), r = document.createElement("div");
+    r.className = "summary", Rn.forEach(([i, l]) => {
       const d = document.createElement("button");
-      d.type = "button", d.className = "summary-row", d.dataset.summary = i, d.innerHTML = `<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`, d.querySelector(".summary-name").textContent = l, d.addEventListener("click", () => a && a(i)), s.append(d);
-    }), o.append(s);
-    const r = () => {
+      d.type = "button", d.className = "summary-row", d.dataset.summary = i, d.innerHTML = `<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${P.chevron}</span>`, d.querySelector(".summary-name").textContent = l, d.addEventListener("click", () => a && a(i)), r.append(d);
+    }), o.append(r);
+    const s = () => {
       const i = t.getState();
-      En.forEach(([l, , d]) => {
-        const p = s.querySelector(`[data-summary="${l}"]`), u = d(i);
-        p.querySelector(".summary-value").textContent = u.text;
+      Rn.forEach(([l, , d]) => {
+        const p = r.querySelector(`[data-summary="${l}"]`), f = d(i);
+        p.querySelector(".summary-value").textContent = f.text;
         const v = p.querySelector(".summary-swatch");
-        v.hidden = !u.swatch, u.swatch && (v.style.background = u.swatch);
+        v.hidden = !f.swatch, f.swatch && (v.style.background = f.swatch);
       });
     };
-    r(), t.onChange(r), e.append(o.el);
+    s(), t.onChange(s), e.append(o.el);
   },
   character(e, t, { label: n = "Character" } = {}) {
-    const a = U(n), o = Wa({
+    const a = D(n), o = uo({
       label: n,
       ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
-      onInput: (r, i) => {
-        const l = +(Ie - i * (Ie - $n)).toFixed(3), d = +r.toFixed(3);
+      onInput: (s, i) => {
+        const l = +(We - i * (We - Nn)).toFixed(3), d = +s.toFixed(3);
         t.setSections({
           density: { factor: l === 1 ? null : l, spacing: null },
           character: { bold: d === 0.5 ? null : d }
@@ -2378,61 +2536,61 @@ const De = (e) => e && e[0].toUpperCase() + e.slice(1), En = [
       }
     });
     a.append(o.el);
-    const s = () => {
-      const r = t.getState(), i = se(r.density), l = Tt(r.character), d = l === null ? 0.5 : l, p = `${Gn(i)} · ${ko(d)}`;
-      o.setValue(d, (Ie - i) / (Ie - $n), p), a.setValue(p);
+    const r = () => {
+      const s = t.getState(), i = H(s.density), l = Bt(s.character), d = l === null ? 0.5 : l, p = `${Vo(s)} · ${Uo(d)}`;
+      o.setValue(d, (We - i) / (We - Nn), p), a.setValue(p);
     };
-    s(), t.onChange(s), e.append(a.el);
+    r(), t.onChange(r), e.append(a.el);
   }
-}, ht = [
+}, $t = [
   { key: "page-pad", label: "Page padding", step: 5 },
   { key: "section-gap", label: "Section gap", step: 6 },
   { key: "card-pad", label: "Card padding", step: 5 },
   { key: "card-gap", label: "Card gap", step: 2 },
   { key: "control-gap", label: "Control gap", step: 3 },
   { key: "control-pad-x", label: "Control padding", step: null }
-], $o = [1, 2, 3, 4, 5, 6, 7, 8], Eo = /^var\(\s*--twd-space-(\d)\s*\)$/, ft = (e) => {
+], Ho = [1, 2, 3, 4, 5, 6, 7, 8], _o = /^var\(\s*--twd-space-(\d)\s*\)$/, Et = (e) => {
   const t = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(e).trim());
   return t ? +(parseFloat(t[1]) * (t[2] === "rem" ? 16 : 1)).toFixed(1) : null;
 };
-function Co(e, t, n) {
+function Ko(e, t, n) {
   const a = `--twd-${t.key}`, o = document.createElement("div");
   o.className = "role-row", n || o.classList.add("unused"), o.innerHTML = `
     <span class="role-label" title="${a}${n ? "" : " (not used on this page)"}">${t.label}</span>
     <label class="token-value role-fixed" hidden><input type="text" inputmode="decimal" spellcheck="false" aria-label="${t.label}, fixed value"><span class="token-unit">px</span></label>
     <span class="step-select">
       <select aria-label="${t.label}"></select>
-      <span class="step-chevron" aria-hidden="true">${A.down}</span>
+      <span class="step-chevron" aria-hidden="true">${P.down}</span>
     </span>
-    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${t.label}" hidden>${A.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${t.label}" hidden>${P.reset}</button>
   `;
-  const s = o.querySelector("select"), r = o.querySelector(".role-fixed"), i = r.querySelector("input"), l = o.querySelector(".token-reset"), d = () => (e.getState().custom || {})[t.key], p = () => {
+  const r = o.querySelector("select"), s = o.querySelector(".role-fixed"), i = s.querySelector("input"), l = o.querySelector(".token-reset"), d = () => (e.getState().custom || {})[t.key], p = () => {
     const x = d();
-    if (x == null) return t.step ? { step: t.step } : { fixed: F(a) };
-    const b = Eo.exec(x);
+    if (x == null) return t.step ? { step: t.step } : { fixed: L(a) };
+    const b = _o.exec(x);
     return b ? { step: +b[1] } : { fixed: x };
-  }, u = (x) => e.setSection("custom", { [t.key]: x }), v = (x) => t.step ? x === `var(--twd-space-${t.step})` : !1;
-  s.addEventListener("change", () => {
-    if (s.value === "fixed") {
-      const b = ft(F(a));
-      u(b != null ? `${b}px` : F(a)), i.focus(), i.select();
+  }, f = (x) => e.setSection("custom", { [t.key]: x }), v = (x) => t.step ? x === `var(--twd-space-${t.step})` : !1;
+  r.addEventListener("change", () => {
+    if (r.value === "fixed") {
+      const b = Et(L(a));
+      f(b != null ? `${b}px` : L(a)), i.focus(), i.select();
       return;
     }
-    const x = `var(--twd-space-${s.value})`;
-    u(v(x) ? null : x);
+    const x = `var(--twd-space-${r.value})`;
+    f(v(x) ? null : x);
   });
-  const f = () => {
+  const u = () => {
     const x = i.value.trim();
-    if (!x) return u(null);
-    u(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
+    if (!x) return f(null);
+    f(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
   };
-  i.addEventListener("change", f), i.addEventListener("blur", () => m()), i.addEventListener("keydown", (x) => {
+  i.addEventListener("change", u), i.addEventListener("blur", () => m()), i.addEventListener("keydown", (x) => {
     x.key === "Enter" && (x.preventDefault(), i.blur()), x.key === "Escape" && (x.stopPropagation(), m(), i.blur());
-  }), l.addEventListener("click", () => u(null));
+  }), l.addEventListener("click", () => f(null));
   function m() {
     const x = p();
-    if (s.innerHTML = $o.map((h) => `<option value="${h}">space-${h} · ${ft(F(`--twd-space-${h}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', s.value = x.step ? String(x.step) : "fixed", r.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
-      const h = ft(x.fixed);
+    if (r.innerHTML = Ho.map((h) => `<option value="${h}">space-${h} · ${Et(L(`--twd-space-${h}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', r.value = x.step ? String(x.step) : "fixed", s.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
+      const h = Et(x.fixed);
       i.value = h != null ? String(h) : x.fixed;
     }
     const b = d() != null;
@@ -2440,18 +2598,18 @@ function Co(e, t, n) {
   }
   return m(), e.onChange(m), o;
 }
-const Mo = {
+const Wo = {
   spacing(e, t, { label: n = "Roles" } = {}) {
-    const a = _a(), o = U(n);
+    const a = co(), o = D(n);
     o.el.classList.add("token-field");
-    const s = ht.filter((l) => !a.has(`--twd-${l.key}`));
-    o.setValue(s.length === ht.length ? "not used on this page" : "");
-    const r = document.createElement("div");
-    r.className = "token-rows", ht.forEach((l) => r.append(Co(t, l, a.has(`--twd-${l.key}`)))), o.append(r), e.append(o.el);
+    const r = $t.filter((l) => !a.has(`--twd-${l.key}`));
+    o.setValue(r.length === $t.length ? "not used on this page" : "");
+    const s = document.createElement("div");
+    s.className = "token-rows", $t.forEach((l) => s.append(Ko(t, l, a.has(`--twd-${l.key}`)))), o.append(s), e.append(o.el);
     const i = document.createElement("p");
-    i.className = "role-note", i.textContent = s.length ? `Only elements styled with these tokens change. Not used on this page: ${s.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", e.append(i);
+    i.className = "role-note", i.textContent = r.length ? `Only elements styled with these tokens change. Not used on this page: ${r.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", e.append(i);
   }
-}, ye = [
+}, te = [
   { id: "overview", title: "Overview", icon: "tabOverview", parts: [["simple", "character"], ["simple", "summary"]] },
   { id: "colour", title: "Colour", icon: "tabColour", parts: [
     ["colour", "themeTiles"],
@@ -2467,6 +2625,7 @@ const Mo = {
     ["typography", "fontTiles"],
     ["typography", "base"],
     ["typography", "scaleTiles"],
+    ["typography", "weights"],
     { more: "Type tokens", parts: [["custom", "fonts"], ["custom", "type"], ["custom", "leading"], ["custom", "weights"]] }
   ] },
   { id: "spacing", title: "Spacing", icon: "tabSpacing", parts: [
@@ -2475,15 +2634,21 @@ const Mo = {
     { more: "Spacing tokens", parts: [["custom", "spacing"]] }
   ] },
   { id: "shape", title: "Shape", icon: "tabShape", parts: [
-    // Figma: "Shape — with styles" (257:711), agreed 2026-10-15
-    { heading: "Buttons" },
-    ["buttons", "styleTiles", { label: "Style" }],
-    ["buttons", "cornerTiles", { label: "Corners" }],
-    ["buttons", "sizeTiles", { label: "Size" }],
-    { heading: "Cards" },
-    ["cards", "styleTiles", { label: "Style" }],
-    ["cards", "cornerTiles", { label: "Corners" }],
-    ["cards", "borderTiles", { label: "Borders" }],
+    // Shape pass (Ravi, 2026-10-16; Figma 281:1158 / 281:1421): one group at a
+    // time, so the tab fits without scrolling. Buttons & Inputs: corners and size
+    // also change inputs and chips (shared control tokens).
+    { tabs: [
+      { label: "Buttons & Inputs", parts: [
+        ["buttons", "styleTiles", { label: "Style" }],
+        ["buttons", "cornerTiles", { label: "Corners" }],
+        ["buttons", "sizeTiles", { label: "Size" }]
+      ] },
+      { label: "Cards", parts: [
+        ["cards", "styleTiles", { label: "Style" }],
+        ["cards", "cornerTiles", { label: "Corners" }],
+        ["cards", "borderTiles", { label: "Borders" }]
+      ] }
+    ] },
     { more: "Shape tokens", parts: [["custom", "buttonStyle"], ["custom", "cardStyle"], ["custom", "cardShadow"], ["custom", "corners"], ["custom", "controls"], ["custom", "borders"]] }
   ] },
   { id: "shadows", title: "Shadows", icon: "tabShadows", parts: [
@@ -2491,62 +2656,59 @@ const Mo = {
     ["depth", "intensity"],
     { more: "Shadow tokens", parts: [["custom", "shadows"]] }
   ] }
-], O = (e) => String(e).replace(/[&<>"]/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[t]);
-function To({ sections: e, store: t, view: n }) {
+], F = (e) => String(e).replace(/[&<>"]/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[t]);
+function Go({ sections: e, store: t, view: n }) {
   const a = document.createElement("div");
   a.id = "twiddle-root", document.body.appendChild(a);
-  const o = a.attachShadow({ mode: "open" }), s = (c) => c.map((g) => `
-    <details data-section="${g.id}">
-      <summary>${g.title}<span class="chev">${A.chevron}</span></summary>
-      <div class="section-body"><div class="placeholder">${g.hint}</div></div>
-    </details>
-  `).join("");
+  const o = a.attachShadow({ mode: "open" });
   o.innerHTML = `
-    <style>${va}</style>
+    <style>${Da}</style>
     <div class="pick-box" hidden><span class="pick-tag"></span></div>
     <div class="wrap">
       <div class="toast" role="status"></div>
+      <section class="side" aria-label="Changes" hidden>
+        <div class="side-head"><span>Changes</span><button class="icon-btn" data-action="changes-close" title="Close Changes" aria-label="Close Changes">${P.close}</button></div>
+        <div class="body" data-view="changes"></div>
+      </section>
       <div class="panel" role="dialog" aria-label="Panel" hidden>
-        <div class="head">
-          <span class="brand">Panel</span>
-          <button class="icon-btn" data-action="pick" title="Pick an element to tweak on its own" aria-label="Pick an element" aria-pressed="false">${A.pick}</button>
-          <button class="icon-btn" data-action="compare" title="Hold to see the original (Alt+C toggles)" aria-label="Compare with original" aria-pressed="false">${A.compare}</button>
-          <button class="icon-btn" data-action="copy" title="Copy link to this version" aria-label="Copy link">${A.link}</button>
-          <button class="icon-btn" data-action="reset" title="Reset to defaults" aria-label="Reset">${A.reset}</button>
-          <button class="icon-btn" data-action="minimise" title="Minimise to the tabs" aria-label="Minimise to the tabs">${A.minimise}</button>
-          <button class="icon-btn" data-action="close" title="Close (Alt+T)" aria-label="Close">${A.close}</button>
+        <nav class="tabbar" aria-label="Areas">
+          ${te.map((c) => `<button class="tab" data-tab="${c.id}" title="${c.title}" aria-pressed="false">${P[c.icon]}<span>${c.title}</span></button>`).join("")}
+          <button class="icon-btn tab-min" data-action="minimise" title="Minimise to the tabs" aria-label="Minimise to the tabs">${P.minimise}</button>
+        </nav>
+        <div class="original-pill" hidden>Showing original</div>
+        <div class="body" data-view="global"><div class="setup-hint" role="status" hidden></div>
+          ${te.map((c) => `<div class="page page-fields" data-page="${c.id}" hidden></div>`).join("")}
         </div>
+        <div class="body" data-view="local" hidden></div>
+        <!-- One footer row with every action (Ravi, 2026-10-16); the launcher closes the panel. -->
         <div class="actions">
-          <button class="icon-btn" data-action="undo" title="Undo (⌘Z)" aria-label="Undo">${A.undo}</button>
-          <button class="icon-btn" data-action="redo" title="Redo (⇧⌘Z)" aria-label="Redo">${A.redo}</button>
-          <button class="text-btn" data-action="changes" aria-pressed="false">Changes <span class="badge" hidden></span></button>
+          <button class="icon-btn" data-action="undo" title="Undo (⌘Z)" aria-label="Undo">${P.undo}</button>
+          <button class="icon-btn" data-action="redo" title="Redo (⇧⌘Z)" aria-label="Redo">${P.redo}</button>
+          <span class="sep" aria-hidden="true"></span>
+          <button class="icon-btn" data-action="pick" title="Pick an element to tweak on its own" aria-label="Pick an element" aria-pressed="false">${P.pick}</button>
+          <button class="icon-btn" data-action="compare" title="Hold to see the original (Alt+C toggles)" aria-label="Compare with original" aria-pressed="false">${P.compare}</button>
+          <button class="icon-btn" data-action="copy" title="Copy link to this version" aria-label="Copy link">${P.link}</button>
+          <button class="icon-btn" data-action="reset" title="Reset to defaults" aria-label="Reset">${P.reset}</button>
+          <span class="sep" aria-hidden="true"></span>
+          <button class="changes-btn" data-action="changes" title="Changes" aria-label="Changes" aria-pressed="false"><span class="badge">0</span></button>
           <span class="spacer"></span>
           <div class="apply">
-            <button class="apply-btn" data-action="apply" title="Copy these tweaks as a prompt for your coding agent">Copy prompt</button>
-            <button class="apply-menu-btn" data-action="apply-menu" aria-label="Copy prompt options" aria-haspopup="true" aria-expanded="false">${A.down}</button>
+            <button class="apply-btn" data-action="apply" title="Copy these tweaks as a prompt for your coding agent">Copy<span class="wide"> prompt</span></button>
+            <button class="apply-menu-btn" data-action="apply-menu" aria-label="Copy prompt options" aria-haspopup="true" aria-expanded="false">${P.down}</button>
             <div class="menu apply-menu" role="menu" hidden>
               <button role="menuitemradio" data-apply-mode="preview">Preview before copying</button>
               <button role="menuitemradio" data-apply-mode="copy">Copy without preview</button>
             </div>
           </div>
         </div>
-        <div class="original-pill" hidden>Showing original</div>
-        <div class="body" data-view="global"><div class="setup-hint" role="status" hidden></div>
-          ${ye.map((c) => `<div class="page page-fields" data-page="${c.id}" hidden></div>`).join("")}
-        </div>
-        <div class="body" data-view="local" hidden></div>
-        <div class="body" data-view="changes" hidden></div>
-        <nav class="tabbar" aria-label="Areas">
-          ${ye.map((c) => `<button class="tab" data-tab="${c.id}" aria-pressed="false">${A[c.icon]}<span>${c.title}</span></button>`).join("")}
-        </nav>
       </div>
-      <button class="launcher" aria-label="Open Panel" aria-expanded="false" title="Panel · drag to move, double-click to reset">${A.panelMark}</button>
+      <button class="launcher" aria-label="Open Panel" aria-expanded="false" title="Panel · drag to move, double-click to reset">${P.panelMark}</button>
     </div>
     <div class="dialog-backdrop" hidden>
       <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="twd-dialog-title">
         <div class="dialog-head">
           <span id="twd-dialog-title">Prompt for your agent</span>
-          <button class="icon-btn" data-action="dialog-close" aria-label="Close">${A.close}</button>
+          <button class="icon-btn" data-action="dialog-close" aria-label="Close">${P.close}</button>
         </div>
         <textarea class="prompt-text" readonly spellcheck="false" aria-label="Generated prompt"></textarea>
         <div class="dialog-foot">
@@ -2556,432 +2718,452 @@ function To({ sections: e, store: t, view: n }) {
       </div>
     </div>
   `;
-  const r = (c) => o.querySelector(c), i = r(".panel"), l = r(".launcher"), d = r(".toast"), p = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, u = r(".pick-box"), v = r(".pick-tag"), f = { getState: t.getState, setSection: t.setSection, setSections: t.setSections, onChange: t.onChange };
-  function m(c, g, w) {
+  const r = (c) => o.querySelector(c), s = r(".panel"), i = r(".launcher"), l = r(".toast"), d = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, p = r(".pick-box"), f = r(".pick-tag"), v = { getState: t.getState, setSection: t.setSection, setSections: t.setSections, onChange: t.onChange }, u = Object.fromEntries(e.map((c) => [c.id, c]));
+  function m(c, g, y = v) {
+    const C = y !== v;
     g.forEach((k) => {
-      if (typeof k.render != "function") return;
-      const C = c.querySelector(`[data-section="${k.id}"] .section-body`);
-      C.innerHTML = "", k.render(C, w);
-    });
-    const $ = [...c.querySelectorAll("details")];
-    return $.forEach((k) => k.addEventListener("toggle", () => {
-      k.open && $.forEach((C) => {
-        C !== k && (C.open = !1);
-      });
-    })), $;
-  }
-  const x = Object.fromEntries(e.map((c) => [c.id, c]));
-  function b(c, g) {
-    g.forEach((w) => {
-      if (w === "warnings") {
-        const S = document.createElement("div");
-        S.className = "warnings page-warnings", c.append(S);
+      if (k === "warnings") {
+        if (C) return;
+        const j = document.createElement("div");
+        j.className = "warnings page-warnings", c.append(j);
         return;
       }
-      if (w.heading) {
-        const S = document.createElement("div");
-        S.className = "page-heading", S.innerHTML = `<span></span>${w.note ? '<span class="muted"></span>' : ""}`, S.firstChild.textContent = w.heading, w.note && (S.lastChild.textContent = w.note), c.append(S);
+      if (k.heading) {
+        const j = document.createElement("div");
+        j.className = "page-heading", j.innerHTML = `<span></span>${k.note ? '<span class="muted"></span>' : ""}`, j.firstChild.textContent = k.heading, k.note && (j.lastChild.textContent = k.note), c.append(j);
         return;
       }
-      if (w.more) {
-        const S = document.createElement("details");
-        S.className = "more", S.innerHTML = `<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`, S.querySelector("summary span:last-child").textContent = w.more, b(S.querySelector(".more-body"), w.parts), c.append(S);
+      if (k.more) {
+        const j = document.createElement("details");
+        j.className = "more", j.innerHTML = `<summary><span class="chev" aria-hidden="true">${P.chevron}</span><span></span></summary><div class="more-body"></div>`, j.querySelector("summary span:last-child").textContent = k.more, m(j.querySelector(".more-body"), k.parts, y), c.append(j);
         return;
       }
-      if (w.tabs) {
-        const S = w.tabs.map((j) => {
-          const z = document.createElement("div");
-          return z.className = "tab-pane", b(z, j.parts), z;
-        }), be = ce({
+      if (k.tabs) {
+        const j = k.tabs.map((W) => {
+          const q = document.createElement("div");
+          return q.className = "tab-pane", m(q, W.parts, y), q;
+        }), dt = ge({
           label: "View",
-          options: w.tabs.map((j, z) => ({ value: String(z), label: j.label })),
-          onSelect: (j) => {
-            be.setValue(j), S.forEach((z, ra) => {
-              z.hidden = String(ra) !== j;
+          options: k.tabs.map((W, q) => ({ value: String(q), label: W.label })),
+          onSelect: (W) => {
+            dt.setValue(W), j.forEach((q, va) => {
+              q.hidden = String(va) !== W;
             });
           }
         });
-        be.setValue("0"), S.forEach((j, z) => {
-          j.hidden = z !== 0;
-        }), c.append(be.el, ...S);
+        dt.setValue("0"), j.forEach((W, q) => {
+          W.hidden = q !== 0;
+        }), c.append(dt.el, ...j);
         return;
       }
-      const [$, k, C = {}] = w, q = $ === "simple" ? So[k] : $ === "roles" ? Mo[k] : x[$]?.parts?.[k];
-      q && q(c, f, { ...C, buttons: x.buttons, cards: x.cards, goTab: (S) => {
-        W("global"), E(S);
+      const [T, U, O = {}] = k, ye = T === "simple" ? qo[U] : T === "roles" ? Wo[U] : u[T]?.parts?.[U];
+      ye && ye(c, y, { ...O, buttons: u.buttons, cards: u.cards, goTab: (j) => {
+        Ae(Ut()), w(j);
       } });
     });
   }
-  ye.forEach((c) => b(p.global.querySelector(`[data-page="${c.id}"]`), c.parts));
-  const h = [...o.querySelectorAll(".tab")];
-  let y = ye.some((c) => c.id === Z("tab")) ? Z("tab") : ye[0].id;
-  function L() {
-    h.forEach((c) => c.setAttribute("aria-pressed", String(K === "global" && c.dataset.tab === y)));
-  }
-  function E(c) {
-    y = c, oe("tab", c), p.global.querySelectorAll(".page").forEach((g) => {
-      g.hidden = g.dataset.page !== c;
-    }), p.global.scrollTop = 0, L();
-  }
-  const ee = (c) => c.map((g) => `<div class="warning">${A.warn}<span>${O(g.text)}</span></div>`).join("");
-  let K = "global";
-  function W(c) {
-    K = c, Object.entries(p).forEach(([g, w]) => {
-      w.hidden = g !== c;
-    }), r('[data-action="changes"]').setAttribute("aria-pressed", String(c === "changes")), c !== "local" && Qn(), c === "changes" && Wt(), L();
-  }
-  E(y);
-  const Ke = "cubic-bezier(0.3, 0.7, 0.2, 1)", We = "cubic-bezier(0.2, 0.8, 0.2, 1)", Ee = 640, ue = 100, Ge = 50, Yn = () => l.querySelector(".mark-knob"), Xn = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
-  function At(c) {
-    if (matchMedia("(prefers-reduced-motion: reduce)").matches || !l.animate) return;
-    const g = Yn(), [w, $] = Xn(), k = (C) => `translateY(${C}px)`;
+  te.forEach((c) => m(d.global.querySelector(`[data-page="${c.id}"]`), c.parts));
+  const x = [...o.querySelectorAll(".tab")];
+  let b = te.some((c) => c.id === ne("tab")) ? ne("tab") : te[0].id;
+  function h() {
+    x.forEach((c) => c.setAttribute("aria-pressed", String(c.dataset.tab === b)));
+  }
+  function w(c) {
+    b = c, ce("tab", c), [d.global, d.local].forEach((g) => {
+      g.querySelectorAll(".page").forEach((y) => {
+        y.hidden = y.dataset.page !== c;
+      }), g.scrollTop = 0;
+    }), h();
+  }
+  const S = (c) => c.map((g) => `<div class="warning">${P.warn}<span>${F(g.text)}</span></div>`).join(""), $ = r(".side");
+  let K = !1;
+  function Z(c) {
+    K = c && !s.hidden, $.hidden = !K, r('[data-action="changes"]').setAttribute("aria-pressed", String(K)), K && rn();
+  }
+  let Le = "global";
+  const Ut = () => E ? "local" : "global";
+  function Ae(c) {
+    Le = c, Object.entries(d).forEach(([g, y]) => {
+      y.hidden = g !== c;
+    }), h();
+  }
+  w(b);
+  const et = "cubic-bezier(0.3, 0.7, 0.2, 1)", tt = "cubic-bezier(0.2, 0.8, 0.2, 1)", Pe = 640, me = 100, nt = 50, da = () => i.querySelector(".mark-knob"), ca = () => [i.querySelector(".mark-t1"), i.querySelector(".mark-t2")];
+  function Vt(c) {
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches || !i.animate) return;
+    const g = da(), [y, C] = ca(), k = (T) => `translateY(${T}px)`;
     if (c) {
-      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Ee, easing: Ke });
-      const C = [{ transform: "scale(0.4)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }];
-      $.animate(C, { duration: ue * 2, delay: Ee * 0.12, easing: Ke, fill: "backwards" }), w.animate(C, { duration: ue * 2, delay: Ee * 0.32 + Ge, easing: Ke, fill: "backwards" });
+      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Pe, easing: et });
+      const T = [{ transform: "scale(0.4)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }];
+      C.animate(T, { duration: me * 2, delay: Pe * 0.12, easing: et, fill: "backwards" }), y.animate(T, { duration: me * 2, delay: Pe * 0.32 + nt, easing: et, fill: "backwards" });
     } else {
-      const C = [{ opacity: 1 }, { opacity: 0 }];
-      w.animate(C, { duration: ue, easing: We }), $.animate(C, { duration: ue, delay: Ge / 2, easing: We, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Ee * 0.7, delay: ue + Ge / 2, easing: We, fill: "backwards" });
+      const T = [{ opacity: 1 }, { opacity: 0 }];
+      y.animate(T, { duration: me, easing: tt }), C.animate(T, { duration: me, delay: nt / 2, easing: tt, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Pe * 0.7, delay: me + nt / 2, easing: tt, fill: "backwards" });
     }
   }
-  const Ye = r(".wrap"), Lt = $a({ wrapEl: Ye, launcherEl: l });
-  let Pt = !1;
-  function Ce(c) {
-    Pt = c, i.classList.toggle("minimised", c), i.hidden || oe("panel", c ? "tabs" : "open");
+  const Oe = r(".wrap"), qt = Va({ wrapEl: Oe, launcherEl: i });
+  let at = !1;
+  function be(c) {
+    at = c, s.classList.toggle("minimised", c), c && Z(!1), Oe.classList.toggle("is-min", c);
+    const g = r('[data-action="minimise"]');
+    g.title = c ? "Expand the panel" : "Minimise to the tabs", g.setAttribute("aria-label", g.title), s.hidden || ce("panel", c ? "tabs" : "open");
   }
-  function G({ animate: c = !0 } = {}) {
-    i.hidden && c && At(!0), i.hidden = !1, Ye.classList.add("is-open"), l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), Ce(!1);
+  function J({ animate: c = !0 } = {}) {
+    s.hidden && c && Vt(!0), s.hidden = !1, Oe.classList.add("is-open"), i.setAttribute("aria-expanded", "true"), i.setAttribute("aria-label", "Close Panel"), be(!1);
   }
-  function Zn() {
-    i.hidden && G(), Ce(!0);
+  function pa() {
+    s.hidden && J(), be(!0);
   }
-  function Xe() {
-    i.hidden || At(!1), i.hidden = !0, Ye.classList.remove("is-open"), l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), oe("panel", "closed"), Te();
+  function ot() {
+    s.hidden || Vt(!1), s.hidden = !0, Oe.classList.remove("is-open", "is-min"), Z(!1), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-label", "Open Panel"), ce("panel", "closed"), Re();
   }
-  function Me() {
-    i.hidden ? G() : Xe();
+  function je() {
+    s.hidden ? J() : ot();
   }
-  let Ot;
-  function H(c) {
-    d.textContent = c, d.classList.add("show"), clearTimeout(Ot), Ot = setTimeout(() => d.classList.remove("show"), 1600);
+  let Ht;
+  function V(c) {
+    l.textContent = c, l.classList.add("show"), clearTimeout(Ht), Ht = setTimeout(() => l.classList.remove("show"), 1600);
   }
-  function he(c, g) {
-    navigator.clipboard.writeText(c).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
+  function xe(c, g) {
+    navigator.clipboard.writeText(c).then(() => V(g)).catch(() => V("Couldn’t copy — select the text and copy it instead"));
   }
-  let Ze = null;
-  function te(c, g) {
-    if (Ze = c, !c) {
-      u.hidden = !0;
+  let rt = null;
+  function se(c, g) {
+    if (rt = c, !c) {
+      p.hidden = !0;
       return;
     }
-    const w = c.getBoundingClientRect();
-    Object.assign(u.style, { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px`, height: `${w.height}px` }), v.textContent = g || vt(c), u.hidden = !1;
+    const y = c.getBoundingClientRect();
+    Object.assign(p.style, { top: `${y.top}px`, left: `${y.left}px`, width: `${y.width}px`, height: `${y.height}px` }), f.textContent = g || Ot(c), p.hidden = !1;
   }
-  const Ft = () => {
-    Ze && !u.hidden && te(Ze, v.textContent);
+  const _t = () => {
+    rt && !p.hidden && se(rt, f.textContent);
   };
-  window.addEventListener("scroll", Ft, !0), window.addEventListener("resize", Ft);
-  let fe = !1;
-  const Nt = r('[data-action="pick"]'), jt = (c) => c.composedPath().includes(a);
-  function Rt(c) {
-    if (jt(c)) return;
+  window.addEventListener("scroll", _t, !0), window.addEventListener("resize", _t);
+  let ie = !1;
+  const Fe = r('[data-action="pick"]'), Kt = (c) => c.composedPath().includes(a);
+  function Wt(c) {
+    if (Kt(c)) return;
     const g = c.target;
-    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && te(g);
+    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && se(g);
   }
-  function zt(c) {
-    if (jt(c) || (c.preventDefault(), c.stopPropagation(), c.type !== "click")) return;
+  function Gt(c) {
+    if (Kt(c) || (c.preventDefault(), c.stopPropagation(), c.type !== "click")) return;
     const g = c.target;
-    !g || g === document.documentElement || g === document.body || (Te(), Bt(g));
+    !g || g === document.documentElement || g === document.body || (Re(), Jt(g));
   }
-  function It(c) {
-    c.key === "Escape" && (c.preventDefault(), Te(), T && te(T.el));
+  function Yt(c) {
+    c.key === "Escape" && (c.preventDefault(), Re(), E && se(E.el), Ne());
   }
-  const Dt = ["pointerdown", "mousedown", "mouseup", "click"];
-  function Ut() {
-    if (!fe) {
-      if (fe = !0, !document.getElementById("twiddle-picking")) {
+  const Xt = ["pointerdown", "mousedown", "mouseup", "click"];
+  function Zt() {
+    if (!ie) {
+      if (ie = !0, !document.getElementById("twiddle-picking")) {
         const c = document.createElement("style");
         c.id = "twiddle-picking", c.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(c);
       }
-      G(), Nt.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Rt, !0), Dt.forEach((c) => document.addEventListener(c, zt, !0)), document.addEventListener("keydown", It, !0), H("Click an element · Esc to cancel");
+      J(), Fe.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Wt, !0), Xt.forEach((c) => document.addEventListener(c, Gt, !0)), document.addEventListener("keydown", Yt, !0), V("Click an element · Esc to cancel");
     }
   }
-  function Te() {
-    fe && (fe = !1, Nt.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Rt, !0), Dt.forEach((c) => document.removeEventListener(c, zt, !0)), document.removeEventListener("keydown", It, !0), te(T ? T.el : null));
+  function Ne() {
+    const c = ie || !!E;
+    Fe.setAttribute("aria-pressed", String(c));
+    const g = c ? "Leave selection mode" : "Pick an element to tweak on its own";
+    Fe.title = g, Fe.setAttribute("aria-label", c ? "Leave selection mode" : "Pick an element");
+  }
+  function Re() {
+    ie && (ie = !1, Ne(), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Wt, !0), Xt.forEach((c) => document.removeEventListener(c, Gt, !0)), document.removeEventListener("keydown", Yt, !0), se(E ? E.el : null));
   }
-  let T = null;
-  function Jn(c, g) {
-    const w = [];
+  let E = null;
+  function ua(c, g) {
+    const y = [];
     return {
       ctx: {
         getState: () => (t.getState().scopes || {})[c] || {},
-        setSection: ($, k) => t.setScope(c, $, k),
-        onChange: ($) => {
-          const k = t.onChange($);
-          return w.push(k), k;
+        setSection: (C, k) => t.setScope(c, C, k),
+        setSections: (C, k) => t.setScopeSections(c, C, k),
+        onChange: (C) => {
+          const k = t.onChange(C);
+          return y.push(k), k;
         },
-        readToken: ($) => getComputedStyle(g).getPropertyValue($).trim()
+        readToken: (C) => getComputedStyle(g).getPropertyValue(C).trim()
       },
-      dispose: () => w.forEach(($) => $())
+      dispose: () => y.forEach((C) => C())
     };
   }
-  function Bt(c, g) {
-    const w = La(c), $ = t.getState().scopes || {};
-    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), T && T.dispose(), T = { el: c, info: w, target: g, dispose: () => {
-    } }, Je(), W("local"), G(), te(c);
+  function Jt(c, g) {
+    const y = Ga(c), C = t.getState().scopes || {};
+    g || (g = !C[y.elementSelector] && y.classSelector && C[y.classSelector] ? "class" : "element"), E && E.dispose(), E = { el: c, info: y, target: g, dispose: () => {
+    } }, st(), Ae("local"), J(), se(c), Ne(), lt();
   }
-  const qt = () => T.target === "class" ? T.info.classSelector : T.info.elementSelector;
-  function Je() {
-    T.dispose();
-    const { info: c } = T, g = e.filter((j) => (j.uses || []).some((z) => c.tokens.has(z))), w = p.local;
-    if (w.innerHTML = `
+  const Qt = () => E.target === "class" ? E.info.classSelector : E.info.elementSelector;
+  function st() {
+    E.dispose();
+    const { info: c } = E, g = d.local;
+    if (g.innerHTML = `
       <div class="scope-bar">
         <div class="scope-head">
-          <button class="icon-btn" data-action="back" title="Back to the whole page" aria-label="Back to the whole page">${A.back}</button>
+          <button class="icon-btn" data-action="back" title="Leave selection mode" aria-label="Leave selection mode">${P.back}</button>
           <div class="scope-name">
-            <code>${O(vt(c.el))}</code>
-            ${c.text ? `<span class="muted">“${O(c.text)}”</span>` : ""}
+            <code>${F(Ot(c.el))}</code>
+            ${c.text ? `<span class="muted">“${F(c.text)}”</span>` : ""}
           </div>
         </div>
         <div class="scope-target"></div>
+        ${c.tokens.size ? "" : '<div class="scope-note">This element doesn’t use Panel tokens yet, so changes here won’t show. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
         <div class="warnings"></div>
       </div>
-      ${g.length ? s(g) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
+      ${te.map((O) => `<div class="page page-fields" data-page="${O.id}"${O.id === b ? "" : " hidden"}></div>`).join("")}
     `, c.classSelector) {
-      const j = ce({
+      const O = ge({
         label: "Apply to",
         options: [
           { value: "element", label: "This element" },
           { value: "class", label: `All ${c.classSelector} (${c.classCount})`, title: `Every element matching ${c.classSelector}` }
         ],
-        onSelect: (z) => {
-          z === "class" && t.moveScope(c.elementSelector, c.classSelector), T.target = z, Je();
+        onSelect: (ye) => {
+          ye === "class" && t.moveScope(c.elementSelector, c.classSelector), E.target = ye, st();
         }
       });
-      j.setValue(T.target), w.querySelector(".scope-target").append(j.el);
+      O.setValue(E.target), g.querySelector(".scope-target").append(O.el);
     }
-    const { ctx: $, dispose: k } = Jn(qt(), c.el), C = m(w, g, $);
-    C[0] && (C[0].open = !0);
-    const q = w.querySelector(".warnings"), S = () => {
-      const j = c.tokens.size ? Da(c.el) : null;
-      q.innerHTML = j ? ee([j]) : "";
+    const { ctx: y, dispose: C } = ua(Qt(), c.el);
+    te.forEach((O) => m(g.querySelector(`[data-page="${O.id}"]`), O.parts, y));
+    const k = g.querySelector(".warnings"), T = () => {
+      const O = c.tokens.size ? ao(c.el) : null;
+      k.innerHTML = O ? S([O]) : "";
     };
-    S();
-    const be = t.onChange(S);
-    T.dispose = () => {
-      k(), be();
+    T();
+    const U = t.onChange(T);
+    E.dispose = () => {
+      C(), U();
     };
   }
-  function Ht() {
-    if (!T || !T.info.classSelector) return;
-    const c = t.getState().scopes || {}, g = T.target === "class" ? "element" : "class", w = g === "class" ? T.info.classSelector : T.info.elementSelector;
-    !c[qt()] && c[w] && (T.target = g, Je());
+  function en() {
+    if (!E || !E.info.classSelector) return;
+    const c = t.getState().scopes || {}, g = E.target === "class" ? "element" : "class", y = g === "class" ? E.info.classSelector : E.info.elementSelector;
+    !c[Qt()] && c[y] && (E.target = g, st());
   }
-  const Vt = () => {
-    t.undo(), Ht();
-  }, _t = () => {
-    t.redo(), Ht();
+  const tn = () => {
+    t.undo(), en();
+  }, nn = () => {
+    t.redo(), en();
   };
-  function Qn() {
-    T && (T.dispose(), T = null, p.local.innerHTML = "", te(null));
+  function an() {
+    E && (E.dispose(), E = null, d.local.innerHTML = "", se(null), Ne(), Le === "local" && Ae("global"));
   }
-  const Kt = (c) => c.kind === "global" ? "Whole page" : c.kind === "class" ? `All ${c.selector}` : "One element";
-  function Wt() {
-    const c = ln(t.getState(), e), g = nt(), w = p.changes;
+  const on = (c) => c.kind === "global" ? "Whole page" : c.kind === "class" ? `All ${c.selector}` : "One element";
+  function rn() {
+    const c = wn(t.getState(), e), g = ut(), y = d.changes;
     if (!c.length) {
-      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${ee(g)}`;
+      y.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${S(g)}`;
       return;
     }
-    const $ = /* @__PURE__ */ new Map();
+    const C = /* @__PURE__ */ new Map();
     c.forEach((k) => {
-      const C = k.selector || "";
-      $.has(C) || $.set(C, []), $.get(C).push(k);
-    }), w.innerHTML = (g.length ? `<div class="warnings">${ee(g)}</div>` : "") + [...$].map(([k, C]) => `
+      const T = k.selector || "";
+      C.has(T) || C.set(T, []), C.get(T).push(k);
+    }), y.innerHTML = (g.length ? `<div class="warnings">${S(g)}</div>` : "") + [...C].map(([k, T]) => `
       <div class="change-group">
         <div class="change-scope">
-          ${k ? `<button class="link-btn" data-select="${O(k)}" title="Select it on the page">${O(Kt(C[0]))}</button><code>${O(k)}</code>` : `<span>${Kt(C[0])}</span>`}
+          ${k ? `<button class="link-btn" data-select="${F(k)}" title="Select it on the page">${F(on(T[0]))}</button><code>${F(k)}</code>` : `<span>${on(T[0])}</span>`}
         </div>
-        ${C.map((q) => `
+        ${T.map((U) => `
           <div class="change-row">
             <div class="change-main">
-              <div class="change-title">${O(q.title)} <span class="muted">›</span> ${q.settings.map((S) => `${O(S.label)}: <b>${O(S.value)}</b>`).join(", ")}</div>
-              ${q.tokens.map((S) => `<div class="change-token"><code>${O(S.name)}</code> ${S.from ? `${O(S.from)} → ` : ""}${O(S.to)}</div>`).join("")}
+              <div class="change-title">${F(U.title)} <span class="muted">›</span> ${U.settings.map((O) => `${F(O.label)}: <b>${F(O.value)}</b>`).join(", ")}</div>
+              ${U.tokens.map((O) => `<div class="change-token"><code>${F(O.name)}</code> ${O.from ? `${F(O.from)} → ` : ""}${F(O.to)}</div>`).join("")}
             </div>
-            <button class="icon-btn" data-remove="${O(q.sectionId)}" data-remove-scope="${O(k)}" aria-label="Remove ${O(q.title)} change">${A.close}</button>
+            <button class="icon-btn" data-remove="${F(U.sectionId)}" data-remove-scope="${F(k)}" aria-label="Remove ${F(U.title)} change">${P.close}</button>
           </div>`).join("")}
       </div>`).join("");
   }
-  function ea(c, g) {
+  function ha(c, g) {
     if (g) return t.removeScope(g, c);
-    const w = t.getState()[c] || {};
-    t.setSection(c, Object.fromEntries(Object.keys(w).map(($) => [$, null])));
+    const y = t.getState()[c] || {};
+    t.setSection(c, Object.fromEntries(Object.keys(y).map((C) => [C, null])));
   }
-  const ge = r(".apply-menu"), Gt = r('[data-action="apply-menu"]'), Yt = () => Z("apply-mode") === "copy" ? "copy" : "preview";
-  function ta() {
-    ge.querySelectorAll("[data-apply-mode]").forEach((c) => c.setAttribute("aria-checked", String(c.dataset.applyMode === Yt())));
+  const we = r(".apply-menu"), sn = r('[data-action="apply-menu"]'), ln = () => ne("apply-mode") === "copy" ? "copy" : "preview";
+  function fa() {
+    we.querySelectorAll("[data-apply-mode]").forEach((c) => c.setAttribute("aria-checked", String(c.dataset.applyMode === ln())));
   }
-  function Ae(c) {
-    ge.hidden = !c, Gt.setAttribute("aria-expanded", String(c)), c && ta();
+  function ze(c) {
+    we.hidden = !c, sn.setAttribute("aria-expanded", String(c)), c && fa();
   }
-  function Xt() {
-    return ja(ln(t.getState(), e), { warnings: nt() });
+  function dn() {
+    return Qa(wn(t.getState(), e), { warnings: ut() });
   }
-  const Le = r(".dialog-backdrop"), Zt = r(".prompt-text");
-  function na() {
-    const c = Xt();
-    if (!c) return H("No changes to copy yet");
-    if (Yt() === "copy") return he(c, "Prompt copied · paste it into your agent");
-    Zt.value = c, Le.hidden = !1, r('[data-action="dialog-copy"]').focus();
+  const Ie = r(".dialog-backdrop"), cn = r(".prompt-text");
+  function ga() {
+    const c = dn();
+    if (!c) return V("No changes to copy yet");
+    if (ln() === "copy") return xe(c, "Prompt copied · paste it into your agent");
+    cn.value = c, Ie.hidden = !1, r('[data-action="dialog-copy"]').focus();
   }
-  function Qe() {
-    Le.hidden = !0, r('[data-action="apply"]').focus();
+  function it() {
+    Ie.hidden = !0, r('[data-action="apply"]').focus();
   }
-  const ne = r('[data-action="compare"]'), aa = r(".original-pill");
-  function Pe(c) {
-    c ? n.suspend() : n.resume(), ne.setAttribute("aria-pressed", String(c)), aa.hidden = !c;
+  const le = r('[data-action="compare"]'), ma = r(".original-pill");
+  function De(c) {
+    c ? n.suspend() : n.resume(), le.setAttribute("aria-pressed", String(c)), ma.hidden = !c;
   }
-  let Jt = null, me = !1;
-  ne.addEventListener("pointerdown", () => {
-    me = !1, Jt = setTimeout(() => {
-      me = !0, Pe(!0);
+  let pn = null, ve = !1;
+  le.addEventListener("pointerdown", () => {
+    ve = !1, pn = setTimeout(() => {
+      ve = !0, De(!0);
     }, 180);
   });
-  const Qt = () => {
-    clearTimeout(Jt), me && (Pe(!1), me = !1);
+  const un = () => {
+    clearTimeout(pn), ve && (De(!1), ve = !1);
   };
-  ne.addEventListener("pointerup", Qt), ne.addEventListener("pointerleave", Qt);
-  const Oe = r(".setup-hint"), en = `setup-hint-dismissed:${location.pathname}`, oa = {
+  le.addEventListener("pointerup", un), le.addEventListener("pointerleave", un);
+  const Be = r(".setup-hint"), hn = `setup-hint-dismissed:${location.pathname}`, ba = {
     "no-tokens": {
       title: "The Panel tokens aren’t loaded",
       text: "The knobs change the --twd-* variables, but this page doesn’t load them. Add the token stylesheet before your own CSS:",
-      snippets: fn,
-      link: `${hn}/#install`
+      snippets: En,
+      link: `${$n}/#install`
     },
     unused: {
       title: "Nothing here uses the Panel tokens yet",
       text: "The tokens are loaded, but no style on this page uses var(--twd-…), so the knobs won’t change anything. Ask your coding agent to convert the styles:",
       copy: "Copy prompt for your agent",
       copied: "Prompt copied",
-      text2copy: Ka,
-      link: `${hn}/#tokens`
+      text2copy: po,
+      link: `${$n}/#tokens`
     }
   };
-  let D = null;
-  function Fe() {
-    const c = Va();
-    D = Z(en) === c ? null : oa[c] || null, l.toggleAttribute("data-hint", !!D), Oe.hidden = !D, D && (Oe.innerHTML = `
-      <div class="setup-head">${A.warn}<b>${O(D.title)}</b>
-        <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${A.close}</button>
+  let B = null;
+  function Ue() {
+    const c = lo();
+    B = ne(hn) === c ? null : ba[c] || null, i.toggleAttribute("data-hint", !!B), Be.hidden = !B, B && (Be.innerHTML = `
+      <div class="setup-head">${P.warn}<b>${F(B.title)}</b>
+        <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${P.close}</button>
       </div>
-      <p>${O(D.text)}</p>
-      ${(D.snippets || []).map((g, w) => `
+      <p>${F(B.text)}</p>
+      ${(B.snippets || []).map((g, y) => `
         <div class="setup-snippet">
-          <span>${O(g.label)}</span>
-          <div class="setup-code"><code>${O(g.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
+          <span>${F(g.label)}</span>
+          <div class="setup-code"><code>${F(g.code)}</code><button class="text-btn" data-setup-snippet="${y}">Copy</button></div>
         </div>`).join("")}
       <div class="setup-actions">
-        ${D.copy ? `<button class="apply-btn" data-action="setup-copy">${O(D.copy)}</button>` : ""}
-        <a href="${D.link}" target="_blank" rel="noopener">Setup guide</a>
-      </div>`, Oe.dataset.status = c);
+        ${B.copy ? `<button class="apply-btn" data-action="setup-copy">${F(B.copy)}</button>` : ""}
+        <a href="${B.link}" target="_blank" rel="noopener">Setup guide</a>
+      </div>`, Be.dataset.status = c);
+  }
+  Ue(), document.readyState !== "complete" && window.addEventListener("load", Ue, { once: !0 }), setTimeout(Ue, 1500);
+  const xa = { "--pv-primary": "--twd-primary", "--pv-on-primary": "--twd-on-primary", "--pv-radius-control": "--twd-radius-control", "--pv-radius-container": "--twd-radius-container" };
+  function lt() {
+    [[d.global, document.documentElement], [d.local, E && E.info.el]].forEach(([c, g]) => {
+      if (!g) return;
+      const y = getComputedStyle(g);
+      Object.entries(xa).forEach(([C, k]) => {
+        const T = y.getPropertyValue(k).trim();
+        T ? c.style.setProperty(C, T) : c.style.removeProperty(C);
+      });
+    });
   }
-  Fe(), document.readyState !== "complete" && window.addEventListener("load", Fe, { once: !0 }), setTimeout(Fe, 1500);
-  const tn = r(".badge");
-  function nn() {
+  t.onChange(() => requestAnimationFrame(lt)), lt();
+  const wa = r(".badge");
+  function fn() {
     r('[data-action="undo"]').disabled = !t.canUndo(), r('[data-action="redo"]').disabled = !t.canRedo();
-    const c = Fa(t.getState());
-    tn.textContent = c, tn.hidden = !c;
-    const g = ee(nt());
-    p.global.querySelectorAll(".page-warnings").forEach((w) => {
-      w.innerHTML = g;
-    }), K === "changes" && Wt();
-  }
-  return t.onChange(nn), nn(), o.addEventListener("click", (c) => {
-    if (c.target === Le) return Qe();
+    const c = Za(t.getState());
+    wa.textContent = c, r('[data-action="changes"]').classList.toggle("has-changes", c > 0), r('[data-action="changes"]').setAttribute("aria-label", `Changes (${c})`);
+    const g = S(ut());
+    d.global.querySelectorAll(".page-warnings").forEach((y) => {
+      y.innerHTML = g;
+    }), K && rn();
+  }
+  return t.onChange(fn), fn(), o.addEventListener("click", (c) => {
+    if (c.target === Ie) return it();
     const g = c.target.closest("button");
     if (g) {
-      if (g !== Gt && !ge.contains(g) && Ae(!1), g === l)
-        return Lt.consumeClick() ? void 0 : c.detail === 2 ? (Me(), Lt.reset(), H("Panel moved back to the corner")) : Me();
+      if (g !== sn && !we.contains(g) && ze(!1), g === i)
+        return qt.consumeClick() ? void 0 : c.detail === 2 ? (je(), qt.reset(), V("Panel moved back to the corner")) : je();
       if (g.dataset.select) {
-        const w = document.querySelector(g.dataset.select);
-        return w ? Bt(w) : H("That element isn’t on this page");
+        const y = document.querySelector(g.dataset.select);
+        return y ? Jt(y) : V("That element isn’t on this page");
       }
-      if (g.dataset.setupSnippet) return he(fn[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.setupSnippet) return xe(En[g.dataset.setupSnippet].code, "Copied");
       if (g.dataset.tab)
-        return W("global"), Pt && Ce(!1), E(g.dataset.tab);
-      if (g.dataset.remove) return ea(g.dataset.remove, g.dataset.removeScope);
+        return Ae(Ut()), at && be(!1), w(g.dataset.tab);
+      if (g.dataset.remove) return ha(g.dataset.remove, g.dataset.removeScope);
       if (g.dataset.applyMode)
-        return oe("apply-mode", g.dataset.applyMode), Ae(!1), H(g.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
+        return ce("apply-mode", g.dataset.applyMode), ze(!1), V(g.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
       switch (g.dataset.action) {
         case "close":
-          return Xe();
+          return ot();
         case "minimise":
-          return Zn(), (o.querySelector('.tab[aria-pressed="true"]') || h[0]).focus();
+          return at ? be(!1) : (pa(), (o.querySelector('.tab[aria-pressed="true"]') || x[0]).focus());
         case "reset":
-          return t.resetState(), H("Reset to defaults · ⌘Z to undo");
+          return t.resetState(), V("Reset to defaults · ⌘Z to undo");
         case "copy":
-          return he(location.href, "Link copied");
+          return xe(location.href, "Link copied");
+        // Pressed again (picking, or an element selected): out of selection mode.
         case "pick":
-          return fe ? Te() : Ut();
+          return ie || E ? (Re(), an()) : Zt();
         case "compare":
-          me || Pe(ne.getAttribute("aria-pressed") !== "true");
+          ve || De(le.getAttribute("aria-pressed") !== "true");
           return;
         case "undo":
-          return Vt();
+          return tn();
         case "redo":
-          return _t();
+          return nn();
         case "back":
-          return W("global");
+          return an();
         case "changes":
-          return W(K === "changes" ? "global" : "changes");
+          return Z(!K);
+        case "changes-close":
+          return Z(!1);
         case "apply":
-          return na();
+          return ga();
         case "apply-menu":
-          return Ae(ge.hidden);
+          return ze(we.hidden);
         case "dialog-close":
-          return Qe();
+          return it();
         case "dialog-copy":
-          return he(Zt.value, "Prompt copied · paste it into your agent");
+          return xe(cn.value, "Prompt copied · paste it into your agent");
         case "setup-copy":
-          return D && he(D.text2copy, D.copied);
+          return B && xe(B.text2copy, B.copied);
         case "setup-dismiss":
-          return oe(en, Oe.dataset.status), Fe();
+          return ce(hn, Be.dataset.status), Ue();
       }
     }
   }), o.addEventListener("keydown", (c) => {
     if (c.key === "Escape") {
-      if (!Le.hidden) return Qe();
-      if (!ge.hidden) return Ae(!1);
+      if (!Ie.hidden) return it();
+      if (!we.hidden) return ze(!1);
     }
-    !(c.metaKey || c.ctrlKey) || c.key.toLowerCase() !== "z" || c.target.matches?.('input[type="text"], textarea') || (c.preventDefault(), c.shiftKey ? _t() : Vt());
+    !(c.metaKey || c.ctrlKey) || c.key.toLowerCase() !== "z" || c.target.matches?.('input[type="text"], textarea') || (c.preventDefault(), c.shiftKey ? nn() : tn());
   }), document.addEventListener("keydown", (c) => {
-    c.altKey && (c.code === "KeyT" && (c.preventDefault(), Me()), c.code === "KeyC" && (c.preventDefault(), Pe(ne.getAttribute("aria-pressed") !== "true")));
-  }), Z("panel") === "open" ? G({ animate: !1 }) : Z("panel") === "tabs" && (G({ animate: !1 }), Ce(!0)), { open: G, close: Xe, toggle: Me, toast: H, pick: Ut, prompt: Xt };
+    c.altKey && (c.code === "KeyT" && (c.preventDefault(), je()), c.code === "KeyC" && (c.preventDefault(), De(le.getAttribute("aria-pressed") !== "true")));
+  }), ne("panel") === "open" ? J({ animate: !1 }) : ne("panel") === "tabs" && (J({ animate: !1 }), be(!0)), { open: J, close: ot, toggle: je, toast: V, pick: Zt, prompt: dn };
 }
-const Cn = [vo, He, Wn, St, to, $t, mo, eo], Ao = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}';
-function Lo() {
+const zn = [Bo, Je, ia, Ft, yo, Nt, la, vo];
+function Yo() {
   if (getComputedStyle(document.documentElement).getPropertyValue("--twd-radius-control").trim() || document.getElementById("twiddle-tokens")) return;
   const t = document.createElement("style");
-  t.id = "twiddle-tokens", t.textContent = Ao, document.head.prepend(t);
+  t.id = "twiddle-tokens", t.textContent = qn, document.head.prepend(t);
 }
 if (!window.Twiddle) {
-  Lo(), Cn.forEach((n) => ga(n.tokens)), Pn(wt);
+  Yo(), zn.forEach((n) => ja(n.tokens)), Vn(At);
   let e;
   const t = () => {
-    wt(mt()), e = To({ sections: Cn, store: fa, view: { suspend: wa, resume: ya } });
+    At(Mt()), e = Go({ sections: zn, store: Aa, view: { suspend: za, resume: Ia } });
   };
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", t) : t(), window.Twiddle = {
     open: () => e && e.open(),
     close: () => e && e.close(),
     toggle: () => e && e.toggle(),
-    reset: () => Tn(),
-    undo: () => An(),
-    redo: () => Ln(),
+    reset: () => Dn(),
+    undo: () => Bn(),
+    redo: () => Un(),
     pick: () => e && e.pick(),
     prompt: () => e ? e.prompt() : "",
-    getState: mt
+    getState: Mt
   };
 }
-const Po = window.Twiddle;
+const Xo = window.Twiddle;
 export {
-  Po as Twiddle
+  Xo as Twiddle
 };