@cosmicdrift/kumiko-renderer-web 0.259.0 → 0.260.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.259.0",
+  "version": "0.260.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.259.0",
-    "@cosmicdrift/kumiko-headless": "0.259.0",
-    "@cosmicdrift/kumiko-renderer": "0.259.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.260.0",
+    "@cosmicdrift/kumiko-headless": "0.260.0",
+    "@cosmicdrift/kumiko-renderer": "0.260.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.259.0"
+    "@cosmicdrift/kumiko-locale-de": "0.260.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/entity-edit-redirect.test.tsx

@@ -42,6 +42,44 @@ function buildSchema(redirect?: string): FeatureSchema {
   } as FeatureSchema;
 }
 
+// The edited "product" stands in for a child record (a deposit movement's
+// deposit, a protocol section's protocol) — a "parent-detail" entityEdit
+// screen is the redirect target, and parentEntity's own field carries the
+// parent id.
+const parentEntity: EntityDefinition = {
+  fields: {
+    name: { type: "text", required: false, searchable: false, sortable: false },
+    parentId: { type: "text", required: false, searchable: false, sortable: false },
+  },
+};
+
+function buildParentRedirectSchema(): FeatureSchema {
+  const editScreen: ScreenDefinition = {
+    id: "product-edit",
+    type: "entityEdit",
+    entity: "product",
+    layout: { sections: [{ fields: ["name"] }] },
+    redirect: { screen: "parent-detail", idFrom: "parentId" },
+  };
+  const parentDetailScreen: ScreenDefinition = {
+    id: "parent-detail",
+    type: "entityEdit",
+    entity: "product",
+    layout: { sections: [{ fields: ["name"] }] },
+  };
+  const listScreen: ScreenDefinition = {
+    id: "product-list",
+    type: "entityList",
+    entity: "product",
+    columns: ["name"],
+  };
+  return {
+    featureName: "shop",
+    entities: { product: parentEntity },
+    screens: [editScreen, parentDetailScreen, listScreen],
+  } as FeatureSchema;
+}
+
 function fillNameAndSubmit(): void {
   const nameInput = screen.getByTestId("field-name").querySelector("input") as HTMLInputElement;
   fireEvent.change(nameInput, { target: { value: "Widget" } });
@@ -306,4 +344,124 @@ describe("entityEdit redirect (#1942)", () => {
 
     await waitFor(() => expect(navigated).toEqual([{ screenId: "product-list" }]));
   });
+
+  // entityEdit's redirect object form + idFrom — same resolution as
+  // actionForm's, reused by EntityEditUpdateForm's handleSubmitted.
+  test("update: redirect object form with idFrom falls back to the loaded record when the payload lacks the field", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing", parentId: "parent-1" },
+      })) as unknown as Dispatcher["query"],
+      // The update handler's success payload reports only its own id
+      // (event-store-executor-write.ts) — no "parentId" field.
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "42" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildParentRedirectSchema()}
+            qn="shop:screen:product-edit"
+            entityId="42"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    fillNameAndSubmit();
+
+    await waitFor(() =>
+      expect(navigated).toEqual([{ screenId: "parent-detail", entityId: "parent-1" }]),
+    );
+  });
+
+  test("update: redirect object form with idFrom prefers the payload value over the loaded record", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing", parentId: "record-parent" },
+      })) as unknown as Dispatcher["query"],
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "42", parentId: "payload-parent" },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildParentRedirectSchema()}
+            qn="shop:screen:product-edit"
+            entityId="42"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    fillNameAndSubmit();
+
+    await waitFor(() =>
+      expect(navigated).toEqual([{ screenId: "parent-detail", entityId: "payload-parent" }]),
+    );
+  });
+
+  test("create: redirect object form with idFrom reads the id from the write handler's payload", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-1", parentId: "parent-1" },
+      })) as unknown as Dispatcher["write"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen schema={buildParentRedirectSchema()} qn="shop:screen:product-edit" />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    fillNameAndSubmit();
+
+    await waitFor(() =>
+      expect(navigated).toEqual([{ screenId: "parent-detail", entityId: "parent-1" }]),
+    );
+  });
 });

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

@@ -1911,6 +1911,40 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]?.payload).toEqual({ title: "New Task", priority: 1 });
   });
 
+  // slots.header/footer on entityEdit are shared through action-form-shim's
+  // synthesizeActionFormScreen — an actionForm mounts them the same way.
+  test("actionForm: slots.header and slots.footer both render (fw#2853)", async () => {
+    const TopBanner = () => <div data-testid="action-form-header-slot">top banner</div>;
+    const BottomAction = () => <button type="button" data-testid="action-form-footer-slot" />;
+
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add-slots",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+      slots: {
+        header: { react: { __component: "TopBanner" } },
+        footer: { react: { __component: "BottomAction" } },
+      },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ TopBanner, BottomAction }}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen] }}
+            qn="tasks:screen:quick-add-slots"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("action-form-header-slot")).toBeTruthy();
+    expect(screen.getByTestId("action-form-footer-slot")).toBeTruthy();
+    expect(screen.getByTestId("render-edit-submit")).toBeTruthy();
+  });
+
   // fw#2752: actionForm submitStyle reaches the submit button.
   test("actionForm submitStyle='danger': submit button renders destructive variant", async () => {
     const dispatcher = makeDispatcher({

package/src/__tests__/primitives.test.tsx

@@ -404,7 +404,7 @@ describe("DataTable", () => {
         />
       </LocaleProvider>,
     );
-    expect(screen.getByTestId("t-empty").textContent).toBe("Keine Einträge.");
+    expect(screen.getByTestId("t-empty").textContent).toBe("Noch keine Einträge.");
   });
 
   test("rows + cells get individual testIds for E2E hooks", () => {

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

@@ -79,6 +79,31 @@ describe("KumikoScreen / projectionDetail — record header + metrics band", ()
     expect(screen.getByTestId("kumiko-screen-projection-detail-status").textContent).toBe("active");
   });
 
+  test("status sits in the title row; the subtitle sits in its own row below", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", subtitle: "address", status: "state" },
+    };
+    const dispatcher = dispatcherReturning(rowData);
+
+    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 title = screen.getByTestId("kumiko-screen-projection-detail-title");
+    const status = screen.getByTestId("kumiko-screen-projection-detail-status");
+    const subtitle = screen.getByTestId("kumiko-screen-projection-detail-subtitle");
+    expect(status.parentElement).toBe(title.parentElement);
+    expect(subtitle.parentElement).not.toBe(title.parentElement);
+  });
+
   test("renders the metrics band with fieldLabels-translated labels and query-row values", async () => {
     const metricsScreen: ProjectionDetailScreenDefinition = {
       ...baseScreen,
@@ -158,6 +183,92 @@ describe("KumikoScreen / projectionDetail — record header + metrics band", ()
     expect(setSearchParamsCalls).toContainEqual({ overdueDays: "3" });
   });
 
+  test("metric.navigate with only tab — clicking stays on the record and just activates the tab", 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.balance",
+          navigate: { tab: "history" },
+        },
+      ],
+    };
+    const dispatcher = dispatcherReturning(rowData);
+    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"));
+    await user.click(screen.getByTestId("kumiko-screen-projection-detail-metric-balance"));
+
+    expect(navigateCalls).toEqual([]);
+    expect(setSearchParamsCalls).toContainEqual({ tab: "history" });
+  });
+
+  test("metric.navigate with screen + tab — navigates to the screen and sets the tab search param", 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.balance",
+          navigate: { screen: "tenant-detail", tab: "history" },
+        },
+      ],
+    };
+    const dispatcher = dispatcherReturning(rowData);
+    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"));
+    await user.click(screen.getByTestId("kumiko-screen-projection-detail-metric-balance"));
+
+    expect(navigateCalls).toEqual([{ screenId: "tenant-detail" }]);
+    expect(setSearchParamsCalls).toContainEqual({ tab: "history" });
+  });
+
   test("header.subtitleHref — an absolute http(s) URL renders the subtitle as an external link", async () => {
     const headerScreen: ProjectionDetailScreenDefinition = {
       ...baseScreen,

package/src/__tests__/render-edit.test.tsx

@@ -3537,3 +3537,333 @@ describe("RenderEdit fields filter", () => {
     expect(write).not.toHaveBeenCalled();
   });
 });
+
+describe("RenderEdit — slots.header", () => {
+  function HeaderExtra({ entityId }: { readonly entityId: string | null }): ReactNode {
+    return (
+      <div data-testid="header-extra" data-entity-id={entityId ?? "(create)"}>
+        header extra
+      </div>
+    );
+  }
+
+  function makeHeaderScreen(): EntityEditScreenDefinition {
+    return {
+      id: "orders:screen:order-edit-header",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [{ title: "Basics", columns: 1, fields: [{ field: "title" }] }],
+      },
+      slots: { header: { react: { __component: "HeaderExtra" } } },
+    };
+  }
+
+  function makeWizardHeaderScreen(): EntityEditScreenDefinition {
+    return {
+      id: "orders:screen:order-wizard-header",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        mode: "wizard",
+        sections: [
+          { title: "Basics", columns: 1, fields: [{ field: "title" }] },
+          { title: "Details", columns: 1, fields: [{ field: "count" }] },
+        ],
+      },
+      slots: { header: { react: { __component: "HeaderExtra" } } },
+    };
+  }
+
+  test("header slot renders above the section content, not in the actions container", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ HeaderExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeHeaderScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    const header = screen.getByTestId("header-extra");
+    const field = screen.getByTestId("field-title");
+    expect(Boolean(header.compareDocumentPosition(field) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(
+      true,
+    );
+    expect(header.getAttribute("data-entity-id")).toBe("order-1");
+    expect(
+      screen.getByTestId("render-edit-form-actions").querySelector('[data-testid="header-extra"]'),
+    ).toBeNull();
+  });
+
+  test("header slot stays visible across wizard steps", async () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ HeaderExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeWizardHeaderScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0 }}
+            writeCommand="order:create"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("header-extra")).toBeTruthy();
+
+    const form = screen.getByTestId("render-edit-form");
+    await act(async () => {
+      fireEvent.submit(form);
+      await Promise.resolve();
+    });
+
+    expect(screen.getByTestId("header-extra")).toBeTruthy();
+  });
+
+  test("header slot renders before a caller-supplied headerRegion", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ HeaderExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeHeaderScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+            headerRegion={<div data-testid="host-header-region">host header</div>}
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    const header = screen.getByTestId("header-extra");
+    const hostRegion = screen.getByTestId("host-header-region");
+    expect(
+      Boolean(header.compareDocumentPosition(hostRegion) & Node.DOCUMENT_POSITION_FOLLOWING),
+    ).toBe(true);
+  });
+});
+
+describe("RenderEdit — slots.footer", () => {
+  function FooterExtra({
+    entityId,
+    hasUnsavedChanges,
+    wizardStep,
+  }: {
+    readonly entityId: string | null;
+    readonly hasUnsavedChanges?: boolean;
+    readonly wizardStep?: { readonly index: number; readonly isLast: boolean };
+  }): ReactNode {
+    return (
+      <button
+        type="button"
+        data-testid="footer-extra"
+        data-entity-id={entityId ?? "(create)"}
+        data-dirty={String(hasUnsavedChanges === true)}
+        data-step={wizardStep !== undefined ? String(wizardStep.index) : "undefined"}
+        data-last={wizardStep !== undefined ? String(wizardStep.isLast) : "undefined"}
+      >
+        extra
+      </button>
+    );
+  }
+
+  function makeFooterScreen(): EntityEditScreenDefinition {
+    return {
+      id: "orders:screen:order-edit-footer",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [{ title: "Basics", columns: 1, fields: [{ field: "title" }] }],
+      },
+      slots: { footer: { react: { __component: "FooterExtra" } } },
+    };
+  }
+
+  function makeWizardFooterScreen(): EntityEditScreenDefinition {
+    return {
+      id: "orders:screen:order-wizard-footer",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        mode: "wizard",
+        sections: [
+          { title: "Basics", columns: 1, fields: [{ field: "title" }] },
+          { title: "Details", columns: 1, fields: [{ field: "count" }] },
+        ],
+      },
+      slots: { footer: { react: { __component: "FooterExtra" } } },
+    };
+  }
+
+  test("renders inside the form actions container, before the submit button", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ FooterExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    const actions = screen.getByTestId("render-edit-form-actions");
+    const footer = within(actions).getByTestId("footer-extra");
+    const submit = within(actions).getByTestId("render-edit-submit");
+    expect(Boolean(footer.compareDocumentPosition(submit) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(
+      true,
+    );
+  });
+
+  test("hasUnsavedChanges starts false and flips true after a field change", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ FooterExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-dirty")).toBe("false");
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "Acme Corp" } });
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-dirty")).toBe("true");
+  });
+
+  test("entityId is passed through", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ FooterExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-77"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-entity-id")).toBe("order-77");
+  });
+
+  test("wizardStep reflects the current step and last-step flag, and advances on Next", async () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ FooterExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeWizardFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0 }}
+            writeCommand="order:create"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-step")).toBe("0");
+    expect(screen.getByTestId("footer-extra").getAttribute("data-last")).toBe("false");
+
+    const form = screen.getByTestId("render-edit-form");
+    await act(async () => {
+      fireEvent.submit(form);
+      await Promise.resolve();
+    });
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-step")).toBe("1");
+    expect(screen.getByTestId("footer-extra").getAttribute("data-last")).toBe("true");
+  });
+
+  test("wizardStep is undefined on a non-wizard form", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ FooterExtra }}>
+          <RenderEdit<TestValues>
+            screen={makeFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("footer-extra").getAttribute("data-step")).toBe("undefined");
+    expect(screen.getByTestId("footer-extra").getAttribute("data-last")).toBe("undefined");
+  });
+
+  test("a declared but unregistered footer slot renders nothing and does not crash; submit stays", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{}}>
+          <RenderEdit<TestValues>
+            screen={makeFooterScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Acme", count: 0, isUrgent: false }}
+            writeCommand="order:update"
+            entityId="order-1"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.queryByTestId("footer-extra")).toBeNull();
+    expect(screen.getByTestId("render-edit-submit")).toBeTruthy();
+  });
+
+  test("a screen without slots renders only the pre-existing actions (no extra element)", () => {
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-edit-no-footer",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [{ title: "Basics", columns: 1, fields: [{ field: "title" }] }],
+      },
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={screenDef}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0, isUrgent: false }}
+          writeCommand="order:update"
+          entityId="order-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    const actions = screen.getByTestId("render-edit-form-actions");
+    expect(actions.children.length).toBe(1);
+    expect(actions.children[0]?.getAttribute("data-testid")).toBe("render-edit-submit");
+  });
+});

package/src/primitives/__tests__/textarea-submit-shortcut.test.tsx

@@ -0,0 +1,71 @@
+// kumiko-screen-akte-bedienkonzept: Ctrl/Cmd+Enter submits a textarea
+// (InputProps.onSubmitShortcut) instead of inserting a newline. Plain Enter
+// keeps inserting a newline — asserted here via the keydown event's
+// defaultPrevented state, since fireEvent.keyDown does not itself simulate
+// the browser's native newline insertion.
+import { describe, expect, test } from "bun:test";
+import { fireEvent, render } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { Input } = defaultPrimitives;
+const noop = () => {};
+
+function renderTextarea(onSubmitShortcut?: () => void): HTMLTextAreaElement {
+  const { container } = render(
+    <Input
+      kind="textarea"
+      id="notes"
+      name="notes"
+      value=""
+      onChange={noop}
+      {...(onSubmitShortcut !== undefined && { onSubmitShortcut })}
+    />,
+  );
+  const textarea = container.querySelector("textarea");
+  if (textarea === null) throw new Error("no textarea rendered");
+  return textarea;
+}
+
+describe("textarea onSubmitShortcut (Ctrl/Cmd+Enter)", () => {
+  test("Ctrl+Enter calls onSubmitShortcut and prevents the default newline", () => {
+    let calls = 0;
+    const textarea = renderTextarea(() => {
+      calls += 1;
+    });
+    // fireEvent.keyDown returns the DOM dispatchEvent() result — false once
+    // preventDefault() was called on the (cancelable) event.
+    const notPrevented = fireEvent.keyDown(textarea, { key: "Enter", ctrlKey: true });
+    expect(calls).toBe(1);
+    expect(notPrevented).toBe(false);
+  });
+
+  test("Cmd+Enter (metaKey) calls onSubmitShortcut and prevents the default newline", () => {
+    let calls = 0;
+    const textarea = renderTextarea(() => {
+      calls += 1;
+    });
+    const notPrevented = fireEvent.keyDown(textarea, { key: "Enter", metaKey: true });
+    expect(calls).toBe(1);
+    expect(notPrevented).toBe(false);
+  });
+
+  test("plain Enter does not call onSubmitShortcut and leaves the newline insertion alone", () => {
+    let calls = 0;
+    const textarea = renderTextarea(() => {
+      calls += 1;
+    });
+    const notPrevented = fireEvent.keyDown(textarea, { key: "Enter" });
+    expect(calls).toBe(0);
+    expect(notPrevented).toBe(true);
+  });
+
+  test("without onSubmitShortcut, no aria-keyshortcuts is advertised", () => {
+    const textarea = renderTextarea();
+    expect(textarea.getAttribute("aria-keyshortcuts")).toBeNull();
+  });
+
+  test("with onSubmitShortcut, aria-keyshortcuts advertises both chords", () => {
+    const textarea = renderTextarea(() => {});
+    expect(textarea.getAttribute("aria-keyshortcuts")).toBe("Control+Enter Meta+Enter");
+  });
+});

package/src/primitives/index.tsx

@@ -814,6 +814,7 @@ function DefaultInput(props: InputProps): ReactNode {
       );
     case "textarea": {
       const rows = normalizedTextareaRows(props.rows);
+      const onSubmitShortcut = props.onSubmitShortcut;
       return (
         <Textarea
           {...common}
@@ -824,6 +825,14 @@ function DefaultInput(props: InputProps): ReactNode {
           className="resize-y"
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
           {...(rows !== undefined && { style: textareaMinHeight(rows) })}
+          {...(onSubmitShortcut !== undefined && {
+            "aria-keyshortcuts": "Control+Enter Meta+Enter",
+            onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => {
+              if (e.key !== "Enter" || !(e.metaKey || e.ctrlKey)) return;
+              e.preventDefault();
+              onSubmitShortcut();
+            },
+          })}
         />
       );
     }
@@ -2359,7 +2368,7 @@ function FormFooter({
       {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"
+          className="flex flex-wrap items-center gap-2 max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto"
         >
           {actions}
         </div>