twiddle-panel 0.7.0 → 0.8.0

package/dist/twiddle.mjs

@@ -1,148 +1,148 @@
-const pt = /* @__PURE__ */ new Set();
-let T = Xn(), X = [], ve = [], Ie = null, Xt = 0;
-function Xn() {
-  const t = new URLSearchParams(location.search).get("twd");
-  if (!t) return {};
+const gt = /* @__PURE__ */ new Set();
+let M = sa(), Q = [], ke = [], qe = null, an = 0;
+function sa() {
+  const e = new URLSearchParams(location.search).get("twd");
+  if (!e) return {};
   try {
-    return JSON.parse(t);
+    return JSON.parse(e);
   } catch {
     return {};
   }
 }
-function Jn() {
-  const t = new URL(location.href);
-  Object.keys(T).length ? t.searchParams.set("twd", JSON.stringify(T)) : t.searchParams.delete("twd"), history.replaceState(history.state, "", t);
+function ia() {
+  const e = new URL(location.href);
+  Object.keys(M).length ? e.searchParams.set("twd", JSON.stringify(M)) : e.searchParams.delete("twd"), history.replaceState(history.state, "", e);
 }
-function yt() {
-  Jn(), pt.forEach((t) => t(T));
+function Et() {
+  ia(), gt.forEach((e) => e(M));
 }
-function se(t, e) {
-  if (JSON.stringify(t) === JSON.stringify(T)) return;
+function pe(e, t) {
+  if (JSON.stringify(e) === JSON.stringify(M)) return;
   const n = Date.now();
-  e && e === Ie && n - Xt < 400 || (X.push(T), X.length > 100 && X.shift()), ve = [], Ie = e, Xt = n, T = t, yt();
+  t && t === qe && n - an < 400 || (Q.push(M), Q.length > 100 && Q.shift()), ke = [], qe = t, an = n, M = e, Et();
 }
-function Be(t, e) {
-  const n = { ...t, ...e };
+function Ve(e, t) {
+  const n = { ...e, ...t };
   return Object.keys(n).forEach((a) => {
     n[a] == null && delete n[a];
   }), Object.keys(n).length ? n : null;
 }
-function U(t, e, n) {
-  const a = { ...t };
-  return n == null ? delete a[e] : a[e] = n, a;
+function B(e, t, n) {
+  const a = { ...e };
+  return n == null ? delete a[t] : a[t] = n, a;
 }
-function ut() {
-  return JSON.parse(JSON.stringify(T));
+function mt() {
+  return JSON.parse(JSON.stringify(M));
 }
-function Qn(t, e) {
-  se(U(T, t, Be(T[t], e)), `${t}:${Object.keys(e)}`);
+function la(e, t) {
+  pe(B(M, e, Ve(M[e], t)), `${e}:${Object.keys(t)}`);
 }
-function ea(t, e = `multi:${Object.keys(t)}`) {
-  const n = Object.entries(t).reduce((a, [o, r]) => U(a, o, Be(a[o], r)), T);
-  se(n, e);
+function da(e, t = `multi:${Object.keys(e)}`) {
+  const n = Object.entries(e).reduce((a, [o, s]) => B(a, o, Ve(a[o], s)), M);
+  pe(n, t);
 }
-function vn(t, e, n) {
-  const a = U(T.scopes?.[t], e, Be(T.scopes?.[t]?.[e], n)), o = U(T.scopes, t, Object.keys(a).length ? a : null);
-  se(U(T, "scopes", Object.keys(o).length ? o : null), `${t}|${e}:${Object.keys(n)}`);
+function Mn(e, t, n) {
+  const a = B(M.scopes?.[e], t, Ve(M.scopes?.[e]?.[t], n)), o = B(M.scopes, e, Object.keys(a).length ? a : null);
+  pe(B(M, "scopes", Object.keys(o).length ? o : null), `${e}|${t}:${Object.keys(n)}`);
 }
-function ta(t, e) {
-  if (e) return vn(t, e, Object.fromEntries(
-    Object.keys(T.scopes?.[t]?.[e] || {}).map((a) => [a, null])
+function ca(e, t) {
+  if (t) return Mn(e, t, Object.fromEntries(
+    Object.keys(M.scopes?.[e]?.[t] || {}).map((a) => [a, null])
   ));
-  const n = U(T.scopes, t, null);
-  se(U(T, "scopes", Object.keys(n).length ? n : null));
-}
-function na(t, e) {
-  const n = T.scopes?.[t];
-  if (!n || t === e) return;
-  let a = { ...T.scopes[e] };
-  Object.entries(n).forEach(([r, s]) => {
-    a = U(a, r, Be(a[r], s));
+  const n = B(M.scopes, e, null);
+  pe(B(M, "scopes", Object.keys(n).length ? n : null));
+}
+function pa(e, t) {
+  const n = M.scopes?.[e];
+  if (!n || e === t) return;
+  let a = { ...M.scopes[t] };
+  Object.entries(n).forEach(([s, r]) => {
+    a = B(a, s, Ve(a[s], r));
   });
-  const o = U(U(T.scopes, t, null), e, a);
-  se(U(T, "scopes", o));
+  const o = B(B(M.scopes, e, null), t, a);
+  pe(B(M, "scopes", o));
 }
-function yn() {
-  se({});
+function Tn() {
+  pe({});
 }
-function kn() {
-  X.length && (ve.push(T), T = X.pop(), Ie = null, yt());
+function An() {
+  Q.length && (ke.push(M), M = Q.pop(), qe = null, Et());
 }
-function Sn() {
-  ve.length && (X.push(T), T = ve.pop(), Ie = null, yt());
+function Ln() {
+  ke.length && (Q.push(M), M = ke.pop(), qe = null, Et());
 }
-const aa = () => X.length > 0, oa = () => ve.length > 0;
-function $n(t) {
-  return pt.add(t), () => pt.delete(t);
+const ua = () => Q.length > 0, ha = () => ke.length > 0;
+function Pn(e) {
+  return gt.add(e), () => gt.delete(e);
 }
-const ra = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  canRedo: oa,
-  canUndo: aa,
-  getState: ut,
-  moveScope: na,
-  onChange: $n,
-  redo: Sn,
-  removeScope: ta,
-  resetState: yn,
-  setScope: vn,
-  setSection: Qn,
-  setSections: ea,
-  undo: kn
-}, Symbol.toStringTag, { value: "Module" })), En = [];
-let ht = [], kt = {}, R = null, oe = !1, Cn = {};
-function sa(t) {
-  typeof t == "function" && En.push(t);
-}
-const Jt = (t) => Object.assign({}, ...En.map((e) => e(t) || {})), ft = (t) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t), ia = (t) => {
+  canRedo: ha,
+  canUndo: ua,
+  getState: mt,
+  moveScope: pa,
+  onChange: Pn,
+  redo: Ln,
+  removeScope: ca,
+  resetState: Tn,
+  setScope: Mn,
+  setSection: la,
+  setSections: da,
+  undo: An
+}, Symbol.toStringTag, { value: "Module" })), On = [];
+let bt = [], Ct = {}, R = null, de = !1, Fn = {};
+function ga(e) {
+  typeof e == "function" && On.push(e);
+}
+const on = (e) => Object.assign({}, ...On.map((t) => t(e) || {})), xt = (e) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(e), ma = (e) => {
   try {
-    return document.querySelector(t), !0;
+    return document.querySelector(e), !0;
   } catch {
     return !1;
   }
 };
-function la() {
+function ba() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function Tn() {
-  const t = document.documentElement;
-  ht.forEach((e) => t.style.removeProperty(e)), ht = [], kt = {};
-}
-function gt(t) {
-  if (Cn = t, oe) return;
+function Nn() {
   const e = document.documentElement;
-  Tn();
-  const n = Jt(t), a = Object.entries(t.scopes || {}).filter(([r]) => ia(r)).sort(([r], [s]) => ft(s) - ft(r)).map(([r, s]) => [r, Jt(s)]);
-  Object.entries(n).forEach(([r, s]) => e.style.setProperty(r, s)), ht = Object.keys(n), kt = n;
-  const o = a.filter(([, r]) => Object.keys(r).length).map(([r, s]) => `${r} {
-${Object.entries(s).map(([i, l]) => `  ${i}: ${l} !important;`).join(`
+  bt.forEach((t) => e.style.removeProperty(t)), bt = [], Ct = {};
+}
+function wt(e) {
+  if (Fn = e, de) return;
+  const t = document.documentElement;
+  Nn();
+  const n = on(e), a = Object.entries(e.scopes || {}).filter(([s]) => ma(s)).sort(([s], [r]) => xt(r) - xt(s)).map(([s, r]) => [s, on(r)]);
+  Object.entries(n).forEach(([s, r]) => t.style.setProperty(s, r)), bt = Object.keys(n), Ct = n;
+  const o = a.filter(([, s]) => Object.keys(s).length).map(([s, r]) => `${s} {
+${Object.entries(r).map(([i, l]) => `  ${i}: ${l} !important;`).join(`
 `)}
 }`).join(`
 `);
-  (o || R) && (la().textContent = o);
+  (o || R) && (ba().textContent = o);
 }
-function Mn(t) {
-  const e = document.documentElement, n = oe, a = { ...kt };
-  Object.keys(a).forEach((o) => e.style.removeProperty(o)), R && (R.disabled = !0);
+function jn(e) {
+  const t = document.documentElement, n = de, a = { ...Ct };
+  Object.keys(a).forEach((o) => t.style.removeProperty(o)), R && (R.disabled = !0);
   try {
-    return t();
+    return e();
   } finally {
-    n || (Object.entries(a).forEach(([o, r]) => e.style.setProperty(o, r)), R && (R.disabled = !1));
+    n || (Object.entries(a).forEach(([o, s]) => t.style.setProperty(o, s)), R && (R.disabled = !1));
   }
 }
-function da(t, e = document.documentElement) {
-  return Mn(() => {
-    const n = getComputedStyle(e);
-    return Object.fromEntries(t.map((a) => [a, n.getPropertyValue(a).trim()]));
+function xa(e, t = document.documentElement) {
+  return jn(() => {
+    const n = getComputedStyle(t);
+    return Object.fromEntries(e.map((a) => [a, n.getPropertyValue(a).trim()]));
   });
 }
-function ca() {
-  oe || (Tn(), R && (R.disabled = !0), oe = !0);
+function wa() {
+  de || (Nn(), R && (R.disabled = !0), de = !0);
 }
-function pa() {
-  oe && (oe = !1, R && (R.disabled = !1), gt(Cn));
+function ya() {
+  de && (de = !1, R && (R.disabled = !1), wt(Fn));
 }
-const ua = `
+const va = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -160,11 +160,17 @@ const ua = `
     position: fixed;
     right: 16px;
     bottom: 16px;
+    /* Where it sits is set inline by position.js (drag / nudge, per site);
+       --off-x / --off-y = distance from the two nearest edges. */
+    --off-x: 16px;
+    --off-y: 16px;
     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;
   }
@@ -196,6 +202,18 @@ const ua = `
     cursor: pointer;
     padding: 0;
   }
+  /* 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; }
+  /* Left corners: the panel opens to the right of the launcher. Top corners: tops aligned. */
+  .wrap.at-left { flex-direction: row-reverse; }
+  .wrap.at-top { align-items: flex-start; }
+  .wrap.at-top.is-open .launcher { margin-bottom: 0; }
+  .launcher { touch-action: none; }
+  .wrap.dragging .launcher { cursor: grabbing; }
+  .wrap.dragging .panel { pointer-events: none; }
+  @media (prefers-reduced-motion: reduce) { .launcher { transition: none; } }
   .mark { display: block; overflow: visible; }
   .mark-disc { fill: #16161a; }
   .mark-knob { fill: #4f46e5; }
@@ -212,11 +230,12 @@ const ua = `
   /* Panel */
   .panel {
     width: 360px; /* tabbed layout (Figma 254:323); was 300 */
-    max-width: calc(100vw - 32px);
+    /* 70px = 16 room on the far side + 44 launcher + 10 gap */
+    max-width: calc(100vw - var(--off-x) - 70px);
     /* As tall as its content; scrolls only when the window is shorter.
-       90px = 16 margin + 44 launcher + 10 gap + 20 room at the top. */
-    max-height: calc(100vh - 90px);
-    max-height: calc(100dvh - 90px);
+       32px = 16 margin below + 16 room at the top. */
+    max-height: calc(100vh - var(--off-y) - 16px);
+    max-height: calc(100dvh - var(--off-y) - 16px);
     background: var(--p-bg);
     border: 1px solid var(--p-line);
     border-radius: 14px;
@@ -443,8 +462,7 @@ const ua = `
     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 (on the panel's side of it, centred on it). */
   .toast {
     position: absolute; bottom: 22px; right: 54px; transform: translateY(50%);
     background: var(--p-accent); color: var(--p-on-accent);
@@ -453,6 +471,13 @@ const ua = `
     opacity: 0; transition: opacity .15s ease; pointer-events: none;
   }
   .toast.show { opacity: 1; }
+  .wrap.at-left .toast { right: auto; left: 54px; }
+  .wrap.at-top .toast { bottom: auto; top: 22px; transform: translateY(-50%); }
+  /* Open or minimised: just above the panel, right-aligned with it, so it
+     never covers a row (Ravi, 2026-10-16; Figma 269:1037). Top corners: below it. */
+  .wrap.is-open .toast { bottom: calc(100% + 8px); right: 54px; left: auto; top: auto; transform: none; z-index: 3; }
+  .wrap.is-open.at-left .toast { right: auto; left: 54px; }
+  .wrap.is-open.at-top .toast { bottom: auto; top: calc(100% + 8px); }
 
   /* ---------- Proposals below: not yet designed in Figma ---------- */
 
@@ -763,6 +788,11 @@ const ua = `
   .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; }
@@ -871,7 +901,7 @@ const ua = `
   .summary-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
   .summary-swatch[hidden] { display: none; }
   .summary-row .chev { display: grid; color: var(--p-muted); }
-`, P = (t, e, n) => `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
+`, P = (e, t, n) => `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${t}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
   dial: P(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
   link: P(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
   reset: P(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
@@ -884,6 +914,7 @@ const ua = `
   redo: P(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
   back: P(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
   down: P(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
+  minimise: P(15, 2, '<path d="M5 12h14"/>'),
   copy: P(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
   warn: P(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
   // Launcher: the Panel product mark (Twiddle brand; Figma Logo page › Panel mark; also site/favicon.svg).
@@ -898,211 +929,280 @@ const ua = `
   tabShadows: P(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
   sliders: P(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
   // Figma: Icon/Sliders (proposal)
-}, An = "twiddle:";
-function fe(t) {
+}, Rn = "twiddle:";
+function Z(e) {
   try {
-    return localStorage.getItem(An + t);
+    return localStorage.getItem(Rn + e);
   } catch {
     return null;
   }
 }
-function ge(t, e) {
+function oe(e, t) {
   try {
-    localStorage.setItem(An + t, e);
+    localStorage.setItem(Rn + e, t);
   } catch {
   }
 }
-function re({ label: t, options: e, onSelect: n }) {
+const re = 44, ae = 8, ka = 4, zn = { corner: "br", x: 16, y: 16 };
+function Sa() {
+  try {
+    const e = JSON.parse(Z("position"));
+    if (e && /^[tb][lr]$/.test(e.corner) && isFinite(e.x) && isFinite(e.y)) return e;
+  } catch {
+  }
+  return { ...zn };
+}
+function rn(e) {
+  const t = Math.max(ae, innerWidth - re - ae), n = Math.max(ae, innerHeight - re - ae);
+  return { corner: e.corner, x: Math.round(Math.min(Math.max(e.x, ae), t)), y: Math.round(Math.min(Math.max(e.y, ae), n)) };
+}
+function $a({ wrapEl: e, launcherEl: t }) {
+  let n = Sa();
+  function a() {
+    const d = rn(n), p = d.corner[1] === "l", u = d.corner[0] === "t";
+    Object.assign(e.style, {
+      left: p ? `${d.x}px` : "auto",
+      right: p ? "auto" : `${d.x}px`,
+      top: u ? `${d.y}px` : "auto",
+      bottom: u ? "auto" : `${d.y}px`
+    }), e.style.setProperty("--off-x", `${d.x}px`), e.style.setProperty("--off-y", `${d.y}px`), e.classList.toggle("at-left", p), e.classList.toggle("at-top", u);
+  }
+  function o(d, p = !0) {
+    n = rn(d), a(), p && oe("position", JSON.stringify(n));
+  }
+  function s(d, p) {
+    const u = d + re / 2 < innerWidth / 2, v = p + re / 2 < innerHeight / 2, f = !v && e.classList.contains("is-open") ? 10 : 0;
+    return {
+      corner: (v ? "t" : "b") + (u ? "l" : "r"),
+      x: u ? d : innerWidth - d - re,
+      y: v ? p : innerHeight - p - re - f
+    };
+  }
+  let r = null, i = !1;
+  t.addEventListener("pointerdown", (d) => {
+    if (d.button !== 0) return;
+    const p = t.getBoundingClientRect();
+    r = { id: d.pointerId, sx: d.clientX, sy: d.clientY, dx: d.clientX - p.left, dy: d.clientY - p.top, moving: !1 };
+  }), t.addEventListener("pointermove", (d) => {
+    if (!(!r || d.pointerId !== r.id)) {
+      if (!r.moving) {
+        if (Math.hypot(d.clientX - r.sx, d.clientY - r.sy) < ka) return;
+        r.moving = !0, t.setPointerCapture(d.pointerId), e.classList.add("dragging");
+      }
+      o(s(d.clientX - r.dx, d.clientY - r.dy), !1);
+    }
+  });
+  const l = (d) => {
+    !r || d.pointerId !== r.id || (r.moving && (i = !0, e.classList.remove("dragging"), o(n)), r = null);
+  };
+  return t.addEventListener("pointerup", l), t.addEventListener("pointercancel", l), t.addEventListener("keydown", (d) => {
+    const p = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[d.key];
+    if (!p || d.altKey || d.metaKey || d.ctrlKey) return;
+    d.preventDefault();
+    const u = d.shiftKey ? 10 : 1, v = n.corner[1] === "l" ? 1 : -1, f = n.corner[0] === "t" ? 1 : -1;
+    o({ corner: n.corner, x: n.x + p[0] * u * v, y: n.y + p[1] * u * f });
+  }), window.addEventListener("resize", a), a(), {
+    /** Call from the launcher's click handler: true = ignore this click (it ended a drag). */
+    consumeClick() {
+      const d = i;
+      return i = !1, d;
+    },
+    reset() {
+      o({ ...zn });
+    }
+  };
+}
+function ce({ label: e, options: t, 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;
+  a.className = "seg", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", e);
+  const o = t.map((l) => {
+    const d = document.createElement("button");
+    return d.type = "button", d.setAttribute("role", "radio"), d.dataset.value = l.value, d.textContent = l.label, l.title && (d.title = l.title), d.addEventListener("click", () => i(l.value)), d;
   });
   a.append(...o);
-  let r = null;
-  function s(l) {
-    r = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
-    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
-    o.forEach((c, h) => {
-      c.tabIndex = h === p ? 0 : -1;
+  let s = null;
+  function r(l) {
+    s = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
+    const d = Math.max(0, o.findIndex((p) => p.dataset.value === l));
+    o.forEach((p, u) => {
+      p.tabIndex = u === d ? 0 : -1;
     });
   }
-  function i(l, p) {
-    l !== r && (s(l), n(l)), p && o.find((c) => c.dataset.value === l).focus();
+  function i(l, d) {
+    l !== s && (r(l), n(l)), d && o.find((p) => p.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;
+    const d = o.indexOf(l.target);
+    if (d < 0) return;
+    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    let u;
+    if (p) u = (d + p + o.length) % o.length;
+    else if (l.key === "Home") u = 0;
+    else if (l.key === "End") u = o.length - 1;
     else return;
-    l.preventDefault(), i(o[h].dataset.value, !0);
-  }), s(null), { el: a, setValue: s };
+    l.preventDefault(), i(o[u].dataset.value, !0);
+  }), r(null), { el: a, setValue: r };
 }
-const Ln = /var\(\s*(--twd-[\w-]+)/g, ha = /::?[\w-]+(\([^)]*\))?/g;
-function* Ue(t) {
-  for (const e of t)
-    e.selectorText != null && (yield e), e.cssRules && (yield* Ue(e.cssRules));
+const In = /var\(\s*(--twd-[\w-]+)/g, Ea = /::?[\w-]+(\([^)]*\))?/g;
+function* _e(e) {
+  for (const t of e)
+    t.selectorText != null && (yield t), t.cssRules && (yield* _e(t.cssRules));
 }
-function fa() {
-  const t = [];
-  for (const e of document.styleSheets) {
-    if (e.ownerNode?.id === "twiddle-scoped") continue;
+function Ca() {
+  const e = [];
+  for (const t of document.styleSheets) {
+    if (t.ownerNode?.id === "twiddle-scoped") continue;
     let n;
     try {
-      n = e.cssRules;
+      n = t.cssRules;
     } catch {
       continue;
     }
-    for (const a of Ue(n)) {
-      const o = [...a.style.cssText.matchAll(Ln)].map((r) => r[1]);
-      o.length && t.push({ selectors: a.selectorText.split(","), vars: o });
+    for (const a of _e(n)) {
+      const o = [...a.style.cssText.matchAll(In)].map((s) => s[1]);
+      o.length && e.push({ selectors: a.selectorText.split(","), vars: o });
     }
   }
-  return t;
+  return e;
 }
-function ga(t, e) {
-  const n = e.replace(ha, "").trim() || "*";
+function Ma(e, t) {
+  const n = t.replace(Ea, "").trim() || "*";
   try {
-    return t.matches(n);
+    return e.matches(n);
   } catch {
     return !1;
   }
 }
-function Pn(t) {
-  const e = /* @__PURE__ */ new Set(), n = [];
-  return fa().forEach(({ selectors: a, vars: o }) => {
-    const r = a.find((s) => ga(t, s));
-    r && (o.forEach((s) => e.add(s)), n.push(r.trim()));
-  }), [...(t.getAttribute("style") || "").matchAll(Ln)].forEach((a) => e.add(a[1])), { names: e, selectors: n };
+function Dn(e) {
+  const t = /* @__PURE__ */ new Set(), n = [];
+  return Ca().forEach(({ selectors: a, vars: o }) => {
+    const s = a.find((r) => Ma(e, r));
+    s && (o.forEach((r) => t.add(r)), n.push(s.trim()));
+  }), [...(e.getAttribute("style") || "").matchAll(In)].forEach((a) => t.add(a[1])), { names: t, selectors: n };
 }
-const mt = (t) => window.CSS && CSS.escape ? CSS.escape(t) : t;
-function ma(t) {
-  const e = [];
-  let n = t;
+const yt = (e) => window.CSS && CSS.escape ? CSS.escape(e) : e;
+function Ta(e) {
+  const t = [];
+  let n = e;
   for (; n && n.nodeType === 1 && n !== document.body && n !== document.documentElement; ) {
-    if (n.id && document.querySelectorAll(`#${mt(n.id)}`).length === 1)
-      return e.unshift(`#${mt(n.id)}`), e.join(" > ");
-    const a = n.localName, o = [...n.parentElement.children].filter((r) => r.localName === a);
-    e.unshift(o.length > 1 ? `${a}:nth-of-type(${o.indexOf(n) + 1})` : a), n = n.parentElement;
+    if (n.id && document.querySelectorAll(`#${yt(n.id)}`).length === 1)
+      return t.unshift(`#${yt(n.id)}`), t.join(" > ");
+    const a = n.localName, o = [...n.parentElement.children].filter((s) => s.localName === a);
+    t.unshift(o.length > 1 ? `${a}:nth-of-type(${o.indexOf(n) + 1})` : a), n = n.parentElement;
   }
-  return ["body", ...e].join(" > ");
+  return ["body", ...t].join(" > ");
 }
-function ba(t, e = Pn(t).selectors) {
-  const n = t.getAttribute("data-twd");
+function Aa(e, t = Dn(e).selectors) {
+  const n = e.getAttribute("data-twd");
   if (n) return `[data-twd="${n.replace(/"/g, "")}"]`;
-  const a = [...t.classList], r = a.find((s) => e.some((i) => new RegExp(`\\.${s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
-  return r ? `.${mt(r)}` : null;
+  const a = [...e.classList], s = a.find((r) => t.some((i) => new RegExp(`\\.${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
+  return s ? `.${yt(s)}` : null;
 }
-function xa(t) {
-  const e = Pn(t), n = ba(t, e.selectors), a = (t.getAttribute("aria-label") || t.placeholder || t.textContent || "").trim().replace(/\s+/g, " ");
+function La(e) {
+  const t = Dn(e), n = Aa(e, t.selectors), a = (e.getAttribute("aria-label") || e.placeholder || e.textContent || "").trim().replace(/\s+/g, " ");
   return {
-    el: t,
-    tag: t.localName,
-    classes: [...t.classList],
+    el: e,
+    tag: e.localName,
+    classes: [...e.classList],
     text: a.length > 40 ? `${a.slice(0, 40)}…` : a,
-    tokens: e.names,
-    elementSelector: ma(t),
+    tokens: t.names,
+    elementSelector: Ta(e),
     classSelector: n,
     classCount: n ? document.querySelectorAll(n).length : 0
   };
 }
-const bt = (t) => t.localName + [...t.classList].map((e) => `.${e}`).join(""), wa = { radius: "px", intensity: "%", base: "px" }, On = (t) => t.charAt(0).toUpperCase() + t.slice(1), va = (t, e) => typeof e == "number" || /^\d+$/.test(e) ? `${e}${wa[t] || ""}` : On(String(e));
-function Qt(t, e, n) {
-  const a = Mn(() => t.tokens({ [t.id]: e }) || {}), o = Object.keys(a);
-  let r = {};
+const vt = (e) => e.localName + [...e.classList].map((t) => `.${t}`).join(""), Pa = { radius: "px", intensity: "%", base: "px" }, Un = (e) => e.charAt(0).toUpperCase() + e.slice(1), Oa = (e, t) => typeof t == "number" || /^\d+$/.test(t) ? `${t}${Pa[e] || ""}` : Un(String(t));
+function sn(e, t, n) {
+  const a = jn(() => e.tokens({ [e.id]: t }) || {}), o = Object.keys(a);
+  let s = {};
   if (o.length) {
-    const s = n.selector ? document.querySelector(n.selector) : void 0;
-    r = da(o, s || void 0);
+    const r = n.selector ? document.querySelector(n.selector) : void 0;
+    s = xa(o, r || void 0);
   }
   return {
     ...n,
-    sectionId: t.id,
-    title: t.title,
-    settings: Object.entries(e).map(([s, i]) => ({ key: s, label: On(s), value: va(s, i), ...t.describe?.(s, i) || {} })),
-    tokens: o.map((s) => ({ name: s, from: r[s] || "", to: a[s] }))
+    sectionId: e.id,
+    title: e.title,
+    settings: Object.entries(t).map(([r, i]) => ({ key: r, label: Un(r), value: Oa(r, i), ...e.describe?.(r, i) || {} })),
+    tokens: o.map((r) => ({ name: r, from: s[r] || "", to: a[r] }))
   };
 }
-function en(t, e) {
+function ln(e, t) {
   const n = [];
-  return e.forEach((a) => {
-    t[a.id] && n.push(Qt(a, t[a.id], { kind: "global", selector: null }));
-  }), Object.entries(t.scopes || {}).forEach(([a, o]) => {
-    const r = ft(a) ? "class" : "element";
-    e.forEach((s) => {
-      o[s.id] && n.push(Qt(s, o[s.id], { kind: r, selector: a }));
+  return t.forEach((a) => {
+    e[a.id] && n.push(sn(a, e[a.id], { kind: "global", selector: null }));
+  }), Object.entries(e.scopes || {}).forEach(([a, o]) => {
+    const s = xt(a) ? "class" : "element";
+    t.forEach((r) => {
+      o[r.id] && n.push(sn(r, o[r.id], { kind: s, selector: a }));
     });
   }), n;
 }
-function ya(t) {
-  const e = (o) => Object.values(o || {}).reduce((r, s) => r + Object.keys(s || {}).length, 0), { scopes: n, ...a } = t;
-  return e(a) + Object.values(n || {}).reduce((o, r) => o + e(r), 0);
+function Fa(e) {
+  const t = (o) => Object.values(o || {}).reduce((s, r) => s + Object.keys(r || {}).length, 0), { scopes: n, ...a } = e;
+  return t(a) + Object.values(n || {}).reduce((o, s) => o + t(s), 0);
 }
-const ae = (t) => `\`${t}\``, Ze = (t) => t.map((e) => `  - ${ae(e.name)}: ${e.from ? `${ae(e.from)} → ` : ""}${ae(e.to)}`), Xe = (t) => `${t.title} › ${t.settings.map((e) => `${e.label}: ${e.value}`).join(", ")}`;
-function ka(t) {
-  let e = null;
+const le = (e) => `\`${e}\``, et = (e) => e.map((t) => `  - ${le(t.name)}: ${t.from ? `${le(t.from)} → ` : ""}${le(t.to)}`), tt = (e) => `${e.title} › ${e.settings.map((t) => `${t.label}: ${t.value}`).join(", ")}`;
+function Na(e) {
+  let t = null;
   try {
-    e = document.querySelector(t);
+    t = document.querySelector(e);
   } catch {
   }
-  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 `${ae(bt(e))}${n ? ` with text “${n}”` : ""}`;
+  if (!t) return "not found on the current page";
+  const n = (t.getAttribute("aria-label") || t.placeholder || t.textContent || "").trim().replace(/\s+/g, " ").slice(0, 60);
+  return `${le(vt(t))}${n ? ` with text “${n}”` : ""}`;
 }
-function tn(t, e) {
+function dn(e, t) {
   const n = /* @__PURE__ */ new Map();
-  return t.forEach((a) => {
-    const o = a[e];
+  return e.forEach((a) => {
+    const o = a[t];
     n.has(o) || n.set(o, []), n.get(o).push(a);
   }), [...n];
 }
-function Sa(t, { link: e = location.href, warnings: n = [] } = {}) {
-  if (!t.length) return "";
-  const a = t.filter((i) => i.kind === "global"), o = t.filter((i) => i.kind === "class"), r = t.filter((i) => i.kind === "element"), s = [];
-  if (s.push(
+function ja(e, { link: t = location.href, warnings: n = [] } = {}) {
+  if (!e.length) return "";
+  const a = e.filter((i) => i.kind === "global"), o = e.filter((i) => i.kind === "class"), s = e.filter((i) => i.kind === "element"), r = [];
+  if (r.push(
     "# 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}`
-  ), a.length && (s.push(
+    `Preview of the tweaked version: ${t}`
+  ), 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.",
     ""
-  ), a.forEach((i) => s.push(`- **${Xe(i)}**`, ...Ze(i.tokens)))), o.length && (s.push(
+  ), a.forEach((i) => r.push(`- **${tt(i)}**`, ...et(i.tokens)))), o.length && (r.push(
     "",
     `## ${a.length ? 2 : 1}. Component-wide changes`,
     "",
     "These apply to every element matching the selector. In the CSS rule for that component, redeclare the token, e.g. `.input { --twd-radius-control: 999px; }`. Don't replace the `var(--twd-…)` usages with fixed values.",
     ""
-  ), tn(o, "selector").forEach(([i, l]) => {
-    s.push(`- ${ae(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((p) => s.push(`  - **${Xe(p)}**`, ...Ze(p.tokens).map((c) => `  ${c}`)));
-  })), r.length) {
+  ), dn(o, "selector").forEach(([i, l]) => {
+    r.push(`- ${le(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((d) => r.push(`  - **${tt(d)}**`, ...et(d.tokens).map((p) => `  ${p}`)));
+  })), s.length) {
     const i = 1 + (a.length ? 1 : 0) + (o.length ? 1 : 0);
-    s.push(
+    r.push(
       "",
       `## ${i}. Single-element changes`,
       "",
       "These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",
       ""
-    ), tn(r, "selector").forEach(([l, p]) => {
-      s.push(`- ${ka(l)}, found at ${ae(l)}`), p.forEach((c) => s.push(`  - **${Xe(c)}**`, ...Ze(c.tokens).map((h) => `  ${h}`)));
+    ), dn(s, "selector").forEach(([l, d]) => {
+      r.push(`- ${Na(l)}, found at ${le(l)}`), d.forEach((p) => r.push(`  - **${tt(p)}**`, ...et(p.tokens).map((u) => `  ${u}`)));
     });
   }
-  return n.length && s.push(
+  return n.length && r.push(
     "",
     "## Contrast to check",
     "",
     "Panel flagged these colour pairs as below WCAG AA with the new values:",
     "",
     ...n.map((i) => `- ${i.text}`)
-  ), s.push(
+  ), r.push(
     "",
     "## Constraints",
     "",
@@ -1110,88 +1210,88 @@ function Sa(t, { link: e = location.href, warnings: n = [] } = {}) {
     "- Change only what is listed above.",
     "- If a value uses `color-mix()` and the project targets older browsers, ask before converting it.",
     "- When done, list the files you changed."
-  ), s.join(`
+  ), r.join(`
 `);
 }
-const Re = 4.5, $a = 3, Ea = [
+const Ue = 4.5, Ra = 3, za = [
   ["--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 W;
-function St(t) {
-  if (!t || (W ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !W)) return null;
-  W.clearRect(0, 0, 1, 1), W.fillStyle = "#000", W.fillStyle = t, W.fillRect(0, 0, 1, 1);
-  const [e, n, a, o] = W.getImageData(0, 0, 1, 1).data;
-  return [e, n, a, o / 255];
-}
-function nn(t) {
-  const e = document.createElement("i");
-  e.style.cssText = `position:absolute;visibility:hidden;color:var(${t})`, document.documentElement.appendChild(e);
-  const n = getComputedStyle(e).color;
-  return e.remove(), St(n);
-}
-const an = ([t, e, n]) => {
+let Y;
+function Mt(e) {
+  if (!e || (Y ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !Y)) return null;
+  Y.clearRect(0, 0, 1, 1), Y.fillStyle = "#000", Y.fillStyle = e, Y.fillRect(0, 0, 1, 1);
+  const [t, n, a, o] = Y.getImageData(0, 0, 1, 1).data;
+  return [t, n, a, o / 255];
+}
+function cn(e) {
+  const t = document.createElement("i");
+  t.style.cssText = `position:absolute;visibility:hidden;color:var(${e})`, document.documentElement.appendChild(t);
+  const n = getComputedStyle(t).color;
+  return t.remove(), Mt(n);
+}
+const pn = ([e, t, n]) => {
   const a = (o) => (o /= 255, o <= 0.03928 ? o / 12.92 : ((o + 0.055) / 1.055) ** 2.4);
-  return 0.2126 * a(t) + 0.7152 * a(e) + 0.0722 * a(n);
-}, Fn = (t, e) => t.slice(0, 3).map((n, a) => n * t[3] + e[a] * (1 - t[3])).concat(1);
-function Nn(t, e) {
-  const n = an(t[3] < 1 ? Fn(t, e) : t), a = an(e);
+  return 0.2126 * a(e) + 0.7152 * a(t) + 0.0722 * a(n);
+}, Bn = (e, t) => e.slice(0, 3).map((n, a) => n * e[3] + t[a] * (1 - e[3])).concat(1);
+function qn(e, t) {
+  const n = pn(e[3] < 1 ? Bn(e, t) : e), a = pn(t);
   return (Math.max(n, a) + 0.05) / (Math.min(n, a) + 0.05);
 }
-const jn = (t) => `${t.toFixed(1)}:1`;
-function Je() {
-  const t = [];
-  return Ea.forEach(([e, n, a]) => {
-    const o = nn(e), r = nn(n);
-    if (!o || !r || r[3] === 0) return;
-    const s = Nn(o, r);
-    s < Re && t.push({ label: a, ratio: s, needed: Re, text: `${a}: ${jn(s)} · AA needs ${Re}` });
-  }), t;
-}
-function Ca(t) {
+const Hn = (e) => `${e.toFixed(1)}:1`;
+function nt() {
   const e = [];
-  for (let n = t; n && n.nodeType === 1; n = n.parentElement) {
-    const a = St(getComputedStyle(n).backgroundColor);
-    if (a && a[3] > 0 && (e.push(a), a[3] >= 1))
+  return za.forEach(([t, n, a]) => {
+    const o = cn(t), s = cn(n);
+    if (!o || !s || s[3] === 0) return;
+    const r = qn(o, s);
+    r < Ue && e.push({ label: a, ratio: r, needed: Ue, text: `${a}: ${Hn(r)} · AA needs ${Ue}` });
+  }), e;
+}
+function Ia(e) {
+  const t = [];
+  for (let n = e; n && n.nodeType === 1; n = n.parentElement) {
+    const a = Mt(getComputedStyle(n).backgroundColor);
+    if (a && a[3] > 0 && (t.push(a), a[3] >= 1))
       break;
   }
-  return e.reduceRight((n, a) => Fn(a, n), [255, 255, 255, 1]);
+  return t.reduceRight((n, a) => Bn(a, n), [255, 255, 255, 1]);
 }
-function Ta(t) {
-  if (!t.textContent.trim() && !t.placeholder) return null;
-  const e = getComputedStyle(t), n = St(e.color);
+function Da(e) {
+  if (!e.textContent.trim() && !e.placeholder) return null;
+  const t = getComputedStyle(e), n = Mt(t.color);
   if (!n) return null;
-  const a = parseFloat(e.fontSize), r = a >= 24 || a >= 18.66 && parseInt(e.fontWeight, 10) >= 700 ? $a : Re, s = Nn(n, Ca(t));
-  return s < r ? { label: "This element", ratio: s, needed: r, text: `This element’s text: ${jn(s)} · AA needs ${r}` } : null;
-}
-const on = "twiddle-panel", Ma = "0.7.0", rn = "https://panel.twiddle.in", Aa = "--twd-radius-control", La = /var\(\s*--twd-/;
-function Pa(t) {
-  return t.style.cssText.split(";").some((e) => {
-    const n = e.slice(0, e.indexOf(":")).trim();
-    return n && !n.startsWith("--") && La.test(e);
+  const a = parseFloat(t.fontSize), s = a >= 24 || a >= 18.66 && parseInt(t.fontWeight, 10) >= 700 ? Ra : Ue, r = qn(n, Ia(e));
+  return r < s ? { label: "This element", ratio: r, needed: s, text: `This element’s text: ${Hn(r)} · AA needs ${s}` } : null;
+}
+const un = "twiddle-panel", Ua = "0.8.0", hn = "https://panel.twiddle.in", Ba = "--twd-radius-control", qa = /var\(\s*--twd-/;
+function Ha(e) {
+  return e.style.cssText.split(";").some((t) => {
+    const n = t.slice(0, t.indexOf(":")).trim();
+    return n && !n.startsWith("--") && qa.test(t);
   });
 }
-function Oa() {
-  if (!getComputedStyle(document.documentElement).getPropertyValue(Aa).trim()) return "no-tokens";
-  let t = !1;
-  for (const e of document.styleSheets) {
-    if (e.ownerNode?.id === "twiddle-scoped") continue;
+function Va() {
+  if (!getComputedStyle(document.documentElement).getPropertyValue(Ba).trim()) return "no-tokens";
+  let e = !1;
+  for (const t of document.styleSheets) {
+    if (t.ownerNode?.id === "twiddle-scoped") continue;
     let n;
     try {
-      n = e.cssRules;
+      n = t.cssRules;
     } catch {
-      t = !0;
+      e = !0;
       continue;
     }
-    for (const a of Ue(n)) if (Pa(a)) return "ok";
+    for (const a of _e(n)) if (Ha(a)) return "ok";
   }
-  return document.querySelector('[style*="var(--twd-"]') ? "ok" : t ? "unknown" : "unused";
+  return document.querySelector('[style*="var(--twd-"]') ? "ok" : e ? "unknown" : "unused";
 }
-function Fa() {
-  const t = /* @__PURE__ */ new Set(), e = (n) => {
-    for (const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g)) t.add(a[1]);
+function _a() {
+  const e = /* @__PURE__ */ new Set(), t = (n) => {
+    for (const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g)) e.add(a[1]);
   };
   for (const n of document.styleSheets) {
     if (n.ownerNode?.id === "twiddle-scoped") continue;
@@ -1201,19 +1301,19 @@ function Fa() {
     } catch {
       continue;
     }
-    for (const o of Ue(a))
-      o.style.cssText.split(";").forEach((r) => {
-        const s = r.slice(0, r.indexOf(":")).trim();
-        s && !s.startsWith("--") && e(r);
+    for (const o of _e(a))
+      o.style.cssText.split(";").forEach((s) => {
+        const r = s.slice(0, s.indexOf(":")).trim();
+        r && !r.startsWith("--") && t(s);
       });
   }
-  return document.querySelectorAll('[style*="var(--twd-"]').forEach((n) => e(n.getAttribute("style"))), t;
+  return document.querySelectorAll('[style*="var(--twd-"]').forEach((n) => t(n.getAttribute("style"))), e;
 }
-const sn = [
-  { label: "With a build tool, in your entry file", code: `import '${on}/tokens.css';` },
+const fn = [
+  { label: "With a build tool, in your entry file", code: `import '${un}/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/${on}@${Ma}/dist/twiddle-tokens.css">` }
-], Na = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
+  { label: "Plain HTML, in <head>", code: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${un}@${Ua}/dist/twiddle-tokens.css">` }
+], Ka = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
 
 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:
@@ -1231,205 +1331,205 @@ const sn = [
 3. Leave values that don't match a role as they are (layout widths, one-off illustrations, icon sizes). Don't invent new --twd-* tokens.
 4. Don't change the layout or how the page looks; after the change it should look the same until someone uses the panel.
 5. When done, list the files you changed and any values you left fixed, with the reason.`;
-function B(t) {
-  const e = document.createElement("div");
-  e.className = "field";
+function U(e) {
+  const t = document.createElement("div");
+  t.className = "field";
   const n = document.createElement("div");
   n.className = "field-head";
   const a = document.createElement("span");
-  a.className = "field-label", a.textContent = t;
+  a.className = "field-label", a.textContent = e;
   const o = document.createElement("span");
-  return o.className = "field-value", o.hidden = !0, n.append(a, o), e.append(n), {
-    el: e,
-    setValue(r) {
-      o.textContent = r || "", o.hidden = !r;
+  return o.className = "field-value", o.hidden = !0, n.append(a, o), t.append(n), {
+    el: t,
+    setValue(s) {
+      o.textContent = s || "", o.hidden = !s;
     },
-    append(...r) {
-      e.append(...r);
+    append(...s) {
+      t.append(...s);
     }
   };
 }
-function ja({ label: t, ends: e, cols: n = 9, rows: a = 5, onInput: o }) {
-  const r = document.createElement("div");
-  r.className = "pad", r.tabIndex = 0, r.setAttribute("role", "group"), r.setAttribute("aria-roledescription", "2D slider");
-  const s = (b, u) => {
-    const v = document.createElement("span");
-    return v.className = `pad-edge ${b}`, v.textContent = u, v.setAttribute("aria-hidden", "true"), v;
+function Wa({ label: e, ends: t, cols: n = 9, rows: a = 5, onInput: o }) {
+  const s = document.createElement("div");
+  s.className = "pad", s.tabIndex = 0, s.setAttribute("role", "group"), s.setAttribute("aria-roledescription", "2D slider");
+  const r = (b, h) => {
+    const y = document.createElement("span");
+    return y.className = `pad-edge ${b}`, y.textContent = h, y.setAttribute("aria-hidden", "true"), y;
   };
-  r.append(s("top", e.top), s("bottom", e.bottom), s("left", e.left), s("right", e.right));
+  s.append(r("top", t.top), r("bottom", t.bottom), r("left", t.left), r("right", t.right));
   const i = document.createElement("div");
   i.className = "pad-area";
   for (let b = 0; b < a; b++)
-    for (let u = 0; u < n; u++) {
-      const 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);
+    for (let h = 0; h < n; h++) {
+      const y = document.createElement("i");
+      y.className = "pad-dot", y.style.left = `${h / (n - 1) * 100}%`, y.style.top = `${b / (a - 1) * 100}%`, i.append(y);
     }
   const l = document.createElement("span");
-  l.className = "pad-knob", i.append(l), r.append(i);
-  let p = 0.5, c = 0.5;
-  const h = (b, u) => Math.round(Math.min(1, Math.max(0, b)) * (u - 1)) / (u - 1);
-  function y() {
-    l.style.left = `${p * 100}%`, l.style.top = `${c * 100}%`;
+  l.className = "pad-knob", i.append(l), s.append(i);
+  let d = 0.5, p = 0.5;
+  const u = (b, h) => Math.round(Math.min(1, Math.max(0, b)) * (h - 1)) / (h - 1);
+  function v() {
+    l.style.left = `${d * 100}%`, l.style.top = `${p * 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));
+  function f(b, h, y) {
+    b = y === "x" ? d : u(b, n), h = y === "y" ? p : u(h, a), !(b === d && h === p) && (d = b, p = h, v(), o(d, p));
   }
   const m = (b) => {
-    const u = i.getBoundingClientRect();
-    f((b.clientX - u.left) / u.width, (b.clientY - u.top) / u.height);
+    const h = i.getBoundingClientRect();
+    f((b.clientX - h.left) / h.width, (b.clientY - h.top) / h.height);
   };
-  r.addEventListener("pointerdown", (b) => {
-    r.setPointerCapture(b.pointerId), r.classList.add("dragging"), m(b);
-  }), r.addEventListener("pointermove", (b) => {
-    r.hasPointerCapture(b.pointerId) && m(b);
+  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 x = (b) => {
-    r.hasPointerCapture(b.pointerId) && r.releasePointerCapture(b.pointerId), r.classList.remove("dragging");
+    s.hasPointerCapture(b.pointerId) && s.releasePointerCapture(b.pointerId), s.classList.remove("dragging");
   };
-  return r.addEventListener("pointerup", x), r.addEventListener("pointercancel", x), r.addEventListener("keydown", (b) => {
-    const u = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[b.key];
-    u && (b.preventDefault(), u[0] ? f(h(p, n) + u[0] / (n - 1), c, "y") : f(p, h(c, a) + u[1] / (a - 1), "x"));
+  return s.addEventListener("pointerup", x), s.addEventListener("pointercancel", x), s.addEventListener("keydown", (b) => {
+    const h = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[b.key];
+    h && (b.preventDefault(), h[0] ? f(u(d, n) + h[0] / (n - 1), p, "y") : f(d, u(p, a) + h[1] / (a - 1), "x"));
   }), {
-    el: r,
+    el: s,
     /** Show a position without telling anyone (used to sync). Off-grid values are shown as they are. */
-    setValue(b, u, v) {
-      p = Math.min(1, Math.max(0, b)), c = Math.min(1, Math.max(0, u)), y(), r.setAttribute("aria-label", v ? `${t}: ${v}` : t);
+    setValue(b, h, y) {
+      d = Math.min(1, Math.max(0, b)), p = Math.min(1, Math.max(0, h)), v(), s.setAttribute("aria-label", y ? `${e}: ${y}` : e);
     }
   };
 }
-function Rn({ label: t, min: e, max: n, step: a = 1, format: o = String, onInput: r }) {
-  const s = document.createElement("div");
-  s.className = "slider";
+function Vn({ label: e, min: t, max: n, step: a = 1, format: o = String, onInput: s }) {
+  const r = document.createElement("div");
+  r.className = "slider";
   const i = document.createElement("input");
-  i.type = "range", i.min = String(e), i.max = String(n), i.step = String(a), i.setAttribute("aria-label", t);
+  i.type = "range", i.min = String(t), i.max = String(n), i.step = String(a), i.setAttribute("aria-label", e);
   const l = document.createElement("span");
-  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), s.append(i, l);
-  const 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);
+  l.className = "slider-value", l.setAttribute("aria-hidden", "true"), r.append(i, l);
+  const d = (p) => {
+    const u = (Number(i.value) - t) / (n - t) * 100;
+    i.style.setProperty("--fill", `${u}%`), l.textContent = p ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
   };
   return i.addEventListener("input", () => {
-    p(), r(Number(i.value));
+    d(), s(Number(i.value));
   }), {
-    el: s,
+    el: r,
     /** Show a value without reporting it (sync after reset / URL load). */
-    setValue(c, h) {
-      i.value = String(c), p(h);
+    setValue(p, u) {
+      i.value = String(p), d(u);
     }
   };
 }
-function Ra({ label: t, options: e, columns: n = 3, className: a = "", onSelect: o }) {
-  const r = document.createElement("div");
-  r.className = `tiles ${a}`.trim(), r.style.setProperty("--cols", n), r.setAttribute("role", "radiogroup"), r.setAttribute("aria-label", t);
-  const s = e.map((c) => {
-    const h = document.createElement("button");
-    return h.type = "button", h.className = "tile", c.wide && h.classList.add("wide"), h.setAttribute("role", "radio"), h.dataset.value = c.value, c.title && (h.title = c.title), h.innerHTML = `${c.preview ? `<span class="tile-preview" aria-hidden="true">${c.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${c.sub ? '<span class="tile-sub"></span>' : ""}</span>`, h.querySelector(".tile-label").textContent = c.label, c.sub && (h.querySelector(".tile-sub").textContent = c.sub), h.addEventListener("click", () => p(c.value)), h;
+function Ga({ label: e, options: t, columns: n = 3, className: a = "", onSelect: o }) {
+  const s = document.createElement("div");
+  s.className = `tiles ${a}`.trim(), s.style.setProperty("--cols", n), s.setAttribute("role", "radiogroup"), s.setAttribute("aria-label", e);
+  const r = t.map((p) => {
+    const u = document.createElement("button");
+    return u.type = "button", u.className = "tile", p.wide && u.classList.add("wide"), u.setAttribute("role", "radio"), u.dataset.value = p.value, p.title && (u.title = p.title), u.innerHTML = `${p.preview ? `<span class="tile-preview" aria-hidden="true">${p.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${p.sub ? '<span class="tile-sub"></span>' : ""}</span>`, u.querySelector(".tile-label").textContent = p.label, p.sub && (u.querySelector(".tile-sub").textContent = p.sub), u.addEventListener("click", () => d(p.value)), u;
   });
-  r.append(...s);
+  s.append(...r);
   let i = null;
-  function l(c) {
-    i = c, s.forEach((y) => y.setAttribute("aria-checked", String(y.dataset.value === c)));
-    const h = Math.max(0, s.findIndex((y) => y.dataset.value === c));
-    s.forEach((y, f) => {
-      y.tabIndex = f === h ? 0 : -1;
+  function l(p) {
+    i = p, r.forEach((v) => v.setAttribute("aria-checked", String(v.dataset.value === p)));
+    const u = Math.max(0, r.findIndex((v) => v.dataset.value === p));
+    r.forEach((v, f) => {
+      v.tabIndex = f === u ? 0 : -1;
     });
   }
-  function p(c, h) {
-    c !== i && (l(c), o(c)), h && s.find((y) => y.dataset.value === c).focus();
+  function d(p, u) {
+    p !== i && (l(p), o(p)), u && r.find((v) => v.dataset.value === p).focus();
   }
-  return r.addEventListener("keydown", (c) => {
-    const h = s.indexOf(c.target.closest(".tile"));
-    if (h < 0) return;
-    const y = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[c.key];
+  return s.addEventListener("keydown", (p) => {
+    const u = r.indexOf(p.target.closest(".tile"));
+    if (u < 0) return;
+    const v = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[p.key];
     let f;
-    if (y) f = (h + y + s.length) % s.length;
-    else if (c.key === "Home") f = 0;
-    else if (c.key === "End") f = s.length - 1;
+    if (v) f = (u + v + r.length) % r.length;
+    else if (p.key === "Home") f = 0;
+    else if (p.key === "End") f = r.length - 1;
     else return;
-    c.preventDefault(), p(s[f].dataset.value, !0);
-  }), l(null), { el: r, setValue: l };
+    p.preventDefault(), d(r[f].dataset.value, !0);
+  }), l(null), { el: s, setValue: l };
 }
-const F = (t) => getComputedStyle(document.documentElement).getPropertyValue(t).trim();
-function ye(t, e) {
-  const n = /^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(t).trim());
+const F = (e) => getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+function Se(e, t) {
+  const n = /^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(e).trim());
   if (!n) return null;
-  const a = parseFloat(n[1]) * e, o = n[2] || "px";
+  const a = parseFloat(n[1]) * t, o = n[2] || "px";
   return o === "px" ? `${Math.round(a)}px` : `${+a.toFixed(3)}${o}`;
 }
-const za = 999;
-function zn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: r, max: s, extra: i = [], extraTokens: l = () => ({}), shape: p = "card" }) {
-  const c = (f) => r.find((m) => m.value === f), h = (f) => f >= za ? "full" : `${f}px`, y = (f) => {
+const Ya = 999;
+function _n({ id: e, title: t, hint: n, token: a, uses: o = [], presets: s, max: r, extra: i = [], extraTokens: l = () => ({}), shape: d = "card" }) {
+  const p = (f) => s.find((m) => m.value === f), u = (f) => f >= Ya ? "full" : `${f}px`, v = (f) => {
     if (typeof f.radius == "number" && isFinite(f.radius))
-      return { [a]: `${Math.min(Math.max(f.radius, 0), s)}px` };
-    const m = c(f.corners);
+      return { [a]: `${Math.min(Math.max(f.radius, 0), r)}px` };
+    const m = p(f.corners);
     return m ? { [a]: `${m.radius}px` } : {};
   };
   return {
-    id: t,
-    title: e,
+    id: e,
+    title: t,
     hint: n,
-    presets: r,
+    presets: s,
     uses: [a, ...o],
     tokens(f) {
-      const m = f[t] || {};
-      return { ...y(m), ...l(m) };
+      const m = f[e] || {};
+      return { ...v(m), ...l(m) };
     },
     // One render function per knob, so a layout can place them separately.
     // Each takes an optional label (e.g. "Buttons" on the Corners page).
     parts: {
       corners(f, m, { label: x = "Corners" } = {}) {
-        const b = B(x), u = re({
-          label: `${e} corners`,
-          options: r.map((E) => ({ value: E.value, label: E.label, title: h(E.radius) })),
-          onSelect: (E) => m.setSection(t, { corners: E, radius: null })
-        }), v = Rn({
-          label: `${e} corner radius`,
+        const b = U(x), h = ce({
+          label: `${t} corners`,
+          options: s.map((E) => ({ value: E.value, label: E.label, title: u(E.radius) })),
+          onSelect: (E) => m.setSection(e, { corners: E, radius: null })
+        }), y = Vn({
+          label: `${t} corner radius`,
           min: 0,
-          max: s,
-          format: h,
-          onInput: (E) => m.setSection(t, { radius: E, corners: null })
+          max: r,
+          format: u,
+          onInput: (E) => m.setSection(e, { radius: E, corners: null })
         });
-        b.append(u.el, v.el), f.append(b.el);
+        b.append(h.el, y.el), f.append(b.el);
         const L = () => {
-          const E = parseFloat((m.readToken || F)(a)), J = m.getState()[t] || {}, K = c(J.corners) || r.find((G) => G.radius === E);
-          if (u.setValue(K ? K.value : null), isNaN(E)) {
-            v.setValue(0, "—"), b.setValue("");
+          const E = parseFloat((m.readToken || F)(a)), ee = m.getState()[e] || {}, K = p(ee.corners) || s.find((W) => W.radius === E);
+          if (h.setValue(K ? K.value : null), isNaN(E)) {
+            y.setValue(0, "—"), b.setValue("");
             return;
           }
-          v.setValue(Math.min(E, s), h(E)), b.setValue(h(E));
+          y.setValue(Math.min(E, r), u(E)), b.setValue(u(E));
         };
         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 }))])),
+      ...Object.fromEntries(i.map((f) => [f.key, (m, x, { label: b } = {}) => m.append($e(x, { section: e, ...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>`;
+        const b = (h) => `<span class="shape shape-${d}" style="border-radius:${Math.min(h, d === "button" ? 12 : 16)}px"></span>`;
         f.append(V(m, {
-          section: t,
+          section: e,
           key: "corners",
           label: x,
-          columns: r.length,
-          options: r.map((u) => ({ value: u.value, label: u.label, title: h(u.radius), preview: b(u.radius) })),
-          current: (u) => {
-            const v = u[t] || {};
-            if (v.radius != null) return null;
+          columns: s.length,
+          options: s.map((h) => ({ value: h.value, label: h.label, title: u(h.radius), preview: b(h.radius) })),
+          current: (h) => {
+            const y = h[e] || {};
+            if (y.radius != null) return null;
             const L = parseFloat((m.readToken || F)(a));
-            return (c(v.corners) || r.find((E) => E.radius === L))?.value || null;
+            return (p(y.corners) || s.find((E) => E.radius === L))?.value || null;
           },
-          select: (u) => m.setSection(t, { corners: u, radius: null }),
+          select: (h) => m.setSection(e, { corners: h, radius: null }),
           valueText: () => {
-            const u = parseFloat((m.readToken || F)(a));
-            return isNaN(u) ? "" : h(u);
+            const h = parseFloat((m.readToken || F)(a));
+            return isNaN(h) ? "" : u(h);
           }
         }));
       },
       ...Object.fromEntries(i.filter((f) => f.preview).map((f) => [`${f.key}Tiles`, (m, x, { label: b } = {}) => m.append(V(x, {
-        section: t,
+        section: e,
         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) }))
+        options: f.options.map((h) => ({ ...h, preview: f.preview(h.value) }))
       }))]))
     },
     render(f, m) {
@@ -1437,50 +1537,50 @@ function zn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: r, max:
     }
   };
 }
-function ke(t, { section: e, key: n, label: a, options: o, fallback: r, valueText: s }) {
-  const i = B(a), l = re({
+function $e(e, { section: t, key: n, label: a, options: o, fallback: s, valueText: r }) {
+  const i = U(a), l = ce({
     label: a,
     options: o,
-    onSelect: (c) => t.setSection(e, { [n]: c })
+    onSelect: (p) => e.setSection(t, { [n]: p })
   });
   i.append(l.el);
-  const p = () => {
-    const c = (t.getState()[e] || {})[n] || r;
-    l.setValue(c), i.setValue(s ? s(c) : "");
+  const d = () => {
+    const p = (e.getState()[t] || {})[n] || s;
+    l.setValue(p), i.setValue(r ? r(p) : "");
   };
-  return p(), t.onChange(p), i.el;
-}
-function Ia(t, { section: e, key: n, label: a, min: o, max: r, fallback: s, format: i }) {
-  const l = B(a), p = Rn({ label: a, min: o, max: r, format: i, onInput: (h) => t.setSection(e, { [n]: h }) });
-  l.append(p.el);
-  const c = () => {
-    const h = (t.getState()[e] || {})[n];
-    p.setValue(typeof h == "number" ? h : s);
+  return d(), e.onChange(d), i.el;
+}
+function Xa(e, { section: t, key: n, label: a, min: o, max: s, fallback: r, format: i }) {
+  const l = U(a), d = Vn({ label: a, min: o, max: s, format: i, onInput: (u) => e.setSection(t, { [n]: u }) });
+  l.append(d.el);
+  const p = () => {
+    const u = (e.getState()[t] || {})[n];
+    d.setValue(typeof u == "number" ? u : r);
   };
-  return c(), t.onChange(c), l.el;
+  return p(), e.onChange(p), l.el;
 }
-function V(t, { section: e, key: n, label: a, options: o, columns: r = 3, className: s = "", fallback: i, valueText: l, current: p, select: c }) {
-  const h = B(a), y = Ra({
+function V(e, { section: t, key: n, label: a, options: o, columns: s = 3, className: r = "", fallback: i, valueText: l, current: d, select: p }) {
+  const u = U(a), v = Ga({
     label: a,
     options: o,
-    columns: r,
-    className: s,
-    onSelect: (m) => c ? c(m) : t.setSection(e, { [n]: m })
+    columns: s,
+    className: r,
+    onSelect: (m) => p ? p(m) : e.setSection(t, { [n]: m })
   });
-  h.append(y.el);
+  u.append(v.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) : "");
+    const m = e.getState(), x = d ? d(m) : (m[t] || {})[n] || i || null;
+    v.setValue(x), u.setValue(l ? l(x, m) : "");
   };
-  return f(), t.onChange(f), h.el;
+  return f(), e.onChange(f), u.el;
 }
-const ln = (t, e) => e.map((n) => `${t}${n}`), In = {
+const gn = (e, t) => t.map((n) => `${e}${n}`), Kn = {
   fonts: { label: "Tokens", tokens: ["font-heading", "font-body"], kind: "text" },
-  type: { label: "Tokens", tokens: ln("text-", ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"]), kind: "length" },
+  type: { label: "Tokens", tokens: gn("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: ln("space-", [1, 2, 3, 4, 5, 6, 7, 8]), kind: "length", bar: 64 },
+  spacing: { label: "Steps", tokens: gn("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" },
@@ -1488,124 +1588,124 @@ const ln = (t, e) => e.map((n) => `${t}${n}`), In = {
   buttonStyle: { label: "Button", tokens: ["button-bg", "button-fg", "button-border", "button-hover"], kind: "colour" },
   cardStyle: { label: "Card", tokens: ["card-bg", "card-border"], kind: "colour" },
   cardShadow: { label: "Card shadow", tokens: ["card-shadow"], kind: "text" }
-}, _ = (t) => `--twd-${t}`, Qe = (t, e) => Object.prototype.hasOwnProperty.call(t.getState().custom || {}, e), dn = (t, e) => In[e].tokens.some((n) => (t.custom || {})[n] != null);
-function Da(t, e) {
-  const n = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
-  return !n || e === "text" || e === "colour" ? null : n[2] === "rem" ? { n: +(parseFloat(n[1]) * 16).toFixed(1), unit: "px" } : { n: +parseFloat(n[1]).toFixed(3), unit: n[2] || (e === "length" ? "px" : "") };
+}, _ = (e) => `--twd-${e}`, at = (e, t) => Object.prototype.hasOwnProperty.call(e.getState().custom || {}, t), mn = (e, t) => Kn[t].tokens.some((n) => (e.custom || {})[n] != null);
+function Za(e, t) {
+  const n = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(e).trim());
+  return !n || t === "text" || t === "colour" ? null : n[2] === "rem" ? { n: +(parseFloat(n[1]) * 16).toFixed(1), unit: "px" } : { n: +parseFloat(n[1]).toFixed(3), unit: n[2] || (t === "length" ? "px" : "") };
 }
-function Ba(t, e) {
-  const n = t.trim();
-  return n ? e === "length" && /^-?\d*\.?\d+$/.test(n) ? `${n}px` : n : null;
+function Ja(e, t) {
+  const n = e.trim();
+  return n ? t === "length" && /^-?\d*\.?\d+$/.test(n) ? `${n}px` : n : null;
 }
-function Ua(t, e, n, a) {
+function Qa(e, t, n, a) {
   const o = document.createElement("div");
   o.className = `token-row kind-${n}`, o.innerHTML = `
-    <code class="token-name" title="${_(e)}">${e}</code>
+    <code class="token-name" title="${_(t)}">${t}</code>
     ${a ? '<span class="token-bar"><span></span></span>' : '<span class="token-gap"></span>'}
     <span class="custom-tag" hidden>Custom</span>
     <label class="token-value">
       ${n === "colour" ? '<span class="token-swatch"></span>' : ""}
-      <input type="text" spellcheck="false" aria-label="${_(e)}" ${n === "length" || n === "number" ? 'inputmode="decimal"' : ""}>
+      <input type="text" spellcheck="false" aria-label="${_(t)}" ${n === "length" || n === "number" ? 'inputmode="decimal"' : ""}>
       <span class="token-unit"></span>
     </label>
-    <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${_(e)}" hidden>${A.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${_(t)}" hidden>${A.reset}</button>
   `;
-  const r = o.querySelector("input"), s = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), p = o.querySelector(".custom-tag"), c = o.querySelector(".token-reset");
-  let h = "";
-  const y = () => {
-    let m = r.value;
-    h && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${h}`);
-    const x = Ba(m, n), b = F(_(e));
+  const s = o.querySelector("input"), r = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), d = o.querySelector(".custom-tag"), p = o.querySelector(".token-reset");
+  let u = "";
+  const v = () => {
+    let m = s.value;
+    u && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${u}`);
+    const x = Ja(m, n), b = F(_(t));
     if (x === null) {
-      Qe(t, e) ? t.setSection("custom", { [e]: null }) : f();
+      at(e, t) ? e.setSection("custom", { [t]: null }) : f();
       return;
     }
-    if (x === b && !Qe(t, e)) return f();
-    t.setSection("custom", { [e]: x });
+    if (x === b && !at(e, t)) return f();
+    e.setSection("custom", { [t]: x });
   };
-  r.addEventListener("change", y), r.addEventListener("blur", () => f()), r.addEventListener("keydown", (m) => {
-    m.key === "Enter" && (m.preventDefault(), r.blur()), m.key === "Escape" && (m.stopPropagation(), f(), r.blur());
-  }), c.addEventListener("click", () => t.setSection("custom", { [e]: null }));
+  s.addEventListener("change", v), s.addEventListener("blur", () => f()), s.addEventListener("keydown", (m) => {
+    m.key === "Enter" && (m.preventDefault(), s.blur()), m.key === "Escape" && (m.stopPropagation(), f(), s.blur());
+  }), p.addEventListener("click", () => e.setSection("custom", { [t]: null }));
   function f() {
-    const m = F(_(e)), x = Qe(t, e), b = Da(m, n);
-    h = b ? b.unit : "", document.activeElement !== r && o.getRootNode().activeElement !== r && (r.value = b ? String(b.n) : m), r.title = m, s.textContent = h, s.hidden = !h, i && (i.style.width = `${Math.max(2, Math.min(100, (b ? b.n : 0) / a * 100))}%`), l && (l.style.background = m), o.classList.toggle("edited", x), p.hidden = !x, c.hidden = !x;
+    const m = F(_(t)), x = at(e, t), b = Za(m, n);
+    u = b ? b.unit : "", document.activeElement !== s && o.getRootNode().activeElement !== s && (s.value = b ? String(b.n) : m), s.title = m, r.textContent = u, r.hidden = !u, i && (i.style.width = `${Math.max(2, Math.min(100, (b ? b.n : 0) / a * 100))}%`), l && (l.style.background = m), o.classList.toggle("edited", x), d.hidden = !x, p.hidden = !x;
   }
-  return f(), t.onChange(f), o;
+  return f(), e.onChange(f), o;
 }
-const qa = {
+const eo = {
   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]) => [_(e), n]));
+  tokens(e) {
+    return Object.fromEntries(Object.entries(e.custom || {}).map(([t, n]) => [_(t), n]));
   },
-  describe: (t, e) => ({ label: _(t), value: String(e) }),
+  describe: (e, t) => ({ label: _(e), value: String(t) }),
   // One part per Edit page group, e.g. parts.spacing → rows for --twd-space-1 … 8.
-  parts: Object.fromEntries(Object.entries(In).map(([t, e]) => [t, (n, a, { label: o = e.label } = {}) => {
-    const r = B(o);
-    r.el.classList.add("token-field");
-    const s = e.tokens[0], i = e.tokens[e.tokens.length - 1];
-    r.setValue(e.tokens.length > 2 && /-\w+$/.test(s) ? `${_(s)} … ${i.split("-").pop()}` : "");
+  parts: Object.fromEntries(Object.entries(Kn).map(([e, t]) => [e, (n, a, { label: o = t.label } = {}) => {
+    const s = U(o);
+    s.el.classList.add("token-field");
+    const r = t.tokens[0], i = t.tokens[t.tokens.length - 1];
+    s.setValue(t.tokens.length > 2 && /-\w+$/.test(r) ? `${_(r)} … ${i.split("-").pop()}` : "");
     const l = document.createElement("div");
-    l.className = "token-rows", e.tokens.forEach((p) => l.append(Ua(a, p, e.kind, e.bar))), r.append(l), n.append(r.el);
+    l.className = "token-rows", t.tokens.forEach((d) => l.append(Qa(a, d, t.kind, t.bar))), s.append(l), n.append(s.el);
   }]))
-}, we = { compact: 0.75, regular: 1, comfy: 1.25 }, xt = [0.75, 1.25], cn = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => `--twd-space-${t}`);
-function te(t = {}) {
-  return typeof t.factor == "number" && isFinite(t.factor) ? Math.min(xt[1], Math.max(xt[0], t.factor)) : we[t.spacing] || 1;
+}, ve = { compact: 0.75, regular: 1, comfy: 1.25 }, kt = [0.75, 1.25], bn = [1, 2, 3, 4, 5, 6, 7, 8].map((e) => `--twd-space-${e}`);
+function se(e = {}) {
+  return typeof e.factor == "number" && isFinite(e.factor) ? Math.min(kt[1], Math.max(kt[0], e.factor)) : ve[e.spacing] || 1;
 }
-const et = (t) => `${Math.round(t * 100)}%`, Va = {
+const ot = (e) => `${Math.round(e * 100)}%`, to = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
-  uses: cn,
-  tokens(t) {
-    const e = te(t.density);
-    if (e === 1) return {};
+  uses: bn,
+  tokens(e) {
+    const t = se(e.density);
+    if (t === 1) return {};
     const n = {};
-    return cn.forEach((a) => {
-      const o = ye(F(a), e);
+    return bn.forEach((a) => {
+      const o = Se(F(a), t);
       o && (n[a] = o);
     }), n;
   },
   /** How the Changes list and prompt describe a setting. */
-  describe: (t, e) => t === "factor" ? { label: "Spacing", value: et(e) } : null,
+  describe: (e, t) => e === "factor" ? { label: "Spacing", value: ot(t) } : null,
   parts: {
     // Tabbed layout: presets as tiles with a tiny layout sketch.
-    spacingTiles(t, e, { label: n = "Density" } = {}) {
-      const a = (o, r) => `<span class="sketch" style="padding:${r}px;gap:${o}px"><i></i><i></i><i></i></span>`;
-      t.append(V(e, {
+    spacingTiles(e, t, { label: n = "Density" } = {}) {
+      const a = (o, s) => `<span class="sketch" style="padding:${s}px;gap:${o}px"><i></i><i></i><i></i></span>`;
+      e.append(V(t, {
         section: "density",
         key: "spacing",
         label: n,
         options: [{ value: "compact", label: "Compact", preview: a(2, 5) }, { value: "regular", label: "Regular", preview: a(4, 8) }, { value: "comfy", label: "Comfy", preview: a(6, 11) }],
         current: (o) => {
-          const r = te(o.density);
-          return Object.keys(we).find((s) => we[s] === r) || null;
+          const s = se(o.density);
+          return Object.keys(ve).find((r) => ve[r] === s) || null;
         },
-        select: (o) => e.setSection("density", { spacing: o, factor: null }),
-        valueText: (o, r) => dn(r, "spacing") ? "Custom" : o ? "" : et(te(r.density))
+        select: (o) => t.setSection("density", { spacing: o, factor: null }),
+        valueText: (o, s) => mn(s, "spacing") ? "Custom" : o ? "" : ot(se(s.density))
       }));
     },
-    spacing(t, e, { label: n = "Spacing" } = {}) {
-      const a = B(n), o = re({
+    spacing(e, t, { label: n = "Spacing" } = {}) {
+      const a = U(n), o = ce({
         label: n,
         options: [{ value: "compact", label: "Compact" }, { value: "regular", label: "Regular" }, { value: "comfy", label: "Comfy" }],
-        onSelect: (s) => e.setSection("density", { spacing: s, factor: null })
+        onSelect: (r) => t.setSection("density", { spacing: r, factor: null })
       });
       a.append(o.el);
-      const r = () => {
-        const s = e.getState().density || {}, i = te(s), l = Object.keys(we).find((p) => we[p] === i);
-        o.setValue(l || null), a.setValue(dn(e.getState(), "spacing") ? "Custom" : l ? "" : et(i));
+      const s = () => {
+        const r = t.getState().density || {}, i = se(r), l = Object.keys(ve).find((d) => ve[d] === i);
+        o.setValue(l || null), a.setValue(mn(t.getState(), "spacing") ? "Custom" : l ? "" : ot(i));
       };
-      r(), e.onChange(r), t.append(a.el);
+      s(), t.onChange(s), e.append(a.el);
     }
   },
-  render(t, e) {
-    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
+  render(e, t) {
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, Ha = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', _a = [
+}, no = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', ao = [
   [50, "white", 10],
   [100, "white", 20],
   [200, "white", 36],
@@ -1617,35 +1717,35 @@ const et = (t) => `${Math.round(t * 100)}%`, Va = {
   [800, "black", 58],
   [900, "black", 45],
   [950, "black", 30]
-], tt = (t) => {
-  let e = String(t).trim().replace(/^#/, "");
-  return /^[0-9a-f]{3}$/i.test(e) && (e = e.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(e) ? `#${e.toUpperCase()}` : null;
+], rt = (e) => {
+  let t = String(e).trim().replace(/^#/, "");
+  return /^[0-9a-f]{3}$/i.test(t) && (t = t.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(t) ? `#${t.toUpperCase()}` : null;
 };
-function Ka({ label: t, onInput: e }) {
+function oo({ label: e, onInput: t }) {
   const n = document.createElement("div");
   n.className = "colour";
   const a = document.createElement("div");
   a.className = "colour-field";
   const o = document.createElement("input");
   o.type = "color", o.className = "colour-picker", o.tabIndex = -1, o.setAttribute("aria-hidden", "true");
-  const r = document.createElement("button");
-  r.type = "button", r.className = "colour-swatch", r.setAttribute("aria-label", `${t}: open colour picker`);
-  const s = document.createElement("input");
-  s.type = "text", s.className = "colour-hex", s.spellcheck = !1, s.maxLength = 7, s.setAttribute("aria-label", `${t} hex value`);
+  const s = document.createElement("button");
+  s.type = "button", s.className = "colour-swatch", s.setAttribute("aria-label", `${e}: open colour picker`);
+  const r = document.createElement("input");
+  r.type = "text", r.className = "colour-hex", r.spellcheck = !1, r.maxLength = 7, r.setAttribute("aria-label", `${e} hex value`);
   const i = document.createElement("button");
-  i.type = "button", i.className = "colour-pipette", i.innerHTML = Ha, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, r, s, i);
+  i.type = "button", i.className = "colour-pipette", i.innerHTML = no, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, s, r, i);
   const l = document.createElement("div");
-  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = _a.map(([f, m, x]) => {
+  l.className = "ramp", l.setAttribute("aria-hidden", "true"), l.innerHTML = ao.map(([f, m, x]) => {
     const b = m ? `color-mix(in oklch, var(--brand) ${x}%, ${m})` : "var(--brand)";
     return `<span title="${f}" style="background:${b}"></span>`;
   }).join(""), n.append(a, l);
-  let p = "#000000";
-  const c = (f) => {
-    p = f, o.value = f.toLowerCase(), r.style.background = f, n.getRootNode().activeElement !== s && (s.value = f), n.style.setProperty("--brand", f);
-  }, h = (f) => {
-    f !== p && (c(f), e(f));
+  let d = "#000000";
+  const p = (f) => {
+    d = f, o.value = f.toLowerCase(), s.style.background = f, n.getRootNode().activeElement !== r && (r.value = f), n.style.setProperty("--brand", f);
+  }, u = (f) => {
+    f !== d && (p(f), t(f));
   };
-  r.addEventListener("click", () => {
+  s.addEventListener("click", () => {
     if (o.showPicker)
       try {
         o.showPicker();
@@ -1653,64 +1753,64 @@ function Ka({ label: t, onInput: e }) {
       } catch {
       }
     o.click();
-  }), o.addEventListener("input", () => h(o.value.toUpperCase())), s.addEventListener("input", () => {
-    const f = tt(s.value);
-    f && h(f);
+  }), o.addEventListener("input", () => u(o.value.toUpperCase())), r.addEventListener("input", () => {
+    const f = rt(r.value);
+    f && u(f);
   });
-  const y = () => {
-    s.value = p;
+  const v = () => {
+    r.value = d;
   };
-  return s.addEventListener("blur", y), s.addEventListener("keydown", (f) => {
-    f.key === "Enter" && (y(), s.select());
+  return r.addEventListener("blur", v), r.addEventListener("keydown", (f) => {
+    f.key === "Enter" && (v(), r.select());
   }), i.addEventListener("click", async () => {
     if ("EyeDropper" in window)
       try {
-        const { sRGBHex: f } = await new window.EyeDropper().open(), m = tt(f);
-        m && h(m);
+        const { sRGBHex: f } = await new window.EyeDropper().open(), m = rt(f);
+        m && u(m);
       } catch {
       }
     else
-      r.click();
-  }), { el: n, setValue: (f) => c(tt(f) || p) };
+      s.click();
+  }), { el: n, setValue: (f) => p(rt(f) || d) };
 }
-function Ga({ label: t, options: e, onSelect: n }) {
+function ro({ label: e, options: t, 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.className = "swatches", a.setAttribute("role", "radiogroup"), a.setAttribute("aria-label", e);
+  const o = t.map((l) => {
+    const d = document.createElement("button");
+    return d.type = "button", d.className = "swatch", d.setAttribute("role", "radio"), d.dataset.value = l.value, d.innerHTML = `<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`, d.addEventListener("click", () => i(l.value)), d;
   });
   a.append(...o);
-  let r = null;
-  function s(l) {
-    r = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
-    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
-    o.forEach((c, h) => {
-      c.tabIndex = h === p ? 0 : -1;
+  let s = null;
+  function r(l) {
+    s = l, o.forEach((p) => p.setAttribute("aria-checked", String(p.dataset.value === l)));
+    const d = Math.max(0, o.findIndex((p) => p.dataset.value === l));
+    o.forEach((p, u) => {
+      p.tabIndex = u === d ? 0 : -1;
     });
   }
-  function i(l, p) {
-    l !== r && (s(l), n(l)), p && o.find((c) => c.dataset.value === l).focus();
+  function i(l, d) {
+    l !== s && (r(l), n(l)), d && o.find((p) => p.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;
+    const d = o.indexOf(l.target.closest(".swatch"));
+    if (d < 0) return;
+    const p = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[l.key];
+    let u;
+    if (p) u = (d + p + o.length) % o.length;
+    else if (l.key === "Home") u = 0;
+    else if (l.key === "End") u = o.length - 1;
     else return;
-    l.preventDefault(), i(o[h].dataset.value, !0);
-  }), s(null), { el: a, setValue: s };
-}
-const Wa = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => Object.fromEntries(t.split(" ").map((e, n) => [Wa[n], `#${e}`])), nt = {
-  slate: me("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
-  gray: me("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
-  zinc: me("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
-  neutral: me("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
-  stone: me("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
-}, N = (t) => Object.fromEntries(t.split(" ").map((e, n) => [400 + 100 * n, `#${e}`])), at = {
+    l.preventDefault(), i(o[u].dataset.value, !0);
+  }), r(null), { el: a, setValue: r };
+}
+const so = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], xe = (e) => Object.fromEntries(e.split(" ").map((t, n) => [so[n], `#${t}`])), st = {
+  slate: xe("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
+  gray: xe("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
+  zinc: xe("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
+  neutral: xe("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
+  stone: xe("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
+}, N = (e) => Object.fromEntries(e.split(" ").map((t, n) => [400 + 100 * n, `#${t}`])), it = {
   red: N("f87171 ef4444 dc2626 b91c1c 991b1b"),
   orange: N("fb923c f97316 ea580c c2410c 9a3412"),
   amber: N("fbbf24 f59e0b d97706 b45309 92400e"),
@@ -1728,17 +1828,17 @@ const Wa = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => O
   fuchsia: N("e879f9 d946ef c026d3 a21caf 86198f"),
   pink: N("f472b6 ec4899 db2777 be185d 9d174d"),
   rose: N("fb7185 f43f5e e11d48 be123c 9f1239")
-}, ze = [
+}, Be = [
   { value: "indigo-zinc", label: "Indigo · Zinc", primary: "indigo", neutral: "zinc" },
   { value: "emerald-stone", label: "Emerald · Stone", primary: "emerald", neutral: "stone" },
   { value: "rose-slate", label: "Rose · Slate", primary: "rose", neutral: "slate" },
   { value: "amber-neutral", label: "Amber · Neutral", primary: "amber", neutral: "neutral" }
-], pn = "#4F46E5", Ya = "#A0743C", Za = [
+], xn = "#4F46E5", io = "#A0743C", lo = [
   // Figma Swatch row sample colours
   { value: "pure", label: "Pure", colour: "#8E8E93" },
   { value: "subtle", label: "Subtle", colour: "#8A89A6" },
   { value: "warm", label: "Warm", colour: "#9C9389" }
-], un = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], Xa = {
+], wn = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], co = {
   // proposal
   bg: "#0F0F11",
   surface: "#18181B",
@@ -1746,118 +1846,118 @@ const Wa = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => O
   text: "#F4F4F5",
   "text-muted": "#A1A1AA",
   border: "#2E2E33"
-}, Ja = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, Y = (t) => /^#[0-9a-f]{6}$/i.test(t || ""), ot = (t) => [500, 600, 700].includes(Number(t.shade)) ? Number(t.shade) : 600, rt = (t) => t[0].toUpperCase() + t.slice(1);
-function hn(t) {
-  const e = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => e(parseInt(t.slice(l, l + 2), 16))), r = 0.2126 * n + 0.7152 * a + 0.0722 * o, s = 1.05 / (r + 0.05), i = (r + 0.05) / (98e-4 + 0.05);
-  return s >= i ? "#FFFFFF" : "#18181B";
+}, po = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, X = (e) => /^#[0-9a-f]{6}$/i.test(e || ""), lt = (e) => [500, 600, 700].includes(Number(e.shade)) ? Number(e.shade) : 600, dt = (e) => e[0].toUpperCase() + e.slice(1);
+function yn(e) {
+  const t = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => t(parseInt(e.slice(l, l + 2), 16))), s = 0.2126 * n + 0.7152 * a + 0.0722 * o, r = 1.05 / (s + 0.05), i = (s + 0.05) / (98e-4 + 0.05);
+  return r >= i ? "#FFFFFF" : "#18181B";
 }
-const De = {
+const He = {
   id: "colour",
   title: "Colour",
   hint: "Brand colour · neutral tint · mode",
-  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...un.map((t) => `--twd-${t}`)],
-  tokens(t) {
-    const e = t.colour || {}, n = {}, a = e.mode === "dark", o = at[e.primary];
-    if (!Y(e.brand) && o) {
-      const i = ot(e);
-      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = hn(o[i]), n["--twd-focus"] = o[500];
+  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...wn.map((e) => `--twd-${e}`)],
+  tokens(e) {
+    const t = e.colour || {}, n = {}, a = t.mode === "dark", o = it[t.primary];
+    if (!X(t.brand) && o) {
+      const i = lt(t);
+      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = yn(o[i]), n["--twd-focus"] = o[500];
     }
-    Y(e.brand) && (n["--twd-primary"] = e.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${e.brand} 85%, white)` : `color-mix(in oklch, ${e.brand} 86%, black)`, n["--twd-on-primary"] = hn(e.brand), n["--twd-focus"] = e.brand);
-    const r = e.tint === "subtle" ? Y(e.brand) ? e.brand : F("--twd-primary") || pn : e.tint === "warm" ? Ya : null, s = nt[e.neutral];
-    if (s) {
-      const i = a ? { bg: s[950], surface: s[900], "surface-raised": s[800], text: s[100], "text-muted": s[400], border: s[800] } : { bg: s[50], surface: "#ffffff", "surface-raised": "#ffffff", text: s[900], "text-muted": s[500], border: s[200] };
-      Object.entries(i).forEach(([l, p]) => {
-        n[`--twd-${l}`] = p;
+    X(t.brand) && (n["--twd-primary"] = t.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${t.brand} 85%, white)` : `color-mix(in oklch, ${t.brand} 86%, black)`, n["--twd-on-primary"] = yn(t.brand), n["--twd-focus"] = t.brand);
+    const s = t.tint === "subtle" ? X(t.brand) ? t.brand : F("--twd-primary") || xn : t.tint === "warm" ? io : null, r = st[t.neutral];
+    if (r) {
+      const i = a ? { bg: r[950], surface: r[900], "surface-raised": r[800], text: r[100], "text-muted": r[400], border: r[800] } : { bg: r[50], surface: "#ffffff", "surface-raised": "#ffffff", text: r[900], "text-muted": r[500], border: r[200] };
+      Object.entries(i).forEach(([l, d]) => {
+        n[`--twd-${l}`] = d;
       });
-    } else (a || r) && un.forEach((i) => {
-      const l = a ? Xa[i] : F(`--twd-${i}`);
-      l && (n[`--twd-${i}`] = r ? `color-mix(in oklch, ${l} ${100 - Ja[i]}%, ${r})` : l);
+    } else (a || s) && wn.forEach((i) => {
+      const l = a ? co[i] : F(`--twd-${i}`);
+      l && (n[`--twd-${i}`] = s ? `color-mix(in oklch, ${l} ${100 - po[i]}%, ${s})` : l);
     });
     return n;
   },
   parts: {
     // ---- Tabbed layout (Colour tab): themes, then Tailwind fine-tuning ----
-    themeTiles(t, e, { label: n = "Theme" } = {}) {
+    themeTiles(e, t, { label: n = "Theme" } = {}) {
       const a = (o) => {
-        const r = nt[o.neutral], s = at[o.primary];
-        return `<span class="theme" style="--bg:${r[50]};--line:${r[200]};--ink:${r[900]};--soft:${r[500]};--pri:${s[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[s[400], s[500], s[600], s[700], s[800], r[200], r[500], r[900]].map((i) => `<i style="background:${i}"></i>`).join("")}</span>`;
+        const s = st[o.neutral], r = it[o.primary];
+        return `<span class="theme" style="--bg:${s[50]};--line:${s[200]};--ink:${s[900]};--soft:${s[500]};--pri:${r[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[r[400], r[500], r[600], r[700], r[800], s[200], s[500], s[900]].map((i) => `<i style="background:${i}"></i>`).join("")}</span>`;
       };
-      t.append(V(e, {
+      e.append(V(t, {
         section: "colour",
         key: "theme",
         label: n,
         columns: 2,
         className: "tiles-themes",
-        options: ze.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
+        options: Be.map((o) => ({ value: o.value, label: o.label, preview: a(o) })),
         current: (o) => {
-          const r = o.colour || {};
-          return Y(r.brand) ? null : ze.find((s) => s.primary === r.primary && s.neutral === r.neutral)?.value || null;
+          const s = o.colour || {};
+          return X(s.brand) ? null : Be.find((r) => r.primary === s.primary && r.neutral === s.neutral)?.value || null;
         },
         select: (o) => {
-          const r = ze.find((s) => s.value === o);
-          e.setSection("colour", { primary: r.primary, neutral: r.neutral, shade: null, brand: null, tint: null });
+          const s = Be.find((r) => r.value === o);
+          t.setSection("colour", { primary: s.primary, neutral: s.neutral, shade: null, brand: null, tint: null });
         },
-        valueText: (o, r) => {
-          const s = r.colour || {};
-          return o ? "" : s.primary || s.neutral || s.brand ? "Custom" : "Prototype colours";
+        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, {
+    primary(e, t, { label: n = "Primary" } = {}) {
+      const a = U(n), o = V(t, {
         section: "colour",
         key: "primary",
         label: `${n} colour family`,
         columns: 9,
         className: "tiles-swatches",
-        options: Object.entries(at).map(([i, l]) => ({ value: i, label: rt(i), title: rt(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
+        options: Object.entries(it).map(([i, l]) => ({ value: i, label: dt(i), title: dt(i), preview: `<span class="dot" style="background:${l[500]}"></span>` })),
         current: (i) => {
           const l = i.colour || {};
-          return Y(l.brand) ? null : l.primary || null;
+          return X(l.brand) ? null : l.primary || null;
         },
-        select: (i) => e.setSection("colour", { primary: i, brand: null })
+        select: (i) => t.setSection("colour", { primary: i, brand: null })
       });
       o.querySelector(".field-head").remove();
-      const r = re({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => e.setSection("colour", { shade: Number(i) }) });
-      a.append(o, r.el);
-      const s = () => {
-        const i = e.getState().colour || {};
-        r.setValue(String(ot(i))), a.setValue(Y(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${ot(i)}` : "");
+      const s = ce({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => t.setSection("colour", { shade: Number(i) }) });
+      a.append(o, s.el);
+      const r = () => {
+        const i = t.getState().colour || {};
+        s.setValue(String(lt(i))), a.setValue(X(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${lt(i)}` : "");
       };
-      s(), e.onChange(s), t.append(a.el);
+      r(), t.onChange(r), e.append(a.el);
     },
-    neutralTiles(t, e, { label: n = "Neutral" } = {}) {
-      t.append(V(e, {
+    neutralTiles(e, t, { label: n = "Neutral" } = {}) {
+      e.append(V(t, {
         section: "colour",
         key: "neutral",
         label: n,
         columns: 5,
         className: "tiles-greys",
-        options: Object.entries(nt).map(([a, o]) => ({ value: a, label: rt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((r) => `<i style="background:${r}"></i>`).join("")}</span>` })),
-        select: (a) => e.setSection("colour", { neutral: a, tint: null }),
+        options: Object.entries(st).map(([a, o]) => ({ value: a, label: dt(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((s) => `<i style="background:${s}"></i>`).join("")}</span>` })),
+        select: (a) => t.setSection("colour", { neutral: a, tint: null }),
         valueText: (a) => a || ""
       }));
     },
-    custom(t, e) {
+    custom(e, t) {
       const n = document.createElement("details");
       n.className = "more more-custom", n.innerHTML = '<summary><span class="rainbow" aria-hidden="true"></span><span>Custom colour…</span><span class="muted">any hex</span></summary>';
       const a = document.createElement("div");
-      a.className = "more-body", n.append(a), De.parts.brand(a, e, { label: "Brand" }), Y((e.getState().colour || {}).brand) && (n.open = !0), t.append(n);
+      a.className = "more-body", n.append(a), He.parts.brand(a, t, { label: "Brand" }), X((t.getState().colour || {}).brand) && (n.open = !0), e.append(n);
     },
-    brand(t, e, { label: n = "Brand" } = {}) {
-      const a = B(n), o = Ka({ label: "Brand colour", onInput: (s) => e.setSection("colour", { brand: s }) });
+    brand(e, t, { label: n = "Brand" } = {}) {
+      const a = U(n), o = oo({ label: "Brand colour", onInput: (r) => t.setSection("colour", { brand: r }) });
       a.append(o.el);
-      const r = () => o.setValue((e.getState().colour || {}).brand || (e.readToken || F)("--twd-primary") || pn);
-      r(), e.onChange(r), t.append(a.el);
+      const s = () => o.setValue((t.getState().colour || {}).brand || (t.readToken || F)("--twd-primary") || xn);
+      s(), t.onChange(s), e.append(a.el);
     },
-    neutral(t, e, { label: n = "Neutral" } = {}) {
-      const a = B(n), o = Ga({ label: "Neutral tint", options: Za, onSelect: (s) => e.setSection("colour", { tint: s }) });
+    neutral(e, t, { label: n = "Neutral" } = {}) {
+      const a = U(n), o = ro({ label: "Neutral tint", options: lo, onSelect: (r) => t.setSection("colour", { tint: r }) });
       a.append(o.el);
-      const r = () => o.setValue((e.getState().colour || {}).tint || "pure");
-      r(), e.onChange(r), t.append(a.el);
+      const s = () => o.setValue((t.getState().colour || {}).tint || "pure");
+      s(), t.onChange(s), e.append(a.el);
     },
-    mode(t, e, { label: n = "Mode" } = {}) {
-      t.append(ke(e, {
+    mode(e, t, { label: n = "Mode" } = {}) {
+      e.append($e(t, {
         section: "colour",
         key: "mode",
         label: n,
@@ -1866,15 +1966,15 @@ const De = {
       }));
     }
   },
-  render(t, e) {
-    ["brand", "neutral", "mode"].forEach((n) => this.parts[n](t, e));
+  render(e, t) {
+    ["brand", "neutral", "mode"].forEach((n) => this.parts[n](e, t));
   }
-}, Le = (t, e = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`, Qa = {
+}, Ne = (e, t = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${e}%, ${t})`, uo = {
   // proposal recipes; Solid leaves tokens.css defaults
-  soft: { bg: Le(14), fg: "var(--twd-primary)", border: "transparent", hover: Le(22) },
-  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Le(8, "transparent") },
-  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Le(10, "transparent") }
-}, eo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, Dn = zn({
+  soft: { bg: Ne(14), fg: "var(--twd-primary)", border: "transparent", hover: Ne(22) },
+  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Ne(8, "transparent") },
+  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Ne(10, "transparent") }
+}, ho = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, Wn = _n({
   id: "buttons",
   title: "Buttons",
   hint: "Style · corners · size",
@@ -1893,15 +1993,15 @@ const De = {
     // Figma: "8px"
     { value: "pill", label: "Pill", radius: 999 }
   ],
-  extraTokens(t) {
-    const e = {}, n = Qa[t.style];
-    n && Object.entries(n).forEach(([s, i]) => {
-      e[`--twd-button-${s}`] = i;
+  extraTokens(e) {
+    const t = {}, n = uo[e.style];
+    n && Object.entries(n).forEach(([r, i]) => {
+      t[`--twd-button-${r}`] = i;
     });
-    const a = eo[t.size];
-    if (!a) return e;
-    const o = ye(F("--twd-control-height"), a.height), r = ye(F("--twd-control-pad-x"), a.pad);
-    return o && (e["--twd-control-height"] = o), r && (e["--twd-control-pad-x"] = r), e;
+    const a = ho[e.size];
+    if (!a) return t;
+    const o = Se(F("--twd-control-height"), a.height), s = Se(F("--twd-control-pad-x"), a.pad);
+    return o && (t["--twd-control-height"] = o), s && (t["--twd-control-pad-x"] = s), t;
   },
   extra: [
     {
@@ -1909,23 +2009,23 @@ const De = {
       label: "Style",
       fallback: "solid",
       columns: 4,
-      preview: (t) => `<span class="shape shape-button style-${t}"></span>`,
+      preview: (e) => `<span class="shape shape-button style-${e}"></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>`,
+      preview: (e) => `<span class="shape shape-button size-${e}"></span>`,
       options: [{ value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }]
     }
   ]
-}), to = {
+}), fo = {
   // proposal recipes; Filled leaves tokens.css defaults
   outlined: { bg: "transparent", border: "color-mix(in oklch, var(--twd-border) 60%, var(--twd-text))", shadow: "none" },
   elevated: { bg: "var(--twd-surface-raised)", border: "transparent", shadow: "var(--twd-shadow-md)" },
   tinted: { bg: "color-mix(in oklch, var(--twd-primary) 8%, var(--twd-surface))", border: "color-mix(in oklch, var(--twd-primary) 25%, var(--twd-surface))", shadow: "none" }
-}, wt = zn({
+}, St = _n({
   id: "cards",
   title: "Cards",
   hint: "Style · corners · border",
@@ -1944,15 +2044,15 @@ const De = {
     { value: "large", label: "Large", radius: 20 }
     // proposal (cards don't go fully pill)
   ],
-  extraTokens(t) {
-    const e = {}, n = to[t.style];
+  extraTokens(e) {
+    const t = {}, n = fo[e.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);
+      t[`--twd-card-${a}`] = o;
+    }), e.border === "none" && (t["--twd-border-width-container"] = "0px"), e.border === "thick") {
+      const a = Se(F("--twd-border-width-container"), 2);
+      a && (t["--twd-border-width-container"] = a);
     }
-    return e;
+    return t;
   },
   extra: [
     {
@@ -1960,49 +2060,49 @@ const De = {
       label: "Style",
       fallback: "filled",
       columns: 4,
-      preview: (t) => `<span class="shape shape-card style-${t}"></span>`,
+      preview: (e) => `<span class="shape shape-card style-${e}"></span>`,
       options: [{ value: "filled", label: "Filled" }, { value: "outlined", label: "Outlined" }, { value: "elevated", label: "Elevated" }, { value: "tinted", label: "Tinted" }]
     },
     {
       key: "border",
       label: "Border",
       fallback: "thin",
-      preview: (t) => `<span class="shape shape-card border-${t}"></span>`,
+      preview: (e) => `<span class="shape shape-card border-${e}"></span>`,
       options: [{ value: "none", label: "None" }, { value: "thin", label: "Thin" }, { value: "thick", label: "Thick" }]
     }
   ]
-}), ne = 60, st = {
+}), ie = 60, ct = {
   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] }
-}, Pe = ([t, e, n, a, o], r) => {
-  const s = Math.min(1, +(o * r).toFixed(3));
-  return s <= 0 ? "none" : `${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${s})`;
-}, vt = {
+}, je = ([e, t, n, a, o], s) => {
+  const r = Math.min(1, +(o * s).toFixed(3));
+  return r <= 0 ? "none" : `${e}px ${t}px ${n}px ${a}px rgb(0 0 0 / ${r})`;
+}, $t = {
   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", a = typeof e.intensity == "number" ? Math.min(100, Math.max(0, e.intensity)) : ne;
+  tokens(e) {
+    const t = e.depth || {}, n = t.style || "soft", a = typeof t.intensity == "number" ? Math.min(100, Math.max(0, t.intensity)) : ie;
     if (n === "flat")
       return { "--twd-shadow-sm": "none", "--twd-shadow-md": "none", "--twd-shadow-lg": "none" };
-    const o = st[n];
+    const o = ct[n];
     if (!o) return {};
-    if (n === "soft" && a === ne) return {};
-    const r = a / ne;
+    if (n === "soft" && a === ie) return {};
+    const s = a / ie;
     return {
-      "--twd-shadow-sm": Pe(o.sm, r),
-      "--twd-shadow-md": Pe(o.md, r),
-      "--twd-shadow-lg": Pe(o.lg, r)
+      "--twd-shadow-sm": je(o.sm, s),
+      "--twd-shadow-md": je(o.md, s),
+      "--twd-shadow-lg": je(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:${st[o] ? Pe(st[o].md, 1) : "none"}"></span>`;
-      t.append(V(e, {
+    styleTiles(e, t, { label: n = "Style" } = {}) {
+      const a = (o) => `<span class="shape shape-card shadow-${o}" style="box-shadow:${ct[o] ? je(ct[o].md, 1) : "none"}"></span>`;
+      e.append(V(t, {
         section: "depth",
         key: "style",
         label: n,
@@ -2011,8 +2111,8 @@ const De = {
         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(ke(e, {
+    style(e, t, { label: n = "Style" } = {}) {
+      e.append($e(t, {
         section: "depth",
         key: "style",
         label: n,
@@ -2020,160 +2120,160 @@ const De = {
         options: [{ value: "flat", label: "Flat" }, { value: "soft", label: "Soft" }, { value: "crisp", label: "Crisp" }, { value: "bold", label: "Bold" }]
       }));
     },
-    intensity(t, e, { label: n = "Intensity" } = {}) {
-      t.append(Ia(e, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: ne, format: (a) => `${a}%` }));
+    intensity(e, t, { label: n = "Intensity" } = {}) {
+      e.append(Xa(t, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: ie, format: (a) => `${a}%` }));
     }
   },
-  render(t, e) {
-    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
+  render(e, t) {
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, no = (t) => Math.min(1, Math.max(0, t)), fn = (t) => Math.round(t / 50) * 50, it = (t) => `${+t.toFixed(1)}%`;
-function $t(t = {}) {
-  return typeof t.bold == "number" && isFinite(t.bold) && t.bold !== 0.5 ? no(t.bold) : null;
+}, go = (e) => Math.min(1, Math.max(0, e)), vn = (e) => Math.round(e / 50) * 50, pt = (e) => `${+e.toFixed(1)}%`;
+function Tt(e = {}) {
+  return typeof e.bold == "number" && isFinite(e.bold) && e.bold !== 0.5 ? go(e.bold) : null;
 }
-const Oe = (t, e, n) => (t.tokens(e) || {})[n] || F(n), ao = {
+const Re = (e, t, n) => (e.tokens(t) || {})[n] || F(n), mo = {
   id: "character",
   title: "Character",
   hint: "Subtle ↔ Bold",
   uses: [],
   // set from the Simple page only
-  tokens(t) {
-    const e = $t(t.character);
-    if (e === null) return {};
-    const n = {}, a = 2 * e - 1, o = Math.max(0, a), r = Math.max(0, -a);
-    n["--twd-weight-heading"] = String(fn(600 + 200 * a)), n["--twd-weight-strong"] = String(fn(600 + 100 * a));
-    const s = Oe(De, t, "--twd-border");
-    if (r && (n["--twd-border"] = `color-mix(in oklch, ${s} ${it(100 - 50 * r)}, var(--twd-bg))`), o) {
-      n["--twd-border"] = `color-mix(in oklch, ${s} ${it(100 - 90 * o)}, var(--twd-text))`;
-      const l = Oe(De, t, "--twd-text-muted");
-      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${it(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((p) => {
-        const c = p === "--twd-border-width-container" ? Oe(wt, t, p) : F(p), h = parseFloat(c);
-        isNaN(h) || (n[p] = `${Math.round(h * (1 + o))}px`);
-      }), [[Dn, "--twd-radius-control"], [wt, "--twd-radius-container"]].forEach(([p, c]) => {
-        const h = parseFloat(Oe(p, t, c));
-        !isNaN(h) && h < 999 && (n[c] = ye(`${h}px`, 1 - 0.5 * o));
+  tokens(e) {
+    const t = Tt(e.character);
+    if (t === null) return {};
+    const n = {}, a = 2 * t - 1, o = Math.max(0, a), s = Math.max(0, -a);
+    n["--twd-weight-heading"] = String(vn(600 + 200 * a)), n["--twd-weight-strong"] = String(vn(600 + 100 * a));
+    const r = Re(He, e, "--twd-border");
+    if (s && (n["--twd-border"] = `color-mix(in oklch, ${r} ${pt(100 - 50 * s)}, var(--twd-bg))`), o) {
+      n["--twd-border"] = `color-mix(in oklch, ${r} ${pt(100 - 90 * o)}, var(--twd-text))`;
+      const l = Re(He, e, "--twd-text-muted");
+      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${pt(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((d) => {
+        const p = d === "--twd-border-width-container" ? Re(St, e, d) : F(d), u = parseFloat(p);
+        isNaN(u) || (n[d] = `${Math.round(u * (1 + o))}px`);
+      }), [[Wn, "--twd-radius-control"], [St, "--twd-radius-container"]].forEach(([d, p]) => {
+        const u = parseFloat(Re(d, e, p));
+        !isNaN(u) && u < 999 && (n[p] = Se(`${u}px`, 1 - 0.5 * o));
       });
     }
-    const i = t.depth || {};
+    const i = e.depth || {};
     if (!i.style) {
-      const l = typeof i.intensity == "number" ? i.intensity : ne, p = r ? vt.tokens({ depth: { style: "soft", intensity: l * (1 - r) } }) : vt.tokens({ depth: { style: "bold", intensity: ne * o } });
-      Object.assign(n, p);
+      const l = typeof i.intensity == "number" ? i.intensity : ie, d = s ? $t.tokens({ depth: { style: "soft", intensity: l * (1 - s) } }) : $t.tokens({ depth: { style: "bold", intensity: ie * o } });
+      Object.assign(n, d);
     }
     return n;
   },
-  describe: (t, e) => t === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(e * 100)}%` } : null
-}, oo = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>', ro = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
-let so = 0;
-function io({ label: t, options: e, onSelect: n, placeholder: a, onOpen: o }) {
-  const r = `twd-fonts-${++so}`, s = document.createElement("div");
-  s.className = "font-select";
+  describe: (e, t) => e === "bold" ? { label: "Subtle ↔ Bold", value: `${Math.round(t * 100)}%` } : null
+}, bo = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>', xo = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+let wo = 0;
+function yo({ label: e, options: t, onSelect: n, placeholder: a, onOpen: o }) {
+  const s = `twd-fonts-${++wo}`, r = document.createElement("div");
+  r.className = "font-select";
   const i = document.createElement("button");
-  i.type = "button", i.className = "font-trigger", i.setAttribute("aria-haspopup", "listbox"), i.setAttribute("aria-expanded", "false"), i.setAttribute("aria-controls", r), i.innerHTML = `
+  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">${oo}</span>`;
+    <span class="font-chevron">${bo}</span>`;
   const l = document.createElement("div");
-  l.className = "font-menu", l.id = r, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", t), l.hidden = !0;
-  const p = e.map((u) => {
-    const v = document.createElement("div");
-    return v.className = "font-option", v.setAttribute("role", "option"), v.tabIndex = -1, v.dataset.value = u.value, v.innerHTML = `
-      <span class="font-aa" style="font-family:${u.preview}" aria-hidden="true">Aa</span>
-      <span class="font-text"><span class="font-name">${u.name}</span><span class="font-fonts">${u.fonts}</span></span>
-      <span class="font-check">${ro}</span>`, v.addEventListener("click", () => b(u.value)), v;
+  l.className = "font-menu", l.id = s, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", e), l.hidden = !0;
+  const d = t.map((h) => {
+    const y = document.createElement("div");
+    return y.className = "font-option", y.setAttribute("role", "option"), y.tabIndex = -1, y.dataset.value = h.value, y.innerHTML = `
+      <span class="font-aa" style="font-family:${h.preview}" aria-hidden="true">Aa</span>
+      <span class="font-text"><span class="font-name">${h.name}</span><span class="font-fonts">${h.fonts}</span></span>
+      <span class="font-check">${xo}</span>`, y.addEventListener("click", () => b(h.value)), y;
   });
-  l.append(...p), s.append(i, l);
-  let c = null;
-  function h(u) {
-    const v = e.find((E) => E.value === u), L = v || a || e[0];
-    c = v ? v.value : a ? null : e[0].value, i.querySelector(".font-name").textContent = L.name, i.querySelector(".font-fonts").textContent = L.fonts, i.querySelector(".font-aa").style.fontFamily = L.preview, i.setAttribute("aria-label", `${t}: ${L.name}, ${L.fonts}`), p.forEach((E) => E.setAttribute("aria-selected", String(E.dataset.value === c)));
+  l.append(...d), r.append(i, l);
+  let p = null;
+  function u(h) {
+    const y = t.find((E) => E.value === h), L = y || a || t[0];
+    p = y ? y.value : a ? null : t[0].value, i.querySelector(".font-name").textContent = L.name, i.querySelector(".font-fonts").textContent = L.fonts, i.querySelector(".font-aa").style.fontFamily = L.preview, i.setAttribute("aria-label", `${e}: ${L.name}, ${L.fonts}`), d.forEach((E) => E.setAttribute("aria-selected", String(E.dataset.value === p)));
   }
-  function 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 v() {
+    const h = i.getBoundingClientRect(), y = l.offsetHeight, E = window.innerHeight - h.bottom - 8 >= y ? h.bottom + 4 : Math.max(8, h.top - 4 - y);
+    l.style.top = `${E}px`, l.style.left = `${h.left}px`, l.style.width = `${h.width}px`;
   }
   function f() {
-    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), y(), (p.find((u) => u.dataset.value === c) || p[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", m), s.closest(".body")?.addEventListener("scroll", m, { once: !0 }));
+    l.hidden && (l.hidden = !1, i.setAttribute("aria-expanded", "true"), o && o(), v(), (d.find((h) => h.dataset.value === p) || d[0]).focus(), setTimeout(() => document.addEventListener("pointerdown", x, !0)), window.addEventListener("resize", m), r.closest(".body")?.addEventListener("scroll", m, { once: !0 }));
   }
-  function 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 m(h) {
+    l.hidden || (l.hidden = !0, i.setAttribute("aria-expanded", "false"), document.removeEventListener("pointerdown", x, !0), window.removeEventListener("resize", m), h === !0 && i.focus());
   }
-  function x(u) {
-    u.composedPath().includes(s) || m();
+  function x(h) {
+    h.composedPath().includes(r) || m();
   }
-  function b(u) {
-    u !== c && (h(u), n(u)), m(!0);
+  function b(h) {
+    h !== p && (u(h), n(h)), 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);
+  return i.addEventListener("click", () => l.hidden ? f() : m(!0)), i.addEventListener("keydown", (h) => {
+    (h.key === "ArrowDown" || h.key === "ArrowUp") && (h.preventDefault(), f());
+  }), l.addEventListener("keydown", (h) => {
+    const y = d.indexOf(h.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);
+    if (h.key === "ArrowDown") L = Math.min(d.length - 1, y + 1);
+    else if (h.key === "ArrowUp") L = Math.max(0, y - 1);
+    else if (h.key === "Home") L = 0;
+    else if (h.key === "End") L = d.length - 1;
+    else if (h.key === "Enter" || h.key === " ") {
+      h.preventDefault(), b(h.target.dataset.value);
       return;
-    } else if (u.key === "Escape") {
-      u.preventDefault(), u.stopPropagation(), m(!0);
+    } else if (h.key === "Escape") {
+      h.preventDefault(), h.stopPropagation(), m(!0);
       return;
-    } else if (u.key === "Tab") {
+    } else if (h.key === "Tab") {
       m();
       return;
     }
-    L !== null && (u.preventDefault(), p[L].focus());
-  }), h(a ? null : e[0].value), { el: s, setValue: h };
+    L !== null && (h.preventDefault(), d[L].focus());
+  }), u(a ? null : t[0].value), { el: r, setValue: u };
 }
-const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', Fe = 'Georgia, "Times New Roman", serif', Z = [
+const I = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', ze = 'Georgia, "Times New Roman", serif', J = [
   { value: "neutral", name: "Neutral", fonts: "Inter · Inter", heading: `"Inter", ${I}`, body: `"Inter", ${I}`, load: ["Inter:wght@400;500;600;700"] },
   { value: "modern", name: "Modern", fonts: "Geist · Geist", heading: `"Geist", ${I}`, body: `"Geist", ${I}`, load: ["Geist:wght@400;500;600;700"] },
-  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${Fe}`, body: `"Inter", ${I}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
+  { value: "editorial", name: "Editorial", fonts: "Fraunces · Inter", heading: `"Fraunces", ${ze}`, body: `"Inter", ${I}`, load: ["Fraunces:wght@400;600;700", "Inter:wght@400;500;600;700"] },
   { value: "technical", name: "Technical", fonts: "Space Grotesk · DM Sans", heading: `"Space Grotesk", ${I}`, body: `"DM Sans", ${I}`, load: ["Space+Grotesk:wght@500;600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${Fe}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${Fe}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
-  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${Fe}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
+  { value: "classic", name: "Classic", fonts: "Playfair · DM Sans", heading: `"Playfair Display", ${ze}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
+  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${ze}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
+  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${ze}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
   { value: "friendly", name: "Friendly", fonts: "Manrope · Manrope", heading: `"Manrope", ${I}`, body: `"Manrope", ${I}`, load: ["Manrope:wght@400;500;600;700"] }
-], be = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, gn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, mn = /* @__PURE__ */ new Set();
-function lt(t) {
-  const e = t.filter((a) => !mn.has(a));
-  if (!e.length) return;
-  e.forEach((a) => mn.add(a));
+], we = { compact: 1.125, balanced: 1.2, expressive: 1.333 }, kn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, Sn = /* @__PURE__ */ new Set();
+function ut(e) {
+  const t = e.filter((a) => !Sn.has(a));
+  if (!t.length) return;
+  t.forEach((a) => Sn.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);
+  n.rel = "stylesheet", n.href = `https://fonts.googleapis.com/css2?${t.map((a) => `family=${a}`).join("&")}&display=swap`, n.dataset.twiddle = "fonts", document.head.appendChild(n);
 }
-const lo = {
+const vo = {
   id: "typography",
   title: "Typography",
   hint: "Font pairing · base size · scale",
-  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(gn).map((t) => `--twd-text-${t}`)],
-  tokens(t) {
-    const e = t.typography || {}, n = {}, a = Z.find((o) => o.value === e.font);
-    if (a && (lt(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), e.base || e.scale) {
-      const o = Number(e.base) || 16, r = be[e.scale] || be.balanced;
-      Object.entries(gn).forEach(([s, i]) => {
-        n[`--twd-text-${s}`] = `${+(o * r ** i / 16).toFixed(3)}rem`;
+  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(kn).map((e) => `--twd-text-${e}`)],
+  tokens(e) {
+    const t = e.typography || {}, n = {}, a = J.find((o) => o.value === t.font);
+    if (a && (ut(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), t.base || t.scale) {
+      const o = Number(t.base) || 16, s = we[t.scale] || we.balanced;
+      Object.entries(kn).forEach(([r, i]) => {
+        n[`--twd-text-${r}`] = `${+(o * s ** i / 16).toFixed(3)}rem`;
       });
     }
     return n;
   },
   parts: {
-    fonts(t, e, { label: n = "Fonts" } = {}) {
-      const a = B(n), o = io({
+    fonts(e, t, { label: n = "Fonts" } = {}) {
+      const a = U(n), o = yo({
         label: "Font pairing",
-        options: Z.map((s) => ({ value: s.value, name: s.name, fonts: s.fonts, preview: s.heading })),
+        options: J.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: () => lt([...new Set(Z.flatMap((s) => s.load))]),
-        onSelect: (s) => e.setSection("typography", { font: s })
+        onOpen: () => ut([...new Set(J.flatMap((r) => r.load))]),
+        onSelect: (r) => t.setSection("typography", { font: r })
       });
       a.append(o.el);
-      const r = () => o.setValue((e.getState().typography || {}).font || null);
-      r(), e.onChange(r), t.append(a.el);
+      const s = () => o.setValue((t.getState().typography || {}).font || null);
+      s(), t.onChange(s), e.append(a.el);
     },
-    base(t, e, { label: n = "Base size" } = {}) {
-      t.append(ke(e, {
+    base(e, t, { label: n = "Base size" } = {}) {
+      e.append($e(t, {
         section: "typography",
         key: "base",
         label: n,
@@ -2184,8 +2284,8 @@ const lo = {
     },
     // Tabbed layout: pairings as tiles, each "Aa" in its own heading font.
     // The fonts load (from Google Fonts) only once the tiles are on screen.
-    fontTiles(t, e, { label: n = "Fonts" } = {}) {
-      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, r = V(e, {
+    fontTiles(e, t, { label: n = "Fonts" } = {}) {
+      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, s = V(t, {
         section: "typography",
         key: "font",
         label: n,
@@ -2193,165 +2293,165 @@ const lo = {
         className: "tiles-fonts",
         options: [
           { value: "default", label: "Prototype fonts", sub: "Default", preview: o(I), wide: !0 },
-          ...Z.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
+          ...J.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
         ],
         current: (i) => (i.typography || {}).font || "default",
-        select: (i) => e.setSection("typography", { font: i === "default" ? null : i }),
-        valueText: (i) => i === "default" ? "Default" : Z.find((l) => l.value === i)?.name || ""
-      }), s = new IntersectionObserver((i) => {
-        i.some((l) => l.isIntersecting) && (lt([...new Set(Z.flatMap((l) => l.load))]), s.disconnect());
+        select: (i) => t.setSection("typography", { font: i === "default" ? null : i }),
+        valueText: (i) => i === "default" ? "Default" : J.find((l) => l.value === i)?.name || ""
+      }), r = new IntersectionObserver((i) => {
+        i.some((l) => l.isIntersecting) && (ut([...new Set(J.flatMap((l) => l.load))]), r.disconnect());
       });
-      s.observe(r), t.append(r);
+      r.observe(s), e.append(s);
     },
-    scaleTiles(t, e, { label: n = "Scale" } = {}) {
-      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((r) => `<b style="font-size:${Math.round(13 * o ** r)}px">A</b>`).join("")}</span>`;
-      t.append(V(e, {
+    scaleTiles(e, t, { label: n = "Scale" } = {}) {
+      const a = (o) => `<span class="ladder">${[-1, 0, 1, 2].map((s) => `<b style="font-size:${Math.round(13 * o ** s)}px">A</b>`).join("")}</span>`;
+      e.append(V(t, {
         section: "typography",
         key: "scale",
         label: n,
         fallback: "balanced",
-        options: Object.entries(be).map(([o, r]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(r) })),
-        valueText: (o) => String(be[o])
+        options: Object.entries(we).map(([o, s]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(s) })),
+        valueText: (o) => String(we[o])
       }));
     },
-    scale(t, e, { label: n = "Scale" } = {}) {
-      t.append(ke(e, {
+    scale(e, t, { label: n = "Scale" } = {}) {
+      e.append($e(t, {
         section: "typography",
         key: "scale",
         label: n,
         fallback: "balanced",
         options: [{ value: "compact", label: "Compact" }, { value: "balanced", label: "Balanced" }, { value: "expressive", label: "Expressive" }],
-        valueText: (a) => String(be[a])
+        valueText: (a) => String(we[a])
       }));
     }
   },
-  render(t, e) {
-    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(t, e));
+  render(e, t) {
+    Object.entries(this.parts).filter(([n]) => !n.endsWith("Tiles")).forEach(([, n]) => n(e, t));
   }
-}, [bn, Ne] = xt;
-function co(t) {
-  return t > 0.56 ? "Bold" : t < 0.44 ? "Subtle" : "Balanced";
+}, [$n, Ie] = kt;
+function ko(e) {
+  return e > 0.56 ? "Bold" : e < 0.44 ? "Subtle" : "Balanced";
 }
-function Bn(t) {
-  return t > 1.06 ? "Comfy" : t < 0.94 ? "Compact" : "Regular";
+function Gn(e) {
+  return e > 1.06 ? "Comfy" : e < 0.94 ? "Compact" : "Regular";
 }
-const je = (t) => t && t[0].toUpperCase() + t.slice(1), xn = [
-  ["colour", "Colour", (t) => {
-    const e = t.colour || {}, n = ze.find((o) => o.primary === e.primary && o.neutral === e.neutral);
-    return { text: `${e.brand ? e.brand.toUpperCase() : n && !e.shade ? n.label : e.primary ? `${je(e.primary)}${e.neutral ? ` · ${je(e.neutral)}` : ""}` : "Prototype colours"}${e.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
+const De = (e) => e && e[0].toUpperCase() + e.slice(1), En = [
+  ["colour", "Colour", (e) => {
+    const t = e.colour || {}, n = Be.find((o) => o.primary === t.primary && o.neutral === t.neutral);
+    return { text: `${t.brand ? t.brand.toUpperCase() : n && !t.shade ? n.label : t.primary ? `${De(t.primary)}${t.neutral ? ` · ${De(t.neutral)}` : ""}` : "Prototype colours"}${t.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
   }],
-  ["type", "Type", (t) => {
-    const e = t.typography || {};
-    return { text: `${Z.find((n) => n.value === e.font)?.name || "Prototype fonts"} · ${e.base || 16}px` };
+  ["type", "Type", (e) => {
+    const t = e.typography || {};
+    return { text: `${J.find((n) => n.value === t.font)?.name || "Prototype fonts"} · ${t.base || 16}px` };
   }],
-  ["spacing", "Spacing", (t) => ({ text: Bn(te(t.density)) })],
-  ["shape", "Shape", (t) => ({ text: `${je((t.buttons || {}).corners) || "Default"} corners` })],
-  ["shadows", "Shadows", (t) => ({ text: je((t.depth || {}).style) || ($t(t.character) !== null ? "From the pad" : "Default") })]
-], po = {
-  summary(t, e, { label: n = "Current look", goTab: a } = {}) {
-    const o = B(n), r = document.createElement("div");
-    r.className = "summary", xn.forEach(([i, l]) => {
-      const p = document.createElement("button");
-      p.type = "button", p.className = "summary-row", p.dataset.summary = i, p.innerHTML = `<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`, p.querySelector(".summary-name").textContent = l, p.addEventListener("click", () => a && a(i)), r.append(p);
-    }), o.append(r);
-    const s = () => {
-      const i = e.getState();
-      xn.forEach(([l, , p]) => {
-        const c = r.querySelector(`[data-summary="${l}"]`), h = p(i);
-        c.querySelector(".summary-value").textContent = h.text;
-        const y = c.querySelector(".summary-swatch");
-        y.hidden = !h.swatch, h.swatch && (y.style.background = h.swatch);
+  ["spacing", "Spacing", (e) => ({ text: Gn(se(e.density)) })],
+  ["shape", "Shape", (e) => ({ text: `${De((e.buttons || {}).corners) || "Default"} corners` })],
+  ["shadows", "Shadows", (e) => ({ text: De((e.depth || {}).style) || (Tt(e.character) !== null ? "From the pad" : "Default") })]
+], So = {
+  summary(e, t, { label: n = "Current look", goTab: a } = {}) {
+    const o = U(n), s = document.createElement("div");
+    s.className = "summary", En.forEach(([i, l]) => {
+      const d = document.createElement("button");
+      d.type = "button", d.className = "summary-row", d.dataset.summary = i, d.innerHTML = `<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`, d.querySelector(".summary-name").textContent = l, d.addEventListener("click", () => a && a(i)), s.append(d);
+    }), o.append(s);
+    const r = () => {
+      const i = t.getState();
+      En.forEach(([l, , d]) => {
+        const p = s.querySelector(`[data-summary="${l}"]`), u = d(i);
+        p.querySelector(".summary-value").textContent = u.text;
+        const v = p.querySelector(".summary-swatch");
+        v.hidden = !u.swatch, u.swatch && (v.style.background = u.swatch);
       });
     };
-    s(), e.onChange(s), t.append(o.el);
+    r(), t.onChange(r), e.append(o.el);
   },
-  character(t, e, { label: n = "Character" } = {}) {
-    const a = B(n), o = ja({
+  character(e, t, { label: n = "Character" } = {}) {
+    const a = U(n), o = Wa({
       label: n,
       ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
-      onInput: (s, i) => {
-        const l = +(Ne - i * (Ne - bn)).toFixed(3), p = +s.toFixed(3);
-        e.setSections({
+      onInput: (r, i) => {
+        const l = +(Ie - i * (Ie - $n)).toFixed(3), d = +r.toFixed(3);
+        t.setSections({
           density: { factor: l === 1 ? null : l, spacing: null },
-          character: { bold: p === 0.5 ? null : p }
+          character: { bold: d === 0.5 ? null : d }
         }, "character");
       }
     });
     a.append(o.el);
-    const r = () => {
-      const s = e.getState(), i = te(s.density), l = $t(s.character), p = l === null ? 0.5 : l, c = `${Bn(i)} · ${co(p)}`;
-      o.setValue(p, (Ne - i) / (Ne - bn), c), a.setValue(c);
+    const s = () => {
+      const r = t.getState(), i = se(r.density), l = Tt(r.character), d = l === null ? 0.5 : l, p = `${Gn(i)} · ${ko(d)}`;
+      o.setValue(d, (Ie - i) / (Ie - $n), p), a.setValue(p);
     };
-    r(), e.onChange(r), t.append(a.el);
+    s(), t.onChange(s), e.append(a.el);
   }
-}, dt = [
+}, ht = [
   { key: "page-pad", label: "Page padding", step: 5 },
   { key: "section-gap", label: "Section gap", step: 6 },
   { key: "card-pad", label: "Card padding", step: 5 },
   { key: "card-gap", label: "Card gap", step: 2 },
   { key: "control-gap", label: "Control gap", step: 3 },
   { key: "control-pad-x", label: "Control padding", step: null }
-], uo = [1, 2, 3, 4, 5, 6, 7, 8], ho = /^var\(\s*--twd-space-(\d)\s*\)$/, ct = (t) => {
-  const e = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
-  return e ? +(parseFloat(e[1]) * (e[2] === "rem" ? 16 : 1)).toFixed(1) : null;
+], $o = [1, 2, 3, 4, 5, 6, 7, 8], Eo = /^var\(\s*--twd-space-(\d)\s*\)$/, ft = (e) => {
+  const t = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(e).trim());
+  return t ? +(parseFloat(t[1]) * (t[2] === "rem" ? 16 : 1)).toFixed(1) : null;
 };
-function fo(t, e, n) {
-  const a = `--twd-${e.key}`, o = document.createElement("div");
+function Co(e, t, n) {
+  const a = `--twd-${t.key}`, o = document.createElement("div");
   o.className = "role-row", n || o.classList.add("unused"), o.innerHTML = `
-    <span class="role-label" title="${a}${n ? "" : " (not used on this page)"}">${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="role-label" title="${a}${n ? "" : " (not used on this page)"}">${t.label}</span>
+    <label class="token-value role-fixed" hidden><input type="text" inputmode="decimal" spellcheck="false" aria-label="${t.label}, fixed value"><span class="token-unit">px</span></label>
     <span class="step-select">
-      <select aria-label="${e.label}"></select>
+      <select aria-label="${t.label}"></select>
       <span class="step-chevron" aria-hidden="true">${A.down}</span>
     </span>
-    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${e.label}" hidden>${A.reset}</button>
+    <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${t.label}" hidden>${A.reset}</button>
   `;
-  const r = o.querySelector("select"), s = o.querySelector(".role-fixed"), i = s.querySelector("input"), l = o.querySelector(".token-reset"), p = () => (t.getState().custom || {})[e.key], c = () => {
-    const x = p();
-    if (x == null) return e.step ? { step: e.step } : { fixed: F(a) };
-    const b = ho.exec(x);
+  const s = o.querySelector("select"), r = o.querySelector(".role-fixed"), i = r.querySelector("input"), l = o.querySelector(".token-reset"), d = () => (e.getState().custom || {})[t.key], p = () => {
+    const x = d();
+    if (x == null) return t.step ? { step: t.step } : { fixed: F(a) };
+    const b = Eo.exec(x);
     return b ? { step: +b[1] } : { fixed: x };
-  }, h = (x) => t.setSection("custom", { [e.key]: x }), y = (x) => e.step ? x === `var(--twd-space-${e.step})` : !1;
-  r.addEventListener("change", () => {
-    if (r.value === "fixed") {
-      const b = ct(F(a));
-      h(b != null ? `${b}px` : F(a)), i.focus(), i.select();
+  }, u = (x) => e.setSection("custom", { [t.key]: x }), v = (x) => t.step ? x === `var(--twd-space-${t.step})` : !1;
+  s.addEventListener("change", () => {
+    if (s.value === "fixed") {
+      const b = ft(F(a));
+      u(b != null ? `${b}px` : F(a)), i.focus(), i.select();
       return;
     }
-    const x = `var(--twd-space-${r.value})`;
-    h(y(x) ? null : x);
+    const x = `var(--twd-space-${s.value})`;
+    u(v(x) ? null : x);
   });
   const f = () => {
     const x = i.value.trim();
-    if (!x) return h(null);
-    h(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
+    if (!x) return u(null);
+    u(/^-?\d*\.?\d+$/.test(x) ? `${x}px` : x);
   };
   i.addEventListener("change", f), i.addEventListener("blur", () => m()), i.addEventListener("keydown", (x) => {
     x.key === "Enter" && (x.preventDefault(), i.blur()), x.key === "Escape" && (x.stopPropagation(), m(), i.blur());
-  }), l.addEventListener("click", () => h(null));
+  }), l.addEventListener("click", () => u(null));
   function m() {
-    const x = c();
-    if (r.innerHTML = uo.map((u) => `<option value="${u}">space-${u} · ${ct(F(`--twd-space-${u}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', r.value = x.step ? String(x.step) : "fixed", s.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
-      const u = ct(x.fixed);
-      i.value = u != null ? String(u) : x.fixed;
+    const x = p();
+    if (s.innerHTML = $o.map((h) => `<option value="${h}">space-${h} · ${ft(F(`--twd-space-${h}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', s.value = x.step ? String(x.step) : "fixed", r.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
+      const h = ft(x.fixed);
+      i.value = h != null ? String(h) : x.fixed;
     }
-    const b = p() != null;
+    const b = d() != null;
     o.classList.toggle("edited", b), l.hidden = !b;
   }
-  return m(), t.onChange(m), o;
+  return m(), e.onChange(m), o;
 }
-const go = {
-  spacing(t, e, { label: n = "Roles" } = {}) {
-    const a = Fa(), o = B(n);
+const Mo = {
+  spacing(e, t, { label: n = "Roles" } = {}) {
+    const a = _a(), o = U(n);
     o.el.classList.add("token-field");
-    const r = dt.filter((l) => !a.has(`--twd-${l.key}`));
-    o.setValue(r.length === dt.length ? "not used on this page" : "");
-    const s = document.createElement("div");
-    s.className = "token-rows", dt.forEach((l) => s.append(fo(e, l, a.has(`--twd-${l.key}`)))), o.append(s), t.append(o.el);
+    const s = ht.filter((l) => !a.has(`--twd-${l.key}`));
+    o.setValue(s.length === ht.length ? "not used on this page" : "");
+    const r = document.createElement("div");
+    r.className = "token-rows", ht.forEach((l) => r.append(Co(t, l, a.has(`--twd-${l.key}`)))), o.append(r), e.append(o.el);
     const i = document.createElement("p");
-    i.className = "role-note", i.textContent = r.length ? `Only elements styled with these tokens change. Not used on this page: ${r.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", t.append(i);
+    i.className = "role-note", i.textContent = s.length ? `Only elements styled with these tokens change. Not used on this page: ${s.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", e.append(i);
   }
-}, xe = [
+}, ye = [
   { id: "overview", title: "Overview", icon: "tabOverview", parts: [["simple", "character"], ["simple", "summary"]] },
   { id: "colour", title: "Colour", icon: "tabColour", parts: [
     ["colour", "themeTiles"],
@@ -2391,18 +2491,18 @@ const go = {
     ["depth", "intensity"],
     { more: "Shadow tokens", parts: [["custom", "shadows"]] }
   ] }
-], O = (t) => String(t).replace(/[&<>"]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[e]);
-function mo({ sections: t, store: e, view: n }) {
+], O = (e) => String(e).replace(/[&<>"]/g, (t) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[t]);
+function To({ sections: e, store: t, view: n }) {
   const a = document.createElement("div");
   a.id = "twiddle-root", document.body.appendChild(a);
-  const o = a.attachShadow({ mode: "open" }), r = (d) => d.map((g) => `
+  const o = a.attachShadow({ mode: "open" }), s = (c) => c.map((g) => `
     <details data-section="${g.id}">
       <summary>${g.title}<span class="chev">${A.chevron}</span></summary>
       <div class="section-body"><div class="placeholder">${g.hint}</div></div>
     </details>
   `).join("");
   o.innerHTML = `
-    <style>${ua}</style>
+    <style>${va}</style>
     <div class="pick-box" hidden><span class="pick-tag"></span></div>
     <div class="wrap">
       <div class="toast" role="status"></div>
@@ -2413,6 +2513,7 @@ function mo({ sections: t, store: e, view: n }) {
           <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="actions">
@@ -2431,15 +2532,15 @@ function mo({ sections: t, store: e, view: n }) {
         </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("")}
+          ${ye.map((c) => `<div class="page page-fields" data-page="${c.id}" hidden></div>`).join("")}
         </div>
         <div class="body" data-view="local" hidden></div>
         <div class="body" data-view="changes" hidden></div>
         <nav class="tabbar" aria-label="Areas">
-          ${xe.map((d) => `<button class="tab" data-tab="${d.id}" aria-pressed="false">${A[d.icon]}<span>${d.title}</span></button>`).join("")}
+          ${ye.map((c) => `<button class="tab" data-tab="${c.id}" aria-pressed="false">${A[c.icon]}<span>${c.title}</span></button>`).join("")}
         </nav>
       </div>
-      <button class="launcher" aria-label="Open Panel" aria-expanded="false">${A.panelMark}</button>
+      <button class="launcher" aria-label="Open Panel" aria-expanded="false" title="Panel · drag to move, double-click to reset">${A.panelMark}</button>
     </div>
     <div class="dialog-backdrop" hidden>
       <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="twd-dialog-title">
@@ -2455,160 +2556,168 @@ function mo({ sections: t, store: e, view: n }) {
       </div>
     </div>
   `;
-  const s = (d) => o.querySelector(d), i = s(".panel"), l = s(".launcher"), p = s(".toast"), c = { global: s('[data-view="global"]'), local: s('[data-view="local"]'), changes: s('[data-view="changes"]') }, h = s(".pick-box"), y = s(".pick-tag"), f = { getState: e.getState, setSection: e.setSection, setSections: e.setSections, onChange: e.onChange };
-  function m(d, g, w) {
+  const r = (c) => o.querySelector(c), i = r(".panel"), l = r(".launcher"), d = r(".toast"), p = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, u = r(".pick-box"), v = r(".pick-tag"), f = { getState: t.getState, setSection: t.setSection, setSections: t.setSections, onChange: t.onChange };
+  function m(c, g, w) {
     g.forEach((k) => {
       if (typeof k.render != "function") return;
-      const C = d.querySelector(`[data-section="${k.id}"] .section-body`);
+      const C = c.querySelector(`[data-section="${k.id}"] .section-body`);
       C.innerHTML = "", k.render(C, w);
     });
-    const $ = [...d.querySelectorAll("details")];
+    const $ = [...c.querySelectorAll("details")];
     return $.forEach((k) => k.addEventListener("toggle", () => {
       k.open && $.forEach((C) => {
         C !== k && (C.open = !1);
       });
     })), $;
   }
-  const x = Object.fromEntries(t.map((d) => [d.id, d]));
-  function b(d, g) {
+  const x = Object.fromEntries(e.map((c) => [c.id, c]));
+  function b(c, g) {
     g.forEach((w) => {
       if (w === "warnings") {
         const S = document.createElement("div");
-        S.className = "warnings page-warnings", d.append(S);
+        S.className = "warnings page-warnings", c.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);
+        S.className = "page-heading", S.innerHTML = `<span></span>${w.note ? '<span class="muted"></span>' : ""}`, S.firstChild.textContent = w.heading, w.note && (S.lastChild.textContent = w.note), c.append(S);
         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);
+        S.className = "more", S.innerHTML = `<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`, S.querySelector("summary span:last-child").textContent = w.more, b(S.querySelector(".more-body"), w.parts), c.append(S);
         return;
       }
       if (w.tabs) {
         const S = w.tabs.map((j) => {
           const z = document.createElement("div");
           return z.className = "tab-pane", b(z, j.parts), z;
-        }), he = re({
+        }), be = ce({
           label: "View",
           options: w.tabs.map((j, z) => ({ value: String(z), label: j.label })),
           onSelect: (j) => {
-            he.setValue(j), S.forEach((z, Zn) => {
-              z.hidden = String(Zn) !== j;
+            be.setValue(j), S.forEach((z, ra) => {
+              z.hidden = String(ra) !== j;
             });
           }
         });
-        he.setValue("0"), S.forEach((j, z) => {
+        be.setValue("0"), S.forEach((j, z) => {
           j.hidden = z !== 0;
-        }), d.append(he.el, ...S);
+        }), c.append(be.el, ...S);
         return;
       }
-      const [$, k, C = {}] = w, q = $ === "simple" ? po[k] : $ === "roles" ? go[k] : x[$]?.parts?.[k];
-      q && q(d, f, { ...C, buttons: x.buttons, cards: x.cards, goTab: (S) => {
-        G("global"), E(S);
+      const [$, k, C = {}] = w, q = $ === "simple" ? So[k] : $ === "roles" ? Mo[k] : x[$]?.parts?.[k];
+      q && q(c, f, { ...C, buttons: x.buttons, cards: x.cards, goTab: (S) => {
+        W("global"), E(S);
       } });
     });
   }
-  xe.forEach((d) => b(c.global.querySelector(`[data-page="${d.id}"]`), d.parts));
-  const u = [...o.querySelectorAll(".tab")];
-  let v = xe.some((d) => d.id === fe("tab")) ? fe("tab") : xe[0].id;
+  ye.forEach((c) => b(p.global.querySelector(`[data-page="${c.id}"]`), c.parts));
+  const h = [...o.querySelectorAll(".tab")];
+  let y = ye.some((c) => c.id === Z("tab")) ? Z("tab") : ye[0].id;
   function L() {
-    u.forEach((d) => d.setAttribute("aria-pressed", String(K === "global" && d.dataset.tab === v)));
+    h.forEach((c) => c.setAttribute("aria-pressed", String(K === "global" && c.dataset.tab === y)));
   }
-  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();
+  function E(c) {
+    y = c, oe("tab", c), p.global.querySelectorAll(".page").forEach((g) => {
+      g.hidden = g.dataset.page !== c;
+    }), p.global.scrollTop = 0, L();
   }
-  const J = (d) => d.map((g) => `<div class="warning">${A.warn}<span>${O(g.text)}</span></div>`).join("");
+  const ee = (c) => c.map((g) => `<div class="warning">${A.warn}<span>${O(g.text)}</span></div>`).join("");
   let K = "global";
-  function G(d) {
-    K = d, Object.entries(c).forEach(([g, w]) => {
-      w.hidden = g !== d;
-    }), s('[data-action="changes"]').setAttribute("aria-pressed", String(d === "changes")), d !== "local" && Hn(), d === "changes" && Ut(), L();
-  }
-  E(v);
-  const qe = "cubic-bezier(0.3, 0.7, 0.2, 1)", Ve = "cubic-bezier(0.2, 0.8, 0.2, 1)", Se = 640, ie = 100, He = 50, Un = () => l.querySelector(".mark-knob"), qn = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
-  function Et(d) {
+  function W(c) {
+    K = c, Object.entries(p).forEach(([g, w]) => {
+      w.hidden = g !== c;
+    }), r('[data-action="changes"]').setAttribute("aria-pressed", String(c === "changes")), c !== "local" && Qn(), c === "changes" && Wt(), L();
+  }
+  E(y);
+  const Ke = "cubic-bezier(0.3, 0.7, 0.2, 1)", We = "cubic-bezier(0.2, 0.8, 0.2, 1)", Ee = 640, ue = 100, Ge = 50, Yn = () => l.querySelector(".mark-knob"), Xn = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
+  function At(c) {
     if (matchMedia("(prefers-reduced-motion: reduce)").matches || !l.animate) return;
-    const g = Un(), [w, $] = qn(), k = (C) => `translateY(${C}px)`;
-    if (d) {
-      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Se, easing: qe });
+    const g = Yn(), [w, $] = Xn(), k = (C) => `translateY(${C}px)`;
+    if (c) {
+      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Ee, easing: Ke });
       const C = [{ transform: "scale(0.4)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }];
-      $.animate(C, { duration: ie * 2, delay: Se * 0.12, easing: qe, fill: "backwards" }), w.animate(C, { duration: ie * 2, delay: Se * 0.32 + He, easing: qe, fill: "backwards" });
+      $.animate(C, { duration: ue * 2, delay: Ee * 0.12, easing: Ke, fill: "backwards" }), w.animate(C, { duration: ue * 2, delay: Ee * 0.32 + Ge, easing: Ke, fill: "backwards" });
     } else {
       const C = [{ opacity: 1 }, { opacity: 0 }];
-      w.animate(C, { duration: ie, easing: Ve }), $.animate(C, { duration: ie, delay: He / 2, easing: Ve, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Se * 0.7, delay: ie + He / 2, easing: Ve, fill: "backwards" });
+      w.animate(C, { duration: ue, easing: We }), $.animate(C, { duration: ue, delay: Ge / 2, easing: We, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Ee * 0.7, delay: ue + Ge / 2, easing: We, fill: "backwards" });
     }
   }
-  function le({ animate: d = !0 } = {}) {
-    i.hidden && d && Et(!0), i.hidden = !1, l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), ge("panel", "open");
+  const Ye = r(".wrap"), Lt = $a({ wrapEl: Ye, launcherEl: l });
+  let Pt = !1;
+  function Ce(c) {
+    Pt = c, i.classList.toggle("minimised", c), i.hidden || oe("panel", c ? "tabs" : "open");
+  }
+  function G({ animate: c = !0 } = {}) {
+    i.hidden && c && At(!0), i.hidden = !1, Ye.classList.add("is-open"), l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), Ce(!1);
   }
-  function _e() {
-    i.hidden || Et(!1), i.hidden = !0, l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), ge("panel", "closed"), $e();
+  function Zn() {
+    i.hidden && G(), Ce(!0);
   }
-  function Ke() {
-    i.hidden ? le() : _e();
+  function Xe() {
+    i.hidden || At(!1), i.hidden = !0, Ye.classList.remove("is-open"), l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), oe("panel", "closed"), Te();
   }
-  let Ct;
-  function H(d) {
-    p.textContent = d, p.classList.add("show"), clearTimeout(Ct), Ct = setTimeout(() => p.classList.remove("show"), 1600);
+  function Me() {
+    i.hidden ? G() : Xe();
   }
-  function de(d, g) {
-    navigator.clipboard.writeText(d).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
+  let Ot;
+  function H(c) {
+    d.textContent = c, d.classList.add("show"), clearTimeout(Ot), Ot = setTimeout(() => d.classList.remove("show"), 1600);
   }
-  let Ge = null;
-  function Q(d, g) {
-    if (Ge = d, !d) {
-      h.hidden = !0;
+  function he(c, g) {
+    navigator.clipboard.writeText(c).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
+  }
+  let Ze = null;
+  function te(c, g) {
+    if (Ze = c, !c) {
+      u.hidden = !0;
       return;
     }
-    const w = d.getBoundingClientRect();
-    Object.assign(h.style, { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px`, height: `${w.height}px` }), y.textContent = g || bt(d), h.hidden = !1;
+    const w = c.getBoundingClientRect();
+    Object.assign(u.style, { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px`, height: `${w.height}px` }), v.textContent = g || vt(c), u.hidden = !1;
   }
-  const Tt = () => {
-    Ge && !h.hidden && Q(Ge, y.textContent);
+  const Ft = () => {
+    Ze && !u.hidden && te(Ze, v.textContent);
   };
-  window.addEventListener("scroll", Tt, !0), window.addEventListener("resize", Tt);
-  let ce = !1;
-  const Mt = s('[data-action="pick"]'), At = (d) => d.composedPath().includes(a);
-  function Lt(d) {
-    if (At(d)) return;
-    const g = d.target;
-    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && Q(g);
-  }
-  function Pt(d) {
-    if (At(d) || (d.preventDefault(), d.stopPropagation(), d.type !== "click")) return;
-    const g = d.target;
-    !g || g === document.documentElement || g === document.body || ($e(), jt(g));
-  }
-  function Ot(d) {
-    d.key === "Escape" && (d.preventDefault(), $e(), M && Q(M.el));
-  }
-  const Ft = ["pointerdown", "mousedown", "mouseup", "click"];
-  function Nt() {
-    if (!ce) {
-      if (ce = !0, !document.getElementById("twiddle-picking")) {
-        const d = document.createElement("style");
-        d.id = "twiddle-picking", d.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(d);
+  window.addEventListener("scroll", Ft, !0), window.addEventListener("resize", Ft);
+  let fe = !1;
+  const Nt = r('[data-action="pick"]'), jt = (c) => c.composedPath().includes(a);
+  function Rt(c) {
+    if (jt(c)) return;
+    const g = c.target;
+    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && te(g);
+  }
+  function zt(c) {
+    if (jt(c) || (c.preventDefault(), c.stopPropagation(), c.type !== "click")) return;
+    const g = c.target;
+    !g || g === document.documentElement || g === document.body || (Te(), Bt(g));
+  }
+  function It(c) {
+    c.key === "Escape" && (c.preventDefault(), Te(), T && te(T.el));
+  }
+  const Dt = ["pointerdown", "mousedown", "mouseup", "click"];
+  function Ut() {
+    if (!fe) {
+      if (fe = !0, !document.getElementById("twiddle-picking")) {
+        const c = document.createElement("style");
+        c.id = "twiddle-picking", c.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(c);
       }
-      le(), Mt.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Lt, !0), Ft.forEach((d) => document.addEventListener(d, Pt, !0)), document.addEventListener("keydown", Ot, !0), H("Click an element · Esc to cancel");
+      G(), Nt.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Rt, !0), Dt.forEach((c) => document.addEventListener(c, zt, !0)), document.addEventListener("keydown", It, !0), H("Click an element · Esc to cancel");
     }
   }
-  function $e() {
-    ce && (ce = !1, Mt.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Lt, !0), Ft.forEach((d) => document.removeEventListener(d, Pt, !0)), document.removeEventListener("keydown", Ot, !0), Q(M ? M.el : null));
+  function Te() {
+    fe && (fe = !1, Nt.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Rt, !0), Dt.forEach((c) => document.removeEventListener(c, zt, !0)), document.removeEventListener("keydown", It, !0), te(T ? T.el : null));
   }
-  let M = null;
-  function Vn(d, g) {
+  let T = null;
+  function Jn(c, g) {
     const w = [];
     return {
       ctx: {
-        getState: () => (e.getState().scopes || {})[d] || {},
-        setSection: ($, k) => e.setScope(d, $, k),
+        getState: () => (t.getState().scopes || {})[c] || {},
+        setSection: ($, k) => t.setScope(c, $, k),
         onChange: ($) => {
-          const k = e.onChange($);
+          const k = t.onChange($);
           return w.push(k), k;
         },
         readToken: ($) => getComputedStyle(g).getPropertyValue($).trim()
@@ -2616,81 +2725,81 @@ function mo({ sections: t, store: e, view: n }) {
       dispose: () => w.forEach(($) => $())
     };
   }
-  function jt(d, g) {
-    const w = xa(d), $ = e.getState().scopes || {};
-    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), M && M.dispose(), M = { el: d, info: w, target: g, dispose: () => {
-    } }, We(), G("local"), le(), Q(d);
+  function Bt(c, g) {
+    const w = La(c), $ = t.getState().scopes || {};
+    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), T && T.dispose(), T = { el: c, info: w, target: g, dispose: () => {
+    } }, Je(), W("local"), G(), te(c);
   }
-  const Rt = () => M.target === "class" ? M.info.classSelector : M.info.elementSelector;
-  function We() {
-    M.dispose();
-    const { info: d } = M, g = t.filter((j) => (j.uses || []).some((z) => d.tokens.has(z))), w = c.local;
+  const qt = () => T.target === "class" ? T.info.classSelector : T.info.elementSelector;
+  function Je() {
+    T.dispose();
+    const { info: c } = T, g = e.filter((j) => (j.uses || []).some((z) => c.tokens.has(z))), w = p.local;
     if (w.innerHTML = `
       <div class="scope-bar">
         <div class="scope-head">
           <button class="icon-btn" data-action="back" title="Back to the whole page" aria-label="Back to the whole page">${A.back}</button>
           <div class="scope-name">
-            <code>${O(bt(d.el))}</code>
-            ${d.text ? `<span class="muted">“${O(d.text)}”</span>` : ""}
+            <code>${O(vt(c.el))}</code>
+            ${c.text ? `<span class="muted">“${O(c.text)}”</span>` : ""}
           </div>
         </div>
         <div class="scope-target"></div>
         <div class="warnings"></div>
       </div>
-      ${g.length ? r(g) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
-    `, d.classSelector) {
-      const j = re({
+      ${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>'}
+    `, c.classSelector) {
+      const j = ce({
         label: "Apply to",
         options: [
           { value: "element", label: "This element" },
-          { value: "class", label: `All ${d.classSelector} (${d.classCount})`, title: `Every element matching ${d.classSelector}` }
+          { value: "class", label: `All ${c.classSelector} (${c.classCount})`, title: `Every element matching ${c.classSelector}` }
         ],
         onSelect: (z) => {
-          z === "class" && e.moveScope(d.elementSelector, d.classSelector), M.target = z, We();
+          z === "class" && t.moveScope(c.elementSelector, c.classSelector), T.target = z, Je();
         }
       });
-      j.setValue(M.target), w.querySelector(".scope-target").append(j.el);
+      j.setValue(T.target), w.querySelector(".scope-target").append(j.el);
     }
-    const { ctx: $, dispose: k } = Vn(Rt(), d.el), C = m(w, g, $);
+    const { ctx: $, dispose: k } = Jn(qt(), c.el), C = m(w, g, $);
     C[0] && (C[0].open = !0);
     const q = w.querySelector(".warnings"), S = () => {
-      const j = d.tokens.size ? Ta(d.el) : null;
-      q.innerHTML = j ? J([j]) : "";
+      const j = c.tokens.size ? Da(c.el) : null;
+      q.innerHTML = j ? ee([j]) : "";
     };
     S();
-    const he = e.onChange(S);
-    M.dispose = () => {
-      k(), he();
+    const be = t.onChange(S);
+    T.dispose = () => {
+      k(), be();
     };
   }
-  function zt() {
-    if (!M || !M.info.classSelector) return;
-    const d = e.getState().scopes || {}, g = M.target === "class" ? "element" : "class", w = g === "class" ? M.info.classSelector : M.info.elementSelector;
-    !d[Rt()] && d[w] && (M.target = g, We());
-  }
-  const It = () => {
-    e.undo(), zt();
-  }, Dt = () => {
-    e.redo(), zt();
+  function Ht() {
+    if (!T || !T.info.classSelector) return;
+    const c = t.getState().scopes || {}, g = T.target === "class" ? "element" : "class", w = g === "class" ? T.info.classSelector : T.info.elementSelector;
+    !c[qt()] && c[w] && (T.target = g, Je());
+  }
+  const Vt = () => {
+    t.undo(), Ht();
+  }, _t = () => {
+    t.redo(), Ht();
   };
-  function Hn() {
-    M && (M.dispose(), M = null, c.local.innerHTML = "", Q(null));
-  }
-  const Bt = (d) => d.kind === "global" ? "Whole page" : d.kind === "class" ? `All ${d.selector}` : "One element";
-  function Ut() {
-    const d = en(e.getState(), t), g = Je(), w = c.changes;
-    if (!d.length) {
-      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${J(g)}`;
+  function Qn() {
+    T && (T.dispose(), T = null, p.local.innerHTML = "", te(null));
+  }
+  const Kt = (c) => c.kind === "global" ? "Whole page" : c.kind === "class" ? `All ${c.selector}` : "One element";
+  function Wt() {
+    const c = ln(t.getState(), e), g = nt(), w = p.changes;
+    if (!c.length) {
+      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${ee(g)}`;
       return;
     }
     const $ = /* @__PURE__ */ new Map();
-    d.forEach((k) => {
+    c.forEach((k) => {
       const C = k.selector || "";
       $.has(C) || $.set(C, []), $.get(C).push(k);
-    }), w.innerHTML = (g.length ? `<div class="warnings">${J(g)}</div>` : "") + [...$].map(([k, C]) => `
+    }), w.innerHTML = (g.length ? `<div class="warnings">${ee(g)}</div>` : "") + [...$].map(([k, C]) => `
       <div class="change-group">
         <div class="change-scope">
-          ${k ? `<button class="link-btn" data-select="${O(k)}" title="Select it on the page">${O(Bt(C[0]))}</button><code>${O(k)}</code>` : `<span>${Bt(C[0])}</span>`}
+          ${k ? `<button class="link-btn" data-select="${O(k)}" title="Select it on the page">${O(Kt(C[0]))}</button><code>${O(k)}</code>` : `<span>${Kt(C[0])}</span>`}
         </div>
         ${C.map((q) => `
           <div class="change-row">
@@ -2702,65 +2811,65 @@ function mo({ sections: t, store: e, view: n }) {
           </div>`).join("")}
       </div>`).join("");
   }
-  function _n(d, g) {
-    if (g) return e.removeScope(g, d);
-    const w = e.getState()[d] || {};
-    e.setSection(d, Object.fromEntries(Object.keys(w).map(($) => [$, null])));
+  function ea(c, g) {
+    if (g) return t.removeScope(g, c);
+    const w = t.getState()[c] || {};
+    t.setSection(c, Object.fromEntries(Object.keys(w).map(($) => [$, null])));
   }
-  const pe = s(".apply-menu"), qt = s('[data-action="apply-menu"]'), Vt = () => fe("apply-mode") === "copy" ? "copy" : "preview";
-  function Kn() {
-    pe.querySelectorAll("[data-apply-mode]").forEach((d) => d.setAttribute("aria-checked", String(d.dataset.applyMode === Vt())));
+  const ge = r(".apply-menu"), Gt = r('[data-action="apply-menu"]'), Yt = () => Z("apply-mode") === "copy" ? "copy" : "preview";
+  function ta() {
+    ge.querySelectorAll("[data-apply-mode]").forEach((c) => c.setAttribute("aria-checked", String(c.dataset.applyMode === Yt())));
   }
-  function Ee(d) {
-    pe.hidden = !d, qt.setAttribute("aria-expanded", String(d)), d && Kn();
+  function Ae(c) {
+    ge.hidden = !c, Gt.setAttribute("aria-expanded", String(c)), c && ta();
   }
-  function Ht() {
-    return Sa(en(e.getState(), t), { warnings: Je() });
-  }
-  const Ce = s(".dialog-backdrop"), _t = s(".prompt-text");
-  function Gn() {
-    const d = Ht();
-    if (!d) return H("No changes to copy yet");
-    if (Vt() === "copy") return de(d, "Prompt copied · paste it into your agent");
-    _t.value = d, Ce.hidden = !1, s('[data-action="dialog-copy"]').focus();
-  }
-  function Ye() {
-    Ce.hidden = !0, s('[data-action="apply"]').focus();
-  }
-  const ee = s('[data-action="compare"]'), Wn = s(".original-pill");
-  function Te(d) {
-    d ? n.suspend() : n.resume(), ee.setAttribute("aria-pressed", String(d)), Wn.hidden = !d;
-  }
-  let Kt = null, ue = !1;
-  ee.addEventListener("pointerdown", () => {
-    ue = !1, Kt = setTimeout(() => {
-      ue = !0, Te(!0);
+  function Xt() {
+    return ja(ln(t.getState(), e), { warnings: nt() });
+  }
+  const Le = r(".dialog-backdrop"), Zt = r(".prompt-text");
+  function na() {
+    const c = Xt();
+    if (!c) return H("No changes to copy yet");
+    if (Yt() === "copy") return he(c, "Prompt copied · paste it into your agent");
+    Zt.value = c, Le.hidden = !1, r('[data-action="dialog-copy"]').focus();
+  }
+  function Qe() {
+    Le.hidden = !0, r('[data-action="apply"]').focus();
+  }
+  const ne = r('[data-action="compare"]'), aa = r(".original-pill");
+  function Pe(c) {
+    c ? n.suspend() : n.resume(), ne.setAttribute("aria-pressed", String(c)), aa.hidden = !c;
+  }
+  let Jt = null, me = !1;
+  ne.addEventListener("pointerdown", () => {
+    me = !1, Jt = setTimeout(() => {
+      me = !0, Pe(!0);
     }, 180);
   });
-  const Gt = () => {
-    clearTimeout(Kt), ue && (Te(!1), ue = !1);
+  const Qt = () => {
+    clearTimeout(Jt), me && (Pe(!1), me = !1);
   };
-  ee.addEventListener("pointerup", Gt), ee.addEventListener("pointerleave", Gt);
-  const Me = s(".setup-hint"), Wt = `setup-hint-dismissed:${location.pathname}`, Yn = {
+  ne.addEventListener("pointerup", Qt), ne.addEventListener("pointerleave", Qt);
+  const Oe = r(".setup-hint"), en = `setup-hint-dismissed:${location.pathname}`, oa = {
     "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: sn,
-      link: `${rn}/#install`
+      snippets: fn,
+      link: `${hn}/#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: Na,
-      link: `${rn}/#tokens`
+      text2copy: Ka,
+      link: `${hn}/#tokens`
     }
   };
   let D = null;
-  function Ae() {
-    const d = Oa();
-    D = fe(Wt) === d ? null : Yn[d] || null, l.toggleAttribute("data-hint", !!D), Me.hidden = !D, D && (Me.innerHTML = `
+  function Fe() {
+    const c = Va();
+    D = Z(en) === c ? null : oa[c] || null, l.toggleAttribute("data-hint", !!D), Oe.hidden = !D, D && (Oe.innerHTML = `
       <div class="setup-head">${A.warn}<b>${O(D.title)}</b>
         <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${A.close}</button>
       </div>
@@ -2773,103 +2882,106 @@ function mo({ sections: t, store: e, view: n }) {
       <div class="setup-actions">
         ${D.copy ? `<button class="apply-btn" data-action="setup-copy">${O(D.copy)}</button>` : ""}
         <a href="${D.link}" target="_blank" rel="noopener">Setup guide</a>
-      </div>`, Me.dataset.status = d);
-  }
-  Ae(), document.readyState !== "complete" && window.addEventListener("load", Ae, { once: !0 }), setTimeout(Ae, 1500);
-  const Yt = s(".badge");
-  function Zt() {
-    s('[data-action="undo"]').disabled = !e.canUndo(), s('[data-action="redo"]').disabled = !e.canRedo();
-    const d = ya(e.getState());
-    Yt.textContent = d, Yt.hidden = !d;
-    const g = J(Je());
-    c.global.querySelectorAll(".page-warnings").forEach((w) => {
+      </div>`, Oe.dataset.status = c);
+  }
+  Fe(), document.readyState !== "complete" && window.addEventListener("load", Fe, { once: !0 }), setTimeout(Fe, 1500);
+  const tn = r(".badge");
+  function nn() {
+    r('[data-action="undo"]').disabled = !t.canUndo(), r('[data-action="redo"]').disabled = !t.canRedo();
+    const c = Fa(t.getState());
+    tn.textContent = c, tn.hidden = !c;
+    const g = ee(nt());
+    p.global.querySelectorAll(".page-warnings").forEach((w) => {
       w.innerHTML = g;
-    }), K === "changes" && Ut();
+    }), K === "changes" && Wt();
   }
-  return e.onChange(Zt), Zt(), o.addEventListener("click", (d) => {
-    if (d.target === Ce) return Ye();
-    const g = d.target.closest("button");
+  return t.onChange(nn), nn(), o.addEventListener("click", (c) => {
+    if (c.target === Le) return Qe();
+    const g = c.target.closest("button");
     if (g) {
-      if (g !== qt && !pe.contains(g) && Ee(!1), g === l) return Ke();
+      if (g !== Gt && !ge.contains(g) && Ae(!1), g === l)
+        return Lt.consumeClick() ? void 0 : c.detail === 2 ? (Me(), Lt.reset(), H("Panel moved back to the corner")) : Me();
       if (g.dataset.select) {
         const w = document.querySelector(g.dataset.select);
-        return w ? jt(w) : H("That element isn’t on this page");
+        return w ? Bt(w) : H("That element isn’t on this page");
       }
-      if (g.dataset.setupSnippet) return de(sn[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.setupSnippet) return he(fn[g.dataset.setupSnippet].code, "Copied");
       if (g.dataset.tab)
-        return G("global"), E(g.dataset.tab);
-      if (g.dataset.remove) return _n(g.dataset.remove, g.dataset.removeScope);
+        return W("global"), Pt && Ce(!1), E(g.dataset.tab);
+      if (g.dataset.remove) return ea(g.dataset.remove, g.dataset.removeScope);
       if (g.dataset.applyMode)
-        return ge("apply-mode", g.dataset.applyMode), Ee(!1), H(g.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
+        return oe("apply-mode", g.dataset.applyMode), Ae(!1), H(g.dataset.applyMode === "copy" ? "Copy prompt copies straight away" : "Copy prompt shows a preview first");
       switch (g.dataset.action) {
         case "close":
-          return _e();
+          return Xe();
+        case "minimise":
+          return Zn(), (o.querySelector('.tab[aria-pressed="true"]') || h[0]).focus();
         case "reset":
-          return e.resetState(), H("Reset to defaults · ⌘Z to undo");
+          return t.resetState(), H("Reset to defaults · ⌘Z to undo");
         case "copy":
-          return de(location.href, "Link copied");
+          return he(location.href, "Link copied");
         case "pick":
-          return ce ? $e() : Nt();
+          return fe ? Te() : Ut();
         case "compare":
-          ue || Te(ee.getAttribute("aria-pressed") !== "true");
+          me || Pe(ne.getAttribute("aria-pressed") !== "true");
           return;
         case "undo":
-          return It();
+          return Vt();
         case "redo":
-          return Dt();
+          return _t();
         case "back":
-          return G("global");
+          return W("global");
         case "changes":
-          return G(K === "changes" ? "global" : "changes");
+          return W(K === "changes" ? "global" : "changes");
         case "apply":
-          return Gn();
+          return na();
         case "apply-menu":
-          return Ee(pe.hidden);
+          return Ae(ge.hidden);
         case "dialog-close":
-          return Ye();
+          return Qe();
         case "dialog-copy":
-          return de(_t.value, "Prompt copied · paste it into your agent");
+          return he(Zt.value, "Prompt copied · paste it into your agent");
         case "setup-copy":
-          return D && de(D.text2copy, D.copied);
+          return D && he(D.text2copy, D.copied);
         case "setup-dismiss":
-          return ge(Wt, Me.dataset.status), Ae();
+          return oe(en, Oe.dataset.status), Fe();
       }
     }
-  }), o.addEventListener("keydown", (d) => {
-    if (d.key === "Escape") {
-      if (!Ce.hidden) return Ye();
-      if (!pe.hidden) return Ee(!1);
+  }), o.addEventListener("keydown", (c) => {
+    if (c.key === "Escape") {
+      if (!Le.hidden) return Qe();
+      if (!ge.hidden) return Ae(!1);
     }
-    !(d.metaKey || d.ctrlKey) || d.key.toLowerCase() !== "z" || d.target.matches?.('input[type="text"], textarea') || (d.preventDefault(), d.shiftKey ? Dt() : It());
-  }), document.addEventListener("keydown", (d) => {
-    d.altKey && (d.code === "KeyT" && (d.preventDefault(), Ke()), d.code === "KeyC" && (d.preventDefault(), Te(ee.getAttribute("aria-pressed") !== "true")));
-  }), fe("panel") === "open" && le({ animate: !1 }), { open: le, close: _e, toggle: Ke, toast: H, pick: Nt, prompt: Ht };
+    !(c.metaKey || c.ctrlKey) || c.key.toLowerCase() !== "z" || c.target.matches?.('input[type="text"], textarea') || (c.preventDefault(), c.shiftKey ? _t() : Vt());
+  }), document.addEventListener("keydown", (c) => {
+    c.altKey && (c.code === "KeyT" && (c.preventDefault(), Me()), c.code === "KeyC" && (c.preventDefault(), Pe(ne.getAttribute("aria-pressed") !== "true")));
+  }), Z("panel") === "open" ? G({ animate: !1 }) : Z("panel") === "tabs" && (G({ animate: !1 }), Ce(!0)), { open: G, close: Xe, toggle: Me, toast: H, pick: Ut, prompt: Xt };
 }
-const wn = [lo, De, Dn, wt, Va, vt, ao, qa], bo = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}';
-function xo() {
+const Cn = [vo, He, Wn, St, to, $t, mo, eo], Ao = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}';
+function Lo() {
   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 = bo, document.head.prepend(e);
+  const t = document.createElement("style");
+  t.id = "twiddle-tokens", t.textContent = Ao, document.head.prepend(t);
 }
 if (!window.Twiddle) {
-  xo(), wn.forEach((n) => sa(n.tokens)), $n(gt);
-  let t;
-  const e = () => {
-    gt(ut()), t = mo({ sections: wn, store: ra, view: { suspend: ca, resume: pa } });
+  Lo(), Cn.forEach((n) => ga(n.tokens)), Pn(wt);
+  let e;
+  const t = () => {
+    wt(mt()), e = To({ sections: Cn, store: fa, view: { suspend: wa, resume: ya } });
   };
-  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", e) : e(), window.Twiddle = {
-    open: () => t && t.open(),
-    close: () => t && t.close(),
-    toggle: () => t && t.toggle(),
-    reset: () => yn(),
-    undo: () => kn(),
-    redo: () => Sn(),
-    pick: () => t && t.pick(),
-    prompt: () => t ? t.prompt() : "",
-    getState: ut
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", t) : t(), window.Twiddle = {
+    open: () => e && e.open(),
+    close: () => e && e.close(),
+    toggle: () => e && e.toggle(),
+    reset: () => Tn(),
+    undo: () => An(),
+    redo: () => Ln(),
+    pick: () => e && e.pick(),
+    prompt: () => e ? e.prompt() : "",
+    getState: mt
   };
 }
-const wo = window.Twiddle;
+const Po = window.Twiddle;
 export {
-  wo as Twiddle
+  Po as Twiddle
 };