twiddle-panel 0.9.0 → 0.9.1

package/dist/twiddle.mjs

@@ -1,5 +1,5 @@
 const Ct = /* @__PURE__ */ new Set();
-let E = ya(), oe = [], Ee = [], Ze = null, gn = 0;
+let M = ya(), oe = [], Ee = [], Ze = null, gn = 0;
 function ya() {
   const e = new URLSearchParams(location.search).get("twd");
   if (!e) return {};
@@ -11,15 +11,15 @@ function ya() {
 }
 function ka() {
   const e = new URL(location.href);
-  Object.keys(E).length ? e.searchParams.set("twd", JSON.stringify(E)) : e.searchParams.delete("twd"), history.replaceState(history.state, "", e);
+  Object.keys(M).length ? e.searchParams.set("twd", JSON.stringify(M)) : e.searchParams.delete("twd"), history.replaceState(history.state, "", e);
 }
 function Rt() {
-  ka(), Ct.forEach((e) => e(E));
+  ka(), Ct.forEach((e) => e(M));
 }
 function re(e, t) {
-  if (JSON.stringify(e) === JSON.stringify(E)) return;
+  if (JSON.stringify(e) === JSON.stringify(M)) return;
   const n = Date.now();
-  t && t === Ze && n - gn < 400 || (oe.push(E), oe.length > 100 && oe.shift()), Ee = [], Ze = t, gn = n, E = e, Rt();
+  t && t === Ze && n - gn < 400 || (oe.push(M), oe.length > 100 && oe.shift()), Ee = [], Ze = t, gn = n, M = e, Rt();
 }
 function Te(e, t) {
   const n = { ...e, ...t };
@@ -32,51 +32,51 @@ function I(e, t, n) {
   return n == null ? delete a[t] : a[t] = n, a;
 }
 function Mt() {
-  return JSON.parse(JSON.stringify(E));
+  return JSON.parse(JSON.stringify(M));
 }
 function Sa(e, t) {
-  re(I(E, e, Te(E[e], t)), `${e}:${Object.keys(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)), E);
+  const n = Object.entries(e).reduce((a, [o, r]) => I(a, o, Te(a[o], r)), M);
   re(n, t);
 }
-function Dn(e, t, n) {
-  const a = I(E.scopes?.[e], t, Te(E.scopes?.[e]?.[t], n)), o = I(E.scopes, e, Object.keys(a).length ? a : null);
-  re(I(E, "scopes", Object.keys(o).length ? o : null), `${e}|${t}:${Object.keys(n)}`);
+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 Ea(e, t, n = `multi:${Object.keys(t)}`) {
-  const a = Object.entries(t).reduce((r, [s, i]) => I(r, s, Te(r?.[s], i)), E.scopes?.[e]), o = I(E.scopes, e, Object.keys(a).length ? a : null);
-  re(I(E, "scopes", Object.keys(o).length ? o : null), `${e}|${n}`);
+  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 Dn(e, t, Object.fromEntries(
-    Object.keys(E.scopes?.[e]?.[t] || {}).map((a) => [a, null])
+  if (t) return In(e, t, Object.fromEntries(
+    Object.keys(M.scopes?.[e]?.[t] || {}).map((a) => [a, null])
   ));
-  const n = I(E.scopes, e, null);
-  re(I(E, "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 Ma(e, t) {
-  const n = E.scopes?.[e];
+  const n = M.scopes?.[e];
   if (!n || e === t) return;
-  let a = { ...E.scopes[t] };
+  let a = { ...M.scopes[t] };
   Object.entries(n).forEach(([r, s]) => {
     a = I(a, r, Te(a[r], s));
   });
-  const o = I(I(E.scopes, e, null), t, a);
-  re(I(E, "scopes", o));
+  const o = I(I(M.scopes, e, null), t, a);
+  re(I(M, "scopes", o));
 }
-function Bn() {
+function Dn() {
   re({});
 }
-function Un() {
-  oe.length && (Ee.push(E), E = oe.pop(), Ze = null, Rt());
+function Bn() {
+  oe.length && (Ee.push(M), M = oe.pop(), Ze = null, Rt());
 }
-function Vn() {
-  Ee.length && (oe.push(E), E = Ee.pop(), Ze = null, Rt());
+function Un() {
+  Ee.length && (oe.push(M), M = Ee.pop(), Ze = null, Rt());
 }
 const Ta = () => oe.length > 0, La = () => Ee.length > 0;
-function qn(e) {
+function Vn(e) {
   return Ct.add(e), () => Ct.delete(e);
 }
 const Aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -85,21 +85,21 @@ const Aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   canUndo: Ta,
   getState: Mt,
   moveScope: Ma,
-  onChange: qn,
-  redo: Vn,
+  onChange: Vn,
+  redo: Un,
   removeScope: Ca,
-  resetState: Bn,
-  setScope: Dn,
+  resetState: Dn,
+  setScope: In,
   setScopeSections: Ea,
   setSection: Sa,
   setSections: $a,
-  undo: Un
-}, Symbol.toStringTag, { value: "Module" })), Hn = ':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)}', Oa = [...Hn.matchAll(/(--twd-[\w-]+):\s*([^;]*var\(--twd-[^;]*);/g)].map((e) => [e[1], e[2].trim()]);
-function Pa(e) {
+  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 Oa.forEach(([s, i]) => {
+  return Pa.forEach(([s, i]) => {
     const l = e[s];
     if (l != null) {
       String(l).includes("var(") && r.push([s, l]);
@@ -108,12 +108,12 @@ function Pa(e) {
     n.style.setProperty("--twd-probe", i), o.getPropertyValue("--twd-probe").trim() === a.getPropertyValue(s).trim() && r.push([s, i]);
   }), n.remove(), r;
 }
-const _n = [];
-let Tt = [], zt = {}, R = null, fe = !1, Kn = {};
-function Fa(e) {
-  typeof e == "function" && _n.push(e);
+const Hn = [];
+let Tt = [], zt = {}, R = null, fe = !1, _n = {};
+function ja(e) {
+  typeof e == "function" && Hn.push(e);
 }
-const bn = (e) => Object.assign({}, ..._n.map((t) => t(e) || {})), Lt = (e) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(e), ja = (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 {
@@ -123,15 +123,15 @@ const bn = (e) => Object.assign({}, ..._n.map((t) => t(e) || {})), Lt = (e) => /
 function Na() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function Wn() {
+function Kn() {
   const e = document.documentElement;
   Tt.forEach((t) => e.style.removeProperty(t)), Tt = [], zt = {};
 }
 function At(e) {
-  if (Kn = e, fe) return;
+  if (_n = e, fe) return;
   const t = document.documentElement;
-  Wn();
-  const n = bn(e), a = e.scopes ? Pa(n) : [], o = Object.entries(e.scopes || {}).filter(([s]) => ja(s)).sort(([s], [i]) => Lt(i) - Lt(s)).map(([s, i]) => [s, bn(i)]);
+  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} {
 ${[
@@ -144,7 +144,7 @@ ${[
 `);
   (r || R) && (Na().textContent = r);
 }
-function Gn(e) {
+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 {
@@ -154,16 +154,16 @@ function Gn(e) {
   }
 }
 function Ra(e, t = document.documentElement) {
-  return Gn(() => {
+  return Wn(() => {
     const n = getComputedStyle(t);
     return Object.fromEntries(e.map((a) => [a, n.getPropertyValue(a).trim()]));
   });
 }
 function za() {
-  fe || (Wn(), R && (R.disabled = !0), fe = !0);
+  fe || (Kn(), R && (R.disabled = !0), fe = !0);
 }
 function Ia() {
-  fe && (fe = !1, R && (R.disabled = !1), At(Kn));
+  fe && (fe = !1, R && (R.disabled = !1), At(_n));
 }
 const Da = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
@@ -909,32 +909,35 @@ const Da = `
   .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); }
-  /* Cards › Fill tiles */
-  .shape-card[class*="fill-"] { border-radius: 6px; border-color: var(--p-muted); }
-  .shape-card.fill-none { background: transparent; border-style: dashed; }
-  .shape-card.fill-surface { background: var(--p-hover); }
-  .shape-card.fill-raised { background: color-mix(in oklch, var(--p-hover) 80%, white); }
-  .shape-card.fill-tinted { background: rgb(79 70 229 / 0.28); }
-  .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); }
 
@@ -985,91 +988,91 @@ const Da = `
   .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); }
-`, L = (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: L(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  link: L(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: L(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
-  close: L(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
-  chevron: L(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.
   // Figma: Icon/Cursor (39:313), the header's Pick button.
-  pick: L(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: L(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: L(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
-  redo: L(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
-  back: L(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
-  down: L(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
-  minimise: L(15, 2, '<path d="M6 9l6 6 6-6"/>'),
+  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: L(15, 2, '<path d="M9 6h11M9 12h11M9 18h11"/><path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>'),
-  copy: L(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
-  warn: L(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
+  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: L(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  tabColour: L(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: L(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
-  tabSpacing: L(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
-  tabShape: L(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: L(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
-  sliders: L(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)
-}, Yn = "twiddle:";
+}, Gn = "twiddle:";
 function ne(e) {
   try {
-    return localStorage.getItem(Yn + e);
+    return localStorage.getItem(Gn + e);
   } catch {
     return null;
   }
 }
 function ce(e, t) {
   try {
-    localStorage.setItem(Yn + e, t);
+    localStorage.setItem(Gn + e, t);
   } catch {
   }
 }
-const pe = 44, de = 8, Ba = 4, Xn = { corner: "br", x: 16, y: 16 };
+const pe = 44, de = 8, Ba = 4, Yn = { corner: "br", x: 16, y: 16 };
 function Ua() {
   try {
     const e = JSON.parse(ne("position"));
     if (e && /^[tb][lr]$/.test(e.corner) && isFinite(e.x) && isFinite(e.y)) return e;
   } catch {
   }
-  return { ...Xn };
+  return { ...Yn };
 }
-function mn(e) {
+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 Va({ wrapEl: e, launcherEl: t }) {
   let n = Ua();
   function a() {
-    const d = mn(n), h = 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: h ? `${d.x}px` : "auto",
-      right: h ? "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", h), e.classList.toggle("at-top", u);
+      left: p ? `${d.x}px` : "auto",
+      right: p ? "auto" : `${d.x}px`,
+      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, h = !0) {
-    n = mn(d), a(), h && ce("position", JSON.stringify(n));
+  function o(d, p = !0) {
+    n = bn(d), a(), p && ce("position", JSON.stringify(n));
   }
-  function r(d, h) {
-    const u = d + pe / 2 < innerWidth / 2, w = h + pe / 2 < innerHeight / 2, p = !w && 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: (w ? "t" : "b") + (u ? "l" : "r"),
-      x: u ? d : innerWidth - d - pe,
-      y: w ? h : innerHeight - h - pe - p
+      corner: (v ? "t" : "b") + (f ? "l" : "r"),
+      x: f ? d : innerWidth - d - pe,
+      y: v ? p : innerHeight - p - pe - u
     };
   }
   let s = null, i = !1;
   t.addEventListener("pointerdown", (d) => {
     if (d.button !== 0) return;
-    const h = t.getBoundingClientRect();
-    s = { id: d.pointerId, sx: d.clientX, sy: d.clientY, dx: d.clientX - h.left, dy: d.clientY - h.top, moving: !1 };
+    const p = t.getBoundingClientRect();
+    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 (!(!s || d.pointerId !== s.id)) {
       if (!s.moving) {
@@ -1083,11 +1086,11 @@ function Va({ wrapEl: e, launcherEl: t }) {
     !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 h = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[d.key];
-    if (!h || d.altKey || d.metaKey || d.ctrlKey) return;
+    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, w = n.corner[1] === "l" ? 1 : -1, p = n.corner[0] === "t" ? 1 : -1;
-    o({ corner: n.corner, x: n.x + h[0] * u * w, y: n.y + h[1] * u * p });
+    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() {
@@ -1095,7 +1098,7 @@ function Va({ wrapEl: e, launcherEl: t }) {
       return i = !1, d;
     },
     reset() {
-      o({ ...Xn });
+      o({ ...Yn });
     }
   };
 }
@@ -1109,28 +1112,28 @@ function ge({ label: e, options: t, onSelect: n }) {
   a.append(...o);
   let r = null;
   function s(l) {
-    r = l, o.forEach((h) => h.setAttribute("aria-checked", String(h.dataset.value === l)));
-    const d = Math.max(0, o.findIndex((h) => h.dataset.value === l));
-    o.forEach((h, u) => {
-      h.tabIndex = u === d ? 0 : -1;
+    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, f) => {
+      p.tabIndex = f === d ? 0 : -1;
     });
   }
   function i(l, d) {
-    l !== r && (s(l), n(l)), d && o.find((h) => h.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 h = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let u;
-    if (h) u = (d + h + o.length) % o.length;
-    else if (l.key === "Home") u = 0;
-    else if (l.key === "End") u = o.length - 1;
+    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    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);
+    l.preventDefault(), i(o[f].dataset.value, !0);
   }), s(null), { el: a, setValue: s };
 }
-const Zn = /var\(\s*(--twd-[\w-]+)/g, qa = /::?[\w-]+(\([^)]*\))?/g;
+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* Qe(t.cssRules));
@@ -1146,7 +1149,7 @@ function Ha() {
       continue;
     }
     for (const a of Qe(n)) {
-      const o = [...a.style.cssText.matchAll(Zn)].map((r) => r[1]);
+      const o = [...a.style.cssText.matchAll(Xn)].map((r) => r[1]);
       o.length && e.push({ selectors: a.selectorText.split(","), vars: o });
     }
   }
@@ -1160,33 +1163,33 @@ function _a(e, t) {
     return !1;
   }
 }
-function Jn(e) {
+function Zn(e) {
   const t = /* @__PURE__ */ new Set(), 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(Zn)].forEach((a) => t.add(a[1])), { names: t, selectors: n };
+  }), [...(e.getAttribute("style") || "").matchAll(Xn)].forEach((a) => t.add(a[1])), { names: t, selectors: n };
 }
-const Ot = (e) => window.CSS && CSS.escape ? CSS.escape(e) : 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(`#${Ot(n.id)}`).length === 1)
-      return t.unshift(`#${Ot(n.id)}`), t.join(" > ");
+    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 Wa(e, t = Jn(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], r = a.find((s) => t.some((i) => new RegExp(`\\.${s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
-  return r ? `.${Ot(r)}` : null;
+  return r ? `.${Pt(r)}` : null;
 }
 function Ga(e) {
-  const t = Jn(e), n = Wa(e, t.selectors), a = (e.getAttribute("aria-label") || e.placeholder || e.textContent || "").trim().replace(/\s+/g, " ");
+  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,
@@ -1198,9 +1201,9 @@ function Ga(e) {
     classCount: n ? document.querySelectorAll(n).length : 0
   };
 }
-const Pt = (e) => e.localName + [...e.classList].map((t) => `.${t}`).join(""), Ya = { radius: "px", intensity: "%", base: "px" }, Qn = (e) => e.charAt(0).toUpperCase() + e.slice(1), Xa = (e, t) => typeof t == "number" || /^\d+$/.test(t) ? `${t}${Ya[e] || ""}` : Qn(String(t));
+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 = Gn(() => e.tokens({ [e.id]: t }) || {}), o = Object.keys(a);
+  const a = Wn(() => e.tokens({ [e.id]: t }) || {}), o = Object.keys(a);
   let r = {};
   if (o.length) {
     const s = n.selector ? document.querySelector(n.selector) : void 0;
@@ -1210,7 +1213,7 @@ function xn(e, t, n) {
     ...n,
     sectionId: e.id,
     title: e.title,
-    settings: Object.entries(t).map(([s, i]) => ({ key: s, label: Qn(s), value: Xa(s, i), ...e.describe?.(s, i) || {} })),
+    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] }))
   };
 }
@@ -1229,7 +1232,7 @@ 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 ue = (e) => `\`${e}\``, dt = (e) => e.map((t) => `  - ${ue(t.name)}: ${t.from ? `${ue(t.from)} → ` : ""}${ue(t.to)}`), ct = (e) => `${e.title} › ${e.settings.map((t) => `${t.label}: ${t.value}`).join(", ")}`;
+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 {
@@ -1238,7 +1241,7 @@ function Ja(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 `${ue(Pt(t))}${n ? ` with text “${n}”` : ""}`;
+  return `${ue(Ot(t))}${n ? ` with text “${n}”` : ""}`;
 }
 function vn(e, t) {
   const n = /* @__PURE__ */ new Map();
@@ -1262,14 +1265,14 @@ function Qa(e, { link: t = location.href, warnings: n = [] } = {}) {
     "",
     "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) => s.push(`- **${ct(i)}**`, ...dt(i.tokens)))), o.length && (s.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.",
     ""
   ), vn(o, "selector").forEach(([i, l]) => {
-    s.push(`- ${ue(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((d) => s.push(`  - **${ct(d)}**`, ...dt(d.tokens).map((h) => `  ${h}`)));
+    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);
     s.push(
@@ -1279,7 +1282,7 @@ function Qa(e, { link: t = location.href, warnings: n = [] } = {}) {
       "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.",
       ""
     ), vn(r, "selector").forEach(([l, d]) => {
-      s.push(`- ${Ja(l)}, found at ${ue(l)}`), d.forEach((h) => s.push(`  - **${ct(h)}**`, ...dt(h.tokens).map((u) => `  ${u}`)));
+      s.push(`- ${Ja(l)}, found at ${ue(l)}`), d.forEach((p) => s.push(`  - **${pt(p)}**`, ...ct(p.tokens).map((f) => `  ${f}`)));
     });
   }
   return n.length && s.push(
@@ -1322,19 +1325,19 @@ function yn(e) {
 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);
-}, ea = (e, t) => e.slice(0, 3).map((n, a) => n * e[3] + t[a] * (1 - e[3])).concat(1);
-function ta(e, t) {
-  const n = kn(e[3] < 1 ? ea(e, t) : e), a = kn(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 na = (e) => `${e.toFixed(1)}:1`;
-function pt() {
+const ta = (e) => `${e.toFixed(1)}:1`;
+function ut() {
   const e = [];
   return to.forEach(([t, n, a]) => {
     const o = yn(t), r = yn(n);
     if (!o || !r || r[3] === 0) return;
-    const s = ta(o, r);
-    s < Ye && e.push({ label: a, ratio: s, needed: Ye, text: `${a}: ${na(s)} · AA needs ${Ye}` });
+    const s = ea(o, r);
+    s < Ye && e.push({ label: a, ratio: s, needed: Ye, text: `${a}: ${ta(s)} · AA needs ${Ye}` });
   }), e;
 }
 function no(e) {
@@ -1344,16 +1347,16 @@ function no(e) {
     if (a && a[3] > 0 && (t.push(a), a[3] >= 1))
       break;
   }
-  return t.reduceRight((n, a) => ea(a, n), [255, 255, 255, 1]);
+  return t.reduceRight((n, a) => Qn(a, n), [255, 255, 255, 1]);
 }
 function ao(e) {
   if (!e.textContent.trim() && !e.placeholder) return null;
   const t = getComputedStyle(e), n = It(t.color);
   if (!n) return null;
-  const a = parseFloat(t.fontSize), r = a >= 24 || a >= 18.66 && parseInt(t.fontWeight, 10) >= 700 ? eo : Ye, s = ta(n, no(e));
-  return s < r ? { label: "This element", ratio: s, needed: r, text: `This element’s text: ${na(s)} · AA needs ${r}` } : 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 Sn = "twiddle-panel", oo = "0.9.0", $n = "https://panel.twiddle.in", ro = "--twd-radius-control", so = /var\(\s*--twd-/;
+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();
@@ -1439,107 +1442,106 @@ function D(e) {
 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 = (m, f) => {
-    const v = document.createElement("span");
-    return v.className = `pad-edge ${m}`, v.textContent = f, v.setAttribute("aria-hidden", "true"), v;
+  const s = (b, h) => {
+    const w = document.createElement("span");
+    return w.className = `pad-edge ${b}`, w.textContent = h, w.setAttribute("aria-hidden", "true"), w;
   };
   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 m = 0; m < a; m++)
-    for (let f = 0; f < n; f++) {
-      const v = document.createElement("i");
-      v.className = "pad-dot", v.style.left = `${f / (n - 1) * 100}%`, v.style.top = `${m / (a - 1) * 100}%`, i.append(v);
+  for (let b = 0; b < a; b++)
+    for (let h = 0; h < n; h++) {
+      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), r.append(i);
-  let d = 0.5, h = 0.5;
-  const u = (m, f) => Math.round(Math.min(1, Math.max(0, m)) * (f - 1)) / (f - 1);
-  function w() {
-    l.style.left = `${d * 100}%`, l.style.top = `${h * 100}%`;
+  let d = 0.5, p = 0.5;
+  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 p(m, f, v) {
-    m = v === "x" ? d : u(m, n), f = v === "y" ? h : u(f, a), !(m === d && f === h) && (d = m, h = f, w(), o(d, h));
+  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 g = (m) => {
-    const f = i.getBoundingClientRect();
-    p((m.clientX - f.left) / f.width, (m.clientY - f.top) / f.height);
+  const m = (b) => {
+    const h = i.getBoundingClientRect();
+    u((b.clientX - h.left) / h.width, (b.clientY - h.top) / h.height);
   };
-  r.addEventListener("pointerdown", (m) => {
-    r.setPointerCapture(m.pointerId), r.classList.add("dragging"), g(m);
-  }), r.addEventListener("pointermove", (m) => {
-    r.hasPointerCapture(m.pointerId) && g(m);
+  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 = (m) => {
-    r.hasPointerCapture(m.pointerId) && r.releasePointerCapture(m.pointerId), r.classList.remove("dragging");
+  const x = (b) => {
+    r.hasPointerCapture(b.pointerId) && r.releasePointerCapture(b.pointerId), r.classList.remove("dragging");
   };
-  return r.addEventListener("pointerup", x), r.addEventListener("pointercancel", x), r.addEventListener("keydown", (m) => {
-    const f = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[m.key];
-    f && (m.preventDefault(), f[0] ? p(u(d, n) + f[0] / (n - 1), h, "y") : p(d, u(h, a) + f[1] / (a - 1), "x"));
+  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] ? u(f(d, n) + h[0] / (n - 1), p, "y") : u(d, f(p, a) + h[1] / (a - 1), "x"));
   }), {
     el: r,
     /** Show a position without telling anyone (used to sync). Off-grid values are shown as they are. */
-    setValue(m, f, v) {
-      d = Math.min(1, Math.max(0, m)), h = Math.min(1, Math.max(0, f)), w(), r.setAttribute("aria-label", v ? `${e}: ${v}` : 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 aa({ label: e, min: t, max: n, step: a = 1, format: o = String, onInput: r }) {
+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"), s.append(i, l);
-  const d = (h) => {
-    const u = (Number(i.value) - t) / (n - t) * 100;
-    i.style.setProperty("--fill", `${u}%`), l.textContent = h ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
+  const d = (p) => {
+    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(), r(Number(i.value));
   }), {
     el: s,
     /** Show a value without reporting it (sync after reset / URL load). */
-    setValue(h, u) {
-      i.value = String(h), d(u);
+    setValue(p, f) {
+      i.value = String(p), d(f);
     }
   };
 }
 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((u) => {
-    const w = document.createElement("button");
-    return w.type = "button", w.className = "tile", u.wide && w.classList.add("wide"), w.setAttribute("role", "radio"), w.dataset.value = u.value, u.title && (w.title = u.title), w.innerHTML = `${u.preview ? `<span class="tile-preview" aria-hidden="true">${u.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${u.sub ? '<span class="tile-sub"></span>' : ""}</span>`, w.querySelector(".tile-label").textContent = u.label, u.sub && (w.querySelector(".tile-sub").textContent = u.sub), w.addEventListener("click", () => d(u.value)), w;
+  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;
   });
   r.append(...s);
-  let i = null;
-  function l(u) {
-    i = u, s.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === u)));
-    const w = Math.max(0, s.findIndex((p) => p.dataset.value === u));
-    s.forEach((p, g) => {
-      p.tabIndex = g === w ? 0 : -1;
+  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(u, w) {
-    u !== i && (l(u), o(u)), w && s.find((p) => p.dataset.value === u).focus();
+  function l(p, f) {
+    i(p), o(p), f && s.find((v) => v.dataset.value === p).focus();
   }
-  function h(u = []) {
-    s.forEach((w) => w.classList.toggle("near", u.includes(w.dataset.value)));
+  function d(p = []) {
+    s.forEach((f) => f.classList.toggle("near", p.includes(f.dataset.value)));
   }
-  return r.addEventListener("keydown", (u) => {
-    const w = s.indexOf(u.target.closest(".tile"));
-    if (w < 0) return;
-    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[u.key];
-    let g;
-    if (p) g = (w + p + s.length) % s.length;
-    else if (u.key === "Home") g = 0;
-    else if (u.key === "End") g = s.length - 1;
+  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 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;
-    u.preventDefault(), d(s[g].dataset.value, !0);
-  }), l(null), { el: r, setValue: l, setNear: h };
+    p.preventDefault(), l(s[u].dataset.value, !0);
+  }), i(null), { el: r, setValue: i, setNear: d };
 }
-const O = (e) => getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+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;
@@ -1547,12 +1549,12 @@ function Ce(e, t) {
   return o === "px" ? `${Math.round(a)}px` : `${+a.toFixed(3)}${o}`;
 }
 const fo = 999;
-function oa({ id: e, title: t, hint: n, token: a, uses: o = [], presets: r, max: s, extra: i = [], extraTokens: l = () => ({}), shape: d = "card" }) {
-  const h = (p) => r.find((g) => g.value === p), u = (p) => p >= fo ? "full" : `${p}px`, w = (p) => {
-    if (typeof p.radius == "number" && isFinite(p.radius))
-      return { [a]: `${Math.min(Math.max(p.radius, 0), s)}px` };
-    const g = h(p.corners);
-    return g ? { [a]: `${g.radius}px` } : {};
+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,
@@ -1560,86 +1562,86 @@ function oa({ id: e, title: t, hint: n, token: a, uses: o = [], presets: r, max:
     hint: n,
     presets: r,
     uses: [a, ...o],
-    tokens(p) {
-      const g = p[e] || {};
-      return { ...w(g), ...l(g) };
+    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(p, g, { label: x = "Corners" } = {}) {
-        const m = D(x), f = ge({
+      corners(u, m, { label: x = "Corners" } = {}) {
+        const b = D(x), h = ge({
           label: `${t} corners`,
-          options: r.map(($) => ({ value: $.value, label: $.label, title: u($.radius) })),
-          onSelect: ($) => g.setSection(e, { corners: $, radius: null })
-        }), v = aa({
+          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: s,
-          format: u,
-          onInput: ($) => g.setSection(e, { radius: $, corners: null })
+          format: f,
+          onInput: ($) => m.setSection(e, { radius: $, corners: null })
         });
-        m.append(f.el, v.el), p.append(m.el);
+        b.append(h.el, w.el), u.append(b.el);
         const S = () => {
-          const $ = parseFloat((g.readToken || O)(a)), K = g.getState()[e] || {}, Z = h(K.corners) || r.find((Le) => Le.radius === $);
-          if (f.setValue(Z ? Z.value : null), isNaN($)) {
-            v.setValue(0, "—"), m.setValue("");
+          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;
           }
-          v.setValue(Math.min($, s), u($)), m.setValue(u($));
+          w.setValue(Math.min($, s), f($)), b.setValue(f($));
         };
-        S(), g.onChange(S);
+        S(), m.onChange(S);
       },
-      ...Object.fromEntries(i.map((p) => [p.key, (g, x, { label: m } = {}) => g.append(Me(x, { section: e, ...p, label: m || p.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(p, g, { label: x = "Corners" } = {}) {
-        const m = (f) => `<span class="shape shape-${d}" style="border-radius:${Math.min(f, d === "button" ? 12 : 16)}px"></span>`;
-        p.append(_(g, {
+      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>`;
+        u.append(_(m, {
           section: e,
           key: "corners",
           label: x,
           columns: r.length,
-          options: r.map((f) => ({ value: f.value, label: f.label, title: u(f.radius), preview: m(f.radius) })),
-          current: (f) => {
-            const v = f[e] || {};
-            if (v.radius != null) return null;
-            if (h(v.corners)) return v.corners;
-            if (he(f, a)) return null;
-            const S = parseFloat((g.readToken || O)(a));
+          options: r.map((h) => ({ value: h.value, label: h.label, title: f(h.radius), preview: b(h.radius) })),
+          current: (h) => {
+            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: (f) => g.setSection(e, { corners: f, radius: null }),
-          valueText: (f, v) => {
-            const S = parseFloat((g.readToken || O)(a));
+          select: (h) => m.setSection(e, { corners: h, radius: null }),
+          valueText: (h, w) => {
+            const S = parseFloat((m.readToken || L)(a));
             if (isNaN(S)) return "";
-            const $ = v[e] || {};
-            return u(S) + Cn(v, a, $.radius != null ? "custom" : h($.corners)?.label);
+            const $ = w[e] || {};
+            return f(S) + Cn(w, a, $.radius != null ? "custom" : p($.corners)?.label);
           }
         }));
       },
-      ...Object.fromEntries(i.filter((p) => p.preview).map((p) => [`${p.key}Tiles`, (g, x, { label: m } = {}) => g.append(_(x, {
+      ...Object.fromEntries(i.filter((u) => u.preview).map((u) => [`${u.key}Tiles`, (m, x, { label: b } = {}) => m.append(_(x, {
         section: e,
-        key: p.key,
-        label: m || p.label,
-        fallback: p.fallback,
-        columns: p.columns || p.options.length,
-        options: p.options.map((f) => ({ ...f, preview: p.preview(f.value) })),
-        ...p.token && {
-          current: (f) => (f[e] || {})[p.key] || (he(f, p.token) ? null : p.fallback || null),
-          valueText: (f, v) => {
-            if (!he(v, p.token)) return "";
-            const S = p.options.find(($) => $.value === (v[e] || {})[p.key]);
-            return `${(x.readToken || O)(p.token)}${Cn(v, p.token, S && S.label)}`;
+        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").
-        ...p.current && { current: (f) => p.current(f[e] || {}) },
-        ...p.valueText && { valueText: (f, v) => p.valueText(v[e] || {}) },
-        ...p.select && { select: (f) => x.setSection(e, p.select(f)) }
+        ...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(p, g) {
-      Object.entries(this.parts).filter(([x]) => !x.endsWith("Tiles")).forEach(([, x]) => x(p, g));
+    render(u, m) {
+      Object.entries(this.parts).filter(([x]) => !x.endsWith("Tiles")).forEach(([, x]) => x(u, m));
     }
   };
 }
@@ -1647,44 +1649,44 @@ function Me(e, { section: t, key: n, label: a, options: o, fallback: r, valueTex
   const i = D(a), l = ge({
     label: a,
     options: o,
-    onSelect: (h) => e.setSection(t, { [n]: h })
+    onSelect: (p) => e.setSection(t, { [n]: p })
   });
   i.append(l.el);
   const d = () => {
-    const h = (e.getState()[t] || {})[n] || r;
-    l.setValue(h), i.setValue(s ? s(h) : "");
+    const p = (e.getState()[t] || {})[n] || r;
+    l.setValue(p), i.setValue(s ? s(p) : "");
   };
   return d(), e.onChange(d), i.el;
 }
 function go(e, { section: t, key: n, label: a, min: o, max: r, fallback: s, format: i, note: l, value: d }) {
-  const h = D(a), u = aa({ label: a, min: o, max: r, format: i, onInput: (p) => e.setSection(t, { [n]: p }) });
-  h.append(u.el);
-  const w = () => {
-    const p = e.getState(), g = d ? d(p) : (p[t] || {})[n];
-    u.setValue(typeof g == "number" ? g : s), l && (h.el.querySelector(".field-label").textContent = `${a}${l(p) ? ` · ${l(p)}` : ""}`);
+  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 w(), e.onChange(w), h.el;
-}
-let ra = () => ({});
-const bo = (e) => {
-  ra = e;
-}, he = (e, t) => Object.prototype.hasOwnProperty.call(ra(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: h, near: u }) {
-  const w = D(a), p = ho({
+  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: r,
     className: s,
-    onSelect: (x) => h ? h(x) : e.setSection(t, { [n]: x })
+    onSelect: (x) => p ? p(x) : e.setSection(t, { [n]: x })
   });
-  w.append(p.el);
-  const g = () => {
-    const x = e.getState(), m = d ? d(x) : (x[t] || {})[n] || i || null;
-    p.setValue(m), p.setNear(u ? u(x) : []), w.setValue(l ? l(m, x) : "");
+  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 g(), e.onChange(g), w.el;
+  return m(), e.onChange(m), v.el;
 }
-const Mn = (e, t) => t.map((n) => `${e}${n}`), sa = {
+const Mn = (e, t) => t.map((n) => `${e}${n}`), ra = {
   fonts: { label: "Tokens", tokens: ["font-heading", "font-body"], kind: "text" },
   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" },
@@ -1698,8 +1700,8 @@ const Mn = (e, t) => t.map((n) => `${e}${n}`), sa = {
   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" }
-}, Y = (e) => `--twd-${e}`, ut = (e, t) => Object.prototype.hasOwnProperty.call(e.getState().custom || {}, t), $e = (e, t) => sa[t].tokens.some((n) => (e.custom || {})[n] != null);
-function mo(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" : "") };
 }
@@ -1718,29 +1720,29 @@ function wo(e, t, n, a) {
       <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 ${Y(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 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"), h = o.querySelector(".token-reset");
-  let u = "";
-  const w = () => {
-    let g = r.value;
-    u && /^-?\d*\.?\d+$/.test(g.trim()) && (g = `${g.trim()}${u}`);
-    const x = xo(g, n), m = O(Y(t));
+  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 = r.value;
+    f && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${f}`);
+    const x = xo(m, n), b = L(Y(t));
     if (x === null) {
-      ut(e, t) ? e.setSection("custom", { [t]: null }) : p();
+      ht(e, t) ? e.setSection("custom", { [t]: null }) : u();
       return;
     }
-    if (x === m && !ut(e, t)) return p();
+    if (x === b && !ht(e, t)) return u();
     e.setSection("custom", { [t]: x });
   };
-  r.addEventListener("change", w), r.addEventListener("blur", () => p()), r.addEventListener("keydown", (g) => {
-    g.key === "Enter" && (g.preventDefault(), r.blur()), g.key === "Escape" && (g.stopPropagation(), p(), r.blur());
-  }), h.addEventListener("click", () => e.setSection("custom", { [t]: null }));
-  function p() {
-    const g = O(Y(t)), x = ut(e, t), m = mo(g, n);
-    u = m ? m.unit : "", document.activeElement !== r && o.getRootNode().activeElement !== r && (r.value = m ? String(m.n) : g), r.title = g, s.textContent = u, s.hidden = !u, i && (i.style.width = `${Math.max(2, Math.min(100, (m ? m.n : 0) / a * 100))}%`), l && (l.style.background = g), o.classList.toggle("edited", x), d.hidden = !x, h.hidden = !x;
+  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 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 p(), e.onChange(p), o;
+  return u(), e.onChange(u), o;
 }
 const vo = {
   id: "custom",
@@ -1753,7 +1755,7 @@ const vo = {
   },
   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(sa).map(([e, t]) => [e, (n, a, { label: o = t.label } = {}) => {
+  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];
@@ -1761,24 +1763,24 @@ const vo = {
     const l = document.createElement("div");
     l.className = "token-rows", t.tokens.forEach((d) => l.append(wo(a, d, t.kind, t.bar))), r.append(l), n.append(r.el);
   }]))
-}, X = { compact: 0.75, regular: 1, comfy: 1.25 }, Ft = [0.75, 1.25], Tn = [1, 2, 3, 4, 5, 6, 7, 8].map((e) => `--twd-space-${e}`);
-function ia(e) {
+}, 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 ht = (e) => e[0].toUpperCase() + e.slice(1);
+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 ht(t);
-  const n = ia(e);
-  return n.length ? `Between ${ht(n[0])} and ${ht(n[1])}` : e > 1 ? "Comfy" : "Compact";
+  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(Ft[1], Math.max(Ft[0], e.factor)) : X[e.spacing] || 1;
+  return typeof e.factor == "number" && isFinite(e.factor) ? Math.min(jt[1], Math.max(jt[0], e.factor)) : X[e.spacing] || 1;
 }
-const ft = (e) => `${Math.round(e * 100)}%`, yo = {
+const gt = (e) => `${Math.round(e * 100)}%`, yo = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
@@ -1788,12 +1790,12 @@ const ft = (e) => `${Math.round(e * 100)}%`, yo = {
     if (t === 1) return {};
     const n = {};
     return Tn.forEach((a) => {
-      const o = Ce(O(a), t);
+      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: ft(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" } = {}) {
@@ -1808,8 +1810,8 @@ const ft = (e) => `${Math.round(e * 100)}%`, yo = {
           return Object.keys(X).find((s) => X[s] === r) || null;
         },
         select: (o) => t.setSection("density", { spacing: o, factor: null }),
-        near: (o) => $e(o, "spacing") ? [] : ia(H(o.density)),
-        valueText: (o, r) => $e(r, "spacing") ? "Custom" : o ? "" : `${Dt(H(r.density))} · ${ft(H(r.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" } = {}) {
@@ -1821,7 +1823,7 @@ const ft = (e) => `${Math.round(e * 100)}%`, yo = {
       a.append(o.el);
       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 ? "" : ft(i));
+        o.setValue(l || null), a.setValue($e(t.getState(), "spacing") ? "Custom" : l ? "" : gt(i));
       };
       r(), t.onChange(r), e.append(a.el);
     }
@@ -1841,7 +1843,7 @@ const ft = (e) => `${Math.round(e * 100)}%`, yo = {
   [800, "black", 58],
   [900, "black", 45],
   [950, "black", 30]
-], gt = (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;
 };
@@ -1859,15 +1861,15 @@ function $o({ label: e, onInput: t }) {
   const i = document.createElement("button");
   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 = So.map(([p, g, x]) => {
-    const m = g ? `color-mix(in oklch, var(--brand) ${x}%, ${g})` : "var(--brand)";
-    return `<span title="${p}" style="background:${m}"></span>`;
+  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="${u}" style="background:${b}"></span>`;
   }).join(""), n.append(a, l);
   let d = "#000000";
-  const h = (p) => {
-    d = p, o.value = p.toLowerCase(), r.style.background = p, n.getRootNode().activeElement !== s && (s.value = p), n.style.setProperty("--brand", p);
-  }, u = (p) => {
-    p !== d && (h(p), t(p));
+  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));
   };
   r.addEventListener("click", () => {
     if (o.showPicker)
@@ -1877,25 +1879,25 @@ function $o({ label: e, onInput: t }) {
       } catch {
       }
     o.click();
-  }), o.addEventListener("input", () => u(o.value.toUpperCase())), s.addEventListener("input", () => {
-    const p = gt(s.value);
-    p && u(p);
+  }), o.addEventListener("input", () => f(o.value.toUpperCase())), s.addEventListener("input", () => {
+    const u = mt(s.value);
+    u && f(u);
   });
-  const w = () => {
+  const v = () => {
     s.value = d;
   };
-  return s.addEventListener("blur", w), s.addEventListener("keydown", (p) => {
-    p.key === "Enter" && (w(), s.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: p } = await new window.EyeDropper().open(), g = gt(p);
-        g && u(g);
+        const { sRGBHex: u } = await new window.EyeDropper().open(), m = mt(u);
+        m && f(m);
       } catch {
       }
     else
       r.click();
-  }), { el: n, setValue: (p) => h(gt(p) || d) };
+  }), { el: n, setValue: (u) => p(mt(u) || d) };
 }
 function Eo({ label: e, options: t, onSelect: n }) {
   const a = document.createElement("div");
@@ -1907,25 +1909,25 @@ function Eo({ label: e, options: t, onSelect: n }) {
   a.append(...o);
   let r = null;
   function s(l) {
-    r = l, o.forEach((h) => h.setAttribute("aria-checked", String(h.dataset.value === l)));
-    const d = Math.max(0, o.findIndex((h) => h.dataset.value === l));
-    o.forEach((h, u) => {
-      h.tabIndex = u === d ? 0 : -1;
+    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, f) => {
+      p.tabIndex = f === d ? 0 : -1;
     });
   }
   function i(l, d) {
-    l !== r && (s(l), n(l)), d && o.find((h) => h.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 h = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let u;
-    if (h) u = (d + h + o.length) % o.length;
-    else if (l.key === "Home") u = 0;
-    else if (l.key === "End") u = o.length - 1;
+    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    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);
+    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 = {
@@ -1934,7 +1936,7 @@ const Co = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], ke = (e) => O
   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}`])), mt = {
+}, 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"),
@@ -1970,8 +1972,8 @@ const Co = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], ke = (e) => O
   text: "#F4F4F5",
   "text-muted": "#A1A1AA",
   border: "#2E2E33"
-}, Ao = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, ee = (e) => /^#[0-9a-f]{6}$/i.test(e || ""), xt = (e) => [500, 600, 700].includes(Number(e.shade)) ? Number(e.shade) : 600, wt = (e) => e[0].toUpperCase() + e.slice(1);
-function On(e) {
+}, 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";
 }
@@ -1981,20 +1983,20 @@ const Je = {
   hint: "Brand colour · neutral tint · mode",
   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 = mt[t.primary];
+    const t = e.colour || {}, n = {}, a = t.mode === "dark", o = xt[t.primary];
     if (!ee(t.brand) && o) {
-      const i = xt(t);
-      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = On(o[i]), n["--twd-focus"] = o[500];
+      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];
     }
-    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"] = On(t.brand), n["--twd-focus"] = t.brand);
-    const r = t.tint === "subtle" ? ee(t.brand) ? t.brand : O("--twd-primary") || Ln : t.tint === "warm" ? Mo : null, s = bt[t.neutral];
+    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 || r) && An.forEach((i) => {
-      const l = a ? Lo[i] : O(`--twd-${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;
@@ -2003,7 +2005,7 @@ const Je = {
     // ---- Tabbed layout (Colour tab): themes, then Tailwind fine-tuning ----
     themeTiles(e, t, { label: n = "Theme" } = {}) {
       const a = (o) => {
-        const r = bt[o.neutral], s = mt[o.primary];
+        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(_(t, {
@@ -2034,7 +2036,7 @@ const Je = {
         label: `${n} colour family`,
         columns: 9,
         className: "tiles-swatches",
-        options: Object.entries(mt).map(([i, l]) => ({ value: i, label: wt(i), title: wt(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 ee(l.brand) ? null : l.primary || null;
@@ -2046,7 +2048,7 @@ const Je = {
       a.append(o, r.el);
       const s = () => {
         const i = t.getState().colour || {};
-        r.setValue(String(xt(i))), a.setValue(ee(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${xt(i)}` : "");
+        r.setValue(String(wt(i))), a.setValue(ee(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${wt(i)}` : "");
       };
       s(), t.onChange(s), e.append(a.el);
     },
@@ -2057,7 +2059,7 @@ const Je = {
         label: n,
         columns: 5,
         className: "tiles-greys",
-        options: Object.entries(bt).map(([a, o]) => ({ value: a, label: wt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((r) => `<i style="background:${r}"></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 || ""
       }));
@@ -2071,7 +2073,7 @@ const Je = {
     brand(e, t, { label: n = "Brand" } = {}) {
       const a = D(n), o = $o({ label: "Brand colour", onInput: (s) => t.setSection("colour", { brand: s }) });
       a.append(o.el);
-      const r = () => o.setValue((t.getState().colour || {}).brand || (t.readToken || O)("--twd-primary") || Ln);
+      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" } = {}) {
@@ -2093,12 +2095,12 @@ const Je = {
   render(e, t) {
     ["brand", "neutral", "mode"].forEach((n) => this.parts[n](e, t));
   }
-}, Ve = (e, t = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${e}%, ${t})`, Oo = {
+}, 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: 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") }
-}, Po = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, la = oa({
+}, 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",
@@ -2118,13 +2120,13 @@ const Je = {
     { value: "pill", label: "Pill", radius: 999 }
   ],
   extraTokens(e) {
-    const t = {}, n = Oo[e.style];
+    const t = {}, n = Po[e.style];
     n && Object.entries(n).forEach(([s, i]) => {
       t[`--twd-button-${s}`] = i;
     });
-    const a = Po[e.size];
+    const a = Oo[e.size];
     if (!a) return t;
-    const o = Ce(O("--twd-control-height"), a.height), r = Ce(O("--twd-control-pad-x"), a.pad);
+    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: [
@@ -2140,25 +2142,21 @@ const Je = {
       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" }]
     }
   ]
-}), vt = {
+}), 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" }
-}, Pn = {
-  // proposal
-  none: "transparent",
-  surface: "var(--twd-surface)",
-  raised: "var(--twd-surface-raised)",
-  tinted: "color-mix(in oklch, var(--twd-primary) 8%, var(--twd-surface))"
-}, Fo = { outlined: "Outlined", elevated: "Elevated", tinted: "Tinted" }, jt = oa({
+}, Ft = aa({
   id: "cards",
   title: "Cards",
-  hint: "Style · corners · fill · border",
+  hint: "Style · corners · border",
   token: "--twd-radius-container",
   shape: "card",
   // tile previews: an outlined card
@@ -2175,11 +2173,11 @@ const Je = {
     // proposal (cards don't go fully pill)
   ],
   extraTokens(e) {
-    const t = {}, n = vt[e.style];
+    const t = {}, n = jo[e.style];
     if (n && Object.entries(n).forEach(([a, o]) => {
       t[`--twd-card-${a}`] = o;
-    }), Pn[e.fill] && (t["--twd-card-bg"] = Pn[e.fill]), e.border === "none" && (t["--twd-border-width-container"] = "0px"), e.border === "thick") {
-      const a = Ce(O("--twd-border-width-container"), 2);
+    }), e.border === "none" && (t["--twd-border-width-container"] = "0px"), e.border === "thick") {
+      const a = Ce(L("--twd-border-width-container"), 2);
       a && (t["--twd-border-width-container"] = a);
     }
     return t;
@@ -2190,19 +2188,9 @@ const Je = {
       label: "Style",
       fallback: "filled",
       columns: 4,
-      preview: (e) => `<span class="shape shape-card style-${e}"></span>`,
-      options: [{ value: "filled", label: "Filled" }, { value: "outlined", label: "Outlined" }, { value: "elevated", label: "Elevated" }, { value: "tinted", label: "Tinted" }],
-      select: (e) => ({ style: e, fill: null })
-    },
-    // a style is a whole recipe, its fill included
-    {
-      key: "fill",
-      label: "Fill",
-      columns: 4,
-      preview: (e) => `<span class="shape shape-card fill-${e}"></span>`,
-      options: [{ value: "none", label: "None" }, { value: "surface", label: "Surface" }, { value: "raised", label: "Raised" }, { value: "tinted", label: "Tinted" }],
-      current: (e) => e.fill || (vt[e.style] ? null : "surface"),
-      valueText: (e) => !e.fill && vt[e.style] ? `${Fo[e.style]} · from Style` : ""
+      // 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",
@@ -2214,7 +2202,7 @@ const Je = {
       options: [{ value: "none", label: "None" }, { value: "thin", label: "Thin" }, { value: "thick", label: "Thick" }]
     }
   ]
-}), qe = (e) => !(e.depth || {}).style && he(e, "--twd-shadow-md"), jo = (e) => ((e.character || {}).bold || 0.5) > 0.5, G = 60, yt = {
+}), 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] },
@@ -2253,7 +2241,7 @@ const Je = {
         columns: 4,
         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) ? `${jo(r) ? "Bold recipe" : "Soft, faded"} · from Character` : ""
+        valueText: (o, r) => qe(r) ? `${Fo(r) ? "Bold recipe" : "Soft, faded"} · from Character` : ""
       }));
     },
     style(e, t, { label: n = "Style" } = {}) {
@@ -2287,11 +2275,11 @@ const Je = {
   render(e, t) {
     Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, No = (e) => Math.min(1, Math.max(0, e)), Fn = (e) => Math.round(e / 50) * 50, kt = (e) => `${+e.toFixed(1)}%`;
+}, 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 _e = (e, t, n) => (e.tokens(t) || {})[n] || O(n), da = {
+const _e = (e, t, n) => (e.tokens(t) || {})[n] || L(n), la = {
   id: "character",
   title: "Character",
   hint: "Subtle ↔ Bold",
@@ -2301,17 +2289,17 @@ const _e = (e, t, n) => (e.tokens(t) || {})[n] || O(n), da = {
     const t = Bt(e.character);
     if (t === null) return {};
     const n = {}, a = 2 * t - 1, o = Math.max(0, a), r = Math.max(0, -a);
-    n["--twd-weight-heading"] = String(Fn(600 + 200 * a)), n["--twd-weight-strong"] = String(Fn(600 + 100 * 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 h = d === "--twd-border-width-container" ? _e(jt, e, d) : O(d), u = parseFloat(h);
-        u > 0 && (n[d] = `${Math.round(u * (1 + o))}px`);
-      }), [[la, "--twd-radius-control"], [jt, "--twd-radius-container"]].forEach(([d, h]) => {
-        const u = parseFloat(_e(d, e, h));
-        u > 0 && u < 999 && (n[h] = Ce(`${u}px`, 1 - 0.5 * o));
+        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 || {};
@@ -2323,7 +2311,7 @@ const _e = (e, t, n) => (e.tokens(t) || {})[n] || O(n), da = {
   },
   describe: (e, t) => e === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(t * 100)}%` } : null
 };
-bo((e) => da.tokens(e));
+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 }) {
@@ -2337,56 +2325,56 @@ function Do({ label: e, options: t, onSelect: n, placeholder: a, onOpen: o }) {
     <span class="font-chevron">${Ro}</span>`;
   const l = document.createElement("div");
   l.className = "font-menu", l.id = r, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", e), l.hidden = !0;
-  const d = t.map((f) => {
-    const v = document.createElement("div");
-    return v.className = "font-option", v.setAttribute("role", "option"), v.tabIndex = -1, v.dataset.value = f.value, v.innerHTML = `
-      <span class="font-aa" style="font-family:${f.preview}" aria-hidden="true">Aa</span>
-      <span class="font-text"><span class="font-name">${f.name}</span><span class="font-fonts">${f.fonts}</span></span>
-      <span class="font-check">${zo}</span>`, v.addEventListener("click", () => m(f.value)), v;
+  const d = t.map((h) => {
+    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">${zo}</span>`, w.addEventListener("click", () => b(h.value)), w;
   });
   l.append(...d), s.append(i, l);
-  let h = null;
-  function u(f) {
-    const v = t.find(($) => $.value === f), S = v || a || t[0];
-    h = v ? v.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 === h)));
+  let p = null;
+  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 w() {
-    const f = i.getBoundingClientRect(), v = l.offsetHeight, $ = window.innerHeight - f.bottom - 8 >= v ? f.bottom + 4 : Math.max(8, f.top - 4 - v);
-    l.style.top = `${$}px`, l.style.left = `${f.left}px`, l.style.width = `${f.width}px`;
+  function v() {
+    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 p() {
-    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), w(), (d.find((f) => f.dataset.value === h) || d[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", g), s.closest(".body")?.addEventListener("scroll", g, { 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 g(f) {
-    l.hidden || (l.hidden = !0, i.setAttribute("aria-expanded", "false"), document.removeEventListener("pointerdown", x, !0), window.removeEventListener("resize", g), f === !0 && i.focus());
+  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(f) {
-    f.composedPath().includes(s) || g();
+  function x(h) {
+    h.composedPath().includes(s) || m();
   }
-  function m(f) {
-    f !== h && (u(f), n(f)), g(!0);
+  function b(h) {
+    h !== p && (f(h), n(h)), m(!0);
   }
-  return i.addEventListener("click", () => l.hidden ? p() : g(!0)), i.addEventListener("keydown", (f) => {
-    (f.key === "ArrowDown" || f.key === "ArrowUp") && (f.preventDefault(), p());
-  }), l.addEventListener("keydown", (f) => {
-    const v = d.indexOf(f.target);
+  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 w = d.indexOf(h.target);
     let S = null;
-    if (f.key === "ArrowDown") S = Math.min(d.length - 1, v + 1);
-    else if (f.key === "ArrowUp") S = Math.max(0, v - 1);
-    else if (f.key === "Home") S = 0;
-    else if (f.key === "End") S = d.length - 1;
-    else if (f.key === "Enter" || f.key === " ") {
-      f.preventDefault(), m(f.target.dataset.value);
+    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;
-    } else if (f.key === "Escape") {
-      f.preventDefault(), f.stopPropagation(), g(!0);
+    } else if (h.key === "Escape") {
+      h.preventDefault(), h.stopPropagation(), m(!0);
       return;
-    } else if (f.key === "Tab") {
-      g();
+    } else if (h.key === "Tab") {
+      m();
       return;
     }
-    S !== null && (f.preventDefault(), d[S].focus());
-  }), u(a ? null : t[0].value), { el: s, setValue: u };
+    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"] },
@@ -2397,11 +2385,11 @@ const z = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-ser
   { 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 }, Nn = /* @__PURE__ */ new Set();
+], 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) => !Nn.has(a));
+  const t = e.filter((a) => !Fn.has(a));
   if (!t.length) return;
-  t.forEach((a) => Nn.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);
 }
@@ -2468,7 +2456,7 @@ const Bo = {
     // 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 = O("--twd-weight-heading"), i = O("--twd-weight-strong");
+        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);
@@ -2498,17 +2486,17 @@ const Bo = {
   render(e, t) {
     Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, [Rn, We] = Ft;
+}, [Nn, We] = jt;
 function Uo(e) {
   return e > 0.56 ? "Bold" : e < 0.44 ? "Subtle" : "Balanced";
 }
 function Vo(e) {
   return $e(e, "spacing") ? "Custom spacing" : Dt(H(e.density));
 }
-const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), zn = [
+const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), Rn = [
   ["colour", "Colour", (e) => {
     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: O("--twd-primary") };
+    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 || {};
@@ -2520,17 +2508,17 @@ const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), zn = [
 ], qo = {
   summary(e, t, { label: n = "Current look", goTab: a } = {}) {
     const o = D(n), r = document.createElement("div");
-    r.className = "summary", zn.forEach(([i, l]) => {
+    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)), r.append(d);
+      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();
-      zn.forEach(([l, , d]) => {
-        const h = r.querySelector(`[data-summary="${l}"]`), u = d(i);
-        h.querySelector(".summary-value").textContent = u.text;
-        const w = h.querySelector(".summary-swatch");
-        w.hidden = !u.swatch, u.swatch && (w.style.background = u.swatch);
+      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 = !f.swatch, f.swatch && (v.style.background = f.swatch);
       });
     };
     s(), t.onChange(s), e.append(o.el);
@@ -2540,7 +2528,7 @@ const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), zn = [
       label: n,
       ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
       onInput: (s, i) => {
-        const l = +(We - i * (We - Rn)).toFixed(3), d = +s.toFixed(3);
+        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 }
@@ -2549,8 +2537,8 @@ const Ge = (e) => e && e[0].toUpperCase() + e.slice(1), zn = [
     });
     a.append(o.el);
     const r = () => {
-      const s = t.getState(), i = H(s.density), l = Bt(s.character), d = l === null ? 0.5 : l, h = `${Vo(s)} · ${Uo(d)}`;
-      o.setValue(d, (We - i) / (We - Rn), h), a.setValue(h);
+      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);
     };
     r(), t.onChange(r), e.append(a.el);
   }
@@ -2572,43 +2560,43 @@ function Ko(e, t, n) {
     <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 r = o.querySelector("select"), s = o.querySelector(".role-fixed"), i = s.querySelector("input"), l = o.querySelector(".token-reset"), d = () => (e.getState().custom || {})[t.key], h = () => {
+  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: O(a) };
-    const m = _o.exec(x);
-    return m ? { step: +m[1] } : { fixed: x };
-  }, u = (x) => e.setSection("custom", { [t.key]: x }), w = (x) => t.step ? x === `var(--twd-space-${t.step})` : !1;
+    if (x == null) return t.step ? { step: t.step } : { fixed: L(a) };
+    const b = _o.exec(x);
+    return b ? { step: +b[1] } : { fixed: x };
+  }, 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 m = Et(O(a));
-      u(m != null ? `${m}px` : O(a)), i.focus(), i.select();
+      const b = Et(L(a));
+      f(b != null ? `${b}px` : L(a)), i.focus(), i.select();
       return;
     }
     const x = `var(--twd-space-${r.value})`;
-    u(w(x) ? null : x);
+    f(v(x) ? null : x);
   });
-  const p = () => {
+  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", p), i.addEventListener("blur", () => g()), i.addEventListener("keydown", (x) => {
-    x.key === "Enter" && (x.preventDefault(), i.blur()), x.key === "Escape" && (x.stopPropagation(), g(), i.blur());
-  }), l.addEventListener("click", () => u(null));
-  function g() {
-    const x = h();
-    if (r.innerHTML = Ho.map((f) => `<option value="${f}">space-${f} · ${Et(O(`--twd-space-${f}`)) ?? "?"}</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 f = Et(x.fixed);
-      i.value = f != null ? String(f) : x.fixed;
+  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", () => f(null));
+  function m() {
+    const x = p();
+    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 m = d() != null;
-    o.classList.toggle("edited", m), l.hidden = !m;
+    const b = d() != null;
+    o.classList.toggle("edited", b), l.hidden = !b;
   }
-  return g(), e.onChange(g), o;
+  return m(), e.onChange(m), o;
 }
 const Wo = {
   spacing(e, t, { label: n = "Roles" } = {}) {
@@ -2646,17 +2634,21 @@ const Wo = {
     { 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", "fillTiles", { label: "Fill" }],
-    // Ravi, 2026-10-16
-    ["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: [
@@ -2664,7 +2656,7 @@ const Wo = {
     ["depth", "intensity"],
     { more: "Shadow tokens", parts: [["custom", "shadows"]] }
   ] }
-], j = (e) => String(e).replace(/[&<>"]/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[t]);
+], 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);
@@ -2675,13 +2667,13 @@ function Go({ sections: e, store: t, view: n }) {
     <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">${A.close}</button></div>
+        <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>
         <nav class="tabbar" aria-label="Areas">
-          ${te.map((c) => `<button class="tab" data-tab="${c.id}" title="${c.title}" aria-pressed="false">${A[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">${A.minimise}</button>
+          ${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>
@@ -2690,19 +2682,19 @@ function Go({ sections: e, store: t, view: n }) {
         <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="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">${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="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<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">${A.down}</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>
@@ -2710,13 +2702,13 @@ function Go({ sections: e, store: t, view: n }) {
           </div>
         </div>
       </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">
@@ -2726,142 +2718,142 @@ function Go({ sections: e, store: t, view: n }) {
       </div>
     </div>
   `;
-  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"]') }, h = r(".pick-box"), u = r(".pick-tag"), w = { getState: t.getState, setSection: t.setSection, setSections: t.setSections, onChange: t.onChange }, p = Object.fromEntries(e.map((c) => [c.id, c]));
-  function g(c, b, y = w) {
-    const M = y !== w;
-    b.forEach((k) => {
+  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 (k === "warnings") {
-        if (M) return;
-        const F = document.createElement("div");
-        F.className = "warnings page-warnings", c.append(F);
+        if (C) return;
+        const j = document.createElement("div");
+        j.className = "warnings page-warnings", c.append(j);
         return;
       }
       if (k.heading) {
-        const F = document.createElement("div");
-        F.className = "page-heading", F.innerHTML = `<span></span>${k.note ? '<span class="muted"></span>' : ""}`, F.firstChild.textContent = k.heading, k.note && (F.lastChild.textContent = k.note), c.append(F);
+        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 (k.more) {
-        const F = document.createElement("details");
-        F.className = "more", F.innerHTML = `<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`, F.querySelector("summary span:last-child").textContent = k.more, g(F.querySelector(".more-body"), k.parts, y), c.append(F);
+        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 (k.tabs) {
-        const F = k.tabs.map((W) => {
+        const j = k.tabs.map((W) => {
           const q = document.createElement("div");
-          return q.className = "tab-pane", g(q, W.parts, y), q;
-        }), lt = ge({
+          return q.className = "tab-pane", m(q, W.parts, y), q;
+        }), dt = ge({
           label: "View",
           options: k.tabs.map((W, q) => ({ value: String(q), label: W.label })),
           onSelect: (W) => {
-            lt.setValue(W), F.forEach((q, va) => {
+            dt.setValue(W), j.forEach((q, va) => {
               q.hidden = String(va) !== W;
             });
           }
         });
-        lt.setValue("0"), F.forEach((W, q) => {
+        dt.setValue("0"), j.forEach((W, q) => {
           W.hidden = q !== 0;
-        }), c.append(lt.el, ...F);
+        }), c.append(dt.el, ...j);
         return;
       }
-      const [T, U, P = {}] = k, ye = T === "simple" ? qo[U] : T === "roles" ? Wo[U] : p[T]?.parts?.[U];
-      ye && ye(c, y, { ...P, buttons: p.buttons, cards: p.cards, goTab: (F) => {
-        Ae(Ut()), v(F);
+      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);
       } });
     });
   }
-  te.forEach((c) => g(d.global.querySelector(`[data-page="${c.id}"]`), c.parts));
+  te.forEach((c) => m(d.global.querySelector(`[data-page="${c.id}"]`), c.parts));
   const x = [...o.querySelectorAll(".tab")];
-  let m = te.some((c) => c.id === ne("tab")) ? ne("tab") : te[0].id;
-  function f() {
-    x.forEach((c) => c.setAttribute("aria-pressed", String(c.dataset.tab === m)));
+  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 v(c) {
-    m = c, ce("tab", c), [d.global, d.local].forEach((b) => {
-      b.querySelectorAll(".page").forEach((y) => {
+  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;
-      }), b.scrollTop = 0;
-    }), f();
+      }), g.scrollTop = 0;
+    }), h();
   }
-  const S = (c) => c.map((b) => `<div class="warning">${A.warn}<span>${j(b.text)}</span></div>`).join(""), $ = r(".side");
+  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 = () => C ? "local" : "global";
+  const Ut = () => E ? "local" : "global";
   function Ae(c) {
-    Le = c, Object.entries(d).forEach(([b, y]) => {
-      y.hidden = b !== c;
-    }), f();
+    Le = c, Object.entries(d).forEach(([g, y]) => {
+      y.hidden = g !== c;
+    }), h();
   }
-  v(m);
-  const et = "cubic-bezier(0.3, 0.7, 0.2, 1)", tt = "cubic-bezier(0.2, 0.8, 0.2, 1)", Oe = 640, be = 100, nt = 50, ca = () => i.querySelector(".mark-knob"), pa = () => [i.querySelector(".mark-t1"), i.querySelector(".mark-t2")];
+  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 b = ca(), [y, M] = pa(), k = (T) => `translateY(${T}px)`;
+    const g = da(), [y, C] = ca(), k = (T) => `translateY(${T}px)`;
     if (c) {
-      b.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Oe, easing: et });
+      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 }];
-      M.animate(T, { duration: be * 2, delay: Oe * 0.12, easing: et, fill: "backwards" }), y.animate(T, { duration: be * 2, delay: Oe * 0.32 + nt, easing: et, fill: "backwards" });
+      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 T = [{ opacity: 1 }, { opacity: 0 }];
-      y.animate(T, { duration: be, easing: tt }), M.animate(T, { duration: be, delay: nt / 2, easing: tt, fill: "backwards" }), b.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Oe * 0.7, delay: be + nt / 2, easing: tt, fill: "backwards" });
+      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 Pe = r(".wrap"), qt = Va({ wrapEl: Pe, launcherEl: i });
+  const Oe = r(".wrap"), qt = Va({ wrapEl: Oe, launcherEl: i });
   let at = !1;
-  function me(c) {
-    at = c, s.classList.toggle("minimised", c), c && Z(!1), Pe.classList.toggle("is-min", c);
-    const b = r('[data-action="minimise"]');
-    b.title = c ? "Expand the panel" : "Minimise to the tabs", b.setAttribute("aria-label", b.title), s.hidden || ce("panel", c ? "tabs" : "open");
+  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 J({ animate: c = !0 } = {}) {
-    s.hidden && c && Vt(!0), s.hidden = !1, Pe.classList.add("is-open"), i.setAttribute("aria-expanded", "true"), i.setAttribute("aria-label", "Close Panel"), me(!1);
+    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 ua() {
-    s.hidden && J(), me(!0);
+  function pa() {
+    s.hidden && J(), be(!0);
   }
   function ot() {
-    s.hidden || Vt(!1), s.hidden = !0, Pe.classList.remove("is-open", "is-min"), Z(!1), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-label", "Open Panel"), ce("panel", "closed"), Re();
+    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 Fe() {
+  function je() {
     s.hidden ? J() : ot();
   }
   let Ht;
   function V(c) {
     l.textContent = c, l.classList.add("show"), clearTimeout(Ht), Ht = setTimeout(() => l.classList.remove("show"), 1600);
   }
-  function xe(c, b) {
-    navigator.clipboard.writeText(c).then(() => V(b)).catch(() => V("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 rt = null;
-  function se(c, b) {
+  function se(c, g) {
     if (rt = c, !c) {
-      h.hidden = !0;
+      p.hidden = !0;
       return;
     }
     const y = c.getBoundingClientRect();
-    Object.assign(h.style, { top: `${y.top}px`, left: `${y.left}px`, width: `${y.width}px`, height: `${y.height}px` }), u.textContent = b || Pt(c), h.hidden = !1;
+    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 _t = () => {
-    rt && !h.hidden && se(rt, u.textContent);
+    rt && !p.hidden && se(rt, f.textContent);
   };
   window.addEventListener("scroll", _t, !0), window.addEventListener("resize", _t);
   let ie = !1;
-  const je = r('[data-action="pick"]'), Kt = (c) => c.composedPath().includes(a);
+  const Fe = r('[data-action="pick"]'), Kt = (c) => c.composedPath().includes(a);
   function Wt(c) {
     if (Kt(c)) return;
-    const b = c.target;
-    b && b.nodeType === 1 && b !== document.documentElement && b !== document.body && se(b);
+    const g = c.target;
+    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && se(g);
   }
   function Gt(c) {
     if (Kt(c) || (c.preventDefault(), c.stopPropagation(), c.type !== "click")) return;
-    const b = c.target;
-    !b || b === document.documentElement || b === document.body || (Re(), Jt(b));
+    const g = c.target;
+    !g || g === document.documentElement || g === document.body || (Re(), Jt(g));
   }
   function Yt(c) {
-    c.key === "Escape" && (c.preventDefault(), Re(), C && se(C.el), Ne());
+    c.key === "Escape" && (c.preventDefault(), Re(), E && se(E.el), Ne());
   }
   const Xt = ["pointerdown", "mousedown", "mouseup", "click"];
   function Zt() {
@@ -2870,87 +2862,87 @@ function Go({ sections: e, store: t, view: n }) {
         const c = document.createElement("style");
         c.id = "twiddle-picking", c.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(c);
       }
-      J(), je.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");
+      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 Ne() {
-    const c = ie || !!C;
-    je.setAttribute("aria-pressed", String(c));
-    const b = c ? "Leave selection mode" : "Pick an element to tweak on its own";
-    je.title = b, je.setAttribute("aria-label", c ? "Leave selection mode" : "Pick an element");
+    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(C ? C.el : null));
+    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 C = null;
-  function ha(c, b) {
+  let E = null;
+  function ua(c, g) {
     const y = [];
     return {
       ctx: {
         getState: () => (t.getState().scopes || {})[c] || {},
-        setSection: (M, k) => t.setScope(c, M, k),
-        setSections: (M, k) => t.setScopeSections(c, M, k),
-        onChange: (M) => {
-          const k = t.onChange(M);
+        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: (M) => getComputedStyle(b).getPropertyValue(M).trim()
+        readToken: (C) => getComputedStyle(g).getPropertyValue(C).trim()
       },
-      dispose: () => y.forEach((M) => M())
+      dispose: () => y.forEach((C) => C())
     };
   }
-  function Jt(c, b) {
-    const y = Ga(c), M = t.getState().scopes || {};
-    b || (b = !M[y.elementSelector] && y.classSelector && M[y.classSelector] ? "class" : "element"), C && C.dispose(), C = { el: c, info: y, target: b, dispose: () => {
-    } }, st(), Ae("local"), J(), se(c), Ne();
+  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 = () => C.target === "class" ? C.info.classSelector : C.info.elementSelector;
+  const Qt = () => E.target === "class" ? E.info.classSelector : E.info.elementSelector;
   function st() {
-    C.dispose();
-    const { info: c } = C, b = d.local;
-    if (b.innerHTML = `
+    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="Leave selection mode" aria-label="Leave selection mode">${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>${j(Pt(c.el))}</code>
-            ${c.text ? `<span class="muted">“${j(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>
-      ${te.map((P) => `<div class="page page-fields" data-page="${P.id}"${P.id === m ? "" : " hidden"}></div>`).join("")}
+      ${te.map((O) => `<div class="page page-fields" data-page="${O.id}"${O.id === b ? "" : " hidden"}></div>`).join("")}
     `, c.classSelector) {
-      const P = ge({
+      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: (ye) => {
-          ye === "class" && t.moveScope(c.elementSelector, c.classSelector), C.target = ye, st();
+          ye === "class" && t.moveScope(c.elementSelector, c.classSelector), E.target = ye, st();
         }
       });
-      P.setValue(C.target), b.querySelector(".scope-target").append(P.el);
+      O.setValue(E.target), g.querySelector(".scope-target").append(O.el);
     }
-    const { ctx: y, dispose: M } = ha(Qt(), c.el);
-    te.forEach((P) => g(b.querySelector(`[data-page="${P.id}"]`), P.parts, y));
-    const k = b.querySelector(".warnings"), T = () => {
-      const P = c.tokens.size ? ao(c.el) : null;
-      k.innerHTML = P ? S([P]) : "";
+    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]) : "";
     };
     T();
     const U = t.onChange(T);
-    C.dispose = () => {
-      M(), U();
+    E.dispose = () => {
+      C(), U();
     };
   }
   function en() {
-    if (!C || !C.info.classSelector) return;
-    const c = t.getState().scopes || {}, b = C.target === "class" ? "element" : "class", y = b === "class" ? C.info.classSelector : C.info.elementSelector;
-    !c[Qt()] && c[y] && (C.target = b, st());
+    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 tn = () => {
     t.undo(), en();
@@ -2958,51 +2950,51 @@ function Go({ sections: e, store: t, view: n }) {
     t.redo(), en();
   };
   function an() {
-    C && (C.dispose(), C = null, d.local.innerHTML = "", se(null), Ne(), Le === "local" && Ae("global"));
+    E && (E.dispose(), E = null, d.local.innerHTML = "", se(null), Ne(), Le === "local" && Ae("global"));
   }
   const on = (c) => c.kind === "global" ? "Whole page" : c.kind === "class" ? `All ${c.selector}` : "One element";
   function rn() {
-    const c = wn(t.getState(), e), b = pt(), y = d.changes;
+    const c = wn(t.getState(), e), g = ut(), y = d.changes;
     if (!c.length) {
-      y.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${S(b)}`;
+      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 M = /* @__PURE__ */ new Map();
+    const C = /* @__PURE__ */ new Map();
     c.forEach((k) => {
       const T = k.selector || "";
-      M.has(T) || M.set(T, []), M.get(T).push(k);
-    }), y.innerHTML = (b.length ? `<div class="warnings">${S(b)}</div>` : "") + [...M].map(([k, T]) => `
+      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="${j(k)}" title="Select it on the page">${j(on(T[0]))}</button><code>${j(k)}</code>` : `<span>${on(T[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>
         ${T.map((U) => `
           <div class="change-row">
             <div class="change-main">
-              <div class="change-title">${j(U.title)} <span class="muted">›</span> ${U.settings.map((P) => `${j(P.label)}: <b>${j(P.value)}</b>`).join(", ")}</div>
-              ${U.tokens.map((P) => `<div class="change-token"><code>${j(P.name)}</code> ${P.from ? `${j(P.from)} → ` : ""}${j(P.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="${j(U.sectionId)}" data-remove-scope="${j(k)}" aria-label="Remove ${j(U.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 fa(c, b) {
-    if (b) return t.removeScope(b, c);
+  function ha(c, g) {
+    if (g) return t.removeScope(g, c);
     const y = t.getState()[c] || {};
-    t.setSection(c, Object.fromEntries(Object.keys(y).map((M) => [M, null])));
+    t.setSection(c, Object.fromEntries(Object.keys(y).map((C) => [C, null])));
   }
   const we = r(".apply-menu"), sn = r('[data-action="apply-menu"]'), ln = () => ne("apply-mode") === "copy" ? "copy" : "preview";
-  function ga() {
+  function fa() {
     we.querySelectorAll("[data-apply-mode]").forEach((c) => c.setAttribute("aria-checked", String(c.dataset.applyMode === ln())));
   }
   function ze(c) {
-    we.hidden = !c, sn.setAttribute("aria-expanded", String(c)), c && ga();
+    we.hidden = !c, sn.setAttribute("aria-expanded", String(c)), c && fa();
   }
   function dn() {
-    return Qa(wn(t.getState(), e), { warnings: pt() });
+    return Qa(wn(t.getState(), e), { warnings: ut() });
   }
   const Ie = r(".dialog-backdrop"), cn = r(".prompt-text");
-  function ba() {
+  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");
@@ -3025,7 +3017,7 @@ function Go({ sections: e, store: t, view: n }) {
     clearTimeout(pn), ve && (De(!1), ve = !1);
   };
   le.addEventListener("pointerup", un), le.addEventListener("pointerleave", un);
-  const Be = r(".setup-hint"), hn = `setup-hint-dismissed:${location.pathname}`, xa = {
+  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:",
@@ -3044,60 +3036,72 @@ function Go({ sections: e, store: t, view: n }) {
   let B = null;
   function Ue() {
     const c = lo();
-    B = ne(hn) === c ? null : xa[c] || null, i.toggleAttribute("data-hint", !!B), Be.hidden = !B, B && (Be.innerHTML = `
-      <div class="setup-head">${A.warn}<b>${j(B.title)}</b>
-        <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${A.close}</button>
+    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>${j(B.text)}</p>
-      ${(B.snippets || []).map((b, y) => `
+      <p>${F(B.text)}</p>
+      ${(B.snippets || []).map((g, y) => `
         <div class="setup-snippet">
-          <span>${j(b.label)}</span>
-          <div class="setup-code"><code>${j(b.code)}</code><button class="text-btn" data-setup-snippet="${y}">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">
-        ${B.copy ? `<button class="apply-btn" data-action="setup-copy">${j(B.copy)}</button>` : ""}
+        ${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);
+      });
+    });
+  }
+  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 = 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 b = S(pt());
+    const g = S(ut());
     d.global.querySelectorAll(".page-warnings").forEach((y) => {
-      y.innerHTML = b;
+      y.innerHTML = g;
     }), K && rn();
   }
   return t.onChange(fn), fn(), o.addEventListener("click", (c) => {
     if (c.target === Ie) return it();
-    const b = c.target.closest("button");
-    if (b) {
-      if (b !== sn && !we.contains(b) && ze(!1), b === i)
-        return qt.consumeClick() ? void 0 : c.detail === 2 ? (Fe(), qt.reset(), V("Panel moved back to the corner")) : Fe();
-      if (b.dataset.select) {
-        const y = document.querySelector(b.dataset.select);
+    const g = c.target.closest("button");
+    if (g) {
+      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 y = document.querySelector(g.dataset.select);
         return y ? Jt(y) : V("That element isn’t on this page");
       }
-      if (b.dataset.setupSnippet) return xe(En[b.dataset.setupSnippet].code, "Copied");
-      if (b.dataset.tab)
-        return Ae(Ut()), at && me(!1), v(b.dataset.tab);
-      if (b.dataset.remove) return fa(b.dataset.remove, b.dataset.removeScope);
-      if (b.dataset.applyMode)
-        return ce("apply-mode", b.dataset.applyMode), ze(!1), V(b.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
-      switch (b.dataset.action) {
+      if (g.dataset.setupSnippet) return xe(En[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.tab)
+        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 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 ot();
         case "minimise":
-          return at ? me(!1) : (ua(), (o.querySelector('.tab[aria-pressed="true"]') || x[0]).focus());
+          return at ? be(!1) : (pa(), (o.querySelector('.tab[aria-pressed="true"]') || x[0]).focus());
         case "reset":
           return t.resetState(), V("Reset to defaults · ⌘Z to undo");
         case "copy":
           return xe(location.href, "Link copied");
         // Pressed again (picking, or an element selected): out of selection mode.
         case "pick":
-          return ie || C ? (Re(), an()) : Zt();
+          return ie || E ? (Re(), an()) : Zt();
         case "compare":
           ve || De(le.getAttribute("aria-pressed") !== "true");
           return;
@@ -3112,7 +3116,7 @@ function Go({ sections: e, store: t, view: n }) {
         case "changes-close":
           return Z(!1);
         case "apply":
-          return ba();
+          return ga();
         case "apply-menu":
           return ze(we.hidden);
         case "dialog-close":
@@ -3132,28 +3136,28 @@ function Go({ sections: e, store: t, view: n }) {
     }
     !(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(), Fe()), c.code === "KeyC" && (c.preventDefault(), De(le.getAttribute("aria-pressed") !== "true")));
-  }), ne("panel") === "open" ? J({ animate: !1 }) : ne("panel") === "tabs" && (J({ animate: !1 }), me(!0)), { open: J, close: ot, toggle: Fe, toast: V, pick: Zt, prompt: dn };
+    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 In = [Bo, Je, la, jt, yo, Nt, da, vo];
+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 = Hn, document.head.prepend(t);
+  t.id = "twiddle-tokens", t.textContent = qn, document.head.prepend(t);
 }
 if (!window.Twiddle) {
-  Yo(), In.forEach((n) => Fa(n.tokens)), qn(At);
+  Yo(), zn.forEach((n) => ja(n.tokens)), Vn(At);
   let e;
   const t = () => {
-    At(Mt()), e = Go({ sections: In, store: Aa, view: { suspend: za, resume: Ia } });
+    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: () => Bn(),
-    undo: () => Un(),
-    redo: () => Vn(),
+    reset: () => Dn(),
+    undo: () => Bn(),
+    redo: () => Un(),
     pick: () => e && e.pick(),
     prompt: () => e ? e.prompt() : "",
     getState: Mt