@cosmicdrift/kumiko-renderer-web 0.254.0 → 0.255.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.254.0",
+  "version": "0.255.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.254.0",
-    "@cosmicdrift/kumiko-headless": "0.254.0",
-    "@cosmicdrift/kumiko-renderer": "0.254.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.255.0",
+    "@cosmicdrift/kumiko-headless": "0.255.0",
+    "@cosmicdrift/kumiko-renderer": "0.255.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.254.0"
+    "@cosmicdrift/kumiko-locale-de": "0.255.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/kumiko-screen.test.tsx

@@ -3169,8 +3169,8 @@ describe("KumikoScreen: entityList cell rendering", () => {
     columns: ["title", "status"],
   };
 
-  // publish/archive/duplicate all resolve an icon from their id
-  // (ACTION_ICON_BY_ID), which is what arms the icon-only collapse.
+  // No action here is id:"edit", so the primary+kebab split (bedienkonzept
+  // L3/L4) falls back to the first declared action ("publish").
   const rowActionListScreen: EntityListScreenDefinition = {
     id: "order-list-actions",
     type: "entityList",
@@ -3183,8 +3183,8 @@ describe("KumikoScreen: entityList cell rendering", () => {
     ],
   };
 
-  // "review" has no icon in ACTION_ICON_BY_ID, so this group must stay on
-  // the adaptive default (kebab) instead of collapsing.
+  // "review" has no icon in ACTION_ICON_BY_ID — proves the primary+kebab
+  // split no longer depends on every action resolving an icon.
   const mixedActionListScreen: EntityListScreenDefinition = {
     id: "order-list-mixed",
     type: "entityList",
@@ -3197,8 +3197,8 @@ describe("KumikoScreen: entityList cell rendering", () => {
     ],
   };
 
-  // projectionList reaches the same RenderList/DataTable path, so the collapse
-  // has to hold there too.
+  // projectionList reaches the same RenderList/DataTable path, so the
+  // primary+kebab split has to hold there too.
   const projectionActionListScreen: ProjectionListScreenDefinition = {
     id: "order-projection-actions",
     type: "projectionList",
@@ -3288,40 +3288,30 @@ describe("KumikoScreen: entityList cell rendering", () => {
     expect(badge?.className).toContain("text-muted-foreground");
   });
 
-  test("three icon-bearing row actions collapse to icon-only buttons (#2580)", async () => {
+  test('three row actions, none id:"edit" → the first is the primary text button, the rest sit in the kebab (bedienkonzept L3/L4)', async () => {
     await renderOrderList("orders:screen:order-list-actions", [{ id: "r1", title: "First" }]);
 
-    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
-    for (const [id, label] of [
-      ["publish", "Publish"],
-      ["archive", "Archive"],
-      ["duplicate", "Duplicate"],
-    ] as const) {
-      const button = screen.getByTestId(`row-r1-action-${id}`);
-      expect(button.textContent).toBe("");
-      expect(button.getAttribute("aria-label")).toBe(label);
-    }
+    expect(screen.getByTestId("row-r1-action-publish").textContent).toBe("Publish");
+    expect(screen.queryByTestId("row-r1-action-archive")).toBeNull();
+    expect(screen.queryByTestId("row-r1-action-duplicate")).toBeNull();
+    expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
   });
 
-  test("projectionList row actions collapse the same way (#2580)", async () => {
+  test("projectionList row actions split the same way (bedienkonzept L3/L4)", async () => {
     await renderOrderList("orders:screen:order-projection-actions", [{ id: "r1", title: "First" }]);
 
-    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
-    for (const [id, label] of [
-      ["publish", "Publish"],
-      ["archive", "Archive"],
-      ["duplicate", "Duplicate"],
-    ] as const) {
-      const button = screen.getByTestId(`row-r1-action-${id}`);
-      expect(button.textContent).toBe("");
-      expect(button.getAttribute("aria-label")).toBe(label);
-    }
+    expect(screen.getByTestId("row-r1-action-publish").textContent).toBe("Publish");
+    expect(screen.queryByTestId("row-r1-action-archive")).toBeNull();
+    expect(screen.queryByTestId("row-r1-action-duplicate")).toBeNull();
+    expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
   });
 
-  test("a row-action group with an icon-less member stays on the kebab (#2580)", async () => {
+  test("a row-action group with an icon-less member still gets the primary+kebab split (bedienkonzept L3/L4)", async () => {
     await renderOrderList("orders:screen:order-list-mixed", [{ id: "r1", title: "First" }]);
 
+    expect(screen.getByTestId("row-r1-action-publish").textContent).toBe("Publish");
+    expect(screen.queryByTestId("row-r1-action-archive")).toBeNull();
+    expect(screen.queryByTestId("row-r1-action-review")).toBeNull();
     expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
-    expect(screen.queryByTestId("row-r1-action-publish")).toBeNull();
   });
 });

package/src/__tests__/primitives.test.tsx

@@ -963,7 +963,7 @@ describe("DataTable", () => {
       expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
     });
 
-    test(">2 Actions: Kebab-Dropdown statt Inline-Buttons", () => {
+    test(">2 Actions: primäre Aktion inline + Rest im Kebab-Dropdown", () => {
       render(
         <DataTable
           columns={cols}
@@ -976,10 +976,39 @@ describe("DataTable", () => {
           ]}
         />,
       );
+      // "a" is the primary action (no id:"edit" declared, falls back to the
+      // first visible action) — it renders as its own inline button.
+      expect(screen.queryByTestId("row-r1-action-a")).not.toBeNull();
       expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
-      // Inline-Buttons der Kebab-Items sind nicht direkt im DOM —
-      // Radix portal'd Content ist erst nach Click sichtbar.
-      expect(screen.queryByTestId("row-r1-action-a")).toBeNull();
+      // The rest sit behind the kebab — Radix portal'd content is only in
+      // the DOM after the trigger is clicked.
+      expect(screen.queryByTestId("row-r1-action-b")).toBeNull();
+      expect(screen.queryByTestId("row-r1-action-c")).toBeNull();
+    });
+
+    test("4 Zeilen-Aktionen inkl. edit → Bearbeiten bleibt Text-Button, der Rest nur über den Kebab (bedienkonzept L3/L4)", async () => {
+      const user = userEvent.setup();
+      render(
+        <DataTable
+          columns={cols}
+          rows={rows}
+          testId="dt"
+          rowActions={[
+            { id: "duplicate", label: "Duplicate", onTrigger: mock() },
+            { id: "edit", label: "Bearbeiten", onTrigger: mock() },
+            { id: "archive", label: "Archive", onTrigger: mock() },
+            { id: "delete", label: "Delete", style: "danger", onTrigger: mock() },
+          ]}
+        />,
+      );
+      expect(screen.getByTestId("row-r1-action-edit").textContent).toBe("Bearbeiten");
+      expect(screen.queryByTestId("row-r1-action-duplicate")).toBeNull();
+      expect(screen.queryByTestId("row-r1-action-archive")).toBeNull();
+      expect(screen.queryByTestId("row-r1-action-delete")).toBeNull();
+      await user.click(screen.getByTestId("row-r1-actions-menu"));
+      expect(screen.queryByTestId("row-r1-action-duplicate")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1-action-archive")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1-action-delete")).not.toBeNull();
     });
 
     test("rowActionMode='inline': IMMER Inline-Buttons, kein Kebab auch bei >2 (#9)", () => {
@@ -1017,7 +1046,7 @@ describe("DataTable", () => {
       expect(group?.className).toContain("w-full");
     });
 
-    test("Kebab: Click auf Trigger öffnet Dropdown mit allen Items", async () => {
+    test("Kebab: Click auf Trigger öffnet Dropdown mit dem nicht-primären Rest", async () => {
       const user = userEvent.setup();
       render(
         <DataTable
@@ -1031,8 +1060,9 @@ describe("DataTable", () => {
           ]}
         />,
       );
-      await user.click(screen.getByTestId("row-r1-actions-menu"));
+      // "a" is the primary action and already inline before the kebab opens.
       expect(screen.queryByTestId("row-r1-action-a")).not.toBeNull();
+      await user.click(screen.getByTestId("row-r1-actions-menu"));
       expect(screen.queryByTestId("row-r1-action-b")).not.toBeNull();
       expect(screen.queryByTestId("row-r1-action-c")).not.toBeNull();
     });
@@ -1046,14 +1076,14 @@ describe("DataTable", () => {
           rows={rows}
           testId="dt"
           rowActions={[
-            { id: "a", label: "Archive", onTrigger },
-            { id: "b", label: "Duplicate", onTrigger: mock() },
+            { id: "a", label: "Archive", onTrigger: mock() },
+            { id: "b", label: "Duplicate", onTrigger },
             { id: "c", label: "Export", onTrigger: mock() },
           ]}
         />,
       );
       await user.click(screen.getByTestId("row-r1-actions-menu"));
-      await user.click(screen.getByTestId("row-r1-action-a"));
+      await user.click(screen.getByTestId("row-r1-action-b"));
       // micro-task warten (onTrigger ist async im Hook)
       await new Promise((r) => setTimeout(r, 0));
       expect(onTrigger).toHaveBeenCalledWith(rows[0]);
@@ -1681,6 +1711,42 @@ describe("Dialog", () => {
     expect(onConfirm).toHaveBeenCalledTimes(1);
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  test("without children: initial focus lands on Confirm, and Enter there confirms (not Cancel)", async () => {
+    const user = userEvent.setup();
+    const onConfirm = mock();
+    render(
+      <Dialog
+        open
+        onOpenChange={() => undefined}
+        title="Wirklich löschen?"
+        onConfirm={onConfirm}
+        testId="dlg"
+      />,
+    );
+    const confirmButton = await waitFor(() => screen.getByTestId("dlg-confirm"));
+    await waitFor(() => expect(document.activeElement).toBe(confirmButton));
+    await user.keyboard("{Enter}");
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  test("with children: initial focus stays off Confirm (Radix default, e.g. an input inside)", async () => {
+    render(
+      <Dialog
+        open
+        onOpenChange={() => undefined}
+        title="Details"
+        onConfirm={() => undefined}
+        testId="dlg-with-content"
+      >
+        <input type="text" data-testid="dlg-input" />
+      </Dialog>,
+    );
+    const confirmButton = await waitFor(() => screen.getByTestId("dlg-with-content-confirm"));
+    // No explicit assertion on where focus DOES land (Radix's own default,
+    // out of scope here) — only that it isn't hijacked onto Confirm.
+    expect(document.activeElement).not.toBe(confirmButton);
+  });
 });
 
 describe("Text variants", () => {

package/src/__tests__/projection-detail-record-layout.test.tsx

@@ -112,6 +112,102 @@ describe("KumikoScreen / projectionDetail — record header + metrics band", ()
     ).toBe("3");
   });
 
+  test("metric.navigate — clicking the value navigates to the resolved id and applies params", async () => {
+    const navigateCalls: unknown[] = [];
+    const setSearchParamsCalls: Readonly<Record<string, string | null>>[] = [];
+    const navApi: NavApi = {
+      route: undefined,
+      navigate: (target) => navigateCalls.push(target),
+      replace: () => {},
+      hrefFor: () => "",
+      searchParams: {},
+      setSearchParams: (updates) => setSearchParamsCalls.push(updates),
+    };
+    const metricsScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      metrics: [
+        {
+          field: "balance",
+          label: "rentals.detail.metric.tenant",
+          navigate: { entity: "tenant", entityId: "tenantId", params: { pick: ["overdueDays"] } },
+        },
+      ],
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, tenantId: "tenant-9" });
+    const user = userEvent.setup();
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(metricsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-balance-label").textContent,
+    ).toBe("rentals.detail.metric.tenant");
+    await user.click(screen.getByTestId("kumiko-screen-projection-detail-metric-balance"));
+
+    expect(navigateCalls).toEqual([{ entity: "tenant", id: "tenant-9" }]);
+    expect(setSearchParamsCalls).toContainEqual({ overdueDays: "3" });
+  });
+
+  test("header.subtitleHref — an absolute http(s) URL renders the subtitle as an external link", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", subtitle: "address", subtitleHref: "addressUrl" },
+    };
+    const dispatcher = dispatcherReturning({
+      ...rowData,
+      addressUrl: "https://maps.example.com/12-canal-st",
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const subtitle = screen.getByTestId("kumiko-screen-projection-detail-subtitle");
+    expect(subtitle.tagName).toBe("A");
+    expect(subtitle.getAttribute("href")).toBe("https://maps.example.com/12-canal-st");
+    expect(subtitle.getAttribute("target")).toBe("_blank");
+  });
+
+  test("header.subtitleHref with a non-absolute value keeps the subtitle as plain text", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", subtitle: "address", subtitleHref: "addressUrl" },
+    };
+    const dispatcher = dispatcherReturning({ ...rowData, addressUrl: "/relative/path" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const subtitle = screen.getByTestId("kumiko-screen-projection-detail-subtitle");
+    expect(subtitle.tagName).not.toBe("A");
+    expect(subtitle.textContent).toBe("12 Canal St");
+  });
+
   test("without header/metrics, neither renders — regression protection for existing screens", async () => {
     const dispatcher = dispatcherReturning(rowData);
 

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

@@ -632,6 +632,108 @@ describe("KumikoScreen / projectionDetail extension section (solon#264)", () =>
     expect(screen.getByTestId("session-notes").textContent).toBe("user-session:sess-1");
     expect(screen.queryByTestId("field-userId")).toBeNull();
   });
+
+  test("layout.mode: 'tabs' with a header — exactly one card renders, the head (bedienkonzept A1)", async () => {
+    const tabsHeaderScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      header: { title: "userId" },
+      layout: {
+        mode: "tabs",
+        sections: [
+          { id: "overview", title: "Overview", fields: ["userId"] },
+          { id: "meta", title: "Meta", fields: ["createdAt"] },
+        ],
+      },
+    };
+    const tabsHeaderSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [tabsHeaderScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const nav: NavApi = {
+      route: undefined,
+      navigate: () => {},
+      replace: () => {},
+      hrefFor: () => "",
+      searchParams: {},
+      setSearchParams: () => {},
+    };
+
+    const { container } = render(
+      <NavProvider value={nav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={tabsHeaderSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    // Bedienkonzept A1: on a tabbed Akte there is exactly one card, the head
+    // — tab content sits on the page background. Checked via the card's
+    // structural marker, not a Tailwind class string.
+    expect(container.querySelectorAll('[data-slot="card"]')).toHaveLength(1);
+  });
+
+  test("layout.mode: 'tabs' with countField — tab label carries the record's count, sections without it stay unchanged", async () => {
+    const tabsCountScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        mode: "tabs",
+        sections: [
+          { id: "overview", title: "Overview", fields: ["userId"], countField: "openCount" },
+          { id: "meta", title: "Meta", fields: ["createdAt"] },
+        ],
+      },
+    };
+    const tabsCountSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [tabsCountScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z", openCount: 3 },
+      })) as unknown as Dispatcher["query"],
+    });
+    const nav: NavApi = {
+      route: undefined,
+      navigate: () => {},
+      replace: () => {},
+      hrefFor: () => "",
+      searchParams: {},
+      setSearchParams: () => {},
+    };
+
+    render(
+      <NavProvider value={nav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={tabsCountSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-tabs-overview-count").textContent,
+    ).toBe("3");
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-tabs-meta-count")).toBeNull();
+  });
 });
 
 // projectionDetail.actions kind:"drawer" (fw#2710) — same shared DrawerHost

package/src/layout/__tests__/sidebar-panel.test.tsx

@@ -0,0 +1,32 @@
+// SidebarPanel tone (fw bedienkonzept point 8): a screen list can carry the
+// page's own content colors instead of always reading as shell navigation.
+
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { SidebarPanel } from "../sidebar-panel";
+
+describe("SidebarPanel — tone", () => {
+  test("default (nav) keeps the shell's sidebar chrome classes", () => {
+    render(
+      <SidebarPanel>
+        <div data-testid="child">rows</div>
+      </SidebarPanel>,
+    );
+    const body = screen.getByTestId("child").parentElement;
+    expect(body?.className).toContain("bg-sidebar");
+    expect(body?.className).toContain("border-sidebar-border");
+  });
+
+  test("tone=surface drops the sidebar classes for content-colored ones", () => {
+    render(
+      <SidebarPanel tone="surface">
+        <div data-testid="child">rows</div>
+      </SidebarPanel>,
+    );
+    const body = screen.getByTestId("child").parentElement;
+    expect(body?.className).toContain("bg-muted");
+    expect(body?.className).toContain("border-border");
+    expect(body?.className).not.toContain("bg-sidebar");
+    expect(body?.className).not.toContain("border-sidebar-border");
+  });
+});

package/src/layout/sidebar-panel.tsx

@@ -52,6 +52,10 @@ export type SidebarPanelProps = {
    *  two screens with their own list should not overwrite each other's width. */
   readonly storageKey?: string;
   readonly className?: string;
+  /** "nav" (default) matches the shell's own sidebar chrome. "surface" reads
+   *  as page content instead of navigation — for a list that carries the
+   *  screen's own content colors (e.g. status-tinted rows). */
+  readonly tone?: "nav" | "surface";
 };
 
 const DEFAULT_WIDTH = 340;
@@ -79,6 +83,7 @@ export function SidebarPanel({
   maxWidth = DEFAULT_MAX,
   storageKey,
   className,
+  tone = "nav",
 }: SidebarPanelProps): ReactNode {
   const slot = useSidebarPanelSlot();
   const setOccupied = slot?.setOccupied;
@@ -134,7 +139,8 @@ export function SidebarPanel({
     <div
       data-kumiko-layout="sidebar-panel-body"
       className={cn(
-        "relative flex h-full shrink-0 flex-col border-sidebar-border border-r bg-sidebar",
+        "relative flex h-full shrink-0 flex-col border-r",
+        tone === "surface" ? "border-border bg-muted" : "border-sidebar-border bg-sidebar",
         className,
       )}
       style={{ width: `${width}px` }}
@@ -145,7 +151,10 @@ export function SidebarPanel({
       <div
         data-kumiko-layout="sidebar-panel-handle"
         onPointerDown={startDrag}
-        className="absolute inset-y-0 right-0 w-1 cursor-col-resize bg-transparent transition-colors hover:bg-sidebar-border"
+        className={cn(
+          "absolute inset-y-0 right-0 w-1 cursor-col-resize bg-transparent transition-colors",
+          tone === "surface" ? "hover:bg-border" : "hover:bg-sidebar-border",
+        )}
       />
     </div>
   );

package/src/primitives/dialog.tsx

@@ -5,7 +5,7 @@ import type { DialogProps } from "@cosmicdrift/kumiko-renderer";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Loader2 } from "lucide-react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import { ModalShell } from "./modal-shell";
 
@@ -23,6 +23,7 @@ export function DefaultDialog({
 }: DialogProps): ReactNode {
   const t = useTranslation();
   const [loading, setLoading] = useState(false);
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
 
   const effectiveConfirmLabel = confirmLabel ?? t("kumiko.dialog.confirm");
   const effectiveCancelLabel = cancelLabel ?? t("kumiko.dialog.cancel");
@@ -50,6 +51,14 @@ export function DefaultDialog({
       closeLabel={t("kumiko.dialog.close")}
       noAriaDescription={description === undefined}
       contentClassName={cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg")}
+      {...(children === undefined && {
+        // Radix's default initial focus lands on Cancel (first focusable in
+        // DOM order), so Enter would abort instead of confirm.
+        onOpenAutoFocus: (event: Event) => {
+          event.preventDefault();
+          confirmButtonRef.current?.focus();
+        },
+      })}
     >
       <div className="flex flex-col gap-1.5">
         <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
@@ -74,6 +83,7 @@ export function DefaultDialog({
           </button>
         </DialogPrimitive.Close>
         <button
+          ref={confirmButtonRef}
           type="button"
           onClick={() => void handleConfirm()}
           disabled={loading}

package/src/primitives/index.tsx

@@ -18,6 +18,8 @@ import type {
   DataTableSortDir,
 } from "@cosmicdrift/kumiko-renderer";
 import {
+  type ActionMenuItemSpec,
+  type ActionOverflowMenuProps,
   type BannerProps,
   type ButtonProps,
   type CardProps,
@@ -1292,16 +1294,24 @@ function DefaultDataTable({
   );
 }
 
-// RowActionsCell — rendert die Row-Actions je nach mode:
-//   - "adaptive" (Default): ≤2 sichtbare Actions inline (rechtsbündig),
-//     >2 als Kebab-Dropdown.
-//   - "inline": IMMER Inline-Buttons, linksbündig + full-width — auch bei
-//     >2 (kein Kebab). `w-full justify-start` heftet den ersten Button an
-//     die Spalten-Linkskante, damit er über alle Rows an derselben Position
-//     steht (sonst wandert er durch unterschiedlich breite Labels).
-// isVisible-Filter wird hier ausgeführt; eine action die für eine Row
-// unsichtbar ist, kommt nicht in den Render. Sind alle Actions hidden,
-// bleibt die Cell leer (keine Phantom-Spalte).
+// The primary row action is the one that always stays a visible text
+// button — `edit` if declared, else the first visible action (fw
+// bedienkonzept L3: "Bearbeiten steht in jeder Zeile, immer, als Text").
+function primaryRowAction(actions: readonly DataTableRowAction[]): DataTableRowAction | undefined {
+  return actions.find((a) => a.id === "edit") ?? actions[0];
+}
+
+// RowActionsCell renders the row actions depending on `mode`:
+//   - "adaptive" (default): <=2 visible actions render inline (right-
+//     aligned); >2 render the primary action (see `primaryRowAction`)
+//     inline plus the rest in the kebab dropdown.
+//   - "inline": ALWAYS inline buttons, left-aligned + full-width, even for
+//     >2 (no kebab). `w-full justify-start` pins the first button to the
+//     column's left edge so it sits at the same position across rows
+//     (otherwise it would drift with differently-sized labels).
+// The isVisible filter runs here; an action hidden for a given row never
+// reaches render. If every action is hidden, the cell stays empty (no
+// phantom column).
 function RowActionsCell({
   row,
   actions,
@@ -1335,7 +1345,14 @@ function RowActionsCell({
       </div>
     );
   }
-  return <RowActionsKebab row={row} actions={visible} />;
+  const primary = primaryRowAction(visible);
+  const rest = visible.filter((a) => a.id !== primary?.id);
+  return (
+    <div className="inline-flex items-center gap-1 justify-end">
+      {primary !== undefined && <RowActionButton row={row} action={primary} />}
+      <RowActionsKebab row={row} actions={rest} />
+    </div>
+  );
 }
 
 // Shared trigger-State zwischen Inline-Button + Kebab-Item: busy-Flag
@@ -1526,6 +1543,52 @@ function RowActionsKebab({
   );
 }
 
+// Header/row-actions overflow menu (A7) — same three-dots trigger style as
+// RowActionsKebab, generic ActionMenuItemSpec items instead of the
+// DataTableRowAction schema (callers own confirm/danger handling per item).
+function ActionOverflowMenu({ items, label, testId }: ActionOverflowMenuProps): ReactNode {
+  const [open, setOpen] = useState(false);
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          data-testid={testId ?? "action-overflow-menu-trigger"}
+          className={cn(
+            "inline-flex h-8 w-8 items-center justify-center rounded-sm",
+            "hover:bg-accent text-muted-foreground hover:text-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          )}
+        >
+          <MoreHorizontal className="size-4" aria-hidden="true" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {items.map((item: ActionMenuItemSpec) => {
+          const resolvedIcon = actionIconFor(item.icon);
+          return (
+            <DropdownMenuItem
+              key={item.id}
+              data-testid={`${testId ?? "action-overflow-menu"}-item-${item.id}`}
+              disabled={item.disabled === true}
+              onSelect={(e) => {
+                e.preventDefault();
+                setOpen(false);
+                item.onSelect();
+              }}
+              className={cn(item.variant === "danger" && "text-destructive focus:text-destructive")}
+            >
+              {resolvedIcon !== undefined && <Icon name={resolvedIcon} className="size-4" />}
+              {item.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 // InfiniteSentinel — empty div at the end of the table that uses
 // IntersectionObserver to detect when the user scrolls near the list end.
 // onReachEnd fires exactly once per "becomes visible" transition; the
@@ -2159,6 +2222,144 @@ function FormRoot({
   );
 }
 
+// Sections wrapper for DefaultForm's card and chromeless layouts alike —
+// only the card-derived padding on non-section children differs between
+// them (see `chromeless` doc on FormProps).
+function FormSections({
+  children,
+  chromeless,
+  stickyActions,
+  fillHeight,
+}: {
+  readonly children: ReactNode;
+  readonly chromeless: boolean;
+  readonly stickyActions: boolean | undefined;
+  readonly fillHeight: boolean | undefined;
+}): ReactNode {
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        // Section-Children (Auto-UI-Edit) trennt eine Linie ZWISCHEN
+        // ihnen — sie padden sich selbst. Flache Felder (Custom-Screens)
+        // kriegen Padding + Rhythmus, keine Linie zwischen jedem Feld.
+        "[&>section:not(:first-child)]:border-t",
+        !chromeless && "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
+        !chromeless && "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
+        // ponytail: fixed footer height is a guess (two wrapped button rows +
+        // safe-area, fw#2528) — widen further if a wizard step's last field
+        // ever renders visibly clipped under three or more wrapped rows.
+        stickyActions === true && "max-sm:pb-32",
+        // Same "no flex-1" reasoning as the card above: this is the
+        // one section allowed to shrink (min-h-0) inside the card, not
+        // one forced to grow past its content.
+        fillHeight === true && "min-h-0",
+      )}
+    >
+      <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
+    </div>
+  );
+}
+
+// Title/subtitle block shared by DefaultForm's card and chromeless layouts —
+// the caller-supplied subtitle (screen.description) is independent of
+// hideSectionTitles (which only blanks per-section titles, see RenderEdit)
+// and must keep rendering in tabs/chromeless mode, just without card chrome.
+function FormTitleBlock({
+  title,
+  subtitle,
+  testId,
+  bordered,
+  fillHeight,
+}: {
+  readonly title: ReactNode;
+  readonly subtitle: ReactNode;
+  readonly testId: string | undefined;
+  readonly bordered: boolean;
+  readonly fillHeight: boolean | undefined;
+}): ReactNode {
+  if (title === undefined && subtitle === undefined) return null;
+  return (
+    <div
+      className={cn(
+        bordered ? cn(cardHeaderBorder, "px-6 pb-4 pt-5") : "pb-4",
+        fillHeight === true && "shrink-0",
+      )}
+    >
+      {title !== undefined && (
+        <h2
+          data-testid={testId !== undefined ? `${testId}-title` : undefined}
+          className="text-lg font-semibold tracking-tight"
+        >
+          {title}
+        </h2>
+      )}
+      {subtitle !== undefined && (
+        <p
+          data-testid={testId !== undefined ? `${testId}-subtitle` : undefined}
+          className="mt-1 text-sm text-muted-foreground"
+        >
+          {subtitle}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// Footer wrapper for DefaultForm's card and chromeless layouts alike — only
+// the card-derived horizontal padding/border differs between them.
+function FormFooter({
+  actions,
+  secondaryActions,
+  testId,
+  chromeless,
+  stickyActions,
+  fillHeight,
+}: {
+  readonly actions: ReactNode;
+  readonly secondaryActions: ReactNode;
+  readonly testId: string | undefined;
+  readonly chromeless: boolean;
+  readonly stickyActions: boolean | undefined;
+  readonly fillHeight: boolean | undefined;
+}): ReactNode {
+  if (actions === undefined && secondaryActions === undefined) return null;
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4",
+        !chromeless && "px-[var(--card-padding)]",
+        !chromeless && cardFooterBorder,
+        fillHeight === true && "shrink-0",
+        // Below sm (640px): pin to the viewport bottom instead of normal
+        // flow, so a virtual keyboard shrinking the viewport can't push
+        // this out of reach (fw#1918). `fixed` escapes the card's
+        // `overflow-hidden` (only transform/filter/contain ancestors trap
+        // it, confirmed against AppLayout/SidebarInset — neither sets those).
+        stickyActions === true &&
+          "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
+      )}
+    >
+      {secondaryActions !== undefined && (
+        <div
+          data-testid={testId !== undefined ? `${testId}-actions-secondary` : undefined}
+          className="flex flex-wrap items-center gap-1 max-sm:[&_button]:text-xs"
+        >
+          {secondaryActions}
+        </div>
+      )}
+      {actions !== undefined && (
+        <div
+          data-testid={testId !== undefined ? `${testId}-actions` : undefined}
+          className="flex items-center gap-2 max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto"
+        >
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function DefaultForm({
   onSubmit,
   children,
@@ -2171,6 +2372,7 @@ function DefaultForm({
   stickyActions,
   headerRegion,
   fillHeight,
+  chromeless,
 }: FormProps): ReactNode {
   // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
@@ -2197,6 +2399,65 @@ function DefaultForm({
     );
   }
 
+  const sections = (
+    <FormSections
+      chromeless={chromeless === true}
+      stickyActions={stickyActions}
+      fillHeight={fillHeight}
+    >
+      {children}
+    </FormSections>
+  );
+  const footer = (
+    <FormFooter
+      actions={actions}
+      secondaryActions={secondaryActions}
+      testId={testId}
+      chromeless={chromeless === true}
+      stickyActions={stickyActions}
+      fillHeight={fillHeight}
+    />
+  );
+
+  // Tab content (bedienkonzept A1): the head card is the ONLY card on the
+  // screen, so a tabbed projectionDetail's tab content must render as a
+  // sibling of that card, not nest another one around itself — chromeless
+  // skips the card wrapper and its border/padding so sections and footer
+  // sit directly on the page background, same edge as a standalone list
+  // screen. Title/subtitle still render unbordered: RenderEdit's tabs
+  // caller already blanks the per-section title via hideSectionTitles, but
+  // the screen-level subtitle (screen.description) is independent of that
+  // and must survive tabs mode.
+  if (chromeless === true) {
+    return (
+      <FormRoot
+        onSubmit={onSubmit}
+        testId={testId}
+        className={cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0")}
+      >
+        <FormScreenShell
+          {...(width !== undefined && { maxWidth: width })}
+          {...(fillHeight === true && { fillHeight: true })}
+        >
+          {headerRegion !== undefined && (
+            <div className={cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0")}>
+              {headerRegion}
+            </div>
+          )}
+          <FormTitleBlock
+            title={title}
+            subtitle={subtitle}
+            testId={testId}
+            bordered={false}
+            fillHeight={fillHeight}
+          />
+          {sections}
+          {footer}
+        </FormScreenShell>
+      </FormRoot>
+    );
+  }
+
   // One card form: title as header (no divider under it), sections divided
   // between each other, muted action footer. Shell width defaults to full
   // (same chrome as lists); pass width to narrow (auth-adjacent / dense).
@@ -2216,6 +2477,7 @@ function DefaultForm({
           </div>
         )}
         <div
+          data-slot="card"
           className={cn(
             cardSurface(),
             "overflow-hidden",
@@ -2228,82 +2490,15 @@ function DefaultForm({
             fillHeight === true && "min-h-0 flex flex-col",
           )}
         >
-          {(title !== undefined || subtitle !== undefined) && (
-            <div
-              className={cn(cardHeaderBorder, "px-6 pb-4 pt-5", fillHeight === true && "shrink-0")}
-            >
-              {title !== undefined && (
-                <h2
-                  data-testid={testId !== undefined ? `${testId}-title` : undefined}
-                  className="text-lg font-semibold tracking-tight"
-                >
-                  {title}
-                </h2>
-              )}
-              {subtitle !== undefined && (
-                <p
-                  data-testid={testId !== undefined ? `${testId}-subtitle` : undefined}
-                  className="mt-1 text-sm text-muted-foreground"
-                >
-                  {subtitle}
-                </p>
-              )}
-            </div>
-          )}
-          <div
-            className={cn(
-              "flex flex-col",
-              // Section-Children (Auto-UI-Edit) trennt eine Linie ZWISCHEN
-              // ihnen — sie padden sich selbst. Flache Felder (Custom-Screens)
-              // kriegen Padding + Rhythmus, keine Linie zwischen jedem Feld.
-              "[&>section:not(:first-child)]:border-t",
-              "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
-              "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
-              // ponytail: fixed footer height is a guess (two wrapped button rows +
-              // safe-area, fw#2528) — widen further if a wizard step's last field
-              // ever renders visibly clipped under three or more wrapped rows.
-              stickyActions === true && "max-sm:pb-32",
-              // Same "no flex-1" reasoning as the card above: this is the
-              // one section allowed to shrink (min-h-0) inside the card, not
-              // one forced to grow past its content.
-              fillHeight === true && "min-h-0",
-            )}
-          >
-            <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
-          </div>
-          {(secondaryActions !== undefined || actions !== undefined) && (
-            <div
-              className={cn(
-                "flex flex-col-reverse gap-3 px-[var(--card-padding)] py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4",
-                cardFooterBorder,
-                fillHeight === true && "shrink-0",
-                // Below sm (640px): pin to the viewport bottom instead of normal
-                // flow, so a virtual keyboard shrinking the viewport can't push
-                // this out of reach (fw#1918). `fixed` escapes the card's
-                // `overflow-hidden` (only transform/filter/contain ancestors trap
-                // it, confirmed against AppLayout/SidebarInset — neither sets those).
-                stickyActions === true &&
-                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
-              )}
-            >
-              {secondaryActions !== undefined && (
-                <div
-                  data-testid={testId !== undefined ? `${testId}-actions-secondary` : undefined}
-                  className="flex flex-wrap items-center gap-1 max-sm:[&_button]:text-xs"
-                >
-                  {secondaryActions}
-                </div>
-              )}
-              {actions !== undefined && (
-                <div
-                  data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-                  className="flex items-center gap-2 max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto"
-                >
-                  {actions}
-                </div>
-              )}
-            </div>
-          )}
+          <FormTitleBlock
+            title={title}
+            subtitle={subtitle}
+            testId={testId}
+            bordered={true}
+            fillHeight={fillHeight}
+          />
+          {sections}
+          {footer}
         </div>
       </FormScreenShell>
     </FormRoot>
@@ -2430,6 +2625,7 @@ function DefaultSection({
   // standalone-section content that renders its own non-portaled overlay.
   return (
     <div
+      data-slot="card"
       data-testid={testId}
       className={cn(
         cardSurface(),
@@ -2668,7 +2864,11 @@ export function DefaultCard({ slots, options, className, testId, children }: Car
   const header = s.header ?? defaultHeader;
   const hasHeader = header !== null && header !== undefined;
   return (
-    <div data-testid={testId} className={cn(cardSurface({ radius }), "overflow-hidden", className)}>
+    <div
+      data-slot="card"
+      data-testid={testId}
+      className={cn(cardSurface({ radius }), "overflow-hidden", className)}
+    >
       {header}
       {/* != null covers undefined AND explicit null; a `false` child (from
           `cond && <El/>`) still renders no visible content either way. */}
@@ -2721,4 +2921,5 @@ export const defaultPrimitives: CorePrimitives = {
   Metric: DefaultMetric,
   JsonView: DefaultJsonView,
   FillContainer: DefaultFillContainer,
+  ActionOverflowMenu,
 };

package/src/primitives/metric.tsx

@@ -1,13 +1,15 @@
 import type { MetricProps } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
 
 // Borderless cell in the metrics-band Grid — `first:border-l-0` drops the
 // divider on the first cell purely from DOM position, so the tiles read as
 // one row of vertical dividers instead of individual cards (fw record-
 // screen-type polish). Typo matches StatCard's label/value rhythm.
-export function DefaultMetric({ label, value, testId }: MetricProps): ReactNode {
-  return (
-    <div data-testid={testId} className="border-l first:border-l-0 px-4 py-3">
+export function DefaultMetric({ label, value, testId, onPress }: MetricProps): ReactNode {
+  const cellClassName = "border-l first:border-l-0 px-4 py-3";
+  const content = (
+    <>
       <div
         className="text-xs text-muted-foreground"
         data-testid={testId !== undefined ? `${testId}-label` : undefined}
@@ -20,6 +22,23 @@ export function DefaultMetric({ label, value, testId }: MetricProps): ReactNode
       >
         {value}
       </div>
+    </>
+  );
+  if (onPress !== undefined) {
+    return (
+      <button
+        type="button"
+        data-testid={testId}
+        className={cn(cellClassName, "w-full text-left hover:bg-muted/50")}
+        onClick={onPress}
+      >
+        {content}
+      </button>
+    );
+  }
+  return (
+    <div data-testid={testId} className={cellClassName}>
+      {content}
     </div>
   );
 }

package/src/primitives/modal-shell.tsx

@@ -16,6 +16,9 @@ export type ModalShellProps = {
   readonly noAriaDescription?: boolean;
   readonly closeLabel?: string;
   readonly showCloseButton?: boolean;
+  /** Lets the caller take over Radix's initial-focus target — call
+   *  `event.preventDefault()` and focus the desired element yourself. */
+  readonly onOpenAutoFocus?: (event: Event) => void;
 };
 
 export function ModalShell({
@@ -27,6 +30,7 @@ export function ModalShell({
   noAriaDescription,
   closeLabel,
   showCloseButton = true,
+  onOpenAutoFocus,
 }: ModalShellProps): ReactNode {
   return (
     <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
@@ -35,6 +39,7 @@ export function ModalShell({
         <DialogPrimitive.Content
           data-testid={testId}
           {...(noAriaDescription && { "aria-describedby": undefined })}
+          {...(onOpenAutoFocus !== undefined && { onOpenAutoFocus })}
           className={cn(
             "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",

package/src/primitives/tabs.tsx

@@ -15,6 +15,14 @@ export function DefaultTabs({ items, activeId, onSelect, testId }: TabsProps): R
             data-testid={testId !== undefined ? `${testId}-${item.id}` : undefined}
           >
             {item.label}
+            {item.count !== undefined && (
+              <span
+                className="ml-1.5 text-muted-foreground"
+                data-testid={testId !== undefined ? `${testId}-${item.id}-count` : undefined}
+              >
+                {item.count}
+              </span>
+            )}
           </TabsTrigger>
         ))}
       </TabsList>