nexus-shared 1.1.21 → 3.0.0

package/dist/Components/Viewers/DataTableColumns.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconArrowBackUp, iconColumns3, iconGripVertical, iconPin, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { Button } from "../Documents/Button.js";
+/** The rows of the panel: a band for every run of neighbours that name the same group, as the header draws them. */
+function panelRows(columns, groups) {
+    const rows = [];
+    for (const column of columns) {
+        const group = groups.get(column.key);
+        const last = rows[rows.length - 1];
+        if (group && last && last.band === group)
+            last.columns.push(column);
+        else if (group)
+            rows.push({ band: group, columns: [column] });
+        else
+            rows.push({ band: null, column });
+    }
+    return rows;
+}
+/** The keys of a row, in order: one column, or every column of a band. */
+function rowKeys(row) {
+    return row.band === null ? [row.column.key] : row.columns.map(column => column.key);
+}
+/** Moves `from` to `to` in a list. */
+function moveItem(items, from, to) {
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    if (item === undefined)
+        return next;
+    next.splice(to, 0, item);
+    return next;
+}
+/** Which place the pointer is over, by the middle of each row: the index the row held would take. */
+function dropIndex(boxes, y, from) {
+    for (let index = 0; index < boxes.length; index++) {
+        const box = boxes[index];
+        if (y < box.top + box.height / 2)
+            return index > from ? index - 1 : index;
+    }
+    return boxes.length - 1;
+}
+/** The room kept between the panel and the window's edge, and the least height it is ever given. */
+const PANEL_MARGIN = 8;
+const PANEL_MIN_HEIGHT = 160;
+/** The text of a label that may be a node, for an accessible name. */
+function textOf(label) {
+    return typeof label === "string" || typeof label === "number" ? String(label) : "the column";
+}
+/**
+ * The button that opens the Columns panel, and the panel itself: a checkbox per column, bands with their columns under
+ * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
+ * on a click outside, and on Tab.
+ *
+ * @example
+ * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
+ *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
+ */
+export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true, size = "md", changed = false, onToggle, onOrder, onReset, "aria-label": ariaLabel = "Columns", }) {
+    const id = useId();
+    const panelId = `${id}-columns`;
+    const triggerId = `${id}-columns-trigger`;
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the panel is open: that press closes it, and its click must not open it again.
+    const dismissing = useRef(false);
+    // While a row is held: its key, the list it may move in, and where it would land.
+    const [drag, setDrag] = useState(null);
+    const [said, setSaid] = useState("");
+    // The columns of a band that were already hidden when its checkbox was cleared: shown again, the band keeps them off.
+    const bandMemory = useRef(new Map());
+    const all = columns.map(column => ({
+        key: column.key,
+        label: column.label,
+        shown: !hidden.has(column.key),
+        pin: pinned[column.key] ?? column.pinned ?? null,
+        movable: reorderable && column.movable !== false,
+        hideable: column.hideable !== false,
+    }));
+    const groups = new Map(columns.map(column => [column.key, column.group]));
+    const rows = panelRows(all, groups);
+    const shownCount = all.filter(column => column.shown).length;
+    const bands = rows.some(row => row.band !== null);
+    function place() {
+        const panel = panelRef.current;
+        const trigger = triggerRef.current;
+        if (!panel || !trigger)
+            return;
+        // Measured at its own height, then capped to the room on the side it landed on: a table with many columns keeps
+        // its heading, its note and Reset in the window, and the list of columns scrolls instead.
+        panel.style.maxHeight = "";
+        placeUnderAnchor(panel, trigger.getBoundingClientRect(), { align: "end" });
+        const top = panel.getBoundingClientRect().top;
+        panel.style.maxHeight = `${Math.max(PANEL_MIN_HEIGHT, window.innerHeight - top - PANEL_MARGIN)}px`;
+    }
+    // The panel is fixed, so it follows the button while the page or a scroller moves.
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        return followAnchor(place);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    // A panel opened again starts without the last move's message, so a screen reader is not told about an old move.
+    useEffect(() => {
+        if (!open)
+            setSaid("");
+    }, [open]);
+    /** The whole order after moving a row of `list` ("" for the panel itself, a band's name for its own columns). */
+    function moved(list, from, to) {
+        if (list === "") {
+            const next = moveItem(rows, from, to);
+            return next.flatMap(rowKeys);
+        }
+        const band = rows.find(row => row.band === list);
+        if (!band || band.band === null)
+            return null;
+        const next = moveItem(band.columns, from, to);
+        return rows.flatMap(row => (row.band === list ? next.map(column => column.key) : rowKeys(row)));
+    }
+    function move(list, from, to, label) {
+        const length = list === "" ? rows.length : rows.find(row => row.band === list)?.columns.length;
+        if (!length)
+            return;
+        const target = Math.min(Math.max(to, 0), length - 1);
+        if (target === from)
+            return;
+        const order = moved(list, from, target);
+        if (!order)
+            return;
+        onOrder(order);
+        setSaid(list === "" ? `${label} is now ${target + 1} of ${length}.` : `${label} is now ${target + 1} of ${length} in ${list}.`);
+    }
+    function onHandleKeyDown(event, list, index, label) {
+        const length = list === "" ? rows.length : (rows.find(row => row.band === list)?.columns.length ?? 0);
+        const step = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : event.key === "Home" ? -index : event.key === "End" ? length - 1 - index : 0;
+        if (!step)
+            return;
+        event.preventDefault();
+        move(list, index, index + step, label);
+    }
+    function onHandlePointerDown(event, list, index, key, label) {
+        if (event.button !== 0)
+            return;
+        // A row moves inside its own list only: a band among the bands, a column of a band among its siblings.
+        const owner = event.currentTarget.closest("[data-list]");
+        if (!owner)
+            return;
+        const handle = event.currentTarget;
+        const boxes = [...owner.children].map(child => child.getBoundingClientRect());
+        handle.setPointerCapture(event.pointerId);
+        setDrag({ key, list, to: index });
+        const end = (done, y) => {
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", up);
+            handle.removeEventListener("pointercancel", cancel);
+            handle.removeEventListener("keydown", escape);
+            setDrag(null);
+            if (done && y !== undefined)
+                move(list, index, dropIndex(boxes, y, index), label);
+        };
+        const onMove = (moved) => setDrag({ key, list, to: dropIndex(boxes, moved.clientY, index) });
+        const up = (moved) => {
+            if (handle.hasPointerCapture(moved.pointerId))
+                handle.releasePointerCapture(moved.pointerId);
+            end(true, moved.clientY);
+        };
+        const cancel = () => end(false);
+        // Esc puts the row back where it was.
+        const escape = (key) => {
+            if (key.key !== "Escape")
+                return;
+            key.preventDefault();
+            key.stopPropagation();
+            end(false);
+        };
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", up);
+        handle.addEventListener("pointercancel", cancel);
+        handle.addEventListener("keydown", escape);
+    }
+    /** The band's checkbox: off hides every column under it, on brings back the ones it was not already hiding. */
+    function toggleBand(band, columnsOfBand, show) {
+        if (show) {
+            const kept = new Set(bandMemory.current.get(band) ?? []);
+            bandMemory.current.delete(band);
+            for (const column of columnsOfBand)
+                if (!column.shown && !kept.has(column.key))
+                    onToggle(column.key, false);
+            return;
+        }
+        bandMemory.current.set(band, columnsOfBand.filter(column => !column.shown).map(column => column.key));
+        for (const column of columnsOfBand)
+            if (column.shown)
+                onToggle(column.key, true);
+    }
+    function hidePopover(panel) {
+        if (isPopoverOpen(panel))
+            panel.hidePopover();
+    }
+    /** One column's row: the handle, the checkbox, the label, and a mark when it is pinned. */
+    function columnRow(column, list, index, inBand, bandOff) {
+        const lastShown = column.shown && shownCount <= 1;
+        return (_jsxs("li", { className: cx("nx-columns__row", inBand && "nx-columns__row--child"), "data-held": drag?.key === column.key ? "" : undefined, "data-drop": drag && drag.list === list && drag.key !== column.key && drag.to === index ? "" : undefined, children: [column.movable && !bandOff ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${textOf(column.label)}`, title: inBand ? `Drag to move it inside ${list}, or use the arrow keys` : "Drag to move, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, list, index, column.key, textOf(column.label)), onKeyDown: event => onHandleKeyDown(event, list, index, textOf(column.label)), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: column.shown && !bandOff, disabled: bandOff || !column.hideable || lastShown, title: bandOff ? `${list} is hidden` : column.hideable ? undefined : "Always shown", onChange: event => onToggle(column.key, !event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: column.label }) })] }), column.pin && (_jsxs("span", { className: "nx-columns__pin", title: `Pinned to the ${column.pin === "left" ? "left" : "right"}`, children: [_jsx(InlineIcon, { icon: iconPin }), _jsx("span", { className: "nx-visually-hidden", children: `Pinned to the ${column.pin === "left" ? "left" : "right"}` })] }))] }, column.key));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: triggerRef, id: triggerId, size: size === "sm" ? "sm" : "md", icon: _jsx(InlineIcon, { icon: iconColumns3 }), "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, title: "Columns: show, hide, and arrange", onPointerDown: () => {
+                    dismissing.current = isPopoverOpen(panelRef.current);
+                }, onClick: () => {
+                    if (dismissing.current) {
+                        dismissing.current = false;
+                        return;
+                    }
+                    const panel = panelRef.current;
+                    if (!panel)
+                        return;
+                    if (isPopoverOpen(panel))
+                        hidePopover(panel);
+                    else {
+                        panel.showPopover();
+                        place();
+                        panel.focus();
+                    }
+                } }), _jsxs("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": `${panelId}-title`, className: cx("nx-popover", "nx-columns", size === "sm" && "nx-columns--sm"), "data-dragging": drag ? "" : undefined, onToggle: (event) => setOpen(event.newState === "open"), onKeyDown: event => {
+                    if (event.key === "Tab")
+                        hidePopover(event.currentTarget);
+                }, children: [_jsxs("div", { className: "nx-columns__head", children: [_jsx("span", { className: "nx-columns__title", id: `${panelId}-title`, children: "Columns" }), _jsxs("span", { className: "nx-columns__count", children: [shownCount, " of ", all.length, " shown"] })] }), _jsx("ul", { className: "nx-columns__list", "data-list": "", children: rows.map((row, index) => {
+                            if (row.band === null)
+                                return columnRow(row.column, "", index, false, false);
+                            const band = row.band;
+                            // A band whose columns were split into two runs is drawn twice, so a row is known by its first column, never
+                            // by the band's name: two rows under one name would be one row to React.
+                            const bandId = `band:${row.columns[0].key}`;
+                            const shown = row.columns.filter(column => column.shown).length;
+                            const movable = row.columns.every(column => column.movable);
+                            const last = shown > 0 && shownCount - shown < 1;
+                            return (_jsxs("li", { className: "nx-columns__row nx-columns__row--band", "data-held": drag?.key === bandId ? "" : undefined, "data-drop": drag && drag.list === "" && drag.key !== bandId && drag.to === index ? "" : undefined, children: [_jsxs("div", { className: "nx-columns__band", children: [movable ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${band}`, title: "Drag to move the whole band, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, "", index, bandId, band), onKeyDown: event => onHandleKeyDown(event, "", index, band), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: shown > 0, disabled: last, ref: input => {
+                                                            if (input)
+                                                                input.indeterminate = shown > 0 && shown < row.columns.length;
+                                                        }, "aria-label": `${band}: ${shown} of ${row.columns.length} shown`, onChange: event => toggleBand(band, row.columns, event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: band }) })] }), _jsxs("span", { className: "nx-columns__band-count", children: [shown, " / ", row.columns.length] })] }), _jsx("ul", { className: "nx-columns__children", "data-list": band, children: row.columns.map((column, childIndex) => columnRow(column, band, childIndex, true, shown === 0)) })] }, bandId));
+                        }) }), _jsxs("p", { className: "nx-columns__note", children: [reorderable ? "Drag a handle, or move it with the arrow keys." : "This table keeps the order of its columns.", bands ? " A column under a band moves inside it; the band moves as one." : ""] }), onReset && (_jsx("div", { className: "nx-columns__foot", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), disabled: !changed, onClick: () => onReset(), children: "Reset columns" }) })), _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: said })] })] }));
+}

package/dist/Components/Viewers/DataTableParts.d.ts

@@ -0,0 +1,138 @@
+import { type IconNode } from "nexus-icons";
+import { type CSSProperties, type MouseEvent, type ReactNode } from "react";
+import { type CellTextOptions } from "../../Helpers/TableHelpers.ts";
+import type { TableColumn, TableRow, TableRowAction, TableState, TableViewColumn } from "../../Interfaces/TableInterfaces.ts";
+/** A number as the table writes counts: 1,234. */
+export declare const formatCount: (count: number) => string;
+/** A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash. */
+export declare function TableCellValue<TRow extends TableRow>({ column, row, options }: {
+    column: TableColumn<TRow>;
+    row: TRow;
+    options: CellTextOptions;
+}): import("react").JSX.Element;
+/**
+ * A cell's own style: where a pinned column sits, and the width its values fit in. Once the user has set any width, a
+ * `<colgroup>` gives every column its width and the cells only cap their text.
+ */
+export declare function columnStyle<TRow extends TableRow>(view: TableViewColumn<TRow>, sized: boolean): CSSProperties;
+/** Where the table's own columns sit, and whether they stay while the rest scrolls. */
+export interface TableFrameColumns {
+    /** The numbers and checkbox column: `null` when the table has neither. */
+    index: {
+        offset: number;
+        edge: boolean;
+    } | null;
+    actions: {
+        offset: number;
+        edge: boolean;
+    } | null;
+}
+/**
+ * The widths of the columns, once the user has changed one: the table then lays out its columns from this list
+ * (`table-layout: fixed`), so dragging one edge moves that edge only. The last column takes the space left over.
+ */
+export declare function TableColumnGroup<TRow extends TableRow>({ columns, widths, frame, colRefs, }: {
+    columns: readonly TableViewColumn<TRow>[];
+    widths: Readonly<Record<string, number>>;
+    frame: TableFrameColumns;
+    colRefs: Map<string, HTMLTableColElement>;
+}): import("react").JSX.Element;
+/** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
+export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }: {
+    heading?: boolean;
+    /** 2 in the heading while the header has a band of group headings above the columns' own. */
+    rowSpan?: number;
+    own: {
+        offset: number;
+        edge: boolean;
+    } | null;
+    /** The row's number, or "#" in the heading. */
+    number?: ReactNode;
+    numbered: boolean;
+    selectable: boolean;
+    checkbox?: ReactNode;
+}): import("react").JSX.Element;
+export interface TableRowViewProps<TRow extends TableRow> {
+    row: TRow;
+    rowKey: string;
+    number: number;
+    label: string;
+    columns: readonly TableViewColumn<TRow>[];
+    cellOptions: CellTextOptions;
+    selectable: boolean;
+    selected: boolean;
+    /** No more rows can be selected, and this one is not. */
+    selectionFull: boolean;
+    busy: boolean;
+    flashed: boolean;
+    numbered: boolean;
+    /** A row of the pinned section above the page: its number is a pin. */
+    pinned?: boolean;
+    /** Where the table's own columns sit; `null` for the ones it does not have. */
+    frame: TableFrameColumns;
+    /** The user gave a column a width, so the table lays its columns out from the `<colgroup>`. */
+    sized: boolean;
+    actions: readonly TableRowAction<TRow>[] | null;
+    onToggle: (row: TRow, on: boolean, event: MouseEvent<HTMLInputElement>) => void;
+    onAction: (row: TRow, action: TableRowAction<TRow>) => void;
+    onOpen?: (row: TRow) => void;
+    /** A single click opens the row, as a double-click does. */
+    openOnClick?: boolean;
+}
+/** One row. It renders again only when its row, its state, or the columns change. */
+declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
+export declare const TableRowView: typeof TableRowViewInner;
+/**
+ * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,
+ * how many there are, and the most that can be pinned.
+ */
+export declare function TablePinnedHead({ span, label, count, max, loading, open, onToggle }: {
+    span: number;
+    label: string;
+    count: number;
+    max?: number;
+    loading: boolean;
+    open: boolean;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+/** Placeholder rows while the first rows load, in the shape of the columns. */
+export declare function TableSkeletonRows({ count, cells, frame, sized }: {
+    count: number;
+    cells: number;
+    frame: TableFrameColumns;
+    sized: boolean;
+}): import("react").JSX.Element;
+/** A row across the table with a message: an empty list, no matches, a failed load. */
+export declare function TableMessageRow({ span, icon, title, detail, tone, children }: {
+    span: number;
+    icon: IconNode;
+    title: ReactNode;
+    detail?: ReactNode;
+    tone?: "danger";
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The pager: previous, the page buttons (1 … 5 6 7 … 24), next. */
+export declare function TablePager({ page, matches, pageSize, disabled, onPage }: {
+    page: number;
+    matches: number;
+    pageSize: number;
+    disabled: boolean;
+    onPage: (page: number) => void;
+}): import("react").JSX.Element | null;
+/** Rows per page, as a menu of the choices. Inside the search box (`compact`) it shows only the number. */
+export declare function TablePageSize({ pageSize, pageSizes, compact, onChange }: {
+    pageSize: number;
+    pageSizes: readonly number[];
+    compact?: boolean;
+    onChange: (size: number) => void;
+}): import("react").JSX.Element | null;
+/**
+ * Under the table: which rows show and how many the search left ("Showing 41–50 of 234 · filtered from 1,000"), the page
+ * of how many, and the pager.
+ */
+export declare function TableFooter<TRow extends TableRow>({ state, disabled, onPage }: {
+    state: TableState<TRow>;
+    disabled: boolean;
+    onPage: (page: number) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/Components/Viewers/DataTableParts.js

@@ -0,0 +1,157 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconCheck, iconChevronDown, iconChevronLeft, iconChevronRight, iconDotsVertical, iconLoader2, iconPin, InlineIcon } from "nexus-icons";
+import { memo } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { columnAlign, columnOption, columnValue, cssLength, formatCellText, pageButtons, pageCount, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, } from "../../Helpers/TableHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { Menu } from "../Documents/Menu.js";
+/*
+ * The parts of a data table: a cell in its column's format, a row with its number and checkbox in one column and its
+ * actions, the widths of the columns the user set, the head of the pinned section, the pager, and the footer. The
+ * details view of the CRUD draws values with the same `TableCellValue`.
+ */
+const countFormat = new Intl.NumberFormat("en-US");
+/** A number as the table writes counts: 1,234. */
+export const formatCount = (count) => countFormat.format(count);
+/** A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash. */
+export function TableCellValue({ column, row, options }) {
+    const value = columnValue(column, row);
+    if (column.render)
+        return _jsx(_Fragment, { children: column.render(row, value) });
+    const option = columnOption(column, value);
+    if (option?.tone) {
+        return (_jsx("span", { className: "nx-table__tag", "data-tone": option.tone, children: option.label }));
+    }
+    if (column.format === "boolean" && !option) {
+        const on = value === true || value === "true" || value === 1;
+        return on ? (_jsxs("span", { className: "nx-table__yes", children: [_jsx(InlineIcon, { icon: iconCheck }), _jsx("span", { className: "nx-visually-hidden", children: "Yes" })] })) : (_jsx("span", { className: "nx-table__no", children: "No" }));
+    }
+    // A moment needs the browser's zone, unknown while the page hydrates: nothing shows until then, not another zone's time.
+    if (column.format === "date-time" && !options.timeZone && value)
+        return _jsx("span", { className: "nx-table__pending" });
+    const text = formatCellText(column, value, options);
+    if (!text)
+        return _jsx("span", { className: "nx-table__dash", children: "\u2014" });
+    return _jsx(_Fragment, { children: text });
+}
+/**
+ * A cell's own style: where a pinned column sits, and the width its values fit in. Once the user has set any width, a
+ * `<colgroup>` gives every column its width and the cells only cap their text.
+ */
+export function columnStyle(view, sized) {
+    const style = {};
+    if (view.pin === "left")
+        style.left = view.offset;
+    else if (view.pin === "right")
+        style.right = view.offset;
+    if (sized) {
+        // The widths come from the colgroup now; the narrowest the column may become stays on the cell, for a resize to read.
+        style.minWidth = cssLength(view.column.minWidth);
+        style["--nx-col-max"] = "100%";
+        return style;
+    }
+    const width = cssLength(view.column.width);
+    style.width = width;
+    style.minWidth = cssLength(view.column.minWidth) ?? width;
+    style["--nx-col-max"] = width;
+    return style;
+}
+const ownStyle = (own, side) => (side === "left" ? { left: own?.offset ?? 0 } : { right: own?.offset ?? 0 });
+/** What a column takes while the table lays out from its widths, when it has none of its own: a column shown again. */
+const FALLBACK_COLUMN_WIDTH = "12rem";
+/**
+ * The widths of the columns, once the user has changed one: the table then lays out its columns from this list
+ * (`table-layout: fixed`), so dragging one edge moves that edge only. The last column takes the space left over.
+ */
+export function TableColumnGroup({ columns, widths, frame, colRefs, }) {
+    const hold = (key) => (element) => {
+        if (element)
+            colRefs.set(key, element);
+        else
+            colRefs.delete(key);
+    };
+    const own = (key, on) => on && _jsx("col", { ref: hold(key), style: { width: widths[key] } }, key);
+    return (_jsxs("colgroup", { children: [own(TABLE_INDEX_COLUMN, Boolean(frame.index)), columns.map(view => (_jsx("col", { ref: hold(view.column.key), style: { width: widths[view.column.key] ?? cssLength(view.column.width) ?? FALLBACK_COLUMN_WIDTH } }, view.column.key))), _jsx("col", { className: "nx-table__col-filler" }), own(TABLE_ACTIONS_COLUMN, Boolean(frame.actions))] }));
+}
+/** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
+export function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }) {
+    const shared = {
+        className: cx(heading ? "nx-table__heading" : "nx-table__cell", "nx-table__cell--index"),
+        "data-col": TABLE_INDEX_COLUMN,
+        "data-pin": "left",
+        "data-pin-edge": own?.edge || undefined,
+        // Both in one cell: the number gives way to the checkbox under the pointer, and once anything is selected.
+        "data-swap": (numbered && selectable) || undefined,
+        style: ownStyle(own, "left"),
+    };
+    const content = (_jsxs(_Fragment, { children: [numbered && (_jsx("span", { className: "nx-table__number", "aria-hidden": selectable || undefined, children: number })), checkbox] }));
+    return heading ? (_jsx("th", { scope: "col", rowSpan: rowSpan, ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+}
+/** What in a row is a control of its own: a click there does what the control does, and never opens the row. */
+const ROW_CONTROLS = "button, a, input, select, textarea, label, [role=menu], [role=menuitem]";
+/**
+ * Whether a click on a row should open it. Never on one of its controls. A single click also does not when it ends a
+ * text selection inside the row — somebody dragging across a cell to copy a code is not asking for a popup — but a
+ * double-click is not asked that, because a double-click selects the word under the pointer on its way in.
+ */
+function opensRow(event, single) {
+    if (event.target.closest(ROW_CONTROLS))
+        return false;
+    if (!single)
+        return true;
+    const selection = window.getSelection();
+    return !(selection && !selection.isCollapsed && event.currentTarget.contains(selection.anchorNode));
+}
+/** One row. It renders again only when its row, its state, or the columns change. */
+function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }) {
+    const inline = actions?.filter(action => action.inline && action.icon) ?? [];
+    const inMenu = actions?.filter(action => !(action.inline && action.icon)) ?? [];
+    const items = inMenu.map(action => ({ value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled }));
+    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": (onOpen && openOnClick) || undefined, 
+        // One way in: with a single click the row is already open by the time a double-click would arrive.
+        onClick: onOpen && openOnClick ? event => opensRow(event, true) && onOpen(row) : undefined, onDoubleClick: onOpen && !openOnClick ? event => opensRow(event, false) && onOpen(row) : undefined, children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
+}
+export const TableRowView = memo(TableRowViewInner);
+/**
+ * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,
+ * how many there are, and the most that can be pinned.
+ */
+export function TablePinnedHead({ span, label, count, max, loading, open, onToggle }) {
+    return (_jsx("tr", { className: "nx-table__row nx-table__pin-row", children: _jsx("td", { colSpan: span, className: "nx-table__pin-cell", children: _jsxs("button", { type: "button", className: "nx-table__pin-toggle", "aria-expanded": open, onClick: onToggle, "data-table-pins": true, children: [_jsx(InlineIcon, { icon: iconChevronRight, className: "nx-table__pin-caret" }), _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-icon" }), _jsx("span", { className: "nx-table__pin-title", children: label }), (count > 0 || !loading) && (_jsx("span", { className: "nx-table__pin-count", children: max ? `${formatCount(count)} of ${formatCount(max)}` : formatCount(count) })), loading && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin nx-table__pin-loading" })] }) }) }));
+}
+/** Placeholder rows while the first rows load, in the shape of the columns. */
+export function TableSkeletonRows({ count, cells, frame, sized }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: count }, (_, index) => (_jsxs("tr", { className: "nx-table__row nx-table__row--skeleton", "aria-hidden": "true", children: [frame.index && _jsx("td", { className: "nx-table__cell nx-table__cell--index", "data-pin": "left", style: ownStyle(frame.index, "left") }), Array.from({ length: cells }, (_, cell) => (_jsx("td", { className: "nx-table__cell", children: _jsx("span", { className: "nx-table__bone", style: { width: `${45 + ((index * 7 + cell * 13) % 45)}%` } }) }, cell))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && _jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-pin": "right", style: ownStyle(frame.actions, "right") })] }, index))) }));
+}
+/** A row across the table with a message: an empty list, no matches, a failed load. */
+export function TableMessageRow({ span, icon, title, detail, tone, children }) {
+    return (_jsx("tr", { className: "nx-table__row nx-table__row--message", children: _jsx("td", { colSpan: span, className: "nx-table__message-cell", children: _jsxs("div", { className: "nx-table__message", "data-tone": tone, role: tone === "danger" ? "alert" : undefined, children: [_jsx(InlineIcon, { icon: icon, className: "nx-table__message-icon" }), _jsx("p", { className: "nx-table__message-title", children: title }), detail && _jsx("p", { className: "nx-table__message-detail", children: detail }), children && _jsx("div", { className: "nx-table__message-actions", children: children })] }) }) }));
+}
+/** The pager: previous, the page buttons (1 … 5 6 7 … 24), next. */
+export function TablePager({ page, matches, pageSize, disabled, onPage }) {
+    const pages = pageCount(matches, pageSize);
+    if (pages <= 1)
+        return null;
+    return (_jsxs("nav", { className: "nx-table__pager", "aria-label": "Pages", children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconChevronLeft }), "aria-label": "Previous page", disabled: disabled || page <= 1, onClick: () => onPage(page - 1) }), _jsx("span", { className: "nx-table__page-list", children: pageButtons(page, pages).map((entry, index) => entry === "gap" ? (_jsx("span", { className: "nx-table__page-gap", "aria-hidden": "true", children: "\u2026" }, `gap-${index}`)) : (_jsx("button", { type: "button", className: "nx-table__page", "aria-current": entry === page ? "page" : undefined, "aria-label": `Page ${entry}`, disabled: disabled && entry !== page, onClick: () => entry !== page && onPage(entry), children: formatCount(entry) }, entry))) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconChevronRight }), "aria-label": "Next page", disabled: disabled || page >= pages, onClick: () => onPage(page + 1) })] }));
+}
+/** Rows per page, as a menu of the choices. Inside the search box (`compact`) it shows only the number. */
+export function TablePageSize({ pageSize, pageSizes, compact = false, onChange }) {
+    if (pageSizes.length < 2)
+        return null;
+    const items = pageSizes.map(size => ({ value: String(size), label: `${formatCount(size)} per page`, checked: size === pageSize }));
+    return (_jsx(Menu, { items: items, kind: "radio", size: "sm", align: compact ? "start" : "end", "aria-label": "Rows per page", onSelect: value => onChange(Number(value)), children: _jsx(Button, { variant: "ghost", size: "sm", iconEnd: _jsx(InlineIcon, { icon: iconChevronDown }), className: cx("nx-table__page-size", compact && "nx-table__page-size--field"), "aria-label": `Rows per page: ${pageSize}`, title: "Rows per page", children: compact ? formatCount(pageSize) : `${formatCount(pageSize)} / page` }) }));
+}
+/**
+ * Under the table: which rows show and how many the search left ("Showing 41–50 of 234 · filtered from 1,000"), the page
+ * of how many, and the pager.
+ */
+export function TableFooter({ state, disabled, onPage }) {
+    const { status, rows, offset, matches, total, query } = state;
+    if (status !== "ready" || total === 0)
+        return _jsx("div", { className: "nx-table__footer" });
+    const first = rows.length ? offset + 1 : 0;
+    const last = offset + rows.length;
+    const pages = pageCount(matches, query.pageSize);
+    return (_jsxs("div", { className: "nx-table__footer", children: [_jsxs("p", { className: "nx-table__range", "aria-live": "polite", children: [rows.length ? (_jsxs(_Fragment, { children: ["Showing ", _jsx("b", { children: `${formatCount(first)}–${formatCount(last)}` }), " of ", _jsx("b", { children: formatCount(matches) })] })) : (_jsx(_Fragment, { children: "No rows on this page" })), query.search && matches !== total && _jsxs("span", { className: "nx-table__range-all", children: [" \u00B7 filtered from ", formatCount(total)] })] }), _jsxs("div", { className: "nx-table__paging", children: [_jsxs("span", { className: "nx-table__page-info", children: ["Page ", formatCount(query.page), " of ", formatCount(pages)] }), _jsx(TablePager, { page: query.page, matches: matches, pageSize: query.pageSize, disabled: disabled, onPage: onPage })] })] }));
+}

package/dist/Components/Viewers/MarkdownView.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+/** Which links open in a new tab: links to other sites (`external`), `all`, or `none`. */
+export type MarkdownLinkTarget = "external" | "all" | "none";
+export interface MarkdownViewProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** The Markdown text. */
+    value: string;
+    /** Every line break inside a paragraph shows as a line break, as in GitHub comments. Default true. */
+    breaks?: boolean;
+    /** Which links open in a new tab. Default `external`. */
+    newTab?: MarkdownLinkTarget;
+    /** Shown when the text is empty. */
+    placeholder?: ReactNode;
+    /**
+     * Called when a task box is clicked, with the line of its marker (from 0) and its new state; see `toggleMarkdownTask`.
+     * Without it, task boxes are read-only.
+     */
+    onTaskToggle?: (line: number, checked: boolean) => void;
+}
+/**
+ * Shows Markdown as formatted text: headings, lists, tasks, tables, code, quotes, links, and images. Raw HTML stays
+ * text and unsafe addresses are dropped, so it is safe for text from any user. It has no state, so it renders on the
+ * server as well.
+ *
+ * @example <MarkdownView value={room.description} />
+ */
+export declare function MarkdownView({ value, breaks, newTab, placeholder, onTaskToggle, className, ...rest }: MarkdownViewProps): import("react").JSX.Element;