@object-ui/app-shell 6.2.3 → 7.0.0

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

@@ -0,0 +1,16 @@
+/**
+ * FlowEdgeInspector — scoped editor for the selected flow connection (edge).
+ *
+ * Selection shape:  { kind: 'edge', id: <edgeKey> }
+ * Patches:           draft.edges[i] = {...edge, ...updates}
+ *
+ * An edge carries the flow's routing semantics between two nodes: an optional
+ * branch `label` (e.g. an Approval node's `approve` / `reject` out-edge, a
+ * Decision branch name), a guard `condition` (a CEL expression the engine
+ * evaluates to pick the branch), and an `isDefault` flag marking the fallback
+ * ("else") branch. Source / target are shown read-only — rewiring is done on
+ * the canvas, not here — so the edge's identity key stays stable across edits.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+export declare function FlowEdgeInspector({ selection, draft, onPatch, onClearSelection, locale, readOnly }: MetadataInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n';
+import { InspectorShell, InspectorTextField, InspectorCheckboxField, InspectorRemoveButton, InspectorEmptyState, spliceArray, } from './_shared';
+import { Label } from '@object-ui/components';
+import { edgeKey, conditionText } from '../previews/flow-canvas-layout';
+import { validateExpressionClient } from './expression-validate';
+/** Read-only display of an edge endpoint (source / target node id). */
+function EndpointRow({ label, value }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: "flex h-8 items-center rounded border bg-muted/30 px-2 font-mono text-sm text-muted-foreground", children: value })] }));
+}
+export function FlowEdgeInspector({ selection, draft, onPatch, onClearSelection, locale, readOnly }) {
+    const edges = Array.isArray(draft.edges) ? draft.edges : [];
+    const index = edges.findIndex((e, i) => edgeKey(e, i) === selection.id);
+    const edge = index >= 0 ? edges[index] : null;
+    if (!edge) {
+        return (_jsx(InspectorShell, { kindLabel: t('engine.inspector.flowEdge.kind', locale), title: selection.label ?? selection.id, onClose: onClearSelection, closeLabel: t('engine.inspector.flowEdge.close', locale), children: _jsx(InspectorEmptyState, { message: t('engine.inspector.flowEdge.missing', locale) }) }));
+    }
+    // Splice an updated edge in place. A field edit never moves the edge in the
+    // array, so the row index is stable; but an edge without an explicit `id`
+    // keys off `source->target#index`, so we re-point the selection to the fresh
+    // key after the patch to keep the panel attached to the same edge.
+    const patchEdge = (updates) => {
+        const next = { ...edge, ...updates };
+        // Prune empty optional keys so a cleared field doesn't linger in the draft.
+        for (const k of ['label', 'condition', 'isDefault']) {
+            const v = next[k];
+            if (v === undefined || v === '' || v === false)
+                delete next[k];
+        }
+        onPatch({ edges: spliceArray(edges, index, next) });
+    };
+    const isDefault = edge.isDefault === true;
+    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.flowEdge.kind', locale), title: selection.label ?? `${edge.source} → ${edge.target}`, onClose: onClearSelection, closeLabel: t('engine.inspector.flowEdge.close', locale), footer: _jsx(InspectorRemoveButton, { label: t('engine.inspector.flowEdge.remove', locale), onClick: () => {
+                onPatch({ edges: spliceArray(edges, index, null) });
+                onClearSelection();
+            }, disabled: readOnly }), children: [_jsx(EndpointRow, { label: t('engine.inspector.flowEdge.source', locale), value: edge.source }), _jsx(EndpointRow, { label: t('engine.inspector.flowEdge.target', locale), value: edge.target }), _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.flowEdge.routing', locale) }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }), _jsx(InspectorTextField, { label: t('engine.inspector.flowEdge.label', locale), value: edge.label ?? '', onCommit: (v) => patchEdge({ label: v }), placeholder: t('engine.inspector.flowEdge.labelHint', locale), disabled: readOnly || isDefault }), _jsx(InspectorTextField, { label: t('engine.inspector.flowEdge.condition', locale), value: conditionText(edge.condition) ?? '', onCommit: (v) => patchEdge({ condition: v || undefined }), placeholder: t('engine.inspector.flowEdge.conditionHint', locale), disabled: readOnly || isDefault, mono: true }), (() => {
+                // ADR-0032 — flag a malformed edge guard (e.g. `{record.x}` brace-in-CEL)
+                // inline, with the same corrective message as build/agent validation.
+                const issue = isDefault ? null : validateExpressionClient('predicate', edge.condition);
+                return issue ? (_jsx("p", { className: "text-[11px] leading-snug text-destructive", role: "alert", children: issue.message })) : null;
+            })(), _jsx(InspectorCheckboxField, { label: t('engine.inspector.flowEdge.isDefault', locale), value: isDefault, 
+                // The default ("else") branch is taken when no other guard matches, so
+                // it carries neither a condition nor a branch label — clear both.
+                onCommit: (v) => patchEdge(v ? { isDefault: true, condition: undefined, label: undefined } : { isDefault: false }), disabled: readOnly }), _jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: t('engine.inspector.flowEdge.hint', locale) })] }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * FlowInspector — the single inspector registered for the `flow` metadata type.
+ *
+ * The flow canvas emits two kinds of selection (see `FlowPreview` /
+ * `FlowCanvas`): a node (`{ kind: 'node' }`) or a connection edge
+ * (`{ kind: 'edge' }`). This thin router forwards each to its focused editor so
+ * neither component has to know about the other. Anything else falls through to
+ * the node inspector (which renders an empty-state for an unknown id).
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+export declare function FlowInspector(props: MetadataInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlowNodeInspector } from './FlowNodeInspector';
+import { FlowEdgeInspector } from './FlowEdgeInspector';
+export function FlowInspector(props) {
+    if (props.selection.kind === 'edge') {
+        return _jsx(FlowEdgeInspector, { ...props });
+    }
+    return _jsx(FlowNodeInspector, { ...props });
+}

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

@@ -0,0 +1,30 @@
+/**
+ * FlowKeyValueField — a small repeatable key/value editor for object-map
+ * config (e.g. an action's `params`, a subflow's `input`, request `headers`).
+ *
+ * Design notes (why local draft state instead of commit-on-keystroke):
+ *  - The host inspector owns the draft and re-renders from the top on every
+ *    `onPatch`. Committing each keystroke would rehydrate rows mid-edit and
+ *    drop focus / collapse half-typed keys. So rows live in LOCAL state and
+ *    only flush to `onCommit` on blur, Enter, add, or remove.
+ *  - Rows carry a STABLE `id` (not the editable key) so renaming a key never
+ *    remounts the row — caret and focus are preserved.
+ *  - Values are smart-parsed on commit (number / boolean / else string) so an
+ *    author can type `3` or `true` without writing JSON. Empty and duplicate
+ *    keys are skipped when flushing (last non-empty wins is avoided — earlier
+ *    rows take precedence).
+ */
+import * as React from 'react';
+export interface FlowKeyValueFieldProps {
+    label: string;
+    value: unknown;
+    onCommit: (value: Record<string, unknown> | undefined) => void;
+    disabled?: boolean;
+    help?: string;
+    addLabel: string;
+    keyLabel: string;
+    valueLabel: string;
+    removeLabel: string;
+    emptyLabel: string;
+}
+export declare function FlowKeyValueField({ label, value, onCommit, disabled, help, addLabel, keyLabel, valueLabel, removeLabel, emptyLabel, }: FlowKeyValueFieldProps): React.JSX.Element;

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

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowKeyValueField — a small repeatable key/value editor for object-map
+ * config (e.g. an action's `params`, a subflow's `input`, request `headers`).
+ *
+ * Design notes (why local draft state instead of commit-on-keystroke):
+ *  - The host inspector owns the draft and re-renders from the top on every
+ *    `onPatch`. Committing each keystroke would rehydrate rows mid-edit and
+ *    drop focus / collapse half-typed keys. So rows live in LOCAL state and
+ *    only flush to `onCommit` on blur, Enter, add, or remove.
+ *  - Rows carry a STABLE `id` (not the editable key) so renaming a key never
+ *    remounts the row — caret and focus are preserved.
+ *  - Values are smart-parsed on commit (number / boolean / else string) so an
+ *    author can type `3` or `true` without writing JSON. Empty and duplicate
+ *    keys are skipped when flushing (last non-empty wins is avoided — earlier
+ *    rows take precedence).
+ */
+import * as React from 'react';
+import { Plus, X } from 'lucide-react';
+import { Button, Input, Label } from '@object-ui/components';
+import { uniqueId } from './_shared';
+function isPlainObject(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+/** Render a stored value as an editable string. */
+function toRaw(v) {
+    if (v == null)
+        return '';
+    if (typeof v === 'string')
+        return v;
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v);
+    return JSON.stringify(v);
+}
+/** Smart-parse an edited value string back to a scalar (no hand-written JSON). */
+function parseValue(raw) {
+    const s = raw.trim();
+    if (s === '')
+        return '';
+    if (s === 'true')
+        return true;
+    if (s === 'false')
+        return false;
+    if (/^-?\d+(\.\d+)?$/.test(s))
+        return Number(s);
+    // Round-trip non-scalar values losslessly: a filter operator like
+    // `{"$ne": null}` or an array must parse back to its object/array form, not
+    // be flattened to a string. Template refs like `{leadId}` are not valid JSON
+    // and correctly fall through to a plain string.
+    if ((s.startsWith('{') && s.endsWith('}')) || (s.startsWith('[') && s.endsWith(']'))) {
+        try {
+            return JSON.parse(s);
+        }
+        catch {
+            return raw;
+        }
+    }
+    return raw;
+}
+function toRows(obj, existingIds) {
+    const ids = [...existingIds];
+    return Object.entries(obj).map(([key, value]) => {
+        const id = uniqueId('kv', ids);
+        ids.push(id);
+        return { id, key, raw: toRaw(value) };
+    });
+}
+/** Flush rows to an object, skipping empty/duplicate keys (first wins). */
+function rowsToObject(rows) {
+    const out = {};
+    for (const r of rows) {
+        const k = r.key.trim();
+        if (!k || k in out)
+            continue;
+        out[k] = parseValue(r.raw);
+    }
+    return out;
+}
+function serialize(obj) {
+    const sorted = Object.keys(obj).sort().reduce((acc, k) => {
+        acc[k] = obj[k];
+        return acc;
+    }, {});
+    return JSON.stringify(sorted);
+}
+export function FlowKeyValueField({ label, value, onCommit, disabled, help, addLabel, keyLabel, valueLabel, removeLabel, emptyLabel, }) {
+    const external = isPlainObject(value) ? value : {};
+    const [rows, setRows] = React.useState(() => toRows(external, []));
+    // Track the last value we committed so an external change (node switch) can
+    // resync rows without clobbering an in-progress edit of the same node.
+    const lastCommitted = React.useRef(serialize(external));
+    React.useEffect(() => {
+        const next = serialize(external);
+        if (next !== lastCommitted.current) {
+            setRows(toRows(external, []));
+            lastCommitted.current = next;
+        }
+    }, [external]);
+    const flush = (nextRows) => {
+        const obj = rowsToObject(nextRows);
+        lastCommitted.current = serialize(obj);
+        onCommit(Object.keys(obj).length ? obj : undefined);
+    };
+    const setRowField = (id, patch) => {
+        setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+    };
+    const addRow = () => {
+        setRows((rs) => [...rs, { id: uniqueId('kv', rs.map((r) => r.id)), key: '', raw: '' }]);
+    };
+    const removeRow = (id) => {
+        setRows((rs) => {
+            const next = rs.filter((r) => r.id !== id);
+            flush(next);
+            return next;
+        });
+    };
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsxs("div", { className: "space-y-1.5", children: [rows.length === 0 && (_jsx("p", { className: "text-[11px] italic text-muted-foreground", children: emptyLabel })), rows.map((row) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: row.key, onChange: (e) => setRowField(row.id, { key: e.target.value }), onBlur: () => flush(rows), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        e.target.blur();
+                                }, placeholder: keyLabel, disabled: disabled, className: "h-8 flex-1 font-mono text-xs" }), _jsx(Input, { value: row.raw, onChange: (e) => setRowField(row.id, { raw: e.target.value }), onBlur: () => flush(rows), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        e.target.blur();
+                                }, placeholder: valueLabel, disabled: disabled, className: "h-8 flex-1 text-xs" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 w-8 shrink-0 p-0 text-muted-foreground", onClick: () => removeRow(row.id), disabled: disabled, "aria-label": removeLabel, title: removeLabel, children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }, row.id)))] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 w-full text-xs", onClick: addRow, disabled: disabled, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), addLabel] }), help && _jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: help })] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * FlowNodeConfigField — renders one scalar config control for a flow node,
+ * driven by a `FlowConfigField` descriptor. Bridges descriptor "kind" to the
+ * shared inspector field primitives and writes back to `node.config[key]`.
+ */
+import * as React from 'react';
+import type { FlowConfigField } from './flow-node-config';
+import { type FlowReferenceContext } from './FlowReferenceField';
+export interface FlowNodeConfigFieldProps {
+    field: FlowConfigField;
+    value: unknown;
+    onCommit: (value: unknown) => void;
+    disabled?: boolean;
+    locale?: string;
+    /** Draft + node context so `reference` fields can resolve their options. */
+    context?: FlowReferenceContext;
+}
+export declare function FlowNodeConfigField({ field, value, onCommit, disabled, locale, context }: FlowNodeConfigFieldProps): React.JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n';
+import { InspectorTextField, InspectorNumberField, InspectorSelectField, InspectorCheckboxField, } from './_shared';
+import { Label } from '@object-ui/components';
+import { FlowKeyValueField } from './FlowKeyValueField';
+import { FlowStringListField } from './FlowStringListField';
+import { FlowObjectListField } from './FlowObjectListField';
+import { FlowReferenceField } from './FlowReferenceField';
+import { validateExpressionClient } from './expression-validate';
+export function FlowNodeConfigField({ field, value, onCommit, disabled, locale, context }) {
+    const control = (() => {
+        switch (field.kind) {
+            case 'reference':
+                return (_jsx(FlowReferenceField, { field: field, value: value, onCommit: (v) => onCommit(v), disabled: disabled, context: context }));
+            case 'keyValue':
+                return (_jsx(FlowKeyValueField, { label: field.label, value: value, onCommit: (v) => onCommit(v), disabled: disabled, addLabel: t('engine.inspector.flowNode.kv.add', locale), keyLabel: t('engine.inspector.flowNode.kv.key', locale), valueLabel: t('engine.inspector.flowNode.kv.value', locale), removeLabel: t('engine.inspector.flowNode.kv.remove', locale), emptyLabel: t('engine.inspector.flowNode.kv.empty', locale) }));
+            case 'stringList':
+                return (_jsx(FlowStringListField, { label: field.label, value: value, onCommit: (v) => onCommit(v), disabled: disabled, addLabel: t('engine.inspector.flowNode.list.add', locale), itemLabel: t('engine.inspector.flowNode.list.item', locale), removeLabel: t('engine.inspector.flowNode.list.remove', locale), emptyLabel: t('engine.inspector.flowNode.list.empty', locale) }));
+            case 'objectList':
+                return (_jsx(FlowObjectListField, { label: field.label, columns: field.columns ?? [], value: value, onCommit: (v) => onCommit(v), disabled: disabled, addLabel: t('engine.inspector.flowNode.list.add', locale), removeLabel: t('engine.inspector.flowNode.list.remove', locale), emptyLabel: t('engine.inspector.flowNode.list.empty', locale), context: context }));
+            case 'number':
+                return (_jsx(InspectorNumberField, { label: field.label, value: typeof value === 'number' ? value : value != null && value !== '' ? Number(value) : undefined, placeholder: field.placeholder, onCommit: (v) => onCommit(v), disabled: disabled }));
+            case 'boolean':
+                return (_jsx(InspectorCheckboxField, { label: field.label, value: value === true, onCommit: (v) => onCommit(v), disabled: disabled }));
+            case 'select':
+                return (_jsx(InspectorSelectField, { label: field.label, value: value != null ? String(value) : '', options: field.options ?? [], onCommit: (v) => onCommit(v), disabled: disabled }));
+            case 'textarea':
+                return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: field.label }), _jsx("textarea", { value: value != null ? String(value) : '', onChange: (e) => onCommit(e.target.value), placeholder: field.placeholder, disabled: disabled, rows: 4, className: "w-full rounded border bg-background px-2 py-1.5 font-mono text-xs" })] }));
+            case 'expression':
+            case 'text':
+            default:
+                return (_jsx(InspectorTextField, { label: field.label, value: value != null ? String(value) : '', placeholder: field.placeholder, onCommit: (v) => onCommit(v), disabled: disabled, mono: field.kind === 'expression' }));
+        }
+    })();
+    // ADR-0032 — surface a malformed condition (e.g. the `{record.x}` brace-in-CEL
+    // mistake) inline, as the author types, with the same corrective message the
+    // build and the agent tool emit. Only checked for expression-bearing fields.
+    const exprIssue = field.kind === 'expression' ? validateExpressionClient('predicate', value) : null;
+    return (_jsxs("div", { className: "space-y-1", children: [control, exprIssue && (_jsx("p", { className: "text-[11px] leading-snug text-destructive", role: "alert", children: exprIssue.message })), field.help && !exprIssue && (_jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: field.help }))] }));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * FlowNodeInspector — scoped editor for the selected flow node.
+ *
+ * Selection shape:  { kind: 'node', id: <nodeId> }
+ * Patches:           draft.nodes[i] = {...node, ...updates}
+ *
+ * Beyond id / label / type / description, each node type exposes a set of
+ * typed form fields (see `flow-node-config`) that edit scalar keys on
+ * `node.config`. Any remaining config keys (objects, arrays, bespoke flags)
+ * are surfaced in an "Advanced (JSON)" block so authors are never locked out.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+export declare function FlowNodeInspector({ selection, draft, onPatch, onClearSelection, locale, readOnly }: MetadataInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowNodeInspector — scoped editor for the selected flow node.
+ *
+ * Selection shape:  { kind: 'node', id: <nodeId> }
+ * Patches:           draft.nodes[i] = {...node, ...updates}
+ *
+ * Beyond id / label / type / description, each node type exposes a set of
+ * typed form fields (see `flow-node-config`) that edit scalar keys on
+ * `node.config`. Any remaining config keys (objects, arrays, bespoke flags)
+ * are surfaced in an "Advanced (JSON)" block so authors are never locked out.
+ */
+import * as React from 'react';
+import { Plus } from 'lucide-react';
+import { t } from '../i18n';
+import { InspectorShell, InspectorTextField, InspectorSelectField, InspectorRemoveButton, InspectorEmptyState, spliceArray, } from './_shared';
+import { fieldsForNodeType, isFieldVisible, getFieldValue, configKeyOf, FLOW_NODE_TYPE_OPTIONS, } from './flow-node-config';
+import { jsonSchemaToFlowFields } from './json-schema-to-fields';
+import { useActionConfigSchemas } from '../previews/useFlowNodePalette';
+import { FlowNodeConfigField } from './FlowNodeConfigField';
+function asConfig(node) {
+    const c = node?.config;
+    return c && typeof c === 'object' && !Array.isArray(c) ? c : {};
+}
+/**
+ * Immutably set `value` at `path` on a plain object, pruning any intermediate
+ * object that becomes empty (so e.g. clearing the last `waitEventConfig` key
+ * removes the whole block). Empty string / null / undefined deletes the leaf.
+ */
+function setAtPath(obj, path, value) {
+    const [head, ...rest] = path;
+    const next = { ...obj };
+    if (rest.length === 0) {
+        if (value === undefined || value === null || value === '')
+            delete next[head];
+        else
+            next[head] = value;
+    }
+    else {
+        const cur = next[head];
+        const base = cur && typeof cur === 'object' && !Array.isArray(cur) ? cur : {};
+        const child = setAtPath(base, rest, value);
+        if (Object.keys(child).length === 0)
+            delete next[head];
+        else
+            next[head] = child;
+    }
+    return next;
+}
+export function FlowNodeInspector({ selection, draft, onPatch, onClearSelection, locale, readOnly }) {
+    const nodes = Array.isArray(draft.nodes) ? draft.nodes : [];
+    const index = nodes.findIndex((n) => n?.id === selection.id);
+    const node = index >= 0 ? nodes[index] : null;
+    // Server-driven property form: when the running engine publishes a config
+    // JSON Schema for this node type (ADR-0018 §configSchema — e.g. the ADR-0019
+    // approval node), derive the form from it so the designer stays in lock-step
+    // with the backend. Falls back to the hardcoded field group when no schema is
+    // published (offline / plugin absent / older backend).
+    const configSchemas = useActionConfigSchemas();
+    const fields = React.useMemo(() => {
+        const schema = node?.type ? configSchemas[node.type] : undefined;
+        const serverFields = schema !== undefined ? jsonSchemaToFlowFields(schema) : null;
+        return serverFields ?? fieldsForNodeType(node?.type);
+    }, [configSchemas, node?.type]);
+    const config = asConfig(node);
+    const visibleFields = fields.filter((f) => isFieldVisible(f, node, fields));
+    // Only fields stored under `config` "own" a config key; spec-structured
+    // blocks (waitEventConfig, etc.) and top-level timeoutMs never suppress an
+    // Advanced key.
+    const ownedConfigKeys = React.useMemo(() => {
+        const s = new Set();
+        for (const f of fields) {
+            const k = configKeyOf(f);
+            if (k)
+                s.add(k);
+        }
+        return s;
+    }, [fields]);
+    const extraJson = React.useMemo(() => {
+        const extra = Object.fromEntries(Object.entries(config).filter(([k]) => !ownedConfigKeys.has(k)));
+        return Object.keys(extra).length ? JSON.stringify(extra, null, 2) : '';
+        // Recompute when the node identity changes (patch) or the known keys change.
+    }, [node, ownedConfigKeys]); // eslint-disable-line react-hooks/exhaustive-deps
+    const [advText, setAdvText] = React.useState(extraJson);
+    const [advError, setAdvError] = React.useState(null);
+    const [advOpen, setAdvOpen] = React.useState(extraJson.trim() !== '');
+    // Reveals the optional custom-keys editor on nodes that currently have none.
+    const [advReveal, setAdvReveal] = React.useState(false);
+    React.useEffect(() => {
+        setAdvText(extraJson);
+        setAdvError(null);
+        setAdvOpen(extraJson.trim() !== '');
+        setAdvReveal(false);
+    }, [extraJson]);
+    if (!node) {
+        return (_jsx(InspectorShell, { kindLabel: t('engine.inspector.flowNode.kind', locale), title: selection.label ?? selection.id, onClose: onClearSelection, closeLabel: t('engine.inspector.flowNode.close', locale), children: _jsx(InspectorEmptyState, { message: selection.id }) }));
+    }
+    const patchNode = (updates) => {
+        onPatch({ nodes: spliceArray(nodes, index, { ...node, ...updates }) });
+    };
+    const hasExtras = extraJson.trim() !== '';
+    const setField = (path, value) => {
+        const nextNode = setAtPath(node, path, value);
+        onPatch({ nodes: spliceArray(nodes, index, nextNode) });
+    };
+    const commitAdvanced = () => {
+        try {
+            const parsed = advText.trim() === '' ? {} : JSON.parse(advText);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+                throw new Error('Must be a JSON object');
+            // Form-owned config keys always win: the Advanced block may only set keys
+            // that no form field owns, so it can never overwrite or resurrect one.
+            const knownPart = Object.fromEntries(Object.entries(config).filter(([k]) => ownedConfigKeys.has(k)));
+            const extrasPart = Object.fromEntries(Object.entries(parsed).filter(([k]) => !ownedConfigKeys.has(k)));
+            const merged = { ...knownPart, ...extrasPart };
+            setAdvError(null);
+            const nextNode = { ...node };
+            if (Object.keys(merged).length === 0)
+                delete nextNode.config;
+            else
+                nextNode.config = merged;
+            onPatch({ nodes: spliceArray(nodes, index, nextNode) });
+        }
+        catch (e) {
+            setAdvError(String(e.message));
+        }
+    };
+    const remove = () => {
+        onPatch({ nodes: spliceArray(nodes, index, null) });
+        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: () => {
+                    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/FlowObjectListField.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FlowObjectListField — a repeatable array-of-objects editor driven by a column
+ * schema (e.g. a screen node's `fields`: a list of `{name,label,type,required,
+ * visibleWhen}` definitions).
+ *
+ * Like the sibling key/value and string-list editors, rows are held in LOCAL
+ * state with a STABLE id and flushed on blur / Enter / add / remove so a row
+ * never remounts mid-keystroke. Empty per-cell values are pruned; a row with no
+ * populated cells is dropped on flush; an empty list commits `undefined`.
+ */
+import * as React from 'react';
+import type { FlowConfigColumn } from './flow-node-config';
+import { type FlowReferenceContext } from './FlowReferenceField';
+export interface FlowObjectListFieldProps {
+    label: string;
+    columns: FlowConfigColumn[];
+    value: unknown;
+    onCommit: (value: Array<Record<string, unknown>> | undefined) => void;
+    disabled?: boolean;
+    addLabel: string;
+    removeLabel: string;
+    emptyLabel: string;
+    /** Draft + node context so `reference` columns can resolve their options. */
+    context?: FlowReferenceContext;
+}
+export declare function FlowObjectListField({ label, columns, value, onCommit, disabled, addLabel, removeLabel, emptyLabel, context, }: FlowObjectListFieldProps): React.JSX.Element;

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowObjectListField — a repeatable array-of-objects editor driven by a column
+ * schema (e.g. a screen node's `fields`: a list of `{name,label,type,required,
+ * visibleWhen}` definitions).
+ *
+ * Like the sibling key/value and string-list editors, rows are held in LOCAL
+ * state with a STABLE id and flushed on blur / Enter / add / remove so a row
+ * never remounts mid-keystroke. Empty per-cell values are pruned; a row with no
+ * populated cells is dropped on flush; an empty list commits `undefined`.
+ */
+import * as React from 'react';
+import { Plus, X } from 'lucide-react';
+import { Button, Input, Label, Checkbox } from '@object-ui/components';
+import { uniqueId } from './_shared';
+import { ReferenceCombobox, resolveRefKind } from './FlowReferenceField';
+function toRows(list, columns) {
+    const ids = [];
+    return list.map((item) => {
+        const id = uniqueId('ol', ids);
+        ids.push(id);
+        const values = {};
+        for (const col of columns) {
+            const v = item[col.key];
+            if (col.kind === 'boolean')
+                values[col.key] = v === true;
+            else if (v != null)
+                values[col.key] = String(v);
+            else
+                values[col.key] = '';
+        }
+        return { id, values };
+    });
+}
+function rowsToList(rows, columns) {
+    const out = [];
+    for (const row of rows) {
+        const obj = {};
+        let hasValue = false;
+        for (const col of columns) {
+            const v = row.values[col.key];
+            if (col.kind === 'boolean') {
+                if (v === true) {
+                    obj[col.key] = true;
+                    hasValue = true;
+                }
+            }
+            else if (typeof v === 'string' && v.trim() !== '') {
+                obj[col.key] = v.trim();
+                hasValue = true;
+            }
+        }
+        if (hasValue)
+            out.push(obj);
+    }
+    return out;
+}
+export function FlowObjectListField({ label, columns, value, onCommit, disabled, addLabel, removeLabel, emptyLabel, context, }) {
+    const external = React.useMemo(() => Array.isArray(value)
+        ? value.filter((v) => v && typeof v === 'object')
+        : [], [value]);
+    const [rows, setRows] = React.useState(() => toRows(external, columns));
+    const lastCommitted = React.useRef(JSON.stringify(external));
+    React.useEffect(() => {
+        const next = JSON.stringify(external);
+        if (next !== lastCommitted.current) {
+            setRows(toRows(external, columns));
+            lastCommitted.current = next;
+        }
+    }, [external, columns]);
+    const flush = (nextRows) => {
+        const list = rowsToList(nextRows, columns);
+        lastCommitted.current = JSON.stringify(list);
+        onCommit(list.length ? list : undefined);
+    };
+    const setCell = (id, key, v) => {
+        setRows((rs) => rs.map((r) => (r.id === id ? { ...r, values: { ...r.values, [key]: v } } : r)));
+    };
+    const addRow = () => {
+        const values = {};
+        for (const col of columns)
+            values[col.key] = col.kind === 'boolean' ? false : '';
+        setRows((rs) => [...rs, { id: uniqueId('ol', rs.map((r) => r.id)), values }]);
+    };
+    const removeRow = (id) => {
+        setRows((rs) => {
+            const next = rs.filter((r) => r.id !== id);
+            flush(next);
+            return next;
+        });
+    };
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsxs("div", { className: "space-y-2", children: [rows.length === 0 && (_jsx("p", { className: "text-[11px] italic text-muted-foreground", children: emptyLabel })), rows.map((row) => (_jsxs("div", { className: "rounded border bg-muted/30 p-2", children: [_jsx("div", { className: "mb-1 flex justify-end", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 p-0 text-muted-foreground", onClick: () => removeRow(row.id), disabled: disabled, "aria-label": removeLabel, title: removeLabel, children: _jsx(X, { className: "h-3.5 w-3.5" }) }) }), _jsx("div", { className: "space-y-1.5", children: columns.map((col) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "w-24 shrink-0 text-[11px] text-muted-foreground", children: col.label }), col.kind === 'boolean' ? (_jsx(Checkbox, { checked: row.values[col.key] === true, onCheckedChange: (c) => {
+                                                setRows((rs) => {
+                                                    const next = rs.map((r) => r.id === row.id
+                                                        ? { ...r, values: { ...r.values, [col.key]: c === true } }
+                                                        : r);
+                                                    flush(next);
+                                                    return next;
+                                                });
+                                            }, disabled: disabled })) : col.kind === 'reference' ? (_jsx("div", { className: "flex-1", children: _jsx(ReferenceCombobox, { resolved: resolveRefKind(col.ref, (k) => row.values[k]), value: typeof row.values[col.key] === 'string' ? row.values[col.key] : '', onCommit: (v) => setCell(row.id, col.key, typeof v === 'string' ? v : ''), onBlur: () => flush(rows), placeholder: col.placeholder, disabled: disabled, context: context, showHint: false }) })) : (_jsx(Input, { value: typeof row.values[col.key] === 'string' ? row.values[col.key] : '', onChange: (e) => setCell(row.id, col.key, e.target.value), onBlur: () => flush(rows), onKeyDown: (e) => {
+                                                if (e.key === 'Enter')
+                                                    e.target.blur();
+                                            }, placeholder: col.placeholder, disabled: disabled, className: `h-8 flex-1 text-xs${col.kind === 'expression' ? ' font-mono' : ''}` }))] }, col.key))) })] }, row.id)))] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 w-full text-xs", onClick: addRow, disabled: disabled, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), addLabel] })] }));
+}