@railtownai/railtracks-visualizer 0.0.16 → 0.0.18

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

@@ -17,4 +17,3 @@ export interface AgenticFlowVisualizerProps {
 }
 declare const AgenticFlowVisualizer: React.FC<AgenticFlowVisualizerProps>;
 export default AgenticFlowVisualizer;
-//# sourceMappingURL=AgenticFlowVisualizer.d.ts.map

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

@@ -26,4 +26,3 @@ interface EdgeProps {
 }
 export declare const Edge: React.FC<EdgeProps>;
 export {};
-//# sourceMappingURL=Edge.d.ts.map

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { JsonFile } from "../hooks";
 interface FileSelectorProps {
-    files: JsonFile[];
+    files: {
+        name: string;
+    }[];
     currentFile: string | null;
     onFileSelect: (filename: string) => void;
     onRefresh: () => void;
@@ -10,4 +11,3 @@ interface FileSelectorProps {
 }
 export declare const FileSelector: React.FC<FileSelectorProps>;
 export {};
-//# sourceMappingURL=FileSelector.d.ts.map

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

@@ -23,4 +23,3 @@ interface NodeProps {
 declare const Node: React.FC<NodeProps>;
 export { Node };
 export type { NodeData };
-//# sourceMappingURL=Node.d.ts.map

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

@@ -3,7 +3,7 @@ interface IProps {
     stamps: Array<{
         step: number;
         time: number;
-        identifier: string;
+        identifier?: string;
     }>;
     currentStep: number;
     onStepChange: (step: number) => void;
@@ -11,4 +11,3 @@ interface IProps {
 }
 declare const Timeline: React.FC<IProps>;
 export { Timeline };
-//# sourceMappingURL=Timeline.d.ts.map

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

@@ -6,4 +6,3 @@ import { AgenticFlowVisualizerProps } from "./AgenticFlowVisualizer";
  */
 declare const Visualizer: React.FC<AgenticFlowVisualizerProps>;
 export default Visualizer;
-//# sourceMappingURL=Visualizer.d.ts.map

package/dist/types/components/icons/AnthropicIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface AnthropicIconProps {
-    className?: string;
+    width?: string | number;
+    height?: string | number;
 }
 export declare const AnthropicIcon: React.FC<AnthropicIconProps>;
 export {};
-//# sourceMappingURL=AnthropicIcon.d.ts.map

package/dist/types/components/icons/GoogleIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface GoogleIconProps {
-    className?: string;
+    width?: string | number;
+    height?: string | number;
 }
 export declare const GoogleIcon: React.FC<GoogleIconProps>;
 export {};
-//# sourceMappingURL=GoogleIcon.d.ts.map

package/dist/types/components/icons/OpenAIIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface OpenAIIconProps {
-    className?: string;
+    width?: string | number;
+    height?: string | number;
 }
 export declare const OpenAIIcon: React.FC<OpenAIIconProps>;
 export {};
-//# sourceMappingURL=OpenAIIcon.d.ts.map

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

@@ -1,4 +1,3 @@
 export { OpenAIIcon } from "./OpenAIIcon";
 export { AnthropicIcon } from "./AnthropicIcon";
 export { GoogleIcon } from "./GoogleIcon";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ui/badge.d.ts

@@ -4,4 +4,3 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
 export { Badge };
-//# sourceMappingURL=badge.d.ts.map

package/dist/types/components/ui/checkbox.d.ts

@@ -2,4 +2,3 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/types/components/ui/drawer.d.ts

@@ -22,4 +22,3 @@ declare const DrawerFooter: {
 declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };
-//# sourceMappingURL=drawer.d.ts.map

package/dist/types/components/ui/json-tree.d.ts

@@ -9,4 +9,3 @@ interface JsonTreeViewerProps {
 declare const JsonTreeViewer: React.FC<JsonTreeViewerProps>;
 export { JsonTreeViewer };
 export type { JsonTreeViewerProps };
-//# sourceMappingURL=json-tree.d.ts.map

package/dist/types/components/ui/select.d.ts

@@ -3,12 +3,11 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton };
-//# sourceMappingURL=select.d.ts.map
+declare const SelectTriggerWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContentWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabelWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItemWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparatorWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTriggerWithRef as SelectTrigger, SelectContentWithRef as SelectContent, SelectLabelWithRef as SelectLabel, SelectItemWithRef as SelectItem, SelectSeparatorWithRef as SelectSeparator, SelectScrollUpButtonWithRef as SelectScrollUpButton, SelectScrollDownButtonWithRef as SelectScrollDownButton };

package/dist/types/components/ui/sheet.d.ts

@@ -1,15 +1,12 @@
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { type VariantProps } from "class-variance-authority";
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
+    side?: "top" | "bottom" | "left" | "right";
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {
@@ -23,4 +20,3 @@ declare const SheetFooter: {
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
-//# sourceMappingURL=sheet.d.ts.map

package/dist/types/dto/AgentRun.d.ts

@@ -17,4 +17,3 @@ export interface AgentRun {
         identifier: string;
     }>;
 }
-//# sourceMappingURL=AgentRun.d.ts.map

package/dist/types/dto/AgentRunEdge.d.ts

@@ -16,4 +16,3 @@ export interface AgentRunEdge {
     };
     parent: AgentRunEdge | null;
 }
-//# sourceMappingURL=AgentRunEdge.d.ts.map

package/dist/types/dto/AgentRunNode.d.ts

@@ -32,4 +32,3 @@ export interface AgentRunNode {
     };
     parent: AgentRunNode | null;
 }
-//# sourceMappingURL=AgentRunNode.d.ts.map

package/dist/types/dto/AgentSession.d.ts

@@ -1,3 +1,2 @@
 import { AgentRun } from "./AgentRun";
 export type AgentSession = AgentRun[];
-//# sourceMappingURL=AgentSession.d.ts.map

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

@@ -1,8 +1,8 @@
 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";
 export type { AgentRunEdge } from "../dto/AgentRunEdge";
 export type { AgentRun } from "../dto/AgentRun";
-//# sourceMappingURL=index.d.ts.map

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

@@ -14,4 +14,3 @@ export declare const useApi: () => {
     loadJsonFile: (filename: string) => Promise<any>;
     triggerRefresh: () => Promise<any>;
 };
-//# sourceMappingURL=useApi.d.ts.map

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

@@ -16,4 +16,3 @@ export declare const useFlowData: () => {
     currentFile: string | null;
     flowData: AgentRun | null;
 };
-//# sourceMappingURL=useFlowData.d.ts.map

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

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

package/dist/types/index.d.ts

@@ -15,4 +15,3 @@ export type { AgentRunNode } from "./dto/AgentRunNode";
 export type { AgentRunEdge } from "./dto/AgentRunEdge";
 export { OpenAIIcon, AnthropicIcon, GoogleIcon } from "./components/icons";
 export * from "./lib";
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { Theme } from "./theme";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    theme?: Theme;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextType;
+export declare const useThemeValue: () => Theme;
+export {};

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

@@ -1,3 +1,5 @@
 export * from "./utils";
 export * from "./layout";
-//# sourceMappingURL=index.d.ts.map
+export * from "./theme";
+export * from "./ThemeProvider";
+export * from "./GlobalStyles";

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

@@ -12,4 +12,3 @@ export interface LayoutOptions {
  * Calculates a clean tree layout: parents centered above children, siblings spaced evenly, no overlap.
  */
 export declare const calculateAutoLayout: (nodes: AgentRunNode[], edges: AgentRunEdge[], options?: LayoutOptions) => Map<string, Position>;
-//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1,64 @@
+export interface Theme {
+    colors: {
+        background: string;
+        foreground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        destructive: string;
+        destructiveForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    transitions: {
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+}
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;
+export declare const defaultTheme: Theme;

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

@@ -7,22 +7,43 @@ export declare function cn(...inputs: ClassValue[]): string;
  */
 export declare function toTitleCase(str: string): string;
 /**
- * Truncates text to specified length with ellipsis
+ * Formats a currency value
+ * @param value - The value to format
+ * @returns The formatted currency string
+ */
+export declare function formatCurrency(value: number | null | undefined): string;
+/**
+ * Formats latency in a human-readable format
+ * @param latencyMs - Latency in milliseconds
+ * @returns The formatted latency string
+ */
+export declare function formatLatency(latencyMs: number): string;
+/**
+ * Truncates text to a specified length
  * @param text - The text to truncate
- * @param maxLength - The maximum length of the text
+ * @param maxLength - The maximum length
  * @returns The truncated text
  */
 export declare function truncateText(text: string, maxLength: number): string;
 /**
- * Formats a number as currency with $0.00 format
- * @param amount - The amount to format
- * @returns The formatted currency string
+ * Styled-components utility for conditional styling
+ * @param condition - The condition to check
+ * @param trueStyle - The style to apply if condition is true
+ * @param falseStyle - The style to apply if condition is false (optional)
+ * @returns The appropriate style string
+ */
+export declare function conditionalStyle(condition: boolean, trueStyle: string, falseStyle?: string): string;
+/**
+ * Styled-components utility for responsive spacing
+ * @param theme - The theme object
+ * @param size - The spacing size
+ * @returns The spacing value
  */
-export declare function formatCurrency(amount: number | string | null | undefined): string;
+export declare function getSpacing(theme: any, size: keyof typeof theme.spacing): string;
 /**
- * Formats latency time in milliseconds
- * @param time - The time in milliseconds
- * @returns The formatted time string in milliseconds
+ * Styled-components utility for responsive colors
+ * @param theme - The theme object
+ * @param colorKey - The color key
+ * @returns The color value
  */
-export declare function formatLatency(time: number | string | null | undefined): string;
-//# sourceMappingURL=utils.d.ts.map
+export declare function getColor(theme: any, colorKey: keyof typeof theme.colors): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "license": "Apache-2.0",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -9,7 +9,7 @@
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/src/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     }
@@ -33,8 +33,8 @@
     "typescript"
   ],
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
@@ -50,8 +50,9 @@
     "build:lib": "rollup -c",
     "build:spa": "vite build",
     "build:types": "tsc -p tsconfig.types.json",
+    "build:size": "npm pack --dry-run",
     "build": "npm run build:types && npm run build:lib && npm run build:spa",
-    "clean": "rm -rf dist build",
+    "clean": "rm -rf dist build test-results .railtracks/ui/*",
     "dev:spa": "vite build && rm -rf .railtracks/ui/* && cp -r build/* .railtracks/ui",
     "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
@@ -64,17 +65,12 @@
     "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
   },
   "devDependencies": {
-    "@babel/core": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1",
     "@chromatic-com/storybook": "4.1.1",
-    "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.2",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-swc": "0.4.0",
     "@rollup/plugin-terser": "0.4.3",
-    "@rollup/plugin-typescript": "11.1.1",
     "@storybook/addon-a11y": "9.1.3",
     "@storybook/addon-docs": "9.1.3",
     "@storybook/addon-onboarding": "9.1.3",
@@ -89,7 +85,6 @@
     "@vitejs/plugin-react-swc": "3.10.2",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
-    "autoprefixer": "10.4.21",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cross-env": "^7.0.3",
@@ -97,14 +92,10 @@
     "jsdom": "26.1.0",
     "npm-check-updates": "18.0.1",
     "playwright": "^1.55.0",
-    "postcss": "8.5.6",
     "prettier": "3.6.2",
     "rollup": "3.29.5",
     "rollup-plugin-postcss": "4.0.2",
     "storybook": "9.1.3",
-    "tailwind-merge": "3.3.1",
-    "tailwindcss": "3.4.17",
-    "tailwindcss-animate": "1.0.7",
     "tslib": "2.8.1",
     "typescript": "5.8.3",
     "vite": "7.0.5",