@cosmicdrift/kumiko-renderer-web 0.114.0 → 0.115.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.114.0",
+  "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.114.0",
-    "@cosmicdrift/kumiko-headless": "0.114.0",
-    "@cosmicdrift/kumiko-renderer": "0.114.0",
+    "@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

@@ -980,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", () => {

package/src/primitives/index.tsx

@@ -83,13 +83,18 @@ 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";
+// 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) ----
@@ -1582,7 +1587,7 @@ export function DefaultCard({ slots, options, className, testId, children }: Car
   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>
@@ -1602,7 +1607,17 @@ export function DefaultCard({ slots, options, className, testId, children }: Car
       {/* != 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>
+        <div
+          className={cn(
+            "grow",
+            padded &&
+              (hasHeader
+                ? "px-[var(--card-padding)] pb-[var(--card-padding)]"
+                : "p-[var(--card-padding)]"),
+          )}
+        >
+          {children}
+        </div>
       )}
       {s.footer !== undefined && (
         <div className={cn(cardFooter, footerBordered && cardFooterBorder)}>{s.footer}</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. */