@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.0

package/dist/web/lib/resize-image.js

@@ -0,0 +1,66 @@
+const DEFAULT_MAX_EDGE = 2560;
+// Raster formats a canvas can losslessly re-encode as themselves; anything
+// else (heic, bmp, tiff, ...) falls back to jpeg. svg/gif are excluded
+// upstream (vector/animation would be destroyed by a canvas re-encode).
+const PRESERVED_TYPES = new Set(["image/png", "image/webp"]);
+const OUTPUT_EXTENSIONS = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+};
+function pickOutputType(inputType) {
+    return PRESERVED_TYPES.has(inputType) ? inputType : "image/jpeg";
+}
+// The server validates the upload's extension against its mimeType
+// (mime_mismatch), so a re-encode that changes type must rename the file too.
+function withMatchingExtension(fileName, outputType) {
+    const ext = OUTPUT_EXTENSIONS[outputType] ?? "jpg";
+    const dot = fileName.lastIndexOf(".");
+    const base = dot > 0 ? fileName.slice(0, dot) : fileName;
+    return `${base}.${ext}`;
+}
+// Downscales images before upload to a reasonable edge length (bandwidth)
+// and drops EXIF/GPS as a side effect (canvas re-encode carries no
+// metadata). Missing OffscreenCanvas/createImageBitmap (older browser), or a
+// decode failure, leaves the file unchanged — no hard error before upload.
+export async function resizeImageBeforeUpload(file, maxEdge = DEFAULT_MAX_EDGE) {
+    if (!file.type.startsWith("image/"))
+        return file;
+    if (file.type === "image/svg+xml" || file.type === "image/gif")
+        return file;
+    if (typeof OffscreenCanvas === "undefined" || typeof createImageBitmap !== "function") {
+        return file;
+    }
+    try {
+        const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+        const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
+        const width = Math.round(bitmap.width * scale);
+        const height = Math.round(bitmap.height * scale);
+        const canvas = new OffscreenCanvas(width, height);
+        try {
+            const ctx = canvas.getContext("2d");
+            if (ctx === null)
+                return file;
+            ctx.drawImage(bitmap, 0, 0, width, height);
+        }
+        finally {
+            bitmap.close();
+        }
+        const blob = await canvas.convertToBlob({ type: pickOutputType(file.type), quality: 0.85 });
+        // Name off the blob's actual type, not the requested one — a browser
+        // without webp encoding support silently falls back to png, and naming
+        // by the request would then store a lie (extension/mimeType both "webp"
+        // over png bytes).
+        const actualType = blob.type || file.type;
+        const fileName = actualType === file.type ? file.name : withMatchingExtension(file.name, actualType);
+        const resized = new File([blob], fileName, { type: actualType });
+        // Only takes the re-encode if it actually shrank the file — a
+        // palette-optimized PNG or a small in-spec photo can come back larger
+        // after a full RGBA canvas round-trip. EXIF/GPS stripping is then
+        // best-effort: an original that's kept as-is keeps its metadata too.
+        return resized.size < file.size ? resized : file;
+    }
+    catch {
+        return file;
+    }
+}

package/dist/web/lib/upload-file-ref.d.ts

@@ -0,0 +1,9 @@
+import { type FileUploadFormDataInput } from "./file-upload-form-data.ts";
+export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName">;
+/** Carries the server's own `error` message when the upload endpoint sent one. */
+export declare class FileUploadFailedError extends Error {
+    readonly fromServer: boolean;
+    constructor(message: string, fromServer: boolean);
+}
+/** Posts one file to the stack's file endpoint (double-submit CSRF) and returns the new FileRef id. */
+export declare function uploadFileRef(file: Blob, target?: FileRefTarget): Promise<string>;

package/dist/web/lib/upload-file-ref.js

@@ -0,0 +1,29 @@
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { CSRF_HEADER_NAME, readCsrfToken } from "../../live/index.js";
+import { buildFileUploadFormData } from "./file-upload-form-data.js";
+/** Carries the server's own `error` message when the upload endpoint sent one. */
+export class FileUploadFailedError extends Error {
+    fromServer;
+    constructor(message, fromServer) {
+        super(message);
+        this.fromServer = fromServer;
+    }
+}
+/** Posts one file to the stack's file endpoint (double-submit CSRF) and returns the new FileRef id. */
+export async function uploadFileRef(file, target) {
+    const csrf = readCsrfToken();
+    const res = await fetch("/api/files", {
+        method: "POST",
+        body: buildFileUploadFormData({ file, ...target }),
+        ...(csrf !== undefined && { headers: { [CSRF_HEADER_NAME]: csrf } }),
+    });
+    const json = await res.json().catch(() => ({}));
+    const id = propertyOf(json, "id");
+    if (!res.ok || typeof id !== "string") {
+        const message = propertyOf(json, "error");
+        throw typeof message === "string"
+            ? new FileUploadFailedError(message, true)
+            : new FileUploadFailedError(`upload failed (${res.status})`, false);
+    }
+    return id;
+}

package/dist/web/primitives/action-menu.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export type MenuItemDef = {
+    readonly kind: "item";
+    readonly id: string;
+    readonly label: string;
+    /** Optional Icon links vor dem Label (16px). */
+    readonly icon?: ReactNode;
+    /** Pure-display Shortcut-Hint rechts (monospace, gedimmt).
+     *  Caller registriert den Shortcut separat — Linear-Style
+     *  Strings wie "O then M", "Alt + Q", "⌘K". */
+    readonly shortcut?: string;
+    readonly onSelect: () => void;
+    readonly disabled?: boolean;
+    /** "danger" rendert Label rot — typisch Sign-out, Delete. */
+    readonly variant?: "default" | "danger";
+} | {
+    readonly kind: "separator";
+} | {
+    readonly kind: "label";
+    readonly label: string;
+};
+export type ActionMenuProps = {
+    /** Free-form Trigger-Component — Avatar, IconButton, Pill, Custom. */
+    readonly trigger: ReactNode;
+    /** aria-label für den Trigger-Wrapper. */
+    readonly triggerLabel?: string;
+    readonly items: readonly MenuItemDef[];
+    /** Wo das Popup relativ zum Trigger anchorn soll. Default: end. */
+    readonly align?: "start" | "center" | "end";
+    /** Min-width für den Content. Default: 14rem. */
+    readonly minWidth?: string;
+    readonly testId?: string;
+};
+export declare function ActionMenu({ trigger, triggerLabel, items, align, minWidth, testId, }: ActionMenuProps): ReactNode;

package/dist/web/primitives/action-menu.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Generic Action-Menu — Trigger + Items, auf @radix-ui/react-dropdown-
+// menu basiert. Wird benutzt für ProfileMenu (Topbar-Avatar), Edit-
+// Header-Menu (Three-Dots), List-Row-Kebab — die Mechanik ist überall
+// dieselbe, nur der Trigger unterscheidet sich.
+//
+// Nicht zu verwechseln mit RowActionsCell (siehe primitives/index.tsx),
+// die hat die rowActions-Schema-API + per-row Visibility-Logik. Hier
+// ist der Layer drunter: stable, schema-frei, callable von App-Code
+// und vom Schema-Renderer (KumikoApp).
+//
+// Items sind Discriminated Union (item / separator / label), Item kann
+// optional einen Keyboard-Shortcut-Hint rechts tragen (Linear-Pattern
+// "O then M") + Icon links + variant für danger-styling.
+import { useState } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
+export function ActionMenu({ trigger, triggerLabel, items, align = "end", minWidth = "14rem", testId, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": testId ?? "action-menu-trigger", ...(triggerLabel !== undefined && { "aria-label": triggerLabel }), className: "rounded outline-none focus-visible:ring-1 focus-visible:ring-ring", children: trigger }) }), _jsx(DropdownMenuContent, { align: align, style: { minWidth }, children: items.map((item, idx) => {
+                    if (item.kind === "separator") {
+                        // biome-ignore lint/suspicious/noArrayIndexKey: Separators haben keine ID — Reihenfolge ist Identität
+                        return _jsx(DropdownMenuSeparator, {}, `sep-${idx}`);
+                    }
+                    if (item.kind === "label") {
+                        // biome-ignore lint/suspicious/noArrayIndexKey: gleicher Grund wie separator
+                        return _jsx(DropdownMenuLabel, { children: item.label }, `label-${idx}`);
+                    }
+                    return (_jsxs(DropdownMenuItem, { onSelect: item.onSelect, disabled: item.disabled === true, "data-testid": `action-menu-item-${item.id}`, className: item.variant === "danger" ? "text-destructive focus:text-destructive" : undefined, children: [item.icon !== undefined && _jsx("span", { className: "size-4 shrink-0", children: item.icon }), _jsx("span", { className: "flex-1", children: item.label }), item.shortcut !== undefined && (_jsx("span", { className: "ml-auto text-xs text-muted-foreground tracking-wider font-mono", children: item.shortcut }))] }, item.id));
+                }) })] }));
+}

package/dist/web/primitives/calendar-popover.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+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;
+};
+export declare const inFieldIconButtonClass: string;
+export declare function CalendarPopover({ selected, onSelect, min, max, disabled, hasError, triggerLabel, }: CalendarPopoverProps): ReactNode;

package/dist/web/primitives/calendar-popover.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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 { DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn.js";
+export const inFieldIconButtonClass = "absolute inset-y-0 right-0 inline-flex w-9 items-center justify-center rounded-md " +
+    "text-muted-foreground transition-colors hover:text-foreground " +
+    "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() {
+    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, }) {
+    const range = defaultRange();
+    const startMonth = min ?? range.start;
+    const endMonth = max ?? range.end;
+    const disabledMatchers = [
+        ...(min !== undefined ? [{ before: min }] : []),
+        ...(max !== undefined ? [{ after: max }] : []),
+    ];
+    return (_jsxs(PopoverPrimitive.Root, { children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", disabled: disabled, "aria-label": triggerLabel, "aria-invalid": hasError === true ? true : undefined, className: cn(inFieldIconButtonClass, hasError === true && "text-destructive"), children: _jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: popoverClass, align: "end", sideOffset: 4, children: _jsx(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, components: { Dropdown: SelectDropdown } }) }) })] }));
+}
+const dropdownSelectClass = "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm font-medium " +
+    "cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+// rdp v9s Default-Dropdown rendert NEBEN dem <select> ein aria-hidden
+// <span> mit demselben Label — sichtbar nur, wenn rdps eigene style.css
+// das <select> transparent darüberlegt. Da wir die rdp-Klassen mit eigenen
+// Tokens überschreiben, greift diese Positionierung nicht → Label doppelt
+// (#369-Folgebug). Ein nacktes <select> ohne Begleit-Span vermeidet das
+// CSS-unabhängig — eine Quelle für den sichtbaren Wert.
+function SelectDropdown({ options, className, ...selectProps }) {
+    return (_jsx("select", { className: cn(dropdownSelectClass, className), ...selectProps, children: options?.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }));
+}
+// classNames-Map für react-day-picker v9 — überschreibt die default-
+// Klassen mit Tailwind/shadcn-Tokens. Die Monat-/Jahr-Selects rendert
+// SelectDropdown (components-Prop), daher hier nur der dropdowns-Container.
+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",
+    dropdowns: "flex items-center gap-1 text-sm font-medium",
+    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/dist/web/primitives/combobox.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+export type ComboboxOption = {
+    readonly value: string;
+    readonly label: string;
+    /** Muted second line in the list item; also matched by the local search. */
+    readonly description?: string;
+    /** Group heading; see `groupOptions` for the ordering rule. */
+    readonly group?: string;
+    /** Visible but not choosable. */
+    readonly disabled?: boolean;
+};
+type ComboboxBaseProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly options: readonly ComboboxOption[];
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    readonly ariaLabel?: string;
+    readonly placeholder?: string;
+    readonly searchPlaceholder?: string;
+    readonly emptyText?: string;
+    /** Tier 2.7e Remote-Search: wenn gesetzt, wechselt der Combobox in
+     *  Remote-Mode. cmdk's client-side Filter wird deaktiviert (Server
+     *  hat schon gefiltert), und der Search-Input ruft onSearchChange
+     *  debounced (300ms). Ohne diesen Callback bleibt die Local-Filter-
+     *  Variante (cmdk fuzzy-match auf den geladenen options). */
+    readonly onSearchChange?: (q: string) => void;
+    /** Spinner im Trigger + Popover-Footer wenn remote search läuft. */
+    readonly loading?: boolean;
+    /** Fixed footer row below the option list ("+ createLabel"). Rendered
+     *  unfiltered — stays visible even when the search matches nothing,
+     *  which is the most common case for reference-lookups on a freshly
+     *  seeded system (kumiko-framework#1681). Omit for the plain
+     *  select-existing combobox. */
+    readonly onCreate?: () => void;
+    /** Label for the create-footer row. Default: i18n `kumiko.actions.create`. */
+    readonly createLabel?: string;
+    /** Test-Hook: forciert den initial open-state des Popovers. In
+     *  jsdom + Radix-Popover triggert userEvent.click auf den Trigger
+     *  nicht zuverlässig PointerEvents — Tests setzen defaultOpen=true,
+     *  damit der Popover sofort gerendert ist. Production-Code lässt
+     *  den Default (false). */
+    readonly defaultOpen?: boolean;
+};
+export type ComboboxInputProps = ComboboxBaseProps & ({
+    readonly multiple?: false;
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+} | {
+    readonly multiple: true;
+    readonly value: readonly string[];
+    readonly onChange: (v: readonly string[]) => void;
+});
+export declare function ComboboxInput(props: ComboboxInputProps): ReactNode;
+export {};

package/dist/web/primitives/combobox.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tier 2.1c: Searchable Select / Combobox.
+//
+// Pattern ist das shadcn-Standard-Combobox: Popover-Trigger als Button
+// (zeigt aktuellen Wert oder Placeholder), Popover-Content enthält
+// cmdk-Command mit Search-Input + filterable Item-List.
+//
+// cmdk ist Radix's Standard-Combobox (Library für Command-K + Searchable
+// Selects), client-side Fuzzy-Match via `Command.Filter` mit Default-
+// Behavior. Server-side Remote-Search (debounced query) ist nicht im
+// MVP — kommt später als zweiter Mode-Schalter.
+//
+// Multi-Mode: `multiple: true` schaltet auf Tag-Anzeige + Mehrfach-
+// Auswahl. Selected-Tags rendern als kleine entfernbare Chips, das
+// Search-Input bleibt offen für weitere Auswahl.
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { Check, ChevronDown, Loader2, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
+import { REFERENCE_SEARCH_DEBOUNCE_MS, useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { groupOptions } from "./option-groups.js";
+const triggerClass = "flex h-9 w-full min-w-0 items-center justify-between gap-2 " +
+    "rounded-md border border-input text-left max-md:min-h-11 " +
+    "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";
+const popoverContentClass = "z-50 w-[var(--radix-popover-trigger-width)] rounded-md border bg-popover " +
+    "p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in " +
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
+    "data-[state=open]:fade-in-0";
+const tagClass = "inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-xs " +
+    "font-medium text-muted-foreground";
+// Debounce-Default lebt zentral (hooks/reference-limits.ts) damit
+// app-weit ein consistentes Tipp-Window gilt.
+// Substring-Filter für cmdk's Local-Mode. cmdk's Default ist
+// `command-score` (fuzzy), das matcht "Ad" auch gegen "Backend" weil 'a'
+// und 'd' irgendwo enthalten sind — für Reference-Lookups irreführend
+// (User erwartet Prefix/Substring-Verhalten, nicht Subsequence-Match).
+// Returns 1 wenn search im value enthalten, 0 sonst — cmdk hidet Items
+// mit Score 0.
+function substringFilter(value, search, keywords) {
+    const needle = search.toLowerCase();
+    return [value, ...(keywords ?? [])].some((text) => text.toLowerCase().includes(needle)) ? 1 : 0;
+}
+export function ComboboxInput(props) {
+    const { id, name, options, disabled, required, hasError, ariaLabel, placeholder, searchPlaceholder, emptyText, onSearchChange, loading, defaultOpen, onCreate, createLabel, } = props;
+    // i18n-Defaults aus dem Framework-Bundle (kumikoDefaultTranslations).
+    // Caller-Override gewinnt; Bundle-Override greift wenn der Caller
+    // den Prop nicht setzt; raw-Key-Fallback wenn weder noch.
+    const t = useTranslation();
+    const effectivePlaceholder = placeholder ?? t("kumiko.combobox.placeholder");
+    const effectiveSearchPlaceholder = searchPlaceholder ?? t("kumiko.combobox.search-placeholder");
+    const effectiveEmptyText = emptyText ?? t("kumiko.combobox.empty");
+    const loadingText = t("kumiko.combobox.loading");
+    const effectiveCreateLabel = createLabel ?? t("kumiko.actions.create");
+    const multiple = props.multiple === true;
+    const [open, setOpen] = useState(defaultOpen === true);
+    // Local Search-Buffer für Remote-Mode. Tipps werden mit 300ms
+    // Debounce an onSearchChange weitergereicht, damit pro Tastendruck
+    // nicht ein Server-Roundtrip fliegt. Im Local-Mode ist das State
+    // ungenutzt (cmdk steuert sein Search-Input intern).
+    const [searchTerm, setSearchTerm] = useState("");
+    const isRemote = onSearchChange !== undefined;
+    useEffect(() => {
+        if (!isRemote)
+            return;
+        const timer = setTimeout(() => onSearchChange(searchTerm), REFERENCE_SEARCH_DEBOUNCE_MS);
+        return () => clearTimeout(timer);
+    }, [isRemote, searchTerm, onSearchChange]);
+    // Beim Schließen des Popovers den Suchbegriff zurücksetzen damit
+    // beim nächsten Öffnen nicht der vorherige term hängt. Würde sonst
+    // den Server-State stale halten zwischen Aufrufen.
+    useEffect(() => {
+        if (!open && searchTerm !== "")
+            setSearchTerm("");
+    }, [open, searchTerm]);
+    // Discriminated-Union per `multiple`: TS narrowt props.value/onChange
+    // automatisch — Runtime-Cast entfällt.
+    const selectedValues = multiple ? new Set(props.value) : new Set();
+    const singleValue = !multiple ? props.value : "";
+    const singleLabel = options.find((o) => o.value === singleValue)?.label ?? "";
+    const toggleMulti = (v) => {
+        if (!multiple)
+            return;
+        const current = [...props.value];
+        const idx = current.indexOf(v);
+        if (idx >= 0)
+            current.splice(idx, 1);
+        else
+            current.push(v);
+        props.onChange(current);
+    };
+    const triggerLabel = multiple ? null : singleLabel === "" ? placeholder : singleLabel;
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx("input", { type: "hidden", name: name, value: multiple ? props.value.join(",") : props.value }), _jsxs(PopoverPrimitive.Trigger, { id: id, "data-testid": `combobox-${id}`, type: "button", disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-label": ariaLabel, "aria-haspopup": "listbox", "aria-expanded": open, title: !multiple && singleLabel !== "" ? singleLabel : undefined, className: cn(triggerClass, hasError === true && "border-destructive focus-visible:ring-destructive"), children: [multiple ? (_jsx("span", { className: "flex flex-wrap items-center gap-1", children: selectedValues.size === 0 ? (_jsx("span", { className: "text-muted-foreground", children: effectivePlaceholder })) : (
+                        // Tags sind read-only Anzeige (kein nested <button>
+                        // möglich im Trigger-<button>). Entfernen via Re-Click
+                        // im Combobox-Popup — der Item-Toggle deselektiert die
+                        // entsprechende Option (analog shadcn-Standard-Combobox).
+                        [...selectedValues].map((v) => {
+                            const opt = options.find((o) => o.value === v);
+                            return (_jsx("span", { className: tagClass, children: opt?.label ?? v }, v));
+                        })) })) : (_jsx("span", { className: cn("min-w-0 flex-1 truncate text-left", singleLabel === "" && "text-muted-foreground"), children: triggerLabel })), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })] }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: popoverContentClass, align: "start", sideOffset: 4, children: _jsxs(Command, { shouldFilter: !isRemote, filter: substringFilter, children: [_jsxs("div", { className: "relative", children: [_jsx(Command.Input, { placeholder: effectiveSearchPlaceholder, value: isRemote ? searchTerm : undefined, onValueChange: isRemote ? setSearchTerm : undefined, className: "flex h-9 w-full border-0 border-b border-border bg-transparent px-3 py-1 text-sm outline-none placeholder:text-muted-foreground" }), loading === true && (_jsx(Loader2, { className: "absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" }))] }), _jsxs(Command.List, { className: "max-h-64 overflow-y-auto p-1", children: [_jsx(Command.Empty, { className: "py-3 text-center text-sm text-muted-foreground", children: loading === true ? loadingText : effectiveEmptyText }), groupOptions(options).map((section) => {
+                                        const items = section.options.map((opt) => {
+                                            const isSelected = multiple
+                                                ? selectedValues.has(opt.value)
+                                                : opt.value === singleValue;
+                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, disabled: opt.disabled, onSelect: () => {
+                                                    if (props.multiple === true) {
+                                                        toggleMulti(opt.value);
+                                                    }
+                                                    else {
+                                                        props.onChange(opt.value);
+                                                        setOpen(false);
+                                                    }
+                                                }, 
+                                                // No pointer-events toggles on the item: with Tailwind active,
+                                                // `data-[disabled]:pointer-events-none` silently swallowed mouse
+                                                // clicks (keyboard select still worked, jsdom tests stayed green).
+                                                className: cn("relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground", opt.disabled === true && "cursor-not-allowed opacity-50"), children: [isSelected && (_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Check, { className: "h-4 w-4" }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: opt.label }), opt.description !== undefined && (_jsx("span", { className: "text-xs text-muted-foreground", children: opt.description }))] })] }, opt.value));
+                                        });
+                                        return section.heading === undefined ? (items) : (_jsx(Command.Group, { heading: section.heading, className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", children: items }, section.heading));
+                                    })] }), onCreate !== undefined && (_jsxs("button", { type: "button", "data-testid": `combobox-${id}-create`, onClick: () => {
+                                    setOpen(false);
+                                    onCreate();
+                                }, className: "flex w-full cursor-pointer select-none items-center gap-2 border-t border-border px-3 py-1.5 text-left text-sm text-primary outline-none hover:bg-accent hover:text-accent-foreground", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: effectiveCreateLabel })] }))] }) }) })] }));
+}

package/dist/web/primitives/date-field.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+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 ariaLabel?: string;
+    readonly locale?: string;
+    /** 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;
+};
+export declare function DateField({ id, name, value, onChange, disabled, required, hasError, ariaLabel, locale, min, max, }: DateFieldProps): ReactNode;

package/dist/web/primitives/date-field.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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`.
+//
+// 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 { Temporal } from "@cosmicdrift/kumiko-types/temporal";
+import { useState } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { CalendarPopover } from "./calendar-popover.js";
+import { formatDateForInput, formatDatePlaceholder, guessLocale, parseIso, parseTypedDate, toIso, } from "./date-parse.js";
+// 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) {
+    return new Date(pd.year, pd.month - 1, pd.day);
+}
+function fromNativeDate(d) {
+    return Temporal.PlainDate.from({
+        year: d.getFullYear(),
+        month: d.getMonth() + 1,
+        day: d.getDate(),
+    });
+}
+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, ariaLabel, locale, min, max, }) {
+    const t = useTranslation();
+    const resolvedLocale = locale ?? guessLocale();
+    const selected = parseIso(value);
+    // 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(null);
+    const display = draft ?? (selected !== undefined ? formatDateForInput(selected, resolvedLocale) : "");
+    function commitTyped(raw) {
+        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 (_jsxs("div", { className: "relative w-full", children: [_jsx("input", { type: "text", inputMode: "numeric", id: id, name: name, value: display, disabled: disabled, required: required, "aria-invalid": hasError === true ? true : undefined, "aria-label": ariaLabel, 
+                // Deliberate: slot order/separator follow resolvedLocale (the
+                // `locale` prop, or the browser locale), but the letters follow
+                // the app's UI locale via t() — a caller rendering a date in a
+                // locale that differs from the UI locale gets a mixed-locale
+                // placeholder (e.g. German UI + locale="en-US" → "MM/TT/JJJJ").
+                // Accepted for now (fw#1879): a static per-locale letter lookup
+                // would need its own locale-root resolution and tests for a
+                // placeholder-only, Low-severity mismatch.
+                placeholder: formatDatePlaceholder(resolvedLocale, {
+                    year: t("kumiko.field.dateField.placeholderYear"),
+                    month: t("kumiko.field.dateField.placeholderMonth"),
+                    day: t("kumiko.field.dateField.placeholderDay"),
+                }), onChange: (e) => {
+                    setDraft(e.target.value);
+                    commitTyped(e.target.value);
+                }, onBlur: () => setDraft(null), className: cn(inputClass, "pr-9", hasError === true && "border-destructive focus-visible:ring-destructive") }), _jsx(CalendarPopover, { selected: selected !== undefined ? toNativeDate(selected) : undefined, onSelect: (d) => {
+                    onChange(d !== undefined ? toIso(fromNativeDate(d)) : undefined);
+                    setDraft(null);
+                }, ...(minDate !== undefined && { min: toNativeDate(minDate) }), ...(maxDate !== undefined && { max: toNativeDate(maxDate) }), ...(disabled !== undefined && { disabled }), ...(hasError !== undefined && { hasError }), triggerLabel: t("kumiko.field.open-calendar") })] }));
+}

package/dist/web/primitives/date-input.d.ts

@@ -0,0 +1 @@
+export { DateField as DateInput, type DateFieldProps as DateInputProps } from "./date-field.tsx";

package/dist/web/primitives/date-input.js

@@ -0,0 +1,5 @@
+// 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.
+export { DateField as DateInput } from "./date-field.js";

package/dist/web/primitives/date-parse.d.ts

@@ -0,0 +1,11 @@
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
+export declare function guessLocale(): string;
+export declare function parseIso(v: string): Temporal.PlainDate | undefined;
+export declare function toIso(d: Temporal.PlainDate): string;
+export declare function formatDateForInput(d: Temporal.PlainDate, locale: string): string;
+export declare function formatDatePlaceholder(locale: string, letters: {
+    readonly year: string;
+    readonly month: string;
+    readonly day: string;
+}): string;
+export declare function parseTypedDate(input: string, locale: string): Temporal.PlainDate | undefined;