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

package/dist/web/react/prefs.js

@@ -0,0 +1,11 @@
+// A remembered setting as component state, read once when the component mounts and written on every change.
+import { useState } from "react";
+import { browser_storage, read_pref, write_pref } from "../prefs.js";
+export function use_pref(key, initial, validate, storage = browser_storage()) {
+    const [value, set_value] = useState(() => read_pref(storage, key, initial, validate));
+    const change = (next) => {
+        set_value(next);
+        write_pref(storage, key, next);
+    };
+    return [value, change];
+}

package/dist/web/react/reveal.d.ts

@@ -0,0 +1,9 @@
+export interface RevealOptions {
+    root_margin?: string;
+}
+export interface Reveal {
+    shown_count: number;
+    more_ref: (element: Element | null) => void;
+    reset: () => void;
+}
+export declare function use_reveal(page_size: number, options?: RevealOptions): Reveal;

package/dist/web/react/reveal.js

@@ -0,0 +1,30 @@
+// A long list shown a page at a time, the next page added as its end scrolls into view.
+import { useCallback, useEffect, useRef, useState } from "react";
+export function use_reveal(page_size, options = {}) {
+    const root_margin = options.root_margin ?? "200px";
+    const [shown_count, set_shown_count] = useState(page_size);
+    const observer = useRef(null);
+    const marker = useRef(null);
+    const more_ref = useCallback((element) => {
+        observer.current?.disconnect();
+        observer.current = null;
+        marker.current = element;
+        if (!element)
+            return;
+        observer.current = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                set_shown_count((count) => count + page_size);
+        }, { rootMargin: root_margin });
+        observer.current.observe(element);
+    }, [page_size, root_margin]);
+    // Watching the marker afresh after each page asks again whether it is still in view, so a short page keeps filling.
+    useEffect(() => {
+        if (!observer.current || !marker.current)
+            return;
+        observer.current.unobserve(marker.current);
+        observer.current.observe(marker.current);
+    }, [shown_count]);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const reset = useCallback(() => set_shown_count(page_size), [page_size]);
+    return { shown_count, more_ref, reset };
+}

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

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+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("react").JSX.Element;
+export interface ShellSection {
+    id: string;
+    label: string;
+    href: string;
+}
+export interface SidebarWidth {
+    default_width: number;
+    min: number;
+    max: number;
+    storage_key?: string;
+    width?: number;
+    on_change?: (width: number, done: boolean) => void;
+}
+interface ShellProps {
+    brand: string;
+    sections?: ShellSection[];
+    active?: string;
+    sidebar?: ReactNode;
+    sidebar_width?: SidebarWidth;
+    theme: ThemeChoice;
+    user?: string | null;
+    user_href?: string;
+    on_logout?: () => void;
+    brand_href?: string;
+    menu_open?: boolean;
+    on_menu_open_change?: (open: boolean) => void;
+    main_class?: string;
+    tools?: ReactNode;
+    sidebar_foot?: ReactNode;
+    view_key?: string;
+    children: ReactNode;
+}
+export declare function Shell({ brand, sections, active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, brand_href, tools, sidebar_foot, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, children, }: ShellProps): import("react").JSX.Element;
+export {};

package/dist/web/react/shell.js

@@ -0,0 +1,90 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The frame around every view: the top bar, the sidebar that slides in on phones and resizes on wide screens, the theme button, and the toasts, dialogs and menus.
+import { useEffect, useRef, useState } from "react";
+import { current_route } from "../router.js";
+import { store_sizes, stored_sizes } from "../split.js";
+import { next_theme } from "../theme.js";
+import { Dialogs } from "./dialog.js";
+import { ContextMenus } from "./menus.js";
+import { ResizeHandle } from "./split.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", className: "icon", title: `${text} (click to change)`, "aria-label": `${text}, click to change`, onClick: () => choice.set(next_theme(choice.get())), children: icon }));
+}
+// The sidebar's width: the app's own, else the one kept in this browser, else the default.
+function use_sidebar_width(spec) {
+    const [kept, set_kept] = useState(() => spec?.storage_key ? stored_sizes(spec.storage_key, 1)?.[0] : undefined);
+    const width = spec ? Math.min(spec.max, Math.max(spec.min, spec.width ?? kept ?? spec.default_width)) : undefined;
+    const change = (next, done) => {
+        if (spec?.width === undefined)
+            set_kept(next);
+        if (done && spec?.storage_key)
+            store_sizes(spec.storage_key, [next]);
+        spec?.on_change?.(next, done);
+    };
+    return [width, change];
+}
+export function Shell({ brand, sections = [], active, sidebar: sidebar_content, sidebar_width, theme, user, user_href, on_logout, brand_href = "#/", tools, sidebar_foot, view_key, menu_open: held_menu_open, on_menu_open_change, main_class, children, }) {
+    const [own_menu_open, set_own_menu_open] = useState(false);
+    const menu_open = held_menu_open ?? own_menu_open;
+    const main = useRef(null);
+    const menu_button = useRef(null);
+    const sidebar = useRef(null);
+    const first_view = useRef(true);
+    const logged_out = user === null;
+    const [width, change_width] = use_sidebar_width(sidebar_width);
+    // Every opening and closing of the phone menu goes through here, so an app that holds it hears each one.
+    function set_menu_open(open) {
+        if (open === menu_open)
+            return;
+        if (held_menu_open === undefined)
+            set_own_menu_open(open);
+        on_menu_open_change?.(open);
+    }
+    // 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[href], button:not(:disabled), input, select, textarea, [tabindex='0']")?.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", { className: "skip", href: "#main", children: "Skip to content" }), _jsxs("header", { className: "topbar", children: [_jsx("button", { ref: menu_button, className: "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: brand_href, className: "brand", children: brand }), !logged_out && tools, !logged_out && _jsx(ThemeButton, { choice: theme }), typeof user === "string" && (user_href ? _jsx("a", { className: "account-link", href: user_href, children: user }) : _jsx("span", { className: "user-name", children: user })), typeof user === "string" && on_logout && _jsx("button", { onClick: on_logout, children: "Log out" })] }), _jsxs("div", { className: "layout", style: width === undefined ? undefined : { "--sidebar-width": `${width}px` }, children: [_jsxs("nav", { ref: sidebar, id: "sidebar", className: "sidebar", "aria-label": "Main", children: [sidebar_content ?? sections.map((section) => (_jsx("a", { href: section.href, "data-section": section.id, className: section.id === active ? "active" : undefined, "aria-current": section.id === active ? "page" : undefined, children: section.label }, section.id))), sidebar_foot, sidebar_width && width !== undefined && (_jsx(ResizeHandle, { side: "left", size: width, min: sidebar_width.min, max: sidebar_width.max, default_size: sidebar_width.default_width, on_resize: (next) => change_width(next, false), on_resize_end: (next) => change_width(next, true), label: "Resize the sidebar", class_name: "sidebar-resize" }))] }), _jsx("div", { className: "scrim", hidden: !menu_open, onClick: () => set_menu_open(false) }), _jsx("main", { ref: main, id: "main", className: main_class, tabIndex: -1, children: children })] }), _jsx(Toasts, {}), _jsx(Dialogs, {}), _jsx(ContextMenus, {})] }));
+}

package/dist/web/react/shortcuts.d.ts

@@ -0,0 +1,23 @@
+export interface Shortcut {
+    keys: string;
+    when?: "always" | "outside_fields";
+    over_overlays?: boolean;
+    keep_default?: boolean;
+    run: (event: KeyboardEvent) => void;
+}
+interface KeyCombination {
+    key: string;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean | "any";
+}
+export declare function is_apple_platform(): boolean;
+export declare function parse_keys(keys: string, apple?: boolean): KeyCombination;
+export declare function matches_keys(keys: string, event: KeyboardEvent, apple?: boolean): boolean;
+export declare function describe_keys(keys: string, apple?: boolean): string;
+export declare function is_typing(target: EventTarget | null): boolean;
+export declare function is_overlay_open(document: Document): boolean;
+export declare function is_shortcut_allowed(shortcut: Shortcut, event: KeyboardEvent): boolean;
+export declare function use_shortcuts(shortcuts: Shortcut[]): void;
+export {};

package/dist/web/react/shortcuts.js

@@ -0,0 +1,95 @@
+// Keyboard shortcuts for a page: "mod+z" style bindings that stay quiet while text is typed or a dialog or popover is open.
+import { useEffect, useRef } from "react";
+// ── Parsing ──────────────────────────────────────────────────────────────────
+const KEY_ALIASES = {
+    esc: "escape", return: "enter", space: " ", spacebar: " ", del: "delete",
+    up: "arrowup", down: "arrowdown", left: "arrowleft", right: "arrowright",
+    plus: "+", cmd: "meta", command: "meta", control: "ctrl", option: "alt",
+};
+export function is_apple_platform() {
+    return typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+}
+// A punctuation key such as "?" needs Shift on some layouts and not others, so Shift is ignored unless named.
+export function parse_keys(keys, apple = is_apple_platform()) {
+    const parts = keys.toLowerCase().split(/\+(?!$)/).map((part) => KEY_ALIASES[part] ?? part);
+    const key = parts.at(-1) ?? "";
+    const modifiers = new Set(parts.slice(0, -1).map((part) => part === "mod" ? (apple ? "meta" : "ctrl") : part));
+    const is_letter_or_named = /^[a-z0-9]$/.test(key) || key.length > 1;
+    return {
+        key,
+        ctrl: modifiers.has("ctrl"),
+        meta: modifiers.has("meta"),
+        alt: modifiers.has("alt"),
+        shift: modifiers.has("shift") || (is_letter_or_named ? false : "any"),
+    };
+}
+// Letters and digits also match by their physical key, so Alt+A still matches on a Mac where it types "å".
+export function matches_keys(keys, event, apple = is_apple_platform()) {
+    const combination = parse_keys(keys, apple);
+    if (event.ctrlKey !== combination.ctrl || event.metaKey !== combination.meta || event.altKey !== combination.alt)
+        return false;
+    if (combination.shift !== "any" && event.shiftKey !== combination.shift)
+        return false;
+    if (event.key.toLowerCase() === combination.key)
+        return true;
+    return /^[a-z]$/.test(combination.key) ? event.code === `Key${combination.key.toUpperCase()}` : /^[0-9]$/.test(combination.key) && event.code === `Digit${combination.key}`;
+}
+// ── Help text ────────────────────────────────────────────────────────────────
+const KEY_NAMES = {
+    " ": "Space", escape: "Esc", arrowup: "↑", arrowdown: "↓", arrowleft: "←", arrowright: "→",
+    enter: "Enter", delete: "Delete", backspace: "Backspace", tab: "Tab", home: "Home", end: "End",
+    pageup: "Page Up", pagedown: "Page Down",
+};
+// The keys as a person reads them: "Ctrl+Shift+Z" elsewhere, "⌘⇧Z" on Apple devices.
+export function describe_keys(keys, apple = is_apple_platform()) {
+    const combination = parse_keys(keys, apple);
+    const key = KEY_NAMES[combination.key] ?? (combination.key.length === 1 ? combination.key.toUpperCase() : capitalised(combination.key));
+    const shift = combination.shift === true;
+    if (apple)
+        return [combination.ctrl && "⌃", combination.alt && "⌥", shift && "⇧", combination.meta && "⌘", key].filter(Boolean).join("");
+    return [combination.ctrl && "Ctrl", combination.alt && "Alt", shift && "Shift", combination.meta && "Meta", key].filter(Boolean).join("+");
+}
+function capitalised(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+// ── Guards ───────────────────────────────────────────────────────────────────
+// Text fields, selects and editable regions keep their keys for typing.
+export function is_typing(target) {
+    if (!(target instanceof Element))
+        return false;
+    if (target instanceof HTMLElement && target.isContentEditable)
+        return true;
+    return target.closest("input, textarea, select, [contenteditable]:not([contenteditable='false'])") !== null;
+}
+// An open dialog or popover takes the keyboard, so page shortcuts wait until it closes.
+export function is_overlay_open(document) {
+    return document.querySelector("dialog[open], [popover]:popover-open") !== null;
+}
+// Whether the shortcut should fire for the event, before its keys are compared.
+export function is_shortcut_allowed(shortcut, event) {
+    if (event.isComposing)
+        return false;
+    if ((shortcut.when ?? "outside_fields") === "outside_fields" && is_typing(event.target))
+        return false;
+    return shortcut.over_overlays === true || !is_overlay_open(document);
+}
+// ── Hook ─────────────────────────────────────────────────────────────────────
+// Listens on the window while the component is shown; the first shortcut that matches runs, and the list may change on every render.
+export function use_shortcuts(shortcuts) {
+    const latest = useRef(shortcuts);
+    latest.current = shortcuts;
+    useEffect(() => {
+        function on_key(event) {
+            if (event.defaultPrevented)
+                return;
+            const shortcut = latest.current.find((each) => matches_keys(each.keys, event) && is_shortcut_allowed(each, event));
+            if (!shortcut)
+                return;
+            if (!shortcut.keep_default)
+                event.preventDefault();
+            shortcut.run(event);
+        }
+        window.addEventListener("keydown", on_key);
+        return () => window.removeEventListener("keydown", on_key);
+    }, []);
+}

package/dist/web/{preact → react}/split.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 import { type Axis, type PaneSpec } from "../split.ts";
 export type { PaneSpec } from "../split.ts";
 interface ResizeHandleProps {
@@ -12,12 +12,12 @@ interface ResizeHandleProps {
     label: string;
     class_name?: string;
 }
-export declare function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }: ResizeHandleProps): import("preact").JSX.Element;
+export declare function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }: ResizeHandleProps): import("react").JSX.Element;
 interface SplitProps {
     storage_key: string;
     axis?: Axis;
     specs: PaneSpec[];
     preferred?: (number | undefined)[];
-    panes: ComponentChildren[];
+    panes: ReactNode[];
 }
-export declare function Split({ storage_key, axis, specs, preferred, panes }: SplitProps): import("preact").JSX.Element;
+export declare function Split({ storage_key, axis, specs, preferred, panes }: SplitProps): import("react").JSX.Element;

package/dist/web/{preact → react}/split.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// Preact resize handles: one on a panel's edge, and a split whose panes share a container and remember their sizes.
-import { Fragment } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React resize handles: one on a panel's edge, and a split whose panes share a container and remember their sizes.
+import { Fragment, useEffect, useRef, useState } from "react";
 import { distribute, fit, follow_drag, key_step, resize_at, store_sizes, stored_sizes } from "../split.js";
 // A thin bar on a panel's inner edge: drag it or press the arrow keys to resize, double-click it to reset.
 export function ResizeHandle({ side, size, min, max, default_size, on_resize, on_resize_end, label, class_name }) {
@@ -11,19 +10,19 @@ export function ResizeHandle({ side, size, min, max, default_size, on_resize, on
     function start_drag(event) {
         const start_size = size;
         let latest = size;
-        follow_drag(event.currentTarget, event, axis, (moved) => {
+        follow_drag(event.currentTarget, event.nativeEvent, axis, (moved) => {
             latest = clamp(start_size + direction * moved);
             on_resize(latest);
         }, () => on_resize_end(latest));
     }
     function nudge(event) {
-        const step = key_step(event, axis);
+        const step = key_step(event.nativeEvent, axis);
         if (step === null)
             return;
         event.preventDefault();
         on_resize_end(clamp(size + direction * step));
     }
-    return (_jsx("div", { class: ["resize-handle", axis === "vertical" && "vertical", class_name].filter(Boolean).join(" "), role: "separator", "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": label, "aria-valuenow": size, "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, onPointerDown: start_drag, onDblClick: () => on_resize_end(default_size), onKeyDown: nudge }));
+    return (_jsx("div", { className: ["resize-handle", axis === "vertical" && "vertical", class_name].filter(Boolean).join(" "), role: "separator", "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": label, "aria-valuenow": size, "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, onPointerDown: start_drag, onDoubleClick: () => on_resize_end(default_size), onKeyDown: nudge }));
 }
 // Panes side by side or stacked, with a handle between each two; double-clicking a handle restores the first sizes.
 export function Split({ storage_key, axis = "horizontal", specs, preferred, panes }) {
@@ -76,13 +75,13 @@ export function Split({ storage_key, axis = "horizontal", specs, preferred, pane
     function start_drag(index, event) {
         const before = [...latest.current];
         let moved_to = before;
-        follow_drag(event.currentTarget, event, axis, (moved) => {
+        follow_drag(event.currentTarget, event.nativeEvent, axis, (moved) => {
             moved_to = resize_at(before, index, moved, specs);
             change(moved_to, false);
         }, () => store_sizes(storage_key, moved_to));
     }
     function nudge(index, event) {
-        const step = key_step(event, axis);
+        const step = key_step(event.nativeEvent, axis);
         if (step === null)
             return;
         event.preventDefault();
@@ -91,5 +90,5 @@ export function Split({ storage_key, axis = "horizontal", specs, preferred, pane
     const template = sizes.length === specs.length
         ? sizes.flatMap((size, index) => index === 0 ? [`${size}px`] : ["auto", `${size}px`]).join(" ")
         : specs.map(() => "1fr").join(" auto ");
-    return (_jsx("div", { ref: container, class: `split ${axis}`, style: axis === "horizontal" ? { gridTemplateColumns: template } : { gridTemplateRows: template }, children: panes.map((pane, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("div", { class: axis === "horizontal" ? "resize-handle" : "resize-handle vertical", role: "separator", tabIndex: 0, "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": "Resize panes", "aria-valuenow": sizes[index - 1] ?? 0, onPointerDown: (event) => start_drag(index - 1, event), onKeyDown: (event) => nudge(index - 1, event), onDblClick: () => change(distribute(extent(), specs, preferred), true) })), _jsx("div", { class: "split-pane", children: pane })] }, index))) }));
+    return (_jsx("div", { ref: container, className: `split ${axis}`, style: axis === "horizontal" ? { gridTemplateColumns: template } : { gridTemplateRows: template }, children: panes.map((pane, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("div", { className: axis === "horizontal" ? "resize-handle" : "resize-handle vertical", role: "separator", tabIndex: 0, "aria-orientation": axis === "horizontal" ? "vertical" : "horizontal", "aria-label": "Resize panes", "aria-valuenow": sizes[index - 1] ?? 0, onPointerDown: (event) => start_drag(index - 1, event), onKeyDown: (event) => nudge(index - 1, event), onDoubleClick: () => change(distribute(extent(), specs, preferred), true) })), _jsx("div", { className: "split-pane", children: pane })] }, index))) }));
 }

package/dist/web/{preact → react}/states.d.ts

@@ -1,15 +1,15 @@
-import type { ComponentChildren } from "preact";
+import { type ReactNode } from "react";
 export declare function Skeleton({ lines }: {
     lines?: number;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Empty({ title, hint }: {
     title: string;
-    hint?: ComponentChildren;
-}): import("preact").JSX.Element;
+    hint?: ReactNode;
+}): import("react").JSX.Element;
 export declare function Failure({ error, retry }: {
     error: unknown;
     retry: () => void;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 export interface Resource<Data> {
     data: Data | null;
     error: unknown;
@@ -23,5 +23,5 @@ export declare function use_resource<Data>(work: () => Promise<Data>, dependenci
 export declare function Loaded<Data>({ resource, lines, children }: {
     resource: Resource<Data>;
     lines?: number;
-    children: (data: Data) => ComponentChildren;
-}): import("preact").JSX.Element;
+    children: (data: Data) => ReactNode;
+}): import("react").JSX.Element;

package/dist/web/{preact → react}/states.js

@@ -1,15 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// What a part of the page shows while it loads, when it has nothing, and when loading failed, and the hook that loads it.
+import { useCallback, useEffect, useRef, useState } from "react";
 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)) }));
+    return (_jsx("div", { className: "skeleton", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: lines }, (_, index) => _jsx("div", { className: "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 })] }));
+    return (_jsxs("div", { className: "empty", children: [_jsx("p", { className: "empty-title", children: title }), hint && _jsx("p", { className: "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" })] }));
+    return (_jsxs("div", { className: "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 = {}) {

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

@@ -0,0 +1,69 @@
+import { type CSSProperties, type DragEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type Sorting } from "../tables.ts";
+import { type DropPlacement } from "../tree.ts";
+export type { Sorting } from "../tables.ts";
+export type { DropPlacement } from "../tree.ts";
+export interface TableColumn<Row> {
+    label: string;
+    id?: string;
+    cell: (row: Row) => ReactNode;
+    sort?: (row: Row) => string | number | null;
+    sortable?: boolean;
+    class?: string;
+    width?: number;
+    min_width?: number;
+    max_width?: number;
+    hideable?: boolean;
+    movable?: boolean;
+    filter?: ReactNode | ((close: () => void) => ReactNode);
+    filter_active?: boolean;
+}
+export interface RowGroup<Row> {
+    key: string;
+    label: ReactNode;
+    rows: Row[];
+    class_name?: string;
+}
+interface DataTableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    groups?: RowGroup<Row>[];
+    row_key?: (row: Row) => string | number;
+    caption?: string;
+    sorting?: Sorting | Sorting[];
+    manual_sorting?: boolean;
+    on_sort?: (sorting: Sorting) => void;
+    on_sorting_change?: (sorting: Sorting[]) => void;
+    column_order?: string[];
+    on_column_order_change?: (order: string[]) => void;
+    column_widths?: Record<string, number>;
+    on_column_widths_change?: (widths: Record<string, number>, done: boolean) => void;
+    hidden_columns?: string[];
+    on_hidden_columns_change?: (hidden: string[]) => void;
+    row_passes?: (row: Row) => boolean;
+    on_clear_filters?: () => void;
+    get_children?: (row: Row) => Row[] | undefined;
+    expanded?: string[] | true;
+    on_expanded_change?: (expanded: string[]) => void;
+    on_row_click?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_context_menu?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_double_click?: (row: Row, event: MouseEvent<HTMLTableRowElement>) => void;
+    on_row_key_down?: (row: Row, event: KeyboardEvent<HTMLTableRowElement>) => void;
+    active_row?: string | number;
+    row_selected?: (row: Row) => boolean;
+    row_class?: (row: Row) => string | undefined;
+    row_title?: (row: Row) => string | undefined;
+    row_style?: (row: Row) => CSSProperties | undefined;
+    render_after_row?: (row: Row) => ReactNode;
+    on_row_drag_start?: (row: Row, event: DragEvent<HTMLTableRowElement>) => void;
+    on_row_drag_end?: () => void;
+    can_drop_on_row?: (row: Row, placement: DropPlacement) => boolean;
+    allow_inside_drop?: boolean;
+    on_row_drop?: (row: Row, placement: DropPlacement, event: DragEvent<HTMLTableRowElement>) => void;
+}
+export declare function DataTable<Row>(props: DataTableProps<Row>): import("react").JSX.Element;
+export declare function Pager({ page, has_more, go }: {
+    page: number;
+    has_more: boolean;
+    go: (page: number) => void;
+}): import("react").JSX.Element | null;