@cosmicdrift/kumiko-renderer-web 0.24.1 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.24.1",
+  "version": "0.26.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>",

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

@@ -0,0 +1,82 @@
+// DataTable-Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// Reine Funktionen aus primitives/index.tsx (exportiert für Test, wie
+// money-input seine Pure-Logik exportiert). Kein DOM.
+
+import { describe, expect, test } from "bun:test";
+import { computeVisiblePages, defaultCellRender, isComponentRendererRef } from "../index";
+
+describe("computeVisiblePages", () => {
+  test("<= 7 Seiten: alle Seiten, keine Ellipsis", () => {
+    expect(computeVisiblePages(1, 5)).toEqual([1, 2, 3, 4, 5]);
+    expect(computeVisiblePages(3, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  test("erste + letzte Seite immer als Anker enthalten", () => {
+    const pages = computeVisiblePages(10, 20);
+    expect(pages[0]).toBe(1);
+    expect(pages.at(-1)).toBe(20);
+  });
+
+  test("Mitte (p=10/20): page±2-Window mit Ellipsen beidseitig", () => {
+    expect(computeVisiblePages(10, 20)).toEqual([1, "ellipsis", 8, 9, 10, 11, 12, "ellipsis", 20]);
+  });
+
+  test("Rand p=1/20: 5 Zahlen links sichtbar (Fenster verschoben, nicht abgeschnitten)", () => {
+    expect(computeVisiblePages(1, 20)).toEqual([1, 2, 3, 4, 5, "ellipsis", 20]);
+  });
+
+  test("Rand p=20/20: 5 Zahlen rechts sichtbar", () => {
+    expect(computeVisiblePages(20, 20)).toEqual([1, "ellipsis", 16, 17, 18, 19, 20]);
+  });
+
+  test("page=5/20: Übergang Rand→Mitte (Ellipsis links erscheint)", () => {
+    expect(computeVisiblePages(5, 20)).toEqual([1, "ellipsis", 3, 4, 5, 6, 7, "ellipsis", 20]);
+  });
+});
+
+describe("isComponentRendererRef", () => {
+  test("erkennt { react: { __component: 'Name' } }", () => {
+    expect(isComponentRendererRef({ react: { __component: "MyCell" } })).toEqual({
+      name: "MyCell",
+    });
+  });
+
+  test("null / non-object / fehlender react-Branch → undefined", () => {
+    expect(isComponentRendererRef(null)).toBeUndefined();
+    expect(isComponentRendererRef("x")).toBeUndefined();
+    expect(isComponentRendererRef({})).toBeUndefined();
+    expect(isComponentRendererRef({ react: null })).toBeUndefined();
+  });
+
+  test("leerer oder fehlender __component → undefined", () => {
+    expect(isComponentRendererRef({ react: {} })).toBeUndefined();
+    expect(isComponentRendererRef({ react: { __component: "" } })).toBeUndefined();
+  });
+});
+
+describe("defaultCellRender", () => {
+  test("null/undefined/leerer String → leerer String", () => {
+    expect(defaultCellRender(null, "text")).toBe("");
+    expect(defaultCellRender(undefined, "text")).toBe("");
+    expect(defaultCellRender("", "text")).toBe("");
+  });
+
+  test("boolean → ✓ bei true, leer bei false", () => {
+    expect(defaultCellRender(true, "boolean")).toBe("✓");
+    expect(defaultCellRender(false, "boolean")).toBe("");
+  });
+
+  test("select → humanizeSlug (kebab → Title Case), wenn kein optionLabel", () => {
+    expect(defaultCellRender("degraded-performance", "select")).toBe("Degraded performance");
+  });
+
+  test("select → registriertes optionLabel gewinnt vor humanizeSlug", () => {
+    expect(defaultCellRender("op-x", "select", { "op-x": "Operativ X" })).toBe("Operativ X");
+  });
+
+  test("text/number → String-Repräsentation", () => {
+    expect(defaultCellRender("hallo", "text")).toBe("hallo");
+    expect(defaultCellRender(42, "number")).toBe("42");
+  });
+});

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

@@ -0,0 +1,42 @@
+// date-input Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// parseIso/toIso aus date-input.tsx (exportiert für Test). Pinst das
+// non-obvious Timezone-Verhalten: parseIso baut ein LOKALES Date (nicht
+// UTC), damit "2026-04-25" im Calendar nicht je nach Zeitzone auf den
+// 24. kippt.
+
+import { describe, expect, test } from "bun:test";
+import { parseIso, toIso } from "../date-input";
+
+describe("parseIso", () => {
+  test("gültiges yyyy-mm-dd → lokales Date (kein UTC-Shift)", () => {
+    const d = parseIso("2026-04-25");
+    expect(d).toBeInstanceOf(Date);
+    expect(d?.getFullYear()).toBe(2026);
+    expect(d?.getMonth()).toBe(3); // 0-based: April
+    expect(d?.getDate()).toBe(25);
+  });
+
+  test("leerer String → undefined", () => {
+    expect(parseIso("")).toBeUndefined();
+  });
+
+  test("falsche Teil-Anzahl oder nicht-numerische Teile → undefined", () => {
+    expect(parseIso("2026-04")).toBeUndefined();
+    expect(parseIso("2026/04/25")).toBeUndefined();
+    expect(parseIso("abc-de-fg")).toBeUndefined();
+  });
+});
+
+describe("toIso", () => {
+  test("Date → yyyy-mm-dd mit Zero-Padding", () => {
+    expect(toIso(new Date(2026, 3, 5))).toBe("2026-04-05");
+    expect(toIso(new Date(2026, 11, 25))).toBe("2026-12-25");
+  });
+
+  test("Roundtrip parseIso → toIso ist stabil", () => {
+    const d = parseIso("2026-04-25");
+    expect(d).toBeDefined();
+    if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
+  });
+});

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

@@ -0,0 +1,149 @@
+// money-input Tests (Phase 1, test-luecken-integration).
+//
+// Tier 1 — Pure-Logik (currencyDecimals, parseLocaleNumber): exportierte
+//   reine Funktionen, kein DOM nötig.
+// Tier 2 — Render (happy-dom + @testing-library): money-input ist das
+//   einzige nicht-Radix-Primitive, daher voll testbar (kein
+//   Pointer-Capture-Problem) — Format-Roundtrip, +/- Bump, a11y.
+
+import { describe, expect, mock, test } from "bun:test";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { currencyDecimals, MoneyInput, parseLocaleNumber } from "../money-input";
+
+describe("currencyDecimals", () => {
+  test("0-Decimal-Währungen (JPY/KRW/VND/ISK)", () => {
+    for (const c of ["JPY", "KRW", "VND", "ISK"]) expect(currencyDecimals(c)).toBe(0);
+  });
+
+  test("3-Decimal-Währungen (BHD/JOD/KWD/OMR/TND)", () => {
+    for (const c of ["BHD", "JOD", "KWD", "OMR", "TND"]) expect(currencyDecimals(c)).toBe(3);
+  });
+
+  test("Default 2 für EUR/USD und unbekannte Codes", () => {
+    for (const c of ["EUR", "USD", "CHF", "ZZZ"]) expect(currencyDecimals(c)).toBe(2);
+  });
+});
+
+describe("parseLocaleNumber", () => {
+  test("en-US: Punkt = Decimal, Komma = Gruppierung", () => {
+    expect(parseLocaleNumber("1,234.56", "en-US")).toBeCloseTo(1234.56, 5);
+  });
+
+  test("de-DE: Komma = Decimal, Punkt = Gruppierung", () => {
+    expect(parseLocaleNumber("1.234,56", "de-DE")).toBeCloseTo(1234.56, 5);
+  });
+
+  test("führendes Minus erlaubt", () => {
+    expect(parseLocaleNumber("-123", "en-US")).toBe(-123);
+  });
+
+  test("Minus NUR ganz vorne — '1-23' ist invalid (NaN)", () => {
+    expect(parseLocaleNumber("1-23", "en-US")).toBeNaN();
+  });
+
+  test("Buchstaben, leerer String und nackter Separator → NaN", () => {
+    expect(parseLocaleNumber("abc", "en-US")).toBeNaN();
+    expect(parseLocaleNumber("", "en-US")).toBeNaN();
+    expect(parseLocaleNumber(".", "en-US")).toBeNaN();
+  });
+
+  test("umgebender Whitespace wird getrimmt", () => {
+    expect(parseLocaleNumber("  42  ", "en-US")).toBe(42);
+  });
+});
+
+function inputEl(): HTMLInputElement {
+  const el = screen.getByRole("textbox");
+  if (!(el instanceof HTMLInputElement)) throw new Error("expected an <input> element");
+  return el;
+}
+
+describe("MoneyInput — Render (Tier 2)", () => {
+  test("zeigt den Canonical-Cent-Wert als formatierte Währung (unfokussiert)", () => {
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value={1000}
+        onChange={() => {}}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const value = inputEl().value;
+    expect(value).toContain("10");
+    expect(value).toContain("€");
+  });
+
+  test("Focus schaltet auf rohen Decimal-String ohne Währungssymbol", () => {
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value={1000}
+        onChange={() => {}}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    fireEvent.focus(inputEl());
+    const value = inputEl().value;
+    expect(value).toContain("10,00");
+    expect(value).not.toContain("€");
+  });
+
+  test("Blur mit neuem Wert ruft onChange mit Minor-Units (Cents)", () => {
+    const onChange = mock((_v: number | undefined) => {});
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    fireEvent.focus(inputEl());
+    fireEvent.change(inputEl(), { target: { value: "25,50" } });
+    fireEvent.blur(inputEl());
+    expect(onChange).toHaveBeenCalledWith(2550);
+  });
+
+  test("+/- Buttons bumpen um eine Major-Unit (= factor Cents)", () => {
+    const onChange = mock((_v: number | undefined) => {});
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const [minus, plus] = screen.getAllByRole("button");
+    if (minus === undefined || plus === undefined) throw new Error("expected two step buttons");
+    fireEvent.click(plus);
+    expect(onChange).toHaveBeenLastCalledWith(1100);
+    fireEvent.click(minus);
+    expect(onChange).toHaveBeenLastCalledWith(900);
+  });
+
+  test("a11y: aria-required + aria-invalid spiegeln die Props", () => {
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value=""
+        onChange={() => {}}
+        currency="EUR"
+        required
+        hasError
+      />,
+    );
+    const input = inputEl();
+    expect(input.getAttribute("aria-required")).toBe("true");
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+  });
+});

package/src/primitives/date-input.tsx

@@ -133,7 +133,7 @@ const dayPickerClasses = {
   disabled: "text-muted-foreground/30 pointer-events-none",
 };
 
-function parseIso(v: string): Date | undefined {
+export function parseIso(v: string): Date | undefined {
   if (v === "") return undefined;
   // Date(yyyy-mm-dd) parses as UTC — wir wollen local damit "2026-04-25"
   // im Calendar nicht je nach Timezone als 24. oder 25. erscheint.
@@ -152,7 +152,7 @@ function parseIso(v: string): Date | undefined {
   return new Date(y, m - 1, d);
 }
 
-function toIso(d: Date): string {
+export function toIso(d: Date): string {
   const y = d.getFullYear();
   const m = String(d.getMonth() + 1).padStart(2, "0");
   const day = String(d.getDate()).padStart(2, "0");

package/src/primitives/index.tsx

@@ -924,18 +924,34 @@ function PagerButton({
 //   p=10, total=20: 1 … 8 9 [10] 11 12 … 20
 //   p=20, total=20: 1 … 16 17 18 19 [20]
 //   total=5: 1 2 3 4 5 (kein Window nötig)
-function computeVisiblePages(page: number, totalPages: number): readonly (number | "ellipsis")[] {
+export function computeVisiblePages(
+  page: number,
+  totalPages: number,
+): readonly (number | "ellipsis")[] {
   if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
-  const out: (number | "ellipsis")[] = [];
-  // Always show 1
-  out.push(1);
-  if (page > 4) out.push("ellipsis");
-  const start = Math.max(2, page - 2);
-  const end = Math.min(totalPages - 1, page + 2);
-  for (let i = start; i <= end; i++) out.push(i);
-  if (page < totalPages - 3) out.push("ellipsis");
-  // Always show last
-  out.push(totalPages);
+
+  // Fenster von 5 Seiten um die aktuelle Seite. An den Rändern wird das
+  // Fenster verschoben (nicht abgeschnitten), damit immer 5 Zahlen + die
+  // gegenüberliegende Anker-Seite sichtbar sind:
+  //   p=1,  total=20: 1 2 3 4 5 … 20
+  //   p=10, total=20: 1 … 8 9 10 11 12 … 20
+  //   p=20, total=20: 1 … 16 17 18 19 20
+  const leftSibling = Math.max(page - 2, 1);
+  const rightSibling = Math.min(page + 2, totalPages);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  if (!showLeftEllipsis) {
+    return [1, 2, 3, 4, 5, "ellipsis", totalPages];
+  }
+  if (!showRightEllipsis) {
+    const tail: (number | "ellipsis")[] = [1, "ellipsis"];
+    for (let i = totalPages - 4; i <= totalPages; i++) tail.push(i);
+    return tail;
+  }
+  const out: (number | "ellipsis")[] = [1, "ellipsis"];
+  for (let i = leftSibling; i <= rightSibling; i++) out.push(i);
+  out.push("ellipsis", totalPages);
   return out;
 }
 
@@ -1017,7 +1033,7 @@ function nextSortState(current: DataTableSortDir | undefined, field: string): Da
 // PlatformComponent-Renderer im Schema serialisiert ankommen. Schemas
 // reisen über die Wire (Server → Client), echte Component-Refs würden
 // das brechen — der String-Key ist die SSoT.
-function isComponentRendererRef(renderer: unknown): { readonly name: string } | undefined {
+export function isComponentRendererRef(renderer: unknown): { readonly name: string } | undefined {
   if (renderer === null || typeof renderer !== "object") return undefined;
   const reactBranch = (renderer as { react?: unknown }).react;
   if (reactBranch === null || typeof reactBranch !== "object") return undefined;
@@ -1034,7 +1050,7 @@ function isComponentRendererRef(renderer: unknown): { readonly name: string } |
 //   - timestamp/date → locale-formatiert (kein roher ISO-String)
 //   - select → human-lesbar (kebab-case → Title Case)
 //   - text/number/sonst → toString
-function defaultCellRender(
+export function defaultCellRender(
   value: unknown,
   type: string,
   optionLabels?: Readonly<Record<string, string>>,

package/src/__tests__/tokens.test.ts

@@ -1,8 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { applyTokensToCssVars } from "../tokens";
-
-describe("applyTokensToCssVars", () => {
-  test("is a documented no-op kept for backward compatibility", () => {
-    expect(() => applyTokensToCssVars({} as never)).not.toThrow();
-  });
-});