@cosmicdrift/kumiko-renderer-web 0.105.0 → 0.105.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.105.0",
+  "version": "0.105.2",
   "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.0",
-    "@cosmicdrift/kumiko-headless": "0.105.0",
-    "@cosmicdrift/kumiko-renderer": "0.105.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.105.2",
+    "@cosmicdrift/kumiko-headless": "0.105.2",
+    "@cosmicdrift/kumiko-renderer": "0.105.2",
     "@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__/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,76 @@ 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");
+  });
+});

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;