@sanity/workflow-diagram 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @sanity/workflow-diagram
 
+## 0.3.0
+
+### Minor Changes
+
+- f9389e5: The explain tooltips' activity roster narrates causal waits: an activity that does not complete without a caller shows what it waits on ("Waits on caller action …") under its executor-classification line, on both the static and live tiers.
+- b43de49: elkjs now loads lazily on the first layout instead of riding the package's static import graph. Bundlers split the ~1.4 MB (minified) ELK engine into an async chunk fetched only when a diagram actually renders, cutting the package's synchronous bundle cost by roughly 72% (about 600 KB → 168 KB gzipped on the critical path).
+
+### Patch Changes
+
+- Updated dependencies [f9389e5]
+- Updated dependencies [d0c62ea]
+- Updated dependencies [c3eed2e]
+- Updated dependencies [df4bd80]
+- Updated dependencies [092a0d4]
+- Updated dependencies [5a1a9fe]
+- Updated dependencies [e3a7ba2]
+- Updated dependencies [30fed9e]
+- Updated dependencies [1321ba5]
+- Updated dependencies [e683875]
+- Updated dependencies [a8ace4d]
+  - @sanity/workflow-engine@0.17.0
+
+## 0.2.0
+
+### Minor Changes
+
+- e5f5b77: **BREAKING:** follow the engine's actions-only payload model.
+  - `FlatTransition` follows the engine's pure-edge transition shape: the condition key is `when` (was `filter`), and transitions carry no effects — the dev tooltip's Effects row is gone and its GROQ row is labeled "When".
+  - The explain surface narrates cascade triggers: a `when` action's trigger phrases as a stage gate ("… fires automatically when:") on both tiers — automation, never a button — replacing the deleted `completeWhen`/`failWhen` gates. fireAction filters (button grain) stay off the stage tooltip.
+  - The stage tooltip's explain block gains an activity roster: each activity labeled with its derived executor classification (autonomous / interactive / off-system / hybrid), live from the evaluation on the current stage and derived from the definition elsewhere.
+
+### Patch Changes
+
+- Updated dependencies [11e2d6f]
+- Updated dependencies [7510fd5]
+- Updated dependencies [01e8042]
+- Updated dependencies [79c54db]
+- Updated dependencies [6a46db1]
+- Updated dependencies [35b9b85]
+- Updated dependencies [e5f5b77]
+- Updated dependencies [01e8042]
+  - @sanity/workflow-engine@0.16.0
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -32,15 +32,7 @@ var jsxRuntime = require("react/jsx-runtime");
 
 require("@xyflow/react/dist/style.css");
 
-var ui = require("@sanity/ui"), react$1 = require("@xyflow/react"), react = require("react"), workflowEngine = require("@sanity/workflow-engine"), ELK = require("elkjs/lib/elk.bundled.js"), icons = require("@sanity/icons"), reactDom = require("react-dom");
-
-function _interopDefaultCompat(e) {
-    return e && typeof e == "object" && "default" in e ? e : {
-        default: e
-    };
-}
-
-var ELK__default = /* @__PURE__ */ _interopDefaultCompat(ELK);
+var ui = require("@sanity/ui"), react$1 = require("@xyflow/react"), react = require("react"), workflowEngine = require("@sanity/workflow-engine"), icons = require("@sanity/icons"), reactDom = require("react-dom");
 
 const DevModeContext = react.createContext(!1);
 
@@ -54,6 +46,12 @@ function useHoveredStage() {
     return react.useContext(HoveredStageContext);
 }
 
+function narratedWaits(answer, definition) {
+    return answer.completesWithoutCaller === "yes" ? [] : workflowEngine.narrateAutonomyWaits(answer.waitsOn, {
+        definition: definition
+    }).map(workflowEngine.sentenceCase);
+}
+
 const ExplainContext = react.createContext(void 0);
 
 function useExplain() {
@@ -81,9 +79,19 @@ function indexExplanations(sites, definition) {
             live: !1
         }), byStage.set(site.stage, list);
     }
+    const autonomy = workflowEngine.deriveWorkflowAutonomy(definition), activitiesByStage = new Map(definition.stages.map(stage => {
+        const stageAutonomy = workflowEngine.stageAutonomyOf(autonomy, stage.name);
+        return [ stage.name, (stage.activities ?? []).map(activity => ({
+            name: activity.name,
+            title: activity.title ?? activity.name,
+            classification: workflowEngine.deriveExecutorClassification(activity),
+            waits: narratedWaits(workflowEngine.activityAutonomyOf(stageAutonomy, activity.name), definition)
+        })) ];
+    }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
-        stageGates: stage => byStage.get(stage) ?? []
+        stageGates: stage => byStage.get(stage) ?? [],
+        stageActivities: stage => activitiesByStage.get(stage) ?? []
     };
 }
 
@@ -113,13 +121,11 @@ function indexLiveExplanations(evaluation) {
             activity: activity,
             requirement: requirement
         }, insight);
-        gate({
-            kind: "complete-when",
-            activity: activity
-        }, a.completeWhenInsight), gate({
-            kind: "fail-when",
-            activity: activity
-        }, a.failWhenInsight);
+        for (const action of a.actions) gate({
+            kind: "action-when",
+            activity: activity,
+            action: action.action.name
+        }, action.whenInsight);
     }
     for (const field of evaluation.editableFields) {
         if (field.scope === "workflow") continue;
@@ -135,9 +141,16 @@ function indexLiveExplanations(evaluation) {
         };
         gate(address, field.insight);
     }
+    const activities = evaluation.currentStage.activities.map(a => ({
+        name: a.activity.name,
+        title: a.activity.title ?? a.activity.name,
+        classification: a.classification,
+        waits: narratedWaits(a.autonomy, evaluation.definition)
+    }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
-        stageGates: stage => stage === stageName ? gates : []
+        stageGates: stage => stage === stageName ? gates : [],
+        stageActivities: stage => stage === stageName ? activities : []
     };
 }
 
@@ -147,6 +160,10 @@ function mergeExplainData(live, fallback) {
         stageGates: stage => {
             const gates = live.stageGates(stage);
             return gates.length > 0 ? gates : fallback.stageGates(stage);
+        },
+        stageActivities: stage => {
+            const activities = live.stageActivities(stage);
+            return activities.length > 0 ? activities : fallback.stageActivities(stage);
         }
     };
 }
@@ -352,7 +369,7 @@ function groupEdge(agg, route) {
                 name: "grouped",
                 from: route.from,
                 to: route.to,
-                filter: "true"
+                when: "true"
             },
             wasTraversed: agg.traversed,
             isPrimary: !0,
@@ -551,7 +568,15 @@ function GhostNode({data: data}) {
     });
 }
 
-const DEFAULT_WIDTH = 180, DEFAULT_HEIGHT = 72, elk = new ELK__default.default, STAGE_CHAR_PX = 8.5, STAGE_PAD_X = 16, STAGE_ICON_W = 25, STAGE_PAD_Y = 13, STAGE_LINE_H = 18, STAGE_MAX_TEXT_WIDTH = 150, STAGE_MIN_TEXT_WIDTH = 44;
+let elkLoad;
+
+function loadElk() {
+    return elkLoad ??= import("elkjs/lib/elk.bundled.js").then(mod => new mod.default).catch(err => {
+        throw elkLoad = void 0, err;
+    }), elkLoad;
+}
+
+const STAGE_CHAR_PX = 8.5, STAGE_PAD_X = 16, STAGE_ICON_W = 25, STAGE_PAD_Y = 13, STAGE_LINE_H = 18, STAGE_MAX_TEXT_WIDTH = 150, STAGE_MIN_TEXT_WIDTH = 44;
 
 function wrapStageLabel(title) {
     const words = title.trim().split(/\s+/), lines = [];
@@ -624,9 +649,9 @@ async function layoutGraph(nodes, edges) {
         nodes: [ ...nodes ],
         edges: [ ...edges ]
     };
-    const railNodes = new Set(edges.flatMap(e => edgeFlags(e).isPrimary ? [ e.source, e.target ] : [])), boxOf = new Map(nodes.map(n => [ n.id, {
-        w: n.width ?? DEFAULT_WIDTH,
-        h: n.height ?? DEFAULT_HEIGHT
+    const elk = await loadElk(), railNodes = new Set(edges.flatMap(e => edgeFlags(e).isPrimary ? [ e.source, e.target ] : [])), boxOf = new Map(nodes.map(n => [ n.id, {
+        w: n.width ?? 180,
+        h: n.height ?? 72
     } ])), portMeta = /* @__PURE__ */ new Map, portFor = args => {
         const id = `${args.node}.${args.key}`, list = portMeta.get(args.node) ?? [];
         return list.push({
@@ -677,8 +702,8 @@ async function layoutGraph(nodes, edges) {
         layoutOptions: defaultLayoutOptions(),
         children: nodes.map(n => ({
             id: n.id,
-            width: n.width ?? DEFAULT_WIDTH,
-            height: n.height ?? DEFAULT_HEIGHT,
+            width: n.width ?? 180,
+            height: n.height ?? 72,
             layoutOptions: {
                 ...layerConstraintFor(n).layoutOptions,
                 "elk.portConstraints": constraint
@@ -732,8 +757,8 @@ function faceOffRailPorts(args) {
 function pass1Centers(pass1, boxOf) {
     return new Map((pass1.children ?? []).map(c => {
         const box = boxOf.get(c.id) ?? {
-            w: DEFAULT_WIDTH,
-            h: DEFAULT_HEIGHT
+            w: 180,
+            h: 72
         };
         return [ c.id, {
             cx: (c.x ?? 0) + box.w / 2,
@@ -816,8 +841,8 @@ function pinnedPortPositions(args) {
     for (const child of args.pass1.children ?? []) pinChildPorts(child, {
         meta: args.portMeta.get(child.id) ?? [],
         box: args.boxOf.get(child.id) ?? {
-            w: DEFAULT_WIDTH,
-            h: DEFAULT_HEIGHT
+            w: 180,
+            h: 72
         },
         centers: centers,
         out: out
@@ -1463,14 +1488,40 @@ function MetaTable({rows: rows, description: description, title: title}) {
     });
 }
 
+function ActivityRoster({activities: activities}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Stack, {
+        space: 2,
+        children: activities.map(activity => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
+            space: 1,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+                size: 1,
+                muted: !0,
+                children: [ activity.title, " — ", workflowEngine.EXECUTOR_CLASSIFICATION_DISPLAY[activity.classification].title ]
+            }), activity.waits.map((wait, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                muted: !0,
+                style: {
+                    paddingLeft: 12,
+                    lineHeight: 1.4
+                },
+                children: wait
+            }, i)) ]
+        }, activity.name))
+    });
+}
+
 function StageExplanation({stage: stage}) {
-    const gates = useExplain()?.stageGates(stage) ?? [];
-    if (gates.length === 0) return null;
+    const explain = useExplain(), gates = explain?.stageGates(stage) ?? [], activities = explain?.stageActivities(stage) ?? [];
+    if (gates.length === 0 && activities.length === 0) return null;
     const {shown: shown, overflowNote: overflowNote} = cappedGates(gates);
     /* @__PURE__ */
     return jsxRuntime.jsxs(ui.Stack, {
         space: 3,
-        children: [ shown.map((gate, i) => /* @__PURE__ */ jsxRuntime.jsx(ExplainedGateView, {
+        children: [ activities.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ActivityRoster, {
+            activities: activities
+        }) : null, shown.map((gate, i) => /* @__PURE__ */ jsxRuntime.jsx(ExplainedGateView, {
             gate: gate
         }, i)), overflowNote === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
             size: 1,
@@ -1656,14 +1707,10 @@ function devRows(t) {
         value: t.name,
         mono: !0
     }, {
-        label: "Filter",
-        value: t.filter,
+        label: "When",
+        value: t.when,
         mono: !0
-    }, ...t.effects?.length ? [ {
-        label: "Effects",
-        value: t.effects.map(e => e.name).join(", "),
-        mono: !0
-    } ] : [] ];
+    } ];
 }
 
 const LOCK_SIZE = 18;

package/dist/index.d.cts

@@ -39,8 +39,8 @@ export declare type LocalViewShow = "next" | "previous" | "both";
  * Stage diagram for a workflow definition: stages + transitions laid out
  * left-to-right, current stage highlighted, visited path toned by history.
  * Hovering anywhere along a transition line opens its detail tooltip (title,
- * description; machine name, GROQ filter and effects only in devMode); a
- * gated transition additionally carries a lock marker on the line.
+ * description; machine name and GROQ trigger only in devMode); a gated
+ * transition additionally carries a lock marker on the line.
  */
 export declare function WorkflowDiagram({
   definition,
@@ -85,8 +85,8 @@ export declare interface WorkflowDiagramProps {
   /** Frozen canvas: no pan/zoom, no zoom controls — shows its initial fit.
    *  Tooltips, hover highlight and selection stay live. */
   static?: boolean | undefined;
-  /** Tooling mode: tooltips additionally show machine names, GROQ filters
-   *  and effects. Never on for end users. */
+  /** Tooling mode: tooltips additionally show machine names and raw GROQ
+   *  conditions. Never on for end users. */
   devMode?: boolean | undefined;
   /** Explain the workflow in human language: tooltips gain each gate's
    *  phrased requirements ("«Review decision» must be 'approve'") — derived

package/dist/index.d.ts

@@ -39,8 +39,8 @@ export declare type LocalViewShow = "next" | "previous" | "both";
  * Stage diagram for a workflow definition: stages + transitions laid out
  * left-to-right, current stage highlighted, visited path toned by history.
  * Hovering anywhere along a transition line opens its detail tooltip (title,
- * description; machine name, GROQ filter and effects only in devMode); a
- * gated transition additionally carries a lock marker on the line.
+ * description; machine name and GROQ trigger only in devMode); a gated
+ * transition additionally carries a lock marker on the line.
  */
 export declare function WorkflowDiagram({
   definition,
@@ -85,8 +85,8 @@ export declare interface WorkflowDiagramProps {
   /** Frozen canvas: no pan/zoom, no zoom controls — shows its initial fit.
    *  Tooltips, hover highlight and selection stay live. */
   static?: boolean | undefined;
-  /** Tooling mode: tooltips additionally show machine names, GROQ filters
-   *  and effects. Never on for end users. */
+  /** Tooling mode: tooltips additionally show machine names and raw GROQ
+   *  conditions. Never on for end users. */
   devMode?: boolean | undefined;
   /** Explain the workflow in human language: tooltips gain each gate's
    *  phrased requirements ("«Review decision» must be 'approve'") — derived

package/dist/index.js

@@ -8,9 +8,7 @@ import { MarkerType, getSmoothStepPath, Handle, Position, BaseEdge, EdgeLabelRen
 
 import { createContext, useContext, Fragment, useState, useMemo, useEffect, useRef, useCallback } from "react";
 
-import { sentenceCase, describeSiteHeading, describeCondition, checklistLines, isTerminalStage } from "@sanity/workflow-engine";
-
-import ELK from "elkjs/lib/elk.bundled.js";
+import { sentenceCase, describeSiteHeading, deriveWorkflowAutonomy, stageAutonomyOf, activityAutonomyOf, deriveExecutorClassification, describeCondition, narrateAutonomyWaits, checklistLines, isTerminalStage, EXECUTOR_CLASSIFICATION_DISPLAY } from "@sanity/workflow-engine";
 
 import { CheckmarkCircleIcon, CircleIcon, LockIcon } from "@sanity/icons";
 
@@ -28,6 +26,12 @@ function useHoveredStage() {
     return useContext(HoveredStageContext);
 }
 
+function narratedWaits(answer, definition) {
+    return answer.completesWithoutCaller === "yes" ? [] : narrateAutonomyWaits(answer.waitsOn, {
+        definition: definition
+    }).map(sentenceCase);
+}
+
 const ExplainContext = createContext(void 0);
 
 function useExplain() {
@@ -55,9 +59,19 @@ function indexExplanations(sites, definition) {
             live: !1
         }), byStage.set(site.stage, list);
     }
+    const autonomy = deriveWorkflowAutonomy(definition), activitiesByStage = new Map(definition.stages.map(stage => {
+        const stageAutonomy = stageAutonomyOf(autonomy, stage.name);
+        return [ stage.name, (stage.activities ?? []).map(activity => ({
+            name: activity.name,
+            title: activity.title ?? activity.name,
+            classification: deriveExecutorClassification(activity),
+            waits: narratedWaits(activityAutonomyOf(stageAutonomy, activity.name), definition)
+        })) ];
+    }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
-        stageGates: stage => byStage.get(stage) ?? []
+        stageGates: stage => byStage.get(stage) ?? [],
+        stageActivities: stage => activitiesByStage.get(stage) ?? []
     };
 }
 
@@ -87,13 +101,11 @@ function indexLiveExplanations(evaluation) {
             activity: activity,
             requirement: requirement
         }, insight);
-        gate({
-            kind: "complete-when",
-            activity: activity
-        }, a.completeWhenInsight), gate({
-            kind: "fail-when",
-            activity: activity
-        }, a.failWhenInsight);
+        for (const action of a.actions) gate({
+            kind: "action-when",
+            activity: activity,
+            action: action.action.name
+        }, action.whenInsight);
     }
     for (const field of evaluation.editableFields) {
         if (field.scope === "workflow") continue;
@@ -109,9 +121,16 @@ function indexLiveExplanations(evaluation) {
         };
         gate(address, field.insight);
     }
+    const activities = evaluation.currentStage.activities.map(a => ({
+        name: a.activity.name,
+        title: a.activity.title ?? a.activity.name,
+        classification: a.classification,
+        waits: narratedWaits(a.autonomy, evaluation.definition)
+    }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
-        stageGates: stage => stage === stageName ? gates : []
+        stageGates: stage => stage === stageName ? gates : [],
+        stageActivities: stage => stage === stageName ? activities : []
     };
 }
 
@@ -121,6 +140,10 @@ function mergeExplainData(live, fallback) {
         stageGates: stage => {
             const gates = live.stageGates(stage);
             return gates.length > 0 ? gates : fallback.stageGates(stage);
+        },
+        stageActivities: stage => {
+            const activities = live.stageActivities(stage);
+            return activities.length > 0 ? activities : fallback.stageActivities(stage);
         }
     };
 }
@@ -326,7 +349,7 @@ function groupEdge(agg, route) {
                 name: "grouped",
                 from: route.from,
                 to: route.to,
-                filter: "true"
+                when: "true"
             },
             wasTraversed: agg.traversed,
             isPrimary: !0,
@@ -525,7 +548,15 @@ function GhostNode({data: data}) {
     });
 }
 
-const DEFAULT_WIDTH = 180, DEFAULT_HEIGHT = 72, elk = new ELK, STAGE_CHAR_PX = 8.5, STAGE_PAD_X = 16, STAGE_ICON_W = 25, STAGE_PAD_Y = 13, STAGE_LINE_H = 18, STAGE_MAX_TEXT_WIDTH = 150, STAGE_MIN_TEXT_WIDTH = 44;
+let elkLoad;
+
+function loadElk() {
+    return elkLoad ??= import("elkjs/lib/elk.bundled.js").then(mod => new mod.default).catch(err => {
+        throw elkLoad = void 0, err;
+    }), elkLoad;
+}
+
+const STAGE_CHAR_PX = 8.5, STAGE_PAD_X = 16, STAGE_ICON_W = 25, STAGE_PAD_Y = 13, STAGE_LINE_H = 18, STAGE_MAX_TEXT_WIDTH = 150, STAGE_MIN_TEXT_WIDTH = 44;
 
 function wrapStageLabel(title) {
     const words = title.trim().split(/\s+/), lines = [];
@@ -598,9 +629,9 @@ async function layoutGraph(nodes, edges) {
         nodes: [ ...nodes ],
         edges: [ ...edges ]
     };
-    const railNodes = new Set(edges.flatMap(e => edgeFlags(e).isPrimary ? [ e.source, e.target ] : [])), boxOf = new Map(nodes.map(n => [ n.id, {
-        w: n.width ?? DEFAULT_WIDTH,
-        h: n.height ?? DEFAULT_HEIGHT
+    const elk = await loadElk(), railNodes = new Set(edges.flatMap(e => edgeFlags(e).isPrimary ? [ e.source, e.target ] : [])), boxOf = new Map(nodes.map(n => [ n.id, {
+        w: n.width ?? 180,
+        h: n.height ?? 72
     } ])), portMeta = /* @__PURE__ */ new Map, portFor = args => {
         const id = `${args.node}.${args.key}`, list = portMeta.get(args.node) ?? [];
         return list.push({
@@ -651,8 +682,8 @@ async function layoutGraph(nodes, edges) {
         layoutOptions: defaultLayoutOptions(),
         children: nodes.map(n => ({
             id: n.id,
-            width: n.width ?? DEFAULT_WIDTH,
-            height: n.height ?? DEFAULT_HEIGHT,
+            width: n.width ?? 180,
+            height: n.height ?? 72,
             layoutOptions: {
                 ...layerConstraintFor(n).layoutOptions,
                 "elk.portConstraints": constraint
@@ -706,8 +737,8 @@ function faceOffRailPorts(args) {
 function pass1Centers(pass1, boxOf) {
     return new Map((pass1.children ?? []).map(c => {
         const box = boxOf.get(c.id) ?? {
-            w: DEFAULT_WIDTH,
-            h: DEFAULT_HEIGHT
+            w: 180,
+            h: 72
         };
         return [ c.id, {
             cx: (c.x ?? 0) + box.w / 2,
@@ -790,8 +821,8 @@ function pinnedPortPositions(args) {
     for (const child of args.pass1.children ?? []) pinChildPorts(child, {
         meta: args.portMeta.get(child.id) ?? [],
         box: args.boxOf.get(child.id) ?? {
-            w: DEFAULT_WIDTH,
-            h: DEFAULT_HEIGHT
+            w: 180,
+            h: 72
         },
         centers: centers,
         out: out
@@ -1437,14 +1468,40 @@ function MetaTable({rows: rows, description: description, title: title}) {
     });
 }
 
+function ActivityRoster({activities: activities}) {
+    /* @__PURE__ */
+    return jsx(Stack, {
+        space: 2,
+        children: activities.map(activity => /* @__PURE__ */ jsxs(Stack, {
+            space: 1,
+            children: [ 
+            /* @__PURE__ */ jsxs(Text, {
+                size: 1,
+                muted: !0,
+                children: [ activity.title, " — ", EXECUTOR_CLASSIFICATION_DISPLAY[activity.classification].title ]
+            }), activity.waits.map((wait, i) => /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                muted: !0,
+                style: {
+                    paddingLeft: 12,
+                    lineHeight: 1.4
+                },
+                children: wait
+            }, i)) ]
+        }, activity.name))
+    });
+}
+
 function StageExplanation({stage: stage}) {
-    const gates = useExplain()?.stageGates(stage) ?? [];
-    if (gates.length === 0) return null;
+    const explain = useExplain(), gates = explain?.stageGates(stage) ?? [], activities = explain?.stageActivities(stage) ?? [];
+    if (gates.length === 0 && activities.length === 0) return null;
     const {shown: shown, overflowNote: overflowNote} = cappedGates(gates);
     /* @__PURE__ */
     return jsxs(Stack, {
         space: 3,
-        children: [ shown.map((gate, i) => /* @__PURE__ */ jsx(ExplainedGateView, {
+        children: [ activities.length > 0 ? /* @__PURE__ */ jsx(ActivityRoster, {
+            activities: activities
+        }) : null, shown.map((gate, i) => /* @__PURE__ */ jsx(ExplainedGateView, {
             gate: gate
         }, i)), overflowNote === void 0 ? null : /* @__PURE__ */ jsx(Text, {
             size: 1,
@@ -1630,14 +1687,10 @@ function devRows(t) {
         value: t.name,
         mono: !0
     }, {
-        label: "Filter",
-        value: t.filter,
-        mono: !0
-    }, ...t.effects?.length ? [ {
-        label: "Effects",
-        value: t.effects.map(e => e.name).join(", "),
+        label: "When",
+        value: t.when,
         mono: !0
-    } ] : [] ];
+    } ];
 }
 
 const LOCK_SIZE = 18;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workflow-diagram",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React component rendering a workflow definition as a stage diagram — ELK layered layout, current-stage and visited-path highlighting, transition tooltips on line hover.",
   "keywords": [
     "diagram",
@@ -44,7 +44,7 @@
     "@sanity/icons": "^3.7.7",
     "@xyflow/react": "^12.11.1",
     "elkjs": "^0.11.1",
-    "@sanity/workflow-engine": "0.15.0"
+    "@sanity/workflow-engine": "0.17.0"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^10.5.3",
@@ -58,8 +58,8 @@
     "react-dom": "^19.2.7",
     "vite": "^8.1.2",
     "vitest": "^4.1.8",
-    "@sanity/workflow-engine-test": "0.10.0",
-    "@sanity/workflow-examples": "0.5.0"
+    "@sanity/workflow-engine-test": "0.12.0",
+    "@sanity/workflow-examples": "0.7.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^3.3.0",