@cosmicdrift/kumiko-renderer 0.330.2 → 0.332.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,9 +1,9 @@
 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 { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractCreatedId, extractIdField } from "../components/reference-create-dialog.js";
 import { RenderEdit, resolveRecordTitle, } from "../components/render-edit.js";
 import { needsActionConfirm, RenderEditActionButton, RenderEditActionConfirmDialog, } from "../components/render-edit-action-button.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();
                 } })] }));
 }
@@ -1585,6 +1621,46 @@ function runMetricNavigate(nav, navigate, record, host) {
 function isAbsoluteHttpUrl(value) {
     return /^https?:\/\//i.test(value) && isSafeHref(value);
 }
+// hrefFor throws for an entity without a detailFor screen; outside
+// createKumikoApp the feature list is empty, so navigateTargetAllows can't
+// rule that out beforehand. The NavApi owns target resolution, so asking it
+// and falling back to plain text covers both cases.
+function hrefForNavigate(nav, navigate, record) {
+    const entityId = navigate.entityId !== undefined ? String(record[navigate.entityId] ?? "") : undefined;
+    try {
+        if (navigate.entity !== undefined) {
+            return entityId === undefined || entityId === ""
+                ? undefined
+                : nav.hrefFor({ entity: navigate.entity, id: entityId });
+        }
+        if (navigate.screen !== undefined) {
+            return nav.hrefFor({
+                screenId: navigate.screen,
+                ...(entityId !== undefined && entityId !== "" && { entityId }),
+            });
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}
+function buildSubtitleParts(parts, record, nav, appFeatures, userRoles, host) {
+    return parts.flatMap((part) => {
+        const field = typeof part === "string" ? part : part.field;
+        const text = String(record[field] ?? "");
+        if (text === "")
+            return [];
+        const navigate = typeof part === "string" ? undefined : part.navigate;
+        if (navigate === undefined || !navigateTargetAllows(navigate, appFeatures, userRoles)) {
+            return [{ field, text }];
+        }
+        const href = hrefForNavigate(nav, navigate, record);
+        if (href === undefined)
+            return [{ field, text }];
+        return [{ field, text, href, onPress: () => runMetricNavigate(nav, navigate, record, host) }];
+    });
+}
 function headerStatusTone(header, record) {
     if (header.status === undefined)
         return undefined;
@@ -1623,7 +1699,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 +1711,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";
@@ -1851,7 +1940,10 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // Plain Text, not Heading — the Card title slot already renders as its own
     // heading element (h3); nesting another heading (h1) inside it is invalid HTML.
     const headerTitleSlot = header !== undefined ? (header.status !== undefined ? (_jsxs(Grid, { columns: "auto", children: [_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }), StatusBadge !== undefined ? (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-status", children: String(record[header.status] ?? "") }))] })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }))) : undefined;
-    const headerSubtitleSlot = header?.subtitle !== undefined ? (subtitleHref !== undefined ? (_jsx(Link, { href: subtitleHref, target: "_blank", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") })) : (_jsx(Text, { variant: "muted", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") }))) : undefined;
+    const subtitleParts = header !== undefined && typeof header.subtitle === "object"
+        ? buildSubtitleParts(header.subtitle, record, nav, appFeatures, userRoles, host)
+        : undefined;
+    const headerSubtitleSlot = subtitleParts !== undefined ? (subtitleParts.length > 0 ? (_jsx(Text, { testId: "kumiko-screen-projection-detail-subtitle", children: subtitleParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx(Text, { variant: "muted", decorative: true, children: " · " })), part.href !== undefined ? (_jsx(Link, { href: part.href, ...(part.onPress !== undefined && { onPress: part.onPress }), className: "underline", testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text })) : (_jsx(Text, { testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text }))] }, part.field))) })) : undefined) : typeof header?.subtitle === "string" ? (subtitleHref !== undefined ? (_jsx(Link, { href: subtitleHref, target: "_blank", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") })) : (_jsx(Text, { variant: "muted", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") }))) : undefined;
     // slots.header shares the header card with the actions (one card, actions
     // top right) instead of rendering as an unframed block above it.
     const metricItems = screen.metrics?.map((metric) => {
@@ -1869,12 +1961,13 @@ 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 === 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 || recordTitle !== undefined) && (_jsxs(Card, { slots: {

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.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";
@@ -212,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
@@ -1014,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 && {

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,23 @@ 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;
+// Fire-and-forget actions (schema navigate/drawer) can leave the toolbar for the
+// page header without losing the confirm dialog or busy/error surfacing.
+function isHeaderPromotableToolbarAction(action) {
+    return (action.style === "primary" && action.confirm === undefined && action.confirmRequired === false);
+}
 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,9 +137,23 @@ 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 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;
+    const createButton = onCreate !== undefined && createInPageHeader && pageHeaderCompact ? (_jsx(Button, { variant: "primary", icon: "plus", size: "icon", ariaLabel: effectiveCreateLabel, title: effectiveCreateLabel, onClick: onCreate, testId: "render-list-create" })) : onCreate !== undefined ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-create", className: "px-3.5", children: effectiveCreateLabel })) : undefined;
+    // Without onCreate (e.g. a navigate action as the list's only CTA) the primary
+    // toolbar action takes the header slot on phones, so it is not a text button
+    // squeezed next to the search field. Desktop keeps it in the toolbar.
+    const promotedToolbarAction = onCreate === undefined &&
+        PageHeader !== undefined &&
+        pageHeaderSlotAvailable &&
+        pageHeaderCompact
+        ? toolbarActions?.find(isHeaderPromotableToolbarAction)
+        : undefined;
+    const promotedActionButton = promotedToolbarAction !== undefined ? (_jsx(Button, { variant: "primary", icon: promotedToolbarAction.icon ?? "plus", size: "icon", ariaLabel: promotedToolbarAction.label, title: promotedToolbarAction.label, onClick: () => void promotedToolbarAction.onTrigger(), testId: `render-list-toolbar-action-${promotedToolbarAction.id}` })) : undefined;
+    const toolbarActionsInToolbar = toolbarActions?.filter((a) => a !== promotedToolbarAction) ?? [];
+    const hasToolbarActionsInToolbar = toolbarActionsInToolbar.length > 0;
+    const toolbarEnd = hasHeaderSlot ||
+        hasToolbarActionsInToolbar ||
+        (onCreate !== undefined && !createInPageHeader) ? (_jsxs(_Fragment, { children: [hasHeaderSlot && _jsx(ListHeaderSlotMount, { screen: screen }), hasToolbarActionsInToolbar &&
+                toolbarActionsInToolbar.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-
     // Button. Caller kann via emptyState-Prop komplett überschreiben.
     // Wenn weder onCreate noch ein Override gegeben ist, fällt die
@@ -148,7 +168,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 }), promotedActionButton !== undefined && PageHeader !== undefined && (_jsx(PageHeader, { actions: promotedActionButton })), referenceColumns.map((rc) => (_jsx(ReferenceLookupBridge, { field: rc.field, refEntity: rc.refEntity, labelField: rc.labelField, featureName: rc.refFeature, onMap: handleLookupMap }, rc.field))), _jsx(DataTable, { columns: enrichedVm.columns, rows: enrichedVm.rows, toolbarTitle: toolbarTitle, ...(onRowClick !== undefined && { onRowClick }), ...(composedEmptyState !== undefined && { emptyState: composedEmptyState }), ...(toolbarStart !== undefined && { toolbarStart }), ...(description !== undefined && !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/i18n-defaults.js

@@ -68,6 +68,11 @@ export const kumikoDefaultTranslations = {
         "kumiko.list.count.one": "1 entry",
         "kumiko.list.count.other": "{count} entries",
         "kumiko.list.row-actions.more": "More actions",
+        "kumiko.page-header.actions": "Page actions",
+        "kumiko.theme.dark": "Dark theme",
+        "kumiko.theme.light": "Light theme",
+        "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

@@ -43,6 +43,8 @@ export type ButtonProps = {
     readonly title?: string;
     /** Toggle state for toggle buttons — web sets `aria-pressed`; leave unset for plain buttons. */
     readonly pressed?: boolean;
+    /** Disclosure state for buttons that open a menu or panel — web sets `aria-expanded`. */
+    readonly expanded?: boolean;
     /** Breite — default="auto" (inhaltsbreit). "full" streckt CTA-Buttons auf
      *  die Container-Breite (Karten/Panels). Andere Breiten sind Layout-Sache
      *  des Containers, kein Button-Prop (Kit hält arbiträres Sizing draußen). */
@@ -77,6 +79,9 @@ export type LinkProps = {
      *  `rel` is set explicitly. */
     readonly target?: "_blank" | "_self" | "_parent" | "_top";
     readonly rel?: string;
+    /** Plain left-click handler (SPA navigation); `href` stays set for
+     *  modifier/middle clicks, which the browser handles itself. */
+    readonly onPress?: () => void;
     /** Layout-Zusätze (self-center, text-xs) — Web merged via cn(),
      *  Native-Impls ignorieren es (Präzedenz: CardProps.className). */
     readonly className?: string;
@@ -642,6 +647,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`. */
@@ -892,6 +908,8 @@ export type GridCellProps = {
  *  foreground). Custom-Impls mappen auf ihren TypeScale. */
 export type TextProps = {
     readonly variant?: "body" | "small" | "code" | "required-mark" | "muted";
+    /** Pure ornament (e.g. a separator glyph): hidden from assistive tech. */
+    readonly decorative?: boolean;
     readonly children: ReactNode;
     readonly testId?: string;
 };
@@ -1162,6 +1180,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). */
@@ -1172,6 +1192,7 @@ export type ActionMenuItemSpec = {
     readonly icon?: IconKey;
     readonly disabled?: boolean;
     readonly variant?: "default" | "danger";
+    readonly testId?: string;
     readonly onSelect: () => void;
 };
 export type ActionOverflowMenuProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.330.2",
+  "version": "0.332.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.2",
-    "@cosmicdrift/kumiko-headless": "0.330.2",
-    "@cosmicdrift/kumiko-types": "0.330.2",
+    "@cosmicdrift/kumiko-framework": "0.332.0",
+    "@cosmicdrift/kumiko-headless": "0.332.0",
+    "@cosmicdrift/kumiko-types": "0.332.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.2"
+    "@cosmicdrift/kumiko-locale-de": "0.332.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,23 @@
 [
+  {
+    "version": "0.332.0",
+    "type": "improvement",
+    "title": "projectionDetail header subtitle can show several parts, each optionally linking to the referenced record",
+    "detail": "`header.subtitle` accepts a list of parts (field name or `{ field, navigate }`). Empty parts drop out, the rest are joined by a \"·\" separator, and a part with `navigate` links to the referenced record (entity or screen target, only when reachable). The Link primitive gets an optional `onPress` for SPA navigation, Text an optional `decorative` flag. `subtitleHref` stays valid with the string form only; the boot validator rejects the combination with a list.",
+    "migration": "No code change needed."
+  },
+  {
+    "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",