@industry-theme/principal-view-panels 0.12.71 → 0.12.73

package/dist/panels/CanvasEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAkCrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAknD9D,CAAC"}
+{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAA+C,MAAM,mCAAmC,CAAC;AAC9L,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAkCrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IAEH;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6qD9D,CAAC"}

package/dist/panels/StoryboardListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA2K9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAk1CvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA2K9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAu1CvE,CAAC"}

package/dist/panels.bundle.js

@@ -87945,7 +87945,8 @@ const CustomEdge = ({ id: id2, sourceX, sourceY, targetX, targetY, sourcePositio
     fontWeight: theme2.fontWeights.medium,
     fontFamily: theme2.fonts.body,
     border: `1px solid ${color2}`,
-    pointerEvents: "all"
+    pointerEvents: "all",
+    zIndex: 1e3
   }, className: "nodrag nopan", children: labelText }) }), tooltipsEnabled && isHovered && shiftKeyPressed && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
     position: "absolute",
     transform: `translate(-50%, -100%) translate(${labelX}px,${labelY - 12}px)`,
@@ -180557,7 +180558,7 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels = true }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -181483,6 +181484,15 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       });
     }
   }, [editable, updateEditState, selectedNodeIds, draggableNodeIds, pushHistory]);
+  const scenarioEdgeSequenceMap = useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    if (scenarioEdges && showSequenceLabels) {
+      for (const se2 of scenarioEdges) {
+        map2.set(`${se2.fromSpan}->${se2.toSpan}`, se2.sequenceNumber);
+      }
+    }
+    return map2;
+  }, [scenarioEdges, showSequenceLabels]);
   const xyflowEdgesBase = useMemo(() => {
     const converted = convertToXYFlowEdges(edges, configuration, violations);
     const filtered = converted.filter((edge) => {
@@ -181499,12 +181509,30 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       return true;
     });
     const mappedEdges = filtered.map((edge) => {
+      var _a2, _b;
       const animation = animationState.edgeAnimations[edge.id];
       const isSelected = selectedEdgeIds.has(edge.id);
+      const edgeKey = `${edge.source}->${edge.target}`;
+      const sequenceNumber = scenarioEdgeSequenceMap.get(edgeKey);
       return {
         ...edge,
         data: {
           ...edge.data,
+          // Inject sequence number into edge data for label rendering
+          ...sequenceNumber !== void 0 ? {
+            data: {
+              ...(_a2 = edge.data) == null ? void 0 : _a2.data,
+              sequenceNumber
+            },
+            // Configure label to show sequence number
+            typeDefinition: {
+              ...(_b = edge.data) == null ? void 0 : _b.typeDefinition,
+              label: {
+                field: "sequenceNumber",
+                position: "middle"
+              }
+            }
+          } : {},
           tooltipsEnabled: showTooltips,
           shiftKeyPressed,
           ...animation ? {
@@ -181527,7 +181555,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         return -1;
       return 0;
     });
-  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds, hiddenNodeIds]);
+  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds, hiddenNodeIds, scenarioEdgeSequenceMap]);
   const { edgePaths: elkEdgePaths, edgeLabelPositions: elkLabelPositions } = useElkLayout(xyflowNodesBase, xyflowEdgesBase, {
     enabled: (elkLayout == null ? void 0 : elkLayout.enabled) ?? false,
     routingStyle: (elkLayout == null ? void 0 : elkLayout.routingStyle) ?? "orthogonal",
@@ -181802,7 +181830,7 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
   }, [canvas, library, spansCanvas, workflowSpanPattern]);
 }
 const GraphRenderer = forwardRef((props, ref) => {
-  const { canvas, library, spansCanvas, workflowSpanPattern, className, width = "100%", height = "100%", containerWidth, containerHeight, elkLayout } = props;
+  const { canvas, library, spansCanvas, workflowSpanPattern, className, width = "100%", height = "100%", containerWidth, containerHeight, elkLayout, scenarioEdges, showSequenceLabels } = props;
   const { theme: theme2 } = useTheme();
   const containerRef = useRef(null);
   const [portalTarget, setPortalTarget] = useState(null);
@@ -181891,7 +181919,7 @@ const GraphRenderer = forwardRef((props, ref) => {
   if (isWaitingForViewport) {
     return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" } });
   }
-  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport, elkLayout }) }) }) });
+  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 const DEFAULT_NODE_WIDTH = 200;
@@ -188987,7 +189015,7 @@ const CanvasEditorPanel = ({
   spansCanvasPath,
   workflowSpanPattern
 }) => {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e3;
   const { theme: theme2 } = useTheme();
   const graphRef = useRef(null);
   const canvasContainerRef = useRef(null);
@@ -189460,6 +189488,52 @@ const CanvasEditorPanel = ({
     }
     return null;
   }, [state.canvas, state.hoveredScenarioEventNames, state.selectedScenario, workflowTemplate, getNodeEventName, state.isSearchOpen, searchMatchedNodeIds]);
+  const eventNameToNodeId = useMemo(() => {
+    var _a3;
+    const map2 = /* @__PURE__ */ new Map();
+    if (!((_a3 = state.canvas) == null ? void 0 : _a3.nodes)) return map2;
+    for (const node2 of state.canvas.nodes) {
+      const eventName = getNodeEventName(node2);
+      if (eventName) {
+        map2.set(eventName, node2.id);
+      }
+    }
+    return map2;
+  }, [(_b = state.canvas) == null ? void 0 : _b.nodes, getNodeEventName]);
+  const scenarioEdges = useMemo(() => {
+    var _a3, _b2, _c2;
+    if (!((_b2 = (_a3 = state.selectedScenario) == null ? void 0 : _a3.template) == null ? void 0 : _b2.events) || !((_c2 = state.canvas) == null ? void 0 : _c2.nodes)) return void 0;
+    try {
+      const eventNames = Object.keys(state.selectedScenario.template.events);
+      if (eventNames.length < 2) return void 0;
+      const edges = [];
+      const seenEdges = /* @__PURE__ */ new Set();
+      let sequenceNumber = 0;
+      for (let i = 0; i < eventNames.length - 1; i++) {
+        const fromEventName = eventNames[i];
+        const toEventName = eventNames[i + 1];
+        const fromNodeId = eventNameToNodeId.get(fromEventName);
+        const toNodeId = eventNameToNodeId.get(toEventName);
+        if (fromNodeId && toNodeId && fromNodeId !== toNodeId) {
+          const edgeKey = `${fromNodeId}->${toNodeId}`;
+          if (!seenEdges.has(edgeKey)) {
+            seenEdges.add(edgeKey);
+            sequenceNumber++;
+            edges.push({
+              fromSpan: fromNodeId,
+              // GraphRenderer expects these as node IDs
+              toSpan: toNodeId,
+              sequenceNumber
+            });
+          }
+        }
+      }
+      return edges.length > 0 ? edges : void 0;
+    } catch (error) {
+      console.warn("[CanvasEditorPanel] Failed to derive scenario edges:", error);
+      return void 0;
+    }
+  }, [state.selectedScenario, (_c = state.canvas) == null ? void 0 : _c.nodes, eventNameToNodeId]);
   const fitViewToNodeIds = useMemo(() => {
     var _a3;
     if (state.focusedNodeId && state.selectedScenario) {
@@ -189923,7 +189997,8 @@ const CanvasEditorPanel = ({
                 fitViewToNodeIds,
                 fitViewPadding: 0.15,
                 containerWidth: containerDimensions == null ? void 0 : containerDimensions.width,
-                containerHeight: containerDimensions == null ? void 0 : containerDimensions.height
+                containerHeight: containerDimensions == null ? void 0 : containerDimensions.height,
+                scenarioEdges
               }
             ) : null,
             state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {
@@ -190028,7 +190103,7 @@ const CanvasEditorPanel = ({
                 color: theme2.colors.textMuted,
                 flexShrink: 0
               }, children: "Edges:" }),
-              ((_c = (_b = state.canvas) == null ? void 0 : _b.pv) == null ? void 0 : _c.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
+              ((_e3 = (_d = state.canvas) == null ? void 0 : _d.pv) == null ? void 0 : _e3.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -191832,11 +191907,14 @@ const StoryboardListPanel = ({
     }
   }, [getNodeFilePath]);
   const handleCopyPath = useCallback(async () => {
+    var _a2;
     if (!contextMenu) return;
-    const path2 = getNodeFilePath(contextMenu.node);
-    if (path2) {
+    const relativePath = getNodeFilePath(contextMenu.node);
+    if (relativePath) {
       try {
-        await navigator.clipboard.writeText(path2);
+        const rootPath = ((_a2 = fileTreeData == null ? void 0 : fileTreeData.root) == null ? void 0 : _a2.path) ?? "";
+        const absolutePath = rootPath && !relativePath.startsWith("/") ? `${rootPath}/${relativePath}` : relativePath;
+        await navigator.clipboard.writeText(absolutePath);
         setContextMenuCopied(true);
         setTimeout(() => {
           setContextMenu(null);
@@ -191847,7 +191925,7 @@ const StoryboardListPanel = ({
         setContextMenu(null);
       }
     }
-  }, [contextMenu, getNodeFilePath]);
+  }, [contextMenu, getNodeFilePath, fileTreeData]);
   useEffect(() => {
     if (!contextMenu) return;
     const handleClickOutside = (e) => {