nexus-shared 1.1.20 → 2.0.0

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

@@ -0,0 +1,134 @@
+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, own, number, numbered, selectable, checkbox, }: {
+    heading?: boolean;
+    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;
+}
+/** 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, }: 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,145 @@
+"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, 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", ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
+}
+/** 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, }) {
+    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, onDoubleClick: onOpen &&
+            (event => {
+                if (event.target.closest("button, a, input, label, [role=menu]"))
+                    return;
+                onOpen(row);
+            }), 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;

package/dist/Components/Viewers/MarkdownView.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { parseMarkdown } from "../../Helpers/MarkdownHelpers.js";
+/**
+ * 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 function MarkdownView({ value, breaks = true, newTab = "external", placeholder, onTaskToggle, className, ...rest }) {
+    const blocks = parseMarkdown(value, { breaks });
+    return (_jsx("div", { ...rest, className: cx("nx-markdown", className), children: blocks.length > 0 ? renderBlocks(blocks, { newTab, onTaskToggle }) : placeholder && _jsx("p", { className: "nx-markdown__empty", children: placeholder }) }));
+}
+function renderBlocks(blocks, options, tight = false) {
+    return blocks.map((block, key) => {
+        switch (block.type) {
+            case "heading": {
+                const Heading = `h${block.level}`;
+                return _jsx(Heading, { children: renderInlines(block.children, options) }, key);
+            }
+            case "paragraph":
+                // Items of a tight list hold their text without paragraph spacing.
+                return tight ? _jsx("span", { children: renderInlines(block.children, options) }, key) : _jsx("p", { children: renderInlines(block.children, options) }, key);
+            case "code":
+                return (_jsx("pre", { children: _jsx("code", { className: block.language ? `language-${block.language.replace(/[^\w#+.-]/g, "")}` : undefined, children: block.text }) }, key));
+            case "quote":
+                return _jsx("blockquote", { children: renderBlocks(block.children, options) }, key);
+            case "list": {
+                const List = block.ordered ? "ol" : "ul";
+                return (_jsx(List, { start: block.ordered && block.start !== 1 ? block.start : undefined, children: block.items.map((item, index) => renderItem(item, index, options, block.tight)) }, key));
+            }
+            case "table":
+                return (_jsx("div", { className: "nx-markdown__table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: block.head.map((cell, index) => (_jsx("th", { scope: "col", style: block.align[index] ? { textAlign: block.align[index] } : undefined, children: renderInlines(cell.children, options) }, index))) }) }), block.rows.length > 0 && (_jsx("tbody", { children: block.rows.map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, index) => (_jsx("td", { style: block.align[index] ? { textAlign: block.align[index] } : undefined, children: renderInlines(cell.children, options) }, index))) }, rowIndex))) }))] }) }, key));
+            case "rule":
+                return _jsx("hr", {}, key);
+        }
+    });
+}
+function renderItem(item, key, options, tight) {
+    if (item.checked === null)
+        return _jsx("li", { children: renderBlocks(item.children, options, tight) }, key);
+    const { onTaskToggle } = options;
+    const first = item.children[0];
+    const label = first && (first.type === "paragraph" || first.type === "heading") ? plainText(first.children) : undefined;
+    return (_jsxs("li", { className: "nx-markdown__task", children: [_jsx("input", { type: "checkbox", checked: item.checked, disabled: !onTaskToggle, "aria-label": label || "Task", onChange: onTaskToggle ? () => onTaskToggle(item.line, !item.checked) : undefined }), renderBlocks(item.children, options, tight)] }, key));
+}
+function renderInlines(nodes, options) {
+    return nodes.map((node, key) => {
+        switch (node.type) {
+            case "text":
+                return node.text;
+            case "strong":
+                return _jsx("strong", { children: renderInlines(node.children, options) }, key);
+            case "emphasis":
+                return _jsx("em", { children: renderInlines(node.children, options) }, key);
+            case "strike":
+                return _jsx("del", { children: renderInlines(node.children, options) }, key);
+            case "code":
+                return _jsx("code", { children: node.text }, key);
+            case "break":
+                return _jsx("br", {}, key);
+            case "image":
+                return node.src === null ? (_jsx("span", { children: node.alt }, key)) : (_jsx("img", { src: node.src, alt: node.alt, title: node.title, loading: "lazy", decoding: "async" }, key));
+            case "link": {
+                const children = renderInlines(node.children, options);
+                if (node.href === null)
+                    return _jsx("span", { children: children }, key);
+                // Links to other sites carry no referrer and no endorsement for search engines, since any user may write them.
+                const external = /^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(node.href);
+                const newTab = options.newTab === "all" || (options.newTab === "external" && external);
+                return (_jsx("a", { href: node.href, title: node.title, target: newTab ? "_blank" : undefined, rel: external ? "nofollow noopener noreferrer" : newTab ? "noopener noreferrer" : undefined, children: children }, key));
+            }
+        }
+    });
+}
+function plainText(nodes) {
+    return nodes.map(node => (node.type === "text" || node.type === "code" ? node.text : node.type === "image" ? node.alt : node.type === "break" ? " " : plainText(node.children))).join("");
+}

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

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type RichTextRenderOptions } from "../../Helpers/RichTextHelpers.ts";
+export interface RichTextViewProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "dangerouslySetInnerHTML">, Omit<RichTextRenderOptions, "newTab"> {
+    /** The HTML, as a rich text editor stored it. It is sanitized again here, so HTML from anywhere is safe to show. */
+    value: string | null | undefined;
+    /** Links to other sites open in a new tab. Default true. */
+    newTab?: boolean;
+    /** Shown when there is nothing to show. */
+    placeholder?: ReactNode;
+}
+/**
+ * Shows rich text: the HTML a `RichTextEditor` made, sanitized again and styled like the editor. Tokens are filled
+ * from `values` when given, e.g. to preview a template with sample data. No state and no effects, so it renders in
+ * server components too.
+ *
+ * @example <RichTextView value={room.description} />
+ */
+export declare function RichTextView({ value, newTab, placeholder, images, tokenFormat, values, className, ...rest }: RichTextViewProps): import("react").JSX.Element | null;

package/dist/Components/Viewers/RichTextView.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { renderRichTextHtml } from "../../Helpers/RichTextHelpers.js";
+/**
+ * Shows rich text: the HTML a `RichTextEditor` made, sanitized again and styled like the editor. Tokens are filled
+ * from `values` when given, e.g. to preview a template with sample data. No state and no effects, so it renders in
+ * server components too.
+ *
+ * @example <RichTextView value={room.description} />
+ */
+export function RichTextView({ value, newTab = true, placeholder, images, tokenFormat, values, className, ...rest }) {
+    const html = renderRichTextHtml(value, { newTab, images, tokenFormat, values });
+    if (!html) {
+        return placeholder ? (_jsx("div", { ...rest, className: cx("nx-richtext", className), children: _jsx("p", { className: "nx-richtext__empty", children: placeholder }) })) : null;
+    }
+    return _jsx("div", { ...rest, className: cx("nx-richtext", className), dangerouslySetInnerHTML: { __html: html } });
+}

package/dist/Helpers/AnimationHelpers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Calls `done` once the element's CSS animation `name` has finished, or at once when the element runs no animation of
+ * that name. Call it after the class that starts the animation is on the element, e.g. in a layout effect.
+ * Returns a function that cancels the wait.
+ */
+export declare function afterAnimation(element: Element, name: string, done: () => void): () => void;

package/dist/Helpers/AnimationHelpers.js

@@ -0,0 +1,35 @@
+/*
+ * Exit animations. A closing element gets a class that starts a CSS animation, and the next step (closing a dialog,
+ * removing a toast) waits for it. When no animation runs, the step must not wait: with reduced motion (which Windows
+ * reports when its animations are turned off) or when a theme sets `animation: none`.
+ */
+/**
+ * Calls `done` once the element's CSS animation `name` has finished, or at once when the element runs no animation of
+ * that name. Call it after the class that starts the animation is on the element, e.g. in a layout effect.
+ * Returns a function that cancels the wait.
+ */
+export function afterAnimation(element, name, done) {
+    const animation = typeof element.getAnimations === "function" ? element.getAnimations().find(item => item.animationName === name) : undefined;
+    if (!animation) {
+        done();
+        return () => undefined;
+    }
+    let waiting = true;
+    let timer = 0;
+    const finish = () => {
+        if (!waiting)
+            return;
+        waiting = false;
+        window.clearTimeout(timer);
+        done();
+    };
+    // A safety net for a timeline that stops, as in a hidden tab: the animation's own length, and a little more.
+    const end = Number(animation.effect?.getComputedTiming().endTime);
+    timer = window.setTimeout(finish, (Number.isFinite(end) ? end : 0) + 100);
+    // Rejects when the animation is cancelled, e.g. the popup opens again; the caller cancels the wait then.
+    animation.finished.then(finish, () => undefined);
+    return () => {
+        waiting = false;
+        window.clearTimeout(timer);
+    };
+}

package/dist/Helpers/ApiClient.d.ts

@@ -0,0 +1,74 @@
+import type { ApiCallOptions, ApiEndpoint, ApiResult, ApiTarget, HttpMethod } from "../Interfaces/ApiInterfaces.ts";
+import type { MessageActionName, MessageContext } from "../Interfaces/MessageInterfaces.ts";
+/** One call, as a client's hooks see it. */
+export interface ApiCall<TOptions = object> {
+    target: ApiTarget;
+    /** The endpoint, when the target is one. */
+    endpoint?: ApiEndpoint;
+    method: HttpMethod;
+    /** The full URL; empty while it is not known yet, or when it could not be built. */
+    url: string;
+    options: ApiCallOptions & TOptions;
+    /** What the call does and acts on, for its messages. */
+    context: MessageContext;
+}
+export interface ApiClientConfig<TOptions = object> {
+    /** The full URL of an endpoint, given its filled path: through the proxy in the browser, the module's root on a server. */
+    resolveUrl: (endpoint: ApiEndpoint, path: string, call: ApiCall<TOptions>) => string | Promise<string>;
+    /** The full URL of a plain URL target. Default: as it is. */
+    resolveTarget?: (url: string, call: ApiCall<TOptions>) => string | Promise<string>;
+    /** Headers on every call, such as the tenant or branch. */
+    headers?: (call: ApiCall<TOptions>) => Record<string, string> | undefined | Promise<Record<string, string> | undefined>;
+    /** A bearer token for every call. */
+    token?: (call: ApiCall<TOptions>) => string | null | undefined | Promise<string | null | undefined>;
+    /** Milliseconds to wait for an answer. Default 60,000. */
+    timeout?: number;
+    credentials?: RequestCredentials;
+    /** Changes the request just before it is sent, such as Next.js caching on a server. */
+    prepare?: (init: RequestInit, call: ApiCall<TOptions>) => RequestInit;
+    /**
+     * Sends a GET only once while the same one runs, and gives every caller its answer. Only where every call is the same
+     * user's (the browser): on a server, callers are different users.
+     */
+    dedupe?: boolean;
+    /** Before a call is sent, such as a loading toast. May return a function that gets the answer. */
+    onStart?: (call: ApiCall<TOptions>) => ((result: ApiResult) => void) | void;
+    /** After every answer: toasts in the browser, logs on a server. */
+    onResult?: (result: ApiResult, call: ApiCall<TOptions>) => void;
+    /** The `fetch` to use. Default: the global one, looked up on each call. */
+    fetch?: typeof fetch;
+}
+type Options<TOptions> = ApiCallOptions & TOptions;
+export interface ApiClient<TOptions = object> {
+    /** Sends a call with the endpoint's method (or `options.method`). */
+    send<T = unknown>(target: ApiTarget, options?: Options<TOptions>): Promise<ApiResult<T>>;
+    get<T = unknown>(target: ApiTarget, options?: Omit<Options<TOptions>, "body" | "method">): Promise<ApiResult<T>>;
+    post<T = unknown>(target: ApiTarget, body?: unknown, options?: Omit<Options<TOptions>, "body" | "method">): Promise<ApiResult<T>>;
+    put<T = unknown>(target: ApiTarget, body?: unknown, options?: Omit<Options<TOptions>, "body" | "method">): Promise<ApiResult<T>>;
+    patch<T = unknown>(target: ApiTarget, body?: unknown, options?: Omit<Options<TOptions>, "body" | "method">): Promise<ApiResult<T>>;
+    /** A DELETE; ids for a batch go in `options.body`. */
+    delete<T = unknown>(target: ApiTarget, options?: Omit<Options<TOptions>, "method">): Promise<ApiResult<T>>;
+    /** The URL a call would go to, for links and downloads. Throws when it cannot be built. */
+    url(target: ApiTarget, options?: Pick<ApiCallOptions, "params" | "query" | "body">): Promise<string>;
+}
+export declare const DEFAULT_API_TIMEOUT = 60000;
+/** What a call does when it names nothing: GET loads, DELETE deletes, the rest save. */
+export declare function defaultAction(method: HttpMethod): MessageActionName;
+/** What a call does and acts on: its endpoint, its method, and the context its messages are built from. */
+export declare function apiCallContext(target: ApiTarget, options?: Pick<ApiCallOptions, "method" | "action" | "subject" | "count" | "plural">): {
+    endpoint?: ApiEndpoint;
+    method: HttpMethod;
+    context: MessageContext;
+};
+/**
+ * Whether an error is a framework's own signal passing through a call, never a failed request: Next.js throws one from
+ * `headers()`, `cookies()`, or a `no-store` fetch while it prerenders, to learn that a page renders per request (and
+ * for `redirect()` and `notFound()`). Each carries a `digest`, or React's `$typeof`. The engine throws them on.
+ */
+export declare function isFrameworkError(error: unknown): boolean;
+/**
+ * Makes an API client. Apps use the two made here, `api` (browser) and `serverApi` (server); make another for an API
+ * that is not a Nexus module.
+ */
+export declare function createApiClient<TOptions extends object = object>(config: ApiClientConfig<TOptions>): ApiClient<TOptions>;
+export {};