twiddle-panel 0.7.0 → 0.7.1

package/dist/twiddle.js

@@ -1,8 +1,8 @@
-var TwiddleBundle=(function(qe){"use strict";const Ve=new Set;let T=qn(),K=[],ie=[],Se=null,Ct=0;function qn(){const t=new URLSearchParams(location.search).get("twd");if(!t)return{};try{return JSON.parse(t)}catch{return{}}}function Vn(){const t=new URL(location.href);Object.keys(T).length?t.searchParams.set("twd",JSON.stringify(T)):t.searchParams.delete("twd"),history.replaceState(history.state,"",t)}function He(){Vn(),Ve.forEach(t=>t(T))}function J(t,e){if(JSON.stringify(t)===JSON.stringify(T))return;const n=Date.now();e&&e===Se&&n-Ct<400||(K.push(T),K.length>100&&K.shift()),ie=[],Se=e,Ct=n,T=t,He()}function $e(t,e){const n={...t,...e};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 _e(){return JSON.parse(JSON.stringify(T))}function Hn(t,e){J(U(T,t,$e(T[t],e)),`${t}:${Object.keys(e)}`)}function _n(t,e=`multi:${Object.keys(t)}`){const n=Object.entries(t).reduce((a,[o,r])=>U(a,o,$e(a[o],r)),T);J(n,e)}function Tt(t,e,n){const a=U(T.scopes?.[t],e,$e(T.scopes?.[t]?.[e],n)),o=U(T.scopes,t,Object.keys(a).length?a:null);J(U(T,"scopes",Object.keys(o).length?o:null),`${t}|${e}:${Object.keys(n)}`)}function Kn(t,e){if(e)return Tt(t,e,Object.fromEntries(Object.keys(T.scopes?.[t]?.[e]||{}).map(a=>[a,null])));const n=U(T.scopes,t,null);J(U(T,"scopes",Object.keys(n).length?n:null))}function Gn(t,e){const n=T.scopes?.[t];if(!n||t===e)return;let a={...T.scopes[e]};Object.entries(n).forEach(([r,s])=>{a=U(a,r,$e(a[r],s))});const o=U(U(T.scopes,t,null),e,a);J(U(T,"scopes",o))}function Mt(){J({})}function At(){K.length&&(ie.push(T),T=K.pop(),Se=null,He())}function Lt(){ie.length&&(K.push(T),T=ie.pop(),Se=null,He())}const Wn=()=>K.length>0,Yn=()=>ie.length>0;function Pt(t){return Ve.add(t),()=>Ve.delete(t)}const Zn=Object.freeze(Object.defineProperty({__proto__:null,canRedo:Yn,canUndo:Wn,getState:_e,moveScope:Gn,onChange:Pt,redo:Lt,removeScope:Kn,resetState:Mt,setScope:Tt,setSection:Hn,setSections:_n,undo:At},Symbol.toStringTag,{value:"Module"})),Ot=[];let Ke=[],Ge={},R=null,Q=!1,Ft={};function Xn(t){typeof t=="function"&&Ot.push(t)}const Nt=t=>Object.assign({},...Ot.map(e=>e(t)||{})),We=t=>/^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t),Jn=t=>{try{return document.querySelector(t),!0}catch{return!1}};function Qn(){return(!R||!R.isConnected)&&(R=document.createElement("style"),R.id="twiddle-scoped",document.head.appendChild(R)),R}function jt(){const t=document.documentElement;Ke.forEach(e=>t.style.removeProperty(e)),Ke=[],Ge={}}function Ye(t){if(Ft=t,Q)return;const e=document.documentElement;jt();const n=Nt(t),a=Object.entries(t.scopes||{}).filter(([r])=>Jn(r)).sort(([r],[s])=>We(s)-We(r)).map(([r,s])=>[r,Nt(s)]);Object.entries(n).forEach(([r,s])=>e.style.setProperty(r,s)),Ke=Object.keys(n),Ge=n;const o=a.filter(([,r])=>Object.keys(r).length).map(([r,s])=>`${r} {
-${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
+var TwiddleBundle=(function(Ve){"use strict";const He=new Set;let M=_n(),K=[],de=[],Se=null,Mt=0;function _n(){const t=new URLSearchParams(location.search).get("twd");if(!t)return{};try{return JSON.parse(t)}catch{return{}}}function Kn(){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 _e(){Kn(),He.forEach(t=>t(M))}function Q(t,e){if(JSON.stringify(t)===JSON.stringify(M))return;const n=Date.now();e&&e===Se&&n-Mt<400||(K.push(M),K.length>100&&K.shift()),de=[],Se=e,Mt=n,M=t,_e()}function $e(t,e){const n={...t,...e};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 Ke(){return JSON.parse(JSON.stringify(M))}function Gn(t,e){Q(U(M,t,$e(M[t],e)),`${t}:${Object.keys(e)}`)}function Wn(t,e=`multi:${Object.keys(t)}`){const n=Object.entries(t).reduce((a,[o,s])=>U(a,o,$e(a[o],s)),M);Q(n,e)}function Tt(t,e,n){const a=U(M.scopes?.[t],e,$e(M.scopes?.[t]?.[e],n)),o=U(M.scopes,t,Object.keys(a).length?a:null);Q(U(M,"scopes",Object.keys(o).length?o:null),`${t}|${e}:${Object.keys(n)}`)}function Yn(t,e){if(e)return Tt(t,e,Object.fromEntries(Object.keys(M.scopes?.[t]?.[e]||{}).map(a=>[a,null])));const n=U(M.scopes,t,null);Q(U(M,"scopes",Object.keys(n).length?n:null))}function Zn(t,e){const n=M.scopes?.[t];if(!n||t===e)return;let a={...M.scopes[e]};Object.entries(n).forEach(([s,r])=>{a=U(a,s,$e(a[s],r))});const o=U(U(M.scopes,t,null),e,a);Q(U(M,"scopes",o))}function At(){Q({})}function Lt(){K.length&&(de.push(M),M=K.pop(),Se=null,_e())}function Ot(){de.length&&(K.push(M),M=de.pop(),Se=null,_e())}const Xn=()=>K.length>0,Jn=()=>de.length>0;function Pt(t){return He.add(t),()=>He.delete(t)}const Qn=Object.freeze(Object.defineProperty({__proto__:null,canRedo:Jn,canUndo:Xn,getState:Ke,moveScope:Zn,onChange:Pt,redo:Ot,removeScope:Yn,resetState:At,setScope:Tt,setSection:Gn,setSections:Wn,undo:Lt},Symbol.toStringTag,{value:"Module"})),Ft=[];let Ge=[],We={},R=null,ee=!1,Nt={};function ea(t){typeof t=="function"&&Ft.push(t)}const jt=t=>Object.assign({},...Ft.map(e=>e(t)||{})),Ye=t=>/^(\.[\w-]+|\[data-twd="[^"]+"\])$/.test(t),ta=t=>{try{return document.querySelector(t),!0}catch{return!1}};function na(){return(!R||!R.isConnected)&&(R=document.createElement("style"),R.id="twiddle-scoped",document.head.appendChild(R)),R}function Rt(){const t=document.documentElement;Ge.forEach(e=>t.style.removeProperty(e)),Ge=[],We={}}function Ze(t){if(Nt=t,ee)return;const e=document.documentElement;Rt();const n=jt(t),a=Object.entries(t.scopes||{}).filter(([s])=>ta(s)).sort(([s],[r])=>Ye(r)-Ye(s)).map(([s,r])=>[s,jt(r)]);Object.entries(n).forEach(([s,r])=>e.style.setProperty(s,r)),Ge=Object.keys(n),We=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)&&(Qn().textContent=o)}function Rt(t){const e=document.documentElement,n=Q,a={...Ge};Object.keys(a).forEach(o=>e.style.removeProperty(o)),R&&(R.disabled=!0);try{return t()}finally{n||(Object.entries(a).forEach(([o,r])=>e.style.setProperty(o,r)),R&&(R.disabled=!1))}}function ea(t,e=document.documentElement){return Rt(()=>{const n=getComputedStyle(e);return Object.fromEntries(t.map(a=>[a,n.getPropertyValue(a).trim()]))})}function ta(){Q||(jt(),R&&(R.disabled=!0),Q=!0)}function na(){Q&&(Q=!1,R&&(R.disabled=!1),Ye(Ft))}const aa=`
+`);(o||R)&&(na().textContent=o)}function zt(t){const e=document.documentElement,n=ee,a={...We};Object.keys(a).forEach(o=>e.style.removeProperty(o)),R&&(R.disabled=!0);try{return t()}finally{n||(Object.entries(a).forEach(([o,s])=>e.style.setProperty(o,s)),R&&(R.disabled=!1))}}function aa(t,e=document.documentElement){return zt(()=>{const n=getComputedStyle(e);return Object.fromEntries(t.map(a=>[a,n.getPropertyValue(a).trim()]))})}function oa(){ee||(Rt(),R&&(R.disabled=!0),ee=!0)}function ra(){ee&&(ee=!1,R&&(R.disabled=!1),Ze(Nt))}const sa=`
   :host { all: initial; }  /* block fonts/colours inherited from the page */
   * { box-sizing: border-box; }
 
@@ -23,8 +23,10 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
     z-index: 2147483647;
     font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     color: var(--p-fg);
+    /* The panel opens to the left of the launcher, bottoms aligned,
+       so it can use the full window height. */
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-end;
     gap: 10px;
   }
@@ -56,6 +58,11 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
     cursor: pointer;
     padding: 0;
   }
+  /* Open or minimised: centred on the tabs. 10px = panel border 1 + tab bar
+     padding 6 + half a tab (~49px) − half the launcher (22). */
+  .launcher { transition: margin-bottom .2s cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .wrap.is-open .launcher { margin-bottom: 10px; }
+  @media (prefers-reduced-motion: reduce) { .launcher { transition: none; } }
   .mark { display: block; overflow: visible; }
   .mark-disc { fill: #16161a; }
   .mark-knob { fill: #4f46e5; }
@@ -72,11 +79,12 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
   /* Panel */
   .panel {
     width: 360px; /* tabbed layout (Figma 254:323); was 300 */
-    max-width: calc(100vw - 32px);
+    /* 86px = 16 + 16 margins + 44 launcher + 10 gap */
+    max-width: calc(100vw - 86px);
     /* As tall as its content; scrolls only when the window is shorter.
-       90px = 16 margin + 44 launcher + 10 gap + 20 room at the top. */
-    max-height: calc(100vh - 90px);
-    max-height: calc(100dvh - 90px);
+       32px = 16 margin below + 16 room at the top. */
+    max-height: calc(100vh - 32px);
+    max-height: calc(100dvh - 32px);
     background: var(--p-bg);
     border: 1px solid var(--p-line);
     border-radius: 14px;
@@ -303,8 +311,9 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
     padding: 1px 4px;
   }
 
-  /* Beside the launcher (left of it, centred on it). The panel always sits
-     above the launcher, so a toast here never covers the footer's Copy prompt. */
+  /* Closed: beside the launcher (left of it, centred on it). Open or minimised:
+     the panel takes that spot, so the toast floats just above the tab bar
+     (63px tall), inside the panel's right edge. */
   .toast {
     position: absolute; bottom: 22px; right: 54px; transform: translateY(50%);
     background: var(--p-accent); color: var(--p-on-accent);
@@ -313,6 +322,7 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
     opacity: 0; transition: opacity .15s ease; pointer-events: none;
   }
   .toast.show { opacity: 1; }
+  .wrap.is-open .toast { bottom: 72px; right: 62px; transform: none; z-index: 3; }
 
   /* ---------- Proposals below: not yet designed in Figma ---------- */
 
@@ -623,6 +633,11 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
   .tab:hover { background: var(--p-hover); color: var(--p-fg); }
   .tab[aria-pressed="true"] { background: var(--p-hover); color: var(--p-fg); font-weight: 600; }
   .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* Minimised (proposal, not yet in Figma): only the tab bar (and the Compare
+     strip while it shows); clicking a tab opens the panel on that tab. */
+  .panel.minimised > :not(.tabbar):not(.original-pill) { display: none; }
+  .panel.minimised .tabbar { border-top: 0; }
   .page-fields { gap: 16px; }
   .page-heading { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--p-fg); margin-bottom: -6px; }
   .page-heading .muted { font-size: 12px; font-weight: 400; }
@@ -731,8 +746,8 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
   .summary-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
   .summary-swatch[hidden] { display: none; }
   .summary-row .chev { display: grid; color: var(--p-muted); }
-`,P=(t,e,n)=>`<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${n}</svg>`,A={dial:P(20,1.8,'<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),link:P(15,2,'<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),reset:P(15,2,'<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),close:P(15,2,'<path d="M18 6L6 18M6 6l12 12"/>'),chevron:P(12,2.4,'<path d="M9 6l6 6-6 6"/>'),pick:P(15,2,'<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),compare:P(15,2,'<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),undo:P(15,2,'<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),redo:P(15,2,'<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),back:P(15,2,'<path d="M15 18l-6-6 6-6"/>'),down:P(12,2.4,'<path d="M6 9l6 6 6-6"/>'),copy:P(13,2,'<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),warn:P(13,2,'<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),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>',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"/>')},zt="twiddle:";function le(t){try{return localStorage.getItem(zt+t)}catch{return null}}function de(t,e){try{localStorage.setItem(zt+t,e)}catch{}}function ee({label:t,options:e,onSelect:n}){const a=document.createElement("div");a.className="seg",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",t);const o=e.map(l=>{const p=document.createElement("button");return p.type="button",p.setAttribute("role","radio"),p.dataset.value=l.value,p.textContent=l.label,l.title&&(p.title=l.title),p.addEventListener("click",()=>i(l.value)),p});a.append(...o);let r=null;function s(l){r=l,o.forEach(c=>c.setAttribute("aria-checked",String(c.dataset.value===l)));const p=Math.max(0,o.findIndex(c=>c.dataset.value===l));o.forEach((c,h)=>{c.tabIndex=h===p?0:-1})}function i(l,p){l!==r&&(s(l),n(l)),p&&o.find(c=>c.dataset.value===l).focus()}return a.addEventListener("keydown",l=>{const p=o.indexOf(l.target);if(p<0)return;const c={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[l.key];let h;if(c)h=(p+c+o.length)%o.length;else if(l.key==="Home")h=0;else if(l.key==="End")h=o.length-1;else return;l.preventDefault(),i(o[h].dataset.value,!0)}),s(null),{el:a,setValue:s}}const It=/var\(\s*(--twd-[\w-]+)/g,oa=/::?[\w-]+(\([^)]*\))?/g;function*Ee(t){for(const e of t)e.selectorText!=null&&(yield e),e.cssRules&&(yield*Ee(e.cssRules))}function ra(){const t=[];for(const e of document.styleSheets){if(e.ownerNode?.id==="twiddle-scoped")continue;let n;try{n=e.cssRules}catch{continue}for(const a of Ee(n)){const o=[...a.style.cssText.matchAll(It)].map(r=>r[1]);o.length&&t.push({selectors:a.selectorText.split(","),vars:o})}}return t}function sa(t,e){const n=e.replace(oa,"").trim()||"*";try{return t.matches(n)}catch{return!1}}function Dt(t){const e=new Set,n=[];return ra().forEach(({selectors:a,vars:o})=>{const r=a.find(s=>sa(t,s));r&&(o.forEach(s=>e.add(s)),n.push(r.trim()))}),[...(t.getAttribute("style")||"").matchAll(It)].forEach(a=>e.add(a[1])),{names:e,selectors:n}}const Ze=t=>window.CSS&&CSS.escape?CSS.escape(t):t;function ia(t){const e=[];let n=t;for(;n&&n.nodeType===1&&n!==document.body&&n!==document.documentElement;){if(n.id&&document.querySelectorAll(`#${Ze(n.id)}`).length===1)return e.unshift(`#${Ze(n.id)}`),e.join(" > ");const a=n.localName,o=[...n.parentElement.children].filter(r=>r.localName===a);e.unshift(o.length>1?`${a}:nth-of-type(${o.indexOf(n)+1})`:a),n=n.parentElement}return["body",...e].join(" > ")}function la(t,e=Dt(t).selectors){const n=t.getAttribute("data-twd");if(n)return`[data-twd="${n.replace(/"/g,"")}"]`;const a=[...t.classList],r=a.find(s=>e.some(i=>new RegExp(`\\.${s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}(?![\\w-])`).test(i)))||a[0];return r?`.${Ze(r)}`:null}function da(t){const e=Dt(t),n=la(t,e.selectors),a=(t.getAttribute("aria-label")||t.placeholder||t.textContent||"").trim().replace(/\s+/g," ");return{el:t,tag:t.localName,classes:[...t.classList],text:a.length>40?`${a.slice(0,40)}…`:a,tokens:e.names,elementSelector:ia(t),classSelector:n,classCount:n?document.querySelectorAll(n).length:0}}const Xe=t=>t.localName+[...t.classList].map(e=>`.${e}`).join(""),ca={radius:"px",intensity:"%",base:"px"},Bt=t=>t.charAt(0).toUpperCase()+t.slice(1),pa=(t,e)=>typeof e=="number"||/^\d+$/.test(e)?`${e}${ca[t]||""}`:Bt(String(e));function Ut(t,e,n){const a=Rt(()=>t.tokens({[t.id]:e})||{}),o=Object.keys(a);let r={};if(o.length){const s=n.selector?document.querySelector(n.selector):void 0;r=ea(o,s||void 0)}return{...n,sectionId:t.id,title:t.title,settings:Object.entries(e).map(([s,i])=>({key:s,label:Bt(s),value:pa(s,i),...t.describe?.(s,i)||{}})),tokens:o.map(s=>({name:s,from:r[s]||"",to:a[s]}))}}function qt(t,e){const n=[];return e.forEach(a=>{t[a.id]&&n.push(Ut(a,t[a.id],{kind:"global",selector:null}))}),Object.entries(t.scopes||{}).forEach(([a,o])=>{const r=We(a)?"class":"element";e.forEach(s=>{o[s.id]&&n.push(Ut(s,o[s.id],{kind:r,selector:a}))})}),n}function ua(t){const e=o=>Object.values(o||{}).reduce((r,s)=>r+Object.keys(s||{}).length,0),{scopes:n,...a}=t;return e(a)+Object.values(n||{}).reduce((o,r)=>o+e(r),0)}const te=t=>`\`${t}\``,Je=t=>t.map(e=>`  - ${te(e.name)}: ${e.from?`${te(e.from)} → `:""}${te(e.to)}`),Qe=t=>`${t.title} › ${t.settings.map(e=>`${e.label}: ${e.value}`).join(", ")}`;function ha(t){let e=null;try{e=document.querySelector(t)}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`${te(Xe(e))}${n?` with text “${n}”`:""}`}function Vt(t,e){const n=new Map;return t.forEach(a=>{const o=a[e];n.has(o)||n.set(o,[]),n.get(o).push(a)}),[...n]}function fa(t,{link:e=location.href,warnings:n=[]}={}){if(!t.length)return"";const a=t.filter(i=>i.kind==="global"),o=t.filter(i=>i.kind==="class"),r=t.filter(i=>i.kind==="element"),s=[];if(s.push("# Apply design tweaks from Panel","","I explored design changes to this prototype with Panel (by Twiddle), a tweak panel that overrides the prototype's `--twd-*` CSS custom properties (design tokens) at runtime. Make these changes permanent in the source code.","",`Preview of the tweaked version: ${e}`),a.length&&(s.push("","## 1. Global token changes","","Update the default value of each token where it is defined (usually a `:root` rule or a `tokens.css` / `twiddle-tokens.css` file). Change the definition, not the places that use it.",""),a.forEach(i=>s.push(`- **${Qe(i)}**`,...Je(i.tokens)))),o.length&&(s.push("",`## ${a.length?2:1}. Component-wide changes`,"","These apply to every element matching the selector. In the CSS rule for that component, redeclare the token, e.g. `.input { --twd-radius-control: 999px; }`. Don't replace the `var(--twd-…)` usages with fixed values.",""),Vt(o,"selector").forEach(([i,l])=>{s.push(`- ${te(i)} (${document.querySelectorAll(i).length} on this page)`),l.forEach(p=>s.push(`  - **${Qe(p)}**`,...Je(p.tokens).map(c=>`  ${c}`)))})),r.length){const i=1+(a.length?1:0)+(o.length?1:0);s.push("",`## ${i}. Single-element changes`,"","These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",""),Vt(r,"selector").forEach(([l,p])=>{s.push(`- ${ha(l)}, found at ${te(l)}`),p.forEach(c=>s.push(`  - **${Qe(c)}**`,...Je(c.tokens).map(h=>`  ${h}`)))})}return n.length&&s.push("","## Contrast to check","","Panel flagged these colour pairs as below WCAG AA with the new values:","",...n.map(i=>`- ${i.text}`)),s.push("","## Constraints","","- Keep styling through the `--twd-*` tokens; don't hard-code the new values in component rules.","- Change only what is listed above.","- If a value uses `color-mix()` and the project targets older browsers, ask before converting it.","- When done, list the files you changed."),s.join(`
-`)}const Ce=4.5,ga=3,ma=[["--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 G;function et(t){if(!t||(G||=Object.assign(document.createElement("canvas"),{width:1,height:1}).getContext("2d",{willReadFrequently:!0}),!G))return null;G.clearRect(0,0,1,1),G.fillStyle="#000",G.fillStyle=t,G.fillRect(0,0,1,1);const[e,n,a,o]=G.getImageData(0,0,1,1).data;return[e,n,a,o/255]}function Ht(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(),et(n)}const _t=([t,e,n])=>{const a=o=>(o/=255,o<=.03928?o/12.92:((o+.055)/1.055)**2.4);return .2126*a(t)+.7152*a(e)+.0722*a(n)},Kt=(t,e)=>t.slice(0,3).map((n,a)=>n*t[3]+e[a]*(1-t[3])).concat(1);function Gt(t,e){const n=_t(t[3]<1?Kt(t,e):t),a=_t(e);return(Math.max(n,a)+.05)/(Math.min(n,a)+.05)}const Wt=t=>`${t.toFixed(1)}:1`;function tt(){const t=[];return ma.forEach(([e,n,a])=>{const o=Ht(e),r=Ht(n);if(!o||!r||r[3]===0)return;const s=Gt(o,r);s<Ce&&t.push({label:a,ratio:s,needed:Ce,text:`${a}: ${Wt(s)} · AA needs ${Ce}`})}),t}function ba(t){const e=[];for(let n=t;n&&n.nodeType===1;n=n.parentElement){const a=et(getComputedStyle(n).backgroundColor);if(a&&a[3]>0&&(e.push(a),a[3]>=1))break}return e.reduceRight((n,a)=>Kt(a,n),[255,255,255,1])}function xa(t){if(!t.textContent.trim()&&!t.placeholder)return null;const e=getComputedStyle(t),n=et(e.color);if(!n)return null;const a=parseFloat(e.fontSize),r=a>=24||a>=18.66&&parseInt(e.fontWeight,10)>=700?ga:Ce,s=Gt(n,ba(t));return s<r?{label:"This element",ratio:s,needed:r,text:`This element’s text: ${Wt(s)} · AA needs ${r}`}:null}const Yt="twiddle-panel",wa="0.7.0",Zt="https://panel.twiddle.in",va="--twd-radius-control",ya=/var\(\s*--twd-/;function ka(t){return t.style.cssText.split(";").some(e=>{const n=e.slice(0,e.indexOf(":")).trim();return n&&!n.startsWith("--")&&ya.test(e)})}function Sa(){if(!getComputedStyle(document.documentElement).getPropertyValue(va).trim())return"no-tokens";let t=!1;for(const e of document.styleSheets){if(e.ownerNode?.id==="twiddle-scoped")continue;let n;try{n=e.cssRules}catch{t=!0;continue}for(const a of Ee(n))if(ka(a))return"ok"}return document.querySelector('[style*="var(--twd-"]')?"ok":t?"unknown":"unused"}function $a(){const t=new Set,e=n=>{for(const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g))t.add(a[1])};for(const n of document.styleSheets){if(n.ownerNode?.id==="twiddle-scoped")continue;let a;try{a=n.cssRules}catch{continue}for(const o of Ee(a))o.style.cssText.split(";").forEach(r=>{const s=r.slice(0,r.indexOf(":")).trim();s&&!s.startsWith("--")&&e(r)})}return document.querySelectorAll('[style*="var(--twd-"]').forEach(n=>e(n.getAttribute("style"))),t}const Xt=[{label:"With a build tool, in your entry file",code:`import '${Yt}/tokens.css';`},{label:"Plain HTML, in <head>",code:`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${Yt}@${wa}/dist/twiddle-tokens.css">`}],Ea=`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.
+`,L=(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:L(20,1.8,'<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),link:L(15,2,'<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1"/>'),reset:L(15,2,'<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>'),close:L(15,2,'<path d="M18 6L6 18M6 6l12 12"/>'),chevron:L(12,2.4,'<path d="M9 6l6 6-6 6"/>'),pick:L(15,2,'<circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>'),compare:L(15,2,'<circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/>'),undo:L(15,2,'<path d="M9 14L4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/>'),redo:L(15,2,'<path d="M15 14l5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h3"/>'),back:L(15,2,'<path d="M15 18l-6-6 6-6"/>'),down:L(12,2.4,'<path d="M6 9l6 6 6-6"/>'),minimise:L(15,2,'<path d="M5 12h14"/>'),copy:L(13,2,'<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'),warn:L(13,2,'<path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/>'),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>',tabOverview:L(18,1.8,'<circle cx="12" cy="12" r="8"/><path d="M12 12l4-4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>'),tabColour:L(18,2,'<path d="M12 3c-3.5 4.5-6 7.8-6 11a6 6 0 0 0 12 0c0-3.2-2.5-6.5-6-11z"/>'),tabType:L(18,2,'<path d="M5 7V5h14v2"/><path d="M12 5v14"/><path d="M9 19h6"/>'),tabSpacing:L(18,2,'<path d="M4 5v14M20 5v14"/><path d="M8 12h8"/><path d="M10 9l-3 3 3 3M14 9l3 3-3 3"/>'),tabShape:L(18,2,'<path d="M20 4h-9a7 7 0 0 0-7 7v9"/><path d="M20 10h-5a5 5 0 0 0-5 5v5"/>'),tabShadows:L(18,2,'<rect x="4" y="4" width="12" height="12" rx="2"/><path d="M20 8v10a2 2 0 0 1-2 2H8"/>'),sliders:L(15,2,'<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>')},It="twiddle:";function te(t){try{return localStorage.getItem(It+t)}catch{return null}}function ce(t,e){try{localStorage.setItem(It+t,e)}catch{}}function ne({label:t,options:e,onSelect:n}){const a=document.createElement("div");a.className="seg",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",t);const o=e.map(l=>{const p=document.createElement("button");return p.type="button",p.setAttribute("role","radio"),p.dataset.value=l.value,p.textContent=l.label,l.title&&(p.title=l.title),p.addEventListener("click",()=>i(l.value)),p});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})}function i(l,p){l!==s&&(r(l),n(l)),p&&o.find(c=>c.dataset.value===l).focus()}return a.addEventListener("keydown",l=>{const p=o.indexOf(l.target);if(p<0)return;const c={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[l.key];let h;if(c)h=(p+c+o.length)%o.length;else if(l.key==="Home")h=0;else if(l.key==="End")h=o.length-1;else return;l.preventDefault(),i(o[h].dataset.value,!0)}),r(null),{el:a,setValue:r}}const Dt=/var\(\s*(--twd-[\w-]+)/g,ia=/::?[\w-]+(\([^)]*\))?/g;function*Ee(t){for(const e of t)e.selectorText!=null&&(yield e),e.cssRules&&(yield*Ee(e.cssRules))}function la(){const t=[];for(const e of document.styleSheets){if(e.ownerNode?.id==="twiddle-scoped")continue;let n;try{n=e.cssRules}catch{continue}for(const a of Ee(n)){const o=[...a.style.cssText.matchAll(Dt)].map(s=>s[1]);o.length&&t.push({selectors:a.selectorText.split(","),vars:o})}}return t}function da(t,e){const n=e.replace(ia,"").trim()||"*";try{return t.matches(n)}catch{return!1}}function Bt(t){const e=new Set,n=[];return la().forEach(({selectors:a,vars:o})=>{const s=a.find(r=>da(t,r));s&&(o.forEach(r=>e.add(r)),n.push(s.trim()))}),[...(t.getAttribute("style")||"").matchAll(Dt)].forEach(a=>e.add(a[1])),{names:e,selectors:n}}const Xe=t=>window.CSS&&CSS.escape?CSS.escape(t):t;function ca(t){const e=[];let n=t;for(;n&&n.nodeType===1&&n!==document.body&&n!==document.documentElement;){if(n.id&&document.querySelectorAll(`#${Xe(n.id)}`).length===1)return e.unshift(`#${Xe(n.id)}`),e.join(" > ");const a=n.localName,o=[...n.parentElement.children].filter(s=>s.localName===a);e.unshift(o.length>1?`${a}:nth-of-type(${o.indexOf(n)+1})`:a),n=n.parentElement}return["body",...e].join(" > ")}function pa(t,e=Bt(t).selectors){const n=t.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?`.${Xe(s)}`:null}function ua(t){const e=Bt(t),n=pa(t,e.selectors),a=(t.getAttribute("aria-label")||t.placeholder||t.textContent||"").trim().replace(/\s+/g," ");return{el:t,tag:t.localName,classes:[...t.classList],text:a.length>40?`${a.slice(0,40)}…`:a,tokens:e.names,elementSelector:ca(t),classSelector:n,classCount:n?document.querySelectorAll(n).length:0}}const Je=t=>t.localName+[...t.classList].map(e=>`.${e}`).join(""),ha={radius:"px",intensity:"%",base:"px"},Ut=t=>t.charAt(0).toUpperCase()+t.slice(1),fa=(t,e)=>typeof e=="number"||/^\d+$/.test(e)?`${e}${ha[t]||""}`:Ut(String(e));function qt(t,e,n){const a=zt(()=>t.tokens({[t.id]:e})||{}),o=Object.keys(a);let s={};if(o.length){const r=n.selector?document.querySelector(n.selector):void 0;s=aa(o,r||void 0)}return{...n,sectionId:t.id,title:t.title,settings:Object.entries(e).map(([r,i])=>({key:r,label:Ut(r),value:fa(r,i),...t.describe?.(r,i)||{}})),tokens:o.map(r=>({name:r,from:s[r]||"",to:a[r]}))}}function Vt(t,e){const n=[];return e.forEach(a=>{t[a.id]&&n.push(qt(a,t[a.id],{kind:"global",selector:null}))}),Object.entries(t.scopes||{}).forEach(([a,o])=>{const s=Ye(a)?"class":"element";e.forEach(r=>{o[r.id]&&n.push(qt(r,o[r.id],{kind:s,selector:a}))})}),n}function ga(t){const e=o=>Object.values(o||{}).reduce((s,r)=>s+Object.keys(r||{}).length,0),{scopes:n,...a}=t;return e(a)+Object.values(n||{}).reduce((o,s)=>o+e(s),0)}const ae=t=>`\`${t}\``,Qe=t=>t.map(e=>`  - ${ae(e.name)}: ${e.from?`${ae(e.from)} → `:""}${ae(e.to)}`),et=t=>`${t.title} › ${t.settings.map(e=>`${e.label}: ${e.value}`).join(", ")}`;function ma(t){let e=null;try{e=document.querySelector(t)}catch{}if(!e)return"not found on the current page";const n=(e.getAttribute("aria-label")||e.placeholder||e.textContent||"").trim().replace(/\s+/g," ").slice(0,60);return`${ae(Je(e))}${n?` with text “${n}”`:""}`}function Ht(t,e){const n=new Map;return t.forEach(a=>{const o=a[e];n.has(o)||n.set(o,[]),n.get(o).push(a)}),[...n]}function ba(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=[];if(r.push("# Apply design tweaks from Panel","","I explored design changes to this prototype with Panel (by Twiddle), a tweak panel that overrides the prototype's `--twd-*` CSS custom properties (design tokens) at runtime. Make these changes permanent in the source code.","",`Preview of the tweaked version: ${e}`),a.length&&(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(`- **${et(i)}**`,...Qe(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.",""),Ht(o,"selector").forEach(([i,l])=>{r.push(`- ${ae(i)} (${document.querySelectorAll(i).length} on this page)`),l.forEach(p=>r.push(`  - **${et(p)}**`,...Qe(p.tokens).map(c=>`  ${c}`)))})),s.length){const i=1+(a.length?1:0)+(o.length?1:0);r.push("",`## ${i}. Single-element changes`,"","These apply to one element only. Add a modifier class to that element (e.g. `input--pill`) and redeclare the token in a rule for that class. The selectors below are runtime paths to help you find the element; don't copy them into the stylesheet.",""),Ht(s,"selector").forEach(([l,p])=>{r.push(`- ${ma(l)}, found at ${ae(l)}`),p.forEach(c=>r.push(`  - **${et(c)}**`,...Qe(c.tokens).map(h=>`  ${h}`)))})}return n.length&&r.push("","## Contrast to check","","Panel flagged these colour pairs as below WCAG AA with the new values:","",...n.map(i=>`- ${i.text}`)),r.push("","## Constraints","","- Keep styling through the `--twd-*` tokens; don't hard-code the new values in component rules.","- Change only what is listed above.","- If a value uses `color-mix()` and the project targets older browsers, ask before converting it.","- When done, list the files you changed."),r.join(`
+`)}const Ce=4.5,xa=3,wa=[["--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 G;function tt(t){if(!t||(G||=Object.assign(document.createElement("canvas"),{width:1,height:1}).getContext("2d",{willReadFrequently:!0}),!G))return null;G.clearRect(0,0,1,1),G.fillStyle="#000",G.fillStyle=t,G.fillRect(0,0,1,1);const[e,n,a,o]=G.getImageData(0,0,1,1).data;return[e,n,a,o/255]}function _t(t){const e=document.createElement("i");e.style.cssText=`position:absolute;visibility:hidden;color:var(${t})`,document.documentElement.appendChild(e);const n=getComputedStyle(e).color;return e.remove(),tt(n)}const Kt=([t,e,n])=>{const a=o=>(o/=255,o<=.03928?o/12.92:((o+.055)/1.055)**2.4);return .2126*a(t)+.7152*a(e)+.0722*a(n)},Gt=(t,e)=>t.slice(0,3).map((n,a)=>n*t[3]+e[a]*(1-t[3])).concat(1);function Wt(t,e){const n=Kt(t[3]<1?Gt(t,e):t),a=Kt(e);return(Math.max(n,a)+.05)/(Math.min(n,a)+.05)}const Yt=t=>`${t.toFixed(1)}:1`;function nt(){const t=[];return wa.forEach(([e,n,a])=>{const o=_t(e),s=_t(n);if(!o||!s||s[3]===0)return;const r=Wt(o,s);r<Ce&&t.push({label:a,ratio:r,needed:Ce,text:`${a}: ${Yt(r)} · AA needs ${Ce}`})}),t}function va(t){const e=[];for(let n=t;n&&n.nodeType===1;n=n.parentElement){const a=tt(getComputedStyle(n).backgroundColor);if(a&&a[3]>0&&(e.push(a),a[3]>=1))break}return e.reduceRight((n,a)=>Gt(a,n),[255,255,255,1])}function ya(t){if(!t.textContent.trim()&&!t.placeholder)return null;const e=getComputedStyle(t),n=tt(e.color);if(!n)return null;const a=parseFloat(e.fontSize),s=a>=24||a>=18.66&&parseInt(e.fontWeight,10)>=700?xa:Ce,r=Wt(n,va(t));return r<s?{label:"This element",ratio:r,needed:s,text:`This element’s text: ${Yt(r)} · AA needs ${s}`}:null}const Zt="twiddle-panel",ka="0.7.1",Xt="https://panel.twiddle.in",Sa="--twd-radius-control",$a=/var\(\s*--twd-/;function Ea(t){return t.style.cssText.split(";").some(e=>{const n=e.slice(0,e.indexOf(":")).trim();return n&&!n.startsWith("--")&&$a.test(e)})}function Ca(){if(!getComputedStyle(document.documentElement).getPropertyValue(Sa).trim())return"no-tokens";let t=!1;for(const e of document.styleSheets){if(e.ownerNode?.id==="twiddle-scoped")continue;let n;try{n=e.cssRules}catch{t=!0;continue}for(const a of Ee(n))if(Ea(a))return"ok"}return document.querySelector('[style*="var(--twd-"]')?"ok":t?"unknown":"unused"}function Ma(){const t=new Set,e=n=>{for(const a of n.matchAll(/var\(\s*(--twd-[\w-]+)/g))t.add(a[1])};for(const n of document.styleSheets){if(n.ownerNode?.id==="twiddle-scoped")continue;let a;try{a=n.cssRules}catch{continue}for(const o of Ee(a))o.style.cssText.split(";").forEach(s=>{const r=s.slice(0,s.indexOf(":")).trim();r&&!r.startsWith("--")&&e(s)})}return document.querySelectorAll('[style*="var(--twd-"]').forEach(n=>e(n.getAttribute("style"))),t}const Jt=[{label:"With a build tool, in your entry file",code:`import '${Zt}/tokens.css';`},{label:"Plain HTML, in <head>",code:`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/${Zt}@${ka}/dist/twiddle-tokens.css">`}],Ta=`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:
@@ -749,7 +764,7 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
    - Shadows: --twd-shadow-sm, --twd-shadow-md, --twd-shadow-lg
 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 D(t){const e=document.createElement("div");e.className="field";const n=document.createElement("div");n.className="field-head";const a=document.createElement("span");a.className="field-label",a.textContent=t;const o=document.createElement("span");return o.className="field-value",o.hidden=!0,n.append(a,o),e.append(n),{el:e,setValue(r){o.textContent=r||"",o.hidden=!r},append(...r){e.append(...r)}}}function Ca({label:t,ends:e,cols:n=9,rows:a=5,onInput:o}){const r=document.createElement("div");r.className="pad",r.tabIndex=0,r.setAttribute("role","group"),r.setAttribute("aria-roledescription","2D slider");const s=(b,u)=>{const v=document.createElement("span");return v.className=`pad-edge ${b}`,v.textContent=u,v.setAttribute("aria-hidden","true"),v};r.append(s("top",e.top),s("bottom",e.bottom),s("left",e.left),s("right",e.right));const i=document.createElement("div");i.className="pad-area";for(let b=0;b<a;b++)for(let u=0;u<n;u++){const v=document.createElement("i");v.className="pad-dot",v.style.left=`${u/(n-1)*100}%`,v.style.top=`${b/(a-1)*100}%`,i.append(v)}const l=document.createElement("span");l.className="pad-knob",i.append(l),r.append(i);let p=.5,c=.5;const h=(b,u)=>Math.round(Math.min(1,Math.max(0,b))*(u-1))/(u-1);function y(){l.style.left=`${p*100}%`,l.style.top=`${c*100}%`}function f(b,u,v){b=v==="x"?p:h(b,n),u=v==="y"?c:h(u,a),!(b===p&&u===c)&&(p=b,c=u,y(),o(p,c))}const m=b=>{const u=i.getBoundingClientRect();f((b.clientX-u.left)/u.width,(b.clientY-u.top)/u.height)};r.addEventListener("pointerdown",b=>{r.setPointerCapture(b.pointerId),r.classList.add("dragging"),m(b)}),r.addEventListener("pointermove",b=>{r.hasPointerCapture(b.pointerId)&&m(b)});const x=b=>{r.hasPointerCapture(b.pointerId)&&r.releasePointerCapture(b.pointerId),r.classList.remove("dragging")};return r.addEventListener("pointerup",x),r.addEventListener("pointercancel",x),r.addEventListener("keydown",b=>{const u={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]}[b.key];u&&(b.preventDefault(),u[0]?f(h(p,n)+u[0]/(n-1),c,"y"):f(p,h(c,a)+u[1]/(a-1),"x"))}),{el:r,setValue(b,u,v){p=Math.min(1,Math.max(0,b)),c=Math.min(1,Math.max(0,u)),y(),r.setAttribute("aria-label",v?`${t}: ${v}`:t)}}}function Jt({label:t,min:e,max:n,step:a=1,format:o=String,onInput:r}){const s=document.createElement("div");s.className="slider";const i=document.createElement("input");i.type="range",i.min=String(e),i.max=String(n),i.step=String(a),i.setAttribute("aria-label",t);const l=document.createElement("span");l.className="slider-value",l.setAttribute("aria-hidden","true"),s.append(i,l);const p=c=>{const h=(Number(i.value)-e)/(n-e)*100;i.style.setProperty("--fill",`${h}%`),l.textContent=c??o(Number(i.value)),i.setAttribute("aria-valuetext",l.textContent)};return i.addEventListener("input",()=>{p(),r(Number(i.value))}),{el:s,setValue(c,h){i.value=String(c),p(h)}}}function Ta({label:t,options:e,columns:n=3,className:a="",onSelect:o}){const r=document.createElement("div");r.className=`tiles ${a}`.trim(),r.style.setProperty("--cols",n),r.setAttribute("role","radiogroup"),r.setAttribute("aria-label",t);const s=e.map(c=>{const h=document.createElement("button");return h.type="button",h.className="tile",c.wide&&h.classList.add("wide"),h.setAttribute("role","radio"),h.dataset.value=c.value,c.title&&(h.title=c.title),h.innerHTML=`${c.preview?`<span class="tile-preview" aria-hidden="true">${c.preview}</span>`:""}<span class="tile-text"><span class="tile-label"></span>${c.sub?'<span class="tile-sub"></span>':""}</span>`,h.querySelector(".tile-label").textContent=c.label,c.sub&&(h.querySelector(".tile-sub").textContent=c.sub),h.addEventListener("click",()=>p(c.value)),h});r.append(...s);let i=null;function l(c){i=c,s.forEach(y=>y.setAttribute("aria-checked",String(y.dataset.value===c)));const h=Math.max(0,s.findIndex(y=>y.dataset.value===c));s.forEach((y,f)=>{y.tabIndex=f===h?0:-1})}function p(c,h){c!==i&&(l(c),o(c)),h&&s.find(y=>y.dataset.value===c).focus()}return r.addEventListener("keydown",c=>{const h=s.indexOf(c.target.closest(".tile"));if(h<0)return;const y={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[c.key];let f;if(y)f=(h+y+s.length)%s.length;else if(c.key==="Home")f=0;else if(c.key==="End")f=s.length-1;else return;c.preventDefault(),p(s[f].dataset.value,!0)}),l(null),{el:r,setValue:l}}const F=t=>getComputedStyle(document.documentElement).getPropertyValue(t).trim();function ce(t,e){const n=/^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(t).trim());if(!n)return null;const a=parseFloat(n[1])*e,o=n[2]||"px";return o==="px"?`${Math.round(a)}px`:`${+a.toFixed(3)}${o}`}const Ma=999;function Qt({id:t,title:e,hint:n,token:a,uses:o=[],presets:r,max:s,extra:i=[],extraTokens:l=()=>({}),shape:p="card"}){const c=f=>r.find(m=>m.value===f),h=f=>f>=Ma?"full":`${f}px`,y=f=>{if(typeof f.radius=="number"&&isFinite(f.radius))return{[a]:`${Math.min(Math.max(f.radius,0),s)}px`};const m=c(f.corners);return m?{[a]:`${m.radius}px`}:{}};return{id:t,title:e,hint:n,presets:r,uses:[a,...o],tokens(f){const m=f[t]||{};return{...y(m),...l(m)}},parts:{corners(f,m,{label:x="Corners"}={}){const b=D(x),u=ee({label:`${e} corners`,options:r.map(E=>({value:E.value,label:E.label,title:h(E.radius)})),onSelect:E=>m.setSection(t,{corners:E,radius:null})}),v=Jt({label:`${e} corner radius`,min:0,max:s,format:h,onInput:E=>m.setSection(t,{radius:E,corners:null})});b.append(u.el,v.el),f.append(b.el);const L=()=>{const E=parseFloat((m.readToken||F)(a)),oe=m.getState()[t]||{},Z=c(oe.corners)||r.find(X=>X.radius===E);if(u.setValue(Z?Z.value:null),isNaN(E)){v.setValue(0,"—"),b.setValue("");return}v.setValue(Math.min(E,s),h(E)),b.setValue(h(E))};L(),m.onChange(L)},...Object.fromEntries(i.map(f=>[f.key,(m,x,{label:b}={})=>m.append(pe(x,{section:t,...f,label:b||f.label}))])),cornerTiles(f,m,{label:x="Corners"}={}){const b=u=>`<span class="shape shape-${p}" style="border-radius:${Math.min(u,p==="button"?12:16)}px"></span>`;f.append(V(m,{section:t,key:"corners",label:x,columns:r.length,options:r.map(u=>({value:u.value,label:u.label,title:h(u.radius),preview:b(u.radius)})),current:u=>{const v=u[t]||{};if(v.radius!=null)return null;const L=parseFloat((m.readToken||F)(a));return(c(v.corners)||r.find(E=>E.radius===L))?.value||null},select:u=>m.setSection(t,{corners:u,radius:null}),valueText:()=>{const u=parseFloat((m.readToken||F)(a));return isNaN(u)?"":h(u)}}))},...Object.fromEntries(i.filter(f=>f.preview).map(f=>[`${f.key}Tiles`,(m,x,{label:b}={})=>m.append(V(x,{section:t,key:f.key,label:b||f.label,fallback:f.fallback,columns:f.columns||f.options.length,options:f.options.map(u=>({...u,preview:f.preview(u.value)}))}))]))},render(f,m){Object.entries(this.parts).filter(([x])=>!x.endsWith("Tiles")).forEach(([,x])=>x(f,m))}}}function pe(t,{section:e,key:n,label:a,options:o,fallback:r,valueText:s}){const i=D(a),l=ee({label:a,options:o,onSelect:c=>t.setSection(e,{[n]:c})});i.append(l.el);const p=()=>{const c=(t.getState()[e]||{})[n]||r;l.setValue(c),i.setValue(s?s(c):"")};return p(),t.onChange(p),i.el}function Aa(t,{section:e,key:n,label:a,min:o,max:r,fallback:s,format:i}){const l=D(a),p=Jt({label:a,min:o,max:r,format:i,onInput:h=>t.setSection(e,{[n]:h})});l.append(p.el);const c=()=>{const h=(t.getState()[e]||{})[n];p.setValue(typeof h=="number"?h:s)};return c(),t.onChange(c),l.el}function V(t,{section:e,key:n,label:a,options:o,columns:r=3,className:s="",fallback:i,valueText:l,current:p,select:c}){const h=D(a),y=Ta({label:a,options:o,columns:r,className:s,onSelect:m=>c?c(m):t.setSection(e,{[n]:m})});h.append(y.el);const f=()=>{const m=t.getState(),x=p?p(m):(m[e]||{})[n]||i||null;y.setValue(x),h.setValue(l?l(x,m):"")};return f(),t.onChange(f),h.el}const en=(t,e)=>e.map(n=>`${t}${n}`),tn={fonts:{label:"Tokens",tokens:["font-heading","font-body"],kind:"text"},type:{label:"Tokens",tokens:en("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:en("space-",[1,2,3,4,5,6,7,8]),kind:"length",bar:64},controls:{label:"Controls",tokens:["control-height","control-pad-x"],kind:"length"},corners:{label:"Tokens",tokens:["radius-control","radius-container"],kind:"length"},borders:{label:"Tokens",tokens:["border-width","border-width-container"],kind:"length"},shadows:{label:"Tokens",tokens:["shadow-sm","shadow-md","shadow-lg"],kind:"text"},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"}},H=t=>`--twd-${t}`,nt=(t,e)=>Object.prototype.hasOwnProperty.call(t.getState().custom||{},e),nn=(t,e)=>tn[e].tokens.some(n=>(t.custom||{})[n]!=null);function La(t,e){const n=/^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());return!n||e==="text"||e==="colour"?null:n[2]==="rem"?{n:+(parseFloat(n[1])*16).toFixed(1),unit:"px"}:{n:+parseFloat(n[1]).toFixed(3),unit:n[2]||(e==="length"?"px":"")}}function Pa(t,e){const n=t.trim();return n?e==="length"&&/^-?\d*\.?\d+$/.test(n)?`${n}px`:n:null}function Oa(t,e,n,a){const o=document.createElement("div");o.className=`token-row kind-${n}`,o.innerHTML=`
+5. When done, list the files you changed and any values you left fixed, with the reason.`;function D(t){const e=document.createElement("div");e.className="field";const n=document.createElement("div");n.className="field-head";const a=document.createElement("span");a.className="field-label",a.textContent=t;const o=document.createElement("span");return o.className="field-value",o.hidden=!0,n.append(a,o),e.append(n),{el:e,setValue(s){o.textContent=s||"",o.hidden=!s},append(...s){e.append(...s)}}}function Aa({label:t,ends:e,cols:n=9,rows:a=5,onInput:o}){const s=document.createElement("div");s.className="pad",s.tabIndex=0,s.setAttribute("role","group"),s.setAttribute("aria-roledescription","2D slider");const r=(b,u)=>{const v=document.createElement("span");return v.className=`pad-edge ${b}`,v.textContent=u,v.setAttribute("aria-hidden","true"),v};s.append(r("top",e.top),r("bottom",e.bottom),r("left",e.left),r("right",e.right));const 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)}const l=document.createElement("span");l.className="pad-knob",i.append(l),s.append(i);let p=.5,c=.5;const h=(b,u)=>Math.round(Math.min(1,Math.max(0,b))*(u-1))/(u-1);function y(){l.style.left=`${p*100}%`,l.style.top=`${c*100}%`}function f(b,u,v){b=v==="x"?p:h(b,n),u=v==="y"?c:h(u,a),!(b===p&&u===c)&&(p=b,c=u,y(),o(p,c))}const m=b=>{const u=i.getBoundingClientRect();f((b.clientX-u.left)/u.width,(b.clientY-u.top)/u.height)};s.addEventListener("pointerdown",b=>{s.setPointerCapture(b.pointerId),s.classList.add("dragging"),m(b)}),s.addEventListener("pointermove",b=>{s.hasPointerCapture(b.pointerId)&&m(b)});const x=b=>{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"))}),{el:s,setValue(b,u,v){p=Math.min(1,Math.max(0,b)),c=Math.min(1,Math.max(0,u)),y(),s.setAttribute("aria-label",v?`${t}: ${v}`:t)}}}function Qt({label:t,min:e,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);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)};return i.addEventListener("input",()=>{p(),s(Number(i.value))}),{el:r,setValue(c,h){i.value=String(c),p(h)}}}function La({label:t,options:e,columns:n=3,className:a="",onSelect:o}){const s=document.createElement("div");s.className=`tiles ${a}`.trim(),s.style.setProperty("--cols",n),s.setAttribute("role","radiogroup"),s.setAttribute("aria-label",t);const r=e.map(c=>{const h=document.createElement("button");return h.type="button",h.className="tile",c.wide&&h.classList.add("wide"),h.setAttribute("role","radio"),h.dataset.value=c.value,c.title&&(h.title=c.title),h.innerHTML=`${c.preview?`<span class="tile-preview" aria-hidden="true">${c.preview}</span>`:""}<span class="tile-text"><span class="tile-label"></span>${c.sub?'<span class="tile-sub"></span>':""}</span>`,h.querySelector(".tile-label").textContent=c.label,c.sub&&(h.querySelector(".tile-sub").textContent=c.sub),h.addEventListener("click",()=>p(c.value)),h});s.append(...r);let i=null;function l(c){i=c,r.forEach(y=>y.setAttribute("aria-checked",String(y.dataset.value===c)));const h=Math.max(0,r.findIndex(y=>y.dataset.value===c));r.forEach((y,f)=>{y.tabIndex=f===h?0:-1})}function p(c,h){c!==i&&(l(c),o(c)),h&&r.find(y=>y.dataset.value===c).focus()}return s.addEventListener("keydown",c=>{const h=r.indexOf(c.target.closest(".tile"));if(h<0)return;const y={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[c.key];let f;if(y)f=(h+y+r.length)%r.length;else if(c.key==="Home")f=0;else if(c.key==="End")f=r.length-1;else return;c.preventDefault(),p(r[f].dataset.value,!0)}),l(null),{el:s,setValue:l}}const F=t=>getComputedStyle(document.documentElement).getPropertyValue(t).trim();function pe(t,e){const n=/^(-?\d*\.?\d+)([a-z%]*)$/i.exec(String(t).trim());if(!n)return null;const a=parseFloat(n[1])*e,o=n[2]||"px";return o==="px"?`${Math.round(a)}px`:`${+a.toFixed(3)}${o}`}const Oa=999;function en({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>=Oa?"full":`${f}px`,y=f=>{if(typeof f.radius=="number"&&isFinite(f.radius))return{[a]:`${Math.min(Math.max(f.radius,0),r)}px`};const m=c(f.corners);return m?{[a]:`${m.radius}px`}:{}};return{id:t,title:e,hint:n,presets:s,uses:[a,...o],tokens(f){const m=f[t]||{};return{...y(m),...l(m)}},parts:{corners(f,m,{label:x="Corners"}={}){const b=D(x),u=ne({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=Qt({label:`${e} corner radius`,min:0,max:r,format:h,onInput:E=>m.setSection(t,{radius:E,corners:null})});b.append(u.el,v.el),f.append(b.el);const O=()=>{const E=parseFloat((m.readToken||F)(a)),se=m.getState()[t]||{},Z=c(se.corners)||s.find(X=>X.radius===E);if(u.setValue(Z?Z.value:null),isNaN(E)){v.setValue(0,"—"),b.setValue("");return}v.setValue(Math.min(E,r),h(E)),b.setValue(h(E))};O(),m.onChange(O)},...Object.fromEntries(i.map(f=>[f.key,(m,x,{label:b}={})=>m.append(ue(x,{section:t,...f,label:b||f.label}))])),cornerTiles(f,m,{label:x="Corners"}={}){const b=u=>`<span class="shape shape-${p}" style="border-radius:${Math.min(u,p==="button"?12:16)}px"></span>`;f.append(V(m,{section:t,key:"corners",label:x,columns:s.length,options:s.map(u=>({value:u.value,label:u.label,title:h(u.radius),preview:b(u.radius)})),current:u=>{const v=u[t]||{};if(v.radius!=null)return null;const O=parseFloat((m.readToken||F)(a));return(c(v.corners)||s.find(E=>E.radius===O))?.value||null},select:u=>m.setSection(t,{corners:u,radius:null}),valueText:()=>{const u=parseFloat((m.readToken||F)(a));return isNaN(u)?"":h(u)}}))},...Object.fromEntries(i.filter(f=>f.preview).map(f=>[`${f.key}Tiles`,(m,x,{label:b}={})=>m.append(V(x,{section:t,key:f.key,label:b||f.label,fallback:f.fallback,columns:f.columns||f.options.length,options:f.options.map(u=>({...u,preview:f.preview(u.value)}))}))]))},render(f,m){Object.entries(this.parts).filter(([x])=>!x.endsWith("Tiles")).forEach(([,x])=>x(f,m))}}}function ue(t,{section:e,key:n,label:a,options:o,fallback:s,valueText:r}){const i=D(a),l=ne({label:a,options:o,onSelect:c=>t.setSection(e,{[n]:c})});i.append(l.el);const p=()=>{const c=(t.getState()[e]||{})[n]||s;l.setValue(c),i.setValue(r?r(c):"")};return p(),t.onChange(p),i.el}function Pa(t,{section:e,key:n,label:a,min:o,max:s,fallback:r,format:i}){const l=D(a),p=Qt({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 c(),t.onChange(c),l.el}function V(t,{section:e,key:n,label:a,options:o,columns:s=3,className:r="",fallback:i,valueText:l,current:p,select:c}){const h=D(a),y=La({label:a,options:o,columns:s,className:r,onSelect:m=>c?c(m):t.setSection(e,{[n]:m})});h.append(y.el);const f=()=>{const m=t.getState(),x=p?p(m):(m[e]||{})[n]||i||null;y.setValue(x),h.setValue(l?l(x,m):"")};return f(),t.onChange(f),h.el}const tn=(t,e)=>e.map(n=>`${t}${n}`),nn={fonts:{label:"Tokens",tokens:["font-heading","font-body"],kind:"text"},type:{label:"Tokens",tokens:tn("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:tn("space-",[1,2,3,4,5,6,7,8]),kind:"length",bar:64},controls:{label:"Controls",tokens:["control-height","control-pad-x"],kind:"length"},corners:{label:"Tokens",tokens:["radius-control","radius-container"],kind:"length"},borders:{label:"Tokens",tokens:["border-width","border-width-container"],kind:"length"},shadows:{label:"Tokens",tokens:["shadow-sm","shadow-md","shadow-lg"],kind:"text"},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"}},H=t=>`--twd-${t}`,at=(t,e)=>Object.prototype.hasOwnProperty.call(t.getState().custom||{},e),an=(t,e)=>nn[e].tokens.some(n=>(t.custom||{})[n]!=null);function Fa(t,e){const n=/^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());return!n||e==="text"||e==="colour"?null:n[2]==="rem"?{n:+(parseFloat(n[1])*16).toFixed(1),unit:"px"}:{n:+parseFloat(n[1]).toFixed(3),unit:n[2]||(e==="length"?"px":"")}}function Na(t,e){const n=t.trim();return n?e==="length"&&/^-?\d*\.?\d+$/.test(n)?`${n}px`:n:null}function ja(t,e,n,a){const o=document.createElement("div");o.className=`token-row kind-${n}`,o.innerHTML=`
     <code class="token-name" title="${H(e)}">${e}</code>
     ${a?'<span class="token-bar"><span></span></span>':'<span class="token-gap"></span>'}
     <span class="custom-tag" hidden>Custom</span>
@@ -759,14 +774,14 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
       <span class="token-unit"></span>
     </label>
     <button class="icon-btn token-reset" title="Back to the page’s value" aria-label="Reset ${H(e)}" hidden>${A.reset}</button>
-  `;const r=o.querySelector("input"),s=o.querySelector(".token-unit"),i=o.querySelector(".token-bar span"),l=o.querySelector(".token-swatch"),p=o.querySelector(".custom-tag"),c=o.querySelector(".token-reset");let h="";const y=()=>{let m=r.value;h&&/^-?\d*\.?\d+$/.test(m.trim())&&(m=`${m.trim()}${h}`);const x=Pa(m,n),b=F(H(e));if(x===null){nt(t,e)?t.setSection("custom",{[e]:null}):f();return}if(x===b&&!nt(t,e))return f();t.setSection("custom",{[e]:x})};r.addEventListener("change",y),r.addEventListener("blur",()=>f()),r.addEventListener("keydown",m=>{m.key==="Enter"&&(m.preventDefault(),r.blur()),m.key==="Escape"&&(m.stopPropagation(),f(),r.blur())}),c.addEventListener("click",()=>t.setSection("custom",{[e]:null}));function f(){const m=F(H(e)),x=nt(t,e),b=La(m,n);h=b?b.unit:"",document.activeElement!==r&&o.getRootNode().activeElement!==r&&(r.value=b?String(b.n):m),r.title=m,s.textContent=h,s.hidden=!h,i&&(i.style.width=`${Math.max(2,Math.min(100,(b?b.n:0)/a*100))}%`),l&&(l.style.background=m),o.classList.toggle("edited",x),p.hidden=!x,c.hidden=!x}return f(),t.onChange(f),o}const Fa={id:"custom",title:"Custom tokens",hint:"Any token, set to a fixed value",uses:[],tokens(t){return Object.fromEntries(Object.entries(t.custom||{}).map(([e,n])=>[H(e),n]))},describe:(t,e)=>({label:H(t),value:String(e)}),parts:Object.fromEntries(Object.entries(tn).map(([t,e])=>[t,(n,a,{label:o=e.label}={})=>{const r=D(o);r.el.classList.add("token-field");const s=e.tokens[0],i=e.tokens[e.tokens.length-1];r.setValue(e.tokens.length>2&&/-\w+$/.test(s)?`${H(s)} … ${i.split("-").pop()}`:"");const l=document.createElement("div");l.className="token-rows",e.tokens.forEach(p=>l.append(Oa(a,p,e.kind,e.bar))),r.append(l),n.append(r.el)}]))},ue={compact:.75,regular:1,comfy:1.25},at=[.75,1.25],an=[1,2,3,4,5,6,7,8].map(t=>`--twd-space-${t}`);function ne(t={}){return typeof t.factor=="number"&&isFinite(t.factor)?Math.min(at[1],Math.max(at[0],t.factor)):ue[t.spacing]||1}const ot=t=>`${Math.round(t*100)}%`,Na={id:"density",title:"Density",hint:"Compact · regular · comfortable",uses:an,tokens(t){const e=ne(t.density);if(e===1)return{};const n={};return an.forEach(a=>{const o=ce(F(a),e);o&&(n[a]=o)}),n},describe:(t,e)=>t==="factor"?{label:"Spacing",value:ot(e)}:null,parts:{spacingTiles(t,e,{label:n="Density"}={}){const a=(o,r)=>`<span class="sketch" style="padding:${r}px;gap:${o}px"><i></i><i></i><i></i></span>`;t.append(V(e,{section:"density",key:"spacing",label:n,options:[{value:"compact",label:"Compact",preview:a(2,5)},{value:"regular",label:"Regular",preview:a(4,8)},{value:"comfy",label:"Comfy",preview:a(6,11)}],current:o=>{const r=ne(o.density);return Object.keys(ue).find(s=>ue[s]===r)||null},select:o=>e.setSection("density",{spacing:o,factor:null}),valueText:(o,r)=>nn(r,"spacing")?"Custom":o?"":ot(ne(r.density))}))},spacing(t,e,{label:n="Spacing"}={}){const a=D(n),o=ee({label:n,options:[{value:"compact",label:"Compact"},{value:"regular",label:"Regular"},{value:"comfy",label:"Comfy"}],onSelect:s=>e.setSection("density",{spacing:s,factor:null})});a.append(o.el);const r=()=>{const s=e.getState().density||{},i=ne(s),l=Object.keys(ue).find(p=>ue[p]===i);o.setValue(l||null),a.setValue(nn(e.getState(),"spacing")?"Custom":l?"":ot(i))};r(),e.onChange(r),t.append(a.el)}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},ja='<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>',Ra=[[50,"white",10],[100,"white",20],[200,"white",36],[300,"white",56],[400,"white",78],[500,null,100],[600,"black",86],[700,"black",72],[800,"black",58],[900,"black",45],[950,"black",30]],rt=t=>{let e=String(t).trim().replace(/^#/,"");return/^[0-9a-f]{3}$/i.test(e)&&(e=e.split("").map(n=>n+n).join("")),/^[0-9a-f]{6}$/i.test(e)?`#${e.toUpperCase()}`:null};function za({label:t,onInput:e}){const n=document.createElement("div");n.className="colour";const a=document.createElement("div");a.className="colour-field";const o=document.createElement("input");o.type="color",o.className="colour-picker",o.tabIndex=-1,o.setAttribute("aria-hidden","true");const r=document.createElement("button");r.type="button",r.className="colour-swatch",r.setAttribute("aria-label",`${t}: open colour picker`);const s=document.createElement("input");s.type="text",s.className="colour-hex",s.spellcheck=!1,s.maxLength=7,s.setAttribute("aria-label",`${t} hex value`);const i=document.createElement("button");i.type="button",i.className="colour-pipette",i.innerHTML=ja,i.title="Pick a colour from the screen",i.setAttribute("aria-label","Pick a colour from the screen"),a.append(o,r,s,i);const l=document.createElement("div");l.className="ramp",l.setAttribute("aria-hidden","true"),l.innerHTML=Ra.map(([f,m,x])=>{const b=m?`color-mix(in oklch, var(--brand) ${x}%, ${m})`:"var(--brand)";return`<span title="${f}" style="background:${b}"></span>`}).join(""),n.append(a,l);let p="#000000";const c=f=>{p=f,o.value=f.toLowerCase(),r.style.background=f,n.getRootNode().activeElement!==s&&(s.value=f),n.style.setProperty("--brand",f)},h=f=>{f!==p&&(c(f),e(f))};r.addEventListener("click",()=>{if(o.showPicker)try{o.showPicker();return}catch{}o.click()}),o.addEventListener("input",()=>h(o.value.toUpperCase())),s.addEventListener("input",()=>{const f=rt(s.value);f&&h(f)});const y=()=>{s.value=p};return s.addEventListener("blur",y),s.addEventListener("keydown",f=>{f.key==="Enter"&&(y(),s.select())}),i.addEventListener("click",async()=>{if("EyeDropper"in window)try{const{sRGBHex:f}=await new window.EyeDropper().open(),m=rt(f);m&&h(m)}catch{}else r.click()}),{el:n,setValue:f=>c(rt(f)||p)}}function Ia({label:t,options:e,onSelect:n}){const a=document.createElement("div");a.className="swatches",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",t);const o=e.map(l=>{const p=document.createElement("button");return p.type="button",p.className="swatch",p.setAttribute("role","radio"),p.dataset.value=l.value,p.innerHTML=`<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`,p.addEventListener("click",()=>i(l.value)),p});a.append(...o);let r=null;function s(l){r=l,o.forEach(c=>c.setAttribute("aria-checked",String(c.dataset.value===l)));const p=Math.max(0,o.findIndex(c=>c.dataset.value===l));o.forEach((c,h)=>{c.tabIndex=h===p?0:-1})}function i(l,p){l!==r&&(s(l),n(l)),p&&o.find(c=>c.dataset.value===l).focus()}return a.addEventListener("keydown",l=>{const p=o.indexOf(l.target.closest(".swatch"));if(p<0)return;const c={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[l.key];let h;if(c)h=(p+c+o.length)%o.length;else if(l.key==="Home")h=0;else if(l.key==="End")h=o.length-1;else return;l.preventDefault(),i(o[h].dataset.value,!0)}),s(null),{el:a,setValue:s}}const Da=[50,100,200,300,400,500,600,700,800,900,950],he=t=>Object.fromEntries(t.split(" ").map((e,n)=>[Da[n],`#${e}`])),st={slate:he("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),gray:he("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),zinc:he("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),neutral:he("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),stone:he("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")},N=t=>Object.fromEntries(t.split(" ").map((e,n)=>[400+100*n,`#${e}`])),it={red:N("f87171 ef4444 dc2626 b91c1c 991b1b"),orange:N("fb923c f97316 ea580c c2410c 9a3412"),amber:N("fbbf24 f59e0b d97706 b45309 92400e"),yellow:N("facc15 eab308 ca8a04 a16207 854d0e"),lime:N("a3e635 84cc16 65a30d 4d7c0f 3f6212"),green:N("4ade80 22c55e 16a34a 15803d 166534"),emerald:N("34d399 10b981 059669 047857 065f46"),teal:N("2dd4bf 14b8a6 0d9488 0f766e 115e59"),cyan:N("22d3ee 06b6d4 0891b2 0e7490 155e75"),sky:N("38bdf8 0ea5e9 0284c7 0369a1 075985"),blue:N("60a5fa 3b82f6 2563eb 1d4ed8 1e40af"),indigo:N("818cf8 6366f1 4f46e5 4338ca 3730a3"),violet:N("a78bfa 8b5cf6 7c3aed 6d28d9 5b21b6"),purple:N("c084fc a855f7 9333ea 7e22ce 6b21a8"),fuchsia:N("e879f9 d946ef c026d3 a21caf 86198f"),pink:N("f472b6 ec4899 db2777 be185d 9d174d"),rose:N("fb7185 f43f5e e11d48 be123c 9f1239")},Te=[{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"}],on="#4F46E5",Ba="#A0743C",Ua=[{value:"pure",label:"Pure",colour:"#8E8E93"},{value:"subtle",label:"Subtle",colour:"#8A89A6"},{value:"warm",label:"Warm",colour:"#9C9389"}],rn=["bg","surface","surface-raised","text","text-muted","border"],qa={bg:"#0F0F11",surface:"#18181B","surface-raised":"#1F1F23",text:"#F4F4F5","text-muted":"#A1A1AA",border:"#2E2E33"},Va={bg:4,surface:2,"surface-raised":2,text:5,"text-muted":12,border:10},W=t=>/^#[0-9a-f]{6}$/i.test(t||""),lt=t=>[500,600,700].includes(Number(t.shade))?Number(t.shade):600,dt=t=>t[0].toUpperCase()+t.slice(1);function sn(t){const e=l=>(l/=255,l<=.03928?l/12.92:((l+.055)/1.055)**2.4),[n,a,o]=[1,3,5].map(l=>e(parseInt(t.slice(l,l+2),16))),r=.2126*n+.7152*a+.0722*o,s=1.05/(r+.05),i=(r+.05)/(.0098+.05);return s>=i?"#FFFFFF":"#18181B"}const Me={id:"colour",title:"Colour",hint:"Brand colour · neutral tint · mode",uses:["--twd-primary","--twd-primary-hover","--twd-on-primary","--twd-focus",...rn.map(t=>`--twd-${t}`)],tokens(t){const e=t.colour||{},n={},a=e.mode==="dark",o=it[e.primary];if(!W(e.brand)&&o){const i=lt(e);n["--twd-primary"]=o[i],n["--twd-primary-hover"]=o[a?i-100:i+100],n["--twd-on-primary"]=sn(o[i]),n["--twd-focus"]=o[500]}W(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"]=sn(e.brand),n["--twd-focus"]=e.brand);const r=e.tint==="subtle"?W(e.brand)?e.brand:F("--twd-primary")||on:e.tint==="warm"?Ba:null,s=st[e.neutral];if(s){const i=a?{bg:s[950],surface:s[900],"surface-raised":s[800],text:s[100],"text-muted":s[400],border:s[800]}:{bg:s[50],surface:"#ffffff","surface-raised":"#ffffff",text:s[900],"text-muted":s[500],border:s[200]};Object.entries(i).forEach(([l,p])=>{n[`--twd-${l}`]=p})}else(a||r)&&rn.forEach(i=>{const l=a?qa[i]:F(`--twd-${i}`);l&&(n[`--twd-${i}`]=r?`color-mix(in oklch, ${l} ${100-Va[i]}%, ${r})`:l)});return n},parts:{themeTiles(t,e,{label:n="Theme"}={}){const a=o=>{const r=st[o.neutral],s=it[o.primary];return`<span class="theme" style="--bg:${r[50]};--line:${r[200]};--ink:${r[900]};--soft:${r[500]};--pri:${s[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[s[400],s[500],s[600],s[700],s[800],r[200],r[500],r[900]].map(i=>`<i style="background:${i}"></i>`).join("")}</span>`};t.append(V(e,{section:"colour",key:"theme",label:n,columns:2,className:"tiles-themes",options:Te.map(o=>({value:o.value,label:o.label,preview:a(o)})),current:o=>{const r=o.colour||{};return W(r.brand)?null:Te.find(s=>s.primary===r.primary&&s.neutral===r.neutral)?.value||null},select:o=>{const r=Te.find(s=>s.value===o);e.setSection("colour",{primary:r.primary,neutral:r.neutral,shade:null,brand:null,tint:null})},valueText:(o,r)=>{const s=r.colour||{};return o?"":s.primary||s.neutral||s.brand?"Custom":"Prototype colours"}}))},primary(t,e,{label:n="Primary"}={}){const a=D(n),o=V(e,{section:"colour",key:"primary",label:`${n} colour family`,columns:9,className:"tiles-swatches",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 W(l.brand)?null:l.primary||null},select:i=>e.setSection("colour",{primary:i,brand:null})});o.querySelector(".field-head").remove();const r=ee({label:"Shade",options:[500,600,700].map(i=>({value:String(i),label:String(i)})),onSelect:i=>e.setSection("colour",{shade:Number(i)})});a.append(o,r.el);const s=()=>{const i=e.getState().colour||{};r.setValue(String(lt(i))),a.setValue(W(i.brand)?i.brand.toLowerCase():i.primary?`${i.primary}-${lt(i)}`:"")};s(),e.onChange(s),t.append(a.el)},neutralTiles(t,e,{label:n="Neutral"}={}){t.append(V(e,{section:"colour",key:"neutral",label:n,columns:5,className:"tiles-greys",options:Object.entries(st).map(([a,o])=>({value:a,label:dt(a),preview:`<span class="greys">${[o[50],o[200],o[500],o[900]].map(r=>`<i style="background:${r}"></i>`).join("")}</span>`})),select:a=>e.setSection("colour",{neutral:a,tint:null}),valueText:a=>a||""}))},custom(t,e){const n=document.createElement("details");n.className="more more-custom",n.innerHTML='<summary><span class="rainbow" aria-hidden="true"></span><span>Custom colour…</span><span class="muted">any hex</span></summary>';const a=document.createElement("div");a.className="more-body",n.append(a),Me.parts.brand(a,e,{label:"Brand"}),W((e.getState().colour||{}).brand)&&(n.open=!0),t.append(n)},brand(t,e,{label:n="Brand"}={}){const a=D(n),o=za({label:"Brand colour",onInput:s=>e.setSection("colour",{brand:s})});a.append(o.el);const r=()=>o.setValue((e.getState().colour||{}).brand||(e.readToken||F)("--twd-primary")||on);r(),e.onChange(r),t.append(a.el)},neutral(t,e,{label:n="Neutral"}={}){const a=D(n),o=Ia({label:"Neutral tint",options:Ua,onSelect:s=>e.setSection("colour",{tint:s})});a.append(o.el);const r=()=>o.setValue((e.getState().colour||{}).tint||"pure");r(),e.onChange(r),t.append(a.el)},mode(t,e,{label:n="Mode"}={}){t.append(pe(e,{section:"colour",key:"mode",label:n,fallback:"light",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}))}},render(t,e){["brand","neutral","mode"].forEach(n=>this.parts[n](t,e))}},Ae=(t,e="var(--twd-surface)")=>`color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`,Ha={soft:{bg:Ae(14),fg:"var(--twd-primary)",border:"transparent",hover:Ae(22)},outline:{bg:"transparent",fg:"var(--twd-primary)",border:"var(--twd-primary)",hover:Ae(8,"transparent")},ghost:{bg:"transparent",fg:"var(--twd-primary)",border:"transparent",hover:Ae(10,"transparent")}},_a={small:{height:.8,pad:.75},large:{height:1.2,pad:1.25}},ln=Qt({id:"buttons",title:"Buttons",hint:"Style · corners · size",token:"--twd-radius-control",shape:"button",uses:["--twd-control-height","--twd-control-pad-x","--twd-button-bg","--twd-button-fg","--twd-button-border","--twd-button-hover"],max:24,presets:[{value:"square",label:"Square",radius:0},{value:"soft",label:"Soft",radius:4},{value:"rounded",label:"Rounded",radius:8},{value:"pill",label:"Pill",radius:999}],extraTokens(t){const e={},n=Ha[t.style];n&&Object.entries(n).forEach(([s,i])=>{e[`--twd-button-${s}`]=i});const a=_a[t.size];if(!a)return e;const o=ce(F("--twd-control-height"),a.height),r=ce(F("--twd-control-pad-x"),a.pad);return o&&(e["--twd-control-height"]=o),r&&(e["--twd-control-pad-x"]=r),e},extra:[{key:"style",label:"Style",fallback:"solid",columns:4,preview:t=>`<span class="shape shape-button style-${t}"></span>`,options:[{value:"solid",label:"Solid"},{value:"soft",label:"Soft"},{value:"outline",label:"Outline"},{value:"ghost",label:"Ghost"}]},{key:"size",label:"Size",fallback:"medium",preview:t=>`<span class="shape shape-button size-${t}"></span>`,options:[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"}]}]}),Ka={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"}},ct=Qt({id:"cards",title:"Cards",hint:"Style · corners · border",token:"--twd-radius-container",shape:"card",uses:["--twd-border-width-container","--twd-card-bg","--twd-card-border","--twd-card-shadow"],max:32,presets:[{value:"square",label:"Square",radius:0},{value:"soft",label:"Soft",radius:6},{value:"rounded",label:"Rounded",radius:12},{value:"large",label:"Large",radius:20}],extraTokens(t){const e={},n=Ka[t.style];if(n&&Object.entries(n).forEach(([a,o])=>{e[`--twd-card-${a}`]=o}),t.border==="none"&&(e["--twd-border-width-container"]="0px"),t.border==="thick"){const a=ce(F("--twd-border-width-container"),2);a&&(e["--twd-border-width-container"]=a)}return e},extra:[{key:"style",label:"Style",fallback:"filled",columns:4,preview:t=>`<span class="shape shape-card style-${t}"></span>`,options:[{value:"filled",label:"Filled"},{value:"outlined",label:"Outlined"},{value:"elevated",label:"Elevated"},{value:"tinted",label:"Tinted"}]},{key:"border",label:"Border",fallback:"thin",preview:t=>`<span class="shape shape-card border-${t}"></span>`,options:[{value:"none",label:"None"},{value:"thin",label:"Thin"},{value:"thick",label:"Thick"}]}]}),ae=60,pt={soft:{sm:[0,1,2,0,.06],md:[0,4,12,0,.08],lg:[0,12,32,0,.12]},crisp:{sm:[0,1,1,0,.12],md:[0,2,4,0,.14],lg:[0,4,8,0,.16]},bold:{sm:[2,2,0,0,.85],md:[3,3,0,0,.85],lg:[5,5,0,0,.85]}},Le=([t,e,n,a,o],r)=>{const s=Math.min(1,+(o*r).toFixed(3));return s<=0?"none":`${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${s})`},ut={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)):ae;if(n==="flat")return{"--twd-shadow-sm":"none","--twd-shadow-md":"none","--twd-shadow-lg":"none"};const o=pt[n];if(!o)return{};if(n==="soft"&&a===ae)return{};const r=a/ae;return{"--twd-shadow-sm":Le(o.sm,r),"--twd-shadow-md":Le(o.md,r),"--twd-shadow-lg":Le(o.lg,r)}},parts:{styleTiles(t,e,{label:n="Style"}={}){const a=o=>`<span class="shape shape-card shadow-${o}" style="box-shadow:${pt[o]?Le(pt[o].md,1):"none"}"></span>`;t.append(V(e,{section:"depth",key:"style",label:n,fallback:"soft",columns:4,options:["flat","soft","crisp","bold"].map(o=>({value:o,label:o[0].toUpperCase()+o.slice(1),preview:a(o)}))}))},style(t,e,{label:n="Style"}={}){t.append(pe(e,{section:"depth",key:"style",label:n,fallback:"soft",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(Aa(e,{section:"depth",key:"intensity",label:n,min:0,max:100,fallback:ae,format:a=>`${a}%`}))}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},Ga=t=>Math.min(1,Math.max(0,t)),dn=t=>Math.round(t/50)*50,ht=t=>`${+t.toFixed(1)}%`;function ft(t={}){return typeof t.bold=="number"&&isFinite(t.bold)&&t.bold!==.5?Ga(t.bold):null}const Pe=(t,e,n)=>(t.tokens(e)||{})[n]||F(n),Wa={id:"character",title:"Character",hint:"Subtle ↔ Bold",uses:[],tokens(t){const e=ft(t.character);if(e===null)return{};const n={},a=2*e-1,o=Math.max(0,a),r=Math.max(0,-a);n["--twd-weight-heading"]=String(dn(600+200*a)),n["--twd-weight-strong"]=String(dn(600+100*a));const s=Pe(Me,t,"--twd-border");if(r&&(n["--twd-border"]=`color-mix(in oklch, ${s} ${ht(100-50*r)}, var(--twd-bg))`),o){n["--twd-border"]=`color-mix(in oklch, ${s} ${ht(100-90*o)}, var(--twd-text))`;const l=Pe(Me,t,"--twd-text-muted");n["--twd-text-muted"]=`color-mix(in oklch, ${l} ${ht(100-35*o)}, var(--twd-text))`,["--twd-border-width","--twd-border-width-container"].forEach(p=>{const c=p==="--twd-border-width-container"?Pe(ct,t,p):F(p),h=parseFloat(c);isNaN(h)||(n[p]=`${Math.round(h*(1+o))}px`)}),[[ln,"--twd-radius-control"],[ct,"--twd-radius-container"]].forEach(([p,c])=>{const h=parseFloat(Pe(p,t,c));!isNaN(h)&&h<999&&(n[c]=ce(`${h}px`,1-.5*o))})}const i=t.depth||{};if(!i.style){const l=typeof i.intensity=="number"?i.intensity:ae,p=r?ut.tokens({depth:{style:"soft",intensity:l*(1-r)}}):ut.tokens({depth:{style:"bold",intensity:ae*o}});Object.assign(n,p)}return n},describe:(t,e)=>t==="bold"?{label:"Subtle ↔ Bold",value:`${Math.round(e*100)}%`}:null},Ya='<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>',Za='<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 Xa=0;function Ja({label:t,options:e,onSelect:n,placeholder:a,onOpen:o}){const r=`twd-fonts-${++Xa}`,s=document.createElement("div");s.className="font-select";const i=document.createElement("button");i.type="button",i.className="font-trigger",i.setAttribute("aria-haspopup","listbox"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-controls",r),i.innerHTML=`
+  `;const s=o.querySelector("input"),r=o.querySelector(".token-unit"),i=o.querySelector(".token-bar span"),l=o.querySelector(".token-swatch"),p=o.querySelector(".custom-tag"),c=o.querySelector(".token-reset");let h="";const y=()=>{let m=s.value;h&&/^-?\d*\.?\d+$/.test(m.trim())&&(m=`${m.trim()}${h}`);const x=Na(m,n),b=F(H(e));if(x===null){at(t,e)?t.setSection("custom",{[e]:null}):f();return}if(x===b&&!at(t,e))return f();t.setSection("custom",{[e]:x})};s.addEventListener("change",y),s.addEventListener("blur",()=>f()),s.addEventListener("keydown",m=>{m.key==="Enter"&&(m.preventDefault(),s.blur()),m.key==="Escape"&&(m.stopPropagation(),f(),s.blur())}),c.addEventListener("click",()=>t.setSection("custom",{[e]:null}));function f(){const m=F(H(e)),x=at(t,e),b=Fa(m,n);h=b?b.unit:"",document.activeElement!==s&&o.getRootNode().activeElement!==s&&(s.value=b?String(b.n):m),s.title=m,r.textContent=h,r.hidden=!h,i&&(i.style.width=`${Math.max(2,Math.min(100,(b?b.n:0)/a*100))}%`),l&&(l.style.background=m),o.classList.toggle("edited",x),p.hidden=!x,c.hidden=!x}return f(),t.onChange(f),o}const Ra={id:"custom",title:"Custom tokens",hint:"Any token, set to a fixed value",uses:[],tokens(t){return Object.fromEntries(Object.entries(t.custom||{}).map(([e,n])=>[H(e),n]))},describe:(t,e)=>({label:H(t),value:String(e)}),parts:Object.fromEntries(Object.entries(nn).map(([t,e])=>[t,(n,a,{label:o=e.label}={})=>{const s=D(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)?`${H(r)} … ${i.split("-").pop()}`:"");const l=document.createElement("div");l.className="token-rows",e.tokens.forEach(p=>l.append(ja(a,p,e.kind,e.bar))),s.append(l),n.append(s.el)}]))},he={compact:.75,regular:1,comfy:1.25},ot=[.75,1.25],on=[1,2,3,4,5,6,7,8].map(t=>`--twd-space-${t}`);function oe(t={}){return typeof t.factor=="number"&&isFinite(t.factor)?Math.min(ot[1],Math.max(ot[0],t.factor)):he[t.spacing]||1}const rt=t=>`${Math.round(t*100)}%`,za={id:"density",title:"Density",hint:"Compact · regular · comfortable",uses:on,tokens(t){const e=oe(t.density);if(e===1)return{};const n={};return on.forEach(a=>{const o=pe(F(a),e);o&&(n[a]=o)}),n},describe:(t,e)=>t==="factor"?{label:"Spacing",value:rt(e)}:null,parts:{spacingTiles(t,e,{label:n="Density"}={}){const a=(o,s)=>`<span class="sketch" style="padding:${s}px;gap:${o}px"><i></i><i></i><i></i></span>`;t.append(V(e,{section:"density",key:"spacing",label:n,options:[{value:"compact",label:"Compact",preview:a(2,5)},{value:"regular",label:"Regular",preview:a(4,8)},{value:"comfy",label:"Comfy",preview:a(6,11)}],current:o=>{const s=oe(o.density);return Object.keys(he).find(r=>he[r]===s)||null},select:o=>e.setSection("density",{spacing:o,factor:null}),valueText:(o,s)=>an(s,"spacing")?"Custom":o?"":rt(oe(s.density))}))},spacing(t,e,{label:n="Spacing"}={}){const a=D(n),o=ne({label:n,options:[{value:"compact",label:"Compact"},{value:"regular",label:"Regular"},{value:"comfy",label:"Comfy"}],onSelect:r=>e.setSection("density",{spacing:r,factor:null})});a.append(o.el);const s=()=>{const r=e.getState().density||{},i=oe(r),l=Object.keys(he).find(p=>he[p]===i);o.setValue(l||null),a.setValue(an(e.getState(),"spacing")?"Custom":l?"":rt(i))};s(),e.onChange(s),t.append(a.el)}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},Ia='<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>',Da=[[50,"white",10],[100,"white",20],[200,"white",36],[300,"white",56],[400,"white",78],[500,null,100],[600,"black",86],[700,"black",72],[800,"black",58],[900,"black",45],[950,"black",30]],st=t=>{let e=String(t).trim().replace(/^#/,"");return/^[0-9a-f]{3}$/i.test(e)&&(e=e.split("").map(n=>n+n).join("")),/^[0-9a-f]{6}$/i.test(e)?`#${e.toUpperCase()}`:null};function Ba({label:t,onInput:e}){const n=document.createElement("div");n.className="colour";const a=document.createElement("div");a.className="colour-field";const o=document.createElement("input");o.type="color",o.className="colour-picker",o.tabIndex=-1,o.setAttribute("aria-hidden","true");const s=document.createElement("button");s.type="button",s.className="colour-swatch",s.setAttribute("aria-label",`${t}: open colour picker`);const r=document.createElement("input");r.type="text",r.className="colour-hex",r.spellcheck=!1,r.maxLength=7,r.setAttribute("aria-label",`${t} hex value`);const i=document.createElement("button");i.type="button",i.className="colour-pipette",i.innerHTML=Ia,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=Da.map(([f,m,x])=>{const b=m?`color-mix(in oklch, var(--brand) ${x}%, ${m})`:"var(--brand)";return`<span title="${f}" style="background:${b}"></span>`}).join(""),n.append(a,l);let p="#000000";const c=f=>{p=f,o.value=f.toLowerCase(),s.style.background=f,n.getRootNode().activeElement!==r&&(r.value=f),n.style.setProperty("--brand",f)},h=f=>{f!==p&&(c(f),e(f))};s.addEventListener("click",()=>{if(o.showPicker)try{o.showPicker();return}catch{}o.click()}),o.addEventListener("input",()=>h(o.value.toUpperCase())),r.addEventListener("input",()=>{const f=st(r.value);f&&h(f)});const y=()=>{r.value=p};return r.addEventListener("blur",y),r.addEventListener("keydown",f=>{f.key==="Enter"&&(y(),r.select())}),i.addEventListener("click",async()=>{if("EyeDropper"in window)try{const{sRGBHex:f}=await new window.EyeDropper().open(),m=st(f);m&&h(m)}catch{}else s.click()}),{el:n,setValue:f=>c(st(f)||p)}}function Ua({label:t,options:e,onSelect:n}){const a=document.createElement("div");a.className="swatches",a.setAttribute("role","radiogroup"),a.setAttribute("aria-label",t);const o=e.map(l=>{const p=document.createElement("button");return p.type="button",p.className="swatch",p.setAttribute("role","radio"),p.dataset.value=l.value,p.innerHTML=`<span class="swatch-ring"><span class="swatch-dot" style="background:${l.colour}"></span></span><span class="swatch-label">${l.label}</span>`,p.addEventListener("click",()=>i(l.value)),p});a.append(...o);let s=null;function r(l){s=l,o.forEach(c=>c.setAttribute("aria-checked",String(c.dataset.value===l)));const p=Math.max(0,o.findIndex(c=>c.dataset.value===l));o.forEach((c,h)=>{c.tabIndex=h===p?0:-1})}function i(l,p){l!==s&&(r(l),n(l)),p&&o.find(c=>c.dataset.value===l).focus()}return a.addEventListener("keydown",l=>{const p=o.indexOf(l.target.closest(".swatch"));if(p<0)return;const c={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[l.key];let h;if(c)h=(p+c+o.length)%o.length;else if(l.key==="Home")h=0;else if(l.key==="End")h=o.length-1;else return;l.preventDefault(),i(o[h].dataset.value,!0)}),r(null),{el:a,setValue:r}}const qa=[50,100,200,300,400,500,600,700,800,900,950],fe=t=>Object.fromEntries(t.split(" ").map((e,n)=>[qa[n],`#${e}`])),it={slate:fe("f8fafc f1f5f9 e2e8f0 cbd5e1 94a3b8 64748b 475569 334155 1e293b 0f172a 020617"),gray:fe("f9fafb f3f4f6 e5e7eb d1d5db 9ca3af 6b7280 4b5563 374151 1f2937 111827 030712"),zinc:fe("fafafa f4f4f5 e4e4e7 d4d4d8 a1a1aa 71717a 52525b 3f3f46 27272a 18181b 09090b"),neutral:fe("fafafa f5f5f5 e5e5e5 d4d4d4 a3a3a3 737373 525252 404040 262626 171717 0a0a0a"),stone:fe("fafaf9 f5f5f4 e7e5e4 d6d3d1 a8a29e 78716c 57534e 44403c 292524 1c1917 0c0a09")},N=t=>Object.fromEntries(t.split(" ").map((e,n)=>[400+100*n,`#${e}`])),lt={red:N("f87171 ef4444 dc2626 b91c1c 991b1b"),orange:N("fb923c f97316 ea580c c2410c 9a3412"),amber:N("fbbf24 f59e0b d97706 b45309 92400e"),yellow:N("facc15 eab308 ca8a04 a16207 854d0e"),lime:N("a3e635 84cc16 65a30d 4d7c0f 3f6212"),green:N("4ade80 22c55e 16a34a 15803d 166534"),emerald:N("34d399 10b981 059669 047857 065f46"),teal:N("2dd4bf 14b8a6 0d9488 0f766e 115e59"),cyan:N("22d3ee 06b6d4 0891b2 0e7490 155e75"),sky:N("38bdf8 0ea5e9 0284c7 0369a1 075985"),blue:N("60a5fa 3b82f6 2563eb 1d4ed8 1e40af"),indigo:N("818cf8 6366f1 4f46e5 4338ca 3730a3"),violet:N("a78bfa 8b5cf6 7c3aed 6d28d9 5b21b6"),purple:N("c084fc a855f7 9333ea 7e22ce 6b21a8"),fuchsia:N("e879f9 d946ef c026d3 a21caf 86198f"),pink:N("f472b6 ec4899 db2777 be185d 9d174d"),rose:N("fb7185 f43f5e e11d48 be123c 9f1239")},Me=[{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"}],rn="#4F46E5",Va="#A0743C",Ha=[{value:"pure",label:"Pure",colour:"#8E8E93"},{value:"subtle",label:"Subtle",colour:"#8A89A6"},{value:"warm",label:"Warm",colour:"#9C9389"}],sn=["bg","surface","surface-raised","text","text-muted","border"],_a={bg:"#0F0F11",surface:"#18181B","surface-raised":"#1F1F23",text:"#F4F4F5","text-muted":"#A1A1AA",border:"#2E2E33"},Ka={bg:4,surface:2,"surface-raised":2,text:5,"text-muted":12,border:10},W=t=>/^#[0-9a-f]{6}$/i.test(t||""),dt=t=>[500,600,700].includes(Number(t.shade))?Number(t.shade):600,ct=t=>t[0].toUpperCase()+t.slice(1);function ln(t){const e=l=>(l/=255,l<=.03928?l/12.92:((l+.055)/1.055)**2.4),[n,a,o]=[1,3,5].map(l=>e(parseInt(t.slice(l,l+2),16))),s=.2126*n+.7152*a+.0722*o,r=1.05/(s+.05),i=(s+.05)/(.0098+.05);return r>=i?"#FFFFFF":"#18181B"}const Te={id:"colour",title:"Colour",hint:"Brand colour · neutral tint · mode",uses:["--twd-primary","--twd-primary-hover","--twd-on-primary","--twd-focus",...sn.map(t=>`--twd-${t}`)],tokens(t){const e=t.colour||{},n={},a=e.mode==="dark",o=lt[e.primary];if(!W(e.brand)&&o){const i=dt(e);n["--twd-primary"]=o[i],n["--twd-primary-hover"]=o[a?i-100:i+100],n["--twd-on-primary"]=ln(o[i]),n["--twd-focus"]=o[500]}W(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"]=ln(e.brand),n["--twd-focus"]=e.brand);const s=e.tint==="subtle"?W(e.brand)?e.brand:F("--twd-primary")||rn:e.tint==="warm"?Va:null,r=it[e.neutral];if(r){const i=a?{bg:r[950],surface:r[900],"surface-raised":r[800],text:r[100],"text-muted":r[400],border:r[800]}:{bg:r[50],surface:"#ffffff","surface-raised":"#ffffff",text:r[900],"text-muted":r[500],border:r[200]};Object.entries(i).forEach(([l,p])=>{n[`--twd-${l}`]=p})}else(a||s)&&sn.forEach(i=>{const l=a?_a[i]:F(`--twd-${i}`);l&&(n[`--twd-${i}`]=s?`color-mix(in oklch, ${l} ${100-Ka[i]}%, ${s})`:l)});return n},parts:{themeTiles(t,e,{label:n="Theme"}={}){const a=o=>{const s=it[o.neutral],r=lt[o.primary];return`<span class="theme" style="--bg:${s[50]};--line:${s[200]};--ink:${s[900]};--soft:${s[500]};--pri:${r[600]}"><i><b></b><s></s><u></u></i></span><span class="palette">${[r[400],r[500],r[600],r[700],r[800],s[200],s[500],s[900]].map(i=>`<i style="background:${i}"></i>`).join("")}</span>`};t.append(V(e,{section:"colour",key:"theme",label:n,columns:2,className:"tiles-themes",options:Me.map(o=>({value:o.value,label:o.label,preview:a(o)})),current:o=>{const s=o.colour||{};return W(s.brand)?null:Me.find(r=>r.primary===s.primary&&r.neutral===s.neutral)?.value||null},select:o=>{const s=Me.find(r=>r.value===o);e.setSection("colour",{primary:s.primary,neutral:s.neutral,shade:null,brand:null,tint:null})},valueText:(o,s)=>{const r=s.colour||{};return o?"":r.primary||r.neutral||r.brand?"Custom":"Prototype colours"}}))},primary(t,e,{label:n="Primary"}={}){const a=D(n),o=V(e,{section:"colour",key:"primary",label:`${n} colour family`,columns:9,className:"tiles-swatches",options:Object.entries(lt).map(([i,l])=>({value:i,label:ct(i),title:ct(i),preview:`<span class="dot" style="background:${l[500]}"></span>`})),current:i=>{const l=i.colour||{};return W(l.brand)?null:l.primary||null},select:i=>e.setSection("colour",{primary:i,brand:null})});o.querySelector(".field-head").remove();const s=ne({label:"Shade",options:[500,600,700].map(i=>({value:String(i),label:String(i)})),onSelect:i=>e.setSection("colour",{shade:Number(i)})});a.append(o,s.el);const r=()=>{const i=e.getState().colour||{};s.setValue(String(dt(i))),a.setValue(W(i.brand)?i.brand.toLowerCase():i.primary?`${i.primary}-${dt(i)}`:"")};r(),e.onChange(r),t.append(a.el)},neutralTiles(t,e,{label:n="Neutral"}={}){t.append(V(e,{section:"colour",key:"neutral",label:n,columns:5,className:"tiles-greys",options:Object.entries(it).map(([a,o])=>({value:a,label:ct(a),preview:`<span class="greys">${[o[50],o[200],o[500],o[900]].map(s=>`<i style="background:${s}"></i>`).join("")}</span>`})),select:a=>e.setSection("colour",{neutral:a,tint:null}),valueText:a=>a||""}))},custom(t,e){const n=document.createElement("details");n.className="more more-custom",n.innerHTML='<summary><span class="rainbow" aria-hidden="true"></span><span>Custom colour…</span><span class="muted">any hex</span></summary>';const a=document.createElement("div");a.className="more-body",n.append(a),Te.parts.brand(a,e,{label:"Brand"}),W((e.getState().colour||{}).brand)&&(n.open=!0),t.append(n)},brand(t,e,{label:n="Brand"}={}){const a=D(n),o=Ba({label:"Brand colour",onInput:r=>e.setSection("colour",{brand:r})});a.append(o.el);const s=()=>o.setValue((e.getState().colour||{}).brand||(e.readToken||F)("--twd-primary")||rn);s(),e.onChange(s),t.append(a.el)},neutral(t,e,{label:n="Neutral"}={}){const a=D(n),o=Ua({label:"Neutral tint",options:Ha,onSelect:r=>e.setSection("colour",{tint:r})});a.append(o.el);const s=()=>o.setValue((e.getState().colour||{}).tint||"pure");s(),e.onChange(s),t.append(a.el)},mode(t,e,{label:n="Mode"}={}){t.append(ue(e,{section:"colour",key:"mode",label:n,fallback:"light",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}))}},render(t,e){["brand","neutral","mode"].forEach(n=>this.parts[n](t,e))}},Ae=(t,e="var(--twd-surface)")=>`color-mix(in oklch, var(--twd-primary) ${t}%, ${e})`,Ga={soft:{bg:Ae(14),fg:"var(--twd-primary)",border:"transparent",hover:Ae(22)},outline:{bg:"transparent",fg:"var(--twd-primary)",border:"var(--twd-primary)",hover:Ae(8,"transparent")},ghost:{bg:"transparent",fg:"var(--twd-primary)",border:"transparent",hover:Ae(10,"transparent")}},Wa={small:{height:.8,pad:.75},large:{height:1.2,pad:1.25}},dn=en({id:"buttons",title:"Buttons",hint:"Style · corners · size",token:"--twd-radius-control",shape:"button",uses:["--twd-control-height","--twd-control-pad-x","--twd-button-bg","--twd-button-fg","--twd-button-border","--twd-button-hover"],max:24,presets:[{value:"square",label:"Square",radius:0},{value:"soft",label:"Soft",radius:4},{value:"rounded",label:"Rounded",radius:8},{value:"pill",label:"Pill",radius:999}],extraTokens(t){const e={},n=Ga[t.style];n&&Object.entries(n).forEach(([r,i])=>{e[`--twd-button-${r}`]=i});const a=Wa[t.size];if(!a)return e;const o=pe(F("--twd-control-height"),a.height),s=pe(F("--twd-control-pad-x"),a.pad);return o&&(e["--twd-control-height"]=o),s&&(e["--twd-control-pad-x"]=s),e},extra:[{key:"style",label:"Style",fallback:"solid",columns:4,preview:t=>`<span class="shape shape-button style-${t}"></span>`,options:[{value:"solid",label:"Solid"},{value:"soft",label:"Soft"},{value:"outline",label:"Outline"},{value:"ghost",label:"Ghost"}]},{key:"size",label:"Size",fallback:"medium",preview:t=>`<span class="shape shape-button size-${t}"></span>`,options:[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"}]}]}),Ya={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"}},pt=en({id:"cards",title:"Cards",hint:"Style · corners · border",token:"--twd-radius-container",shape:"card",uses:["--twd-border-width-container","--twd-card-bg","--twd-card-border","--twd-card-shadow"],max:32,presets:[{value:"square",label:"Square",radius:0},{value:"soft",label:"Soft",radius:6},{value:"rounded",label:"Rounded",radius:12},{value:"large",label:"Large",radius:20}],extraTokens(t){const e={},n=Ya[t.style];if(n&&Object.entries(n).forEach(([a,o])=>{e[`--twd-card-${a}`]=o}),t.border==="none"&&(e["--twd-border-width-container"]="0px"),t.border==="thick"){const a=pe(F("--twd-border-width-container"),2);a&&(e["--twd-border-width-container"]=a)}return e},extra:[{key:"style",label:"Style",fallback:"filled",columns:4,preview:t=>`<span class="shape shape-card style-${t}"></span>`,options:[{value:"filled",label:"Filled"},{value:"outlined",label:"Outlined"},{value:"elevated",label:"Elevated"},{value:"tinted",label:"Tinted"}]},{key:"border",label:"Border",fallback:"thin",preview:t=>`<span class="shape shape-card border-${t}"></span>`,options:[{value:"none",label:"None"},{value:"thin",label:"Thin"},{value:"thick",label:"Thick"}]}]}),re=60,ut={soft:{sm:[0,1,2,0,.06],md:[0,4,12,0,.08],lg:[0,12,32,0,.12]},crisp:{sm:[0,1,1,0,.12],md:[0,2,4,0,.14],lg:[0,4,8,0,.16]},bold:{sm:[2,2,0,0,.85],md:[3,3,0,0,.85],lg:[5,5,0,0,.85]}},Le=([t,e,n,a,o],s)=>{const r=Math.min(1,+(o*s).toFixed(3));return r<=0?"none":`${t}px ${e}px ${n}px ${a}px rgb(0 0 0 / ${r})`},ht={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)):re;if(n==="flat")return{"--twd-shadow-sm":"none","--twd-shadow-md":"none","--twd-shadow-lg":"none"};const o=ut[n];if(!o)return{};if(n==="soft"&&a===re)return{};const s=a/re;return{"--twd-shadow-sm":Le(o.sm,s),"--twd-shadow-md":Le(o.md,s),"--twd-shadow-lg":Le(o.lg,s)}},parts:{styleTiles(t,e,{label:n="Style"}={}){const a=o=>`<span class="shape shape-card shadow-${o}" style="box-shadow:${ut[o]?Le(ut[o].md,1):"none"}"></span>`;t.append(V(e,{section:"depth",key:"style",label:n,fallback:"soft",columns:4,options:["flat","soft","crisp","bold"].map(o=>({value:o,label:o[0].toUpperCase()+o.slice(1),preview:a(o)}))}))},style(t,e,{label:n="Style"}={}){t.append(ue(e,{section:"depth",key:"style",label:n,fallback:"soft",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(Pa(e,{section:"depth",key:"intensity",label:n,min:0,max:100,fallback:re,format:a=>`${a}%`}))}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},Za=t=>Math.min(1,Math.max(0,t)),cn=t=>Math.round(t/50)*50,ft=t=>`${+t.toFixed(1)}%`;function gt(t={}){return typeof t.bold=="number"&&isFinite(t.bold)&&t.bold!==.5?Za(t.bold):null}const Oe=(t,e,n)=>(t.tokens(e)||{})[n]||F(n),Xa={id:"character",title:"Character",hint:"Subtle ↔ Bold",uses:[],tokens(t){const e=gt(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(cn(600+200*a)),n["--twd-weight-strong"]=String(cn(600+100*a));const r=Oe(Te,t,"--twd-border");if(s&&(n["--twd-border"]=`color-mix(in oklch, ${r} ${ft(100-50*s)}, var(--twd-bg))`),o){n["--twd-border"]=`color-mix(in oklch, ${r} ${ft(100-90*o)}, var(--twd-text))`;const l=Oe(Te,t,"--twd-text-muted");n["--twd-text-muted"]=`color-mix(in oklch, ${l} ${ft(100-35*o)}, var(--twd-text))`,["--twd-border-width","--twd-border-width-container"].forEach(p=>{const c=p==="--twd-border-width-container"?Oe(pt,t,p):F(p),h=parseFloat(c);isNaN(h)||(n[p]=`${Math.round(h*(1+o))}px`)}),[[dn,"--twd-radius-control"],[pt,"--twd-radius-container"]].forEach(([p,c])=>{const h=parseFloat(Oe(p,t,c));!isNaN(h)&&h<999&&(n[c]=pe(`${h}px`,1-.5*o))})}const i=t.depth||{};if(!i.style){const l=typeof i.intensity=="number"?i.intensity:re,p=s?ht.tokens({depth:{style:"soft",intensity:l*(1-s)}}):ht.tokens({depth:{style:"bold",intensity:re*o}});Object.assign(n,p)}return n},describe:(t,e)=>t==="bold"?{label:"Subtle ↔ Bold",value:`${Math.round(e*100)}%`}:null},Ja='<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>',Qa='<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 eo=0;function to({label:t,options:e,onSelect:n,placeholder:a,onOpen:o}){const s=`twd-fonts-${++eo}`,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">${Ya}</span>`;const l=document.createElement("div");l.className="font-menu",l.id=r,l.setAttribute("role","listbox"),l.setAttribute("aria-label",t),l.hidden=!0;const p=e.map(u=>{const v=document.createElement("div");return v.className="font-option",v.setAttribute("role","option"),v.tabIndex=-1,v.dataset.value=u.value,v.innerHTML=`
+    <span class="font-chevron">${Ja}</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">${Za}</span>`,v.addEventListener("click",()=>b(u.value)),v});l.append(...p),s.append(i,l);let c=null;function h(u){const v=e.find(E=>E.value===u),L=v||a||e[0];c=v?v.value:a?null:e[0].value,i.querySelector(".font-name").textContent=L.name,i.querySelector(".font-fonts").textContent=L.fonts,i.querySelector(".font-aa").style.fontFamily=L.preview,i.setAttribute("aria-label",`${t}: ${L.name}, ${L.fonts}`),p.forEach(E=>E.setAttribute("aria-selected",String(E.dataset.value===c)))}function y(){const u=i.getBoundingClientRect(),v=l.offsetHeight,E=window.innerHeight-u.bottom-8>=v?u.bottom+4:Math.max(8,u.top-4-v);l.style.top=`${E}px`,l.style.left=`${u.left}px`,l.style.width=`${u.width}px`}function f(){l.hidden&&(l.hidden=!1,i.setAttribute("aria-expanded","true"),o&&o(),y(),(p.find(u=>u.dataset.value===c)||p[0]).focus(),setTimeout(()=>document.addEventListener("pointerdown",x,!0)),window.addEventListener("resize",m),s.closest(".body")?.addEventListener("scroll",m,{once:!0}))}function m(u){l.hidden||(l.hidden=!0,i.setAttribute("aria-expanded","false"),document.removeEventListener("pointerdown",x,!0),window.removeEventListener("resize",m),u===!0&&i.focus())}function x(u){u.composedPath().includes(s)||m()}function b(u){u!==c&&(h(u),n(u)),m(!0)}return i.addEventListener("click",()=>l.hidden?f():m(!0)),i.addEventListener("keydown",u=>{(u.key==="ArrowDown"||u.key==="ArrowUp")&&(u.preventDefault(),f())}),l.addEventListener("keydown",u=>{const v=p.indexOf(u.target);let L=null;if(u.key==="ArrowDown")L=Math.min(p.length-1,v+1);else if(u.key==="ArrowUp")L=Math.max(0,v-1);else if(u.key==="Home")L=0;else if(u.key==="End")L=p.length-1;else if(u.key==="Enter"||u.key===" "){u.preventDefault(),b(u.target.dataset.value);return}else if(u.key==="Escape"){u.preventDefault(),u.stopPropagation(),m(!0);return}else if(u.key==="Tab"){m();return}L!==null&&(u.preventDefault(),p[L].focus())}),h(a?null:e[0].value),{el:s,setValue:h}}const z='ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',Oe='Georgia, "Times New Roman", serif',Y=[{value:"neutral",name:"Neutral",fonts:"Inter · Inter",heading:`"Inter", ${z}`,body:`"Inter", ${z}`,load:["Inter:wght@400;500;600;700"]},{value:"modern",name:"Modern",fonts:"Geist · Geist",heading:`"Geist", ${z}`,body:`"Geist", ${z}`,load:["Geist:wght@400;500;600;700"]},{value:"editorial",name:"Editorial",fonts:"Fraunces · Inter",heading:`"Fraunces", ${Oe}`,body:`"Inter", ${z}`,load:["Fraunces:wght@400;600;700","Inter:wght@400;500;600;700"]},{value:"technical",name:"Technical",fonts:"Space Grotesk · DM Sans",heading:`"Space Grotesk", ${z}`,body:`"DM Sans", ${z}`,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", ${Oe}`,body:`"DM Sans", ${z}`,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", ${Oe}`,body:`"IBM Plex Sans", ${z}`,load:["IBM+Plex+Serif:wght@500;600;700","IBM+Plex+Sans:wght@400;500;600"]},{value:"elegant",name:"Elegant",fonts:"Instrument Serif · Inter",heading:`"Instrument Serif", ${Oe}`,body:`"Inter", ${z}`,load:["Instrument+Serif","Inter:wght@400;500;600;700"]},{value:"friendly",name:"Friendly",fonts:"Manrope · Manrope",heading:`"Manrope", ${z}`,body:`"Manrope", ${z}`,load:["Manrope:wght@400;500;600;700"]}],fe={compact:1.125,balanced:1.2,expressive:1.333},cn={xs:-2,sm:-1,base:0,lg:1,xl:2,"2xl":3,"3xl":4},pn=new Set;function gt(t){const e=t.filter(a=>!pn.has(a));if(!e.length)return;e.forEach(a=>pn.add(a));const n=document.createElement("link");n.rel="stylesheet",n.href=`https://fonts.googleapis.com/css2?${e.map(a=>`family=${a}`).join("&")}&display=swap`,n.dataset.twiddle="fonts",document.head.appendChild(n)}const Qa={id:"typography",title:"Typography",hint:"Font pairing · base size · scale",uses:["--twd-font-heading","--twd-font-body",...Object.keys(cn).map(t=>`--twd-text-${t}`)],tokens(t){const e=t.typography||{},n={},a=Y.find(o=>o.value===e.font);if(a&&(gt(a.load),n["--twd-font-heading"]=a.heading,n["--twd-font-body"]=a.body),e.base||e.scale){const o=Number(e.base)||16,r=fe[e.scale]||fe.balanced;Object.entries(cn).forEach(([s,i])=>{n[`--twd-text-${s}`]=`${+(o*r**i/16).toFixed(3)}rem`})}return n},parts:{fonts(t,e,{label:n="Fonts"}={}){const a=D(n),o=Ja({label:"Font pairing",options:Y.map(s=>({value:s.value,name:s.name,fonts:s.fonts,preview:s.heading})),placeholder:{name:"Default",fonts:"Prototype fonts",preview:z},onOpen:()=>gt([...new Set(Y.flatMap(s=>s.load))]),onSelect:s=>e.setSection("typography",{font:s})});a.append(o.el);const r=()=>o.setValue((e.getState().typography||{}).font||null);r(),e.onChange(r),t.append(a.el)},base(t,e,{label:n="Base size"}={}){t.append(pe(e,{section:"typography",key:"base",label:n,fallback:"16",options:["14","15","16"].map(a=>({value:a,label:a})),valueText:a=>`${a}px`}))},fontTiles(t,e,{label:n="Fonts"}={}){const a=i=>i.replace(/"/g,"&quot;"),o=i=>`<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`,r=V(e,{section:"typography",key:"font",label:n,columns:2,className:"tiles-fonts",options:[{value:"default",label:"Prototype fonts",sub:"Default",preview:o(z),wide:!0},...Y.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":Y.find(l=>l.value===i)?.name||""}),s=new IntersectionObserver(i=>{i.some(l=>l.isIntersecting)&&(gt([...new Set(Y.flatMap(l=>l.load))]),s.disconnect())});s.observe(r),t.append(r)},scaleTiles(t,e,{label:n="Scale"}={}){const a=o=>`<span class="ladder">${[-1,0,1,2].map(r=>`<b style="font-size:${Math.round(13*o**r)}px">A</b>`).join("")}</span>`;t.append(V(e,{section:"typography",key:"scale",label:n,fallback:"balanced",options:Object.entries(fe).map(([o,r])=>({value:o,label:o[0].toUpperCase()+o.slice(1),preview:a(r)})),valueText:o=>String(fe[o])}))},scale(t,e,{label:n="Scale"}={}){t.append(pe(e,{section:"typography",key:"scale",label:n,fallback:"balanced",options:[{value:"compact",label:"Compact"},{value:"balanced",label:"Balanced"},{value:"expressive",label:"Expressive"}],valueText:a=>String(fe[a])}))}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},[un,Fe]=at;function eo(t){return t>.56?"Bold":t<.44?"Subtle":"Balanced"}function hn(t){return t>1.06?"Comfy":t<.94?"Compact":"Regular"}const Ne=t=>t&&t[0].toUpperCase()+t.slice(1),fn=[["colour","Colour",t=>{const e=t.colour||{},n=Te.find(o=>o.primary===e.primary&&o.neutral===e.neutral);return{text:`${e.brand?e.brand.toUpperCase():n&&!e.shade?n.label:e.primary?`${Ne(e.primary)}${e.neutral?` · ${Ne(e.neutral)}`:""}`:"Prototype colours"}${e.mode==="dark"?" · Dark":""}`,swatch:F("--twd-primary")}}],["type","Type",t=>{const e=t.typography||{};return{text:`${Y.find(n=>n.value===e.font)?.name||"Prototype fonts"} · ${e.base||16}px`}}],["spacing","Spacing",t=>({text:hn(ne(t.density))})],["shape","Shape",t=>({text:`${Ne((t.buttons||{}).corners)||"Default"} corners`})],["shadows","Shadows",t=>({text:Ne((t.depth||{}).style)||(ft(t.character)!==null?"From the pad":"Default")})]],to={summary(t,e,{label:n="Current look",goTab:a}={}){const o=D(n),r=document.createElement("div");r.className="summary",fn.forEach(([i,l])=>{const p=document.createElement("button");p.type="button",p.className="summary-row",p.dataset.summary=i,p.innerHTML=`<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`,p.querySelector(".summary-name").textContent=l,p.addEventListener("click",()=>a&&a(i)),r.append(p)}),o.append(r);const s=()=>{const i=e.getState();fn.forEach(([l,,p])=>{const c=r.querySelector(`[data-summary="${l}"]`),h=p(i);c.querySelector(".summary-value").textContent=h.text;const y=c.querySelector(".summary-swatch");y.hidden=!h.swatch,h.swatch&&(y.style.background=h.swatch)})};s(),e.onChange(s),t.append(o.el)},character(t,e,{label:n="Character"}={}){const a=D(n),o=Ca({label:n,ends:{top:"Spacious",bottom:"Compact",left:"Subtle",right:"Bold"},onInput:(s,i)=>{const l=+(Fe-i*(Fe-un)).toFixed(3),p=+s.toFixed(3);e.setSections({density:{factor:l===1?null:l,spacing:null},character:{bold:p===.5?null:p}},"character")}});a.append(o.el);const r=()=>{const s=e.getState(),i=ne(s.density),l=ft(s.character),p=l===null?.5:l,c=`${hn(i)} · ${eo(p)}`;o.setValue(p,(Fe-i)/(Fe-un),c),a.setValue(c)};r(),e.onChange(r),t.append(a.el)}},mt=[{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}],no=[1,2,3,4,5,6,7,8],ao=/^var\(\s*--twd-space-(\d)\s*\)$/,bt=t=>{const e=/^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());return e?+(parseFloat(e[1])*(e[2]==="rem"?16:1)).toFixed(1):null};function oo(t,e,n){const a=`--twd-${e.key}`,o=document.createElement("div");o.className="role-row",n||o.classList.add("unused"),o.innerHTML=`
+      <span class="font-check">${Qa}</span>`,v.addEventListener("click",()=>b(u.value)),v});l.append(...p),r.append(i,l);let c=null;function h(u){const v=e.find(E=>E.value===u),O=v||a||e[0];c=v?v.value:a?null:e[0].value,i.querySelector(".font-name").textContent=O.name,i.querySelector(".font-fonts").textContent=O.fonts,i.querySelector(".font-aa").style.fontFamily=O.preview,i.setAttribute("aria-label",`${t}: ${O.name}, ${O.fonts}`),p.forEach(E=>E.setAttribute("aria-selected",String(E.dataset.value===c)))}function y(){const u=i.getBoundingClientRect(),v=l.offsetHeight,E=window.innerHeight-u.bottom-8>=v?u.bottom+4:Math.max(8,u.top-4-v);l.style.top=`${E}px`,l.style.left=`${u.left}px`,l.style.width=`${u.width}px`}function f(){l.hidden&&(l.hidden=!1,i.setAttribute("aria-expanded","true"),o&&o(),y(),(p.find(u=>u.dataset.value===c)||p[0]).focus(),setTimeout(()=>document.addEventListener("pointerdown",x,!0)),window.addEventListener("resize",m),r.closest(".body")?.addEventListener("scroll",m,{once:!0}))}function m(u){l.hidden||(l.hidden=!0,i.setAttribute("aria-expanded","false"),document.removeEventListener("pointerdown",x,!0),window.removeEventListener("resize",m),u===!0&&i.focus())}function x(u){u.composedPath().includes(r)||m()}function b(u){u!==c&&(h(u),n(u)),m(!0)}return i.addEventListener("click",()=>l.hidden?f():m(!0)),i.addEventListener("keydown",u=>{(u.key==="ArrowDown"||u.key==="ArrowUp")&&(u.preventDefault(),f())}),l.addEventListener("keydown",u=>{const v=p.indexOf(u.target);let O=null;if(u.key==="ArrowDown")O=Math.min(p.length-1,v+1);else if(u.key==="ArrowUp")O=Math.max(0,v-1);else if(u.key==="Home")O=0;else if(u.key==="End")O=p.length-1;else if(u.key==="Enter"||u.key===" "){u.preventDefault(),b(u.target.dataset.value);return}else if(u.key==="Escape"){u.preventDefault(),u.stopPropagation(),m(!0);return}else if(u.key==="Tab"){m();return}O!==null&&(u.preventDefault(),p[O].focus())}),h(a?null:e[0].value),{el:r,setValue:h}}const z='ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',Pe='Georgia, "Times New Roman", serif',Y=[{value:"neutral",name:"Neutral",fonts:"Inter · Inter",heading:`"Inter", ${z}`,body:`"Inter", ${z}`,load:["Inter:wght@400;500;600;700"]},{value:"modern",name:"Modern",fonts:"Geist · Geist",heading:`"Geist", ${z}`,body:`"Geist", ${z}`,load:["Geist:wght@400;500;600;700"]},{value:"editorial",name:"Editorial",fonts:"Fraunces · Inter",heading:`"Fraunces", ${Pe}`,body:`"Inter", ${z}`,load:["Fraunces:wght@400;600;700","Inter:wght@400;500;600;700"]},{value:"technical",name:"Technical",fonts:"Space Grotesk · DM Sans",heading:`"Space Grotesk", ${z}`,body:`"DM Sans", ${z}`,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", ${Pe}`,body:`"DM Sans", ${z}`,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", ${Pe}`,body:`"IBM Plex Sans", ${z}`,load:["IBM+Plex+Serif:wght@500;600;700","IBM+Plex+Sans:wght@400;500;600"]},{value:"elegant",name:"Elegant",fonts:"Instrument Serif · Inter",heading:`"Instrument Serif", ${Pe}`,body:`"Inter", ${z}`,load:["Instrument+Serif","Inter:wght@400;500;600;700"]},{value:"friendly",name:"Friendly",fonts:"Manrope · Manrope",heading:`"Manrope", ${z}`,body:`"Manrope", ${z}`,load:["Manrope:wght@400;500;600;700"]}],ge={compact:1.125,balanced:1.2,expressive:1.333},pn={xs:-2,sm:-1,base:0,lg:1,xl:2,"2xl":3,"3xl":4},un=new Set;function mt(t){const e=t.filter(a=>!un.has(a));if(!e.length)return;e.forEach(a=>un.add(a));const n=document.createElement("link");n.rel="stylesheet",n.href=`https://fonts.googleapis.com/css2?${e.map(a=>`family=${a}`).join("&")}&display=swap`,n.dataset.twiddle="fonts",document.head.appendChild(n)}const no={id:"typography",title:"Typography",hint:"Font pairing · base size · scale",uses:["--twd-font-heading","--twd-font-body",...Object.keys(pn).map(t=>`--twd-text-${t}`)],tokens(t){const e=t.typography||{},n={},a=Y.find(o=>o.value===e.font);if(a&&(mt(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=ge[e.scale]||ge.balanced;Object.entries(pn).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=D(n),o=to({label:"Font pairing",options:Y.map(r=>({value:r.value,name:r.name,fonts:r.fonts,preview:r.heading})),placeholder:{name:"Default",fonts:"Prototype fonts",preview:z},onOpen:()=>mt([...new Set(Y.flatMap(r=>r.load))]),onSelect:r=>e.setSection("typography",{font:r})});a.append(o.el);const s=()=>o.setValue((e.getState().typography||{}).font||null);s(),e.onChange(s),t.append(a.el)},base(t,e,{label:n="Base size"}={}){t.append(ue(e,{section:"typography",key:"base",label:n,fallback:"16",options:["14","15","16"].map(a=>({value:a,label:a})),valueText:a=>`${a}px`}))},fontTiles(t,e,{label:n="Fonts"}={}){const a=i=>i.replace(/"/g,"&quot;"),o=i=>`<span class="tile-aa" style="font-family:${a(i)}">Aa</span>`,s=V(e,{section:"typography",key:"font",label:n,columns:2,className:"tiles-fonts",options:[{value:"default",label:"Prototype fonts",sub:"Default",preview:o(z),wide:!0},...Y.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":Y.find(l=>l.value===i)?.name||""}),r=new IntersectionObserver(i=>{i.some(l=>l.isIntersecting)&&(mt([...new Set(Y.flatMap(l=>l.load))]),r.disconnect())});r.observe(s),t.append(s)},scaleTiles(t,e,{label:n="Scale"}={}){const a=o=>`<span class="ladder">${[-1,0,1,2].map(s=>`<b style="font-size:${Math.round(13*o**s)}px">A</b>`).join("")}</span>`;t.append(V(e,{section:"typography",key:"scale",label:n,fallback:"balanced",options:Object.entries(ge).map(([o,s])=>({value:o,label:o[0].toUpperCase()+o.slice(1),preview:a(s)})),valueText:o=>String(ge[o])}))},scale(t,e,{label:n="Scale"}={}){t.append(ue(e,{section:"typography",key:"scale",label:n,fallback:"balanced",options:[{value:"compact",label:"Compact"},{value:"balanced",label:"Balanced"},{value:"expressive",label:"Expressive"}],valueText:a=>String(ge[a])}))}},render(t,e){Object.entries(this.parts).filter(([n])=>!n.endsWith("Tiles")).forEach(([,n])=>n(t,e))}},[hn,Fe]=ot;function ao(t){return t>.56?"Bold":t<.44?"Subtle":"Balanced"}function fn(t){return t>1.06?"Comfy":t<.94?"Compact":"Regular"}const Ne=t=>t&&t[0].toUpperCase()+t.slice(1),gn=[["colour","Colour",t=>{const e=t.colour||{},n=Me.find(o=>o.primary===e.primary&&o.neutral===e.neutral);return{text:`${e.brand?e.brand.toUpperCase():n&&!e.shade?n.label:e.primary?`${Ne(e.primary)}${e.neutral?` · ${Ne(e.neutral)}`:""}`:"Prototype colours"}${e.mode==="dark"?" · Dark":""}`,swatch:F("--twd-primary")}}],["type","Type",t=>{const e=t.typography||{};return{text:`${Y.find(n=>n.value===e.font)?.name||"Prototype fonts"} · ${e.base||16}px`}}],["spacing","Spacing",t=>({text:fn(oe(t.density))})],["shape","Shape",t=>({text:`${Ne((t.buttons||{}).corners)||"Default"} corners`})],["shadows","Shadows",t=>({text:Ne((t.depth||{}).style)||(gt(t.character)!==null?"From the pad":"Default")})]],oo={summary(t,e,{label:n="Current look",goTab:a}={}){const o=D(n),s=document.createElement("div");s.className="summary",gn.forEach(([i,l])=>{const p=document.createElement("button");p.type="button",p.className="summary-row",p.dataset.summary=i,p.innerHTML=`<span class="summary-name"></span><span class="summary-swatch" hidden></span><span class="summary-value"></span><span class="chev" aria-hidden="true">${A.chevron}</span>`,p.querySelector(".summary-name").textContent=l,p.addEventListener("click",()=>a&&a(i)),s.append(p)}),o.append(s);const r=()=>{const i=e.getState();gn.forEach(([l,,p])=>{const c=s.querySelector(`[data-summary="${l}"]`),h=p(i);c.querySelector(".summary-value").textContent=h.text;const y=c.querySelector(".summary-swatch");y.hidden=!h.swatch,h.swatch&&(y.style.background=h.swatch)})};r(),e.onChange(r),t.append(o.el)},character(t,e,{label:n="Character"}={}){const a=D(n),o=Aa({label:n,ends:{top:"Spacious",bottom:"Compact",left:"Subtle",right:"Bold"},onInput:(r,i)=>{const l=+(Fe-i*(Fe-hn)).toFixed(3),p=+r.toFixed(3);e.setSections({density:{factor:l===1?null:l,spacing:null},character:{bold:p===.5?null:p}},"character")}});a.append(o.el);const s=()=>{const r=e.getState(),i=oe(r.density),l=gt(r.character),p=l===null?.5:l,c=`${fn(i)} · ${ao(p)}`;o.setValue(p,(Fe-i)/(Fe-hn),c),a.setValue(c)};s(),e.onChange(s),t.append(a.el)}},bt=[{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}],ro=[1,2,3,4,5,6,7,8],so=/^var\(\s*--twd-space-(\d)\s*\)$/,xt=t=>{const e=/^(-?\d*\.?\d+)(px|rem)?$/.exec(String(t).trim());return e?+(parseFloat(e[1])*(e[2]==="rem"?16:1)).toFixed(1):null};function io(t,e,n){const a=`--twd-${e.key}`,o=document.createElement("div");o.className="role-row",n||o.classList.add("unused"),o.innerHTML=`
     <span class="role-label" title="${a}${n?"":" (not used on this page)"}">${e.label}</span>
     <label class="token-value role-fixed" hidden><input type="text" inputmode="decimal" spellcheck="false" aria-label="${e.label}, fixed value"><span class="token-unit">px</span></label>
     <span class="step-select">
@@ -774,13 +789,13 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
       <span class="step-chevron" aria-hidden="true">${A.down}</span>
     </span>
     <button class="icon-btn token-reset" title="Back to the default" aria-label="Reset ${e.label}" hidden>${A.reset}</button>
-  `;const r=o.querySelector("select"),s=o.querySelector(".role-fixed"),i=s.querySelector("input"),l=o.querySelector(".token-reset"),p=()=>(t.getState().custom||{})[e.key],c=()=>{const x=p();if(x==null)return e.step?{step:e.step}:{fixed:F(a)};const b=ao.exec(x);return b?{step:+b[1]}:{fixed:x}},h=x=>t.setSection("custom",{[e.key]:x}),y=x=>e.step?x===`var(--twd-space-${e.step})`:!1;r.addEventListener("change",()=>{if(r.value==="fixed"){const b=bt(F(a));h(b!=null?`${b}px`:F(a)),i.focus(),i.select();return}const x=`var(--twd-space-${r.value})`;h(y(x)?null:x)});const f=()=>{const x=i.value.trim();if(!x)return h(null);h(/^-?\d*\.?\d+$/.test(x)?`${x}px`:x)};i.addEventListener("change",f),i.addEventListener("blur",()=>m()),i.addEventListener("keydown",x=>{x.key==="Enter"&&(x.preventDefault(),i.blur()),x.key==="Escape"&&(x.stopPropagation(),m(),i.blur())}),l.addEventListener("click",()=>h(null));function m(){const x=c();if(r.innerHTML=no.map(u=>`<option value="${u}">space-${u} · ${bt(F(`--twd-space-${u}`))??"?"}</option>`).join("")+'<option value="fixed">Fixed</option>',r.value=x.step?String(x.step):"fixed",s.hidden=!x.fixed,o.classList.toggle("is-fixed",!!x.fixed),x.fixed&&o.getRootNode().activeElement!==i){const u=bt(x.fixed);i.value=u!=null?String(u):x.fixed}const b=p()!=null;o.classList.toggle("edited",b),l.hidden=!b}return m(),t.onChange(m),o}const ro={spacing(t,e,{label:n="Roles"}={}){const a=$a(),o=D(n);o.el.classList.add("token-field");const r=mt.filter(l=>!a.has(`--twd-${l.key}`));o.setValue(r.length===mt.length?"not used on this page":"");const s=document.createElement("div");s.className="token-rows",mt.forEach(l=>s.append(oo(e,l,a.has(`--twd-${l.key}`)))),o.append(s),t.append(o.el);const i=document.createElement("p");i.className="role-note",i.textContent=r.length?`Only elements styled with these tokens change. Not used on this page: ${r.map(l=>l.label).join(", ")}.`:"Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.",t.append(i)}},ge=[{id:"overview",title:"Overview",icon:"tabOverview",parts:[["simple","character"],["simple","summary"]]},{id:"colour",title:"Colour",icon:"tabColour",parts:[["colour","themeTiles"],{heading:"Fine-tune",note:"Tailwind palette"},["colour","primary"],["colour","neutralTiles"],["colour","custom"],["colour","mode"],"warnings",{more:"Colour tokens",parts:[["custom","colours"]]}]},{id:"type",title:"Type",icon:"tabType",parts:[["typography","fontTiles"],["typography","base"],["typography","scaleTiles"],{more:"Type tokens",parts:[["custom","fonts"],["custom","type"],["custom","leading"],["custom","weights"]]}]},{id:"spacing",title:"Spacing",icon:"tabSpacing",parts:[["density","spacingTiles"],{more:"Layout roles",parts:[["roles","spacing"]]},{more:"Spacing tokens",parts:[["custom","spacing"]]}]},{id:"shape",title:"Shape",icon:"tabShape",parts:[{heading:"Buttons"},["buttons","styleTiles",{label:"Style"}],["buttons","cornerTiles",{label:"Corners"}],["buttons","sizeTiles",{label:"Size"}],{heading:"Cards"},["cards","styleTiles",{label:"Style"}],["cards","cornerTiles",{label:"Corners"}],["cards","borderTiles",{label:"Borders"}],{more:"Shape tokens",parts:[["custom","buttonStyle"],["custom","cardStyle"],["custom","cardShadow"],["custom","corners"],["custom","controls"],["custom","borders"]]}]},{id:"shadows",title:"Shadows",icon:"tabShadows",parts:[["depth","styleTiles"],["depth","intensity"],{more:"Shadow tokens",parts:[["custom","shadows"]]}]}],O=t=>String(t).replace(/[&<>"]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[e]);function so({sections:t,store:e,view:n}){const a=document.createElement("div");a.id="twiddle-root",document.body.appendChild(a);const o=a.attachShadow({mode:"open"}),r=d=>d.map(g=>`
+  `;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=so.exec(x);return b?{step:+b[1]}:{fixed:x}},h=x=>t.setSection("custom",{[e.key]:x}),y=x=>e.step?x===`var(--twd-space-${e.step})`:!1;s.addEventListener("change",()=>{if(s.value==="fixed"){const b=xt(F(a));h(b!=null?`${b}px`:F(a)),i.focus(),i.select();return}const x=`var(--twd-space-${s.value})`;h(y(x)?null:x)});const f=()=>{const x=i.value.trim();if(!x)return h(null);h(/^-?\d*\.?\d+$/.test(x)?`${x}px`:x)};i.addEventListener("change",f),i.addEventListener("blur",()=>m()),i.addEventListener("keydown",x=>{x.key==="Enter"&&(x.preventDefault(),i.blur()),x.key==="Escape"&&(x.stopPropagation(),m(),i.blur())}),l.addEventListener("click",()=>h(null));function m(){const x=c();if(s.innerHTML=ro.map(u=>`<option value="${u}">space-${u} · ${xt(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=xt(x.fixed);i.value=u!=null?String(u):x.fixed}const b=p()!=null;o.classList.toggle("edited",b),l.hidden=!b}return m(),t.onChange(m),o}const lo={spacing(t,e,{label:n="Roles"}={}){const a=Ma(),o=D(n);o.el.classList.add("token-field");const s=bt.filter(l=>!a.has(`--twd-${l.key}`));o.setValue(s.length===bt.length?"not used on this page":"");const r=document.createElement("div");r.className="token-rows",bt.forEach(l=>r.append(io(e,l,a.has(`--twd-${l.key}`)))),o.append(r),t.append(o.el);const i=document.createElement("p");i.className="role-note",i.textContent=s.length?`Only elements styled with these tokens change. Not used on this page: ${s.map(l=>l.label).join(", ")}.`:"Each role points at a spacing step, so Density still scales it. Pick another step, or a fixed value.",t.append(i)}},me=[{id:"overview",title:"Overview",icon:"tabOverview",parts:[["simple","character"],["simple","summary"]]},{id:"colour",title:"Colour",icon:"tabColour",parts:[["colour","themeTiles"],{heading:"Fine-tune",note:"Tailwind palette"},["colour","primary"],["colour","neutralTiles"],["colour","custom"],["colour","mode"],"warnings",{more:"Colour tokens",parts:[["custom","colours"]]}]},{id:"type",title:"Type",icon:"tabType",parts:[["typography","fontTiles"],["typography","base"],["typography","scaleTiles"],{more:"Type tokens",parts:[["custom","fonts"],["custom","type"],["custom","leading"],["custom","weights"]]}]},{id:"spacing",title:"Spacing",icon:"tabSpacing",parts:[["density","spacingTiles"],{more:"Layout roles",parts:[["roles","spacing"]]},{more:"Spacing tokens",parts:[["custom","spacing"]]}]},{id:"shape",title:"Shape",icon:"tabShape",parts:[{heading:"Buttons"},["buttons","styleTiles",{label:"Style"}],["buttons","cornerTiles",{label:"Corners"}],["buttons","sizeTiles",{label:"Size"}],{heading:"Cards"},["cards","styleTiles",{label:"Style"}],["cards","cornerTiles",{label:"Corners"}],["cards","borderTiles",{label:"Borders"}],{more:"Shape tokens",parts:[["custom","buttonStyle"],["custom","cardStyle"],["custom","cardShadow"],["custom","corners"],["custom","controls"],["custom","borders"]]}]},{id:"shadows",title:"Shadows",icon:"tabShadows",parts:[["depth","styleTiles"],["depth","intensity"],{more:"Shadow tokens",parts:[["custom","shadows"]]}]}],P=t=>String(t).replace(/[&<>"]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[e]);function co({sections:t,store:e,view:n}){const a=document.createElement("div");a.id="twiddle-root",document.body.appendChild(a);const o=a.attachShadow({mode:"open"}),s=d=>d.map(g=>`
     <details data-section="${g.id}">
       <summary>${g.title}<span class="chev">${A.chevron}</span></summary>
       <div class="section-body"><div class="placeholder">${g.hint}</div></div>
     </details>
   `).join("");o.innerHTML=`
-    <style>${aa}</style>
+    <style>${sa}</style>
     <div class="pick-box" hidden><span class="pick-tag"></span></div>
     <div class="wrap">
       <div class="toast" role="status"></div>
@@ -791,6 +806,7 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
           <button class="icon-btn" data-action="compare" title="Hold to see the original (Alt+C toggles)" aria-label="Compare with original" aria-pressed="false">${A.compare}</button>
           <button class="icon-btn" data-action="copy" title="Copy link to this version" aria-label="Copy link">${A.link}</button>
           <button class="icon-btn" data-action="reset" title="Reset to defaults" aria-label="Reset">${A.reset}</button>
+          <button class="icon-btn" data-action="minimise" title="Minimise to the tabs" aria-label="Minimise to the tabs">${A.minimise}</button>
           <button class="icon-btn" data-action="close" title="Close (Alt+T)" aria-label="Close">${A.close}</button>
         </div>
         <div class="actions">
@@ -809,12 +825,12 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
         </div>
         <div class="original-pill" hidden>Showing original</div>
         <div class="body" data-view="global"><div class="setup-hint" role="status" hidden></div>
-          ${ge.map(d=>`<div class="page page-fields" data-page="${d.id}" hidden></div>`).join("")}
+          ${me.map(d=>`<div class="page page-fields" data-page="${d.id}" hidden></div>`).join("")}
         </div>
         <div class="body" data-view="local" hidden></div>
         <div class="body" data-view="changes" hidden></div>
         <nav class="tabbar" aria-label="Areas">
-          ${ge.map(d=>`<button class="tab" data-tab="${d.id}" aria-pressed="false">${A[d.icon]}<span>${d.title}</span></button>`).join("")}
+          ${me.map(d=>`<button class="tab" data-tab="${d.id}" aria-pressed="false">${A[d.icon]}<span>${d.title}</span></button>`).join("")}
         </nav>
       </div>
       <button class="launcher" aria-label="Open Panel" aria-expanded="false">${A.panelMark}</button>
@@ -832,43 +848,43 @@ ${Object.entries(s).map(([i,l])=>`  ${i}: ${l} !important;`).join(`
         </div>
       </div>
     </div>
-  `;const s=d=>o.querySelector(d),i=s(".panel"),l=s(".launcher"),p=s(".toast"),c={global:s('[data-view="global"]'),local:s('[data-view="local"]'),changes:s('[data-view="changes"]')},h=s(".pick-box"),y=s(".pick-tag"),f={getState:e.getState,setSection:e.setSection,setSections:e.setSections,onChange:e.onChange};function m(d,g,w){g.forEach(k=>{if(typeof k.render!="function")return;const C=d.querySelector(`[data-section="${k.id}"] .section-body`);C.innerHTML="",k.render(C,w)});const $=[...d.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){g.forEach(w=>{if(w==="warnings"){const S=document.createElement("div");S.className="warnings page-warnings",d.append(S);return}if(w.heading){const S=document.createElement("div");S.className="page-heading",S.innerHTML=`<span></span>${w.note?'<span class="muted"></span>':""}`,S.firstChild.textContent=w.heading,w.note&&(S.lastChild.textContent=w.note),d.append(S);return}if(w.more){const S=document.createElement("details");S.className="more",S.innerHTML=`<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`,S.querySelector("summary span:last-child").textContent=w.more,b(S.querySelector(".more-body"),w.parts),d.append(S);return}if(w.tabs){const S=w.tabs.map(j=>{const I=document.createElement("div");return I.className="tab-pane",b(I,j.parts),I}),ke=ee({label:"View",options:w.tabs.map((j,I)=>({value:String(I),label:j.label})),onSelect:j=>{ke.setValue(j),S.forEach((I,vo)=>{I.hidden=String(vo)!==j})}});ke.setValue("0"),S.forEach((j,I)=>{j.hidden=I!==0}),d.append(ke.el,...S);return}const[$,k,C={}]=w,q=$==="simple"?to[k]:$==="roles"?ro[k]:x[$]?.parts?.[k];q&&q(d,f,{...C,buttons:x.buttons,cards:x.cards,goTab:S=>{X("global"),E(S)}})})}ge.forEach(d=>b(c.global.querySelector(`[data-page="${d.id}"]`),d.parts));const u=[...o.querySelectorAll(".tab")];let v=ge.some(d=>d.id===le("tab"))?le("tab"):ge[0].id;function L(){u.forEach(d=>d.setAttribute("aria-pressed",String(Z==="global"&&d.dataset.tab===v)))}function E(d){v=d,de("tab",d),c.global.querySelectorAll(".page").forEach(g=>{g.hidden=g.dataset.page!==d}),c.global.scrollTop=0,L()}const oe=d=>d.map(g=>`<div class="warning">${A.warn}<span>${O(g.text)}</span></div>`).join("");let Z="global";function X(d){Z=d,Object.entries(c).forEach(([g,w])=>{w.hidden=g!==d}),s('[data-action="changes"]').setAttribute("aria-pressed",String(d==="changes")),d!=="local"&&fo(),d==="changes"&&On(),L()}E(v);const xt="cubic-bezier(0.3, 0.7, 0.2, 1)",wt="cubic-bezier(0.2, 0.8, 0.2, 1)",je=640,me=100,vt=50,po=()=>l.querySelector(".mark-knob"),uo=()=>[l.querySelector(".mark-t1"),l.querySelector(".mark-t2")];function mn(d){if(matchMedia("(prefers-reduced-motion: reduce)").matches||!l.animate)return;const g=po(),[w,$]=uo(),k=C=>`translateY(${C}px)`;if(d){g.animate([{transform:k(32)},{transform:k(-6),offset:.78},{transform:k(0)}],{duration:je,easing:xt});const C=[{transform:"scale(0.4)",opacity:0},{transform:"scale(1)",opacity:1}];$.animate(C,{duration:me*2,delay:je*.12,easing:xt,fill:"backwards"}),w.animate(C,{duration:me*2,delay:je*.32+vt,easing:xt,fill:"backwards"})}else{const C=[{opacity:1},{opacity:0}];w.animate(C,{duration:me,easing:wt}),$.animate(C,{duration:me,delay:vt/2,easing:wt,fill:"backwards"}),g.animate([{transform:k(0)},{transform:k(34),offset:.8},{transform:k(32)}],{duration:je*.7,delay:me+vt/2,easing:wt,fill:"backwards"})}}function be({animate:d=!0}={}){i.hidden&&d&&mn(!0),i.hidden=!1,l.setAttribute("aria-expanded","true"),l.setAttribute("aria-label","Close Panel"),de("panel","open")}function yt(){i.hidden||mn(!1),i.hidden=!0,l.setAttribute("aria-expanded","false"),l.setAttribute("aria-label","Open Panel"),de("panel","closed"),Re()}function kt(){i.hidden?be():yt()}let bn;function _(d){p.textContent=d,p.classList.add("show"),clearTimeout(bn),bn=setTimeout(()=>p.classList.remove("show"),1600)}function xe(d,g){navigator.clipboard.writeText(d).then(()=>_(g)).catch(()=>_("Couldn’t copy — select the text and copy it instead"))}let St=null;function re(d,g){if(St=d,!d){h.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||Xe(d),h.hidden=!1}const xn=()=>{St&&!h.hidden&&re(St,y.textContent)};window.addEventListener("scroll",xn,!0),window.addEventListener("resize",xn);let we=!1;const wn=s('[data-action="pick"]'),vn=d=>d.composedPath().includes(a);function yn(d){if(vn(d))return;const g=d.target;g&&g.nodeType===1&&g!==document.documentElement&&g!==document.body&&re(g)}function kn(d){if(vn(d)||(d.preventDefault(),d.stopPropagation(),d.type!=="click"))return;const g=d.target;!g||g===document.documentElement||g===document.body||(Re(),Cn(g))}function Sn(d){d.key==="Escape"&&(d.preventDefault(),Re(),M&&re(M.el))}const $n=["pointerdown","mousedown","mouseup","click"];function En(){if(!we){if(we=!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)}be(),wn.setAttribute("aria-pressed","true"),document.documentElement.classList.add("twd-picking"),document.addEventListener("pointermove",yn,!0),$n.forEach(d=>document.addEventListener(d,kn,!0)),document.addEventListener("keydown",Sn,!0),_("Click an element · Esc to cancel")}}function Re(){we&&(we=!1,wn.setAttribute("aria-pressed","false"),document.documentElement.classList.remove("twd-picking"),document.removeEventListener("pointermove",yn,!0),$n.forEach(d=>document.removeEventListener(d,kn,!0)),document.removeEventListener("keydown",Sn,!0),re(M?M.el:null))}let M=null;function ho(d,g){const w=[];return{ctx:{getState:()=>(e.getState().scopes||{})[d]||{},setSection:($,k)=>e.setScope(d,$,k),onChange:$=>{const k=e.onChange($);return w.push(k),k},readToken:$=>getComputedStyle(g).getPropertyValue($).trim()},dispose:()=>w.forEach($=>$())}}function Cn(d,g){const w=da(d),$=e.getState().scopes||{};g||(g=!$[w.elementSelector]&&w.classSelector&&$[w.classSelector]?"class":"element"),M&&M.dispose(),M={el:d,info:w,target:g,dispose:()=>{}},$t(),X("local"),be(),re(d)}const Tn=()=>M.target==="class"?M.info.classSelector:M.info.elementSelector;function $t(){M.dispose();const{info:d}=M,g=t.filter(j=>(j.uses||[]).some(I=>d.tokens.has(I))),w=c.local;if(w.innerHTML=`
+  `;const r=d=>o.querySelector(d),i=r(".panel"),l=r(".launcher"),p=r(".toast"),c={global:r('[data-view="global"]'),local:r('[data-view="local"]'),changes:r('[data-view="changes"]')},h=r(".pick-box"),y=r(".pick-tag"),f={getState:e.getState,setSection:e.setSection,setSections:e.setSections,onChange:e.onChange};function m(d,g,w){g.forEach(k=>{if(typeof k.render!="function")return;const C=d.querySelector(`[data-section="${k.id}"] .section-body`);C.innerHTML="",k.render(C,w)});const $=[...d.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){g.forEach(w=>{if(w==="warnings"){const S=document.createElement("div");S.className="warnings page-warnings",d.append(S);return}if(w.heading){const S=document.createElement("div");S.className="page-heading",S.innerHTML=`<span></span>${w.note?'<span class="muted"></span>':""}`,S.firstChild.textContent=w.heading,w.note&&(S.lastChild.textContent=w.note),d.append(S);return}if(w.more){const S=document.createElement("details");S.className="more",S.innerHTML=`<summary><span class="chev" aria-hidden="true">${A.chevron}</span><span></span></summary><div class="more-body"></div>`,S.querySelector("summary span:last-child").textContent=w.more,b(S.querySelector(".more-body"),w.parts),d.append(S);return}if(w.tabs){const S=w.tabs.map(j=>{const I=document.createElement("div");return I.className="tab-pane",b(I,j.parts),I}),ke=ne({label:"View",options:w.tabs.map((j,I)=>({value:String(I),label:j.label})),onSelect:j=>{ke.setValue(j),S.forEach((I,$o)=>{I.hidden=String($o)!==j})}});ke.setValue("0"),S.forEach((j,I)=>{j.hidden=I!==0}),d.append(ke.el,...S);return}const[$,k,C={}]=w,q=$==="simple"?oo[k]:$==="roles"?lo[k]:x[$]?.parts?.[k];q&&q(d,f,{...C,buttons:x.buttons,cards:x.cards,goTab:S=>{X("global"),E(S)}})})}me.forEach(d=>b(c.global.querySelector(`[data-page="${d.id}"]`),d.parts));const u=[...o.querySelectorAll(".tab")];let v=me.some(d=>d.id===te("tab"))?te("tab"):me[0].id;function O(){u.forEach(d=>d.setAttribute("aria-pressed",String(Z==="global"&&d.dataset.tab===v)))}function E(d){v=d,ce("tab",d),c.global.querySelectorAll(".page").forEach(g=>{g.hidden=g.dataset.page!==d}),c.global.scrollTop=0,O()}const se=d=>d.map(g=>`<div class="warning">${A.warn}<span>${P(g.text)}</span></div>`).join("");let Z="global";function X(d){Z=d,Object.entries(c).forEach(([g,w])=>{w.hidden=g!==d}),r('[data-action="changes"]').setAttribute("aria-pressed",String(d==="changes")),d!=="local"&&xo(),d==="changes"&&jn(),O()}E(v);const wt="cubic-bezier(0.3, 0.7, 0.2, 1)",vt="cubic-bezier(0.2, 0.8, 0.2, 1)",je=640,be=100,yt=50,fo=()=>l.querySelector(".mark-knob"),go=()=>[l.querySelector(".mark-t1"),l.querySelector(".mark-t2")];function bn(d){if(matchMedia("(prefers-reduced-motion: reduce)").matches||!l.animate)return;const g=fo(),[w,$]=go(),k=C=>`translateY(${C}px)`;if(d){g.animate([{transform:k(32)},{transform:k(-6),offset:.78},{transform:k(0)}],{duration:je,easing:wt});const C=[{transform:"scale(0.4)",opacity:0},{transform:"scale(1)",opacity:1}];$.animate(C,{duration:be*2,delay:je*.12,easing:wt,fill:"backwards"}),w.animate(C,{duration:be*2,delay:je*.32+yt,easing:wt,fill:"backwards"})}else{const C=[{opacity:1},{opacity:0}];w.animate(C,{duration:be,easing:vt}),$.animate(C,{duration:be,delay:yt/2,easing:vt,fill:"backwards"}),g.animate([{transform:k(0)},{transform:k(34),offset:.8},{transform:k(32)}],{duration:je*.7,delay:be+yt/2,easing:vt,fill:"backwards"})}}const xn=r(".wrap");let wn=!1;function Re(d){wn=d,i.classList.toggle("minimised",d),i.hidden||ce("panel",d?"tabs":"open")}function J({animate:d=!0}={}){i.hidden&&d&&bn(!0),i.hidden=!1,xn.classList.add("is-open"),l.setAttribute("aria-expanded","true"),l.setAttribute("aria-label","Close Panel"),Re(!1)}function mo(){i.hidden&&J(),Re(!0)}function kt(){i.hidden||bn(!1),i.hidden=!0,xn.classList.remove("is-open"),l.setAttribute("aria-expanded","false"),l.setAttribute("aria-label","Open Panel"),ce("panel","closed"),ze()}function St(){i.hidden?J():kt()}let vn;function _(d){p.textContent=d,p.classList.add("show"),clearTimeout(vn),vn=setTimeout(()=>p.classList.remove("show"),1600)}function xe(d,g){navigator.clipboard.writeText(d).then(()=>_(g)).catch(()=>_("Couldn’t copy — select the text and copy it instead"))}let $t=null;function ie(d,g){if($t=d,!d){h.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||Je(d),h.hidden=!1}const yn=()=>{$t&&!h.hidden&&ie($t,y.textContent)};window.addEventListener("scroll",yn,!0),window.addEventListener("resize",yn);let we=!1;const kn=r('[data-action="pick"]'),Sn=d=>d.composedPath().includes(a);function $n(d){if(Sn(d))return;const g=d.target;g&&g.nodeType===1&&g!==document.documentElement&&g!==document.body&&ie(g)}function En(d){if(Sn(d)||(d.preventDefault(),d.stopPropagation(),d.type!=="click"))return;const g=d.target;!g||g===document.documentElement||g===document.body||(ze(),An(g))}function Cn(d){d.key==="Escape"&&(d.preventDefault(),ze(),T&&ie(T.el))}const Mn=["pointerdown","mousedown","mouseup","click"];function Tn(){if(!we){if(we=!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)}J(),kn.setAttribute("aria-pressed","true"),document.documentElement.classList.add("twd-picking"),document.addEventListener("pointermove",$n,!0),Mn.forEach(d=>document.addEventListener(d,En,!0)),document.addEventListener("keydown",Cn,!0),_("Click an element · Esc to cancel")}}function ze(){we&&(we=!1,kn.setAttribute("aria-pressed","false"),document.documentElement.classList.remove("twd-picking"),document.removeEventListener("pointermove",$n,!0),Mn.forEach(d=>document.removeEventListener(d,En,!0)),document.removeEventListener("keydown",Cn,!0),ie(T?T.el:null))}let T=null;function bo(d,g){const w=[];return{ctx:{getState:()=>(e.getState().scopes||{})[d]||{},setSection:($,k)=>e.setScope(d,$,k),onChange:$=>{const k=e.onChange($);return w.push(k),k},readToken:$=>getComputedStyle(g).getPropertyValue($).trim()},dispose:()=>w.forEach($=>$())}}function An(d,g){const w=ua(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:()=>{}},Et(),X("local"),J(),ie(d)}const Ln=()=>T.target==="class"?T.info.classSelector:T.info.elementSelector;function Et(){T.dispose();const{info:d}=T,g=t.filter(j=>(j.uses||[]).some(I=>d.tokens.has(I))),w=c.local;if(w.innerHTML=`
       <div class="scope-bar">
         <div class="scope-head">
           <button class="icon-btn" data-action="back" title="Back to the whole page" aria-label="Back to the whole page">${A.back}</button>
           <div class="scope-name">
-            <code>${O(Xe(d.el))}</code>
-            ${d.text?`<span class="muted">“${O(d.text)}”</span>`:""}
+            <code>${P(Je(d.el))}</code>
+            ${d.text?`<span class="muted">“${P(d.text)}”</span>`:""}
           </div>
         </div>
         <div class="scope-target"></div>
         <div class="warnings"></div>
       </div>
-      ${g.length?r(g):'<div class="empty">This element doesn’t use Panel tokens yet, so there’s nothing to tweak here. Style it with <code>var(--twd-…)</code> to make it tweakable.</div>'}
-    `,d.classSelector){const j=ee({label:"Apply to",options:[{value:"element",label:"This element"},{value:"class",label:`All ${d.classSelector} (${d.classCount})`,title:`Every element matching ${d.classSelector}`}],onSelect:I=>{I==="class"&&e.moveScope(d.elementSelector,d.classSelector),M.target=I,$t()}});j.setValue(M.target),w.querySelector(".scope-target").append(j.el)}const{ctx:$,dispose:k}=ho(Tn(),d.el),C=m(w,g,$);C[0]&&(C[0].open=!0);const q=w.querySelector(".warnings"),S=()=>{const j=d.tokens.size?xa(d.el):null;q.innerHTML=j?oe([j]):""};S();const ke=e.onChange(S);M.dispose=()=>{k(),ke()}}function Mn(){if(!M||!M.info.classSelector)return;const d=e.getState().scopes||{},g=M.target==="class"?"element":"class",w=g==="class"?M.info.classSelector:M.info.elementSelector;!d[Tn()]&&d[w]&&(M.target=g,$t())}const An=()=>{e.undo(),Mn()},Ln=()=>{e.redo(),Mn()};function fo(){M&&(M.dispose(),M=null,c.local.innerHTML="",re(null))}const Pn=d=>d.kind==="global"?"Whole page":d.kind==="class"?`All ${d.selector}`:"One element";function On(){const d=qt(e.getState(),t),g=tt(),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>${oe(g)}`;return}const $=new Map;d.forEach(k=>{const C=k.selector||"";$.has(C)||$.set(C,[]),$.get(C).push(k)}),w.innerHTML=(g.length?`<div class="warnings">${oe(g)}</div>`:"")+[...$].map(([k,C])=>`
+      ${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=ne({label:"Apply to",options:[{value:"element",label:"This element"},{value:"class",label:`All ${d.classSelector} (${d.classCount})`,title:`Every element matching ${d.classSelector}`}],onSelect:I=>{I==="class"&&e.moveScope(d.elementSelector,d.classSelector),T.target=I,Et()}});j.setValue(T.target),w.querySelector(".scope-target").append(j.el)}const{ctx:$,dispose:k}=bo(Ln(),d.el),C=m(w,g,$);C[0]&&(C[0].open=!0);const q=w.querySelector(".warnings"),S=()=>{const j=d.tokens.size?ya(d.el):null;q.innerHTML=j?se([j]):""};S();const ke=e.onChange(S);T.dispose=()=>{k(),ke()}}function On(){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[Ln()]&&d[w]&&(T.target=g,Et())}const Pn=()=>{e.undo(),On()},Fn=()=>{e.redo(),On()};function xo(){T&&(T.dispose(),T=null,c.local.innerHTML="",ie(null))}const Nn=d=>d.kind==="global"?"Whole page":d.kind==="class"?`All ${d.selector}`:"One element";function jn(){const d=Vt(e.getState(),t),g=nt(),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>${se(g)}`;return}const $=new Map;d.forEach(k=>{const C=k.selector||"";$.has(C)||$.set(C,[]),$.get(C).push(k)}),w.innerHTML=(g.length?`<div class="warnings">${se(g)}</div>`:"")+[...$].map(([k,C])=>`
       <div class="change-group">
         <div class="change-scope">
-          ${k?`<button class="link-btn" data-select="${O(k)}" title="Select it on the page">${O(Pn(C[0]))}</button><code>${O(k)}</code>`:`<span>${Pn(C[0])}</span>`}
+          ${k?`<button class="link-btn" data-select="${P(k)}" title="Select it on the page">${P(Nn(C[0]))}</button><code>${P(k)}</code>`:`<span>${Nn(C[0])}</span>`}
         </div>
         ${C.map(q=>`
           <div class="change-row">
             <div class="change-main">
-              <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 class="change-title">${P(q.title)} <span class="muted">›</span> ${q.settings.map(S=>`${P(S.label)}: <b>${P(S.value)}</b>`).join(", ")}</div>
+              ${q.tokens.map(S=>`<div class="change-token"><code>${P(S.name)}</code> ${S.from?`${P(S.from)} → `:""}${P(S.to)}</div>`).join("")}
             </div>
-            <button class="icon-btn" data-remove="${O(q.sectionId)}" data-remove-scope="${O(k)}" aria-label="Remove ${O(q.title)} change">${A.close}</button>
+            <button class="icon-btn" data-remove="${P(q.sectionId)}" data-remove-scope="${P(k)}" aria-label="Remove ${P(q.title)} change">${A.close}</button>
           </div>`).join("")}
-      </div>`).join("")}function go(d,g){if(g)return e.removeScope(g,d);const w=e.getState()[d]||{};e.setSection(d,Object.fromEntries(Object.keys(w).map($=>[$,null])))}const ve=s(".apply-menu"),Fn=s('[data-action="apply-menu"]'),Nn=()=>le("apply-mode")==="copy"?"copy":"preview";function mo(){ve.querySelectorAll("[data-apply-mode]").forEach(d=>d.setAttribute("aria-checked",String(d.dataset.applyMode===Nn())))}function ze(d){ve.hidden=!d,Fn.setAttribute("aria-expanded",String(d)),d&&mo()}function jn(){return fa(qt(e.getState(),t),{warnings:tt()})}const Ie=s(".dialog-backdrop"),Rn=s(".prompt-text");function bo(){const d=jn();if(!d)return _("No changes to copy yet");if(Nn()==="copy")return xe(d,"Prompt copied · paste it into your agent");Rn.value=d,Ie.hidden=!1,s('[data-action="dialog-copy"]').focus()}function Et(){Ie.hidden=!0,s('[data-action="apply"]').focus()}const se=s('[data-action="compare"]'),xo=s(".original-pill");function De(d){d?n.suspend():n.resume(),se.setAttribute("aria-pressed",String(d)),xo.hidden=!d}let zn=null,ye=!1;se.addEventListener("pointerdown",()=>{ye=!1,zn=setTimeout(()=>{ye=!0,De(!0)},180)});const In=()=>{clearTimeout(zn),ye&&(De(!1),ye=!1)};se.addEventListener("pointerup",In),se.addEventListener("pointerleave",In);const Be=s(".setup-hint"),Dn=`setup-hint-dismissed:${location.pathname}`,wo={"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:Xt,link:`${Zt}/#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:Ea,link:`${Zt}/#tokens`}};let B=null;function Ue(){const d=Sa();B=le(Dn)===d?null:wo[d]||null,l.toggleAttribute("data-hint",!!B),Be.hidden=!B,B&&(Be.innerHTML=`
-      <div class="setup-head">${A.warn}<b>${O(B.title)}</b>
+      </div>`).join("")}function wo(d,g){if(g)return e.removeScope(g,d);const w=e.getState()[d]||{};e.setSection(d,Object.fromEntries(Object.keys(w).map($=>[$,null])))}const ve=r(".apply-menu"),Rn=r('[data-action="apply-menu"]'),zn=()=>te("apply-mode")==="copy"?"copy":"preview";function vo(){ve.querySelectorAll("[data-apply-mode]").forEach(d=>d.setAttribute("aria-checked",String(d.dataset.applyMode===zn())))}function Ie(d){ve.hidden=!d,Rn.setAttribute("aria-expanded",String(d)),d&&vo()}function In(){return ba(Vt(e.getState(),t),{warnings:nt()})}const De=r(".dialog-backdrop"),Dn=r(".prompt-text");function yo(){const d=In();if(!d)return _("No changes to copy yet");if(zn()==="copy")return xe(d,"Prompt copied · paste it into your agent");Dn.value=d,De.hidden=!1,r('[data-action="dialog-copy"]').focus()}function Ct(){De.hidden=!0,r('[data-action="apply"]').focus()}const le=r('[data-action="compare"]'),ko=r(".original-pill");function Be(d){d?n.suspend():n.resume(),le.setAttribute("aria-pressed",String(d)),ko.hidden=!d}let Bn=null,ye=!1;le.addEventListener("pointerdown",()=>{ye=!1,Bn=setTimeout(()=>{ye=!0,Be(!0)},180)});const Un=()=>{clearTimeout(Bn),ye&&(Be(!1),ye=!1)};le.addEventListener("pointerup",Un),le.addEventListener("pointerleave",Un);const Ue=r(".setup-hint"),qn=`setup-hint-dismissed:${location.pathname}`,So={"no-tokens":{title:"The Panel tokens aren’t loaded",text:"The knobs change the --twd-* variables, but this page doesn’t load them. Add the token stylesheet before your own CSS:",snippets:Jt,link:`${Xt}/#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:Ta,link:`${Xt}/#tokens`}};let B=null;function qe(){const d=Ca();B=te(qn)===d?null:So[d]||null,l.toggleAttribute("data-hint",!!B),Ue.hidden=!B,B&&(Ue.innerHTML=`
+      <div class="setup-head">${A.warn}<b>${P(B.title)}</b>
         <button class="icon-btn" data-action="setup-dismiss" title="Hide this message" aria-label="Hide this message">${A.close}</button>
       </div>
-      <p>${O(B.text)}</p>
+      <p>${P(B.text)}</p>
       ${(B.snippets||[]).map((g,w)=>`
         <div class="setup-snippet">
-          <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>
+          <span>${P(g.label)}</span>
+          <div class="setup-code"><code>${P(g.code)}</code><button class="text-btn" data-setup-snippet="${w}">Copy</button></div>
         </div>`).join("")}
       <div class="setup-actions">
-        ${B.copy?`<button class="apply-btn" data-action="setup-copy">${O(B.copy)}</button>`:""}
+        ${B.copy?`<button class="apply-btn" data-action="setup-copy">${P(B.copy)}</button>`:""}
         <a href="${B.link}" target="_blank" rel="noopener">Setup guide</a>
-      </div>`,Be.dataset.status=d)}Ue(),document.readyState!=="complete"&&window.addEventListener("load",Ue,{once:!0}),setTimeout(Ue,1500);const Bn=s(".badge");function Un(){s('[data-action="undo"]').disabled=!e.canUndo(),s('[data-action="redo"]').disabled=!e.canRedo();const d=ua(e.getState());Bn.textContent=d,Bn.hidden=!d;const g=oe(tt());c.global.querySelectorAll(".page-warnings").forEach(w=>{w.innerHTML=g}),Z==="changes"&&On()}return e.onChange(Un),Un(),o.addEventListener("click",d=>{if(d.target===Ie)return Et();const g=d.target.closest("button");if(g){if(g!==Fn&&!ve.contains(g)&&ze(!1),g===l)return kt();if(g.dataset.select){const w=document.querySelector(g.dataset.select);return w?Cn(w):_("That element isn’t on this page")}if(g.dataset.setupSnippet)return xe(Xt[g.dataset.setupSnippet].code,"Copied");if(g.dataset.tab)return X("global"),E(g.dataset.tab);if(g.dataset.remove)return go(g.dataset.remove,g.dataset.removeScope);if(g.dataset.applyMode)return de("apply-mode",g.dataset.applyMode),ze(!1),_(g.dataset.applyMode==="copy"?"Copy prompt copies straight away":"Copy prompt shows a preview first");switch(g.dataset.action){case"close":return yt();case"reset":return e.resetState(),_("Reset to defaults · ⌘Z to undo");case"copy":return xe(location.href,"Link copied");case"pick":return we?Re():En();case"compare":ye||De(se.getAttribute("aria-pressed")!=="true");return;case"undo":return An();case"redo":return Ln();case"back":return X("global");case"changes":return X(Z==="changes"?"global":"changes");case"apply":return bo();case"apply-menu":return ze(ve.hidden);case"dialog-close":return Et();case"dialog-copy":return xe(Rn.value,"Prompt copied · paste it into your agent");case"setup-copy":return B&&xe(B.text2copy,B.copied);case"setup-dismiss":return de(Dn,Be.dataset.status),Ue()}}}),o.addEventListener("keydown",d=>{if(d.key==="Escape"){if(!Ie.hidden)return Et();if(!ve.hidden)return ze(!1)}!(d.metaKey||d.ctrlKey)||d.key.toLowerCase()!=="z"||d.target.matches?.('input[type="text"], textarea')||(d.preventDefault(),d.shiftKey?Ln():An())}),document.addEventListener("keydown",d=>{d.altKey&&(d.code==="KeyT"&&(d.preventDefault(),kt()),d.code==="KeyC"&&(d.preventDefault(),De(se.getAttribute("aria-pressed")!=="true")))}),le("panel")==="open"&&be({animate:!1}),{open:be,close:yt,toggle:kt,toast:_,pick:En,prompt:jn}}const gn=[Qa,Me,ln,ct,Na,ut,Wa,Fa],io=':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=io,document.head.prepend(e)}if(!window.Twiddle){lo(),gn.forEach(n=>Xn(n.tokens)),Pt(Ye);let t;const e=()=>{Ye(_e()),t=so({sections:gn,store:Zn,view:{suspend:ta,resume:na}})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e(),window.Twiddle={open:()=>t&&t.open(),close:()=>t&&t.close(),toggle:()=>t&&t.toggle(),reset:()=>Mt(),undo:()=>At(),redo:()=>Lt(),pick:()=>t&&t.pick(),prompt:()=>t?t.prompt():"",getState:_e}}const co=window.Twiddle;return qe.Twiddle=co,Object.defineProperty(qe,Symbol.toStringTag,{value:"Module"}),qe})({});
+      </div>`,Ue.dataset.status=d)}qe(),document.readyState!=="complete"&&window.addEventListener("load",qe,{once:!0}),setTimeout(qe,1500);const Vn=r(".badge");function Hn(){r('[data-action="undo"]').disabled=!e.canUndo(),r('[data-action="redo"]').disabled=!e.canRedo();const d=ga(e.getState());Vn.textContent=d,Vn.hidden=!d;const g=se(nt());c.global.querySelectorAll(".page-warnings").forEach(w=>{w.innerHTML=g}),Z==="changes"&&jn()}return e.onChange(Hn),Hn(),o.addEventListener("click",d=>{if(d.target===De)return Ct();const g=d.target.closest("button");if(g){if(g!==Rn&&!ve.contains(g)&&Ie(!1),g===l)return St();if(g.dataset.select){const w=document.querySelector(g.dataset.select);return w?An(w):_("That element isn’t on this page")}if(g.dataset.setupSnippet)return xe(Jt[g.dataset.setupSnippet].code,"Copied");if(g.dataset.tab)return X("global"),wn&&Re(!1),E(g.dataset.tab);if(g.dataset.remove)return wo(g.dataset.remove,g.dataset.removeScope);if(g.dataset.applyMode)return ce("apply-mode",g.dataset.applyMode),Ie(!1),_(g.dataset.applyMode==="copy"?"Copy prompt copies straight away":"Copy prompt shows a preview first");switch(g.dataset.action){case"close":return kt();case"minimise":return mo(),(o.querySelector('.tab[aria-pressed="true"]')||u[0]).focus();case"reset":return e.resetState(),_("Reset to defaults · ⌘Z to undo");case"copy":return xe(location.href,"Link copied");case"pick":return we?ze():Tn();case"compare":ye||Be(le.getAttribute("aria-pressed")!=="true");return;case"undo":return Pn();case"redo":return Fn();case"back":return X("global");case"changes":return X(Z==="changes"?"global":"changes");case"apply":return yo();case"apply-menu":return Ie(ve.hidden);case"dialog-close":return Ct();case"dialog-copy":return xe(Dn.value,"Prompt copied · paste it into your agent");case"setup-copy":return B&&xe(B.text2copy,B.copied);case"setup-dismiss":return ce(qn,Ue.dataset.status),qe()}}}),o.addEventListener("keydown",d=>{if(d.key==="Escape"){if(!De.hidden)return Ct();if(!ve.hidden)return Ie(!1)}!(d.metaKey||d.ctrlKey)||d.key.toLowerCase()!=="z"||d.target.matches?.('input[type="text"], textarea')||(d.preventDefault(),d.shiftKey?Fn():Pn())}),document.addEventListener("keydown",d=>{d.altKey&&(d.code==="KeyT"&&(d.preventDefault(),St()),d.code==="KeyC"&&(d.preventDefault(),Be(le.getAttribute("aria-pressed")!=="true")))}),te("panel")==="open"?J({animate:!1}):te("panel")==="tabs"&&(J({animate:!1}),Re(!0)),{open:J,close:kt,toggle:St,toast:_,pick:Tn,prompt:In}}const mn=[no,Te,dn,pt,za,ht,Xa,Ra],po=':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 uo(){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=po,document.head.prepend(e)}if(!window.Twiddle){uo(),mn.forEach(n=>ea(n.tokens)),Pt(Ze);let t;const e=()=>{Ze(Ke()),t=co({sections:mn,store:Qn,view:{suspend:oa,resume:ra}})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e(),window.Twiddle={open:()=>t&&t.open(),close:()=>t&&t.close(),toggle:()=>t&&t.toggle(),reset:()=>At(),undo:()=>Lt(),redo:()=>Ot(),pick:()=>t&&t.pick(),prompt:()=>t?t.prompt():"",getState:Ke}}const ho=window.Twiddle;return Ve.Twiddle=ho,Object.defineProperty(Ve,Symbol.toStringTag,{value:"Module"}),Ve})({});