@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

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

@@ -0,0 +1,159 @@
+// Shared date parse/format utils for the web date primitives (DateInput,
+// TimestampInput). PlainDate semantics: pure calendar date, no timezone
+// conversion — "2026-04-25" stays the 25th regardless of the browser's
+// zone. TZ/wall-clock conversion for timestamp fields deliberately stays
+// in timestamp-input.tsx (wire boundary, own test); this file is pure
+// calendar date.
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
+// Prefer the native Temporal (Chromium 144+/Firefox 139+) over the bundled
+// polyfill so `instanceof` checks match values crossing package boundaries;
+// falls back to the polyfill where native support is absent.
+// Callers must not feed parseIso()/makePlainDate results into polyfill-only
+// Statics (compare/equals/since) — mixed Temporal brands throw TypeError.
+function activeTemporal() {
+    return globalThis.Temporal ?? Temporal;
+}
+export function guessLocale() {
+    if (typeof navigator !== "undefined" && navigator.language)
+        return navigator.language;
+    return "en-US";
+}
+// overflow:"reject" throws on overflow (Feb 31 → RangeError) instead of
+// silently rolling it forward — typed dates should not silently shift to
+// a different date.
+function makePlainDate(y, m, d) {
+    try {
+        return activeTemporal().PlainDate.from({ year: y, month: m, day: d }, { overflow: "reject" });
+    }
+    catch {
+        return undefined;
+    }
+}
+export function parseIso(v) {
+    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) ||
+        // Reject 2-digit years — matches the pre-PlainDate behavior where
+        // `new Date`'s 1900+y quirk made a round-trip check fail on them.
+        y < 100 ||
+        // Reject years outside 0000-9999 — Temporal.toString() switches to the
+        // signed extended ISO format above that range (e.g. "+010000-04-25"),
+        // breaking the "unchanged ISO string" wire contract (toIso below).
+        y > 9999) {
+        return undefined;
+    }
+    return makePlainDate(y, m, d);
+}
+export function toIso(d) {
+    // calendarName: "never" — a non-ISO PlainDate (e.g. from a future
+    // PlainDate.from with a `[u-ca=...]` suffix) would otherwise append the
+    // calendar annotation to the wire string.
+    return d.toString({ calendarName: "never" });
+}
+// Editable, re-parseable display (numeric locale format, e.g. de
+// "25.04.2026", en-US "04/25/2026"). Deliberately NOT month:"long" — the
+// user should be able to overwrite the displayed text directly.
+export function formatDateForInput(d, locale) {
+    return d.toLocaleString(locale, { year: "numeric", month: "2-digit", day: "2-digit" });
+}
+// Shared by localeDateOrder and formatDatePlaceholder — both need the
+// locale's numeric formatToParts breakdown of the same reference date.
+// epoch-millis input instead of a Date object (guard-compliant); timeZone:
+// "UTC" keeps the reference from shifting to the 1st depending on the
+// browser's TZ.
+function localeDateParts(locale) {
+    const refEpochMillis = activeTemporal()
+        .PlainDate.from({ year: 2026, month: 1, day: 2 })
+        .toZonedDateTime("UTC").epochMilliseconds;
+    return new Intl.DateTimeFormat(locale, {
+        timeZone: "UTC",
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    }).formatToParts(refEpochMillis);
+}
+// Field order of the numeric locale format. de → [d,m,y], en-US →
+// [m,d,y], ISO-like locales → [y,m,d].
+function localeDateOrder(locale) {
+    const order = [];
+    for (const part of localeDateParts(locale)) {
+        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;
+}
+// Locale-shaped placeholder pattern, e.g. de "TT.MM.JJJJ", en-US
+// "MM/DD/YYYY", en-GB "DD/MM/YYYY". Slot order and separator both come
+// from formatToParts — nothing hardcoded per locale. `letters` is one
+// character per slot (from i18n); repeated to the slot's digit count
+// (day/month 2, year 4).
+// Clamps each slot letter to its first code point — `letters` normally comes
+// from i18n and can fall back to the raw, multi-character translation key
+// when a lookup misses, which would otherwise blow up the placeholder length.
+function firstCodePoint(s) {
+    return [...s][0] ?? "?";
+}
+export function formatDatePlaceholder(locale, letters) {
+    return localeDateParts(locale)
+        .map((part) => {
+        if (part.type === "year")
+            return firstCodePoint(letters.year).repeat(4);
+        if (part.type === "month")
+            return firstCodePoint(letters.month).repeat(2);
+        if (part.type === "day")
+            return firstCodePoint(letters.day).repeat(2);
+        return part.value;
+    })
+        .join("");
+}
+// Typed input → PlainDate. Accepts ISO (yyyy-mm-dd) directly, plus three
+// numeric tokens in locale order with any separator (".", "/", "-", " ").
+// Two-digit years → 2000s. Partial/invalid input → undefined (caller
+// keeps the raw text then, commits nothing).
+export function parseTypedDate(input, locale) {
+    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;
+    if (y > 9999)
+        return undefined;
+    return makePlainDate(y, m, d);
+}

package/dist/web/primitives/dialog.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import type { DialogProps } from "../../index.ts";
+export declare function DefaultDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, initialFocus, onConfirm, children, testId, }: DialogProps): ReactNode;

package/dist/web/primitives/dialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Confirm dialog built on ModalShell. Cancel is always secondary; async
+// onConfirm shows a spinner on the confirm button until the promise settles.
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Loader2 } from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { ModalShell } from "./modal-shell.js";
+export function DefaultDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant = "default", initialFocus, onConfirm, children, testId, }) {
+    const t = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const confirmButtonRef = useRef(null);
+    const cancelButtonRef = useRef(null);
+    // A danger dialog defaults to the safe choice, so a reflexive Enter cannot run a destructive action.
+    const defaultFocus = variant === "danger" ? "cancel" : "confirm";
+    const focusTarget = initialFocus ?? (children === undefined ? defaultFocus : undefined);
+    const effectiveConfirmLabel = confirmLabel ?? t("kumiko.dialog.confirm");
+    const effectiveCancelLabel = cancelLabel ?? t("kumiko.dialog.cancel");
+    async function handleConfirm() {
+        setLoading(true);
+        try {
+            await onConfirm();
+        }
+        finally {
+            setLoading(false);
+            onOpenChange(false);
+        }
+    }
+    const isDanger = variant === "danger";
+    const confirmClass = isDanger
+        ? "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90"
+        : "bg-primary text-primary-foreground shadow hover:bg-primary/90";
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: description === undefined, contentClassName: cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg"), ...(focusTarget !== undefined && {
+            // Radix's default initial focus lands on the first focusable in DOM
+            // order, which is Cancel for a bare dialog.
+            onOpenAutoFocus: (event) => {
+                event.preventDefault();
+                (focusTarget === "cancel" ? cancelButtonRef : confirmButtonRef).current?.focus();
+            },
+        }), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DialogPrimitive.Title, { className: "text-lg font-semibold tracking-tight", children: title }), description !== undefined && (_jsx(DialogPrimitive.Description, { className: "text-sm text-muted-foreground", children: description }))] }), children !== undefined && _jsx("div", { children: children }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { ref: cancelButtonRef, type: "button", disabled: loading, "data-testid": testId !== undefined ? `${testId}-cancel` : undefined, className: "inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", children: effectiveCancelLabel }) }), _jsxs("button", { ref: confirmButtonRef, type: "button", onClick: () => void handleConfirm(), disabled: loading, "data-testid": testId !== undefined ? `${testId}-confirm` : undefined, className: cn("inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium", "disabled:pointer-events-none disabled:opacity-50", confirmClass), children: [loading && _jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), effectiveConfirmLabel] })] })] }));
+}

package/dist/web/primitives/drawer.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { DrawerProps } from "../../index.ts";
+export declare function DefaultDrawer({ open, onOpenChange, title, subtitle, children, testId, }: DrawerProps): ReactNode;

package/dist/web/primitives/drawer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Bare content shell for hosting self-contained widgets (own submit/cancel
+// buttons) in a slide-in side panel — same "no footer buttons of its own"
+// contract as DefaultModal, delegating to the richer widgets/drawer.tsx
+// Drawer (resize/backdrop/side are widget-only concerns, not exposed
+// through the platform-neutral CorePrimitives.Drawer contract).
+import { XIcon } from "lucide-react";
+import { useTranslation } from "../../index.js";
+import { SheetTitle } from "../ui/sheet.js";
+import { Drawer } from "../widgets/drawer.js";
+const DRAWER_WIDTH_PX = 480;
+const DRAWER_DIM_PERCENT = 32;
+const PANEL_CLASS = "bg-card border-border-strong shadow-[-12px_0_32px_rgb(0_0_0/0.14)]";
+export function DefaultDrawer({ open, onOpenChange, title, subtitle, children, testId, }) {
+    const t = useTranslation();
+    return (_jsxs(Drawer, { open: open, onOpenChange: onOpenChange, testId: testId, variant: "flush", side: "right", width: DRAWER_WIDTH_PX, backdrop: { dimPercent: DRAWER_DIM_PERCENT }, showCloseButton: false, panelClassName: PANEL_CLASS, fillBody: true, children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-header` : undefined, className: "flex min-h-14 shrink-0 items-center gap-3 border-b border-border py-2 pr-3 pl-6", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx(SheetTitle, { className: "text-base font-semibold", children: title ?? "" }), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "text-sm text-muted-foreground", children: subtitle }))] }), _jsx("button", { type: "button", "aria-label": t("kumiko.dialog.close"), onClick: () => onOpenChange(false), className: "flex size-8 items-center justify-center rounded-md text-foreground-secondary hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) })] }), _jsx("div", { "data-testid": testId !== undefined ? `${testId}-body` : undefined, onSubmit: (e) => e.stopPropagation(), className: "flex min-h-0 flex-1 flex-col", children: children })] }));
+}

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

@@ -0,0 +1,15 @@
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export declare const DropdownMenu: import("react").FC<Primitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuPortal: import("react").FC<Primitive.DropdownMenuPortalProps>;
+export declare function DropdownMenuContent({ className, sideOffset, portalContainer, ...props }: ComponentPropsWithoutRef<typeof Primitive.Content> & {
+    /** Mount point of the portal. Default: document.body, which sits outside every landmark. */
+    readonly portalContainer?: HTMLElement | null;
+}): ReactNode;
+export declare function DropdownMenuItem({ className, ...props }: ComponentPropsWithoutRef<typeof Primitive.Item>): ReactNode;
+export declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): ReactNode;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): ReactNode;
+export declare function DropdownMenuLabel({ className, ...props }: ComponentPropsWithoutRef<typeof Primitive.Label>): ReactNode;
+export declare function DropdownMenuSeparator({ className, ...props }: ComponentPropsWithoutRef<typeof Primitive.Separator>): ReactNode;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// shadcn-style DropdownMenu auf Radix-Basis. Wrappers um
+// @radix-ui/react-dropdown-menu mit den Tailwind-Token-Klassen die
+// die anderen Primitives auch nutzen — Trigger-Button-Look kommt vom
+// Caller (asChild-Pattern), wir liefern nur Content/Item/Label/
+// Separator/CheckboxItem mit konsistenter Optik.
+//
+// Vorteile gegenüber dem self-rolled useDropdownMenu-Hook:
+//  - Click-outside, Escape, Focus-Trap, Roving-Tabindex, ARIA-Roles,
+//    Pointer-vs-Keyboard-Subtleties — alles geschenkt von Radix.
+//  - Portal'd Content rendert über Stacking-Context-Grenzen (nützlich
+//    in Dialogs/Popovers).
+//  - Keyboard-Nav (↑↓ + Home/End) funktioniert von Haus aus.
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export const DropdownMenu = Primitive.Root;
+export const DropdownMenuTrigger = Primitive.Trigger;
+export const DropdownMenuPortal = Primitive.Portal;
+const contentClass = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " +
+    "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 " +
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2";
+export function DropdownMenuContent({ className, sideOffset = 4, portalContainer, ...props }) {
+    return (_jsx(Primitive.Portal, { container: portalContainer, children: _jsx(Primitive.Content, { sideOffset: sideOffset, className: cn(contentClass, className), ...props }) }));
+}
+const itemClass = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm " +
+    "outline-none transition-colors " +
+    "focus:bg-accent focus:text-accent-foreground " +
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+export function DropdownMenuItem({ className, ...props }) {
+    return _jsx(Primitive.Item, { className: cn(itemClass, className), ...props });
+}
+// CheckboxItem mit Check-Icon links — für "ausgewählter Eintrag in
+// einer Liste"-Patterns (TenantSwitcher, LanguageSwitcher). Radix
+// rendert <ItemIndicator> nur wenn checked=true, kein eigener Branch
+// nötig.
+export function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(Primitive.CheckboxItem, { checked: checked, className: cn(itemClass, "pl-8 pr-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Primitive.ItemIndicator, { children: _jsx(Check, { className: "h-3.5 w-3.5" }) }) }), children] }));
+}
+export const DropdownMenuRadioGroup = Primitive.RadioGroup;
+// RadioItem with a dot indicator on the left — for exclusive single-choice
+// selection (e.g. WorkspaceSwitcher). Unlike CheckboxItem, Radix renders
+// role="menuitemradio" + aria-checked here instead of role="menuitemcheckbox",
+// which announces "one of several" to screen readers instead of "on/off".
+export function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(Primitive.RadioItem, { className: cn(itemClass, "pl-8 pr-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Primitive.ItemIndicator, { children: _jsx(Check, { className: "h-3.5 w-3.5" }) }) }), children] }));
+}
+export function DropdownMenuLabel({ className, ...props }) {
+    return (_jsx(Primitive.Label, { className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+export function DropdownMenuSeparator({ className, ...props }) {
+    return _jsx(Primitive.Separator, { className: cn("-mx-1 my-1 h-px bg-border", className), ...props });
+}

package/dist/web/primitives/embedded-list-input.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { EmbeddedListInputProps } from "../../index.ts";
+type ScrollAffordance = {
+    readonly canScrollLeft: boolean;
+    readonly canScrollRight: boolean;
+};
+export declare function computeScrollAffordance(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollAffordance;
+export declare function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, }: EmbeddedListInputProps): ReactNode;
+export {};