@cosmicdrift/kumiko-renderer 0.330.0 → 0.330.2

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";
@@ -1843,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
@@ -1867,15 +1870,17 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     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 ? (_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 }) })),
                         }) }), MetricBand === undefined && headerSlot, (hasMetrics || headerSubtitleSlot !== undefined || headerSlot !== undefined) &&
                         (MetricBand !== undefined || hasMetrics) &&
-                        metricsBlock(headerSubtitleSlot, MetricBand !== undefined ? headerSlot : undefined), 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 }),
@@ -1891,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();

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

@@ -10,7 +10,7 @@ const FIELD_CELL_WIDTH_BY_TYPE = {
     locatedTimestamp: "timestamp",
     select: "select",
     multiSelect: "select",
-    boolean: "auto",
+    boolean: "toggle",
     longText: "full",
     embedded: "full",
     jsonb: "full",

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

@@ -3,7 +3,7 @@ import { evalFieldCondition, isFieldsEditSection, normalizeEditField, PROJECTION
 import { computeEditViewModel } from "@cosmicdrift/kumiko-headless";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
 import { AllFieldsRequiredProvider } from "./render-field.js";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExtensionFormRegistryProvider, useExtensionFormHost, } from "../app/extension-form-submit.js";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.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;
@@ -957,11 +961,8 @@ export function RenderEdit(props) {
         return id == null || id === "";
     })();
     const formMode = isCreate ? "create" : "edit";
-    const recordTitleValue = !isCreate && screen.recordTitleField !== undefined
-        ? initial[screen.recordTitleField]
-        : undefined;
-    const recordTitle = typeof recordTitleValue === "string" && recordTitleValue.trim() !== ""
-        ? recordTitleValue
+    const recordTitle = !isCreate && screen.recordTitleField !== undefined
+        ? resolveRecordTitle(initial[screen.recordTitleField])
         : undefined;
     const resolveScreenText = (suffix) => {
         for (const key of [
@@ -1084,12 +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));
-                                // Tabs mode: unframed like relatedList tabs; the Card chrome is
-                                // only kept when section actions need a header to live in.
-                                // testId stays only on the inner Section — the outer wrapper 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 ? (mount) : sectionActionsEl !== undefined ? (_jsx(Card, { slots: { headerActions: sectionActionsEl }, children: mount }, section.title)) : (_jsx(Fragment, { children: mount }, section.title));
+                                const wrapped = hideSectionTitles !== true ? (mount) : (_jsx(Card, { options: { framed: false }, ...(sectionActionsEl !== undefined && {
+                                        slots: { headerActions: sectionActionsEl },
+                                    }), children: mount }, section.title));
                                 return wrapWizardStep(section.title, wrapped);
                             }
                             if (section.kind === "relatedList") {
@@ -1126,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
@@ -1140,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);

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/primitives.d.ts

@@ -876,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" | "timestamp" | "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 = {
@@ -1029,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.

package/package.json

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

package/src/changes.json

@@ -1,4 +1,18 @@
 [
+  {
+    "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",