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

package/dist/web/controls.js

@@ -1,55 +0,0 @@
-// Controls that change what a view shows or does: filters, selects, segmented choices, switches and button groups.
-import { h } from "./dom.js";
-// ── Filters ──────────────────────────────────────────────────────────────────
-// A search field that hands on what was typed once typing pauses.
-export function search_box(label, value, on_input) {
-    let timer;
-    return h("input", {
-        type: "search", class: "filter", placeholder: label, "aria-label": label, value,
-        oninput: (event) => {
-            clearTimeout(timer);
-            const text = event.target.value;
-            timer = window.setTimeout(() => on_input(text), 200);
-        },
-    });
-}
-export function select(label, options, value, on_change) {
-    return h("label", { class: "field" }, h("span", { class: "field-label" }, label), h("select", { onchange: (event) => on_change(event.target.value) }, ...options.map(([option, text]) => h("option", { value: option, selected: option === value }, text))));
-}
-// ── Choices ──────────────────────────────────────────────────────────────────
-// One of a few choices side by side, such as cards or a table; the chosen one takes the accent.
-export function segmented(label, choices, value, on_change) {
-    const buttons = choices.map(([choice, text]) => h("button", {
-        type: "button", role: "radio", "aria-checked": String(choice === value),
-        onclick: () => {
-            for (const [index, button] of buttons.entries())
-                button.setAttribute("aria-checked", String(choices[index][0] === choice));
-            on_change(choice);
-        },
-    }, text));
-    return h("div", { class: "segmented", role: "radiogroup", "aria-label": label }, ...buttons);
-}
-// Buttons joined into one control, such as zoom out, zoom in and fit.
-export function button_group(label, ...buttons) {
-    return h("div", { class: "segmented", role: "group", "aria-label": label }, ...buttons);
-}
-// An on and off switch that waits on the change and flips back when the change did not take.
-export function switch_toggle(label, checked, on_change) {
-    const box = h("input", { type: "checkbox", role: "switch", checked, "aria-label": label });
-    box.addEventListener("change", async () => {
-        const on = box.checked;
-        box.disabled = true;
-        try {
-            if ((await on_change(on)) === false)
-                box.checked = !on;
-        }
-        catch (error) {
-            box.checked = !on;
-            throw error;
-        }
-        finally {
-            box.disabled = false;
-        }
-    });
-    return box;
-}

package/dist/web/dialogs.d.ts

@@ -1,18 +0,0 @@
-import { type Child } from "./dom.ts";
-export interface DialogOptions {
-    wide?: boolean;
-    class_name?: string;
-}
-export declare function open_dialog(title: string, body: Child, buttons: (close: () => void) => Child, options?: DialogOptions): () => void;
-export interface ConfirmOptions {
-    title: string;
-    message: Child;
-    confirm_label: string;
-    busy_label?: string;
-    danger?: boolean;
-    wide?: boolean;
-    type_to_confirm?: string;
-    run: () => Promise<void>;
-}
-export declare function confirm_dialog(options: ConfirmOptions): void;
-export declare function text_dialog(title: string, text: string): void;

package/dist/web/dialogs.js

@@ -1,49 +0,0 @@
-// Modal dialogs: one with any body and buttons, one that asks before an action, and one that shows a long text.
-import { h } from "./dom.js";
-import { toast } from "./toasts.js";
-// A modal dialog: the page behind it is inert, focus stays inside, and Escape closes it.
-export function open_dialog(title, body, buttons, options = {}) {
-    const classes = ["dialog", options.wide && "wide", options.class_name].filter(Boolean).join(" ");
-    const dialog = h("dialog", { class: classes, "aria-labelledby": "dialog-title" });
-    const close = () => {
-        dialog.close();
-        dialog.remove();
-    };
-    dialog.addEventListener("close", () => dialog.remove());
-    dialog.append(h("h2", { id: "dialog-title" }, title), h("div", { class: "dialog-body" }, body), h("div", { class: "dialog-buttons" }, buttons(close)));
-    document.body.append(dialog);
-    dialog.showModal();
-    return close;
-}
-export function confirm_dialog(options) {
-    const confirm = h("button", { class: options.danger ? "danger solid" : "accent solid", disabled: options.type_to_confirm !== undefined }, options.confirm_label);
-    const typed = options.type_to_confirm === undefined ? null : h("input", {
-        type: "text", class: "filter", autocomplete: "off", "aria-label": `Type ${options.type_to_confirm} to confirm`,
-        oninput: (event) => { confirm.disabled = event.target.value !== options.type_to_confirm; },
-    });
-    const body = h("div", {}, typeof options.message === "string" ? h("p", {}, options.message) : options.message, typed && h("label", { class: "type-confirm" }, h("span", {}, "Type ", h("strong", {}, options.type_to_confirm), " to confirm:"), typed));
-    open_dialog(options.title, body, (close) => {
-        const cancel = h("button", { onclick: close }, "Cancel");
-        confirm.addEventListener("click", async () => {
-            confirm.disabled = true;
-            cancel.disabled = true;
-            confirm.textContent = options.busy_label ?? "Working…";
-            try {
-                await options.run();
-            }
-            finally {
-                close();
-            }
-        });
-        return [cancel, confirm];
-    }, { wide: options.wide });
-    (typed ?? confirm).focus();
-}
-// ── Text ─────────────────────────────────────────────────────────────────────
-// Shows a long text result, such as a preview, with a button to copy it.
-export function text_dialog(title, text) {
-    open_dialog(title, h("pre", { class: "output" }, text), (close) => [
-        h("button", { onclick: () => void navigator.clipboard?.writeText(text).then(() => toast("Copied.")) }, "Copy"),
-        h("button", { class: "accent solid", onclick: close }, "Close"),
-    ], { wide: true });
-}

package/dist/web/layout.d.ts

@@ -1,28 +0,0 @@
-import { type Child } from "./dom.ts";
-export declare function section(title: Child, body: Child, tools?: Child): HTMLElement;
-export declare function facts(rows: [label: string, value: Child, class_name?: string][], layout?: "grid" | "rows"): HTMLElement;
-export declare function tile(label: string, value: Child, class_name?: string | null, href?: string | null): HTMLElement;
-export declare function tiles(...items: Child[]): HTMLElement;
-export interface CardOptions {
-    subtitle?: Child;
-    badge?: Child;
-    class_name?: string;
-    href?: string;
-}
-export declare function card(title: Child, body: Child, options?: CardOptions): HTMLElement;
-export declare function cards(...items: Child[]): HTMLElement;
-export interface TabItem {
-    id: string;
-    label: string;
-    href: string;
-}
-export declare function tabs(items: TabItem[], active: string, label?: string): HTMLElement;
-export declare function crumbs(items: [label: string, href: string | null][]): HTMLElement;
-export declare function toolbar(...children: Child[]): HTMLElement;
-export declare function stepper(label: string, previous: {
-    text: string;
-    href: string | null;
-}, position: Child, next: {
-    text: string;
-    href: string | null;
-}): HTMLElement;

package/dist/web/layout.js

@@ -1,53 +0,0 @@
-// The pieces a page is laid out with: panels, facts, tiles, cards, tabs, breadcrumbs, toolbars and steppers.
-import { h } from "./dom.js";
-// ── Panels ───────────────────────────────────────────────────────────────────
-export function section(title, body, tools = null) {
-    return h("section", { class: "panel" }, h("div", { class: "panel-head" }, h("h2", {}, title), tools && h("div", { class: "panel-tools" }, tools)), body);
-}
-// 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 h("dl", { class: layout === "rows" ? "facts facts-rows" : "facts" }, ...rows.map(([label, value, class_name]) => h("div", {}, h("dt", {}, label), h("dd", { class: class_name ?? null }, value ?? "—"))));
-}
-// ── Tiles and cards ──────────────────────────────────────────────────────────
-// One headline figure under its label; a class such as tile-bad or tone-edge-warn marks its edge, and a link makes it open a page.
-export function tile(label, value, class_name = null, href = null) {
-    const tile_class = `tile${class_name ? ` ${class_name}` : ""}`;
-    const children = [h("div", { class: "tile-label" }, label), h("div", { class: "tile-value" }, value)];
-    return href === null ? h("div", { class: tile_class }, ...children) : h("a", { class: tile_class, href }, ...children);
-}
-export function tiles(...items) {
-    return h("div", { class: "tiles" }, ...items);
-}
-// A titled card for one thing among many, laid out in a grid.
-export function card(title, body, options = {}) {
-    const card_class = `card${options.class_name ? ` ${options.class_name}` : ""}`;
-    const children = [
-        h("div", { class: "card-head" }, h("strong", {}, title), options.badge),
-        options.subtitle && h("div", { class: "muted card-host" }, options.subtitle),
-        body,
-    ];
-    return options.href ? h("a", { class: card_class, href: options.href }, ...children) : h("div", { class: card_class }, ...children);
-}
-export function cards(...items) {
-    return h("div", { class: "grid" }, ...items);
-}
-export function tabs(items, active, label = "Sections") {
-    return h("nav", { class: "tabs", "aria-label": label }, ...items.map((item) => h("a", { href: item.href, class: item.id === active ? "tab active" : "tab", "aria-current": item.id === active ? "page" : null }, item.label)));
-}
-export function crumbs(items) {
-    return h("nav", { class: "crumbs", "aria-label": "Breadcrumb" }, ...items.flatMap(([label, href], index) => [
-        index > 0 ? h("span", { class: "muted", "aria-hidden": "true" }, " / ") : null,
-        href ? h("a", { href }, label) : h("span", { "aria-current": "page" }, label),
-    ]));
-}
-// ── Toolbars ─────────────────────────────────────────────────────────────────
-export function toolbar(...children) {
-    return h("div", { class: "toolbar" }, ...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
-        ? h("button", { disabled: true }, target.text)
-        : h("a", { class: "button", href: target.href }, target.text);
-    return h("div", { class: "stepper", role: "group", "aria-label": label }, step(previous), h("span", { class: "muted" }, position), step(next));
-}

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