@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { RenderInputArgs, SharedInputProps } from "./render-field-input-shared.ts";
+export declare function renderMultiSelectInput(args: RenderInputArgs, shared: SharedInputProps): ReactNode;
+export declare function renderSelectInput({ field, Input, onChange }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderFileInput({ field, Input, onChange }: RenderInputArgs, { common }: SharedInputProps): ReactNode;
+export declare function renderFileListInput({ field, id, hasError, onChange }: RenderInputArgs): ReactNode;
+export declare function renderUnsupportedInput({ field, id, Banner, Text, JsonView, t, }: RenderInputArgs): ReactNode;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvailabilityOptionsMultiSelect, staticSelectOptions, } from "./availability-options-select.js";
+import { FileListField } from "./file-list-field.js";
+import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
+import { stringArrayOf, stringValue, withPinnedValues } from "./render-field-values.js";
+function renderMultiSelectControl({ field, id, Input, onChange }, { common }, options, arrayValue) {
+    return 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 }));
+}
+export function renderMultiSelectInput(args, shared) {
+    const { field } = args;
+    const arrayValue = stringArrayOf(field.value);
+    const renderControl = (options) => renderMultiSelectControl(args, shared, options, arrayValue);
+    if (field.selectOptionsAvailabilityQuery !== undefined && field.readOnly !== true) {
+        return (_jsx(AvailabilityOptionsMultiSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, initialValues: arrayValue, children: renderControl }));
+    }
+    return renderControl(staticSelectOptions(field));
+}
+export function renderSelectInput({ field, Input, onChange }, { common }) {
+    // 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 }) }));
+}
+export function renderFileInput({ field, Input, onChange }, { common }) {
+    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 }) }));
+}
+export function renderFileListInput({ field, id, hasError, onChange }) {
+    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.
+export function renderUnsupportedInput({ field, id, Banner, Text, JsonView, t, }) {
+    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) })))] }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { EditFieldViewModel, FieldIssue } from "../headless/index.ts";
+import type { RenderInputArgs } from "./render-field-input-shared.ts";
+export type ControlContext = RenderInputArgs & {
+    readonly readOnlyText: boolean;
+    readonly featureName: string | undefined;
+    readonly allIssues: Readonly<Record<string, readonly FieldIssue[]>> | undefined;
+    readonly changed: boolean | undefined;
+    readonly fillDisabled: boolean | undefined;
+};
+export declare function listPrintsOwnIssues(field: EditFieldViewModel): boolean;
+export declare function renderControl(ctx: ControlContext): ReactNode;

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AvailabilityOptionsSelect } from "./availability-options-select.js";
+import { EmbeddedListField } from "./embedded-list-field.js";
+import { QueryOptionsSelect } from "./query-options-select.js";
+import { FillActionControl } from "./render-field-fill-action.js";
+import { renderInput } from "./render-field-input.js";
+import { isComplexFieldType, isFileFieldType } from "./render-field-meta.js";
+import { FieldRendererOutput, readOnlyDisplayText } from "./render-field-read-only.js";
+import { ReadOnlyReferenceValue, ReferenceInput } from "./render-field-reference.js";
+import { WriteOnlyTextInput } from "./render-field-write-only.js";
+function rowOf({ field, row }) {
+    return row ?? { [field.field]: field.value };
+}
+// The list input prints its own list-level issues (including the empty state),
+// so the Field wrapper must not print them a second time.
+export function listPrintsOwnIssues(field) {
+    return (field.type === "embedded" &&
+        field.embeddedListCells !== undefined &&
+        !(field.readOnly && field.renderer !== undefined));
+}
+// An author-declared renderer always wins over the input widget, same as
+// the list-column path (render-list.tsx).
+const fieldRendererRule = ({ field, appLocale, row }) => {
+    if (!field.readOnly || field.renderer === undefined)
+        return undefined;
+    return (_jsx(FieldRendererOutput, { field: field, renderer: field.renderer, appLocale: appLocale, ...(row !== undefined && { row }) }));
+};
+const embeddedListRule = ({ field, id, onChange, allIssues, featureName }) => {
+    if (field.type !== "embedded" || field.embeddedListCells === undefined)
+        return undefined;
+    return (_jsx(EmbeddedListField, { field: field, id: id, onChange: onChange, allIssues: allIssues ?? {}, featureName: featureName ?? "" }));
+};
+// 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.
+const referenceRule = ({ field, id, hasError, onChange, Input, featureName, readOnlyText, }) => {
+    if (field.type !== "reference")
+        return undefined;
+    if (readOnlyText) {
+        return _jsx(ReadOnlyReferenceValue, { field: field, featureName: featureName ?? "" });
+    }
+    return (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }));
+};
+const selectQueryRule = (ctx) => {
+    const { field, id, hasError, onChange, readOnlyText } = ctx;
+    const source = field.selectOptionsQuery;
+    if (field.type !== "select" || source === undefined || readOnlyText)
+        return undefined;
+    return (_jsx(QueryOptionsSelect, { field: field, query: source.query, payload: source.payload, row: rowOf(ctx), id: id, hasError: hasError, onChange: onChange }));
+};
+const selectAvailabilityRule = (ctx) => {
+    const { field, id, hasError, onChange, readOnlyText } = ctx;
+    const source = field.selectOptionsAvailabilityQuery;
+    if (field.type !== "select" || source === undefined || readOnlyText)
+        return undefined;
+    return (_jsx(AvailabilityOptionsSelect, { field: field, query: source.query, payload: source.payload, row: rowOf(ctx), id: id, hasError: hasError, onChange: onChange }));
+};
+const readOnlyTextRule = ({ field, Text, appLocale, t, readOnlyText }) => {
+    if (!readOnlyText || isComplexFieldType(field.type) || isFileFieldType(field.type)) {
+        return undefined;
+    }
+    return (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale, t) }));
+};
+const writeOnlyRule = ({ field, id, hasError, onChange, changed, readOnlyText }) => {
+    if (field.type !== "text" || field.writeOnly !== true || readOnlyText)
+        return undefined;
+    return (_jsx(WriteOnlyTextInput, { field: field, id: id, hasError: hasError, onChange: onChange, changed: changed === true }));
+};
+const fillActionRule = (ctx) => {
+    const { field, onChange, fillDisabled, Banner } = ctx;
+    const fillAction = field.fillAction;
+    if (fillAction === undefined)
+        return undefined;
+    return (_jsx(FillActionControl, { field: field, fillAction: fillAction, row: rowOf(ctx), onChange: onChange, disabled: fillDisabled === true, Banner: Banner, renderControl: (fill) => renderInput({ ...ctx, fill }) }));
+};
+const CONTROL_RULES = [
+    fieldRendererRule,
+    embeddedListRule,
+    referenceRule,
+    selectQueryRule,
+    selectAvailabilityRule,
+    readOnlyTextRule,
+    writeOnlyRule,
+    fillActionRule,
+];
+export function renderControl(ctx) {
+    for (const rule of CONTROL_RULES) {
+        const control = rule(ctx);
+        if (control !== undefined)
+            return control;
+    }
+    return renderInput(ctx);
+}

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

@@ -0,0 +1,4 @@
+import { type EditFieldViewModel } from "../headless/index.ts";
+export type DisplayText = (field: EditFieldViewModel, value: unknown, appLocale: string) => string;
+export declare const DISPLAY_TEXT_BY_TYPE: ReadonlyMap<string, DisplayText>;
+export declare const defaultDisplayText: DisplayText;

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

@@ -0,0 +1,48 @@
+import { applyFormatSpec, currencyDecimals, EMPTY_VALUE_PLACEHOLDER, } from "../headless/index.js";
+import { locatedValue, moneyMinorValue, numberValue, resolveMoneyCurrency, stringValue, } from "./render-field-values.js";
+const booleanText = (_field, value) => applyFormatSpec({ format: "boolean" }, value);
+const dateText = (field, value, appLocale) => applyFormatSpec({ format: "date", locale: field.dateLocale ?? appLocale }, value);
+const timestampText = (field, value, appLocale) => applyFormatSpec({ format: "timestamp", locale: field.dateLocale ?? appLocale }, value);
+const locatedTimestampText = (field, value, appLocale) => {
+    const located = locatedValue(value);
+    if (located === "" || located.at === "")
+        return EMPTY_VALUE_PLACEHOLDER;
+    return timestampText(field, located.utc ?? located.at, appLocale);
+};
+const numberText = (field, value, appLocale) => {
+    const n = numberValue(value);
+    return n === ""
+        ? EMPTY_VALUE_PLACEHOLDER
+        : new Intl.NumberFormat(appLocale, { useGrouping: field.grouping ?? true }).format(n);
+};
+const moneyText = (field, value, appLocale) => {
+    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);
+};
+const selectText = (field, value) => {
+    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(", ");
+};
+// A Map (not an object) so prototype keys like "constructor" never match.
+export const DISPLAY_TEXT_BY_TYPE = new Map([
+    ["boolean", booleanText],
+    ["date", dateText],
+    ["timestamp", timestampText],
+    ["locatedTimestamp", locatedTimestampText],
+    ["number", numberText],
+    ["bigInt", numberText],
+    ["decimal", numberText],
+    ["money", moneyText],
+    ["select", selectText],
+    ["multiSelect", selectText],
+]);
+export const defaultDisplayText = (_field, value) => stringValue(value);

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

@@ -0,0 +1,13 @@
+import type { FieldFillAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import type { EditFieldViewModel } from "../headless/index.ts";
+import type { InputFillAction, usePrimitives } from "../primitives.tsx";
+export declare function FillActionControl({ field, fillAction, row, onChange, disabled, Banner, renderControl, }: {
+    readonly field: EditFieldViewModel;
+    readonly fillAction: FieldFillAction;
+    readonly row: Readonly<Record<string, unknown>>;
+    readonly onChange: (value: unknown) => void;
+    readonly disabled: boolean;
+    readonly Banner: ReturnType<typeof usePrimitives>["Banner"];
+    readonly renderControl: (fill: InputFillAction) => ReactNode;
+}): ReactNode;

package/dist/components/render-field-fill-action.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { useEffect, useRef, useState } from "react";
+import { evalRowExtractor } from "../app/row-actions.js";
+import { useOptionalDispatcher } from "../context/dispatcher-context.js";
+import { useTranslation } from "../i18n.js";
+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.
+export 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") }))] }));
+}

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { EditFieldViewModel } from "../headless/index.ts";
+import type { useTranslation } from "../i18n.tsx";
+import type { InputFillAction, usePrimitives } from "../primitives.tsx";
+type Primitives = ReturnType<typeof usePrimitives>;
+export type RenderInputArgs = {
+    readonly field: EditFieldViewModel;
+    readonly id: string;
+    readonly hasError: boolean;
+    readonly onChange: (value: unknown) => void;
+    readonly Input: Primitives["Input"];
+    readonly appLocale: string;
+    readonly Banner: Primitives["Banner"];
+    readonly Text: Primitives["Text"];
+    readonly JsonView: Primitives["JsonView"];
+    readonly t: ReturnType<typeof useTranslation>;
+    readonly row?: Readonly<Record<string, unknown>>;
+    readonly fill?: InputFillAction;
+};
+export type SharedInputProps = {
+    readonly common: {
+        readonly id: string;
+        readonly name: string;
+        readonly disabled: boolean;
+        readonly required: boolean;
+        readonly hasError: boolean;
+    };
+    readonly placeholderProp: {
+        readonly placeholder?: string;
+    };
+    readonly affixProps: {
+        readonly prefix?: string;
+        readonly suffix?: string;
+        readonly fill?: InputFillAction;
+    };
+};
+export type InputRenderer = (args: RenderInputArgs, shared: SharedInputProps) => ReactNode;
+export declare function sharedInputProps({ field, id, hasError, row, fill, }: RenderInputArgs): SharedInputProps;
+export {};

package/dist/components/render-field-input-shared.js

@@ -0,0 +1,20 @@
+import { resolveAffix } from "./render-field-values.js";
+export function sharedInputProps({ field, id, hasError, row, fill, }) {
+    const prefix = resolveAffix(field.prefix, row);
+    const suffix = resolveAffix(field.suffix, row);
+    return {
+        common: {
+            id,
+            name: field.field,
+            disabled: field.readOnly,
+            required: field.required,
+            hasError,
+        },
+        placeholderProp: field.placeholder !== undefined ? { placeholder: field.placeholder } : {},
+        affixProps: {
+            ...(prefix !== undefined && { prefix }),
+            ...(suffix !== undefined && { suffix }),
+            ...(fill !== undefined && { fill }),
+        },
+    };
+}

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

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

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

@@ -0,0 +1,34 @@
+import { renderFileInput, renderFileListInput, renderMultiSelectInput, renderSelectInput, renderUnsupportedInput, } from "./render-field-choice-inputs.js";
+import { sharedInputProps, } from "./render-field-input-shared.js";
+import { renderBooleanInput, renderDateInput, renderDecimalInput, renderLocatedTimestampInput, renderMoneyInput, renderNumberInput, renderTimestampInput, renderTzInput, } from "./render-field-scalar-inputs.js";
+import { renderFallbackInput } from "./render-field-text-inputs.js";
+// A Map, not an object: `field.type` is data, and a bare object lookup would
+// resolve inherited keys like "constructor".
+const INPUT_RENDERERS = new Map([
+    ["number", renderNumberInput],
+    ["bigInt", renderNumberInput],
+    ["decimal", renderDecimalInput],
+    ["tz", renderTzInput],
+    ["multiSelect", renderMultiSelectInput],
+    ["money", renderMoneyInput],
+    ["boolean", renderBooleanInput],
+    ["date", renderDateInput],
+    ["timestamp", renderTimestampInput],
+    ["locatedTimestamp", renderLocatedTimestampInput],
+    ["select", renderSelectInput],
+    ["file", renderFileInput],
+    ["image", renderFileInput],
+    ["files", renderFileListInput],
+    ["images", renderFileListInput],
+    ["embedded", renderUnsupportedInput],
+    ["jsonb", renderUnsupportedInput],
+]);
+// 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.
+export function renderInput(args) {
+    const render = INPUT_RENDERERS.get(args.field.type) ?? renderFallbackInput;
+    return render(args, sharedInputProps(args));
+}

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

@@ -0,0 +1,6 @@
+import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EditFieldViewModel } from "../headless/index.ts";
+export declare function inputId(field: EditFieldViewModel): string;
+export declare function isComplexFieldType(type: string): boolean;
+export declare function isFileFieldType(type: string): boolean;
+export declare function resolveFieldIcon(field: EditFieldViewModel): FieldIconKey | undefined;

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

@@ -0,0 +1,51 @@
+import { toKebab } from "../app/qn.js";
+export function inputId(field) {
+    return `kumiko-edit-${field.field}`;
+}
+// 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.
+export 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.
+export 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.
+export 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;
+}

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

@@ -0,0 +1,11 @@
+import { type FieldRenderer } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { ReactNode } from "react";
+import { type EditFieldViewModel } from "../headless/index.ts";
+import { useTranslation } from "../i18n.tsx";
+export declare function FieldRendererOutput({ field, renderer, row, appLocale, }: {
+    readonly field: EditFieldViewModel;
+    readonly renderer: FieldRenderer;
+    readonly row?: Readonly<Record<string, unknown>>;
+    readonly appLocale: string;
+}): ReactNode;
+export declare function readOnlyDisplayText(field: EditFieldViewModel, appLocale: string, t: ReturnType<typeof useTranslation>): string;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isFormatSpec } from "@cosmicdrift/kumiko-framework/ui-types";
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { useColumnRenderer } from "../app/column-renderers.js";
+import { extensionSectionName } from "../app/extension-sections.js";
+import { rendererWarn } from "../dev-console.js";
+import { fileIdsOf } from "../file-ids-of.js";
+import { applyFormatSpec, EMPTY_VALUE_PLACEHOLDER, } from "../headless/index.js";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { DISPLAY_TEXT_BY_TYPE, defaultDisplayText } from "./render-field-display-text.js";
+import { stringValue } from "./render-field-values.js";
+// Doesn't resolve the `string` (cross-feature QN) FieldRenderer variant — the
+// list-column path (DataTableCell) doesn't either, so this stays in parity.
+export 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) });
+}
+function stringPropertyOf(value, key) {
+    const property = propertyOf(value, key);
+    return typeof property === "string" ? property : undefined;
+}
+// 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.
+export 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 "••••••••";
+    const toText = DISPLAY_TEXT_BY_TYPE.get(type) ?? defaultDisplayText;
+    return toText(field, value, appLocale);
+}

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type EditFieldViewModel } from "../headless/index.ts";
+import { usePrimitives } from "../primitives.tsx";
+export declare function ReferenceInput({ field, id, hasError, onChange, Input, featureName, }: {
+    readonly field: EditFieldViewModel;
+    readonly id: string;
+    readonly hasError: boolean;
+    readonly onChange: (value: unknown) => void;
+    readonly Input: ReturnType<typeof usePrimitives>["Input"];
+    readonly featureName: string;
+}): ReactNode;
+export declare function ReadOnlyReferenceValue({ field, featureName, }: {
+    readonly field: EditFieldViewModel;
+    readonly featureName: string;
+}): ReactNode;