@railtownai/railtracks-visualizer 0.0.1

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const App: React.FC;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EA6HhB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -0,0 +1,89 @@
+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/components/Edge.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+interface EdgeProps {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: any;
+    targetPosition: any;
+    style?: React.CSSProperties;
+    markerEnd?: string;
+    bidirectional?: boolean;
+    data?: {
+        label?: string;
+        source?: string;
+        target?: string;
+        step?: number;
+        time?: number;
+        details?: any;
+    };
+    clientToSvgCoords?: (clientX: number, clientY: number) => {
+        x: number;
+        y: number;
+    };
+    svgRef?: React.RefObject<SVGSVGElement>;
+    onInspect?: (edgeData: any) => void;
+}
+export declare const Edge: React.FC<EdgeProps>;
+export {};
+//# sourceMappingURL=Edge.d.ts.map

package/dist/components/Edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Edge.d.ts","sourceRoot":"","sources":["../../src/components/Edge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,GAAG,CAAC;KACf,CAAC;IACF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8JpC,CAAC"}

package/dist/components/Edge.js

@@ -0,0 +1,74 @@
+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/components/FileSelector.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { JsonFile } from "../hooks";
+interface FileSelectorProps {
+    files: JsonFile[];
+    currentFile: string | null;
+    onFileSelect: (filename: string) => void;
+    onRefresh: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export declare const FileSelector: React.FC<FileSelectorProps>;
+export {};
+//# sourceMappingURL=FileSelector.d.ts.map

package/dist/components/FileSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSelector.d.ts","sourceRoot":"","sources":["../../src/components/FileSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAC"}

package/dist/components/FileSelector.js

@@ -0,0 +1,24 @@
+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/components/Node.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface NodeData {
+    label: string;
+    description?: string;
+    nodeType?: string;
+    step?: number;
+    time?: number;
+    icon?: string;
+    onInspect?: (nodeData: any) => void;
+    id?: string;
+    edges?: any[];
+}
+interface NodeProps {
+    data: NodeData;
+    id: string;
+}
+declare const Node: React.FC<NodeProps>;
+export { Node };
+export type { NodeData };
+//# sourceMappingURL=Node.d.ts.map

package/dist/components/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../src/components/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;CACf;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0H7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Node.js

@@ -0,0 +1,100 @@
+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/components/Timeline.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface TimelineProps {
+    stamps: Array<{
+        step: number;
+        time: number;
+        identifier: string;
+    }>;
+    currentStep: number;
+    isPlaying: boolean;
+    onStepChange: (step: number) => void;
+    onPlayPause: () => void;
+}
+declare const Timeline: React.FC<TimelineProps>;
+export { Timeline };
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/components/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,UAAU,aAAa;IACrB,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4KrC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Timeline.js

@@ -0,0 +1,118 @@
+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/components/VerticalTimeline.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface IProps {
+    stamps: Array<{
+        step: number;
+        time: number;
+        identifier: string;
+    }>;
+    currentStep: number;
+    onStepChange: (step: number) => void;
+    onToggle?: () => void;
+}
+declare const VerticalTimeline: React.FC<IProps>;
+export { VerticalTimeline };
+//# sourceMappingURL=VerticalTimeline.d.ts.map

package/dist/components/VerticalTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalTimeline.d.ts","sourceRoot":"","sources":["../../src/components/VerticalTimeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACd,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkPtC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}