@cosmicdrift/kumiko-renderer 0.330.0 → 0.331.0

package/dist/app/entity-list-expanded-row.d.ts

@@ -0,0 +1,15 @@
+import type { RowActionDrawer } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EditRelatedListSectionViewModel, ListRowViewModel, Translate } from "@cosmicdrift/kumiko-headless";
+import { type ReactNode } from "react";
+export declare function EntityListExpandedRow({ section, row, featureName, translate, expansionNonce, openDrawer, onAfterWrite, onSubListInvalidated, }: {
+    readonly section: EditRelatedListSectionViewModel;
+    readonly row: ListRowViewModel;
+    readonly featureName: string;
+    readonly translate?: Translate;
+    readonly expansionNonce: number;
+    readonly openDrawer: (action: RowActionDrawer, initialValues: Readonly<Record<string, unknown>> | undefined) => void;
+    /** Reloads the parent list after a write in the sub-list. */
+    readonly onAfterWrite: () => void | Promise<void>;
+    /** Asks the host to remount every open sub-list. */
+    readonly onSubListInvalidated: () => void;
+}): ReactNode;

package/dist/app/entity-list-expanded-row.js

@@ -0,0 +1,49 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { RelatedListSection } from "../components/related-list-section.js";
+import { RenderEditActionButton } from "../components/render-edit-action-button.js";
+import { useOptionalDispatcher } from "../context/dispatcher-context.js";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { useNav } from "./nav.js";
+import { useReturnHost } from "./return-to.js";
+import { buildRecordActions } from "./row-actions.js";
+// Content of an entityList row's expansion area: the row's record is the
+// parent of a relatedList. `expansionNonce` in the key remounts the sub-list
+// after a write that ran outside of it (drawer submit, title-row action).
+export function EntityListExpandedRow({ section, row, featureName, translate, expansionNonce, openDrawer, onAfterWrite, onSubListInvalidated, }) {
+    const { Banner, Button, Dialog } = usePrimitives();
+    const t = useTranslation();
+    const effectiveTranslate = translate ?? t;
+    const nav = useNav();
+    const host = useReturnHost();
+    const dispatcher = useOptionalDispatcher();
+    const [actionError, setActionError] = useState(null);
+    const onTitleActionWritten = useCallback(async () => {
+        onSubListInvalidated();
+        await onAfterWrite();
+    }, [onSubListInvalidated, onAfterWrite]);
+    const titleActions = useMemo(() => section.actions !== undefined && section.actions.length > 0
+        ? buildRecordActions({
+            actions: section.actions,
+            record: row.values,
+            translate: effectiveTranslate,
+            nav,
+            host,
+            dispatcher,
+            openDrawer,
+            onWriteSuccess: onTitleActionWritten,
+        })
+        : undefined, [
+        section.actions,
+        row.values,
+        effectiveTranslate,
+        nav,
+        host,
+        dispatcher,
+        openDrawer,
+        onTitleActionWritten,
+    ]);
+    const titleActionButtons = titleActions?.map((action) => (_jsx(RenderEditActionButton, { action: action, Button: Button, Dialog: Dialog, onError: setActionError }, action.id)));
+    return (_jsxs(_Fragment, { children: [actionError !== null && (_jsx(Banner, { variant: "error", testId: `row-${row.id}-expansion-action-error`, children: actionError })), _jsx(RelatedListSection, { embedded: true, section: section, parentId: String(row.values["id"] ?? row.id), record: row.values, featureName: featureName, translate: effectiveTranslate, onOpenDrawer: openDrawer, onAfterWrite: onAfterWrite, ...(titleActionButtons !== undefined && { actions: titleActionButtons }) }, expansionNonce)] }));
+}

package/dist/app/kumiko-screen.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { evalFieldCondition, isWriteFormEditSection, metricField, parseRefTarget, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { fieldLabelKey, fieldOptionLabelKey, isSafeHref } from "@cosmicdrift/kumiko-headless";
+import { computeRelatedListSectionViewModel, fieldLabelKey, fieldOptionLabelKey, isSafeHref, } from "@cosmicdrift/kumiko-headless";
 import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
 import { TENANT_CURRENCY_CONFIG_KEY } from "@cosmicdrift/kumiko-types/fields";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractCreatedId, extractIdField } from "../components/reference-create-dialog.js";
-import { RenderEdit, } from "../components/render-edit.js";
+import { RenderEdit, resolveRecordTitle, } from "../components/render-edit.js";
 import { needsActionConfirm, RenderEditActionButton, RenderEditActionConfirmDialog, } from "../components/render-edit-action-button.js";
 import { RenderList } from "../components/render-list.js";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context.js";
@@ -14,7 +14,7 @@ import { PAGE_SIZE_OPTIONS, useListUrlState } from "../hooks/use-list-url-state.
 import { useQuery } from "../hooks/use-query.js";
 import { useLocale, useOptionalTimeZone, useTranslation } from "../i18n.js";
 import { InsideDrawerProvider, useInsideDrawer } from "../inside-drawer.js";
-import { PageHeaderSlotAvailableProvider, usePageHeaderSlotAvailable, } from "../page-header-slot.js";
+import { PageHeaderSlotAvailableProvider, usePageHeaderCompact, usePageHeaderSlotAvailable, } from "../page-header-slot.js";
 import { statusToneForOptionTone, statusToneForValue, usePrimitives, } from "../primitives.js";
 import { screenFillsHeight } from "../screen-fills-height.js";
 import { synthesizeActionFormEntity, synthesizeActionFormScreen } from "./action-form-shim.js";
@@ -22,6 +22,7 @@ import { useAppFeatures } from "./app-features-context.js";
 import { synthesizeConfigEditEntity, synthesizeConfigEditScreen } from "./config-edit-shim.js";
 import { useCustomScreenComponent } from "./custom-screens.js";
 import { useDashboardBody } from "./dashboard-body.js";
+import { EntityListExpandedRow } from "./entity-list-expanded-row.js";
 import { buildFormSchema } from "./form-schema.js";
 import { layoutFieldNames } from "./layout-fields.js";
 import { buildDateRangePayload, buildFilterFacets, buildFilterPayload, clampDateRange, mergeReferenceFacetOptions, readDateRange, resolveDateRangeFacets, resolveProjectionFacetSpecs, } from "./list-facets.js";
@@ -1281,6 +1282,36 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         refreshRowsAfterWrite,
         openDrawer,
     ]);
+    // Expandable rows: open state is keyed by row id, so it survives refetch,
+    // sort and page changes. Several rows can be open at once.
+    const expandableRow = screen.expandableRow;
+    const expandableSection = useMemo(() => expandableRow !== undefined
+        ? computeRelatedListSectionViewModel(expandableRow, effectiveTranslate)
+        : undefined, [expandableRow, effectiveTranslate]);
+    const [expandedRowIds, setExpandedRowIds] = useState(() => new Set());
+    const toggleRowExpanded = useCallback((rowId) => {
+        setExpandedRowIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(rowId))
+                next.delete(rowId);
+            else
+                next.add(rowId);
+            return next;
+        });
+    }, []);
+    // Bumped after a write that ran outside the sub-list (drawer submit,
+    // title-row action) so open sub-lists remount and reload.
+    const [expansionNonce, setExpansionNonce] = useState(0);
+    const invalidateExpansions = useCallback(() => setExpansionNonce((n) => n + 1), []);
+    const renderExpandedRow = useCallback((row) => expandableSection === undefined ? null : (_jsx(EntityListExpandedRow, { section: expandableSection, row: row, featureName: featureName, ...(translate !== undefined && { translate }), expansionNonce: expansionNonce, openDrawer: openDrawer, onAfterWrite: refreshRowsAfterWrite, onSubListInvalidated: invalidateExpansions })), [
+        expandableSection,
+        featureName,
+        translate,
+        expansionNonce,
+        openDrawer,
+        refreshRowsAfterWrite,
+        invalidateExpansions,
+    ]);
     if (rowsQuery.loading && rowsQuery.data === null) {
         return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
     }
@@ -1336,8 +1367,13 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
                     filterValues: urlState.filters,
                     onFilterChange: urlState.setFilter,
                     onFilterReset: urlState.clearFilters,
+                }), ...(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();
                     void rowsQuery.refetch();
                 } })] }));
 }
@@ -1623,7 +1659,7 @@ function primaryHeaderAction(actions) {
 // state for menu items: RenderEditActionButton already owns a per-button
 // confirm dialog for the always-visible primary action, but a menu item has
 // no button of its own to carry one.
-function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu, onError, collapseAfterPrimary = false, }) {
+function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu, onError, collapseAfterPrimary = false, compact = false, PageHeader, }) {
     const t = useTranslation();
     const [pendingAction, setPendingAction] = useState(null);
     const trigger = async (action) => {
@@ -1635,38 +1671,51 @@ function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu, onError
             onError(e instanceof Error ? e.message : String(e));
         }
     };
+    const toMenuItem = (action) => ({
+        id: action.id,
+        label: action.label,
+        ...(action.icon !== undefined && { icon: action.icon }),
+        variant: action.style === "danger" ? "danger" : "default",
+        onSelect: () => {
+            if (needsActionConfirm(action)) {
+                setPendingAction(action);
+            }
+            else {
+                void trigger(action);
+            }
+        },
+    });
+    const pendingActionDialog = pendingAction !== null && (_jsx(RenderEditActionConfirmDialog, { action: pendingAction, open: true, onOpenChange: (open) => {
+            if (!open)
+                setPendingAction(null);
+        }, onConfirm: async () => {
+            const action = pendingAction;
+            setPendingAction(null);
+            await trigger(action);
+        }, Dialog: Dialog }));
+    if (compact && PageHeader !== undefined) {
+        const primary = primaryHeaderAction(actions);
+        // A bare icon for a destructive or confirm-gated action (e.g. "x" for terminate)
+        // reads as "close"; such actions go to the labelled menu instead.
+        const iconPrimary = primary?.icon !== undefined && primary.style !== "danger" && !needsActionConfirm(primary)
+            ? primary
+            : undefined;
+        const overflowActions = actions.filter((a) => a !== iconPrimary);
+        return (_jsxs(_Fragment, { children: [iconPrimary !== undefined && (_jsx(RenderEditActionButton, { action: iconPrimary, Button: Button, Dialog: Dialog, iconOnly: true, onError: onError }, iconPrimary.id)), overflowActions.length > 0 && (_jsx(PageHeader, { overflowItems: overflowActions.map(toMenuItem) })), pendingActionDialog] }));
+    }
     const maxPlainButtons = collapseAfterPrimary ? 1 : 2;
     if (actions.length <= maxPlainButtons || ActionOverflowMenu === undefined) {
         return (_jsx(_Fragment, { children: actions.map((action) => (_jsx(RenderEditActionButton, { action: action, Button: Button, Dialog: Dialog, hideIcon: true, onError: onError }, action.id))) }));
     }
     const primary = primaryHeaderAction(actions);
     const rest = actions.filter((a) => a.id !== primary?.id);
-    return (_jsxs(_Fragment, { children: [primary !== undefined && (_jsx(RenderEditActionButton, { action: primary, Button: Button, Dialog: Dialog, hideIcon: true, onError: onError }, primary.id)), _jsx(ActionOverflowMenu, { label: t("kumiko.list.row-actions.more"), testId: "kumiko-screen-projection-detail-actions-overflow", items: rest.map((action) => ({
-                    id: action.id,
-                    label: action.label,
-                    ...(action.icon !== undefined && { icon: action.icon }),
-                    variant: action.style === "danger" ? "danger" : "default",
-                    onSelect: () => {
-                        if (needsActionConfirm(action)) {
-                            setPendingAction(action);
-                        }
-                        else {
-                            void trigger(action);
-                        }
-                    },
-                })) }), pendingAction !== null && (_jsx(RenderEditActionConfirmDialog, { action: pendingAction, open: true, onOpenChange: (open) => {
-                    if (!open)
-                        setPendingAction(null);
-                }, onConfirm: async () => {
-                    const action = pendingAction;
-                    setPendingAction(null);
-                    await trigger(action);
-                }, Dialog: Dialog }))] }));
+    return (_jsxs(_Fragment, { children: [primary !== undefined && (_jsx(RenderEditActionButton, { action: primary, Button: Button, Dialog: Dialog, hideIcon: true, onError: onError }, primary.id)), _jsx(ActionOverflowMenu, { label: t("kumiko.list.row-actions.more"), testId: "kumiko-screen-projection-detail-actions-overflow", items: rest.map(toMenuItem) }), pendingActionDialog] }));
 }
 function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     const { Banner, Button, Dialog, Text, Grid, GridCell, Card, Tabs, StatusBadge, Metric, MetricBand, PageHeader, Link, ActionOverflowMenu, } = usePrimitives();
     const t = useTranslation();
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
+    const pageHeaderCompactContext = usePageHeaderCompact();
     const effectiveTranslate = translate ?? t;
     const nav = useNav();
     const idParam = screen.idParam ?? "id";
@@ -1843,6 +1892,9 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // this shares the same page padding/width as the record's edit card below
     // it, instead of sitting flush against the screen edge (fw record-screen
     // header polish).
+    const recordTitle = screen.recordTitleField !== undefined
+        ? resolveRecordTitle(record[screen.recordTitleField])
+        : undefined;
     const header = screen.header;
     const subtitleHref = resolveSubtitleHref(header, record);
     // Plain Text, not Heading — the Card title slot already renders as its own
@@ -1866,16 +1918,19 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // Metrics are a dl band when the primitive exists; the old Grid stays as the fallback.
     const metricsBlock = (subtitle, lead) => MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, ...(lead !== undefined && { lead }), children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
     const usesPageHeaderSlot = pageHeaderSlotAvailable && PageHeader !== undefined;
+    const pageHeaderCompact = pageHeaderCompactContext && usesPageHeaderSlot;
     const actionErrorBanner = actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError }));
-    const renderHeaderContent = (headerSlot) => (_jsxs(_Fragment, { children: [usesPageHeaderSlot ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...(header !== undefined && { title: String(record[header.title] ?? "") }), ...(header?.status !== undefined &&
+    const renderHeaderContent = (headerSlot) => (_jsxs(_Fragment, { children: [usesPageHeaderSlot ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...(header !== undefined && { title: String(record[header.title] ?? "") }), ...(header === undefined && recordTitle !== undefined && { title: recordTitle }), ...(header?.status !== undefined &&
                             StatusBadge !== undefined && {
                             status: (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })),
                         }), ...(hasHeaderActions && {
-                            actions: (_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-actions", children: _jsx(HeaderActionsBar, { actions: headerActionsList, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, collapseAfterPrimary: true }) })),
+                            actions: (_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-actions", children: _jsx(HeaderActionsBar, { actions: headerActionsList, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, collapseAfterPrimary: true, compact: pageHeaderCompact, PageHeader: PageHeader }) })),
                         }) }), MetricBand === undefined && headerSlot, (hasMetrics || headerSubtitleSlot !== undefined || headerSlot !== undefined) &&
                         (MetricBand !== undefined || hasMetrics) &&
-                        metricsBlock(headerSubtitleSlot, MetricBand !== undefined ? headerSlot : undefined), actionErrorBanner] })) : ((hasHeaderCard || headerSlot !== undefined) && (_jsxs(Card, { slots: {
+                        metricsBlock(headerSubtitleSlot, MetricBand !== undefined ? headerSlot : undefined), actionErrorBanner] })) : ((hasHeaderCard || headerSlot !== undefined || recordTitle !== undefined) && (_jsxs(Card, { slots: {
                     ...(headerTitleSlot !== undefined && { title: headerTitleSlot }),
+                    ...(headerTitleSlot === undefined &&
+                        recordTitle !== undefined && { title: recordTitle }),
                     ...(headerSubtitleSlot !== undefined && { subtitle: headerSubtitleSlot }),
                     ...(headerSlot !== undefined && { headerContent: headerSlot }),
                     ...(hasHeaderActions && { headerActions: headerActionsContent }),
@@ -1891,7 +1946,10 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
                         ...(count !== undefined && { count }),
                     };
                 }), activeId: activeSection.id ?? "", onSelect: (id) => nav.setSearchParams({ tab: id }) }))] }));
-    return (_jsxs(_Fragment, { children: [_jsx(RenderEdit, { screen: detailScreen, entity: entity, featureName: schema.featureName, initial: record, entityId: effectiveEntityId, customSubmit: async () => ({ isSuccess: true, validationBlocked: false, data: undefined }), onReload: reloadDetail, onRelatedListDrawerAction: openDrawer, ...(translate !== undefined && { translate }), ...(hasTabs && { hideSectionTitles: true }), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...((hasHeaderCard || hasTabs || screen.slots?.header !== undefined) && {
+    return (_jsxs(_Fragment, { children: [_jsx(RenderEdit, { screen: detailScreen, entity: entity, featureName: schema.featureName, initial: record, entityId: effectiveEntityId, customSubmit: async () => ({ isSuccess: true, validationBlocked: false, data: undefined }), onReload: reloadDetail, onRelatedListDrawerAction: openDrawer, ...(translate !== undefined && { translate }), ...(hasTabs && { hideSectionTitles: true }), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...((hasHeaderCard ||
+                    hasTabs ||
+                    screen.slots?.header !== undefined ||
+                    screen.recordTitleField !== undefined) && {
                     headerRegion: renderHeaderContent,
                 }), buildSectionActions: buildSectionActions, valueDisplay: screen.valueDisplay ?? "text" }, `${entityId}:${reloadNonce}`), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();

package/dist/components/grid-cell-for-field.js

@@ -10,7 +10,7 @@ const FIELD_CELL_WIDTH_BY_TYPE = {
     locatedTimestamp: "timestamp",
     select: "select",
     multiSelect: "select",
-    boolean: "auto",
+    boolean: "toggle",
     longText: "full",
     embedded: "full",
     jsonb: "full",

package/dist/components/query-options-select.d.ts

@@ -0,0 +1,12 @@
+import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import type { ReactNode } from "react";
+type QueryOptionsSelectProps = {
+    readonly field: EditFieldViewModel;
+    readonly query: string;
+    readonly payload: Readonly<Record<string, string | number | boolean>>;
+    readonly id: string;
+    readonly hasError: boolean;
+    readonly onChange: (value: unknown) => void;
+};
+export declare function QueryOptionsSelect({ field, query, payload, id, hasError, onChange, }: QueryOptionsSelectProps): ReactNode;
+export {};

package/dist/components/query-options-select.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "../hooks/use-query.js";
+import { usePrimitives } from "../primitives.js";
+// Select whose options come from a query (SelectFieldDef.optionsQuery), so it
+// has to be a mounted component for useQuery. useQuery re-fetches on the
+// serialized payload, hence no payload memoization here.
+export function QueryOptionsSelect({ field, query, payload, id, hasError, onChange, }) {
+    const { Input } = usePrimitives();
+    const { data, loading } = useQuery(query, payload);
+    const current = typeof field.value === "string" ? field.value : "";
+    const rows = data?.rows ?? [];
+    // A stored value missing from the result (still loading, or dropped from the
+    // catalog) must stay visible instead of silently turning into "nothing selected".
+    const options = current !== "" && !rows.some((row) => row.value === current)
+        ? [{ value: current, label: current }, ...rows]
+        : rows;
+    // Keeps the presentation stable: without it the empty loading state would pick
+    // radio/dropdown by option count and jump once the rows arrive.
+    const display = field.display === "radio" || field.display === "dropdown" ? field.display : "dropdown";
+    return (_jsx(Input, { kind: "select", id: id, name: field.field, disabled: field.readOnly || loading, required: field.required, hasError: hasError, value: current, onChange: (v) => onChange(v), options: options, display: display }));
+}

package/dist/components/related-list-section.d.ts

@@ -1,7 +1,7 @@
 import type { RowActionDrawer } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { EditRelatedListSectionViewModel, Translate } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode } from "react";
-export declare function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, }: {
+export declare function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, embedded, onAfterWrite, }: {
     readonly section: EditRelatedListSectionViewModel;
     readonly parentId: string;
     /** The enclosing projectionDetail's own record (the "Akte") — evaluates
@@ -22,4 +22,12 @@ export declare function RelatedListSection({ section, parentId, record, featureN
      *  (non-`hideTitle`) branch below — `hideTitle` uses `FillContainer`, which
      *  has no title row to render actions into (see the comment on that branch). */
     readonly actions?: ReactNode;
+    /** Mounted inside a host row (entityList `expandableRow`): unframed, in
+     *  document flow (no Section card, no scrollBody), with its own title row
+     *  carrying `actions`. */
+    readonly embedded?: boolean;
+    /** Runs after this section's own refetch once a write action (row action,
+     *  toolbar action, emptyState action) succeeded — lets a host reload data
+     *  the write also changed. */
+    readonly onAfterWrite?: () => void | Promise<void>;
 }): ReactNode;

package/dist/components/related-list-section.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
+import { normalizeListColumn, parseRefTarget } from "@cosmicdrift/kumiko-framework/ui-types";
 import { useCallback, useMemo, useState } from "react";
 import { useAppFeatures } from "../app/app-features-context.js";
 import { buildFilterFacets, buildFilterPayload, mergeReferenceFacetOptions, resolveProjectionFacetSpecs, } from "../app/list-facets.js";
@@ -22,17 +22,22 @@ const RELATED_LIST_PSEUDO_ENTITY = "__related-list__";
 // Minimal EntityDefinition from the section's own columns — same shape as
 // projection-list-shim's synthesizeProjectionEntity, but sortable is read
 // per-column (ListColumnSpec.sortable) instead of screen-wide, since a
-// relatedList section has no single Zod schema to derive it from.
-function synthesizeRelatedListEntity(columns) {
+// relatedList section has no single Zod schema to derive it from. With a
+// declared `entity`, a column naming one of its fields takes that field's
+// definition, so RenderList formats it exactly like an entityList column;
+// only `sortable` stays per-column because the sort runs locally.
+function synthesizeRelatedListEntity(columns, sourceEntity) {
     const fields = {};
     for (const col of columns) {
         const normalized = normalizeListColumn(col);
-        fields[normalized.field] = {
-            type: normalized.valueType ?? "text",
-            sortable: normalized.sortable === true,
-        };
+        const sortable = normalized.sortable === true;
+        const sourceField = sourceEntity?.fields[normalized.field];
+        fields[normalized.field] =
+            sourceField !== undefined
+                ? { ...sourceField, sortable }
+                : { type: normalized.valueType ?? "text", sortable };
     }
-    return { fields };
+    return { ...sourceEntity, fields };
 }
 // Mirrors row-actions.ts's own warnDrawerActionDropped (module-private
 // there, so not reusable directly) — a drawer-kind emptyState.action with no
@@ -42,8 +47,8 @@ function warnRelatedListEmptyStateDrawerDropped(actionId) {
     // biome-ignore lint/suspicious/noConsole: dev-time warning, same pattern as row-actions.ts
     console.warn(`[kumiko] relatedList emptyState.action "${actionId}" is kind: "drawer" but no onOpenDrawer was supplied — dropped.`);
 }
-export function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, }) {
-    const { Banner, Section, FillContainer, Text, Button, Dialog } = usePrimitives();
+export function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, embedded, onAfterWrite, }) {
+    const { Banner, Section, Card, FillContainer, Text, Button, Dialog } = usePrimitives();
     const [emptyStateActionError, setEmptyStateActionError] = useState(null);
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
@@ -59,7 +64,15 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         return findEditScreenFor(targetEntity, appFeatures, userRoles);
     }, [appFeatures, section.rowClick, userRoles]);
     const defaultEditRowAction = useMemo(() => buildDefaultEditRowAction(defaultEditScreen, section.rowClick?.idColumn ?? "id"), [defaultEditScreen, section.rowClick]);
-    const entity = useMemo(() => synthesizeRelatedListEntity(section.columns), [section.columns]);
+    // RenderList derives header and option-label keys from (featureName,
+    // screen.entity), so a declared entity also supplies both.
+    const sourceTarget = useMemo(() => (section.entity !== undefined ? parseRefTarget(section.entity, featureName) : undefined), [section.entity, featureName]);
+    const sourceEntity = sourceTarget !== undefined
+        ? appFeatures.find((f) => f.featureName === sourceTarget.featureName)?.entities[sourceTarget.entityName]
+        : undefined;
+    const listFeatureName = sourceEntity !== undefined ? sourceTarget?.featureName : undefined;
+    const listEntityName = sourceEntity !== undefined ? sourceTarget?.entityName : undefined;
+    const entity = useMemo(() => synthesizeRelatedListEntity(section.columns, sourceEntity), [section.columns, sourceEntity]);
     const listScreen = useMemo(() => ({
         // Empty id → RenderList's own toolbarTitle resolves to "" (its
         // `screen:${id}.title` lookup misses and falls back to `id`) — this
@@ -67,9 +80,9 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         // so RenderList's toolbar carries none.
         id: "",
         type: "entityList",
-        entity: RELATED_LIST_PSEUDO_ENTITY,
+        entity: listEntityName ?? RELATED_LIST_PSEUDO_ENTITY,
         columns: section.columns,
-    }), [section.columns]);
+    }), [section.columns, listEntityName]);
     // Local state, not URL state: a section `id` is optional, so there is no
     // stable URL key to namespace against — the section's sort is local for the
     // same reason. Consequence: search/filters reset on reload.
@@ -107,6 +120,11 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         filterPayload,
     ]);
     const rowsQuery = useQuery(section.query, payload);
+    const ownRefetch = rowsQuery.refetch;
+    const refetchSelfAndHost = useCallback(async () => {
+        await ownRefetch();
+        await onAfterWrite?.();
+    }, [ownRefetch, onAfterWrite]);
     const onFilterChange = useCallback((field, values) => setFilters((prev) => ({ ...prev, [field]: values })), []);
     const onFilterReset = useCallback(() => setFilters({}), []);
     // Sorted client-side over the already-loaded rows — this section has no
@@ -150,7 +168,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         translate: effectiveTranslate,
         dispatcher,
         nav,
-        refetch: rowsQuery.refetch,
+        refetch: refetchSelfAndHost,
         openDrawer: onOpenDrawer,
         defaultEditRowAction,
         host,
@@ -159,7 +177,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         effectiveTranslate,
         dispatcher,
         nav,
-        rowsQuery.refetch,
+        refetchSelfAndHost,
         onOpenDrawer,
         defaultEditRowAction,
         host,
@@ -171,7 +189,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         translate: effectiveTranslate,
         dispatcher,
         nav,
-        refetch: rowsQuery.refetch,
+        refetch: refetchSelfAndHost,
         navigatePrefill: section.parentFilter !== undefined
             ? { [section.parentFilter.field]: parentId }
             : { [section.parentParam ?? "id"]: parentId },
@@ -190,7 +208,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         dispatcher,
         nav,
         host,
-        rowsQuery.refetch,
+        refetchSelfAndHost,
         onOpenDrawer,
     ]);
     // emptyState.action is a RowAction — the same record-bound action shape
@@ -216,7 +234,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
             host,
             dispatcher,
             openDrawer: onOpenDrawer ?? (() => { }),
-            onWriteSuccess: rowsQuery.refetch,
+            onWriteSuccess: refetchSelfAndHost,
         })?.[0];
     }, [
         section.emptyState,
@@ -226,7 +244,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         host,
         dispatcher,
         onOpenDrawer,
-        rowsQuery.refetch,
+        refetchSelfAndHost,
     ]);
     const emptyStateContent = section.emptyState !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: section.emptyState.title }), section.emptyState.description !== undefined && (_jsx(Text, { variant: "small", children: section.emptyState.description })), emptyStateActionButton !== undefined && (_jsx(RenderEditActionButton, { action: emptyStateActionButton, Button: Button, Dialog: Dialog, onError: setEmptyStateActionError }))] })) : undefined;
     // A truncated fetch means `sortedRows` is a sort of a partial set, not of
@@ -242,7 +260,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         (rowsQuery.data.total === undefined || rowsQuery.data.total > rowsQuery.data.rows.length);
     const content = rowsQuery.loading && rowsQuery.data === null ? (_jsx(Banner, { padded: true, variant: "loading", testId: "related-list-loading", children: "Loading\u2026" })) : rowsQuery.error ? (_jsx(Banner, { padded: true, variant: "error", testId: "related-list-error", children: dispatcherErrorText(rowsQuery.error, effectiveTranslate) })) : (_jsxs(_Fragment, { children: [truncated && (_jsx(Banner, { variant: "info", testId: "related-list-truncated", children: effectiveTranslate("kumiko.list.related-list-truncated", {
                     count: sortedRows.length,
-                }) })), emptyStateActionError !== null && (_jsx(Banner, { variant: "error", testId: "related-list-empty-state-action-error", children: emptyStateActionError })), _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(RenderList, { screen: listScreen, entity: entity, rows: sortedRows, featureName: featureName, translate: effectiveTranslate, ...(section.description !== undefined && { description: section.description }), ...(section.itemNoun !== undefined && { itemNounKey: section.itemNoun }), sort: sort, onSortChange: setSort, ...(section.searchable === true && {
+                }) })), emptyStateActionError !== null && (_jsx(Banner, { variant: "error", testId: "related-list-empty-state-action-error", children: emptyStateActionError })), _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(RenderList, { screen: listScreen, entity: entity, rows: sortedRows, featureName: listFeatureName ?? featureName, translate: effectiveTranslate, ...(section.description !== undefined && { description: section.description }), ...(section.itemNoun !== undefined && { itemNounKey: section.itemNoun }), sort: sort, onSortChange: setSort, ...(section.searchable === true && {
                         searchable: true,
                         searchValue: search,
                         onSearchChange: setSearch,
@@ -255,7 +273,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
                         scrollBody: true,
                         screenPadding: false,
                         chromeless: true,
-                    }) }) })] }));
+                    }), ...(embedded === true && { screenPadding: false, chromeless: true }) }) })] }));
     // hideTitle (tabs mode) → the caller (render-edit.tsx) already wraps this
     // component's own return value in the same Card frame every other tab
     // kind gets — no card here, or the two would nest. `scrollBody` caps the
@@ -266,6 +284,15 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
     // Section card and document-flow height since they render a visible title
     // and aren't confined to a tab panel.
     const bridges = _jsx(ReferenceFacetBridges, { specs: facetSpecs, onOptions: handleFacetOptions });
+    if (embedded === true) {
+        const countSuffix = rowsQuery.data !== null ? ` · ${sortedRows.length}` : "";
+        return (_jsxs(_Fragment, { children: [bridges, _jsx(Card, { options: { framed: false, padded: false }, 
+                    // Trim the default header inset: the host row already pads the area.
+                    className: "[&>div:first-child]:px-0 [&>div:first-child]:pt-1 [&>div:first-child]:pb-2", slots: {
+                        title: `${section.title}${countSuffix}`,
+                        ...(actions !== undefined && { headerActions: actions }),
+                    }, testId: `related-list-${section.title}-${parentId}`, children: content })] }));
+    }
     if (hideTitle) {
         return (_jsxs(_Fragment, { children: [bridges, FillContainer !== undefined ? (_jsx(FillContainer, { ...(grow === true && { grow: true }), children: content })) : (content)] }));
     }

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

@@ -3,4 +3,6 @@ import type { RenderEditProps } from "./render-edit-types.js";
 export type { RenderEditAction, RenderEditChangeState, RenderEditControls, RenderEditProps, } from "./render-edit-types.js";
 import { type ReactNode } from "react";
 export declare const PATCH_DRAFT_SAVE_DEBOUNCE_MS = 500;
+/** A record title is a non-blank string; anything else leaves the screen title alone. */
+export declare function resolveRecordTitle(value: unknown): string | undefined;
 export declare function RenderEdit<TValues extends FormValues, TCtx = unknown>(props: RenderEditProps<TValues, TCtx>): ReactNode;

package/dist/components/render-edit.js

@@ -3,7 +3,7 @@ import { evalFieldCondition, isFieldsEditSection, normalizeEditField, PROJECTION
 import { computeEditViewModel } from "@cosmicdrift/kumiko-headless";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
 import { AllFieldsRequiredProvider } from "./render-field.js";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExtensionFormRegistryProvider, useExtensionFormHost, } from "../app/extension-form-submit.js";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.js";
@@ -12,7 +12,7 @@ import { formatWhen } from "../format-when.js";
 import { useForm } from "../hooks/use-form.js";
 import { useTranslation } from "../i18n.js";
 import { useInsideDrawer } from "../inside-drawer.js";
-import { usePageHeaderSlotAvailable } from "../page-header-slot.js";
+import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
 import { STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, usePrimitives, } from "../primitives.js";
 import { GridCellForField } from "./grid-cell-for-field.js";
 import { RelatedListSection } from "./related-list-section.js";
@@ -141,6 +141,10 @@ function EditSlotMount({ slot, slotName, screenId, entityName, entityId, values,
 function formSectionDomId(sectionIndex) {
     return `form-section-${sectionIndex}`;
 }
+/** A record title is a non-blank string; anything else leaves the screen title alone. */
+export function resolveRecordTitle(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : undefined;
+}
 export function RenderEdit(props) {
     const { screen, entity, featureName, initial, writeCommand, translate: translateProp, ctx, schema, onSubmit, payloadMode = "values", buildPayload, serverFieldPathPrefix, onDelete, onCancel, onReload, onDirtyChange, onCopyLink, actions, onRelatedListDrawerAction, submitLabel, submitVariant, summary, labelAppendix, fieldAppendix, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, headerRegion, buildSectionActions, } = props;
     const { customSubmit } = props;
@@ -208,6 +212,7 @@ export function RenderEdit(props) {
     });
     const { Button, Banner, Card, Dialog, Form, Section, Grid, GridCell, Text, Progress, StepBar, WizardStepGroup, Tabs, PageHeader, ActionOverflowMenu, } = usePrimitives();
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
+    const pageHeaderCompact = usePageHeaderCompact();
     const insideDrawer = useInsideDrawer();
     // Both stepped layouts show one section at a time and keep the rest mounted
     // but inert. A tabs layout on a host without the Tabs primitive has no strip
@@ -957,11 +962,8 @@ export function RenderEdit(props) {
         return id == null || id === "";
     })();
     const formMode = isCreate ? "create" : "edit";
-    const recordTitleValue = !isCreate && screen.recordTitleField !== undefined
-        ? initial[screen.recordTitleField]
-        : undefined;
-    const recordTitle = typeof recordTitleValue === "string" && recordTitleValue.trim() !== ""
-        ? recordTitleValue
+    const recordTitle = !isCreate && screen.recordTitleField !== undefined
+        ? resolveRecordTitle(initial[screen.recordTitleField])
         : undefined;
     const resolveScreenText = (suffix) => {
         for (const key of [
@@ -1013,6 +1015,8 @@ export function RenderEdit(props) {
             : translate("kumiko.wizard.step", { current: currentStep + 1, total: lastStepIndex + 1 });
     })();
     return (_jsxs(ExtensionFormRegistryProvider, { value: extensionFormRegistry, children: [titleInShell && (_jsx(PageHeader, { title: formTitle, ...(recordTitle !== undefined && { recordTitle }), ...(headerMenuItems.length > 0 &&
+                    pageHeaderCompact && { overflowItems: headerMenuItems }), ...(headerMenuItems.length > 0 &&
+                    !pageHeaderCompact &&
                     ActionOverflowMenu !== undefined && {
                     actions: (_jsx(ActionOverflowMenu, { label: translate("kumiko.list.row-actions.more"), items: headerMenuItems, testId: "render-edit-header-menu" })),
                 }) })), _jsx(Form, { onSubmit: () => void handleSubmit(), ...(hideSectionTitles !== true && !titleInShell && { title: formTitle }), ...(formSubtitle !== undefined && !stepRail && { subtitle: formSubtitle }), ...(isScreenForm && { screenForm: true }), ...(unsavedCount > 0 && { unsavedCount }), ...(sectionNavItems.length > 0 && { sectionNav: sectionNavItems }), ...(stepRail && {
@@ -1084,12 +1088,14 @@ export function RenderEdit(props) {
                                     // over TValues; controller is mount-lifetime-stable, see onControlsReady above.
                                     patch: patchAndScheduleDraftSave, validate: scopedValidate, hideTitle: hideSectionTitles, ...(hideSectionTitles !== true &&
                                         sectionActionsEl !== undefined && { actions: sectionActionsEl }) }, section.title));
-                                // Tabs mode: unframed like relatedList tabs; the Card chrome is
-                                // only kept when section actions need a header to live in.
-                                // testId stays only on the inner Section — the outer wrapper is
-                                // purely chrome, giving it the same testId would register two
+                                // Tabs mode: an unframed padded panel (the tab panel is the
+                                // surface), so extension content neither sits flush at the shell
+                                // edge nor touches the tab strip. testId stays only on the inner
+                                // Section — giving the wrapper the same one would register two
                                 // elements under one id.
-                                const wrapped = hideSectionTitles !== true ? (mount) : sectionActionsEl !== undefined ? (_jsx(Card, { slots: { headerActions: sectionActionsEl }, children: mount }, section.title)) : (_jsx(Fragment, { children: mount }, section.title));
+                                const wrapped = hideSectionTitles !== true ? (mount) : (_jsx(Card, { options: { framed: false }, ...(sectionActionsEl !== undefined && {
+                                        slots: { headerActions: sectionActionsEl },
+                                    }), children: mount }, section.title));
                                 return wrapWizardStep(section.title, wrapped);
                             }
                             if (section.kind === "relatedList") {
@@ -1126,8 +1132,8 @@ export function RenderEdit(props) {
                                     }), ...(fieldAppendix !== undefined && {
                                         fieldAppendix: fieldAppendix(field.field),
                                     }), allIssues: snapshot.errors, valueDisplay: valueDisplay, row: snapshot.values, ...(!isCreate && field.field in snapshot.changes && { changed: true }) }, field.field))) }, gridKey));
-                            // Tabs mode renders one or more titled cards, so this card's actual
-                            // heading doesn't visually duplicate the short Tab strip label.
+                            // Tabs mode: the tab panel is the surface, so field sections render
+                            // as unframed padded panels; group cards inside stay framed.
                             // Stays `Card`, not `Section` — Section always flattens to a
                             // borderless divider when rendered inside this component's own
                             // `<Form>` (InsideFormContext), even with `chromeless` set, so it
@@ -1140,13 +1146,13 @@ export function RenderEdit(props) {
                                     // group cards (Card-in-Card) — the boot-validator rejects that
                                     // combination in tabs mode, so `sectionActionsEl` is always
                                     // undefined here at runtime.
-                                    return wrapWizardStep(sectionKey, groupsGrid);
+                                    return wrapWizardStep(sectionKey, _jsx(Card, { options: { framed: false }, children: groupsGrid }, sectionKey));
                                 }
                                 // No section title here (fw#3218) — the Tab strip right above
                                 // already names this panel, so a repeated Card title would just
                                 // duplicate it. The title row only exists to carry actions, and
                                 // then it carries only the actions, never the title text.
-                                const cardEl = (_jsx(Card, { ...(sectionActionsEl !== undefined && {
+                                const cardEl = (_jsx(Card, { options: { framed: false }, ...(sectionActionsEl !== undefined && {
                                         slots: { headerActions: sectionActionsEl },
                                     }), testId: `section-${sectionKey}`, children: renderFieldGrid(section.fields, section.columns, `${sectionKey}-grid`) }, sectionKey));
                                 return wrapWizardStep(sectionKey, cardEl);

package/dist/components/render-field.js

@@ -15,6 +15,7 @@ import { useLocale, useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
 import { EmbeddedListField } from "./embedded-list-field.js";
 import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
+import { QueryOptionsSelect } from "./query-options-select.js";
 import { ReferenceCreateDialog } from "./reference-create-dialog.js";
 const AllFieldsRequiredContext = createContext(false);
 export const AllFieldsRequiredProvider = AllFieldsRequiredContext.Provider;
@@ -41,7 +42,7 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
     // Reference-Field rendert eine eigene Component — sie nutzt
     // useQuery() für den Live-Lookup, also muss sie als React-
     // Komponente gemountet werden (nicht als pure render-Call).
-    const control = field.readOnly && field.renderer !== undefined ? (_jsx(FieldRendererOutput, { field: field, renderer: field.renderer, appLocale: appLocale, ...(row !== undefined && { row }) })) : field.type === "embedded" && field.embeddedListCells !== undefined ? (_jsx(EmbeddedListField, { field: field, id: id, onChange: onChange, allIssues: allIssues ?? {}, featureName: featureName ?? "" })) : field.type === "reference" ? (readOnlyText ? (_jsx(ReadOnlyReferenceValue, { field: field, featureName: featureName ?? "" })) : (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }))) : readOnlyText && !isComplexFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale) })) : (renderInput({
+    const control = field.readOnly && field.renderer !== undefined ? (_jsx(FieldRendererOutput, { field: field, renderer: field.renderer, appLocale: appLocale, ...(row !== undefined && { row }) })) : field.type === "embedded" && field.embeddedListCells !== undefined ? (_jsx(EmbeddedListField, { field: field, id: id, onChange: onChange, allIssues: allIssues ?? {}, featureName: featureName ?? "" })) : field.type === "reference" ? (readOnlyText ? (_jsx(ReadOnlyReferenceValue, { field: field, featureName: featureName ?? "" })) : (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }))) : field.type === "select" && field.selectOptionsQuery !== undefined && !readOnlyText ? (_jsx(QueryOptionsSelect, { field: field, query: field.selectOptionsQuery.query, payload: field.selectOptionsQuery.payload, id: id, hasError: hasError, onChange: onChange })) : readOnlyText && !isComplexFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale) })) : (renderInput({
         field,
         id,
         hasError,

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

@@ -98,6 +98,11 @@ export type RenderListProps = {
      *  fw#3234). Omitted: legacy `p-6` fallback for a standalone table with no
      *  padded host. */
     readonly screenPadding?: boolean;
+    /** Forwarded to `DataTableProps.expandedRowIds` / `onToggleRowExpanded` /
+     *  `renderExpandedRow` (entityList `expandableRow`). */
+    readonly expandedRowIds?: ReadonlySet<string>;
+    readonly onToggleRowExpanded?: (rowId: string) => void;
+    readonly renderExpandedRow?: (row: ListRowViewModel) => ReactNode;
 };
 export type ToolbarActionButton = {
     readonly id: string;

package/dist/components/render-list.js

@@ -4,17 +4,18 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
 import { useReferenceLookup } from "../hooks/use-reference-lookup.js";
 import { useTranslation } from "../i18n.js";
-import { usePageHeaderSlotAvailable } from "../page-header-slot.js";
+import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
 import { shouldRenderActionsIconOnly, usePrimitives, } from "../primitives.js";
 const SEARCH_DEBOUNCE_MS = 300;
 export function RenderList(props) {
-    const { screen, entity, rows, featureName, translate: translateProp, onRowClick, emptyState, onCreate, createLabel, searchable = false, searchPlaceholder, description, itemNounKey, searchValue, onSearchChange, sort, onSortChange, pager, onReachEnd, loadingMore, hasMore, rowActions, rowActionMode, toolbarActions, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, chromeless, scrollBody, screenPadding, } = props;
+    const { screen, entity, rows, featureName, translate: translateProp, onRowClick, emptyState, onCreate, createLabel, searchable = false, searchPlaceholder, description, itemNounKey, searchValue, onSearchChange, sort, onSortChange, pager, onReachEnd, loadingMore, hasMore, rowActions, rowActionMode, toolbarActions, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, } = props;
     // Wie RenderEdit: Translate-Fallback aus dem i18next-Context, sonst
     // wären Column-Header raw i18n-Keys.
     const t = useTranslation();
     const translate = translateProp ?? t;
     const { DataTable, Button, Dialog, Input, Text, Banner, PageHeader } = usePrimitives();
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
+    const pageHeaderCompact = usePageHeaderCompact();
     const createInPageHeader = onCreate !== undefined && PageHeader !== undefined && pageHeaderSlotAvailable;
     // Local search buffer + debounce. External changes (browser back,
     // cross-component reset) are mirrored back; typing only fires
@@ -131,7 +132,7 @@ export function RenderList(props) {
     const hasToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
     const hasHeaderSlot = screen.slots?.header !== undefined;
     const toolbarIconOnly = hasToolbarActions && shouldRenderActionsIconOnly(toolbarActions);
-    const createButton = onCreate !== undefined ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-create", className: "px-3.5", children: effectiveCreateLabel })) : undefined;
+    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;
     const toolbarEnd = hasHeaderSlot || hasToolbarActions || (onCreate !== undefined && !createInPageHeader) ? (_jsxs(_Fragment, { children: [hasHeaderSlot && _jsx(ListHeaderSlotMount, { screen: screen }), hasToolbarActions &&
                 toolbarActions.map((a) => (_jsx(ToolbarActionView, { action: a, iconOnly: toolbarIconOnly, Button: Button, Dialog: Dialog, Banner: Banner }, a.id))), !createInPageHeader && createButton] })) : undefined;
     // Empty-State: Default zeigt Heading + Description + optional CTA-
@@ -148,7 +149,7 @@ export function RenderList(props) {
     const resolvedTitle = translate(titleKey);
     const toolbarTitle = resolvedTitle === titleKey ? screen.id : resolvedTitle;
     // ListSort = DataTableSort (use-list-url-state aliased) — kein Cast nötig.
-    return (_jsxs(_Fragment, { children: [createInPageHeader && PageHeader !== undefined && _jsx(PageHeader, { actions: createButton }), 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 && !searchable && { 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 }), ...(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 }), testId: "render-list-table" })] }));
+    return (_jsxs(_Fragment, { children: [createInPageHeader && PageHeader !== undefined && _jsx(PageHeader, { actions: createButton }), 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 && !searchable && { 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 }), ...(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" })] }));
 }
 // Header-Slot in der Listen-Toolbar (toolbarEnd): `screen.slots.header` ist
 // eine PlatformComponent (`{ react: { __component: "X" } }`), aufgelöst über

package/dist/components/write-form-section.js

@@ -88,11 +88,10 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
     const submitButton = (_jsx(Button, { type: "button", variant: "primary", disabled: isSubmitting, loading: isSubmitting, onClick: () => void handleSubmit(), testId: "write-form-section-submit", children: section.submitLabel ?? effectiveTranslate("kumiko.actions.save") }));
     const titleRowActions = actions !== undefined ? (_jsxs(_Fragment, { children: [actions, submitButton] })) : (submitButton);
     // Section always flattens to a borderless divider when rendered inside
-    // RenderEdit's own <Form> in tabs mode (hideTitle) — Card frames it there
-    // instead, same reason render-edit.tsx's tabs-mode fields/extension
-    // branches stay on Card.
+    // RenderEdit's own <Form> in tabs mode (hideTitle) — an unframed Card panel
+    // stands in, like render-edit.tsx's tabs-mode fields/extension branches.
     if (hideTitle) {
-        return (_jsx(Card, { slots: {
+        return (_jsx(Card, { options: { framed: false }, slots: {
                 ...(section.description !== undefined && { subtitle: section.description }),
                 headerActions: titleRowActions,
             }, testId: `write-form-${section.title ?? "section"}`, children: content }));

package/dist/i18n-defaults.js

@@ -68,6 +68,8 @@ export const kumikoDefaultTranslations = {
         "kumiko.list.count.one": "1 entry",
         "kumiko.list.count.other": "{count} entries",
         "kumiko.list.row-actions.more": "More actions",
+        "kumiko.list.row.collapse": "Collapse {title}",
+        "kumiko.list.row.expand": "Expand {title}",
         "kumiko.list.sort.by": "Sorted by {column}",
         "kumiko.form.changed": "changed",
         "kumiko.form.on-this-page": "On this page",

package/dist/index.d.ts

@@ -66,7 +66,7 @@ export type { LocaleProviderProps, TranslationBundle, TranslationsByKey, Transla
 export { createStaticLocaleResolver, FormalityProvider, LocaleProvider, mergeTranslations, translationsByLocaleFromKeys, useFormality, useLocale, useOptionalLocale, useOptionalTranslation, useTranslation, } from "./i18n.js";
 export { kumikoDefaultTranslations } from "./i18n-defaults.js";
 export { InsideDrawerProvider, useInsideDrawer } from "./inside-drawer.js";
-export { PageHeaderSlotAvailableProvider, usePageHeaderSlotAvailable } from "./page-header-slot.js";
+export { PageHeaderCompactProvider, PageHeaderSlotAvailableProvider, usePageHeaderCompact, usePageHeaderSlotAvailable, } from "./page-header-slot.js";
 export type { ActionMenuItemSpec, ActionOverflowMenuProps, AppPrimitives, BannerProps, ButtonProps, CardOptions, CardProps, CardSlots, CopyButtonProps, CorePrimitives, DataTableDateRangeFacet, DataTableFacet, DataTableProps, DataTableRowAction, DataTableRowActionMode, DataTableSort, DataTableSortDir, DialogProps, DrawerProps, EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps, EmbeddedListTotal, FieldCellWidth, FieldProps, FillContainerProps, FormProps, FormSectionNavItem, FormWidth, GridCellProps, GridProps, HeadingProps, InputProps, JsonViewProps, LightboxProps, LinkProps, MetricBandProps, MetricProps, ModalProps, PageHeaderProps, PrimitivesProviderProps, PrimitivesRegistry, ProgressProps, ProgressTone, PromoPanelAction, PromoPanelProps, RuntimeRenderer, SecretRevealProps, SecretRevealValue, SectionProps, ShareButtonProps, StatusBadgeProps, StatusTone, StepBarProps, StickyActionBarProps, StickyPrimaryActionMarker, TabsProps, TextProps, WizardStepGroupProps, } from "./primitives.js";
 export { PrimitivesProvider, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, usePrimitives, } from "./primitives.js";
 export { buildWhatsAppShareUrl } from "./share-links.js";

package/dist/index.js

@@ -47,7 +47,7 @@ export { useStreamHandler } from "./hooks/use-stream-handler.js";
 export { createStaticLocaleResolver, FormalityProvider, LocaleProvider, mergeTranslations, translationsByLocaleFromKeys, useFormality, useLocale, useOptionalLocale, useOptionalTranslation, useTranslation, } from "./i18n.js";
 export { kumikoDefaultTranslations } from "./i18n-defaults.js";
 export { InsideDrawerProvider, useInsideDrawer } from "./inside-drawer.js";
-export { PageHeaderSlotAvailableProvider, usePageHeaderSlotAvailable } from "./page-header-slot.js";
+export { PageHeaderCompactProvider, PageHeaderSlotAvailableProvider, usePageHeaderCompact, usePageHeaderSlotAvailable, } from "./page-header-slot.js";
 export { PrimitivesProvider, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, usePrimitives, } from "./primitives.js";
 export { buildWhatsAppShareUrl } from "./share-links.js";
 export { sortByAccessor } from "./sort-by-accessor.js";

package/dist/page-header-slot.d.ts

@@ -1,2 +1,4 @@
 export declare const PageHeaderSlotAvailableProvider: import("react").Provider<boolean>;
 export declare function usePageHeaderSlotAvailable(): boolean;
+export declare const PageHeaderCompactProvider: import("react").Provider<boolean>;
+export declare function usePageHeaderCompact(): boolean;

package/dist/page-header-slot.js

@@ -7,3 +7,10 @@ export const PageHeaderSlotAvailableProvider = PageHeaderSlotAvailableContext.Pr
 export function usePageHeaderSlotAvailable() {
     return useContext(PageHeaderSlotAvailableContext);
 }
+// True while a shell with page-header slots renders at phone width: screens
+// then move secondary header actions into the shell's overflow menu.
+const PageHeaderCompactContext = createContext(false);
+export const PageHeaderCompactProvider = PageHeaderCompactContext.Provider;
+export function usePageHeaderCompact() {
+    return useContext(PageHeaderCompactContext);
+}

package/dist/primitives.d.ts

@@ -642,6 +642,17 @@ export type DataTableProps = {
      *  `scrollBody`'s flex-fill height budget.
      *  Default false: unchanged symmetric inset for an embedded table. */
     readonly screenPadding?: boolean;
+    /** Ids of the rows whose expansion area is currently open (controlled by
+     *  the host; several rows can be open at once). Only meaningful together
+     *  with `renderExpandedRow` + `onToggleRowExpanded`. */
+    readonly expandedRowIds?: ReadonlySet<string>;
+    /** User toggled a row's expand control. With `renderExpandedRow` this makes
+     *  every row expandable: the renderer adds a toggle (button with
+     *  `aria-expanded`) that does not trigger `onRowClick`. */
+    readonly onToggleRowExpanded?: (rowId: string) => void;
+    /** Content of the area under an expanded row. Native renderers implement
+     *  the same three props. */
+    readonly renderExpandedRow?: (row: ListRowViewModel) => ReactNode;
 };
 /** Cell type for one column of an embedded-list field. Mirrors
  *  EmbeddedListCellViewModel["type"] from `@cosmicdrift/kumiko-headless`. */
@@ -876,7 +887,7 @@ export type GridProps = {
     readonly flow?: boolean;
 };
 /** Width class of a field cell inside a `flow` grid: sized by what the field holds. */
-export type FieldCellWidth = "text" | "number" | "money" | "date" | "timestamp" | "select" | "full" | "auto";
+export type FieldCellWidth = "text" | "number" | "money" | "date" | "timestamp" | "select" | "full" | "toggle";
 /** Span-Wrapper für ein Kind innerhalb eines Grid. Web: `style={{gridColumn: span N}}`,
  *  Native: eigenes Width-Rechnen. */
 export type GridCellProps = {
@@ -1029,6 +1040,9 @@ export type CardOptions = {
      *  relatedList table sizing to the panel instead of the page) instead of
      *  normal document-flow height. Default false. */
     readonly fillHeight?: boolean;
+    /** false drops border, background, shadow and radius but keeps padding and
+     *  header slots — a panel inside a host surface such as a tab panel. Default true. */
+    readonly framed?: boolean;
 };
 /** Generische Card-Chrome (border/bg/radius/shadow + Header/Body/Footer) als
  *  Primitive — eine Quelle für alle Card-Flächen, statt pro App nachgebaut.
@@ -1159,6 +1173,8 @@ export type PageHeaderProps = {
     readonly recordTitle?: string;
     readonly status?: ReactNode;
     readonly actions?: ReactNode;
+    /** Land in the shell header's overflow menu at phone width. */
+    readonly overflowItems?: readonly ActionMenuItemSpec[];
 };
 /** One item in an `ActionOverflowMenu` (A7: header/row actions beyond the
  *  primary one collapse into this menu instead of a wall of buttons). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.330.0",
+  "version": "0.331.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.330.0",
-    "@cosmicdrift/kumiko-headless": "0.330.0",
-    "@cosmicdrift/kumiko-types": "0.330.0",
+    "@cosmicdrift/kumiko-framework": "0.331.0",
+    "@cosmicdrift/kumiko-headless": "0.331.0",
+    "@cosmicdrift/kumiko-types": "0.331.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -28,7 +28,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.330.0"
+    "@cosmicdrift/kumiko-locale-de": "0.331.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,30 @@
 [
+  {
+    "version": "0.331.0",
+    "type": "improvement",
+    "title": "entityList rows can expand into a related list with its own row actions (expandableRow)",
+    "detail": "`expandableRow` on an entityList declares a related list under each row, with the same fields as a projectionDetail `relatedList` section (query, `parentFilter` or `parentParam`, columns, row and toolbar actions, emptyState). The parent id is the row's `id`. An arrow button at the start of the row opens and closes the area, carries `aria-expanded`, and works by keyboard. Several rows can be open at once. A successful write from the area reloads both the related list and the parent list, so counters on the parent row update. The boot validator and the role projection check the area like a relatedList section. `DataTableProps` gains `expandedRowIds`, `onToggleRowExpanded` and `renderExpandedRow` for custom DataTable primitives."
+  },
+  {
+    "version": "0.331.0",
+    "type": "improvement",
+    "title": "relatedList columns format select, date and other field types like entityList columns (entity)",
+    "detail": "A relatedList section (projectionDetail tab or entityList `expandableRow`) takes an optional `entity`: an entity name or `feature:entity`. Columns that name a field of that entity render through the same cell formatter as an entityList column. A select shows as a status badge with its translated option label, dates are locale-formatted, and the header defaults to the field's label key. A column's own `sortable` still controls the header sort. The boot validator rejects an `entity` that does not resolve. Without `entity`, columns render as before."
+  },
+  {
+    "version": "0.330.1",
+    "type": "breaking",
+    "title": "Boolean fields in flow forms use FieldCellWidth \"toggle\" instead of \"auto\"",
+    "detail": "In flow forms (screen forms and drawers) a boolean field's label now shares the top line with its neighbours' labels and the switch sits on the input line. The `FieldCellWidth` union loses `\"auto\"` and gains `\"toggle\"`; the default web Grid maps it to a fixed minimum width.",
+    "migration": "Custom Grid/GridCell primitives keyed by FieldCellWidth: rename `auto` to `toggle`."
+  },
+  {
+    "version": "0.330.1",
+    "type": "improvement",
+    "title": "projectionDetail tab panels get page padding, recordTitleField on projectionDetail",
+    "detail": "Tab panels on a projectionDetail with `layout.mode: \"tabs\"` now pad their content like the rest of the page: extension, field-section, groups and writeForm tabs render as an unframed padded panel with space below the tab strip. relatedList tabs stay flush. This fixes extension tabs sitting flush against the shell edge since 0.330.0. `CardOptions.framed` (default true) drops the card frame and keeps the padding. A projectionDetail without `header` can set `recordTitleField`: the query output field then titles the page header (breadcrumb \"list > record\"). The boot check requires the field to be in the query's outputSchema and rejects it next to `header`.",
+    "migration": "Extension tab panels get their padding back, so extension components that added their own padding to make up for the flush panel in 0.330.0 should drop it. Set `recordTitleField: \"<field>\"` on a projectionDetail without `header` to show the record name in the breadcrumb."
+  },
   {
     "version": "0.330.0",
     "type": "fix",