From 61ff082722bf0827e6a21fd6dc90dce01b465034 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 29 May 2026 07:31:10 +0000 Subject: [PATCH 1/5] fix/feat: address issues #123, #137, #139, #140, #144, #145 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #123 — remove .visually-hidden from docs; sr-only is the single canonical name (architecture.md table + demo heading updated). #137 — version-sync.js now also syncs the plugin header "Version:" comment and SLASHED_BRICKS_VERSION constant alongside CSS_REF, so a single release bump keeps all three in lockstep. #139 — fix demo layout: top-level .sf-section elements inside #main were missing padding-inline, causing Macros and later sections to bleed to screen edges on mobile. Added scoped rule `#main > .sf-section { padding-inline: var(--sf-space-l); border-top: … }`. #140 — BemBadge: replace '),Qi=C('');function eo(e,t){re(t,!0);var s=Qi();ie(s,21,()=>Object.entries(te.tabs),([r,n])=>r,(r,n)=>{var a=j(()=>rt(f(n),2));let i=()=>f(a)[0],o=()=>f(a)[1];var l=Ji();let c;var v=y(l);M(()=>{c=Jt(l,1,"tab-nav__btn svelte-yyiz68",null,c,{active:R.activeTab===i()}),O(v,o())}),oe("click",l,()=>R.activeTab=i()),T(r,l)}),T(e,s),ne()}Pe(["click"]);var to=C(' '),so=C(' ',1),ro=C(''),no=C('
');function Ds(e,t){re(t,!0);let s=X(t,"hexHint",3,""),r=X(t,"rawHint",3,""),n=X(t,"cssVar",3,"");const a=/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,i=(()=>{const A=(G.colors?.[t.storeKey]??"").trim(),I=A===""||a.test(A);return{mode:I?"hex":"raw",hex:I?A:"",raw:I?"":A}})();let o=Z(ke(i.mode)),l=Z(ke(i.hex)),c=Z(ke(i.raw));function v(){G.colors||(G.colors={});const A=f(c).trim(),I=f(l).trim(),q=f(o)==="raw"?A:I;q===""?delete G.colors[t.storeKey]:G.colors[t.storeKey]=q,ia()}function u(){f(o)==="hex"?(V(o,"raw"),V(l,"")):(V(o,"hex"),V(c,"")),v()}const d=j(()=>(f(o)==="raw"?f(c):f(l))||s()||"transparent");var g=no(),_=y(g),b=y(_),h=y(b),m=w(b,2);{var k=A=>{var I=to(),q=y(I);M(()=>O(q,n())),T(A,I)};se(m,A=>{n()&&A(k)})}var S=w(_,2),z=y(S);let E;var L=w(z,2);{var P=A=>{var I=so(),q=Mr(I),Q=w(q,2);M(()=>{Y(q,"id",t.storeKey),Y(Q,"placeholder",s())}),oe("input",q,v),qs(q,()=>f(l),ce=>V(l,ce)),oe("input",Q,v),qs(Q,()=>f(l),ce=>V(l,ce)),T(A,I)},$=A=>{var I=ro();M(()=>{Y(I,"id",t.storeKey),Y(I,"placeholder",r())}),oe("input",I,v),qs(I,()=>f(c),q=>V(c,q)),T(A,I)};se(L,A=>{f(o)==="hex"?A(P):A($,-1)})}var x=w(L,2),F=y(x);M(()=>{Y(b,"for",t.storeKey),O(h,t.label),E=xt(z,"",E,{background:f(d)}),O(F,f(o)==="hex"?"Advanced (oklch / raw)":"Use HEX picker")}),oe("click",x,u),T(e,g),ne()}Pe(["input","click"]);var ao=C(`

Brand Colors — Light Mode

Pick a color via the HEX input, or switch to Advanced to paste any +var da=Object.defineProperty;var Kr=e=>{throw TypeError(e)};var fa=(e,t,s)=>t in e?da(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var ye=(e,t,s)=>fa(e,typeof t!="symbol"?t+"":t,s),dr=(e,t,s)=>t.has(e)||Kr("Cannot "+s);var h=(e,t,s)=>(dr(e,t,"read from private field"),s?s.call(e):t.get(e)),q=(e,t,s)=>t.has(e)?Kr("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),N=(e,t,s,r)=>(dr(e,t,"write to private field"),r?r.call(e,s):t.set(e,s),s),U=(e,t,s)=>(dr(e,t,"access private method"),s);var Lr=Array.isArray,ua=Array.prototype.indexOf,zt=Array.prototype.includes,tr=Array.from,va=Object.defineProperty,Zt=Object.getOwnPropertyDescriptor,ha=Object.getOwnPropertyDescriptors,pa=Object.prototype,_a=Array.prototype,un=Object.getPrototypeOf,Ur=Object.isExtensible;const vn=()=>{};function ga(e){for(var t=0;t{e=r,t=n});return{promise:s,resolve:e,reject:t}}function nt(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);const s=[];for(const r of e)if(s.push(r),s.length===t)break;return s}const he=2,as=4,sr=8,pn=1<<24,Be=16,Ke=32,mt=64,mr=128,Ie=512,fe=1024,ve=2048,Xe=4096,_e=8192,De=16384,Nt=32768,yr=1<<25,Dt=65536,Ks=1<<17,ma=1<<18,cs=1<<19,ya=1<<20,Ze=1<<25,Ft=65536,Us=1<<21,Xt=1<<22,gt=1<<23,Ot=Symbol("$state"),ba=Symbol("legacy props"),wa=Symbol(""),Ms=Symbol("attributes"),br=Symbol("class"),wr=Symbol("style"),hs=Symbol("text"),Ps=Symbol("form reset"),rr=new class extends Error{constructor(){super(...arguments);ye(this,"name","StaleReactionError");ye(this,"message","The reaction that called `getAbortSignal()` was re-run or destroyed")}},ka=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function xa(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Sa(e,t,s){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Ea(e){throw new Error("https://svelte.dev/e/effect_in_teardown")}function ja(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function Ta(e){throw new Error("https://svelte.dev/e/effect_orphan")}function Ca(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function Aa(e){throw new Error("https://svelte.dev/e/props_invalid_value")}function za(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function Oa(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function Ra(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function La(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const Va=1,Ia=2,_n=4,Da=8,Fa=16,Ma=1,Pa=4,Na=8,qa=16,Ba=1,$a=2,de=Symbol("uninitialized"),gn="http://www.w3.org/1999/xhtml";function Ha(){console.warn("https://svelte.dev/e/derived_inert")}function Ka(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function Ua(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function mn(e){return e===this.v}function Ga(e,t){return e!=e?t==t:e!==t||e!==null&&typeof e=="object"||typeof e=="function"}function yn(e){return!Ga(e,this.v)}let Ae=null;function is(e){Ae=e}function ne(e,t=!1,s){Ae={p:Ae,i:!1,c:null,e:null,s:e,x:null,r:K,l:null}}function ae(e){var t=Ae,s=t.e;if(s!==null){t.e=null;for(var r of s)$n(r)}return t.i=!0,Ae=t.p,{}}function bn(){return!0}let wt=[];function wn(){var e=wt;wt=[],ga(e)}function Rt(e){if(wt.length===0&&!gs){var t=wt;queueMicrotask(()=>{t===wt&&wn()})}wt.push(e)}function Wa(){for(;wt.length>0;)wn()}function kn(e){var t=K;if(t===null)return H.f|=gt,e;if((t.f&Nt)===0&&(t.f&as)===0)throw e;_t(e,t)}function _t(e,t){for(;t!==null;){if((t.f&mr)!==0){if((t.f&Nt)===0)throw e;try{t.b.error(e);return}catch(s){e=s}}t=t.parent}throw e}const Ya=-7169;function oe(e,t){e.f=e.f&Ya|t}function Vr(e){(e.f&Ie)!==0||e.deps===null?oe(e,fe):oe(e,Xe)}function xn(e){if(e!==null)for(const t of e)(t.f&he)===0||(t.f&Ft)===0||(t.f^=Ft,xn(t.deps))}function Sn(e,t,s){(e.f&ve)!==0?t.add(e):(e.f&Xe)!==0&&s.add(e),xn(e.deps),oe(e,fe)}let Vs=!1;function Za(e){var t=Vs;try{return Vs=!1,[e(),Vs]}finally{Vs=t}}let fr=null,Kt=null,B=null,kr=null,$e=null,xr=null,gs=!1,ur=!1,Yt=null,Ns=null;var Gr=0;let Xa=1;var Qt,vt,St,es,ts,Et,ss,tt,Ss,je,Es,ht,Ge,We,rs,jt,Y,Sr,ps,Er,En,jn,qs,Ja,jr,Ut;const Js=class Js{constructor(){q(this,Y);ye(this,"id",Xa++);q(this,Qt,!1);ye(this,"linked",!0);q(this,vt,null);q(this,St,null);ye(this,"async_deriveds",new Map);ye(this,"current",new Map);ye(this,"previous",new Map);ye(this,"unblocked",new Set);q(this,es,new Set);q(this,ts,new Set);q(this,Et,new Set);q(this,ss,0);q(this,tt,new Map);q(this,Ss,null);q(this,je,[]);q(this,Es,[]);q(this,ht,new Set);q(this,Ge,new Set);q(this,We,new Map);q(this,rs,new Set);ye(this,"is_fork",!1);q(this,jt,!1)}skip_effect(t){h(this,We).has(t)||h(this,We).set(t,{d:[],m:[]}),h(this,rs).delete(t)}unskip_effect(t,s=r=>this.schedule(r)){var r=h(this,We).get(t);if(r){h(this,We).delete(t);for(var n of r.d)oe(n,ve),s(n);for(n of r.m)oe(n,Xe),s(n)}h(this,rs).add(t)}capture(t,s,r=!1){t.v!==de&&!this.previous.has(t)&&this.previous.set(t,t.v),(t.f>)===0&&(this.current.set(t,[s,r]),$e?.set(t,s)),this.is_fork||(t.v=s)}activate(){B=this}deactivate(){B=null,$e=null}flush(){try{ur=!0,B=this,U(this,Y,ps).call(this)}finally{Gr=0,xr=null,Yt=null,Ns=null,ur=!1,B=null,$e=null,Lt.clear()}}discard(){for(const t of h(this,ts))t(this);h(this,ts).clear(),h(this,Et).clear(),U(this,Y,Ut).call(this)}register_created_effect(t){h(this,Es).push(t)}increment(t,s){if(N(this,ss,h(this,ss)+1),t){let r=h(this,tt).get(s)??0;h(this,tt).set(s,r+1)}}decrement(t,s){if(N(this,ss,h(this,ss)-1),t){let r=h(this,tt).get(s)??0;r===1?h(this,tt).delete(s):h(this,tt).set(s,r-1)}h(this,jt)||(N(this,jt,!0),Rt(()=>{N(this,jt,!1),this.linked&&this.flush()}))}transfer_effects(t,s){for(const r of t)h(this,ht).add(r);for(const r of s)h(this,Ge).add(r);t.clear(),s.clear()}oncommit(t){h(this,es).add(t)}ondiscard(t){h(this,ts).add(t)}on_fork_commit(t){h(this,Et).add(t)}run_fork_commit_callbacks(){for(const t of h(this,Et))t(this);h(this,Et).clear()}settled(){return(h(this,Ss)??N(this,Ss,hn())).promise}static ensure(){var t;if(B===null){const s=B=new Js;U(t=s,Y,jr).call(t),!ur&&!gs&&Rt(()=>{h(s,Qt)||s.flush()})}return B}apply(){{$e=null;return}}schedule(t){if(xr=t,t.b?.is_pending&&(t.f&(as|sr|pn))!==0&&(t.f&Nt)===0){t.b.defer_effect(t);return}for(var s=t;s.parent!==null;){s=s.parent;var r=s.f;if(Yt!==null&&s===K&&(H===null||(H.f&he)===0))return;if((r&(mt|Ke))!==0){if((r&fe)===0)return;s.f^=fe}}h(this,je).push(s)}};Qt=new WeakMap,vt=new WeakMap,St=new WeakMap,es=new WeakMap,ts=new WeakMap,Et=new WeakMap,ss=new WeakMap,tt=new WeakMap,Ss=new WeakMap,je=new WeakMap,Es=new WeakMap,ht=new WeakMap,Ge=new WeakMap,We=new WeakMap,rs=new WeakMap,jt=new WeakMap,Y=new WeakSet,Sr=function(){if(this.is_fork)return!0;for(const r of h(this,tt).keys()){for(var t=r,s=!1;t.parent!==null;){if(h(this,We).has(t)){s=!0;break}t=t.parent}if(!s)return!0}return!1},ps=function(){var l,c,v;if(N(this,Qt,!0),Gr++>1e3&&(U(this,Y,Ut).call(this),ei()),!U(this,Y,Sr).call(this)){for(const u of h(this,ht))h(this,Ge).delete(u),oe(u,ve),this.schedule(u);for(const u of h(this,Ge))oe(u,Xe),this.schedule(u)}const t=h(this,je);N(this,je,[]),this.apply();var s=Yt=[],r=[],n=Ns=[];for(const u of t)try{U(this,Y,Er).call(this,u,s,r)}catch(f){throw An(u),f}if(B=null,n.length>0){var a=Js.ensure();for(const u of n)a.schedule(u)}if(Yt=null,Ns=null,U(this,Y,Sr).call(this)){U(this,Y,qs).call(this,r),U(this,Y,qs).call(this,s);for(const[u,f]of h(this,We))Cn(u,f);n.length>0&&U(l=B,Y,ps).call(l);return}const o=U(this,Y,En).call(this);if(o){U(c=o,Y,jn).call(c,this);return}h(this,ht).clear(),h(this,Ge).clear();for(const u of h(this,es))u(this);h(this,es).clear(),kr=this,Wr(r),Wr(s),kr=null,h(this,Ss)?.resolve();var i=B;if(this.linked&&h(this,ss)===0&&U(this,Y,Ut).call(this),h(this,je).length>0){i===null&&(i=this,U(this,Y,jr).call(this));const u=i;h(u,je).push(...h(this,je).filter(f=>!h(u,je).includes(f)))}i!==null&&U(v=i,Y,ps).call(v)},Er=function(t,s,r){t.f^=fe;for(var n=t.first;n!==null;){var a=n.f,o=(a&(Ke|mt))!==0,i=o&&(a&fe)!==0,l=i||(a&_e)!==0||h(this,We).has(n);if(!l&&n.fn!==null){o?n.f^=fe:(a&as)!==0?s.push(n):Os(n)&&((a&Be)!==0&&h(this,Ge).add(n),ls(n));var c=n.first;if(c!==null){n=c;continue}}for(;n!==null;){var v=n.next;if(v!==null){n=v;break}n=n.parent}}},En=function(){for(var t=h(this,vt);t!==null;){if(!t.is_fork){for(const[s,[,r]]of this.current)if(t.current.has(s)&&!r)return t}t=h(t,vt)}return null},jn=function(t){var r;for(const[n,a]of t.current)!this.previous.has(n)&&t.previous.has(n)&&this.previous.set(n,t.previous.get(n)),this.current.set(n,a);for(const[n,a]of t.async_deriveds){const o=this.async_deriveds.get(n);o&&a.promise.then(o.resolve)}const s=n=>{var a=n.reactions;if(a!==null)for(const l of a){var o=l.f;if((o&he)!==0)s(l);else{var i=l;o&(Xt|Be)&&!this.async_deriveds.has(i)&&(h(this,Ge).delete(i),oe(i,ve),this.schedule(i))}}};for(const n of this.current.keys())s(n);this.oncommit(()=>t.discard()),U(r=t,Y,Ut).call(r),B=this,U(this,Y,ps).call(this)},qs=function(t){for(var s=0;s!this.current.has(f));if(n.length===0)t&&u.discard();else if(s.length>0){if(t)for(const f of h(this,rs))u.unskip_effect(f,m=>{var _;(m.f&(Be|Xt))!==0?u.schedule(m):U(_=u,Y,qs).call(_,[m])});u.activate();var a=new Set,o=new Map;for(var i of s)Tn(i,n,a,o);o=new Map;var l=[...u.current.keys()].filter(f=>this.current.has(f)?this.current.get(f)[0]!==f.v:!0);if(l.length>0)for(const f of h(this,Es))(f.f&(De|_e|Ks))===0&&Ir(f,l,o)&&((f.f&(Xt|Be))!==0?(oe(f,ve),u.schedule(f)):h(u,ht).add(f));if(h(u,je).length>0&&!h(u,jt)){u.apply();for(var c of h(u,je))U(v=u,Y,Er).call(v,c,[],[]);N(u,je,[])}u.deactivate()}}}},jr=function(){Kt===null?fr=Kt=this:(N(Kt,St,this),N(this,vt,Kt)),Kt=this},Ut=function(){var t=h(this,vt),s=h(this,St);t===null?fr=s:N(t,St,s),s===null?Kt=t:N(s,vt,t),this.linked=!1};let Mt=Js;function Qa(e){var t=gs;gs=!0;try{for(var s;;){if(Wa(),B===null)return s;B.flush()}}finally{gs=t}}function ei(){try{Ca()}catch(e){_t(e,xr)}}let et=null;function Wr(e){var t=e.length;if(t!==0){for(var s=0;s0)){Lt.clear();for(const n of et){if((n.f&(De|_e))!==0)continue;const a=[n];let o=n.parent;for(;o!==null;)et.has(o)&&(et.delete(o),a.push(o)),o=o.parent;for(let i=a.length-1;i>=0;i--){const l=a[i];(l.f&(De|_e))===0&&ls(l)}}et.clear()}}et=null}}function Tn(e,t,s,r){if(!s.has(e)&&(s.add(e),e.reactions!==null))for(const n of e.reactions){const a=n.f;(a&he)!==0?Tn(n,t,s,r):(a&(Xt|Be))!==0&&(a&ve)===0&&Ir(n,t,r)&&(oe(n,ve),Dr(n))}}function Ir(e,t,s){const r=s.get(e);if(r!==void 0)return r;if(e.deps!==null)for(const n of e.deps){if(zt.call(t,n))return!0;if((n.f&he)!==0&&Ir(n,t,s))return s.set(n,!0),!0}return s.set(e,!1),!1}function Dr(e){B.schedule(e)}function Cn(e,t){if(!((e.f&Ke)!==0&&(e.f&fe)!==0)){(e.f&ve)!==0?t.d.push(e):(e.f&Xe)!==0&&t.m.push(e),oe(e,fe);for(var s=e.first;s!==null;)Cn(s,t),s=s.next}}function An(e){oe(e,fe);for(var t=e.first;t!==null;)An(t),t=t.next}function ti(e){let t=0,s=Pt(0),r;return()=>{Pr()&&(d(s),Nr(()=>(t===0&&(r=ir(()=>e(()=>ms(s)))),t+=1,()=>{Rt(()=>{t-=1,t===0&&(r?.(),r=void 0,ms(s))})})))}}var si=Dt|cs;function ri(e,t,s,r){new ni(e,t,s,r)}var Oe,Rr,Re,Tt,be,Le,pe,Te,st,Ct,pt,ns,js,Ts,rt,Qs,ce,ai,ii,oi,Tr,Bs,$s,Cr,Ar;class ni{constructor(t,s,r,n){q(this,ce);ye(this,"parent");ye(this,"is_pending",!1);ye(this,"transform_error");q(this,Oe);q(this,Rr,null);q(this,Re);q(this,Tt);q(this,be);q(this,Le,null);q(this,pe,null);q(this,Te,null);q(this,st,null);q(this,Ct,0);q(this,pt,0);q(this,ns,!1);q(this,js,new Set);q(this,Ts,new Set);q(this,rt,null);q(this,Qs,ti(()=>(N(this,rt,Pt(h(this,Ct))),()=>{N(this,rt,null)})));N(this,Oe,t),N(this,Re,s),N(this,Tt,a=>{var o=K;o.b=this,o.f|=mr,r(a)}),this.parent=K.b,this.transform_error=n??this.parent?.transform_error??(a=>a),N(this,be,ar(()=>{U(this,ce,Tr).call(this)},si))}defer_effect(t){Sn(t,h(this,js),h(this,Ts))}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!h(this,Re).pending}update_pending_count(t,s){U(this,ce,Cr).call(this,t,s),N(this,Ct,h(this,Ct)+t),!(!h(this,rt)||h(this,ns))&&(N(this,ns,!0),Rt(()=>{N(this,ns,!1),h(this,rt)&&os(h(this,rt),h(this,Ct))}))}get_effect_pending(){return h(this,Qs).call(this),d(h(this,rt))}error(t){if(!h(this,Re).onerror&&!h(this,Re).failed)throw t;B?.is_fork?(h(this,Le)&&B.skip_effect(h(this,Le)),h(this,pe)&&B.skip_effect(h(this,pe)),h(this,Te)&&B.skip_effect(h(this,Te)),B.on_fork_commit(()=>{U(this,ce,Ar).call(this,t)})):U(this,ce,Ar).call(this,t)}}Oe=new WeakMap,Rr=new WeakMap,Re=new WeakMap,Tt=new WeakMap,be=new WeakMap,Le=new WeakMap,pe=new WeakMap,Te=new WeakMap,st=new WeakMap,Ct=new WeakMap,pt=new WeakMap,ns=new WeakMap,js=new WeakMap,Ts=new WeakMap,rt=new WeakMap,Qs=new WeakMap,ce=new WeakSet,ai=function(){try{N(this,Le,Ve(()=>h(this,Tt).call(this,h(this,Oe))))}catch(t){this.error(t)}},ii=function(t){const s=h(this,Re).failed;s&&N(this,Te,Ve(()=>{s(h(this,Oe),()=>t,()=>()=>{})}))},oi=function(){const t=h(this,Re).pending;t&&(this.is_pending=!0,N(this,pe,Ve(()=>t(h(this,Oe)))),Rt(()=>{var s=N(this,st,document.createDocumentFragment()),r=it();s.append(r),N(this,Le,U(this,ce,$s).call(this,()=>Ve(()=>h(this,Tt).call(this,r)))),h(this,pt)===0&&(h(this,Oe).before(s),N(this,st,null),Vt(h(this,pe),()=>{N(this,pe,null)}),U(this,ce,Bs).call(this,B))}))},Tr=function(){try{if(this.is_pending=this.has_pending_snippet(),N(this,pt,0),N(this,Ct,0),N(this,Le,Ve(()=>{h(this,Tt).call(this,h(this,Oe))})),h(this,pt)>0){var t=N(this,st,document.createDocumentFragment());$r(h(this,Le),t);const s=h(this,Re).pending;N(this,pe,Ve(()=>s(h(this,Oe))))}else U(this,ce,Bs).call(this,B)}catch(s){this.error(s)}},Bs=function(t){this.is_pending=!1,t.transfer_effects(h(this,js),h(this,Ts))},$s=function(t){var s=K,r=H,n=Ae;Je(h(this,be)),Me(h(this,be)),is(h(this,be).ctx);try{return Mt.ensure(),t()}catch(a){return kn(a),null}finally{Je(s),Me(r),is(n)}},Cr=function(t,s){var r;if(!this.has_pending_snippet()){this.parent&&U(r=this.parent,ce,Cr).call(r,t,s);return}N(this,pt,h(this,pt)+t),h(this,pt)===0&&(U(this,ce,Bs).call(this,s),h(this,pe)&&Vt(h(this,pe),()=>{N(this,pe,null)}),h(this,st)&&(h(this,Oe).before(h(this,st)),N(this,st,null)))},Ar=function(t){h(this,Le)&&(xe(h(this,Le)),N(this,Le,null)),h(this,pe)&&(xe(h(this,pe)),N(this,pe,null)),h(this,Te)&&(xe(h(this,Te)),N(this,Te,null));var s=h(this,Re).onerror;let r=h(this,Re).failed;var n=!1,a=!1;const o=()=>{if(n){Ua();return}n=!0,a&&La(),h(this,Te)!==null&&Vt(h(this,Te),()=>{N(this,Te,null)}),U(this,ce,$s).call(this,()=>{U(this,ce,Tr).call(this)})},i=l=>{try{a=!0,s?.(l,o),a=!1}catch(c){_t(c,h(this,be)&&h(this,be).parent)}r&&N(this,Te,U(this,ce,$s).call(this,()=>{try{return Ve(()=>{var c=K;c.b=this,c.f|=mr,r(h(this,Oe),()=>l,()=>o)})}catch(c){return _t(c,h(this,be).parent),null}}))};Rt(()=>{var l;try{l=this.transform_error(t)}catch(c){_t(c,h(this,be)&&h(this,be).parent);return}l!==null&&typeof l=="object"&&typeof l.then=="function"?l.then(i,c=>_t(c,h(this,be)&&h(this,be).parent)):i(l)})};function li(e,t,s,r){const n=ws;var a=e.filter(f=>!f.settled);if(s.length===0&&a.length===0){r(t.map(n));return}var o=K,i=ci(),l=a.length===1?a[0].promise:a.length>1?Promise.all(a.map(f=>f.promise)):null;function c(f){if((o.f&De)===0){i();try{r(f)}catch(m){_t(m,o)}Gs()}}var v=zn();if(s.length===0){l.then(()=>c(t.map(n))).finally(v);return}function u(){Promise.all(s.map(f=>di(f))).then(f=>c([...t.map(n),...f])).catch(f=>_t(f,o)).finally(v)}l?l.then(()=>{i(),u(),Gs()}):u()}function ci(){var e=K,t=H,s=Ae,r=B;return function(a=!0){Je(e),Me(t),is(s),a&&(e.f&De)===0&&(r?.activate(),r?.apply())}}function Gs(e=!0){Je(null),Me(null),is(null),e&&B?.deactivate()}function zn(){var e=K,t=e.b,s=B,r=t.is_rendered();return t.update_pending_count(1,s),s.increment(r,e),()=>{t.update_pending_count(-1,s),s.decrement(r,e)}}function ws(e){var t=he|ve;return K!==null&&(K.f|=cs),{ctx:Ae,deps:null,effects:null,equals:mn,f:t,fn:e,reactions:null,rv:0,v:de,wv:0,parent:K,ac:null}}const Is=Symbol("obsolete");function di(e,t,s){let r=K;r===null&&xa();var n=void 0,a=Pt(de),o=!H,i=new Set;return xi(()=>{var l=K,c=hn();n=c.promise;try{Promise.resolve(e()).then(c.resolve,m=>{m!==rr&&c.reject(m)}).finally(Gs)}catch(m){c.reject(m),Gs()}var v=B;if(o){if((l.f&Nt)!==0)var u=zn();if(r.b.is_rendered())v.async_deriveds.get(l)?.reject(Is);else for(const m of i.values())m.reject(Is);i.add(c),v.async_deriveds.set(l,c)}const f=(m,_=void 0)=>{u?.(),i.delete(c),_!==Is&&(v.activate(),_?(a.f|=gt,os(a,_)):((a.f>)!==0&&(a.f^=gt),os(a,m)),v.deactivate())};c.promise.then(f,m=>f(null,m||"unknown"))}),qn(()=>{for(const l of i)l.reject(Is)}),new Promise(l=>{function c(v){function u(){v===n?l(a):c(n)}v.then(u,u)}c(n)})}function R(e){const t=ws(e);return Yn(t),t}function On(e){const t=ws(e);return t.equals=yn,t}function fi(e){var t=e.effects;if(t!==null){e.effects=null;for(var s=0;s0&&!Vn&&hi()}return t}function hi(){Vn=!1;for(const e of Ws){(e.f&fe)!==0&&oe(e,Xe);let t;try{t=Os(e)}catch{t=!0}t&&ls(e)}Ws.clear()}function ms(e){P(e,e.v+1)}function In(e,t,s){var r=e.reactions;if(r!==null)for(var n=r.length,a=0;a{if(It===a)return i();var l=H,c=It;Me(null),Qr(a);var v=i();return Me(l),Qr(c),v};return r&&s.set("length",Z(e.length)),new Proxy(e,{defineProperty(i,l,c){(!("value"in c)||c.configurable===!1||c.enumerable===!1||c.writable===!1)&&za();var v=s.get(l);return v===void 0?o(()=>{var u=Z(c.value);return s.set(l,u),u}):P(v,c.value,!0),!0},deleteProperty(i,l){var c=s.get(l);if(c===void 0){if(l in i){const v=o(()=>Z(de));s.set(l,v),ms(n)}}else P(c,de),ms(n);return!0},get(i,l,c){if(l===Ot)return e;var v=s.get(l),u=l in i;if(v===void 0&&(!u||Zt(i,l)?.writable)&&(v=o(()=>{var m=ke(u?i[l]:de),_=Z(m);return _}),s.set(l,v)),v!==void 0){var f=d(v);return f===de?void 0:f}return Reflect.get(i,l,c)},getOwnPropertyDescriptor(i,l){var c=Reflect.getOwnPropertyDescriptor(i,l);if(c&&"value"in c){var v=s.get(l);v&&(c.value=d(v))}else if(c===void 0){var u=s.get(l),f=u?.v;if(u!==void 0&&f!==de)return{enumerable:!0,configurable:!0,value:f,writable:!0}}return c},has(i,l){if(l===Ot)return!0;var c=s.get(l),v=c!==void 0&&c.v!==de||Reflect.has(i,l);if(c!==void 0||K!==null&&(!v||Zt(i,l)?.writable)){c===void 0&&(c=o(()=>{var f=v?ke(i[l]):de,m=Z(f);return m}),s.set(l,c));var u=d(c);if(u===de)return!1}return v},set(i,l,c,v){var u=s.get(l),f=l in i;if(r&&l==="length")for(var m=c;mZ(de)),s.set(m+"",_))}if(u===void 0)(!f||Zt(i,l)?.writable)&&(u=o(()=>Z(void 0)),P(u,ke(c)),s.set(l,u));else{f=u.v!==de;var k=o(()=>ke(c));P(u,k)}var p=Reflect.getOwnPropertyDescriptor(i,l);if(p?.set&&p.set.call(v,c),!f){if(r&&typeof l=="string"){var y=s.get("length"),E=Number(l);Number.isInteger(E)&&E>=y.v&&P(y,E+1)}ms(n)}return!0},ownKeys(i){d(n);var l=Reflect.ownKeys(i).filter(u=>{var f=s.get(u);return f===void 0||f.v!==de});for(var[c,v]of s)v.v!==de&&!(c in i)&&l.push(c);return l},setPrototypeOf(){Oa()}})}function Yr(e){try{if(e!==null&&typeof e=="object"&&Ot in e)return e[Ot]}catch{}return e}function pi(e,t){return Object.is(Yr(e),Yr(t))}var Zr,Dn,Fn,Mn;function _i(){if(Zr===void 0){Zr=window,Dn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,s=Text.prototype;Fn=Zt(t,"firstChild").get,Mn=Zt(t,"nextSibling").get,Ur(e)&&(e[br]=void 0,e[Ms]=null,e[wr]=void 0,e.__e=void 0),Ur(s)&&(s[hs]=void 0)}}function it(e=""){return document.createTextNode(e)}function Ys(e){return Fn.call(e)}function zs(e){return Mn.call(e)}function g(e,t){return Ys(e)}function nr(e,t=!1){{var s=Ys(e);return s instanceof Comment&&s.data===""?zs(s):s}}function w(e,t=1,s=!1){let r=e;for(;t--;)r=zs(r);return r}function gi(e){e.textContent=""}function Pn(){return!1}function mi(e,t,s){return document.createElementNS(gn,e,void 0)}let Xr=!1;function yi(){Xr||(Xr=!0,document.addEventListener("reset",e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(const t of e.target.elements)t[Ps]?.()})},{capture:!0}))}function Mr(e){var t=H,s=K;Me(null),Je(null);try{return e()}finally{Me(t),Je(s)}}function Nn(e,t,s,r=s){e.addEventListener(t,()=>Mr(s));const n=e[Ps];n?e[Ps]=()=>{n(),r(!0)}:e[Ps]=()=>r(!0),yi()}function bi(e){K===null&&(H===null&&Ta(),ja()),ot&&Ea()}function wi(e,t){var s=t.last;s===null?t.last=t.first=e:(s.next=e,e.prev=s,t.last=e)}function lt(e,t){var s=K;s!==null&&(s.f&_e)!==0&&(e|=_e);var r={ctx:Ae,deps:null,nodes:null,f:e|ve|Ie,first:null,fn:t,last:null,next:null,parent:s,b:s&&s.b,prev:null,teardown:null,wv:0,ac:null};B?.register_created_effect(r);var n=r;if((e&as)!==0)Yt!==null?Yt.push(r):Mt.ensure().schedule(r);else if(t!==null){try{ls(r)}catch(o){throw xe(r),o}n.deps===null&&n.teardown===null&&n.nodes===null&&n.first===n.last&&(n.f&cs)===0&&(n=n.first,(e&Be)!==0&&(e&Dt)!==0&&n!==null&&(n.f|=Dt))}if(n!==null&&(n.parent=s,s!==null&&wi(n,s),H!==null&&(H.f&he)!==0&&(e&mt)===0)){var a=H;(a.effects??(a.effects=[])).push(n)}return r}function Pr(){return H!==null&&!He}function qn(e){const t=lt(sr,null);return oe(t,fe),t.teardown=e,t}function Bn(e){bi();var t=K.f,s=!H&&(t&Ke)!==0&&(t&Nt)===0;if(s){var r=Ae;(r.e??(r.e=[])).push(e)}else return $n(e)}function $n(e){return lt(as|ya,e)}function ki(e){Mt.ensure();const t=lt(mt|cs,e);return(s={})=>new Promise(r=>{s.outro?Vt(t,()=>{xe(t),r(void 0)}):(xe(t),r(void 0))})}function Hn(e){return lt(as,e)}function xi(e){return lt(Xt|cs,e)}function Nr(e,t=0){return lt(sr|t,e)}function M(e,t=[],s=[],r=[]){li(r,t,s,n=>{lt(sr,()=>e(...n.map(d)))})}function ar(e,t=0){var s=lt(Be|t,e);return s}function Ve(e){return lt(Ke|cs,e)}function Kn(e){var t=e.teardown;if(t!==null){const s=ot,r=H;Jr(!0),Me(null);try{t.call(null)}finally{Jr(s),Me(r)}}}function qr(e,t=!1){var s=e.first;for(e.first=e.last=null;s!==null;){const n=s.ac;n!==null&&Mr(()=>{n.abort(rr)});var r=s.next;(s.f&mt)!==0?s.parent=null:xe(s,t),s=r}}function Si(e){for(var t=e.first;t!==null;){var s=t.next;(t.f&Ke)===0&&xe(t),t=s}}function xe(e,t=!0){var s=!1;(t||(e.f&ma)!==0)&&e.nodes!==null&&e.nodes.end!==null&&(Ei(e.nodes.start,e.nodes.end),s=!0),oe(e,yr),qr(e,t&&!s),ks(e,0);var r=e.nodes&&e.nodes.t;if(r!==null)for(const a of r)a.stop();Kn(e),e.f^=yr,e.f|=De;var n=e.parent;n!==null&&n.first!==null&&Un(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Ei(e,t){for(;e!==null;){var s=e===t?null:zs(e);e.remove(),e=s}}function Un(e){var t=e.parent,s=e.prev,r=e.next;s!==null&&(s.next=r),r!==null&&(r.prev=s),t!==null&&(t.first===e&&(t.first=r),t.last===e&&(t.last=s))}function Vt(e,t,s=!0){var r=[];Gn(e,r,!0);var n=()=>{s&&xe(e),t&&t()},a=r.length;if(a>0){var o=()=>--a||n();for(var i of r)i.out(o)}else n()}function Gn(e,t,s){if((e.f&_e)===0){e.f^=_e;var r=e.nodes&&e.nodes.t;if(r!==null)for(const i of r)(i.is_global||s)&&t.push(i);for(var n=e.first;n!==null;){var a=n.next;if((n.f&mt)===0){var o=(n.f&Dt)!==0||(n.f&Ke)!==0&&(e.f&Be)!==0;Gn(n,t,o?s:!1)}n=a}}}function Br(e){Wn(e,!0)}function Wn(e,t){if((e.f&_e)!==0){e.f^=_e,(e.f&fe)===0&&(oe(e,ve),Mt.ensure().schedule(e));for(var s=e.first;s!==null;){var r=s.next,n=(s.f&Dt)!==0||(s.f&Ke)!==0;Wn(s,n?t:!1),s=r}var a=e.nodes&&e.nodes.t;if(a!==null)for(const o of a)(o.is_global||t)&&o.in()}}function $r(e,t){if(e.nodes)for(var s=e.nodes.start,r=e.nodes.end;s!==null;){var n=s===r?null:zs(s);t.append(s),s=n}}let Hs=!1,ot=!1;function Jr(e){ot=e}let H=null,He=!1;function Me(e){H=e}let K=null;function Je(e){K=e}let Fe=null;function Yn(e){H!==null&&(Fe===null?Fe=[e]:Fe.push(e))}let we=null,Ee=0,ze=null;function ji(e){ze=e}let Zn=1,kt=0,It=kt;function Qr(e){It=e}function Xn(){return++Zn}function Os(e){var t=e.f;if((t&ve)!==0)return!0;if(t&he&&(e.f&=~Ft),(t&Xe)!==0){for(var s=e.deps,r=s.length,n=0;ne.wv)return!0}(t&Ie)!==0&&$e===null&&oe(e,fe)}return!1}function Jn(e,t,s=!0){var r=e.reactions;if(r!==null&&!(Fe!==null&&zt.call(Fe,e)))for(var n=0;n{e.ac.abort(rr)}),e.ac=null);try{e.f|=Us;var v=e.fn,u=v();e.f|=Nt;var f=e.deps,m=B?.is_fork;if(we!==null){var _;if(m||ks(e,Ee),f!==null&&Ee>0)for(f.length=Ee+we.length,_=0;_{throw p});throw f}}finally{e[xt]=t,delete e.currentTarget,Me(v),Je(u)}}}const Oi=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:e=>e});function Ri(e){return Oi?.createHTML(e)??e}function Li(e){var t=mi("template");return t.innerHTML=Ri(e.replaceAll("","")),t.content}function Zs(e,t){var s=K;s.nodes===null&&(s.nodes={start:e,end:t,a:null,t:null})}function L(e,t){var s=(t&Ba)!==0,r=(t&$a)!==0,n,a=!e.startsWith("");return()=>{n===void 0&&(n=Li(a?e:""+e),s||(n=Ys(n)));var o=r||Dn?document.importNode(n,!0):n.cloneNode(!0);if(s){var i=Ys(o),l=o.lastChild;Zs(i,l)}else Zs(o,o);return o}}function Vi(e=""){{var t=it(e+"");return Zs(t,t),t}}function Ii(){var e=document.createDocumentFragment(),t=document.createComment(""),s=it();return e.append(t,s),Zs(t,s),e}function z(e,t){e!==null&&e.before(t)}function I(e,t){var s=t==null?"":typeof t=="object"?`${t}`:t;s!==(e[hs]??(e[hs]=e.nodeValue))&&(e[hs]=s,e.nodeValue=`${s}`)}function Di(e,t){return Fi(e,t)}const Ds=new Map;function Fi(e,{target:t,anchor:s,props:r={},events:n,context:a,intro:o=!0,transformError:i}){_i();var l=void 0,c=ki(()=>{var v=s??t.appendChild(it());ri(v,{pending:()=>{}},m=>{ne({});var _=Ae;a&&(_.c=a),n&&(r.$$events=n),l=e(m,r)||{},ae()},i);var u=new Set,f=m=>{for(var _=0;_{for(var m of u)for(const p of[t,document]){var _=Ds.get(p),k=_.get(m);--k==0?(p.removeEventListener(m,tn),_.delete(m),_.size===0&&Ds.delete(p)):_.set(m,k)}zr.delete(f),v!==s&&v.parentNode?.removeChild(v)}});return Mi.set(l,c),l}let Mi=new WeakMap;var Ne,Ye,Ce,At,Cs,As,er;class ra{constructor(t,s=!0){ye(this,"anchor");q(this,Ne,new Map);q(this,Ye,new Map);q(this,Ce,new Map);q(this,At,new Set);q(this,Cs,!0);q(this,As,t=>{if(h(this,Ne).has(t)){var s=h(this,Ne).get(t),r=h(this,Ye).get(s);if(r)Br(r),h(this,At).delete(s);else{var n=h(this,Ce).get(s);n&&(h(this,Ye).set(s,n.effect),h(this,Ce).delete(s),n.fragment.lastChild.remove(),this.anchor.before(n.fragment),r=n.effect)}for(const[a,o]of h(this,Ne)){if(h(this,Ne).delete(a),a===t)break;const i=h(this,Ce).get(o);i&&(xe(i.effect),h(this,Ce).delete(o))}for(const[a,o]of h(this,Ye)){if(a===s||h(this,At).has(a))continue;const i=()=>{if(Array.from(h(this,Ne).values()).includes(a)){var c=document.createDocumentFragment();$r(o,c),c.append(it()),h(this,Ce).set(a,{effect:o,fragment:c})}else xe(o);h(this,At).delete(a),h(this,Ye).delete(a)};h(this,Cs)||!r?(h(this,At).add(a),Vt(o,i,!1)):i()}}});q(this,er,t=>{h(this,Ne).delete(t);const s=Array.from(h(this,Ne).values());for(const[r,n]of h(this,Ce))s.includes(r)||(xe(n.effect),h(this,Ce).delete(r))});this.anchor=t,N(this,Cs,s)}ensure(t,s){var r=B,n=Pn();if(s&&!h(this,Ye).has(t)&&!h(this,Ce).has(t))if(n){var a=document.createDocumentFragment(),o=it();a.append(o),h(this,Ce).set(t,{effect:Ve(()=>s(o)),fragment:a})}else h(this,Ye).set(t,Ve(()=>s(this.anchor)));if(h(this,Ne).set(r,t),n){for(const[i,l]of h(this,Ye))i===t?r.unskip_effect(l):r.skip_effect(l);for(const[i,l]of h(this,Ce))i===t?r.unskip_effect(l.effect):r.skip_effect(l.effect);r.oncommit(h(this,As)),r.ondiscard(h(this,er))}else h(this,As).call(this,r)}}Ne=new WeakMap,Ye=new WeakMap,Ce=new WeakMap,At=new WeakMap,Cs=new WeakMap,As=new WeakMap,er=new WeakMap;function re(e,t,s=!1){var r=new ra(e),n=s?Dt:0;function a(o,i){r.ensure(o,i)}ar(()=>{var o=!1;t((i,l=0)=>{o=!0,a(l,i)}),o||a(-1,null)},n)}function us(e,t){return t}function Pi(e,t,s){for(var r=[],n=t.length,a,o=t.length,i=0;i{if(a){if(a.pending.delete(u),a.done.add(u),a.pending.size===0){var f=e.outrogroups;Or(e,tr(a.done)),f.delete(a),f.size===0&&(e.outrogroups=null)}}else o-=1},!1)}if(o===0){var l=r.length===0&&s!==null;if(l){var c=s,v=c.parentNode;gi(v),v.append(c),e.items.clear()}Or(e,t,!l)}else a={pending:new Set(t),done:new Set},(e.outrogroups??(e.outrogroups=new Set)).add(a)}function Or(e,t,s=!0){var r;if(e.pending.size>0){r=new Set;for(const o of e.pending.values())for(const i of o)r.add(e.items.get(i).e)}for(var n=0;n{var T=s();return Lr(T)?T:T==null?[]:tr(T)}),f,m=new Map,_=!0;function k(T){(E.effect.f&De)===0&&(E.pending.delete(T),E.fallback=v,Ni(E,f,o,t,r),v!==null&&(f.length===0?(v.f&Ze)===0?Br(v):(v.f^=Ze,_s(v,null,o)):Vt(v,()=>{v=null})))}function p(T){E.pending.delete(T)}var y=ar(()=>{f=d(u);for(var T=f.length,O=new Set,S=B,x=Pn(),j=0;ja(o)):(v=Ve(()=>a(sn??(sn=it()))),v.f|=Ze)),T>O.size&&Sa(),!_)if(m.set(S,O),x){for(const[A,D]of i)O.has(A)||S.skip_effect(D.e);S.oncommit(k),S.ondiscard(p)}else k(S);d(u)}),E={effect:y,items:i,pending:m,outrogroups:null,fallback:v};_=!1}function vs(e){for(;e!==null&&(e.f&Ke)===0;)e=e.next;return e}function Ni(e,t,s,r,n){var a=(r&Da)!==0,o=t.length,i=e.items,l=vs(e.effect.first),c,v=null,u,f=[],m=[],_,k,p,y;if(a)for(y=0;y0){var b=(r&_n)!==0&&o===0?s:null;if(a){for(y=0;y{if(u!==void 0)for(p of u)p.nodes?.a?.apply()})}function qi(e,t,s,r,n,a,o,i){var l=(o&Va)!==0?(o&Fa)===0?vi(s,!1,!1):Pt(s):null,c=(o&Ia)!==0?Pt(n):null;return{v:l,i:c,e:Ve(()=>(a(t,l??s,c??n,i),()=>{e.delete(r)}))}}function _s(e,t,s){if(e.nodes)for(var r=e.nodes.start,n=e.nodes.end,a=t&&(t.f&Ze)===0?t.nodes.start:s;r!==null;){var o=zs(r);if(a.before(r),r===n)return;r=o}}function ut(e,t,s){t===null?e.effect.first=s:t.next=s,s===null?e.effect.last=t:s.prev=t}function Bi(e,t,...s){var r=new ra(e);ar(()=>{const n=t()??null;r.ensure(n,n&&(a=>n(a,...s)))},Dt)}const rn=[...` +\r\f \v\uFEFF`];function $i(e,t,s){var r=e==null?"":""+e;if(s){for(var n of Object.keys(s))if(s[n])r=r?r+" "+n:n;else if(r.length)for(var a=n.length,o=0;(o=r.indexOf(n,o))>=0;){var i=o+a;(o===0||rn.includes(r[o-1]))&&(i===r.length||rn.includes(r[i]))?r=(o===0?"":r.substring(0,o))+r.substring(i+1):o=i}}return r===""?null:r}function nn(e,t=!1){var s=t?" !important;":";",r="";for(var n of Object.keys(e)){var a=e[n];a!=null&&a!==""&&(r+=" "+n+": "+a+s)}return r}function vr(e){return e[0]!=="-"||e[1]!=="-"?e.toLowerCase():e}function Hi(e,t){if(t){var s="",r,n;if(Array.isArray(t)?(r=t[0],n=t[1]):r=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var a=!1,o=0,i=!1,l=[];r&&l.push(...Object.keys(r).map(vr)),n&&l.push(...Object.keys(n).map(vr));var c=0,v=-1;const k=e.length;for(var u=0;u{Hr(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),qn(()=>{t.disconnect()})}function an(e,t,s=t){var r=new WeakSet,n=!0;Nn(e,"change",a=>{var o=a?"[selected]":":checked",i;if(e.multiple)i=[].map.call(e.querySelectorAll(o),ys);else{var l=e.querySelector(o)??e.querySelector("option:not([disabled])");i=l&&ys(l)}s(i),e.__value=i,B!==null&&r.add(B)}),Hn(()=>{var a=t();if(e===document.activeElement){var o=B;if(r.has(o))return}if(Hr(e,a,n),n&&a===void 0){var i=e.querySelector(":checked");i!==null&&(a=ys(i),s(a))}e.__value=a,n=!1}),na(e)}function ys(e){return"__value"in e?e.__value:e.value}const Ki=Symbol("is custom element"),Ui=Symbol("is html"),Gi=ka?"progress":"PROGRESS";function Xs(e,t){var s=aa(e);s.value===(s.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==Gi)||(e.value=t??"")}function G(e,t,s,r){var n=aa(e);n[t]!==(n[t]=s)&&(t==="loading"&&(e[wa]=s),s==null?e.removeAttribute(t):typeof s!="string"&&Wi(e).includes(t)?e[t]=s:e.setAttribute(t,s))}function aa(e){return e[Ms]??(e[Ms]={[Ki]:e.nodeName.includes("-"),[Ui]:e.namespaceURI===gn})}var on=new Map;function Wi(e){var t=e.getAttribute("is")||e.nodeName,s=on.get(t);if(s)return s;on.set(t,s=[]);for(var r,n=e,a=Element.prototype;a!==n;){r=ha(n);for(var o in r)r[o].set&&o!=="innerHTML"&&o!=="textContent"&&o!=="innerText"&&s.push(o);n=un(n)}return s}function bs(e,t,s=t){var r=new WeakSet;Nn(e,"input",async n=>{var a=n?e.defaultValue:e.value;if(a=pr(e)?_r(a):a,s(a),B!==null&&r.add(B),await Ci(),a!==(a=t())){var o=e.selectionStart,i=e.selectionEnd,l=e.value.length;if(e.value=a??"",i!==null){var c=e.value.length;o===i&&i===l&&c>l?(e.selectionStart=c,e.selectionEnd=c):(e.selectionStart=o,e.selectionEnd=Math.min(i,c))}}}),ir(t)==null&&e.value&&(s(pr(e)?_r(e.value):e.value),B!==null&&r.add(B)),Nr(()=>{var n=t();if(e===document.activeElement){var a=B;if(r.has(a))return}pr(e)&&n===_r(e.value)||e.type==="date"&&!n&&!e.value||n!==e.value&&(e.value=n??"")})}function pr(e){var t=e.type;return t==="number"||t==="range"}function _r(e){return e===""?null:+e}function gr(e,t){return e===t||e?.[Ot]===t}function Yi(e={},t,s,r){var n=Ae.r,a=K;return Hn(()=>{var o,i;return Nr(()=>{o=i,i=[],ir(()=>{gr(s(...i),e)||(t(e,...i),o&&gr(s(...o),e)&&t(null,...o))})}),()=>{let l=a;for(;l!==n&&l.parent!==null&&l.parent.f&yr;)l=l.parent;const c=()=>{i&&gr(s(...i),e)&&t(null,...i)},v=l.teardown;l.teardown=()=>{c(),v?.()}}}),e}function ee(e,t,s,r){var n=!0,a=(s&Na)!==0,o=(s&qa)!==0,i=r,l=!0,c=void 0,v=()=>o&&n?(c??(c=ws(r)),d(c)):(l&&(l=!1,i=o?ir(r):r),i);let u;if(a){var f=Ot in e||ba in e;u=Zt(e,t)?.set??(f&&t in e?O=>e[t]=O:void 0)}var m,_=!1;a?[m,_]=Za(()=>e[t]):m=e[t],m===void 0&&r!==void 0&&(m=v(),u&&(Aa(),u(m)));var k;if(k=()=>{var O=e[t];return O===void 0?v():(l=!0,O)},(s&Pa)===0)return k;if(u){var p=e.$$legacy;return(function(O,S){return arguments.length>0?((!S||p||_)&&u(S?k():O),O):k()})}var y=!1,E=((s&Ma)!==0?ws:On)(()=>(y=!1,k()));a&&d(E);var T=K;return(function(O,S){if(arguments.length>0){const x=S?d(E):a?ke(O):O;return P(E,x),y=!0,i!==void 0&&(i=x),O}return ot&&y||(T.f&De)!==0?E.v:d(E)})}const Zi="5";var fn;typeof window<"u"&&((fn=window.__svelte??(window.__svelte={})).v??(fn.v=new Set)).add(Zi);const Gt=typeof window<"u"&&window.slashedBricksApp?window.slashedBricksApp:{defaults:{},settings:{},tabs:{},rest:{url:"",nonce:""}},se={defaults:Gt.defaults||{},tabs:Gt.tabs||{},rest:Gt.rest||{url:"",nonce:""},inventory:Gt.inventory||{variables:[],sf_classes:[],is_classes:[]},pluginSettings:Gt.pluginSettings||{}},W=ke(structuredClone(Gt.settings||{})),F=ke({activeTab:Xi(se.tabs)||"colors",dirty:!1,saving:!1,lastSavedAt:null,error:""});function Xi(e){for(const t in e)return t;return null}function ia(){F.dirty=!0,F.error=""}function Ji(e){W[e]&&delete W[e]}function xs(e,t,s){W[e]||(W[e]={}),s===""||s===null||s===void 0||typeof s=="string"&&s.trim()===""?delete W[e][t]:W[e][t]=String(s),ia()}var Qi=L(''),eo=L('

');function to(e,t){ne(t,!0);var s=eo();te(s,21,()=>Object.entries(se.tabs),([r,n])=>r,(r,n)=>{var a=R(()=>nt(d(n),2));let o=()=>d(a)[0],i=()=>d(a)[1];var l=Qi();let c;var v=g(l);M(()=>{c=Jt(l,1,"tab-nav__btn svelte-yyiz68",null,c,{active:F.activeTab===o()}),I(v,i())}),le("click",l,()=>F.activeTab=o()),z(r,l)}),z(e,s),ae()}Pe(["click"]);var so=L(' '),ro=L(' ',1),no=L(''),ao=L('
');function Fs(e,t){ne(t,!0);let s=ee(t,"hexHint",3,""),r=ee(t,"rawHint",3,""),n=ee(t,"cssVar",3,"");const a=/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,o=(()=>{const A=(W.colors?.[t.storeKey]??"").trim(),D=A===""||a.test(A);return{mode:D?"hex":"raw",hex:D?A:"",raw:D?"":A}})();let i=Z(ke(o.mode)),l=Z(ke(o.hex)),c=Z(ke(o.raw));function v(){W.colors||(W.colors={});const A=d(c).trim(),D=d(l).trim(),$=d(i)==="raw"?A:D;$===""?delete W.colors[t.storeKey]:W.colors[t.storeKey]=$,ia()}function u(){d(i)==="hex"?(P(i,"raw"),P(l,"")):(P(i,"hex"),P(c,"")),v()}const f=R(()=>(d(i)==="raw"?d(c):d(l))||s()||"transparent");var m=ao(),_=g(m),k=g(_),p=g(k),y=w(k,2);{var E=A=>{var D=so(),$=g(D);M(()=>I($,n())),z(A,D)};re(y,A=>{n()&&A(E)})}var T=w(_,2),O=g(T);let S;var x=w(O,2);{var j=A=>{var D=ro(),$=nr(D),J=w($,2);M(()=>{G($,"id",t.storeKey),G(J,"placeholder",s())}),le("input",$,v),bs($,()=>d(l),ie=>P(l,ie)),le("input",J,v),bs(J,()=>d(l),ie=>P(l,ie)),z(A,D)},C=A=>{var D=no();M(()=>{G(D,"id",t.storeKey),G(D,"placeholder",r())}),le("input",D,v),bs(D,()=>d(c),$=>P(c,$)),z(A,D)};re(x,A=>{d(i)==="hex"?A(j):A(C,-1)})}var b=w(x,2),V=g(b);M(()=>{G(k,"for",t.storeKey),I(p,t.label),S=qe(O,"",S,{background:d(f)}),I(V,d(i)==="hex"?"Advanced (oklch / raw)":"Use HEX picker")}),le("click",b,u),z(e,m),ae()}Pe(["input","click"]);var io=L(`

Brand Colors — Light Mode

Pick a color via the HEX input, or switch to Advanced to paste any CSS color value (oklch, rgb, hsl, var(...), etc). Whatever you save is fed straight into the framework as the source of the brand scale.

Brand Colors — Dark Mode

Optional overrides for dark mode. Leave empty to let the framework auto-derive dark variants from the light source colors. Set explicit values for full - control over dark-mode appearance.

Status Colors — Light Mode

Status Colors — Dark Mode

Optional overrides for dark mode. Leave empty for auto-derivation.

`);function io(e,t){re(t,!0);const s=te.defaults?.colors??{},r=c=>c.charAt(0).toUpperCase()+c.slice(1);var n=ao(),a=w(y(n),4);ie(a,21,()=>Object.entries(s.brand??{}),([c,v])=>c,(c,v)=>{var u=j(()=>rt(f(v),2));let d=()=>f(u)[0],g=()=>f(u)[1];{let _=j(()=>`brand_${d()}`),b=j(()=>r(d())),h=j(()=>s.brand_hex_hints?.[d()]??""),m=j(()=>`--sf-color-${d()}-light`);Ds(c,{get storeKey(){return f(_)},get label(){return f(b)},get hexHint(){return f(h)},get rawHint(){return g()},get cssVar(){return f(m)}})}});var i=w(a,6);ie(i,21,()=>Object.entries(s.brand_dark??s.brand??{}),([c])=>c,(c,v)=>{var u=j(()=>rt(f(v),1));let d=()=>f(u)[0];{let g=j(()=>`brand_dark_${d()}`),_=j(()=>r(d())),b=j(()=>s.brand_dark_hex_hints?.[d()]??""),h=j(()=>s.brand_dark?.[d()]??""),m=j(()=>`--sf-color-${d()}-dark`);Ds(c,{get storeKey(){return f(g)},get label(){return f(_)},get hexHint(){return f(b)},get rawHint(){return f(h)},get cssVar(){return f(m)}})}});var o=w(i,4);ie(o,21,()=>Object.entries(s.status??{}),([c,v])=>c,(c,v)=>{var u=j(()=>rt(f(v),2));let d=()=>f(u)[0],g=()=>f(u)[1];{let _=j(()=>`status_${d()}`),b=j(()=>r(d())),h=j(()=>s.status_hex_hints?.[d()]??""),m=j(()=>`--sf-color-${d()}-light`);Ds(c,{get storeKey(){return f(_)},get label(){return f(b)},get hexHint(){return f(h)},get rawHint(){return g()},get cssVar(){return f(m)}})}});var l=w(o,6);ie(l,21,()=>Object.entries(s.status_dark??s.status??{}),([c])=>c,(c,v)=>{var u=j(()=>rt(f(v),1));let d=()=>f(u)[0];{let g=j(()=>`status_dark_${d()}`),_=j(()=>r(d())),b=j(()=>s.status_dark_hex_hints?.[d()]??""),h=j(()=>s.status_dark?.[d()]??""),m=j(()=>`--sf-color-${d()}-dark`);Ds(c,{get storeKey(){return f(g)},get label(){return f(_)},get hexHint(){return f(b)},get rawHint(){return f(h)},get cssVar(){return f(m)}})}}),T(e,n),ne()}var oo=C(''),lo=C(' '),co=C(' '),fo=C('

'),uo=C('
');function ar(e,t){let s=X(t,"cssVar",3,""),r=X(t,"fieldId",3,""),n=X(t,"description",3,"");var a=uo(),i=y(a),o=y(i);{var l=h=>{var m=oo(),k=y(m);M(()=>{Y(m,"for",r()),O(k,t.label)}),T(h,m)},c=h=>{var m=lo(),k=y(m);M(()=>O(k,t.label)),T(h,m)};se(o,h=>{r()?h(l):h(c,-1)})}var v=w(o,2);{var u=h=>{var m=co(),k=y(m);M(()=>O(k,s())),T(h,m)};se(v,h=>{s()&&h(u)})}var d=w(i,2),g=y(d);Bi(g,()=>t.children??vn);var _=w(g,2);{var b=h=>{var m=fo(),k=y(m);M(()=>O(k,n())),T(h,m)};se(_,h=>{n()&&h(b)})}T(e,a)}var vo=C(' '),ho=C(' ',1);function Wt(e,t){re(t,!0);let s=X(t,"cssVar",3,""),r=X(t,"unit",3,""),n=X(t,"description",3,"");const a=j(()=>G[t.section]?.[t.fieldKey]===void 0||G[t.section]?.[t.fieldKey]===null?"":String(G[t.section][t.fieldKey])),i=j(()=>f(a)===""||Number.isNaN(Number(f(a)))?Number(t.default):Number(f(a)));function o(c){ks(t.section,t.fieldKey,c.currentTarget.value)}function l(c){ks(t.section,t.fieldKey,c.currentTarget.value)}ar(e,{get label(){return t.label},get cssVar(){return s()},get fieldId(){return t.fieldKey},get description(){return n()},children:(c,v)=>{var u=ho(),d=Mr(u),g=w(d,2),_=w(g,2);{var b=h=>{var m=vo(),k=y(m);M(()=>O(k,r())),T(h,m)};se(_,h=>{r()&&h(b)})}M(h=>{Y(d,"min",t.min),Y(d,"max",t.max),Y(d,"step",t.step),Zs(d,f(i)),Y(g,"id",t.fieldKey),Y(g,"min",t.min),Y(g,"max",t.max),Y(g,"step",t.step),Zs(g,f(a)),Y(g,"placeholder",h)},[()=>String(t.default)]),oe("input",d,o),oe("input",g,l),T(c,u)},$$slots:{default:!0}}),ne()}Pe(["input"]);var po=C(""),_o=C('');function go(e,t){re(t,!0);let s=X(t,"options",19,()=>[]),r=X(t,"default",3,""),n=X(t,"cssVar",3,""),a=X(t,"description",3,"");const i=j(()=>s().map(c=>typeof c=="string"?{value:c,label:c}:c)),o=j(()=>G[t.section]?.[t.fieldKey]===void 0||G[t.section]?.[t.fieldKey]===null?"":String(G[t.section][t.fieldKey]));function l(c){ks(t.section,t.fieldKey,c.currentTarget.value)}ar(e,{get label(){return t.label},get cssVar(){return n()},get fieldId(){return t.fieldKey},get description(){return a()},children:(c,v)=>{var u=_o(),d=y(u),g=y(d);d.value=d.__value="";var _=w(d);ie(_,17,()=>f(i),h=>h.value,(h,m)=>{var k=po(),S=y(k),z={};M(()=>{O(S,f(m).label),z!==(z=f(m).value)&&(k.value=(k.__value=f(m).value)??"")}),T(h,k)});var b;na(u),M(()=>{Y(u,"id",t.fieldKey),O(g,`Default (${r()??""})`),b!==(b=f(o))&&(u.value=(u.__value=f(o))??"",qr(u,f(o)))}),oe("change",u,l),T(c,u)},$$slots:{default:!0}}),ne()}Pe(["change"]);var mo=C('

Contrast

Fine-tune how the framework derives shades and picks readable text colors against your brand colors.

Opacity

Focus ring

Visual indicator drawn around keyboard-focused elements. Lower the offset to tighten the ring, raise it to give the element more breathing room.

');function yo(e,t){re(t,!0);const s="contrast",r=te.defaults?.[s]??{};var n=mo(),a=w(y(n),4),i=y(a);{let _=j(()=>r.contrast_bias??0);Wt(i,{section:s,fieldKey:"contrast_bias",label:"Contrast bias",description:"Shifts every derived shade up (positive) or down (negative). Useful to brighten or dim the entire scale without re-picking source colors.",min:-.2,max:.2,step:.01,get default(){return f(_)},cssVar:"--sf-contrast-bias"})}var o=w(i,2);{let _=j(()=>r.contrast_threshold??.6);Wt(o,{section:s,fieldKey:"contrast_threshold",label:"Contrast threshold",description:"Lightness threshold used to pick text-on-color (white vs. black). Lower values prefer dark text on more colors; higher values prefer white text.",min:0,max:1,step:.01,get default(){return f(_)},cssVar:"--sf-contrast-threshold"})}var l=w(a,4),c=y(l);{let _=j(()=>r.opacity_disabled??.45);Wt(c,{section:s,fieldKey:"opacity_disabled",label:"Disabled opacity",description:"Opacity applied to disabled UI elements (buttons, inputs, links).",min:0,max:1,step:.01,get default(){return f(_)},cssVar:"--sf-opacity-disabled"})}var v=w(l,6),u=y(v);{let _=j(()=>r.focus_ring_width??2);Wt(u,{section:s,fieldKey:"focus_ring_width",label:"Ring width",min:0,max:8,step:.5,get default(){return f(_)},cssVar:"--sf-focus-ring-width",unit:"px"})}var d=w(u,2);{let _=j(()=>r.focus_ring_offset??2);Wt(d,{section:s,fieldKey:"focus_ring_offset",label:"Ring offset",min:0,max:8,step:.5,get default(){return f(_)},cssVar:"--sf-focus-ring-offset",unit:"px"})}var g=w(d,2);{let _=j(()=>r.focus_ring_style??"solid");go(g,{section:s,fieldKey:"focus_ring_style",label:"Ring style",options:["solid","dashed","dotted","double","none"],get default(){return f(_)},cssVar:"--sf-focus-ring-style"})}T(e,n),ne()}var bo=C('');function oa(e,t){re(t,!0);let s=X(t,"default",3,""),r=X(t,"cssVar",3,""),n=X(t,"description",3,""),a=X(t,"mono",3,!1),i=X(t,"width",3,"320px");const o=j(()=>G[t.section]?.[t.fieldKey]===void 0||G[t.section]?.[t.fieldKey]===null?"":String(G[t.section][t.fieldKey]));function l(c){ks(t.section,t.fieldKey,c.currentTarget.value)}ar(e,{get label(){return t.label},get cssVar(){return r()},get fieldId(){return t.fieldKey},get description(){return n()},children:(c,v)=>{var u=bo();let d,g;M(_=>{Y(u,"id",t.fieldKey),d=Jt(u,1,"text svelte-j8yw6l",null,d,{mono:a()}),Zs(u,f(o)),Y(u,"placeholder",_),g=xt(u,"",g,{width:i()})},[()=>String(s())]),oe("input",u,l),T(c,u)},$$slots:{default:!0}}),ne()}Pe(["input"]);var wo=C(' '),ko=C(' ',1);function nt(e,t){re(t,!0);let s=X(t,"min",3,void 0),r=X(t,"max",3,void 0),n=X(t,"step",3,void 0),a=X(t,"default",3,""),i=X(t,"cssVar",3,""),o=X(t,"unit",3,""),l=X(t,"description",3,""),c=X(t,"width",3,"120px");const v=j(()=>G[t.section]?.[t.fieldKey]===void 0||G[t.section]?.[t.fieldKey]===null?"":String(G[t.section][t.fieldKey]));function u(d){ks(t.section,t.fieldKey,d.currentTarget.value)}ar(e,{get label(){return t.label},get cssVar(){return i()},get fieldId(){return t.fieldKey},get description(){return l()},children:(d,g)=>{var _=ko(),b=Mr(_);let h;var m=w(b,2);{var k=S=>{var z=wo(),E=y(z);M(()=>O(E,o())),T(S,z)};se(m,S=>{o()&&S(k)})}M(S=>{Y(b,"id",t.fieldKey),Y(b,"min",s()),Y(b,"max",r()),Y(b,"step",n()),Zs(b,f(v)),Y(b,"placeholder",S),h=xt(b,"",h,{width:c()})},[()=>String(a())]),oe("input",b,u),T(d,_)},$$slots:{default:!0}}),ne()}Pe(["input"]);var xo=C('
'),So=C('

Font Families

Font Size Scale

Min and max values in rem for fluid type scaling via clamp().

Scale Multipliers

');function Eo(e,t){re(t,!0);const s="typography",r=te.defaults?.[s]??{},n=r.font_families??{},a=r.font_sizes??{},i=g=>g.charAt(0).toUpperCase()+g.slice(1);var o=So(),l=w(y(o),2);ie(l,21,()=>Object.entries(n),([g,_])=>g,(g,_)=>{var b=j(()=>rt(f(_),2));let h=()=>f(b)[0],m=()=>f(b)[1];{let k=j(()=>`font_${h()}`),S=j(()=>i(h())),z=j(()=>`--sf-font-${h()}`);oa(g,{section:s,get fieldKey(){return f(k)},get label(){return f(S)},get default(){return m()},get cssVar(){return f(z)},width:"420px"})}});var c=w(l,6);ie(c,21,()=>Object.entries(a),([g,_])=>g,(g,_)=>{var b=j(()=>rt(f(_),2));let h=()=>f(b)[0],m=()=>f(b)[1];var k=xo(),S=y(k),z=y(S),E=y(z),L=w(z,2),P=y(L),$=w(S,2),x=y($);{let A=j(()=>`size_${h()}_min`);nt(x,{section:s,get fieldKey(){return f(A)},label:"Min",min:0,step:.01,get default(){return m().min},width:"80px"})}var F=w(x,2);{let A=j(()=>`size_${h()}_max`);nt(F,{section:s,get fieldKey(){return f(A)},label:"Max",min:0,step:.01,get default(){return m().max},width:"80px"})}M(()=>{O(E,h()),O(P,`--sf-text-${h()??""}`)}),T(g,k)});var v=w(c,4),u=y(v);{let g=j(()=>r.scale_multipliers?.text_scale??1);nt(u,{section:s,fieldKey:"text_scale",label:"Text Scale",min:0,step:.05,get default(){return f(g)},cssVar:"--sf-text-scale"})}var d=w(u,2);{let g=j(()=>r.scale_multipliers?.text_display_scale??1);nt(d,{section:s,fieldKey:"text_display_scale",label:"Display Scale",min:0,step:.05,get default(){return f(g)},cssVar:"--sf-text-display-scale"})}T(e,o),ne()}var jo=C('

Spacing

');function To(e,t){re(t,!0);const s="spacing",r=te.defaults?.[s]??{},n=[{key:"gutter",label:"Gutter",cssVar:"--sf-space-gutter"},{key:"gap",label:"Gap",cssVar:"--sf-gap"},{key:"content_gap",label:"Content Gap",cssVar:"--sf-content-gap"},{key:"component_pad",label:"Component Pad",cssVar:"--sf-component-pad"},{key:"section_pad",label:"Section Pad",cssVar:"--sf-section-pad"}];var a=jo(),i=w(y(a),2),o=y(i);{let c=j(()=>r.space_scale??1);nt(o,{section:s,fieldKey:"space_scale",label:"Space Scale",min:0,step:.05,get default(){return f(c)},cssVar:"--sf-space-scale"})}var l=w(o,2);ie(l,17,()=>n,c=>c.key,(c,v)=>{{let u=j(()=>r[f(v).key]??"");oa(c,{section:s,get fieldKey(){return f(v).key},get label(){return f(v).label},get default(){return f(u)},get cssVar(){return f(v).cssVar},mono:!0})}}),T(e,a),ne()}var Co=C('

Radius

');function Ao(e,t){re(t,!0);const s="radius",r=te.defaults?.[s]??{};var n=Co(),a=w(y(n),2),i=y(a);{let o=j(()=>r.radius_scale??1);nt(i,{section:s,fieldKey:"radius_scale",label:"Radius Scale",min:0,step:.1,get default(){return f(o)},cssVar:"--sf-radius-scale"})}T(e,n),ne()}var zo=C('

Shadows

');function Oo(e,t){re(t,!0);const s="shadows",r=te.defaults?.[s]??{};var n=zo(),a=w(y(n),2),i=y(a);{let o=j(()=>r.shadow_strength??.08);Wt(i,{section:s,fieldKey:"shadow_strength",label:"Shadow Strength",description:"Base opacity value for shadow layers (0–1).",min:0,max:1,step:.01,get default(){return f(o)},cssVar:"--sf-shadow-strength"})}T(e,n),ne()}var Ro=C('

Motion

Duration Values

Base duration values in milliseconds.

');function Lo(e,t){re(t,!0);const s="motion",r=te.defaults?.[s]??{},n=r.durations??{},a=v=>v.charAt(0).toUpperCase()+v.slice(1);var i=Ro(),o=w(y(i),2),l=y(o);{let v=j(()=>r.motion_scale??1);nt(l,{section:s,fieldKey:"motion_scale",label:"Motion Scale",min:0,step:.1,get default(){return f(v)},cssVar:"--sf-motion-scale"})}var c=w(o,6);ie(c,21,()=>Object.entries(n),([v,u])=>v,(v,u)=>{var d=j(()=>rt(f(u),2));let g=()=>f(d)[0],_=()=>f(d)[1];{let b=j(()=>`duration_${g()}`),h=j(()=>a(g())),m=j(()=>`--sf-duration-${g()}`);nt(v,{section:s,get fieldKey(){return f(b)},get label(){return f(h)},min:0,step:10,get default(){return _()},get cssVar(){return f(m)},unit:"ms"})}}),T(e,i),ne()}var Io=C('

Z-Index

Z-index layer values for stacking context management.

');function Vo(e,t){re(t,!0);const s="zindex",r=te.defaults?.[s]??{},n=o=>o.charAt(0).toUpperCase()+o.slice(1);var a=Io(),i=w(y(a),4);ie(i,21,()=>Object.entries(r),([o,l])=>o,(o,l)=>{var c=j(()=>rt(f(l),2));let v=()=>f(c)[0],u=()=>f(c)[1];{let d=j(()=>n(v())),g=j(()=>`--sf-z-${v()}`);nt(o,{section:s,get fieldKey(){return v()},get label(){return f(d)},step:1,get default(){return u()},get cssVar(){return f(g)}})}}),T(e,a),ne()}var Do=C('
    • '),Mo=C(''),Po=C('
    '),Fo=C(`

    All --sf-* custom properties declared in the active SLASHED bundle, - grouped by category.

    `);function No(e,t){re(t,!0);const s=te.inventory?.variables??[],r={color:"Colors",text:"Typography",font:"Typography",leading:"Typography",tracking:"Typography",body:"Typography",heading:"Typography",h1:"Typography",h2:"Typography",h3:"Typography",h4:"Typography",h5:"Typography",h6:"Typography",prose:"Typography",code:"Typography",optical:"Typography",line:"Typography",space:"Spacing",gap:"Spacing",gutter:"Spacing",component:"Spacing",section:"Spacing",flow:"Spacing",safe:"Spacing",header:"Spacing",sticky:"Spacing",size:"Sizing",aspect:"Sizing",ratio:"Sizing",touch:"Sizing",container:"Layout",stack:"Layout",cluster:"Layout",sidebar:"Layout",switcher:"Layout",grid:"Layout",cover:"Layout",frame:"Layout",reel:"Layout",imposter:"Layout",bento:"Layout",box:"Layout",center:"Layout",content:"Layout",breakout:"Layout",divider:"Layout",field:"Layout",border:"Borders",stroke:"Borders",radius:"Radius",shadow:"Shadows",blur:"Effects",opacity:"Effects",gradient:"Effects",mask:"Effects",perspective:"Effects",drop:"Effects",contrast:"Effects",duration:"Motion",ease:"Motion",transition:"Motion",motion:"Motion",animation:"Motion",icon:"Icons",z:"Z-Index",is:"States",current:"States",focus:"Focus",caret:"Focus",scroll:"Scroll",scrollbar:"Scroll",print:"Print",truncate:"Misc"},n=["Colors","Typography","Spacing","Sizing","Layout","Borders","Radius","Shadows","Effects","Motion","Icons","Z-Index","States","Focus","Scroll","Print","Misc"];function a(_){let b=_;b.startsWith("--sf-")&&(b=b.slice(5));const h=b.indexOf("-"),m=h===-1?b:b.slice(0,h);return r[m]||"Misc"}function i(_){const b={};for(const m of _){const k=a(m);b[k]||(b[k]=[]),b[k].push(m)}const h=[];for(const m of n)b[m]?.length&&(b[m].sort(),h.push({category:m,items:b[m]}));for(const m of Object.keys(b))!n.includes(m)&&b[m]?.length&&(b[m].sort(),h.push({category:m,items:b[m]}));return h}const o=i(s);let l=ke({});function c(_){l[_]=!l[_]}var v=Fo(),u=y(v),d=y(u),g=w(u,4);ie(g,17,()=>o,({category:_,items:b})=>_,(_,b)=>{let h=()=>f(b).category,m=()=>f(b).items;var k=Po(),S=y(k),z=y(S),E=y(z),L=w(z,2),P=y(L),$=w(L,2),x=y($),F=w(S,2);{var A=I=>{var q=Mo();ie(q,20,m,Q=>Q,(Q,ce)=>{var ee=Do(),Fe=y(ee),J=y(Fe);M(()=>O(J,ce)),T(Q,ee)}),T(I,q)};se(F,I=>{l[h()]&&I(A)})}M(()=>{Y(S,"aria-expanded",l[h()]?"true":"false"),O(E,l[h()]?"▼":"▶"),O(P,h()),O(x,`(${m().length??""})`)}),oe("click",S,()=>c(h())),T(_,k)}),M(()=>O(d,`CSS Variables (${s.length??""})`)),T(e,v),ne()}Pe(["click"]);var Bo=C('
    • '),Ho=C(''),Ko=C('
    • '),qo=C(''),$o=C('

    All utility and state classes declared in the active SLASHED bundle.

    ');function Uo(e,t){re(t,!0);const s=te.inventory?.sf_classes??[],r=te.inventory?.is_classes??[];let n=Z(!1),a=Z(!1);var i=$o(),o=y(i),l=y(o),c=w(o,4),v=y(c),u=y(v),d=y(u),g=w(u,4),_=y(g),b=w(v,2);{var h=x=>{var F=Ho();ie(F,20,()=>s,A=>A,(A,I)=>{var q=Bo(),Q=y(q),ce=y(Q);M(()=>O(ce,`.${I??""}`)),T(A,q)}),T(x,F)};se(b,x=>{f(n)&&x(h)})}var m=w(c,2),k=y(m),S=y(k),z=y(S),E=w(S,4),L=y(E),P=w(k,2);{var $=x=>{var F=qo();ie(F,20,()=>r,A=>A,(A,I)=>{var q=Ko(),Q=y(q),ce=y(Q);M(()=>O(ce,`.${I??""}`)),T(A,q)}),T(x,F)};se(P,x=>{f(a)&&x($)})}M(()=>{O(l,`Registered Classes (${s.length+r.length})`),Y(v,"aria-expanded",f(n)?"true":"false"),O(d,f(n)?"▼":"▶"),O(_,`(${s.length??""})`),Y(k,"aria-expanded",f(a)?"true":"false"),O(z,f(a)?"▼":"▶"),O(L,`(${r.length??""})`)}),oe("click",v,()=>V(n,!f(n))),oe("click",k,()=>V(a,!f(a))),T(e,i),ne()}Pe(["click"]);async function ir(e,t){const{url:s,nonce:r}=te.rest;if(!s)return console.info("[slashed-admin] (dev) would POST",e,t),{ok:!0,dev:!0};const n=await fetch(s+e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":r},body:JSON.stringify(t)});if(!n.ok){const a=await n.text();throw new Error(a||`HTTP ${n.status}`)}return n.json()}function Go(e,t){return ir("/tokens",{section:e,values:t})}function Wo(e){return ir("/tokens/reset",{section:e})}function Yo(e){return ir("/settings",e)}async function Zo(){const{url:e,nonce:t}=te.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /tokens/export"),{schema_version:"1",tokens:{},plugin_settings:{},dev:!0};const s=await fetch(e+"/tokens/export",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);return s.json()}function Xo(e){return ir("/tokens/import",e)}var Jo=C('Saved'),Qo=C(' '),el=C(`

    Bundle Info

    The SLASHED CSS bundle is loaded automatically by the plugin. The inventory + control over dark-mode appearance.

    Status Colors — Light Mode

    Status Colors — Dark Mode

    Optional overrides for dark mode. Leave empty for auto-derivation.

    `);function oo(e,t){ne(t,!0);const s=se.defaults?.colors??{},r=c=>c.charAt(0).toUpperCase()+c.slice(1);var n=io(),a=w(g(n),4);te(a,21,()=>Object.entries(s.brand??{}),([c,v])=>c,(c,v)=>{var u=R(()=>nt(d(v),2));let f=()=>d(u)[0],m=()=>d(u)[1];{let _=R(()=>`brand_${f()}`),k=R(()=>r(f())),p=R(()=>s.brand_hex_hints?.[f()]??""),y=R(()=>`--sf-color-${f()}-light`);Fs(c,{get storeKey(){return d(_)},get label(){return d(k)},get hexHint(){return d(p)},get rawHint(){return m()},get cssVar(){return d(y)}})}});var o=w(a,6);te(o,21,()=>Object.entries(s.brand_dark??s.brand??{}),([c])=>c,(c,v)=>{var u=R(()=>nt(d(v),1));let f=()=>d(u)[0];{let m=R(()=>`brand_dark_${f()}`),_=R(()=>r(f())),k=R(()=>s.brand_dark_hex_hints?.[f()]??""),p=R(()=>s.brand_dark?.[f()]??""),y=R(()=>`--sf-color-${f()}-dark`);Fs(c,{get storeKey(){return d(m)},get label(){return d(_)},get hexHint(){return d(k)},get rawHint(){return d(p)},get cssVar(){return d(y)}})}});var i=w(o,4);te(i,21,()=>Object.entries(s.status??{}),([c,v])=>c,(c,v)=>{var u=R(()=>nt(d(v),2));let f=()=>d(u)[0],m=()=>d(u)[1];{let _=R(()=>`status_${f()}`),k=R(()=>r(f())),p=R(()=>s.status_hex_hints?.[f()]??""),y=R(()=>`--sf-color-${f()}-light`);Fs(c,{get storeKey(){return d(_)},get label(){return d(k)},get hexHint(){return d(p)},get rawHint(){return m()},get cssVar(){return d(y)}})}});var l=w(i,6);te(l,21,()=>Object.entries(s.status_dark??s.status??{}),([c])=>c,(c,v)=>{var u=R(()=>nt(d(v),1));let f=()=>d(u)[0];{let m=R(()=>`status_dark_${f()}`),_=R(()=>r(f())),k=R(()=>s.status_dark_hex_hints?.[f()]??""),p=R(()=>s.status_dark?.[f()]??""),y=R(()=>`--sf-color-${f()}-dark`);Fs(c,{get storeKey(){return d(m)},get label(){return d(_)},get hexHint(){return d(k)},get rawHint(){return d(p)},get cssVar(){return d(y)}})}}),z(e,n),ae()}var lo=L(''),co=L(' '),fo=L(' '),uo=L('

    '),vo=L('
    ');function or(e,t){let s=ee(t,"cssVar",3,""),r=ee(t,"fieldId",3,""),n=ee(t,"description",3,"");var a=vo(),o=g(a),i=g(o);{var l=p=>{var y=lo(),E=g(y);M(()=>{G(y,"for",r()),I(E,t.label)}),z(p,y)},c=p=>{var y=co(),E=g(y);M(()=>I(E,t.label)),z(p,y)};re(i,p=>{r()?p(l):p(c,-1)})}var v=w(i,2);{var u=p=>{var y=fo(),E=g(y);M(()=>I(E,s())),z(p,y)};re(v,p=>{s()&&p(u)})}var f=w(o,2),m=g(f);Bi(m,()=>t.children??vn);var _=w(m,2);{var k=p=>{var y=uo(),E=g(y);M(()=>I(E,n())),z(p,y)};re(_,p=>{n()&&p(k)})}z(e,a)}var ho=L(' '),po=L(' ',1);function Wt(e,t){ne(t,!0);let s=ee(t,"cssVar",3,""),r=ee(t,"unit",3,""),n=ee(t,"description",3,"");const a=R(()=>W[t.section]?.[t.fieldKey]===void 0||W[t.section]?.[t.fieldKey]===null?"":String(W[t.section][t.fieldKey])),o=R(()=>d(a)===""||Number.isNaN(Number(d(a)))?Number(t.default):Number(d(a)));function i(c){xs(t.section,t.fieldKey,c.currentTarget.value)}function l(c){xs(t.section,t.fieldKey,c.currentTarget.value)}or(e,{get label(){return t.label},get cssVar(){return s()},get fieldId(){return t.fieldKey},get description(){return n()},children:(c,v)=>{var u=po(),f=nr(u),m=w(f,2),_=w(m,2);{var k=p=>{var y=ho(),E=g(y);M(()=>I(E,r())),z(p,y)};re(_,p=>{r()&&p(k)})}M(p=>{G(f,"min",t.min),G(f,"max",t.max),G(f,"step",t.step),Xs(f,d(o)),G(m,"id",t.fieldKey),G(m,"min",t.min),G(m,"max",t.max),G(m,"step",t.step),Xs(m,d(a)),G(m,"placeholder",p)},[()=>String(t.default)]),le("input",f,i),le("input",m,l),z(c,u)},$$slots:{default:!0}}),ae()}Pe(["input"]);var _o=L(""),go=L('');function mo(e,t){ne(t,!0);let s=ee(t,"options",19,()=>[]),r=ee(t,"default",3,""),n=ee(t,"cssVar",3,""),a=ee(t,"description",3,"");const o=R(()=>s().map(c=>typeof c=="string"?{value:c,label:c}:c)),i=R(()=>W[t.section]?.[t.fieldKey]===void 0||W[t.section]?.[t.fieldKey]===null?"":String(W[t.section][t.fieldKey]));function l(c){xs(t.section,t.fieldKey,c.currentTarget.value)}or(e,{get label(){return t.label},get cssVar(){return n()},get fieldId(){return t.fieldKey},get description(){return a()},children:(c,v)=>{var u=go(),f=g(u),m=g(f);f.value=f.__value="";var _=w(f);te(_,17,()=>d(o),p=>p.value,(p,y)=>{var E=_o(),T=g(E),O={};M(()=>{I(T,d(y).label),O!==(O=d(y).value)&&(E.value=(E.__value=d(y).value)??"")}),z(p,E)});var k;na(u),M(()=>{G(u,"id",t.fieldKey),I(m,`Default (${r()??""})`),k!==(k=d(i))&&(u.value=(u.__value=d(i))??"",Hr(u,d(i)))}),le("change",u,l),z(c,u)},$$slots:{default:!0}}),ae()}Pe(["change"]);var yo=L('

    Contrast

    Fine-tune how the framework derives shades and picks readable text colors against your brand colors.

    Opacity

    Focus ring

    Visual indicator drawn around keyboard-focused elements. Lower the offset to tighten the ring, raise it to give the element more breathing room.

    ');function bo(e,t){ne(t,!0);const s="contrast",r=se.defaults?.[s]??{};var n=yo(),a=w(g(n),4),o=g(a);{let _=R(()=>r.contrast_bias??0);Wt(o,{section:s,fieldKey:"contrast_bias",label:"Contrast bias",description:"Shifts every derived shade up (positive) or down (negative). Useful to brighten or dim the entire scale without re-picking source colors.",min:-.2,max:.2,step:.01,get default(){return d(_)},cssVar:"--sf-contrast-bias"})}var i=w(o,2);{let _=R(()=>r.contrast_threshold??.6);Wt(i,{section:s,fieldKey:"contrast_threshold",label:"Contrast threshold",description:"Lightness threshold used to pick text-on-color (white vs. black). Lower values prefer dark text on more colors; higher values prefer white text.",min:0,max:1,step:.01,get default(){return d(_)},cssVar:"--sf-contrast-threshold"})}var l=w(a,4),c=g(l);{let _=R(()=>r.opacity_disabled??.45);Wt(c,{section:s,fieldKey:"opacity_disabled",label:"Disabled opacity",description:"Opacity applied to disabled UI elements (buttons, inputs, links).",min:0,max:1,step:.01,get default(){return d(_)},cssVar:"--sf-opacity-disabled"})}var v=w(l,6),u=g(v);{let _=R(()=>r.focus_ring_width??2);Wt(u,{section:s,fieldKey:"focus_ring_width",label:"Ring width",min:0,max:8,step:.5,get default(){return d(_)},cssVar:"--sf-focus-ring-width",unit:"px"})}var f=w(u,2);{let _=R(()=>r.focus_ring_offset??2);Wt(f,{section:s,fieldKey:"focus_ring_offset",label:"Ring offset",min:0,max:8,step:.5,get default(){return d(_)},cssVar:"--sf-focus-ring-offset",unit:"px"})}var m=w(f,2);{let _=R(()=>r.focus_ring_style??"solid");mo(m,{section:s,fieldKey:"focus_ring_style",label:"Ring style",options:["solid","dashed","dotted","double","none"],get default(){return d(_)},cssVar:"--sf-focus-ring-style"})}z(e,n),ae()}var wo=L('');function oa(e,t){ne(t,!0);let s=ee(t,"default",3,""),r=ee(t,"cssVar",3,""),n=ee(t,"description",3,""),a=ee(t,"mono",3,!1),o=ee(t,"width",3,"320px");const i=R(()=>W[t.section]?.[t.fieldKey]===void 0||W[t.section]?.[t.fieldKey]===null?"":String(W[t.section][t.fieldKey]));function l(c){xs(t.section,t.fieldKey,c.currentTarget.value)}or(e,{get label(){return t.label},get cssVar(){return r()},get fieldId(){return t.fieldKey},get description(){return n()},children:(c,v)=>{var u=wo();let f,m;M(_=>{G(u,"id",t.fieldKey),f=Jt(u,1,"text svelte-j8yw6l",null,f,{mono:a()}),Xs(u,d(i)),G(u,"placeholder",_),m=qe(u,"",m,{width:o()})},[()=>String(s())]),le("input",u,l),z(c,u)},$$slots:{default:!0}}),ae()}Pe(["input"]);var ko=L(' '),xo=L(' ',1);function at(e,t){ne(t,!0);let s=ee(t,"min",3,void 0),r=ee(t,"max",3,void 0),n=ee(t,"step",3,void 0),a=ee(t,"default",3,""),o=ee(t,"cssVar",3,""),i=ee(t,"unit",3,""),l=ee(t,"description",3,""),c=ee(t,"width",3,"120px");const v=R(()=>W[t.section]?.[t.fieldKey]===void 0||W[t.section]?.[t.fieldKey]===null?"":String(W[t.section][t.fieldKey]));function u(f){xs(t.section,t.fieldKey,f.currentTarget.value)}or(e,{get label(){return t.label},get cssVar(){return o()},get fieldId(){return t.fieldKey},get description(){return l()},children:(f,m)=>{var _=xo(),k=nr(_);let p;var y=w(k,2);{var E=T=>{var O=ko(),S=g(O);M(()=>I(S,i())),z(T,O)};re(y,T=>{i()&&T(E)})}M(T=>{G(k,"id",t.fieldKey),G(k,"min",s()),G(k,"max",r()),G(k,"step",n()),Xs(k,d(v)),G(k,"placeholder",T),p=qe(k,"",p,{width:c()})},[()=>String(a())]),le("input",k,u),z(f,_)},$$slots:{default:!0}}),ae()}Pe(["input"]);var So=L('
    '),Eo=L('

    Live Scale Preview

    320px 1440px
    ');function jo(e,t){ne(t,!0);const s=16,r=375,n=1440;let a=Z(1440);const i=(se.defaults?.typography??{}).font_sizes??{};function l(E){const T=W.typography??{},O=i[E]??{},S=T[`size_${E}_min`],x=T[`size_${E}_max`],j=S!==void 0&&S!==""?parseFloat(S):O.min??.75,C=x!==void 0&&x!==""?parseFloat(x):O.max??1;return{min:j,max:C}}const c=R(()=>{const E=Math.max(0,Math.min(1,(d(a)-r)/(n-r))),T={};for(const O of Object.keys(i)){const{min:S,max:x}=l(O),j=S+(x-S)*E,C=j*s,b=`clamp(${S}rem, ${S.toFixed(3)}rem + ${((x-S)*100/(n-r)*100).toFixed(4)}cqi, ${x}rem)`;T[O]={sizePx:C,sizeRem:j.toFixed(3),clampFormula:b}}return T}),v=R(()=>Object.keys(i));var u=Eo(),f=g(u),m=w(g(f),2),_=w(g(m),2),k=w(_,4),p=g(k),y=w(f,2);te(y,20,()=>d(v),E=>E,(E,T)=>{const O=R(()=>d(c)[T]);var S=Ii(),x=nr(S);{var j=C=>{var b=So(),V=g(b),A=g(V),D=w(V,2);let $;var J=g(D),ie=w(D,2),Q=g(ie);M((Se,X)=>{I(A,T),$=qe(D,"",$,Se),I(J,T),I(Q,`${d(O).sizeRem??""}rem / ${X??""}px`)},[()=>({"font-size":`${d(O).sizePx.toFixed(1)??""}px`}),()=>d(O).sizePx.toFixed(1)]),z(C,b)};re(x,C=>{d(O)&&C(j)})}z(E,S)}),M(()=>I(p,`${d(a)??""}px`)),bs(_,()=>d(a),E=>P(a,E)),z(e,u),ae()}var To=L('
    '),Co=L('

    Font Families

    Font Size Scale

    Min and max values in rem for fluid type scaling via clamp().

    Scale Multipliers

    ');function Ao(e,t){ne(t,!0);const s="typography",r=se.defaults?.[s]??{},n=r.font_families??{},a=r.font_sizes??{},o=_=>_.charAt(0).toUpperCase()+_.slice(1);var i=Co(),l=w(g(i),2);te(l,21,()=>Object.entries(n),([_,k])=>_,(_,k)=>{var p=R(()=>nt(d(k),2));let y=()=>d(p)[0],E=()=>d(p)[1];{let T=R(()=>`font_${y()}`),O=R(()=>o(y())),S=R(()=>`--sf-font-${y()}`);oa(_,{section:s,get fieldKey(){return d(T)},get label(){return d(O)},get default(){return E()},get cssVar(){return d(S)},width:"420px"})}});var c=w(l,6);te(c,21,()=>Object.entries(a),([_,k])=>_,(_,k)=>{var p=R(()=>nt(d(k),2));let y=()=>d(p)[0],E=()=>d(p)[1];var T=To(),O=g(T),S=g(O),x=g(S),j=w(S,2),C=g(j),b=w(O,2),V=g(b);{let D=R(()=>`size_${y()}_min`);at(V,{section:s,get fieldKey(){return d(D)},label:"Min",min:0,step:.01,get default(){return E().min},width:"80px"})}var A=w(V,2);{let D=R(()=>`size_${y()}_max`);at(A,{section:s,get fieldKey(){return d(D)},label:"Max",min:0,step:.01,get default(){return E().max},width:"80px"})}M(()=>{I(x,y()),I(C,`--sf-text-${y()??""}`)}),z(_,T)});var v=w(c,2);jo(v,{});var u=w(v,4),f=g(u);{let _=R(()=>r.scale_multipliers?.text_scale??1);at(f,{section:s,fieldKey:"text_scale",label:"Text Scale",min:0,step:.05,get default(){return d(_)},cssVar:"--sf-text-scale"})}var m=w(f,2);{let _=R(()=>r.scale_multipliers?.text_display_scale??1);at(m,{section:s,fieldKey:"text_display_scale",label:"Display Scale",min:0,step:.05,get default(){return d(_)},cssVar:"--sf-text-display-scale"})}z(e,i),ae()}var zo=L('

    Spacing

    ');function Oo(e,t){ne(t,!0);const s="spacing",r=se.defaults?.[s]??{},n=[{key:"gutter",label:"Gutter",cssVar:"--sf-space-gutter"},{key:"gap",label:"Gap",cssVar:"--sf-gap"},{key:"content_gap",label:"Content Gap",cssVar:"--sf-content-gap"},{key:"component_pad",label:"Component Pad",cssVar:"--sf-component-pad"},{key:"section_pad",label:"Section Pad",cssVar:"--sf-section-pad"}];var a=zo(),o=w(g(a),2),i=g(o);{let c=R(()=>r.space_scale??1);at(i,{section:s,fieldKey:"space_scale",label:"Space Scale",min:0,step:.05,get default(){return d(c)},cssVar:"--sf-space-scale"})}var l=w(i,2);te(l,17,()=>n,c=>c.key,(c,v)=>{{let u=R(()=>r[d(v).key]??"");oa(c,{section:s,get fieldKey(){return d(v).key},get label(){return d(v).label},get default(){return d(u)},get cssVar(){return d(v).cssVar},mono:!0})}}),z(e,a),ae()}var Ro=L('

    Radius

    ');function Lo(e,t){ne(t,!0);const s="radius",r=se.defaults?.[s]??{};var n=Ro(),a=w(g(n),2),o=g(a);{let i=R(()=>r.radius_scale??1);at(o,{section:s,fieldKey:"radius_scale",label:"Radius Scale",min:0,step:.1,get default(){return d(i)},cssVar:"--sf-radius-scale"})}z(e,n),ae()}var Vo=L('

    Shadows

    ');function Io(e,t){ne(t,!0);const s="shadows",r=se.defaults?.[s]??{};var n=Vo(),a=w(g(n),2),o=g(a);{let i=R(()=>r.shadow_strength??.08);Wt(o,{section:s,fieldKey:"shadow_strength",label:"Shadow Strength",description:"Base opacity value for shadow layers (0–1).",min:0,max:1,step:.01,get default(){return d(i)},cssVar:"--sf-shadow-strength"})}z(e,n),ae()}var Do=L('

    Motion

    Duration Values

    Base duration values in milliseconds.

    ');function Fo(e,t){ne(t,!0);const s="motion",r=se.defaults?.[s]??{},n=r.durations??{},a=v=>v.charAt(0).toUpperCase()+v.slice(1);var o=Do(),i=w(g(o),2),l=g(i);{let v=R(()=>r.motion_scale??1);at(l,{section:s,fieldKey:"motion_scale",label:"Motion Scale",min:0,step:.1,get default(){return d(v)},cssVar:"--sf-motion-scale"})}var c=w(i,6);te(c,21,()=>Object.entries(n),([v,u])=>v,(v,u)=>{var f=R(()=>nt(d(u),2));let m=()=>d(f)[0],_=()=>d(f)[1];{let k=R(()=>`duration_${m()}`),p=R(()=>a(m())),y=R(()=>`--sf-duration-${m()}`);at(v,{section:s,get fieldKey(){return d(k)},get label(){return d(p)},min:0,step:10,get default(){return _()},get cssVar(){return d(y)},unit:"ms"})}}),z(e,o),ae()}var Mo=L('

    Z-Index

    Z-index layer values for stacking context management.

    ');function Po(e,t){ne(t,!0);const s="zindex",r=se.defaults?.[s]??{},n=i=>i.charAt(0).toUpperCase()+i.slice(1);var a=Mo(),o=w(g(a),4);te(o,21,()=>Object.entries(r),([i,l])=>i,(i,l)=>{var c=R(()=>nt(d(l),2));let v=()=>d(c)[0],u=()=>d(c)[1];{let f=R(()=>n(v())),m=R(()=>`--sf-z-${v()}`);at(i,{section:s,get fieldKey(){return v()},get label(){return d(f)},step:1,get default(){return u()},get cssVar(){return d(m)}})}}),z(e,a),ae()}var No=L('
    • '),qo=L(''),Bo=L('
    '),$o=L(`

    All --sf-* custom properties declared in the active SLASHED bundle, + grouped by category.

    `);function Ho(e,t){ne(t,!0);const s=se.inventory?.variables??[],r={color:"Colors",text:"Typography",font:"Typography",leading:"Typography",tracking:"Typography",body:"Typography",heading:"Typography",h1:"Typography",h2:"Typography",h3:"Typography",h4:"Typography",h5:"Typography",h6:"Typography",prose:"Typography",code:"Typography",optical:"Typography",line:"Typography",space:"Spacing",gap:"Spacing",gutter:"Spacing",component:"Spacing",section:"Spacing",flow:"Spacing",safe:"Spacing",header:"Spacing",sticky:"Spacing",size:"Sizing",aspect:"Sizing",ratio:"Sizing",touch:"Sizing",container:"Layout",stack:"Layout",cluster:"Layout",sidebar:"Layout",switcher:"Layout",grid:"Layout",cover:"Layout",frame:"Layout",reel:"Layout",imposter:"Layout",bento:"Layout",box:"Layout",center:"Layout",content:"Layout",breakout:"Layout",divider:"Layout",field:"Layout",border:"Borders",stroke:"Borders",radius:"Radius",shadow:"Shadows",blur:"Effects",opacity:"Effects",gradient:"Effects",mask:"Effects",perspective:"Effects",drop:"Effects",contrast:"Effects",duration:"Motion",ease:"Motion",transition:"Motion",motion:"Motion",animation:"Motion",icon:"Icons",z:"Z-Index",is:"States",current:"States",focus:"Focus",caret:"Focus",scroll:"Scroll",scrollbar:"Scroll",print:"Print",truncate:"Misc"},n=["Colors","Typography","Spacing","Sizing","Layout","Borders","Radius","Shadows","Effects","Motion","Icons","Z-Index","States","Focus","Scroll","Print","Misc"];function a(_){let k=_;k.startsWith("--sf-")&&(k=k.slice(5));const p=k.indexOf("-"),y=p===-1?k:k.slice(0,p);return r[y]||"Misc"}function o(_){const k={};for(const y of _){const E=a(y);k[E]||(k[E]=[]),k[E].push(y)}const p=[];for(const y of n)k[y]?.length&&(k[y].sort(),p.push({category:y,items:k[y]}));for(const y of Object.keys(k))!n.includes(y)&&k[y]?.length&&(k[y].sort(),p.push({category:y,items:k[y]}));return p}const i=o(s);let l=ke({});function c(_){l[_]=!l[_]}var v=$o(),u=g(v),f=g(u),m=w(u,4);te(m,17,()=>i,({category:_,items:k})=>_,(_,k)=>{let p=()=>d(k).category,y=()=>d(k).items;var E=Bo(),T=g(E),O=g(T),S=g(O),x=w(O,2),j=g(x),C=w(x,2),b=g(C),V=w(T,2);{var A=D=>{var $=qo();te($,20,y,J=>J,(J,ie)=>{var Q=No(),Se=g(Q),X=g(Se);M(()=>I(X,ie)),z(J,Q)}),z(D,$)};re(V,D=>{l[p()]&&D(A)})}M(()=>{G(T,"aria-expanded",l[p()]?"true":"false"),I(S,l[p()]?"▼":"▶"),I(j,p()),I(b,`(${y().length??""})`)}),le("click",T,()=>c(p())),z(_,E)}),M(()=>I(f,`CSS Variables (${s.length??""})`)),z(e,v),ae()}Pe(["click"]);var Ko=L('
    • '),Uo=L(''),Go=L('
    • '),Wo=L(''),Yo=L('

    All utility and state classes declared in the active SLASHED bundle.

    ');function Zo(e,t){ne(t,!0);const s=se.inventory?.sf_classes??[],r=se.inventory?.is_classes??[];let n=Z(!1),a=Z(!1);var o=Yo(),i=g(o),l=g(i),c=w(i,4),v=g(c),u=g(v),f=g(u),m=w(u,4),_=g(m),k=w(v,2);{var p=b=>{var V=Uo();te(V,20,()=>s,A=>A,(A,D)=>{var $=Ko(),J=g($),ie=g(J);M(()=>I(ie,`.${D??""}`)),z(A,$)}),z(b,V)};re(k,b=>{d(n)&&b(p)})}var y=w(c,2),E=g(y),T=g(E),O=g(T),S=w(T,4),x=g(S),j=w(E,2);{var C=b=>{var V=Wo();te(V,20,()=>r,A=>A,(A,D)=>{var $=Go(),J=g($),ie=g(J);M(()=>I(ie,`.${D??""}`)),z(A,$)}),z(b,V)};re(j,b=>{d(a)&&b(C)})}M(()=>{I(l,`Registered Classes (${s.length+r.length})`),G(v,"aria-expanded",d(n)?"true":"false"),I(f,d(n)?"▼":"▶"),I(_,`(${s.length??""})`),G(E,"aria-expanded",d(a)?"true":"false"),I(O,d(a)?"▼":"▶"),I(x,`(${r.length??""})`)}),le("click",v,()=>P(n,!d(n))),le("click",E,()=>P(a,!d(a))),z(e,o),ae()}Pe(["click"]);async function lr(e,t){const{url:s,nonce:r}=se.rest;if(!s)return console.info("[slashed-admin] (dev) would POST",e,t),{ok:!0,dev:!0};const n=await fetch(s+e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":r},body:JSON.stringify(t)});if(!n.ok){const a=await n.text();throw new Error(a||`HTTP ${n.status}`)}return n.json()}function Xo(e,t){return lr("/tokens",{section:e,values:t})}function Jo(e){return lr("/tokens/reset",{section:e})}function Qo(e){return lr("/settings",e)}async function el(){const{url:e,nonce:t}=se.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /tokens/export"),{schema_version:"1",tokens:{},plugin_settings:{},dev:!0};const s=await fetch(e+"/tokens/export",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);return s.json()}function tl(e){return lr("/tokens/import",e)}var sl=L('Saved'),rl=L(' '),nl=L(`

    Bundle Info

    The SLASHED CSS bundle is loaded automatically by the plugin. The inventory is parsed from whichever bundle is active (essential / optimal / full) and - drives the variable pickers, class autocomplete, and color palette in Bricks.

    Variables registered
    Classes registered

    Plugin Settings

    Choose which SLASHED CSS bundle to load on the frontend and in the Bricks editor canvas.

    Override the HTML root font-size. Use this if Bricks forces a font-size you don't want.

    `);function tl(e,t){re(t,!0);let s=Z(ke(te.pluginSettings?.css_bundle??"optimal")),r=Z(ke(te.pluginSettings?.html_font_size??"")),n=Z(!1),a=Z(!1),i=Z(""),o=null;async function l(){V(n,!0),V(a,!1),V(i,"");try{await Yo({css_bundle:f(s),html_font_size:f(r)}),V(a,!0),o&&clearTimeout(o),o=setTimeout(()=>{V(a,!1),o=null},3e3)}catch(ee){V(i,ee.message||"Save failed",!0)}finally{V(n,!1)}}var c=el(),v=w(y(c),4),u=w(y(v),2),d=y(u),g=w(u,4),_=y(g),b=w(v,4),h=w(y(b),2),m=y(h);m.value=m.__value="essential";var k=w(m);k.value=k.__value="optimal";var S=w(k);S.value=S.__value="full";var z=w(b,2),E=w(y(z),2),L=y(E);L.value=L.__value="";var P=w(L);P.value=P.__value="100";var $=w(P);$.value=$.__value="62.5";var x=w(z,2),F=y(x),A=y(F),I=w(F,2);{var q=ee=>{var Fe=Jo();T(ee,Fe)};se(I,ee=>{f(a)&&ee(q)})}var Q=w(I,2);{var ce=ee=>{var Fe=Qo(),J=y(Fe);M(()=>O(J,f(i))),T(ee,Fe)};se(Q,ee=>{f(i)&&ee(ce)})}M(()=>{O(d,te.inventory?.variables?.length??0),O(_,(te.inventory?.sf_classes?.length??0)+(te.inventory?.is_classes?.length??0)),F.disabled=f(n),O(A,f(n)?"Saving...":"Save Settings")}),an(h,()=>f(s),ee=>V(s,ee)),an(E,()=>f(r),ee=>V(r,ee)),oe("click",F,l),T(e,c),ne()}Pe(["click"]);var sl=C(' '),rl=C('

    '),nl=C('

    '),al=C(`

    Export / Import Tokens

    Export your current SLASHED token overrides (colors, typography, spacing, etc.) to a .json file and import them on any other WordPress site running this plugin. + drives the variable pickers, class autocomplete, and color palette in Bricks.

    Variables registered
    Classes registered

    Plugin Settings

    Choose which SLASHED CSS bundle to load on the frontend and in the Bricks editor canvas.

    Override the HTML root font-size. Use this if Bricks forces a font-size you don't want.

    `);function al(e,t){ne(t,!0);let s=Z(ke(se.pluginSettings?.css_bundle??"optimal")),r=Z(ke(se.pluginSettings?.html_font_size??"")),n=Z(!1),a=Z(!1),o=Z(""),i=null;async function l(){P(n,!0),P(a,!1),P(o,"");try{await Qo({css_bundle:d(s),html_font_size:d(r)}),P(a,!0),i&&clearTimeout(i),i=setTimeout(()=>{P(a,!1),i=null},3e3)}catch(Q){P(o,Q.message||"Save failed",!0)}finally{P(n,!1)}}var c=nl(),v=w(g(c),4),u=w(g(v),2),f=g(u),m=w(u,4),_=g(m),k=w(v,4),p=w(g(k),2),y=g(p);y.value=y.__value="essential";var E=w(y);E.value=E.__value="optimal";var T=w(E);T.value=T.__value="full";var O=w(k,2),S=w(g(O),2),x=g(S);x.value=x.__value="";var j=w(x);j.value=j.__value="100";var C=w(j);C.value=C.__value="62.5";var b=w(O,2),V=g(b),A=g(V),D=w(V,2);{var $=Q=>{var Se=sl();z(Q,Se)};re(D,Q=>{d(a)&&Q($)})}var J=w(D,2);{var ie=Q=>{var Se=rl(),X=g(Se);M(()=>I(X,d(o))),z(Q,Se)};re(J,Q=>{d(o)&&Q(ie)})}M(()=>{I(f,se.inventory?.variables?.length??0),I(_,(se.inventory?.sf_classes?.length??0)+(se.inventory?.is_classes?.length??0)),V.disabled=d(n),I(A,d(n)?"Saving...":"Save Settings")}),an(p,()=>d(s),Q=>P(s,Q)),an(S,()=>d(r),Q=>P(r,Q)),le("click",V,l),z(e,c),ae()}Pe(["click"]);var il=L(' '),ol=L('

    '),ll=L('

    '),cl=L(`

    Export / Import Tokens

    Export your current SLASHED token overrides (colors, typography, spacing, etc.) to a .json file and import them on any other WordPress site running this plugin. This makes Bricks templates fully portable — the template JSON carries structure and class references; this file carries the brand tokens that drive the visual result.

    Export

    Downloads a .json file containing all your active token overrides and plugin settings. Share this file alongside your Bricks template export so the visual result is identical on every site.

    Import

    Upload a .json file previously exported from this plugin. Each section is validated @@ -24,8 +24,8 @@ var fa=Object.defineProperty;var $r=e=>{throw TypeError(e)};var da=(e,t,s)=>t in import the token file via this tab, then import the Bricks template via Bricks → Templates. The plugin re-registers all SLASHED classes, variables, and color palettes automatically.

  • Verify in the Bricks builder canvas that colors, spacing, and fonts match. If something looks off, check the browser console for unresolved var() calls — - this means the CSS bundle isn't loading or the token file wasn't imported yet.
    • `);function il(e,t){re(t,!0);let s=Z(!1),r=Z("");async function n(){V(s,!0),V(r,"");try{const A=await Zo(),I=JSON.stringify(A,null,2),q=new Blob([I],{type:"application/json"}),Q=URL.createObjectURL(q),ce=document.createElement("a");ce.href=Q,ce.download=`slashed-tokens-${new Date().toISOString().slice(0,10)}.json`,ce.click(),URL.revokeObjectURL(Q)}catch(A){V(r,A.message||"Export failed",!0)}finally{V(s,!1)}}let a=Z(null),i=Z(!1),o=Z(""),l=Z(""),c=Z(0);async function v(){const A=f(a)?.files?.[0];if(A){V(o,""),V(l,""),V(i,!0);try{const I=await A.text(),q=JSON.parse(I),Q=await Xo(q),ce=Q.settings_imported?" Plugin settings restored.":"";V(o,`Imported ${Q.imported} section(s) successfully.${ce}`),V(c,3);const ee=setInterval(()=>{V(c,f(c)-1),f(c)<=0&&(clearInterval(ee),window.location.reload())},1e3)}catch(I){V(l,I.message||"Import failed",!0)}finally{V(i,!1),f(a)&&(f(a).value="")}}}var u=al(),d=w(y(u),4),g=w(y(d),4),_=y(g),b=y(_),h=w(_,2);{var m=A=>{var I=sl(),q=y(I);M(()=>O(q,f(r))),T(A,I)};se(h,A=>{f(r)&&A(m)})}var k=w(d,2),S=w(y(k),4),z=y(S);Wi(z,A=>V(a,A),()=>f(a));var E=w(z,2),L=y(E),P=w(S,2);{var $=A=>{var I=rl(),q=y(I),Q=w(q);{var ce=ee=>{var Fe=Ii();M(()=>O(Fe,`Reloading in ${f(c)??""}…`)),T(ee,Fe)};se(Q,ee=>{f(c)>0&&ee(ce)})}M(()=>O(q,`${f(o)??""} `)),T(A,I)};se(P,A=>{f(o)&&A($)})}var x=w(P,2);{var F=A=>{var I=nl(),q=y(I);M(()=>O(q,f(l))),T(A,I)};se(x,A=>{f(l)&&A(F)})}M(()=>{_.disabled=f(s),O(b,f(s)?"Exporting…":"Download token file"),E.disabled=f(i),O(L,f(i)?"Importing…":"Import token file")}),oe("click",_,n),oe("click",E,v),T(e,u),ne()}Pe(["click"]);var ol=C('

    Parameters:
    '),ll=C(`

    Filter Hooks Reference

    These WordPress filter hooks let you customize the SLASHED Bricks integration - from your theme or a mu-plugin. Each hook fires during plugin initialization.

    `);function cl(e){const t=[{name:"slashed_bricks/css_bundle_url",description:"Override which CSS bundle URL to load.",params:"$url (string) - The current CSS bundle URL.",example:`add_filter( 'slashed_bricks/css_bundle_url', function( $url ) { + this means the CSS bundle isn't loading or the token file wasn't imported yet.
    `);function dl(e,t){ne(t,!0);let s=Z(!1),r=Z("");async function n(){P(s,!0),P(r,"");try{const A=await el(),D=JSON.stringify(A,null,2),$=new Blob([D],{type:"application/json"}),J=URL.createObjectURL($),ie=document.createElement("a");ie.href=J,ie.download=`slashed-tokens-${new Date().toISOString().slice(0,10)}.json`,ie.click(),URL.revokeObjectURL(J)}catch(A){P(r,A.message||"Export failed",!0)}finally{P(s,!1)}}let a=Z(null),o=Z(!1),i=Z(""),l=Z(""),c=Z(0);async function v(){const A=d(a)?.files?.[0];if(A){P(i,""),P(l,""),P(o,!0);try{const D=await A.text(),$=JSON.parse(D),J=await tl($),ie=J.settings_imported?" Plugin settings restored.":"";P(i,`Imported ${J.imported} section(s) successfully.${ie}`),P(c,3);const Q=setInterval(()=>{P(c,d(c)-1),d(c)<=0&&(clearInterval(Q),window.location.reload())},1e3)}catch(D){P(l,D.message||"Import failed",!0)}finally{P(o,!1),d(a)&&(d(a).value="")}}}var u=cl(),f=w(g(u),4),m=w(g(f),4),_=g(m),k=g(_),p=w(_,2);{var y=A=>{var D=il(),$=g(D);M(()=>I($,d(r))),z(A,D)};re(p,A=>{d(r)&&A(y)})}var E=w(f,2),T=w(g(E),4),O=g(T);Yi(O,A=>P(a,A),()=>d(a));var S=w(O,2),x=g(S),j=w(T,2);{var C=A=>{var D=ol(),$=g(D),J=w($);{var ie=Q=>{var Se=Vi();M(()=>I(Se,`Reloading in ${d(c)??""}…`)),z(Q,Se)};re(J,Q=>{d(c)>0&&Q(ie)})}M(()=>I($,`${d(i)??""} `)),z(A,D)};re(j,A=>{d(i)&&A(C)})}var b=w(j,2);{var V=A=>{var D=ll(),$=g(D);M(()=>I($,d(l))),z(A,D)};re(b,A=>{d(l)&&A(V)})}M(()=>{_.disabled=d(s),I(k,d(s)?"Exporting…":"Download token file"),S.disabled=d(o),I(x,d(o)?"Importing…":"Import token file")}),le("click",_,n),le("click",S,v),z(e,u),ae()}Pe(["click"]);var fl=L('

    Parameters:
    '),ul=L(`

    Filter Hooks Reference

    These WordPress filter hooks let you customize the SLASHED Bricks integration + from your theme or a mu-plugin. Each hook fires during plugin initialization.

    `);function vl(e){const t=[{name:"slashed_bricks/css_bundle_url",description:"Override which CSS bundle URL to load.",params:"$url (string) - The current CSS bundle URL.",example:`add_filter( 'slashed_bricks/css_bundle_url', function( $url ) { // Load from a CDN instead. return 'https://cdn.example.com/slashed/slashed.optimal.css'; } );`},{name:"slashed_bricks/registered_classes",description:"Filter the array of classes before registration with Bricks.",params:"$classes (array) - Array of class definitions with name and category.",example:`add_filter( 'slashed_bricks/registered_classes', function( $classes ) { @@ -54,15 +54,15 @@ add_filter( 'slashed_bricks/inventory_local_path', function() { 'SLASHED Primary', 'SLASHED Secondary', ] ) ); -} );`}];var s=ll(),r=w(y(s),4);ie(r,17,()=>t,n=>n.name,(n,a)=>{var i=ol(),o=y(i),l=y(o),c=y(l),v=w(o,2),u=y(v),d=w(v,2),g=w(y(d),2),_=y(g),b=w(d,2),h=y(b),m=y(h);M(()=>{O(c,f(a).name),O(u,f(a).description),O(_,f(a).params),O(m,f(a).example)}),T(n,i)}),T(e,s)}const fl=[{category:"Colors",description:"Brand, status, semantic, and derived color tokens. Source colors use oklch(); the framework derives light-dark pairs, palettes, and alpha scales automatically.",tokens:[{name:"--sf-color-{brand}-light",description:"Source color for the brand (oklch registered value). Set this to rebrand."},{name:"--sf-color-{brand}-dark",description:"Optional dark-mode override. If set, replaces the auto-derived dark variant for full per-mode control."},{name:"--sf-color-{brand}",description:"Resolved light-dark adaptive color for use in rules."},{name:"--sf-color-{brand}-{50-950}",description:"Palette scale: 50 (lightest) to 950 (darkest) mixed with base/text."},{name:"--sf-color-{brand}-a{5-95}",description:"Alpha scale: 5% to 95% opacity of the brand color."},{name:"--sf-color-{brand}-hover/active/muted/subtle/ghost/lighter/darker/xlight/xdark/superlight/superdark",description:"Semantic aliases for common UI states, mapped to palette steps."},{name:"--sf-color-bg",description:"Page background color, derived from base."},{name:"--sf-color-text",description:"Main body text color, contrast-aware."},{name:"--sf-color-heading",description:"Heading text color, slightly stronger than body text."},{name:"--sf-color-link",description:"Link color, derived from action brand."},{name:"--sf-color-border",description:"Default border color."},{name:"--sf-color-surface",description:"Card/panel surface color (equals base)."},{name:"--sf-color-overlay",description:"Semi-transparent overlay for modals."},{name:"--sf-color-dim",description:"50% black overlay for dimming backgrounds."},{name:"--sf-color-success/warning/error/info/danger",description:"Status feedback colors with -light source, -muted, -strong, -subtle variants."}]},{category:"Typography",description:"Font families, sizes (fluid clamp-based scale), weights, line-heights, letter-spacing, and heading configuration.",tokens:[{name:"--sf-font-body",description:"Body font stack (system-ui default)."},{name:"--sf-font-heading",description:"Heading font stack (defaults to body)."},{name:"--sf-font-mono",description:"Monospace font stack."},{name:"--sf-font-display",description:"Display/hero font (defaults to heading)."},{name:"--sf-font-geometric/humanist/slab",description:"Curated fallback stacks for common typographic personalities."},{name:"--sf-text-{2xs..4xl}",description:"Fluid type scale using clamp(). Sizes: 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl."},{name:"--sf-text-display-{s,m,l}",description:"Extra-large display/hero sizes."},{name:"--sf-text-scale",description:"Global multiplier for the type scale (default 1)."},{name:"--sf-font-weight-{thin..black}",description:"Named weight tokens: thin(100), extralight(200), light(300), normal(400), medium(500), semibold(600), bold(700), extrabold(800), black(900)."},{name:"--sf-leading-{tight,snug,normal,relaxed}",description:"Line-height presets: 1.1, 1.3, 1.5, 1.625."},{name:"--sf-tracking-{tight,normal,wide,wider,widest}",description:"Letter-spacing presets from -0.025em to 0.1em."},{name:"--sf-h{1-6}-size/font-weight/line-height/letter-spacing",description:"Per-heading-level configuration tokens."},{name:"--sf-body-*",description:"Body text configuration: font-size, font-weight, line-height, color, text-wrap."}]},{category:"Spacing",description:"Fluid spacing scale (clamp-based), gutters, section padding, and component padding.",tokens:[{name:"--sf-space-{2xs..4xl}",description:"Fluid spacing scale. Sizes: none, px, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl."},{name:"--sf-space-scale",description:"Global multiplier for all space tokens (default 1)."},{name:"--sf-space-gutter",description:"Page-edge gutter (defaults to space-l)."},{name:"--sf-gap",description:"Default gap for layouts (defaults to space-m)."},{name:"--sf-content-gap",description:"Gap between content elements (defaults to space-s)."},{name:"--sf-section-pad--{s,m,l,xl}",description:"Vertical padding for page sections."},{name:"--sf-component-pad",description:"Internal padding for components (defaults to space-m)."},{name:"--sf-header-height",description:"Expected fixed header height for sticky offset calculations."},{name:"--sf-safe-{top,right,bottom,left}",description:"Safe area insets for notched devices."}]},{category:"Sizing",description:"Component sizes, touch targets, and aspect ratios.",tokens:[{name:"--sf-size-{xs..xl}",description:"Named size tokens: xs(1.5rem), s(2rem), m(2.5rem), l(2.75rem), xl(3.5rem)."},{name:"--sf-touch-target",description:"Minimum interactive element size (defaults to size-l, 2.75rem)."},{name:"--sf-ratio-{square,photo,video,cinema,golden,portrait}",description:"Predefined aspect ratios for frames and containers."},{name:"--sf-icon-{xs..xl}",description:"Icon sizing in em units (0.875em to 3em)."}]},{category:"Layout",description:"Container widths, layout primitive tokens (stack, cluster, grid, sidebar, switcher, bento, cover, frame, reel, imposter).",tokens:[{name:"--sf-container-{narrow,default,prose,wide,full}",description:"Max-width presets for .sf-container."},{name:"--sf-stack-gap",description:"Vertical gap between .sf-stack children."},{name:"--sf-cluster-gap/align/justify",description:"Inline cluster layout tokens."},{name:"--sf-sidebar-width/gap/min-width",description:"Sidebar layout tokens."},{name:"--sf-switcher-threshold/gap",description:"Column-to-stack breakpoint and gap."},{name:"--sf-grid-min/gap",description:"Auto-fill grid minimum item width and gap."},{name:"--sf-bento-cols/gap/row",description:"Dense bento grid configuration."},{name:"--sf-cover-min-height/padding",description:"Full-height cover layout."},{name:"--sf-frame-ratio",description:"Aspect ratio for .sf-frame (defaults to 16/9)."},{name:"--sf-reel-gap/height/item-width",description:"Horizontal scroll strip configuration."},{name:"--sf-imposter-margin",description:"Safety margin for absolute-centered overlays."},{name:"--sf-breakout-width/content-width",description:"Breakout grid track widths."},{name:"--sf-divider-color/style/width",description:"Divider appearance tokens."}]},{category:"Borders",description:"Border widths and styles.",tokens:[{name:"--sf-border-width-{hairline,1,2,3,4}",description:"Border width scale: 0.5px, 1px, 2px, 3px, 4px."},{name:"--sf-border-style/dotted/soft/strong",description:"Border style presets (solid, dotted, dashed, solid)."},{name:"--sf-stroke-{thin,regular,bold,heavy}",description:"Stroke widths for SVG/icon use: 1px, 1.5px, 2px, 3px."}]},{category:"Radius",description:"Border radius scale and special shapes.",tokens:[{name:"--sf-radius-{none,xs,s,m,l,xl,2xl,3xl,4xl,full}",description:"Radius scale from 0 to 9999px (pill)."},{name:"--sf-radius-scale",description:"Global multiplier for all radius tokens (default 1)."},{name:"--sf-radius-pill",description:"Fully rounded (9999px)."},{name:"--sf-radius-outer",description:"Outer radius = inner + padding (for nested rounding)."}]},{category:"Shadows",description:"Box shadows, drop shadows, text shadows, and shadow configuration.",tokens:[{name:"--sf-shadow-{xs,s,m,l,xl,2xl}",description:"Elevation shadow scale, progressively more dramatic."},{name:"--sf-shadow-inner",description:"Inset shadow for recessed elements."},{name:"--sf-shadow-glow",description:"Colored glow effect (uses --sf-shadow-glow-color)."},{name:"--sf-shadow-none",description:"Explicit no-shadow value."},{name:"--sf-shadow-color",description:"Base shadow color (derived from neutral)."},{name:"--sf-shadow-strength",description:"Shadow opacity multiplier (adapts to dark mode)."},{name:"--sf-drop-shadow-{s,m,l}",description:"CSS filter drop-shadow equivalents."},{name:"--sf-text-shadow-{s,m,l,none}",description:"Text shadow presets."}]},{category:"Effects",description:"Blurs, opacities, gradients, masks, and perspective.",tokens:[{name:"--sf-blur-{xs,s,m,l,xl}",description:"Blur radius scale: 4px to 48px."},{name:"--sf-opacity-{0,10,25,50,75,100,disabled}",description:"Named opacity presets."},{name:"--sf-gradient-{brand,primary,secondary,tertiary,surface}",description:"Predefined gradients using brand colors."},{name:"--sf-gradient-fade--{t,b,l,r}",description:"Directional fade-to-background gradients."},{name:"--sf-mask-scrim-start/end",description:"Scroll mask fade depth."},{name:"--sf-perspective-{near,normal,far}",description:"3D perspective presets: 500px, 1000px, 2000px."},{name:"--sf-contrast-bias/threshold",description:"Color contrast tuning for auto text-on-color logic."}]},{category:"Motion",description:"Durations, easing curves, transitions, and animations.",tokens:[{name:"--sf-duration-{none,instant,fast,normal,slow,slower}",description:"Duration scale: 0ms to 600ms (respects --sf-motion-scale)."},{name:"--sf-motion-scale",description:"Global animation speed multiplier (set 0 to disable)."},{name:"--sf-ease-{linear,in,out,in-out,bounce,elastic,overshoot,spring}",description:"Easing function presets."},{name:"--sf-transition-{all,colors,opacity,shadow,transform,fast,slow,enter,exit}",description:"Pre-composed transition shorthands."},{name:"--sf-animation-{fade-in,fade-out,scale-up,scale-down,slide-in-*,float,ping,blink,color-pulse}",description:"Named keyframe animation shorthands."},{name:"--sf-animation-delay-{1-5}",description:"Stagger delays for sequential animations."}]},{category:"Z-Index",description:"Z-index scale for predictable layering.",tokens:[{name:"--sf-z-{below,base,raised,low,mid,high,top,max}",description:"Z-index scale: -1, 0, 1, 10, 100, 500, 900, 9999."}]},{category:"Focus",description:"Focus ring appearance for keyboard navigation.",tokens:[{name:"--sf-focus-ring-width/offset/color/style/shadow",description:"Focus indicator configuration."},{name:"--sf-caret-color",description:"Text input caret color (defaults to action)."}]},{category:"Scroll",description:"Scroll timeline and scrollbar styling.",tokens:[{name:"--sf-scroll-timeline-range-start/end",description:"Scroll-driven animation range."},{name:"--sf-scrollbar-thumb/track",description:"Custom scrollbar colors."}]},{category:"Print",description:"Print stylesheet configuration.",tokens:[{name:"--sf-print-base-size/page-margin/page-size",description:"Print layout tokens: 11pt base, 2cm margins, A4 size."}]}],dl=[{category:"Layout Primitives",description:"Breakpoint-free, container-query-driven layout components. Each is a single class with per-instance token overrides via inline style.",classes:[{name:".sf-section",description:"Vertical page rhythm with size variants (--s/--m/--l/--xl/--collapse)."},{name:".sf-section-group",description:"Collapses gap between adjacent sections."},{name:".sf-container",description:"Centered max-width wrapper with gutters. Variants: --narrow, --wide, --full, --prose."},{name:".sf-box",description:"Isolated unit with padding and optional border."},{name:".sf-center",description:"Intrinsic centering with max-width. Variant: --intrinsic."},{name:".sf-stack",description:"Vertical flow with consistent gap. Size variants: --2xs to --3xl. Alignment: --center, --end, --stretch."},{name:".sf-cluster",description:"Wrapping inline group. Size variants: --2xs to --xl. Alignment: --center, --end, --between. Wrap: --no-wrap."},{name:".sf-sidebar",description:"Content + side panel that wraps. Variants: --right, --narrow, --wide."},{name:".sf-switcher",description:"N columns above threshold, stacked below. Variants: --no-wrap, --vertical."},{name:".sf-grid",description:"Auto-fill responsive grid. Size variants: --xs to --xl. Variants: --fit, --dense."},{name:".sf-grid-{1,2,3,4,6}",description:"Fixed-column grids, container-responsive."},{name:".sf-grid-{1-2,2-1,1-3,3-1}",description:"Ratio two-column grids."},{name:".sf-bento",description:"Dense free-form grid. Variants: --2, --4, --compact, --tall."},{name:".sf-alternate",description:"Zigzag two-column layout, reverses every other row."},{name:".sf-pancake",description:"Sticky-footer grid: header / main(1fr) / footer."},{name:".sf-content-grid",description:"Breakout layout grid. Children use .sf-breakout or .sf-full-bleed."},{name:".sf-cover",description:"Full-height region with centered content. Variants: --min, --max, --padding-s, --padding-l."},{name:".sf-frame",description:"Aspect-ratio media box. Variants: --square, --portrait, --video, --cinema, --3-2, --4-3, --golden."},{name:".sf-reel",description:"Horizontal scroll strip with optional mask fade."},{name:".sf-imposter",description:"Absolutely-centered overlay. Variants: --fixed, --contain."},{name:".sf-subgrid / .sf-subgrid-rows",description:"Inherit parent grid tracks."},{name:".sf-divider",description:"Token-driven separator. Variant: --vertical."},{name:".sf-icon",description:"Em-based inline icon sizing. Sizes: --xs to --xl. Variant: --boxed."},{name:".sf-prose",description:"Readable long-form text with automatic vertical rhythm."},{name:".sf-not-prose",description:"Reset zone inside .sf-prose for embedded components."}]},{category:"Macros",description:"Recipe classes that answer 'what does this element do/look like?' - composable with layout primitives.",classes:[{name:".sf-flow",description:"Lobotomized owl: consistent gap between consecutive children."},{name:".sf-truncate",description:"Single-line ellipsis overflow."},{name:".sf-line-clamp-{2,3,N}",description:"Multi-line text clamping with ellipsis. -N reads --sf-line-clamp."},{name:".sf-equal-height",description:"Forces flex children to share the tallest child's height."},{name:".sf-aspect",description:"Generic aspect-ratio container (reads --sf-aspect token)."},{name:".sf-scroll-shadow",description:"Top + bottom mask gradient for scrolling containers."},{name:".sf-scroll-snap",description:"Vertical scroll-snap container."},{name:".sf-overflow-fade",description:"End-edge horizontal fade for overflowing inline content."},{name:".sf-no-tap-highlight",description:"Suppresses WebKit/Android tap highlight."},{name:".sf-text-gradient",description:"Gradient text effect using background-clip."},{name:".sf-clickable-parent",description:"Makes an entire card clickable via the first link inside."},{name:".sf-link-external",description:"Adds external link indicator marker."}]},{category:"Surfaces",description:"Color surface utility classes that set background and text color for a brand context.",classes:[{name:".sf-surface--{primary,secondary,tertiary,action,neutral,inverse}",description:"Brand-colored surface with auto-contrast text."},{name:".sf-surface--{success,warning,error,info,danger}",description:"Status-colored surfaces."}]},{category:"Animations",description:"CSS animation utility classes that apply predefined keyframe animations.",classes:[{name:".sf-fade-in / .sf-fade-out",description:"Opacity entrance/exit animations."},{name:".sf-scale-up / .sf-scale-down",description:"Scale entrance/exit animations."},{name:".sf-slide-in-{up,down,left,right}",description:"Directional slide-in entrance animations."},{name:".sf-color-pulse",description:"Continuous color pulse animation."},{name:".sf-entrance--fade / --fade-up / --fade-down / --fade-left / --fade-right / --scale-up",description:"Scroll-triggered entrance animations (scroll-timeline driven)."}]},{category:"State Classes (.is-*)",description:"Runtime state classes toggled by JS or mirrored from ARIA. They live in the slashed.states layer. Always pair with matching ARIA attributes.",classes:[{name:".is-hidden / .is-invisible / .is-visible",description:"Visibility control: removed from layout / hidden but keeps box / visible."},{name:".is-disabled / .is-readonly",description:"Non-interactive states with dimming."},{name:".is-loading / .is-pending / .is-busy",description:"Loading states: spinner replacement / optimistic UI / cursor hint."},{name:".is-skeleton",description:"Placeholder shimmer animation."},{name:".is-active / .is-selected / .is-current / .is-pressed",description:"Selection/activation states."},{name:".is-highlighted",description:"Transient emphasis (e.g. search result highlight)."},{name:".is-open / .is-collapsed / .is-expanded",description:"Disclosure states for modals, drawers, accordions."},{name:".is-valid / .is-invalid",description:"Form field validation results (maps to aria-invalid)."},{name:".is-success / .is-error / .is-warning / .is-info / .is-danger",description:"General feedback states and destructive-action context."},{name:".is-sticky / .is-pinned / .is-fixed / .is-fullscreen",description:"Positioning states."},{name:".is-clipped / .is-scrollable / .is-truncated / .is-resizable",description:"Overflow handling states."},{name:".is-dragging / .is-drop-target / .is-draggable",description:"Drag and drop states."},{name:".is-overlay / .is-focused / .is-clickable / .is-unselectable",description:"Positioning, focus, cursor, and selection states."},{name:".is-empty",description:"Hide element when empty (:empty pseudo-class)."}]}],ul=[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark)."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-link-external-marker",description:"External link arrow character."},{name:"--sf-field-block",description:"Vertical spacing between form fields."},{name:"--sf-field-required-marker",description:"Required field indicator string."}];var vl=C('
    • '),hl=C('
    '),pl=C('
    • '),_l=C('
    Misc Tokens that do not fit a single category.
    '),gl=C('

    CSS Custom Properties (--sf-*)

    '),ml=C('
    • '),yl=C('
    '),bl=C('

    Utility & State Classes

    '),wl=C('

    '),kl=C('

    API Cheatsheet

    ');function xl(e,t){re(t,!0);let s=Z(""),r=Z("all");const n=te.inventory?.variables?.length??0,a=te.inventory?.sf_classes?.length??0,i=te.inventory?.is_classes?.length??0;let o=j(()=>u(fl,"tokens")),l=j(()=>u(dl,"classes")),c=j(()=>ul.filter(J=>v(J.name,J.description)));function v(J,ge){if(!f(s).trim())return!0;const me=f(s).trim().toLowerCase();return J.toLowerCase().includes(me)||ge.toLowerCase().includes(me)}function u(J,ge){return f(s).trim()?J.map(me=>({...me,[ge]:me[ge].filter(Bt=>v(Bt.name,Bt.description))})).filter(me=>me[ge].length>0):J}let d=j(()=>f(r)==="all"||f(r)==="variables"),g=j(()=>f(r)==="all"||f(r)==="classes"),_=j(()=>f(s).trim()!==""&&(!f(d)||f(o).length===0&&f(c).length===0)&&(!f(g)||f(l).length===0));var b=kl(),h=y(b),m=w(y(h),2),k=y(m),S=w(h,2),z=y(S),E=w(z,2),L=y(E);let P;var $=w(L,2);let x;var F=w($,2);let A;var I=w(S,2);{var q=J=>{var ge=gl(),me=w(y(ge),2);ie(me,17,()=>f(o),us,(Je,$e)=>{var ot=hl(),lt=y(ot),mt=y(lt),Ht=y(mt),Kt=w(mt,2),yt=y(Kt),qt=w(lt,2);ie(qt,21,()=>f($e).tokens,us,(ct,ds)=>{var Os=vl(),Rs=y(Os),or=y(Rs),la=w(Rs,2),ca=y(la);M(()=>{O(or,f(ds).name),O(ca,f(ds).description)}),T(ct,Os)}),M(ct=>{ot.open=ct,O(Ht,f($e).category),O(yt,f($e).description)},[()=>!f(s).trim()]),T(Je,ot)});var Bt=w(me,2);{var fs=Je=>{var $e=_l(),ot=w(y($e),2);ie(ot,21,()=>f(c),us,(lt,mt)=>{var Ht=pl(),Kt=y(Ht),yt=y(Kt),qt=w(Kt,2),ct=y(qt);M(()=>{O(yt,f(mt).name),O(ct,f(mt).description)}),T(lt,Ht)}),M(lt=>$e.open=lt,[()=>!f(s).trim()]),T(Je,$e)};se(Bt,Je=>{f(c).length>0&&Je(fs)})}T(J,ge)};se(I,J=>{f(d)&&J(q)})}var Q=w(I,2);{var ce=J=>{var ge=bl(),me=w(y(ge),2);ie(me,17,()=>f(l),us,(Bt,fs)=>{var Je=yl(),$e=y(Je),ot=y($e),lt=y(ot),mt=w(ot,2),Ht=y(mt),Kt=w($e,2);ie(Kt,21,()=>f(fs).classes,us,(yt,qt)=>{var ct=ml(),ds=y(ct),Os=y(ds),Rs=w(ds,2),or=y(Rs);M(()=>{O(Os,f(qt).name),O(or,f(qt).description)}),T(yt,ct)}),M(yt=>{Je.open=yt,O(lt,f(fs).category),O(Ht,f(fs).description)},[()=>!f(s).trim()]),T(Bt,Je)}),T(J,ge)};se(Q,J=>{f(g)&&J(ce)})}var ee=w(Q,2);{var Fe=J=>{var ge=wl(),me=y(ge);M(()=>O(me,`No results for "${f(s)??""}"`)),T(J,ge)};se(ee,J=>{f(_)&&J(Fe)})}M(()=>{O(k,`${n??""} variables | ${a??""} layout/utility classes | ${i??""} state classes`),Y(L,"aria-pressed",f(r)==="all"),P=Jt(L,1,"svelte-osej3t",null,P,{active:f(r)==="all"}),Y($,"aria-pressed",f(r)==="variables"),x=Jt($,1,"svelte-osej3t",null,x,{active:f(r)==="variables"}),Y(F,"aria-pressed",f(r)==="classes"),A=Jt(F,1,"svelte-osej3t",null,A,{active:f(r)==="classes"})}),qs(z,()=>f(s),J=>V(s,J)),oe("click",L,()=>V(r,"all")),oe("click",$,()=>V(r,"variables")),oe("click",F,()=>V(r,"classes")),T(e,b),ne()}Pe(["click"]);var Sl=C('
    '),El=C(`

    Live preview

    The quick brown fox jumps over the lazy dog

    This is a preview of your design token configuration. Adjust values above +} );`}];var s=ul(),r=w(g(s),4);te(r,17,()=>t,n=>n.name,(n,a)=>{var o=fl(),i=g(o),l=g(i),c=g(l),v=w(i,2),u=g(v),f=w(v,2),m=w(g(f),2),_=g(m),k=w(f,2),p=g(k),y=g(p);M(()=>{I(c,d(a).name),I(u,d(a).description),I(_,d(a).params),I(y,d(a).example)}),z(n,o)}),z(e,s)}const hl=[{category:"Colors",description:"Brand, status, semantic, and derived color tokens. Source colors use oklch(); the framework derives light-dark pairs, palettes, and alpha scales automatically.",tokens:[{name:"--sf-color-{brand}-light",description:"Source color for the brand (oklch registered value). Set this to rebrand."},{name:"--sf-color-{brand}-dark",description:"Optional dark-mode override. If set, replaces the auto-derived dark variant for full per-mode control."},{name:"--sf-color-{brand}",description:"Resolved light-dark adaptive color for use in rules."},{name:"--sf-color-{brand}-{50-950}",description:"Palette scale: 50 (lightest) to 950 (darkest) mixed with base/text."},{name:"--sf-color-{brand}-a{5-95}",description:"Alpha scale: 5% to 95% opacity of the brand color."},{name:"--sf-color-{brand}-hover/active/muted/subtle/ghost/lighter/darker/xlight/xdark/superlight/superdark",description:"Semantic aliases for common UI states, mapped to palette steps."},{name:"--sf-color-bg",description:"Page background color, derived from base."},{name:"--sf-color-text",description:"Main body text color, contrast-aware."},{name:"--sf-color-heading",description:"Heading text color, slightly stronger than body text."},{name:"--sf-color-link",description:"Link color, derived from action brand."},{name:"--sf-color-border",description:"Default border color."},{name:"--sf-color-surface",description:"Card/panel surface color (equals base)."},{name:"--sf-color-overlay",description:"Semi-transparent overlay for modals."},{name:"--sf-color-dim",description:"50% black overlay for dimming backgrounds."},{name:"--sf-color-success/warning/error/info/danger",description:"Status feedback colors with -light source, -muted, -strong, -subtle variants."}]},{category:"Typography",description:"Font families, sizes (fluid clamp-based scale), weights, line-heights, letter-spacing, and heading configuration.",tokens:[{name:"--sf-font-body",description:"Body font stack (system-ui default)."},{name:"--sf-font-heading",description:"Heading font stack (defaults to body)."},{name:"--sf-font-mono",description:"Monospace font stack."},{name:"--sf-font-display",description:"Display/hero font (defaults to heading)."},{name:"--sf-font-geometric/humanist/slab",description:"Curated fallback stacks for common typographic personalities."},{name:"--sf-text-{2xs..4xl}",description:"Fluid type scale using clamp(). Sizes: 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl."},{name:"--sf-text-display-{s,m,l}",description:"Extra-large display/hero sizes."},{name:"--sf-text-scale",description:"Global multiplier for the type scale (default 1)."},{name:"--sf-font-weight-{thin..black}",description:"Named weight tokens: thin(100), extralight(200), light(300), normal(400), medium(500), semibold(600), bold(700), extrabold(800), black(900)."},{name:"--sf-leading-{tight,snug,normal,relaxed}",description:"Line-height presets: 1.1, 1.3, 1.5, 1.625."},{name:"--sf-tracking-{tight,normal,wide,wider,widest}",description:"Letter-spacing presets from -0.025em to 0.1em."},{name:"--sf-h{1-6}-size/font-weight/line-height/letter-spacing",description:"Per-heading-level configuration tokens."},{name:"--sf-body-*",description:"Body text configuration: font-size, font-weight, line-height, color, text-wrap."}]},{category:"Spacing",description:"Fluid spacing scale (clamp-based), gutters, section padding, and component padding.",tokens:[{name:"--sf-space-{2xs..4xl}",description:"Fluid spacing scale. Sizes: none, px, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl."},{name:"--sf-space-scale",description:"Global multiplier for all space tokens (default 1)."},{name:"--sf-space-gutter",description:"Page-edge gutter (defaults to space-l)."},{name:"--sf-gap",description:"Default gap for layouts (defaults to space-m)."},{name:"--sf-content-gap",description:"Gap between content elements (defaults to space-s)."},{name:"--sf-section-pad--{s,m,l,xl}",description:"Vertical padding for page sections."},{name:"--sf-component-pad",description:"Internal padding for components (defaults to space-m)."},{name:"--sf-header-height",description:"Expected fixed header height for sticky offset calculations."},{name:"--sf-safe-{top,right,bottom,left}",description:"Safe area insets for notched devices."}]},{category:"Sizing",description:"Component sizes, touch targets, and aspect ratios.",tokens:[{name:"--sf-size-{xs..xl}",description:"Named size tokens: xs(1.5rem), s(2rem), m(2.5rem), l(2.75rem), xl(3.5rem)."},{name:"--sf-touch-target",description:"Minimum interactive element size (defaults to size-l, 2.75rem)."},{name:"--sf-ratio-{square,photo,video,cinema,golden,portrait}",description:"Predefined aspect ratios for frames and containers."},{name:"--sf-icon-{xs..xl}",description:"Icon sizing in em units (0.875em to 3em)."}]},{category:"Layout",description:"Container widths, layout primitive tokens (stack, cluster, grid, sidebar, switcher, bento, cover, frame, reel, imposter).",tokens:[{name:"--sf-container-{narrow,default,prose,wide,full}",description:"Max-width presets for .sf-container."},{name:"--sf-stack-gap",description:"Vertical gap between .sf-stack children."},{name:"--sf-cluster-gap/align/justify",description:"Inline cluster layout tokens."},{name:"--sf-sidebar-width/gap/min-width",description:"Sidebar layout tokens."},{name:"--sf-switcher-threshold/gap",description:"Column-to-stack breakpoint and gap."},{name:"--sf-grid-min/gap",description:"Auto-fill grid minimum item width and gap."},{name:"--sf-bento-cols/gap/row",description:"Dense bento grid configuration."},{name:"--sf-cover-min-height/padding",description:"Full-height cover layout."},{name:"--sf-frame-ratio",description:"Aspect ratio for .sf-frame (defaults to 16/9)."},{name:"--sf-reel-gap/height/item-width",description:"Horizontal scroll strip configuration."},{name:"--sf-imposter-margin",description:"Safety margin for absolute-centered overlays."},{name:"--sf-breakout-width/content-width",description:"Breakout grid track widths."},{name:"--sf-divider-color/style/width",description:"Divider appearance tokens."}]},{category:"Borders",description:"Border widths and styles.",tokens:[{name:"--sf-border-width-{hairline,1,2,3,4}",description:"Border width scale: 0.5px, 1px, 2px, 3px, 4px."},{name:"--sf-border-style/dotted/soft/strong",description:"Border style presets (solid, dotted, dashed, solid)."},{name:"--sf-stroke-{thin,regular,bold,heavy}",description:"Stroke widths for SVG/icon use: 1px, 1.5px, 2px, 3px."}]},{category:"Radius",description:"Border radius scale and special shapes.",tokens:[{name:"--sf-radius-{none,xs,s,m,l,xl,2xl,3xl,4xl,full}",description:"Radius scale from 0 to 9999px (pill)."},{name:"--sf-radius-scale",description:"Global multiplier for all radius tokens (default 1)."},{name:"--sf-radius-pill",description:"Fully rounded (9999px)."},{name:"--sf-radius-outer",description:"Outer radius = inner + padding (for nested rounding)."}]},{category:"Shadows",description:"Box shadows, drop shadows, text shadows, and shadow configuration.",tokens:[{name:"--sf-shadow-{xs,s,m,l,xl,2xl}",description:"Elevation shadow scale, progressively more dramatic."},{name:"--sf-shadow-inner",description:"Inset shadow for recessed elements."},{name:"--sf-shadow-glow",description:"Colored glow effect (uses --sf-shadow-glow-color)."},{name:"--sf-shadow-none",description:"Explicit no-shadow value."},{name:"--sf-shadow-color",description:"Base shadow color (derived from neutral)."},{name:"--sf-shadow-strength",description:"Shadow opacity multiplier (adapts to dark mode)."},{name:"--sf-drop-shadow-{s,m,l}",description:"CSS filter drop-shadow equivalents."},{name:"--sf-text-shadow-{s,m,l,none}",description:"Text shadow presets."}]},{category:"Effects",description:"Blurs, opacities, gradients, masks, and perspective.",tokens:[{name:"--sf-blur-{xs,s,m,l,xl}",description:"Blur radius scale: 4px to 48px."},{name:"--sf-opacity-{0,10,25,50,75,100,disabled}",description:"Named opacity presets."},{name:"--sf-gradient-{brand,primary,secondary,tertiary,surface}",description:"Predefined gradients using brand colors."},{name:"--sf-gradient-fade--{t,b,l,r}",description:"Directional fade-to-background gradients."},{name:"--sf-mask-scrim-start/end",description:"Scroll mask fade depth."},{name:"--sf-perspective-{near,normal,far}",description:"3D perspective presets: 500px, 1000px, 2000px."},{name:"--sf-contrast-bias/threshold",description:"Color contrast tuning for auto text-on-color logic."}]},{category:"Motion",description:"Durations, easing curves, transitions, and animations.",tokens:[{name:"--sf-duration-{none,instant,fast,normal,slow,slower}",description:"Duration scale: 0ms to 600ms (respects --sf-motion-scale)."},{name:"--sf-motion-scale",description:"Global animation speed multiplier (set 0 to disable)."},{name:"--sf-ease-{linear,in,out,in-out,bounce,elastic,overshoot,spring}",description:"Easing function presets."},{name:"--sf-transition-{all,colors,opacity,shadow,transform,fast,slow,enter,exit}",description:"Pre-composed transition shorthands."},{name:"--sf-animation-{fade-in,fade-out,scale-up,scale-down,slide-in-*,float,ping,blink,color-pulse}",description:"Named keyframe animation shorthands."},{name:"--sf-animation-delay-{1-5}",description:"Stagger delays for sequential animations."}]},{category:"Z-Index",description:"Z-index scale for predictable layering.",tokens:[{name:"--sf-z-{below,base,raised,low,mid,high,top,max}",description:"Z-index scale: -1, 0, 1, 10, 100, 500, 900, 9999."}]},{category:"Focus",description:"Focus ring appearance for keyboard navigation.",tokens:[{name:"--sf-focus-ring-width/offset/color/style/shadow",description:"Focus indicator configuration."},{name:"--sf-caret-color",description:"Text input caret color (defaults to action)."}]},{category:"Scroll",description:"Scroll timeline and scrollbar styling.",tokens:[{name:"--sf-scroll-timeline-range-start/end",description:"Scroll-driven animation range."},{name:"--sf-scrollbar-thumb/track",description:"Custom scrollbar colors."}]},{category:"Print",description:"Print stylesheet configuration.",tokens:[{name:"--sf-print-base-size/page-margin/page-size",description:"Print layout tokens: 11pt base, 2cm margins, A4 size."}]}],pl=[{category:"Layout Primitives",description:"Breakpoint-free, container-query-driven layout components. Each is a single class with per-instance token overrides via inline style.",classes:[{name:".sf-section",description:"Vertical page rhythm with size variants (--s/--m/--l/--xl/--collapse)."},{name:".sf-section-group",description:"Collapses gap between adjacent sections."},{name:".sf-container",description:"Centered max-width wrapper with gutters. Variants: --narrow, --wide, --full, --prose."},{name:".sf-box",description:"Isolated unit with padding and optional border."},{name:".sf-center",description:"Intrinsic centering with max-width. Variant: --intrinsic."},{name:".sf-stack",description:"Vertical flow with consistent gap. Size variants: --2xs to --3xl. Alignment: --center, --end, --stretch."},{name:".sf-cluster",description:"Wrapping inline group. Size variants: --2xs to --xl. Alignment: --center, --end, --between. Wrap: --no-wrap."},{name:".sf-sidebar",description:"Content + side panel that wraps. Variants: --right, --narrow, --wide."},{name:".sf-switcher",description:"N columns above threshold, stacked below. Variants: --no-wrap, --vertical."},{name:".sf-grid",description:"Auto-fill responsive grid. Size variants: --xs to --xl. Variants: --fit, --dense."},{name:".sf-grid-{1,2,3,4,6}",description:"Fixed-column grids, container-responsive."},{name:".sf-grid-{1-2,2-1,1-3,3-1}",description:"Ratio two-column grids."},{name:".sf-bento",description:"Dense free-form grid. Variants: --2, --4, --compact, --tall."},{name:".sf-alternate",description:"Zigzag two-column layout, reverses every other row."},{name:".sf-pancake",description:"Sticky-footer grid: header / main(1fr) / footer."},{name:".sf-content-grid",description:"Breakout layout grid. Children use .sf-breakout or .sf-full-bleed."},{name:".sf-cover",description:"Full-height region with centered content. Variants: --min, --max, --padding-s, --padding-l."},{name:".sf-frame",description:"Aspect-ratio media box. Variants: --square, --portrait, --video, --cinema, --3-2, --4-3, --golden."},{name:".sf-reel",description:"Horizontal scroll strip with optional mask fade."},{name:".sf-imposter",description:"Absolutely-centered overlay. Variants: --fixed, --contain."},{name:".sf-subgrid / .sf-subgrid-rows",description:"Inherit parent grid tracks."},{name:".sf-divider",description:"Token-driven separator. Variant: --vertical."},{name:".sf-icon",description:"Em-based inline icon sizing. Sizes: --xs to --xl. Variant: --boxed."},{name:".sf-prose",description:"Readable long-form text with automatic vertical rhythm."},{name:".sf-not-prose",description:"Reset zone inside .sf-prose for embedded components."}]},{category:"Macros",description:"Recipe classes that answer 'what does this element do/look like?' - composable with layout primitives.",classes:[{name:".sf-flow",description:"Lobotomized owl: consistent gap between consecutive children."},{name:".sf-truncate",description:"Single-line ellipsis overflow."},{name:".sf-line-clamp-{2,3,N}",description:"Multi-line text clamping with ellipsis. -N reads --sf-line-clamp."},{name:".sf-equal-height",description:"Forces flex children to share the tallest child's height."},{name:".sf-aspect",description:"Generic aspect-ratio container (reads --sf-aspect token)."},{name:".sf-scroll-shadow",description:"Top + bottom mask gradient for scrolling containers."},{name:".sf-scroll-snap",description:"Vertical scroll-snap container."},{name:".sf-overflow-fade",description:"End-edge horizontal fade for overflowing inline content."},{name:".sf-no-tap-highlight",description:"Suppresses WebKit/Android tap highlight."},{name:".sf-text-gradient",description:"Gradient text effect using background-clip."},{name:".sf-clickable-parent",description:"Makes an entire card clickable via the first link inside."},{name:".sf-link-external",description:"Adds external link indicator marker."}]},{category:"Surfaces",description:"Color surface utility classes that set background and text color for a brand context.",classes:[{name:".sf-surface--{primary,secondary,tertiary,action,neutral,inverse}",description:"Brand-colored surface with auto-contrast text."},{name:".sf-surface--{success,warning,error,info,danger}",description:"Status-colored surfaces."}]},{category:"Animations",description:"CSS animation utility classes that apply predefined keyframe animations.",classes:[{name:".sf-fade-in / .sf-fade-out",description:"Opacity entrance/exit animations."},{name:".sf-scale-up / .sf-scale-down",description:"Scale entrance/exit animations."},{name:".sf-slide-in-{up,down,left,right}",description:"Directional slide-in entrance animations."},{name:".sf-color-pulse",description:"Continuous color pulse animation."},{name:".sf-entrance--fade / --fade-up / --fade-down / --fade-left / --fade-right / --scale-up",description:"Scroll-triggered entrance animations (scroll-timeline driven)."}]},{category:"State Classes (.is-*)",description:"Runtime state classes toggled by JS or mirrored from ARIA. They live in the slashed.states layer. Always pair with matching ARIA attributes.",classes:[{name:".is-hidden / .is-invisible / .is-visible",description:"Visibility control: removed from layout / hidden but keeps box / visible."},{name:".is-disabled / .is-readonly",description:"Non-interactive states with dimming."},{name:".is-loading / .is-pending / .is-busy",description:"Loading states: spinner replacement / optimistic UI / cursor hint."},{name:".is-skeleton",description:"Placeholder shimmer animation."},{name:".is-active / .is-selected / .is-current / .is-pressed",description:"Selection/activation states."},{name:".is-highlighted",description:"Transient emphasis (e.g. search result highlight)."},{name:".is-open / .is-collapsed / .is-expanded",description:"Disclosure states for modals, drawers, accordions."},{name:".is-valid / .is-invalid",description:"Form field validation results (maps to aria-invalid)."},{name:".is-success / .is-error / .is-warning / .is-info / .is-danger",description:"General feedback states and destructive-action context."},{name:".is-sticky / .is-pinned / .is-fixed / .is-fullscreen",description:"Positioning states."},{name:".is-clipped / .is-scrollable / .is-truncated / .is-resizable",description:"Overflow handling states."},{name:".is-dragging / .is-drop-target / .is-draggable",description:"Drag and drop states."},{name:".is-overlay / .is-focused / .is-clickable / .is-unselectable",description:"Positioning, focus, cursor, and selection states."},{name:".is-empty",description:"Hide element when empty (:empty pseudo-class)."}]}],_l=[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark)."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-link-external-marker",description:"External link arrow character."},{name:"--sf-field-block",description:"Vertical spacing between form fields."},{name:"--sf-field-required-marker",description:"Required field indicator string."}];var gl=L('

    • '),ml=L('
      '),yl=L('
      • '),bl=L('
      Misc Tokens that do not fit a single category.
        '),wl=L('

        CSS Custom Properties (--sf-*)

        '),kl=L('
        • '),xl=L('
          '),Sl=L('

          Utility & State Classes

          '),El=L('

          '),jl=L('

          API Cheatsheet

          ');function Tl(e,t){ne(t,!0);let s=Z(""),r=Z("all");const n=se.inventory?.variables?.length??0,a=se.inventory?.sf_classes?.length??0,o=se.inventory?.is_classes?.length??0;let i=R(()=>u(hl,"tokens")),l=R(()=>u(pl,"classes")),c=R(()=>_l.filter(X=>v(X.name,X.description)));function v(X,ge){if(!d(s).trim())return!0;const me=d(s).trim().toLowerCase();return X.toLowerCase().includes(me)||ge.toLowerCase().includes(me)}function u(X,ge){return d(s).trim()?X.map(me=>({...me,[ge]:me[ge].filter(qt=>v(qt.name,qt.description))})).filter(me=>me[ge].length>0):X}let f=R(()=>d(r)==="all"||d(r)==="variables"),m=R(()=>d(r)==="all"||d(r)==="classes"),_=R(()=>d(s).trim()!==""&&(!d(f)||d(i).length===0&&d(c).length===0)&&(!d(m)||d(l).length===0));var k=jl(),p=g(k),y=w(g(p),2),E=g(y),T=w(p,2),O=g(T),S=w(O,2),x=g(S);let j;var C=w(x,2);let b;var V=w(C,2);let A;var D=w(T,2);{var $=X=>{var ge=wl(),me=w(g(ge),2);te(me,17,()=>d(i),us,(Qe,Ue)=>{var ct=ml(),dt=g(ct),yt=g(dt),Bt=g(yt),$t=w(yt,2),bt=g($t),Ht=w(dt,2);te(Ht,21,()=>d(Ue).tokens,us,(ft,fs)=>{var Rs=gl(),Ls=g(Rs),cr=g(Ls),la=w(Ls,2),ca=g(la);M(()=>{I(cr,d(fs).name),I(ca,d(fs).description)}),z(ft,Rs)}),M(ft=>{ct.open=ft,I(Bt,d(Ue).category),I(bt,d(Ue).description)},[()=>!d(s).trim()]),z(Qe,ct)});var qt=w(me,2);{var ds=Qe=>{var Ue=bl(),ct=w(g(Ue),2);te(ct,21,()=>d(c),us,(dt,yt)=>{var Bt=yl(),$t=g(Bt),bt=g($t),Ht=w($t,2),ft=g(Ht);M(()=>{I(bt,d(yt).name),I(ft,d(yt).description)}),z(dt,Bt)}),M(dt=>Ue.open=dt,[()=>!d(s).trim()]),z(Qe,Ue)};re(qt,Qe=>{d(c).length>0&&Qe(ds)})}z(X,ge)};re(D,X=>{d(f)&&X($)})}var J=w(D,2);{var ie=X=>{var ge=Sl(),me=w(g(ge),2);te(me,17,()=>d(l),us,(qt,ds)=>{var Qe=xl(),Ue=g(Qe),ct=g(Ue),dt=g(ct),yt=w(ct,2),Bt=g(yt),$t=w(Ue,2);te($t,21,()=>d(ds).classes,us,(bt,Ht)=>{var ft=kl(),fs=g(ft),Rs=g(fs),Ls=w(fs,2),cr=g(Ls);M(()=>{I(Rs,d(Ht).name),I(cr,d(Ht).description)}),z(bt,ft)}),M(bt=>{Qe.open=bt,I(dt,d(ds).category),I(Bt,d(ds).description)},[()=>!d(s).trim()]),z(qt,Qe)}),z(X,ge)};re(J,X=>{d(m)&&X(ie)})}var Q=w(J,2);{var Se=X=>{var ge=El(),me=g(ge);M(()=>I(me,`No results for "${d(s)??""}"`)),z(X,ge)};re(Q,X=>{d(_)&&X(Se)})}M(()=>{I(E,`${n??""} variables | ${a??""} layout/utility classes | ${o??""} state classes`),G(x,"aria-pressed",d(r)==="all"),j=Jt(x,1,"svelte-osej3t",null,j,{active:d(r)==="all"}),G(C,"aria-pressed",d(r)==="variables"),b=Jt(C,1,"svelte-osej3t",null,b,{active:d(r)==="variables"}),G(V,"aria-pressed",d(r)==="classes"),A=Jt(V,1,"svelte-osej3t",null,A,{active:d(r)==="classes"})}),bs(O,()=>d(s),X=>P(s,X)),le("click",x,()=>P(r,"all")),le("click",C,()=>P(r,"variables")),le("click",V,()=>P(r,"classes")),z(e,k),ae()}Pe(["click"]);var Cl=L('
          '),Al=L('
          '),zl=L('
          '),Ol=L('
          '),Rl=L(`

          Live preview

          The quick brown fox jumps over the lazy dog

          This is a preview of your design token configuration. Adjust values above and see changes reflected here in real time. Brand and status colors are rendered as swatches; the heading and this paragraph reflect the current - body and heading font stacks.

          Primary Action
          Generated CSS:
          `);function jl(e,t){re(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],r=["success","warning","error","info","danger"],n=j(()=>{const _=[],b=G.colors??{},h=G.typography??{};for(const m of s){const k=b[`brand_${m}`];k&&_.push(`--sf-color-${m}-light:${k}`);const S=b[`brand_dark_${m}`];S&&_.push(`--sf-color-${m}-dark:${S}`)}for(const m of r){const k=b[`status_${m}`];k&&_.push(`--sf-color-${m}-light:${k}`);const S=b[`status_dark_${m}`];S&&_.push(`--sf-color-${m}-dark:${S}`)}return h.font_body&&_.push(`--sf-font-body:${h.font_body}`),h.font_heading&&_.push(`--sf-font-heading:${h.font_heading}`),_.join(";")}),a=j(()=>{const _=[],b=G.colors??{},h=G.typography??{};for(const m of s){const k=b[`brand_${m}`];k&&_.push(`--sf-color-${m}-light: ${k}`);const S=b[`brand_dark_${m}`];S&&_.push(`--sf-color-${m}-dark: ${S}`)}for(const m of r){const k=b[`status_${m}`];k&&_.push(`--sf-color-${m}-light: ${k}`);const S=b[`status_dark_${m}`];S&&_.push(`--sf-color-${m}-dark: ${S}`)}return h.font_body&&_.push(`--sf-font-body: ${h.font_body}`),h.font_heading&&_.push(`--sf-font-heading: ${h.font_heading}`),_.length===0?"":`.slashed-preview { - ${_.join(`; + body and heading font stacks.

          Primary Action

          Dark mode

          Generated CSS:
          `);function Ll(e,t){ne(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],r=["success","warning","error","info","danger"],n=se.defaults?.colors??{},a=R(()=>{const x=[],j=W.colors??{},C=W.typography??{};for(const b of s){const V=j[`brand_${b}`]??n.brand_hex_hints?.[b];V&&x.push(`--sf-color-${b}-light:${V}`);const A=j[`brand_dark_${b}`]??n.brand_dark_hex_hints?.[b];A&&x.push(`--sf-color-${b}-dark:${A}`)}for(const b of r){const V=j[`status_${b}`]??n.status_hex_hints?.[b];V&&x.push(`--sf-color-${b}-light:${V}`);const A=j[`status_dark_${b}`]??n.status_dark_hex_hints?.[b];A&&x.push(`--sf-color-${b}-dark:${A}`)}return C.font_body&&x.push(`--sf-font-body:${C.font_body}`),C.font_heading&&x.push(`--sf-font-heading:${C.font_heading}`),x.join(";")}),o=R(()=>{const x=[],j=W.colors??{},C=W.typography??{};for(const b of s){const V=j[`brand_${b}`];V&&x.push(`--sf-color-${b}-light: ${V}`);const A=j[`brand_dark_${b}`];A&&x.push(`--sf-color-${b}-dark: ${A}`)}for(const b of r){const V=j[`status_${b}`];V&&x.push(`--sf-color-${b}-light: ${V}`);const A=j[`status_dark_${b}`];A&&x.push(`--sf-color-${b}-dark: ${A}`)}return C.font_body&&x.push(`--sf-font-body: ${C.font_body}`),C.font_heading&&x.push(`--sf-font-heading: ${C.font_heading}`),x.length===0?"":`.slashed-preview { + ${x.join(`; `)}; -}`});var i=El(),o=w(y(i),6);ie(o,20,()=>s,_=>_,(_,b)=>{var h=Sl();let m;var k=y(h);M(()=>{Y(h,"title",b),m=xt(h,"",m,{background:`var(--sf-color-${b}-light, #ddd)`}),O(k,b)}),T(_,h)});var l=w(o,2),c=y(l);xt(c,"",{},{background:"var(--sf-color-primary-light, #4338ca)"});var v=w(c,2);xt(v,"",{},{background:"var(--sf-color-action-light, #0891b2)"});var u=w(l,2),d=w(y(u)),g=y(d);M(()=>{xt(i,f(n)),O(g,f(a)||"/* (defaults — no overrides set) */")}),T(e,i),ne()}const ln=22.5,Tl=95;function Cl(e,t){if(e<=0||t<=0)return null;const s=Tl-ln,r=(t-e)/s,n=parseFloat(r.toFixed(6)),a=parseFloat(e.toFixed(4)),i=parseFloat(t.toFixed(4));return`clamp(${a}rem, calc(${n} * (100vw - ${ln}rem) + ${a}rem), ${i}rem)`}function cn(e){const t=parseFloat(e);if(isNaN(t))return"0";let s=t.toFixed(6).replace(/0+$/,"").replace(/\.$/,"");return s===""?"0":s}function ue(e){return e!=null&&e!==""}function Al(e){const t=[],s=["primary","secondary","tertiary","action","neutral","base"];for(const n of s){const a=`brand_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-light: ${e[a]};`)}for(const n of s){const a=`brand_dark_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-dark: ${e[a]};`)}const r=["success","warning","error","info","danger"];for(const n of r){const a=`status_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-light: ${e[a]};`)}for(const n of r){const a=`status_dark_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-dark: ${e[a]};`)}return t}function zl(e){const t=[],s=["body","heading","mono","display","humanist","geometric","slab"];for(const n of s){const a=`font_${n}`;ue(e[a])&&t.push(`--sf-font-${n}: ${e[a]};`)}ue(e.text_scale)&&t.push(`--sf-text-scale: ${e.text_scale};`),ue(e.text_display_scale)&&t.push(`--sf-text-display-scale: ${e.text_display_scale};`);const r=["2xs","xs","s","m","l","xl","2xl","3xl","4xl","display-s","display-m","display-l"];for(const n of r){const a=`size_${n}_min`,i=`size_${n}_max`,o=e[a],l=e[i];if(ue(o)&&ue(l)){const c=Cl(parseFloat(o),parseFloat(l));c&&t.push(`--sf-text-${n}: ${c};`)}}return t}function Ol(e){const t=[];ue(e.space_scale)&&t.push(`--sf-space-scale: ${e.space_scale};`);const s={gutter:"--sf-space-gutter",gap:"--sf-gap",content_gap:"--sf-content-gap",component_pad:"--sf-component-pad",section_pad:"--sf-section-pad"};for(const[r,n]of Object.entries(s))ue(e[r])&&t.push(`${n}: ${e[r]};`);return t}function Rl(e){const t=[];return ue(e.radius_scale)&&t.push(`--sf-radius-scale: ${e.radius_scale};`),t}function Ll(e){const t=[];return ue(e.shadow_strength)&&t.push(`--sf-shadow-strength: calc(${e.shadow_strength} + var(--sf-is-dark) * 0.17);`),t}function Il(e){const t=[];ue(e.motion_scale)&&t.push(`--sf-motion-scale: ${e.motion_scale};`);const s=["instant","fast","normal","slow","slower"];for(const r of s){const n=`duration_${r}`;ue(e[n])&&t.push(`--sf-duration-${r}: calc(${e[n]}ms * var(--sf-motion-scale));`)}return t}function Vl(e){const t=[],s=["below","base","raised","low","mid","high","top","max"];for(const r of s)ue(e[r])&&t.push(`--sf-z-${r}: ${parseInt(e[r],10)};`);return t}function Dl(e){const t=[],s={contrast_bias:"--sf-contrast-bias",contrast_threshold:"--sf-contrast-threshold",opacity_disabled:"--sf-opacity-disabled"};for(const[n,a]of Object.entries(s))ue(e[n])&&t.push(`${a}: ${cn(e[n])};`);const r={focus_ring_width:"--sf-focus-ring-width",focus_ring_offset:"--sf-focus-ring-offset"};for(const[n,a]of Object.entries(r))ue(e[n])&&t.push(`${a}: ${cn(e[n])}px;`);return ue(e.focus_ring_style)&&["solid","dashed","dotted","double","none"].includes(e.focus_ring_style)&&t.push(`--sf-focus-ring-style: ${e.focus_ring_style};`),t}function Ml(e){const t=[];if(e.colors&&typeof e.colors=="object"&&t.push(...Al(e.colors)),e.typography&&typeof e.typography=="object"&&t.push(...zl(e.typography)),e.spacing&&typeof e.spacing=="object"&&t.push(...Ol(e.spacing)),e.radius&&typeof e.radius=="object"&&t.push(...Rl(e.radius)),e.shadows&&typeof e.shadows=="object"&&t.push(...Ll(e.shadows)),e.motion&&typeof e.motion=="object"&&t.push(...Il(e.motion)),e.zindex&&typeof e.zindex=="object"&&t.push(...Vl(e.zindex)),e.contrast&&typeof e.contrast=="object"&&t.push(...Dl(e.contrast)),t.length===0)return"";let s=`@layer slashed.overrides { +}`});var i=Rl(),l=w(g(i),6),c=g(l);te(c,16,()=>s,x=>x,(x,j)=>{var C=Cl();let b;var V=g(C);M(()=>{G(C,"title",j),b=qe(C,"",b,{background:`var(--sf-color-${j}-light, #ddd)`}),I(V,j)}),z(x,C)});var v=w(c,2);te(v,16,()=>r,x=>x,(x,j)=>{var C=Al();let b;var V=g(C);M(()=>{G(C,"title",j),b=qe(C,"",b,{background:`var(--sf-color-${j}-light, #ddd)`}),I(V,j)}),z(x,C)});var u=w(l,2),f=g(u);qe(f,"",{},{background:"var(--sf-color-primary-light, #4338ca)"});var m=w(f,2);qe(m,"",{},{background:"var(--sf-color-action-light, #0891b2)"});var _=w(u,2),k=w(g(_),2),p=g(k),y=g(p);te(y,16,()=>s,x=>x,(x,j)=>{var C=zl();let b;var V=g(C);M(()=>{G(C,"title",`${j} dark`),b=qe(C,"",b,{background:`var(--sf-color-${j}-dark, #333)`}),I(V,j)}),z(x,C)});var E=w(y,2);te(E,16,()=>r,x=>x,(x,j)=>{var C=Ol();let b;var V=g(C);M(()=>{G(C,"title",`${j} dark`),b=qe(C,"",b,{background:`var(--sf-color-${j}-dark, #333)`}),I(V,j)}),z(x,C)});var T=w(_,2),O=w(g(T)),S=g(O);M(()=>{qe(i,d(a)),I(S,d(o)||"/* (defaults — no overrides set) */")}),z(e,i),ae()}const ln=22.5,Vl=95;function Il(e,t){if(e<=0||t<=0)return null;const s=Vl-ln,r=(t-e)/s,n=parseFloat(r.toFixed(6)),a=parseFloat(e.toFixed(4)),o=parseFloat(t.toFixed(4));return`clamp(${a}rem, calc(${n} * (100vw - ${ln}rem) + ${a}rem), ${o}rem)`}function cn(e){const t=parseFloat(e);if(isNaN(t))return"0";let s=t.toFixed(6).replace(/0+$/,"").replace(/\.$/,"");return s===""?"0":s}function ue(e){return e!=null&&e!==""}function Dl(e){const t=[],s=["primary","secondary","tertiary","action","neutral","base"];for(const n of s){const a=`brand_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-light: ${e[a]};`)}for(const n of s){const a=`brand_dark_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-dark: ${e[a]};`)}const r=["success","warning","error","info","danger"];for(const n of r){const a=`status_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-light: ${e[a]};`)}for(const n of r){const a=`status_dark_${n}`;ue(e[a])&&t.push(`--sf-color-${n}-dark: ${e[a]};`)}return t}function Fl(e){const t=[],s=["body","heading","mono","display","humanist","geometric","slab"];for(const n of s){const a=`font_${n}`;ue(e[a])&&t.push(`--sf-font-${n}: ${e[a]};`)}ue(e.text_scale)&&t.push(`--sf-text-scale: ${e.text_scale};`),ue(e.text_display_scale)&&t.push(`--sf-text-display-scale: ${e.text_display_scale};`);const r=["2xs","xs","s","m","l","xl","2xl","3xl","4xl","display-s","display-m","display-l"];for(const n of r){const a=`size_${n}_min`,o=`size_${n}_max`,i=e[a],l=e[o];if(ue(i)&&ue(l)){const c=Il(parseFloat(i),parseFloat(l));c&&t.push(`--sf-text-${n}: ${c};`)}}return t}function Ml(e){const t=[];ue(e.space_scale)&&t.push(`--sf-space-scale: ${e.space_scale};`);const s={gutter:"--sf-space-gutter",gap:"--sf-gap",content_gap:"--sf-content-gap",component_pad:"--sf-component-pad",section_pad:"--sf-section-pad"};for(const[r,n]of Object.entries(s))ue(e[r])&&t.push(`${n}: ${e[r]};`);return t}function Pl(e){const t=[];return ue(e.radius_scale)&&t.push(`--sf-radius-scale: ${e.radius_scale};`),t}function Nl(e){const t=[];return ue(e.shadow_strength)&&t.push(`--sf-shadow-strength: calc(${e.shadow_strength} + var(--sf-is-dark) * 0.17);`),t}function ql(e){const t=[];ue(e.motion_scale)&&t.push(`--sf-motion-scale: ${e.motion_scale};`);const s=["instant","fast","normal","slow","slower"];for(const r of s){const n=`duration_${r}`;ue(e[n])&&t.push(`--sf-duration-${r}: calc(${e[n]}ms * var(--sf-motion-scale));`)}return t}function Bl(e){const t=[],s=["below","base","raised","low","mid","high","top","max"];for(const r of s)ue(e[r])&&t.push(`--sf-z-${r}: ${parseInt(e[r],10)};`);return t}function $l(e){const t=[],s={contrast_bias:"--sf-contrast-bias",contrast_threshold:"--sf-contrast-threshold",opacity_disabled:"--sf-opacity-disabled"};for(const[n,a]of Object.entries(s))ue(e[n])&&t.push(`${a}: ${cn(e[n])};`);const r={focus_ring_width:"--sf-focus-ring-width",focus_ring_offset:"--sf-focus-ring-offset"};for(const[n,a]of Object.entries(r))ue(e[n])&&t.push(`${a}: ${cn(e[n])}px;`);return ue(e.focus_ring_style)&&["solid","dashed","dotted","double","none"].includes(e.focus_ring_style)&&t.push(`--sf-focus-ring-style: ${e.focus_ring_style};`),t}function Hl(e){const t=[];if(e.colors&&typeof e.colors=="object"&&t.push(...Dl(e.colors)),e.typography&&typeof e.typography=="object"&&t.push(...Fl(e.typography)),e.spacing&&typeof e.spacing=="object"&&t.push(...Ml(e.spacing)),e.radius&&typeof e.radius=="object"&&t.push(...Pl(e.radius)),e.shadows&&typeof e.shadows=="object"&&t.push(...Nl(e.shadows)),e.motion&&typeof e.motion=="object"&&t.push(...ql(e.motion)),e.zindex&&typeof e.zindex=="object"&&t.push(...Bl(e.zindex)),e.contrast&&typeof e.contrast=="object"&&t.push(...$l(e.contrast)),t.length===0)return"";let s=`@layer slashed.overrides { :root { `;for(const r of t)s+=` ${r} `;return s+=` } -}`,s}function Pl(e){if(!e||typeof e!="object")return!1;for(const t of Object.values(e))if(!(!t||typeof t!="object")){for(const s of Object.values(t))if(typeof s=="object"&&s!==null){for(const r of Object.values(s))if(r!==""&&r!==null&&r!==void 0)return!0}else if(s!==""&&s!==null&&s!==void 0)return!0}return!1}var Fl=C(' '),Nl=C('Saving…'),Bl=C('Saved'),Hl=C('Unsaved changes'),Kl=C('All changes saved'),ql=C('
          ');function $l(e,t){re(t,!0);async function s(){if(!R.saving){R.saving=!0,R.error="";try{const E=R.activeTab,L=G[E]??{},P=await Go(E,L);P&&P.values&&(G[E]=P.values),R.dirty=!1,R.lastSavedAt=Date.now()}catch(E){R.error=E&&E.message||String(E)}finally{R.saving=!1}}}async function r(){if(!R.saving&&confirm(`Reset the ${te.tabs[R.activeTab]??R.activeTab} tab to defaults?`)){R.saving=!0,R.error="";try{await Wo(R.activeTab),Xi(R.activeTab),R.dirty=!1,R.lastSavedAt=Date.now()}catch(E){R.error=E&&E.message||String(E)}finally{R.saving=!1}}}let n=Z(!1);Hn(()=>{if(R.lastSavedAt){V(n,!0);const E=setTimeout(()=>V(n,!1),2e3);return()=>clearTimeout(E)}});const a=j(()=>Pl(G));function i(){const E=Ml(G);if(!E)return;const L=new Blob([E],{type:"text/css"}),P=URL.createObjectURL(L),$=document.createElement("a");$.href=P,$.download="slashed-custom.css",document.body.appendChild($),$.click(),document.body.removeChild($),URL.revokeObjectURL(P)}var o=ql();let l;var c=y(o),v=y(c);{var u=E=>{var L=Fl(),P=y(L);M(()=>O(P,R.error)),T(E,L)},d=E=>{var L=Nl();T(E,L)},g=E=>{var L=Bl();T(E,L)},_=E=>{var L=Hl();T(E,L)},b=E=>{var L=Kl();T(E,L)};se(v,E=>{R.error?E(u):R.saving?E(d,1):f(n)?E(g,2):R.dirty?E(_,3):E(b,-1)})}var h=w(c,2),m=y(h),k=w(m,2),S=w(k,2),z=y(S);M(()=>{l=Jt(o,1,"bar svelte-1oj49qa",null,l,{dirty:R.dirty}),m.disabled=R.saving,k.disabled=!f(a),S.disabled=R.saving||!R.dirty,O(z,R.saving?"Saving…":"Save changes")}),oe("click",m,r),oe("click",k,i),oe("click",S,s),T(e,o),ne()}Pe(["click"]);var Ul=C('

          SLASHED Design Tokens

          Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.

          ');function Gl(e,t){re(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export"];let r=j(()=>s.includes(R.activeTab));Hn(()=>{function x(F){R.dirty&&(F.preventDefault(),F.returnValue="")}return window.addEventListener("beforeunload",x),()=>window.removeEventListener("beforeunload",x)});var n=Ul(),a=w(y(n),2);eo(a,{});var i=w(a,2),o=y(i);{var l=x=>{io(x,{})},c=x=>{yo(x,{})},v=x=>{Eo(x,{})},u=x=>{To(x,{})},d=x=>{Ao(x,{})},g=x=>{Oo(x,{})},_=x=>{Lo(x,{})},b=x=>{Vo(x,{})},h=x=>{No(x,{})},m=x=>{Uo(x,{})},k=x=>{tl(x,{})},S=x=>{il(x,{})},z=x=>{cl(x)},E=x=>{xl(x,{})};se(o,x=>{R.activeTab==="colors"?x(l):R.activeTab==="contrast"?x(c,1):R.activeTab==="typography"?x(v,2):R.activeTab==="spacing"?x(u,3):R.activeTab==="radius"?x(d,4):R.activeTab==="shadows"?x(g,5):R.activeTab==="motion"?x(_,6):R.activeTab==="zindex"?x(b,7):R.activeTab==="variables"?x(h,8):R.activeTab==="classes"?x(m,9):R.activeTab==="bundle"?x(k,10):R.activeTab==="export"?x(S,11):R.activeTab==="hooks"?x(z,12):R.activeTab==="cheatsheet"&&x(E,13)})}var L=w(i,2);jl(L,{});var P=w(L,2);{var $=x=>{$l(x,{})};se(P,x=>{f(r)||x($)})}T(e,n),ne()}const fn=document.getElementById("slashed-admin-app");fn&&Vi(Gl,{target:fn}); +}`,s}function Kl(e){if(!e||typeof e!="object")return!1;for(const t of Object.values(e))if(!(!t||typeof t!="object")){for(const s of Object.values(t))if(typeof s=="object"&&s!==null){for(const r of Object.values(s))if(r!==""&&r!==null&&r!==void 0)return!0}else if(s!==""&&s!==null&&s!==void 0)return!0}return!1}var Ul=L(' '),Gl=L('Saving…'),Wl=L('Saved'),Yl=L('Unsaved changes'),Zl=L('All changes saved'),Xl=L('
          ');function Jl(e,t){ne(t,!0);async function s(){if(!F.saving){F.saving=!0,F.error="";try{const S=F.activeTab,x=W[S]??{},j=await Xo(S,x);j&&j.values&&(W[S]=j.values),F.dirty=!1,F.lastSavedAt=Date.now()}catch(S){F.error=S&&S.message||String(S)}finally{F.saving=!1}}}async function r(){if(!F.saving&&confirm(`Reset the ${se.tabs[F.activeTab]??F.activeTab} tab to defaults?`)){F.saving=!0,F.error="";try{await Jo(F.activeTab),Ji(F.activeTab),F.dirty=!1,F.lastSavedAt=Date.now()}catch(S){F.error=S&&S.message||String(S)}finally{F.saving=!1}}}let n=Z(!1);Bn(()=>{if(F.lastSavedAt){P(n,!0);const S=setTimeout(()=>P(n,!1),2e3);return()=>clearTimeout(S)}});const a=R(()=>Kl(W));function o(){const S=Hl(W);if(!S)return;const x=new Blob([S],{type:"text/css"}),j=URL.createObjectURL(x),C=document.createElement("a");C.href=j,C.download="slashed-custom.css",document.body.appendChild(C),C.click(),document.body.removeChild(C),URL.revokeObjectURL(j)}var i=Xl();let l;var c=g(i),v=g(c);{var u=S=>{var x=Ul(),j=g(x);M(()=>I(j,F.error)),z(S,x)},f=S=>{var x=Gl();z(S,x)},m=S=>{var x=Wl();z(S,x)},_=S=>{var x=Yl();z(S,x)},k=S=>{var x=Zl();z(S,x)};re(v,S=>{F.error?S(u):F.saving?S(f,1):d(n)?S(m,2):F.dirty?S(_,3):S(k,-1)})}var p=w(c,2),y=g(p),E=w(y,2),T=w(E,2),O=g(T);M(()=>{l=Jt(i,1,"bar svelte-1oj49qa",null,l,{dirty:F.dirty}),y.disabled=F.saving,E.disabled=!d(a),T.disabled=F.saving||!F.dirty,I(O,F.saving?"Saving…":"Save changes")}),le("click",y,r),le("click",E,o),le("click",T,s),z(e,i),ae()}Pe(["click"]);var Ql=L('

          SLASHED Design Tokens

          Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.

          ');function ec(e,t){ne(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export"];let r=R(()=>s.includes(F.activeTab));Bn(()=>{function b(V){F.dirty&&(V.preventDefault(),V.returnValue="")}return window.addEventListener("beforeunload",b),()=>window.removeEventListener("beforeunload",b)});var n=Ql(),a=w(g(n),2);to(a,{});var o=w(a,2),i=g(o);{var l=b=>{oo(b,{})},c=b=>{bo(b,{})},v=b=>{Ao(b,{})},u=b=>{Oo(b,{})},f=b=>{Lo(b,{})},m=b=>{Io(b,{})},_=b=>{Fo(b,{})},k=b=>{Po(b,{})},p=b=>{Ho(b,{})},y=b=>{Zo(b,{})},E=b=>{al(b,{})},T=b=>{dl(b,{})},O=b=>{vl(b)},S=b=>{Tl(b,{})};re(i,b=>{F.activeTab==="colors"?b(l):F.activeTab==="contrast"?b(c,1):F.activeTab==="typography"?b(v,2):F.activeTab==="spacing"?b(u,3):F.activeTab==="radius"?b(f,4):F.activeTab==="shadows"?b(m,5):F.activeTab==="motion"?b(_,6):F.activeTab==="zindex"?b(k,7):F.activeTab==="variables"?b(p,8):F.activeTab==="classes"?b(y,9):F.activeTab==="bundle"?b(E,10):F.activeTab==="export"?b(T,11):F.activeTab==="hooks"?b(O,12):F.activeTab==="cheatsheet"&&b(S,13)})}var x=w(o,2);Ll(x,{});var j=w(x,2);{var C=b=>{Jl(b,{})};re(j,b=>{d(r)||b(C)})}z(e,n),ae()}const dn=document.getElementById("slashed-admin-app");dn&&Di(ec,{target:dn}); //# sourceMappingURL=app.js.map diff --git a/integrations/bricks/editor-app/src/components/BemBadge.svelte b/integrations/bricks/editor-app/src/components/BemBadge.svelte index 07aa6a1d..8eea7735 100644 --- a/integrations/bricks/editor-app/src/components/BemBadge.svelte +++ b/integrations/bricks/editor-app/src/components/BemBadge.svelte @@ -2,9 +2,10 @@ /** * The "BEM" badge injected per structure-panel item. * - * Real +>reBEM diff --git a/integrations/bricks/editor-app/src/styles/panel.css b/integrations/bricks/editor-app/src/styles/panel.css index a63f3bc0..981e9436 100644 --- a/integrations/bricks/editor-app/src/styles/panel.css +++ b/integrations/bricks/editor-app/src/styles/panel.css @@ -82,8 +82,8 @@ li[data-id]:focus-within > .rebemer-badge-host { letter-spacing: 0; text-transform: none; color: var(--rebemer-fg-muted, #8a8d95); + display: inline; background: transparent; - border: 0; padding: 1px 3px; margin: 0; cursor: pointer; diff --git a/scripts/version-sync.js b/scripts/version-sync.js index 7d63f194..26b96e79 100644 --- a/scripts/version-sync.js +++ b/scripts/version-sync.js @@ -49,6 +49,22 @@ changed += sync( `SLASHED_BRICKS_CSS_REF = '${versionTag}'` ) ? 1 : 0; +// Plugin header comment: "Version: X.X.X" +changed += sync( + 'integrations/bricks/slashed-bricks.php', + / \* Version: \d+\.\d+\.\d+/, + ` * Version: ${version}`, + `Version: ${version}` +) ? 1 : 0; + +// Plugin version constant: define( 'SLASHED_BRICKS_VERSION', 'X.X.X' ) +changed += sync( + 'integrations/bricks/slashed-bricks.php', + /define\(\s*'SLASHED_BRICKS_VERSION',\s*'[^']+'\s*\)/, + `define( 'SLASHED_BRICKS_VERSION', '${version}' )`, + `SLASHED_BRICKS_VERSION = '${version}'` +) ? 1 : 0; + // ── Summary ───────────────────────────────────────────────────────────────── if (changed === 0) { console.log('\nAll version references are already up to date.\n'); From d2bbe81a760bd2d270532c545255d8c2b2440ef6 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 29 May 2026 07:54:20 +0000 Subject: [PATCH 2/5] refactor(admin): merge misc tabs + add glow_color token Tab registry: consolidate contrast/radius/shadows/motion/zindex into a single 'misc' (Miscellaneous) tab. Add get_misc_sections() so the REST API continues to accept individual section slugs for save/reset. is_token_tab() now accepts both the top-level tab slugs and the misc sub-section slugs. Token defaults: add glow_color (empty = auto = var(--sf-color-primary)) to the shadows section defaults. CSS generator: emit --sf-shadow-glow-color when glow_color override is set, wiring the admin field through to the framework token. https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY --- .../bricks/includes/class-css-generator.php | 4 ++++ .../bricks/includes/class-tab-registry.php | 21 +++++++++++++------ .../bricks/includes/class-token-defaults.php | 1 + 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/integrations/bricks/includes/class-css-generator.php b/integrations/bricks/includes/class-css-generator.php index 4b45529c..46da4511 100644 --- a/integrations/bricks/includes/class-css-generator.php +++ b/integrations/bricks/includes/class-css-generator.php @@ -330,6 +330,10 @@ private static function generate_shadow_declarations( $settings ) { $declarations[] = '--sf-shadow-strength: calc(' . $settings['shadow_strength'] . ' + var(--sf-is-dark) * 0.17);'; } + if ( isset( $settings['glow_color'] ) && '' !== $settings['glow_color'] ) { + $declarations[] = '--sf-shadow-glow-color: ' . $settings['glow_color'] . ';'; + } + return $declarations; } diff --git a/integrations/bricks/includes/class-tab-registry.php b/integrations/bricks/includes/class-tab-registry.php index f1538dbf..6f19f27d 100644 --- a/integrations/bricks/includes/class-tab-registry.php +++ b/integrations/bricks/includes/class-tab-registry.php @@ -44,16 +44,25 @@ class Slashed_Bricks_Tab_Registry { public static function get_token_tabs() { return array( 'colors' => 'Colors', - 'contrast' => 'Contrast', 'typography' => 'Typography', 'spacing' => 'Spacing', - 'radius' => 'Radius', - 'shadows' => 'Shadows', - 'motion' => 'Motion', - 'zindex' => 'Z-Index', + 'misc' => 'Miscellaneous', ); } + /** + * Slugs of the sections that live inside the Miscellaneous tab. + * + * The REST API and legacy form handler still accept these slugs + * directly so the Svelte SaveBar can save/reset each sub-section + * independently. + * + * @return string[] + */ + public static function get_misc_sections() { + return array( 'contrast', 'radius', 'shadows', 'motion', 'zindex' ); + } + /** * Read-only view tabs available only in the Svelte SPA. * @@ -100,6 +109,6 @@ public static function has( $slug ) { */ public static function is_token_tab( $slug ) { $tokens = self::get_token_tabs(); - return is_string( $slug ) && isset( $tokens[ $slug ] ); + return is_string( $slug ) && ( isset( $tokens[ $slug ] ) || in_array( $slug, self::get_misc_sections(), true ) ); } } diff --git a/integrations/bricks/includes/class-token-defaults.php b/integrations/bricks/includes/class-token-defaults.php index d6cea997..14a492df 100644 --- a/integrations/bricks/includes/class-token-defaults.php +++ b/integrations/bricks/includes/class-token-defaults.php @@ -197,6 +197,7 @@ public static function get_radius() { public static function get_shadows() { return array( 'shadow_strength' => 0.08, + 'glow_color' => '', ); } From 25f337f4024b69641a8e444496816b1543e5e9d1 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 29 May 2026 07:58:30 +0000 Subject: [PATCH 3/5] feat(admin): Basic/Advanced split, MiscTab, visual previews MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AdvancedSection: new shared collapsible component (Svelte 5 snippets). MiscTab: consolidates Radius + Shadows + Motion + Z-Index + Contrast into a single tab. Basic section has the 4 most-touched knobs (radius scale, shadow strength, motion scale, focus ring) with inline live previews for radius (scaled squares) and shadows (approximated box-shadows). Advanced section has glow color, duration values, z-index layers, and contrast fine-tuning. ColorTab: status colors + dark overrides moved to AdvancedSection; brand light colors remain always-visible. TypographyTab: mono/display/humanist/geometric/slab families and scale multipliers moved to AdvancedSection; body/heading + all size steps (text + display) stay basic. TypographyPreview updated to show Text Scale and Display Scale as two distinct visual groups. SpacingTab: 5 alias fields moved to AdvancedSection; Space Scale stays basic. New SpacingPreview shows fluid spacing bars (2xs–4xl) with a 320–1440 px viewport slider. SaveBar: save() and reset() now iterate MISC_SECTIONS when the active tab is 'misc', keeping each sub-section's REST endpoint intact. App: removed 5 individual tab components, wired MiscTab. https://claude.ai/code/session_01WNc4MXGE8jGFYdBLe4qujY --- integrations/bricks/admin-app/src/App.svelte | 18 +- .../src/components/AdvancedSection.svelte | 34 ++ .../admin-app/src/components/ColorTab.svelte | 96 ++--- .../admin-app/src/components/MiscTab.svelte | 332 ++++++++++++++++++ .../admin-app/src/components/SaveBar.svelte | 41 ++- .../src/components/SpacingPreview.svelte | 178 ++++++++++ .../src/components/SpacingTab.svelte | 32 +- .../src/components/TypographyPreview.svelte | 50 ++- .../src/components/TypographyTab.svelte | 72 ++-- integrations/bricks/assets/admin-app/app.css | 2 +- integrations/bricks/assets/admin-app/app.js | 26 +- 11 files changed, 765 insertions(+), 116 deletions(-) create mode 100644 integrations/bricks/admin-app/src/components/AdvancedSection.svelte create mode 100644 integrations/bricks/admin-app/src/components/MiscTab.svelte create mode 100644 integrations/bricks/admin-app/src/components/SpacingPreview.svelte diff --git a/integrations/bricks/admin-app/src/App.svelte b/integrations/bricks/admin-app/src/App.svelte index 54b78178..591dee63 100644 --- a/integrations/bricks/admin-app/src/App.svelte +++ b/integrations/bricks/admin-app/src/App.svelte @@ -15,13 +15,9 @@ import { ui } from './lib/stores.svelte.js'; import TabNav from './components/TabNav.svelte'; import ColorTab from './components/ColorTab.svelte'; - import ContrastTab from './components/ContrastTab.svelte'; import TypographyTab from './components/TypographyTab.svelte'; import SpacingTab from './components/SpacingTab.svelte'; - import RadiusTab from './components/RadiusTab.svelte'; - import ShadowsTab from './components/ShadowsTab.svelte'; - import MotionTab from './components/MotionTab.svelte'; - import ZindexTab from './components/ZindexTab.svelte'; + import MiscTab from './components/MiscTab.svelte'; import VariablesTab from './components/VariablesTab.svelte'; import ClassesTab from './components/ClassesTab.svelte'; import BundleTab from './components/BundleTab.svelte'; @@ -77,20 +73,12 @@
          {#if ui.activeTab === 'colors'} - {:else if ui.activeTab === 'contrast'} - {:else if ui.activeTab === 'typography'} {:else if ui.activeTab === 'spacing'} - {:else if ui.activeTab === 'radius'} - - {:else if ui.activeTab === 'shadows'} - - {:else if ui.activeTab === 'motion'} - - {:else if ui.activeTab === 'zindex'} - + {:else if ui.activeTab === 'misc'} + {:else if ui.activeTab === 'variables'} {:else if ui.activeTab === 'classes'} diff --git a/integrations/bricks/admin-app/src/components/AdvancedSection.svelte b/integrations/bricks/admin-app/src/components/AdvancedSection.svelte new file mode 100644 index 00000000..b40faaef --- /dev/null +++ b/integrations/bricks/admin-app/src/components/AdvancedSection.svelte @@ -0,0 +1,34 @@ + + +
          + + {#if open} +
          + {@render children()} +
          + {/if} +
          + + diff --git a/integrations/bricks/admin-app/src/components/ColorTab.svelte b/integrations/bricks/admin-app/src/components/ColorTab.svelte index 8e41c2aa..8cfe5617 100644 --- a/integrations/bricks/admin-app/src/components/ColorTab.svelte +++ b/integrations/bricks/admin-app/src/components/ColorTab.svelte @@ -10,11 +10,15 @@ */ import { meta } from '../lib/stores.svelte.js'; import ColorRow from './ColorRow.svelte'; + import AdvancedSection from './AdvancedSection.svelte'; const colors = meta.defaults?.colors ?? {}; /** Capitalize first letter for display labels (matches the legacy ucfirst()). */ const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1); + + /** Brand color keys — only the 6 core brand colors for the basic section. */ + const brandEntries = Object.entries(colors.brand ?? {});
          @@ -26,7 +30,7 @@

          - {#each Object.entries(colors.brand ?? {}) as [name, oklch] (name)} + {#each brandEntries as [name, oklch] (name)} -

          Brand Colors — Dark Mode

          -

          - Optional overrides for dark mode. Leave empty to let the framework auto-derive - dark variants from the light source colors. Set explicit values for full - control over dark-mode appearance. -

          + +

          Status Colors — Light Mode

          +
          + {#each Object.entries(colors.status ?? {}) as [name, oklch] (name)} + + {/each} +
          -
          - {#each Object.entries(colors.brand_dark ?? colors.brand ?? {}) as [name] (name)} - - {/each} -
          +

          Brand Colors — Dark Mode

          +

          + Optional overrides for dark mode. Leave empty to let the framework auto-derive + dark variants from the light source colors. Set explicit values for full + control over dark-mode appearance. +

          -

          Status Colors — Light Mode

          -
          - {#each Object.entries(colors.status ?? {}) as [name, oklch] (name)} - - {/each} -
          +
          + {#each Object.entries(colors.brand_dark ?? colors.brand ?? {}) as [name] (name)} + + {/each} +
          -

          Status Colors — Dark Mode

          -

          - Optional overrides for dark mode. Leave empty for auto-derivation. -

          +

          Status Colors — Dark Mode

          +

          + Optional overrides for dark mode. Leave empty for auto-derivation. +

          -
          - {#each Object.entries(colors.status_dark ?? colors.status ?? {}) as [name] (name)} - - {/each} -
          +
          + {#each Object.entries(colors.status_dark ?? colors.status ?? {}) as [name] (name)} + + {/each} +
          +
          diff --git a/integrations/bricks/admin-app/src/components/SaveBar.svelte b/integrations/bricks/admin-app/src/components/SaveBar.svelte index 17693d23..703ba4ba 100644 --- a/integrations/bricks/admin-app/src/components/SaveBar.svelte +++ b/integrations/bricks/admin-app/src/components/SaveBar.svelte @@ -11,6 +11,12 @@ import * as api from '../lib/api.js'; import { generateExportCSS, hasOverrides } from '../lib/export.js'; + /** + * The misc tab aggregates data from these five underlying sections. + * Since `tokens.misc` doesn't exist, we iterate over them individually. + */ + const MISC_SECTIONS = ['contrast', 'radius', 'shadows', 'motion', 'zindex']; + /** * Persist the active tab's tokens via the REST controller. Replaces * the legacy form POST + page reload with an in-place save: we send @@ -18,18 +24,28 @@ * and write them to the store so dev/UI state matches the DB exactly. * Surfaces transport errors via `ui.error` and guards re-entry while * a save is in flight. + * + * For the misc tab, iterates over all 5 underlying sections. */ async function save() { if (ui.saving) return; ui.saving = true; ui.error = ''; try { - const section = ui.activeTab; - const values = tokens[section] ?? {}; - const res = await api.saveSection(section, values); - if (res && res.values) { - // Prefer the server-sanitized values so dev/UI state matches DB. - tokens[section] = res.values; + if (ui.activeTab === 'misc') { + for (const section of MISC_SECTIONS) { + const values = tokens[section] ?? {}; + const res = await api.saveSection(section, values); + if (res && res.values) tokens[section] = res.values; + } + } else { + const section = ui.activeTab; + const values = tokens[section] ?? {}; + const res = await api.saveSection(section, values); + if (res && res.values) { + // Prefer the server-sanitized values so dev/UI state matches DB. + tokens[section] = res.values; + } } ui.dirty = false; ui.lastSavedAt = Date.now(); @@ -46,6 +62,8 @@ * `slashed_bricks_tokens` server-side and `tokens[section]` locally). * Mirrors `save()`'s in-flight guard, error handling, and dirty/saved * transitions so the UI state stays consistent across both paths. + * + * For the misc tab, iterates over all 5 underlying sections. */ async function reset() { if (ui.saving) return; @@ -53,8 +71,15 @@ ui.saving = true; ui.error = ''; try { - await api.resetSection(ui.activeTab); - clearSection(ui.activeTab); + if (ui.activeTab === 'misc') { + for (const section of MISC_SECTIONS) { + await api.resetSection(section); + clearSection(section); + } + } else { + await api.resetSection(ui.activeTab); + clearSection(ui.activeTab); + } ui.dirty = false; ui.lastSavedAt = Date.now(); } catch (err) { diff --git a/integrations/bricks/admin-app/src/components/SpacingPreview.svelte b/integrations/bricks/admin-app/src/components/SpacingPreview.svelte new file mode 100644 index 00000000..8305bc6c --- /dev/null +++ b/integrations/bricks/admin-app/src/components/SpacingPreview.svelte @@ -0,0 +1,178 @@ + + +
          +
          +

          Live Scale Preview

          +
          + 320px + + 1440px + {vw}px +
          +
          + +
          + {#each computedSteps as step (step.name)} +
          + --sf-space-{step.name} +
          +
          +
          + {step.sizeRem}rem +
          + {/each} +
          +
          + + diff --git a/integrations/bricks/admin-app/src/components/SpacingTab.svelte b/integrations/bricks/admin-app/src/components/SpacingTab.svelte index 7eb50942..40939b96 100644 --- a/integrations/bricks/admin-app/src/components/SpacingTab.svelte +++ b/integrations/bricks/admin-app/src/components/SpacingTab.svelte @@ -9,6 +9,8 @@ import { meta } from '../lib/stores.svelte.js'; import NumberField from './NumberField.svelte'; import TextField from './TextField.svelte'; + import AdvancedSection from './AdvancedSection.svelte'; + import SpacingPreview from './SpacingPreview.svelte'; const SECTION = 'spacing'; const defaults = meta.defaults?.[SECTION] ?? {}; @@ -39,22 +41,30 @@ default={defaults.space_scale ?? 1} cssVar="--sf-space-scale" /> - - {#each aliases as alias (alias.key)} - - {/each} + + +

          Space Aliases

          +
          + {#each aliases as alias (alias.key)} + + {/each} +
          +           + +
          @@ -185,7 +211,8 @@
          - {#each stepNames as name (name)} +

          Text Scale

          + {#each textStepNames as name (name)} {@const step = stepAt[name]} {#if step}
          @@ -201,4 +228,25 @@ {/if} {/each}
          + + {#if displayStepNames.length > 0} +
          +

          Display Scale

          + {#each displayStepNames as name (name)} + {@const step = stepAt[name]} + {#if step} +
          + {name} + {name} + + {step.sizeRem}rem / {step.sizePx.toFixed(1)}px + +
          + {/if} + {/each} +
          + {/if}
          diff --git a/integrations/bricks/admin-app/src/components/TypographyTab.svelte b/integrations/bricks/admin-app/src/components/TypographyTab.svelte index bc61707a..bc207ac3 100644 --- a/integrations/bricks/admin-app/src/components/TypographyTab.svelte +++ b/integrations/bricks/admin-app/src/components/TypographyTab.svelte @@ -17,6 +17,7 @@ import TextField from './TextField.svelte'; import NumberField from './NumberField.svelte'; import TypographyPreview from './TypographyPreview.svelte'; + import AdvancedSection from './AdvancedSection.svelte'; const SECTION = 'typography'; const defaults = meta.defaults?.[SECTION] ?? {}; @@ -25,12 +26,23 @@ /** ucfirst() helper, mirrors the legacy label munging. */ const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1); + + /** Basic families: body and heading only. */ + const basicFamilyKeys = ['body', 'heading']; + const basicFamilies = Object.fromEntries( + Object.entries(families).filter(([name]) => basicFamilyKeys.includes(name)) + ); + + /** Advanced families: everything except body and heading. */ + const advancedFamilies = Object.fromEntries( + Object.entries(families).filter(([name]) => !basicFamilyKeys.includes(name)) + );

          Font Families

          - {#each Object.entries(families) as [name, defaultStack] (name)} + {#each Object.entries(basicFamilies) as [name, defaultStack] (name)} -

          Scale Multipliers

          -
          - - -
          + +

          Additional Font Families

          +
          + {#each Object.entries(advancedFamilies) as [name, defaultStack] (name)} + + {/each} +
          + +

          Scale Multipliers

          +
          + + +
          +