@cosmicdrift/kumiko-renderer-web 0.158.2 → 0.160.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.158.2",
+  "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.158.2",
-    "@cosmicdrift/kumiko-headless": "0.158.2",
-    "@cosmicdrift/kumiko-renderer": "0.158.2",
+    "@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__/kumiko-screen.test.tsx

@@ -499,6 +499,31 @@ describe("KumikoScreen", () => {
     expect(bannerText).not.toBe("errors.access.denied");
   });
 
+  test("entityList: query-Error zeigt übersetzten Text statt rohem i18nKey (issue #1193)", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "access_denied",
+          httpStatus: 403,
+          i18nKey: "errors.access.denied",
+          message: "",
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="tasks:screen:task-list" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-error")).toBeTruthy());
+    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
+    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
+    expect(bannerText).not.toBe("errors.access.denied");
+  });
+
   // RowActions-Mapping (Tier 2.7a Resolution-Layer): pinst dass
   // EntityListBody die Schema-Form (handler-QN, label-i18nKey, payload-
   // builder, visible-Function, confirmLabel) zu DataTableRowAction

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/__tests__/xss-safety.test.tsx

@@ -0,0 +1,58 @@
+//
+// Pins the XSS-escaping behavior for tenant-/pattern-authored content
+// (kumiko-framework#1321). renderer-web has no dangerouslySetInnerHTML
+// and no field-renderer path that wires tenant data into href/src — this
+// test guards JSX auto-escaping against future regressions (e.g. if
+// someone adds rich-text/markdown support via dangerouslySetInnerHTML),
+// and pins the Link primitive's scheme guard (kumiko-framework#1365)
+// against javascript:/data: hrefs as defense-in-depth.
+
+import { describe, expect, test } from "bun:test";
+import { defaultPrimitives } from "../primitives";
+import { StatCard } from "../widgets/stat";
+import { render, screen } from "./test-utils";
+
+const PAYLOAD = '<script>window.__xss = true;</script><img src=x onerror="window.__xss = true">';
+const UNSAFE_HREFS = [
+  "javascript:window.__xss = true",
+  "data:text/html,<script>window.__xss=true</script>",
+];
+
+describe("XSS-safety (tenant-authored content)", () => {
+  test("Text-Primitive rendert Payload als Text, nicht als HTML", () => {
+    render(<defaultPrimitives.Text testId="txt">{PAYLOAD}</defaultPrimitives.Text>);
+    const node = screen.getByTestId("txt");
+    expect(node.textContent).toBe(PAYLOAD);
+    expect(node.querySelector("script")).toBeNull();
+    expect(node.querySelector("img")).toBeNull();
+  });
+
+  test("StatCard-Widget rendert label/value/sub als Text, nicht als HTML", () => {
+    render(<StatCard testId="stat" label={PAYLOAD} value={PAYLOAD} sub={PAYLOAD} />);
+    const node = screen.getByTestId("stat");
+    expect(node.querySelector("script")).toBeNull();
+    expect(node.querySelector("img")).toBeNull();
+    expect(node.textContent).toContain(PAYLOAD);
+  });
+
+  test.each(UNSAFE_HREFS)("Link-Primitive neutralisiert unsicheren href-Scheme: %s", (href) => {
+    render(
+      <defaultPrimitives.Link testId="link" href={href}>
+        text
+      </defaultPrimitives.Link>,
+    );
+    const node = screen.getByTestId("link");
+    expect(node.getAttribute("href")).toBe("#");
+  });
+
+  test("Link-Primitive lässt sichere hrefs (https/mailto/relativ) unverändert", () => {
+    for (const href of ["https://example.com", "mailto:a@example.com", "/relative/path"]) {
+      render(
+        <defaultPrimitives.Link testId={`link-${href}`} href={href}>
+          text
+        </defaultPrimitives.Link>,
+      );
+      expect(screen.getByTestId(`link-${href}`).getAttribute("href")).toBe(href);
+    }
+  });
+});

package/src/app/__tests__/first-open-screen-qn.test.ts

@@ -63,4 +63,15 @@ describe("firstOpenScreenQn", () => {
     ];
     expect(firstOpenScreenQn(features)).toBeUndefined();
   });
+
+  test("resolves a bare screen id in nav to the qualified screen name", () => {
+    const features: readonly FeatureSchema[] = [
+      feature({
+        featureName: "shop",
+        screens: [customScreen({ id: "catalog" })],
+        navs: [{ id: "catalog", label: "shop:nav.catalog", screen: "catalog" }],
+      }),
+    ];
+    expect(firstOpenScreenQn(features)).toBe("shop:screen:catalog");
+  });
 });

package/src/primitives/index.tsx

@@ -1661,6 +1661,15 @@ function DefaultText({ variant = "body", children, testId }: TextProps): ReactNo
 
 // ---- Link (anchor mit Button-/Muted-Optik) ----
 
+// http(s)/mailto or scheme-less (relative/anchor) allowed; javascript:, data:,
+// vbscript:, etc. rejected. Mirrors renderer-mail-html's renderSafeMarkdown
+// href guard — no sanitizer dependency needed for a four-line regex check.
+function isSafeHref(href: string): boolean {
+  const trimmed = href.trim().toLowerCase();
+  if (!/^[a-z][a-z0-9+.-]*:/.test(trimmed)) return true;
+  return /^(?:https?|mailto):/.test(trimmed);
+}
+
 // `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
 // der Standard für „weiter zu"-Navigationen nach Success-States (ehem.
 // authButtonClass), `muted` der dezente Sekundär-Link (ehem.
@@ -1681,7 +1690,7 @@ function DefaultLink({
         : "text-primary underline-offset-4 hover:underline";
   return (
     <a
-      href={href}
+      href={isSafeHref(href) ? href : "#"}
       target={target}
       rel={target === "_blank" ? "noreferrer" : undefined}
       data-testid={testId}

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();
+  });
+});