@amritanshu3011/mdx-renderer 1.0.7 → 1.0.9

package/dist/DynamicVisuals.d.ts

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

package/dist/DynamicVisuals.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVisualizations } from './context/VisualizationContext';
+import { visualizationRegistry } from './index';
+export const DynamicVisuals = () => {
+    const { visualizations } = useVisualizations();
+    if (!visualizations || visualizations.length === 0) {
+        return _jsx("div", { className: "p-4 text-slate-400 italic", children: "Waiting for data..." });
+    }
+    return (_jsx("div", { className: "flex flex-col gap-8 my-8", children: visualizations.map((viz, index) => {
+            const Component = visualizationRegistry[viz.type];
+            if (!Component)
+                return null;
+            return _jsx(Component, { ...viz.data }, index);
+        }) }));
+};

package/dist/IntentProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IntentProviderProps {
+    children: React.ReactNode;
+    data?: any[];
+    theme?: any;
+}
+export declare const IntentProvider: React.FC<IntentProviderProps>;
+export {};

package/dist/IntentProvider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from './theme/ThemeContext';
+import { VisualizationProvider } from './context/VisualizationContext';
+export const IntentProvider = ({ children, data = [], theme }) => {
+    return (_jsx(ThemeProvider, { initialTheme: theme, children: _jsx(VisualizationProvider, { initialVisualizations: data, children: children }) }));
+};

package/dist/MDXRenderer.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-interface MDXRendererProps {
+export declare const MDXRenderer: React.FC<{
     children: React.ReactNode;
-    className?: string;
-}
-export declare const MDXRenderer: React.FC<MDXRendererProps>;
-export {};
+}>;

package/dist/MDXRenderer.js

@@ -1,79 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MDXProvider } from '@mdx-js/react';
-// 👇 CHANGE 1: Use the Context Hook (so updates happen live)
-// import { useThemeWithFallback } from './utils/useThemeWithFallback'; 
-import { useTheme } from './theme/ThemeContext';
-// Text components
-import { Heading } from './components/text/Heading';
-import { Paragraph } from './components/text/Paragraph';
-import { Blockquote } from './components/text/Blockquote';
-import { List } from './components/text/List';
-// Layout components
-import { Card } from './components/layout/Card';
-// Data components
-import { SimpleChart } from './components/data/SimpleChart';
-import { LineChart } from './components/data/LineChart';
-import { BarChart } from './components/data/BarChart';
-// Interactive components
-import { Accordion } from './components/interactive/Accordion';
-import { Tabs } from './components/interactive/Tabs';
-// Composite components
-import { Dashboard } from './components/composite/Dashboard';
-import { DataExplorer } from './components/composite/DataExplorer';
-import { WeatherWidget } from './components/WeatherWidget';
-import { ProcessFlow } from './components/text/ProcessFlow';
-import { ComparisonGrid } from './components/text/ComparisonGrid';
-import { DynamicVisualizations } from './components/DynamicVisualizations';
+import { DynamicVisuals } from './DynamicVisuals'; // Import the bridge
 const components = {
-    // Text
-    h1: (props) => _jsx(Heading, { level: 1, ...props }),
-    h2: (props) => _jsx(Heading, { level: 2, ...props }),
-    p: (props) => _jsx(Paragraph, { ...props }),
-    blockquote: (props) => _jsx(Blockquote, { ...props }),
-    ul: (props) => _jsx(List, { ordered: false, ...props }),
-    ol: (props) => _jsx(List, { ordered: true, ...props }),
-    // Layout
-    Card,
-    // Data
-    SimpleChart,
-    LineChart,
-    BarChart,
-    // Interactive
-    Accordion,
-    Tabs,
-    // Composite
-    Dashboard,
-    DataExplorer,
-    // Widgets
-    WeatherWidget,
-    //LLM
-    DynamicVisualizations,
-    //Text
-    ProcessFlow,
-    ComparisonGrid,
+    // Inject it globally so users just write <DynamicVisuals />
+    DynamicVisuals: DynamicVisuals,
 };
-export const MDXRenderer = ({ children, className = 'mdx-content' }) => {
-    // 👇 CHANGE 3: Get theme from Context
-    const { theme } = useTheme();
-    // 👇 CHANGE 4: Create the Bridge (JS -> CSS Variables)
-    const themeStyles = {
-        // Colors
-        '--color-primary': theme.colors.primary,
-        '--color-secondary': theme.colors.secondary,
-        '--color-text': theme.colors.text,
-        '--color-text-secondary': theme.colors.textSecondary,
-        '--color-background': theme.colors.background,
-        '--color-card-bg': theme.colors.cardBackground,
-        '--color-border': theme.colors.border,
-        // Spacing
-        '--spacing-small': theme.spacing.small,
-        '--spacing-medium': theme.spacing.medium,
-        '--spacing-large': theme.spacing.large,
-        // Typography
-        '--font-family': theme.typography.fontFamily,
-        // Border Radius
-        '--radius-small': theme.borderRadius.small,
-        '--radius-medium': theme.borderRadius.medium,
-    };
-    return (_jsx("div", { className: className, style: themeStyles, children: _jsx(MDXProvider, { components: components, children: children }) }));
+export const MDXRenderer = ({ children }) => {
+    return (_jsx(MDXProvider, { components: components, children: children }));
 };

package/dist/context/VisualizationContext.d.ts

@@ -5,9 +5,9 @@ interface VisualizationContextType {
     addVisualization: (viz: LLMResponse) => void;
     clearVisualizations: () => void;
 }
-interface VisualizationProviderProps {
+export declare const VisualizationProvider: ({ children, initialVisualizations }: {
     children: React.ReactNode;
-}
-export declare const VisualizationProvider: React.FC<VisualizationProviderProps>;
+    initialVisualizations?: any[];
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useVisualizations: () => VisualizationContextType;
 export {};

package/dist/context/VisualizationContext.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext } from 'react';
 const VisualizationContext = createContext(undefined);
-export const VisualizationProvider = ({ children }) => {
-    const [visualizations, setVisualizations] = useState([]);
+export const VisualizationProvider = ({ children, initialVisualizations = [] }) => {
+    const [visualizations, setVisualizations] = React.useState(initialVisualizations);
+    React.useEffect(() => {
+        if (initialVisualizations.length > 0) {
+            setVisualizations(initialVisualizations);
+        }
+    }, [initialVisualizations]);
     const addVisualization = (viz) => {
         console.log('Storing visualization:', viz);
         setVisualizations(prev => [...prev, viz]);

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { defaultTheme } from './theme/defaultTheme';
 export { useThemeWithFallback } from './utils/useThemeWithFallback';
 export type { Theme } from './theme/types';
 export { MDXRenderer } from './MDXRenderer';
+export { IntentProvider } from './IntentProvider';
 export { ProsConsBlock } from './components/smart/ProsConsBlock';
 export { ComparisonBlock } from './components/smart/ComparisonBlock';
 export { FlowBlock } from './components/smart/FlowBlock';

package/dist/index.js

@@ -5,6 +5,7 @@ export { defaultTheme } from './theme/defaultTheme';
 export { useThemeWithFallback } from './utils/useThemeWithFallback';
 // Renderer
 export { MDXRenderer } from './MDXRenderer';
+export { IntentProvider } from './IntentProvider';
 // Smart Components
 export { ProsConsBlock } from './components/smart/ProsConsBlock';
 export { ComparisonBlock } from './components/smart/ComparisonBlock';

package/dist/theme/ThemeContext.d.ts

@@ -3,11 +3,13 @@ import type { Theme } from './types';
 interface ThemeContextType {
     theme: Theme;
     themeName: 'light' | 'dark';
+    isDark: boolean;
     toggleTheme: () => void;
 }
 export declare const ThemeContext: React.Context<ThemeContextType | undefined>;
-interface ThemeProviderProps {
+export interface ThemeProviderProps {
     children: React.ReactNode;
+    initialTheme?: 'light' | 'dark' | Theme;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useTheme: () => ThemeContextType;

package/dist/theme/ThemeContext.js

@@ -2,13 +2,32 @@ 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;
+export const ThemeProvider = ({ children, initialTheme }) => {
+    // Determine start state based on initialTheme prop
+    const getInitialMode = () => {
+        if (initialTheme === 'dark')
+            return 'dark';
+        if (typeof initialTheme === 'object' && initialTheme !== null) {
+            // If a full theme object was passed, we might default to light 
+            // or check a property, but for simplicity:
+            return 'light';
+        }
+        return 'light';
+    };
+    const [themeName, setThemeName] = useState(getInitialMode());
+    // Logic: Use the passed object if it's a custom theme, otherwise switch between built-ins
+    const activeTheme = (typeof initialTheme === 'object' && initialTheme !== null)
+        ? initialTheme // Use the custom theme passed via IntentProvider
+        : (themeName === 'light' ? lightTheme : darkTheme);
     const toggleTheme = () => {
         setThemeName(prev => prev === 'light' ? 'dark' : 'light');
     };
-    return (_jsx(ThemeContext.Provider, { value: { theme, themeName, toggleTheme }, children: children }));
+    return (_jsx(ThemeContext.Provider, { value: {
+            theme: activeTheme,
+            themeName,
+            isDark: themeName === 'dark', // Calculated boolean
+            toggleTheme
+        }, children: children }));
 };
 export const useTheme = () => {
     const context = useContext(ThemeContext);

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@amritanshu3011/mdx-renderer",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Reusable MDX visualization library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles/base.css": "./styles/base.css"
+  },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "styles"
   ],
   "scripts": {
     "build": "tsc"

package/styles/base.css

@@ -0,0 +1,105 @@
+/* src/mdx-renderer/styles/base.css */
+
+.mdx-content {
+  font-family: var(--font-family);
+  color: var(--color-text);
+  line-height: 1.6;
+  font-size: 16px;
+}
+
+/* --- TYPOGRAPHY --- */
+.mdx-content h1,
+.mdx-content h2,
+.mdx-content h3 {
+  color: var(--color-text);
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-medium);
+  font-weight: 700;
+  letter-spacing: -0.02em; /* Makes headings look tighter & modern */
+}
+
+.mdx-content h1 { font-size: 2rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; }
+.mdx-content h2 { font-size: 1.5rem; }
+.mdx-content h3 { font-size: 1.25rem; }
+
+.mdx-content p {
+  color: var(--color-text-secondary); /* Softer reading color */
+  margin-bottom: var(--spacing-medium);
+  line-height: 1.7; /* Better readability */
+}
+
+/* --- LISTS --- */
+.mdx-content ul,
+.mdx-content ol {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-medium);
+  padding-left: 1.5rem;
+}
+
+.mdx-content li {
+  margin-bottom: 6px; /* Spacing between bullets */
+}
+
+/* --- BLOCKQUOTES (The "Callout" Look) --- */
+.mdx-content blockquote {
+  border-left: 4px solid var(--color-primary); /* Use primary color! */
+  background-color: var(--color-card-bg); /* Subtle background */
+  padding: 16px 20px;
+  margin: 24px 0;
+  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+  font-style: italic;
+  color: var(--color-text);
+}
+
+/* --- CODE BLOCKS --- */
+.mdx-content code {
+  background: var(--color-card-bg);
+  border: 1px solid var(--color-border);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Fira Code', monospace; /* Or standard monospace */
+  font-size: 0.85em;
+  color: var(--color-primary); /* Highlight code in brand color */
+}
+
+.mdx-content pre {
+  background: #1e1e1e; /* Always dark for code blocks looks Pro */
+  color: #f8f8f2;
+  padding: 20px;
+  border-radius: var(--radius-medium);
+  overflow-x: auto;
+  margin: 24px 0;
+}
+
+.mdx-content pre code {
+  color: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+/* --- TABLES (Crucial for BI Data) --- */
+.mdx-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 24px 0;
+  font-size: 0.95rem;
+}
+
+.mdx-content th {
+  text-align: left;
+  padding: 12px;
+  border-bottom: 2px solid var(--color-border);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.mdx-content td {
+  padding: 12px;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.mdx-content tr:last-child td {
+  border-bottom: none;
+}