@cosmicdrift/kumiko-renderer 0.371.1 → 0.372.0

package/dist/app/nav.d.ts

@@ -70,4 +70,7 @@ export type NavProviderProps = {
 export declare function NavProvider({ children, value }: NavProviderProps): ReactNode;
 export declare function useNavigateWithInitialValues(): (target: ScreenTarget, initialValues: Readonly<Record<string, unknown>>) => void;
 export declare function useInitialValuesHandoff(screenId: string): Readonly<Record<string, unknown>> | undefined;
+/** Like useNav, but undefined without a provider, for views that only offer
+ *  links when navigation exists. */
+export declare function useOptionalNav(): NavApi | undefined;
 export declare function useNav(): NavApi;

package/dist/app/nav.js

@@ -143,6 +143,11 @@ export function useInitialValuesHandoff(screenId) {
     }, [handoffSlot, values]);
     return values;
 }
+/** Like useNav, but undefined without a provider, for views that only offer
+ *  links when navigation exists. */
+export function useOptionalNav() {
+    return useContext(NavContext);
+}
 export function useNav() {
     const api = useContext(NavContext);
     if (api === undefined) {

package/dist/app/reference-link.d.ts

@@ -0,0 +1,5 @@
+import type { CellLink } from "@cosmicdrift/kumiko-headless";
+/** Link to a referenced record's detail screen, or undefined when there is no
+ *  navigation, the user may not open that screen, or no detail screen exists. */
+export type ReferenceLinkResolver = (refEntity: string, id: string) => CellLink | undefined;
+export declare function useReferenceLinkResolver(): ReferenceLinkResolver;

package/dist/app/reference-link.js

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import { useUserRoles } from "../context/user-roles-context.js";
+import { useAppFeatures } from "./app-features-context.js";
+import { useOptionalNav } from "./nav.js";
+import { navigateWithReturnTo, useReturnHost } from "./return-to.js";
+import { navigateTargetAllows } from "./screen-access.js";
+export function useReferenceLinkResolver() {
+    const nav = useOptionalNav();
+    const appFeatures = useAppFeatures();
+    const userRoles = useUserRoles();
+    const host = useReturnHost();
+    return useCallback((refEntity, id) => {
+        if (nav === undefined || refEntity === "" || id === "")
+            return undefined;
+        if (!navigateTargetAllows({ entity: refEntity }, appFeatures, userRoles))
+            return undefined;
+        const target = { entity: refEntity, id };
+        // hrefFor throws for an entity without a detailFor screen; outside
+        // createKumikoApp the feature list is empty, so the gate above can't
+        // rule that out. The NavApi owns target resolution, so ask it.
+        let href;
+        try {
+            href = nav.hrefFor(target);
+        }
+        catch {
+            return undefined;
+        }
+        if (href === "")
+            return undefined;
+        return { href, onPress: () => navigateWithReturnTo(nav, target, host) };
+    }, [nav, appFeatures, userRoles, host]);
+}

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

@@ -8,3 +8,5 @@ export declare function hasIssueWithoutVisibleField(issuePaths: readonly string[
 export declare function findFirstErroringSectionIndex(sections: readonly EditSectionViewModel[], issuePaths: readonly string[]): number | undefined;
 export declare function filterEditSections(sections: readonly EditSectionViewModel[], fieldsFilter: readonly string[] | undefined): readonly EditSectionViewModel[];
 export declare function isDispatcherRejection(value: unknown): value is DispatcherError;
+export declare const ROOT_ISSUE_PATH = "(root)";
+export declare function issuesAfterEdit<TIssue>(errors: Readonly<Record<string, TIssue>>, changedField: string): Readonly<Record<string, TIssue>>;

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

@@ -84,3 +84,14 @@ export function isDispatcherRejection(value) {
         "i18nKey" in value &&
         typeof value.i18nKey === "string");
 }
+export const ROOT_ISSUE_PATH = "(root)";
+// Issues that stop applying once the user edits `changedField`: its own paths
+// (and nested ones) and the form-level (root) issues. Returns the same object
+// when nothing was dropped, so callers can skip the state update.
+export function issuesAfterEdit(errors, changedField) {
+    const remaining = Object.fromEntries(Object.entries(errors).filter(([path]) => path !== ROOT_ISSUE_PATH &&
+        path !== changedField &&
+        !path.startsWith(`${changedField}.`) &&
+        !path.startsWith(`${changedField}[`)));
+    return Object.keys(remaining).length === Object.keys(errors).length ? errors : remaining;
+}

package/dist/components/render-edit.js

@@ -19,7 +19,7 @@ import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header
 import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, usePrimitives, } from "../primitives.js";
 import { GridCellForField } from "./grid-cell-for-field.js";
 import { RelatedListSection } from "./related-list-section.js";
-import { filterEditSections, findFirstErroringSectionIndex, hasEditableSection, hasIssueWithoutRenderedField, isDispatcherRejection, resolveExtensionEntityId, shouldNotifyCaller, } from "./render-edit-logic.js";
+import { filterEditSections, findFirstErroringSectionIndex, hasEditableSection, hasIssueWithoutRenderedField, isDispatcherRejection, issuesAfterEdit, ROOT_ISSUE_PATH, resolveExtensionEntityId, shouldNotifyCaller, } from "./render-edit-logic.js";
 import { WriteFormSection } from "./write-form-section.js";
 // Qualified names of the bundled `form-draft` feature. Hardcoded because the
 // renderer must not depend on @cosmicdrift/kumiko-bundled-features; a screen
@@ -255,6 +255,9 @@ export function RenderEdit(props) {
     const [linkCopied, setLinkCopied] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [formError, setFormError] = useState(null);
+    // Only a submit's validation/server error is cleared by editing; a delete
+    // rejection and a version conflict (reload is the way out) stay put.
+    const [formErrorSource, setFormErrorSource] = useState("submit");
     // A rejected delete can carry several blocking reasons; the first one is the
     // banner's headline (formError), the rest are listed beneath it.
     const [extraDeleteIssues, setExtraDeleteIssues] = useState([]);
@@ -364,6 +367,18 @@ export function RenderEdit(props) {
         ...(ctx !== undefined && { ctx }),
         ...(submitConfig !== undefined && { submit: submitConfig }),
     });
+    // Wired at the user-input boundary, not in controller.setField: computed
+    // fields, prefill, draft restore and action patches also call setValues
+    // after a failed submit and must not wipe the errors.
+    const clearErrorsOnInput = (changedField) => {
+        const errors = controller.getSnapshot().errors;
+        const remaining = issuesAfterEdit(errors, changedField);
+        if (remaining !== errors)
+            controller.setErrors(remaining);
+        if (formErrorSource === "submit" && formError?.code !== "version_conflict") {
+            setFormError(null);
+        }
+    };
     const lastRefreshTokenRef = useRef(refreshToken);
     useEffect(() => {
         if (lastRefreshTokenRef.current === refreshToken)
@@ -1040,6 +1055,7 @@ export function RenderEdit(props) {
                         jumpToStep(step);
                 }
                 setExtraDeleteIssues([]);
+                setFormErrorSource("submit");
                 setFormError(hasIssueWithoutRenderedField(issuePaths, filteredSections) ? result.error : null);
             }
             // skip: on entity-success-but-extension-failure the extension-error
@@ -1403,6 +1419,7 @@ export function RenderEdit(props) {
                                         accent: fieldAccent?.(field.field) === true,
                                     }), issues: snapshot.errors[field.field], onChange: (v) => {
                                         controller.setField(field.field, v);
+                                        clearErrorsOnInput(field.field);
                                         if (validateOnChange === true)
                                             controller.validate([field.field]);
                                     }, GridCell: GridCell, featureName: featureName, ...(labelAppendix !== undefined && {
@@ -1463,13 +1480,14 @@ export function RenderEdit(props) {
                                     onReload();
                                     setFormError(null);
                                     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) }), extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })), (snapshot.errors["(root)"] ?? []).map((issue) => (_jsx(Banner, { variant: "error", testId: "render-edit-root-issue", children: _jsx(Text, { children: translate(issue.i18nKey, issue.params) }) }, issue.i18nKey))), extensionErrorKey !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-extension-error", children: _jsx(Text, { testId: "render-edit-extension-error-key", children: translate(extensionErrorKey) }) })), actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError })), onDelete !== undefined && (_jsx(Dialog, { open: confirmDeleteOpen, onOpenChange: setConfirmDeleteOpen, title: translate("kumiko.actions.delete-confirm"), confirmLabel: translate("kumiko.actions.delete"), variant: "danger", onConfirm: async () => {
+                                }, 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) }), extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })), (snapshot.errors[ROOT_ISSUE_PATH] ?? []).map((issue) => (_jsx(Banner, { variant: "error", testId: "render-edit-root-issue", children: _jsx(Text, { children: translate(issue.i18nKey, issue.params) }) }, issue.i18nKey))), extensionErrorKey !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-extension-error", children: _jsx(Text, { testId: "render-edit-extension-error-key", children: translate(extensionErrorKey) }) })), actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError })), onDelete !== undefined && (_jsx(Dialog, { open: confirmDeleteOpen, onOpenChange: setConfirmDeleteOpen, title: translate("kumiko.actions.delete-confirm"), confirmLabel: translate("kumiko.actions.delete"), variant: "danger", onConfirm: async () => {
                                 const rejection = await onDelete();
                                 // A rejected delete (e.g. a preDelete hook) carries its reason in
                                 // the field issues; the top-level key is only "validation failed".
                                 if (isDispatcherRejection(rejection)) {
                                     const [issue, ...otherIssues] = rejection.details?.fields ?? [];
                                     setExtraDeleteIssues(otherIssues);
+                                    setFormErrorSource("delete");
                                     setFormError(issue === undefined
                                         ? rejection
                                         : { ...rejection, i18nKey: issue.i18nKey, i18nParams: issue.params });

package/dist/components/render-field.js

@@ -1,12 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isFormatSpec, SYSTEM_REFERENCE_LABELS, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { applyFormatSpec, currencyDecimals, } from "@cosmicdrift/kumiko-headless";
+import { applyFormatSpec, currencyDecimals, EMPTY_VALUE_PLACEHOLDER, } from "@cosmicdrift/kumiko-headless";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { createContext, Fragment, useCallback, useContext, useMemo, useState, } from "react";
 import { useAppFeatures } from "../app/app-features-context.js";
 import { useColumnRenderer } from "../app/column-renderers.js";
 import { extensionSectionName } from "../app/extension-sections.js";
 import { toKebab } from "../app/qn.js";
+import { useReferenceLinkResolver } from "../app/reference-link.js";
 import { screenAccessAllows } from "../app/screen-access.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { REFERENCE_COMBOBOX_LIMIT } from "../hooks/reference-limits.js";
@@ -243,8 +244,9 @@ function FieldRendererOutput({ field, renderer, row, appLocale, }) {
 // label via the same lookup query as ReferenceInput's combobox, but shows
 // plain text instead of mounting an (unusable, disabled) combobox.
 function ReadOnlyReferenceValue({ field, featureName, }) {
-    const { Text } = usePrimitives();
+    const { Text, Link } = usePrimitives();
     const t = useTranslation();
+    const resolveReferenceLink = useReferenceLinkResolver();
     const refEntity = field.refEntity ?? "";
     const refFeature = field.refFeature ?? featureName;
     const isMultiple = field.refMultiple === true;
@@ -258,20 +260,23 @@ function ReadOnlyReferenceValue({ field, featureName, }) {
             ? [field.value]
             : [];
     if (ids.length === 0)
-        return _jsx(Text, { testId: `field-value-${field.field}`, children: "\u2014" });
+        return _jsx(Text, { testId: `field-value-${field.field}`, children: EMPTY_VALUE_PLACEHOLDER });
     const rows = queryResult.data?.rows ?? [];
     // System-scope ids (e.g. SYSTEM_TENANT_ID) never have a backing row —
     // same central fallback as useReferenceLookup (render-list.tsx), so a
     // reference field showing one on the detail path also gets a label
     // instead of the raw id.
     const systemLabel = SYSTEM_REFERENCE_LABELS[`${refFeature}:${refEntity}`];
-    const labels = ids.map((id) => {
-        if (systemLabel !== undefined && id === systemLabel.id)
-            return t(systemLabel.labelKey);
+    const parts = ids.map((id) => {
+        if (systemLabel !== undefined && id === systemLabel.id) {
+            return { id, label: t(systemLabel.labelKey), link: undefined };
+        }
         const row = rows.find((r) => String(r["id"] ?? "") === id);
-        return row !== undefined ? String(row[labelKey] ?? id) : id;
+        if (row === undefined)
+            return { id, label: id, link: undefined };
+        return { id, label: String(row[labelKey] ?? id), link: resolveReferenceLink(refEntity, id) };
     });
-    return _jsx(Text, { testId: `field-value-${field.field}`, children: labels.join(", ") });
+    return (_jsx(Text, { testId: `field-value-${field.field}`, children: parts.map(({ id, label, link }, index) => (_jsxs(Fragment, { children: [index > 0 && ", ", link === undefined ? (label) : (_jsx(Link, { href: link.href, onPress: link.onPress, testId: `field-link-${field.field}-${id}`, children: label }))] }, id))) }));
 }
 // Field types whose read display already isn't a boxed "disabled input" look
 // (embedded/jsonb render as an info Banner) — `readOnlyDisplayText` doesn't
@@ -534,7 +539,7 @@ function locatedValue(v) {
 function readOnlyDisplayText(field, appLocale, t) {
     const { type, value } = field;
     if (value === undefined || value === null || value === "")
-        return "—";
+        return EMPTY_VALUE_PLACEHOLDER;
     if (type === "text" && field.writeOnly === true)
         return t("kumiko.field.writeOnly.set");
     if (type === "text" && field.format === "password")
@@ -549,7 +554,7 @@ function readOnlyDisplayText(field, appLocale, t) {
         case "locatedTimestamp": {
             const located = locatedValue(value);
             if (located === "" || located.at === "")
-                return "—";
+                return EMPTY_VALUE_PLACEHOLDER;
             return applyFormatSpec({ format: "timestamp", locale: field.dateLocale ?? appLocale }, located.utc ?? located.at);
         }
         case "number":
@@ -557,14 +562,14 @@ function readOnlyDisplayText(field, appLocale, t) {
         case "decimal": {
             const n = numberValue(value);
             return n === ""
-                ? "—"
+                ? EMPTY_VALUE_PLACEHOLDER
                 : new Intl.NumberFormat(appLocale, { useGrouping: field.grouping ?? true }).format(n);
         }
         case "money": {
             const currency = resolveMoneyCurrency(value, field.currency);
             const minor = moneyMinorValue(value, currency);
             if (minor === "")
-                return "—";
+                return EMPTY_VALUE_PLACEHOLDER;
             const major = minor / 10 ** currencyDecimals(currency);
             return new Intl.NumberFormat(appLocale, { style: "currency", currency }).format(major);
         }
@@ -573,7 +578,7 @@ function readOnlyDisplayText(field, appLocale, t) {
             const labels = field.optionLabels;
             const values = Array.isArray(value) ? value : [value];
             if (values.length === 0)
-                return "—";
+                return EMPTY_VALUE_PLACEHOLDER;
             return values
                 .map((v) => (typeof v === "string" ? (labels?.[v] ?? v) : stringValue(v)))
                 .join(", ");

package/dist/components/render-list.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { computeListViewModel } from "@cosmicdrift/kumiko-headless";
+import { computeListViewModel, EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
+import { useReferenceLinkResolver } from "../app/reference-link.js";
 import { useReferenceLookup } from "../hooks/use-reference-lookup.js";
 import { useTranslation } from "../i18n.js";
 import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
@@ -88,6 +89,7 @@ export function RenderList(props) {
             return { ...prev, [field]: map };
         });
     }, []);
+    const resolveReferenceLink = useReferenceLinkResolver();
     const enrichedColumns = useMemo(() => {
         if (referenceColumns.length === 0)
             return vm.columns;
@@ -100,35 +102,49 @@ export function RenderList(props) {
                 return col;
             const map = referenceLookups[col.field];
             const labelField = col.refLabelField ?? "id";
+            const refEntity = col.refEntity ?? "";
+            // Only a row the user can see is linkable: resolved by the server
+            // eagerload or by the lookup query. A multi-reference stays text.
+            const linkFor = (value, row) => {
+                if (value === null || value === undefined || value === "" || Array.isArray(value)) {
+                    return undefined;
+                }
+                const id = String(value);
+                const eagerloaded = eagerloadedRef(row, col.field);
+                // The server leaves a missing or unreadable target out; null is treated the same.
+                const resolved = (typeof eagerloaded === "object" &&
+                    eagerloaded !== null &&
+                    !Array.isArray(eagerloaded)) ||
+                    map?.has(id);
+                return resolved === true ? resolveReferenceLink(refEntity, id) : undefined;
+            };
             const renderer = (value, row) => {
                 // Tier 2.7e Server-Eagerload: wenn der Server _refs mit-
                 // schickt, lesen wir den Display-Wert direkt aus der
                 // resolved Row — kein Roundtrip durch die Bridge-Map nötig
                 // und keine limit:200-Constraint. EagerloadedRow-Type aus
                 // @cosmicdrift/kumiko-framework/db pinnt die Form von _refs.
-                const eagerloadedRow = row;
-                const resolved = eagerloadedRow?._refs?.[col.field];
+                const resolved = eagerloadedRef(row, col.field);
                 if (Array.isArray(resolved) && resolved.length > 0) {
                     return resolved.map((r) => String(r[labelField] ?? r["id"] ?? "")).join(", ");
                 }
-                if (resolved !== undefined && !Array.isArray(resolved)) {
-                    const single = resolved; // @cast-boundary render-helper
-                    return String(single[labelField] ?? single["id"] ?? "");
+                if (isPlainRecord(resolved)) {
+                    return String(resolved[labelField] ?? resolved["id"] ?? "");
                 }
                 // Renderer-Side-Fallback (kein Server-Eagerload aktiv).
                 if (Array.isArray(value)) {
                     if (value.length === 0)
-                        return "—";
+                        return EMPTY_VALUE_PLACEHOLDER;
                     return value.map((v) => map?.get(String(v)) ?? String(v)).join(", ");
                 }
                 if (value === null || value === undefined || value === "")
-                    return "—";
+                    return EMPTY_VALUE_PLACEHOLDER;
                 const idStr = String(value);
                 return map?.get(idStr) ?? idStr;
             };
-            return { ...col, renderer };
+            return { ...col, renderer, linkFor };
         });
-    }, [vm.columns, referenceColumns, referenceLookups]);
+    }, [vm.columns, referenceColumns, referenceLookups, resolveReferenceLink]);
     const enrichedVm = useMemo(() => ({
         ...vm,
         columns: enrichedColumns,
@@ -155,15 +171,14 @@ export function RenderList(props) {
     const toolbarIconOnly = hasToolbarActions && shouldRenderActionsIconOnly(toolbarActions);
     const createButton = onCreate !== undefined && createInPageHeader && pageHeaderCompact ? (_jsx(Button, { variant: "primary", icon: "plus", size: "icon", ariaLabel: effectiveCreateLabel, title: effectiveCreateLabel, onClick: onCreate, testId: "render-list-create" })) : onCreate !== undefined ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-create", className: "px-3.5", children: effectiveCreateLabel })) : undefined;
     // Without onCreate (e.g. a navigate action as the list's only CTA) the primary
-    // toolbar action takes the header slot on phones, so it is not a text button
-    // squeezed next to the search field. Desktop keeps it in the toolbar.
-    const promotedToolbarAction = onCreate === undefined &&
-        PageHeader !== undefined &&
-        pageHeaderSlotAvailable &&
-        pageHeaderCompact
+    // toolbar action takes the page-header slot like a "+ Neu" button would: an icon
+    // on phones, labelled on desktop, so projection lists look like entity lists.
+    const promotedToolbarAction = onCreate === undefined && PageHeader !== undefined && pageHeaderSlotAvailable
         ? toolbarActions?.find(isHeaderPromotableToolbarAction)
         : undefined;
-    const promotedActionButton = promotedToolbarAction !== undefined ? (_jsx(ToolbarActionView, { action: { ...promotedToolbarAction, icon: promotedToolbarAction.icon ?? "plus" }, iconOnly: true, Button: Button, Dialog: Dialog, Banner: Banner })) : undefined;
+    const promotedActionButton = promotedToolbarAction !== undefined ? (_jsx(ToolbarActionView, { action: pageHeaderCompact
+            ? { ...promotedToolbarAction, icon: promotedToolbarAction.icon ?? "plus" }
+            : promotedToolbarAction, iconOnly: pageHeaderCompact, Button: Button, Dialog: Dialog, Banner: Banner })) : undefined;
     const toolbarActionsInToolbar = toolbarActions?.filter((a) => a !== promotedToolbarAction) ?? [];
     const hasToolbarActionsInToolbar = toolbarActionsInToolbar.length > 0;
     const toolbarEnd = hasHeaderSlot ||
@@ -266,3 +281,16 @@ function ToolbarActionView({ action, iconOnly = false, Button, Dialog, Banner, }
                     }
                 }, testId: `render-list-toolbar-action-${action.id}`, children: showIconOnly ? null : action.label }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: trigger, testId: `render-list-toolbar-action-${action.id}-dialog` }), errorText !== null && (_jsx(Banner, { variant: "error", testId: `render-list-toolbar-action-${action.id}-error`, children: errorText }))] }));
 }
+function isPlainRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+// The server leaves a missing or unreadable target out of `_refs`, and a null
+// entry means the same: both read as unresolved.
+function eagerloadedRef(row, field) {
+    if (!isPlainRecord(row) || !isPlainRecord(row["_refs"]))
+        return undefined;
+    const ref = row["_refs"][field];
+    if (Array.isArray(ref))
+        return ref.filter(isPlainRecord);
+    return isPlainRecord(ref) ? ref : undefined;
+}

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

@@ -8,7 +8,7 @@ import { useForm } from "../hooks/use-form.js";
 import { useTranslation } from "../i18n.js";
 import { STICKY_PRIMARY_ACTION_PROP, usePrimitives } from "../primitives.js";
 import { GridCellForField } from "./grid-cell-for-field.js";
-import { hasIssueWithoutVisibleField } from "./render-edit-logic.js";
+import { hasIssueWithoutVisibleField, issuesAfterEdit } from "./render-edit-logic.js";
 function buildWriteFormSchema(fields) {
     return z
         .object({})
@@ -93,7 +93,14 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
         onFooterAction(submitButton);
         return () => onFooterAction(undefined);
     }, [onFooterAction, isSubmitting, submitLabel]);
-    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" }))] }));
+    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);
+                        const errors = controller.getSnapshot().errors;
+                        const remaining = issuesAfterEdit(errors, field.field);
+                        if (remaining !== errors)
+                            controller.setErrors(remaining);
+                        setError(null);
+                    }, 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.

package/dist/i18n-defaults.js

@@ -94,6 +94,11 @@ export const kumikoDefaultTranslations = {
         "kumiko.list.count.other": "{count} entries",
         "kumiko.list.row-actions.more": "More actions",
         "kumiko.page-header.actions": "Page actions",
+        "kumiko.list.actions": "Actions",
+        "kumiko.sidebar.toggle": "Toggle sidebar",
+        "kumiko.sidebar.title": "Navigation",
+        "kumiko.sidebar.description": "The app's main navigation.",
+        "kumiko.breadcrumb.label": "Breadcrumb",
         "kumiko.theme.auto": "Automatic theme",
         "kumiko.theme.dark": "Dark theme",
         "kumiko.theme.light": "Light theme",

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { KumikoScreen, qualifyNavId, qualifyScreenId, ScreenMissingState, } from
 export type { DateRangeBound, DateRangeValue, ResolvedDateRangeFacet } from "./app/list-facets.ts";
 export { buildDateRangePayload, clampDateRange, readDateRange, resolveDateRangeFacets, } from "./app/list-facets.ts";
 export type { NavApi, NavigateOptions, NavProviderProps, NavRoute, NavTarget, ObjectTarget, ScreenTarget, } from "./app/nav.tsx";
-export { formatPath, hasDetailScreen, NavProvider, parsePath, resolveTarget, useNav, useNavigateWithInitialValues, } from "./app/nav.tsx";
+export { formatPath, hasDetailScreen, NavProvider, parsePath, resolveTarget, useNav, useNavigateWithInitialValues, useOptionalNav, } from "./app/nav.tsx";
 export { lastSegment } from "./app/qn.ts";
 export type { ReturnHost, ReturnTo } from "./app/return-to.tsx";
 export { navigateToReturn, navigateToReturnOr, navigateWithReturnTo, RETURN_TO_PARAM, ReturnHostProvider, resolveReturnTarget, splitReturnTo, useReturnHost, useReturnTarget, } from "./app/return-to.tsx";

package/dist/index.js

@@ -21,7 +21,7 @@ export { ExtensionSectionsProvider, extensionSectionName, useExtensionSectionCom
 export { isAppSchema, toAppSchema } from "./app/feature-schema.js";
 export { KumikoScreen, qualifyNavId, qualifyScreenId, ScreenMissingState, } from "./app/kumiko-screen.js";
 export { buildDateRangePayload, clampDateRange, readDateRange, resolveDateRangeFacets, } from "./app/list-facets.js";
-export { formatPath, hasDetailScreen, NavProvider, parsePath, resolveTarget, useNav, useNavigateWithInitialValues, } from "./app/nav.js";
+export { formatPath, hasDetailScreen, NavProvider, parsePath, resolveTarget, useNav, useNavigateWithInitialValues, useOptionalNav, } from "./app/nav.js";
 export { lastSegment } from "./app/qn.js";
 export { navigateToReturn, navigateToReturnOr, navigateWithReturnTo, RETURN_TO_PARAM, ReturnHostProvider, resolveReturnTarget, splitReturnTo, useReturnHost, useReturnTarget, } from "./app/return-to.js";
 export { useEmbeddedScreen } from "./app/use-embedded-screen.js";

package/package.json

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

package/src/changes.json

@@ -1,4 +1,22 @@
 [
+  {
+    "version": "0.372.0",
+    "type": "fix",
+    "title": "Empty values use one placeholder everywhere",
+    "detail": "Empty table cells, reference columns, read-only fields and dashboard lists now share one em dash placeholder (exported as EMPTY_VALUE_PLACEHOLDER from the headless package) instead of mixing en and em dashes."
+  },
+  {
+    "version": "0.372.0",
+    "type": "fix",
+    "title": "Form errors clear once the user edits the affected field",
+    "detail": "In RenderEdit, typing into a field removes that field's server issues and the form-level issues, and dismisses the submit error banner. A version_conflict banner and a delete rejection stay until reloaded or retried. Programmatic value changes (initial, draft restore, action patches) leave errors untouched."
+  },
+  {
+    "version": "0.372.0",
+    "type": "improvement",
+    "title": "Reference fields and columns link to the referenced record",
+    "detail": "A resolved reference in a list column or a read-only field links to the detail screen of the referenced entity when the user may open it, so the link also works in a new tab. Unresolved ids, system labels, multi-reference list cells and cells in a clickable first column or card stay plain text. New useOptionalNav hook returns undefined without a NavProvider."
+  },
   {
     "version": "0.371.0",
     "type": "improvement",