@cosmicdrift/kumiko-renderer 0.254.0 → 0.255.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.254.0",
+  "version": "0.255.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.254.0",
-    "@cosmicdrift/kumiko-headless": "0.254.0",
+    "@cosmicdrift/kumiko-framework": "0.255.0",
+    "@cosmicdrift/kumiko-headless": "0.255.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -27,7 +27,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.254.0"
+    "@cosmicdrift/kumiko-locale-de": "0.255.0"
   },
   "repository": {
     "type": "git",

package/src/app/__tests__/projection-detail-actions.test.tsx

@@ -17,14 +17,17 @@ import type {
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import type { ComponentType, ReactNode } from "react";
+import { useState } from "react";
 import { DispatcherProvider } from "../../context/dispatcher-context";
 import { UserRolesProvider } from "../../context/user-roles-context";
 import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
 import { kumikoDefaultTranslations } from "../../i18n-defaults";
 import {
+  type ActionOverflowMenuProps,
   type BannerProps,
   type ButtonProps,
   type CorePrimitives,
+  type DialogProps,
   type FormProps,
   PrimitivesProvider,
 } from "../../primitives";
@@ -70,6 +73,55 @@ const TestBanner: ComponentType<BannerProps> = ({ children, testId }) => (
   <div data-testid={testId}>{children}</div>
 );
 
+// Minimal overflow-menu double (A7): a toggle button reveals the items as
+// plain buttons, own testid per item so a test can assert an item is
+// reachable only after the menu opens — no dropdown/portal machinery, this
+// package doesn't test the real (renderer-web) widget.
+const TestActionOverflowMenu: ComponentType<ActionOverflowMenuProps> = ({
+  items,
+  label,
+  testId,
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <button
+        type="button"
+        aria-label={label}
+        data-testid={testId ?? "action-overflow-trigger"}
+        onClick={() => setOpen((o) => !o)}
+      >
+        {"⋯"}
+      </button>
+      {open &&
+        items.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            data-testid={`${testId ?? "action-overflow"}-item-${item.id}`}
+            disabled={item.disabled}
+            onClick={item.onSelect}
+          >
+            {item.label}
+          </button>
+        ))}
+    </div>
+  );
+};
+
+// Records the props of the last Dialog rendered *open* (a closed Dialog from
+// an always-mounted RenderEditActionButton never overwrites it) — lets a
+// test assert a confirm was requested and drive its onConfirm, without a
+// real dialog/portal implementation.
+type DialogSpy = ComponentType<DialogProps> & { lastProps: DialogProps | null };
+const TestDialog: DialogSpy = Object.assign(
+  (props: DialogProps): ReactNode => {
+    if (props.open) TestDialog.lastProps = props;
+    return null;
+  },
+  { lastProps: null as DialogProps | null },
+);
+
 const testPrimitives: CorePrimitives = {
   Button: TestButton,
   Banner: TestBanner,
@@ -83,12 +135,13 @@ const testPrimitives: CorePrimitives = {
   GridCell: passChildren,
   Text: passChildren,
   Heading: noop,
-  Dialog: noop,
+  Dialog: TestDialog,
   Modal: noop,
   Lightbox: noop,
   ConfigSourceBadge: noop,
   ConfigCascadeView: noop,
   Link: noop,
+  ActionOverflowMenu: TestActionOverflowMenu,
 };
 
 function stubDispatcher(
@@ -416,6 +469,197 @@ describe("projectionDetail default edit action (fw#2166)", () => {
     expect(navigated).toEqual({ screenId: "rent-edit", entityId: "rent-1" });
   });
 
+  test("two header actions → both render as buttons, no overflow trigger (fw bedienkonzept A7)", async () => {
+    const schema: FeatureSchema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        detailScreen({
+          actions: [
+            { kind: "navigate", id: "edit", label: "actions.edit", screen: "rent-edit" },
+            { kind: "navigate", id: "duplicate", label: "actions.duplicate", screen: "rent-edit" },
+          ],
+        }),
+        editScreen("rent"),
+      ],
+    };
+    const { getByTestId, queryByTestId, queryByText } = renderDetail({
+      primarySchema: schema,
+      features: [schema],
+      userRoles: [],
+    });
+    await waitFor(() => expect(queryByText("Loading…")).toBeNull());
+
+    expect(getByTestId("render-edit-action-edit").textContent).toBe("actions.edit");
+    expect(getByTestId("render-edit-action-duplicate").textContent).toBe("actions.duplicate");
+    expect(queryByTestId("kumiko-screen-projection-detail-actions-overflow")).toBeNull();
+  });
+
+  test("three header actions → edit stays a text button, the rest collapse into the overflow menu (fw bedienkonzept A7)", async () => {
+    const schema: FeatureSchema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        detailScreen({
+          actions: [
+            { kind: "navigate", id: "edit", label: "actions.edit", screen: "rent-edit" },
+            { kind: "navigate", id: "duplicate", label: "actions.duplicate", screen: "rent-edit" },
+            { kind: "navigate", id: "audit-log", label: "actions.auditLog", screen: "rent-edit" },
+          ],
+        }),
+        editScreen("rent"),
+      ],
+    };
+    const { getByTestId, queryByTestId, queryByText } = renderDetail({
+      primarySchema: schema,
+      features: [schema],
+      userRoles: [],
+    });
+    await waitFor(() => expect(queryByText("Loading…")).toBeNull());
+
+    expect(getByTestId("render-edit-action-edit").textContent).toBe("actions.edit");
+    expect(queryByTestId("render-edit-action-duplicate")).toBeNull();
+    expect(queryByTestId("render-edit-action-audit-log")).toBeNull();
+
+    fireEvent.click(getByTestId("kumiko-screen-projection-detail-actions-overflow"));
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-duplicate").textContent,
+    ).toBe("actions.duplicate");
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-audit-log").textContent,
+    ).toBe("actions.auditLog");
+  });
+
+  test("four header actions incl. edit → edit stays a text button, the other three are only reachable via the overflow menu (fw bedienkonzept A7)", async () => {
+    const schema: FeatureSchema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        detailScreen({
+          actions: [
+            { kind: "navigate", id: "edit", label: "actions.edit", screen: "rent-edit" },
+            { kind: "navigate", id: "duplicate", label: "actions.duplicate", screen: "rent-edit" },
+            { kind: "navigate", id: "audit-log", label: "actions.auditLog", screen: "rent-edit" },
+            { kind: "navigate", id: "archive", label: "actions.archive", screen: "rent-edit" },
+          ],
+        }),
+        editScreen("rent"),
+      ],
+    };
+    const { getByTestId, queryByTestId, queryByText } = renderDetail({
+      primarySchema: schema,
+      features: [schema],
+      userRoles: [],
+    });
+    await waitFor(() => expect(queryByText("Loading…")).toBeNull());
+
+    expect(getByTestId("render-edit-action-edit").textContent).toBe("actions.edit");
+    expect(queryByTestId("render-edit-action-duplicate")).toBeNull();
+    expect(queryByTestId("render-edit-action-audit-log")).toBeNull();
+    expect(queryByTestId("render-edit-action-archive")).toBeNull();
+
+    fireEvent.click(getByTestId("kumiko-screen-projection-detail-actions-overflow"));
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-duplicate").textContent,
+    ).toBe("actions.duplicate");
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-audit-log").textContent,
+    ).toBe("actions.auditLog");
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-archive").textContent,
+    ).toBe("actions.archive");
+  });
+
+  test('header action without an id: "edit" entry → the style: "primary" action stays the visible button (fw bedienkonzept A7)', async () => {
+    const schema: FeatureSchema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        detailScreen({
+          actions: [
+            { kind: "navigate", id: "duplicate", label: "actions.duplicate", screen: "rent-edit" },
+            {
+              kind: "navigate",
+              id: "approve",
+              label: "actions.approve",
+              screen: "rent-edit",
+              style: "primary",
+            },
+            { kind: "navigate", id: "audit-log", label: "actions.auditLog", screen: "rent-edit" },
+          ],
+        }),
+      ],
+    };
+    const { getByTestId, queryByTestId, queryByText } = renderDetail({
+      primarySchema: schema,
+      features: [schema],
+      userRoles: [],
+    });
+    await waitFor(() => expect(queryByText("Loading…")).toBeNull());
+
+    expect(getByTestId("render-edit-action-approve").textContent).toBe("actions.approve");
+    expect(queryByTestId("render-edit-action-duplicate")).toBeNull();
+    expect(queryByTestId("render-edit-action-audit-log")).toBeNull();
+
+    fireEvent.click(getByTestId("kumiko-screen-projection-detail-actions-overflow"));
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-duplicate").textContent,
+    ).toBe("actions.duplicate");
+    expect(
+      getByTestId("kumiko-screen-projection-detail-actions-overflow-item-audit-log").textContent,
+    ).toBe("actions.auditLog");
+  });
+
+  test("a danger overflow-menu action still asks for confirmation before firing (fw bedienkonzept A7)", async () => {
+    const schema: FeatureSchema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        detailScreen({
+          actions: [
+            { kind: "navigate", id: "edit", label: "actions.edit", screen: "rent-edit" },
+            { kind: "navigate", id: "duplicate", label: "actions.duplicate", screen: "rent-edit" },
+            {
+              kind: "writeHandler",
+              id: "archive",
+              label: "actions.archive",
+              handler: "app:write:archive",
+              style: "danger",
+            },
+          ],
+        }),
+        editScreen("rent"),
+      ],
+    };
+    // `as DialogProps | null` widens the assignment so tsc doesn't narrow
+    // the property to the literal `null` type, which turns the later
+    // optional-chained reads below into `never` (compiler quirk).
+    TestDialog.lastProps = null as DialogProps | null;
+    const { getByTestId, queryByTestId, queryByText } = renderDetail({
+      primarySchema: schema,
+      features: [schema],
+      userRoles: [],
+      writeErrorMessage: "archive failed: rent is still active",
+    });
+    await waitFor(() => expect(queryByText("Loading…")).toBeNull());
+
+    fireEvent.click(getByTestId("kumiko-screen-projection-detail-actions-overflow"));
+    fireEvent.click(getByTestId("kumiko-screen-projection-detail-actions-overflow-item-archive"));
+
+    // Danger action must not fire on the menu click alone — it needs the
+    // confirm dialog first, same as a danger row action.
+    expect(queryByTestId("render-edit-action-error")).toBeNull();
+    expect(TestDialog.lastProps?.open).toBe(true);
+    expect(TestDialog.lastProps?.title).toBe("actions.archive");
+
+    await act(async () => {
+      await TestDialog.lastProps?.onConfirm();
+    });
+
+    const errorBanner = await waitFor(() => getByTestId("render-edit-action-error"));
+    expect(errorBanner.textContent).toBe("archive failed: rent is still active");
+  });
+
   test("a failed writeHandler action shows its error in the head region, alongside the action button, NOT in Form's own actions/body regions (fw#2713)", async () => {
     const schema: FeatureSchema = {
       featureName: "app",

package/src/app/kumiko-screen.tsx

@@ -6,6 +6,8 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  MetricNavigate,
+  MetricSpec,
   ProjectionDetailScreenDefinition,
   ProjectionListScreenDefinition,
   RowAction,
@@ -14,7 +16,11 @@ import type {
   ScreenDefinition,
   ToolbarAction,
 } from "@cosmicdrift/kumiko-framework/ui-types";
-import { evalFieldCondition } from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  evalFieldCondition,
+  isWriteFormEditSection,
+  metricField,
+} from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   Command,
   FormSnapshot,
@@ -23,11 +29,15 @@ import type {
   SubmitResult,
   Translate,
 } from "@cosmicdrift/kumiko-headless";
-import { fieldLabelKey, fieldOptionLabelKey } from "@cosmicdrift/kumiko-headless";
+import { fieldLabelKey, fieldOptionLabelKey, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractCreatedId, extractIdField } from "../components/reference-create-dialog";
 import { RenderEdit, type RenderEditAction } from "../components/render-edit";
-import { RenderEditActionButton } from "../components/render-edit-action-button";
+import {
+  needsActionConfirm,
+  RenderEditActionButton,
+  RenderEditActionConfirmDialog,
+} from "../components/render-edit-action-button";
 import { RenderList, type ToolbarActionButton } from "../components/render-list";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context";
 import { useUserRoles } from "../context/user-roles-context";
@@ -37,7 +47,6 @@ import { useTranslation } from "../i18n";
 import {
   type DataTableFacet,
   type DataTableRowAction,
-  shouldRenderActionsIconOnly,
   statusToneForValue,
   usePrimitives,
 } from "../primitives";
@@ -55,7 +64,7 @@ import {
   type ResolvedFacetSpec,
   resolveProjectionFacetSpecs,
 } from "./list-facets";
-import { useNav } from "./nav";
+import { type NavApi, useNav } from "./nav";
 import {
   synthesizeProjectionDetailEntity,
   synthesizeProjectionDetailScreen,
@@ -69,7 +78,6 @@ import {
   isWriteHandlerRowAction,
   refetchAfterWrite,
   resolveActionIcon,
-  rowActionModeFor,
   runProjectionRowNavigate,
   stringifyNavParams,
 } from "./row-actions";
@@ -1614,12 +1622,6 @@ function EntityListBody({
     openDrawer,
   ]);
 
-  // Row actions that all resolve an icon render inline and collapse to
-  // icon-only (fw#2580) — the adaptive default would bury more than two of
-  // them in a kebab menu. A group with an icon-less member stays adaptive so
-  // it never degrades into wall-to-wall text buttons.
-  const rowActionMode = rowActionModeFor(rowActions);
-
   // ToolbarActions: Schema → Resolved-Form (analog rowActions).
   // navigate-kind → useNav().navigate({ screenId }), writeHandler-kind
   // → dispatcher.write(handler, payload?()). KumikoScreen kennt schon
@@ -1764,7 +1766,6 @@ function EntityListBody({
         screenPadding
         {...(pager !== undefined && { pager })}
         {...(rowActions !== undefined && { rowActions })}
-        {...(rowActionMode !== undefined && { rowActionMode })}
         {...(toolbarActions !== undefined && toolbarActions.length > 0 && { toolbarActions })}
         {...(useInfinite && {
           onReachEnd: loadMore,
@@ -1930,10 +1931,6 @@ function ProjectionListBody({
     [screen.rowActions, effectiveTranslate, dispatcher, nav, rowsQuery.refetch, openDrawer],
   );
 
-  // Same icon-only collapse as entityList (fw#2580) — projectionList rows go
-  // through the identical RenderList/DataTable path.
-  const rowActionMode = rowActionModeFor(rowActions);
-
   const toolbarActions = useMemo((): readonly ToolbarActionButton[] | undefined => {
     if (screen.toolbarActions === undefined) return undefined;
     const out: ToolbarActionButton[] = [];
@@ -2055,7 +2052,6 @@ function ProjectionListBody({
         screenPadding
         {...(pager !== undefined && { pager })}
         {...(rowActions !== undefined && { rowActions })}
-        {...(rowActionMode !== undefined && { rowActionMode })}
         {...(toolbarActions !== undefined && { toolbarActions })}
         {...(translate !== undefined && { translate })}
         {...(wrappedOnRowClick !== undefined && { onRowClick: wrappedOnRowClick })}
@@ -2083,6 +2079,65 @@ function ProjectionListBody({
   );
 }
 
+function metricLabelKey(
+  metric: MetricSpec,
+  fieldLabels: Readonly<Record<string, string>> | undefined,
+): string | undefined {
+  if (typeof metric !== "string" && metric.label !== undefined) return metric.label;
+  return fieldLabels?.[metricField(metric)];
+}
+
+function metricNavigateSpec(metric: MetricSpec): MetricNavigate | undefined {
+  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
+// function never reads.
+function runMetricNavigate(
+  nav: NavApi,
+  navigate: MetricNavigate,
+  record: Readonly<Record<string, unknown>>,
+): void {
+  const base = { kind: "navigate" as const, id: "metric-navigate", label: "" };
+  const action: RowActionNavigate | undefined =
+    navigate.entity !== undefined
+      ? {
+          ...base,
+          entity: navigate.entity,
+          ...(navigate.entityId !== undefined && { entityId: navigate.entityId }),
+          ...(navigate.params !== undefined && { params: navigate.params }),
+        }
+      : navigate.screen !== undefined
+        ? {
+            ...base,
+            screen: navigate.screen,
+            ...(navigate.entityId !== undefined && { entityId: navigate.entityId }),
+            ...(navigate.params !== undefined && { params: navigate.params }),
+          }
+        : undefined;
+  if (action === undefined) return;
+  runProjectionRowNavigate(nav, action, { id: "", values: record });
+}
+
+// Absolute http(s) check for RecordHeaderSpec.subtitleHref — deliberately
+// stricter than isSafeHref (which also allows relative paths and mailto:),
+// since a relative/mailto value here should render as plain text, not a
+// "_blank" external link.
+function isAbsoluteHttpUrl(value: string): boolean {
+  return /^https?:\/\//i.test(value) && isSafeHref(value);
+}
+
+function resolveSubtitleHref(
+  header: ProjectionDetailScreenDefinition["header"],
+  record: Readonly<Record<string, unknown>>,
+): string | undefined {
+  if (header?.subtitleHref === undefined) return undefined;
+  const value = record[header.subtitleHref];
+  return typeof value === "string" && isAbsoluteHttpUrl(value) ? value : undefined;
+}
+
 // Projection-Detail-Body — read-only single-row inspector über eine explizite
 // Query statt einer Entity (siehe projection-detail-shim.ts für die Schulden-
 // Doku). Fetcht selbst über `screen.query` + `idParam` (analog zu
@@ -2093,6 +2148,108 @@ function ProjectionListBody({
 // natives Form-Submit (Enter-Keypress) würde ohne customSubmit gegen
 // controller.submit() ohne submit-config throwen — der No-Op macht diesen
 // Pfad harmlos statt ihn dem Zufall zu überlassen.
+// The primary header action always stays a visible text button — `edit` if
+// declared, else the first `style: "primary"` action, else the first action
+// at all. One step longer than row actions' `primaryRowAction` (renderer-web
+// primitives/index.tsx): rows don't declare `style: "primary"`.
+function primaryHeaderAction(actions: readonly RenderEditAction[]): RenderEditAction | undefined {
+  return (
+    actions.find((a) => a.id === "edit") ?? actions.find((a) => a.style === "primary") ?? actions[0]
+  );
+}
+
+// Header actions bar (A7): <=2 actions render as plain buttons; >2 with an
+// `ActionOverflowMenu` primitive collapse to the primary button plus a menu
+// for the rest — same rule as RowActionsCell for table rows. Owns confirm
+// state for menu items: RenderEditActionButton already owns a per-button
+// confirm dialog for the always-visible primary action, but a menu item has
+// no button of its own to carry one.
+function HeaderActionsBar({
+  actions,
+  Button,
+  Dialog,
+  ActionOverflowMenu,
+  onError,
+}: {
+  readonly actions: readonly RenderEditAction[];
+  readonly Button: ReturnType<typeof usePrimitives>["Button"];
+  readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
+  readonly ActionOverflowMenu: ReturnType<typeof usePrimitives>["ActionOverflowMenu"];
+  readonly onError: (text: string | null) => void;
+}): ReactNode {
+  const [pendingAction, setPendingAction] = useState<RenderEditAction | null>(null);
+  const trigger = async (action: RenderEditAction): Promise<void> => {
+    onError(null);
+    try {
+      await action.onPress();
+    } catch (e) {
+      onError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  if (actions.length <= 2 || ActionOverflowMenu === undefined) {
+    return (
+      <>
+        {actions.map((action) => (
+          <RenderEditActionButton
+            key={action.id}
+            action={action}
+            Button={Button}
+            Dialog={Dialog}
+            onError={onError}
+          />
+        ))}
+      </>
+    );
+  }
+  const primary = primaryHeaderAction(actions);
+  const rest = actions.filter((a) => a.id !== primary?.id);
+  return (
+    <>
+      {primary !== undefined && (
+        <RenderEditActionButton
+          key={primary.id}
+          action={primary}
+          Button={Button}
+          Dialog={Dialog}
+          onError={onError}
+        />
+      )}
+      <ActionOverflowMenu
+        label="More actions"
+        testId="kumiko-screen-projection-detail-actions-overflow"
+        items={rest.map((action) => ({
+          id: action.id,
+          label: action.label,
+          ...(action.icon !== undefined && { icon: action.icon }),
+          variant: action.style === "danger" ? ("danger" as const) : ("default" as const),
+          onSelect: () => {
+            if (needsActionConfirm(action)) {
+              setPendingAction(action);
+            } else {
+              void trigger(action);
+            }
+          },
+        }))}
+      />
+      {pendingAction !== null && (
+        <RenderEditActionConfirmDialog
+          action={pendingAction}
+          open={true}
+          onOpenChange={(open) => {
+            if (!open) setPendingAction(null);
+          }}
+          onConfirm={async () => {
+            const action = pendingAction;
+            setPendingAction(null);
+            await trigger(action);
+          }}
+          Dialog={Dialog}
+        />
+      )}
+    </>
+  );
+}
+
 function ProjectionDetailBody({
   schema,
   screen,
@@ -2107,8 +2264,21 @@ function ProjectionDetailBody({
   readonly translate?: Translate;
   readonly entityId?: string;
 }): ReactNode {
-  const { Banner, Button, Dialog, Text, Heading, Grid, GridCell, Card, Tabs, StatusBadge, Metric } =
-    usePrimitives();
+  const {
+    Banner,
+    Button,
+    Dialog,
+    Text,
+    Heading,
+    Grid,
+    GridCell,
+    Card,
+    Tabs,
+    StatusBadge,
+    Metric,
+    Link,
+    ActionOverflowMenu,
+  } = usePrimitives();
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
   const nav = useNav();
@@ -2127,6 +2297,7 @@ function ProjectionDetailBody({
       screen.layout.sections.find((section) => section.id === tabParam) ?? screen.layout.sections[0]
     );
   }, [isTabsMode, Tabs, screen.layout.sections, nav.searchParams]);
+  const hasTabs = isTabsMode && Tabs !== undefined && activeSection !== undefined;
   // Tabs is an optional Core-Primitive: without it the screen falls back to
   // the stacked all-sections layout instead of silently truncating to section 1.
   useEffect(() => {
@@ -2395,28 +2566,23 @@ function ProjectionDetailBody({
   }
   const hasHeader = screen.header !== undefined;
   const hasMetrics = screen.metrics !== undefined && screen.metrics.length > 0;
-  const hasTabs = isTabsMode && Tabs !== undefined && activeSection !== undefined;
   // ?? [] rather than threading `headerActions !== undefined` through every
-  // use below — an empty array is a safe no-op for .map/.length/icon-collapse.
+  // use below — an empty array is a safe no-op for .map/.length.
   const headerActionsList = headerActions ?? [];
   const hasHeaderActions = headerActionsList.length > 0;
-  const headerActionsIconOnly = shouldRenderActionsIconOnly(headerActionsList);
   // Grouped into the head Card alongside title/status/metrics (fw#2713):
   // these are actions on the record the head shows, not on whichever tab is
   // open, so they must stay in place across tab switches instead of
   // trailing the active tab's content in the card footer.
   const headerActionsContent = hasHeaderActions && (
     <Grid columns="auto" testId="kumiko-screen-projection-detail-actions">
-      {headerActionsList.map((action) => (
-        <RenderEditActionButton
-          key={action.id}
-          action={action}
-          iconOnly={headerActionsIconOnly}
-          Button={Button}
-          Dialog={Dialog}
-          onError={setActionError}
-        />
-      ))}
+      <HeaderActionsBar
+        actions={headerActionsList}
+        Button={Button}
+        Dialog={Dialog}
+        ActionOverflowMenu={ActionOverflowMenu}
+        onError={setActionError}
+      />
     </Grid>
   );
   const hasHeaderCard = hasHeader || hasMetrics || hasHeaderActions;
@@ -2425,6 +2591,7 @@ function ProjectionDetailBody({
   // it, instead of sitting flush against the screen edge (fw record-screen
   // header polish).
   const header = screen.header;
+  const subtitleHref = resolveSubtitleHref(header, record);
   const headerContent = (
     <>
       {hasHeaderCard && (
@@ -2436,11 +2603,20 @@ function ProjectionDetailBody({
               </Heading>
               {(header.subtitle !== undefined || header.status !== undefined) && (
                 <Grid columns="auto">
-                  {header.subtitle !== undefined && (
-                    <Text variant="muted" testId="kumiko-screen-projection-detail-subtitle">
-                      {String(record[header.subtitle] ?? "")}
-                    </Text>
-                  )}
+                  {header.subtitle !== undefined &&
+                    (subtitleHref !== undefined ? (
+                      <Link
+                        href={subtitleHref}
+                        target="_blank"
+                        testId="kumiko-screen-projection-detail-subtitle"
+                      >
+                        {String(record[header.subtitle] ?? "")}
+                      </Link>
+                    ) : (
+                      <Text variant="muted" testId="kumiko-screen-projection-detail-subtitle">
+                        {String(record[header.subtitle] ?? "")}
+                      </Text>
+                    ))}
                   {header.status !== undefined &&
                     (StatusBadge !== undefined ? (
                       <StatusBadge
@@ -2463,14 +2639,26 @@ function ProjectionDetailBody({
               testId="kumiko-screen-projection-detail-metrics"
             >
               {screen.metrics?.map((metric) => {
-                const labelKey = screen.fieldLabels?.[metric];
-                const label = labelKey !== undefined ? effectiveTranslate(labelKey) : metric;
-                const value = String(record[metric] ?? "");
-                const testId = `kumiko-screen-projection-detail-metric-${metric}`;
+                const field = metricField(metric);
+                const labelKey = metricLabelKey(metric, screen.fieldLabels);
+                const label = labelKey !== undefined ? effectiveTranslate(labelKey) : field;
+                const value = String(record[field] ?? "");
+                const testId = `kumiko-screen-projection-detail-metric-${field}`;
+                const navigate = metricNavigateSpec(metric);
+                const onPress =
+                  navigate !== undefined
+                    ? () => runMetricNavigate(nav, navigate, record)
+                    : undefined;
                 return Metric !== undefined ? (
-                  <Metric key={metric} label={label} value={value} testId={testId} />
+                  <Metric
+                    key={field}
+                    label={label}
+                    value={value}
+                    testId={testId}
+                    {...(onPress !== undefined && { onPress })}
+                  />
                 ) : (
-                  <GridCell key={metric}>
+                  <GridCell key={field}>
                     <Text variant="small" testId={`${testId}-label`}>
                       {label}
                     </Text>
@@ -2491,10 +2679,19 @@ function ProjectionDetailBody({
       {hasTabs && activeSection !== undefined && (
         <Tabs
           testId="kumiko-screen-projection-detail-tabs"
-          items={screen.layout.sections.map((section) => ({
-            id: section.id ?? "",
-            label: effectiveTranslate(section.title ?? section.id ?? ""),
-          }))}
+          items={screen.layout.sections.map((section) => {
+            const countField = isWriteFormEditSection(section) ? undefined : section.countField;
+            const countValue = countField !== undefined ? record[countField] : undefined;
+            const count =
+              typeof countValue === "number" && Number.isFinite(countValue)
+                ? countValue
+                : undefined;
+            return {
+              id: section.id ?? "",
+              label: effectiveTranslate(section.title ?? section.id ?? ""),
+              ...(count !== undefined && { count }),
+            };
+          })}
           activeId={activeSection.id ?? ""}
           onSelect={(id) => nav.setSearchParams({ tab: id })}
         />

package/src/app/row-actions.ts

@@ -8,8 +8,7 @@ import type {
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import { evalFieldCondition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher, ListRowViewModel, Translate } from "@cosmicdrift/kumiko-headless";
-import type { DataTableRowAction, DataTableRowActionMode } from "../primitives";
-import { shouldRenderActionsIconOnly } from "../primitives";
+import type { DataTableRowAction } from "../primitives";
 import type { NavApi } from "./nav";
 import { dispatcherErrorText, WriteFailedError } from "./write-failed-error";
 
@@ -82,18 +81,6 @@ export function resolveActionIcon(id: string, declared?: IconKey): IconKey | und
   );
 }
 
-// Row-action column mode for a resolved action set: a group where every
-// member carries an icon renders inline so `shouldRenderActionsIconOnly`
-// can collapse it to icon-only buttons (fw#2580). Anything else keeps the
-// DataTable's adaptive default (kebab past two actions) — inline text
-// buttons for an icon-less group are the very thing the collapse avoids.
-export function rowActionModeFor(
-  actions: readonly DataTableRowAction[] | undefined,
-): DataTableRowActionMode | undefined {
-  if (actions === undefined || !shouldRenderActionsIconOnly(actions)) return undefined;
-  return "inline";
-}
-
 export function stringifyNavParams(params: Record<string, unknown>): Record<string, string | null> {
   const out: Record<string, string | null> = {};
   for (const [k, v] of Object.entries(params)) {

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

@@ -17,11 +17,7 @@ import {
   resolveProjectionFacetSpecs,
 } from "../app/list-facets";
 import { useNav } from "../app/nav";
-import {
-  buildProjectionRowActions,
-  rowActionModeFor,
-  runProjectionRowNavigate,
-} from "../app/row-actions";
+import { buildProjectionRowActions, runProjectionRowNavigate } from "../app/row-actions";
 import { dispatcherErrorText } from "../app/write-failed-error";
 import { useOptionalDispatcher } from "../context/dispatcher-context";
 import type { ListSort } from "../hooks/use-list-url-state";
@@ -202,7 +198,6 @@ export function RelatedListSection({
       }),
     [section.rowActions, effectiveTranslate, dispatcher, nav, rowsQuery.refetch, onOpenDrawer],
   );
-  const rowActionMode = rowActionModeFor(rowActions);
 
   // 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
@@ -251,7 +246,6 @@ export function RelatedListSection({
           })}
           {...(onRowClick !== undefined && { onRowClick })}
           {...(rowActions !== undefined && { rowActions })}
-          {...(rowActionMode !== undefined && { rowActionMode })}
           {...(hideTitle === true && { chromeless: true, scrollBody: true })}
         />
       </>

package/src/components/render-edit-action-button.tsx

@@ -3,6 +3,41 @@ import { useState } from "react";
 import type { usePrimitives } from "../primitives";
 import type { RenderEditAction } from "./render-edit-types";
 
+// 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
+// the confirmation).
+export function needsActionConfirm(action: RenderEditAction): boolean {
+  return action.confirm !== undefined || (action.confirmRequired ?? action.style === "danger");
+}
+
+export function RenderEditActionConfirmDialog({
+  action,
+  open,
+  onOpenChange,
+  onConfirm,
+  Dialog,
+}: {
+  readonly action: RenderEditAction;
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onConfirm: () => void | Promise<void>;
+  readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
+}): ReactNode {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={action.label}
+      {...(action.confirm !== undefined && { description: action.confirm })}
+      confirmLabel={action.confirmLabel ?? action.label}
+      {...(action.style === "danger" && { variant: "danger" as const })}
+      onConfirm={onConfirm}
+      testId={`render-edit-action-${action.id}-dialog`}
+    />
+  );
+}
+
 // One header action + its own busy/confirm state — same pattern as
 // render-list.tsx's ToolbarActionView (each RenderEditAction is
 // independently bound by the caller, there is no shared trigger pipeline
@@ -38,12 +73,6 @@ export function RenderEditActionButton({
   };
 
   const variant = action.style ?? "secondary";
-  // 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
-  // the confirmation).
-  const needsConfirm =
-    action.confirm !== undefined || (action.confirmRequired ?? action.style === "danger");
   const showIconOnly = iconOnly && action.icon !== undefined;
 
   return (
@@ -55,7 +84,7 @@ export function RenderEditActionButton({
         {...(action.icon !== undefined && { icon: action.icon })}
         {...(showIconOnly && { size: "icon" as const, ariaLabel: action.label })}
         onClick={() => {
-          if (needsConfirm) {
+          if (needsActionConfirm(action)) {
             setConfirmOpen(true);
           } else {
             void trigger();
@@ -65,15 +94,12 @@ export function RenderEditActionButton({
       >
         {showIconOnly ? null : action.label}
       </Button>
-      <Dialog
+      <RenderEditActionConfirmDialog
+        action={action}
         open={confirmOpen}
         onOpenChange={setConfirmOpen}
-        title={action.label}
-        {...(action.confirm !== undefined && { description: action.confirm })}
-        confirmLabel={action.confirmLabel ?? action.label}
-        {...(action.style === "danger" && { variant: "danger" as const })}
         onConfirm={trigger}
-        testId={`render-edit-action-${action.id}-dialog`}
+        Dialog={Dialog}
       />
     </>
   );

package/src/components/render-edit.tsx

@@ -1088,6 +1088,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
         {...(screen.layout.width !== undefined && { width: screen.layout.width })}
         {...(headerRegion !== undefined && { headerRegion })}
         {...(fillHeight && { fillHeight })}
+        {...(hideSectionTitles === true && { chromeless: true })}
       >
         {draftCandidates !== null && (
           <Banner

package/src/index.ts

@@ -164,6 +164,8 @@ export {
 } from "./i18n";
 export { kumikoDefaultTranslations } from "./i18n-defaults";
 export type {
+  ActionMenuItemSpec,
+  ActionOverflowMenuProps,
   AppPrimitives,
   BannerProps,
   ButtonProps,

package/src/primitives.tsx

@@ -785,6 +785,15 @@ export type FormProps = {
    *  document-flow height. Native impls may ignore this prop (already a
    *  bounded viewport there). */
   readonly fillHeight?: boolean;
+  /** Drops the surrounding card (bg/border/rounded, title/subtitle block,
+   *  footer border) so sections+footer render as siblings of `headerRegion`
+   *  on the page background instead of inside a nested card — a tabbed
+   *  projectionDetail's tab content is a sibling of the head card, not its
+   *  child (bedienkonzept A1), so it must look like a standalone screen
+   *  instead of a form embedded in another card. Default false: unchanged
+   *  card chrome. Native impls may ignore this prop (no card chrome there
+   *  to begin with). */
+  readonly chromeless?: boolean;
 };
 
 /** Titled Gruppe von Feldern. Web: `<fieldset>` + `<legend>`, Native:
@@ -1054,7 +1063,13 @@ export type WizardStepGroupProps = {
  *  Keyboard/ARIA (role=tablist/tab, arrow-key navigation) is the
  *  implementation's job. */
 export type TabsProps = {
-  readonly items: readonly { readonly id: string; readonly label: string }[];
+  readonly items: readonly {
+    readonly id: string;
+    readonly label: string;
+    /** Shown dimmed after the label (e.g. an open-items count). Omit for
+     *  tabs without a counter. */
+    readonly count?: number;
+  }[];
   readonly activeId: string;
   readonly onSelect: (id: string) => void;
   readonly testId?: string;
@@ -1115,6 +1130,9 @@ export type MetricProps = {
   readonly label: string;
   readonly value: string;
   readonly testId?: string;
+  /** Click handler — set when the metric declares a `navigate` target
+   *  (see `MetricSpec`). Omitted for a plain, non-interactive metric. */
+  readonly onPress?: () => void;
 };
 
 /** Structured JSON display (audit payload/metadata, job logs, unsupported
@@ -1128,6 +1146,25 @@ export type JsonViewProps = {
   readonly testId?: string;
 };
 
+/** One item in an `ActionOverflowMenu` (A7: header/row actions beyond the
+ *  primary one collapse into this menu instead of a wall of buttons). */
+export type ActionMenuItemSpec = {
+  readonly id: string;
+  readonly label: string;
+  /** Icon name, resolved by the implementation (same names as row actions). */
+  readonly icon?: IconKey;
+  readonly disabled?: boolean;
+  readonly variant?: "default" | "danger";
+  readonly onSelect: () => void;
+};
+
+export type ActionOverflowMenuProps = {
+  readonly items: readonly ActionMenuItemSpec[];
+  /** aria-label for the three-dots trigger. */
+  readonly label: string;
+  readonly testId?: string;
+};
+
 // ---- Core-Registry (Kumiko-eigene Primitives) ----
 
 export type CorePrimitives = {
@@ -1189,6 +1226,9 @@ export type CorePrimitives = {
    *  CorePrimitives mocks in tests keep compiling — additive rollout of
    *  a new primitive shouldn't force every test double to grow a stub. */
   readonly FillContainer?: ComponentType<FillContainerProps>;
+  /** Optional: without an implementation, callers with >2 header/row
+   *  actions fall back to today's all-buttons-inline rendering (A7). */
+  readonly ActionOverflowMenu?: ComponentType<ActionOverflowMenuProps>;
 };
 
 /** Offene Extension-Zone für App-eigene Primitives. Devs erweitern