@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/primitives/toast.tsx

@@ -3,9 +3,9 @@
 // kann. Kein Context-Boilerplate für Konsumenten — der Hook returned
 // einen `toast()`-Trigger, mehr Public-API gibt's nicht.
 //
-// Variants: "default" (neutral) und "destructive" (Fehler-Akzent).
-// Auto-dismiss nach 5s, manuell schließbar via X-Button. Der ARIA-
-// Live-Region-Setup kommt komplett aus Radix.
+// Variant = StatusTone (dieselbe Farb-Familie wie StatusBadge), Default
+// "muted" (neutral). Auto-dismiss nach 5s, manuell schließbar via X-Button.
+// Der ARIA-Live-Region-Setup kommt komplett aus Radix.
 
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as Primitive from "@radix-ui/react-toast";
@@ -21,8 +21,9 @@ import {
   useState,
 } from "react";
 import { cn } from "../lib/cn";
+import type { StatusTone } from "../widgets/status-badge";
 
-export type ToastVariant = "default" | "destructive";
+export type ToastVariant = StatusTone;
 
 export type ToastOptions = {
   readonly title: string;
@@ -111,6 +112,14 @@ const rootClass =
   "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full " +
   "data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full";
 
+const TONE_CLASS: Record<StatusTone, string> = {
+  ok: "border-status-ok/30 bg-status-ok/10 text-status-ok",
+  warn: "border-status-warn/30 bg-status-warn/10 text-status-warn",
+  bad: "border-status-bad/30 bg-status-bad/10 text-status-bad",
+  critical: "border-status-critical/40 bg-status-critical/15 text-status-critical",
+  muted: "border bg-background text-foreground",
+};
+
 function ToastItem({
   entry,
   onClose,
@@ -120,10 +129,7 @@ function ToastItem({
 }): ReactNode {
   const t = useTranslation();
   const learnMore = entry.docsLinkLabel ?? t("kumiko.toast.learn-more");
-  const variantClass =
-    entry.variant === "destructive"
-      ? "destructive group border-destructive bg-destructive text-destructive-foreground"
-      : "border bg-background text-foreground";
+  const variantClass = TONE_CLASS[entry.variant ?? "muted"];
   return (
     <Primitive.Root
       className={cn(rootClass, variantClass)}
@@ -159,7 +165,6 @@ function ToastItem({
           "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
           "hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1",
           "group-hover:opacity-100",
-          "group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50",
         )}
         aria-label={t("kumiko.dialog.close")}
       >

package/src/sse/live-events.ts

@@ -41,7 +41,7 @@ export function createEventSourceLiveEvents(
     try {
       parsed = JSON.parse(raw) as LiveEvent["data"];
     } catch {
-      // Malformed payload — drop it. Besser als einen fangenden Listener
+      // skip: malformed SSE payload, drop it rather than crash all subscribers
       // zu crashen und alle anderen subscribers mitzureißen.
       return;
     }
@@ -52,12 +52,15 @@ export function createEventSourceLiveEvents(
   };
 
   const ensureConnected = (): void => {
+    // skip: EventSource already connected
     if (source !== undefined) return;
+    // skip: no window/EventSource available (SSR/non-browser), nothing to connect
     if (typeof window === "undefined" || typeof EventSource === "undefined") return;
     source = new EventSource(url);
   };
 
   const ensureListenersForEntity = (entityName: string): void => {
+    // skip: not connected yet, listeners get wired once ensureConnected runs
     if (source === undefined) return;
     for (const verb of VERBS) {
       const type = `${entityName}.${verb}`;
@@ -70,7 +73,9 @@ export function createEventSourceLiveEvents(
   };
 
   const closeIfEmpty = (): void => {
+    // skip: subscribers remain, connection still needed
     if (subscribers.size > 0) return;
+    // skip: already closed, nothing to close
     if (source === undefined) return;
     source.close();
     source = undefined;

package/src/styles.css

@@ -80,6 +80,25 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Semantische Status-Farben (Widgets: StatusBadge, Charts, StatCard-Tones).
+     @theme generiert die Utilities (text-status-ok, bg-status-warn/10, …).
+     Dark-Werte; Light-Overrides unten. Apps überschreiben in ihrer styles.css. */
+  --color-status-ok: #22c55e;
+  --color-status-warn: #f59e0b;
+  --color-status-bad: #ef4444;
+  --color-status-critical: #f87171;
+}
+
+/* Card-Chrome-Maße — Framework-Defaults. Eine App überschreibt selektiv in
+   ihrer eigenen styles.css (@theme oder :root, kommt in der Cascade nach dem
+   @import und gewinnt); nicht-überschriebene bleiben auf diesen Werten.
+   Plain :root (nicht @theme) → immer emittiert, kein Tree-Shaking. Defaults
+   reproduzieren exakt p-6 / rounded-xl / shadow-sm. */
+:root {
+  --card-padding: 1.5rem;
+  --card-radius: var(--radius-xl);
+  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
 /* Light-Mode-Overrides — aktiv wenn `<html>` KEINE `.dark` Klasse
@@ -121,6 +140,12 @@
     --color-sidebar-accent-foreground: hsl(0 0% 9%);
     --color-sidebar-border: hsl(0 0% 89.8%);
     --color-sidebar-ring: hsl(0 0% 63%);
+
+    /* Status-Farben Light — kräftiger/dunkler als die Dark-Werte. */
+    --color-status-ok: #16a34a;
+    --color-status-warn: #d97706;
+    --color-status-bad: #dc2626;
+    --color-status-critical: #991b1b;
   }
 
   * {

package/src/tokens.ts

@@ -55,6 +55,7 @@ function persistMode(mode: ThemeMode): void {
  *  in der Host-HTML (siehe Header-Kommentar) macht dasselbe synchron
  *  vor dem ersten Paint. */
 export function applyStoredThemeMode(): void {
+  // skip: no document (SSR/non-DOM context), nothing to apply
   if (typeof document === "undefined") return;
   let stored: string | null = null;
   try {
@@ -63,6 +64,7 @@ export function applyStoredThemeMode(): void {
     // skip: localStorage kann werfen (Private-Mode) — ohne gespeicherte
     // Wahl bleibt der Server-/HTML-Default stehen.
   }
+  // skip: no valid persisted mode stored, keep server/HTML default
   if (stored !== "dark" && stored !== "light") return;
   document.documentElement.classList.toggle("dark", stored === "dark");
   notifyThemeChange();
@@ -99,12 +101,14 @@ export function useBrowserTokensApi(): TokensApi {
     tokens: cssVarTokens,
     mode,
     setMode: (next) => {
+      // skip: no document (SSR/non-DOM context), nothing to toggle
       if (typeof document === "undefined") return;
       document.documentElement.classList.toggle("dark", next === "dark");
       persistMode(next);
       notifyThemeChange();
     },
     toggleMode: () => {
+      // skip: no document (SSR/non-DOM context), nothing to toggle
       if (typeof document === "undefined") return;
       const nowDark = document.documentElement.classList.toggle("dark");
       persistMode(nowDark ? "dark" : "light");

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

@@ -0,0 +1,66 @@
+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("fallback renders while image is unloaded", () => {
+    render(
+      <Avatar>
+        <AvatarImage src="/photo.png" alt="User" />
+        <AvatarFallback>FB</AvatarFallback>
+      </Avatar>,
+    );
+    // happy-dom never loads images, so AvatarImage never reaches "loaded" —
+    // this only exercises the unloaded state, not an actual load failure.
+    expect(screen.getByText("FB")).toBeTruthy();
+    expect(document.querySelector('[data-slot="avatar-fallback"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="avatar-image"]')).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,115 @@
+// 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 { act, 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", async () => {
+    const fetchSpy = mock(async () => ({
+      ok: true,
+      json: async () => ({ id: "other", builtAt: "" }),
+    }));
+    globalThis.fetch = fetchSpy as typeof globalThis.fetch;
+
+    render(<UpdateChecker />);
+    await act(async () => {});
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+});