twiddle-panel 0.7.1 → 0.8.0

package/dist/twiddle.mjs

@@ -1,148 +1,148 @@
-const ut = /* @__PURE__ */ new Set();
-let M = ta(), J = [], ve = [], De = null, en = 0;
-function ta() {
-  const t = new URLSearchParams(location.search).get("twd");
-  if (!t) return {};
+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 na() {
-  const t = new URL(location.href);
-  Object.keys(M).length ? t.searchParams.set("twd", JSON.stringify(M)) : 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 kt() {
-  na(), ut.forEach((t) => t(M));
+function Et() {
+  ia(), gt.forEach((e) => e(M));
 }
-function le(t, e) {
-  if (JSON.stringify(t) === JSON.stringify(M)) return;
+function pe(e, t) {
+  if (JSON.stringify(e) === JSON.stringify(M)) return;
   const n = Date.now();
-  e && e === De && n - en < 400 || (J.push(M), J.length > 100 && J.shift()), ve = [], De = e, en = n, M = t, kt();
+  t && t === qe && n - an < 400 || (Q.push(M), Q.length > 100 && Q.shift()), ke = [], qe = t, an = n, M = e, Et();
 }
-function Ue(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 ht() {
+function mt() {
   return JSON.parse(JSON.stringify(M));
 }
-function aa(t, e) {
-  le(U(M, t, Ue(M[t], e)), `${t}:${Object.keys(e)}`);
+function la(e, t) {
+  pe(B(M, e, Ve(M[e], t)), `${e}:${Object.keys(t)}`);
 }
-function oa(t, e = `multi:${Object.keys(t)}`) {
-  const n = Object.entries(t).reduce((a, [o, s]) => U(a, o, Ue(a[o], s)), M);
-  le(n, e);
+function 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 Sn(t, e, n) {
-  const a = U(M.scopes?.[t], e, Ue(M.scopes?.[t]?.[e], n)), o = U(M.scopes, t, Object.keys(a).length ? a : null);
-  le(U(M, "scopes", Object.keys(o).length ? o : null), `${t}|${e}:${Object.keys(n)}`);
+function 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 ra(t, e) {
-  if (e) return Sn(t, e, Object.fromEntries(
-    Object.keys(M.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(M.scopes, t, null);
-  le(U(M, "scopes", Object.keys(n).length ? n : null));
+  const n = B(M.scopes, e, null);
+  pe(B(M, "scopes", Object.keys(n).length ? n : null));
 }
-function sa(t, e) {
-  const n = M.scopes?.[t];
-  if (!n || t === e) return;
-  let a = { ...M.scopes[e] };
+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 = U(a, s, Ue(a[s], r));
+    a = B(a, s, Ve(a[s], r));
   });
-  const o = U(U(M.scopes, t, null), e, a);
-  le(U(M, "scopes", o));
+  const o = B(B(M.scopes, e, null), t, a);
+  pe(B(M, "scopes", o));
 }
-function $n() {
-  le({});
+function Tn() {
+  pe({});
 }
-function En() {
-  J.length && (ve.push(M), M = J.pop(), De = null, kt());
+function An() {
+  Q.length && (ke.push(M), M = Q.pop(), qe = null, Et());
 }
-function Cn() {
-  ve.length && (J.push(M), M = ve.pop(), De = null, kt());
+function Ln() {
+  ke.length && (Q.push(M), M = ke.pop(), qe = null, Et());
 }
-const ia = () => J.length > 0, la = () => ve.length > 0;
-function Mn(t) {
-  return ut.add(t), () => ut.delete(t);
+const ua = () => Q.length > 0, ha = () => ke.length > 0;
+function Pn(e) {
+  return gt.add(e), () => gt.delete(e);
 }
-const da = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  canRedo: la,
-  canUndo: ia,
-  getState: ht,
-  moveScope: sa,
-  onChange: Mn,
-  redo: Cn,
-  removeScope: ra,
-  resetState: $n,
-  setScope: Sn,
-  setSection: aa,
-  setSections: oa,
-  undo: En
-}, Symbol.toStringTag, { value: "Module" })), Tn = [];
-let ft = [], St = {}, R = null, se = !1, An = {};
-function ca(t) {
-  typeof t == "function" && Tn.push(t);
-}
-const tn = (t) => Object.assign({}, ...Tn.map((e) => e(t) || {})), gt = (t) => /^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t), pa = (t) => {
+  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 ua() {
+function ba() {
   return (!R || !R.isConnected) && (R = document.createElement("style"), R.id = "twiddle-scoped", document.head.appendChild(R)), R;
 }
-function Ln() {
-  const t = document.documentElement;
-  ft.forEach((e) => t.style.removeProperty(e)), ft = [], St = {};
-}
-function mt(t) {
-  if (An = t, se) return;
+function Nn() {
   const e = document.documentElement;
-  Ln();
-  const n = tn(t), a = Object.entries(t.scopes || {}).filter(([s]) => pa(s)).sort(([s], [r]) => gt(r) - gt(s)).map(([s, r]) => [s, tn(r)]);
-  Object.entries(n).forEach(([s, r]) => e.style.setProperty(s, r)), ft = Object.keys(n), St = n;
+  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) && (ua().textContent = o);
+  (o || R) && (ba().textContent = o);
 }
-function On(t) {
-  const e = document.documentElement, n = se, a = { ...St };
-  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, s]) => e.style.setProperty(o, s)), R && (R.disabled = !1));
+    n || (Object.entries(a).forEach(([o, s]) => t.style.setProperty(o, s)), R && (R.disabled = !1));
   }
 }
-function ha(t, e = document.documentElement) {
-  return On(() => {
-    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 fa() {
-  se || (Ln(), R && (R.disabled = !0), se = !0);
+function wa() {
+  de || (Nn(), R && (R.disabled = !0), de = !0);
 }
-function ga() {
-  se && (se = !1, R && (R.disabled = !1), mt(An));
+function ya() {
+  de && (de = !1, R && (R.disabled = !1), wt(Fn));
 }
-const ma = `
+const va = `
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -160,6 +160,10 @@ const ma = `
     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);
@@ -202,6 +206,13 @@ const ma = `
      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; }
@@ -219,12 +230,12 @@ const ma = `
   /* Panel */
   .panel {
     width: 360px; /* tabbed layout (Figma 254:323); was 300 */
-    /* 86px = 16 + 16 margins + 44 launcher + 10 gap */
-    max-width: calc(100vw - 86px);
+    /* 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.
        32px = 16 margin below + 16 room at the top. */
-    max-height: calc(100vh - 32px);
-    max-height: calc(100dvh - 32px);
+    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;
@@ -451,9 +462,7 @@ const ma = `
     padding: 1px 4px;
   }
 
-  /* Closed: beside the launcher (left of it, centred on it). Open or minimised:
-     the panel takes that spot, so the toast floats just above the tab bar
-     (63px tall), inside the panel's right edge. */
+  /* 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);
@@ -462,7 +471,13 @@ const ma = `
     opacity: 0; transition: opacity .15s ease; pointer-events: none;
   }
   .toast.show { opacity: 1; }
-  .wrap.is-open .toast { bottom: 72px; right: 62px; transform: none; z-index: 3; }
+  .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 ---------- */
 
@@ -886,219 +901,288 @@ const ma = `
   .summary-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
   .summary-swatch[hidden] { display: none; }
   .summary-row .chev { display: grid; color: var(--p-muted); }
-`, O = (t, e, n) => `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
-  dial: O(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  link: O(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
-  reset: O(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
-  close: O(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
-  chevron: O(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
+`, P = (e, t, n) => `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${t}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`, A = {
+  dial: P(20, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  link: P(15, 2, '<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),
+  reset: P(15, 2, '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),
+  close: P(15, 2, '<path d="M18 6L6 18M6 6l12 12"/>'),
+  chevron: P(12, 2.4, '<path d="M9 6l6 6-6 6"/>'),
   // Proposals: not yet in the Figma Icon/* set.
-  pick: O(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
-  compare: O(15, 2, '<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),
-  undo: O(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
-  redo: O(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
-  back: O(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
-  down: O(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
-  minimise: O(15, 2, '<path d="M5 12h14"/>'),
-  copy: O(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
-  warn: O(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
+  pick: P(15, 2, '<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),
+  compare: P(15, 2, '<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),
+  undo: P(15, 2, '<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),
+  redo: P(15, 2, '<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),
+  back: P(15, 2, '<path d="M15 18l-6-6 6-6"/>'),
+  down: P(12, 2.4, '<path d="M6 9l6 6 6-6"/>'),
+  minimise: P(15, 2, '<path d="M5 12h14"/>'),
+  copy: P(13, 2, '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),
+  warn: P(13, 2, '<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),
   // Launcher: the Panel product mark (Twiddle brand; Figma Logo page › Panel mark; also site/favicon.svg).
   // A switch knocked out of a disc; knob + two-dot trail. Classes let the Toggle animation move them.
   panelMark: '<svg class="mark" width="44" height="44" viewBox="0 0 120 120" aria-hidden="true"><path class="mark-disc" fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120ZM86 76C86 90.3594 74.3594 102 60 102C45.6406 102 34 90.3594 34 76V44C34 29.6406 45.6406 18 60 18C74.3594 18 86 29.6406 86 44V76ZM60 22C72.1503 22 82 31.8497 82 44V76C82 88.1503 72.1503 98 60 98C47.8497 98 38 88.1503 38 76V44C38 31.8497 47.8497 22 60 22Z"/><circle class="mark-t2" cx="60" cy="80.46" r="4.28"/><circle class="mark-t1" cx="60" cy="66.04" r="7.14"/><circle class="mark-knob" cx="60" cy="44" r="11.9"/></svg>',
   // Tab bar (Figma: Panel — tabbed layout (proposal), Icon/Tab * components)
-  tabOverview: O(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
-  tabColour: O(18, 2, '<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),
-  tabType: O(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
-  tabSpacing: O(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
-  tabShape: O(18, 2, '<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),
-  tabShadows: O(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
-  sliders: O(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
+  tabOverview: P(18, 1.8, '<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),
+  tabColour: P(18, 2, '<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),
+  tabType: P(18, 2, '<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),
+  tabSpacing: P(18, 2, '<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),
+  tabShape: P(18, 2, '<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),
+  tabShadows: P(18, 2, '<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),
+  sliders: P(15, 2, '<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')
   // Figma: Icon/Sliders (proposal)
-}, Pn = "twiddle:";
-function ne(t) {
+}, Rn = "twiddle:";
+function Z(e) {
   try {
-    return localStorage.getItem(Pn + t);
+    return localStorage.getItem(Rn + e);
   } catch {
     return null;
   }
 }
-function ge(t, e) {
+function oe(e, t) {
   try {
-    localStorage.setItem(Pn + t, e);
+    localStorage.setItem(Rn + e, t);
   } catch {
   }
 }
-function ie({ 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 s = null;
   function r(l) {
-    s = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
-    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
-    o.forEach((c, h) => {
-      c.tabIndex = h === p ? 0 : -1;
+    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 !== s && (r(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);
+    l.preventDefault(), i(o[u].dataset.value, !0);
   }), r(null), { el: a, setValue: r };
 }
-const Fn = /var\(\s*(--twd-[\w-]+)/g, ba = /::?[\w-]+(\([^)]*\))?/g;
-function* qe(t) {
-  for (const e of t)
-    e.selectorText != null && (yield e), e.cssRules && (yield* qe(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 xa() {
-  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 qe(n)) {
-      const o = [...a.style.cssText.matchAll(Fn)].map((s) => s[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 wa(t, e) {
-  const n = e.replace(ba, "").trim() || "*";
+function Ma(e, t) {
+  const n = t.replace(Ea, "").trim() || "*";
   try {
-    return t.matches(n);
+    return e.matches(n);
   } catch {
     return !1;
   }
 }
-function Nn(t) {
-  const e = /* @__PURE__ */ new Set(), n = [];
-  return xa().forEach(({ selectors: a, vars: o }) => {
-    const s = a.find((r) => wa(t, r));
-    s && (o.forEach((r) => e.add(r)), n.push(s.trim()));
-  }), [...(t.getAttribute("style") || "").matchAll(Fn)].forEach((a) => e.add(a[1])), { names: e, selectors: n };
+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 bt = (t) => window.CSS && CSS.escape ? CSS.escape(t) : t;
-function va(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(`#${bt(n.id)}`).length === 1)
-      return e.unshift(`#${bt(n.id)}`), e.join(" > ");
+    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);
-    e.unshift(o.length > 1 ? `${a}:nth-of-type(${o.indexOf(n) + 1})` : a), n = n.parentElement;
+    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 ya(t, e = Nn(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], s = a.find((r) => e.some((i) => new RegExp(`\\.${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(i))) || a[0];
-  return s ? `.${bt(s)}` : 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 ka(t) {
-  const e = Nn(t), n = ya(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: va(t),
+    tokens: t.names,
+    elementSelector: Ta(e),
     classSelector: n,
     classCount: n ? document.querySelectorAll(n).length : 0
   };
 }
-const xt = (t) => t.localName + [...t.classList].map((e) => `.${e}`).join(""), Sa = { radius: "px", intensity: "%", base: "px" }, jn = (t) => t.charAt(0).toUpperCase() + t.slice(1), $a = (t, e) => typeof e == "number" || /^\d+$/.test(e) ? `${e}${Sa[t] || ""}` : jn(String(e));
-function nn(t, e, n) {
-  const a = On(() => t.tokens({ [t.id]: e }) || {}), o = Object.keys(a);
+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 r = n.selector ? document.querySelector(n.selector) : void 0;
-    s = ha(o, r || void 0);
+    s = xa(o, r || void 0);
   }
   return {
     ...n,
-    sectionId: t.id,
-    title: t.title,
-    settings: Object.entries(e).map(([r, i]) => ({ key: r, label: jn(r), value: $a(r, i), ...t.describe?.(r, i) || {} })),
+    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 an(t, e) {
+function ln(e, t) {
   const n = [];
-  return e.forEach((a) => {
-    t[a.id] && n.push(nn(a, t[a.id], { kind: "global", selector: null }));
-  }), Object.entries(t.scopes || {}).forEach(([a, o]) => {
-    const s = gt(a) ? "class" : "element";
-    e.forEach((r) => {
-      o[r.id] && n.push(nn(r, o[r.id], { kind: s, 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 Ea(t) {
-  const e = (o) => Object.values(o || {}).reduce((s, r) => s + Object.keys(r || {}).length, 0), { scopes: n, ...a } = t;
-  return e(a) + Object.values(n || {}).reduce((o, s) => o + e(s), 0);
+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 re = (t) => `\`${t}\``, Xe = (t) => t.map((e) => `  - ${re(e.name)}: ${e.from ? `${re(e.from)} → ` : ""}${re(e.to)}`), Je = (t) => `${t.title} › ${t.settings.map((e) => `${e.label}: ${e.value}`).join(", ")}`;
-function Ca(t) {
-  let e = null;
+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 `${re(xt(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 on(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 Ma(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"), s = t.filter((i) => i.kind === "element"), r = [];
+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}`
+    `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) => r.push(`- **${Je(i)}**`, ...Xe(i.tokens)))), o.length && (r.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.",
     ""
-  ), on(o, "selector").forEach(([i, l]) => {
-    r.push(`- ${re(i)} (${document.querySelectorAll(i).length} on this page)`), l.forEach((p) => r.push(`  - **${Je(p)}**`, ...Xe(p.tokens).map((c) => `  ${c}`)));
+  ), 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);
     r.push(
@@ -1107,8 +1191,8 @@ function Ma(t, { link: e = location.href, warnings: n = [] } = {}) {
       "",
       "These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",
       ""
-    ), on(s, "selector").forEach(([l, p]) => {
-      r.push(`- ${Ca(l)}, found at ${re(l)}`), p.forEach((c) => r.push(`  - **${Je(c)}**`, ...Xe(c.tokens).map((h) => `  ${h}`)));
+    ), 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 && r.push(
@@ -1129,85 +1213,85 @@ function Ma(t, { link: e = location.href, warnings: n = [] } = {}) {
   ), r.join(`
 `);
 }
-const ze = 4.5, Ta = 3, Aa = [
+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 Y;
-function $t(t) {
-  if (!t || (Y ||= Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: !0 }), !Y)) return null;
-  Y.clearRect(0, 0, 1, 1), Y.fillStyle = "#000", Y.fillStyle = t, Y.fillRect(0, 0, 1, 1);
-  const [e, n, a, o] = Y.getImageData(0, 0, 1, 1).data;
-  return [e, n, a, o / 255];
-}
-function rn(t) {
-  const e = document.createElement("i");
-  e.style.cssText = `position:absolute;visibility:hidden;color:var(${t})`, document.documentElement.appendChild(e);
-  const n = getComputedStyle(e).color;
-  return e.remove(), $t(n);
-}
-const sn = ([t, e, n]) => {
+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);
-}, Rn = (t, e) => t.slice(0, 3).map((n, a) => n * t[3] + e[a] * (1 - t[3])).concat(1);
-function zn(t, e) {
-  const n = sn(t[3] < 1 ? Rn(t, e) : t), a = sn(e);
+  return 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 In = (t) => `${t.toFixed(1)}:1`;
-function Qe() {
-  const t = [];
-  return Aa.forEach(([e, n, a]) => {
-    const o = rn(e), s = rn(n);
+const Hn = (e) => `${e.toFixed(1)}:1`;
+function nt() {
+  const e = [];
+  return za.forEach(([t, n, a]) => {
+    const o = cn(t), s = cn(n);
     if (!o || !s || s[3] === 0) return;
-    const r = zn(o, s);
-    r < ze && t.push({ label: a, ratio: r, needed: ze, text: `${a}: ${In(r)} · AA needs ${ze}` });
-  }), t;
+    const r = qn(o, s);
+    r < Ue && e.push({ label: a, ratio: r, needed: Ue, text: `${a}: ${Hn(r)} · AA needs ${Ue}` });
+  }), e;
 }
-function La(t) {
-  const e = [];
-  for (let n = t; n && n.nodeType === 1; n = n.parentElement) {
-    const a = $t(getComputedStyle(n).backgroundColor);
-    if (a && a[3] > 0 && (e.push(a), a[3] >= 1))
+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) => Rn(a, n), [255, 255, 255, 1]);
+  return t.reduceRight((n, a) => Bn(a, n), [255, 255, 255, 1]);
 }
-function Oa(t) {
-  if (!t.textContent.trim() && !t.placeholder) return null;
-  const e = getComputedStyle(t), n = $t(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), s = a >= 24 || a >= 18.66 && parseInt(e.fontWeight, 10) >= 700 ? Ta : ze, r = zn(n, La(t));
-  return r < s ? { label: "This element", ratio: r, needed: s, text: `This element’s text: ${In(r)} · AA needs ${s}` } : null;
-}
-const ln = "twiddle-panel", Pa = "0.7.1", dn = "https://panel.twiddle.in", Fa = "--twd-radius-control", Na = /var\(\s*--twd-/;
-function ja(t) {
-  return t.style.cssText.split(";").some((e) => {
-    const n = e.slice(0, e.indexOf(":")).trim();
-    return n && !n.startsWith("--") && Na.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 Ra() {
-  if (!getComputedStyle(document.documentElement).getPropertyValue(Fa).trim()) return "no-tokens";
-  let t = !1;
-  for (const e of document.styleSheets) {
-    if (e.ownerNode?.id === "twiddle-scoped") continue;
+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 qe(n)) if (ja(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 za() {
-  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;
@@ -1217,19 +1301,19 @@ function za() {
     } catch {
       continue;
     }
-    for (const o of qe(a))
+    for (const o of _e(a))
       o.style.cssText.split(";").forEach((s) => {
         const r = s.slice(0, s.indexOf(":")).trim();
-        r && !r.startsWith("--") && e(s);
+        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 cn = [
-  { label: "With a build tool, in your entry file", code: `import '${ln}/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/${ln}@${Pa}/dist/twiddle-tokens.css">` }
-], Ia = `Convert this prototype's styles to use the Panel design tokens (the --twd-* CSS custom properties from twiddle-panel), so the panel can tweak them live.
+  { 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:
@@ -1247,52 +1331,52 @@ const cn = [
 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,
+  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(...s) {
-      e.append(...s);
+      t.append(...s);
     }
   };
 }
-function Da({ label: t, ends: e, cols: n = 9, rows: a = 5, onInput: o }) {
+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, u) => {
-    const v = document.createElement("span");
-    return v.className = `pad-edge ${b}`, v.textContent = u, v.setAttribute("aria-hidden", "true"), v;
+  const r = (b, h) => {
+    const y = document.createElement("span");
+    return y.className = `pad-edge ${b}`, y.textContent = h, y.setAttribute("aria-hidden", "true"), y;
   };
-  s.append(r("top", e.top), r("bottom", e.bottom), r("left", e.left), r("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), s.append(i);
-  let p = 0.5, c = 0.5;
-  const h = (b, u) => Math.round(Math.min(1, Math.max(0, b)) * (u - 1)) / (u - 1);
-  function y() {
-    l.style.left = `${p * 100}%`, l.style.top = `${c * 100}%`;
+  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);
   };
   s.addEventListener("pointerdown", (b) => {
     s.setPointerCapture(b.pointerId), s.classList.add("dragging"), m(b);
@@ -1303,149 +1387,149 @@ function Da({ label: t, ends: e, cols: n = 9, rows: a = 5, onInput: o }) {
     s.hasPointerCapture(b.pointerId) && s.releasePointerCapture(b.pointerId), s.classList.remove("dragging");
   };
   return s.addEventListener("pointerup", x), s.addEventListener("pointercancel", x), s.addEventListener("keydown", (b) => {
-    const u = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[b.key];
-    u && (b.preventDefault(), u[0] ? f(h(p, n) + u[0] / (n - 1), c, "y") : f(p, h(c, a) + u[1] / (a - 1), "x"));
+    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: 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(), s.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 Dn({ label: t, min: e, max: n, step: a = 1, format: o = String, onInput: s }) {
+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"), r.append(i, l);
-  const p = (c) => {
-    const h = (Number(i.value) - e) / (n - e) * 100;
-    i.style.setProperty("--fill", `${h}%`), l.textContent = c ?? o(Number(i.value)), i.setAttribute("aria-valuetext", l.textContent);
+  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(), s(Number(i.value));
+    d(), s(Number(i.value));
   }), {
     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 Ba({ label: t, options: e, columns: n = 3, className: a = "", onSelect: o }) {
+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", t);
-  const r = e.map((c) => {
-    const h = document.createElement("button");
-    return h.type = "button", h.className = "tile", c.wide && h.classList.add("wide"), h.setAttribute("role", "radio"), h.dataset.value = c.value, c.title && (h.title = c.title), h.innerHTML = `${c.preview ? `<span class="tile-preview" aria-hidden="true">${c.preview}</span>` : ""}<span class="tile-text"><span class="tile-label"></span>${c.sub ? '<span class="tile-sub"></span>' : ""}</span>`, h.querySelector(".tile-label").textContent = c.label, c.sub && (h.querySelector(".tile-sub").textContent = c.sub), h.addEventListener("click", () => p(c.value)), h;
+  s.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;
   });
   s.append(...r);
   let i = null;
-  function l(c) {
-    i = c, r.forEach((y) => y.setAttribute("aria-checked", String(y.dataset.value === c)));
-    const h = Math.max(0, r.findIndex((y) => y.dataset.value === c));
-    r.forEach((y, f) => {
-      y.tabIndex = f === h ? 0 : -1;
+  function 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 && r.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 s.addEventListener("keydown", (c) => {
-    const h = r.indexOf(c.target.closest(".tile"));
-    if (h < 0) return;
-    const y = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[c.key];
+  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 + r.length) % r.length;
-    else if (c.key === "Home") f = 0;
-    else if (c.key === "End") f = r.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(r[f].dataset.value, !0);
+    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 Ua = 999;
-function Bn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: s, max: r, extra: i = [], extraTokens: l = () => ({}), shape: p = "card" }) {
-  const c = (f) => s.find((m) => m.value === f), h = (f) => f >= Ua ? "full" : `${f}px`, y = (f) => {
+const Ya = 999;
+function _n({ id: e, title: t, hint: n, token: a, uses: o = [], presets: s, max: r, extra: i = [], extraTokens: l = () => ({}), shape: d = "card" }) {
+  const p = (f) => s.find((m) => m.value === f), u = (f) => f >= Ya ? "full" : `${f}px`, v = (f) => {
     if (typeof f.radius == "number" && isFinite(f.radius))
       return { [a]: `${Math.min(Math.max(f.radius, 0), r)}px` };
-    const m = c(f.corners);
+    const m = p(f.corners);
     return m ? { [a]: `${m.radius}px` } : {};
   };
   return {
-    id: t,
-    title: e,
+    id: e,
+    title: t,
     hint: n,
     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 = ie({
-          label: `${e} corners`,
-          options: s.map((E) => ({ value: E.value, label: E.label, title: h(E.radius) })),
-          onSelect: (E) => m.setSection(t, { corners: E, radius: null })
-        }), v = Dn({
-          label: `${e} corner radius`,
+        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: r,
-          format: h,
-          onInput: (E) => m.setSection(t, { radius: E, corners: null })
+          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)), Q = m.getState()[t] || {}, K = c(Q.corners) || s.find((G) => G.radius === E);
-          if (u.setValue(K ? K.value : null), isNaN(E)) {
-            v.setValue(0, "—"), b.setValue("");
+          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, r), 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: s.length,
-          options: s.map((u) => ({ value: u.value, label: u.label, title: h(u.radius), preview: b(u.radius) })),
-          current: (u) => {
-            const v = u[t] || {};
-            if (v.radius != null) return null;
+          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) || s.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) {
@@ -1453,50 +1537,50 @@ function Bn({ id: t, title: e, hint: n, token: a, uses: o = [], presets: s, max:
     }
   };
 }
-function ke(t, { section: e, key: n, label: a, options: o, fallback: s, valueText: r }) {
-  const i = B(a), l = ie({
+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] || s;
-    l.setValue(c), i.setValue(r ? r(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 qa(t, { section: e, key: n, label: a, min: o, max: s, fallback: r, format: i }) {
-  const l = B(a), p = Dn({ label: a, min: o, max: s, format: i, onInput: (h) => t.setSection(e, { [n]: h }) });
-  l.append(p.el);
-  const c = () => {
-    const h = (t.getState()[e] || {})[n];
-    p.setValue(typeof h == "number" ? h : r);
+  return 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: s = 3, className: r = "", fallback: i, valueText: l, current: p, select: c }) {
-  const h = B(a), y = Ba({
+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: s,
     className: r,
-    onSelect: (m) => c ? c(m) : t.setSection(e, { [n]: m })
+    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 pn = (t, e) => e.map((n) => `${t}${n}`), Un = {
+const gn = (e, t) => t.map((n) => `${e}${n}`), Kn = {
   fonts: { label: "Tokens", tokens: ["font-heading", "font-body"], kind: "text" },
-  type: { label: "Tokens", tokens: pn("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: pn("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" },
@@ -1504,124 +1588,124 @@ const pn = (t, e) => e.map((n) => `${t}${n}`), Un = {
   buttonStyle: { label: "Button", tokens: ["button-bg", "button-fg", "button-border", "button-hover"], kind: "colour" },
   cardStyle: { label: "Card", tokens: ["card-bg", "card-border"], kind: "colour" },
   cardShadow: { label: "Card shadow", tokens: ["card-shadow"], kind: "text" }
-}, _ = (t) => `--twd-${t}`, et = (t, e) => Object.prototype.hasOwnProperty.call(t.getState().custom || {}, e), un = (t, e) => Un[e].tokens.some((n) => (t.custom || {})[n] != null);
-function Va(t, e) {
-  const n = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
-  return !n || e === "text" || e === "colour" ? null : n[2] === "rem" ? { n: +(parseFloat(n[1]) * 16).toFixed(1), unit: "px" } : { n: +parseFloat(n[1]).toFixed(3), unit: n[2] || (e === "length" ? "px" : "") };
+}, _ = (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 Ha(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 _a(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 s = o.querySelector("input"), r = o.querySelector(".token-unit"), i = o.querySelector(".token-bar span"), l = o.querySelector(".token-swatch"), p = o.querySelector(".custom-tag"), c = o.querySelector(".token-reset");
-  let h = "";
-  const y = () => {
+  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;
-    h && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${h}`);
-    const x = Ha(m, n), b = F(_(e));
+    u && /^-?\d*\.?\d+$/.test(m.trim()) && (m = `${m.trim()}${u}`);
+    const x = Ja(m, n), b = F(_(t));
     if (x === null) {
-      et(t, e) ? t.setSection("custom", { [e]: null }) : f();
+      at(e, t) ? e.setSection("custom", { [t]: null }) : f();
       return;
     }
-    if (x === b && !et(t, e)) return f();
-    t.setSection("custom", { [e]: x });
+    if (x === b && !at(e, t)) return f();
+    e.setSection("custom", { [t]: x });
   };
-  s.addEventListener("change", y), s.addEventListener("blur", () => f()), s.addEventListener("keydown", (m) => {
+  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());
-  }), c.addEventListener("click", () => t.setSection("custom", { [e]: null }));
+  }), p.addEventListener("click", () => e.setSection("custom", { [t]: null }));
   function f() {
-    const m = F(_(e)), x = et(t, e), b = Va(m, n);
-    h = b ? b.unit : "", document.activeElement !== s && o.getRootNode().activeElement !== s && (s.value = b ? String(b.n) : m), s.title = m, r.textContent = h, r.hidden = !h, i && (i.style.width = `${Math.max(2, Math.min(100, (b ? b.n : 0) / a * 100))}%`), l && (l.style.background = m), o.classList.toggle("edited", x), p.hidden = !x, c.hidden = !x;
+    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 Ka = {
+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(Un).map(([t, e]) => [t, (n, a, { label: o = e.label } = {}) => {
-    const s = B(o);
+  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 = e.tokens[0], i = e.tokens[e.tokens.length - 1];
-    s.setValue(e.tokens.length > 2 && /-\w+$/.test(r) ? `${_(r)} … ${i.split("-").pop()}` : "");
+    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(_a(a, p, e.kind, e.bar))), s.append(l), n.append(s.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 }, wt = [0.75, 1.25], hn = [1, 2, 3, 4, 5, 6, 7, 8].map((t) => `--twd-space-${t}`);
-function ae(t = {}) {
-  return typeof t.factor == "number" && isFinite(t.factor) ? Math.min(wt[1], Math.max(wt[0], t.factor)) : we[t.spacing] || 1;
+}, 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 tt = (t) => `${Math.round(t * 100)}%`, Ga = {
+const ot = (e) => `${Math.round(e * 100)}%`, to = {
   id: "density",
   title: "Density",
   hint: "Compact · regular · comfortable",
-  uses: hn,
-  tokens(t) {
-    const e = ae(t.density);
-    if (e === 1) return {};
+  uses: bn,
+  tokens(e) {
+    const t = se(e.density);
+    if (t === 1) return {};
     const n = {};
-    return hn.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: tt(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" } = {}) {
+    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>`;
-      t.append(V(e, {
+      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 s = ae(o.density);
-          return Object.keys(we).find((r) => we[r] === s) || 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, s) => un(s, "spacing") ? "Custom" : o ? "" : tt(ae(s.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 = ie({
+    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: (r) => e.setSection("density", { spacing: r, factor: null })
+        onSelect: (r) => t.setSection("density", { spacing: r, factor: null })
       });
       a.append(o.el);
       const s = () => {
-        const r = e.getState().density || {}, i = ae(r), l = Object.keys(we).find((p) => we[p] === i);
-        o.setValue(l || null), a.setValue(un(e.getState(), "spacing") ? "Custom" : l ? "" : tt(i));
+        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));
       };
-      s(), e.onChange(s), 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));
   }
-}, Wa = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 6l4 4M4 20l1-4 9.5-9.5a2.1 2.1 0 013 3L8 19l-4 1z"/></svg>', Ya = [
+}, 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],
@@ -1633,11 +1717,11 @@ const tt = (t) => `${Math.round(t * 100)}%`, Ga = {
   [800, "black", 58],
   [900, "black", 45],
   [950, "black", 30]
-], nt = (t) => {
-  let e = String(t).trim().replace(/^#/, "");
-  return /^[0-9a-f]{3}$/i.test(e) && (e = e.split("").map((n) => n + n).join("")), /^[0-9a-f]{6}$/i.test(e) ? `#${e.toUpperCase()}` : null;
+], 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 Za({ label: t, onInput: e }) {
+function oo({ label: e, onInput: t }) {
   const n = document.createElement("div");
   n.className = "colour";
   const a = document.createElement("div");
@@ -1645,21 +1729,21 @@ function Za({ label: t, onInput: e }) {
   const o = document.createElement("input");
   o.type = "color", o.className = "colour-picker", o.tabIndex = -1, o.setAttribute("aria-hidden", "true");
   const s = document.createElement("button");
-  s.type = "button", s.className = "colour-swatch", s.setAttribute("aria-label", `${t}: open colour picker`);
+  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", `${t} hex value`);
+  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 = Wa, i.title = "Pick a colour from the screen", i.setAttribute("aria-label", "Pick a colour from the screen"), a.append(o, s, r, i);
+  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 = Ya.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(), s.style.background = f, n.getRootNode().activeElement !== r && (r.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));
   };
   s.addEventListener("click", () => {
     if (o.showPicker)
@@ -1669,64 +1753,64 @@ function Za({ label: t, onInput: e }) {
       } catch {
       }
     o.click();
-  }), o.addEventListener("input", () => h(o.value.toUpperCase())), r.addEventListener("input", () => {
-    const f = nt(r.value);
-    f && h(f);
+  }), o.addEventListener("input", () => u(o.value.toUpperCase())), r.addEventListener("input", () => {
+    const f = rt(r.value);
+    f && u(f);
   });
-  const y = () => {
-    r.value = p;
+  const v = () => {
+    r.value = d;
   };
-  return r.addEventListener("blur", y), r.addEventListener("keydown", (f) => {
-    f.key === "Enter" && (y(), r.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 = nt(f);
-        m && h(m);
+        const { sRGBHex: f } = await new window.EyeDropper().open(), m = rt(f);
+        m && u(m);
       } catch {
       }
     else
       s.click();
-  }), { el: n, setValue: (f) => c(nt(f) || p) };
+  }), { el: n, setValue: (f) => p(rt(f) || d) };
 }
-function Xa({ 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 s = null;
   function r(l) {
-    s = l, o.forEach((c) => c.setAttribute("aria-checked", String(c.dataset.value === l)));
-    const p = Math.max(0, o.findIndex((c) => c.dataset.value === l));
-    o.forEach((c, h) => {
-      c.tabIndex = h === p ? 0 : -1;
+    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 !== s && (r(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);
+    l.preventDefault(), i(o[u].dataset.value, !0);
   }), r(null), { el: a, setValue: r };
 }
-const Ja = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => Object.fromEntries(t.split(" ").map((e, n) => [Ja[n], `#${e}`])), at = {
-  slate: me("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),
-  gray: me("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),
-  zinc: me("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),
-  neutral: me("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),
-  stone: me("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")
-}, N = (t) => Object.fromEntries(t.split(" ").map((e, n) => [400 + 100 * n, `#${e}`])), ot = {
+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"),
@@ -1744,17 +1828,17 @@ const Ja = [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")
-}, Ie = [
+}, 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" }
-], fn = "#4F46E5", Qa = "#A0743C", eo = [
+], 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" }
-], gn = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], to = {
+], wn = ["bg", "surface", "surface-raised", "text", "text-muted", "border"], co = {
   // proposal
   bg: "#0F0F11",
   surface: "#18181B",
@@ -1762,56 +1846,56 @@ const Ja = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], me = (t) => O
   text: "#F4F4F5",
   "text-muted": "#A1A1AA",
   border: "#2E2E33"
-}, no = { bg: 4, surface: 2, "surface-raised": 2, text: 5, "text-muted": 12, border: 10 }, Z = (t) => /^#[0-9a-f]{6}$/i.test(t || ""), rt = (t) => [500, 600, 700].includes(Number(t.shade)) ? Number(t.shade) : 600, st = (t) => t[0].toUpperCase() + t.slice(1);
-function mn(t) {
-  const e = (l) => (l /= 255, l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4), [n, a, o] = [1, 3, 5].map((l) => e(parseInt(t.slice(l, l + 2), 16))), s = 0.2126 * n + 0.7152 * a + 0.0722 * o, r = 1.05 / (s + 0.05), i = (s + 0.05) / (98e-4 + 0.05);
+}, 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 Be = {
+const He = {
   id: "colour",
   title: "Colour",
   hint: "Brand colour · neutral tint · mode",
-  uses: ["--twd-primary", "--twd-primary-hover", "--twd-on-primary", "--twd-focus", ...gn.map((t) => `--twd-${t}`)],
-  tokens(t) {
-    const e = t.colour || {}, n = {}, a = e.mode === "dark", o = ot[e.primary];
-    if (!Z(e.brand) && o) {
-      const i = rt(e);
-      n["--twd-primary"] = o[i], n["--twd-primary-hover"] = o[a ? i - 100 : i + 100], n["--twd-on-primary"] = mn(o[i]), n["--twd-focus"] = o[500];
+  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];
     }
-    Z(e.brand) && (n["--twd-primary"] = e.brand, n["--twd-primary-hover"] = a ? `color-mix(in oklch, ${e.brand} 85%, white)` : `color-mix(in oklch, ${e.brand} 86%, black)`, n["--twd-on-primary"] = mn(e.brand), n["--twd-focus"] = e.brand);
-    const s = e.tint === "subtle" ? Z(e.brand) ? e.brand : F("--twd-primary") || fn : e.tint === "warm" ? Qa : null, r = at[e.neutral];
+    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, p]) => {
-        n[`--twd-${l}`] = p;
+      Object.entries(i).forEach(([l, d]) => {
+        n[`--twd-${l}`] = d;
       });
-    } else (a || s) && gn.forEach((i) => {
-      const l = a ? to[i] : F(`--twd-${i}`);
-      l && (n[`--twd-${i}`] = s ? `color-mix(in oklch, ${l} ${100 - no[i]}%, ${s})` : l);
+    } 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 s = at[o.neutral], r = ot[o.primary];
+        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: Ie.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 s = o.colour || {};
-          return Z(s.brand) ? null : Ie.find((r) => r.primary === s.primary && r.neutral === s.neutral)?.value || null;
+          return X(s.brand) ? null : Be.find((r) => r.primary === s.primary && r.neutral === s.neutral)?.value || null;
         },
         select: (o) => {
-          const s = Ie.find((r) => r.value === o);
-          e.setSection("colour", { primary: s.primary, neutral: s.neutral, shade: null, brand: null, tint: null });
+          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, s) => {
           const r = s.colour || {};
@@ -1819,61 +1903,61 @@ const Be = {
         }
       }));
     },
-    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(ot).map(([i, l]) => ({ value: i, label: st(i), title: st(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 Z(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 s = ie({ label: "Shade", options: [500, 600, 700].map((i) => ({ value: String(i), label: String(i) })), onSelect: (i) => e.setSection("colour", { shade: Number(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 = e.getState().colour || {};
-        s.setValue(String(rt(i))), a.setValue(Z(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${rt(i)}` : "");
+        const i = t.getState().colour || {};
+        s.setValue(String(lt(i))), a.setValue(X(i.brand) ? i.brand.toLowerCase() : i.primary ? `${i.primary}-${lt(i)}` : "");
       };
-      r(), e.onChange(r), 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(at).map(([a, o]) => ({ value: a, label: st(a), preview: `<span class="greys">${[o[50], o[200], o[500], o[900]].map((s) => `<i style="background:${s}"></i>`).join("")}</span>` })),
-        select: (a) => e.setSection("colour", { neutral: a, tint: null }),
+        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), Be.parts.brand(a, e, { label: "Brand" }), Z((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 = Za({ label: "Brand colour", onInput: (r) => e.setSection("colour", { brand: r }) });
+    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 s = () => o.setValue((e.getState().colour || {}).brand || (e.readToken || F)("--twd-primary") || fn);
-      s(), e.onChange(s), 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 = Xa({ label: "Neutral tint", options: eo, onSelect: (r) => e.setSection("colour", { tint: r }) });
+    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 s = () => o.setValue((e.getState().colour || {}).tint || "pure");
-      s(), e.onChange(s), 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,
@@ -1882,15 +1966,15 @@ const Be = {
       }));
     }
   },
-  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));
   }
-}, Oe = (t, e = "var(--twd-surface)") => `color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`, ao = {
+}, 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: Oe(14), fg: "var(--twd-primary)", border: "transparent", hover: Oe(22) },
-  outline: { bg: "transparent", fg: "var(--twd-primary)", border: "var(--twd-primary)", hover: Oe(8, "transparent") },
-  ghost: { bg: "transparent", fg: "var(--twd-primary)", border: "transparent", hover: Oe(10, "transparent") }
-}, oo = { small: { height: 0.8, pad: 0.75 }, large: { height: 1.2, pad: 1.25 } }, qn = Bn({
+  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",
@@ -1909,15 +1993,15 @@ const Be = {
     // Figma: "8px"
     { value: "pill", label: "Pill", radius: 999 }
   ],
-  extraTokens(t) {
-    const e = {}, n = ao[t.style];
+  extraTokens(e) {
+    const t = {}, n = uo[e.style];
     n && Object.entries(n).forEach(([r, i]) => {
-      e[`--twd-button-${r}`] = i;
+      t[`--twd-button-${r}`] = i;
     });
-    const a = oo[t.size];
-    if (!a) return e;
-    const o = ye(F("--twd-control-height"), a.height), s = ye(F("--twd-control-pad-x"), a.pad);
-    return o && (e["--twd-control-height"] = o), s && (e["--twd-control-pad-x"] = s), e;
+    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: [
     {
@@ -1925,23 +2009,23 @@ const Be = {
       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" }]
     }
   ]
-}), ro = {
+}), 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" }
-}, vt = Bn({
+}, St = _n({
   id: "cards",
   title: "Cards",
   hint: "Style · corners · border",
@@ -1960,15 +2044,15 @@ const Be = {
     { value: "large", label: "Large", radius: 20 }
     // proposal (cards don't go fully pill)
   ],
-  extraTokens(t) {
-    const e = {}, n = ro[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: [
     {
@@ -1976,49 +2060,49 @@ const Be = {
       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" }]
     }
   ]
-}), oe = 60, it = {
+}), 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], s) => {
+}, je = ([e, t, n, a, o], s) => {
   const r = Math.min(1, +(o * s).toFixed(3));
-  return r <= 0 ? "none" : `${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${r})`;
-}, yt = {
+  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)) : oe;
+  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 = it[n];
+    const o = ct[n];
     if (!o) return {};
-    if (n === "soft" && a === oe) return {};
-    const s = a / oe;
+    if (n === "soft" && a === ie) return {};
+    const s = a / ie;
     return {
-      "--twd-shadow-sm": Pe(o.sm, s),
-      "--twd-shadow-md": Pe(o.md, s),
-      "--twd-shadow-lg": Pe(o.lg, s)
+      "--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:${it[o] ? Pe(it[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,
@@ -2027,8 +2111,8 @@ const Be = {
         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,
@@ -2036,160 +2120,160 @@ const Be = {
         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(qa(e, { section: "depth", key: "intensity", label: n, min: 0, max: 100, fallback: oe, 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));
   }
-}, so = (t) => Math.min(1, Math.max(0, t)), bn = (t) => Math.round(t / 50) * 50, lt = (t) => `${+t.toFixed(1)}%`;
-function Et(t = {}) {
-  return typeof t.bold == "number" && isFinite(t.bold) && t.bold !== 0.5 ? so(t.bold) : null;
+}, 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 Fe = (t, e, n) => (t.tokens(e) || {})[n] || F(n), io = {
+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 = Et(t.character);
-    if (e === null) return {};
-    const n = {}, a = 2 * e - 1, o = Math.max(0, a), s = Math.max(0, -a);
-    n["--twd-weight-heading"] = String(bn(600 + 200 * a)), n["--twd-weight-strong"] = String(bn(600 + 100 * a));
-    const r = Fe(Be, t, "--twd-border");
-    if (s && (n["--twd-border"] = `color-mix(in oklch, ${r} ${lt(100 - 50 * s)}, var(--twd-bg))`), o) {
-      n["--twd-border"] = `color-mix(in oklch, ${r} ${lt(100 - 90 * o)}, var(--twd-text))`;
-      const l = Fe(Be, t, "--twd-text-muted");
-      n["--twd-text-muted"] = `color-mix(in oklch, ${l} ${lt(100 - 35 * o)}, var(--twd-text))`, ["--twd-border-width", "--twd-border-width-container"].forEach((p) => {
-        const c = p === "--twd-border-width-container" ? Fe(vt, t, p) : F(p), h = parseFloat(c);
-        isNaN(h) || (n[p] = `${Math.round(h * (1 + o))}px`);
-      }), [[qn, "--twd-radius-control"], [vt, "--twd-radius-container"]].forEach(([p, c]) => {
-        const h = parseFloat(Fe(p, t, c));
-        !isNaN(h) && h < 999 && (n[c] = ye(`${h}px`, 1 - 0.5 * o));
+  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 : oe, p = s ? yt.tokens({ depth: { style: "soft", intensity: l * (1 - s) } }) : yt.tokens({ depth: { style: "bold", intensity: oe * 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
-}, lo = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>', co = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
-let po = 0;
-function uo({ label: t, options: e, onSelect: n, placeholder: a, onOpen: o }) {
-  const s = `twd-fonts-${++po}`, r = document.createElement("div");
+  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", s), i.innerHTML = `
     <span class="font-aa" aria-hidden="true">Aa</span>
     <span class="font-name"></span>
     <span class="font-fonts"></span>
-    <span class="font-chevron">${lo}</span>`;
+    <span class="font-chevron">${bo}</span>`;
   const l = document.createElement("div");
-  l.className = "font-menu", l.id = s, l.setAttribute("role", "listbox"), l.setAttribute("aria-label", t), l.hidden = !0;
-  const p = e.map((u) => {
-    const v = document.createElement("div");
-    return v.className = "font-option", v.setAttribute("role", "option"), v.tabIndex = -1, v.dataset.value = u.value, v.innerHTML = `
-      <span class="font-aa" style="font-family:${u.preview}" aria-hidden="true">Aa</span>
-      <span class="font-text"><span class="font-name">${u.name}</span><span class="font-fonts">${u.fonts}</span></span>
-      <span class="font-check">${co}</span>`, v.addEventListener("click", () => b(u.value)), v;
+  l.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), r.append(i, l);
-  let c = null;
-  function h(u) {
-    const v = e.find((E) => E.value === u), L = v || a || e[0];
-    c = v ? v.value : a ? null : e[0].value, i.querySelector(".font-name").textContent = L.name, i.querySelector(".font-fonts").textContent = L.fonts, i.querySelector(".font-aa").style.fontFamily = L.preview, i.setAttribute("aria-label", `${t}: ${L.name}, ${L.fonts}`), p.forEach((E) => E.setAttribute("aria-selected", String(E.dataset.value === c)));
+  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), r.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(r) || 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: r, 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', Ne = 'Georgia, "Times New Roman", serif', X = [
+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", ${Ne}`, 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", ${Ne}`, body: `"DM Sans", ${I}`, load: ["Playfair+Display:wght@600;700", "DM+Sans:wght@400;500;600;700"] },
-  { value: "plex", name: "Plex", fonts: "Plex Serif · Plex Sans", heading: `"IBM Plex Serif", ${Ne}`, body: `"IBM Plex Sans", ${I}`, load: ["IBM+Plex+Serif:wght@500;600;700", "IBM+Plex+Sans:wght@400;500;600"] },
-  { value: "elegant", name: "Elegant", fonts: "Instrument Serif · Inter", heading: `"Instrument Serif", ${Ne}`, body: `"Inter", ${I}`, load: ["Instrument+Serif", "Inter:wght@400;500;600;700"] },
+  { value: "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 }, xn = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4 }, wn = /* @__PURE__ */ new Set();
-function dt(t) {
-  const e = t.filter((a) => !wn.has(a));
-  if (!e.length) return;
-  e.forEach((a) => wn.add(a));
+], 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 ho = {
+const vo = {
   id: "typography",
   title: "Typography",
   hint: "Font pairing · base size · scale",
-  uses: ["--twd-font-heading", "--twd-font-body", ...Object.keys(xn).map((t) => `--twd-text-${t}`)],
-  tokens(t) {
-    const e = t.typography || {}, n = {}, a = X.find((o) => o.value === e.font);
-    if (a && (dt(a.load), n["--twd-font-heading"] = a.heading, n["--twd-font-body"] = a.body), e.base || e.scale) {
-      const o = Number(e.base) || 16, s = be[e.scale] || be.balanced;
-      Object.entries(xn).forEach(([r, i]) => {
+  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 = uo({
+    fonts(e, t, { label: n = "Fonts" } = {}) {
+      const a = U(n), o = yo({
         label: "Font pairing",
-        options: X.map((r) => ({ value: r.value, name: r.name, fonts: r.fonts, preview: r.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: () => dt([...new Set(X.flatMap((r) => r.load))]),
-        onSelect: (r) => e.setSection("typography", { font: r })
+        onOpen: () => ut([...new Set(J.flatMap((r) => r.load))]),
+        onSelect: (r) => t.setSection("typography", { font: r })
       });
       a.append(o.el);
-      const s = () => o.setValue((e.getState().typography || {}).font || null);
-      s(), e.onChange(s), t.append(a.el);
+      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,
@@ -2200,8 +2284,8 @@ const ho = {
     },
     // Tabbed layout: pairings as tiles, each "Aa" in its own heading font.
     // The fonts load (from Google Fonts) only once the tiles are on screen.
-    fontTiles(t, e, { label: n = "Fonts" } = {}) {
-      const a = (i) => i.replace(/"/g, "&quot;"), o = (i) => `<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`, s = V(e, {
+    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,
@@ -2209,165 +2293,165 @@ const ho = {
         className: "tiles-fonts",
         options: [
           { value: "default", label: "Prototype fonts", sub: "Default", preview: o(I), wide: !0 },
-          ...X.map((i) => ({ value: i.value, label: i.name, sub: i.fonts, preview: o(i.heading) }))
+          ...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" : X.find((l) => l.value === i)?.name || ""
+        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) && (dt([...new Set(X.flatMap((l) => l.load))]), r.disconnect());
+        i.some((l) => l.isIntersecting) && (ut([...new Set(J.flatMap((l) => l.load))]), r.disconnect());
       });
-      r.observe(s), t.append(s);
+      r.observe(s), e.append(s);
     },
-    scaleTiles(t, e, { label: n = "Scale" } = {}) {
+    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>`;
-      t.append(V(e, {
+      e.append(V(t, {
         section: "typography",
         key: "scale",
         label: n,
         fallback: "balanced",
-        options: Object.entries(be).map(([o, s]) => ({ value: o, label: o[0].toUpperCase() + o.slice(1), preview: a(s) })),
-        valueText: (o) => String(be[o])
+        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));
   }
-}, [vn, je] = wt;
-function fo(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 Vn(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 Re = (t) => t && t[0].toUpperCase() + t.slice(1), yn = [
-  ["colour", "Colour", (t) => {
-    const e = t.colour || {}, n = Ie.find((o) => o.primary === e.primary && o.neutral === e.neutral);
-    return { text: `${e.brand ? e.brand.toUpperCase() : n && !e.shade ? n.label : e.primary ? `${Re(e.primary)}${e.neutral ? ` · ${Re(e.neutral)}` : ""}` : "Prototype colours"}${e.mode === "dark" ? " · Dark" : ""}`, swatch: F("--twd-primary") };
+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: `${X.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: Vn(ae(t.density)) })],
-  ["shape", "Shape", (t) => ({ text: `${Re((t.buttons || {}).corners) || "Default"} corners` })],
-  ["shadows", "Shadows", (t) => ({ text: Re((t.depth || {}).style) || (Et(t.character) !== null ? "From the pad" : "Default") })]
-], go = {
-  summary(t, e, { label: n = "Current look", goTab: a } = {}) {
-    const o = B(n), s = document.createElement("div");
-    s.className = "summary", yn.forEach(([i, l]) => {
-      const p = document.createElement("button");
-      p.type = "button", p.className = "summary-row", p.dataset.summary = i, p.innerHTML = `<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`, p.querySelector(".summary-name").textContent = l, p.addEventListener("click", () => a && a(i)), s.append(p);
+  ["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 = e.getState();
-      yn.forEach(([l, , p]) => {
-        const c = s.querySelector(`[data-summary="${l}"]`), h = p(i);
-        c.querySelector(".summary-value").textContent = h.text;
-        const y = c.querySelector(".summary-swatch");
-        y.hidden = !h.swatch, h.swatch && (y.style.background = h.swatch);
+      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);
       });
     };
-    r(), e.onChange(r), t.append(o.el);
+    r(), t.onChange(r), e.append(o.el);
   },
-  character(t, e, { label: n = "Character" } = {}) {
-    const a = B(n), o = Da({
+  character(e, t, { label: n = "Character" } = {}) {
+    const a = U(n), o = Wa({
       label: n,
       ends: { top: "Spacious", bottom: "Compact", left: "Subtle", right: "Bold" },
       onInput: (r, i) => {
-        const l = +(je - i * (je - vn)).toFixed(3), p = +r.toFixed(3);
-        e.setSections({
+        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 s = () => {
-      const r = e.getState(), i = ae(r.density), l = Et(r.character), p = l === null ? 0.5 : l, c = `${Vn(i)} · ${fo(p)}`;
-      o.setValue(p, (je - i) / (je - vn), c), a.setValue(c);
+      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);
     };
-    s(), e.onChange(s), t.append(a.el);
+    s(), t.onChange(s), e.append(a.el);
   }
-}, ct = [
+}, 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 }
-], mo = [1, 2, 3, 4, 5, 6, 7, 8], bo = /^var\(\s*--twd-space-(\d)\s*\)$/, pt = (t) => {
-  const e = /^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());
-  return e ? +(parseFloat(e[1]) * (e[2] === "rem" ? 16 : 1)).toFixed(1) : null;
+], $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 xo(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 s = o.querySelector("select"), r = o.querySelector(".role-fixed"), i = r.querySelector("input"), l = o.querySelector(".token-reset"), p = () => (t.getState().custom || {})[e.key], c = () => {
-    const x = p();
-    if (x == null) return e.step ? { step: e.step } : { fixed: F(a) };
-    const b = bo.exec(x);
+  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;
+  }, 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 = pt(F(a));
-      h(b != null ? `${b}px` : F(a)), i.focus(), i.select();
+      const b = ft(F(a));
+      u(b != null ? `${b}px` : F(a)), i.focus(), i.select();
       return;
     }
     const x = `var(--twd-space-${s.value})`;
-    h(y(x) ? null : x);
+    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 (s.innerHTML = mo.map((u) => `<option value="${u}">space-${u} · ${pt(F(`--twd-space-${u}`)) ?? "?"}</option>`).join("") + '<option value="fixed">Fixed</option>', s.value = x.step ? String(x.step) : "fixed", r.hidden = !x.fixed, o.classList.toggle("is-fixed", !!x.fixed), x.fixed && o.getRootNode().activeElement !== i) {
-      const u = pt(x.fixed);
-      i.value = u != null ? String(u) : x.fixed;
+    const 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 wo = {
-  spacing(t, e, { label: n = "Roles" } = {}) {
-    const a = za(), o = B(n);
+const Mo = {
+  spacing(e, t, { label: n = "Roles" } = {}) {
+    const a = _a(), o = U(n);
     o.el.classList.add("token-field");
-    const s = ct.filter((l) => !a.has(`--twd-${l.key}`));
-    o.setValue(s.length === ct.length ? "not used on this page" : "");
+    const 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", ct.forEach((l) => r.append(xo(e, l, a.has(`--twd-${l.key}`)))), o.append(r), t.append(o.el);
+    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 = s.length ? `Only elements styled with these tokens change. Not used on this page: ${s.map((l) => l.label).join(", ")}.` : "Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.", t.append(i);
+    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"],
@@ -2407,18 +2491,18 @@ const wo = {
     ["depth", "intensity"],
     { more: "Shadow tokens", parts: [["custom", "shadows"]] }
   ] }
-], P = (t) => String(t).replace(/[&<>"]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[e]);
-function vo({ sections: t, store: e, view: n }) {
+], 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" }), s = (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>${ma}</style>
+    <style>${va}</style>
     <div class="pick-box" hidden><span class="pick-tag"></span></div>
     <div class="wrap">
       <div class="toast" role="status"></div>
@@ -2448,15 +2532,15 @@ function vo({ 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">
@@ -2472,168 +2556,168 @@ function vo({ sections: t, store: e, view: n }) {
       </div>
     </div>
   `;
-  const r = (d) => o.querySelector(d), i = r(".panel"), l = r(".launcher"), p = r(".toast"), c = { global: r('[data-view="global"]'), local: r('[data-view="local"]'), changes: r('[data-view="changes"]') }, h = r(".pick-box"), y = r(".pick-tag"), f = { getState: e.getState, setSection: e.setSection, setSections: e.setSections, onChange: e.onChange };
-  function m(d, g, w) {
+  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;
-        }), fe = ie({
+        }), be = ce({
           label: "View",
           options: w.tabs.map((j, z) => ({ value: String(z), label: j.label })),
           onSelect: (j) => {
-            fe.setValue(j), S.forEach((z, ea) => {
-              z.hidden = String(ea) !== j;
+            be.setValue(j), S.forEach((z, ra) => {
+              z.hidden = String(ra) !== j;
             });
           }
         });
-        fe.setValue("0"), S.forEach((j, z) => {
+        be.setValue("0"), S.forEach((j, z) => {
           j.hidden = z !== 0;
-        }), d.append(fe.el, ...S);
+        }), c.append(be.el, ...S);
         return;
       }
-      const [$, k, C = {}] = w, q = $ === "simple" ? go[k] : $ === "roles" ? wo[k] : x[$]?.parts?.[k];
-      q && q(d, f, { ...C, buttons: x.buttons, cards: x.cards, goTab: (S) => {
-        G("global"), E(S);
+      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 === ne("tab")) ? ne("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 Q = (d) => d.map((g) => `<div class="warning">${A.warn}<span>${P(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;
-    }), r('[data-action="changes"]').setAttribute("aria-pressed", String(d === "changes")), d !== "local" && Wn(), d === "changes" && Ht(), L();
-  }
-  E(v);
-  const Ve = "cubic-bezier(0.3, 0.7, 0.2, 1)", He = "cubic-bezier(0.2, 0.8, 0.2, 1)", Se = 640, de = 100, _e = 50, Hn = () => l.querySelector(".mark-knob"), _n = () => [l.querySelector(".mark-t1"), l.querySelector(".mark-t2")];
-  function Ct(d) {
+  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 = Hn(), [w, $] = _n(), k = (C) => `translateY(${C}px)`;
-    if (d) {
-      g.animate([{ transform: k(32) }, { transform: k(-6), offset: 0.78 }, { transform: k(0) }], { duration: Se, easing: Ve });
+    const 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: de * 2, delay: Se * 0.12, easing: Ve, fill: "backwards" }), w.animate(C, { duration: de * 2, delay: Se * 0.32 + _e, easing: Ve, fill: "backwards" });
+      $.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: de, easing: He }), $.animate(C, { duration: de, delay: _e / 2, easing: He, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Se * 0.7, delay: de + _e / 2, easing: He, fill: "backwards" });
+      w.animate(C, { duration: ue, easing: We }), $.animate(C, { duration: ue, delay: Ge / 2, easing: We, fill: "backwards" }), g.animate([{ transform: k(0) }, { transform: k(34), offset: 0.8 }, { transform: k(32) }], { duration: Ee * 0.7, delay: ue + Ge / 2, easing: We, fill: "backwards" });
     }
   }
-  const Mt = r(".wrap");
-  let Tt = !1;
-  function $e(d) {
-    Tt = d, i.classList.toggle("minimised", d), i.hidden || ge("panel", d ? "tabs" : "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 W({ animate: d = !0 } = {}) {
-    i.hidden && d && Ct(!0), i.hidden = !1, Mt.classList.add("is-open"), l.setAttribute("aria-expanded", "true"), l.setAttribute("aria-label", "Close Panel"), $e(!1);
+  function 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 Kn() {
-    i.hidden && W(), $e(!0);
+  function Zn() {
+    i.hidden && G(), Ce(!0);
   }
-  function Ke() {
-    i.hidden || Ct(!1), i.hidden = !0, Mt.classList.remove("is-open"), l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), ge("panel", "closed"), Ee();
+  function Xe() {
+    i.hidden || At(!1), i.hidden = !0, Ye.classList.remove("is-open"), l.setAttribute("aria-expanded", "false"), l.setAttribute("aria-label", "Open Panel"), oe("panel", "closed"), Te();
   }
-  function Ge() {
-    i.hidden ? W() : Ke();
+  function Me() {
+    i.hidden ? G() : Xe();
   }
-  let At;
-  function H(d) {
-    p.textContent = d, p.classList.add("show"), clearTimeout(At), At = setTimeout(() => p.classList.remove("show"), 1600);
+  let Ot;
+  function H(c) {
+    d.textContent = c, d.classList.add("show"), clearTimeout(Ot), Ot = setTimeout(() => d.classList.remove("show"), 1600);
   }
-  function ce(d, g) {
-    navigator.clipboard.writeText(d).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
+  function he(c, g) {
+    navigator.clipboard.writeText(c).then(() => H(g)).catch(() => H("Couldn’t copy — select the text and copy it instead"));
   }
-  let We = null;
-  function ee(d, g) {
-    if (We = d, !d) {
-      h.hidden = !0;
+  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 || xt(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 Lt = () => {
-    We && !h.hidden && ee(We, y.textContent);
+  const Ft = () => {
+    Ze && !u.hidden && te(Ze, v.textContent);
   };
-  window.addEventListener("scroll", Lt, !0), window.addEventListener("resize", Lt);
-  let pe = !1;
-  const Ot = r('[data-action="pick"]'), Pt = (d) => d.composedPath().includes(a);
-  function Ft(d) {
-    if (Pt(d)) return;
-    const g = d.target;
-    g && g.nodeType === 1 && g !== document.documentElement && g !== document.body && ee(g);
-  }
-  function Nt(d) {
-    if (Pt(d) || (d.preventDefault(), d.stopPropagation(), d.type !== "click")) return;
-    const g = d.target;
-    !g || g === document.documentElement || g === document.body || (Ee(), It(g));
-  }
-  function jt(d) {
-    d.key === "Escape" && (d.preventDefault(), Ee(), T && ee(T.el));
-  }
-  const Rt = ["pointerdown", "mousedown", "mouseup", "click"];
-  function zt() {
-    if (!pe) {
-      if (pe = !0, !document.getElementById("twiddle-picking")) {
-        const d = document.createElement("style");
-        d.id = "twiddle-picking", d.textContent = "html.twd-picking, html.twd-picking * { cursor: crosshair !important; }", document.head.appendChild(d);
+  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);
       }
-      W(), Ot.setAttribute("aria-pressed", "true"), document.documentElement.classList.add("twd-picking"), document.addEventListener("pointermove", Ft, !0), Rt.forEach((d) => document.addEventListener(d, Nt, !0)), document.addEventListener("keydown", jt, !0), H("Click an element · Esc to cancel");
+      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 Ee() {
-    pe && (pe = !1, Ot.setAttribute("aria-pressed", "false"), document.documentElement.classList.remove("twd-picking"), document.removeEventListener("pointermove", Ft, !0), Rt.forEach((d) => document.removeEventListener(d, Nt, !0)), document.removeEventListener("keydown", jt, !0), ee(T ? T.el : null));
+  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 T = null;
-  function Gn(d, g) {
+  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()
@@ -2641,262 +2725,263 @@ function vo({ sections: t, store: e, view: n }) {
       dispose: () => w.forEach(($) => $())
     };
   }
-  function It(d, g) {
-    const w = ka(d), $ = e.getState().scopes || {};
-    g || (g = !$[w.elementSelector] && w.classSelector && $[w.classSelector] ? "class" : "element"), T && T.dispose(), T = { el: d, info: w, target: g, dispose: () => {
-    } }, Ye(), G("local"), W(), ee(d);
+  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 Dt = () => T.target === "class" ? T.info.classSelector : T.info.elementSelector;
-  function Ye() {
+  const qt = () => T.target === "class" ? T.info.classSelector : T.info.elementSelector;
+  function Je() {
     T.dispose();
-    const { info: d } = T, g = t.filter((j) => (j.uses || []).some((z) => d.tokens.has(z))), w = c.local;
+    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>${P(xt(d.el))}</code>
-            ${d.text ? `<span class="muted">“${P(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 ? s(g) : '<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
-    `, d.classSelector) {
-      const j = ie({
+    `, 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), T.target = z, Ye();
+          z === "class" && t.moveScope(c.elementSelector, c.classSelector), T.target = z, Je();
         }
       });
       j.setValue(T.target), w.querySelector(".scope-target").append(j.el);
     }
-    const { ctx: $, dispose: k } = Gn(Dt(), 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 ? Oa(d.el) : null;
-      q.innerHTML = j ? Q([j]) : "";
+      const j = c.tokens.size ? Da(c.el) : null;
+      q.innerHTML = j ? ee([j]) : "";
     };
     S();
-    const fe = e.onChange(S);
+    const be = t.onChange(S);
     T.dispose = () => {
-      k(), fe();
+      k(), be();
     };
   }
-  function Bt() {
+  function Ht() {
     if (!T || !T.info.classSelector) return;
-    const d = e.getState().scopes || {}, g = T.target === "class" ? "element" : "class", w = g === "class" ? T.info.classSelector : T.info.elementSelector;
-    !d[Dt()] && d[w] && (T.target = g, Ye());
+    const 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 Ut = () => {
-    e.undo(), Bt();
-  }, qt = () => {
-    e.redo(), Bt();
+  const Vt = () => {
+    t.undo(), Ht();
+  }, _t = () => {
+    t.redo(), Ht();
   };
-  function Wn() {
-    T && (T.dispose(), T = null, c.local.innerHTML = "", ee(null));
-  }
-  const Vt = (d) => d.kind === "global" ? "Whole page" : d.kind === "class" ? `All ${d.selector}` : "One element";
-  function Ht() {
-    const d = an(e.getState(), t), g = Qe(), w = c.changes;
-    if (!d.length) {
-      w.innerHTML = `<div class="empty">No changes yet. Tweak a section, or pick an element to change it on its own.</div>${Q(g)}`;
+  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">${Q(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="${P(k)}" title="Select it on the page">${P(Vt(C[0]))}</button><code>${P(k)}</code>` : `<span>${Vt(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">
             <div class="change-main">
-              <div class="change-title">${P(q.title)} <span class="muted">›</span> ${q.settings.map((S) => `${P(S.label)}: <b>${P(S.value)}</b>`).join(", ")}</div>
-              ${q.tokens.map((S) => `<div class="change-token"><code>${P(S.name)}</code> ${S.from ? `${P(S.from)} → ` : ""}${P(S.to)}</div>`).join("")}
+              <div class="change-title">${O(q.title)} <span class="muted">›</span> ${q.settings.map((S) => `${O(S.label)}: <b>${O(S.value)}</b>`).join(", ")}</div>
+              ${q.tokens.map((S) => `<div class="change-token"><code>${O(S.name)}</code> ${S.from ? `${O(S.from)} → ` : ""}${O(S.to)}</div>`).join("")}
             </div>
-            <button class="icon-btn" data-remove="${P(q.sectionId)}" data-remove-scope="${P(k)}" aria-label="Remove ${P(q.title)} change">${A.close}</button>
+            <button class="icon-btn" data-remove="${O(q.sectionId)}" data-remove-scope="${O(k)}" aria-label="Remove ${O(q.title)} change">${A.close}</button>
           </div>`).join("")}
       </div>`).join("");
   }
-  function Yn(d, g) {
-    if (g) return e.removeScope(g, d);
-    const w = e.getState()[d] || {};
-    e.setSection(d, Object.fromEntries(Object.keys(w).map(($) => [$, null])));
+  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 ue = r(".apply-menu"), _t = r('[data-action="apply-menu"]'), Kt = () => ne("apply-mode") === "copy" ? "copy" : "preview";
-  function Zn() {
-    ue.querySelectorAll("[data-apply-mode]").forEach((d) => d.setAttribute("aria-checked", String(d.dataset.applyMode === Kt())));
+  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 Ce(d) {
-    ue.hidden = !d, _t.setAttribute("aria-expanded", String(d)), d && Zn();
+  function Ae(c) {
+    ge.hidden = !c, Gt.setAttribute("aria-expanded", String(c)), c && ta();
   }
-  function Gt() {
-    return Ma(an(e.getState(), t), { warnings: Qe() });
+  function Xt() {
+    return ja(ln(t.getState(), e), { warnings: nt() });
   }
-  const Me = r(".dialog-backdrop"), Wt = r(".prompt-text");
-  function Xn() {
-    const d = Gt();
-    if (!d) return H("No changes to copy yet");
-    if (Kt() === "copy") return ce(d, "Prompt copied · paste it into your agent");
-    Wt.value = d, Me.hidden = !1, r('[data-action="dialog-copy"]').focus();
+  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 Ze() {
-    Me.hidden = !0, r('[data-action="apply"]').focus();
+  function Qe() {
+    Le.hidden = !0, r('[data-action="apply"]').focus();
   }
-  const te = r('[data-action="compare"]'), Jn = r(".original-pill");
-  function Te(d) {
-    d ? n.suspend() : n.resume(), te.setAttribute("aria-pressed", String(d)), Jn.hidden = !d;
+  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 Yt = null, he = !1;
-  te.addEventListener("pointerdown", () => {
-    he = !1, Yt = setTimeout(() => {
-      he = !0, Te(!0);
+  let Jt = null, me = !1;
+  ne.addEventListener("pointerdown", () => {
+    me = !1, Jt = setTimeout(() => {
+      me = !0, Pe(!0);
     }, 180);
   });
-  const Zt = () => {
-    clearTimeout(Yt), he && (Te(!1), he = !1);
+  const Qt = () => {
+    clearTimeout(Jt), me && (Pe(!1), me = !1);
   };
-  te.addEventListener("pointerup", Zt), te.addEventListener("pointerleave", Zt);
-  const Ae = r(".setup-hint"), Xt = `setup-hint-dismissed:${location.pathname}`, Qn = {
+  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: cn,
-      link: `${dn}/#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: Ia,
-      link: `${dn}/#tokens`
+      text2copy: Ka,
+      link: `${hn}/#tokens`
     }
   };
   let D = null;
-  function Le() {
-    const d = Ra();
-    D = ne(Xt) === d ? null : Qn[d] || null, l.toggleAttribute("data-hint", !!D), Ae.hidden = !D, D && (Ae.innerHTML = `
-      <div class="setup-head">${A.warn}<b>${P(D.title)}</b>
+  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>
-      <p>${P(D.text)}</p>
+      <p>${O(D.text)}</p>
       ${(D.snippets || []).map((g, w) => `
         <div class="setup-snippet">
-          <span>${P(g.label)}</span>
-          <div class="setup-code"><code>${P(g.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
+          <span>${O(g.label)}</span>
+          <div class="setup-code"><code>${O(g.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
         </div>`).join("")}
       <div class="setup-actions">
-        ${D.copy ? `<button class="apply-btn" data-action="setup-copy">${P(D.copy)}</button>` : ""}
+        ${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>`, Ae.dataset.status = d);
-  }
-  Le(), document.readyState !== "complete" && window.addEventListener("load", Le, { once: !0 }), setTimeout(Le, 1500);
-  const Jt = r(".badge");
-  function Qt() {
-    r('[data-action="undo"]').disabled = !e.canUndo(), r('[data-action="redo"]').disabled = !e.canRedo();
-    const d = Ea(e.getState());
-    Jt.textContent = d, Jt.hidden = !d;
-    const g = Q(Qe());
-    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" && Ht();
+    }), K === "changes" && Wt();
   }
-  return e.onChange(Qt), Qt(), o.addEventListener("click", (d) => {
-    if (d.target === Me) return Ze();
-    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 !== _t && !ue.contains(g) && Ce(!1), g === l) return Ge();
+      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 ? It(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 ce(cn[g.dataset.setupSnippet].code, "Copied");
+      if (g.dataset.setupSnippet) return he(fn[g.dataset.setupSnippet].code, "Copied");
       if (g.dataset.tab)
-        return G("global"), Tt && $e(!1), E(g.dataset.tab);
-      if (g.dataset.remove) return Yn(g.dataset.remove, g.dataset.removeScope);
+        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), Ce(!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 Ke();
+          return Xe();
         case "minimise":
-          return Kn(), (o.querySelector('.tab[aria-pressed="true"]') || u[0]).focus();
+          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 ce(location.href, "Link copied");
+          return he(location.href, "Link copied");
         case "pick":
-          return pe ? Ee() : zt();
+          return fe ? Te() : Ut();
         case "compare":
-          he || Te(te.getAttribute("aria-pressed") !== "true");
+          me || Pe(ne.getAttribute("aria-pressed") !== "true");
           return;
         case "undo":
-          return Ut();
+          return Vt();
         case "redo":
-          return qt();
+          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 Xn();
+          return na();
         case "apply-menu":
-          return Ce(ue.hidden);
+          return Ae(ge.hidden);
         case "dialog-close":
-          return Ze();
+          return Qe();
         case "dialog-copy":
-          return ce(Wt.value, "Prompt copied · paste it into your agent");
+          return he(Zt.value, "Prompt copied · paste it into your agent");
         case "setup-copy":
-          return D && ce(D.text2copy, D.copied);
+          return D && he(D.text2copy, D.copied);
         case "setup-dismiss":
-          return ge(Xt, Ae.dataset.status), Le();
+          return oe(en, Oe.dataset.status), Fe();
       }
     }
-  }), o.addEventListener("keydown", (d) => {
-    if (d.key === "Escape") {
-      if (!Me.hidden) return Ze();
-      if (!ue.hidden) return Ce(!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 ? qt() : Ut());
-  }), document.addEventListener("keydown", (d) => {
-    d.altKey && (d.code === "KeyT" && (d.preventDefault(), Ge()), d.code === "KeyC" && (d.preventDefault(), Te(te.getAttribute("aria-pressed") !== "true")));
-  }), ne("panel") === "open" ? W({ animate: !1 }) : ne("panel") === "tabs" && (W({ animate: !1 }), $e(!0)), { open: W, close: Ke, toggle: Ge, toast: H, pick: zt, prompt: Gt };
+    !(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 kn = [ho, Be, qn, vt, Ga, yt, io, Ka], yo = ':root{--twd-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--twd-text-xs: .694rem;--twd-text-sm: .833rem;--twd-text-base: 1rem;--twd-text-lg: 1.2rem;--twd-text-xl: 1.44rem;--twd-text-2xl: 1.728rem;--twd-text-3xl: 2.074rem;--twd-leading-tight: 1.2;--twd-leading-normal: 1.5;--twd-weight-heading: 600;--twd-weight-strong: 600;--twd-bg: #fafafa;--twd-surface: #ffffff;--twd-surface-raised: #ffffff;--twd-text: #18181b;--twd-text-muted: #71717a;--twd-border: #e4e4e7;--twd-primary: #4f46e5;--twd-primary-hover: #4338ca;--twd-on-primary: #ffffff;--twd-focus: #6366f1;--twd-success: #16a34a;--twd-warning: #d97706;--twd-danger: #dc2626;--twd-radius-control: 8px;--twd-radius-container: 12px;--twd-space-1: 4px;--twd-space-2: 8px;--twd-space-3: 12px;--twd-space-4: 16px;--twd-space-5: 24px;--twd-space-6: 32px;--twd-space-7: 48px;--twd-space-8: 64px;--twd-control-height: 40px;--twd-control-pad-x: 16px;--twd-page-pad: var(--twd-space-5);--twd-section-gap: var(--twd-space-6);--twd-card-pad: var(--twd-space-5);--twd-card-gap: var(--twd-space-2);--twd-control-gap: var(--twd-space-3);--twd-border-width: 1px;--twd-border-width-container: var(--twd-border-width);--twd-shadow-sm: 0 1px 2px rgb(0 0 0 / .06);--twd-shadow-md: 0 4px 12px rgb(0 0 0 / .08);--twd-shadow-lg: 0 12px 32px rgb(0 0 0 / .12);--twd-button-bg: var(--twd-primary);--twd-button-fg: var(--twd-on-primary);--twd-button-border: transparent;--twd-button-hover: var(--twd-primary-hover);--twd-card-bg: var(--twd-surface);--twd-card-border: var(--twd-border);--twd-card-shadow: var(--twd-shadow-sm)}';
-function ko() {
+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 = yo, document.head.prepend(e);
+  const t = document.createElement("style");
+  t.id = "twiddle-tokens", t.textContent = Ao, document.head.prepend(t);
 }
 if (!window.Twiddle) {
-  ko(), kn.forEach((n) => ca(n.tokens)), Mn(mt);
-  let t;
-  const e = () => {
-    mt(ht()), t = vo({ sections: kn, store: da, view: { suspend: fa, resume: ga } });
+  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: () => $n(),
-    undo: () => En(),
-    redo: () => Cn(),
-    pick: () => t && t.pick(),
-    prompt: () => t ? t.prompt() : "",
-    getState: ht
+  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 So = window.Twiddle;
+const Po = window.Twiddle;
 export {
-  So as Twiddle
+  Po as Twiddle
 };