@railtownai/railtracks-visualizer 0.0.17 → 0.0.19

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

@@ -1,7 +1,10 @@
 import React from "react";
-import { JsonFile } from "../hooks";
 interface FileSelectorProps {
-    files: JsonFile[];
+    files: {
+        name: string;
+        size?: number;
+        modified?: string;
+    }[];
     currentFile: string | null;
     onFileSelect: (filename: string) => void;
     onRefresh: () => void;

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;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { AgenticFlowVisualizerProps } from "./AgenticFlowVisualizer";
 /**
- * Visualizer component that wraps AgenticFlowVisualizer with ReactFlowProvider.
+ * Visualizer component that wraps AgenticFlowVisualizer with ReactFlowProvider and ThemeProvider.
  * This is the main component that should be imported from the npm package.
  */
 declare const Visualizer: React.FC<AgenticFlowVisualizerProps>;

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

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

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

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

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

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

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

@@ -1,3 +1,3 @@
 export { OpenAIIcon } from "./OpenAIIcon";
-export { AnthropicIcon } from "./AnthropicIcon";
 export { GoogleIcon } from "./GoogleIcon";
+export { AnthropicIcon } from "./AnthropicIcon";

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

@@ -3,11 +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 };
+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?: "left" | "right" | "bottom" | "top" | 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: {

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

@@ -1,5 +1,6 @@
 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/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/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,2 +1,5 @@
 export * from "./utils";
 export * from "./layout";
+export * from "./theme";
+export * from "./ThemeProvider";
+export * from "./GlobalStyles";

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

@@ -0,0 +1,65 @@
+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;
+        mutedBorder: 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,21 +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;
+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.17",
+  "version": "0.0.19",
   "license": "Apache-2.0",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -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}\"",
@@ -84,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",
@@ -92,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",