@cosmicdrift/kumiko-renderer-web 0.1.0

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

@@ -0,0 +1,261 @@
+// @vitest-environment jsdom
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+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";
+
+const taskEntity = {
+  fields: {
+    title: { type: "text", required: true },
+  },
+} as unknown as EntityDefinition;
+
+const editScreen: EntityEditScreenDefinition = {
+  id: "task-edit",
+  type: "entityEdit",
+  entity: "task",
+  layout: { sections: [{ title: "x", fields: ["title"] }] },
+};
+
+const listScreen: EntityListScreenDefinition = {
+  id: "task-list",
+  type: "entityList",
+  entity: "task",
+  columns: ["title"],
+};
+
+function makeDispatcher(): Dispatcher {
+  return createMockDispatcher({
+    query: (async () => ({
+      isSuccess: true,
+      data: { rows: [], nextCursor: null },
+    })) as unknown as Dispatcher["query"],
+  });
+}
+
+function mountRoot(id = "root"): HTMLDivElement {
+  const existing = document.getElementById(id);
+  if (existing) existing.remove();
+  const root = document.createElement("div");
+  root.id = id;
+  document.body.appendChild(root);
+  return root as HTMLDivElement;
+}
+
+const baseSchema: FeatureSchema = {
+  featureName: "tasks",
+  entities: { task: taskEntity },
+  screens: [editScreen, listScreen],
+};
+
+// createKumikoApp ruft createRoot(...).render(...) direkt auf — React 18+
+// batcht das in einer concurrent-render-phase, deren State-Updates React
+// 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.
+async function mountApp(options: CreateKumikoAppOptions): Promise<void> {
+  await act(async () => {
+    createKumikoApp(options);
+  });
+}
+
+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(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  test("mounts into #root and renders the first screen by default", async () => {
+    mountRoot();
+    await mountApp({ schema: baseSchema, dispatcher: makeDispatcher() });
+    // First screen is entityEdit → form with the title field.
+    await waitFor(() => expect(screen.getByTestId("render-edit-form")).toBeTruthy());
+    expect(screen.getByTestId("field-title")).toBeTruthy();
+  });
+
+  test("screenQn override: mounts the named screen instead of the first", async () => {
+    mountRoot();
+    await mountApp({
+      schema: baseSchema,
+      dispatcher: makeDispatcher(),
+      screenQn: "tasks:screen:task-list",
+    });
+    // findBy* retries for the default timeout — lets the async useQuery
+    // settle without us fishing for intermediate loading state.
+    expect(await screen.findByTestId("render-list-table-empty")).toBeTruthy();
+  });
+
+  test("rootId override: mounts into a different DOM id", async () => {
+    mountRoot("custom-root");
+    await mountApp({
+      schema: baseSchema,
+      rootId: "custom-root",
+      dispatcher: makeDispatcher(),
+    });
+    await waitFor(() => expect(screen.getByTestId("render-edit-form")).toBeTruthy());
+    // And the default #root doesn't pick anything up.
+    expect(document.getElementById("root")).toBeNull();
+  });
+
+  test("missing #root → throws with a helpful message", () => {
+    // No DOM node prepped.
+    expect(() => createKumikoApp({ schema: baseSchema, dispatcher: makeDispatcher() })).toThrow(
+      /#root not found/,
+    );
+  });
+
+  test("empty schema.screens → throws (nothing to render)", () => {
+    mountRoot();
+    const empty: FeatureSchema = { ...baseSchema, screens: [] };
+    expect(() => createKumikoApp({ schema: empty, dispatcher: makeDispatcher() })).toThrow(
+      /no screens/,
+    );
+  });
+
+  test("clientFeatures.columnRenderers → bei Key-Kollision warnt + last-wins gewinnt", async () => {
+    // Zwei Features liefern denselben Renderer-Key — der Merge in
+    // 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(() => {});
+
+    function FirstSwatch({ value }: ColumnRendererProps): ReactNode {
+      return <span data-testid="ca-first">{String(value)}</span>;
+    }
+    function SecondSwatch({ value }: ColumnRendererProps): ReactNode {
+      return <span data-testid="ca-second">{String(value)}</span>;
+    }
+    const colorEntity = {
+      fields: { color: { type: "text" } },
+    } as unknown as EntityDefinition;
+    const conflictSchema: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: colorEntity },
+      screens: [
+        {
+          id: "color-list",
+          type: "entityList",
+          entity: "task",
+          columns: [{ field: "color", renderer: { react: { __component: "Swatch" } } }],
+        },
+      ],
+    };
+
+    mountRoot();
+    await mountApp({
+      schema: conflictSchema,
+      dispatcher: createMockDispatcher({
+        query: (async () => ({
+          isSuccess: true,
+          data: { rows: [{ id: "r1", color: "#ddd" }], nextCursor: null },
+        })) as unknown as Dispatcher["query"],
+      }),
+      clientFeatures: [
+        { name: "first", columnRenderers: { Swatch: FirstSwatch } },
+        { name: "second", columnRenderers: { Swatch: SecondSwatch } },
+      ],
+    });
+
+    // Last-Wins: SecondSwatch ist gemounted, FirstSwatch nicht.
+    expect(await screen.findByTestId("ca-second")).toBeTruthy();
+    expect(screen.queryByTestId("ca-first")).toBeNull();
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('columnRenderer "Swatch" defined by multiple clientFeatures'),
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  test("clientFeatures.columnRenderers → __component-Renderer mounten echtes Component im DOM", async () => {
+    // Beweist die Verdrahtung end-to-end: ClientFeatureDefinition.columnRenderers
+    // → Provider in create-app → useColumnRenderer im DataTable-Cell → JSX
+    // landet im DOM. Schema deklariert die String-Form, Component lebt nur
+    // client-seitig.
+    function Swatch({ value, column }: ColumnRendererProps): ReactNode {
+      return (
+        <span data-testid="ca-swatch">
+          <span data-testid="ca-swatch-value">{String(value)}</span>
+          <span data-testid="ca-swatch-field">{column.field}</span>
+        </span>
+      );
+    }
+    const colorEntity = {
+      fields: { title: { type: "text" }, color: { type: "text" } },
+    } as unknown as EntityDefinition;
+    const colorListScreen: EntityListScreenDefinition = {
+      id: "color-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title", { field: "color", renderer: { react: { __component: "Swatch" } } }],
+    };
+    const colorSchema: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: colorEntity },
+      screens: [colorListScreen],
+    };
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "r1", title: "Alpha", color: "#a1b2c3" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    const clientFeature: ClientFeatureDefinition = {
+      name: "tasks",
+      columnRenderers: { Swatch },
+    };
+
+    mountRoot();
+    await mountApp({
+      schema: colorSchema,
+      dispatcher,
+      clientFeatures: [clientFeature],
+    });
+
+    expect(await screen.findByTestId("ca-swatch")).toBeTruthy();
+    expect(screen.getByTestId("ca-swatch-value").textContent).toBe("#a1b2c3");
+    expect(screen.getByTestId("ca-swatch-field").textContent).toBe("color");
+  });
+
+  test("navAdapter override: eigener Router steuert den aktiven Screen", async () => {
+    // Beweist den Nav-Seam: der Default-Adapter liest location.pathname,
+    // dieser Memory-Adapter hardcoded die Route. Wenn swap funktioniert,
+    // sehen wir den Listen-Screen statt den Form-Screen, ohne `screenQn`
+    // zu setzen und ohne `window.history` zu touchen.
+    mountRoot();
+    const memoryNav: NavApi = {
+      route: { screenId: "task-list" },
+      navigate: () => {},
+      replace: () => {},
+      hrefFor: (target) =>
+        target.entityId !== undefined
+          ? `/${target.screenId}/${target.entityId}`
+          : `/${target.screenId}`,
+      searchParams: {},
+      setSearchParams: () => {},
+    };
+    await mountApp({
+      schema: baseSchema,
+      dispatcher: makeDispatcher(),
+      navAdapter: () => memoryNav,
+    });
+    expect(await screen.findByTestId("render-list-table-empty")).toBeTruthy();
+    // Und definitiv NICHT der Edit-Screen (der wäre die Default-Landing).
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+});

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

@@ -0,0 +1,91 @@
+// @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 { 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", () => {
+  test("trigger zeigt formatiertes Datum (de-DE)", () => {
+    render(
+      <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="de-DE" />,
+    );
+    expect(screen.getByRole("button").textContent).toContain("23. April 2026");
+  });
+
+  test("trigger zeigt formatiertes Datum (en-US)", () => {
+    render(
+      <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="en-US" />,
+    );
+    expect(screen.getByRole("button").textContent).toContain("April 23, 2026");
+  });
+
+  test('trigger zeigt "—" Placeholder bei leerem Wert', () => {
+    render(<DateInput id="d" name="d" value="" onChange={() => undefined} locale="de-DE" />);
+    expect(screen.getByRole("button").textContent).toContain("—");
+  });
+
+  test("kein nativer date-input im DOM (Radix-Popover-Pattern, nicht type=date)", () => {
+    render(
+      <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="de-DE" />,
+    );
+    expect(document.querySelector('input[type="date"]')).toBeNull();
+  });
+
+  test("hasError setzt aria-invalid auf dem Trigger", () => {
+    render(
+      <DateInput
+        id="d"
+        name="d"
+        value="2026-04-23"
+        onChange={() => undefined}
+        locale="de-DE"
+        hasError
+      />,
+    );
+    expect(screen.getByRole("button").getAttribute("aria-invalid")).toBe("true");
+  });
+
+  test("disabled blockt Trigger-Click", () => {
+    render(
+      <DateInput
+        id="d"
+        name="d"
+        value="2026-04-23"
+        onChange={() => undefined}
+        locale="de-DE"
+        disabled
+      />,
+    );
+    const trigger = screen.getByRole("button") as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
+  });
+
+  test("Popover öffnet auf Click und zeigt das DayPicker", async () => {
+    const user = userEvent.setup();
+    render(
+      <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="de-DE" />,
+    );
+    await user.click(screen.getByRole("button"));
+    // DayPicker rendert eine grid-Role für den Calendar; Existenz
+    // reicht als Smoke-Test, ohne brittle DOM-Schnipsel zu pinnen.
+    expect(screen.getByRole("grid")).toBeTruthy();
+  });
+
+  test("Tag-Auswahl im Calendar: onChange feuert ISO yyyy-mm-dd", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    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
+    // 2026 ist ein Samstag — pickbar im sichtbaren Monat.
+    const day25 = screen.getByRole("gridcell", { name: /25/ });
+    fireEvent.click(day25.querySelector("button") as HTMLButtonElement);
+    expect(onChange).toHaveBeenCalledWith("2026-04-25");
+  });
+});

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

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+//
+// DefaultAppShell — pinnt dass user-prop an NavTree durchgereicht wird.
+//
+// Prod-Bug 2026-05-02: DefaultAppShell hatte user-prop NICHT, sysadmin
+// sah keine SystemAdmin-only nav-einträge (resolveNavigation behandelte
+// fehlende user als anonymous → alle role-gated navs ausgeblendet). Test
+// pinst dass DefaultAppShell user nun akzeptiert UND durchreicht.
+
+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";
+
+function makeSchema(): FeatureSchema {
+  return {
+    featureName: "showcase",
+    entities: {},
+    screens: [
+      { id: "public-screen", type: "entityList", entity: "x", columns: [] },
+      { id: "sysadmin-screen", type: "entityList", entity: "x", columns: [] },
+    ],
+    navs: [
+      { id: "public", label: "Public", screen: "public-screen", order: 10 },
+      {
+        id: "sysadmin",
+        label: "Sysadmin",
+        screen: "sysadmin-screen",
+        order: 20,
+        access: { roles: ["SystemAdmin"] },
+      },
+    ],
+  } as FeatureSchema;
+}
+
+describe("DefaultAppShell user-prop forwarding", () => {
+  test("OHNE user-prop → role-gated nav unsichtbar (= prod-bug-vor-fix)", () => {
+    render(
+      <DefaultAppShell brand={<span>Brand</span>} schema={makeSchema()}>
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.queryByText("Sysadmin")).toBeNull();
+  });
+
+  test("MIT user-prop SystemAdmin → sysadmin-nav sichtbar", () => {
+    render(
+      <DefaultAppShell
+        brand={<span>Brand</span>}
+        schema={makeSchema()}
+        user={{ id: "u1", roles: ["SystemAdmin", "User"] }}
+      >
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    expect(screen.getByText("Public")).toBeTruthy();
+    expect(screen.getByText("Sysadmin")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+import type { Dispatcher, DispatcherStatus } from "@cosmicdrift/kumiko-headless";
+import {
+  DispatcherProvider,
+  useDispatcher,
+  useDispatcherStatus,
+  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
+// wenn ein Hook unter Test irgendwohin greift wo er nicht hingehört.
+// Status-Mutationen laufen über den exposed setStatus-Helper, der den
+// statusStore direkt schreibt.
+function makeFakeDispatcher(): {
+  readonly dispatcher: Dispatcher;
+  setStatus(next: DispatcherStatus): void;
+} {
+  const dispatcher = createMockDispatcher({
+    write: async () => {
+      throw new Error("write not used in this test");
+    },
+    query: async () => {
+      throw new Error("query not used in this test");
+    },
+    batch: async () => {
+      throw new Error("batch not used in this test");
+    },
+  });
+  return {
+    dispatcher,
+    setStatus(next) {
+      dispatcher.statusStore.setState(next);
+    },
+  };
+}
+
+function wrapper(dispatcher: Dispatcher) {
+  return ({ children }: { children: ReactNode }) => (
+    <DispatcherProvider dispatcher={dispatcher}>{children}</DispatcherProvider>
+  );
+}
+
+describe("DispatcherContext", () => {
+  test("useDispatcher returns the provided instance", () => {
+    const { dispatcher } = makeFakeDispatcher();
+    const { result } = renderHook(() => useDispatcher(), { wrapper: wrapper(dispatcher) });
+    expect(result.current).toBe(dispatcher);
+  });
+
+  test("useDispatcher throws outside a provider — the app forgot to wrap root", () => {
+    // renderHook surfaces hook-throws as result.current being the error —
+    // we read it directly via render() and catch in the component.
+    const Probe = (): ReactNode => {
+      useDispatcher();
+      return null;
+    };
+    expect(() => render(<Probe />)).toThrow(/no <DispatcherProvider> mounted/);
+  });
+
+  test("useDispatcherStatus reflects current status on mount", () => {
+    const { dispatcher, setStatus } = makeFakeDispatcher();
+    setStatus("offline");
+    const { result } = renderHook(() => useDispatcherStatus(), { wrapper: wrapper(dispatcher) });
+    expect(result.current).toBe("offline");
+  });
+
+  test("useDispatcherStatus updates when statusStore changes", () => {
+    const { dispatcher, setStatus } = makeFakeDispatcher();
+    const { result } = renderHook(() => useDispatcherStatus(), { wrapper: wrapper(dispatcher) });
+    expect(result.current).toBe("online");
+    act(() => setStatus("offline"));
+    expect(result.current).toBe("offline");
+    act(() => setStatus("online"));
+    expect(result.current).toBe("online");
+  });
+
+  // useOptionalDispatcher: identisch zu useDispatcher AUSSER beim Missing-
+  // Provider — dort returnt es undefined statt zu throwen. Genau dafür
+  // existiert es: KumikoScreen.EntityListBody braucht den Dispatcher
+  // optional (rowActions silent skipping wenn keiner mounted ist), und
+  // soll nicht throw'en in Tests die kein Mutation-Wiring brauchen.
+  test("useOptionalDispatcher: returns the instance when provider is mounted", () => {
+    const { dispatcher } = makeFakeDispatcher();
+    const { result } = renderHook(() => useOptionalDispatcher(), {
+      wrapper: wrapper(dispatcher),
+    });
+    expect(result.current).toBe(dispatcher);
+  });
+
+  test("useOptionalDispatcher: returns undefined when no provider mounted (no throw)", () => {
+    const Probe = (): ReactNode => {
+      const d = useOptionalDispatcher();
+      return <span data-testid="d">{d === undefined ? "no-provider" : "found"}</span>;
+    };
+    const { getByTestId } = render(<Probe />);
+    expect(getByTestId("d").textContent).toBe("no-provider");
+  });
+});

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

@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+//
+// Verdrahtungs-Test: beweist dass die ganze UI-Store-Kette zusammenhält:
+//   createLiveDispatcher → dispatcher.statusStore → DispatcherProvider →
+//   useDispatcherStatus → useStore → Re-Render
+//
+// Vorher hatte der Dispatcher zwei Wrapper-Methoden (status() +
+// subscribeStatus()), Konsumenten verdrahteten sie manuell mit
+// useSyncExternalStore. Nach dem Refactor ist statusStore ein read-only
+// Store als Property und useDispatcherStatus reduziert sich auf
+// `useStore(dispatcher.statusStore)`. Wenn dieser Test grün läuft, ist
+// die ganze Kette intakt — eine subtile Renaming-Regression in einem
+// der Glieder würde sich hier zeigen statt erst in Prod.
+//
+// Bewusst KEIN .integration.ts: kein Server, kein DB. Wir mocken den
+// fetch-Layer (das ist die System-Grenze für den Live-Dispatcher) und
+// 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 { 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 {
+  const status = useDispatcherStatus();
+  return <span data-testid="status">{status}</span>;
+}
+
+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 dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <StatusProbe />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("status").textContent).toBe("online");
+  });
+
+  test("network-fail flippt Probe von 'online' nach 'offline'", async () => {
+    const fetch = vi.fn(async () => {
+      throw new Error("ECONNREFUSED");
+    }) as unknown as typeof globalThis.fetch;
+    const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <StatusProbe />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("status").textContent).toBe("online");
+
+    // Echter call löst observeNetworkOutcome(false) → statusStore.setState("offline")
+    // → useStore-Subscriber feuert → Probe re-rendert.
+    await act(async () => {
+      await dispatcher.write("x", {});
+    });
+
+    await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("offline"));
+  });
+
+  test("recovery flippt Probe zurück auf 'online'", async () => {
+    let failNext = true;
+    const fetch = vi.fn(async () => {
+      if (failNext) {
+        failNext = false;
+        throw new Error("boom");
+      }
+      return {
+        ok: true,
+        status: 200,
+        async json() {
+          return { isSuccess: true, data: {} };
+        },
+      } as unknown as Response;
+    }) as unknown as typeof globalThis.fetch;
+    const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <StatusProbe />
+      </DispatcherProvider>,
+    );
+
+    await act(async () => {
+      await dispatcher.write("x", {}); // → offline
+    });
+    await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("offline"));
+
+    await act(async () => {
+      await dispatcher.write("x", {}); // → online
+    });
+    await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("online"));
+  });
+
+  test("statusStore ist read-only auf dem public Dispatcher-Type", () => {
+    const fetch = vi.fn() as unknown as typeof globalThis.fetch;
+    const dispatcher = createLiveDispatcher({ fetch, readCsrf: () => "t" });
+
+    // Der Dispatcher-Contract exponiert statusStore als Store<T> (nicht
+    // WritableStore). Zur Runtime ist setState da (intern liegt ein
+    // WritableStore), aber der public Type versteckt es — UI-Code kann
+    // setState NICHT aufrufen ohne Type-Error. Wenn der Public-Type je
+    // auf WritableStore aufweicht, fällt der ts-expect-error weg und tsc
+    // flagged es.
+    expect(typeof dispatcher.statusStore.subscribe).toBe("function");
+    expect(typeof dispatcher.statusStore.getSnapshot).toBe("function");
+    // Dispatcher.statusStore exposes the read-only Store contract; the
+    // mock returns WritableStore so tests can drive transitions, hence
+    // setState is callable here. Production resolvers ship Store only.
+    void dispatcher.statusStore;
+  });
+});