@cosmicdrift/kumiko-renderer-web 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.13.0",
+  "version": "0.15.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.13.0",
-    "@cosmicdrift/kumiko-headless": "0.13.0",
-    "@cosmicdrift/kumiko-renderer": "0.13.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.14.0",
+    "@cosmicdrift/kumiko-headless": "0.14.0",
+    "@cosmicdrift/kumiko-renderer": "0.14.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -75,4 +75,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/__tests__/avatar.test.tsx

@@ -1,5 +1,4 @@
-// @vitest-environment jsdom
-import { describe, expect, test } from "vitest";
+import { describe, expect, test } from "bun:test";
 import { Avatar } from "../layout/avatar";
 import { render, screen } from "./test-utils";
 

package/src/__tests__/combobox.test.tsx

@@ -1,8 +1,7 @@
-// @vitest-environment jsdom
+import { describe, expect, test } from "bun:test";
 import { fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { act } from "react";
-import { describe, expect, test } from "vitest";
 import { ComboboxInput } from "../primitives/combobox";
 import { render, screen } from "./test-utils";
 

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

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // Unit-Tests für den configEdit-Screen-Type. Decken die Pfade ab die
 // Integration + E2E nur indirekt sehen:
@@ -8,12 +7,12 @@
 //   - Save-Button Greying via controller.rebase nach Success
 //   - Loading-State während config:query:values noch läuft
 
+import { describe, expect, mock, test } from "bun:test";
 import type { ConfigEditScreenDefinition } 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 userEvent from "@testing-library/user-event";
-import { describe, expect, test, vi } from "vitest";
 import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
 
 const settingsScreen: ConfigEditScreenDefinition = {
@@ -91,12 +90,10 @@ describe("KumikoScreen / configEdit", () => {
   });
 
   test("submit dispatches one /api/batch with one command per changed field", async () => {
-    const batchSpy = vi.fn(
-      async (_commands: ReadonlyArray<{ type: string; payload: unknown }>) => ({
-        isSuccess: true as const,
-        results: [],
-      }),
-    );
+    const batchSpy = mock(async (_commands: ReadonlyArray<{ type: string; payload: unknown }>) => ({
+      isSuccess: true as const,
+      results: [],
+    }));
     const dispatcher: Dispatcher = createMockDispatcher({
       query: (async () => ({
         isSuccess: true,

package/src/__tests__/create-app.test.tsx

@@ -1,4 +1,4 @@
-// @vitest-environment jsdom
+import { afterAll, afterEach, describe, expect, spyOn, test } from "bun:test";
 import type {
   EntityDefinition,
   EntityEditScreenDefinition,
@@ -8,7 +8,6 @@ import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { ColumnRendererProps, FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
 import { act, screen, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { beforeEach, describe, expect, type MockInstance, test, vi } from "vitest";
 import type { ClientFeatureDefinition } from "../app/client-plugin";
 import { type CreateKumikoAppOptions, createKumikoApp } from "../app/create-app";
 import { createMockDispatcher } from "./test-utils";
@@ -62,18 +61,41 @@ const baseSchema: FeatureSchema = {
 // im Test-Modus als "outside act()" flaggt. Produktions-Code muss nicht in
 // act() wissen; der Test übernimmt das Wrapping an der einzigen
 // Test-eigenen Aufrufstelle. async weil der erste useEffect-Tick in
-// KumikoScreen (useQuery) ebenfalls flushed werden muss.
+// KumikoScreen (useQuery) ebenfalls geflusht werden muss.
+let appRoot: { unmount: () => void } | undefined;
+
 async function mountApp(options: CreateKumikoAppOptions): Promise<void> {
   await act(async () => {
-    createKumikoApp(options);
+    const result = createKumikoApp(options);
+    appRoot = result.root;
   });
 }
 
 describe("createKumikoApp", () => {
   // createKumikoApp mounts via createRoot into document.body. Reset
-  // between tests so a previous test's mount doesn't leak through
-  // and fool the next one into finding stale markup.
-  beforeEach(() => {
+  // between tests: unmount den React-Root (damit keine pending Effects
+  // in nachfolgende Tests leaken) + leere den body.
+  afterEach(() => {
+    if (appRoot !== undefined) {
+      act(() => {
+        // biome-ignore lint/style/noNonNullAssertion: TS can't narrow inside act() callback
+        appRoot!.unmount();
+      });
+      appRoot = undefined;
+    }
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  afterAll(() => {
+    if (appRoot !== undefined) {
+      act(() => {
+        // biome-ignore lint/style/noNonNullAssertion: TS can't narrow inside act() callback
+        appRoot!.unmount();
+      });
+      appRoot = undefined;
+    }
     while (document.body.firstChild) {
       document.body.removeChild(document.body.firstChild);
     }
@@ -131,9 +153,7 @@ describe("createKumikoApp", () => {
     // create-app warnt und behält den späteren Eintrag (Last-Wins).
     // Beweist dass das bewusste Override-Verhalten nicht silent
     // wegrutscht falls jemand auf "first-wins" refactored.
-    const warnSpy: MockInstance<typeof console.warn> = vi
-      .spyOn(console, "warn")
-      .mockImplementation(() => {});
+    const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
 
     function FirstSwatch({ value }: ColumnRendererProps): ReactNode {
       return <span data-testid="ca-first">{String(value)}</span>;

package/src/__tests__/date-input.test.tsx

@@ -1,13 +1,12 @@
-// @vitest-environment jsdom
 //
 // DateInput pinnt: Trigger zeigt formatiertes Datum (locale-aware),
 // Popover öffnet das DayPicker, Auswahl gibt ISO-yyyy-mm-dd zurück.
 // Wert-Roundtrip (ISO → Date → ISO) muss tag-stable sein, sonst
 // zeigt der Calendar je nach Timezone den Vortag.
 
+import { describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, test, vi } from "vitest";
 import { DateInput } from "../primitives/date-input";
 
 describe("DateInput", () => {
@@ -79,7 +78,7 @@ describe("DateInput", () => {
 
   test("Tag-Auswahl im Calendar: onChange feuert ISO yyyy-mm-dd", async () => {
     const user = userEvent.setup();
-    const onChange = vi.fn();
+    const onChange = mock();
     render(<DateInput id="d" name="d" value="2026-04-23" onChange={onChange} locale="en-US" />);
     await user.click(screen.getByRole("button"));
     // react-day-picker rendert jeden Tag als gridcell. Der 25. April

package/src/__tests__/default-app-shell.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // DefaultAppShell — pinnt dass user-prop an NavTree durchgereicht wird.
 //
@@ -7,8 +6,8 @@
 // fehlende user als anonymous → alle role-gated navs ausgeblendet). Test
 // pinst dass DefaultAppShell user nun akzeptiert UND durchreicht.
 
+import { describe, expect, test } from "bun:test";
 import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
-import { describe, expect, test } from "vitest";
 import { DefaultAppShell } from "../layout/default-app-shell";
 import { render, screen } from "./test-utils";
 

package/src/__tests__/dispatcher-context.test.tsx

@@ -1,4 +1,4 @@
-// @vitest-environment jsdom
+import { describe, expect, test } from "bun:test";
 import type { Dispatcher, DispatcherStatus } from "@cosmicdrift/kumiko-headless";
 import {
   DispatcherProvider,
@@ -7,7 +7,6 @@ import {
   useOptionalDispatcher,
 } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { describe, expect, test } from "vitest";
 import { act, createMockDispatcher, render, renderHook } from "./test-utils";
 
 // Minimal fake dispatcher: write/query/batch throwen, damit klar wird

package/src/__tests__/dispatcher-status-wiring.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // Verdrahtungs-Test: beweist dass die ganze UI-Store-Kette zusammenhält:
 //   createLiveDispatcher → dispatcher.statusStore → DispatcherProvider →
@@ -17,10 +16,10 @@
 // lassen alles darüber echt laufen. Im Sinne von CLAUDE.md ist das ein
 // "Full-Stack des Frontend-Stacks", nicht ein Full-Stack-mit-API.
 
+import { describe, expect, mock, test } from "bun:test";
 import { createLiveDispatcher } from "@cosmicdrift/kumiko-dispatcher-live";
 import { DispatcherProvider, useDispatcherStatus } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
-import { describe, expect, test, vi } from "vitest";
 import { act, render, screen, waitFor } from "./test-utils";
 
 function StatusProbe(): ReactNode {
@@ -30,7 +29,7 @@ function StatusProbe(): ReactNode {
 
 describe("UI-Store Verdrahtung: Dispatcher → statusStore → useDispatcherStatus", () => {
   test("initial-status: Probe rendert 'online' nach Provider-Mount", () => {
-    const fetch = vi.fn() as unknown as typeof globalThis.fetch;
+    const fetch = mock() as unknown as typeof globalThis.fetch;
     const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
 
     render(
@@ -43,7 +42,7 @@ describe("UI-Store Verdrahtung: Dispatcher → statusStore → useDispatcherStat
   });
 
   test("network-fail flippt Probe von 'online' nach 'offline'", async () => {
-    const fetch = vi.fn(async () => {
+    const fetch = mock(async () => {
       throw new Error("ECONNREFUSED");
     }) as unknown as typeof globalThis.fetch;
     const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
@@ -67,7 +66,7 @@ describe("UI-Store Verdrahtung: Dispatcher → statusStore → useDispatcherStat
 
   test("recovery flippt Probe zurück auf 'online'", async () => {
     let failNext = true;
-    const fetch = vi.fn(async () => {
+    const fetch = mock(async () => {
       if (failNext) {
         failNext = false;
         throw new Error("boom");
@@ -100,7 +99,7 @@ describe("UI-Store Verdrahtung: Dispatcher → statusStore → useDispatcherStat
   });
 
   test("statusStore ist read-only auf dem public Dispatcher-Type", () => {
-    const fetch = vi.fn() as unknown as typeof globalThis.fetch;
+    const fetch = mock() as unknown as typeof globalThis.fetch;
     const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
 
     // Der Dispatcher-Contract exponiert statusStore als Store<T> (nicht

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

@@ -1,4 +1,4 @@
-// @vitest-environment jsdom
+import { describe, expect, mock, test } from "bun:test";
 import type {
   ActionFormScreenDefinition,
   EntityDefinition,
@@ -9,7 +9,6 @@ import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, test, vi } from "vitest";
 import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
 
 const taskEntity = {
@@ -76,7 +75,7 @@ describe("KumikoScreen", () => {
 
   test("entityList → fires useQuery with derived query QN and renders RenderList", async () => {
     const seenTypes: string[] = [];
-    const query = vi.fn(async (type: string) => {
+    const query = mock(async (type: string) => {
       seenTypes.push(type);
       return {
         isSuccess: true,

package/src/__tests__/language-switcher.test.tsx

@@ -1,10 +1,9 @@
-// @vitest-environment jsdom
+import { describe, expect, mock, test } from "bun:test";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
 import { createStaticLocaleResolver, LocaleProvider } from "@cosmicdrift/kumiko-renderer";
 import { render as _render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
-import { describe, expect, test, vi } from "vitest";
 import { LanguageSwitcher } from "../layout/language-switcher";
 
 // Tests greifen den LanguageSwitcher mit einem stateful Stub-Resolver
@@ -26,7 +25,7 @@ function makeStatefulResolver(initial: string): LocaleResolver {
         listeners.delete(l);
       };
     },
-    setLocale: vi.fn((next: string) => {
+    setLocale: mock((next: string) => {
       current = next;
       for (const l of listeners) l();
     }),

package/src/__tests__/money-input.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // MoneyInput hat genug Custom-Logik (focus-aware Format, +/- Buttons,
 // Locale-Parse), dass der Switch-Case-Test in primitives.test nicht
@@ -9,8 +8,8 @@
 //   - Blur mit Müll-Input verwirft den Wert (kein corrupt-set).
 //   - Verschiedene Currencies → korrekte Decimal-Stellen (JPY=0).
 
+import { describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
 import { MoneyInput, parseLocaleNumber } from "../primitives/money-input";
 
 describe("MoneyInput", () => {
@@ -80,7 +79,7 @@ describe("MoneyInput", () => {
   });
 
   test("blur mit gültigem Edit-String: onChange feuert Cents", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="eur"
@@ -99,7 +98,7 @@ describe("MoneyInput", () => {
   });
 
   test("blur mit leerem String: onChange(undefined) räumt den Wert", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="eur"
@@ -118,7 +117,7 @@ describe("MoneyInput", () => {
   });
 
   test("blur mit korruptem Input (Buchstaben): onChange wird NICHT gerufen", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="eur"
@@ -137,7 +136,7 @@ describe("MoneyInput", () => {
   });
 
   test("+ Button: addiert 1 Major-Unit (=100 cents bei EUR) zum Canonical-Wert", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="eur"
@@ -153,7 +152,7 @@ describe("MoneyInput", () => {
   });
 
   test("− Button: subtrahiert 1 Major-Unit", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="eur"
@@ -169,7 +168,7 @@ describe("MoneyInput", () => {
   });
 
   test("+ Button bei leerem Wert: startet bei 0 + 1 Major-Unit", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput id="eur" name="eur" value="" onChange={onChange} currency="EUR" locale="de-DE" />,
     );
@@ -178,7 +177,7 @@ describe("MoneyInput", () => {
   });
 
   test("+ Button bei JPY: addiert 1 Yen (1 cent, weil JPY 0 decimals hat)", () => {
-    const onChange = vi.fn();
+    const onChange = mock();
     render(
       <MoneyInput
         id="jpy"

package/src/__tests__/nav-base-path.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // useBrowserNavApi({ basePath }) — Read-Pfad strippt den Prefix vor
 // parsePath, Write-Pfad prepend'd ihn vor pushState/replaceState/hrefFor.
@@ -9,10 +8,10 @@
 // Bereich unter /admin, Embedded-App unter /embed, Workspace-Routing
 // unter Prefix) sind hier mit Beispiel-URLs durchgespielt.
 
+import { beforeEach, describe, expect, test } from "bun:test";
 import { NavProvider, useNav } from "@cosmicdrift/kumiko-renderer";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { beforeEach, describe, expect, test } from "vitest";
 import { KumikoLink, useBrowserNavApi } from "../app/nav";
 
 function AdminBrowserNav({ children }: { readonly children: ReactNode }): ReactNode {

package/src/__tests__/nav-search-params.test.tsx

@@ -1,12 +1,11 @@
-// @vitest-environment jsdom
 //
 // useBrowserNavApi Lese-/Schreib-Pfad für searchParams. Vor dieser
 // Suite war das Mapping `window.location.search ↔ NavApi.searchParams`
 // nur über useListUrlState mit Mock-NavApi indirekt getestet — der
 // echte URLSearchParams-Parse + replaceState-Roundtrip war ungetestet.
 
+import { describe, expect, test } from "bun:test";
 import { act, renderHook } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
 import { useBrowserNavApi } from "../app/nav";
 
 function setLocation(pathname: string, search: string): void {

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

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 //
 // NavTree: Sidebar-Navigation aus dem Schema. Pinnt zwei Verträge:
 //   1. Section-Header (parent ohne screen) plus children-Collapse
@@ -6,8 +5,8 @@
 //   2. Active-State greift auf node mit screen wenn nav.route's
 //      screenId matcht (Standard-Sidebar-Verhalten).
 
+import { describe, expect, test } from "bun:test";
 import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
-import { describe, expect, test } from "vitest";
 import { NavTree } from "../layout/nav-tree";
 import { fireEvent, render, screen } from "./test-utils";
 

package/src/__tests__/nav.test.tsx

@@ -1,8 +1,7 @@
-// @vitest-environment jsdom
+import { beforeEach, describe, expect, test } from "bun:test";
 import { formatPath, NavProvider, parsePath, useNav } from "@cosmicdrift/kumiko-renderer";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { beforeEach, describe, expect, test } from "vitest";
 import { KumikoLink, useBrowserNavApi } from "../app/nav";
 
 describe("parsePath", () => {
@@ -124,23 +123,25 @@ describe("useBrowserNavApi + NavProvider", () => {
     );
   }
 
-  test("initial-route aus window.location.pathname", () => {
+  test("initial-route aus window.location.pathname", async () => {
     window.history.replaceState(null, "", "/task-list");
     render(
       <BrowserNav>
         <Probe />
       </BrowserNav>,
     );
+    await act(async () => {});
     expect(screen.getByTestId("screen-id").textContent).toBe("task-list");
     expect(screen.getByTestId("entity-id").textContent).toBe("(none)");
   });
 
-  test("navigate() aktualisiert location + re-rendert", () => {
+  test("navigate() aktualisiert location + re-rendert", async () => {
     render(
       <BrowserNav>
         <Probe />
       </BrowserNav>,
     );
+    await act(async () => {});
     expect(screen.getByTestId("screen-id").textContent).toBe("(none)");
 
     act(() => {
@@ -152,12 +153,14 @@ describe("useBrowserNavApi + NavProvider", () => {
     expect(screen.getByTestId("entity-id").textContent).toBe("xyz");
   });
 
-  test("replace() aktualisiert location ohne History-Eintrag", () => {
+  test("replace() aktualisiert location ohne History-Eintrag", async () => {
     render(
       <BrowserNav>
         <Probe />
       </BrowserNav>,
     );
+    await act(async () => {});
+    expect(screen.getByTestId("screen-id").textContent).toBe("(none)");
     const before = window.history.length;
     act(() => {
       fireEvent.click(screen.getByTestId("replace-list"));
@@ -171,12 +174,13 @@ describe("useBrowserNavApi + NavProvider", () => {
     expect(window.history.length).toBe(before);
   });
 
-  test("popstate (Browser-Back) re-rendert die aktuelle Route", () => {
+  test("popstate (Browser-Back) re-rendert die aktuelle Route", async () => {
     render(
       <BrowserNav>
         <Probe />
       </BrowserNav>,
     );
+    await act(async () => {});
     act(() => {
       fireEvent.click(screen.getByTestId("go-list"));
     });
@@ -198,35 +202,38 @@ describe("KumikoLink", () => {
     window.history.replaceState(null, "", "/");
   });
 
-  test("rendert <a> mit korrekter href", () => {
+  test("rendert <a> mit korrekter href", async () => {
     render(
       <BrowserNav>
         <KumikoLink to={{ screenId: "task-edit", entityId: "xyz" }}>Edit</KumikoLink>
       </BrowserNav>,
     );
+    await act(async () => {});
     const anchor = screen.getByText("Edit") as HTMLAnchorElement;
     expect(anchor.tagName).toBe("A");
     expect(anchor.getAttribute("href")).toBe("/task-edit/xyz");
   });
 
-  test("left-click wird abgefangen → navigate() statt full reload", () => {
+  test("left-click wird abgefangen → navigate() statt full reload", async () => {
     render(
       <BrowserNav>
         <KumikoLink to={{ screenId: "task-list" }}>Liste</KumikoLink>
       </BrowserNav>,
     );
+    await act(async () => {});
     act(() => {
       fireEvent.click(screen.getByText("Liste"), { button: 0 });
     });
     expect(window.location.pathname).toBe("/task-list");
   });
 
-  test("meta-click (Cmd/Ctrl) wird NICHT abgefangen — Browser öffnet in neuem Tab", () => {
+  test("meta-click (Cmd/Ctrl) wird NICHT abgefangen — Browser öffnet in neuem Tab", async () => {
     render(
       <BrowserNav>
         <KumikoLink to={{ screenId: "task-list" }}>Liste</KumikoLink>
       </BrowserNav>,
     );
+    await act(async () => {});
     const anchor = screen.getByText("Liste") as HTMLAnchorElement;
     let kumikoLinkPreventedDefault: boolean | undefined;
     const observer = (e: Event) => {