@cosmicdrift/kumiko-renderer-web 0.221.0 → 0.222.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.221.0",
+  "version": "0.222.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.222.0",
+    "@cosmicdrift/kumiko-headless": "0.222.0",
+    "@cosmicdrift/kumiko-renderer": "0.222.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.222.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/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

@@ -1003,10 +1003,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 +1016,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 +1042,7 @@ function RowActionsKebab({
               data-testid={`row-${row.id}-action-${action.id}`}
               onSelect={(e) => {
                 e.preventDefault();
+                setMenuOpen(false);
                 if (needsConfirm(action)) {
                   setPendingConfirm(action);
                 } else {

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(() => {