@cosmicdrift/kumiko-renderer-web 0.159.1 → 0.160.0

package/package.json

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

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

@@ -0,0 +1,75 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ActionMenu, type MenuItemDef } from "../primitives/action-menu";
+
+describe("ActionMenu", () => {
+  test("renders trigger with aria-label and default testId", () => {
+    render(
+      <ActionMenu
+        trigger={<span>Open</span>}
+        triggerLabel="More actions"
+        items={[{ kind: "item", id: "a", label: "Alpha", onSelect: () => {} }]}
+      />,
+    );
+    const trigger = screen.getByTestId("action-menu-trigger");
+    expect(trigger.getAttribute("aria-label")).toBe("More actions");
+    expect(screen.getByText("Open")).toBeTruthy();
+  });
+
+  test("opens menu: item, separator, label, shortcut, danger, icon", async () => {
+    const user = userEvent.setup();
+    const onSelect = mock(() => {});
+    const items: MenuItemDef[] = [
+      { kind: "label", label: "Section" },
+      {
+        kind: "item",
+        id: "edit",
+        label: "Edit",
+        icon: <span data-testid="edit-icon">✎</span>,
+        shortcut: "⌘E",
+        onSelect,
+      },
+      { kind: "separator" },
+      {
+        kind: "item",
+        id: "delete",
+        label: "Delete",
+        variant: "danger",
+        onSelect: () => {},
+      },
+      {
+        kind: "item",
+        id: "disabled",
+        label: "Disabled",
+        disabled: true,
+        onSelect: () => {},
+      },
+    ];
+
+    render(
+      <ActionMenu
+        trigger={<span>Menu</span>}
+        items={items}
+        align="start"
+        minWidth="12rem"
+        testId="am"
+      />,
+    );
+    await user.click(screen.getByTestId("am"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Section")).toBeTruthy();
+      expect(screen.getByTestId("action-menu-item-edit")).toBeTruthy();
+      expect(screen.getByTestId("edit-icon")).toBeTruthy();
+      expect(screen.getByText("⌘E")).toBeTruthy();
+      expect(screen.getByTestId("action-menu-item-delete").className).toContain("text-destructive");
+      expect(screen.getByTestId("action-menu-item-disabled").getAttribute("data-disabled")).toBe(
+        "",
+      );
+    });
+
+    await user.click(screen.getByTestId("action-menu-item-edit"));
+    expect(onSelect).toHaveBeenCalled();
+  });
+});

package/src/__tests__/breadcrumb.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+
+describe("Breadcrumb", () => {
+  test("renders nav list with links, separators, page, ellipsis", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbEllipsis />
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <span data-testid="custom-sep">/</span>
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/docs">Docs</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    expect(screen.getByLabelText("breadcrumb")).toBeTruthy();
+    expect(screen.getByText("Home").getAttribute("href")).toBe("/");
+    expect(screen.getByText("More")).toBeTruthy();
+    expect(screen.getByTestId("custom-sep")).toBeTruthy();
+    expect(screen.getByText("Docs").getAttribute("href")).toBe("/docs");
+    const page = screen.getByText("Current");
+    expect(page.getAttribute("aria-current")).toBe("page");
+    expect(page.getAttribute("aria-disabled")).toBe("true");
+  });
+});

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__/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/ui/__tests__/avatar.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "../../__tests__/test-utils";
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "../avatar";
+
+describe("ui/Avatar", () => {
+  test.each(["default", "sm", "lg"] as const)("size=%s sets data-size on root", (size) => {
+    render(
+      <Avatar size={size} data-testid="av">
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>,
+    );
+    expect(screen.getByTestId("av").getAttribute("data-size")).toBe(size);
+    expect(document.querySelector('[data-slot="avatar"]')).not.toBeNull();
+  });
+
+  test("AvatarImage with failed load shows AvatarFallback", () => {
+    render(
+      <Avatar>
+        <AvatarImage src="/photo.png" alt="User" />
+        <AvatarFallback>FB</AvatarFallback>
+      </Avatar>,
+    );
+    // happy-dom does not load images — Radix keeps the fallback visible
+    expect(screen.getByText("FB")).toBeTruthy();
+    expect(document.querySelector('[data-slot="avatar-fallback"]')).not.toBeNull();
+  });
+
+  test("AvatarBadge renders inside avatar", () => {
+    render(
+      <Avatar data-testid="av">
+        <AvatarFallback>AB</AvatarFallback>
+        <AvatarBadge data-testid="badge">!</AvatarBadge>
+      </Avatar>,
+    );
+    expect(screen.getByTestId("badge")).toBeTruthy();
+    expect(document.querySelector('[data-slot="avatar-badge"]')).not.toBeNull();
+  });
+
+  test("AvatarGroup stacks avatars and AvatarGroupCount shows overflow", () => {
+    render(
+      <AvatarGroup data-testid="group">
+        <Avatar>
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount data-testid="count">+3</AvatarGroupCount>
+      </AvatarGroup>,
+    );
+    expect(screen.getByTestId("group")).toBeTruthy();
+    expect(screen.getByTestId("count").textContent).toBe("+3");
+    expect(document.querySelector('[data-slot="avatar-group"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="avatar-group-count"]')).not.toBeNull();
+  });
+});
+

package/src/ui/__tests__/sheet.test.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, mock, test } from "bun:test";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "../../__tests__/test-utils";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../sheet";
+
+describe("Sheet", () => {
+  test.each([
+    ["right", "slide-in-from-right"],
+    ["left", "slide-in-from-left"],
+    ["top", "slide-in-from-top"],
+    ["bottom", "slide-in-from-bottom"],
+  ] as const)("open sheet side=%s applies side-specific slide class", (side, slideClass) => {
+    render(
+      <Sheet open>
+        <SheetContent side={side}>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+          Body
+          <SheetFooter>Footer</SheetFooter>
+        </SheetContent>
+      </Sheet>,
+    );
+    const content = document.querySelector('[data-slot="sheet-content"]');
+    expect(content).not.toBeNull();
+    expect(content?.className).toContain(slideClass);
+    expect(screen.getByText("Title")).toBeTruthy();
+    expect(screen.getByText("Description")).toBeTruthy();
+    expect(screen.getByText("Body")).toBeTruthy();
+    expect(screen.getByText("Footer")).toBeTruthy();
+    expect(document.querySelector('[data-slot="sheet-overlay"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="sheet-header"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="sheet-footer"]')).not.toBeNull();
+  });
+
+  test("showCloseButton=true renders accessible Close control", () => {
+    render(
+      <Sheet open>
+        <SheetContent showCloseButton>
+          Content
+        </SheetContent>
+      </Sheet>,
+    );
+    const content = document.querySelector('[data-slot="sheet-content"]');
+    const closeButton = content?.querySelector("button");
+    expect(closeButton).not.toBeNull();
+    expect(closeButton?.textContent).toContain("Close");
+  });
+
+  test("showCloseButton=false hides Close control", () => {
+    render(
+      <Sheet open>
+        <SheetContent showCloseButton={false}>
+          Content
+        </SheetContent>
+      </Sheet>,
+    );
+    const content = document.querySelector('[data-slot="sheet-content"]');
+    expect(content?.querySelector("button")).toBeNull();
+  });
+
+  test("Close button calls onOpenChange(false)", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = mock();
+    render(
+      <Sheet open onOpenChange={onOpenChange}>
+        <SheetContent>
+          Content
+        </SheetContent>
+      </Sheet>,
+    );
+    const closeButton = document.querySelector('[data-slot="sheet-content"] button') as HTMLButtonElement;
+    await user.click(closeButton);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  test("SheetTrigger and SheetClose render with data-slot", () => {
+    render(
+      <Sheet open>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent showCloseButton={false}>
+          <SheetClose data-testid="sheet-dismiss">Dismiss</SheetClose>
+        </SheetContent>
+      </Sheet>,
+    );
+    expect(document.querySelector('[data-slot="sheet-trigger"]')).not.toBeNull();
+    expect(screen.getByTestId("sheet-dismiss")).toBeTruthy();
+    expect(document.querySelector('[data-slot="sheet-close"]')).not.toBeNull();
+  });
+});
+
+

package/src/version/__tests__/update-checker.test.tsx

@@ -0,0 +1,114 @@
+// UpdateChecker DOM coverage: fetchServerBuild + banner on id drift.
+// shouldShowUpdate/isKumikoBuild stay in update-checker.test.ts (unit).
+
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import { screen, waitFor } from "@testing-library/react";
+import { render } from "../../__tests__/test-utils";
+import { UpdateChecker } from "../update-checker";
+
+const LOADED_BUILD = { id: "build-loaded", builtAt: "2026-01-01T00:00:00Z" };
+const originalFetch = globalThis.fetch;
+
+function mockBuildInfoFetch(handler: (url: string) => Promise<Response> | Response): void {
+  globalThis.fetch = mock(async (input: RequestInfo | URL) => {
+    const url = typeof input === "string" ? input : input.toString();
+    return handler(url);
+  }) as typeof globalThis.fetch;
+}
+
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+  delete window.__KUMIKO_BUILD__;
+});
+
+describe("UpdateChecker", () => {
+  test("build-info drift → status banner + reload button", async () => {
+    window.__KUMIKO_BUILD__ = LOADED_BUILD;
+    mockBuildInfoFetch(async (url) => {
+      if (url.endsWith("/build-info.json")) {
+        return {
+          ok: true,
+          json: async () => ({ id: "build-server", builtAt: "2026-01-02T00:00:00Z" }),
+        } as Response;
+      }
+      throw new Error(`unexpected fetch: ${url}`);
+    });
+
+    render(<UpdateChecker />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toBeTruthy();
+    });
+    expect(screen.getByText("A new version is available.")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Reload" })).toBeTruthy();
+  });
+
+  test("build-info !ok → no banner", async () => {
+    window.__KUMIKO_BUILD__ = LOADED_BUILD;
+    mockBuildInfoFetch(async (url) => {
+      if (url.endsWith("/build-info.json")) {
+        return { ok: false, json: async () => ({}) } as Response;
+      }
+      throw new Error(`unexpected fetch: ${url}`);
+    });
+
+    render(<UpdateChecker />);
+
+    await waitFor(() => {
+      expect(globalThis.fetch).toHaveBeenCalled();
+    });
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  test("invalid build-info JSON shape → no banner", async () => {
+    window.__KUMIKO_BUILD__ = LOADED_BUILD;
+    mockBuildInfoFetch(async (url) => {
+      if (url.endsWith("/build-info.json")) {
+        return { ok: true, json: async () => ({ id: "" }) } as Response;
+      }
+      throw new Error(`unexpected fetch: ${url}`);
+    });
+
+    render(<UpdateChecker />);
+
+    await waitFor(() => {
+      expect(globalThis.fetch).toHaveBeenCalled();
+    });
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  test("broken JSON (parse error) → no banner", async () => {
+    window.__KUMIKO_BUILD__ = LOADED_BUILD;
+    mockBuildInfoFetch(async (url) => {
+      if (url.endsWith("/build-info.json")) {
+        return {
+          ok: true,
+          json: async () => {
+            throw new SyntaxError("Unexpected token");
+          },
+        } as Response;
+      }
+      throw new Error(`unexpected fetch: ${url}`);
+    });
+
+    render(<UpdateChecker />);
+
+    await waitFor(() => {
+      expect(globalThis.fetch).toHaveBeenCalled();
+    });
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  test("no __KUMIKO_BUILD__ → no fetch, no banner", () => {
+    const fetchSpy = mock(async () => ({
+      ok: true,
+      json: async () => ({ id: "other", builtAt: "" }),
+    }));
+    globalThis.fetch = fetchSpy as typeof globalThis.fetch;
+
+    render(<UpdateChecker />);
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+});