@cosmicdrift/kumiko-renderer-web 0.222.0 → 0.223.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.222.0",
+  "version": "0.223.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.222.0",
-    "@cosmicdrift/kumiko-headless": "0.222.0",
-    "@cosmicdrift/kumiko-renderer": "0.222.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.223.0",
+    "@cosmicdrift/kumiko-headless": "0.223.0",
+    "@cosmicdrift/kumiko-renderer": "0.223.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.222.0"
+    "@cosmicdrift/kumiko-locale-de": "0.223.0"
   },
   "repository": {
     "type": "git",

package/src/primitives/__tests__/grid.test.tsx

@@ -0,0 +1,64 @@
+// DefaultGrid's `maxRows` clips the grid to roughly N rows once the option
+// count (given `columns`) actually exceeds that many rows — style-only until
+// then, no extra wrapper element. Height derives from the
+// `--kumiko-grid-row-h` CSS var (same var `grid-auto-rows`'s minmax floor
+// uses), never a hardcoded pixel/rem constant, so a theme redefining the var
+// scales both together. `grid-auto-rows` is a minmax MIN, not a fixed
+// height, so a wrapped label grows its row instead of being clipped.
+
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { Grid } = defaultPrimitives;
+
+describe("DefaultGrid — maxRows", () => {
+  test("fewer options than maxRows rows can hold → no scroll container", () => {
+    render(
+      <Grid columns={2} maxRows={3} testId="grid">
+        <div>a</div>
+        <div>b</div>
+      </Grid>,
+    );
+    const el = screen.getByTestId("grid");
+    expect(el.style.overflowY).toBe("");
+    expect(el.style.maxHeight).toBe("");
+  });
+
+  test("more options than maxRows rows can hold → scroll container with height derived from maxRows", () => {
+    render(
+      <Grid columns={2} maxRows={2} testId="grid">
+        <div>a</div>
+        <div>b</div>
+        <div>c</div>
+        <div>d</div>
+        <div>e</div>
+      </Grid>,
+    );
+    const el = screen.getByTestId("grid");
+    expect(el.style.overflowY).toBe("auto");
+    expect(el.style.maxHeight).toContain("var(--kumiko-grid-row-h");
+    expect(el.style.maxHeight).toContain("2 *");
+    // minmax(..., auto), not a fixed height — a row taller than the CSS var
+    // (a wrapped label) grows instead of getting clipped mid-row.
+    const gridAutoRows = el.style.getPropertyValue("grid-auto-rows");
+    expect(gridAutoRows).toContain("var(--kumiko-grid-row-h");
+    expect(gridAutoRows).toContain("minmax(");
+    expect(gridAutoRows).toContain("auto");
+  });
+
+  test("no maxRows at all → never a scroll container regardless of option count", () => {
+    render(
+      <Grid columns={2} testId="grid">
+        <div>a</div>
+        <div>b</div>
+        <div>c</div>
+        <div>d</div>
+        <div>e</div>
+      </Grid>,
+    );
+    const el = screen.getByTestId("grid");
+    expect(el.style.overflowY).toBe("");
+    expect(el.style.maxHeight).toBe("");
+  });
+});

package/src/primitives/index.tsx

@@ -70,6 +70,7 @@ import {
 } from "lucide-react";
 import {
   type ChangeEvent,
+  Children,
   type CSSProperties,
   createContext,
   type MouseEvent,
@@ -1848,18 +1849,38 @@ function DefaultSection({
   );
 }
 
-function DefaultGrid({ columns, children, testId }: GridProps): ReactNode {
+function DefaultGrid({ columns, children, testId, maxRows }: GridProps): ReactNode {
   // Responsive: Mobile (< sm = 640px) bleibt 1-spaltig, ab sm: greift
   // die Author-deklarierte Spaltenzahl. Inline-style schreibt
   // CSS-Variable; Tailwind-Klasse liest die Variable mit
   // `grid-template-columns: var(--grid-cols)`. Saubere Lösung weil
   // Tailwind JIT keinen dynamischen `grid-cols-${N}` auflösen kann.
+  const rowCount = Math.ceil(Children.count(children) / columns);
+  const clipped = maxRows !== undefined && rowCount > maxRows;
+  // gridAutoRows is a minmax MIN, not a fixed height, so wrapped labels grow
+  // their row instead of being clipped mid-row. maxHeight is therefore only
+  // an approximation of "maxRows rows tall" — a row taller than the minimum
+  // means fewer than maxRows rows end up visible before scrolling kicks in.
+  // Themes may override --kumiko-grid-row-h (default 2.5rem, set in
+  // styles.css) to change that minimum.
+  // Mobile note: the grid collapses to 1 column below `sm` (see className),
+  // but rowCount above is always computed against the desktop `columns` —
+  // inline styles can't express a media query, so the mobile row count is
+  // an under-count. Known, accepted.
+  const style: CSSProperties = {
+    "--grid-cols": `repeat(${columns}, minmax(0, 1fr))`,
+    ...(clipped && {
+      gridAutoRows: "minmax(var(--kumiko-grid-row-h, 2.5rem), auto)",
+      maxHeight: `calc(${maxRows} * var(--kumiko-grid-row-h, 2.5rem) + ${maxRows - 1} * 1rem)`,
+      overflowY: "auto",
+    }),
+    // workaround: duplicate @types/react instances break direct CSSProperties cast
+  } as unknown as CSSProperties;
   return (
     <div
       data-testid={testId}
       className="grid gap-4 grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]"
-      // workaround: duplicate @types/react instances break direct CSSProperties cast
-      style={{ "--grid-cols": `repeat(${columns}, minmax(0, 1fr))` } as unknown as CSSProperties}
+      style={style}
     >
       {children}
     </div>

package/src/styles.css

@@ -99,6 +99,7 @@
   --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);
+  --kumiko-grid-row-h: 2.5rem;
 }
 
 /* Light-Mode-Overrides — aktiv wenn `<html>` KEINE `.dark` Klasse