@industry-theme/principal-view-panels 0.12.61 → 0.12.63

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;AAiCrE;;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;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuhD9D,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;AAiCrE;;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;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6iD9D,CAAC"}

package/dist/panels/composable-explanation/StoryGraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryGraphRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/composable-explanation/StoryGraphRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACtC,gDAAgD;IAChD,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACtC,sCAAsC;IACtC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzG,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqNhE,CAAC;AAEF;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,KAAK,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;CACH,CAAC,EACF,kBAAkB,GAAE,MAAe,GAClC,SAAS,EAAE,CAsDb"}
+{"version":3,"file":"StoryGraphRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/composable-explanation/StoryGraphRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACtC,gDAAgD;IAChD,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACtC,sCAAsC;IACtC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,yBAAyB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzG,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2OhE,CAAC;AAEF;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,KAAK,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;CACH,CAAC,EACF,kBAAkB,GAAE,MAAe,GAClC,SAAS,EAAE,CAsDb"}

package/dist/panels.bundle.js

@@ -87346,6 +87346,56 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
     };
   });
 }
+const DEFAULT_NODE_WIDTH$1 = 200;
+const DEFAULT_NODE_HEIGHT$1 = 100;
+function getCanvasBounds(canvas) {
+  if (!canvas.nodes || canvas.nodes.length === 0) {
+    return {
+      minX: 0,
+      minY: 0,
+      maxX: DEFAULT_NODE_WIDTH$1,
+      maxY: DEFAULT_NODE_HEIGHT$1,
+      width: DEFAULT_NODE_WIDTH$1,
+      height: DEFAULT_NODE_HEIGHT$1
+    };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node2 of canvas.nodes) {
+    const x = node2.x ?? 0;
+    const y = node2.y ?? 0;
+    const width = node2.width ?? DEFAULT_NODE_WIDTH$1;
+    const height = node2.height ?? DEFAULT_NODE_HEIGHT$1;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function calculateInitialViewport(bounds, containerWidth, containerHeight, options = {}) {
+  const { padding = 0.2, minZoom = 0.1, maxZoom = 1.5 } = options;
+  const effectiveWidth = containerWidth * (1 - padding);
+  const effectiveHeight = containerHeight * (1 - padding);
+  const zoomX = effectiveWidth / bounds.width;
+  const zoomY = effectiveHeight / bounds.height;
+  let zoom2 = Math.min(zoomX, zoomY);
+  zoom2 = Math.max(minZoom, Math.min(maxZoom, zoom2));
+  const boundsCenterX = bounds.minX + bounds.width / 2;
+  const boundsCenterY = bounds.minY + bounds.height / 2;
+  const x = containerWidth / 2 - boundsCenterX * zoom2;
+  const y = containerHeight / 2 - boundsCenterY * zoom2;
+  return { x, y, zoom: zoom2 };
+}
 const MAX_HISTORY_SIZE = 50;
 function useUndoRedo() {
   const undoStackRef = useRef([]);
@@ -87445,7 +87495,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 }) => {
+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 }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -88441,6 +88491,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     if (fitViewToNodeIds && fitViewToNodeIds.length > 0) {
       return;
     }
+    if (initialViewport) {
+      return;
+    }
     const timeoutId = setTimeout(() => {
       fitView2({
         padding: 0.2,
@@ -88451,7 +88504,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       });
     }, 100);
     return () => clearTimeout(timeoutId);
-  }, [baseNodesKey, baseEdgesKey, fitView2, fitViewDuration, fitViewToNodeIds]);
+  }, [baseNodesKey, baseEdgesKey, fitView2, fitViewDuration, fitViewToNodeIds, initialViewport]);
   const fitViewToNodeIdsKey = useMemo(() => fitViewToNodeIds && fitViewToNodeIds.length > 0 ? fitViewToNodeIds.slice().sort().join(",") : "", [fitViewToNodeIds]);
   useEffect(() => {
     if (!fitViewToNodeIdsKey || !fitViewToNodeIds || fitViewToNodeIds.length === 0) {
@@ -88486,7 +88539,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 150);
     return () => clearTimeout(timeoutId);
   }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView2, fitViewDuration, getNodes, fitBounds]);
-  return jsxs(GraphEditProvider, { value: graphEditContextValue, children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
+  return jsxs(GraphEditProvider, { value: graphEditContextValue, children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultViewport: initialViewport, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
@@ -88665,7 +88718,7 @@ function useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern) {
   }, [canvas, library, spansCanvas, workflowSpanPattern]);
 }
 const GraphRenderer = forwardRef((props2, ref) => {
-  const { canvas, library, spansCanvas, workflowSpanPattern, className, width = "100%", height = "100%" } = props2;
+  const { canvas, library, spansCanvas, workflowSpanPattern, className, width = "100%", height = "100%", containerWidth, containerHeight } = props2;
   const { theme: theme2 } = useTheme();
   const containerRef = useRef(null);
   const [portalTarget, setPortalTarget] = useState(null);
@@ -88673,6 +88726,17 @@ const GraphRenderer = forwardRef((props2, ref) => {
     setPortalTarget(containerRef.current);
   }, []);
   const canvasData = useCanvasToLegacy(canvas, library, spansCanvas, workflowSpanPattern);
+  const initialViewport = useMemo(() => {
+    if (!containerWidth || !containerHeight || !canvas) {
+      return void 0;
+    }
+    const bounds = getCanvasBounds(canvas);
+    return calculateInitialViewport(bounds, containerWidth, containerHeight, {
+      padding: 0.2,
+      minZoom: 0.1,
+      maxZoom: 1.5
+    });
+  }, [canvas, containerWidth, containerHeight]);
   const editStateRef = useRef(createEmptyEditState());
   const resetVisualStateRef = useRef(null);
   const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory } = useUndoRedo();
@@ -88739,7 +88803,7 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }
   const { configuration, nodes, edges } = canvasData;
   const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy } = props2;
-  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 }) }) }) });
+  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 }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 const DEFAULT_NODE_WIDTH = 200;
@@ -95056,6 +95120,8 @@ const CanvasEditorPanel = ({
   var _a, _b, _c, _d;
   const { theme: theme2 } = useTheme();
   const graphRef = useRef(null);
+  const canvasContainerRef = useRef(null);
+  const [containerDimensions, setContainerDimensions] = useState(null);
   const [state, setState] = useState({
     canvas: null,
     library: null,
@@ -95078,6 +95144,18 @@ const CanvasEditorPanel = ({
     isSearchOpen: false,
     searchQuery: ""
   });
+  useEffect(() => {
+    const container = canvasContainerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      if (width > 0 && height > 0) {
+        setContainerDimensions({ width, height });
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [state.loading]);
   const [shouldFitToNodes, setShouldFitToNodes] = useState(false);
   const [fitCounter, setFitCounter] = useState(0);
   const [isCarouselExpanded, setIsCarouselExpanded] = useState(false);
@@ -95911,7 +95989,7 @@ const CanvasEditorPanel = ({
           }
         ) }) : /* @__PURE__ */ jsx("div", {}),
         rightPanel: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", background: theme2.colors.background, position: "relative" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", minHeight: 0, width: "100%", height: "100%" }, children: [
+          /* @__PURE__ */ jsxs("div", { ref: canvasContainerRef, style: { flex: 1, position: "relative", minHeight: 0, width: "100%", height: "100%" }, children: [
             /* @__PURE__ */ jsx(
               GraphRenderer,
               {
@@ -95931,7 +96009,9 @@ const CanvasEditorPanel = ({
                 highlightedNodeId: state.highlightedNodeId,
                 activeNodeIds,
                 fitViewToNodeIds,
-                fitViewPadding: 0.15
+                fitViewPadding: 0.15,
+                containerWidth: containerDimensions == null ? void 0 : containerDimensions.width,
+                containerHeight: containerDimensions == null ? void 0 : containerDimensions.height
               }
             ),
             state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {