@cosmicdrift/kumiko-renderer 0.388.0 → 0.389.0

package/dist/components/render-list.d.ts

@@ -1,9 +1,11 @@
-import { type EntityDefinition, type EntityListScreenDefinition, type IconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type EntityDefinition, type EntityListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
 import type { ListRowViewModel, Translate } from "../headless/index.ts";
 import type { ListSort } from "../hooks/use-list-url-state.ts";
-import { type DataTableDateRangeFacet, type DataTableFacet, type DataTableProps, type DataTableRowAction, type DataTableRowActionMode, type DataTableRowGrouping } from "../primitives.tsx";
+import { type DataTableDateRangeFacet, type DataTableFacet, type DataTableProps, type DataTableRowAction, type DataTableRowActionMode, type DataTableTableBlockProps } from "../primitives.tsx";
 import { type ListEmptyStateContent } from "./list-empty-state.tsx";
+import { type ToolbarActionButton } from "./render-list-toolbar-action.tsx";
+export type { ToolbarActionButton };
 export type RenderListProps = {
     readonly screen: EntityListScreenDefinition;
     readonly entity: Pick<EntityDefinition, "fields" | "derivedFields">;
@@ -67,12 +69,11 @@ export type RenderListProps = {
      *  EntityListScreenDefinition.rowActions: handler-QN becomes a dispatcher
      *  call, and i18n keys become translated strings. */
     readonly rowActions?: readonly DataTableRowAction[];
-    /** How the row-action column renders (see `DataTableProps.rowActionMode`).
-     *  KumikoScreen derives it from the actions themselves; without it the
-     *  DataTable falls back to its adaptive default. */
+    /** How the row-action column renders (see `DataTableProps.rowActionMode`). KumikoScreen
+     *  derives it from the actions; without it the DataTable uses its adaptive default. */
     readonly rowActionMode?: DataTableRowActionMode;
-    /** Forwarded to `DataTableProps.rowGrouping` / `rowTone`. */
-    readonly rowGrouping?: DataTableRowGrouping;
+    /** Forwarded to `DataTableProps.bulk` / `rowTone`. */
+    readonly bulk?: DataTableProps["bulk"];
     readonly rowTone?: DataTableProps["rowTone"];
     /** Toolbar actions in the list header in resolved form. KumikoScreen
      *  builds them from EntityListScreenDefinition.toolbarActions:
@@ -93,13 +94,11 @@ export type RenderListProps = {
     readonly dateRangeFacets?: readonly DataTableDateRangeFacet[];
     /** One bound changed (set URL state + refetch). */
     readonly onDateRangeChange?: (field: string, bound: "from" | "to", value: string) => void;
-    /** Forwarded to `DataTableProps.chromeless` — drops the table's own card
-     *  frame for a host that already provides one (relatedList in a tabs-mode
-     *  section). Default false. */
+    /** Forwarded to `DataTableProps.chromeless` — drops the table's own card frame for a
+     *  host that already provides one (relatedList in a tabs-mode section). Default false. */
     readonly chromeless?: boolean;
-    /** Forwarded to `DataTableProps.scrollBody` — bounds the table height and
-     *  scrolls rows internally instead of growing the page (relatedList in a
-     *  tabs-mode section). Default false. */
+    /** Forwarded to `DataTableProps.scrollBody` — bounds the table height and scrolls rows
+     *  internally instead of growing the page (relatedList in a tabs-mode section). Default false. */
     readonly scrollBody?: boolean;
     /** Forwarded to `DataTableProps.screenPadding` — `true`: the table carries
      *  the shared screen padding because it is the screen body (entityList/
@@ -112,20 +111,5 @@ export type RenderListProps = {
     readonly expandedRowIds?: ReadonlySet<string>;
     readonly onToggleRowExpanded?: (rowId: string) => void;
     readonly renderExpandedRow?: (row: ListRowViewModel) => ReactNode;
-};
-export type ToolbarActionButton = {
-    readonly id: string;
-    readonly label: string;
-    readonly style?: "primary" | "secondary" | "danger";
-    readonly confirm?: string;
-    readonly confirmLabel?: string;
-    /** Overrides the default "danger implies a confirm dialog" rule. Schema-driven
-     *  navigate/drawer actions set it to false: the colour marks the action as
-     *  destructive, but the target form is the confirmation. */
-    readonly confirmRequired?: boolean;
-    readonly onTrigger: () => Promise<void> | void;
-    /** Id-derived default icon (ACTION_ICON_BY_ID in kumiko-screen.tsx) —
-     *  ToolbarAction has no author-declared icon field, unlike RowAction. */
-    readonly icon?: IconKey;
-};
+} & DataTableTableBlockProps;
 export declare function RenderList(props: RenderListProps): ReactNode;

package/dist/components/render-list.js

@@ -11,6 +11,7 @@ import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header
 import { shouldRenderActionsIconOnly, usePrimitives, } from "../primitives.js";
 import { ListEmptyStateBody } from "./list-empty-state.js";
 import { needsActionConfirm } from "./render-edit-action-button.js";
+import { ToolbarActionView } from "./render-list-toolbar-action.js";
 const SEARCH_DEBOUNCE_MS = 300;
 // Icon-less actions are promoted too; on phones the call site falls back to a
 // "plus" icon, on desktop the label carries the action.
@@ -18,7 +19,7 @@ function isHeaderPromotableToolbarAction(action) {
     return action.style === "primary" && !needsActionConfirm(action);
 }
 export function RenderList(props) {
-    const { screen, entity, rows, featureName, translate: translateProp, onRowClick, emptyState, onCreate, createLabel, searchable = false, searchPlaceholder, description, emptyContent, narrowed = false, defaultFilterActive: defaultFilterActiveProp = false, itemNounKey, searchValue, onSearchChange, sort, onSortChange, pager, onReachEnd, loadingMore, hasMore, rowActions, rowActionMode, rowGrouping, rowTone, toolbarActions, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, } = props;
+    const { screen, entity, rows, featureName, translate: translateProp, onRowClick, emptyState, onCreate, createLabel, searchable = false, searchPlaceholder, description, emptyContent, narrowed = false, defaultFilterActive: defaultFilterActiveProp = false, itemNounKey, searchValue, onSearchChange, sort, onSortChange, pager, onReachEnd, loadingMore, hasMore, rowActions, rowActionMode, bulk, rowTone, toolbarActions, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, ...tableBlockProps } = props;
     // As in RenderEdit, fall back to the i18next context for translation;
     // otherwise column headers would display raw i18n keys.
     const t = useTranslation();
@@ -27,6 +28,10 @@ export function RenderList(props) {
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
     const pageHeaderCompact = usePageHeaderCompact();
     const createInPageHeader = onCreate !== undefined && PageHeader !== undefined && pageHeaderSlotAvailable;
+    // Promoted actions that moved into the phone header's overflow menu have no button of
+    // their own, so their busy and error state lives here.
+    const [menuActionBusyId, setMenuActionBusyId] = useState(null);
+    const [menuActionError, setMenuActionError] = useState(null);
     // Local search buffer + debounce. External changes (browser back,
     // cross-component reset) are mirrored back; typing only fires
     // onSearchChange after 300ms without further keystrokes.
@@ -214,16 +219,41 @@ export function RenderList(props) {
     const hasHeaderSlot = screen.slots?.header !== undefined;
     const toolbarIconOnly = hasToolbarActions && shouldRenderActionsIconOnly(toolbarActions);
     const createButton = onCreate !== undefined && createInPageHeader && pageHeaderCompact ? (_jsx(Button, { variant: "primary", icon: "plus", size: "icon", ariaLabel: effectiveCreateLabel, title: effectiveCreateLabel, onClick: onCreate, testId: "render-list-create" })) : onCreate !== undefined ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-create", className: "px-3.5", children: effectiveCreateLabel })) : undefined;
-    // Without onCreate (e.g. a navigate action as the list's only CTA) the primary
-    // toolbar action takes the page-header slot like a "+ Neu" button would: an icon
-    // on phones, labelled on desktop, so projection lists look like entity lists.
-    const promotedToolbarAction = onCreate === undefined && PageHeader !== undefined && pageHeaderSlotAvailable
-        ? toolbarActions?.find(isHeaderPromotableToolbarAction)
-        : undefined;
-    const promotedActionButton = promotedToolbarAction !== undefined ? (_jsx(ToolbarActionView, { action: pageHeaderCompact
-            ? { ...promotedToolbarAction, icon: promotedToolbarAction.icon ?? "plus" }
-            : promotedToolbarAction, iconOnly: pageHeaderCompact, Button: Button, Dialog: Dialog, Banner: Banner })) : undefined;
-    const toolbarActionsInToolbar = toolbarActions?.filter((a) => a !== promotedToolbarAction) ?? [];
+    // Every primary toolbar action takes the page-header slot, left of the create
+    // button (which stays the rightmost primary action): labelled on desktop, so
+    // projection lists look like entity lists. On phones an icon button, or, next to
+    // the create button, an entry in the header's overflow menu: the header has no
+    // room for a labelled action beside it.
+    const promotedToolbarActions = PageHeader !== undefined && pageHeaderSlotAvailable
+        ? (toolbarActions?.filter(isHeaderPromotableToolbarAction) ?? [])
+        : [];
+    const promotedInOverflowMenu = pageHeaderCompact && createInPageHeader && promotedToolbarActions.length > 0;
+    const promotedMenuItems = promotedInOverflowMenu
+        ? promotedToolbarActions.map((a) => ({
+            id: a.id,
+            label: a.label,
+            ...(a.icon !== undefined && { icon: a.icon }),
+            ...(menuActionBusyId !== null && { disabled: true }),
+            testId: `render-list-toolbar-action-${a.id}`,
+            onSelect: () => {
+                setMenuActionBusyId(a.id);
+                setMenuActionError(null);
+                void (async () => {
+                    try {
+                        await a.onTrigger();
+                    }
+                    catch (e) {
+                        setMenuActionError(e instanceof Error ? e.message : String(e));
+                    }
+                    finally {
+                        setMenuActionBusyId(null);
+                    }
+                })();
+            },
+        }))
+        : [];
+    const headerActions = promotedToolbarActions.length > 0 && !promotedInOverflowMenu ? (_jsxs(_Fragment, { children: [promotedToolbarActions.map((a) => (_jsx(ToolbarActionView, { action: pageHeaderCompact ? { ...a, icon: a.icon ?? "plus" } : a, iconOnly: pageHeaderCompact, Button: Button, Dialog: Dialog, Banner: Banner }, a.id))), createInPageHeader && createButton] })) : createInPageHeader ? (createButton) : undefined;
+    const toolbarActionsInToolbar = toolbarActions?.filter((a) => !promotedToolbarActions.includes(a)) ?? [];
     const hasToolbarActionsInToolbar = toolbarActionsInToolbar.length > 0;
     const toolbarEnd = hasHeaderSlot ||
         hasToolbarActionsInToolbar ||
@@ -242,8 +272,7 @@ export function RenderList(props) {
     const titleKey = `screen:${screen.id}.title`;
     const resolvedTitle = translate(titleKey);
     const toolbarTitle = resolvedTitle === titleKey ? screen.id : resolvedTitle;
-    // ListSort = DataTableSort (aliased in use-list-url-state), so no cast is needed.
-    return (_jsxs(_Fragment, { children: [createInPageHeader && PageHeader !== undefined && _jsx(PageHeader, { actions: createButton }), promotedActionButton !== undefined && PageHeader !== undefined && (_jsx(PageHeader, { actions: promotedActionButton })), referenceColumns.map((rc) => (_jsx(ReferenceLookupBridge, { field: rc.field, refEntity: rc.refEntity, labelField: rc.labelField, featureName: rc.refFeature, onMap: handleLookupMap }, rc.field))), _jsx(DataTable, { columns: enrichedVm.columns, rows: enrichedVm.rows, toolbarTitle: toolbarTitle, ...(onRowClick !== undefined && { onRowClick }), ...(composedEmptyState !== undefined && { emptyState: composedEmptyState }), ...(toolbarStart !== undefined && { toolbarStart }), ...(description !== undefined && { toolbarDescription: description }), ...(toolbarEnd !== undefined && { toolbarEnd }), ...(sort !== undefined && { sort }), ...(onSortChange !== undefined && { onSortChange }), ...(pager !== undefined && { pager }), ...(onReachEnd !== undefined && { onReachEnd }), ...(loadingMore !== undefined && { loadingMore }), ...(hasMore !== undefined && { hasMore }), ...(itemNoun !== undefined && { itemNoun }), ...(rowActions !== undefined && { rowActions }), ...(rowActionMode !== undefined && { rowActionMode }), ...(rowGrouping !== undefined && { rowGrouping }), ...(rowTone !== undefined && { rowTone }), ...(filterFacets !== undefined && { filterFacets }), ...(filterValues !== undefined && { filterValues }), ...(onFilterChange !== undefined && { onFilterChange }), ...(onFilterReset !== undefined && { onFilterReset }), ...(dateRangeFacets !== undefined && { dateRangeFacets }), ...(onDateRangeChange !== undefined && { onDateRangeChange }), ...(chromeless !== undefined && { chromeless }), ...(scrollBody !== undefined && { scrollBody }), ...(screenPadding !== undefined && { screenPadding }), ...(expandedRowIds !== undefined && { expandedRowIds }), ...(onToggleRowExpanded !== undefined && { onToggleRowExpanded }), ...(renderExpandedRow !== undefined && { renderExpandedRow }), testId: "render-list-table" })] }));
+    return (_jsxs(_Fragment, { children: [headerActions !== undefined && PageHeader !== undefined && (_jsx(PageHeader, { actions: headerActions, ...(promotedInOverflowMenu && { overflowItems: promotedMenuItems }) })), menuActionError !== null && (_jsx(Banner, { variant: "error", testId: "render-list-toolbar-action-error", children: menuActionError })), referenceColumns.map((rc) => (_jsx(ReferenceLookupBridge, { field: rc.field, refEntity: rc.refEntity, labelField: rc.labelField, featureName: rc.refFeature, onMap: handleLookupMap }, rc.field))), _jsx(DataTable, { columns: enrichedVm.columns, rows: enrichedVm.rows, toolbarTitle: toolbarTitle, ...(onRowClick !== undefined && { onRowClick }), ...(composedEmptyState !== undefined && { emptyState: composedEmptyState }), ...(toolbarStart !== undefined && { toolbarStart }), ...(description !== undefined && { toolbarDescription: description }), ...(toolbarEnd !== undefined && { toolbarEnd }), ...(sort !== undefined && { sort }), ...(onSortChange !== undefined && { onSortChange }), ...(pager !== undefined && { pager }), ...(onReachEnd !== undefined && { onReachEnd }), ...(loadingMore !== undefined && { loadingMore }), ...(hasMore !== undefined && { hasMore }), ...(itemNoun !== undefined && { itemNoun }), ...(rowActions !== undefined && { rowActions }), ...(rowActionMode !== undefined && { rowActionMode }), ...(bulk !== undefined && { bulk }), ...(rowTone !== undefined && { rowTone }), ...(filterFacets !== undefined && { filterFacets }), ...(filterValues !== undefined && { filterValues }), ...(onFilterChange !== undefined && { onFilterChange }), ...(onFilterReset !== undefined && { onFilterReset }), ...(dateRangeFacets !== undefined && { dateRangeFacets }), ...(onDateRangeChange !== undefined && { onDateRangeChange }), ...(chromeless !== undefined && { chromeless }), ...(scrollBody !== undefined && { scrollBody }), ...(screenPadding !== undefined && { screenPadding }), ...(expandedRowIds !== undefined && { expandedRowIds }), ...(onToggleRowExpanded !== undefined && { onToggleRowExpanded }), ...(renderExpandedRow !== undefined && { renderExpandedRow }), ...tableBlockProps, testId: "render-list-table" })] }));
 }
 // Header slot in the list toolbar (toolbarEnd): `screen.slots.header` is
 // a PlatformComponent (`{ react: { __component: "X" } }`) resolved through
@@ -290,43 +319,6 @@ function ReferenceLookupBridge({ field, refEntity, labelField, featureName, onMa
     }, [field, lookup.map, lookup.complete, resolved, onMap]);
     return null;
 }
-// ToolbarActionView renders one button per toolbar action, with a confirm
-// dialog when required. It follows the inline RowAction pattern but has no
-// row context. The busy state covers async onTrigger; the dialog opens before
-// the trigger when confirmation is required for confirm/danger actions.
-function ToolbarActionView({ action, iconOnly = false, Button, Dialog, Banner, }) {
-    const [busy, setBusy] = useState(false);
-    const [confirmOpen, setConfirmOpen] = useState(false);
-    // Toolbar actions do not have access to the toast primitive, unlike
-    // rowActions routed through the DataTable primitive, so an inline error
-    // banner is used to surface failures. Without it, a swallowed failure result
-    // would look to the user as though nothing happened.
-    const [errorText, setErrorText] = useState(null);
-    const trigger = async () => {
-        setBusy(true);
-        setErrorText(null);
-        try {
-            await action.onTrigger();
-        }
-        catch (e) {
-            setErrorText(e instanceof Error ? e.message : String(e));
-        }
-        finally {
-            setBusy(false);
-        }
-    };
-    const variant = action.style ?? "secondary";
-    const needsConfirm = needsActionConfirm(action);
-    const showIconOnly = iconOnly && action.icon !== undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: variant, loading: busy, ...(action.icon !== undefined && { icon: action.icon }), size: showIconOnly ? "icon" : "md", ...(showIconOnly && { ariaLabel: action.label, title: action.label }), onClick: () => {
-                    if (needsConfirm) {
-                        setConfirmOpen(true);
-                    }
-                    else {
-                        void trigger();
-                    }
-                }, testId: `render-list-toolbar-action-${action.id}`, children: showIconOnly ? null : action.label }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: trigger, testId: `render-list-toolbar-action-${action.id}-dialog` }), errorText !== null && (_jsx(Banner, { variant: "error", testId: `render-list-toolbar-action-${action.id}-error`, children: errorText }))] }));
-}
 function isPlainRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
 }

package/dist/current-user.d.ts

@@ -7,6 +7,8 @@ export type CurrentUser = {
     readonly displayName: string;
     /** Effective IANA zone of the user (override, else tenant). */
     readonly timeZone?: string;
+    /** Active tenant; scopes per-user browser state such as remembered list views. */
+    readonly tenantId?: string;
 };
 export declare function CurrentUserProvider({ user, children, }: {
     readonly user: CurrentUser | undefined;

package/dist/data-table-aggregate-types.d.ts

@@ -0,0 +1,47 @@
+import type { AggregateKey } from "@cosmicdrift/kumiko-types/aggregate-types";
+import type { ListAggregateMeasureKind, ListAggregateValue } from "@cosmicdrift/kumiko-types/list-aggregate-types";
+/** One server-computed measure; a money measure holds one minor-unit value per currency. */
+export type DataTableMeasure = {
+    readonly field: string;
+    readonly kind: ListAggregateMeasureKind;
+    readonly value: ListAggregateValue;
+};
+export type DataTableServerGroup = {
+    /** `relatedListGroupKey` of the group value; stable across reloads. */
+    readonly key: string;
+    /** Raw group value, rendered through the group column when `label` is absent. */
+    readonly value: AggregateKey;
+    readonly label?: string;
+    /** Rows of the whole group on the server, not the loaded ones. */
+    readonly count: number;
+    readonly measures: readonly DataTableMeasure[];
+    readonly collapsed: boolean;
+    /** How many of the table's `rows` belong to this group; rows arrive in group order. */
+    readonly rowCount: number;
+    readonly hasMore: boolean;
+    readonly loading: boolean;
+};
+/** Server-side grouping: groups are the load unit, each loads its own rows. */
+export type DataTableServerGroups = {
+    readonly field: string;
+    readonly groups: readonly DataTableServerGroup[];
+    readonly totalCount: number;
+    readonly onToggle: (key: string) => void;
+    readonly onLoadMore: (key: string) => void;
+    readonly onHeaderVisible: (key: string) => void;
+};
+export type DataTableTotals = {
+    readonly measures: readonly DataTableMeasure[];
+};
+/** `truncated`: more groups than the server answers. `searchTruncated`: the search hit its cap. */
+export type DataTableListNotice = "truncated" | "searchTruncated";
+export type DataTableRangeBound = "min" | "max";
+/** "From/to" inputs on a number field. Values are the typed strings, "" = open bound. */
+export type DataTableRangeFacet = {
+    readonly field: string;
+    readonly label: string;
+    readonly min: string;
+    readonly max: string;
+    /** Shown after the inputs, e.g. the money field's currency. */
+    readonly unit?: string;
+};

package/dist/data-table-aggregate-types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table-bulk-types.d.ts

@@ -0,0 +1,27 @@
+import type { IconKey } from "@cosmicdrift/kumiko-types/nav-icon";
+import type { ListRowViewModel } from "./headless/index.ts";
+export type BulkRowOutcome = {
+    readonly kind: "succeeded";
+} | {
+    readonly kind: "failed";
+    readonly message: string;
+};
+export type DataTableBulkAction = {
+    readonly id: string;
+    /** Translated label of the underlying row action. */
+    readonly label: string;
+    readonly style?: "primary" | "secondary" | "danger";
+    readonly icon?: IconKey;
+    /** Present: one confirm dialog for the whole selection, with this text for `count` rows. */
+    readonly confirmText?: (count: number) => string;
+    readonly confirmLabel?: string;
+    /** False: the row action's `visible` hides it for this row; the run skips the row. */
+    readonly appliesTo: (row: ListRowViewModel) => boolean;
+    /** Exactly one server write for one row. Never throws for a rejected write. */
+    readonly writeRow: (row: ListRowViewModel) => Promise<BulkRowOutcome>;
+};
+export type DataTableBulk = {
+    readonly actions: readonly DataTableBulkAction[];
+    /** Reloads the list once after a run. */
+    readonly reload: () => Promise<void>;
+};

package/dist/data-table-bulk-types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table-facet-types.d.ts

@@ -0,0 +1,36 @@
+export type DataTableFacet = {
+    /** Entity-Feldname (= URL-State-Key + payload.filters[].field). */
+    readonly field: string;
+    /** Translated Button-Label ("Status", "Active"). */
+    readonly label: string;
+    /** Selectable values with display labels. `value` is the raw filter value
+     *  (a select option or `"true"`/`"false"`), transported as a string. */
+    readonly options: readonly {
+        readonly value: string;
+        readonly label: string;
+    }[];
+    /** Present: render the facet as a row of single-choice toggle chips instead
+     *  of a dropdown. A chip is pressed while the selection equals its values. */
+    readonly chips?: readonly DataTableFacetChip[];
+    /** Chips only: show each chip's `count` next to its label. */
+    readonly showCounts?: boolean;
+    /** Chips only: hide chips whose `count` is 0 (unless pressed). */
+    readonly hideEmpty?: boolean;
+};
+export type DataTableFacetChip = {
+    readonly id: string;
+    /** Translated chip label. */
+    readonly label: string;
+    /** Selection a click sets; `[]` clears the facet. */
+    readonly values: readonly string[];
+    /** Matching row count, undefined while unknown. */
+    readonly count?: number;
+};
+export type DataTableDateRangeFacet = {
+    /** The facet's namespace (its date field) — a key, not a filter value. */
+    readonly field: string;
+    /** Translated label ("When"). */
+    readonly label: string;
+    readonly from: string;
+    readonly to: string;
+};

package/dist/data-table-facet-types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table-view-types.d.ts

@@ -0,0 +1,73 @@
+import type { ListColumnPin, ListTableDensity } from "@cosmicdrift/kumiko-types/screen";
+import type { DataTableListNotice, DataTableRangeBound, DataTableRangeFacet, DataTableServerGroups, DataTableTotals } from "./data-table-aggregate-types.ts";
+export type DataTableDensity = ListTableDensity;
+export type DataTableColumnPin = ListColumnPin;
+export type DataTableColumnPins = Readonly<Record<string, DataTableColumnPin>>;
+export type DataTableColumnWidths = Readonly<Record<string, number>>;
+/** One column in the view menu. The label comes from the DataTable's own
+ *  column of the same `field`. */
+export type DataTableViewColumn = {
+    readonly field: string;
+    readonly visible: boolean;
+};
+export type DataTableViewOptions = {
+    /** Present: the view menu has a column section (visibility + order). The
+     *  order lists every column; hidden ones stay in the list. */
+    readonly columns?: readonly DataTableViewColumn[];
+    readonly onColumnsChange?: (next: readonly DataTableViewColumn[]) => void;
+    readonly density: DataTableDensity;
+    /** Present: the view menu has a density section. */
+    readonly onDensityChange?: (next: DataTableDensity) => void;
+    /** Present: pinning is on and the view menu has a pin section. Unpinned columns have no entry. */
+    readonly pins?: DataTableColumnPins;
+    readonly onPinsChange?: (next: DataTableColumnPins) => void;
+    /** Present: resizing is on; the table switches to table-layout fixed. Every column has an entry (px). */
+    readonly widths?: DataTableColumnWidths;
+    /** Present together with `widths`; every column has an entry (px). */
+    readonly minWidths?: DataTableColumnWidths;
+    readonly onWidthChange?: (field: string, width: number) => void;
+    readonly keyboardNavigation?: boolean;
+    /** Present: the view menu has a "group by" section. */
+    readonly groupBy?: DataTableGroupByChoice;
+    /** False once columns, order or density differ from the screen default. */
+    readonly viewIsDefault: boolean;
+    readonly onViewReset: () => void;
+};
+export type DataTableGroupByChoice = {
+    /** Active group field, "" = not grouped. */
+    readonly value: string;
+    readonly fields: readonly string[];
+    readonly onChange: (next: string) => void;
+};
+export type DataTableResetAll = {
+    /** True while something deviates from the screen default. */
+    readonly active: boolean;
+    readonly onReset: () => void;
+};
+/** What the export button sends to POST /api/export/xlsx (xlsx is the only format). */
+export type DataTableExport = {
+    /** Screen QN `<feature>:screen:<id>`. */
+    readonly screen: string;
+    readonly screenShortId: string;
+    /** The list payload without paging keys; the server reads the whole filtered list. */
+    readonly payload: Readonly<Record<string, unknown>>;
+    /** Visible column ids in display order. */
+    readonly columns: readonly string[];
+};
+/** The DataTable props a screen's `table` block feeds. */
+export type DataTableTableBlock = {
+    /** View menu (column picker, density); absent = no menu. */
+    readonly view?: DataTableViewOptions;
+    /** Replaces the facet reset with one that also covers sort, search and page size. */
+    readonly resetAll?: DataTableResetAll;
+    /** Present: the toolbar has an export button (web only). */
+    readonly exportList?: DataTableExport;
+    /** Present: the rows are grouped on the server; replaces pager and infinite scroll. */
+    readonly serverGroups?: DataTableServerGroups;
+    /** Present: a footer row with the server-computed totals of the filtered list. */
+    readonly totals?: DataTableTotals;
+    /** Present: the toolbar says the answer is incomplete and asks to narrow the list. */
+    readonly notice?: DataTableListNotice;
+    readonly rangeFacets?: readonly DataTableRangeFacet[];
+    readonly onRangeChange?: (field: string, bound: DataTableRangeBound, value: string) => void;
+};

package/dist/data-table-view-types.js

@@ -0,0 +1 @@
+export {};

package/dist/headless/view-model/edit.js

@@ -56,6 +56,7 @@ function wasEmptiedByWriteExclusion(declaredFieldSpecs, remainingFields) {
 export function computeRelatedListSectionViewModel(sectionSpec, translate) {
     return {
         kind: "relatedList",
+        ...(sectionSpec.id !== undefined && { id: sectionSpec.id }),
         title: translate(sectionSpec.title),
         query: sectionSpec.query,
         ...(sectionSpec.parentParam !== undefined && { parentParam: sectionSpec.parentParam }),
@@ -67,13 +68,14 @@ export function computeRelatedListSectionViewModel(sectionSpec, translate) {
         }),
         ...(sectionSpec.itemNoun !== undefined && { itemNoun: sectionSpec.itemNoun }),
         ...(sectionSpec.pageSize !== undefined && { pageSize: sectionSpec.pageSize }),
+        ...(sectionSpec.table !== undefined && { table: sectionSpec.table }),
         ...(sectionSpec.defaultSort !== undefined && { defaultSort: sectionSpec.defaultSort }),
         ...(sectionSpec.searchable !== undefined && { searchable: sectionSpec.searchable }),
         ...(sectionSpec.facets !== undefined && { facets: sectionSpec.facets }),
         ...(sectionSpec.rowClick !== undefined && { rowClick: sectionSpec.rowClick }),
         ...(sectionSpec.rowActions !== undefined && { rowActions: sectionSpec.rowActions }),
         ...(sectionSpec.rowActionMode !== undefined && { rowActionMode: sectionSpec.rowActionMode }),
-        ...(sectionSpec.groupBy !== undefined && { groupBy: sectionSpec.groupBy }),
+        ...(sectionSpec.bulkActions !== undefined && { bulkActions: sectionSpec.bulkActions }),
         ...(sectionSpec.rowTone !== undefined && { rowTone: sectionSpec.rowTone }),
         ...(sectionSpec.toolbarActions !== undefined && { toolbarActions: sectionSpec.toolbarActions }),
         ...(sectionSpec.actions !== undefined && { actions: sectionSpec.actions }),

package/dist/headless/view-model/types.d.ts

@@ -1,4 +1,4 @@
-import type { EditFieldSpec, EditSectionSpec, FieldAffix, FieldFillAction, FieldIconKey, FieldRenderer, IconKey, ListColumnSpec, ListFacetSpec, ListSortSpec, OptionsQueryPayload, PlatformComponent, RelatedListGroupBy, RelatedListRowTone, RelatedListToolbarAction, RowAction, RowActionMode, ScreenSlots, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EditFieldSpec, EditSectionSpec, FieldAffix, FieldFillAction, FieldIconKey, FieldRenderer, IconKey, ListBulkAction, ListColumnSpec, ListFacetSpec, ListSortSpec, ListTableOptions, OptionsQueryPayload, PlatformComponent, RelatedListRowTone, RelatedListToolbarAction, RowAction, RowActionMode, ScreenSlots, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 export type RuntimeRenderer = (value: unknown, row?: Readonly<Record<string, unknown>>) => string;
 /** Where a cell's text links to. `href` comes from NavApi.hrefFor (new-tab and
  *  copy-link work); `onPress` is the in-app navigation for a plain click. */
@@ -333,6 +333,7 @@ export type EditExtensionSectionViewModel = {
 };
 export type EditRelatedListSectionViewModel = {
     readonly kind: "relatedList";
+    readonly id?: string;
     readonly title: string;
     readonly query: string;
     readonly parentParam?: string;
@@ -345,6 +346,7 @@ export type EditRelatedListSectionViewModel = {
     /** Untranslated plural-forms key, resolved with the row count by the list footer. */
     readonly itemNoun?: string;
     readonly pageSize?: number;
+    readonly table?: ListTableOptions;
     readonly defaultSort?: ListSortSpec;
     readonly searchable?: boolean;
     readonly facets?: readonly ListFacetSpec[];
@@ -354,7 +356,7 @@ export type EditRelatedListSectionViewModel = {
     };
     readonly rowActions?: readonly RowAction[];
     readonly rowActionMode?: RowActionMode;
-    readonly groupBy?: RelatedListGroupBy;
+    readonly bulkActions?: readonly ListBulkAction[];
     readonly rowTone?: RelatedListRowTone;
     readonly toolbarActions?: readonly RelatedListToolbarAction[];
     /** From `EditRelatedListSection.actions` — rendered in the

package/dist/hooks/list-column-layout.d.ts

@@ -0,0 +1,19 @@
+import type { DataTableColumnPin, DataTableColumnPins, DataTableColumnWidths } from "../data-table-view-types.ts";
+export declare const DEFAULT_COLUMN_WIDTH_PX = 160;
+export declare const DEFAULT_MIN_COLUMN_WIDTH_PX = 64;
+/** Upper bound so a tampered stored width cannot blow the table up. */
+export declare const MAX_COLUMN_WIDTH_PX = 2000;
+type LayoutSchemaColumn = {
+    readonly field: string;
+    readonly pinned?: DataTableColumnPin;
+    readonly width?: number;
+    readonly minWidth?: number;
+};
+export declare function defaultPins(schema: readonly LayoutSchemaColumn[]): DataTableColumnPins;
+export declare function minWidthsOf(schema: readonly LayoutSchemaColumn[]): DataTableColumnWidths;
+export declare function clampWidth(width: number, min: number): number;
+export declare function defaultWidths(schema: readonly LayoutSchemaColumn[], minWidths: DataTableColumnWidths): DataTableColumnWidths;
+/** A saved width wins per field; a column the saved view has never seen keeps its default. */
+export declare function mergeSavedWidths(defaults: DataTableColumnWidths, saved: Readonly<Record<string, number>>, minWidths: DataTableColumnWidths): DataTableColumnWidths;
+export declare function sameRecord<T>(a: Readonly<Record<string, T>>, b: Readonly<Record<string, T>>): boolean;
+export {};

package/dist/hooks/list-column-layout.js

@@ -0,0 +1,36 @@
+export const DEFAULT_COLUMN_WIDTH_PX = 160;
+export const DEFAULT_MIN_COLUMN_WIDTH_PX = 64;
+/** Upper bound so a tampered stored width cannot blow the table up. */
+export const MAX_COLUMN_WIDTH_PX = 2000;
+export function defaultPins(schema) {
+    const pins = {};
+    for (const column of schema) {
+        if (column.pinned !== undefined)
+            pins[column.field] = column.pinned;
+    }
+    return pins;
+}
+export function minWidthsOf(schema) {
+    return Object.fromEntries(schema.map((column) => [column.field, column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH_PX]));
+}
+export function clampWidth(width, min) {
+    return Math.min(MAX_COLUMN_WIDTH_PX, Math.max(min, Math.round(width)));
+}
+export function defaultWidths(schema, minWidths) {
+    return Object.fromEntries(schema.map((column) => [
+        column.field,
+        clampWidth(column.width ?? DEFAULT_COLUMN_WIDTH_PX, minWidths[column.field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX),
+    ]));
+}
+/** A saved width wins per field; a column the saved view has never seen keeps its default. */
+export function mergeSavedWidths(defaults, saved, minWidths) {
+    return Object.fromEntries(Object.entries(defaults).map(([field, fallback]) => {
+        const savedWidth = saved[field];
+        const min = minWidths[field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX;
+        return [field, savedWidth === undefined ? fallback : clampWidth(savedWidth, min)];
+    }));
+}
+export function sameRecord(a, b) {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}

package/dist/hooks/list-group-pages.d.ts

@@ -0,0 +1,26 @@
+import type { AggregateKey } from "@cosmicdrift/kumiko-types/aggregate-types";
+/** How a group pages through its rows: offset for `pagination: "pages"`, cursor for `"infinite"`. */
+export type ListGroupPaging = "offset" | "cursor";
+export type ListGroupPageResult = {
+    readonly rows: readonly Readonly<Record<string, unknown>>[];
+    readonly nextCursor: string | null;
+    readonly loading: boolean;
+};
+export type ListGroupPageRequest = {
+    readonly pageKey: string;
+    readonly payload: Readonly<Record<string, unknown>>;
+};
+/** The list payload as the aggregate sees it: filters, search and screen filter, no paging. */
+export declare function withoutListPaging(payload: Readonly<Record<string, unknown>>): Record<string, unknown>;
+export declare function groupPageKey(groupKey: string, pageIndex: number): string;
+export declare function groupPagePayload(args: {
+    readonly base: Readonly<Record<string, unknown>>;
+    readonly groupField: string;
+    readonly groupValue: AggregateKey;
+    readonly pageSize: number;
+    readonly pageIndex: number;
+    readonly paging: ListGroupPaging;
+    readonly cursor: string | undefined;
+}): Record<string, unknown>;
+/** Loaded pages of one group in order, up to the first page that has not answered yet. */
+export declare function loadedGroupPages(results: ReadonlyMap<string, ListGroupPageResult>, groupKey: string, requestedPages: number): ListGroupPageResult[];

package/dist/hooks/list-group-pages.js

@@ -0,0 +1,37 @@
+const PAGING_KEYS = ["limit", "offset", "cursor", "totalCount"];
+/** The list payload as the aggregate sees it: filters, search and screen filter, no paging. */
+export function withoutListPaging(payload) {
+    const kept = { ...payload };
+    for (const key of PAGING_KEYS)
+        delete kept[key];
+    return kept;
+}
+export function groupPageKey(groupKey, pageIndex) {
+    return `${groupKey}#${pageIndex}`;
+}
+function existingFilters(base) {
+    const filters = base["filters"];
+    return Array.isArray(filters) ? filters : [];
+}
+export function groupPagePayload(args) {
+    const { base, groupField, groupValue, pageSize, pageIndex, paging, cursor } = args;
+    const offset = pageIndex * pageSize;
+    return {
+        ...base,
+        filters: [...existingFilters(base), { field: groupField, op: "eq", value: groupValue }],
+        limit: pageSize,
+        ...(paging === "offset" && offset > 0 && { offset }),
+        ...(paging === "cursor" && cursor !== undefined && { cursor }),
+    };
+}
+/** Loaded pages of one group in order, up to the first page that has not answered yet. */
+export function loadedGroupPages(results, groupKey, requestedPages) {
+    const pages = [];
+    for (let pageIndex = 0; pageIndex < requestedPages; pageIndex++) {
+        const page = results.get(groupPageKey(groupKey, pageIndex));
+        if (page === undefined)
+            break;
+        pages.push(page);
+    }
+    return pages;
+}

package/dist/hooks/list-reset.d.ts

@@ -0,0 +1,8 @@
+type UrlParams = Readonly<Record<string, string | undefined>>;
+/** Exact `${screenId}.` prefix: `orders` must not match `orders-archive.q`. */
+export declare function listParamKeys(params: UrlParams, screenId: string): string[];
+/** The page alone is navigation, not a deviation from the default view. */
+export declare function isListStateAtDefault(params: UrlParams, screenId: string): boolean;
+/** Nulling every list key lets defaultSort/defaultFilters apply again, and drops the `~` "no filter" markers. */
+export declare function listResetUpdates(params: UrlParams, screenId: string): Record<string, null>;
+export {};

package/dist/hooks/list-reset.js

@@ -0,0 +1,15 @@
+const PAGE_SUFFIX = "page";
+/** Exact `${screenId}.` prefix: `orders` must not match `orders-archive.q`. */
+export function listParamKeys(params, screenId) {
+    const prefix = `${screenId}.`;
+    return Object.keys(params).filter((key) => key.startsWith(prefix));
+}
+/** The page alone is navigation, not a deviation from the default view. */
+export function isListStateAtDefault(params, screenId) {
+    const pageKey = `${screenId}.${PAGE_SUFFIX}`;
+    return listParamKeys(params, screenId).every((key) => key === pageKey);
+}
+/** Nulling every list key lets defaultSort/defaultFilters apply again, and drops the `~` "no filter" markers. */
+export function listResetUpdates(params, screenId) {
+    return Object.fromEntries(listParamKeys(params, screenId).map((key) => [key, null]));
+}