@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.1

package/dist/components/render-edit-banners.js

@@ -0,0 +1,90 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorReference } from "../app/error-reference.js";
+import { formatWhen } from "../format-when.js";
+import { tabIdAt } from "./render-edit-helpers.js";
+import { isDispatcherRejection } from "./render-edit-logic.js";
+export function renderAllRequiredHint({ engine: { state }, }) {
+    const { Text } = state.primitives;
+    return (_jsx(Text, { variant: "muted", testId: "render-edit-all-required-hint", children: state.translate("kumiko.form.all-required") }));
+}
+export function renderDraftPicker({ engine: { state, draftActions }, }) {
+    const { Banner, Button, Text } = state.primitives;
+    const { translate } = state;
+    const { draftCandidates, setDraftCandidates } = state.draftState;
+    return (draftCandidates !== null && (_jsx(Banner, { variant: "info", testId: "render-edit-draft-picker", actions: [
+            ...draftCandidates.map((candidate) => (_jsx(Button, { type: "button", variant: "link", onClick: () => draftActions.adoptDraft(candidate), testId: `render-edit-draft-pick-${candidate.id}`, children: formatWhen(candidate.savedAt) }, candidate.id))),
+            _jsx(Button, { type: "button", variant: "link", onClick: () => setDraftCandidates(null), testId: "render-edit-draft-start-new", children: translate("kumiko.form.draft.start-new") }, "start-new"),
+        ], children: _jsx(Text, { children: translate(draftCandidates.length === 1
+                ? "kumiko.form.draft.resume-single"
+                : "kumiko.form.draft.resume-multiple") }) })));
+}
+export function renderWizardProgress({ engine: { state, steps, sections, nav }, titles, }) {
+    const { Progress, StepBar, Text } = state.primitives;
+    const { currentStep, lastStepIndex, updateModeStepBarProps } = steps;
+    return (state.isWizard &&
+        !titles.stepRail && (_jsxs(_Fragment, { children: [Progress !== undefined && (_jsx(Progress, { value: (currentStep + 1) / (lastStepIndex + 1), testId: "render-edit-wizard-progress" })), StepBar === undefined ? (_jsx(Text, { variant: "small", testId: "render-edit-wizard-step-label", children: titles.compactStepLabel })) : (_jsx(StepBar, { steps: sections.filteredSections.map((section) => section.title ?? ""), currentIndex: currentStep, compactLabel: titles.compactStepLabel, onStepSelect: nav.handleWizardStepSelect, ...updateModeStepBarProps, testId: "render-edit-wizard-steps", compactTestId: "render-edit-wizard-step-label" }))] })));
+}
+export function renderTabStrip({ engine: { state, steps, sections, nav }, }) {
+    const { Tabs } = state.primitives;
+    const { filteredSections } = sections;
+    // No Tabs primitive registered → every section renders stacked
+    // (stepHidden below is gated on the same condition), which is the
+    // single-layout behaviour. Degrading to one long form beats
+    // hiding sections behind a strip that never drew.
+    if (Tabs === undefined)
+        return null;
+    return (_jsx(Tabs, { testId: "render-edit-tabs", items: filteredSections.map((section, index) => ({
+            id: tabIdAt(section, index),
+            label: section.title ?? "",
+        })), activeId: tabIdAt(filteredSections[steps.currentStep], steps.currentStep), onSelect: (id) => {
+            const index = filteredSections.findIndex((s, i) => tabIdAt(s, i) === id);
+            // skip: the strip reported an id no section owns.
+            if (index === -1)
+                return;
+            nav.jumpToStep(index);
+        } }));
+}
+export function renderFormErrorBanner({ engine: { props, state }, layout, }) {
+    const { Banner, Button, Text } = state.primitives;
+    const { translate, formError } = state;
+    const { onReload } = props;
+    return (formError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-form-error", actions: formError.code === "version_conflict" && onReload !== undefined ? (_jsx(Button, { variant: "secondary", onClick: () => {
+                onReload();
+                state.setFormError(null);
+                state.setExtraDeleteIssues([]);
+            }, testId: "render-edit-form-error-reload", children: translate("kumiko.actions.reload") })) : undefined, children: [_jsx(Text, { testId: "render-edit-form-error-key", children: translate(formError.i18nKey, formError.i18nParams) }), layout.rootIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-root", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`))), state.extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })));
+}
+export function renderRootIssueBanners({ engine: { state }, layout, }) {
+    const { Banner, Text } = state.primitives;
+    return (state.formError === null &&
+        layout.rootIssues.map((issue) => (_jsx(Banner, { variant: "error", testId: "render-edit-root-issue", children: _jsx(Text, { children: state.translate(issue.i18nKey, issue.params) }) }, issue.i18nKey))));
+}
+export function renderExtensionErrorBanner({ engine: { state }, }) {
+    const { Banner, Text } = state.primitives;
+    const { extensionErrorKey } = state;
+    return (extensionErrorKey !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-extension-error", children: _jsx(Text, { testId: "render-edit-extension-error-key", children: state.translate(extensionErrorKey) }) })));
+}
+export function renderActionErrorBanner({ engine: { state }, }) {
+    const { Banner } = state.primitives;
+    const { actionError } = state;
+    return (actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })));
+}
+// A rejected delete (e.g. a preDelete hook) carries its reason in
+// the field issues; the top-level key is only "validation failed".
+function applyDeleteRejection(state, rejection) {
+    const [issue, ...otherIssues] = rejection.details?.fields ?? [];
+    state.setExtraDeleteIssues(otherIssues);
+    state.setFormErrorSource("delete");
+    state.setFormError(issue === undefined
+        ? rejection
+        : { ...rejection, i18nKey: issue.i18nKey, i18nParams: issue.params });
+}
+export function renderDeleteDialog({ engine: { props, state }, }) {
+    const { Dialog } = state.primitives;
+    const { onDelete } = props;
+    return (onDelete !== undefined && (_jsx(Dialog, { open: state.confirmDeleteOpen, onOpenChange: state.setConfirmDeleteOpen, title: state.translate("kumiko.actions.delete-confirm"), confirmLabel: state.translate("kumiko.actions.delete"), variant: "danger", onConfirm: async () => {
+            const rejection = await onDelete();
+            if (isDispatcherRejection(rejection))
+                applyDeleteRejection(state, rejection);
+        }, testId: "render-edit-delete-dialog" })));
+}

package/dist/components/render-edit-draft-save-helpers.d.ts

@@ -0,0 +1,19 @@
+import type { MutableRefObject } from "react";
+import type { FormValues } from "../headless/index.ts";
+import type { ResolvedRenderEditProps } from "./render-edit-render-model.ts";
+import type { RenderEditForm } from "./use-render-edit-form.ts";
+type ControlsOf<TValues extends FormValues> = Parameters<NonNullable<ResolvedRenderEditProps<TValues>["onControlsReady"]>>[0];
+type ChangeStateOf<TValues extends FormValues> = Parameters<NonNullable<ResolvedRenderEditProps<TValues>["onChange"]>>[0];
+export declare function flushPendingDraftSave(draftSaveTimerRef: MutableRefObject<ReturnType<typeof setTimeout> | null>, saveDraftRef: MutableRefObject<(stepIndex: number) => void>, currentStepRef: MutableRefObject<number>): void;
+export declare function buildControlsFor<TValues extends FormValues>({ controller, patch, validate, handleSubmitRef, wizardNextRef, wizardBackRef, }: {
+    readonly controller: RenderEditForm<TValues>["controller"];
+    readonly patch: ControlsOf<TValues>["patch"];
+    readonly validate: ControlsOf<TValues>["validate"];
+    readonly handleSubmitRef: MutableRefObject<(options?: {
+        readonly saveNow?: boolean;
+    }) => Promise<void>>;
+    readonly wizardNextRef: MutableRefObject<() => void>;
+    readonly wizardBackRef: MutableRefObject<() => void>;
+}): ControlsOf<TValues>;
+export declare function deriveChangeState<TValues extends FormValues>(snapshot: RenderEditForm<TValues>["snapshot"], schema: ResolvedRenderEditProps<TValues>["schema"], scopeFieldNames: readonly string[] | undefined, submitting: boolean): ChangeStateOf<TValues>;
+export {};

package/dist/components/render-edit-draft-save-helpers.js

@@ -0,0 +1,42 @@
+import { dryRunFieldIssues } from "./render-edit-helpers.js";
+export function flushPendingDraftSave(draftSaveTimerRef, saveDraftRef, currentStepRef) {
+    if (draftSaveTimerRef.current !== null) {
+        clearTimeout(draftSaveTimerRef.current);
+        // Flush the pending debounced save instead of dropping it — a
+        // navigation/unmount inside the debounce window would otherwise
+        // silently discard the last patch() (discardDraft nulls this ref
+        // first on the post-submit path, so this can't resurrect a
+        // just-submitted draft).
+        saveDraftRef.current(currentStepRef.current);
+    }
+}
+export function buildControlsFor({ controller, patch, validate, handleSubmitRef, wizardNextRef, wizardBackRef, }) {
+    return {
+        patch,
+        validate,
+        getValues: () => controller.getSnapshot().values,
+        // saveNow: a host-driven submit must save on a wizard's intermediate
+        // steps too instead of silently advancing; stepping is next()/back().
+        submit: () => handleSubmitRef.current({ saveNow: true }),
+        next: () => wizardNextRef.current(),
+        back: () => wizardBackRef.current(),
+    };
+}
+export function deriveChangeState(snapshot, schema, scopeFieldNames, submitting) {
+    // Dry-run parse against `schema` — NOT controller.validate(). Calling
+    // validate() here would write field-level errors into snapshot.errors
+    // on every keystroke, painting error messages while the user is still
+    // typing. `valid` can therefore legitimately diverge from what's
+    // currently rendered under the fields (the last *mutating* validate()
+    // call, e.g. from controls.validate() or submit()). The issues are
+    // filtered exactly like submit()'s validate: hidden fields and fields
+    // outside the `fields` scope never make the form invalid.
+    const valid = schema === undefined || dryRunFieldIssues(schema, snapshot, scopeFieldNames, true).length === 0;
+    return {
+        values: snapshot.values,
+        changes: snapshot.changes,
+        dirty: snapshot.isDirty,
+        valid,
+        submitting,
+    };
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { EditFieldViewModel, FormValues } from "../headless/index.ts";
+import type { FieldsSection, RenderEditModel } from "./render-edit-render-model.ts";
+export declare function renderFieldGrid<TValues extends FormValues, TCtx>(model: RenderEditModel<TValues, TCtx>, section: FieldsSection, fields: readonly EditFieldViewModel[], columns: number, gridKey: string, columnsDeclared: boolean | undefined): ReactNode;

package/dist/components/render-edit-field-grid.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridCellForField } from "./grid-cell-for-field.js";
+function appendixCellProps(props, fieldName) {
+    const { labelAppendix, fieldAppendix, fieldAppendixPlacement, fieldDescription } = props;
+    return {
+        ...(labelAppendix !== undefined && { labelAppendix: labelAppendix(fieldName) }),
+        ...(fieldAppendix !== undefined && { fieldAppendix: fieldAppendix(fieldName) }),
+        ...(fieldAppendixPlacement !== undefined && { appendixPlacement: fieldAppendixPlacement }),
+        ...(fieldDescription !== undefined && { description: fieldDescription(fieldName) }),
+    };
+}
+function createFieldCellRenderer(model, section, columns) {
+    const { props, state, form } = model.engine;
+    const { snapshot } = form;
+    const { GridCell } = state.primitives;
+    const { isSettingsList, isCreate } = model.footer;
+    const { usesFieldFlow } = model.titles;
+    const { disabled, fieldAccent } = props;
+    const showsChangedMarker = !isCreate || props.markChangedFields;
+    const clearErrorsAndValidate = (fieldName) => {
+        form.clearErrorsOnInput(fieldName);
+        if (props.validateOnChange === true)
+            form.controller.validate([fieldName]);
+    };
+    return (field) => (_jsx(GridCellForField, { field: disabled ? { ...field, readOnly: true } : field, columns: columns, ...(!isSettingsList && usesFieldFlow && { flow: true }), ...(isSettingsList && {
+            layout: "row",
+            accent: fieldAccent?.(field.field) === true,
+        }), issues: snapshot.errors[field.field], onChange: (v) => {
+            model.setFieldUntyped(field.field, v);
+            clearErrorsAndValidate(field.field);
+        }, GridCell: GridCell, featureName: props.featureName, ...appendixCellProps(props, field.field), allIssues: snapshot.errors, valueDisplay: props.valueDisplay, row: snapshot.values, ...(disabled && { fillDisabled: true }), ...(props.hideSectionTitles !== true &&
+            section.title !== undefined && { sectionTitle: section.title }), ...(showsChangedMarker && field.field in snapshot.changes && { changed: true }) }, field.field));
+}
+export function renderFieldGrid(model, section, fields, columns, gridKey, columnsDeclared) {
+    const { Grid } = model.engine.state.primitives;
+    const { isSettingsList } = model.footer;
+    const { usesFieldFlow } = model.titles;
+    const renderCell = createFieldCellRenderer(model, section, columns);
+    return (_jsx(Grid, { columns: usesFieldFlow && columnsDeclared !== true ? 1 : columns, ...(isSettingsList ? { list: true } : usesFieldFlow && { flow: true }), children: fields.map((field) => renderCell(field)) }, gridKey));
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { FormValues } from "../headless/index.ts";
+import type { FieldsSection, SectionRenderContext } from "./render-edit-render-model.ts";
+export declare function renderFieldsSection<TValues extends FormValues, TCtx>(rc: SectionRenderContext<TValues, TCtx>, section: FieldsSection): ReactNode;

package/dist/components/render-edit-fields-section.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderAllRequiredHint } from "./render-edit-banners.js";
+import { renderFieldGrid } from "./render-edit-field-grid.js";
+import { formSectionDomId } from "./render-edit-helpers.js";
+function renderTabbedGroupsSection(rc, section, sectionKey) {
+    const { Grid, Card } = rc.model.engine.state.primitives;
+    const groupsGrid = (_jsx(Grid, { columns: 1, children: section.groups?.map((group, groupIndex) => (_jsx(Card, { slots: { title: group.title }, testId: `section-${sectionKey}-group-${groupIndex}`, children: renderFieldGrid(rc.model, section, group.fields, group.columns, `${sectionKey}-group-${groupIndex}-grid`, group.columnsDeclared) }, group.title))) }, `${sectionKey}-groups`));
+    // `actions` on a `groups` section has no group of its own to
+    // sit in and would need an extra title-less Card around the
+    // group cards (Card-in-Card) — the boot-validator rejects that
+    // combination in tabs mode, so `sectionActionsEl` is always
+    // undefined here at runtime.
+    return rc.wrapWizardStep(sectionKey, _jsx(Card, { options: { framed: false }, children: groupsGrid }, sectionKey));
+}
+function renderTabbedFieldsSection(rc, section, sectionKey) {
+    if (section.groups !== undefined)
+        return renderTabbedGroupsSection(rc, section, sectionKey);
+    const { Card } = rc.model.engine.state.primitives;
+    const { sectionActionsEl } = rc;
+    // No section title here — the Tab strip right above
+    // already names this panel, so a repeated Card title would just
+    // duplicate it. The header row only exists to carry the section
+    // description and actions, never the title text.
+    const cardEl = (_jsx(Card, { options: { framed: false }, ...((sectionActionsEl !== undefined || section.description !== undefined) && {
+            slots: {
+                ...(section.description !== undefined && { subtitle: section.description }),
+                ...(sectionActionsEl !== undefined && { headerActions: sectionActionsEl }),
+            },
+        }), testId: `section-${sectionKey}`, children: renderFieldGrid(rc.model, section, section.fields, section.columns, `${sectionKey}-grid`, section.columnsDeclared) }, sectionKey));
+    return rc.wrapWizardStep(sectionKey, cardEl);
+}
+// Suppress the section header when it would just repeat the form
+// title verbatim (typical for single-section actionForms), or the
+// tab label right above it. Without a Tabs primitive the sections
+// render stacked, and then the titles are what tells them apart.
+function resolveSectionTitle({ model, sectionIndex }, section) {
+    const { titles } = model;
+    const { state } = model.engine;
+    const repeatsTabLabel = state.isTabs && state.isStepped;
+    if (titles.titleInSettingsHeader && sectionIndex === 0)
+        return section.title ?? titles.formTitle;
+    return section.title === titles.formTitle || repeatsTabLabel ? undefined : section.title;
+}
+function resolveSectionSubtitle({ model, sectionIndex }, section) {
+    const headerFallback = model.titles.titleInSettingsHeader && sectionIndex === 0;
+    return section.description ?? (headerFallback ? model.titles.formSubtitle : undefined);
+}
+function renderDefaultFieldsSection(rc, section, sectionKey) {
+    const { model, sectionIndex, sectionActionsEl } = rc;
+    const { Section } = model.engine.state.primitives;
+    const sectionTitle = resolveSectionTitle(rc, section);
+    const sectionSubtitle = resolveSectionSubtitle(rc, section);
+    const sectionEl = (_jsxs(Section, { ...(model.titles.sectionNavItems.some((item) => item.id === formSectionDomId(sectionIndex)) && {
+            id: formSectionDomId(sectionIndex),
+        }), ...(sectionTitle !== undefined && { title: sectionTitle }), ...(sectionSubtitle !== undefined && { subtitle: sectionSubtitle }), ...(section.icon !== undefined && { icon: section.icon }), ...(sectionActionsEl !== undefined && { actions: sectionActionsEl }), ...(model.footer.isSettingsList && { layout: "settings-list" }), testId: `section-${sectionKey}`, children: [model.engine.sections.showsAllRequiredHint &&
+                model.engine.state.insideDrawer &&
+                sectionIndex === 0 &&
+                renderAllRequiredHint(model), renderFieldGrid(model, section, section.fields, section.columns, `${sectionKey}-grid`, section.columnsDeclared)] }, sectionKey));
+    return rc.wrapWizardStep(sectionKey, sectionEl);
+}
+export function renderFieldsSection(rc, section) {
+    if (!section.visible)
+        return null;
+    // Title-less sections would otherwise collide on key/testId, so use the index
+    // as a fallback.
+    const sectionKey = section.title ?? `section-${rc.sectionIndex}`;
+    // Tabs mode: the tab panel is the surface, so field sections render
+    // as unframed padded panels; group cards inside stay framed.
+    // Stays `Card`, not `Section` — Section always flattens to a
+    // borderless divider when rendered inside this component's own
+    // `<Form>` (InsideFormContext), even with `chromeless` set, so it
+    // cannot stand in for the tabs-mode card here.
+    return rc.model.engine.props.hideSectionTitles === true
+        ? renderTabbedFieldsSection(rc, section, sectionKey)
+        : renderDefaultFieldsSection(rc, section, sectionKey);
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { FormValues } from "../headless/index.ts";
+import type { RenderEditModel } from "./render-edit-render-model.ts";
+export declare function renderFormActions<TValues extends FormValues, TCtx>(model: RenderEditModel<TValues, TCtx>): ReactNode;

package/dist/components/render-edit-form-actions.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "../primitives.js";
+import { EditSlotMount } from "./edit-mounts.js";
+import { resolveExtensionEntityId } from "./render-edit-logic.js";
+function renderWizardBackButton({ engine: { state, nav }, footer, }) {
+    const { Button } = state.primitives;
+    return (footer.showWizardBack && (_jsx(Button, { type: "button", variant: "secondary", icon: "chevron-left", onClick: nav.handleWizardBack, testId: "render-edit-wizard-back", [FOOTER_ACTION_ROLE_PROP]: "back", children: state.translate("kumiko.actions.back") })));
+}
+function renderFooterSlot({ engine: { props, state, form, draft, sections, steps }, footer, }) {
+    const footerSlot = props.screen.slots?.footer;
+    return (footerSlot !== undefined && (_jsx(EditSlotMount, { slot: footerSlot, slotName: "footer", screenId: props.screen.id, entityName: sections.vm.entityName, entityId: resolveExtensionEntityId(props.entityId, sections.vm.id), values: form.snapshot.values, markSaved: draft.markSaved, hasUnsavedChanges: footer.hasUnsavedInput, wizardStep: state.isWizard ? { index: steps.currentStep, isLast: steps.isLastWizardStep } : undefined, ...(props.screen.slots?.footerPrimary === true && { [STICKY_PRIMARY_ACTION_PROP]: true }) })));
+}
+function renderSaveAndCloseButton({ engine: { props, state, steps, handleSubmit }, footer, }) {
+    const { Button } = state.primitives;
+    return (state.isWizard &&
+        !steps.isLastWizardStep &&
+        footer.showsSubmit &&
+        !state.isCreateMode && (_jsx(Button, { type: "button", variant: "ghost", disabled: state.isSubmitting || props.disabled, onClick: () => void handleSubmit({ saveNow: true }), testId: "render-edit-wizard-save-close", [STICKY_PRIMARY_ACTION_PROP]: true, children: state.translate("kumiko.wizard.save-and-close") })));
+}
+function renderWizardNextButton({ engine: { state }, footer, }) {
+    const { Button } = state.primitives;
+    const { translate } = state;
+    return (footer.showWizardNext && (_jsx(Button, { type: "submit", variant: "primary", iconEnd: "chevron-right", testId: "render-edit-wizard-next", [FOOTER_ACTION_ROLE_PROP]: "primary",
+        [NARROW_LABEL_PROP]: translate("kumiko.actions.next"), children: footer.nextStepTitle !== undefined
+            ? translate("kumiko.wizard.next-with-title", { title: footer.nextStepTitle })
+            : translate("kumiko.actions.next") })));
+}
+function renderFooterActionButtons({ engine: { props, state, form, handleSubmit }, footer, }) {
+    const { Button } = state.primitives;
+    return (footer.showSubmit &&
+        props.footerActions?.map((action) => (_jsx(Button, { type: "button", variant: action.variant ?? "secondary", ...(action.icon !== undefined && { icon: action.icon }), disabled: state.isSubmitting || props.disabled, onClick: () => {
+                form.controller.setValues(action.patch); // @cast-boundary form-values
+                void handleSubmit();
+            }, testId: `render-edit-footer-action-${action.id}`, children: state.translate(action.label) }, action.id))));
+}
+function renderDiscardButton({ engine: { props, state, form }, footer, }) {
+    const { Button } = state.primitives;
+    const { unsavedCount } = footer;
+    return (footer.hasDirtyFooter &&
+        footer.showsSubmit &&
+        unsavedCount !== undefined &&
+        unsavedCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", disabled: state.isSubmitting || props.disabled, onClick: () => form.controller.reset(), testId: "render-edit-discard", [STICKY_PRIMARY_ACTION_PROP]: true, children: state.translate("kumiko.form.discard") })));
+}
+function isSubmitDisabled({ engine: { props, state, form }, footer, }) {
+    const isPristine = form.snapshot.isUnchanged &&
+        !state.extensionDirty &&
+        !footer.isFieldlessSubmitForm &&
+        !state.insideDrawer &&
+        props.submitWithoutChanges !== true;
+    return isPristine || state.isSubmitting || props.disabled || props.submitBlocked;
+}
+function resolveSubmitLabelKey({ engine: { props, state }, footer, }) {
+    if (props.submitLabel !== undefined)
+        return props.submitLabel;
+    if (state.isWizard)
+        return "kumiko.actions.finish";
+    return footer.hasDirtyFooter ? "kumiko.form.saveChanges" : "kumiko.actions.save";
+}
+function renderSubmitButton(model) {
+    const { props, state } = model.engine;
+    const { Button } = state.primitives;
+    return (model.footer.showSubmit && (_jsx(Button, { type: "submit", disabled: isSubmitDisabled(model), loading: state.isSubmitting, variant: props.submitVariant ?? "primary", testId: "render-edit-submit", children: state.translate(resolveSubmitLabelKey(model)) })));
+}
+export function renderFormActions(model) {
+    return (_jsxs(_Fragment, { children: [renderWizardBackButton(model), renderFooterSlot(model), renderSaveAndCloseButton(model), renderWizardNextButton(model), renderFooterActionButtons(model), renderDiscardButton(model), renderSubmitButton(model), model.engine.sections.writeFormFooterAction] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { FormValues } from "../headless/index.ts";
+import type { ActionMenuItemSpec } from "../primitives.tsx";
+import type { RenderEditModel } from "./render-edit-render-model.ts";
+export type HeaderActionsModel = {
+    readonly headerMenuItems: readonly ActionMenuItemSpec[];
+    readonly secondaryFormActions: ReactNode;
+    readonly formHeaderRegion: ReactNode;
+    readonly titleActionMount: ReactNode;
+};
+export declare function buildHeaderActions<TValues extends FormValues, TCtx>(model: RenderEditModel<TValues, TCtx>): HeaderActionsModel;

package/dist/components/render-edit-header-actions.js

@@ -0,0 +1,120 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditSlotMount } from "./edit-mounts.js";
+import { RenderEditActionButton } from "./render-edit-action-button.js";
+import { resolveExtensionEntityId } from "./render-edit-logic.js";
+function copyLinkMenuItems({ engine: { props, state }, }) {
+    const { onCopyLink } = props;
+    if (onCopyLink === undefined)
+        return [];
+    return [
+        {
+            id: "copy-link",
+            label: state.translate(state.linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink"),
+            icon: "link",
+            onSelect: () => {
+                void Promise.resolve(onCopyLink()).then(() => state.setLinkCopied(true));
+            },
+        },
+    ];
+}
+function cancelMenuItems({ engine: { props, state }, layout, }) {
+    const { onCancel } = props;
+    if (!layout.cancelInHeaderMenu || onCancel === undefined)
+        return [];
+    return [
+        {
+            id: "cancel",
+            label: state.translate("kumiko.actions.cancel"),
+            icon: "x",
+            onSelect: () => onCancel(),
+        },
+    ];
+}
+function deleteMenuItems({ engine: { props, state }, }) {
+    if (props.onDelete === undefined)
+        return [];
+    return [
+        {
+            id: "delete",
+            label: state.translate("kumiko.actions.delete"),
+            icon: "trash",
+            variant: "danger",
+            onSelect: () => state.setConfirmDeleteOpen(true),
+        },
+    ];
+}
+function buildHeaderMenuItems(model) {
+    if (!model.layout.menuPageHeaderActions)
+        return [];
+    const { menuActions } = model.engine.props;
+    return [
+        ...(menuActions ?? []).map(model.engine.state.menuActionToItem),
+        ...copyLinkMenuItems(model),
+        ...cancelMenuItems(model),
+        ...deleteMenuItems(model),
+    ];
+}
+function renderDeleteButton({ engine: { props, state }, layout, }) {
+    const { Button } = state.primitives;
+    return (props.onDelete !== undefined &&
+        !layout.menuPageHeaderActions && (_jsx(Button, { type: "button", variant: "danger-ghost", icon: "trash", testId: "render-edit-delete", disabled: props.disabled, onClick: () => state.setConfirmDeleteOpen(true), children: state.translate("kumiko.actions.delete") })));
+}
+function renderCopyLinkButton({ engine: { props, state }, layout, }) {
+    const { Button } = state.primitives;
+    const { onCopyLink } = props;
+    const { iconOnlyMidActions } = layout;
+    const { translate, linkCopied } = state;
+    return (onCopyLink !== undefined &&
+        !layout.menuPageHeaderActions && (_jsx(Button, { type: "button", variant: iconOnlyMidActions ? "secondary" : "link", icon: linkCopied ? "check" : "link", testId: "render-edit-copy-link", ...(iconOnlyMidActions && {
+            size: "icon",
+            ariaLabel: translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink"),
+        }), onClick: async () => {
+            await onCopyLink();
+            state.setLinkCopied(true);
+        }, children: iconOnlyMidActions
+            ? null
+            : translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink") })));
+}
+function renderCustomActions({ engine: { props, state }, layout, }) {
+    const { Button, Dialog } = state.primitives;
+    return props.actions?.map((action) => (_jsx(RenderEditActionButton, { action: action, iconOnly: layout.iconOnlyMidActions, Button: Button, Dialog: Dialog, onError: state.setActionError }, action.id)));
+}
+function renderMenuActionButtons({ engine: { props, state }, layout, }) {
+    const { Button, Dialog } = state.primitives;
+    return (!layout.menuPageHeaderActions &&
+        props.menuActions?.map((action) => (_jsx(RenderEditActionButton, { action: action, Button: Button, Dialog: Dialog, onError: state.setActionError }, action.id))));
+}
+function renderCancelButton({ engine: { props, state }, layout, }) {
+    const { Button } = state.primitives;
+    const { onCancel } = props;
+    return (onCancel !== undefined &&
+        !layout.cancelInHeaderMenu && (_jsx(Button, { type: "button", variant: "secondary", onClick: () => onCancel(), testId: "render-edit-cancel", children: state.translate("kumiko.actions.cancel") })));
+}
+function renderSecondaryFormActions(model) {
+    return (_jsxs(_Fragment, { children: [renderDeleteButton(model), renderCopyLinkButton(model), renderCustomActions(model), renderMenuActionButtons(model), renderCancelButton(model)] }));
+}
+function renderEditSlot({ engine: { props, form, sections } }, slot, slotName) {
+    if (slot === undefined)
+        return undefined;
+    return (_jsx(EditSlotMount, { slot: slot, slotName: slotName, screenId: props.screen.id, entityName: sections.vm.entityName, entityId: resolveExtensionEntityId(props.entityId, sections.vm.id), values: form.snapshot.values }));
+}
+// A function headerRegion places the slot itself (projectionDetail puts it
+// into its header card next to the actions); otherwise the slot renders
+// above the caller's own headerRegion.
+function placeHeaderSlot(headerRegion, headerSlotMount) {
+    if (typeof headerRegion === "function")
+        return headerRegion(headerSlotMount);
+    if (headerSlotMount === undefined)
+        return headerRegion;
+    return (_jsxs(_Fragment, { children: [headerSlotMount, headerRegion] }));
+}
+export function buildHeaderActions(model) {
+    const { props } = model.engine;
+    const headerSlotMount = renderEditSlot(model, props.screen.slots?.header, "header");
+    return {
+        headerMenuItems: buildHeaderMenuItems(model),
+        secondaryFormActions: renderSecondaryFormActions(model),
+        formHeaderRegion: placeHeaderSlot(props.headerRegion, headerSlotMount),
+        titleActionMount: renderEditSlot(model, props.screen.slots?.titleAction, "titleAction"),
+    };
+}

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

@@ -0,0 +1,29 @@
+import type { useExtensionSectionComponent } from "../app/extension-sections.tsx";
+import type { FieldIssue, FormValues } from "../headless/index.ts";
+import type { RenderEditEngine } from "./render-edit-render-model.ts";
+export type LayoutFlags = {
+    readonly rootIssues: readonly FieldIssue[];
+    readonly isScreenForm: boolean;
+    readonly titleInShell: boolean;
+    readonly menuPageHeaderActions: boolean;
+    readonly cancelInHeaderMenu: boolean;
+    readonly hasSecondaryFormActions: boolean;
+    readonly iconOnlyMidActions: boolean;
+};
+export type FooterFlags = {
+    readonly isFieldlessSubmitForm: boolean;
+    readonly showsSubmit: boolean;
+    readonly showWizardBack: boolean;
+    readonly showWizardNext: boolean;
+    readonly showSubmit: boolean;
+    readonly hasFormActions: boolean;
+    readonly nextStepTitle: string | undefined;
+    readonly isCreate: boolean;
+    readonly hasDirtyFooter: boolean;
+    readonly unsavedCount: number | undefined;
+    readonly isSettingsList: boolean;
+    readonly hasUnsavedInput: boolean;
+};
+export type FooterSlotComponent = ReturnType<typeof useExtensionSectionComponent>;
+export declare function deriveLayoutFlags<TValues extends FormValues, TCtx>({ props, state, form, }: RenderEditEngine<TValues, TCtx>): LayoutFlags;
+export declare function deriveFooterFlags<TValues extends FormValues, TCtx>(engine: RenderEditEngine<TValues, TCtx>, layout: LayoutFlags, footerSlotComponent: FooterSlotComponent): FooterFlags;

package/dist/components/render-edit-layout-flags.js

@@ -0,0 +1,106 @@
+import { PROJECTION_DETAIL_ENTITY } from "@cosmicdrift/kumiko-framework/ui-types";
+import { shouldRenderActionsIconOnly } from "../primitives.js";
+import { ROOT_ISSUE_PATH, resolveExtensionEntityId } from "./render-edit-logic.js";
+function hasSecondaryFormActions(props, menuPageHeaderActions, cancelInHeaderMenu) {
+    const { onDelete, onCopyLink, actions, menuActions, onCancel } = props;
+    const hasRecordActions = !menuPageHeaderActions && (onDelete !== undefined || onCopyLink !== undefined);
+    const hasCustomActions = actions !== undefined && actions.length > 0;
+    const hasMenuActions = !menuPageHeaderActions && menuActions !== undefined && menuActions.length > 0;
+    const hasCancel = onCancel !== undefined && !cancelInHeaderMenu;
+    return hasRecordActions || hasCustomActions || hasMenuActions || hasCancel;
+}
+export function deriveLayoutFlags({ props, state, form, }) {
+    const { fillScreenHeight, hideSectionTitles, headerRegion, actions, onCancel } = props;
+    const { PageHeader, ActionOverflowMenu } = state.primitives;
+    // Screen forms (entityEdit/actionForm filling the shell height) drop the card;
+    // the title then lives in the shell header when the shell offers a slot.
+    const rootIssues = form.snapshot.errors[ROOT_ISSUE_PATH] ?? [];
+    const isScreenForm = fillScreenHeight === true && hideSectionTitles !== true && !state.insideDrawer;
+    const titleInShell = PageHeader !== undefined &&
+        state.pageHeaderSlotAvailable &&
+        hideSectionTitles !== true &&
+        headerRegion === undefined;
+    const menuPageHeaderActions = titleInShell && isScreenForm && ActionOverflowMenu !== undefined;
+    const cancelInHeaderMenu = menuPageHeaderActions && state.isWizard && onCancel !== undefined;
+    return {
+        rootIssues,
+        isScreenForm,
+        titleInShell,
+        menuPageHeaderActions,
+        cancelInHeaderMenu,
+        // Two groups — wizard navigation on the right/top, record actions on the
+        // left/below; destructive action sits outermost, farthest from the target
+        // action.
+        hasSecondaryFormActions: hasSecondaryFormActions(props, menuPageHeaderActions, cancelInHeaderMenu),
+        // Teil-C collapse rule: driven by the custom `actions` group only — a
+        // resolved true also folds the Copy-Link button (same visual group in the
+        // footer), but never Delete/Cancel, which keep their text regardless.
+        iconOnlyMidActions: actions !== undefined && shouldRenderActionsIconOnly(actions),
+    };
+}
+function isCreateRecord(entityIdProp, vmId) {
+    const id = resolveExtensionEntityId(entityIdProp, vmId);
+    return id == null || id === "";
+}
+function resolveUnsavedCount(hasDirtyFooter, changedFieldCount, extensionDirty) {
+    if (!hasDirtyFooter)
+        return undefined;
+    if (changedFieldCount > 0)
+        return changedFieldCount;
+    return extensionDirty ? 1 : 0;
+}
+function showsSubmitButton({ props, state, sections }, isFieldlessSubmitForm) {
+    return (!props.viewMode &&
+        (sections.isFormEditable ||
+            state.hasExtensionRegistrations ||
+            isFieldlessSubmitForm ||
+            props.submitWithoutChanges !== undefined));
+}
+function deriveFormActionFlags({ state, sections, steps }, showsSubmit, footerSlotComponent) {
+    const { isWizard } = state;
+    // Mirrors every branch inside formActions below — without this guard
+    // DefaultForm renders an empty footer strip (border + padding, no content)
+    // on read-only detail screens, since `actions` would otherwise always be
+    // a defined (if empty) fragment.
+    const showWizardBack = isWizard && steps.currentStep > 0;
+    const showWizardNext = isWizard && !steps.isLastWizardStep;
+    const showSubmit = showsSubmit && (!isWizard || steps.isLastWizardStep);
+    const hasFormActions = showWizardBack ||
+        showWizardNext ||
+        showSubmit ||
+        footerSlotComponent !== undefined ||
+        sections.writeFormFooterAction !== undefined;
+    return { showWizardBack, showWizardNext, showSubmit, hasFormActions };
+}
+function deriveHasDirtyFooter({ props, state }, layout, isCreate) {
+    // Edit-mode screen forms always carry the dirty status (0 = quiet "No unsaved
+    // changes"); wizards keep the status-only-when-dirty behaviour.
+    return (!state.isWizard &&
+        !props.viewMode &&
+        (props.dirtyFooter === true ||
+            (layout.isScreenForm && !isCreate && props.headerRegion === undefined)));
+}
+export function deriveFooterFlags(engine, layout, footerSlotComponent) {
+    const { props, state, form, sections, steps } = engine;
+    // A projectionDetail's synthesized entity is empty when every section is an
+    // extension or relatedList; that is not a fieldless submit form, so it must not
+    // draw a no-op Save. Extension registrations still get their Save, since
+    // persistExtensions() runs on the customSubmit path too.
+    const isFieldlessSubmitForm = sections.isFieldless && props.screen.entity !== PROJECTION_DETAIL_ENTITY;
+    const showsSubmit = showsSubmitButton(engine, isFieldlessSubmitForm);
+    const isCreate = isCreateRecord(props.entityId, sections.vm.id);
+    const hasDirtyFooter = deriveHasDirtyFooter(engine, layout, isCreate);
+    return {
+        isFieldlessSubmitForm,
+        showsSubmit,
+        ...deriveFormActionFlags(engine, showsSubmit, footerSlotComponent),
+        nextStepTitle: state.isWizard
+            ? sections.filteredSections[steps.currentStep + 1]?.title
+            : undefined,
+        isCreate,
+        hasDirtyFooter,
+        unsavedCount: resolveUnsavedCount(hasDirtyFooter, Object.keys(form.snapshot.changes).length, state.extensionDirty),
+        isSettingsList: props.screen.layout.variant === "settings-list" && props.hideSectionTitles !== true,
+        hasUnsavedInput: form.snapshot.isDirty || state.extensionDirty,
+    };
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type { FormValues } from "../headless/index.ts";
+import type { RenderEditModel } from "./render-edit-render-model.ts";
+export declare function renderEditLayout<TValues extends FormValues, TCtx>(model: RenderEditModel<TValues, TCtx>): ReactNode;