@cosmicdrift/kumiko-renderer 0.388.0 → 0.390.0

package/dist/web/primitives/input-choice-kinds.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "../ui/checkbox.js";
+import { Switch } from "../ui/switch.js";
+import { ComboboxInput } from "./combobox.js";
+import { RadioListSelect, SegmentedSelect, withInlineDisabledHint, withoutSegmentedSelectPlaceholder, } from "./field.js";
+import { stateProps } from "./input-optional-props.js";
+import { resolveSelectPresentation } from "./input-select-presentation.js";
+// layout="inline" (checkbox lists like MultiSelectCheckboxes, the
+// BooleanField widget) keeps the checkbox optics; the standard form
+// field (render-field.tsx, layout="stacked") gets the switch.
+export const renderBooleanKind = (props, { booleanLayout }) => booleanLayout === "inline" ? (_jsx(Checkbox, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true) })) : (_jsx(Switch, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true), className: "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40" }));
+function normalizeSelectOptions(options) {
+    return options.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
+}
+// Visual consolidation: all selects go through ComboboxInput
+// (cmdk + Radix popover). Before, there were two paths: Radix
+// Select for `kind:"select"` and cmdk for `kind:"combobox"`. Three
+// visually different variants (single select, combobox single, combobox
+// multi) became unmanageable. With the merge the combobox is the only
+// implementation: the search input is present even for 4-item status
+// selects, a deliberately accepted UX consequence for style consistency.
+export const renderSelectKind = (props) => {
+    const comboOptions = normalizeSelectOptions(props.options);
+    // The radio group can't render the unselected placeholder as its own
+    // segment, so it counts and renders on the real options only — the
+    // dropdown below keeps comboOptions (placeholder included) since it
+    // has a genuine "nothing selected" row.
+    // An author who asks for `display: "radio"` explicitly declared the ""
+    // option as a real choice (e.g. "Any"), so it stays a segment.
+    const radioGroupOptions = props.display === "radio" ? comboOptions : withoutSegmentedSelectPlaceholder(comboOptions);
+    const presentation = resolveSelectPresentation(props, radioGroupOptions);
+    if (presentation === "radioList" && radioGroupOptions.length > 0) {
+        return (_jsx(RadioListSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.radioVariant !== undefined && { variant: props.radioVariant }), ...stateProps(props) }));
+    }
+    if (presentation === "segmented" && radioGroupOptions.length > 0) {
+        return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...stateProps(props) }));
+    }
+    // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
+    return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: comboOptions.map(withInlineDisabledHint), ...stateProps(props) }));
+};
+function comboboxBaseProps(props) {
+    return {
+        id: props.id,
+        name: props.name,
+        options: props.options,
+        ...stateProps(props),
+        ...(props.placeholder !== undefined && { placeholder: props.placeholder }),
+        ...(props.searchPlaceholder !== undefined && {
+            searchPlaceholder: props.searchPlaceholder,
+        }),
+        ...(props.emptyText !== undefined && { emptyText: props.emptyText }),
+        ...(props.onSearchChange !== undefined && { onSearchChange: props.onSearchChange }),
+        ...(props.loading !== undefined && { loading: props.loading }),
+        ...(props.onCreate !== undefined && { onCreate: props.onCreate }),
+        ...(props.createLabel !== undefined && { createLabel: props.createLabel }),
+    };
+}
+// Discriminated union per `multiple`; we split
+// TS-side into two branches so ComboboxInput's single/multi variants
+// render with the right types.
+export const renderComboboxKind = (props) => {
+    const baseProps = comboboxBaseProps(props);
+    if (props.multiple === true) {
+        return _jsx(ComboboxInput, { ...baseProps, multiple: true, value: props.value, onChange: props.onChange });
+    }
+    return _jsx(ComboboxInput, { ...baseProps, value: props.value, onChange: props.onChange });
+};

package/dist/web/primitives/input-file-kinds.d.ts

@@ -0,0 +1,3 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderFileKind: KindRenderer<"file" | "image">;
+export declare const renderFilesDropzoneKind: KindRenderer<"files-dropzone">;

package/dist/web/primitives/input-file-kinds.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileUploadInput } from "./file-upload.js";
+import { FilesDropzoneInput } from "./files-dropzone.js";
+import { uploadTargetProps } from "./input-optional-props.js";
+export const renderFileKind = (props) => (_jsx(FileUploadInput, { kind: props.kind, id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...uploadTargetProps(props), ...(props.imageVariant !== undefined && { imageVariant: props.imageVariant }), ...(props.capture !== undefined && { capture: props.capture }), ...(props.directory !== undefined && { directory: props.directory }), ...(props.onFilesPicked !== undefined && { onFilesPicked: props.onFilesPicked }), ...(props.pickLabel !== undefined && { pickLabel: props.pickLabel }), ...(props.testId !== undefined && { testId: props.testId }) }));
+export const renderFilesDropzoneKind = (props) => (_jsx(FilesDropzoneInput, { id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.maxSize !== undefined && { maxSize: props.maxSize }), ...(props.maxCount !== undefined && { maxCount: props.maxCount }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...uploadTargetProps(props), ...(props.testId !== undefined && { testId: props.testId }) }));

package/dist/web/primitives/input-number-kinds.d.ts

@@ -0,0 +1,4 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderNumberKind: KindRenderer<"number">;
+export declare const renderRangeKind: KindRenderer<"range">;
+export declare const renderMoneyKind: KindRenderer<"money">;

package/dist/web/primitives/input-number-kinds.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { FIELD_ICON_CLASS, fieldIconFor, unitSuffixId, withInputAddons } from "./field.js";
+import { stateProps } from "./input-optional-props.js";
+import { MoneyInput } from "./money-input.js";
+import { NumberInput } from "./number-input.js";
+export const renderNumberKind = (props) => {
+    const NumberIcon = fieldIconFor(props.icon);
+    // Icon, input and unit share this one box, and the grid cell sizes the
+    // box rather than the bare input: anchored to a wider wrapper, the unit
+    // would sit next to a narrower input instead of inside it.
+    const numberField = (_jsxs("div", { "data-slot": "number-field", className: "relative", children: [NumberIcon !== undefined && _jsx(NumberIcon, { "aria-hidden": "true", className: FIELD_ICON_CLASS }), _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(NumberIcon !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) }), props.unit !== undefined && (_jsx("span", { id: unitSuffixId(props.id), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: props.unit }))] }));
+    return withInputAddons(props, numberField);
+};
+export const renderRangeKind = (props, { common }) => (_jsx("input", { type: "range", ...common, min: props.min, max: props.max, step: props.step ?? 1, value: props.value, onChange: (e) => props.onChange(Number(e.target.value)), className: "w-full accent-primary" }));
+export const renderMoneyKind = (props) => (_jsx(MoneyInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, currency: props.currency ?? "EUR", ...(props.locale !== undefined && { locale: props.locale }), ...stateProps(props) }));

package/dist/web/primitives/input-optional-props.d.ts

@@ -0,0 +1,20 @@
+type StateInput = {
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+};
+type LocaleBoundsInput = {
+    readonly locale?: string;
+    readonly min?: string;
+    readonly max?: string;
+};
+type UploadTargetInput = {
+    readonly entityType?: string;
+    readonly uploadActionForm?: string;
+    readonly entityId?: string;
+    readonly fieldName?: string;
+};
+export declare function stateProps({ disabled, required, hasError }: StateInput): StateInput;
+export declare function localeBoundsProps({ locale, min, max }: LocaleBoundsInput): LocaleBoundsInput;
+export declare function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }: UploadTargetInput): UploadTargetInput;
+export {};

package/dist/web/primitives/input-optional-props.js

@@ -0,0 +1,24 @@
+// The inputs below take optional props that must be absent, not `undefined`,
+// so a primitive's own defaults still apply.
+export function stateProps({ disabled, required, hasError }) {
+    return {
+        ...(disabled !== undefined && { disabled }),
+        ...(required !== undefined && { required }),
+        ...(hasError !== undefined && { hasError }),
+    };
+}
+export function localeBoundsProps({ locale, min, max }) {
+    return {
+        ...(locale !== undefined && { locale }),
+        ...(min !== undefined && { min }),
+        ...(max !== undefined && { max }),
+    };
+}
+export function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }) {
+    return {
+        ...(entityType !== undefined && { entityType }),
+        ...(uploadActionForm !== undefined && { uploadActionForm }),
+        ...(entityId !== undefined && { entityId }),
+        ...(fieldName !== undefined && { fieldName }),
+    };
+}

package/dist/web/primitives/input-select-presentation.d.ts

@@ -0,0 +1,13 @@
+import { defaultSelectPresentation } from "./field.tsx";
+type SelectPresentation = ReturnType<typeof defaultSelectPresentation>;
+type PresentationOption = {
+    readonly label: string;
+    readonly description?: string;
+    readonly group?: string;
+};
+type PresentationRequest = {
+    readonly radioVariant?: "list" | "card";
+    readonly display?: "radio" | "dropdown";
+};
+export declare function resolveSelectPresentation(request: PresentationRequest, options: readonly PresentationOption[]): SelectPresentation;
+export {};

package/dist/web/primitives/input-select-presentation.js

@@ -0,0 +1,19 @@
+import { defaultSelectPresentation } from "./field.js";
+import { hasDescriptionOrGroup } from "./option-groups.js";
+// An explicit `display` is an author decision and outranks the heuristic in
+// both directions — a requested radio group renders as one even when the
+// options outnumber the heuristic's threshold.
+function requestedSelectPresentation({ radioVariant, display }, options) {
+    if (radioVariant === "card")
+        return "radioList";
+    if (display === "radio")
+        return "segmented";
+    if (display === "dropdown")
+        return "dropdown";
+    return defaultSelectPresentation(options);
+}
+// A segmented control has no room for a description line or group headings.
+export function resolveSelectPresentation(request, options) {
+    const requested = requestedSelectPresentation(request, options);
+    return requested === "segmented" && hasDescriptionOrGroup(options) ? "radioList" : requested;
+}

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

@@ -0,0 +1,22 @@
+import type { ContextType, ReactNode } from "react";
+import type { InputProps } from "../../index.ts";
+import type { FieldDescriptionContext, FieldLayoutContext } from "./contexts.tsx";
+import type { useFocusOnMount } from "./use-focus-on-mount.ts";
+export type InputKind = InputProps["kind"];
+export type PropsOfKind<K extends InputKind> = InputProps extends infer P ? P extends {
+    readonly kind: infer PK;
+} ? K extends PK ? P : never : never : never;
+export declare function commonInputAttrs(props: InputProps, describedBy: ContextType<typeof FieldDescriptionContext>): {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled: boolean | undefined;
+    readonly "aria-describedby": string | undefined;
+    readonly "aria-required": boolean | undefined;
+    readonly "aria-invalid": true | undefined;
+};
+export type DefaultInputShared = {
+    readonly common: ReturnType<typeof commonInputAttrs>;
+    readonly textInputRef: ReturnType<typeof useFocusOnMount>;
+    readonly booleanLayout: ContextType<typeof FieldLayoutContext>;
+};
+export type KindRenderer<K extends InputKind> = (props: PropsOfKind<K>, shared: DefaultInputShared) => ReactNode;

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

@@ -0,0 +1,10 @@
+export function commonInputAttrs(props, describedBy) {
+    return {
+        id: props.id,
+        name: props.name,
+        disabled: props.disabled,
+        "aria-describedby": describedBy,
+        "aria-required": props.required,
+        "aria-invalid": props.hasError === true ? true : undefined,
+    };
+}

package/dist/web/primitives/input-temporal-kinds.d.ts

@@ -0,0 +1,5 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderDateKind: KindRenderer<"date">;
+export declare const renderTimestampKind: KindRenderer<"timestamp">;
+export declare const renderLocatedTimestampKind: KindRenderer<"locatedTimestamp">;
+export declare const renderTzKind: KindRenderer<"tz">;

package/dist/web/primitives/input-temporal-kinds.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateInput } from "./date-input.js";
+import { localeBoundsProps, stateProps } from "./input-optional-props.js";
+import { LocatedTimestampInput } from "./located-timestamp-input.js";
+import { TimestampInput } from "./timestamp-input.js";
+import { TzInput } from "./tz-input.js";
+export const renderDateKind = (props) => (_jsx(DateInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderTimestampKind = (props) => (_jsx(TimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.wallClock !== undefined && { wallClock: props.wallClock }), ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderLocatedTimestampKind = (props) => (_jsx(LocatedTimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderTzKind = (props) => (_jsx(TzInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...stateProps(props) }));

package/dist/web/primitives/input-text-kinds.d.ts

@@ -0,0 +1,7 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderTextKind: KindRenderer<"text">;
+export declare const renderCodeKind: KindRenderer<"code">;
+export declare const renderEmailKind: KindRenderer<"email">;
+export declare const renderMonthKind: KindRenderer<"month">;
+export declare const renderPasswordKind: KindRenderer<"password">;
+export declare const renderTextareaKind: KindRenderer<"textarea">;

package/dist/web/primitives/input-text-kinds.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Input as UiInput } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { CodeInput } from "./code-input.js";
+import { fieldIconFor, textareaMinHeight, withFieldIcon, withInputAddons, withTrailingAction, } from "./field.js";
+export const renderTextKind = (props, { common, textInputRef }) => withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+export const renderCodeKind = (props) => _jsx(CodeInput, { ...props });
+export const renderEmailKind = (props, { common }) => (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
+export const renderMonthKind = (props, { common }) => (_jsx(UiInput, { type: "month", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value) }));
+export const renderPasswordKind = (props, { common }) => withTrailingAction(props.trailingAction, _jsx(UiInput, { type: "password", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "current-password", className: props.trailingAction !== undefined ? "pr-9" : undefined }), true);
+function textareaShortcutProps({ onKeyDown, onSubmitShortcut }) {
+    if (onSubmitShortcut === undefined && onKeyDown === undefined)
+        return {};
+    return {
+        ...(onSubmitShortcut !== undefined && {
+            "aria-keyshortcuts": "Control+Enter Meta+Enter",
+        }),
+        onKeyDown: (e) => {
+            onKeyDown?.(e);
+            // Lets a caller that already handles Ctrl/Cmd+Enter (e.g. an
+            // "Enter sends" handler that ignores only Shift) opt out of the
+            // shortcut instead of submitting twice.
+            if (e.defaultPrevented)
+                return;
+            if (onSubmitShortcut === undefined || e.key !== "Enter" || !(e.metaKey || e.ctrlKey))
+                return;
+            e.preventDefault();
+            onSubmitShortcut();
+        },
+    };
+}
+export const renderTextareaKind = (props, { common }) => (_jsx(Textarea, { ...common, ...props.dataAttributes, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), rows: props.rows ?? 4, className: "resize-y", ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.rows !== undefined && { style: textareaMinHeight(props.rows) }), ...textareaShortcutProps(props) }));

package/dist/web/primitives/input.js

@@ -1,171 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { cn } from "../lib/cn.js";
-import { Checkbox } from "../ui/checkbox.js";
-import { Input as UiInput } from "../ui/input.js";
-import { Switch } from "../ui/switch.js";
-import { Textarea } from "../ui/textarea.js";
-import { CodeInput } from "./code-input.js";
-import { ComboboxInput } from "./combobox.js";
-import { DateInput } from "./date-input.js";
-import { FileUploadInput } from "./file-upload.js";
-import { FilesDropzoneInput } from "./files-dropzone.js";
-import { LocatedTimestampInput } from "./located-timestamp-input.js";
-import { MoneyInput } from "./money-input.js";
-import { NumberInput } from "./number-input.js";
-import { hasDescriptionOrGroup } from "./option-groups.js";
-import { TimestampInput } from "./timestamp-input.js";
-import { TzInput } from "./tz-input.js";
-import { useFocusOnMount } from "./use-focus-on-mount.js";
 import "../react-css-custom-properties.js";
 import { FieldDescriptionContext, FieldLayoutContext } from "./contexts.js";
-import { defaultSelectPresentation, FIELD_ICON_CLASS, fieldIconFor, RadioListSelect, SegmentedSelect, textareaMinHeight, unitSuffixId, withFieldIcon, withInlineDisabledHint, withInputAddons, withoutSegmentedSelectPlaceholder, withTrailingAction, } from "./field.js";
+import { renderBooleanKind, renderComboboxKind, renderSelectKind } from "./input-choice-kinds.js";
+import { renderFileKind, renderFilesDropzoneKind } from "./input-file-kinds.js";
+import { renderMoneyKind, renderNumberKind, renderRangeKind } from "./input-number-kinds.js";
+import { commonInputAttrs, } from "./input-shared.js";
+import { renderDateKind, renderLocatedTimestampKind, renderTimestampKind, renderTzKind, } from "./input-temporal-kinds.js";
+import { renderCodeKind, renderEmailKind, renderMonthKind, renderPasswordKind, renderTextareaKind, renderTextKind, } from "./input-text-kinds.js";
+import { useFocusOnMount } from "./use-focus-on-mount.js";
+const KIND_RENDERERS = {
+    text: renderTextKind,
+    code: renderCodeKind,
+    email: renderEmailKind,
+    month: renderMonthKind,
+    password: renderPasswordKind,
+    number: renderNumberKind,
+    range: renderRangeKind,
+    boolean: renderBooleanKind,
+    file: renderFileKind,
+    image: renderFileKind,
+    "files-dropzone": renderFilesDropzoneKind,
+    date: renderDateKind,
+    select: renderSelectKind,
+    combobox: renderComboboxKind,
+    money: renderMoneyKind,
+    timestamp: renderTimestampKind,
+    locatedTimestamp: renderLocatedTimestampKind,
+    tz: renderTzKind,
+    textarea: renderTextareaKind,
+};
+function renderKind(kind, props, shared) {
+    return KIND_RENDERERS[kind](props, shared);
+}
 export function DefaultInput(props) {
     // Vendored ui/input + ui/checkbox style errors via `aria-invalid`
     // themselves, no manual border-destructive needed anymore.
     const booleanLayout = useContext(FieldLayoutContext);
     const describedBy = useContext(FieldDescriptionContext);
     const textInputRef = useFocusOnMount(props.kind === "text" ? props.autoFocus : undefined);
-    const common = {
-        id: props.id,
-        name: props.name,
-        disabled: props.disabled,
-        "aria-describedby": describedBy,
-        "aria-required": props.required,
-        "aria-invalid": props.hasError === true ? true : undefined,
-    };
-    switch (props.kind) {
-        case "text":
-            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
-        case "code":
-            return _jsx(CodeInput, { ...props });
-        case "email":
-            return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
-        case "month":
-            return (_jsx(UiInput, { type: "month", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value) }));
-        case "password":
-            return withTrailingAction(props.trailingAction, _jsx(UiInput, { type: "password", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "current-password", className: props.trailingAction !== undefined ? "pr-9" : undefined }), true);
-        case "number": {
-            const NumberIcon = fieldIconFor(props.icon);
-            // Icon, input and unit share this one box, and the grid cell sizes the
-            // box rather than the bare input: anchored to a wider wrapper, the unit
-            // would sit next to a narrower input instead of inside it.
-            const numberField = (_jsxs("div", { "data-slot": "number-field", className: "relative", children: [NumberIcon !== undefined && (_jsx(NumberIcon, { "aria-hidden": "true", className: FIELD_ICON_CLASS })), _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(NumberIcon !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) }), props.unit !== undefined && (_jsx("span", { id: unitSuffixId(props.id), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: props.unit }))] }));
-            return withInputAddons(props, numberField);
-        }
-        case "range":
-            return (_jsx("input", { type: "range", ...common, min: props.min, max: props.max, step: props.step ?? 1, value: props.value, onChange: (e) => props.onChange(Number(e.target.value)), className: "w-full accent-primary" }));
-        case "boolean":
-            // layout="inline" (checkbox lists like MultiSelectCheckboxes, the
-            // BooleanField widget) keeps the checkbox optics; the standard form
-            // field (render-field.tsx, layout="stacked") gets the switch.
-            return booleanLayout === "inline" ? (_jsx(Checkbox, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true) })) : (_jsx(Switch, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true), className: "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40" }));
-        case "file":
-        case "image":
-            return (_jsx(FileUploadInput, { kind: props.kind, id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.entityType !== undefined && { entityType: props.entityType }), ...(props.uploadActionForm !== undefined && {
-                    uploadActionForm: props.uploadActionForm,
-                }), ...(props.entityId !== undefined && { entityId: props.entityId }), ...(props.fieldName !== undefined && { fieldName: props.fieldName }), ...(props.imageVariant !== undefined && { imageVariant: props.imageVariant }), ...(props.capture !== undefined && { capture: props.capture }), ...(props.directory !== undefined && { directory: props.directory }), ...(props.onFilesPicked !== undefined && { onFilesPicked: props.onFilesPicked }), ...(props.pickLabel !== undefined && { pickLabel: props.pickLabel }), ...(props.testId !== undefined && { testId: props.testId }) }));
-        case "files-dropzone":
-            return (_jsx(FilesDropzoneInput, { id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.maxSize !== undefined && { maxSize: props.maxSize }), ...(props.maxCount !== undefined && { maxCount: props.maxCount }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.entityType !== undefined && { entityType: props.entityType }), ...(props.uploadActionForm !== undefined && {
-                    uploadActionForm: props.uploadActionForm,
-                }), ...(props.entityId !== undefined && { entityId: props.entityId }), ...(props.fieldName !== undefined && { fieldName: props.fieldName }), ...(props.testId !== undefined && { testId: props.testId }) }));
-        case "date":
-            return (_jsx(DateInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.locale !== undefined && { locale: props.locale }), ...(props.min !== undefined && { min: props.min }), ...(props.max !== undefined && { max: props.max }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "select": {
-            // Visual consolidation: all selects go through ComboboxInput
-            // (cmdk + Radix popover). Before, there were two paths: Radix
-            // Select for `kind:"select"` and cmdk for `kind:"combobox"`. Three
-            // visually different variants (single select, combobox single, combobox
-            // multi) became unmanageable. With the merge the combobox is the only
-            // implementation: the search input is present even for 4-item status
-            // selects, a deliberately accepted UX consequence for style consistency.
-            const comboOptions = props.options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
-            // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
-            const dropdownOptions = comboOptions.map(withInlineDisabledHint);
-            // The radio group can't render the unselected placeholder as its own
-            // segment, so it counts and renders on the real options only — the
-            // dropdown below keeps comboOptions (placeholder included) since it
-            // has a genuine "nothing selected" row.
-            // An author who asks for `display: "radio"` explicitly declared the ""
-            // option as a real choice (e.g. "Any"), so it stays a segment.
-            const radioGroupOptions = props.display === "radio" ? comboOptions : withoutSegmentedSelectPlaceholder(comboOptions);
-            // An explicit `display` is an author decision and outranks the
-            // heuristic in both directions — a requested radio group renders as
-            // one even when the options outnumber the heuristic's threshold.
-            const requestedPresentation = props.radioVariant === "card"
-                ? "radioList"
-                : props.display === "radio"
-                    ? "segmented"
-                    : props.display === "dropdown"
-                        ? "dropdown"
-                        : defaultSelectPresentation(radioGroupOptions);
-            // A segmented control has no room for a description line or group headings.
-            const presentation = requestedPresentation === "segmented" && hasDescriptionOrGroup(radioGroupOptions)
-                ? "radioList"
-                : requestedPresentation;
-            if (presentation === "radioList" && radioGroupOptions.length > 0) {
-                return (_jsx(RadioListSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.radioVariant !== undefined && { variant: props.radioVariant }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-            }
-            if (presentation === "segmented" && radioGroupOptions.length > 0) {
-                return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-            }
-            return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: dropdownOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        }
-        case "combobox": {
-            // Discriminated union per `multiple`; we split
-            // TS-side into two branches so ComboboxInput's single/multi variants
-            // render with the right types.
-            const baseProps = {
-                id: props.id,
-                name: props.name,
-                options: props.options,
-                ...(props.disabled !== undefined && { disabled: props.disabled }),
-                ...(props.required !== undefined && { required: props.required }),
-                ...(props.hasError !== undefined && { hasError: props.hasError }),
-                ...(props.placeholder !== undefined && { placeholder: props.placeholder }),
-                ...(props.searchPlaceholder !== undefined && {
-                    searchPlaceholder: props.searchPlaceholder,
-                }),
-                ...(props.emptyText !== undefined && { emptyText: props.emptyText }),
-                ...(props.onSearchChange !== undefined && { onSearchChange: props.onSearchChange }),
-                ...(props.loading !== undefined && { loading: props.loading }),
-                ...(props.onCreate !== undefined && { onCreate: props.onCreate }),
-                ...(props.createLabel !== undefined && { createLabel: props.createLabel }),
-            };
-            if (props.multiple === true) {
-                return (_jsx(ComboboxInput, { ...baseProps, multiple: true, value: props.value, onChange: props.onChange }));
-            }
-            return _jsx(ComboboxInput, { ...baseProps, value: props.value, onChange: props.onChange });
-        }
-        case "money":
-            return (_jsx(MoneyInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, currency: props.currency ?? "EUR", ...(props.locale !== undefined && { locale: props.locale }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "timestamp":
-            return (_jsx(TimestampInput, { id: props.id, name: props.name, 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 }) }));
-        case "locatedTimestamp":
-            return (_jsx(LocatedTimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.locale !== undefined && { locale: props.locale }), ...(props.min !== undefined && { min: props.min }), ...(props.max !== undefined && { max: props.max }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "textarea": {
-            const rows = props.rows;
-            const onSubmitShortcut = props.onSubmitShortcut;
-            const onKeyDown = props.onKeyDown;
-            return (_jsx(Textarea, { ...common, ...props.dataAttributes, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), rows: rows ?? 4, className: "resize-y", ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(rows !== undefined && { style: textareaMinHeight(rows) }), ...((onSubmitShortcut !== undefined || onKeyDown !== undefined) && {
-                    ...(onSubmitShortcut !== undefined && {
-                        "aria-keyshortcuts": "Control+Enter Meta+Enter",
-                    }),
-                    onKeyDown: (e) => {
-                        onKeyDown?.(e);
-                        // Lets a caller that already handles Ctrl/Cmd+Enter (e.g. an
-                        // "Enter sends" handler that ignores only Shift) opt out of the
-                        // shortcut instead of submitting twice.
-                        if (e.defaultPrevented)
-                            return;
-                        if (onSubmitShortcut === undefined || e.key !== "Enter" || !(e.metaKey || e.ctrlKey))
-                            return;
-                        e.preventDefault();
-                        onSubmitShortcut();
-                    },
-                }) }));
-        }
-        case "tz":
-            return (_jsx(TzInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-    }
+    const common = commonInputAttrs(props, describedBy);
+    if (!Object.hasOwn(KIND_RENDERERS, props.kind))
+        return undefined;
+    return renderKind(props.kind, props, { common, textInputRef, booleanLayout });
 }

package/dist/web/primitives/number-range-facet.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { DataTableRangeBound, DataTableRangeFacet } from "../../data-table-aggregate-types.ts";
+/** "From/to" bounds of a number, decimal, money or bigInt field. */
+export declare function NumberRangeFacetFilter({ facet, onChange, }: {
+    readonly facet: DataTableRangeFacet;
+    readonly onChange: (field: string, bound: DataTableRangeBound, value: string) => void;
+}): ReactNode;

package/dist/web/primitives/number-range-facet.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useOptionalTranslation } from "../../index.js";
+const INPUT_CLASS = "h-9 w-24 rounded-md border border-input bg-transparent px-2 text-sm tabular-nums shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 max-md:min-h-11";
+// A keystroke must not refetch the list, so a bound commits on blur or Enter;
+// a value changed from outside (reset, back navigation) replaces the draft.
+function RangeBoundInput({ facet, bound, label, onCommit, }) {
+    const committed = facet[bound];
+    const [draft, setDraft] = useState(committed);
+    const [seen, setSeen] = useState(committed);
+    if (seen !== committed) {
+        setSeen(committed);
+        setDraft(committed);
+    }
+    const commit = () => {
+        const trimmed = draft.trim();
+        if (trimmed !== "" && !Number.isFinite(Number(trimmed))) {
+            setDraft(committed);
+            return;
+        }
+        if (trimmed !== committed)
+            onCommit(facet.field, bound, trimmed);
+    };
+    return (_jsx("input", { type: "number", inputMode: "decimal", step: "any", className: INPUT_CLASS, value: draft, placeholder: label, "aria-label": `${facet.label} ${label}`, "data-testid": `facet-range-${facet.field}-${bound}`, onChange: (event) => setDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === "Enter")
+                commit();
+        } }));
+}
+/** "From/to" bounds of a number, decimal, money or bigInt field. */
+export function NumberRangeFacetFilter({ facet, onChange, }) {
+    const translate = useOptionalTranslation();
+    return (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `facet-range-${facet.field}`, children: [_jsx("span", { className: "text-sm text-muted-foreground", children: facet.label }), _jsx(RangeBoundInput, { facet: facet, bound: "min", label: translate?.("kumiko.list.range.min") ?? "From", onCommit: onChange }), _jsx("span", { className: "text-sm text-muted-foreground", children: "\u2013" }), _jsx(RangeBoundInput, { facet: facet, bound: "max", label: translate?.("kumiko.list.range.max") ?? "To", onCommit: onChange }), facet.unit !== undefined && (_jsx("span", { className: "text-sm text-muted-foreground", children: facet.unit }))] }));
+}

package/dist/web/widgets/bounded-load-cache.d.ts

@@ -1 +1,5 @@
-export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void, shouldKeep?: (value: T) => boolean): (key: string, load: () => Promise<T>) => Promise<T>;
+export type BoundedLoadCache<T> = {
+    readonly load: (key: string, load: () => Promise<T>) => Promise<T>;
+    readonly retain: (key: string) => () => void;
+};
+export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void, shouldKeep?: (value: T) => boolean): BoundedLoadCache<T>;