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

package/dist/web/preact/menus.js

@@ -1,29 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// Preact menus and popovers opened at a point, kept on screen and closed the same way as the page's own.
+// 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, useLayoutEffect, useRef } from "preact/hooks";
-import { dismiss_on_outside, menu_item_class, menu_item_role, place_on_screen } from "../menus.js";
-// ── Placing ──────────────────────────────────────────────────────────────────
-// Keeps the element on screen at the point, and calls the latest on_close when it should close.
-function use_floating(x, y, on_close) {
+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;
-    useLayoutEffect(() => place_on_screen(element.current, x, y), [x, y]);
-    useEffect(() => dismiss_on_outside(element.current, () => close.current()), []);
+    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_floating(x, y, on_close);
-    useEffect(() => menu.current?.querySelector(".menu-item:not(:disabled)")?.focus(), []);
-    return (_jsx("div", { ref: menu, 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: menu_item_class(item), role: menu_item_role(item), "aria-checked": item.checked === undefined ? undefined : item.checked, disabled: item.disabled, onClick: () => {
+    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({ x, y, label, on_close, children }) {
-    const popover = use_floating(x, y, on_close);
-    useEffect(() => popover.current?.querySelector("input, select, textarea, button")?.focus(), []);
-    return (_jsx("div", { ref: popover, class: "popover", role: "dialog", "aria-label": label, children: children }));
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,63 @@
+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/states.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentChildren } from "preact";
+export declare function Skeleton({ lines }: {
+    lines?: number;
+}): import("preact").JSX.Element;
+export declare function Empty({ title, hint }: {
+    title: string;
+    hint?: ComponentChildren;
+}): import("preact").JSX.Element;
+export declare function Failure({ error, retry }: {
+    error: unknown;
+    retry: () => void;
+}): import("preact").JSX.Element;
+export interface Resource<Data> {
+    data: Data | null;
+    error: unknown;
+    loading: boolean;
+    reload: (quiet?: boolean) => Promise<void>;
+}
+export interface ResourceOptions {
+    refresh_in_milliseconds?: number;
+}
+export declare function use_resource<Data>(work: () => Promise<Data>, dependencies: unknown[], options?: ResourceOptions): Resource<Data>;
+export declare function Loaded<Data>({ resource, lines, children }: {
+    resource: Resource<Data>;
+    lines?: number;
+    children: (data: Data) => ComponentChildren;
+}): import("preact").JSX.Element;

package/dist/web/preact/states.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { pass_login_needed } from "../states.js";
+// ── States ───────────────────────────────────────────────────────────────────
+export function Skeleton({ lines = 3 }) {
+    return (_jsx("div", { class: "skeleton", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: lines }, (_, index) => _jsx("div", { class: "skeleton-line", style: { width: `${90 - index * 15}%` } }, index)) }));
+}
+export function Empty({ title, hint }) {
+    return (_jsxs("div", { class: "empty", children: [_jsx("p", { class: "empty-title", children: title }), hint && _jsx("p", { class: "muted", children: hint })] }));
+}
+export function Failure({ error, retry }) {
+    return (_jsxs("div", { class: "failure", role: "alert", children: [_jsxs("p", { children: ["Could not load this: ", error instanceof Error ? error.message : String(error)] }), _jsx("button", { onClick: retry, children: "Retry" })] }));
+}
+// Loads what the work fetches whenever the dependencies change, passing a lapsed login on to the page.
+export function use_resource(work, dependencies, options = {}) {
+    const [state, set_state] = useState({ data: null, error: null, loading: true });
+    const latest_work = useRef(work);
+    latest_work.current = work;
+    const generation = useRef(0);
+    const reload = useCallback((quiet = false) => {
+        const mine = ++generation.current;
+        if (!quiet)
+            set_state({ data: null, error: null, loading: true });
+        return latest_work.current().then((data) => { if (mine === generation.current)
+            set_state({ data, error: null, loading: false }); }, (error) => {
+            if (pass_login_needed(error) || mine !== generation.current)
+                return;
+            set_state((before) => quiet && before.data !== null ? { ...before, loading: false } : { data: null, error, loading: false });
+        });
+    }, []);
+    useEffect(() => void reload(), dependencies);
+    useEffect(() => {
+        if (!options.refresh_in_milliseconds)
+            return;
+        const timer = setInterval(() => { if (document.visibilityState === "visible")
+            void reload(true); }, options.refresh_in_milliseconds);
+        return () => clearInterval(timer);
+    }, [options.refresh_in_milliseconds]);
+    return { ...state, reload };
+}
+// Shows a skeleton while the resource first loads, an error with Retry if that fails, and what children build from it after.
+export function Loaded({ resource, lines, children }) {
+    if (resource.data !== null)
+        return _jsx(_Fragment, { children: children(resource.data) });
+    if (resource.error !== null)
+        return _jsx(Failure, { error: resource.error, retry: () => void resource.reload() });
+    return _jsx(Skeleton, { lines: lines });
+}

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

@@ -10,9 +10,14 @@ export interface TableColumn<Row> {
 interface DataTableProps<Row> {
     columns: TableColumn<Row>[];
     rows: Row[];
-    row_key: (row: Row) => string | number;
+    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

@@ -9,5 +9,12 @@ export function DataTable({ columns, rows, row_key, sorting, on_sort, caption })
         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)))) })] }) }));
+    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.d.ts

@@ -0,0 +1,4 @@
+export declare function Age({ epoch, missing }: {
+    epoch: number | null | undefined;
+    missing?: string;
+}): import("preact").JSX.Element;

package/dist/web/preact/time.js

@@ -0,0 +1,9 @@
+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/{toasts.d.ts → preact/toasts.d.ts}

@@ -3,7 +3,7 @@ export interface ToastOptions {
     link?: {
         href: string;
         text: string;
-    };
+    } | null;
     action?: {
         text: string;
         run: () => void;
@@ -12,3 +12,4 @@ export interface ToastOptions {
     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

@@ -0,0 +1,34 @@
+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));
+        }) }));
+}

package/dist/web/states.d.ts

@@ -1,10 +1,3 @@
-import { type Child } from "./dom.ts";
 export declare class LoginNeeded extends Error {
 }
-export declare function skeleton(lines?: number): HTMLElement;
-export declare function empty(title: string, hint?: Child): HTMLElement;
-export declare function failure(error: unknown, retry: () => void): HTMLElement;
-export declare function load(target: HTMLElement, work: () => Promise<Child>, options?: {
-    quiet?: boolean;
-}): Promise<boolean>;
-export declare function attempt<Answer>(target: HTMLElement, quiet: boolean, work: () => Promise<Answer>, retry: () => void): Promise<Answer | null>;
+export declare function pass_login_needed(error: unknown): boolean;

package/dist/web/states.js

@@ -1,47 +1,10 @@
-// What a part of the page shows while it loads, when it has nothing, and when loading failed.
-import { h, nodes } from "./dom.js";
-// ── Login ────────────────────────────────────────────────────────────────────
-// Thrown by a request whose session has lapsed; loading passes it on so the page can ask for a login.
+// What a request throws when the session has lapsed, so a page can tell it from any other failure and ask for a login.
 export class LoginNeeded extends Error {
 }
-// ── States ───────────────────────────────────────────────────────────────────
-export function skeleton(lines = 3) {
-    return h("div", { class: "skeleton", "aria-busy": "true", "aria-label": "Loading" }, ...Array.from({ length: lines }, (_, index) => h("div", { class: "skeleton-line", style: `width: ${90 - index * 15}%` })));
-}
-export function empty(title, hint = null) {
-    return h("div", { class: "empty" }, h("p", { class: "empty-title" }, title), hint && h("p", { class: "muted" }, hint));
-}
-export function failure(error, retry) {
-    return h("div", { class: "failure", role: "alert" }, h("p", {}, `Could not load this: ${error instanceof Error ? error.message : String(error)}`), h("button", { onclick: retry }, "Retry"));
-}
-// ── Loading ──────────────────────────────────────────────────────────────────
-// Fills the target with what the work builds, showing a skeleton first and an error with Retry if it fails.
-export async function load(target, work, options = {}) {
-    if (!options.quiet)
-        target.replaceChildren(skeleton());
-    try {
-        target.replaceChildren(...nodes(await work()));
-        return true;
-    }
-    catch (error) {
-        // A login is the page's to ask for; a quiet refresh keeps what is already shown.
-        if (error instanceof LoginNeeded)
-            throw error;
-        if (!options.quiet)
-            target.replaceChildren(failure(error, () => void load(target, work)));
+// Hands a LoginNeeded on as an unhandled rejection, which the page's login listens for.
+export function pass_login_needed(error) {
+    if (!(error instanceof LoginNeeded))
         return false;
-    }
-}
-// Fetches what a view needs, putting an error with Retry in the target when a first load fails; null when it failed.
-export async function attempt(target, quiet, work, retry) {
-    try {
-        return await work();
-    }
-    catch (error) {
-        if (error instanceof LoginNeeded)
-            throw error;
-        if (!quiet)
-            target.replaceChildren(failure(error, retry));
-        return null;
-    }
+    void Promise.reject(error);
+    return true;
 }

package/dist/web/tables.d.ts

@@ -1,20 +1,10 @@
-import { type Child } from "./dom.ts";
-export interface Column<Row> {
-    label: string;
-    cell: (row: Row) => Child;
-    sort?: (row: Row) => string | number | null;
-    class?: string;
-}
 export interface Sorting {
     key: string;
     descending: boolean;
 }
-export interface TableOptions {
-    sorting?: Sorting;
-    on_sort?: (sorting: Sorting) => void;
-    caption?: string;
+export interface SortableColumn<Row> {
+    label: string;
+    sort?: (row: Row) => string | number | null;
 }
-export declare function sorted_rows<Row>(columns: Pick<Column<Row>, "label" | "sort">[], rows: Row[], sorting: Sorting | undefined): Row[];
+export declare function sorted_rows<Row>(columns: SortableColumn<Row>[], rows: Row[], sorting: Sorting | undefined): Row[];
 export declare function sorting_from(query: URLSearchParams, fallback: Sorting): Sorting;
-export declare function data_table<Row>(columns: Column<Row>[], rows: Row[], options?: TableOptions): HTMLElement;
-export declare function pager(page: number, has_more: boolean, go: (page: number) => void): HTMLElement | null;

package/dist/web/tables.js

@@ -1,6 +1,4 @@
-// Tables that sort by a column's header and turn into cards on phones, with a pager for long lists.
-import { h } from "./dom.js";
-// ── Sorting ──────────────────────────────────────────────────────────────────
+// The order a sorted table shows its rows in, and the sorting a view's query asks for.
 // The rows in the order the sorting asks for, with rows missing a value last.
 export function sorted_rows(columns, rows, sorting) {
     const column = sorting ? columns.find((candidate) => candidate.label === sorting.key && candidate.sort) : undefined;
@@ -18,27 +16,3 @@ export function sorting_from(query, fallback) {
     const key = query.get("sort");
     return key ? { key, descending: query.get("dir") === "desc" } : fallback;
 }
-// ── Tables ───────────────────────────────────────────────────────────────────
-// A table whose cells carry their column's label, so phones can show each row as a card.
-export function data_table(columns, rows, options = {}) {
-    const sorting = options.sorting;
-    const sort_column = sorting ? columns.find((column) => column.label === sorting.key && column.sort) : undefined;
-    const header = (column) => {
-        if (!column.sort || !options.on_sort)
-            return h("th", { class: column.class ?? null, scope: "col" }, column.label);
-        const active = sort_column === column;
-        const descending = active && sorting.descending;
-        return h("th", { class: column.class ?? null, scope: "col", "aria-sort": active ? (descending ? "descending" : "ascending") : "none" }, h("button", {
-            class: "sort",
-            onclick: () => options.on_sort({ key: column.label, descending: active ? !descending : false }),
-        }, column.label, active ? (descending ? " ↓" : " ↑") : ""));
-    };
-    return h("div", { class: "table-wrap" }, h("table", { class: "responsive" }, options.caption ? h("caption", { class: "visually-hidden" }, options.caption) : null, h("thead", {}, h("tr", {}, ...columns.map(header))), h("tbody", {}, ...sorted_rows(columns, rows, sorting).map((row) => h("tr", {}, ...columns.map((column) => h("td", { class: column.class ?? null, "data-label": column.label }, column.cell(row))))))));
-}
-// ── 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 h("nav", { class: "pager", "aria-label": "Pages" }, h("button", { disabled: page <= 1, onclick: () => go(page - 1) }, "← Newer"), h("span", { class: "muted" }, `Page ${page}`), h("button", { disabled: !has_more, onclick: () => go(page + 1) }, "Older →"));
-}

package/dist/web/theme.d.ts

@@ -2,7 +2,7 @@ export type Theme = "system" | "light" | "dark";
 export interface ThemeChoice {
     get(): Theme;
     set(theme: Theme): void;
-    on_change(listener: (theme: Theme) => void): void;
+    on_change(listener: (theme: Theme) => void): () => void;
     apply(theme?: Theme): void;
 }
 export declare function theme_choice(storage_key: string): ThemeChoice;

package/dist/web/theme.js

@@ -31,7 +31,10 @@ export function theme_choice(storage_key) {
         }
         apply(theme);
     };
-    return { get, set, apply, on_change: (listener) => void listeners.add(listener) };
+    return { get, set, apply, on_change: (listener) => {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        } };
 }
 // The header's button steps through system, light and dark.
 export function next_theme(theme) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Code the X-apps share: agents and their long runs, passwords, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {

package/dist/web/badges.d.ts

@@ -1,10 +0,0 @@
-import { type Child } from "./dom.ts";
-export type Tone = "good" | "warn" | "bad" | "info" | "none";
-export declare function badge(text: Child, tone?: Tone, title?: string): HTMLElement;
-export declare function state_badge<State extends string>(labels: Record<State, [text: string, tone: Tone]>, state: State): HTMLElement;
-export declare function chip(text: Child, title?: string): HTMLElement;
-export declare function chip_button(text: Child, on_click: () => void, title?: string): HTMLElement;
-export declare function chips(items: Child[], options?: {
-    inline?: boolean;
-}): HTMLElement;
-export declare function verdict(ok: boolean | null | undefined, label: string): HTMLElement;

package/dist/web/badges.js

@@ -1,30 +0,0 @@
-// Badges, chips and verdicts: short labels whose tone is written out, so meaning never rests on color alone.
-import { h } from "./dom.js";
-// ── Badges ───────────────────────────────────────────────────────────────────
-export function badge(text, tone = "none", title = "") {
-    return h("span", { class: `badge tone-${tone}`, title: title || null }, text);
-}
-// A badge for one of a fixed set of states, each named by its text and tone.
-export function state_badge(labels, state) {
-    const [text, tone] = labels[state];
-    return badge(text, tone);
-}
-// ── Chips ────────────────────────────────────────────────────────────────────
-export function chip(text, title = "") {
-    return h("span", { class: "chip", title: title || null }, text);
-}
-// A chip that picks what it names, such as a tag to filter by.
-export function chip_button(text, on_click, title = "") {
-    return h("button", { type: "button", class: "chip", title: title || null, onclick: on_click }, text);
-}
-// A row of chips or badges, with less space between them when they sit inside a line of text.
-export function chips(items, options = {}) {
-    return h("span", { class: options.inline ? "chips inline-chips" : "chips" }, ...items);
-}
-// ── Verdicts ─────────────────────────────────────────────────────────────────
-// A pass, fail or not-yet verdict, such as "checks: pass".
-export function verdict(ok, label) {
-    const text = ok === null || ok === undefined ? "no verdict" : ok ? "pass" : "fail";
-    const tone = ok === null || ok === undefined ? "none" : ok ? "good" : "bad";
-    return h("span", { class: `verdict tone-${tone}` }, `${label}: ${text}`);
-}

package/dist/web/controls.d.ts

@@ -1,6 +0,0 @@
-import { type Child } from "./dom.ts";
-export declare function search_box(label: string, value: string, on_input: (value: string) => void): HTMLInputElement;
-export declare function select(label: string, options: [value: string, text: string][], value: string, on_change: (value: string) => void): HTMLElement;
-export declare function segmented<Value extends string>(label: string, choices: [value: Value, text: string][], value: Value, on_change: (value: Value) => void): HTMLElement;
-export declare function button_group(label: string, ...buttons: Child[]): HTMLElement;
-export declare function switch_toggle(label: string, checked: boolean, on_change: (on: boolean) => Promise<boolean | void> | boolean | void): HTMLInputElement;