@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.1

package/dist/components/render-field-reference.js

@@ -0,0 +1,103 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SYSTEM_REFERENCE_LABELS, UNRESOLVED_REFERENCE_LABEL_KEYS, } from "@cosmicdrift/kumiko-framework/ui-types";
+import { Fragment } from "react";
+import { useReferenceLinkResolver } from "../app/reference-link.js";
+import { EMPTY_VALUE_PLACEHOLDER } from "../headless/index.js";
+import { REFERENCE_COMBOBOX_LIMIT } from "../hooks/reference-limits.js";
+import { useQuery } from "../hooks/use-query.js";
+import { isCompleteRowPage, referenceOptionSource } from "../hooks/use-reference-lookup.js";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { ReferenceCreateDialog } from "./reference-create-dialog.js";
+import { stringArrayOf } from "./render-field-values.js";
+import { useReferenceInputState } from "./use-reference-input-state.js";
+// ReferenceInput renders a searchable combobox populated by a live query for
+// the referenced entity. With the default limit of 200, larger datasets miss
+// the tail in the dropdown; a server-side debounced search query comes later.
+//   - Display = row[refLabelField], default labelField "id".
+//   - During loading, the dropdown is empty and the field is disabled.
+//   - In multiple mode (field.refMultiple), value is a UUID array and the
+//     combobox renders tags.
+//
+// Storage: the UI value is a UUID (row.id), or a UUID array in multiple mode.
+// Server schema: z.uuid() or z.array(z.uuid()).
+// REFERENCE_COMBOBOX_LIMIT is centralized in hooks/reference-limits.ts
+// (see there for the rationale behind the default values).
+export function ReferenceInput({ field, id, hasError, onChange, Input, featureName, }) {
+    const { Banner } = usePrimitives();
+    const t = useTranslation();
+    const state = useReferenceInputState(field, featureName, onChange);
+    const { options, createTarget } = state;
+    // Single mode uses a String/null value; multiple mode uses an array. Coerce
+    // to the shape expected by the combobox so storage drift (for example, an
+    // old String from the server where an array is now expected) cannot crash it.
+    const baseInputProps = {
+        id,
+        name: field.field,
+        // Disable the input during the initial load; subsequent loads show a
+        // loading indicator in the popover.
+        disabled: field.readOnly || (state.loading && options.length === 0),
+        required: field.required,
+        hasError,
+        options,
+        onSearchChange: state.handleSearchChange,
+        loading: state.loading,
+        ...(createTarget !== undefined && {
+            onCreate: () => state.setCreateOpen(true),
+            createLabel: t("kumiko.actions.create"),
+        }),
+    };
+    const createDialog = (_jsxs(_Fragment, { children: [createTarget !== undefined && (_jsx(ReferenceCreateDialog, { open: state.createOpen, onClose: () => state.setCreateOpen(false), onCreated: state.handleCreated, featureName: state.refFeature, screen: createTarget.screen, entity: createTarget.entity })), state.createdWithoutIdWarning && (_jsx(Banner, { variant: "error", children: t("kumiko.field.reference-created-no-id") }))] }));
+    if (state.isMultiple) {
+        const arrayValue = stringArrayOf(field.value);
+        return (_jsxs(_Fragment, { children: [_jsx(Input, { kind: "combobox", ...baseInputProps, multiple: true, value: arrayValue, onChange: (v) => onChange(v) }), createDialog] }));
+    }
+    const stringValue = field.value === undefined || field.value === null ? "" : String(field.value);
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { kind: "combobox", ...baseInputProps, value: stringValue, onChange: (v) => onChange(v === "" ? null : v) }), createDialog] }));
+}
+// Read-only text for `type: "reference"` — resolves the referenced row's
+// label via the same lookup query as ReferenceInput's combobox, but shows
+// plain text instead of mounting an (unusable, disabled) combobox.
+export function ReadOnlyReferenceValue({ field, featureName, }) {
+    const { Text, Link } = usePrimitives();
+    const t = useTranslation();
+    const resolveReferenceLink = useReferenceLinkResolver();
+    const refEntity = field.refEntity ?? "";
+    const refFeature = field.refFeature ?? featureName;
+    const isMultiple = field.refMultiple === true;
+    const { queryQn, labelKey } = referenceOptionSource(field, refFeature, refEntity);
+    const queryResult = useQuery(queryQn, {
+        limit: REFERENCE_COMBOBOX_LIMIT,
+    });
+    const ids = isMultiple
+        ? stringArrayOf(field.value)
+        : typeof field.value === "string" && field.value !== ""
+            ? [field.value]
+            : [];
+    if (ids.length === 0)
+        return _jsx(Text, { testId: `field-value-${field.field}`, children: EMPTY_VALUE_PLACEHOLDER });
+    const rows = queryResult.data?.rows ?? [];
+    // System-scope ids (e.g. SYSTEM_TENANT_ID) never have a backing row —
+    // same central fallback as useReferenceLookup (render-list.tsx), so a
+    // reference field showing one on the detail path also gets a label
+    // instead of the raw id.
+    const systemLabel = SYSTEM_REFERENCE_LABELS[`${refFeature}:${refEntity}`];
+    const parts = ids.map((id) => {
+        if (systemLabel !== undefined && (id === systemLabel.id || systemLabel.aliases?.includes(id))) {
+            return { id, label: t(systemLabel.labelKey), link: undefined };
+        }
+        const row = rows.find((r) => String(r["id"] ?? "") === id);
+        if (row === undefined) {
+            const unknownKey = UNRESOLVED_REFERENCE_LABEL_KEYS[`${refFeature}:${refEntity}`];
+            const label = unknownKey !== undefined &&
+                !queryResult.loading &&
+                queryResult.error === null &&
+                isCompleteRowPage(queryResult.data)
+                ? t(unknownKey)
+                : id;
+            return { id, label, link: undefined };
+        }
+        return { id, label: String(row[labelKey] ?? id), link: resolveReferenceLink(refEntity, id) };
+    });
+    return (_jsx(Text, { testId: `field-value-${field.field}`, children: parts.map(({ id, label, link }, index) => (_jsxs(Fragment, { children: [index > 0 && ", ", link === undefined ? (label) : (_jsx(Link, { href: link.href, onPress: link.onPress, testId: `field-link-${field.field}-${id}`, children: label }))] }, id))) }));
+}

package/dist/components/render-field-scalar-inputs.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { RenderInputArgs, SharedInputProps } from "./render-field-input-shared.ts";
+export declare function renderNumberInput({ field, Input, onChange, appLocale, row }: RenderInputArgs, { common, placeholderProp, affixProps }: SharedInputProps): ReactNode;
+export declare function renderDecimalInput({ field, Input, onChange, appLocale }: RenderInputArgs, { common, placeholderProp, affixProps }: SharedInputProps): ReactNode;
+export declare function renderTzInput({ field, Input, onChange }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderMoneyInput({ field, Input, onChange, appLocale }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderBooleanInput({ field, Input, onChange }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderDateInput({ field, Input, onChange, appLocale }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderTimestampInput({ field, Input, onChange, appLocale }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderLocatedTimestampInput({ field, Input, onChange, appLocale }: RenderInputArgs, { common }: SharedInputProps): ReactNode;

package/dist/components/render-field-scalar-inputs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveFieldIcon } from "./render-field-meta.js";
+import { locatedValue, moneyMinorValue, moneyPayload, numberValue, resolveMoneyCurrency, resolveNumberUnit, stringValue, } from "./render-field-values.js";
+// decimal/bigInt are both plain numbers on the wire (fieldToZod:
+// z.number() / z.number().int().safe()) — the number input's onChange
+// already emits `number | undefined`, so no extra coercion is needed
+// beyond what "number" already does.
+export function renderNumberInput({ field, Input, onChange, appLocale, row }, { common, placeholderProp, affixProps }) {
+    const icon = resolveFieldIcon(field);
+    const unit = resolveNumberUnit(field.unit, row);
+    return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(field.type === "bigInt" && { integer: true }), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
+}
+export function renderDecimalInput({ field, Input, onChange, appLocale }, { common, placeholderProp, affixProps }) {
+    const icon = resolveFieldIcon(field);
+    return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }) }));
+}
+export function renderTzInput({ field, Input, onChange }, { common }) {
+    return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+}
+export function renderMoneyInput({ field, Input, onChange, appLocale }, { common }) {
+    const currency = resolveMoneyCurrency(field.value, field.currency);
+    return (_jsx(Input, { kind: "money", ...common, value: moneyMinorValue(field.value, currency), onChange: (v) => onChange(moneyPayload(v, currency)), currency: currency, locale: appLocale }));
+}
+export function renderBooleanInput({ field, Input, onChange }, { common }) {
+    return (_jsx(Input, { kind: "boolean", ...common, value: field.value === true, onChange: (v) => onChange(v) }));
+}
+export function renderDateInput({ field, Input, onChange, appLocale }, { common }) {
+    return (_jsx(Input, { kind: "date", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), locale: field.dateLocale ?? appLocale, ...(field.min !== undefined && { min: field.min }), ...(field.max !== undefined && { max: field.max }) }));
+}
+export function renderTimestampInput({ field, Input, onChange, appLocale }, { common }) {
+    return (_jsx(Input, { kind: "timestamp", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), locale: field.dateLocale ?? appLocale, ...(field.wallClock !== undefined && { wallClock: field.wallClock }), ...(field.min !== undefined && { min: field.min }), ...(field.max !== undefined && { max: field.max }) }));
+}
+export function renderLocatedTimestampInput({ field, Input, onChange, appLocale }, { common }) {
+    return (_jsx(Input, { kind: "locatedTimestamp", ...common, value: locatedValue(field.value), onChange: (v) => onChange(v), locale: field.dateLocale ?? appLocale, ...(field.min !== undefined && { min: field.min }), ...(field.max !== undefined && { max: field.max }) }));
+}

package/dist/components/render-field-text-inputs.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { RenderInputArgs, SharedInputProps } from "./render-field-input-shared.ts";
+export declare function renderFallbackInput(args: RenderInputArgs, shared: SharedInputProps): ReactNode;

package/dist/components/render-field-text-inputs.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveFieldIcon } from "./render-field-meta.js";
+import { stringValue } from "./render-field-values.js";
+function renderPasswordInput({ field, Input, onChange }, { common }) {
+    return (_jsx(Input, { kind: "password", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+}
+function renderMonthInput({ field, Input, onChange }, { common }) {
+    return (_jsx(Input, { kind: "month", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+}
+function renderTextareaInput({ field, Input, onChange }, { common, placeholderProp }) {
+    const rows = typeof field.multiline === "object" ? field.multiline.rows : undefined;
+    return (_jsx(Input, { kind: "textarea", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(rows !== undefined && { rows }), ...placeholderProp }));
+}
+function renderTextInput({ field, Input, onChange }, { common, placeholderProp, affixProps }) {
+    const icon = resolveFieldIcon(field);
+    return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }), ...(field.autoComplete !== undefined && { autoComplete: field.autoComplete }) }));
+}
+// text + unknown scalar type → text input. If TextFieldDef.multiline
+// is set (the view-model carries it), the renderer switches to
+// textarea. longText always renders a textarea — that's the point of
+// the type — regardless of whether `multiline` is set; `multiline`
+// only supplies an optional `{ rows }` override for it.
+export function renderFallbackInput(args, shared) {
+    const { field } = args;
+    if (field.type === "text" && field.format === "password") {
+        return renderPasswordInput(args, shared);
+    }
+    if (field.type === "text" && field.format === "month")
+        return renderMonthInput(args, shared);
+    if (field.type === "longText" || (field.type === "text" && field.multiline)) {
+        return renderTextareaInput(args, shared);
+    }
+    return renderTextInput(args, shared);
+}

package/dist/components/render-field-values.d.ts

@@ -0,0 +1,18 @@
+import type { FieldAffix } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { SelectOptionEntry } from "./availability-options-select.tsx";
+export declare function stringValue(v: unknown): string;
+export declare function numberValue(v: unknown): number | "";
+export declare function resolveMoneyCurrency(value: unknown, fieldCurrency: string | undefined): string;
+export declare function resolveNumberUnit(unit: string | {
+    readonly field: string;
+} | undefined, row: Readonly<Record<string, unknown>> | undefined): string | undefined;
+export declare function resolveAffix(affix: FieldAffix | undefined, row: Readonly<Record<string, unknown>> | undefined): string | undefined;
+export declare function stringArrayOf(value: unknown): readonly string[];
+export declare function withPinnedValues(next: readonly string[], options: readonly SelectOptionEntry[], current: readonly string[]): readonly string[];
+export declare function moneyMinorValue(v: unknown, currency: string): number | "";
+export declare function moneyPayload(minorUnits: number | undefined, currency: string): unknown;
+export declare function locatedValue(v: unknown): {
+    at: string;
+    tz: string;
+    utc?: string;
+} | "";

package/dist/components/render-field-values.js

@@ -0,0 +1,111 @@
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { currencyDecimals } from "../headless/index.js";
+export function stringValue(v) {
+    if (v === undefined || v === null)
+        return "";
+    return typeof v === "string" ? v : String(v);
+}
+export function numberValue(v) {
+    if (v === undefined || v === null || v === "")
+        return "";
+    return typeof v === "number" ? v : Number(v);
+}
+// Read/initial value → MoneyInput's minor-units contract. The server's
+// read shape is `{amount, currency, amountMinor}` in MAJOR units — deliberately
+// NOT reading `amountMinor` here: the server derives it via a flat
+// MINOR_UNIT_SCALE=100 (money.ts), which disagrees with currencyDecimals for
+// zero-decimal currencies like JPY, so it would double-scale JPY amounts.
+// Deriving from `amount * 10**currencyDecimals(currency)` keeps this the
+// exact inverse of moneyPayload below. A bare number (e.g. ConfigEditBody's
+// stored-config coercion) is MAJOR units too — every producer in this repo
+// hands rehydrateMoney's `{amount,…}` shape or a raw major-unit number, never
+// pre-scaled minor units.
+// A stored row can carry a legacy/imported currency that is not an ISO-4217
+// shape; Intl.NumberFormat throws a RangeError on it and would crash the screen.
+const ISO_CURRENCY_CODE = /^[A-Z]{3}$/;
+export function resolveMoneyCurrency(value, fieldCurrency) {
+    if (typeof value === "object" && value !== null && "currency" in value) {
+        const { currency } = value;
+        if (typeof currency === "string") {
+            const normalized = currency.toUpperCase();
+            if (ISO_CURRENCY_CODE.test(normalized))
+                return normalized;
+        }
+    }
+    return fieldCurrency ?? "EUR";
+}
+// The suffix span is absolutely positioned inside a fixed right padding sized
+// for short symbols; a free-text sibling value longer than any real unit
+// symbol would overflow the number.
+const MAX_SIBLING_UNIT_LENGTH = 8;
+// Static unit → used as-is. Sibling-field reference → read the live row
+// value; missing/empty/non-string/overlong sibling means no suffix, never a guess.
+export function resolveNumberUnit(unit, row) {
+    if (unit === undefined)
+        return undefined;
+    if (typeof unit === "string")
+        return unit;
+    const sibling = row?.[unit.field];
+    if (typeof sibling !== "string")
+        return undefined;
+    const trimmed = sibling.trim();
+    return trimmed.length > 0 && trimmed.length <= MAX_SIBLING_UNIT_LENGTH ? trimmed : undefined;
+}
+// String affix → used as-is (the view model already translated it). Field
+// affix → the live form value; missing, empty or non-scalar means no affix.
+export function resolveAffix(affix, row) {
+    if (affix === undefined)
+        return undefined;
+    if (typeof affix === "string")
+        return affix;
+    const value = row?.[affix.field];
+    const text = typeof value === "number" ? String(value) : value;
+    return typeof text === "string" && text.trim().length > 0 ? text.trim() : undefined;
+}
+export function stringArrayOf(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === "string")
+        : [];
+}
+// The combobox cannot disable a single option, so removals of disabled options
+// the form already holds are merged back.
+export function withPinnedValues(next, options, current) {
+    const missingPinned = options
+        .filter((opt) => opt.disabled === true && current.includes(opt.value) && !next.includes(opt.value))
+        .map((opt) => opt.value);
+    return missingPinned.length === 0 ? next : [...next, ...missingPinned];
+}
+export function moneyMinorValue(v, currency) {
+    if (v === undefined || v === null || v === "")
+        return "";
+    if (typeof v === "number")
+        return Math.round(v * 10 ** currencyDecimals(currency));
+    if (typeof v === "object") {
+        const amount = propertyOf(v, "amount");
+        if (typeof amount === "number")
+            return Math.round(amount * 10 ** currencyDecimals(currency));
+    }
+    return "";
+}
+// MoneyInput's minor-units onChange → the server payload shape
+// (`z.object({amount, currency})`, schema-builder.ts) — MAJOR units, no
+// `amountMinor` (the server derives that itself on write).
+export function moneyPayload(minorUnits, currency) {
+    if (minorUnits === undefined)
+        return undefined;
+    return { amount: minorUnits / 10 ** currencyDecimals(currency), currency };
+}
+// A locatedTimestamp field value is supplied by the read wrapper as
+// `{ at, tz, utc }`; an unset value becomes "" as the empty sentinel,
+// consistent with money and timestamp fields.
+export function locatedValue(v) {
+    if (v !== null && typeof v === "object" && "at" in v && "tz" in v) {
+        const utc = propertyOf(v, "utc");
+        return {
+            at: typeof v.at === "string" ? v.at : "",
+            tz: typeof v.tz === "string" ? v.tz : "",
+            ...(typeof utc === "string" && { utc }),
+        };
+    }
+    return "";
+}

package/dist/components/render-field-write-only.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { EditFieldViewModel } from "../headless/index.ts";
+export declare function WriteOnlyTextInput({ field, id, hasError, onChange, changed, }: {
+    readonly field: EditFieldViewModel;
+    readonly id: string;
+    readonly hasError: boolean;
+    readonly onChange: (value: unknown) => void;
+    readonly changed: boolean;
+}): ReactNode;

package/dist/components/render-field-write-only.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+// Wire value of a writeOnly field is `true` (set) / `null` (empty), never the
+// secret. Typing sets a new value; an untouched or emptied input submits
+// nothing / "" which the server reads as "keep". `null` after a loaded `true`
+// (changed) means "remove on save".
+export function WriteOnlyTextInput({ field, id, hasError, onChange, changed, }) {
+    const { Input } = usePrimitives();
+    const t = useTranslation();
+    const isSet = field.value === true;
+    const isMarkedForRemoval = field.value === null && changed;
+    if (isMarkedForRemoval) {
+        return (_jsx(Input, { kind: "password", id: id, name: field.field, disabled: true, hasError: hasError, value: "", onChange: () => { }, autoComplete: "new-password", placeholder: t("kumiko.field.writeOnly.willRemove"), testId: `field-write-only-removal-${field.field}`, trailingAction: {
+                icon: "undo",
+                label: t("kumiko.field.writeOnly.undo"),
+                onPress: () => onChange(true),
+            } }));
+    }
+    return (_jsx(Input, { kind: "password", id: id, name: field.field, disabled: field.readOnly, required: field.required && !isSet, hasError: hasError, value: typeof field.value === "string" ? field.value : "", onChange: (v) => onChange(v), autoComplete: "new-password", ...(isSet && { placeholder: t("kumiko.field.writeOnly.setPlaceholder") }), ...(isSet &&
+            !field.required &&
+            !field.readOnly && {
+            trailingAction: {
+                icon: "clear",
+                label: t("kumiko.field.writeOnly.remove"),
+                onPress: () => onChange(null),
+            },
+        }) }));
+}

package/dist/components/render-field.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from "react";
-import { type EditFieldViewModel, type FieldIssue } from "../headless/index.ts";
+import type { ReactNode } from "react";
+import type { EditFieldViewModel, FieldIssue } from "../headless/index.ts";
 import { type FieldProps } from "../primitives.tsx";
 export type RenderFieldProps = {
     readonly field: EditFieldViewModel;