@industry-theme/principal-view-panels 0.12.119 → 0.12.120

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,EAAqD,gBAAgB,EAAgF,MAAM,mCAAmC,CAAC;AAE3M,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAwDrE;;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,CAixE9D,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,EAAqD,gBAAgB,EAAgF,MAAM,mCAAmC,CAAC;AAE3M,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAwDrE;;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,CA8wE9D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardPanel.d.ts","sourceRoot":"","sources":["../../src/panels/DashboardPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAS/E,OAAO,KAAK,EAEV,YAAY,EAGZ,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAEhB,YAAY,EAKb,MAAM,mCAAmC,CAAC;AAsP3C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6VxD,CAAC"}
+{"version":3,"file":"DashboardPanel.d.ts","sourceRoot":"","sources":["../../src/panels/DashboardPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAS/E,OAAO,KAAK,EAEV,YAAY,EAGZ,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAEhB,YAAY,EAKb,MAAM,mCAAmC,CAAC;AAmP3C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6VxD,CAAC"}

package/dist/panels/execution-viewer/EventCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventCarousel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/EventCarousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAmB,MAAM,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAM9H,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IACrD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4ctD,CAAC"}
+{"version":3,"file":"EventCarousel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/EventCarousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAmB,MAAM,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAM9H,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IACrD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyctD,CAAC"}

package/dist/panels.bundle.js

@@ -182122,7 +182122,7 @@ function getParentNamespace(namespace2) {
   return segments.slice(0, -1).join(".");
 }
 function useSequenceLayout(events, sequenceEdges, options = {}) {
-  const { namespaceStrategy = "all-but-last", laneWidth = 200, laneGap = 10, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14 } = options;
+  const { namespaceStrategy = "all-but-last", laneWidth = 250, laneGap = 0, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14 } = options;
   return useMemo(() => {
     if (events.length === 0) {
       return {
@@ -182206,6 +182206,7 @@ function useSequenceLayout(events, sequenceEdges, options = {}) {
           visibleNamespace,
           timeLayer: i2,
           isMoveEvent: event.moveEvent === true,
+          sourcePath: event.sourcePath,
           ...event.data
         },
         style: {
@@ -182412,17 +182413,23 @@ function SequenceArrowParticipantEdge({ id: id2, sourceY, targetY, label, data }
       barY = Math.min(safeSourceY, safeTargetY);
     }
     const barX = sourceX - barWidth / 2;
-    return jsxs(Fragment, { children: [jsx("svg", { children: jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: strokeColor, fillOpacity: 0.15, stroke: strokeColor, strokeWidth: 2, rx: 2 }) }), label && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
+    return jsxs(Fragment, { children: [jsx("svg", { children: jsx("rect", { x: barX, y: barY, width: barWidth, height: barHeight, fill: strokeColor, stroke: strokeColor, strokeWidth: 2, rx: 2 }) }), label && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
       position: "absolute",
-      transform: `translate(0, -50%) translate(${sourceX + 15}px,${barY + barHeight / 2}px)`,
+      transform: `translate(-100%, -50%) translate(${sourceX - 7}px,${barY + barHeight / 2}px)`,
       background: isSourceSelected ? strokeColor : theme2.colors.background,
-      padding: isSourceSelected ? "4px 10px" : "2px 8px",
-      borderRadius: 4,
+      padding: "2px 8px",
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: 4,
+      borderBottomRightRadius: 0,
       fontSize: theme2.fontSizes[0],
       fontWeight: isSourceSelected ? theme2.fontWeights.bold : theme2.fontWeights.medium,
       fontFamily: theme2.fonts.body,
       color: isSourceSelected ? theme2.colors.background : strokeColor,
-      border: `${isSourceSelected ? 2 : 1}px solid ${strokeColor}`,
+      borderTop: `${isSourceSelected ? 2 : 1}px solid ${strokeColor}`,
+      borderLeft: `${isSourceSelected ? 2 : 1}px solid ${strokeColor}`,
+      borderBottom: `${isSourceSelected ? 2 : 1}px solid ${strokeColor}`,
+      borderRight: `1px solid ${strokeColor}`,
       pointerEvents: "all",
       whiteSpace: "nowrap",
       cursor: "pointer",
@@ -182433,7 +182440,11 @@ function SequenceArrowParticipantEdge({ id: id2, sourceY, targetY, label, data }
   const strokeWidth = isMoveEvent ? 2.5 : 2;
   const markerEnd = isMoveEvent ? "url(#sequence-arrow-move)" : "url(#sequence-arrow)";
   const arrowY = (safeSourceY + safeTargetY) / 2;
-  const path2 = `M ${sourceX} ${arrowY} L ${targetX} ${arrowY}`;
+  const lifelineInset = 6;
+  const direction = targetX > sourceX ? 1 : -1;
+  const startX = sourceX + direction * lifelineInset;
+  const endX = targetX - direction * lifelineInset;
+  const path2 = `M ${startX} ${arrowY} L ${endX} ${arrowY}`;
   const labelX = (sourceX + targetX) / 2;
   const labelY = arrowY;
   return jsxs(Fragment, { children: [jsx(BaseEdge, { id: id2, path: path2, style: {
@@ -182443,13 +182454,19 @@ function SequenceArrowParticipantEdge({ id: id2, sourceY, targetY, label, data }
     position: "absolute",
     transform: `translate(-50%, -50%) translate(${labelX}px,${labelY - 12}px)`,
     background: isSourceSelected ? strokeColor : theme2.colors.background,
-    padding: isSourceSelected ? "5px 12px" : isMoveEvent ? "3px 10px" : "2px 8px",
-    borderRadius: 4,
+    padding: isMoveEvent ? "3px 10px" : "2px 8px",
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
     fontSize: theme2.fontSizes[0],
     fontWeight: isSourceSelected ? theme2.fontWeights.bold : isMoveEvent ? theme2.fontWeights.bold : theme2.fontWeights.medium,
     fontFamily: theme2.fonts.body,
     color: isSourceSelected ? theme2.colors.background : strokeColor,
-    border: `${isSourceSelected ? 3 : isMoveEvent ? 2 : 1}px solid ${strokeColor}`,
+    borderTop: `${isSourceSelected ? 3 : isMoveEvent ? 2 : 1}px solid ${strokeColor}`,
+    borderLeft: `${isSourceSelected ? 3 : isMoveEvent ? 2 : 1}px solid ${strokeColor}`,
+    borderRight: `${isSourceSelected ? 3 : isMoveEvent ? 2 : 1}px solid ${strokeColor}`,
+    borderBottom: `${isMoveEvent ? 2 : 1}px solid ${strokeColor}`,
     pointerEvents: "all",
     whiteSpace: "nowrap",
     cursor: "pointer",
@@ -182464,10 +182481,11 @@ const defaultSequenceEdgeTypes = {
   sequenceArrow: SequenceArrowEdge,
   sequenceArrowParticipant: SequenceArrowParticipantEdge
 };
-function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight }) {
+function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight, transparent = false }) {
   const { x: x2, y: y2, zoom: zoom2 } = useViewport();
+  const viewportHeight = useStore((s2) => s2.height);
   const { theme: theme2 } = useTheme();
-  const extendedHeight = totalHeight + 20;
+  const extendedHeight = Math.max(totalHeight + 20, viewportHeight / zoom2 + 100);
   return jsxs("div", { style: {
     position: "absolute",
     top: 0,
@@ -182478,13 +182496,14 @@ function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight }) {
     zIndex: -1
   }, children: [swimlanes.map((lane, index2) => {
     const isEven = index2 % 2 === 0;
+    const laneBackground = transparent ? "transparent" : isEven ? theme2.colors.muted : theme2.colors.background;
     return jsx("div", { style: {
       position: "absolute",
       left: lane.x - laneWidth / 2,
       top: 0,
       width: laneWidth,
       height: extendedHeight,
-      backgroundColor: isEven ? theme2.colors.muted : theme2.colors.background,
+      backgroundColor: laneBackground,
       borderRight: `1px solid ${theme2.colors.border}`
     } }, `bg-${lane.namespace}`);
   }), swimlanes.map((lane) => jsx("div", { style: {
@@ -182493,11 +182512,11 @@ function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight }) {
     top: headerHeight,
     width: 2,
     height: extendedHeight - headerHeight,
-    backgroundColor: theme2.colors.border,
+    backgroundColor: "rgba(255, 255, 255, 0.4)",
     transform: "translateX(-1px)"
   } }, `lifeline-${lane.namespace}`))] });
 }
-function SwimlaneHeadersLayer({ swimlanes, laneWidth, headerHeight, onToggleCollapse, stickyHeaders = true }) {
+function SwimlaneHeadersLayer({ swimlanes, laneWidth, headerHeight, onToggleCollapse, stickyHeaders = true, transparent = false }) {
   const { x: x2, y: y2, zoom: zoom2 } = useViewport();
   const { theme: theme2 } = useTheme();
   const headerTop = stickyHeaders ? -y2 / zoom2 : 0;
@@ -182520,7 +182539,9 @@ function SwimlaneHeadersLayer({ swimlanes, laneWidth, headerHeight, onToggleColl
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: theme2.colors.muted,
+      padding: "0 8px",
+      boxSizing: "border-box",
+      backgroundColor: transparent ? "transparent" : theme2.colors.muted,
       borderBottom: `2px solid ${theme2.colors.border}`,
       fontWeight: theme2.fontWeights.semibold,
       fontSize: theme2.fontSizes[2],
@@ -182529,7 +182550,12 @@ function SwimlaneHeadersLayer({ swimlanes, laneWidth, headerHeight, onToggleColl
       pointerEvents: "auto",
       cursor: hasChildren ? "pointer" : "default",
       userSelect: "none"
-    }, onClick: () => hasChildren && (onToggleCollapse == null ? void 0 : onToggleCollapse(lane.namespace)), children: [hasChildren && jsx("span", { style: { marginRight: 6, fontSize: 10 }, children: lane.isCollapsed ? "▼" : "▶" }), jsx("span", { children: lane.label })] }, `header-${lane.namespace}`);
+    }, onClick: () => hasChildren && (onToggleCollapse == null ? void 0 : onToggleCollapse(lane.namespace)), children: [hasChildren && jsx("span", { style: { marginRight: 6, fontSize: 10 }, children: lane.isCollapsed ? "▼" : "▶" }), jsx("span", { style: {
+      overflowWrap: "anywhere",
+      wordBreak: "break-word",
+      lineHeight: 1.2,
+      textAlign: "center"
+    }, title: lane.label, children: lane.label })] }, `header-${lane.namespace}`);
   }) });
 }
 function SequenceDiagramInner({
@@ -182545,14 +182571,15 @@ function SequenceDiagramInner({
   // Default to false since swimlanes provide visual structure
   stickyHeaders = true,
   selectedNodeId,
-  showEventLabels = false
+  showEventLabels = false,
   // Default to false - labels already shown on edges
+  transparent = false
 }) {
   const { theme: theme2 } = useTheme();
-  const { laneWidth = 200, headerHeight = 60 } = layoutOptions;
+  const { laneWidth = 250, headerHeight = 60 } = layoutOptions;
   const nodeTypes2 = useMemo(() => ({ ...defaultSequenceNodeTypes, ...customNodeTypes }), [customNodeTypes]);
   const edgeTypes2 = useMemo(() => ({ ...defaultSequenceEdgeTypes, ...customEdgeTypes }), [customEdgeTypes]);
-  const { nodes: layoutNodes, edges, swimlanes, totalHeight } = useSequenceLayout(events, sequenceEdges, layoutOptions);
+  const { nodes: layoutNodes, edges, swimlanes, totalWidth, totalHeight } = useSequenceLayout(events, sequenceEdges, layoutOptions);
   const nodes = useMemo(() => {
     return layoutNodes.map((node2) => ({
       ...node2,
@@ -182579,14 +182606,15 @@ function SequenceDiagramInner({
     onNodeClick == null ? void 0 : onNodeClick(edge.source, _event);
   }, [onNodeClick]);
   const translateExtent = useMemo(() => {
-    if (!stickyHeaders) {
-      return void 0;
-    }
+    const xMin = 0;
+    const xMax = totalWidth;
+    const yMin = stickyHeaders ? 0 : -20;
+    const yMax = stickyHeaders ? totalHeight + 1e3 : totalHeight + 20;
     return [
-      [-Infinity, 0],
-      [Infinity, totalHeight + 1e3]
+      [xMin, yMin],
+      [xMax, yMax]
     ];
-  }, [stickyHeaders, totalHeight]);
+  }, [stickyHeaders, totalWidth, totalHeight]);
   const viewportConfig = useMemo(() => {
     if (stickyHeaders) {
       return {
@@ -182603,7 +182631,7 @@ function SequenceDiagramInner({
       }
     };
   }, [stickyHeaders]);
-  return jsxs(index$2, { nodes, edges: edgesWithSelection, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick: handleNodeClick2, onEdgeClick: handleEdgeClick, ...viewportConfig, minZoom: 0.1, maxZoom: 2, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, panOnScroll: true, zoomOnScroll: true, translateExtent, style: { background: theme2.colors.background }, children: [jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: jsxs("defs", { children: [jsx("marker", { id: "sequence-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: theme2.colors.primary }) }), jsx("marker", { id: "sequence-arrow-move", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: theme2.colors.accent || "#f48771" }) })] }) }), showBackground && jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), showControls && jsx(Controls, {}), jsx(SwimlaneLayer, { swimlanes, laneWidth, headerHeight, totalHeight }), jsx(SwimlaneHeadersLayer, { swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse, stickyHeaders }), swimlanes.some((s2) => s2.children.length > 0) && jsx(Panel$1, { position: "top-right", children: jsx("div", { style: {
+  return jsxs(index$2, { nodes, edges: edgesWithSelection, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick: handleNodeClick2, onEdgeClick: handleEdgeClick, ...viewportConfig, minZoom: 0.1, maxZoom: 2, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, panOnScroll: true, zoomOnScroll: true, translateExtent, style: { background: transparent ? "transparent" : theme2.colors.background }, children: [jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: jsxs("defs", { children: [jsx("marker", { id: "sequence-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: theme2.colors.primary }) }), jsx("marker", { id: "sequence-arrow-move", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: theme2.colors.accent || "#f48771" }) })] }) }), showBackground && jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), showControls && jsx(Controls, {}), jsx(SwimlaneLayer, { swimlanes, laneWidth, headerHeight, totalHeight, transparent }), jsx(SwimlaneHeadersLayer, { swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse, stickyHeaders, transparent }), swimlanes.some((s2) => s2.children.length > 0) && jsx(Panel$1, { position: "top-right", children: jsx("div", { style: {
     background: theme2.colors.background,
     border: `1px solid ${theme2.colors.border}`,
     borderRadius: 4,
@@ -182663,15 +182691,17 @@ function convertWorkflowToSequence$1(scenario, canvas) {
     }
   }
   const events = eventNames.map((eventName, index2) => {
-    const scope = eventToScopeMap.get(eventName) || "unknown";
+    const canvasScope = eventToScopeMap.get(eventName);
     const label = eventToLabelMap.get(eventName) || eventName.split(".").pop() || eventName;
     const isMoveEvent = eventToMoveEventMap.get(eventName) ?? true;
+    const name2 = canvasScope ? `${canvasScope}.${eventName}` : eventName;
+    const participant = canvasScope ?? eventName.split(".")[0] ?? eventName;
     return {
       id: `event-${index2}`,
-      name: `${scope}.${eventName}`,
+      name: name2,
       label,
       moveEvent: isMoveEvent,
-      participant: scope
+      participant
     };
   });
   const edges = [];
@@ -182695,8 +182725,9 @@ function WorkflowSequenceDiagram({
   className,
   onEventIndexChange,
   selectedEventIndex,
-  showEventLabels = false
+  showEventLabels = false,
   // Default to false - labels already on edges
+  transparent = false
 }) {
   const { events, edges } = useMemo(() => convertWorkflowToSequence$1(scenario, canvas), [scenario, canvas]);
   const handleNodeClick2 = useCallback((nodeId) => {
@@ -182723,7 +182754,7 @@ function WorkflowSequenceDiagram({
       color: "#888"
     }, children: "No events in workflow" });
   }
-  return jsx(SequenceDiagramRenderer, { events, edges, height, width, layoutOptions, showControls, showBackground, className, onNodeClick: onEventIndexChange ? handleNodeClick2 : void 0, selectedNodeId, showEventLabels });
+  return jsx(SequenceDiagramRenderer, { events, edges, height, width, layoutOptions, showControls, showBackground, className, onNodeClick: onEventIndexChange ? handleNodeClick2 : void 0, selectedNodeId, showEventLabels, transparent });
 }
 const DEFAULT_NODE_WIDTH = 200;
 const DEFAULT_NODE_HEIGHT = 100;
@@ -190754,9 +190785,6 @@ const EventCarousel = ({
               canvas,
               height: "100%",
               layoutOptions: {
-                laneWidth: 220,
-                laneGap: 60,
-                eventSpacing: 100,
                 namespaceStrategy: "first"
               },
               showControls: true
@@ -192418,9 +192446,6 @@ const CanvasEditorPanel = ({
                   canvas: state.canvas,
                   height: "100%",
                   layoutOptions: {
-                    laneWidth: 220,
-                    laneGap: 60,
-                    eventSpacing: 100,
                     namespaceStrategy: "first"
                   },
                   showControls: true,
@@ -207690,9 +207715,6 @@ function SequenceDiagramModal({
                 edges,
                 height: "100%",
                 layoutOptions: {
-                  laneWidth: 220,
-                  laneGap: 60,
-                  eventSpacing: 100,
                   namespaceStrategy: "first"
                 },
                 showControls: true