staffa 0.8.0 → 0.8.1

package/dist/staffa.esm.js

@@ -1 +1 @@
-import C from"aberdeen";var he="staffa:darkMode",Ae=C.proxy({value:qe()});function qe(){try{let e=localStorage.getItem(he);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function Be(e){Ae.value=e;try{e===void 0?localStorage.removeItem(he):localStorage.setItem(he,e?"dark":"light")}catch{}}function Oe(e=!1){let t=Ae.value;return t===void 0&&!e?C.darkMode():t}C(()=>{Oe()?C.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#0e0f12 --s-text:#e9eaec",".s-s.neutral":"--s-bg:#191b1f --s-text:#e9eaec",".s-s.neutral .s-s.neutral":"--s-bg:#23262b"}):C.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#eef0f3 --s-text:#1d1f24",".s-s.neutral, .s-s.neutral":"--s-bg:#ffffff --s-text:#1d1f24",".s-s.neutral .s-s.neutral":"--s-bg:#f6f7f9"})});C.setSpacingCssVars(1.1);C.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 p:$3 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased background-color:$s-bg text:$s-text",a:"color: $s-link-fg; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select, optgroup":"font:inherit color:inherit","input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image],[type=submit],[type=button],[type=reset],[type=hidden])), textarea, select":"background:$s-bg border: 1px solid $s-faint; r:$s-radius-sm padding: 0.45em 0.65em; max-width:100%","input:where([type=checkbox],[type=radio])":"width:1.15em height:1.15em cursor:pointer","input[type=range]":"appearance:none background:transparent cursor:pointer vertical-align:middle","input[type=range]::-webkit-slider-runnable-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-progress":"height:4px r:99px background:$s-accent","input[type=range]::-webkit-slider-thumb":"appearance:none width:16px height:16px margin-top:-6px r:50% background:$s-accent","input[type=range]::-moz-range-thumb":"width:16px height:16px border:0 r:50% background:$s-accent","input[type=file]":"cursor:pointer",progress:"appearance:none border:0 height:6px r:99px background:$s-faint overflow:hidden vertical-align:middle","progress::-webkit-progress-bar":"background:$s-faint r:99px","progress::-webkit-progress-value":"background:$s-accent r:99px","progress::-moz-progress-bar":"background:$s-accent r:99px",meter:"vertical-align:middle",fieldset:"border: 1px solid $s-faint; r:$s-radius-sm padding:$2 min-width:0",legend:"padding: 0 $1; font-weight:600","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-text, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-text, $s-bg 92%); p:$3 r: $s-radius; overflow:auto","pre code":"background:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $s-faint;","::placeholder":"color: $s-muted; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-muted font-size:0.9em","@media (prefers-reduced-motion: reduce)":{"*, *::before, *::after":"transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;"},":root":"--s-primary:#00a884 --s-danger:#dc5b41 --s-success:#00a884 --s-warning:#ef6b00 --s-link:#3f8cd8 --s-radius-sm:6px --s-radius:12px --s-radius-lg:18px --s-focus: color-mix(in srgb, $s-primary 38%, transparent); --s-gradient: linear-gradient(135deg, color-mix(in oklab, $s-primary, white 16%), color-mix(in oklab, $s-primary, black 14%));",":root, .s-s.neutral":"--s-accent:$s-primary --s-link-fg:$s-link",".s-s:not(.neutral)":"--s-bg:$s-primary border:0 --s-text:#eee --s-accent:#fff --s-link-fg:#eef --s-muted: color-mix(in srgb, #fff 70%, transparent); --s-faint: color-mix(in srgb, #fff 30%, transparent);",".s-s.danger":"--s-bg:$s-danger",".s-s.success":"--s-bg:$s-success",".s-s.warning":"--s-bg:$s-warning",".s-s.link":"--s-bg:$s-link",".s-s.primary":"--s-bg:$s-primary",":root, .s-s":"--s-muted: color-mix(in oklab, $s-text, $s-bg 42%); --s-faint: color-mix(in oklab, $s-text, $s-bg 80%); color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",".s-s, body":"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));",".s-s":"r:$s-radius",":where(.s-s.neutral)":"border: 1px solid $s-faint;",".s-s::-webkit-scrollbar, .s-s ::-webkit-scrollbar":"width:10px height:10px",".s-s::-webkit-scrollbar-track, .s-s ::-webkit-scrollbar-track":"background:transparent",".s-s::-webkit-scrollbar-thumb, .s-s ::-webkit-scrollbar-thumb":"background:$s-faint border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s.shadow.neutral:not(.s-btn)":"box-shadow: 0 4px 14px rgba(0,0,0,0.13);",".s-s.extra-shadow.neutral:not(.s-btn)":"box-shadow: 0 18px 50px rgba(0,0,0,0.28);",".s-s.shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 4px 14px color-mix(in srgb, $s-bg 30%, transparent);",".s-s.extra-shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 14px 40px color-mix(in srgb, $s-bg 40%, transparent);",".s-s.no-shadow":"box-shadow: none !important;",".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined":"--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",".s-s:not(.neutral).tonal":"background: color-mix(in srgb, $s-bg 15%, transparent); border: 1px solid $s-faint;",".s-s:not(.neutral).outlined":"background: transparent; border: 1px solid color-mix(in srgb, $s-bg 45%, transparent);",".s-s:not(.neutral) .s-s.tonal, .s-s:not(.neutral) .s-s.outlined":"--s-text:#fff --s-accent:#fff --s-link-fg:#fff background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%)); border-color: transparent;"});C.insertGlobalCss({".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after":"transition: none !important; animation: none !important;"});if(typeof document<"u"&&typeof requestAnimationFrame=="function"){let e=document.documentElement;e.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.classList.remove("s-preload")))}C.insertGlobalCss({":disabled, [aria-disabled=true]":"opacity:0.45 filter:saturate(0.6) user-select:none",":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *":"pointer-events:none cursor:not-allowed"});var Fe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";C.insertGlobalCss({[`${Fe}`]:{"&":"margin:0","&:not(:first-child)":"margin-top:$3"},"h1, h2, h3, h4, h5, h6":{"&":"line-height:1.15 font-weight:700 text-wrap:balance","&:not(:first-child)":"margin-top:1.4em"},h1:"font-size:2em font-weight:800 letter-spacing:-0.022em",h2:"font-size:1.55em letter-spacing:-0.018em",h3:"font-size:1.3em letter-spacing:-0.011em",h4:"font-size:1.1em",h5:"font-size:0.95em letter-spacing:0.005em",h6:"font-size:0.8em fg:$s-muted text-transform:uppercase letter-spacing:0.07em","ul, ol":{"&":"padding-left:1.5em","> li:not(:first-child), li > &:not(:first-child)":"margin-top:$1"},blockquote:"border-left: 3px solid $s-faint; padding-left: $3; fg: $s-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-faint; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-faint;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-muted font-size:0.9em margin-top:$1 text-align:center"});import l from"aberdeen";import Te from"aberdeen";var Q=640,De=0;function B(e="s"){return`${e}-${++De}`}function u(e,...t){e!=null&&(typeof e=="function"?e(...t):Te("rich=",e))}var Ge="a[href], button, input, select, textarea, [tabindex]";function J(e,t){let n=o=>o instanceof HTMLElement&&!o.hasAttribute("disabled")&&o.getAttribute("aria-disabled")!=="true"&&o.tabIndex>=0&&o.getClientRects().length>0,i=(t?[...e.querySelectorAll(t)].find(n):void 0)??[...e.querySelectorAll(Ge)].find(n);return i?.focus(),i!=null}function F(e){queueMicrotask(()=>Te(e))}import O from"aberdeen";O.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-text user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&[aria-invalid=true]":"border-color:$s-danger"}});function D(e,t){let n=e.id??B("field"),i=()=>!!e.error;O("div.s-field",e.attrs,()=>{O(()=>{e.label!=null&&O(`label for=${n}`,()=>{u(e.label),e.required&&O("span.s-req aria-hidden=true #*")})}),t(n,i),O(()=>{e.help!=null&&!e.error&&O("div.s-help",()=>u(e.help))}),O(()=>{e.error&&O("div.s-error role=alert #",e.error)})})}function Z(e,t,n,i){O(`id=${t}`),e.name&&O(`name=${e.name}`),O(()=>{e.disabled&&O("disabled=true")}),O(()=>{e.required&&O("aria-required=true")}),O(()=>O("aria-invalid=",n()?"true":"false")),i&&O("bind=",i)}l.insertGlobalCss({".s-ac":{"&":"position:relative","> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","> .s-control:focus-within":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;","&[aria-invalid=true] > .s-control":"border-color:$s-danger",".s-chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em background: color-mix(in oklab, $s-bg, $s-text 10%); border: 1px solid $s-faint; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-text background:$s-faint",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .s-menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0","> .s-menu li":"margin:0",".s-option":"padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",".s-option[aria-selected=true]":"background: color-mix(in srgb, $s-text 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-muted"}});function je(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function We(e){let t=B("ac-menu"),n=l.proxy({query:"",open:!1,active:0}),i=()=>(typeof e.options=="function"?e.options():e.options).map(je),o=()=>{let c=e.bind?.value;return c==null||c===""?[]:Array.isArray(c)?c:[c]},r=c=>i().find(v=>v.value===c)?.label??c;if(!e.multi){let c=e.bind?l.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=l.peek(()=>r(c)))}let s=()=>{let c=new Set(o()),v=i();e.multi&&(v=v.filter(h=>!c.has(h.value)));let g=n.query.trim().toLowerCase();return g&&(v=v.filter(h=>h.label.toLowerCase().includes(g))),v},a=(c,v)=>{if(e.multi){let g=Array.isArray(e.bind?.value)?[...e.bind.value]:[];g.includes(c)||g.push(c),e.bind&&(e.bind.value=g),n.query=""}else e.bind&&(e.bind.value=c),n.query=r(c),n.open=!1;n.active=0,v?.focus()},d=c=>{if(!e.bind)return;let v=e.bind.value??[];e.bind.value=v.filter(g=>g!==c)};D(e,(c,v)=>{l("div.s-ac",e.inputAttrs,()=>{l(()=>l("aria-invalid=",v()?"true":"false"));let g;l("div.s-control",()=>{l("click=",()=>g?.focus()),l(()=>{if(e.multi)for(let h of o())l("span.s-chip",()=>{l("span #",l.peek(()=>r(h))),l("button type=button aria-label=",`Remove ${h}`,()=>{l("#\xD7"),l("click=",x=>{x.stopPropagation(),d(h),g?.focus()})})})}),g=l("input type=text role=combobox autocomplete=off",()=>{l(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&l("placeholder=",e.placeholder),e.disabled&&l("disabled=true"),e.required&&l("aria-required=true"),l("bind=",l.ref(n,"query")),l(()=>l("aria-expanded=",n.open?"true":"false")),l(()=>{let x=s()[n.active];l("aria-activedescendant=",n.open&&x?`${t}-opt-${n.active}`:"")}),l("input=",()=>{n.open=!0,n.active=0}),l("focus=",()=>{n.open=!0}),l("blur=",()=>{setTimeout(()=>A(),150)}),l("keydown=",h=>y(h,g))})}),l(()=>{if(!n.open)return;let h=s(),x=n.query.trim(),V=e.allowCustom!==!1&&x!==""&&!h.some(q=>q.label.toLowerCase()===x.toLowerCase());l("ul.s-menu.s-s.neutral.shadow role=listbox",`id=${t}`,()=>{h.forEach((q,N)=>{l("li.s-option role=option",`id=${t}-opt-${N}`,()=>{l(()=>l("aria-selected=",n.active===N?"true":"false")),l("#",q.label),l("mousedown=",le=>le.preventDefault()),l("click=",()=>a(q.value,g)),l("mousemove=",()=>{n.active=N})})}),V&&l("li.s-option.s-add role=option",()=>{l("#",`Add "${x}"`),l("mousedown=",q=>q.preventDefault()),l("click=",()=>a(x,g))}),h.length===0&&!V&&l("li.s-empty #No matches")})}),l(()=>{if(e.name)if(e.multi)for(let h of o())l("input type=hidden",()=>{l("name=",e.name),l("value=",h)});else l("input type=hidden",()=>{l("name=",e.name),l("value=",o()[0]??"")})})})});function y(c,v){let g=s(),h=g.length-1;if(c.key==="ArrowDown")c.preventDefault(),n.open=!0,n.active=Math.min(h,n.active+1);else if(c.key==="ArrowUp")c.preventDefault(),n.active=Math.max(0,n.active-1);else if(c.key==="Enter"){c.preventDefault();let x=g[n.active];x?a(x.value,v):e.allowCustom!==!1&&n.query.trim()?a(n.query.trim(),v):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open&&(c.preventDefault(),n.open=!1,e.multi||(n.query=r(o()[0]??"")));else if(c.key==="Backspace"&&e.multi&&n.query===""){let x=o();x.length&&d(x[x.length-1])}}function A(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?a(n.query.trim()):n.query=r(o()[0]??"")}}import R from"aberdeen";import m from"aberdeen";import*as k from"aberdeen/route";var ge={integer(e){if(!/^(0|-?[1-9]\d*)$/.test(e))return;let t=Number(e);return Number.isSafeInteger(t)?t:void 0}};function oe(e){let t=String(e).replace(/\/+$/,"");return t.startsWith("/")||(t=`/${t}`),t}function de(e){let t=oe(e);return t==="/"?[]:t.slice(1).split("/")}function Ne(e,t){let n=de(e),i=n.map((o,r)=>{if(!o.startsWith("[")||!o.endsWith("]"))return{kind:"lit",value:o};let s=/^\[\.\.\.([A-Za-z_$][\w$]*)\]$/.exec(o);if(s){if(r!==n.length-1)throw new Error(`Staffa: "${o}" must be the last segment of route "${e}"`);return{kind:"rest",name:s[1]}}let a=/^\[([A-Za-z_$][\w$]*)(?:=([A-Za-z_$][\w$]*))?\]$/.exec(o);if(!a)throw new Error(`Staffa: malformed param "${o}" in route "${e}"`);let[,d,y]=a;if(y&&!(y in ge))throw new Error(`Staffa: unknown matcher "${y}" in route "${e}" (known: ${Object.keys(ge).join(", ")})`);return{kind:"param",name:d,matcher:y}});return{key:e,segs:i,draw:t}}function Ke(e){try{return decodeURIComponent(e)}catch{return e}}function Me(e,t){let n={};for(let i=0;i<e.segs.length;i++){let o=e.segs[i];if(o.kind==="rest")return i>=t.length?null:(n[o.name]=t.slice(i).join("/"),n);if(i>=t.length)return null;let r=t[i];if(o.kind==="lit"){if(r!==o.value)return null}else if(o.matcher){let s=ge[o.matcher](r);if(s===void 0)return null;n[o.name]=s}else n[o.name]=Ke(r)}return e.segs.length===t.length?n:null}var Se=450,_e=300,Xe=1280,ce=24,Ue=360;m.insertGlobalCss({":root":`--s-panel-ms:${Se}ms`,".s-panels":"flex:1 min-width:0 min-height:0 position:relative overflow:hidden",".s-panel":{"&":"position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column visibility:visible transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility 0s;","> .s-content":"flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3","> .s-content.s-scroll-y":"margin-right:$3","&.s-panel-sep::before":`content:'' position:absolute left:-${ce/2}px top:0.6rem bottom:0.6rem width:1px background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);`,"&.s-panel-enter":"opacity:0 transition:none transform: translateX(8cqw);","&.s-panel-closing":"opacity:0 pointer-events:none transform: translateX(8cqw);","&.s-panel-hidden":"opacity:0 visibility:hidden transform: translateX(-8cqw); transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility var(--s-panel-ms);"},".s-main.s-shell-snap .s-panel":"transition:none",[`@container (max-width: ${Q}px)`]:{".s-panel > .s-content.s-scroll-y":"margin-right:0"},".s-panel-loading":{"&":"position:absolute inset:0 display:flex align-items:center justify-content:center gap:$1 pointer-events:none",i:"width:0.5rem height:0.5rem r:50% background:$s-muted opacity:0.45 animation: s-panel-pulse 1s ease-in-out infinite;","i:nth-child(2)":"animation-delay:0.15s","i:nth-child(3)":"animation-delay:0.3s"},"@keyframes s-panel-pulse":{"0%, 100%":"opacity:0.25 transform:scale(0.8)","50%":"opacity:0.7 transform:scale(1)"}});var P=null,ue=class{compiled;opts;live=[];byId=new Map;nextId=1;$ids=m.proxy({});$state=m.proxy({paths:[],topId:0});containerEl;lastBodyW=-1;layoutQueued=!1;timers=new Set;constructor(t){if(P)throw new Error("Staffa: only one routed S.main() (one with `routes`) can be active at a time");P=this,this.opts=t,this.compiled=Object.entries(t.routes).map(([i,o])=>Ne(i,o));let n=k.setGuard((i,o)=>{let r=n?n(i,o):!0;return r===!1?!1:r===!0?this.checkChange(i):r.then(s=>s===!1?!1:this.checkChange(i))});m(()=>{let i=this.computeTarget();m.peek(()=>this.propose(i))}),this.interceptLinks(),this.watchTitle(),m.clean(()=>{for(let i of this.timers)clearTimeout(i);this.timers.clear(),k.setGuard(n),P===this&&(P=null)})}resolve(t){let n=de(t);for(let i of this.compiled){let o=Me(i,n);if(o)return{draw:i.draw,params:o}}return{draw:this.opts.notFound??Je,params:{}}}matches(t){let n=de(t);return this.compiled.some(i=>Me(i,n)!=null)}deriveStack(t){let n=de(t),i=[];for(let o=1;o<n.length;o++){let r="/"+n.slice(0,o).join("/");this.matches(r)&&i.push(r)}return i.push(oe(t)),i}targetFor(t,n){return Array.isArray(n)?n.map(String).concat(oe(t)):this.deriveStack(t)}computeTarget(){return this.targetFor(k.current.path,k.current.state.panels)}checkChange(t){let n=this.removedBy(this.targetFor(t.path,t.state.panels));return n.length?Ye(n):!0}paths(){return this.live.map(t=>t.path)}removedBy(t){return this.live.filter(n=>!t.includes(n.path))}propose(t){Qe(this.paths(),t)||this.commit(t,m.peek(k.current,"nav"))}commit(t,n){let i=new Map(this.live.map(r=>[r.path,r])),o=[];for(let r of t){let s=i.get(r);if(s){i.delete(r),o.push(s);continue}let a=this.createEntry(r,o.length);n!=="load"&&n!=="back"&&(a.enter=!0),o.push(a),this.byId.set(a.id,a)}for(let r of i.values())this.beginClose(r);this.live=o,m.merge(this.$state,{paths:this.paths(),topId:this.live.length?this.live[this.live.length-1].id:0});for(let r of this.live)this.$ids[String(r.id)]=r.order;this.scheduleLayout()}createEntry(t,n){let{draw:i,params:o}=this.resolve(t),r={id:this.nextId++,order:n,path:t,draw:i,$ui:m.proxy({holding:!1}),layout:"medium",width:0};return r.$page=m.proxy({params:o,path:t,close:()=>this.closePanelAt(this.live.indexOf(r))}),r}beginClose(t){t.closing=!0;let n=t.el,i=()=>{this.byId.has(t.id)&&(this.byId.delete(t.id),delete this.$ids[String(t.id)])};n&&(n.classList.add("s-panel-closing"),n.setAttribute("inert",""),n.addEventListener("transitionend",r=>{r.target===n&&r.propertyName==="opacity"&&i()}));let o=setTimeout(()=>{this.timers.delete(o),i()},Se+80);this.timers.add(o)}goBackTo(t){return k.back({path:t[t.length-1]},{state:{panels:t.slice(0,-1)}})}closeDownTo(t){return t<0||t>=this.live.length-1?Promise.resolve(!1):this.goBackTo(this.paths().slice(0,t+1))}closeTop(){return this.closeDownTo(this.live.length-2)}closePanelAt(t){if(t<0||t>=this.live.length)return Promise.resolve(!1);if(t===this.live.length-1)return this.closeTop();let n=this.paths().filter((i,o)=>o!==t);return Promise.resolve(k.go({path:n[n.length-1],search:m.peek(()=>({...k.current.search})),hash:m.peek(k.current,"hash"),state:{panels:n.slice(0,-1)}}))}closeByPath(t){let n=oe(t);return this.closePanelAt(this.live.findIndex(i=>i.path===n))}closePanelEl(t){return this.closePanelAt(this.live.findIndex(n=>n.el===t))}navigate(t,n,i=!1){let o;try{o=new URL(t,location.href)}catch{return}let r=oe(o.pathname),s=Object.fromEntries(new URLSearchParams(o.search)),a=o.hash,d=this.live.findIndex(A=>A.path===r);if(d>=0&&d<this.live.length-1){this.closeDownTo(d);return}if(d>=0){if(o.search===location.search&&(o.hash||"")===(location.hash||""))return;k.go({path:r,search:s,hash:a,state:{panels:this.paths().slice(0,-1)}});return}let y=n<0?this.deriveStack(r).slice(0,-1):this.paths().slice(0,i?n:n+1);k.go({path:r,search:s,hash:a,state:{panels:y}})}pushPath(t,n){this.navigate(t,this.live.length-1,n)}interceptLinks(){k.interceptLinks((t,n)=>{let i=n.closest(".s-panel"),o=i?this.live.findIndex(r=>r.el===i):-1;return this.navigate(t.href,o,n.getAttribute("data-panel")==="replace"),!0})}watchTitle(){let t=document.title;m(()=>{let i=this.byId.get(this.$state.topId)?.$page.title,o=typeof this.opts.title=="string"?this.opts.title:void 0,r=i&&o?`${i} \xB7 ${o}`:i||o;r&&(document.title=r)}),m.clean(()=>{document.title=t})}drawStack(){let t=m("div.s-panels role=main",()=>{m.onEach(this.$ids,(n,i)=>this.drawPanel(Number(i)),(n,i)=>[n,Number(i)])});if(this.containerEl=t,typeof ResizeObserver<"u"){let n=new ResizeObserver(()=>this.layout());n.observe(t);let i=t.parentElement?.parentElement;i&&n.observe(i),m.clean(()=>n.disconnect())}m.clean(()=>{this.containerEl===t&&(this.containerEl=void 0)}),this.scheduleLayout()}drawPanel(t){let n=this.byId.get(t);if(!n)return;let i=m("section.s-panel",()=>{let r=m("div.s-content",()=>{n.draw(n.$page),k.persistScroll(n.path)});Ze(r),m(()=>{!n.$page.loading||n.$ui.holding||m("div.s-panel-loading aria-hidden=true",()=>{m("i"),m("i"),m("i")})})}),o=m.peek(n.$page,"layout");n.layout=o==="small"||o==="large"?o:"medium",n.el=i,n.placed=!1,i.style.transition="none",m.clean(()=>{n.el===i&&(n.el=void 0)}),m(()=>{n.$page.loading,this.scheduleLayout()}),this.scheduleLayout()}scheduleLayout(){this.layoutQueued||(this.layoutQueued=!0,requestAnimationFrame(()=>{this.layoutQueued=!1,this.layout()}))}layout(){let t=this.containerEl,n=t?.parentElement,i=n?.parentElement,o=t?.closest(".s-main");if(!t||!n||!i||!o)return;let r=this.live.length;if(!r||this.live.some(f=>!f.el))return;let s=i.getBoundingClientRect().width;if(!s)return;let a=this.opts.stacking!==!1,d=this.lastBodyW!==s;d&&(this.lastBodyW=s,o.classList.add("s-shell-snap"));let y=0;for(let f of n.children)f!==t&&(y+=f.getBoundingClientRect().width);let A=Math.max(0,Math.min(Xe,s)-y),c=Math.max(0,s-y),v=(A-ce)/2,g=v>=Ue?v:A,h=f=>f.layout==="small"?g:f.layout==="large"?c:A,x=r-1,V=h(this.live[x]);if(a)for(let f=r-2;f>=0;f--){let M=V+ce+h(this.live[f]);if(M>c)break;V=M,x=f}let q=Math.min(c,Math.max(A,V));for(let f=x;f<r;f++)this.live[f].width=h(this.live[f]);for(let f of this.live)f.width||(f.width=h(f));o.style.setProperty("--s-shell-w",`${y+q}px`);let N=[],le=0;for(let f=0;f<r;f++){let M=this.live[f],ne=M.el,Y=f>=x;Ve(ne,Y?le:0,M.width),Y&&(le+=M.width+ce),ne.classList.toggle("s-panel-sep",Y&&f>x),ne.classList.toggle("s-panel-hidden",!Y),ne.toggleAttribute("inert",!Y),!M.placed&&(N.push(M),!m.peek(M.$page,"loading")||M.holdDone?M.$ui.holding=!1:M.$ui.holding||(M.$ui.holding=!0,this.holdEnter(M)),M.enter&&Y&&ne.classList.add("s-panel-enter"))}(N.length||d)&&t.offsetWidth,d&&o.classList.remove("s-shell-snap");for(let f of N)f.$ui.holding||(f.el.style.transition="",f.el.classList.remove("s-panel-enter"),f.enter=!1,f.placed=!0)}holdEnter(t){let n=setTimeout(()=>{this.timers.delete(n),t.holdDone=!0,t.$ui.holding&&(t.$ui.holding=!1,this.scheduleLayout())},_e);this.timers.add(n)}};function Ve(e,t,n){e.style.left=`${t}px`,e.style.width=`${n}px`}function Ye(e){let t=[...e].reverse(),n=0,i=()=>{for(;n<t.length;){let o=m.peek(t[n++].$page,"requestClose");if(!o)continue;let r;try{r=o()}catch(s){return console.error(s),!1}if(r===!1)return!1;if(r!==!0)return Promise.resolve(r).then(s=>s===!1?!1:i())}return!0};return i()}function Qe(e,t){return e.length===t.length&&e.every((n,i)=>n===t[i])}function Je(e){m("p fg:$s-muted",()=>m("#",`No page at ${e.path}`))}function Ze(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),m.clean(()=>n.disconnect())}var et={push(e){be().pushPath(e,!1)},replace(e){be().pushPath(e,!0)},close(e){let t=be();return e==null?t.closeTop():t.closeByPath(e)},get stack(){return P?P.$state.paths:[]}};function be(){if(!P)throw new Error("Staffa: S.panels needs a routed S.main() (one with `routes`) to be mounted");return P}function Le(e){let t=e?.closest(".s-panel");return!P||!t?(console.warn("Staffa: `close: true` needs to be drawn inside a panel of a routed S.main()"),Promise.resolve(!1)):P.closePanelEl(t)}R.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column overflow:hidden r: $s-radius-lg; position:relative","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0","> div":"p:$3 gap:$3",".s-box-close":"flex-shrink:0 margin-left:auto display:flex align-items:center justify-content:center width:1.6rem height:1.6rem p:0 border:0 background:transparent cursor:pointer fg:$s-muted font-size:0.95rem line-height:1 r:$s-radius-sm transition: color 0.12s, background 0.12s;",".s-box-close:hover":"fg:$s-text background: color-mix(in srgb, $s-text 8%, transparent);","> .s-box-close":"position:absolute top:$2 right:$2 z-index:1"}});function tt(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;R("section.s-box.s-s.neutral.shadow",t.attrs,()=>{R(()=>{t.header!=null?R("header.s-s.neutral",t.headerAttrs,()=>{u(t.header),t.close&&Ce(t.close)}):t.close&&Ce(t.close)}),R("div",t.contentAttrs,()=>{u(t.content)}),R(()=>{t.footer!=null&&R("footer.s-s.neutral",t.footerAttrs,()=>u(t.footer))})})}function Ce(e){R("button.s-box-close type=button aria-label=Close",()=>{R("click=",t=>{typeof e=="function"?e():Le(t.currentTarget)}),R("span aria-hidden=true #\u2715")})}import G from"aberdeen";G.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:450 line-height:1.1 white-space:nowrap cursor:pointer text-decoration:none padding: $m2 $m3; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline: 3px solid $s-focus; outline-offset: 1px;","&:hover":"filter: brightness(1.06)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-bg 24%, transparent);","&.neutral:hover":"filter:none background: color-mix(in srgb, $s-text 8%, $s-bg);","&:active:not(:disabled)":"transform: translateY(1px)","&.small, .small > &":"padding: $m1 $m2; font-size:0.85em border-radius:$s-radius-sm","&.large, .large > &":"font-size:1.4em border-radius:$s-radius-lg"}});function S(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button";G(`${n}.s-btn.s-s.shadow`,t.attrs,()=>{t.href!=null?(G(`href=${t.href} role=button`),t.disabled&&G("aria-disabled=true")):(G("type=",t.type??"button"),t.disabled&&G("disabled=true")),t.ariaLabel&&G("aria-label=",t.ariaLabel),t.click&&G("click=",t.click),u(t.icon),u(t.content)})}import ve from"aberdeen";import Pe from"aberdeen";Pe.insertGlobalCss({".s-bgroup":{"&":"display:inline-flex align-items:stretch","&.s-spaced":"gap:$2 flex-wrap:wrap","&.s-vertical":"flex-direction:column","&.s-attached":"gap:0","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)":"margin-left:-1px","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.s-attached.s-vertical > .s-btn:not(:first-child)":"margin-top:-1px","&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible":"z-index:1"}});function K(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;Pe(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let i of e.buttons)S(i);u(e.content)})}function nt(e){ve(()=>{let t=e.bind.value;K({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,i])=>({content:i,ariaLabel:typeof i=="function"?n:void 0,attrs:t===n?".primary":".neutral",click:()=>{e.bind.value=e.allowDeselect&&t===n?void 0:n}}))})}),e.name&&ve(()=>ve(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import E from"aberdeen";E.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.45 filter:saturate(0.6)",input:"cursor:inherit m:0"}});function ot(e={}){let t=e.id??B("check");E("div.s-check",e.attrs,()=>{E(`label for=${t}`,()=>{E("input type=checkbox",e.inputAttrs,()=>{E(`id=${t}`),e.name&&E(`name=${e.name}`),e.checked&&!e.bind&&E("checked=true"),e.change&&E("change=",e.change),E(()=>{e.disabled&&E("disabled=true")}),E(()=>{e.required&&E("aria-required=true")}),e.bind&&E("bind=",e.bind)}),E(()=>{e.label!=null&&u(e.label),e.required&&E("span.s-req aria-hidden=true #*")})}),E(()=>{e.help!=null&&!e.error&&E("div.s-help",()=>u(e.help))}),E(()=>{e.error&&E("div.s-error role=alert #",e.error)})})}import _ from"aberdeen";_.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 flex-wrap:wrap margin-top:$1"}});function it(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;_("form.s-form",t.attrs,()=>{_(()=>{_(".grid=",t.layout==="grid")}),_("submit=",n=>{if(n.preventDefault(),t.submit){let i=new FormData(n.target),o={};for(let r of new Set(i.keys())){let s=i.getAll(r);o[r]=s.length===1?s[0]:s}t.submit(o,n)}}),u(t.content),_(()=>{t.actions&&_("footer",t.actionsAttrs,()=>u(t.actions))})})}import p from"aberdeen";import T from"aberdeen";import{matchCurrent as at}from"aberdeen/route";import rt from"aberdeen";var ie={size:24,color:"currentColor",strokeWidth:2,cap:"round",join:"round"};function st(e,t){let n=t.size??ie.size,i=rt('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none',"width=",n,"height=",n,"stroke=",t.color??ie.color,"stroke-width=",t.strokeWidth??ie.strokeWidth,"stroke-linecap=",t.cap??ie.cap,"stroke-linejoin=",t.join??ie.join,t.attrs);i.innerHTML=e}function ee(e){return(t={})=>st(e,t)}var ye=ee('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>'),Re=ee('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>');T.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 r:$s-radius-lg overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px)",".s-menu-item":"display:flex align-items:center gap:$2 w:100% outline:0 padding: $m2 0; line-height:1.1 r:$s-radius cursor:pointer text-align:left font-weight:450 font-size:0.9em border:0 background:transparent fg:$s-text text-decoration:none transition: color 0.12s, transform 0.12s, text-shadow 0.12s;",".s-menu-item:focus-visible:not([aria-current=page]), .s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page])":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",".s-menu-item[aria-current=page]":"color:$s-accent filter:none",".s-menu-item[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"flex-shrink:0","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-faint 18%, $s-faint 82%, transparent);"});function pe(e,t){T("keydown=",n=>{if(n.key==="Enter"&&n.target.tagName==="A"){queueMicrotask(()=>t?.());return}if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let o=[...n.currentTarget.querySelectorAll(".s-menu-item")].filter(d=>d.getAttribute("aria-disabled")!=="true");if(!o.length)return;let r=o.indexOf(document.activeElement),s=n.key==="ArrowUp"?-1:1,a=n.key==="Home"?0:n.key==="End"?o.length-1:r<0?s>0?0:o.length-1:(r+s+o.length)%o.length;o[a].focus()});for(let n of e){if(typeof n=="string"||typeof n=="function"){u(n);continue}if("separator"in n){T("hr.s-menu-sep");continue}T(n.href?"a.s-menu-item":"button.s-menu-item type=button",n.attrs,()=>{n.href&&(T("href=",n.href),n.target&&T("target=",n.target),T(()=>{at(n.href)&&T("aria-current=page")})),n.disabled&&T("aria-disabled=true"),T("click=",i=>{if(n.disabled){i.preventDefault();return}t?.(),n.click?.(i)}),n.icon&&T("span.s-menu-icon",()=>u(n.icon)),u(n.label)})}}var W=T.proxy({opts:null});function j(){let e=W.opts?.anchor;W.opts=null,e?.focus()}function re(e){let t=W.opts;return t!=null&&(e==null||t.anchor===e)}function fe(e){re(e)&&j()}function lt(e,t){let n=e.offsetWidth,i=e.offsetHeight,o=window.innerWidth,r=window.innerHeight,s=4,a=t.left;a+n>o-8&&(a=Math.max(8,t.right-n));let d=t.bottom+s;d+i>r-8&&t.top-i-s>=8&&(d=t.top-i-s),e.style.left=Math.max(8,a)+"px",e.style.top=Math.max(8,d)+"px"}F(()=>{let e=W.opts;if(!e)return;let t=T("div.s-menu-list.s-s.neutral.shadow create=hidden destroy=hidden",e.dropdownAttrs,()=>{pe(e.items,j)}),n=o=>{let r=o.target;!t.contains(r)&&(e.closeOnAnchorClick||!e.anchor.contains(r))&&j()},i=o=>{(o.key==="Escape"||o.key==="Tab")&&(o.preventDefault(),j())};document.addEventListener("click",n,!0),document.addEventListener("keydown",i,!0),T.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",i,!0)}),requestAnimationFrame(()=>{if(!document.body.contains(t))return;let o=e.at?{left:e.at.x,right:e.at.x,top:e.at.y,bottom:e.at.y}:e.anchor.getBoundingClientRect();lt(t,o),J(t,".s-menu-item[aria-current=page]")})});function se(e){return W.opts=e,j}function dt(e){let t=null;T.clean(()=>{W.opts?.anchor===t&&j()}),T("contextmenu=",n=>{n.preventDefault(),t=n.currentTarget,se({items:e.items,anchor:t,at:{x:n.clientX,y:n.clientY},closeOnAnchorClick:!0,dropdownAttrs:e.dropdownAttrs})})}function ct(e){let t=null;T.clean(()=>{W.opts?.anchor===t&&j()}),S({icon:()=>ye({size:"1.4em"}),...e.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral",...e.button,click:n=>{if(t=n.currentTarget,W.opts?.anchor===t){j();return}se({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}import b from"aberdeen";import X from"aberdeen";function xe(e={}){D(e,(t,n)=>{X("input.s-input",e.inputAttrs,()=>{X("type=",e.type??"text"),e.placeholder!=null&&X("placeholder=",e.placeholder),e.autocomplete!=null&&X("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&X("value=",e.value),e.input&&X("input=",e.input),e.change&&X("change=",e.change),Z(e,t,n,e.bind)})})}b.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) r: $s-radius-lg; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0 flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var U=b.proxy({}),we=0,He=b.derive(()=>{let e=Object.keys(U);if(e.length)return e[e.length-1]});function $e(){return He.value!=null}F(()=>{b.onEach(U,({resolve:e,opts:t},n)=>{let i=()=>{delete U[n]};b.clean(()=>{t.onClose?.(),e()});let o=b.derive(()=>He.value!=n);b("div.s-backdrop create=hidden destroy=hidden .hidden=",o,"click=",()=>{t.allowCancel!==!1&&i()});let r=b("div.s-dialog.neutral.s-s.extra-shadow create=hidden destroy=hidden",t.attrs,()=>{b(()=>{t.header!=null&&b("header.s-s.neutral",t.headerAttrs,()=>u(t.header))}),b("div",t.contentAttrs,()=>{u(t.content,i)}),b(()=>{t.footer!=null&&b("footer.s-s.neutral",t.footerAttrs,()=>u(t.footer))})});requestAnimationFrame(()=>{document.body.contains(r)&&J(r)})})});function me(e){we||document.addEventListener("keydown",n=>{if(n.key!=="Escape"||n.defaultPrevented)return;let i=b.unproxy(U);for(let o=we;o>0;o--)if(i[o]){n.preventDefault(),i[o].opts.allowCancel!==!1&&delete U[o];break}});let t=++we;return e.cancelWithScope!==!1&&b.clean(()=>{delete U[t]}),new Promise(n=>{U[t]={resolve:n,opts:e}})}function ut(e,t={}){return me({header:"Alert",allowCancel:!0,content:n=>{b("p",()=>{b("#",e)}),K({layout:"spaced",attrs:"align-self:flex-end",content:()=>{S({content:"OK",click:n})}})},...t})}function pt(e,t={}){return new Promise(n=>{let i=!1;me({header:"Confirm",allowCancel:!0,content:o=>{b("p",()=>{b("#",e)}),K({layout:"spaced",attrs:"align-self:flex-end",content:()=>{S({content:"Cancel",attrs:".neutral",click:o}),S({content:"OK",click:()=>{i=!0,o()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function ft(e,t="",n={}){return new Promise(i=>{let o=null;me({header:"Input",allowCancel:!0,content:r=>{b("p",()=>{b("#",e)});let s=b.proxy({value:t});b("form display:contents",()=>{b("submit=",a=>{a.preventDefault(),o=s.value,r()}),xe({bind:b.ref(s,"value")}),K({layout:"spaced",attrs:"align-self:flex-end",content:()=>{S({content:"Cancel",attrs:".neutral",type:"button",click:r}),S({content:"OK",type:"submit"})}})})},...n,onClose:()=>{i(o),n.onClose?.()}})})}p.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","body > &":"margin: calc(-1 * $3)","> header":"border:0 border-bottom: 1px solid $s-faint; r:0 position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-faint; fg:$s-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-header-icon":"display:flex align-items:center font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;","> header .s-titles":"display:flex flex-direction:column min-width:0 flex:1","> header .s-title":"font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%","> header .s-subtitle":"fg:$s-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-menu":"display:flex align-items:center gap:$2",".s-body":"flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center position:relative",".s-body-inner":"flex:1 min-width:0 display:flex flex-direction:row min-height:0","&.s-nav-right .s-body-inner":"flex-direction:row-reverse",".s-nav-sep":"width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-body main":"flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column transition: transform 0.3s ease;",".s-body main.s-slide-in":"transform: translateX(100%); transition:none",".s-body main > .s-content":"width:100% flex:1 p:$3",".s-body main.s-scroll-y":"margin-right:$3","&.s-routed > .s-body > .s-body-inner":"max-width: var(--s-shell-w, 100%);","&.s-routed > header > .s-bar":"max-width: var(--s-shell-w, 100%);","&.s-routed > footer > .s-bar":"max-width: var(--s-shell-w, 100%);","&.s-routed > .s-body > .s-body-inner, &.s-routed > header > .s-bar, &.s-routed > footer > .s-bar":"transition: max-width var(--s-panel-ms) ease;","&.s-routed.s-shell-snap > .s-body > .s-body-inner, &.s-routed.s-shell-snap > header > .s-bar, &.s-routed.s-shell-snap > footer > .s-bar":"transition:none"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1"},".s-nav-page":{"&":"position:absolute inset:0 z-index:5 display:flex flex-direction:column overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 transition: transform 0.3s ease;","&.s-nav-page-off":"transform:translateX(-100%) pointer-events:none",".s-menu-item":"padding: $2 $3; min-height:3rem font-size:1.05em gap:$3"},".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:none",".s-main.s-nav-btn-only .s-nav-panel":"display:none",".s-main.s-nav-btn-only .s-nav-trigger":"display:flex",[`@container (max-width: ${Q}px)`]:{".s-main.s-nav-left .s-nav-panel, .s-main.s-nav-right .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:flex",".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0",".s-main .s-body main.s-scroll-y":"margin-right:0"}});function mt(e={}){let t=e.nav,n=e.navPosition??"left",i=t!=null&&t.items.length>0,o=i?n==="button"?".s-nav-btn-only":`.s-nav-${n}`:"",r=p.proxy({open:!1}),s=e.routes;if(s!=null&&e.content!=null)throw new Error("Staffa: S.main() takes either `content` or `routes`, not both");let a=s?new ue({...e,routes:s,title:e.title}):null,d=a?null:e.maxWidth,y=p(`div.s-main${o}${a?".s-routed":""}`,e.attrs,()=>{p(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||i)&&p("header.s-s.neutral",e.topbarAttrs,()=>{p("div.s-bar",()=>{p(()=>{d!=null&&p("max-width:",d)}),p(()=>{i&&p("div.s-nav-trigger",()=>ht(t,r))}),p(()=>{e.icon!=null&&p("div.s-header-icon",()=>u(e.icon))}),p("div.s-titles",()=>{p(()=>{e.title!=null&&p("div.s-title",()=>u(e.title))}),p(()=>{e.subtitle!=null&&p("div.s-subtitle",()=>u(e.subtitle))})}),p(()=>{e.menu&&p("div.s-menu",()=>u(e.menu))})})})}),p("div.s-body",()=>{p("div.s-body-inner",()=>{p(()=>{d!=null&&p("max-width:",d)}),i&&n!=="button"&&(p(`nav.s-nav-panel.s-nav-${n}`,e.navAttrs,()=>{pe(t.items)}),p("div.s-nav-sep aria-hidden=true")),vt(e,a)}),p(()=>{i&&r.open&&bt(t,e.navPageAttrs,r)})}),p(()=>{e.footer!=null&&p("footer",()=>{p("div.s-bar",()=>{p(()=>{d!=null&&p("max-width:",d)}),u(e.footer)})})})});if(i||a){let A=c=>{if(c.key!=="Escape"||c.defaultPrevented||$e()||re())return;let v=y.querySelector(".s-nav-trigger button");if(r.open){c.preventDefault(),r.open=!1,v?.focus();return}if(a&&a.$state.paths.length>1){c.preventDefault(),a.closeTop();return}if(!i)return;let g=y.querySelector(".s-nav-panel");if(g?.offsetParent!=null){let h=g.querySelector("[aria-current=page]")??g.querySelector(".s-menu-item:not([aria-disabled=true])");h&&(c.preventDefault(),h.focus());return}v&&(c.preventDefault(),v.click())};document.addEventListener("keydown",A),p.clean(()=>document.removeEventListener("keydown",A))}}function ht(e,t){let n=null;p.clean(()=>{n&&fe(n)}),S({icon:()=>p(()=>(t.open?Re:ye)({size:"1.5em"})),ariaLabel:"Open navigation",attrs:".neutral .small",...e.button,click:i=>{n=i.currentTarget;let o=n.closest(".s-main");if(o!=null&&o.clientWidth<=Q){t.open=!t.open;return}re(n)?fe(n):se({items:e.items,anchor:n,dropdownAttrs:e.dropdownAttrs})}})}function bt(e,t,n){let i=!1,o=p("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off",t,()=>pe(e.items,()=>{i=!0,n.open=!1})),r=o.closest(".s-main"),s=o.parentElement?.querySelector(":scope > .s-body-inner"),a=s?.querySelector(":scope > main");if(s?.setAttribute("inert",""),r!=null&&typeof ResizeObserver<"u"){let d=new ResizeObserver(()=>{r.clientWidth>Q&&(n.open=!1)});d.observe(r),p.clean(()=>d.disconnect())}p.clean(()=>{s?.removeAttribute("inert"),i&&(a&&gt(a),r?.querySelector(".s-nav-trigger button")?.focus())}),requestAnimationFrame(()=>{document.body.contains(o)&&J(o,".s-menu-item[aria-current=page]")})}function gt(e){e.classList.add("s-slide-in"),e.offsetWidth,e.classList.remove("s-slide-in")}function vt(e,t){if(t){t.drawStack();return}let n=p("main",()=>{p("div.s-content",e.contentAttrs,()=>{u(e.content)})});yt(n)}function yt(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),p.clean(()=>n.disconnect())}import L from"aberdeen";L.insertGlobalCss({".s-select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-muted font-size:0.85em"}});function xt(e){D(e,(t,n)=>{L("div.s-select_wrap",e.inputAttrs,()=>{L("select.s-input",()=>{Z(e,t,n),L("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),L(()=>{let i=typeof e.options=="function"?e.options():e.options,o=e.bind?.value??"";e.placeholder!=null&&L("option",()=>{L("value= disabled=true hidden=true"),o||L("selected=true"),L("#",e.placeholder)});for(let r of i){let s=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};L("option",()=>{L("value=",s.value),s.value===o&&L("selected=true"),L("#",s.label)})}})})})})}import w from"aberdeen";var wt=ee('<path d="m15 18-6-6 6-6"/>'),$t=ee('<path d="m9 18 6-6-6-6"/>');w.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tabbar":"position:relative display:flex border-bottom: 1px solid $s-faint;",".s-tablist":"display:flex gap:$1 align-items:stretch flex:1 min-width:0 overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth margin-bottom:-1px",".s-tablist::-webkit-scrollbar":"display:none",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap border-bottom: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-text;",".s-tab:focus-visible":"outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabscroll":"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted transition: color 0.15s;",".s-tabscroll:hover":"fg:$s-text",".s-tabscroll-left":"left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",".s-tabscroll-right":"right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right":"display:flex",".s-tabpanel":"display:block"}});function kt(e){let t=B("tabs"),n=(r,s)=>r.id??String(s),i=e.bind??w.proxy(n(e.tabs[0]??{label:""},0));e.tabs.length>0&&!e.tabs.some((r,s)=>n(r,s)===w.peek(()=>i.value))&&(i.value=n(e.tabs[0],0));let o=(r,s)=>{r.disabled||(i.value=n(r,s))};w("div.s-tabs",e.attrs,()=>{w("div.s-tabbar",()=>{let r=w("div.s-tablist role=tablist",()=>{e.tabs.forEach((s,a)=>{let d=n(s,a),y=w("button.s-tab type=button role=tab",()=>{w(`id=${t}-tab-${d} aria-controls=${t}-panel-${d}`),w(()=>{let A=i.value===d;w("aria-selected=",A?"true":"false"),w("tabindex=",A?"0":"-1"),A&&requestAnimationFrame(()=>At(y))}),s.disabled&&w("disabled=true"),w("click=",()=>o(s,a)),w("keydown=",A=>Ot(A,e.tabs,a,o)),u(s.icon),u(s.label)})})});ze(r,-1),ze(r,1),Et(r)}),w("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{w(()=>{let r=i.value,s=e.tabs.findIndex((d,y)=>n(d,y)===r),a=e.tabs[s]??e.tabs[0];a&&(w(`id=${t}-panel-${n(a,s)} aria-labelledby=${t}-tab-${n(a,s)}`),u(a.content))})})})}function ze(e,t){w(`button.s-tabscroll.s-tabscroll-${t<0?"left":"right"} type=button`,()=>{w("tabindex=-1 aria-hidden=true"),w("click=",()=>e.scrollBy({left:t*e.clientWidth*.8,behavior:"smooth"})),(t<0?wt:$t)({size:"1.1em"})})}function Et(e){let t=e.parentElement;if(!t||typeof ResizeObserver>"u")return;let n=()=>{let o=e.scrollWidth-e.clientWidth;t.classList.toggle("s-can-left",e.scrollLeft>1),t.classList.toggle("s-can-right",e.scrollLeft<o-1)};e.addEventListener("scroll",n,{passive:!0});let i=new ResizeObserver(n);i.observe(e);for(let o of Array.from(e.children))i.observe(o);n(),w.clean(()=>{e.removeEventListener("scroll",n),i.disconnect()})}function At(e){let t=e.parentElement;if(!t||!e.isConnected)return;let n=parseFloat(getComputedStyle(t).fontSize)*2.6,i=e.getBoundingClientRect(),o=t.getBoundingClientRect();i.left<o.left+n?t.scrollBy({left:i.left-o.left-n,behavior:"smooth"}):i.right>o.right-n&&t.scrollBy({left:i.right-o.right+n,behavior:"smooth"})}function Ot(e,t,n,i){let o=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")o=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")o=(n-1+t.length)%t.length;else if(e.key==="Home")o=0;else if(e.key==="End")o=t.length-1;else return;e.preventDefault();let r=o>=n?1:-1;for(let s=0;s<t.length;s++){let a=t[o];if(a&&!a.disabled){i(a,o),e.currentTarget?.parentElement?.children[o]?.focus();return}o=(o+r+t.length)%t.length}}import H from"aberdeen";H.insertGlobalCss({"textarea.s-input":"resize:vertical min-height:3em line-height:1.45","textarea.s-input.s-autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function Tt(e={}){let t=e.autoGrow!==!1;D(e,(n,i)=>{let o=H("textarea.s-input",e.inputAttrs,()=>{t?(H(".s-autoGrow"),H("input=",r=>{Ie(r.currentTarget),e.input&&e.input(r)})):(H("rows=",e.rows??4),H("resize:",e.resize??"vertical"),e.input&&H("input=",e.input)),e.placeholder!=null&&H("placeholder=",e.placeholder),e.value!=null&&!e.bind&&H("value=",e.value),e.change&&H("change=",e.change),Z(e,n,i,e.bind)});t&&requestAnimationFrame(()=>Ie(o))})}function Ie(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import $ from"aberdeen";import{grow as Mt,shrink as St}from"aberdeen/transitions";$.insertGlobalCss({".s-toasts":"position:fixed bottom:$3 right:$3 z-index:400 display:flex flex-direction:column gap:$2 pointer-events:none max-width:min(90vw,24rem) w:24rem",".s-toast":{"&":"display:flex align-items:flex-start gap:$2 padding: $3; pointer-events:auto position:relative overflow:hidden",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",".s-toast-close:hover":"fg:$s-text",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-text",".s-toast-progress":"position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%"}});var Lt=0,ae=$.proxy({});F(()=>{$.peek(()=>$.isEmpty(ae))&&$.isEmpty(ae)||$("div.s-toasts",()=>{$.onEach(ae,e=>{let{opts:t,id:n}=e,i=t.type==="danger"||t.type==="warning"?"alert":"status",o=t.type==null||t.type==="neutral"?"neutral":t.type,r=t.duration??6e3,s,a=null,d=()=>{clearTimeout(s),a&&(a.style.transition="none",a.style.width="100%",a.offsetWidth,a.style.transition=`width ${r}ms linear`,a.style.width="0%"),s=setTimeout(()=>ke(n),r)},y=()=>{clearTimeout(s),s=void 0,a&&(a.style.transition="none",a.style.width="100%")};$.clean(()=>clearTimeout(s)),$(`div.s-toast.s-s.${o}.extra-shadow aria-live=polite role=${i}`,"create=",Mt,"destroy=",St,t.attrs,()=>{r>0&&($("mouseenter=",y),$("mouseleave=",d)),$("div.s-toast-body",()=>{$(()=>{t.title!=null&&$("div.s-toast-title",()=>u(t.title))}),$("div.s-toast-msg",()=>u(t.message))}),$(()=>{t.dismissible!==!1&&$("button.s-toast-close type=button aria-label=Dismiss",()=>{$("#\xD7"),$("click=",()=>ke(n))})}),r>0&&(a=$("div.s-toast-progress"))}),r>0&&requestAnimationFrame(d)})})});function ke(e){delete ae[e]}function Ct(e){let t=++Lt;return ae[t]={id:t,opts:e},()=>ke(t)}import z from"aberdeen";z.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var te=z.proxy(void 0),I=null;typeof window<"u"&&window.addEventListener("scroll",()=>{te.value=void 0},{capture:!0,passive:!0});function Pt(e,t,n,i){let r=window.innerWidth,s=window.innerHeight,a=0,d=0;return i==="bottom"?(a=e.left+(e.width-t)/2,d=e.bottom+7,d+n>s-8&&(d=e.top-n-7)):i==="left"?(a=e.left-t-7,d=e.top+(e.height-n)/2,a<8&&(a=e.right+7)):i==="right"?(a=e.right+7,d=e.top+(e.height-n)/2,a+t>r-8&&(a=e.left-t-7)):(a=e.left+(e.width-t)/2,d=e.top-n-7,d<8&&(d=e.bottom+7)),{x:Math.max(8,Math.min(a,r-t-8)),y:Math.max(8,Math.min(d,s-n-8))}}function Ee(){I&&clearTimeout(I),I=setTimeout(()=>{te.value=void 0,I=null},100)}F(()=>{let e=te.value;if(!e)return;let{opts:t,anchor:n}=e,i=t.placement??"top",o=z("div.s-tt-tip.s-s.neutral.shadow role=tooltip visibility:hidden",t.attrs,()=>{z("mouseenter=",()=>{I&&(clearTimeout(I),I=null)}),z("mouseleave=",Ee),u(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(o))return;let{x:r,y:s}=Pt(n.getBoundingClientRect(),o.offsetWidth,o.offsetHeight,i);o.style.left=r+"px",o.style.top=s+"px",o.style.visibility=""})});function Rt(e){let t=n=>{I&&(clearTimeout(I),I=null),te.value={opts:e,anchor:n.currentTarget}};z("mouseenter=",t),z("mouseleave=",Ee),z("focusin=",t),z("focusout=",Ee),z.clean(()=>{te.value?.opts===e&&(te.value=void 0)})}export{dt as addContextMenu,Rt as addTooltip,ut as alert,We as autocomplete,tt as box,S as button,nt as buttonChooser,K as buttonGroup,ot as checkbox,fe as closeFloatingMenu,pt as confirm,me as dialog,it as form,Oe as getDarkMode,$e as isDialogOpen,re as isFloatingMenuOpen,mt as main,ct as menuButton,et as panels,ft as prompt,xt as select,Be as setDarkMode,se as showFloatingMenu,kt as tabs,Tt as textarea,xe as textline,Ct as toast};
+import S from"aberdeen";var ce="staffa:darkMode",xe=S.proxy({value:Re()});function Re(){try{let e=localStorage.getItem(ce);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function ze(e){xe.value=e;try{e===void 0?localStorage.removeItem(ce):localStorage.setItem(ce,e?"dark":"light")}catch{}}function we(e=!1){let t=xe.value;return t===void 0&&!e?S.darkMode():t}S(()=>{we()?S.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#0e0f12 --s-text:#e9eaec",".s-s.neutral":"--s-bg:#191b1f --s-text:#e9eaec",".s-s.neutral .s-s.neutral":"--s-bg:#23262b"}):S.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#eef0f3 --s-text:#1d1f24",".s-s.neutral, .s-s.neutral":"--s-bg:#ffffff --s-text:#1d1f24",".s-s.neutral .s-s.neutral":"--s-bg:#f6f7f9"})});S.setSpacingCssVars(1.1);S.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 p:$3 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased background-color:$s-bg text:$s-text",a:"color: $s-link-fg; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select, optgroup":"font:inherit color:inherit","input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image],[type=submit],[type=button],[type=reset],[type=hidden])), textarea, select":"background:$s-bg border: 1px solid $s-faint; r:$s-radius-sm padding: 0.45em 0.65em; max-width:100%","input:where([type=checkbox],[type=radio])":"width:1.15em height:1.15em cursor:pointer","input[type=range]":"appearance:none background:transparent cursor:pointer vertical-align:middle","input[type=range]::-webkit-slider-runnable-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-progress":"height:4px r:99px background:$s-accent","input[type=range]::-webkit-slider-thumb":"appearance:none width:16px height:16px margin-top:-6px r:50% background:$s-accent","input[type=range]::-moz-range-thumb":"width:16px height:16px border:0 r:50% background:$s-accent","input[type=file]":"cursor:pointer",progress:"appearance:none border:0 height:6px r:99px background:$s-faint overflow:hidden vertical-align:middle","progress::-webkit-progress-bar":"background:$s-faint r:99px","progress::-webkit-progress-value":"background:$s-accent r:99px","progress::-moz-progress-bar":"background:$s-accent r:99px",meter:"vertical-align:middle",fieldset:"border: 1px solid $s-faint; r:$s-radius-sm padding:$2 min-width:0",legend:"padding: 0 $1; font-weight:600","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-text, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-text, $s-bg 92%); p:$3 r: $s-radius; overflow:auto","pre code":"background:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $s-faint;","::placeholder":"color: $s-muted; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-muted font-size:0.9em","@media (prefers-reduced-motion: reduce)":{"*, *::before, *::after":"transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;"},":root":"--s-primary:#00a884 --s-danger:#dc5b41 --s-success:#00a884 --s-warning:#ef6b00 --s-link:#3f8cd8 --s-radius-sm:6px --s-radius:12px --s-radius-lg:18px --s-focus: color-mix(in srgb, $s-primary 38%, transparent); --s-gradient: linear-gradient(135deg, color-mix(in oklab, $s-primary, white 16%), color-mix(in oklab, $s-primary, black 14%));",":root, .s-s.neutral":"--s-accent:$s-primary --s-link-fg:$s-link",".s-s:not(.neutral)":"--s-bg:$s-primary border:0 --s-text:#eee --s-accent:#fff --s-link-fg:#eef --s-muted: color-mix(in srgb, #fff 70%, transparent); --s-faint: color-mix(in srgb, #fff 30%, transparent);",".s-s.danger":"--s-bg:$s-danger",".s-s.success":"--s-bg:$s-success",".s-s.warning":"--s-bg:$s-warning",".s-s.link":"--s-bg:$s-link",".s-s.primary":"--s-bg:$s-primary",":root, .s-s":"--s-muted: color-mix(in oklab, $s-text, $s-bg 42%); --s-faint: color-mix(in oklab, $s-text, $s-bg 80%); color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",".s-s, body":"background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));",".s-s":"r:$s-radius",":where(.s-s.neutral)":"border: 1px solid $s-faint;",".s-s::-webkit-scrollbar, .s-s ::-webkit-scrollbar":"width:10px height:10px",".s-s::-webkit-scrollbar-track, .s-s ::-webkit-scrollbar-track":"background:transparent",".s-s::-webkit-scrollbar-thumb, .s-s ::-webkit-scrollbar-thumb":"background:$s-faint border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s.shadow.neutral:not(.s-btn)":"box-shadow: 0 4px 14px rgba(0,0,0,0.13);",".s-s.extra-shadow.neutral:not(.s-btn)":"box-shadow: 0 18px 50px rgba(0,0,0,0.28);",".s-s.shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 4px 14px color-mix(in srgb, $s-bg 30%, transparent);",".s-s.extra-shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 14px 40px color-mix(in srgb, $s-bg 40%, transparent);",".s-s.no-shadow":"box-shadow: none !important;",".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined":"--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",".s-s:not(.neutral).tonal":"background: color-mix(in srgb, $s-bg 15%, transparent); border: 1px solid $s-faint;",".s-s:not(.neutral).outlined":"background: transparent; border: 1px solid color-mix(in srgb, $s-bg 45%, transparent);",".s-s:not(.neutral) .s-s.tonal, .s-s:not(.neutral) .s-s.outlined":"--s-text:#fff --s-accent:#fff --s-link-fg:#fff background: linear-gradient(170deg, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%)); border-color: transparent;"});S.insertGlobalCss({".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after":"transition: none !important; animation: none !important;"});if(typeof document<"u"&&typeof requestAnimationFrame=="function"){let e=document.documentElement;e.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.classList.remove("s-preload")))}S.insertGlobalCss({":disabled, [aria-disabled=true]":"opacity:0.45 filter:saturate(0.6) user-select:none",":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *":"pointer-events:none cursor:not-allowed"});var Fe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";S.insertGlobalCss({[`${Fe}`]:{"&":"margin:0","&:not(:first-child)":"margin-top:$3"},"h1, h2, h3, h4, h5, h6":{"&":"line-height:1.15 font-weight:700 text-wrap:balance","&:not(:first-child)":"margin-top:1.4em"},h1:"font-size:2em font-weight:800 letter-spacing:-0.022em",h2:"font-size:1.55em letter-spacing:-0.018em",h3:"font-size:1.3em letter-spacing:-0.011em",h4:"font-size:1.1em",h5:"font-size:0.95em letter-spacing:0.005em",h6:"font-size:0.8em fg:$s-muted text-transform:uppercase letter-spacing:0.07em","ul, ol":{"&":"padding-left:1.5em","> li:not(:first-child), li > &:not(:first-child)":"margin-top:$1"},blockquote:"border-left: 3px solid $s-faint; padding-left: $3; fg: $s-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-faint; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-faint;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-muted font-size:0.9em margin-top:$1 text-align:center"});import l from"aberdeen";import $e from"aberdeen";var X=640,Ie=0;function F(e="s"){return`${e}-${++Ie}`}function f(e,...t){e!=null&&(typeof e=="function"?e(...t):$e("rich=",e))}var qe="a[href], button, input, select, textarea, [tabindex]";function U(e,t){let n=o=>o instanceof HTMLElement&&!o.hasAttribute("disabled")&&o.getAttribute("aria-disabled")!=="true"&&o.tabIndex>=0&&o.getClientRects().length>0,i=(t?[...e.querySelectorAll(t)].find(n):void 0)??[...e.querySelectorAll(qe)].find(n);return i?.focus(),i!=null}function I(e){queueMicrotask(()=>$e(e))}import E from"aberdeen";E.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-text user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&[aria-invalid=true]":"border-color:$s-danger"}});function q(e,t){let n=e.id??F("field"),i=()=>!!e.error;E("div.s-field",e.attrs,()=>{E(()=>{e.label!=null&&E(`label for=${n}`,()=>{f(e.label),e.required&&E("span.s-req aria-hidden=true #*")})}),t(n,i),E(()=>{e.help!=null&&!e.error&&E("div.s-help",()=>f(e.help))}),E(()=>{e.error&&E("div.s-error role=alert #",e.error)})})}function V(e,t,n,i){E(`id=${t}`),e.name&&E(`name=${e.name}`),E(()=>{e.disabled&&E("disabled=true")}),E(()=>{e.required&&E("aria-required=true")}),E(()=>E("aria-invalid=",n()?"true":"false")),i&&E("bind=",i)}l.insertGlobalCss({".s-ac":{"&":"position:relative","> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","> .s-control:focus-within":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;","&[aria-invalid=true] > .s-control":"border-color:$s-danger",".s-chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em background: color-mix(in oklab, $s-bg, $s-text 10%); border: 1px solid $s-faint; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-text background:$s-faint",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .s-menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0","> .s-menu li":"margin:0",".s-option":"padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",".s-option[aria-selected=true]":"background: color-mix(in srgb, $s-text 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-muted"}});function Be(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function De(e){let t=F("ac-menu"),n=l.proxy({query:"",open:!1,active:0}),i=()=>(typeof e.options=="function"?e.options():e.options).map(Be),o=()=>{let p=e.bind?.value;return p==null||p===""?[]:Array.isArray(p)?p:[p]},r=p=>i().find(v=>v.value===p)?.label??p;if(!e.multi){let p=e.bind?l.peek(e.bind,"value"):void 0;typeof p=="string"&&p&&(n.query=l.peek(()=>r(p)))}let s=()=>{let p=new Set(o()),v=i();e.multi&&(v=v.filter(m=>!p.has(m.value)));let c=n.query.trim().toLowerCase();return c&&(v=v.filter(m=>m.label.toLowerCase().includes(c))),v},a=(p,v)=>{if(e.multi){let c=Array.isArray(e.bind?.value)?[...e.bind.value]:[];c.includes(p)||c.push(p),e.bind&&(e.bind.value=c),n.query=""}else e.bind&&(e.bind.value=p),n.query=r(p),n.open=!1;n.active=0,v?.focus()},d=p=>{if(!e.bind)return;let v=e.bind.value??[];e.bind.value=v.filter(c=>c!==p)};q(e,(p,v)=>{l("div.s-ac",e.inputAttrs,()=>{l(()=>l("aria-invalid=",v()?"true":"false"));let c;l("div.s-control",()=>{l("click=",()=>c?.focus()),l(()=>{if(e.multi)for(let m of o())l("span.s-chip",()=>{l("span #",l.peek(()=>r(m))),l("button type=button aria-label=",`Remove ${m}`,()=>{l("#\xD7"),l("click=",y=>{y.stopPropagation(),d(m),c?.focus()})})})}),c=l("input type=text role=combobox autocomplete=off",()=>{l(`id=${p} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&l("placeholder=",e.placeholder),e.disabled&&l("disabled=true"),e.required&&l("aria-required=true"),l("bind=",l.ref(n,"query")),l(()=>l("aria-expanded=",n.open?"true":"false")),l(()=>{let y=s()[n.active];l("aria-activedescendant=",n.open&&y?`${t}-opt-${n.active}`:"")}),l("input=",()=>{n.open=!0,n.active=0}),l("focus=",()=>{n.open=!0}),l("blur=",()=>{setTimeout(()=>T(),150)}),l("keydown=",m=>g(m,c))})}),l(()=>{if(!n.open)return;let m=s(),y=n.query.trim(),z=e.allowCustom!==!1&&y!==""&&!m.some(_=>_.label.toLowerCase()===y.toLowerCase());l("ul.s-menu.s-s.neutral.shadow role=listbox",`id=${t}`,()=>{m.forEach((_,de)=>{l("li.s-option role=option",`id=${t}-opt-${de}`,()=>{l(()=>l("aria-selected=",n.active===de?"true":"false")),l("#",_.label),l("mousedown=",He=>He.preventDefault()),l("click=",()=>a(_.value,c)),l("mousemove=",()=>{n.active=de})})}),z&&l("li.s-option.s-add role=option",()=>{l("#",`Add "${y}"`),l("mousedown=",_=>_.preventDefault()),l("click=",()=>a(y,c))}),m.length===0&&!z&&l("li.s-empty #No matches")})}),l(()=>{if(e.name)if(e.multi)for(let m of o())l("input type=hidden",()=>{l("name=",e.name),l("value=",m)});else l("input type=hidden",()=>{l("name=",e.name),l("value=",o()[0]??"")})})})});function g(p,v){let c=s(),m=c.length-1;if(p.key==="ArrowDown")p.preventDefault(),n.open=!0,n.active=Math.min(m,n.active+1);else if(p.key==="ArrowUp")p.preventDefault(),n.active=Math.max(0,n.active-1);else if(p.key==="Enter"){p.preventDefault();let y=c[n.active];y?a(y.value,v):e.allowCustom!==!1&&n.query.trim()?a(n.query.trim(),v):n.open&&(n.open=!1)}else if(p.key==="Escape")n.open&&(p.preventDefault(),n.open=!1,e.multi||(n.query=r(o()[0]??"")));else if(p.key==="Backspace"&&e.multi&&n.query===""){let y=o();y.length&&d(y[y.length-1])}}function T(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?a(n.query.trim()):n.query=r(o()[0]??"")}}import C from"aberdeen";import h from"aberdeen";import*as $ from"aberdeen/route";var pe={integer(e){if(!/^(0|-?[1-9]\d*)$/.test(e))return;let t=Number(e);return Number.isSafeInteger(t)?t:void 0}};function J(e){let t=String(e).replace(/\/+$/,"");return t.startsWith("/")||(t=`/${t}`),t}function oe(e){let t=J(e);return t==="/"?[]:t.slice(1).split("/")}function Ge(e,t){let n=oe(e),i=n.map((o,r)=>{if(!o.startsWith("[")||!o.endsWith("]"))return{kind:"lit",value:o};let s=/^\[\.\.\.([A-Za-z_$][\w$]*)\]$/.exec(o);if(s){if(r!==n.length-1)throw new Error(`Staffa: "${o}" must be the last segment of route "${e}"`);return{kind:"rest",name:s[1]}}let a=/^\[([A-Za-z_$][\w$]*)(?:=([A-Za-z_$][\w$]*))?\]$/.exec(o);if(!a)throw new Error(`Staffa: malformed param "${o}" in route "${e}"`);let[,d,g]=a;if(g&&!(g in pe))throw new Error(`Staffa: unknown matcher "${g}" in route "${e}" (known: ${Object.keys(pe).join(", ")})`);return{kind:"param",name:d,matcher:g}});return{key:e,segs:i,draw:t}}function je(e){try{return decodeURIComponent(e)}catch{return e}}function ke(e,t){let n={};for(let i=0;i<e.segs.length;i++){let o=e.segs[i];if(o.kind==="rest")return i>=t.length?null:(n[o.name]=t.slice(i).join("/"),n);if(i>=t.length)return null;let r=t[i];if(o.kind==="lit"){if(r!==o.value)return null}else if(o.matcher){let s=pe[o.matcher](r);if(s===void 0)return null;n[o.name]=s}else n[o.name]=je(r)}return e.segs.length===t.length?n:null}var Ae=450,We=300,Ke=1280,ie=24,Ne=360,Ee=2;h.insertGlobalCss({":root":`--s-panel-ms:${Ae}ms`,".s-panels":"flex:1 min-width:0 min-height:0 position:relative overflow:hidden isolation:isolate",".s-panel":{"&":"position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column visibility:visible transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility 0s;","> .s-content":"flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3","> .s-content.s-scroll-y":"margin-right:$3","&.s-panel-sep::before":`content:'' position:absolute left:-${ie/2}px top:0.6rem bottom:0.6rem width:1px background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);`,"&.s-panel-enter":"opacity:0 transition:none transform: translateX(8cqw);","&.s-panel-closing":"opacity:0 pointer-events:none transform: translateX(8cqw);","&.s-panel-hidden":"opacity:0 visibility:hidden transform: translateX(-8cqw); transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility var(--s-panel-ms);"},".s-main.s-shell-snap .s-panel":"transition:none",[`@container (max-width: ${X}px)`]:{".s-panel > .s-content.s-scroll-y":"margin-right:0"},".s-panel-loading":{"&":"position:absolute inset:0 display:flex align-items:center justify-content:center gap:$1 pointer-events:none",i:"width:0.5rem height:0.5rem r:50% background:$s-muted opacity:0.45 animation: s-panel-pulse 1s ease-in-out infinite;","i:nth-child(2)":"animation-delay:0.15s","i:nth-child(3)":"animation-delay:0.3s"},"@keyframes s-panel-pulse":{"0%, 100%":"opacity:0.25 transform:scale(0.8)","50%":"opacity:0.7 transform:scale(1)"}});var L=null,re=class{compiled;opts;live=[];byId=new Map;nextId=1;$ids=h.proxy({});$state=h.proxy({paths:[],topId:0});containerEl;geom;lastBodyW=-1;layoutQueued=!1;timers=new Set;constructor(t){if(L)throw new Error("Staffa: only one routed S.main() (one with `routes`) can be active at a time");L=this,this.opts=t,this.compiled=Object.entries(t.routes).map(([i,o])=>Ge(i,o));let n=$.setGuard((i,o)=>{let r=n?n(i,o):!0;return r===!1?!1:r===!0?this.checkChange(i):r.then(s=>s===!1?!1:this.checkChange(i))});h(()=>{let i=this.computeTarget();h.peek(()=>this.propose(i))}),this.interceptLinks(),this.watchTitle(),h.clean(()=>{for(let i of this.timers)clearTimeout(i);this.timers.clear(),$.setGuard(n),L===this&&(L=null)})}resolve(t){let n=oe(t);for(let i of this.compiled){let o=ke(i,n);if(o)return{draw:i.draw,params:o}}return{draw:this.opts.notFound??Ve,params:{}}}matches(t){let n=oe(t);return this.compiled.some(i=>ke(i,n)!=null)}deriveStack(t){let n=oe(t),i=[];for(let o=1;o<n.length;o++){let r="/"+n.slice(0,o).join("/");this.matches(r)&&i.push(r)}return i.push(J(t)),i}targetFor(t,n){return Array.isArray(n)?n.map(String).concat(J(t)):this.deriveStack(t)}computeTarget(){return this.targetFor($.current.path,$.current.state.panels)}checkChange(t){let n=this.removedBy(this.targetFor(t.path,t.state.panels));return n.length?Xe(n):!0}paths(){return this.live.map(t=>t.path)}removedBy(t){return this.live.filter(n=>!t.includes(n.path))}propose(t){Ue(this.paths(),t)||this.commit(t,h.peek($.current,"nav"))}commit(t,n){this.geom=void 0;let i=new Map(this.live.map(r=>[r.path,r])),o=[];for(let r of t){let s=i.get(r);if(s){i.delete(r),o.push(s);continue}let a=this.createEntry(r,o.length);n!=="load"&&n!=="back"&&(a.enter=!0),o.push(a),this.byId.set(a.id,a)}for(let r of i.values())this.beginClose(r);this.live=o,h.merge(this.$state,{paths:this.paths(),topId:this.live.length?this.live[this.live.length-1].id:0});for(let r of this.live)this.$ids[String(r.id)]=r.order;this.scheduleLayout()}createEntry(t,n){let{draw:i,params:o}=this.resolve(t),r={id:this.nextId++,order:n,path:t,draw:i,$ui:h.proxy({holding:!1}),layout:"medium",width:0};return r.$page=h.proxy({params:o,path:t,close:()=>this.closePanelAt(this.live.indexOf(r))}),r}beginClose(t){t.closing=!0,t.el&&(t.el.style.zIndex=String(Ee*this.live.indexOf(t))),this.byId.delete(t.id),delete this.$ids[String(t.id)]}playExit(t,n){if(!t.closing){n.remove();return}n.classList.add("s-panel-closing"),n.setAttribute("inert","");let i=()=>{clearTimeout(o),this.timers.delete(o),n.remove()};n.addEventListener("transitionend",r=>{r.target===n&&r.propertyName==="opacity"&&i()});let o=setTimeout(i,Ae+80);this.timers.add(o)}goBackTo(t){return $.back({path:t[t.length-1]},{state:{panels:t.slice(0,-1)}})}closeDownTo(t){return t<0||t>=this.live.length-1?Promise.resolve(!1):this.goBackTo(this.paths().slice(0,t+1))}closeTop(){return this.closeDownTo(this.live.length-2)}closePanelAt(t){if(t<0||t>=this.live.length)return Promise.resolve(!1);if(t===this.live.length-1)return this.closeTop();let n=this.paths().filter((i,o)=>o!==t);return Promise.resolve($.go({path:n[n.length-1],search:h.peek(()=>({...$.current.search})),hash:h.peek($.current,"hash"),state:{panels:n.slice(0,-1)}}))}closeByPath(t){let n=J(t);return this.closePanelAt(this.live.findIndex(i=>i.path===n))}closePanelEl(t){return this.closePanelAt(this.live.findIndex(n=>n.el===t))}navigate(t,n,i=!1){let o;try{o=new URL(t,location.href)}catch{return}let r=J(o.pathname),s=Object.fromEntries(new URLSearchParams(o.search)),a=o.hash,d=this.live.findIndex(T=>T.path===r);if(d>=0&&d<this.live.length-1){this.closeDownTo(d);return}if(d>=0){if(o.search===location.search&&(o.hash||"")===(location.hash||""))return;$.go({path:r,search:s,hash:a,state:{panels:this.paths().slice(0,-1)}});return}let g=n<0?this.deriveStack(r).slice(0,-1):this.paths().slice(0,i?n:n+1);$.go({path:r,search:s,hash:a,state:{panels:g}})}pushPath(t,n){this.navigate(t,this.live.length-1,n)}interceptLinks(){$.interceptLinks((t,n)=>{let i=n.closest(".s-panel"),o=i?this.live.findIndex(r=>r.el===i):-1;return this.navigate(t.href,o,n.getAttribute("data-panel")==="replace"),!0})}watchTitle(){let t=document.title;h(()=>{let i=this.byId.get(this.$state.topId)?.$page.title,o=typeof this.opts.title=="string"?this.opts.title:void 0,r=i&&o?`${i} \xB7 ${o}`:i||o;r&&(document.title=r)}),h.clean(()=>{document.title=t})}drawStack(){let t=h("div.s-panels role=main",()=>{this.containerEl=h(),h.onEach(this.$ids,(n,i)=>this.drawPanel(Number(i)),(n,i)=>[n,Number(i)])});if(typeof ResizeObserver<"u"){let n=new ResizeObserver(()=>this.layout());n.observe(t);let i=t.parentElement?.parentElement;i&&n.observe(i),h.clean(()=>n.disconnect())}h.clean(()=>{this.containerEl===t&&(this.containerEl=void 0)}),this.scheduleLayout()}drawPanel(t){let n=this.byId.get(t);if(!n)return;let i;h(()=>{let o=n.$page.layout;n.layout=o==="small"||o==="large"?o:"medium";let r=this.roomFor(n.layout);r&&(n.width=r,i&&(i.style.width=`${r}px`,this.scheduleLayout()))}),i=h(`section.s-panel${n.width?` w:${n.width}px`:""}`,"destroy=",o=>this.playExit(n,o),()=>{let o=h("div.s-content",()=>{n.draw(n.$page),$.persistScroll(n.path)});Ye(o),h(()=>{!n.$page.loading||n.$ui.holding||h("div.s-panel-loading aria-hidden=true",()=>{h("i"),h("i"),h("i")})})}),n.el=i,n.placed=!1,i.style.transition="none",h.clean(()=>{n.el===i&&(n.el=void 0)}),h(()=>{n.$page.loading,this.scheduleLayout()}),this.scheduleLayout()}scheduleLayout(){this.layoutQueued||(this.layoutQueued=!0,requestAnimationFrame(()=>{this.layoutQueued=!1,this.layout()}))}measure(){let t=this.containerEl,n=t?.parentElement,i=n?.parentElement;if(!t||!n||!i)return;let o=i.getBoundingClientRect().width;if(!o)return;let r=0;for(let d of n.children)d!==t&&(r+=d.getBoundingClientRect().width);let s=Math.max(0,Math.min(Ke,o)-r),a=(s-ie)/2;return{total:o,chrome:r,small:a>=Ne?a:s,medium:s,large:Math.max(0,o-r)}}geometry(){return this.geom??=this.measure()}roomFor(t){return this.geometry()?.[t]??0}layout(){let t=this.containerEl,n=t?.closest(".s-main");if(!t||!n)return;let i=this.live.length;if(!i||this.live.some(c=>!c.el))return;this.geom=void 0;let o=this.geometry();if(!o)return;let r=this.opts.stacking!==!1,s=this.lastBodyW!==o.total;s&&(this.lastBodyW=o.total,n.classList.add("s-shell-snap"));let a=c=>o[c.layout],d=i-1,g=a(this.live[d]);if(r)for(let c=i-2;c>=0;c--){let m=g+ie+a(this.live[c]);if(m>o.large)break;g=m,d=c}let T=Math.min(o.large,Math.max(o.medium,g));for(let c=d;c<i;c++)this.live[c].width=a(this.live[c]);for(let c of this.live)c.width||(c.width=a(c));n.style.setProperty("--s-shell-w",`${o.chrome+T}px`);let p=[],v=0;for(let c=0;c<i;c++){let m=this.live[c],y=m.el,z=c>=d;_e(y,z?v:0,m.width,Ee*c+1),z&&(v+=m.width+ie),y.classList.toggle("s-panel-sep",z&&c>d),y.classList.toggle("s-panel-hidden",!z),y.toggleAttribute("inert",!z),!m.placed&&(p.push(m),!h.peek(m.$page,"loading")||m.holdDone?m.$ui.holding=!1:m.$ui.holding||(m.$ui.holding=!0,this.holdEnter(m)),m.enter&&z&&y.classList.add("s-panel-enter"))}(p.length||s)&&t.offsetWidth,s&&n.classList.remove("s-shell-snap");for(let c of p)c.$ui.holding||(c.el.style.transition="",c.el.classList.remove("s-panel-enter"),c.enter=!1,c.placed=!0)}holdEnter(t){let n=setTimeout(()=>{this.timers.delete(n),t.holdDone=!0,t.$ui.holding&&(t.$ui.holding=!1,this.scheduleLayout())},We);this.timers.add(n)}};function _e(e,t,n,i){e.style.left=`${t}px`,e.style.width=`${n}px`,e.style.zIndex=String(i)}function Xe(e){let t=[...e].reverse(),n=0,i=()=>{for(;n<t.length;){let o=h.peek(t[n++].$page,"requestClose");if(!o)continue;let r;try{r=o()}catch(s){return console.error(s),!1}if(r===!1)return!1;if(r!==!0)return Promise.resolve(r).then(s=>s===!1?!1:i())}return!0};return i()}function Ue(e,t){return e.length===t.length&&e.every((n,i)=>n===t[i])}function Ve(e){h("p fg:$s-muted",()=>h("#",`No page at ${e.path}`))}function Ye(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),h.clean(()=>n.disconnect())}var Qe={push(e){ue().pushPath(e,!1)},replace(e){ue().pushPath(e,!0)},close(e){let t=ue();return e==null?t.closeTop():t.closeByPath(e)},get stack(){return L?L.$state.paths:[]}};function ue(){if(!L)throw new Error("Staffa: S.panels needs a routed S.main() (one with `routes`) to be mounted");return L}function Te(e){let t=e?.closest(".s-panel");return!L||!t?(console.warn("Staffa: `close: true` needs to be drawn inside a panel of a routed S.main()"),Promise.resolve(!1)):L.closePanelEl(t)}C.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column overflow:hidden r: $s-radius-lg; position:relative","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0","> div":"p:$3 gap:$3",".s-box-close":"flex-shrink:0 margin-left:auto display:flex align-items:center justify-content:center width:1.6rem height:1.6rem p:0 border:0 background:transparent cursor:pointer fg:$s-muted font-size:0.95rem line-height:1 r:$s-radius-sm transition: color 0.12s, background 0.12s;",".s-box-close:hover":"fg:$s-text background: color-mix(in srgb, $s-text 8%, transparent);","> .s-box-close":"position:absolute top:$2 right:$2 z-index:1"}});function Je(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;C("section.s-box.s-s.neutral.shadow",t.attrs,()=>{C(()=>{t.header!=null?C("header.s-s.neutral",t.headerAttrs,()=>{f(t.header),t.close&&Oe(t.close)}):t.close&&Oe(t.close)}),C("div",t.contentAttrs,()=>{f(t.content)}),C(()=>{t.footer!=null&&C("footer.s-s.neutral",t.footerAttrs,()=>f(t.footer))})})}function Oe(e){C("button.s-box-close type=button aria-label=Close",()=>{C("click=",t=>{typeof e=="function"?e():Te(t.currentTarget)}),C("span aria-hidden=true #\u2715")})}import B from"aberdeen";B.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:450 line-height:1.1 white-space:nowrap cursor:pointer text-decoration:none padding: $m2 $m3; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline: 3px solid $s-focus; outline-offset: 1px;","&:hover":"filter: brightness(1.06)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-bg 24%, transparent);","&.neutral:hover":"filter:none background: color-mix(in srgb, $s-text 8%, $s-bg);","&:active:not(:disabled)":"transform: translateY(1px)","&.small, .small > &":"padding: $m1 $m2; font-size:0.85em border-radius:$s-radius-sm","&.large, .large > &":"font-size:1.4em border-radius:$s-radius-lg"}});function O(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button";B(`${n}.s-btn.s-s.shadow`,t.attrs,()=>{t.href!=null?(B(`href=${t.href} role=button`),t.disabled&&B("aria-disabled=true")):(B("type=",t.type??"button"),t.disabled&&B("disabled=true")),t.ariaLabel&&B("aria-label=",t.ariaLabel),t.click&&B("click=",t.click),f(t.icon),f(t.content)})}import fe from"aberdeen";import Me from"aberdeen";Me.insertGlobalCss({".s-bgroup":{"&":"display:inline-flex align-items:stretch","&.s-spaced":"gap:$2 flex-wrap:wrap","&.s-vertical":"flex-direction:column","&.s-attached":"gap:0","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)":"margin-left:-1px","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.s-attached.s-vertical > .s-btn:not(:first-child)":"margin-top:-1px","&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible":"z-index:1"}});function j(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;Me(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let i of e.buttons)O(i);f(e.content)})}function Ze(e){fe(()=>{let t=e.bind.value;j({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,i])=>({content:i,ariaLabel:typeof i=="function"?n:void 0,attrs:t===n?".primary":".neutral",click:()=>{e.bind.value=e.allowDeselect&&t===n?void 0:n}}))})}),e.name&&fe(()=>fe(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import k from"aberdeen";k.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.45 filter:saturate(0.6)",input:"cursor:inherit m:0"}});function et(e={}){let t=e.id??F("check");k("div.s-check",e.attrs,()=>{k(`label for=${t}`,()=>{k("input type=checkbox",e.inputAttrs,()=>{k(`id=${t}`),e.name&&k(`name=${e.name}`),e.checked&&!e.bind&&k("checked=true"),e.change&&k("change=",e.change),k(()=>{e.disabled&&k("disabled=true")}),k(()=>{e.required&&k("aria-required=true")}),e.bind&&k("bind=",e.bind)}),k(()=>{e.label!=null&&f(e.label),e.required&&k("span.s-req aria-hidden=true #*")})}),k(()=>{e.help!=null&&!e.error&&k("div.s-help",()=>f(e.help))}),k(()=>{e.error&&k("div.s-error role=alert #",e.error)})})}import W from"aberdeen";W.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 flex-wrap:wrap margin-top:$1"}});function tt(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;W("form.s-form",t.attrs,()=>{W(()=>{W(".grid=",t.layout==="grid")}),W("submit=",n=>{if(n.preventDefault(),t.submit){let i=new FormData(n.target),o={};for(let r of new Set(i.keys())){let s=i.getAll(r);o[r]=s.length===1?s[0]:s}t.submit(o,n)}}),f(t.content),W(()=>{t.actions&&W("footer",t.actionsAttrs,()=>f(t.actions))})})}import u from"aberdeen";import A from"aberdeen";import{matchCurrent as it}from"aberdeen/route";import nt from"aberdeen";var Z={size:24,color:"currentColor",strokeWidth:2,cap:"round",join:"round"};function ot(e,t){let n=t.size??Z.size,i=nt('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none',"width=",n,"height=",n,"stroke=",t.color??Z.color,"stroke-width=",t.strokeWidth??Z.strokeWidth,"stroke-linecap=",t.cap??Z.cap,"stroke-linejoin=",t.join??Z.join,t.attrs);i.innerHTML=e}function Y(e){return(t={})=>ot(e,t)}var me=Y('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>'),Se=Y('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>');A.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 r:$s-radius-lg overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px)",".s-menu-item":"display:flex align-items:center gap:$2 w:100% outline:0 padding: $m2 0; line-height:1.1 r:$s-radius cursor:pointer text-align:left font-weight:450 font-size:0.9em border:0 background:transparent fg:$s-text text-decoration:none transition: color 0.12s, transform 0.12s, text-shadow 0.12s;",".s-menu-item:focus-visible:not([aria-current=page]), .s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page])":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",".s-menu-item[aria-current=page]":"color:$s-accent filter:none",".s-menu-item[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"flex-shrink:0","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-faint 18%, $s-faint 82%, transparent);"});function se(e,t){A("keydown=",n=>{if(n.key==="Enter"&&n.target.tagName==="A"){queueMicrotask(()=>t?.());return}if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let o=[...n.currentTarget.querySelectorAll(".s-menu-item")].filter(d=>d.getAttribute("aria-disabled")!=="true");if(!o.length)return;let r=o.indexOf(document.activeElement),s=n.key==="ArrowUp"?-1:1,a=n.key==="Home"?0:n.key==="End"?o.length-1:r<0?s>0?0:o.length-1:(r+s+o.length)%o.length;o[a].focus()});for(let n of e){if(typeof n=="string"||typeof n=="function"){f(n);continue}if("separator"in n){A("hr.s-menu-sep");continue}A(n.href?"a.s-menu-item":"button.s-menu-item type=button",n.attrs,()=>{n.href&&(A("href=",n.href),n.target&&A("target=",n.target),A(()=>{it(n.href)&&A("aria-current=page")})),n.disabled&&A("aria-disabled=true"),A("click=",i=>{if(n.disabled){i.preventDefault();return}t?.(),n.click?.(i)}),n.icon&&A("span.s-menu-icon",()=>f(n.icon)),f(n.label)})}}var G=A.proxy({opts:null});function D(){let e=G.opts?.anchor;G.opts=null,e?.focus()}function ee(e){let t=G.opts;return t!=null&&(e==null||t.anchor===e)}function ae(e){ee(e)&&D()}function rt(e,t){let n=e.offsetWidth,i=e.offsetHeight,o=window.innerWidth,r=window.innerHeight,s=4,a=t.left;a+n>o-8&&(a=Math.max(8,t.right-n));let d=t.bottom+s;d+i>r-8&&t.top-i-s>=8&&(d=t.top-i-s),e.style.left=Math.max(8,a)+"px",e.style.top=Math.max(8,d)+"px"}I(()=>{let e=G.opts;if(!e)return;let t=A("div.s-menu-list.s-s.neutral.shadow create=hidden destroy=hidden",e.dropdownAttrs,()=>{se(e.items,D)}),n=o=>{let r=o.target;!t.contains(r)&&(e.closeOnAnchorClick||!e.anchor.contains(r))&&D()},i=o=>{(o.key==="Escape"||o.key==="Tab")&&(o.preventDefault(),D())};document.addEventListener("click",n,!0),document.addEventListener("keydown",i,!0),A.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",i,!0)}),requestAnimationFrame(()=>{if(!document.body.contains(t))return;let o=e.at?{left:e.at.x,right:e.at.x,top:e.at.y,bottom:e.at.y}:e.anchor.getBoundingClientRect();rt(t,o),U(t,".s-menu-item[aria-current=page]")})});function te(e){return G.opts=e,D}function st(e){let t=null;A.clean(()=>{G.opts?.anchor===t&&D()}),A("contextmenu=",n=>{n.preventDefault(),t=n.currentTarget,te({items:e.items,anchor:t,at:{x:n.clientX,y:n.clientY},closeOnAnchorClick:!0,dropdownAttrs:e.dropdownAttrs})})}function at(e){let t=null;A.clean(()=>{G.opts?.anchor===t&&D()}),O({icon:()=>me({size:"1.4em"}),...e.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral",...e.button,click:n=>{if(t=n.currentTarget,G.opts?.anchor===t){D();return}te({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}import b from"aberdeen";import K from"aberdeen";function he(e={}){q(e,(t,n)=>{K("input.s-input",e.inputAttrs,()=>{K("type=",e.type??"text"),e.placeholder!=null&&K("placeholder=",e.placeholder),e.autocomplete!=null&&K("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&K("value=",e.value),e.input&&K("input=",e.input),e.change&&K("change=",e.change),V(e,t,n,e.bind)})})}b.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) r: $s-radius-lg; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0 flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var N=b.proxy({}),ge=0,Le=b.derive(()=>{let e=Object.keys(N);if(e.length)return e[e.length-1]});function be(){return Le.value!=null}I(()=>{b.onEach(N,({resolve:e,opts:t},n)=>{let i=()=>{delete N[n]};b.clean(()=>{t.onClose?.(),e()});let o=b.derive(()=>Le.value!=n);b("div.s-backdrop create=hidden destroy=hidden .hidden=",o,"click=",()=>{t.allowCancel!==!1&&i()});let r=b("div.s-dialog.neutral.s-s.extra-shadow create=hidden destroy=hidden",t.attrs,()=>{b(()=>{t.header!=null&&b("header.s-s.neutral",t.headerAttrs,()=>f(t.header))}),b("div",t.contentAttrs,()=>{f(t.content,i)}),b(()=>{t.footer!=null&&b("footer.s-s.neutral",t.footerAttrs,()=>f(t.footer))})});requestAnimationFrame(()=>{document.body.contains(r)&&U(r)})})});function le(e){ge||document.addEventListener("keydown",n=>{if(n.key!=="Escape"||n.defaultPrevented)return;let i=b.unproxy(N);for(let o=ge;o>0;o--)if(i[o]){n.preventDefault(),i[o].opts.allowCancel!==!1&&delete N[o];break}});let t=++ge;return e.cancelWithScope!==!1&&b.clean(()=>{delete N[t]}),new Promise(n=>{N[t]={resolve:n,opts:e}})}function lt(e,t={}){return le({header:"Alert",allowCancel:!0,content:n=>{b("p",()=>{b("#",e)}),j({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"OK",click:n})}})},...t})}function dt(e,t={}){return new Promise(n=>{let i=!1;le({header:"Confirm",allowCancel:!0,content:o=>{b("p",()=>{b("#",e)}),j({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral",click:o}),O({content:"OK",click:()=>{i=!0,o()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function ct(e,t="",n={}){return new Promise(i=>{let o=null;le({header:"Input",allowCancel:!0,content:r=>{b("p",()=>{b("#",e)});let s=b.proxy({value:t});b("form display:contents",()=>{b("submit=",a=>{a.preventDefault(),o=s.value,r()}),he({bind:b.ref(s,"value")}),j({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral",type:"button",click:r}),O({content:"OK",type:"submit"})}})})},...n,onClose:()=>{i(o),n.onClose?.()}})})}u.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","body > &":"margin: calc(-1 * $3)","> header":"border:0 border-bottom: 1px solid $s-faint; r:0 position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-faint; fg:$s-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-header-icon":"display:flex align-items:center font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;","> header .s-titles":"display:flex flex-direction:column min-width:0 flex:1","> header .s-title":"font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%","> header .s-subtitle":"fg:$s-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-menu":"display:flex align-items:center gap:$2",".s-body":"flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center position:relative",".s-body-inner":"flex:1 min-width:0 display:flex flex-direction:row min-height:0","&.s-nav-right .s-body-inner":"flex-direction:row-reverse",".s-nav-sep":"width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-body main":"flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column transition: transform 0.3s ease;",".s-body main.s-slide-in":"transform: translateX(100%); transition:none",".s-body main > .s-content":"width:100% flex:1 p:$3",".s-body main.s-scroll-y":"margin-right:$3","&.s-routed > .s-body > .s-body-inner":"max-width: var(--s-shell-w, 100%);","&.s-routed > header > .s-bar":"max-width: var(--s-shell-w, 100%);","&.s-routed > footer > .s-bar":"max-width: var(--s-shell-w, 100%);","&.s-routed > .s-body > .s-body-inner, &.s-routed > header > .s-bar, &.s-routed > footer > .s-bar":"transition: max-width var(--s-panel-ms) ease;","&.s-routed.s-shell-snap > .s-body > .s-body-inner, &.s-routed.s-shell-snap > header > .s-bar, &.s-routed.s-shell-snap > footer > .s-bar":"transition:none"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1"},".s-nav-page":{"&":"position:absolute inset:0 z-index:5 display:flex flex-direction:column overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 transition: transform 0.3s ease;","&.s-nav-page-off":"transform:translateX(-100%) pointer-events:none",".s-menu-item":"padding: $2 $3; min-height:3rem font-size:1.05em gap:$3"},".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:none",".s-main.s-nav-btn-only .s-nav-panel":"display:none",".s-main.s-nav-btn-only .s-nav-trigger":"display:flex",[`@container (max-width: ${X}px)`]:{".s-main.s-nav-left .s-nav-panel, .s-main.s-nav-right .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:flex",".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0",".s-main .s-body main.s-scroll-y":"margin-right:0"}});function ut(e={}){let t=e.nav,n=e.navPosition??"left",i=u.proxy({open:!1}),o=e.routes;if(o!=null&&e.content!=null)throw new Error("Staffa: S.main() takes either `content` or `routes`, not both");let r=o?new re({routes:o,notFound:e.notFound,stacking:e.stacking,title:e.title}):null,s=r?null:e.maxWidth,a=u(`div.s-main${r?".s-routed":""}`,e.attrs,()=>{u(()=>{t==null||!t.items.length||u(n==="button"?".s-nav-btn-only":`.s-nav-${n}`)}),u(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||t!=null&&t.items.length>0)&&u("header.s-s.neutral",e.topbarAttrs,()=>{u("div.s-bar",()=>{u(()=>{s!=null&&u("max-width:",s)}),u(()=>{t==null||!t.items.length||u("div.s-nav-trigger",()=>pt(t,i))}),u(()=>{e.icon!=null&&u("div.s-header-icon",()=>f(e.icon))}),u("div.s-titles",()=>{u(()=>{e.title!=null&&u("div.s-title",()=>f(e.title))}),u(()=>{e.subtitle!=null&&u("div.s-subtitle",()=>f(e.subtitle))})}),u(()=>{e.menu&&u("div.s-menu",()=>f(e.menu))})})})}),u("div.s-body",()=>{u("div.s-body-inner",()=>{u(()=>{s!=null&&u("max-width:",s)}),u(()=>{t==null||!t.items.length||n==="button"||(u(`nav.s-nav-panel.s-nav-${n}`,e.navAttrs,()=>{se(t.items)}),u("div.s-nav-sep aria-hidden=true"))}),ht(e,r)}),u(()=>{t!=null&&t.items.length&&i.open&&ft(t,e.navPageAttrs,i)})}),u(()=>{e.footer!=null&&u("footer",()=>{u("div.s-bar",()=>{u(()=>{s!=null&&u("max-width:",s)}),f(e.footer)})})})});if(t!=null||r){let d=g=>{if(g.key!=="Escape"||g.defaultPrevented||be()||ee())return;let T=a.querySelector(".s-nav-trigger button");if(i.open){g.preventDefault(),i.open=!1,T?.focus();return}if(r&&r.$state.paths.length>1){g.preventDefault(),r.closeTop();return}let p=a.querySelector(".s-nav-panel");if(p?.offsetParent!=null){let v=p.querySelector("[aria-current=page]")??p.querySelector(".s-menu-item:not([aria-disabled=true])");v&&(g.preventDefault(),v.focus());return}T&&(g.preventDefault(),T.click())};document.addEventListener("keydown",d),u.clean(()=>document.removeEventListener("keydown",d))}}function pt(e,t){let n=null;u.clean(()=>{n&&ae(n)}),O({icon:()=>u(()=>(t.open?Se:me)({size:"1.5em"})),ariaLabel:"Open navigation",attrs:".neutral .small",...e.button,click:i=>{n=i.currentTarget;let o=n.closest(".s-main");if(o!=null&&o.clientWidth<=X){t.open=!t.open;return}ee(n)?ae(n):te({items:e.items,anchor:n,dropdownAttrs:e.dropdownAttrs})}})}function ft(e,t,n){let i=!1,o=u("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off",t,()=>se(e.items,()=>{i=!0,n.open=!1})),r=o.closest(".s-main"),s=o.parentElement?.querySelector(":scope > .s-body-inner"),a=s?.querySelector(":scope > main");if(s?.setAttribute("inert",""),r!=null&&typeof ResizeObserver<"u"){let d=new ResizeObserver(()=>{r.clientWidth>X&&(n.open=!1)});d.observe(r),u.clean(()=>d.disconnect())}u.clean(()=>{s?.removeAttribute("inert"),i&&(a&&mt(a),r?.querySelector(".s-nav-trigger button")?.focus())}),requestAnimationFrame(()=>{document.body.contains(o)&&U(o,".s-menu-item[aria-current=page]")})}function mt(e){e.classList.add("s-slide-in"),e.offsetWidth,e.classList.remove("s-slide-in")}function ht(e,t){if(t){t.drawStack();return}let n=u("main",()=>{u("div.s-content",e.contentAttrs,()=>{f(e.content)})});gt(n)}function gt(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),u.clean(()=>n.disconnect())}import M from"aberdeen";M.insertGlobalCss({".s-select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-muted font-size:0.85em"}});function bt(e){q(e,(t,n)=>{M("div.s-select_wrap",e.inputAttrs,()=>{M("select.s-input",()=>{V(e,t,n),M("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),M(()=>{let i=typeof e.options=="function"?e.options():e.options,o=e.bind?.value??"";e.placeholder!=null&&M("option",()=>{M("value= disabled=true hidden=true"),o||M("selected=true"),M("#",e.placeholder)});for(let r of i){let s=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};M("option",()=>{M("value=",s.value),s.value===o&&M("selected=true"),M("#",s.label)})}})})})})}import x from"aberdeen";var vt=Y('<path d="m15 18-6-6 6-6"/>'),yt=Y('<path d="m9 18 6-6-6-6"/>');x.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tabbar":"position:relative display:flex border-bottom: 1px solid $s-faint;",".s-tablist":"display:flex gap:$1 align-items:stretch flex:1 min-width:0 overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth margin-bottom:-1px",".s-tablist::-webkit-scrollbar":"display:none",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap border-bottom: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-text;",".s-tab:focus-visible":"outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabscroll":"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted transition: color 0.15s;",".s-tabscroll:hover":"fg:$s-text",".s-tabscroll-left":"left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",".s-tabscroll-right":"right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right":"display:flex",".s-tabpanel":"display:block"}});function xt(e){let t=F("tabs"),n=(r,s)=>r.id??String(s),i=e.bind??x.proxy(n(e.tabs[0]??{label:""},0));e.tabs.length>0&&!e.tabs.some((r,s)=>n(r,s)===x.peek(()=>i.value))&&(i.value=n(e.tabs[0],0));let o=(r,s)=>{r.disabled||(i.value=n(r,s))};x("div.s-tabs",e.attrs,()=>{x("div.s-tabbar",()=>{let r=x("div.s-tablist role=tablist",()=>{e.tabs.forEach((s,a)=>{let d=n(s,a),g=x("button.s-tab type=button role=tab",()=>{x(`id=${t}-tab-${d} aria-controls=${t}-panel-${d}`),x(()=>{let T=i.value===d;x("aria-selected=",T?"true":"false"),x("tabindex=",T?"0":"-1"),T&&requestAnimationFrame(()=>$t(g))}),s.disabled&&x("disabled=true"),x("click=",()=>o(s,a)),x("keydown=",T=>kt(T,e.tabs,a,o)),f(s.icon),f(s.label)})})});Ce(r,-1),Ce(r,1),wt(r)}),x("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{x(()=>{let r=i.value,s=e.tabs.findIndex((d,g)=>n(d,g)===r),a=e.tabs[s]??e.tabs[0];a&&(x(`id=${t}-panel-${n(a,s)} aria-labelledby=${t}-tab-${n(a,s)}`),f(a.content))})})})}function Ce(e,t){x(`button.s-tabscroll.s-tabscroll-${t<0?"left":"right"} type=button`,()=>{x("tabindex=-1 aria-hidden=true"),x("click=",()=>e.scrollBy({left:t*e.clientWidth*.8,behavior:"smooth"})),(t<0?vt:yt)({size:"1.1em"})})}function wt(e){let t=e.parentElement;if(!t||typeof ResizeObserver>"u")return;let n=()=>{let o=e.scrollWidth-e.clientWidth;t.classList.toggle("s-can-left",e.scrollLeft>1),t.classList.toggle("s-can-right",e.scrollLeft<o-1)};e.addEventListener("scroll",n,{passive:!0});let i=new ResizeObserver(n);i.observe(e);for(let o of Array.from(e.children))i.observe(o);n(),x.clean(()=>{e.removeEventListener("scroll",n),i.disconnect()})}function $t(e){let t=e.parentElement;if(!t||!e.isConnected)return;let n=parseFloat(getComputedStyle(t).fontSize)*2.6,i=e.getBoundingClientRect(),o=t.getBoundingClientRect();i.left<o.left+n?t.scrollBy({left:i.left-o.left-n,behavior:"smooth"}):i.right>o.right-n&&t.scrollBy({left:i.right-o.right+n,behavior:"smooth"})}function kt(e,t,n,i){let o=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")o=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")o=(n-1+t.length)%t.length;else if(e.key==="Home")o=0;else if(e.key==="End")o=t.length-1;else return;e.preventDefault();let r=o>=n?1:-1;for(let s=0;s<t.length;s++){let a=t[o];if(a&&!a.disabled){i(a,o),e.currentTarget?.parentElement?.children[o]?.focus();return}o=(o+r+t.length)%t.length}}import P from"aberdeen";P.insertGlobalCss({"textarea.s-input":"resize:vertical min-height:3em line-height:1.45","textarea.s-input.s-autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function Et(e={}){let t=e.autoGrow!==!1;q(e,(n,i)=>{let o=P("textarea.s-input",e.inputAttrs,()=>{t?(P(".s-autoGrow"),P("input=",r=>{Pe(r.currentTarget),e.input&&e.input(r)})):(P("rows=",e.rows??4),P("resize:",e.resize??"vertical"),e.input&&P("input=",e.input)),e.placeholder!=null&&P("placeholder=",e.placeholder),e.value!=null&&!e.bind&&P("value=",e.value),e.change&&P("change=",e.change),V(e,n,i,e.bind)});t&&requestAnimationFrame(()=>Pe(o))})}function Pe(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import w from"aberdeen";import{grow as At,shrink as Tt}from"aberdeen/transitions";w.insertGlobalCss({".s-toasts":"position:fixed bottom:$3 right:$3 z-index:400 display:flex flex-direction:column gap:$2 pointer-events:none max-width:min(90vw,24rem) w:24rem",".s-toast":{"&":"display:flex align-items:flex-start gap:$2 padding: $3; pointer-events:auto position:relative overflow:hidden",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",".s-toast-close:hover":"fg:$s-text",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-text",".s-toast-progress":"position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%"}});var Ot=0,ne=w.proxy({});I(()=>{w.peek(()=>w.isEmpty(ne))&&w.isEmpty(ne)||w("div.s-toasts",()=>{w.onEach(ne,e=>{let{opts:t,id:n}=e,i=t.type==="danger"||t.type==="warning"?"alert":"status",o=t.type==null||t.type==="neutral"?"neutral":t.type,r=t.duration??6e3,s,a=null,d=()=>{clearTimeout(s),a&&(a.style.transition="none",a.style.width="100%",a.offsetWidth,a.style.transition=`width ${r}ms linear`,a.style.width="0%"),s=setTimeout(()=>ve(n),r)},g=()=>{clearTimeout(s),s=void 0,a&&(a.style.transition="none",a.style.width="100%")};w.clean(()=>clearTimeout(s)),w(`div.s-toast.s-s.${o}.extra-shadow aria-live=polite role=${i}`,"create=",At,"destroy=",Tt,t.attrs,()=>{r>0&&(w("mouseenter=",g),w("mouseleave=",d)),w("div.s-toast-body",()=>{w(()=>{t.title!=null&&w("div.s-toast-title",()=>f(t.title))}),w("div.s-toast-msg",()=>f(t.message))}),w(()=>{t.dismissible!==!1&&w("button.s-toast-close type=button aria-label=Dismiss",()=>{w("#\xD7"),w("click=",()=>ve(n))})}),r>0&&(a=w("div.s-toast-progress"))}),r>0&&requestAnimationFrame(d)})})});function ve(e){delete ne[e]}function Mt(e){let t=++Ot;return ne[t]={id:t,opts:e},()=>ve(t)}import H from"aberdeen";H.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var Q=H.proxy(void 0),R=null;typeof window<"u"&&window.addEventListener("scroll",()=>{Q.value=void 0},{capture:!0,passive:!0});function St(e,t,n,i){let r=window.innerWidth,s=window.innerHeight,a=0,d=0;return i==="bottom"?(a=e.left+(e.width-t)/2,d=e.bottom+7,d+n>s-8&&(d=e.top-n-7)):i==="left"?(a=e.left-t-7,d=e.top+(e.height-n)/2,a<8&&(a=e.right+7)):i==="right"?(a=e.right+7,d=e.top+(e.height-n)/2,a+t>r-8&&(a=e.left-t-7)):(a=e.left+(e.width-t)/2,d=e.top-n-7,d<8&&(d=e.bottom+7)),{x:Math.max(8,Math.min(a,r-t-8)),y:Math.max(8,Math.min(d,s-n-8))}}function ye(){R&&clearTimeout(R),R=setTimeout(()=>{Q.value=void 0,R=null},100)}I(()=>{let e=Q.value;if(!e)return;let{opts:t,anchor:n}=e,i=t.placement??"top",o=H("div.s-tt-tip.s-s.neutral.shadow role=tooltip visibility:hidden",t.attrs,()=>{H("mouseenter=",()=>{R&&(clearTimeout(R),R=null)}),H("mouseleave=",ye),f(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(o))return;let{x:r,y:s}=St(n.getBoundingClientRect(),o.offsetWidth,o.offsetHeight,i);o.style.left=r+"px",o.style.top=s+"px",o.style.visibility=""})});function Lt(e){let t=n=>{R&&(clearTimeout(R),R=null),Q.value={opts:e,anchor:n.currentTarget}};H("mouseenter=",t),H("mouseleave=",ye),H("focusin=",t),H("focusout=",ye),H.clean(()=>{Q.value?.opts===e&&(Q.value=void 0)})}export{st as addContextMenu,Lt as addTooltip,lt as alert,De as autocomplete,Je as box,O as button,Ze as buttonChooser,j as buttonGroup,et as checkbox,ae as closeFloatingMenu,dt as confirm,le as dialog,tt as form,we as getDarkMode,be as isDialogOpen,ee as isFloatingMenuOpen,ut as main,at as menuButton,Qe as panels,ct as prompt,bt as select,ze as setDarkMode,te as showFloatingMenu,xt as tabs,Et as textarea,he as textline,Mt as toast};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "staffa",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "An opinionated component library for the Aberdeen reactive UI library.",
   "license": "ISC",
   "author": "",

package/skill/MainOptions.md

@@ -159,6 +159,11 @@ mode) or a button+dropdown (in `"button"` mode). The sidebar automatically
 collapses to a button when the shell is too narrow — which there opens the
 nav as a full page sliding in from the left, not as a dropdown.
 
+`items` may be a reactive array: the shell reads it inside the sidebar's own
+scope, so an item arriving or leaving redraws the sidebar and nothing else.
+The content beside it — in routed mode, the whole panel stack — is left
+alone.
+
 **Type:** `MenuOptions`
 
 ### mainOptions.navPosition · member

package/skill/Page.md

@@ -59,8 +59,19 @@ medium and a small) the page itself grows, staying centred, to hold them.
 
 A panel's width depends only on the size of the window, never on what else
 is open, so opening or closing a panel never resizes the ones already on
-screen. This is read **once**, right after your handler runs, so set it
-there; later changes are ignored.
+screen.
+
+The panel is sized from this **before** your handler runs, so anything that
+measures its own box has a real one from the first frame. What it is sized
+at is whatever this says at that moment, which for a brand-new panel is the
+default: a handler that *assigns* `layout` is drawn at the medium width and
+reflowed immediately after — in time for the frame, but not for a
+measurement taken in the same breath.
+
+Assigning it later works just as well. When your data arrives and you find
+you want the wide one, the panel reflows to its new width without being
+redrawn — so nothing in it is rebuilt or loses its state — and the columns
+beside it move over.
 
 **Type:** `"small" | "medium" | "large"`
 

package/skill/SKILL.md

@@ -177,11 +177,13 @@ Those numbers assume a nav sidebar of around 170px; without a sidebar, add that
 
 A panel's width depends only on the size of the window, never on what else is open. So opening or closing a panel never resizes the ones already on screen, and never reflows what someone was reading. A lone small leaves its other half empty, and that is exactly where the next small lands. When more columns fit than the standard 1280px page holds (three smalls, say), the page itself grows, staying centred, to hold them.
 
+The panel is sized before your handler runs, so anything inside it that measures its own box — a chart, a virtualised list, a column count — gets a real one from the first frame rather than a zero-width one. A new panel starts at whatever `layout` says at that point, which is the default, so a handler that *assigns* `layout` is drawn at the medium width and reflowed immediately after. Assigning it later works too: the panel reflows to its new width without being redrawn, so nothing in it is rebuilt or loses its state, and the columns beside it move over.
+
 **The rest of `$page`:**
 
 - `params` and `path`: read-only.
 - `title`: shown in `document.title` while this panel is the top one.
-- `layout`: as above. It's read once, right after your handler runs, so set it there.
+- `layout`: as above, and live — set it whenever you like and the panel reflows.
 - `loading`: set it while you're fetching. A new panel waits a moment before sliding in, so it can arrive with real content instead of empty, and shows a loading indicator if the wait drags on.
 - `close()`: closes this panel, wherever it sits in the stack.
 - `requestClose`: your chance to say no. Everything that would close the panel waits for it: Escape, the panel's own ✕ or Cancel button, the browser's back button, a link that would close it, `S.panels.close()`. Return `false` to keep the panel open.
@@ -203,6 +205,8 @@ S.panels.close("/projects/7"); // that panel, wherever it is
 
 Closing the top panel goes back to whatever was underneath it. Closing one that *isn't* on top takes just that one away: the columns to its right stay where they are and keep their state, and the URL doesn't change, because the top panel didn't move. Either way it becomes a history entry, so the browser's back button brings the panel back.
 
+A closed panel is torn down at once: its `A.clean()` hooks run the moment it closes, so subscriptions, timers and requests stop there and then. Only its element hangs around, inert and frozen, for the length of the exit animation.
+
 Staffa itself contributes two things: the Escape key, which closes the top panel (and jumps to the navigation once you're at the bottom of the stack), and making the browser's back button do the right thing. Both ask `requestClose` first.
 
 <a id="ancestors"></a>
@@ -272,7 +276,7 @@ Components share naming conventions for options: `attrs` (outermost element), `c
 
 ### Layout & containers
 
-- **`S.main(opts)`**: app shell, a sticky header with `icon`, `title`, `subtitle`, `menu`; scrollable content area; footer. Set `maxWidth` to center the content. Give it a `nav` for a sidebar that collapses to a hamburger below 640 px — where the nav becomes a full page sliding in from the left, handing over to the chosen screen with a matching slide in from the right. Instead of a single `content` slot it can take a `routes` table — see [Panel-stack navigation](#panel-stack-navigation).
+- **`S.main(opts)`**: app shell, a sticky header with `icon`, `title`, `subtitle`, `menu`; scrollable content area; footer. Set `maxWidth` to center the content. Give it a `nav` for a sidebar that collapses to a hamburger below 640 px — where the nav becomes a full page sliding in from the left, handing over to the chosen screen with a matching slide in from the right. Its `items` may be a reactive array; adding or removing one redraws just the sidebar, never the content beside it. Instead of a single `content` slot it can take a `routes` table — see [Panel-stack navigation](#panel-stack-navigation).
 - **`S.box(opts | content)`**: surface with optional `header`/`footer` and padded body. Pass a function for shorthand `{ content }`. `close: true` adds a ✕ that closes the panel the box is in (see [Panel-stack navigation](#panel-stack-navigation)); `close: fn` runs your own dismissal.
 - **`S.tabs(opts)`**: tablist with live panels and keyboard navigation. More tabs than fit make the strip scroll, with a ‹ / › button appearing at whichever end still has something to reach — so it's not just a swipe target. Selecting a tab any other way (the arrow keys, a `bind` written from elsewhere) scrolls it into view.
 - **`S.form(opts | content)`**: form aligning fields in a column or responsive grid, with an `actions` bar. Prevents the default page reload.

package/src/components/main.ts

@@ -115,6 +115,11 @@ export interface MainOptions<R = Routes> {
 	 * mode) or a button+dropdown (in `"button"` mode). The sidebar automatically
 	 * collapses to a button when the shell is too narrow — which there opens the
 	 * nav as a full page sliding in from the left, not as a dropdown.
+	 *
+	 * `items` may be a reactive array: the shell reads it inside the sidebar's own
+	 * scope, so an item arriving or leaving redraws the sidebar and nothing else.
+	 * The content beside it — in routed mode, the whole panel stack — is left
+	 * alone.
 	 */
 	nav?: MenuOptions;
 	/**
@@ -303,10 +308,14 @@ A.insertGlobalCss({
 // silently degrades to `any`. Callers that pass no `routes` are unaffected —
 // `MainOptions`'s own default kicks in there.
 export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
+	// Whether there is a nav to show is deliberately NOT worked out here: `items`
+	// may well be a reactive array, and reading it in the shell's own scope would
+	// subscribe *the whole shell* to it — an item arriving later would redraw the
+	// lot, and in routed mode that means tearing the panel stack down and building
+	// it again from the URL. So every use below reads `nav.items` inside its own
+	// scope, and only that scope redraws.
 	const nav = opts.nav;
 	const navPos = opts.navPosition ?? "left";
-	const hasNav = nav != null && nav.items.length > 0;
-	const navCls = hasNav ? (navPos === "button" ? ".s-nav-btn-only" : `.s-nav-${navPos}`) : "";
 	// Whether the narrow-screen full-page nav is showing. Per shell, so nested or
 	// sibling `main()`s can't fight over it.
 	const $nav = A.proxy({ open: false });
@@ -317,13 +326,26 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 	}
 	// The panel stack owns the routing, so it starts observing (and building its
 	// stack from) the URL before any of the shell is drawn — the top bar's back
-	// button already needs to know how deep we are.
-	const ctl = routes ? new PanelController({ ...opts, routes, title: opts.title }) : null;
+	// button already needs to know how deep we are. Its options are listed one by
+	// one rather than spread from `opts`: a spread reads every key, which on a
+	// proxied options object subscribes this scope to all of them.
+	const ctl = routes
+		? new PanelController({ routes, notFound: opts.notFound, stacking: opts.stacking, title: opts.title })
+		: null;
 	// Routed mode caps the shell to the ensemble width the layout engine publishes,
 	// rather than to `maxWidth`.
 	const capWidth = ctl ? null : opts.maxWidth;
 
-	const root = A(`div.s-main${navCls}${ctl ? ".s-routed" : ""}`, opts.attrs, () => {
+	const root = A(`div.s-main${ctl ? ".s-routed" : ""}`, opts.attrs, () => {
+		// Which nav mode the shell is in — sidebar or button — as a class on the
+		// shell, for the CSS below to hang the responsive collapse off. Its own
+		// scope (see `nav` above), so a nav appearing or emptying out only retags
+		// the shell rather than redrawing it.
+		A(() => {
+			if (nav == null || !nav.items.length) return;
+			A(navPos === "button" ? ".s-nav-btn-only" : `.s-nav-${navPos}`);
+		});
+
 		// Top bar.
 		A(() => {
 			const hasBar =
@@ -331,7 +353,7 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 				opts.subtitle != null ||
 				opts.icon != null ||
 				opts.menu != null ||
-				hasNav;
+				(nav != null && nav.items.length > 0);
 			if (!hasBar) return;
 			A("header.s-s.neutral", opts.topbarAttrs, () => {
 				A("div.s-bar", () => {
@@ -341,7 +363,7 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 					});
 					// Nav trigger button — visible when sidebar is hidden (button mode or narrow viewport).
 					A(() => {
-						if (!hasNav) return;
+						if (nav == null || !nav.items.length) return;
 						// .s-nav-trigger: CSS toggles display based on sidebar visibility.
 						A("div.s-nav-trigger", () => drawNavTrigger(nav, $nav));
 					});
@@ -371,17 +393,20 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 				A(() => {
 					if (capWidth != null) A("max-width:", capWidth);
 				});
-				if (hasNav && navPos !== "button") {
+				// The sidebar, in its own scope so a changing item list redraws just
+				// it — never the content area beside it (see `nav` above).
+				A(() => {
+					if (nav == null || !nav.items.length || navPos === "button") return;
 					A(`nav.s-nav-panel.s-nav-${navPos}`, opts.navAttrs, () => {
 						drawMenu(nav.items);
 					});
 					A("div.s-nav-sep aria-hidden=true");
-				}
+				});
 				drawMainContent(opts, ctl);
 			});
 			// The narrow-screen nav page, laid over the body it slides across.
 			A(() => {
-				if (hasNav && $nav.open) drawNavPage(nav, opts.navPageAttrs, $nav);
+				if (nav != null && nav.items.length && $nav.open) drawNavPage(nav, opts.navPageAttrs, $nav);
 			});
 		});
 
@@ -406,7 +431,7 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 	// shell width calls for), which focuses its current item. Listens on
 	// `document` so it works wherever focus is, but bows out while another overlay
 	// (a dialog, or an already-open menu) is up — those handle Escape themselves.
-	if (hasNav || ctl) {
+	if (nav != null || ctl) {
 		const onKey = (e: KeyboardEvent) => {
 			if (e.key !== "Escape" || e.defaultPrevented) return;
 			// An open dialog or menu owns Escape itself — don't also jump to the nav.
@@ -427,7 +452,9 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): void {
 				void ctl.closeTop();
 				return;
 			}
-			if (!hasNav) return;
+			// Whether there is a nav at all is asked of the DOM, not of `nav.items`:
+			// a subscription here would be one on the shell's own scope again, and
+			// an empty nav simply has neither of the two elements below.
 			// `offsetParent` is null when the sidebar is hidden (display:none).
 			const panel = root.querySelector<HTMLElement>(".s-nav-panel");
 			if (panel?.offsetParent != null) {