@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

package/dist/web/app/dashboard-screen-tiles.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { EmbeddedScreenProvider, evalVisibleWhen, KumikoScreen, useEmbeddedScreen, } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { EmbeddedFormProvider } from "../primitives/index.js";
+import { SectionCard } from "../widgets/section-card.js";
+import { PanelError, WIDE_PANEL } from "./dashboard-shared.js";
+import { NO_GATE_PAYLOAD, VisibilityQueryContext, visibilityGate, } from "./dashboard-visibility.js";
+function EmbeddedScreenPanelTile({ panel, target, translate, }) {
+    const screenBody = _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate });
+    const embedded = panel.chromeless === true ? (_jsx(EmbeddedFormProvider, { children: _jsx(EmbeddedScreenProvider, { children: screenBody }) })) : (screenBody);
+    return (_jsx("div", { className: cn("min-w-0", WIDE_PANEL), "data-testid": `dashboard-panel-${panel.id}`, children: panel.label !== undefined && panel.chromeless !== true ? (_jsx(SectionCard, { title: translate(panel.label), children: embedded })) : (_jsxs(_Fragment, { children: [panel.label !== undefined && (_jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: translate(panel.label) })), embedded] })) }));
+}
+// Own component so the target lookup (a hook) only runs for panels that actually fall back.
+function FallbackScreenPanelTile({ panel, fallback, featureName, translate, }) {
+    const target = useEmbeddedScreen(featureName, fallback);
+    if (target === undefined)
+        return null;
+    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+}
+export function ScreenPanelTile({ panel, featureName, translate, }) {
+    const visibleWhen = panel.visibleWhen;
+    const visibility = useContext(VisibilityQueryContext).get(visibleWhen !== undefined ? visibilityGate(visibleWhen.query, NO_GATE_PAYLOAD).key : "");
+    const target = useEmbeddedScreen(featureName, panel.screen);
+    const verdict = visibleWhen === undefined ? "visible" : evalVisibleWhen(visibleWhen, visibility);
+    // Nothing while the gate loads: a fallback that flashes before the real panel flickers.
+    if (verdict === "loading")
+        return null;
+    if (verdict !== "visible" && panel.fallback !== undefined) {
+        return (_jsx(FallbackScreenPanelTile, { panel: panel, fallback: panel.fallback, featureName: featureName, translate: translate }));
+    }
+    if (target === undefined)
+        return null;
+    // A failed gate query must not silently drop the panel: on the
+    // account-security page that would hide every MFA enable/disable path.
+    if (verdict === "error" && visibility?.error) {
+        return (_jsx("div", { className: cn("min-w-0", WIDE_PANEL), "data-testid": `dashboard-panel-${panel.id}`, children: _jsx(PanelError, { label: panel.label !== undefined ? translate(panel.label) : panel.id, error: visibility.error, onRetry: () => void visibility.refetch() }) }));
+    }
+    if (verdict !== "visible")
+        return null;
+    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+}

package/dist/web/app/dashboard-visibility.d.ts

@@ -0,0 +1,42 @@
+import type { DashboardPanelDefinition, DashboardScreenPanel } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import { type UseQueryResult } from "../../index.ts";
+import { type ScreenParams } from "./dashboard-shared.tsx";
+type VisibilityQueryResult = UseQueryResult<Readonly<Record<string, unknown>>>;
+export type VisibilityQueryResults = ReadonlyMap<string, VisibilityQueryResult>;
+export declare const VisibilityQueryContext: import("react").Context<VisibilityQueryResults>;
+export type VisibilityGate = {
+    readonly key: string;
+    readonly query: string;
+    readonly payload: Readonly<Record<string, unknown>>;
+};
+export declare const NO_GATE_PAYLOAD: Readonly<Record<string, unknown>>;
+export declare function visibilityGate(query: string, payload: Readonly<Record<string, unknown>>): VisibilityGate;
+export declare function VisibilityGateQueries({ gates, onResult, onForget, }: {
+    readonly gates: readonly VisibilityGate[];
+    readonly onResult: (key: string, result: VisibilityQueryResult) => void;
+    readonly onForget: (key: string) => void;
+}): ReactNode;
+export declare function useVisibilityGateResults(): {
+    readonly results: VisibilityQueryResults;
+    readonly report: (key: string, result: VisibilityQueryResult) => void;
+    readonly forget: (key: string) => void;
+};
+export declare function distinctVisibilityGates(panels: readonly DashboardPanelDefinition[], screenParams: ScreenParams): VisibilityGate[];
+export declare function GatedGridCell({ panel, screenParams, label, className, children, }: {
+    readonly panel: Exclude<DashboardPanelDefinition, DashboardScreenPanel>;
+    readonly screenParams: ScreenParams;
+    readonly label: string;
+    readonly className: string | undefined;
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function useDashboardVisibility(panels: readonly DashboardPanelDefinition[], screenParams: ScreenParams): {
+    visibilityGates: VisibilityGate[];
+    gateResults: {
+        readonly results: VisibilityQueryResults;
+        readonly report: (key: string, result: VisibilityQueryResult) => void;
+        readonly forget: (key: string) => void;
+    };
+    gateResultsWithPending: VisibilityQueryResults;
+};
+export {};

package/dist/web/app/dashboard-visibility.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { evalVisibleWhen } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { PanelError, useDashboardQuery } from "./dashboard-shared.js";
+export const VisibilityQueryContext = createContext(new Map());
+export const NO_GATE_PAYLOAD = {};
+export function visibilityGate(query, payload) {
+    return { key: `${query}|${JSON.stringify(payload)}`, query, payload };
+}
+// Embedded screens carry no screen filter; in-grid panels pass the filter
+// (unless ignoreScreenFilter, never for a stat-group) and the time range.
+function panelVisibilityGate(panel, screenParams) {
+    if (panel.kind === "custom" || panel.visibleWhen === undefined)
+        return undefined;
+    if (panel.kind === "screen")
+        return visibilityGate(panel.visibleWhen.query, NO_GATE_PAYLOAD);
+    const dropsFilter = panel.kind !== "stat-group" && panel.kind !== "text" && panel.ignoreScreenFilter === true;
+    return visibilityGate(panel.visibleWhen.query, {
+        ...(dropsFilter ? {} : screenParams.filterParams),
+        ...screenParams.rangeParams,
+        ...screenParams.recordParams,
+    });
+}
+// One live query per distinct gate (query + payload), shared by every panel
+// that gates on it — N panels on the same status query would otherwise each
+// open their own request, SSE subscription and refetch per event. The queries
+// run as keyed siblings of the grid so a changing gate count never changes the
+// grid's position in the tree (which would remount every panel).
+function VisibilityGateQuery({ gate, onResult, onForget, }) {
+    const { data, error, loading, refetch } = useDashboardQuery(gate.query, gate.payload);
+    const { key } = gate;
+    useEffect(() => {
+        onResult(key, { data, error, loading, refetch });
+    }, [key, data, error, loading, refetch, onResult]);
+    useEffect(() => () => onForget(key), [key, onForget]);
+    return null;
+}
+export function VisibilityGateQueries({ gates, onResult, onForget, }) {
+    return gates.map((gate) => (_jsx(VisibilityGateQuery, { gate: gate, onResult: onResult, onForget: onForget }, gate.key)));
+}
+export function useVisibilityGateResults() {
+    const [results, setResults] = useState(new Map());
+    const report = useCallback((key, result) => {
+        setResults((prev) => new Map(prev).set(key, result));
+    }, []);
+    const forget = useCallback((key) => {
+        setResults((prev) => {
+            if (!prev.has(key))
+                return prev;
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+        });
+    }, []);
+    return { results, report, forget };
+}
+const NOOP_REFETCH = async () => { };
+// A gate reports through an effect, so for its first commit (and after a payload change) no
+// result exists yet; without a placeholder that reads as "hidden" and flashes the fallback.
+function withPendingGates(results, gateKeys) {
+    if (gateKeys.every((key) => results.has(key)))
+        return results;
+    const merged = new Map(results);
+    for (const key of gateKeys) {
+        if (!merged.has(key)) {
+            merged.set(key, { data: null, error: null, loading: true, refetch: NOOP_REFETCH });
+        }
+    }
+    return merged;
+}
+export function distinctVisibilityGates(panels, screenParams) {
+    const gates = new Map();
+    for (const panel of panels) {
+        const gate = panelVisibilityGate(panel, screenParams);
+        if (gate !== undefined)
+            gates.set(gate.key, gate);
+    }
+    return [...gates.values()];
+}
+export function GatedGridCell({ panel, screenParams, label, className, children, }) {
+    const gate = panelVisibilityGate(panel, screenParams);
+    const visibility = useContext(VisibilityQueryContext).get(gate?.key ?? "");
+    const visibleWhen = panel.kind === "custom" ? undefined : panel.visibleWhen;
+    if (visibleWhen !== undefined) {
+        const verdict = evalVisibleWhen(visibleWhen, visibility);
+        if (verdict === "error" && visibility?.error) {
+            return (_jsx("div", { className: cn("min-w-0", className), "data-testid": `dashboard-panel-${panel.id}`, children: _jsx(PanelError, { label: label, error: visibility.error, onRetry: () => void visibility.refetch() }) }));
+        }
+        // Loading renders nothing too: a skeleton that then vanishes flickers.
+        if (verdict !== "visible")
+            return null;
+    }
+    return _jsx("div", { className: cn("min-w-0", className), children: children });
+}
+export function useDashboardVisibility(panels, screenParams) {
+    const visibilityGates = distinctVisibilityGates(panels, screenParams);
+    const gateResults = useVisibilityGateResults();
+    const gateKeysSignature = visibilityGates.map((gate) => gate.key).join("\n");
+    const gateResultsWithPending = useMemo(() => withPendingGates(gateResults.results, gateKeysSignature === "" ? [] : gateKeysSignature.split("\n")), [gateResults.results, gateKeysSignature]);
+    return { visibilityGates, gateResults, gateResultsWithPending };
+}

package/dist/web/app/use-dashboard-screen-state.d.ts

@@ -0,0 +1,35 @@
+import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { ErrorNotice } from "../../app/error-reference.tsx";
+import type { Translate } from "../../headless/index.ts";
+import { type useNav } from "../../index.ts";
+import { type ScreenParams } from "./dashboard-shared.tsx";
+type Nav = ReturnType<typeof useNav>;
+export declare function useDashboardScreenParams(screen: DashboardScreenDefinition, translate: Translate, nav: Nav): {
+    recordBinding: import("@cosmicdrift/kumiko-types/screen").DashboardRecordBinding | undefined;
+    recordId: string;
+    recordMissing: boolean;
+    recordPayloadKey: string | undefined;
+    recordParams: Readonly<Record<string, unknown>>;
+    recordQueryName: string | undefined;
+    picker: import("react").ReactNode;
+    rangeControl: import("react").ReactNode;
+    screenParams: ScreenParams;
+    loadedAtMs: number;
+    reportLoaded: (atMs: number) => void;
+};
+export declare function useDashboardRecord(screen: DashboardScreenDefinition, params: Pick<ReturnType<typeof useDashboardScreenParams>, "recordQueryName" | "recordParams" | "recordMissing">): {
+    recordQuery: import("../../index.ts").UseQueryResult<Readonly<Record<string, unknown>>>;
+    recordRow: Readonly<Record<string, unknown>> | null;
+    refetchRecord: () => Promise<void>;
+    queryRuntime: {
+        refreshIntervalMs: number | undefined;
+        register: (refetch: () => Promise<void>) => () => void;
+    };
+    refetchAll: () => Promise<void>;
+};
+export declare function useDashboardHeaderActions(screen: DashboardScreenDefinition, params: Pick<ReturnType<typeof useDashboardScreenParams>, "recordPayloadKey" | "recordId" | "recordQueryName" | "recordMissing">, record: Pick<ReturnType<typeof useDashboardRecord>, "recordRow" | "refetchAll">, translate: Translate): {
+    actionError: ErrorNotice | null;
+    setActionError: import("react").Dispatch<import("react").SetStateAction<ErrorNotice | null>>;
+    headerActions: readonly import("../../index.ts").RenderEditAction[] | undefined;
+};
+export {};

package/dist/web/app/use-dashboard-screen-state.js

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery, useRecordActions } from "../../index.js";
+import { resolveRefreshIntervalMs } from "./dashboard-refresh.js";
+import { useFilterParams, useTimeRange } from "./dashboard-screen-controls.js";
+import { useLoadedAt, useRefetchRegistry } from "./dashboard-shared.js";
+export function useDashboardScreenParams(screen, translate, nav) {
+    const recordBinding = screen.record;
+    const recordId = recordBinding !== undefined ? (nav.searchParams[recordBinding.param] ?? "") : "";
+    const recordMissing = recordBinding !== undefined && recordId === "";
+    const recordPayloadKey = recordBinding?.payloadKey ?? recordBinding?.param;
+    const recordParams = recordPayloadKey !== undefined && recordId !== "" ? { [recordPayloadKey]: recordId } : {};
+    const recordQueryName = recordBinding?.query;
+    const { params: filterParams, picker } = useFilterParams(screen, !recordMissing);
+    const { params: rangeParams, control: rangeControl } = useTimeRange(screen, translate);
+    const screenParams = { filterParams, rangeParams, recordParams };
+    const { loadedAtMs, reportLoaded } = useLoadedAt(screenParams);
+    return {
+        recordBinding,
+        recordId,
+        recordMissing,
+        recordPayloadKey,
+        recordParams,
+        recordQueryName,
+        picker,
+        rangeControl,
+        screenParams,
+        loadedAtMs,
+        reportLoaded,
+    };
+}
+export function useDashboardRecord(screen, params) {
+    const { recordQueryName, recordParams, recordMissing } = params;
+    // The record query is not a panel query: it needs the interval before the
+    // registry context below exists, and `refresh.field` reads from its own row.
+    const [refreshIntervalMs, setRefreshIntervalMs] = useState(() => resolveRefreshIntervalMs(screen.refresh, null));
+    const recordQuery = useQuery(recordQueryName ?? "", recordParams, {
+        enabled: recordQueryName !== undefined && !recordMissing,
+        live: true,
+        ...(refreshIntervalMs !== undefined && { refetchIntervalMs: refreshIntervalMs }),
+    });
+    const { data: recordRow, refetch: refetchRecord } = recordQuery;
+    useEffect(() => {
+        setRefreshIntervalMs(resolveRefreshIntervalMs(screen.refresh, recordRow));
+    }, [screen.refresh, recordRow]);
+    const { register, refetchRegistered } = useRefetchRegistry();
+    const queryRuntime = useMemo(() => ({ refreshIntervalMs, register }), [refreshIntervalMs, register]);
+    const refetchAll = useCallback(async () => {
+        await Promise.all([
+            recordQueryName !== undefined ? refetchRecord() : Promise.resolve(),
+            refetchRegistered(),
+        ]);
+    }, [recordQueryName, refetchRecord, refetchRegistered]);
+    return { recordQuery, recordRow, refetchRecord, queryRuntime, refetchAll };
+}
+const NO_RECORD_ROW = {};
+export function useDashboardHeaderActions(screen, params, record, translate) {
+    const { recordPayloadKey, recordId, recordQueryName, recordMissing } = params;
+    const [actionError, setActionError] = useState(null);
+    const idOnlyRow = useMemo(() => (recordPayloadKey !== undefined ? { id: recordId, [recordPayloadKey]: recordId } : null), [recordId, recordPayloadKey]);
+    const actionRow = recordQueryName !== undefined ? record.recordRow : idOnlyRow;
+    const headerActions = useRecordActions({
+        actions: actionRow !== null && !recordMissing ? screen.actions : undefined,
+        record: actionRow ?? NO_RECORD_ROW,
+        recordId,
+        translate,
+        onWriteSuccess: record.refetchAll,
+    });
+    return { actionError, setActionError, headerActions };
+}

package/dist/web/primitives/data-table/actions-column.js

@@ -26,9 +26,10 @@ export function ActionsBodyCell({ testId, fillsHeight, measureContent, children,
         // viewports. bg-background sets the column apart during
         // scroll — no border-l (divider too heavy).
         className: cn("whitespace-nowrap text-right", stickyActionsCellClass(fillsHeight), ROW_FOCUS_RING_CELL_CLASS), 
-        // Action-cell events must not trigger the row click/activation
-        // (typically "Open Detail" — the user wanted the action,
-        // not navigation). We stopPropagation for mouse and
-        // keyboard so a11y stays consistent.
-        onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: measureContent ? (_jsx("div", { [ACTIONS_CONTENT_ATTRIBUTE]: "", className: "ml-auto w-max", children: children })) : (children) }));
+        // Only under column sizing is the empty cell leftover width that belongs to the row;
+        // otherwise it is padding around the buttons, where a misclick must not open the row.
+        onClick: (e) => {
+            if (!measureContent || e.target !== e.currentTarget)
+                e.stopPropagation();
+        }, onKeyDown: (e) => e.stopPropagation(), children: measureContent ? (_jsx("div", { [ACTIONS_CONTENT_ATTRIBUTE]: "", className: "ml-auto w-max", children: children })) : (children) }));
 }

package/dist/web/primitives/data-table/card-body.d.ts

@@ -0,0 +1,6 @@
+import type { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { ReactNode } from "react";
+import type { ListColumnViewModel, ListRowViewModel } from "../../../headless/index.ts";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export type CardRoles = ReturnType<typeof cardColumnRoles<ListColumnViewModel>>;
+export declare function renderCardBody(m: DataTableModel, row: ListRowViewModel, roles: CardRoles): ReactNode;

package/dist/web/primitives/data-table/card-body.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cellLinkProp, DataTableCell, isBadgeColumn, isEmptyCellValue, isUnlabeledFalse, showsBareCheckMark, } from "../data-table-cell.js";
+import { CardLeadingImage } from "../file-thumbnail.js";
+import { columnCellPresentationProps } from "./data-cell-props.js";
+import { showFullTextOnHover } from "./table-footer.js";
+function cardCell(m, row, col) {
+    const { onCellChange } = m;
+    // A bare check mark in the subtitle line says nothing without its column.
+    if (showsBareCheckMark(col.type, row.values[col.field], col.renderer))
+        return col.label;
+    return (_jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: m.tableTranslate, locale: m.tableLocale, ...columnCellPresentationProps(col), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay, compactFile: true }), ...(onCellChange !== undefined && {
+            onChange: (value) => onCellChange(row.id, col.field, value),
+        }), ...cellLinkProp(col, row, m.rowOpener(row) === undefined) }));
+}
+function cellTestIdOf(m, row, field) {
+    return m.getCellTestId?.(row, field) ?? `cell-${row.id}-${field}`;
+}
+function renderCardMeta(m, row, metaColumns) {
+    return (_jsx("div", { className: "min-w-0 overflow-x-clip", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex min-w-0 flex-wrap items-center text-[13px] leading-5 tabular-nums text-foreground-secondary", children: metaColumns.map((col) => (_jsxs("div", { className: "flex h-5 min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("div", { "data-testid": cellTestIdOf(m, row, col.field), className: "min-w-0 truncate leading-5", onPointerEnter: showFullTextOnHover, children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(m, row, col) })) : (cardCell(m, row, col)) })] }, col.field))) }) }));
+}
+function renderCardHeading(m, row, roles) {
+    const { title: cardTitleColumn, status: cardStatusColumn } = roles;
+    const showStatus = cardStatusColumn !== undefined && !isEmptyCellValue(row.values[cardStatusColumn.field]);
+    return (_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": cellTestIdOf(m, row, cardTitleColumn.field), className: "min-w-0 truncate text-base font-semibold text-foreground", onPointerEnter: showFullTextOnHover, children: cardCell(m, row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": cellTestIdOf(m, row, cardStatusColumn.field), className: "shrink-0", children: cardCell(m, row, cardStatusColumn) }))] }));
+}
+export function renderCardBody(m, row, roles) {
+    const { image: cardImageColumn, meta: cardMetaColumns } = roles;
+    const metaColumns = cardMetaColumns.filter((col) => !isEmptyCellValue(row.values[col.field]) &&
+        !isUnlabeledFalse(col.type, row.values[col.field], col.renderer));
+    return (_jsxs(_Fragment, { children: [cardImageColumn?.fileDisplay !== undefined && (_jsx("div", { "data-testid": `card-image-${row.id}`, className: "shrink-0", children: _jsx(CardLeadingImage, { value: row.values[cardImageColumn.field], display: cardImageColumn.fileDisplay }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [renderCardHeading(m, row, roles), metaColumns.length > 0 && renderCardMeta(m, row, metaColumns)] }), m.rowOpener(row) !== undefined && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
+}

package/dist/web/primitives/data-table/card-row.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+import type { ListRowViewModel } from "../../../headless/index.ts";
+import { type CardRoles } from "./card-body.tsx";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderCard(m: DataTableModel, row: ListRowViewModel, roles: CardRoles): ReactNode;

package/dist/web/primitives/data-table/card-row.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../../lib/cn.js";
+import { rowToneClass } from "../data-table-cell.js";
+import { RowActionsCell } from "../row-actions.js";
+import { renderCardBody } from "./card-body.js";
+import { renderExpandToggle, renderExpansion } from "./row-render-parts.js";
+function renderCardMenu(m, row, menuActions) {
+    return (_jsx("div", { className: "shrink-0", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: m.rowActionMode, rowIsLink: m.onRowClick !== undefined, compact: true }) }));
+}
+function renderCardOpenButton(openRow, body) {
+    return (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
+            if (e.key !== "Enter")
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            openRow();
+        }, children: body }));
+}
+export function renderCard(m, row, roles) {
+    const { rowTone, menuActions } = m;
+    const hasMenu = menuActions !== undefined && menuActions.length > 0;
+    const openRow = m.rowOpener(row);
+    const body = renderCardBody(m, row, roles);
+    const rowItem = (_jsxs("li", { "data-testid": m.rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), m.expansion !== undefined || m.selection.active ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4", m.density.card), ...(openRow !== undefined && { onClick: openRow }), children: [m.selection.cardCheckbox(row), renderExpandToggle(m, row), openRow !== undefined ? renderCardOpenButton(openRow, body) : body, hasMenu && renderCardMenu(m, row, menuActions)] }, row.id));
+    if (m.expansion === undefined)
+        return rowItem;
+    // The expansion is a sibling <li>, outside the row's click target, so
+    // clicks in the sub-area never navigate the parent row.
+    return (_jsxs(Fragment, { children: [rowItem, renderExpansion(m, row, "item", 0)] }, row.id));
+}

package/dist/web/primitives/data-table/card-view.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderCardsView(m: DataTableModel): ReactNode;

package/dist/web/primitives/data-table/card-view.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
+import { cn } from "../../lib/cn.js";
+import { renderCard } from "./card-row.js";
+import { CardSortSelect } from "./card-sort-select.js";
+import { bandClassName, bandReactKey, bandTestId } from "./group-band.js";
+import { renderBand } from "./row-render-parts.js";
+import { TotalsCard } from "./totals-footer.js";
+export function renderCardsView(m) {
+    const { testId, totals, columns } = m;
+    const roles = cardColumnRoles(columns);
+    return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [_jsx(CardSortSelect, { columns: columns, sort: m.sort, onSortChange: m.onSortChange, testId: testId }), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: m.tableItems.map((item) => item.kind === "row" ? (renderCard(m, item.row, roles)) : (_jsx("li", { "data-testid": bandTestId(item), className: cn("border-b border-border-row", bandClassName(item)), children: renderBand(m, item) }, bandReactKey(item)))) }), totals !== undefined && _jsx(TotalsCard, { totals: totals, columnOf: m.columnOf })] }) }));
+}

package/dist/web/primitives/data-table/column-resize-handle.js

@@ -39,7 +39,9 @@ export function ColumnResizeHandle({ field, label, sizing, }) {
         event.preventDefault();
         sizing.commit(field, clampToBounds(width + delta.dx));
     };
-    return (_jsx("hr", { "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": minWidth, "aria-valuemax": MAX_COLUMN_WIDTH_PX, "aria-label": translate?.("kumiko.list.column.resize", { column: label }) ?? `Resize ${label}`, tabIndex: 0, "data-testid": `column-resize-${field}`, className: HANDLE_CLASS, onClick: (event) => event.stopPropagation(), onKeyDown: onKeyDown, ...drag, onPointerDown: (event) => {
+    return (_jsx("hr", { "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": minWidth, "aria-valuemax": MAX_COLUMN_WIDTH_PX, 
+        // title, not aria-label: getByLabel("<column>") would match a resize handle for every column.
+        title: translate?.("kumiko.list.column.resize", { column: label }) ?? `Resize ${label}`, tabIndex: 0, "data-testid": `column-resize-${field}`, className: HANDLE_CLASS, onClick: (event) => event.stopPropagation(), onKeyDown: onKeyDown, ...drag, onPointerDown: (event) => {
             event.stopPropagation();
             drag.onPointerDown(event);
         } }));

package/dist/web/primitives/data-table/data-cell-props.d.ts

@@ -0,0 +1,7 @@
+import type { ListColumnViewModel } from "../../../headless/index.ts";
+/** Optional presentation props every DataTableCell gets from its column. */
+export declare function columnCellPresentationProps(col: ListColumnViewModel): {
+    optionLabels?: Readonly<Record<string, string>> | undefined;
+    optionTones?: Readonly<Partial<Record<string, "bad" | "neutral" | "ok" | "warn">>> | undefined;
+    grouping?: boolean | undefined;
+};

package/dist/web/primitives/data-table/data-cell-props.js

@@ -0,0 +1,8 @@
+/** Optional presentation props every DataTableCell gets from its column. */
+export function columnCellPresentationProps(col) {
+    return {
+        ...(col.optionLabels !== undefined && { optionLabels: col.optionLabels }),
+        ...(col.optionTones !== undefined && { optionTones: col.optionTones }),
+        ...(col.grouping !== undefined && { grouping: col.grouping }),
+    };
+}

package/dist/web/primitives/data-table/row-render-parts.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { ListRowViewModel } from "../../../headless/index.ts";
+import { type DataTableBandItem } from "./group-band.tsx";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderExpandToggle(m: DataTableModel, row: ListRowViewModel): ReactNode;
+export declare function renderExpansion(m: DataTableModel, row: ListRowViewModel, as: "row" | "item", colSpan: number): ReactNode;
+export declare function renderBand(m: DataTableModel, item: DataTableBandItem): ReactNode;
+export declare function renderEmptyBlock(m: DataTableModel): ReactNode;

package/dist/web/primitives/data-table/row-render-parts.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableCell, TableRow } from "../../ui/table.js";
+import { cellTitle } from "../data-table-cell.js";
+import { GroupBand } from "./group-band.js";
+import { EXPANSION_CELL_CLASS, EXPANSION_CONTENT_CLASS, RowExpandToggle } from "./table-chrome.js";
+// The expand toggle of a row, shared by table and card layout. Named after
+// the first data column, the one a user recognizes the row by.
+export function renderExpandToggle(m, row) {
+    const { expansion, expandedRowIds, columns, tableTranslate } = m;
+    if (expansion === undefined)
+        return null;
+    const expanded = expandedRowIds?.has(row.id) === true;
+    const firstColumn = columns[0];
+    const title = (firstColumn !== undefined ? cellTitle(row.values[firstColumn.field]) : undefined) ?? "";
+    const labelKey = expanded ? "kumiko.list.row.collapse" : "kumiko.list.row.expand";
+    return (_jsx(RowExpandToggle, { expanded: expanded, controlsId: m.expansionDomId(row), label: tableTranslate?.(labelKey, { title }) ?? `${expanded ? "Collapse" : "Expand"} ${title}`, onToggle: () => expansion.onToggleRowExpanded(row.id), testId: `${m.rowTestId(row)}-toggle` }));
+}
+export function renderExpansion(m, row, as, colSpan) {
+    const { expansion, expandedRowIds } = m;
+    if (expansion === undefined || expandedRowIds?.has(row.id) !== true)
+        return null;
+    const content = expansion.renderExpandedRow(row);
+    if (as === "item") {
+        return (_jsx("li", { id: m.expansionDomId(row), "data-testid": `${m.rowTestId(row)}-expansion`, className: "border-b border-border-row bg-muted px-4 pt-1 pb-3.5", children: content }));
+    }
+    return (_jsx(TableRow, { id: m.expansionDomId(row), "data-testid": `${m.rowTestId(row)}-expansion`, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colSpan, className: EXPANSION_CELL_CLASS, children: _jsx("div", { className: EXPANSION_CONTENT_CLASS, children: content }) }) }));
+}
+export function renderBand(m, item) {
+    return _jsx(GroupBand, { item: item, columnOf: m.columnOf });
+}
+export function renderEmptyBlock(m) {
+    const { testId, chromeless, fillsHeight, emptyState, tableTranslate } = m;
+    return (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-empty` : "render-list-empty", className: cn("flex flex-col items-center justify-center p-12 text-sm text-muted-foreground gap-3", chromeless !== true && !fillsHeight && "rounded-md border border-dashed"), children: emptyState ?? _jsx("span", { children: tableTranslate?.("kumiko.list.no-entries") ?? "No entries." }) }));
+}

package/dist/web/primitives/data-table/table-body.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderTableBody(m: DataTableModel): ReactNode;

package/dist/web/primitives/data-table/table-body.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../../lib/cn.js";
+import { TableBody, TableCell, TableRow } from "../../ui/table.js";
+import { rowToneClass } from "../data-table-cell.js";
+import { RowActionsCell } from "../row-actions.js";
+import { ActionsBodyCell } from "./actions-column.js";
+import { bandClassName, bandReactKey, bandTestId } from "./group-band.js";
+import { renderBand, renderExpandToggle, renderExpansion } from "./row-render-parts.js";
+import { EXPAND_TOGGLE_CELL_CLASS } from "./table-chrome.js";
+import { renderDataCell } from "./table-data-cell.js";
+import { EXPAND_COLUMN_KEY, SELECT_COLUMN_KEY } from "./use-column-pins.js";
+function renderBandRow(m, item) {
+    return (_jsx(TableRow, { "data-testid": bandTestId(item), children: _jsx(TableCell, { colSpan: m.fullColSpan, className: bandClassName(item), children: renderBand(m, item) }) }, bandReactKey(item)));
+}
+function renderExpandCell(m, row) {
+    const expandBodyPin = m.pins.bodyCell(EXPAND_COLUMN_KEY);
+    return (_jsx(TableCell, { "data-testid": m.getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: cn(EXPAND_TOGGLE_CELL_CLASS, expandBodyPin.className), style: expandBodyPin.style, children: renderExpandToggle(m, row) }));
+}
+function renderActionsCell(m, row, tableActions) {
+    return (_jsx(ActionsBodyCell, { testId: m.getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, fillsHeight: m.fillsHeight, measureContent: m.sizing !== undefined, children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: m.rowActionMode, rowIsLink: m.onRowClick !== undefined }) }));
+}
+function renderDataRow(m, row) {
+    const { rowTone, density, tableActions } = m;
+    const openRow = m.rowOpener(row);
+    const opensOnClick = openRow !== undefined;
+    const keyboard = m.keyboardRow(row.id, openRow);
+    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": m.rowTestId(row), "data-tone": rowTone?.(row), onClick: openRow, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", m.fillsHeight && "h-10 border-border-row hover:bg-muted", density.row, keyboard.className), ...keyboard.props, children: [m.selection.bodyCell(row, m.pins.bodyCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandCell(m, row), m.columns.map((col, colIndex) => renderDataCell(m, row, col, colIndex, opensOnClick)), m.hasTableActions && tableActions !== undefined && renderActionsCell(m, row, tableActions)] }), renderExpansion(m, row, "row", m.fullColSpan)] }, row.id));
+}
+export function renderTableBody(m) {
+    return (_jsx(TableBody, { children: m.tableItems.map((item) => item.kind === "row" ? renderDataRow(m, item.row) : renderBandRow(m, item)) }));
+}

package/dist/web/primitives/data-table/table-content.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderTableContent(m: DataTableModel): ReactNode;

package/dist/web/primitives/data-table/table-content.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfiniteSentinel, Pager } from "../pager.js";
+import { renderCardsView } from "./card-view.js";
+import { renderEmptyBlock } from "./row-render-parts.js";
+import { DataTableFooter } from "./table-footer.js";
+import { renderTableView } from "./table-view.js";
+// The pager is ALWAYS rendered below the table (even with rows=[]) so the
+// user can page back on a filter hit of zero without losing the list.
+// Except total === 0: then there is nothing to paginate. Incompatible with
+// infinite scroll: the caller sets either pager OR onReachEnd.
+function renderPager(m) {
+    const { pager, serverGroups, itemNoun, testId } = m;
+    if (pager === undefined || !(pager.total > 0) || serverGroups !== undefined)
+        return undefined;
+    return (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: m.fillsHeight }));
+}
+function renderSentinel(m, pagerElement) {
+    const { onReachEnd, serverGroups, testId } = m;
+    if (pagerElement !== undefined || onReachEnd === undefined || serverGroups !== undefined) {
+        return undefined;
+    }
+    return (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: m.loadingMore === true, hasMore: m.hasMore !== false, rowsCount: m.rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" }));
+}
+function renderTableBodyContent(m) {
+    if (m.isEmpty)
+        return renderEmptyBlock(m);
+    return m.isNarrow ? renderCardsView(m) : renderTableView(m);
+}
+export function renderTableContent(m) {
+    const { testId, itemNoun, serverGroups } = m;
+    const tableContent = renderTableBodyContent(m);
+    const pagerElement = renderPager(m);
+    const sentinelElement = renderSentinel(m, pagerElement);
+    // With scrollBody the footer (pager, else the entry count) sits OUTSIDE the
+    // scroll surface so it stays put at any row count; the infinite sentinel
+    // stays INSIDE, or it would never intersect the scrollport.
+    if (!m.fillsHeight) {
+        return (_jsxs(_Fragment, { children: [m.selection.bar, tableContent, pagerElement, sentinelElement] }));
+    }
+    return (_jsxs(_Fragment, { children: [m.selection.bar, _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: serverGroups?.totalCount ?? m.rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] }));
+}

package/dist/web/primitives/data-table/table-data-cell.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { ListColumnViewModel, ListRowViewModel } from "../../../headless/index.ts";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderDataCell(m: DataTableModel, row: ListRowViewModel, col: ListColumnViewModel, colIndex: number, opensOnClick: boolean): ReactNode;

package/dist/web/primitives/data-table/table-data-cell.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableCell } from "../../ui/table.js";
+import { cellLinkProp, cellTitle, DataTableCell, FIT_CONTENT_CELL_CLASS, FirstCellLink, isEmptyCellValue, NUMERIC_COLUMN_TYPES, TABULAR_COLUMN_TYPES, } from "../data-table-cell.js";
+import { columnCellPresentationProps } from "./data-cell-props.js";
+// Text wraps instead of truncating: nowrap cells keep their
+// full width, so a wide table scrolled sideways and its
+// last column slid under the sticky actions column with
+// nothing visibly cut off. max-w-xs bounds a single column;
+// badges and dates stay nowrap by their own classes.
+function dataCellClassName(m, col, colIndex, pinClassName) {
+    return cn(col.fileDisplay === undefined
+        ? cn(m.sizing ? "overflow-hidden" : "max-w-xs", "whitespace-normal break-words")
+        : FIT_CONTENT_CELL_CLASS, colIndex === 0 ? "font-medium text-foreground" : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40", m.density.cell, pinClassName);
+}
+export function renderDataCell(m, row, col, colIndex, opensOnClick) {
+    const { getCellTestId, onCellChange, onRowClick, tableTranslate, tableLocale } = m;
+    const bodyPin = m.pins.bodyCell(col.field);
+    const linksFirstCell = colIndex === 0 && opensOnClick && onCellChange === undefined;
+    return (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, className: dataCellClassName(m, col, colIndex, bodyPin.className), style: bodyPin.style, title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: linksFirstCell, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: m.rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...columnCellPresentationProps(col), ...(col.fileDisplay !== undefined && {
+                    fileDisplay: col.fileDisplay,
+                }), ...(onCellChange !== undefined && {
+                    onChange: (value) => onCellChange(row.id, col.field, value),
+                }), ...cellLinkProp(col, row, !linksFirstCell) }) }) }, col.field));
+}

package/dist/web/primitives/data-table/table-header-row.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { DataTableModel } from "./use-data-table-state.ts";
+export declare function renderTableHeader(m: DataTableModel): ReactNode;