@sanity/workflow-diagram 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @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

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,11 +79,15 @@ function indexExplanations(sites, definition) {
             live: !1
         }), byStage.set(site.stage, list);
     }
-    const activitiesByStage = new Map(definition.stages.map(stage => [ stage.name, (stage.activities ?? []).map(activity => ({
-        name: activity.name,
-        title: activity.title ?? activity.name,
-        classification: workflowEngine.deriveExecutorClassification(activity)
-    })) ]));
+    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) ?? [],
@@ -142,7 +144,8 @@ function indexLiveExplanations(evaluation) {
     const activities = evaluation.currentStage.activities.map(a => ({
         name: a.activity.name,
         title: a.activity.title ?? a.activity.name,
-        classification: a.classification
+        classification: a.classification,
+        waits: narratedWaits(a.autonomy, evaluation.definition)
     }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
@@ -565,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 = [];
@@ -638,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({
@@ -691,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
@@ -746,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,
@@ -830,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
@@ -1481,10 +1492,22 @@ function ActivityRoster({activities: activities}) {
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Stack, {
         space: 2,
-        children: activities.map(activity => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
-            size: 1,
-            muted: !0,
-            children: [ activity.title, " — ", workflowEngine.EXECUTOR_CLASSIFICATION_DISPLAY[activity.classification].title ]
+        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))
     });
 }

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, deriveExecutorClassification, describeCondition, checklistLines, isTerminalStage, EXECUTOR_CLASSIFICATION_DISPLAY } 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,11 +59,15 @@ function indexExplanations(sites, definition) {
             live: !1
         }), byStage.set(site.stage, list);
     }
-    const activitiesByStage = new Map(definition.stages.map(stage => [ stage.name, (stage.activities ?? []).map(activity => ({
-        name: activity.name,
-        title: activity.title ?? activity.name,
-        classification: deriveExecutorClassification(activity)
-    })) ]));
+    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) ?? [],
@@ -116,7 +124,8 @@ function indexLiveExplanations(evaluation) {
     const activities = evaluation.currentStage.activities.map(a => ({
         name: a.activity.name,
         title: a.activity.title ?? a.activity.name,
-        classification: a.classification
+        classification: a.classification,
+        waits: narratedWaits(a.autonomy, evaluation.definition)
     }));
     return {
         transition: (stage, name) => transitions.get(`${stage}#${name}`),
@@ -539,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 = [];
@@ -612,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({
@@ -665,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
@@ -720,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,
@@ -804,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
@@ -1455,10 +1472,22 @@ function ActivityRoster({activities: activities}) {
     /* @__PURE__ */
     return jsx(Stack, {
         space: 2,
-        children: activities.map(activity => /* @__PURE__ */ jsxs(Text, {
-            size: 1,
-            muted: !0,
-            children: [ activity.title, " — ", EXECUTOR_CLASSIFICATION_DISPLAY[activity.classification].title ]
+        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))
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workflow-diagram",
-  "version": "0.2.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.16.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.11.0",
-    "@sanity/workflow-examples": "0.6.0"
+    "@sanity/workflow-engine-test": "0.12.0",
+    "@sanity/workflow-examples": "0.7.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^3.3.0",