@object-ui/app-shell 7.0.0 → 7.1.0

package/dist/views/metadata-admin/previews/FlowSimulatorPanel.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { Play, StepForward, RotateCcw, ChevronRight, AlertTriangle, CircleAlert, Plus, Trash2 } from 'lucide-react';
 import { Button, Input, Label, cn } from '@object-ui/components';
 import { FlowSimulator } from './simulator/flow-simulator';
+import { ScreenPreview } from './ScreenPreview';
 /** Coerce a free-text seed value: number / boolean / JSON object|array / string. */
 function parseSeed(raw) {
     const s = raw.trim();
@@ -138,6 +139,12 @@ export function FlowSimulatorPanel({ nodes, edges, variables, onRunStateChange }
         // pressing Run again always reflects the new values.
         let sim = simRef.current;
         if (sim && sim.state.status === 'paused') {
+            // An approval pause needs an explicit decision (use the branch buttons);
+            // blind-resuming would fan out to every branch — so leave it for the user.
+            if (sim.state.pausedReason === 'approval') {
+                sync();
+                return;
+            }
             sim.resume();
         }
         else {
@@ -152,9 +159,11 @@ export function FlowSimulatorPanel({ nodes, edges, variables, onRunStateChange }
         sim.step();
         sync();
     };
-    const onResume = () => {
+    const onResume = () => onDecision();
+    /** Continue a paused run; `decision` routes an approval down one out-edge. */
+    const onDecision = (decision) => {
         const sim = ensure();
-        sim.resume();
+        sim.resume(decision ? { decision } : {});
         sim.runToEnd();
         sync();
     };
@@ -166,5 +175,30 @@ export function FlowSimulatorPanel({ nodes, edges, variables, onRunStateChange }
     };
     const status = snapshot?.status ?? 'idle';
     const blocked = (validation?.errors.length ?? 0) > 0;
-    return (_jsxs("div", { className: "flex h-full flex-col text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b bg-muted/30 px-3 py-2", children: [_jsxs(Button, { size: "sm", className: "h-7 gap-1 px-2", onClick: onRun, disabled: blocked, children: [_jsx(Play, { className: "h-3.5 w-3.5" }), " Run"] }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: onStep, disabled: blocked || status === 'done' || status === 'error', children: [_jsx(StepForward, { className: "h-3.5 w-3.5" }), " Step"] }), status === 'paused' && (_jsxs(Button, { size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: onResume, children: [_jsx(ChevronRight, { className: "h-3.5 w-3.5" }), " Continue"] })), _jsxs(Button, { size: "sm", variant: "ghost", className: "h-7 gap-1 px-2 text-muted-foreground", onClick: onReset, children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), " Reset"] }), _jsx("span", { className: cn('ml-auto rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase', STATUS_TONE[status === 'idle' || status === 'running' ? 'ok' : status] ?? 'bg-muted'), children: status })] }), _jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-auto p-3", children: [validation && (validation.errors.length > 0 || validation.warnings.length > 0) && (_jsxs("div", { className: "space-y-1", children: [validation.errors.map((d, i) => (_jsxs("div", { className: "flex items-start gap-1.5 rounded border border-rose-200 bg-rose-50 px-2 py-1 text-rose-700", children: [_jsx(CircleAlert, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsx("span", { children: d.message })] }, `e${i}`))), validation.warnings.map((d, i) => (_jsxs("div", { className: "flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 px-2 py-1 text-amber-700", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsx("span", { children: d.message })] }, `w${i}`)))] })), inputs.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Inputs" }), inputs.map((v) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "w-24 shrink-0 truncate font-mono text-[11px]", title: v.name, children: v.name }), _jsx(Input, { value: seed[v.name] ?? (v.defaultValue != null ? String(v.defaultValue) : ''), onChange: (e) => setSeed((p) => ({ ...p, [v.name]: e.target.value })), placeholder: v.type ?? 'value', className: "h-7 flex-1 text-xs" })] }, v.name)))] })), _jsxs("section", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-muted-foreground", children: [_jsx("span", { children: "Set variables" }), _jsxs("button", { type: "button", className: "ml-auto inline-flex items-center gap-0.5 rounded border px-1.5 py-0.5 text-[10px] hover:bg-muted/50", onClick: () => setScratch((p) => [...p, { k: '', v: '' }]), children: [_jsx(Plus, { className: "h-3 w-3" }), " Add"] })] }), scratch.length === 0 ? (_jsx("div", { className: "italic text-muted-foreground", children: "Override or inject any variable (wins over inputs and mocks at start)." })) : (scratch.map((row, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: row.k, onChange: (e) => setScratch((p) => p.map((r, j) => (j === i ? { ...r, k: e.target.value } : r))), placeholder: "name", className: "h-7 w-24 shrink-0 font-mono text-[11px]" }), _jsx("span", { className: "text-muted-foreground", children: "=" }), _jsx(Input, { value: row.v, onChange: (e) => setScratch((p) => p.map((r, j) => (j === i ? { ...r, v: e.target.value } : r))), placeholder: "value", className: "h-7 flex-1 text-xs" }), _jsx("button", { type: "button", className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-muted/50 hover:text-rose-600", onClick: () => setScratch((p) => p.filter((_, j) => j !== i)), "aria-label": "Remove variable", children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, i))))] }), mockNodes.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Mock outputs" }), mockNodes.map((m) => (_jsxs("div", { className: "space-y-0.5", children: [_jsxs(Label, { className: "flex items-baseline gap-1.5 text-[11px]", title: m.id, children: [_jsx("span", { className: "truncate font-medium", children: m.label }), _jsx("span", { className: "text-[9px] uppercase text-muted-foreground", children: m.type.replace(/_/g, ' ') }), m.outputs.length > 0 && (_jsxs("span", { className: "truncate font-mono text-[10px] text-violet-600", children: ["\u2192 ", m.outputs.join(', ')] }))] }), _jsx(Input, { value: mocks[m.id] ?? '', onChange: (e) => setMocks((p) => ({ ...p, [m.id]: e.target.value })), placeholder: m.type === 'script' && m.outputs.length ? `{ "${m.outputs[0]}": … }` : 'mocked result (JSON)', className: "h-7 w-full font-mono text-[11px]" })] }, m.id)))] })), snapshot && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Variables" }), Object.keys(snapshot.variables).length === 0 ? (_jsx("div", { className: "italic text-muted-foreground", children: "No variables set." })) : (_jsx("ul", { className: "space-y-1", children: Object.entries(snapshot.variables).map(([k, val]) => (_jsxs("li", { className: "flex items-baseline gap-1.5 rounded border bg-background px-1.5 py-1", children: [_jsx("span", { className: "font-mono text-[11px]", children: k }), _jsxs("span", { className: "truncate font-mono text-[10px] text-muted-foreground", children: ["= ", typeof val === 'object' ? JSON.stringify(val) : String(val)] })] }, k))) }))] })), snapshot && snapshot.steps.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Timeline" }), _jsx("ol", { className: "space-y-1", children: snapshot.steps.map((s) => (_jsxs("li", { className: "rounded border bg-background p-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: s.seq + 1 }), _jsx("span", { className: "truncate font-medium", children: s.label }), _jsx("span", { className: "text-[10px] uppercase text-muted-foreground", children: s.type }), _jsx("span", { className: cn('ml-auto rounded px-1 py-0.5 text-[9px] font-semibold uppercase', STATUS_TONE[s.status]), children: s.status })] }), s.note && _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground", children: s.note }), s.error && _jsx("div", { className: "mt-0.5 text-[10px] text-rose-600", children: s.error }), s.wrote && (_jsxs("div", { className: "mt-0.5 truncate font-mono text-[10px] text-violet-600", children: ["\u2192 ", Object.keys(s.wrote).join(', ')] })), s.edges && s.edges.length > 0 && (_jsx("ul", { className: "mt-0.5 space-y-0.5", children: s.edges.map((ed) => (_jsxs("li", { className: "space-y-0.5", children: [_jsxs("div", { className: cn('flex items-center gap-1 font-mono text-[10px]', ed.selected ? 'text-sky-700' : 'text-muted-foreground'), children: [_jsx("span", { children: ed.selected ? '▶' : '·' }), _jsx("span", { className: "truncate", children: ed.isDefault ? 'else' : ed.condition }), _jsx("span", { className: cn('ml-auto', ed.error && 'text-rose-600'), children: ed.error ? 'error' : ed.result ? 'true' : 'false' })] }), ed.error && _jsx("div", { className: "pl-3 text-[10px] text-rose-600", children: ed.error })] }, ed.edgeId))) }))] }, s.seq))) })] })), !snapshot && !blocked && (_jsx("p", { className: "italic text-muted-foreground", children: "Press Run to simulate, or Step to walk node by node. Side effects are mocked \u2014 no backend is called." }))] })] }));
+    // When the run pauses at a `screen` node, preview the form the end user would
+    // see (the shared runtime renderer) instead of just showing "paused".
+    const screenPause = React.useMemo(() => {
+        if (snapshot?.status !== 'paused' || snapshot.pausedReason !== 'screen' || !snapshot.activeNodeId)
+            return null;
+        const node = nodes.find((n) => n.id === snapshot.activeNodeId);
+        return node ? { node, variables: snapshot.variables } : null;
+    }, [snapshot, nodes]);
+    // When paused at an approval node, offer its out-edge labels (approve /
+    // reject / revise) as decision buttons so the run resumes down ONE branch —
+    // letting an author walk a revise loop instead of fanning out to every edge.
+    const approvalPause = React.useMemo(() => {
+        if (snapshot?.status !== 'paused' || snapshot.pausedReason !== 'approval' || !snapshot.activeNodeId)
+            return null;
+        const node = nodes.find((n) => n.id === snapshot.activeNodeId);
+        if (!node)
+            return null;
+        const decisions = [
+            ...new Set(edges
+                .filter((e) => e.source === node.id && typeof e.label === 'string' && e.label.trim())
+                .map((e) => e.label.trim())),
+        ];
+        return { node, decisions };
+    }, [snapshot, nodes, edges]);
+    return (_jsxs("div", { className: "flex h-full flex-col text-xs", children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b bg-muted/30 px-3 py-2", children: [_jsxs(Button, { size: "sm", className: "h-7 gap-1 px-2", onClick: onRun, disabled: blocked, children: [_jsx(Play, { className: "h-3.5 w-3.5" }), " Run"] }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: onStep, disabled: blocked || status === 'done' || status === 'error', children: [_jsx(StepForward, { className: "h-3.5 w-3.5" }), " Step"] }), status === 'paused' &&
+                        (approvalPause && approvalPause.decisions.length > 0 ? (_jsx("div", { className: "flex items-center gap-1", children: approvalPause.decisions.map((d) => (_jsxs(Button, { size: "sm", variant: "outline", className: "h-7 gap-1 px-2 capitalize", onClick: () => onDecision(d), title: `Resume down the "${d}" branch`, children: [_jsx(ChevronRight, { className: "h-3.5 w-3.5" }), " ", d] }, d))) })) : (_jsxs(Button, { size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: onResume, children: [_jsx(ChevronRight, { className: "h-3.5 w-3.5" }), " Continue"] }))), _jsxs(Button, { size: "sm", variant: "ghost", className: "h-7 gap-1 px-2 text-muted-foreground", onClick: onReset, children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), " Reset"] }), _jsx("span", { className: cn('ml-auto rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase', STATUS_TONE[status === 'idle' || status === 'running' ? 'ok' : status] ?? 'bg-muted'), children: status })] }), _jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-auto p-3", children: [validation && (validation.errors.length > 0 || validation.warnings.length > 0) && (_jsxs("div", { className: "space-y-1", children: [validation.errors.map((d, i) => (_jsxs("div", { className: "flex items-start gap-1.5 rounded border border-rose-200 bg-rose-50 px-2 py-1 text-rose-700", children: [_jsx(CircleAlert, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsx("span", { children: d.message })] }, `e${i}`))), validation.warnings.map((d, i) => (_jsxs("div", { className: "flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 px-2 py-1 text-amber-700", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsx("span", { children: d.message })] }, `w${i}`)))] })), screenPause && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Screen" }), _jsx(ScreenPreview, { node: screenPause.node, variables: screenPause.variables })] })), inputs.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Inputs" }), inputs.map((v) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "w-24 shrink-0 truncate font-mono text-[11px]", title: v.name, children: v.name }), _jsx(Input, { value: seed[v.name] ?? (v.defaultValue != null ? String(v.defaultValue) : ''), onChange: (e) => setSeed((p) => ({ ...p, [v.name]: e.target.value })), placeholder: v.type ?? 'value', className: "h-7 flex-1 text-xs" })] }, v.name)))] })), _jsxs("section", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-muted-foreground", children: [_jsx("span", { children: "Set variables" }), _jsxs("button", { type: "button", className: "ml-auto inline-flex items-center gap-0.5 rounded border px-1.5 py-0.5 text-[10px] hover:bg-muted/50", onClick: () => setScratch((p) => [...p, { k: '', v: '' }]), children: [_jsx(Plus, { className: "h-3 w-3" }), " Add"] })] }), scratch.length === 0 ? (_jsx("div", { className: "italic text-muted-foreground", children: "Override or inject any variable (wins over inputs and mocks at start)." })) : (scratch.map((row, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: row.k, onChange: (e) => setScratch((p) => p.map((r, j) => (j === i ? { ...r, k: e.target.value } : r))), placeholder: "name", className: "h-7 w-24 shrink-0 font-mono text-[11px]" }), _jsx("span", { className: "text-muted-foreground", children: "=" }), _jsx(Input, { value: row.v, onChange: (e) => setScratch((p) => p.map((r, j) => (j === i ? { ...r, v: e.target.value } : r))), placeholder: "value", className: "h-7 flex-1 text-xs" }), _jsx("button", { type: "button", className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-muted/50 hover:text-rose-600", onClick: () => setScratch((p) => p.filter((_, j) => j !== i)), "aria-label": "Remove variable", children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, i))))] }), mockNodes.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Mock outputs" }), mockNodes.map((m) => (_jsxs("div", { className: "space-y-0.5", children: [_jsxs(Label, { className: "flex items-baseline gap-1.5 text-[11px]", title: m.id, children: [_jsx("span", { className: "truncate font-medium", children: m.label }), _jsx("span", { className: "text-[9px] uppercase text-muted-foreground", children: m.type.replace(/_/g, ' ') }), m.outputs.length > 0 && (_jsxs("span", { className: "truncate font-mono text-[10px] text-violet-600", children: ["\u2192 ", m.outputs.join(', ')] }))] }), _jsx(Input, { value: mocks[m.id] ?? '', onChange: (e) => setMocks((p) => ({ ...p, [m.id]: e.target.value })), placeholder: m.type === 'script' && m.outputs.length ? `{ "${m.outputs[0]}": … }` : 'mocked result (JSON)', className: "h-7 w-full font-mono text-[11px]" })] }, m.id)))] })), snapshot && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Variables" }), Object.keys(snapshot.variables).length === 0 ? (_jsx("div", { className: "italic text-muted-foreground", children: "No variables set." })) : (_jsx("ul", { className: "space-y-1", children: Object.entries(snapshot.variables).map(([k, val]) => (_jsxs("li", { className: "flex items-baseline gap-1.5 rounded border bg-background px-1.5 py-1", children: [_jsx("span", { className: "font-mono text-[11px]", children: k }), _jsxs("span", { className: "truncate font-mono text-[10px] text-muted-foreground", children: ["= ", typeof val === 'object' ? JSON.stringify(val) : String(val)] })] }, k))) }))] })), snapshot && snapshot.steps.length > 0 && (_jsxs("section", { className: "space-y-1.5", children: [_jsx("div", { className: "font-medium text-muted-foreground", children: "Timeline" }), _jsx("ol", { className: "space-y-1", children: snapshot.steps.map((s) => (_jsxs("li", { className: "rounded border bg-background p-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: s.seq + 1 }), _jsx("span", { className: "truncate font-medium", children: s.label }), _jsx("span", { className: "text-[10px] uppercase text-muted-foreground", children: s.type }), _jsx("span", { className: cn('ml-auto rounded px-1 py-0.5 text-[9px] font-semibold uppercase', STATUS_TONE[s.status]), children: s.status })] }), s.note && _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground", children: s.note }), s.error && _jsx("div", { className: "mt-0.5 text-[10px] text-rose-600", children: s.error }), s.wrote && (_jsxs("div", { className: "mt-0.5 truncate font-mono text-[10px] text-violet-600", children: ["\u2192 ", Object.keys(s.wrote).join(', ')] })), s.edges && s.edges.length > 0 && (_jsx("ul", { className: "mt-0.5 space-y-0.5", children: s.edges.map((ed) => (_jsxs("li", { className: "space-y-0.5", children: [_jsxs("div", { className: cn('flex items-center gap-1 font-mono text-[10px]', ed.selected ? 'text-sky-700' : 'text-muted-foreground'), children: [_jsx("span", { children: ed.selected ? '▶' : '·' }), _jsx("span", { className: "truncate", children: ed.isDefault ? 'else' : ed.condition }), _jsx("span", { className: cn('ml-auto', ed.error && 'text-rose-600'), children: ed.error ? 'error' : ed.result ? 'true' : 'false' })] }), ed.error && _jsx("div", { className: "pl-3 text-[10px] text-rose-600", children: ed.error })] }, ed.edgeId))) }))] }, s.seq))) })] })), !snapshot && !blocked && (_jsx("p", { className: "italic text-muted-foreground", children: "Press Run to simulate, or Step to walk node by node. Side effects are mocked \u2014 no backend is called." }))] })] }));
 }

package/dist/views/metadata-admin/previews/PagePreview.js

@@ -9,7 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * threaded in: previews run in a sandbox with no params context.
  */
 import * as React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, RecordContextProvider } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
+import { buildDefaultPageSchema } from '@object-ui/plugin-detail';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
 import { OutlineStrip } from './OutlineStrip';
 import { PageBlockCanvas } from './PageBlockCanvas';
@@ -88,6 +90,113 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
         onPatch({ children: next });
         onSelectionChange?.({ kind: 'block', id: `children[${next.length - 1}]`, label: newBlock.type });
     }, [canEdit, draft, onPatch, onSelectionChange, shape]);
+    // ── Record binding ──────────────────────────────────────────────────────
+    // A `type: 'record'` page's `record:*` blocks (details / highlights / path /
+    // alert) read their data from <RecordContextProvider>. The metadata editor
+    // has no record route, so without binding a sample they render the
+    // "bind a record to preview" placeholder — i.e. the author designs blind.
+    // Fetch a handful of real records of the bound object + its schema and let
+    // the author pick which one to preview against (mirrors the runtime
+    // RecordDetailView's RecordContextProvider).
+    // Match the runtime resolver (usePageAssignment): a record page is keyed by
+    // either bare `type: 'record'` (editor draft shape) or `pageType: 'record'`
+    // (persisted envelope shape). Both must bind a sample record so record:*
+    // blocks render real data.
+    const isRecordPage = draft?.type === 'record'
+        || draft?.pageType === 'record';
+    const recordObject = isRecordPage ? draft?.object : undefined;
+    const [recordSamples, setRecordSamples] = React.useState([]);
+    const [recordSchema, setRecordSchema] = React.useState(null);
+    const [selectedRecordId, setSelectedRecordId] = React.useState(null);
+    React.useEffect(() => {
+        if (!recordObject) {
+            setRecordSamples([]);
+            setRecordSchema(null);
+            setSelectedRecordId(null);
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            try {
+                const opts = { headers: { accept: 'application/json' }, credentials: 'include' };
+                // Schema first: it tells us which fields are lookup/master_detail so we
+                // can `$expand` them. Without expansion record:details/highlights would
+                // show raw foreign-key IDs (e.g. "O4VKrNesnsj2JYMa") instead of display
+                // names — the runtime RecordDetailView $expands for exactly this reason.
+                const schemaRes = await fetch(`/api/v1/meta/object/${encodeURIComponent(recordObject)}`, opts);
+                const schemaJson = await schemaRes.json().catch(() => null);
+                const schema = schemaJson?.item ?? schemaJson?.data ?? schemaJson;
+                const expand = buildExpandFields(schema?.fields);
+                const query = expand.length > 0
+                    ? `?$top=50&$expand=${encodeURIComponent(expand.join(','))}`
+                    : `?$top=50`;
+                const recsRes = await fetch(`/api/v1/data/${encodeURIComponent(recordObject)}${query}`, opts);
+                const recsJson = await recsRes.json().catch(() => null);
+                // The REST data endpoint returns `{ object, records, total, hasMore }`;
+                // tolerate the other common envelopes too.
+                const recs = Array.isArray(recsJson?.records) ? recsJson.records
+                    : Array.isArray(recsJson?.items) ? recsJson.items
+                        : Array.isArray(recsJson?.data) ? recsJson.data
+                            : Array.isArray(recsJson) ? recsJson : [];
+                if (cancelled)
+                    return;
+                setRecordSamples(recs);
+                setRecordSchema(schema);
+                // Same id-resolution order as recordIdOf so the initial selection's
+                // value matches an <option> even for objects keyed only by `name`.
+                setSelectedRecordId((prev) => prev ?? (recs[0]?.id ?? recs[0]?._id ?? recs[0]?.name ?? null));
+            }
+            catch {
+                if (!cancelled) {
+                    setRecordSamples([]);
+                    setRecordSchema(null);
+                }
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [recordObject]);
+    const recordIdOf = (r) => r?.id ?? r?._id ?? r?.name;
+    const recordLabelOf = (r) => String(r?.name ?? r?.title ?? r?.label ?? r?.subject ?? recordIdOf(r) ?? '(record)');
+    const selectedRecord = React.useMemo(() => {
+        if (!recordSamples.length)
+            return null;
+        return recordSamples.find((r) => String(recordIdOf(r)) === String(selectedRecordId)) ?? recordSamples[0];
+    }, [recordSamples, selectedRecordId]);
+    // ── Slotted record page synthesis ────────────────────────────────────────
+    // A `kind: 'slotted'` page carries an empty `regions: []` plus a `slots` map
+    // of overrides, so the raw draft renders blank through SchemaRenderer (there
+    // are no regions to walk). Mirror the runtime RecordDetailView: synthesize the
+    // canonical default page from the bound object's schema and apply the slot
+    // overrides via the SAME `buildDefaultPageSchema(objectDef, { slots })` path,
+    // so omitted slots fall through to the synthesized header/details/discussion
+    // while authored slots (highlights/tabs/…) override in place. Non-slotted
+    // pages render their authored schema unchanged.
+    const isSlotted = draft?.kind === 'slotted';
+    const renderSchema = React.useMemo(() => {
+        if (!isSlotted)
+            return schema;
+        try {
+            const slots = draft?.slots ?? {};
+            // `recordSchema` arrives async; until then synthesize with no objectDef
+            // (structure renders immediately, field-level detail fills in on load).
+            return buildDefaultPageSchema(recordSchema ?? undefined, { slots });
+        }
+        catch {
+            return schema;
+        }
+    }, [isSlotted, schema, draft, recordSchema]);
+    // Wrap record-page content in the record context (+ a sample-record picker)
+    // so detail/highlights/path/alert blocks render real data. No-op for
+    // non-record pages and for record pages with no rows yet (renders the node
+    // unchanged so the existing placeholder still shows).
+    const withRecordBinding = (node) => {
+        if (!recordObject || !selectedRecord)
+            return node;
+        return (_jsxs(RecordContextProvider, { objectName: recordObject, recordId: recordIdOf(selectedRecord), data: selectedRecord, objectSchema: recordSchema ?? undefined, embedded: true, children: [recordSamples.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b bg-muted/30 text-xs", children: [_jsx("span", { className: "text-muted-foreground shrink-0", children: "Preview record" }), _jsx("select", { className: "h-7 rounded-md border bg-background px-2 text-xs max-w-[260px]", value: String(selectedRecordId ?? ''), onChange: (e) => setSelectedRecordId(e.target.value), children: recordSamples.map((r) => {
+                                const id = recordIdOf(r);
+                                return _jsx("option", { value: String(id), children: recordLabelOf(r) }, String(id));
+                            }) }), _jsxs("span", { className: "text-muted-foreground/70 shrink-0", children: [recordSamples.length, " sample", recordSamples.length === 1 ? '' : 's'] })] })), node] }));
+    };
     // Interface page → always mirror the runtime (InterfaceListPage), in BOTH
     // design and preview modes. These pages are config-driven, not region-
     // composed, so there is nothing to drag on a canvas: the author edits the
@@ -106,7 +215,7 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
     // rename, and add blocks inline. The outline strip becomes
     // redundant in this view.
     if (designMode && shape === 'regions') {
-        return (_jsx(PreviewShell, { hint: `page · design`, children: _jsx(PageBlockCanvas, { draft: draft, onPatch: canEdit ? onPatch : undefined, selection: selection ?? null, onSelectionChange: onSelectionChange }) }));
+        return (_jsx(PreviewShell, { hint: `page · design`, children: withRecordBinding(_jsx(PageBlockCanvas, { draft: draft, onPatch: canEdit ? onPatch : undefined, selection: selection ?? null, onSelectionChange: onSelectionChange })) }));
     }
-    return (_jsx(PreviewShell, { hint: `page${designMode ? ' · design' : ''}`, children: _jsxs(PreviewErrorBoundary, { fallbackHint: "The Page schema is incomplete or references a component that hasn't been registered yet.", children: [designMode && (_jsx(OutlineStrip, { title: tr('engine.inspector.pageBlock.outlineLabel', locale), entries: blockEntries, selectedId: selectedId, onSelect: (e) => onSelectionChange?.({ kind: 'block', id: e.id, label: e.label }), onAdd: canEdit ? handleAddBlock : undefined, addLabel: tr('engine.inspector.add.block', locale) })), _jsx("div", { className: "min-h-[200px] max-h-[70vh] overflow-auto p-4", children: _jsx(SchemaRenderer, { schema: schema }) })] }) }));
+    return (_jsx(PreviewShell, { hint: `page${designMode ? ' · design' : ''}`, children: _jsxs(PreviewErrorBoundary, { fallbackHint: "The Page schema is incomplete or references a component that hasn't been registered yet.", children: [designMode && (_jsx(OutlineStrip, { title: tr('engine.inspector.pageBlock.outlineLabel', locale), entries: blockEntries, selectedId: selectedId, onSelect: (e) => onSelectionChange?.({ kind: 'block', id: e.id, label: e.label }), onAdd: canEdit ? handleAddBlock : undefined, addLabel: tr('engine.inspector.add.block', locale) })), withRecordBinding(_jsx("div", { className: "min-h-[200px] max-h-[70vh] overflow-auto p-4", children: _jsx(SchemaRenderer, { schema: renderSchema }) }))] }) }));
 }

package/dist/views/metadata-admin/previews/ScreenPreview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ScreenPreview — live design-time preview of a flow `screen` node, rendered
+ * exactly as the end user will see it at runtime.
+ *
+ * It builds a runtime `ScreenSpec` from the node's authored `config` and hands
+ * it to the shared {@link ScreenView} — the SAME renderer the runtime
+ * FlowRunner uses — so the preview can never drift from runtime (the
+ * design↔runtime divergence #1927 set out to kill). `{var}` references in the
+ * title/description are interpolated, and `fields` are gated by their
+ * `visibleWhen`, against the supplied `variables` (the flow's declared defaults
+ * in the inspector, or the live simulated values when paused in the Debug
+ * simulator).
+ *
+ * Object-form mode is fed the SAME enriched object list the runtime uses
+ * (`useMetadata().objects`, which derives inline master-detail `subforms` from
+ * `inlineEdit` relationships) so the preview renders those child grids too.
+ *
+ * Homes: the flow node inspector (live-updates as the config is edited) and the
+ * Debug simulator's paused-at-screen state.
+ */
+import * as React from 'react';
+import { type ScreenPreviewNode } from './screen-spec';
+export type { ScreenPreviewNode } from './screen-spec';
+export interface ScreenPreviewProps {
+    /** The screen node to preview. */
+    node: ScreenPreviewNode;
+    /**
+     * Variable values for `{var}` interpolation in the title/description AND for
+     * evaluating each field's `visibleWhen`. The inspector passes the flow's
+     * declared defaults; the simulator passes the live run state at the pause
+     * point. Unknown `{var}` refs stay literal, and fields whose `visibleWhen`
+     * can't be decided stay visible — the design preview never hides on missing
+     * data.
+     */
+    variables?: Record<string, unknown>;
+    className?: string;
+}
+export declare function ScreenPreview({ node, variables, className }: ScreenPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/ScreenPreview.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ScreenPreview — live design-time preview of a flow `screen` node, rendered
+ * exactly as the end user will see it at runtime.
+ *
+ * It builds a runtime `ScreenSpec` from the node's authored `config` and hands
+ * it to the shared {@link ScreenView} — the SAME renderer the runtime
+ * FlowRunner uses — so the preview can never drift from runtime (the
+ * design↔runtime divergence #1927 set out to kill). `{var}` references in the
+ * title/description are interpolated, and `fields` are gated by their
+ * `visibleWhen`, against the supplied `variables` (the flow's declared defaults
+ * in the inspector, or the live simulated values when paused in the Debug
+ * simulator).
+ *
+ * Object-form mode is fed the SAME enriched object list the runtime uses
+ * (`useMetadata().objects`, which derives inline master-detail `subforms` from
+ * `inlineEdit` relationships) so the preview renders those child grids too.
+ *
+ * Homes: the flow node inspector (live-updates as the config is edited) and the
+ * Debug simulator's paused-at-screen state.
+ */
+import * as React from 'react';
+import { Button, cn } from '@object-ui/components';
+import { useAdapter } from '../../../providers/AdapterProvider';
+import { useMetadata } from '../../../providers/MetadataProvider';
+import { ScreenView, isObjectFormScreen, initialScreenValues } from '../../ScreenView';
+import { buildScreenSpec, interpolate, hiddenFieldCount } from './screen-spec';
+export function ScreenPreview({ node, variables, className }) {
+    const adapter = useAdapter();
+    const meta = useMetadata();
+    const spec = React.useMemo(() => buildScreenSpec(node, variables), [node, variables]);
+    const isObjectForm = isObjectFormScreen(spec);
+    // Enriched object defs (incl. derived master-detail `subforms`) — the exact
+    // list the runtime FlowRunner gets. Only read in object-form mode so a plain
+    // field screen never triggers the all-objects fetch.
+    const objects = isObjectForm ? meta.objects : undefined;
+    const title = interpolate(spec.title, variables);
+    const description = interpolate(spec.description, variables);
+    const hidden = isObjectForm ? 0 : hiddenFieldCount(node, variables);
+    // Reset transient input state when the screen's STRUCTURE changes (fields
+    // added/removed/retyped/gated, or object-form target/mode); typing survives a
+    // label/title-only edit.
+    const structKey = isObjectForm
+        ? `obj:${spec.objectName}:${spec.mode ?? 'create'}`
+        : 'fields:' + spec.fields.map((f) => `${f.name}:${f.type ?? ''}:${f.required ? 1 : 0}`).join('|');
+    const empty = !title && !description && !isObjectForm && spec.fields.length === 0 && hidden === 0;
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-md border bg-background', className), children: [_jsx("div", { className: "flex items-center gap-1.5 border-b bg-muted/30 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Preview" }), _jsx("div", { className: "max-h-[60vh] overflow-auto p-4", children: empty ? (_jsx("p", { className: "text-sm italic text-muted-foreground", children: "Add a title, description, fields, or an object form to preview this screen." })) : (_jsxs(_Fragment, { children: [title && _jsx("h3", { className: "text-base font-semibold leading-tight", children: title }), description && (_jsx("p", { className: cn('whitespace-pre-line text-sm text-muted-foreground', title && 'mt-1'), children: description })), _jsx(ScreenFormPreview, { spec: spec, adapter: adapter, objects: objects }, structKey), !isObjectForm && hidden > 0 && (_jsxs("p", { className: "mt-3 text-[11px] italic text-muted-foreground", children: [hidden, " field", hidden === 1 ? '' : 's', " hidden by ", hidden === 1 ? 'its' : 'their', " \u201Cvisible when\u201D", ' ', "condition", hidden === 1 ? '' : 's', "."] })), !isObjectForm && spec.fields.length > 0 && (_jsx("div", { className: "mt-4 flex justify-end", children: _jsx(Button, { size: "sm", disabled: true, children: "Submit" }) }))] })) })] }));
+}
+/**
+ * Holds the transient field values so the preview is interactive (the author
+ * can type into it) while never persisting anything.
+ */
+function ScreenFormPreview({ spec, adapter, objects }) {
+    const [values, setValues] = React.useState(() => initialScreenValues(spec));
+    return (_jsx(ScreenView, { screen: spec, values: values, onValueChange: (name, v) => setValues((p) => ({ ...p, [name]: v })), dataSource: adapter ?? undefined, objects: objects, objectForm: {
+            showSubmit: false,
+            showCancel: false,
+            noDataSourceMessage: 'Connect to a backend to preview this object form.',
+        } }));
+}

package/dist/views/metadata-admin/previews/flow-canvas-layout.d.ts

@@ -75,6 +75,20 @@ export declare function topAnchor(p: Point): Point;
 export declare function edgePath(from: Point, to: Point): string;
 /** Midpoint of an edge — anchor for the condition label + insert affordance. */
 export declare function edgeMidpoint(from: Point, to: Point): Point;
+/** True for an ADR-0044 declared back-edge (a revise/rework loop's return). */
+export declare function isBackEdge(edge: Pick<FlowEdge, 'type'>): boolean;
+/** Right-center anchor of a node — where a back-edge's return arc attaches. */
+export declare function rightAnchor(p: Point): Point;
+/**
+ * Curved return path for a declared back-edge (ADR-0044 revise loop). Unlike a
+ * forward edge (top→bottom), a back-edge re-enters an earlier node, so we route
+ * it off the right side of both endpoints and bow it out to the right — a
+ * distinct return arc that reads as "loop back" rather than crossing the
+ * top-to-bottom forward edges.
+ */
+export declare function backEdgePath(from: Point, to: Point): string;
+/** Anchor for a back-edge's label pill — the apex of its return arc. */
+export declare function backEdgeLabelAnchor(from: Point, to: Point): Point;
 /**
  * Stable identity for an edge. Prefers an explicit `edge.id`; otherwise falls
  * back to a `source->target#index` composite so an unsaved edge still has a

package/dist/views/metadata-admin/previews/flow-canvas-layout.js

@@ -40,6 +40,12 @@ export function computeLayout(nodes, edges) {
     for (const e of edges) {
         if (!byId.has(e.source) || !byId.has(e.target) || e.source === e.target)
             continue;
+        // ADR-0044: a declared back-edge (`type: 'back'`) re-enters an earlier node
+        // to close a revise loop. Exclude it from layering — exactly as the engine
+        // excludes it from DAG validation — so the loop doesn't drag its target
+        // node below the wait point. The edge is still drawn (as a return arc).
+        if (isBackEdge(e))
+            continue;
         if (!outAdj.has(e.source))
             outAdj.set(e.source, []);
         outAdj.get(e.source).push(e.target);
@@ -167,6 +173,37 @@ export function edgePath(from, to) {
 export function edgeMidpoint(from, to) {
     return { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
 }
+/** True for an ADR-0044 declared back-edge (a revise/rework loop's return). */
+export function isBackEdge(edge) {
+    return edge.type === 'back';
+}
+/** Right-center anchor of a node — where a back-edge's return arc attaches. */
+export function rightAnchor(p) {
+    return { x: p.x + NODE_W, y: p.y + NODE_H / 2 };
+}
+/** Horizontal bow of a back-edge's return arc, scaled to the vertical span. */
+function backEdgeBow(from, to) {
+    return Math.max(64, Math.abs(to.y - from.y) * 0.35);
+}
+/**
+ * Curved return path for a declared back-edge (ADR-0044 revise loop). Unlike a
+ * forward edge (top→bottom), a back-edge re-enters an earlier node, so we route
+ * it off the right side of both endpoints and bow it out to the right — a
+ * distinct return arc that reads as "loop back" rather than crossing the
+ * top-to-bottom forward edges.
+ */
+export function backEdgePath(from, to) {
+    const bow = backEdgeBow(from, to);
+    const c1 = { x: from.x + bow, y: from.y };
+    const c2 = { x: to.x + bow, y: to.y };
+    return `M ${from.x},${from.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${to.x},${to.y}`;
+}
+/** Anchor for a back-edge's label pill — the apex of its return arc. */
+export function backEdgeLabelAnchor(from, to) {
+    // The cubic's t=0.5 point sits ~0.75·bow right of the (shared) right edge.
+    const bow = backEdgeBow(from, to);
+    return { x: Math.max(from.x, to.x) + bow * 0.75, y: (from.y + to.y) / 2 };
+}
 /**
  * Stable identity for an edge. Prefers an explicit `edge.id`; otherwise falls
  * back to a `source->target#index` composite so an unsaved edge still has a

package/dist/views/metadata-admin/previews/flow-canvas-parts.d.ts

@@ -66,16 +66,24 @@ export interface NodeCardProps {
     runState?: 'active' | 'visited';
     /** Dim nodes not yet reached while a simulation is in progress. */
     dimmed?: boolean;
+    /** Structural-validation error highlight (e.g. part of an un-declared cycle). */
+    invalid?: boolean;
     onPointerDown?: (e: React.PointerEvent) => void;
     onSelect?: () => void;
     onAppend?: () => void;
+    /**
+     * ADR-0044: when set (approval nodes without an existing revise loop), render
+     * the one-click "add revision loop" affordance — drops a wait node + the
+     * `revise` and declared `back` edges in a single gesture.
+     */
+    onAddReviseLoop?: () => void;
 }
 /**
  * A single draggable flow node rendered at an absolute canvas coordinate.
  * The card body drives selection + reposition; a dedicated bottom "+" handle
  * (edit mode only) appends a connected child without ambiguity.
  */
-export declare function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, onPointerDown, onSelect, onAppend, }: NodeCardProps): React.JSX.Element;
+export declare function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, onPointerDown, onSelect, onAppend, onAddReviseLoop, }: NodeCardProps): React.JSX.Element;
 export interface NodePaletteProps {
     locale?: string;
     /** Node types to offer. Defaults to the hardcoded {@link NODE_PALETTE}. */

package/dist/views/metadata-admin/previews/flow-canvas-parts.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * palette popover. Kept dependency-free and Shadcn-native (Tailwind + lucide).
  */
 import * as React from 'react';
-import { Code, CircleDot, CircleStop, Diamond, FilePen, FilePlus, FileSearch, FileX, GitFork, Globe, ListChecks, MonitorSmartphone, Play, Plug, Plus, Repeat, ShieldAlert, TimerReset, UserCheck, Variable, Workflow, Zap, } from 'lucide-react';
+import { Code, CircleDot, CircleStop, Diamond, FilePen, FilePlus, FileSearch, FileX, GitFork, Globe, IterationCcw, ListChecks, MonitorSmartphone, Play, Plug, Plus, Repeat, ShieldAlert, TimerReset, UserCheck, Variable, Workflow, Zap, } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { NODE_W, NODE_H } from './flow-canvas-layout';
 export function nodeIcon(type) {
@@ -188,6 +188,7 @@ export function nodeTone(type) {
         case 'delete_record':
         case 'get_record':
             return TONES.record;
+        case 'http':
         case 'http_request':
         case 'connector_action':
         case 'script':
@@ -237,6 +238,7 @@ export function nodeCategory(type) {
         case 'screen':
         case 'user_task':
             return 'Human';
+        case 'http':
         case 'http_request':
         case 'connector_action':
         case 'script':
@@ -265,7 +267,7 @@ export const NODE_PALETTE = [
     { type: 'try_catch', label: 'Try / Catch', hint: 'Protect steps with error handling and retry', category: 'Logic' },
     { type: 'approval', label: 'Approval', hint: 'Pause for a human decision', category: 'Human' },
     { type: 'screen', label: 'Screen', hint: 'Collect input from a user', category: 'Human' },
-    { type: 'http_request', label: 'HTTP request', hint: 'Call an external API', category: 'Integration' },
+    { type: 'http', label: 'HTTP request', hint: 'Call an external API', category: 'Integration' },
     { type: 'connector_action', label: 'Connector', hint: 'Run an integration action', category: 'Integration' },
     { type: 'script', label: 'Script', hint: 'Run custom code', category: 'Integration' },
     { type: 'subflow', label: 'Subflow', hint: 'Invoke another flow', category: 'Flow' },
@@ -301,6 +303,7 @@ export function defaultNodeExtras(type) {
             // Seed a node-model approval: at least one approver + spec defaults. The
             // author wires the out-edges with labels `approve` / `reject`.
             return { config: { approvers: [{ type: 'manager' }], behavior: 'first_response', lockRecord: true } };
+        case 'http':
         case 'http_request':
             return { config: { method: 'GET' } };
         case 'script':
@@ -314,9 +317,13 @@ export function defaultNodeExtras(type) {
  * The card body drives selection + reposition; a dedicated bottom "+" handle
  * (edit mode only) appends a connected child without ambiguity.
  */
-export function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, onPointerDown, onSelect, onAppend, }) {
+export function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, onPointerDown, onSelect, onAppend, onAddReviseLoop, }) {
     const tone = nodeTone(type);
-    return (_jsxs("div", { className: "absolute transition-opacity duration-200", style: { left: position.x, top: position.y, width: NODE_W, height: NODE_H, opacity: dimmed ? 0.35 : 1 }, children: [_jsxs("div", { role: "button", tabIndex: 0, "aria-pressed": selected, onPointerDown: onPointerDown, onClick: (e) => {
+    return (_jsxs("div", { 
+        // `group` so the hover-revealed affordances (append "+", revise loop)
+        // appear when the pointer is anywhere over the card, not only over the
+        // tiny button itself.
+        className: "group absolute transition-opacity duration-200", "data-invalid": invalid || undefined, style: { left: position.x, top: position.y, width: NODE_W, height: NODE_H, opacity: dimmed ? 0.35 : 1 }, children: [_jsxs("div", { role: "button", tabIndex: 0, "aria-pressed": selected, onPointerDown: onPointerDown, onClick: (e) => {
                     e.stopPropagation();
                     onSelect?.();
                 }, onKeyDown: (e) => {
@@ -330,10 +337,18 @@ export function NodeCard({ type, label, summary, position, selected, editable, r
                         ? 'border-emerald-500/70 ring-1 ring-emerald-400/40'
                         : selected
                             ? 'border-primary shadow-md ring-2 ring-primary/30'
-                            : 'border-border/80'), children: [_jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform duration-150 group-hover:scale-105', tone.chip, runState === 'active' && 'animate-pulse'), children: _jsx(NodeTypeIcon, { type: type, className: cn('h-[18px] w-[18px]', tone.icon) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { title: label, className: "truncate text-[13px] font-semibold leading-tight text-foreground", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1.5 leading-tight", children: [_jsx("span", { className: cn('shrink-0 text-[10px] font-semibold uppercase tracking-[0.08em]', tone.label), children: type }), summary && (_jsx("span", { className: "min-w-0 truncate font-mono text-[10px] text-muted-foreground", title: summary, children: summary }))] })] })] }), editable && type !== 'end' && (_jsx("button", { type: "button", title: "Add connected node", "aria-label": "Add connected node", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                            : invalid
+                                ? 'border-destructive ring-2 ring-destructive/50'
+                                : 'border-border/80'), children: [_jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform duration-150 group-hover:scale-105', tone.chip, runState === 'active' && 'animate-pulse'), children: _jsx(NodeTypeIcon, { type: type, className: cn('h-[18px] w-[18px]', tone.icon) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { title: label, className: "truncate text-[13px] font-semibold leading-tight text-foreground", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1.5 leading-tight", children: [_jsx("span", { className: cn('shrink-0 text-[10px] font-semibold uppercase tracking-[0.08em]', tone.label), children: type }), summary && (_jsx("span", { className: "min-w-0 truncate font-mono text-[10px] text-muted-foreground", title: summary, children: summary }))] })] })] }), editable && type !== 'end' && (_jsx("button", { type: "button", title: "Add connected node", "aria-label": "Add connected node", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
                     e.stopPropagation();
                     onAppend?.();
-                }, className: cn('absolute left-1/2 -bottom-3 z-10 inline-flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-sm transition-colors', 'opacity-0 hover:border-primary hover:text-primary group-hover:opacity-100 focus-visible:opacity-100'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }))] }));
+                }, className: cn('absolute left-1/2 -bottom-3 z-10 inline-flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-sm transition-colors', 'opacity-0 hover:border-primary hover:text-primary group-hover:opacity-100 focus-visible:opacity-100'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })), onAddReviseLoop && (_jsx("button", { type: "button", title: "Add revision loop (send back for revision)", "aria-label": "Add revision loop", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                    e.stopPropagation();
+                    onAddReviseLoop();
+                }, 
+                // Anchored to the right edge — where the back-edge's return arc
+                // attaches — and tinted amber to match the rendered back-edge.
+                className: cn('absolute -right-3 top-1/2 z-10 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border bg-background text-amber-600 shadow-sm transition-colors dark:text-amber-400', 'opacity-0 hover:border-amber-500 hover:text-amber-600 group-hover:opacity-100 focus-visible:opacity-100 dark:hover:text-amber-400'), children: _jsx(IterationCcw, { className: "h-3.5 w-3.5" }) }))] }));
 }
 /** Compact popover listing the node types an author can add, grouped by category. */
 export function NodePalette({ items = NODE_PALETTE, onPick, onClose }) {

package/dist/views/metadata-admin/previews/object-fields-io.d.ts

@@ -35,6 +35,27 @@ export declare function newField(name: string, type: FieldTypeId, label?: string
 export declare function toLabel(name: string): string;
 /** Normalize an arbitrary string into a valid snake_case field name. */
 export declare function toFieldName(raw: string): string;
+/**
+ * Prefix-stable variant of {@link toFieldName} for *live keystroke* input.
+ *
+ * The strict `toFieldName` trims a trailing `_`, which makes it impossible
+ * to TYPE a multi-word identifier into a controlled input: the field's
+ * `onChange` re-normalizes on every keystroke, so the instant the user
+ * presses `_` the value is `"repair_"` -> trimmed to `"repair"` -> the
+ * underscore vanishes before the next letter arrives, yielding
+ * `"repairticket"` instead of `"repair_ticket"`. (Authors of non-Latin
+ * locales hit this hardest: their label cannot derive a Latin slug, so
+ * they MUST type the identifier by hand.)
+ *
+ * This variant keeps a single trailing `_` so typing can continue, and
+ * returns `''` (not the `'field'` placeholder) on empty input so clearing
+ * the box actually clears it. A trailing `_` is itself a valid identifier
+ * per the spec ("starts with a letter, may contain letters/digits/`_`"),
+ * so no separate commit-time trim is required for correctness; callers
+ * that need a canonical form for a *complete* string (label->name
+ * derivation, group keys) should keep using strict `toFieldName`.
+ */
+export declare function toFieldNameLoose(raw: string): string;
 /**
  * A declared field group (a.k.a. "section"). Lives at the object's
  * top level as `draft.fieldGroups`; individual fields opt into a group

package/dist/views/metadata-admin/previews/object-fields-io.js

@@ -38,9 +38,11 @@ export function indexOfField(view, name) {
 /** Build a fresh field definition for the given type. */
 export function newField(name, type, label) {
     const def = { type, label: label ?? toLabel(name) };
-    // Seed a single empty option so picklist editor renders a row to fill in.
+    // Picklist-style fields start with no options; the OptionsEditor shows a
+    // blank input row locally and only persists rows once they have a value, so
+    // an unfilled row never trips the spec's identifier validation.
     if (type === 'select' || type === 'multiselect' || type === 'radio' || type === 'checkboxes') {
-        def.options = [{ value: '', label: '' }];
+        def.options = [];
     }
     return { name, def };
 }
@@ -67,6 +69,39 @@ export function toFieldName(raw) {
         return `f_${sanitized}`;
     return sanitized;
 }
+/**
+ * Prefix-stable variant of {@link toFieldName} for *live keystroke* input.
+ *
+ * The strict `toFieldName` trims a trailing `_`, which makes it impossible
+ * to TYPE a multi-word identifier into a controlled input: the field's
+ * `onChange` re-normalizes on every keystroke, so the instant the user
+ * presses `_` the value is `"repair_"` -> trimmed to `"repair"` -> the
+ * underscore vanishes before the next letter arrives, yielding
+ * `"repairticket"` instead of `"repair_ticket"`. (Authors of non-Latin
+ * locales hit this hardest: their label cannot derive a Latin slug, so
+ * they MUST type the identifier by hand.)
+ *
+ * This variant keeps a single trailing `_` so typing can continue, and
+ * returns `''` (not the `'field'` placeholder) on empty input so clearing
+ * the box actually clears it. A trailing `_` is itself a valid identifier
+ * per the spec ("starts with a letter, may contain letters/digits/`_`"),
+ * so no separate commit-time trim is required for correctness; callers
+ * that need a canonical form for a *complete* string (label->name
+ * derivation, group keys) should keep using strict `toFieldName`.
+ */
+export function toFieldNameLoose(raw) {
+    const sanitized = raw
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+/g, '') // trim leading only -- a trailing `_` must survive
+        .replace(/_{2,}/g, '_');
+    if (!sanitized)
+        return '';
+    if (!/^[a-z_]/.test(sanitized))
+        return `f_${sanitized}`;
+    return sanitized;
+}
 /** Read `draft.fieldGroups` into a normalized, well-typed list. */
 export function readGroups(fieldGroupsInput) {
     if (!Array.isArray(fieldGroupsInput))