@amritanshu3011/mdx-renderer 1.0.8 → 1.0.10

package/dist/IntentProvider.d.ts

@@ -3,6 +3,7 @@ interface IntentProviderProps {
     children: React.ReactNode;
     data?: any[];
     theme?: any;
+    registry?: Record<string, React.ComponentType<any>>;
 }
 export declare const IntentProvider: React.FC<IntentProviderProps>;
 export {};

package/dist/IntentProvider.js

@@ -1,6 +1,7 @@
 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 }) }));
+export const IntentProvider = ({ children, data = [], theme, registry = {} // Default to empty
+ }) => {
+    return (_jsx(ThemeProvider, { initialTheme: theme, children: _jsx(VisualizationProvider, { initialVisualizations: data, customRegistry: registry, children: children }) }));
 };

package/dist/components/DynamicVisualizations.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useVisualizations } from '../context/VisualizationContext';
-import { visualizationRegistry } from '../registry/visualizationRegistry';
 export const DynamicVisualizations = () => {
-    const { visualizations } = useVisualizations();
-    if (visualizations.length === 0)
+    // 1. Get the MERGED registry from Context (Defaults + User Custom)
+    const { visualizations, registry } = useVisualizations();
+    if (!visualizations || visualizations.length === 0)
         return null;
-    return (_jsx("div", { children: visualizations.map((viz, index) => {
-            const vizType = viz.type;
-            const Component = visualizationRegistry[vizType];
+    return (_jsx("div", { className: "w-full flex flex-col gap-8 my-8", children: visualizations.map((viz, index) => {
+            // 2. Look up component in the Context Registry
+            // We use string indexing because users can add ANY key
+            const Component = registry[viz.type];
             if (!Component) {
-                console.warn(`Unknown visualization type: ${viz.type}`);
-                return null;
+                console.warn(`MDX Renderer: Unknown visualization type "${viz.type}"`);
+                // Render a helpful error for the developer/user
+                return (_jsxs("div", { className: "p-4 border border-red-200 bg-red-50 text-red-600 rounded-lg text-sm font-mono", children: ["\u26A0\uFE0F Unknown component type: ", _jsx("strong", { children: viz.type })] }, index));
             }
-            return (_jsx("div", { children: _jsx(Component, { ...viz.data }) }, index));
+            return (_jsx("div", { className: "mdx-viz-block w-full", children: _jsx(Component, { ...viz.data }) }, index));
         }) }));
 };

package/dist/context/VisualizationContext.d.ts

@@ -1,13 +1,19 @@
-import React from 'react';
-import type { LLMResponse } from '../types/mockLLM';
+import { ReactNode, ComponentType } from 'react';
+export interface VisualizationItem {
+    type: string;
+    data: any;
+}
 interface VisualizationContextType {
-    visualizations: LLMResponse[];
-    addVisualization: (viz: LLMResponse) => void;
+    visualizations: VisualizationItem[];
+    addVisualization: (viz: VisualizationItem) => void;
     clearVisualizations: () => void;
+    registry: Record<string, ComponentType<any>>;
+}
+export interface VisualizationProviderProps {
+    children: ReactNode;
+    initialVisualizations?: VisualizationItem[];
+    customRegistry?: Record<string, ComponentType<any>>;
 }
-export declare const VisualizationProvider: ({ children, initialVisualizations }: {
-    children: React.ReactNode;
-    initialVisualizations?: any[];
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const VisualizationProvider: ({ children, initialVisualizations, customRegistry }: VisualizationProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useVisualizations: () => VisualizationContextType;
 export {};

package/dist/context/VisualizationContext.js

@@ -1,21 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+// Import your default registry to use as a base
+import { visualizationRegistry as defaultRegistry } from '../registry/visualizationRegistry';
 const VisualizationContext = createContext(undefined);
-export const VisualizationProvider = ({ children, initialVisualizations = [] }) => {
-    const [visualizations, setVisualizations] = React.useState(initialVisualizations);
+export const VisualizationProvider = ({ children, initialVisualizations = [], customRegistry = {} }) => {
+    const [visualizations, setVisualizations] = useState(initialVisualizations);
+    // 1. MERGE LOGIC: Combine defaults with user overrides
+    // Using useMemo is good practice here to prevent recreation on every render, 
+    // but for simplicity, direct object spread works too.
+    const mergedRegistry = { ...defaultRegistry, ...customRegistry };
+    // 2. Reactive State Update
     React.useEffect(() => {
         if (initialVisualizations.length > 0) {
             setVisualizations(initialVisualizations);
         }
     }, [initialVisualizations]);
     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 }));
+    return (_jsx(VisualizationContext.Provider, { value: {
+            visualizations,
+            addVisualization,
+            clearVisualizations,
+            registry: mergedRegistry // <--- Pass the merged registry to the app
+        }, children: children }));
 };
 export const useVisualizations = () => {
     const context = useContext(VisualizationContext);

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export { useThemeWithFallback } from './utils/useThemeWithFallback';
 export type { Theme } from './theme/types';
 export { MDXRenderer } from './MDXRenderer';
 export { IntentProvider } from './IntentProvider';
-import './styles/base.css';
 export { ProsConsBlock } from './components/smart/ProsConsBlock';
 export { ComparisonBlock } from './components/smart/ComparisonBlock';
 export { FlowBlock } from './components/smart/FlowBlock';

package/dist/index.js

@@ -6,7 +6,6 @@ export { useThemeWithFallback } from './utils/useThemeWithFallback';
 // Renderer
 export { MDXRenderer } from './MDXRenderer';
 export { IntentProvider } from './IntentProvider';
-import './styles/base.css';
 // Smart Components
 export { ProsConsBlock } from './components/smart/ProsConsBlock';
 export { ComparisonBlock } from './components/smart/ComparisonBlock';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amritanshu3011/mdx-renderer",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Reusable MDX visualization library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",