@amritanshu3011/mdx-renderer 1.0.0 → 1.0.3

package/dist/components/smart/Sunburst.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import * as echarts from 'echarts/core';
+import { SunburstChart } from 'echarts/charts';
+import { TooltipComponent, TitleComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+echarts.use([
+    SunburstChart,
+    TooltipComponent,
+    TitleComponent,
+    CanvasRenderer
+]);
+/** Normalize tree - ensure all nodes have values */
+const normalizeTree = (node, depth = 0) => {
+    if (!node.children || node.children.length === 0) {
+        return { ...node, value: node.value ?? 1 };
+    }
+    const children = node.children.map(c => normalizeTree(c, depth + 1));
+    const value = children.reduce((sum, c) => sum + (c.value ?? 0), 0);
+    return { ...node, children, value };
+};
+export const Sunburst = ({ title, root }) => {
+    const theme = useThemeWithFallback();
+    const chartRef = useRef(null);
+    const chartInstance = useRef(null);
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        if (!chartInstance.current) {
+            chartInstance.current = echarts.init(chartRef.current);
+        }
+        const normalizedRoot = normalizeTree(root);
+        chartInstance.current.setOption({
+            title: {
+                text: title,
+                left: 'center',
+                top: 20,
+                textStyle: {
+                    color: theme.colors.text,
+                    fontSize: 22,
+                    fontWeight: 'bold'
+                }
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: (params) => {
+                    const { name, value } = params;
+                    return `<b>${name}</b><br/>Value: ${value}`;
+                },
+                backgroundColor: 'rgba(50, 50, 50, 0.9)',
+                borderColor: '#777',
+                borderWidth: 1,
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            series: [
+                {
+                    type: 'sunburst',
+                    data: [normalizedRoot],
+                    radius: [0, '90%'],
+                    center: ['50%', '55%'],
+                    sort: 'desc',
+                    highlightPolicy: 'ancestor',
+                    itemStyle: {
+                        borderRadius: 7,
+                        borderWidth: 2,
+                        borderColor: '#fff'
+                    },
+                    label: {
+                        rotate: 'radial',
+                        fontSize: 11,
+                        color: '#000',
+                        fontWeight: 'bold',
+                        minAngle: 20,
+                        overflow: 'truncate'
+                    },
+                    emphasis: {
+                        focus: 'ancestor',
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    },
+                    levels: [
+                        {},
+                        {
+                            r0: '0%',
+                            r: '30%',
+                            itemStyle: {
+                                borderWidth: 3
+                            },
+                            label: {
+                                rotate: 0,
+                                fontSize: 13,
+                                fontWeight: 'bold',
+                                distance: 5
+                            }
+                        },
+                        {
+                            r0: '30%',
+                            r: '60%',
+                            label: {
+                                fontSize: 11,
+                                distance: 3
+                            }
+                        },
+                        {
+                            r0: '60%',
+                            r: '90%',
+                            label: {
+                                fontSize: 10,
+                                padding: 2,
+                                silent: false,
+                                minAngle: 25
+                            },
+                            itemStyle: {
+                                borderWidth: 1
+                            }
+                        }
+                    ]
+                }
+            ]
+        }, true);
+        const resize = () => chartInstance.current?.resize();
+        window.addEventListener('resize', resize);
+        return () => {
+            window.removeEventListener('resize', resize);
+        };
+    }, [root, title, theme]);
+    useEffect(() => {
+        return () => {
+            if (chartInstance.current) {
+                chartInstance.current.dispose();
+                chartInstance.current = null;
+            }
+        };
+    }, []);
+    return (_jsx("div", { style: {
+            margin: `${theme.spacing.large} 0`,
+            backgroundColor: theme.colors.cardBackground,
+            borderRadius: theme.borderRadius.medium,
+            border: `1px solid ${theme.colors.border}`,
+            padding: theme.spacing.large,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+        }, children: _jsx("div", { ref: chartRef, style: {
+                width: '100%',
+                height: 650,
+                minHeight: 500
+            } }) }));
+};

package/dist/components/text/Blockquote.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BlockquoteProps {
+    children: React.ReactNode;
+    author?: string;
+}
+export declare const Blockquote: React.FC<BlockquoteProps>;
+export {};

package/dist/components/text/Blockquote.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Blockquote = ({ children, author }) => {
+    const theme = useThemeWithFallback();
+    return (_jsxs("blockquote", { style: {
+            borderLeft: `4px solid ${theme.colors.primary}`,
+            paddingLeft: theme.spacing.medium,
+            margin: `${theme.spacing.medium} 0`,
+            color: theme.colors.textSecondary,
+            fontStyle: 'italic'
+        }, children: [children, author && (_jsxs("footer", { style: {
+                    marginTop: theme.spacing.small,
+                    fontSize: theme.typography.smallSize,
+                    color: theme.colors.textSecondary
+                }, children: ["\u2014 ", author] }))] }));
+};

package/dist/components/text/ComparisonGrid.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ComparisonItem {
+    label: string;
+    option1: string;
+    option2: string;
+}
+interface ComparisonGridProps {
+    title?: string;
+    option1Name: string;
+    option2Name: string;
+    items: ComparisonItem[];
+}
+export declare const ComparisonGrid: React.FC<ComparisonGridProps>;
+export {};

package/dist/components/text/ComparisonGrid.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const ComparisonGrid = ({ title, option1Name, option2Name, items }) => {
+    const theme = useThemeWithFallback();
+    const containerStyle = {
+        margin: `${theme.spacing.large} 0`,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        overflow: 'hidden'
+    };
+    const headerStyle = {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        backgroundColor: theme.colors.primary,
+        color: '#fff',
+        fontWeight: 'bold'
+    };
+    const cellStyle = {
+        padding: theme.spacing.medium,
+        borderRight: `1px solid ${theme.colors.border}`
+    };
+    const rowStyle = {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        borderBottom: `1px solid ${theme.colors.border}`
+    };
+    return (_jsxs("div", { children: [title && (_jsx("h3", { style: {
+                    margin: `${theme.spacing.medium} 0`,
+                    color: theme.colors.text,
+                    fontSize: theme.typography.h2Size
+                }, children: title })), _jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsx("div", { style: cellStyle, children: "Feature" }), _jsx("div", { style: cellStyle, children: option1Name }), _jsx("div", { style: { ...cellStyle, borderRight: 'none' }, children: option2Name })] }), items.map((item, index) => (_jsxs("div", { style: {
+                            ...rowStyle,
+                            backgroundColor: index % 2 === 0 ? theme.colors.background : theme.colors.cardBackground
+                        }, children: [_jsx("div", { style: {
+                                    ...cellStyle,
+                                    fontWeight: 'bold',
+                                    color: theme.colors.text
+                                }, children: item.label }), _jsx("div", { style: {
+                                    ...cellStyle,
+                                    color: theme.colors.textSecondary
+                                }, children: item.option1 }), _jsx("div", { style: {
+                                    ...cellStyle,
+                                    borderRight: 'none',
+                                    color: theme.colors.textSecondary
+                                }, children: item.option2 })] }, index)))] })] }));
+};

package/dist/components/text/Heading.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface HeadingProps {
+    level: 1 | 2;
+    children: React.ReactNode;
+}
+export declare const Heading: React.FC<HeadingProps>;
+export {};

package/dist/components/text/Heading.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Heading = ({ level, children }) => {
+    const theme = useThemeWithFallback();
+    const style = {
+        margin: level === 1 ? `0 0 ${theme.spacing.medium} 0` : `0 0 ${theme.spacing.small} 0`,
+        fontSize: level === 1 ? theme.typography.h1Size : theme.typography.h2Size,
+        fontWeight: 'bold',
+        color: theme.colors.text,
+        fontFamily: theme.typography.fontFamily
+    };
+    return level === 1 ? (_jsx("h1", { style: style, children: children })) : (_jsx("h2", { style: style, children: children }));
+};

package/dist/components/text/List.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ListProps {
+    children: React.ReactNode;
+    ordered?: boolean;
+}
+export declare const List: React.FC<ListProps>;
+export {};

package/dist/components/text/List.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const List = ({ children, ordered = false }) => {
+    const theme = useThemeWithFallback();
+    const style = {
+        margin: `0 0 ${theme.spacing.medium} 0`,
+        paddingLeft: theme.spacing.large,
+        color: theme.colors.textSecondary,
+        lineHeight: '1.6'
+    };
+    return ordered ? (_jsx("ol", { style: style, children: children })) : (_jsx("ul", { style: style, children: children }));
+};

package/dist/components/text/Paragraph.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ParagraphProps {
+    children: React.ReactNode;
+}
+export declare const Paragraph: React.FC<ParagraphProps>;
+export {};

package/dist/components/text/Paragraph.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Paragraph = ({ children }) => {
+    const theme = useThemeWithFallback();
+    const style = {
+        margin: `0 0 ${theme.spacing.medium} 0`,
+        lineHeight: '1.6',
+        color: theme.colors.textSecondary,
+        fontSize: theme.typography.bodySize,
+        fontFamily: theme.typography.fontFamily
+    };
+    return _jsx("p", { style: style, children: children });
+};

package/dist/components/text/ProcessFlow.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ProcessStep {
+    title: string;
+    description: string;
+}
+interface ProcessFlowProps {
+    steps: ProcessStep[];
+    title?: string;
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const ProcessFlow: React.FC<ProcessFlowProps>;
+export {};

package/dist/components/text/ProcessFlow.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const ProcessFlow = ({ steps, title, direction = 'horizontal' }) => {
+    const theme = useThemeWithFallback();
+    const containerStyle = {
+        margin: `${theme.spacing.large} 0`,
+        padding: theme.spacing.medium,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        backgroundColor: theme.colors.cardBackground
+    };
+    const flowStyle = {
+        display: 'flex',
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        gap: theme.spacing.medium,
+        alignItems: direction === 'horizontal' ? 'center' : 'stretch',
+        overflowX: direction === 'horizontal' ? 'auto' : 'visible'
+    };
+    const stepStyle = {
+        flex: direction === 'horizontal' ? '0 0 200px' : '1',
+        padding: theme.spacing.medium,
+        backgroundColor: theme.colors.background,
+        border: `2px solid ${theme.colors.primary}`,
+        borderRadius: theme.borderRadius.small,
+        position: 'relative'
+    };
+    const arrowStyle = {
+        color: theme.colors.primary,
+        fontSize: '24px',
+        fontWeight: 'bold',
+        flex: '0 0 auto'
+    };
+    return (_jsxs("div", { style: containerStyle, children: [title && (_jsx("h3", { style: {
+                    margin: `0 0 ${theme.spacing.medium} 0`,
+                    color: theme.colors.text,
+                    fontSize: theme.typography.h2Size
+                }, children: title })), _jsx("div", { style: flowStyle, children: steps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs("div", { style: stepStyle, children: [_jsxs("div", { style: {
+                                        fontWeight: 'bold',
+                                        marginBottom: theme.spacing.small,
+                                        color: theme.colors.primary,
+                                        fontSize: theme.typography.bodySize
+                                    }, children: [index + 1, ". ", step.title] }), _jsx("div", { style: {
+                                        color: theme.colors.textSecondary,
+                                        fontSize: theme.typography.smallSize,
+                                        lineHeight: '1.5'
+                                    }, children: step.description })] }), index < steps.length - 1 && (_jsx("div", { style: arrowStyle, children: direction === 'horizontal' ? '→' : '↓' }))] }, index))) })] }));
+};

package/dist/components/text/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/context/VisualizationContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { LLMResponse } from '../types/mockLLM';
+interface VisualizationContextType {
+    visualizations: LLMResponse[];
+    addVisualization: (viz: LLMResponse) => void;
+    clearVisualizations: () => void;
+}
+interface VisualizationProviderProps {
+    children: React.ReactNode;
+}
+export declare const VisualizationProvider: React.FC<VisualizationProviderProps>;
+export declare const useVisualizations: () => VisualizationContextType;
+export {};

package/dist/context/VisualizationContext.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+const VisualizationContext = createContext(undefined);
+export const VisualizationProvider = ({ children }) => {
+    const [visualizations, setVisualizations] = useState([]);
+    const addVisualization = (viz) => {
+        console.log('Storing visualization:', viz);
+        setVisualizations(prev => [...prev, viz]);
+    };
+    const clearVisualizations = () => {
+        setVisualizations([]);
+    };
+    return (_jsx(VisualizationContext.Provider, { value: { visualizations, addVisualization, clearVisualizations }, children: children }));
+};
+export const useVisualizations = () => {
+    const context = useContext(VisualizationContext);
+    if (!context) {
+        throw new Error('useVisualizations must be used within VisualizationProvider');
+    }
+    return context;
+};

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { ThemeProvider, useTheme } from './theme/ThemeContext';
+export { lightTheme, darkTheme } from './theme/themes';
+export { defaultTheme } from './theme/defaultTheme';
+export { useThemeWithFallback } from './utils/useThemeWithFallback';
+export type { Theme } from './theme/types';
+export { MDXRenderer } from './MDXRenderer';
+export { ProsConsBlock } from './components/smart/ProsConsBlock';
+export { ComparisonBlock } from './components/smart/ComparisonBlock';
+export { FlowBlock } from './components/smart/FlowBlock';
+export { ConceptTreeBlock } from './components/smart/ConceptTreeBlock';
+export { DynamicVisualizations } from './components/DynamicVisualizations';
+export { VisualizationProvider, useVisualizations } from './context/VisualizationContext';
+export { visualizationRegistry } from './registry/visualizationRegistry';
+export type { VisualizationType } from './registry/visualizationRegistry';
+export { Card } from './components/layout/Card';
+export { SimpleChart } from './components/data/SimpleChart';
+export { LineChart } from './components/data/LineChart';
+export { BarChart } from './components/data/BarChart';
+export { Accordion } from './components/interactive/Accordion';
+export { Tabs } from './components/interactive/Tabs';
+export { Dashboard } from './components/composite/Dashboard';
+export { DataExplorer } from './components/composite/DataExplorer';
+export { Heading } from './components/text/Heading';
+export { Paragraph } from './components/text/Paragraph';
+export { ProcessFlow } from './components/text/ProcessFlow';
+export { ComparisonGrid } from './components/text/ComparisonGrid';
+export { WeatherWidget } from './components/WeatherWidget';

package/dist/index.js

@@ -0,0 +1,34 @@
+// Theme
+export { ThemeProvider, useTheme } from './theme/ThemeContext';
+export { lightTheme, darkTheme } from './theme/themes';
+export { defaultTheme } from './theme/defaultTheme';
+export { useThemeWithFallback } from './utils/useThemeWithFallback';
+// Renderer
+export { MDXRenderer } from './MDXRenderer';
+// Smart Components
+export { ProsConsBlock } from './components/smart/ProsConsBlock';
+export { ComparisonBlock } from './components/smart/ComparisonBlock';
+export { FlowBlock } from './components/smart/FlowBlock';
+export { ConceptTreeBlock } from './components/smart/ConceptTreeBlock';
+export { DynamicVisualizations } from './components/DynamicVisualizations';
+export { VisualizationProvider, useVisualizations } from './context/VisualizationContext';
+export { visualizationRegistry } from './registry/visualizationRegistry';
+// Layout Components
+export { Card } from './components/layout/Card';
+// Data Components
+export { SimpleChart } from './components/data/SimpleChart';
+export { LineChart } from './components/data/LineChart';
+export { BarChart } from './components/data/BarChart';
+// Interactive Components
+export { Accordion } from './components/interactive/Accordion';
+export { Tabs } from './components/interactive/Tabs';
+// Composite Components
+export { Dashboard } from './components/composite/Dashboard';
+export { DataExplorer } from './components/composite/DataExplorer';
+// Text Components
+export { Heading } from './components/text/Heading';
+export { Paragraph } from './components/text/Paragraph';
+export { ProcessFlow } from './components/text/ProcessFlow';
+export { ComparisonGrid } from './components/text/ComparisonGrid';
+// Weather Widget
+export { WeatherWidget } from './components/WeatherWidget';

package/dist/registry/visualizationRegistry.d.ts

@@ -0,0 +1,10 @@
+export declare const visualizationRegistry: {
+    pros_cons: import("react").FC<import("../components/smart/ProsConsBlock").ProsConsBlockProps>;
+    comparison: import("react").FC<import("../components/smart/ComparisonBlock").ComparisonBlockProps>;
+    flow: import("react").FC<import("../components/smart/FlowBlock").FlowBlockProps>;
+    concept_tree: import("react").FC<import("../components/smart/ConceptTreeBlock").ConceptTreeBlockProps>;
+    line_chart: import("react").FC<import("../components/smart/LineChartBlock").LineChartBlockProps>;
+    interactive_composite: import("react").FC<import("../components/smart/InteractiveCompositeBlock").InteractiveCompositeProps>;
+    sunburst: import("react").FC<import("../components/smart/Sunburst").SunburstProps>;
+};
+export type VisualizationType = keyof typeof visualizationRegistry;

package/dist/registry/visualizationRegistry.js

@@ -0,0 +1,16 @@
+import { ComparisonBlock } from "../components/smart/ComparisonBlock";
+import { ConceptTreeBlock } from "../components/smart/ConceptTreeBlock";
+import { FlowBlock } from "../components/smart/FlowBlock";
+import { InteractiveCompositeBlock } from "../components/smart/InteractiveCompositeBlock";
+import { LineChartBlock } from "../components/smart/LineChartBlock";
+import { ProsConsBlock } from "../components/smart/ProsConsBlock";
+import { Sunburst } from "../components/smart/Sunburst";
+export const visualizationRegistry = {
+    pros_cons: ProsConsBlock,
+    comparison: ComparisonBlock,
+    flow: FlowBlock,
+    concept_tree: ConceptTreeBlock,
+    line_chart: LineChartBlock,
+    interactive_composite: InteractiveCompositeBlock,
+    sunburst: Sunburst,
+};

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Theme } from './types';
+interface ThemeContextType {
+    theme: Theme;
+    themeName: 'light' | 'dark';
+    toggleTheme: () => void;
+}
+export declare const ThemeContext: React.Context<ThemeContextType | undefined>;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/theme/ThemeContext.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { lightTheme, darkTheme } from './themes';
+export const ThemeContext = createContext(undefined);
+export const ThemeProvider = ({ children }) => {
+    const [themeName, setThemeName] = useState('light');
+    const theme = themeName === 'light' ? lightTheme : darkTheme;
+    const toggleTheme = () => {
+        setThemeName(prev => prev === 'light' ? 'dark' : 'light');
+    };
+    return (_jsx(ThemeContext.Provider, { value: { theme, themeName, toggleTheme }, children: children }));
+};
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return context;
+};

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const defaultTheme: Theme;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,30 @@
+export const defaultTheme = {
+    colors: {
+        primary: '#007bff',
+        secondary: '#6c757d',
+        text: '#1a1a1a',
+        textSecondary: '#666',
+        background: '#ffffff',
+        cardBackground: '#f8f9fa',
+        border: '#ddd',
+        chartLine: '#8884d8',
+        chartBar: '#82ca9d'
+    },
+    spacing: {
+        small: '8px',
+        medium: '16px',
+        large: '32px',
+        xlarge: '48px'
+    },
+    typography: {
+        h1Size: '32px',
+        h2Size: '24px',
+        bodySize: '16px',
+        smallSize: '14px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    borderRadius: {
+        small: '4px',
+        medium: '8px'
+    }
+};

package/dist/theme/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/theme/themes.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from './types';
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;

package/dist/theme/themes.js

@@ -0,0 +1,60 @@
+export const lightTheme = {
+    colors: {
+        primary: '#007bff',
+        secondary: '#6c757d',
+        text: '#1a1a1a',
+        textSecondary: '#666',
+        background: '#ffffff',
+        cardBackground: '#f8f9fa',
+        border: '#ddd',
+        chartLine: '#8884d8',
+        chartBar: '#82ca9d'
+    },
+    spacing: {
+        small: '8px',
+        medium: '16px',
+        large: '32px',
+        xlarge: '48px'
+    },
+    typography: {
+        h1Size: '32px',
+        h2Size: '24px',
+        bodySize: '16px',
+        smallSize: '14px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    borderRadius: {
+        small: '4px',
+        medium: '8px',
+    }
+};
+export const darkTheme = {
+    colors: {
+        primary: '#0d6efd',
+        secondary: '#6c757d',
+        text: '#e9ecef',
+        textSecondary: '#adb5bd',
+        background: '#212529',
+        cardBackground: '#2d3238',
+        border: '#495057',
+        chartLine: '#66b3ff',
+        chartBar: '#66d9a6'
+    },
+    spacing: {
+        small: '8px',
+        medium: '16px',
+        large: '32px',
+        xlarge: '48px'
+    },
+    typography: {
+        h1Size: '32px',
+        h2Size: '24px',
+        bodySize: '16px',
+        smallSize: '14px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    borderRadius: {
+        small: '4px',
+        medium: '8px'
+    }
+};