@railtownai/railtracks-visualizer 0.0.2 → 0.0.4

package/dist/{App.js → esm/App.js}

@@ -8,82 +8,82 @@ const App = () => {
     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;
-        }
+    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

@@ -0,0 +1,11 @@
+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/{components → esm/components}/Edge.js

@@ -60,15 +60,15 @@ export const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, t
                             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;
-          }
+                        }, 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 → esm/components}/Node.js

@@ -25,76 +25,76 @@ const Node = ({ data, id }) => {
             });
         }
     };
-    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;
-          }
+    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 → esm/components}/VerticalTimeline.js

@@ -139,18 +139,18 @@ const VerticalTimeline = ({ stamps, currentStep, onStepChange, onToggle }) => {
                                     backgroundColor: "#6366f1",
                                     animation: "pulse 2s infinite"
                                 } }))] }, step));
-                }) }), _jsx("style", { children: `
-          @keyframes pulse {
-            0% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0.5;
-            }
-            100% {
-              opacity: 1;
-            }
-          }
+                }) }), _jsx("style", { children: `
+          @keyframes pulse {
+            0% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+            100% {
+              opacity: 1;
+            }
+          }
         ` })] }));
 };
 export { VerticalTimeline };

package/dist/{index.js → esm/index.js}

@@ -1,4 +1,5 @@
 // Library entry point for npm package
+export { default as Visualizer } from "./Visualizer";
 export { default as AgenticFlowVisualizer } from "./AgenticFlowVisualizer";
 export { default as App } from "./App";
 // Export components
@@ -9,5 +10,3 @@ export { Timeline } from "./components/Timeline";
 export { VerticalTimeline } from "./components/VerticalTimeline";
 // Export hooks
 export * from "./hooks";
-// Export types
-export * from "./types";

package/dist/esm/test/Visualizer.test.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import Visualizer from "../Visualizer";
+// Mock ReactFlow and its provider since we're testing the wrapper, not ReactFlow itself
+vi.mock("reactflow", () => ({
+    ReactFlowProvider: ({ children }) => (_jsx("div", { "data-testid": "react-flow-provider", children: children })),
+    useReactFlow: () => ({
+        fitView: vi.fn(),
+        getNodes: vi.fn(() => []),
+        getEdges: vi.fn(() => [])
+    })
+}));
+// Mock the AgenticFlowVisualizer component
+vi.mock("../AgenticFlowVisualizer", () => ({
+    default: ({ flowData, width, height, className }) => (_jsxs("div", { "data-testid": "agentic-flow-visualizer", "data-width": width || "", "data-height": height || "", "data-classname": className || "", "data-has-flow-data": !!flowData, children: ["AgenticFlowVisualizer Mock", !flowData && _jsx("div", { "data-testid": "no-data-state", children: "No flow data available" })] }))
+}));
+// Mock data for testing
+const mockFlowData = {
+    nodes: [
+        {
+            identifier: "node-1",
+            node_type: "agent",
+            stamp: {
+                step: 1,
+                time: 1634567890,
+                identifier: "stamp-1"
+            },
+            details: {
+                internals: {
+                    llm_details: [
+                        {
+                            model_name: "gpt-4",
+                            model_provider: "openai",
+                            input: [{ role: "user", content: "test" }],
+                            output: { role: "assistant", content: "response" },
+                            input_tokens: 10,
+                            output_tokens: 5,
+                            total_cost: 0.001,
+                            system_fingerprint: "test-fingerprint"
+                        }
+                    ]
+                }
+            },
+            parent: null
+        },
+        {
+            identifier: "node-2",
+            node_type: "tool",
+            stamp: {
+                step: 2,
+                time: 1634567891,
+                identifier: "stamp-2"
+            },
+            details: {
+                internals: {
+                    llm_details: []
+                }
+            },
+            parent: null
+        }
+    ],
+    edges: [
+        {
+            identifier: "edge-1",
+            source: "node-1",
+            target: "node-2",
+            stamp: {
+                step: 2,
+                time: 1634567891,
+                identifier: "edge-stamp-1"
+            },
+            details: {
+                input_args: [],
+                output: null
+            },
+            parent: null
+        }
+    ],
+    stamps: [
+        {
+            step: 1,
+            time: 1634567890,
+            identifier: "stamp-1"
+        },
+        {
+            step: 2,
+            time: 1634567891,
+            identifier: "stamp-2"
+        }
+    ]
+};
+describe("Visualizer", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe("Component Rendering", () => {
+        it("renders successfully without any props", () => {
+            render(_jsx(Visualizer, {}));
+            expect(screen.getByTestId("react-flow-provider")).toBeInTheDocument();
+            expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        it("wraps AgenticFlowVisualizer with ReactFlowProvider", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData }));
+            const provider = screen.getByTestId("react-flow-provider");
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(provider).toBeInTheDocument();
+            expect(provider).toContainElement(visualizer);
+        });
+        it("renders with valid flow data", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
+            expect(screen.queryByTestId("no-data-state")).not.toBeInTheDocument();
+        });
+        it("handles null flow data gracefully", () => {
+            render(_jsx(Visualizer, { flowData: null }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "false");
+        });
+        it("handles undefined flow data gracefully", () => {
+            render(_jsx(Visualizer, { flowData: undefined }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "false");
+        });
+    });
+    describe("Props Forwarding", () => {
+        it("forwards flowData prop correctly", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
+        });
+        it("forwards width prop correctly", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData, width: "800px" }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-width", "800px");
+        });
+        it("forwards height prop correctly", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData, height: 600 }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-height", "600");
+        });
+        it("forwards className prop correctly", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData, className: "custom-class" }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-classname", "custom-class");
+        });
+        it("forwards all props together correctly", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData, width: "100%", height: "500px", className: "test-visualizer" }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
+            expect(visualizer).toHaveAttribute("data-width", "100%");
+            expect(visualizer).toHaveAttribute("data-height", "500px");
+            expect(visualizer).toHaveAttribute("data-classname", "test-visualizer");
+        });
+        it("uses default values when optional props are not provided", () => {
+            render(_jsx(Visualizer, { flowData: mockFlowData }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-width", "");
+            expect(visualizer).toHaveAttribute("data-height", "");
+            expect(visualizer).toHaveAttribute("data-classname", "");
+        });
+    });
+    describe("Integration as NPM Package Component", () => {
+        it("can be imported and used as a standalone component", () => {
+            // This test ensures the component works when imported by users
+            const TestApp = () => (_jsxs("div", { children: [_jsx("h1", { children: "My App" }), _jsx(Visualizer, { flowData: mockFlowData })] }));
+            render(_jsx(TestApp, {}));
+            expect(screen.getByText("My App")).toBeInTheDocument();
+            expect(screen.getByTestId("react-flow-provider")).toBeInTheDocument();
+            expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        it("works in a React component with state", async () => {
+            const TestComponent = () => {
+                const [data, setData] = React.useState(null);
+                React.useEffect(() => {
+                    // Simulate loading data
+                    setTimeout(() => setData(mockFlowData), 100);
+                }, []);
+                return (_jsxs("div", { children: [_jsx("button", { onClick: () => setData(null), children: "Clear Data" }), _jsx(Visualizer, { flowData: data })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            // Initially no data
+            expect(screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "false");
+            // Wait for data to load
+            await waitFor(() => {
+                expect(screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "true");
+            });
+        });
+        it("handles multiple instances on the same page", () => {
+            render(_jsxs("div", { children: [_jsx(Visualizer, { flowData: mockFlowData, className: "visualizer-1" }), _jsx(Visualizer, { flowData: null, className: "visualizer-2" })] }));
+            const visualizers = screen.getAllByTestId("agentic-flow-visualizer");
+            expect(visualizers).toHaveLength(2);
+            expect(visualizers[0]).toHaveAttribute("data-classname", "visualizer-1");
+            expect(visualizers[0]).toHaveAttribute("data-has-flow-data", "true");
+            expect(visualizers[1]).toHaveAttribute("data-classname", "visualizer-2");
+            expect(visualizers[1]).toHaveAttribute("data-has-flow-data", "false");
+        });
+    });
+    describe("Error Handling", () => {
+        it("handles malformed flow data gracefully", () => {
+            const malformedData = {
+                nodes: null,
+                edges: undefined
+            };
+            expect(() => {
+                render(_jsx(Visualizer, { flowData: malformedData }));
+            }).not.toThrow();
+            expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        it("handles empty flow data", () => {
+            const emptyData = {
+                nodes: [],
+                edges: [],
+                stamps: []
+            };
+            render(_jsx(Visualizer, { flowData: emptyData }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-has-flow-data", "true");
+        });
+    });
+    describe("TypeScript Compatibility", () => {
+        it("accepts correct prop types", () => {
+            // This test ensures TypeScript compatibility
+            const props = {
+                flowData: mockFlowData,
+                width: "100%",
+                height: 600,
+                className: "test-class"
+            };
+            render(_jsx(Visualizer, { ...props }));
+            expect(screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        it("works with partial props", () => {
+            // Test that optional props work correctly
+            render(_jsx(Visualizer, { flowData: mockFlowData, width: "50%" }));
+            const visualizer = screen.getByTestId("agentic-flow-visualizer");
+            expect(visualizer).toHaveAttribute("data-width", "50%");
+            expect(visualizer).toHaveAttribute("data-height", "");
+        });
+    });
+});

package/dist/{test → esm/test}/setup.js

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { vi } from "vitest";
 // Mock ResizeObserver for React Flow components
-global.ResizeObserver = class ResizeObserver {
+globalThis.ResizeObserver = class ResizeObserver {
     observe() { }
     unobserve() { }
     disconnect() { }

package/dist/{AgenticFlowVisualizer.d.ts → types/AgenticFlowVisualizer.d.ts}

@@ -1,8 +1,8 @@
 import React from "react";
 import "reactflow/dist/style.css";
 import { DataJsonStructure } from "./hooks";
-interface AgenticFlowVisualizerProps {
-    flowData?: DataJsonStructure;
+export interface AgenticFlowVisualizerProps {
+    flowData?: DataJsonStructure | null;
     width?: string | number;
     height?: string | number;
     className?: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgenticFlowVisualizer.d.ts","sourceRoot":"","sources":["../../src/AgenticFlowVisualizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,OAAO,0BAA0B,CAAC;AAMlC,OAAO,EAA8B,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMxE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqJD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAwyB/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/types/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"}