@sanity/workflow-diagram 0.0.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,78 @@
+# @sanity/workflow-diagram
+
+## 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
+
+- bae7eb8: An opt-in `explain` prop phrases the workflow in human language: transition tooltips gain the filter's requirements under a "Transitions when:" lead-in (the title line above already names the transition), and stage tooltips list the stage-altitude gates (activity visibility/requirements/auto-completion, stage- and activity-scope field editability — never per-action button filters, and grouped glance edges keep listing titles only). Derived from the definition alone (no instance required) via the engine's describe surface, loaded on demand so non-explain consumers don't bundle the GROQ evaluator; no verdict marks in this static tier — a checklist with no instance has nothing to judge.
+
+  A live tier on top: pass the engine's `evaluation` alongside `explain` and the current stage's tooltips upgrade to real ✓/✗/? verdicts phrased from the evaluation's insight — synchronously, since the insight is pre-computed. Everywhere the evaluation doesn't speak (every other stage) falls back to the static tier's neutral bullets.
+
+- 409f551: New package: renders a workflow definition as a stage diagram. ELK layered layout with `@xyflow/react` rendering; the primary rail follows the workflow's spine (longest simple path — authored transition order encodes engine precedence, not prominence); current-stage and visited-path highlighting from instance history; gated transitions carry a lock marker; tooltips open on hover anywhere along a line (title, description, and dev-mode machinery). Ships a local neighborhood view (`next` / `previous` / `both`), a grouped glance mode (`[N stages] → current → [M stages]` with click-to-expand), a static frozen mode, and a content-hugging canvas that centers itself when the graph is smaller than its box.
+
+### Patch Changes
+
+- Updated dependencies [4ca17bb]
+- Updated dependencies [5143707]
+- Updated dependencies [0709ab1]
+- Updated dependencies [6bbf3ca]
+- Updated dependencies [9f5a40f]
+- Updated dependencies [d192d68]
+- Updated dependencies [6c21009]
+- Updated dependencies [109f900]
+- Updated dependencies [109f900]
+- Updated dependencies [444b0e6]
+- Updated dependencies [2511bb5]
+- Updated dependencies [d4fd8e6]
+- Updated dependencies [30ed0e8]
+- Updated dependencies [2834704]
+- Updated dependencies [2511bb5]
+- Updated dependencies [2511bb5]
+- Updated dependencies [2511bb5]
+- Updated dependencies [4607d59]
+- Updated dependencies [52f6024]
+- Updated dependencies [a8f1cb9]
+- Updated dependencies [adf32f7]
+- Updated dependencies [5cb0850]
+- Updated dependencies [70a136c]
+- Updated dependencies [91540de]
+- Updated dependencies [8455fbb]
+- Updated dependencies [325c2d1]
+- Updated dependencies [d6e92ed]
+- Updated dependencies [6c21009]
+- Updated dependencies [7ffdc77]
+- Updated dependencies [325c2d1]
+- Updated dependencies [7ffdc77]
+- Updated dependencies [ced40e4]
+- Updated dependencies [9b1b40d]
+- Updated dependencies [8c319b2]
+- Updated dependencies [dc64968]
+- Updated dependencies [23cf131]
+- Updated dependencies [d192d68]
+- Updated dependencies [15337f1]
+- Updated dependencies [2d1a8e1]
+- Updated dependencies [12cdbd6]
+- Updated dependencies [437b544]
+- Updated dependencies [ced40e4]
+  - @sanity/workflow-engine@0.15.0

package/dist/index.cjs

@@ -81,9 +81,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)
+    })) ]));
     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 +119,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 +139,15 @@ 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
+    }));
     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 +157,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 +366,7 @@ function groupEdge(agg, route) {
                 name: "grouped",
                 from: route.from,
                 to: route.to,
-                filter: "true"
+                when: "true"
             },
             wasTraversed: agg.traversed,
             isPrimary: !0,
@@ -1463,14 +1477,28 @@ 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.Text, {
+            size: 1,
+            muted: !0,
+            children: [ activity.title, " — ", workflowEngine.EXECUTOR_CLASSIFICATION_DISPLAY[activity.classification].title ]
+        }, 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 +1684,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,7 +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 { sentenceCase, describeSiteHeading, deriveExecutorClassification, describeCondition, checklistLines, isTerminalStage, EXECUTOR_CLASSIFICATION_DISPLAY } from "@sanity/workflow-engine";
 
 import ELK from "elkjs/lib/elk.bundled.js";
 
@@ -55,9 +55,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)
+    })) ]));
     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 +93,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 +113,15 @@ 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
+    }));
     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 +131,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 +340,7 @@ function groupEdge(agg, route) {
                 name: "grouped",
                 from: route.from,
                 to: route.to,
-                filter: "true"
+                when: "true"
             },
             wasTraversed: agg.traversed,
             isPrimary: !0,
@@ -1437,14 +1451,28 @@ function MetaTable({rows: rows, description: description, title: title}) {
     });
 }
 
+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 ]
+        }, 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 +1658,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workflow-diagram",
-  "version": "0.0.0",
+  "version": "0.2.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.14.0"
+    "@sanity/workflow-engine": "0.16.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.9.0",
-    "@sanity/workflow-examples": "0.4.0"
+    "@sanity/workflow-engine-test": "0.11.0",
+    "@sanity/workflow-examples": "0.6.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^3.3.0",