@cosmicdrift/kumiko-renderer-web 0.105.1 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.105.1",
+  "version": "0.108.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.105.1",
-    "@cosmicdrift/kumiko-headless": "0.105.1",
-    "@cosmicdrift/kumiko-renderer": "0.105.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.108.0",
+    "@cosmicdrift/kumiko-headless": "0.108.0",
+    "@cosmicdrift/kumiko-renderer": "0.108.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__/config-edit.test.tsx

@@ -6,6 +6,11 @@
 //     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
+//
+// `as unknown as Dispatcher["query"/"batch"]` throughout: each inline mock
+// lambda only implements the one overload a given test exercises, never the
+// full overloaded Dispatcher signature — the missing overloads are never
+// called at runtime.
 
 import { describe, expect, mock, test } from "bun:test";
 import type { ConfigEditScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";

package/src/__tests__/located-timestamp-input.test.tsx

@@ -82,13 +82,29 @@ describe("Input kind=locatedTimestamp", () => {
     expect(atSchema.safeParse(last.at).success).toBe(true);
   });
 
-  test("leeres Datum + Uhrzeit ohne Zone → undefined (Feld leer)", () => {
+  test("kein Input → noch kein onChange (Sanity, Startwert bleibt Sentinel)", () => {
     let last: { at: string; tz: string } | undefined | "sentinel" = "sentinel";
     render(<ControlledLocated initial="" onEmit={(v) => (last = v)} />);
-    // Kein Input → noch kein onChange. Sanity: Startwert blieb Sentinel.
     expect(last).toBe("sentinel");
   });
 
+  test("Datum + Uhrzeit wieder leeren (Zone nie gesetzt) → onChange(undefined)", () => {
+    const seen: Array<{ at: string; tz: string } | undefined> = [];
+    const view = render(<ControlledLocated initial="" onEmit={(v) => seen.push(v)} />);
+    const { date, time } = inputs(view.container);
+
+    fireEvent.change(date, { target: { value: "2026-04-03" } });
+    fireEvent.change(time, { target: { value: "10:00" } });
+    expect(seen.at(-1)?.at).toBe("2026-04-03T10:00");
+
+    // Both fields cleared again — the emit() undefined-branch (`nextAt === ""
+    // && nextTz === ""`) has zero coverage otherwise; the test above only
+    // checks that NO change fires before any input, not the clear-after-fill path.
+    fireEvent.change(date, { target: { value: "" } });
+    fireEvent.change(time, { target: { value: "" } });
+    expect(seen.at(-1)).toBeUndefined();
+  });
+
   test("sichtbarer Zonen-Hinweis", () => {
     const view = render(<ControlledLocated initial="" onEmit={() => {}} />);
     expect(view.container.textContent ?? "").toMatch(/lokal|local/i);

package/src/__tests__/primitives.test.tsx

@@ -12,7 +12,8 @@ import userEvent from "@testing-library/user-event";
 import { defaultPrimitives } from "../primitives";
 import { fireEvent, render, screen } from "./test-utils";
 
-const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog } = defaultPrimitives;
+const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
+  defaultPrimitives;
 
 describe("Button", () => {
   test("disabled: attribute gesetzt + Tailwind-Klassen für pointer-events/opacity", () => {
@@ -970,3 +971,85 @@ describe("Text variants", () => {
     expect(el.hasAttribute("data-required")).toBe(true);
   });
 });
+
+describe("Card", () => {
+  test("padded=true (default) adds body padding", () => {
+    render(
+      <Card testId="c">
+        <span>body</span>
+      </Card>,
+    );
+    expect(screen.getByTestId("c").innerHTML).toContain("p-6");
+  });
+
+  test("padded=false renders body without padding classes", () => {
+    render(
+      <Card testId="c" options={{ padded: false }}>
+        <span>body</span>
+      </Card>,
+    );
+    const bodyWrapper = screen.getByText("body").parentElement;
+    expect(bodyWrapper?.className.includes("p-6")).toBe(false);
+    expect(bodyWrapper?.className.includes("px-6")).toBe(false);
+  });
+
+  test("slots.title/subtitle render a default header", () => {
+    render(<Card testId="c" slots={{ title: "Title", subtitle: "Subtitle" }} />);
+    expect(screen.getByText("Title")).toBeTruthy();
+    expect(screen.getByText("Subtitle")).toBeTruthy();
+  });
+
+  test("no header slots → no header row rendered", () => {
+    render(
+      <Card testId="c">
+        <span>only body</span>
+      </Card>,
+    );
+    // Header row carries "items-start justify-between" — absent means no header.
+    expect(screen.getByTestId("c").innerHTML).not.toContain("justify-between");
+  });
+
+  test("slots.footer renders bordered by default", () => {
+    render(<Card testId="c" slots={{ footer: <span>Footer</span> }} />);
+    const footer = screen.getByText("Footer").parentElement;
+    expect(footer?.className.includes("border-t")).toBe(true);
+  });
+
+  test("footerBordered=false drops the border", () => {
+    render(
+      <Card
+        testId="c"
+        slots={{ footer: <span>Footer</span> }}
+        options={{ footerBordered: false }}
+      />,
+    );
+    const footer = screen.getByText("Footer").parentElement;
+    expect(footer?.className.includes("border-t")).toBe(false);
+  });
+
+  test('radius="lg" uses rounded-lg instead of rounded-xl', () => {
+    render(
+      <Card testId="c" options={{ radius: "lg" }}>
+        x
+      </Card>,
+    );
+    const el = screen.getByTestId("c");
+    expect(el.className.includes("rounded-lg")).toBe(true);
+    expect(el.className.includes("rounded-xl")).toBe(false);
+  });
+
+  test("children=undefined → no body wrapper rendered", () => {
+    render(<Card testId="c" slots={{ title: "Only header" }} />);
+    expect(screen.getByTestId("c").querySelectorAll("div").length).toBeGreaterThan(0);
+    expect(screen.getByTestId("c").innerHTML).not.toContain("grow");
+  });
+
+  test("children=null (explicit, e.g. `cond ? <X/> : null`) → no body wrapper rendered either", () => {
+    render(
+      <Card testId="c" slots={{ title: "Only header" }}>
+        {null}
+      </Card>,
+    );
+    expect(screen.getByTestId("c").innerHTML).not.toContain("grow");
+  });
+});

package/src/primitives/index.tsx

@@ -1431,12 +1431,12 @@ function DefaultSection({ title, subtitle, children, actions, testId }: SectionP
           </h3>
         )}
         {subtitle !== undefined && (
-          <p
+          <div
             data-testid={testId !== undefined ? `${testId}-subtitle` : undefined}
             className="text-sm text-muted-foreground"
           >
             {subtitle}
-          </p>
+          </div>
         )}
       </div>
     ) : null;
@@ -1463,6 +1463,11 @@ function DefaultSection({ title, subtitle, children, actions, testId }: SectionP
 
   // Standalone: eigene Card, Header fließt in den Body (kein Divider).
   // actions = abgehobene Footer-Row (border-t bg-muted/30, wie DefaultForm).
+  // overflow-hidden clips the footer-corner radius correctly for portaled
+  // overlays (Combobox/Select/Tooltip escape to document.body, unaffected).
+  // A non-portaled overlay (e.g. a custom dropdown built directly into
+  // `children`) WOULD get silently clipped — verify this against any new
+  // standalone-section content that renders its own non-portaled overlay.
   return (
     <Card data-testid={testId} className="gap-0 overflow-hidden rounded-lg py-0">
       <CardContent className="flex flex-col gap-4 px-6 py-6">
@@ -1491,6 +1496,7 @@ function DefaultGrid({ columns, children, testId }: GridProps): ReactNode {
     <div
       data-testid={testId}
       className="grid gap-4 grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]"
+      // workaround: duplicate @types/react instances break direct CSSProperties cast
       style={{ "--grid-cols": `repeat(${columns}, minmax(0, 1fr))` } as unknown as CSSProperties}
     >
       {children}
@@ -1589,7 +1595,9 @@ function DefaultCard({ slots, options, className, testId, children }: CardProps)
       )}
     >
       {header}
-      {children !== undefined && (
+      {/* != null covers undefined AND explicit null; a `false` child (from
+          `cond && <El/>`) still renders no visible content either way. */}
+      {children != null && (
         <div className={cn("grow", padded && (hasHeader ? "px-6 pb-6" : "p-6"))}>{children}</div>
       )}
       {s.footer !== undefined && (

package/src/ui/sidebar.tsx

@@ -134,6 +134,7 @@ function SidebarProvider({
           data-slot="sidebar-wrapper"
           style={
             {
+              // workaround: duplicate @types/react instances break direct CSSProperties cast
               "--sidebar-width": SIDEBAR_WIDTH,
               "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
               ...style,
@@ -191,6 +192,7 @@ function Sidebar({
           className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
+              // workaround: duplicate @types/react instances break direct CSSProperties cast
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
@@ -630,6 +632,7 @@ function SidebarMenuSkeleton({
         data-sidebar="menu-skeleton-text"
         style={
           {
+            // workaround: duplicate @types/react instances break direct CSSProperties cast
             "--skeleton-width": width,
           } as React.CSSProperties
         }

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

@@ -3,7 +3,7 @@
 // Invariante — hier die vier Fälle direkt geprüft.
 
 import { describe, expect, test } from "bun:test";
-import { shouldShowUpdate } from "../update-checker";
+import { isKumikoBuild, shouldShowUpdate } from "../update-checker";
 
 describe("shouldShowUpdate", () => {
   test("andere Server-id als geladen → Banner", () => {
@@ -23,3 +23,20 @@ describe("shouldShowUpdate", () => {
     expect(shouldShowUpdate("", { id: "bbb", builtAt: "2026-06-18T00:00:00Z" })).toBe(false);
   });
 });
+
+describe("isKumikoBuild", () => {
+  test("accepts a build-info shape with a non-empty id", () => {
+    expect(isKumikoBuild({ id: "abc" })).toBe(true);
+    expect(isKumikoBuild({ id: "abc", builtAt: "2026-06-18T00:00:00Z" })).toBe(true);
+  });
+
+  test("rejects an empty/missing/wrong-typed id, and non-object payloads", () => {
+    expect(isKumikoBuild({ id: "" })).toBe(false);
+    expect(isKumikoBuild({})).toBe(false);
+    expect(isKumikoBuild({ id: 123 })).toBe(false);
+    expect(isKumikoBuild(null)).toBe(false);
+    expect(isKumikoBuild(undefined)).toBe(false);
+    expect(isKumikoBuild("abc")).toBe(false);
+    expect(isKumikoBuild([])).toBe(false);
+  });
+});

package/src/version/update-checker.tsx

@@ -37,13 +37,23 @@ export function shouldShowUpdate(
   return server.id !== loadedId;
 }
 
+export function isKumikoBuild(v: unknown): v is Pick<KumikoBuild, "id"> {
+  return (
+    typeof v === "object" &&
+    v !== null &&
+    typeof (v as Record<string, unknown>)["id"] === "string" &&
+    (v as Record<string, unknown>)["id"] !== ""
+  );
+}
+
 async function fetchServerBuild(): Promise<KumikoBuild | null> {
   try {
     const res = await fetch("/build-info.json", { cache: "no-store" });
     if (!res.ok) return null;
-    const info = (await res.json()) as Partial<KumikoBuild>;
-    if (typeof info.id !== "string" || info.id.length === 0) return null;
-    return { id: info.id, builtAt: typeof info.builtAt === "string" ? info.builtAt : "" };
+    const raw: unknown = await res.json();
+    if (!isKumikoBuild(raw)) return null;
+    const builtAt = (raw as Partial<KumikoBuild>).builtAt;
+    return { id: raw.id, builtAt: typeof builtAt === "string" ? builtAt : "" };
   } catch {
     // Netzwerkfehler / kaputtes JSON → kein Banner. Nie ein Fake-Update zeigen.
     return null;
@@ -60,10 +70,17 @@ export function UpdateChecker(): ReactNode {
     if (!loadedId) return; // Dev / altes Bundle → keine Awareness.
 
     let cancelled = false;
+    const checking = { current: false };
     const check = async (): Promise<void> => {
       if (document.visibilityState !== "visible") return;
-      const server = await fetchServerBuild();
-      if (!cancelled && shouldShowUpdate(loadedId, server)) setHasUpdate(true);
+      if (checking.current) return; // visibilitychange + focus fire together on tab-return
+      checking.current = true;
+      try {
+        const server = await fetchServerBuild();
+        if (!cancelled && shouldShowUpdate(loadedId, server)) setHasUpdate(true);
+      } finally {
+        checking.current = false;
+      }
     };
 
     document.addEventListener("visibilitychange", check);