@cosmicdrift/kumiko-renderer-web 0.113.1 → 0.115.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.113.1",
+  "version": "0.115.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.1",
-    "@cosmicdrift/kumiko-headless": "0.113.1",
-    "@cosmicdrift/kumiko-renderer": "0.113.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.115.0",
+    "@cosmicdrift/kumiko-headless": "0.115.0",
+    "@cosmicdrift/kumiko-renderer": "0.115.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 } =
@@ -979,7 +980,7 @@ describe("Card", () => {
         <span>body</span>
       </Card>,
     );
-    expect(screen.getByTestId("c").innerHTML).toContain("p-6");
+    expect(screen.getByTestId("c").innerHTML).toContain("p-[var(--card-padding)]");
   });
 
   test("padded=false renders body without padding classes", () => {
@@ -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,22 @@ 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. Maße (Padding/Radius/Shadow) kommen aus --card-*
+// CSS-Tokens (Defaults in styles.css), damit eine App sie einmal zentral in
+// ihrer styles.css überschreiben kann — wie die Farben. Radius-Variante:
+// xl = Card/Screen-Fläche (Default, token-getrieben), lg = "innen"-Fläche.
+const cardSurface = cva(
+  "flex flex-col border bg-card text-card-foreground shadow-[var(--card-shadow)]",
+  {
+    variants: { radius: { xl: "rounded-[var(--card-radius)]", lg: "rounded-lg" } },
+    defaultVariants: { radius: "xl" },
+  },
+);
+const cardFooter = "flex items-center justify-end gap-2 px-[var(--card-padding)] 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 +1381,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 +1418,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 +1485,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,14 +1580,14 @@ 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;
   const s = slots ?? {};
   const defaultHeader =
     s.title !== undefined || s.subtitle !== undefined || s.headerActions !== undefined ? (
-      <div className="flex flex-wrap items-start justify-between gap-3 px-6 pt-6 pb-4">
+      <div className="flex flex-wrap items-start justify-between gap-3 px-[var(--card-padding)] pt-6 pb-4">
         <div className="flex flex-col gap-1">
           {s.title !== undefined && (
             <h3 className="text-base font-semibold leading-none tracking-tight">{s.title}</h3>
@@ -1586,30 +1602,26 @@ 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. */}
       {children != null && (
-        <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",
+            "grow",
+            padded &&
+              (hasHeader
+                ? "px-[var(--card-padding)] pb-[var(--card-padding)]"
+                : "p-[var(--card-padding)]"),
           )}
         >
-          {s.footer}
+          {children}
         </div>
       )}
+      {s.footer !== undefined && (
+        <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>
+  );
+}

package/src/styles.css

@@ -82,6 +82,17 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+/* 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
    hat. Dark ist der Default (siehe @theme oben); toggled der User
    auf light, greifen diese Werte. */