@cosmicdrift/kumiko-renderer-web 0.35.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.35.0",
+  "version": "0.36.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.21.0",
-    "@cosmicdrift/kumiko-headless": "0.21.0",
-    "@cosmicdrift/kumiko-renderer": "0.21.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.35.0",
+    "@cosmicdrift/kumiko-headless": "0.35.0",
+    "@cosmicdrift/kumiko-renderer": "0.35.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

@@ -3,7 +3,7 @@
 // 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 { describe, expect, spyOn, test } from "bun:test";
 import {
   applyFormatSpec,
   computeVisiblePages,
@@ -100,9 +100,13 @@ describe("applyFormatSpec", () => {
     expect(applyFormatSpec({ format: "priority" }, 5)).toBe("5");
   });
 
-  test("unbekanntes format → String(value) fallback", () => {
+  test("unbekanntes format → String(value) fallback + dev-warning", () => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
     expect(applyFormatSpec({ format: "custom-app-format" }, 42)).toBe("42");
     expect(applyFormatSpec({ format: "custom-app-format" }, "hello")).toBe("hello");
+    expect(warn).toHaveBeenCalledTimes(2);
+    expect(warn.mock.calls[0]?.[0]).toContain("custom-app-format");
+    warn.mockRestore();
   });
 });
 

package/src/primitives/index.tsx

@@ -9,6 +9,7 @@
 // Dropdown etc. kommen später).
 
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
+import { applyFormatSpec } from "@cosmicdrift/kumiko-headless";
 import type {
   DataTableRowAction,
   DataTableSort,
@@ -1056,37 +1057,8 @@ export function isComponentRendererRef(renderer: unknown): { readonly name: stri
   return { name: component };
 }
 
-// Applies a FormatSpec ({ format: "timestamp" } etc.) to a value.
-// Handles all built-in FieldFormatRegistry keys; unknown app-specific keys
-// fall back to String(value). Exported for unit tests.
-export function applyFormatSpec(
-  spec: { format: string } & Record<string, unknown>,
-  value: unknown,
-): string {
-  if (value === null || value === undefined || value === "") return "";
-  switch (spec.format) {
-    case "timestamp":
-    case "date":
-      return formatDateCell(value, spec.format);
-    case "boolean": {
-      if (value === true) return (spec["trueLabel"] as string | undefined) ?? "✓";
-      if (value === false) return (spec["falseLabel"] as string | undefined) ?? "";
-      return "";
-    }
-    case "currency": {
-      const sym = (spec["symbol"] as string | undefined) ?? "";
-      return sym.length > 0 ? `${value} ${sym}` : String(value);
-    }
-    case "priority": {
-      const emptyLabel = (spec["emptyLabel"] as string | undefined) ?? "—";
-      const prefix = (spec["prefix"] as string | undefined) ?? "";
-      if (value === 0 || value === undefined || value === null) return emptyLabel;
-      return `${prefix}${value}`;
-    }
-    default:
-      return typeof value === "string" ? value : String(value);
-  }
-}
+// applyFormatSpec re-exported from headless (platform-agnostic).
+export { applyFormatSpec };
 
 // Type-spezifische Default-Cell-Renderer. Author kann pro Spalte einen
 // expliziten renderer setzen (FormatSpec oder PlatformComponent); ohne
@@ -1103,7 +1075,7 @@ export function defaultCellRender(
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
-  if (type === "timestamp" || type === "date") return formatDateCell(value, type);
+  if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
   if (type === "select") {
     const raw = String(value);
     // Translated Label aus dem ViewModel-Builder (Convention-Key
@@ -1117,29 +1089,6 @@ export function defaultCellRender(
   return typeof value === "string" ? value : String(value);
 }
 
-function formatDateCell(value: unknown, type: string): string {
-  // Server liefert ISO-String oder Temporal.Instant.toJSON() (gleicher
-  // ISO-shape). Für `type:"date"` zeigen wir nur das Datum, für
-  // `type:"timestamp"` Datum + Uhrzeit. Locale-Default = Browser.
-  try {
-    const raw = typeof value === "string" ? value : String(value);
-    const date = new Date(raw);
-    if (Number.isNaN(date.getTime())) return raw;
-    if (type === "date") {
-      return date.toLocaleDateString();
-    }
-    return date.toLocaleString(undefined, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  } catch {
-    return String(value);
-  }
-}
-
 function humanizeSlug(slug: string): string {
   // "degraded-performance" → "Degraded performance"
   if (slug.length === 0) return slug;