@cosmicdrift/kumiko-renderer 0.327.0 → 0.328.1

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

@@ -0,0 +1,38 @@
+import { type EditFieldViewModel, type FieldIssue } from "@cosmicdrift/kumiko-headless";
+import { type ReactNode } from "react";
+export type RenderFieldProps = {
+    readonly field: EditFieldViewModel;
+    readonly issues?: readonly FieldIssue[];
+    readonly onChange: (val: unknown) => void;
+    /** Nur bei type:"reference" relevant — Feature-Name für die Lookup-
+     *  Query-QN (`<feature>:query:<refEntity>:list`). Andere Field-Types
+     *  ignorieren das Prop. */
+    readonly featureName?: string;
+    /** Optionaler Zusatz-Inhalt der nach dem Label gerendert wird (z.B.
+     *  ConfigSourceBadge). */
+    readonly labelAppendix?: ReactNode;
+    /** Optionaler Zusatz-Inhalt der nach dem Input gerendert wird (z.B.
+     *  ConfigCascade). */
+    readonly fieldAppendix?: ReactNode;
+    /** Flat issues-by-path map (FormSnapshot.errors) — only relevant for
+     *  type:"embedded" with embeddedListCells, to bucket row-/cell-issues
+     *  (`${field}.${rowIndex}` / `${field}.${rowIndex}.${cellField}`).
+     *  Other field types ignore this prop. */
+    readonly allIssues?: Readonly<Record<string, readonly FieldIssue[]>>;
+    /** "form" (default) renders every field as its editable Input, disabled
+     *  when `field.readOnly` — unchanged behavior. "text" renders a
+     *  `field.readOnly` field as plain text instead (projectionDetail's read
+     *  view, fw#2245); editable fields are untouched by this prop either way. */
+    readonly valueDisplay?: "form" | "text";
+    /** Current form values, keyed by field name. Consulted when
+     *  `field.renderer` resolves to a `{ react: { __component } }` registry
+     *  component (passed through as `ColumnRendererProps.row`, same contract
+     *  as list-column renderers, fw#2245), and to resolve a `type: "number"`
+     *  field's sibling-field `unit`. Omitted → falls back to a single-key
+     *  `{ [field.field]: field.value }` row. */
+    readonly row?: Readonly<Record<string, unknown>>;
+    /** Marks the field as modified against the loaded record (edit mode only). */
+    readonly changed?: boolean;
+};
+export declare const AllFieldsRequiredProvider: import("react").Provider<boolean>;
+export declare function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay, row, changed, }: RenderFieldProps): ReactNode;

package/dist/components/render-field.js

@@ -0,0 +1,544 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isFormatSpec, SYSTEM_REFERENCE_LABELS, } from "@cosmicdrift/kumiko-framework/ui-types";
+import { applyFormatSpec, currencyDecimals, } from "@cosmicdrift/kumiko-headless";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { useAppFeatures } from "../app/app-features-context.js";
+import { useColumnRenderer } from "../app/column-renderers.js";
+import { extensionSectionName } from "../app/extension-sections.js";
+import { toKebab } from "../app/qn.js";
+import { screenAccessAllows } from "../app/screen-access.js";
+import { useUserRoles } from "../context/user-roles-context.js";
+import { REFERENCE_COMBOBOX_LIMIT } from "../hooks/reference-limits.js";
+import { useQuery } from "../hooks/use-query.js";
+import { referenceLookupSource } from "../hooks/use-reference-lookup.js";
+import { useLocale, useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { EmbeddedListField } from "./embedded-list-field.js";
+import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
+import { ReferenceCreateDialog } from "./reference-create-dialog.js";
+const AllFieldsRequiredContext = createContext(false);
+export const AllFieldsRequiredProvider = AllFieldsRequiredContext.Provider;
+export function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, allIssues, valueDisplay = "form", row, changed, }) {
+    const { Field, Input, Banner, Text, JsonView } = usePrimitives();
+    // App-Locale (i18n) für money/date-Inputs — sonst fielen sie auf
+    // navigator.language (Browser-Sprache) zurück statt der gewählten
+    // App-Sprache. BEWUSSTE API-Verschärfung (seit 0.38): RenderField ist
+    // public exportiert und verlangt jetzt einen LocaleProvider —
+    // Standalone-Consumer/Tests müssen wrappen (createKumikoApp tut es).
+    const appLocale = useLocale().locale();
+    const t = useTranslation();
+    const allFieldsRequired = useContext(AllFieldsRequiredContext);
+    if (!field.visible)
+        return null;
+    const id = inputId(field);
+    const hasError = issues !== undefined && issues.length > 0;
+    // An author-declared renderer always wins over the input widget, same as
+    // the list-column path (render-list.tsx). Only takes effect once the field
+    // is actually readOnly — a FormatSpec/PlatformComponent renderer has no
+    // editable widget of its own, so applying it to an editable field would
+    // silently make that field un-editable (fw#2245).
+    const readOnlyText = valueDisplay === "text" && field.readOnly && field.renderer === undefined;
+    // Reference-Field rendert eine eigene Component — sie nutzt
+    // useQuery() für den Live-Lookup, also muss sie als React-
+    // Komponente gemountet werden (nicht als pure render-Call).
+    const control = field.readOnly && field.renderer !== undefined ? (_jsx(FieldRendererOutput, { field: field, renderer: field.renderer, appLocale: appLocale, ...(row !== undefined && { row }) })) : field.type === "embedded" && field.embeddedListCells !== undefined ? (_jsx(EmbeddedListField, { field: field, id: id, onChange: onChange, allIssues: allIssues ?? {}, featureName: featureName ?? "" })) : field.type === "reference" ? (readOnlyText ? (_jsx(ReadOnlyReferenceValue, { field: field, featureName: featureName ?? "" })) : (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }))) : readOnlyText && !isComplexFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale) })) : (renderInput({
+        field,
+        id,
+        hasError,
+        onChange,
+        Input,
+        appLocale,
+        Banner,
+        Text,
+        JsonView,
+        t,
+        row,
+    }));
+    return (_jsx(Field, { id: id, label: field.label, required: field.required && !allFieldsRequired, ...(issues !== undefined && { issues }), ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(changed === true && { changed }), testId: `field-${field.field}`, children: control }));
+}
+// Where a reference field's option rows come from, and which of their keys
+// holds the display text — the entity's own list handler plus `refLabelField`
+// by default, or an author-supplied handler whose rows carry `label`
+// (fw#2780), for targets with no readable column of their own.
+function referenceOptionSource(field, refFeature, refEntity) {
+    if (field.refOptionsQuery !== undefined) {
+        return { queryQn: field.refOptionsQuery, labelKey: "label" };
+    }
+    return referenceLookupSource(refFeature, refEntity, field.refLabelField ?? "id");
+}
+// Tier 2.7e-3 + 2.1c: Reference-Input rendert eine Searchable Combobox
+// gefüllt aus einer Live-Query auf die referenced Entity. Default-
+// Limit: 200 — bei größeren Datasets fehlt der Tail im Dropdown
+// (Tier 2.7e-Remote: server-side Search-Query mit debounce kommt später).
+//   - Display = row[refLabelField], Default labelField "id".
+//   - Loading-State: leeres Dropdown bis die rows da sind. Field
+//     ist disabled während useQuery läuft.
+//   - Multi-Mode (Tier 2.7e-Multi via field.refMultiple): value ist
+//     ein UUID-Array, Combobox rendert Selected-Tags.
+//
+// Storage: UI-Wert ist UUID (row.id) oder UUID-Array bei multiple.
+// Server-Schema: z.uuid() bzw. z.array(z.uuid()).
+// REFERENCE_COMBOBOX_LIMIT lebt zentral in hooks/reference-limits.ts
+// (siehe dort für Begründung der Default-Werte).
+function ReferenceInput({ field, id, hasError, onChange, Input, featureName, }) {
+    const { Banner } = usePrimitives();
+    const refEntity = field.refEntity ?? "";
+    const refFeature = field.refFeature ?? featureName;
+    const isMultiple = field.refMultiple === true;
+    // Tier 2.7e Cross-Feature: refFeature kann ≠ featureName sein
+    // (z.B. items.assignee → users:query:user:list). Default ist
+    // same-feature, kommt aus dem ViewModel (parseRefTarget).
+    // fw#2780: refOptionsQuery replaces that source with an author-supplied
+    // handler whose rows already carry a composed `label`.
+    const { queryQn, labelKey } = referenceOptionSource(field, refFeature, refEntity);
+    // Issue #1681: "+ Neu" in der Combobox öffnet den Create-Screen der
+    // referenced entity als Dialog, statt die aktuelle Form zu verlassen.
+    // refFeature kann ein anderes Feature als das aktuell gerenderte sein
+    // — appFeatures (createKumikoApp) kennt alle Feature-Schemas, nicht
+    // nur das der aktiven Screen. Kein Match (Feature/Screen/Entity nicht
+    // registriert, oder allowCreate:false) → onCreate bleibt undefined,
+    // Combobox rendert dann ohne den Footer.
+    const appFeatures = useAppFeatures();
+    const userRoles = useUserRoles();
+    const t = useTranslation();
+    const [createOpen, setCreateOpen] = useState(false);
+    const refTargetSchema = appFeatures.find((f) => f.featureName === refFeature);
+    const refCreateScreen = refTargetSchema?.screens.find((s) => s.type === "entityEdit" &&
+        s.entity === refEntity &&
+        s.allowCreate !== false &&
+        screenAccessAllows(s.access, userRoles));
+    const refEntityDef = refTargetSchema?.entities[refEntity];
+    // Tier 2.7e Remote-Search: User tippt im Combobox → Server filtert
+    // via existing list-payload `search`-Param (Tier 2.6c). Combobox
+    // debounced den keystroke selbst (300ms) und ruft onSearchChange.
+    // Initial-State leer → erste 50 Items vom Server (default-sortiert).
+    const [searchTerm, setSearchTerm] = useState("");
+    const queryPayload = useMemo(() => searchTerm === ""
+        ? { limit: REFERENCE_COMBOBOX_LIMIT }
+        : { limit: REFERENCE_COMBOBOX_LIMIT, search: searchTerm }, [searchTerm]);
+    const queryResult = useQuery(queryQn, queryPayload);
+    const handleSearchChange = useCallback((q) => setSearchTerm(q), []);
+    const canCreate = !field.readOnly && refCreateScreen !== undefined && refEntityDef !== undefined;
+    const [createdWithoutIdWarning, setCreatedWithoutIdWarning] = useState(false);
+    const handleCreated = useCallback((newId) => {
+        setCreateOpen(false);
+        // Clear the search filter before refetching — the just-created record
+        // won't match whatever the user had typed pre-create, and would then
+        // be missing from `options` (shown as a raw id instead of a label).
+        setSearchTerm("");
+        queryResult.refetch().catch((err) => {
+            // biome-ignore lint/suspicious/noConsole: no error-surfacing path exists in this widget yet — at minimum, don't swallow it silently.
+            console.error("render-field: refetch after create failed", err);
+        });
+        if (newId === undefined) {
+            // Record was created server-side but the payload carried no id —
+            // can't auto-select it, surface that instead of failing silently.
+            setCreatedWithoutIdWarning(true);
+            return;
+        }
+        setCreatedWithoutIdWarning(false);
+        if (isMultiple) {
+            const current = Array.isArray(field.value) ? field.value : [];
+            onChange([...current, newId]);
+        }
+        else {
+            onChange(newId);
+        }
+    }, [isMultiple, field.value, onChange, queryResult.refetch]);
+    const options = useMemo(() => {
+        const rows = queryResult.data?.rows ?? [];
+        return rows.map((row) => {
+            const idVal = String(row["id"] ?? "");
+            const label = String(row[labelKey] ?? idVal);
+            return { value: idVal, label };
+        });
+    }, [queryResult.data, labelKey]);
+    // Single: value ist String/null; Multi: Array. Coerce auf das was
+    // der Combobox-Mode erwartet, damit Storage-Drift (Server liefert
+    // alten String wo jetzt Array erwartet wird) keine Crash auslöst.
+    const baseInputProps = {
+        id,
+        name: field.field,
+        // Initial-Load disabled — danach loading-Indicator im Popover.
+        disabled: field.readOnly || (queryResult.loading && options.length === 0),
+        required: field.required,
+        hasError,
+        options,
+        onSearchChange: handleSearchChange,
+        loading: queryResult.loading,
+        ...(canCreate && {
+            onCreate: () => setCreateOpen(true),
+            createLabel: t("kumiko.actions.create"),
+        }),
+    };
+    const createDialog = (_jsxs(_Fragment, { children: [canCreate && refCreateScreen && refEntityDef && (_jsx(ReferenceCreateDialog, { open: createOpen, onClose: () => setCreateOpen(false), onCreated: handleCreated, featureName: refFeature, screen: refCreateScreen, entity: refEntityDef })), createdWithoutIdWarning && (_jsx(Banner, { variant: "error", children: t("kumiko.field.reference-created-no-id") }))] }));
+    if (isMultiple) {
+        const arrayValue = Array.isArray(field.value)
+            ? 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] }));
+}
+function inputId(field) {
+    return `kumiko-edit-${field.field}`;
+}
+// Doesn't resolve the `string` (cross-feature QN) FieldRenderer variant — the
+// list-column path (DataTableCell) doesn't either, so this stays in parity.
+function FieldRendererOutput({ field, renderer, row, appLocale, }) {
+    const { Text, JsonView } = usePrimitives();
+    const t = useTranslation();
+    const componentName = !isFormatSpec(renderer) && typeof renderer === "object" && renderer !== null
+        ? extensionSectionName(renderer)
+        : undefined;
+    const Component = useColumnRenderer(componentName);
+    if (isFormatSpec(renderer)) {
+        // format:"json" wants the raw value (JsonView stringifies + highlights
+        // itself) — applyFormatSpec's already-indented string is only the
+        // fallback for primitives-providers without JsonView (fw#2312).
+        if (renderer.format === "json" && JsonView !== undefined) {
+            return (_jsx(JsonView, { value: field.value, indent: renderer.indent, testId: `field-value-${field.field}` }));
+        }
+        // App locale as default when the FormatSpec declares none of its own —
+        // otherwise locale-sensitive formats (timestamp/date/number/decimal/
+        // bigInt/unit) fell back to Intl's runtime default instead of the app
+        // language chosen via LocaleProvider (fw#2187). Prefer renderer.locale
+        // when set; coalesce undefined (spread override) back to appLocale (#2332).
+        return (_jsx(Text, { testId: `field-value-${field.field}`, children: applyFormatSpec({
+                ...renderer,
+                locale: renderer.locale ?? appLocale,
+            }, field.value, t) }));
+    }
+    if (componentName !== undefined) {
+        if (Component !== undefined) {
+            return (_jsx(Component, { value: field.value, row: row ?? { [field.field]: field.value }, column: { field: field.field } }));
+        }
+        // biome-ignore lint/suspicious/noConsole: dev-warning for a registry mismatch, mirrors DataTableCell's columnRenderer warning.
+        console.warn(`[kumiko] fieldRenderer "${componentName}" not registered`);
+    }
+    return _jsx(Text, { testId: `field-value-${field.field}`, children: stringValue(field.value) });
+}
+// 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.
+function ReadOnlyReferenceValue({ field, featureName, }) {
+    const { Text } = usePrimitives();
+    const t = useTranslation();
+    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
+        ? Array.isArray(field.value)
+            ? field.value
+            : []
+        : typeof field.value === "string" && field.value !== ""
+            ? [field.value]
+            : [];
+    if (ids.length === 0)
+        return _jsx(Text, { testId: `field-value-${field.field}`, children: "\u2014" });
+    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 labels = ids.map((id) => {
+        if (systemLabel !== undefined && id === systemLabel.id)
+            return t(systemLabel.labelKey);
+        const row = rows.find((r) => String(r["id"] ?? "") === id);
+        return row !== undefined ? String(row[labelKey] ?? id) : id;
+    });
+    return _jsx(Text, { testId: `field-value-${field.field}`, children: labels.join(", ") });
+}
+// Field types whose read display already isn't a boxed "disabled input" look
+// (embedded/jsonb render as an info Banner, files/images as an unsupported-
+// type Banner) — `readOnlyDisplayText` doesn't cover these, they keep going
+// through `renderInput`'s existing Banner branch in text-display mode too.
+function isComplexFieldType(type) {
+    return type === "embedded" || type === "jsonb" || type === "files" || type === "images";
+}
+// Mirrors ACTION_ICON_BY_ID (kumiko-screen.tsx) for fields: only names with
+// an unambiguous matching FieldIconKey are listed here, everything else
+// stays iconless rather than guessing.
+const FIELD_ICON_BY_NAME = {
+    email: "mail",
+    phone: "phone",
+    tel: "phone",
+    mobile: "phone",
+    url: "link",
+    website: "link",
+    link: "link",
+    password: "lock",
+    search: "search",
+    city: "map-pin",
+    address: "map-pin",
+    street: "map-pin",
+    user: "user",
+    owner: "user",
+    assignee: "user",
+};
+function kebabLastSegment(value) {
+    const kebab = toKebab(value);
+    const lastDash = kebab.lastIndexOf("-");
+    return lastDash === -1 ? kebab : kebab.slice(lastDash + 1);
+}
+// Derives a prefix icon when the field declares none: field.icon wins, then
+// the field name. Deliberately no type-based fallback — a hash in front of a
+// number field restates what the field already shows and reads as noise.
+function resolveFieldIcon(field) {
+    if (field.icon !== undefined)
+        return field.icon;
+    const byName = FIELD_ICON_BY_NAME[field.field.toLowerCase()] ??
+        FIELD_ICON_BY_NAME[kebabLastSegment(field.field)];
+    return byName;
+}
+// Dispatches field.type → Input-kind. Select threads options through
+// from the EditFieldViewModel (computeEditViewModel pulls them from
+// SelectFieldDef.options). Structural types without a widget (embedded,
+// jsonb, multiSelect) render read-only instead of a data-destroying text
+// fallback (#1834); truly unknown scalar types still fall back to text.
+function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, JsonView, t, row, }) {
+    const common = {
+        id,
+        name: field.field,
+        disabled: field.readOnly,
+        required: field.required,
+        hasError,
+    };
+    switch (field.type) {
+        // 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 (#1925).
+        case "number":
+        case "bigInt": {
+            const icon = resolveFieldIcon(field);
+            const unit = resolveNumberUnit(field.unit, row);
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
+        }
+        case "decimal": {
+            // step="any" disables the native stepMismatch constraint — without it
+            // <input type="number"> defaults to step=1 and blocks form submit on
+            // any fractional value via silent browser-native validation.
+            const icon = resolveFieldIcon(field);
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), step: "any", ...(icon !== undefined && { icon }) }));
+        }
+        case "tz":
+            return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+        case "multiSelect": {
+            const rawOptions = field.options ?? [];
+            const labels = field.optionLabels;
+            const multiSelectOptions = labels !== undefined
+                ? rawOptions.map((value) => ({ value, label: labels[value] ?? value }))
+                : rawOptions.map((value) => ({ value, label: value }));
+            const arrayValue = Array.isArray(field.value) ? field.value : [];
+            if (field.display === "checkboxes") {
+                return (_jsx(MultiSelectCheckboxes, { field: field, id: id, options: multiSelectOptions, value: arrayValue, onChange: (v) => onChange(v) }));
+            }
+            return (_jsx(Input, { kind: "combobox", ...common, multiple: true, value: arrayValue, onChange: (v) => onChange(v), options: multiSelectOptions }));
+        }
+        case "money": {
+            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 }));
+        }
+        case "boolean":
+            return (_jsx(Input, { kind: "boolean", ...common, value: field.value === true, onChange: (v) => onChange(v) }));
+        case "date":
+            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 }) }));
+        case "timestamp":
+            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 }) }));
+        case "locatedTimestamp":
+            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 }) }));
+        case "select": {
+            // Translated Option-Labels kommen aus dem ViewModel-Builder
+            // (computeEditViewModel, Convention-Key
+            // `<feature>:entity:<entity>:field:<field>:option:<value>`).
+            // Wenn keine Translations registriert sind, fallback auf raw
+            // value als Label — der ComboboxInput zeigt dann unverändert.
+            const rawOptions = field.options ?? [];
+            const labels = field.optionLabels;
+            const selectOptions = labels !== undefined
+                ? rawOptions.map((value) => ({ value, label: labels[value] ?? value }))
+                : rawOptions;
+            // `display` is shared with multiSelect's "checkboxes", which is not a
+            // select presentation — narrow to the two a select field can request.
+            const display = field.display === "radio" || field.display === "dropdown" ? field.display : undefined;
+            return (_jsx(Input, { kind: "select", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), options: selectOptions, ...(display !== undefined && { display }) }));
+        }
+        case "file":
+        case "image": {
+            const kind = field.type === "image" ? "image" : "file";
+            const fileId = typeof field.value === "string" && field.value !== "" ? field.value : null;
+            return (_jsx(Input, { kind: kind, ...common, value: fileId, onChange: (v) => onChange(v), ...(field.accept !== undefined && { accept: field.accept }), ...(field.maxSize !== undefined && { maxSize: field.maxSize }), ...(field.entityType !== undefined && { entityType: field.entityType }), ...(field.fieldName !== undefined && { fieldName: field.fieldName }), ...(field.imageVariant !== undefined && { imageVariant: field.imageVariant }), ...(field.capture !== undefined && { capture: field.capture }) }));
+        }
+        // embedded (without embeddedListCells — that's embeddedList, which has
+        // had its own EmbeddedListField widget since #1838) and jsonb carry
+        // arbitrary objects; files/images carry a FileRef-UUID array and have
+        // no multi-upload widget yet (deliberately deferred, #1925). Without a
+        // dedicated widget these must NOT fall through to a text input:
+        // stringValue() turns them into "[object Object]" / a comma-joined
+        // string, and saving that overwrites the real data with the mangled
+        // string (#1834). A `required: true` on any of these is caught loudly
+        // at boot (validateNoWidgetRequiredField in the framework package)
+        // instead of silently failing here.
+        case "embedded":
+        case "jsonb":
+        case "files":
+        case "images": {
+            const hasValue = field.value !== undefined && field.value !== null && field.value !== "";
+            return (_jsxs(Banner, { id: id, variant: "info", children: [t("kumiko.field.unsupported"), hasValue &&
+                        (JsonView !== undefined ? (_jsx(JsonView, { value: field.value, testId: `field-value-${field.field}` })) : (_jsx(Text, { variant: "code", children: JSON.stringify(field.value) })))] }));
+        }
+        default: {
+            if (field.type === "text" && field.format === "password") {
+                return (_jsx(Input, { kind: "password", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+            }
+            // 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 (#1925).
+            if (field.type === "longText" || (field.type === "text" && field.multiline)) {
+                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 }) }));
+            }
+            const icon = resolveFieldIcon(field);
+            return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }) }));
+        }
+    }
+}
+function stringValue(v) {
+    if (v === undefined || v === null)
+        return "";
+    return typeof v === "string" ? v : String(v);
+}
+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.
+function resolveMoneyCurrency(value, fieldCurrency) {
+    if (typeof value === "object" &&
+        value !== null &&
+        typeof value.currency === "string") {
+        return value.currency;
+    }
+    return fieldCurrency ?? "EUR";
+}
+// Static unit → used as-is. Sibling-field reference → read the live row
+// value; missing/empty/non-string sibling means no suffix, never a guess.
+function resolveNumberUnit(unit, row) {
+    if (unit === undefined)
+        return undefined;
+    if (typeof unit === "string")
+        return unit;
+    const sibling = row?.[unit.field];
+    return typeof sibling === "string" && sibling.length > 0 ? sibling : undefined;
+}
+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 = 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).
+function moneyPayload(minorUnits, currency) {
+    if (minorUnits === undefined)
+        return undefined;
+    return { amount: minorUnits / 10 ** currencyDecimals(currency), currency };
+}
+// locatedTimestamp-Feldwert: das Read-Wrapper liefert `{ at, tz, utc }`; leer
+// (noch nicht gesetzt) → "" als Empty-Sentinel, analog money/timestamp.
+function locatedValue(v) {
+    if (v !== null && typeof v === "object" && "at" in v && "tz" in v) {
+        const o = v;
+        return {
+            at: typeof o.at === "string" ? o.at : "",
+            tz: typeof o.tz === "string" ? o.tz : "",
+            ...(typeof o.utc === "string" && { utc: o.utc }),
+        };
+    }
+    return "";
+}
+// Read-only text for a `field.readOnly` field without its own `renderer` —
+// per-type formatting that reuses the same value-shaping helpers as the
+// editable widgets above, so a text value and its would-be Input widget stay
+// derived from the identical parse (fw#2245). `type: "reference"` isn't
+// covered here — it needs a live label lookup, see ReadOnlyReferenceValue.
+// `isComplexFieldType` types aren't covered either — callers keep those on
+// `renderInput`'s existing Banner fallback.
+function readOnlyDisplayText(field, appLocale) {
+    const { type, value } = field;
+    if (value === undefined || value === null || value === "")
+        return "—";
+    if (type === "text" && field.format === "password")
+        return "••••••••";
+    switch (type) {
+        case "boolean":
+            return applyFormatSpec({ format: "boolean" }, value);
+        case "date":
+            return applyFormatSpec({ format: "date", locale: field.dateLocale ?? appLocale }, value);
+        case "timestamp":
+            return applyFormatSpec({ format: "timestamp", locale: field.dateLocale ?? appLocale }, value);
+        case "locatedTimestamp": {
+            const located = locatedValue(value);
+            if (located === "" || located.at === "")
+                return "—";
+            return applyFormatSpec({ format: "timestamp", locale: field.dateLocale ?? appLocale }, located.utc ?? located.at);
+        }
+        case "number":
+        case "bigInt":
+        case "decimal": {
+            const n = numberValue(value);
+            return n === ""
+                ? "—"
+                : new Intl.NumberFormat(appLocale, { useGrouping: field.grouping ?? true }).format(n);
+        }
+        case "money": {
+            const currency = resolveMoneyCurrency(value, field.currency);
+            const minor = moneyMinorValue(value, currency);
+            if (minor === "")
+                return "—";
+            const major = minor / 10 ** currencyDecimals(currency);
+            return new Intl.NumberFormat(appLocale, { style: "currency", currency }).format(major);
+        }
+        case "select":
+        case "multiSelect": {
+            const labels = field.optionLabels;
+            const values = Array.isArray(value) ? value : [value];
+            if (values.length === 0)
+                return "—";
+            return values
+                .map((v) => (typeof v === "string" ? (labels?.[v] ?? v) : stringValue(v)))
+                .join(", ");
+        }
+        case "file":
+        case "image":
+            return typeof value === "string" ? value : "—";
+        default:
+            return stringValue(value);
+    }
+}