@x-tech-laboratories/x-libs 0.4.0 → 0.7.0

package/dist/web/preact/controls.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
-// One of a few choices side by side; the chosen one takes the accent.
-export function Segmented({ label, choices, value, on_change, class_name }) {
-    return (_jsx("div", { class: class_name ? `segmented ${class_name}` : "segmented", role: "radiogroup", "aria-label": label, children: choices.map((choice) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === choice.value, onClick: () => on_change(choice.value), children: choice.label }, choice.value))) }));
-}
-// Buttons joined into one control, such as zoom out, zoom in and fit.
-export function ButtonGroup({ label, children }) {
-    return _jsx("div", { class: "segmented", role: "group", "aria-label": label, children: children });
-}
-export function Switch({ label, checked, on_change, disabled = false }) {
-    const [busy, set_busy] = useState(false);
-    async function change(event) {
-        const box = event.currentTarget;
-        const on = box.checked;
-        set_busy(true);
-        try {
-            if ((await on_change(on)) === false)
-                box.checked = !on;
-        }
-        catch (error) {
-            box.checked = !on;
-            throw error;
-        }
-        finally {
-            set_busy(false);
-        }
-    }
-    return _jsx("input", { type: "checkbox", role: "switch", "aria-label": label, checked: checked, disabled: disabled || busy, onChange: change });
-}
-// A search field that hands on what was typed once typing pauses; the field keeps its own text, so a redraw never wipes typing.
-export function SearchBox({ label, value, on_input }) {
-    const timer = useRef(undefined);
-    useEffect(() => () => clearTimeout(timer.current), []);
-    return (_jsx("input", { type: "search", class: "filter", placeholder: label, "aria-label": label, defaultValue: value, onInput: (event) => {
-            clearTimeout(timer.current);
-            const text = event.currentTarget.value;
-            timer.current = window.setTimeout(() => on_input(text), 200);
-        } }));
-}
-export function Select({ label, options, value, on_change }) {
-    return (_jsxs("label", { class: "field", children: [_jsx("span", { class: "field-label", children: label }), _jsx("select", { value: value, onChange: (event) => on_change(event.currentTarget.value), children: options.map(([option, text]) => _jsx("option", { value: option, children: text }, option)) })] }));
-}

package/dist/web/preact/layout.d.ts

@@ -1,80 +0,0 @@
-import { type ComponentChildren } from "preact";
-import type { Tone } from "./badges.tsx";
-export declare function Section({ title, tools, children }: {
-    title: ComponentChildren;
-    tools?: ComponentChildren;
-    children?: ComponentChildren;
-}): import("preact").JSX.Element;
-export type Fact = [label: string, value: ComponentChildren, class_name?: string];
-export declare function Facts({ rows, layout }: {
-    rows: (Fact | null | false)[];
-    layout?: "grid" | "rows";
-}): import("preact").JSX.Element;
-export declare function Stack({ tight, children }: {
-    tight?: boolean;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface TileProps {
-    label: string;
-    value: ComponentChildren;
-    tone?: Tone;
-    class_name?: string | null;
-    href?: string;
-    value_first?: boolean;
-}
-export declare function Tile({ label, value, tone, class_name, href, value_first }: TileProps): import("preact").JSX.Element;
-export declare function Tiles({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface CardProps {
-    title: ComponentChildren;
-    subtitle?: ComponentChildren;
-    badge?: ComponentChildren;
-    class_name?: string;
-    href?: string;
-    on_click?: () => void;
-    children?: ComponentChildren;
-}
-export declare function Card({ title, subtitle, badge, class_name, href, on_click, children }: CardProps): import("preact").JSX.Element;
-export declare function Cards({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-export interface TabItem<Id extends string> {
-    id: Id;
-    label: string;
-    href?: string;
-}
-export declare function Tabs<Id extends string>({ items, active, label, on_select }: {
-    items: TabItem<Id>[];
-    active: Id;
-    label?: string;
-    on_select?: (id: Id) => void;
-}): import("preact").JSX.Element;
-export declare function Crumbs({ items }: {
-    items: [label: string, href: string | null][];
-}): import("preact").JSX.Element;
-export declare function Toolbar({ children }: {
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-interface Step {
-    text: string;
-    href: string | null;
-}
-export declare function Stepper({ label, previous, position, next }: {
-    label: string;
-    previous: Step;
-    position: ComponentChildren;
-    next: Step;
-}): import("preact").JSX.Element;
-export declare function SettingsGroup({ heading, hint, children }: {
-    heading: string;
-    hint?: ComponentChildren;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-export declare function SettingRow({ label, hint, as_label, children }: {
-    label: ComponentChildren;
-    hint?: ComponentChildren;
-    as_label?: boolean;
-    children: ComponentChildren;
-}): import("preact").JSX.Element;
-export {};

package/dist/web/preact/layout.js

@@ -1,71 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars, steppers and settings rows.
-import { Fragment } from "preact";
-// ── Panels ───────────────────────────────────────────────────────────────────
-export function Section({ title, tools, children }) {
-    return (_jsxs("section", { class: "panel", children: [_jsxs("div", { class: "panel-head", children: [_jsx("h2", { children: title }), tools && _jsx("div", { class: "panel-tools", children: tools })] }), children] }));
-}
-// Labelled values in a grid of tiles, or as rows of label and value for long values such as paths.
-export function Facts({ rows, layout = "grid" }) {
-    return (_jsx("dl", { class: layout === "rows" ? "facts facts-rows" : "facts", children: rows.filter((row) => Boolean(row)).map(([label, value, class_name]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { class: class_name, children: value ?? "—" })] }, label))) }));
-}
-// A stack of panels or blocks spaced by its gap, tighter when tight.
-export function Stack({ tight = false, children }) {
-    return _jsx("div", { class: tight ? "stack tight" : "stack", children: children });
-}
-// One headline figure and its label.
-export function Tile({ label, value, tone, class_name, href, value_first = false }) {
-    const tile_class = ["tile", tone && tone !== "none" && `tile-${tone}`, class_name].filter(Boolean).join(" ");
-    const label_part = _jsx("div", { class: "tile-label", children: label });
-    const value_part = _jsx("div", { class: "tile-value", children: value });
-    const children = value_first ? _jsxs(_Fragment, { children: [value_part, label_part] }) : _jsxs(_Fragment, { children: [label_part, value_part] });
-    return href ? _jsx("a", { class: tile_class, href: href, children: children }) : _jsx("div", { class: tile_class, children: children });
-}
-export function Tiles({ children }) {
-    return _jsx("div", { class: "tiles", children: children });
-}
-// A titled card for one thing among many, laid out in a grid of Cards.
-export function Card({ title, subtitle, badge, class_name, href, on_click, children }) {
-    const card_class = class_name ? `card ${class_name}` : "card";
-    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { class: "card-head", children: [_jsx("strong", { children: title }), badge] }), subtitle && _jsx("div", { class: "muted card-host", children: subtitle }), children] }));
-    if (href)
-        return _jsx("a", { class: card_class, href: href, children: body });
-    if (on_click)
-        return _jsx("button", { type: "button", class: card_class, onClick: on_click, children: body });
-    return _jsx("div", { class: card_class, children: body });
-}
-export function Cards({ children }) {
-    return _jsx("div", { class: "grid", children: children });
-}
-export function Tabs({ items, active, label = "Sections", on_select }) {
-    return (_jsx("nav", { class: "tabs", "aria-label": label, children: items.map((item) => {
-            const tab_class = item.id === active ? "tab active" : "tab";
-            const current = item.id === active ? "page" : undefined;
-            return item.href
-                ? _jsx("a", { class: tab_class, href: item.href, "aria-current": current, children: item.label }, item.id)
-                : _jsx("button", { type: "button", class: tab_class, "aria-current": current, onClick: () => on_select?.(item.id), children: item.label }, item.id);
-        }) }));
-}
-export function Crumbs({ items }) {
-    return (_jsx("nav", { class: "crumbs", "aria-label": "Breadcrumb", children: items.map(([label, href], index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { class: "muted", "aria-hidden": "true", children: " / " }), href ? _jsx("a", { href: href, children: label }) : _jsx("span", { "aria-current": "page", children: label })] }, index))) }));
-}
-// ── Toolbars ─────────────────────────────────────────────────────────────────
-export function Toolbar({ children }) {
-    return _jsx("div", { class: "toolbar", children: children });
-}
-// Steps to the item before or after this one, each a link or a dead button when there is none, with where this one stands between.
-export function Stepper({ label, previous, position, next }) {
-    const step = (target) => target.href === null
-        ? _jsx("button", { disabled: true, children: target.text })
-        : _jsx("a", { class: "button", href: target.href, children: target.text });
-    return _jsxs("div", { class: "stepper", role: "group", "aria-label": label, children: [step(previous), _jsx("span", { class: "muted", children: position }), step(next)] });
-}
-// ── Settings ─────────────────────────────────────────────────────────────────
-export function SettingsGroup({ heading, hint, children }) {
-    return (_jsxs("section", { class: "settings-group", children: [_jsx("h3", { class: "settings-heading", children: heading }), hint && _jsx("p", { class: "setting-hint", children: hint }), children] }));
-}
-// A setting's name and hint on one side and its control on the other; as a label, clicking anywhere works its one control.
-export function SettingRow({ label, hint, as_label = false, children }) {
-    const text = (_jsxs("span", { class: "setting-text", children: [_jsx("span", { class: "setting-label", children: label }), hint && _jsx("span", { class: "setting-hint", children: hint })] }));
-    return as_label ? _jsxs("label", { class: "setting-row", children: [text, children] }) : _jsxs("div", { class: "setting-row", children: [text, children] });
-}

package/dist/web/preact/menus.d.ts

@@ -1,19 +0,0 @@
-import { type ComponentChildren } from "preact";
-import { type MenuItem } from "../menus.ts";
-export type { MenuItem } from "../menus.ts";
-interface ContextMenuProps {
-    x: number;
-    y: number;
-    items: MenuItem[];
-    on_close: () => void;
-}
-export declare function ContextMenu({ x, y, items, on_close }: ContextMenuProps): import("preact").JSX.Element;
-interface PopoverProps {
-    anchor?: HTMLElement | null;
-    x?: number;
-    y?: number;
-    label: string;
-    on_close: () => void;
-    children: ComponentChildren;
-}
-export declare function Popover({ anchor, x, y, label, on_close, children }: PopoverProps): import("preact").JSX.Element;

package/dist/web/preact/menus.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// Menus and popovers on the native popover: closed by Escape or a click elsewhere, and here also by scrolling or leaving the window.
-import { Fragment } from "preact";
-import { useEffect, useId, useLayoutEffect, useRef } from "preact/hooks";
-import { on_screen_position } from "../menus.js";
-// ── Opening ──────────────────────────────────────────────────────────────────
-// Shows the element as a popover while it is rendered, calling the latest on_close once it closes for any reason.
-function use_popover(on_close) {
-    const element = useRef(null);
-    const close = useRef(on_close);
-    close.current = on_close;
-    useEffect(() => {
-        const popover = element.current;
-        const hide = () => { if (popover.matches(":popover-open"))
-            popover.hidePopover(); };
-        const toggled = (event) => { if (event.newState === "closed")
-            close.current(); };
-        const outside_scroll = (event) => { if (!popover.contains(event.target))
-            hide(); };
-        popover.addEventListener("toggle", toggled);
-        window.addEventListener("blur", hide);
-        window.addEventListener("scroll", outside_scroll, true);
-        return () => {
-            popover.removeEventListener("toggle", toggled);
-            window.removeEventListener("blur", hide);
-            window.removeEventListener("scroll", outside_scroll, true);
-        };
-    }, []);
-    return element;
-}
-// Shows the popover at the point, flipped or pushed back so it stays on screen.
-function show_at(popover, x, y) {
-    if (!popover.matches(":popover-open"))
-        popover.showPopover();
-    const size = popover.getBoundingClientRect();
-    const position = on_screen_position(x, y, size.width, size.height);
-    popover.style.left = `${position.left}px`;
-    popover.style.top = `${position.top}px`;
-}
-export function ContextMenu({ x, y, items, on_close }) {
-    const menu = use_popover(on_close);
-    useLayoutEffect(() => {
-        show_at(menu.current, x, y);
-        menu.current.querySelector(".menu-item:not(:disabled)")?.focus();
-    }, [x, y]);
-    return (_jsx("div", { ref: menu, popover: "auto", class: "menu", role: "menu", tabIndex: -1, children: items.map((item) => (_jsxs(Fragment, { children: [item.separator_before && _jsx("div", { class: "menu-separator", role: "separator" }), _jsxs("button", { type: "button", class: item.danger ? "menu-item danger" : "menu-item", role: item.checked === undefined ? "menuitem" : "menuitemcheckbox", "aria-checked": item.checked, disabled: item.disabled, onClick: () => {
-                        on_close();
-                        item.run();
-                    }, children: [_jsx("span", { class: "menu-label", children: item.label }), item.hint && _jsx("span", { class: "menu-hint", children: item.hint })] })] }, item.label))) }));
-}
-// Holds any content, such as a column's filter, with its first field ready to type into.
-export function Popover({ anchor, x = 0, y = 0, label, on_close, children }) {
-    const popover = use_popover(on_close);
-    const anchor_name = `--popover-${useId().replace(/[^\w-]/g, "")}`;
-    useLayoutEffect(() => {
-        const element = popover.current;
-        if (anchor) {
-            // The anchor's name ties it to this popover, which CSS then hangs below it, flipping where there is no room.
-            anchor.style.setProperty("anchor-name", anchor_name);
-            element.style.setProperty("position-anchor", anchor_name);
-            element.showPopover();
-        }
-        else {
-            show_at(element, x, y);
-        }
-        element.querySelector("input, select, textarea, button")?.focus();
-        return () => anchor?.style.removeProperty("anchor-name");
-    }, [anchor, x, y]);
-    return (_jsx("div", { ref: popover, popover: "auto", class: anchor ? "popover anchored" : "popover", role: "dialog", "aria-label": label, children: children }));
-}

package/dist/web/preact/shell.d.ts

@@ -1,27 +0,0 @@
-import type { ComponentChildren } from "preact";
-import { type Route } from "../router.ts";
-import { type ThemeChoice } from "../theme.ts";
-export declare function use_route(): Route;
-export declare function ThemeButton({ choice }: {
-    choice: ThemeChoice;
-}): import("preact").JSX.Element;
-export interface ShellSection {
-    id: string;
-    label: string;
-    href: string;
-}
-interface ShellProps {
-    brand: string;
-    sections: ShellSection[];
-    active: string;
-    theme: ThemeChoice;
-    user: string | null;
-    user_href?: string;
-    on_logout?: () => void;
-    tools?: ComponentChildren;
-    sidebar_foot?: ComponentChildren;
-    view_key?: string;
-    children: ComponentChildren;
-}
-export declare function Shell({ brand, sections, active, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }: ShellProps): import("preact").JSX.Element;
-export {};

package/dist/web/preact/shell.js

@@ -1,63 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { current_route } from "../router.js";
-import { next_theme } from "../theme.js";
-import { Dialogs } from "./dialog.js";
-import { Toasts } from "./toasts.js";
-// ── Route ────────────────────────────────────────────────────────────────────
-// The hash route, read again whenever it changes.
-export function use_route() {
-    const [route, set_route] = useState(current_route);
-    useEffect(() => {
-        const changed = () => set_route(current_route());
-        window.addEventListener("hashchange", changed);
-        return () => window.removeEventListener("hashchange", changed);
-    }, []);
-    return route;
-}
-// ── Theme ────────────────────────────────────────────────────────────────────
-const theme_labels = { system: ["◐", "Theme: system"], light: ["☀", "Theme: light"], dark: ["☾", "Theme: dark"] };
-// Steps through system, light and dark, its glyph and label showing the current one.
-export function ThemeButton({ choice }) {
-    const [theme, set_theme] = useState(choice.get);
-    useEffect(() => choice.on_change(set_theme), []);
-    const [icon, text] = theme_labels[theme];
-    return (_jsx("button", { id: "theme", class: "icon", title: `${text} (click to change)`, "aria-label": `${text}, click to change`, onClick: () => choice.set(next_theme(choice.get())), children: icon }));
-}
-export function Shell({ brand, sections, active, theme, user, user_href, on_logout, tools, sidebar_foot, view_key, children }) {
-    const [menu_open, set_menu_open] = useState(false);
-    const main = useRef(null);
-    const menu_button = useRef(null);
-    const sidebar = useRef(null);
-    const first_view = useRef(true);
-    const logged_out = user === null;
-    // The login page has no theme button, so the saved theme is set here.
-    useEffect(() => theme.apply(), []);
-    useEffect(() => {
-        document.body.classList.toggle("logged-out", logged_out);
-        document.body.classList.toggle("menu-open", menu_open);
-    }, [logged_out, menu_open]);
-    useEffect(() => {
-        if (menu_open)
-            sidebar.current?.querySelector("a")?.focus();
-        if (!menu_open)
-            return;
-        const escape = (event) => {
-            if (event.key !== "Escape")
-                return;
-            set_menu_open(false);
-            menu_button.current?.focus();
-        };
-        document.addEventListener("keydown", escape);
-        return () => document.removeEventListener("keydown", escape);
-    }, [menu_open]);
-    // A new view closes the menu and takes focus, which tells a screen reader the page changed, but not on the first load.
-    useEffect(() => {
-        set_menu_open(false);
-        if (!first_view.current)
-            main.current?.focus({ preventScroll: true });
-        first_view.current = false;
-        window.scrollTo(0, 0);
-    }, [view_key]);
-    return (_jsxs(_Fragment, { children: [_jsx("a", { class: "skip", href: "#main", children: "Skip to content" }), _jsxs("header", { class: "topbar", children: [_jsx("button", { ref: menu_button, class: "icon menu-button", "aria-label": "Open the menu", "aria-expanded": menu_open, "aria-controls": "sidebar", onClick: () => set_menu_open(!menu_open), children: "\u2630" }), _jsx("a", { href: "#/", class: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), !logged_out && (user_href ? _jsx("a", { class: "account-link", href: user_href, children: user }) : _jsx("span", { class: "user-name", children: user })), !logged_out && on_logout && _jsx("button", { onClick: on_logout, children: "Log out" })] }), _jsxs("div", { class: "layout", children: [_jsxs("nav", { ref: sidebar, id: "sidebar", class: "sidebar", "aria-label": "Main", children: [sections.map((section) => (_jsx("a", { href: section.href, "data-section": section.id, class: section.id === active ? "active" : undefined, "aria-current": section.id === active ? "page" : undefined, children: section.label }, section.id))), sidebar_foot] }), _jsx("div", { class: "scrim", hidden: !menu_open, onClick: () => set_menu_open(false) }), _jsx("main", { ref: main, id: "main", tabIndex: -1, children: children })] }), _jsx(Toasts, {}), _jsx(Dialogs, {})] }));
-}

package/dist/web/preact/table.d.ts

@@ -1,23 +0,0 @@
-import type { ComponentChildren } from "preact";
-import { type Sorting } from "../tables.ts";
-export type { Sorting } from "../tables.ts";
-export interface TableColumn<Row> {
-    label: string;
-    cell: (row: Row) => ComponentChildren;
-    sort?: (row: Row) => string | number | null;
-    class?: string;
-}
-interface DataTableProps<Row> {
-    columns: TableColumn<Row>[];
-    rows: Row[];
-    row_key?: (row: Row) => string | number;
-    sorting?: Sorting;
-    on_sort?: (sorting: Sorting) => void;
-    caption?: string;
-}
-export declare function DataTable<Row>({ columns, rows, row_key, sorting, on_sort, caption }: DataTableProps<Row>): import("preact").JSX.Element;
-export declare function Pager({ page, has_more, go }: {
-    page: number;
-    has_more: boolean;
-    go: (page: number) => void;
-}): import("preact").JSX.Element | null;

package/dist/web/preact/table.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { sorted_rows } from "../tables.js";
-export function DataTable({ columns, rows, row_key, sorting, on_sort, caption }) {
-    const sort_column = sorting ? columns.find((column) => column.label === sorting.key && column.sort) : undefined;
-    function header(column) {
-        if (!column.sort || !on_sort)
-            return _jsx("th", { class: column.class, scope: "col", children: column.label }, column.label);
-        const active = sort_column === column;
-        const descending = active && sorting.descending;
-        return (_jsx("th", { class: column.class, scope: "col", "aria-sort": active ? (descending ? "descending" : "ascending") : "none", children: _jsxs("button", { class: "sort", onClick: () => on_sort({ key: column.label, descending: active ? !descending : false }), children: [column.label, active ? (descending ? " ↓" : " ↑") : ""] }) }, column.label));
-    }
-    return (_jsx("div", { class: "table-wrap", children: _jsxs("table", { class: "responsive", children: [caption && _jsx("caption", { class: "visually-hidden", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map(header) }) }), _jsx("tbody", { children: sorted_rows(columns, rows, sorting).map((row) => (_jsx("tr", { children: columns.map((column) => _jsx("td", { class: column.class, "data-label": column.label, children: column.cell(row) }, column.label)) }, row_key ? row_key(row) : undefined))) })] }) }));
-}
-// ── Pages ────────────────────────────────────────────────────────────────────
-// Newer and older buttons around the page number, or nothing when everything fits on one page.
-export function Pager({ page, has_more, go }) {
-    if (page === 1 && !has_more)
-        return null;
-    return (_jsxs("nav", { class: "pager", "aria-label": "Pages", children: [_jsx("button", { disabled: page <= 1, onClick: () => go(page - 1), children: "\u2190 Newer" }), _jsxs("span", { class: "muted", children: ["Page ", page] }), _jsx("button", { disabled: !has_more, onClick: () => go(page + 1), children: "Older \u2192" })] }));
-}

package/dist/web/preact/time.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
-// Times as the page shows them: how long ago, with the full date and time on hover.
-import { age, stamp } from "../format.js";
-// A time as its age, such as "3h ago", or the missing text, a dash unless told otherwise, when there is none.
-export function Age({ epoch, missing = "—" }) {
-    if (!epoch)
-        return _jsx(_Fragment, { children: missing });
-    return _jsx("span", { title: stamp(epoch), children: age(epoch) });
-}

package/dist/web/preact/toasts.d.ts

@@ -1,15 +0,0 @@
-export interface ToastOptions {
-    tone?: "good" | "bad" | "warn" | "info";
-    link?: {
-        href: string;
-        text: string;
-    } | null;
-    action?: {
-        text: string;
-        run: () => void;
-    };
-    sticky?: boolean;
-    duration_in_milliseconds?: number;
-}
-export declare function toast(message: string, options?: ToastOptions): () => void;
-export declare function Toasts(): import("preact").JSX.Element;

package/dist/web/preact/toasts.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// Short notes in the page's corner after something happened, with an optional link or action such as Undo.
-import { useEffect, useState } from "preact/hooks";
-let shown = [];
-let next_id = 1;
-const listeners = new Set();
-function publish(toasts) {
-    shown = toasts;
-    for (const listener of listeners)
-        listener(shown);
-}
-// Shows the message and returns a function that closes it early.
-export function toast(message, options = {}) {
-    const id = next_id++;
-    const close = () => publish(shown.filter((item) => item.id !== id));
-    publish([...shown, { ...options, id, message }]);
-    if (!(options.sticky ?? options.tone === "bad"))
-        setTimeout(close, options.duration_in_milliseconds ?? 6000);
-    return close;
-}
-// ── Host ─────────────────────────────────────────────────────────────────────
-// Where toasts stack; the Shell holds one, and a page without the Shell renders its own.
-export function Toasts() {
-    const [toasts, set_toasts] = useState(shown);
-    useEffect(() => {
-        listeners.add(set_toasts);
-        return () => void listeners.delete(set_toasts);
-    }, []);
-    return (_jsx("div", { id: "toasts", class: "toasts", children: toasts.map((item) => {
-            const tone = item.tone ?? "info";
-            const close = () => publish(shown.filter((other) => other.id !== item.id));
-            return (_jsxs("div", { class: `toast tone-${tone}`, role: tone === "bad" ? "alert" : "status", children: [_jsx("span", { children: item.message }), item.link && _jsx("a", { href: item.link.href, onClick: close, children: item.link.text }), item.action && _jsx("button", { class: "toast-action", onClick: () => { close(); item.action.run(); }, children: item.action.text }), _jsx("button", { class: "icon", "aria-label": "Dismiss", onClick: close, children: "\u00D7" })] }, item.id));
-        }) }));
-}