@cosmicdrift/kumiko-renderer-web 0.243.3 → 0.244.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.243.3",
+  "version": "0.244.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.243.3",
-    "@cosmicdrift/kumiko-headless": "0.243.3",
-    "@cosmicdrift/kumiko-renderer": "0.243.3",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.244.0",
+    "@cosmicdrift/kumiko-headless": "0.244.0",
+    "@cosmicdrift/kumiko-renderer": "0.244.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.243.3"
+    "@cosmicdrift/kumiko-locale-de": "0.244.0"
   },
   "repository": {
     "type": "git",

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

@@ -18,7 +18,7 @@ import {
   UserRolesProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
-import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+import { createMockDispatcher, fireEvent, render, screen, waitFor, within } from "./test-utils";
 
 const taskEntity = {
   fields: {
@@ -1395,6 +1395,210 @@ describe("KumikoScreen", () => {
     });
   });
 
+  // rowActions kind:"drawer" (fw#2710): row-level pendant to toolbarActions
+  // kind:"drawer" (fw#2225) above — same DrawerHost/useDrawerAction
+  // machinery, generalized to also serve a row-derived prefill.
+  describe("entityList rowActions drawer-kind (fw#2710)", () => {
+    const noteForm: ActionFormScreenDefinition = {
+      id: "task-note-drawer",
+      type: "actionForm",
+      handler: "tasks:write:task:note",
+      fields: {
+        title: { type: "text" },
+        note: { type: "text", required: true },
+        secret: { type: "text", sensitive: true },
+      },
+      layout: { sections: [{ fields: ["title", "note", "secret"] }] },
+    };
+    // A single rowAction keeps the DataTable's inline-button rendering
+    // (>2 actions collapse to a kebab dropdown, see ListColumnSpec.rowActions
+    // doc) — each test below only exercises one action at a time.
+    function screenWithRowAction(
+      rowAction: NonNullable<EntityListScreenDefinition["rowActions"]>[number],
+    ): EntityListScreenDefinition {
+      return {
+        id: "task-list",
+        type: "entityList",
+        entity: "task",
+        columns: ["title"],
+        rowActions: [rowAction],
+      };
+    }
+
+    function makeRowDrawerDispatcher(write?: Dispatcher["write"]): {
+      dispatcher: Dispatcher;
+      getQueryCallCount: () => number;
+    } {
+      let queryCallCount = 0;
+      const dispatcher = makeDispatcher({
+        query: (async () => {
+          queryCallCount += 1;
+          return {
+            isSuccess: true,
+            data: {
+              rows: [{ id: "r1", title: "Alpha", count: 1, done: false, secret: "topsecret" }],
+              nextCursor: null,
+            },
+          };
+        }) as unknown as Dispatcher["query"],
+        ...(write !== undefined && { write }),
+      });
+      return { dispatcher, getQueryCallCount: () => queryCallCount };
+    }
+
+    test("Click opens the Drawer with the row's value prefilled via `pick`", async () => {
+      const rowDrawerSchema: FeatureSchema = {
+        ...schema,
+        screens: [
+          screenWithRowAction({
+            kind: "drawer",
+            id: "add-note",
+            label: "actions.addNote",
+            screen: "task-note-drawer",
+            params: { pick: ["title"] },
+          }),
+          noteForm,
+        ],
+      };
+      const { dispatcher } = makeRowDrawerDispatcher();
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={rowDrawerSchema} qn="tasks:screen:task-list" />
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+      expect(screen.queryByTestId("field-title")).toBeNull();
+
+      await user.click(screen.getByTestId("row-r1-action-add-note"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      const titleInput = screen.getByTestId("field-title").querySelector("input");
+      if (titleInput === null) throw new Error("expected an <input> inside field-title");
+      expect(titleInput.value).toBe("Alpha");
+    });
+
+    test("Click opens the Drawer with the row's value prefilled via `map`", async () => {
+      const rowDrawerSchema: FeatureSchema = {
+        ...schema,
+        screens: [
+          screenWithRowAction({
+            kind: "drawer",
+            id: "add-note-mapped",
+            label: "actions.addNoteMapped",
+            screen: "task-note-drawer",
+            params: { map: { note: "title" } },
+          }),
+          noteForm,
+        ],
+      };
+      const { dispatcher } = makeRowDrawerDispatcher();
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={rowDrawerSchema} qn="tasks:screen:task-list" />
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+      await user.click(screen.getByTestId("row-r1-action-add-note-mapped"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      const noteInput = screen.getByTestId("field-note").querySelector("input");
+      if (noteInput === null) throw new Error("expected an <input> inside field-note");
+      expect(noteInput.value).toBe("Alpha");
+    });
+
+    // Locks in the mergeSearchParamsIntoInitial `sensitive` gate for the
+    // drawer's direct-object overrides path — a `params` extractor naming a
+    // sensitive field must not leak the row's value into the form.
+    test("A sensitive field named by `params` is not prefilled", async () => {
+      const rowDrawerSchema: FeatureSchema = {
+        ...schema,
+        screens: [
+          screenWithRowAction({
+            kind: "drawer",
+            id: "reveal",
+            label: "actions.reveal",
+            screen: "task-note-drawer",
+            params: { pick: ["secret"] },
+          }),
+          noteForm,
+        ],
+      };
+      const { dispatcher } = makeRowDrawerDispatcher();
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={rowDrawerSchema} qn="tasks:screen:task-list" />
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+      await user.click(screen.getByTestId("row-r1-action-reveal"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      const secretInput = screen.getByTestId("field-secret").querySelector("input");
+      if (secretInput === null) throw new Error("expected an <input> inside field-secret");
+      expect(secretInput.value).toBe("");
+    });
+
+    test("Successful submit dispatches the handler, closes the Drawer without navigating, and reloads the list", async () => {
+      const rowDrawerSchema: FeatureSchema = {
+        ...schema,
+        screens: [
+          screenWithRowAction({
+            kind: "drawer",
+            id: "add-note",
+            label: "actions.addNote",
+            screen: "task-note-drawer",
+            params: { pick: ["title"] },
+          }),
+          noteForm,
+        ],
+      };
+      const writeCalls: { type: string; payload: unknown }[] = [];
+      const { dispatcher, getQueryCallCount } = makeRowDrawerDispatcher((async (
+        type: string,
+        payload: unknown,
+      ) => {
+        writeCalls.push({ type, payload });
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["write"]);
+      const navigateCalls: unknown[] = [];
+      const memoryNav = {
+        route: { screenId: "task-list" },
+        navigate: (target: NavTarget) => {
+          navigateCalls.push(target);
+        },
+        replace: () => undefined,
+        hrefFor: () => "",
+        searchParams: {},
+        setSearchParams: () => undefined,
+      };
+      const user = userEvent.setup();
+      render(
+        <NavProvider value={memoryNav}>
+          <DispatcherProvider dispatcher={dispatcher}>
+            <KumikoScreen schema={rowDrawerSchema} qn="tasks:screen:task-list" />
+          </DispatcherProvider>
+        </NavProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+      await user.click(screen.getByTestId("row-r1-action-add-note"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      const queryCallsBeforeSubmit = getQueryCallCount();
+
+      const noteInput = screen.getByTestId("field-note").querySelector("input");
+      if (noteInput === null) throw new Error("expected an <input> inside field-note");
+      fireEvent.change(noteInput, { target: { value: "hello" } });
+      await clickSubmitOnceEnabled();
+
+      await waitFor(() => expect(writeCalls.length).toBe(1));
+      expect(writeCalls[0]?.type).toBe("tasks:write:task:note");
+      await waitFor(() => expect(screen.queryByTestId("render-edit-form")).toBeNull());
+      await waitFor(() => expect(getQueryCallCount()).toBeGreaterThan(queryCallsBeforeSubmit));
+      expect(navigateCalls).toEqual([]);
+    });
+  });
+
   // Tier 2.7c: Screen-Level filter wird vom Schema in den Query-
   // Payload propagiert. Drei Buckets ("scheduled" / "active" / "done")
   // teilen sich denselben Query-Handler — der Filter unterscheidet
@@ -2682,6 +2886,86 @@ describe("KumikoScreen: entityEdit header actions", () => {
   });
 });
 
+// entityEdit.actions kind:"drawer" (fw#2710) — EntityEditUpdateForm owns its
+// own DrawerHost directly (5th RowAction/action call site, not covered by
+// the shared ToolbarAction plumbing's original scope). The outer update
+// form and the drawer's own ActionFormBody are both `RenderEdit` instances
+// mounted at once, so drawer-scoped queries use `within(...)` to avoid
+// colliding with the outer form's own render-edit-form/field-* testids.
+describe("KumikoScreen: entityEdit actions drawer-kind (fw#2710)", () => {
+  const noteForm: ActionFormScreenDefinition = {
+    id: "task-note-drawer",
+    type: "actionForm",
+    handler: "tasks:write:task:note",
+    fields: { title: { type: "text" }, note: { type: "text", required: true } },
+    layout: { sections: [{ fields: ["title", "note"] }] },
+  };
+  const editScreenWithDrawer: EntityEditScreenDefinition = {
+    id: "task-edit-drawer",
+    type: "entityEdit",
+    entity: "task",
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+    actions: [
+      {
+        kind: "drawer",
+        id: "add-note",
+        label: "Add note",
+        screen: "task-note-drawer",
+        params: { pick: ["title"] },
+      },
+    ],
+  };
+  const drawerSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [editScreenWithDrawer, noteForm],
+  };
+
+  test("Click opens the Drawer prefilled from the record; submit dispatches, closes without navigating, and reloads the record", async () => {
+    let queryCallCount = 0;
+    const writeCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async () => {
+        queryCallCount += 1;
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "loaded", count: 0, done: false },
+        };
+      }) as unknown as Dispatcher["query"],
+      write: (async (type: string, payload: unknown) => {
+        writeCalls.push({ type, payload });
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={drawerSchema} qn="tasks:screen:task-edit-drawer" entityId="task-1" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.queryByTestId("field-note")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("render-edit-action-add-note"));
+    const drawer = () => within(screen.getByTestId("toolbar-drawer-add-note"));
+    await waitFor(() => expect(drawer().getByTestId("field-note")).toBeTruthy());
+    const titleInput = drawer().getByTestId("field-title").querySelector("input");
+    if (titleInput === null) throw new Error("expected an <input> inside field-title");
+    expect(titleInput.value).toBe("loaded");
+    const queryCallsBeforeSubmit = queryCallCount;
+
+    const noteInput = drawer().getByTestId("field-note").querySelector("input");
+    if (noteInput === null) throw new Error("expected an <input> inside field-note");
+    fireEvent.change(noteInput, { target: { value: "hello" } });
+    fireEvent.click(drawer().getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(writeCalls.length).toBe(1));
+    expect(writeCalls[0]?.type).toBe("tasks:write:task:note");
+    await waitFor(() => expect(screen.queryByTestId("field-note")).toBeNull());
+    await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
+  });
+});
+
 // --- entityList status cells + row actions (fw#2579, fw#2580) ---
 // Both are leftovers from #2575: the tone heuristic and the icon-only
 // collapse existed, but neither reached a list cell. These render the real

package/src/__tests__/primitives.test.tsx

@@ -1743,10 +1743,27 @@ describe("PageSection", () => {
         <span data-testid="child">x</span>
       </PageSection>,
     );
-    expect(screen.getByTestId("p").className).toContain("p-6");
+    expect(screen.getByTestId("p").className).toContain("px-6");
     expect(screen.getByTestId("child")).toBeDefined();
   });
 
+  test("renders the same padding classes as FormScreenShell (fw#2640)", () => {
+    render(
+      <>
+        <PageSection testId="page-pad">x</PageSection>
+        <FormScreenShell testId="shell-pad">x</FormScreenShell>
+      </>,
+    );
+    const paddingOf = (testId: string): string[] =>
+      screen
+        .getByTestId(testId)
+        .className.split(" ")
+        .filter((c) => /^p[xytblr]?-/.test(c))
+        .sort();
+    expect(paddingOf("page-pad")).toEqual(["pb-12", "pt-6", "px-6"]);
+    expect(paddingOf("page-pad")).toEqual(paddingOf("shell-pad"));
+  });
+
   test("maxWidth=4xl sets the same width class as FormScreenShell maxWidth=4xl (fw#2640)", () => {
     render(
       <>

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

@@ -6,7 +6,10 @@
 //   - fehlende entityId → Error-Banner statt Crash
 
 import { describe, expect, test } from "bun:test";
-import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type {
+  ActionFormScreenDefinition,
+  ProjectionDetailScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type {
   ExtensionSectionProps,
@@ -24,7 +27,15 @@ import {
 } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import { BareFormProvider } from "../primitives";
-import { act, createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+import {
+  act,
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "./test-utils";
 
 const detailScreen: ProjectionDetailScreenDefinition = {
   id: "session-detail",
@@ -623,6 +634,88 @@ describe("KumikoScreen / projectionDetail extension section (solon#264)", () =>
   });
 });
 
+// projectionDetail.actions kind:"drawer" (fw#2710) — same shared DrawerHost
+// as toolbarActions/rowActions, wired into ProjectionDetailBody's own
+// headerActions builder (ProjectionDetailBody owns the Drawer directly,
+// unlike relatedList sections which only forward through onOpenDrawer).
+describe("KumikoScreen / projectionDetail actions drawer-kind (fw#2710)", () => {
+  const noteForm: ActionFormScreenDefinition = {
+    id: "session-note-drawer",
+    type: "actionForm",
+    handler: "sessions:write:session:note",
+    fields: { userId: { type: "text" }, note: { type: "text", required: true } },
+    layout: { sections: [{ fields: ["userId", "note"] }] },
+  };
+  const screenWithDrawerAction: ProjectionDetailScreenDefinition = {
+    ...detailScreen,
+    actions: [
+      {
+        kind: "drawer",
+        id: "add-note",
+        label: "actions.addNote",
+        screen: "session-note-drawer",
+        params: { pick: ["userId"] },
+      },
+    ],
+  };
+  const drawerSchema: FeatureSchema = {
+    featureName: "sessions",
+    entities: {},
+    screens: [screenWithDrawerAction, noteForm],
+  };
+
+  test("Click opens the Drawer prefilled from the record; submit dispatches, closes without navigating, and reloads the detail", async () => {
+    let queryCallCount = 0;
+    const write = (async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    })) as unknown as Dispatcher["write"];
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => {
+        queryCallCount += 1;
+        return {
+          isSuccess: true,
+          data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+        };
+      }) as unknown as Dispatcher["query"],
+      write,
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={drawerSchema} qn="sessions:screen:session-detail" entityId="sess-1" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("field-note")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("render-edit-action-add-note"));
+    // The outer detail RenderEdit and the drawer's own ActionFormBody
+    // RenderEdit are both mounted at once — scope queries to the drawer
+    // container so they don't collide with the outer screen's own
+    // render-edit-form/field-userId testids.
+    const drawer = () => within(screen.getByTestId("toolbar-drawer-add-note"));
+    await waitFor(() => expect(drawer().getByTestId("field-note")).toBeTruthy());
+    const userIdInput = drawer().getByTestId("field-userId").querySelector("input");
+    if (userIdInput === null) throw new Error("expected an <input> inside field-userId");
+    expect(userIdInput.value).toBe("user-42");
+    const queryCallsBeforeSubmit = queryCallCount;
+
+    const noteInput = drawer().getByTestId("field-note").querySelector("input");
+    if (noteInput === null) throw new Error("expected an <input> inside field-note");
+    await act(async () => {
+      fireEvent.change(noteInput, { target: { value: "hello" } });
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("render-edit-submit"));
+    });
+
+    await waitFor(() => expect(screen.queryByTestId("field-note")).toBeNull());
+    await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
+    expect(screen.getByTestId("field-userId").textContent).toContain("user-42");
+  });
+});
+
 // fw#2312 mounts extension sections (ExtensionSectionMount, render-edit.tsx)
 // INSIDE RenderEdit's own host <form testId="render-edit-form"> (render-edit.tsx:1059).
 // A section that renders its own <form> — the pattern ChangeEmailSection/

package/src/__tests__/projection-list-actions.test.tsx

@@ -201,3 +201,77 @@ describe("projectionList toolbarActions drawer-kind (fw#2225)", () => {
     await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
   });
 });
+
+// rowActions kind:"drawer" (fw#2710) — buildProjectionRowActions is shared
+// between entityList and projectionList; this pins the projectionList call
+// site (openDrawer wired through ProjectionListBody).
+describe("projectionList rowActions drawer-kind (fw#2710)", () => {
+  const noteForm: ActionFormScreenDefinition = {
+    id: "maintenance-note",
+    type: "actionForm",
+    handler: "status:write:maintenance:note",
+    fields: { name: { type: "text" }, note: { type: "text", required: true } },
+    layout: { sections: [{ fields: ["name", "note"] }] },
+  };
+  const screenWithRowDrawer: ProjectionListScreenDefinition = {
+    ...projectionScreen,
+    rowActions: [
+      {
+        kind: "drawer",
+        id: "add-note",
+        label: "status:action:add-note",
+        screen: "maintenance-note",
+        params: { pick: ["name"] },
+      },
+    ],
+  };
+  const drawerSchema: FeatureSchema = {
+    featureName: "status",
+    entities: {},
+    screens: [screenWithRowDrawer, noteForm],
+  };
+
+  test("Click opens the Drawer prefilled from the row; submit dispatches, closes without navigating, and reloads the list", async () => {
+    let queryCallCount = 0;
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    const dispatcher: Dispatcher = {
+      ...createMockDispatcher({
+        query: (async () => {
+          queryCallCount += 1;
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "m1", name: "DB-Upgrade" }], nextCursor: null },
+          };
+        }) as unknown as Dispatcher["query"],
+      }),
+      write: write as unknown as Dispatcher["write"],
+    };
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={drawerSchema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+    expect(screen.queryByTestId("field-name")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("row-m1-action-add-note"));
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const nameInput = screen.getByTestId("field-name").querySelector("input");
+    if (nameInput === null) throw new Error("expected an <input> inside field-name");
+    expect(nameInput.value).toBe("DB-Upgrade");
+    const queryCallsBeforeSubmit = queryCallCount;
+
+    const noteInput = screen.getByTestId("field-note").querySelector("input");
+    if (noteInput === null) throw new Error("expected an <input> inside field-note");
+    fireEvent.change(noteInput, { target: { value: "hello" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:note");
+    await waitFor(() => expect(screen.queryByTestId("render-edit-form")).toBeNull());
+    await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
+  });
+});

package/src/primitives/__tests__/data-table-toolbar.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { DataTable, Button } = defaultPrimitives;
+
+// coa-mapping-list / statement-upload-list on a 390px viewport: toolbarEnd's
+// rightmost button got cut off because neither the toolbar container nor its
+// toolbarEnd wrapper allowed wrapping. happy-dom doesn't compute real layout
+// (no measured widths here), so this pins the classes that make wrapping
+// possible instead: both containers carry flex-wrap, and toolbarEnd's
+// buttons sit inside that wrapping container rather than one that would
+// force them onto a single non-wrapping row.
+describe("DataTable toolbar wraps instead of overflowing on narrow viewports", () => {
+  test("toolbar container and toolbarEnd wrapper both allow wrapping", () => {
+    render(
+      <DataTable
+        columns={[]}
+        rows={[]}
+        testId="tbl"
+        toolbarStart={<div>search</div>}
+        toolbarEnd={<Button testId="tbl-action">Action</Button>}
+      />,
+    );
+
+    const toolbar = screen.getByTestId("tbl-toolbar");
+    expect(toolbar.className).toContain("flex-wrap");
+
+    const actionButton = screen.getByTestId("tbl-action");
+    const toolbarEndWrapper = actionButton.parentElement;
+    expect(toolbarEndWrapper).not.toBeNull();
+    expect(toolbarEndWrapper?.className).toContain("flex-wrap");
+    expect(toolbarEndWrapper?.parentElement).toBe(toolbar);
+  });
+});

package/src/primitives/index.tsx

@@ -110,7 +110,7 @@ import {
 import { EmbeddedListInput } from "./embedded-list-input";
 import { FileUploadInput } from "./file-upload";
 import { DefaultJsonView } from "./json-view";
-import { screenWidthClassName } from "./layout";
+import { screenPaddingClassName, screenWidthClassName } from "./layout";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { DefaultMetric } from "./metric";
@@ -1238,12 +1238,12 @@ function DefaultDataTable({
       {hasToolbar && (
         <div
           data-testid={testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar"}
-          className="flex items-center gap-3"
+          className="flex flex-wrap items-center gap-3"
         >
           {toolbarStart !== undefined && <div className="flex-1 max-w-sm">{toolbarStart}</div>}
           {facetCluster}
           {toolbarEnd !== undefined && (
-            <div className="flex items-center gap-2 ml-auto">{toolbarEnd}</div>
+            <div className="flex flex-wrap items-center gap-2 ml-auto">{toolbarEnd}</div>
           )}
         </div>
       )}
@@ -2261,7 +2261,7 @@ export function FormScreenShell({
   return (
     <div
       data-testid={testId}
-      className={cn("px-6 pt-6 pb-12 w-full", screenWidthClassName[width], className)}
+      className={cn(screenPaddingClassName, "w-full", screenWidthClassName[width], className)}
     >
       {children}
     </div>

package/src/primitives/layout.tsx

@@ -1,5 +1,5 @@
 // Layout primitives for custom screens: one place for vertical spacing and
-// screen padding, so consumers don't hand-roll `flex flex-col gap-*` / `p-6`.
+// screen padding, so consumers don't hand-roll `flex flex-col gap-*` / screen insets.
 // Deliberately thin — not a generic box-with-20-props system.
 
 import type { FormWidth } from "@cosmicdrift/kumiko-renderer";
@@ -17,6 +17,12 @@ export const screenWidthClassName: Record<ScreenWidth, string> = {
   full: "max-w-full",
 };
 
+// Shared screen padding for both screen containers (PageSection and
+// FormScreenShell). The wider bottom inset keeps the last field or table row
+// off the viewport edge; applying it everywhere makes footer spacing
+// independent of the screen type (fw#2640).
+export const screenPaddingClassName = "px-6 pt-6 pb-12";
+
 const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" } as const;
 
 type StackGap = keyof typeof STACK_GAP;
@@ -50,7 +56,10 @@ export function PageSection({
   maxWidth = "full",
 }: PageSectionProps): ReactNode {
   return (
-    <div data-testid={testId} className={cn("p-6", screenWidthClassName[maxWidth], className)}>
+    <div
+      data-testid={testId}
+      className={cn(screenPaddingClassName, screenWidthClassName[maxWidth], className)}
+    >
       {children}
     </div>
   );