@cosmicdrift/kumiko-renderer-web 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.25.0",
+  "version": "0.27.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/layout/__tests__/avatar.test.tsx

@@ -0,0 +1,51 @@
+// Avatar Render-Tests (Phase 1, test-luecken-integration, Tier 2).
+//
+// Avatar ist ein pures Presentational-Component (kein Context, kein Radix)
+// → happy-dom-Render reicht. Pinnt die Initials-Extraktion und die
+// deterministische, id-basierte Farbwahl.
+
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { Avatar } from "../avatar";
+
+const colorClass = (className: string): string | undefined =>
+  className.split(/\s+/).find((c) => c.startsWith("bg-"));
+
+describe("Avatar — Initials", () => {
+  test("Zwei-Wort-Label → Initialen beider Wörter (DH), role=img, aria-label", () => {
+    render(<Avatar id="u1" label="Daniel Hennig" testId="av" />);
+    const el = screen.getByTestId("av");
+    expect(el.textContent).toBe("DH");
+    expect(el.getAttribute("role")).toBe("img");
+    expect(el.getAttribute("aria-label")).toBe("Daniel Hennig");
+  });
+
+  test("Single-Word → erste 2 Buchstaben, upper-case (Daniel → DA)", () => {
+    render(<Avatar id="u" label="Daniel" testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("DA");
+  });
+
+  test("Email als Single-Token → erste 2 Buchstaben (alice@… → AL)", () => {
+    // Hinweis: der Code-Kommentar behauptet "A", der Code liefert aber "AL"
+    // (split(/\s+/) trennt nicht an '@'). Test pinnt das IST-Verhalten.
+    render(<Avatar id="u" label="alice@example.com" testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("AL");
+  });
+
+  test("leeres / reines Whitespace-Label → '?'", () => {
+    render(<Avatar id="u" label="   " testId="av" />);
+    expect(screen.getByTestId("av").textContent).toBe("?");
+  });
+});
+
+describe("Avatar — Farbwahl", () => {
+  test("deterministisch pro id (gleiche id → gleiche Color-Class, unabhängig vom Label)", () => {
+    const { unmount } = render(<Avatar id="stable-id" label="A B" testId="a1" />);
+    const c1 = colorClass(screen.getByTestId("a1").className);
+    unmount();
+    render(<Avatar id="stable-id" label="Z W" testId="a2" />);
+    const c2 = colorClass(screen.getByTestId("a2").className);
+    expect(c1).toMatch(/^bg-/);
+    expect(c1).toBe(c2);
+  });
+});

package/src/layout/__tests__/nav-registry.test.ts

@@ -0,0 +1,73 @@
+// nav-registry Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// buildNavRegistrySlice(ForApp) qualifiziert Feature-lokale Nav-IDs zu QNs
+// (feature:nav:id), wendet einen optionalen Workspace-Allow-Filter an und
+// baut topLevel + byParent. Pure, kein DOM.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  AppSchema,
+  FeatureSchema,
+  NavDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { buildNavRegistrySlice, buildNavRegistrySliceForApp } from "../nav-tree";
+
+function feature(navs: readonly NavDefinition[], featureName = "tasks"): FeatureSchema {
+  return { featureName, entities: {}, screens: [], navs };
+}
+
+describe("buildNavRegistrySlice", () => {
+  test("qualifiziert Nav-IDs zu feature:nav:id", () => {
+    const slice = buildNavRegistrySlice(feature([{ id: "main", label: "Main" }]));
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:main"]);
+  });
+
+  test("parent-child: child unter byParent(qualified-parent), screen wird qualifiziert", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "main", label: "Main" },
+        { id: "list", label: "List", parent: "main", screen: "task-list" },
+      ]),
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:main"]);
+    const children = slice.byParent("tasks:nav:main");
+    expect(children.map((n) => n.id)).toEqual(["tasks:nav:list"]);
+    expect(children[0]?.screen).toBe("tasks:screen:task-list");
+  });
+
+  test("allowedNavQns filtert nicht-erlaubte Navs raus", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "a", label: "A" },
+        { id: "b", label: "B" },
+      ]),
+      new Set(["tasks:nav:a"]),
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:a"]);
+  });
+
+  test("child mit gedropptem Parent wird top-level (statt zu verschwinden)", () => {
+    const slice = buildNavRegistrySlice(
+      feature([
+        { id: "main", label: "Main" },
+        { id: "list", label: "List", parent: "main" },
+      ]),
+      new Set(["tasks:nav:list"]), // nur child erlaubt, parent gedroppt
+    );
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["tasks:nav:list"]);
+    expect(slice.byParent("tasks:nav:main")).toEqual([]);
+  });
+});
+
+describe("buildNavRegistrySliceForApp", () => {
+  test("qualifiziert Navs pro Feature (multi-feature)", () => {
+    const app: AppSchema = {
+      features: [
+        feature([{ id: "catalog", label: "Catalog" }], "shop"),
+        feature([{ id: "users", label: "Users" }], "admin"),
+      ],
+    };
+    const slice = buildNavRegistrySliceForApp(app);
+    expect(slice.topLevel.map((n) => n.id)).toEqual(["shop:nav:catalog", "admin:nav:users"]);
+  });
+});

package/src/layout/__tests__/workspace-access.test.ts

@@ -0,0 +1,94 @@
+// workspace-shell Pure-Logik Tests (Phase 1, test-luecken-integration, Tier 1).
+//
+// filterByAccess (Rollen-Filter + Sortierung), resolveDefaultId
+// (preferred > default > first), firstNavScreenId (erste Nav mit Screen).
+// Pure, kein DOM.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  AppSchema,
+  WorkspaceDefinition,
+  WorkspaceSchema,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { filterByAccess, firstNavScreenId, resolveDefaultId } from "../workspace-shell";
+
+function ws(definition: WorkspaceDefinition): WorkspaceSchema {
+  return { definition, navMembers: [] };
+}
+
+describe("filterByAccess", () => {
+  test("ohne access-rule immer sichtbar", () => {
+    const out = filterByAccess([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], []);
+    expect(out.map((w) => w.definition.id)).toEqual(["a", "b"]);
+  });
+
+  test("access {roles} filtert nach user-roles", () => {
+    const admin = ws({ id: "admin", label: "Admin", access: { roles: ["Admin"] } });
+    const open = ws({ id: "all", label: "All" });
+    expect(filterByAccess([admin, open], ["Admin"]).map((w) => w.definition.id)).toEqual([
+      "admin",
+      "all",
+    ]);
+    expect(filterByAccess([admin, open], ["User"]).map((w) => w.definition.id)).toEqual(["all"]);
+  });
+
+  test("sortiert nach order (lower = earlier)", () => {
+    const out = filterByAccess(
+      [ws({ id: "b", label: "B", order: 2 }), ws({ id: "a", label: "A", order: 1 })],
+      [],
+    );
+    expect(out.map((w) => w.definition.id)).toEqual(["a", "b"]);
+  });
+});
+
+describe("resolveDefaultId", () => {
+  test("preferred gewinnt wenn sichtbar", () => {
+    expect(resolveDefaultId([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], "b")).toBe(
+      "b",
+    );
+  });
+
+  test("default-flag wenn kein preferred", () => {
+    expect(
+      resolveDefaultId(
+        [ws({ id: "a", label: "A" }), ws({ id: "b", label: "B", default: true })],
+        undefined,
+      ),
+    ).toBe("b");
+  });
+
+  test("erste sichtbare als Fallback", () => {
+    expect(
+      resolveDefaultId([ws({ id: "a", label: "A" }), ws({ id: "b", label: "B" })], undefined),
+    ).toBe("a");
+  });
+
+  test("preferred nicht sichtbar → Fallback (hier: erste)", () => {
+    expect(resolveDefaultId([ws({ id: "a", label: "A" })], "nonexistent")).toBe("a");
+  });
+});
+
+describe("firstNavScreenId", () => {
+  const app: AppSchema = {
+    features: [
+      {
+        featureName: "shop",
+        entities: {},
+        screens: [],
+        navs: [
+          { id: "header", label: "H" }, // Section-Header ohne screen
+          { id: "list", label: "L", screen: "catalog" },
+        ],
+      },
+    ],
+  };
+
+  test("erste Nav (in navMembers-Reihenfolge) mit screen → lastSegment(screen)", () => {
+    expect(firstNavScreenId(app, ["shop:nav:header", "shop:nav:list"])).toBe("catalog");
+  });
+
+  test("leere oder undefined navMembers → ''", () => {
+    expect(firstNavScreenId(app, [])).toBe("");
+    expect(firstNavScreenId(app, undefined)).toBe("");
+  });
+});

package/src/layout/__tests__/workspace-switcher.test.tsx

@@ -0,0 +1,50 @@
+// WorkspaceSwitcher Render-Tests (Phase 1, test-luecken-integration, Tier 2).
+//
+// Dumb presentational component (kein Radix). Pinnt: kein Switcher bei
+// <= 1 Workspace, tablist mit aria-selected am aktiven, onSelect-Callback.
+// Nutzt useTranslation → über test-utils mit LocaleProvider gerendert.
+
+import { describe, expect, mock, test } from "bun:test";
+import type { WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import { WorkspaceSwitcher } from "../workspace-switcher";
+
+function ws(id: string, label = id): WorkspaceSchema {
+  return { definition: { id, label }, navMembers: [] };
+}
+
+describe("WorkspaceSwitcher — Render", () => {
+  test("ein einziger Workspace → rendert nichts (kein nutzloser Switcher)", () => {
+    const { container } = render(
+      <WorkspaceSwitcher workspaces={[ws("a")]} activeId="a" onSelect={() => {}} />,
+    );
+    expect(container.querySelector('[role="tablist"]')).toBeNull();
+  });
+
+  test("mehrere Workspaces → tablist, aria-selected am aktiven Tab", () => {
+    render(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="b"
+        onSelect={() => {}}
+        testId="sw"
+      />,
+    );
+    expect(screen.getByTestId("sw").getAttribute("role")).toBe("tablist");
+    expect(screen.getByTestId("workspace-tab-a").getAttribute("aria-selected")).toBe("false");
+    expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-selected")).toBe("true");
+  });
+
+  test("Click ruft onSelect mit der Workspace-id", () => {
+    const onSelect = mock((_id: string) => {});
+    render(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={onSelect}
+      />,
+    );
+    fireEvent.click(screen.getByTestId("workspace-tab-b"));
+    expect(onSelect).toHaveBeenCalledWith("b");
+  });
+});

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>>,