@jini-ai/admin 0.1.0

package/dist/react/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
+import { agentHandle } from '@jini-ai/agentic';
+import { resolveTone, toneClassName } from '../../types.js';
+import { useConfirmDialog } from './ConfirmDialog.hooks.js';
+const DEFAULT_CANCEL_LABEL = 'Cancel';
+/** Sub-handle segments appended to the caller's base — literals this component chooses itself,
+ *  never host data (see this file's "Agent handles" doc comment for why that means neither needs
+ *  sanitizing, unlike `RowMenu`'s per-item keys). */
+const CONFIRM_HANDLE_ACTION = 'confirm';
+const CANCEL_HANDLE_ACTION = 'cancel';
+/**
+ * Plain-language phrase for what confirming actually changes, keyed off the dialog's own
+ * three-tier `ConfirmTone` vocabulary (`"default"` / `"warning"` / `"danger"`, documented in
+ * `../../types.js`) rather than reparsed from `title` or `body` — see this file's doc comment for
+ * why those cannot be safely folded into agent-facing text.
+ *
+ * @param tone - The dialog's resolved tone (see `resolveTone`).
+ * @returns The tier's consequence phrase, or `undefined` for `"default"`, which declares no tier.
+ * @complexity O(1).
+ */
+function confirmDialogConsequencePhrase(tone) {
+    if (tone === 'danger')
+        return 'cannot be undone';
+    if (tone === 'warning')
+        return 'changes access, but is reversible';
+    return undefined;
+}
+/**
+ * The confirm action's agent-facing label: what it does (`confirmLabel`), what it applies to
+ * (`title`), and — when the tone declares one — its consequence tier.
+ *
+ * @param confirmLabel - The button's own visible text, e.g. `"Delete"`.
+ * @param title - The dialog's title, e.g. `"Delete role?"`.
+ * @param tone - The dialog's resolved tone.
+ * @returns A label an agent can use to judge whether confirming is safe, without having read
+ *   `body` (which this function never receives — see this file's doc comment for why).
+ * @complexity O(1).
+ */
+function confirmDialogConfirmLabel(confirmLabel, title, tone) {
+    const consequence = confirmDialogConsequencePhrase(tone);
+    return consequence === undefined ? `${confirmLabel} — ${title}` : `${confirmLabel} — ${title}; ${consequence}`;
+}
+/**
+ * The cancel action's agent-facing label. Unlike {@link confirmDialogConfirmLabel}, its consequence
+ * is a guarantee of this component's own contract (cancelling never calls `onConfirm`) rather than
+ * something read off `tone`, so it needs no tone input at all.
+ *
+ * @param cancelLabel - The button's own visible text, already defaulted by the caller.
+ * @param title - The dialog's title, e.g. `"Delete role?"`.
+ * @returns A label stating that this action leaves the titled action unconfirmed.
+ * @complexity O(1).
+ */
+function confirmDialogCancelLabel(cancelLabel, title) {
+    return `${cancelLabel} — leaves "${title}" unconfirmed; no action taken`;
+}
+/**
+ * Builds the `data-agent-*` attribute props for one of this dialog's two actions, or nothing at
+ * all when the dialog published no base handle — same shape as `RowMenu.tsx`'s local
+ * `rowMenuAgentProps`, kept local and unexported here since only this one component needs it.
+ *
+ * @param base - The dialog's own handle from the caller, or `undefined` when it published none.
+ * @param action - Which action this is — see {@link CONFIRM_HANDLE_ACTION}/{@link CANCEL_HANDLE_ACTION}.
+ * @param options - Role and this action's already-composed label.
+ * @returns Spreadable attribute props, or `{}` when `base` is `undefined`.
+ * @complexity O(1).
+ */
+function confirmDialogAgentProps(base, action, options) {
+    return base === undefined ? {} : agentHandle(`${base}-${action}`, options);
+}
+/**
+ * Controlled modal confirm — renders the `<dialog>` markup and delegates its open/close and focus
+ * lifecycle to {@link useConfirmDialog} (injectable via the `useDialog` prop, defaulted to the real
+ * implementation, so a test can supply a fake without mocking modules).
+ *
+ * Both actions are plain `type="button"` (no `<form method="dialog">`, no `type="submit"`), so there
+ * is no browser-assigned "default button" for Enter to reach for at all; confirm can only ever fire
+ * from an explicit click or explicit Tab-then-Enter onto it.
+ */
+export function ConfirmDialog({ useDialog = useConfirmDialog, agentHandle: baseHandle, ...props }) {
+    const { titleId, dialogRef, cancelRef, handleNativeCancel, handleBackdropClick } = useDialog(props.open, props.pending, props.onCancel);
+    const tone = resolveTone(props);
+    const cancelLabel = props.cancelLabel ?? DEFAULT_CANCEL_LABEL;
+    return (_jsxs("dialog", { ref: dialogRef, className: "confirm-dialog", "aria-labelledby": titleId, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("h2", { id: titleId, children: props.title }), _jsx("div", { className: "confirm-dialog-body", children: props.body }), _jsxs("div", { className: "confirm-dialog-actions", children: [_jsx("button", { ref: cancelRef, type: "button", className: "btn-secondary", disabled: props.pending, onClick: props.onCancel, ...confirmDialogAgentProps(baseHandle, CANCEL_HANDLE_ACTION, {
+                            role: 'button',
+                            label: confirmDialogCancelLabel(cancelLabel, props.title),
+                        }), children: cancelLabel }), _jsx("button", { type: "button", className: toneClassName(tone), disabled: props.pending, onClick: props.onConfirm, ...confirmDialogAgentProps(baseHandle, CONFIRM_HANDLE_ACTION, {
+                            role: 'button',
+                            label: confirmDialogConfirmLabel(props.confirmLabel, props.title, tone),
+                        }), children: props.confirmLabel })] })] }));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/react/components/ConfirmDialog/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../../src/react/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/ConfirmDialog.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type ConfirmTone } from '../types.js';
+/**
+ * @file Shared modal confirmation primitive — the replacement for `window.confirm`, which blocks
+ * the whole tab, cannot carry destructive-vs-neutral styling, and reads as a browser artifact
+ * rather than part of the product.
+ *
+ * Built on the native `<dialog>` element (`showModal()`/`close()`) rather than a plain-`<div>`
+ * overlay + backdrop idiom: that shape hand-rolls focus trapping, Escape handling, and a backdrop
+ * element, all of which the browser's own top layer gives a real `<dialog>` for free, including
+ * correct stacking above everything else on the page without a chosen `z-index`.
+ *
+ * `dialog.showModal()`/`dialog.close()` are guarded by a `typeof` check rather than called
+ * unconditionally: jsdom (this package's React test environment, verified directly rather than
+ * assumed) does not implement either method at all — calling them throws `TypeError`. The fallback
+ * branch below toggles the plain `open` attribute instead, which no browser shipping a real
+ * `<dialog>` ever takes (the `showModal`/`close` branch always wins there), so this only changes
+ * behavior under jsdom, where it keeps the dialog mountable and its content queryable.
+ *
+ * Unstyled, like everything in this layer: the `.confirm-dialog` / `.btn-secondary` /
+ * `.btn-danger` / `.btn-warning` class names are emitted for the host stylesheet to define.
+ */
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    body: ReactNode;
+    confirmLabel: string;
+    /** @default "Cancel" */
+    cancelLabel?: string;
+    /** Applies `.btn-warning`/`.btn-danger` to the confirm action. Defaults to `"default"` (no class,
+     *  the plain primary button). Wins over `destructive` below when both are passed. */
+    tone?: ConfirmTone;
+    /** @deprecated Use `tone: "danger"` instead — this only ever expressed the danger tier, and the
+     *  vocabulary has a second one (`"warning"`) this boolean cannot reach. Kept working (mapped to
+     *  `tone: "danger"` when `tone` is not set) for existing callers rather than a breaking rename. */
+    destructive?: boolean;
+    /** External in-flight flag. Disables both actions and blocks Escape/backdrop dismissal so a
+     *  request already underway cannot be raced by a second dismiss. */
+    pending?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/**
+ * Controlled modal confirm. The caller keeps this mounted and toggles `open` — it is never
+ * conditionally rendered by its parent — so the effect below has a stable `<dialog>` element to
+ * call `showModal()`/`close()` on and to restore focus through when it closes.
+ *
+ * Focus moves to the *cancel* action on open, not confirm — an operator whose first keystroke after
+ * a slow read-through is Enter should land on the safe action, not the destructive one. Both
+ * actions are plain `type="button"` (no `<form method="dialog">`, no `type="submit"`), so there is
+ * no browser-assigned "default button" for Enter to reach for at all; confirm can only ever fire
+ * from an explicit click or explicit Tab-then-Enter onto it.
+ *
+ * @complexity O(1) per open/close transition — one `showModal`/`close` call and one focus move.
+ */
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/react/components/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACvG,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;yFACqF;IACrF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;uGAEmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;wEACoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA0FtD"}

package/dist/react/components/ConfirmDialog.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import { resolveTone, toneClassName } from '../types.js';
+const DEFAULT_CANCEL_LABEL = 'Cancel';
+/**
+ * Controlled modal confirm. The caller keeps this mounted and toggles `open` — it is never
+ * conditionally rendered by its parent — so the effect below has a stable `<dialog>` element to
+ * call `showModal()`/`close()` on and to restore focus through when it closes.
+ *
+ * Focus moves to the *cancel* action on open, not confirm — an operator whose first keystroke after
+ * a slow read-through is Enter should land on the safe action, not the destructive one. Both
+ * actions are plain `type="button"` (no `<form method="dialog">`, no `type="submit"`), so there is
+ * no browser-assigned "default button" for Enter to reach for at all; confirm can only ever fire
+ * from an explicit click or explicit Tab-then-Enter onto it.
+ *
+ * @complexity O(1) per open/close transition — one `showModal`/`close` call and one focus move.
+ */
+export function ConfirmDialog(props) {
+    // `useId()`, not a string literal — a hardcoded id breaks the moment a screen mounts two
+    // `ConfirmDialog`s at once (a delete-role and a delete-policy confirm on one page, both
+    // stay-mounted/toggle-`open` per this component's own doc comment above): two `<h2>`s share one
+    // id, and `aria-labelledby` resolves via `getElementById`, which always returns the FIRST match
+    // in document order regardless of which dialog is actually open — a screen reader announcing
+    // "Delete role?" while the operator is about to confirm "Delete policy?", on a destructive
+    // action. `useId()` gives every mounted instance its own id for free.
+    const titleId = useId();
+    const dialogRef = useRef(null);
+    const cancelRef = useRef(null);
+    // Captured at the moment `open` flips true, before focus moves into the dialog — the element that
+    // had focus then is, by construction, whatever triggered this dialog (a `RowMenu` item's
+    // "Delete", a plain trigger button, …). Restored on close rather than left wherever the browser's
+    // own modal-focus algorithm happened to land (its default without this is `<body>`, which drops a
+    // keyboard user back to the top of the page).
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (props.open) {
+            triggerRef.current = document.activeElement;
+            if (typeof dialog.showModal === 'function') {
+                if (!dialog.open)
+                    dialog.showModal();
+            }
+            else {
+                dialog.setAttribute('open', '');
+            }
+            cancelRef.current?.focus();
+        }
+        else {
+            if (typeof dialog.close === 'function') {
+                if (dialog.open)
+                    dialog.close();
+            }
+            else {
+                dialog.removeAttribute('open');
+            }
+            if (triggerRef.current instanceof HTMLElement)
+                triggerRef.current.focus();
+        }
+    }, [props.open]);
+    function handleNativeCancel(e) {
+        // Fires on Escape while a real `showModal()`-opened dialog has focus. Always prevented: the
+        // effect above is the single source of truth for open/closed (driven by `props.open`), so
+        // letting the browser close the element on its own would desync DOM state from React state.
+        // Escape still closes the dialog — it just does so by routing through `onCancel`, same as a
+        // Cancel-button click, so the caller's `open` state (and therefore this same effect) is what
+        // actually calls `dialog.close()`.
+        e.preventDefault();
+        if (props.pending)
+            return;
+        props.onCancel();
+    }
+    function handleBackdropClick(e) {
+        // A `<dialog>` element's own box is sized to its content, not the viewport — a click that lands
+        // on the `<dialog>` element itself (as opposed to one of its children) is therefore a click on
+        // the backdrop area outside that content box.
+        if (props.pending)
+            return;
+        if (e.target === dialogRef.current)
+            props.onCancel();
+    }
+    return (_jsxs("dialog", { ref: dialogRef, className: "confirm-dialog", "aria-labelledby": titleId, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("h2", { id: titleId, children: props.title }), _jsx("div", { className: "confirm-dialog-body", children: props.body }), _jsxs("div", { className: "confirm-dialog-actions", children: [_jsx("button", { ref: cancelRef, type: "button", className: "btn-secondary", disabled: props.pending, onClick: props.onCancel, children: props.cancelLabel ?? DEFAULT_CANCEL_LABEL }), _jsx("button", { type: "button", className: toneClassName(resolveTone(props)), disabled: props.pending, onClick: props.onConfirm, children: props.confirmLabel })] })] }));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/react/components/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/react/components/ConfirmDialog.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/DataTable.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+/**
+ * @file The admin list table.
+ *
+ * ## Designed from the corpus, not from what a table component usually has
+ *
+ * This replaces 25 hand-rolled `<table>` blocks across one reference admin, every one of which had
+ * the identical skeleton — a `.table-scroll` wrapper, a `.list-table`, a `<thead>` of plain `<th>`,
+ * and a `<tbody>` mapping rows — wrapped in a ternary that rendered an empty state instead when
+ * there was nothing to show. That ternary is the single most duplicated thing in the corpus, which
+ * is why `empty` and `loading` are this component's concern rather than each caller's.
+ *
+ * What the corpus did **not** contain is just as load-bearing:
+ *
+ * - **No sorting.** Zero of 25.
+ * - **No pagination.** Zero of 25.
+ * - **No row selection.** Zero of 25 — the checkboxes that appear inside some of those tables are
+ *   field controls belonging to the row's own data, not a selection model.
+ *
+ * None of the three is implemented here. A table component that ships sorting nobody asked for has
+ * to guess at comparator semantics, controlled-vs-uncontrolled state, and multi-column precedence,
+ * and every one of those guesses becomes a compatibility obligation the moment it ships. When a
+ * host needs sorting, it will arrive with a real requirement attached and can be added then —
+ * additively, since `columns` is already a descriptor list with somewhere to put it.
+ *
+ * `<tfoot>` appeared exactly once, so it is an optional prop rather than part of the core shape.
+ *
+ * ## Row actions are not a feature
+ *
+ * An overflow menu in the last column is just a column whose `cell` renders one. There is no
+ * `actions` prop, because there is nothing a dedicated one would do that a `cell` does not already
+ * do — and having one would force a second, worse decision about where actions may appear.
+ *
+ * Three of the 25 gave that column an empty `<th>` carrying only an `aria-label`, which is the
+ * right shape: a visible "More" heading is noise, and a nameless column header is a gap for anyone
+ * navigating by column. `header` is therefore optional, and `headerLabel` names a headerless one.
+ *
+ * ## Styling contract
+ *
+ * Unstyled, like everything in this layer: `.table-scroll` and `.list-table` are emitted for the
+ * host stylesheet to define. The wrapper is not decorative — `overflow-x: auto` on it is what makes
+ * a wide table scroll instead of breaking the page, and it is also why `RowMenu` portals its popup
+ * out to `document.body` rather than positioning inside this box.
+ */
+export interface DataTableColumn<Row> {
+    /** Stable identity for this column. Not rendered — used as the React key. */
+    key: string;
+    /** Header content. Omit for a column that carries no visible heading (a row-actions column);
+     *  supply {@link headerLabel} when you do, so the column is still named for assistive tech. */
+    header?: ReactNode;
+    /** Accessible name for a column whose `header` is omitted or purely visual. */
+    headerLabel?: string;
+    /** Renders one cell. Receives the row and its index. */
+    cell: (row: Row, index: number) => ReactNode;
+    /** Class on this column's `<th>`. */
+    headerClassName?: string;
+    /** Class on this column's `<td>`. A function receives the row, for per-row variation. */
+    cellClassName?: string | ((row: Row, index: number) => string | undefined);
+}
+export interface DataTableProps<Row> {
+    rows: readonly Row[];
+    columns: ReadonlyArray<DataTableColumn<Row>>;
+    /** Stable React key per row. Required rather than defaulting to the index — an index key on a
+     *  list that can reorder or delete is a well-known source of state landing on the wrong row, and
+     *  every table in the corpus had a real id to hand. */
+    rowKey: (row: Row, index: number) => string;
+    /**
+     * Rendered **instead of the table** when there are no rows and `loading` is false. Pass the
+     * host's own empty-state markup. Omit it to render an empty `<tbody>` — appropriate when the
+     * table is one part of a larger screen that explains the emptiness itself.
+     */
+    empty?: ReactNode;
+    /** While true, `loadingContent` is rendered instead of the table (or an empty `<tbody>` if none
+     *  is given). Takes precedence over `empty`, so a slow first fetch never flashes "nothing here"
+     *  before the rows arrive — the bug that pattern produces in every list screen that gets it
+     *  backwards. */
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    /** `<tfoot>` content. Rendered as-is: supply your own `<tr>`/`<td>`. */
+    footer?: ReactNode;
+    /** Accessible name for the table itself. Worth setting when a screen has more than one. */
+    label?: string;
+    /** `<caption>`. Visible unless the host's CSS hides it; prefer {@link label} for a name that
+     *  should not paint. */
+    caption?: ReactNode;
+    /** Class per row, e.g. to mark a disabled or newly-created record. */
+    rowClassName?: (row: Row, index: number) => string | undefined;
+    /** Appended to `.list-table`. */
+    className?: string;
+    /** Appended to `.table-scroll`. */
+    scrollClassName?: string;
+}
+/**
+ * @complexity O(rows × columns) per render — one pass, no sorting or grouping work.
+ */
+export declare function DataTable<Row>(props: DataTableProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/react/components/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,MAAM,WAAW,eAAe,CAAC,GAAG;IAClC,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ;mGAC+F;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC7C,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,cAAc,CAAC,GAAG;IACjC,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7C;;2DAEuD;IACvD,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;qBAGiB;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;4BACwB;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/D,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,+BAwCxD"}

package/dist/react/components/DataTable.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function resolveCellClassName(column, row, index) {
+    return typeof column.cellClassName === 'function'
+        ? column.cellClassName(row, index)
+        : column.cellClassName;
+}
+/**
+ * @complexity O(rows × columns) per render — one pass, no sorting or grouping work.
+ */
+export function DataTable(props) {
+    // Loading wins over empty deliberately: `rows` is legitimately `[]` during a first fetch, and
+    // checking emptiness first is what makes a list screen flash its empty state before the data
+    // lands.
+    if (props.loading && props.loadingContent !== undefined)
+        return _jsx(_Fragment, { children: props.loadingContent });
+    if (!props.loading && props.rows.length === 0 && props.empty !== undefined)
+        return _jsx(_Fragment, { children: props.empty });
+    return (_jsx("div", { className: ['table-scroll', props.scrollClassName].filter(Boolean).join(' '), children: _jsxs("table", { className: ['list-table', props.className].filter(Boolean).join(' '), "aria-label": props.label, children: [props.caption === undefined ? null : _jsx("caption", { children: props.caption }), _jsx("thead", { children: _jsx("tr", { children: props.columns.map((column) => (_jsx("th", { scope: "col", className: column.headerClassName, "aria-label": column.header === undefined ? column.headerLabel : undefined, children: column.header }, column.key))) }) }), _jsx("tbody", { children: props.rows.map((row, index) => (_jsx("tr", { className: props.rowClassName?.(row, index), children: props.columns.map((column) => (_jsx("td", { className: resolveCellClassName(column, row, index), children: column.cell(row, index) }, column.key))) }, props.rowKey(row, index)))) }), props.footer === undefined ? null : _jsx("tfoot", { children: props.footer })] }) }));
+}
+//# sourceMappingURL=DataTable.js.map

package/dist/react/components/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":";AAgGA,SAAS,oBAAoB,CAC3B,MAA4B,EAC5B,GAAQ,EACR,KAAa;IAEb,OAAO,OAAO,MAAM,CAAC,aAAa,KAAK,UAAU;QAC/C,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC;QAClC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC;AAC3B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAM,KAA0B;IACvD,8FAA8F;IAC9F,6FAA6F;IAC7F,SAAS;IACT,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,cAAc,KAAK,SAAS;QAAE,OAAO,4BAAG,KAAK,CAAC,cAAc,GAAI,CAAC;IAC5F,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;QAAE,OAAO,4BAAG,KAAK,CAAC,KAAK,GAAI,CAAC;IAEtG,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAC/E,iBAAO,SAAS,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAc,KAAK,CAAC,KAAK,aACjG,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,4BAAU,KAAK,CAAC,OAAO,GAAW,EACxE,0BACE,uBACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,aAEE,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,MAAM,CAAC,eAAe,gBACrB,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,YAEvE,MAAM,CAAC,MAAM,IALT,MAAM,CAAC,GAAG,CAMZ,CACN,CAAC,GACC,GACC,EACR,0BACG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aAAmC,SAAS,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,YAC3E,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,aAAqB,SAAS,EAAE,oBAAoB,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,YACrE,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,IADjB,MAAM,CAAC,GAAG,CAEd,CACN,CAAC,IALK,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAM5B,CACN,CAAC,GACI,EACP,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,0BAAQ,KAAK,CAAC,MAAM,GAAS,IAC5D,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.d.ts

@@ -0,0 +1,25 @@
+import { type CanvasEmbedPlaceholderDescriptor, type InteractiveHtmlEditorProps as HtmlEditorProps } from '@jini-ai/ui/html-editor';
+/** True when `el` carries any embed marker attribute this convention recognizes — exported for
+ *  direct unit-testability without mounting the editor. Uses `hasAttributeOnAnyNodeShape` because
+ *  the `isProtectedElement` predicate is invoked from inside GrapesJS's `isComponent` callback,
+ *  which is not always called with a real DOM `Element` — see that helper's own doc. */
+export declare function isProtectedEmbedElement(el: Element): boolean;
+/**
+ * Recognizes a `data-embed-config` marker (`Tovu/src/core/embeds/marker.ts`'s single scanner
+ * convention) on a live canvas element and describes it for `@jini-ai/ui/html-editor`'s
+ * `applyCanvasEmbedPlaceholders` — see that function's own file header for what it does with the
+ * result. Exported for direct unit-testability without mounting the editor, same convention
+ * `isProtectedEmbedElement` above already documents.
+ *
+ * A marker whose `data-embed-config` fails to parse, isn't an object, or has no `type` returns
+ * `undefined` — "not a marker this function can describe," the identical degrade-quietly contract
+ * `scanEmbedMarkers` (the server-side scanner this mirrors) uses for a rejected marker at render time;
+ * this function does not warn or log, since it runs on every keystroke-adjacent canvas re-render, not
+ * at a write chokepoint where a loud rejection matters.
+ *
+ * @complexity O(1) — one attribute read, one `JSON.parse` of a small config object, one table lookup.
+ */
+export declare function describeEmbedPlaceholder(el: Element): CanvasEmbedPlaceholderDescriptor | undefined;
+export type InteractiveHtmlEditorProps = Omit<HtmlEditorProps, 'isProtectedElement' | 'describeEmbedPlaceholder'>;
+export declare function InteractiveHtmlEditor(props: InteractiveHtmlEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=InteractiveHtmlEditor.d.ts.map

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveHtmlEditor.d.ts","sourceRoot":"","sources":["../../../../src/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gCAAgC,EACrC,KAAK,0BAA0B,IAAI,eAAe,EACnD,MAAM,yBAAyB,CAAC;AAkCjC;;;wFAGwF;AACxF,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAE5D;AA2ED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,OAAO,GAAG,gCAAgC,GAAG,SAAS,CAelG;AAED,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,eAAe,EAAE,oBAAoB,GAAG,0BAA0B,CAAC,CAAC;AAElH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,+BAQtE"}

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InteractiveHtmlEditor as HtmlEditor, hasAttributeOnAnyNodeShape, } from '@jini-ai/ui/html-editor';
+/**
+ * @file Tovu-specific composition of `@jini-ai/ui/html-editor`'s generic `InteractiveHtmlEditor`: a
+ * Page's `body_html` (the first caller — see `Tovu/apps/admin/src/features/pages/PageEditor.tsx`)
+ * can carry `<div data-embed-type="…" data-embed-id="…"></div>` placeholders (and the legacy
+ * `data-widget-embed`/`data-form-embed` attributes on migration-era rows) that a separate scanner
+ * (`Tovu/src/widgets/html-embeds.ts`) resolves at render time — that scanner requires the div to
+ * stay exactly empty and self-closing, and degrades silently, with no error, the moment anything is
+ * written inside one. The CURRENT convention has since moved to a single `data-embed-config`
+ * attribute carrying a JSON payload (`Tovu/src/core/embeds/marker.ts`); `isProtectedEmbedElement`
+ * below has not been updated to recognize it (tracked separately — see that function's own doc), but
+ * `describeEmbedPlaceholder` below IS built against the current convention, since it only needs to
+ * read the marker, not police edits to it.
+ *
+ * The generic `@jini-ai/ui` primitive has zero knowledge of either convention; this file is the thin
+ * adapter that supplies them as an `isProtectedElement` predicate and a `describeEmbedPlaceholder`
+ * labeler, so `PageEditor.tsx` can keep importing `InteractiveHtmlEditor` from `@jini-ai/admin/react`
+ * unchanged.
+ */
+/** The attribute either the current (`data-embed-type`) or legacy (`data-widget-embed`,
+ *  `data-form-embed`) convention uses to mark a Page HTML embed placeholder div — see
+ *  `Tovu/src/widgets/html-embeds.ts`'s file header for the convention this protects.
+ *
+ *  **Does NOT include `data-embed-config`, the CURRENT marker attribute** (`Tovu/src/core/embeds/
+ *  marker.ts`) — a known, separately-tracked gap: an embed marker written the current way is still
+ *  editable/draggable/removable in this editor today. Left alone here deliberately (out of scope for
+ *  the placeholder-card feature this file's `describeEmbedPlaceholder` was added for); widening this
+ *  list to close that gap is a one-line fix (`'data-embed-config'` added below) but changes real
+ *  interaction behavior (an operator who could previously drag/delete a `data-embed-config` marker no
+ *  longer could), which deserves its own change, not a side effect of an unrelated card feature. */
+const EMBED_MARKER_ATTRIBUTES = ['data-embed-type', 'data-widget-embed', 'data-form-embed'];
+/** True when `el` carries any embed marker attribute this convention recognizes — exported for
+ *  direct unit-testability without mounting the editor. Uses `hasAttributeOnAnyNodeShape` because
+ *  the `isProtectedElement` predicate is invoked from inside GrapesJS's `isComponent` callback,
+ *  which is not always called with a real DOM `Element` — see that helper's own doc. */
+export function isProtectedEmbedElement(el) {
+    return EMBED_MARKER_ATTRIBUTES.some((attr) => hasAttributeOnAnyNodeShape(el, attr));
+}
+/**
+ * Friendly card headings for every embed `type` value this codebase names anywhere, split into two
+ * groups (traced against `Tovu/src/server/http/site/render.ts`'s `renderHtmlPageBody`/`isPageEmbedType`
+ * at the owner's own request, 2026-08-25 — authoritative, not re-derived):
+ *
+ * - **`media`, `widget`, `post`, `content`** — the ONLY four types `isPageEmbedType` (gating
+ *   `renderHtmlPageBody`, `render.ts:1238`) accepts, i.e. the complete set a Page's `body_html` — what
+ *   this editor edits — can ever actually contain. These are the types an operator can realistically
+ *   hit in the Interactive tab.
+ * - **`partial`, `menu`** — `Tovu/src/widgets/resolver-service.ts`'s `THEME_OWNED_MARKER_TYPES`. NOT
+ *   reachable inside a Page body — they live in THEME TEMPLATES (site header/nav/footer), authored
+ *   outside this editor entirely, so this component should not grow UI affordances assuming one can
+ *   appear here. Labeled anyway (rather than left to the generic fallback below) purely so the ONE
+ *   defensive case — a future change routes theme markup through this same editor, or a marketplace
+ *   theme's template gets opened here by mistake — still reads as a real word instead of a raw string.
+ *
+ * **`media` covers BOTH images and video — one type, one label, by design.** `resolveMediaTypeEmbeds`
+ * (`resolver-service.ts`) resolves a `media` marker to either a bare `<img>` or `<video>` tag depending
+ * on the asset's own kind, but that distinction lives entirely server-side in the resolved OUTPUT, not
+ * in the marker's `data-embed-config` this function reads. Telling them apart here would need either a
+ * new server endpoint (out of scope — see `identityLabel`'s doc on the identical media-title tradeoff)
+ * or guessing from the id string, which is not a real signal and would be actively misleading if wrong.
+ * "Media" stays correct for both until a cheap, real signal exists.
+ *
+ * Matched lower-cased — see `identityLabel`'s doc and `core/embeds/marker.ts`'s own `toEmbedRef` for
+ * why the server-side scanner lower-cases `type` the same way. An unregistered type is not an error
+ * here (unlike a rejected/unparseable marker) — `type` is deliberately a free string end-to-end (see
+ * `Tovu/src/widgets/html-embeds.ts`'s file header) precisely so a new one (a marketplace theme
+ * introducing its own, say) never requires a matching change on this list AND never renders nothing —
+ * `titleCase` below covers it with a still-legible generic card instead of a blank/thrown result.
+ */
+const EMBED_KIND_LABELS = {
+    media: 'Media',
+    widget: 'Widget',
+    post: 'Post',
+    content: 'Content',
+    partial: 'Partial',
+    menu: 'Menu',
+};
+/** Upper-cases just the first character — `EMBED_KIND_LABELS`'s fallback for a `type` this table
+ *  doesn't (yet) name, so the card still reads as a word rather than a raw lower-case config value. */
+function titleCase(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+/** How much of a bare id to show when no friendlier identity (`name`) is available on the marker's
+ *  own config — long enough to tell two real ids apart at a glance, short enough the card stays a
+ *  small chip instead of a wall of digits. */
+const ID_PREVIEW_LENGTH = 8;
+/**
+ * The card's identity line: the marker's own `name` when its config carries one (free — no fetch),
+ * otherwise a truncated `id`, otherwise an explicit "nothing was set" note rather than a blank line.
+ *
+ * **Deliberately does not fetch a human title for a `media` marker.** There is no cheap existing admin
+ * route for a single media asset's title by id — `AdminAPI.listMedia()` (`apps/admin/src/lib/api.ts`)
+ * is the only read, and it returns the ENTIRE workspace's media library, active and trashed, with no
+ * id filter or pagination, just to answer one id's `title`. Adding a `GET /media/:id` route is out of
+ * this feature's scope (an editor-chrome label is not worth a new server endpoint), and reusing
+ * `listMedia()` here would mean an async network call — with its own loading/error/unmount-race
+ * handling — inside what is otherwise a synchronous, purely-descriptive function called from a
+ * GrapesJS `load` handler. `name`, when authored, covers the common case for free; an id-only marker
+ * shows its id.
+ */
+function identityLabel(config) {
+    const name = typeof config.name === 'string' && config.name.length > 0 ? config.name : null;
+    if (name)
+        return name;
+    const id = typeof config.id === 'string' && config.id.length > 0 ? config.id : null;
+    if (!id)
+        return 'no id set';
+    return id.length > ID_PREVIEW_LENGTH ? `id ${id.slice(0, ID_PREVIEW_LENGTH)}…` : `id ${id}`;
+}
+/**
+ * Recognizes a `data-embed-config` marker (`Tovu/src/core/embeds/marker.ts`'s single scanner
+ * convention) on a live canvas element and describes it for `@jini-ai/ui/html-editor`'s
+ * `applyCanvasEmbedPlaceholders` — see that function's own file header for what it does with the
+ * result. Exported for direct unit-testability without mounting the editor, same convention
+ * `isProtectedEmbedElement` above already documents.
+ *
+ * A marker whose `data-embed-config` fails to parse, isn't an object, or has no `type` returns
+ * `undefined` — "not a marker this function can describe," the identical degrade-quietly contract
+ * `scanEmbedMarkers` (the server-side scanner this mirrors) uses for a rejected marker at render time;
+ * this function does not warn or log, since it runs on every keystroke-adjacent canvas re-render, not
+ * at a write chokepoint where a loud rejection matters.
+ *
+ * @complexity O(1) — one attribute read, one `JSON.parse` of a small config object, one table lookup.
+ */
+export function describeEmbedPlaceholder(el) {
+    const raw = el.getAttribute('data-embed-config');
+    if (!raw)
+        return undefined;
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return undefined;
+    }
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed))
+        return undefined;
+    const config = parsed;
+    if (typeof config.type !== 'string' || config.type === '')
+        return undefined;
+    const type = config.type.toLowerCase();
+    return { kindLabel: EMBED_KIND_LABELS[type] ?? titleCase(type), identityLabel: identityLabel(config) };
+}
+export function InteractiveHtmlEditor(props) {
+    return (_jsx(HtmlEditor, { ...props, isProtectedElement: isProtectedEmbedElement, describeEmbedPlaceholder: describeEmbedPlaceholder }));
+}
+//# sourceMappingURL=InteractiveHtmlEditor.js.map

package/dist/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveHtmlEditor.js","sourceRoot":"","sources":["../../../../src/react/components/InteractiveHtmlEditor/InteractiveHtmlEditor.tsx"],"names":[],"mappings":"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"}