@object-ui/app-shell 7.0.0 → 7.2.0

package/dist/views/metadata-admin/inspectors/flow-scope.js

@@ -0,0 +1,199 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/** Trigger types that fire on a single record (so `record` is in scope). */
+const RECORD_TRIGGER_TYPES = new Set([
+    'record-after-create',
+    'record-after-update',
+    'record-before-update',
+    'record-after-delete',
+    'record-change',
+]);
+/** Trigger types that carry a meaningful `previous` snapshot of the record. */
+const PREVIOUS_TRIGGER_TYPES = new Set([
+    'record-after-update',
+    'record-before-update',
+    'record-change',
+]);
+function asArray(v) {
+    return Array.isArray(v) ? v : [];
+}
+function asRecord(v) {
+    return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+}
+function str(v) {
+    return typeof v === 'string' && v ? v : undefined;
+}
+/**
+ * Ancestor node ids of `nodeId` — every node from which `nodeId` is reachable
+ * by following edges forward (equivalently, a reverse breadth-first walk from
+ * `nodeId`). Cycle-safe (a declared `back`-edge revise loop won't spin) and
+ * never includes `nodeId` itself.
+ */
+export function flowAncestors(nodeId, edges) {
+    const rev = new Map();
+    for (const e of edges) {
+        const s = str(e.source);
+        const t = str(e.target);
+        if (!s || !t)
+            continue;
+        const list = rev.get(t);
+        if (list)
+            list.push(s);
+        else
+            rev.set(t, [s]);
+    }
+    const seen = new Set();
+    const stack = [...(rev.get(nodeId) ?? [])];
+    while (stack.length) {
+        const cur = stack.pop();
+        if (cur === nodeId || seen.has(cur))
+            continue;
+        seen.add(cur);
+        for (const p of rev.get(cur) ?? [])
+            stack.push(p);
+    }
+    return seen;
+}
+/**
+ * The variable names a node INTRODUCES into scope for its successors — mirroring
+ * what the simulator (flow-simulator.ts) and engine actually write:
+ * `outputVariable` (single), `outputVariables` (list), an assignment node's
+ * `assignments` keys (map / array / flat shapes), a screen's collected
+ * `fields[].name`, a screen object-form's `idVariable`, and a loop/map
+ * `iteratorVariable` (flagged as a `loop` ref). The start node is NOT handled
+ * here — its trigger record is resolved separately.
+ */
+export function nodeOutputRefs(node) {
+    const type = str(node.type);
+    const cfg = asRecord(node.config);
+    const nodeId = str(node.id) ?? '';
+    const label = str(node.label);
+    const detail = label && label !== nodeId ? label : nodeId || undefined;
+    const out = [];
+    const add = (token, group = 'outputs') => {
+        if (token && !out.some((r) => r.token === token)) {
+            out.push({ token, label: token, detail, group });
+        }
+    };
+    // Loop / map iterator — its own group.
+    if (type === 'loop' || type === 'map')
+        add(str(cfg.iteratorVariable), 'loop');
+    // Single + multi output variables (create/get/http/subflow/map/end/script).
+    add(str(cfg.outputVariable));
+    for (const name of asArray(cfg.outputVariables))
+        add(str(name));
+    // Screen object-form: the saved record's id is bound to a variable.
+    add(str(cfg.idVariable));
+    // Assignment node — the assigned variable names. Accepts the three authoring
+    // shapes the simulator/engine accept: an array of `{variable|name|key}`, a
+    // flat `{ var: value }` map, or (legacy) keys directly on config.
+    if (type === 'assignment') {
+        const raw = cfg.assignments;
+        if (Array.isArray(raw)) {
+            for (const item of raw) {
+                const e = asRecord(item);
+                add(str(e.variable) ?? str(e.name) ?? str(e.key));
+            }
+        }
+        else if (raw && typeof raw === 'object') {
+            for (const k of Object.keys(raw))
+                add(k);
+        }
+    }
+    // Screen — collected input field names become variables for downstream nodes.
+    if (type === 'screen' || type === 'user_task') {
+        for (const f of asArray(cfg.fields))
+            add(str(asRecord(f).name));
+    }
+    return out;
+}
+/** De-duplicate by token, keeping the first (group-priority) occurrence. */
+function dedupeByToken(refs) {
+    const seen = new Set();
+    return refs.filter((r) => (seen.has(r.token) ? false : (seen.add(r.token), true)));
+}
+/**
+ * Resolve the in-scope reference set at `nodeId` (graph-aware). Pure: the
+ * trigger object's fields are NOT expanded here (that needs an async fetch) —
+ * the returned `trigger` carries the object name and per-field token prefix for
+ * the UI layer to expand. Order: flow variables, upstream outputs, loop
+ * iterators, then trigger refs, de-duplicated by token.
+ */
+export function resolveFlowScope(draft, nodeId) {
+    const nodes = asArray(draft.nodes).map(asRecord);
+    const edges = asArray(draft.edges);
+    const refs = [];
+    // 1. Flow variables — always in scope (declared up-front).
+    for (const v of asArray(draft.variables)) {
+        const rec = asRecord(v);
+        const name = str(rec.name);
+        if (!name)
+            continue;
+        const type = str(rec.type);
+        refs.push({ token: name, label: name, detail: type ? `variable · ${type}` : 'variable', group: 'variables' });
+    }
+    if (!nodeId)
+        return { refs: dedupeByToken(refs) };
+    // 2. Upstream outputs + loop iterators — from ANCESTOR nodes only.
+    const ancestors = flowAncestors(nodeId, edges);
+    const startNode = nodes.find((n) => str(n.type) === 'start');
+    const startId = str(startNode?.id);
+    for (const node of nodes) {
+        const id = str(node.id);
+        if (!id || id === nodeId || !ancestors.has(id))
+            continue;
+        if (id === startId)
+            continue; // the start node contributes the trigger record, below
+        for (const ref of nodeOutputRefs(node))
+            refs.push(ref);
+    }
+    // 3. Trigger record — on a record-triggered flow, when the start node is in
+    //    scope: either we ARE the start node (editing its own entry condition) or
+    //    the start node is an ancestor (it is the ancestor of everything reachable).
+    if (startNode) {
+        const cfg = asRecord(startNode.config);
+        const triggerType = str(cfg.triggerType);
+        const objectName = str(cfg.objectName);
+        const isRecordTrigger = !!triggerType && RECORD_TRIGGER_TYPES.has(triggerType);
+        const startInScope = startId === nodeId || (!!startId && ancestors.has(startId));
+        if (isRecordTrigger && objectName && startInScope) {
+            const onStart = startId === nodeId;
+            const includePrevious = PREVIOUS_TRIGGER_TYPES.has(triggerType);
+            // On the start node the record's fields ARE the bare evaluation context
+            // (`status`), so the whole record is not a named ref there; `previous` is
+            // (`previous.status`). Downstream the record is the named `record` object.
+            if (!onStart) {
+                refs.push({ token: 'record', label: 'record', detail: `trigger record · ${objectName}`, group: 'trigger' });
+            }
+            if (includePrevious) {
+                refs.push({ token: 'previous', label: 'previous', detail: 'record values before the change', group: 'trigger' });
+            }
+            return { refs: dedupeByToken(refs), trigger: { objectName, fieldPrefix: onStart ? '' : 'record.', includePrevious } };
+        }
+    }
+    return { refs: dedupeByToken(refs) };
+}
+/**
+ * Expand a trigger object's fields into per-field refs — `record.<field>`
+ * downstream, bare `<field>` on the start node — given an already-fetched field
+ * list. Split out from {@link resolveFlowScope} so it is unit-testable without a
+ * metadata client.
+ */
+export function triggerFieldRefs(trigger, fields) {
+    const out = [];
+    for (const f of fields) {
+        if (!f?.name)
+            continue;
+        const token = `${trigger.fieldPrefix}${f.name}`;
+        const detail = f.label && f.label !== f.name ? f.label : f.type;
+        out.push({ token, label: token, detail, group: 'trigger' });
+        if (trigger.includePrevious) {
+            out.push({
+                token: `previous.${f.name}`,
+                label: `previous.${f.name}`,
+                detail: detail ? `prior ${detail}` : 'prior value',
+                group: 'trigger',
+            });
+        }
+    }
+    return out;
+}

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

@@ -46,10 +46,21 @@ export interface NormalizedObject {
 /** Normalize a raw object metadata doc into label + fields + relationships. */
 export declare function normalizeObject(doc: Record<string, unknown> | null | undefined, name: string): NormalizedObject;
 /**
- * Build the flat `field` / `relationship.field` option list from the base
- * object and the included relationships' (already-fetched) target objects.
+ * Walk a dotted relationship PATH from the base object, returning the object at
+ * its end (whose fields a `path.field` references) plus each hop's relationship
+ * label, or undefined if any hop can't be resolved (ADR-0071 multi-hop).
+ * `objectsByName` holds the already-fetched objects along the chain.
  */
-export declare function buildFieldOptions(base: NormalizedObject, include: string[], targets: Record<string, NormalizedObject>): DatasetFieldOption[];
+export declare function resolvePath(base: NormalizedObject, path: string, objectsByName: Record<string, NormalizedObject>): {
+    target: NormalizedObject;
+    labels: string[];
+} | undefined;
+/**
+ * Build the flat `field` / `relationship[.relationship].field` option list from
+ * the base object and the (already-fetched) objects along each included PATH.
+ * Single-hop paths behave exactly as before.
+ */
+export declare function buildFieldOptions(base: NormalizedObject, include: string[], objectsByName: Record<string, NormalizedObject>): DatasetFieldOption[];
 /** Recursively test whether a metadata doc references `datasetName` via a `dataset` key. */
 export declare function referencesDataset(doc: unknown, datasetName: string): boolean;
 /** Every object as `{ name, label }`, sorted by label. Fetched once. */

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

@@ -0,0 +1,23 @@
+import { type ScopeGroupId, type ScopeRef } from './flow-scope';
+export interface ScopeGroup {
+    id: ScopeGroupId;
+    label: string;
+    refs: ScopeRef[];
+}
+export interface UseFlowScopeResult {
+    /** Non-empty groups, in display order. */
+    groups: ScopeGroup[];
+    /** Flat, de-duplicated ref list (all groups). */
+    refs: ScopeRef[];
+    /** True while the trigger object's fields are still loading. */
+    loading: boolean;
+    /** No references in scope — the field should render as a plain input. */
+    isEmpty: boolean;
+}
+/**
+ * Resolve + (async) expand the in-scope references at a flow node. `draft` is
+ * the whole flow draft; `nodeId` the node being edited (for an edge, pass its
+ * source node id — references available on an edge are those in scope at its
+ * source).
+ */
+export declare function useFlowScope(draft: Record<string, unknown> | undefined, nodeId: string | undefined): UseFlowScopeResult;

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

@@ -0,0 +1,45 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * useFlowScope — React adapter over the pure {@link resolveFlowScope} graph-walk
+ * that powers the inspector's variable data-picker (#1934).
+ *
+ * It resolves the graph-aware refs synchronously, then lazily fetches the
+ * trigger object's field catalog (via the shared metadata client) and merges
+ * the expanded `record.<field>` refs in — grouping everything into the ordered
+ * sections the picker renders. An empty result (`isEmpty`) tells the field to
+ * degrade to a plain input.
+ */
+import * as React from 'react';
+import { resolveFlowScope, triggerFieldRefs, } from './flow-scope';
+import { useObjectFields } from '../previews/useObjectFields';
+const GROUP_ORDER = ['variables', 'outputs', 'loop', 'trigger'];
+const GROUP_LABELS = {
+    variables: 'Flow variables',
+    outputs: 'Upstream outputs',
+    loop: 'Loop item',
+    trigger: 'Trigger record',
+};
+/**
+ * Resolve + (async) expand the in-scope references at a flow node. `draft` is
+ * the whole flow draft; `nodeId` the node being edited (for an edge, pass its
+ * source node id — references available on an edge are those in scope at its
+ * source).
+ */
+export function useFlowScope(draft, nodeId) {
+    const scope = React.useMemo(() => resolveFlowScope(draft ?? {}, nodeId), [draft, nodeId]);
+    const { fields, loading } = useObjectFields(scope.trigger?.objectName);
+    return React.useMemo(() => {
+        const all = [...scope.refs];
+        if (scope.trigger)
+            all.push(...triggerFieldRefs(scope.trigger, fields));
+        // Global de-dup by token (a declared var also written upstream shows once).
+        const seen = new Set();
+        const refs = all.filter((r) => (seen.has(r.token) ? false : (seen.add(r.token), true)));
+        const groups = GROUP_ORDER.map((id) => ({
+            id,
+            label: GROUP_LABELS[id],
+            refs: refs.filter((r) => r.group === id),
+        })).filter((g) => g.refs.length > 0);
+        return { groups, refs, loading: !!scope.trigger && loading, isEmpty: refs.length === 0 };
+    }, [scope, fields, loading]);
+}

package/dist/views/metadata-admin/issuePath.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Render a (possibly nested) validation issue path into a human-readable trail
+ * that names the offending element. A Zod issue on a dashboard widget arrives as
+ * a dot-joined path like `widgets.2.layout`; shown as just its head field
+ * ("Widgets") the author can't tell WHICH widget or sub-field is at fault. This
+ * turns it into "Widgets → priority_split → layout" by resolving each array
+ * index to the item's stable identity (id/name/title) from the draft value.
+ *
+ * @param headLabel resolved human label for the first segment (caller knows the
+ *                  form/schema labels).
+ * @param path      dot-joined issue path (e.g. `widgets.2.layout`).
+ * @param rootValue the draft object the path indexes into (used to resolve an
+ *                  array index to the item's identity).
+ */
+export declare function describeIssuePath(headLabel: string, path: string, rootValue: unknown): string;

package/dist/views/metadata-admin/issuePath.js

@@ -0,0 +1,65 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Render a (possibly nested) validation issue path into a human-readable trail
+ * that names the offending element. A Zod issue on a dashboard widget arrives as
+ * a dot-joined path like `widgets.2.layout`; shown as just its head field
+ * ("Widgets") the author can't tell WHICH widget or sub-field is at fault. This
+ * turns it into "Widgets → priority_split → layout" by resolving each array
+ * index to the item's stable identity (id/name/title) from the draft value.
+ *
+ * @param headLabel resolved human label for the first segment (caller knows the
+ *                  form/schema labels).
+ * @param path      dot-joined issue path (e.g. `widgets.2.layout`).
+ * @param rootValue the draft object the path indexes into (used to resolve an
+ *                  array index to the item's identity).
+ */
+export function describeIssuePath(headLabel, path, rootValue) {
+    const segments = path.split('.');
+    if (segments.length <= 1)
+        return headLabel;
+    const parts = [headLabel];
+    let cursor = asRecord(rootValue)?.[segments[0]];
+    for (let i = 1; i < segments.length; i++) {
+        const seg = segments[i];
+        if (/^\d+$/.test(seg)) {
+            const idx = Number(seg);
+            const item = Array.isArray(cursor) ? cursor[idx] : undefined;
+            // 1-based index reads naturally for non-developers ("#1" not "#0").
+            parts.push(itemIdentity(item) ?? `#${idx + 1}`);
+            cursor = item;
+        }
+        else {
+            parts.push(seg);
+            cursor = asRecord(cursor)?.[seg];
+        }
+    }
+    return parts.join(' → ');
+}
+/** Best-effort stable identity of an array item, resolving an I18nLabel object
+ *  ({ key, defaultValue }) to its string. Returns undefined when none usable. */
+function itemIdentity(item) {
+    const o = asRecord(item);
+    if (!o)
+        return undefined;
+    for (const k of ['id', 'name', 'key', 'title', 'label']) {
+        const v = o[k];
+        if (typeof v === 'string' && v.trim())
+            return v;
+        const nested = asRecord(v);
+        if (nested) {
+            const s = nested.defaultValue ?? nested.key;
+            if (typeof s === 'string' && s.trim())
+                return s;
+        }
+    }
+    return undefined;
+}
+function asRecord(v) {
+    return v && typeof v === 'object' ? v : undefined;
+}

package/dist/views/metadata-admin/package-scope.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Sentinel "package" id for this environment's runtime, DB-authored metadata —
+ * items with no code-package binding (`package_id IS NULL`). The metadata
+ * list/get API treats `?package=sys_metadata` as exactly that local scope on
+ * READ, and a WRITE under it persists `package_id = null` (matching the
+ * server's runtime-only provenance, see framework #2252).
+ *
+ * Why this exists: a self-hosted, metadata-customizable environment is
+ * single-tenant — there is no "org" dimension here; the real axis is
+ * code-package vs. runtime (DB-authored). Before this scope, the package
+ * selector only listed code packages, so metadata authored at runtime
+ * (`package_id = null`) was filtered out of every code-package view and became
+ * un-navigable (the route redirected to "new"). Surfacing the local scope as a
+ * first-class, always-present selector entry makes it discoverable and editable.
+ */
+export declare const LOCAL_PACKAGE_ID = "sys_metadata";
+/**
+ * Build the Studio package-scope options from the raw `package` metadata list.
+ * Filters out system/cloud-scoped packages and appends a stable
+ * "Local / Custom (this environment)" scope so runtime metadata authored here
+ * is always selectable/visible — even when zero items exist yet.
+ */
+export declare function buildPackageScopeOptions(rawList: unknown[] | null | undefined): {
+    id: string;
+    name: string;
+}[];
+/**
+ * True for the runtime/null "Local / Custom" sentinel scope. Per ADR-0070 D5
+ * this is a *migration* surface (move loose items into a base), never a valid
+ * create destination — callers gate "create" on a real writable base.
+ */
+export declare function isLocalScope(id: string | null | undefined): boolean;
+/**
+ * The writable bases (project-scoped DB packages) from the raw package list —
+ * the only valid authoring destinations (ADR-0070 D2). Excludes code/installed
+ * (system|cloud) packages AND the Local sentinel.
+ */
+export declare function writableBaseOptions(rawList: unknown[] | null | undefined): {
+    id: string;
+    name: string;
+}[];

package/dist/views/metadata-admin/package-scope.js

@@ -0,0 +1,59 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+import { detectLocale, t } from './i18n';
+/**
+ * Sentinel "package" id for this environment's runtime, DB-authored metadata —
+ * items with no code-package binding (`package_id IS NULL`). The metadata
+ * list/get API treats `?package=sys_metadata` as exactly that local scope on
+ * READ, and a WRITE under it persists `package_id = null` (matching the
+ * server's runtime-only provenance, see framework #2252).
+ *
+ * Why this exists: a self-hosted, metadata-customizable environment is
+ * single-tenant — there is no "org" dimension here; the real axis is
+ * code-package vs. runtime (DB-authored). Before this scope, the package
+ * selector only listed code packages, so metadata authored at runtime
+ * (`package_id = null`) was filtered out of every code-package view and became
+ * un-navigable (the route redirected to "new"). Surfacing the local scope as a
+ * first-class, always-present selector entry makes it discoverable and editable.
+ */
+export const LOCAL_PACKAGE_ID = 'sys_metadata';
+const SYSTEM_SCOPES = new Set(['system', 'cloud']);
+/**
+ * Build the Studio package-scope options from the raw `package` metadata list.
+ * Filters out system/cloud-scoped packages and appends a stable
+ * "Local / Custom (this environment)" scope so runtime metadata authored here
+ * is always selectable/visible — even when zero items exist yet.
+ */
+export function buildPackageScopeOptions(rawList) {
+    const rows = (rawList ?? [])
+        .map((raw) => {
+        const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
+        const m = (item?.manifest ?? item ?? {});
+        return {
+            id: m.id,
+            scope: m.scope,
+            name: m.name || m.id,
+        };
+    })
+        .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
+    rows.sort((a, b) => a.name.localeCompare(b.name));
+    const opts = rows.map((p) => ({ id: p.id, name: p.name }));
+    // Append (never default) so the existing first-code-package default is
+    // preserved; the user opts into the local scope explicitly.
+    return [...opts, { id: LOCAL_PACKAGE_ID, name: t('engine.package.local', detectLocale()) }];
+}
+/**
+ * True for the runtime/null "Local / Custom" sentinel scope. Per ADR-0070 D5
+ * this is a *migration* surface (move loose items into a base), never a valid
+ * create destination — callers gate "create" on a real writable base.
+ */
+export function isLocalScope(id) {
+    return !id || id === LOCAL_PACKAGE_ID;
+}
+/**
+ * The writable bases (project-scoped DB packages) from the raw package list —
+ * the only valid authoring destinations (ADR-0070 D2). Excludes code/installed
+ * (system|cloud) packages AND the Local sentinel.
+ */
+export function writableBaseOptions(rawList) {
+    return buildPackageScopeOptions(rawList).filter((o) => o.id !== LOCAL_PACKAGE_ID);
+}

package/dist/views/metadata-admin/preview-registry.d.ts

@@ -84,6 +84,18 @@ export interface MetadataPreviewProps {
      * "click widget → edit widget in the right panel" pattern.
      */
     onSelectionChange?: (selection: MetadataSelection | null) => void;
+    /**
+     * Optional: server-computed validation diagnostics for the current draft
+     * (the layered record's `_diagnostics`, kept in sync with live client-side
+     * issues). Each entry carries a dotted JSON path so a preview can map it onto
+     * the offending sub-element. Used by the flow preview's Problems panel +
+     * on-canvas badges; ignored by previews that don't surface diagnostics.
+     */
+    diagnostics?: Array<{
+        path?: string;
+        message: string;
+        severity?: 'error' | 'warning';
+    }>;
 }
 export type MetadataPreview = ComponentType<MetadataPreviewProps>;
 /**

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

@@ -77,13 +77,29 @@ export function DatasetPreview({ draft }) {
     const resultObject = state.status === 'ok' ? state.object : undefined;
     const { measureField, headerLabel } = buildDatasetFieldHelpers(resultFields, resultObject, fieldLabel);
     const columns = [...dimensionNames, ...measureNames];
+    // A ratio/percent measure (format like `0.0%`) on the same axis as a
+    // magnitude measure (currency in the hundred-thousands) renders as an
+    // invisible sliver. When the selection MIXES the two scales, plot the ratio
+    // measures as a line on a secondary (right) Y axis via the `combo` chart —
+    // bars (magnitude) keep the left axis. Same-scale selections stay a plain bar.
+    const isRatioMeasure = (m) => {
+        const f = measureField(m)?.format;
+        return typeof f === 'string' && f.includes('%');
+    };
+    const ratioMeasures = measureNames.filter(isRatioMeasure);
+    const mixedScale = ratioMeasures.length > 0 && ratioMeasures.length < measureNames.length;
     return (_jsx(PreviewShell, { hint: `dataset · ${objectName}${dimensionNames.length ? ' · by ' + dimensionNames.join(', ') : ''}`, children: _jsxs("div", { className: "p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: () => void run(), disabled: state.status === 'loading', className: "inline-flex items-center gap-1.5 rounded-md border bg-background px-3 py-1.5 text-xs font-medium hover:bg-accent disabled:opacity-50", children: [state.status === 'loading'
                                     ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })
-                                    : _jsx(BarChart3, { className: "h-3.5 w-3.5" }), "Run preview"] }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [measureNames.length, " measure", measureNames.length === 1 ? '' : 's', " \u00B7 ", dimensionNames.length, " dimension", dimensionNames.length === 1 ? '' : 's'] })] }), state.status === 'error' && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "break-words", children: state.error })] })), state.status === 'ok' && state.rows.length === 0 && (_jsx(PreviewEmptyState, { icon: _jsx(BarChart3, { className: "h-8 w-8" }), title: "No rows", description: "The dataset returned no rows for the current scope." })), state.rows.length > 0 && dimensionNames.length >= 1 && (_jsx(PreviewErrorBoundary, { fallbackHint: "Couldn't render the chart for this result \u2014 the table below still shows the data.", children: _jsx(React.Suspense, { fallback: _jsx("div", { className: "h-[260px] flex items-center justify-center text-xs text-muted-foreground", children: _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }), children: _jsx("div", { className: "rounded-md border p-2", children: _jsx(ChartRenderer, { schema: {
-                                    data: state.rows,
-                                    xAxisKey: dimensionNames[0],
-                                    series: measureNames.map((m) => ({ dataKey: m, label: headerLabel(m), chartType: 'bar' })),
-                                } }) }) }) })), state.rows.length > 0 && (_jsx("div", { className: "overflow-auto max-h-[60vh] rounded-md border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "bg-muted/40", children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { className: "px-2 py-1.5 text-left font-medium whitespace-nowrap", children: headerLabel(c) }, c))) }) }), _jsx("tbody", { children: state.rows.map((row, i) => (_jsx("tr", { className: "border-t", children: columns.map((c) => (_jsx("td", { className: "px-2 py-1 tabular-nums whitespace-nowrap", children: measureNames.includes(c)
+                                    : _jsx(BarChart3, { className: "h-3.5 w-3.5" }), "Run preview"] }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [measureNames.length, " measure", measureNames.length === 1 ? '' : 's', " \u00B7 ", dimensionNames.length, " dimension", dimensionNames.length === 1 ? '' : 's'] })] }), state.status === 'error' && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "break-words", children: state.error })] })), state.status === 'ok' && state.rows.length === 0 && (_jsx(PreviewEmptyState, { icon: _jsx(BarChart3, { className: "h-8 w-8" }), title: "No rows", description: "The dataset returned no rows for the current scope." })), state.rows.length > 0 && dimensionNames.length >= 1 && (_jsx(PreviewErrorBoundary, { fallbackHint: "Couldn't render the chart for this result \u2014 the table below still shows the data.", children: _jsx(React.Suspense, { fallback: _jsx("div", { className: "h-[260px] flex items-center justify-center text-xs text-muted-foreground", children: _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }), children: _jsxs("div", { className: "rounded-md border p-2", children: [_jsx(ChartRenderer, { schema: {
+                                        data: state.rows,
+                                        xAxisKey: dimensionNames[0],
+                                        chartType: mixedScale ? 'combo' : 'bar',
+                                        series: measureNames.map((m) => ({
+                                            dataKey: m,
+                                            label: headerLabel(m),
+                                            chartType: mixedScale ? (isRatioMeasure(m) ? 'line' : 'bar') : 'bar',
+                                        })),
+                                    } }), mixedScale && (_jsxs("p", { className: "mt-1 px-1 text-[10px] text-muted-foreground", children: ["Ratio measures (", ratioMeasures.map(headerLabel).join(', '), ") use the right axis."] }))] }) }) })), state.rows.length > 0 && (_jsx("div", { className: "overflow-auto max-h-[60vh] rounded-md border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "bg-muted/40", children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { className: "px-2 py-1.5 text-left font-medium whitespace-nowrap", children: headerLabel(c) }, c))) }) }), _jsx("tbody", { children: state.rows.map((row, i) => (_jsx("tr", { className: "border-t", children: columns.map((c) => (_jsx("td", { className: "px-2 py-1 tabular-nums whitespace-nowrap", children: measureNames.includes(c)
                                             ? formatMeasure(row[c], measureField(c)?.format, measureField(c)?.currency)
                                             : formatDimensionValue(row[c]) }, c))) }, i))) })] }) }))] }) }));
 }

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

@@ -20,6 +20,7 @@
  */
 import * as React from 'react';
 import { type FlowNode, type FlowEdge } from './flow-canvas-layout';
+import { type FlowProblem } from './flow-problems';
 export interface FlowCanvasProps {
     nodes: FlowNode[];
     edges: FlowEdge[];
@@ -35,9 +36,33 @@ export interface FlowCanvasProps {
     visitedNodeIds?: string[];
     /** Simulation overlay: ids of edges that were traversed. */
     traversedEdgeIds?: string[];
+    /** Structural-validation: node ids to paint with a red error ring. */
+    invalidNodeIds?: string[];
+    /** Structural-validation: edges (keyed `${source}->${target}`) to paint red. */
+    invalidEdges?: ReadonlySet<string>;
+    /**
+     * Select + reveal a problem when its inline-banner row is clicked — wired to
+     * the same handler the Problems panel uses, so the always-visible banner is
+     * actionable without opening the panel.
+     */
+    onRevealProblem?: (problem: FlowProblem) => void;
+    /**
+     * Unified validation issues (structural + server) rendered as per-element
+     * badges; the Problems panel shares the same list.
+     */
+    problems?: FlowProblem[];
+    /**
+     * Imperative "reveal" request from the Problems panel: when `nonce` changes
+     * the canvas pans to center the targeted node/edge. Selection highlight is
+     * driven separately via `selectedId` / `selectedEdgeId`.
+     */
+    revealSignal?: {
+        target: FlowProblem['target'];
+        nonce: number;
+    } | null;
     onSelect: (node: FlowNode | null) => void;
     /** Select an edge (its `edgeKey`), or clear selection with `null`. */
     onSelectEdge?: (edge: FlowEdge | null, key: string) => void;
     onPatch?: (partial: Record<string, unknown>) => void;
 }
-export declare function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;
+export declare function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, onRevealProblem, problems, revealSignal, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;