@cosmicdrift/kumiko-renderer-web 0.114.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.114.0",
+  "version": "1.0.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.114.0",
-    "@cosmicdrift/kumiko-headless": "0.114.0",
-    "@cosmicdrift/kumiko-renderer": "0.114.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "1.0.0",
+    "@cosmicdrift/kumiko-headless": "1.0.0",
+    "@cosmicdrift/kumiko-renderer": "1.0.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__/primitives.test.tsx

@@ -10,7 +10,6 @@
 import { describe, expect, mock, test } from "bun:test";
 import userEvent from "@testing-library/user-event";
 import { defaultPrimitives } from "../primitives";
-import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen } from "./test-utils";
 
 const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
@@ -1054,33 +1053,3 @@ describe("Card", () => {
     expect(screen.getByTestId("c").innerHTML).not.toContain("grow");
   });
 });
-
-describe("Stack", () => {
-  test("gap-Variante bildet auf die Tailwind-gap-Klasse ab", () => {
-    render(
-      <Stack testId="s" gap="lg">
-        <span>a</span>
-      </Stack>,
-    );
-    const el = screen.getByTestId("s");
-    expect(el.className).toContain("flex flex-col");
-    expect(el.className).toContain("gap-6");
-  });
-
-  test("default gap = md", () => {
-    render(<Stack testId="s">x</Stack>);
-    expect(screen.getByTestId("s").className).toContain("gap-4");
-  });
-});
-
-describe("PageSection", () => {
-  test("wrappt children mit einheitlichem Padding", () => {
-    render(
-      <PageSection testId="p">
-        <span data-testid="child">x</span>
-      </PageSection>,
-    );
-    expect(screen.getByTestId("p").className).toContain("p-6");
-    expect(screen.getByTestId("child")).toBeDefined();
-  });
-});

package/src/__tests__/render-list.test.tsx

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, mock, spyOn, test } from "bun:test";
+import { describe, expect, mock, spyOn, test } from "bun:test";
 import type {
   EntityDefinition,
   EntityListScreenDefinition,
@@ -188,21 +188,13 @@ describe("RenderList — slots.header", () => {
   });
 
   test("slots.header gesetzt, aber Component nicht registriert → kein Crash, kein Header", () => {
-    spyOn(console, "warn").mockImplementation(() => {});
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
     render(
       <ExtensionSectionsProvider value={{}}>
         <RenderList screen={screenWithHeader} entity={taskEntity} rows={[]} featureName="tasks" />
       </ExtensionSectionsProvider>,
     );
     expect(screen.queryByTestId("list-header-slot")).toBeNull();
+    warn.mockRestore();
   });
 });
-
-// 573/1: a mid-test assertion throw would skip the trailing warn.mockRestore()
-// above, leaking the spy into every later test — this backstop restores
-// unconditionally regardless of how the test exited.
-afterEach(() => {
-  // biome-ignore lint/suspicious/noConsole: reading the spy handle to restore it, not logging
-  const warn = console.warn as unknown as { mockRestore?: () => void };
-  warn.mockRestore?.();
-});

package/src/index.ts

@@ -11,7 +11,6 @@ export type {
   AppTokens,
   BannerProps,
   ButtonProps,
-  CardProps,
   ColorTokens,
   CorePrimitives,
   CoreTokens,
@@ -124,7 +123,7 @@ export type { WorkspaceSwitcherProps } from "./layout/workspace-switcher";
 export { WorkspaceSwitcher } from "./layout/workspace-switcher";
 export { cn } from "./lib/cn";
 export { postWithDownload } from "./lib/download";
-export { BareFormProvider, DefaultCard as Card, defaultPrimitives } from "./primitives";
+export { BareFormProvider, defaultPrimitives } from "./primitives";
 export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu";
 export { ActionMenu } from "./primitives/action-menu";
 export {
@@ -137,7 +136,6 @@ export {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./primitives/dropdown-menu";
-export { PageSection, Stack } from "./primitives/layout";
 export type { ToastOptions, ToastProviderProps, ToastVariant } from "./primitives/toast";
 export { ToastProvider, useToast } from "./primitives/toast";
 export type { CreateEventSourceLiveEventsOptions } from "./sse/live-events";

package/src/layout/nav-tree.tsx

@@ -192,14 +192,8 @@ export function NavTree({
 // schiebt ihn ans rechte Ende; das truncate-Label gibt nach.
 // ponytail: nur an screen/target-Leaves verdrahtet, nicht an Container-
 // Knoten (die tragen den ml-auto-Chevron) — Tier-Badge ist ein Leaf.
-// Defense-in-depth (555/4): every current call site already guards on
-// node.screen/node.target !== undefined before rendering <NavBadge>, so this
-// early-return changes no current behavior — it's here so a future call
-// site added without that guard can't silently show a leaf's badge on an
-// unrelated container node that happens to share its last-segment.
 function NavBadge({ node }: { readonly node: NavNode }): ReactNode {
   const badges = useContext(NavBadgesContext);
-  if (node.screen === undefined && node.target === undefined) return null;
   const badge = badges.get(lastSegment(node.qualifiedName));
   if (badge === undefined) return null;
   return <span className="ml-auto shrink-0">{badge}</span>;

package/src/primitives/index.tsx

@@ -35,7 +35,6 @@ import {
   useTranslation,
   WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
-import { cva } from "class-variance-authority";
 import {
   ArrowDown,
   ArrowUp,
@@ -60,6 +59,7 @@ import {
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
 import { Button as UiButton } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
@@ -81,17 +81,6 @@ import { MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 
-// ---- Card-Chrome (eine Definition für Form/Section/Card) ----
-
-// Die eine Card-Surface. Radius ist die einzige real gebrauchte Variante:
-// xl = Card/Screen-Fläche (Default), lg = "innen"-Fläche wie Tabellen.
-const cardSurface = cva("flex flex-col border bg-card text-card-foreground shadow-sm", {
-  variants: { radius: { xl: "rounded-xl", lg: "rounded-lg" } },
-  defaultVariants: { radius: "xl" },
-});
-const cardFooter = "flex items-center justify-end gap-2 px-6 py-4";
-const cardFooterBorder = "border-t bg-muted/30";
-
 // ---- Button (vendored shadcn ui/button) ----
 
 // Contract-Variant → shadcn-Variant: secondary war schon immer der
@@ -1376,7 +1365,7 @@ function DefaultForm({
       className="flex flex-col w-full"
     >
       <div className="px-6 pt-6 pb-12 max-w-3xl w-full">
-        <div className={cn(cardSurface(), "overflow-hidden")}>
+        <div className="bg-card overflow-hidden rounded-xl border shadow-sm">
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">
               {title !== undefined && (
@@ -1413,7 +1402,7 @@ function DefaultForm({
           {actions !== undefined && (
             <div
               data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-              className={cn(cardFooter, cardFooterBorder)}
+              className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
             >
               {actions}
             </div>
@@ -1480,20 +1469,20 @@ function DefaultSection({ title, subtitle, children, actions, testId }: SectionP
   // `children`) WOULD get silently clipped — verify this against any new
   // standalone-section content that renders its own non-portaled overlay.
   return (
-    <div data-testid={testId} className={cn(cardSurface(), "overflow-hidden")}>
-      <div className="flex flex-col gap-4 px-6 py-6">
+    <Card data-testid={testId} className="gap-0 overflow-hidden rounded-lg py-0">
+      <CardContent className="flex flex-col gap-4 px-6 py-6">
         {header}
         {children}
-      </div>
+      </CardContent>
       {actions !== undefined && (
         <div
           data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-          className={cn(cardFooter, cardFooterBorder)}
+          className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
         >
           {actions}
         </div>
       )}
-    </div>
+    </Card>
   );
 }
 
@@ -1575,7 +1564,7 @@ import { ConfigSourceBadge as DefaultConfigSourceBadge } from "../components/con
 
 // Generische Card-Chrome (rounded-xl wie die Entity-Card) — slot- + options-
 // basiert, damit der Contract additiv wächst und Consumer nie migriert werden.
-export function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
+function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
   const padded = options?.padded ?? true;
   const radius = options?.radius ?? "xl";
   const footerBordered = options?.footerBordered ?? true;
@@ -1597,7 +1586,14 @@ export function DefaultCard({ slots, options, className, testId, children }: Car
   const header = s.header ?? defaultHeader;
   const hasHeader = header !== null && header !== undefined;
   return (
-    <div data-testid={testId} className={cn(cardSurface({ radius }), "overflow-hidden", className)}>
+    <div
+      data-testid={testId}
+      className={cn(
+        "flex flex-col overflow-hidden border bg-card text-card-foreground shadow-sm",
+        radius === "xl" ? "rounded-xl" : "rounded-lg",
+        className,
+      )}
+    >
       {header}
       {/* != null covers undefined AND explicit null; a `false` child (from
           `cond && <El/>`) still renders no visible content either way. */}
@@ -1605,7 +1601,14 @@ export function DefaultCard({ slots, options, className, testId, children }: Car
         <div className={cn("grow", padded && (hasHeader ? "px-6 pb-6" : "p-6"))}>{children}</div>
       )}
       {s.footer !== undefined && (
-        <div className={cn(cardFooter, footerBordered && cardFooterBorder)}>{s.footer}</div>
+        <div
+          className={cn(
+            "flex items-center justify-end gap-2 px-6 py-4",
+            footerBordered && "border-t bg-muted/30",
+          )}
+        >
+          {s.footer}
+        </div>
       )}
     </div>
   );

package/src/primitives/layout.tsx

@@ -1,39 +0,0 @@
-// Layout-Primitives für Custom-Screens: ein Ort für vertikale Abstände und
-// Screen-Padding, damit Consumer nicht `flex flex-col gap-*` / `p-6` per Hand
-// streuen. Bewusst dünn — kein generisches Box-mit-20-props-System.
-
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-
-const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" } as const;
-
-type StackGap = keyof typeof STACK_GAP;
-
-type StackProps = {
-  readonly gap?: StackGap;
-  readonly className?: string;
-  readonly children?: ReactNode;
-  readonly testId?: string;
-};
-
-export function Stack({ gap = "md", className, children, testId }: StackProps): ReactNode {
-  return (
-    <div data-testid={testId} className={cn("flex flex-col", STACK_GAP[gap], className)}>
-      {children}
-    </div>
-  );
-}
-
-type PageSectionProps = {
-  readonly className?: string;
-  readonly children?: ReactNode;
-  readonly testId?: string;
-};
-
-export function PageSection({ className, children, testId }: PageSectionProps): ReactNode {
-  return (
-    <div data-testid={testId} className={cn("p-6", className)}>
-      {children}
-    </div>
-  );
-}