@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DatasetDefaultInspector — the curated designer for an analytics `dataset`
+ * (ADR-0021). Replaces the generic whole-draft JSON SchemaForm with structured,
+ * fool-proof editors for the dataset's parts:
+ *
+ *   - base `object`,
+ *   - `include` relationships (the join allowlist — D-C),
+ *   - `dimensions` (name + field/`relationship.field` + type + granularity), and
+ *   - `measures` (name + aggregate + field + format/currency/derived).
+ *
+ * The base object, the included relationships, and every `field` are picked
+ * from the live object graph (a searchable combo over {@link useDatasetFieldCatalog})
+ * — not recalled by hand — so authoring matches mainstream low-code dataset
+ * builders. The aggregate / type / granularity are closed dropdowns so an
+ * author can't type an unsupported value. Each combo still allows a custom
+ * value as an escape hatch (offline catalog, computed path). Edits flow through
+ * `onPatch`; the DatasetPreview on the canvas re-runs live as the draft changes.
+ */
+import * as React from 'react';
+import { AlertTriangle, ArrowRight, ChevronDown, Plus, Trash2, X } from 'lucide-react';
+import { Badge, Button, FilterBuilder, Label, Popover, PopoverContent, PopoverTrigger } from '@object-ui/components';
+import { InspectorShell, InspectorTextField, InspectorSelectField, InspectorCheckboxField, appendArray, spliceArray, } from './_shared';
+import { InspectorComboField } from './InspectorComboField';
+import { toFieldName } from '../previews/object-fields-io';
+import { formatMeasure } from '@object-ui/core';
+import { conditionToGroup, groupToCondition } from './datasetFilterCondition';
+import { useObjectOptions, useDatasetFieldCatalog, useDatasetUsage, fieldTypeToDimensionType, } from './useDatasetFields';
+// Closed to what the dataset compiler supports (no array_agg/string_agg in v1).
+const AGGREGATE_OPTIONS = [
+    { value: 'count', label: 'count' },
+    { value: 'sum', label: 'sum' },
+    { value: 'avg', label: 'avg' },
+    { value: 'min', label: 'min' },
+    { value: 'max', label: 'max' },
+    { value: 'count_distinct', label: 'count distinct' },
+];
+const DIMENSION_TYPE_OPTIONS = [
+    { value: 'string', label: 'string' },
+    { value: 'number', label: 'number' },
+    { value: 'date', label: 'date' },
+    { value: 'boolean', label: 'boolean' },
+    { value: 'lookup', label: 'lookup' },
+];
+const DATE_GRANULARITY_OPTIONS = [
+    { value: '', label: '— none —' },
+    { value: 'day', label: 'day' },
+    { value: 'week', label: 'week' },
+    { value: 'month', label: 'month' },
+    { value: 'quarter', label: 'quarter' },
+    { value: 'year', label: 'year' },
+];
+const DERIVED_OP_OPTIONS = [
+    { value: 'ratio', label: 'ratio (a ÷ b)' },
+    { value: 'sum', label: 'sum (a + b)' },
+    { value: 'difference', label: 'difference (a − b)' },
+    { value: 'product', label: 'product (a × b)' },
+];
+// Display-format picker options — a business user shouldn't have to know numeral
+// syntax (`$0,0.00`), so the inspector offers kind + decimals + currency and
+// generates the `format`/`currency` strings.
+const FORMAT_KIND_OPTIONS = [
+    { value: 'raw', label: 'Raw number' },
+    { value: 'number', label: 'Number — 1,234.5' },
+    { value: 'currency', label: 'Currency — $1,234.50' },
+    { value: 'percent', label: 'Percent — 12.3%' },
+];
+const DECIMALS_OPTIONS = [
+    { value: '0', label: '0' },
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+];
+const CURRENCY_OPTIONS = [
+    { value: 'USD', label: 'USD ($)' },
+    { value: 'EUR', label: 'EUR (€)' },
+    { value: 'GBP', label: 'GBP (£)' },
+    { value: 'CNY', label: 'CNY (¥)' },
+    { value: 'JPY', label: 'JPY (¥)' },
+    { value: 'INR', label: 'INR (₹)' },
+    { value: 'CAD', label: 'CAD ($)' },
+    { value: 'AUD', label: 'AUD ($)' },
+];
+function SectionHeader({ title, count, onAdd, addLabel }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: title }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: count })] }), onAdd && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-[11px]", onClick: onAdd, children: [_jsx(Plus, { className: "h-3 w-3" }), " ", addLabel] }))] }));
+}
+/** Native disclosure for a row's optional / advanced fields. */
+function Advanced({ children }) {
+    return (_jsxs("details", { className: "group", children: [_jsx("summary", { className: "cursor-pointer select-none list-none text-[11px] text-muted-foreground hover:text-foreground", children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(ArrowRight, { className: "h-3 w-3 transition-transform group-open:rotate-90" }), "Advanced"] }) }), _jsx("div", { className: "mt-1.5 space-y-1.5 border-l pl-2.5", children: children })] }));
+}
+/** Best-effort parse of a stored measure format into the picker's {kind, decimals}. */
+function parseMeasureFormat(format, currency) {
+    const f = (format ?? '').trim();
+    const m = f.match(/\.(0+)/);
+    const decimals = m ? Math.min(m[1].length, 2) : 0;
+    if (currency || /[$£€¥₹]/.test(f))
+        return { kind: 'currency', decimals };
+    if (f.includes('%'))
+        return { kind: 'percent', decimals };
+    if (f)
+        return { kind: 'number', decimals };
+    return { kind: 'raw', decimals: 0 };
+}
+/** Generate {format, currency} from the picker selection. */
+function buildMeasureFormat(kind, decimals, currency) {
+    const dp = decimals > 0 ? '.' + '0'.repeat(decimals) : '';
+    switch (kind) {
+        case 'number': return { format: `0,0${dp}`, currency: undefined };
+        case 'currency': return { format: `0,0${dp}`, currency: currency || 'USD' };
+        case 'percent': return { format: `0${dp}%`, currency: undefined };
+        default: return { format: undefined, currency: undefined };
+    }
+}
+/**
+ * Structured display-format picker for a measure. Maps {kind, decimals, currency}
+ * ⇄ the spec's `format`/`currency` strings and shows a live sample so a business
+ * user never has to hand-write a numeral pattern.
+ */
+function MeasureFormatField({ measure, onPatch, disabled }) {
+    const { kind, decimals } = parseMeasureFormat(measure.format, measure.currency);
+    const currency = measure.currency || 'USD';
+    const apply = (k, d, c) => onPatch(buildMeasureFormat(k, d, c));
+    const sample = formatMeasure(kind === 'percent' ? 0.1234 : 1234.5, measure.format, measure.currency);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [_jsx(InspectorSelectField, { label: "Display format", value: kind, options: FORMAT_KIND_OPTIONS, onCommit: (v) => apply(v, decimals, currency), disabled: disabled }), kind !== 'raw' && (_jsx(InspectorSelectField, { label: "Decimals", value: String(decimals), options: DECIMALS_OPTIONS, onCommit: (v) => apply(kind, parseInt(v, 10) || 0, currency), disabled: disabled }))] }), kind === 'currency' && (_jsx(InspectorSelectField, { label: "Currency", value: currency, options: CURRENCY_OPTIONS, onCommit: (v) => apply(kind, decimals, v), disabled: disabled })), kind !== 'raw' && (_jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["Sample: ", _jsx("span", { className: "font-mono tabular-nums", children: sample })] }))] }));
+}
+/** The relationship prefix of a `relationship.field` path that isn't yet in `include`, else null. */
+function missingRelationship(field, include) {
+    if (!field || !field.includes('.'))
+        return null;
+    const rel = field.split('.')[0];
+    return rel && !include.includes(rel) ? rel : null;
+}
+/** Inline author-time warning: a `relationship.field` whose join isn't declared in `include`. */
+function RelWarning({ rel, onAdd, disabled }) {
+    return (_jsxs("p", { className: "flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400", children: [_jsx(AlertTriangle, { className: "h-3 w-3 shrink-0" }), _jsxs("span", { children: ["Relationship ", _jsx("code", { className: "font-mono", children: rel }), " isn't in Included relationships."] }), !disabled && onAdd && (_jsx("button", { type: "button", className: "underline hover:no-underline", onClick: onAdd, children: "Add it" }))] }));
+}
+/**
+ * Visual filter editor for a dataset/measure `FilterCondition`. Wraps the shared
+ * {@link FilterBuilder} (a flat AND of `field op value` rows) and converts to/from
+ * the spec's Mongo-style `FilterCondition`. Filters it can't faithfully edit
+ * (nested / `$or` / multi-op) degrade to a "edit in Source" note rather than being
+ * silently rewritten. See {@link conditionToGroup} / {@link groupToCondition}.
+ */
+function DatasetFilterField({ label, help, value, onCommit, fields, disabled }) {
+    const { group, representable } = conditionToGroup(value);
+    const count = group.conditions.length;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), !representable ? (_jsxs("p", { className: "rounded-md border border-dashed bg-muted/30 px-2.5 py-1.5 text-[11px] text-muted-foreground", children: ["Advanced filter (nested / OR) \u2014 edit it in the ", _jsx("span", { className: "font-medium", children: "Source" }), " tab."] })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: disabled, className: "h-8 w-full justify-between text-xs font-normal", children: [_jsx("span", { className: "truncate text-left", children: count ? `${count} condition${count === 1 ? '' : 's'}` : _jsx("span", { className: "text-muted-foreground", children: "+ Add filter\u2026" }) }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-60 shrink-0" })] }) }), _jsx(PopoverContent, { align: "start", className: "w-[440px] max-w-[90vw] p-3", children: fields.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Pick a base object to add filter conditions." })) : (_jsx(FilterBuilder, { fields: fields, value: group, onChange: (g) => onCommit(groupToCondition(g)) })) })] })), help && _jsx("p", { className: "text-[10px] text-muted-foreground", children: help })] }));
+}
+export function DatasetDefaultInspector({ draft, onPatch, readOnly, name }) {
+    const label = typeof draft.label === 'string' ? draft.label : '';
+    const description = typeof draft.description === 'string' ? draft.description : '';
+    const object = typeof draft.object === 'string' ? draft.object : '';
+    const include = Array.isArray(draft.include) ? draft.include : [];
+    const dimensions = Array.isArray(draft.dimensions) ? draft.dimensions : [];
+    const measures = Array.isArray(draft.measures) ? draft.measures : [];
+    const datasetName = typeof draft.name === 'string' ? draft.name : undefined;
+    // In create mode the host passes an empty `name` (the PK is assigned on first
+    // save). Mirror ReportDefaultInspector: expose an editable Name that auto-
+    // derives a snake_case slug from the label until the author edits it directly,
+    // so a dataset created through the canvas saves with a valid identifier instead
+    // of dead-ending on the empty-name identity rule.
+    const createMode = !name;
+    const nameTouched = React.useRef(false);
+    const nameValue = typeof draft.name === 'string' ? draft.name : '';
+    const { options: objectOptions, loading: objectsLoading } = useObjectOptions();
+    const { relationships, fieldOptions, loading: catalogLoading } = useDatasetFieldCatalog(object, include);
+    const usage = useDatasetUsage(datasetName);
+    const objectComboOptions = React.useMemo(() => objectOptions.map((o) => ({ value: o.name, label: o.label })), [objectOptions]);
+    const relationshipComboOptions = React.useMemo(() => relationships.map((r) => ({ value: r.name, label: r.label, hint: r.referenceTo ? `→ ${r.referenceTo}` : undefined })), [relationships]);
+    const fieldComboOptions = React.useMemo(() => fieldOptions.map((f) => ({ value: f.value, label: f.label, hint: f.type, group: f.group })), [fieldOptions]);
+    // Base-object fields for the filter builders (scope + measure filters operate on
+    // the base table; relationship-path filters are out of scope for v1).
+    const filterFields = React.useMemo(() => fieldOptions.filter((f) => !f.value.includes('.')).map((f) => ({ value: f.value, label: f.label, type: f.type })), [fieldOptions]);
+    const datasetFilter = draft.filter && typeof draft.filter === 'object' ? draft.filter : undefined;
+    const baseLabel = objectComboOptions.find((o) => o.value === object)?.label ?? object;
+    const patchDimension = (i, patch) => onPatch({ dimensions: dimensions.map((d, idx) => (idx === i ? { ...d, ...patch } : d)) });
+    const patchMeasure = (i, patch) => onPatch({ measures: measures.map((m, idx) => (idx === i ? { ...m, ...patch } : m)) });
+    // Picking a field auto-infers the dimension type from the field's framework
+    // type (region:string, close_date:date, …) — the BI "pick field, type follows"
+    // convention — while leaving the Type select free to override.
+    const leafName = (path) => (path.includes('.') ? path.split('.').pop() ?? path : path);
+    const pickDimensionField = (i, v) => {
+        const opt = fieldOptions.find((o) => o.value === v);
+        const patch = opt?.type ? { field: v, type: fieldTypeToDimensionType(opt.type) } : { field: v };
+        if (!dimensions[i]?.name)
+            patch.name = leafName(v); // auto-name from field when unnamed
+        patchDimension(i, patch);
+    };
+    const pickMeasureField = (i, v) => {
+        const patch = { field: v };
+        if (!measures[i]?.name)
+            patch.name = leafName(v); // auto-name from field when unnamed
+        patchMeasure(i, patch);
+    };
+    return (_jsxs(InspectorShell, { kindLabel: "Dataset", title: String(label || draft.name || 'Dataset'), onClose: () => { }, hideClose: true, children: [datasetName && !usage.loading && (_jsx("p", { className: usage.reports + usage.dashboards > 0
+                    ? 'rounded-md border border-amber-500/30 bg-amber-500/5 px-2.5 py-1.5 text-[11px] text-amber-700 dark:text-amber-300'
+                    : 'text-[11px] text-muted-foreground', children: usage.reports + usage.dashboards > 0
+                    ? `Bound by ${usage.reports} report${usage.reports === 1 ? '' : 's'} · ${usage.dashboards} dashboard${usage.dashboards === 1 ? '' : 's'} — changes affect them.`
+                    : 'Not yet bound by any report or dashboard.' })), createMode && (_jsx(InspectorTextField, { label: "Name", value: nameValue, onCommit: (v) => { nameTouched.current = true; onPatch({ name: toFieldName(v) }); }, placeholder: "snake_case identifier", disabled: readOnly, mono: true })), _jsx(InspectorTextField, { label: "Label", value: label, onCommit: (v) => {
+                    // Live-derive the snake_case name from the label until the author edits
+                    // the Name field directly (create mode only).
+                    const patch = { label: v };
+                    if (createMode && !nameTouched.current)
+                        patch.name = toFieldName(v);
+                    onPatch(patch);
+                }, disabled: readOnly }), _jsx(InspectorTextField, { label: "Description", value: description, onCommit: (v) => onPatch({ description: v }), disabled: readOnly }), _jsx(InspectorComboField, { label: "Base object", value: object, onCommit: (v) => onPatch({ object: v }), options: objectComboOptions, loading: objectsLoading, placeholder: "Select an object\u2026", searchPlaceholder: "Search objects\u2026", disabled: readOnly, mono: true }), _jsxs("div", { className: "border-t pt-3 space-y-1.5", children: [_jsx(SectionHeader, { title: "Included relationships", count: include.length, addLabel: "Add", onAdd: readOnly ? undefined : () => onPatch({ include: appendArray(include, '') }) }), include.length === 0 ? (_jsxs("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-center text-[11px] text-muted-foreground", children: ["No joins. Add a relationship (a lookup field on ", _jsx("code", { children: baseLabel || 'the base object' }), ") to use ", _jsx("code", { children: "relationship.field" }), " dimensions/measures."] })) : (include.map((rel, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(InspectorComboField, { value: rel, onCommit: (v) => onPatch({ include: include.map((r, idx) => (idx === i ? v : r)) }), options: relationshipComboOptions, loading: catalogLoading, placeholder: "Select a relationship\u2026", searchPlaceholder: "Search relationships\u2026", disabled: readOnly, mono: true }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 shrink-0 p-0", onClick: () => onPatch({ include: spliceArray(include, i, null) }), "aria-label": "Remove relationship", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }, i)))), object && include.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-x-1 gap-y-0.5 pt-0.5 text-[10px] text-muted-foreground", children: [_jsx("span", { className: "font-mono font-medium", children: baseLabel }), include.map((rel, i) => {
+                                const r = relationships.find((x) => x.name === rel);
+                                return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(ArrowRight, { className: "h-3 w-3 opacity-60" }), _jsxs("span", { className: "font-mono", children: [rel, r?.referenceTo ? ` (${r.referenceTo})` : ''] })] }, i));
+                            })] }))] }), _jsx("div", { className: "border-t pt-3", children: _jsx(DatasetFilterField, { label: "Scope filter", help: "Intrinsic scope, ANDed into every query (e.g. exclude soft-deleted records).", value: datasetFilter, onCommit: (fc) => onPatch({ filter: fc }), fields: filterFields, disabled: readOnly }) }), _jsxs("div", { className: "border-t pt-3 space-y-2", children: [_jsx(SectionHeader, { title: "Dimensions", count: dimensions.length, addLabel: "Add dimension", onAdd: readOnly ? undefined : () => onPatch({ dimensions: appendArray(dimensions, { name: '', field: '', type: 'string' }) }) }), dimensions.map((d, i) => (_jsxs("div", { className: "rounded-md border p-2 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-[11px] font-medium text-muted-foreground", children: ["Dimension ", i + 1] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Remove dimension", title: "Remove dimension", className: "h-6 w-6 shrink-0 p-0 text-muted-foreground hover:text-destructive", onClick: () => onPatch({ dimensions: spliceArray(dimensions, i, null) }), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsx(InspectorTextField, { label: "Name", value: d.name ?? '', onCommit: (v) => patchDimension(i, { name: v }), placeholder: "e.g. region", disabled: readOnly, mono: true }), _jsx(InspectorComboField, { label: "Field", value: d.field ?? '', onCommit: (v) => pickDimensionField(i, v), options: fieldComboOptions, loading: catalogLoading, placeholder: "field or relationship.field", searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }), (() => { const rel = missingRelationship(d.field, include); return rel ? _jsx(RelWarning, { rel: rel, disabled: readOnly, onAdd: () => onPatch({ include: appendArray(include, rel) }) }) : null; })(), _jsx(InspectorSelectField, { label: "Type", value: d.type, options: DIMENSION_TYPE_OPTIONS, onCommit: (v) => patchDimension(i, { type: v }), disabled: readOnly }), _jsxs(Advanced, { children: [_jsx(InspectorTextField, { label: "Label (optional)", value: d.label ?? '', onCommit: (v) => patchDimension(i, { label: v || undefined }), placeholder: d.name || 'Display label', disabled: readOnly }), d.type === 'date' && (_jsx(InspectorSelectField, { label: "Date bucket", value: d.dateGranularity ?? '', options: DATE_GRANULARITY_OPTIONS, onCommit: (v) => patchDimension(i, { dateGranularity: v || undefined }), disabled: readOnly }))] })] }, i)))] }), _jsxs("div", { className: "border-t pt-3 space-y-2", children: [_jsx(SectionHeader, { title: "Measures", count: measures.length, addLabel: "Add measure", onAdd: readOnly ? undefined : () => onPatch({ measures: appendArray(measures, { name: '', aggregate: 'sum', field: '' }) }) }), measures.map((m, i) => {
+                        const otherMeasures = measures.filter((_, idx) => idx !== i).map((x) => x.name).filter((n) => !!n);
+                        const derived = m.derived;
+                        return (_jsxs("div", { className: "rounded-md border p-2 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-[11px] font-medium text-muted-foreground", children: ["Measure ", i + 1] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Remove measure", title: "Remove measure", className: "h-6 w-6 shrink-0 p-0 text-muted-foreground hover:text-destructive", onClick: () => onPatch({ measures: spliceArray(measures, i, null) }), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsx(InspectorTextField, { label: "Name", value: m.name ?? '', onCommit: (v) => patchMeasure(i, { name: v }), placeholder: "e.g. revenue", disabled: readOnly, mono: true }), _jsx(InspectorSelectField, { label: "Aggregate", value: m.aggregate, options: AGGREGATE_OPTIONS, onCommit: (v) => patchMeasure(i, { aggregate: v }), disabled: readOnly }), _jsx(InspectorComboField, { label: "Field", value: m.field ?? '', onCommit: (v) => pickMeasureField(i, v), options: fieldComboOptions, loading: catalogLoading, placeholder: "field (optional for count)", searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }), (() => { const rel = missingRelationship(m.field, include); return rel ? _jsx(RelWarning, { rel: rel, disabled: readOnly, onAdd: () => onPatch({ include: appendArray(include, rel) }) }) : null; })(), _jsxs(Advanced, { children: [_jsx(InspectorTextField, { label: "Label (optional)", value: m.label ?? '', onCommit: (v) => patchMeasure(i, { label: v || undefined }), placeholder: m.name || 'Display label', disabled: readOnly }), _jsx(MeasureFormatField, { measure: m, onPatch: (pp) => patchMeasure(i, pp), disabled: readOnly }), _jsx(DatasetFilterField, { label: "Filter (measure-scoped)", help: "Only rows matching this filter feed this measure (e.g. won_amount = sum(amount) where stage = won).", value: m.filter, onCommit: (fc) => patchMeasure(i, { filter: fc }), fields: filterFields, disabled: readOnly }), _jsx(InspectorCheckboxField, { label: "Derived \u2014 computed from other measures", value: !!derived, onCommit: (v) => patchMeasure(i, { derived: v ? { op: 'ratio', of: [] } : undefined }), disabled: readOnly }), derived && (_jsxs("div", { className: "space-y-1.5 rounded-md border border-dashed p-2", children: [_jsx(InspectorSelectField, { label: "Operation", value: derived.op, options: DERIVED_OP_OPTIONS, onCommit: (v) => patchMeasure(i, { derived: { ...derived, op: v } }), disabled: readOnly }), _jsx(Label, { className: "text-xs text-muted-foreground", children: "Operands (other measures)" }), (() => { const need = derived.op === 'ratio' || derived.op === 'difference' ? 2 : 1; const have = Array.isArray(derived.of) ? derived.of.length : 0; return have < need ? _jsxs("p", { className: "text-[10px] text-amber-600 dark:text-amber-400", children: ["Select ", need === 2 ? 'exactly 2 measures' : 'at least 1 measure', " for ", derived.op, "."] }) : null; })(), otherMeasures.length === 0 ? (_jsx("p", { className: "text-[11px] italic text-muted-foreground", children: "Add other measures first." })) : (_jsx("div", { className: "space-y-1", children: otherMeasures.map((nm) => {
+                                                        const checked = Array.isArray(derived.of) && derived.of.includes(nm);
+                                                        return (_jsx(InspectorCheckboxField, { label: nm, value: checked, disabled: readOnly, onCommit: (v) => {
+                                                                const current = Array.isArray(derived.of) ? derived.of : [];
+                                                                const next = v ? [...current, nm] : current.filter((x) => x !== nm);
+                                                                patchMeasure(i, { derived: { ...derived, of: next } });
+                                                            } }, nm));
+                                                    }) }))] }))] })] }, i));
+                    })] })] }));
+}

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,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n';
+import { InspectorShell, InspectorTextField, InspectorSelectField, 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];
+        }
+        // `type` defaults to 'default' (FlowEdgeSchema) — don't persist the noise so
+        // a normal edge stays `{ source, target }`; only `back`/`fault`/`conditional`
+        // are written.
+        if (next.type === 'default' || next.type === '' || next.type === undefined)
+            delete next.type;
+        onPatch({ edges: spliceArray(edges, index, next) });
+    };
+    const isDefault = edge.isDefault === true;
+    // Decision out-edges can bind EXPLICITLY to one of the source decision's
+    // branches (vs the implicit by-order auto-wire): picking a branch writes its
+    // expression / label (or marks the default) onto this edge, so routing stays
+    // correct even when edges are connected out of branch order.
+    const nodes = Array.isArray(draft.nodes)
+        ? (draft.nodes)
+        : [];
+    const sourceNode = nodes.find((n) => n.id === edge.source);
+    const branches = sourceNode?.type === 'decision' &&
+        Array.isArray(sourceNode.config?.conditions)
+        ? (sourceNode.config.conditions)
+        : [];
+    const branchExpr = (b) => (typeof b.expression === 'string' ? b.expression.trim() : '');
+    const branchName = (b) => (typeof b.label === 'string' ? b.label.trim() : '');
+    // Which branch this edge currently represents: the default edge maps to the
+    // `true`/empty branch; otherwise match by condition, then by label. '' = custom.
+    const selectedBranch = (() => {
+        if (!branches.length)
+            return '';
+        if (isDefault) {
+            const i = branches.findIndex((b) => { const e = branchExpr(b); return e === '' || e === 'true'; });
+            return i >= 0 ? String(i) : '';
+        }
+        const cond = conditionText(edge.condition);
+        let i = cond ? branches.findIndex((b) => branchExpr(b) === cond) : -1;
+        if (i < 0 && edge.label)
+            i = branches.findIndex((b) => branchName(b) === edge.label);
+        return i >= 0 ? String(i) : '';
+    })();
+    const applyBranch = (key) => {
+        if (key === '')
+            return; // keep current custom values
+        const b = branches[Number(key)];
+        if (!b)
+            return;
+        const expr = branchExpr(b);
+        const lbl = branchName(b) || undefined;
+        if (expr === '' || expr === 'true')
+            patchEdge({ isDefault: true, condition: undefined, label: lbl });
+        else
+            patchEdge({ isDefault: false, condition: expr, label: lbl });
+    };
+    // Approval out-edges (ADR-0019/0044) route by branch *label*: the engine
+    // resumes down the out-edge whose label matches the decision — `approve` /
+    // `reject`, or `revise` (ADR-0044 send-back-for-revision). Offer those as a
+    // picker (mirrors APPROVAL_BRANCH_LABELS in @objectstack/spec) so the author
+    // need not recall the exact keyword; a free-text label is still allowed.
+    const isApprovalSource = sourceNode?.type === 'approval';
+    const APPROVAL_BRANCHES = ['approve', 'reject', 'revise'];
+    const currentApprovalBranch = (() => {
+        const l = (edge.label ?? '').trim().toLowerCase();
+        return APPROVAL_BRANCHES.includes(l) ? l : '';
+    })();
+    const edgeType = (typeof edge.type === 'string' && edge.type) || 'default';
+    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 })] }), branches.length > 0 && (_jsx(InspectorSelectField, { label: t('engine.inspector.flowEdge.branch', locale), value: selectedBranch, options: [
+                    ...branches.map((b, i) => {
+                        const expr = branchExpr(b);
+                        const nm = branchName(b) || `Branch ${i + 1}`;
+                        const suffix = expr === '' || expr === 'true' ? ' \u00b7 default' : ` \u00b7 ${expr}`;
+                        return { value: String(i), label: `${nm}${suffix}` };
+                    }),
+                    { value: '', label: '\u2014 Custom \u2014' },
+                ], onCommit: applyBranch, disabled: readOnly })), isApprovalSource && (_jsx(InspectorSelectField, { label: t('engine.inspector.flowEdge.approvalBranch', locale), value: currentApprovalBranch, options: [
+                    { value: 'approve', label: t('engine.inspector.flowEdge.branchApprove', locale) },
+                    { value: 'reject', label: t('engine.inspector.flowEdge.branchReject', locale) },
+                    { value: 'revise', label: t('engine.inspector.flowEdge.branchRevise', locale) },
+                    { value: '', label: t('engine.inspector.flowEdge.branchCustom', locale) },
+                ], 
+                // Picking a branch writes the matching label; "Custom" keeps the
+                // free-text label the author typed below.
+                onCommit: (v) => { if (v)
+                    patchEdge({ label: v }); }, disabled: readOnly })), _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) }), _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.connection', locale) }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }), _jsx(InspectorSelectField, { label: t('engine.inspector.flowEdge.type', locale), value: edgeType, options: [
+                    { value: 'default', label: t('engine.inspector.flowEdge.typeDefault', locale) },
+                    { value: 'conditional', label: t('engine.inspector.flowEdge.typeConditional', locale) },
+                    { value: 'fault', label: t('engine.inspector.flowEdge.typeFault', locale) },
+                    { value: 'back', label: t('engine.inspector.flowEdge.typeBack', locale) },
+                ], onCommit: (v) => patchEdge({ type: v }), disabled: readOnly }), edge.type === 'back' && (_jsx("p", { className: "text-[11px] leading-snug text-amber-600 dark:text-amber-400", role: "note", children: t('engine.inspector.flowEdge.backHint', 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;