@cosmicdrift/kumiko-renderer 0.356.0 → 0.357.0

package/dist/app/kumiko-screen.js

@@ -799,6 +799,7 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
         version: recordVersion,
         [UPDATE_CHANGES_KEY]: snap.changes,
     }), [entityId, recordVersion]);
+    const [formDirty, setFormDirty] = useState(false);
     const nav = useNav();
     const appFeatures = useAppFeatures();
     const dispatcher = useDispatcher();
@@ -866,7 +867,14 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
         onRecordLeft: handleRecordLeft,
         sameEntityScreenId,
         defaultWritePayloadId: entityId,
+        ...(formDirty && {
+            discardChanges: {
+                confirm: effectiveTranslate("kumiko.form.unsavedChangesActionConfirm"),
+                confirmLabel: effectiveTranslate("kumiko.form.unsavedChangesActionConfirmLabel"),
+            },
+        }),
     }), [
+        formDirty,
         record,
         effectiveTranslate,
         nav,
@@ -928,7 +936,7 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
                 entityId: entityId, 
                 // Stored customFields for the extension section, so editing shows the
                 // persisted values instead of behaving write-only.
-                extensionInitialValues: extensionInitialValues, schema: formSchema, writeCommand: writeCommand, payloadMode: "changes", buildPayload: buildPayload, serverFieldPathPrefix: `${UPDATE_CHANGES_KEY}.`, onSubmit: handleSubmitted, ...(screen.allowDelete !== false && { onDelete: handleDelete }), onCancel: handleCancel, onReload: () => void onReload(), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), ...(onCopyLink !== undefined && { onCopyLink }), ...(headerActions !== undefined && { actions: headerActions }), ...(headerMenuActions !== undefined && { menuActions: headerMenuActions }), buildSectionActions: buildSectionActions }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
+                extensionInitialValues: extensionInitialValues, schema: formSchema, writeCommand: writeCommand, payloadMode: "changes", buildPayload: buildPayload, serverFieldPathPrefix: `${UPDATE_CHANGES_KEY}.`, onSubmit: handleSubmitted, onDirtyChange: setFormDirty, ...(screen.allowDelete !== false && { onDelete: handleDelete }), onCancel: handleCancel, onReload: () => void onReload(), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), ...(onCopyLink !== undefined && { onCopyLink }), ...(headerActions !== undefined && { actions: headerActions }), ...(headerMenuActions !== undefined && { menuActions: headerMenuActions }), buildSectionActions: buildSectionActions }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     void onReload();
                 } })] }));
@@ -1605,7 +1613,14 @@ function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
     // carry a value — a stale/hand-crafted URL (?…q=x on a non-searchable
     // screen) must not smuggle a param the query's Zod schema doesn't accept.
     const activeSearch = searchable ? urlState.q : "";
-    const activeSort = sortable ? (urlState.sort ?? screen.defaultSort ?? null) : null;
+    // Same predicate that makes a header clickable: a stale link onto a
+    // sortable:false/unknown column must not reach the server (it answers 400).
+    const urlSort = urlState.sort;
+    const urlSortField = urlSort === null ? undefined : entity.fields[urlSort.field];
+    const urlSortAllowed = urlSortField !== undefined && "sortable" in urlSortField && urlSortField.sortable === true;
+    const activeSort = sortable
+        ? ((urlSortAllowed ? urlSort : null) ?? screen.defaultSort ?? null)
+        : null;
     const limit = urlState.pageSize ?? screen.pageSize ?? 50;
     // Pages-mode only (see header comment) — an author-set pagination:
     // "infinite" on a paginated projectionList is silently a no-op today.
@@ -1959,9 +1974,11 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // A writeForm section's handler creates a new record (see EditWriteFormSection's
     // doc) — both the outer record (header/metrics/other sections) and a sibling
     // relatedList section's own independently-fetched rows must reflect it. A
-    // query refetch alone only refreshes `record` below; bumping this into
-    // <RenderEdit>'s `key` forces a full remount so RelatedListSection's own
-    // useQuery call re-runs too (it has no `live` subscription of its own).
+    // query refetch alone only refreshes `record` below; bumping this as
+    // <RenderEdit>'s refreshToken makes RelatedListSection's own useQuery
+    // re-run too (it has no `live` subscription of its own). Refetch instead of
+    // remount (a `key`) so unsaved input in the other writeForm sections and
+    // the related lists' local state survive.
     const [reloadNonce, setReloadNonce] = useState(0);
     const reloadDetail = useCallback(async () => {
         await refetchAfterWrite(detailQuery.refetch);
@@ -2217,12 +2234,12 @@ 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: renderedDetailScreen, 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 ||
+    return (_jsxs(_Fragment, { children: [_jsx(RenderEdit, { refreshToken: reloadNonce, screen: renderedDetailScreen, 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: () => {
+                }), buildSectionActions: buildSectionActions, valueDisplay: screen.valueDisplay ?? "text" }, entityId), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     void reloadDetail();
                 } })] }));

package/dist/app/row-actions.d.ts

@@ -53,6 +53,10 @@ export declare function buildProjectionToolbarActions(options: {
     readonly record?: Readonly<Record<string, unknown>>;
     readonly host: ReturnHost | undefined;
 }): readonly ToolbarActionButton[] | undefined;
+export type DiscardChanges = {
+    readonly confirm: string;
+    readonly confirmLabel: string;
+};
 export declare function deletesShownRecord(action: RowActionWriteHandler, payload: Readonly<Record<string, unknown>>, shownRecordId: unknown): boolean;
 export type RecordLeftHandler = (action: RowActionWriteHandler, resultData: unknown, deletedShownRecord: boolean) => void;
 export declare function buildRecordActions(options: {
@@ -85,5 +89,9 @@ export declare function buildRecordActions(options: {
      *  caller editing a fixed entity passes its route id so the payload does
      *  not depend on the loaded record carrying an `id` field. */
     readonly defaultWritePayloadId?: string;
+    /** Translated hint added to the confirm of every writeHandler and drawer
+     *  action (they reload or remount the surrounding form). Set while that
+     *  form holds unsaved input so it is not lost silently. */
+    readonly discardChanges?: DiscardChanges;
 }): readonly RenderEditAction[] | undefined;
 export {};

package/dist/app/row-actions.js

@@ -341,14 +341,27 @@ function buildNavigateRecordAction(action, options) {
         return buildNavigateScreenAction(action, action.screen, options);
     return undefined;
 }
+// The action's own confirm text stays first; the discard hint follows after a
+// blank line so both show in the single confirm dialog.
+function withDiscardHint(ownConfirm, discardChanges) {
+    if (discardChanges === undefined)
+        return ownConfirm;
+    return ownConfirm === undefined
+        ? discardChanges.confirm
+        : `${ownConfirm}\n\n${discardChanges.confirm}`;
+}
 function buildDrawerRecordAction(action, options) {
-    const { record, translate, actionIcon, openDrawer } = options;
+    const { record, translate, actionIcon, openDrawer, discardChanges } = options;
     return {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
         ...(action.display !== undefined && { display: action.display }),
         confirmRequired: false,
+        ...(discardChanges !== undefined && {
+            confirm: discardChanges.confirm,
+            confirmLabel: discardChanges.confirmLabel,
+        }),
         ...(actionIcon !== undefined && { icon: actionIcon }),
         onPress: () => {
             const initialValues = action.params !== undefined ? evalRowExtractor(action.params, record) : undefined;
@@ -365,18 +378,20 @@ export function deletesShownRecord(action, payload, shownRecordId) {
         payload["id"] === shownRecordId);
 }
 function buildWriteHandlerRecordAction(action, options) {
-    const { record, translate, actionIcon, dispatcher, onWriteSuccess, defaultWritePayloadId, onRecordLeft, } = options;
+    const { record, translate, actionIcon, dispatcher, onWriteSuccess, defaultWritePayloadId, onRecordLeft, discardChanges, } = options;
     const shownRecordId = defaultWritePayloadId ?? record["id"];
+    const confirm = withDiscardHint(action.confirm !== undefined ? translate(action.confirm) : undefined, discardChanges);
+    // The discard label wins: the action then also throws away the unsaved input.
+    const confirmLabel = discardChanges?.confirmLabel ??
+        (action.confirmLabel !== undefined ? translate(action.confirmLabel) : undefined);
     return {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
         ...(action.display !== undefined && { display: action.display }),
         ...(actionIcon !== undefined && { icon: actionIcon }),
-        ...(action.confirm !== undefined && { confirm: translate(action.confirm) }),
-        ...(action.confirmLabel !== undefined && {
-            confirmLabel: translate(action.confirmLabel),
-        }),
+        ...(confirm !== undefined && { confirm }),
+        ...(confirmLabel !== undefined && { confirmLabel }),
         onPress: async () => {
             const payload = action.payload !== undefined
                 ? evalRowExtractor(action.payload, record)
@@ -402,7 +417,7 @@ function buildWriteHandlerRecordAction(action, options) {
 // resolved against the record currently being viewed/edited, independent of
 // any table row.
 export function buildRecordActions(options) {
-    const { actions, record, translate, nav, host, dispatcher, openDrawer, onWriteSuccess, onRecordLeft, defaultScreenTargetEntityId, sameEntityScreenId, defaultWritePayloadId, } = options;
+    const { actions, record, translate, nav, host, dispatcher, openDrawer, onWriteSuccess, onRecordLeft, defaultScreenTargetEntityId, sameEntityScreenId, defaultWritePayloadId, discardChanges, } = options;
     const out = [];
     for (const action of actions) {
         if (action.visible !== undefined && !evalFieldCondition(action.visible, record))
@@ -423,7 +438,13 @@ export function buildRecordActions(options) {
             continue;
         }
         if (action.kind === "drawer") {
-            out.push(buildDrawerRecordAction(action, { record, translate, actionIcon, openDrawer }));
+            out.push(buildDrawerRecordAction(action, {
+                record,
+                translate,
+                actionIcon,
+                openDrawer,
+                discardChanges,
+            }));
             continue;
         }
         // writeHandler — skip without a dispatcher instead of crashing.
@@ -437,6 +458,7 @@ export function buildRecordActions(options) {
             onWriteSuccess,
             defaultWritePayloadId,
             onRecordLeft,
+            discardChanges,
         }));
     }
     return out.length > 0 ? out : undefined;

package/dist/app/secret-mint-body.js

@@ -47,7 +47,7 @@ function isBlank(value) {
 export function SecretMintBody({ schema, screen, translate }) {
     const nav = useNav();
     const returnTarget = useReturnTarget(screen.id);
-    const { Card, Heading, Banner, Button, Text, Grid, GridCell, Section, SecretReveal } = usePrimitives();
+    const { Card, Heading, Banner, Button, Text, Grid, GridCell, Section, SecretReveal, Field, Input, } = usePrimitives();
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
     const synthEntity = useMemo(() => synthesizeActionFormEntity(screen.fields), [screen.fields]);
@@ -75,6 +75,7 @@ export function SecretMintBody({ schema, screen, translate }) {
     ]);
     const [revealed, setRevealed] = useState(null);
     const [done, setDone] = useState(false);
+    const [acknowledged, setAcknowledged] = useState(false);
     // The secret was minted server-side but none of the declared reveal fields
     // came back; the mint form must not return (a re-mint would invalidate it).
     const [revealMissing, setRevealMissing] = useState(false);
@@ -108,6 +109,7 @@ export function SecretMintBody({ schema, screen, translate }) {
             setRevealMissing(true);
             return;
         }
+        setAcknowledged(false);
         setRevealed(values);
         carriedRef.current =
             confirm?.carry !== undefined ? extractCarriedValues(result.data, confirm.carry) : {};
@@ -175,7 +177,9 @@ export function SecretMintBody({ schema, screen, translate }) {
                 },
             ];
         });
-        const revealContent = (_jsxs(_Fragment, { children: [_jsx(Heading, { variant: "page", children: effectiveTranslate(screen.reveal.title ?? "kumiko.secretMint.title") }), _jsx(Banner, { variant: "warning", testId: "kumiko-screen-secret-mint-warning", children: effectiveTranslate(screen.reveal.warning ?? "kumiko.secretMint.warning") }), SecretReveal !== undefined ? (_jsx(SecretReveal, { values: values, copyLabel: effectiveTranslate("kumiko.secretMint.copy"), copiedLabel: effectiveTranslate("kumiko.secretMint.copied"), testId: "kumiko-screen-secret-mint-reveal" })) : (_jsx(Grid, { columns: 1, testId: "kumiko-screen-secret-mint-reveal", children: values.map((v) => (_jsxs(GridCell, { children: [_jsx(Text, { children: v.label }), _jsx(Text, { variant: "code", children: v.value })] }, v.label))) }))] }));
+        const acknowledgeKey = screen.reveal.acknowledge;
+        const acknowledgeBlocked = acknowledgeKey !== undefined && !acknowledged;
+        const revealContent = (_jsxs(_Fragment, { children: [_jsx(Heading, { variant: "page", children: effectiveTranslate(screen.reveal.title ?? "kumiko.secretMint.title") }), _jsx(Banner, { variant: "warning", testId: "kumiko-screen-secret-mint-warning", children: effectiveTranslate(screen.reveal.warning ?? "kumiko.secretMint.warning") }), SecretReveal !== undefined ? (_jsx(SecretReveal, { values: values, copyLabel: effectiveTranslate("kumiko.secretMint.copy"), copiedLabel: effectiveTranslate("kumiko.secretMint.copied"), testId: "kumiko-screen-secret-mint-reveal" })) : (_jsx(Grid, { columns: 1, testId: "kumiko-screen-secret-mint-reveal", children: values.map((v) => (_jsxs(GridCell, { children: [_jsx(Text, { children: v.label }), _jsx(Text, { variant: "code", children: v.value })] }, v.label))) })), acknowledgeKey !== undefined && (_jsx(Field, { id: "secret-mint-acknowledge", label: effectiveTranslate(acknowledgeKey), layout: "inline", testId: "secret-mint-acknowledge", children: _jsx(Input, { kind: "boolean", id: "secret-mint-acknowledge", name: "secret-mint-acknowledge", value: acknowledged, onChange: setAcknowledged }) }))] }));
         // One screen form like the mint phase: the reveal leads the form column
         // instead of the confirm form nesting a second card inside a card. The
         // keys stop the mint and confirm forms sharing one instance (and its
@@ -186,9 +190,9 @@ export function SecretMintBody({ schema, screen, translate }) {
             if (confirmCurrencyLoading) {
                 return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
             }
-            return (_jsx(RenderEdit, { screen: confirmScreen, i18nScreenId: screen.id, entity: confirmEntity, featureName: schema.featureName, initial: confirmInitial ?? {}, writeCommand: confirm.handler, payloadMode: "values", buildPayload: (snapshot) => ({ ...snapshot.values, ...carriedRef.current }), onSubmit: handleConfirmSubmitted, onCancel: handleCancel ?? restartMint, fillScreenHeight: true, leadContent: _jsx(Section, { testId: "kumiko-screen-secret-mint-card", children: revealContent }), ...(translate !== undefined && { translate }), ...(confirm.submitLabel !== undefined && { submitLabel: confirm.submitLabel }) }, "confirm"));
+            return (_jsx(RenderEdit, { screen: confirmScreen, i18nScreenId: screen.id, entity: confirmEntity, featureName: schema.featureName, initial: confirmInitial ?? {}, writeCommand: confirm.handler, payloadMode: "values", buildPayload: (snapshot) => ({ ...snapshot.values, ...carriedRef.current }), onSubmit: handleConfirmSubmitted, onCancel: handleCancel ?? restartMint, fillScreenHeight: true, submitBlocked: acknowledgeBlocked, leadContent: _jsx(Section, { testId: "kumiko-screen-secret-mint-card", children: revealContent }), ...(translate !== undefined && { translate }), ...(confirm.submitLabel !== undefined && { submitLabel: confirm.submitLabel }) }, "confirm"));
         }
-        return (_jsxs(Card, { options: { screenBody: true }, testId: "kumiko-screen-secret-mint-card", children: [revealContent, _jsx(Button, { type: "button", variant: "primary", onClick: finishMint, testId: "kumiko-screen-secret-mint-confirm", children: effectiveTranslate(screen.reveal.confirmLabel ?? "kumiko.secretMint.confirm") })] }));
+        return (_jsxs(Card, { options: { screenBody: true }, testId: "kumiko-screen-secret-mint-card", children: [revealContent, _jsx(Button, { type: "button", variant: "primary", onClick: finishMint, disabled: acknowledgeBlocked, testId: "kumiko-screen-secret-mint-confirm", children: effectiveTranslate(screen.reveal.confirmLabel ?? "kumiko.secretMint.confirm") })] }));
     }
     if (mintCurrencyLoading) {
         return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));

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

@@ -9,6 +9,14 @@ export type SelectOptionEntry = {
 };
 export declare function staticSelectOptions(field: EditFieldViewModel): readonly SelectOptionEntry[];
 export declare function mergeOptionAvailability(options: readonly SelectOptionEntry[], rows: readonly unknown[], current: string): readonly SelectOptionEntry[];
+export declare function filterUnavailableOptions(options: readonly SelectOptionEntry[], rows: readonly unknown[], currentValues: readonly string[]): readonly SelectOptionEntry[];
+type AvailabilityOptionsMultiSelectProps = {
+    readonly field: EditFieldViewModel;
+    readonly query: string;
+    readonly currentValues: readonly string[];
+    readonly children: (options: readonly SelectOptionEntry[]) => ReactNode;
+};
+export declare function AvailabilityOptionsMultiSelect({ field, query, currentValues, children, }: AvailabilityOptionsMultiSelectProps): ReactNode;
 type AvailabilityOptionsSelectProps = {
     readonly field: EditFieldViewModel;
     readonly query: string;

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

@@ -36,6 +36,22 @@ export function mergeOptionAvailability(options, rows, current) {
         };
     });
 }
+// Combobox primitives cannot disable a single option, so unavailable ones are
+// dropped; an already selected value stays listed so it can still be removed.
+export function filterUnavailableOptions(options, rows, currentValues) {
+    const unavailable = new Set();
+    for (const row of rows) {
+        if (isAvailabilityRow(row) && row.disabled === true)
+            unavailable.add(row.value);
+    }
+    return options.filter((option) => !unavailable.has(option.value) || currentValues.includes(option.value));
+}
+// Until the result arrives, and when the query fails, every static option is
+// shown; the write path enforces the rule either way.
+export function AvailabilityOptionsMultiSelect({ field, query, currentValues, children, }) {
+    const { data } = useQuery(query, {});
+    return children(filterUnavailableOptions(staticSelectOptions(field), data?.rows ?? [], currentValues));
+}
 // Select with static options whose availability (SelectFieldDef.optionsAvailabilityQuery)
 // comes from a query, so it has to be a mounted component for useQuery. Until the
 // result arrives, and when the query fails, every option stays choosable; the write

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, embedded, onAfterWrite, }: {
+export declare function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, embedded, onAfterWrite, refreshToken, }: {
     readonly section: EditRelatedListSectionViewModel;
     readonly parentId: string;
     /** The enclosing projectionDetail's own record (the "Akte") — evaluates
@@ -30,4 +30,7 @@ export declare function RelatedListSection({ section, parentId, record, featureN
      *  toolbar action, emptyState action) succeeded — lets a host reload data
      *  the write also changed. */
     readonly onAfterWrite?: () => void | Promise<void>;
+    /** A change (not the mount) refetches the rows in place, keeping local
+     *  sort/search/filter state — the host's record changed without a remount. */
+    readonly refreshToken?: number;
 }): ReactNode;

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { evalFieldCondition, normalizeListColumn, parseRefTarget, relatedListGroupHeaderLabel, relatedListGroupKey, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAppFeatures } from "../app/app-features-context.js";
 import { buildFilterFacets, buildFilterPayload, mergeReferenceFacetOptions, resolveProjectionFacetSpecs, } from "../app/list-facets.js";
 import { useNav } from "../app/nav.js";
@@ -82,7 +82,7 @@ function buildRowTone(rule) {
         return undefined;
     return (row) => (evalFieldCondition(rule, { ...row.values }) ? rule.tone : undefined);
 }
-export function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, embedded, onAfterWrite, }) {
+export function RelatedListSection({ section, parentId, record, featureName, translate, hideTitle, grow, onOpenDrawer, actions, embedded, onAfterWrite, refreshToken, }) {
     const { Banner, Section, Card, FillContainer, Text, Button, Dialog } = usePrimitives();
     const [emptyStateActionError, setEmptyStateActionError] = useState(null);
     const t = useTranslation();
@@ -161,6 +161,13 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
     ]);
     const rowsQuery = useQuery(section.query, payload);
     const ownRefetch = rowsQuery.refetch;
+    const lastRefreshTokenRef = useRef(refreshToken);
+    useEffect(() => {
+        if (lastRefreshTokenRef.current === refreshToken)
+            return;
+        lastRefreshTokenRef.current = refreshToken;
+        void ownRefetch();
+    }, [refreshToken, ownRefetch]);
     const refetchSelfAndHost = useCallback(async () => {
         await ownRefetch();
         await onAfterWrite?.();

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

@@ -48,6 +48,11 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
     readonly onDelete?: () => Promise<DispatcherError | void> | DispatcherError | void;
     readonly onCancel?: () => void;
     readonly onReload?: () => void;
+    /** Bumped by the host after it refetched `initial`. A change (not the mount)
+     *  re-seeds a clean form with the new `initial` and makes embedded relatedList
+     *  sections refetch, instead of the host remounting the whole form via `key`
+     *  (which would drop unsaved input in sibling writeForm sections). */
+    readonly refreshToken?: number;
     /** Fires when the form gains or loses unsaved input (field changes or a
      *  dirty extension section). Lets a host such as a drawer guard closing. */
     readonly onDirtyChange?: (dirty: boolean) => void;
@@ -193,6 +198,10 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
      *  rhythm — for content that belongs to the form but is no field (e.g. the
      *  secret a confirm step refers to). */
     readonly leadContent?: ReactNode;
+    /** Blocks submit (button and Enter) while fields stay editable — unlike
+     *  `disabled`, which locks the whole form. For a gate the host owns, e.g.
+     *  an acknowledgement checkbox in `leadContent`. */
+    readonly submitBlocked?: boolean;
     /** Show the unsaved-changes footer (count, Discard, "Save changes") even
      *  without an entity id or a screen-height form — for hosts that edit an
      *  existing server-side record through `customSubmit` (configEdit, also when

package/dist/components/render-edit.js

@@ -224,7 +224,7 @@ function resolveTitleTemplate(template, values, translate, fallback) {
     return translate(template, values);
 }
 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, menuActions, onRelatedListDrawerAction, submitLabel, submitVariant, submitWithoutChanges, footerActions, summary, labelAppendix, fieldAppendix, fieldAppendixPlacement, fieldDescription, fieldAccent, markChangedFields = false, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, dirtyFooter, validateOnChange, headerRegion, buildSectionActions, leadContent, } = props;
+    const { screen, entity, featureName, initial, writeCommand, translate: translateProp, ctx, schema, onSubmit, payloadMode = "values", buildPayload, serverFieldPathPrefix, onDelete, onCancel, onReload, refreshToken, onDirtyChange, onCopyLink, actions, menuActions, onRelatedListDrawerAction, submitLabel, submitVariant, submitWithoutChanges, footerActions, summary, labelAppendix, fieldAppendix, fieldAppendixPlacement, fieldDescription, fieldAccent, markChangedFields = false, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, dirtyFooter, validateOnChange, headerRegion, buildSectionActions, leadContent, submitBlocked = false, } = props;
     const i18nScreenId = props.i18nScreenId ?? screen.id;
     const { customSubmit } = props;
     // Translate-Fallback: wenn der Caller keine Translate-Fn übergibt,
@@ -357,6 +357,17 @@ export function RenderEdit(props) {
         ...(ctx !== undefined && { ctx }),
         ...(submitConfig !== undefined && { submit: submitConfig }),
     });
+    const lastRefreshTokenRef = useRef(refreshToken);
+    useEffect(() => {
+        if (lastRefreshTokenRef.current === refreshToken)
+            return;
+        lastRefreshTokenRef.current = refreshToken;
+        // Never overwrite user input: a dirty form keeps its values.
+        if (controller.getSnapshot().isDirty)
+            return;
+        controller.setValues(initial);
+        controller.rebase();
+    }, [refreshToken, controller, initial]);
     // Derived from the screen id + the host entity id only — never from
     // `vm.id`, which lives in the form values a restore mutates (load under one
     // key, save under another). Edit-mode: `${screen.id}:${entityIdProp}`,
@@ -902,7 +913,7 @@ export function RenderEdit(props) {
         // Locked state (#1896): the submit button is visibly disabled, but a
         // native form submit (Enter key) reaches this handler regardless of the
         // button's disabled attribute — block it here too, not just in the UI.
-        if (disabled)
+        if (disabled || submitBlocked)
             return;
         // Sync guard — React state `isSubmitting` is too late for double-clicks
         // in the same tick (customSubmit has no submitInFlight of its own).
@@ -1161,7 +1172,8 @@ export function RenderEdit(props) {
                     !insideDrawer &&
                     submitWithoutChanges !== true) ||
                     isSubmitting ||
-                    disabled, loading: isSubmitting, variant: submitVariant ?? "primary", testId: "render-edit-submit", children: translate(submitLabel ??
+                    disabled ||
+                    submitBlocked, loading: isSubmitting, variant: submitVariant ?? "primary", testId: "render-edit-submit", children: translate(submitLabel ??
                     (isWizard
                         ? "kumiko.actions.finish"
                         : hasDirtyFooter
@@ -1342,7 +1354,7 @@ export function RenderEdit(props) {
                                     return null;
                                 const mount = (_jsx(RelatedListSection, { section: section, parentId: parentId, 
                                     // @cast-boundary form-values: TValues ist strukturell ein Record.
-                                    record: snapshot.values, featureName: featureName, translate: translate, hideTitle: hideSectionTitles, ...(fillScreenHeight === true && { grow: true }), ...(hideSectionTitles !== true &&
+                                    record: snapshot.values, featureName: featureName, translate: translate, hideTitle: hideSectionTitles, ...(refreshToken !== undefined && { refreshToken }), ...(fillScreenHeight === true && { grow: true }), ...(hideSectionTitles !== true &&
                                         sectionActionsEl !== undefined && { actions: sectionActionsEl }), ...(onRelatedListDrawerAction !== undefined && {
                                         onOpenDrawer: onRelatedListDrawerAction,
                                     }) }, section.title));

package/dist/components/render-field.js

@@ -13,7 +13,7 @@ import { useQuery } from "../hooks/use-query.js";
 import { referenceOptionSource } from "../hooks/use-reference-lookup.js";
 import { useLocale, useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
-import { AvailabilityOptionsSelect, staticSelectOptions } from "./availability-options-select.js";
+import { AvailabilityOptionsMultiSelect, AvailabilityOptionsSelect, staticSelectOptions, } from "./availability-options-select.js";
 import { EmbeddedListField } from "./embedded-list-field.js";
 import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
 import { QueryOptionsSelect } from "./query-options-select.js";
@@ -348,16 +348,12 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
         case "tz":
             return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
         case "multiSelect": {
-            const rawOptions = field.options ?? [];
-            const labels = field.optionLabels;
-            const multiSelectOptions = labels !== undefined
-                ? rawOptions.map((value) => ({ value, label: labels[value] ?? value }))
-                : rawOptions.map((value) => ({ value, label: value }));
             const arrayValue = Array.isArray(field.value) ? field.value : [];
-            if (field.display === "checkboxes") {
-                return (_jsx(MultiSelectCheckboxes, { field: field, id: id, options: multiSelectOptions, value: arrayValue, onChange: (v) => onChange(v) }));
+            const renderMultiSelect = (options) => field.display === "checkboxes" ? (_jsx(MultiSelectCheckboxes, { field: field, id: id, options: options, value: arrayValue, onChange: (v) => onChange(v) })) : (_jsx(Input, { kind: "combobox", ...common, multiple: true, value: arrayValue, onChange: (v) => onChange(v), options: options }));
+            if (field.selectOptionsAvailabilityQuery !== undefined && field.readOnly !== true) {
+                return (_jsx(AvailabilityOptionsMultiSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, currentValues: arrayValue, children: renderMultiSelect }));
             }
-            return (_jsx(Input, { kind: "combobox", ...common, multiple: true, value: arrayValue, onChange: (v) => onChange(v), options: multiSelectOptions }));
+            return renderMultiSelect(staticSelectOptions(field));
         }
         case "money": {
             const currency = resolveMoneyCurrency(field.value, field.currency);
@@ -421,7 +417,7 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
                 return (_jsx(Input, { kind: "textarea", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(rows !== undefined && { rows }) }));
             }
             const icon = resolveFieldIcon(field);
-            return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }) }));
+            return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }), ...(field.autoComplete !== undefined && { autoComplete: field.autoComplete }) }));
         }
     }
 }

package/dist/components/write-form-section.d.ts

@@ -5,17 +5,16 @@ export type WriteFormSectionProps = {
     readonly featureName: string;
     readonly translate?: Translate;
     readonly hideTitle?: boolean;
-    /** Fired after a successful submit — projectionDetail reloads its own
-     *  record (a new one now exists) via a full RenderEdit remount, see
-     *  ProjectionDetailBody's reloadNonce/key in kumiko-screen.tsx. */
+    /** Fired after a successful submit, once this section reset itself to its
+     *  initial values — projectionDetail refetches its record (a new one now
+     *  exists), see ProjectionDetailBody's reloadNonce in kumiko-screen.tsx. */
     readonly onSubmitted: () => void;
     /** section.actions, already resolved into buttons by the caller —
-     *  rendered alongside (before) the section's own submit button in the
-     *  title-row actions slot. */
+     *  rendered in the title row, apart from the section's own submit button. */
     readonly actions?: ReactNode;
     /** Set when this section is a whole tab: the submit button is handed to
      *  the host form's footer (pinned like every other screen's save) instead
-     *  of the section's title row. Called with undefined on unmount. */
+     *  of the end of the section body. Called with undefined on unmount. */
     readonly onFooterAction?: (action: ReactNode | undefined) => void;
 };
 export declare function WriteFormSection({ section, featureName, translate, hideTitle, onSubmitted, actions, onFooterAction, }: WriteFormSectionProps): ReactNode;

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

@@ -55,6 +55,11 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
             const result = await controller.submit();
             if (result.isSuccess) {
                 setError(null);
+                // Edits typed while the write was in flight stay; only a clean form is reset.
+                if (!controller.getSnapshot().isDirty) {
+                    controller.setValues(initial);
+                    controller.rebase();
+                }
                 onSubmitted();
                 return;
             }
@@ -73,7 +78,6 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
             setIsSubmitting(false);
         }
     }
-    const content = (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: section.columns, children: section.fields.map((field) => (_jsx(GridCellForField, { field: field, columns: section.columns, issues: snapshot.errors[field.field], onChange: (v) => controller.setField(field.field, v), GridCell: GridCell, featureName: featureName, allIssues: snapshot.errors, valueDisplay: "form", row: snapshot.values }, field.field))) }), error !== null && (_jsx(Banner, { variant: "error", testId: "write-form-section-error", children: error }))] }));
     // type="button" (not "submit") is load-bearing: this section is deliberately
     // NOT a nested <form> (see the component doc above), so a "submit" type
     // would instead trigger the host RenderEdit's own form submit.
@@ -90,17 +94,15 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
         onFooterAction(submitButton);
         return () => onFooterAction(undefined);
     }, [onFooterAction, isSubmitting, submitLabel]);
-    const titleRowActions = onFooterAction !== undefined ? (actions) : actions !== undefined ? (_jsxs(_Fragment, { children: [actions, submitButton] })) : (submitButton);
+    const content = (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: section.columns, children: section.fields.map((field) => (_jsx(GridCellForField, { field: { ...field, value: snapshot.values[field.field] }, columns: section.columns, issues: snapshot.errors[field.field], onChange: (v) => controller.setField(field.field, v), GridCell: GridCell, featureName: featureName, allIssues: snapshot.errors, valueDisplay: "form", row: snapshot.values }, field.field))) }), error !== null && (_jsx(Banner, { variant: "error", testId: "write-form-section-error", children: error })), onFooterAction === undefined && (_jsx(Card, { options: { framed: false, footerBordered: false, footerInset: false }, slots: { footer: submitButton }, testId: "write-form-section-submit-row" }))] }));
     // Section always flattens to a borderless divider when rendered inside
     // 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, { options: { framed: false }, slots: {
                 ...(section.description !== undefined && { subtitle: section.description }),
-                headerActions: titleRowActions,
+                ...(actions !== undefined && { headerActions: actions }),
             }, testId: `write-form-${section.title ?? section.handler}`, children: content }));
     }
-    // Submit plus caller actions share the title row's actions slot (submit is
-    // lifted into the footer instead when onFooterAction is set).
-    return (_jsx(Section, { ...(section.title !== undefined && { title: section.title }), ...(section.description !== undefined && { subtitle: section.description }), ...(section.icon !== undefined && { icon: section.icon }), actions: titleRowActions, testId: `write-form-${section.title ?? section.handler}`, children: content }));
+    return (_jsx(Section, { ...(section.title !== undefined && { title: section.title }), ...(section.description !== undefined && { subtitle: section.description }), ...(section.icon !== undefined && { icon: section.icon }), ...(actions !== undefined && { actions }), testId: `write-form-${section.title ?? section.handler}`, children: content }));
 }

package/dist/i18n-defaults.js

@@ -95,6 +95,8 @@ export const kumikoDefaultTranslations = {
         "kumiko.form.saveChanges": "Save changes",
         "kumiko.form.unsaved.one": "1 unsaved change",
         "kumiko.form.unsaved.other": "{count} unsaved changes",
+        "kumiko.form.unsavedChangesActionConfirm": "You have unsaved changes in this form. They will be lost if you continue.",
+        "kumiko.form.unsavedChangesActionConfirmLabel": "Discard changes and continue",
         "kumiko.wizard.next-with-title": "Next: {title}",
         "kumiko.wizard.save-and-close": "Save and close",
         "kumiko.pager.previousPage": "Previous page",

package/dist/primitives.d.ts

@@ -1157,6 +1157,8 @@ export type CardOptions = {
     readonly radius?: "lg" | "xl";
     /** Footer abgehoben mit border-t + bg-muted/30. Default true. */
     readonly footerBordered?: boolean;
+    /** Footer horizontal padding. false = none, so footer content aligns with the card edge. Default true. */
+    readonly footerInset?: boolean;
     /** Joins the ancestor fillHeight flex chain (fw#2722/#2778 — a tabs-mode
      *  relatedList table sizing to the panel instead of the page) instead of
      *  normal document-flow height. Default false. */

package/package.json

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

package/src/changes.json

@@ -1,4 +1,33 @@
 [
+  {
+    "version": "0.357.0",
+    "type": "improvement",
+    "title": "MultiSelect inputs load optionsAvailabilityQuery and hide unavailable options"
+  },
+  {
+    "version": "0.357.0",
+    "type": "improvement",
+    "title": "HeaderActionGroup replaces the overflow menu child selector for header action wrappers",
+    "detail": "App wrappers around headerActions are no longer restyled into a stacked column inside the phone overflow menu (the [&>div] child selector reached into app markup). Use HeaderActionGroup instead: a horizontal row in the header, a stacked column in the overflow menu."
+  },
+  {
+    "version": "0.357.0",
+    "type": "breaking",
+    "title": "List card meta values wrap instead of being clipped; more than 3 meta columns fail boot",
+    "migration": "Narrow list cards (entityList, projectionList, relatedList sections, expandableRow) now render meta values as a dot-separated row that wraps onto further lines instead of being cut off after two lines (and no longer subject to a silent runtime cap of 3 values); only a single value wider than the card is truncated. Meta columns are all columns except the title (first column), the status select and columns with hideOnNarrow: true. validateBoot now rejects a list with more than 3 meta columns and names feature, screen, section and fields. Fix: mark the extra columns hideOnNarrow: true (tables keep them) or drop them. collectCardMetaOverflow(features) from @cosmicdrift/kumiko-framework/engine lists all offenders at once. headless now also honors hideOnNarrow on reference, derived, row-meta and renderer-only columns, which it previously ignored there."
+  },
+  {
+    "version": "0.357.0",
+    "type": "fix",
+    "title": "projectionList ignores a URL sort param on columns that are not sortable",
+    "detail": "A stale link like `?<screen>.sort=<col>` onto a `sortable: false` or unknown column is no longer sent to the server (which answers 400 since 0.355); the screen falls back to its defaultSort."
+  },
+  {
+    "version": "0.357.0",
+    "type": "breaking",
+    "title": "Section actions render in the title row instead of a footer; WriteFormSection submit moves below its fields",
+    "migration": "Section.actions (renderer-web DefaultSection) render top right in the title row since #3241, no longer as a footer. A button that depends on content below it (a confirmation checkbox, a list it acts on) belongs in the section's children instead of actions. WriteFormSection's own submit button now sits below its fields; caller actions stay in the title row."
+  },
   {
     "version": "0.356.0",
     "type": "improvement",