@cosmicdrift/kumiko-renderer 0.382.0 → 0.383.1

package/dist/app/action-form-shim.js

@@ -37,9 +37,10 @@ function lockExcludedFieldsInSection(section, excluded) {
         return section;
     return {
         ...section,
-        // kumiko-lint-ignore section-fields-raw rewrites both sources in place — the groups branch below does the same for groups[].fields
-        fields: section.fields.map((spec) => lockExcludedFieldSpec(spec, excluded)),
-        ...(section.groups !== undefined && {
+        ...("fields" in section && {
+            fields: section.fields.map((spec) => lockExcludedFieldSpec(spec, excluded)),
+        }),
+        ...("groups" in section && {
             groups: section.groups.map((group) => ({
                 ...group,
                 fields: group.fields.map((spec) => lockExcludedFieldSpec(spec, excluded)),

package/dist/app/entity-list-expanded-row.js

@@ -6,6 +6,7 @@ import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
 import { useClientActionRuntime } from "./client-actions.js";
+import { ErrorReference } from "./error-reference.js";
 import { useNav } from "./nav.js";
 import { useReturnHost } from "./return-to.js";
 import { buildRecordActions } from "./row-actions.js";
@@ -49,5 +50,5 @@ export function EntityListExpandedRow({ section, row, featureName, translate, ex
         clientActions,
     ]);
     const titleActionButtons = titleActions?.map((action) => (_jsx(RenderEditActionButton, { action: action, Button: Button, Dialog: Dialog, onError: setActionError }, action.id)));
-    return (_jsxs(_Fragment, { children: [actionError !== null && (_jsx(Banner, { variant: "error", testId: `row-${row.id}-expansion-action-error`, children: actionError })), _jsx(RelatedListSection, { embedded: true, section: section, parentId: String(row.values["id"] ?? row.id), record: row.values, featureName: featureName, translate: effectiveTranslate, onOpenDrawer: openDrawer, onAfterWrite: onAfterWrite, ...(titleActionButtons !== undefined && { actions: titleActionButtons }) }, expansionNonce)] }));
+    return (_jsxs(_Fragment, { children: [actionError !== null && (_jsxs(Banner, { variant: "error", testId: `row-${row.id}-expansion-action-error`, children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), _jsx(RelatedListSection, { embedded: true, section: section, parentId: String(row.values["id"] ?? row.id), record: row.values, featureName: featureName, translate: effectiveTranslate, onOpenDrawer: openDrawer, onAfterWrite: onAfterWrite, ...(titleActionButtons !== undefined && { actions: titleActionButtons }) }, expansionNonce)] }));
 }

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+/** An error message plus the server request id support needs to find the log line. */
+export type ErrorNotice = {
+    readonly message: string;
+    readonly requestId?: string;
+};
+export declare function errorNoticeOf(error: unknown): ErrorNotice;
+export declare function ErrorReference({ requestId, testId, }: {
+    readonly requestId: string | undefined;
+    readonly testId?: string;
+}): ReactNode;

package/dist/app/error-reference.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { WriteFailedError } from "./write-failed-error.js";
+export function errorNoticeOf(error) {
+    if (error instanceof WriteFailedError) {
+        const { requestId } = error.dispatcherError;
+        return { message: error.message, ...(requestId !== undefined && { requestId }) };
+    }
+    return { message: error instanceof Error ? error.message : String(error) };
+}
+export function ErrorReference({ requestId, testId = "error-reference", }) {
+    const { Grid, Text, CopyButton } = usePrimitives();
+    const t = useTranslation();
+    if (requestId === undefined || requestId === "")
+        return null;
+    return (_jsxs(Grid, { columns: "auto", children: [_jsx(Text, { variant: "small", testId: `${testId}-id`, children: t("kumiko.error.reference", { id: requestId }) }), CopyButton !== undefined && (_jsx(CopyButton, { text: requestId, label: t("kumiko.error.copyReference"), copiedLabel: t("kumiko.error.referenceCopied"), className: "min-h-0 h-7", testId: `${testId}-copy` }))] }));
+}

package/dist/app/header-actions-bar.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { RenderEditAction } from "../components/render-edit-types.ts";
 import type { usePrimitives } from "../primitives.tsx";
+import type { ErrorNotice } from "./error-reference.tsx";
 export declare function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu, onError, collapseAfterPrimary, compact, preferredPrimaryId, PageHeader, overflowTestId, }: {
     /** `primaryAction` of the screen: wins over the edit/primary-style precedence. */
     readonly preferredPrimaryId?: string;
@@ -13,7 +14,7 @@ export declare function HeaderActionsBar({ actions, Button, Dialog, ActionOverfl
     readonly Button: ReturnType<typeof usePrimitives>["Button"];
     readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
     readonly ActionOverflowMenu: ReturnType<typeof usePrimitives>["ActionOverflowMenu"];
-    readonly onError: (text: string | null) => void;
+    readonly onError: (notice: ErrorNotice | null) => void;
     /** Test id of the overflow menu; projectionDetail's by default. */
     readonly overflowTestId?: string;
 }): ReactNode;

package/dist/app/kumiko-screen.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { evalFieldCondition, isRecordLocked, isWriteFormEditSection, metricField, parseRefTarget, } from "@cosmicdrift/kumiko-framework/ui-types";
+import { evalFieldCondition, isRecordLocked, isWriteFormEditSection, parseRefTarget, } from "@cosmicdrift/kumiko-framework/ui-types";
 import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
 import { TENANT_CURRENCY_CONFIG_KEY } from "@cosmicdrift/kumiko-types/fields";
 import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
@@ -34,6 +34,7 @@ import { useCustomScreenComponent } from "./custom-screens.js";
 import { useDashboardBody } from "./dashboard-body.js";
 import { applyEditPrefill } from "./edit-prefill.js";
 import { EntityListExpandedRow } from "./entity-list-expanded-row.js";
+import { ErrorReference } from "./error-reference.js";
 import { FacetCountBridges } from "./facet-count-bridge.js";
 import { buildFormSchema } from "./form-schema.js";
 import { HeaderActionsBar } from "./header-actions-bar.js";
@@ -1917,14 +1918,6 @@ function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
                     void rowsQuery.refetch();
                 } })] }));
 }
-function metricLabelKey(metric, fieldLabels) {
-    if (typeof metric !== "string" && metric.label !== undefined)
-        return metric.label;
-    return fieldLabels?.[metricField(metric)];
-}
-function metricNavigateSpec(metric) {
-    return typeof metric === "string" ? undefined : metric.navigate;
-}
 // Reuses runProjectionRowNavigate (row-actions.ts) instead of re-deriving
 // navigate execution — a metric click has the same entity/screen/params
 // shape as a RowActionNavigate, minus the fields (id, label, style) that
@@ -1934,8 +1927,9 @@ function runMetricNavigate(nav, navigate, record, host) {
     // activates that tab — no route change, so runProjectionRowNavigate
     // (which always navigates) doesn't apply here.
     if (navigate.screen === undefined && navigate.entity === undefined) {
-        if (navigate.tab !== undefined)
-            nav.setSearchParams({ tab: navigate.tab });
+        const { tab } = navigate;
+        if (tab !== undefined)
+            requestLeave(() => nav.setSearchParams({ tab }));
         return;
     }
     const base = { kind: "navigate", id: "metric-navigate", label: "" };
@@ -2303,12 +2297,11 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // slots.header shares the header card with the actions (one card, actions
     // top right) instead of rendering as an unframed block above it.
     const metricItems = screen.metrics?.map((metric) => {
-        const field = metricField(metric);
-        const labelKey = metricLabelKey(metric, screen.fieldLabels);
-        const label = labelKey !== undefined ? effectiveTranslate(labelKey) : field;
+        const field = metric.field;
+        const label = effectiveTranslate(metric.label);
         const value = String(record[field] ?? "");
         const testId = `kumiko-screen-projection-detail-metric-${field}`;
-        const navigate = metricNavigateSpec(metric);
+        const navigate = metric.navigate;
         const onPress = navigate !== undefined && navigateTargetAllows(navigate, appFeatures, userRoles)
             ? () => runMetricNavigate(nav, navigate, record, host)
             : undefined;
@@ -2323,7 +2316,7 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     const statusBadge = header?.status !== undefined && StatusBadge !== undefined ? (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })) : undefined;
     // Lives in the band's subtitle row so it shares the metrics' horizontal inset.
     const bandSubtitle = pageHeaderCompact && statusBadge !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-status-row", children: statusBadge }), headerSubtitleSlot] })) : (headerSubtitleSlot);
-    const actionErrorBanner = actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError }));
+    const actionErrorBanner = actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] }));
     const renderHeaderContent = (headerSlot) => (_jsxs(_Fragment, { children: [usesPageHeaderSlot ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...(header !== undefined && { title: String(record[header.title] ?? "") }), ...(header === undefined && recordTitle !== undefined && { title: recordTitle }), ...(!pageHeaderCompact && statusBadge !== undefined && { status: statusBadge }), ...(hasHeaderActions && {
                             actions: (_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-actions", children: _jsx(HeaderActionsBar, { actions: headerActionsList, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, collapseAfterPrimary: true, compact: pageHeaderCompact, PageHeader: PageHeader, ...(screen.primaryAction !== undefined && {
                                         preferredPrimaryId: screen.primaryAction,

package/dist/app/projection-detail-shim.js

@@ -45,9 +45,8 @@ export function synthesizeProjectionDetailScreen(screen) {
             return section;
         return {
             ...section,
-            // kumiko-lint-ignore section-fields-raw rewrites both sources in place — the groups branch below does the same for groups[].fields
-            fields: section.fields.map(forceReadOnly),
-            ...(section.groups !== undefined && {
+            ...("fields" in section && { fields: section.fields.map(forceReadOnly) }),
+            ...("groups" in section && {
                 groups: section.groups.map((group) => ({
                     ...group,
                     fields: group.fields.map(forceReadOnly),

package/dist/app/query-state-banners.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
+import { ErrorReference } from "./error-reference.js";
 import { dispatcherErrorText } from "./write-failed-error.js";
 export function QueryLoadingBanner() {
     const { Banner } = usePrimitives();
@@ -10,5 +11,5 @@ export function QueryLoadingBanner() {
 export function QueryErrorBanner({ error, translate, onRetry, }) {
     const { Banner, Button } = usePrimitives();
     const t = useTranslation();
-    return (_jsx(Banner, { padded: true, variant: "error", testId: "kumiko-screen-error", actions: _jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, testId: "kumiko-screen-retry", children: t("kumiko.actions.retry") }), children: dispatcherErrorText(error, translate) }));
+    return (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-screen-error", actions: _jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, testId: "kumiko-screen-retry", children: t("kumiko.actions.retry") }), children: [dispatcherErrorText(error, translate), _jsx(ErrorReference, { requestId: error.requestId })] }));
 }

package/dist/app/return-to.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
+import { requestLeave } from "../leave-guard.js";
 import { useAppFeatures } from "./app-features-context.js";
 import { useNav, } from "./nav.js";
 import { lastSegment } from "./qn.js";
@@ -91,14 +92,17 @@ function returnParamsFor(nav, target, host) {
 export function navigateWithReturnTo(nav, target, host, params) {
     // Snapshot before navigating — nav.searchParams still describes the host.
     const returnParams = returnParamsFor(nav, target, host);
-    nav.navigate(target);
     const merged = {
         ...(params ?? {}),
         ...returnParams,
     };
-    if (Object.keys(merged).length > 0) {
-        nav.setSearchParams(merged);
-    }
+    // One question for navigate + params: asked separately, a declined leave would still merge the params into the host URL.
+    requestLeave(() => {
+        nav.navigate(target);
+        if (Object.keys(merged).length > 0) {
+            nav.setSearchParams(merged);
+        }
+    });
 }
 /** Jumps back to an already-validated returnTo target and restores the host
  *  search params carried in the same value. The host's own returnTo travels
@@ -109,10 +113,12 @@ export function navigateToReturn(nav, target) {
     // target elsewhere must not inherit it.
     const returnTo = raw === undefined ? undefined : splitReturnTo(raw);
     const state = returnTo?.path === formatReturnTo(target) ? returnTo.state : NO_RETURN_STATE;
-    nav.navigate(target);
-    // The explicit null drops this screen's own returnTo on nav impls whose
-    // navigate keeps the query.
-    nav.setSearchParams({ ...state, [RETURN_TO_PARAM]: state[RETURN_TO_PARAM] ?? null });
+    requestLeave(() => {
+        nav.navigate(target);
+        // The explicit null drops this screen's own returnTo on nav impls whose
+        // navigate keeps the query.
+        nav.setSearchParams({ ...state, [RETURN_TO_PARAM]: state[RETURN_TO_PARAM] ?? null });
+    });
 }
 export function navigateToReturnOr(nav, target, fallback) {
     if (target === undefined) {

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

@@ -12,7 +12,6 @@ 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 }));

package/dist/components/error-boundary.d.ts

@@ -1,6 +1,8 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
 export type ErrorBoundaryFallbackProps = {
     readonly error: Error;
+    /** Shown to the user so a support request can be matched to the report. */
+    readonly errorId: string;
     readonly reset: () => void;
 };
 export type ErrorBoundaryProps = {
@@ -9,10 +11,15 @@ export type ErrorBoundaryProps = {
     /** Prefix for the logged message, e.g. "screen" or "root". */
     readonly scope: string;
     /** Called after the default console.error log, e.g. to forward to telemetry. */
-    readonly onError?: (error: Error, info: ErrorInfo) => void;
+    readonly onError?: (error: Error, info: ErrorInfo, context: {
+        readonly errorId: string;
+    }) => void;
 };
 type ErrorBoundaryState = {
-    readonly error: Error | undefined;
+    readonly caught: {
+        readonly error: Error;
+        readonly errorId: string;
+    } | undefined;
 };
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: ErrorBoundaryState;

package/dist/components/error-boundary.js

@@ -1,18 +1,20 @@
 import { ERROR_BOUNDARY_LOG_MARKER } from "@cosmicdrift/kumiko-types/error-boundary";
 import { Component } from "react";
+import { createErrorId } from "./error-id.js";
 function toError(thrown) {
     return thrown instanceof Error ? thrown : new Error(String(thrown));
 }
 export class ErrorBoundary extends Component {
-    state = { error: undefined };
+    state = { caught: undefined };
     static getDerivedStateFromError(thrown) {
-        return { error: toError(thrown) };
+        return { caught: { error: toError(thrown), errorId: createErrorId() } };
     }
     componentDidCatch(thrown, info) {
         const error = toError(thrown);
+        const errorId = this.state.caught?.errorId ?? createErrorId();
         this.logCaught(error, info.componentStack);
         try {
-            this.props.onError?.(error, info);
+            this.props.onError?.(error, info, { errorId });
         }
         catch (handlerError) {
             // A throw escaping componentDidCatch hands the error to the next boundary up, so a broken telemetry hook would replace the screen card with the root fallback.
@@ -24,12 +26,12 @@ export class ErrorBoundary extends Component {
         console.error(`[kumiko] ${this.props.scope} ${ERROR_BOUNDARY_LOG_MARKER}:`, error, detail);
     }
     reset = () => {
-        this.setState({ error: undefined });
+        this.setState({ caught: undefined });
     };
     render() {
-        const { error } = this.state;
-        if (error === undefined)
+        const { caught } = this.state;
+        if (caught === undefined)
             return this.props.children;
-        return this.props.fallback({ error, reset: this.reset });
+        return this.props.fallback({ ...caught, reset: this.reset });
     }
 }

package/dist/components/error-id.d.ts

@@ -0,0 +1 @@
+export declare function createErrorId(): string;

package/dist/components/error-id.js

@@ -0,0 +1,16 @@
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+// The server's client-error endpoint requires a uuid, so the Math.random fallback
+// (runtimes without WebCrypto) keeps the uuid v4 shape.
+export function createErrorId() {
+    const webCrypto = propertyOf(globalThis, "crypto");
+    const randomUUID = propertyOf(webCrypto, "randomUUID");
+    if (typeof randomUUID === "function") {
+        const id = Reflect.apply(randomUUID, webCrypto, []);
+        if (typeof id === "string")
+            return id;
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (placeholder) => {
+        const nibble = Math.floor(Math.random() * 16);
+        return (placeholder === "x" ? nibble : (nibble % 4) + 8).toString(16);
+    });
+}

package/dist/components/list-empty-state.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { ErrorReference } from "../app/error-reference.js";
 import { usePrimitives } from "../primitives.js";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
 export function ListEmptyStateBody({ content, narrowed, defaultFilterActive = false, onShowAll, createButton, translate, }) {
@@ -11,5 +12,5 @@ export function ListEmptyStateBody({ content, narrowed, defaultFilterActive = fa
         return (_jsxs(_Fragment, { children: [_jsx(Text, { children: translate("kumiko.list.empty.defaultFiltered") }), onShowAll !== undefined && (_jsx(Button, { variant: "secondary", onClick: onShowAll, testId: "render-list-empty-show-all", children: translate("kumiko.list.empty.showAll") }))] }));
     }
     const description = content === undefined ? translate("kumiko.list.empty.hint") : content.description;
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { children: content?.title ?? translate("kumiko.list.empty.title") }), description !== undefined && _jsx(Text, { variant: "small", children: description }), content?.action !== undefined && (_jsx(RenderEditActionButton, { action: content.action, Button: Button, Dialog: Dialog, onError: setActionError })), actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-list-empty-state-action-error", children: actionError })), createButton] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { children: content?.title ?? translate("kumiko.list.empty.title") }), description !== undefined && _jsx(Text, { variant: "small", children: description }), content?.action !== undefined && (_jsx(RenderEditActionButton, { action: content.action, Button: Button, Dialog: Dialog, onError: setActionError })), actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-list-empty-state-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), createButton] }));
 }

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

@@ -3,6 +3,7 @@ import { evalFieldCondition, normalizeListColumn, parseRefTarget, relatedListGro
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAppFeatures } from "../app/app-features-context.js";
 import { useClientActionRuntime } from "../app/client-actions.js";
+import { ErrorReference } from "../app/error-reference.js";
 import { buildFilterFacets, buildFilterPayload, mergeReferenceFacetOptions, resolveProjectionFacetSpecs, } from "../app/list-facets.js";
 import { useNav } from "../app/nav.js";
 import { ReferenceFacetBridges, } from "../app/reference-facet-bridge.js";
@@ -324,7 +325,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
         (rowsQuery.data.total === undefined || rowsQuery.data.total > rowsQuery.data.rows.length);
     const content = rowsQuery.loading && rowsQuery.data === null ? (_jsx(Banner, { padded: true, variant: "loading", testId: "related-list-loading", children: t("kumiko.widget.loading") })) : rowsQuery.error ? (_jsx(Banner, { padded: true, variant: "error", testId: "related-list-error", children: dispatcherErrorText(rowsQuery.error, effectiveTranslate) })) : (_jsxs(_Fragment, { children: [truncated && (_jsx(Banner, { variant: "info", testId: "related-list-truncated", children: effectiveTranslate("kumiko.list.related-list-truncated", {
                     count: sortedRows.length,
-                }) })), emptyStateActionError !== null && (_jsx(Banner, { variant: "error", testId: "related-list-empty-state-action-error", children: emptyStateActionError })), _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(RenderList, { screen: listScreen, entity: entity, rows: sortedRows, featureName: listFeatureName ?? featureName, translate: effectiveTranslate, ...(section.description !== undefined && { description: section.description }), ...(section.itemNoun !== undefined && { itemNounKey: section.itemNoun }), sort: sort, onSortChange: setSort, ...(section.searchable === true && {
+                }) })), emptyStateActionError !== null && (_jsxs(Banner, { variant: "error", testId: "related-list-empty-state-action-error", children: [emptyStateActionError.message, _jsx(ErrorReference, { requestId: emptyStateActionError.requestId })] })), _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(RenderList, { screen: listScreen, entity: entity, rows: sortedRows, featureName: listFeatureName ?? featureName, translate: effectiveTranslate, ...(section.description !== undefined && { description: section.description }), ...(section.itemNoun !== undefined && { itemNounKey: section.itemNoun }), sort: sort, onSortChange: setSort, ...(section.searchable === true && {
                         searchable: true,
                         searchValue: search,
                         onSearchChange: setSearch,

package/dist/components/render-edit-action-button.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { type ErrorNotice } from "../app/error-reference.tsx";
 import type { usePrimitives } from "../primitives.tsx";
 import type { RenderEditAction } from "./render-edit-types.ts";
 export declare function needsActionConfirm(action: Pick<RenderEditAction, "confirm" | "confirmRequired" | "style">): boolean;
@@ -20,5 +21,5 @@ export declare function RenderEditActionButton({ action, iconOnly, hideIcon, com
     readonly compactLabel?: boolean;
     readonly Button: ReturnType<typeof usePrimitives>["Button"];
     readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
-    readonly onError: (text: string | null) => void;
+    readonly onError: (notice: ErrorNotice | null) => void;
 }): ReactNode;

package/dist/components/render-edit-action-button.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { errorNoticeOf } from "../app/error-reference.js";
 // Same rule as RowActionWriteHandler: "danger" forces a confirm even
 // without an explicit confirm key — unless `confirmRequired` overrides it
 // (schema-driven navigate/drawer actions, where the target form is itself
@@ -24,7 +25,7 @@ export function RenderEditActionButton({ action, iconOnly = false, hideIcon = fa
             await action.onPress();
         }
         catch (e) {
-            onError(e instanceof Error ? e.message : String(e));
+            onError(errorNoticeOf(e));
         }
         finally {
             setBusy(false);

package/dist/components/render-edit.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { evalFieldCondition, isFieldsEditSection, normalizeEditField, PROJECTION_DETAIL_ENTITY, sectionFieldSpecs, } from "@cosmicdrift/kumiko-framework/ui-types";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { ErrorReference } from "../app/error-reference.js";
 import { computeEditViewModel, groupIssuesByPath, relevantFieldIssues, zodErrorToFieldIssues, } from "../headless/index.js";
 import { changedDerivedValues } from "./form-derivation-patch.js";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
@@ -1519,7 +1520,7 @@ export function RenderEdit(props) {
                                     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) }), rootIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-root", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`))), extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })), formError === null &&
-                            rootIssues.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 () => {
+                            rootIssues.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 && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), 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".

package/dist/components/use-action-menu-items.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode } from "react";
+import { type ErrorNotice } from "../app/error-reference.tsx";
 import type { ActionMenuItemSpec, usePrimitives } from "../primitives.tsx";
 import type { RenderEditAction } from "./render-edit-types.ts";
 export declare function useActionMenuItems({ Dialog, onError, }: {
     readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
-    readonly onError: (text: string | null) => void;
+    readonly onError: (notice: ErrorNotice | null) => void;
 }): {
     readonly toMenuItem: (action: RenderEditAction) => ActionMenuItemSpec;
     readonly confirmDialog: ReactNode;

package/dist/components/use-action-menu-items.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { errorNoticeOf } from "../app/error-reference.js";
 import { needsActionConfirm, RenderEditActionConfirmDialog } from "./render-edit-action-button.js";
 // A menu item has no button of its own to carry RenderEditActionButton's busy
 // and confirm state, so this hook owns both for every item it creates.
@@ -14,7 +15,7 @@ export function useActionMenuItems({ Dialog, onError, }) {
             await action.onPress();
         }
         catch (e) {
-            onError(e instanceof Error ? e.message : String(e));
+            onError(errorNoticeOf(e));
         }
         finally {
             setBusyActionId(null);

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

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import * as z from "zod";
+import { ErrorReference } from "../app/error-reference.js";
 import { isPresent, REQUIRED_FIELD_I18N_KEY } from "../app/form-schema.js";
 import { dispatcherErrorText } from "../app/write-failed-error.js";
 import { I18N_KEY_PARAM } from "../headless/index.js";
@@ -72,7 +73,10 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
             // refine, a hidden field).
             const issuePaths = (result.error.details?.fields ?? []).map((i) => i.path);
             setError(hasIssueWithoutVisibleField(issuePaths, section.fields)
-                ? dispatcherErrorText(result.error, effectiveTranslate)
+                ? {
+                    message: dispatcherErrorText(result.error, effectiveTranslate),
+                    ...(result.error.requestId !== undefined && { requestId: result.error.requestId }),
+                }
                 : null);
         }
         finally {
@@ -103,7 +107,7 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
                             controller.setErrors(remaining);
                         setError(null);
                     }, GridCell: GridCell, featureName: featureName, allIssues: snapshot.errors, valueDisplay: "form", row: snapshot.values, ...(hideTitle !== true &&
-                        section.title !== undefined && { sectionTitle: section.title }) }, 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.title !== undefined && { sectionTitle: section.title }) }, field.field))) }), error !== null && (_jsxs(Banner, { variant: "error", testId: "write-form-section-error", children: [error.message, _jsx(ErrorReference, { requestId: error.requestId })] })), 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/headless/view-model/edit.js

@@ -464,7 +464,7 @@ export function computeEditViewModel(input) {
         // better than the single-column default a stacked form keeps. Applies to
         // entityEdit tabs as well since fw#3134, not just projectionDetail.
         const defaultColumns = screen.layout.mode === "tabs" ? 2 : 1;
-        const groups = sectionSpec.groups
+        const groups = ("groups" in sectionSpec ? sectionSpec.groups : undefined)
             ?.map((group) => ({ ...group, fields: group.fields.filter((f) => !isHiddenByExclusion(f)) }))
             .filter((group) => group.fields.length > 0)
             .map((group) => ({

package/dist/headless/view-model/types.d.ts

@@ -157,7 +157,7 @@ export type EditFieldViewModel = {
         readonly rows?: number;
     };
     /** From TextFieldDef.format — `password` makes the renderer mask the input. */
-    readonly format?: "email" | "url" | "phone" | "password" | "month";
+    readonly format?: "email" | "url" | "phone" | "password" | "month" | "iban";
     /** From TextFieldDef.autoComplete — HTML autocomplete token for the text input. */
     readonly autoComplete?: string;
     /** From TextFieldDef.writeOnly — value is `true` (set) / `null` (empty), never plaintext. */

package/dist/i18n-defaults.js

@@ -156,6 +156,9 @@ export const kumikoDefaultTranslations = {
         "kumiko.screen-access-denied.title": "You do not have access to this page.",
         "kumiko.screen-missing.home": "Go to start page",
         "kumiko.screen-error.title": "This screen failed to render.",
+        "kumiko.error.reference": "Error ID: {id}",
+        "kumiko.error.copyReference": "Copy",
+        "kumiko.error.referenceCopied": "Copied!",
         "kumiko.screen-error.detail": "Screen: {screen}. {message}",
         "kumiko.screen-error.screen": "Screen: {screen}",
         "kumiko.widget.upload.uploading": "Uploading…",
@@ -280,6 +283,7 @@ export const kumikoDefaultTranslations = {
         "errors.validation.invalid_format.date": "Invalid date, e.g. 2026-10-20.",
         "errors.validation.invalid_format.datetime": "Invalid date and time, e.g. 2026-10-20T14:30.",
         "errors.validation.invalid_format.uuid": "Invalid ID, e.g. 123e4567-e89b-12d3-a456-426614174000.",
+        "errors.validation.invalid_format.iban": "Invalid IBAN, e.g. DE89 3704 0044 0532 0130 00.",
         "errors.validation.not_multiple_of": "Must be a multiple of {divisor}.",
         "errors.validation.unrecognized_keys": "Unknown fields.",
         "errors.validation.invalid_union": "Invalid value.",

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export type { CustomScreensMap, CustomScreensProviderProps } from "./app/custom-
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens.tsx";
 export type { DashboardBodyProps, DashboardBodyProviderProps } from "./app/dashboard-body.tsx";
 export { DashboardBodyProvider, useDashboardBody } from "./app/dashboard-body.tsx";
+export { type ErrorNotice, ErrorReference, errorNoticeOf } from "./app/error-reference.tsx";
 export type { ExtensionFormRegistry, ExtensionFormSubmitHandler, ExtensionSubmitContext, ExtensionSubmitResult, } from "./app/extension-form-submit.tsx";
 export { ExtensionFormRegistryProvider, useExtensionFormSubmit, } from "./app/extension-form-submit.tsx";
 export type { ExtensionSectionComponent, ExtensionSectionProps, ExtensionSectionsMap, ExtensionSectionsProviderProps, } from "./app/extension-sections.tsx";

package/dist/index.js

@@ -17,6 +17,7 @@ export { CONTENT_EDITOR_ELEMENT_ID, ContentEditorsProvider, TextareaContentEdito
 export { ContentPreview, substituteVariables } from "./app/content-preview.js";
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens.js";
 export { DashboardBodyProvider, useDashboardBody } from "./app/dashboard-body.js";
+export { ErrorReference, errorNoticeOf } from "./app/error-reference.js";
 export { ExtensionFormRegistryProvider, useExtensionFormSubmit, } from "./app/extension-form-submit.js";
 export { ExtensionSectionsProvider, extensionSectionName, useExtensionSectionComponent, } from "./app/extension-sections.js";
 export { isAppSchema, toAppSchema } from "./app/feature-schema.js";

package/dist/leave-guard.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react";
 const sources = new Set();
 let confirmer;
+// While a confirmed (or unguarded) leave runs, navigation calls nested inside it must not ask a second time.
+let runningLeaveDepth = 0;
 export function registerUnsavedInputSource(source) {
     sources.add(source);
     return () => {
@@ -23,12 +25,21 @@ export function setLeaveConfirmer(next) {
 /** Runs `proceed` right away when nothing is dirty (or no dialog host is
  *  mounted); otherwise asks the user first. */
 export function requestLeave(proceed, cancel = () => { }) {
-    if (confirmer === undefined || !hasUnsavedInput()) {
-        proceed();
+    if (runningLeaveDepth > 0 || confirmer === undefined || !hasUnsavedInput()) {
+        runLeave(proceed);
         // skip: nothing to lose, no question needed
         return;
     }
-    confirmer({ proceed, cancel });
+    confirmer({ proceed: () => runLeave(proceed), cancel });
+}
+function runLeave(proceed) {
+    runningLeaveDepth += 1;
+    try {
+        proceed();
+    }
+    finally {
+        runningLeaveDepth -= 1;
+    }
 }
 /** `isDirty` is read lazily, at guard time, so a form can report "clean"
  *  synchronously after a successful save — before React re-renders. */

package/dist/web/app/client-error-reporter.d.ts

@@ -0,0 +1,15 @@
+export declare const CLIENT_ERRORS_PATH = "/api/client-errors";
+export declare const MAX_CLIENT_ERROR_REPORTS = 5;
+export type ClientErrorKind = "render" | "unhandled";
+export type ClientErrorReport = {
+    readonly errorId?: string;
+    readonly kind: ClientErrorKind;
+    readonly error: unknown;
+    readonly screen?: string;
+};
+export type ClientErrorReporter = {
+    readonly report: (report: ClientErrorReport) => void;
+    /** Starts forwarding window error/unhandledrejection events; returns the stop function. */
+    readonly installGlobalHandlers: () => () => void;
+};
+export declare function createClientErrorReporter(): ClientErrorReporter;

package/dist/web/app/client-error-reporter.js

@@ -0,0 +1,83 @@
+import { createErrorId } from "../../components/error-id.js";
+import { CSRF_HEADER_NAME, readCsrfToken } from "../../live/csrf.js";
+export const CLIENT_ERRORS_PATH = "/api/client-errors";
+export const MAX_CLIENT_ERROR_REPORTS = 5;
+// Mirrors the server's strict schema; longer values would get the whole report rejected.
+const LIMITS = { message: 500, stack: 4000, screen: 200, path: 300 };
+function clip(value, max) {
+    return value.length > max ? value.slice(0, max) : value;
+}
+function toError(thrown) {
+    return thrown instanceof Error ? thrown : new Error(String(thrown));
+}
+// One handler pair per page: a repeated createKumikoApp (HMR, tests) must replace, not stack, the listeners.
+let removeActiveGlobalHandlers;
+export function createClientErrorReporter() {
+    const seenMessages = new Set();
+    function send(body) {
+        // skip: no fetch (native shell without polyfill) means nowhere to report to
+        if (typeof fetch !== "function")
+            return;
+        const csrf = readCsrfToken();
+        try {
+            void fetch(CLIENT_ERRORS_PATH, {
+                method: "POST",
+                keepalive: true,
+                credentials: "same-origin",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...(csrf !== undefined && { [CSRF_HEADER_NAME]: csrf }),
+                },
+                body: JSON.stringify(body),
+            }).catch(() => undefined);
+        }
+        catch {
+            // Reporting must never throw into the error path it observes.
+        }
+    }
+    function report({ errorId, kind, error, screen }) {
+        // skip: per-page cap keeps an error loop from flooding the endpoint
+        if (seenMessages.size >= MAX_CLIENT_ERROR_REPORTS)
+            return;
+        const { message, stack } = toError(error);
+        // skip: duplicate of an already reported message
+        if (seenMessages.has(message))
+            return;
+        seenMessages.add(message);
+        const path = typeof location === "undefined" ? undefined : location.pathname;
+        send({
+            errorId: errorId ?? createErrorId(),
+            kind,
+            message: clip(message, LIMITS.message),
+            ...(stack !== undefined && stack !== "" && { stack: clip(stack, LIMITS.stack) }),
+            ...(screen !== undefined && { screen: clip(screen, LIMITS.screen) }),
+            ...(path !== undefined && { path: clip(path, LIMITS.path) }),
+        });
+    }
+    function installGlobalHandlers() {
+        if (typeof window === "undefined" || typeof window.addEventListener !== "function") {
+            return () => undefined;
+        }
+        const onError = (event) => {
+            // skip: resource-load failures arrive as plain Events without an error payload
+            if (event.error === undefined && !event.message)
+                return;
+            report({ kind: "unhandled", error: event.error ?? new Error(event.message) });
+        };
+        const onRejection = (event) => {
+            report({ kind: "unhandled", error: event.reason });
+        };
+        removeActiveGlobalHandlers?.();
+        window.addEventListener("error", onError);
+        window.addEventListener("unhandledrejection", onRejection);
+        const remove = () => {
+            window.removeEventListener("error", onError);
+            window.removeEventListener("unhandledrejection", onRejection);
+            if (removeActiveGlobalHandlers === remove)
+                removeActiveGlobalHandlers = undefined;
+        };
+        removeActiveGlobalHandlers = remove;
+        return remove;
+    }
+    return { report, installGlobalHandlers };
+}

package/dist/web/app/create-app.d.ts

@@ -9,11 +9,19 @@ export declare function buildNavProviderMaps(clientFeatures: readonly ClientFeat
     readonly navProviders: ReadonlyMap<string, TreeChildrenSubscribe>;
     readonly navEntities: ReadonlyMap<string, readonly string[]>;
 };
-export type BoundaryErrorHandler = (error: Error, info: ErrorInfo) => void;
+export type BoundaryErrorContext = {
+    readonly errorId: string;
+    /** Qualified name of the screen whose boundary caught the error; absent for the root boundary. */
+    readonly screen?: string;
+};
+export type BoundaryErrorHandler = (error: Error, info: ErrorInfo, context: BoundaryErrorContext) => void;
 export type CreateKumikoAppOptions = {
     /** Called when the screen or root error boundary catches an error, after it
      *  was logged with console.error — attach telemetry here. */
     readonly onError?: BoundaryErrorHandler;
+    /** POST caught render errors and unhandled window errors to `/api/client-errors`
+     *  (default true). A custom `onError` still runs in addition. */
+    readonly reportClientErrors?: boolean;
     /** App schema. Accepts AppSchema (multi-feature) or the legacy
      *  FeatureSchema (single-feature) — toAppSchema() normalizes internally.
      *

package/dist/web/app/create-app.js

@@ -12,6 +12,7 @@ import { useBrowserTokensApi } from "../tokens.js";
 import { UpdateChecker } from "../version/update-checker.js";
 import { AppSchemaFetchBoot } from "./app-schema-boot.js";
 import { createBrowserLocaleResolver } from "./browser-locale.js";
+import { createClientErrorReporter } from "./client-error-reporter.js";
 import { stackWrappers } from "./client-plugin.js";
 import { WebDashboardBody } from "./dashboard-body.js";
 import { DocumentLangSync } from "./document-lang-sync.js";
@@ -338,8 +339,19 @@ export function createKumikoApp(options = {}) {
     }
     const localeResolver = options.locale ?? createBrowserLocaleResolver();
     const navAdapter = options.navAdapter ?? useBrowserNavApi;
+    const reporter = options.reportClientErrors === false ? undefined : createClientErrorReporter();
+    reporter?.installGlobalHandlers();
+    const handleBoundaryError = (error, info, context) => {
+        reporter?.report({
+            kind: "render",
+            error,
+            errorId: context.errorId,
+            ...(context.screen !== undefined && { screen: context.screen }),
+        });
+        options.onError?.(error, info, context);
+    };
     const root = createRoot(container);
-    root.render(_jsx(ErrorBoundary, { scope: "root", ...(options.onError !== undefined && { onError: options.onError }), fallback: () => _jsx(RootErrorFallback, {}), children: _jsx(BoundaryErrorHandlerContext.Provider, { value: options.onError, children: _jsx(KumikoAppRoot, { initialApp: initialApp, screenQn: options.screenQn, ...(options.schemaUrl !== undefined && { schemaUrl: options.schemaUrl }), clientFeatures: clientFeatures, providers: providers, gates: gates, customScreens: customScreens, columnRenderers: columnRenderers, extensionSectionComponents: extensionSectionComponents, clientActions: clientActions, contentEditors: contentEditors, resolvers: resolvers, dispatcher: dispatcher, sessionEndedSignal: sessionEndedSignal, draftStorage: draftStorage, primitives: primitives, liveEvents: liveEvents, localeResolver: localeResolver, navAdapter: navAdapter, screenWidth: options.screenWidth, ...(options.translate !== undefined && { translate: options.translate }), ...(options.onRowClick !== undefined && { onRowClick: options.onRowClick }), ...(options.shell !== undefined && { shell: options.shell }) }) }) }));
+    root.render(_jsx(ErrorBoundary, { scope: "root", onError: handleBoundaryError, fallback: ({ errorId }) => _jsx(RootErrorFallback, { errorId: errorId }), children: _jsx(BoundaryErrorHandlerContext.Provider, { value: handleBoundaryError, children: _jsx(KumikoAppRoot, { initialApp: initialApp, screenQn: options.screenQn, ...(options.schemaUrl !== undefined && { schemaUrl: options.schemaUrl }), clientFeatures: clientFeatures, providers: providers, gates: gates, customScreens: customScreens, columnRenderers: columnRenderers, extensionSectionComponents: extensionSectionComponents, clientActions: clientActions, contentEditors: contentEditors, resolvers: resolvers, dispatcher: dispatcher, sessionEndedSignal: sessionEndedSignal, draftStorage: draftStorage, primitives: primitives, liveEvents: liveEvents, localeResolver: localeResolver, navAdapter: navAdapter, screenWidth: options.screenWidth, ...(options.translate !== undefined && { translate: options.translate }), ...(options.onRowClick !== undefined && { onRowClick: options.onRowClick }), ...(options.shell !== undefined && { shell: options.shell }) }) }) }));
     return { root };
 }
 // TokensBoot uses the browser-backed TokensApi hook (class-based
@@ -494,5 +506,7 @@ function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
     }
     // KumikoScreen takes a single-feature schema: the feature owning the active screen.
     const schemaForScreen = feature;
-    return (_jsx(ErrorBoundary, { scope: "screen", ...(onBoundaryError !== undefined && { onError: onBoundaryError }), fallback: ({ error, reset }) => (_jsx(ScreenErrorFallback, { screen: qn, error: error, onReset: reset })), children: _jsx(KumikoScreen, { schema: schemaForScreen, qn: qn, ...(translate !== undefined && { translate }), ...(entityId !== undefined && { entityId }), onRowClick: effectiveOnRowClick, ...(effectiveOnCopyLink !== undefined && { onCopyLink: effectiveOnCopyLink }) }) }, `${qn}/${entityId ?? ""}`));
+    return (_jsx(ErrorBoundary, { scope: "screen", ...(onBoundaryError !== undefined && {
+            onError: (error, info, context) => onBoundaryError(error, info, { ...context, screen: qn }),
+        }), fallback: ({ error, errorId, reset }) => (_jsx(ScreenErrorFallback, { screen: qn, error: error, errorId: errorId, onReset: reset })), children: _jsx(KumikoScreen, { schema: schemaForScreen, qn: qn, ...(translate !== undefined && { translate }), ...(entityId !== undefined && { entityId }), onRowClick: effectiveOnRowClick, ...(effectiveOnCopyLink !== undefined && { onCopyLink: effectiveOnCopyLink }) }) }, `${qn}/${entityId ?? ""}`));
 }

package/dist/web/app/dashboard-body.js

@@ -3,6 +3,7 @@ import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
 import { DASHBOARD_STAT_TONES } from "@cosmicdrift/kumiko-types/screen";
 import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ErrorReference } from "../../app/error-reference.js";
 import { currencyDecimals, EMPTY_VALUE_PLACEHOLDER } from "../../headless/index.js";
 import { dispatcherErrorText, EmbeddedScreenProvider, evalVisibleWhen, extensionSectionName, HeaderActionsBar, KumikoScreen, lastSegment, useEmbeddedScreen, useExtensionSectionComponent, useLocale, useNav, usePageHeaderCompact, usePageHeaderSlotAvailable, usePrimitives, useQuery, useRecordActions, useTranslation, useUserRoles, } from "../../index.js";
 import { cn } from "../lib/cn.js";
@@ -865,7 +866,7 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     // The shell header owns the title; the badge and the actions sit in it there.
     const badgeInHeader = scopeBadge !== null && usesPageHeaderSlot;
     const showPageHeader = usesPageHeaderSlot && (badgeInHeader || recordTitle !== undefined || headerActionsBar !== null);
-    return (_jsx(PanelLoadedContext.Provider, { value: reportLoaded, children: _jsx(DashboardQueryContext.Provider, { value: queryRuntime, children: _jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [showPageHeader && (_jsx(PageHeader, { ...(recordTitle !== undefined && { title: recordTitle }), ...(badgeInHeader && { status: scopeBadge }), ...(headerActionsBar !== null && { actions: headerActionsBar }) })), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [!usesPageHeaderSlot && recordTitle !== undefined && (_jsx(Heading, { variant: "page", testId: `dashboard-${screen.id}-record-title`, children: recordTitle })), !badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [!usesPageHeaderSlot && headerActionsBar, screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError })), recordQuery.error !== null && recordRow === null && (_jsxs("div", { role: "alert", "data-testid": `dashboard-${screen.id}-record-error`, className: "flex flex-col items-start gap-2 text-sm", children: [_jsx("span", { className: "text-status-bad", children: dispatcherErrorText(recordQuery.error, t) }), _jsx(Button, { variant: "secondary", onClick: () => void refetchRecord(), children: t("kumiko.dashboard.panel.error.retry") })] })), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsxs(VisibilityQueryContext.Provider, { value: gateResults.results, children: [_jsx(VisibilityGateQueries, { gates: visibilityGates, onResult: gateResults.report, onForget: gateResults.forget }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
+    return (_jsx(PanelLoadedContext.Provider, { value: reportLoaded, children: _jsx(DashboardQueryContext.Provider, { value: queryRuntime, children: _jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [showPageHeader && (_jsx(PageHeader, { ...(recordTitle !== undefined && { title: recordTitle }), ...(badgeInHeader && { status: scopeBadge }), ...(headerActionsBar !== null && { actions: headerActionsBar }) })), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [!usesPageHeaderSlot && recordTitle !== undefined && (_jsx(Heading, { variant: "page", testId: `dashboard-${screen.id}-record-title`, children: recordTitle })), !badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [!usesPageHeaderSlot && headerActionsBar, screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), recordQuery.error !== null && recordRow === null && (_jsxs("div", { role: "alert", "data-testid": `dashboard-${screen.id}-record-error`, className: "flex flex-col items-start gap-2 text-sm", children: [_jsx("span", { className: "text-status-bad", children: dispatcherErrorText(recordQuery.error, t) }), _jsx(Button, { variant: "secondary", onClick: () => void refetchRecord(), children: t("kumiko.dashboard.panel.error.retry") })] })), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsxs(VisibilityQueryContext.Provider, { value: gateResults.results, children: [_jsx(VisibilityGateQueries, { gates: visibilityGates, onResult: gateResults.report, onForget: gateResults.forget }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
                                     if (panel.kind === "screen") {
                                         return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: effectiveTranslate }, panel.id));
                                     }

package/dist/web/app/root-error-fallback.d.ts

@@ -1,2 +1,4 @@
-import type { ReactNode } from "react";
-export declare function RootErrorFallback(): ReactNode;
+import { type ReactNode } from "react";
+export declare function RootErrorFallback({ errorId }: {
+    readonly errorId?: string;
+}): ReactNode;

package/dist/web/app/root-error-fallback.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROOT_ERROR_FALLBACK_TEST_ID } from "@cosmicdrift/kumiko-types/error-boundary";
-// Renders outside every provider, so no i18n/theme/primitives: plain DOM + inline text.
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+// Renders outside every provider and possibly without loaded CSS, so no i18n/theme/primitives: plain DOM, inline text and inline styles (lucide icons are self-contained SVG).
 const ROOT_ERROR_TEXTS = {
-    de: { title: "Etwas ist schiefgelaufen.", reload: "Seite neu laden" },
-    en: { title: "Something went wrong.", reload: "Reload page" },
-    es: { title: "Algo salió mal.", reload: "Recargar la página" },
+    de: {
+        title: "Etwas ist schiefgelaufen.",
+        reload: "Seite neu laden",
+        reference: "Fehler-ID",
+        copy: "Kopieren",
+        copied: "Kopiert!",
+    },
+    en: {
+        title: "Something went wrong.",
+        reload: "Reload page",
+        reference: "Error ID",
+        copy: "Copy",
+        copied: "Copied!",
+    },
+    es: {
+        title: "Algo salió mal.",
+        reload: "Recargar la página",
+        reference: "ID de error",
+        copy: "Copiar",
+        copied: "¡Copiado!",
+    },
 };
 function rootErrorTexts() {
     const language = typeof navigator === "undefined" ? "en" : navigator.language;
@@ -15,7 +35,60 @@ function rootErrorTexts() {
         return ROOT_ERROR_TEXTS.es;
     return ROOT_ERROR_TEXTS.en;
 }
-export function RootErrorFallback() {
+const containerStyle = {
+    boxSizing: "border-box",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "16px",
+    padding: "24px",
+    textAlign: "center",
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    color: "#1a1a1a",
+    background: "#ffffff",
+};
+const titleStyle = { margin: 0, fontSize: "20px", fontWeight: 600 };
+const referenceStyle = {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: "8px",
+    fontSize: "13px",
+    color: "#555555",
+};
+const errorIdStyle = { whiteSpace: "nowrap" };
+const buttonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    fontFamily: "inherit",
+    fontSize: "14px",
+    fontWeight: 500,
+    lineHeight: "20px",
+    borderRadius: "6px",
+    border: "1px solid #e4e4e7",
+    background: "#ffffff",
+    color: "#1a1a1a",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+    cursor: "pointer",
+};
+export function RootErrorFallback({ errorId }) {
     const texts = rootErrorTexts();
-    return (_jsxs("div", { role: "alert", "data-testid": ROOT_ERROR_FALLBACK_TEST_ID, children: [_jsx("p", { children: texts.title }), _jsx("button", { type: "button", onClick: () => window.location.reload(), children: texts.reload })] }));
+    const [copied, setCopied] = useState(false);
+    async function copyErrorId() {
+        if (errorId === undefined)
+            return;
+        try {
+            await navigator.clipboard.writeText(errorId);
+            setCopied(true);
+        }
+        catch {
+            // Clipboard denied or unavailable: the id stays visible and selectable.
+        }
+    }
+    return (_jsxs("div", { role: "alert", "data-testid": ROOT_ERROR_FALLBACK_TEST_ID, style: containerStyle, children: [_jsx("p", { style: titleStyle, children: texts.title }), errorId !== undefined && (_jsxs("div", { style: referenceStyle, "data-testid": `${ROOT_ERROR_FALLBACK_TEST_ID}-reference`, children: [_jsxs("span", { children: [texts.reference, ": ", _jsx("span", { style: errorIdStyle, children: errorId })] }), _jsxs("button", { type: "button", style: buttonStyle, "data-testid": `${ROOT_ERROR_FALLBACK_TEST_ID}-copy`, onClick: () => void copyErrorId(), children: [copied ? (_jsx(Check, { size: 14, "aria-hidden": "true" })) : (_jsx(Copy, { size: 14, "aria-hidden": "true" })), copied ? texts.copied : texts.copy] })] })), _jsx("button", { type: "button", style: buttonStyle, onClick: () => window.location.reload(), children: texts.reload })] }));
 }

package/dist/web/app/screen-error-fallback.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-export declare function ScreenErrorFallback({ screen, error, onReset, }: {
+export declare function ScreenErrorFallback({ screen, error, errorId, onReset, }: {
     readonly screen: string;
     readonly error: Error;
+    readonly errorId: string;
     readonly onReset: () => void;
 }): ReactNode;

package/dist/web/app/screen-error-fallback.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SCREEN_ERROR_FALLBACK_TEST_ID } from "@cosmicdrift/kumiko-types/error-boundary";
+import { ErrorReference } from "../../app/error-reference.js";
 import { usePrimitives, useTranslation } from "../../index.js";
 // Opt-in: a bundle that leaves NODE_ENV unset must not leak error messages to end users.
 function showsErrorDetails() {
@@ -8,10 +9,10 @@ function showsErrorDetails() {
     const nodeEnv = process.env.NODE_ENV;
     return nodeEnv !== undefined && nodeEnv !== "" && nodeEnv !== "production";
 }
-export function ScreenErrorFallback({ screen, error, onReset, }) {
+export function ScreenErrorFallback({ screen, error, errorId, onReset, }) {
     const { Banner, Button } = usePrimitives();
     const t = useTranslation();
-    return (_jsx(Banner, { variant: "error", padded: true, testId: SCREEN_ERROR_FALLBACK_TEST_ID, title: t("kumiko.screen-error.title"), actions: _jsx(Button, { variant: "secondary", onClick: onReset, testId: `${SCREEN_ERROR_FALLBACK_TEST_ID}-reset`, children: t("kumiko.actions.reload") }), children: showsErrorDetails()
-            ? t("kumiko.screen-error.detail", { screen, message: error.message })
-            : t("kumiko.screen-error.screen", { screen }) }));
+    return (_jsxs(Banner, { variant: "error", padded: true, testId: SCREEN_ERROR_FALLBACK_TEST_ID, title: t("kumiko.screen-error.title"), actions: _jsx(Button, { variant: "secondary", onClick: onReset, testId: `${SCREEN_ERROR_FALLBACK_TEST_ID}-reset`, children: t("kumiko.actions.reload") }), children: [showsErrorDetails()
+                ? t("kumiko.screen-error.detail", { screen, message: error.message })
+                : t("kumiko.screen-error.screen", { screen }), _jsx(ErrorReference, { requestId: errorId, testId: `${SCREEN_ERROR_FALLBACK_TEST_ID}-reference` })] }));
 }

package/dist/web/layout/editor-panel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { useCallback, useMemo } from "react";
-import { useNav, usePrimitives, useTranslation } from "../../index.js";
+import { requestLeave, useNav, usePrimitives, useTranslation } from "../../index.js";
 import { clearTargetSearchParams, parseTargetFromSearchParams } from "./target-url.js";
 function EditorPanelInner({ target, resolvers, onClose, }) {
     const { JsonView } = usePrimitives();
@@ -20,7 +20,7 @@ export function EditorPanel({ resolvers }) {
     // sind (nav-Impl liefert plain-record für genau diesen check).
     const target = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
     const handleClose = useCallback(() => {
-        nav.setSearchParams(clearTargetSearchParams(nav.searchParams));
+        requestLeave(() => nav.setSearchParams(clearTargetSearchParams(nav.searchParams)));
     }, [nav]);
     return (_jsx("div", { "data-kumiko-layout": "editor-main", className: "flex-1 overflow-y-auto", children: target === undefined ? (_jsx(EditorEmptyState, {})) : (_jsx(EditorPanelInner, { target: target, resolvers: resolvers, onClose: handleClose })) }));
 }

package/dist/web/layout/target-resolver-stub.js

@@ -16,7 +16,7 @@
 // die URL via nav.setSearchParams UND ruft den globalen dispatchTarget für
 // Test-Listener-Kompatibilität.
 import { useCallback } from "react";
-import { useNav } from "../../index.js";
+import { requestLeave, useNav } from "../../index.js";
 import { serializeTarget } from "./target-url.js";
 let testListener;
 const subscribers = new Set();
@@ -55,7 +55,9 @@ export function subscribeTargetDispatches(fn) {
 export function useDispatchTarget() {
     const nav = useNav();
     return useCallback((target) => {
-        nav.setSearchParams(serializeTarget(target, nav.searchParams));
-        dispatchTarget(target);
+        requestLeave(() => {
+            nav.setSearchParams(serializeTarget(target, nav.searchParams));
+            dispatchTarget(target);
+        });
     }, [nav]);
 }

package/dist/web/primitives/index.js

@@ -901,12 +901,15 @@ function useRowActionTrigger(row) {
         catch (e) {
             // Surfacing statt schlucken: ein verschluckter Write-Fehler sah für
             // den User wie "nichts passiert" aus (Prod-Bug 2026-06-07).
-            const docsUrl = e instanceof WriteFailedError ? e.dispatcherError.docsUrl : undefined;
+            const dispatcherError = e instanceof WriteFailedError ? e.dispatcherError : undefined;
+            const docsUrl = dispatcherError?.docsUrl;
+            const requestId = dispatcherError?.requestId;
             toast({
                 title: t("kumiko.rowAction.failed"),
                 description: e instanceof Error ? e.message : String(e),
                 variant: "bad",
                 ...(docsUrl !== undefined && { docsUrl }),
+                ...(requestId !== undefined && { requestId }),
             });
         }
         finally {

package/dist/web/primitives/toast.d.ts

@@ -7,6 +7,7 @@ export type ToastOptions = {
     readonly variant?: ToastVariant;
     readonly docsUrl?: string;
     readonly docsLinkLabel?: string;
+    readonly requestId?: string;
 };
 type ToastApi = {
     readonly toast: (opts: ToastOptions) => void;

package/dist/web/primitives/toast.js

@@ -12,6 +12,7 @@ import { X } from "lucide-react";
 import { createContext, useCallback, useContext, useId, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
+import { CopyButton } from "./share-actions.js";
 const ToastContext = createContext(null);
 export function useToast() {
     const ctx = useContext(ToastContext);
@@ -52,6 +53,11 @@ const TONE_CLASS = {
     critical: "border-status-critical/40 bg-status-critical/15 text-status-critical",
     muted: "border bg-background text-foreground",
 };
+function ToastErrorReference({ requestId }) {
+    const t = useTranslation();
+    const reference = t("kumiko.error.reference", { id: requestId });
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs", "data-testid": "toast-error-reference", children: [_jsx("span", { className: "min-w-0 truncate whitespace-nowrap select-all opacity-90", title: reference, children: reference }), _jsx(CopyButton, { text: requestId, label: t("kumiko.error.copyReference"), copiedLabel: t("kumiko.error.referenceCopied"), variant: "secondary", className: "min-h-0 h-7 shrink-0", testId: "toast-error-reference-copy" })] }));
+}
 function ToastItem({ entry, onClose, }) {
     const t = useTranslation();
     const learnMore = entry.docsLinkLabel ?? t("kumiko.toast.learn-more");
@@ -59,5 +65,5 @@ function ToastItem({ entry, onClose, }) {
     return (_jsxs(Primitive.Root, { className: cn(rootClass, variantClass), onOpenChange: (open) => {
             if (!open)
                 onClose();
-        }, children: [_jsxs("div", { className: "grid gap-1", children: [_jsx(Primitive.Title, { className: "text-sm font-semibold", children: entry.title }), entry.description !== undefined && (_jsx(Primitive.Description, { className: "text-sm opacity-90", children: entry.description })), entry.docsUrl !== undefined && (_jsx(Primitive.Action, { altText: learnMore, asChild: true, children: _jsxs("a", { href: entry.docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn("text-xs underline opacity-90 hover:opacity-100", "focus:outline-none focus:ring-1 focus:ring-current rounded"), children: [learnMore, " \u2192"] }) }))] }), _jsx(Primitive.Close, { className: cn("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity", "hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1", "group-hover:opacity-100"), "aria-label": t("kumiko.dialog.close"), children: _jsx(X, { className: "h-4 w-4" }) })] }));
+        }, children: [_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx(Primitive.Title, { className: "text-sm font-semibold", children: entry.title }), entry.description !== undefined && (_jsx(Primitive.Description, { className: "text-sm opacity-90", children: entry.description })), entry.requestId !== undefined && _jsx(ToastErrorReference, { requestId: entry.requestId }), entry.docsUrl !== undefined && (_jsx(Primitive.Action, { altText: learnMore, asChild: true, children: _jsxs("a", { href: entry.docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn("text-xs underline opacity-90 hover:opacity-100", "focus:outline-none focus:ring-1 focus:ring-current rounded"), children: [learnMore, " \u2192"] }) }))] }), _jsx(Primitive.Close, { className: cn("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity", "hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1", "group-hover:opacity-100"), "aria-label": t("kumiko.dialog.close"), children: _jsx(X, { className: "h-4 w-4" }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.382.0",
+  "version": "0.383.1",
   "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.382.0",
-    "@cosmicdrift/kumiko-types": "0.382.0",
+    "@cosmicdrift/kumiko-framework": "0.383.1",
+    "@cosmicdrift/kumiko-types": "0.383.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -92,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.382.0",
-    "@cosmicdrift/kumiko-testing": "0.382.0",
+    "@cosmicdrift/kumiko-locale-de": "0.383.1",
+    "@cosmicdrift/kumiko-testing": "0.383.1",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/changes.json

@@ -1,4 +1,35 @@
 [
+  {
+    "version": "0.383.0",
+    "type": "improvement",
+    "title": "projectionDetail metrics render their own label",
+    "detail": "The metrics band reads the label from each metric entry instead of falling back to `fieldLabels` or the column name."
+  },
+  {
+    "version": "0.383.0",
+    "type": "improvement",
+    "title": "Error reference with copy button in toasts, banners and fallbacks",
+    "detail": "A server error that carries a request id now shows \"Error ID: <id>\" with a copy button in toasts, action error banners, the write-form error section, query error banners and list empty states. The root and screen error fallbacks show a per-error id the same way; the root fallback is styled with inline styles so it stays readable without CSS. New exports ErrorReference, ErrorNotice and errorNoticeOf; New keys kumiko.error.reference, kumiko.error.copyReference and kumiko.error.referenceCopied in all locale packages."
+  },
+  {
+    "version": "0.383.0",
+    "type": "breaking",
+    "title": "HeaderActionsBar onError receives an ErrorNotice instead of a string",
+    "detail": "The onError prop of HeaderActionsBar is now (notice: ErrorNotice | null) => void, where ErrorNotice is { message, requestId? }, so the error reference can be shown next to the message.",
+    "migration": "change the handler to read notice.message (and notice.requestId); a handler that stores the string only needs `notice?.message ?? null`"
+  },
+  {
+    "version": "0.383.0",
+    "type": "improvement",
+    "title": "createKumikoApp reports browser errors to POST /api/client-errors",
+    "detail": "New option reportClientErrors (default true) sends error-boundary errors (kind render) and window error and unhandledrejection events (kind unhandled) to /api/client-errors with the same errorId the fallback shows, at most 5 reports per page load, identical messages once, path without query and hash, CSRF header when a token is present. A custom onError runs in addition and receives { errorId, screen? } as third argument. Set reportClientErrors: false to opt out."
+  },
+  {
+    "version": "0.383.0",
+    "type": "fix",
+    "title": "Global navigation with search params asks before dropping unsaved input",
+    "detail": "navigateWithReturnTo, navigateToReturn, the metric tab navigation, closing the editor panel and the target resolver now go through the leave guard, and a requestLeave nested in a confirmed leave no longer asks twice. List filters and sorting stay unguarded because they do not unmount a form. The mail designer registers its draft as unsaved input, so link and browser navigation ask before discarding it."
+  },
   {
     "version": "0.381.0",
     "type": "improvement",