twiddle-panel 0.6.1 → 0.7.0

package/dist/twiddle.mjs

@@ -1,6 +1,6 @@
-const qe = /* @__PURE__ */ new Set();
-let $ = En(), _ = [], ie = [], ke = null, Mt = 0;
-function En() {
+const pt = /* @__PURE__ */ new Set();
+let T = Xn(), X = [], ve = [], Ie = null, Xt = 0;
+function Xn() {
   const t = new URLSearchParams(location.search).get("twd");
   if (!t) return {};
   try {
@@ -9,140 +9,140 @@ function En() {
     return {};
   }
 }
-function $n() {
+function Jn() {
   const t = new URL(location.href);
-  Object.keys($).length ? t.searchParams.set("twd", JSON.stringify($)) : t.searchParams.delete("twd"), history.replaceState(history.state, "", t);
+  Object.keys(T).length ? t.searchParams.set("twd", JSON.stringify(T)) : t.searchParams.delete("twd"), history.replaceState(history.state, "", t);
 }
-function Qe() {
-  $n(), qe.forEach((t) => t($));
+function yt() {
+  Jn(), pt.forEach((t) => t(T));
 }
-function J(t, e) {
-  if (JSON.stringify(t) === JSON.stringify($)) return;
+function se(t, e) {
+  if (JSON.stringify(t) === JSON.stringify(T)) return;
   const n = Date.now();
-  e && e === ke && n - Mt < 400 || (_.push($), _.length > 100 && _.shift()), ie = [], ke = e, Mt = n, $ = t, Qe();
+  e && e === Ie && n - Xt < 400 || (X.push(T), X.length > 100 && X.shift()), ve = [], Ie = e, Xt = n, T = t, yt();
 }
-function Ee(t, e) {
+function Be(t, e) {
   const n = { ...t, ...e };
-  return Object.keys(n).forEach((o) => {
-    n[o] == null && delete n[o];
+  return Object.keys(n).forEach((a) => {
+    n[a] == null && delete n[a];
   }), Object.keys(n).length ? n : null;
 }
-function D(t, e, n) {
-  const o = { ...t };
-  return n == null ? delete o[e] : o[e] = n, o;
+function U(t, e, n) {
+  const a = { ...t };
+  return n == null ? delete a[e] : a[e] = n, a;
 }
-function He() {
-  return JSON.parse(JSON.stringify($));
+function ut() {
+  return JSON.parse(JSON.stringify(T));
 }
-function Cn(t, e) {
-  J(D($, t, Ee($[t], e)), `${t}:${Object.keys(e)}`);
+function Qn(t, e) {
+  se(U(T, t, Be(T[t], e)), `${t}:${Object.keys(e)}`);
 }
-function Mn(t, e = `multi:${Object.keys(t)}`) {
-  const n = Object.entries(t).reduce((o, [a, s]) => D(o, a, Ee(o[a], s)), $);
-  J(n, e);
+function ea(t, e = `multi:${Object.keys(t)}`) {
+  const n = Object.entries(t).reduce((a, [o, r]) => U(a, o, Be(a[o], r)), T);
+  se(n, e);
 }
-function Yt(t, e, n) {
-  const o = D($.scopes?.[t], e, Ee($.scopes?.[t]?.[e], n)), a = D($.scopes, t, Object.keys(o).length ? o : null);
-  J(D($, "scopes", Object.keys(a).length ? a : null), `${t}|${e}:${Object.keys(n)}`);
+function vn(t, e, n) {
+  const a = U(T.scopes?.[t], e, Be(T.scopes?.[t]?.[e], n)), o = U(T.scopes, t, Object.keys(a).length ? a : null);
+  se(U(T, "scopes", Object.keys(o).length ? o : null), `${t}|${e}:${Object.keys(n)}`);
 }
-function An(t, e) {
-  if (e) return Yt(t, e, Object.fromEntries(
-    Object.keys($.scopes?.[t]?.[e] || {}).map((o) => [o, null])
+function ta(t, e) {
+  if (e) return vn(t, e, Object.fromEntries(
+    Object.keys(T.scopes?.[t]?.[e] || {}).map((a) => [a, null])
   ));
-  const n = D($.scopes, t, null);
-  J(D($, "scopes", Object.keys(n).length ? n : null));
+  const n = U(T.scopes, t, null);
+  se(U(T, "scopes", Object.keys(n).length ? n : null));
 }
-function Tn(t, e) {
-  const n = $.scopes?.[t];
+function na(t, e) {
+  const n = T.scopes?.[t];
   if (!n || t === e) return;
-  let o = { ...$.scopes[e] };
-  Object.entries(n).forEach(([s, r]) => {
-    o = D(o, s, Ee(o[s], r));
+  let a = { ...T.scopes[e] };
+  Object.entries(n).forEach(([r, s]) => {
+    a = U(a, r, Be(a[r], s));
   });
-  const a = D(D($.scopes, t, null), e, o);
-  J(D($, "scopes", a));
+  const o = U(U(T.scopes, t, null), e, a);
+  se(U(T, "scopes", o));
 }
-function Xt() {
-  J({});
+function yn() {
+  se({});
 }
-function Jt() {
-  _.length && (ie.push($), $ = _.pop(), ke = null, Qe());
+function kn() {
+  X.length && (ve.push(T), T = X.pop(), Ie = null, yt());
 }
-function Zt() {
-  ie.length && (_.push($), $ = ie.pop(), ke = null, Qe());
+function Sn() {
+  ve.length && (X.push(T), T = ve.pop(), Ie = null, yt());
 }
-const Ln = () => _.length > 0, Pn = () => ie.length > 0;
-function Qt(t) {
-  return qe.add(t), () => qe.delete(t);
+const aa = () => X.length > 0, oa = () => ve.length > 0;
+function $n(t) {
+  return pt.add(t), () => pt.delete(t);
 }
-const Fn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ra = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  canRedo: Pn,
-  canUndo: Ln,
-  getState: He,
-  moveScope: Tn,
-  onChange: Qt,
-  redo: Zt,
-  removeScope: An,
-  resetState: Xt,
-  setScope: Yt,
-  setSection: Cn,
-  setSections: Mn,
-  undo: Jt
-}, Symbol.toStringTag, { value: "Module" })), en = [];
-let _e = [], et = {}, R = null, Y = !1, tn = {};
-function On(t) {
-  typeof t == "function" && en.push(t);
-}
-const At = (t) => Object.assign({}, ...en.map((e) => e(t) || {})), Ge = (t) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t), Rn = (t) => {
+  canRedo: oa,
+  canUndo: aa,
+  getState: ut,
+  moveScope: na,
+  onChange: $n,
+  redo: Sn,
+  removeScope: ta,
+  resetState: yn,
+  setScope: vn,
+  setSection: Qn,
+  setSections: ea,
+  undo: kn
+}, Symbol.toStringTag, { value: "Module" })), En = [];
+let ht = [], kt = {}, R = null, oe = !1, Cn = {};
+function sa(t) {
+  typeof t == "function" && En.push(t);
+}
+const Jt = (t) => Object.assign({}, ...En.map((e) => e(t) || {})), ft = (t) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t), ia = (t) => {
   try {
     return document.querySelector(t), !0;
   } catch {
     return !1;
   }
 };
-function Nn() {
+function la() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function nn() {
+function Tn() {
   const t = document.documentElement;
-  _e.forEach((e) => t.style.removeProperty(e)), _e = [], et = {};
+  ht.forEach((e) => t.style.removeProperty(e)), ht = [], kt = {};
 }
-function Ke(t) {
-  if (tn = t, Y) return;
+function gt(t) {
+  if (Cn = t, oe) return;
   const e = document.documentElement;
-  nn();
-  const n = At(t), o = Object.entries(t.scopes || {}).filter(([s]) => Rn(s)).sort(([s], [r]) => Ge(r) - Ge(s)).map(([s, r]) => [s, At(r)]);
-  Object.entries(n).forEach(([s, r]) => e.style.setProperty(s, r)), _e = Object.keys(n), et = n;
-  const a = o.filter(([, s]) => Object.keys(s).length).map(([s, r]) => `${s} {
-${Object.entries(r).map(([d, l]) => `  ${d}: ${l} !important;`).join(`
+  Tn();
+  const n = Jt(t), a = Object.entries(t.scopes || {}).filter(([r]) => ia(r)).sort(([r], [s]) => ft(s) - ft(r)).map(([r, s]) => [r, Jt(s)]);
+  Object.entries(n).forEach(([r, s]) => e.style.setProperty(r, s)), ht = Object.keys(n), kt = n;
+  const o = a.filter(([, r]) => Object.keys(r).length).map(([r, s]) => `${r} {
+${Object.entries(s).map(([i, l]) => `  ${i}: ${l} !important;`).join(`
 `)}
 }`).join(`
 `);
-  (a || R) && (Nn().textContent = a);
+  (o || R) && (la().textContent = o);
 }
-function on(t) {
-  const e = document.documentElement, n = Y, o = { ...et };
-  Object.keys(o).forEach((a) => e.style.removeProperty(a)), R && (R.disabled = !0);
+function Mn(t) {
+  const e = document.documentElement, n = oe, a = { ...kt };
+  Object.keys(a).forEach((o) => e.style.removeProperty(o)), R && (R.disabled = !0);
   try {
     return t();
   } finally {
-    n || (Object.entries(o).forEach(([a, s]) => e.style.setProperty(a, s)), R && (R.disabled = !1));
+    n || (Object.entries(a).forEach(([o, r]) => e.style.setProperty(o, r)), R && (R.disabled = !1));
   }
 }
-function jn(t, e = document.documentElement) {
-  return on(() => {
+function da(t, e = document.documentElement) {
+  return Mn(() => {
     const n = getComputedStyle(e);
-    return Object.fromEntries(t.map((o) => [o, n.getPropertyValue(o).trim()]));
+    return Object.fromEntries(t.map((a) => [a, n.getPropertyValue(a).trim()]));
   });
 }
-function zn() {
-  Y || (nn(), R && (R.disabled = !0), Y = !0);
+function ca() {
+  oe || (Tn(), R && (R.disabled = !0), oe = !0);
 }
-function In() {
-  Y && (Y = !1, R && (R.disabled = !1), Ke(tn));
+function pa() {
+  oe && (oe = !1, R && (R.disabled = !1), gt(Cn));
 }
-const Dn = `
+const ua = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -168,44 +168,55 @@ const Dn = `
     align-items: flex-end;
     gap: 10px;
   }
-  @media (prefers-color-scheme: dark) {
-    .wrap {
-      --p-bg: #1c1c1f;
-      --p-fg: #f4f4f5;
-      --p-muted: #a1a1aa;
-      --p-line: #2e2e33;
-      --p-hover: #27272a;
-      --p-track: #27272a;
-      --p-selected: #3f3f46;
-      --p-accent: #f4f4f5;
-      --p-on-accent: #18181b;
-      --p-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
-    }
+  /* Dark is the panel's default look (Ravi, 2026-10-15): these override the
+     light values above, whatever the page or system setting. */
+  .wrap {
+    --p-bg: #1c1c1f;
+    --p-fg: #f4f4f5;
+    --p-muted: #a1a1aa;
+    --p-line: #2e2e33;
+    --p-hover: #27272a;
+    --p-track: #27272a;
+    --p-selected: #3f3f46;
+    --p-accent: #f4f4f5;
+    --p-on-accent: #18181b;
+    --p-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
   }
 
   /* Launcher */
+  /* Launcher = the Panel product mark (Twiddle brand): ink disc, indigo knob,
+     solid-tint trail. Closed = knob at "off" (bottom), no trail; open = "on".
+     The Toggle animation (panel.js) moves between them; these are the rest states. */
   .launcher {
     width: 44px; height: 44px;
-    border-radius: 50%;
-    border: 1px solid var(--p-line);
-    background: var(--p-bg);
-    color: var(--p-fg);
+    border-radius: 50%; border: 0;
+    background: transparent;
     box-shadow: var(--p-shadow);
     display: grid; place-items: center;
     cursor: pointer;
     padding: 0;
   }
-  .launcher svg { transition: transform .15s ease; }
-  .launcher:hover svg { transform: rotate(-20deg); }
-  .launcher[aria-expanded="true"] { background: var(--p-accent); color: var(--p-on-accent); border-color: var(--p-accent); }
+  .mark { display: block; overflow: visible; }
+  .mark-disc { fill: #16161a; }
+  .mark-knob { fill: #4f46e5; }
+  .mark-t1 { fill: #443cbc; }
+  .mark-t2 { fill: #3b359e; }
+  .mark circle { transform-box: fill-box; transform-origin: center; }
+  .launcher[aria-expanded="false"] .mark-knob { transform: translateY(32px); }
+  .launcher[aria-expanded="false"] .mark-t1, .launcher[aria-expanded="false"] .mark-t2 { opacity: 0; }
+  .launcher:hover .mark-knob { fill: #6366f1; }
   .launcher:focus-visible, button:focus-visible, summary:focus-visible {
     outline: 2px solid var(--p-accent); outline-offset: 2px;
   }
 
   /* Panel */
   .panel {
-    width: 300px;
-    max-height: min(640px, calc(100vh - 90px));
+    width: 360px; /* tabbed layout (Figma 254:323); was 300 */
+    max-width: calc(100vw - 32px);
+    /* As tall as its content; scrolls only when the window is shorter.
+       90px = 16 margin + 44 launcher + 10 gap + 20 room at the top. */
+    max-height: calc(100vh - 90px);
+    max-height: calc(100dvh - 90px);
     background: var(--p-bg);
     border: 1px solid var(--p-line);
     border-radius: 14px;
@@ -217,8 +228,7 @@ const Dn = `
 
   .head {
     display: flex; align-items: center; gap: 4px;
-    padding: 10px 10px 10px 14px;
-    border-bottom: 1px solid var(--p-line);
+    padding: 10px 10px 6px 14px; /* the actions row below carries the divider */
   }
   .brand { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; flex: 1; }
   .icon-btn {
@@ -415,16 +425,17 @@ const Dn = `
   .swatch-label { font-size: 12px; color: var(--p-muted); }
   .swatch[aria-checked="true"] .swatch-label { color: var(--p-fg); }
 
-  .foot {
-    border-top: 1px solid var(--p-line);
-    padding: 8px 10px;
+  /* Second header row: the global actions that used to be the footer */
+  .actions {
+    border-bottom: 1px solid var(--p-line);
+    padding: 2px 10px 10px;
     display: flex; align-items: center; gap: 2px;
     color: var(--p-muted); font-size: 12px;
   }
   .spacer { flex: 1; }
   .icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
-  .foot .icon-btn, .foot .apply { flex: none; } /* Undo / Redo / Copy prompt keep their size; Changes gives way if space runs out */
-  .foot .text-btn { min-width: 0; overflow: hidden; }
+  .actions .icon-btn, .actions .apply { flex: none; } /* Undo / Redo / Copy prompt keep their size; Changes gives way if space runs out */
+  .actions .text-btn { min-width: 0; overflow: hidden; }
   .icon-btn[aria-pressed="true"] { background: var(--p-accent); color: var(--p-on-accent); }
   kbd {
     font: 11px ui-monospace, "SF Mono", Menlo, monospace;
@@ -480,7 +491,7 @@ const Dn = `
     background: var(--p-accent); color: var(--p-on-accent); cursor: pointer;
   }
   .menu {
-    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 2;
+    position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; /* opens downwards from the header */
     min-width: 180px; padding: 4px; display: grid; gap: 2px;
     background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 8px;
     box-shadow: var(--p-shadow);
@@ -550,7 +561,7 @@ const Dn = `
     font-size: 12px; line-height: 1.4;
   }
   .warning svg { flex: none; width: 16px; height: 16px; margin-top: 0.5px; }
-  @media (prefers-color-scheme: dark) { .warning { color: #fbbf24; } }
+  .warning { color: #fbbf24; } /* amber text that reads on the dark panel */
 
   /* Changes list */
   .change-group { padding: 10px 14px; border-bottom: 1px solid var(--p-line); display: grid; gap: 6px; }
@@ -578,11 +589,9 @@ const Dn = `
     --p-accent: #18181b; --p-on-accent: #ffffff;
     --p-shadow: 0 12px 40px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
   }
-  @media (prefers-color-scheme: dark) {
-    .dialog-backdrop {
-      --p-bg: #1c1c1f; --p-fg: #f4f4f5; --p-muted: #a1a1aa; --p-line: #2e2e33; --p-hover: #27272a;
-      --p-accent: #f4f4f5; --p-on-accent: #18181b;
-    }
+  .dialog-backdrop { /* dark by default, like the panel */
+    --p-bg: #1c1c1f; --p-fg: #f4f4f5; --p-muted: #a1a1aa; --p-line: #2e2e33; --p-hover: #27272a;
+    --p-accent: #f4f4f5; --p-on-accent: #18181b;
   }
   .dialog-backdrop[hidden] { display: none; }
   .dialog {
@@ -644,35 +653,13 @@ const Dn = `
     width: 10px; height: 10px; border-radius: 50%;
     background: #d97706; box-shadow: 0 0 0 2px var(--p-bg);
   }
-  @media (prefers-color-scheme: dark) { .setup-head svg { color: #fbbf24; } }
+  .setup-head svg { color: #fbbf24; }
 
   /* ---------- Layout direction A (Figma 80:245 › A1b, A2) ---------- */
-  .head[hidden], .page[hidden], .edit-row[hidden] { display: none; }
-  .subhead { padding-left: 8px; }
+  .page[hidden] { display: none; }
   .page-fields { padding: 14px 14px 16px; display: grid; gap: 14px; color: var(--p-muted); }
   .page-warnings:empty { display: none; }
 
-  /* Edit list rows look like the Figma Section row (6:134) */
-  .nav-row {
-    width: 100%; display: flex; align-items: center; gap: 8px;
-    padding: 11px 14px; border: 0; border-bottom: 1px solid var(--p-line);
-    background: transparent; color: var(--p-fg);
-    font: inherit; font-weight: 500; text-align: left; cursor: pointer;
-  }
-  .nav-row:last-child { border-bottom: 0; }
-  .nav-row:hover { background: var(--p-hover); }
-  .nav-row .chev { margin-left: auto; color: var(--p-muted); display: grid; }
-
-  /* "Edit every token" row above the footer (Figma: Edit row (proposal)) */
-  .edit-row {
-    display: flex; align-items: center; gap: 8px;
-    padding: 11px 14px; border: 0; border-top: 1px solid var(--p-line);
-    background: transparent; color: var(--p-fg);
-    font: inherit; font-weight: 500; text-align: left; cursor: pointer;
-  }
-  .edit-row:hover { background: var(--p-hover); }
-  .edit-row .chev { margin-left: auto; color: var(--p-muted); display: grid; }
-
   /* Character pad (Figma: Character pad (proposal)): 170px tall, 9 × 5 dots */
   .pad {
     position: relative; height: 170px; border-radius: 10px;
@@ -760,73 +747,208 @@ const Dn = `
   .role-row.edited .step-select select, .step-select select:focus-visible { border-color: var(--p-accent); outline: none; }
   .step-chevron { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: grid; color: var(--p-muted); pointer-events: none; }
   .role-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--p-muted); }
-`, z = (t, e, n) => `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, M = {
-  dial: z(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  link: z(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: z(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
-  close: z(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
-  chevron: z(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
+
+  /* ---------- Tabbed layout (Figma: Panel — tabbed layout (proposal), 254:323) ---------- */
+  .tabbar {
+    display: flex; gap: 2px; padding: 6px;
+    border-top: 1px solid var(--p-line);
+  }
+  .tab {
+    flex: 1 1 0; min-width: 0;
+    display: grid; justify-items: center; gap: 3px;
+    padding: 7px 2px 6px; border: 0; border-radius: 8px;
+    background: transparent; color: var(--p-muted);
+    font: inherit; font-size: 11px; cursor: pointer;
+  }
+  .tab:hover { background: var(--p-hover); color: var(--p-fg); }
+  .tab[aria-pressed="true"] { background: var(--p-hover); color: var(--p-fg); font-weight: 600; }
+  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .page-fields { gap: 16px; }
+  .page-heading { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--p-fg); margin-bottom: -6px; }
+  .page-heading .muted { font-size: 12px; font-weight: 400; }
+
+  /* Tiles (Figma: Tile (proposal)) */
+  .tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
+  .tile {
+    display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0;
+    padding: 8px; border: 1px solid var(--p-line); border-radius: 10px;
+    background: var(--p-bg); color: var(--p-muted);
+    font: inherit; font-size: 11px; text-align: center; cursor: pointer;
+  }
+  .tile:hover { border-color: var(--p-muted); }
+  .tile[aria-checked="true"] { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); color: var(--p-fg); font-weight: 600; }
+  .tile:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
+  .tile.wide { grid-column: 1 / -1; }
+  .tile-text { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
+  .tile-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tile-sub { font-size: 11px; font-weight: 400; color: var(--p-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tile-preview { display: grid; place-items: center; }
+
+  /* Font tiles: left-aligned, big "Aa" in the pairing's heading font */
+  .tiles-fonts .tile { justify-items: start; text-align: left; padding: 10px 12px; gap: 2px; }
+  .tiles-fonts .tile-label { font-size: 13px; font-weight: 500; color: var(--p-fg); }
+  .tiles-fonts .tile[aria-checked="true"] .tile-label { font-weight: 600; }
+  .tile-aa { font-size: 26px; line-height: 32px; font-weight: 600; color: var(--p-fg); }
+  .tiles-fonts .tile.wide { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
+  .tiles-fonts .tile.wide .tile-aa { font-size: 18px; line-height: 24px; }
+  .tiles-fonts .tile.wide .tile-text { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
+  .tiles-fonts .tile.wide { justify-items: stretch; }
+
+  /* Previews drawn in CSS */
+  .ladder { display: flex; align-items: baseline; gap: 3px; height: 32px; color: var(--p-fg); }
+  .ladder b { font-weight: 600; line-height: 1; }
+  .sketch { display: grid; align-content: start; width: 84px; height: 56px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-hover); }
+  .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; }
+  .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-button.style-ghost { background: transparent; }
+  .shape-card[class*="style-"] { border-radius: 6px; }
+  .shape-card.style-filled { background: var(--p-hover); border-color: var(--p-line); }
+  .shape-card.style-outlined { background: transparent; border-color: var(--p-muted); }
+  .shape-card.style-elevated { background: color-mix(in oklch, var(--p-hover) 88%, white); border-color: transparent; box-shadow: 0 5px 12px rgb(0 0 0 / 0.55); }
+  .shape-card.style-tinted { background: rgb(79 70 229 / 0.2); border-color: rgb(129 140 248 / 0.5); }
+  .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); }
+
+  /* Colour tab */
+  .tiles-themes .tile { justify-items: stretch; }
+  .tiles-themes .tile-preview { display: block; width: 100%; place-items: normal; } /* stretch the palette (block centring is supported now) */
+  .theme { width: 100%; }
+  .theme { display: block; height: 58px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); position: relative; }
+  .theme i { position: absolute; left: 10px; right: 30px; top: 9px; bottom: 9px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
+  .theme b, .theme s, .theme u { position: absolute; left: 7px; height: 4px; border-radius: 2px; text-decoration: none; }
+  .theme b { top: 7px; width: 40%; background: var(--ink); }
+  .theme s { top: 15px; width: 60%; height: 3px; background: var(--soft); }
+  .theme u { top: 24px; width: 26px; height: 9px; border-radius: 3px; background: var(--pri); }
+  .palette { display: flex; gap: 2px; margin-top: 6px; }
+  .palette i { flex: 1; height: 10px; border-radius: 2px; }
+  .tiles-swatches { gap: 6px; }
+  .tiles-swatches .tile { padding: 0; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; align-content: center; gap: 0; justify-self: center; } /* dot centred in its ring */
+  .tiles-swatches .tile .tile-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .tiles-swatches .tile[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--p-accent); }
+  .tiles-swatches .dot { width: 22px; height: 22px; border-radius: 50%; display: block; }
+  .tiles-greys .tile { padding: 6px 4px; font-size: 10px; }
+  .greys { display: flex; border-radius: 4px; overflow: hidden; }
+  .greys i { width: 10px; height: 18px; }
+  .rainbow { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); flex: none; }
+
+  /* Fold-out rows ("Colour tokens"…, "Custom colour…") */
+  .more { border: 1px solid var(--p-line); border-radius: 8px; }
+  .more summary { display: flex; align-items: center; gap: 6px; padding: 9px 10px; font-weight: 500; font-size: 12px; color: var(--p-fg); cursor: pointer; border-radius: 8px; }
+  .more summary::-webkit-details-marker { display: none; }
+  .more summary:hover { background: var(--p-hover); }
+  .more summary .chev { display: grid; color: var(--p-muted); transition: transform .15s ease; }
+  .more[open] summary .chev { transform: rotate(90deg); }
+  .more summary .muted { margin-left: auto; font-weight: 400; }
+  .more summary > span:nth-child(2) { flex: 1; }
+  .more-body { display: grid; gap: 14px; padding: 4px 10px 12px; }
+
+  /* Overview: "Current look" rows */
+  .summary { border: 1px solid var(--p-line); border-radius: 10px; overflow: hidden; }
+  .summary-row {
+    width: 100%; display: flex; align-items: center; gap: 8px;
+    padding: 9px 10px 9px 12px; border: 0; border-bottom: 1px solid var(--p-line);
+    background: transparent; color: var(--p-fg); font: inherit; text-align: left; cursor: pointer;
+  }
+  .summary-row:last-child { border-bottom: 0; }
+  .summary-row:hover { background: var(--p-hover); }
+  .summary-name { flex: 1; font-weight: 500; }
+  .summary-value { font-size: 12px; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
+  .summary-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
+  .summary-swatch[hidden] { display: none; }
+  .summary-row .chev { display: grid; color: var(--p-muted); }
+`, P = (t, e, n) => `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
+  dial: P(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  link: P(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
+  reset: P(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
+  close: P(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
+  chevron: P(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
   // Proposals: not yet in the Figma Icon/* set.
-  pick: z(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
-  compare: z(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: z(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
-  redo: z(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
-  back: z(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
-  down: z(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
-  warn: z(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
-  sliders: z(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
+  pick: P(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
+  compare: P(15, 2, '<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),
+  undo: P(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
+  redo: P(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
+  back: P(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
+  down: P(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
+  copy: P(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
+  warn: P(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
+  // Launcher: the Panel product mark (Twiddle brand; Figma Logo page › Panel mark; also site/favicon.svg).
+  // A switch knocked out of a disc; knob + two-dot trail. Classes let the Toggle animation move them.
+  panelMark: '<svg class="mark" width="44" height="44" viewBox="0 0 120 120" aria-hidden="true"><path class="mark-disc" fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120ZM86 76C86 90.3594 74.3594 102 60 102C45.6406 102 34 90.3594 34 76V44C34 29.6406 45.6406 18 60 18C74.3594 18 86 29.6406 86 44V76ZM60 22C72.1503 22 82 31.8497 82 44V76C82 88.1503 72.1503 98 60 98C47.8497 98 38 88.1503 38 76V44C38 31.8497 47.8497 22 60 22Z"/><circle class="mark-t2" cx="60" cy="80.46" r="4.28"/><circle class="mark-t1" cx="60" cy="66.04" r="7.14"/><circle class="mark-knob" cx="60" cy="44" r="11.9"/></svg>',
+  // Tab bar (Figma: Panel — tabbed layout (proposal), Icon/Tab * components)
+  tabOverview: P(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  tabColour: P(18, 2, '<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),
+  tabType: P(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
+  tabSpacing: P(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
+  tabShape: P(18, 2, '<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),
+  tabShadows: P(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
+  sliders: P(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
   // Figma: Icon/Sliders (proposal)
-}, an = "twiddle:";
-function Fe(t) {
+}, An = "twiddle:";
+function fe(t) {
   try {
-    return localStorage.getItem(an + t);
+    return localStorage.getItem(An + t);
   } catch {
     return null;
   }
 }
-function be(t, e) {
+function ge(t, e) {
   try {
-    localStorage.setItem(an + t, e);
+    localStorage.setItem(An + t, e);
   } catch {
   }
 }
-function X({ label: t, options: e, onSelect: n }) {
-  const o = document.createElement("div");
-  o.className = "seg", o.setAttribute("role", "radiogroup"), o.setAttribute("aria-label", t);
-  const a = e.map((l) => {
-    const c = document.createElement("button");
-    return c.type = "button", c.setAttribute("role", "radio"), c.dataset.value = l.value, c.textContent = l.label, l.title && (c.title = l.title), c.addEventListener("click", () => d(l.value)), c;
+function re({ label: t, options: e, onSelect: n }) {
+  const a = document.createElement("div");
+  a.className = "seg", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", t);
+  const o = e.map((l) => {
+    const p = document.createElement("button");
+    return p.type = "button", p.setAttribute("role", "radio"), p.dataset.value = l.value, p.textContent = l.label, l.title && (p.title = l.title), p.addEventListener("click", () => i(l.value)), p;
   });
-  o.append(...a);
-  let s = null;
-  function r(l) {
-    s = l, a.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
-    const c = Math.max(0, a.findIndex((p) => p.dataset.value === l));
-    a.forEach((p, m) => {
-      p.tabIndex = m === c ? 0 : -1;
+  a.append(...o);
+  let r = null;
+  function s(l) {
+    r = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
+    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
+    o.forEach((c, h) => {
+      c.tabIndex = h === p ? 0 : -1;
     });
   }
-  function d(l, c) {
-    l !== s && (r(l), n(l)), c && a.find((p) => p.dataset.value === l).focus();
-  }
-  return o.addEventListener("keydown", (l) => {
-    const c = a.indexOf(l.target);
-    if (c < 0) return;
-    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let m;
-    if (p) m = (c + p + a.length) % a.length;
-    else if (l.key === "Home") m = 0;
-    else if (l.key === "End") m = a.length - 1;
+  function i(l, p) {
+    l !== r && (s(l), n(l)), p && o.find((c) => c.dataset.value === l).focus();
+  }
+  return a.addEventListener("keydown", (l) => {
+    const p = o.indexOf(l.target);
+    if (p < 0) return;
+    const c = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    let h;
+    if (c) h = (p + c + o.length) % o.length;
+    else if (l.key === "Home") h = 0;
+    else if (l.key === "End") h = o.length - 1;
     else return;
-    l.preventDefault(), d(a[m].dataset.value, !0);
-  }), r(null), { el: o, setValue: r };
+    l.preventDefault(), i(o[h].dataset.value, !0);
+  }), s(null), { el: a, setValue: s };
 }
-const rn = /var\(\s*(--twd-[\w-]+)/g, Bn = /::?[\w-]+(\([^)]*\))?/g;
-function* $e(t) {
+const Ln = /var\(\s*(--twd-[\w-]+)/g, ha = /::?[\w-]+(\([^)]*\))?/g;
+function* Ue(t) {
   for (const e of t)
-    e.selectorText != null && (yield e), e.cssRules && (yield* $e(e.cssRules));
+    e.selectorText != null && (yield e), e.cssRules && (yield* Ue(e.cssRules));
 }
-function Un() {
+function fa() {
   const t = [];
   for (const e of document.styleSheets) {
     if (e.ownerNode?.id === "twiddle-scoped") continue;
@@ -836,92 +958,92 @@ function Un() {
     } catch {
       continue;
     }
-    for (const o of $e(n)) {
-      const a = [...o.style.cssText.matchAll(rn)].map((s) => s[1]);
-      a.length && t.push({ selectors: o.selectorText.split(","), vars: a });
+    for (const a of Ue(n)) {
+      const o = [...a.style.cssText.matchAll(Ln)].map((r) => r[1]);
+      o.length && t.push({ selectors: a.selectorText.split(","), vars: o });
     }
   }
   return t;
 }
-function Vn(t, e) {
-  const n = e.replace(Bn, "").trim() || "*";
+function ga(t, e) {
+  const n = e.replace(ha, "").trim() || "*";
   try {
     return t.matches(n);
   } catch {
     return !1;
   }
 }
-function sn(t) {
+function Pn(t) {
   const e = /* @__PURE__ */ new Set(), n = [];
-  return Un().forEach(({ selectors: o, vars: a }) => {
-    const s = o.find((r) => Vn(t, r));
-    s && (a.forEach((r) => e.add(r)), n.push(s.trim()));
-  }), [...(t.getAttribute("style") || "").matchAll(rn)].forEach((o) => e.add(o[1])), { names: e, selectors: n };
+  return fa().forEach(({ selectors: a, vars: o }) => {
+    const r = a.find((s) => ga(t, s));
+    r && (o.forEach((s) => e.add(s)), n.push(r.trim()));
+  }), [...(t.getAttribute("style") || "").matchAll(Ln)].forEach((a) => e.add(a[1])), { names: e, selectors: n };
 }
-const We = (t) => window.CSS && CSS.escape ? CSS.escape(t) : t;
-function qn(t) {
+const mt = (t) => window.CSS && CSS.escape ? CSS.escape(t) : t;
+function ma(t) {
   const e = [];
   let n = t;
   for (; n && n.nodeType === 1 && n !== document.body && n !== document.documentElement; ) {
-    if (n.id && document.querySelectorAll(`#${We(n.id)}`).length === 1)
-      return e.unshift(`#${We(n.id)}`), e.join(" > ");
-    const o = n.localName, a = [...n.parentElement.children].filter((s) => s.localName === o);
-    e.unshift(a.length > 1 ? `${o}:nth-of-type(${a.indexOf(n) + 1})` : o), n = n.parentElement;
+    if (n.id && document.querySelectorAll(`#${mt(n.id)}`).length === 1)
+      return e.unshift(`#${mt(n.id)}`), e.join(" > ");
+    const a = n.localName, o = [...n.parentElement.children].filter((r) => r.localName === a);
+    e.unshift(o.length > 1 ? `${a}:nth-of-type(${o.indexOf(n) + 1})` : a), n = n.parentElement;
   }
   return ["body", ...e].join(" > ");
 }
-function Hn(t, e = sn(t).selectors) {
+function ba(t, e = Pn(t).selectors) {
   const n = t.getAttribute("data-twd");
   if (n) return `[data-twd="${n.replace(/"/g, "")}"]`;
-  const o = [...t.classList], s = o.find((r) => e.some((d) => new RegExp(`\\.${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(d))) || o[0];
-  return s ? `.${We(s)}` : null;
+  const a = [...t.classList], r = a.find((s) => e.some((i) => new RegExp(`\\.${s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
+  return r ? `.${mt(r)}` : null;
 }
-function _n(t) {
-  const e = sn(t), n = Hn(t, e.selectors), o = (t.getAttribute("aria-label") || t.placeholder || t.textContent || "").trim().replace(/\s+/g, " ");
+function xa(t) {
+  const e = Pn(t), n = ba(t, e.selectors), a = (t.getAttribute("aria-label") || t.placeholder || t.textContent || "").trim().replace(/\s+/g, " ");
   return {
     el: t,
     tag: t.localName,
     classes: [...t.classList],
-    text: o.length > 40 ? `${o.slice(0, 40)}…` : o,
+    text: a.length > 40 ? `${a.slice(0, 40)}…` : a,
     tokens: e.names,
-    elementSelector: qn(t),
+    elementSelector: ma(t),
     classSelector: n,
     classCount: n ? document.querySelectorAll(n).length : 0
   };
 }
-const Ye = (t) => t.localName + [...t.classList].map((e) => `.${e}`).join(""), Gn = { radius: "px", intensity: "%", base: "px" }, ln = (t) => t.charAt(0).toUpperCase() + t.slice(1), Kn = (t, e) => typeof e == "number" || /^\d+$/.test(e) ? `${e}${Gn[t] || ""}` : ln(String(e));
-function Tt(t, e, n) {
-  const o = on(() => t.tokens({ [t.id]: e }) || {}), a = Object.keys(o);
-  let s = {};
-  if (a.length) {
-    const r = n.selector ? document.querySelector(n.selector) : void 0;
-    s = jn(a, r || void 0);
+const bt = (t) => t.localName + [...t.classList].map((e) => `.${e}`).join(""), wa = { radius: "px", intensity: "%", base: "px" }, On = (t) => t.charAt(0).toUpperCase() + t.slice(1), va = (t, e) => typeof e == "number" || /^\d+$/.test(e) ? `${e}${wa[t] || ""}` : On(String(e));
+function Qt(t, e, n) {
+  const a = Mn(() => t.tokens({ [t.id]: e }) || {}), o = Object.keys(a);
+  let r = {};
+  if (o.length) {
+    const s = n.selector ? document.querySelector(n.selector) : void 0;
+    r = da(o, s || void 0);
   }
   return {
     ...n,
     sectionId: t.id,
     title: t.title,
-    settings: Object.entries(e).map(([r, d]) => ({ key: r, label: ln(r), value: Kn(r, d), ...t.describe?.(r, d) || {} })),
-    tokens: a.map((r) => ({ name: r, from: s[r] || "", to: o[r] }))
+    settings: Object.entries(e).map(([s, i]) => ({ key: s, label: On(s), value: va(s, i), ...t.describe?.(s, i) || {} })),
+    tokens: o.map((s) => ({ name: s, from: r[s] || "", to: a[s] }))
   };
 }
-function Lt(t, e) {
+function en(t, e) {
   const n = [];
-  return e.forEach((o) => {
-    t[o.id] && n.push(Tt(o, t[o.id], { kind: "global", selector: null }));
-  }), Object.entries(t.scopes || {}).forEach(([o, a]) => {
-    const s = Ge(o) ? "class" : "element";
-    e.forEach((r) => {
-      a[r.id] && n.push(Tt(r, a[r.id], { kind: s, selector: o }));
+  return e.forEach((a) => {
+    t[a.id] && n.push(Qt(a, t[a.id], { kind: "global", selector: null }));
+  }), Object.entries(t.scopes || {}).forEach(([a, o]) => {
+    const r = ft(a) ? "class" : "element";
+    e.forEach((s) => {
+      o[s.id] && n.push(Qt(s, o[s.id], { kind: r, selector: a }));
     });
   }), n;
 }
-function Wn(t) {
-  const e = (a) => Object.values(a || {}).reduce((s, r) => s + Object.keys(r || {}).length, 0), { scopes: n, ...o } = t;
-  return e(o) + Object.values(n || {}).reduce((a, s) => a + e(s), 0);
+function ya(t) {
+  const e = (o) => Object.values(o || {}).reduce((r, s) => r + Object.keys(s || {}).length, 0), { scopes: n, ...a } = t;
+  return e(a) + Object.values(n || {}).reduce((o, r) => o + e(r), 0);
 }
-const W = (t) => `\`${t}\``, Oe = (t) => t.map((e) => `  - ${W(e.name)}: ${e.from ? `${W(e.from)} → ` : ""}${W(e.to)}`), Re = (t) => `${t.title} › ${t.settings.map((e) => `${e.label}: ${e.value}`).join(", ")}`;
-function Yn(t) {
+const ae = (t) => `\`${t}\``, Ze = (t) => t.map((e) => `  - ${ae(e.name)}: ${e.from ? `${ae(e.from)} → ` : ""}${ae(e.to)}`), Xe = (t) => `${t.title} › ${t.settings.map((e) => `${e.label}: ${e.value}`).join(", ")}`;
+function ka(t) {
   let e = null;
   try {
     e = document.querySelector(t);
@@ -929,58 +1051,58 @@ function Yn(t) {
   }
   if (!e) return "not found on the current page";
   const n = (e.getAttribute("aria-label") || e.placeholder || e.textContent || "").trim().replace(/\s+/g, " ").slice(0, 60);
-  return `${W(Ye(e))}${n ? ` with text “${n}”` : ""}`;
+  return `${ae(bt(e))}${n ? ` with text “${n}”` : ""}`;
 }
-function Pt(t, e) {
+function tn(t, e) {
   const n = /* @__PURE__ */ new Map();
-  return t.forEach((o) => {
-    const a = o[e];
-    n.has(a) || n.set(a, []), n.get(a).push(o);
+  return t.forEach((a) => {
+    const o = a[e];
+    n.has(o) || n.set(o, []), n.get(o).push(a);
   }), [...n];
 }
-function Xn(t, { link: e = location.href, warnings: n = [] } = {}) {
+function Sa(t, { link: e = location.href, warnings: n = [] } = {}) {
   if (!t.length) return "";
-  const o = t.filter((d) => d.kind === "global"), a = t.filter((d) => d.kind === "class"), s = t.filter((d) => d.kind === "element"), r = [];
-  if (r.push(
+  const a = t.filter((i) => i.kind === "global"), o = t.filter((i) => i.kind === "class"), r = t.filter((i) => i.kind === "element"), s = [];
+  if (s.push(
     "# Apply design tweaks from Panel",
     "",
     "I explored design changes to this prototype with Panel (by Twiddle), a tweak panel that overrides the prototype's `--twd-*` CSS custom properties (design tokens) at runtime. Make these changes permanent in the source code.",
     "",
     `Preview of the tweaked version: ${e}`
-  ), o.length && (r.push(
+  ), a.length && (s.push(
     "",
     "## 1. Global token changes",
     "",
     "Update the default value of each token where it is defined (usually a `:root` rule or a `tokens.css` / `twiddle-tokens.css` file). Change the definition, not the places that use it.",
     ""
-  ), o.forEach((d) => r.push(`- **${Re(d)}**`, ...Oe(d.tokens)))), a.length && (r.push(
+  ), a.forEach((i) => s.push(`- **${Xe(i)}**`, ...Ze(i.tokens)))), o.length && (s.push(
     "",
-    `## ${o.length ? 2 : 1}. Component-wide changes`,
+    `## ${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.",
     ""
-  ), Pt(a, "selector").forEach(([d, l]) => {
-    r.push(`- ${W(d)} (${document.querySelectorAll(d).length} on this page)`), l.forEach((c) => r.push(`  - **${Re(c)}**`, ...Oe(c.tokens).map((p) => `  ${p}`)));
-  })), s.length) {
-    const d = 1 + (o.length ? 1 : 0) + (a.length ? 1 : 0);
-    r.push(
+  ), tn(o, "selector").forEach(([i, l]) => {
+    s.push(`- ${ae(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((p) => s.push(`  - **${Xe(p)}**`, ...Ze(p.tokens).map((c) => `  ${c}`)));
+  })), r.length) {
+    const i = 1 + (a.length ? 1 : 0) + (o.length ? 1 : 0);
+    s.push(
       "",
-      `## ${d}. Single-element changes`,
+      `## ${i}. Single-element changes`,
       "",
       "These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",
       ""
-    ), Pt(s, "selector").forEach(([l, c]) => {
-      r.push(`- ${Yn(l)}, found at ${W(l)}`), c.forEach((p) => r.push(`  - **${Re(p)}**`, ...Oe(p.tokens).map((m) => `  ${m}`)));
+    ), tn(r, "selector").forEach(([l, p]) => {
+      s.push(`- ${ka(l)}, found at ${ae(l)}`), p.forEach((c) => s.push(`  - **${Xe(c)}**`, ...Ze(c.tokens).map((h) => `  ${h}`)));
     });
   }
-  return n.length && r.push(
+  return n.length && s.push(
     "",
     "## Contrast to check",
     "",
     "Panel flagged these colour pairs as below WCAG AA with the new values:",
     "",
-    ...n.map((d) => `- ${d.text}`)
-  ), r.push(
+    ...n.map((i) => `- ${i.text}`)
+  ), s.push(
     "",
     "## Constraints",
     "",
@@ -988,71 +1110,71 @@ function Xn(t, { link: e = location.href, warnings: n = [] } = {}) {
     "- Change only what is listed above.",
     "- If a value uses `color-mix()` and the project targets older browsers, ask before converting it.",
     "- When done, list the files you changed."
-  ), r.join(`
+  ), s.join(`
 `);
 }
-const ye = 4.5, Jn = 3, Zn = [
+const Re = 4.5, $a = 3, Ea = [
   ["--twd-text", "--twd-bg", "Text on background"],
   ["--twd-text", "--twd-surface", "Text on surface"],
   ["--twd-text-muted", "--twd-surface", "Muted text on surface"],
   ["--twd-on-primary", "--twd-primary", "Text on brand"]
 ];
-let H;
-function tt(t) {
-  if (!t || (H ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !H)) return null;
-  H.clearRect(0, 0, 1, 1), H.fillStyle = "#000", H.fillStyle = t, H.fillRect(0, 0, 1, 1);
-  const [e, n, o, a] = H.getImageData(0, 0, 1, 1).data;
-  return [e, n, o, a / 255];
-}
-function Ft(t) {
+let W;
+function St(t) {
+  if (!t || (W ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !W)) return null;
+  W.clearRect(0, 0, 1, 1), W.fillStyle = "#000", W.fillStyle = t, W.fillRect(0, 0, 1, 1);
+  const [e, n, a, o] = W.getImageData(0, 0, 1, 1).data;
+  return [e, n, a, o / 255];
+}
+function nn(t) {
   const e = document.createElement("i");
   e.style.cssText = `position:absolute;visibility:hidden;color:var(${t})`, document.documentElement.appendChild(e);
   const n = getComputedStyle(e).color;
-  return e.remove(), tt(n);
-}
-const Ot = ([t, e, n]) => {
-  const o = (a) => (a /= 255, a <= 0.03928 ? a / 12.92 : ((a + 0.055) / 1.055) ** 2.4);
-  return 0.2126 * o(t) + 0.7152 * o(e) + 0.0722 * o(n);
-}, dn = (t, e) => t.slice(0, 3).map((n, o) => n * t[3] + e[o] * (1 - t[3])).concat(1);
-function cn(t, e) {
-  const n = Ot(t[3] < 1 ? dn(t, e) : t), o = Ot(e);
-  return (Math.max(n, o) + 0.05) / (Math.min(n, o) + 0.05);
-}
-const pn = (t) => `${t.toFixed(1)}:1`;
-function Ne() {
+  return e.remove(), St(n);
+}
+const an = ([t, e, n]) => {
+  const a = (o) => (o /= 255, o <= 0.03928 ? o / 12.92 : ((o + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * a(t) + 0.7152 * a(e) + 0.0722 * a(n);
+}, Fn = (t, e) => t.slice(0, 3).map((n, a) => n * t[3] + e[a] * (1 - t[3])).concat(1);
+function Nn(t, e) {
+  const n = an(t[3] < 1 ? Fn(t, e) : t), a = an(e);
+  return (Math.max(n, a) + 0.05) / (Math.min(n, a) + 0.05);
+}
+const jn = (t) => `${t.toFixed(1)}:1`;
+function Je() {
   const t = [];
-  return Zn.forEach(([e, n, o]) => {
-    const a = Ft(e), s = Ft(n);
-    if (!a || !s || s[3] === 0) return;
-    const r = cn(a, s);
-    r < ye && t.push({ label: o, ratio: r, needed: ye, text: `${o}: ${pn(r)} · AA needs ${ye}` });
+  return Ea.forEach(([e, n, a]) => {
+    const o = nn(e), r = nn(n);
+    if (!o || !r || r[3] === 0) return;
+    const s = Nn(o, r);
+    s < Re && t.push({ label: a, ratio: s, needed: Re, text: `${a}: ${jn(s)} · AA needs ${Re}` });
   }), t;
 }
-function Qn(t) {
+function Ca(t) {
   const e = [];
   for (let n = t; n && n.nodeType === 1; n = n.parentElement) {
-    const o = tt(getComputedStyle(n).backgroundColor);
-    if (o && o[3] > 0 && (e.push(o), o[3] >= 1))
+    const a = St(getComputedStyle(n).backgroundColor);
+    if (a && a[3] > 0 && (e.push(a), a[3] >= 1))
       break;
   }
-  return e.reduceRight((n, o) => dn(o, n), [255, 255, 255, 1]);
+  return e.reduceRight((n, a) => Fn(a, n), [255, 255, 255, 1]);
 }
-function eo(t) {
+function Ta(t) {
   if (!t.textContent.trim() && !t.placeholder) return null;
-  const e = getComputedStyle(t), n = tt(e.color);
+  const e = getComputedStyle(t), n = St(e.color);
   if (!n) return null;
-  const o = parseFloat(e.fontSize), s = o >= 24 || o >= 18.66 && parseInt(e.fontWeight, 10) >= 700 ? Jn : ye, r = cn(n, Qn(t));
-  return r < s ? { label: "This element", ratio: r, needed: s, text: `This element’s text: ${pn(r)} · AA needs ${s}` } : null;
+  const a = parseFloat(e.fontSize), r = a >= 24 || a >= 18.66 && parseInt(e.fontWeight, 10) >= 700 ? $a : Re, s = Nn(n, Ca(t));
+  return s < r ? { label: "This element", ratio: s, needed: r, text: `This element’s text: ${jn(s)} · AA needs ${r}` } : null;
 }
-const Rt = "twiddle-panel", to = "0.6.1", Nt = "https://panel.twiddle.in", no = "--twd-radius-control", oo = /var\(\s*--twd-/;
-function ao(t) {
+const on = "twiddle-panel", Ma = "0.7.0", rn = "https://panel.twiddle.in", Aa = "--twd-radius-control", La = /var\(\s*--twd-/;
+function Pa(t) {
   return t.style.cssText.split(";").some((e) => {
     const n = e.slice(0, e.indexOf(":")).trim();
-    return n && !n.startsWith("--") && oo.test(e);
+    return n && !n.startsWith("--") && La.test(e);
   });
 }
-function ro() {
-  if (!getComputedStyle(document.documentElement).getPropertyValue(no).trim()) return "no-tokens";
+function Oa() {
+  if (!getComputedStyle(document.documentElement).getPropertyValue(Aa).trim()) return "no-tokens";
   let t = !1;
   for (const e of document.styleSheets) {
     if (e.ownerNode?.id === "twiddle-scoped") continue;
@@ -1063,43 +1185,45 @@ function ro() {
       t = !0;
       continue;
     }
-    for (const o of $e(n)) if (ao(o)) return "ok";
+    for (const a of Ue(n)) if (Pa(a)) return "ok";
   }
   return document.querySelector('[style*="var(--twd-"]') ? "ok" : t ? "unknown" : "unused";
 }
-function so() {
+function Fa() {
   const t = /* @__PURE__ */ new Set(), e = (n) => {
-    for (const o of n.matchAll(/var\(\s*(--twd-[\w-]+)/g)) t.add(o[1]);
+    for (const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g)) t.add(a[1]);
   };
   for (const n of document.styleSheets) {
     if (n.ownerNode?.id === "twiddle-scoped") continue;
-    let o;
+    let a;
     try {
-      o = n.cssRules;
+      a = n.cssRules;
     } catch {
       continue;
     }
-    for (const a of $e(o))
-      a.style.cssText.split(";").forEach((s) => {
-        const r = s.slice(0, s.indexOf(":")).trim();
-        r && !r.startsWith("--") && e(s);
+    for (const o of Ue(a))
+      o.style.cssText.split(";").forEach((r) => {
+        const s = r.slice(0, r.indexOf(":")).trim();
+        s && !s.startsWith("--") && e(r);
       });
   }
   return document.querySelectorAll('[style*="var(--twd-"]').forEach((n) => e(n.getAttribute("style"))), t;
 }
-const jt = [
-  { label: "With a build tool, in your entry file", code: `import '${Rt}/tokens.css';` },
+const sn = [
+  { label: "With a build tool, in your entry file", code: `import '${on}/tokens.css';` },
   // Pinned to this build's version: unversioned jsDelivr links can lag a release by days, and unpkg once failed for a fresh one.
-  { label: "Plain HTML, in <head>", code: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${Rt}@${to}/dist/twiddle-tokens.css">` }
-], io = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
+  { label: "Plain HTML, in <head>", code: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${on}@${Ma}/dist/twiddle-tokens.css">` }
+], Na = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
 
 1. Keep the current look. In a :root rule loaded after twiddle-tokens.css, set each token below to the value this project already uses (for example, if buttons use #0f766e, set --twd-primary: #0f766e). Only set the tokens the project actually needs.
 2. Replace fixed values in component styles with var(--twd-…). Map each value to the closest token by role:
    - Fonts: --twd-font-heading, --twd-font-body
    - Text sizes: --twd-text-xs, -sm, -base, -lg, -xl, -2xl, -3xl; line height: --twd-leading-tight, --twd-leading-normal
+   - Font weights: --twd-weight-heading (headings, big numbers), --twd-weight-strong (buttons, labels, emphasis)
    - Colours: --twd-bg (page), --twd-surface (cards, inputs), --twd-surface-raised (menus, popovers), --twd-text, --twd-text-muted, --twd-border, --twd-primary, --twd-primary-hover, --twd-on-primary (text on primary), --twd-focus, --twd-success, --twd-warning, --twd-danger
    - Buttons, inputs, chips: --twd-radius-control, --twd-control-height, --twd-control-pad-x
    - Cards, menus, modals: --twd-radius-container, --twd-border-width-container
+   - Main button and default card, preferred where they fit: --twd-button-bg, --twd-button-fg, --twd-button-border, --twd-button-hover (hover background); --twd-card-bg, --twd-card-border, --twd-card-shadow
    - Borders: --twd-border-width
    - Spacing (padding, margin, gap): --twd-space-1 to --twd-space-8 (4, 8, 12, 16, 24, 32, 48, 64px)
    - Layout roles, preferred where they fit: --twd-page-pad (side padding of the page), --twd-section-gap (between page sections), --twd-card-pad (inside cards, menus, modals), --twd-card-gap (between items in a card), --twd-control-gap (between buttons, chips, inputs in a row)
@@ -1112,309 +1236,783 @@ function B(t) {
   e.className = "field";
   const n = document.createElement("div");
   n.className = "field-head";
-  const o = document.createElement("span");
-  o.className = "field-label", o.textContent = t;
   const a = document.createElement("span");
-  return a.className = "field-value", a.hidden = !0, n.append(o, a), e.append(n), {
+  a.className = "field-label", a.textContent = t;
+  const o = document.createElement("span");
+  return o.className = "field-value", o.hidden = !0, n.append(a, o), e.append(n), {
     el: e,
-    setValue(s) {
-      a.textContent = s || "", a.hidden = !s;
+    setValue(r) {
+      o.textContent = r || "", o.hidden = !r;
     },
-    append(...s) {
-      e.append(...s);
+    append(...r) {
+      e.append(...r);
     }
   };
 }
-function lo({ label: t, ends: e, cols: n = 9, rows: o = 5, onInput: a }) {
-  const s = document.createElement("div");
-  s.className = "pad", s.tabIndex = 0, s.setAttribute("role", "group"), s.setAttribute("aria-roledescription", "2D slider");
-  const r = (g, u) => {
-    const y = document.createElement("span");
-    return y.className = `pad-edge ${g}`, y.textContent = u, y.setAttribute("aria-hidden", "true"), y;
+function ja({ label: t, ends: e, cols: n = 9, rows: a = 5, onInput: o }) {
+  const r = document.createElement("div");
+  r.className = "pad", r.tabIndex = 0, r.setAttribute("role", "group"), r.setAttribute("aria-roledescription", "2D slider");
+  const s = (b, u) => {
+    const v = document.createElement("span");
+    return v.className = `pad-edge ${b}`, v.textContent = u, v.setAttribute("aria-hidden", "true"), v;
   };
-  s.append(r("top", e.top), r("bottom", e.bottom), r("left", e.left), r("right", e.right));
-  const d = document.createElement("div");
-  d.className = "pad-area";
-  for (let g = 0; g < o; g++)
+  r.append(s("top", e.top), s("bottom", e.bottom), s("left", e.left), s("right", e.right));
+  const i = document.createElement("div");
+  i.className = "pad-area";
+  for (let b = 0; b < a; b++)
     for (let u = 0; u < n; u++) {
-      const y = document.createElement("i");
-      y.className = "pad-dot", y.style.left = `${u / (n - 1) * 100}%`, y.style.top = `${g / (o - 1) * 100}%`, d.append(y);
+      const v = document.createElement("i");
+      v.className = "pad-dot", v.style.left = `${u / (n - 1) * 100}%`, v.style.top = `${b / (a - 1) * 100}%`, i.append(v);
     }
   const l = document.createElement("span");
-  l.className = "pad-knob", d.append(l), s.append(d);
-  let c = 0.5, p = 0.5;
-  const m = (g, u) => Math.round(Math.min(1, Math.max(0, g)) * (u - 1)) / (u - 1);
-  function v() {
-    l.style.left = `${c * 100}%`, l.style.top = `${p * 100}%`;
-  }
-  function f(g, u, y) {
-    g = y === "x" ? c : m(g, n), u = y === "y" ? p : m(u, o), !(g === c && u === p) && (c = g, p = u, v(), a(c, p));
-  }
-  const x = (g) => {
-    const u = d.getBoundingClientRect();
-    f((g.clientX - u.left) / u.width, (g.clientY - u.top) / u.height);
+  l.className = "pad-knob", i.append(l), r.append(i);
+  let p = 0.5, c = 0.5;
+  const h = (b, u) => Math.round(Math.min(1, Math.max(0, b)) * (u - 1)) / (u - 1);
+  function y() {
+    l.style.left = `${p * 100}%`, l.style.top = `${c * 100}%`;
+  }
+  function f(b, u, v) {
+    b = v === "x" ? p : h(b, n), u = v === "y" ? c : h(u, a), !(b === p && u === c) && (p = b, c = u, y(), o(p, c));
+  }
+  const m = (b) => {
+    const u = i.getBoundingClientRect();
+    f((b.clientX - u.left) / u.width, (b.clientY - u.top) / u.height);
   };
-  s.addEventListener("pointerdown", (g) => {
-    s.setPointerCapture(g.pointerId), s.classList.add("dragging"), x(g);
-  }), s.addEventListener("pointermove", (g) => {
-    s.hasPointerCapture(g.pointerId) && x(g);
+  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 b = (g) => {
-    s.hasPointerCapture(g.pointerId) && s.releasePointerCapture(g.pointerId), s.classList.remove("dragging");
+  const x = (b) => {
+    r.hasPointerCapture(b.pointerId) && r.releasePointerCapture(b.pointerId), r.classList.remove("dragging");
   };
-  return s.addEventListener("pointerup", b), s.addEventListener("pointercancel", b), s.addEventListener("keydown", (g) => {
-    const u = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[g.key];
-    u && (g.preventDefault(), u[0] ? f(m(c, n) + u[0] / (n - 1), p, "y") : f(c, m(p, o) + u[1] / (o - 1), "x"));
+  return r.addEventListener("pointerup", x), r.addEventListener("pointercancel", x), r.addEventListener("keydown", (b) => {
+    const u = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[b.key];
+    u && (b.preventDefault(), u[0] ? f(h(p, n) + u[0] / (n - 1), c, "y") : f(p, h(c, a) + u[1] / (a - 1), "x"));
   }), {
-    el: s,
+    el: r,
     /** Show a position without telling anyone (used to sync). Off-grid values are shown as they are. */
-    setValue(g, u, y) {
-      c = Math.min(1, Math.max(0, g)), p = Math.min(1, Math.max(0, u)), v(), s.setAttribute("aria-label", y ? `${t}: ${y}` : t);
+    setValue(b, u, v) {
+      p = Math.min(1, Math.max(0, b)), c = Math.min(1, Math.max(0, u)), y(), r.setAttribute("aria-label", v ? `${t}: ${v}` : t);
     }
   };
 }
-function un({ label: t, min: e, max: n, step: o = 1, format: a = String, onInput: s }) {
-  const r = document.createElement("div");
-  r.className = "slider";
-  const d = document.createElement("input");
-  d.type = "range", d.min = String(e), d.max = String(n), d.step = String(o), d.setAttribute("aria-label", t);
+function Rn({ label: t, min: e, 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(e), i.max = String(n), i.step = String(a), i.setAttribute("aria-label", t);
   const l = document.createElement("span");
-  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), r.append(d, l);
-  const c = (p) => {
-    const m = (Number(d.value) - e) / (n - e) * 100;
-    d.style.setProperty("--fill", `${m}%`), l.textContent = p ?? a(Number(d.value)), d.setAttribute("aria-valuetext", l.textContent);
+  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), s.append(i, l);
+  const p = (c) => {
+    const h = (Number(i.value) - e) / (n - e) * 100;
+    i.style.setProperty("--fill", `${h}%`), l.textContent = c ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
   };
-  return d.addEventListener("input", () => {
-    c(), s(Number(d.value));
+  return i.addEventListener("input", () => {
+    p(), r(Number(i.value));
   }), {
-    el: r,
+    el: s,
     /** Show a value without reporting it (sync after reset / URL load). */
-    setValue(p, m) {
-      d.value = String(p), c(m);
+    setValue(c, h) {
+      i.value = String(c), p(h);
     }
   };
 }
+function Ra({ label: t, options: e, 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", t);
+  const s = e.map((c) => {
+    const h = document.createElement("button");
+    return h.type = "button", h.className = "tile", c.wide && h.classList.add("wide"), h.setAttribute("role", "radio"), h.dataset.value = c.value, c.title && (h.title = c.title), h.innerHTML = `${c.preview ? `<span class="tile-preview" aria-hidden="true">${c.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${c.sub ? '<span class="tile-sub"></span>' : ""}</span>`, h.querySelector(".tile-label").textContent = c.label, c.sub && (h.querySelector(".tile-sub").textContent = c.sub), h.addEventListener("click", () => p(c.value)), h;
+  });
+  r.append(...s);
+  let i = null;
+  function l(c) {
+    i = c, s.forEach((y) => y.setAttribute("aria-checked", String(y.dataset.value === c)));
+    const h = Math.max(0, s.findIndex((y) => y.dataset.value === c));
+    s.forEach((y, f) => {
+      y.tabIndex = f === h ? 0 : -1;
+    });
+  }
+  function p(c, h) {
+    c !== i && (l(c), o(c)), h && s.find((y) => y.dataset.value === c).focus();
+  }
+  return r.addEventListener("keydown", (c) => {
+    const h = s.indexOf(c.target.closest(".tile"));
+    if (h < 0) return;
+    const y = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[c.key];
+    let f;
+    if (y) f = (h + y + s.length) % s.length;
+    else if (c.key === "Home") f = 0;
+    else if (c.key === "End") f = s.length - 1;
+    else return;
+    c.preventDefault(), p(s[f].dataset.value, !0);
+  }), l(null), { el: r, setValue: l };
+}
 const F = (t) => getComputedStyle(document.documentElement).getPropertyValue(t).trim();
-function Se(t, e) {
+function ye(t, e) {
   const n = /^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(t).trim());
   if (!n) return null;
-  const o = parseFloat(n[1]) * e, a = n[2] || "px";
-  return a === "px" ? `${Math.round(o)}px` : `${+o.toFixed(3)}${a}`;
-}
-const co = 999;
-function hn({ id: t, title: e, hint: n, token: o, uses: a = [], presets: s, max: r, extra: d = [], extraTokens: l = () => ({}) }) {
-  const c = (v) => s.find((f) => f.value === v), p = (v) => v >= co ? "full" : `${v}px`, m = (v) => {
-    if (typeof v.radius == "number" && isFinite(v.radius))
-      return { [o]: `${Math.min(Math.max(v.radius, 0), r)}px` };
-    const f = c(v.corners);
-    return f ? { [o]: `${f.radius}px` } : {};
+  const a = parseFloat(n[1]) * e, o = n[2] || "px";
+  return o === "px" ? `${Math.round(a)}px` : `${+a.toFixed(3)}${o}`;
+}
+const za = 999;
+function zn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: r, max: s, extra: i = [], extraTokens: l = () => ({}), shape: p = "card" }) {
+  const c = (f) => r.find((m) => m.value === f), h = (f) => f >= za ? "full" : `${f}px`, y = (f) => {
+    if (typeof f.radius == "number" && isFinite(f.radius))
+      return { [a]: `${Math.min(Math.max(f.radius, 0), s)}px` };
+    const m = c(f.corners);
+    return m ? { [a]: `${m.radius}px` } : {};
   };
   return {
     id: t,
     title: e,
     hint: n,
-    presets: s,
-    uses: [o, ...a],
-    tokens(v) {
-      const f = v[t] || {};
-      return { ...m(f), ...l(f) };
+    presets: r,
+    uses: [a, ...o],
+    tokens(f) {
+      const m = f[t] || {};
+      return { ...y(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(v, f, { label: x = "Corners" } = {}) {
-        const b = B(x), g = X({
+      corners(f, m, { label: x = "Corners" } = {}) {
+        const b = B(x), u = re({
           label: `${e} corners`,
-          options: s.map((k) => ({ value: k.value, label: k.label, title: p(k.radius) })),
-          onSelect: (k) => f.setSection(t, { corners: k, radius: null })
-        }), u = un({
+          options: r.map((E) => ({ value: E.value, label: E.label, title: h(E.radius) })),
+          onSelect: (E) => m.setSection(t, { corners: E, radius: null })
+        }), v = Rn({
           label: `${e} corner radius`,
           min: 0,
-          max: r,
-          format: p,
-          onInput: (k) => f.setSection(t, { radius: k, corners: null })
+          max: s,
+          format: h,
+          onInput: (E) => m.setSection(t, { radius: E, corners: null })
         });
-        b.append(g.el, u.el), v.append(b.el);
-        const y = () => {
-          const k = parseFloat((f.readToken || F)(o)), O = f.getState()[t] || {}, Z = c(O.corners) || s.find((Q) => Q.radius === k);
-          if (g.setValue(Z ? Z.value : null), isNaN(k)) {
-            u.setValue(0, "—"), b.setValue("");
+        b.append(u.el, v.el), f.append(b.el);
+        const L = () => {
+          const E = parseFloat((m.readToken || F)(a)), J = m.getState()[t] || {}, K = c(J.corners) || r.find((G) => G.radius === E);
+          if (u.setValue(K ? K.value : null), isNaN(E)) {
+            v.setValue(0, "—"), b.setValue("");
             return;
           }
-          u.setValue(Math.min(k, r), p(k)), b.setValue(p(k));
+          v.setValue(Math.min(E, s), h(E)), b.setValue(h(E));
         };
-        y(), f.onChange(y);
+        L(), m.onChange(L);
+      },
+      ...Object.fromEntries(i.map((f) => [f.key, (m, x, { label: b } = {}) => m.append(ke(x, { section: t, ...f, label: b || f.label }))])),
+      // Tabbed layout: presets as tiles showing the real rounding.
+      cornerTiles(f, m, { label: x = "Corners" } = {}) {
+        const b = (u) => `<span class="shape shape-${p}" style="border-radius:${Math.min(u, p === "button" ? 12 : 16)}px"></span>`;
+        f.append(V(m, {
+          section: t,
+          key: "corners",
+          label: x,
+          columns: r.length,
+          options: r.map((u) => ({ value: u.value, label: u.label, title: h(u.radius), preview: b(u.radius) })),
+          current: (u) => {
+            const v = u[t] || {};
+            if (v.radius != null) return null;
+            const L = parseFloat((m.readToken || F)(a));
+            return (c(v.corners) || r.find((E) => E.radius === L))?.value || null;
+          },
+          select: (u) => m.setSection(t, { corners: u, radius: null }),
+          valueText: () => {
+            const u = parseFloat((m.readToken || F)(a));
+            return isNaN(u) ? "" : h(u);
+          }
+        }));
       },
-      ...Object.fromEntries(d.map((v) => [v.key, (f, x, { label: b } = {}) => f.append(le(x, { section: t, ...v, label: b || v.label }))]))
+      ...Object.fromEntries(i.filter((f) => f.preview).map((f) => [`${f.key}Tiles`, (m, x, { label: b } = {}) => m.append(V(x, {
+        section: t,
+        key: f.key,
+        label: b || f.label,
+        fallback: f.fallback,
+        columns: f.columns || f.options.length,
+        options: f.options.map((u) => ({ ...u, preview: f.preview(u.value) }))
+      }))]))
     },
-    render(v, f) {
-      Object.values(this.parts).forEach((x) => x(v, f));
+    render(f, m) {
+      Object.entries(this.parts).filter(([x]) => !x.endsWith("Tiles")).forEach(([, x]) => x(f, m));
     }
   };
 }
-function le(t, { section: e, key: n, label: o, options: a, fallback: s, valueText: r }) {
-  const d = B(o), l = X({
-    label: o,
-    options: a,
-    onSelect: (p) => t.setSection(e, { [n]: p })
+function ke(t, { section: e, key: n, label: a, options: o, fallback: r, valueText: s }) {
+  const i = B(a), l = re({
+    label: a,
+    options: o,
+    onSelect: (c) => t.setSection(e, { [n]: c })
   });
-  d.append(l.el);
-  const c = () => {
-    const p = (t.getState()[e] || {})[n] || s;
-    l.setValue(p), d.setValue(r ? r(p) : "");
+  i.append(l.el);
+  const p = () => {
+    const c = (t.getState()[e] || {})[n] || r;
+    l.setValue(c), i.setValue(s ? s(c) : "");
   };
-  return c(), t.onChange(c), d.el;
+  return p(), t.onChange(p), i.el;
 }
-function po(t, { section: e, key: n, label: o, min: a, max: s, fallback: r, format: d }) {
-  const l = B(o), c = un({ label: o, min: a, max: s, format: d, onInput: (m) => t.setSection(e, { [n]: m }) });
-  l.append(c.el);
-  const p = () => {
-    const m = (t.getState()[e] || {})[n];
-    c.setValue(typeof m == "number" ? m : r);
+function Ia(t, { section: e, key: n, label: a, min: o, max: r, fallback: s, format: i }) {
+  const l = B(a), p = Rn({ label: a, min: o, max: r, format: i, onInput: (h) => t.setSection(e, { [n]: h }) });
+  l.append(p.el);
+  const c = () => {
+    const h = (t.getState()[e] || {})[n];
+    p.setValue(typeof h == "number" ? h : s);
+  };
+  return c(), t.onChange(c), l.el;
+}
+function V(t, { section: e, key: n, label: a, options: o, columns: r = 3, className: s = "", fallback: i, valueText: l, current: p, select: c }) {
+  const h = B(a), y = Ra({
+    label: a,
+    options: o,
+    columns: r,
+    className: s,
+    onSelect: (m) => c ? c(m) : t.setSection(e, { [n]: m })
+  });
+  h.append(y.el);
+  const f = () => {
+    const m = t.getState(), x = p ? p(m) : (m[e] || {})[n] || i || null;
+    y.setValue(x), h.setValue(l ? l(x, m) : "");
   };
-  return p(), t.onChange(p), l.el;
+  return f(), t.onChange(f), h.el;
 }
-const zt = (t, e) => e.map((n) => `${t}${n}`), fn = {
+const ln = (t, e) => e.map((n) => `${t}${n}`), In = {
   fonts: { label: "Tokens", tokens: ["font-heading", "font-body"], kind: "text" },
-  type: { label: "Tokens", tokens: zt("text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"]), kind: "length" },
+  type: { label: "Tokens", tokens: ln("text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"]), kind: "length" },
   leading: { label: "Line height", tokens: ["leading-tight", "leading-normal"], kind: "number" },
+  weights: { label: "Weights", tokens: ["weight-heading", "weight-strong"], kind: "number" },
   colours: { label: "Tokens", tokens: ["bg", "surface", "surface-raised", "text", "text-muted", "border", "primary", "primary-hover", "on-primary", "focus", "success", "warning", "danger"], kind: "colour" },
-  spacing: { label: "Steps", tokens: zt("space-", [1, 2, 3, 4, 5, 6, 7, 8]), kind: "length", bar: 64 },
+  spacing: { label: "Steps", tokens: ln("space-", [1, 2, 3, 4, 5, 6, 7, 8]), kind: "length", bar: 64 },
   controls: { label: "Controls", tokens: ["control-height", "control-pad-x"], kind: "length" },
   corners: { label: "Tokens", tokens: ["radius-control", "radius-container"], kind: "length" },
   borders: { label: "Tokens", tokens: ["border-width", "border-width-container"], kind: "length" },
-  shadows: { label: "Tokens", tokens: ["shadow-sm", "shadow-md", "shadow-lg"], kind: "text" }
-}, q = (t) => `--twd-${t}`, je = (t, e) => Object.prototype.hasOwnProperty.call(t.getState().custom || {}, e), uo = (t, e) => fn[e].tokens.some((n) => (t.custom || {})[n] != null);
-function ho(t, e) {
+  shadows: { label: "Tokens", tokens: ["shadow-sm", "shadow-md", "shadow-lg"], kind: "text" },
+  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" }
+}, _ = (t) => `--twd-${t}`, Qe = (t, e) => Object.prototype.hasOwnProperty.call(t.getState().custom || {}, e), dn = (t, e) => In[e].tokens.some((n) => (t.custom || {})[n] != null);
+function Da(t, e) {
   const n = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
   return !n || e === "text" || e === "colour" ? null : n[2] === "rem" ? { n: +(parseFloat(n[1]) * 16).toFixed(1), unit: "px" } : { n: +parseFloat(n[1]).toFixed(3), unit: n[2] || (e === "length" ? "px" : "") };
 }
-function fo(t, e) {
+function Ba(t, e) {
   const n = t.trim();
   return n ? e === "length" && /^-?\d*\.?\d+$/.test(n) ? `${n}px` : n : null;
 }
-function go(t, e, n, o) {
-  const a = document.createElement("div");
-  a.className = `token-row kind-${n}`, a.innerHTML = `
-    <code class="token-name" title="${q(e)}">${e}</code>
-    ${o ? '<span class="token-bar"><span></span></span>' : '<span class="token-gap"></span>'}
+function Ua(t, e, n, a) {
+  const o = document.createElement("div");
+  o.className = `token-row kind-${n}`, o.innerHTML = `
+    <code class="token-name" title="${_(e)}">${e}</code>
+    ${a ? '<span class="token-bar"><span></span></span>' : '<span class="token-gap"></span>'}
     <span class="custom-tag" hidden>Custom</span>
     <label class="token-value">
       ${n === "colour" ? '<span class="token-swatch"></span>' : ""}
-      <input type="text" spellcheck="false" aria-label="${q(e)}" ${n === "length" || n === "number" ? 'inputmode="decimal"' : ""}>
+      <input type="text" spellcheck="false" aria-label="${_(e)}" ${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 ${q(e)}" hidden>${M.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${_(e)}" hidden>${A.reset}</button>
   `;
-  const s = a.querySelector("input"), r = a.querySelector(".token-unit"), d = a.querySelector(".token-bar span"), l = a.querySelector(".token-swatch"), c = a.querySelector(".custom-tag"), p = a.querySelector(".token-reset");
-  let m = "";
-  const v = () => {
-    let x = s.value;
-    m && /^-?\d*\.?\d+$/.test(x.trim()) && (x = `${x.trim()}${m}`);
-    const b = fo(x, n), g = F(q(e));
-    if (b === null) {
-      je(t, e) ? t.setSection("custom", { [e]: null }) : f();
+  const r = o.querySelector("input"), s = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), p = o.querySelector(".custom-tag"), c = o.querySelector(".token-reset");
+  let h = "";
+  const y = () => {
+    let m = r.value;
+    h && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${h}`);
+    const x = Ba(m, n), b = F(_(e));
+    if (x === null) {
+      Qe(t, e) ? t.setSection("custom", { [e]: null }) : f();
       return;
     }
-    if (b === g && !je(t, e)) return f();
-    t.setSection("custom", { [e]: b });
+    if (x === b && !Qe(t, e)) return f();
+    t.setSection("custom", { [e]: x });
   };
-  s.addEventListener("change", v), s.addEventListener("blur", () => f()), s.addEventListener("keydown", (x) => {
-    x.key === "Enter" && (x.preventDefault(), s.blur()), x.key === "Escape" && (x.stopPropagation(), f(), s.blur());
-  }), p.addEventListener("click", () => t.setSection("custom", { [e]: null }));
+  r.addEventListener("change", y), r.addEventListener("blur", () => f()), r.addEventListener("keydown", (m) => {
+    m.key === "Enter" && (m.preventDefault(), r.blur()), m.key === "Escape" && (m.stopPropagation(), f(), r.blur());
+  }), c.addEventListener("click", () => t.setSection("custom", { [e]: null }));
   function f() {
-    const x = F(q(e)), b = je(t, e), g = ho(x, n);
-    m = g ? g.unit : "", document.activeElement !== s && a.getRootNode().activeElement !== s && (s.value = g ? String(g.n) : x), s.title = x, r.textContent = m, r.hidden = !m, d && (d.style.width = `${Math.max(2, Math.min(100, (g ? g.n : 0) / o * 100))}%`), l && (l.style.background = x), a.classList.toggle("edited", b), c.hidden = !b, p.hidden = !b;
+    const m = F(_(e)), x = Qe(t, e), b = Da(m, n);
+    h = b ? b.unit : "", document.activeElement !== r && o.getRootNode().activeElement !== r && (r.value = b ? String(b.n) : m), r.title = m, s.textContent = h, s.hidden = !h, 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), p.hidden = !x, c.hidden = !x;
   }
-  return f(), t.onChange(f), a;
+  return f(), t.onChange(f), o;
 }
-const mo = {
+const qa = {
   id: "custom",
   title: "Custom tokens",
   hint: "Any token, set to a fixed value",
   uses: [],
   // not offered for a single picked element (yet)
   tokens(t) {
-    return Object.fromEntries(Object.entries(t.custom || {}).map(([e, n]) => [q(e), n]));
+    return Object.fromEntries(Object.entries(t.custom || {}).map(([e, n]) => [_(e), n]));
   },
-  describe: (t, e) => ({ label: q(t), value: String(e) }),
+  describe: (t, e) => ({ label: _(t), value: String(e) }),
   // One part per Edit page group, e.g. parts.spacing → rows for --twd-space-1 … 8.
-  parts: Object.fromEntries(Object.entries(fn).map(([t, e]) => [t, (n, o, { label: a = e.label } = {}) => {
-    const s = B(a);
-    s.el.classList.add("token-field");
-    const r = e.tokens[0], d = e.tokens[e.tokens.length - 1];
-    s.setValue(e.tokens.length > 2 && /-\w+$/.test(r) ? `${q(r)} … ${d.split("-").pop()}` : "");
+  parts: Object.fromEntries(Object.entries(In).map(([t, e]) => [t, (n, a, { label: o = e.label } = {}) => {
+    const r = B(o);
+    r.el.classList.add("token-field");
+    const s = e.tokens[0], i = e.tokens[e.tokens.length - 1];
+    r.setValue(e.tokens.length > 2 && /-\w+$/.test(s) ? `${_(s)} … ${i.split("-").pop()}` : "");
     const l = document.createElement("div");
-    l.className = "token-rows", e.tokens.forEach((c) => l.append(go(o, c, e.kind, e.bar))), s.append(l), n.append(s.el);
+    l.className = "token-rows", e.tokens.forEach((p) => l.append(Ua(a, p, e.kind, e.bar))), r.append(l), n.append(r.el);
   }]))
-}, Xe = { compact: 0.75, regular: 1, comfy: 1.25 }, Je = [0.75, 1.25], It = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => `--twd-space-${t}`);
-function Ze(t = {}) {
-  return typeof t.factor == "number" && isFinite(t.factor) ? Math.min(Je[1], Math.max(Je[0], t.factor)) : Xe[t.spacing] || 1;
+}, we = { compact: 0.75, regular: 1, comfy: 1.25 }, xt = [0.75, 1.25], cn = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => `--twd-space-${t}`);
+function te(t = {}) {
+  return typeof t.factor == "number" && isFinite(t.factor) ? Math.min(xt[1], Math.max(xt[0], t.factor)) : we[t.spacing] || 1;
 }
-const Dt = (t) => `${Math.round(t * 100)}%`, bo = {
+const et = (t) => `${Math.round(t * 100)}%`, Va = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
-  uses: It,
+  uses: cn,
   tokens(t) {
-    const e = Ze(t.density);
+    const e = te(t.density);
     if (e === 1) return {};
     const n = {};
-    return It.forEach((o) => {
-      const a = Se(F(o), e);
-      a && (n[o] = a);
+    return cn.forEach((a) => {
+      const o = ye(F(a), e);
+      o && (n[a] = o);
     }), n;
   },
   /** How the Changes list and prompt describe a setting. */
-  describe: (t, e) => t === "factor" ? { label: "Spacing", value: Dt(e) } : null,
+  describe: (t, e) => t === "factor" ? { label: "Spacing", value: et(e) } : null,
   parts: {
+    // Tabbed layout: presets as tiles with a tiny layout sketch.
+    spacingTiles(t, e, { label: n = "Density" } = {}) {
+      const a = (o, r) => `<span class="sketch" style="padding:${r}px;gap:${o}px"><i></i><i></i><i></i></span>`;
+      t.append(V(e, {
+        section: "density",
+        key: "spacing",
+        label: n,
+        options: [{ value: "compact", label: "Compact", preview: a(2, 5) }, { value: "regular", label: "Regular", preview: a(4, 8) }, { value: "comfy", label: "Comfy", preview: a(6, 11) }],
+        current: (o) => {
+          const r = te(o.density);
+          return Object.keys(we).find((s) => we[s] === r) || null;
+        },
+        select: (o) => e.setSection("density", { spacing: o, factor: null }),
+        valueText: (o, r) => dn(r, "spacing") ? "Custom" : o ? "" : et(te(r.density))
+      }));
+    },
     spacing(t, e, { label: n = "Spacing" } = {}) {
-      const o = B(n), a = X({
+      const a = B(n), o = re({
         label: n,
         options: [{ value: "compact", label: "Compact" }, { value: "regular", label: "Regular" }, { value: "comfy", label: "Comfy" }],
-        onSelect: (r) => e.setSection("density", { spacing: r, factor: null })
+        onSelect: (s) => e.setSection("density", { spacing: s, factor: null })
       });
-      o.append(a.el);
-      const s = () => {
-        const r = e.getState().density || {}, d = Ze(r), l = Object.keys(Xe).find((c) => Xe[c] === d);
-        a.setValue(l || null), o.setValue(uo(e.getState(), "spacing") ? "Custom" : l ? "" : Dt(d));
+      a.append(o.el);
+      const r = () => {
+        const s = e.getState().density || {}, i = te(s), l = Object.keys(we).find((p) => we[p] === i);
+        o.setValue(l || null), a.setValue(dn(e.getState(), "spacing") ? "Custom" : l ? "" : et(i));
       };
-      s(), e.onChange(s), t.append(o.el);
+      r(), e.onChange(r), t.append(a.el);
     }
   },
   render(t, e) {
-    Object.values(this.parts).forEach((n) => n(t, e));
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
+  }
+}, Ha = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', _a = [
+  [50, "white", 10],
+  [100, "white", 20],
+  [200, "white", 36],
+  [300, "white", 56],
+  [400, "white", 78],
+  [500, null, 100],
+  [600, "black", 86],
+  [700, "black", 72],
+  [800, "black", 58],
+  [900, "black", 45],
+  [950, "black", 30]
+], tt = (t) => {
+  let e = String(t).trim().replace(/^#/, "");
+  return /^[0-9a-f]{3}$/i.test(e) && (e = e.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(e) ? `#${e.toUpperCase()}` : null;
+};
+function Ka({ label: t, onInput: e }) {
+  const n = document.createElement("div");
+  n.className = "colour";
+  const a = document.createElement("div");
+  a.className = "colour-field";
+  const o = document.createElement("input");
+  o.type = "color", o.className = "colour-picker", o.tabIndex = -1, o.setAttribute("aria-hidden", "true");
+  const r = document.createElement("button");
+  r.type = "button", r.className = "colour-swatch", r.setAttribute("aria-label", `${t}: open colour picker`);
+  const s = document.createElement("input");
+  s.type = "text", s.className = "colour-hex", s.spellcheck = !1, s.maxLength = 7, s.setAttribute("aria-label", `${t} hex value`);
+  const i = document.createElement("button");
+  i.type = "button", i.className = "colour-pipette", i.innerHTML = Ha, 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 = _a.map(([f, m, x]) => {
+    const b = m ? `color-mix(in oklch, var(--brand) ${x}%, ${m})` : "var(--brand)";
+    return `<span title="${f}" style="background:${b}"></span>`;
+  }).join(""), n.append(a, l);
+  let p = "#000000";
+  const c = (f) => {
+    p = f, o.value = f.toLowerCase(), r.style.background = f, n.getRootNode().activeElement !== s && (s.value = f), n.style.setProperty("--brand", f);
+  }, h = (f) => {
+    f !== p && (c(f), e(f));
+  };
+  r.addEventListener("click", () => {
+    if (o.showPicker)
+      try {
+        o.showPicker();
+        return;
+      } catch {
+      }
+    o.click();
+  }), o.addEventListener("input", () => h(o.value.toUpperCase())), s.addEventListener("input", () => {
+    const f = tt(s.value);
+    f && h(f);
+  });
+  const y = () => {
+    s.value = p;
+  };
+  return s.addEventListener("blur", y), s.addEventListener("keydown", (f) => {
+    f.key === "Enter" && (y(), s.select());
+  }), i.addEventListener("click", async () => {
+    if ("EyeDropper" in window)
+      try {
+        const { sRGBHex: f } = await new window.EyeDropper().open(), m = tt(f);
+        m && h(m);
+      } catch {
+      }
+    else
+      r.click();
+  }), { el: n, setValue: (f) => c(tt(f) || p) };
+}
+function Ga({ label: t, options: e, onSelect: n }) {
+  const a = document.createElement("div");
+  a.className = "swatches", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", t);
+  const o = e.map((l) => {
+    const p = document.createElement("button");
+    return p.type = "button", p.className = "swatch", p.setAttribute("role", "radio"), p.dataset.value = l.value, p.innerHTML = `<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`, p.addEventListener("click", () => i(l.value)), p;
+  });
+  a.append(...o);
+  let r = null;
+  function s(l) {
+    r = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
+    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
+    o.forEach((c, h) => {
+      c.tabIndex = h === p ? 0 : -1;
+    });
   }
-}, se = 60, xo = {
+  function i(l, p) {
+    l !== r && (s(l), n(l)), p && o.find((c) => c.dataset.value === l).focus();
+  }
+  return a.addEventListener("keydown", (l) => {
+    const p = o.indexOf(l.target.closest(".swatch"));
+    if (p < 0) return;
+    const c = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    let h;
+    if (c) h = (p + c + o.length) % o.length;
+    else if (l.key === "Home") h = 0;
+    else if (l.key === "End") h = o.length - 1;
+    else return;
+    l.preventDefault(), i(o[h].dataset.value, !0);
+  }), s(null), { el: a, setValue: s };
+}
+const Wa = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => Object.fromEntries(t.split(" ").map((e, n) => [Wa[n], `#${e}`])), nt = {
+  slate: me("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
+  gray: me("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
+  zinc: me("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
+  neutral: me("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
+  stone: me("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
+}, N = (t) => Object.fromEntries(t.split(" ").map((e, n) => [400 + 100 * n, `#${e}`])), at = {
+  red: N("f87171 ef4444 dc2626 b91c1c 991b1b"),
+  orange: N("fb923c f97316 ea580c c2410c 9a3412"),
+  amber: N("fbbf24 f59e0b d97706 b45309 92400e"),
+  yellow: N("facc15 eab308 ca8a04 a16207 854d0e"),
+  lime: N("a3e635 84cc16 65a30d 4d7c0f 3f6212"),
+  green: N("4ade80 22c55e 16a34a 15803d 166534"),
+  emerald: N("34d399 10b981 059669 047857 065f46"),
+  teal: N("2dd4bf 14b8a6 0d9488 0f766e 115e59"),
+  cyan: N("22d3ee 06b6d4 0891b2 0e7490 155e75"),
+  sky: N("38bdf8 0ea5e9 0284c7 0369a1 075985"),
+  blue: N("60a5fa 3b82f6 2563eb 1d4ed8 1e40af"),
+  indigo: N("818cf8 6366f1 4f46e5 4338ca 3730a3"),
+  violet: N("a78bfa 8b5cf6 7c3aed 6d28d9 5b21b6"),
+  purple: N("c084fc a855f7 9333ea 7e22ce 6b21a8"),
+  fuchsia: N("e879f9 d946ef c026d3 a21caf 86198f"),
+  pink: N("f472b6 ec4899 db2777 be185d 9d174d"),
+  rose: N("fb7185 f43f5e e11d48 be123c 9f1239")
+}, ze = [
+  { value: "indigo-zinc", label: "Indigo · Zinc", primary: "indigo", neutral: "zinc" },
+  { value: "emerald-stone", label: "Emerald · Stone", primary: "emerald", neutral: "stone" },
+  { value: "rose-slate", label: "Rose · Slate", primary: "rose", neutral: "slate" },
+  { value: "amber-neutral", label: "Amber · Neutral", primary: "amber", neutral: "neutral" }
+], pn = "#4F46E5", Ya = "#A0743C", Za = [
+  // Figma Swatch row sample colours
+  { value: "pure", label: "Pure", colour: "#8E8E93" },
+  { value: "subtle", label: "Subtle", colour: "#8A89A6" },
+  { value: "warm", label: "Warm", colour: "#9C9389" }
+], un = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], Xa = {
+  // proposal
+  bg: "#0F0F11",
+  surface: "#18181B",
+  "surface-raised": "#1F1F23",
+  text: "#F4F4F5",
+  "text-muted": "#A1A1AA",
+  border: "#2E2E33"
+}, Ja = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, Y = (t) => /^#[0-9a-f]{6}$/i.test(t || ""), ot = (t) => [500, 600, 700].includes(Number(t.shade)) ? Number(t.shade) : 600, rt = (t) => t[0].toUpperCase() + t.slice(1);
+function hn(t) {
+  const e = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => e(parseInt(t.slice(l, l + 2), 16))), r = 0.2126 * n + 0.7152 * a + 0.0722 * o, s = 1.05 / (r + 0.05), i = (r + 0.05) / (98e-4 + 0.05);
+  return s >= i ? "#FFFFFF" : "#18181B";
+}
+const De = {
+  id: "colour",
+  title: "Colour",
+  hint: "Brand colour · neutral tint · mode",
+  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...un.map((t) => `--twd-${t}`)],
+  tokens(t) {
+    const e = t.colour || {}, n = {}, a = e.mode === "dark", o = at[e.primary];
+    if (!Y(e.brand) && o) {
+      const i = ot(e);
+      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = hn(o[i]), n["--twd-focus"] = o[500];
+    }
+    Y(e.brand) && (n["--twd-primary"] = e.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${e.brand} 85%, white)` : `color-mix(in oklch, ${e.brand} 86%, black)`, n["--twd-on-primary"] = hn(e.brand), n["--twd-focus"] = e.brand);
+    const r = e.tint === "subtle" ? Y(e.brand) ? e.brand : F("--twd-primary") || pn : e.tint === "warm" ? Ya : null, s = nt[e.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, p]) => {
+        n[`--twd-${l}`] = p;
+      });
+    } else (a || r) && un.forEach((i) => {
+      const l = a ? Xa[i] : F(`--twd-${i}`);
+      l && (n[`--twd-${i}`] = r ? `color-mix(in oklch, ${l} ${100 - Ja[i]}%, ${r})` : l);
+    });
+    return n;
+  },
+  parts: {
+    // ---- Tabbed layout (Colour tab): themes, then Tailwind fine-tuning ----
+    themeTiles(t, e, { label: n = "Theme" } = {}) {
+      const a = (o) => {
+        const r = nt[o.neutral], s = at[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>`;
+      };
+      t.append(V(e, {
+        section: "colour",
+        key: "theme",
+        label: n,
+        columns: 2,
+        className: "tiles-themes",
+        options: ze.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
+        current: (o) => {
+          const r = o.colour || {};
+          return Y(r.brand) ? null : ze.find((s) => s.primary === r.primary && s.neutral === r.neutral)?.value || null;
+        },
+        select: (o) => {
+          const r = ze.find((s) => s.value === o);
+          e.setSection("colour", { primary: r.primary, neutral: r.neutral, shade: null, brand: null, tint: null });
+        },
+        valueText: (o, r) => {
+          const s = r.colour || {};
+          return o ? "" : s.primary || s.neutral || s.brand ? "Custom" : "Prototype colours";
+        }
+      }));
+    },
+    primary(t, e, { label: n = "Primary" } = {}) {
+      const a = B(n), o = V(e, {
+        section: "colour",
+        key: "primary",
+        label: `${n} colour family`,
+        columns: 9,
+        className: "tiles-swatches",
+        options: Object.entries(at).map(([i, l]) => ({ value: i, label: rt(i), title: rt(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
+        current: (i) => {
+          const l = i.colour || {};
+          return Y(l.brand) ? null : l.primary || null;
+        },
+        select: (i) => e.setSection("colour", { primary: i, brand: null })
+      });
+      o.querySelector(".field-head").remove();
+      const r = re({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => e.setSection("colour", { shade: Number(i) }) });
+      a.append(o, r.el);
+      const s = () => {
+        const i = e.getState().colour || {};
+        r.setValue(String(ot(i))), a.setValue(Y(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${ot(i)}` : "");
+      };
+      s(), e.onChange(s), t.append(a.el);
+    },
+    neutralTiles(t, e, { label: n = "Neutral" } = {}) {
+      t.append(V(e, {
+        section: "colour",
+        key: "neutral",
+        label: n,
+        columns: 5,
+        className: "tiles-greys",
+        options: Object.entries(nt).map(([a, o]) => ({ value: a, label: rt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((r) => `<i style="background:${r}"></i>`).join("")}</span>` })),
+        select: (a) => e.setSection("colour", { neutral: a, tint: null }),
+        valueText: (a) => a || ""
+      }));
+    },
+    custom(t, e) {
+      const n = document.createElement("details");
+      n.className = "more more-custom", n.innerHTML = '<summary><span class="rainbow" aria-hidden="true"></span><span>Custom colour…</span><span class="muted">any hex</span></summary>';
+      const a = document.createElement("div");
+      a.className = "more-body", n.append(a), De.parts.brand(a, e, { label: "Brand" }), Y((e.getState().colour || {}).brand) && (n.open = !0), t.append(n);
+    },
+    brand(t, e, { label: n = "Brand" } = {}) {
+      const a = B(n), o = Ka({ label: "Brand colour", onInput: (s) => e.setSection("colour", { brand: s }) });
+      a.append(o.el);
+      const r = () => o.setValue((e.getState().colour || {}).brand || (e.readToken || F)("--twd-primary") || pn);
+      r(), e.onChange(r), t.append(a.el);
+    },
+    neutral(t, e, { label: n = "Neutral" } = {}) {
+      const a = B(n), o = Ga({ label: "Neutral tint", options: Za, onSelect: (s) => e.setSection("colour", { tint: s }) });
+      a.append(o.el);
+      const r = () => o.setValue((e.getState().colour || {}).tint || "pure");
+      r(), e.onChange(r), t.append(a.el);
+    },
+    mode(t, e, { label: n = "Mode" } = {}) {
+      t.append(ke(e, {
+        section: "colour",
+        key: "mode",
+        label: n,
+        fallback: "light",
+        options: [{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]
+      }));
+    }
+  },
+  render(t, e) {
+    ["brand", "neutral", "mode"].forEach((n) => this.parts[n](t, e));
+  }
+}, Le = (t, e = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`, Qa = {
+  // proposal recipes; Solid leaves tokens.css defaults
+  soft: { bg: Le(14), fg: "var(--twd-primary)", border: "transparent", hover: Le(22) },
+  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Le(8, "transparent") },
+  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Le(10, "transparent") }
+}, eo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, Dn = zn({
+  id: "buttons",
+  title: "Buttons",
+  hint: "Style · corners · size",
+  token: "--twd-radius-control",
+  shape: "button",
+  // tile previews: a filled button
+  uses: ["--twd-control-height", "--twd-control-pad-x", "--twd-button-bg", "--twd-button-fg", "--twd-button-border", "--twd-button-hover"],
+  max: 24,
+  // slider range in px; "Pill" sits at the end and reads "full"
+  presets: [
+    { value: "square", label: "Square", radius: 0 },
+    // proposal
+    { value: "soft", label: "Soft", radius: 4 },
+    // proposal
+    { value: "rounded", label: "Rounded", radius: 8 },
+    // Figma: "8px"
+    { value: "pill", label: "Pill", radius: 999 }
+  ],
+  extraTokens(t) {
+    const e = {}, n = Qa[t.style];
+    n && Object.entries(n).forEach(([s, i]) => {
+      e[`--twd-button-${s}`] = i;
+    });
+    const a = eo[t.size];
+    if (!a) return e;
+    const o = ye(F("--twd-control-height"), a.height), r = ye(F("--twd-control-pad-x"), a.pad);
+    return o && (e["--twd-control-height"] = o), r && (e["--twd-control-pad-x"] = r), e;
+  },
+  extra: [
+    {
+      key: "style",
+      label: "Style",
+      fallback: "solid",
+      columns: 4,
+      preview: (t) => `<span class="shape shape-button style-${t}"></span>`,
+      options: [{ value: "solid", label: "Solid" }, { value: "soft", label: "Soft" }, { value: "outline", label: "Outline" }, { value: "ghost", label: "Ghost" }]
+    },
+    {
+      key: "size",
+      label: "Size",
+      fallback: "medium",
+      preview: (t) => `<span class="shape shape-button size-${t}"></span>`,
+      options: [{ value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }]
+    }
+  ]
+}), to = {
+  // 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" }
+}, wt = zn({
+  id: "cards",
+  title: "Cards",
+  hint: "Style · corners · border",
+  token: "--twd-radius-container",
+  shape: "card",
+  // tile previews: an outlined card
+  uses: ["--twd-border-width-container", "--twd-card-bg", "--twd-card-border", "--twd-card-shadow"],
+  max: 32,
+  presets: [
+    { value: "square", label: "Square", radius: 0 },
+    // proposal
+    { value: "soft", label: "Soft", radius: 6 },
+    // proposal
+    { value: "rounded", label: "Rounded", radius: 12 },
+    // = tokens.css default
+    { value: "large", label: "Large", radius: 20 }
+    // proposal (cards don't go fully pill)
+  ],
+  extraTokens(t) {
+    const e = {}, n = to[t.style];
+    if (n && Object.entries(n).forEach(([a, o]) => {
+      e[`--twd-card-${a}`] = o;
+    }), t.border === "none" && (e["--twd-border-width-container"] = "0px"), t.border === "thick") {
+      const a = ye(F("--twd-border-width-container"), 2);
+      a && (e["--twd-border-width-container"] = a);
+    }
+    return e;
+  },
+  extra: [
+    {
+      key: "style",
+      label: "Style",
+      fallback: "filled",
+      columns: 4,
+      preview: (t) => `<span class="shape shape-card style-${t}"></span>`,
+      options: [{ value: "filled", label: "Filled" }, { value: "outlined", label: "Outlined" }, { value: "elevated", label: "Elevated" }, { value: "tinted", label: "Tinted" }]
+    },
+    {
+      key: "border",
+      label: "Border",
+      fallback: "thin",
+      preview: (t) => `<span class="shape shape-card border-${t}"></span>`,
+      options: [{ value: "none", label: "None" }, { value: "thin", label: "Thin" }, { value: "thick", label: "Thick" }]
+    }
+  ]
+}), ne = 60, st = {
   soft: { sm: [0, 1, 2, 0, 0.06], md: [0, 4, 12, 0, 0.08], lg: [0, 12, 32, 0, 0.12] },
   // = tokens.css
   crisp: { sm: [0, 1, 1, 0, 0.12], md: [0, 2, 4, 0, 0.14], lg: [0, 4, 8, 0, 0.16] },
   bold: { sm: [2, 2, 0, 0, 0.85], md: [3, 3, 0, 0, 0.85], lg: [5, 5, 0, 0, 0.85] }
-}, ze = ([t, e, n, o, a], s) => {
-  const r = Math.min(1, +(a * s).toFixed(3));
-  return r <= 0 ? "none" : `${t}px ${e}px ${n}px ${o}px rgb(0 0 0 / ${r})`;
-}, wo = {
+}, Pe = ([t, e, n, a, o], r) => {
+  const s = Math.min(1, +(o * r).toFixed(3));
+  return s <= 0 ? "none" : `${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${s})`;
+}, vt = {
   id: "depth",
   title: "Depth",
   hint: "Flat · soft · crisp · bold",
   uses: ["--twd-shadow-sm", "--twd-shadow-md", "--twd-shadow-lg"],
   tokens(t) {
-    const e = t.depth || {}, n = e.style || "soft", o = typeof e.intensity == "number" ? Math.min(100, Math.max(0, e.intensity)) : se;
+    const e = t.depth || {}, n = e.style || "soft", a = typeof e.intensity == "number" ? Math.min(100, Math.max(0, e.intensity)) : ne;
     if (n === "flat")
       return { "--twd-shadow-sm": "none", "--twd-shadow-md": "none", "--twd-shadow-lg": "none" };
-    const a = xo[n];
-    if (!a) return {};
-    if (n === "soft" && o === se) return {};
-    const s = o / se;
+    const o = st[n];
+    if (!o) return {};
+    if (n === "soft" && a === ne) return {};
+    const r = a / ne;
     return {
-      "--twd-shadow-sm": ze(a.sm, s),
-      "--twd-shadow-md": ze(a.md, s),
-      "--twd-shadow-lg": ze(a.lg, s)
+      "--twd-shadow-sm": Pe(o.sm, r),
+      "--twd-shadow-md": Pe(o.md, r),
+      "--twd-shadow-lg": Pe(o.lg, r)
     };
   },
   parts: {
+    // Tabbed layout: each style as a small card wearing that shadow.
+    styleTiles(t, e, { label: n = "Style" } = {}) {
+      const a = (o) => `<span class="shape shape-card shadow-${o}" style="box-shadow:${st[o] ? Pe(st[o].md, 1) : "none"}"></span>`;
+      t.append(V(e, {
+        section: "depth",
+        key: "style",
+        label: n,
+        fallback: "soft",
+        columns: 4,
+        options: ["flat", "soft", "crisp", "bold"].map((o) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(o) }))
+      }));
+    },
     style(t, e, { label: n = "Style" } = {}) {
-      t.append(le(e, {
+      t.append(ke(e, {
         section: "depth",
         key: "style",
         label: n,
@@ -1423,208 +2021,431 @@ const Dt = (t) => `${Math.round(t * 100)}%`, bo = {
       }));
     },
     intensity(t, e, { label: n = "Intensity" } = {}) {
-      t.append(po(e, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: se, format: (o) => `${o}%` }));
+      t.append(Ia(e, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: ne, format: (a) => `${a}%` }));
     }
   },
   render(t, e) {
-    Object.values(this.parts).forEach((n) => n(t, e));
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
   }
-}, [Bt, xe] = Je, Ut = { square: "square", soft: "soft", rounded: "rounded", pill: "large" };
-function vo(t) {
-  return t > 1.06 ? "Comfy" : t < 0.94 ? "Compact" : "Regular";
+}, no = (t) => Math.min(1, Math.max(0, t)), fn = (t) => Math.round(t / 50) * 50, it = (t) => `${+t.toFixed(1)}%`;
+function $t(t = {}) {
+  return typeof t.bold == "number" && isFinite(t.bold) && t.bold !== 0.5 ? no(t.bold) : null;
 }
-const yo = {
-  character(t, e, { label: n = "Character" } = {}) {
-    const o = B(n), a = lo({
-      label: n,
-      ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
-      onInput: (r, d) => {
-        const l = +(xe - d * (xe - Bt)).toFixed(3), c = { intensity: Math.round(r * 100) };
-        (e.getState().depth || {}).style === "flat" && (c.style = null), e.setSections({ density: { factor: l === 1 ? null : l, spacing: null }, depth: c }, "character");
-      }
-    });
-    o.append(a.el);
-    const s = () => {
-      const r = e.getState(), d = Ze(r.density), l = r.depth || {}, c = l.style === "flat" ? 0 : typeof l.intensity == "number" ? l.intensity : se, p = `${vo(d)} · ${c}%`;
-      a.setValue(c / 100, (xe - d) / (xe - Bt), p), o.setValue(p);
-    };
-    s(), e.onChange(s), t.append(o.el);
-  },
-  corners(t, e, { label: n = "Corners", buttons: o, cards: a }) {
-    const s = B(n), r = X({
-      label: n,
-      options: o.presets.map((c) => ({ value: c.value, label: c.label })),
-      onSelect: (c) => e.setSections({
-        buttons: { corners: c, radius: null },
-        cards: { corners: Ut[c], radius: null }
-      })
-    });
-    s.append(r.el);
-    const d = (c, p, m) => {
-      if (p.radius != null) return null;
-      if (p.corners) return p.corners;
-      const v = parseFloat(F(m));
-      return c.presets.find((f) => f.radius === v)?.value || null;
-    }, l = () => {
-      const c = e.getState(), p = d(o, c.buttons || {}, "--twd-radius-control"), m = d(a, c.cards || {}, "--twd-radius-container");
-      r.setValue(p && Ut[p] === m ? p : null);
-      const v = (b) => {
-        const g = parseFloat(F(b));
-        return isNaN(g) ? "" : g >= 999 ? "full" : `${g}px`;
-      }, f = v("--twd-radius-control"), x = v("--twd-radius-container");
-      s.setValue(f && x ? `${f} · ${x}` : "");
-    };
-    l(), e.onChange(l), t.append(s.el);
-  }
-}, Ie = [
-  { key: "page-pad", label: "Page padding", step: 5 },
-  { key: "section-gap", label: "Section gap", step: 6 },
-  { key: "card-pad", label: "Card padding", step: 5 },
-  { key: "card-gap", label: "Card gap", step: 2 },
-  { key: "control-gap", label: "Control gap", step: 3 },
-  { key: "control-pad-x", label: "Control padding", step: null }
-], ko = [1, 2, 3, 4, 5, 6, 7, 8], So = /^var\(\s*--twd-space-(\d)\s*\)$/, De = (t) => {
-  const e = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
-  return e ? +(parseFloat(e[1]) * (e[2] === "rem" ? 16 : 1)).toFixed(1) : null;
-};
-function Eo(t, e, n) {
-  const o = `--twd-${e.key}`, a = document.createElement("div");
-  a.className = "role-row", n || a.classList.add("unused"), a.innerHTML = `
-    <span class="role-label" title="${o}${n ? "" : " (not used on this page)"}">${e.label}</span>
-    <label class="token-value role-fixed" hidden><input type="text" inputmode="decimal" spellcheck="false" aria-label="${e.label}, fixed value"><span class="token-unit">px</span></label>
-    <span class="step-select">
-      <select aria-label="${e.label}"></select>
-      <span class="step-chevron" aria-hidden="true">${M.down}</span>
-    </span>
-    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${e.label}" hidden>${M.reset}</button>
-  `;
-  const s = a.querySelector("select"), r = a.querySelector(".role-fixed"), d = r.querySelector("input"), l = a.querySelector(".token-reset"), c = () => (t.getState().custom || {})[e.key], p = () => {
-    const b = c();
-    if (b == null) return e.step ? { step: e.step } : { fixed: F(o) };
-    const g = So.exec(b);
-    return g ? { step: +g[1] } : { fixed: b };
-  }, m = (b) => t.setSection("custom", { [e.key]: b }), v = (b) => e.step ? b === `var(--twd-space-${e.step})` : !1;
-  s.addEventListener("change", () => {
-    if (s.value === "fixed") {
-      const g = De(F(o));
-      m(g != null ? `${g}px` : F(o)), d.focus(), d.select();
-      return;
+const Oe = (t, e, n) => (t.tokens(e) || {})[n] || F(n), ao = {
+  id: "character",
+  title: "Character",
+  hint: "Subtle ↔ Bold",
+  uses: [],
+  // set from the Simple page only
+  tokens(t) {
+    const e = $t(t.character);
+    if (e === null) return {};
+    const n = {}, a = 2 * e - 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));
+    const s = Oe(De, t, "--twd-border");
+    if (r && (n["--twd-border"] = `color-mix(in oklch, ${s} ${it(100 - 50 * r)}, var(--twd-bg))`), o) {
+      n["--twd-border"] = `color-mix(in oklch, ${s} ${it(100 - 90 * o)}, var(--twd-text))`;
+      const l = Oe(De, t, "--twd-text-muted");
+      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${it(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((p) => {
+        const c = p === "--twd-border-width-container" ? Oe(wt, t, p) : F(p), h = parseFloat(c);
+        isNaN(h) || (n[p] = `${Math.round(h * (1 + o))}px`);
+      }), [[Dn, "--twd-radius-control"], [wt, "--twd-radius-container"]].forEach(([p, c]) => {
+        const h = parseFloat(Oe(p, t, c));
+        !isNaN(h) && h < 999 && (n[c] = ye(`${h}px`, 1 - 0.5 * o));
+      });
     }
-    const b = `var(--twd-space-${s.value})`;
-    m(v(b) ? null : b);
-  });
-  const f = () => {
-    const b = d.value.trim();
-    if (!b) return m(null);
-    m(/^-?\d*\.?\d+$/.test(b) ? `${b}px` : b);
-  };
-  d.addEventListener("change", f), d.addEventListener("blur", () => x()), d.addEventListener("keydown", (b) => {
-    b.key === "Enter" && (b.preventDefault(), d.blur()), b.key === "Escape" && (b.stopPropagation(), x(), d.blur());
-  }), l.addEventListener("click", () => m(null));
-  function x() {
-    const b = p();
-    if (s.innerHTML = ko.map((u) => `<option value="${u}">space-${u} · ${De(F(`--twd-space-${u}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', s.value = b.step ? String(b.step) : "fixed", r.hidden = !b.fixed, a.classList.toggle("is-fixed", !!b.fixed), b.fixed && a.getRootNode().activeElement !== d) {
-      const u = De(b.fixed);
-      d.value = u != null ? String(u) : b.fixed;
+    const i = t.depth || {};
+    if (!i.style) {
+      const l = typeof i.intensity == "number" ? i.intensity : ne, p = r ? vt.tokens({ depth: { style: "soft", intensity: l * (1 - r) } }) : vt.tokens({ depth: { style: "bold", intensity: ne * o } });
+      Object.assign(n, p);
     }
-    const g = c() != null;
-    a.classList.toggle("edited", g), l.hidden = !g;
+    return n;
+  },
+  describe: (t, e) => t === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(e * 100)}%` } : null
+}, oo = '<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>', ro = '<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 so = 0;
+function io({ label: t, options: e, onSelect: n, placeholder: a, onOpen: o }) {
+  const r = `twd-fonts-${++so}`, s = document.createElement("div");
+  s.className = "font-select";
+  const i = document.createElement("button");
+  i.type = "button", i.className = "font-trigger", i.setAttribute("aria-haspopup", "listbox"), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-controls", r), i.innerHTML = `
+    <span class="font-aa" aria-hidden="true">Aa</span>
+    <span class="font-name"></span>
+    <span class="font-fonts"></span>
+    <span class="font-chevron">${oo}</span>`;
+  const l = document.createElement("div");
+  l.className = "font-menu", l.id = r, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", t), l.hidden = !0;
+  const p = e.map((u) => {
+    const v = document.createElement("div");
+    return v.className = "font-option", v.setAttribute("role", "option"), v.tabIndex = -1, v.dataset.value = u.value, v.innerHTML = `
+      <span class="font-aa" style="font-family:${u.preview}" aria-hidden="true">Aa</span>
+      <span class="font-text"><span class="font-name">${u.name}</span><span class="font-fonts">${u.fonts}</span></span>
+      <span class="font-check">${ro}</span>`, v.addEventListener("click", () => b(u.value)), v;
+  });
+  l.append(...p), s.append(i, l);
+  let c = null;
+  function h(u) {
+    const v = e.find((E) => E.value === u), L = v || a || e[0];
+    c = v ? v.value : a ? null : e[0].value, i.querySelector(".font-name").textContent = L.name, i.querySelector(".font-fonts").textContent = L.fonts, i.querySelector(".font-aa").style.fontFamily = L.preview, i.setAttribute("aria-label", `${t}: ${L.name}, ${L.fonts}`), p.forEach((E) => E.setAttribute("aria-selected", String(E.dataset.value === c)));
   }
-  return x(), t.onChange(x), a;
+  function y() {
+    const u = i.getBoundingClientRect(), v = l.offsetHeight, E = window.innerHeight - u.bottom - 8 >= v ? u.bottom + 4 : Math.max(8, u.top - 4 - v);
+    l.style.top = `${E}px`, l.style.left = `${u.left}px`, l.style.width = `${u.width}px`;
+  }
+  function f() {
+    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), y(), (p.find((u) => u.dataset.value === c) || p[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", m), s.closest(".body")?.addEventListener("scroll", m, { once: !0 }));
+  }
+  function m(u) {
+    l.hidden || (l.hidden = !0, i.setAttribute("aria-expanded", "false"), document.removeEventListener("pointerdown", x, !0), window.removeEventListener("resize", m), u === !0 && i.focus());
+  }
+  function x(u) {
+    u.composedPath().includes(s) || m();
+  }
+  function b(u) {
+    u !== c && (h(u), n(u)), m(!0);
+  }
+  return i.addEventListener("click", () => l.hidden ? f() : m(!0)), i.addEventListener("keydown", (u) => {
+    (u.key === "ArrowDown" || u.key === "ArrowUp") && (u.preventDefault(), f());
+  }), l.addEventListener("keydown", (u) => {
+    const v = p.indexOf(u.target);
+    let L = null;
+    if (u.key === "ArrowDown") L = Math.min(p.length - 1, v + 1);
+    else if (u.key === "ArrowUp") L = Math.max(0, v - 1);
+    else if (u.key === "Home") L = 0;
+    else if (u.key === "End") L = p.length - 1;
+    else if (u.key === "Enter" || u.key === " ") {
+      u.preventDefault(), b(u.target.dataset.value);
+      return;
+    } else if (u.key === "Escape") {
+      u.preventDefault(), u.stopPropagation(), m(!0);
+      return;
+    } else if (u.key === "Tab") {
+      m();
+      return;
+    }
+    L !== null && (u.preventDefault(), p[L].focus());
+  }), h(a ? null : e[0].value), { el: s, setValue: h };
+}
+const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', Fe = 'Georgia, "Times New Roman", serif', Z = [
+  { value: "neutral", name: "Neutral", fonts: "Inter · Inter", heading: `"Inter", ${I}`, body: `"Inter", ${I}`, load: ["Inter:wght@400;500;600;700"] },
+  { value: "modern", name: "Modern", fonts: "Geist · Geist", heading: `"Geist", ${I}`, body: `"Geist", ${I}`, load: ["Geist:wght@400;500;600;700"] },
+  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${Fe}`, body: `"Inter", ${I}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
+  { value: "technical", name: "Technical", fonts: "Space Grotesk · DM Sans", heading: `"Space Grotesk", ${I}`, body: `"DM Sans", ${I}`, load: ["Space+Grotesk:wght@500;600;700", "DM+Sans:wght@400;500;600;700"] },
+  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${Fe}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
+  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${Fe}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
+  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${Fe}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
+  { value: "friendly", name: "Friendly", fonts: "Manrope · Manrope", heading: `"Manrope", ${I}`, body: `"Manrope", ${I}`, load: ["Manrope:wght@400;500;600;700"] }
+], be = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, gn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, mn = /* @__PURE__ */ new Set();
+function lt(t) {
+  const e = t.filter((a) => !mn.has(a));
+  if (!e.length) return;
+  e.forEach((a) => mn.add(a));
+  const n = document.createElement("link");
+  n.rel = "stylesheet", n.href = `https://fonts.googleapis.com/css2?${e.map((a) => `family=${a}`).join("&")}&display=swap`, n.dataset.twiddle = "fonts", document.head.appendChild(n);
+}
+const lo = {
+  id: "typography",
+  title: "Typography",
+  hint: "Font pairing · base size · scale",
+  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(gn).map((t) => `--twd-text-${t}`)],
+  tokens(t) {
+    const e = t.typography || {}, n = {}, a = Z.find((o) => o.value === e.font);
+    if (a && (lt(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), e.base || e.scale) {
+      const o = Number(e.base) || 16, r = be[e.scale] || be.balanced;
+      Object.entries(gn).forEach(([s, i]) => {
+        n[`--twd-text-${s}`] = `${+(o * r ** i / 16).toFixed(3)}rem`;
+      });
+    }
+    return n;
+  },
+  parts: {
+    fonts(t, e, { label: n = "Fonts" } = {}) {
+      const a = B(n), o = io({
+        label: "Font pairing",
+        options: Z.map((s) => ({ value: s.value, name: s.name, fonts: s.fonts, preview: s.heading })),
+        placeholder: { name: "Default", fonts: "Prototype fonts", preview: I },
+        // Load every pairing's fonts when the list opens, so the "Aa" previews are real.
+        onOpen: () => lt([...new Set(Z.flatMap((s) => s.load))]),
+        onSelect: (s) => e.setSection("typography", { font: s })
+      });
+      a.append(o.el);
+      const r = () => o.setValue((e.getState().typography || {}).font || null);
+      r(), e.onChange(r), t.append(a.el);
+    },
+    base(t, e, { label: n = "Base size" } = {}) {
+      t.append(ke(e, {
+        section: "typography",
+        key: "base",
+        label: n,
+        fallback: "16",
+        options: ["14", "15", "16"].map((a) => ({ value: a, label: a })),
+        valueText: (a) => `${a}px`
+      }));
+    },
+    // Tabbed layout: pairings as tiles, each "Aa" in its own heading font.
+    // The fonts load (from Google Fonts) only once the tiles are on screen.
+    fontTiles(t, e, { label: n = "Fonts" } = {}) {
+      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, r = V(e, {
+        section: "typography",
+        key: "font",
+        label: n,
+        columns: 2,
+        className: "tiles-fonts",
+        options: [
+          { value: "default", label: "Prototype fonts", sub: "Default", preview: o(I), wide: !0 },
+          ...Z.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
+        ],
+        current: (i) => (i.typography || {}).font || "default",
+        select: (i) => e.setSection("typography", { font: i === "default" ? null : i }),
+        valueText: (i) => i === "default" ? "Default" : Z.find((l) => l.value === i)?.name || ""
+      }), s = new IntersectionObserver((i) => {
+        i.some((l) => l.isIntersecting) && (lt([...new Set(Z.flatMap((l) => l.load))]), s.disconnect());
+      });
+      s.observe(r), t.append(r);
+    },
+    scaleTiles(t, e, { label: n = "Scale" } = {}) {
+      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((r) => `<b style="font-size:${Math.round(13 * o ** r)}px">A</b>`).join("")}</span>`;
+      t.append(V(e, {
+        section: "typography",
+        key: "scale",
+        label: n,
+        fallback: "balanced",
+        options: Object.entries(be).map(([o, r]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(r) })),
+        valueText: (o) => String(be[o])
+      }));
+    },
+    scale(t, e, { label: n = "Scale" } = {}) {
+      t.append(ke(e, {
+        section: "typography",
+        key: "scale",
+        label: n,
+        fallback: "balanced",
+        options: [{ value: "compact", label: "Compact" }, { value: "balanced", label: "Balanced" }, { value: "expressive", label: "Expressive" }],
+        valueText: (a) => String(be[a])
+      }));
+    }
+  },
+  render(t, e) {
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
+  }
+}, [bn, Ne] = xt;
+function co(t) {
+  return t > 0.56 ? "Bold" : t < 0.44 ? "Subtle" : "Balanced";
+}
+function Bn(t) {
+  return t > 1.06 ? "Comfy" : t < 0.94 ? "Compact" : "Regular";
 }
-const $o = {
+const je = (t) => t && t[0].toUpperCase() + t.slice(1), xn = [
+  ["colour", "Colour", (t) => {
+    const e = t.colour || {}, n = ze.find((o) => o.primary === e.primary && o.neutral === e.neutral);
+    return { text: `${e.brand ? e.brand.toUpperCase() : n && !e.shade ? n.label : e.primary ? `${je(e.primary)}${e.neutral ? ` · ${je(e.neutral)}` : ""}` : "Prototype colours"}${e.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
+  }],
+  ["type", "Type", (t) => {
+    const e = t.typography || {};
+    return { text: `${Z.find((n) => n.value === e.font)?.name || "Prototype fonts"} · ${e.base || 16}px` };
+  }],
+  ["spacing", "Spacing", (t) => ({ text: Bn(te(t.density)) })],
+  ["shape", "Shape", (t) => ({ text: `${je((t.buttons || {}).corners) || "Default"} corners` })],
+  ["shadows", "Shadows", (t) => ({ text: je((t.depth || {}).style) || ($t(t.character) !== null ? "From the pad" : "Default") })]
+], po = {
+  summary(t, e, { label: n = "Current look", goTab: a } = {}) {
+    const o = B(n), r = document.createElement("div");
+    r.className = "summary", xn.forEach(([i, l]) => {
+      const p = document.createElement("button");
+      p.type = "button", p.className = "summary-row", p.dataset.summary = i, p.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>`, p.querySelector(".summary-name").textContent = l, p.addEventListener("click", () => a && a(i)), r.append(p);
+    }), o.append(r);
+    const s = () => {
+      const i = e.getState();
+      xn.forEach(([l, , p]) => {
+        const c = r.querySelector(`[data-summary="${l}"]`), h = p(i);
+        c.querySelector(".summary-value").textContent = h.text;
+        const y = c.querySelector(".summary-swatch");
+        y.hidden = !h.swatch, h.swatch && (y.style.background = h.swatch);
+      });
+    };
+    s(), e.onChange(s), t.append(o.el);
+  },
+  character(t, e, { label: n = "Character" } = {}) {
+    const a = B(n), o = ja({
+      label: n,
+      ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
+      onInput: (s, i) => {
+        const l = +(Ne - i * (Ne - bn)).toFixed(3), p = +s.toFixed(3);
+        e.setSections({
+          density: { factor: l === 1 ? null : l, spacing: null },
+          character: { bold: p === 0.5 ? null : p }
+        }, "character");
+      }
+    });
+    a.append(o.el);
+    const r = () => {
+      const s = e.getState(), i = te(s.density), l = $t(s.character), p = l === null ? 0.5 : l, c = `${Bn(i)} · ${co(p)}`;
+      o.setValue(p, (Ne - i) / (Ne - bn), c), a.setValue(c);
+    };
+    r(), e.onChange(r), t.append(a.el);
+  }
+}, dt = [
+  { key: "page-pad", label: "Page padding", step: 5 },
+  { key: "section-gap", label: "Section gap", step: 6 },
+  { key: "card-pad", label: "Card padding", step: 5 },
+  { key: "card-gap", label: "Card gap", step: 2 },
+  { key: "control-gap", label: "Control gap", step: 3 },
+  { key: "control-pad-x", label: "Control padding", step: null }
+], uo = [1, 2, 3, 4, 5, 6, 7, 8], ho = /^var\(\s*--twd-space-(\d)\s*\)$/, ct = (t) => {
+  const e = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
+  return e ? +(parseFloat(e[1]) * (e[2] === "rem" ? 16 : 1)).toFixed(1) : null;
+};
+function fo(t, e, n) {
+  const a = `--twd-${e.key}`, o = document.createElement("div");
+  o.className = "role-row", n || o.classList.add("unused"), o.innerHTML = `
+    <span class="role-label" title="${a}${n ? "" : " (not used on this page)"}">${e.label}</span>
+    <label class="token-value role-fixed" hidden><input type="text" inputmode="decimal" spellcheck="false" aria-label="${e.label}, fixed value"><span class="token-unit">px</span></label>
+    <span class="step-select">
+      <select aria-label="${e.label}"></select>
+      <span class="step-chevron" aria-hidden="true">${A.down}</span>
+    </span>
+    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${e.label}" hidden>${A.reset}</button>
+  `;
+  const r = o.querySelector("select"), s = o.querySelector(".role-fixed"), i = s.querySelector("input"), l = o.querySelector(".token-reset"), p = () => (t.getState().custom || {})[e.key], c = () => {
+    const x = p();
+    if (x == null) return e.step ? { step: e.step } : { fixed: F(a) };
+    const b = ho.exec(x);
+    return b ? { step: +b[1] } : { fixed: x };
+  }, h = (x) => t.setSection("custom", { [e.key]: x }), y = (x) => e.step ? x === `var(--twd-space-${e.step})` : !1;
+  r.addEventListener("change", () => {
+    if (r.value === "fixed") {
+      const b = ct(F(a));
+      h(b != null ? `${b}px` : F(a)), i.focus(), i.select();
+      return;
+    }
+    const x = `var(--twd-space-${r.value})`;
+    h(y(x) ? null : x);
+  });
+  const f = () => {
+    const x = i.value.trim();
+    if (!x) return h(null);
+    h(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
+  };
+  i.addEventListener("change", f), 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", () => h(null));
+  function m() {
+    const x = c();
+    if (r.innerHTML = uo.map((u) => `<option value="${u}">space-${u} · ${ct(F(`--twd-space-${u}`)) ?? "?"}</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 u = ct(x.fixed);
+      i.value = u != null ? String(u) : x.fixed;
+    }
+    const b = p() != null;
+    o.classList.toggle("edited", b), l.hidden = !b;
+  }
+  return m(), t.onChange(m), o;
+}
+const go = {
   spacing(t, e, { label: n = "Roles" } = {}) {
-    const o = so(), a = B(n);
-    a.el.classList.add("token-field");
-    const s = Ie.filter((l) => !o.has(`--twd-${l.key}`));
-    a.setValue(s.length === Ie.length ? "not used on this page" : "");
-    const r = document.createElement("div");
-    r.className = "token-rows", Ie.forEach((l) => r.append(Eo(e, l, o.has(`--twd-${l.key}`)))), a.append(r), t.append(a.el);
-    const d = document.createElement("p");
-    d.className = "role-note", d.textContent = s.length ? `Only elements styled with these tokens change. Not used on this page: ${s.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", t.append(d);
-  }
-}, Co = [
-  ["simple", "character"],
-  // first, by Ravi's call (2026-10-13); the A1b mock has it last
-  ["typography", "fonts"],
-  ["colour", "brand"],
-  ["colour", "neutral"],
-  ["colour", "mode"],
-  "warnings",
-  ["simple", "corners"]
-], we = [
-  { id: "fonts", title: "Fonts", parts: [["typography", "fonts"], ["custom", "fonts"]] },
-  { id: "type", title: "Type scale", parts: [["typography", "base"], ["typography", "scale"], ["custom", "type"], ["custom", "leading"]] },
-  { id: "colours", title: "Colours", parts: [["colour", "brand"], ["colour", "neutral"], ["colour", "mode"], "warnings", ["custom", "colours"]] },
-  { id: "spacing", title: "Spacing", parts: [{ tabs: [
-    { label: "Scale", parts: [["density", "spacing"], ["custom", "spacing"], ["buttons", "size", { label: "Control size" }], ["custom", "controls"]] },
-    { label: "Roles", parts: [["roles", "spacing"]] }
-  ] }] },
-  { id: "corners", title: "Corners", parts: [["buttons", "corners", { label: "Buttons" }], ["cards", "corners", { label: "Cards" }], ["custom", "corners"]] },
-  { id: "borders", title: "Borders", parts: [["cards", "border", { label: "Cards" }], ["custom", "borders"]] },
-  { id: "shadows", title: "Shadows", parts: [["depth", "style"], ["depth", "intensity"], ["custom", "shadows"]] }
-], A = (t) => String(t).replace(/[&<>"]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[e]);
-function Mo({ sections: t, store: e, view: n }) {
-  const o = document.createElement("div");
-  o.id = "twiddle-root", document.body.appendChild(o);
-  const a = o.attachShadow({ mode: "open" }), s = (i) => i.map((h) => `
-    <details data-section="${h.id}">
-      <summary>${h.title}<span class="chev">${M.chevron}</span></summary>
-      <div class="section-body"><div class="placeholder">${h.hint}</div></div>
+    const a = Fa(), o = B(n);
+    o.el.classList.add("token-field");
+    const r = dt.filter((l) => !a.has(`--twd-${l.key}`));
+    o.setValue(r.length === dt.length ? "not used on this page" : "");
+    const s = document.createElement("div");
+    s.className = "token-rows", dt.forEach((l) => s.append(fo(e, l, a.has(`--twd-${l.key}`)))), o.append(s), t.append(o.el);
+    const i = document.createElement("p");
+    i.className = "role-note", i.textContent = r.length ? `Only elements styled with these tokens change. Not used on this page: ${r.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", t.append(i);
+  }
+}, xe = [
+  { id: "overview", title: "Overview", icon: "tabOverview", parts: [["simple", "character"], ["simple", "summary"]] },
+  { id: "colour", title: "Colour", icon: "tabColour", parts: [
+    ["colour", "themeTiles"],
+    { heading: "Fine-tune", note: "Tailwind palette" },
+    ["colour", "primary"],
+    ["colour", "neutralTiles"],
+    ["colour", "custom"],
+    ["colour", "mode"],
+    "warnings",
+    { more: "Colour tokens", parts: [["custom", "colours"]] }
+  ] },
+  { id: "type", title: "Type", icon: "tabType", parts: [
+    ["typography", "fontTiles"],
+    ["typography", "base"],
+    ["typography", "scaleTiles"],
+    { more: "Type tokens", parts: [["custom", "fonts"], ["custom", "type"], ["custom", "leading"], ["custom", "weights"]] }
+  ] },
+  { id: "spacing", title: "Spacing", icon: "tabSpacing", parts: [
+    ["density", "spacingTiles"],
+    { more: "Layout roles", parts: [["roles", "spacing"]] },
+    { more: "Spacing tokens", parts: [["custom", "spacing"]] }
+  ] },
+  { id: "shape", title: "Shape", icon: "tabShape", parts: [
+    // Figma: "Shape — with styles" (257:711), agreed 2026-10-15
+    { heading: "Buttons" },
+    ["buttons", "styleTiles", { label: "Style" }],
+    ["buttons", "cornerTiles", { label: "Corners" }],
+    ["buttons", "sizeTiles", { label: "Size" }],
+    { heading: "Cards" },
+    ["cards", "styleTiles", { label: "Style" }],
+    ["cards", "cornerTiles", { label: "Corners" }],
+    ["cards", "borderTiles", { label: "Borders" }],
+    { more: "Shape tokens", parts: [["custom", "buttonStyle"], ["custom", "cardStyle"], ["custom", "cardShadow"], ["custom", "corners"], ["custom", "controls"], ["custom", "borders"]] }
+  ] },
+  { id: "shadows", title: "Shadows", icon: "tabShadows", parts: [
+    ["depth", "styleTiles"],
+    ["depth", "intensity"],
+    { more: "Shadow tokens", parts: [["custom", "shadows"]] }
+  ] }
+], O = (t) => String(t).replace(/[&<>"]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[e]);
+function mo({ sections: t, store: e, view: n }) {
+  const a = document.createElement("div");
+  a.id = "twiddle-root", document.body.appendChild(a);
+  const o = a.attachShadow({ mode: "open" }), r = (d) => d.map((g) => `
+    <details data-section="${g.id}">
+      <summary>${g.title}<span class="chev">${A.chevron}</span></summary>
+      <div class="section-body"><div class="placeholder">${g.hint}</div></div>
     </details>
   `).join("");
-  a.innerHTML = `
-    <style>${Dn}</style>
+  o.innerHTML = `
+    <style>${ua}</style>
     <div class="pick-box" hidden><span class="pick-tag"></span></div>
     <div class="wrap">
       <div class="toast" role="status"></div>
       <div class="panel" role="dialog" aria-label="Panel" hidden>
         <div class="head">
           <span class="brand">Panel</span>
-          <button class="icon-btn" data-action="pick" title="Pick an element to tweak on its own" aria-label="Pick an element" aria-pressed="false">${M.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">${M.compare}</button>
-          <button class="icon-btn" data-action="copy" title="Copy link to this version" aria-label="Copy link">${M.link}</button>
-          <button class="icon-btn" data-action="reset" title="Reset to defaults" aria-label="Reset">${M.reset}</button>
-          <button class="icon-btn" data-action="close" title="Close (Alt+T)" aria-label="Close">${M.close}</button>
-        </div>
-        <div class="head subhead" hidden>
-          <button class="icon-btn" data-action="page-back" title="Back" aria-label="Back">${M.back}</button>
-          <span class="brand page-title"></span>
-          <button class="icon-btn" data-action="close" title="Close (Alt+T)" aria-label="Close">${M.close}</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">${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="close" title="Close (Alt+T)" aria-label="Close">${A.close}</button>
         </div>
-        <div class="original-pill" hidden>Showing original</div>
-        <div class="body" data-view="global"><div class="setup-hint" role="status" hidden></div>
-          <div class="page page-fields" data-page="simple"></div>
-          <div class="page" data-page="edit" hidden>
-            ${we.map((i) => `<button class="nav-row" data-go="${i.id}">${i.title}<span class="chev">${M.chevron}</span></button>`).join("")}
-          </div>
-          ${we.map((i) => `<div class="page page-fields" data-page="${i.id}" hidden></div>`).join("")}
-        </div>
-        <div class="body" data-view="local" hidden></div>
-        <div class="body" data-view="changes" hidden></div>
-        <button class="edit-row" data-action="edit">${M.sliders}<span>Edit every token</span><span class="chev">${M.chevron}</span></button>
-        <div class="foot">
-          <button class="icon-btn" data-action="undo" title="Undo (⌘Z)" aria-label="Undo">${M.undo}</button>
-          <button class="icon-btn" data-action="redo" title="Redo (⇧⌘Z)" aria-label="Redo">${M.redo}</button>
+        <div class="actions">
+          <button class="icon-btn" data-action="undo" title="Undo (⌘Z)" aria-label="Undo">${A.undo}</button>
+          <button class="icon-btn" data-action="redo" title="Redo (⇧⌘Z)" aria-label="Redo">${A.redo}</button>
           <button class="text-btn" data-action="changes" aria-pressed="false">Changes <span class="badge" hidden></span></button>
           <span class="spacer"></span>
           <div class="apply">
             <button class="apply-btn" data-action="apply" title="Copy these tweaks as a prompt for your coding agent">Copy prompt</button>
-            <button class="apply-menu-btn" data-action="apply-menu" aria-label="Copy prompt options" aria-haspopup="true" aria-expanded="false">${M.down}</button>
+            <button class="apply-menu-btn" data-action="apply-menu" aria-label="Copy prompt options" aria-haspopup="true" aria-expanded="false">${A.down}</button>
             <div class="menu apply-menu" role="menu" hidden>
               <button role="menuitemradio" data-apply-mode="preview">Preview before copying</button>
               <button role="menuitemradio" data-apply-mode="copy">Copy without preview</button>
             </div>
           </div>
         </div>
+        <div class="original-pill" hidden>Showing original</div>
+        <div class="body" data-view="global"><div class="setup-hint" role="status" hidden></div>
+          ${xe.map((d) => `<div class="page page-fields" data-page="${d.id}" hidden></div>`).join("")}
+        </div>
+        <div class="body" data-view="local" hidden></div>
+        <div class="body" data-view="changes" hidden></div>
+        <nav class="tabbar" aria-label="Areas">
+          ${xe.map((d) => `<button class="tab" data-tab="${d.id}" aria-pressed="false">${A[d.icon]}<span>${d.title}</span></button>`).join("")}
+        </nav>
       </div>
-      <button class="launcher" aria-label="Open Panel" aria-expanded="false">${M.dial}</button>
+      <button class="launcher" aria-label="Open Panel" aria-expanded="false">${A.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">${M.close}</button>
+          <button class="icon-btn" data-action="dialog-close" aria-label="Close">${A.close}</button>
         </div>
         <textarea class="prompt-text" readonly spellcheck="false" aria-label="Generated prompt"></textarea>
         <div class="dialog-foot">
@@ -1634,754 +2455,421 @@ function Mo({ sections: t, store: e, view: n }) {
       </div>
     </div>
   `;
-  const r = (i) => a.querySelector(i), d = r(".panel"), l = r(".launcher"), c = r(".toast"), p = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, m = r(".pick-box"), v = r(".pick-tag"), f = { getState: e.getState, setSection: e.setSection, setSections: e.setSections, onChange: e.onChange };
-  function x(i, h, w) {
-    h.forEach((E) => {
-      if (typeof E.render != "function") return;
-      const T = i.querySelector(`[data-section="${E.id}"] .section-body`);
-      T.innerHTML = "", E.render(T, w);
+  const s = (d) => o.querySelector(d), i = s(".panel"), l = s(".launcher"), p = s(".toast"), c = { global: s('[data-view="global"]'), local: s('[data-view="local"]'), changes: s('[data-view="changes"]') }, h = s(".pick-box"), y = s(".pick-tag"), f = { getState: e.getState, setSection: e.setSection, setSections: e.setSections, onChange: e.onChange };
+  function m(d, g, w) {
+    g.forEach((k) => {
+      if (typeof k.render != "function") return;
+      const C = d.querySelector(`[data-section="${k.id}"] .section-body`);
+      C.innerHTML = "", k.render(C, w);
     });
-    const S = [...i.querySelectorAll("details")];
-    return S.forEach((E) => E.addEventListener("toggle", () => {
-      E.open && S.forEach((T) => {
-        T !== E && (T.open = !1);
+    const $ = [...d.querySelectorAll("details")];
+    return $.forEach((k) => k.addEventListener("toggle", () => {
+      k.open && $.forEach((C) => {
+        C !== k && (C.open = !1);
       });
-    })), S;
+    })), $;
   }
-  const b = Object.fromEntries(t.map((i) => [i.id, i]));
-  function g(i, h) {
-    h.forEach((w) => {
+  const x = Object.fromEntries(t.map((d) => [d.id, d]));
+  function b(d, g) {
+    g.forEach((w) => {
       if (w === "warnings") {
-        const L = document.createElement("div");
-        L.className = "warnings page-warnings", i.append(L);
+        const S = document.createElement("div");
+        S.className = "warnings page-warnings", d.append(S);
+        return;
+      }
+      if (w.heading) {
+        const S = document.createElement("div");
+        S.className = "page-heading", S.innerHTML = `<span></span>${w.note ? '<span class="muted"></span>' : ""}`, S.firstChild.textContent = w.heading, w.note && (S.lastChild.textContent = w.note), d.append(S);
+        return;
+      }
+      if (w.more) {
+        const S = document.createElement("details");
+        S.className = "more", S.innerHTML = `<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`, S.querySelector("summary span:last-child").textContent = w.more, b(S.querySelector(".more-body"), w.parts), d.append(S);
         return;
       }
       if (w.tabs) {
-        const L = w.tabs.map((P) => {
-          const N = document.createElement("div");
-          return N.className = "tab-pane", g(N, P.parts), N;
-        }), re = X({
+        const S = w.tabs.map((j) => {
+          const z = document.createElement("div");
+          return z.className = "tab-pane", b(z, j.parts), z;
+        }), he = re({
           label: "View",
-          options: w.tabs.map((P, N) => ({ value: String(N), label: P.label })),
-          onSelect: (P) => {
-            re.setValue(P), L.forEach((N, Sn) => {
-              N.hidden = String(Sn) !== P;
+          options: w.tabs.map((j, z) => ({ value: String(z), label: j.label })),
+          onSelect: (j) => {
+            he.setValue(j), S.forEach((z, Zn) => {
+              z.hidden = String(Zn) !== j;
             });
           }
         });
-        re.setValue("0"), L.forEach((P, N) => {
-          P.hidden = N !== 0;
-        }), i.append(re.el, ...L);
+        he.setValue("0"), S.forEach((j, z) => {
+          j.hidden = z !== 0;
+        }), d.append(he.el, ...S);
         return;
       }
-      const [S, E, T = {}] = w, U = S === "simple" ? yo[E] : S === "roles" ? $o[E] : b[S]?.parts?.[E];
-      U && U(i, f, { ...T, buttons: b.buttons, cards: b.cards });
+      const [$, k, C = {}] = w, q = $ === "simple" ? po[k] : $ === "roles" ? go[k] : x[$]?.parts?.[k];
+      q && q(d, f, { ...C, buttons: x.buttons, cards: x.cards, goTab: (S) => {
+        G("global"), E(S);
+      } });
     });
   }
-  g(p.global.querySelector('[data-page="simple"]'), Co), we.forEach((i) => g(p.global.querySelector(`[data-page="${i.id}"]`), i.parts));
-  const u = r(".head:not(.subhead)"), y = r(".subhead"), k = r(".edit-row");
-  let O = "simple";
-  function Z() {
-    const i = ce === "global", h = i && O !== "simple";
-    u.hidden = h, y.hidden = !h, k.hidden = !(i && O === "simple"), h && (r(".page-title").textContent = O === "edit" ? "Edit every token" : we.find((w) => w.id === O).title);
-  }
-  function Q(i) {
-    O = i, p.global.querySelectorAll(".page").forEach((h) => {
-      h.hidden = h.dataset.page !== i;
-    }), p.global.scrollTop = 0, Z();
+  xe.forEach((d) => b(c.global.querySelector(`[data-page="${d.id}"]`), d.parts));
+  const u = [...o.querySelectorAll(".tab")];
+  let v = xe.some((d) => d.id === fe("tab")) ? fe("tab") : xe[0].id;
+  function L() {
+    u.forEach((d) => d.setAttribute("aria-pressed", String(K === "global" && d.dataset.tab === v)));
+  }
+  function E(d) {
+    v = d, ge("tab", d), c.global.querySelectorAll(".page").forEach((g) => {
+      g.hidden = g.dataset.page !== d;
+    }), c.global.scrollTop = 0, L();
+  }
+  const J = (d) => d.map((g) => `<div class="warning">${A.warn}<span>${O(g.text)}</span></div>`).join("");
+  let K = "global";
+  function G(d) {
+    K = d, Object.entries(c).forEach(([g, w]) => {
+      w.hidden = g !== d;
+    }), s('[data-action="changes"]').setAttribute("aria-pressed", String(d === "changes")), d !== "local" && Hn(), d === "changes" && Ut(), L();
+  }
+  E(v);
+  const qe = "cubic-bezier(0.3, 0.7, 0.2, 1)", Ve = "cubic-bezier(0.2, 0.8, 0.2, 1)", Se = 640, ie = 100, He = 50, Un = () => l.querySelector(".mark-knob"), qn = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
+  function Et(d) {
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches || !l.animate) return;
+    const g = Un(), [w, $] = qn(), k = (C) => `translateY(${C}px)`;
+    if (d) {
+      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Se, easing: qe });
+      const C = [{ transform: "scale(0.4)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }];
+      $.animate(C, { duration: ie * 2, delay: Se * 0.12, easing: qe, fill: "backwards" }), w.animate(C, { duration: ie * 2, delay: Se * 0.32 + He, easing: qe, fill: "backwards" });
+    } else {
+      const C = [{ opacity: 1 }, { opacity: 0 }];
+      w.animate(C, { duration: ie, easing: Ve }), $.animate(C, { duration: ie, delay: He / 2, easing: Ve, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Se * 0.7, delay: ie + He / 2, easing: Ve, fill: "backwards" });
+    }
   }
-  const gn = () => Q(O === "edit" ? "simple" : "edit"), de = (i) => i.map((h) => `<div class="warning">${M.warn}<span>${A(h.text)}</span></div>`).join("");
-  let ce = "global";
-  function Ce(i) {
-    ce = i, Object.entries(p).forEach(([h, w]) => {
-      w.hidden = h !== i;
-    }), r('[data-action="changes"]').setAttribute("aria-pressed", String(i === "changes")), i !== "local" && bn(), i === "changes" && bt(), Z();
+  function le({ animate: d = !0 } = {}) {
+    i.hidden && d && Et(!0), i.hidden = !1, l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), ge("panel", "open");
   }
-  function ee() {
-    d.hidden = !1, l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), be("panel", "open");
+  function _e() {
+    i.hidden || Et(!1), i.hidden = !0, l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), ge("panel", "closed"), $e();
   }
-  function Me() {
-    d.hidden = !0, l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), be("panel", "closed"), pe();
+  function Ke() {
+    i.hidden ? le() : _e();
   }
-  function Ae() {
-    d.hidden ? ee() : Me();
+  let Ct;
+  function H(d) {
+    p.textContent = d, p.classList.add("show"), clearTimeout(Ct), Ct = setTimeout(() => p.classList.remove("show"), 1600);
   }
-  let nt;
-  function V(i) {
-    c.textContent = i, c.classList.add("show"), clearTimeout(nt), nt = setTimeout(() => c.classList.remove("show"), 1600);
+  function de(d, g) {
+    navigator.clipboard.writeText(d).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
   }
-  function te(i, h) {
-    navigator.clipboard.writeText(i).then(() => V(h)).catch(() => V("Couldn’t copy — select the text and copy it instead"));
-  }
-  let Te = null;
-  function G(i, h) {
-    if (Te = i, !i) {
-      m.hidden = !0;
+  let Ge = null;
+  function Q(d, g) {
+    if (Ge = d, !d) {
+      h.hidden = !0;
       return;
     }
-    const w = i.getBoundingClientRect();
-    Object.assign(m.style, { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px`, height: `${w.height}px` }), v.textContent = h || Ye(i), m.hidden = !1;
+    const w = d.getBoundingClientRect();
+    Object.assign(h.style, { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px`, height: `${w.height}px` }), y.textContent = g || bt(d), h.hidden = !1;
   }
-  const ot = () => {
-    Te && !m.hidden && G(Te, v.textContent);
+  const Tt = () => {
+    Ge && !h.hidden && Q(Ge, y.textContent);
   };
-  window.addEventListener("scroll", ot, !0), window.addEventListener("resize", ot);
-  let ne = !1;
-  const at = r('[data-action="pick"]'), rt = (i) => i.composedPath().includes(o);
-  function st(i) {
-    if (rt(i)) return;
-    const h = i.target;
-    h && h.nodeType === 1 && h !== document.documentElement && h !== document.body && G(h);
-  }
-  function it(i) {
-    if (rt(i) || (i.preventDefault(), i.stopPropagation(), i.type !== "click")) return;
-    const h = i.target;
-    !h || h === document.documentElement || h === document.body || (pe(), pt(h));
-  }
-  function lt(i) {
-    i.key === "Escape" && (i.preventDefault(), pe(), C && G(C.el));
-  }
-  const dt = ["pointerdown", "mousedown", "mouseup", "click"];
-  function ct() {
-    if (!ne) {
-      if (ne = !0, !document.getElementById("twiddle-picking")) {
-        const i = document.createElement("style");
-        i.id = "twiddle-picking", i.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(i);
+  window.addEventListener("scroll", Tt, !0), window.addEventListener("resize", Tt);
+  let ce = !1;
+  const Mt = s('[data-action="pick"]'), At = (d) => d.composedPath().includes(a);
+  function Lt(d) {
+    if (At(d)) return;
+    const g = d.target;
+    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && Q(g);
+  }
+  function Pt(d) {
+    if (At(d) || (d.preventDefault(), d.stopPropagation(), d.type !== "click")) return;
+    const g = d.target;
+    !g || g === document.documentElement || g === document.body || ($e(), jt(g));
+  }
+  function Ot(d) {
+    d.key === "Escape" && (d.preventDefault(), $e(), M && Q(M.el));
+  }
+  const Ft = ["pointerdown", "mousedown", "mouseup", "click"];
+  function Nt() {
+    if (!ce) {
+      if (ce = !0, !document.getElementById("twiddle-picking")) {
+        const d = document.createElement("style");
+        d.id = "twiddle-picking", d.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(d);
       }
-      ee(), at.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", st, !0), dt.forEach((i) => document.addEventListener(i, it, !0)), document.addEventListener("keydown", lt, !0), V("Click an element · Esc to cancel");
+      le(), Mt.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Lt, !0), Ft.forEach((d) => document.addEventListener(d, Pt, !0)), document.addEventListener("keydown", Ot, !0), H("Click an element · Esc to cancel");
     }
   }
-  function pe() {
-    ne && (ne = !1, at.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", st, !0), dt.forEach((i) => document.removeEventListener(i, it, !0)), document.removeEventListener("keydown", lt, !0), G(C ? C.el : null));
+  function $e() {
+    ce && (ce = !1, Mt.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Lt, !0), Ft.forEach((d) => document.removeEventListener(d, Pt, !0)), document.removeEventListener("keydown", Ot, !0), Q(M ? M.el : null));
   }
-  let C = null;
-  function mn(i, h) {
+  let M = null;
+  function Vn(d, g) {
     const w = [];
     return {
       ctx: {
-        getState: () => (e.getState().scopes || {})[i] || {},
-        setSection: (S, E) => e.setScope(i, S, E),
-        onChange: (S) => {
-          const E = e.onChange(S);
-          return w.push(E), E;
+        getState: () => (e.getState().scopes || {})[d] || {},
+        setSection: ($, k) => e.setScope(d, $, k),
+        onChange: ($) => {
+          const k = e.onChange($);
+          return w.push(k), k;
         },
-        readToken: (S) => getComputedStyle(h).getPropertyValue(S).trim()
+        readToken: ($) => getComputedStyle(g).getPropertyValue($).trim()
       },
-      dispose: () => w.forEach((S) => S())
+      dispose: () => w.forEach(($) => $())
     };
   }
-  function pt(i, h) {
-    const w = _n(i), S = e.getState().scopes || {};
-    h || (h = !S[w.elementSelector] && w.classSelector && S[w.classSelector] ? "class" : "element"), C && C.dispose(), C = { el: i, info: w, target: h, dispose: () => {
-    } }, Le(), Ce("local"), ee(), G(i);
+  function jt(d, g) {
+    const w = xa(d), $ = e.getState().scopes || {};
+    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), M && M.dispose(), M = { el: d, info: w, target: g, dispose: () => {
+    } }, We(), G("local"), le(), Q(d);
   }
-  const ut = () => C.target === "class" ? C.info.classSelector : C.info.elementSelector;
-  function Le() {
-    C.dispose();
-    const { info: i } = C, h = t.filter((P) => (P.uses || []).some((N) => i.tokens.has(N))), w = p.local;
+  const Rt = () => M.target === "class" ? M.info.classSelector : M.info.elementSelector;
+  function We() {
+    M.dispose();
+    const { info: d } = M, g = t.filter((j) => (j.uses || []).some((z) => d.tokens.has(z))), w = c.local;
     if (w.innerHTML = `
       <div class="scope-bar">
         <div class="scope-head">
-          <button class="icon-btn" data-action="back" title="Back to the whole page" aria-label="Back to the whole page">${M.back}</button>
+          <button class="icon-btn" data-action="back" title="Back to the whole page" aria-label="Back to the whole page">${A.back}</button>
           <div class="scope-name">
-            <code>${A(Ye(i.el))}</code>
-            ${i.text ? `<span class="muted">“${A(i.text)}”</span>` : ""}
+            <code>${O(bt(d.el))}</code>
+            ${d.text ? `<span class="muted">“${O(d.text)}”</span>` : ""}
           </div>
         </div>
         <div class="scope-target"></div>
         <div class="warnings"></div>
       </div>
-      ${h.length ? s(h) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
-    `, i.classSelector) {
-      const P = X({
+      ${g.length ? r(g) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
+    `, d.classSelector) {
+      const j = re({
         label: "Apply to",
         options: [
           { value: "element", label: "This element" },
-          { value: "class", label: `All ${i.classSelector} (${i.classCount})`, title: `Every element matching ${i.classSelector}` }
+          { value: "class", label: `All ${d.classSelector} (${d.classCount})`, title: `Every element matching ${d.classSelector}` }
         ],
-        onSelect: (N) => {
-          N === "class" && e.moveScope(i.elementSelector, i.classSelector), C.target = N, Le();
+        onSelect: (z) => {
+          z === "class" && e.moveScope(d.elementSelector, d.classSelector), M.target = z, We();
         }
       });
-      P.setValue(C.target), w.querySelector(".scope-target").append(P.el);
+      j.setValue(M.target), w.querySelector(".scope-target").append(j.el);
     }
-    const { ctx: S, dispose: E } = mn(ut(), i.el), T = x(w, h, S);
-    T[0] && (T[0].open = !0);
-    const U = w.querySelector(".warnings"), L = () => {
-      const P = i.tokens.size ? eo(i.el) : null;
-      U.innerHTML = P ? de([P]) : "";
+    const { ctx: $, dispose: k } = Vn(Rt(), d.el), C = m(w, g, $);
+    C[0] && (C[0].open = !0);
+    const q = w.querySelector(".warnings"), S = () => {
+      const j = d.tokens.size ? Ta(d.el) : null;
+      q.innerHTML = j ? J([j]) : "";
     };
-    L();
-    const re = e.onChange(L);
-    C.dispose = () => {
-      E(), re();
+    S();
+    const he = e.onChange(S);
+    M.dispose = () => {
+      k(), he();
     };
   }
-  function ht() {
-    if (!C || !C.info.classSelector) return;
-    const i = e.getState().scopes || {}, h = C.target === "class" ? "element" : "class", w = h === "class" ? C.info.classSelector : C.info.elementSelector;
-    !i[ut()] && i[w] && (C.target = h, Le());
+  function zt() {
+    if (!M || !M.info.classSelector) return;
+    const d = e.getState().scopes || {}, g = M.target === "class" ? "element" : "class", w = g === "class" ? M.info.classSelector : M.info.elementSelector;
+    !d[Rt()] && d[w] && (M.target = g, We());
   }
-  const ft = () => {
-    e.undo(), ht();
-  }, gt = () => {
-    e.redo(), ht();
+  const It = () => {
+    e.undo(), zt();
+  }, Dt = () => {
+    e.redo(), zt();
   };
-  function bn() {
-    C && (C.dispose(), C = null, p.local.innerHTML = "", G(null));
-  }
-  const mt = (i) => i.kind === "global" ? "Whole page" : i.kind === "class" ? `All ${i.selector}` : "One element";
-  function bt() {
-    const i = Lt(e.getState(), t), h = Ne(), w = p.changes;
-    if (!i.length) {
-      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${de(h)}`;
+  function Hn() {
+    M && (M.dispose(), M = null, c.local.innerHTML = "", Q(null));
+  }
+  const Bt = (d) => d.kind === "global" ? "Whole page" : d.kind === "class" ? `All ${d.selector}` : "One element";
+  function Ut() {
+    const d = en(e.getState(), t), g = Je(), w = c.changes;
+    if (!d.length) {
+      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${J(g)}`;
       return;
     }
-    const S = /* @__PURE__ */ new Map();
-    i.forEach((E) => {
-      const T = E.selector || "";
-      S.has(T) || S.set(T, []), S.get(T).push(E);
-    }), w.innerHTML = (h.length ? `<div class="warnings">${de(h)}</div>` : "") + [...S].map(([E, T]) => `
+    const $ = /* @__PURE__ */ new Map();
+    d.forEach((k) => {
+      const C = k.selector || "";
+      $.has(C) || $.set(C, []), $.get(C).push(k);
+    }), w.innerHTML = (g.length ? `<div class="warnings">${J(g)}</div>` : "") + [...$].map(([k, C]) => `
       <div class="change-group">
         <div class="change-scope">
-          ${E ? `<button class="link-btn" data-select="${A(E)}" title="Select it on the page">${A(mt(T[0]))}</button><code>${A(E)}</code>` : `<span>${mt(T[0])}</span>`}
+          ${k ? `<button class="link-btn" data-select="${O(k)}" title="Select it on the page">${O(Bt(C[0]))}</button><code>${O(k)}</code>` : `<span>${Bt(C[0])}</span>`}
         </div>
-        ${T.map((U) => `
+        ${C.map((q) => `
           <div class="change-row">
             <div class="change-main">
-              <div class="change-title">${A(U.title)} <span class="muted">›</span> ${U.settings.map((L) => `${A(L.label)}: <b>${A(L.value)}</b>`).join(", ")}</div>
-              ${U.tokens.map((L) => `<div class="change-token"><code>${A(L.name)}</code> ${L.from ? `${A(L.from)} → ` : ""}${A(L.to)}</div>`).join("")}
+              <div class="change-title">${O(q.title)} <span class="muted">›</span> ${q.settings.map((S) => `${O(S.label)}: <b>${O(S.value)}</b>`).join(", ")}</div>
+              ${q.tokens.map((S) => `<div class="change-token"><code>${O(S.name)}</code> ${S.from ? `${O(S.from)} → ` : ""}${O(S.to)}</div>`).join("")}
             </div>
-            <button class="icon-btn" data-remove="${A(U.sectionId)}" data-remove-scope="${A(E)}" aria-label="Remove ${A(U.title)} change">${M.close}</button>
+            <button class="icon-btn" data-remove="${O(q.sectionId)}" data-remove-scope="${O(k)}" aria-label="Remove ${O(q.title)} change">${A.close}</button>
           </div>`).join("")}
       </div>`).join("");
   }
-  function xn(i, h) {
-    if (h) return e.removeScope(h, i);
-    const w = e.getState()[i] || {};
-    e.setSection(i, Object.fromEntries(Object.keys(w).map((S) => [S, null])));
+  function _n(d, g) {
+    if (g) return e.removeScope(g, d);
+    const w = e.getState()[d] || {};
+    e.setSection(d, Object.fromEntries(Object.keys(w).map(($) => [$, null])));
   }
-  const oe = r(".apply-menu"), xt = r('[data-action="apply-menu"]'), wt = () => Fe("apply-mode") === "copy" ? "copy" : "preview";
-  function wn() {
-    oe.querySelectorAll("[data-apply-mode]").forEach((i) => i.setAttribute("aria-checked", String(i.dataset.applyMode === wt())));
+  const pe = s(".apply-menu"), qt = s('[data-action="apply-menu"]'), Vt = () => fe("apply-mode") === "copy" ? "copy" : "preview";
+  function Kn() {
+    pe.querySelectorAll("[data-apply-mode]").forEach((d) => d.setAttribute("aria-checked", String(d.dataset.applyMode === Vt())));
   }
-  function ue(i) {
-    oe.hidden = !i, xt.setAttribute("aria-expanded", String(i)), i && wn();
+  function Ee(d) {
+    pe.hidden = !d, qt.setAttribute("aria-expanded", String(d)), d && Kn();
   }
-  function vt() {
-    return Xn(Lt(e.getState(), t), { warnings: Ne() });
+  function Ht() {
+    return Sa(en(e.getState(), t), { warnings: Je() });
   }
-  const he = r(".dialog-backdrop"), yt = r(".prompt-text");
-  function vn() {
-    const i = vt();
-    if (!i) return V("No changes to copy yet");
-    if (wt() === "copy") return te(i, "Prompt copied · paste it into your agent");
-    yt.value = i, he.hidden = !1, r('[data-action="dialog-copy"]').focus();
+  const Ce = s(".dialog-backdrop"), _t = s(".prompt-text");
+  function Gn() {
+    const d = Ht();
+    if (!d) return H("No changes to copy yet");
+    if (Vt() === "copy") return de(d, "Prompt copied · paste it into your agent");
+    _t.value = d, Ce.hidden = !1, s('[data-action="dialog-copy"]').focus();
   }
-  function Pe() {
-    he.hidden = !0, r('[data-action="apply"]').focus();
+  function Ye() {
+    Ce.hidden = !0, s('[data-action="apply"]').focus();
   }
-  const K = r('[data-action="compare"]'), yn = r(".original-pill");
-  function fe(i) {
-    i ? n.suspend() : n.resume(), K.setAttribute("aria-pressed", String(i)), yn.hidden = !i;
+  const ee = s('[data-action="compare"]'), Wn = s(".original-pill");
+  function Te(d) {
+    d ? n.suspend() : n.resume(), ee.setAttribute("aria-pressed", String(d)), Wn.hidden = !d;
   }
-  let kt = null, ae = !1;
-  K.addEventListener("pointerdown", () => {
-    ae = !1, kt = setTimeout(() => {
-      ae = !0, fe(!0);
+  let Kt = null, ue = !1;
+  ee.addEventListener("pointerdown", () => {
+    ue = !1, Kt = setTimeout(() => {
+      ue = !0, Te(!0);
     }, 180);
   });
-  const St = () => {
-    clearTimeout(kt), ae && (fe(!1), ae = !1);
+  const Gt = () => {
+    clearTimeout(Kt), ue && (Te(!1), ue = !1);
   };
-  K.addEventListener("pointerup", St), K.addEventListener("pointerleave", St);
-  const ge = r(".setup-hint"), Et = `setup-hint-dismissed:${location.pathname}`, kn = {
+  ee.addEventListener("pointerup", Gt), ee.addEventListener("pointerleave", Gt);
+  const Me = s(".setup-hint"), Wt = `setup-hint-dismissed:${location.pathname}`, Yn = {
     "no-tokens": {
       title: "The Panel tokens aren’t loaded",
       text: "The knobs change the --twd-* variables, but this page doesn’t load them. Add the token stylesheet before your own CSS:",
-      snippets: jt,
-      link: `${Nt}/#install`
+      snippets: sn,
+      link: `${rn}/#install`
     },
     unused: {
       title: "Nothing here uses the Panel tokens yet",
       text: "The tokens are loaded, but no style on this page uses var(--twd-…), so the knobs won’t change anything. Ask your coding agent to convert the styles:",
       copy: "Copy prompt for your agent",
       copied: "Prompt copied",
-      text2copy: io,
-      link: `${Nt}/#tokens`
+      text2copy: Na,
+      link: `${rn}/#tokens`
     }
   };
-  let j = null;
-  function me() {
-    const i = ro();
-    j = Fe(Et) === i ? null : kn[i] || null, l.toggleAttribute("data-hint", !!j), ge.hidden = !j, j && (ge.innerHTML = `
-      <div class="setup-head">${M.warn}<b>${A(j.title)}</b>
-        <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${M.close}</button>
+  let D = null;
+  function Ae() {
+    const d = Oa();
+    D = fe(Wt) === d ? null : Yn[d] || null, l.toggleAttribute("data-hint", !!D), Me.hidden = !D, D && (Me.innerHTML = `
+      <div class="setup-head">${A.warn}<b>${O(D.title)}</b>
+        <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${A.close}</button>
       </div>
-      <p>${A(j.text)}</p>
-      ${(j.snippets || []).map((h, w) => `
+      <p>${O(D.text)}</p>
+      ${(D.snippets || []).map((g, w) => `
         <div class="setup-snippet">
-          <span>${A(h.label)}</span>
-          <div class="setup-code"><code>${A(h.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
+          <span>${O(g.label)}</span>
+          <div class="setup-code"><code>${O(g.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
         </div>`).join("")}
       <div class="setup-actions">
-        ${j.copy ? `<button class="apply-btn" data-action="setup-copy">${A(j.copy)}</button>` : ""}
-        <a href="${j.link}" target="_blank" rel="noopener">Setup guide</a>
-      </div>`, ge.dataset.status = i);
-  }
-  me(), document.readyState !== "complete" && window.addEventListener("load", me, { once: !0 }), setTimeout(me, 1500);
-  const $t = r(".badge");
-  function Ct() {
-    r('[data-action="undo"]').disabled = !e.canUndo(), r('[data-action="redo"]').disabled = !e.canRedo();
-    const i = Wn(e.getState());
-    $t.textContent = i, $t.hidden = !i;
-    const h = de(Ne());
-    p.global.querySelectorAll(".page-warnings").forEach((w) => {
-      w.innerHTML = h;
-    }), ce === "changes" && bt();
-  }
-  return e.onChange(Ct), Ct(), a.addEventListener("click", (i) => {
-    if (i.target === he) return Pe();
-    const h = i.target.closest("button");
-    if (h) {
-      if (h !== xt && !oe.contains(h) && ue(!1), h === l) return Ae();
-      if (h.dataset.select) {
-        const w = document.querySelector(h.dataset.select);
-        return w ? pt(w) : V("That element isn’t on this page");
+        ${D.copy ? `<button class="apply-btn" data-action="setup-copy">${O(D.copy)}</button>` : ""}
+        <a href="${D.link}" target="_blank" rel="noopener">Setup guide</a>
+      </div>`, Me.dataset.status = d);
+  }
+  Ae(), document.readyState !== "complete" && window.addEventListener("load", Ae, { once: !0 }), setTimeout(Ae, 1500);
+  const Yt = s(".badge");
+  function Zt() {
+    s('[data-action="undo"]').disabled = !e.canUndo(), s('[data-action="redo"]').disabled = !e.canRedo();
+    const d = ya(e.getState());
+    Yt.textContent = d, Yt.hidden = !d;
+    const g = J(Je());
+    c.global.querySelectorAll(".page-warnings").forEach((w) => {
+      w.innerHTML = g;
+    }), K === "changes" && Ut();
+  }
+  return e.onChange(Zt), Zt(), o.addEventListener("click", (d) => {
+    if (d.target === Ce) return Ye();
+    const g = d.target.closest("button");
+    if (g) {
+      if (g !== qt && !pe.contains(g) && Ee(!1), g === l) return Ke();
+      if (g.dataset.select) {
+        const w = document.querySelector(g.dataset.select);
+        return w ? jt(w) : H("That element isn’t on this page");
       }
-      if (h.dataset.setupSnippet) return te(jt[h.dataset.setupSnippet].code, "Copied");
-      if (h.dataset.go) return Q(h.dataset.go);
-      if (h.dataset.remove) return xn(h.dataset.remove, h.dataset.removeScope);
-      if (h.dataset.applyMode)
-        return be("apply-mode", h.dataset.applyMode), ue(!1), V(h.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
-      switch (h.dataset.action) {
+      if (g.dataset.setupSnippet) return de(sn[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.tab)
+        return G("global"), E(g.dataset.tab);
+      if (g.dataset.remove) return _n(g.dataset.remove, g.dataset.removeScope);
+      if (g.dataset.applyMode)
+        return ge("apply-mode", g.dataset.applyMode), Ee(!1), H(g.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
+      switch (g.dataset.action) {
         case "close":
-          return Me();
+          return _e();
         case "reset":
-          return e.resetState(), V("Reset to defaults · ⌘Z to undo");
+          return e.resetState(), H("Reset to defaults · ⌘Z to undo");
         case "copy":
-          return te(location.href, "Link copied");
+          return de(location.href, "Link copied");
         case "pick":
-          return ne ? pe() : ct();
+          return ce ? $e() : Nt();
         case "compare":
-          ae || fe(K.getAttribute("aria-pressed") !== "true");
+          ue || Te(ee.getAttribute("aria-pressed") !== "true");
           return;
         case "undo":
-          return ft();
+          return It();
         case "redo":
-          return gt();
+          return Dt();
         case "back":
-          return Ce("global");
-        case "edit":
-          return Q("edit");
-        case "page-back":
-          return gn();
+          return G("global");
         case "changes":
-          return Ce(ce === "changes" ? "global" : "changes");
+          return G(K === "changes" ? "global" : "changes");
         case "apply":
-          return vn();
+          return Gn();
         case "apply-menu":
-          return ue(oe.hidden);
+          return Ee(pe.hidden);
         case "dialog-close":
-          return Pe();
+          return Ye();
         case "dialog-copy":
-          return te(yt.value, "Prompt copied · paste it into your agent");
+          return de(_t.value, "Prompt copied · paste it into your agent");
         case "setup-copy":
-          return j && te(j.text2copy, j.copied);
+          return D && de(D.text2copy, D.copied);
         case "setup-dismiss":
-          return be(Et, ge.dataset.status), me();
+          return ge(Wt, Me.dataset.status), Ae();
       }
     }
-  }), a.addEventListener("keydown", (i) => {
-    if (i.key === "Escape") {
-      if (!he.hidden) return Pe();
-      if (!oe.hidden) return ue(!1);
+  }), o.addEventListener("keydown", (d) => {
+    if (d.key === "Escape") {
+      if (!Ce.hidden) return Ye();
+      if (!pe.hidden) return Ee(!1);
     }
-    !(i.metaKey || i.ctrlKey) || i.key.toLowerCase() !== "z" || i.target.matches?.('input[type="text"], textarea') || (i.preventDefault(), i.shiftKey ? gt() : ft());
-  }), document.addEventListener("keydown", (i) => {
-    i.altKey && (i.code === "KeyT" && (i.preventDefault(), Ae()), i.code === "KeyC" && (i.preventDefault(), fe(K.getAttribute("aria-pressed") !== "true")));
-  }), Fe("panel") === "open" && ee(), { open: ee, close: Me, toggle: Ae, toast: V, pick: ct, prompt: vt };
-}
-const Ao = '<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>', To = '<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 Lo = 0;
-function Po({ label: t, options: e, onSelect: n, placeholder: o, onOpen: a }) {
-  const s = `twd-fonts-${++Lo}`, r = document.createElement("div");
-  r.className = "font-select";
-  const d = document.createElement("button");
-  d.type = "button", d.className = "font-trigger", d.setAttribute("aria-haspopup", "listbox"), d.setAttribute("aria-expanded", "false"), d.setAttribute("aria-controls", s), d.innerHTML = `
-    <span class="font-aa" aria-hidden="true">Aa</span>
-    <span class="font-name"></span>
-    <span class="font-fonts"></span>
-    <span class="font-chevron">${Ao}</span>`;
-  const l = document.createElement("div");
-  l.className = "font-menu", l.id = s, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", t), l.hidden = !0;
-  const c = e.map((u) => {
-    const y = document.createElement("div");
-    return y.className = "font-option", y.setAttribute("role", "option"), y.tabIndex = -1, y.dataset.value = u.value, y.innerHTML = `
-      <span class="font-aa" style="font-family:${u.preview}" aria-hidden="true">Aa</span>
-      <span class="font-text"><span class="font-name">${u.name}</span><span class="font-fonts">${u.fonts}</span></span>
-      <span class="font-check">${To}</span>`, y.addEventListener("click", () => g(u.value)), y;
-  });
-  l.append(...c), r.append(d, l);
-  let p = null;
-  function m(u) {
-    const y = e.find((O) => O.value === u), k = y || o || e[0];
-    p = y ? y.value : o ? null : e[0].value, d.querySelector(".font-name").textContent = k.name, d.querySelector(".font-fonts").textContent = k.fonts, d.querySelector(".font-aa").style.fontFamily = k.preview, d.setAttribute("aria-label", `${t}: ${k.name}, ${k.fonts}`), c.forEach((O) => O.setAttribute("aria-selected", String(O.dataset.value === p)));
-  }
-  function v() {
-    const u = d.getBoundingClientRect(), y = l.offsetHeight, O = window.innerHeight - u.bottom - 8 >= y ? u.bottom + 4 : Math.max(8, u.top - 4 - y);
-    l.style.top = `${O}px`, l.style.left = `${u.left}px`, l.style.width = `${u.width}px`;
-  }
-  function f() {
-    l.hidden && (l.hidden = !1, d.setAttribute("aria-expanded", "true"), a && a(), v(), (c.find((u) => u.dataset.value === p) || c[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", b, !0)), window.addEventListener("resize", x), r.closest(".body")?.addEventListener("scroll", x, { once: !0 }));
-  }
-  function x(u) {
-    l.hidden || (l.hidden = !0, d.setAttribute("aria-expanded", "false"), document.removeEventListener("pointerdown", b, !0), window.removeEventListener("resize", x), u === !0 && d.focus());
-  }
-  function b(u) {
-    u.composedPath().includes(r) || x();
-  }
-  function g(u) {
-    u !== p && (m(u), n(u)), x(!0);
-  }
-  return d.addEventListener("click", () => l.hidden ? f() : x(!0)), d.addEventListener("keydown", (u) => {
-    (u.key === "ArrowDown" || u.key === "ArrowUp") && (u.preventDefault(), f());
-  }), l.addEventListener("keydown", (u) => {
-    const y = c.indexOf(u.target);
-    let k = null;
-    if (u.key === "ArrowDown") k = Math.min(c.length - 1, y + 1);
-    else if (u.key === "ArrowUp") k = Math.max(0, y - 1);
-    else if (u.key === "Home") k = 0;
-    else if (u.key === "End") k = c.length - 1;
-    else if (u.key === "Enter" || u.key === " ") {
-      u.preventDefault(), g(u.target.dataset.value);
-      return;
-    } else if (u.key === "Escape") {
-      u.preventDefault(), u.stopPropagation(), x(!0);
-      return;
-    } else if (u.key === "Tab") {
-      x();
-      return;
-    }
-    k !== null && (u.preventDefault(), c[k].focus());
-  }), m(o ? null : e[0].value), { el: r, setValue: m };
+    !(d.metaKey || d.ctrlKey) || d.key.toLowerCase() !== "z" || d.target.matches?.('input[type="text"], textarea') || (d.preventDefault(), d.shiftKey ? Dt() : It());
+  }), document.addEventListener("keydown", (d) => {
+    d.altKey && (d.code === "KeyT" && (d.preventDefault(), Ke()), d.code === "KeyC" && (d.preventDefault(), Te(ee.getAttribute("aria-pressed") !== "true")));
+  }), fe("panel") === "open" && le({ animate: !1 }), { open: le, close: _e, toggle: Ke, toast: H, pick: Nt, prompt: Ht };
 }
-const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', ve = 'Georgia, "Times New Roman", serif', Be = [
-  { value: "neutral", name: "Neutral", fonts: "Inter · Inter", heading: `"Inter", ${I}`, body: `"Inter", ${I}`, load: ["Inter:wght@400;500;600;700"] },
-  { value: "modern", name: "Modern", fonts: "Geist · Geist", heading: `"Geist", ${I}`, body: `"Geist", ${I}`, load: ["Geist:wght@400;500;600;700"] },
-  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${ve}`, body: `"Inter", ${I}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
-  { value: "technical", name: "Technical", fonts: "Space Grotesk · DM Sans", heading: `"Space Grotesk", ${I}`, body: `"DM Sans", ${I}`, load: ["Space+Grotesk:wght@500;600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${ve}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${ve}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
-  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${ve}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
-  { value: "friendly", name: "Friendly", fonts: "Manrope · Manrope", heading: `"Manrope", ${I}`, body: `"Manrope", ${I}`, load: ["Manrope:wght@400;500;600;700"] }
-], Ue = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, Vt = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, qt = /* @__PURE__ */ new Set();
-function Ht(t) {
-  const e = t.filter((o) => !qt.has(o));
-  if (!e.length) return;
-  e.forEach((o) => qt.add(o));
-  const n = document.createElement("link");
-  n.rel = "stylesheet", n.href = `https://fonts.googleapis.com/css2?${e.map((o) => `family=${o}`).join("&")}&display=swap`, n.dataset.twiddle = "fonts", document.head.appendChild(n);
-}
-const Fo = {
-  id: "typography",
-  title: "Typography",
-  hint: "Font pairing · base size · scale",
-  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(Vt).map((t) => `--twd-text-${t}`)],
-  tokens(t) {
-    const e = t.typography || {}, n = {}, o = Be.find((a) => a.value === e.font);
-    if (o && (Ht(o.load), n["--twd-font-heading"] = o.heading, n["--twd-font-body"] = o.body), e.base || e.scale) {
-      const a = Number(e.base) || 16, s = Ue[e.scale] || Ue.balanced;
-      Object.entries(Vt).forEach(([r, d]) => {
-        n[`--twd-text-${r}`] = `${+(a * s ** d / 16).toFixed(3)}rem`;
-      });
-    }
-    return n;
-  },
-  parts: {
-    fonts(t, e, { label: n = "Fonts" } = {}) {
-      const o = B(n), a = Po({
-        label: "Font pairing",
-        options: Be.map((r) => ({ value: r.value, name: r.name, fonts: r.fonts, preview: r.heading })),
-        placeholder: { name: "Default", fonts: "Prototype fonts", preview: I },
-        // Load every pairing's fonts when the list opens, so the "Aa" previews are real.
-        onOpen: () => Ht([...new Set(Be.flatMap((r) => r.load))]),
-        onSelect: (r) => e.setSection("typography", { font: r })
-      });
-      o.append(a.el);
-      const s = () => a.setValue((e.getState().typography || {}).font || null);
-      s(), e.onChange(s), t.append(o.el);
-    },
-    base(t, e, { label: n = "Base size" } = {}) {
-      t.append(le(e, {
-        section: "typography",
-        key: "base",
-        label: n,
-        fallback: "16",
-        options: ["14", "15", "16"].map((o) => ({ value: o, label: o })),
-        valueText: (o) => `${o}px`
-      }));
-    },
-    scale(t, e, { label: n = "Scale" } = {}) {
-      t.append(le(e, {
-        section: "typography",
-        key: "scale",
-        label: n,
-        fallback: "balanced",
-        options: [{ value: "compact", label: "Compact" }, { value: "balanced", label: "Balanced" }, { value: "expressive", label: "Expressive" }],
-        valueText: (o) => String(Ue[o])
-      }));
-    }
-  },
-  render(t, e) {
-    Object.values(this.parts).forEach((n) => n(t, e));
-  }
-}, Oo = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', Ro = [
-  [50, "white", 10],
-  [100, "white", 20],
-  [200, "white", 36],
-  [300, "white", 56],
-  [400, "white", 78],
-  [500, null, 100],
-  [600, "black", 86],
-  [700, "black", 72],
-  [800, "black", 58],
-  [900, "black", 45],
-  [950, "black", 30]
-], Ve = (t) => {
-  let e = String(t).trim().replace(/^#/, "");
-  return /^[0-9a-f]{3}$/i.test(e) && (e = e.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(e) ? `#${e.toUpperCase()}` : null;
-};
-function No({ label: t, onInput: e }) {
-  const n = document.createElement("div");
-  n.className = "colour";
-  const o = document.createElement("div");
-  o.className = "colour-field";
-  const a = document.createElement("input");
-  a.type = "color", a.className = "colour-picker", a.tabIndex = -1, a.setAttribute("aria-hidden", "true");
-  const s = document.createElement("button");
-  s.type = "button", s.className = "colour-swatch", s.setAttribute("aria-label", `${t}: open colour picker`);
-  const r = document.createElement("input");
-  r.type = "text", r.className = "colour-hex", r.spellcheck = !1, r.maxLength = 7, r.setAttribute("aria-label", `${t} hex value`);
-  const d = document.createElement("button");
-  d.type = "button", d.className = "colour-pipette", d.innerHTML = Oo, d.title = "Pick a colour from the screen", d.setAttribute("aria-label", "Pick a colour from the screen"), o.append(a, s, r, d);
-  const l = document.createElement("div");
-  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = Ro.map(([f, x, b]) => {
-    const g = x ? `color-mix(in oklch, var(--brand) ${b}%, ${x})` : "var(--brand)";
-    return `<span title="${f}" style="background:${g}"></span>`;
-  }).join(""), n.append(o, l);
-  let c = "#000000";
-  const p = (f) => {
-    c = f, a.value = f.toLowerCase(), s.style.background = f, n.getRootNode().activeElement !== r && (r.value = f), n.style.setProperty("--brand", f);
-  }, m = (f) => {
-    f !== c && (p(f), e(f));
-  };
-  s.addEventListener("click", () => {
-    if (a.showPicker)
-      try {
-        a.showPicker();
-        return;
-      } catch {
-      }
-    a.click();
-  }), a.addEventListener("input", () => m(a.value.toUpperCase())), r.addEventListener("input", () => {
-    const f = Ve(r.value);
-    f && m(f);
-  });
-  const v = () => {
-    r.value = c;
-  };
-  return r.addEventListener("blur", v), r.addEventListener("keydown", (f) => {
-    f.key === "Enter" && (v(), r.select());
-  }), d.addEventListener("click", async () => {
-    if ("EyeDropper" in window)
-      try {
-        const { sRGBHex: f } = await new window.EyeDropper().open(), x = Ve(f);
-        x && m(x);
-      } catch {
-      }
-    else
-      s.click();
-  }), { el: n, setValue: (f) => p(Ve(f) || c) };
-}
-function jo({ label: t, options: e, onSelect: n }) {
-  const o = document.createElement("div");
-  o.className = "swatches", o.setAttribute("role", "radiogroup"), o.setAttribute("aria-label", t);
-  const a = e.map((l) => {
-    const c = document.createElement("button");
-    return c.type = "button", c.className = "swatch", c.setAttribute("role", "radio"), c.dataset.value = l.value, c.innerHTML = `<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`, c.addEventListener("click", () => d(l.value)), c;
-  });
-  o.append(...a);
-  let s = null;
-  function r(l) {
-    s = l, a.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
-    const c = Math.max(0, a.findIndex((p) => p.dataset.value === l));
-    a.forEach((p, m) => {
-      p.tabIndex = m === c ? 0 : -1;
-    });
-  }
-  function d(l, c) {
-    l !== s && (r(l), n(l)), c && a.find((p) => p.dataset.value === l).focus();
-  }
-  return o.addEventListener("keydown", (l) => {
-    const c = a.indexOf(l.target.closest(".swatch"));
-    if (c < 0) return;
-    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
-    let m;
-    if (p) m = (c + p + a.length) % a.length;
-    else if (l.key === "Home") m = 0;
-    else if (l.key === "End") m = a.length - 1;
-    else return;
-    l.preventDefault(), d(a[m].dataset.value, !0);
-  }), r(null), { el: o, setValue: r };
-}
-const _t = "#4F46E5", zo = "#A0743C", Io = [
-  // Figma Swatch row sample colours
-  { value: "pure", label: "Pure", colour: "#8E8E93" },
-  { value: "subtle", label: "Subtle", colour: "#8A89A6" },
-  { value: "warm", label: "Warm", colour: "#9C9389" }
-], Gt = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], Do = {
-  // proposal
-  bg: "#0F0F11",
-  surface: "#18181B",
-  "surface-raised": "#1F1F23",
-  text: "#F4F4F5",
-  "text-muted": "#A1A1AA",
-  border: "#2E2E33"
-}, Bo = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, Kt = (t) => /^#[0-9a-f]{6}$/i.test(t || "");
-function Uo(t) {
-  const e = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, o, a] = [1, 3, 5].map((l) => e(parseInt(t.slice(l, l + 2), 16))), s = 0.2126 * n + 0.7152 * o + 0.0722 * a, r = 1.05 / (s + 0.05), d = (s + 0.05) / (98e-4 + 0.05);
-  return r >= d ? "#FFFFFF" : "#18181B";
-}
-const Vo = {
-  id: "colour",
-  title: "Colour",
-  hint: "Brand colour · neutral tint · mode",
-  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...Gt.map((t) => `--twd-${t}`)],
-  tokens(t) {
-    const e = t.colour || {}, n = {}, o = e.mode === "dark";
-    Kt(e.brand) && (n["--twd-primary"] = e.brand, n["--twd-primary-hover"] = o ? `color-mix(in oklch, ${e.brand} 85%, white)` : `color-mix(in oklch, ${e.brand} 86%, black)`, n["--twd-on-primary"] = Uo(e.brand), n["--twd-focus"] = e.brand);
-    const a = e.tint === "subtle" ? Kt(e.brand) ? e.brand : F("--twd-primary") || _t : e.tint === "warm" ? zo : null;
-    return (o || a) && Gt.forEach((s) => {
-      const r = o ? Do[s] : F(`--twd-${s}`);
-      r && (n[`--twd-${s}`] = a ? `color-mix(in oklch, ${r} ${100 - Bo[s]}%, ${a})` : r);
-    }), n;
-  },
-  parts: {
-    brand(t, e, { label: n = "Brand" } = {}) {
-      const o = B(n), a = No({ label: "Brand colour", onInput: (r) => e.setSection("colour", { brand: r }) });
-      o.append(a.el);
-      const s = () => a.setValue((e.getState().colour || {}).brand || (e.readToken || F)("--twd-primary") || _t);
-      s(), e.onChange(s), t.append(o.el);
-    },
-    neutral(t, e, { label: n = "Neutral" } = {}) {
-      const o = B(n), a = jo({ label: "Neutral tint", options: Io, onSelect: (r) => e.setSection("colour", { tint: r }) });
-      o.append(a.el);
-      const s = () => a.setValue((e.getState().colour || {}).tint || "pure");
-      s(), e.onChange(s), t.append(o.el);
-    },
-    mode(t, e, { label: n = "Mode" } = {}) {
-      t.append(le(e, {
-        section: "colour",
-        key: "mode",
-        label: n,
-        fallback: "light",
-        options: [{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]
-      }));
-    }
-  },
-  render(t, e) {
-    Object.values(this.parts).forEach((n) => n(t, e));
-  }
-}, qo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, Ho = hn({
-  id: "buttons",
-  title: "Buttons",
-  hint: "Corners · size",
-  token: "--twd-radius-control",
-  uses: ["--twd-control-height", "--twd-control-pad-x"],
-  max: 24,
-  // slider range in px; "Pill" sits at the end and reads "full"
-  presets: [
-    { value: "square", label: "Square", radius: 0 },
-    // proposal
-    { value: "soft", label: "Soft", radius: 4 },
-    // proposal
-    { value: "rounded", label: "Rounded", radius: 8 },
-    // Figma: "8px"
-    { value: "pill", label: "Pill", radius: 999 }
-  ],
-  extraTokens(t) {
-    const e = qo[t.size];
-    if (!e) return {};
-    const n = {}, o = Se(F("--twd-control-height"), e.height), a = Se(F("--twd-control-pad-x"), e.pad);
-    return o && (n["--twd-control-height"] = o), a && (n["--twd-control-pad-x"] = a), n;
-  },
-  extra: [
-    {
-      key: "size",
-      label: "Size",
-      fallback: "medium",
-      options: [{ value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }]
-    }
-  ]
-}), _o = hn({
-  id: "cards",
-  title: "Cards",
-  hint: "Corners · border",
-  token: "--twd-radius-container",
-  uses: ["--twd-border-width-container"],
-  max: 32,
-  presets: [
-    { value: "square", label: "Square", radius: 0 },
-    // proposal
-    { value: "soft", label: "Soft", radius: 6 },
-    // proposal
-    { value: "rounded", label: "Rounded", radius: 12 },
-    // = tokens.css default
-    { value: "large", label: "Large", radius: 20 }
-    // proposal (cards don't go fully pill)
-  ],
-  extraTokens(t) {
-    if (t.border === "none") return { "--twd-border-width-container": "0px" };
-    if (t.border === "thick") {
-      const e = Se(F("--twd-border-width-container"), 2);
-      return e ? { "--twd-border-width-container": e } : {};
-    }
-    return {};
-  },
-  extra: [
-    {
-      key: "border",
-      label: "Border",
-      fallback: "thin",
-      options: [{ value: "none", label: "None" }, { value: "thin", label: "Thin" }, { value: "thick", label: "Thick" }]
-    }
-  ]
-}), Wt = [Fo, Vo, Ho, _o, bo, wo, mo], Go = ':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-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)}';
-function Ko() {
+const wn = [lo, De, Dn, wt, Va, vt, ao, qa], bo = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}';
+function xo() {
   if (getComputedStyle(document.documentElement).getPropertyValue("--twd-radius-control").trim() || document.getElementById("twiddle-tokens")) return;
   const e = document.createElement("style");
-  e.id = "twiddle-tokens", e.textContent = Go, document.head.prepend(e);
+  e.id = "twiddle-tokens", e.textContent = bo, document.head.prepend(e);
 }
 if (!window.Twiddle) {
-  Ko(), Wt.forEach((n) => On(n.tokens)), Qt(Ke);
+  xo(), wn.forEach((n) => sa(n.tokens)), $n(gt);
   let t;
   const e = () => {
-    Ke(He()), t = Mo({ sections: Wt, store: Fn, view: { suspend: zn, resume: In } });
+    gt(ut()), t = mo({ sections: wn, store: ra, view: { suspend: ca, resume: pa } });
   };
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", e) : e(), window.Twiddle = {
     open: () => t && t.open(),
     close: () => t && t.close(),
     toggle: () => t && t.toggle(),
-    reset: () => Xt(),
-    undo: () => Jt(),
-    redo: () => Zt(),
+    reset: () => yn(),
+    undo: () => kn(),
+    redo: () => Sn(),
     pick: () => t && t.pick(),
     prompt: () => t ? t.prompt() : "",
-    getState: He
+    getState: ut
   };
 }
-const Wo = window.Twiddle;
+const wo = window.Twiddle;
 export {
-  Wo as Twiddle
+  wo as Twiddle
 };