@cosmicdrift/kumiko-renderer-web 0.1.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cosmicdrift/kumiko-renderer-web",
+  "version": "0.1.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>",
+  "type": "module",
+  "kumiko": {
+    "runtime": "client"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "@cosmicdrift/kumiko-dispatcher-live": "workspace:*",
+    "@cosmicdrift/kumiko-headless": "workspace:*",
+    "@cosmicdrift/kumiko-renderer": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.11.0",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "jsdom": "^29.1.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cosmicdriftgamestudio/kumiko-framework.git",
+    "directory": "packages/renderer-web"
+  },
+  "homepage": "https://kumiko.so",
+  "bugs": {
+    "url": "https://github.com/cosmicdriftgamestudio/kumiko-framework/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/__tests__/avatar.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { describe, expect, test } from "vitest";
+import { Avatar } from "../layout/avatar";
+import { render, screen } from "./test-utils";
+
+describe("Avatar", () => {
+  test("Initials aus 'Daniel Hennig' → 'DH'", () => {
+    render(<Avatar id="user-1" label="Daniel Hennig" />);
+    expect(screen.getByRole("img", { name: "Daniel Hennig" }).textContent).toBe("DH");
+  });
+
+  test("Initials aus single-name 'Daniel' → 'DA' (erste 2 Buchstaben)", () => {
+    render(<Avatar id="user-2" label="Daniel" />);
+    expect(screen.getByRole("img", { name: "Daniel" }).textContent).toBe("DA");
+  });
+
+  test("Initials aus email 'alice@example.com' → 'AL' (erste 2 Buchstaben)", () => {
+    render(<Avatar id="user-3" label="alice@example.com" />);
+    expect(screen.getByRole("img", { name: "alice@example.com" }).textContent).toBe("AL");
+  });
+
+  test("empty label → '?'-Fallback", () => {
+    render(<Avatar id="user-4" label="" />);
+    expect(screen.getByRole("img", { name: "" }).textContent).toBe("?");
+  });
+
+  test("gleiche id → gleiche Color-Klasse (deterministic)", () => {
+    const { rerender, container } = render(<Avatar id="stable-id" label="A B" />);
+    const colorBefore = container.querySelector("[role='img']")?.className;
+    rerender(<Avatar id="stable-id" label="C D" />);
+    const colorAfter = container.querySelector("[role='img']")?.className;
+    expect(colorBefore).toBe(colorAfter);
+  });
+});

package/src/__tests__/combobox.test.tsx

@@ -0,0 +1,240 @@
+// @vitest-environment jsdom
+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";
+
+// Tier 2.1c: Combobox-Primitive Smoke-Tests. cmdk + Radix-Popover
+// rendern Portals; jsdom resolved sie auf document.body. Wir testen
+// die Trigger-Render-Form (Single + Multi mit Tags) und den Click→
+// Select Roundtrip. Volltext-Filter-Mechanik ist cmdk-internal und
+// dort getestet — unsere Tests pinnen nur das Wiring.
+
+describe("ComboboxInput (Tier 2.1c)", () => {
+  test("single-mode: Trigger zeigt placeholder wenn value leer", () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+        ]}
+        placeholder="Pick one"
+      />,
+    );
+    expect(screen.getByText("Pick one")).toBeTruthy();
+  });
+
+  test("single-mode: Trigger zeigt Label des selected value", () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value="b"
+        onChange={() => {}}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Beta")).toBeTruthy();
+  });
+
+  test("single-mode: Click auf Item → onChange mit value, Popover schließt", async () => {
+    const user = userEvent.setup();
+    const changes: string[] = [];
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={(v) => changes.push(v as string)}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+        ]}
+      />,
+    );
+    // Trigger klicken → Popover öffnet, Items rendern
+    await user.click(screen.getByTestId("combobox-combo"));
+    // cmdk Items haben das role="option" attr
+    const beta = await screen.findByText("Beta");
+    await user.click(beta);
+    expect(changes).toEqual(["b"]);
+  });
+
+  test("multi-mode: leerer state zeigt placeholder", () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value={[]}
+        onChange={() => {}}
+        options={[{ value: "a", label: "Alpha" }]}
+        multiple
+        placeholder="Pick tags"
+      />,
+    );
+    expect(screen.getByText("Pick tags")).toBeTruthy();
+  });
+
+  test("multi-mode: vorhandene values rendern als Tags mit Label", () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value={["a", "b"]}
+        onChange={() => {}}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+          { value: "c", label: "Gamma" },
+        ]}
+        multiple
+      />,
+    );
+    expect(screen.getByText("Alpha")).toBeTruthy();
+    expect(screen.getByText("Beta")).toBeTruthy();
+    // Gamma ist nicht selected → kein Tag im Trigger.
+    expect(screen.queryByText("Gamma")).toBeNull();
+  });
+
+  test("multi-mode: Click auf neues Item → onChange mit erweitertem Array", async () => {
+    const user = userEvent.setup();
+    const changes: (readonly string[])[] = [];
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value={["a"]}
+        onChange={(v) => changes.push(v as readonly string[])}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+        ]}
+        multiple
+      />,
+    );
+    await user.click(screen.getByTestId("combobox-combo"));
+    // In Multi-Mode mountet cmdk die Items im Portal — wir suchen
+    // das Item per Text. Beim Klick toggled der Combobox die value.
+    const items = await screen.findAllByText("Beta");
+    // Erstes "Beta" könnte das selected-Tag oben sein; in der List
+    // rendert cmdk eine zweite Instanz. Tag ist nicht da (a war
+    // selected, b nicht), also ist nur das List-Item da.
+    await user.click(items[items.length - 1] as HTMLElement);
+    expect(changes).toHaveLength(1);
+    expect([...(changes[0] ?? [])].sort()).toEqual(["a", "b"]);
+  });
+
+  test("disabled: Trigger ist disabled", () => {
+    render(
+      <ComboboxInput id="combo" name="combo" value="" onChange={() => {}} options={[]} disabled />,
+    );
+    expect((screen.getByTestId("combobox-combo") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  // Regression aus PublicStatus-Live-Debug: Multi-Mode + Remote-Search
+  // (= Reference-Field mit `multiple: true`) — Click auf Item hat im
+  // Browser nur Focus gesetzt, nicht onChange ausgelöst. Non-Remote
+  // Multi-Mode (Test oben) funktionierte, jeder andere Pfad auch — nur
+  // diese Kombination war kaputt.
+  test("multi-mode + remote-mode: Click auf Item → onChange mit erweitertem Array", async () => {
+    const user = userEvent.setup();
+    const changes: (readonly string[])[] = [];
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value={[]}
+        onChange={(v) => changes.push(v as readonly string[])}
+        options={[
+          { value: "a", label: "Alpha" },
+          { value: "b", label: "Beta" },
+        ]}
+        multiple
+        // Remote-Mode: onSearchChange-Prop signalisiert "server-side
+        // filter", also das Pattern aus Reference-Inputs in Forms.
+        onSearchChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByTestId("combobox-combo"));
+    const items = await screen.findAllByText("Beta");
+    await user.click(items[items.length - 1] as HTMLElement);
+    expect(changes).toHaveLength(1);
+    expect(changes[0]).toEqual(["b"]);
+  });
+
+  // Tier 2.7e Remote-Mode: typed-search-API.
+  test("remote-mode: render mit onSearchChange + loading mountet ohne crash", () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[{ value: "a", label: "Alpha" }]}
+        onSearchChange={() => {}}
+        loading
+      />,
+    );
+    expect(screen.getByTestId("combobox-combo")).toBeTruthy();
+  });
+
+  // Audit-Fix #3: Real-Search-Verhalten ohne fake-Timers (collidieren
+  // mit RTL findBy-polling). defaultOpen forciert den Popover-Mount,
+  // dann triggern wir change-event direkt am Search-Input und warten
+  // auf real-time 350ms damit der 300ms-Debounce durch ist.
+  test("remote-mode: Search-Input typing → onSearchChange debounced (300ms)", async () => {
+    const searches: string[] = [];
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[{ value: "a", label: "Alpha" }]}
+        onSearchChange={(q) => searches.push(q)}
+        defaultOpen
+      />,
+    );
+    const searchInput = await screen.findByRole("combobox");
+    await act(async () => {
+      fireEvent.change(searchInput, { target: { value: "abc" } });
+    });
+    // Real-time Debounce-Window — kein fake-timers weil das mit
+    // findByRole's polling kollidiert.
+    await new Promise((resolve) => setTimeout(resolve, 350));
+    expect(searches[searches.length - 1]).toBe("abc");
+  });
+
+  test("remote-mode: loading=true zeigt 'Loading…' im Empty-State", async () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[]}
+        onSearchChange={() => {}}
+        loading
+        defaultOpen
+      />,
+    );
+    const loadingText = await screen.findByText("Loading…");
+    expect(loadingText).toBeTruthy();
+  });
+
+  test("hasError: Trigger hat aria-invalid=true", () => {
+    render(
+      <ComboboxInput id="combo" name="combo" value="" onChange={() => {}} options={[]} hasError />,
+    );
+    expect(screen.getByTestId("combobox-combo").getAttribute("aria-invalid")).toBe("true");
+  });
+});

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

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+//
+// Unit-Tests für den configEdit-Screen-Type. Decken die Pfade ab die
+// Integration + E2E nur indirekt sehen:
+//   - Initial-Load via config:query:values + Pre-Fill aus values[qn]
+//   - customSubmit dispatcht pro geändertem Field einen separaten
+//     config:write:set Call mit dem qualifizierten Key + scope
+//   - Save-Button Greying via controller.rebase nach Success
+//   - Loading-State während config:query:values noch läuft
+
+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 = {
+  id: "settings",
+  type: "configEdit",
+  scope: "tenant",
+  configKeys: {
+    siteName: "demo:config:site-name",
+    maxUploadMb: "demo:config:max-upload-mb",
+  },
+  fields: {
+    siteName: { type: "text", required: true },
+    maxUploadMb: { type: "number" },
+    // @cast-boundary inline schema-author shape — FieldDefinition union too narrow
+  } as ConfigEditScreenDefinition["fields"],
+  layout: {
+    sections: [{ title: "Basics", fields: ["siteName", "maxUploadMb"] }],
+  },
+};
+
+const schema: FeatureSchema = {
+  featureName: "demo",
+  entities: {},
+  screens: [settingsScreen],
+};
+
+describe("KumikoScreen / configEdit", () => {
+  test("loading state while config:query:values is pending", async () => {
+    let resolveQuery: (value: unknown) => void = () => {};
+    const queryPending = new Promise((resolve) => {
+      resolveQuery = resolve;
+    });
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (() => queryPending) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="demo:screen:settings" />
+      </DispatcherProvider>,
+    );
+
+    // Solange die query pending ist, rendert ConfigEditBody den
+    // Loading-Banner (kein Form, kein vorzeitiges leeres Feld).
+    expect(screen.getByTestId("kumiko-screen-loading")).toBeTruthy();
+
+    // Cleanup: Query auflösen damit der useEffect-Subscriber sauber
+    // unmounten kann ohne open-handle-Warning.
+    resolveQuery({ isSuccess: true, data: {} });
+    await waitFor(() => screen.queryByTestId("render-edit-form"));
+  });
+
+  test("loaded values pre-fill the form (string + numeric coercion)", async () => {
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          "demo:config:site-name": { value: "Acme", scope: "tenant" },
+          "demo:config:max-upload-mb": { value: 25, scope: "tenant" },
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="demo:screen:settings" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const siteInput = screen.getByTestId("field-siteName").querySelector("input");
+    const maxInput = screen.getByTestId("field-maxUploadMb").querySelector("input");
+    expect(siteInput?.value).toBe("Acme");
+    expect(maxInput?.value).toBe("25");
+  });
+
+  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 dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          "demo:config:site-name": { value: "Acme", scope: "tenant" },
+          "demo:config:max-upload-mb": { value: 25, scope: "tenant" },
+        },
+      })) as unknown as Dispatcher["query"],
+      batch: batchSpy as unknown as Dispatcher["batch"],
+    });
+
+    const user = userEvent.setup();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="demo:screen:settings" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const siteInput = screen.getByTestId("field-siteName").querySelector("input");
+    if (!siteInput) throw new Error("expected siteName input");
+
+    // Ändert NUR siteName — der Batch darf nur EIN Command enthalten,
+    // nicht beide (unchanged-Field bleibt aus).
+    await user.clear(siteInput);
+    await user.type(siteInput, "Globex");
+    await user.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(batchSpy).toHaveBeenCalled());
+    expect(batchSpy).toHaveBeenCalledTimes(1);
+    const commands = batchSpy.mock.calls[0]?.[0];
+    if (!commands) throw new Error("batchSpy not called");
+    expect(commands).toHaveLength(1);
+    expect(commands[0]).toEqual({
+      type: "config:write:set",
+      payload: { key: "demo:config:site-name", value: "Globex", scope: "tenant" },
+    });
+  });
+
+  test("save-button disabled after successful submit (rebase fired)", async () => {
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { "demo:config:site-name": { value: "Acme", scope: "tenant" } },
+      })) as unknown as Dispatcher["query"],
+      batch: (async () => ({
+        isSuccess: true,
+        results: [],
+      })) as unknown as Dispatcher["batch"],
+    });
+
+    const user = userEvent.setup();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="demo:screen:settings" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const siteInput = screen.getByTestId("field-siteName").querySelector("input");
+    if (!siteInput) throw new Error("expected siteName input");
+
+    await user.clear(siteInput);
+    await user.type(siteInput, "Globex");
+    const submit = screen.getByTestId("render-edit-submit") as HTMLButtonElement;
+    await user.click(submit);
+
+    // After rebase, draft == server-snapshot, isUnchanged=true,
+    // Button wird disabled. Ohne customSubmit-rebase-Wiring blieb
+    // dieser State stale (regression-guard).
+    await waitFor(() => expect(submit.disabled).toBe(true));
+  });
+});