@cosmicdrift/kumiko-renderer-web 0.174.0 → 0.176.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.174.0",
+  "version": "0.176.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.174.0",
-    "@cosmicdrift/kumiko-headless": "0.174.0",
-    "@cosmicdrift/kumiko-renderer": "0.174.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.176.0",
+    "@cosmicdrift/kumiko-headless": "0.176.0",
+    "@cosmicdrift/kumiko-renderer": "0.176.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

@@ -470,16 +470,21 @@ describe("DataTable", () => {
     });
   });
 
-  // Infinite-Scroll Sentinel: rendert sentinel-div, zeigt Spinner wenn
-  // loadingMore, den i18n End-of-list-Marker (kumiko.list.end-of-list)
-  // wenn !hasMore und genug Zeilen geladen sind (kurze Listen brauchen
-  // keinen Marker — sie zeigen ihr Ende selbst). IntersectionObserver
-  // selbst ist in jsdom unmocked — wir testen nur die Marker, der
-  // Observer-Fire-Pfad ist im KumikoScreen.EntityListBody.
+  // Infinite-scroll sentinel: renders a sentinel div, shows a spinner when
+  // loadingMore, and the i18n end-of-list marker (kumiko.list.end-of-list)
+  // when !hasMore and enough rows have loaded (short lists don't need a
+  // marker — they show their end on their own). IntersectionObserver itself
+  // is unmocked in jsdom — we only test the marker; the observer-fire path
+  // lives in KumikoScreen.EntityListBody.
   describe("InfiniteSentinel", () => {
     const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
     const oneRow = [{ id: "r1", values: { name: "A" } }];
-    const manyRows = Array.from({ length: 25 }, (_, i) => ({
+    // 60 rows — above END_LABEL_MIN_ROWS (50, the framework default pageSize)
+    // so hasMore=false genuinely means "reached the end of a full default
+    // page". 25 used to pass here too, back when the threshold was a
+    // mismatched 20 (fw#1713) — that under-a-page case is now covered
+    // separately below by the exact-boundary tests.
+    const manyRows = Array.from({ length: 60 }, (_, i) => ({
       id: `r${i}`,
       values: { name: `A${i}` },
     }));

package/src/layout/default-app-shell.tsx

@@ -30,6 +30,7 @@ import {
   SidebarProvider,
   SidebarRail,
 } from "../ui/sidebar";
+import { fillClasses } from "./fill-classes";
 import { NavTree } from "./nav-tree";
 import { ShellHeader } from "./shell-header";
 
@@ -83,8 +84,9 @@ export function DefaultAppShell({
   fill,
   children,
 }: DefaultAppShellProps): ReactNode {
+  const fillCls = fillClasses(fill);
   return (
-    <SidebarProvider {...(fill === true && { className: "h-svh" })}>
+    <SidebarProvider {...fillCls.provider}>
       {/* sidebar-07-Muster: Standard-Variante (border-r, flush content) +
           collapsible="icon" — der Rail klappt auf Icon-Breite zu (Trigger/Rail). */}
       <Sidebar collapsible="icon">
@@ -109,13 +111,13 @@ export function DefaultAppShell({
         )}
         <SidebarRail />
       </Sidebar>
-      <SidebarInset className={fill === true ? "min-h-0" : undefined}>
+      <SidebarInset className={fillCls.inset}>
         <ShellHeader
           schema={schema}
           {...(user !== undefined && { user })}
           {...(headerActions !== undefined && { headerActions })}
         />
-        <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
+        <main className={fillCls.main}>
           <UserRolesProvider roles={user?.roles}>{children}</UserRolesProvider>
         </main>
       </SidebarInset>

package/src/layout/fill-classes.ts

@@ -0,0 +1,8 @@
+// Shared `fill`-prop wiring for the sidebar-based app shells
+// (DefaultAppShell, WorkspaceShell) — both wrap the same vendored
+// shadcn sidebar and need identical viewport-fit classes.
+export const fillClasses = (fill?: boolean) => ({
+  provider: fill === true ? { className: "h-svh" } : {},
+  inset: fill === true ? "min-h-0" : undefined,
+  main: fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto",
+});

package/src/layout/workspace-shell.tsx

@@ -44,6 +44,7 @@ import {
   SidebarRail,
 } from "../ui/sidebar";
 import { EditorPanel } from "./editor-panel";
+import { fillClasses } from "./fill-classes";
 import { lastSegment, NavTree } from "./nav-tree";
 import { ShellHeader } from "./shell-header";
 import { parseTargetFromSearchParams } from "./target-url";
@@ -218,13 +219,14 @@ export function WorkspaceShell({
     />
   );
 
-  // Modern shell (wie DefaultAppShell): collapsible Icon-Rail-Sidebar trägt
-  // Brand + Workspace-Switcher + Nav + Footer; der SidebarInset rendert die
-  // geteilte ShellHeader (Panel-Toggle + Breadcrumb + Actions) über dem
-  // Content. topbarActions landen rechts in der Header-Zeile statt in einer
-  // separaten Topbar — eine Kopfzeile statt zwei.
+  // Modern shell (like DefaultAppShell): collapsible icon-rail sidebar
+  // carries brand + workspace switcher + nav + footer; the SidebarInset
+  // renders the shared ShellHeader (panel toggle + breadcrumb + actions)
+  // above the content. topbarActions render right inside the header row
+  // instead of a separate topbar — one header line, not two.
+  const fillCls = fillClasses(fill);
   return (
-    <SidebarProvider {...(fill === true && { className: "h-svh" })}>
+    <SidebarProvider {...fillCls.provider}>
       <Sidebar collapsible="icon">
         <SidebarHeader data-kumiko-layout="sidebar-header">
           {brand}
@@ -236,13 +238,13 @@ export function WorkspaceShell({
         )}
         <SidebarRail />
       </Sidebar>
-      <SidebarInset className={fill === true ? "min-h-0" : undefined}>
+      <SidebarInset className={fillCls.inset}>
         <ShellHeader
           schema={app}
           {...(user !== undefined && { user })}
           {...(topbarActions !== undefined && { headerActions: topbarActions })}
         />
-        <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
+        <main className={fillCls.main}>
           {activeTarget !== undefined ? (
             <EditorPanel resolvers={resolvers} />
           ) : (

package/src/primitives/date-parse.ts

@@ -7,6 +7,13 @@
 
 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.
+function activeTemporal(): typeof Temporal {
+  return (globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ?? Temporal;
+}
+
 export function guessLocale(): string {
   if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
   return "en-US";
@@ -17,7 +24,7 @@ export function guessLocale(): string {
 // a different date.
 function makePlainDate(y: number, m: number, d: number): Temporal.PlainDate | undefined {
   try {
-    return Temporal.PlainDate.from({ year: y, month: m, day: d }, { overflow: "reject" });
+    return activeTemporal().PlainDate.from({ year: y, month: m, day: d }, { overflow: "reject" });
   } catch {
     return undefined;
   }
@@ -67,9 +74,9 @@ type DateSlot = "y" | "m" | "d";
 // "UTC" keeps the reference from shifting to the 1st depending on the
 // browser's TZ.
 function localeDateOrder(locale: string): readonly DateSlot[] {
-  const refEpochMillis = Temporal.PlainDate.from({ year: 2026, month: 1, day: 2 }).toZonedDateTime(
-    "UTC",
-  ).epochMilliseconds;
+  const refEpochMillis = activeTemporal()
+    .PlainDate.from({ year: 2026, month: 1, day: 2 })
+    .toZonedDateTime("UTC").epochMilliseconds;
   const order: DateSlot[] = [];
   for (const part of new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(
     refEpochMillis,

package/src/primitives/index.tsx

@@ -288,12 +288,16 @@ const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
   "map-pin": MapPin,
 };
 
+function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[string] | undefined {
+  return icon !== undefined ? FIELD_ICONS[icon] : undefined;
+}
+
 // Wraps a text/number input with a left-positioned prefix icon when
 // `icon` carries a known FIELD_ICONS key. `pl-8` overrides (via
 // tailwind-merge) only the left padding of the vendored ui/input.tsx —
 // right padding and other defaults stay untouched.
 function withFieldIcon(icon: string | undefined, input: ReactNode): ReactNode {
-  const Icon = icon !== undefined ? FIELD_ICONS[icon] : undefined;
+  const Icon = fieldIconFor(icon);
   if (Icon === undefined) return input;
   return (
     <div className="relative">
@@ -329,7 +333,7 @@ function DefaultInput(props: InputProps): ReactNode {
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
           {...(props.autoComplete !== undefined && { autoComplete: props.autoComplete })}
-          className={cn(props.icon !== undefined && FIELD_ICONS[props.icon] ? "pl-8" : undefined)}
+          className={cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined)}
         />,
       );
     case "email":
@@ -369,7 +373,7 @@ function DefaultInput(props: InputProps): ReactNode {
           }}
           className={cn(
             "text-right tabular-nums",
-            props.icon !== undefined && FIELD_ICONS[props.icon] ? "pl-8" : undefined,
+            fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined,
           )}
         />,
       );
@@ -1012,15 +1016,23 @@ function RowActionsKebab({
   );
 }
 
-// InfiniteSentinel — leeres div am Ende der Tabelle, das via
-// IntersectionObserver erkennt wann der User in die Nähe des Listen-
-// Endes scrollt. onReachEnd feuert genau einmal pro "wird sichtbar"-
-// Übergang; der Caller debounced via loadingMore (während eine Page
-// lädt, ignorieren wir weitere Sichtbar-Events). Kein observer in
-// Server-Side-Render, kein observer wenn hasMore=false — dann zeigt
-// der Sentinel nur den End-of-list-Hinweis.
-// ponytail: Short lists do not need an end marker.
-export const END_LABEL_MIN_ROWS = 20;
+// InfiniteSentinel — empty div at the end of the table that uses
+// IntersectionObserver to detect when the user scrolls near the list end.
+// onReachEnd fires exactly once per "becomes visible" transition; the
+// caller debounces via loadingMore (further visibility events are ignored
+// while a page is loading). No observer during server-side render, no
+// observer when hasMore=false — then the sentinel only shows the
+// end-of-list hint via t("kumiko.list.end-of-list"), which requires a
+// LocaleProvider in the tree (same requirement as Field/useRowActionTrigger).
+// Without one, useTranslation() throws; with one that's missing the framework
+// defaults (fallbackBundles not including kumikoDefaultTranslations), the
+// user sees the raw key instead of translated text.
+// ponytail: threshold mirrors the framework default pageSize (kumiko-screen.tsx
+// `screen.pageSize ?? 50`) rather than the real per-screen pageSize, which isn't
+// threaded down to this component. A screen with a custom pageSize can still
+// under- or over-show the marker; thread pageSize through KumikoScreen →
+// RenderList → DataTable → InfiniteSentinel if that's needed (fw#1713).
+export const END_LABEL_MIN_ROWS = 50;
 
 function InfiniteSentinel({
   onReachEnd,

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

@@ -129,4 +129,58 @@ describe("InfinityList", () => {
     );
     await waitFor(() => expect(screen.getByText("Keine Nachrichten")).toBeTruthy());
   });
+
+  // fw#1705: a fast payload change (e.g. two keystrokes in a search field)
+  // fires a second request before the first resolves. Without sequencing,
+  // a slow first response landing after a faster second one clobbers it —
+  // the displayed rows end up out of sync with the current payload.
+  test("verwirft eine überholte Response, wenn eine frühere Anfrage später auflöst", async () => {
+    const resolvers: Array<(res: unknown) => void> = [];
+    const dispatcher = createMockDispatcher({
+      query: (() =>
+        new Promise((resolve) => {
+          resolvers.push(resolve);
+        })) as unknown as Dispatcher["query"],
+    });
+
+    function SearchList({ search }: { readonly search: string }) {
+      return (
+        <InfinityList<Page, Row>
+          query="inbox:query:message:list"
+          payload={{ search }}
+          rows={(data) => data.rows}
+          nextCursor={(data) => data.nextCursor}
+          rowId={(row) => row.id}
+          renderRow={(row) => <span>{row.subject}</span>}
+          testId="inbox"
+        />
+      );
+    }
+
+    const { rerender } = renderWithDispatcher(<SearchList search="Bo" />, dispatcher);
+    await waitFor(() => expect(resolvers.length).toBe(1));
+
+    rerender(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <SearchList search="Bob" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(resolvers.length).toBe(2));
+
+    // "Bob" (second, faster) resolves first.
+    resolvers[1]?.({
+      isSuccess: true,
+      data: { rows: [{ id: "m2", subject: "Bob-Treffer" }], nextCursor: null },
+    });
+    await waitFor(() => expect(screen.getByText("Bob-Treffer")).toBeTruthy());
+
+    // "Bo" (first, slower) resolves late — must be discarded, not overwrite the display.
+    resolvers[0]?.({
+      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();
+  });
 });

package/src/widgets/infinity-list.tsx

@@ -56,14 +56,22 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   const nextCursorRef = useRef(nextCursor);
   nextCursorRef.current = nextCursor;
 
+  // Discards a response whose request was superseded by a newer one before
+  // it resolved (e.g. two searches fired in quick succession) — without
+  // this, a slow earlier response can land after a faster later one and
+  // overwrite it, leaving stale rows on screen (fw#1705).
+  const requestSeq = useRef(0);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
   const load = useCallback(
     async (cursor: string | null): Promise<void> => {
+      const mySeq = ++requestSeq.current;
       const res = await dispatcher.query<TData>(query, {
         ...payload,
         limit: pageSize,
         ...(cursor !== null && { cursor }),
       });
+      if (mySeq !== requestSeq.current) return;
       if (!res.isSuccess) {
         setState({ kind: "error", error: res.error });
         return;
@@ -81,6 +89,9 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   useEffect(() => {
     setState({ kind: "loading" });
     void load(null);
+    return () => {
+      requestSeq.current += 1;
+    };
   }, [load]);
 
   useEffect(() => {