@object-ui/app-shell 7.0.0 → 7.1.0

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

@@ -19,6 +19,49 @@ import { fieldsForNodeType, isFieldVisible, getFieldValue, configKeyOf, FLOW_NOD
 import { jsonSchemaToFlowFields } from './json-schema-to-fields';
 import { useActionConfigSchemas } from '../previews/useFlowNodePalette';
 import { FlowNodeConfigField } from './FlowNodeConfigField';
+import { ScreenPreview } from '../previews/ScreenPreview';
+/**
+ * Mirror a decision node's `conditions` (branches) onto its outgoing sequence
+ * edges, in declared order: branch i -> the i-th out-edge. A branch whose
+ * expression is `true` marks its edge as the default/else path; an empty
+ * expression clears the guard. Fault / back edges are left untouched.
+ *
+ * This is what lets a decision authored entirely in Studio actually route at
+ * runtime: the engine and the simulator branch on `edge.condition`, NOT on
+ * `node.config.conditions` (which is only a node-local branch list). Without
+ * the mirror, every out-edge stays unconditional and all branches fire.
+ */
+function syncDecisionEdges(decisionId, conditions, edges) {
+    const branches = Array.isArray(conditions) ? conditions : [];
+    let bi = 0;
+    return edges.map((e) => {
+        if (e.source !== decisionId || e.type === 'fault' || e.type === 'back')
+            return e;
+        const branch = branches[bi++];
+        if (!branch || typeof branch !== 'object')
+            return e;
+        const expr = typeof branch.expression === 'string' ? branch.expression.trim() : '';
+        const label = typeof branch.label === 'string' ? branch.label.trim() : '';
+        const next = { ...e };
+        if (label)
+            next.label = label;
+        else
+            delete next.label;
+        if (expr && expr !== 'true') {
+            next.condition = expr;
+            delete next.isDefault;
+        }
+        else if (expr === 'true') {
+            next.isDefault = true;
+            delete next.condition;
+        }
+        else {
+            delete next.condition;
+            delete next.isDefault;
+        }
+        return next;
+    });
+}
 function asConfig(node) {
     const c = node?.config;
     return c && typeof c === 'object' && !Array.isArray(c) ? c : {};
@@ -65,6 +108,16 @@ export function FlowNodeInspector({ selection, draft, onPatch, onClearSelection,
     }, [configSchemas, node?.type]);
     const config = asConfig(node);
     const visibleFields = fields.filter((f) => isFieldVisible(f, node, fields));
+    // `{var}` interpolation source for the screen preview — the flow's declared
+    // variables and their defaults (the designer has no live run state).
+    const screenVars = React.useMemo(() => {
+        const decls = Array.isArray(draft.variables) ? draft.variables : [];
+        const out = {};
+        for (const v of decls)
+            if (v && typeof v.name === 'string')
+                out[v.name] = v.defaultValue;
+        return out;
+    }, [draft]);
     // Only fields stored under `config` "own" a config key; spec-structured
     // blocks (waitEventConfig, etc.) and top-level timeoutMs never suppress an
     // Advanced key.
@@ -100,9 +153,21 @@ export function FlowNodeInspector({ selection, draft, onPatch, onClearSelection,
         onPatch({ nodes: spliceArray(nodes, index, { ...node, ...updates }) });
     };
     const hasExtras = extraJson.trim() !== '';
+    // Screen nodes (and the `user_task` alias) get a live end-user preview.
+    const isScreen = node.type === 'screen' || node.type === 'user_task';
     const setField = (path, value) => {
         const nextNode = setAtPath(node, path, value);
-        onPatch({ nodes: spliceArray(nodes, index, nextNode) });
+        const patch = { nodes: spliceArray(nodes, index, nextNode) };
+        // Decision branches drive routing — mirror them onto the node's outgoing
+        // edges so the engine/simulator can actually branch (they read
+        // edge.condition, not node.config.conditions).
+        if (node.type === 'decision' && path.length === 2 && path[0] === 'config' && path[1] === 'conditions') {
+            const draftEdges = Array.isArray(draft.edges)
+                ? (draft.edges)
+                : [];
+            patch.edges = syncDecisionEdges(node.id, value, draftEdges);
+        }
+        onPatch(patch);
     };
     const commitAdvanced = () => {
         try {
@@ -133,7 +198,7 @@ export function FlowNodeInspector({ selection, draft, onPatch, onClearSelection,
     const typeOptions = FLOW_NODE_TYPE_OPTIONS.includes(node.type)
         ? [...FLOW_NODE_TYPE_OPTIONS]
         : [...FLOW_NODE_TYPE_OPTIONS, node.type ?? ''].filter(Boolean);
-    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.flowNode.kind', locale), title: node.label || node.id, onClose: onClearSelection, closeLabel: t('engine.inspector.flowNode.close', locale), footer: _jsx(InspectorRemoveButton, { label: t('engine.inspector.flowNode.remove', locale), onClick: remove, disabled: readOnly }), children: [_jsx(InspectorTextField, { label: t('engine.inspector.flowNode.id', locale), value: node.id, onCommit: (v) => patchNode({ id: v }), disabled: readOnly, mono: true }), _jsx(InspectorTextField, { label: t('engine.inspector.flowNode.label', locale), value: node.label ?? '', onCommit: (v) => patchNode({ label: v }), disabled: readOnly }), _jsx(InspectorSelectField, { label: t('engine.inspector.flowNode.type', locale), value: node.type, options: typeOptions.map((v) => ({ value: v, label: v })), onCommit: (v) => patchNode({ type: v }), disabled: readOnly }), _jsx(InspectorTextField, { label: t('engine.inspector.flowNode.description', locale), value: node.description ?? '', onCommit: (v) => patchNode({ description: v || undefined }), disabled: readOnly }), fields.length === 0 ? (_jsx("p", { className: "pt-1 text-xs italic text-muted-foreground", children: t('engine.inspector.flowNode.noConfig', locale) })) : (visibleFields.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t('engine.inspector.flowNode.configuration', locale) }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }))), visibleFields.map((field) => (_jsx(FlowNodeConfigField, { field: field, value: getFieldValue(node, field), onCommit: (v) => setField(field.path, v), disabled: readOnly, locale: locale, context: { draft, node } }, field.id))), hasExtras || advReveal ? (_jsxs("details", { className: "group rounded border bg-muted/20", open: advOpen, onToggle: (e) => setAdvOpen(e.target.open), children: [_jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-muted-foreground", children: t('engine.inspector.flowNode.advanced', locale) }), _jsxs("div", { className: "space-y-1 border-t p-2", children: [_jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: t('engine.inspector.flowNode.advancedHint', locale) }), _jsx("textarea", { value: advText, onChange: (e) => setAdvText(e.target.value), onBlur: commitAdvanced, disabled: readOnly, rows: 6, placeholder: "{ }", className: "w-full rounded border bg-background px-2 py-1.5 font-mono text-xs" }), advError && _jsx("div", { className: "text-xs text-destructive", children: advError })] })] })) : (!readOnly && (_jsxs("button", { type: "button", onClick: () => {
+    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.flowNode.kind', locale), title: node.label || node.id, onClose: onClearSelection, closeLabel: t('engine.inspector.flowNode.close', locale), footer: _jsx(InspectorRemoveButton, { label: t('engine.inspector.flowNode.remove', locale), onClick: remove, disabled: readOnly }), children: [_jsx(InspectorTextField, { label: t('engine.inspector.flowNode.id', locale), value: node.id, onCommit: (v) => patchNode({ id: v }), disabled: readOnly, mono: true }), _jsx(InspectorTextField, { label: t('engine.inspector.flowNode.label', locale), value: node.label ?? '', onCommit: (v) => patchNode({ label: v }), disabled: readOnly }), _jsx(InspectorSelectField, { label: t('engine.inspector.flowNode.type', locale), value: node.type, options: typeOptions.map((v) => ({ value: v, label: v })), onCommit: (v) => patchNode({ type: v }), disabled: readOnly }), _jsx(InspectorTextField, { label: t('engine.inspector.flowNode.description', locale), value: node.description ?? '', onCommit: (v) => patchNode({ description: v || undefined }), disabled: readOnly }), fields.length === 0 ? (_jsx("p", { className: "pt-1 text-xs italic text-muted-foreground", children: t('engine.inspector.flowNode.noConfig', locale) })) : (visibleFields.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t('engine.inspector.flowNode.configuration', locale) }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }))), visibleFields.map((field) => (_jsx(FlowNodeConfigField, { field: field, value: getFieldValue(node, field), onCommit: (v) => setField(field.path, v), disabled: readOnly, locale: locale, context: { draft, node } }, field.id))), isScreen && _jsx(ScreenPreview, { node: node, variables: screenVars, className: "mt-1" }), hasExtras || advReveal ? (_jsxs("details", { className: "group rounded border bg-muted/20", open: advOpen, onToggle: (e) => setAdvOpen(e.target.open), children: [_jsx("summary", { className: "cursor-pointer select-none px-2 py-1.5 text-xs font-medium text-muted-foreground", children: t('engine.inspector.flowNode.advanced', locale) }), _jsxs("div", { className: "space-y-1 border-t p-2", children: [_jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: t('engine.inspector.flowNode.advancedHint', locale) }), _jsx("textarea", { value: advText, onChange: (e) => setAdvText(e.target.value), onBlur: commitAdvanced, disabled: readOnly, rows: 6, placeholder: "{ }", className: "w-full rounded border bg-background px-2 py-1.5 font-mono text-xs" }), advError && _jsx("div", { className: "text-xs text-destructive", children: advError })] })] })) : (!readOnly && (_jsxs("button", { type: "button", onClick: () => {
                     setAdvReveal(true);
                     setAdvOpen(true);
                 }, className: "inline-flex items-center gap-1 self-start text-[11px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(Plus, { className: "h-3 w-3" }), t('engine.inspector.flowNode.advanced', locale)] })))] }));

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

@@ -21,7 +21,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { InspectorShell, InspectorTextField } from './_shared';
 import { Label } from '@object-ui/components';
-import { toFieldName } from '../previews/object-fields-io';
+import { toFieldNameLoose } from '../previews/object-fields-io';
+import { slugify } from '../createDerive';
 import { t } from '../i18n';
 export function ObjectDefaultInspector({ name, draft, onPatch, readOnly, locale, }) {
     const tr = React.useCallback((key) => t(key, locale), [locale]);
@@ -33,16 +34,16 @@ export function ObjectDefaultInspector({ name, draft, onPatch, readOnly, locale,
     const setLabel = (v) => {
         const patch = { label: v || undefined };
         if (createMode && !nameTouched.current)
-            patch.name = toFieldName(v);
+            patch.name = slugify(v);
         onPatch(patch);
     };
     const setName = (v) => {
         nameTouched.current = true;
-        onPatch({ name: toFieldName(v) });
+        onPatch({ name: toFieldNameLoose(v) });
     };
     const nameValue = createMode ? str('name') : name || str('name');
     const title = str('label') || name || tr('designer.object.kind');
-    return (_jsx(InspectorShell, { kindLabel: tr('designer.object.kind'), title: title, onClose: () => { }, hideClose: true, children: _jsxs(Section, { title: tr('designer.object.section.basic'), hint: tr('designer.object.section.basicHint'), children: [_jsx(Field, { hint: tr('designer.object.nameHint'), children: _jsx(InspectorTextField, { label: tr('designer.object.name'), value: nameValue, onCommit: setName, disabled: readOnly || !createMode, mono: true, placeholder: tr('designer.object.namePlaceholder') }) }), _jsx(InspectorTextField, { label: tr('designer.object.label'), value: str('label'), onCommit: setLabel, disabled: readOnly, placeholder: tr('designer.object.labelPlaceholder') }), _jsx(InspectorTextField, { label: tr('designer.object.pluralLabel'), value: str('pluralLabel'), onCommit: (v) => onPatch({ pluralLabel: v || undefined }), disabled: readOnly, placeholder: tr('designer.object.pluralPlaceholder') }), _jsx(Field, { hint: tr('designer.object.iconHint'), children: _jsx(InspectorTextField, { label: tr('designer.object.icon'), value: str('icon'), onCommit: (v) => onPatch({ icon: v || undefined }), disabled: readOnly, mono: true, placeholder: "building" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('designer.object.description') }), _jsx("textarea", { value: str('description'), disabled: readOnly, rows: 2, placeholder: tr('designer.object.descriptionPlaceholder'), onChange: (e) => onPatch({ description: e.target.value || undefined }), className: "w-full text-sm rounded-md border bg-background px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary" })] })] }) }));
+    return (_jsx(InspectorShell, { kindLabel: tr('designer.object.kind'), title: title, onClose: () => { }, hideClose: true, children: _jsxs(Section, { title: tr('designer.object.section.basic'), hint: tr('designer.object.section.basicHint'), children: [_jsx(Field, { hint: tr('designer.object.nameHint'), children: _jsx(InspectorTextField, { label: tr('designer.object.name'), value: nameValue, onCommit: setName, disabled: readOnly || !createMode, mono: true, testId: "object-name-input", placeholder: tr('designer.object.namePlaceholder') }) }), _jsx(InspectorTextField, { label: tr('designer.object.label'), value: str('label'), onCommit: setLabel, disabled: readOnly, placeholder: tr('designer.object.labelPlaceholder') }), _jsx(InspectorTextField, { label: tr('designer.object.pluralLabel'), value: str('pluralLabel'), onCommit: (v) => onPatch({ pluralLabel: v || undefined }), disabled: readOnly, placeholder: tr('designer.object.pluralPlaceholder') }), _jsx(Field, { hint: tr('designer.object.iconHint'), children: _jsx(InspectorTextField, { label: tr('designer.object.icon'), value: str('icon'), onCommit: (v) => onPatch({ icon: v || undefined }), disabled: readOnly, mono: true, placeholder: "building" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('designer.object.description') }), _jsx("textarea", { value: str('description'), disabled: readOnly, rows: 2, placeholder: tr('designer.object.descriptionPlaceholder'), onChange: (e) => onPatch({ description: e.target.value || undefined }), className: "w-full text-sm rounded-md border bg-background px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary" })] })] }) }));
 }
 /* ─────────────── Sub-components ─────────────── */
 function Section({ title, hint, children, }) {

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

@@ -21,13 +21,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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, toFieldName, indexOfField, } from '../previews/object-fields-io';
+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');
@@ -116,7 +117,7 @@ export function ObjectFieldInspector({ selection, draft, onPatch, onClearSelecti
         writeView({ shape: view.shape, entries: nextEntries });
     };
     const setKey = (rawNext) => {
-        const nextName = toFieldName(rawNext);
+        const nextName = toFieldNameLoose(rawNext);
         if (!nextName || nextName === entry.name)
             return;
         // Disallow collision
@@ -127,6 +128,29 @@ export function ObjectFieldInspector({ selection, draft, onPatch, onClearSelecti
         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 });
@@ -177,7 +201,7 @@ export function ObjectFieldInspector({ selection, draft, onPatch, onClearSelecti
             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 }), _jsx(InspectorTextField, { label: tr('designer.field.label'), value: typeof def.label === 'string' ? def.label : '', onCommit: (v) => patchDef({ label: v }), disabled: readOnly }), _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 })), 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 })] })), 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: [
+    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')
@@ -223,15 +247,25 @@ function ObjectPicker({ label, value, options, onCommit, disabled, placeholder,
     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 = [...options];
+        const next = [...rows];
         next[i] = { ...next[i], ...patch };
-        onChange(next);
+        commit(next);
     };
-    const remove = (i) => onChange(options.filter((_, j) => j !== i));
-    const move = (i, to) => onChange(moveArray(options, i, to));
-    const add = () => onChange([...options, { 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: options.length })] }), options.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: options.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 === options.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)] }))] }));
+    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 = [
@@ -266,7 +300,8 @@ function readDependsOn(def) {
  * 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, }) {
+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]);
@@ -296,8 +331,8 @@ function LookupConfigFields({ def, patchDef, hostFieldNames, readOnly, }) {
     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 ? 'Select a field…' : 'Set the target object first';
-    return (_jsxs("div", { className: "space-y-2 border-t pt-2.5", children: [_jsx("div", { className: "text-[11px] font-medium text-muted-foreground", children: "Picker config" }), _jsx(InspectorComboField, { label: "Display field", value: displayField, onCommit: (v) => patchDef({ displayField: v || undefined }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }), _jsx(InspectorComboField, { label: "Description field", value: descriptionField, onCommit: (v) => patchDef({ descriptionField: v || undefined }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: "Search fields\u2026", 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: "Selectable records" }), _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" }), " Add filter"] }))] }), filters.length === 0 ? (_jsxs("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-center text-[11px] text-muted-foreground", children: ["No filter \u2014 every ", reference || 'related', " record is selectable."] })) : (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: [_jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["Filter ", i + 1] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Remove filter", 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: "Field", value: f.field ?? '', onCommit: (v) => patchFilter(i, { field: v }), options: fieldOptions, loading: loading, placeholder: fieldPlaceholder, searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }), _jsx(InspectorSelectField, { label: "Operator", value: f.operator ?? 'eq', options: LOOKUP_OPERATORS, onCommit: (v) => patchFilter(i, { operator: v }), disabled: readOnly }), _jsx(InspectorTextField, { label: "Value", 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: "Depends on (same-record fields)" }), 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: "Add a field this lookup depends on\u2026", searchPlaceholder: "Search this object's fields\u2026", disabled: readOnly, allowCustom: false, mono: true }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 pt-1", children: [_jsx(InspectorNumberField, { label: "Picker page size", value: pageSize, onCommit: (v) => patchDef({ lookupPageSize: v }), placeholder: "10", disabled: readOnly }), _jsx("div", { className: "flex items-end pb-1.5", children: _jsx(InspectorCheckboxField, { label: "Allow quick-create", value: allowCreate, onCommit: (v) => patchDef({ allowCreate: v || undefined }), disabled: readOnly }) })] })] }));
+    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() {

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

@@ -55,4 +55,4 @@ export declare function DatasetNamesEditor({ label, emptyText, names, options, l
     readOnly?: boolean;
     onCommit: (next: string[]) => void;
 }): React.JSX.Element;
-export declare function ReportDefaultInspector({ draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }: ReportDefaultInspectorProps): React.JSX.Element;
+export declare function ReportDefaultInspector({ name, draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }: ReportDefaultInspectorProps): React.JSX.Element;

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

@@ -31,6 +31,7 @@ import * as React from 'react';
 import { Badge, Label } from '@object-ui/components';
 import { InspectorShell, InspectorTextField, InspectorSelectField, appendArray, moveArray, spliceArray, } from './_shared';
 import { AddFieldPopover, FieldListRow } from '../previews/ViewColumnPanes';
+import { toFieldName } from '../previews/object-fields-io';
 import { SchemaForm } from '../SchemaForm';
 import { useDatasetCatalog, useDatasetSemantics, } from '../previews/useDatasetCatalog';
 import { getReportForm, getReportSchema } from '../report-schema';
@@ -50,7 +51,14 @@ const REPORT_CURATED_FIELDS = new Set([
     'values',
     'rows',
     'columns', // matrix across-dimensions — dedicated list below
+    'chart', // dedicated Chart panel below (type + dataset-aware X/Y pickers)
 ]);
+/**
+ * Chart types offered in the curated Chart panel. A dataset-bound report plots
+ * one measure (yAxis) across one dimension (xAxis), so we surface the families
+ * that fit that shape; the renderer maps the rest. (`''` = no chart / table-only.)
+ */
+const REPORT_CHART_TYPES = ['bar', 'column', 'line', 'area', 'pie', 'donut'];
 /** i18n keys for the spec `type` enum (falls back to the raw value). */
 const TYPE_LABEL_KEYS = {
     tabular: 'engine.inspector.report.type.tabular',
@@ -108,8 +116,17 @@ export function DatasetNamesEditor({ label, emptyText, names, options, loading,
                         setOverIndex(null);
                     } }, `${name}-${i}`))) })), !readOnly && (_jsx(AddFieldPopover, { fields: options, usedNames: used, loading: loading, error: error, onAdd: (f) => onCommit(appendArray(names, f.name)) }))] }));
 }
-export function ReportDefaultInspector({ draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }) {
+export function ReportDefaultInspector({ name, draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }) {
     const tr = React.useCallback((key) => t(key, locale), [locale]);
+    // In create mode the host passes an empty `name` (the PK is assigned on
+    // first save). Mirror ObjectDefaultInspector: expose an editable Name that
+    // auto-derives a snake_case slug from the label until the author edits it
+    // directly. Without this, a report created through the canvas would save
+    // with an empty name and fail the snake_case identity rule (the create flow
+    // would dead-end exactly the way it did before report-create used the canvas).
+    const createMode = !name;
+    const nameTouched = React.useRef(false);
+    const nameValue = typeof draft.name === 'string' ? draft.name : '';
     const reportType = typeof draft.type === 'string' ? draft.type : 'tabular';
     const typeOptions = useTypeOptions(reportType, locale);
     const labelValue = typeof draft.label === 'string' ? draft.label : '';
@@ -143,6 +160,34 @@ export function ReportDefaultInspector({ draft, onPatch, readOnly, locale, datas
         type: d.type ?? 'text',
         hidden: false,
     })), [semantics.dimensions]);
+    // Embedded chart (ADR-0021) — edited via the dedicated panel below so authors
+    // pick the X dimension / Y measure from dropdowns sourced from the bound
+    // dataset (instead of free-typing field names), and the generic spec-form
+    // graft excludes `chart`. Patching merges into the chart object; clearing the
+    // type drops the chart entirely.
+    const chart = draft.chart && typeof draft.chart === 'object'
+        ? draft.chart
+        : {};
+    const chartType = typeof chart.type === 'string' ? chart.type : '';
+    const chartX = typeof chart.xAxis === 'string' ? chart.xAxis : '';
+    const chartY = typeof chart.yAxis === 'string' ? chart.yAxis : '';
+    const chartTitle = typeof chart.title === 'string' ? chart.title : '';
+    const commitChart = (patch) => {
+        const next = { ...chart, ...patch };
+        onPatch({ chart: next.type ? next : undefined });
+    };
+    const chartXOptions = React.useMemo(() => {
+        const opts = dimensionOptions.map((d) => ({ value: d.name, label: d.label || d.name }));
+        if (chartX && !opts.some((o) => o.value === chartX))
+            opts.push({ value: chartX, label: chartX });
+        return opts;
+    }, [dimensionOptions, chartX]);
+    const chartYOptions = React.useMemo(() => {
+        const opts = measureOptions.map((m) => ({ value: m.name, label: m.label || m.name }));
+        if (chartY && !opts.some((o) => o.value === chartY))
+            opts.push({ value: chartY, label: chartY });
+        return opts;
+    }, [measureOptions, chartY]);
     // A `joined` report carries its data on dataset-bound `blocks` (edited via
     // the spec form's repeater) — the top-level binding only applies otherwise.
     const datasetBound = reportType !== 'joined';
@@ -156,5 +201,18 @@ export function ReportDefaultInspector({ draft, onPatch, readOnly, locale, datas
         excludeFields: REPORT_CURATED_FIELDS,
         sectionTitle: t('engine.inspector.moreFields', locale),
     }), [serverSchema, locale]);
-    return (_jsxs(InspectorShell, { kindLabel: tr('engine.inspector.report.kind'), title: String(labelValue || draft.name || tr('engine.inspector.report.kind')), onClose: () => { }, closeLabel: tr('engine.inspector.report.close'), hideClose: true, children: [_jsx(InspectorTextField, { label: tr('engine.inspector.report.label'), value: labelValue, onCommit: (v) => onPatch({ label: v }), placeholder: tr('engine.inspector.report.labelPlaceholder'), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.type'), value: reportType, options: typeOptions, onCommit: (v) => onPatch({ type: v }), disabled: readOnly }), datasetBound && (_jsxs(_Fragment, { children: [catalog.datasets.length > 0 || datasetName ? (_jsx(InspectorSelectField, { label: tr('engine.inspector.report.dataset'), value: datasetName, options: datasetOptions, onCommit: (v) => onPatch({ dataset: v }), disabled: readOnly })) : (_jsx(InspectorTextField, { label: tr('engine.inspector.report.dataset'), value: datasetName, onCommit: (v) => onPatch({ dataset: v }), placeholder: tr('engine.inspector.report.datasetPlaceholder'), disabled: readOnly, mono: true })), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.values'), emptyText: tr('engine.inspector.report.valuesEmpty'), names: values, options: measureOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ values: next }) }), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.rows'), emptyText: tr('engine.inspector.report.rowsEmpty'), names: rows, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ rows: next }) }), reportType === 'matrix' && (_jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.columnsAcross'), emptyText: tr('engine.inspector.report.columnsAcrossEmpty'), names: columnsAcross, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ columns: next }) }))] })), _jsx("div", { className: "border-t pt-3", children: schema ? (_jsx(SchemaForm, { schema: schema, form: form, value: draft, hiddenFields: ['type', 'label', 'name', 'dataset', 'values', 'rows', 'columns'], readOnly: readOnly, onChange: (next) => onPatch(next) })) : (_jsx("p", { className: "text-[11px] text-muted-foreground", children: tr('engine.inspector.report.noSchema') })) })] }));
+    return (_jsxs(InspectorShell, { kindLabel: tr('engine.inspector.report.kind'), title: String(labelValue || draft.name || tr('engine.inspector.report.kind')), onClose: () => { }, closeLabel: tr('engine.inspector.report.close'), hideClose: true, children: [createMode && (_jsx(InspectorTextField, { label: tr('engine.inspector.report.name'), value: nameValue, onCommit: (v) => {
+                    nameTouched.current = true;
+                    onPatch({ name: toFieldName(v) });
+                }, placeholder: tr('engine.inspector.report.namePlaceholder'), disabled: readOnly, mono: true })), _jsx(InspectorTextField, { label: tr('engine.inspector.report.label'), value: labelValue, onCommit: (v) => {
+                    // Live-derive the snake_case name from the label until the author
+                    // edits the Name field directly (create mode only).
+                    const patch = { label: v };
+                    if (createMode && !nameTouched.current)
+                        patch.name = toFieldName(v);
+                    onPatch(patch);
+                }, placeholder: tr('engine.inspector.report.labelPlaceholder'), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.type'), value: reportType, options: typeOptions, onCommit: (v) => onPatch({ type: v }), disabled: readOnly }), datasetBound && (_jsxs(_Fragment, { children: [catalog.datasets.length > 0 || datasetName ? (_jsx(InspectorSelectField, { label: tr('engine.inspector.report.dataset'), value: datasetName, options: datasetOptions, onCommit: (v) => onPatch({ dataset: v }), disabled: readOnly })) : (_jsx(InspectorTextField, { label: tr('engine.inspector.report.dataset'), value: datasetName, onCommit: (v) => onPatch({ dataset: v }), placeholder: tr('engine.inspector.report.datasetPlaceholder'), disabled: readOnly, mono: true })), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.values'), emptyText: tr('engine.inspector.report.valuesEmpty'), names: values, options: measureOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ values: next }) }), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.rows'), emptyText: tr('engine.inspector.report.rowsEmpty'), names: rows, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ rows: next }) }), reportType === 'matrix' && (_jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.columnsAcross'), emptyText: tr('engine.inspector.report.columnsAcrossEmpty'), names: columnsAcross, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ columns: next }) })), _jsxs("div", { className: "border-t pt-3 space-y-2", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('engine.inspector.report.chart') }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartType'), value: chartType, options: [
+                                    { value: '', label: tr('engine.inspector.report.chartNone') },
+                                    ...REPORT_CHART_TYPES.map((tp) => ({ value: tp, label: tp })),
+                                ], onCommit: (v) => commitChart({ type: v || undefined }), disabled: readOnly }), chartType ? (_jsxs(_Fragment, { children: [_jsx(InspectorTextField, { label: tr('engine.inspector.report.chartTitle'), value: chartTitle, onCommit: (v) => commitChart({ title: v || undefined }), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartX'), value: chartX, options: chartXOptions, onCommit: (v) => commitChart({ xAxis: v }), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartY'), value: chartY, options: chartYOptions, onCommit: (v) => commitChart({ yAxis: v }), disabled: readOnly })] })) : null] })] })), _jsx("div", { className: "border-t pt-3", children: schema ? (_jsx(SchemaForm, { schema: schema, form: form, value: draft, hiddenFields: ['type', 'label', 'name', 'dataset', 'values', 'rows', 'columns', 'chart'], readOnly: readOnly, onChange: (next) => onPatch(next) })) : (_jsx("p", { className: "text-[11px] text-muted-foreground", children: tr('engine.inspector.report.noSchema') })) })] }));
 }

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

@@ -54,13 +54,17 @@ export interface InspectorReorderButtonsProps {
  * `total - 1`) and the whole pair when `total <= 1`.
  */
 export declare function InspectorReorderButtons({ index, total, onMove, upLabel, downLabel, disabled, }: InspectorReorderButtonsProps): React.JSX.Element | null;
-export declare function InspectorTextField({ label, value, onCommit, placeholder, disabled, mono, }: {
+export declare function InspectorTextField({ label, value, onCommit, onBlur, placeholder, disabled, mono, testId, }: {
     label: string;
     value: string;
     onCommit: (v: string) => void;
+    /** Fired on blur with the final value — e.g. to derive a dependent field. */
+    onBlur?: (v: string) => void;
     placeholder?: string;
     disabled?: boolean;
     mono?: boolean;
+    /** Stable hook for e2e/dogfood selectors. */
+    testId?: string;
 }): React.JSX.Element;
 export declare function InspectorNumberField({ label, value, onCommit, placeholder, disabled, }: {
     label: string;

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

@@ -18,8 +18,8 @@ export function InspectorReorderButtons({ index, total, onMove, upLabel = 'Move
     return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => canUp && onMove(index - 1), disabled: !canUp, "aria-label": upLabel, title: upLabel, children: _jsx(ArrowUp, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => canDown && onMove(index + 1), disabled: !canDown, "aria-label": downLabel, title: downLabel, children: _jsx(ArrowDown, { className: "h-4 w-4" }) })] }));
 }
 /* ─────────────── Form atoms ─────────────── */
-export function InspectorTextField({ label, value, onCommit, placeholder, disabled, mono, }) {
-    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { value: value, onChange: (e) => onCommit(e.target.value), placeholder: placeholder, disabled: disabled, className: cn('h-8 text-sm', mono && 'font-mono') })] }));
+export function InspectorTextField({ label, value, onCommit, onBlur, placeholder, disabled, mono, testId, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { value: value, onChange: (e) => onCommit(e.target.value), onBlur: (e) => onBlur?.(e.target.value), placeholder: placeholder, disabled: disabled, "data-testid": testId, className: cn('h-8 text-sm', mono && 'font-mono') })] }));
 }
 export function InspectorNumberField({ label, value, onCommit, placeholder, disabled, }) {
     return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { type: "number", value: value ?? '', onChange: (e) => {

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

@@ -0,0 +1,24 @@
+export interface BuilderCondition {
+    id?: string;
+    field: string;
+    operator: string;
+    value?: unknown;
+}
+export interface BuilderGroup {
+    id?: string;
+    logic: 'and' | 'or';
+    conditions: BuilderCondition[];
+}
+export type FilterCondition = Record<string, any>;
+/** Serialize the visual group → a spec FilterCondition (flat `$and`). */
+export declare function groupToCondition(group: BuilderGroup | undefined): FilterCondition | undefined;
+/**
+ * Parse a stored FilterCondition → the visual group. `representable: false` when
+ * the condition uses shapes the flat builder can't faithfully edit (nested
+ * `$and`/`$or`, multi-op objects, unmapped operators) — callers should then show
+ * the source editor instead.
+ */
+export declare function conditionToGroup(cond: FilterCondition | undefined | null): {
+    group: BuilderGroup;
+    representable: boolean;
+};

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

@@ -0,0 +1,97 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Bridge between the visual {@link FilterBuilder} (a flat `FilterGroup` of
+ * `{field, operator, value}` rows, camelCase operators) and the spec
+ * `FilterCondition` (Mongo-style `{ field: { $op: value } }`, conjoined with
+ * `$and`) stored on `dataset.filter` / `measure.filter`.
+ *
+ * Scope (deliberate): the visual editor supports the common case — a flat AND
+ * of simple `field op value` conditions. Anything it can't faithfully round-trip
+ * (nested groups, `$or`, multi-operator objects, unmapped operators) is reported
+ * as NOT representable so the caller can fall back to the source editor instead
+ * of silently corrupting the author's filter.
+ */
+/** FilterBuilder camelCase operator → FilterCondition Mongo operator. */
+const OP_TO_MONGO = {
+    equals: '$eq', notEquals: '$ne',
+    greaterThan: '$gt', greaterOrEqual: '$gte', lessThan: '$lt', lessOrEqual: '$lte',
+    after: '$gt', before: '$lt',
+    contains: '$contains', in: '$in', notIn: '$nin',
+};
+const MONGO_TO_OP = {
+    $eq: 'equals', $ne: 'notEquals',
+    $gt: 'greaterThan', $gte: 'greaterOrEqual', $lt: 'lessThan', $lte: 'lessOrEqual',
+    $contains: 'contains', $in: 'in', $nin: 'notIn',
+};
+/** Serialize the visual group → a spec FilterCondition (flat `$and`). */
+export function groupToCondition(group) {
+    const conds = (group?.conditions ?? []).filter((c) => c && c.field);
+    const parts = [];
+    for (const c of conds) {
+        if (c.operator === 'isEmpty') {
+            parts.push({ [c.field]: { $exists: false } });
+            continue;
+        }
+        if (c.operator === 'isNotEmpty') {
+            parts.push({ [c.field]: { $exists: true } });
+            continue;
+        }
+        const mop = OP_TO_MONGO[c.operator];
+        if (!mop)
+            continue; // unmapped (e.g. notContains/between) — drop rather than emit a bad filter
+        parts.push({ [c.field]: { [mop]: c.value } });
+    }
+    if (parts.length === 0)
+        return undefined;
+    if (parts.length === 1)
+        return parts[0];
+    return { $and: parts };
+}
+/**
+ * Parse a stored FilterCondition → the visual group. `representable: false` when
+ * the condition uses shapes the flat builder can't faithfully edit (nested
+ * `$and`/`$or`, multi-op objects, unmapped operators) — callers should then show
+ * the source editor instead.
+ */
+export function conditionToGroup(cond) {
+    const empty = { id: 'g', logic: 'and', conditions: [] };
+    if (cond == null)
+        return { group: empty, representable: true };
+    if (typeof cond !== 'object' || Array.isArray(cond))
+        return { group: empty, representable: false };
+    if ('$or' in cond)
+        return { group: empty, representable: false };
+    const list = Array.isArray(cond.$and) ? cond.$and : [cond];
+    const conditions = [];
+    for (let i = 0; i < list.length; i++) {
+        const c = list[i];
+        if (!c || typeof c !== 'object' || Array.isArray(c))
+            return { group: empty, representable: false };
+        if ('$and' in c || '$or' in c)
+            return { group: empty, representable: false };
+        const keys = Object.keys(c);
+        if (keys.length !== 1)
+            return { group: empty, representable: false };
+        const field = keys[0];
+        const v = c[field];
+        if (v && typeof v === 'object' && !Array.isArray(v)) {
+            const opKeys = Object.keys(v);
+            if (opKeys.length !== 1)
+                return { group: empty, representable: false };
+            const mop = opKeys[0];
+            if (mop === '$exists') {
+                conditions.push({ id: `c${i}`, field, operator: v.$exists ? 'isNotEmpty' : 'isEmpty', value: '' });
+            }
+            else {
+                const op = MONGO_TO_OP[mop];
+                if (!op)
+                    return { group: empty, representable: false };
+                conditions.push({ id: `c${i}`, field, operator: op, value: v[mop] });
+            }
+        }
+        else {
+            conditions.push({ id: `c${i}`, field, operator: 'equals', value: v }); // implicit equality
+        }
+    }
+    return { group: { id: 'g', logic: 'and', conditions }, representable: true };
+}