@cosmicdrift/kumiko-renderer-web 0.219.0 → 0.220.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.219.0",
+  "version": "0.220.1",
   "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.219.0",
-    "@cosmicdrift/kumiko-headless": "0.219.0",
-    "@cosmicdrift/kumiko-renderer": "0.219.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.220.1",
+    "@cosmicdrift/kumiko-headless": "0.220.1",
+    "@cosmicdrift/kumiko-renderer": "0.220.1",
     "@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.219.0"
+    "@cosmicdrift/kumiko-locale-de": "0.220.1"
   },
   "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

@@ -673,8 +673,8 @@ function DefaultDataTable({
   // scrollen typischerweise mit dem Page-Container, nicht intern.
   // Sticky würde mit der Topbar konkurrieren.
   const hasTableActions = rowActions !== undefined && rowActions.length > 0;
-  const tableContent =
-    rows.length === 0 ? (
+  function tableInner(): ReactNode {
+    return rows.length === 0 ? (
       <div
         data-testid={testId !== undefined ? `${testId}-empty` : "render-list-empty"}
         className="flex flex-col items-center justify-center rounded-md border border-dashed p-12 text-sm text-muted-foreground gap-3"
@@ -777,6 +777,8 @@ function DefaultDataTable({
         </Table>
       </div>
     );
+  }
+  const tableContent = tableInner();
 
   // Pager wird IMMER unter der Tabelle gerendert (auch bei rows=[]),
   // damit der User bei einem Filter-Hit-of-Zero zurückblättern kann
@@ -1620,13 +1622,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,17 +1696,13 @@ 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> = {
-  sm: "max-w-sm mx-auto",
   "3xl": "max-w-3xl mx-auto",
   "4xl": "max-w-4xl mx-auto",
   full: "max-w-full",
@@ -1718,7 +1712,7 @@ export function FormScreenShell({
   children,
   className,
   testId,
-  maxWidth = "3xl",
+  maxWidth = "full",
 }: {
   readonly children: ReactNode;
   readonly className?: string;

package/src/widgets/infinity-list.tsx

@@ -20,12 +20,6 @@ export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, un
   /** Must derive from row content (e.g. `row.id`), not from `index` — a
    *  live refresh reorders rows (new/changed rows move to the front). */
   readonly rowId: (row: TRow, index: number) => string;
-  /** Pass this when `rowId` depends on list position — the live-merge path
-   *  needs a position-independent identity. Without it, an index-based
-   *  `rowId` (legitimate when live-merge isn't used) can collide between
-   *  the freshly-fetched first page's local indices and the accumulated
-   *  list's indices, silently dropping an unrelated mid-list row on merge. */
-  readonly rowKey?: (row: TRow) => string;
   readonly renderRow: (row: TRow) => ReactNode;
   readonly emptyState?: ReactNode;
   readonly className?: string;
@@ -55,7 +49,6 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   rows,
   nextCursor,
   rowId,
-  rowKey,
   renderRow,
   emptyState,
   className,
@@ -80,16 +73,6 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   nextCursorRef.current = nextCursor;
   const rowIdRef = useRef(rowId);
   rowIdRef.current = rowId;
-  const rowKeyRef = useRef(rowKey);
-  rowKeyRef.current = rowKey;
-  // Position-independent when rowKey is supplied, otherwise falls back to
-  // the (possibly position-dependent) rowId — same identity function used
-  // for both sides of the live-merge diff below so a position-based rowId
-  // can no longer collide across the fresh page's local indices and the
-  // accumulated list's indices (fw#1829).
-  const identifyRef = useRef((row: TRow, index: number): string =>
-    rowKeyRef.current !== undefined ? rowKeyRef.current(row) : rowIdRef.current(row, index),
-  );
 
   // Discards a response whose request was superseded by a newer one before
   // it resolved (e.g. two searches fired in quick succession) — without
@@ -121,9 +104,8 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
       if (cursor === null) {
         // Same identity as refreshFirstPage's freshIds/staleRows diff below
         // — this ref is what that diff's previousFirstPageIds reads, so it
-        // must agree on rowKey vs rowId or the two id spaces never overlap.
         firstPageIdsRef.current = new Set(
-          nextRows.map((row, index) => identifyRef.current(row, index)),
+          nextRows.map((row, index) => rowIdRef.current(row, index)),
         );
       }
       setState((prev) => {
@@ -174,7 +156,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     // skip: background live refresh failed, keep showing the current rows
     if (!res.isSuccess) return;
     const freshRows = rowsRef.current(res.data);
-    const freshIds = new Set(freshRows.map((row, index) => identifyRef.current(row, index)));
+    const freshIds = new Set(freshRows.map((row, index) => rowIdRef.current(row, index)));
     // A row absent from freshIds is stale for one of two reasons: it was
     // dropped from page 1 (deleted, or filtered out elsewhere) and must be
     // pruned, or it belongs to an already-accumulated later page and must
@@ -194,7 +176,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
         return { kind: "ready", rows: freshRows, cursor: nextCursorRef.current(res.data) };
       }
       const staleRows = prev.rows.filter((row, index) => {
-        const id = identifyRef.current(row, index);
+        const id = rowIdRef.current(row, index);
         return !freshIds.has(id) && !previousFirstPageIds.has(id);
       });
       return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };