@railtownai/railtracks-visualizer 0.0.20 → 0.0.22

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

@@ -1,5 +1,5 @@
 import React from "react";
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 import { AgentRun } from "../dto/AgentRun";
 export interface AgenticFlowVisualizerProps {
     flowData?: AgentRun | null;
@@ -14,6 +14,7 @@ export interface AgenticFlowVisualizerProps {
     disableAutoFit?: boolean;
     showTimeline?: boolean;
     minNodeSpacing?: number;
+    onInspect?: (nodeData: any) => void;
 }
 declare const AgenticFlowVisualizer: React.FC<AgenticFlowVisualizerProps>;
 export default AgenticFlowVisualizer;

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

@@ -1,13 +1,11 @@
 import React from "react";
-import { AgentRunNode } from "../dto/AgentRunNode";
-import { AgentRunEdge } from "../dto/AgentRunEdge";
 type NodeType = "Tool" | "Agent" | "Coordinator";
 interface NodeData {
     label: string;
     nodeType?: NodeType;
-    details?: AgentRunNode["details"];
+    details?: any;
     id?: string;
-    edges?: AgentRunEdge[];
+    edges?: any[];
     edgeDetails?: {
         input_args?: any[];
         input_kwargs?: any;
@@ -15,6 +13,7 @@ interface NodeData {
         state?: string;
         status?: string;
     }[];
+    onInspect?: (nodeData: NodeData) => void;
 }
 interface NodeProps {
     data: NodeData;

package/dist/types/components/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ThemeToggle: React.FC;

package/dist/types/components/nodes/AgentNode.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface NodeData {
+    label: string;
+    nodeType?: "Tool" | "Agent" | "Coordinator";
+    details?: any;
+    id?: string;
+    edges?: any[];
+    edgeDetails?: {
+        input_args?: any[];
+        input_kwargs?: any;
+        output?: any;
+        state?: string;
+        status?: string;
+    }[];
+}
+interface AgentNodeProps {
+    data: NodeData;
+    id: string;
+    onInspect?: (nodeData: NodeData) => void;
+}
+export declare const AgentNode: React.FC<AgentNodeProps>;
+export {};

package/dist/types/components/nodes/CoordinatorNode.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface NodeData {
+    label: string;
+    nodeType?: "Tool" | "Agent" | "Coordinator";
+    details?: any;
+    id?: string;
+    edges?: any[];
+    edgeDetails?: {
+        input_args?: any[];
+        input_kwargs?: any;
+        output?: any;
+        state?: string;
+        status?: string;
+    }[];
+}
+interface CoordinatorNodeProps {
+    data: NodeData;
+    id: string;
+    onInspect?: (nodeData: NodeData) => void;
+}
+export declare const CoordinatorNode: React.FC<CoordinatorNodeProps>;
+export {};

package/dist/types/components/nodes/ExpandableTextarea.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ExpandableTextareaProps {
+    label: string;
+    content: string;
+    isExpanded: boolean;
+    onToggle: (e?: React.MouseEvent) => void;
+}
+export declare const ExpandableTextarea: React.FC<ExpandableTextareaProps>;
+export {};

package/dist/types/components/nodes/NodeDetailsPopover.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface NodeData {
+    label: string;
+    nodeType?: "Tool" | "Agent" | "Coordinator";
+    details?: any;
+    id?: string;
+    edges?: any[];
+    edgeDetails?: {
+        input_args?: any[];
+        input_kwargs?: any;
+        output?: any;
+        state?: string;
+        status?: string;
+    }[];
+}
+interface NodeDetailsPopoverProps {
+    isVisible: boolean;
+    onClose: () => void;
+    nodeData: NodeData;
+    triggerRef: React.RefObject<HTMLDivElement>;
+}
+export declare const NodeDetailsPopover: React.FC<NodeDetailsPopoverProps>;
+export {};

package/dist/types/components/nodes/ToolNode.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface NodeData {
+    label: string;
+    nodeType?: "Tool" | "Agent" | "Coordinator";
+    details?: any;
+    id?: string;
+    edges?: any[];
+    edgeDetails?: {
+        input_args?: any[];
+        input_kwargs?: any;
+        output?: any;
+        state?: string;
+        status?: string;
+    }[];
+}
+interface ToolNodeProps {
+    data: NodeData;
+    id: string;
+    onInspect?: (nodeData: NodeData) => void;
+}
+export declare const ToolNode: React.FC<ToolNodeProps>;
+export {};

package/dist/types/components/nodes/index.d.ts

@@ -0,0 +1,5 @@
+export { AgentNode } from "./AgentNode";
+export { CoordinatorNode } from "./CoordinatorNode";
+export { ToolNode } from "./ToolNode";
+export { NodeDetailsPopover } from "./NodeDetailsPopover";
+export { ExpandableTextarea } from "./ExpandableTextarea";

package/dist/types/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export { useApi } from "./useApi";
 export { useFlowData } from "./useFlowData";
-export { useTheme } from "./useTheme";
 export type { JsonFile, ApiError } from "./useApi";
 export type { FlowDataState } from "./useFlowData";
 export type { AgentRunNode } from "../dto/AgentRunNode";

package/dist/types/index.d.ts

@@ -15,3 +15,5 @@ export type { AgentRunNode } from "./dto/AgentRunNode";
 export type { AgentRunEdge } from "./dto/AgentRunEdge";
 export { OpenAIIcon, AnthropicIcon, GoogleIcon } from "./components/icons";
 export * from "./lib";
+export { SafeThemeProvider, useSafeTheme } from "./lib/SafeThemeProvider";
+export { createSafeTheme, getSafeColor, getSafeSpacing, getSafeThemeValue } from "./lib/utils";

package/dist/types/lib/SafeThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { Theme } from "./theme";
+interface SafeThemeProviderProps {
+    children: ReactNode;
+    theme?: Theme;
+    fallbackTheme?: Theme;
+}
+/**
+ * Safe Theme Provider that ensures components always have access to a valid theme
+ * This prevents the "Cannot read properties of undefined (reading 'card')" error
+ * when the package is used in applications that don't provide a theme context
+ */
+export declare const SafeThemeProvider: React.FC<SafeThemeProviderProps>;
+/**
+ * Hook that provides a safe theme context
+ * Returns a theme object that is guaranteed to have all required properties
+ */
+export declare const useSafeTheme: () => Theme;
+export {};

package/dist/types/lib/ThemeProvider.d.ts

@@ -3,6 +3,7 @@ import { Theme } from "./theme";
 interface ThemeContextType {
     theme: Theme;
     setTheme: (theme: Theme) => void;
+    isDarkMode: boolean;
 }
 interface ThemeProviderProps {
     children: ReactNode;

package/dist/types/lib/index.d.ts

@@ -3,3 +3,5 @@ export * from "./layout";
 export * from "./theme";
 export * from "./ThemeProvider";
 export * from "./GlobalStyles";
+export * from "./SafeThemeProvider";
+export * from "./safeStyled";

package/dist/types/lib/safeStyled.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Safe styled-components wrapper that prevents undefined theme errors
+ * This wrapper ensures that styled components always have access to a valid theme
+ */
+export declare const safeStyled: {
+    div: (template: TemplateStringsArray, ...args: any[]) => import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    button: (template: TemplateStringsArray, ...args: any[]) => import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+    span: (template: TemplateStringsArray, ...args: any[]) => import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    h3: (template: TemplateStringsArray, ...args: any[]) => import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+    textarea: (template: TemplateStringsArray, ...args: any[]) => import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+};
+/**
+ * Safe theme color accessor for styled-components
+ * Usage: color: ${safeThemeColor('card')}
+ */
+export declare const safeThemeColor: (colorKey: string, fallback?: string) => (props: any) => string;
+/**
+ * Safe theme spacing accessor for styled-components
+ * Usage: padding: ${safeThemeSpacing('md')}
+ */
+export declare const safeThemeSpacing: (spacingKey: string, fallback?: string) => (props: any) => string;
+/**
+ * Safe theme value accessor for styled-components
+ * Usage: box-shadow: ${safeThemeValue('shadows.md', 'none')}
+ */
+export declare const safeThemeValue: (path: string, fallback?: any) => (props: any) => string;

package/dist/types/lib/utils.d.ts

@@ -47,3 +47,33 @@ export declare function getSpacing(theme: any, size: keyof typeof theme.spacing)
  * @returns The color value
  */
 export declare function getColor(theme: any, colorKey: keyof typeof theme.colors): string;
+/**
+ * Safe theme access utility - prevents undefined theme errors
+ * @param theme - The theme object (can be undefined)
+ * @param colorKey - The color key to access
+ * @param fallback - Fallback color if theme or color is undefined
+ * @returns The color value or fallback
+ */
+export declare function getSafeColor(theme: any, colorKey: string, fallback?: string): string;
+/**
+ * Safe theme access utility for spacing
+ * @param theme - The theme object (can be undefined)
+ * @param spacingKey - The spacing key to access
+ * @param fallback - Fallback spacing if theme or spacing is undefined
+ * @returns The spacing value or fallback
+ */
+export declare function getSafeSpacing(theme: any, spacingKey: string, fallback?: string): string;
+/**
+ * Safe theme access utility for any theme property
+ * @param theme - The theme object (can be undefined)
+ * @param path - The path to the property (e.g., 'colors.card', 'spacing.md')
+ * @param fallback - Fallback value if theme or property is undefined
+ * @returns The property value or fallback
+ */
+export declare function getSafeThemeValue(theme: any, path: string, fallback: any): any;
+/**
+ * Creates a safe theme object with fallbacks for all required properties
+ * @param theme - The theme object (can be undefined)
+ * @returns A safe theme object with fallbacks
+ */
+export declare function createSafeTheme(theme?: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "license": "Apache-2.0",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -42,8 +42,9 @@
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
+    "@xyflow/react": "12.8.4",
     "lucide-react": "0.525.0",
-    "reactflow": "11.11.4",
+    "react-countup": "6.5.3",
     "vaul": "1.1.2"
   },
   "scripts": {
@@ -61,7 +62,7 @@
     "storybook:preview": "npx http-server ./storybook-static",
     "storybook:deploy": "gh-pages -d storybook-static",
     "test:ui": "vitest --ui",
-    "test": "vitest run",
+    "test": "vitest run --silent",
     "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
   },
   "devDependencies": {

package/dist/types/hooks/useTheme.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from "../lib/theme";
-export declare const useTheme: () => {
-    isDarkMode: boolean;
-    theme: Theme;
-    toggleTheme: () => void;
-    setTheme: (theme: "light" | "dark") => void;
-};