@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/__tests__/lightbox.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, mock, test } from "bun:test";
+import userEvent from "@testing-library/user-event";
+import { defaultPrimitives } from "../primitives";
+import { render, screen } from "./test-utils";
+
+const { Lightbox } = defaultPrimitives;
+
+describe("Lightbox", () => {
+  test("open=true renders image with src and alt", () => {
+    render(
+      <Lightbox
+        open
+        onOpenChange={() => undefined}
+        src="/demo.png"
+        alt="Product screenshot"
+        testId="lb"
+      />,
+    );
+    const img = screen.getByRole("img", { name: "Product screenshot" });
+    expect(img.getAttribute("src")).toBe("/demo.png");
+    expect(screen.getByTestId("lb")).toBeTruthy();
+  });
+
+  test("open=false renders nothing", () => {
+    render(
+      <Lightbox
+        open={false}
+        onOpenChange={() => undefined}
+        src="/demo.png"
+        alt="Hidden"
+        testId="lb-hidden"
+      />,
+    );
+    expect(screen.queryByTestId("lb-hidden")).toBeNull();
+  });
+
+  test("close button calls onOpenChange(false)", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = mock();
+    render(
+      <Lightbox open onOpenChange={onOpenChange} src="/demo.png" alt="Preview" testId="lb-close" />,
+    );
+    await user.click(screen.getByLabelText("Close"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/__tests__/nav-tree.test.tsx

@@ -224,6 +224,66 @@ describe("NavTree", () => {
     expect(container.querySelectorAll("svg").length).toBe(2);
   });
 
+  test("tag + key (custom-fields / api-tokens) lösen auf ein Icon auf", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [
+        { id: "fields", type: "entityList", entity: "x", columns: [] },
+        { id: "tokens", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "fields", label: "Felder", screen: "fields", order: 10, icon: "tag" },
+        { id: "tokens", label: "Tokens", screen: "tokens", order: 20, icon: "key" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(2);
+  });
+
+  test("server, mail, download, rocket lösen auf ein Icon auf (Config-/SMTP-Nav)", () => {
+    // Config-Settings-Hub leitet Child-Nav-Icons aus dem mask.icon der
+    // ConfigKey ab (smtp-host="server", from="mail", subscription="rocket");
+    // fehlten sie in NAV_ICONS, rendert das Nav blank statt Icon.
+    const schema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        { id: "a", type: "entityList", entity: "x", columns: [] },
+        { id: "b", type: "entityList", entity: "x", columns: [] },
+        { id: "c", type: "entityList", entity: "x", columns: [] },
+        { id: "d", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "a", label: "SMTP", screen: "a", order: 10, icon: "server" },
+        { id: "b", label: "From", screen: "b", order: 20, icon: "mail" },
+        { id: "c", label: "Export", screen: "c", order: 30, icon: "download" },
+        { id: "d", label: "Billing", screen: "d", order: 40, icon: "rocket" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(4);
+  });
+
+  test("palette, link und share rendern Lucide-Icons (Share-/Branding-Nav)", () => {
+    const schema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        { id: "branding", type: "entityList", entity: "x", columns: [] },
+        { id: "links", type: "entityList", entity: "x", columns: [] },
+        { id: "defaults", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "branding", label: "Branding", screen: "branding", order: 10, icon: "palette" },
+        { id: "links", label: "Links", screen: "links", order: 20, icon: "link" },
+        { id: "defaults", label: "Defaults", screen: "defaults", order: 30, icon: "share" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(3);
+  });
+
   test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg)", () => {
     const schema = {
       featureName: "showcase",
@@ -506,3 +566,65 @@ describe("NavTree dynamic provider nodes", () => {
     expect(active()).toBe(0); // Unmount baut alles ab → kein Leak
   });
 });
+
+describe("NavTree Suchfeld", () => {
+  // Das Suchfeld ist das einzige <input> im Baum; über die Rolle statt den
+  // i18n-Placeholder gefunden (i18n-Bundle resolvt im Worktree gegen den
+  // Haupt-Checkout, wo der neue Key noch fehlt — in CI greift er).
+
+  test("Filter blendet Nicht-Treffer aus, hält Treffer + deren Ancestors", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "active" } });
+
+    // Treffer selbst sichtbar (case-insensitiv).
+    expect(screen.getByText("Active")).toBeTruthy();
+    // Nicht-Treffer-Geschwister weg.
+    expect(screen.queryByText("Backlog")).toBeNull();
+    // Ancestors bleiben, damit der Treffer erreichbar bleibt.
+    expect(screen.getByText("Items")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+
+  test("Filter ohne Treffer leert den Baum; Leeren stellt alles wieder her", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "zzz-nichts" } });
+    expect(screen.queryByText("Items")).toBeNull();
+    expect(screen.queryByText("Data")).toBeNull();
+
+    fireEvent.change(input, { target: { value: "" } });
+    expect(screen.getByText("Backlog")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+});
+
+describe("NavTree folder-open Icon", () => {
+  test("Folder-Knoten zeigt folder-open wenn expanded, folder wenn collapsed", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([{ label: "page", icon: "folder", children: [pageLeaf("hero")] }]);
+      return () => {};
+    };
+    let container: HTMLElement | undefined;
+    await act(async () => {
+      container = renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      }).container;
+    });
+    // Default-expanded → offener Ordner, kein geschlossener.
+    expect(container?.querySelector(".lucide-folder-open")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder")).toBeNull();
+
+    // Der einzige aria-gelabelte Chevron gehört dem "page"-Sub-Ordner
+    // (der Provider-Container toggelt inline, ohne aria-Label).
+    const chevron = screen.getByRole("button", { name: /Expand|Collapse/ });
+    await act(async () => {
+      fireEvent.click(chevron);
+    });
+    expect(container?.querySelector(".lucide-folder")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder-open")).toBeNull();
+  });
+});

package/src/__tests__/primitives.test.tsx

@@ -10,6 +10,7 @@
 import { describe, expect, mock, test } from "bun:test";
 import userEvent from "@testing-library/user-event";
 import { defaultPrimitives } from "../primitives";
+import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen } from "./test-utils";
 
 const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
@@ -979,7 +980,7 @@ describe("Card", () => {
         <span>body</span>
       </Card>,
     );
-    expect(screen.getByTestId("c").innerHTML).toContain("p-6");
+    expect(screen.getByTestId("c").innerHTML).toContain("p-[var(--card-padding)]");
   });
 
   test("padded=false renders body without padding classes", () => {
@@ -1053,3 +1054,33 @@ describe("Card", () => {
     expect(screen.getByTestId("c").innerHTML).not.toContain("grow");
   });
 });
+
+describe("Stack", () => {
+  test("gap-Variante bildet auf die Tailwind-gap-Klasse ab", () => {
+    render(
+      <Stack testId="s" gap="lg">
+        <span>a</span>
+      </Stack>,
+    );
+    const el = screen.getByTestId("s");
+    expect(el.className).toContain("flex flex-col");
+    expect(el.className).toContain("gap-6");
+  });
+
+  test("default gap = md", () => {
+    render(<Stack testId="s">x</Stack>);
+    expect(screen.getByTestId("s").className).toContain("gap-4");
+  });
+});
+
+describe("PageSection", () => {
+  test("wrappt children mit einheitlichem Padding", () => {
+    render(
+      <PageSection testId="p">
+        <span data-testid="child">x</span>
+      </PageSection>,
+    );
+    expect(screen.getByTestId("p").className).toContain("p-6");
+    expect(screen.getByTestId("child")).toBeDefined();
+  });
+});

package/src/__tests__/profile-menu.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ProfileMenu } from "../layout/profile-menu";
+
+describe("ProfileMenu", () => {
+  test("wraps Avatar trigger and opens ActionMenu items", async () => {
+    const user = userEvent.setup();
+    const onSelect = mock(() => {});
+    render(
+      <ProfileMenu
+        user={{ id: "u1", label: "Ada Lovelace" }}
+        items={[
+          { kind: "item", id: "profile", label: "View profile", onSelect },
+          { kind: "separator" },
+          { kind: "item", id: "out", label: "Sign out", variant: "danger", onSelect: () => {} },
+        ]}
+      />,
+    );
+    const trigger = screen.getByTestId("profile-menu-trigger");
+    expect(trigger.getAttribute("aria-label")).toBe("Open Ada Lovelace menu");
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(screen.getByTestId("action-menu-item-profile")).toBeTruthy();
+    });
+    await user.click(screen.getByTestId("action-menu-item-profile"));
+    expect(onSelect).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,101 @@
+// Unit-Tests für den projectionDetail-Screen-Type (read-only single-row
+// inspector, kumiko-framework#255). Deckt den Pfad ab, der Integration/E2E
+// nicht prüft (e2e-generator skippt projectionDetail explizit — kein CRUD):
+//   - Row wird über idParam gefetcht, Felder zeigen die Query-Response-Werte
+//   - jedes Feld ist readOnly, kein Submit-Button (hasEditableSection=false)
+//   - fehlende entityId → Error-Banner statt Crash
+
+import { describe, expect, test } from "bun:test";
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import { act, createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const detailScreen: ProjectionDetailScreenDefinition = {
+  id: "session-detail",
+  type: "projectionDetail",
+  query: "sessions:query:user-session:detail",
+  idParam: "id",
+  layout: {
+    sections: [{ title: "Session", fields: ["userId", "createdAt"] }],
+  },
+  fieldLabels: {
+    userId: "sessions.detail.field.userId",
+    createdAt: "sessions.detail.field.createdAt",
+  },
+};
+
+const schema: FeatureSchema = {
+  featureName: "sessions",
+  entities: {},
+  screens: [detailScreen],
+};
+
+describe("KumikoScreen / projectionDetail", () => {
+  test("fetches the row via idParam and renders its fields read-only, no submit button", async () => {
+    const querySpy = (async (_qn: string, payload: unknown) => {
+      expect(payload).toEqual({ id: "sess-1" });
+      return {
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      };
+    }) as unknown as Dispatcher["query"];
+    const dispatcher: Dispatcher = createMockDispatcher({ query: querySpy });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" entityId="sess-1" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const userIdInput = screen.getByTestId("field-userId").querySelector("input");
+    expect(userIdInput?.value).toBe("user-42");
+    expect(userIdInput?.disabled).toBe(true);
+
+    // hasEditableSection() reads readOnly on every field — projectionDetail
+    // forces it hard in the shim, so RenderEdit must never draw a Save button.
+    expect(screen.queryByTestId("render-edit-submit")).toBeNull();
+  });
+
+  test("missing entityId shows an error banner instead of crashing", async () => {
+    let resolveQuery: (value: unknown) => void = () => {};
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (() =>
+        new Promise((resolve) => {
+          resolveQuery = resolve;
+        })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("kumiko-screen-projection-detail-missing-id")).toBeTruthy();
+
+    // Screen skips the record entirely without entityId, but useQuery's
+    // effect still fired (unconditional hook call) — settle it so its async
+    // setState doesn't land after the test unmounts.
+    await act(async () => {
+      resolveQuery({ isSuccess: true, data: {} });
+      await Promise.resolve();
+    });
+  });
+
+  test("record not found shows an error banner", async () => {
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({ isSuccess: true, data: null })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" entityId="sess-missing" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("kumiko-screen-record-missing"));
+  });
+});

package/src/__tests__/projection-list-actions.test.tsx

@@ -0,0 +1,131 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { ProjectionListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+// writeHandler-Row/Toolbar-Actions auf projectionList — der entityList-
+// Dispatch-Pfad gilt jetzt auch hier (vorher v1: nur navigate).
+
+const projectionScreen: ProjectionListScreenDefinition = {
+  id: "maintenance-list",
+  type: "projectionList",
+  query: "status:query:maintenance:upcoming",
+  columns: [{ field: "name", label: "status:col:name" }],
+  rowActions: [
+    {
+      kind: "writeHandler",
+      id: "start",
+      label: "status:action:start",
+      handler: "status:write:maintenance:start",
+    },
+  ],
+  toolbarActions: [
+    {
+      kind: "writeHandler",
+      id: "sync",
+      label: "status:action:sync",
+      handler: "status:write:maintenance:sync",
+      payload: { source: "manual" },
+    },
+  ],
+};
+
+const schema: FeatureSchema = {
+  featureName: "status",
+  entities: {},
+  screens: [projectionScreen],
+};
+
+function makeDispatcher(write: Dispatcher["write"]): Dispatcher {
+  return {
+    ...createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "m1", name: "DB-Upgrade" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    }),
+    write,
+  };
+}
+
+describe("projectionList writeHandler-Actions", () => {
+  test("Row-Action dispatcht den Handler mit Default-Payload {id}", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:start" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:start");
+    expect(write.mock.calls[0]?.[1]).toEqual({ id: "m1" });
+  });
+
+  test("Toolbar-Action dispatcht den Handler mit deklariertem Payload", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:sync" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:sync");
+    expect(write.mock.calls[0]?.[1]).toEqual({ source: "manual" });
+  });
+
+  // Prod-Bug 2026-06-07 (siehe useRowActionTrigger): ein verschluckter
+  // Write-Fehler sah für den User wie "nichts passiert" aus. Row- UND
+  // Toolbar-Action auf projectionList müssen denselben Surfacing-Pfad wie
+  // entityList nehmen (Toast statt stiller no-op).
+  test("Row-Action-Fehler wird als Toast surfaced, nicht verschluckt", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: false,
+      error: { code: "internal_error", httpStatus: 500, message: "maintenance start failed" },
+    }));
+    const { ToastProvider } = await import("../primitives/toast");
+    render(
+      <ToastProvider>
+        <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+          <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+        </DispatcherProvider>
+      </ToastProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:start" }));
+    expect(await screen.findByText("maintenance start failed")).toBeTruthy();
+  });
+
+  test("Toolbar-Action-Fehler wird als Toast surfaced, nicht verschluckt", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: false,
+      error: { code: "internal_error", httpStatus: 500, message: "maintenance sync failed" },
+    }));
+    const { ToastProvider } = await import("../primitives/toast");
+    render(
+      <ToastProvider>
+        <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+          <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+        </DispatcherProvider>
+      </ToastProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:sync" }));
+    expect(await screen.findByText("maintenance sync failed")).toBeTruthy();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { describe, expect, mock, spyOn, test } from "bun:test";
+import { afterEach, describe, expect, mock, spyOn, test } from "bun:test";
 import type {
   EntityDefinition,
   EntityListScreenDefinition,
@@ -188,13 +188,21 @@ describe("RenderList — slots.header", () => {
   });
 
   test("slots.header gesetzt, aber Component nicht registriert → kein Crash, kein Header", () => {
-    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    spyOn(console, "warn").mockImplementation(() => {});
     render(
       <ExtensionSectionsProvider value={{}}>
         <RenderList screen={screenWithHeader} entity={taskEntity} rows={[]} featureName="tasks" />
       </ExtensionSectionsProvider>,
     );
     expect(screen.queryByTestId("list-header-slot")).toBeNull();
-    warn.mockRestore();
   });
 });
+
+// 573/1: a mid-test assertion throw would skip the trailing warn.mockRestore()
+// above, leaking the spy into every later test — this backstop restores
+// unconditionally regardless of how the test exited.
+afterEach(() => {
+  // biome-ignore lint/suspicious/noConsole: reading the spy handle to restore it, not logging
+  const warn = console.warn as unknown as { mockRestore?: () => void };
+  warn.mockRestore?.();
+});

package/src/__tests__/test-utils.tsx

@@ -157,6 +157,7 @@ export function createMockDispatcher(options: MockDispatcherOptions = {}): Dispa
       options.batch ??
       ((async () => ({ isSuccess: true, results: [] })) as unknown as Dispatcher["batch"]),
     statusStore,
+    async *stream() {},
     pendingWrites: () => [],
     pendingFiles: () => [],
   };

package/src/__tests__/toast.test.tsx

@@ -1,9 +1,9 @@
 //
 // ToastProvider + useToast pinnt: toast() rendert Title+Description in
-// einem Radix-Toast; mehrere toasts stapeln; Variant=destructive setzt
-// die destructive-Klasse; useToast außerhalb des Providers ist no-op
-// (kein crash); IDs sind kollisionsfrei auch bei zwei Calls im selben
-// Tick (Counter-Race-Bug).
+// einem Radix-Toast; mehrere toasts stapeln; Variant=bad setzt die
+// StatusTone-Klasse; useToast außerhalb des Providers ist no-op (kein
+// crash); IDs sind kollisionsfrei auch bei zwei Calls im selben Tick
+// (Counter-Race-Bug).
 
 import { describe, expect, test } from "bun:test";
 import { act, fireEvent, screen } from "@testing-library/react";
@@ -49,7 +49,7 @@ describe("ToastProvider + useToast", () => {
           options={[
             {
               title: "Konflikt",
-              variant: "destructive",
+              variant: "bad",
               docsUrl: "https://docs.kumiko.rocks/errors/stale_state",
             },
           ]}
@@ -88,18 +88,18 @@ describe("ToastProvider + useToast", () => {
     expect(screen.queryByRole("link")).toBeNull();
   });
 
-  test("variant=destructive: setzt die destructive-Klasse auf den Root", () => {
+  test("variant=bad: setzt die status-bad StatusTone-Klasse auf den Root", () => {
     render(
       <ToastProvider>
-        <ToastTrigger options={[{ title: "Failed", variant: "destructive" }]} />
+        <ToastTrigger options={[{ title: "Failed", variant: "bad" }]} />
       </ToastProvider>,
     );
     // Class-Mapping ist der Public-Vertrag mit Tailwind-Tokens. Wir
     // suchen den nearest Ancestor des Title-Knotens dessen Klassen-
-    // String "destructive" enthält — Radix-Toast.Root rendert in einem
+    // String "status-bad" enthält — Radix-Toast.Root rendert in einem
     // <li>, aber die genaue Role wechselt je nach priority/type.
     let node: HTMLElement | null = screen.getByText("Failed");
-    while (node !== null && !node.className.includes("destructive")) {
+    while (node !== null && !node.className.includes("status-bad")) {
       node = node.parentElement;
     }
     expect(node).not.toBeNull();

package/src/__tests__/use-mutation.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider, useMutation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { act, createMockDispatcher, renderHook, waitFor } from "./test-utils";
+
+function wrap(dispatcher: Dispatcher) {
+  return ({ children }: { children: ReactNode }) => (
+    <DispatcherProvider dispatcher={dispatcher}>{children}</DispatcherProvider>
+  );
+}
+
+describe("useMutation", () => {
+  // #902/2: two overlapping calls on one instance (list-row actions sharing
+  // it) must not let the earlier-STARTED, later-RESOLVING call clobber the
+  // state set by the later-started, earlier-resolving one.
+  test("out-of-order resolution: state reflects the most recently started call, not the most recently resolved one", async () => {
+    let resolveFirst: (() => void) | undefined;
+    const write = mock(async (_type: string, payload: unknown) => {
+      if ((payload as { id: string }).id === "row-1") {
+        await new Promise<void>((resolve) => {
+          resolveFirst = resolve;
+        });
+        return { isSuccess: true, data: { id: "row-1" } };
+      }
+      return { isSuccess: true, data: { id: "row-2" } };
+    });
+    const dispatcher = createMockDispatcher({ write: write as unknown as Dispatcher["write"] });
+    const { result } = renderHook(() => useMutation("row:update"), {
+      wrapper: wrap(dispatcher),
+    });
+
+    let firstCallDone: Promise<unknown>;
+    let secondCallDone: Promise<unknown>;
+    act(() => {
+      firstCallDone = result.current.mutate({ id: "row-1" });
+    });
+    await act(async () => {
+      secondCallDone = result.current.mutate({ id: "row-2" });
+      // let the second (no-delay) call resolve before the first
+      await Promise.resolve();
+    });
+
+    await waitFor(() => expect(result.current.data).toEqual({ id: "row-2" }));
+    expect(result.current.pending).toBe(false); // row-2 (the latest call) already settled
+
+    await act(async () => {
+      resolveFirst?.();
+      await firstCallDone;
+      await secondCallDone;
+    });
+
+    // The first call resolving late must not overwrite row-2's state.
+    expect(result.current.data).toEqual({ id: "row-2" });
+    expect(result.current.pending).toBe(false);
+  });
+
+  test("reset() invalidates a still-pending call's late state update", async () => {
+    let resolveWrite: (() => void) | undefined;
+    const write = mock(async () => {
+      await new Promise<void>((resolve) => {
+        resolveWrite = resolve;
+      });
+      return { isSuccess: true, data: { id: "late" } };
+    });
+    const dispatcher = createMockDispatcher({ write: write as unknown as Dispatcher["write"] });
+    const { result } = renderHook(() => useMutation("row:update"), {
+      wrapper: wrap(dispatcher),
+    });
+
+    let mutateDone: Promise<unknown>;
+    act(() => {
+      mutateDone = result.current.mutate({ id: "x" });
+    });
+    act(() => {
+      result.current.reset();
+    });
+    await act(async () => {
+      resolveWrite?.();
+      await mutateDone;
+    });
+
+    expect(result.current.data).toBeNull();
+    expect(result.current.pending).toBe(false);
+  });
+});