@cosmicdrift/kumiko-renderer-web 0.221.0 → 0.223.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.221.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.221.0",
-    "@cosmicdrift/kumiko-headless": "0.221.0",
-    "@cosmicdrift/kumiko-renderer": "0.221.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.221.0"
+    "@cosmicdrift/kumiko-locale-de": "0.223.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/nav-tree.test.tsx

@@ -360,22 +360,11 @@ describe("NavTree", () => {
           order: 20,
           icon: "shield-check",
         },
+        { id: "cap-list", label: "Caps", screen: "cap-list", order: 60, icon: "gauge" },
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expectNavIcons(container, ["send", "shield-check"]);
-    expect(warnSpy).not.toHaveBeenCalled();
-  });
-
-  test("gauge (cap-list nav) resolves to an icon without missing-icon path", () => {
-    const schema = {
-      featureName: "cap-counter",
-      entities: {},
-      screens: [{ id: "cap-list", type: "entityList", entity: "x", columns: [] }],
-      navs: [{ id: "cap-list", label: "Caps", screen: "cap-list", order: 60, icon: "gauge" }],
-    } as FeatureSchema;
-    const { container } = render(<NavTree schema={schema} />);
-    expectNavIcons(container, ["gauge"]);
+    expectNavIcons(container, ["send", "shield-check", "gauge"]);
     expect(warnSpy).not.toHaveBeenCalled();
   });
 
@@ -383,7 +372,10 @@ describe("NavTree", () => {
     const schema = {
       featureName: "showcase",
       entities: {},
-      screens: [{ id: "x", type: "entityList", entity: "x", columns: [] }],
+      screens: [
+        { id: "x", type: "entityList", entity: "x", columns: [] },
+        { id: "cap-list", type: "entityList", entity: "x", columns: [] },
+      ],
       navs: [
         {
           id: "x",

package/src/__tests__/primitives.test.tsx

@@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
-import { fireEvent, render, screen } from "./test-utils";
+import { fireEvent, render, screen, waitFor } from "./test-utils";
 
 const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
   defaultPrimitives;
@@ -858,6 +858,34 @@ describe("DataTable", () => {
       expect(screen.queryByTestId("row-r1-action-delete-dialog")).not.toBeNull();
     });
 
+    // Regression (solon e2e/cost-category.spec.ts, fw): unconditional
+    // preventDefault() in onSelect blocked Radix' auto-close, so the
+    // dropdown stayed in the DOM after the confirm flow (role="menu" +
+    // body.style.pointerEvents="none" overlay lock never released), even
+    // though the write itself had already succeeded.
+    test("Kebab: nach Confirm+onTrigger ist das Dropdown-Menu geschlossen (kein Overlay-Lock)", async () => {
+      const user = userEvent.setup();
+      const onTrigger = mock();
+      render(
+        <DataTable
+          columns={cols}
+          rows={rows}
+          testId="dt"
+          rowActions={[
+            { id: "a", label: "Archive", onTrigger: mock() },
+            { id: "b", label: "Duplicate", onTrigger: mock() },
+            { id: "delete", label: "Delete", style: "danger", onTrigger },
+          ]}
+        />,
+      );
+      await user.click(screen.getByTestId("row-r1-actions-menu"));
+      await user.click(screen.getByTestId("row-r1-action-delete"));
+      await user.click(screen.getByTestId("row-r1-action-delete-dialog-confirm"));
+      await waitFor(() => expect(onTrigger).toHaveBeenCalledWith(rows[0]));
+      await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+      expect(document.body.style.pointerEvents).not.toBe("none");
+    });
+
     test("confirmLabel separat vom label: Dialog-Button zeigt confirmLabel", async () => {
       const user = userEvent.setup();
       render(

package/src/app/plain-content-editor.tsx

@@ -53,7 +53,7 @@ export function PlainContentEditor({
   };
 
   return (
-    <div>
+    <div className="rounded-md border border-input bg-transparent">
       <TextareaContentEditor
         id={id}
         value={value}
@@ -61,7 +61,11 @@ export function PlainContentEditor({
         variables={variables}
         readOnly={readOnly}
       />
-      <VariableChips variables={variables} onInsert={insertAtCaret} disabled={readOnly} />
+      {variables.length > 0 && (
+        <div className="flex flex-wrap gap-1 border-t border-input p-1">
+          <VariableChips variables={variables} onInsert={insertAtCaret} disabled={readOnly} />
+        </div>
+      )}
     </div>
   );
 }

package/src/primitives/__tests__/date-parse.test.ts

@@ -33,9 +33,12 @@ const enPlaceholderLetters = placeholderLetters("en");
 describe("parseIso", () => {
   test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {
     const d = parseIso("2026-04-25");
-    // Cross-realm safe: bun and happy-dom can expose different Temporal
-    // copies, so toBeInstanceOf fails depending on file order. The ISO
-    // string proves both the type and the no-TZ-conversion property.
+    // Cross-realm safe: assert against the same Temporal activeTemporal() uses
+    // (native when present), not the polyfill import — Bun 1.4+ ships Temporal.
+    const ActivePlainDate = (
+      (globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ?? Temporal
+    ).PlainDate;
+    expect(d).toBeInstanceOf(ActivePlainDate);
     expect(String(d)).toBe("2026-04-25");
     expect(d?.year).toBe(2026);
     expect(d?.month).toBe(4);

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/date-parse.ts

@@ -10,6 +10,8 @@ import { Temporal } from "temporal-polyfill";
 // Prefer the native Temporal (Chromium 144+/Firefox 139+) over the bundled
 // polyfill so `instanceof` checks match values crossing package boundaries;
 // falls back to the polyfill where native support is absent.
+// Callers must not feed parseIso()/makePlainDate results into polyfill-only
+// Statics (compare/equals/since) — mixed Temporal brands throw TypeError.
 function activeTemporal(): typeof Temporal {
   return (globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ?? Temporal;
 }

package/src/primitives/index.tsx

@@ -70,6 +70,7 @@ import {
 } from "lucide-react";
 import {
   type ChangeEvent,
+  Children,
   type CSSProperties,
   createContext,
   type MouseEvent,
@@ -1003,10 +1004,10 @@ function RowActionButton({
   );
 }
 
-// Kebab-Dropdown für >2 actions. Confirm-Dialog ist hier inline pro
-// Item analog zum Inline-Button-Pfad — ein gemeinsamer State-Holder
-// per Action damit das Dropdown nach dem Click zumacht und der Dialog
-// danach öffnet (Radix-Dropdown-Item swallowt den Click sonst).
+// Kebab dropdown for >2 actions, one inline confirm dialog per item like
+// the inline-button path. Menu is controlled so it closes explicitly on
+// select, instead of relying on Radix's auto-close, which preventDefault
+// below blocks.
 function RowActionsKebab({
   row,
   actions,
@@ -1016,10 +1017,11 @@ function RowActionsKebab({
 }): ReactNode {
   const { triggerNow } = useRowActionTrigger(row);
   const [pendingConfirm, setPendingConfirm] = useState<DataTableRowAction | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <>
-      <DropdownMenu>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenuTrigger asChild>
           <button
             type="button"
@@ -1041,6 +1043,7 @@ function RowActionsKebab({
               data-testid={`row-${row.id}-action-${action.id}`}
               onSelect={(e) => {
                 e.preventDefault();
+                setMenuOpen(false);
                 if (needsConfirm(action)) {
                   setPendingConfirm(action);
                 } else {
@@ -1846,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

package/src/widgets/__tests__/infinity-list.test.tsx

@@ -73,7 +73,7 @@ function renderWithLive(ui: ReactNode, dispatcher: Dispatcher, liveEvents: LiveE
 type Row = { readonly id: string; readonly subject: string };
 type Page = { readonly rows: readonly Row[]; readonly nextCursor: string | null };
 
-function list(query: string) {
+function list(query: string, live = false) {
   return (
     <InfinityList<Page, Row>
       query={query}
@@ -82,6 +82,7 @@ function list(query: string) {
       rowId={(row) => row.id}
       renderRow={(row) => <span>{row.subject}</span>}
       testId="inbox"
+      live={live}
     />
   );
 }
@@ -255,14 +256,18 @@ describe("InfinityList", () => {
       isSuccess: true,
       data: { rows: [{ id: "m1", subject: "Bo-Treffer" }], nextCursor: null },
     });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(screen.queryByText("Bo-Treffer")).toBeNull();
-    expect(screen.getByText("Bob-Treffer")).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.queryByText("Bo-Treffer")).toBeNull();
+      expect(screen.getByText("Bob-Treffer")).toBeTruthy();
+    });
   });
 
   // fw#1827: InfinityList used dispatcher.query directly and never subscribed
   // to live events, so a solon inbox stayed stale until the user reloaded.
   describe("Live-Mode", () => {
+    // fw#1829 debounces live refresh by 250ms; CI needs headroom beyond default 1s.
+    const liveWait = { timeout: 3000 } as const;
+
     test("SSE-Event mergt nur die erste Seite, bereits geladene Folgeseiten bleiben erhalten", async () => {
       const calls: Array<Readonly<Record<string, unknown>>> = [];
       const dispatcher = createMockDispatcher({
@@ -304,6 +309,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -324,7 +330,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy());
+      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy(), liveWait);
       expect(screen.getByText("Alt-1")).toBeTruthy();
       expect(screen.getByText("Alt-2")).toBeTruthy();
       expect(screen.getAllByText("Alt-1").length).toBe(1);
@@ -362,7 +368,7 @@ describe("InfinityList", () => {
       });
       const fake = makeFakeLiveEvents();
 
-      renderWithLive(list("inbox:query:message:list"), dispatcher, fake.subscriber);
+      renderWithLive(list("inbox:query:message:list", true), dispatcher, fake.subscriber);
 
       await waitFor(() => expect(screen.getByText("Erste")).toBeTruthy());
       expect(screen.getByText("Zweite")).toBeTruthy();
@@ -377,7 +383,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.queryByText("Erste")).toBeNull());
+      await waitFor(() => expect(screen.queryByText("Erste")).toBeNull(), liveWait);
       expect(screen.getByText("Zweite")).toBeTruthy();
     });
 
@@ -421,6 +427,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -441,7 +448,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy());
+      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy(), liveWait);
       expect(screen.queryByText("Erste")).toBeNull();
       expect(screen.getByText("Zweite")).toBeTruthy();
     });
@@ -508,6 +515,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -540,7 +548,7 @@ describe("InfinityList", () => {
       });
       const fake = makeFakeLiveEvents();
 
-      renderWithLive(list("inbox:query:message:list"), dispatcher, fake.subscriber);
+      renderWithLive(list("inbox:query:message:list", true), dispatcher, fake.subscriber);
 
       await waitFor(() => expect(resolvers.length).toBe(1));
 

package/src/widgets/drawer.tsx

@@ -139,8 +139,10 @@ export function Drawer({
     const signedDelta = side === "right" ? -deltaX : deltaX;
     setWidth(clamp(dragRef.current.startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
   };
-  const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
-    event.currentTarget.releasePointerCapture(event.pointerId);
+  const endHandlePointerDrag = (event: React.PointerEvent<HTMLDivElement>): void => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
     dragRef.current = null;
     document.body.style.removeProperty("user-select");
   };
@@ -210,7 +212,9 @@ export function Drawer({
             tabIndex={0}
             onPointerDown={onHandlePointerDown}
             onPointerMove={onHandlePointerMove}
-            onPointerUp={onHandlePointerUp}
+            onPointerUp={endHandlePointerDrag}
+            onPointerCancel={endHandlePointerDrag}
+            onLostPointerCapture={endHandlePointerDrag}
             onKeyDown={onHandleKeyDown}
             className={cn(
               "absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border",

package/src/widgets/infinity-list.tsx

@@ -28,7 +28,7 @@ export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, un
    *  (`<feature>:query:<entity>:<verb>`) and refetch the first page on
    *  any create/update/delete/restore event, merging it into the
    *  already-accumulated rows instead of collapsing them — see
-   *  `useQuery`'s `live` option for the same convention. Default true. */
+   *  `useQuery`'s `live` option for the same convention. Default false. */
   readonly live?: boolean;
 };
 
@@ -53,7 +53,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   emptyState,
   className,
   testId,
-  live = true,
+  live = false,
 }: InfinityListProps<TData, TRow>): ReactNode {
   const dispatcher = useDispatcher();
   const t = useTranslation();
@@ -183,15 +183,51 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     });
   }, [dispatcher, query, pageSize, payloadKey]);
 
+  // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
+  // into one query per event (fw#1829). A refresh already running schedules
+  // exactly one trailing pass after it settles.
+  const liveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const liveInFlightRef = useRef(false);
+  const liveTrailingRef = useRef(false);
+
   useEffect(() => {
     // skip: live mode off, no SSE subscription needed
     if (!live) return;
     const entity = entityFromQueryType(query);
     // skip: query type has no mapped entity, nothing to subscribe to
     if (entity === undefined) return;
-    return subscribeLive(entity, () => {
-      void refreshFirstPage();
-    });
+
+    const runRefresh = (): void => {
+      liveInFlightRef.current = true;
+      void refreshFirstPage().finally(() => {
+        liveInFlightRef.current = false;
+        if (liveTrailingRef.current) {
+          liveTrailingRef.current = false;
+          runRefresh();
+        }
+      });
+    };
+
+    const scheduleRefresh = (): void => {
+      if (liveTimerRef.current !== null) clearTimeout(liveTimerRef.current);
+      liveTimerRef.current = setTimeout(() => {
+        liveTimerRef.current = null;
+        if (liveInFlightRef.current) {
+          liveTrailingRef.current = true;
+          return;
+        }
+        runRefresh();
+      }, 250);
+    };
+
+    const unsubscribe = subscribeLive(entity, scheduleRefresh);
+    return () => {
+      unsubscribe();
+      if (liveTimerRef.current !== null) {
+        clearTimeout(liveTimerRef.current);
+        liveTimerRef.current = null;
+      }
+    };
   }, [live, query, refreshFirstPage, subscribeLive]);
 
   useEffect(() => {