@cosmicdrift/kumiko-renderer 0.332.0 → 0.334.0

package/dist/app/row-actions.js

@@ -93,6 +93,7 @@ function buildNavigateRowAction(action, translate, nav, host) {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
+        ...(action.display !== undefined && { display: action.display }),
         confirmRequired: false,
         ...(action.rowClick === true && { rowClick: true }),
         ...(actionIcon !== undefined && { icon: actionIcon }),
@@ -125,6 +126,7 @@ function buildDrawerRowAction(action, translate, openDrawer) {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
+        ...(action.display !== undefined && { display: action.display }),
         confirmRequired: false,
         ...(actionIcon !== undefined && { icon: actionIcon }),
         onTrigger: (row) => {
@@ -149,6 +151,7 @@ function buildWriteHandlerRowAction(action, translate, refetch, dispatcher) {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
+        ...(action.display !== undefined && { display: action.display }),
         icon: resolveActionIcon(action.id, action.icon),
         ...(action.confirm !== undefined && { confirm: translate(action.confirm) }),
         ...(action.confirmLabel !== undefined && {
@@ -290,47 +293,52 @@ export function buildProjectionToolbarActions(options) {
     }
     return out.length > 0 ? out : undefined;
 }
-function buildNavigateRecordAction(action, options) {
-    const { record, translate, nav, host, actionIcon, defaultScreenTargetEntityId, sameEntityScreenId, } = options;
-    if (action.entity !== undefined) {
-        const targetEntity = action.entity;
-        const id = action.entityId !== undefined ? String(record[action.entityId] ?? "") : "";
-        return {
-            id: action.id,
-            label: translate(action.label),
-            ...(action.style !== undefined && { style: action.style }),
-            confirmRequired: false,
-            ...(actionIcon !== undefined && { icon: actionIcon }),
-            onPress: () => {
-                // No entityId on record (id === "") → nothing to navigate to.
-                if (id !== "") {
-                    const params = navigateActionSearchParams(action, record);
-                    navigateWithReturnTo(nav, { entity: targetEntity, id }, host, params);
-                }
-            },
-        };
-    }
-    if (action.screen !== undefined) {
-        const explicit = action.entityId !== undefined ? String(record[action.entityId] ?? "") : undefined;
-        const fallback = sameEntityScreenId?.(action.screen) ?? defaultScreenTargetEntityId;
-        const navEntityId = explicit ?? fallback;
-        const targetScreen = action.screen;
-        return {
-            id: action.id,
-            label: translate(action.label),
-            ...(action.style !== undefined && { style: action.style }),
-            confirmRequired: false,
-            ...(actionIcon !== undefined && { icon: actionIcon }),
-            onPress: () => {
-                const target = {
-                    screenId: targetScreen,
-                    ...(navEntityId !== undefined && navEntityId !== "" && { entityId: navEntityId }),
-                };
+function navigateActionBase(action, translate, actionIcon) {
+    return {
+        id: action.id,
+        label: translate(action.label),
+        ...(action.style !== undefined && { style: action.style }),
+        ...(action.display !== undefined && { display: action.display }),
+        confirmRequired: false,
+        ...(actionIcon !== undefined && { icon: actionIcon }),
+    };
+}
+function buildNavigateEntityAction(action, targetEntity, options) {
+    const { record, translate, nav, host, actionIcon } = options;
+    const id = action.entityId !== undefined ? String(record[action.entityId] ?? "") : "";
+    return {
+        ...navigateActionBase(action, translate, actionIcon),
+        onPress: () => {
+            // No entityId on record (id === "") → nothing to navigate to.
+            if (id !== "") {
                 const params = navigateActionSearchParams(action, record);
-                navigateWithReturnTo(nav, target, host, params);
-            },
-        };
-    }
+                navigateWithReturnTo(nav, { entity: targetEntity, id }, host, params);
+            }
+        },
+    };
+}
+function buildNavigateScreenAction(action, targetScreen, options) {
+    const { record, translate, nav, host, actionIcon, defaultScreenTargetEntityId, sameEntityScreenId, } = options;
+    const explicit = action.entityId !== undefined ? String(record[action.entityId] ?? "") : undefined;
+    const fallback = sameEntityScreenId?.(targetScreen) ?? defaultScreenTargetEntityId;
+    const navEntityId = explicit ?? fallback;
+    return {
+        ...navigateActionBase(action, translate, actionIcon),
+        onPress: () => {
+            const target = {
+                screenId: targetScreen,
+                ...(navEntityId !== undefined && navEntityId !== "" && { entityId: navEntityId }),
+            };
+            const params = navigateActionSearchParams(action, record);
+            navigateWithReturnTo(nav, target, host, params);
+        },
+    };
+}
+function buildNavigateRecordAction(action, options) {
+    if (action.entity !== undefined)
+        return buildNavigateEntityAction(action, action.entity, options);
+    if (action.screen !== undefined)
+        return buildNavigateScreenAction(action, action.screen, options);
     return undefined;
 }
 function buildDrawerRecordAction(action, options) {
@@ -339,6 +347,7 @@ function buildDrawerRecordAction(action, options) {
         id: action.id,
         label: translate(action.label),
         ...(action.style !== undefined && { style: action.style }),
+        ...(action.display !== undefined && { display: action.display }),
         confirmRequired: false,
         ...(actionIcon !== undefined && { icon: actionIcon }),
         onPress: () => {
@@ -353,6 +362,7 @@ function buildWriteHandlerRecordAction(action, options) {
         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 && {

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

@@ -113,7 +113,7 @@ export function SecretMintBody({ schema, screen, translate }) {
             finishMint();
     }, [finishMint]);
     if (done) {
-        return (_jsx(Card, { children: _jsx(Banner, { variant: "info", testId: "kumiko-screen-secret-mint-done", children: effectiveTranslate(confirm?.doneMessage ?? "kumiko.secretMint.done") }) }));
+        return (_jsx(Card, { options: { screenBody: true }, children: _jsx(Banner, { variant: "info", testId: "kumiko-screen-secret-mint-done", children: effectiveTranslate(confirm?.doneMessage ?? "kumiko.secretMint.done") }) }));
     }
     if (revealed !== null) {
         const values = screen.reveal.fields.flatMap((revealField) => {
@@ -134,7 +134,7 @@ export function SecretMintBody({ schema, screen, translate }) {
                 },
             ];
         });
-        return (_jsxs(Card, { testId: "kumiko-screen-secret-mint-card", 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))) })), confirm !== undefined && confirmEntity !== undefined && confirmScreen !== undefined ? (_jsx(RenderEdit, { screen: confirmScreen, entity: confirmEntity, featureName: schema.featureName, initial: confirmInitial ?? {}, writeCommand: confirm.handler, payloadMode: "values", buildPayload: (snapshot) => ({ ...snapshot.values, ...carriedRef.current }), onSubmit: handleConfirmSubmitted, ...(handleCancel !== undefined && { onCancel: handleCancel }), ...(translate !== undefined && { translate }), ...(confirm.submitLabel !== undefined && { submitLabel: confirm.submitLabel }) })) : (_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: [_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))) })), confirm !== undefined && confirmEntity !== undefined && confirmScreen !== undefined ? (_jsx(RenderEdit, { screen: confirmScreen, entity: confirmEntity, featureName: schema.featureName, initial: confirmInitial ?? {}, writeCommand: confirm.handler, payloadMode: "values", buildPayload: (snapshot) => ({ ...snapshot.values, ...carriedRef.current }), onSubmit: handleConfirmSubmitted, ...(handleCancel !== undefined && { onCancel: handleCancel }), ...(translate !== undefined && { translate }), ...(confirm.submitLabel !== undefined && { submitLabel: confirm.submitLabel }) })) : (_jsx(Button, { type: "button", variant: "primary", onClick: finishMint, testId: "kumiko-screen-secret-mint-confirm", children: effectiveTranslate(screen.reveal.confirmLabel ?? "kumiko.secretMint.confirm") }))] }));
     }
-    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, extensionInitialValues: initial, writeCommand: screen.handler, payloadMode: "values", onSubmit: handleSubmitted, ...(handleCancel !== undefined && { onCancel: handleCancel }), ...(translate !== undefined && { translate }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }) }));
+    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, extensionInitialValues: initial, writeCommand: screen.handler, payloadMode: "values", onSubmit: handleSubmitted, fillScreenHeight: true, ...(handleCancel !== undefined && { onCancel: handleCancel }), ...(translate !== undefined && { translate }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }) }));
 }

package/dist/app/secrets-edit-body.js

@@ -3,13 +3,23 @@ import { useCallback, useMemo, useState } from "react";
 import { useDispatcher } from "../context/dispatcher-context.js";
 import { useQuery } from "../hooks/use-query.js";
 import { useTranslation } from "../i18n.js";
-import { usePrimitives } from "../primitives.js";
+import { STICKY_PRIMARY_ACTION_PROP, usePrimitives } from "../primitives.js";
+import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
 import { dispatcherErrorText } from "./write-failed-error.js";
+function groupSectionsByTitle(sections) {
+    const byTitle = new Map();
+    for (const section of sections) {
+        const title = section.title ?? "config.secrets.section";
+        // kumiko-lint-ignore section-fields-raw secretsEdit section fields are field-id strings, not EditFieldSpec
+        byTitle.set(title, [...(byTitle.get(title) ?? []), ...section.fields]);
+    }
+    return [...byTitle].map(([title, fields]) => ({ title, fields }));
+}
 // secrets:query:list never returns plaintext (only a redacted preview), so
 // unlike ConfigEditBody there is no server value to pre-fill a draft with —
 // every input starts at "" and stays that way unless the user types into it.
 export function SecretsEditBody({ screen, translate }) {
-    const { Banner, Form, Section, Field, Input, Button, Text } = usePrimitives();
+    const { Banner, Form, Section, Field, Input, Button, Text, Grid } = usePrimitives();
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
     const dispatcher = useDispatcher();
@@ -52,25 +62,44 @@ export function SecretsEditBody({ screen, translate }) {
         }
         await listQuery.refetch();
     }, [dispatcher, listQuery.refetch, effectiveTranslate]);
-    if (listQuery.loading && listQuery.data === null) {
-        return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
-    }
+    if (listQuery.loading && listQuery.data === null)
+        return _jsx(QueryLoadingBanner, {});
     if (listQuery.error) {
-        return (_jsx(Banner, { padded: true, variant: "error", testId: "kumiko-screen-error", children: dispatcherErrorText(listQuery.error, effectiveTranslate) }));
+        return (_jsx(QueryErrorBanner, { error: listQuery.error, translate: effectiveTranslate, onRetry: listQuery.refetch }));
     }
+    // The generator emits one section per feature; features without a declared
+    // title all fall under the generic "Secrets" heading and share one band.
+    const sectionGroups = groupSectionsByTitle(screen.sections);
+    const unsavedCount = Object.values(drafts).filter((value) => value.trim() !== "").length;
     return (_jsxs(Form, { onSubmit: () => {
             void handleSubmit();
-        }, testId: "secrets-edit-form", ...(screen.description !== undefined && {
+        }, testId: "secrets-edit-form", width: "full", fillHeight: true, stickyActions: true, screenForm: true, unsavedCount: unsavedCount, ...(screen.description !== undefined && {
             subtitle: effectiveTranslate(screen.description),
-        }), actions: _jsx(Button, { type: "submit", variant: "primary", loading: submitting, disabled: submitting, testId: "secrets-edit-submit", children: effectiveTranslate("kumiko.actions.save") }), children: [submitError !== null && (_jsx(Banner, { variant: "error", testId: "secrets-edit-error", children: submitError })), screen.sections.map((section, index) => (_jsx(Section, { ...(section.title !== undefined && { title: effectiveTranslate(section.title) }), children: section.fields.map((fieldId) => {
-                    const qualified = screen.secretKeys[fieldId];
-                    if (qualified === undefined)
-                        return null;
-                    const row = rowsByQualifiedKey.get(qualified);
-                    const hintKey = screen.fieldHints?.[fieldId];
-                    const isRequired = screen.requiredFields?.includes(fieldId) ?? false;
-                    return (_jsxs(Field, { id: fieldId, label: effectiveTranslate(screen.fieldLabels[fieldId] ?? fieldId), required: isRequired, testId: `field-${fieldId}`, fieldAppendix: _jsxs(_Fragment, { children: [hintKey !== undefined && (_jsx(Text, { variant: "small", children: effectiveTranslate(hintKey) })), row !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "small", testId: `secret-preview-${fieldId}`, children: row.redactedPreview ?? effectiveTranslate("config.secrets.set") }), _jsx(Button, { type: "button", variant: "danger-ghost", size: "sm", onClick: () => handleDelete(qualified), testId: `secret-delete-${fieldId}`, children: effectiveTranslate("config.secrets.delete") })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "small", testId: `secret-not-set-${fieldId}`, children: effectiveTranslate("config.secrets.notSet") }), isRequired && (_jsx(Text, { variant: "small", testId: `required-marker-${fieldId}`, children: effectiveTranslate("config.secrets.required") }))] }))] }), children: [_jsx(Text, { variant: "small", children: effectiveTranslate(row !== undefined
+        }), actions: _jsxs(_Fragment, { children: [unsavedCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", disabled: submitting, onClick: () => setDrafts({}), testId: "secrets-edit-discard", [STICKY_PRIMARY_ACTION_PROP]: true, children: effectiveTranslate("kumiko.form.discard") })), _jsx(Button, { type: "submit", variant: "primary", loading: submitting, disabled: submitting || unsavedCount === 0, testId: "secrets-edit-submit", children: effectiveTranslate("kumiko.form.saveChanges") })] }), children: [submitError !== null && (_jsx(Banner, { variant: "error", testId: "secrets-edit-error", children: submitError })), sectionGroups.map((section) => (_jsx(Section, { layout: "settings-list", title: effectiveTranslate(section.title), subtitle: effectiveTranslate("config.secrets.description"), children: _jsx(Grid, { columns: 1, list: true, children: section.fields.map((fieldId) => {
+                        const qualified = screen.secretKeys[fieldId];
+                        if (qualified === undefined)
+                            return null;
+                        const row = rowsByQualifiedKey.get(qualified);
+                        const hintKey = screen.fieldHints?.[fieldId];
+                        const isRequired = screen.requiredFields?.includes(fieldId) ?? false;
+                        return (_jsx(Field, { id: fieldId, layout: "row", label: effectiveTranslate(screen.fieldLabels[fieldId] ?? fieldId), required: isRequired, testId: `field-${fieldId}`, status: row !== undefined
+                                ? {
+                                    tone: "ok",
+                                    label: effectiveTranslate("config.secrets.saved"),
+                                    testId: `secret-saved-${fieldId}`,
+                                }
+                                : {
+                                    tone: isRequired ? "bad" : "muted",
+                                    label: effectiveTranslate("config.secrets.notSet"),
+                                    testId: `secret-not-set-${fieldId}`,
+                                }, ...(hintKey !== undefined && { description: effectiveTranslate(hintKey) }), ...(row !== undefined && {
+                                fieldAppendix: (_jsxs(Grid, { columns: "auto", children: [_jsx(Text, { variant: "muted", testId: `secret-preview-${fieldId}`, children: row.redactedPreview !== null
+                                                ? effectiveTranslate("config.secrets.stored", {
+                                                    preview: row.redactedPreview,
+                                                })
+                                                : effectiveTranslate("config.secrets.set") }), _jsx(Button, { type: "button", variant: "danger-ghost", size: "sm", onClick: () => handleDelete(qualified), testId: `secret-delete-${fieldId}`, children: effectiveTranslate("config.secrets.delete") })] })),
+                            }), children: _jsx(Input, { kind: "password", id: fieldId, name: fieldId, value: drafts[fieldId] ?? "", onChange: (v) => setDraft(fieldId, v), placeholder: effectiveTranslate(row !== undefined
                                     ? "config.secrets.replacePlaceholder"
-                                    : "config.secrets.placeholder") }), _jsx(Input, { kind: "password", id: fieldId, name: fieldId, value: drafts[fieldId] ?? "", onChange: (v) => setDraft(fieldId, v), autoComplete: "new-password", disabled: submitting, testId: `secret-input-${fieldId}` })] }, fieldId));
-                }) }, section.title ?? `section-${index}`)))] }));
+                                    : "config.secrets.placeholder"), autoComplete: "new-password", disabled: submitting, testId: `secret-input-${fieldId}` }) }, fieldId));
+                    }) }) }, section.title)))] }));
 }

package/dist/components/grid-cell-for-field.d.ts

@@ -1,6 +1,6 @@
 import type { EditFieldViewModel, FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type { ReactNode } from "react";
-import type { FieldCellWidth, usePrimitives } from "../primitives.js";
+import type { FieldCellWidth, FieldProps, usePrimitives } from "../primitives.js";
 export type GridCellForFieldProps = {
     readonly field: EditFieldViewModel;
     readonly columns: number;
@@ -12,6 +12,9 @@ export type GridCellForFieldProps = {
     readonly featureName: string;
     readonly labelAppendix?: ReactNode;
     readonly fieldAppendix?: ReactNode;
+    readonly appendixPlacement?: FieldProps["appendixPlacement"];
+    readonly description?: ReactNode;
+    readonly status?: FieldProps["status"];
     /** Full issues-by-path map (FormSnapshot.errors) — passed through for
      *  embedded-list fields, which bucket row-/cell-level issues themselves. */
     readonly allIssues: Readonly<Record<string, readonly FieldIssue[]>>;
@@ -21,6 +24,8 @@ export type GridCellForFieldProps = {
     readonly row: Readonly<Record<string, unknown>>;
     readonly changed?: boolean;
     readonly flow?: boolean;
+    readonly layout?: FieldProps["layout"];
+    readonly accent?: boolean;
 };
 export declare function fieldCellWidth(field: EditFieldViewModel): FieldCellWidth;
-export declare function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay, row, changed, flow, }: GridCellForFieldProps): ReactNode;
+export declare function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, }: GridCellForFieldProps): ReactNode;

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

@@ -29,10 +29,10 @@ export function fieldCellWidth(field) {
         return "full";
     return FIELD_CELL_WIDTH_BY_TYPE[field.type] ?? "text";
 }
-export function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay, row, changed, flow, }) {
+export function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay, row, changed, flow, layout, accent, }) {
     // RenderField renders nothing for a hidden field, but the GridCell around it still claims the row.
     if (!field.visible)
         return null;
     const effectiveSpan = field.span !== undefined ? Math.min(field.span, columns) : 1;
-    return (_jsx(GridCell, { span: effectiveSpan, ...(flow === true && { width: fieldCellWidth(field) }), children: _jsx(RenderField, { field: field, ...(issues !== undefined && { issues }), onChange: onChange, featureName: featureName, ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), allIssues: allIssues, valueDisplay: valueDisplay, row: row, ...(changed === true && { changed }) }) }));
+    return (_jsx(GridCell, { span: effectiveSpan, ...(flow === true && { width: fieldCellWidth(field) }), children: _jsx(RenderField, { field: field, ...(issues !== undefined && { issues }), onChange: onChange, featureName: featureName, ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(appendixPlacement !== undefined && { appendixPlacement }), ...(description !== undefined && { description }), ...(status !== undefined && { status }), allIssues: allIssues, valueDisplay: valueDisplay, row: row, ...(changed === true && { changed }), ...(layout !== undefined && { layout }), ...(accent === true && { accent }) }) }));
 }

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

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

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

@@ -1,14 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isOptionsQueryFieldRef } from "@cosmicdrift/kumiko-types/fields";
+import { useEffect, useRef } from "react";
 import { useQuery } from "../hooks/use-query.js";
 import { usePrimitives } from "../primitives.js";
+function isPayloadScalar(value) {
+    return ((typeof value === "string" && value !== "") ||
+        typeof value === "number" ||
+        typeof value === "boolean");
+}
+// An empty sibling value drops its key, so "nothing chosen yet" reaches the query
+// handler as an absent property, not as "" / null.
+export function resolveOptionsQueryPayload(payload, row) {
+    const resolved = {};
+    for (const [name, entry] of Object.entries(payload)) {
+        const value = isOptionsQueryFieldRef(entry) ? row[entry.field] : entry;
+        if (isPayloadScalar(value))
+            resolved[name] = value;
+    }
+    return resolved;
+}
 // 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, }) {
+export function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, }) {
     const { Input } = usePrimitives();
-    const { data, loading } = useQuery(query, payload);
+    const resolvedPayload = resolveOptionsQueryPayload(payload, row);
+    const payloadKey = JSON.stringify(resolvedPayload);
+    const { data, loading } = useQuery(query, resolvedPayload);
     const current = typeof field.value === "string" ? field.value : "";
     const rows = data?.rows ?? [];
+    // useQuery keeps the previous data while a changed payload reloads, and a
+    // superseded response is aborted — so a fresh `data` object always belongs to
+    // the payload of the render it arrives in. The first load never clears (a stored
+    // value missing there stays visible); only a load after a payload change does.
+    const settledPayloadKey = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs once per loaded result, not on every keystroke
+    useEffect(() => {
+        if (data === null)
+            return;
+        const previousKey = settledPayloadKey.current;
+        settledPayloadKey.current = payloadKey;
+        const payloadChanged = previousKey !== null && previousKey !== payloadKey;
+        if (payloadChanged && current !== "" && !data.rows.some((row) => row.value === current)) {
+            onChange("");
+        }
+    }, [data]);
     // 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)
@@ -19,3 +55,10 @@ export function QueryOptionsSelect({ field, query, payload, id, hasError, onChan
     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 }));
 }
+// Badge text for a stored value of an optionsQuery select: the row's label once
+// loaded, the raw value while loading or when the value is not in the result.
+export function QueryOptionLabel({ query, payload, value, }) {
+    const { data } = useQuery(query, payload);
+    const label = data?.rows.find((row) => row.value === value)?.label;
+    return label ?? String(value);
+}

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, parseRefTarget } from "@cosmicdrift/kumiko-framework/ui-types";
+import { evalFieldCondition, 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";
@@ -12,9 +12,9 @@ import { dispatcherErrorText } from "../app/write-failed-error.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useQuery } from "../hooks/use-query.js";
-import { useTranslation } from "../i18n.js";
+import { useLocale, useTranslation } from "../i18n.js";
 import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
-import { usePrimitives } from "../primitives.js";
+import { usePrimitives, } from "../primitives.js";
 import { sortByAccessor } from "../sort-by-accessor.js";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
 import { RenderList } from "./render-list.js";
@@ -47,11 +47,48 @@ 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.`);
 }
+function buildRowGrouping(groupBy, translate, locale) {
+    return {
+        keyOf: (row) => String(row.values[groupBy.field] ?? ""),
+        startsCollapsed: (key) => groupBy.collapsedWhen !== undefined && key === String(groupBy.collapsedWhen),
+        headerLabel: (key, rows) => {
+            const dates = groupBy.dateField === undefined
+                ? []
+                : rows
+                    .map((row) => String(row.values[groupBy.dateField ?? ""] ?? ""))
+                    .filter((value) => value !== "")
+                    .sort();
+            const latest = dates[dates.length - 1];
+            return translate(groupBy.labels?.[key] ?? groupBy.label, {
+                count: rows.length,
+                value: key,
+                lastDate: latest === undefined
+                    ? ""
+                    : new Date(latest).toLocaleDateString(locale, {
+                        year: "numeric",
+                        month: "2-digit",
+                        day: "2-digit",
+                        timeZone: "UTC",
+                    }),
+            });
+        },
+    };
+}
+function buildRowTone(rule) {
+    if (rule === undefined)
+        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, }) {
     const { Banner, Section, Card, FillContainer, Text, Button, Dialog } = usePrimitives();
     const [emptyStateActionError, setEmptyStateActionError] = useState(null);
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
+    const locale = useLocale().locale();
+    const rowGrouping = useMemo(() => section.groupBy === undefined
+        ? undefined
+        : buildRowGrouping(section.groupBy, effectiveTranslate, locale), [section.groupBy, effectiveTranslate, locale]);
+    const rowTone = useMemo(() => buildRowTone(section.rowTone), [section.rowTone]);
     const nav = useNav();
     const host = useReturnHost();
     const dispatcher = useOptionalDispatcher();
@@ -269,11 +306,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
                         filterValues: filters,
                         onFilterChange,
                         onFilterReset,
-                    }), ...(onRowClick !== undefined && { onRowClick }), ...(rowActions !== undefined && { rowActions }), ...(toolbarActionButtons !== undefined && { toolbarActions: toolbarActionButtons }), ...(emptyStateContent !== undefined && { emptyState: emptyStateContent }), ...(hideTitle === true && {
-                        scrollBody: true,
-                        screenPadding: false,
-                        chromeless: true,
-                    }), ...(embedded === true && { screenPadding: false, chromeless: true }) }) })] }));
+                    }), ...(onRowClick !== undefined && { onRowClick }), ...(rowActions !== undefined && { rowActions }), ...(section.rowActionMode !== undefined && { rowActionMode: section.rowActionMode }), ...(rowGrouping !== undefined && { rowGrouping }), ...(rowTone !== undefined && { rowTone }), ...(toolbarActionButtons !== undefined && { toolbarActions: toolbarActionButtons }), ...(emptyStateContent !== undefined && { emptyState: emptyStateContent }), screenPadding: false, ...(hideTitle === true && { scrollBody: true, chromeless: true }), ...(embedded === true && { 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

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

@@ -1,4 +1,4 @@
-import type { EntityDefinition, EntityEditScreenDefinition, IconKey, RowAction, RowActionDrawer } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { ActionFormFooterAction, EntityDefinition, EntityEditScreenDefinition, IconKey, RowAction, RowActionDrawer } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { DispatcherError, FormSnapshot, FormValues, SubmitResult, Translate } from "@cosmicdrift/kumiko-headless";
 import type { ReactNode } from "react";
 import type * as z from "zod";
@@ -73,6 +73,9 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
     readonly submitLabel?: string;
     /** Visual style of the submit button (actionForm `submitStyle`). Default "primary". */
     readonly submitVariant?: "primary" | "danger";
+    /** Extra footer buttons (actionForm `footerActions`): each sets its `patch`
+     *  on the form values, then submits through the normal validate + write path. */
+    readonly footerActions?: readonly ActionFormFooterAction[];
     /** Context box above the drawer form (title + optional subtitle, already resolved). */
     readonly summary?: {
         readonly title: string;
@@ -85,6 +88,17 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
     /** Per-field extra content below the input (e.g. ConfigCascadeView).
      *  Called with the field name, returns a ReactNode or undefined. */
     readonly fieldAppendix?: (fieldName: string) => ReactNode | undefined;
+    /** Placement of every `fieldAppendix` relative to its control. Default
+     *  above-control; below-control keeps the inputs of neighbouring fields
+     *  on one line when an appendix expands. */
+    readonly fieldAppendixPlacement?: "above-control" | "below-control";
+    /** Per-field help text rendered under the label (translated by the caller). */
+    readonly fieldDescription?: (fieldName: string) => ReactNode | undefined;
+    /** Marks fields whose value is set at this level; drawn by `settings-list` rows. */
+    readonly fieldAccent?: (fieldName: string) => boolean;
+    /** Edit-mode "changed" markers also for screens without an entity id
+     *  (configEdit loads its values from a query, not a record). */
+    readonly markChangedFields?: boolean;
     /** Controlled mode (issue #1887): fires on every values-snapshot change
      *  (typing, `patch(...)` from outside) with the current values. `changes`
      *  is the delta against the initial values — same semantics as
@@ -161,6 +175,15 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
      *  screens with `fillHeight !== false`; dialogs and other embedded hosts
      *  omit it and keep document-flow height. */
     readonly fillScreenHeight?: 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
+     *  embedded as a dashboard panel). */
+    readonly dirtyFooter?: boolean;
+    /** Validate the edited field right after each change instead of only on
+     *  submit, so a bounds violation shows at the field while the Save button
+     *  looks enabled. Set where Save never blocks on a pre-check (configEdit). */
+    readonly validateOnChange?: boolean;
     /** Extra content rendered above the card, sharing its left padding and
      *  width — for a host with its own header region (title/metrics/tabs)
      *  that would otherwise render as unpadded siblings before RenderEdit.