twiddle-panel 0.6.1 → 0.7.1

package/dist/twiddle.mjs

@@ -1,6 +1,6 @@
-const qe = /* @__PURE__ */ new Set();
-let $ = En(), _ = [], ie = [], ke = null, Mt = 0;
-function En() {
+const ut = /* @__PURE__ */ new Set();
+let M = ta(), J = [], ve = [], De = null, en = 0;
+function ta() {
   const t = new URLSearchParams(location.search).get("twd");
   if (!t) return {};
   try {
@@ -9,140 +9,140 @@ function En() {
     return {};
   }
 }
-function $n() {
+function na() {
   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(M).length ? t.searchParams.set("twd", JSON.stringify(M)) : t.searchParams.delete("twd"), history.replaceState(history.state, "", t);
 }
-function Qe() {
-  $n(), qe.forEach((t) => t($));
+function kt() {
+  na(), ut.forEach((t) => t(M));
 }
-function J(t, e) {
-  if (JSON.stringify(t) === JSON.stringify($)) return;
+function le(t, e) {
+  if (JSON.stringify(t) === JSON.stringify(M)) return;
   const n = Date.now();
-  e && e === ke && n - Mt < 400 || (_.push($), _.length > 100 && _.shift()), ie = [], ke = e, Mt = n, $ = t, Qe();
+  e && e === De && n - en < 400 || (J.push(M), J.length > 100 && J.shift()), ve = [], De = e, en = n, M = t, kt();
 }
-function Ee(t, e) {
+function Ue(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 ht() {
+  return JSON.parse(JSON.stringify(M));
 }
-function Cn(t, e) {
-  J(D($, t, Ee($[t], e)), `${t}:${Object.keys(e)}`);
+function aa(t, e) {
+  le(U(M, t, Ue(M[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 oa(t, e = `multi:${Object.keys(t)}`) {
+  const n = Object.entries(t).reduce((a, [o, s]) => U(a, o, Ue(a[o], s)), M);
+  le(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 Sn(t, e, n) {
+  const a = U(M.scopes?.[t], e, Ue(M.scopes?.[t]?.[e], n)), o = U(M.scopes, t, Object.keys(a).length ? a : null);
+  le(U(M, "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 ra(t, e) {
+  if (e) return Sn(t, e, Object.fromEntries(
+    Object.keys(M.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(M.scopes, t, null);
+  le(U(M, "scopes", Object.keys(n).length ? n : null));
 }
-function Tn(t, e) {
-  const n = $.scopes?.[t];
+function sa(t, e) {
+  const n = M.scopes?.[t];
   if (!n || t === e) return;
-  let o = { ...$.scopes[e] };
+  let a = { ...M.scopes[e] };
   Object.entries(n).forEach(([s, r]) => {
-    o = D(o, s, Ee(o[s], r));
+    a = U(a, s, Ue(a[s], r));
   });
-  const a = D(D($.scopes, t, null), e, o);
-  J(D($, "scopes", a));
+  const o = U(U(M.scopes, t, null), e, a);
+  le(U(M, "scopes", o));
 }
-function Xt() {
-  J({});
+function $n() {
+  le({});
 }
-function Jt() {
-  _.length && (ie.push($), $ = _.pop(), ke = null, Qe());
+function En() {
+  J.length && (ve.push(M), M = J.pop(), De = null, kt());
 }
-function Zt() {
-  ie.length && (_.push($), $ = ie.pop(), ke = null, Qe());
+function Cn() {
+  ve.length && (J.push(M), M = ve.pop(), De = null, kt());
 }
-const Ln = () => _.length > 0, Pn = () => ie.length > 0;
-function Qt(t) {
-  return qe.add(t), () => qe.delete(t);
+const ia = () => J.length > 0, la = () => ve.length > 0;
+function Mn(t) {
+  return ut.add(t), () => ut.delete(t);
 }
-const Fn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const da = /* @__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: la,
+  canUndo: ia,
+  getState: ht,
+  moveScope: sa,
+  onChange: Mn,
+  redo: Cn,
+  removeScope: ra,
+  resetState: $n,
+  setScope: Sn,
+  setSection: aa,
+  setSections: oa,
+  undo: En
+}, Symbol.toStringTag, { value: "Module" })), Tn = [];
+let ft = [], St = {}, R = null, se = !1, An = {};
+function ca(t) {
+  typeof t == "function" && Tn.push(t);
+}
+const tn = (t) => Object.assign({}, ...Tn.map((e) => e(t) || {})), gt = (t) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t), pa = (t) => {
   try {
     return document.querySelector(t), !0;
   } catch {
     return !1;
   }
 };
-function Nn() {
+function ua() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function nn() {
+function Ln() {
   const t = document.documentElement;
-  _e.forEach((e) => t.style.removeProperty(e)), _e = [], et = {};
+  ft.forEach((e) => t.style.removeProperty(e)), ft = [], St = {};
 }
-function Ke(t) {
-  if (tn = t, Y) return;
+function mt(t) {
+  if (An = t, se) 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(`
+  Ln();
+  const n = tn(t), a = Object.entries(t.scopes || {}).filter(([s]) => pa(s)).sort(([s], [r]) => gt(r) - gt(s)).map(([s, r]) => [s, tn(r)]);
+  Object.entries(n).forEach(([s, r]) => e.style.setProperty(s, r)), ft = Object.keys(n), St = n;
+  const o = a.filter(([, s]) => Object.keys(s).length).map(([s, r]) => `${s} {
+${Object.entries(r).map(([i, l]) => `  ${i}: ${l} !important;`).join(`
 `)}
 }`).join(`
 `);
-  (a || R) && (Nn().textContent = a);
+  (o || R) && (ua().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 On(t) {
+  const e = document.documentElement, n = se, a = { ...St };
+  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, s]) => e.style.setProperty(o, s)), R && (R.disabled = !1));
   }
 }
-function jn(t, e = document.documentElement) {
-  return on(() => {
+function ha(t, e = document.documentElement) {
+  return On(() => {
     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 fa() {
+  se || (Ln(), R && (R.disabled = !0), se = !0);
 }
-function In() {
-  Y && (Y = !1, R && (R.disabled = !1), Ke(tn));
+function ga() {
+  se && (se = !1, R && (R.disabled = !1), mt(An));
 }
-const Dn = `
+const ma = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -163,49 +163,68 @@ const Dn = `
     z-index: 2147483647;
     font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     color: var(--p-fg);
+    /* The panel opens to the left of the launcher, bottoms aligned,
+       so it can use the full window height. */
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     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); }
+  /* Open or minimised: centred on the tabs. 10px = panel border 1 + tab bar
+     padding 6 + half a tab (~49px) − half the launcher (22). */
+  .launcher { transition: margin-bottom .2s cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .wrap.is-open .launcher { margin-bottom: 10px; }
+  @media (prefers-reduced-motion: reduce) { .launcher { transition: none; } }
+  .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 */
+    /* 86px = 16 + 16 margins + 44 launcher + 10 gap */
+    max-width: calc(100vw - 86px);
+    /* As tall as its content; scrolls only when the window is shorter.
+       32px = 16 margin below + 16 room at the top. */
+    max-height: calc(100vh - 32px);
+    max-height: calc(100dvh - 32px);
     background: var(--p-bg);
     border: 1px solid var(--p-line);
     border-radius: 14px;
@@ -217,8 +236,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 +433,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;
@@ -432,8 +451,9 @@ const Dn = `
     padding: 1px 4px;
   }
 
-  /* Beside the launcher (left of it, centred on it). The panel always sits
-     above the launcher, so a toast here never covers the footer's Copy prompt. */
+  /* Closed: beside the launcher (left of it, centred on it). Open or minimised:
+     the panel takes that spot, so the toast floats just above the tab bar
+     (63px tall), inside the panel's right edge. */
   .toast {
     position: absolute; bottom: 22px; right: 54px; transform: translateY(50%);
     background: var(--p-accent); color: var(--p-on-accent);
@@ -442,6 +462,7 @@ const Dn = `
     opacity: 0; transition: opacity .15s ease; pointer-events: none;
   }
   .toast.show { opacity: 1; }
+  .wrap.is-open .toast { bottom: 72px; right: 62px; transform: none; z-index: 3; }
 
   /* ---------- Proposals below: not yet designed in Figma ---------- */
 
@@ -480,7 +501,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 +571,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 +599,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 +663,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 +757,214 @@ 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; }
+
+  /* Minimised (proposal, not yet in Figma): only the tab bar (and the Compare
+     strip while it shows); clicking a tab opens the panel on that tab. */
+  .panel.minimised > :not(.tabbar):not(.original-pill) { display: none; }
+  .panel.minimised .tabbar { border-top: 0; }
+  .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); }
+`, O = (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: O(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  link: O(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: O(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
+  close: O(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
+  chevron: O(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: O(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
+  compare: O(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: O(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
+  redo: O(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
+  back: O(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
+  down: O(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
+  minimise: O(15, 2, '<path d="M5 12h14"/>'),
+  copy: O(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
+  warn: O(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: O(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  tabColour: O(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: O(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
+  tabSpacing: O(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
+  tabShape: O(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: O(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
+  sliders: O(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) {
+}, Pn = "twiddle:";
+function ne(t) {
   try {
-    return localStorage.getItem(an + t);
+    return localStorage.getItem(Pn + t);
   } catch {
     return null;
   }
 }
-function be(t, e) {
+function ge(t, e) {
   try {
-    localStorage.setItem(an + t, e);
+    localStorage.setItem(Pn + 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 ie({ 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);
+  a.append(...o);
   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;
+    s = 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 !== s && (r(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);
+  }), r(null), { el: a, setValue: r };
 }
-const rn = /var\(\s*(--twd-[\w-]+)/g, Bn = /::?[\w-]+(\([^)]*\))?/g;
-function* $e(t) {
+const Fn = /var\(\s*(--twd-[\w-]+)/g, ba = /::?[\w-]+(\([^)]*\))?/g;
+function* qe(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* qe(e.cssRules));
 }
-function Un() {
+function xa() {
   const t = [];
   for (const e of document.styleSheets) {
     if (e.ownerNode?.id === "twiddle-scoped") continue;
@@ -836,92 +974,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 qe(n)) {
+      const o = [...a.style.cssText.matchAll(Fn)].map((s) => s[1]);
+      o.length && t.push({ selectors: a.selectorText.split(","), vars: o });
     }
   }
   return t;
 }
-function Vn(t, e) {
-  const n = e.replace(Bn, "").trim() || "*";
+function wa(t, e) {
+  const n = e.replace(ba, "").trim() || "*";
   try {
     return t.matches(n);
   } catch {
     return !1;
   }
 }
-function sn(t) {
+function Nn(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 xa().forEach(({ selectors: a, vars: o }) => {
+    const s = a.find((r) => wa(t, r));
+    s && (o.forEach((r) => e.add(r)), n.push(s.trim()));
+  }), [...(t.getAttribute("style") || "").matchAll(Fn)].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 bt = (t) => window.CSS && CSS.escape ? CSS.escape(t) : t;
+function va(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(`#${bt(n.id)}`).length === 1)
+      return e.unshift(`#${bt(n.id)}`), e.join(" > ");
+    const a = n.localName, o = [...n.parentElement.children].filter((s) => s.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 ya(t, e = Nn(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], s = a.find((r) => e.some((i) => new RegExp(`\\.${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
+  return s ? `.${bt(s)}` : 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 ka(t) {
+  const e = Nn(t), n = ya(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: va(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);
+const xt = (t) => t.localName + [...t.classList].map((e) => `.${e}`).join(""), Sa = { radius: "px", intensity: "%", base: "px" }, jn = (t) => t.charAt(0).toUpperCase() + t.slice(1), $a = (t, e) => typeof e == "number" || /^\d+$/.test(e) ? `${e}${Sa[t] || ""}` : jn(String(e));
+function nn(t, e, n) {
+  const a = On(() => t.tokens({ [t.id]: e }) || {}), o = Object.keys(a);
   let s = {};
-  if (a.length) {
+  if (o.length) {
     const r = n.selector ? document.querySelector(n.selector) : void 0;
-    s = jn(a, r || void 0);
+    s = ha(o, r || 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(([r, i]) => ({ key: r, label: jn(r), value: $a(r, i), ...t.describe?.(r, i) || {} })),
+    tokens: o.map((r) => ({ name: r, from: s[r] || "", to: a[r] }))
   };
 }
-function Lt(t, e) {
+function an(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";
+  return e.forEach((a) => {
+    t[a.id] && n.push(nn(a, t[a.id], { kind: "global", selector: null }));
+  }), Object.entries(t.scopes || {}).forEach(([a, o]) => {
+    const s = gt(a) ? "class" : "element";
     e.forEach((r) => {
-      a[r.id] && n.push(Tt(r, a[r.id], { kind: s, selector: o }));
+      o[r.id] && n.push(nn(r, o[r.id], { kind: s, 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 Ea(t) {
+  const e = (o) => Object.values(o || {}).reduce((s, r) => s + Object.keys(r || {}).length, 0), { scopes: n, ...a } = t;
+  return e(a) + Object.values(n || {}).reduce((o, s) => o + e(s), 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 re = (t) => `\`${t}\``, Xe = (t) => t.map((e) => `  - ${re(e.name)}: ${e.from ? `${re(e.from)} → ` : ""}${re(e.to)}`), Je = (t) => `${t.title} › ${t.settings.map((e) => `${e.label}: ${e.value}`).join(", ")}`;
+function Ca(t) {
   let e = null;
   try {
     e = document.querySelector(t);
@@ -929,48 +1067,48 @@ 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 `${re(xt(e))}${n ? ` with text “${n}”` : ""}`;
 }
-function Pt(t, e) {
+function on(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 Ma(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 = [];
+  const a = t.filter((i) => i.kind === "global"), o = t.filter((i) => i.kind === "class"), s = t.filter((i) => i.kind === "element"), r = [];
   if (r.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 && (r.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) => r.push(`- **${Je(i)}**`, ...Xe(i.tokens)))), o.length && (r.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}`)));
+  ), on(o, "selector").forEach(([i, l]) => {
+    r.push(`- ${re(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((p) => r.push(`  - **${Je(p)}**`, ...Xe(p.tokens).map((c) => `  ${c}`)));
   })), s.length) {
-    const d = 1 + (o.length ? 1 : 0) + (a.length ? 1 : 0);
+    const i = 1 + (a.length ? 1 : 0) + (o.length ? 1 : 0);
     r.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}`)));
+    ), on(s, "selector").forEach(([l, p]) => {
+      r.push(`- ${Ca(l)}, found at ${re(l)}`), p.forEach((c) => r.push(`  - **${Je(c)}**`, ...Xe(c.tokens).map((h) => `  ${h}`)));
     });
   }
   return n.length && r.push(
@@ -979,7 +1117,7 @@ function Xn(t, { link: e = location.href, warnings: n = [] } = {}) {
     "",
     "Panel flagged these colour pairs as below WCAG AA with the new values:",
     "",
-    ...n.map((d) => `- ${d.text}`)
+    ...n.map((i) => `- ${i.text}`)
   ), r.push(
     "",
     "## Constraints",
@@ -991,68 +1129,68 @@ function Xn(t, { link: e = location.href, warnings: n = [] } = {}) {
   ), r.join(`
 `);
 }
-const ye = 4.5, Jn = 3, Zn = [
+const ze = 4.5, Ta = 3, Aa = [
   ["--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 Y;
+function $t(t) {
+  if (!t || (Y ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !Y)) return null;
+  Y.clearRect(0, 0, 1, 1), Y.fillStyle = "#000", Y.fillStyle = t, Y.fillRect(0, 0, 1, 1);
+  const [e, n, a, o] = Y.getImageData(0, 0, 1, 1).data;
+  return [e, n, a, o / 255];
+}
+function rn(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(), $t(n);
+}
+const sn = ([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);
+}, Rn = (t, e) => t.slice(0, 3).map((n, a) => n * t[3] + e[a] * (1 - t[3])).concat(1);
+function zn(t, e) {
+  const n = sn(t[3] < 1 ? Rn(t, e) : t), a = sn(e);
+  return (Math.max(n, a) + 0.05) / (Math.min(n, a) + 0.05);
+}
+const In = (t) => `${t.toFixed(1)}:1`;
+function Qe() {
   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 Aa.forEach(([e, n, a]) => {
+    const o = rn(e), s = rn(n);
+    if (!o || !s || s[3] === 0) return;
+    const r = zn(o, s);
+    r < ze && t.push({ label: a, ratio: r, needed: ze, text: `${a}: ${In(r)} · AA needs ${ze}` });
   }), t;
 }
-function Qn(t) {
+function La(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 = $t(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) => Rn(a, n), [255, 255, 255, 1]);
 }
-function eo(t) {
+function Oa(t) {
   if (!t.textContent.trim() && !t.placeholder) return null;
-  const e = getComputedStyle(t), n = tt(e.color);
+  const e = getComputedStyle(t), n = $t(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), s = a >= 24 || a >= 18.66 && parseInt(e.fontWeight, 10) >= 700 ? Ta : ze, r = zn(n, La(t));
+  return r < s ? { label: "This element", ratio: r, needed: s, text: `This element’s text: ${In(r)} · AA needs ${s}` } : 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 ln = "twiddle-panel", Pa = "0.7.1", dn = "https://panel.twiddle.in", Fa = "--twd-radius-control", Na = /var\(\s*--twd-/;
+function ja(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("--") && Na.test(e);
   });
 }
-function ro() {
-  if (!getComputedStyle(document.documentElement).getPropertyValue(no).trim()) return "no-tokens";
+function Ra() {
+  if (!getComputedStyle(document.documentElement).getPropertyValue(Fa).trim()) return "no-tokens";
   let t = !1;
   for (const e of document.styleSheets) {
     if (e.ownerNode?.id === "twiddle-scoped") continue;
@@ -1063,43 +1201,45 @@ function ro() {
       t = !0;
       continue;
     }
-    for (const o of $e(n)) if (ao(o)) return "ok";
+    for (const a of qe(n)) if (ja(a)) return "ok";
   }
   return document.querySelector('[style*="var(--twd-"]') ? "ok" : t ? "unknown" : "unused";
 }
-function so() {
+function za() {
   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) => {
+    for (const o of qe(a))
+      o.style.cssText.split(";").forEach((s) => {
         const r = s.slice(0, s.indexOf(":")).trim();
         r && !r.startsWith("--") && e(s);
       });
   }
   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 cn = [
+  { label: "With a build tool, in your entry file", code: `import '${ln}/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/${ln}@${Pa}/dist/twiddle-tokens.css">` }
+], Ia = `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 +1252,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;
+      o.textContent = s || "", o.hidden = !s;
     },
     append(...s) {
       e.append(...s);
     }
   };
 }
-function lo({ label: t, ends: e, cols: n = 9, rows: o = 5, onInput: a }) {
+function Da({ label: t, ends: e, cols: n = 9, rows: a = 5, onInput: o }) {
   const s = document.createElement("div");
   s.className = "pad", s.tabIndex = 0, s.setAttribute("role", "group"), s.setAttribute("aria-roledescription", "2D slider");
-  const r = (g, u) => {
-    const y = document.createElement("span");
-    return y.className = `pad-edge ${g}`, y.textContent = u, y.setAttribute("aria-hidden", "true"), y;
+  const r = (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++)
+  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), s.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);
+  s.addEventListener("pointerdown", (b) => {
+    s.setPointerCapture(b.pointerId), s.classList.add("dragging"), m(b);
+  }), s.addEventListener("pointermove", (b) => {
+    s.hasPointerCapture(b.pointerId) && m(b);
   });
-  const b = (g) => {
-    s.hasPointerCapture(g.pointerId) && s.releasePointerCapture(g.pointerId), s.classList.remove("dragging");
+  const x = (b) => {
+    s.hasPointerCapture(b.pointerId) && s.releasePointerCapture(b.pointerId), s.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 s.addEventListener("pointerup", x), s.addEventListener("pointercancel", x), s.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,
     /** 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(), s.setAttribute("aria-label", v ? `${t}: ${v}` : t);
     }
   };
 }
-function un({ label: t, min: e, max: n, step: o = 1, format: a = String, onInput: s }) {
+function Dn({ label: t, min: e, max: n, step: a = 1, format: o = 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);
+  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"), r.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(), s(Number(i.value));
   }), {
     el: r,
     /** 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 Ba({ label: t, options: e, columns: n = 3, className: a = "", onSelect: o }) {
+  const s = document.createElement("div");
+  s.className = `tiles ${a}`.trim(), s.style.setProperty("--cols", n), s.setAttribute("role", "radiogroup"), s.setAttribute("aria-label", t);
+  const r = 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;
+  });
+  s.append(...r);
+  let i = null;
+  function l(c) {
+    i = c, r.forEach((y) => y.setAttribute("aria-checked", String(y.dataset.value === c)));
+    const h = Math.max(0, r.findIndex((y) => y.dataset.value === c));
+    r.forEach((y, f) => {
+      y.tabIndex = f === h ? 0 : -1;
+    });
+  }
+  function p(c, h) {
+    c !== i && (l(c), o(c)), h && r.find((y) => y.dataset.value === c).focus();
+  }
+  return s.addEventListener("keydown", (c) => {
+    const h = r.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 + r.length) % r.length;
+    else if (c.key === "Home") f = 0;
+    else if (c.key === "End") f = r.length - 1;
+    else return;
+    c.preventDefault(), p(r[f].dataset.value, !0);
+  }), l(null), { el: s, 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 Ua = 999;
+function Bn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: s, max: r, extra: i = [], extraTokens: l = () => ({}), shape: p = "card" }) {
+  const c = (f) => s.find((m) => m.value === f), h = (f) => f >= Ua ? "full" : `${f}px`, y = (f) => {
+    if (typeof f.radius == "number" && isFinite(f.radius))
+      return { [a]: `${Math.min(Math.max(f.radius, 0), r)}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) };
+    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 = ie({
           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: s.map((E) => ({ value: E.value, label: E.label, title: h(E.radius) })),
+          onSelect: (E) => m.setSection(t, { corners: E, radius: null })
+        }), v = Dn({
           label: `${e} corner radius`,
           min: 0,
           max: r,
-          format: p,
-          onInput: (k) => f.setSection(t, { radius: k, corners: null })
+          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)), Q = m.getState()[t] || {}, K = c(Q.corners) || s.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, r), 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: s.length,
+          options: s.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) || s.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: s, valueText: r }) {
+  const i = B(a), l = ie({
+    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] || s;
+    l.setValue(c), i.setValue(r ? r(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 qa(t, { section: e, key: n, label: a, min: o, max: s, fallback: r, format: i }) {
+  const l = B(a), p = Dn({ label: a, min: o, max: s, 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 : r);
   };
-  return p(), t.onChange(p), l.el;
+  return c(), t.onChange(c), l.el;
+}
+function V(t, { section: e, key: n, label: a, options: o, columns: s = 3, className: r = "", fallback: i, valueText: l, current: p, select: c }) {
+  const h = B(a), y = Ba({
+    label: a,
+    options: o,
+    columns: s,
+    className: r,
+    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 f(), t.onChange(f), h.el;
 }
-const zt = (t, e) => e.map((n) => `${t}${n}`), fn = {
+const pn = (t, e) => e.map((n) => `${t}${n}`), Un = {
   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: pn("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: pn("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}`, et = (t, e) => Object.prototype.hasOwnProperty.call(t.getState().custom || {}, e), un = (t, e) => Un[e].tokens.some((n) => (t.custom || {})[n] != null);
+function Va(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 Ha(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 _a(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 s = o.querySelector("input"), r = 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 = s.value;
+    h && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${h}`);
+    const x = Ha(m, n), b = F(_(e));
+    if (x === null) {
+      et(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 && !et(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 }));
+  s.addEventListener("change", y), s.addEventListener("blur", () => f()), s.addEventListener("keydown", (m) => {
+    m.key === "Enter" && (m.preventDefault(), s.blur()), m.key === "Escape" && (m.stopPropagation(), f(), s.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 = et(t, e), b = Va(m, n);
+    h = b ? b.unit : "", document.activeElement !== s && o.getRootNode().activeElement !== s && (s.value = b ? String(b.n) : m), s.title = m, r.textContent = h, r.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 Ka = {
   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);
+  parts: Object.fromEntries(Object.entries(Un).map(([t, e]) => [t, (n, a, { label: o = e.label } = {}) => {
+    const s = B(o);
     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()}` : "");
+    const r = e.tokens[0], i = e.tokens[e.tokens.length - 1];
+    s.setValue(e.tokens.length > 2 && /-\w+$/.test(r) ? `${_(r)} … ${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(_a(a, p, e.kind, e.bar))), s.append(l), n.append(s.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 }, wt = [0.75, 1.25], hn = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => `--twd-space-${t}`);
+function ae(t = {}) {
+  return typeof t.factor == "number" && isFinite(t.factor) ? Math.min(wt[1], Math.max(wt[0], t.factor)) : we[t.spacing] || 1;
 }
-const Dt = (t) => `${Math.round(t * 100)}%`, bo = {
+const tt = (t) => `${Math.round(t * 100)}%`, Ga = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
-  uses: It,
+  uses: hn,
   tokens(t) {
-    const e = Ze(t.density);
+    const e = ae(t.density);
     if (e === 1) return {};
     const n = {};
-    return It.forEach((o) => {
-      const a = Se(F(o), e);
-      a && (n[o] = a);
+    return hn.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: tt(e) } : null,
   parts: {
+    // Tabbed layout: presets as tiles with a tiny layout sketch.
+    spacingTiles(t, e, { label: n = "Density" } = {}) {
+      const a = (o, s) => `<span class="sketch" style="padding:${s}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 s = ae(o.density);
+          return Object.keys(we).find((r) => we[r] === s) || null;
+        },
+        select: (o) => e.setSection("density", { spacing: o, factor: null }),
+        valueText: (o, s) => un(s, "spacing") ? "Custom" : o ? "" : tt(ae(s.density))
+      }));
+    },
     spacing(t, e, { label: n = "Spacing" } = {}) {
-      const o = B(n), a = X({
+      const a = B(n), o = ie({
         label: n,
         options: [{ value: "compact", label: "Compact" }, { value: "regular", label: "Regular" }, { value: "comfy", label: "Comfy" }],
         onSelect: (r) => e.setSection("density", { spacing: r, factor: null })
       });
-      o.append(a.el);
+      a.append(o.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));
+        const r = e.getState().density || {}, i = ae(r), l = Object.keys(we).find((p) => we[p] === i);
+        o.setValue(l || null), a.setValue(un(e.getState(), "spacing") ? "Custom" : l ? "" : tt(i));
       };
-      s(), e.onChange(s), t.append(o.el);
+      s(), e.onChange(s), 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));
+  }
+}, Wa = '<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>', Ya = [
+  [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]
+], nt = (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 Za({ 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 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 i = document.createElement("button");
+  i.type = "button", i.className = "colour-pipette", i.innerHTML = Wa, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, s, r, i);
+  const l = document.createElement("div");
+  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = Ya.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(), s.style.background = f, n.getRootNode().activeElement !== r && (r.value = f), n.style.setProperty("--brand", f);
+  }, h = (f) => {
+    f !== p && (c(f), e(f));
+  };
+  s.addEventListener("click", () => {
+    if (o.showPicker)
+      try {
+        o.showPicker();
+        return;
+      } catch {
+      }
+    o.click();
+  }), o.addEventListener("input", () => h(o.value.toUpperCase())), r.addEventListener("input", () => {
+    const f = nt(r.value);
+    f && h(f);
+  });
+  const y = () => {
+    r.value = p;
+  };
+  return r.addEventListener("blur", y), r.addEventListener("keydown", (f) => {
+    f.key === "Enter" && (y(), r.select());
+  }), i.addEventListener("click", async () => {
+    if ("EyeDropper" in window)
+      try {
+        const { sRGBHex: f } = await new window.EyeDropper().open(), m = nt(f);
+        m && h(m);
+      } catch {
+      }
+    else
+      s.click();
+  }), { el: n, setValue: (f) => c(nt(f) || p) };
+}
+function Xa({ 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 s = null;
+  function r(l) {
+    s = 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 !== s && (r(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);
+  }), r(null), { el: a, setValue: r };
+}
+const Ja = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => Object.fromEntries(t.split(" ").map((e, n) => [Ja[n], `#${e}`])), at = {
+  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}`])), ot = {
+  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")
+}, Ie = [
+  { 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" }
+], fn = "#4F46E5", Qa = "#A0743C", eo = [
+  // Figma Swatch row sample colours
+  { value: "pure", label: "Pure", colour: "#8E8E93" },
+  { value: "subtle", label: "Subtle", colour: "#8A89A6" },
+  { value: "warm", label: "Warm", colour: "#9C9389" }
+], gn = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], to = {
+  // proposal
+  bg: "#0F0F11",
+  surface: "#18181B",
+  "surface-raised": "#1F1F23",
+  text: "#F4F4F5",
+  "text-muted": "#A1A1AA",
+  border: "#2E2E33"
+}, no = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, Z = (t) => /^#[0-9a-f]{6}$/i.test(t || ""), rt = (t) => [500, 600, 700].includes(Number(t.shade)) ? Number(t.shade) : 600, st = (t) => t[0].toUpperCase() + t.slice(1);
+function mn(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))), s = 0.2126 * n + 0.7152 * a + 0.0722 * o, r = 1.05 / (s + 0.05), i = (s + 0.05) / (98e-4 + 0.05);
+  return r >= i ? "#FFFFFF" : "#18181B";
+}
+const Be = {
+  id: "colour",
+  title: "Colour",
+  hint: "Brand colour · neutral tint · mode",
+  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...gn.map((t) => `--twd-${t}`)],
+  tokens(t) {
+    const e = t.colour || {}, n = {}, a = e.mode === "dark", o = ot[e.primary];
+    if (!Z(e.brand) && o) {
+      const i = rt(e);
+      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = mn(o[i]), n["--twd-focus"] = o[500];
+    }
+    Z(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"] = mn(e.brand), n["--twd-focus"] = e.brand);
+    const s = e.tint === "subtle" ? Z(e.brand) ? e.brand : F("--twd-primary") || fn : e.tint === "warm" ? Qa : null, r = at[e.neutral];
+    if (r) {
+      const i = a ? { bg: r[950], surface: r[900], "surface-raised": r[800], text: r[100], "text-muted": r[400], border: r[800] } : { bg: r[50], surface: "#ffffff", "surface-raised": "#ffffff", text: r[900], "text-muted": r[500], border: r[200] };
+      Object.entries(i).forEach(([l, p]) => {
+        n[`--twd-${l}`] = p;
+      });
+    } else (a || s) && gn.forEach((i) => {
+      const l = a ? to[i] : F(`--twd-${i}`);
+      l && (n[`--twd-${i}`] = s ? `color-mix(in oklch, ${l} ${100 - no[i]}%, ${s})` : l);
+    });
+    return n;
+  },
+  parts: {
+    // ---- Tabbed layout (Colour tab): themes, then Tailwind fine-tuning ----
+    themeTiles(t, e, { label: n = "Theme" } = {}) {
+      const a = (o) => {
+        const s = at[o.neutral], r = ot[o.primary];
+        return `<span class="theme" style="--bg:${s[50]};--line:${s[200]};--ink:${s[900]};--soft:${s[500]};--pri:${r[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[r[400], r[500], r[600], r[700], r[800], s[200], s[500], s[900]].map((i) => `<i style="background:${i}"></i>`).join("")}</span>`;
+      };
+      t.append(V(e, {
+        section: "colour",
+        key: "theme",
+        label: n,
+        columns: 2,
+        className: "tiles-themes",
+        options: Ie.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
+        current: (o) => {
+          const s = o.colour || {};
+          return Z(s.brand) ? null : Ie.find((r) => r.primary === s.primary && r.neutral === s.neutral)?.value || null;
+        },
+        select: (o) => {
+          const s = Ie.find((r) => r.value === o);
+          e.setSection("colour", { primary: s.primary, neutral: s.neutral, shade: null, brand: null, tint: null });
+        },
+        valueText: (o, s) => {
+          const r = s.colour || {};
+          return o ? "" : r.primary || r.neutral || r.brand ? "Custom" : "Prototype colours";
+        }
+      }));
+    },
+    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(ot).map(([i, l]) => ({ value: i, label: st(i), title: st(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
+        current: (i) => {
+          const l = i.colour || {};
+          return Z(l.brand) ? null : l.primary || null;
+        },
+        select: (i) => e.setSection("colour", { primary: i, brand: null })
+      });
+      o.querySelector(".field-head").remove();
+      const s = ie({ 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, s.el);
+      const r = () => {
+        const i = e.getState().colour || {};
+        s.setValue(String(rt(i))), a.setValue(Z(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${rt(i)}` : "");
+      };
+      r(), e.onChange(r), 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(at).map(([a, o]) => ({ value: a, label: st(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((s) => `<i style="background:${s}"></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), Be.parts.brand(a, e, { label: "Brand" }), Z((e.getState().colour || {}).brand) && (n.open = !0), t.append(n);
+    },
+    brand(t, e, { label: n = "Brand" } = {}) {
+      const a = B(n), o = Za({ label: "Brand colour", onInput: (r) => e.setSection("colour", { brand: r }) });
+      a.append(o.el);
+      const s = () => o.setValue((e.getState().colour || {}).brand || (e.readToken || F)("--twd-primary") || fn);
+      s(), e.onChange(s), t.append(a.el);
+    },
+    neutral(t, e, { label: n = "Neutral" } = {}) {
+      const a = B(n), o = Xa({ label: "Neutral tint", options: eo, onSelect: (r) => e.setSection("colour", { tint: r }) });
+      a.append(o.el);
+      const s = () => o.setValue((e.getState().colour || {}).tint || "pure");
+      s(), e.onChange(s), 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));
+  }
+}, Oe = (t, e = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`, ao = {
+  // proposal recipes; Solid leaves tokens.css defaults
+  soft: { bg: Oe(14), fg: "var(--twd-primary)", border: "transparent", hover: Oe(22) },
+  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Oe(8, "transparent") },
+  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Oe(10, "transparent") }
+}, oo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, qn = Bn({
+  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 = ao[t.style];
+    n && Object.entries(n).forEach(([r, i]) => {
+      e[`--twd-button-${r}`] = i;
+    });
+    const a = oo[t.size];
+    if (!a) return e;
+    const o = ye(F("--twd-control-height"), a.height), s = ye(F("--twd-control-pad-x"), a.pad);
+    return o && (e["--twd-control-height"] = o), s && (e["--twd-control-pad-x"] = s), 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" }]
+    }
+  ]
+}), ro = {
+  // 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" }
+}, vt = Bn({
+  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 = ro[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" }]
+    }
+  ]
+}), oe = 60, it = {
   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], s) => {
+  const r = Math.min(1, +(o * s).toFixed(3));
+  return r <= 0 ? "none" : `${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${r})`;
+}, yt = {
   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)) : oe;
     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 = it[n];
+    if (!o) return {};
+    if (n === "soft" && a === oe) return {};
+    const s = a / oe;
     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, s),
+      "--twd-shadow-md": Pe(o.md, s),
+      "--twd-shadow-lg": Pe(o.lg, s)
     };
   },
   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:${it[o] ? Pe(it[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 +2037,432 @@ 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(qa(e, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: oe, 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";
+}, so = (t) => Math.min(1, Math.max(0, t)), bn = (t) => Math.round(t / 50) * 50, lt = (t) => `${+t.toFixed(1)}%`;
+function Et(t = {}) {
+  return typeof t.bold == "number" && isFinite(t.bold) && t.bold !== 0.5 ? so(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);
+const Fe = (t, e, n) => (t.tokens(e) || {})[n] || F(n), io = {
+  id: "character",
+  title: "Character",
+  hint: "Subtle ↔ Bold",
+  uses: [],
+  // set from the Simple page only
+  tokens(t) {
+    const e = Et(t.character);
+    if (e === null) return {};
+    const n = {}, a = 2 * e - 1, o = Math.max(0, a), s = Math.max(0, -a);
+    n["--twd-weight-heading"] = String(bn(600 + 200 * a)), n["--twd-weight-strong"] = String(bn(600 + 100 * a));
+    const r = Fe(Be, t, "--twd-border");
+    if (s && (n["--twd-border"] = `color-mix(in oklch, ${r} ${lt(100 - 50 * s)}, var(--twd-bg))`), o) {
+      n["--twd-border"] = `color-mix(in oklch, ${r} ${lt(100 - 90 * o)}, var(--twd-text))`;
+      const l = Fe(Be, t, "--twd-text-muted");
+      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${lt(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((p) => {
+        const c = p === "--twd-border-width-container" ? Fe(vt, t, p) : F(p), h = parseFloat(c);
+        isNaN(h) || (n[p] = `${Math.round(h * (1 + o))}px`);
+      }), [[qn, "--twd-radius-control"], [vt, "--twd-radius-container"]].forEach(([p, c]) => {
+        const h = parseFloat(Fe(p, t, c));
+        !isNaN(h) && h < 999 && (n[c] = ye(`${h}px`, 1 - 0.5 * o));
+      });
+    }
+    const i = t.depth || {};
+    if (!i.style) {
+      const l = typeof i.intensity == "number" ? i.intensity : oe, p = s ? yt.tokens({ depth: { style: "soft", intensity: l * (1 - s) } }) : yt.tokens({ depth: { style: "bold", intensity: oe * o } });
+      Object.assign(n, p);
+    }
+    return n;
   },
-  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);
+  describe: (t, e) => t === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(e * 100)}%` } : null
+}, lo = '<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>', co = '<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 po = 0;
+function uo({ label: t, options: e, onSelect: n, placeholder: a, onOpen: o }) {
+  const s = `twd-fonts-${++po}`, r = document.createElement("div");
+  r.className = "font-select";
+  const i = document.createElement("button");
+  i.type = "button", i.className = "font-trigger", i.setAttribute("aria-haspopup", "listbox"), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-controls", s), i.innerHTML = `
+    <span class="font-aa" aria-hidden="true">Aa</span>
+    <span class="font-name"></span>
+    <span class="font-fonts"></span>
+    <span class="font-chevron">${lo}</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 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">${co}</span>`, v.addEventListener("click", () => b(u.value)), v;
+  });
+  l.append(...p), r.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)));
   }
-}, 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 },
+  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), r.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(r) || 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: r, setValue: h };
+}
+const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', Ne = 'Georgia, "Times New Roman", serif', X = [
+  { 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", ${Ne}`, 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", ${Ne}`, 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", ${Ne}`, 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", ${Ne}`, 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 }, xn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, wn = /* @__PURE__ */ new Set();
+function dt(t) {
+  const e = t.filter((a) => !wn.has(a));
+  if (!e.length) return;
+  e.forEach((a) => wn.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 ho = {
+  id: "typography",
+  title: "Typography",
+  hint: "Font pairing · base size · scale",
+  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(xn).map((t) => `--twd-text-${t}`)],
+  tokens(t) {
+    const e = t.typography || {}, n = {}, a = X.find((o) => o.value === e.font);
+    if (a && (dt(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), e.base || e.scale) {
+      const o = Number(e.base) || 16, s = be[e.scale] || be.balanced;
+      Object.entries(xn).forEach(([r, i]) => {
+        n[`--twd-text-${r}`] = `${+(o * s ** i / 16).toFixed(3)}rem`;
+      });
+    }
+    return n;
+  },
+  parts: {
+    fonts(t, e, { label: n = "Fonts" } = {}) {
+      const a = B(n), o = uo({
+        label: "Font pairing",
+        options: X.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: () => dt([...new Set(X.flatMap((r) => r.load))]),
+        onSelect: (r) => e.setSection("typography", { font: r })
+      });
+      a.append(o.el);
+      const s = () => o.setValue((e.getState().typography || {}).font || null);
+      s(), e.onChange(s), 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>`, s = 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 },
+          ...X.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" : X.find((l) => l.value === i)?.name || ""
+      }), r = new IntersectionObserver((i) => {
+        i.some((l) => l.isIntersecting) && (dt([...new Set(X.flatMap((l) => l.load))]), r.disconnect());
+      });
+      r.observe(s), t.append(s);
+    },
+    scaleTiles(t, e, { label: n = "Scale" } = {}) {
+      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((s) => `<b style="font-size:${Math.round(13 * o ** s)}px">A</b>`).join("")}</span>`;
+      t.append(V(e, {
+        section: "typography",
+        key: "scale",
+        label: n,
+        fallback: "balanced",
+        options: Object.entries(be).map(([o, s]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(s) })),
+        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));
+  }
+}, [vn, je] = wt;
+function fo(t) {
+  return t > 0.56 ? "Bold" : t < 0.44 ? "Subtle" : "Balanced";
+}
+function Vn(t) {
+  return t > 1.06 ? "Comfy" : t < 0.94 ? "Compact" : "Regular";
+}
+const Re = (t) => t && t[0].toUpperCase() + t.slice(1), yn = [
+  ["colour", "Colour", (t) => {
+    const e = t.colour || {}, n = Ie.find((o) => o.primary === e.primary && o.neutral === e.neutral);
+    return { text: `${e.brand ? e.brand.toUpperCase() : n && !e.shade ? n.label : e.primary ? `${Re(e.primary)}${e.neutral ? ` · ${Re(e.neutral)}` : ""}` : "Prototype colours"}${e.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
+  }],
+  ["type", "Type", (t) => {
+    const e = t.typography || {};
+    return { text: `${X.find((n) => n.value === e.font)?.name || "Prototype fonts"} · ${e.base || 16}px` };
+  }],
+  ["spacing", "Spacing", (t) => ({ text: Vn(ae(t.density)) })],
+  ["shape", "Shape", (t) => ({ text: `${Re((t.buttons || {}).corners) || "Default"} corners` })],
+  ["shadows", "Shadows", (t) => ({ text: Re((t.depth || {}).style) || (Et(t.character) !== null ? "From the pad" : "Default") })]
+], go = {
+  summary(t, e, { label: n = "Current look", goTab: a } = {}) {
+    const o = B(n), s = document.createElement("div");
+    s.className = "summary", yn.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)), s.append(p);
+    }), o.append(s);
+    const r = () => {
+      const i = e.getState();
+      yn.forEach(([l, , p]) => {
+        const c = s.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);
+      });
+    };
+    r(), e.onChange(r), t.append(o.el);
+  },
+  character(t, e, { label: n = "Character" } = {}) {
+    const a = B(n), o = Da({
+      label: n,
+      ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
+      onInput: (r, i) => {
+        const l = +(je - i * (je - vn)).toFixed(3), p = +r.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 s = () => {
+      const r = e.getState(), i = ae(r.density), l = Et(r.character), p = l === null ? 0.5 : l, c = `${Vn(i)} · ${fo(p)}`;
+      o.setValue(p, (je - i) / (je - vn), c), a.setValue(c);
+    };
+    s(), e.onChange(s), t.append(a.el);
+  }
+}, ct = [
+  { 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) => {
+], mo = [1, 2, 3, 4, 5, 6, 7, 8], bo = /^var\(\s*--twd-space-(\d)\s*\)$/, pt = (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>
+function xo(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">${M.down}</span>
+      <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>${M.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${e.label}" hidden>${A.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;
+  const s = o.querySelector("select"), r = o.querySelector(".role-fixed"), i = r.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 = bo.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;
   s.addEventListener("change", () => {
     if (s.value === "fixed") {
-      const g = De(F(o));
-      m(g != null ? `${g}px` : F(o)), d.focus(), d.select();
+      const b = pt(F(a));
+      h(b != null ? `${b}px` : F(a)), i.focus(), i.select();
       return;
     }
-    const b = `var(--twd-space-${s.value})`;
-    m(v(b) ? null : b);
+    const x = `var(--twd-space-${s.value})`;
+    h(y(x) ? null : x);
   });
   const f = () => {
-    const b = d.value.trim();
-    if (!b) return m(null);
-    m(/^-?\d*\.?\d+$/.test(b) ? `${b}px` : b);
+    const x = i.value.trim();
+    if (!x) return h(null);
+    h(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
   };
-  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;
+  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 (s.innerHTML = mo.map((u) => `<option value="${u}">space-${u} · ${pt(F(`--twd-space-${u}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', s.value = x.step ? String(x.step) : "fixed", r.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
+      const u = pt(x.fixed);
+      i.value = u != null ? String(u) : x.fixed;
     }
-    const g = c() != null;
-    a.classList.toggle("edited", g), l.hidden = !g;
+    const b = p() != null;
+    o.classList.toggle("edited", b), l.hidden = !b;
   }
-  return x(), t.onChange(x), a;
+  return m(), t.onChange(m), o;
 }
-const $o = {
+const wo = {
   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 a = za(), o = B(n);
+    o.el.classList.add("token-field");
+    const s = ct.filter((l) => !a.has(`--twd-${l.key}`));
+    o.setValue(s.length === ct.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>
+    r.className = "token-rows", ct.forEach((l) => r.append(xo(e, l, a.has(`--twd-${l.key}`)))), o.append(r), t.append(o.el);
+    const i = document.createElement("p");
+    i.className = "role-note", i.textContent = s.length ? `Only elements styled with these tokens change. Not used on this page: ${s.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", 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"]] }
+  ] }
+], P = (t) => String(t).replace(/[&<>"]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[e]);
+function vo({ 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" }), s = (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>${ma}</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>
-        </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("")}
+          <button class="icon-btn" data-action="pick" title="Pick an element to tweak on its own" aria-label="Pick an element" aria-pressed="false">${A.pick}</button>
+          <button class="icon-btn" data-action="compare" title="Hold to see the original (Alt+C toggles)" aria-label="Compare with original" aria-pressed="false">${A.compare}</button>
+          <button class="icon-btn" data-action="copy" title="Copy link to this version" aria-label="Copy link">${A.link}</button>
+          <button class="icon-btn" data-action="reset" title="Reset to defaults" aria-label="Reset">${A.reset}</button>
+          <button class="icon-btn" data-action="minimise" title="Minimise to the tabs" aria-label="Minimise to the tabs">${A.minimise}</button>
+          <button class="icon-btn" data-action="close" title="Close (Alt+T)" aria-label="Close">${A.close}</button>
         </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 +2472,431 @@ 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 r = (d) => o.querySelector(d), i = r(".panel"), l = r(".launcher"), p = r(".toast"), c = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, h = r(".pick-box"), y = r(".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;
+        }), fe = ie({
           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) => {
+            fe.setValue(j), S.forEach((z, ea) => {
+              z.hidden = String(ea) !== j;
             });
           }
         });
-        re.setValue("0"), L.forEach((P, N) => {
-          P.hidden = N !== 0;
-        }), i.append(re.el, ...L);
+        fe.setValue("0"), S.forEach((j, z) => {
+          j.hidden = z !== 0;
+        }), d.append(fe.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" ? go[k] : $ === "roles" ? wo[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();
-  }
-  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 ee() {
-    d.hidden = !1, l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), be("panel", "open");
-  }
-  function Me() {
-    d.hidden = !0, l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), be("panel", "closed"), pe();
-  }
-  function Ae() {
-    d.hidden ? ee() : Me();
-  }
-  let nt;
-  function V(i) {
-    c.textContent = i, c.classList.add("show"), clearTimeout(nt), nt = setTimeout(() => c.classList.remove("show"), 1600);
-  }
-  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;
+  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 === ne("tab")) ? ne("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 Q = (d) => d.map((g) => `<div class="warning">${A.warn}<span>${P(g.text)}</span></div>`).join("");
+  let K = "global";
+  function G(d) {
+    K = d, Object.entries(c).forEach(([g, w]) => {
+      w.hidden = g !== d;
+    }), r('[data-action="changes"]').setAttribute("aria-pressed", String(d === "changes")), d !== "local" && Wn(), d === "changes" && Ht(), L();
+  }
+  E(v);
+  const Ve = "cubic-bezier(0.3, 0.7, 0.2, 1)", He = "cubic-bezier(0.2, 0.8, 0.2, 1)", Se = 640, de = 100, _e = 50, Hn = () => l.querySelector(".mark-knob"), _n = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
+  function Ct(d) {
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches || !l.animate) return;
+    const g = Hn(), [w, $] = _n(), k = (C) => `translateY(${C}px)`;
+    if (d) {
+      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Se, easing: Ve });
+      const C = [{ transform: "scale(0.4)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }];
+      $.animate(C, { duration: de * 2, delay: Se * 0.12, easing: Ve, fill: "backwards" }), w.animate(C, { duration: de * 2, delay: Se * 0.32 + _e, easing: Ve, fill: "backwards" });
+    } else {
+      const C = [{ opacity: 1 }, { opacity: 0 }];
+      w.animate(C, { duration: de, easing: He }), $.animate(C, { duration: de, delay: _e / 2, easing: He, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Se * 0.7, delay: de + _e / 2, easing: He, fill: "backwards" });
+    }
+  }
+  const Mt = r(".wrap");
+  let Tt = !1;
+  function $e(d) {
+    Tt = d, i.classList.toggle("minimised", d), i.hidden || ge("panel", d ? "tabs" : "open");
+  }
+  function W({ animate: d = !0 } = {}) {
+    i.hidden && d && Ct(!0), i.hidden = !1, Mt.classList.add("is-open"), l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), $e(!1);
+  }
+  function Kn() {
+    i.hidden && W(), $e(!0);
+  }
+  function Ke() {
+    i.hidden || Ct(!1), i.hidden = !0, Mt.classList.remove("is-open"), l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), ge("panel", "closed"), Ee();
+  }
+  function Ge() {
+    i.hidden ? W() : Ke();
+  }
+  let At;
+  function H(d) {
+    p.textContent = d, p.classList.add("show"), clearTimeout(At), At = setTimeout(() => p.classList.remove("show"), 1600);
+  }
+  function ce(d, g) {
+    navigator.clipboard.writeText(d).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
+  }
+  let We = null;
+  function ee(d, g) {
+    if (We = 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 || xt(d), h.hidden = !1;
   }
-  const ot = () => {
-    Te && !m.hidden && G(Te, v.textContent);
+  const Lt = () => {
+    We && !h.hidden && ee(We, 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", Lt, !0), window.addEventListener("resize", Lt);
+  let pe = !1;
+  const Ot = r('[data-action="pick"]'), Pt = (d) => d.composedPath().includes(a);
+  function Ft(d) {
+    if (Pt(d)) return;
+    const g = d.target;
+    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && ee(g);
+  }
+  function Nt(d) {
+    if (Pt(d) || (d.preventDefault(), d.stopPropagation(), d.type !== "click")) return;
+    const g = d.target;
+    !g || g === document.documentElement || g === document.body || (Ee(), It(g));
+  }
+  function jt(d) {
+    d.key === "Escape" && (d.preventDefault(), Ee(), T && ee(T.el));
+  }
+  const Rt = ["pointerdown", "mousedown", "mouseup", "click"];
+  function zt() {
+    if (!pe) {
+      if (pe = !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");
+      W(), Ot.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Ft, !0), Rt.forEach((d) => document.addEventListener(d, Nt, !0)), document.addEventListener("keydown", jt, !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 Ee() {
+    pe && (pe = !1, Ot.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Ft, !0), Rt.forEach((d) => document.removeEventListener(d, Nt, !0)), document.removeEventListener("keydown", jt, !0), ee(T ? T.el : null));
   }
-  let C = null;
-  function mn(i, h) {
+  let T = null;
+  function Gn(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 It(d, g) {
+    const w = ka(d), $ = e.getState().scopes || {};
+    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), T && T.dispose(), T = { el: d, info: w, target: g, dispose: () => {
+    } }, Ye(), G("local"), W(), ee(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 Dt = () => T.target === "class" ? T.info.classSelector : T.info.elementSelector;
+  function Ye() {
+    T.dispose();
+    const { info: d } = T, 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>${P(xt(d.el))}</code>
+            ${d.text ? `<span class="muted">“${P(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 ? s(g) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
+    `, d.classSelector) {
+      const j = ie({
         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), T.target = z, Ye();
         }
       });
-      P.setValue(C.target), w.querySelector(".scope-target").append(P.el);
+      j.setValue(T.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 } = Gn(Dt(), d.el), C = m(w, g, $);
+    C[0] && (C[0].open = !0);
+    const q = w.querySelector(".warnings"), S = () => {
+      const j = d.tokens.size ? Oa(d.el) : null;
+      q.innerHTML = j ? Q([j]) : "";
     };
-    L();
-    const re = e.onChange(L);
-    C.dispose = () => {
-      E(), re();
+    S();
+    const fe = e.onChange(S);
+    T.dispose = () => {
+      k(), fe();
     };
   }
-  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 Bt() {
+    if (!T || !T.info.classSelector) return;
+    const d = e.getState().scopes || {}, g = T.target === "class" ? "element" : "class", w = g === "class" ? T.info.classSelector : T.info.elementSelector;
+    !d[Dt()] && d[w] && (T.target = g, Ye());
   }
-  const ft = () => {
-    e.undo(), ht();
-  }, gt = () => {
-    e.redo(), ht();
+  const Ut = () => {
+    e.undo(), Bt();
+  }, qt = () => {
+    e.redo(), Bt();
   };
-  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 Wn() {
+    T && (T.dispose(), T = null, c.local.innerHTML = "", ee(null));
+  }
+  const Vt = (d) => d.kind === "global" ? "Whole page" : d.kind === "class" ? `All ${d.selector}` : "One element";
+  function Ht() {
+    const d = an(e.getState(), t), g = Qe(), 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>${Q(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">${Q(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="${P(k)}" title="Select it on the page">${P(Vt(C[0]))}</button><code>${P(k)}</code>` : `<span>${Vt(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">${P(q.title)} <span class="muted">›</span> ${q.settings.map((S) => `${P(S.label)}: <b>${P(S.value)}</b>`).join(", ")}</div>
+              ${q.tokens.map((S) => `<div class="change-token"><code>${P(S.name)}</code> ${S.from ? `${P(S.from)} → ` : ""}${P(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="${P(q.sectionId)}" data-remove-scope="${P(k)}" aria-label="Remove ${P(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 Yn(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 ue = r(".apply-menu"), _t = r('[data-action="apply-menu"]'), Kt = () => ne("apply-mode") === "copy" ? "copy" : "preview";
+  function Zn() {
+    ue.querySelectorAll("[data-apply-mode]").forEach((d) => d.setAttribute("aria-checked", String(d.dataset.applyMode === Kt())));
   }
-  function ue(i) {
-    oe.hidden = !i, xt.setAttribute("aria-expanded", String(i)), i && wn();
+  function Ce(d) {
+    ue.hidden = !d, _t.setAttribute("aria-expanded", String(d)), d && Zn();
   }
-  function vt() {
-    return Xn(Lt(e.getState(), t), { warnings: Ne() });
+  function Gt() {
+    return Ma(an(e.getState(), t), { warnings: Qe() });
   }
-  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 Me = r(".dialog-backdrop"), Wt = r(".prompt-text");
+  function Xn() {
+    const d = Gt();
+    if (!d) return H("No changes to copy yet");
+    if (Kt() === "copy") return ce(d, "Prompt copied · paste it into your agent");
+    Wt.value = d, Me.hidden = !1, r('[data-action="dialog-copy"]').focus();
   }
-  function Pe() {
-    he.hidden = !0, r('[data-action="apply"]').focus();
+  function Ze() {
+    Me.hidden = !0, r('[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 te = r('[data-action="compare"]'), Jn = r(".original-pill");
+  function Te(d) {
+    d ? n.suspend() : n.resume(), te.setAttribute("aria-pressed", String(d)), Jn.hidden = !d;
   }
-  let kt = null, ae = !1;
-  K.addEventListener("pointerdown", () => {
-    ae = !1, kt = setTimeout(() => {
-      ae = !0, fe(!0);
+  let Yt = null, he = !1;
+  te.addEventListener("pointerdown", () => {
+    he = !1, Yt = setTimeout(() => {
+      he = !0, Te(!0);
     }, 180);
   });
-  const St = () => {
-    clearTimeout(kt), ae && (fe(!1), ae = !1);
+  const Zt = () => {
+    clearTimeout(Yt), he && (Te(!1), he = !1);
   };
-  K.addEventListener("pointerup", St), K.addEventListener("pointerleave", St);
-  const ge = r(".setup-hint"), Et = `setup-hint-dismissed:${location.pathname}`, kn = {
+  te.addEventListener("pointerup", Zt), te.addEventListener("pointerleave", Zt);
+  const Ae = r(".setup-hint"), Xt = `setup-hint-dismissed:${location.pathname}`, Qn = {
     "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: cn,
+      link: `${dn}/#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: Ia,
+      link: `${dn}/#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 Le() {
+    const d = Ra();
+    D = ne(Xt) === d ? null : Qn[d] || null, l.toggleAttribute("data-hint", !!D), Ae.hidden = !D, D && (Ae.innerHTML = `
+      <div class="setup-head">${A.warn}<b>${P(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>${P(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>${P(g.label)}</span>
+          <div class="setup-code"><code>${P(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);
+        ${D.copy ? `<button class="apply-btn" data-action="setup-copy">${P(D.copy)}</button>` : ""}
+        <a href="${D.link}" target="_blank" rel="noopener">Setup guide</a>
+      </div>`, Ae.dataset.status = d);
   }
-  me(), document.readyState !== "complete" && window.addEventListener("load", me, { once: !0 }), setTimeout(me, 1500);
-  const $t = r(".badge");
-  function Ct() {
+  Le(), document.readyState !== "complete" && window.addEventListener("load", Le, { once: !0 }), setTimeout(Le, 1500);
+  const Jt = r(".badge");
+  function Qt() {
     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");
+    const d = Ea(e.getState());
+    Jt.textContent = d, Jt.hidden = !d;
+    const g = Q(Qe());
+    c.global.querySelectorAll(".page-warnings").forEach((w) => {
+      w.innerHTML = g;
+    }), K === "changes" && Ht();
+  }
+  return e.onChange(Qt), Qt(), o.addEventListener("click", (d) => {
+    if (d.target === Me) return Ze();
+    const g = d.target.closest("button");
+    if (g) {
+      if (g !== _t && !ue.contains(g) && Ce(!1), g === l) return Ge();
+      if (g.dataset.select) {
+        const w = document.querySelector(g.dataset.select);
+        return w ? It(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 ce(cn[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.tab)
+        return G("global"), Tt && $e(!1), E(g.dataset.tab);
+      if (g.dataset.remove) return Yn(g.dataset.remove, g.dataset.removeScope);
+      if (g.dataset.applyMode)
+        return ge("apply-mode", g.dataset.applyMode), Ce(!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 Ke();
+        case "minimise":
+          return Kn(), (o.querySelector('.tab[aria-pressed="true"]') || u[0]).focus();
         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 ce(location.href, "Link copied");
         case "pick":
-          return ne ? pe() : ct();
+          return pe ? Ee() : zt();
         case "compare":
-          ae || fe(K.getAttribute("aria-pressed") !== "true");
+          he || Te(te.getAttribute("aria-pressed") !== "true");
           return;
         case "undo":
-          return ft();
+          return Ut();
         case "redo":
-          return gt();
+          return qt();
         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 Xn();
         case "apply-menu":
-          return ue(oe.hidden);
+          return Ce(ue.hidden);
         case "dialog-close":
-          return Pe();
+          return Ze();
         case "dialog-copy":
-          return te(yt.value, "Prompt copied · paste it into your agent");
+          return ce(Wt.value, "Prompt copied · paste it into your agent");
         case "setup-copy":
-          return j && te(j.text2copy, j.copied);
+          return D && ce(D.text2copy, D.copied);
         case "setup-dismiss":
-          return be(Et, ge.dataset.status), me();
+          return ge(Xt, Ae.dataset.status), Le();
       }
     }
-  }), a.addEventListener("keydown", (i) => {
-    if (i.key === "Escape") {
-      if (!he.hidden) return Pe();
-      if (!oe.hidden) return ue(!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 };
-}
-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])
-      }));
+  }), o.addEventListener("keydown", (d) => {
+    if (d.key === "Escape") {
+      if (!Me.hidden) return Ze();
+      if (!ue.hidden) return Ce(!1);
     }
-  },
-  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 };
+    !(d.metaKey || d.ctrlKey) || d.key.toLowerCase() !== "z" || d.target.matches?.('input[type="text"], textarea') || (d.preventDefault(), d.shiftKey ? qt() : Ut());
+  }), document.addEventListener("keydown", (d) => {
+    d.altKey && (d.code === "KeyT" && (d.preventDefault(), Ge()), d.code === "KeyC" && (d.preventDefault(), Te(te.getAttribute("aria-pressed") !== "true")));
+  }), ne("panel") === "open" ? W({ animate: !1 }) : ne("panel") === "tabs" && (W({ animate: !1 }), $e(!0)), { open: W, close: Ke, toggle: Ge, toast: H, pick: zt, prompt: Gt };
 }
-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 kn = [ho, Be, qn, vt, Ga, yt, io, Ka], yo = ':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 ko() {
   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 = yo, document.head.prepend(e);
 }
 if (!window.Twiddle) {
-  Ko(), Wt.forEach((n) => On(n.tokens)), Qt(Ke);
+  ko(), kn.forEach((n) => ca(n.tokens)), Mn(mt);
   let t;
   const e = () => {
-    Ke(He()), t = Mo({ sections: Wt, store: Fn, view: { suspend: zn, resume: In } });
+    mt(ht()), t = vo({ sections: kn, store: da, view: { suspend: fa, resume: ga } });
   };
   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: () => $n(),
+    undo: () => En(),
+    redo: () => Cn(),
     pick: () => t && t.pick(),
     prompt: () => t ? t.prompt() : "",
-    getState: He
+    getState: ht
   };
 }
-const Wo = window.Twiddle;
+const So = window.Twiddle;
 export {
-  Wo as Twiddle
+  So as Twiddle
 };