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

package/dist/web/preact/layout.js

@@ -1,69 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-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.map(([label, value]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value ?? "—" })] }, label))) }));
-}
-// One headline figure under its label, its edge marked by its tone.
-export function Tile({ label, value, tone, href }) {
-    const tile_class = tone && tone !== "none" ? `tile tile-${tone}` : "tile";
-    const children = _jsxs(_Fragment, { children: [_jsx("div", { class: "tile-label", children: label }), _jsx("div", { class: "tile-value", children: value })] });
-    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);
-        }) }));
-}
-// ── Badges ───────────────────────────────────────────────────────────────────
-export function Badge({ tone = "none", title, children }) {
-    return _jsx("span", { class: `badge tone-${tone}`, title: title, children: children });
-}
-export function Chip({ title, on_click, children }) {
-    return on_click
-        ? _jsx("button", { type: "button", class: "chip", title: title, onClick: on_click, children: children })
-        : _jsx("span", { class: "chip", title: title, children: children });
-}
-// ── 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" })] }));
-}
-// ── 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.
-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,18 +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 {
-    x: number;
-    y: number;
-    label: string;
-    on_close: () => void;
-    children: ComponentChildren;
-}
-export declare function Popover({ x, y, label, on_close, children }: PopoverProps): import("preact").JSX.Element;

package/dist/web/preact/menus.js

@@ -1,29 +0,0 @@
-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.
-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) {
-    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()), []);
-    return element;
-}
-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: () => {
-                        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 }));
-}

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

@@ -1,18 +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;

package/dist/web/preact/table.js

@@ -1,13 +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)))) })] }) }));
-}

package/dist/web/shell.d.ts

@@ -1,7 +0,0 @@
-import { type ThemeChoice } from "./theme.ts";
-export interface SidebarMenu {
-    close(): void;
-}
-export declare function sidebar_menu(menu: HTMLButtonElement, sidebar: HTMLElement, scrim: HTMLElement): SidebarMenu;
-export declare function mark_section(sidebar: HTMLElement, section: string): void;
-export declare function theme_button(button: HTMLButtonElement, choice: ThemeChoice): void;

package/dist/web/shell.js

@@ -1,51 +0,0 @@
-// The frame around every view: the sidebar that slides in on phones, the section it lights up, and the theme button.
-import { next_theme } from "./theme.js";
-// The menu button opens the sidebar over a scrim, and the scrim or Escape closes it again.
-export function sidebar_menu(menu, sidebar, scrim) {
-    const close = () => {
-        document.body.classList.remove("menu-open");
-        menu.setAttribute("aria-expanded", "false");
-        scrim.hidden = true;
-    };
-    menu.addEventListener("click", () => {
-        const open = !document.body.classList.contains("menu-open");
-        document.body.classList.toggle("menu-open", open);
-        menu.setAttribute("aria-expanded", String(open));
-        scrim.hidden = !open;
-        if (open)
-            sidebar.querySelector("a")?.focus();
-    });
-    scrim.addEventListener("click", close);
-    document.addEventListener("keydown", (event) => {
-        if (event.key === "Escape" && document.body.classList.contains("menu-open")) {
-            close();
-            menu.focus();
-        }
-    });
-    return { close };
-}
-// Lights up the sidebar link whose data-section names the section, and marks it as the current page.
-export function mark_section(sidebar, section) {
-    for (const item of sidebar.querySelectorAll("a[data-section]")) {
-        const active = item.dataset.section === section;
-        item.classList.toggle("active", active);
-        if (active)
-            item.setAttribute("aria-current", "page");
-        else
-            item.removeAttribute("aria-current");
-    }
-}
-// ── Theme ────────────────────────────────────────────────────────────────────
-const theme_labels = { system: ["◐", "Theme: system"], light: ["☀", "Theme: light"], dark: ["☾", "Theme: dark"] };
-// The button steps through system, light and dark, its glyph and label showing the current one.
-export function theme_button(button, choice) {
-    const show = (theme) => {
-        const [icon, text] = theme_labels[theme];
-        button.textContent = icon;
-        button.title = `${text} (click to change)`;
-        button.setAttribute("aria-label", `${text}, click to change`);
-    };
-    choice.on_change(show);
-    button.addEventListener("click", () => choice.set(next_theme(choice.get())));
-    choice.apply();
-}

package/dist/web/toasts.js

@@ -1,22 +0,0 @@
-// Short notes in the page's corner after something happened, with an optional link or action such as Undo.
-import { h } from "./dom.js";
-// The region toasts stack in, made at the foot of the page when the page has none of its own.
-function region() {
-    const existing = document.querySelector("#toasts");
-    if (existing)
-        return existing;
-    const made = h("div", { id: "toasts", class: "toasts" });
-    document.body.append(made);
-    return made;
-}
-// Shows the message and returns a function that closes it early.
-export function toast(message, options = {}) {
-    const tone = options.tone ?? "info";
-    const close = () => item.remove();
-    const action = options.action;
-    const item = h("div", { class: `toast tone-${tone}`, role: tone === "bad" ? "alert" : "status" }, h("span", {}, message), options.link && h("a", { href: options.link.href, onclick: close }, options.link.text), action && h("button", { class: "toast-action", onclick: () => { close(); action.run(); } }, action.text), h("button", { class: "icon", "aria-label": "Dismiss", onclick: close }, "×"));
-    region().append(item);
-    if (!(options.sticky ?? tone === "bad"))
-        setTimeout(close, options.duration_in_milliseconds ?? 6000);
-    return close;
-}