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

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/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));
-        }) }));
-}