@cosmicdrift/kumiko-renderer 0.307.0 → 0.308.0

package/src/components/related-list-section.tsx

@@ -25,6 +25,7 @@ import {
   buildDefaultEditRowAction,
   buildProjectionRowActions,
   buildProjectionToolbarActions,
+  buildRecordActions,
   runProjectionRowNavigate,
 } from "../app/row-actions";
 import { findEditScreenFor } from "../app/screen-access";
@@ -36,6 +37,7 @@ import { useQuery } from "../hooks/use-query";
 import { useTranslation } from "../i18n";
 import { type DataTableFacet, usePrimitives } from "../primitives";
 import { sortByAccessor } from "../sort-by-accessor";
+import { RenderEditActionButton } from "./render-edit-action-button";
 import { RenderList } from "./render-list";
 
 const RELATED_LIST_PSEUDO_ENTITY = "__related-list__";
@@ -64,6 +66,17 @@ function synthesizeRelatedListEntity(
   return { fields } as unknown as EntityDefinition;
 }
 
+// Mirrors row-actions.ts's own warnDrawerActionDropped (module-private
+// there, so not reusable directly) — a drawer-kind emptyState.action with no
+// onOpenDrawer wired is dropped (not rendered) with a dev warning, same as a
+// drawer-kind rowAction/toolbarAction without one.
+function warnRelatedListEmptyStateDrawerDropped(actionId: string): void {
+  // biome-ignore lint/suspicious/noConsole: dev-time warning, same pattern as row-actions.ts
+  console.warn(
+    `[kumiko] relatedList emptyState.action "${actionId}" is kind: "drawer" but no onOpenDrawer was supplied — dropped.`,
+  );
+}
+
 export function RelatedListSection({
   section,
   parentId,
@@ -72,6 +85,7 @@ export function RelatedListSection({
   translate,
   hideTitle,
   onOpenDrawer,
+  actions,
 }: {
   readonly section: EditRelatedListSectionViewModel;
   readonly parentId: string;
@@ -89,8 +103,14 @@ export function RelatedListSection({
     action: RowActionDrawer,
     initialValues: Readonly<Record<string, unknown>> | undefined,
   ) => void;
+  /** section.actions, already resolved into buttons by the caller —
+   *  rendered in the Section's title row. Only reachable in the standalone
+   *  (non-`hideTitle`) branch below — `hideTitle` uses `FillContainer`, which
+   *  has no title row to render actions into (see the comment on that branch). */
+  readonly actions?: ReactNode;
 }): ReactNode {
-  const { Banner, Section, FillContainer } = usePrimitives();
+  const { Banner, Section, FillContainer, Text, Button, Dialog } = usePrimitives();
+  const [emptyStateActionError, setEmptyStateActionError] = useState<string | null>(null);
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
   const nav = useNav();
@@ -301,6 +321,58 @@ export function RelatedListSection({
     ],
   );
 
+  // emptyState.action is a RowAction — the same record-bound action shape
+  // (and evalRowExtractor payload/params evaluation) screen-level and
+  // section-level actions already use via buildRecordActions, NOT the
+  // toolbar-action builder (whose `payload` is a literal Record, not a
+  // RowFieldExtractor — casting a RowAction into it would silently skip the
+  // declared `pick`/`map` evaluation). "Row" here is the parent record: a
+  // relatedList's emptyState has no row of its own.
+  const emptyStateActionButton = useMemo(() => {
+    const action = section.emptyState?.action;
+    if (action === undefined) return undefined;
+    if (action.kind === "drawer" && onOpenDrawer === undefined) {
+      warnRelatedListEmptyStateDrawerDropped(action.id);
+      return undefined;
+    }
+    return buildRecordActions({
+      actions: [action],
+      record,
+      translate: effectiveTranslate,
+      nav,
+      host,
+      dispatcher,
+      openDrawer: onOpenDrawer ?? (() => {}),
+      onWriteSuccess: rowsQuery.refetch,
+    })?.[0];
+  }, [
+    section.emptyState,
+    record,
+    effectiveTranslate,
+    nav,
+    host,
+    dispatcher,
+    onOpenDrawer,
+    rowsQuery.refetch,
+  ]);
+  const emptyStateContent =
+    section.emptyState !== undefined ? (
+      <>
+        <Text>{section.emptyState.title}</Text>
+        {section.emptyState.description !== undefined && (
+          <Text variant="small">{section.emptyState.description}</Text>
+        )}
+        {emptyStateActionButton !== undefined && (
+          <RenderEditActionButton
+            action={emptyStateActionButton}
+            Button={Button}
+            Dialog={Dialog}
+            onError={setEmptyStateActionError}
+          />
+        )}
+      </>
+    ) : undefined;
+
   // A truncated fetch means `sortedRows` is a sort of a partial set, not of
   // the full related-row set — the client-side sort above (or even plain
   // unsorted display) would silently claim "these are the top N" when they
@@ -327,6 +399,11 @@ export function RelatedListSection({
             })}
           </Banner>
         )}
+        {emptyStateActionError !== null && (
+          <Banner variant="error" testId="related-list-empty-state-action-error">
+            {emptyStateActionError}
+          </Banner>
+        )}
         <RenderList
           screen={listScreen}
           entity={entity}
@@ -349,23 +426,21 @@ export function RelatedListSection({
           {...(onRowClick !== undefined && { onRowClick })}
           {...(rowActions !== undefined && { rowActions })}
           {...(toolbarActionButtons !== undefined && { toolbarActions: toolbarActionButtons })}
-          {...(hideTitle === true && { scrollBody: true })}
+          {...(emptyStateContent !== undefined && { emptyState: emptyStateContent })}
+          {...(hideTitle === true && { scrollBody: true, screenPadding: false, chromeless: true })}
         />
       </>
     );
 
-  // hideTitle (tabs mode) → the tab panel is already the boundary: no
-  // Section card wrapper here — the table keeps its own frame to match the
-  // list-screen look; `scrollBody` caps it to the panel height. `FillContainer` is this section's
-  // link in RenderEdit's `fillHeight` chain (see render-edit.tsx): it is
-  // always this section's own root whenever hideTitle is set, since tabs
-  // mode narrows RenderEdit to exactly this one active section. A platform
-  // primitive (not a raw `<div>`) because `renderer` stays DOM-free —
-  // `Section`/`Card` were rejected for this spot in favor of a dedicated
-  // chromeless primitive; see `FillContainerProps` in primitives.tsx.
-  // Stacked (non-tabs) sections keep the card frame and document-flow
-  // height since they render a visible title and aren't confined to a tab
-  // panel.
+  // hideTitle (tabs mode) → the caller (render-edit.tsx) already wraps this
+  // component's own return value in the same Card frame every other tab
+  // kind gets — no card here, or the two would nest. `scrollBody` caps the
+  // table to the panel height; `FillContainer` is this section's link in the
+  // fillHeight flex chain that Card's `options.fillHeight` continues (see
+  // render-edit.tsx). A platform primitive (not a raw `<div>`) because
+  // `renderer` stays DOM-free. Stacked (non-tabs) sections keep their own
+  // Section card and document-flow height since they render a visible title
+  // and aren't confined to a tab panel.
   const bridges = <ReferenceFacetBridges specs={facetSpecs} onOptions={handleFacetOptions} />;
 
   if (hideTitle) {
@@ -380,7 +455,11 @@ export function RelatedListSection({
   return (
     <>
       {bridges}
-      <Section title={section.title} testId={`related-list-${section.title}`}>
+      <Section
+        title={section.title}
+        {...(actions !== undefined && { actions })}
+        testId={`related-list-${section.title}`}
+      >
         {content}
       </Section>
     </>

package/src/components/render-edit-types.ts

@@ -2,6 +2,7 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   IconKey,
+  RowAction,
   RowActionDrawer,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
@@ -11,7 +12,7 @@ import type {
   Translate,
 } from "@cosmicdrift/kumiko-headless";
 import type { ReactNode } from "react";
-import type { z } from "zod";
+import type * as z from "zod";
 
 export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
   readonly screen: EntityEditScreenDefinition;
@@ -160,7 +161,17 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
    *  width — for a host with its own header region (title/metrics/tabs)
    *  that would otherwise render as unpadded siblings before RenderEdit.
    *  Omitting this prop keeps unchanged behavior. */
-  readonly headerRegion?: ReactNode;
+  readonly headerRegion?: ReactNode | ((headerSlot: ReactNode | undefined) => ReactNode);
+  /** resolves an `EditFieldsSection`/`EditExtensionSection`/
+   *  `EditRelatedListSection`/`EditWriteFormSection`'s own `actions` into
+   *  already-bound buttons, rendered in that section's title row — same
+   *  split as `onCopyLink`/header `actions`: RenderEdit has no dispatcher/nav
+   *  context of its own, so the caller (which does) resolves each RowAction
+   *  against the record being edited. Returns `undefined`/`[]` to render no
+   *  actions for that section. */
+  readonly buildSectionActions?: (
+    actions: readonly RowAction[],
+  ) => readonly RenderEditAction[] | undefined;
 };
 
 export type RenderEditAction = {

package/src/components/render-edit.tsx

@@ -160,6 +160,7 @@ function ExtensionSectionMount({
   patch,
   validate,
   hideTitle,
+  actions,
 }: {
   readonly section: EditExtensionSectionViewModel;
   readonly entityName: string;
@@ -169,40 +170,61 @@ function ExtensionSectionMount({
   readonly patch?: (partial: Readonly<Record<string, unknown>>) => void;
   readonly validate?: () => boolean;
   readonly hideTitle?: boolean;
+  /** section.actions, already resolved into buttons by the caller. */
+  readonly actions?: ReactNode;
 }): ReactNode {
-  const { Banner, Section, Text } = usePrimitives();
+  const { Banner, FillContainer, Section, Text } = usePrimitives();
   const name = extensionSectionName(section.component);
   const Component = useExtensionSectionComponent(name);
+  const testId = `section-extension-${section.title}`;
   if (Component === undefined) {
-    return (
-      <Section
-        key={section.title}
-        title={section.title}
-        testId={`section-extension-${section.title}`}
-      >
-        <Banner variant="info" testId={`section-extension-placeholder-${section.title}`}>
-          <Text>
-            Extension section component{" "}
-            <Text variant="code">{name ?? "(no __component name)"}</Text> not registered in
-            clientFeatures.extensionSectionComponents.
-          </Text>
-        </Banner>
+    const placeholder = (
+      <Banner variant="info" testId={`section-extension-placeholder-${section.title}`}>
+        <Text>
+          Extension section component <Text variant="code">{name ?? "(no __component name)"}</Text>{" "}
+          not registered in clientFeatures.extensionSectionComponents.
+        </Text>
+      </Banner>
+    );
+    // Tabs mode already frames this in the caller's own Card — a Section
+    // here would add a second, unwanted divider inset (px-6 py-4) on top of
+    // the Card's own padding, misaligning this tab's content against the
+    // fields tab (Grid sits directly in the Card there). FillContainer keeps
+    // the testId without adding chrome (same primitive RelatedListSection
+    // uses for its own hideTitle branch).
+    return hideTitle === true ? (
+      FillContainer !== undefined ? (
+        <FillContainer testId={testId}>{placeholder}</FillContainer>
+      ) : (
+        placeholder
+      )
+    ) : (
+      <Section key={section.title} title={section.title} testId={testId}>
+        {placeholder}
       </Section>
     );
   }
-  return (
-    <Section
-      {...(hideTitle !== true && { title: section.title })}
-      testId={`section-extension-${section.title}`}
-    >
-      <Component
-        entityName={section.entityName ?? hostEntityName}
-        entityId={entityId}
-        initialValues={initialValues}
-        values={values}
-        patch={patch}
-        validate={validate}
-      />
+  const mounted = (
+    <Component
+      entityName={section.entityName ?? hostEntityName}
+      entityId={entityId}
+      initialValues={initialValues}
+      values={values}
+      patch={patch}
+      validate={validate}
+    />
+  );
+  // Same reasoning as the placeholder branch above: tabs mode's outer Card
+  // is the only frame this content gets, no nested Section divider.
+  return hideTitle === true ? (
+    FillContainer !== undefined ? (
+      <FillContainer testId={testId}>{mounted}</FillContainer>
+    ) : (
+      mounted
+    )
+  ) : (
+    <Section {...(actions !== undefined && { actions })} title={section.title} testId={testId}>
+      {mounted}
     </Section>
   );
 }
@@ -289,6 +311,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
     valueDisplay = "form",
     hideSectionTitles,
     headerRegion,
+    buildSectionActions,
   } = props;
   const { customSubmit } = props;
   // Translate-Fallback: wenn der Caller keine Translate-Fn übergibt,
@@ -1111,10 +1134,13 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         values={snapshot.values}
       />
     ) : undefined;
-  // Slot renders above the caller's own headerRegion; without slots.header
-  // this is bit-identical to the plain headerRegion prop below.
+  // A function headerRegion places the slot itself (projectionDetail puts it
+  // into its header card next to the actions); otherwise the slot renders
+  // above the caller's own headerRegion.
   const formHeaderRegion =
-    headerSlotMount !== undefined ? (
+    typeof headerRegion === "function" ? (
+      headerRegion(headerSlotMount)
+    ) : headerSlotMount !== undefined ? (
       <>
         {headerSlotMount}
         {headerRegion}
@@ -1356,6 +1382,23 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
             );
           })()}
         {filteredSections.map((section: EditSectionViewModel, sectionIndex: number) => {
+          // turns this section's own `actions` (RowAction[]) into
+          // already-bound buttons via the caller-supplied builder, rendered
+          // through the same RenderEditActionButton the top-level `actions`
+          // prop uses (same style/confirm/icon/error handling).
+          const sectionActions = section.actions;
+          const sectionActionsEl: ReactNode =
+            sectionActions !== undefined && sectionActions.length > 0
+              ? buildSectionActions?.(sectionActions)?.map((action) => (
+                  <RenderEditActionButton
+                    key={action.id}
+                    action={action}
+                    Button={Button}
+                    Dialog={Dialog}
+                    onError={setActionError}
+                  />
+                ))
+              : undefined;
           // Wizard steps and tabs stay mounted while off-screen (native
           // `hidden`, not unmounted) so an extension section's submit-registry
           // entry (useExtensionFormSubmit → registry.remove on unmount)
@@ -1402,9 +1445,35 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                 }
                 validate={scopedValidate}
                 hideTitle={hideSectionTitles}
+                // Tabs mode: actions move to the outer Card below — the inner
+                // Section is flattened (rendered inside this component's own
+                // Form) and would otherwise duplicate them.
+                {...(hideSectionTitles !== true &&
+                  sectionActionsEl !== undefined && { actions: sectionActionsEl })}
               />
             );
-            return wrapWizardStep(section.title, mount);
+            // 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
+            // elements under one id.
+            const wrapped =
+              hideSectionTitles === true ? (
+                <Card
+                  key={section.title}
+                  {...(sectionActionsEl !== undefined && {
+                    slots: { headerActions: sectionActionsEl },
+                  })}
+                >
+                  {mount}
+                </Card>
+              ) : (
+                mount
+              );
+            return wrapWizardStep(section.title, wrapped);
           }
           if (section.kind === "relatedList") {
             // parentId is the displayed record's id — without it there's no
@@ -1412,7 +1481,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
             // Rejected at boot in wizard layouts, so no WizardStepGroup here.
             const parentId = resolveExtensionEntityId(entityIdProp, vm.id);
             if (parentId === null) return null;
-            return (
+            const mount = (
               <RelatedListSection
                 key={section.title}
                 section={section}
@@ -1422,11 +1491,36 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                 featureName={featureName}
                 translate={translate}
                 hideTitle={hideSectionTitles}
+                // Tabs mode: actions move to the outer Card below — the
+                // hideTitle branch of RelatedListSection has no title row to
+                // render them into.
+                {...(hideSectionTitles !== true &&
+                  sectionActionsEl !== undefined && { actions: sectionActionsEl })}
                 {...(onRelatedListDrawerAction !== undefined && {
                   onOpenDrawer: onRelatedListDrawerAction,
                 })}
               />
             );
+            // Tabs mode: the relatedList tab must sit in the same Card frame
+            // as every other tab (fields/extension/writeForm above) — the
+            // acceptance criterion this unification exists for. `fillHeight`
+            // on the Card threads the same fw#2722/#2778 flex chain the head
+            // card already carries (DefaultCard's `options.fillHeight`), so
+            // the table still scrolls inside the panel instead of the panel
+            // stretching to the row count.
+            return hideSectionTitles === true ? (
+              <Card
+                key={section.title}
+                options={{ fillHeight }}
+                {...(sectionActionsEl !== undefined && {
+                  slots: { headerActions: sectionActionsEl },
+                })}
+              >
+                {mount}
+              </Card>
+            ) : (
+              mount
+            );
           }
           if (section.kind === "writeForm") {
             // Own submit button + dispatcher call, entirely independent of
@@ -1440,6 +1534,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                 translate={translate}
                 hideTitle={hideSectionTitles}
                 onSubmitted={() => onReload?.()}
+                {...(sectionActionsEl !== undefined && { actions: sectionActionsEl })}
               />
             );
           }
@@ -1478,10 +1573,14 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
           );
           // Tabs mode renders one or more titled cards, so this card's actual
           // heading doesn't visually duplicate the short Tab strip label.
+          // Stays `Card`, not `Section` — Section always flattens to a
+          // borderless divider when rendered inside this component's own
+          // `<Form>` (InsideFormContext), even with `chromeless` set, so it
+          // cannot stand in for the tabs-mode card here.
           if (hideSectionTitles === true) {
             if (section.groups !== undefined) {
-              const groupsEl = (
-                <Grid key={sectionKey} columns={1}>
+              const groupsGrid = (
+                <Grid key={`${sectionKey}-groups`} columns={1}>
                   {section.groups.map((group, groupIndex) => (
                     <Card
                       key={group.title}
@@ -1497,12 +1596,23 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                   ))}
                 </Grid>
               );
-              return wrapWizardStep(sectionKey, groupsEl);
+              // `actions` on a `groups` section has no group of its own to
+              // sit in and would need an extra title-less Card around the
+              // group cards (Card-in-Card) — the boot-validator rejects that
+              // combination in tabs mode, so `sectionActionsEl` is always
+              // undefined here at runtime.
+              return wrapWizardStep(sectionKey, groupsGrid);
             }
+            // 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 = (
               <Card
                 key={sectionKey}
-                {...(section.title !== undefined && { slots: { title: section.title } })}
+                {...(sectionActionsEl !== undefined && {
+                  slots: { headerActions: sectionActionsEl },
+                })}
                 testId={`section-${sectionKey}`}
               >
                 {renderFieldGrid(section.fields, section.columns, `${sectionKey}-grid`)}
@@ -1523,6 +1633,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
               {...(sectionTitle !== undefined && { title: sectionTitle })}
               {...(section.description !== undefined && { subtitle: section.description })}
               {...(section.icon !== undefined && { icon: section.icon })}
+              {...(sectionActionsEl !== undefined && { actions: sectionActionsEl })}
               testId={`section-${sectionKey}`}
             >
               {renderFieldGrid(section.fields, section.columns, `${sectionKey}-grid`)}

package/src/components/render-field.tsx

@@ -913,7 +913,9 @@ function readOnlyDisplayText(field: EditFieldViewModel, appLocale: string): stri
     case "bigInt":
     case "decimal": {
       const n = numberValue(value);
-      return n === "" ? "—" : new Intl.NumberFormat(appLocale).format(n);
+      return n === ""
+        ? "—"
+        : new Intl.NumberFormat(appLocale, { useGrouping: field.grouping ?? true }).format(n);
     }
     case "money": {
       const currency = resolveMoneyCurrency(value, field.currency);

package/src/components/render-list.tsx

@@ -123,10 +123,12 @@ export type RenderListProps = {
    *  scrolls rows internally instead of growing the page (relatedList in a
    *  tabs-mode section, fw#2722). Default false. */
   readonly scrollBody?: boolean;
-  /** Forwarded to `DataTableProps.screenPadding` — the table carries the
-   *  shared screen padding because it is the screen body (entityList/
-   *  projectionList, fw#2640). Not set for an embedded relatedList.
-   *  Default false. */
+  /** Forwarded to `DataTableProps.screenPadding` — `true`: the table carries
+   *  the shared screen padding because it is the screen body (entityList/
+   *  projectionList, fw#2640). Explicit `false`: no padding at all — the
+   *  host already pads its own children (relatedList in a tabs-mode Card,
+   *  fw#3234). Omitted: legacy `p-6` fallback for a standalone table with no
+   *  padded host. */
   readonly screenPadding?: boolean;
 };
 

package/src/components/write-form-section.tsx

@@ -5,7 +5,7 @@ import type {
 } from "@cosmicdrift/kumiko-headless";
 import { I18N_KEY_PARAM } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useMemo, useState } from "react";
-import { z } from "zod";
+import * as z from "zod";
 import { REQUIRED_FIELD_I18N_KEY } from "../app/form-schema";
 import { dispatcherErrorText } from "../app/write-failed-error";
 import { useForm } from "../hooks/use-form";
@@ -52,6 +52,10 @@ export type WriteFormSectionProps = {
    *  record (a new one now exists) via a full RenderEdit remount, see
    *  ProjectionDetailBody's reloadNonce/key in kumiko-screen.tsx. */
   readonly onSubmitted: () => void;
+  /** section.actions, already resolved into buttons by the caller —
+   *  rendered alongside (before) the section's own submit button in the
+   *  title-row actions slot. */
+  readonly actions?: ReactNode;
 };
 
 // A self-persisting form section for projectionDetail (see
@@ -65,8 +69,9 @@ export function WriteFormSection({
   translate,
   hideTitle,
   onSubmitted,
+  actions,
 }: WriteFormSectionProps): ReactNode {
-  const { Section, Grid, GridCell, Button, Banner } = usePrimitives();
+  const { Section, Card, Grid, GridCell, Button, Banner } = usePrimitives();
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
 
@@ -149,15 +154,43 @@ export function WriteFormSection({
     </Button>
   );
 
+  const titleRowActions =
+    actions !== undefined ? (
+      <>
+        {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.
+  if (hideTitle) {
+    return (
+      <Card
+        slots={{
+          ...(section.description !== undefined && { subtitle: section.description }),
+          headerActions: titleRowActions,
+        }}
+        testId={`write-form-${section.title ?? "section"}`}
+      >
+        {content}
+      </Card>
+    );
+  }
+
   // Routed through Section's `actions` slot (same mechanism render-edit.tsx
   // uses via Form's `actions`) so the button gets the established right-
   // aligned footer treatment instead of stretching full-width inline.
   return (
     <Section
-      {...(!hideTitle && section.title !== undefined && { title: section.title })}
+      {...(section.title !== undefined && { title: section.title })}
       {...(section.description !== undefined && { subtitle: section.description })}
       {...(section.icon !== undefined && { icon: section.icon })}
-      actions={submitButton}
+      actions={titleRowActions}
       testId={`write-form-${section.title ?? "section"}`}
     >
       {content}

package/src/primitives.tsx

@@ -862,9 +862,9 @@ export type SectionProps = {
    *  Kontext statt nur ein Label (analog FormProps.subtitle). */
   readonly subtitle?: ReactNode;
   readonly children: ReactNode;
-  /** Optionaler Aktions-Slot am Fuß der Section (z.B. „In Finanzierung
-   *  übernehmen"). Web rendert standalone eine abgehobene Footer-Row
-   *  (border-t), innerhalb eines Forms eine rechtsbündige Button-Reihe. */
+  /** Rendered top-right in the title row — never a footer. A
+   *  title-less/subtitle-less Section still draws the row when `actions`
+   *  is set, so a hideTitle tabs-Section with actions isn't stranded. */
   readonly actions?: ReactNode;
   /** "destructive" marks the Section as a warning/danger area (e.g. account
    *  deletion, restrict processing) — border color only, no content change.
@@ -1046,6 +1046,10 @@ export type CardSlots = {
   readonly header?: ReactNode;
   readonly title?: ReactNode;
   readonly subtitle?: ReactNode;
+  /** Free-form block content left of `headerActions`, below title/subtitle —
+   *  for a host-supplied header (projectionDetail `slots.header`) that must
+   *  share the action row instead of pushing actions into a row of their own. */
+  readonly headerContent?: ReactNode;
   /** Rechtsbündiger Header-Slot (Range-Umschalter, Filter, Badge …). */
   readonly headerActions?: ReactNode;
   /** Footer-Inhalt, abgehoben (border-t). Default rechtsbündig. */
@@ -1060,6 +1064,10 @@ export type CardOptions = {
   readonly radius?: "lg" | "xl";
   /** Footer abgehoben mit border-t + bg-muted/30. Default true. */
   readonly footerBordered?: boolean;
+  /** Joins the ancestor fillHeight flex chain (fw#2722/#2778 — a tabs-mode
+   *  relatedList table sizing to the panel instead of the page) instead of
+   *  normal document-flow height. Default false. */
+  readonly fillHeight?: boolean;
 };
 
 /** Generische Card-Chrome (border/bg/radius/shadow + Header/Body/Footer) als