@cosmicdrift/kumiko-renderer 0.388.0 → 0.390.0

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/index.d.ts

@@ -13,6 +13,7 @@ export { KumikoLink, useBrowserNavApi } from "./app/nav.tsx";
 export { PlainContentEditor } from "./app/plain-content-editor.tsx";
 export { useResolvers } from "./app/resolvers-context.tsx";
 export { RichContentEditor } from "./app/rich-content-editor.tsx";
+export { clearRememberedListState } from "./app/session-list-state-store.ts";
 export type { NavIconKey } from "./icons.tsx";
 export { Icon } from "./icons.tsx";
 export type { AppLayoutProps } from "./layout/app-layout.tsx";

package/dist/web/index.js

@@ -12,6 +12,7 @@ export { KumikoLink, useBrowserNavApi } from "./app/nav.js";
 export { PlainContentEditor } from "./app/plain-content-editor.js";
 export { useResolvers } from "./app/resolvers-context.js";
 export { RichContentEditor } from "./app/rich-content-editor.js";
+export { clearRememberedListState } from "./app/session-list-state-store.js";
 export { Icon } from "./icons.js";
 export { AppLayout } from "./layout/app-layout.js";
 export { Avatar } from "./layout/avatar.js";

package/dist/web/lib/export-xlsx-request.d.ts

@@ -0,0 +1,11 @@
+import type { DataTableExport } from "../../data-table-view-types.ts";
+export type XlsxExportResult = {
+    readonly status: "ok";
+    readonly blob: Blob;
+} | {
+    readonly status: "too-many";
+    readonly maxRows: number | undefined;
+} | {
+    readonly status: "failed";
+};
+export declare function requestXlsxExport(source: DataTableExport): Promise<XlsxExportResult>;

package/dist/web/lib/export-xlsx-request.js

@@ -0,0 +1,46 @@
+import { isPlainObject } from "@cosmicdrift/kumiko-types/type-guards";
+import { CSRF_HEADER_NAME, LOCALE_HEADER_NAME, readActiveLocale, readCsrfToken, } from "../../live/index.js";
+const TOO_MANY_ROWS_HTTP_STATUS = 413;
+async function readMaxRows(res) {
+    try {
+        const body = await res.json();
+        const error = isPlainObject(body) ? body["error"] : undefined;
+        const details = isPlainObject(error) ? error["details"] : undefined;
+        const maxRows = isPlainObject(details) ? details["maxRows"] : undefined;
+        return typeof maxRows === "number" ? maxRows : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export async function requestXlsxExport(source) {
+    const headers = { "Content-Type": "application/json" };
+    const csrf = readCsrfToken();
+    if (csrf !== undefined)
+        headers[CSRF_HEADER_NAME] = csrf;
+    const locale = readActiveLocale();
+    if (locale !== undefined)
+        headers[LOCALE_HEADER_NAME] = locale;
+    try {
+        const res = await fetch("/api/export/xlsx", {
+            method: "POST",
+            credentials: "include",
+            headers,
+            body: JSON.stringify({
+                screen: source.screen,
+                payload: source.payload,
+                columns: source.columns,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }),
+        });
+        if (res.ok)
+            return { status: "ok", blob: await res.blob() };
+        if (res.status === TOO_MANY_ROWS_HTTP_STATUS) {
+            return { status: "too-many", maxRows: await readMaxRows(res) };
+        }
+        return { status: "failed" };
+    }
+    catch {
+        return { status: "failed" };
+    }
+}

package/dist/web/primitives/data-table/actions-column.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from "react";
+export declare const ACTIONS_CONTENT_ATTRIBUTE = "data-actions-content";
+export declare function stickyActionsCellClass(fillsHeight: boolean): string;
+export declare function ActionsHeaderCell({ label, style, absorbsLeftover, }: {
+    readonly label: string;
+    readonly style?: CSSProperties | undefined;
+    /** Fixed table layout: `w-px` would pin this column to 1px, so it must size as auto and take the leftover width. */
+    readonly absorbsLeftover: boolean;
+}): ReactNode;
+export declare function ActionsBodyCell({ testId, fillsHeight, measureContent, children, }: {
+    readonly testId: string;
+    readonly fillsHeight: boolean;
+    /** Wraps the content so the column's natural width stays measurable under a fixed table layout. */
+    readonly measureContent: boolean;
+    readonly children: ReactNode;
+}): ReactNode;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { TableCell, TableHead } from "../../ui/table.js";
+import { ROW_FOCUS_RING_CELL_CLASS } from "./use-row-keyboard-navigation.js";
+export const ACTIONS_CONTENT_ATTRIBUTE = "data-actions-content";
+export function stickyActionsCellClass(fillsHeight) {
+    return cn("md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card");
+}
+export function ActionsHeaderCell({ label, style, absorbsLeftover, }) {
+    return (_jsx(TableHead, { "data-testid": "column-actions", 
+        // From md: sticky right-0 + bg-muted (= header tone) so the
+        // action column stays at the right edge during horizontal
+        // scroll on wider screens. Below md, actions scroll in
+        // normal flow — sticky there would pin the column over the
+        // preceding data column instead of the (already narrow)
+        // page edge. No border-l: a permanent divider looks heavy;
+        // the sticky bg already sets the column apart during scroll.
+        className: "w-px text-right text-muted-foreground md:sticky md:right-0 md:z-10 md:bg-muted", "aria-label": label, style: absorbsLeftover ? { ...style, width: "auto" } : style }));
+}
+export function ActionsBodyCell({ testId, fillsHeight, measureContent, children, }) {
+    return (_jsx(TableCell, { "data-testid": testId, 
+        // From md: sticky-right so the actions stay visible on the
+        // right edge during horizontal scroll. Below md, actions
+        // scroll with the row like any other cell — sticky there
+        // would hide the neighboring data column on narrow
+        // 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), 
+        // 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/bulk-selection-bar.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { DataTableBulkAction } from "../../../data-table-bulk-types.ts";
+import type { Translate } from "../../../headless/index.ts";
+import type { BulkRunState } from "../../../hooks/use-bulk-run.ts";
+export declare function BulkSelectionBar({ flush, actions, selectedCount, isFull, runState, resultActionLabel, pendingAction, t, onRequest, onConfirm, onConfirmClose, onCancel, onClear, onDismissResult, }: {
+    readonly flush: boolean;
+    readonly actions: readonly DataTableBulkAction[];
+    readonly selectedCount: number;
+    readonly isFull: boolean;
+    readonly runState: BulkRunState;
+    readonly resultActionLabel: string;
+    readonly pendingAction: DataTableBulkAction | undefined;
+    readonly t: Translate;
+    readonly onRequest: (action: DataTableBulkAction) => void;
+    readonly onConfirm: (action: DataTableBulkAction) => void;
+    readonly onConfirmClose: () => void;
+    readonly onCancel: () => void;
+    readonly onClear: () => void;
+    readonly onDismissResult: () => void;
+}): ReactNode;

package/dist/web/primitives/data-table/bulk-selection-bar.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MAX_BULK_SELECTION } from "@cosmicdrift/kumiko-framework/ui-types";
+import { cn } from "../../lib/cn.js";
+import { DefaultBanner } from "../banner.js";
+import { DefaultButton } from "../button.js";
+import { DefaultDialog } from "../dialog.js";
+const BAR_CLASS = "flex flex-wrap items-center gap-2 bg-muted/60 py-2 text-sm text-foreground";
+// A scrollBody table has no frame of its own, so the bar spans it like the toolbar does.
+const FLUSH_BAR_CLASS = "border-t px-6 max-md:px-3";
+const FRAMED_BAR_CLASS = "rounded-lg border px-3";
+function ResultBanner({ result, actionLabel, t, onDismiss, }) {
+    const tallies = [
+        { key: "succeeded", text: "kumiko.list.bulk.result.succeeded", ids: result.succeededIds },
+        { key: "failed", text: "kumiko.list.bulk.result.failed", ids: result.failedIds },
+        { key: "skipped", text: "kumiko.list.bulk.result.skipped", ids: result.skippedIds },
+        { key: "not-started", text: "kumiko.list.bulk.result.not-started", ids: result.notStartedIds },
+    ];
+    return (_jsxs(DefaultBanner, { variant: result.failedIds.length > 0 ? "warning" : "info", title: t("kumiko.list.bulk.result.title", { action: actionLabel }), testId: "bulk-result", actions: _jsx(DefaultButton, { variant: "secondary", size: "sm", onClick: onDismiss, testId: "bulk-result-dismiss", children: t("kumiko.list.bulk.result.dismiss") }), children: [_jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-4 p-0", children: tallies
+                    .filter((tally) => tally.key === "succeeded" || tally.ids.length > 0)
+                    .map((tally) => (_jsx("li", { "data-testid": `bulk-result-${tally.key}`, children: t(tally.text, { count: tally.ids.length }) }, tally.key))) }), result.firstFailureMessage !== undefined && (_jsx("p", { "data-testid": "bulk-result-error", className: "m-0 mt-1 text-foreground-secondary", children: result.firstFailureMessage }))] }));
+}
+function RunProgress({ state, t, onCancel, barClassName, }) {
+    return (_jsxs("div", { "data-testid": "bulk-bar", "data-phase": "running", className: barClassName, children: [_jsx("span", { "data-testid": "bulk-progress", className: "tabular-nums", "aria-live": "polite", children: t("kumiko.list.bulk.progress", { settled: state.settled, total: state.total }) }), _jsx(DefaultButton, { variant: "secondary", size: "sm", onClick: onCancel, disabled: state.cancelRequested, testId: "bulk-cancel", className: "ms-auto", children: t(state.cancelRequested ? "kumiko.list.bulk.cancelling" : "kumiko.list.bulk.cancel") })] }));
+}
+export function BulkSelectionBar({ flush, actions, selectedCount, isFull, runState, resultActionLabel, pendingAction, t, onRequest, onConfirm, onConfirmClose, onCancel, onClear, onDismissResult, }) {
+    const confirmText = pendingAction?.confirmText?.(selectedCount);
+    // skip: nothing selected, no run and no result leaves no bar in the DOM
+    if (runState.phase === "idle" && selectedCount === 0 && pendingAction === undefined)
+        return null;
+    const barClassName = cn(BAR_CLASS, flush ? FLUSH_BAR_CLASS : FRAMED_BAR_CLASS);
+    return (_jsxs("div", { className: flush ? "flex flex-col" : "flex flex-col gap-2", children: [runState.phase === "finished" && (_jsx("div", { className: flush ? "px-6 pb-2 max-md:px-3" : undefined, children: _jsx(ResultBanner, { result: runState.result, actionLabel: resultActionLabel, t: t, onDismiss: onDismissResult }) })), runState.phase === "running" ? (_jsx(RunProgress, { state: runState, t: t, onCancel: onCancel, barClassName: barClassName })) : (selectedCount > 0 && (_jsxs("div", { "data-testid": "bulk-bar", "data-phase": "idle", className: barClassName, children: [_jsx("span", { "data-testid": "bulk-selected-count", className: "font-medium tabular-nums", children: t("kumiko.list.bulk.selected", { count: selectedCount }) }), actions.map((action) => (_jsx(DefaultButton, { variant: action.style === "danger" ? "danger" : "secondary", size: "sm", onClick: () => onRequest(action), testId: `bulk-action-${action.id}`, ...(action.icon !== undefined && { icon: action.icon }), children: action.label }, action.id))), isFull && (_jsx("span", { "data-testid": "bulk-limit", className: "text-foreground-secondary", children: t("kumiko.list.bulk.limit", { max: MAX_BULK_SELECTION }) })), _jsx(DefaultButton, { variant: "ghost", size: "sm", onClick: onClear, testId: "bulk-clear", className: "ms-auto", children: t("kumiko.list.bulk.clear") })] }))), pendingAction !== undefined && (_jsx(DefaultDialog, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        onConfirmClose();
+                }, title: pendingAction.label, ...(confirmText !== undefined && { description: confirmText }), confirmLabel: pendingAction.confirmLabel ?? pendingAction.label, variant: pendingAction.style === "danger" ? "danger" : "default", 
+                // The run must not hold the dialog open: the bar shows its progress.
+                onConfirm: () => onConfirm(pendingAction), testId: "bulk-confirm" }))] }));
+}

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-sort-select.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { DataTableSort } from "../../../index.ts";
+type SortableColumn = {
+    readonly field: string;
+    readonly label: string;
+    readonly sortable?: boolean;
+};
+export declare function CardSortSelect({ columns, sort, onSortChange, testId, }: {
+    readonly columns: readonly SortableColumn[];
+    readonly sort: DataTableSort | null | undefined;
+    readonly onSortChange: ((next: DataTableSort | null) => void) | undefined;
+    readonly testId: string | undefined;
+}): ReactNode;
+export {};

package/dist/web/primitives/data-table/card-sort-select.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+// No column headers below the breakpoint, so the click-to-sort affordance
+// on SortableHeader has nothing to attach to. A single native <select> is
+// the whole fix — no custom widget, no menu — fed straight from the
+// columns marked sortable in the ViewModel. Options carry the resolved
+// {field, dir} directly so onChange can look the pick up by value instead
+// of parsing/casting the option string back apart.
+export function CardSortSelect({ columns, sort, onSortChange, testId, }) {
+    const translate = useOptionalTranslation();
+    const sortableColumns = columns.filter((col) => col.sortable);
+    if (onSortChange === undefined || sortableColumns.length === 0)
+        return null;
+    const sortOptions = sortableColumns.flatMap((col) => [
+        { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
+        { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
+    ]);
+    const sortLabel = sort !== undefined && sort !== null
+        ? (translate?.("kumiko.list.sort.by", {
+            column: columns.find((col) => col.field === sort.field)?.label ?? sort.field,
+        }) ?? `Sorted by ${sort.field}`)
+        : (translate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
+    const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
+    // URL state can carry a sort on a column that is not sortable; without an
+    // option for it the select would claim "Unsorted" while the list is sorted.
+    const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
+    const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
+    return (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && _jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" }), _jsxs("select", { "aria-label": translate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "") {
+                        onSortChange(null);
+                        return;
+                    }
+                    const picked = sortOptions.find((o) => o.value === raw);
+                    if (picked === undefined)
+                        return;
+                    onSortChange({ field: picked.field, dir: picked.dir });
+                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: translate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] }));
+}

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-layout-mode.d.ts

@@ -0,0 +1,5 @@
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+/** Pinning, resizing and keyboard navigation only apply to the table layout (md and up). */
+export declare function isPinningActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;
+export declare function isResizingActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;
+export declare function isKeyboardNavigationActive(view: DataTableViewOptions | undefined, isNarrow: boolean): boolean;

package/dist/web/primitives/data-table/column-layout-mode.js

@@ -0,0 +1,10 @@
+/** Pinning, resizing and keyboard navigation only apply to the table layout (md and up). */
+export function isPinningActive(view, isNarrow) {
+    return !isNarrow && view?.pins !== undefined;
+}
+export function isResizingActive(view, isNarrow) {
+    return !isNarrow && view?.widths !== undefined && view.minWidths !== undefined;
+}
+export function isKeyboardNavigationActive(view, isNarrow) {
+    return !isNarrow && view?.keyboardNavigation === true;
+}

package/dist/web/primitives/data-table/column-picker-section.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { DataTableViewColumn } from "../../../data-table-view-types.ts";
+export declare function ColumnPickerSection({ columns, labels, onChange, }: {
+    readonly columns: readonly DataTableViewColumn[];
+    readonly labels: ReadonlyMap<string, string>;
+    readonly onChange: (next: readonly DataTableViewColumn[]) => void;
+}): ReactNode;

package/dist/web/primitives/data-table/column-picker-section.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, GripVertical } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { usePointerDrag } from "../../widgets/use-pointer-drag.js";
+const ROW_HEIGHT_PX = 32;
+function moveColumn(columns, from, to) {
+    const target = Math.max(0, Math.min(columns.length - 1, to));
+    if (target === from)
+        return columns;
+    const next = [...columns];
+    const [moved] = next.splice(from, 1);
+    if (moved !== undefined)
+        next.splice(target, 0, moved);
+    return next;
+}
+function PickerRow({ columns, index, label, isLastVisible, onChange }) {
+    const translate = useOptionalTranslation();
+    const column = columns[index];
+    // Positions are relative to the order at pointer-down, so every move is idempotent.
+    const drag = usePointerDrag({
+        onStart: () => ({ snapshot: columns, from: index }),
+        onMove: (start, { dy }) => onChange(moveColumn(start.snapshot, start.from, start.from + Math.round(dy / ROW_HEIGHT_PX))),
+    });
+    if (column === undefined)
+        return null;
+    const checkboxId = `list-view-column-${column.field}`;
+    return (_jsxs("li", { className: "flex h-8 items-center gap-1.5", "data-testid": `list-view-column-row-${column.field}`, children: [_jsx("span", { ...drag, "aria-hidden": "true", className: "flex size-6 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground", children: _jsx(GripVertical, { className: "size-4" }) }), _jsx(Checkbox, { id: checkboxId, checked: column.visible, disabled: column.visible && isLastVisible, onCheckedChange: (checked) => onChange(columns.map((c, i) => (i === index ? { ...c, visible: checked === true } : c))) }), _jsx("label", { htmlFor: checkboxId, className: "min-w-0 flex-1 truncate text-sm", children: label }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === 0, "aria-label": translate?.("kumiko.list.view.column.move-up", { column: label }) ?? `Move ${label} up`, onClick: () => onChange(moveColumn(columns, index, index - 1)), children: _jsx(ArrowUp, { className: "size-3.5", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === columns.length - 1, "aria-label": translate?.("kumiko.list.view.column.move-down", { column: label }) ??
+                    `Move ${label} down`, onClick: () => onChange(moveColumn(columns, index, index + 1)), children: _jsx(ArrowDown, { className: "size-3.5", "aria-hidden": "true" }) })] }));
+}
+export function ColumnPickerSection({ columns, labels, onChange, }) {
+    const visibleCount = columns.filter((column) => column.visible).length;
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col p-0", "data-testid": "list-view-columns", children: columns.map((column, index) => (_jsx(PickerRow, { columns: columns, index: index, label: labels.get(column.field) ?? column.field, isLastVisible: visibleCount === 1, onChange: onChange }, column.field))) }));
+}

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

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import type { ColumnSizing } from "./use-column-sizing.ts";
+export declare function ColumnWidthGroup({ fields, sizing, hasExpandColumn, hasSelectColumn, hasActionsColumn, }: {
+    readonly fields: readonly string[];
+    readonly sizing: ColumnSizing;
+    readonly hasExpandColumn: boolean;
+    readonly hasSelectColumn?: boolean;
+    readonly hasActionsColumn: boolean;
+}): ReactNode;
+export declare function ColumnResizeHandle({ field, label, sizing, }: {
+    readonly field: string;
+    readonly label: string;
+    readonly sizing: ColumnSizing;
+}): ReactNode;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { MAX_COLUMN_WIDTH_PX } from "../../../hooks/list-column-layout.js";
+import { useOptionalTranslation } from "../../../index.js";
+import { arrowKeyDelta, usePointerDrag } from "../../widgets/use-pointer-drag.js";
+import { EXPAND_COLUMN_WIDTH_PX, SELECT_COLUMN_WIDTH_PX } from "./use-measured-column-widths.js";
+export function ColumnWidthGroup({ fields, sizing, hasExpandColumn, hasSelectColumn = false, hasActionsColumn, }) {
+    return (_jsxs("colgroup", { children: [hasSelectColumn && _jsx("col", { style: { width: SELECT_COLUMN_WIDTH_PX } }), hasExpandColumn && _jsx("col", { style: { width: EXPAND_COLUMN_WIDTH_PX } }), fields.map((field) => (_jsx("col", { style: { width: sizing.widthOf(field) } }, field))), hasActionsColumn && _jsx("col", {})] }));
+}
+// Visible while the header is hovered or the grip has focus; the wider 8px hit area stays transparent.
+const HANDLE_CLASS = "absolute inset-y-0 right-0 z-10 m-0 h-full w-2 border-0 bg-transparent cursor-col-resize touch-none outline-none " +
+    "after:absolute after:inset-y-1 after:right-0 after:w-0.5 after:rounded-full after:bg-transparent " +
+    "group-hover/header:after:bg-border hover:after:bg-ring focus-visible:after:bg-ring active:after:bg-ring";
+export function ColumnResizeHandle({ field, label, sizing, }) {
+    const translate = useOptionalTranslation();
+    const width = sizing.widthOf(field);
+    const minWidth = sizing.minWidthOf(field);
+    const draggedWidth = useRef(null);
+    const clampToBounds = (value) => Math.min(MAX_COLUMN_WIDTH_PX, Math.max(minWidth, value));
+    const drag = usePointerDrag({
+        onStart: () => width,
+        onMove: (startWidth, { dx }) => {
+            const next = clampToBounds(startWidth + dx);
+            draggedWidth.current = next;
+            sizing.setLiveWidth(field, next);
+        },
+        onEnd: () => {
+            const final = draggedWidth.current;
+            draggedWidth.current = null;
+            if (final !== null)
+                sizing.commit(field, final);
+        },
+    });
+    const onKeyDown = (event) => {
+        event.stopPropagation();
+        const delta = arrowKeyDelta(event);
+        if (delta === undefined || delta.dx === 0)
+            return;
+        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, 
+        // 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 }),
+    };
+}