@railtownai/railtracks-visualizer 0.0.29 → 0.0.31

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

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
@@ -24446,6 +24478,7 @@ const SelectContent = styled(Content2)`
   z-index: 50;
   min-width: 8rem;
   overflow: hidden;
+  max-height: ${(props)=>props.$maxHeight || "none"};
   border-radius: ${(props)=>props.$theme.borderRadius.lg};
   border: 1px solid ${(props)=>props.$theme.colors.border};
   background-color: ${(props)=>props.$theme.colors.background};
@@ -24552,16 +24585,45 @@ const SelectScrollDownButtonWithRef = /*#__PURE__*/ React__namespace.forwardRef(
     }));
 });
 SelectScrollDownButtonWithRef.displayName = ScrollDownButton.displayName;
-const SelectContentWithRef = /*#__PURE__*/ React__namespace.forwardRef(({ children, position = "popper", ...props }, ref)=>{
+const SelectContentWithRef = /*#__PURE__*/ React__namespace.forwardRef(({ children, position = "popper", maxItems = 6, itemHeight = "2.5rem", ...props }, ref)=>{
     const { theme } = useTheme();
+    const viewportRef = React__namespace.useRef(null);
+    // Calculate max height based on maxItems and itemHeight
+    const maxHeight = maxItems ? `calc(${itemHeight} * ${maxItems} + 8px)` : "none";
+    // Handle scroll wheel events for smooth scrolling
+    const handleWheel = React__namespace.useCallback((e)=>{
+        if (viewportRef.current) {
+            e.preventDefault();
+            const scrollAmount = e.deltaY;
+            viewportRef.current.scrollTop += scrollAmount;
+        }
+    }, []);
+    React__namespace.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (viewport) {
+            viewport.addEventListener("wheel", handleWheel, {
+                passive: false
+            });
+            return ()=>{
+                viewport.removeEventListener("wheel", handleWheel);
+            };
+        }
+    }, [
+        handleWheel
+    ]);
     return /*#__PURE__*/ React__namespace.createElement(Portal$1, null, /*#__PURE__*/ React__namespace.createElement(SelectContent, {
         ref: ref,
         position: position,
         $theme: theme,
+        $maxHeight: maxHeight,
         ...props
     }, /*#__PURE__*/ React__namespace.createElement(SelectScrollUpButtonWithRef, null), /*#__PURE__*/ React__namespace.createElement(Viewport, {
+        ref: viewportRef,
         style: {
-            padding: "4px"
+            padding: "4px",
+            maxHeight: maxHeight !== "none" ? `calc(${maxHeight} - 8px)` : "none",
+            overflowY: "auto",
+            scrollBehavior: "smooth"
         }
     }, children), /*#__PURE__*/ React__namespace.createElement(SelectScrollDownButtonWithRef, null)));
 });

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
@@ -24426,6 +24458,7 @@ const SelectContent = styled(Content2)`
   z-index: 50;
   min-width: 8rem;
   overflow: hidden;
+  max-height: ${(props)=>props.$maxHeight || "none"};
   border-radius: ${(props)=>props.$theme.borderRadius.lg};
   border: 1px solid ${(props)=>props.$theme.colors.border};
   background-color: ${(props)=>props.$theme.colors.background};
@@ -24532,16 +24565,45 @@ const SelectScrollDownButtonWithRef = /*#__PURE__*/ React.forwardRef(({ ...props
     }));
 });
 SelectScrollDownButtonWithRef.displayName = ScrollDownButton.displayName;
-const SelectContentWithRef = /*#__PURE__*/ React.forwardRef(({ children, position = "popper", ...props }, ref)=>{
+const SelectContentWithRef = /*#__PURE__*/ React.forwardRef(({ children, position = "popper", maxItems = 6, itemHeight = "2.5rem", ...props }, ref)=>{
     const { theme } = useTheme();
+    const viewportRef = React.useRef(null);
+    // Calculate max height based on maxItems and itemHeight
+    const maxHeight = maxItems ? `calc(${itemHeight} * ${maxItems} + 8px)` : "none";
+    // Handle scroll wheel events for smooth scrolling
+    const handleWheel = React.useCallback((e)=>{
+        if (viewportRef.current) {
+            e.preventDefault();
+            const scrollAmount = e.deltaY;
+            viewportRef.current.scrollTop += scrollAmount;
+        }
+    }, []);
+    React.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (viewport) {
+            viewport.addEventListener("wheel", handleWheel, {
+                passive: false
+            });
+            return ()=>{
+                viewport.removeEventListener("wheel", handleWheel);
+            };
+        }
+    }, [
+        handleWheel
+    ]);
     return /*#__PURE__*/ React.createElement(Portal$1, null, /*#__PURE__*/ React.createElement(SelectContent, {
         ref: ref,
         position: position,
         $theme: theme,
+        $maxHeight: maxHeight,
         ...props
     }, /*#__PURE__*/ React.createElement(SelectScrollUpButtonWithRef, null), /*#__PURE__*/ React.createElement(Viewport, {
+        ref: viewportRef,
         style: {
-            padding: "4px"
+            padding: "4px",
+            maxHeight: maxHeight !== "none" ? `calc(${maxHeight} - 8px)` : "none",
+            overflowY: "auto",
+            scrollBehavior: "smooth"
         }
     }, children), /*#__PURE__*/ React.createElement(SelectScrollDownButtonWithRef, null)));
 });

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/dist/types/components/ui/select.d.ts

@@ -6,7 +6,11 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.Selec
 declare const SelectTriggerWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContentWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    maxItems?: number;
+    itemHeight?: string;
+}
+declare const SelectContentWithRef: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabelWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItemWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparatorWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -43,7 +43,7 @@
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
-    "@railtownai/railtracks-timeline": "0.0.5",
+    "@railtownai/railtracks-timeline": "0.0.10",
     "@xyflow/react": "12.8.4",
     "lucide-react": "0.542.0",
     "moment": "2.30.1",
@@ -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"
@@ -76,11 +77,11 @@
     "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-swc": "0.4.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-a11y": "9.1.5",
-    "@storybook/addon-docs": "9.1.5",
-    "@storybook/addon-onboarding": "9.1.5",
-    "@storybook/addon-vitest": "9.1.5",
-    "@storybook/react-vite": "9.1.5",
+    "@storybook/addon-a11y": "9.1.10",
+    "@storybook/addon-docs": "9.1.10",
+    "@storybook/addon-onboarding": "9.1.10",
+    "@storybook/addon-vitest": "9.1.10",
+    "@storybook/react-vite": "9.1.10",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -95,12 +96,13 @@
     "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",
     "rollup": "4.50.1",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "9.1.5",
+    "storybook": "9.1.10",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
     "vite": "7.1.5",