@cosmicdrift/kumiko-renderer-web 0.93.0 → 0.95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.93.0",
+  "version": "0.95.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.93.0",
-    "@cosmicdrift/kumiko-headless": "0.93.0",
-    "@cosmicdrift/kumiko-renderer": "0.93.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.95.0",
+    "@cosmicdrift/kumiko-headless": "0.95.0",
+    "@cosmicdrift/kumiko-renderer": "0.95.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/__tests__/located-timestamp-input.test.tsx

@@ -0,0 +1,96 @@
+// LocatedTimestampInput (kind:"locatedTimestamp") — Wall-Clock + IANA-Zone.
+// Pinnt das emittierte `at` gegen das ECHTE Server-Schema (die
+// locatedTimestamp-Write-Union aus schema-builder.ts nutzt für `at`
+// z.iso.datetime({ local: true })). Ein located Timestamp ist reine
+// Wall-Clock — KEINE UTC-Konvertierung im UI.
+
+import { describe, expect, test } from "bun:test";
+import { fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { z } from "zod";
+import { defaultPrimitives } from "../primitives";
+import type { LocatedTimestampValue } from "../primitives/located-timestamp-input";
+import { render } from "./test-utils";
+
+const atSchema = z.iso.datetime({ local: true });
+
+function ControlledLocated({
+  initial,
+  onEmit,
+}: {
+  readonly initial: LocatedTimestampValue | "";
+  readonly onEmit: (v: { at: string; tz: string } | undefined) => void;
+}) {
+  const { Input } = defaultPrimitives;
+  const [v, setV] = useState<LocatedTimestampValue | "">(initial);
+  return (
+    <Input
+      kind="locatedTimestamp"
+      id="lt"
+      name="lt"
+      value={v}
+      onChange={(nv) => {
+        onEmit(nv);
+        setV(nv ?? "");
+      }}
+    />
+  );
+}
+
+function inputs(container: Element): { date: HTMLInputElement; time: HTMLInputElement } {
+  const date = container.querySelector<HTMLInputElement>('input:not([type="time"])');
+  const time = container.querySelector<HTMLInputElement>('input[type="time"]');
+  if (!date || !time) throw new Error("expected date + time input");
+  return { date, time };
+}
+
+describe("Input kind=locatedTimestamp", () => {
+  test("Datum + Uhrzeit tippen → { at: Wall-Clock, tz }, passend zum local-Schema", () => {
+    let last: { at: string; tz: string } | undefined;
+    const view = render(
+      <ControlledLocated initial={{ at: "", tz: "Europe/Lisbon" }} onEmit={(v) => (last = v)} />,
+    );
+    const { date, time } = inputs(view.container);
+
+    fireEvent.change(date, { target: { value: "2026-04-03" } });
+    fireEvent.change(time, { target: { value: "10:00" } });
+
+    if (last === undefined) throw new Error("expected emitted value");
+    expect(last.tz).toBe("Europe/Lisbon");
+    expect(last.at).toBe("2026-04-03T10:00");
+    expect(atSchema.safeParse(last.at).success).toBe(true);
+    // Located ist reine Wall-Clock — kein Offset/Z.
+    expect(last.at).not.toContain("Z");
+    expect(last.at).not.toContain("+");
+  });
+
+  test("READ-Wert mit Sekunden wird angezeigt + offset-frei re-emittiert", () => {
+    let last: { at: string; tz: string } | undefined;
+    const view = render(
+      <ControlledLocated
+        initial={{ at: "2026-04-03T10:00:00", tz: "Europe/Lisbon", utc: "2026-04-03T09:00:00Z" }}
+        onEmit={(v) => (last = v)}
+      />,
+    );
+    const { time } = inputs(view.container);
+    expect(time.value).toBe("10:00");
+
+    fireEvent.change(time, { target: { value: "11:30" } });
+    if (last === undefined) throw new Error("expected emitted value");
+    expect(last.at).toBe("2026-04-03T11:30");
+    expect(last.tz).toBe("Europe/Lisbon");
+    expect(atSchema.safeParse(last.at).success).toBe(true);
+  });
+
+  test("leeres Datum + Uhrzeit ohne Zone → undefined (Feld leer)", () => {
+    let last: { at: string; tz: string } | undefined | "sentinel" = "sentinel";
+    render(<ControlledLocated initial="" onEmit={(v) => (last = v)} />);
+    // Kein Input → noch kein onChange. Sanity: Startwert blieb Sentinel.
+    expect(last).toBe("sentinel");
+  });
+
+  test("sichtbarer Zonen-Hinweis", () => {
+    const view = render(<ControlledLocated initial="" onEmit={() => {}} />);
+    expect(view.container.textContent ?? "").toMatch(/lokal|local/i);
+  });
+});

package/src/__tests__/render-edit.test.tsx

@@ -85,6 +85,47 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // End-to-end-Routing: ein `type:"locatedTimestamp"`-Entity-Feld muss durch
+  // computeEditViewModel → render-field → DefaultInput auf den Located-Picker
+  // laufen (Datum + Uhrzeit + Zone), NICHT auf den Klartext-Fallthrough. Vor
+  // Item 10 fehlte der `case "locatedTimestamp"` → das Feld rendrte als Text.
+  test("locatedTimestamp field renders the located picker (date + time + zone), not plain text", () => {
+    const entity = {
+      fields: { pickup: { type: "locatedTimestamp", required: true } },
+    } as unknown as EntityDefinition;
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-edit",
+      type: "entityEdit",
+      entity: "order",
+      layout: { sections: [{ title: "When", columns: 1, fields: ["pickup"] }] },
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit
+          screen={screenDef}
+          entity={entity}
+          featureName="orders"
+          initial={
+            {
+              pickup: {
+                at: "2026-04-03T10:00:00",
+                tz: "Europe/Lisbon",
+                utc: "2026-04-03T09:00:00Z",
+              },
+            } as never
+          }
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const fieldEl = screen.getByTestId("field-pickup");
+    const timeInput = fieldEl.querySelector<HTMLInputElement>('input[type="time"]');
+    expect(timeInput).toBeTruthy();
+    expect(timeInput?.value).toBe("10:00");
+    expect(fieldEl.textContent ?? "").toMatch(/lokal|local/i);
+  });
+
   test("typing in an input updates the form snapshot (controller + view-model round-trip)", () => {
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>

package/src/primitives/index.tsx

@@ -75,6 +75,7 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 import { FileUploadInput } from "./file-upload";
+import { LocatedTimestampInput } from "./located-timestamp-input";
 import { MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
@@ -390,6 +391,21 @@ function DefaultInput(props: InputProps): ReactNode {
           {...(props.hasError !== undefined && { hasError: props.hasError })}
         />
       );
+    case "locatedTimestamp":
+      return (
+        <LocatedTimestampInput
+          id={props.id}
+          name={props.name}
+          value={props.value}
+          onChange={props.onChange}
+          {...(props.locale !== undefined && { locale: props.locale })}
+          {...(props.min !== undefined && { min: props.min })}
+          {...(props.max !== undefined && { max: props.max })}
+          {...(props.disabled !== undefined && { disabled: props.disabled })}
+          {...(props.required !== undefined && { required: props.required })}
+          {...(props.hasError !== undefined && { hasError: props.hasError })}
+        />
+      );
     case "textarea":
       return (
         <Textarea

package/src/primitives/located-timestamp-input.tsx

@@ -0,0 +1,114 @@
+// LocatedTimestampInput (kind:"locatedTimestamp") — Wall-Clock-Eingabe + IANA-
+// Zonen-Auswahl für locatedTimestamp-Felder. Anders als TimestampInput findet
+// KEINE UTC-Konvertierung statt: ein located Timestamp IST Wall-Clock + Zone;
+// der Server rechnet `utc` aus `{ at, tz }`. Datum/Uhrzeit laufen über
+// TimestampInput im wallClock-Modus (reine String-Form, kein new Date()), die
+// Zone über eine durchsuchbare Combobox der IANA-Zonen.
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { ComboboxInput } from "./combobox";
+import { TimestampInput } from "./timestamp-input";
+
+// Kuratierte Notliste falls die Runtime Intl.supportedValuesOf nicht kennt
+// (vor ES2022). Reicht für die häufigsten Zonen; moderne Browser + Bun liefern
+// die volle Liste.
+const FALLBACK_ZONES: readonly string[] = [
+  "UTC",
+  "Europe/Berlin",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Madrid",
+  "America/New_York",
+  "America/Los_Angeles",
+  "America/Sao_Paulo",
+  "Asia/Tokyo",
+  "Asia/Singapore",
+  "Australia/Sydney",
+];
+
+const TZ_OPTIONS: readonly { readonly value: string; readonly label: string }[] = (
+  typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES
+).map((zone) => ({ value: zone, label: zone }));
+
+export type LocatedTimestampValue = {
+  readonly at: string;
+  readonly tz: string;
+  readonly utc?: string;
+};
+
+export type LocatedTimestampInputProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly value: LocatedTimestampValue | "";
+  readonly onChange: (v: { readonly at: string; readonly tz: string } | undefined) => void;
+  readonly locale?: string;
+  readonly min?: string;
+  readonly max?: string;
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+};
+
+export function LocatedTimestampInput({
+  id,
+  name,
+  value,
+  onChange,
+  locale,
+  min,
+  max,
+  disabled,
+  required,
+  hasError,
+}: LocatedTimestampInputProps): ReactNode {
+  const t = useTranslation();
+  const at = value === "" ? "" : value.at;
+  const tz = value === "" ? "" : value.tz;
+
+  // `at` ist Minuten-Wallclock (z.iso.datetime({local:true}) akzeptiert das);
+  // tz ein IANA-Name. Solange beides leer ist gilt das Feld als leer; sobald
+  // eines gesetzt ist, fließt das Paar — die Vollständigkeit erzwingt die
+  // Required-/Zod-Validierung beim Submit (so bleibt eine halbe Eingabe sichtbar).
+  function emit(nextAt: string, nextTz: string): void {
+    if (nextAt === "" && nextTz === "") {
+      onChange(undefined);
+      return;
+    }
+    onChange({ at: nextAt, tz: nextTz });
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex flex-wrap items-center gap-2">
+        <TimestampInput
+          id={id}
+          name={name}
+          value={at}
+          onChange={(v) => emit(v ?? "", tz)}
+          wallClock
+          {...(locale !== undefined && { locale })}
+          {...(min !== undefined && { min })}
+          {...(max !== undefined && { max })}
+          {...(disabled !== undefined && { disabled })}
+          {...(required !== undefined && { required })}
+          {...(hasError !== undefined && { hasError })}
+        />
+        <div className="min-w-[12rem]">
+          <ComboboxInput
+            id={`${id}-tz`}
+            name={`${name}-tz`}
+            options={TZ_OPTIONS}
+            value={tz}
+            onChange={(v) => emit(at, v)}
+            placeholder={t("kumiko.field.timezone")}
+            {...(disabled !== undefined && { disabled })}
+            {...(required !== undefined && { required })}
+            {...(hasError !== undefined && { hasError })}
+          />
+        </div>
+      </div>
+      <span className="text-xs text-muted-foreground">{t("kumiko.field.locatedTzHint")}</span>
+    </div>
+  );
+}