@cosmicdrift/kumiko-renderer 0.329.0 → 0.330.2

package/README.md

@@ -0,0 +1,13 @@
+# @cosmicdrift/kumiko-renderer
+
+Platform-agnostic React renderer for Kumiko screens: primitives contract, hooks, `KumikoScreen`, navigation and SSE abstractions. No DOM, no `EventSource`, no `react-dom`.
+
+## Install
+
+```bash
+bun add @cosmicdrift/kumiko-renderer
+```
+
+Pair it with `@cosmicdrift/kumiko-renderer-web` for the browser.
+
+Documentation: https://kumiko.rocks

package/dist/app/kumiko-screen.js

@@ -5,7 +5,7 @@ import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
 import { TENANT_CURRENCY_CONFIG_KEY } from "@cosmicdrift/kumiko-types/fields";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractCreatedId, extractIdField } from "../components/reference-create-dialog.js";
-import { RenderEdit, } from "../components/render-edit.js";
+import { RenderEdit, resolveRecordTitle, } from "../components/render-edit.js";
 import { needsActionConfirm, RenderEditActionButton, RenderEditActionConfirmDialog, } from "../components/render-edit-action-button.js";
 import { RenderList } from "../components/render-list.js";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context.js";
@@ -154,10 +154,12 @@ function pageSizeOptionsFor(currentLimit) {
         ? PAGE_SIZE_OPTIONS
         : [...PAGE_SIZE_OPTIONS, currentLimit].sort((a, b) => a - b);
 }
-function useNavigateToCreateFor(schema, entityName) {
+function useNavigateToCreateFor(schema, entityName, createScreen) {
     const nav = useNav();
     const host = useReturnHost();
     const editScreenId = useMemo(() => {
+        if (createScreen !== undefined)
+            return createScreen;
         // allowCreate:false = update-only Edit-Screen (Create läuft über einen
         // Lifecycle-Write) — der zählt nicht als „+ Neu"-Ziel. singleton:true
         // öffnet ohne entityId den vorhandenen Record (EntityEditSingletonBody)
@@ -167,7 +169,7 @@ function useNavigateToCreateFor(schema, entityName) {
             s.allowCreate !== false &&
             s.singleton !== true);
         return edit !== undefined ? lastSegment(edit.id) : undefined;
-    }, [schema.screens, entityName]);
+    }, [schema.screens, entityName, createScreen]);
     const navigate = useCallback(() => {
         if (editScreenId !== undefined)
             navigateWithReturnTo(nav, { screenId: editScreenId }, host);
@@ -730,12 +732,13 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
     const handleCancel = useCallback(() => navigateToReturnOr(nav, returnTarget, navigateToList), [nav, returnTarget, navigateToList]);
     const handleDelete = useCallback(async () => {
         const res = await dispatcher.write(deleteCommand, { id: entityId });
-        if (res.isSuccess) {
-            // Never return onto the just-deleted record.
-            const target = returnTarget?.entityId !== entityId ? returnTarget : undefined;
-            navigateToReturnOr(nav, target, navigateToList);
-            onDeleted?.();
-        }
+        if (!res.isSuccess)
+            return res.error;
+        // Never return onto the just-deleted record.
+        const target = returnTarget?.entityId !== entityId ? returnTarget : undefined;
+        navigateToReturnOr(nav, target, navigateToList);
+        onDeleted?.();
+        return undefined;
     }, [dispatcher, deleteCommand, entityId, navigateToList, onDeleted, returnTarget, nav]);
     // Never seed a tenant-declared money field with entityDefaultCurrency while
     // its real tenant currency is still in flight (fw#2933) — wait instead. A
@@ -956,7 +959,7 @@ function EntityListScreen({ schema, screen, translate, onRowClick, }) {
 }
 function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     const featureName = schema.featureName;
-    const onCreate = useNavigateToCreateFor(schema, screen.entity);
+    const onCreate = useNavigateToCreateFor(schema, screen.entity, screen.createScreen);
     const { Banner } = usePrimitives();
     const queryType = entityQueryCommand(featureName, screen.entity, "list");
     const nav = useNav();
@@ -1840,6 +1843,9 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // this shares the same page padding/width as the record's edit card below
     // it, instead of sitting flush against the screen edge (fw record-screen
     // header polish).
+    const recordTitle = screen.recordTitleField !== undefined
+        ? resolveRecordTitle(record[screen.recordTitleField])
+        : undefined;
     const header = screen.header;
     const subtitleHref = resolveSubtitleHref(header, record);
     // Plain Text, not Heading — the Card title slot already renders as its own
@@ -1861,18 +1867,20 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
         return Metric !== undefined ? (_jsx(Metric, { label: label, value: value, testId: testId, ...(onPress !== undefined && { onPress }) }, field)) : (_jsxs(GridCell, { children: [_jsx(Text, { variant: "small", testId: `${testId}-label`, children: label }), _jsx(Text, { testId: `${testId}-value`, children: value })] }, field));
     });
     // Metrics are a dl band when the primitive exists; the old Grid stays as the fallback.
-    const metricsBlock = (subtitle) => MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
+    const metricsBlock = (subtitle, lead) => MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, ...(lead !== undefined && { lead }), children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
     const usesPageHeaderSlot = pageHeaderSlotAvailable && PageHeader !== undefined;
     const actionErrorBanner = actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError }));
-    const renderHeaderContent = (headerSlot) => (_jsxs(_Fragment, { children: [usesPageHeaderSlot && headerSlot === undefined ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...(header !== undefined && { title: String(record[header.title] ?? "") }), ...(header?.status !== undefined &&
+    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 }), ...(header?.status !== undefined &&
                             StatusBadge !== undefined && {
                             status: (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })),
                         }), ...(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 }) })),
-                        }) }), (hasMetrics || headerSubtitleSlot !== undefined) &&
+                        }) }), MetricBand === undefined && headerSlot, (hasMetrics || headerSubtitleSlot !== undefined || headerSlot !== undefined) &&
                         (MetricBand !== undefined || hasMetrics) &&
-                        metricsBlock(headerSubtitleSlot), actionErrorBanner] })) : ((hasHeaderCard || headerSlot !== undefined) && (_jsxs(Card, { slots: {
+                        metricsBlock(headerSubtitleSlot, MetricBand !== undefined ? headerSlot : undefined), actionErrorBanner] })) : ((hasHeaderCard || headerSlot !== undefined || recordTitle !== undefined) && (_jsxs(Card, { slots: {
                     ...(headerTitleSlot !== undefined && { title: headerTitleSlot }),
+                    ...(headerTitleSlot === undefined &&
+                        recordTitle !== undefined && { title: recordTitle }),
                     ...(headerSubtitleSlot !== undefined && { subtitle: headerSubtitleSlot }),
                     ...(headerSlot !== undefined && { headerContent: headerSlot }),
                     ...(hasHeaderActions && { headerActions: headerActionsContent }),
@@ -1888,7 +1896,10 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
                         ...(count !== undefined && { count }),
                     };
                 }), activeId: activeSection.id ?? "", onSelect: (id) => nav.setSearchParams({ tab: id }) }))] }));
-    return (_jsxs(_Fragment, { children: [_jsx(RenderEdit, { screen: detailScreen, entity: entity, featureName: schema.featureName, initial: record, entityId: effectiveEntityId, customSubmit: async () => ({ isSuccess: true, validationBlocked: false, data: undefined }), onReload: reloadDetail, onRelatedListDrawerAction: openDrawer, ...(translate !== undefined && { translate }), ...(hasTabs && { hideSectionTitles: true }), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...((hasHeaderCard || hasTabs || screen.slots?.header !== undefined) && {
+    return (_jsxs(_Fragment, { children: [_jsx(RenderEdit, { screen: detailScreen, entity: entity, featureName: schema.featureName, initial: record, entityId: effectiveEntityId, customSubmit: async () => ({ isSuccess: true, validationBlocked: false, data: undefined }), onReload: reloadDetail, onRelatedListDrawerAction: openDrawer, ...(translate !== undefined && { translate }), ...(hasTabs && { hideSectionTitles: true }), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...((hasHeaderCard ||
+                    hasTabs ||
+                    screen.slots?.header !== undefined ||
+                    screen.recordTitleField !== undefined) && {
                     headerRegion: renderHeaderContent,
                 }), buildSectionActions: buildSectionActions, valueDisplay: screen.valueDisplay ?? "text" }, `${entityId}:${reloadNonce}`), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
@@ -2187,7 +2198,7 @@ function ConfigEditBody({ schema, screen, translate, }) {
     if (initial === null) {
         return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
     }
-    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, customSubmit: customSubmit, ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), labelAppendix: (fieldName) => {
+    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, customSubmit: customSubmit, ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), labelAppendix: (fieldName) => {
             const cascade = cascades[fieldName];
             if (cascade === undefined)
                 return undefined;

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

@@ -1,6 +1,6 @@
 import type { EditFieldViewModel, FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type { ReactNode } from "react";
-import type { usePrimitives } from "../primitives.js";
+import type { FieldCellWidth, usePrimitives } from "../primitives.js";
 export type GridCellForFieldProps = {
     readonly field: EditFieldViewModel;
     readonly columns: number;
@@ -22,4 +22,5 @@ export type GridCellForFieldProps = {
     readonly changed?: boolean;
     readonly flow?: boolean;
 };
+export declare function fieldCellWidth(field: EditFieldViewModel): FieldCellWidth;
 export declare function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay, row, changed, flow, }: GridCellForFieldProps): ReactNode;

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

@@ -6,9 +6,11 @@ const FIELD_CELL_WIDTH_BY_TYPE = {
     bigInt: "number",
     money: "money",
     date: "date",
+    timestamp: "timestamp",
+    locatedTimestamp: "timestamp",
     select: "select",
     multiSelect: "select",
-    boolean: "auto",
+    boolean: "toggle",
     longText: "full",
     embedded: "full",
     jsonb: "full",
@@ -17,9 +19,14 @@ const FIELD_CELL_WIDTH_BY_TYPE = {
     image: "full",
     images: "full",
 };
-function fieldCellWidth(field) {
+const READONLY_FULL_WIDTH_TYPES = new Set(["text", "uuid"]);
+// Exported for unit tests.
+export function fieldCellWidth(field) {
     if (field.span !== undefined || (field.type === "text" && field.multiline))
         return "full";
+    // A readonly value (UUID, long code) is plain text that must not be cut at the input width.
+    if (field.readOnly && READONLY_FULL_WIDTH_TYPES.has(field.type))
+        return "full";
     return FIELD_CELL_WIDTH_BY_TYPE[field.type] ?? "text";
 }
 export function GridCellForField({ field, columns, issues, onChange, GridCell, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay, row, changed, flow, }) {

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

@@ -1,5 +1,5 @@
 import type { EntityDefinition, EntityEditScreenDefinition, IconKey, RowAction, RowActionDrawer } from "@cosmicdrift/kumiko-framework/ui-types";
-import type { FormSnapshot, FormValues, SubmitResult, Translate } from "@cosmicdrift/kumiko-headless";
+import type { DispatcherError, FormSnapshot, FormValues, SubmitResult, Translate } from "@cosmicdrift/kumiko-headless";
 import type { ReactNode } from "react";
 import type * as z from "zod";
 export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
@@ -38,7 +38,9 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
      *  onto form fields — see SubmitConfig.serverFieldPathPrefix. Only needed
      *  when buildPayload nests the form values under a key. */
     readonly serverFieldPathPrefix?: string;
-    readonly onDelete?: () => Promise<void> | void;
+    /** Returning the rejected write's error shows it in the form-error banner;
+     *  returning nothing means the delete went through. */
+    readonly onDelete?: () => Promise<DispatcherError | void> | DispatcherError | void;
     readonly onCancel?: () => void;
     readonly onReload?: () => void;
     /** Fires when the form gains or loses unsaved input (field changes or a

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

@@ -3,4 +3,6 @@ import type { RenderEditProps } from "./render-edit-types.js";
 export type { RenderEditAction, RenderEditChangeState, RenderEditControls, RenderEditProps, } from "./render-edit-types.js";
 import { type ReactNode } from "react";
 export declare const PATCH_DRAFT_SAVE_DEBOUNCE_MS = 500;
+/** A record title is a non-blank string; anything else leaves the screen title alone. */
+export declare function resolveRecordTitle(value: unknown): string | undefined;
 export declare function RenderEdit<TValues extends FormValues, TCtx = unknown>(props: RenderEditProps<TValues, TCtx>): ReactNode;

package/dist/components/render-edit.js

@@ -141,6 +141,10 @@ function EditSlotMount({ slot, slotName, screenId, entityName, entityId, values,
 function formSectionDomId(sectionIndex) {
     return `form-section-${sectionIndex}`;
 }
+/** A record title is a non-blank string; anything else leaves the screen title alone. */
+export function resolveRecordTitle(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : undefined;
+}
 export function RenderEdit(props) {
     const { screen, entity, featureName, initial, writeCommand, translate: translateProp, ctx, schema, onSubmit, payloadMode = "values", buildPayload, serverFieldPathPrefix, onDelete, onCancel, onReload, onDirtyChange, onCopyLink, actions, onRelatedListDrawerAction, submitLabel, submitVariant, summary, labelAppendix, fieldAppendix, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, headerRegion, buildSectionActions, } = props;
     const { customSubmit } = props;
@@ -520,7 +524,7 @@ export function RenderEdit(props) {
         section.visible), [vm.sections, fieldsFilter]);
     const allFieldsRequired = useMemo(() => {
         const fillable = filteredSections.flatMap((section) => section.kind === "fields"
-            ? section.fields.filter((field) => field.visible && !field.readOnly)
+            ? section.fields.filter((field) => field.visible && !field.readOnly && field.type !== "boolean")
             : []);
         return fillable.length > 0 && fillable.every((field) => field.required);
     }, [filteredSections]);
@@ -957,6 +961,9 @@ export function RenderEdit(props) {
         return id == null || id === "";
     })();
     const formMode = isCreate ? "create" : "edit";
+    const recordTitle = !isCreate && screen.recordTitleField !== undefined
+        ? resolveRecordTitle(initial[screen.recordTitleField])
+        : undefined;
     const resolveScreenText = (suffix) => {
         for (const key of [
             `screen:${screen.id}.${formMode}.${suffix}`,
@@ -1006,7 +1013,7 @@ export function RenderEdit(props) {
             })
             : translate("kumiko.wizard.step", { current: currentStep + 1, total: lastStepIndex + 1 });
     })();
-    return (_jsxs(ExtensionFormRegistryProvider, { value: extensionFormRegistry, children: [titleInShell && (_jsx(PageHeader, { title: formTitle, ...(headerMenuItems.length > 0 &&
+    return (_jsxs(ExtensionFormRegistryProvider, { value: extensionFormRegistry, children: [titleInShell && (_jsx(PageHeader, { title: formTitle, ...(recordTitle !== undefined && { recordTitle }), ...(headerMenuItems.length > 0 &&
                     ActionOverflowMenu !== undefined && {
                     actions: (_jsx(ActionOverflowMenu, { label: translate("kumiko.list.row-actions.more"), items: headerMenuItems, testId: "render-edit-header-menu" })),
                 }) })), _jsx(Form, { onSubmit: () => void handleSubmit(), ...(hideSectionTitles !== true && !titleInShell && { title: formTitle }), ...(formSubtitle !== undefined && !stepRail && { subtitle: formSubtitle }), ...(isScreenForm && { screenForm: true }), ...(unsavedCount > 0 && { unsavedCount }), ...(sectionNavItems.length > 0 && { sectionNav: sectionNavItems }), ...(stepRail && {
@@ -1078,17 +1085,14 @@ export function RenderEdit(props) {
                                     // over TValues; controller is mount-lifetime-stable, see onControlsReady above.
                                     patch: patchAndScheduleDraftSave, validate: scopedValidate, hideTitle: hideSectionTitles, ...(hideSectionTitles !== true &&
                                         sectionActionsEl !== undefined && { actions: sectionActionsEl }) }, section.title));
-                                // Section always flattens to a borderless divider inside this
-                                // component's own <Form>, so tabs mode frames it with Card
-                                // instead — same reason the fields-section tabs branch below
-                                // stays on Card. No title here: the tab strip already labels the
-                                // panel (matches the non-tabs Section branch above via hideTitle).
-                                // testId stays only on the inner Section — this outer Card is
-                                // purely chrome, giving it the same testId would register two
+                                // Tabs mode: an unframed padded panel (the tab panel is the
+                                // surface), so extension content neither sits flush at the shell
+                                // edge nor touches the tab strip. testId stays only on the inner
+                                // Section — giving the wrapper the same one would register two
                                 // elements under one id.
-                                const wrapped = hideSectionTitles === true ? (_jsx(Card, { ...(sectionActionsEl !== undefined && {
+                                const wrapped = hideSectionTitles !== true ? (mount) : (_jsx(Card, { options: { framed: false }, ...(sectionActionsEl !== undefined && {
                                         slots: { headerActions: sectionActionsEl },
-                                    }), children: mount }, section.title)) : (mount);
+                                    }), children: mount }, section.title));
                                 return wrapWizardStep(section.title, wrapped);
                             }
                             if (section.kind === "relatedList") {
@@ -1125,8 +1129,8 @@ export function RenderEdit(props) {
                                     }), ...(fieldAppendix !== undefined && {
                                         fieldAppendix: fieldAppendix(field.field),
                                     }), allIssues: snapshot.errors, valueDisplay: valueDisplay, row: snapshot.values, ...(!isCreate && field.field in snapshot.changes && { changed: true }) }, field.field))) }, gridKey));
-                            // Tabs mode renders one or more titled cards, so this card's actual
-                            // heading doesn't visually duplicate the short Tab strip label.
+                            // Tabs mode: the tab panel is the surface, so field sections render
+                            // as unframed padded panels; group cards inside stay framed.
                             // Stays `Card`, not `Section` — Section always flattens to a
                             // borderless divider when rendered inside this component's own
                             // `<Form>` (InsideFormContext), even with `chromeless` set, so it
@@ -1139,13 +1143,13 @@ export function RenderEdit(props) {
                                     // group cards (Card-in-Card) — the boot-validator rejects that
                                     // combination in tabs mode, so `sectionActionsEl` is always
                                     // undefined here at runtime.
-                                    return wrapWizardStep(sectionKey, groupsGrid);
+                                    return wrapWizardStep(sectionKey, _jsx(Card, { options: { framed: false }, children: groupsGrid }, sectionKey));
                                 }
                                 // No section title here (fw#3218) — the Tab strip right above
                                 // already names this panel, so a repeated Card title would just
                                 // duplicate it. The title row only exists to carry actions, and
                                 // then it carries only the actions, never the title text.
-                                const cardEl = (_jsx(Card, { ...(sectionActionsEl !== undefined && {
+                                const cardEl = (_jsx(Card, { options: { framed: false }, ...(sectionActionsEl !== undefined && {
                                         slots: { headerActions: sectionActionsEl },
                                     }), testId: `section-${sectionKey}`, children: renderFieldGrid(section.fields, section.columns, `${sectionKey}-grid`) }, sectionKey));
                                 return wrapWizardStep(sectionKey, cardEl);
@@ -1163,7 +1167,15 @@ export function RenderEdit(props) {
                         }), formError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-form-error", actions: formError.code === "version_conflict" && onReload !== undefined ? (_jsx(Button, { variant: "secondary", onClick: () => {
                                     onReload();
                                     setFormError(null);
-                                }, 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) }) })), 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 () => {
-                                await onDelete();
+                                }, 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) }) })), 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 (rejection !== undefined) {
+                                    const issue = rejection.details?.fields?.[0];
+                                    setFormError(issue === undefined
+                                        ? rejection
+                                        : { ...rejection, i18nKey: issue.i18nKey, i18nParams: issue.params });
+                                }
                             }, testId: "render-edit-delete-dialog" }))] }) })] }));
 }

package/dist/components/render-field.js

@@ -54,7 +54,7 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
         t,
         row,
     }));
-    return (_jsx(Field, { id: id, label: field.label, required: field.required && !allFieldsRequired, ...(issues !== undefined && { issues }), ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(changed === true && { changed }), testId: `field-${field.field}`, children: control }));
+    return (_jsx(Field, { id: id, label: field.label, required: field.required && field.type !== "boolean" && !allFieldsRequired, ...(issues !== undefined && { issues }), ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(changed === true && { changed }), testId: `field-${field.field}`, children: control }));
 }
 // Where a reference field's option rows come from, and which of their keys
 // holds the display text — the entity's own list handler plus `refLabelField`
@@ -319,14 +319,11 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
         case "bigInt": {
             const icon = resolveFieldIcon(field);
             const unit = resolveNumberUnit(field.unit, row);
-            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(field.type === "bigInt" && { integer: true }), ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
         }
         case "decimal": {
-            // step="any" disables the native stepMismatch constraint — without it
-            // <input type="number"> defaults to step=1 and blocks form submit on
-            // any fractional value via silent browser-native validation.
             const icon = resolveFieldIcon(field);
-            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), step: "any", ...(icon !== undefined && { icon }) }));
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(icon !== undefined && { icon }) }));
         }
         case "tz":
             return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));

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

@@ -88,11 +88,10 @@ export function WriteFormSection({ section, featureName, translate, hideTitle, o
     const submitButton = (_jsx(Button, { type: "button", variant: "primary", disabled: isSubmitting, loading: isSubmitting, onClick: () => void handleSubmit(), testId: "write-form-section-submit", children: section.submitLabel ?? effectiveTranslate("kumiko.actions.save") }));
     const titleRowActions = actions !== undefined ? (_jsxs(_Fragment, { children: [actions, submitButton] })) : (submitButton);
     // Section always flattens to a borderless divider when rendered inside
-    // RenderEdit's own <Form> in tabs mode (hideTitle) — Card frames it there
-    // instead, same reason render-edit.tsx's tabs-mode fields/extension
-    // branches stay on Card.
+    // RenderEdit's own <Form> in tabs mode (hideTitle) — an unframed Card panel
+    // stands in, like render-edit.tsx's tabs-mode fields/extension branches.
     if (hideTitle) {
-        return (_jsx(Card, { slots: {
+        return (_jsx(Card, { options: { framed: false }, slots: {
                 ...(section.description !== undefined && { subtitle: section.description }),
                 headerActions: titleRowActions,
             }, testId: `write-form-${section.title ?? "section"}`, children: content }));

package/dist/i18n-defaults.js

@@ -81,7 +81,15 @@ export const kumikoDefaultTranslations = {
         "kumiko.combobox.empty": "No matches.",
         "kumiko.combobox.loading": "Loading…",
         "kumiko.combobox.placeholder": "—",
+        "kumiko.dashboard.chart.forecast": "Forecast",
+        "kumiko.dashboard.chart.markers": "Events",
         "kumiko.dashboard.filter.all": "All",
+        "kumiko.dashboard.panel.error.isolated": "The other panels are not affected.",
+        "kumiko.dashboard.panel.error.retry": "Try again",
+        "kumiko.dashboard.panel.error.title": "{label} could not be loaded",
+        "kumiko.dashboard.time-range": "Time range",
+        "kumiko.dashboard.today": "Today",
+        "kumiko.dashboard.updated-at": "As of {time}",
         "kumiko.app-boot.loading": "Loading…",
         "kumiko.app-boot.unauthorized": "You need to sign in to see this.",
         "kumiko.app-boot.failed": "Couldn't load the app. Check your connection and try again.",

package/dist/primitives.d.ts

@@ -211,6 +211,12 @@ export type InputProps = {
     /** `<input step>`. "any" disables the native stepMismatch constraint
      *  (needed for decimal fields — integer fields leave this unset). */
     readonly step?: number | "any";
+    /** BCP-47 tag for the grouped display and the decimal separator when typing. */
+    readonly locale?: string;
+    /** `false` shows the value without a thousands separator (e.g. a year). */
+    readonly grouping?: boolean;
+    /** Integer-only entry (bigInt): fractional input is rejected on blur. */
+    readonly integer?: boolean;
     /** Resolved display suffix (static or from a sibling field) — never
      *  part of the numeric value. */
     readonly unit?: string;
@@ -475,8 +481,9 @@ export type DataTableRowAction = {
     readonly onTrigger: (row: ListRowViewModel) => Promise<void> | void;
     /** Conditional Visibility pro Row (z.B. "Start" nur wenn status==="scheduled"). */
     readonly isVisible?: (row: ListRowViewModel) => boolean;
-    /** This action is what a click on the row does. The card layout drops it
-     *  from the row menu, since the whole card is already the tap target. */
+    /** This action is what a click on the row does. With `onRowClick` the table
+     *  (except `"inline"` mode or editable cells) and the card layout drop it
+     *  from the row menu, since the row itself is already the click target. */
     readonly rowClick?: boolean;
     /** Resolved icon (author `RowAction.icon` or the id-derived default) —
      *  drives both the icon-left-of-text render and the icon-only collapse
@@ -530,7 +537,8 @@ export type DataTableProps = {
      *  sich nur um Render + Confirm-Dialog. */
     readonly rowActions?: readonly DataTableRowAction[];
     /** How the row-action column renders:
-     *  - `"adaptive"` (default): with `onRowClick` all actions go in the kebab;
+     *  - `"adaptive"` (default): with `onRowClick` all actions except the
+     *    `rowClick` one go in the kebab (no kebab or column if none remain);
      *    without it the primary action is a link button and the rest go in the
      *    kebab (a single action gets no kebab).
      *  - `"inline"`: ALWAYS inline buttons, left-aligned, even with >2 (no
@@ -868,7 +876,7 @@ export type GridProps = {
     readonly flow?: boolean;
 };
 /** Width class of a field cell inside a `flow` grid: sized by what the field holds. */
-export type FieldCellWidth = "text" | "number" | "money" | "date" | "select" | "full" | "auto";
+export type FieldCellWidth = "text" | "number" | "money" | "date" | "timestamp" | "select" | "full" | "toggle";
 /** Span-Wrapper für ein Kind innerhalb eines Grid. Web: `style={{gridColumn: span N}}`,
  *  Native: eigenes Width-Rechnen. */
 export type GridCellProps = {
@@ -1021,6 +1029,9 @@ export type CardOptions = {
      *  relatedList table sizing to the panel instead of the page) instead of
      *  normal document-flow height. Default false. */
     readonly fillHeight?: boolean;
+    /** false drops border, background, shadow and radius but keeps padding and
+     *  header slots — a panel inside a host surface such as a tab panel. Default true. */
+    readonly framed?: boolean;
 };
 /** Generische Card-Chrome (border/bg/radius/shadow + Header/Body/Footer) als
  *  Primitive — eine Quelle für alle Card-Flächen, statt pro App nachgebaut.
@@ -1135,6 +1146,8 @@ export type JsonViewProps = {
 /** Band above the tabs of a record detail: optional subtitle line plus the
  *  metrics as a definition list. `children` are `Metric` tiles. */
 export type MetricBandProps = {
+    /** Free-form block rendered unstyled as the first full-width row of the band. */
+    readonly lead?: ReactNode;
     readonly subtitle?: ReactNode;
     readonly children: ReactNode;
     readonly testId?: string;
@@ -1145,6 +1158,8 @@ export type MetricBandProps = {
  *  (see `usePageHeaderSlotAvailable`) callers keep their previous placement. */
 export type PageHeaderProps = {
     readonly title?: string;
+    /** Name of the loaded record; shown as an extra breadcrumb before the last one. */
+    readonly recordTitle?: string;
     readonly status?: ReactNode;
     readonly actions?: ReactNode;
 };

package/package.json

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

package/src/changes.json

@@ -1,4 +1,31 @@
 [
+  {
+    "version": "0.330.1",
+    "type": "breaking",
+    "title": "Boolean fields in flow forms use FieldCellWidth \"toggle\" instead of \"auto\"",
+    "detail": "In flow forms (screen forms and drawers) a boolean field's label now shares the top line with its neighbours' labels and the switch sits on the input line. The `FieldCellWidth` union loses `\"auto\"` and gains `\"toggle\"`; the default web Grid maps it to a fixed minimum width.",
+    "migration": "Custom Grid/GridCell primitives keyed by FieldCellWidth: rename `auto` to `toggle`."
+  },
+  {
+    "version": "0.330.1",
+    "type": "improvement",
+    "title": "projectionDetail tab panels get page padding, recordTitleField on projectionDetail",
+    "detail": "Tab panels on a projectionDetail with `layout.mode: \"tabs\"` now pad their content like the rest of the page: extension, field-section, groups and writeForm tabs render as an unframed padded panel with space below the tab strip. relatedList tabs stay flush. This fixes extension tabs sitting flush against the shell edge since 0.330.0. `CardOptions.framed` (default true) drops the card frame and keeps the padding. A projectionDetail without `header` can set `recordTitleField`: the query output field then titles the page header (breadcrumb \"list > record\"). The boot check requires the field to be in the query's outputSchema and rejects it next to `header`.",
+    "migration": "Extension tab panels get their padding back, so extension components that added their own padding to make up for the flush panel in 0.330.0 should drop it. Set `recordTitleField: \"<field>\"` on a projectionDetail without `header` to show the record name in the breadcrumb."
+  },
+  {
+    "version": "0.330.0",
+    "type": "fix",
+    "title": "entityEdit screens show the server's reason when a delete is rejected",
+    "detail": "The reason (for example from a preDelete hook) now appears in the form-error banner instead of the confirm dialog closing silently. `RenderEdit`'s `onDelete` may return the rejected write's `DispatcherError` for this."
+  },
+  {
+    "version": "0.330.0",
+    "type": "improvement",
+    "title": "Screen schema gains createScreen, recordTitleField and configEdit fillHeight; extension tabs render unframed",
+    "detail": "`createScreen` on an entityList names the screen opened by the create button. `recordTitleField` on an entityEdit shows a field value as the record title in the header breadcrumb (list > record > screen title). `fillHeight` on a configEdit (default true) switches it to the screen-form layout with a pinned footer; `false` restores the card layout. All three are optional and validated at boot. Extension tabs on a projectionDetail no longer wrap their content in a Card, like relatedList tabs. A `headerSlot` now renders inside the page-header slot instead of replacing the header.",
+    "migration": "Additive. Set `createScreen: \"<screen-id>\"` on an entityList and `recordTitleField: \"<field>\"` on an entityEdit to use them. configEdit screens now fill the shell height; set `fillHeight: false` to keep the card layout. Apps with screenshot tests of extension tabs lose the surrounding card frame."
+  },
   {
     "version": "0.328.0",
     "type": "breaking",