@cyoda/workflow-viewer 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,7 @@
 # `@cyoda/workflow-viewer`
 
-Read-only SVG workflow viewer for rendering Cyoda workflow graphs in React
-applications.
+Slim read-only SVG viewer for Cyoda workflow graphs. No React Flow, no
+Monaco, no editor-only dependencies.
 
 ## Install
 
@@ -9,17 +9,68 @@ applications.
 npm install @cyoda/workflow-core @cyoda/workflow-graph @cyoda/workflow-viewer react react-dom
 ```
 
-## Highlights
+## Usage
 
-- Render workflow graphs as lightweight SVG
-- Support selection, pan, and zoom interactions
-- Expose theme tokens for consumer customization
+```tsx
+import { parseImportPayload } from "@cyoda/workflow-core";
+import { projectToGraph } from "@cyoda/workflow-graph";
+import { WorkflowViewer } from "@cyoda/workflow-viewer";
+
+const { document } = parseImportPayload(workflowJson);
+
+export function Embed() {
+  return (
+    <WorkflowViewer
+      graph={projectToGraph(document)}
+      width="100%"
+      height={600}
+      onSelectionChange={(id) => console.log("selected", id)}
+    />
+  );
+}
+```
+
+## Optional ELK layout
+
+```tsx
+import { layoutGraph } from "@cyoda/workflow-layout";
+
+const layout = await layoutGraph(graph, { preset: "configuratorReadable" });
+<WorkflowViewer graph={graph} layout={layout} />
+```
+
+Without a `layout` prop the viewer uses its own simple fallback layout.
+
+## What this package provides
+
+- SVG rendering of states and transitions using Cyoda visual conventions
+  (initial marker, terminal pill, role-coloured borders, dashed loopbacks,
+  manual/disabled/criteria/processor badges).
+- Pan and zoom via mouse drag and Ctrl+wheel.
+- Click-to-select; selection value is the synthetic node UUID.
+- Theme tokens from `@cyoda/workflow-viewer/theme` (override via CSS
+  custom properties).
+
+## What this package does NOT provide
+
+- No drag-connect, delete, or edit affordances — use `@cyoda/workflow-react`.
+- No JSON editor — pair with `@cyoda/workflow-monaco`.
+- No React Flow — this package is intentionally free of React Flow to keep
+  the display-only bundle small.
+- No editor metadata (layout positions, comments) — those live in
+  `@cyoda/workflow-core`'s `WorkflowUiMeta` and are managed by the editor
+  shell, not the viewer.
+
+## Bundle boundary guarantee
+
+`@cyoda/workflow-viewer` depends only on `@cyoda/workflow-graph` and React.
+It has no dependency on `@cyoda/workflow-react`, `@cyoda/workflow-layout`,
+`@cyoda/workflow-monaco`, or `reactflow`. This boundary is enforced by
+the package manifest and verified in the bundle audit.
 
 ## Documentation
 
-See the
-[repository README](https://github.com/Cyoda-platform/cyoda-workflow-editor#readme)
-for package relationships, usage examples, and release notes.
+See the [repository README](https://github.com/Cyoda-platform/cyoda-workflow-editor#readme).
 
 ## License
 

package/dist/index.cjs

@@ -27,6 +27,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/WorkflowViewer.tsx
 var import_react2 = require("react");
+var import_workflow_graph = require("@cyoda/workflow-graph");
 
 // src/theme/tokens.ts
 var workflowPalette = {
@@ -152,6 +153,29 @@ function simpleLayout(graph) {
   }
   return { positions, width: maxWidth + 24, height: yCursor };
 }
+function nudgeLabels(items) {
+  const sorted = [...items].sort((a, b) => a.midX - b.midX || a.midY - b.midY);
+  const placed = [];
+  const result = /* @__PURE__ */ new Map();
+  for (const item of sorted) {
+    const { midX } = item;
+    let { midY } = item;
+    const halfW = item.pillW / 2;
+    const halfH = item.pillH / 2;
+    let attempts = 0;
+    while (attempts < 20) {
+      const overlaps = placed.some(
+        (p) => midX + halfW > p.x - p.w / 2 && midX - halfW < p.x + p.w / 2 && midY + halfH > p.y - p.h / 2 && midY - halfH < p.y + p.h / 2
+      );
+      if (!overlaps) break;
+      midY += item.pillH + 4;
+      attempts++;
+    }
+    placed.push({ x: midX, y: midY, w: item.pillW, h: item.pillH });
+    result.set(item.id, { midX, midY });
+  }
+  return result;
+}
 function groupByWorkflow(nodes) {
   const out = /* @__PURE__ */ new Map();
   for (const n of nodes) {
@@ -272,8 +296,7 @@ function laneColor(edge, opts) {
   return e.automated;
 }
 function laneDashArray(edge) {
-  if (edge.disabled) return "3 2";
-  if (edge.isLoopback) return "6 4";
+  if (edge.manual) return "2 4";
   return void 0;
 }
 
@@ -288,9 +311,9 @@ function polylineToPath(points) {
 }
 function computeEdgeGeometry(edge, source, target) {
   const sx = source.x + source.width / 2;
-  const sy = source.y + source.height / 2;
+  const sy = source.y + source.height;
   const tx = target.x + target.width / 2;
-  const ty = target.y + target.height / 2;
+  const ty = target.y;
   if (edge.isSelf) {
     const rightX = source.x + source.width;
     const topY = source.y + source.height / 3;
@@ -326,7 +349,6 @@ function EdgePath({
   const d = route && route.points.length >= 2 ? polylineToPath(route.points) : computeEdgeGeometry(edge, source, target).d;
   const strokeWidth = selected || highlighted ? geometry.edge.strokeWidth + 0.8 : edge.isLoopback ? geometry.edge.loopStrokeWidth : geometry.edge.strokeWidth;
   const opacity = dimmed ? 0.25 : 1;
-  const isManualSolid = edge.manual && !edge.disabled && !edge.isLoopback;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "g",
     {
@@ -351,16 +373,6 @@ function EdgePath({
             strokeDasharray: dash,
             markerEnd: `url(#wf-arrow-${colorKey(color)})`
           }
-        ),
-        isManualSolid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d,
-            fill: "none",
-            stroke: workflowPalette.neutrals.white,
-            strokeWidth: 0.6,
-            pointerEvents: "none"
-          }
         )
       ]
     }
@@ -449,6 +461,7 @@ function StartMarker({ position }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "circle",
     {
+      "data-testid": "start-marker",
       cx,
       cy,
       r,
@@ -464,7 +477,7 @@ function roleCategoryLabel(node) {
   if (node.role === "initial" || node.role === "initial-terminal") return "INITIAL";
   if (node.role === "terminal") return "TERMINAL";
   if (node.category === "MANUAL_REVIEW") return "MANUAL REVIEW";
-  if (node.category === "PROCESSING_STATE") return "PROCESSING STATE";
+  if (node.category === "PROCESSING_STATE") return "PROCESSING";
   return "STATE";
 }
 
@@ -481,7 +494,6 @@ function paletteFor(node) {
 // src/theme/badges.ts
 function badgesFor(summary, flags) {
   const out = [];
-  if (flags.manual) out.push({ key: "manual", label: "Manual" });
   if (summary.processor) {
     if (summary.processor.kind === "single") {
       out.push({ key: "processor", label: summary.processor.name });
@@ -497,11 +509,6 @@ function badgesFor(summary, flags) {
       out.push({ key: "criterion", label: "Criterion" });
     }
   }
-  if (summary.execution?.kind === "sync") {
-    out.push({ key: "execution", label: "SYNC" });
-  } else if (summary.execution?.kind === "asyncSameTx") {
-    out.push({ key: "execution", label: "ASYNC_SAME_TX" });
-  }
   if (flags.disabled) out.push({ key: "disabled", label: "Disabled" });
   return out;
 }
@@ -745,25 +752,47 @@ function pickBadgePalette(key) {
 // src/components/WorkflowViewer.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function WorkflowViewer({
-  graph,
+  graph: graphInput,
+  document,
   layout,
   width = "100%",
   height = "100%",
   selectedId,
   onSelectionChange,
+  surface = "website",
+  layoutMode,
+  viewerLayout,
+  interaction = "hover-highlight",
+  onInspect,
+  showStartMarker = false,
   className
 }) {
+  const graph = (0, import_react2.useMemo)(() => {
+    if (graphInput) return graphInput;
+    if (document) return (0, import_workflow_graph.projectToGraph)(document);
+    throw new Error("WorkflowViewer requires either graph or document.");
+  }, [graphInput, document]);
+  const visibleGraph = (0, import_react2.useMemo)(() => {
+    if (showStartMarker) return graph;
+    return {
+      ...graph,
+      nodes: graph.nodes.filter((node) => node.kind !== "startMarker"),
+      edges: graph.edges.filter((edge) => edge.kind !== "startMarker")
+    };
+  }, [graph, showStartMarker]);
+  const graphLayout = typeof layout === "string" ? void 0 : layout;
+  const productLayout = viewerLayout ?? layoutMode ?? (typeof layout === "string" ? layout : void 0) ?? "embedded";
   const effectiveLayout = (0, import_react2.useMemo)(
-    () => layout ?? simpleLayout(graph),
-    [graph, layout]
+    () => normalizeLayoutForVisibleGraph(graphLayout, visibleGraph) ?? simpleLayout(visibleGraph),
+    [graphLayout, visibleGraph]
   );
   const pan = usePanZoom();
   const [internalSelection, setInternalSelection] = (0, import_react2.useState)(null);
   const [hovered, setHovered] = (0, import_react2.useState)(null);
   const selection = selectedId ?? internalSelection;
   const stateNodes = (0, import_react2.useMemo)(
-    () => graph.nodes.filter((n) => n.kind === "state"),
-    [graph.nodes]
+    () => visibleGraph.nodes.filter((n) => n.kind === "state"),
+    [visibleGraph.nodes]
   );
   const stateById = (0, import_react2.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
@@ -771,22 +800,71 @@ function WorkflowViewer({
     return m;
   }, [stateNodes]);
   const transitionEdges = (0, import_react2.useMemo)(
-    () => graph.edges.filter((e) => e.kind === "transition"),
-    [graph.edges]
-  );
-  const highlightSet = (0, import_react2.useMemo)(
-    () => computeHighlightSet(hovered ?? selection, graph.nodes, graph.edges),
-    [hovered, selection, graph.nodes, graph.edges]
+    () => visibleGraph.edges.filter((e) => e.kind === "transition"),
+    [visibleGraph.edges]
   );
+  (0, import_react2.useEffect)(() => {
+    if (process.env.NODE_ENV === "production" || graphLayout) return;
+    const sourceCounts = /* @__PURE__ */ new Map();
+    for (const e of graph.edges) {
+      if (e.kind !== "transition") continue;
+      sourceCounts.set(e.sourceId, (sourceCounts.get(e.sourceId) ?? 0) + 1);
+    }
+    if ([...sourceCounts.values()].some((n) => n > 1)) {
+      console.warn(
+        "[WorkflowViewer] Rendering without an ELK layout \u2014 branching graphs may not look polished. Pass a layout from `layoutGraph()` (@cyoda/workflow-layout) for best results."
+      );
+    }
+  }, [graphLayout, visibleGraph.edges]);
+  const fallbackLabelPositions = (0, import_react2.useMemo)(() => {
+    if (effectiveLayout.edges) return null;
+    const CHAR_W = 6.5;
+    const PILL_H = 24;
+    const items = transitionEdges.flatMap((edge) => {
+      const source = effectiveLayout.positions.get(edge.sourceId);
+      const target = effectiveLayout.positions.get(edge.targetId);
+      if (!source || !target) return [];
+      const { midX, midY } = computeEdgeGeometry(edge, source, target);
+      const pillW = Math.max(40, edge.summary.display.length * CHAR_W + 12);
+      return [{ id: edge.id, midX, midY, pillW, pillH: PILL_H }];
+    });
+    return nudgeLabels(items);
+  }, [effectiveLayout, transitionEdges]);
+  const focusId = hovered ?? selection;
+  const highlightSet = (0, import_react2.useMemo)(() => {
+    if (interaction === "none") return null;
+    if (interaction === "select") {
+      return (0, import_workflow_graph.computeHighlightSet)(selection, visibleGraph.nodes, visibleGraph.edges);
+    }
+    return (0, import_workflow_graph.computeHighlightSet)(focusId, visibleGraph.nodes, visibleGraph.edges);
+  }, [interaction, focusId, selection, visibleGraph.nodes, visibleGraph.edges]);
   const anythingFocused = highlightSet !== null;
   const handleSelect = (id) => {
+    if (interaction === "none") return;
     setInternalSelection(id);
     onSelectionChange?.(id);
   };
   const handleBackgroundClick = () => {
+    if (interaction === "none") return;
     setInternalSelection(null);
     onSelectionChange?.(null);
   };
+  const handleHoverEnter = (id) => {
+    if (interaction === "hover-highlight" || interaction === "hover-path") {
+      setHovered(id);
+    }
+    if (interaction === "hover-path") {
+      onInspect?.((0, import_workflow_graph.inspectGraphFocus)(visibleGraph, id));
+    }
+  };
+  const handleHoverLeave = () => {
+    if (interaction === "hover-highlight" || interaction === "hover-path") {
+      setHovered(null);
+    }
+    if (interaction === "hover-path") {
+      onInspect?.(null);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "svg",
     {
@@ -804,8 +882,12 @@ function WorkflowViewer({
       style: {
         background: workflowPalette.neutrals.white,
         fontFamily: "inherit",
-        userSelect: "none"
+        userSelect: "none",
+        ...productLayout === "fullWidth" ? { display: "block", width: "100%", height: "100%" } : null
       },
+      "data-surface": surface,
+      "data-layout": productLayout,
+      "data-interaction": interaction,
       "data-testid": "workflow-viewer",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Defs, {}),
@@ -835,8 +917,8 @@ function WorkflowViewer({
                     dimmed: isDimmed,
                     selected: isEdgeSelected,
                     onSelect: handleSelect,
-                    onHoverEnter: setHovered,
-                    onHoverLeave: () => setHovered(null)
+                    onHoverEnter: handleHoverEnter,
+                    onHoverLeave: handleHoverLeave
                   },
                   edge.id
                 );
@@ -846,7 +928,7 @@ function WorkflowViewer({
                 const target = effectiveLayout.positions.get(edge.targetId);
                 if (!source || !target) return null;
                 const route = effectiveLayout.edges?.get(edge.id);
-                const labelPos = route ? { midX: route.labelX, midY: route.labelY } : computeEdgeGeometry(edge, source, target);
+                const labelPos = route ? { midX: route.labelX, midY: route.labelY } : fallbackLabelPositions?.get(edge.id) ?? computeEdgeGeometry(edge, source, target);
                 const isHighlighted = highlightSet?.has(edge.id) ?? false;
                 const isDimmed = anythingFocused && !isHighlighted;
                 return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -862,13 +944,13 @@ function WorkflowViewer({
                   `label-${edge.id}`
                 );
               }),
-              graph.nodes.map((node) => renderNode(node, effectiveLayout, {
+              visibleGraph.nodes.map((node) => renderNode(node, effectiveLayout, {
                 selection,
                 highlightSet,
                 anythingFocused,
                 onSelect: handleSelect,
-                onHoverEnter: setHovered,
-                onHoverLeave: () => setHovered(null)
+                onHoverEnter: handleHoverEnter,
+                onHoverLeave: handleHoverLeave
               }))
             ]
           }
@@ -877,6 +959,30 @@ function WorkflowViewer({
     }
   );
 }
+function normalizeLayoutForVisibleGraph(layout, graph) {
+  if (!layout) return void 0;
+  const visibleNodeIds = new Set(graph.nodes.map((node) => node.id));
+  const positions = new Map(
+    Array.from(layout.positions.entries()).filter(([nodeId]) => visibleNodeIds.has(nodeId))
+  );
+  const visibleEdgeIds = new Set(graph.edges.map((edge) => edge.id));
+  const edges = layout.edges ? new Map(Array.from(layout.edges.entries()).filter(([edgeId]) => visibleEdgeIds.has(edgeId))) : void 0;
+  return {
+    ...layout,
+    positions,
+    edges,
+    width: computeLayoutBound(positions, "x"),
+    height: computeLayoutBound(positions, "y")
+  };
+}
+function computeLayoutBound(positions, axis) {
+  let max = 0;
+  for (const position of positions.values()) {
+    const bound = axis === "x" ? position.x + position.width : position.y + position.height;
+    if (bound > max) max = bound;
+  }
+  return Math.max(max + 24, 72);
+}
 function renderNode(node, layout, ctx) {
   const pos = layout.positions.get(node.id);
   if (!pos) return null;
@@ -910,29 +1016,6 @@ function smallPositionForMarker(pos) {
     height: size
   };
 }
-function computeHighlightSet(focusedId, nodes, edges) {
-  if (!focusedId) return null;
-  const set = /* @__PURE__ */ new Set();
-  set.add(focusedId);
-  const node = nodes.find((n) => n.id === focusedId);
-  if (node) {
-    for (const e of edges) {
-      if (e.kind !== "transition") continue;
-      if (e.sourceId === focusedId || e.targetId === focusedId) {
-        set.add(e.id);
-        set.add(e.sourceId);
-        set.add(e.targetId);
-      }
-    }
-    return set;
-  }
-  const edge = edges.find((e) => e.id === focusedId);
-  if (edge && edge.kind === "transition") {
-    set.add(edge.sourceId);
-    set.add(edge.targetId);
-  }
-  return set;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WorkflowViewer,