@cosmicdrift/kumiko-renderer-web 0.243.2 → 0.243.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.243.2",
+  "version": "0.243.4",
   "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.2",
-    "@cosmicdrift/kumiko-headless": "0.243.2",
-    "@cosmicdrift/kumiko-renderer": "0.243.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.243.4",
+    "@cosmicdrift/kumiko-headless": "0.243.4",
+    "@cosmicdrift/kumiko-renderer": "0.243.4",
     "@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.2"
+    "@cosmicdrift/kumiko-locale-de": "0.243.4"
   },
   "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__/projection-detail.test.tsx

@@ -6,16 +6,36 @@
 //   - 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 { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
+import type {
+  ExtensionSectionProps,
+  FeatureSchema,
+  NavApi,
+  NavTarget,
+} from "@cosmicdrift/kumiko-renderer";
 import {
   DispatcherProvider,
   ExtensionSectionsProvider,
   KumikoScreen,
   NavProvider,
+  useDispatcher,
+  usePrimitives,
 } from "@cosmicdrift/kumiko-renderer";
-import { act, createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+import type { ReactNode } from "react";
+import { BareFormProvider } from "../primitives";
+import {
+  act,
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "./test-utils";
 
 const detailScreen: ProjectionDetailScreenDefinition = {
   id: "session-detail",
@@ -613,3 +633,293 @@ describe("KumikoScreen / projectionDetail extension section (solon#264)", () =>
     expect(screen.queryByTestId("field-userId")).toBeNull();
   });
 });
+
+// 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/
+// ChangePasswordSection used before fw#2703 via BareFormProvider — used to
+// produce two nested <form> elements, invalid DOM that let real browsers
+// silently degrade the inner submit into a native GET navigation of the
+// OUTER form (offlot-app e2e, currentPassword leaked into the URL). fw#2705
+// fixes the cause in DefaultForm (primitives/index.tsx): it degrades to a
+// <div> whenever InsideFormContext says it is already nested in a form, and
+// intercepts a click on its own submit button (onClickCapture +
+// preventDefault) instead of relying on the browser to associate the button
+// with a form. The tests below assert that structurally (exactly one
+// <form>) and prove the degraded section's own submit still reaches its
+// dispatcher, without depending on the button-to-form association the
+// removed nested <form> used to rely on.
+describe("KumikoScreen / projectionDetail extension section with its own <form> (fw#2312/fw#2705 nested-form regression)", () => {
+  function FormExtensionSection({ entityId }: ExtensionSectionProps): ReactNode {
+    const dispatcher = useDispatcher();
+    const { Form, Button } = usePrimitives();
+    const onSubmit = (): void => {
+      void dispatcher.write("sessions:write:user-session:update", {
+        id: entityId,
+        note: "updated",
+      });
+    };
+    return (
+      <BareFormProvider>
+        <Form
+          testId="nested-section-form"
+          onSubmit={onSubmit}
+          actions={
+            <Button type="submit" testId="nested-section-submit">
+              Save note
+            </Button>
+          }
+        >
+          <div data-testid="nested-section-marker" />
+        </Form>
+      </BareFormProvider>
+    );
+  }
+
+  test("mounted through KumikoScreen -> ProjectionDetailBody -> RenderEdit, the section's own form degrades to a <div> so only one <form> lands in the DOM", async () => {
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const { container } = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-form"));
+    // Structural proof of the fix: RenderEdit renders one
+    // <form testId="render-edit-form"> around the whole screen. The
+    // nested section's own <Form> (still wrapped in BareFormProvider) must
+    // degrade to a <div> (FormRoot, primitives/index.tsx) instead of
+    // adding a second <form>.
+    expect(container.querySelectorAll("form")).toHaveLength(1);
+  });
+
+  test("clicking the nested section's own submit button dispatches its write, even though FormRoot degraded its <Form> to a <div>", async () => {
+    const writes: Array<{ type: string; payload: unknown }> = [];
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+      write: (async (type: string, payload: unknown) => {
+        writes.push({ type, payload });
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-submit"));
+    fireEvent.click(screen.getByTestId("nested-section-submit"));
+
+    await waitFor(() => {
+      if (writes.length === 0) throw new Error("no write dispatched yet");
+    });
+    expect(writes[0]).toEqual({
+      type: "sessions:write:user-session:update",
+      payload: { id: "sess-1", note: "updated" },
+    });
+  });
+
+  // Complements the dispatch test above: with the section's own <Form>
+  // degraded to a <div>, its submit button sits inside the SAME real <form>
+  // as render-edit-form. Without FormRoot's onClickCapture + preventDefault,
+  // activating that type="submit" button would fire the OUTER form's native
+  // submit instead of routing to the section's onSubmit — the exact fw#2705
+  // hazard the nested-<form> version produced, just surfacing here as a
+  // wrong dispatch target rather than a URL GET (the dispatch test above
+  // cannot tell the two apart: RenderEdit's own handleSubmit is a no-op for
+  // this readOnly projectionDetail screen either way).
+  test("clicking the nested section's own submit button does not also fire a native submit on the outer host <form>", async () => {
+    const extensionScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          ...detailScreen.layout.sections,
+          {
+            kind: "extension",
+            title: "Note",
+            component: { react: { __component: "FormExtensionSection" } },
+            entityName: "user-session",
+          },
+        ],
+      },
+    };
+    const extensionSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [extensionScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const { container } = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ FormExtensionSection }}>
+          <KumikoScreen
+            schema={extensionSchema}
+            qn="sessions:screen:session-detail"
+            entityId="sess-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("nested-section-submit"));
+    const outerForm = container.querySelector('[data-testid="render-edit-form"]');
+    expect(outerForm).not.toBeNull();
+    let outerSubmitFired = false;
+    outerForm?.addEventListener("submit", () => {
+      outerSubmitFired = true;
+    });
+
+    fireEvent.click(screen.getByTestId("nested-section-submit"));
+
+    expect(outerSubmitFired).toBe(false);
+  });
+});

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

@@ -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>
       )}
@@ -2063,6 +2063,59 @@ export function ScreenWidthProvider({
   return <ScreenWidthContext.Provider value={width}>{children}</ScreenWidthContext.Provider>;
 }
 
+// Extension sections that render their own <form> via BareFormProvider
+// (legacy custom-form pattern, e.g. ChangeEmailSection before fw#2703) land
+// inside RenderEdit's host <form> (ExtensionSectionMount, render-edit.tsx) —
+// nested <form> elements are invalid DOM, and real browsers can silently
+// fall back to a native GET submit of the OUTER form, leaking field values
+// into the URL (fw#2312, fw#2705). Degrading to a <div> when already inside
+// a form avoids the nesting; the captured click still routes to THIS form's
+// onSubmit instead of activating the real ancestor <form>.
+function FormRoot({
+  onSubmit,
+  testId,
+  className,
+  children,
+}: {
+  readonly onSubmit: FormProps["onSubmit"];
+  readonly testId?: string;
+  readonly className?: string;
+  readonly children: ReactNode;
+}): ReactNode {
+  if (useContext(InsideFormContext)) {
+    return (
+      <div
+        onClickCapture={(e) => {
+          // @cast-boundary dom-event-target: closest() needs an Element, and
+          // click targets are always one in the browser/happy-dom.
+          const submitButton = (e.target as HTMLElement).closest(
+            "button[type=submit], button:not([type])",
+          );
+          if (submitButton === null) return;
+          e.preventDefault();
+          onSubmit();
+        }}
+        data-testid={testId}
+        className={className}
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit(e);
+      }}
+      data-testid={testId}
+      className={className}
+    >
+      {children}
+    </form>
+  );
+}
+
 function DefaultForm({
   onSubmit,
   children,
@@ -2079,12 +2132,9 @@ function DefaultForm({
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
   if (useContext(BareFormContext)) {
     return (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          onSubmit(e);
-        }}
-        data-testid={testId}
+      <FormRoot
+        onSubmit={onSubmit}
+        testId={testId}
         className={cn(
           "flex flex-col gap-4",
           // Bare forms stack sections without a card; without a divider a
@@ -2099,7 +2149,7 @@ function DefaultForm({
             {actions}
           </div>
         )}
-      </form>
+      </FormRoot>
     );
   }
 
@@ -2107,14 +2157,7 @@ function DefaultForm({
   // between each other, muted action footer. Shell width defaults to full
   // (same chrome as lists); pass width to narrow (auth-adjacent / dense).
   return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSubmit(e);
-      }}
-      data-testid={testId}
-      className="flex flex-col w-full"
-    >
+    <FormRoot onSubmit={onSubmit} testId={testId} className="flex flex-col w-full">
       <FormScreenShell {...(width !== undefined && { maxWidth: width })}>
         {headerRegion !== undefined && (
           <div className="flex flex-col gap-6 mb-8">{headerRegion}</div>
@@ -2191,7 +2234,7 @@ function DefaultForm({
           )}
         </div>
       </FormScreenShell>
-    </form>
+    </FormRoot>
   );
 }