@cosmicdrift/kumiko-renderer-web 0.113.0 → 0.114.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.113.0",
+  "version": "0.114.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.113.0",
-    "@cosmicdrift/kumiko-headless": "0.113.0",
-    "@cosmicdrift/kumiko-renderer": "0.113.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.114.0",
+    "@cosmicdrift/kumiko-headless": "0.114.0",
+    "@cosmicdrift/kumiko-renderer": "0.114.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,6 +10,7 @@
 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 } =
@@ -1053,3 +1054,33 @@ 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/index.ts

@@ -11,6 +11,7 @@ export type {
   AppTokens,
   BannerProps,
   ButtonProps,
+  CardProps,
   ColorTokens,
   CorePrimitives,
   CoreTokens,
@@ -123,7 +124,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, defaultPrimitives } from "./primitives";
+export { BareFormProvider, DefaultCard as Card, defaultPrimitives } from "./primitives";
 export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu";
 export { ActionMenu } from "./primitives/action-menu";
 export {
@@ -136,6 +137,7 @@ 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/primitives/index.tsx

@@ -35,6 +35,7 @@ import {
   useTranslation,
   WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
+import { cva } from "class-variance-authority";
 import {
   ArrowDown,
   ArrowUp,
@@ -59,7 +60,6 @@ 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,6 +81,17 @@ 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
@@ -1365,7 +1376,7 @@ function DefaultForm({
       className="flex flex-col w-full"
     >
       <div className="px-6 pt-6 pb-12 max-w-3xl w-full">
-        <div className="bg-card overflow-hidden rounded-xl border shadow-sm">
+        <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">
               {title !== undefined && (
@@ -1402,7 +1413,7 @@ function DefaultForm({
           {actions !== undefined && (
             <div
               data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-              className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
+              className={cn(cardFooter, cardFooterBorder)}
             >
               {actions}
             </div>
@@ -1469,20 +1480,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 (
-    <Card data-testid={testId} className="gap-0 overflow-hidden rounded-lg py-0">
-      <CardContent className="flex flex-col gap-4 px-6 py-6">
+    <div data-testid={testId} className={cn(cardSurface(), "overflow-hidden")}>
+      <div className="flex flex-col gap-4 px-6 py-6">
         {header}
         {children}
-      </CardContent>
+      </div>
       {actions !== undefined && (
         <div
           data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-          className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
+          className={cn(cardFooter, cardFooterBorder)}
         >
           {actions}
         </div>
       )}
-    </Card>
+    </div>
   );
 }
 
@@ -1564,7 +1575,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.
-function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
+export function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
   const padded = options?.padded ?? true;
   const radius = options?.radius ?? "xl";
   const footerBordered = options?.footerBordered ?? true;
@@ -1586,14 +1597,7 @@ function DefaultCard({ slots, options, className, testId, children }: CardProps)
   const header = s.header ?? defaultHeader;
   const hasHeader = header !== null && header !== undefined;
   return (
-    <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,
-      )}
-    >
+    <div data-testid={testId} className={cn(cardSurface({ radius }), "overflow-hidden", className)}>
       {header}
       {/* != null covers undefined AND explicit null; a `false` child (from
           `cond && <El/>`) still renders no visible content either way. */}
@@ -1601,14 +1605,7 @@ function DefaultCard({ slots, options, className, testId, children }: CardProps)
         <div className={cn("grow", padded && (hasHeader ? "px-6 pb-6" : "p-6"))}>{children}</div>
       )}
       {s.footer !== undefined && (
-        <div
-          className={cn(
-            "flex items-center justify-end gap-2 px-6 py-4",
-            footerBordered && "border-t bg-muted/30",
-          )}
-        >
-          {s.footer}
-        </div>
+        <div className={cn(cardFooter, footerBordered && cardFooterBorder)}>{s.footer}</div>
       )}
     </div>
   );

package/src/primitives/layout.tsx

@@ -0,0 +1,39 @@
+// 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>
+  );
+}