@cosmicdrift/kumiko-renderer-web 0.195.0 → 0.196.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.195.0",
+  "version": "0.196.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.195.0",
-    "@cosmicdrift/kumiko-headless": "0.195.0",
-    "@cosmicdrift/kumiko-renderer": "0.195.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.196.0",
+    "@cosmicdrift/kumiko-headless": "0.196.0",
+    "@cosmicdrift/kumiko-renderer": "0.196.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

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

@@ -14,7 +14,7 @@ import {
   type RenderEditControls,
   useExtensionFormSubmit,
 } from "@cosmicdrift/kumiko-renderer";
-import { useState } from "react";
+import { type ReactNode, useCallback, useState } from "react";
 import { z } from "zod";
 import {
   act,
@@ -757,6 +757,55 @@ describe("RenderEdit — controlled mode (#1887)", () => {
     expect(controls?.getValues().count).toBe("Acme".length);
   });
 
+  // fw#1899: a caller that supplies onControlsReady only after this mount
+  // (e.g. `onControlsReady={ready ? handler : undefined}`) must still get
+  // delivered to for THIS mount — the effect's deps previously excluded
+  // onControlsReady itself, so it never re-ran once mounted without it.
+  test("onControlsReady delivers to a handler supplied after mount, not just at mount time", () => {
+    function Host(): ReactNode {
+      const [ready, setReady] = useState(false);
+      const [received, setReceived] = useState<RenderEditControls<TestValues> | undefined>(
+        undefined,
+      );
+      // Stable identity across renders, like a real caller's useCallback:
+      // an inline arrow here would change on every render and defeat the
+      // re-delivery guard's identity check, looping the effect.
+      const onControlsReady = useCallback((c: RenderEditControls<TestValues>) => {
+        setReceived(c);
+      }, []);
+      return (
+        <>
+          <button type="button" data-testid="make-ready" onClick={() => setReady(true)}>
+            ready
+          </button>
+          <div data-testid="received">{received !== undefined ? "yes" : "no"}</div>
+          <RenderEdit<TestValues>
+            screen={makeScreen()}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false }}
+            writeCommand="order:create"
+            {...(ready && { onControlsReady })}
+          />
+        </>
+      );
+    }
+
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <Host />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("received").textContent).toBe("no");
+
+    act(() => {
+      fireEvent.click(screen.getByTestId("make-ready"));
+    });
+
+    expect(screen.getByTestId("received").textContent).toBe("yes");
+  });
+
   test("controls.patch sets values from outside without losing edits already made in other fields", () => {
     let controls: RenderEditControls<TestValues> | undefined;
     render(
@@ -1230,6 +1279,122 @@ describe("RenderEdit wizard mode", () => {
     expect(screen.queryByTestId("field-title-errors")).toBeNull();
   });
 
+  // fw#1901: handleWizardNext used to validate every field in the section,
+  // including ones currently hidden by their own condition. A required
+  // field that only applies conditionally (e.g. a VAT id shown only for
+  // companies) must not permanently block "Next" while it's hidden. Note:
+  // form-controller.ts's runValidate() already excludes hidden-field
+  // issues from every validate() call via its own `hiddenFields` set
+  // (form-controller.ts:200), independent of scope; this test protects
+  // that existing guard, not the fieldNames narrowing added here.
+  test("Weiter is not blocked by a required field that's currently hidden by its own condition", async () => {
+    const companyEntity = {
+      fields: {
+        isCompany: { type: "boolean" },
+        vatId: { type: "text", required: true },
+        count: { type: "number" },
+      },
+    } as unknown as EntityDefinition;
+    const wizardScreen: EntityEditScreenDefinition = {
+      id: "orders:screen:order-wizard-conditional",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        mode: "wizard",
+        sections: [
+          {
+            title: "Basics",
+            columns: 1,
+            fields: [
+              "isCompany",
+              {
+                field: "vatId",
+                visible: { field: "isCompany", eq: true },
+                required: { field: "isCompany", eq: true },
+              },
+            ],
+          },
+          { title: "Details", columns: 1, fields: [{ field: "count" }] },
+        ],
+      },
+    };
+    // A schema that (realistically) doesn't special-case the conditional
+    // requirement itself — it's the FieldCondition's hidden-field exclusion
+    // that's supposed to keep this from blocking, not the schema.
+    const schema = z.object({ isCompany: z.boolean(), vatId: z.string().min(1) });
+
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit
+          screen={wizardScreen}
+          entity={companyEntity}
+          featureName="orders"
+          initial={{ isCompany: false, vatId: "", count: 0 } as never}
+          writeCommand="order:create"
+          schema={schema}
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.queryByTestId("field-vatId")).toBeNull();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("render-edit-wizard-next"));
+      await Promise.resolve();
+    });
+
+    expect(screen.getByTestId("field-count")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-wizard-next")).toBeNull();
+  });
+
+  // fw#1901: a section that's entirely hidden (every field in it currently
+  // condition-hidden) must not occupy its own wizard step — it would render
+  // empty and the step count/progress would include a step nobody can see.
+  test("a fully-hidden section is skipped in the wizard step count instead of rendering an empty step", async () => {
+    const wizardScreen: EntityEditScreenDefinition = {
+      id: "orders:screen:order-wizard-hidden-section",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        mode: "wizard",
+        sections: [
+          { title: "Basics", columns: 1, fields: [{ field: "title" }] },
+          {
+            title: "Company-only",
+            columns: 1,
+            fields: [{ field: "notes", visible: { field: "isUrgent", eq: true } }],
+          },
+          { title: "Details", columns: 1, fields: [{ field: "count" }] },
+        ],
+      },
+    };
+
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={wizardScreen}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    // Only 2 real steps (Basics, Details) — "Company-only" is entirely
+    // hidden (isUrgent is false) and must not count as a step.
+    expect(screen.getByTestId("render-edit-wizard-step-label").textContent).toContain("of 2");
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("render-edit-wizard-next"));
+      await Promise.resolve();
+    });
+
+    // Landed directly on Details, skipping the hidden "Company-only" step.
+    expect(screen.getByTestId("field-count")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-wizard-next")).toBeNull();
+  });
+
   // A server-side field error can land on a field belonging to a step the
   // user isn't currently viewing — the old `setFormError(fieldIssues.length
   // === 0 ? result.error : null)` rule suppressed the banner in that case
@@ -1605,6 +1770,62 @@ describe("RenderEdit wizard draft", () => {
     expect(calls).toContain("form-draft:write:discard");
   });
 
+  // fw#1978: payloadMode "changes" + an untouched form means
+  // controller.submit() never calls dispatcher.write (nothing changed to
+  // send) — handleSubmit must not treat that no-write success like a normal
+  // submit and discard the draft underneath it, or a host driving
+  // controls.submit() on a pre-filled, untouched form silently loses it.
+  test("payloadMode 'changes' + an unchanged form: submit() is a no-op that keeps the draft alive", async () => {
+    const { dispatcher, store, calls } = makeDraftDispatcher();
+    let controls: RenderEditControls<TestValues> | undefined;
+    let submitResult: SubmitResult<unknown> | undefined;
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeDraftWizardScreen(true)}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0 }}
+          writeCommand="order:create"
+          payloadMode="changes"
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+          onSubmit={(result) => {
+            submitResult = result;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    // Step to the last wizard step without touching any field — saveDraft()
+    // persists the current (unmodified) values, so a draft exists, but the
+    // form itself is still not dirty.
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("render-edit-wizard-next"));
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(store.current).not.toBeNull());
+    calls.length = 0;
+
+    // The built-in Save button stays disabled on an unchanged form — drive
+    // the write the way a host would (RenderEditControls.submit(), the API
+    // this changeset's "pre-filled, untouched form" use case documents).
+    await act(async () => {
+      await controls?.submit();
+    });
+
+    expect(submitResult?.validationBlocked).toBe(false);
+    if (submitResult?.validationBlocked === false) {
+      expect(submitResult.isSuccess).toBe(true);
+      expect(submitResult.isNoOp).toBe(true);
+    }
+    expect(calls).not.toContain("order:create");
+    expect(calls).not.toContain("form-draft:write:discard");
+    expect(store.current).not.toBeNull();
+  });
+
   test("without layout.draft nothing hits the form-draft feature", async () => {
     const { dispatcher, calls } = makeDraftDispatcher();
 
@@ -1863,6 +2084,41 @@ describe("RenderEdit wizard draft", () => {
     expect(savesSoFar()).toBe(before + 1);
   });
 
+  // fw#1932: a patch() inside the 500ms debounce window followed by an
+  // unmount (navigation away, dialog close) must not drop the save — the
+  // old cleanup only cleared the timer, silently discarding the last edit.
+  test("a pending debounced patch-save flushes on unmount instead of being dropped", async () => {
+    const { dispatcher, store } = makeDraftDispatcher();
+    let controls: RenderEditControls<TestValues> | undefined;
+
+    const rendered = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeDraftWizardScreen(true)}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 0 }}
+          writeCommand="order:create"
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId("render-edit-wizard-next"));
+    expect(screen.getByTestId("field-count")).toBeTruthy();
+
+    // Arms the debounce, then unmounts well inside the 500ms window — before
+    // the timer could ever fire on its own.
+    act(() => {
+      controls?.patch({ count: 7 });
+    });
+    rendered.unmount();
+
+    await waitFor(() => expect(store.current?.values["count"]).toBe(7));
+  });
+
   // #1914's debounce must not resurrect a draft after it was intentionally
   // ended: discardDraft() clears the pending timer (render-edit.tsx:735-738)
   // specifically so a patch() immediately followed by submit can't have its
@@ -2613,6 +2869,90 @@ describe("RenderEdit locked state (#1896)", () => {
     const titleInput = screen.getByTestId("field-title").querySelector("input");
     expect((titleInput as HTMLInputElement).disabled).toBe(false);
   });
+
+  test("disabled prevents the Delete button from invoking onDelete (fw#1909)", async () => {
+    const onDelete = mock(async () => {});
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          writeCommand="order:create"
+          onDelete={onDelete}
+          disabled
+        />
+      </DispatcherProvider>,
+    );
+
+    const deleteButton = screen.getByTestId("render-edit-delete") as HTMLButtonElement;
+    expect(deleteButton.disabled).toBe(true);
+    fireEvent.click(deleteButton);
+    expect(screen.queryByTestId("render-edit-delete-dialog")).toBeNull();
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  test("disabled prevents picking a draft candidate from adopting it (fw#1909)", async () => {
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-wizard-locked-draftpicker",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        mode: "wizard",
+        draft: true,
+        sections: [
+          { title: "Basics", columns: 1, fields: [{ field: "title" }] },
+          { title: "Details", columns: 1, fields: [{ field: "count" }] },
+        ],
+      },
+    };
+    const candidates = [
+      {
+        id: `${screenDef.id}:new:draft-1`,
+        draftKey: `${screenDef.id}:new:draft-1`,
+        stepIndex: 0,
+        savedAt: "2026-01-01T00:00:00Z",
+      },
+      {
+        id: `${screenDef.id}:new:draft-2`,
+        draftKey: `${screenDef.id}:new:draft-2`,
+        stepIndex: 0,
+        savedAt: "2026-01-02T00:00:00Z",
+      },
+    ];
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "form-draft:query:list")
+          return { isSuccess: true, data: { drafts: candidates } };
+        return { isSuccess: true, data: {} };
+      }) as Dispatcher["query"],
+      write: (async () => ({ isSuccess: true, data: { id: "1" } })) as Dispatcher["write"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DraftStorageProvider value={createFakeDraftStorage()}>
+          <RenderEdit<TestValues>
+            screen={screenDef}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0 }}
+            writeCommand="order:create"
+            disabled
+          />
+        </DraftStorageProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("render-edit-draft-picker")).toBeTruthy());
+    const pickSecond = screen.getByTestId(`render-edit-draft-pick-${screenDef.id}:new:draft-2`);
+    fireEvent.click(pickSecond);
+
+    expect(screen.getByTestId("render-edit-draft-picker")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("");
+  });
 });
 
 describe("RenderEdit hideActions (host-driven action bar)", () => {

package/src/layout/nav-tree.tsx

@@ -101,6 +101,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  useSidebar,
 } from "../ui/sidebar";
 import { useDispatchTarget } from "./target-resolver-stub";
 import { parseTargetFromSearchParams } from "./target-url";
@@ -224,7 +225,14 @@ export function NavTree({
   }, []);
 
   const t = useTranslation();
+  const { state: sidebarState } = useSidebar();
   const [filter, setFilter] = useState("");
+  // The search box is only CSS-hidden (`group-data-[collapsible=icon]:hidden`)
+  // when the sidebar collapses to icon rail, not unmounted — without this,
+  // a stale filter re-applies invisibly on the next expand (fw#1816).
+  useEffect(() => {
+    if (sidebarState === "collapsed") setFilter("");
+  }, [sidebarState]);
   const q = filter.trim().toLowerCase();
   const matches = useCallback(
     (raw: string): boolean => {

package/src/lib/__tests__/resize-image.test.ts

@@ -9,11 +9,16 @@ describe("resizeImageBeforeUpload", () => {
   });
 
   test("fehlt OffscreenCanvas, bleibt das Bild unverändert", async () => {
+    const originalOffscreenCanvas = globalThis.OffscreenCanvas;
     // @ts-expect-error simulate a browser without OffscreenCanvas support
     globalThis.OffscreenCanvas = undefined;
-    const file = new File(["hi"], "photo.jpg", { type: "image/jpeg" });
-    const result = await resizeImageBeforeUpload(file);
-    expect(result).toBe(file);
+    try {
+      const file = new File(["hi"], "photo.jpg", { type: "image/jpeg" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+    } finally {
+      globalThis.OffscreenCanvas = originalOffscreenCanvas;
+    }
   });
 
   test("lässt SVGs unverändert (Vektor würde beim Re-Encode zerstört)", async () => {

package/src/lib/accept-attr.ts

@@ -0,0 +1,5 @@
+// "jpg" → ".jpg", "image/png" stays as-is. Empty list → no accept attribute.
+export function toAcceptAttr(accept?: readonly string[]): string | undefined {
+  if (accept === undefined || accept.length === 0) return undefined;
+  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
+}

package/src/primitives/embedded-list-input.tsx

@@ -443,6 +443,18 @@ export function EmbeddedListInput({
     const isTabForward = event.key === "Tab" && !event.shiftKey;
     const isEnter = event.key === "Enter";
     if (!isTabForward && !isEnter) return;
+    // A select/reference last column renders its picker trigger as a
+    // <button> (or an open cmdk popover's own input) in the cell — Enter
+    // there is the browser's native button-activation, not "append a row".
+    // Returning before preventDefault() lets that activation proceed;
+    // Tab still falls through to the append-row behavior below.
+    if (
+      isEnter &&
+      event.target instanceof HTMLElement &&
+      event.target.closest('button, [role="combobox"], [cmdk-input]') !== null
+    ) {
+      return;
+    }
     if (maxItems !== undefined && rows.length >= maxItems) return;
     // Enter bubbles up from the cell control through this TableCell — an
     // ancestor of any <form> the caller wraps the whole field in.

package/src/primitives/file-upload.tsx

@@ -6,6 +6,7 @@
 import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import { ImageIcon, Loader2, Upload } from "lucide-react";
 import { type ChangeEvent, type ReactNode, useRef, useState } from "react";
+import { toAcceptAttr } from "../lib/accept-attr";
 import { resizeImageBeforeUpload } from "../lib/resize-image";
 import { Button as UiButton } from "../ui/button";
 
@@ -22,12 +23,6 @@ export type FileUploadInputProps = {
   readonly capture?: "environment" | "user";
 };
 
-// "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
-function toAcceptAttr(accept?: readonly string[]): string | undefined {
-  if (accept === undefined || accept.length === 0) return undefined;
-  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
-}
-
 export function FileUploadInput({
   kind,
   id,

package/src/primitives/index.tsx

@@ -69,6 +69,7 @@ import {
   type ChangeEvent,
   type CSSProperties,
   createContext,
+  type MouseEvent,
   type ReactNode,
   useContext,
   useEffect,
@@ -732,6 +733,12 @@ function DefaultDataTable({
                     // if the sum of the columns gets too wide.
                     className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
                     title={cellTitle(row.values[col.field])}
+                    // A click into the editable cell's widget must not also
+                    // trigger the row's onClick (typically "Open Detail") —
+                    // same reasoning as the actions cell below.
+                    {...(onCellChange !== undefined && {
+                      onClick: (e: MouseEvent) => e.stopPropagation(),
+                    })}
                   >
                     <DataTableCell
                       value={row.values[col.field]}

package/src/widgets/drawer.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { type ReactNode, useRef, useState } from "react";
 import { clamp } from "../lib/clamp";
@@ -79,6 +80,7 @@ export function Drawer({
   resize,
   backdrop,
 }: DrawerProps): ReactNode {
+  const t = useTranslation();
   const canResize = resize !== undefined && (side === "left" || side === "right");
   const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
   const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
@@ -152,7 +154,9 @@ export function Drawer({
             type="button"
             onClick={() => setMaximized((m) => !m)}
             aria-pressed={maximized}
-            aria-label={maximized ? "Restore drawer width" : "Maximize drawer width"}
+            aria-label={
+              maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize")
+            }
             className="absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden"
           >
             {maximized ? (
@@ -175,7 +179,7 @@ export function Drawer({
           <div
             role="separator"
             aria-orientation="vertical"
-            aria-label="Resize drawer"
+            aria-label={t("kumiko.widget.drawer.resize")}
             aria-valuenow={effectiveWidthPx}
             aria-valuemin={minWidthPx}
             aria-valuemax={effectiveMaxWidthPx()}

package/src/widgets/infinity-list.tsx

@@ -20,6 +20,12 @@ 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;
@@ -49,6 +55,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   rows,
   nextCursor,
   rowId,
+  rowKey,
   renderRow,
   emptyState,
   className,
@@ -73,6 +80,16 @@ 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
@@ -102,8 +119,11 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
       }
       const nextRows = rowsRef.current(res.data);
       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) => rowIdRef.current(row, index)),
+          nextRows.map((row, index) => identifyRef.current(row, index)),
         );
       }
       setState((prev) => {
@@ -154,7 +174,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) => rowIdRef.current(row, index)));
+    const freshIds = new Set(freshRows.map((row, index) => identifyRef.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
@@ -163,10 +183,18 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     const previousFirstPageIds = firstPageIdsRef.current;
     firstPageIdsRef.current = freshIds;
     setState((prev) => {
-      // skip: not showing an accumulated list yet, nothing to merge into
-      if (prev.kind !== "ready") return prev;
+      // skip: the initial load() is still in flight and owns the eventual
+      // state — a concurrent refresh landing here has nothing accumulated
+      // to merge into yet.
+      if (prev.kind === "loading") return prev;
+      if (prev.kind !== "ready") {
+        // prev.kind === "error": this refresh succeeded — promote straight
+        // to "ready" instead of leaving the list stuck on the earlier
+        // failure forever (a live event should be able to recover it).
+        return { kind: "ready", rows: freshRows, cursor: nextCursorRef.current(res.data) };
+      }
       const staleRows = prev.rows.filter((row, index) => {
-        const id = rowIdRef.current(row, index);
+        const id = identifyRef.current(row, index);
         return !freshIds.has(id) && !previousFirstPageIds.has(id);
       });
       return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };

package/src/widgets/upload-zone.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
 import { type DragEvent, type ReactNode, useId, useRef, useState } from "react";
+import { toAcceptAttr } from "../lib/accept-attr";
 import { cn } from "../lib/cn";
 import { resizeImageBeforeUpload } from "../lib/resize-image";
 
@@ -39,12 +40,6 @@ export type UploadZoneProps = {
   readonly testId?: string;
 };
 
-// "jpg" → ".jpg", "image/png" stays as-is. Empty list → no accept attribute.
-function toAcceptAttr(accept?: readonly string[]): string | undefined {
-  if (accept === undefined || accept.length === 0) return undefined;
-  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
-}
-
 // `accept` on the native <input> only filters the file-picker dialog — a
 // drag&drop drop is never routed through it, so any file type lands in
 // `onUpload` regardless of what `accept` promises. Same matching rules as