@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/SchemaForm.js

@@ -35,10 +35,13 @@ import { Label } from '@object-ui/components';
 import { Switch } from '@object-ui/components';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
 import { Button } from '@object-ui/components';
-import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
+import { Plus, Trash2, ChevronDown, ChevronRight, GripVertical, Settings2 } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@object-ui/components';
 import { Tabs, TabsList, TabsTrigger, TabsContent, } from '@object-ui/components';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, } from '@object-ui/components';
 import { evaluatePredicate } from './predicate';
 import { WIDGETS } from './widgets';
+import { detectLocale, t, tFormat, translateValidationMessage } from './i18n';
 /** Widgets that don't need a custom renderer — they overlay on the
  * existing default control (textarea/input/etc) and just act as a hint. */
 const KNOWN_PASSTHROUGH_WIDGETS = new Set([
@@ -49,6 +52,72 @@ const KNOWN_PASSTHROUGH_WIDGETS = new Set([
     'select',
     'json',
 ]);
+/**
+ * Pick the best-matching branch of a JSON Schema `oneOf` / `anyOf`
+ * union for the given value. Scores each branch by how many of its
+ * `required` keys are present in the value (and same `type`); falls
+ * back to the first branch when nothing matches (so create-mode forms
+ * with empty values still render *something* structured).
+ *
+ * Returns the original schema unchanged when there's no union to
+ * resolve. Used by the recursive renderer so View `data` (provider
+ * discriminator), `columns`, `sort`, etc. produce real labelled
+ * inputs instead of a raw JSON blob.
+ */
+function resolveUnionBranch(schema, value) {
+    if (!schema)
+        return schema;
+    const branches = (schema.oneOf ?? schema.anyOf);
+    if (!Array.isArray(branches) || branches.length === 0)
+        return schema;
+    const isPlainObj = value != null && typeof value === 'object' && !Array.isArray(value);
+    const isArray = Array.isArray(value);
+    const valKeys = isPlainObj ? new Set(Object.keys(value)) : null;
+    let best = null;
+    const firstItem = isArray && value.length ? value[0] : undefined;
+    const firstItemIsObj = firstItem != null && typeof firstItem === 'object' && !Array.isArray(firstItem);
+    for (const b of branches) {
+        let score = 0;
+        if (b.type === 'array' && isArray) {
+            score += 5;
+            // Tiebreaker for `anyOf [array<string>, array<object>]` etc — match the
+            // branch's items.type against the actual element type.
+            const itemType = b.items?.type;
+            if (itemType === 'object' && firstItemIsObj)
+                score += 3;
+            else if ((itemType === 'string' && typeof firstItem === 'string') ||
+                (itemType === 'number' && typeof firstItem === 'number') ||
+                (itemType === 'integer' && typeof firstItem === 'number'))
+                score += 3;
+        }
+        if (b.type === 'object' && isPlainObj)
+            score += 5;
+        if (b.type === 'string' && typeof value === 'string')
+            score += 5;
+        if (b.type === 'number' && typeof value === 'number')
+            score += 5;
+        if (b.type === 'boolean' && typeof value === 'boolean')
+            score += 5;
+        if (valKeys && Array.isArray(b.required)) {
+            for (const r of b.required) {
+                if (valKeys.has(r))
+                    score += 1;
+            }
+        }
+        if (!best || score > best.score)
+            best = { branch: b, score };
+    }
+    // Merge the branch's shape on top of any parent metadata (title /
+    // description) so the recursive renderer still sees the field's
+    // documentation.
+    const picked = best?.branch ?? branches[0];
+    return {
+        ...schema,
+        ...picked,
+        oneOf: undefined,
+        anyOf: undefined,
+    };
+}
 /**
  * Infer widget name from FormFieldSpec.type (Data.FieldType) and schema.
  * Priority: explicit widget > type-based inference > schema-based inference > default.
@@ -86,6 +155,8 @@ function inferWidget(fieldSpec, schema) {
             return 'composite';
         if (t === 'repeater')
             return 'repeater';
+        if (t === 'record')
+            return 'record';
         // Relational
         if (t === 'lookup' || t === 'master_detail')
             return 'ref-object';
@@ -124,6 +195,11 @@ function inferWidget(fieldSpec, schema) {
     // 3. Infer from JSON Schema
     if (schema) {
         const type = schema.type;
+        // Array of enum → multi-select of the allowed values (picker, not free
+        // text). Checked before the generic string-array case because a Zod
+        // `z.enum` serialises as `items: { type: 'string', enum: [...] }`.
+        if (type === 'array' && Array.isArray(schema.items?.enum))
+            return 'multiselect';
         // Array of strings → string-tags
         if (type === 'array' && schema.items?.type === 'string')
             return 'string-tags';
@@ -155,6 +231,111 @@ function inferWidget(fieldSpec, schema) {
     // 4. Default fallback
     return undefined;
 }
+/**
+ * Detect a field-reference widget by NAME CONVENTION, gated on having an
+ * object field catalog in `widgetContext`. This is what makes every view
+ * type's field-reference config (titleField, groupByField, startDateField,
+ * xAxisField, visibleFields, yAxisFields, …) render as an object-field
+ * picker instead of free text — without hardcoding per-type knowledge.
+ *
+ * Convention (spec props carry no `format:'field'` marker, so name + shape
+ * is the pragmatic signal):
+ *   • SINGLE (`field-ref`): a string prop named `*Field` (or bare `field`),
+ *     excluding enum props (those are real selects).
+ *   • MULTI  (`field-multi`): an array-of-strings prop named `*Fields`
+ *     (or `columns` / `fieldOrder`).
+ */
+function detectFieldRefWidget(name, schema, widgetContext) {
+    if (!widgetContext?.objectFields)
+        return undefined;
+    if (Array.isArray(schema?.enum))
+        return undefined;
+    const isStringArray = schema?.type === 'array' &&
+        schema.items?.type === 'string';
+    if (isStringArray && (/Fields$/.test(name) || name === 'columns' || name === 'fieldOrder')) {
+        return 'field-multi';
+    }
+    const isString = schema?.type === 'string' ||
+        (Array.isArray(schema?.anyOf) &&
+            schema.anyOf.some((b) => b?.type === 'string'));
+    if (isString && (/.Field$/.test(name) || name === 'field')) {
+        return 'field-ref';
+    }
+    return undefined;
+}
+/**
+ * Detect the icon picker by NAME CONVENTION: a string prop named `icon` (or
+ * `*Icon`) with no enum. Mirrors {@link detectFieldRefWidget} so every metadata
+ * type's icon field renders the searchable Lucide picker instead of a free-text
+ * input, without each spec `*.form.ts` having to pin `widget: 'icon'`.
+ */
+function detectIconWidget(name, schema) {
+    if (Array.isArray(schema?.enum))
+        return undefined;
+    const isString = schema?.type === 'string' ||
+        (Array.isArray(schema?.anyOf) && schema.anyOf.some((b) => b?.type === 'string'));
+    if (!isString)
+        return undefined;
+    if (name === 'icon' || /Icon$/.test(name))
+        return 'icon';
+    return undefined;
+}
+/**
+ * Detect the color swatch picker by NAME CONVENTION: a string field named
+ * `color`, `colorVariant`, or `*Color`. An enum gets the semantic swatch row;
+ * a free string gets the native hex picker. Mirrors the icon/field-ref
+ * conventions so color fields are consistent across every metadata type.
+ */
+function detectColorWidget(name, schema) {
+    const isString = schema?.type === 'string' ||
+        Array.isArray(schema?.enum) ||
+        (Array.isArray(schema?.anyOf) && schema.anyOf.some((b) => b?.type === 'string'));
+    if (!isString)
+        return undefined;
+    if (name === 'color' || name === 'colorVariant' || /Color$/.test(name))
+        return 'color-picker';
+    return undefined;
+}
+const CONDITION_FIELD_NAMES = new Set(['visible', 'hidden', 'disabled', 'visibleOn', 'condition', 'predicate']);
+/**
+ * Detect a CEL predicate field by NAME CONVENTION (`visible` / `hidden` /
+ * `disabled` / `visibleOn` / `condition` / `*When`) so it renders the no-code
+ * condition builder instead of a raw expression text box. String-only, no enum.
+ */
+function detectConditionWidget(name, schema) {
+    if (Array.isArray(schema?.enum))
+        return undefined;
+    const isString = schema?.type === 'string' ||
+        (Array.isArray(schema?.anyOf) && schema.anyOf.some((b) => b?.type === 'string'));
+    if (!isString)
+        return undefined;
+    if (CONDITION_FIELD_NAMES.has(name) || /When$/.test(name))
+        return 'condition';
+    return undefined;
+}
+const SECRET_FIELD_NAME_RE = /(^|_)(secret|token|api[_-]?key|access[_-]?key|client[_-]?secret|credential|private[_-]?key|passphrase)$/i;
+/**
+ * Detect a write-only credential field → the masked `secret` widget. The
+ * reliable signals are `format: 'password'` (driver configSchemas use this) and
+ * JSON-Schema `writeOnly: true`; a conservative NAME CONVENTION (secret / token
+ * / apiKey / accessKey / clientSecret / credential / privateKey / passphrase)
+ * is the secondary cue. So credential fields render masked + write-only on every
+ * metadata type, without each spec pinning `widget: 'secret'`. Bare `password`
+ * is intentionally NOT matched here (auth owns that field, one-way hashed).
+ */
+function detectSecretWidget(name, schema) {
+    if (schema?.format === 'password' || schema?.writeOnly === true)
+        return 'secret';
+    if (Array.isArray(schema?.enum))
+        return undefined;
+    const isString = schema?.type === 'string' ||
+        (Array.isArray(schema?.anyOf) && schema.anyOf.some((b) => b?.type === 'string'));
+    if (!isString)
+        return undefined;
+    if (SECRET_FIELD_NAME_RE.test(name))
+        return 'secret';
+    return undefined;
+}
 export function SchemaForm({ schema, form, value, onChange, issues = [], hiddenFields = [], fieldOrder = [], readOnly = false, createMode = false, widgetContext, }) {
     // No schema → synthesize one from the value's top-level keys so the
     // form renderer can still produce a structured, labelled view (with
@@ -181,8 +362,9 @@ export function SchemaForm({ schema, form, value, onChange, issues = [], hiddenF
     const issuesByPath = React.useMemo(() => {
         var _a;
         const map = {};
+        const locale = detectLocale();
         for (const i of issues) {
-            (map[_a = i.path] ?? (map[_a] = [])).push(i.message);
+            (map[_a = i.path] ?? (map[_a] = [])).push(translateValidationMessage(i.message, locale));
         }
         return map;
     }, [issues]);
@@ -196,10 +378,36 @@ export function SchemaForm({ schema, form, value, onChange, issues = [], hiddenF
     }
     // If the framework provided a FormView layout, render sections (tabbed
     // or simple). Otherwise fall through to the flat property list.
+    //
+    // Guard: when none of the fields declared by the layout actually exist
+    // in the JSON schema (typically because the schema was reshaped under
+    // a nested wrapper, e.g. `view` now bundles its props under
+    // `list/form/listViews/formViews`), the layout would render a wall of
+    // amber "missing from schema" warnings and nothing else. Detect that
+    // total mismatch and fall through to the flat schema-driven
+    // rendering so the user still gets a usable form.
     if (form?.sections?.length) {
-        return (_jsx(SectionedSchemaForm, { form: form, props: props, required: required, hiddenFields: hiddenFields, issuesByPath: issuesByPath, value: v, readOnly: readOnly, createMode: createMode, widgetContext: widgetContext, onChange: setField }));
+        const declaredFields = [];
+        for (const s of form.sections) {
+            for (const f of s.fields) {
+                declaredFields.push(typeof f === 'string' ? f : f.field);
+            }
+        }
+        const matched = declaredFields.filter((f) => props[f]).length;
+        const usable = declaredFields.length === 0 || matched > 0;
+        if (usable) {
+            return (_jsx(SectionedSchemaForm, { form: form, props: props, required: required, hiddenFields: hiddenFields, issuesByPath: issuesByPath, value: v, readOnly: readOnly, createMode: createMode, widgetContext: widgetContext, onChange: setField }));
+        }
+        if (typeof console !== 'undefined') {
+            console.warn('[SchemaForm] form layout declares no fields that exist in the schema; ' +
+                'falling back to flat schema-driven rendering. Declared:', declaredFields, 'Available:', Object.keys(props));
+        }
     }
-    return (_jsx("div", { className: "space-y-4", children: keys.map((key) => (_jsx(FieldRow, { name: key, schema: props[key], value: v[key], required: required.includes(key), issues: issuesByPath[key], readOnly: readOnly, widgetContext: widgetContext, formData: v, onChange: (val) => setField(key, val) }, key))) }));
+    return (_jsx("div", { className: "space-y-4", children: keys.map((key) => (_jsx(FieldRow, { name: key, schema: props[key], value: v[key], required: required.includes(key), issues: issuesByPath[key], readOnly: readOnly, widgetContext: widgetContext, 
+            // Honor an explicit `widget` declared on a raw JSON-schema property
+            // (e.g. createSchema's `object: { widget: 'ref:object' }`) so the
+            // flat auto-form can use rich pickers, not just type inference.
+            fieldSpec: props[key]?.widget ? { field: key, widget: props[key].widget } : undefined, formData: v, onChange: (val) => setField(key, val) }, key))) }));
 }
 /* ----- sectioned layout (FormView spec) ---------------------------------- */
 function normaliseField(f) {
@@ -225,20 +433,29 @@ function SectionedSchemaForm({ form, props, required, hiddenFields, issuesByPath
         if (fields.length === 0)
             return null;
         const cols = s.columns ?? 1;
-        return (_jsxs("section", { className: "space-y-3 rounded-md border border-border/40 bg-card/30 p-4", children: [s.label && (_jsxs("header", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground/90", children: s.label }), s.description && (_jsx("p", { className: "text-xs text-muted-foreground", children: s.description }))] })), _jsx("div", { className: "grid gap-4", style: {
-                        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-                    }, children: fields.map((f) => {
-                        const propSchema = props[f.field];
-                        if (!propSchema) {
-                            return (_jsxs("div", { className: "rounded border border-dashed border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-300", style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: ["\u26A0\uFE0F Field ", _jsx("code", { children: f.field }), " declared in form layout but missing from schema. Skipping."] }, f.field));
-                        }
-                        return (_jsx("div", { style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: _jsx(FieldRow, { name: f.field, schema: {
-                                    ...propSchema,
-                                    ...(f.label ? { title: f.label } : {}),
-                                    ...(f.helpText ? { description: f.helpText } : {}),
-                                    ...(f.placeholder ? { placeholder: f.placeholder } : {}),
-                                }, value: value[f.field], required: f.required ?? required.includes(f.field), issues: issuesByPath[f.field], readOnly: readOnly || f.readonly || (f.immutable && !createMode), fieldSpec: f, widgetContext: widgetContext, formData: value, onChange: (val) => onChange(f.field, val) }) }, f.field));
-                    }) })] }, idx));
+        const fieldsGrid = (_jsx("div", { className: "grid gap-4", style: {
+                gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+            }, children: fields.map((f) => {
+                const propSchema = props[f.field];
+                if (!propSchema) {
+                    return (_jsx("div", { className: "rounded border border-dashed border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-300", style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: tFormat('engine.form.missingField', detectLocale(), { field: f.field }) }, f.field));
+                }
+                return (_jsx("div", { style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: _jsx(FieldRow, { name: f.field, schema: {
+                            ...propSchema,
+                            ...(f.label ? { title: f.label } : {}),
+                            ...(f.helpText ? { description: f.helpText } : {}),
+                            ...(f.placeholder ? { placeholder: f.placeholder } : {}),
+                        }, value: value[f.field], required: f.required ?? required.includes(f.field), issues: issuesByPath[f.field], readOnly: readOnly || f.readonly || (f.immutable && !createMode), fieldSpec: f, widgetContext: widgetContext, formData: value, onChange: (val) => onChange(f.field, val) }) }, f.field));
+            }) }));
+        // Collapsible section (FormSectionSpec.collapsible) — the spec marks
+        // rarely-used groups (Advanced, type-specific options) collapsible and
+        // often `collapsed: true`. Honour both so the panel opens lean and the
+        // author expands only what they need. Non-collapsible sections render
+        // as a plain bordered block (unchanged).
+        if (s.collapsible && s.label) {
+            return (_jsxs(Collapsible, { defaultOpen: !s.collapsed, className: "rounded-md border border-border/40 bg-card/30", children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center justify-between gap-2 p-4 text-left", children: [_jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold text-foreground/90", children: s.label }), s.description && (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: s.description }))] }), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=closed]:-rotate-90" })] }), _jsx(CollapsibleContent, { className: "space-y-3 px-4 pb-4", children: fieldsGrid })] }, idx));
+        }
+        return (_jsxs("section", { className: "space-y-3 rounded-md border border-border/40 bg-card/30 p-4", children: [s.label && (_jsxs("header", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground/90", children: s.label }), s.description && (_jsx("p", { className: "text-xs text-muted-foreground", children: s.description }))] })), fieldsGrid] }, idx));
     };
     if (isTabbed) {
         const tabSections = sections.filter((s) => s.fields
@@ -256,11 +473,38 @@ function SectionedSchemaForm({ form, props, required, hiddenFields, issuesByPath
 }
 /* ----- inner field row ---------------------------------------------------- */
 function FieldRow({ name, schema, value, required, issues, readOnly, fieldSpec, widgetContext, formData, onChange, }) {
-    const label = schema?.title || prettify(name);
-    const description = schema?.description;
+    const label = fieldSpec?.label || schema?.title || prettify(name);
+    const description = fieldSpec?.helpText || schema?.description;
     const id = `mdf-${name}`;
     // Auto-infer widget from fieldSpec.type or schema
-    const widget = inferWidget(fieldSpec, schema);
+    let widget = inferWidget(fieldSpec, schema);
+    // Field-reference props become object-field pickers when a field catalog
+    // is available and the spec didn't pin an explicit widget.
+    if (!fieldSpec?.widget) {
+        const refWidget = detectFieldRefWidget(name, schema, widgetContext);
+        if (refWidget)
+            widget = refWidget;
+        else {
+            const secretWidget = detectSecretWidget(name, schema);
+            if (secretWidget)
+                widget = secretWidget;
+            else {
+                const iconWidget = detectIconWidget(name, schema);
+                if (iconWidget)
+                    widget = iconWidget;
+                else {
+                    const colorWidget = detectColorWidget(name, schema);
+                    if (colorWidget)
+                        widget = colorWidget;
+                    else {
+                        const condWidget = detectConditionWidget(name, schema);
+                        if (condWidget)
+                            widget = condWidget;
+                    }
+                }
+            }
+        }
+    }
     // Booleans with a schema default are never *missing* — don't show the
     // required asterisk (which would otherwise lie about user obligation).
     const isBoolean = schema?.type === 'boolean' || widget === 'switch';
@@ -278,6 +522,7 @@ function FieldRow({ name, schema, value, required, issues, readOnly, fieldSpec,
     return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "flex items-center justify-between gap-2", children: _jsxs(Label, { htmlFor: id, className: "text-sm font-medium", children: [label, showRequiredStar && _jsx("span", { className: "text-destructive ml-0.5", children: "*" }), !labelMatchesName && (_jsx("code", { className: "ml-2 text-[10px] font-mono text-muted-foreground/70", title: "Machine name", children: name }))] }) }), _jsx(FieldControl, { id: id, schema: schema, value: value, onChange: onChange, readOnly: readOnly, widget: widget, fieldSpec: fieldSpec, widgetContext: widgetContext, formData: formData }), description && (_jsx("div", { className: "text-xs text-muted-foreground", children: description })), issues?.map((m, i) => (_jsx("div", { className: "text-xs text-destructive", children: m }, i)))] }));
 }
 function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec, widgetContext, formData, }) {
+    const locale = detectLocale();
     // Composite/repeater are first-class structured types — render natively
     // with recursive FieldRow calls so all UI features (widgets, options,
     // visibility, readonly) work uniformly at every nesting level.
@@ -288,7 +533,7 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
         const fields = fieldSpec.fields?.length
             ? fieldSpec.fields
             : derivePropertyNames(schema);
-        return (_jsx(CompositeField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, onChange: onChange }));
+        return (_jsx(CompositeField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, fieldSpec: fieldSpec, onChange: onChange }));
     }
     if (fieldSpec?.type === 'repeater') {
         const itemSchema = schema?.items ?? {};
@@ -297,6 +542,15 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
             : derivePropertyNames(itemSchema);
         return (_jsx(RepeaterField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, widget: fieldSpec.widget, onChange: onChange }));
     }
+    if (fieldSpec?.type === 'record') {
+        // Record<string, item> — name-keyed map. Insertion order is display
+        // order. JSON Schema shape: { type:'object', additionalProperties: itemSchema }.
+        const itemSchema = schema?.additionalProperties ?? {};
+        const fields = fieldSpec.fields?.length
+            ? fieldSpec.fields
+            : derivePropertyNames(itemSchema);
+        return (_jsx(RecordField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, widget: fieldSpec.widget, keyField: fieldSpec.keyField, formData: formData, onChange: onChange }));
+    }
     // Widget hint takes precedence: try the registry first, then the
     // passthrough hint list, then fall back to JSON with an inline hint.
     if (widget) {
@@ -304,20 +558,57 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
         if (Renderer) {
             return (_jsx(Renderer, { id: id, schema: schema, value: value, onChange: onChange, readOnly: readOnly, context: widgetContext, fieldSpec: fieldSpec, formData: formData }));
         }
+        // Resolve discriminated unions (oneOf / anyOf) against the current
+        // value so the recursive renderer below works on a concrete branch.
+        // Without this, every union field (View `data`, `columns`, `sort`,
+        // ...) falls through to a raw JSON editor.
+        const effective = resolveUnionBranch(schema, value);
+        // Nested object schema with a `properties` map: recurse into a
+        // nested SchemaForm so the user gets real labelled inputs instead
+        // of raw JSON. Covers the auto-inferred `object-fields` widget that
+        // SchemaForm picks for every `type: 'object'` schema, and any custom
+        // widget name that wasn't registered but still describes structured
+        // data.
+        if (effective?.type === 'object' &&
+            effective.properties &&
+            typeof effective.properties === 'object') {
+            return (_jsx("div", { className: "rounded-md border border-border/40 bg-card/30 p-3", children: _jsx(SchemaForm, { schema: effective, value: value ?? {}, onChange: (v) => onChange(v), readOnly: readOnly, widgetContext: widgetContext }) }));
+        }
+        // Array-of-object schemas: route through RepeaterField so the user
+        // gets per-row inputs rather than a JSON blob. Derive sub-field
+        // names from items.properties (after union resolution).
+        if (effective?.type === 'array' &&
+            effective.items &&
+            typeof effective.items === 'object') {
+            const itemSchema = resolveUnionBranch(effective.items, Array.isArray(value) && value.length ? value[0] : undefined);
+            if (itemSchema?.type === 'object' &&
+                itemSchema.properties &&
+                typeof itemSchema.properties === 'object') {
+                return (_jsx(RepeaterField, { value: value, fields: derivePropertyNames(itemSchema), schema: { ...effective, items: itemSchema }, readOnly: readOnly, widgetContext: widgetContext, widget: fieldSpec?.widget, onChange: onChange }));
+            }
+        }
         if (!KNOWN_PASSTHROUGH_WIDGETS.has(widget)) {
-            return (_jsxs("div", { className: "space-y-1", children: [_jsx(RawJsonEditor, { value: value, onChange: (v) => onChange(v), readOnly: readOnly }), _jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["widget ", _jsx("code", { className: "font-mono", children: widget }), " \u2014 falling back to JSON until a custom renderer is registered."] })] }));
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx(RawJsonEditor, { value: value, onChange: (v) => onChange(v), readOnly: readOnly }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: tFormat('engine.form.fallbackJson', locale, { widget }) })] }));
         }
     }
+    // For schemas authored as `anyOf` / `oneOf` (e.g. `width: anyOf[string,
+    // number]`, `sort: anyOf[string, array<obj>]`), the outer schema's
+    // `type` / `enum` are undefined and every primitive branch below would
+    // miss, dropping us straight to RawJsonEditor. Resolve the union against
+    // the current value once and use the resolved branch for type/enum
+    // checks so primitive unions render as real inputs.
+    const effective = resolveUnionBranch(schema, value) ?? schema;
+    const effectiveType = effective?.type;
     // Enum / Select — fieldSpec.options takes precedence over schema.enum.
     const options = fieldSpec?.options;
-    const enumValues = schema?.enum ?? undefined;
+    const enumValues = effective?.enum ?? undefined;
     if (Array.isArray(options) && options.length > 0) {
         // Render from fieldSpec.options (Data.SelectOption[])
-        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsxs(SelectItem, { value: opt.value, children: [opt.label, opt.color && (_jsx("span", { className: "ml-2 inline-block h-3 w-3 rounded", style: { backgroundColor: opt.color } }))] }, opt.value))) })] }));
+        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: t('engine.form.selectEllipsis', locale) }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsxs(SelectItem, { value: opt.value, children: [opt.label, opt.color && (_jsx("span", { className: "ml-2 inline-block h-3 w-3 rounded", style: { backgroundColor: opt.color } }))] }, opt.value))) })] }));
     }
     if (Array.isArray(enumValues) && enumValues.length > 0) {
         // Fallback to schema.enum
-        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: enumValues.map((opt) => (_jsx(SelectItem, { value: String(opt), children: String(opt) }, String(opt)))) })] }));
+        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: t('engine.form.selectEllipsis', locale) }) }), _jsx(SelectContent, { children: enumValues.map((opt) => (_jsx(SelectItem, { value: String(opt), children: String(opt) }, String(opt)))) })] }));
     }
     // Boolean → Switch (no redundant "true/false" text; the toggle state
     // already conveys the value).
@@ -330,26 +621,26 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
     // the sub-field as boolean. Without this, capability toggles inside the
     // Object editor's "Capabilities" section fell through to RawJsonEditor
     // and rendered as empty textareas.
-    if (schema?.type === 'boolean' || widget === 'switch' || fieldSpec?.type === 'boolean' || fieldSpec?.type === 'toggle') {
+    if (effectiveType === 'boolean' || widget === 'switch' || fieldSpec?.type === 'boolean' || fieldSpec?.type === 'toggle') {
         return (_jsx(Switch, { id: id, checked: !!value, onCheckedChange: (c) => onChange(c), disabled: readOnly }));
     }
     // Number / integer → numeric input with min/max from fieldSpec.
-    if (schema?.type === 'number' || schema?.type === 'integer') {
+    if (effectiveType === 'number' || effectiveType === 'integer') {
         const min = fieldSpec?.min;
         const max = fieldSpec?.max;
         return (_jsx(Input, { id: id, type: "number", value: value == null ? '' : String(value), min: min, max: max, onChange: (e) => {
                 const raw = e.target.value;
                 if (raw === '')
                     return onChange(undefined);
-                const n = schema.type === 'integer' ? parseInt(raw, 10) : Number(raw);
+                const n = effectiveType === 'integer' ? parseInt(raw, 10) : Number(raw);
                 onChange(Number.isFinite(n) ? n : undefined);
             }, readOnly: readOnly }));
     }
     // String → Input (or Textarea if it looks long), with maxLength from fieldSpec.
-    if (schema?.type === 'string') {
+    if (effectiveType === 'string') {
         const maxLength = fieldSpec?.maxLength;
-        const long = schema?.format === 'multiline' ||
-            schema?.contentMediaType === 'text/markdown' ||
+        const long = effective?.format === 'multiline' ||
+            effective?.contentMediaType === 'text/markdown' ||
             (typeof value === 'string' && value.length > 80);
         if (long) {
             return (_jsx(Textarea, { id: id, rows: 4, value: value ?? '', maxLength: maxLength, onChange: (e) => onChange(e.target.value || undefined), readOnly: readOnly }));
@@ -357,14 +648,14 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
         return (_jsx(Input, { id: id, value: value ?? '', maxLength: maxLength, onChange: (e) => onChange(e.target.value || undefined), readOnly: readOnly }));
     }
     // Array of primitives → comma-separated tag editor (MVP).
-    if (schema?.type === 'array') {
-        const itemsSchema = schema?.items ?? {};
+    if (effectiveType === 'array') {
+        const itemsSchema = effective?.items ?? {};
         const isPrimitive = itemsSchema.type === 'string' ||
             itemsSchema.type === 'number' ||
             itemsSchema.type === 'integer';
         if (isPrimitive) {
             const arr = Array.isArray(value) ? value : [];
-            return (_jsx(Input, { id: id, value: arr.map(String).join(', '), placeholder: "comma, separated, values", onChange: (e) => {
+            return (_jsx(Input, { id: id, value: arr.map(String).join(', '), placeholder: t('engine.form.arrayPlaceholder', locale), onChange: (e) => {
                     const raw = e.target.value;
                     const parts = raw
                         .split(',')
@@ -379,6 +670,30 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
                 }, readOnly: readOnly }));
         }
     }
+    // Structured fallback — try to recurse into a real nested form before
+    // dropping to a raw JSON editor. Order matters:
+    //   1. Resolve oneOf / anyOf against the value (discriminated unions
+    //      like View `data.provider` or anyOf [array<string>, array<obj>]).
+    //   2. type:'object' with properties → nested SchemaForm.
+    //   3. type:'array' of objects → RepeaterField with per-row inputs.
+    //   4. Last resort → JSON editor.
+    {
+        if (effective?.type === 'object' &&
+            effective.properties &&
+            typeof effective.properties === 'object') {
+            return (_jsx("div", { className: "rounded-md border border-border/40 bg-card/30 p-3", children: _jsx(SchemaForm, { schema: effective, value: value ?? {}, onChange: (v) => onChange(v), readOnly: readOnly, widgetContext: widgetContext }) }));
+        }
+        if (effective?.type === 'array' &&
+            effective.items &&
+            typeof effective.items === 'object') {
+            const itemSchema = resolveUnionBranch(effective.items, Array.isArray(value) && value.length ? value[0] : undefined);
+            if (itemSchema?.type === 'object' &&
+                itemSchema.properties &&
+                typeof itemSchema.properties === 'object') {
+                return (_jsx(RepeaterField, { value: value, fields: derivePropertyNames(itemSchema), schema: { ...effective, items: itemSchema }, readOnly: readOnly, widgetContext: widgetContext, widget: fieldSpec?.widget, onChange: onChange }));
+            }
+        }
+    }
     // Object / complex → JSON fallback so admins can still edit.
     return _jsx(RawJsonEditor, { value: value, onChange: onChange, readOnly: readOnly, small: true });
 }
@@ -391,20 +706,57 @@ function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec
 function pickSubSchema(parent, kind, subName) {
     if (!parent)
         return {};
-    const props = kind === 'composite'
-        ? parent.properties
-        : parent.items?.properties;
+    let props;
+    if (kind === 'composite') {
+        props = parent.properties;
+    }
+    else if (kind === 'repeater') {
+        props = parent.items?.properties;
+    }
+    else {
+        // record: items live under additionalProperties.properties
+        props = parent.additionalProperties?.properties;
+    }
     return props?.[subName] ?? {};
 }
-function CompositeField({ value, fields, schema, readOnly, widgetContext, onChange, }) {
+// Compact, human-readable summary of a composite value for the popover
+// disclosure trigger — booleans show their field label when true, arrays show
+// their entries, scalars show the value. Keeps the collapsed row informative.
+function summariseComposite(obj, specs) {
+    const parts = [];
+    for (const spec of specs) {
+        const v = obj[spec.field];
+        if (v == null || v === '' || v === false)
+            continue;
+        const label = spec.label || spec.field;
+        if (v === true)
+            parts.push(label);
+        else if (Array.isArray(v)) {
+            if (v.length)
+                parts.push(v.map((x) => (typeof x === 'object' && x ? (x.field ?? x.name ?? '') : String(x))).filter(Boolean).join(', '));
+        }
+        else if (typeof v === 'object')
+            parts.push(label);
+        else
+            parts.push(String(v));
+    }
+    return parts.join(' · ');
+}
+function CompositeField({ value, fields, schema, readOnly, widgetContext, fieldSpec, onChange, }) {
     const obj = (value && typeof value === 'object' && !Array.isArray(value))
         ? value
         : {};
     const specs = fields.map(normaliseField);
-    return (_jsx("div", { className: "rounded-md border border-border/50 bg-muted/20 p-3 space-y-3", children: specs.map((spec) => {
-            const subSchema = pickSubSchema(schema, 'composite', spec.field);
-            return (_jsx(FieldRow, { name: spec.field, schema: subSchema, value: obj[spec.field], required: Boolean(spec.required), readOnly: readOnly || spec.readonly, fieldSpec: spec, widgetContext: widgetContext, formData: obj, onChange: (v) => onChange({ ...obj, [spec.field]: v }) }, spec.field));
-        }) }));
+    const rows = specs.map((spec) => {
+        const subSchema = pickSubSchema(schema, 'composite', spec.field);
+        return (_jsx(FieldRow, { name: spec.field, schema: subSchema, value: obj[spec.field], required: Boolean(spec.required), readOnly: readOnly || spec.readonly, fieldSpec: spec, widgetContext: widgetContext, formData: obj, onChange: (v) => onChange({ ...obj, [spec.field]: v }) }, spec.field));
+    });
+    // Progressive disclosure (Airtable parity): summary line + gear → popover.
+    if (fieldSpec?.disclosure === 'popover') {
+        const summary = summariseComposite(obj, specs);
+        return (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border border-border/50 bg-muted/20 px-3 py-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground truncate", title: summary, children: summary || _jsx("span", { className: "italic opacity-70", children: "Not configured" }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0 shrink-0", "aria-label": "Configure", "data-testid": `composite-popover-${fieldSpec.field}`, children: _jsx(Settings2, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { align: "end", className: "w-80 space-y-3", children: rows })] })] }));
+    }
+    return (_jsx("div", { className: "rounded-md border border-border/50 bg-muted/20 p-3 space-y-3", children: rows }));
 }
 function RepeaterField({ value, fields, schema, readOnly, widgetContext, widget, onChange, }) {
     const rows = Array.isArray(value) ? value : [];
@@ -425,25 +777,183 @@ function RepeaterField({ value, fields, schema, readOnly, widgetContext, widget,
         setOpenIdx(rows.length);
     };
     if (useGrid) {
-        return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded-md border border-border/50", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [specs.map((s) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium", children: [s.label || prettify(s.field), s.required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }, s.field))), !readOnly && _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: specs.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "No items. Click + to add." }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30 align-top", children: [specs.map((s) => {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded-md border border-border/50", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [specs.map((s) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium", children: [s.label || prettify(s.field), s.required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }, s.field))), !readOnly && _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: specs.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: t('engine.repeater.empty', detectLocale()) }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30 align-top", children: [specs.map((s) => {
                                                 const sub = pickSubSchema(schema, 'repeater', s.field);
                                                 return (_jsx("td", { className: "p-1.5", children: _jsx(FieldControl, { id: `rep-${idx}-${s.field}`, schema: sub, value: row?.[s.field], readOnly: readOnly || s.readonly, widget: inferWidget(s, sub), fieldSpec: s, widgetContext: widgetContext, formData: row, onChange: (v) => update(idx, { [s.field]: v }) }) }, s.field));
-                                            }), !readOnly && (_jsx("td", { className: "p-1.5 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": "Remove", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }))] }, idx)))] })] }) }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add"] }))] }));
+                                            }), !readOnly && (_jsx("td", { className: "p-1.5 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": t('engine.form.remove', detectLocale()), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }))] }, idx)))] })] }) }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " ", t('engine.form.add', detectLocale())] }))] }));
     }
     // Card layout — one collapsible fieldset per row.
-    return (_jsxs("div", { className: "space-y-2", children: [rows.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/50 px-3 py-4 text-center text-xs text-muted-foreground", children: "No items yet." })), rows.map((row, idx) => {
+    return (_jsxs("div", { className: "space-y-2", children: [rows.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/50 px-3 py-4 text-center text-xs text-muted-foreground", children: t('engine.list.empty', detectLocale()) })), rows.map((row, idx) => {
                 const isOpen = openIdx === idx;
                 const summary = specs
                     .map((s) => row?.[s.field])
                     .find((v) => v != null && v !== '');
-                return (_jsxs("div", { className: "rounded-md border border-border/50 bg-muted/10", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border/30", children: [_jsxs("button", { type: "button", onClick: () => setOpenIdx(isOpen ? null : idx), className: "flex items-center gap-1.5 text-sm font-medium text-left flex-1 min-w-0", children: [isOpen ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "truncate", children: ["#", idx + 1, summary != null ? ` — ${String(summary)}` : ''] })] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": "Remove", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), isOpen && (_jsx("div", { className: "p-3 space-y-3", children: specs.map((s) => {
+                return (_jsxs("div", { className: "rounded-md border border-border/50 bg-muted/10", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border/30", children: [_jsxs("button", { type: "button", onClick: () => setOpenIdx(isOpen ? null : idx), className: "flex items-center gap-1.5 text-sm font-medium text-left flex-1 min-w-0", children: [isOpen ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "truncate", children: ["#", idx + 1, summary != null ? ` — ${String(summary)}` : ''] })] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": t('engine.form.remove', detectLocale()), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), isOpen && (_jsx("div", { className: "p-3 space-y-3", children: specs.map((s) => {
                                 const sub = pickSubSchema(schema, 'repeater', s.field);
                                 return (_jsx(FieldRow, { name: s.field, schema: sub, value: row?.[s.field], required: Boolean(s.required), readOnly: readOnly || s.readonly, fieldSpec: s, widgetContext: widgetContext, formData: row, onChange: (v) => update(idx, { [s.field]: v }) }, s.field));
                             }) }))] }, idx));
-            }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add item"] }))] }));
+            }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " ", t('engine.form.addItem', detectLocale())] }))] }));
+}
+/* ----- RecordField — Record<string, item> editor -------------------------- */
+/**
+ * Editor for `type: 'record'` form fields. The value is a name-keyed map
+ * (`Record<string, item>`) where insertion order is display order.
+ *
+ * Layout:
+ *  - If `widget` matches a renderer in WIDGETS, delegate to it (e.g.
+ *    `widget: 'airtable'` → AirtableTableWidget). The widget receives the
+ *    Record value directly and is responsible for emitting a Record back.
+ *  - Otherwise, fall back to an inline card list with a key column +
+ *    per-row sub-fields, similar to RepeaterField's card layout.
+ *
+ * The key is mirrored into the item as a property (default name: 'name')
+ * so downstream consumers can treat each item as self-describing.
+ *
+ * See ADR-0007.
+ */
+function RecordField({ value, fields, schema, readOnly, widgetContext, widget, keyField, formData, onChange, }) {
+    const locale = detectLocale();
+    // Delegate to a registered widget if the form spec asked for one
+    // explicitly (e.g. `widget: 'airtable'`). The widget owns the entire UI.
+    if (widget) {
+        const Renderer = WIDGETS[widget];
+        if (Renderer) {
+            return (_jsx(Renderer, { schema: schema, value: value, onChange: onChange, readOnly: readOnly, context: widgetContext, fieldSpec: { field: '', type: 'record', fields, widget }, formData: formData }));
+        }
+    }
+    // Inline fallback — card list with a key column + sub-fields.
+    const keyProp = keyField?.field ?? 'name';
+    const keyLabel = keyField?.label ?? prettify(keyProp);
+    const keyRegex = keyField?.regex ? new RegExp(keyField.regex) : null;
+    const keyImmutable = keyField?.immutable !== false; // default true
+    const record = value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+    const entries = Object.entries(record);
+    const specs = fields.map(normaliseField).filter((s) => s.field !== keyProp);
+    const [openKey, setOpenKey] = React.useState(null);
+    const [pendingKey, setPendingKey] = React.useState('');
+    const [keyError, setKeyError] = React.useState(null);
+    const emit = (next) => onChange(next);
+    const updateItem = (key, patch) => {
+        const next = {};
+        for (const [k, v] of entries) {
+            next[k] = k === key ? { ...v, ...patch } : v;
+        }
+        emit(next);
+    };
+    const removeItem = (key) => {
+        const next = {};
+        for (const [k, v] of entries) {
+            if (k !== key)
+                next[k] = v;
+        }
+        emit(next);
+    };
+    const renameItem = (oldKey, newKey) => {
+        if (newKey === oldKey)
+            return;
+        if (record[newKey]) {
+            setKeyError(tFormat('engine.form.keyExists', locale, { key: newKey }));
+            return;
+        }
+        if (keyRegex && !keyRegex.test(newKey)) {
+            setKeyError(tFormat('engine.form.keyPattern', locale, { pattern: String(keyRegex) }));
+            return;
+        }
+        const next = {};
+        for (const [k, v] of entries) {
+            if (k === oldKey) {
+                next[newKey] = { ...v, [keyProp]: newKey };
+            }
+            else {
+                next[k] = v;
+            }
+        }
+        setKeyError(null);
+        emit(next);
+    };
+    const addItem = () => {
+        const trimmed = pendingKey.trim();
+        if (!trimmed) {
+            setKeyError(t('engine.form.keyRequired', locale));
+            return;
+        }
+        if (record[trimmed]) {
+            setKeyError(tFormat('engine.form.keyExists', locale, { key: trimmed }));
+            return;
+        }
+        if (keyRegex && !keyRegex.test(trimmed)) {
+            setKeyError(tFormat('engine.form.keyPattern', locale, { pattern: String(keyRegex) }));
+            return;
+        }
+        const blank = { [keyProp]: trimmed };
+        specs.forEach((s) => { blank[s.field] = undefined; });
+        emit({ ...record, [trimmed]: blank });
+        setPendingKey('');
+        setKeyError(null);
+        setOpenKey(trimmed);
+    };
+    // Drag-to-reorder. We rebuild the Record with the new key order, since
+    // insertion order = display order for `type: 'record'`.
+    const [dragKey, setDragKey] = React.useState(null);
+    const [dropTarget, setDropTarget] = React.useState(null);
+    const reorder = (sourceKey, targetKey) => {
+        if (sourceKey === targetKey)
+            return;
+        const keys = entries.map(([k]) => k);
+        const from = keys.indexOf(sourceKey);
+        const to = keys.indexOf(targetKey);
+        if (from < 0 || to < 0)
+            return;
+        keys.splice(from, 1);
+        keys.splice(to, 0, sourceKey);
+        const next = {};
+        for (const k of keys)
+            next[k] = record[k];
+        emit(next);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [entries.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/50 px-3 py-4 text-center text-xs text-muted-foreground", children: t('engine.list.empty', locale) })), entries.map(([key, row]) => {
+                const isOpen = openKey === key;
+                const summary = specs
+                    .map((s) => row?.[s.field])
+                    .find((v) => v != null && v !== '');
+                const isDropTarget = dropTarget === key && dragKey && dragKey !== key;
+                return (_jsxs("div", { className: `rounded-md border bg-muted/10 ${isDropTarget ? 'border-primary border-2' : 'border-border/50'}`, onDragOver: (e) => {
+                        if (!dragKey || readOnly)
+                            return;
+                        e.preventDefault();
+                        if (dropTarget !== key)
+                            setDropTarget(key);
+                    }, onDragLeave: () => {
+                        if (dropTarget === key)
+                            setDropTarget(null);
+                    }, onDrop: (e) => {
+                        if (!dragKey || readOnly)
+                            return;
+                        e.preventDefault();
+                        reorder(dragKey, key);
+                        setDragKey(null);
+                        setDropTarget(null);
+                    }, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border/30", children: [!readOnly && (_jsx("span", { draggable: true, onDragStart: (e) => {
+                                        setDragKey(key);
+                                        e.dataTransfer.effectAllowed = 'move';
+                                        e.dataTransfer.setData('text/plain', key);
+                                    }, onDragEnd: () => { setDragKey(null); setDropTarget(null); }, className: "cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground", "aria-label": t('engine.form.dragToReorder', locale), title: t('engine.form.dragToReorder', locale), children: _jsx(GripVertical, { className: "h-3.5 w-3.5" }) })), _jsxs("button", { type: "button", onClick: () => setOpenKey(isOpen ? null : key), className: "flex items-center gap-1.5 text-sm font-medium text-left flex-1 min-w-0", children: [isOpen ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "font-mono text-xs px-1.5 py-0.5 rounded bg-muted/60", children: key }), summary != null && _jsxs("span", { className: "truncate text-muted-foreground", children: ["\u2014 ", String(summary)] })] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(key), className: "h-7 w-7 p-0", "aria-label": t('engine.form.remove', locale), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), isOpen && (_jsxs("div", { className: "p-3 space-y-3", children: [_jsx(FieldRow, { name: keyProp, schema: { type: 'string' }, value: key, required: true, readOnly: readOnly || keyImmutable, fieldSpec: { field: keyProp, type: 'text', label: keyLabel, helpText: keyField?.helpText }, widgetContext: widgetContext, formData: row, onChange: (v) => renameItem(key, String(v ?? '').trim()) }), specs.map((s) => {
+                                    if (s.visibleOn && !evaluatePredicate(s.visibleOn, { data: row }))
+                                        return null;
+                                    const sub = pickSubSchema(schema, 'record', s.field);
+                                    return (_jsx(FieldRow, { name: s.field, schema: sub, value: row?.[s.field], required: Boolean(s.required), readOnly: readOnly || s.readonly, fieldSpec: s, widgetContext: widgetContext, formData: row, onChange: (v) => updateItem(key, { [s.field]: v }) }, s.field));
+                                })] }))] }, key));
+            }), !readOnly && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: pendingKey, onChange: (e) => { setPendingKey(e.target.value); if (keyError)
+                            setKeyError(null); }, placeholder: keyField?.placeholder ?? keyLabel, className: "h-8 text-xs font-mono max-w-[220px]", onKeyDown: (e) => { if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addItem();
+                        } } }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " ", t('engine.form.add', locale)] }), keyError && _jsx("span", { className: "text-xs text-destructive", children: keyError })] }))] }));
 }
 /* ----- raw JSON fallback -------------------------------------------------- */
 function RawJsonEditor({ value, onChange, readOnly, small, }) {
+    const locale = detectLocale();
     const [text, setText] = React.useState(() => safeStringify(value));
     const [error, setError] = React.useState(null);
     // Re-sync when external value changes (e.g. Reset Overlay).
@@ -465,7 +975,7 @@ function RawJsonEditor({ value, onChange, readOnly, small, }) {
                         onChange(parsed);
                     }
                     catch (err) {
-                        setError(err?.message ?? 'Invalid JSON');
+                        setError(err?.message ?? t('engine.form.invalidJson', locale));
                     }
                 } }), error && _jsx("div", { className: "text-xs text-destructive", children: error })] }));
 }