@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/inspectors/ObjectFieldInspector.js

@@ -0,0 +1,365 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ObjectFieldInspector — scoped editor for the selected Object field.
+ *
+ * Selection shape:  { kind: 'field', id: '<field_name>' }
+ *
+ * The inspector edits one field at a time. Sections:
+ *   • Basic     — name (rename), label, type, required, unique, description
+ *   • Specific  — picklist options / lookup target / formula / numeric
+ *                 precision / max length, conditional on type
+ *   • Advanced  — readonly, hidden, indexed, externalId, group
+ *
+ * All edits are applied as immutable splices of `draft.fields` via
+ * the object-fields-io helpers, preserving the original array-vs-record
+ * shape AND any unknown keys on the field definition.
+ *
+ * Rename: changing the `name` rewrites the field's key in-place and
+ * re-issues the selection so the inspector stays bound to the same
+ * field. Other fields/options that reference the old name are NOT
+ * auto-rewritten — callers should re-validate downstream.
+ */
+import * as React from 'react';
+import { slugify } from '../createDerive';
+import { useMetadataClient } from '../useMetadata';
+import { InspectorShell, InspectorReorderButtons, InspectorTextField, InspectorNumberField, InspectorSelectField, InspectorCheckboxField, InspectorRemoveButton, InspectorEmptyState, moveArray, } from './_shared';
+import { Button, Input, Label, Badge } from '@object-ui/components';
+import { Plus, X, ArrowUp, ArrowDown, Copy } from 'lucide-react';
+import { InspectorComboField } from './InspectorComboField';
+import { useObjectFields } from '../previews/useObjectFields';
+import { readFields, writeFields, toFieldNameLoose, indexOfField, } from '../previews/object-fields-io';
+import { FIELD_TYPE_META, TYPES_BY_CATEGORY, CATEGORY_LABEL_EN, CATEGORY_LABEL_ZH, } from '../previews/field-types';
+import { t, tFormat } from '../i18n';
+const isZh = (locale) => (locale ?? '').toLowerCase().startsWith('zh');
+/* ─────────────── Helpers ─────────────── */
+function readOptions(def) {
+    const raw = def.options;
+    if (!Array.isArray(raw))
+        return [];
+    return raw.map((o) => ({
+        value: String(o?.value ?? ''),
+        label: typeof o?.label === 'string' ? o.label : undefined,
+        color: typeof o?.color === 'string' ? o.color : undefined,
+    }));
+}
+function isPicklist(type) {
+    return type === 'select' || type === 'multiselect' || type === 'radio' || type === 'checkboxes';
+}
+function isLookup(type) {
+    return type === 'lookup' || type === 'master_detail' || type === 'tree';
+}
+function isComputed(type) {
+    return type === 'formula' || type === 'summary';
+}
+function isNumeric(type) {
+    return type === 'number' || type === 'currency' || type === 'percent';
+}
+function isTexty(type) {
+    return type === 'text' || type === 'textarea' || type === 'email' || type === 'url' || type === 'phone' || type === 'password';
+}
+/**
+ * Which default-value editor (if any) fits a field type. Computed,
+ * relational, media and structural types have no meaningful literal
+ * default in this UI, so they return null (no editor rendered).
+ */
+function defaultValueKind(type) {
+    if (type === 'boolean' || type === 'toggle')
+        return 'bool';
+    if (type === 'number' || type === 'currency' || type === 'percent')
+        return 'number';
+    if (type === 'select' || type === 'radio')
+        return 'picklist';
+    const noDefault = [
+        'formula', 'summary', 'autonumber',
+        'lookup', 'master_detail', 'tree',
+        'file', 'image', 'avatar', 'video', 'audio', 'signature', 'qrcode',
+        'composite', 'repeater', 'vector',
+        'multiselect', 'checkboxes', 'tags',
+    ];
+    if (noDefault.includes(type))
+        return null;
+    return 'text';
+}
+function buildTypeOptions(locale) {
+    const zh = (locale ?? '').toLowerCase().startsWith('zh');
+    const cats = zh ? CATEGORY_LABEL_ZH : CATEGORY_LABEL_EN;
+    return TYPES_BY_CATEGORY.flatMap((g) => g.types.map((id) => {
+        const m = FIELD_TYPE_META[id];
+        return { value: id, label: `${cats[g.category]} · ${zh ? m.labelZh : m.label}` };
+    }));
+}
+/* ─────────────── Inspector ─────────────── */
+export function ObjectFieldInspector({ selection, draft, onPatch, onClearSelection, onSelectionChange, readOnly, locale, }) {
+    const tr = React.useCallback((key) => t(key, locale), [locale]);
+    const typeOptions = React.useMemo(() => buildTypeOptions(locale), [locale]);
+    const view = React.useMemo(() => readFields(draft.fields), [draft]);
+    const name = String(selection.id);
+    const idx = indexOfField(view, name);
+    const entry = idx >= 0 ? view.entries[idx] : null;
+    const fieldGroups = Array.isArray(draft.fieldGroups)
+        ? draft.fieldGroups
+        : [];
+    const objectOptions = useObjectOptions();
+    if (!entry) {
+        return (_jsx(InspectorShell, { kindLabel: tr('designer.field.kind'), title: name || tr('designer.field.kind'), onClose: onClearSelection, closeLabel: tr('designer.field.close'), children: _jsx(InspectorEmptyState, { message: tr('designer.field.missing') }) }));
+    }
+    const def = entry.def;
+    const type = (typeof def.type === 'string' ? def.type : 'text');
+    const typeMeta = FIELD_TYPE_META[type];
+    /* ─── Patch helpers ─── */
+    const writeView = (next) => {
+        onPatch({ fields: writeFields(next) });
+    };
+    const patchDef = (patch) => {
+        const nextEntries = [...view.entries];
+        nextEntries[idx] = { ...entry, def: { ...def, ...patch } };
+        writeView({ shape: view.shape, entries: nextEntries });
+    };
+    const setKey = (rawNext) => {
+        const nextName = toFieldNameLoose(rawNext);
+        if (!nextName || nextName === entry.name)
+            return;
+        // Disallow collision
+        if (view.entries.some((e, i) => i !== idx && e.name === nextName))
+            return;
+        const nextEntries = [...view.entries];
+        nextEntries[idx] = { ...entry, name: nextName };
+        writeView({ shape: view.shape, entries: nextEntries });
+        onSelectionChange?.({ kind: 'field', id: nextName, label: String(def.label ?? nextName) });
+    };
+    // Derive the API name from the label (on blur, so we use the complete
+    // string — not per keystroke, which would churn the field key) while the
+    // name is still an auto-generated default and the user hasn't customised it.
+    // Mirrors the object Name behaviour; slugify() returns '' for non-Latin
+    // labels, in which case the unique default name is kept.
+    const maybeDeriveName = (label) => {
+        if (readOnly)
+            return;
+        const base = type === 'select' ? 'status' : type;
+        const isAutoName = entry.name === base ||
+            (entry.name.startsWith(`${base}_`) && /^\d+$/.test(entry.name.slice(base.length + 1)));
+        if (!isAutoName)
+            return;
+        const derived = slugify(label);
+        if (!derived || derived === entry.name)
+            return;
+        if (view.entries.some((e, i) => i !== idx && e.name === derived))
+            return;
+        const nextEntries = [...view.entries];
+        nextEntries[idx] = { ...entry, name: derived };
+        writeView({ shape: view.shape, entries: nextEntries });
+        onSelectionChange?.({ kind: 'field', id: derived, label: String(def.label ?? derived) });
+    };
+    const removeField = () => {
+        const nextEntries = view.entries.filter((_, i) => i !== idx);
+        writeView({ shape: view.shape, entries: nextEntries });
+        onClearSelection();
+    };
+    const duplicateField = () => {
+        // Clone the field below itself with a collision-free name and a
+        // "(copy)" label, then select the clone so it's ready to tweak.
+        const existing = new Set(view.entries.map((e) => e.name));
+        const base = `${entry.name}_copy`;
+        let name = base;
+        let n = 1;
+        while (existing.has(name)) {
+            n += 1;
+            name = `${base}_${n}`;
+        }
+        const labelStr = typeof def.label === 'string' && def.label ? def.label : '';
+        const clone = {
+            name,
+            def: { ...def, label: labelStr ? labelStr + tr('designer.field.copySuffix') : undefined },
+        };
+        const nextEntries = [...view.entries];
+        nextEntries.splice(idx + 1, 0, clone);
+        writeView({ shape: view.shape, entries: nextEntries });
+        onSelectionChange?.({ kind: 'field', id: name, label: String(clone.def.label ?? name) });
+    };
+    const moveTo = (toIndex) => {
+        const next = { shape: view.shape, entries: moveArray(view.entries, idx, toIndex) };
+        writeView(next);
+        // Keep selection on the moved field (its name is unchanged).
+    };
+    /* ─── Option editor ─── */
+    const options = readOptions(def);
+    const patchOptions = (next) => {
+        const clean = next.map((o) => {
+            const out = { value: o.value };
+            if (o.label)
+                out.label = o.label;
+            if (o.color)
+                out.color = o.color;
+            return out;
+        });
+        patchDef({ options: clean });
+    };
+    /* ─── Render ─── */
+    const headerActions = (_jsxs("div", { className: "flex items-center gap-1", children: [!readOnly && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: duplicateField, title: tr('designer.field.duplicate'), "aria-label": tr('designer.field.duplicate'), children: _jsx(Copy, { className: "h-3.5 w-3.5" }) })), _jsx(InspectorReorderButtons, { index: idx, total: view.entries.length, onMove: moveTo, disabled: readOnly })] }));
+    const footer = (_jsx(InspectorRemoveButton, { label: tFormat('designer.field.remove', locale, {
+            label: typeof def.label === 'string' ? def.label : entry.name,
+        }), onClick: removeField, disabled: readOnly }));
+    const typeMetaLabel = isZh(locale) ? typeMeta?.labelZh : typeMeta?.label;
+    return (_jsxs(InspectorShell, { kindLabel: tr('designer.field.kind'), title: typeof def.label === 'string' && def.label ? def.label : entry.name, onClose: onClearSelection, closeLabel: tr('designer.field.close'), headerActions: headerActions, footer: footer, children: [_jsxs(Section, { title: tr('designer.field.section.basic'), children: [_jsx(InspectorTextField, { label: tr('designer.field.apiName'), value: entry.name, onCommit: setKey, disabled: readOnly, mono: true, testId: "field-apiname-input" }), _jsx(InspectorTextField, { label: tr('designer.field.label'), value: typeof def.label === 'string' ? def.label : '', onCommit: (v) => patchDef({ label: v }), onBlur: maybeDeriveName, disabled: readOnly, testId: "field-label-input" }), _jsx(InspectorSelectField, { label: tr('designer.field.type'), value: type, options: typeOptions, onCommit: (v) => patchDef({ type: v }), disabled: readOnly }), _jsxs("div", { className: "flex items-center gap-4 pt-1", children: [_jsx(InspectorCheckboxField, { label: tr('designer.field.required'), value: !!def.required, onCommit: (v) => patchDef({ required: v || undefined }), disabled: readOnly }), _jsx(InspectorCheckboxField, { label: tr('designer.field.unique'), value: !!def.unique, onCommit: (v) => patchDef({ unique: v || undefined }), disabled: readOnly })] }), _jsx(TextareaField, { label: tr('designer.field.description'), value: typeof def.description === 'string' ? def.description : '', onCommit: (v) => patchDef({ description: v || undefined }), disabled: readOnly, rows: 2 }), defaultValueKind(type) && (_jsx(DefaultValueField, { kind: defaultValueKind(type), value: def.defaultValue, options: options, onCommit: (v) => patchDef({ defaultValue: v }), disabled: readOnly, locale: locale })), _jsx(TextareaField, { label: tr('designer.field.helpText'), value: typeof def.inlineHelpText === 'string' ? def.inlineHelpText : '', onCommit: (v) => patchDef({ inlineHelpText: v || undefined }), disabled: readOnly, rows: 2, placeholder: tr('designer.field.helpTextPlaceholder') })] }), (isPicklist(type) || isLookup(type) || isComputed(type) || isNumeric(type) || isTexty(type)) && (_jsxs(Section, { title: tFormat('designer.field.section.options', locale, { type: typeMetaLabel ?? type }), children: [isPicklist(type) && (_jsx(OptionsEditor, { options: options, onChange: patchOptions, disabled: readOnly, locale: locale }, entry.name)), isLookup(type) && (_jsxs(_Fragment, { children: [_jsx(ObjectPicker, { label: tr('designer.field.relatedObject'), value: typeof def.reference === 'string' ? def.reference : '', options: objectOptions, onCommit: (v) => patchDef({ reference: v || undefined }), disabled: readOnly, placeholder: tr('designer.field.objectNamePlaceholder') }), _jsx(InspectorTextField, { label: tr('designer.field.relationshipName'), value: typeof def.relationshipName === 'string' ? def.relationshipName : '', onCommit: (v) => patchDef({ relationshipName: v || undefined }), disabled: readOnly, placeholder: tr('designer.field.relationshipNameHint') }), _jsx(LookupConfigFields, { def: def, patchDef: patchDef, hostFieldNames: view.entries.map((e) => e.name).filter((n) => n !== entry.name), readOnly: readOnly, locale: locale })] })), isComputed(type) && (_jsx(TextareaField, { label: tr('designer.field.formula'), value: typeof def.formula === 'string' ? def.formula : '', onCommit: (v) => patchDef({ formula: v || undefined }), disabled: readOnly, rows: 4, mono: true, placeholder: "record.amount * 0.2" })), isNumeric(type) && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(InspectorNumberField, { label: tr('designer.field.precision'), value: typeof def.precision === 'number' ? def.precision : undefined, onCommit: (v) => patchDef({ precision: v }), disabled: readOnly }), _jsx(InspectorNumberField, { label: tr('designer.field.scale'), value: typeof def.scale === 'number' ? def.scale : undefined, onCommit: (v) => patchDef({ scale: v }), disabled: readOnly }), _jsx(InspectorNumberField, { label: tr('designer.field.min'), value: typeof def.min === 'number' ? def.min : undefined, onCommit: (v) => patchDef({ min: v }), disabled: readOnly }), _jsx(InspectorNumberField, { label: tr('designer.field.max'), value: typeof def.max === 'number' ? def.max : undefined, onCommit: (v) => patchDef({ max: v }), disabled: readOnly })] })), isTexty(type) && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(InspectorNumberField, { label: tr('designer.field.minLength'), value: typeof def.minLength === 'number' ? def.minLength : undefined, onCommit: (v) => patchDef({ minLength: v }), disabled: readOnly, placeholder: "0" }), _jsx(InspectorNumberField, { label: tr('designer.field.maxLength'), value: typeof def.maxLength === 'number' ? def.maxLength : undefined, onCommit: (v) => patchDef({ maxLength: v }), disabled: readOnly, placeholder: "255" })] }))] })), _jsxs(Section, { title: tr('designer.field.section.advanced'), children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(InspectorCheckboxField, { label: tr('designer.field.readonly'), value: !!def.readonly, onCommit: (v) => patchDef({ readonly: v || undefined }), disabled: readOnly }), _jsx(InspectorCheckboxField, { label: tr('designer.field.hidden'), value: !!def.hidden, onCommit: (v) => patchDef({ hidden: v || undefined }), disabled: readOnly }), _jsx(InspectorCheckboxField, { label: tr('designer.field.indexed'), value: !!def.indexed, onCommit: (v) => patchDef({ indexed: v || undefined }), disabled: readOnly }), _jsx(InspectorCheckboxField, { label: tr('designer.field.externalId'), value: !!def.externalId, onCommit: (v) => patchDef({ externalId: v || undefined }), disabled: readOnly }), _jsx(InspectorCheckboxField, { label: tr('designer.field.trackHistory'), value: !!def.trackHistory, onCommit: (v) => patchDef({ trackHistory: v || undefined }), disabled: readOnly })] }), _jsx(InspectorTextField, { label: tr('designer.field.placeholder'), value: typeof def.placeholder === 'string' ? def.placeholder : '', onCommit: (v) => patchDef({ placeholder: v || undefined }), disabled: readOnly }), _jsxs("div", { className: "space-y-1", children: [_jsx(InspectorTextField, { label: tr('designer.field.conditionalRequired'), value: typeof def.conditionalRequired === 'string' ? def.conditionalRequired : '', onCommit: (v) => patchDef({ conditionalRequired: v || undefined }), disabled: readOnly, mono: true, placeholder: "record.status == 'closed'" }), _jsx("p", { className: "text-[11px] text-muted-foreground/80 px-0.5 leading-snug", children: tr('designer.field.conditionalRequiredHint') })] }), fieldGroups.length > 0 && (_jsx(InspectorSelectField, { label: tr('designer.field.group'), value: typeof def.group === 'string' ? def.group : '', options: [
+                            { value: '', label: tr('designer.field.noGroup') },
+                            ...fieldGroups
+                                .filter((g) => typeof g.key === 'string')
+                                .map((g) => ({ value: g.key, label: String(g.label ?? g.key) })),
+                        ], onCommit: (v) => patchDef({ group: v || undefined }), disabled: readOnly }))] })] }));
+}
+/* ─────────────── Sub-components ─────────────── */
+function Section({ title, children }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground border-b pb-1", children: title }), _jsx("div", { className: "space-y-2", children: children })] }));
+}
+/** Type-aware default-value editor. Stores the literal on `Field.defaultValue`. */
+function DefaultValueField({ kind, value, options, onCommit, disabled, locale, }) {
+    const label = t('designer.field.defaultValue', locale);
+    const none = t('designer.field.defaultNone', locale);
+    if (kind === 'bool') {
+        const cur = value === true ? 'true' : value === false ? 'false' : '';
+        return (_jsx(InspectorSelectField, { label: label, value: cur, options: [
+                { value: '', label: none },
+                { value: 'true', label: t('designer.field.true', locale) },
+                { value: 'false', label: t('designer.field.false', locale) },
+            ], onCommit: (v) => onCommit(v === '' ? undefined : v === 'true'), disabled: disabled }));
+    }
+    if (kind === 'number') {
+        return (_jsx(InspectorNumberField, { label: label, value: typeof value === 'number' ? value : undefined, onCommit: (v) => onCommit(v), disabled: disabled }));
+    }
+    if (kind === 'picklist') {
+        return (_jsx(InspectorSelectField, { label: label, value: typeof value === 'string' ? value : '', options: [
+                { value: '', label: none },
+                ...options
+                    .filter((o) => o.value)
+                    .map((o) => ({ value: o.value, label: o.label || o.value })),
+            ], onCommit: (v) => onCommit(v || undefined), disabled: disabled }));
+    }
+    return (_jsx(InspectorTextField, { label: label, value: typeof value === 'string' ? value : value == null ? '' : String(value), onCommit: (v) => onCommit(v || undefined), disabled: disabled }));
+}
+function TextareaField({ label, value, onCommit, disabled, rows = 2, mono, placeholder, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx("textarea", { value: value, disabled: disabled, rows: rows, placeholder: placeholder, onChange: (e) => onCommit(e.target.value), className: 'w-full text-sm rounded-md border bg-background px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary ' +
+                    (mono ? 'font-mono text-xs ' : '') })] }));
+}
+function ObjectPicker({ label, value, options, onCommit, disabled, placeholder, }) {
+    // List may be empty (still loading or no objects). Allow free-text fallback.
+    const listId = React.useId();
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { list: listId, value: value, onChange: (e) => onCommit(e.target.value), disabled: disabled, className: "h-8 text-sm font-mono", placeholder: placeholder ?? 'object_name' }), _jsx("datalist", { id: listId, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }));
+}
+function OptionsEditor({ options, onChange, disabled, locale, }) {
+    // Local editing buffer. We keep a blank trailing row visible for input but
+    // only PERSIST rows whose `value` is non-empty — otherwise the blank row
+    // fails the spec identifier rule ("System identifier must be at least 2
+    // characters") and shows a confusing error mid-edit. The editor is remounted
+    // per field (key={entry.name}), so seeding from `options` once is correct.
+    const [rows, setRows] = React.useState(() => (options.length > 0 ? options : [{ value: '', label: '' }]));
+    const commit = (next) => {
+        setRows(next);
+        onChange(next.filter((o) => o.value.trim() !== ''));
+    };
+    const update = (i, patch) => {
+        const next = [...rows];
+        next[i] = { ...next[i], ...patch };
+        commit(next);
+    };
+    const remove = (i) => commit(rows.filter((_, j) => j !== i));
+    const move = (i, to) => commit(moveArray(rows, i, to));
+    const add = () => commit([...rows, { value: '', label: '' }]);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: t('designer.field.picklistValues', locale) }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: rows.length })] }), rows.length === 0 ? (_jsx("div", { className: "text-[11px] italic text-muted-foreground px-1", children: t('designer.field.noValues', locale) })) : (_jsx("div", { className: "space-y-1", children: rows.map((o, i) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { value: o.value, onChange: (e) => update(i, { value: e.target.value }), placeholder: t('designer.field.optValue', locale), disabled: disabled, className: "h-7 text-xs font-mono flex-1" }), _jsx(Input, { value: o.label ?? '', onChange: (e) => update(i, { label: e.target.value }), placeholder: t('designer.field.optLabel', locale), disabled: disabled, className: "h-7 text-xs flex-1" }), _jsx("input", { type: "color", value: o.color ?? '#cccccc', onChange: (e) => update(i, { color: e.target.value }), disabled: disabled, className: "h-7 w-7 rounded border bg-background cursor-pointer p-0.5", title: t('designer.field.optColor', locale) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => move(i, i - 1), disabled: disabled || i === 0, "aria-label": t('designer.field.moveUp', locale), children: _jsx(ArrowUp, { className: "h-3 w-3" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => move(i, i + 1), disabled: disabled || i === rows.length - 1, "aria-label": t('designer.field.moveDown', locale), children: _jsx(ArrowDown, { className: "h-3 w-3" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0 text-destructive", onClick: () => remove(i), disabled: disabled, "aria-label": t('designer.field.removeValue', locale), children: _jsx(X, { className: "h-3 w-3" }) })] }, i))) })), !disabled && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1 text-xs", onClick: add, children: [_jsx(Plus, { className: "h-3 w-3" }), t('designer.field.addValue', locale)] }))] }));
+}
+/* ─────────────── Lookup picker config (displayField / filters / dependent) ─────────────── */
+const LOOKUP_OPERATORS = [
+    { value: 'eq', label: '= equals' },
+    { value: 'ne', label: '≠ not equals' },
+    { value: 'gt', label: '> greater than' },
+    { value: 'lt', label: '< less than' },
+    { value: 'gte', label: '≥ at least' },
+    { value: 'lte', label: '≤ at most' },
+    { value: 'contains', label: 'contains' },
+    { value: 'in', label: 'in (any of)' },
+    { value: 'notIn', label: 'not in' },
+];
+function readLookupFilters(def) {
+    const raw = def.lookupFilters ?? def.lookup_filters;
+    return Array.isArray(raw) ? raw : [];
+}
+function readDependsOn(def) {
+    const raw = def.dependsOn ?? def.depends_on;
+    if (!Array.isArray(raw))
+        return [];
+    return raw
+        .map((d) => (typeof d === 'string' ? d : d && typeof d === 'object' ? d.field : undefined))
+        .filter((x) => !!x);
+}
+/**
+ * Lookup/master_detail picker configuration. Surfaces the parts that
+ * previously required hand-editing the raw JSON: which field labels each
+ * candidate (`displayField`/`descriptionField`), which records are even
+ * selectable (structured `lookupFilters` — the form the runtime LookupField
+ * actually honours, not the legacy `referenceFilters` strings), and
+ * dependent-lookup links to other fields on the same record (`dependsOn`).
+ * Every field choice is picked from the referenced object's live schema.
+ */
+function LookupConfigFields({ def, patchDef, hostFieldNames, readOnly, locale, }) {
+    const tr = (key) => t(key, locale);
+    const reference = typeof def.reference === 'string' ? def.reference : undefined;
+    const { fields: targetFields, loading } = useObjectFields(reference);
+    const fieldOptions = React.useMemo(() => targetFields.filter((f) => !f.hidden).map((f) => ({ value: f.name, label: f.label, hint: f.type })), [targetFields]);
+    const hostOptions = React.useMemo(() => hostFieldNames.map((n) => ({ value: n, label: n })), [hostFieldNames]);
+    const filters = readLookupFilters(def);
+    const dependsOn = readDependsOn(def);
+    const patchFilter = (i, patch) => patchDef({ lookupFilters: filters.map((f, idx) => (idx === i ? { ...f, ...patch } : f)) });
+    const addFilter = () => patchDef({ lookupFilters: [...filters, { field: '', operator: 'eq', value: '' }] });
+    const removeFilter = (i) => {
+        const next = filters.filter((_, idx) => idx !== i);
+        patchDef({ lookupFilters: next.length ? next : undefined });
+    };
+    // `in` / `notIn` take a list; everything else a scalar. Keep the editor a
+    // single text input and (de)serialize the list form at the boundary.
+    const valueToText = (v) => (Array.isArray(v) ? v.join(', ') : v == null ? '' : String(v));
+    const textToValue = (op, s) => op === 'in' || op === 'notIn' ? s.split(',').map((x) => x.trim()).filter(Boolean) : s;
+    const addDependsOn = (name) => {
+        if (!name || dependsOn.includes(name))
+            return;
+        patchDef({ dependsOn: [...dependsOn, name] });
+    };
+    const removeDependsOn = (name) => {
+        const next = dependsOn.filter((n) => n !== name);
+        patchDef({ dependsOn: next.length ? next : undefined });
+    };
+    const displayField = typeof def.displayField === 'string' ? def.displayField : '';
+    const descriptionField = typeof def.descriptionField === 'string' ? def.descriptionField : '';
+    const pageSize = typeof def.lookupPageSize === 'number' ? def.lookupPageSize : undefined;
+    const allowCreate = def.allowCreate === true;
+    const fieldPlaceholder = reference ? tr('designer.field.lookup.selectField') : tr('designer.field.lookup.setTargetFirst');
+    return (_jsxs("div", { className: "space-y-2 border-t pt-2.5", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: tr('designer.field.lookup.pickerConfig') }), _jsx(InspectorComboField, { label: tr('designer.field.lookup.displayField'), value: displayField, onCommit: (v) => patchDef({ displayField: v || undefined }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: tr('designer.field.lookup.searchFields'), disabled: readOnly, mono: true }), _jsx(InspectorComboField, { label: tr('designer.field.lookup.descriptionField'), value: descriptionField, onCommit: (v) => patchDef({ descriptionField: v || undefined }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: tr('designer.field.lookup.searchFields'), disabled: readOnly, mono: true }), _jsxs("div", { className: "space-y-1.5 pt-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('designer.field.lookup.selectableRecords') }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: filters.length })] }), !readOnly && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-[11px]", onClick: addFilter, children: [_jsx(Plus, { className: "h-3 w-3" }), " ", tr('designer.field.lookup.addFilter')] }))] }), filters.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-center text-[11px] text-muted-foreground", children: tFormat('designer.field.lookup.noFilter', locale, { ref: reference || 'related' }) })) : (filters.map((f, i) => (_jsxs("div", { className: "rounded-md border p-2 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] text-muted-foreground", children: tFormat('designer.field.lookup.filterN', locale, { n: i + 1 }) }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": tr('designer.field.lookup.removeFilter'), className: "h-6 w-6 p-0 text-muted-foreground hover:text-destructive", onClick: () => removeFilter(i), children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }), _jsx(InspectorComboField, { label: tr('designer.field.lookup.filterField'), value: f.field ?? '', onCommit: (v) => patchFilter(i, { field: v }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: tr('designer.field.lookup.searchFields'), disabled: readOnly, mono: true }), _jsx(InspectorSelectField, { label: tr('designer.field.lookup.filterOperator'), value: f.operator ?? 'eq', options: LOOKUP_OPERATORS, onCommit: (v) => patchFilter(i, { operator: v }), disabled: readOnly }), _jsx(InspectorTextField, { label: tr('designer.field.lookup.filterValue'), value: valueToText(f.value), onCommit: (v) => patchFilter(i, { value: textToValue(f.operator, v) }), placeholder: f.operator === 'in' || f.operator === 'notIn' ? 'comma,separated,values' : 'value', disabled: readOnly, mono: true })] }, i))))] }), _jsxs("div", { className: "space-y-1.5 pt-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('designer.field.lookup.dependsOn') }), dependsOn.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: dependsOn.map((n) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-[11px] font-mono", children: [n, !readOnly && (_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground", onClick: () => removeDependsOn(n), "aria-label": `Remove ${n}`, children: "\u00D7" }))] }, n))) })), !readOnly && hostOptions.length > 0 && (_jsx(InspectorComboField, { value: "", onCommit: (v) => addDependsOn(v), options: hostOptions.filter((o) => !dependsOn.includes(o.value)), placeholder: tr('designer.field.lookup.addDependsOn'), searchPlaceholder: tr('designer.field.lookup.searchHostFields'), disabled: readOnly, allowCustom: false, mono: true }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 pt-1", children: [_jsx(InspectorNumberField, { label: tr('designer.field.lookup.pageSize'), value: pageSize, onCommit: (v) => patchDef({ lookupPageSize: v }), placeholder: "10", disabled: readOnly }), _jsx("div", { className: "flex items-end pb-1.5", children: _jsx(InspectorCheckboxField, { label: tr('designer.field.lookup.allowCreate'), value: allowCreate, onCommit: (v) => patchDef({ allowCreate: v || undefined }), disabled: readOnly }) })] })] }));
+}
+/* ─────────────── Hook: load object list for lookup picker ─────────────── */
+function useObjectOptions() {
+    const client = useMetadataClient();
+    const [opts, setOpts] = React.useState([]);
+    React.useEffect(() => {
+        let cancelled = false;
+        client
+            .list('object')
+            .then((items) => {
+            if (cancelled)
+                return;
+            const mapped = items
+                .filter((i) => typeof i?.name === 'string' && i.name)
+                .map((i) => ({
+                value: i.name,
+                label: i.label ? `${i.label} (${i.name})` : i.name,
+            }))
+                .sort((a, b) => a.value.localeCompare(b.value));
+            setOpts(mapped);
+        })
+            .catch(() => {
+            // Empty list — picker falls back to free-text. No banner needed.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    return opts;
+}

package/dist/views/metadata-admin/inspectors/PageBlockInspector.d.ts

@@ -0,0 +1,48 @@
+/**
+ * PageBlockInspector — scoped editor for the selected page block /
+ * component subtree.
+ *
+ * Selection shape:  { kind: 'block', id: 'children[i]' | 'children[i].children[j]' | … }
+ *
+ * A Page schema is a SDUI tree; "blocks" are children nodes. The id
+ * is a dotted path of `children[i]` hops, identical in spirit to
+ * AppNavInspector but always rooted at top-level `children`.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+interface Block {
+    type?: string;
+    id?: string;
+    className?: string;
+    hidden?: string;
+    children?: Block[];
+    [k: string]: unknown;
+}
+/**
+ * A path hop. `index < 0` means a plain object-property access (e.g.
+ * `properties`); `index >= 0` adds an array index after the key (e.g.
+ * `items[0]`). Supporting object hops lets us address nested container
+ * children at `…components[0].properties.items[0].children[0]` (issue #1499).
+ */
+type Hop = {
+    key: string;
+    index: number;
+};
+export type PathSeg = string | number;
+/** A segment is `key` (object) or `key[i]` (array). */
+export declare function parsePath(id: string): Hop[] | null;
+/** Flatten hops to a JSON-pointer-like path: object key, then index if any. */
+export declare function hopsToPath(hops: Hop[]): PathSeg[];
+export declare function getByPath(root: any, path: PathSeg[]): any;
+/** Immutable set/remove along a path. `value === REMOVE` deletes the leaf. */
+export declare function setByPath(root: any, path: PathSeg[], value: any): any;
+export declare function readAt(root: Record<string, unknown>, hops: Hop[]): Block | null;
+/** Returns a shallow patch `{ [topKey]: newValue }` for onPatch. */
+export declare function writeAt(root: Record<string, unknown>, hops: Hop[], replacement: Block | null): Record<string, unknown>;
+export declare function readSiblings(root: Record<string, unknown>, hops: Hop[]): {
+    siblings: Block[];
+    index: number;
+} | null;
+export declare function writeSiblings(root: Record<string, unknown>, hops: Hop[], nextSiblings: Block[]): Record<string, unknown>;
+export declare function PageBlockInspector({ selection, draft, onPatch, onClearSelection, onSelectionChange, locale, readOnly }: MetadataInspectorProps): React.JSX.Element;
+export {};