@cosmicdrift/kumiko-renderer 0.374.0 → 0.377.0

package/dist/web/primitives/json-view.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { JsonViewProps } from "../../index.ts";
+/** Syntax-highlighted, whitespace-preserving JSON display. Bounded height
+ *  with its own vertical scroll (job logs get long) instead of growing the
+ *  page; wraps rather than overflowing horizontally. Colors come from the
+ *  dedicated syntax-* theme tokens (styles.css), readable in light + dark. */
+export declare function DefaultJsonView({ value, indent, testId }: JsonViewProps): ReactNode;

package/dist/web/primitives/json-view.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Recursive pre-pass (not JSX) that turns `value` into a JSON.stringify-safe
+// plain structure: BigInt → string, and a real ancestor-path cycle check
+// (not a global "seen" set — a value referenced twice via two different,
+// non-circular paths must still render twice, not collapse to "[Circular]").
+function toSafeJson(value, ancestors = []) {
+    if (typeof value === "bigint")
+        return `${value.toString()}n`;
+    if (typeof value !== "object" || value === null)
+        return value;
+    if (ancestors.includes(value))
+        return "[Circular]";
+    const nextAncestors = [...ancestors, value];
+    if (Array.isArray(value))
+        return value.map((item) => toSafeJson(item, nextAncestors));
+    const out = {};
+    for (const [k, v] of Object.entries(value))
+        out[k] = toSafeJson(v, nextAncestors);
+    return out;
+}
+// A broken audit/log payload must not take the whole screen down with it —
+// double try/catch so even a throwing getter on the input falls back to a
+// plain string instead of propagating.
+function safeStringify(value, indent) {
+    try {
+        const json = JSON.stringify(toSafeJson(value), null, indent);
+        return json ?? String(value);
+    }
+    catch {
+        try {
+            return String(value);
+        }
+        catch {
+            return "[unserializable value]";
+        }
+    }
+}
+const TOKEN_CLASS_NAME = {
+    key: "text-syntax-key font-medium",
+    string: "text-syntax-string",
+    number: "text-syntax-number",
+    boolean: "text-syntax-literal",
+    null: "text-syntax-literal italic",
+};
+function classifyToken(token) {
+    if (token.startsWith('"'))
+        return token.endsWith(":") ? "key" : "string";
+    if (token === "true" || token === "false")
+        return "boolean";
+    if (token === "null")
+        return "null";
+    return "number";
+}
+// The stringify output is canonical JSON — a regex tokenizer over that
+// string is a fraction of the code of a recursive value-tree renderer, and
+// tokens become plain React elements (never dangerouslySetInnerHTML): audit
+// payloads and job logs carry untrusted third-party data, so this must not
+// become an HTML-injection path.
+function tokenizeJson(json) {
+    const tokenRe = /("(?:\\u[a-fA-F0-9]{4}|\\.|[^\\"])*"(?:\s*:)?|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\btrue\b|\bfalse\b|\bnull\b)/g;
+    const nodes = [];
+    let lastIndex = 0;
+    let match = tokenRe.exec(json);
+    let key = 0;
+    while (match !== null) {
+        if (match.index > lastIndex)
+            nodes.push(json.slice(lastIndex, match.index));
+        const token = match[0];
+        nodes.push(_jsx("span", { className: TOKEN_CLASS_NAME[classifyToken(token)], children: token }, key++));
+        lastIndex = tokenRe.lastIndex;
+        match = tokenRe.exec(json);
+    }
+    if (lastIndex < json.length)
+        nodes.push(json.slice(lastIndex));
+    return nodes;
+}
+/** Syntax-highlighted, whitespace-preserving JSON display. Bounded height
+ *  with its own vertical scroll (job logs get long) instead of growing the
+ *  page; wraps rather than overflowing horizontally. Colors come from the
+ *  dedicated syntax-* theme tokens (styles.css), readable in light + dark. */
+export function DefaultJsonView({ value, indent = 2, testId }) {
+    const json = safeStringify(value, indent);
+    return (_jsx("pre", { "data-testid": testId, className: "max-h-80 overflow-y-auto whitespace-pre-wrap break-words rounded bg-muted p-2 font-mono text-xs", children: tokenizeJson(json) }));
+}

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { FormWidth } from "../../index.ts";
+export type ScreenWidth = FormWidth;
+export declare const screenWidthClassName: Record<ScreenWidth, string>;
+export declare const screenFormColumnWidthClassName: Record<ScreenWidth, string>;
+export declare const screenPaddingClassName = "px-4 pb-6 pt-5 md:px-10 md:pb-10 md:pt-7";
+declare const STACK_GAP: {
+    readonly sm: "gap-2";
+    readonly md: "gap-4";
+    readonly lg: "gap-6";
+};
+type StackGap = keyof typeof STACK_GAP;
+type StackProps = {
+    readonly gap?: StackGap;
+    readonly className?: string;
+    readonly children?: ReactNode;
+    readonly testId?: string;
+};
+export declare function Stack({ gap, className, children, testId }: StackProps): ReactNode;
+type PageSectionProps = {
+    readonly className?: string;
+    readonly children?: ReactNode;
+    readonly testId?: string;
+    readonly maxWidth?: ScreenWidth;
+};
+export declare function PageSection({ className, children, testId, maxWidth, }: PageSectionProps): ReactNode;
+export {};

package/dist/web/primitives/layout.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+// Shared 3xl/4xl/full → max-w-*/mx-auto map. FormScreenShell
+// (primitives/index.tsx) reuses this instead of keeping its own copy —
+// same width tokens must render the same class everywhere (fw#2640).
+export const screenWidthClassName = {
+    "3xl": "max-w-3xl mx-auto",
+    "4xl": "max-w-4xl mx-auto",
+    full: "max-w-full",
+};
+// Screen-form column variant: left-aligned (no mx-auto) so the column lines up
+// with the screen's other left-aligned content, e.g. the header region.
+export const screenFormColumnWidthClassName = {
+    "3xl": "max-w-3xl",
+    "4xl": "max-w-4xl",
+    full: "max-w-full",
+};
+// Shared screen padding for every screen container (PageSection,
+// FormScreenShell, list screens and the pinned-footer screen form). The inset
+// is the one the settings screens use, so a list, a dashboard and a form start
+// at the same edge. The bottom inset keeps the last field or table row off the
+// viewport edge (fw#2640).
+export const screenPaddingClassName = "px-4 pb-6 pt-5 md:px-10 md:pb-10 md:pt-7";
+const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
+export function Stack({ gap = "md", className, children, testId }) {
+    return (_jsx("div", { "data-testid": testId, className: cn("flex flex-col", STACK_GAP[gap], className), children: children }));
+}
+export function PageSection({ className, children, testId, maxWidth = "full", }) {
+    return (_jsx("div", { "data-testid": testId, className: cn(screenPaddingClassName, screenWidthClassName[maxWidth], className), children: children }));
+}

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

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { LightboxProps } from "../../index.ts";
+export declare function DefaultLightbox(props: LightboxProps): ReactNode;

package/dist/web/primitives/lightbox.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Full-size image overlay — ModalShell without confirm/cancel actions.
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { ModalShell } from "./modal-shell.js";
+const NAV_BUTTON_CLASS = "absolute top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring";
+export function DefaultLightbox(props) {
+    const { open, onOpenChange, testId, actions, showPosition = true } = props;
+    const t = useTranslation();
+    const images = "images" in props ? props.images : [{ src: props.src, alt: props.alt }];
+    const onIndexChange = "images" in props ? props.onIndexChange : undefined;
+    const total = images.length;
+    // Clamped here so a stale index after the image set shrinks never renders blank.
+    const requestedIndex = "images" in props ? props.index : 0;
+    const index = Math.min(Math.max(requestedIndex, 0), total - 1);
+    const current = images[index];
+    if (current === undefined)
+        return null;
+    const canNavigate = onIndexChange !== undefined && total > 1;
+    const goTo = (target) => {
+        onIndexChange?.((target + total) % total);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            goTo(index + 1);
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            goTo(index - 1);
+        }
+    };
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), showPosition && (_jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) }))] })), actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "absolute left-2 top-2 flex items-center gap-2", children: actions }))] }));
+}

package/dist/web/primitives/locale-number.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveSafeLocale(locale: string | undefined): string;
+export declare function parseLocaleNumber(raw: string, locale: string): number;

package/dist/web/primitives/locale-number.js

@@ -0,0 +1,54 @@
+// Shared locale handling for the text-based numeric inputs (MoneyInput,
+// NumberInput).
+const FALLBACK_LOCALE = "en-US";
+// An invalid tag makes every Intl constructor and toLocaleString throw a
+// RangeError; without an ErrorBoundary that would take down the page on
+// focus/blur. Canonicalizing once up front keeps all call sites safe.
+export function resolveSafeLocale(locale) {
+    const candidate = locale ?? (typeof navigator !== "undefined" ? navigator.language : undefined) ?? "";
+    try {
+        return Intl.getCanonicalLocales(candidate)[0] ?? FALLBACK_LOCALE;
+    }
+    catch {
+        return FALLBACK_LOCALE;
+    }
+}
+// Separators come from Intl for the locale. A minus is only accepted at the
+// very start: "1-23" is invalid rather than -123, so a typo never turns into
+// a wrong amount. Anything besides digits and separators yields NaN so callers
+// drop the input instead of storing a corrupted number.
+export function parseLocaleNumber(raw, locale) {
+    const { groupSep, decimalSep } = localeSeparators(locale);
+    const trimmed = raw.trim();
+    const negative = trimmed.startsWith("-");
+    const body = negative ? trimmed.slice(1) : trimmed;
+    const [integerPart = "", fractionPart, ...extra] = body.split(decimalSep);
+    if (extra.length > 0)
+        return Number.NaN;
+    if (!isValidIntegerPart(integerPart, fractionPart, groupSep))
+        return Number.NaN;
+    if (fractionPart !== undefined && !/^\d*$/.test(fractionPart))
+        return Number.NaN;
+    const digits = integerPart.replace(/\D/g, "");
+    const n = Number(`${digits === "" ? "0" : digits}${fractionPart ? `.${fractionPart}` : ""}`);
+    return negative ? -n : n;
+}
+function localeSeparators(locale) {
+    const parts = new Intl.NumberFormat(resolveSafeLocale(locale)).formatToParts(1234.5);
+    return {
+        groupSep: parts.find((p) => p.type === "group")?.value ?? ",",
+        decimalSep: parts.find((p) => p.type === "decimal")?.value ?? ".",
+    };
+}
+// Group separators only count in valid positions: "1.5" in de is rejected
+// instead of silently becoming 15. An empty integer part (",5") stays valid
+// when a fraction follows.
+function isValidIntegerPart(integerPart, fractionPart, groupSep) {
+    if (integerPart === "")
+        return fractionPart !== undefined && fractionPart !== "";
+    const groupClass = /\s/.test(groupSep) ? "[\\s\\u00a0\\u202f]" : escapeRegExp(groupSep);
+    return new RegExp(`^(?:\\d+|\\d{1,3}(?:${groupClass}\\d{3})+)$`).test(integerPart);
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/dist/web/primitives/located-timestamp-input.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type LocatedTimestampValue = {
+    readonly at: string;
+    readonly tz: string;
+    readonly utc?: string;
+};
+export type LocatedTimestampInputProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly value: LocatedTimestampValue | "";
+    readonly onChange: (v: {
+        readonly at: string;
+        readonly tz: string;
+    } | undefined) => void;
+    readonly locale?: string;
+    readonly min?: string;
+    readonly max?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+};
+export declare function LocatedTimestampInput({ id, name, value, onChange, locale, min, max, disabled, required, hasError, }: LocatedTimestampInputProps): ReactNode;

package/dist/web/primitives/located-timestamp-input.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../index.js";
+import { ComboboxInput } from "./combobox.js";
+import { TimestampInput } from "./timestamp-input.js";
+import { TZ_OPTIONS } from "./tz-options.js";
+export function LocatedTimestampInput({ id, name, value, onChange, locale, min, max, disabled, required, hasError, }) {
+    const t = useTranslation();
+    const at = value === "" ? "" : value.at;
+    const tz = value === "" ? "" : value.tz;
+    // `at` ist Minuten-Wallclock (z.iso.datetime({local:true}) akzeptiert das);
+    // tz ein IANA-Name. Solange beides leer ist gilt das Feld als leer; sobald
+    // eines gesetzt ist, fließt das Paar — die Vollständigkeit erzwingt die
+    // Required-/Zod-Validierung beim Submit (so bleibt eine halbe Eingabe sichtbar).
+    function emit(nextAt, nextTz) {
+        if (nextAt === "" && nextTz === "") {
+            onChange(undefined);
+            return;
+        }
+        onChange({ at: nextAt, tz: nextTz });
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(TimestampInput, { id: id, name: name, value: at, onChange: (v) => emit(v ?? "", tz), wallClock: true, ...(locale !== undefined && { locale }), ...(min !== undefined && { min }), ...(max !== undefined && { max }), ...(disabled !== undefined && { disabled }), ...(required !== undefined && { required }), ...(hasError !== undefined && { hasError }) }), _jsx("div", { className: "min-w-[12rem]", children: _jsx(ComboboxInput, { id: `${id}-tz`, name: `${name}-tz`, options: TZ_OPTIONS, value: tz, onChange: (v) => emit(at, v), placeholder: t("kumiko.field.timezone"), ...(disabled !== undefined && { disabled }), ...(required !== undefined && { required }), ...(hasError !== undefined && { hasError }) }) })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: t("kumiko.field.locatedTzHint") })] }));
+}

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

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+import type { MetricBandProps, MetricProps } from "../../index.ts";
+export declare const InsideScreenFormColumnContext: import("react").Context<boolean>;
+export declare function DefaultMetricBand({ lead, subtitle, children, testId, }: MetricBandProps): ReactNode;
+export declare function DefaultMetric({ label, value, testId, onPress }: MetricProps): ReactNode;

package/dist/web/primitives/metric.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../lib/cn.js";
+const InsideMetricBandContext = createContext(false);
+// The screen-form column already insets and spaces its children; a band in its
+// header region must not add its own padding on top. DefaultCard resets this
+// to false because a card body is a different inset surface.
+export const InsideScreenFormColumnContext = createContext(false);
+// Column counts follow the board: 2 below md, 3 below lg, 5 from lg.
+export function DefaultMetricBand({ lead, subtitle, children, testId, }) {
+    const insideScreenFormColumn = useContext(InsideScreenFormColumnContext);
+    return (_jsxs("div", { className: cn("flex shrink-0 flex-col gap-3", !insideScreenFormColumn && "px-6 pb-4 pt-3.5"), "data-testid": testId, children: [lead !== undefined && _jsx("div", { "data-kumiko-layout": "metric-band-lead", children: lead }), subtitle !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-x-2 text-[13px] text-foreground-secondary [&_a]:text-primary", children: subtitle })), _jsx(InsideMetricBandContext.Provider, { value: true, children: _jsx("dl", { className: "m-0 grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5", children: children }) })] }));
+}
+export function DefaultMetric({ label, value, testId, onPress }) {
+    const insideBand = useContext(InsideMetricBandContext);
+    const item = (_jsxs("div", { "data-testid": testId, className: cn("flex min-w-0 flex-col gap-0.5", onPress !== undefined && "cursor-pointer"), ...(onPress !== undefined && { onClick: onPress }), children: [_jsx("dt", { className: "text-xs text-muted-foreground", "data-testid": testId !== undefined ? `${testId}-label` : undefined, children: label }), _jsx("dd", { className: "m-0 text-base font-medium tabular-nums text-foreground", "data-testid": testId !== undefined ? `${testId}-value` : undefined, children: onPress !== undefined ? (_jsx("button", { type: "button", className: "text-left hover:underline", children: value })) : (value) })] }));
+    return insideBand ? item : _jsx("dl", { className: "m-0", children: item });
+}

package/dist/web/primitives/modal-shell.d.ts

@@ -0,0 +1,17 @@
+import type { KeyboardEvent, ReactNode } from "react";
+export type ModalShellProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly children: ReactNode;
+    readonly testId?: string;
+    readonly contentClassName?: string;
+    /** Radix wants aria-describedby={undefined} when there is no Description. */
+    readonly noAriaDescription?: boolean;
+    readonly closeLabel?: string;
+    readonly showCloseButton?: boolean;
+    /** Lets the caller take over Radix's initial-focus target — call
+     *  `event.preventDefault()` and focus the desired element yourself. */
+    readonly onOpenAutoFocus?: (event: Event) => void;
+    readonly onContentKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+};
+export declare function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton, onOpenAutoFocus, onContentKeyDown, }: ModalShellProps): ReactNode;

package/dist/web/primitives/modal-shell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shared Radix dialog chrome for confirm Dialog + image Lightbox.
+// Not exported from the package — only an internal building block.
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton = true, onOpenAutoFocus, onContentKeyDown, }) {
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(noAriaDescription && { "aria-describedby": undefined }), ...(onOpenAutoFocus !== undefined && { onOpenAutoFocus }), ...(onContentKeyDown !== undefined && { onKeyDown: onContentKeyDown }), className: cn("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "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", contentClassName), children: [children, showCloseButton && closeLabel !== undefined && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: _jsx(X, { className: "size-4" }) }) }))] })] }) }));
+}

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

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

package/dist/web/primitives/modal.js

@@ -0,0 +1,13 @@
+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 modal overlay — same Radix chrome as DefaultDialog, no
+// footer buttons of its own.
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { BareFormProvider } from "./index.js";
+import { ModalShell } from "./modal-shell.js";
+export function DefaultModal({ open, onOpenChange, title, children, testId, }) {
+    const t = useTranslation();
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, contentClassName: cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg"), children: [_jsx(DialogPrimitive.Title, { className: "text-lg font-semibold leading-none tracking-tight", children: title }), _jsx("div", { onSubmit: (e) => e.stopPropagation(), children: _jsx(BareFormProvider, { children: children }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import { currencyDecimals } from "../../headless/index.ts";
+import { parseLocaleNumber } from "./locale-number.ts";
+export { currencyDecimals, parseLocaleNumber };
+export type MoneyInputProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly value: number | "";
+    readonly onChange: (v: number | undefined) => void;
+    readonly currency: string;
+    readonly locale?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    readonly ariaLabel?: string;
+};
+export declare function MoneyInput({ id, name, value, onChange, currency, locale, disabled, required, hasError, ariaLabel, }: MoneyInputProps): ReactNode;
+export declare function formatMoney(amountMinor: number, currency: string, locale?: string, fractionDigits?: number): string;

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// MoneyInput — type=text mit focus-aware Locale-Format. Canonical-Wert
+// bleiben Minor-Units (Cents) wie auf der Wire; während Focus zeigt das
+// Input einen rohen, editierbaren Decimal-String. Bei Blur formatiert
+// Intl.NumberFormat mit `style: "currency"` — das liefert Currency-
+// Symbol (€/$/¥) UND Tausender-Trenner UND korrekte Decimals in einem
+// Aufruf.
+//
+// Warum nicht type=number: number-Inputs lehnen formatierte Strings
+// ("1.234,56 €") ab — kein Browser akzeptiert Locale-Decimals (Komma)
+// in number-Inputs. inputMode="decimal" gibt mobiles Numpad-Keyboard
+// trotzdem.
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { currencyDecimals, formatMoney as formatMoneyForLocale } from "../../headless/index.js";
+import { cn } from "../lib/cn.js";
+import { parseLocaleNumber, resolveSafeLocale } from "./locale-number.js";
+// Re-exported for backward compat — callers used to import this from here
+// before it moved to headless (shared with RenderField, kumiko-framework#1923).
+export { currencyDecimals, parseLocaleNumber };
+// The border and focus ring live on the wrapper so the currency symbol can be
+// a flex sibling of the input: a symbol of any width ("€", "CHF", "R$") takes
+// its own space instead of overlapping the digits.
+const wrapperClass = "flex h-9 w-full items-center rounded-md border border-input bg-transparent text-sm shadow-sm " +
+    "transition-colors focus-within:ring-1 focus-within:ring-ring";
+const inputClass = "h-full min-w-0 flex-1 bg-transparent px-3 placeholder:text-muted-foreground " +
+    "focus-visible:outline-none disabled:cursor-not-allowed " +
+    // Numerische Inputs rechtsbündig — wie native type=number — damit
+    // Beträge unter Listen-Spalten an den Tausender-Stellen alignen.
+    "text-right tabular-nums";
+export function MoneyInput({ id, name, value, onChange, currency, locale, disabled, required, hasError, ariaLabel, }) {
+    const decimals = currencyDecimals(currency);
+    const factor = 10 ** decimals;
+    const resolvedLocale = resolveSafeLocale(locale);
+    const [focused, setFocused] = useState(false);
+    // Raw-Edit-Buffer während Focus. Sonst würde jeder Tipp-Step durch
+    // Math.round → format-Roundtrip jagen und der Cursor würde springen.
+    const [draft, setDraft] = useState("");
+    const inputRef = useRef(null);
+    const major = value === "" ? null : value / factor;
+    const { symbol, symbolPosition, formatNumber } = useMemo(() => moneyFormatParts(currency, resolvedLocale), [currency, resolvedLocale]);
+    const formatted = value === "" ? "" : formatNumber(value / factor);
+    // Edit-Mode: Decimal-String ohne Tausender-Trenner.
+    const toEditable = (m) => m === null
+        ? ""
+        : m.toLocaleString(resolvedLocale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+            useGrouping: false,
+        });
+    const handleFocus = () => {
+        setDraft(toEditable(major));
+        setFocused(true);
+    };
+    // Select-all-on-focus: deliberate, not just a Playwright accommodation.
+    // Focus always swaps the displayed value from the formatted string
+    // ("1.234,56 €") to the raw editable one ("1234,56"). Measured in a real
+    // browser: on this kind of value swap, the browser collapses the cursor
+    // to the *end* of the new value rather than preserving position — so
+    // without an explicit re-select, typing right after focus appends
+    // instead of replacing. That's what silently corrupted values set via
+    // Playwright's `.fill()` (framework#1856). It also matches standard
+    // money-input UX (immediate overtype on click), and sidesteps mapping a
+    // click position from the formatted view to the editable one, which has
+    // no well-defined equivalent once separators and the currency symbol
+    // are stripped.
+    useLayoutEffect(() => {
+        if (focused)
+            inputRef.current?.select();
+    }, [focused]);
+    const handleBlur = () => {
+        setFocused(false);
+        if (draft.trim() === "") {
+            onChange(undefined);
+            return;
+        }
+        const parsed = parseLocaleNumber(draft, resolvedLocale);
+        if (Number.isNaN(parsed))
+            return;
+        onChange(Math.round(parsed * factor));
+    };
+    const symbolEl = symbol !== "" ? (_jsx("span", { id: `${id}-currency`, "data-testid": `${id}-currency`, className: cn("shrink-0 select-none text-muted-foreground", symbolPosition === "prefix" ? "pl-3" : "pr-3"), children: symbol })) : null;
+    return (_jsxs("div", { className: cn(wrapperClass, hasError === true && "border-destructive focus-within:ring-destructive", disabled === true && "cursor-not-allowed opacity-50"), children: [symbolPosition === "prefix" && symbolEl, _jsx("input", { ref: inputRef, id: id, name: name, type: "text", inputMode: "decimal", autoComplete: "off", disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-label": ariaLabel, "aria-describedby": symbol !== "" ? `${id}-currency` : undefined, value: focused ? draft : formatted, onFocus: handleFocus, onBlur: handleBlur, onChange: (e) => setDraft(e.target.value), className: cn(inputClass, symbolPosition === "prefix" ? "pl-2" : "pr-2") }), symbolPosition === "suffix" && symbolEl] }));
+}
+// Shared with defaultCellRender (index.tsx) so both formatting paths stay
+// identical. Resolves the browser locale here; headless stays navigator-free.
+export function formatMoney(amountMinor, currency, locale, fractionDigits) {
+    return formatMoneyForLocale(amountMinor, currency, resolveSafeLocale(locale), fractionDigits);
+}
+// The currency symbol is rendered as a separate adornment, so the field
+// value shows only the grouped number. Position follows the locale's pattern.
+function moneyFormatParts(currency, locale) {
+    if (!/^[A-Za-z]{3}$/.test(currency)) {
+        return { symbol: "", symbolPosition: "suffix", formatNumber: String };
+    }
+    const decimals = currencyDecimals(currency);
+    try {
+        const formatter = new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        });
+        const sample = formatter.formatToParts(1);
+        const symbolIndex = sample.findIndex((p) => p.type === "currency");
+        const integerIndex = sample.findIndex((p) => p.type === "integer");
+        return {
+            symbol: sample[symbolIndex]?.value ?? currency,
+            symbolPosition: symbolIndex !== -1 && symbolIndex < integerIndex ? "prefix" : "suffix",
+            formatNumber: (major) => formatter
+                .formatToParts(major)
+                .filter((p) => p.type !== "currency")
+                .map((p) => p.value)
+                .join("")
+                .trim(),
+        };
+    }
+    catch {
+        // An invalid locale tag makes Intl throw a RangeError; without an
+        // ErrorBoundary that would take down the page over a display adornment.
+        return { symbol: "", symbolPosition: "suffix", formatNumber: String };
+    }
+}

package/dist/web/primitives/narrow-pinned-footer.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export declare function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, unsavedStatus, testId, keyboardInset, }: {
+    readonly nodes: readonly ReactNode[];
+    readonly overflowLabel: string;
+    readonly unsavedCount: number | undefined;
+    readonly unsavedStatus: string | undefined;
+    readonly testId: string | undefined;
+    readonly keyboardInset: number;
+}): ReactNode;