@cosmicdrift/kumiko-renderer-web 0.165.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.165.0",
+  "version": "2.0.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.165.0",
-    "@cosmicdrift/kumiko-headless": "0.165.0",
-    "@cosmicdrift/kumiko-renderer": "0.165.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "2.0.0",
+    "@cosmicdrift/kumiko-headless": "2.0.0",
+    "@cosmicdrift/kumiko-renderer": "2.0.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__/xss-safety.test.tsx

@@ -16,6 +16,10 @@ const PAYLOAD = '<script>window.__xss = true;</script><img src=x onerror="window
 const UNSAFE_HREFS = [
   "javascript:window.__xss = true",
   "data:text/html,<script>window.__xss=true</script>",
+  // Browsers strip embedded control/whitespace chars before scheme
+  // detection — a tab/newline mid-scheme must not bypass the check.
+  "java\tscript:window.__xss = true",
+  "java\nscript:window.__xss = true",
 ];
 
 describe("XSS-safety (tenant-authored content)", () => {

package/src/index.ts

@@ -163,8 +163,10 @@ export type {
   BooleanFieldProps,
   ComparisonMetric,
   DateFieldProps,
+  DrawerProps,
   FeedRow,
   FileFieldProps,
+  InfinityListProps,
   NumberFieldProps,
   ProgressListRow,
   QueryTableColumn,
@@ -188,10 +190,12 @@ export {
   ComparisonTable,
   DateField,
   DetailList,
+  Drawer,
   EmptyState,
   ErrorState,
   FeedList,
   FileField,
+  InfinityList,
   LoadingState,
   MiniStat,
   ModeSwitch,

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -186,4 +186,9 @@ describe("defaultCellRender", () => {
   test("money → unerwarteter Value-Shape fällt auf String zurück", () => {
     expect(defaultCellRender(45000, "money")).toBe("45000");
   });
+
+  test("money → invalid currency does not throw, falls back to [object Object] like pre-regression (#1494)", () => {
+    expect(() => defaultCellRender({ amount: 1, currency: "" }, "money")).not.toThrow();
+    expect(defaultCellRender({ amount: 1, currency: "" }, "money")).toBe("[object Object]");
+  });
 });

package/src/primitives/__tests__/money-input.test.tsx

@@ -8,7 +8,19 @@
 
 import { describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { currencyDecimals, MoneyInput, parseLocaleNumber } from "../money-input";
+import { currencyDecimals, formatMoney, MoneyInput, parseLocaleNumber } from "../money-input";
+
+describe("formatMoney", () => {
+  test("formats a normal amount with the currency symbol", () => {
+    expect(formatMoney(199_99, "USD", "en-US")).toBe("$199.99");
+  });
+
+  test("falls back to the raw amount instead of throwing on an invalid currency (#1494)", () => {
+    expect(formatMoney(100, "", "en-US")).toBe("100");
+    expect(formatMoney(100, "EU", "en-US")).toBe("100");
+    expect(formatMoney(100, "€", "en-US")).toBe("100");
+  });
+});
 
 describe("currencyDecimals", () => {
   test("0-Decimal-Währungen (JPY/KRW/VND/ISK)", () => {

package/src/primitives/index.tsx

@@ -9,7 +9,7 @@
 // Dropdown etc. kommen später).
 
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
-import { applyFormatSpec } from "@cosmicdrift/kumiko-headless";
+import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
   DataTableRowAction,
   DataTableRowActionMode,
@@ -79,7 +79,7 @@ import {
 import { FileUploadInput } from "./file-upload";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
-import { currencyDecimals, MoneyInput } from "./money-input";
+import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 
@@ -1261,7 +1261,8 @@ function isMoneyValue(value: unknown): value is { amount: number; currency: stri
     typeof value === "object" &&
     value !== null &&
     typeof (value as Record<string, unknown>)["amount"] === "number" &&
-    typeof (value as Record<string, unknown>)["currency"] === "string"
+    typeof (value as Record<string, unknown>)["currency"] === "string" &&
+    /^[A-Za-z]{3}$/.test((value as Record<string, unknown>)["currency"] as string)
   );
 }
 
@@ -1284,13 +1285,13 @@ export function defaultCellRender(
   if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
   if (type === "money") {
     if (!isMoneyValue(value)) return String(value);
-    const decimals = currencyDecimals(value.currency);
-    return new Intl.NumberFormat(undefined, {
-      style: "currency",
-      currency: value.currency,
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals,
-    }).format(value.amount / 10 ** decimals);
+    // No `locale` param here: DataTableCell has no app-locale context to
+    // thread through (unlike the form path — see MoneyInput/RenderField in
+    // packages/renderer, which pins the LocaleProvider locale). formatMoney
+    // falls back to guessLocale() (navigator.language), so the same amount
+    // can render differently in a table vs. a form on the same screen.
+    // Mid-term: pass the app locale down here too, analogous to render-field.
+    return formatMoney(value.amount, value.currency);
   }
   if (type === "select") {
     const raw = String(value);
@@ -1681,14 +1682,9 @@ function DefaultText({ variant = "body", children, testId }: TextProps): ReactNo
 
 // ---- Link (anchor mit Button-/Muted-Optik) ----
 
-// http(s)/mailto or scheme-less (relative/anchor) allowed; javascript:, data:,
-// vbscript:, etc. rejected. Mirrors renderer-mail-html's renderSafeMarkdown
-// href guard — no sanitizer dependency needed for a four-line regex check.
-function isSafeHref(href: string): boolean {
-  const trimmed = href.trim().toLowerCase();
-  if (!/^[a-z][a-z0-9+.-]*:/.test(trimmed)) return true;
-  return /^(?:https?|mailto):/.test(trimmed);
-}
+// isSafeHref lives in @cosmicdrift/kumiko-headless — shared with
+// page-render's server-side markdown renderer, both take untrusted
+// tenant-authored hrefs.
 
 // `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
 // der Standard für „weiter zu"-Navigationen nach Success-States (ehem.

package/src/primitives/money-input.tsx

@@ -64,16 +64,7 @@ export function MoneyInput({
   const [draft, setDraft] = useState<string>("");
 
   const major = value === "" ? null : value / factor;
-
-  const formatted =
-    major === null
-      ? ""
-      : new Intl.NumberFormat(resolvedLocale, {
-          style: "currency",
-          currency,
-          minimumFractionDigits: decimals,
-          maximumFractionDigits: decimals,
-        }).format(major);
+  const formatted = value === "" ? "" : formatMoney(value, currency, resolvedLocale);
 
   // Edit-Mode: Decimal-String ohne Tausender-Trenner. Konsistente Helper-
   // Funktion damit Focus-Init und Render-Fallback nicht auseinanderdriften.
@@ -170,6 +161,25 @@ function guessLocale(): string {
   return "en-US";
 }
 
+// Shared with defaultCellRender (index.tsx) so both formatting paths stay
+// identical instead of drifting. currency is validated against the
+// 3-letter-alpha shape Intl.NumberFormat requires — a non-conforming
+// value (e.g. from a JSONB custom field that never ran through
+// rehydrateMoney) throws a RangeError inside Intl.NumberFormat, and with
+// no ErrorBoundary in this render tree that would take down the whole
+// page instead of just this cell.
+export function formatMoney(amountMinor: number, currency: string, locale?: string): string {
+  if (!/^[A-Za-z]{3}$/.test(currency)) return String(amountMinor);
+  const decimals = currencyDecimals(currency);
+  const resolvedLocale = locale ?? guessLocale();
+  return new Intl.NumberFormat(resolvedLocale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(amountMinor / 10 ** decimals);
+}
+
 // Locale-Decimal-Parse: erkennt automatisch ob Komma oder Punkt der
 // Decimal-Separator ist. Intl.NumberFormat liefert die Trenner für
 // das Locale, daraus bauen wir den Reverse-Parser. Strict beim

package/src/ui/__tests__/avatar.test.tsx

@@ -20,16 +20,18 @@ describe("ui/Avatar", () => {
     expect(document.querySelector('[data-slot="avatar"]')).not.toBeNull();
   });
 
-  test("AvatarImage with failed load shows AvatarFallback", () => {
+  test("fallback renders while image is unloaded", () => {
     render(
       <Avatar>
         <AvatarImage src="/photo.png" alt="User" />
         <AvatarFallback>FB</AvatarFallback>
       </Avatar>,
     );
-    // happy-dom does not load images — Radix keeps the fallback visible
+    // happy-dom never loads images, so AvatarImage never reaches "loaded" —
+    // this only exercises the unloaded state, not an actual load failure.
     expect(screen.getByText("FB")).toBeTruthy();
     expect(document.querySelector('[data-slot="avatar-fallback"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="avatar-image"]')).toBeNull();
   });
 
   test("AvatarBadge renders inside avatar", () => {

package/src/version/__tests__/update-checker.test.tsx

@@ -2,7 +2,7 @@
 // shouldShowUpdate/isKumikoBuild stay in update-checker.test.ts (unit).
 
 import { afterEach, describe, expect, mock, test } from "bun:test";
-import { screen, waitFor } from "@testing-library/react";
+import { act, screen, waitFor } from "@testing-library/react";
 import { render } from "../../__tests__/test-utils";
 import { UpdateChecker } from "../update-checker";
 
@@ -99,7 +99,7 @@ describe("UpdateChecker", () => {
     expect(screen.queryByRole("status")).toBeNull();
   });
 
-  test("no __KUMIKO_BUILD__ → no fetch, no banner", () => {
+  test("no __KUMIKO_BUILD__ → no fetch, no banner", async () => {
     const fetchSpy = mock(async () => ({
       ok: true,
       json: async () => ({ id: "other", builtAt: "" }),
@@ -107,6 +107,7 @@ describe("UpdateChecker", () => {
     globalThis.fetch = fetchSpy as typeof globalThis.fetch;
 
     render(<UpdateChecker />);
+    await act(async () => {});
 
     expect(fetchSpy).not.toHaveBeenCalled();
     expect(screen.queryByRole("status")).toBeNull();

package/src/widgets/__tests__/drawer.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, mock, test } from "bun:test";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import { Drawer } from "../drawer";
+
+describe("Drawer", () => {
+  test("rendert Titel + Inhalt wenn open", () => {
+    render(
+      <Drawer open={true} onOpenChange={() => {}} title="Mail" testId="drawer">
+        <div>Body</div>
+      </Drawer>,
+    );
+    expect(screen.getByText("Mail")).toBeTruthy();
+    expect(screen.getByText("Body")).toBeTruthy();
+  });
+
+  test("open=false rendert nichts", () => {
+    render(
+      <Drawer open={false} onOpenChange={() => {}} title="Mail">
+        <div>Body</div>
+      </Drawer>,
+    );
+    expect(screen.queryByText("Body")).toBeNull();
+  });
+
+  test("Escape ruft onOpenChange(false)", () => {
+    const onOpenChange = mock((_open: boolean) => {});
+    render(
+      <Drawer open={true} onOpenChange={onOpenChange} title="Mail" testId="drawer">
+        <div>Body</div>
+      </Drawer>,
+    );
+    fireEvent.keyDown(screen.getByTestId("drawer"), { key: "Escape" });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

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

@@ -0,0 +1,132 @@
+import { describe, expect, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { InfinityList } from "../infinity-list";
+
+// jsdom has no IntersectionObserver — stub stores the callback per observer
+// so tests can fire the "sentinel became visible" event manually instead of
+// simulating real scrolling.
+const observers: ((entries: readonly { isIntersecting: boolean }[]) => void)[] = [];
+globalThis.IntersectionObserver = class {
+  constructor(cb: (entries: readonly { isIntersecting: boolean }[]) => void) {
+    observers.push(cb);
+  }
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+} as unknown as typeof IntersectionObserver;
+
+function fireIntersect(): void {
+  observers[observers.length - 1]?.([{ isIntersecting: true }]);
+}
+
+function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+type Row = { readonly id: string; readonly subject: string };
+type Page = { readonly rows: readonly Row[]; readonly nextCursor: string | null };
+
+function list(query: string) {
+  return (
+    <InfinityList<Page, Row>
+      query={query}
+      rows={(data) => data.rows}
+      nextCursor={(data) => data.nextCursor}
+      rowId={(row) => row.id}
+      renderRow={(row) => <span>{row.subject}</span>}
+      testId="inbox"
+    />
+  );
+}
+
+describe("InfinityList", () => {
+  test("rendert die erste Seite", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+  });
+
+  test("lädt die nächste Seite nach, sobald der Sentinel sichtbar wird", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "m1", subject: "Erste" }], nextCursor: "c1" },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { rows: [{ id: "m2", subject: "Zweite" }], nextCursor: null },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Erste")).toBeTruthy());
+    fireIntersect();
+    await waitFor(() => expect(screen.getByText("Zweite")).toBeTruthy());
+    expect(screen.getByText("Erste")).toBeTruthy();
+    expect(calls).toBe(2);
+  });
+
+  test("Fehler → ErrorState, Retry lädt neu", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: false,
+            error: { code: "internal", message: "kaputt", i18nKey: "errors.internal" },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByRole("button")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+    expect(calls).toBe(2);
+  });
+
+  test("leeres Result rendert Empty-State", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <InfinityList<Page, Row>
+        query="inbox:query:message:list"
+        rows={(data) => data.rows}
+        nextCursor={(data) => data.nextCursor}
+        rowId={(row) => row.id}
+        renderRow={(row) => <span>{row.subject}</span>}
+        emptyState={<span>Keine Nachrichten</span>}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Keine Nachrichten")).toBeTruthy());
+  });
+});

package/src/widgets/__tests__/result-panel.test.tsx

@@ -55,6 +55,28 @@ describe("ResultTable", () => {
     expect(totalRow?.className).toContain("font-semibold");
     expect(screen.getByText("Subtotal")).toBeTruthy();
   });
+
+  test("single-column table: footer value still renders (not dropped)", () => {
+    const singleColumn = [{ header: "Jahr", cell: (row: { year: number }) => row.year }];
+    const { container } = render(
+      <ResultTable
+        columns={singleColumn}
+        rows={ROWS}
+        rowKey={(r) => String(r.year)}
+        testId="rt"
+        footer={[{ label: "Total", value: "300", emphasize: true }]}
+      />,
+    );
+    const footerRows = container.querySelectorAll("tbody tr");
+    expect(footerRows).toHaveLength(3);
+    const totalRow = footerRows[2];
+    // Single <td> carries both label and value — colSpan is dropped, not
+    // set to 0, since there's only one column to span.
+    expect(totalRow?.querySelectorAll("td")).toHaveLength(1);
+    expect(totalRow?.querySelector("td")?.hasAttribute("colspan")).toBe(false);
+    expect(screen.getByText("Total")).toBeTruthy();
+    expect(screen.getByText("300")).toBeTruthy();
+  });
 });
 
 describe("ComparisonTable", () => {

package/src/widgets/drawer.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "../ui/sheet";
+
+export type DrawerProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly side?: "left" | "right" | "top" | "bottom";
+  readonly title?: ReactNode;
+  readonly description?: ReactNode;
+  readonly footer?: ReactNode;
+  readonly children: ReactNode;
+  readonly testId?: string;
+};
+
+/** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
+ *  thin wrapper over the Sheet primitive with header/body/footer slots
+ *  so screens skip per-route Radix boilerplate. */
+export function Drawer({
+  open,
+  onOpenChange,
+  side = "right",
+  title,
+  description,
+  footer,
+  children,
+  testId,
+}: DrawerProps): ReactNode {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side={side} data-testid={testId}>
+        {(title !== undefined || description !== undefined) && (
+          <SheetHeader>
+            {title !== undefined && <SheetTitle>{title}</SheetTitle>}
+            {description !== undefined && <SheetDescription>{description}</SheetDescription>}
+          </SheetHeader>
+        )}
+        <div className="flex-1 overflow-y-auto px-4">{children}</div>
+        {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/widgets/index.ts

@@ -18,6 +18,7 @@ export {
 } from "./charts";
 export { CollapsibleSection } from "./collapsible-section";
 export { DetailList } from "./detail-list";
+export { Drawer, type DrawerProps } from "./drawer";
 export { FeedList, type FeedRow } from "./feed-list";
 export {
   BooleanField,
@@ -39,6 +40,7 @@ export {
   TextField,
   type TextFieldProps,
 } from "./form-fields";
+export { InfinityList, type InfinityListProps } from "./infinity-list";
 export { ModeSwitch } from "./mode-switch";
 export { ProgressBar } from "./progress-bar";
 export { ProgressList, type ProgressListRow } from "./progress-list";

package/src/widgets/infinity-list.tsx

@@ -0,0 +1,112 @@
+import type { DispatcherError } from "@cosmicdrift/kumiko-headless";
+import { useDispatcher, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { EmptyState, ErrorState, LoadingState } from "./states";
+
+export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, unknown>>> = {
+  /** Dispatcher-Query-Type (`<feature>:query:<entity>:<verb>`). */
+  readonly query: string;
+  readonly payload?: Readonly<Record<string, unknown>>;
+  /** Rows per page — sent as `limit` in the query payload. Default 50. */
+  readonly pageSize?: number;
+  readonly rows: (data: TData) => readonly TRow[];
+  /** Pull the next-page cursor from the result; `null` means last page. */
+  readonly nextCursor: (data: TData) => string | null;
+  readonly rowId: (row: TRow, index: number) => string;
+  readonly renderRow: (row: TRow) => ReactNode;
+  readonly emptyState?: ReactNode;
+  readonly className?: string;
+  readonly testId?: string;
+};
+
+type State<TRow> =
+  | { readonly kind: "loading" }
+  | { readonly kind: "error"; readonly error: DispatcherError }
+  | { readonly kind: "ready"; readonly rows: readonly TRow[]; readonly cursor: string | null };
+
+/** Cursor-paginated scroll list (mail inbox, activity feeds) — loads the
+ *  next page when the end sentinel becomes visible (IntersectionObserver),
+ *  instead of a pager bar like QueryTable/entityList. The query handler
+ *  receives `{ ...payload, limit, cursor? }` and returns rows plus the next
+ *  cursor (same cursor convention as the audit-log screen). */
+export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unknown>>>({
+  query,
+  payload,
+  pageSize = 50,
+  rows,
+  nextCursor,
+  rowId,
+  renderRow,
+  emptyState,
+  className,
+  testId,
+}: InfinityListProps<TData, TRow>): ReactNode {
+  const dispatcher = useDispatcher();
+  const t = useTranslation();
+  const [state, setState] = useState<State<TRow>>({ kind: "loading" });
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const payloadKey = JSON.stringify(payload ?? {});
+
+  // rows/nextCursor are fresh closures on every caller render (inline
+  // arrow props). As useCallback deps that would recreate `load` every
+  // render → the mount effect below would refetch in a loop. Refs keep
+  // `load` stable while always reading the current selector.
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const nextCursorRef = useRef(nextCursor);
+  nextCursorRef.current = nextCursor;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
+  const load = useCallback(
+    async (cursor: string | null): Promise<void> => {
+      const res = await dispatcher.query<TData>(query, {
+        ...payload,
+        limit: pageSize,
+        ...(cursor !== null && { cursor }),
+      });
+      if (!res.isSuccess) {
+        setState({ kind: "error", error: res.error });
+        return;
+      }
+      const nextRows = rowsRef.current(res.data);
+      setState((prev) => ({
+        kind: "ready",
+        rows: cursor === null || prev.kind !== "ready" ? nextRows : [...prev.rows, ...nextRows],
+        cursor: nextCursorRef.current(res.data),
+      }));
+    },
+    [dispatcher, query, pageSize, payloadKey],
+  );
+
+  useEffect(() => {
+    setState({ kind: "loading" });
+    void load(null);
+  }, [load]);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    // skip: no further page or not ready yet — observer not needed
+    if (sentinel === null || state.kind !== "ready" || state.cursor === null) return;
+    const cursor = state.cursor;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting === true) void load(cursor);
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [state, load]);
+
+  if (state.kind === "loading") return <LoadingState rows={4} testId={testId} />;
+  if (state.kind === "error")
+    return <ErrorState error={state.error} onRetry={() => void load(null)} testId={testId} />;
+  if (state.rows.length === 0)
+    return <>{emptyState ?? <EmptyState title={t("kumiko.list.no-entries")} testId={testId} />}</>;
+
+  return (
+    <div data-testid={testId} className={className ?? "flex flex-col overflow-y-auto"}>
+      {state.rows.map((row, index) => (
+        <div key={rowId(row, index)}>{renderRow(row)}</div>
+      ))}
+      <div ref={sentinelRef} className="h-px" />
+    </div>
+  );
+}

package/src/widgets/result-panel.tsx

@@ -129,14 +129,25 @@ export function ResultTable<Row>({
               className={cn(i === 0 && "border-t", row.emphasize === true && "font-semibold")}
             >
               <td
-                colSpan={Math.max(columns.length - 1, 1)}
+                colSpan={columns.length > 1 ? Math.max(columns.length - 1, 1) : undefined}
                 className={cn(
                   "py-1.5 text-muted-foreground",
                   card === true && "px-3",
                   row.emphasize === true && "text-foreground",
+                  columns.length === 1 && "flex items-center justify-between gap-4",
                 )}
               >
                 {row.label}
+                {columns.length === 1 && (
+                  <span
+                    className={cn(
+                      "text-right tabular-nums",
+                      row.emphasize === true && "text-foreground",
+                    )}
+                  >
+                    {row.value}
+                  </span>
+                )}
               </td>
               {columns.length > 1 && (
                 <td className={cn("py-1.5 text-right tabular-nums", card === true && "px-3")}>