@cosmicdrift/kumiko-renderer-web 0.218.0 → 0.220.0

package/package.json

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

package/src/__tests__/form-action-bar.test.tsx

@@ -24,8 +24,8 @@ describe("DefaultForm Action-Footer", () => {
     const actions = screen.getByTestId("f-actions");
     expect(actions.className).toContain("justify-end");
     expect(actions.className).toContain("border-t");
-    // Footer liegt im max-w-3xl-Form-Body (Buttons enden an der Feld-Linie).
-    expect(actions.closest(".max-w-3xl")).toBeTruthy();
+    // Footer sits in the form shell (buttons align with the field edge).
+    expect(actions.closest(".max-w-full")).toBeTruthy();
     // Titel ist ein eigenes Heading oben, NICHT mehr in der Action-Bar.
     expect(actions.textContent).not.toContain("Titel");
     expect(screen.getByTestId("f-title").textContent).toBe("Titel");

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

@@ -1570,8 +1570,8 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]?.payload).toEqual({ title: "New Task", priority: 1 });
   });
 
-  test("actionForm mit redirect: nach success → nav.navigate({screenId: redirect})", async () => {
-    const navigateCalls: { screenId: string }[] = [];
+  test("actionForm mit redirect: nach success → nav.navigate({screenId: redirect, entityId})", async () => {
+    const navigateCalls: NavTarget[] = [];
     const dispatcher = makeDispatcher({
       write: (async () => ({
         isSuccess: true,
@@ -1613,11 +1613,13 @@ describe("KumikoScreen", () => {
     fireEvent.change(titleInput, { target: { value: "go" } });
     fireEvent.click(screen.getByTestId("render-edit-submit"));
     await waitFor(() => expect(navigateCalls.length).toBe(1));
-    expect(navigateCalls[0]).toEqual({ screenId: "task-list" });
+    // #2416: the handler returns a created id (`{ id: "x" }`) — it must land
+    // on the navigate as entityId, same as entityEdit-create.
+    expect(navigateCalls[0]).toEqual({ screenId: "task-list", entityId: "x" });
   });
 
   test("actionForm mit Cross-Feature-QN als redirect: navigiert per Short-Id (#1946)", async () => {
-    const navigateCalls: { screenId: string }[] = [];
+    const navigateCalls: NavTarget[] = [];
     const dispatcher = makeDispatcher({
       write: (async () => ({
         isSuccess: true,
@@ -1659,7 +1661,59 @@ describe("KumikoScreen", () => {
     fireEvent.change(titleInput, { target: { value: "go" } });
     fireEvent.click(screen.getByTestId("render-edit-submit"));
     await waitFor(() => expect(navigateCalls.length).toBe(1));
-    expect(navigateCalls[0]).toEqual({ screenId: "statement-upload-list" });
+    expect(navigateCalls[0]).toEqual({ screenId: "statement-upload-list", entityId: "x" });
+  });
+
+  // #2416: entityEdit-create passes the newly created record's id through to
+  // the post-submit navigate as `entityId` (extractCreatedId); actionForm's
+  // redirect did the same navigate but never extracted the id. The with-id
+  // case is covered by the actionForm redirect success test above (now
+  // asserting entityId); this pins the back-compat guarantee.
+  test("actionForm mit redirect: Handler-Result ohne id → navigate ohne entityId-Key (Rückwärtskompatibilität, #2416)", async () => {
+    const navigateCalls: NavTarget[] = [];
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: {},
+      })) as unknown as Dispatcher["write"],
+    });
+    const memoryNav = {
+      route: { screenId: "quick-add" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      redirect: "task-list",
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen, listScreen] }}
+            qn="tasks:screen:quick-add"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "go" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    await waitFor(() => expect(navigateCalls.length).toBe(1));
+    expect(navigateCalls[0]).toEqual({ screenId: "task-list" });
+    expect(Object.hasOwn(navigateCalls[0] ?? {}, "entityId")).toBe(false);
   });
 
   // cancelTarget (Bug-Bash 2026-06-07, Bug 9): redirect erzeugte

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

@@ -283,7 +283,7 @@ describe("RenderEdit", () => {
     expect(seenResults[0]?.isSuccess).toBe(true);
   });
 
-  test("layout.width defaults the form shell to max-w-3xl when unset", () => {
+  test("layout.width defaults the form shell to max-w-full when unset", () => {
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>
         <RenderEdit<TestValues>
@@ -297,16 +297,16 @@ describe("RenderEdit", () => {
     );
 
     const shell = screen.getByTestId("render-edit-form").firstElementChild;
-    expect(shell?.className).toContain("max-w-3xl");
-    expect(shell?.className).not.toContain("max-w-full");
+    expect(shell?.className).toContain("max-w-full");
+    expect(shell?.className).not.toContain("max-w-3xl");
   });
 
-  test("layout.width: 'full' widens the form shell to max-w-full (#1676)", () => {
+  test("layout.width: '3xl' narrows the form shell when set", () => {
     const screenDef = makeScreen();
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>
         <RenderEdit<TestValues>
-          screen={{ ...screenDef, layout: { ...screenDef.layout, width: "full" } }}
+          screen={{ ...screenDef, layout: { ...screenDef.layout, width: "3xl" } }}
           entity={orderEntity}
           featureName="orders"
           initial={{ title: "", count: 0, isUrgent: false }}
@@ -316,8 +316,8 @@ describe("RenderEdit", () => {
     );
 
     const shell = screen.getByTestId("render-edit-form").firstElementChild;
-    expect(shell?.className).toContain("max-w-full");
-    expect(shell?.className).not.toContain("max-w-3xl");
+    expect(shell?.className).toContain("max-w-3xl");
+    expect(shell?.className).not.toContain("max-w-full");
   });
 
   test("title resolved aus i18n-Key `screen:<id>.title` mit screenId als Fallback", () => {

package/src/primitives/index.tsx

@@ -1620,13 +1620,9 @@ function DefaultForm({
     );
   }
 
-  // shadcn-Form-Muster: das Formular ist EINE Card — Titel als Card-Header
-  // OHNE Trennlinie darunter (Titel fließt in die erste Section). Sections
-  // sind divide-y-getrennt (Linien nur ZWISCHEN ihnen). Action-Footer mit
-  // bg-muted/30 als Farb-Trenner statt harter Linie. main hat kein Padding;
-  // der max-w-3xl-Body rahmt die Card, mx-auto zentriert ihn im Main statt
-  // linksbündig (sonst „eingesperrt" mit leerer rechter Hälfte auf breiten
-  // Screens).
+  // One card form: title as header (no divider under it), sections divided
+  // between each other, muted action footer. Shell width defaults to full
+  // (same chrome as lists); pass width to narrow (auth-adjacent / dense).
   return (
     <form
       onSubmit={(e) => {
@@ -1698,13 +1694,10 @@ function DefaultForm({
   );
 }
 
-// Kanonische Form/Settings-Shell: zentrierte Spalte mit Standard-Screen-
-// Padding. DefaultForm (configEdit/entityEdit) UND custom Settings-Screens
-// (url-settings, privacy-center) teilen sie → einheitliche Breite +
-// Zentrierung statt per-Screen-Wildwuchs. Breite über `maxWidth`-Intent statt
-// beliebiger max-w-*-Overrides: sm=schmale Auth-Forms, 3xl=Standard-Detail,
-// 4xl=tabellen-nahe Forms, full=volle Breite. Inhalt nutzt Card-Primitives;
-// `className` (z.B. "flex flex-col gap-6") für Multi-Card-Stacks.
+// Canonical form/settings shell shared by DefaultForm (configEdit/entityEdit)
+// and custom settings screens (profile, privacy-center). Default width matches
+// list chrome (full); override via maxWidth / layout.width when a screen
+// truly needs a narrow column (sm=auth-adjacent, 3xl/4xl=centered detail).
 export type FormScreenShellWidth = FormWidth;
 
 const formScreenShellWidth: Record<FormScreenShellWidth, string> = {
@@ -1718,7 +1711,7 @@ export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "3xl",
+  maxWidth = "full",
 }: {
   readonly children: ReactNode;
   readonly className?: string;