staffa 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -37,8 +37,8 @@ export { buttonChooser, type ButtonChooserOptions } from "./components/buttonCho
 export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.js";
 export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
 export { form, type FormOptions } from "./components/form.js";
-export { main, type MainOptions } from "./components/main.js";
-export { panels, type Page, type Routes, type RouteHandler, type RouteTable, type PathParams, type SegParams } from "./components/panels.js";
+export { main, closeNav, type MainOptions } from "./components/main.js";
+export { panels, type Page, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
 export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
 export { dialog, alert, confirm, prompt, isDialogOpen, type DialogOptions } from "./components/dialog.js";
 export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";

package/dist/index.js

@@ -40,7 +40,7 @@ export { buttonChooser } from "./components/buttonChooser.js";
 export { buttonGroup } from "./components/buttonGroup.js";
 export { checkbox } from "./components/checkbox.js";
 export { form } from "./components/form.js";
-export { main } from "./components/main.js";
+export { main, closeNav } from "./components/main.js";
 export { panels } from "./components/panels.js";
 export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu } from "./components/menu.js";
 export { dialog, alert, confirm, prompt, isDialogOpen } from "./components/dialog.js";

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 pe="staffa:darkMode",$e=S.proxy({value:Ie()});function Ie(){try{let e=localStorage.getItem(pe);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function Be(e){$e.value=e;try{e===void 0?localStorage.removeItem(pe):localStorage.setItem(pe,e?"dark":"light")}catch{}}function ke(e=!1){let t=$e.value;return t===void 0&&!e?S.darkMode():t}S(()=>{ke()?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 De="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";S.insertGlobalCss({[`${De}`]:{"&":"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 d from"aberdeen";import Ee from"aberdeen";var U=640,Ge=0;function F(e="s"){return`${e}-${++Ge}`}function f(e,...t){e!=null&&(typeof e=="function"?e(...t):Ee("rich=",e))}var je="a[href], button, input, select, textarea, [tabindex]";function V(e,t){let n=i=>i instanceof HTMLElement&&!i.hasAttribute("disabled")&&i.getAttribute("aria-disabled")!=="true"&&i.tabIndex>=0&&i.getClientRects().length>0,o=(t?[...e.querySelectorAll(t)].find(n):void 0)??[...e.querySelectorAll(je)].find(n);return o?.focus(),o!=null}function I(e){queueMicrotask(()=>Ee(e))}import T from"aberdeen";T.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 B(e,t){let n=e.id??F("field"),o=()=>!!e.error;T("div.s-field",e.attrs,()=>{T(()=>{e.label!=null&&T(`label for=${n}`,()=>{f(e.label),e.required&&T("span.s-req aria-hidden=true #*")})}),t(n,o),T(()=>{e.help!=null&&!e.error&&T("div.s-help",()=>f(e.help))}),T(()=>{e.error&&T("div.s-error role=alert #",e.error)})})}function Y(e,t,n,o){T(`id=${t}`),e.name&&T(`name=${e.name}`),T(()=>{e.disabled&&T("disabled=true")}),T(()=>{e.required&&T("aria-required=true")}),T(()=>T("aria-invalid=",n()?"true":"false")),o&&T("bind=",o)}d.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 We(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function Ne(e){let t=F("ac-menu"),n=d.proxy({query:"",open:!1,active:0}),o=()=>(typeof e.options=="function"?e.options():e.options).map(We),i=()=>{let u=e.bind?.value;return u==null||u===""?[]:Array.isArray(u)?u:[u]},r=u=>o().find(b=>b.value===u)?.label??u;if(!e.multi){let u=e.bind?d.peek(e.bind,"value"):void 0;typeof u=="string"&&u&&(n.query=d.peek(()=>r(u)))}let s=()=>{let u=new Set(i()),b=o();e.multi&&(b=b.filter(m=>!u.has(m.value)));let c=n.query.trim().toLowerCase();return c&&(b=b.filter(m=>m.label.toLowerCase().includes(c))),b},a=(u,b)=>{if(e.multi){let c=Array.isArray(e.bind?.value)?[...e.bind.value]:[];c.includes(u)||c.push(u),e.bind&&(e.bind.value=c),n.query=""}else e.bind&&(e.bind.value=u),n.query=r(u),n.open=!1;n.active=0,b?.focus()},l=u=>{if(!e.bind)return;let b=e.bind.value??[];e.bind.value=b.filter(c=>c!==u)};B(e,(u,b)=>{d("div.s-ac",e.inputAttrs,()=>{d(()=>d("aria-invalid=",b()?"true":"false"));let c;d("div.s-control",()=>{d("click=",()=>c?.focus()),d(()=>{if(e.multi)for(let m of i())d("span.s-chip",()=>{d("span #",d.peek(()=>r(m))),d("button type=button aria-label=",`Remove ${m}`,()=>{d("#\xD7"),d("click=",x=>{x.stopPropagation(),l(m),c?.focus()})})})}),c=d("input type=text role=combobox autocomplete=off",()=>{d(`id=${u} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&d("placeholder=",e.placeholder),e.disabled&&d("disabled=true"),e.required&&d("aria-required=true"),d("bind=",d.ref(n,"query")),d(()=>d("aria-expanded=",n.open?"true":"false")),d(()=>{let x=s()[n.active];d("aria-activedescendant=",n.open&&x?`${t}-opt-${n.active}`:"")}),d("input=",()=>{n.open=!0,n.active=0}),d("focus=",()=>{n.open=!0}),d("blur=",()=>{setTimeout(()=>y(),150)}),d("keydown=",m=>g(m,c))})}),d(()=>{if(!n.open)return;let m=s(),x=n.query.trim(),z=e.allowCustom!==!1&&x!==""&&!m.some(X=>X.label.toLowerCase()===x.toLowerCase());d("ul.s-menu.s-s.neutral.shadow role=listbox",`id=${t}`,()=>{m.forEach((X,ue)=>{d("li.s-option role=option",`id=${t}-opt-${ue}`,()=>{d(()=>d("aria-selected=",n.active===ue?"true":"false")),d("#",X.label),d("mousedown=",Fe=>Fe.preventDefault()),d("click=",()=>a(X.value,c)),d("mousemove=",()=>{n.active=ue})})}),z&&d("li.s-option.s-add role=option",()=>{d("#",`Add "${x}"`),d("mousedown=",X=>X.preventDefault()),d("click=",()=>a(x,c))}),m.length===0&&!z&&d("li.s-empty #No matches")})}),d(()=>{if(e.name)if(e.multi)for(let m of i())d("input type=hidden",()=>{d("name=",e.name),d("value=",m)});else d("input type=hidden",()=>{d("name=",e.name),d("value=",i()[0]??"")})})})});function g(u,b){let c=s(),m=c.length-1;if(u.key==="ArrowDown")u.preventDefault(),n.open=!0,n.active=Math.min(m,n.active+1);else if(u.key==="ArrowUp")u.preventDefault(),n.active=Math.max(0,n.active-1);else if(u.key==="Enter"){u.preventDefault();let x=c[n.active];x?a(x.value,b):e.allowCustom!==!1&&n.query.trim()?a(n.query.trim(),b):n.open&&(n.open=!1)}else if(u.key==="Escape")n.open&&(u.preventDefault(),n.open=!1,e.multi||(n.query=r(i()[0]??"")));else if(u.key==="Backspace"&&e.multi&&n.query===""){let x=i();x.length&&l(x[x.length-1])}}function y(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?a(n.query.trim()):n.query=r(i()[0]??"")}}import L from"aberdeen";import h from"aberdeen";import*as k from"aberdeen/route";var me={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 Z(e){let t=j(e);return t==="/"?[]:t.slice(1).split("/")}function Ae(e){let t=Z(e),n=t.map((o,i)=>{if(!o.startsWith("[")||!o.endsWith("]"))return{kind:"lit",value:o};let r=/^\[\.\.\.([A-Za-z_$][\w$]*)\]$/.exec(o);if(r){if(i!==t.length-1)throw new Error(`Staffa: "${o}" must be the last segment of route "${e}"`);return{kind:"rest",name:r[1]}}let s=/^\[([A-Za-z_$][\w$]*)(?:=([A-Za-z_$][\w$]*))?\]$/.exec(o);if(!s)throw new Error(`Staffa: malformed param "${o}" in route "${e}"`);let[,a,l]=s;if(l&&!(l in me))throw new Error(`Staffa: unknown matcher "${l}" in route "${e}" (known: ${Object.keys(me).join(", ")})`);return{kind:"param",name:a,matcher:l}});return{key:e,segs:n}}function Ke(e){try{return decodeURIComponent(e)}catch{return e}}function fe(e,t){let n={};for(let o=0;o<e.segs.length;o++){let i=e.segs[o];if(i.kind==="rest")return o>=t.length?null:(n[i.name]=t.slice(o).join("/"),n);if(o>=t.length)return null;let r=t[o];if(i.kind==="lit"){if(r!==i.value)return null}else if(i.matcher){let s=me[i.matcher](r);if(s===void 0)return null;n[i.name]=s}else n[i.name]=Ke(r)}return e.segs.length===t.length?n:null}var Oe=450,_e=300,Xe=1280,ae=24,Ue=360,Te=2;h.insertGlobalCss({":root":`--s-panel-ms:${Oe}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:-${ae/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: ${U}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,le=class{compiled;ancestors;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;intent=null;settling=null;queued=null;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(([o,i])=>({...Ae(o),draw:i})),this.ancestors=Object.entries(t.ancestors??{}).filter(o=>o[1]!=null).map(([o,i])=>({...Ae(o),fn:i}));let n=k.setGuard((o,i)=>{let r=n?n(o,i):!0;return r===!1?!1:r===!0?this.checkChange(o):r.then(s=>s===!1?!1:this.checkChange(o))});h(()=>{let o=this.computeTarget();h.peek(()=>this.propose(o))}),this.interceptLinks(),this.watchTitle(),h.clean(()=>{for(let o of this.timers)clearTimeout(o);this.timers.clear(),this.queued?.settle(!1),this.queued=null,k.setGuard(n),P===this&&(P=null)})}resolve(t){let n=Z(t);for(let o of this.compiled){let i=fe(o,n);if(i)return{draw:o.draw,params:i}}return{draw:this.opts.notFound??Je,params:{}}}matches(t){let n=Z(t);return this.compiled.some(o=>fe(o,n)!=null)}deriveStack(t){let n=j(t),o=this.askAncestors(n),i=o?o.map(j):this.prefixesOf(n),r=[];for(let s of i)s!==n&&!r.includes(s)&&this.matches(s)&&r.push(s);return r.push(n),r}askAncestors(t){let n=Z(t);for(let o of this.ancestors){let i=fe(o,n);if(i)return o.fn(i,t)??void 0}}prefixesOf(t){let n=Z(t),o=[];for(let i=1;i<n.length;i++)o.push("/"+n.slice(0,i).join("/"));return o}targetFor(t,n){return Array.isArray(n)?n.map(String).concat(j(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,h.peek(k.current,"nav"))}commit(t,n){this.geom=void 0;let o=new Map(this.live.map(r=>[r.path,r])),i=[];for(let r of t){let s=o.get(r);if(s){o.delete(r),i.push(s);continue}let a=this.createEntry(r,i.length);n!=="load"&&n!=="back"&&(a.enter=!0),i.push(a),this.byId.set(a.id,a)}for(let r of o.values())this.beginClose(r);this.live=i,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:o,params:i}=this.resolve(t),r={id:this.nextId++,order:n,path:t,draw:o,$ui:h.proxy({holding:!1}),layout:"medium",width:0};return r.$page=h.proxy({params:i,path:t,close:()=>this.closePath(r.path)}),r}beginClose(t){t.closing=!0,t.el&&(t.el.style.zIndex=String(Te*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 o=()=>{clearTimeout(i),this.timers.delete(i),n.remove()};n.addEventListener("transitionend",r=>{r.target===n&&r.propertyName==="opacity"&&o()});let i=setTimeout(o,Oe+80);this.timers.add(i)}intended(){return this.intent??this.paths()}issue(t,n){return this.intent=t,this.settling?(this.queued?.settle(!1),new Promise(o=>{this.queued={run:n,settle:o}})):this.start(n)}start(t){let n=i=>{this.settling=null;let r=this.queued;return this.queued=null,i&&r?this.start(r.run).then(r.settle,()=>r.settle(!1)):(this.intent=null,r?.settle(!1)),i},o=Promise.resolve(t()).then(n,i=>(console.error(i),n(!1)));return this.settling=o,o}goBackTo(t){return this.issue(t,()=>k.back({path:t[t.length-1]},{state:{panels:t.slice(0,-1)}}))}closeDownTo(t){let n=this.intended();return t<0||t>=n.length-1?Promise.resolve(!1):this.goBackTo(n.slice(0,t+1))}closeTop(){return this.closeDownTo(this.intended().length-2)}closePath(t){let n=this.intended(),o=n.indexOf(j(t));if(o<0)return Promise.resolve(!1);if(o===n.length-1)return this.closeDownTo(o-1);let i=n.filter((r,s)=>s!==o);return this.issue(i,()=>k.go({path:i[i.length-1],search:h.peek(()=>({...k.current.search})),hash:h.peek(k.current,"hash"),state:{panels:i.slice(0,-1)}}))}closePanelEl(t){let n=this.live.find(o=>o.el===t);return n?this.closePath(n.path):Promise.resolve(!1)}navigate(t,n,o=!1,i){let r;try{r=new URL(t,location.href)}catch{return}let s=j(r.pathname),a=Object.fromEntries(new URLSearchParams(r.search)),l=r.hash,g=this.intended(),y=g.indexOf(s);if(y>=0&&y<g.length-1&&!i){this.closeDownTo(y);return}if(y>=0&&!i){if(r.search===location.search&&(r.hash||"")===(location.hash||""))return;this.issue(g,()=>k.go({path:s,search:a,hash:l,state:{panels:g.slice(0,-1)}}));return}let u=n==null?-1:g.indexOf(n),b=i?i.map(j).filter(c=>c!==s):u<0?this.deriveStack(s).slice(0,-1):g.slice(0,o?u:u+1);this.issue([...b,s],()=>k.go({path:s,search:a,hash:l,state:{panels:b}}))}pushPath(t,n){let o=this.intended();this.navigate(t,o[o.length-1]??null,n)}openPath(t,n){this.navigate(t,null,!1,n)}interceptLinks(){k.interceptLinks((t,n)=>{let o=n.closest(".s-panel"),i=o?this.live.find(r=>r.el===o):void 0;return this.navigate(t.href,i?.path??null,n.getAttribute("data-panel")==="replace"),!0})}watchTitle(){let t=document.title;h(()=>{let o=this.byId.get(this.$state.topId)?.$page.title,i=typeof this.opts.title=="string"?this.opts.title:void 0,r=o&&i?`${o} \xB7 ${i}`:o||i;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,o)=>this.drawPanel(Number(o)),(n,o)=>[n,Number(o)])});if(typeof ResizeObserver<"u"){let n=new ResizeObserver(()=>this.layout());n.observe(t);let o=t.parentElement?.parentElement;o&&n.observe(o),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 o;h(()=>{let i=n.$page.layout;n.layout=i==="small"||i==="large"?i:"medium";let r=this.roomFor(n.layout);r&&(n.width=r,o&&(o.style.width=`${r}px`,this.scheduleLayout()))}),o=h(`section.s-panel${n.width?` w:${n.width}px`:""}`,"destroy=",i=>this.playExit(n,i),()=>{let i=h("div.s-content",()=>{n.draw(n.$page),k.persistScroll(n.path)});Ze(i),h(()=>{!n.$page.loading||n.$ui.holding||h("div.s-panel-loading aria-hidden=true",()=>{h("i"),h("i"),h("i")})})}),n.el=o,n.placed=!1,o.style.transition="none",h.clean(()=>{n.el===o&&(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,o=n?.parentElement;if(!t||!n||!o)return;let i=o.getBoundingClientRect().width;if(!i)return;let r=0;for(let l of n.children)l!==t&&(r+=l.getBoundingClientRect().width);let s=Math.max(0,Math.min(Xe,i)-r),a=(s-ae)/2;return{total:i,chrome:r,small:a>=Ue?a:s,medium:s,large:Math.max(0,i-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 o=this.live.length;if(!o||this.live.some(c=>!c.el))return;this.geom=void 0;let i=this.geometry();if(!i)return;let r=this.opts.stacking!==!1,s=this.lastBodyW!==i.total;s&&(this.lastBodyW=i.total,n.classList.add("s-shell-snap"));let a=c=>i[c.layout],l=o-1,g=a(this.live[l]);if(r)for(let c=o-2;c>=0;c--){let m=g+ae+a(this.live[c]);if(m>i.large)break;g=m,l=c}let y=Math.min(i.large,Math.max(i.medium,g));for(let c=l;c<o;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",`${i.chrome+y}px`);let u=[],b=0;for(let c=0;c<o;c++){let m=this.live[c],x=m.el,z=c>=l;Ve(x,z?b:0,m.width,Te*c+1),z&&(b+=m.width+ae),x.classList.toggle("s-panel-sep",z&&c>l),x.classList.toggle("s-panel-hidden",!z),x.toggleAttribute("inert",!z),!m.placed&&(u.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&&x.classList.add("s-panel-enter"))}(u.length||s)&&t.offsetWidth,s&&n.classList.remove("s-shell-snap");for(let c of u)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())},_e);this.timers.add(n)}};function Ve(e,t,n,o){e.style.left=`${t}px`,e.style.width=`${n}px`,e.style.zIndex=String(o)}function Ye(e){let t=[...e].reverse(),n=0,o=()=>{for(;n<t.length;){let i=h.peek(t[n++].$page,"requestClose");if(!i)continue;let r;try{r=i()}catch(s){return console.error(s),!1}if(r===!1)return!1;if(r!==!0)return Promise.resolve(r).then(s=>s===!1?!1:o())}return!0};return o()}function Qe(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function Je(e){h("p fg:$s-muted",()=>h("#",`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(),h.clean(()=>n.disconnect())}var et={push(e){se().pushPath(e,!1)},replace(e){se().pushPath(e,!0)},open(e,t){se().openPath(e,t)},close(e){let t=se();return e==null?t.closeTop():t.closePath(e)},get stack(){return P?P.$state.paths:[]}};function se(){if(!P)throw new Error("Staffa: S.panels needs a routed S.main() (one with `routes`) to be mounted");return P}function Me(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)}L.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;L("section.s-box.s-s.neutral.shadow",t.attrs,()=>{L(()=>{t.header!=null?L("header.s-s.neutral",t.headerAttrs,()=>{f(t.header),t.close&&Se(t.close)}):t.close&&Se(t.close)}),L("div",t.contentAttrs,()=>{f(t.content)}),L(()=>{t.footer!=null&&L("footer.s-s.neutral",t.footerAttrs,()=>f(t.footer))})})}function Se(e){L("button.s-box-close type=button aria-label=Close",()=>{L("click=",t=>{typeof e=="function"?e():Me(t.currentTarget)}),L("span aria-hidden=true #\u2715")})}import D from"aberdeen";D.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";D(`${n}.s-btn.s-s.shadow`,t.attrs,()=>{t.href!=null?(D(`href=${t.href} role=button`),t.disabled&&D("aria-disabled=true")):(D("type=",t.type??"button"),t.disabled&&D("disabled=true")),t.ariaLabel&&D("aria-label=",t.ariaLabel),t.click&&D("click=",t.click),f(t.icon),f(t.content)})}import he 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 W(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 o of e.buttons)O(o);f(e.content)})}function nt(e){he(()=>{let t=e.bind.value;W({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,o])=>({content:o,ariaLabel:typeof o=="function"?n:void 0,attrs:t===n?".primary":".neutral",click:()=>{e.bind.value=e.allowDeselect&&t===n?void 0:n}}))})}),e.name&&he(()=>he(`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??F("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&&f(e.label),e.required&&E("span.s-req aria-hidden=true #*")})}),E(()=>{e.help!=null&&!e.error&&E("div.s-help",()=>f(e.help))}),E(()=>{e.error&&E("div.s-error role=alert #",e.error)})})}import N from"aberdeen";N.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;N("form.s-form",t.attrs,()=>{N(()=>{N(".grid=",t.layout==="grid")}),N("submit=",n=>{if(n.preventDefault(),t.submit){let o=new FormData(n.target),i={};for(let r of new Set(o.keys())){let s=o.getAll(r);i[r]=s.length===1?s[0]:s}t.submit(i,n)}}),f(t.content),N(()=>{t.actions&&N("footer",t.actionsAttrs,()=>f(t.actions))})})}import p from"aberdeen";import{current as Re}from"aberdeen/route";import A from"aberdeen";import{matchCurrent as at,current as Le}from"aberdeen/route";import rt from"aberdeen";var ee={size:24,color:"currentColor",strokeWidth:2,cap:"round",join:"round"};function st(e,t){let n=t.size??ee.size,o=rt('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none',"width=",n,"height=",n,"stroke=",t.color??ee.color,"stroke-width=",t.strokeWidth??ee.strokeWidth,"stroke-linecap=",t.cap??ee.cap,"stroke-linejoin=",t.join??ee.join,t.attrs);o.innerHTML=e}function Q(e){return(t={})=>st(e,t)}var ge=Q('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>'),Ce=Q('<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 de(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 i=[...n.currentTarget.querySelectorAll(".s-menu-item")].filter(l=>l.getAttribute("aria-disabled")!=="true");if(!i.length)return;let r=i.indexOf(document.activeElement),s=n.key==="ArrowUp"?-1:1,a=n.key==="Home"?0:n.key==="End"?i.length-1:r<0?s>0?0:i.length-1:(r+s+i.length)%i.length;i[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(()=>{at(n.href)&&A("aria-current=page")})),n.disabled&&A("aria-disabled=true"),A("click=",o=>{if(n.disabled){o.preventDefault();return}t?.(),n.click?.(o)}),n.icon&&A("span.s-menu-icon",()=>f(n.icon)),f(n.label)})}}var G=A.proxy({opts:null});function q(){let e=G.opts?.anchor;G.opts=null,e?.focus()}function te(e){let t=G.opts;return t!=null&&(e==null||t.anchor===e)}function ne(e){te(e)&&q()}function lt(e,t){let n=e.offsetWidth,o=e.offsetHeight,i=window.innerWidth,r=window.innerHeight,s=4,a=t.left;a+n>i-8&&(a=Math.max(8,t.right-n));let l=t.bottom+s;l+o>r-8&&t.top-o-s>=8&&(l=t.top-o-s),e.style.left=Math.max(8,a)+"px",e.style.top=Math.max(8,l)+"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,()=>{de(e.items,q)}),n=r=>{let s=r.target;!t.contains(s)&&(e.closeOnAnchorClick||!e.anchor.contains(s))&&q()},o=r=>{(r.key==="Escape"||r.key==="Tab")&&(r.preventDefault(),q())},i=A.peek(Le,"path");A(()=>{Le.path!==i&&q()}),document.addEventListener("click",n,!0),document.addEventListener("keydown",o,!0),A.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",o,!0)}),requestAnimationFrame(()=>{if(!document.body.contains(t))return;let r=e.at?{left:e.at.x,right:e.at.x,top:e.at.y,bottom:e.at.y}:e.anchor.getBoundingClientRect();lt(t,r),V(t,".s-menu-item[aria-current=page]")})});function oe(e){return G.opts=e,q}function dt(e){let t=null;A.clean(()=>{G.opts?.anchor===t&&q()}),A("contextmenu=",n=>{n.preventDefault(),t=n.currentTarget,oe({items:e.items,anchor:t,at:{x:n.clientX,y:n.clientY},closeOnAnchorClick:!0,dropdownAttrs:e.dropdownAttrs})})}function ct(e){let t=null;A.clean(()=>{G.opts?.anchor===t&&q()}),O({icon:()=>ge({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){q();return}oe({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}import v from"aberdeen";import K from"aberdeen";function be(e={}){B(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),Y(e,t,n,e.bind)})})}v.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 _=v.proxy({}),ve=0,He=v.derive(()=>{let e=Object.keys(_);if(e.length)return e[e.length-1]});function ye(){return He.value!=null}I(()=>{v.onEach(_,({resolve:e,opts:t},n)=>{let o=()=>{delete _[n]};v.clean(()=>{t.onClose?.(),e()});let i=v.derive(()=>He.value!=n);v("div.s-backdrop create=hidden destroy=hidden .hidden=",i,"click=",()=>{t.allowCancel!==!1&&o()});let r=v("div.s-dialog.neutral.s-s.extra-shadow create=hidden destroy=hidden",t.attrs,()=>{v(()=>{t.header!=null&&v("header.s-s.neutral",t.headerAttrs,()=>f(t.header))}),v("div",t.contentAttrs,()=>{f(t.content,o)}),v(()=>{t.footer!=null&&v("footer.s-s.neutral",t.footerAttrs,()=>f(t.footer))})});requestAnimationFrame(()=>{document.body.contains(r)&&V(r)})})});function ce(e){ve||document.addEventListener("keydown",n=>{if(n.key!=="Escape"||n.defaultPrevented)return;let o=v.unproxy(_);for(let i=ve;i>0;i--)if(o[i]){n.preventDefault(),o[i].opts.allowCancel!==!1&&delete _[i];break}});let t=++ve;return e.cancelWithScope!==!1&&v.clean(()=>{delete _[t]}),new Promise(n=>{_[t]={resolve:n,opts:e}})}function ut(e,t={}){return ce({header:"Alert",allowCancel:!0,content:n=>{v("p",()=>{v("#",e)}),W({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"OK",click:n})}})},...t})}function pt(e,t={}){return new Promise(n=>{let o=!1;ce({header:"Confirm",allowCancel:!0,content:i=>{v("p",()=>{v("#",e)}),W({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral",click:i}),O({content:"OK",click:()=>{o=!0,i()}})}})},...t,onClose:()=>{n(o),t.onClose?.()}})})}function ft(e,t="",n={}){return new Promise(o=>{let i=null;ce({header:"Input",allowCancel:!0,content:r=>{v("p",()=>{v("#",e)});let s=v.proxy({value:t});v("form display:contents",()=>{v("submit=",a=>{a.preventDefault(),i=s.value,r()}),be({bind:v.ref(s,"value")}),W({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral",type:"button",click:r}),O({content:"OK",type:"submit"})}})})},...n,onClose:()=>{o(i),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: ${U}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",o=p.proxy({open:!1}),i=e.routes;if(i!=null&&e.content!=null)throw new Error("Staffa: S.main() takes either `content` or `routes`, not both");let r=i?new le({routes:i,notFound:e.notFound,ancestors:e.ancestors,stacking:e.stacking,title:e.title}):null,s=r?null:e.maxWidth,a=p(`div.s-main${r?".s-routed":""}`,e.attrs,()=>{p(()=>{t==null||!t.items.length||p(n==="button"?".s-nav-btn-only":`.s-nav-${n}`)}),p(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||t!=null&&t.items.length>0)&&p("header.s-s.neutral",e.topbarAttrs,()=>{p("div.s-bar",()=>{p(()=>{s!=null&&p("max-width:",s)}),p(()=>{t==null||!t.items.length||p("div.s-nav-trigger",()=>gt(t,o))}),p(()=>{e.icon!=null&&p("div.s-header-icon",()=>f(e.icon))}),p("div.s-titles",()=>{p(()=>{e.title!=null&&p("div.s-title",()=>f(e.title))}),p(()=>{e.subtitle!=null&&p("div.s-subtitle",()=>f(e.subtitle))})}),p(()=>{e.menu&&p("div.s-menu",()=>f(e.menu))})})})}),p("div.s-body",()=>{p("div.s-body-inner",()=>{p(()=>{s!=null&&p("max-width:",s)}),p(()=>{t==null||!t.items.length||n==="button"||(p(`nav.s-nav-panel.s-nav-${n}`,e.navAttrs,()=>{de(t.items)}),p("div.s-nav-sep aria-hidden=true"))}),yt(e,r)}),p(()=>{t!=null&&t.items.length&&o.open&&bt(t,e.navPageAttrs,o)})}),p(()=>{e.footer!=null&&p("footer",()=>{p("div.s-bar",()=>{p(()=>{s!=null&&p("max-width:",s)}),f(e.footer)})})})});if(t!=null||r){let l=g=>{if(g.key!=="Escape"||g.defaultPrevented||ye()||te())return;let y=a.querySelector(".s-nav-trigger button");if(o.open){g.preventDefault(),o.open=!1,y?.focus();return}if(r&&r.$state.paths.length>1){g.preventDefault(),r.closeTop();return}let u=a.querySelector(".s-nav-panel");if(u?.offsetParent!=null){let b=u.querySelector("[aria-current=page]")??u.querySelector(".s-menu-item:not([aria-disabled=true])");b&&(g.preventDefault(),b.focus());return}y&&(g.preventDefault(),y.click())};document.addEventListener("keydown",l),p.clean(()=>document.removeEventListener("keydown",l))}}var ie=null;function ht(){ie?.()}function gt(e,t){let n=null;p.clean(()=>{n&&ne(n)});let o=()=>{n&&ne(n)};O({icon:()=>p(()=>(t.open?Ce:ge)({size:"1.5em"})),ariaLabel:"Open navigation",attrs:".neutral .small",...e.button,click:i=>{n=i.currentTarget;let r=n.closest(".s-main");if(r!=null&&r.clientWidth<=U){t.open=!t.open;return}te(n)?ne(n):(ie=o,oe({items:e.items,anchor:n,dropdownAttrs:e.dropdownAttrs}))}})}function bt(e,t,n){let o=!1,i=()=>{o=!0,n.open=!1},r=p("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off",t,()=>de(e.items,i));ie=i,p.clean(()=>{ie===i&&(ie=null)});let s=p.peek(Re,"path");p(()=>{Re.path!==s&&i()});let a=r.closest(".s-main"),l=r.parentElement?.querySelector(":scope > .s-body-inner"),g=l?.querySelector(":scope > main");if(l?.setAttribute("inert",""),a!=null&&typeof ResizeObserver<"u"){let y=new ResizeObserver(()=>{a.clientWidth>U&&(n.open=!1)});y.observe(a),p.clean(()=>y.disconnect())}p.clean(()=>{l?.removeAttribute("inert"),o&&(g&&vt(g),a?.querySelector(".s-nav-trigger button")?.focus())}),requestAnimationFrame(()=>{document.body.contains(r)&&V(r,".s-menu-item[aria-current=page]")})}function vt(e){e.classList.add("s-slide-in"),e.offsetWidth,e.classList.remove("s-slide-in")}function yt(e,t){if(t){t.drawStack();return}let n=p("main",()=>{p("div.s-content",e.contentAttrs,()=>{f(e.content)})});xt(n)}function xt(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 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 wt(e){B(e,(t,n)=>{M("div.s-select_wrap",e.inputAttrs,()=>{M("select.s-input",()=>{Y(e,t,n),M("change=",o=>{e.bind&&(e.bind.value=o.target.value)}),M(()=>{let o=typeof e.options=="function"?e.options():e.options,i=e.bind?.value??"";e.placeholder!=null&&M("option",()=>{M("value= disabled=true hidden=true"),i||M("selected=true"),M("#",e.placeholder)});for(let r of o){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===i&&M("selected=true"),M("#",s.label)})}})})})})}import w from"aberdeen";var $t=Q('<path d="m15 18-6-6 6-6"/>'),kt=Q('<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 Et(e){let t=F("tabs"),n=(r,s)=>r.id??String(s),o=e.bind??w.proxy(n(e.tabs[0]??{label:""},0));e.tabs.length>0&&!e.tabs.some((r,s)=>n(r,s)===w.peek(()=>o.value))&&(o.value=n(e.tabs[0],0));let i=(r,s)=>{r.disabled||(o.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 l=n(s,a),g=w("button.s-tab type=button role=tab",()=>{w(`id=${t}-tab-${l} aria-controls=${t}-panel-${l}`),w(()=>{let y=o.value===l;w("aria-selected=",y?"true":"false"),w("tabindex=",y?"0":"-1"),y&&requestAnimationFrame(()=>Tt(g))}),s.disabled&&w("disabled=true"),w("click=",()=>i(s,a)),w("keydown=",y=>Ot(y,e.tabs,a,i)),f(s.icon),f(s.label)})})});ze(r,-1),ze(r,1),At(r)}),w("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{w(()=>{let r=o.value,s=e.tabs.findIndex((l,g)=>n(l,g)===r),a=e.tabs[s]??e.tabs[0];a&&(w(`id=${t}-panel-${n(a,s)} aria-labelledby=${t}-tab-${n(a,s)}`),f(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?$t:kt)({size:"1.1em"})})}function At(e){let t=e.parentElement;if(!t||typeof ResizeObserver>"u")return;let n=()=>{let i=e.scrollWidth-e.clientWidth;t.classList.toggle("s-can-left",e.scrollLeft>1),t.classList.toggle("s-can-right",e.scrollLeft<i-1)};e.addEventListener("scroll",n,{passive:!0});let o=new ResizeObserver(n);o.observe(e);for(let i of Array.from(e.children))o.observe(i);n(),w.clean(()=>{e.removeEventListener("scroll",n),o.disconnect()})}function Tt(e){let t=e.parentElement;if(!t||!e.isConnected)return;let n=parseFloat(getComputedStyle(t).fontSize)*2.6,o=e.getBoundingClientRect(),i=t.getBoundingClientRect();o.left<i.left+n?t.scrollBy({left:o.left-i.left-n,behavior:"smooth"}):o.right>i.right-n&&t.scrollBy({left:o.right-i.right+n,behavior:"smooth"})}function Ot(e,t,n,o){let i=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")i=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")i=(n-1+t.length)%t.length;else if(e.key==="Home")i=0;else if(e.key==="End")i=t.length-1;else return;e.preventDefault();let r=i>=n?1:-1;for(let s=0;s<t.length;s++){let a=t[i];if(a&&!a.disabled){o(a,i),e.currentTarget?.parentElement?.children[i]?.focus();return}i=(i+r+t.length)%t.length}}import C from"aberdeen";C.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 Mt(e={}){let t=e.autoGrow!==!1;B(e,(n,o)=>{let i=C("textarea.s-input",e.inputAttrs,()=>{t?(C(".s-autoGrow"),C("input=",r=>{qe(r.currentTarget),e.input&&e.input(r)})):(C("rows=",e.rows??4),C("resize:",e.resize??"vertical"),e.input&&C("input=",e.input)),e.placeholder!=null&&C("placeholder=",e.placeholder),e.value!=null&&!e.bind&&C("value=",e.value),e.change&&C("change=",e.change),Y(e,n,o,e.bind)});t&&requestAnimationFrame(()=>qe(i))})}function qe(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import $ from"aberdeen";import{grow as St,shrink as Pt}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,re=$.proxy({});I(()=>{$.peek(()=>$.isEmpty(re))&&$.isEmpty(re)||$("div.s-toasts",()=>{$.onEach(re,e=>{let{opts:t,id:n}=e,o=t.type==="danger"||t.type==="warning"?"alert":"status",i=t.type==null||t.type==="neutral"?"neutral":t.type,r=t.duration??6e3,s,a=null,l=()=>{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(()=>xe(n),r)},g=()=>{clearTimeout(s),s=void 0,a&&(a.style.transition="none",a.style.width="100%")};$.clean(()=>clearTimeout(s)),$(`div.s-toast.s-s.${i}.extra-shadow aria-live=polite role=${o}`,"create=",St,"destroy=",Pt,t.attrs,()=>{r>0&&($("mouseenter=",g),$("mouseleave=",l)),$("div.s-toast-body",()=>{$(()=>{t.title!=null&&$("div.s-toast-title",()=>f(t.title))}),$("div.s-toast-msg",()=>f(t.message))}),$(()=>{t.dismissible!==!1&&$("button.s-toast-close type=button aria-label=Dismiss",()=>{$("#\xD7"),$("click=",()=>xe(n))})}),r>0&&(a=$("div.s-toast-progress"))}),r>0&&requestAnimationFrame(l)})})});function xe(e){delete re[e]}function Ct(e){let t=++Lt;return re[t]={id:t,opts:e},()=>xe(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 J=H.proxy(void 0),R=null;typeof window<"u"&&window.addEventListener("scroll",()=>{J.value=void 0},{capture:!0,passive:!0});function Ht(e,t,n,o){let r=window.innerWidth,s=window.innerHeight,a=0,l=0;return o==="bottom"?(a=e.left+(e.width-t)/2,l=e.bottom+7,l+n>s-8&&(l=e.top-n-7)):o==="left"?(a=e.left-t-7,l=e.top+(e.height-n)/2,a<8&&(a=e.right+7)):o==="right"?(a=e.right+7,l=e.top+(e.height-n)/2,a+t>r-8&&(a=e.left-t-7)):(a=e.left+(e.width-t)/2,l=e.top-n-7,l<8&&(l=e.bottom+7)),{x:Math.max(8,Math.min(a,r-t-8)),y:Math.max(8,Math.min(l,s-n-8))}}function we(){R&&clearTimeout(R),R=setTimeout(()=>{J.value=void 0,R=null},100)}I(()=>{let e=J.value;if(!e)return;let{opts:t,anchor:n}=e,o=t.placement??"top",i=H("div.s-tt-tip.s-s.neutral.shadow role=tooltip visibility:hidden",t.attrs,()=>{H("mouseenter=",()=>{R&&(clearTimeout(R),R=null)}),H("mouseleave=",we),f(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(i))return;let{x:r,y:s}=Ht(n.getBoundingClientRect(),i.offsetWidth,i.offsetHeight,o);i.style.left=r+"px",i.style.top=s+"px",i.style.visibility=""})});function Rt(e){let t=n=>{R&&(clearTimeout(R),R=null),J.value={opts:e,anchor:n.currentTarget}};H("mouseenter=",t),H("mouseleave=",we),H("focusin=",t),H("focusout=",we),H.clean(()=>{J.value?.opts===e&&(J.value=void 0)})}export{dt as addContextMenu,Rt as addTooltip,ut as alert,Ne as autocomplete,tt as box,O as button,nt as buttonChooser,W as buttonGroup,ot as checkbox,ne as closeFloatingMenu,ht as closeNav,pt as confirm,ce as dialog,it as form,ke as getDarkMode,ye as isDialogOpen,te as isFloatingMenuOpen,mt as main,ct as menuButton,et as panels,ft as prompt,wt as select,Be as setDarkMode,oe as showFloatingMenu,Et as tabs,Mt as textarea,be as textline,Ct as toast};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "staffa",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "An opinionated component library for the Aberdeen reactive UI library.",
   "license": "ISC",
   "author": "",
@@ -41,7 +41,7 @@
     "jsdom": "^29.1.1",
     "lucide-static": "^1.17.0",
     "readme-tsdoc": "^1.2.1",
-    "shotest": "^1.8.2",
+    "shotest": "^1.8.3",
     "typescript": "^5.9.3"
   },
   "allowScripts": {

package/skill/AncestorTable.md

@@ -0,0 +1,10 @@
+## AncestorTable · type
+
+A table of `AncestorsHandler`s keyed by path template, the same way
+`routes` is — so each one's `params` are matched and typed from its own key
+rather than parsed out of the path a second time. The keys are checked
+against the route table, so a stale one is a type error.
+
+**Type:** `{
+	[K in keyof R & string]?: (params: Prettify<PathParams<K>>, path: string) => readonly string[] | undefined | void;
+}`

package/skill/MainOptions.md

@@ -110,6 +110,47 @@ to go with it, so `$page.params` is empty; the path itself is in
 
 **Type:** `RouteHandler<{}>`
 
+### mainOptions.ancestors · member
+
+What to open **beneath** a path that arrives cold — a shared link, a
+bookmark, a push notification, a nav item — with no stack of its own to
+restore. Keyed by path template exactly like `MainOptions.routes`, so
+each entry gets that key's params, matched and typed, rather than taking
+the path apart a second time.
+
+Without this, the stack is derived from the path: every prefix that has a
+route becomes a column, so `/projects/7/tasks/42` opens three deep. That
+only works for URLs that spell their own context out. A flat one —
+`/thread/[id]`, where a notification lands — has no prefix to walk, so it
+opens as a single column with nothing under it and nothing to close back
+to. This is where you say what that context is:
+
+```ts
+S.main({
+  routes: {
+    "/mailbox/[id]": drawMailbox,
+    "/thread/[id=integer]": drawThread,
+  },
+  ancestors: {
+    "/thread/[id=integer]": ({ id }) => [`/mailbox/${mailboxOf(id)}`],  // id: number
+  },
+});
+```
+
+Return the paths shallowest first; the path itself goes on top. Return
+nothing to leave a path to the prefix derivation, which is also what an
+unlisted one gets — so you only list the routes whose URL doesn't say where
+it belongs. Paths you have no route for are skipped, as they are there.
+
+This is asked for every origin-less navigation, so a nav item and a fresh
+tab still land on the same columns; a link *inside* a panel builds on that
+panel instead and never asks. It has to answer without drawing anything,
+since the panels being replaced are asked their `Page.requestClose`
+before the navigation is applied — before any handler could run. From code,
+`panels`.`open()` takes the same list directly.
+
+**Type:** `AncestorTable<NoInfer<R>>`
+
 ### mainOptions.stacking · member
 
 Set `false` to show only the top panel, however wide the screen (the nav
@@ -159,6 +200,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

@@ -163,7 +163,9 @@ The first key that matches wins, and a segment a param refuses simply doesn't ma
 - A link to something that's already open goes back to it instead of opening it twice. The same path is never in the stack twice.
 - A link that isn't inside a panel (a nav item, or one in a dialog) has no panel to build on, so it replaces the stack as a whole: the page you asked for, with its ancestor pages opened beneath it (see [below](#ancestors)). Panels that the new stack also contains stay as they are, so clicking the nav item for the section you're already in won't reset it. Clicking a nav item and opening that same URL in a fresh tab therefore give you the same columns.
 
-From code, `S.panels.push(path)` opens a panel on top of the top one, `.replace(path)` opens one in place of the top one, and `.close(path?)` closes the top panel (or a named one). `S.panels.stack` is the list of open paths.
+From code, `S.panels.push(path)` opens a panel on top of the top one, `.replace(path)` opens one in place of the top one, `.open(path, beneath?)` opens a whole arrangement at once (the way a nav item does — see [below](#ancestors)), and `.close(path?)` closes the top panel (or a named one). `S.panels.stack` is the list of open paths.
+
+Navigating faster than the shell can settle is fine: closing travels through the browser's history, so it takes a moment to land, and anything asked for in the meantime waits for it rather than being dropped. Two quick Escapes (or back gestures) peel two panels, each aimed at the stack the one before it was heading for. A `requestClose` that says no clears what was queued behind it, so an Escape can't sail past the panel that just refused to close.
 
 **How much room a panel takes** is up to `$page.layout`. The content area is the page, at most 1280px wide, minus the nav sidebar:
 
@@ -177,11 +179,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 +207,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>
@@ -211,6 +217,26 @@ Staffa itself contributes two things: the Escape key, which closes the top panel
 
 A URL that arrives without any of that (a shared link, a bookmark, a new tab) has nothing to restore, so Staffa builds the stack from the path: it walks the parent paths and opens each one you have a route for. With the routes above, `/projects/7/tasks/42` opens as three panels: the project list, project 7, and task 42. A parent path you have no route for is skipped, so if you don't want one screen appearing under another, just don't give it a route.
 
+That only works for URLs that spell their own context out. A flat one — `/thread/[id]`, where a push notification lands — has no parent path to walk, so it would open as a lone column with nothing beneath it and nothing for Escape to do. `ancestors` is where you say what belongs under it. It's keyed by the same path templates as `routes`, so each entry gets that key's params, matched and typed:
+
+```ts
+S.main({
+  routes: {
+    "/mailbox/[id]": drawMailbox,
+    "/thread/[id=integer]": drawThread,
+  },
+  ancestors: {
+    "/thread/[id=integer]": ({ id }) => [`/mailbox/${mailboxOf(id)}`],   // id is a number
+  },
+});
+```
+
+Return the paths shallowest first, or nothing to leave that path to the parent-path walk — which is also what a route you don't list gets, so you only name the ones whose URL doesn't say where they belong. It's asked for every navigation that has no panel to build on, so a nav item and a fresh tab still agree.
+
+It has to answer without drawing anything, which is why it lives here rather than on `$page`: the panels being replaced are asked their `requestClose` *before* the navigation is applied, and that is before any route handler could have run.
+
+From code, `S.panels.open(path, beneath?)` opens the same kind of arrangement, either asking `ancestors` for the stack or taking the one you hand it.
+
 Search params and the `#hash` belong to the top panel only. Anything a panel deeper in the stack needs in order to redraw itself has to live in its path.
 
 **A few more things.**
@@ -272,7 +298,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. A navigation dismisses the collapsed nav by itself, links in your own custom rows included; `S.closeNav()` does it for the rows that *don't* navigate. 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.
@@ -314,7 +340,8 @@ Options: `size`, `color` (defaults to `currentColor`), `strokeWidth`, `cap`, `jo
 
 ### Other
 
-- **`S.menuButton(opts)` / `S.addContextMenu(opts)` / `S.showFloatingMenu(opts)`**: dropdown menus from a button, right-click/long-press context menus, and the underlying floating menu primitive — with keyboard navigation.
+- **`S.menuButton(opts)` / `S.addContextMenu(opts)` / `S.showFloatingMenu(opts)`**: dropdown menus from a button, right-click/long-press context menus, and the underlying floating menu primitive — with keyboard navigation. A menu closes itself when the page navigates.
+- **`S.closeNav()`**: dismisses `S.main`'s navigation when it's showing as an overlay (the full page on a phone, the dropdown on a wider screen). For custom nav rows that act without navigating.
 - **`S.toast(opts)`**: transient notification at the bottom of the viewport.
 - **`S.addTooltip(el, opts)`**: tooltip on hover, attached to an existing element.
 
@@ -406,26 +433,11 @@ mkdir -p .claude/skills
 ln -s ../../node_modules/staffa/skill .claude/skills/staffa
 ```
 
-## Breaking changes
+## Changelog
 
-- **0.7** — the surface model was reduced to two families: **neutral** (`.neutral`) and **accent** (`.primary`/`.danger`/`.success`/`.warning`/`.link`). Apps that only use the high-level `S.*` components need no changes. Code that uses surface classes or tokens directly must update:
-  - **Surface levels gone.** Replace `.base`/`.panel`/`.raised`/`.neutral`/`.nest` with the single `.neutral` class.
-  - **`.secondary` and `.gradient` gone.** Drop any `s-secondary` colour override; there's no `s-secondary` anymore. The default button is now `.primary`.
-  - **Tokens renamed.** `--s-fg`→`--s-text`, `--s-fg-muted`→`--s-muted`, `--s-border`→`--s-faint`. Removed: `--s-fg-faint`, `--s-border-strong`, `--s-ink`, `--s-on-accent`, `--s-page`/`--s-panel`/`--s-raised`, `--s-neutral`, `--s-tint`, `--s-glow`, `--s-shadow`, `--s-gradient-surface`. A custom surface now sets `--s-bg`/`--s-text` (was the `--s-a`/`--s-b` anchors).
-  - **Borders/shadows moved onto surfaces.** Components no longer draw their own border/shadow. If you relied on `S.box`/`S.dialog`/etc. elevation, it now comes from the surface; pass `.no-shadow` to drop it, or `.shadow`/`.extra-shadow` to add it on any surface.
+What changed in each release, and what to do about the breaking ones, is in [CHANGELOG.md](CHANGELOG.md).
 
-- **0.6**: None.
-
-- **0.5**
-  - Surfaces (`.s-s`) now apply `border-radius` and — for `.tonal` and `.outlined` variants — `border` automatically. Custom surfaces or components that previously set these manually may see doubled or conflicting styles; remove the manual declarations.
-  - `border:0` is now applied to `.s-btn` by default (overriding the browser's 2px button border). Custom button-like components built on `.s-btn` that relied on the browser default border should add an explicit border.
-
-- **0.4**
-  - There is no default export anymore: replace `import S from "staffa"` with `import * as S from "staffa"`.
-  - `S.button` no longer has a `text` option: use `content` instead (it accepts a string or a draw function).
-  - The `Content` type is gone: use `Slot` instead. The `Styling` type alias is now exported as `Attributes`.
-  - `S.buttonChooser` uses `undefined` instead of `null` for "nothing selected" (in `bind` and with `allowDeselect`).
-  
+*Hint:* the recommended update strategy for a library this young is: don't. Pin it, and read the changelog before you move.
 
 # API Reference
 
@@ -528,6 +540,12 @@ Below 640 px that button opens the nav as a full page sliding in from the
 left; picking an item slides it away as the chosen screen enters from the
 right.
 
+## [closeNav](closeNav.md) · function
+
+Close the navigation, if it's showing as an overlay: the full page it becomes
+on a narrow shell, or the dropdown its button opens on a wider one. A sidebar
+isn't an overlay and has nothing to dismiss, so there it does nothing.
+
 ## [MainOptions](MainOptions.md) · interface
 
 Options for `main`.
@@ -566,6 +584,21 @@ is what makes `$page.params` infer from the route key.
 
 **Type:** `{ [K in keyof R & string]: (page: Page<Prettify<PathParams<K>>>) => void }`
 
+## AncestorsHandler · type
+
+What belongs beneath a path that arrives cold, worked out from the params of
+the path itself. Return the paths shallowest first, or nothing to leave this
+one to the parent-path derivation.
+
+**Type:** `(params: P, path: string) => readonly string[] | undefined | void`
+
+## [AncestorTable](AncestorTable.md) · type
+
+A table of `AncestorsHandler`s keyed by path template, the same way
+`routes` is — so each one's `params` are matched and typed from its own key
+rather than parsed out of the path a second time. The keys are checked
+against the route table, so a stale one is a type error.
+
 ## [PathParams](PathParams.md) · type
 
 The params object described by a path template, e.g.