@cosmicdrift/kumiko-renderer-web 0.52.0 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.52.0",
+  "version": "0.55.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/__tests__/date-input.test.tsx

@@ -1,8 +1,9 @@
 //
-// DateInput pinnt: Trigger zeigt formatiertes Datum (locale-aware),
-// Popover öffnet das DayPicker, Auswahl gibt ISO-yyyy-mm-dd zurück.
-// Wert-Roundtrip (ISO → Date → ISO) muss tag-stable sein, sonst
-// zeigt der Calendar je nach Timezone den Vortag.
+// DateInput pinnt (seit #369): tippbares Text-Input zeigt das Datum
+// locale-numerisch und akzeptiert Eingabe, ein Icon-Button öffnet das
+// DayPicker, Auswahl gibt ISO-yyyy-mm-dd zurück. Wert-Roundtrip
+// (ISO → Date → ISO) muss tag-stable sein, sonst zeigt der Calendar je
+// nach Timezone den Vortag.
 
 import { describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "@testing-library/react";
@@ -10,23 +11,30 @@ import userEvent from "@testing-library/user-event";
 import { DateInput } from "../primitives/date-input";
 
 describe("DateInput", () => {
-  test("trigger zeigt formatiertes Datum (de-DE)", () => {
+  test("Eingabefeld zeigt locale-numerisches Datum (de-DE)", () => {
     render(
       <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="de-DE" />,
     );
-    expect(screen.getByRole("button").textContent).toContain("23. April 2026");
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("23.04.2026");
   });
 
-  test("trigger zeigt formatiertes Datum (en-US)", () => {
+  test("Eingabefeld zeigt locale-numerisches Datum (en-US)", () => {
     render(
       <DateInput id="d" name="d" value="2026-04-23" onChange={() => undefined} locale="en-US" />,
     );
-    expect(screen.getByRole("button").textContent).toContain("April 23, 2026");
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("04/23/2026");
   });
 
-  test('trigger zeigt "—" Placeholder bei leerem Wert', () => {
+  test("Eingabefeld ist leer bei leerem Wert", () => {
     render(<DateInput id="d" name="d" value="" onChange={() => undefined} locale="de-DE" />);
-    expect(screen.getByRole("button").textContent).toContain("—");
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("");
+  });
+
+  test("Datum tippen → onChange feuert ISO yyyy-mm-dd", () => {
+    const onChange = mock();
+    render(<DateInput id="d" name="d" value="" onChange={onChange} locale="de-DE" />);
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "23.04.2026" } });
+    expect(onChange).toHaveBeenCalledWith("2026-04-23");
   });
 
   test("kein nativer date-input im DOM (Radix-Popover-Pattern, nicht type=date)", () => {
@@ -87,4 +95,57 @@ describe("DateInput", () => {
     fireEvent.click(day25.querySelector("button") as HTMLButtonElement);
     expect(onChange).toHaveBeenCalledWith("2026-04-25");
   });
+
+  // Headline-Feature #369: captionLayout="dropdown" rendert Monats-/Jahres-
+  // Selects statt nur Monats-Vor/Zurück. min/max begrenzen über
+  // startMonth/endMonth den Jahres-Selector.
+  test("Kalender zeigt Jahres-Dropdown, begrenzt durch min/max", async () => {
+    const user = userEvent.setup();
+    render(
+      <DateInput
+        id="d"
+        name="d"
+        value="2023-06-15"
+        onChange={() => undefined}
+        locale="de-DE"
+        min="2020-01-01"
+        max="2026-12-31"
+      />,
+    );
+    await user.click(screen.getByRole("button"));
+    // rdp v9 rendert die Dropdowns als <select> (role=combobox). Mind. der
+    // Jahres-Selector muss da sein — sonst greift captionLayout nicht.
+    const combos = screen.getAllByRole("combobox");
+    expect(combos.length).toBeGreaterThanOrEqual(1);
+    const yearSelect = combos.find((c) =>
+      Array.from(c.querySelectorAll("option")).some((o) => o.textContent === "2023"),
+    ) as HTMLSelectElement | undefined;
+    if (!yearSelect) throw new Error("expected a year dropdown");
+    const years = Array.from(yearSelect.querySelectorAll("option")).map((o) => o.textContent);
+    expect(years).toContain("2020");
+    expect(years).toContain("2026");
+    expect(years).not.toContain("2019");
+    expect(years).not.toContain("2027");
+  });
+
+  test("min/max grauen Out-of-Range-Tage aus", async () => {
+    const user = userEvent.setup();
+    const onChange = mock();
+    // Range endet am 10. April 2026 — der 25. liegt außerhalb.
+    render(
+      <DateInput
+        id="d"
+        name="d"
+        value="2026-04-05"
+        onChange={onChange}
+        locale="en-US"
+        max="2026-04-10"
+      />,
+    );
+    await user.click(screen.getByRole("button"));
+    const day25Button = screen
+      .getByRole("gridcell", { name: /^25$/ })
+      .querySelector("button") as HTMLButtonElement;
+    expect(day25Button.disabled).toBe(true);
+  });
 });

package/src/__tests__/primitives.test.tsx

@@ -148,17 +148,16 @@ describe("Input kind mapping", () => {
     expect(onChange).toHaveBeenCalledWith(true);
   });
 
-  test('kind="date": Trigger zeigt formatiertes Datum, kein nativer date-Input', () => {
-    // Default-DateInput nutzt Radix-Popover + DayPicker statt native
-    // <input type="date">. Trigger ist ein Button mit dem formatierten
-    // Datum als sichtbarem Text.
+  test('kind="date": tippbares Text-Input mit locale-Datum, kein nativer date-Input', () => {
+    // Default-DateInput nutzt seit #369 ein tippbares Text-Input +
+    // DayPicker-Popover statt native <input type="date">. Das Datum steht
+    // locale-numerisch im Eingabefeld.
     const onChange = mock();
     render(
       <Input id="i" name="i" kind="date" value="2026-04-23" onChange={onChange} locale="de-DE" />,
     );
     expect(document.querySelector('input[type="date"]')).toBeNull();
-    const trigger = screen.getByRole("button");
-    expect(trigger.textContent).toContain("23. April 2026");
+    expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("23.04.2026");
   });
 
   test("hasError=true sets aria-invalid", () => {

package/src/__tests__/timestamp-input.test.tsx

@@ -4,8 +4,10 @@
 // Zeit ("2026-06-08T21:09") → jeder Save endete in 422 invalid_format.
 // Die Assertions laufen gegen die ECHTEN Zod-Schemas aus
 // schema-builder.ts (z.iso.datetime / z.iso.datetime({local:true})).
+
 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 { inputValueToTimestamp, timestampToInputValue } from "../primitives/timestamp-input";
@@ -48,48 +50,59 @@ describe("timestamp Konvertierung (Helpers)", () => {
 });
 
 describe("Input kind=timestamp (Primitive)", () => {
-  test("rendert UTC-Wert als valides datetime-local und emittiert Z-Instant", () => {
+  // Seit #369: getrennte Datums- (tippbar, ISO direkt akzeptiert) und
+  // Uhrzeit-Eingabe statt nativem datetime-local. inputs[0] = Datum,
+  // inputs[1] = type=time. Die Wire-Konvertierung (UTC↔Wall-Clock) ist
+  // unverändert und oben über die Helpers gepinnt. Kontrollierter Wrapper,
+  // damit `value` wie in einer echten Form zurückfließt.
+  function ControlledTimestamp({
+    wallClock,
+    onEmit,
+  }: {
+    readonly wallClock?: boolean;
+    readonly onEmit: (v: string | undefined) => void;
+  }) {
     const { Input } = defaultPrimitives;
-    const emitted: (string | undefined)[] = [];
-    const view = render(
+    const [v, setV] = useState("");
+    return (
       <Input
         kind="timestamp"
         id="ts"
         name="ts"
-        value="2026-06-08T19:09:00Z"
-        onChange={(v) => emitted.push(v)}
-      />,
+        value={v}
+        {...(wallClock === true && { wallClock: true })}
+        onChange={(nv) => {
+          onEmit(nv);
+          setV(nv ?? "");
+        }}
+      />
     );
-    const input = view.container.querySelector("input");
-    if (!input) throw new Error("expected input");
-    // datetime-local akzeptiert keine Z-Suffixe — der angezeigte Wert
-    // muss konvertiert sein, sonst zeigt der Browser ein leeres Feld.
-    expect(input.value).toMatch(DATETIME_LOCAL);
+  }
+
+  test("Datum + Uhrzeit tippen → valider Z-Instant (UTC-Variante)", () => {
+    let last: string | undefined;
+    const view = render(<ControlledTimestamp onEmit={(v) => (last = v)} />);
+    const [dateInput, timeInput] = view.container.querySelectorAll("input");
+    if (!dateInput || !timeInput) throw new Error("expected date + time input");
+
+    fireEvent.change(dateInput, { target: { value: "2026-06-08" } });
+    fireEvent.change(timeInput, { target: { value: "21:09" } });
 
-    fireEvent.change(input, { target: { value: "2026-06-08T21:09" } });
-    expect(emitted).toHaveLength(1);
-    const value = emitted[0];
-    if (value === undefined) throw new Error("expected emitted value");
-    expect(utcSchema.safeParse(value).success).toBe(true);
+    if (last === undefined) throw new Error("expected emitted value");
+    expect(last.endsWith("Z")).toBe(true);
+    expect(utcSchema.safeParse(last).success).toBe(true);
   });
 
   test("wallClock-Variante emittiert offset-lose Wall-Clock", () => {
-    const { Input } = defaultPrimitives;
-    const emitted: (string | undefined)[] = [];
-    const view = render(
-      <Input
-        kind="timestamp"
-        id="ts"
-        name="ts"
-        value=""
-        wallClock
-        onChange={(v) => emitted.push(v)}
-      />,
-    );
-    const input = view.container.querySelector("input");
-    if (!input) throw new Error("expected input");
-    fireEvent.change(input, { target: { value: "2026-06-08T10:00" } });
-    expect(emitted).toEqual(["2026-06-08T10:00"]);
-    expect(wallClockSchema.safeParse(emitted[0]).success).toBe(true);
+    let last: string | undefined;
+    const view = render(<ControlledTimestamp wallClock onEmit={(v) => (last = v)} />);
+    const [dateInput, timeInput] = view.container.querySelectorAll("input");
+    if (!dateInput || !timeInput) throw new Error("expected date + time input");
+
+    fireEvent.change(dateInput, { target: { value: "2026-06-08" } });
+    fireEvent.change(timeInput, { target: { value: "10:00" } });
+
+    expect(last).toBe("2026-06-08T10:00");
+    expect(wallClockSchema.safeParse(last).success).toBe(true);
   });
 });

package/src/layout/__tests__/settings-hub-visibility.test.ts

@@ -19,11 +19,19 @@ import { qualifyScreenId } from "@cosmicdrift/kumiko-renderer";
 import { buildNavRegistrySliceForApp } from "../nav-tree";
 
 const billing = defineFeature("billing", (r) => {
+  r.config({
+    // tenant-home with the admin write-set (∋ SystemAdmin): cascades up to a
+    // SystemAdmin-only Plattform default screen AND a tenant override screen.
+    keys: { stripeKey: createTenantConfig("text", { mask: { title: "billing.stripe-key" } }) },
+  });
+});
+// A masked SYSTEM key keeping the default ["system"] (internal-actor) write: no
+// human can set it, so it must NOT generate a hub nav at all — build-time
+// exclusion, not just resolve-time hiding (else it renders as an unsaveable field).
+const internal = defineFeature("internal", (r) => {
   r.config({
     keys: {
-      stripeKey: createTenantConfig("text", { mask: { title: "billing.stripe-key" } }),
-      // system-scope default write = ["system"] (internal actor) → human-hidden
-      platformFee: createSystemConfig("number", { mask: { title: "billing.platform-fee" } }),
+      rebuildToken: createSystemConfig("text", { mask: { title: "internal.rebuild-token" } }),
     },
   });
 });
@@ -52,7 +60,7 @@ const shell = defineFeature("shell", (r) => {
   r.workspace({ id: "main", label: "Main", nav: ["shell:nav:home"] });
 });
 
-const app = buildAppSchema(createRegistry([shell, billing, notify, ops]));
+const app = buildAppSchema(createRegistry([shell, billing, internal, notify, ops]));
 
 function navMembersOf(workspaceId: string): ReadonlySet<string> {
   const ws = app.workspaces?.find((w) => w.definition.id === workspaceId);
@@ -97,7 +105,7 @@ function screenRefsIn(tree: ReturnType<typeof resolveNavigation>): string[] {
 }
 
 describe("Settings-Hub visibility — full boot pipeline", () => {
-  test("privileged user sees the human-relevant hub; system-internal keys stay hidden", () => {
+  test("privileged user sees the hub incl. cascaded Plattform defaults; machine-only keys never generate a nav", () => {
     const slice = buildNavRegistrySliceForApp(app, navMembersOf("settings"));
     const tree = resolveNavigation({
       source: slice,
@@ -107,16 +115,16 @@ describe("Settings-Hub visibility — full boot pipeline", () => {
 
     expect(names).toContain("config:nav:audience-tenant");
     expect(names).toContain("config:nav:audience-user");
-    // system audience surfaces ONLY because `ops` opted a human (SystemAdmin)
-    // into write; its child ops-system shows, billing's system-internal key
-    // (write ["system"]) stays hidden from the same admin.
+    // system audience surfaces for `ops` (human-opted system key) AND for
+    // billing's tenant key cascading up to a SystemAdmin-only Plattform default.
     expect(names).toContain("config:nav:audience-system");
     expect(names).toContain("config:nav:ops-system");
-    expect(names).not.toContain("config:nav:billing-system");
+    expect(names).toContain("config:nav:billing-system");
 
-    // schema-level completeness: the hidden key IS generated (a system actor
-    // could resolve it) — it's gated at resolve-time, not omitted at build-time.
-    expect(navMembersOf("settings").has("config:nav:billing-system")).toBe(true);
+    // the internal machine-only key (write ["system"]) generates NO nav at all —
+    // build-time exclusion, so it can never render as an unsaveable field.
+    expect(navMembersOf("settings").has("config:nav:internal-system")).toBe(false);
+    expect(names).not.toContain("config:nav:internal-system");
 
     // hierarchy: the billing-tenant screen hangs under the tenant audience
     const tenantAudience = tree.find((n) => n.qualifiedName === "config:nav:audience-tenant");

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

@@ -0,0 +1,92 @@
+// 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.
+
+import { describe, expect, test } from "bun:test";
+import { formatDateForInput, parseIso, parseTypedDate, toIso } from "../date-parse";
+
+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();
+  });
+
+  test("ungültiger Kalendertag (Überlauf) → undefined", () => {
+    expect(parseIso("2026-02-31")).toBeUndefined();
+    expect(parseIso("2026-13-01")).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");
+  });
+});
+
+describe("parseTypedDate", () => {
+  test("ISO direkt getippt → Date", () => {
+    expect(toIso(parseTypedDate("2026-04-25", "de-DE") as Date)).toBe("2026-04-25");
+  });
+
+  test("de-DE Reihenfolge 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", () => {
+    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)", () => {
+    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", () => {
+    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", () => {
+    expect(parseTypedDate("", "de-DE")).toBeUndefined();
+    expect(parseTypedDate("25.04", "de-DE")).toBeUndefined();
+    expect(parseTypedDate("foo", "de-DE")).toBeUndefined();
+    expect(parseTypedDate("32.04.2026", "de-DE")).toBeUndefined();
+  });
+});
+
+describe("formatDateForInput", () => {
+  test("numerisch, locale-spezifisch, wieder parsebar", () => {
+    const formatted = formatDateForInput(new Date(2026, 3, 25), "de-DE");
+    const roundtrip = parseTypedDate(formatted, "de-DE");
+    expect(roundtrip).toBeDefined();
+    if (roundtrip !== undefined) expect(toIso(roundtrip)).toBe("2026-04-25");
+  });
+});

package/src/primitives/calendar-popover.tsx

@@ -0,0 +1,128 @@
+// CalendarPopover — gemeinsamer Kalender-Trigger für DateInput und
+// TimestampInput. Ein Icon-Button öffnet ein Radix-Popover mit
+// react-day-picker (v9). captionLayout="dropdown" + startMonth/endMonth
+// geben Monats- UND Jahres-Dropdown statt nur Monats-Vor/Zurück — der
+// Grund für #369 (10 Jahre zurück war ~120 Klicks). min/max grauen
+// Tage außerhalb des erlaubten Bereichs aus.
+//
+// Der Text-Input (Tippen) lebt bewusst NICHT hier, sondern im jeweiligen
+// Primitive — date hat ein Feld, timestamp zwei (Datum + Uhrzeit). So
+// teilen beide dieselbe Kalender-Mechanik ohne ihre Eingabe-Form zu teilen.
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Calendar as CalendarIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn";
+
+export type CalendarPopoverProps = {
+  readonly selected: Date | undefined;
+  readonly onSelect: (d: Date | undefined) => void;
+  readonly min?: Date;
+  readonly max?: Date;
+  readonly disabled?: boolean;
+  readonly hasError?: boolean;
+  /** a11y-Label für den Icon-Button (kein sichtbarer Text). */
+  readonly triggerLabel: string;
+};
+
+const triggerClass =
+  "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-input " +
+  "bg-transparent text-muted-foreground shadow-sm transition-colors hover:bg-accent " +
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+const popoverClass =
+  "z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md " +
+  "data-[state=open]:animate-in data-[state=closed]:animate-out " +
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+
+// Default-Range wenn das Feld kein min/max setzt — sonst wäre das
+// Jahres-Dropdown leer/unbrauchbar. Zur Render-Zeit berechnet.
+function defaultRange(): { start: Date; end: Date } {
+  const thisYear = new Date().getFullYear();
+  return { start: new Date(1900, 0, 1), end: new Date(thisYear + 10, 11, 31) };
+}
+
+export function CalendarPopover({
+  selected,
+  onSelect,
+  min,
+  max,
+  disabled,
+  hasError,
+  triggerLabel,
+}: CalendarPopoverProps): ReactNode {
+  const range = defaultRange();
+  const startMonth = min ?? range.start;
+  const endMonth = max ?? range.end;
+  const disabledMatchers = [
+    ...(min !== undefined ? [{ before: min }] : []),
+    ...(max !== undefined ? [{ after: max }] : []),
+  ];
+
+  return (
+    <PopoverPrimitive.Root>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={triggerLabel}
+          aria-invalid={hasError === true ? true : undefined}
+          className={cn(triggerClass, hasError === true && "border-destructive")}
+        >
+          <CalendarIcon className="size-4" aria-hidden="true" />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content className={popoverClass} align="end" sideOffset={4}>
+          <DayPicker
+            mode="single"
+            captionLayout="dropdown"
+            startMonth={startMonth}
+            endMonth={endMonth}
+            selected={selected}
+            // Ohne defaultMonth zeigt DayPicker today statt selected —
+            // unintuitiv wenn der User schon ein Datum gewählt hat.
+            defaultMonth={selected}
+            {...(disabledMatchers.length > 0 && { disabled: disabledMatchers })}
+            onSelect={(d) => onSelect(d)}
+            classNames={dayPickerClasses}
+          />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+// classNames-Map für react-day-picker v9 — überschreibt die default-
+// Klassen mit Tailwind/shadcn-Tokens. dropdowns/dropdown decken den
+// captionLayout="dropdown"-Modus ab (Monat-/Jahr-Selects).
+const dayPickerClasses = {
+  root: "rdp-root",
+  months: "flex flex-col gap-2",
+  month: "flex flex-col gap-2",
+  month_caption: "flex justify-center items-center h-7 text-sm font-medium",
+  caption_label: "text-sm font-medium",
+  dropdowns: "flex items-center gap-1 text-sm font-medium",
+  dropdown_root: "relative inline-flex items-center",
+  dropdown:
+    "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm " +
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  nav: "flex items-center gap-1 absolute right-1 top-2",
+  button_previous: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+  button_next: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+  weekdays: "flex",
+  weekday: "w-8 text-xs font-normal text-muted-foreground",
+  week: "flex mt-1",
+  day: "w-8 h-8 p-0 text-sm",
+  day_button:
+    "inline-flex h-8 w-8 items-center justify-center rounded-sm hover:bg-accent " +
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  selected:
+    "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary/90",
+  today: "[&_button]:underline",
+  outside: "text-muted-foreground/50",
+  disabled: "text-muted-foreground/30 pointer-events-none",
+};

package/src/primitives/date-field.tsx

@@ -0,0 +1,108 @@
+// 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`.
+//
+// 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).
+
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn";
+import { CalendarPopover } from "./calendar-popover";
+import { formatDateForInput, guessLocale, parseIso, parseTypedDate, toIso } from "./date-parse";
+
+export type DateFieldProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string | undefined) => void;
+  readonly disabled?: boolean;
+  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. */
+  readonly min?: string;
+  readonly max?: string;
+};
+
+const inputClass =
+  "flex h-9 w-full items-center rounded-md border border-input bg-transparent " +
+  "px-3 py-1 text-sm shadow-sm transition-colors " +
+  "placeholder:text-muted-foreground " +
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+export function DateField({
+  id,
+  name,
+  value,
+  onChange,
+  disabled,
+  required,
+  hasError,
+  locale,
+  min,
+  max,
+}: DateFieldProps): ReactNode {
+  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.
+  const [draft, setDraft] = useState<string | null>(null);
+  const display =
+    draft ?? (selected !== undefined ? formatDateForInput(selected, resolvedLocale) : "");
+
+  function commitTyped(raw: string): void {
+    if (raw.trim() === "") {
+      onChange(undefined);
+      return;
+    }
+    const parsed = parseTypedDate(raw, resolvedLocale);
+    if (parsed !== undefined) onChange(toIso(parsed));
+  }
+
+  const minDate = min !== undefined ? parseIso(min) : undefined;
+  const maxDate = max !== undefined ? parseIso(max) : undefined;
+
+  return (
+    <div className="flex items-center gap-1">
+      <input
+        type="text"
+        inputMode="numeric"
+        id={id}
+        name={name}
+        value={display}
+        disabled={disabled}
+        required={required}
+        aria-invalid={hasError === true ? true : undefined}
+        placeholder={formatDateForInput(new Date(2026, 11, 31), resolvedLocale)}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          commitTyped(e.target.value);
+        }}
+        onBlur={() => setDraft(null)}
+        className={cn(
+          inputClass,
+          hasError === true && "border-destructive focus-visible:ring-destructive",
+        )}
+      />
+      <CalendarPopover
+        selected={selected}
+        onSelect={(d) => {
+          onChange(d !== undefined ? toIso(d) : undefined);
+          setDraft(null);
+        }}
+        {...(minDate !== undefined && { min: minDate })}
+        {...(maxDate !== undefined && { max: maxDate })}
+        {...(disabled !== undefined && { disabled })}
+        {...(hasError !== undefined && { hasError })}
+        triggerLabel="Kalender öffnen"
+      />
+    </div>
+  );
+}

package/src/primitives/date-input.tsx

@@ -1,165 +1,6 @@
-// DateInput — Radix-Popover + react-day-picker. Trigger ist ein
-// Button im Input-Style der das formatierte Datum zeigt; Popover
-// öffnet eine Calendar-Sheet zur Auswahl. Underlying-Wert bleibt
-// ISO `yyyy-mm-dd` damit Server-/Wire-Serialisierung unverändert
-// funktioniert.
-//
-// Warum nicht type=date: Native date-Inputs sehen je nach Browser/OS
-// völlig anders aus, der Picker-Overlay ist nicht stylebar, und der
-// Format-Match ist Locale-spezifisch außerhalb unserer Kontrolle.
-// Mit Popover + Calendar haben wir konsistentes Linear-Look-and-Feel.
+// DateInput (kind:"date") — die tippbare Datums-Eingabe lebt in DateField,
+// damit `date` und `timestamp` dieselbe Tipp-/Kalender-UX teilen (#369).
+// Diese Datei hält nur das öffentliche Mapping; die Logik ist in
+// date-field.tsx, die Date-Parse-Utils in date-parse.ts.
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { type ReactNode, useState } from "react";
-import { DayPicker } from "react-day-picker";
-import { cn } from "../lib/cn";
-
-export type DateInputProps = {
-  readonly id: string;
-  readonly name: string;
-  readonly value: string;
-  readonly onChange: (v: string | undefined) => void;
-  readonly disabled?: boolean;
-  readonly required?: boolean;
-  readonly hasError?: boolean;
-  readonly locale?: string;
-};
-
-const triggerClass =
-  "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent " +
-  "px-3 py-1 text-sm shadow-sm transition-colors text-left " +
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
-  "disabled:cursor-not-allowed disabled:opacity-50";
-
-const popoverClass =
-  "z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md " +
-  "data-[state=open]:animate-in data-[state=closed]:animate-out " +
-  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
-  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
-
-export function DateInput({
-  id,
-  name,
-  value,
-  onChange,
-  disabled,
-  required,
-  hasError,
-  locale,
-}: DateInputProps): ReactNode {
-  const [open, setOpen] = useState(false);
-  const resolvedLocale = locale ?? guessLocale();
-  const selected = parseIso(value);
-
-  const display =
-    selected !== undefined
-      ? selected.toLocaleDateString(resolvedLocale, {
-          year: "numeric",
-          month: "long",
-          day: "numeric",
-        })
-      : "";
-
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          id={id}
-          name={name}
-          disabled={disabled}
-          // aria-required wird auf <button> nicht unterstützt — stattdessen
-          // markiert <Field>-Label das Required mit "*" für Sehende und
-          // gibt den Status über aria-invalid (bei Fehler) durch.
-          data-required={required === true ? "true" : undefined}
-          aria-invalid={hasError === true ? true : undefined}
-          className={cn(
-            triggerClass,
-            hasError === true && "border-destructive focus-visible:ring-destructive",
-          )}
-        >
-          <span className={cn(display === "" && "text-muted-foreground")}>
-            {display === "" ? "—" : display}
-          </span>
-          <CalendarIcon className="size-4 text-muted-foreground" aria-hidden="true" />
-        </button>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content className={popoverClass} align="start" sideOffset={4}>
-          <DayPicker
-            mode="single"
-            selected={selected}
-            // Ohne defaultMonth zeigt DayPicker today statt selected —
-            // unintuitiv wenn der User schon ein Datum gewählt hat und
-            // den Calendar nochmal öffnet.
-            defaultMonth={selected}
-            onSelect={(d) => {
-              onChange(d !== undefined ? toIso(d) : undefined);
-              setOpen(false);
-            }}
-            classNames={dayPickerClasses}
-          />
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-}
-
-// classNames-Map für react-day-picker v9 — überschreibt die default-
-// Klassen mit Tailwind/shadcn-Tokens. Nur die wichtigsten Slots; der
-// Rest erbt die rdp-Default-Styles. Padding/Größen sind klein gehalten
-// damit der Popover nicht das halbe Viewport einnimmt.
-const dayPickerClasses = {
-  root: "rdp-root",
-  months: "flex flex-col gap-2",
-  month: "flex flex-col gap-2",
-  month_caption: "flex justify-center items-center h-7 text-sm font-medium",
-  caption_label: "text-sm font-medium",
-  nav: "flex items-center gap-1 absolute right-3 top-3",
-  button_previous: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
-  button_next: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
-  weekdays: "flex",
-  weekday: "w-8 text-xs font-normal text-muted-foreground",
-  week: "flex mt-1",
-  day: "w-8 h-8 p-0 text-sm",
-  day_button:
-    "inline-flex h-8 w-8 items-center justify-center rounded-sm hover:bg-accent " +
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  selected:
-    "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary/90",
-  today: "[&_button]:underline",
-  outside: "text-muted-foreground/50",
-  disabled: "text-muted-foreground/30 pointer-events-none",
-};
-
-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.
-  const parts = v.split("-");
-  if (parts.length !== 3) return undefined;
-  const [y, m, d] = parts.map(Number);
-  if (
-    y === undefined ||
-    m === undefined ||
-    d === undefined ||
-    Number.isNaN(y) ||
-    Number.isNaN(m) ||
-    Number.isNaN(d)
-  )
-    return undefined;
-  return new Date(y, m - 1, d);
-}
-
-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");
-  return `${y}-${m}-${day}`;
-}
-
-function guessLocale(): string {
-  if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
-  return "en-US";
-}
+export { DateField as DateInput, type DateFieldProps as DateInputProps } from "./date-field";

package/src/primitives/date-parse.ts

@@ -0,0 +1,104 @@
+// 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.
+
+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) {
+    return undefined;
+  }
+  return date;
+}
+
+export function parseIso(v: string): Date | undefined {
+  if (v === "") return undefined;
+  const parts = v.split("-");
+  if (parts.length !== 3) return undefined;
+  const [y, m, d] = parts.map(Number);
+  if (
+    y === undefined ||
+    m === undefined ||
+    d === undefined ||
+    Number.isNaN(y) ||
+    Number.isNaN(m) ||
+    Number.isNaN(d)
+  ) {
+    return undefined;
+  }
+  return makeLocalDate(y, m, d);
+}
+
+export function toIso(d: Date): string {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+// 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" });
+}
+
+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].
+function localeDateOrder(locale: string): readonly DateSlot[] {
+  const ref = new Date(2026, 0, 2); // Tag 2, Monat 1 — alle Felder eindeutig
+  const order: DateSlot[] = [];
+  for (const part of new Intl.DateTimeFormat(locale).formatToParts(ref)) {
+    if (part.type === "year") order.push("y");
+    else if (part.type === "month") order.push("m");
+    else if (part.type === "day") order.push("d");
+  }
+  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 {
+  const trimmed = input.trim();
+  if (trimmed === "") return undefined;
+
+  const iso = parseIso(trimmed);
+  if (iso !== undefined) return iso;
+
+  const tokens = trimmed.split(/\D+/).filter((t) => t !== "");
+  if (tokens.length !== 3) return undefined;
+  const nums = tokens.map(Number);
+  if (nums.some(Number.isNaN)) return undefined;
+
+  const order = localeDateOrder(locale);
+  if (order.length !== 3) return undefined;
+
+  let y = 0;
+  let m = 0;
+  let d = 0;
+  order.forEach((slot, i) => {
+    const val = nums[i] ?? 0;
+    if (slot === "y") y = val;
+    else if (slot === "m") m = val;
+    else d = val;
+  });
+  if (y < 100) y += 2000;
+
+  return makeLocalDate(y, m, d);
+}

package/src/primitives/index.tsx

@@ -270,6 +270,8 @@ function DefaultInput(props: InputProps): ReactNode {
           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 })}
@@ -348,10 +350,12 @@ function DefaultInput(props: InputProps): ReactNode {
           value={props.value}
           onChange={props.onChange}
           {...(props.wallClock !== undefined && { wallClock: props.wallClock })}
+          {...(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 })}
-          className={cn(inputClassBase, errorClass)}
         />
       );
     case "textarea":

package/src/primitives/timestamp-input.tsx

@@ -1,14 +1,18 @@
-// TimestampInput — natives <input type="datetime-local"> mit
-// Wert-Konvertierung. Der Server validiert timestamp-Felder als
-// ISO-UTC mit `Z` (z.iso.datetime()) bzw. als Wall-Clock ohne Offset
-// bei locatedTimestamps (z.iso.datetime({ local: true })). Das native
-// datetime-local-Input spricht aber IMMER lokale Wall-Clock ohne
-// Offset — ohne Konvertierung ging jeder UTC-Timestamp als
-// offset-loser String raus und der Server lehnte mit invalid_format
-// ab (Bug-Bash-2, 2026-06-08).
+// TimestampInput (kind:"timestamp") — gemeinsame Datums-Eingabe (DateField,
+// Tippen + Jahres-Kalender) plus ein Uhrzeit-Input. Bis #369 war dies ein
+// natives <input type="datetime-local"> — tippbar, aber mit nicht-stylebarem
+// Browser-Picker ohne Jahres-Navigation und divergent zu DateInput.
+//
+// Die Wire-Konvertierung bleibt unverändert: der Server validiert timestamp
+// als ISO-UTC mit `Z` (z.iso.datetime()) bzw. als Wall-Clock ohne Offset bei
+// locatedTimestamps (z.iso.datetime({ local: true })). Intern rechnen wir
+// über die datetime-local-Form `yyyy-MM-ddTHH:mm`; timestampToInputValue /
+// inputValueToTimestamp kapseln die UTC↔Wall-Clock-Umrechnung (Bug-Bash-2,
+// 2026-06-08) und sind separat getestet.
 
-import type { ChangeEvent, ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn";
+import { DateField } from "./date-field";
 
 const LOCAL_MINUTES = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 const HAS_OFFSET = /(?:Z|[+-]\d{2}:\d{2})$/;
@@ -53,9 +57,25 @@ export type TimestampInputProps = {
   readonly disabled?: boolean;
   readonly required?: boolean;
   readonly hasError?: boolean;
-  readonly className?: string;
+  readonly locale?: string;
+  /** Untere/obere Grenze als ISO-Datetime. Begrenzt den Kalender auf
+   *  Tages-Granularität; die exakte Uhrzeit-Grenze setzt die Zod-Validierung
+   *  durch. */
+  readonly min?: string;
+  readonly max?: string;
 };
 
+const timeInputClass =
+  "h-9 w-[7.5rem] shrink-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm " +
+  "shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 " +
+  "focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+
+function toDatePart(iso: string | undefined): string | undefined {
+  if (iso === undefined || iso === "") return undefined;
+  const v = timestampToInputValue(iso).slice(0, 10);
+  return v !== "" ? v : undefined;
+}
+
 export function TimestampInput({
   id,
   name,
@@ -65,24 +85,59 @@ export function TimestampInput({
   disabled,
   required,
   hasError,
-  className,
+  locale,
+  min,
+  max,
 }: TimestampInputProps): ReactNode {
+  const local = timestampToInputValue(value);
+  const isoDate = local !== "" ? local.slice(0, 10) : "";
+  // Uhrzeit ohne gesetztes Datum würde im Wire-Wert verschwinden — lokal
+  // halten, bis ein Datum gewählt ist. Sobald `value` ein Datum trägt, ist
+  // dessen Uhrzeit maßgeblich.
+  const [timeText, setTimeText] = useState("");
+  const effectiveTime = local !== "" ? local.slice(11, 16) : timeText;
+
+  function emit(nextIsoDate: string, nextTime: string): void {
+    if (nextIsoDate === "") {
+      onChange(undefined);
+      return;
+    }
+    const localStr = `${nextIsoDate}T${nextTime === "" ? "00:00" : nextTime}`;
+    onChange(inputValueToTimestamp(localStr, wallClock === true));
+  }
+
+  const minPart = toDatePart(min);
+  const maxPart = toDatePart(max);
+
   return (
-    <input
-      type="datetime-local"
-      id={id}
-      name={name}
-      disabled={disabled}
-      required={required}
-      aria-invalid={hasError === true ? true : undefined}
-      value={timestampToInputValue(value)}
-      onChange={(e: ChangeEvent<HTMLInputElement>) =>
-        onChange(inputValueToTimestamp(e.target.value, wallClock === true))
-      }
-      // Das `flex` der Input-Basisklasse macht die Shadow-DOM-Teile des
-      // datetime-local zu Flex-Items — der Picker-Indicator klebt dann
-      // direkt am Text statt am rechten Rand. ml-auto schiebt ihn zurück.
-      className={cn("[&::-webkit-calendar-picker-indicator]:ml-auto", className)}
-    />
+    <div className="flex items-center gap-2">
+      <DateField
+        id={id}
+        name={name}
+        value={isoDate}
+        onChange={(d) => emit(d ?? "", effectiveTime)}
+        {...(locale !== undefined && { locale })}
+        {...(minPart !== undefined && { min: minPart })}
+        {...(maxPart !== undefined && { max: maxPart })}
+        {...(disabled !== undefined && { disabled })}
+        {...(required !== undefined && { required })}
+        {...(hasError !== undefined && { hasError })}
+      />
+      <input
+        type="time"
+        aria-label="Uhrzeit"
+        disabled={disabled}
+        aria-invalid={hasError === true ? true : undefined}
+        value={effectiveTime}
+        onChange={(e) => {
+          setTimeText(e.target.value);
+          if (isoDate !== "") emit(isoDate, e.target.value);
+        }}
+        className={cn(
+          timeInputClass,
+          hasError === true && "border-destructive focus-visible:ring-destructive",
+        )}
+      />
+    </div>
   );
 }

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

@@ -1,42 +0,0 @@
-// 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");
-  });
-});