@railtownai/railtracks-visualizer 0.0.28 → 0.0.30

package/LICENSE

@@ -1,201 +1,21 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright 2025 Railtown AI
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+MIT License
+
+Copyright (c) 2025 Railtown AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,7 @@
 # RailTracks Visualizer
 
+[![Tests](https://github.com/RailtownAI/railtracks-visualizer/actions/workflows/ci.yaml/badge.svg)](https://github.com/RailtownAI/railtracks-visualizer/actions/workflows/ci.yaml)
+
 A React-based visualizer for RailTracks agentic flows
 
 ## 🚀 Quick Start
@@ -40,15 +42,11 @@ A React-based visualizer for RailTracks agentic flows
 ## 🎨 Features
 
 - **Interactive Flow Visualization**: Visualize agentic flows with nodes and edges
-- **Timeline Navigation**: Step through the flow execution timeline
 - **Auto-layout**: Automatic positioning of nodes in a tree structure
-- **Responsive Design**: Works on different screen sizes
 - **Inspection Panel**: Detailed view of nodes and edges
-- **Playback Controls**: Play/pause timeline progression
 - **Portable Styling**: Uses emotion for self-contained, portable styles
 - **Graceful Theme Handling**: Works out of the box with default light theme, no ThemeProvider required
 - **Dark Mode Support**: Full dark mode compatibility with automatic theme detection
-- **Icon Integration**: Support for OpenAI, Anthropic, and Google AI provider icons
 
 ### Basic Usage (No ThemeProvider Required)
 
@@ -59,17 +57,6 @@ import { Visualizer } from "@railtownai/railtracks-visualizer";
 <Visualizer flowData={data} />;
 ```
 
-### Custom Theming (Optional)
-
-```tsx
-import { Visualizer, ThemeProvider, darkTheme } from "@railtownai/railtracks-visualizer";
-
-// Wrap with ThemeProvider for custom themes
-<ThemeProvider theme={darkTheme}>
-  <Visualizer flowData={data} />
-</ThemeProvider>;
-```
-
 ## 🔧 Development
 
 1. `npm install`

package/dist/cjs/index.js

@@ -16351,6 +16351,8 @@ const InputItemTextarea = styled(index$1)`
 `;
 
 const DEFAULT_COUNTUP_DURATION = 0.6;
+const DEFAULT_POPOVER_WIDTH = 350;
+const DEFAULT_POPOVER_HEIGHT = 500;
 // Helper component for animating currency values
 const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
     return /*#__PURE__*/ React.createElement(CountUp, {
@@ -16453,8 +16455,8 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
             const rect = triggerRef.current.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
-            const popoverWidth = 400; // Match the width from styled component
-            const popoverHeight = 600; // Approximate max height
+            const popoverWidth = DEFAULT_POPOVER_WIDTH; // Match the width from styled component
+            const popoverHeight = DEFAULT_POPOVER_HEIGHT; // Approximate max height
             const gap = 12; // Gap between node and popover
             // Check if the rect is valid (has non-zero dimensions and is in viewport)
             const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
@@ -16702,8 +16704,8 @@ const PopoverPortal = styled.div`
   pointer-events: none;
 `;
 const PopoverContent = styled.div`
-  width: 400px;
-  max-height: 600px;
+  width: ${DEFAULT_POPOVER_WIDTH}px;
+  max-height: ${DEFAULT_POPOVER_HEIGHT}px;
   background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
   border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   border-radius: 0.5rem;
@@ -20149,7 +20151,6 @@ SheetDescription.displayName = Description.displayName;
     }
     // Lay out each tree, centered
     // Calculate the starting position to center the entire layout in the container
-    // Ensure we don't have negative startX which would cause rightward offset
     const startX = Math.max(0, (containerWidth - totalWidth) / 2);
     let xCursor = startX;
     for (const root of roots){
@@ -20195,16 +20196,28 @@ const nodeTypes = {
     Tool: Node$1,
     Coordinator: Node$1
 };
-const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height = "1000px", className = "", defaultZoom = 1, defaultPan = {
+const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, showTimeline = false, minNodeSpacing = 400, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
+    // Helper function to determine if we should apply minimum dimensions
+    const shouldApplyMinDimensions = React.useCallback(()=>{
+        const widthStr = typeof width === "string" ? width : `${width}px`;
+        const heightStr = typeof height === "string" ? height : `${height}px`;
+        // Don't apply minimum dimensions if using viewport units
+        const hasViewportUnits = /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(widthStr) || /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(heightStr);
+        return !hasViewportUnits;
+    }, [
+        width,
+        height
+    ]);
     // Use prop data directly, no hooks needed
     const flowData = propFlowData;
     // Show no data state if no flowData is available
     if (!flowData) {
+        const applyMinDimensions = shouldApplyMinDimensions();
         return /*#__PURE__*/ React.createElement("div", {
             style: {
                 width: typeof width === "number" ? `${width}px` : width,
@@ -20213,8 +20226,10 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                 borderRadius: "8px",
                 background: themeColors.muted,
                 position: "relative",
-                minWidth: "800px",
-                minHeight: "600px",
+                ...applyMinDimensions && {
+                    minWidth: "800px",
+                    minHeight: "600px"
+                },
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
@@ -20324,9 +20339,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
         if (!flowData.nodes) {
             return new Map();
         }
-        // Use container dimensions for centering, fallback to reasonable defaults
-        // Ensure we have a reasonable minimum width for proper centering
-        const containerWidth = Math.max(containerDimensions.width || 800, 1200);
+        // Use actual container dimensions for proper centering
+        const containerWidth = containerDimensions.width || 800;
         return calculateAutoLayout(flowData.nodes, flowData.edges || [], {
             minNodeSpacing,
             containerWidth
@@ -20351,6 +20365,22 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
     }, [
         flowData.edges
     ]);
+    const reactFlowInstance = useReactFlow();
+    // Pan function that can be called by child components
+    React.useCallback((direction, amount)=>{
+        if (!reactFlowInstance) return;
+        const currentViewport = reactFlowInstance.getViewport();
+        const panAmount = direction === "right" ? amount : -amount;
+        reactFlowInstance.setViewport({
+            x: currentViewport.x - panAmount,
+            y: currentViewport.y,
+            zoom: currentViewport.zoom
+        }, {
+            duration: 300
+        });
+    }, [
+        reactFlowInstance
+    ]);
     // Convert flow data to ReactFlow format with step filtering
     const nodes = React.useMemo(()=>{
         const stepNodes = getNodesForStep(currentStep);
@@ -20461,7 +20491,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
             y: svgP.y
         };
     };
-    const reactFlowInstance = useReactFlow();
     // Pan to hub node (most connected node) on initial load, unless disabled or custom settings provided
     React.useEffect(()=>{
         if (disableAutoFit || !reactFlowInstance || nodes.length === 0) {
@@ -20500,31 +20529,34 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                             id: hubNodeId
                         }
                     ],
-                    duration: 1000,
+                    duration: defaultAutoFitDuration,
                     padding: 0.2,
                     minZoom: defaultZoom,
-                    maxZoom: 1
+                    maxZoom: defaultZoom
                 });
-            }, 500); // Small delay to ensure nodes are rendered
+            }, defaultAutoFitDelay); // Small delay to ensure nodes are rendered
         }
     }, [
         nodes,
         edges,
         reactFlowInstance,
         disableAutoFit,
-        defaultZoom
+        defaultZoom,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
         style: {
             width: typeof width === "number" ? `${width}px` : width,
             height: typeof height === "number" ? `${height}px` : height,
+            minWidth: "800px",
+            minHeight: "600px",
+            boxSizing: "border-box",
             border: `1px solid ${themeColors.border}`,
             borderRadius: "8px",
             overflow: "hidden",
             position: "relative",
-            minWidth: "800px",
-            minHeight: "600px",
             background: themeColors.background
         },
         className: className

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { memo, useState, useCallback, useMemo, forwardRef, createContext, useContext, useRef, useLayoutEffect, useEffect, createElement } from 'react';
+import React__default, { memo, useMemo, useState, useCallback, forwardRef, createContext, useContext, useRef, useLayoutEffect, useEffect, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
@@ -16331,6 +16331,8 @@ const InputItemTextarea = styled(index$1)`
 `;
 
 const DEFAULT_COUNTUP_DURATION = 0.6;
+const DEFAULT_POPOVER_WIDTH = 350;
+const DEFAULT_POPOVER_HEIGHT = 500;
 // Helper component for animating currency values
 const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
     return /*#__PURE__*/ React__default.createElement(CountUp, {
@@ -16433,8 +16435,8 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
             const rect = triggerRef.current.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
-            const popoverWidth = 400; // Match the width from styled component
-            const popoverHeight = 600; // Approximate max height
+            const popoverWidth = DEFAULT_POPOVER_WIDTH; // Match the width from styled component
+            const popoverHeight = DEFAULT_POPOVER_HEIGHT; // Approximate max height
             const gap = 12; // Gap between node and popover
             // Check if the rect is valid (has non-zero dimensions and is in viewport)
             const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
@@ -16682,8 +16684,8 @@ const PopoverPortal = styled.div`
   pointer-events: none;
 `;
 const PopoverContent = styled.div`
-  width: 400px;
-  max-height: 600px;
+  width: ${DEFAULT_POPOVER_WIDTH}px;
+  max-height: ${DEFAULT_POPOVER_HEIGHT}px;
   background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
   border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   border-radius: 0.5rem;
@@ -20129,7 +20131,6 @@ SheetDescription.displayName = Description.displayName;
     }
     // Lay out each tree, centered
     // Calculate the starting position to center the entire layout in the container
-    // Ensure we don't have negative startX which would cause rightward offset
     const startX = Math.max(0, (containerWidth - totalWidth) / 2);
     let xCursor = startX;
     for (const root of roots){
@@ -20175,16 +20176,28 @@ const nodeTypes = {
     Tool: Node$1,
     Coordinator: Node$1
 };
-const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height = "1000px", className = "", defaultZoom = 1, defaultPan = {
+const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, showTimeline = false, minNodeSpacing = 400, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
+    // Helper function to determine if we should apply minimum dimensions
+    const shouldApplyMinDimensions = useCallback(()=>{
+        const widthStr = typeof width === "string" ? width : `${width}px`;
+        const heightStr = typeof height === "string" ? height : `${height}px`;
+        // Don't apply minimum dimensions if using viewport units
+        const hasViewportUnits = /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(widthStr) || /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(heightStr);
+        return !hasViewportUnits;
+    }, [
+        width,
+        height
+    ]);
     // Use prop data directly, no hooks needed
     const flowData = propFlowData;
     // Show no data state if no flowData is available
     if (!flowData) {
+        const applyMinDimensions = shouldApplyMinDimensions();
         return /*#__PURE__*/ React__default.createElement("div", {
             style: {
                 width: typeof width === "number" ? `${width}px` : width,
@@ -20193,8 +20206,10 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                 borderRadius: "8px",
                 background: themeColors.muted,
                 position: "relative",
-                minWidth: "800px",
-                minHeight: "600px",
+                ...applyMinDimensions && {
+                    minWidth: "800px",
+                    minHeight: "600px"
+                },
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
@@ -20304,9 +20319,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
         if (!flowData.nodes) {
             return new Map();
         }
-        // Use container dimensions for centering, fallback to reasonable defaults
-        // Ensure we have a reasonable minimum width for proper centering
-        const containerWidth = Math.max(containerDimensions.width || 800, 1200);
+        // Use actual container dimensions for proper centering
+        const containerWidth = containerDimensions.width || 800;
         return calculateAutoLayout(flowData.nodes, flowData.edges || [], {
             minNodeSpacing,
             containerWidth
@@ -20331,6 +20345,22 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
     }, [
         flowData.edges
     ]);
+    const reactFlowInstance = useReactFlow();
+    // Pan function that can be called by child components
+    useCallback((direction, amount)=>{
+        if (!reactFlowInstance) return;
+        const currentViewport = reactFlowInstance.getViewport();
+        const panAmount = direction === "right" ? amount : -amount;
+        reactFlowInstance.setViewport({
+            x: currentViewport.x - panAmount,
+            y: currentViewport.y,
+            zoom: currentViewport.zoom
+        }, {
+            duration: 300
+        });
+    }, [
+        reactFlowInstance
+    ]);
     // Convert flow data to ReactFlow format with step filtering
     const nodes = useMemo(()=>{
         const stepNodes = getNodesForStep(currentStep);
@@ -20441,7 +20471,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
             y: svgP.y
         };
     };
-    const reactFlowInstance = useReactFlow();
     // Pan to hub node (most connected node) on initial load, unless disabled or custom settings provided
     useEffect(()=>{
         if (disableAutoFit || !reactFlowInstance || nodes.length === 0) {
@@ -20480,31 +20509,34 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                             id: hubNodeId
                         }
                     ],
-                    duration: 1000,
+                    duration: defaultAutoFitDuration,
                     padding: 0.2,
                     minZoom: defaultZoom,
-                    maxZoom: 1
+                    maxZoom: defaultZoom
                 });
-            }, 500); // Small delay to ensure nodes are rendered
+            }, defaultAutoFitDelay); // Small delay to ensure nodes are rendered
         }
     }, [
         nodes,
         edges,
         reactFlowInstance,
         disableAutoFit,
-        defaultZoom
+        defaultZoom,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay
     ]);
     return /*#__PURE__*/ React__default.createElement("div", {
         ref: containerRef,
         style: {
             width: typeof width === "number" ? `${width}px` : width,
             height: typeof height === "number" ? `${height}px` : height,
+            minWidth: "800px",
+            minHeight: "600px",
+            boxSizing: "border-box",
             border: `1px solid ${themeColors.border}`,
             borderRadius: "8px",
             overflow: "hidden",
             position: "relative",
-            minWidth: "800px",
-            minHeight: "600px",
             background: themeColors.background
         },
         className: className

package/dist/types/components/AgenticFlowVisualizer.d.ts

@@ -12,6 +12,8 @@ export interface AgenticFlowVisualizerProps {
         y: number;
     };
     disableAutoFit?: boolean;
+    defaultAutoFitDuration?: number;
+    defaultAutoFitDelay?: number;
     showTimeline?: boolean;
     minNodeSpacing?: number;
     onInspect?: (nodeData: any) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.28",
-  "license": "Apache-2.0",
+  "version": "0.0.30",
+  "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
   "main": "dist/cjs/index.js",
@@ -53,18 +53,19 @@
   },
   "scripts": {
     "build:lib": "rollup -c",
+    "build:size": "npm pack --dry-run",
     "build:spa": "vite build",
     "build:types": "tsc -p tsconfig.types.json",
-    "build:size": "npm pack --dry-run",
     "build": "npm run build:types && npm run build:lib && npm run build:spa",
     "clean": "rm -rf dist build test-results .railtracks/ui/*",
     "dev": "rm -rf .railtracks/ui/* && vite build && cp -r build/* .railtracks/ui",
     "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "lint:license": "license-checker --summary --excludePrivatePackages --failOn 'AGPL-1.0;AGPL-3.0;EPL-1.0;EPL-2.0;GPL-1.0;GPL-2.0;GPL-3.0;LGPL-2.0;LGPL-2.1;LGPL-3.0;'",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "start": "storybook dev -p 6006",
     "storybook:build": "cross-env NODE_ENV=production storybook build",
-    "storybook:preview": "npx http-server ./storybook-static",
     "storybook:deploy": "gh-pages -d storybook-static",
+    "storybook:preview": "npx http-server ./storybook-static",
     "test:ui": "vitest --ui",
     "test": "vitest run --silent",
     "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
@@ -95,6 +96,7 @@
     "cross-env": "^10.0.0",
     "gh-pages": "6.3.0",
     "jsdom": "26.1.0",
+    "license-checker": "25.0.1",
     "npm-check-updates": "18.1.0",
     "playwright": "^1.55.0",
     "prettier": "3.6.2",