@railtownai/railtracks-visualizer 0.0.4 → 0.0.5

package/dist/esm/App.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactFlowProvider } from "reactflow";
-import { useFlowData } from "./hooks";
-import { FileSelector } from "./components/FileSelector";
-import AgenticFlowVisualizer from "./AgenticFlowVisualizer";
-const App = () => {
-    const { availableFiles, currentFile, flowData, loading, error, loadFile, refreshFiles } = useFlowData();
-    const handleFileSelect = (filename) => {
-        loadFile(filename);
-    };
-    return (_jsxs("div", { className: "app", children: [_jsxs("div", { className: "app-header", children: [_jsx("h1", { children: "RailTracks Visualizer" }), _jsx("div", { className: "file-selector-container", children: _jsx(FileSelector, { files: availableFiles, currentFile: currentFile, onFileSelect: handleFileSelect, onRefresh: refreshFiles, loading: loading, disabled: loading }) })] }), error && (_jsx("div", { className: "error-message", children: _jsxs("p", { children: ["Error: ", error] }) })), _jsx("div", { className: "visualizer-container", children: loading ? (_jsxs("div", { className: "loading-state", children: [_jsx("div", { className: "loading-spinner" }), _jsx("p", { children: "Loading flow data..." })] })) : flowData ? (_jsx(ReactFlowProvider, { children: _jsx(AgenticFlowVisualizer, { flowData: flowData }) })) : (_jsx("div", { className: "no-data-state", children: _jsx("p", { children: "Please select a file to visualize the flow data" }) })) }), _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;
-        }
-      ` })] }));
-};
-export default App;

package/dist/esm/Visualizer.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ReactFlowProvider } from "reactflow";
-import AgenticFlowVisualizer from "./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 (_jsx(ReactFlowProvider, { children: _jsx(AgenticFlowVisualizer, { ...props }) }));
-};
-export default Visualizer;

package/dist/esm/components/Edge.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-export const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd, bidirectional = false, data, clientToSvgCoords, svgRef, onInspect }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    // Function to determine stroke color based on edge state
-    const getStrokeColor = () => {
-        const state = data?.details?.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] = 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(_jsxs("defs", { children: [_jsx("marker", { id: `${id}-arrowhead-forward`, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: _jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor }) }), _jsx("marker", { id: `${id}-arrowhead-backward`, markerWidth: "10", markerHeight: "7", refX: "1", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: _jsx("polygon", { points: "10 0, 0 3.5, 10 7", fill: strokeColor }) })] }, `${id}-markers`));
-        }
-        return [path, markers];
-    }, [sourceX, sourceY, targetX, targetY, id, bidirectional, data?.details?.state]);
-    const hoverStyle = {
-        ...style,
-        stroke: getStrokeColor(),
-        strokeWidth: style.strokeWidth || 4,
-        cursor: "pointer"
-    };
-    const handleInspectClick = (event) => {
-        event.stopPropagation();
-        if (onInspect && data) {
-            onInspect(data);
-        }
-    };
-    return (_jsxs("g", { "data-edge-id": id, children: [arrowMarkers, _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?.label && (_jsx("foreignObject", { x: (sourceX + targetX) / 2 - 50, y: (sourceY + targetY) / 2 - 20, width: "100", height: "40", style: { overflow: "visible", pointerEvents: "none" }, children: _jsx("div", { className: "edge-label-renderer", style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "100%",
-                        height: "100%",
-                        pointerEvents: "auto"
-                    }, children: _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" }) }) })), _jsx("style", { children: `
-          .edge-label-renderer {
-            z-index: 8001;
-            user-select: none;
-            pointer-events: auto;
-          }
-
-          .edge-label-button {
-            pointer-events: auto;
-          }
-        ` })] }));
-};

package/dist/esm/components/FileSelector.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RefreshCw } from "lucide-react";
-export const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = false, disabled = false }) => {
-    const handleRefresh = (e) => {
-        e.stopPropagation();
-        onRefresh();
-    };
-    return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_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: [_jsx("option", { value: "", children: "Select a RailTracks Run..." }), files.map((file) => (_jsx("option", { value: file.name, children: file.name }, file.name)))] }), _jsx("button", { onClick: handleRefresh, disabled: loading || disabled, title: "Refresh files", style: {
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    padding: "4px",
-                    borderRadius: "4px"
-                }, children: _jsx(RefreshCw, { size: 16, style: { animation: loading ? "spin 1s linear infinite" : "none" } }) })] }));
-};

package/dist/esm/components/Node.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Handle, Position, useReactFlow } from "reactflow";
-const Node = ({ data, id }) => {
-    const { fitView } = useReactFlow();
-    // Check if this node has any outgoing edges (source edges)
-    const hasOutgoingEdges = data.edges?.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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agent-node", onClick: handleNodeClick, style: { cursor: "pointer" }, children: [_jsx(Handle, { type: "target", position: Position.Top, style: { background: "#6366f1" } }), _jsxs("div", { className: "agent-header", children: [_jsx("div", { className: "agent-icon", children: data.icon || "📋" }), _jsx("div", { className: "agent-label", children: data.label })] }), data.description && _jsx("div", { className: "agent-description", children: data.description }), data.step && (_jsxs("div", { className: "agent-meta", children: [_jsxs("span", { className: "step", children: ["Step: ", data.step] }), data.time && _jsx("span", { className: "time", children: new Date(data.time * 1000).toLocaleTimeString() })] })), hasOutgoingEdges && _jsx(Handle, { type: "source", position: Position.Bottom, style: { background: "#6366f1" } })] }), _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;
-          }
-        ` })] }));
-};
-export { Node };

package/dist/esm/components/Timeline.js

@@ -1,118 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "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
-    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 (_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: [_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 ? (_jsxs("div", { style: { display: "flex", gap: "2px" }, children: [_jsx("div", { style: {
-                                width: "3px",
-                                height: "12px",
-                                backgroundColor: "#374151"
-                            } }), _jsx("div", { style: {
-                                width: "3px",
-                                height: "12px",
-                                backgroundColor: "#374151"
-                            } })] })) : (_jsx("div", { style: {
-                        width: 0,
-                        height: 0,
-                        borderLeft: "8px solid #374151",
-                        borderTop: "6px solid transparent",
-                        borderBottom: "6px solid transparent",
-                        marginLeft: "2px"
-                    } })) }), _jsx("div", { style: {
-                    flex: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    padding: "0 8px"
-                }, 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);
-                    // 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 ? ` - ${stamps.find((s) => s.step === step)?.identifier || ""}` : " - No activity"}`;
-                    return (_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));
-                }) }), _jsxs("div", { style: {
-                    fontSize: "12px",
-                    color: "#6b7280",
-                    minWidth: "60px",
-                    textAlign: "right"
-                }, children: [currentStep, " / ", maxStep] })] }));
-};
-export { Timeline };

package/dist/esm/components/VerticalTimeline.js

@@ -1,156 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PanelLeft } from "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) => {
-        const stepStamps = stamps.filter((s) => s.step === step);
-        if (stepStamps.length === 0)
-            return `Step ${step}`;
-        // Get the first identifier for this step
-        const identifier = stepStamps[0]?.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 (_jsxs("div", { style: {
-            width: "100%",
-            height: "100%",
-            backgroundColor: "white",
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden"
-        }, children: [_jsxs("div", { style: {
-                    padding: "16px",
-                    borderBottom: "1px solid #e5e7eb",
-                    backgroundColor: "#f9fafb",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start"
-                }, children: [_jsxs("div", { children: [_jsx("h3", { style: {
-                                    margin: 0,
-                                    fontSize: "16px",
-                                    fontWeight: 600,
-                                    color: "#1f2937"
-                                }, children: "Timeline" }), _jsx("p", { style: {
-                                    margin: "4px 0 0 0",
-                                    fontSize: "12px",
-                                    color: "#6b7280"
-                                }, children: "Click to jump to step" })] }), onToggle && (_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: _jsx(PanelLeft, { size: 16 }) }))] }), _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 (_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: [_jsxs("div", { style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "8px",
-                                    marginBottom: "4px"
-                                }, children: [_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
-                                        } }), _jsxs("span", { style: {
-                                            fontSize: "14px",
-                                            fontWeight: isActive ? 600 : 500,
-                                            color: isActive ? "#1f2937" : "#6b7280"
-                                        }, children: ["Step ", step] }), latency && (_jsx("span", { style: {
-                                            fontSize: "11px",
-                                            color: "#9ca3af",
-                                            backgroundColor: "#f3f4f6",
-                                            padding: "2px 6px",
-                                            borderRadius: "4px",
-                                            marginLeft: "auto"
-                                        }, children: formatLatency(latency) }))] }), _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 && (_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));
-                }) }), _jsx("style", { children: `
-          @keyframes pulse {
-            0% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0.5;
-            }
-            100% {
-              opacity: 1;
-            }
-          }
-        ` })] }));
-};
-export { VerticalTimeline };

package/dist/esm/hooks/index.js

@@ -1,2 +0,0 @@
-export { useApi } from "./useApi";
-export { useFlowData } from "./useFlowData";