@cosmicdrift/kumiko-renderer-web 0.204.0 → 0.205.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.204.0",
+  "version": "0.205.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.204.0",
-    "@cosmicdrift/kumiko-headless": "0.204.0",
-    "@cosmicdrift/kumiko-renderer": "0.204.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.205.0",
+    "@cosmicdrift/kumiko-headless": "0.205.0",
+    "@cosmicdrift/kumiko-renderer": "0.205.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/primitives/__tests__/data-table-logic.test.ts

@@ -108,6 +108,42 @@ describe("applyFormatSpec", () => {
     expect(applyFormatSpec({ format: "currency" }, 42)).toBe("42");
   });
 
+  test("number/decimal: locale-formatiert via Intl.NumberFormat (fw#2160)", () => {
+    for (const format of ["number", "decimal"] as const) {
+      expect(applyFormatSpec({ format }, 245.5)).toBe(
+        new Intl.NumberFormat(undefined).format(245.5),
+      );
+      expect(applyFormatSpec({ format, locale: "de-DE" }, 245.5)).toBe(
+        new Intl.NumberFormat("de-DE").format(245.5),
+      );
+    }
+  });
+
+  test("bigInt: locale-formatiert (immer Integer auf der Wire — z.number().int().safe())", () => {
+    // schema-builder.ts case "bigInt": mode:"number" round-trip, safe up to
+    // 2^53 — bigInt fields are a plain JS number on the wire, never a bigint
+    // primitive or string, so the same formatNumberCell path applies.
+    expect(applyFormatSpec({ format: "bigInt" }, 1234567)).toBe(
+      new Intl.NumberFormat(undefined).format(1234567),
+    );
+    expect(applyFormatSpec({ format: "bigInt", locale: "de-DE" }, 1234567)).toBe(
+      new Intl.NumberFormat("de-DE").format(1234567),
+    );
+  });
+
+  test("number: nicht-numerischer/NaN/Infinity Value fällt auf String zurück", () => {
+    expect(applyFormatSpec({ format: "number" }, "not-a-number")).toBe("not-a-number");
+    expect(applyFormatSpec({ format: "number" }, Number.NaN)).toBe("NaN");
+    expect(applyFormatSpec({ format: "number" }, Number.POSITIVE_INFINITY)).toBe("Infinity");
+  });
+
+  test("number: ungültiges BCP-47 locale wirft nicht, fällt auf String zurück", () => {
+    expect(() =>
+      applyFormatSpec({ format: "number", locale: "not-a-locale!!" }, 245.5),
+    ).not.toThrow();
+    expect(applyFormatSpec({ format: "number", locale: "not-a-locale!!" }, 245.5)).toBe("245.5");
+  });
+
   test("priority: 0 → Standard-Dash, Zahl → prefix+value", () => {
     expect(applyFormatSpec({ format: "priority", prefix: "P" }, 0)).toBe("—");
     expect(applyFormatSpec({ format: "priority", prefix: "P" }, 3)).toBe("P3");
@@ -160,9 +196,17 @@ describe("defaultCellRender", () => {
     expect(defaultCellRender("op-x", "select", { "op-x": "Operativ X" })).toBe("Operativ X");
   });
 
-  test("text/number → String-Repräsentation", () => {
+  test("text → String-Repräsentation", () => {
     expect(defaultCellRender("hallo", "text")).toBe("hallo");
-    expect(defaultCellRender(42, "number")).toBe("42");
+  });
+
+  test("number/decimal → locale-formatiert, kein roher Dezimalpunkt (fw#2160)", () => {
+    expect(defaultCellRender(42, "number")).toBe(new Intl.NumberFormat(undefined).format(42));
+    expect(defaultCellRender(245.5, "decimal")).toBe(
+      new Intl.NumberFormat(undefined).format(245.5),
+    );
+    // de-DE reference to make the fix concrete: "," instead of "." as the separator.
+    expect(new Intl.NumberFormat("de-DE").format(245.5)).toBe("245,5");
   });
 
   test("money → { amount, currency } formatiert, kein [object Object]", () => {

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -12,7 +12,7 @@ import {
 } from "@cosmicdrift/kumiko-renderer";
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { act, type ReactElement, useState } from "react";
-import { EmbeddedListInput } from "../embedded-list-input";
+import { computeScrollAffordance, EmbeddedListInput } from "../embedded-list-input";
 
 function setViewportWidth(width: number): void {
   (
@@ -755,3 +755,88 @@ describe("EmbeddedListInput — desktop table width (solon#107)", () => {
     expect(headers[1]?.className).toContain("min-w-[13rem]");
   });
 });
+
+// happy-dom performs no layout — scrollWidth/clientWidth/getBoundingClientRect
+// always read 0, so the affordance decision itself (computeScrollAffordance)
+// is the only piece of fw#2159 a unit test can actually exercise; the rest
+// of this describe block covers what's left: that the DOM only exposes one
+// real scroll container, and that a fresh table always opens scrolled left.
+describe("EmbeddedListInput — horizontal scroll (fw#2159)", () => {
+  describe("computeScrollAffordance", () => {
+    test("no affordance when content fits (scrollWidth <= clientWidth)", () => {
+      expect(computeScrollAffordance(0, 500, 500)).toEqual({
+        canScrollLeft: false,
+        canScrollRight: false,
+      });
+    });
+
+    test("scrolled fully left: only the right affordance shows", () => {
+      expect(computeScrollAffordance(0, 1200, 700)).toEqual({
+        canScrollLeft: false,
+        canScrollRight: true,
+      });
+    });
+
+    test("scrolled to the middle: both affordances show", () => {
+      expect(computeScrollAffordance(250, 1200, 700)).toEqual({
+        canScrollLeft: true,
+        canScrollRight: true,
+      });
+    });
+
+    test("scrolled fully right: only the left affordance shows", () => {
+      expect(computeScrollAffordance(500, 1200, 700)).toEqual({
+        canScrollLeft: true,
+        canScrollRight: false,
+      });
+    });
+
+    test("sub-pixel rounding at the right edge (499.7px) does not falsely report more to scroll", () => {
+      expect(computeScrollAffordance(499.7, 1200, 700)).toEqual({
+        canScrollLeft: true,
+        canScrollRight: false,
+      });
+    });
+  });
+
+  test("the desktop table has exactly one horizontally-scrollable container, and it neutralizes the vendored table wrapper's own overflow", () => {
+    const rows = [{ description: "A", quantity: 1, amount: 100 }];
+    renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    const desktop = screen.getByTestId("lines-desktop");
+
+    const scrollContainers = desktop.querySelectorAll('[data-testid="lines-desktop-scroll"]');
+    expect(scrollContainers.length).toBe(1);
+    const scrollContainer = scrollContainers[0] as HTMLElement;
+    expect(scrollContainer.className).toContain("overflow-x-auto");
+    // Guards the fw#2159 trap: without this, ui/table.tsx's own
+    // `data-slot=table-container` wrapper (also overflow-x-auto) would
+    // absorb the actual scrolling, leaving our ref permanently at
+    // scrollLeft=0 and the affordance/reset logic silently dead.
+    expect(scrollContainer.className).toContain(
+      "[&_[data-slot=table-container]]:overflow-x-visible",
+    );
+
+    const nestedTableContainers = scrollContainer.querySelectorAll('[data-slot="table-container"]');
+    expect(nestedTableContainers.length).toBe(1);
+  });
+
+  test("a fresh desktop table always mounts scrolled fully left", () => {
+    const rows = [{ description: "A", quantity: 1, amount: 100 }];
+    renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    const scrollContainer = screen.getByTestId("lines-desktop-scroll");
+    expect(scrollContainer.scrollLeft).toBe(0);
+  });
+
+  test("a scrolled-right container never carries its position into the next mount (e.g. a reopened dialog)", () => {
+    const rows = [{ description: "A", quantity: 1, amount: 100 }];
+    const { unmount } = renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    const firstContainer = screen.getByTestId("lines-desktop-scroll");
+    firstContainer.scrollLeft = 200;
+    expect(firstContainer.scrollLeft).toBe(200);
+    unmount();
+
+    renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    const secondContainer = screen.getByTestId("lines-desktop-scroll");
+    expect(secondContainer.scrollLeft).toBe(0);
+  });
+});

package/src/primitives/embedded-list-input.tsx

@@ -106,6 +106,29 @@ function columnAlignClass(type: EmbeddedListCellType): string {
   }
 }
 
+type ScrollAffordance = {
+  readonly canScrollLeft: boolean;
+  readonly canScrollRight: boolean;
+};
+
+// Exported (unlike columnWidthClass/columnAlignClass above) because
+// happy-dom performs no layout — scrollWidth/clientWidth/getBoundingClientRect
+// always read 0 in tests, so the only way to cover this decision at all is
+// as a pure function of the three scroll metrics, tested directly.
+// The 1px slack absorbs sub-pixel rounding from browser zoom/fractional
+// scaling, which would otherwise report a spurious sliver of "still
+// scrollable" at a fully-scrolled edge.
+export function computeScrollAffordance(
+  scrollLeft: number,
+  scrollWidth: number,
+  clientWidth: number,
+): ScrollAffordance {
+  return {
+    canScrollLeft: scrollLeft > 1,
+    canScrollRight: scrollLeft + clientWidth < scrollWidth - 1,
+  };
+}
+
 function formatTotalValue(
   total: EmbeddedListTotal,
   columns: readonly EmbeddedListColumn[],
@@ -409,6 +432,37 @@ export function EmbeddedListInput({
   const isMobile = useIsNarrowViewport();
   const containerRef = useRef<HTMLDivElement>(null);
   const [pendingFocusCellId, setPendingFocusCellId] = useState<string | undefined>(undefined);
+  const [scrollAffordance, setScrollAffordance] = useState<ScrollAffordance>({
+    canScrollLeft: false,
+    canScrollRight: false,
+  });
+  // A callback ref (not useRef) so the setup effect below re-runs exactly
+  // when the scroll container itself is attached/detached — isMobile flips
+  // the whole subtree between mobile cards and this table (see the
+  // ponytail note at the top of the file), so a plain useRef wouldn't
+  // notice the desktop table remounting with a fresh DOM node.
+  const [scrollContainerEl, setScrollContainerEl] = useState<HTMLDivElement | null>(null);
+
+  // Resetting scrollLeft here is what guarantees the table always opens
+  // scrolled fully left (fw#2159): browsers still auto-scroll a focused
+  // descendant into view even inside an overflow-x-auto container, but
+  // that's now a real, user-drivable scroll instead of an invisible one.
+  useEffect(() => {
+    if (scrollContainerEl === null) return;
+    const el = scrollContainerEl;
+    el.scrollLeft = 0;
+    const updateAffordance = (): void => {
+      setScrollAffordance(computeScrollAffordance(el.scrollLeft, el.scrollWidth, el.clientWidth));
+    };
+    updateAffordance();
+    el.addEventListener("scroll", updateAffordance);
+    const resizeObserver = new ResizeObserver(updateAffordance);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateAffordance);
+      resizeObserver.disconnect();
+    };
+  }, [scrollContainerEl]);
 
   // React 19 batches the setPendingFocusCellId + onAddRow calls from the
   // same keydown handler into one commit, so the new row already exists
@@ -520,118 +574,153 @@ export function EmbeddedListInput({
   const hasTotals = totals !== undefined && totals.length > 0;
 
   return (
-    <div ref={containerRef} data-testid={testId}>
+    <div ref={containerRef} data-testid={testId} className="min-w-0">
       {/* ---- Desktop: table ---- */}
       {!isMobile && (
-        <div data-testid={testIdFor("desktop")} className="hidden md:block">
-          <div className="overflow-hidden rounded-lg border bg-card">
-            {/* w-full on Table's <table> would shrink columns below columnWidthClass; min-w-max keeps declared widths and lets the wrapper scroll instead */}
-            <Table className="min-w-max">
-              <TableHeader className="bg-muted">
-                <TableRow className="hover:bg-transparent">
-                  {columns.map((column) => (
-                    <TableHead
-                      key={column.field}
-                      className={cn(columnWidthClass(column.type), columnAlignClass(column.type))}
-                    >
-                      {column.label}
-                    </TableHead>
-                  ))}
-                  {showControls && <TableHead className="w-px text-right" aria-label="Actions" />}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {rows.map((row, rowIndex) => {
-                  const isLastRow = rowIndex === rows.length - 1;
-                  const rowIssuesForRow = rowIssues?.[rowIndex];
-                  return (
-                    <Fragment
-                      // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
-                      key={rowIndex}
-                    >
-                      <TableRow data-testid={testIdFor(`row-${rowIndex}`)}>
-                        {columns.map((column, columnIndex) => {
-                          const isLastCell = isLastRow && columnIndex === lastEditableIndex;
-                          const issues = cellIssues?.[`${rowIndex}.${column.field}`];
-                          return (
-                            <TableCell
-                              key={column.field}
-                              data-testid={testIdFor(`cell-${rowIndex}-${column.field}`)}
-                              className={columnWidthClass(column.type)}
-                              onPaste={
-                                onPasteCells !== undefined
-                                  ? handlePaste(rowIndex, columnIndex)
-                                  : undefined
-                              }
-                              onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
-                            >
-                              {renderCellControl({
-                                cellId: cellId(rowIndex, column.field),
-                                column,
-                                value: row[column.field],
-                                disabled: disabled === true,
-                                onChange: (value) => onCellChange(rowIndex, column.field, value),
-                                currency: effectiveCurrency,
-                              })}
-                              <IssueMessages
-                                issues={issues}
-                                testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
-                                constrainWidth
-                              />
-                            </TableCell>
-                          );
-                        })}
-                        {showControls && (
-                          <TableCell className="text-right">
-                            <RowActions
-                              rowIndex={rowIndex}
-                              rowsLength={rows.length}
-                              minItems={minItems}
-                              maxItems={maxItems}
-                              onDuplicateRow={onDuplicateRow}
-                              onMoveRow={onMoveRow}
-                              onRemoveRow={onRemoveRow}
-                              duplicateLabel={duplicateLabel}
-                              moveUpLabel={moveUpLabel}
-                              moveDownLabel={moveDownLabel}
-                              removeLabel={removeLabel}
-                              testIdPrefix={testIdFor(`row-${rowIndex}`)}
-                            />
-                          </TableCell>
-                        )}
-                      </TableRow>
-                      {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
-                        <TableRow>
-                          <TableCell colSpan={columns.length + (showControls ? 1 : 0)}>
-                            <IssueMessages
-                              issues={rowIssuesForRow}
-                              testId={testIdFor(`row-${rowIndex}-issues`)}
-                            />
-                          </TableCell>
-                        </TableRow>
+        <div data-testid={testIdFor("desktop")} className="hidden min-w-0 md:block">
+          <div className="min-w-0 overflow-hidden rounded-lg border bg-card">
+            <div className="relative min-w-0">
+              {/* This div — not ui/table.tsx's own `data-slot=table-container`
+                  wrapper — is the single source of truth for horizontal
+                  scroll (fw#2159): a table wider than its container must
+                  become reachable via a real, visible scrollbar instead of
+                  silently clipping columns. The nested selector below
+                  neutralizes the vendored wrapper's own overflow-x-auto so
+                  scrollLeft/scrollWidth/canScroll* all read from one place —
+                  two nested auto-scroll containers would otherwise let the
+                  inner one absorb the scroll and leave this ref/effect
+                  permanently reading scrollLeft=0. */}
+              <div
+                ref={setScrollContainerEl}
+                data-testid={testIdFor("desktop-scroll")}
+                className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible"
+              >
+                <Table className="min-w-max">
+                  <TableHeader className="bg-muted">
+                    <TableRow className="hover:bg-transparent">
+                      {columns.map((column) => (
+                        <TableHead
+                          key={column.field}
+                          className={cn(
+                            columnWidthClass(column.type),
+                            columnAlignClass(column.type),
+                          )}
+                        >
+                          {column.label}
+                        </TableHead>
+                      ))}
+                      {showControls && (
+                        <TableHead className="w-px text-right" aria-label="Actions" />
                       )}
-                    </Fragment>
-                  );
-                })}
-                {showControls && (
-                  <TableRow className="hover:bg-transparent">
-                    <TableCell colSpan={columns.length + 1} className="p-2">
-                      <UiButton
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={onAddRow}
-                        disabled={addDisabled}
-                        data-testid={testIdFor("add")}
-                      >
-                        <Plus className="size-4" aria-hidden="true" />
-                        {addLabel}
-                      </UiButton>
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {rows.map((row, rowIndex) => {
+                      const isLastRow = rowIndex === rows.length - 1;
+                      const rowIssuesForRow = rowIssues?.[rowIndex];
+                      return (
+                        <Fragment
+                          // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
+                          key={rowIndex}
+                        >
+                          <TableRow data-testid={testIdFor(`row-${rowIndex}`)}>
+                            {columns.map((column, columnIndex) => {
+                              const isLastCell = isLastRow && columnIndex === lastEditableIndex;
+                              const issues = cellIssues?.[`${rowIndex}.${column.field}`];
+                              return (
+                                <TableCell
+                                  key={column.field}
+                                  data-testid={testIdFor(`cell-${rowIndex}-${column.field}`)}
+                                  className={columnWidthClass(column.type)}
+                                  onPaste={
+                                    onPasteCells !== undefined
+                                      ? handlePaste(rowIndex, columnIndex)
+                                      : undefined
+                                  }
+                                  onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
+                                >
+                                  {renderCellControl({
+                                    cellId: cellId(rowIndex, column.field),
+                                    column,
+                                    value: row[column.field],
+                                    disabled: disabled === true,
+                                    onChange: (value) =>
+                                      onCellChange(rowIndex, column.field, value),
+                                    currency: effectiveCurrency,
+                                  })}
+                                  <IssueMessages
+                                    issues={issues}
+                                    testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
+                                    constrainWidth
+                                  />
+                                </TableCell>
+                              );
+                            })}
+                            {showControls && (
+                              <TableCell className="text-right">
+                                <RowActions
+                                  rowIndex={rowIndex}
+                                  rowsLength={rows.length}
+                                  minItems={minItems}
+                                  maxItems={maxItems}
+                                  onDuplicateRow={onDuplicateRow}
+                                  onMoveRow={onMoveRow}
+                                  onRemoveRow={onRemoveRow}
+                                  duplicateLabel={duplicateLabel}
+                                  moveUpLabel={moveUpLabel}
+                                  moveDownLabel={moveDownLabel}
+                                  removeLabel={removeLabel}
+                                  testIdPrefix={testIdFor(`row-${rowIndex}`)}
+                                />
+                              </TableCell>
+                            )}
+                          </TableRow>
+                          {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
+                            <TableRow>
+                              <TableCell colSpan={columns.length + (showControls ? 1 : 0)}>
+                                <IssueMessages
+                                  issues={rowIssuesForRow}
+                                  testId={testIdFor(`row-${rowIndex}-issues`)}
+                                />
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </Fragment>
+                      );
+                    })}
+                    {showControls && (
+                      <TableRow className="hover:bg-transparent">
+                        <TableCell colSpan={columns.length + 1} className="p-2">
+                          <UiButton
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={onAddRow}
+                            disabled={addDisabled}
+                            data-testid={testIdFor("add")}
+                          >
+                            <Plus className="size-4" aria-hidden="true" />
+                            {addLabel}
+                          </UiButton>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+              {scrollAffordance.canScrollLeft && (
+                <div
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-card to-transparent"
+                />
+              )}
+              {scrollAffordance.canScrollRight && (
+                <div
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-card to-transparent"
+                />
+              )}
+            </div>
             {hasTotals && (
               <div
                 data-testid={testIdFor("totals")}

package/src/primitives/index.tsx

@@ -1431,9 +1431,10 @@ function isMoneyValue(value: unknown): value is MoneyCellValue {
 //
 //   - boolean → ✓ / leer
 //   - timestamp/date → locale-formatiert (kein roher ISO-String)
+//   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat (fw#2160)
 //   - select → human-lesbar (kebab-case → Title Case)
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
-//   - text/number/sonst → toString
+//   - text/else → toString
 export function defaultCellRender(
   value: unknown,
   type: string,
@@ -1442,6 +1443,12 @@ export function defaultCellRender(
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
   if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
+  if (type === "number" || type === "decimal" || type === "bigInt") {
+    // No `locale` param here for the same reason as the money branch below:
+    // DataTableCell has no app-locale context to thread through yet.
+    // Intl.NumberFormat(undefined) resolves the runtime's default locale.
+    return applyFormatSpec({ format: type }, value);
+  }
   if (type === "money") {
     if (!isMoneyValue(value)) return String(value);
     // No `locale` param here: DataTableCell has no app-locale context to