@cosmicdrift/kumiko-renderer-web 0.167.1 → 0.168.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.167.1",
+  "version": "0.168.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.167.1",
-    "@cosmicdrift/kumiko-headless": "0.167.1",
-    "@cosmicdrift/kumiko-renderer": "0.167.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.168.0",
+    "@cosmicdrift/kumiko-headless": "0.168.0",
+    "@cosmicdrift/kumiko-renderer": "0.168.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -36,7 +36,8 @@
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
     "react-dom": "^19.2.6",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "temporal-polyfill": "^0.3.2"
   },
   "peerDependencies": {
     "@tailwindcss/cli": "^4.3.0",

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

@@ -1,44 +1,50 @@
-// date-parse Pure-Logik Tests. parseIso pinnt das non-obvious Timezone-
-// Verhalten (baut ein LOKALES Date, nicht UTC, damit "2026-04-25" im
-// Calendar nicht je nach Zeitzone auf den 24. kippt). parseTypedDate deckt
-// die getippte Eingabe ab (#369): locale-Reihenfolge, Trenner-Toleranz,
-// Überlauf-Abweisung.
+// date-parse pure logic tests. parseIso pins the non-obvious timezone
+// behavior (PlainDate has no TZ conversion, so "2026-04-25" doesn't shift
+// to the 24th in the calendar depending on the zone). parseTypedDate
+// covers typed input (#369): locale order, separator tolerance, overflow
+// rejection.
 
 import { describe, expect, test } from "bun:test";
+import { Temporal } from "temporal-polyfill";
 import { formatDateForInput, parseIso, parseTypedDate, toIso } from "../date-parse";
 
 describe("parseIso", () => {
-  test("gültiges yyyy-mm-dd → lokales Date (kein UTC-Shift)", () => {
+  test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {
     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);
+    expect(d).toBeInstanceOf(Temporal.PlainDate);
+    expect(d?.year).toBe(2026);
+    expect(d?.month).toBe(4);
+    expect(d?.day).toBe(25);
   });
 
-  test("leerer String → undefined", () => {
+  test("empty string → undefined", () => {
     expect(parseIso("")).toBeUndefined();
   });
 
-  test("falsche Teil-Anzahl oder nicht-numerische Teile → undefined", () => {
+  test("wrong part count or non-numeric parts → undefined", () => {
     expect(parseIso("2026-04")).toBeUndefined();
     expect(parseIso("2026/04/25")).toBeUndefined();
     expect(parseIso("abc-de-fg")).toBeUndefined();
   });
 
-  test("ungültiger Kalendertag (Überlauf) → undefined", () => {
+  test("invalid calendar day (overflow) → undefined", () => {
     expect(parseIso("2026-02-31")).toBeUndefined();
     expect(parseIso("2026-13-01")).toBeUndefined();
   });
+
+  test("year below 100 → undefined (no 1900+y fallback)", () => {
+    expect(parseIso("0026-04-25")).toBeUndefined();
+    expect(parseIso("26-04-25")).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("PlainDate → yyyy-mm-dd with zero padding", () => {
+    expect(toIso(Temporal.PlainDate.from({ year: 2026, month: 4, day: 5 }))).toBe("2026-04-05");
+    expect(toIso(Temporal.PlainDate.from({ year: 2026, month: 12, day: 25 }))).toBe("2026-12-25");
   });
 
-  test("Roundtrip parseIso → toIso ist stabil", () => {
+  test("roundtrip parseIso → toIso is stable", () => {
     const d = parseIso("2026-04-25");
     expect(d).toBeDefined();
     if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
@@ -46,35 +52,35 @@ describe("toIso", () => {
 });
 
 describe("parseTypedDate", () => {
-  test("ISO direkt getippt → Date", () => {
-    expect(toIso(parseTypedDate("2026-04-25", "de-DE") as Date)).toBe("2026-04-25");
+  test("ISO typed directly → PlainDate", () => {
+    expect(toIso(parseTypedDate("2026-04-25", "de-DE") as Temporal.PlainDate)).toBe("2026-04-25");
   });
 
-  test("de-DE Reihenfolge d.m.y", () => {
+  test("de-DE order d.m.y", () => {
     const d = parseTypedDate("25.04.2026", "de-DE");
     expect(d).toBeDefined();
     if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
   });
 
-  test("en-US Reihenfolge m/d/y", () => {
+  test("en-US order m/d/y", () => {
     const d = parseTypedDate("04/25/2026", "en-US");
     expect(d).toBeDefined();
     if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
   });
 
-  test("Trenner-Toleranz (gemischte Nicht-Ziffern)", () => {
+  test("separator tolerance (mixed non-digits)", () => {
     const d = parseTypedDate("25 4 2026", "de-DE");
     expect(d).toBeDefined();
     if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
   });
 
-  test("zweistelliges Jahr → 2000er", () => {
+  test("two-digit year → 2000s", () => {
     const d = parseTypedDate("25.04.26", "de-DE");
     expect(d).toBeDefined();
     if (d !== undefined) expect(toIso(d)).toBe("2026-04-25");
   });
 
-  test("Teil-/Fehl-Eingabe → undefined", () => {
+  test("partial/invalid input → undefined", () => {
     expect(parseTypedDate("", "de-DE")).toBeUndefined();
     expect(parseTypedDate("25.04", "de-DE")).toBeUndefined();
     expect(parseTypedDate("foo", "de-DE")).toBeUndefined();
@@ -83,10 +89,23 @@ describe("parseTypedDate", () => {
 });
 
 describe("formatDateForInput", () => {
-  test("numerisch, locale-spezifisch, wieder parsebar", () => {
-    const formatted = formatDateForInput(new Date(2026, 3, 25), "de-DE");
+  test("numeric, locale-specific, re-parseable", () => {
+    const formatted = formatDateForInput(
+      Temporal.PlainDate.from({ year: 2026, month: 4, day: 25 }),
+      "de-DE",
+    );
     const roundtrip = parseTypedDate(formatted, "de-DE");
     expect(roundtrip).toBeDefined();
     if (roundtrip !== undefined) expect(toIso(roundtrip)).toBe("2026-04-25");
   });
+
+  test("en-US locale, re-parseable", () => {
+    const formatted = formatDateForInput(
+      Temporal.PlainDate.from({ year: 2026, month: 4, day: 25 }),
+      "en-US",
+    );
+    const roundtrip = parseTypedDate(formatted, "en-US");
+    expect(roundtrip).toBeDefined();
+    if (roundtrip !== undefined) expect(toIso(roundtrip)).toBe("2026-04-25");
+  });
 });

package/src/primitives/date-field.tsx

@@ -1,18 +1,34 @@
-// DateField — die gemeinsame tippbare Datums-Eingabe: ein Text-Input
-// (locale-aware Parse, Teil-Eingaben tolerant) plus CalendarPopover mit
-// Jahres-/Dekaden-Dropdown. Underlying-Wert ist ISO `yyyy-mm-dd`.
+// DateField — the shared typable date input: a text input (locale-aware
+// parse, tolerant of partial input) plus a CalendarPopover with year/
+// decade dropdown. Underlying value is ISO `yyyy-mm-dd`.
 //
-// Eine Quelle für beide Date-Primitives: DateInput (kind:"date") ist ein
-// dünner Re-Export hiervon, TimestampInput (kind:"timestamp") nutzt es als
-// Datums-Teil neben dem Uhrzeit-Input. So teilen `date` und `timestamp`
-// dieselbe Tipp-/Navigations-UX statt zweier divergenter Primitives (#369).
+// One source for both date primitives: DateInput (kind:"date") is a thin
+// re-export of this, TimestampInput (kind:"timestamp") uses it as the
+// date part next to the time input. So `date` and `timestamp` share the
+// same typing/navigation UX instead of two diverging primitives (#369).
 
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
+import { Temporal } from "temporal-polyfill";
 import { cn } from "../lib/cn";
 import { CalendarPopover } from "./calendar-popover";
 import { formatDateForInput, guessLocale, parseIso, parseTypedDate, toIso } from "./date-parse";
 
+// CalendarPopover wraps react-day-picker, which only accepts native Date
+// objects — the PlainDate↔Date boundary conversion stays confined to
+// these two functions instead of spreading through the rest of the field.
+function toNativeDate(pd: Temporal.PlainDate): Date {
+  return new Date(pd.year, pd.month - 1, pd.day);
+}
+
+function fromNativeDate(d: Date): Temporal.PlainDate {
+  return Temporal.PlainDate.from({
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate(),
+  });
+}
+
 export type DateFieldProps = {
   readonly id: string;
   readonly name: string;
@@ -22,9 +38,9 @@ export type DateFieldProps = {
   readonly required?: boolean;
   readonly hasError?: boolean;
   readonly locale?: string;
-  /** Untere/obere Grenze als ISO `yyyy-mm-dd`. Begrenzt den Kalender
-   *  (Jahres-Dropdown-Range + ausgegraute Tage). Server-Validierung läuft
-   *  separat über die Zod-Schemas. */
+  /** Lower/upper bound as ISO `yyyy-mm-dd`. Limits the calendar
+   *  (year-dropdown range + greyed-out days). Server-side validation runs
+   *  separately via the Zod schemas. */
   readonly min?: string;
   readonly max?: string;
 };
@@ -52,9 +68,9 @@ export function DateField({
   const resolvedLocale = locale ?? guessLocale();
   const selected = parseIso(value);
 
-  // draft === null → zeige den kanonisch formatierten Wert. Sobald der User
-  // tippt, hält draft den Roh-Text, damit die Eingabe nicht bei jedem
-  // Tastendruck umformatiert wird. onBlur setzt zurück auf null.
+  // draft === null → show the canonically formatted value. Once the user
+  // types, draft holds the raw text so input isn't reformatted on every
+  // keystroke. onBlur resets it back to null.
   const [draft, setDraft] = useState<string | null>(null);
   const display =
     draft ?? (selected !== undefined ? formatDateForInput(selected, resolvedLocale) : "");
@@ -82,7 +98,10 @@ export function DateField({
         disabled={disabled}
         required={required}
         aria-invalid={hasError === true ? true : undefined}
-        placeholder={formatDateForInput(new Date(2026, 11, 31), resolvedLocale)}
+        placeholder={formatDateForInput(
+          Temporal.PlainDate.from({ year: 2026, month: 12, day: 31 }),
+          resolvedLocale,
+        )}
         onChange={(e) => {
           setDraft(e.target.value);
           commitTyped(e.target.value);
@@ -94,13 +113,13 @@ export function DateField({
         )}
       />
       <CalendarPopover
-        selected={selected}
+        selected={selected !== undefined ? toNativeDate(selected) : undefined}
         onSelect={(d) => {
-          onChange(d !== undefined ? toIso(d) : undefined);
+          onChange(d !== undefined ? toIso(fromNativeDate(d)) : undefined);
           setDraft(null);
         }}
-        {...(minDate !== undefined && { min: minDate })}
-        {...(maxDate !== undefined && { max: maxDate })}
+        {...(minDate !== undefined && { min: toNativeDate(minDate) })}
+        {...(maxDate !== undefined && { max: toNativeDate(maxDate) })}
         {...(disabled !== undefined && { disabled })}
         {...(hasError !== undefined && { hasError })}
         triggerLabel={t("kumiko.field.open-calendar")}

package/src/primitives/date-parse.ts

@@ -1,32 +1,29 @@
-// Gemeinsame Datums-Parse/Format-Utils für die Web-Date-Primitives
-// (DateInput, TimestampInput). PlainDate-Semantik: lokale Date-Objekte
-// ohne Timezone-Konvertierung — "2026-04-25" bleibt der 25., egal in
-// welcher Zone der Browser läuft. Die TZ-/Wall-Clock-Konvertierung für
-// timestamp-Felder lebt bewusst weiter in timestamp-input.tsx (Wire-
-// Boundary, eigener Test); hier ist reines Kalender-Datum.
+// Shared date parse/format utils for the web date primitives (DateInput,
+// TimestampInput). PlainDate semantics: pure calendar date, no timezone
+// conversion — "2026-04-25" stays the 25th regardless of the browser's
+// zone. TZ/wall-clock conversion for timestamp fields deliberately stays
+// in timestamp-input.tsx (wire boundary, own test); this file is pure
+// calendar date.
+
+import { Temporal } from "temporal-polyfill";
 
 export function guessLocale(): string {
   if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
   return "en-US";
 }
 
-function pad(n: number): string {
-  return String(n).padStart(2, "0");
-}
-
-// new Date(y, m-1, d) akzeptiert Überläufe (31. Feb → 3. März) und
-// interpretiert 0–99 als 1900+y. Beides hier als ungültig abweisen, damit
-// getippte Datümer nicht still in ein anderes Datum kippen.
-function makeLocalDate(y: number, m: number, d: number): Date | undefined {
-  if (m < 1 || m > 12 || d < 1 || d > 31) return undefined;
-  const date = new Date(y, m - 1, d);
-  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) {
+// overflow:"reject" throws on overflow (Feb 31 → RangeError) instead of
+// silently rolling it forward — typed dates should not silently shift to
+// a different date.
+function makePlainDate(y: number, m: number, d: number): Temporal.PlainDate | undefined {
+  try {
+    return Temporal.PlainDate.from({ year: y, month: m, day: d }, { overflow: "reject" });
+  } catch {
     return undefined;
   }
-  return date;
 }
 
-export function parseIso(v: string): Date | undefined {
+export function parseIso(v: string): Temporal.PlainDate | undefined {
   if (v === "") return undefined;
   const parts = v.split("-");
   if (parts.length !== 3) return undefined;
@@ -37,32 +34,42 @@ export function parseIso(v: string): Date | undefined {
     d === undefined ||
     Number.isNaN(y) ||
     Number.isNaN(m) ||
-    Number.isNaN(d)
+    Number.isNaN(d) ||
+    // Reject 2-digit years — matches the pre-PlainDate behavior where
+    // `new Date`'s 1900+y quirk made a round-trip check fail on them.
+    y < 100
   ) {
     return undefined;
   }
-  return makeLocalDate(y, m, d);
+  return makePlainDate(y, m, d);
 }
 
-export function toIso(d: Date): string {
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+export function toIso(d: Temporal.PlainDate): string {
+  return d.toString();
 }
 
-// Editierbare, wieder-parsebare Anzeige (numerisches Locale-Format, z.B.
-// de "25.04.2026", en-US "04/25/2026"). Bewusst NICHT month:"long" — der
-// User soll den angezeigten Text direkt überschreiben können.
-export function formatDateForInput(d: Date, locale: string): string {
-  return d.toLocaleDateString(locale, { year: "numeric", month: "2-digit", day: "2-digit" });
+// Editable, re-parseable display (numeric locale format, e.g. de
+// "25.04.2026", en-US "04/25/2026"). Deliberately NOT month:"long" — the
+// user should be able to overwrite the displayed text directly.
+export function formatDateForInput(d: Temporal.PlainDate, locale: string): string {
+  return d.toLocaleString(locale, { year: "numeric", month: "2-digit", day: "2-digit" });
 }
 
 type DateSlot = "y" | "m" | "d";
 
-// Feld-Reihenfolge des numerischen Locale-Formats. de → [d,m,y],
-// en-US → [m,d,y], ISO-ähnliche Locales → [y,m,d].
+// Field order of the numeric locale format. de → [d,m,y], en-US →
+// [m,d,y], ISO-like locales → [y,m,d]. formatToParts runs over an epoch-
+// millis number instead of a Date object (guard-compliant) — timeZone:
+// "UTC" keeps the reference from shifting to the 1st depending on the
+// browser's TZ.
 function localeDateOrder(locale: string): readonly DateSlot[] {
-  const ref = new Date(2026, 0, 2); // Tag 2, Monat 1 — alle Felder eindeutig
+  const refEpochMillis = Temporal.PlainDate.from({ year: 2026, month: 1, day: 2 }).toZonedDateTime(
+    "UTC",
+  ).epochMilliseconds;
   const order: DateSlot[] = [];
-  for (const part of new Intl.DateTimeFormat(locale).formatToParts(ref)) {
+  for (const part of new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(
+    refEpochMillis,
+  )) {
     if (part.type === "year") order.push("y");
     else if (part.type === "month") order.push("m");
     else if (part.type === "day") order.push("d");
@@ -70,11 +77,11 @@ function localeDateOrder(locale: string): readonly DateSlot[] {
   return order;
 }
 
-// Getippte Eingabe → Date. Akzeptiert ISO (yyyy-mm-dd) direkt sowie drei
-// numerische Tokens in Locale-Reihenfolge mit beliebigem Trenner
-// (".", "/", "-", " "). Zweistellige Jahre → 2000er. Teil-/Fehl-Eingaben
-// → undefined (Caller behält dann den Roh-Text, committet nichts).
-export function parseTypedDate(input: string, locale: string): Date | undefined {
+// Typed input → PlainDate. Accepts ISO (yyyy-mm-dd) directly, plus three
+// numeric tokens in locale order with any separator (".", "/", "-", " ").
+// Two-digit years → 2000s. Partial/invalid input → undefined (caller
+// keeps the raw text then, commits nothing).
+export function parseTypedDate(input: string, locale: string): Temporal.PlainDate | undefined {
   const trimmed = input.trim();
   if (trimmed === "") return undefined;
 
@@ -100,5 +107,5 @@ export function parseTypedDate(input: string, locale: string): Date | undefined
   });
   if (y < 100) y += 2000;
 
-  return makeLocalDate(y, m, d);
+  return makePlainDate(y, m, d);
 }