@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

package/dist/components/render-field.js

@@ -1,32 +1,25 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isFormatSpec, SYSTEM_REFERENCE_LABELS, UNRESOLVED_REFERENCE_LABEL_KEYS, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, 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 { useReferenceLinkResolver } from "../app/reference-link.js";
-import { evalRowExtractor } from "../app/row-actions.js";
-import { screenAccessAllows } from "../app/screen-access.js";
-import { useOptionalDispatcher } from "../context/dispatcher-context.js";
-import { useUserRoles } from "../context/user-roles-context.js";
-import { rendererError, rendererWarn } from "../dev-console.js";
-import { fileIdsOf } from "../file-ids-of.js";
-import { applyFormatSpec, currencyDecimals, 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 { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 import { useLocale, useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
-import { AvailabilityOptionsMultiSelect, AvailabilityOptionsSelect, staticSelectOptions, } from "./availability-options-select.js";
-import { EmbeddedListField } from "./embedded-list-field.js";
-import { FileListField } from "./file-list-field.js";
-import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
-import { QueryOptionsSelect } from "./query-options-select.js";
-import { ReferenceCreateDialog } from "./reference-create-dialog.js";
+import { listPrintsOwnIssues, renderControl } from "./render-field-control.js";
+import { inputId } from "./render-field-meta.js";
 const AllFieldsRequiredContext = createContext(false);
 export const AllFieldsRequiredProvider = AllFieldsRequiredContext.Provider;
+function fieldOptionalProps({ issues, printsIssues, labelAppendix, fieldAppendix, appendixPlacement, description, status, changed, layout, accent, hideLabel, }) {
+    return {
+        ...(issues !== undefined && printsIssues && { issues }),
+        ...(labelAppendix !== undefined && { labelAppendix }),
+        ...(fieldAppendix !== undefined && { fieldAppendix }),
+        ...(appendixPlacement !== undefined && { appendixPlacement }),
+        ...(description !== undefined && { description }),
+        ...(status !== undefined && { status }),
+        ...(changed === true && { changed }),
+        ...(layout !== undefined && { layout }),
+        ...(accent === true && { accent }),
+        ...(hideLabel === true && { hideLabel }),
+    };
+}
 export function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay = "form", row, changed, layout, accent, fillDisabled, hideLabel, }) {
     const { Field, Input, Banner, Text, JsonView } = usePrimitives();
     // The app locale is required for money/date inputs; otherwise they fall back
@@ -39,40 +32,16 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
     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.
     const readOnlyText = valueDisplay === "text" && field.readOnly && field.renderer === undefined;
-    // The reference field renders its own component because it uses useQuery()
-    // for the live lookup and must therefore be mounted as a React component,
-    // not called as a pure render function.
-    // The list input prints its own list-level issues (including the empty state),
-    // so the Field wrapper must not print them a second time.
-    const listPrintsOwnIssues = field.type === "embedded" &&
-        field.embeddedListCells !== undefined &&
-        !(field.readOnly && field.renderer !== undefined);
-    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 ?? "" }))) : field.type === "select" && field.selectOptionsQuery !== undefined && !readOnlyText ? (_jsx(QueryOptionsSelect, { field: field, query: field.selectOptionsQuery.query, payload: field.selectOptionsQuery.payload, row: row ?? { [field.field]: field.value }, id: id, hasError: hasError, onChange: onChange })) : field.type === "select" &&
-        field.selectOptionsAvailabilityQuery !== undefined &&
-        !readOnlyText ? (_jsx(AvailabilityOptionsSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, payload: field.selectOptionsAvailabilityQuery.payload, row: row ?? { [field.field]: field.value }, id: id, hasError: hasError, onChange: onChange })) : readOnlyText && !isComplexFieldType(field.type) && !isFileFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale, t) })) : field.type === "text" && field.writeOnly === true && !readOnlyText ? (_jsx(WriteOnlyTextInput, { field: field, id: id, hasError: hasError, onChange: onChange, changed: changed === true })) : field.fillAction !== undefined ? (_jsx(FillActionControl, { field: field, fillAction: field.fillAction, row: row ?? { [field.field]: field.value }, onChange: onChange, disabled: fillDisabled === true, Banner: Banner, renderControl: (fill) => renderInput({
-            field,
-            id,
-            hasError,
-            onChange,
-            Input,
-            appLocale,
-            Banner,
-            Text,
-            JsonView,
-            t,
-            row,
-            fill,
-        }) })) : (renderInput({
+    const control = renderControl({
         field,
         id,
-        hasError,
+        hasError: issues !== undefined && issues.length > 0,
         onChange,
         Input,
         appLocale,
@@ -80,624 +49,24 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
         Text,
         JsonView,
         t,
-        row,
-    }));
-    return (_jsx(Field, { id: id, label: field.label, required: field.required && field.type !== "boolean" && !allFieldsRequired, ...(issues !== undefined && !listPrintsOwnIssues && { issues }), ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(appendixPlacement !== undefined && { appendixPlacement }), ...(description !== undefined && { description }), ...(status !== undefined && { status }), ...(changed === true && { changed }), ...(layout !== undefined && { layout }), ...(accent === true && { accent }), ...(hideLabel === true && { hideLabel }), testId: `field-${field.field}`, children: control }));
-}
-const NUMERIC_FIELD_TYPES = new Set(["number", "bigInt", "decimal"]);
-// A text field takes a number as its string form; a numeric field takes only a
-// number — a string would be sent as a wrong-typed value.
-function fillValueFor(fieldType, result) {
-    if (NUMERIC_FIELD_TYPES.has(fieldType))
-        return typeof result === "number" ? result : undefined;
-    if (typeof result === "string")
-        return result;
-    return typeof result === "number" ? String(result) : undefined;
-}
-// Owns the query state of a fill button. A separate component because RenderField
-// returns early for hidden fields and the dispatcher hook must not be conditional.
-function FillActionControl({ field, fillAction, row, onChange, disabled, Banner, renderControl, }) {
-    const dispatcher = useOptionalDispatcher();
-    const t = useTranslation();
-    const [busy, setBusy] = useState(false);
-    const [failed, setFailed] = useState(false);
-    // A newer click or an unmount cancels the in-flight query so a late answer
-    // cannot overwrite a value the user has since typed.
-    const activeRun = useRef(null);
-    useEffect(() => () => activeRun.current?.abort(), []);
-    const run = async () => {
-        if (dispatcher === undefined) {
-            setFailed(true);
-            return;
-        }
-        activeRun.current?.abort();
-        const ctrl = new AbortController();
-        activeRun.current = ctrl;
-        setBusy(true);
-        setFailed(false);
-        const payload = fillAction.params === undefined ? {} : evalRowExtractor(fillAction.params, row);
-        const result = await dispatcher.query(fillAction.query, payload, {
-            signal: ctrl.signal,
-        });
-        if (ctrl.signal.aborted)
-            return;
-        setBusy(false);
-        if (!result.isSuccess) {
-            setFailed(true);
-            return;
-        }
-        const value = fillValueFor(field.type, propertyOf(result.data, fillAction.field));
-        if (value === undefined) {
-            setFailed(true);
-            return;
-        }
-        onChange(value);
-    };
-    return (_jsxs(_Fragment, { children: [renderControl({
-                label: fillAction.label,
-                onPress: () => void run(),
-                busy,
-                disabled,
-                testId: `field-fill-${field.field}`,
-            }), failed && (_jsx(Banner, { variant: "error", testId: `field-fill-error-${field.field}`, children: t("kumiko.field.fillAction.failed") }))] }));
-}
-// 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".
-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),
-            },
-        }) }));
-}
-// 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).
-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;
-    // refFeature may differ from featureName (for example,
-    // items.assignee → users:query:user:list). The default is the same feature,
-    // as provided by the ViewModel (parseRefTarget).
-    // refOptionsQuery replaces that source with an author-supplied handler whose
-    // rows already carry a composed `label`.
-    const { queryQn, labelKey } = referenceOptionSource(field, refFeature, refEntity);
-    // "+ Neu" in the combobox opens the referenced entity's create screen in a
-    // dialog instead of leaving the current form.
-    // refFeature may differ from the currently rendered feature; appFeatures
-    // (createKumikoApp) knows all feature schemas, not only the active screen.
-    // If the feature, screen, or entity is not registered, or allowCreate:false,
-    // onCreate remains undefined and the combobox renders without the 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];
-    // When the user types in the combobox, the server filters through the
-    // existing list-payload `search` parameter. The combobox debounces the
-    // keystroke itself (300ms) and calls onSearchChange.
-    // An empty initial state requests the first 50 items in default order.
-    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) => {
-            rendererError("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 = stringArrayOf(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 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 || (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 = 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] }));
-}
-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, FileValueList } = usePrimitives();
-    const t = useTranslation();
-    const valueTestId = `field-value-${field.field}`;
-    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.
-        if (renderer.format === "json" && JsonView !== undefined) {
-            return _jsx(JsonView, { value: field.value, indent: renderer.indent, testId: valueTestId });
-        }
-        if (renderer.format === "file" && FileValueList !== undefined) {
-            const fileIds = fileIdsOf(field.value);
-            if (fileIds.length === 0)
-                return _jsx(Text, { testId: valueTestId, children: EMPTY_VALUE_PLACEHOLDER });
-            return (_jsx(FileValueList, { fileIds: fileIds, previewOpenByDefault: renderer.previewOpenByDefault === true, testId: valueTestId }));
-        }
-        // 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. Prefer renderer.locale
-        // when set; coalesce undefined (spread override) back to appLocale.
-        return (_jsx(Text, { testId: valueTestId, children: applyFormatSpec({
-                ...renderer,
-                locale: stringPropertyOf(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 } }));
-        }
-        rendererWarn(`[kumiko] fieldRenderer "${componentName}" not registered`);
-    }
-    return _jsx(Text, { testId: valueTestId, 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, 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,
+        readOnlyText,
+        featureName,
+        allIssues,
+        changed,
+        fillDisabled,
+        ...(row !== undefined && { row }),
     });
-    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))) }));
-}
-// Field types whose read display already isn't a boxed "disabled input" look
-// (embedded/jsonb render as an info 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";
-}
-// Read-only file fields keep their (disabled) widget: it shows a thumbnail or
-// the file name, where plain text could only show the FileRef UUID.
-function isFileFieldType(type) {
-    return type === "file" || type === "image" || 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; truly unknown scalar types still fall back to text.
-function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, JsonView, t, row, fill, }) {
-    const common = {
-        id,
-        name: field.field,
-        disabled: field.readOnly,
-        required: field.required,
-        hasError,
-    };
-    const placeholderProp = field.placeholder !== undefined ? { placeholder: field.placeholder } : {};
-    const prefix = resolveAffix(field.prefix, row);
-    const suffix = resolveAffix(field.suffix, row);
-    const affixProps = {
-        ...(prefix !== undefined && { prefix }),
-        ...(suffix !== undefined && { suffix }),
-        ...(fill !== undefined && { fill }),
-    };
-    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.
-        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), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(field.type === "bigInt" && { integer: true }), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
-        }
-        case "decimal": {
-            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 }) }));
-        }
-        case "tz":
-            return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
-        case "multiSelect": {
-            const arrayValue = stringArrayOf(field.value);
-            const renderMultiSelect = (options) => field.display === "checkboxes" ? (_jsx(MultiSelectCheckboxes, { field: field, id: id, options: options, value: arrayValue, onChange: (v) => onChange(v) })) : (_jsx(Input, { kind: "combobox", ...common, multiple: true, value: arrayValue, onChange: (v) => onChange(withPinnedValues(v, options, arrayValue)), options: options }));
-            if (field.selectOptionsAvailabilityQuery !== undefined && field.readOnly !== true) {
-                return (_jsx(AvailabilityOptionsMultiSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, initialValues: arrayValue, children: renderMultiSelect }));
-            }
-            return renderMultiSelect(staticSelectOptions(field));
-        }
-        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 come from the ViewModel builder
-            // (computeEditViewModel, convention key
-            // `<feature>:entity:<entity>:field:<field>:option:<value>`).
-            // If no translations are registered, fall back to the raw value as the
-            // label, which ComboboxInput then shows unchanged.
-            const selectOptions = field.optionLabels !== undefined ? staticSelectOptions(field) : (field.options ?? []);
-            // `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.uploadActionForm !== undefined && {
-                    uploadActionForm: field.uploadActionForm,
-                }), ...(field.entityId !== undefined && { entityId: field.entityId }), ...(field.fieldName !== undefined && { fieldName: field.fieldName }), ...(field.imageVariant !== undefined && { imageVariant: field.imageVariant }), ...(field.capture !== undefined && { capture: field.capture }) }));
-        }
-        case "files":
-        case "images":
-            return (_jsx(FileListField, { field: field, id: id, kind: field.type === "images" ? "image" : "file", hasError: hasError, onChange: (ids) => onChange(ids) }));
-        // embedded (without embeddedListCells — that's embeddedList, which has
-        // had its own EmbeddedListField widget) and jsonb carry
-        // arbitrary objects. Without a dedicated widget these must NOT fall
-        // through to a text input: stringValue() turns them into
-        // "[object Object]" and saving that overwrites the real data with the
-        // mangled string. A `required: true` on either is caught loudly
-        // at boot (validateNoWidgetRequiredField in the framework package)
-        // instead of silently failing here.
-        case "embedded":
-        case "jsonb": {
-            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) }));
-            }
-            if (field.type === "text" && field.format === "month") {
-                return (_jsx(Input, { kind: "month", ...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.
-            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 }), ...placeholderProp }));
-            }
-            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 }) }));
-        }
-    }
-}
-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.
-// 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}$/;
-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.
-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.
-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;
-}
-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.
-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];
-}
-function stringPropertyOf(value, key) {
-    const property = propertyOf(value, key);
-    return typeof property === "string" ? property : 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 = 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).
-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.
-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 "";
-}
-// 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. `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, t) {
-    const { type, value } = field;
-    if (value === undefined || value === null || value === "")
-        return EMPTY_VALUE_PLACEHOLDER;
-    if (type === "text" && field.writeOnly === true)
-        return t("kumiko.field.writeOnly.set");
-    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 EMPTY_VALUE_PLACEHOLDER;
-            return applyFormatSpec({ format: "timestamp", locale: field.dateLocale ?? appLocale }, located.utc ?? located.at);
-        }
-        case "number":
-        case "bigInt":
-        case "decimal": {
-            const n = numberValue(value);
-            return n === ""
-                ? EMPTY_VALUE_PLACEHOLDER
-                : 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 EMPTY_VALUE_PLACEHOLDER;
-            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 EMPTY_VALUE_PLACEHOLDER;
-            return values
-                .map((v) => (typeof v === "string" ? (labels?.[v] ?? v) : stringValue(v)))
-                .join(", ");
-        }
-        default:
-            return stringValue(value);
-    }
+    return (_jsx(Field, { id: id, label: field.label, required: field.required && field.type !== "boolean" && !allFieldsRequired, ...fieldOptionalProps({
+            issues,
+            printsIssues: !listPrintsOwnIssues(field),
+            labelAppendix,
+            fieldAppendix,
+            appendixPlacement,
+            description,
+            status,
+            changed,
+            layout,
+            accent,
+            hideLabel,
+        }), testId: `field-${field.field}`, children: control }));
 }