@amritanshu3011/mdx-renderer 1.0.0 → 1.0.1

package/dist/MDXRenderer.d.ts

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

package/dist/MDXRenderer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MDXProvider } from '@mdx-js/react';
+import { useThemeWithFallback } from './utils/useThemeWithFallback';
+// 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';
+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,
+};
+export const MDXRenderer = ({ children, className = 'mdx-content' }) => {
+    const theme = useThemeWithFallback();
+    return (_jsx("div", { className: className, "data-theme": theme.colors.background === '#212529' ? 'dark' : 'light', children: _jsx(MDXProvider, { components: components, children: children }) }));
+};

package/dist/components/DynamicVisualizations.d.ts

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

package/dist/components/DynamicVisualizations.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVisualizations } from '../context/VisualizationContext';
+import { visualizationRegistry } from '../registry/visualizationRegistry';
+export const DynamicVisualizations = () => {
+    const { visualizations } = useVisualizations();
+    if (visualizations.length === 0)
+        return null;
+    return (_jsx("div", { children: visualizations.map((viz, index) => {
+            const vizType = viz.type;
+            const Component = visualizationRegistry[vizType];
+            if (!Component) {
+                console.warn(`Unknown visualization type: ${viz.type}`);
+                return null;
+            }
+            return (_jsx("div", { children: _jsx(Component, { ...viz.data }) }, index));
+        }) }));
+};

package/dist/components/WeatherWidget.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface WeatherWidgetProps {
+    city?: string;
+}
+export declare const WeatherWidget: React.FC<WeatherWidgetProps>;
+export {};

package/dist/components/WeatherWidget.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useThemeWithFallback } from '../utils/useThemeWithFallback';
+export const WeatherWidget = ({ city = 'London' }) => {
+    const theme = useThemeWithFallback();
+    const [weather, setWeather] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        fetch(`https://wttr.in/${city}?format=j1`)
+            .then(res => res.json())
+            .then(data => {
+            setWeather(data);
+            setLoading(false);
+        })
+            .catch(() => setLoading(false));
+    }, [city]);
+    if (loading)
+        return _jsx("div", { style: { color: theme.colors.text }, children: "Loading weather..." });
+    if (!weather)
+        return _jsx("div", { style: { color: theme.colors.text }, children: "Failed to load weather" });
+    const current = weather.current_condition[0];
+    return (_jsxs("div", { style: {
+            padding: theme.spacing.medium,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.small,
+            backgroundColor: theme.colors.cardBackground,
+            margin: `${theme.spacing.medium} 0`
+        }, children: [_jsxs("h3", { style: { margin: '0 0 12px 0', color: theme.colors.text }, children: ["Weather in ", city] }), _jsxs("div", { style: { color: theme.colors.textSecondary }, children: [_jsxs("p", { children: ["\uD83C\uDF21\uFE0F Temperature: ", current.temp_C, "\u00B0C / ", current.temp_F, "\u00B0F"] }), _jsxs("p", { children: ["\u2601\uFE0F Condition: ", current.weatherDesc[0].value] }), _jsxs("p", { children: ["\uD83D\uDCA8 Wind: ", current.windspeedKmph, " km/h"] }), _jsxs("p", { children: ["\uD83D\uDCA7 Humidity: ", current.humidity, "%"] })] })] }));
+};

package/dist/components/composite/Dashboard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface DashboardProps {
+    title?: string;
+    children: React.ReactNode;
+    columns?: number;
+}
+export declare const Dashboard: React.FC<DashboardProps>;
+export {};

package/dist/components/composite/Dashboard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Dashboard = ({ title, children, columns = 2 }) => {
+    const theme = useThemeWithFallback();
+    return (_jsxs("div", { style: { margin: `${theme.spacing.large} 0` }, children: [title && (_jsx("h2", { style: {
+                    margin: `0 0 ${theme.spacing.medium} 0`,
+                    color: theme.colors.text,
+                    fontSize: theme.typography.h2Size
+                }, children: title })), _jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                    gap: theme.spacing.medium
+                }, children: children })] }));
+};

package/dist/components/composite/DataExplorer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface DataExplorerProps {
+    data: Array<Record<string, any>>;
+    title?: string;
+    searchable?: boolean;
+}
+export declare const DataExplorer: React.FC<DataExplorerProps>;
+export {};

package/dist/components/composite/DataExplorer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const DataExplorer = ({ data, title = 'Data Explorer', searchable = true }) => {
+    const theme = useThemeWithFallback();
+    const [search, setSearch] = useState('');
+    const filtered = data.filter(row => JSON.stringify(row).toLowerCase().includes(search.toLowerCase()));
+    return (_jsxs("div", { style: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.small,
+            padding: theme.spacing.medium,
+            margin: `${theme.spacing.medium} 0`
+        }, children: [_jsx("h3", { style: {
+                    margin: `0 0 ${theme.spacing.medium} 0`,
+                    color: theme.colors.text
+                }, children: title }), searchable && (_jsx("input", { type: "text", placeholder: "Search...", value: search, onChange: (e) => setSearch(e.target.value), style: {
+                    width: '100%',
+                    padding: theme.spacing.small,
+                    marginBottom: theme.spacing.medium,
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: theme.borderRadius.small,
+                    fontSize: theme.typography.bodySize,
+                    backgroundColor: theme.colors.background,
+                    color: theme.colors.text
+                } })), _jsx("div", { style: {
+                    maxHeight: '400px',
+                    overflowY: 'auto',
+                    fontSize: theme.typography.smallSize
+                }, children: _jsx("pre", { style: {
+                        margin: 0,
+                        color: theme.colors.text
+                    }, children: JSON.stringify(filtered, null, 2) }) }), _jsxs("div", { style: {
+                    marginTop: theme.spacing.small,
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.typography.smallSize
+                }, children: ["Showing ", filtered.length, " of ", data.length, " records"] })] }));
+};

package/dist/components/composite/index.js

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

package/dist/components/data/BarChart.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface BarChartProps {
+    data: Array<Record<string, any>>;
+    xKey: string;
+    yKey: string;
+    title?: string;
+    barColor?: string;
+}
+export declare const BarChart: React.FC<BarChartProps>;
+export {};

package/dist/components/data/BarChart.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart as RechartsBar, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const BarChart = ({ data, xKey, yKey, title, barColor }) => {
+    const theme = useThemeWithFallback();
+    const color = barColor || theme.colors.chartBar;
+    return (_jsxs("div", { style: { width: '100%', margin: `${theme.spacing.large} 0` }, children: [title && (_jsx("h3", { style: {
+                    margin: `0 0 ${theme.spacing.small} 0`,
+                    fontSize: '18px',
+                    color: theme.colors.text,
+                    fontFamily: theme.typography.fontFamily
+                }, children: title })), _jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(RechartsBar, { data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: theme.colors.border }), _jsx(XAxis, { dataKey: xKey, stroke: theme.colors.text }), _jsx(YAxis, { stroke: theme.colors.text }), _jsx(Tooltip, { contentStyle: {
+                                backgroundColor: theme.colors.cardBackground,
+                                border: `1px solid ${theme.colors.border}`,
+                                color: theme.colors.text
+                            } }), _jsx(Legend, {}), _jsx(Bar, { dataKey: yKey, fill: color })] }) })] }));
+};

package/dist/components/data/LineChart.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LineChartProps {
+    data: Array<Record<string, any>>;
+    xKey: string;
+    yKey: string;
+    title?: string;
+    lineColor?: string;
+}
+export declare const LineChart: React.FC<LineChartProps>;
+export {};

package/dist/components/data/LineChart.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart as RechartsLine, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const LineChart = ({ data, xKey, yKey, title, lineColor }) => {
+    const theme = useThemeWithFallback();
+    const color = lineColor || theme.colors.chartLine;
+    return (_jsxs("div", { style: { width: '100%', margin: `${theme.spacing.large} 0` }, children: [title && (_jsx("h3", { style: {
+                    margin: `0 0 ${theme.spacing.small} 0`,
+                    fontSize: '18px',
+                    color: theme.colors.text,
+                    fontFamily: theme.typography.fontFamily
+                }, children: title })), _jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(RechartsLine, { data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: theme.colors.border }), _jsx(XAxis, { dataKey: xKey, stroke: theme.colors.text }), _jsx(YAxis, { stroke: theme.colors.text }), _jsx(Tooltip, { contentStyle: {
+                                backgroundColor: theme.colors.cardBackground,
+                                border: `1px solid ${theme.colors.border}`,
+                                color: theme.colors.text
+                            } }), _jsx(Legend, {}), _jsx(Line, { type: "monotone", dataKey: yKey, stroke: color, strokeWidth: 2 })] }) })] }));
+};

package/dist/components/data/SimpleChart.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SimpleChartProps {
+    data: Record<string, any> | string;
+}
+export declare const SimpleChart: React.FC<SimpleChartProps>;
+export {};

package/dist/components/data/SimpleChart.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const SimpleChart = ({ data }) => {
+    const theme = useThemeWithFallback();
+    const style = {
+        padding: theme.spacing.small,
+        backgroundColor: theme.colors.cardBackground,
+        borderRadius: theme.borderRadius.small,
+        fontFamily: 'monospace',
+        fontSize: theme.typography.smallSize,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.border}`
+    };
+    const displayData = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    return _jsx("pre", { style: style, children: displayData });
+};

package/dist/components/data/Table.js

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

package/dist/components/data/index.js

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

package/dist/components/index.js

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

package/dist/components/interactive/Accordion.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export {};

package/dist/components/interactive/Accordion.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Accordion = ({ title, children, defaultOpen = false }) => {
+    const theme = useThemeWithFallback();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return (_jsxs("div", { style: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.small,
+            margin: `${theme.spacing.medium} 0`,
+            overflow: 'hidden'
+        }, children: [_jsxs("button", { onClick: () => setIsOpen(!isOpen), style: {
+                    width: '100%',
+                    padding: theme.spacing.medium,
+                    backgroundColor: theme.colors.cardBackground,
+                    border: 'none',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    fontSize: theme.typography.bodySize,
+                    fontWeight: 'bold',
+                    color: theme.colors.text,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                }, children: [title, _jsx("span", { children: isOpen ? '▼' : '▶' })] }), isOpen && (_jsx("div", { style: {
+                    padding: theme.spacing.medium,
+                    borderTop: `1px solid ${theme.colors.border}`
+                }, children: children }))] }));
+};

package/dist/components/interactive/Modal.js

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

package/dist/components/interactive/Tabs.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Tab {
+    label: string;
+    content: React.ReactNode;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultTab?: number;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export {};

package/dist/components/interactive/Tabs.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Tabs = ({ tabs, defaultTab = 0 }) => {
+    const theme = useThemeWithFallback();
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    return (_jsxs("div", { style: { margin: `${theme.spacing.medium} 0` }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    borderBottom: `2px solid ${theme.colors.border}`,
+                    gap: theme.spacing.small
+                }, children: tabs.map((tab, index) => (_jsx("button", { onClick: () => setActiveTab(index), style: {
+                        padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                        border: 'none',
+                        background: 'none',
+                        cursor: 'pointer',
+                        fontSize: theme.typography.bodySize,
+                        color: activeTab === index ? theme.colors.primary : theme.colors.textSecondary,
+                        borderBottom: activeTab === index ? `2px solid ${theme.colors.primary}` : 'none',
+                        marginBottom: '-2px',
+                        fontWeight: activeTab === index ? 'bold' : 'normal'
+                    }, children: tab.label }, index))) }), _jsx("div", { style: { padding: `${theme.spacing.medium} 0` }, children: tabs[activeTab]?.content })] }));
+};

package/dist/components/interactive/index.js

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

package/dist/components/layout/Card.d.ts

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

package/dist/components/layout/Card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const Card = ({ children }) => {
+    const theme = useThemeWithFallback();
+    const style = {
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.small,
+        padding: theme.spacing.medium,
+        margin: `${theme.spacing.medium} 0`,
+        backgroundColor: theme.colors.cardBackground
+    };
+    return _jsx("div", { style: style, children: children });
+};

package/dist/components/layout/Container.js

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

package/dist/components/layout/Grid.js

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

package/dist/components/layout/index.js

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

package/dist/components/smart/ComparisonBlock.d.ts

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

package/dist/components/smart/ComparisonBlock.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const ComparisonBlock = ({ title, option1Name, option2Name, items }) => {
+    const theme = useThemeWithFallback();
+    // --- State ---
+    const [filterText, setFilterText] = useState('');
+    const [sortMode, setSortMode] = useState('original');
+    const [viewMode, setViewMode] = useState('table');
+    const [isPivoted, setIsPivoted] = useState(false); // Swaps Rows and Columns
+    const [isGrouped, setIsGrouped] = useState(false); // Group aspects by first letter
+    // --- Data Processing ---
+    const processedItems = useMemo(() => {
+        let data = [...items];
+        // 1. Filter
+        if (filterText) {
+            const lower = filterText.toLowerCase();
+            data = data.filter(i => i.aspect.toLowerCase().includes(lower) ||
+                i.option1.toLowerCase().includes(lower) ||
+                i.option2.toLowerCase().includes(lower));
+        }
+        // 2. Sort (Sorts rows in Normal view, or Columns in Pivoted view)
+        if (sortMode !== 'original') {
+            data.sort((a, b) => sortMode === 'asc'
+                ? a.aspect.localeCompare(b.aspect)
+                : b.aspect.localeCompare(a.aspect));
+        }
+        return data;
+    }, [items, filterText, sortMode]);
+    // --- Grouping Logic ---
+    const groupedItems = useMemo(() => {
+        if (!isGrouped || isPivoted)
+            return { 'All Aspects': processedItems };
+        return processedItems.reduce((acc, item) => {
+            const key = item.aspect.charAt(0).toUpperCase();
+            if (!acc[key])
+                acc[key] = [];
+            acc[key].push(item);
+            return acc;
+        }, {});
+    }, [processedItems, isGrouped, isPivoted]);
+    // --- Helper Styles ---
+    const btnStyle = (active) => ({
+        padding: '4px 12px',
+        backgroundColor: active ? theme.colors.primary : 'transparent',
+        color: active ? '#fff' : theme.colors.text,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.small,
+        cursor: 'pointer',
+        fontSize: theme.typography.smallSize
+    });
+    return (_jsxs("div", { style: {
+            margin: `${theme.spacing.large} 0`,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.medium,
+            overflow: 'hidden',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
+        }, children: [_jsxs("div", { style: {
+                    padding: theme.spacing.medium,
+                    backgroundColor: theme.colors.background,
+                    borderBottom: `1px solid ${theme.colors.border}`
+                }, children: [_jsx("h2", { style: { margin: `0 0 ${theme.spacing.medium} 0`, color: theme.colors.text }, children: title }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: theme.spacing.medium, justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', gap: theme.spacing.small, flexWrap: 'wrap' }, children: [_jsx("input", { type: "text", placeholder: "Filter aspects...", value: filterText, onChange: (e) => setFilterText(e.target.value), style: { padding: '4px 8px', borderRadius: theme.borderRadius.small, border: `1px solid ${theme.colors.border}` } }), _jsxs("button", { onClick: () => setSortMode(p => p === 'original' ? 'asc' : 'original'), style: btnStyle(sortMode === 'asc'), children: ["Sort ", sortMode === 'asc' ? '(A-Z)' : 'Original'] }), !isPivoted && (_jsx("button", { onClick: () => setIsGrouped(!isGrouped), style: btnStyle(isGrouped), children: "Group (A-Z)" }))] }), _jsxs("div", { style: { display: 'flex', gap: theme.spacing.small }, children: [_jsxs("button", { onClick: () => setIsPivoted(!isPivoted), style: btnStyle(isPivoted), children: ["Pivot ", isPivoted ? '(Show Attributes)' : '(Show Entities)'] }), !isPivoted && (_jsxs("div", { style: { display: 'flex', border: `1px solid ${theme.colors.primary}`, borderRadius: theme.borderRadius.small, overflow: 'hidden' }, children: [_jsx("button", { onClick: () => setViewMode('table'), style: { ...btnStyle(viewMode === 'table'), border: 'none', borderRadius: 0 }, children: "Table" }), _jsx("button", { onClick: () => setViewMode('grid'), style: { ...btnStyle(viewMode === 'grid'), border: 'none', borderRadius: 0 }, children: "Grid" })] }))] })] })] }), _jsxs("div", { style: { padding: 0, backgroundColor: theme.colors.background }, children: [isPivoted ? (_jsx("div", { style: { overflowX: 'auto', padding: theme.spacing.medium }, children: _jsxs("table", { style: { width: '100%', borderCollapse: 'collapse', minWidth: '600px' }, children: [_jsx("thead", { children: _jsxs("tr", { style: { backgroundColor: theme.colors.primary, color: '#fff' }, children: [_jsx("th", { style: { padding: theme.spacing.medium, textAlign: 'left', minWidth: '150px' }, children: "Entity" }), processedItems.map((item, i) => (_jsx("th", { style: { padding: theme.spacing.medium, textAlign: 'left', borderLeft: '1px solid rgba(255,255,255,0.2)' }, children: item.aspect }, i)))] }) }), _jsxs("tbody", { children: [_jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [_jsx("td", { style: { padding: theme.spacing.medium, fontWeight: 'bold', color: theme.colors.text }, children: option1Name }), processedItems.map((item, i) => (_jsx("td", { style: { padding: theme.spacing.medium, color: theme.colors.textSecondary, borderLeft: `1px solid ${theme.colors.border}` }, children: item.option1 }, i)))] }), _jsxs("tr", { children: [_jsx("td", { style: { padding: theme.spacing.medium, fontWeight: 'bold', color: theme.colors.text }, children: option2Name }), processedItems.map((item, i) => (_jsx("td", { style: { padding: theme.spacing.medium, color: theme.colors.textSecondary, borderLeft: `1px solid ${theme.colors.border}` }, children: item.option2 }, i)))] })] })] }) })) : (
+                    /* MODE 2: STANDARD VIEWS (Table or Grid) */
+                    _jsx("div", { style: { padding: theme.spacing.medium }, children: Object.entries(groupedItems).map(([groupTitle, groupItems]) => (_jsxs("div", { style: { marginBottom: theme.spacing.medium }, children: [isGrouped && (_jsx("h4", { style: { color: theme.colors.textSecondary, borderBottom: `1px solid ${theme.colors.border}`, marginBottom: theme.spacing.small }, children: groupTitle })), viewMode === 'table' && (_jsxs("div", { style: {
+                                        border: `1px solid ${theme.colors.border}`,
+                                        borderRadius: theme.borderRadius.medium,
+                                        overflow: 'hidden'
+                                    }, children: [_jsxs("div", { style: {
+                                                display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+                                                backgroundColor: theme.colors.primary, color: '#fff', fontWeight: 'bold'
+                                            }, children: [_jsx("div", { style: { padding: theme.spacing.medium, borderRight: `1px solid rgba(255,255,255,0.2)` }, children: "Aspect" }), _jsx("div", { style: { padding: theme.spacing.medium, borderRight: `1px solid rgba(255,255,255,0.2)` }, children: option1Name }), _jsx("div", { style: { padding: theme.spacing.medium }, children: option2Name })] }), groupItems.map((item, i) => (_jsxs("div", { style: {
+                                                display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+                                                backgroundColor: i % 2 === 0 ? theme.colors.background : theme.colors.cardBackground,
+                                                borderTop: `1px solid ${theme.colors.border}`
+                                            }, children: [_jsx("div", { style: { padding: theme.spacing.medium, fontWeight: 'bold', color: theme.colors.text, borderRight: `1px solid ${theme.colors.border}` }, children: item.aspect }), _jsx("div", { style: { padding: theme.spacing.medium, color: theme.colors.textSecondary, borderRight: `1px solid ${theme.colors.border}` }, children: item.option1 }), _jsx("div", { style: { padding: theme.spacing.medium, color: theme.colors.textSecondary }, children: item.option2 })] }, i)))] })), viewMode === 'grid' && (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: theme.spacing.medium }, children: groupItems.map((item, i) => (_jsxs("div", { style: {
+                                            border: `1px solid ${theme.colors.border}`,
+                                            borderRadius: theme.borderRadius.medium,
+                                            backgroundColor: theme.colors.cardBackground,
+                                            overflow: 'hidden'
+                                        }, children: [_jsx("div", { style: { padding: theme.spacing.small, backgroundColor: theme.colors.primary, color: 'white', fontWeight: 'bold', textAlign: 'center' }, children: item.aspect }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsxs("div", { style: { padding: theme.spacing.medium, borderRight: `1px solid ${theme.colors.border}` }, children: [_jsx("div", { style: { fontSize: '11px', color: theme.colors.textSecondary, marginBottom: '4px' }, children: option1Name }), _jsx("div", { style: { color: theme.colors.text }, children: item.option1 })] }), _jsxs("div", { style: { padding: theme.spacing.medium }, children: [_jsx("div", { style: { fontSize: '11px', color: theme.colors.textSecondary, marginBottom: '4px' }, children: option2Name }), _jsx("div", { style: { color: theme.colors.text }, children: item.option2 })] })] })] }, i))) }))] }, groupTitle))) })), processedItems.length === 0 && (_jsxs("div", { style: { padding: theme.spacing.large, textAlign: 'center', color: theme.colors.textSecondary }, children: ["No aspects found matching \"", filterText, "\""] }))] })] }));
+};

package/dist/components/smart/ConceptTreeBlock.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ConceptNode {
+    name: string;
+    children?: ConceptNode[];
+}
+export interface ConceptTreeBlockProps {
+    title: string;
+    root: ConceptNode;
+}
+export declare const ConceptTreeBlock: React.FC<ConceptTreeBlockProps>;
+export {};