staffa 0.7.4 → 0.8.1

package/dist/components/tabs.d.ts

@@ -30,6 +30,11 @@ export interface TabsOptions {
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).
  *
+ * More tabs than fit make the strip scroll sideways, with a ‹ / › button
+ * appearing over whichever end still has something to reach — a bare scroll area
+ * says nothing about itself to a mouse. Selecting a tab that's out of view
+ * (arrow keys, or a `bind` written from elsewhere) scrolls it back in.
+ *
  * @example
  * ```ts
  * S.tabs({ tabs: [

package/dist/components/tabs.js

@@ -1,17 +1,51 @@
 import A from "aberdeen";
 import { drawSlot, uniqueId } from "../core.js";
+import { mk } from "../icons-helpers.js";
+// Chevrons for the scroll buttons, as inline SVG (the icon set's own helper, so
+// no icon data comes along) rather than `‹`/`›` characters — matching Lucide's
+// `chevron-left`/`chevron-right`.
+const chevronLeft = mk('<path d="m15 18-6-6 6-6"/>');
+const chevronRight = mk('<path d="m9 18 6-6-6-6"/>');
 A.insertGlobalCss({
     ".s-tabs": {
         "&": "display:flex flex-direction:column gap:$3",
-        ".s-tablist": "display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-faint;",
+        // The bar owns the hairline (so it runs the full width, under the scroll
+        // buttons too) and is the positioning context they overlay from.
+        ".s-tabbar": "position:relative display:flex border-bottom: 1px solid $s-faint;",
+        // The strip scrolls horizontally when the tabs outgrow it. Its own scrollbar
+        // is hidden — a raw scrollbar under a tab row reads as a mistake — so the
+        // affordance is the pair of buttons below, plus the fade they sit in.
+        // `overflow-y:hidden` is load-bearing: `overflow-x:auto` alone forces the
+        // computed `overflow-y` off `visible`, which turned the active tab's 1px
+        // overhang into a stray couple of pixels of *vertical* scroll.
+        ".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 " +
+            // Pulls the strip 1px down over the bar's hairline, so the active tab's
+            // underline lands *on* it rather than stacking above it. On the strip, not
+            // the tabs: a negative margin inside a scroll container is overflow.
+            "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; " +
-            "border-bottom: 3px solid transparent; margin-bottom:-1px " +
+            "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: 0 0 0 3px $s-focus; r: $s-radius;",
+        // An inset ring: the strip is a scroll container, so it clips its own
+        // painting, and an outset ring on the first/last tab would be shaved off.
+        ".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;",
+        // The scroll buttons overlay the strip's ends rather than sitting beside it,
+        // so no width is reserved when there's nothing to scroll — and the tabs slide
+        // out from under a fade instead of stopping at a hard edge.
+        ".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)",
+        // Shown only for the direction there is actually something to scroll towards,
+        // so the pair doubles as a position indicator.
+        ".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right": "display:flex",
         ".s-tabpanel": "display:block",
     },
 });
@@ -19,6 +53,11 @@ A.insertGlobalCss({
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).
  *
+ * More tabs than fit make the strip scroll sideways, with a ‹ / › button
+ * appearing over whichever end still has something to reach — a bare scroll area
+ * says nothing about itself to a mouse. Selecting a tab that's out of view
+ * (arrow keys, or a `bind` written from elsewhere) scrolls it back in.
+ *
  * @example
  * ```ts
  * S.tabs({ tabs: [
@@ -43,24 +82,34 @@ export function tabs(opts) {
         $sel.value = keyOf(tab, index);
     };
     A("div.s-tabs", opts.attrs, () => {
-        A("div.s-tablist role=tablist", () => {
-            opts.tabs.forEach((tab, index) => {
-                const key = keyOf(tab, index);
-                A("button.s-tab type=button role=tab", () => {
-                    A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
-                    A(() => {
-                        const selected = $sel.value === key;
-                        A("aria-selected=", selected ? "true" : "false");
-                        A("tabindex=", selected ? "0" : "-1");
+        A("div.s-tabbar", () => {
+            const listEl = A("div.s-tablist role=tablist", () => {
+                opts.tabs.forEach((tab, index) => {
+                    const key = keyOf(tab, index);
+                    const tabEl = A("button.s-tab type=button role=tab", () => {
+                        A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
+                        A(() => {
+                            const selected = $sel.value === key;
+                            A("aria-selected=", selected ? "true" : "false");
+                            A("tabindex=", selected ? "0" : "-1");
+                            // Selecting a tab that's (partly) scrolled out brings it into
+                            // view, so the strip follows the selection however it was made:
+                            // a click, the arrow keys, or a `bind` written from elsewhere.
+                            if (selected)
+                                requestAnimationFrame(() => reveal(tabEl));
+                        });
+                        if (tab.disabled)
+                            A("disabled=true");
+                        A("click=", () => select(tab, index));
+                        A("keydown=", (e) => onKey(e, opts.tabs, index, select));
+                        drawSlot(tab.icon);
+                        drawSlot(tab.label);
                     });
-                    if (tab.disabled)
-                        A("disabled=true");
-                    A("click=", () => select(tab, index));
-                    A("keydown=", (e) => onKey(e, opts.tabs, index, select));
-                    drawSlot(tab.icon);
-                    drawSlot(tab.label);
                 });
             });
+            drawScrollButton(listEl, -1);
+            drawScrollButton(listEl, 1);
+            watchScroll(listEl);
         });
         A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
             A(() => {
@@ -75,6 +124,63 @@ export function tabs(opts) {
         });
     });
 }
+/**
+ * One of the two scroll buttons overlaying the ends of the strip. `dir` is -1 for
+ * the left one and 1 for the right. A page at a time (not a tab at a time): the
+ * strip scrolls smoothly, so a nudge that moved one tab would read as a twitch.
+ */
+function drawScrollButton(list, dir) {
+    A(`button.s-tabscroll.s-tabscroll-${dir < 0 ? "left" : "right"} type=button`, () => {
+        // The tabs themselves are the real control; this is a convenience the strip
+        // offers a mouse. Keeping it out of the tab order means Tab still steps from
+        // the tablist straight into the panel.
+        A("tabindex=-1 aria-hidden=true");
+        A("click=", () => list.scrollBy({ left: dir * list.clientWidth * 0.8, behavior: "smooth" }));
+        (dir < 0 ? chevronLeft : chevronRight)({ size: "1.1em" });
+    });
+}
+/**
+ * Keep the `.s-can-left` / `.s-can-right` classes on the bar in step with what
+ * there is left to scroll towards, so each button appears exactly when it has
+ * somewhere to go. Watches the strip's own scrolling *and* its size (a resize, or
+ * tabs being added or removed, changes the answer without any scrolling at all).
+ */
+function watchScroll(list) {
+    const bar = list.parentElement;
+    if (!bar || typeof ResizeObserver === "undefined")
+        return; // No-op outside the browser.
+    const update = () => {
+        // A sub-pixel slack: fractional layout widths otherwise leave a permanent
+        // half-pixel of "scrollable" at an end that is plainly already reached.
+        const max = list.scrollWidth - list.clientWidth;
+        bar.classList.toggle("s-can-left", list.scrollLeft > 1);
+        bar.classList.toggle("s-can-right", list.scrollLeft < max - 1);
+    };
+    list.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(list);
+    for (const tab of Array.from(list.children))
+        ro.observe(tab);
+    update();
+    A.clean(() => {
+        list.removeEventListener("scroll", update);
+        ro.disconnect();
+    });
+}
+/** Scroll `el`'s strip just far enough to clear the buttons overlaying its ends. */
+function reveal(el) {
+    const list = el.parentElement;
+    if (!list || !el.isConnected)
+        return;
+    // The overlays are 2.4em wide; clearing a little more than that keeps the tab
+    // from sitting right against one.
+    const pad = parseFloat(getComputedStyle(list).fontSize) * 2.6;
+    const tab = el.getBoundingClientRect(), strip = list.getBoundingClientRect();
+    if (tab.left < strip.left + pad)
+        list.scrollBy({ left: tab.left - strip.left - pad, behavior: "smooth" });
+    else if (tab.right > strip.right - pad)
+        list.scrollBy({ left: tab.right - strip.right + pad, behavior: "smooth" });
+}
 /** Roving-tabindex keyboard handling for the tab strip. */
 function onKey(e, list, index, select) {
     let next = index;

package/dist/core.d.ts

@@ -49,6 +49,13 @@ export interface ContentOptions {
     /** Draws the children of this component. A string is rendered as rich text. */
     content?: Slot;
 }
+/**
+ * Shell width — not viewport width — at or below which the app shell goes
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * has room for exactly one full-bleed column. Shared by the `@container` queries
+ * that do the switching and by the JS that has to agree with them.
+ */
+export declare const NARROW_PX = 640;
 /** Generates a process-unique id, used to wire `<label for>` to its control. */
 export declare function uniqueId(prefix?: string): string;
 /**

package/dist/core.js

@@ -1,4 +1,11 @@
 import A from "aberdeen";
+/**
+ * Shell width — not viewport width — at or below which the app shell goes
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * has room for exactly one full-bleed column. Shared by the `@container` queries
+ * that do the switching and by the JS that has to agree with them.
+ */
+export const NARROW_PX = 640;
 let idCounter = 0;
 /** Generates a process-unique id, used to wire `<label for>` to its control. */
 export function uniqueId(prefix = "s") {

package/dist/index.d.ts

@@ -38,7 +38,8 @@ export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.j
 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 { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
+export { panels, type Page, type Routes, type RouteHandler, type RouteTable, 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";
 export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";

package/dist/index.js

@@ -41,7 +41,8 @@ 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 { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen } from "./components/menu.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";
 export { select } from "./components/select.js";
 export { tabs } from "./components/tabs.js";

package/dist/staffa.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "staffa",
-  "version": "0.7.4",
+  "version": "0.8.1",
   "description": "An opinionated component library for the Aberdeen reactive UI library.",
   "license": "ISC",
   "author": "",
@@ -32,18 +32,20 @@
     "test": "shotest test"
   },
   "peerDependencies": {
-    "aberdeen": "^1.18.1"
+    "aberdeen": "^1.20.0"
   },
   "devDependencies": {
-    "aberdeen": "^1.18.1",
+    "aberdeen": "^1.20.0",
     "esbuild": "^0.28.0",
     "http-server": "^14.1.1",
     "jsdom": "^29.1.1",
     "lucide-static": "^1.17.0",
     "readme-tsdoc": "^1.2.1",
+    "shotest": "^1.8.2",
     "typescript": "^5.9.3"
   },
-  "dependencies": {
-    "shotest": "^1.7.0"
+  "allowScripts": {
+    "odiff-bin@4.3.8": true,
+    "esbuild@0.28.2": true
   }
 }

package/skill/BoxOptions.md

@@ -14,6 +14,24 @@ Footer content, drawn in a styled bar below the body.
 
 **Type:** `Slot`
 
+### boxOptions.close · member
+
+Draws a small ✕ button in the box's top-right corner: in the header row when
+there is a | header, floating over the body when
+there isn't.
+
+`true` closes the panel the box is drawn in, which is how a screen of a
+routed `S.main()` gives the user a way back (the shell draws no back
+arrows or ✕ of its own). Which panel that is gets worked out from the DOM
+when it's clicked, so the box needs no `$page` handed to it and works from
+any column, top of the stack or not. A box in a column further left closes
+just that column and leaves the others alone. Outside a routed shell it
+does nothing but warn.
+
+Pass a function to run that instead, for a dismissal of your own.
+
+**Type:** `boolean | (() => void)`
+
 ### boxOptions.contentAttrs · member
 
 Aberdeen attr/style string applied to the body (content-holding) element.