@cosmicdrift/kumiko-renderer 0.387.0 → 0.389.0

package/dist/app/entity-list-screen.js

@@ -1,16 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { evalFieldCondition, parseRefTarget } from "@cosmicdrift/kumiko-framework/ui-types";
+import { evalFieldCondition } from "@cosmicdrift/kumiko-framework/ui-types";
 import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ListGroupPageBridges } from "../components/list-group-page-bridges.js";
 import { RenderList } from "../components/render-list.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useIsEmbeddedScreen } from "../context/embedded-screen-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { rendererWarn } from "../dev-console.js";
-import { computeRelatedListSectionViewModel, fieldLabelKey, fieldOptionLabelKey, } from "../headless/index.js";
+import { computeRelatedListSectionViewModel } from "../headless/index.js";
 import { useListUrlState } from "../hooks/use-list-url-state.js";
-import { useQuery } from "../hooks/use-query.js";
 import { useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
 import { screenFillsHeight } from "../screen-fills-height.js";
@@ -18,73 +18,21 @@ import { DrawerHost, useDrawerAction } from "./action-form-body.js";
 import { useAppFeatures } from "./app-features-context.js";
 import { useClientActionRuntime } from "./client-actions.js";
 import { EntityListExpandedRow } from "./entity-list-expanded-row.js";
+import { resolveEntityFacetSpecs } from "./entity-list-facet-specs.js";
 import { FacetCountBridges } from "./facet-count-bridge.js";
+import { useListBulk } from "./list-bulk-actions.js";
 import { isDefaultFilterActive, isListNarrowed, useListEmptyContent, } from "./list-empty-content.js";
 import { buildEntityFilterFacets, buildFacetCountRequests, buildFilterPayload, mergeReferenceFacetOptions, normalizeDefaultFilters, } from "./list-facets.js";
 import { useNav } from "./nav.js";
 import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
 import { ReferenceFacetBridges } from "./reference-facet-bridge.js";
 import { navigateWithReturnTo, useReturnHost } from "./return-to.js";
-import { buildClientActionRowAction, buildDefaultEditRowAction, buildDrawerRowAction, buildProjectionToolbarActions, evalRowExtractor, findRowClickAction, navigateActionSearchParams, refetchAfterWrite, runDrawerRowAction, } from "./row-actions.js";
+import { buildClientActionRowAction, buildDefaultEditRowAction, buildDrawerRowAction, buildProjectionToolbarActions, buildWriteHandlerRowAction, findRowClickAction, navigateActionSearchParams, runDrawerRowAction, } from "./row-actions.js";
 import { findEditScreenFor } from "./screen-access.js";
-import { buildListQueryPayload, entityQueryCommand, isEntityEditScreenOfEntity, pageSizeOptionsFor, useNavigateToCreateFor, } from "./screen-shared.js";
-import { dispatcherErrorText, WriteFailedError } from "./write-failed-error.js";
-// entityList adapter — one DataTableFacet per filterable select/boolean
-// entity field, labels via the standard field/option i18n convention.
-function resolveEntityFacetSpecs(fields, featureName, entityName, translate) {
-    const out = [];
-    for (const [field, rawDef] of Object.entries(fields)) {
-        // entity.fields is weakly typed at the renderer layer (Record<string,
-        // unknown>, deserialized from the schema); boundary cast like buildInitialValues.
-        const def = rawDef;
-        if (def.filterable !== true)
-            continue;
-        const label = translate(fieldLabelKey(featureName, entityName, field));
-        if (def.type === "select" && Array.isArray(def.options)) {
-            out.push({
-                field,
-                type: "select",
-                label,
-                options: def.options.map((value) => ({
-                    value,
-                    label: translate(fieldOptionLabelKey(featureName, entityName, field, value)),
-                })),
-            });
-        }
-        else if (def.type === "boolean") {
-            out.push({
-                field,
-                type: "boolean",
-                label,
-                options: [
-                    {
-                        value: "true",
-                        label: translate(fieldOptionLabelKey(featureName, entityName, field, "true")),
-                    },
-                    {
-                        value: "false",
-                        label: translate(fieldOptionLabelKey(featureName, entityName, field, "false")),
-                    },
-                ],
-            });
-        }
-        else if (def.type === "reference" && def.entity !== undefined) {
-            const target = parseRefTarget(def.entity, featureName);
-            out.push({
-                field,
-                type: "reference",
-                label,
-                options: [],
-                reference: {
-                    refEntity: target.entityName,
-                    refFeature: target.featureName,
-                    labelField: def.labelField ?? "id",
-                },
-            });
-        }
-    }
-    return out;
-}
+import { buildListQueryPayload, entityQueryCommand, isEntityEditScreenOfEntity, useNavigateToCreateFor, } from "./screen-shared.js";
+import { useEntityRangeFacets } from "./use-entity-range-facets.js";
+import { listPager, useScreenListRows } from "./use-screen-list-rows.js";
+import { useScreenListTable } from "./use-screen-list-table.js";
 export function EntityListScreen({ schema, screen, translate, onRowClick, }) {
     const { Banner, Text } = usePrimitives();
     const entity = schema.entities[screen.entity];
@@ -120,29 +68,17 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     const paginationMode = screen.pagination ?? "pages";
     const usePager = paginationMode === "pages";
     const useInfinite = paginationMode === "infinite";
-    // Infinite scroll: local state accumulates rows across several useQuery
-    // calls (instead of replacing them like the pager). The cursor changes when
-    // the user reaches the bottom sentinel; on a sort/q change everything is
-    // reset, since the insert order of the accumulated rows would otherwise be
-    // inconsistent with the new sorting.
-    const [accumulated, setAccumulated] = useState([]);
-    const [cursor, setCursor] = useState(undefined);
-    const [hasMore, setHasMore] = useState(true);
-    // Ref so the useEffect cleanup does not see stale state.
-    const sortQRef = useRef("");
-    const sortQKey = `${urlState.q}|${effectiveSort?.field ?? ""}|${effectiveSort?.dir ?? ""}`;
-    // Reset rows + cursor on a sort/q change, before the next useQuery so the
-    // reload starts with cursor=undefined.
-    useEffect(() => {
-        if (!useInfinite)
-            return;
-        if (sortQRef.current === sortQKey)
-            return;
-        sortQRef.current = sortQKey;
-        setAccumulated([]);
-        setCursor(undefined);
-        setHasMore(true);
-    }, [useInfinite, sortQKey]);
+    // Hook order: ALL hooks before the early return for loading/error,
+    // otherwise the hook slots collide between renders.
+    const t = useTranslation();
+    const effectiveTranslate = translate ?? t;
+    const range = useEntityRangeFacets({
+        fields: entity.fields,
+        screen,
+        featureName,
+        translate: effectiveTranslate,
+        urlState,
+    });
     // User-selected faceted filters from the URL state -> payload.filters.
     // typeOf reads the field type straight from entity.fields (not gated on
     // filterable, deliberately permissive; see the buildFilterPayload doc).
@@ -162,7 +98,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
             usePager,
             page: urlState.page,
             useInfinite,
-            cursor,
+            cursor: undefined,
         });
         // Screen filter (tier 2.7c), declared by the author on the schema and
         // independent of the user's q search. Several buckets of the same entity
@@ -171,9 +107,9 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         if (screen.filter !== undefined) {
             payload["filter"] = screen.filter;
         }
-        if (filterPayload.length > 0) {
-            payload["filters"] = filterPayload;
-        }
+        const filters = [...filterPayload, ...range.rangeFilters];
+        if (filters.length > 0)
+            payload["filters"] = filters;
         return payload;
     }, [
         limit,
@@ -181,82 +117,51 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         effectiveSort,
         screen.filter,
         filterPayload,
+        range.rangeFilters,
         usePager,
         urlState.page,
         useInfinite,
-        cursor,
     ]);
-    const rowsQuery = useQuery(queryType, queryPayload, { live: true });
     // Facet counts come from their own queries, which a write leaves untouched.
     const [facetCountRefreshNonce, setFacetCountRefreshNonce] = useState(0);
     const refreshFacetCounts = useCallback(() => setFacetCountRefreshNonce((n) => n + 1), []);
-    const refreshRowsAfterWrite = useCallback(async () => {
-        refreshFacetCounts();
-        if (useInfinite) {
-            setAccumulated([]);
-            setCursor(undefined);
-            setHasMore(true);
-            return;
-        }
-        await refetchAfterWrite(rowsQuery.refetch);
-    }, [useInfinite, rowsQuery.refetch, refreshFacetCounts]);
-    // Infinite scroll: on every successful result append the rows and derive
-    // hasMore from nextCursor. Live updates (postgres NOTIFY) and initial loads
-    // both pass through here; the useEffect dependency array pins the dedup to
-    // the last processed data pointer.
-    const lastDataRef = useRef(null);
-    useEffect(() => {
-        if (!useInfinite)
-            return;
-        const data = rowsQuery.data;
-        if (data === null)
-            return;
-        if (data === lastDataRef.current)
-            return;
-        lastDataRef.current = data;
-        setAccumulated((prev) => {
-            // When cursor is undefined this is the first page after a sort/q change:
-            // replace everything instead of appending. Otherwise dedupe on id in case
-            // live updates bring in an entry on the next page that was already appended.
-            if (cursor === undefined)
-                return data.rows;
-            const seen = new Set(prev.map((r) => r["id"]));
-            const fresh = data.rows.filter((r) => !seen.has(r["id"]));
-            return [...prev, ...fresh];
-        });
-        setHasMore(data.nextCursor !== null);
-    }, [rowsQuery.data, useInfinite, cursor]);
-    const loadMore = useCallback(() => {
-        if (!useInfinite)
-            return;
-        if (rowsQuery.loading)
-            return;
-        const data = rowsQuery.data;
-        if (data?.nextCursor === undefined || data.nextCursor === null)
-            return;
-        setCursor(data.nextCursor);
-    }, [useInfinite, rowsQuery.loading, rowsQuery.data]);
-    // RowActions: schema form (handler QN + i18n key) -> resolved form
-    // (dispatcher call + translated strings). dispatcher.write knows the user
-    // internally (JWT cookie). The schema may contain raw strings as well as
-    // i18n keys; translate() returns the key when the bundle does not know it
-    // (convention everywhere in the renderer).
-    // Hook order: ALL hooks before the early return for loading/error,
-    // otherwise the hook slots collide between renders.
-    const t = useTranslation();
-    const effectiveTranslate = translate ?? t;
     // Faceted filter: one dropdown per filterable select/boolean/reference field.
     // Labels + select option labels use the same i18n convention as the column
     // headers (fieldLabelKey / :option:<value>); reference fields load their
     // options asynchronously through ReferenceFacetBridges.
     const entityFacetSpecs = useMemo(() => resolveEntityFacetSpecs(entity.fields, featureName, screen.entity, effectiveTranslate), [entity.fields, featureName, screen.entity, effectiveTranslate]);
+    const facetFilterFields = useMemo(() => [...entityFacetSpecs.map((spec) => spec.field), ...range.rangeFields], [entityFacetSpecs, range.rangeFields]);
+    const listTable = useScreenListTable({
+        screen,
+        featureName,
+        payload: queryPayload,
+        filterFields: facetFilterFields,
+        queryType,
+        pageSize: limit,
+        paging: useInfinite ? "cursor" : "offset",
+        translate: effectiveTranslate,
+    });
+    const listRows = useScreenListRows({
+        queryType,
+        payload: queryPayload,
+        infinite: useInfinite,
+        aggregates: listTable.aggregates,
+    });
+    const { refreshAfterWrite: refreshListAfterWrite } = listRows;
+    const refreshRowsAfterWrite = useCallback(async () => {
+        refreshFacetCounts();
+        await refreshListAfterWrite();
+    }, [refreshFacetCounts, refreshListAfterWrite]);
     const [entityReferenceFacetOptions, setEntityReferenceFacetOptions] = useState({});
     const handleEntityFacetOptions = useCallback((field, options) => setEntityReferenceFacetOptions((prev) => prev[field] === options ? prev : { ...prev, [field]: options }), []);
     const [facetCounts, setFacetCounts] = useState({});
     const handleFacetCount = useCallback((key, count) => setFacetCounts((prev) => (prev[key] === count ? prev : { ...prev, [key]: count })), []);
     const filterFacets = useMemo(() => buildEntityFilterFacets(mergeReferenceFacetOptions(entityFacetSpecs, entityReferenceFacetOptions), screen.facets, effectiveTranslate, facetCounts), [entityFacetSpecs, entityReferenceFacetOptions, screen.facets, effectiveTranslate, facetCounts]);
     const facetCountQueries = useMemo(() => buildFacetCountRequests(entityFacetSpecs, screen.facets, effectiveTranslate).map((request) => {
-        const filters = buildFilterPayload({ ...urlState.filters, [request.field]: request.values }, (field) => entity.fields[field]?.type);
+        const filters = [
+            ...buildFilterPayload({ ...urlState.filters, [request.field]: request.values }, (field) => entity.fields[field]?.type),
+            ...range.rangeFilters,
+        ];
         return {
             key: request.key,
             payload: {
@@ -275,6 +180,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         urlState.filters,
         urlState.q,
         entity.fields,
+        range.rangeFilters,
     ]);
     // Soft dispatcher: in tests that mount without a DispatcherProvider,
     // rowActions stays undefined instead of crashing. Real apps have the
@@ -371,35 +277,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
             }
             if (dispatcher === undefined)
                 return null;
-            const writeAction = action;
-            const writeActionVisible = writeAction.visible;
-            return {
-                id: writeAction.id,
-                label: effectiveTranslate(writeAction.label),
-                style: writeAction.style,
-                icon: resolveActionIcon(writeAction.id, writeAction.icon),
-                confirm: writeAction.confirm !== undefined ? effectiveTranslate(writeAction.confirm) : undefined,
-                confirmLabel: writeAction.confirmLabel !== undefined
-                    ? effectiveTranslate(writeAction.confirmLabel)
-                    : undefined,
-                onTrigger: async (row) => {
-                    const buildPayload = writeAction.payload;
-                    const payload = buildPayload !== undefined
-                        ? evalRowExtractor(buildPayload, row.values)
-                        : { id: row.values["id"] };
-                    const result = await dispatcher.write(writeAction.handler, payload);
-                    // write() does not throw: a failure result MUST become an error here,
-                    // otherwise the confirm dialog closes silently and the user sees "nothing
-                    // happened" (prod bug 2026-06-07).
-                    if (!result.isSuccess) {
-                        throw new WriteFailedError(result.error, dispatcherErrorText(result.error, effectiveTranslate));
-                    }
-                    await refreshRowsAfterWrite();
-                },
-                isVisible: writeActionVisible !== undefined
-                    ? (row) => evalFieldCondition(writeActionVisible, row.values)
-                    : undefined,
-            };
+            return buildWriteHandlerRowAction(action, effectiveTranslate, refreshRowsAfterWrite, dispatcher);
         })
             .filter((a) => a !== null);
     }, [
@@ -412,6 +290,13 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         refreshRowsAfterWrite,
         openDrawer,
     ]);
+    const bulk = useListBulk({
+        bulkActions: screen.bulkActions,
+        rowActions: screen.rowActions,
+        translate: effectiveTranslate,
+        dispatcher,
+        reload: refreshRowsAfterWrite,
+    });
     // ToolbarActions: Schema → Resolved-Form (analog rowActions), shared with
     // projectionList and relatedList sections via buildProjectionToolbarActions.
     const toolbarActions = useMemo(() => buildProjectionToolbarActions({
@@ -471,14 +356,14 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         refreshRowsAfterWrite,
         invalidateExpansions,
     ]);
-    if (rowsQuery.loading && rowsQuery.data === null) {
+    if (listRows.firstLoad) {
         return _jsx(QueryLoadingBanner, {});
     }
-    if (rowsQuery.error && rowsQuery.data === null) {
-        return (_jsx(QueryErrorBanner, { error: rowsQuery.error, translate: effectiveTranslate, onRetry: rowsQuery.refetch }));
+    if (listRows.error && !listRows.hasData) {
+        return (_jsx(QueryErrorBanner, { error: listRows.error, translate: effectiveTranslate, onRetry: listRows.retry }));
     }
     // A failed refetch keeps the last good data on screen.
-    const refetchErrorBanner = rowsQuery.error ? (_jsx(QueryErrorBanner, { error: rowsQuery.error, translate: effectiveTranslate, onRetry: rowsQuery.refetch })) : null;
+    const refetchErrorBanner = listRows.error ? (_jsx(QueryErrorBanner, { error: listRows.error, translate: effectiveTranslate, onRetry: listRows.retry })) : null;
     // RenderList's onRowClick is a 1-arg callback; KumikoScreen's
     // 2-arg shape (row, entityName) is the public surface — thread the
     // screen's entity through here so callers don't have to re-derive
@@ -507,41 +392,24 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     // Assemble pager props only for pagination="pages". The server total
     // arrives async; until it is there RenderList renders the table without a
     // pager (the pager has its own total>0 guard).
-    const total = rowsQuery.data?.total;
-    const pager = usePager && total !== undefined
-        ? {
-            page: urlState.page,
-            limit,
-            total,
-            onPageChange: urlState.setPage,
-            pageSizeOptions: pageSizeOptionsFor(limit),
-            onPageSizeChange: urlState.setPageSize,
-        }
-        : undefined;
-    // In infinite mode rows come from accumulated (collected across several
-    // useQuery calls), with pages/false from the current result.
-    const renderRows = useInfinite ? accumulated : (rowsQuery.data?.rows ?? []);
-    return (_jsxs(_Fragment, { children: [refetchErrorBanner, _jsx(ReferenceFacetBridges, { specs: entityFacetSpecs, onOptions: handleEntityFacetOptions }), _jsx(FacetCountBridges, { queryType: queryType, queries: facetCountQueries, onCount: handleFacetCount, refreshNonce: facetCountRefreshNonce }), _jsx(RenderList, { screen: screen, entity: entity, rows: renderRows, featureName: featureName, searchable: searchable, narrowed: isListNarrowed(urlState.q, urlState.filters, defaultFilters), defaultFilterActive: isDefaultFilterActive(urlState.q, urlState.filters, defaultFilters), ...(screen.description !== undefined && {
+    const pager = listPager({ usePager, page: listRows.page, limit, urlState });
+    return (_jsxs(_Fragment, { children: [refetchErrorBanner, _jsx(ListGroupPageBridges, { ...listTable.aggregates.groupPages }), _jsx(ReferenceFacetBridges, { specs: entityFacetSpecs, onOptions: handleEntityFacetOptions }), _jsx(FacetCountBridges, { queryType: queryType, queries: facetCountQueries, onCount: handleFacetCount, refreshNonce: facetCountRefreshNonce }), _jsx(RenderList, { screen: screen, entity: entity, rows: listRows.rows, featureName: featureName, searchable: searchable, narrowed: isListNarrowed(urlState.q, urlState.filters, defaultFilters), defaultFilterActive: isDefaultFilterActive(urlState.q, urlState.filters, defaultFilters), ...(screen.description !== undefined && {
                     description: effectiveTranslate(screen.description),
                 }), ...(emptyContent !== undefined && { emptyContent }), searchValue: urlState.q, onSearchChange: urlState.setQ, sort: effectiveSort, onSortChange: urlState.setSort, ...(isEmbeddedScreen
                     ? { screenPadding: false, chromeless: true }
-                    : { screenPadding: true }), ...(screenFillsHeight(screen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(screen.rowActionMode !== undefined && { rowActionMode: screen.rowActionMode }), ...(toolbarActions !== undefined && toolbarActions.length > 0 && { toolbarActions }), ...(useInfinite && {
-                    onReachEnd: loadMore,
-                    loadingMore: rowsQuery.loading,
-                    hasMore,
-                }), ...(onCreate !== undefined && { onCreate }), ...(translate !== undefined && { translate }), ...(wrappedOnRowClick !== undefined && { onRowClick: wrappedOnRowClick }), ...(filterFacets.length > 0 && {
-                    filterFacets,
+                    : { screenPadding: true }), ...(screenFillsHeight(screen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(screen.rowActionMode !== undefined && { rowActionMode: screen.rowActionMode }), ...(bulk !== undefined && { bulk }), ...(toolbarActions !== undefined && toolbarActions.length > 0 && { toolbarActions }), ...listRows.infinite, ...(onCreate !== undefined && { onCreate }), ...(translate !== undefined && { translate }), ...(wrappedOnRowClick !== undefined && { onRowClick: wrappedOnRowClick }), ...(filterFacets.length > 0 && { filterFacets, onFilterChange: urlState.setFilter }), ...(range.rangeFacets.length > 0 && {
+                    rangeFacets: range.rangeFacets,
+                    onRangeChange: range.onRangeChange,
+                }), ...((filterFacets.length > 0 || range.rangeFacets.length > 0) && {
                     filterValues: urlState.filters,
-                    onFilterChange: urlState.setFilter,
                     onFilterReset: urlState.clearFilters,
-                }), ...(expandableSection !== undefined && {
+                }), ...listTable.props, ...(expandableSection !== undefined && {
                     expandedRowIds,
                     onToggleRowExpanded: toggleRowExpanded,
                     renderExpandedRow,
                 }) }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     invalidateExpansions();
-                    refreshFacetCounts();
-                    void rowsQuery.refetch();
+                    void refreshRowsAfterWrite();
                 } })] }));
 }

package/dist/app/extension-sections.d.ts

@@ -43,10 +43,12 @@ export type ExtensionSectionProps = {
      *  `snapshot.errors` on the field instead of a collective message.
      *  Undefined outside entityEdit sections. */
     readonly validate?: () => boolean;
-    /** Marks the current host form values as saved after the section wrote
-     *  them itself, so a following navigation does not ask to discard.
+    /** Marks host form values as saved after the section wrote them itself, so
+     *  a following navigation does not ask to discard. Pass the field names the
+     *  section persisted: other host fields keep their unsaved state. Without
+     *  `fields`, every current host value counts as saved.
      *  Undefined outside entityEdit sections and the entityEdit footer slot. */
-    readonly markSaved?: () => void;
+    readonly markSaved?: (fields?: readonly string[]) => void;
     /** Whether the host form has unsaved changes. Only set in the entityEdit
      *  footer slot (`screen.slots.footer`); undefined in all other mounts. */
     readonly hasUnsavedChanges?: boolean;

package/dist/app/form-schema.js

@@ -29,7 +29,7 @@ function isRequiredValueMissing(spec, field, record, unchangedFrom) {
     // — they're fillable, so NO_WIDGET_FIELD_TYPES's "embedded"
     // entry must not exempt them. A statically-`required: true` field
     // with no bound widget is also caught at boot
-    // (validateNoWidgetRequiredField in boot-validator/screens.ts).
+    // (validateNoWidgetRequiredField in boot-validator/screens-forms.ts).
     if (NO_WIDGET_FIELD_TYPES.includes(field.type) && !isEmbeddedListField(field))
         return false;
     if (isPresent(record[spec.field]))

package/dist/app/header-actions-bar.js

@@ -18,7 +18,7 @@ export function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu,
     if (compact && PageHeader !== undefined) {
         const compactPrimary = compactHeaderPrimary(actions, preferredPrimaryId);
         const overflowActions = actions.filter((a) => a !== compactPrimary?.action);
-        return (_jsxs(_Fragment, { children: [compactPrimary !== undefined && (_jsx(RenderEditActionButton, { action: compactPrimary.action, Button: Button, Dialog: Dialog, iconOnly: compactPrimary.iconOnly, compactLabel: true, onError: onError }, compactPrimary.action.id)), overflowActions.length > 0 && (_jsx(PageHeader, { overflowItems: overflowActions.map(toMenuItem) })), pendingActionDialog] }));
+        return (_jsxs(_Fragment, { children: [compactPrimary !== undefined && (_jsx(RenderEditActionButton, { action: compactPrimary.action, Button: Button, Dialog: Dialog, iconOnly: compactPrimary.iconOnly, onError: onError }, compactPrimary.action.id)), overflowActions.length > 0 && (_jsx(PageHeader, { overflowItems: overflowActions.map(toMenuItem) })), pendingActionDialog] }));
     }
     const maxPlainButtons = collapseAfterPrimary ? 1 : 2;
     if (actions.length <= maxPlainButtons || ActionOverflowMenu === undefined) {

package/dist/app/kumiko-screen.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useQuery } from "../hooks/use-query.js";
 import { useTranslation } from "../i18n.js";
-import { PageHeaderSlotAvailableProvider, usePageHeaderSlotAvailable, } from "../page-header-slot.js";
+import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
 import { usePrimitives } from "../primitives.js";
 import { ActionFormBody } from "./action-form-body.js";
 import { ConfigEditBody } from "./config-edit-body.js";
@@ -11,6 +11,7 @@ import { useCustomScreenComponent } from "./custom-screens.js";
 import { useDashboardBody } from "./dashboard-body.js";
 import { EntityEditScreen } from "./entity-edit-screen.js";
 import { EntityListScreen } from "./entity-list-screen.js";
+import { LockedHeaderScope, StandInChainBoundary } from "./locked-screen-header.js";
 import { ProjectionDetailBody } from "./projection-detail-body.js";
 import { ProjectionListBody } from "./projection-list-body.js";
 import { lastSegment } from "./qn.js";
@@ -54,7 +55,7 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
         onCopyLink,
     });
     // Gate every entry (incl. direct URL): the body element is only mounted once the condition holds.
-    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: screenBody })) : (screenBody);
+    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: _jsx(StandInChainBoundary, { children: screenBody }) })) : (_jsx(StandInChainBoundary, { children: screenBody }));
     // An embedded screen (e.g. a dashboard panel) keeps its parent's host and
     // must not portal its page header into the shell that hosts the outer screen.
     if (outerHost !== undefined) {
@@ -78,16 +79,7 @@ function ScreenVisibilityGate({ featureName, visibleWhen, fallback, translate, c
     if (fallback !== undefined) {
         return _jsx(FallbackScreen, { featureName: featureName, fallback: fallback, translate: translate });
     }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, {}), _jsx(ScreenUnavailableBanner, {})] }));
-}
-// The route still names the locked screen; its breadcrumb must not label what stands in for it.
-// With a stand-in the header is labelled with that screen instead, none if it has no title.
-function LockedScreenHeader({ standInScreenId }) {
-    const { PageHeader } = usePrimitives();
-    const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
-    if (PageHeader === undefined || !pageHeaderSlotAvailable)
-        return null;
-    return standInScreenId !== undefined ? (_jsx(PageHeader, { hideBreadcrumb: true, breadcrumbScreenId: standInScreenId })) : (_jsx(PageHeader, { hideBreadcrumb: true }));
+    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
 }
 function ScreenUnavailableBanner() {
     const { Banner } = usePrimitives();
@@ -99,9 +91,9 @@ function FallbackScreen({ featureName, fallback, translate, }) {
     // Also undefined when the user lacks access to the fallback screen, which is
     // not a framework error.
     if (target === undefined) {
-        return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, {}), _jsx(ScreenUnavailableBanner, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, { standInScreenId: lastSegment(target.qn) }), _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate })] }));
+    return (_jsx(LockedHeaderScope, { standInScreenId: lastSegment(target.qn), children: _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate }) }));
 }
 function renderScreenBody({ schema, screen, translate, entityId, onRowClick, onCopyLink, }) {
     switch (screen.type) {

package/dist/app/list-bulk-actions.d.ts

@@ -0,0 +1,18 @@
+import type { ListBulkAction, RowAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DataTableBulk, DataTableBulkAction } from "../data-table-bulk-types.ts";
+import type { Dispatcher, Translate } from "../headless/index.ts";
+/** Resolves each bulk action against its writeHandler row action; one that resolves to nothing is dropped. */
+export declare function buildListBulkActions(options: {
+    readonly bulkActions: readonly ListBulkAction[];
+    readonly rowActions: readonly RowAction[] | undefined;
+    readonly translate: Translate;
+    readonly dispatcher: Dispatcher;
+}): readonly DataTableBulkAction[];
+/** DataTable `bulk` prop of a list screen; undefined without bulk actions or dispatcher. */
+export declare function useListBulk(options: {
+    readonly bulkActions: readonly ListBulkAction[] | undefined;
+    readonly rowActions: readonly RowAction[] | undefined;
+    readonly translate: Translate;
+    readonly dispatcher: Dispatcher | undefined;
+    readonly reload: () => Promise<unknown>;
+}): DataTableBulk | undefined;

package/dist/app/list-bulk-actions.js

@@ -0,0 +1,54 @@
+import { evalFieldCondition } from "@cosmicdrift/kumiko-framework/ui-types";
+import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
+import { useMemo } from "react";
+import { isWriteHandlerRowAction, refetchAfterWrite, writeRowAction } from "./row-actions.js";
+import { dispatcherErrorText } from "./write-failed-error.js";
+function asksForConfirm(bulk, rowAction) {
+    return (bulk.confirm !== undefined || rowAction.confirm !== undefined || rowAction.style === "danger");
+}
+function buildBulkAction(bulk, rowAction, translate, dispatcher) {
+    const label = translate(rowAction.label);
+    const visible = rowAction.visible;
+    const confirmKey = bulk.confirm ?? "kumiko.list.bulk.confirm";
+    return {
+        id: bulk.id,
+        label,
+        ...(rowAction.style !== undefined && { style: rowAction.style }),
+        icon: resolveActionIcon(rowAction.id, rowAction.icon),
+        ...(asksForConfirm(bulk, rowAction) && {
+            confirmText: (count) => translate(confirmKey, { count, action: label }),
+        }),
+        ...(rowAction.confirmLabel !== undefined && {
+            confirmLabel: translate(rowAction.confirmLabel),
+        }),
+        appliesTo: (row) => visible === undefined || evalFieldCondition(visible, row.values),
+        writeRow: async (row) => {
+            const result = await writeRowAction(rowAction, row, dispatcher);
+            return result.isSuccess
+                ? { kind: "succeeded" }
+                : { kind: "failed", message: dispatcherErrorText(result.error, translate) };
+        },
+    };
+}
+/** Resolves each bulk action against its writeHandler row action; one that resolves to nothing is dropped. */
+export function buildListBulkActions(options) {
+    const { bulkActions, rowActions, translate, dispatcher } = options;
+    return bulkActions.flatMap((bulk) => {
+        const rowAction = rowActions?.find((action) => action.id === bulk.rowAction);
+        if (rowAction === undefined || !isWriteHandlerRowAction(rowAction))
+            return [];
+        return [buildBulkAction(bulk, rowAction, translate, dispatcher)];
+    });
+}
+/** DataTable `bulk` prop of a list screen; undefined without bulk actions or dispatcher. */
+export function useListBulk(options) {
+    const { bulkActions, rowActions, translate, dispatcher, reload } = options;
+    return useMemo(() => {
+        if (bulkActions === undefined || dispatcher === undefined)
+            return undefined;
+        const actions = buildListBulkActions({ bulkActions, rowActions, translate, dispatcher });
+        if (actions.length === 0)
+            return undefined;
+        return { actions, reload: () => refetchAfterWrite(reload) };
+    }, [bulkActions, rowActions, translate, dispatcher, reload]);
+}

package/dist/app/locked-screen-header.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** Screen bodies (and anything embedded in them) are not part of a fallback chain. */
+export declare function StandInChainBoundary({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function LockedHeaderScope({ standInScreenId, children, }: {
+    readonly standInScreenId?: string;
+    readonly children?: ReactNode;
+}): ReactNode;

package/dist/app/locked-screen-header.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { usePageHeaderSlotAvailable } from "../page-header-slot.js";
+import { usePrimitives } from "../primitives.js";
+// The route still names the locked screen; its breadcrumb must not label what stands in for it.
+// With a stand-in the header is labelled with that screen instead, none if it has no title.
+function LockedScreenHeader({ standInScreenId }) {
+    const { PageHeader } = usePrimitives();
+    const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
+    if (PageHeader === undefined || !pageHeaderSlotAvailable)
+        return null;
+    return standInScreenId !== undefined ? (_jsx(PageHeader, { hideBreadcrumb: true, breadcrumbScreenId: standInScreenId })) : (_jsx(PageHeader, { hideBreadcrumb: true }));
+}
+// A stand-in can itself be locked and fall back again. The header slot is a single value that
+// every mounted PageHeader overwrites and clears on unmount, so only the outermost scope mounts
+// a header; nested scopes report the screen that finally renders up to it.
+const ReportStandInContext = createContext(undefined);
+/** Screen bodies (and anything embedded in them) are not part of a fallback chain. */
+export function StandInChainBoundary({ children }) {
+    return (_jsx(ReportStandInContext.Provider, { value: undefined, children: children }));
+}
+export function LockedHeaderScope({ standInScreenId, children, }) {
+    const reportToOuter = useContext(ReportStandInContext);
+    const [inner, setInner] = useState(undefined);
+    const effectiveScreenId = inner !== undefined ? inner.screenId : standInScreenId;
+    useEffect(() => {
+        if (reportToOuter === undefined)
+            return;
+        reportToOuter({ screenId: effectiveScreenId });
+        return () => reportToOuter(undefined);
+    }, [reportToOuter, effectiveScreenId]);
+    return (_jsxs(_Fragment, { children: [reportToOuter === undefined && (_jsx(LockedScreenHeader, { ...(effectiveScreenId !== undefined && { standInScreenId: effectiveScreenId }) })), _jsx(ReportStandInContext.Provider, { value: setInner, children: children })] }));
+}