@object-ui/app-shell 7.1.0 → 7.3.0

package/dist/views/metadata-admin/previews/flow-problems.js

@@ -0,0 +1,209 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * flow-problems — unify the two flow-validation sources into one flat,
+ * per-element issue list that the canvas badges and the Problems panel both
+ * render.
+ *
+ *   1. `validateFlowDraft` (client, structural): no resolvable entry,
+ *      unreachable nodes, a decision with no default branch, duplicate node
+ *      ids, dangling edges, un-declared cycles.
+ *   2. The server `_diagnostics` already attached to the layered record
+ *      (schema validation), each keyed by a dotted JSON path.
+ *
+ * "Surfacing, not detection": detection already exists. This module only maps
+ * each detected issue onto a concrete canvas element — a node id or a stable
+ * edge key — so a badge can sit on the offending element and a Problems-panel
+ * row can select + reveal it. Flow-level issues (no specific element) are kept
+ * too: listed in the panel, but without a badge.
+ */
+import { validateFlowDraft } from './simulator/flow-sim-validate';
+import { edgeKey } from './flow-canvas-layout';
+import { flowExpressionProblems } from './flow-expr-problems';
+/** Stable `source->target` key matching an edge problem to a rendered edge. */
+export function edgeProblemKey(source, target) {
+    return `${source}->${target}`;
+}
+/** Resolve an edge's selection key (`edgeKey`) from its endpoints. */
+function resolveEdgeKey(edges, source, target) {
+    const idx = edges.findIndex((e) => e.source === source && e.target === target);
+    return idx >= 0 ? edgeKey(edges[idx], idx) : `${source}->${target}#-1`;
+}
+/** Normalize a dotted/array JSON path to segments (numbers stay numeric). */
+function pathSegments(path) {
+    if (Array.isArray(path))
+        return path;
+    if (typeof path !== 'string' || !path)
+        return [];
+    return path.split('.').map((seg) => {
+        const n = Number(seg);
+        return Number.isInteger(n) && String(n) === seg ? n : seg;
+    });
+}
+/**
+ * Map a structural diagnostic's optional anchors (`edge`, `cycle`, `nodeId`)
+ * onto a badge target. A cycle points its badge at the *closing* hop — the edge
+ * the author marks as a back-edge to resolve it — but flags EVERY hop (nodes +
+ * edges) for the red error highlight so the whole loop reads as the problem.
+ */
+function structuralMapping(diag, edges) {
+    if (diag.edge) {
+        const { source, target } = diag.edge;
+        return { target: { kind: 'edge', source, target, edgeKey: resolveEdgeKey(edges, source, target) } };
+    }
+    if (diag.cycle && diag.cycle.length >= 2) {
+        const c = diag.cycle;
+        const source = c[c.length - 2];
+        const target = c[c.length - 1];
+        const nodeIds = [];
+        const hops = [];
+        for (let i = 0; i < c.length - 1; i++) {
+            nodeIds.push(c[i]);
+            hops.push({ source: c[i], target: c[i + 1] });
+        }
+        return {
+            target: { kind: 'edge', source, target, edgeKey: resolveEdgeKey(edges, source, target) },
+            highlight: { nodeIds, edges: hops },
+        };
+    }
+    if (diag.nodeId)
+        return { target: { kind: 'node', nodeId: diag.nodeId } };
+    return { target: { kind: 'flow' } };
+}
+/** Map a server diagnostic's JSON path onto a node/edge/flow target. */
+function serverTarget(path, nodes, edges) {
+    const segs = pathSegments(path);
+    if (segs.length >= 2 && typeof segs[1] === 'number') {
+        const idx = segs[1];
+        if (segs[0] === 'nodes' && nodes[idx]?.id)
+            return { kind: 'node', nodeId: nodes[idx].id };
+        if (segs[0] === 'edges' && edges[idx]) {
+            const e = edges[idx];
+            return { kind: 'edge', source: e.source, target: e.target, edgeKey: edgeKey(e, idx) };
+        }
+    }
+    return { kind: 'flow' };
+}
+/** Short stable token for a target, used in a problem's React key. */
+function targetKey(t) {
+    if (t.kind === 'node')
+        return `n:${t.nodeId}`;
+    if (t.kind === 'edge')
+        return `e:${t.source}->${t.target}`;
+    return 'flow';
+}
+/**
+ * Build the unified problem list from structural validation + server
+ * diagnostics. Errors are listed before warnings; within a level each source
+ * keeps its own emit order (structural before server).
+ */
+export function buildFlowProblems({ nodes, edges, serverDiagnostics, variables }) {
+    const problems = [];
+    const v = validateFlowDraft(nodes, edges);
+    const pushStructural = (level, list) => {
+        list.forEach((diag, i) => {
+            const { target, highlight } = structuralMapping(diag, edges);
+            problems.push({
+                id: `structural:${level}:${i}:${targetKey(target)}`,
+                level,
+                message: diag.message,
+                target,
+                source: 'structural',
+                ...(highlight ? { highlight } : {}),
+            });
+        });
+    };
+    pushStructural('error', v.errors);
+    pushStructural('warning', v.warnings);
+    (serverDiagnostics ?? []).forEach((diag, i) => {
+        const level = diag.severity === 'warning' ? 'warning' : 'error';
+        const target = serverTarget(diag.path, nodes, edges);
+        problems.push({
+            id: `server:${i}:${targetKey(target)}`,
+            level,
+            message: diag.message,
+            target,
+            source: 'server',
+        });
+    });
+    // Client-side EXPRESSION issues (ADR-0032 braces + scope-aware unknown refs),
+    // resolved onto node / edge targets — see flow-expr-problems.
+    flowExpressionProblems({ nodes, edges, variables: variables ?? [] }).forEach((ep, i) => {
+        const target = ep.target.kind === 'edge'
+            ? {
+                kind: 'edge',
+                source: ep.target.source,
+                target: ep.target.target,
+                edgeKey: resolveEdgeKey(edges, ep.target.source, ep.target.target),
+            }
+            : { kind: 'node', nodeId: ep.target.nodeId };
+        problems.push({
+            id: `expression:${ep.level}:${i}:${targetKey(target)}`,
+            level: ep.level,
+            message: ep.message,
+            target,
+            source: 'expression',
+        });
+    });
+    // Errors first so the panel + counts lead with blockers (stable within level).
+    return problems
+        .map((p, i) => [p, i])
+        .sort((a, b) => {
+        if (a[0].level !== b[0].level)
+            return a[0].level === 'error' ? -1 : 1;
+        return a[1] - b[1];
+    })
+        .map(([p]) => p);
+}
+function foldBadge(list) {
+    const level = list.some((p) => p.level === 'error') ? 'error' : 'warning';
+    return { level, title: list.map((p) => p.message).join('\n'), count: list.length };
+}
+/** Group problems into per-node / per-edge badges for the canvas overlay. */
+export function indexProblemBadges(problems) {
+    const nodeLists = new Map();
+    const edgeLists = new Map();
+    for (const p of problems) {
+        if (p.target.kind === 'node') {
+            const l = nodeLists.get(p.target.nodeId) ?? [];
+            l.push(p);
+            nodeLists.set(p.target.nodeId, l);
+        }
+        else if (p.target.kind === 'edge') {
+            const k = edgeProblemKey(p.target.source, p.target.target);
+            const l = edgeLists.get(k) ?? [];
+            l.push(p);
+            edgeLists.set(k, l);
+        }
+    }
+    const byNode = new Map();
+    for (const [id, list] of nodeLists)
+        byNode.set(id, foldBadge(list));
+    const byEdge = new Map();
+    for (const [k, list] of edgeLists)
+        byEdge.set(k, foldBadge(list));
+    return { byNode, byEdge };
+}
+/**
+ * Error elements to paint with the red ring/stroke, derived from the unified
+ * problem list. ERRORS ONLY — warnings get an amber badge but no ring. Includes
+ * each error's `highlight` set, so a cycle paints its whole loop (every hop node
+ * + edge) red while its badge still sits on the closing edge. Lets the preview
+ * derive the red sets from `problems` instead of a second validateFlowDraft pass.
+ */
+export function deriveInvalidElements(problems) {
+    const nodeSet = new Set();
+    const edgeSet = new Set();
+    for (const p of problems) {
+        if (p.level !== 'error')
+            continue;
+        if (p.target.kind === 'node')
+            nodeSet.add(p.target.nodeId);
+        else if (p.target.kind === 'edge')
+            edgeSet.add(edgeProblemKey(p.target.source, p.target.target));
+        for (const id of p.highlight?.nodeIds ?? [])
+            nodeSet.add(id);
+        for (const e of p.highlight?.edges ?? [])
+            edgeSet.add(edgeProblemKey(e.source, e.target));
+    }
+    return { invalidNodeIds: [...nodeSet], invalidEdges: edgeSet };
+}

package/dist/views/metadata-admin/previews/simulator/flow-sim-types.d.ts

@@ -80,7 +80,16 @@ export interface SimState {
 export type DiagnosticLevel = 'error' | 'warning';
 export interface Diagnostic {
     level: DiagnosticLevel;
+    /** The node this diagnostic points at (for an inline badge + click-to-reveal). */
     nodeId?: string;
+    /**
+     * The edge this diagnostic points at (e.g. a dangling endpoint). Carries the
+     * endpoints so the designer can key the inline badge by `source->target`.
+     */
+    edge?: {
+        source: string;
+        target: string;
+    };
     message: string;
     /**
      * For a cycle error: the node path that closes the loop (e.g. `['a','b','a']`),

package/dist/views/metadata-admin/previews/simulator/flow-sim-validate.js

@@ -101,10 +101,12 @@ export function validateFlowDraft(nodes, edges) {
         idSet.add(id);
     }
     for (const e of edges) {
+        // Attach the endpoints so a dangling-edge error can badge the offending
+        // connection on the canvas (not just appear as a flow-level message).
         if (!idSet.has(e.source))
-            errors.push({ level: 'error', message: `Edge source "${e.source}" does not exist.` });
+            errors.push({ level: 'error', edge: { source: e.source, target: e.target }, message: `Edge source "${e.source}" does not exist.` });
         if (!idSet.has(e.target))
-            errors.push({ level: 'error', message: `Edge target "${e.target}" does not exist.` });
+            errors.push({ level: 'error', edge: { source: e.source, target: e.target }, message: `Edge target "${e.target}" does not exist.` });
     }
     // Entry resolution: prefer an explicit `start` node, else a node with no
     // incoming edge. Zero or many → the author must fix it before running.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -33,36 +33,36 @@
     "qrcode": "^1.5.4",
     "sonner": "^2.0.7",
     "zod": "^4.4.3",
-    "@object-ui/auth": "7.1.0",
-    "@object-ui/collaboration": "7.1.0",
-    "@object-ui/components": "7.1.0",
-    "@object-ui/core": "7.1.0",
-    "@object-ui/data-objectstack": "7.1.0",
-    "@object-ui/fields": "7.1.0",
-    "@object-ui/i18n": "7.1.0",
-    "@object-ui/layout": "7.1.0",
-    "@object-ui/permissions": "7.1.0",
-    "@object-ui/plugin-editor": "7.1.0",
-    "@object-ui/providers": "7.1.0",
-    "@object-ui/react": "7.1.0",
-    "@object-ui/types": "7.1.0"
+    "@object-ui/auth": "7.3.0",
+    "@object-ui/collaboration": "7.3.0",
+    "@object-ui/components": "7.3.0",
+    "@object-ui/core": "7.3.0",
+    "@object-ui/fields": "7.3.0",
+    "@object-ui/data-objectstack": "7.3.0",
+    "@object-ui/i18n": "7.3.0",
+    "@object-ui/layout": "7.3.0",
+    "@object-ui/permissions": "7.3.0",
+    "@object-ui/plugin-editor": "7.3.0",
+    "@object-ui/providers": "7.3.0",
+    "@object-ui/react": "7.3.0",
+    "@object-ui/types": "7.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^7.1.0",
-    "@object-ui/plugin-charts": "^7.1.0",
-    "@object-ui/plugin-chatbot": "^7.1.0",
-    "@object-ui/plugin-dashboard": "^7.1.0",
-    "@object-ui/plugin-designer": "^7.1.0",
-    "@object-ui/plugin-detail": "^7.1.0",
-    "@object-ui/plugin-form": "^7.1.0",
-    "@object-ui/plugin-grid": "^7.1.0",
-    "@object-ui/plugin-kanban": "^7.1.0",
-    "@object-ui/plugin-list": "^7.1.0",
-    "@object-ui/plugin-report": "^7.1.0",
-    "@object-ui/plugin-view": "^7.1.0"
+    "@object-ui/plugin-calendar": "^7.3.0",
+    "@object-ui/plugin-chatbot": "^7.3.0",
+    "@object-ui/plugin-charts": "^7.3.0",
+    "@object-ui/plugin-dashboard": "^7.3.0",
+    "@object-ui/plugin-designer": "^7.3.0",
+    "@object-ui/plugin-detail": "^7.3.0",
+    "@object-ui/plugin-form": "^7.3.0",
+    "@object-ui/plugin-kanban": "^7.3.0",
+    "@object-ui/plugin-grid": "^7.3.0",
+    "@object-ui/plugin-list": "^7.3.0",
+    "@object-ui/plugin-report": "^7.3.0",
+    "@object-ui/plugin-view": "^7.3.0"
   },
   "devDependencies": {
     "@types/node": "^26.0.0",
@@ -75,18 +75,18 @@
     "sonner": "^2.0.7",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
-    "@object-ui/plugin-calendar": "7.1.0",
-    "@object-ui/plugin-charts": "7.1.0",
-    "@object-ui/plugin-chatbot": "7.1.0",
-    "@object-ui/plugin-dashboard": "7.1.0",
-    "@object-ui/plugin-designer": "7.1.0",
-    "@object-ui/plugin-detail": "7.1.0",
-    "@object-ui/plugin-form": "7.1.0",
-    "@object-ui/plugin-grid": "7.1.0",
-    "@object-ui/plugin-kanban": "7.1.0",
-    "@object-ui/plugin-list": "7.1.0",
-    "@object-ui/plugin-report": "7.1.0",
-    "@object-ui/plugin-view": "7.1.0"
+    "@object-ui/plugin-calendar": "7.3.0",
+    "@object-ui/plugin-charts": "7.3.0",
+    "@object-ui/plugin-chatbot": "7.3.0",
+    "@object-ui/plugin-dashboard": "7.3.0",
+    "@object-ui/plugin-designer": "7.3.0",
+    "@object-ui/plugin-detail": "7.3.0",
+    "@object-ui/plugin-form": "7.3.0",
+    "@object-ui/plugin-grid": "7.3.0",
+    "@object-ui/plugin-kanban": "7.3.0",
+    "@object-ui/plugin-list": "7.3.0",
+    "@object-ui/plugin-report": "7.3.0",
+    "@object-ui/plugin-view": "7.3.0"
   },
   "keywords": [
     "objectui",