@railtownai/railtracks-visualizer 0.0.4 → 0.0.5

package/dist/cjs/App.js

@@ -1,94 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const reactflow_1 = require("reactflow");
-const hooks_1 = require("./hooks");
-const FileSelector_1 = require("./components/FileSelector");
-const AgenticFlowVisualizer_1 = __importDefault(require("./AgenticFlowVisualizer"));
-const App = () => {
-    const { availableFiles, currentFile, flowData, loading, error, loadFile, refreshFiles } = (0, hooks_1.useFlowData)();
-    const handleFileSelect = (filename) => {
-        loadFile(filename);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "app", children: [(0, jsx_runtime_1.jsxs)("div", { className: "app-header", children: [(0, jsx_runtime_1.jsx)("h1", { children: "RailTracks Visualizer" }), (0, jsx_runtime_1.jsx)("div", { className: "file-selector-container", children: (0, jsx_runtime_1.jsx)(FileSelector_1.FileSelector, { files: availableFiles, currentFile: currentFile, onFileSelect: handleFileSelect, onRefresh: refreshFiles, loading: loading, disabled: loading }) })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "error-message", children: (0, jsx_runtime_1.jsxs)("p", { children: ["Error: ", error] }) })), (0, jsx_runtime_1.jsx)("div", { className: "visualizer-container", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "loading-state", children: [(0, jsx_runtime_1.jsx)("div", { className: "loading-spinner" }), (0, jsx_runtime_1.jsx)("p", { children: "Loading flow data..." })] })) : flowData ? ((0, jsx_runtime_1.jsx)(reactflow_1.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(AgenticFlowVisualizer_1.default, { flowData: flowData }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "no-data-state", children: (0, jsx_runtime_1.jsx)("p", { children: "Please select a file to visualize the flow data" }) })) }), (0, jsx_runtime_1.jsx)("style", { children: `
-        .app {
-          min-height: 100vh;
-          background: #f9fafb;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        }
-
-        .app-header {
-          background: white;
-          border-bottom: 1px solid #e5e7eb;
-          padding: 5px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-
-        .app-header h1 {
-          margin: 0;
-          font-size: 18px;
-          font-weight: 600;
-          color: #1f2937;
-        }
-
-        .file-selector-container {
-          display: flex;
-          align-items: center;
-        }
-
-        .error-message {
-          background: #fee2e2;
-          border: 1px solid #fecaca;
-          color: #991b1b;
-          padding: 12px 20px;
-          margin: 20px;
-          border-radius: 6px;
-          font-size: 14px;
-        }
-
-        .visualizer-container {
-          padding: 20px;
-          min-height: calc(100vh - 100px);
-        }
-
-        .loading-state {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          height: 400px;
-          color: #6b7280;
-        }
-
-        .loading-spinner {
-          width: 40px;
-          height: 40px;
-          border: 4px solid #e5e7eb;
-          border-top: 4px solid #6366f1;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-          margin-bottom: 16px;
-        }
-
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-
-        .no-data-state {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 400px;
-          color: #6b7280;
-          font-size: 16px;
-        }
-      ` })] }));
-};
-exports.default = App;

package/dist/cjs/Visualizer.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const reactflow_1 = require("reactflow");
-const AgenticFlowVisualizer_1 = __importDefault(require("./AgenticFlowVisualizer"));
-/**
- * Visualizer component that wraps AgenticFlowVisualizer with ReactFlowProvider.
- * This is the main component that should be imported from the npm package.
- */
-const Visualizer = (props) => {
-    return ((0, jsx_runtime_1.jsx)(reactflow_1.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(AgenticFlowVisualizer_1.default, Object.assign({}, props)) }));
-};
-exports.default = Visualizer;

package/dist/cjs/components/Edge.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Edge = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd, bidirectional = false, data, clientToSvgCoords, svgRef, onInspect }) => {
-    var _a;
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    // Function to determine stroke color based on edge state
-    const getStrokeColor = () => {
-        var _a;
-        const state = (_a = data === null || data === void 0 ? void 0 : data.details) === null || _a === void 0 ? void 0 : _a.state;
-        switch (state) {
-            case "Open":
-                return "#000000"; // Black
-            case "Completed":
-                return "#15803d"; // Darker Green
-            case "Error":
-                return "#ef4444"; // Red
-            default:
-                return style.stroke || "#6366f1"; // Default color
-        }
-    };
-    const [edgePath, arrowMarkers] = (0, react_1.useMemo)(() => {
-        // Always use curved paths for better visual appeal
-        const centerX = (sourceX + targetX) / 2;
-        const centerY = (sourceY + targetY) / 2;
-        const path = `M ${sourceX} ${sourceY} Q ${centerX} ${centerY} ${targetX} ${targetY}`;
-        // Create arrow markers for bidirectional edges
-        const markers = [];
-        if (bidirectional) {
-            const strokeColor = getStrokeColor();
-            // Forward arrow (source to target)
-            markers.push((0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: `${id}-arrowhead-forward`, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: (0, jsx_runtime_1.jsx)("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor }) }), (0, jsx_runtime_1.jsx)("marker", { id: `${id}-arrowhead-backward`, markerWidth: "10", markerHeight: "7", refX: "1", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: (0, jsx_runtime_1.jsx)("polygon", { points: "10 0, 0 3.5, 10 7", fill: strokeColor }) })] }, `${id}-markers`));
-        }
-        return [path, markers];
-    }, [sourceX, sourceY, targetX, targetY, id, bidirectional, (_a = data === null || data === void 0 ? void 0 : data.details) === null || _a === void 0 ? void 0 : _a.state]);
-    const hoverStyle = Object.assign(Object.assign({}, style), { stroke: getStrokeColor(), strokeWidth: style.strokeWidth || 4, cursor: "pointer" });
-    const handleInspectClick = (event) => {
-        event.stopPropagation();
-        if (onInspect && data) {
-            onInspect(data);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("g", { "data-edge-id": id, children: [arrowMarkers, (0, jsx_runtime_1.jsx)("path", { id: id, className: "react-flow__edge-path", d: edgePath, markerEnd: bidirectional ? `url(#${id}-arrowhead-forward)` : markerEnd, markerStart: bidirectional ? `url(#${id}-arrowhead-backward)` : undefined, style: hoverStyle }), (data === null || data === void 0 ? void 0 : data.label) && ((0, jsx_runtime_1.jsx)("foreignObject", { x: (sourceX + targetX) / 2 - 50, y: (sourceY + targetY) / 2 - 20, width: "100", height: "40", style: { overflow: "visible", pointerEvents: "none" }, children: (0, jsx_runtime_1.jsx)("div", { className: "edge-label-renderer", style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "100%",
-                        height: "100%",
-                        pointerEvents: "auto"
-                    }, children: (0, jsx_runtime_1.jsx)("button", { className: "edge-label-button", onClick: handleInspectClick, style: {
-                            background: "#6366f1",
-                            color: "white",
-                            border: "none",
-                            borderRadius: 6,
-                            padding: "4px 12px",
-                            fontSize: 12,
-                            fontWeight: 600,
-                            cursor: "pointer",
-                            boxShadow: "0 2px 8px rgba(99,102,241,0.10)",
-                            transition: "background 0.2s"
-                        }, children: "Inspect" }) }) })), (0, jsx_runtime_1.jsx)("style", { children: `
-          .edge-label-renderer {
-            z-index: 8001;
-            user-select: none;
-            pointer-events: auto;
-          }
-
-          .edge-label-button {
-            pointer-events: auto;
-          }
-        ` })] }));
-};
-exports.Edge = Edge;

package/dist/cjs/components/FileSelector.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileSelector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = false, disabled = false }) => {
-    const handleRefresh = (e) => {
-        e.stopPropagation();
-        onRefresh();
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, jsx_runtime_1.jsxs)("select", { value: currentFile || "", onChange: (e) => onFileSelect(e.target.value), disabled: disabled, style: {
-                    cursor: "pointer",
-                    padding: "8px 16px 8px 16px",
-                    borderRadius: "4px",
-                    fontSize: "14px",
-                    border: "1px solid #ccc",
-                    appearance: "none",
-                    WebkitAppearance: "none",
-                    MozAppearance: "none"
-                }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a RailTracks Run..." }), files.map((file) => ((0, jsx_runtime_1.jsx)("option", { value: file.name, children: file.name }, file.name)))] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRefresh, disabled: loading || disabled, title: "Refresh files", style: {
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    padding: "4px",
-                    borderRadius: "4px"
-                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16, style: { animation: loading ? "spin 1s linear infinite" : "none" } }) })] }));
-};
-exports.FileSelector = FileSelector;

package/dist/cjs/components/Node.js

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Node = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const reactflow_1 = require("reactflow");
-const Node = ({ data, id }) => {
-    var _a;
-    const { fitView } = (0, reactflow_1.useReactFlow)();
-    // Check if this node has any outgoing edges (source edges)
-    const hasOutgoingEdges = ((_a = data.edges) === null || _a === void 0 ? void 0 : _a.some((edge) => edge.source === id)) || false;
-    const handleNodeClick = () => {
-        // Zoom to the node
-        fitView({
-            nodes: [{ id }],
-            duration: 800,
-            padding: 0.1,
-            minZoom: 0.5,
-            maxZoom: 1.5
-        });
-        // Open inspection drawer
-        if (data.onInspect) {
-            data.onInspect({
-                label: data.label,
-                description: data.description,
-                nodeType: data.nodeType,
-                step: data.step,
-                time: data.time,
-                icon: data.icon
-            });
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "agent-node", onClick: handleNodeClick, style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: { background: "#6366f1" } }), (0, jsx_runtime_1.jsxs)("div", { className: "agent-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "agent-icon", children: data.icon || "📋" }), (0, jsx_runtime_1.jsx)("div", { className: "agent-label", children: data.label })] }), data.description && (0, jsx_runtime_1.jsx)("div", { className: "agent-description", children: data.description }), data.step && ((0, jsx_runtime_1.jsxs)("div", { className: "agent-meta", children: [(0, jsx_runtime_1.jsxs)("span", { className: "step", children: ["Step: ", data.step] }), data.time && (0, jsx_runtime_1.jsx)("span", { className: "time", children: new Date(data.time * 1000).toLocaleTimeString() })] })), hasOutgoingEdges && (0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: { background: "#6366f1" } })] }), (0, jsx_runtime_1.jsx)("style", { children: `
-          .agent-node {
-            padding: 12px;
-            border-radius: 8px;
-            background: white;
-            border: 2px solid #e5e7eb;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            min-width: 200px;
-            max-width: 250px;
-            transition: all 0.2s ease;
-            position: relative;
-            z-index: -5;
-          }
-          
-          .agent-node:hover {
-            border-color: #6366f1;
-            box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
-          }
-          
-          .agent-header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 8px;
-          }
-          
-          .agent-icon {
-            font-size: 20px;
-          }
-          
-          .agent-label {
-            font-weight: 600;
-            color: #1f2937;
-            font-size: 14px;
-            word-break: break-word;
-          }
-          
-          .agent-description {
-            color: #6b7280;
-            font-size: 12px;
-            line-height: 1.4;
-            word-break: break-word;
-            white-space: pre-line;
-          }
-          
-          .agent-meta {
-            margin-top: 8px;
-            padding-top: 8px;
-            border-top: 1px solid #e5e7eb;
-            display: flex;
-            justify-content: space-between;
-            font-size: 10px;
-            color: #9ca3af;
-          }
-          
-          .step {
-            background: #f3f4f6;
-            padding: 2px 6px;
-            border-radius: 4px;
-          }
-          
-          .time {
-            font-family: monospace;
-          }
-          
-          .react-flow__handle {
-            width: 8px;
-            height: 8px;
-            border: 2px solid #6366f1;
-          }
-        ` })] }));
-};
-exports.Node = Node;

package/dist/cjs/components/Timeline.js

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Timeline = ({ stamps, currentStep, isPlaying, onStepChange, onPlayPause }) => {
-    const maxStep = stamps.length > 0 ? Math.max(...stamps.map((s) => s.step)) : 0;
-    const minStep = stamps.length > 0 ? Math.min(...stamps.map((s) => s.step)) : 0;
-    const totalSteps = maxStep - minStep + 1;
-    // Initialize Bootstrap tooltips
-    (0, react_1.useEffect)(() => {
-        // Initialize all tooltips
-        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-        const tooltipList = Array.from(tooltipTriggerList).map((tooltipTriggerEl) => new window.bootstrap.Tooltip(tooltipTriggerEl));
-        // Cleanup function to dispose tooltips
-        return () => {
-            tooltipList.forEach((tooltip) => tooltip.dispose());
-        };
-    }, [stamps, currentStep]); // Re-initialize when stamps or currentStep changes
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: "60px",
-            backgroundColor: "white",
-            borderTop: "1px solid #e5e7eb",
-            display: "flex",
-            alignItems: "center",
-            padding: "0 16px",
-            gap: "12px",
-            zIndex: 10
-        }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onPlayPause, style: {
-                    width: "32px",
-                    height: "32px",
-                    borderRadius: "50%",
-                    border: "1px solid #d1d5db",
-                    backgroundColor: "white",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease"
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "#f3f4f6";
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "white";
-                }, children: isPlaying ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                width: "3px",
-                                height: "12px",
-                                backgroundColor: "#374151"
-                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                width: "3px",
-                                height: "12px",
-                                backgroundColor: "#374151"
-                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: {
-                        width: 0,
-                        height: 0,
-                        borderLeft: "8px solid #374151",
-                        borderTop: "6px solid transparent",
-                        borderBottom: "6px solid transparent",
-                        marginLeft: "2px"
-                    } })) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    flex: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    padding: "0 8px"
-                }, children: Array.from({ length: totalSteps }, (_, index) => {
-                    var _a;
-                    const step = minStep + index;
-                    const isActive = step === currentStep;
-                    const isPast = step < currentStep;
-                    const hasStep = stamps.some((s) => s.step === step);
-                    // Determine background color based on step state
-                    let backgroundColor = "white";
-                    if (isActive) {
-                        backgroundColor = "#6366f1";
-                    }
-                    else if (isPast) {
-                        backgroundColor = hasStep ? "#fef3c7" : "#fef3c7"; // Light yellow for past steps
-                    }
-                    else if (hasStep) {
-                        backgroundColor = "#e5e7eb";
-                    }
-                    const tooltipText = `Step ${step}${hasStep ? ` - ${((_a = stamps.find((s) => s.step === step)) === null || _a === void 0 ? void 0 : _a.identifier) || ""}` : " - No activity"}`;
-                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => onStepChange(step), "data-bs-toggle": "tooltip", "data-bs-placement": "top", "data-bs-title": tooltipText, style: {
-                            width: "16px",
-                            height: "16px",
-                            borderRadius: "50%",
-                            border: isActive ? "2px solid #6366f1" : "1px solid #d1d5db",
-                            backgroundColor: backgroundColor,
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            position: "relative"
-                        }, onMouseEnter: (e) => {
-                            if (!isActive) {
-                                if (isPast) {
-                                    e.currentTarget.style.backgroundColor = hasStep ? "#fde68a" : "#fde68a"; // Darker yellow on hover for past steps
-                                }
-                                else {
-                                    e.currentTarget.style.backgroundColor = hasStep ? "#d1d5db" : "#f3f4f6";
-                                }
-                            }
-                        }, onMouseLeave: (e) => {
-                            if (!isActive) {
-                                if (isPast) {
-                                    e.currentTarget.style.backgroundColor = hasStep ? "#fef3c7" : "#fef3c7"; // Back to light yellow for past steps
-                                }
-                                else {
-                                    e.currentTarget.style.backgroundColor = hasStep ? "#e5e7eb" : "white";
-                                }
-                            }
-                        } }, step));
-                }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    fontSize: "12px",
-                    color: "#6b7280",
-                    minWidth: "60px",
-                    textAlign: "right"
-                }, children: [currentStep, " / ", maxStep] })] }));
-};
-exports.Timeline = Timeline;

package/dist/cjs/components/VerticalTimeline.js

@@ -1,160 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTimeline = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const VerticalTimeline = ({ stamps, currentStep, onStepChange, onToggle }) => {
-    const maxStep = stamps.length > 0 ? Math.max(...stamps.map((s) => s.step)) : 0;
-    const minStep = stamps.length > 0 ? Math.min(...stamps.map((s) => s.step)) : 0;
-    const totalSteps = maxStep - minStep + 1;
-    // Calculate latency for each step
-    const getStepLatency = (step) => {
-        const stepStamps = stamps.filter((s) => s.step === step);
-        if (stepStamps.length === 0)
-            return null;
-        // Calculate time difference from previous step
-        const prevStep = step - 1;
-        const prevStepStamps = stamps.filter((s) => s.step === prevStep);
-        if (prevStepStamps.length === 0)
-            return null;
-        const currentTime = Math.min(...stepStamps.map((s) => s.time));
-        const prevTime = Math.max(...prevStepStamps.map((s) => s.time));
-        return currentTime - prevTime;
-    };
-    // Get step label
-    const getStepLabel = (step) => {
-        var _a;
-        const stepStamps = stamps.filter((s) => s.step === step);
-        if (stepStamps.length === 0)
-            return `Step ${step}`;
-        // Get the first identifier for this step
-        const identifier = ((_a = stepStamps[0]) === null || _a === void 0 ? void 0 : _a.identifier) || "";
-        return identifier || `Step ${step}`;
-    };
-    // Format latency
-    const formatLatency = (latency) => {
-        if (latency < 1000) {
-            return `${latency.toFixed(0)}ms`;
-        }
-        else if (latency < 60000) {
-            return `${(latency / 1000).toFixed(1)}s`;
-        }
-        else {
-            return `${(latency / 60000).toFixed(1)}m`;
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            width: "100%",
-            height: "100%",
-            backgroundColor: "white",
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden"
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                    padding: "16px",
-                    borderBottom: "1px solid #e5e7eb",
-                    backgroundColor: "#f9fafb",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start"
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: {
-                                    margin: 0,
-                                    fontSize: "16px",
-                                    fontWeight: 600,
-                                    color: "#1f2937"
-                                }, children: "Timeline" }), (0, jsx_runtime_1.jsx)("p", { style: {
-                                    margin: "4px 0 0 0",
-                                    fontSize: "12px",
-                                    color: "#6b7280"
-                                }, children: "Click to jump to step" })] }), onToggle && ((0, jsx_runtime_1.jsx)("button", { onClick: onToggle, style: {
-                            border: "none",
-                            background: "none",
-                            cursor: "pointer",
-                            color: "#6b7280",
-                            padding: "4px",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            transition: "color 0.2s ease"
-                        }, title: "Collapse Panel", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 16 }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    flex: 1,
-                    overflowY: "auto",
-                    padding: "8px 0 16px 0" // Add bottom padding
-                }, children: Array.from({ length: totalSteps }, (_, index) => {
-                    const step = minStep + index;
-                    const isActive = step === currentStep;
-                    const isPast = step < currentStep;
-                    const hasStep = stamps.some((s) => s.step === step);
-                    const latency = getStepLatency(step);
-                    const label = getStepLabel(step);
-                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => hasStep && onStepChange(step), style: {
-                            padding: "12px 16px",
-                            borderBottom: "1px solid #f3f4f6",
-                            cursor: hasStep ? "pointer" : "default",
-                            backgroundColor: isActive ? "#f0f9ff" : "transparent",
-                            borderLeft: isActive ? "4px solid #6366f1" : "4px solid transparent",
-                            transition: "all 0.2s ease",
-                            position: "relative"
-                        }, onMouseEnter: (e) => {
-                            if (hasStep && !isActive) {
-                                e.currentTarget.style.backgroundColor = "#f8fafc";
-                            }
-                        }, onMouseLeave: (e) => {
-                            if (hasStep && !isActive) {
-                                e.currentTarget.style.backgroundColor = "transparent";
-                            }
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "8px",
-                                    marginBottom: "4px"
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            width: "12px",
-                                            height: "12px",
-                                            borderRadius: "50%",
-                                            backgroundColor: isActive ? "#6366f1" : isPast ? "#fbbf24" : hasStep ? "#9ca3af" : "#e5e7eb",
-                                            border: isActive ? "2px solid #6366f1" : "1px solid #d1d5db",
-                                            flexShrink: 0
-                                        } }), (0, jsx_runtime_1.jsxs)("span", { style: {
-                                            fontSize: "14px",
-                                            fontWeight: isActive ? 600 : 500,
-                                            color: isActive ? "#1f2937" : "#6b7280"
-                                        }, children: ["Step ", step] }), latency && ((0, jsx_runtime_1.jsx)("span", { style: {
-                                            fontSize: "11px",
-                                            color: "#9ca3af",
-                                            backgroundColor: "#f3f4f6",
-                                            padding: "2px 6px",
-                                            borderRadius: "4px",
-                                            marginLeft: "auto"
-                                        }, children: formatLatency(latency) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    fontSize: "13px",
-                                    color: hasStep ? "#1f2937" : "#9ca3af",
-                                    lineHeight: "1.4",
-                                    wordBreak: "break-word",
-                                    fontStyle: hasStep ? "normal" : "italic"
-                                }, children: hasStep ? label : "No activity" }), isActive && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: "absolute",
-                                    right: "8px",
-                                    top: "50%",
-                                    transform: "translateY(-50%)",
-                                    width: "6px",
-                                    height: "6px",
-                                    borderRadius: "50%",
-                                    backgroundColor: "#6366f1",
-                                    animation: "pulse 2s infinite"
-                                } }))] }, step));
-                }) }), (0, jsx_runtime_1.jsx)("style", { children: `
-          @keyframes pulse {
-            0% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0.5;
-            }
-            100% {
-              opacity: 1;
-            }
-          }
-        ` })] }));
-};
-exports.VerticalTimeline = VerticalTimeline;

package/dist/cjs/hooks/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFlowData = exports.useApi = void 0;
-var useApi_1 = require("./useApi");
-Object.defineProperty(exports, "useApi", { enumerable: true, get: function () { return useApi_1.useApi; } });
-var useFlowData_1 = require("./useFlowData");
-Object.defineProperty(exports, "useFlowData", { enumerable: true, get: function () { return useFlowData_1.useFlowData; } });