@amritanshu3011/mdx-renderer 1.0.0 → 1.0.3

package/dist/components/smart/ConceptTreeBlock.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const ConceptTreeBlock = ({ title, root }) => {
+    const theme = useThemeWithFallback();
+    // --- State ---
+    const [viewMode, setViewMode] = useState('tree');
+    const [filterText, setFilterText] = useState('');
+    const [sortMode, setSortMode] = useState('original');
+    const [expanded, setExpanded] = useState(new Set([root.name])); // Root open by default
+    const [isPivoted, setIsPivoted] = useState(false); // Used to toggle Level view
+    // --- Helpers ---
+    // 1. Flatten Tree (for List/Grid/Level views)
+    const flattenTree = (node, depth = 0) => {
+        let result = [{ node, depth, path: node.name }];
+        if (node.children) {
+            node.children.forEach(child => {
+                result = [...result, ...flattenTree(child, depth + 1)];
+            });
+        }
+        return result;
+    };
+    // 2. Recursive Filter & Sort (For Tree View)
+    const processTree = (node) => {
+        // A. Check if current node matches
+        const matchesSelf = node.name.toLowerCase().includes(filterText.toLowerCase());
+        // B. Process Children
+        let processedChildren = [];
+        if (node.children) {
+            processedChildren = node.children
+                .map(child => processTree(child))
+                .filter((child) => child !== null);
+            // Sort Children if needed
+            if (sortMode !== 'original') {
+                processedChildren.sort((a, b) => sortMode === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name));
+            }
+        }
+        // C. Return Node if it matches OR if it has matching children (keep context)
+        if (matchesSelf || processedChildren.length > 0) {
+            return { ...node, children: processedChildren.length > 0 ? processedChildren : undefined };
+        }
+        return null;
+    };
+    // --- Memoized Data ---
+    const processedRoot = useMemo(() => processTree(root), [root, filterText, sortMode]);
+    const flatData = useMemo(() => {
+        if (!processedRoot)
+            return [];
+        return flattenTree(processedRoot);
+    }, [processedRoot]);
+    // Group by Levels (The "Pivot")
+    const dataByLevel = useMemo(() => {
+        const levels = {};
+        flatData.forEach(item => {
+            if (!levels[item.depth])
+                levels[item.depth] = [];
+            levels[item.depth].push(item);
+        });
+        return levels;
+    }, [flatData]);
+    // --- Handlers ---
+    const toggleExpand = (name) => {
+        const next = new Set(expanded);
+        if (next.has(name))
+            next.delete(name);
+        else
+            next.add(name);
+        setExpanded(next);
+    };
+    const expandAll = () => {
+        const allNames = new Set(flatData.map(d => d.node.name));
+        setExpanded(allNames);
+    };
+    const collapseAll = () => setExpanded(new Set());
+    // Auto-expand when searching
+    useEffect(() => {
+        if (filterText)
+            expandAll();
+    }, [filterText]);
+    // --- Render Helpers ---
+    const btnStyle = (active) => ({
+        padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+        backgroundColor: active ? theme.colors.primary : 'transparent',
+        color: active ? '#fff' : theme.colors.text,
+        border: `1px solid ${theme.colors.primary}`,
+        borderRadius: theme.borderRadius.small,
+        cursor: 'pointer',
+        fontSize: theme.typography.smallSize
+    });
+    // Recursive Renderer (The Original Logic, enhanced)
+    const renderNode = (node, level = 0) => {
+        const hasChildren = node.children && node.children.length > 0;
+        const isExpanded = expanded.has(node.name);
+        return (_jsxs("div", { style: { marginLeft: level > 0 ? theme.spacing.large : '0' }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing.small,
+                        padding: theme.spacing.small,
+                        backgroundColor: theme.colors.cardBackground,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius.small,
+                        marginBottom: theme.spacing.small,
+                        color: theme.colors.text,
+                        fontWeight: level === 0 ? 'bold' : 'normal'
+                    }, children: [hasChildren ? (_jsx("button", { onClick: () => toggleExpand(node.name), style: {
+                                background: 'none', border: 'none', cursor: 'pointer',
+                                color: theme.colors.primary, fontWeight: 'bold', width: '20px'
+                            }, children: isExpanded ? '▼' : '▶' })) : _jsx("span", { style: { width: '20px' } }), node.name, level === 0 && _jsx("span", { style: { fontSize: '10px', color: theme.colors.textSecondary, border: `1px solid ${theme.colors.border}`, padding: '0 4px', borderRadius: '4px' }, children: "ROOT" })] }), hasChildren && isExpanded && (_jsx("div", { style: { borderLeft: `1px solid ${theme.colors.border}`, marginLeft: '12px', paddingLeft: '12px' }, children: node.children.map(child => renderNode(child, level + 1)) }))] }, node.name));
+    };
+    return (_jsxs("div", { style: {
+            margin: `${theme.spacing.large} 0`,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.medium,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+            overflow: 'hidden'
+        }, children: [_jsxs("div", { style: {
+                    padding: theme.spacing.medium,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                    backgroundColor: theme.colors.background
+                }, 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 nodes...", value: filterText, onChange: (e) => setFilterText(e.target.value), style: { padding: theme.spacing.small, borderRadius: theme.borderRadius.small, border: `1px solid ${theme.colors.border}` } }), _jsxs("button", { onClick: () => setSortMode(prev => prev === 'original' ? 'asc' : prev === 'asc' ? 'desc' : 'original'), style: btnStyle(sortMode !== 'original'), children: ["Sort ", sortMode === 'original' ? 'Original' : sortMode === 'asc' ? '(A-Z)' : '(Z-A)'] }), viewMode === 'tree' && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: expandAll, style: btnStyle(false), children: "Expand All" }), _jsx("button", { onClick: collapseAll, style: btnStyle(false), children: "Collapse All" })] }))] }), _jsxs("div", { style: { display: 'flex', gap: theme.spacing.small }, children: [_jsx("button", { onClick: () => { setIsPivoted(!isPivoted); setViewMode(isPivoted ? 'tree' : 'levels'); }, style: btnStyle(isPivoted), children: "Pivot (By Depth)" }), _jsxs("div", { style: { display: 'flex', border: `1px solid ${theme.colors.primary}`, borderRadius: theme.borderRadius.small, overflow: 'hidden' }, children: [_jsx("button", { onClick: () => { setViewMode('tree'); setIsPivoted(false); }, style: { ...btnStyle(viewMode === 'tree'), border: 'none', borderRadius: 0 }, children: "Tree" }), _jsx("button", { onClick: () => { setViewMode('grid'); setIsPivoted(false); }, style: { ...btnStyle(viewMode === 'grid'), border: 'none', borderRadius: 0 }, children: "Grid" }), _jsx("button", { onClick: () => { setViewMode('list'); setIsPivoted(false); }, style: { ...btnStyle(viewMode === 'list'), border: 'none', borderRadius: 0 }, children: "List" })] })] })] })] }), _jsxs("div", { style: { padding: theme.spacing.medium, backgroundColor: theme.colors.background, minHeight: '200px' }, children: [!processedRoot && _jsx("div", { style: { color: theme.colors.textSecondary, textAlign: 'center' }, children: "No matches found." }), viewMode === 'tree' && processedRoot && (renderNode(processedRoot)), viewMode === 'grid' && (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: theme.spacing.medium }, children: flatData.map((item, i) => (_jsxs("div", { style: {
+                                padding: theme.spacing.medium,
+                                border: `1px solid ${theme.colors.border}`,
+                                backgroundColor: theme.colors.cardBackground,
+                                borderRadius: theme.borderRadius.medium
+                            }, children: [_jsx("div", { style: { fontWeight: 'bold', color: theme.colors.primary }, children: item.node.name }), _jsxs("div", { style: { fontSize: '10px', color: theme.colors.textSecondary, marginTop: '5px' }, children: ["Depth: ", item.depth] })] }, i))) })), viewMode === 'list' && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: flatData.map((item, i) => (_jsxs("div", { style: {
+                                padding: theme.spacing.small,
+                                borderBottom: `1px solid ${theme.colors.border}`,
+                                display: 'flex', justifyContent: 'space-between'
+                            }, children: [_jsx("span", { children: item.node.name }), _jsxs("span", { style: { color: theme.colors.textSecondary, fontSize: '12px' }, children: ["Level ", item.depth] })] }, i))) })), viewMode === 'levels' && (_jsx("div", { children: Object.entries(dataByLevel).map(([level, items]) => (_jsxs("div", { style: { marginBottom: theme.spacing.large }, children: [_jsxs("h4", { style: {
+                                        color: theme.colors.textSecondary,
+                                        borderBottom: `2px solid ${theme.colors.primary}`,
+                                        marginBottom: theme.spacing.small
+                                    }, children: ["Depth Level ", level] }), _jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: theme.spacing.small }, children: items.map((item, i) => (_jsx("span", { style: {
+                                            padding: '4px 8px',
+                                            backgroundColor: theme.colors.cardBackground,
+                                            border: `1px solid ${theme.colors.border}`,
+                                            borderRadius: '12px',
+                                            fontSize: theme.typography.smallSize
+                                        }, children: item.node.name }, i))) })] }, level))) }))] })] }));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface FlowStep {
+    title: string;
+    description: string;
+}
+export interface FlowBlockProps {
+    title: string;
+    steps: FlowStep[];
+}
+export declare const FlowBlock: React.FC<FlowBlockProps>;
+export {};

package/dist/components/smart/FlowBlock.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useMemo } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const FlowBlock = ({ title, steps }) => {
+    const theme = useThemeWithFallback();
+    // --- State for Data Manipulation ---
+    const [viewMode, setViewMode] = useState('flow');
+    const [filterText, setFilterText] = useState('');
+    const [sortMode, setSortMode] = useState('original');
+    const [isGrouped, setIsGrouped] = useState(false); // Group by First Letter
+    const [isPivoted, setIsPivoted] = useState(false); // Only useful in Table view
+    // --- Logic: Filter & Sort ---
+    const processedData = useMemo(() => {
+        let data = [...steps];
+        // 1. Filter
+        if (filterText) {
+            const lower = filterText.toLowerCase();
+            data = data.filter(s => s.title.toLowerCase().includes(lower) ||
+                s.description.toLowerCase().includes(lower));
+        }
+        // 2. Sort
+        if (sortMode !== 'original') {
+            data.sort((a, b) => {
+                return sortMode === 'asc'
+                    ? a.title.localeCompare(b.title)
+                    : b.title.localeCompare(a.title);
+            });
+        }
+        return data;
+    }, [steps, filterText, sortMode]);
+    // --- Logic: Grouping ---
+    const groupedData = useMemo(() => {
+        if (!isGrouped)
+            return { 'All Steps': processedData };
+        return processedData.reduce((acc, step) => {
+            const key = step.title.charAt(0).toUpperCase();
+            if (!acc[key])
+                acc[key] = [];
+            acc[key].push(step);
+            return acc;
+        }, {});
+    }, [processedData, isGrouped]);
+    // --- Styles Helper ---
+    const btnStyle = (active) => ({
+        padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+        backgroundColor: active ? theme.colors.primary : 'transparent',
+        color: active ? '#fff' : theme.colors.text,
+        border: `1px solid ${theme.colors.primary}`,
+        borderRadius: theme.borderRadius.small,
+        cursor: 'pointer',
+        fontSize: theme.typography.smallSize,
+        fontWeight: 'bold'
+    });
+    return (_jsxs("div", { style: {
+            margin: `${theme.spacing.large} 0`,
+            border: `1px solid ${theme.colors.border || '#ddd'}`,
+            borderRadius: theme.borderRadius.medium,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+            overflow: 'hidden'
+        }, children: [_jsxs("div", { style: {
+                    padding: theme.spacing.medium,
+                    borderBottom: `1px solid ${theme.colors.border || '#eee'}`,
+                    backgroundColor: theme.colors.background || '#f9f9f9'
+                }, children: [_jsx("h2", { style: {
+                            color: theme.colors.text,
+                            margin: `0 0 ${theme.spacing.medium} 0`,
+                            textAlign: 'left'
+                        }, children: title }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: theme.spacing.medium, alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', gap: theme.spacing.small, flexWrap: 'wrap' }, children: [_jsx("input", { type: "text", placeholder: "Filter steps...", value: filterText, onChange: (e) => setFilterText(e.target.value), style: {
+                                            padding: theme.spacing.small,
+                                            borderRadius: theme.borderRadius.small,
+                                            border: `1px solid ${theme.colors.border || '#ccc'}`
+                                        } }), _jsxs("button", { onClick: () => setSortMode(prev => prev === 'original' ? 'asc' : prev === 'asc' ? 'desc' : 'original'), style: btnStyle(sortMode !== 'original'), children: ["Sort ", sortMode === 'original' ? 'Original' : sortMode === 'asc' ? '(A-Z)' : '(Z-A)'] }), _jsx("button", { onClick: () => setIsGrouped(!isGrouped), style: btnStyle(isGrouped), children: isGrouped ? 'Ungroup' : 'Group (A-Z)' })] }), _jsxs("div", { style: { display: 'flex', gap: theme.spacing.small }, children: [viewMode === 'table' && (_jsx("button", { onClick: () => setIsPivoted(!isPivoted), style: btnStyle(isPivoted), children: "Pivot Data" })), _jsx("div", { style: { display: 'flex', border: `1px solid ${theme.colors.primary}`, borderRadius: theme.borderRadius.small, overflow: 'hidden' }, children: ['flow', 'grid', 'list', 'table'].map((v) => (_jsx("button", { onClick: () => setViewMode(v), style: {
+                                                ...btnStyle(viewMode === v),
+                                                border: 'none',
+                                                borderRadius: 0,
+                                                textTransform: 'capitalize'
+                                            }, children: v }, v))) })] })] })] }), _jsxs("div", { style: { padding: theme.spacing.medium, backgroundColor: theme.colors.background }, children: [Object.entries(groupedData).map(([groupTitle, groupSteps]) => (_jsxs("div", { style: { marginBottom: theme.spacing.large }, children: [isGrouped && (_jsxs("h4", { style: {
+                                    color: theme.colors.textSecondary,
+                                    borderBottom: `1px solid ${theme.colors.border || '#eee'}`,
+                                    marginBottom: theme.spacing.medium
+                                }, children: ["Group: ", groupTitle] })), viewMode === 'flow' && (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: theme.spacing.medium,
+                                    overflowX: 'auto',
+                                    padding: theme.spacing.small
+                                }, children: [groupSteps.map((step, i) => (_jsxs(React.Fragment, { children: [_jsxs("div", { style: {
+                                                    flex: '0 0 220px',
+                                                    padding: theme.spacing.medium,
+                                                    backgroundColor: theme.colors.cardBackground,
+                                                    border: `2px solid ${theme.colors.primary}`,
+                                                    borderRadius: theme.borderRadius.medium,
+                                                    boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
+                                                }, children: [_jsxs("div", { style: {
+                                                            fontWeight: 'bold',
+                                                            color: theme.colors.primary,
+                                                            marginBottom: theme.spacing.small,
+                                                            fontSize: theme.typography.bodySize
+                                                        }, children: [i + 1, ". ", step.title] }), _jsx("div", { style: {
+                                                            color: theme.colors.textSecondary,
+                                                            fontSize: theme.typography.smallSize,
+                                                            lineHeight: '1.5'
+                                                        }, children: step.description })] }), i < groupSteps.length - 1 && (_jsx("div", { style: {
+                                                    color: theme.colors.primary,
+                                                    fontSize: '28px',
+                                                    fontWeight: 'bold',
+                                                    minWidth: '20px'
+                                                }, children: "\u2192" }))] }, i))), groupSteps.length === 0 && _jsx("div", { style: { color: theme.colors.textSecondary }, children: "No steps match filter." })] })), viewMode === 'grid' && (_jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: theme.spacing.medium }, children: groupSteps.map((step, i) => (_jsxs("div", { style: {
+                                        padding: theme.spacing.medium,
+                                        backgroundColor: theme.colors.cardBackground,
+                                        border: `1px solid ${theme.colors.border || '#ddd'}`,
+                                        borderRadius: theme.borderRadius.medium
+                                    }, children: [_jsx("div", { style: { fontWeight: 'bold', color: theme.colors.text }, children: step.title }), _jsx("hr", { style: { margin: '8px 0', border: '0', borderTop: `1px solid ${theme.colors.border || '#eee'}` } }), _jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.typography.smallSize }, children: step.description })] }, i))) })), viewMode === 'list' && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.small }, children: groupSteps.map((step, i) => (_jsxs("div", { style: {
+                                        padding: theme.spacing.medium,
+                                        backgroundColor: theme.colors.cardBackground,
+                                        borderLeft: `4px solid ${theme.colors.primary}`,
+                                        borderRadius: theme.borderRadius.small,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between'
+                                    }, children: [_jsxs("span", { style: { fontWeight: 'bold', color: theme.colors.text }, children: [i + 1, ". ", step.title] }), _jsx("span", { style: { color: theme.colors.textSecondary }, children: step.description })] }, i))) })), viewMode === 'table' && (_jsx("div", { style: { overflowX: 'auto' }, children: _jsxs("table", { style: { width: '100%', borderCollapse: 'collapse', fontSize: theme.typography.smallSize }, children: [!isPivoted && (_jsxs(_Fragment, { children: [_jsx("thead", { children: _jsxs("tr", { style: { backgroundColor: theme.colors.background, borderBottom: `2px solid ${theme.colors.primary}` }, children: [_jsx("th", { style: { padding: theme.spacing.small, textAlign: 'left' }, children: "Step #" }), _jsx("th", { style: { padding: theme.spacing.small, textAlign: 'left' }, children: "Title" }), _jsx("th", { style: { padding: theme.spacing.small, textAlign: 'left' }, children: "Description" })] }) }), _jsx("tbody", { children: groupSteps.map((step, i) => (_jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border || '#eee'}` }, children: [_jsx("td", { style: { padding: theme.spacing.small }, children: i + 1 }), _jsx("td", { style: { padding: theme.spacing.small, fontWeight: 'bold' }, children: step.title }), _jsx("td", { style: { padding: theme.spacing.small, color: theme.colors.textSecondary }, children: step.description })] }, i))) })] })), isPivoted && (_jsxs("tbody", { children: [_jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border || '#eee'}` }, children: [_jsx("th", { style: { padding: theme.spacing.small, textAlign: 'right', backgroundColor: theme.colors.background }, children: "Title" }), groupSteps.map((step, i) => (_jsx("td", { style: { padding: theme.spacing.small, fontWeight: 'bold', borderLeft: `1px solid ${theme.colors.border}` }, children: step.title }, i)))] }), _jsxs("tr", { children: [_jsx("th", { style: { padding: theme.spacing.small, textAlign: 'right', backgroundColor: theme.colors.background }, children: "Description" }), groupSteps.map((step, i) => (_jsx("td", { style: { padding: theme.spacing.small, color: theme.colors.textSecondary, borderLeft: `1px solid ${theme.colors.border}` }, children: step.description }, i)))] })] }))] }) }))] }, groupTitle))), processedData.length === 0 && (_jsxs("div", { style: { textAlign: 'center', padding: theme.spacing.large, color: theme.colors.textSecondary }, children: ["No results found for \"", filterText, "\""] }))] })] }));
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface InteractiveCompositeProps {
+    title: string;
+    selector: {
+        label: string;
+        options: string[];
+        default: string;
+    };
+    views: {
+        chart: {
+            chartType: 'line' | 'radial_bar' | 'treemap';
+            xKey?: string;
+            yKey: string;
+            series: Record<string, any[]>;
+        };
+        table: {
+            columns: string[];
+            rows: Record<string, Record<string, string | number>[]>;
+        };
+    };
+}
+export declare const InteractiveCompositeBlock: React.FC<InteractiveCompositeProps>;

package/dist/components/smart/InteractiveCompositeBlock.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, RadialBarChart, RadialBar, Treemap } from 'recharts';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const InteractiveCompositeBlock = ({ title, selector, views }) => {
+    const theme = useThemeWithFallback();
+    // --- State ---
+    const [selected, setSelected] = useState(selector.default);
+    const [viewMode, setViewMode] = useState('split');
+    const [filterText, setFilterText] = useState('');
+    const [sortConfig, setSortConfig] = useState({ col: '', dir: null });
+    // --- Data Access ---
+    const chartData = views.chart.series[selected] || [];
+    const rawTableRows = views.table.rows[selected] || [];
+    // --- Logic: Process Table Data ---
+    const tableRows = useMemo(() => {
+        let data = [...rawTableRows];
+        // 1. Filter
+        if (filterText) {
+            const lower = filterText.toLowerCase();
+            data = data.filter(row => Object.values(row).some(val => String(val).toLowerCase().includes(lower)));
+        }
+        // 2. Sort
+        if (sortConfig.col && sortConfig.dir) {
+            data.sort((a, b) => {
+                const valA = a[sortConfig.col];
+                const valB = b[sortConfig.col];
+                if (typeof valA === 'number' && typeof valB === 'number') {
+                    return sortConfig.dir === 'asc' ? valA - valB : valB - valA;
+                }
+                return sortConfig.dir === 'asc'
+                    ? String(valA).localeCompare(String(valB))
+                    : String(valB).localeCompare(String(valA));
+            });
+        }
+        return data;
+    }, [rawTableRows, filterText, sortConfig]);
+    // --- Handlers ---
+    const handleSort = (col) => {
+        setSortConfig(prev => ({
+            col,
+            dir: prev.col === col && prev.dir === 'asc' ? 'desc' : 'asc'
+        }));
+    };
+    const renderChart = () => {
+        switch (views.chart.chartType) {
+            case 'radial_bar':
+                return (_jsxs(RadialBarChart, { innerRadius: "30%", outerRadius: "90%", data: chartData, children: [_jsx(RadialBar, { dataKey: views.chart.yKey, fill: theme.colors.primary }), _jsx(Tooltip, {})] }));
+            case 'treemap':
+                return (_jsx(Treemap, { data: chartData, dataKey: views.chart.yKey, stroke: theme.colors.border, fill: theme.colors.primary, children: _jsx(Tooltip, {}) }));
+            case 'line':
+            default:
+                return (_jsxs(LineChart, { data: chartData, children: [views.chart.xKey && _jsx(XAxis, { dataKey: views.chart.xKey, tick: { fill: theme.colors.textSecondary } }), _jsx(YAxis, { tick: { fill: theme.colors.textSecondary } }), _jsx(Tooltip, {}), _jsx(Line, { type: "monotone", dataKey: views.chart.yKey, stroke: theme.colors.primary, strokeWidth: 2, dot: false })] }));
+        }
+    };
+    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: 0,
+        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}`,
+                    display: 'flex', flexWrap: 'wrap', gap: theme.spacing.medium, alignItems: 'center', justifyContent: 'space-between'
+                }, children: [_jsx("div", { children: _jsx("h2", { style: { margin: 0, fontSize: theme.typography.h2Size, color: theme.colors.text }, children: title }) }), _jsxs("div", { style: { display: 'flex', gap: theme.spacing.medium, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: theme.spacing.small }, children: [_jsxs("span", { style: { fontSize: '12px', color: theme.colors.textSecondary }, children: [selector.label, ":"] }), _jsx("select", { value: selected, onChange: (e) => setSelected(e.target.value), style: {
+                                            padding: '4px 8px', borderRadius: theme.borderRadius.small,
+                                            border: `1px solid ${theme.colors.border}`, backgroundColor: theme.colors.cardBackground
+                                        }, children: selector.options.map(o => _jsx("option", { value: o, children: o }, o)) })] }), _jsxs("div", { style: { display: 'flex', border: `1px solid ${theme.colors.primary}`, borderRadius: theme.borderRadius.small, overflow: 'hidden' }, children: [_jsx("button", { onClick: () => setViewMode('split'), style: btnStyle(viewMode === 'split'), children: "Split" }), _jsx("button", { onClick: () => setViewMode('chart'), style: btnStyle(viewMode === 'chart'), children: "Chart" }), _jsx("button", { onClick: () => setViewMode('table'), style: btnStyle(viewMode === 'table'), children: "Table" })] })] })] }), _jsxs("div", { style: { padding: theme.spacing.medium, backgroundColor: theme.colors.background }, children: [(viewMode === 'split' || viewMode === 'chart') && (_jsx("div", { style: {
+                            height: viewMode === 'chart' ? 450 : 320,
+                            padding: theme.spacing.medium,
+                            backgroundColor: theme.colors.cardBackground,
+                            borderRadius: theme.borderRadius.medium,
+                            border: `1px solid ${theme.colors.border}`,
+                            marginBottom: viewMode === 'split' ? theme.spacing.medium : 0
+                        }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: renderChart() }) })), (viewMode === 'split' || viewMode === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: theme.spacing.small, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("input", { type: "text", placeholder: "Filter table data...", value: filterText, onChange: (e) => setFilterText(e.target.value), style: { padding: '4px 8px', borderRadius: theme.borderRadius.small, border: `1px solid ${theme.colors.border}`, width: '200px' } }), _jsxs("span", { style: { fontSize: '11px', color: theme.colors.textSecondary }, children: [tableRows.length, " rows found"] })] }), _jsx("div", { style: {
+                                    overflowX: 'auto',
+                                    backgroundColor: theme.colors.cardBackground,
+                                    borderRadius: theme.borderRadius.medium,
+                                    border: `1px solid ${theme.colors.border}`,
+                                    maxHeight: viewMode === 'table' ? '500px' : '300px',
+                                    overflowY: 'auto'
+                                }, children: _jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { style: { position: 'sticky', top: 0, backgroundColor: theme.colors.cardBackground, zIndex: 1 }, children: _jsx("tr", { children: views.table.columns.map(col => (_jsxs("th", { onClick: () => handleSort(col), style: {
+                                                        textAlign: 'left',
+                                                        padding: theme.spacing.small,
+                                                        borderBottom: `2px solid ${theme.colors.border}`,
+                                                        color: theme.colors.text,
+                                                        cursor: 'pointer',
+                                                        userSelect: 'none',
+                                                        minWidth: '100px'
+                                                    }, children: [col, " ", sortConfig.col === col ? (sortConfig.dir === 'asc' ? '↑' : '↓') : ''] }, col))) }) }), _jsxs("tbody", { children: [tableRows.map((row, i) => (_jsx("tr", { style: { backgroundColor: i % 2 === 0 ? 'transparent' : 'rgba(0,0,0,0.02)' }, children: views.table.columns.map(col => (_jsx("td", { style: { padding: theme.spacing.small, borderBottom: `1px solid ${theme.colors.border}`, color: theme.colors.textSecondary }, children: row[col] }, col))) }, i))), tableRows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: views.table.columns.length, style: { padding: '20px', textAlign: 'center', color: theme.colors.textSecondary }, children: "No matches found." }) }))] })] }) })] }))] })] }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LineChartBlockProps {
+    title: string;
+    xKey: string;
+    yKey: string;
+    points: any[];
+}
+export declare const LineChartBlock: React.FC<LineChartBlockProps>;

package/dist/components/smart/LineChartBlock.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const LineChartBlock = ({ title, xKey, yKey, points }) => {
+    const theme = useThemeWithFallback();
+    return (_jsxs("div", { style: { margin: `${theme.spacing.large} 0` }, children: [_jsx("h2", { style: {
+                    color: theme.colors.text,
+                    marginBottom: theme.spacing.medium,
+                    textAlign: 'center'
+                }, children: title }), _jsx("div", { style: {
+                    height: 320,
+                    padding: theme.spacing.medium,
+                    backgroundColor: theme.colors.cardBackground,
+                    borderRadius: theme.borderRadius.medium,
+                    border: `1px solid ${theme.colors.border}`
+                }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(LineChart, { data: points, children: [_jsx(XAxis, { dataKey: xKey, tick: { fill: theme.colors.textSecondary } }), _jsx(YAxis, { tick: { fill: theme.colors.textSecondary } }), _jsx(Tooltip, { contentStyle: {
+                                    backgroundColor: theme.colors.cardBackground,
+                                    border: `1px solid ${theme.colors.border}`,
+                                    borderRadius: theme.borderRadius.small,
+                                    color: theme.colors.text
+                                } }), _jsx(Line, { type: "monotone", dataKey: yKey, stroke: theme.colors.primary, strokeWidth: 2, dot: false })] }) }) })] }));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ProsConsBlockProps {
+    title: string;
+    pros: string[];
+    cons: string[];
+}
+export declare const ProsConsBlock: React.FC<ProsConsBlockProps>;

package/dist/components/smart/ProsConsBlock.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { useThemeWithFallback } from '../../utils/useThemeWithFallback';
+export const ProsConsBlock = ({ title, pros, cons }) => {
+    const theme = useThemeWithFallback();
+    // --- State ---
+    const [filterText, setFilterText] = useState('');
+    const [sortMode, setSortMode] = useState('original');
+    const [isPivoted, setIsPivoted] = useState(false); // Merges lists into one
+    const [viewMode, setViewMode] = useState('split');
+    // --- Data Processing ---
+    const processedData = useMemo(() => {
+        // 1. Unify data structure
+        const allItems = [
+            ...pros.map(t => ({ text: t, type: 'pro' })),
+            ...cons.map(t => ({ text: t, type: 'con' }))
+        ];
+        // 2. Filter
+        let filtered = allItems;
+        if (filterText) {
+            filtered = allItems.filter(i => i.text.toLowerCase().includes(filterText.toLowerCase()));
+        }
+        // 3. Sort
+        if (sortMode !== 'original') {
+            filtered.sort((a, b) => sortMode === 'asc'
+                ? a.text.localeCompare(b.text)
+                : b.text.localeCompare(a.text));
+        }
+        return filtered;
+    }, [pros, cons, filterText, sortMode]);
+    // Derived arrays for "Split" view
+    const currentPros = processedData.filter(i => i.type === 'pro');
+    const currentCons = processedData.filter(i => i.type === 'con');
+    // --- 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
+    });
+    const badgeStyle = (type) => ({
+        display: 'inline-block',
+        padding: '2px 8px',
+        borderRadius: '12px',
+        fontSize: '11px',
+        fontWeight: 'bold',
+        backgroundColor: type === 'pro' ? 'rgba(40, 167, 69, 0.1)' : 'rgba(220, 53, 69, 0.1)',
+        color: type === 'pro' ? '#28a745' : '#dc3545',
+        border: `1px solid ${type === 'pro' ? '#28a745' : '#dc3545'}`
+    });
+    return (_jsxs("div", { style: {
+            margin: `${theme.spacing.large} 0`,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.medium,
+            overflow: 'hidden'
+        }, children: [_jsxs("div", { style: {
+                    padding: theme.spacing.medium,
+                    backgroundColor: theme.colors.background,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                    display: 'flex', flexWrap: 'wrap', gap: theme.spacing.medium, alignItems: 'center', justifyContent: 'space-between'
+                }, children: [_jsx("h2", { style: { margin: 0, fontSize: theme.typography.h2Size, color: theme.colors.text }, children: title }), _jsxs("div", { style: { display: 'flex', gap: theme.spacing.small }, children: [_jsx("input", { type: "text", placeholder: "Filter...", value: filterText, onChange: (e) => setFilterText(e.target.value), style: { padding: '4px 8px', borderRadius: theme.borderRadius.small, border: `1px solid ${theme.colors.border}` } }), _jsx("button", { onClick: () => setSortMode(p => p === 'original' ? 'asc' : 'original'), style: btnStyle(sortMode === 'asc'), children: "Sort A-Z" }), _jsx("button", { onClick: () => setIsPivoted(!isPivoted), style: btnStyle(isPivoted), children: isPivoted ? 'Split View' : 'Pivot (Merge)' })] })] }), _jsx("div", { style: { padding: theme.spacing.medium, backgroundColor: theme.colors.background }, children: isPivoted ? (_jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { style: { textAlign: 'left', borderBottom: `2px solid ${theme.colors.border}` }, children: [_jsx("th", { style: { padding: theme.spacing.small }, children: "Type" }), _jsx("th", { style: { padding: theme.spacing.small }, children: "Point" })] }) }), _jsxs("tbody", { children: [processedData.map((item, i) => (_jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [_jsx("td", { style: { padding: theme.spacing.small, width: '80px' }, children: _jsx("span", { style: badgeStyle(item.type), children: item.type.toUpperCase() }) }), _jsx("td", { style: { padding: theme.spacing.small, color: theme.colors.text }, children: item.text })] }, i))), processedData.length === 0 && _jsx("tr", { children: _jsx("td", { colSpan: 2, style: { textAlign: 'center', padding: '20px' }, children: "No matches." }) })] })] })) : (
+                /* VIEW 2: ORIGINAL SPLIT (Grid) */
+                _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: theme.spacing.medium }, children: [_jsxs("div", { style: {
+                                padding: theme.spacing.medium,
+                                backgroundColor: theme.colors.cardBackground,
+                                border: `2px solid #28a745`,
+                                borderRadius: theme.borderRadius.medium
+                            }, children: [_jsxs("h3", { style: { color: '#28a745', margin: `0 0 ${theme.spacing.medium} 0`, display: 'flex', alignItems: 'center', gap: '8px' }, children: ["\u2713 Pros (", currentPros.length, ")"] }), _jsx("ul", { style: { margin: 0, paddingLeft: theme.spacing.medium, color: theme.colors.text }, children: currentPros.map((item, i) => (_jsx("li", { style: { marginBottom: theme.spacing.small }, children: item.text }, i))) })] }), _jsxs("div", { style: {
+                                padding: theme.spacing.medium,
+                                backgroundColor: theme.colors.cardBackground,
+                                border: `2px solid #dc3545`,
+                                borderRadius: theme.borderRadius.medium
+                            }, children: [_jsxs("h3", { style: { color: '#dc3545', margin: `0 0 ${theme.spacing.medium} 0`, display: 'flex', alignItems: 'center', gap: '8px' }, children: ["\u2717 Cons (", currentCons.length, ")"] }), _jsx("ul", { style: { margin: 0, paddingLeft: theme.spacing.medium, color: theme.colors.text }, children: currentCons.map((item, i) => (_jsx("li", { style: { marginBottom: theme.spacing.small }, children: item.text }, i))) })] })] })) })] }));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Node {
+    name: string;
+    value?: number;
+    children?: Node[];
+}
+export interface SunburstProps {
+    title: string;
+    root: Node;
+}
+export declare const Sunburst: React.FC<SunburstProps>;
+export {};