npcts 0.1.0

package/dist/ui/dashboard/TableWidget.js

@@ -0,0 +1,117 @@
+import React, { useState, useMemo } from 'react';
+import { ChevronUp, ChevronDown, Search, Download, Copy } from 'lucide-react';
+export const TableWidget = ({ data, columns: propColumns, maxHeight = 400, sortable = true, searchable = true, pagination = true, pageSize = 10, onRowClick, onExport }) => {
+    const [sortColumn, setSortColumn] = useState(null);
+    const [sortDirection, setSortDirection] = useState('asc');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [currentPage, setCurrentPage] = useState(0);
+    // Derive columns from data if not provided
+    const columns = useMemo(() => {
+        if (propColumns)
+            return propColumns;
+        if (data.length === 0)
+            return [];
+        return Object.keys(data[0]);
+    }, [data, propColumns]);
+    // Filter data by search term
+    const filteredData = useMemo(() => {
+        if (!searchTerm)
+            return data;
+        const term = searchTerm.toLowerCase();
+        return data.filter(row => columns.some(col => String(row[col] ?? '').toLowerCase().includes(term)));
+    }, [data, columns, searchTerm]);
+    // Sort data
+    const sortedData = useMemo(() => {
+        if (!sortColumn)
+            return filteredData;
+        return [...filteredData].sort((a, b) => {
+            const aVal = a[sortColumn];
+            const bVal = b[sortColumn];
+            if (aVal === null || aVal === undefined)
+                return 1;
+            if (bVal === null || bVal === undefined)
+                return -1;
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            const aStr = String(aVal);
+            const bStr = String(bVal);
+            return sortDirection === 'asc'
+                ? aStr.localeCompare(bStr)
+                : bStr.localeCompare(aStr);
+        });
+    }, [filteredData, sortColumn, sortDirection]);
+    // Paginate data
+    const paginatedData = useMemo(() => {
+        if (!pagination)
+            return sortedData;
+        const start = currentPage * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, pagination, currentPage, pageSize]);
+    const totalPages = Math.ceil(sortedData.length / pageSize);
+    const handleSort = (column) => {
+        if (!sortable)
+            return;
+        if (sortColumn === column) {
+            setSortDirection(d => d === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortColumn(column);
+            setSortDirection('asc');
+        }
+    };
+    const handleCopyCell = (value) => {
+        navigator.clipboard.writeText(String(value ?? ''));
+    };
+    if (data.length === 0) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-32 text-gray-500" }, "No data available"));
+    }
+    return (React.createElement("div", { className: "flex flex-col h-full" },
+        (searchable || onExport) && (React.createElement("div", { className: "flex items-center gap-2 mb-2" },
+            searchable && (React.createElement("div", { className: "flex-1 relative" },
+                React.createElement(Search, { size: 14, className: "absolute left-2 top-1/2 -translate-y-1/2 text-gray-500" }),
+                React.createElement("input", { type: "text", value: searchTerm, onChange: (e) => {
+                        setSearchTerm(e.target.value);
+                        setCurrentPage(0);
+                    }, placeholder: "Search...", className: "w-full pl-8 pr-3 py-1.5 bg-gray-800 border border-gray-700 rounded text-sm" }))),
+            onExport && (React.createElement("button", { onClick: () => onExport(sortedData), className: "p-1.5 hover:bg-gray-700 rounded text-gray-400", title: "Export" },
+                React.createElement(Download, { size: 14 }))))),
+        React.createElement("div", { className: "flex-1 overflow-auto border border-gray-700 rounded", style: { maxHeight } },
+            React.createElement("table", { className: "w-full text-sm" },
+                React.createElement("thead", { className: "sticky top-0 bg-gray-800 z-10" },
+                    React.createElement("tr", null, columns.map(col => (React.createElement("th", { key: col, onClick: () => handleSort(col), className: `px-3 py-2 text-left font-medium text-gray-300 border-b border-gray-700
+                                        ${sortable ? 'cursor-pointer hover:bg-gray-700' : ''}` },
+                        React.createElement("div", { className: "flex items-center gap-1" },
+                            React.createElement("span", { className: "truncate" }, col),
+                            sortable && sortColumn === col && (sortDirection === 'asc'
+                                ? React.createElement(ChevronUp, { size: 12 })
+                                : React.createElement(ChevronDown, { size: 12 })))))))),
+                React.createElement("tbody", null, paginatedData.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, onClick: () => onRowClick?.(row, rowIndex), className: `border-b border-gray-800 hover:bg-gray-800/50
+                                    ${onRowClick ? 'cursor-pointer' : ''}` }, columns.map(col => (React.createElement("td", { key: col, className: "px-3 py-2 text-gray-300 group relative" },
+                    React.createElement("div", { className: "truncate max-w-[200px]", title: String(row[col] ?? '') }, formatCellValue(row[col])),
+                    React.createElement("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            handleCopyCell(row[col]);
+                        }, className: "absolute right-1 top-1/2 -translate-y-1/2 p-1\n                                                opacity-0 group-hover:opacity-100 hover:bg-gray-700 rounded" },
+                        React.createElement(Copy, { size: 10 }))))))))))),
+        pagination && totalPages > 1 && (React.createElement("div", { className: "flex items-center justify-between mt-2 text-sm text-gray-400" },
+            React.createElement("span", null,
+                currentPage * pageSize + 1,
+                "-",
+                Math.min((currentPage + 1) * pageSize, sortedData.length),
+                " of ",
+                sortedData.length),
+            React.createElement("div", { className: "flex gap-1" },
+                React.createElement("button", { onClick: () => setCurrentPage(p => Math.max(0, p - 1)), disabled: currentPage === 0, className: "px-2 py-1 rounded hover:bg-gray-700 disabled:opacity-50" }, "Prev"),
+                React.createElement("button", { onClick: () => setCurrentPage(p => Math.min(totalPages - 1, p + 1)), disabled: currentPage >= totalPages - 1, className: "px-2 py-1 rounded hover:bg-gray-700 disabled:opacity-50" }, "Next"))))));
+};
+function formatCellValue(value) {
+    if (value === null || value === undefined)
+        return '—';
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+}
+export default TableWidget;

package/dist/ui/dashboard/Widget.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export interface WidgetProps {
+    title: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    loading?: boolean;
+    error?: string | null;
+    children: React.ReactNode;
+    className?: string;
+    headerActions?: React.ReactNode;
+    onContextMenu?: (e: React.MouseEvent) => void;
+}
+export declare const Widget: React.FC<WidgetProps>;
+export interface StatWidgetProps {
+    value: string | number;
+    label?: string;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down';
+    };
+    className?: string;
+}
+export declare const StatValue: React.FC<StatWidgetProps>;
+export interface StatListProps {
+    items: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    className?: string;
+}
+export declare const StatList: React.FC<StatListProps>;
+export interface WidgetToggleProps {
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    activeValue: string;
+    onChange: (value: string) => void;
+}
+export declare const WidgetToggle: React.FC<WidgetToggleProps>;

package/dist/ui/dashboard/Widget.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Loader } from 'lucide-react';
+export const Widget = ({ title, icon, iconColor = 'text-gray-400', loading = false, error = null, children, className = '', headerActions, onContextMenu }) => {
+    return (React.createElement("div", { className: `theme-bg-tertiary p-4 rounded-lg flex flex-col h-full ${className}`, onContextMenu: onContextMenu },
+        React.createElement("div", { className: "flex justify-between items-start flex-shrink-0 mb-2" },
+            React.createElement("div", { className: "flex items-center gap-3 flex-1" },
+                icon && React.createElement("span", { className: iconColor }, icon),
+                React.createElement("h4", { className: "font-semibold theme-text-secondary truncate" }, title)),
+            headerActions),
+        React.createElement("div", { className: "flex-1 overflow-hidden" }, loading ? (React.createElement("div", { className: "flex items-center justify-center h-full" },
+            React.createElement(Loader, { className: "animate-spin text-blue-400", size: 24 }))) : error ? (React.createElement("div", { className: "text-red-400 p-2 text-xs overflow-auto" }, error)) : (children))));
+};
+export const StatValue = ({ value, label, trend, className = '' }) => (React.createElement("div", { className: `flex flex-col ${className}` },
+    React.createElement("p", { className: "text-3xl font-bold theme-text-primary" }, value),
+    label && React.createElement("p", { className: "text-sm theme-text-secondary mt-1" }, label),
+    trend && (React.createElement("p", { className: `text-sm mt-1 ${trend.direction === 'up' ? 'text-green-400' : 'text-red-400'}` },
+        trend.direction === 'up' ? '↑' : '↓',
+        " ",
+        Math.abs(trend.value),
+        "%"))));
+export const StatList = ({ items, className = '' }) => (React.createElement("ul", { className: `space-y-1 text-sm theme-text-secondary ${className}` }, items.map((item, i) => (React.createElement("li", { key: i, className: "flex justify-between" },
+    React.createElement("span", null, item.label),
+    React.createElement("span", { className: "font-bold" }, item.value))))));
+export const WidgetToggle = ({ options, activeValue, onChange }) => (React.createElement("div", { className: "flex items-center gap-1" }, options.map(opt => (React.createElement("button", { key: opt.value, onClick: () => onChange(opt.value), className: `px-2 py-0.5 text-xs rounded ${activeValue === opt.value
+        ? 'theme-button-primary'
+        : 'theme-button theme-hover'}` }, opt.label)))));

package/dist/ui/dashboard/WidgetBuilder.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface WidgetConfig {
+    id?: string;
+    title: string;
+    type: 'table' | 'chart' | 'stat' | 'stat_list' | 'line_chart' | 'bar_chart';
+    query: string;
+    iconName?: string;
+    iconColor?: string;
+    span?: number;
+    chartConfig?: {
+        x: string;
+        y: string;
+        type: 'line' | 'bar';
+        groupBy?: string;
+    };
+    toggleOptions?: Array<{
+        label: string;
+        modifier: string;
+    }>;
+    builder?: {
+        table: string;
+        selectedColumns: string[];
+        selectExpressions?: string[];
+    };
+}
+export interface SchemaColumn {
+    name: string;
+    type: string;
+}
+export interface WidgetBuilderProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (widget: WidgetConfig) => void;
+    widget?: Partial<WidgetConfig>;
+    tables: string[];
+    fetchSchema: (tableName: string) => Promise<SchemaColumn[]>;
+    executeQuery?: (query: string) => Promise<{
+        result?: unknown[];
+        error?: string;
+    }>;
+    context?: {
+        query?: string;
+        result?: Record<string, unknown>[];
+    };
+    generateId?: () => string;
+}
+export declare const WidgetBuilder: React.FC<WidgetBuilderProps>;

package/dist/ui/dashboard/WidgetBuilder.js

@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { X, Play, Loader } from 'lucide-react';
+const defaultGenerateId = () => `widget_${Math.random().toString(36).substring(2, 11)}`;
+const WIDGET_TYPES = [
+    { value: 'table', label: 'Table' },
+    { value: 'chart', label: 'Chart' },
+    { value: 'stat', label: 'Single Stat' },
+    { value: 'stat_list', label: 'Stat List' },
+];
+const CHART_TYPES = [
+    { value: 'bar', label: 'Bar Chart' },
+    { value: 'line', label: 'Line Chart' },
+];
+/**
+ * Parses a SQL query to extract builder configuration
+ */
+const parseQueryForBuilder = (query) => {
+    if (!query) {
+        return { isComplex: false, builderConfig: {} };
+    }
+    // Check for complex query patterns
+    const complexityPattern = /\bJOIN\b|\bUNION\b|\bWITH\b/i;
+    const isComplex = complexityPattern.test(query);
+    if (isComplex) {
+        return { isComplex: true, builderConfig: {} };
+    }
+    // Extract table name
+    const fromMatch = query.match(/\bFROM\s+([a-zA-Z0-9_]+)/i);
+    if (!fromMatch) {
+        return { isComplex: true, builderConfig: {} };
+    }
+    const table = fromMatch[1];
+    // Extract SELECT expressions
+    const selectMatch = query.match(/\bSELECT\s+(.*?)(?=\bFROM)/is);
+    const selectExpressions = selectMatch
+        ? selectMatch[1].split(',').map(s => s.trim())
+        : ['*'];
+    // Extract columns from expressions
+    const extractedBaseColumns = new Set();
+    const keywordBlacklist = new Set([
+        'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'DISTINCT', 'FROM', 'WHERE',
+        'GROUP', 'ORDER', 'BY', 'LIMIT', 'CASE', 'WHEN', 'THEN', 'ELSE',
+        'END', 'AS', 'IN', 'LIKE', 'IS', 'BETWEEN', 'AND', 'OR', 'NOT',
+        'NULL', 'STRFTIME', 'LENGTH'
+    ]);
+    selectExpressions.forEach(expr => {
+        const columnCandidates = expr.matchAll(/\b([a-zA-Z0-9_]+)\b/g);
+        for (const match of columnCandidates) {
+            if (match[1] && !keywordBlacklist.has(match[1].toUpperCase())) {
+                extractedBaseColumns.add(match[1]);
+            }
+        }
+    });
+    return {
+        isComplex: false,
+        builderConfig: {
+            table,
+            selectedColumns: Array.from(extractedBaseColumns),
+            selectExpressions
+        }
+    };
+};
+export const WidgetBuilder = ({ isOpen, onClose, onSave, widget, tables, fetchSchema, executeQuery, context, generateId = defaultGenerateId }) => {
+    const isEditMode = Boolean(widget?.id);
+    const parsedData = widget?.query ? parseQueryForBuilder(widget.query) : { isComplex: false, builderConfig: {} };
+    // Mode state
+    const [mode, setMode] = useState(parsedData.isComplex ? 'advanced' : 'builder');
+    const isComplexQuery = parsedData.isComplex;
+    // Form state
+    const [title, setTitle] = useState(widget?.title || '');
+    const [type, setType] = useState(widget?.type || 'table');
+    const [query, setQuery] = useState(widget?.query || '');
+    const [selectedTable, setSelectedTable] = useState(parsedData.builderConfig.table || '');
+    const [selectedColumns, setSelectedColumns] = useState(parsedData.builderConfig.selectedColumns || []);
+    // Chart config
+    const [xCol, setXCol] = useState(widget?.chartConfig?.x || '');
+    const [yCol, setYCol] = useState(widget?.chartConfig?.y || '');
+    const [chartType, setChartType] = useState(widget?.chartConfig?.type || 'bar');
+    const [groupBy, setGroupBy] = useState(widget?.chartConfig?.groupBy || '');
+    // Toggle options for filtering
+    const [toggleOptions, setToggleOptions] = useState(widget?.toggleOptions || []);
+    // Schema/columns state
+    const [availableColumns, setAvailableColumns] = useState([]);
+    const [outputColumns, setOutputColumns] = useState([]);
+    // Testing state
+    const [testStatus, setTestStatus] = useState({ loading: false, error: null });
+    // Initialize from context if provided
+    useEffect(() => {
+        if (context?.result?.[0] && !isEditMode) {
+            const columns = Object.keys(context.result[0]);
+            setOutputColumns(columns.map(name => ({ name, type: 'RESULT_COL' })));
+            setXCol(columns[0] || '');
+            setYCol(columns.length > 1 ? columns[1] : '');
+            setQuery(context.query || '');
+            setType('chart');
+            setMode('advanced');
+        }
+    }, [context, isEditMode]);
+    // Load schema when table changes
+    useEffect(() => {
+        if (selectedTable && mode === 'builder') {
+            fetchSchema(selectedTable).then(schema => {
+                setAvailableColumns(schema || []);
+                if (!type.includes('chart')) {
+                    setOutputColumns(schema || []);
+                }
+            });
+        }
+    }, [selectedTable, fetchSchema, mode, type]);
+    // Auto-generate query in builder mode
+    useEffect(() => {
+        if (mode === 'builder' && selectedTable && !type.includes('chart')) {
+            const cols = selectedColumns.length > 0 ? selectedColumns.join(', ') : '*';
+            setQuery(`SELECT ${cols} FROM ${selectedTable}`);
+        }
+    }, [mode, selectedTable, selectedColumns, type]);
+    // Test query and get output columns
+    const testQuery = useCallback(async () => {
+        if (!executeQuery || !query)
+            return;
+        setTestStatus({ loading: true, error: null });
+        try {
+            const testQ = `${query.replace(/;$/, '')} LIMIT 1`;
+            const result = await executeQuery(testQ);
+            if (result.error) {
+                throw new Error(result.error);
+            }
+            if (result.result && Array.isArray(result.result) && result.result.length > 0) {
+                const cols = Object.keys(result.result[0]);
+                setOutputColumns(cols.map(name => ({ name, type: 'RESULT_COL' })));
+            }
+            setTestStatus({ loading: false, error: null });
+        }
+        catch (err) {
+            setTestStatus({ loading: false, error: err.message });
+        }
+    }, [executeQuery, query]);
+    const handleSave = () => {
+        let finalQuery = query;
+        // Build query in builder mode for charts
+        if (mode === 'builder' && type.includes('chart') && selectedTable) {
+            const selectParts = [];
+            if (xCol)
+                selectParts.push(xCol);
+            if (yCol) {
+                yCol.split(',').forEach(expr => {
+                    const trimmed = expr.trim();
+                    if (trimmed && !selectParts.includes(trimmed)) {
+                        selectParts.push(trimmed);
+                    }
+                });
+            }
+            if (selectParts.length > 0) {
+                finalQuery = `SELECT ${selectParts.join(', ')} FROM ${selectedTable}`;
+                if (groupBy) {
+                    finalQuery += ` GROUP BY ${groupBy}`;
+                }
+                else if (xCol && selectParts.length > 1) {
+                    const xBase = xCol.split(/\s+AS\s+/i)[0].trim();
+                    finalQuery += ` GROUP BY ${xBase}`;
+                }
+                if (xCol) {
+                    const xBase = xCol.split(/\s+AS\s+/i)[0].trim();
+                    finalQuery += ` ORDER BY ${xBase}`;
+                }
+            }
+        }
+        const widgetConfig = {
+            id: widget?.id || generateId(),
+            title: title || 'Custom Widget',
+            type,
+            query: finalQuery,
+            iconName: widget?.iconName || 'Settings2',
+            iconColor: widget?.iconColor || 'text-blue-400',
+            span: type.includes('chart') ? 2 : 1,
+            chartConfig: type.includes('chart') ? {
+                x: xCol,
+                y: yCol,
+                type: chartType,
+                groupBy: groupBy || undefined
+            } : undefined,
+            toggleOptions: toggleOptions.length > 0 ? toggleOptions : undefined,
+            builder: mode === 'builder' ? {
+                table: selectedTable,
+                selectedColumns
+            } : undefined
+        };
+        onSave(widgetConfig);
+        onClose();
+    };
+    const handleToggleChange = (index, field, value) => {
+        const newToggles = [...toggleOptions];
+        newToggles[index][field] = value;
+        setToggleOptions(newToggles);
+    };
+    const addToggle = () => {
+        setToggleOptions([...toggleOptions, { label: 'New', modifier: '' }]);
+    };
+    const removeToggle = (index) => {
+        setToggleOptions(toggleOptions.filter((_, i) => i !== index));
+    };
+    if (!isOpen)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 bg-black/70 flex items-center justify-center z-[60]" },
+        React.createElement("div", { className: "theme-bg-secondary p-6 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col" },
+            React.createElement("div", { className: "flex justify-between items-center mb-4 flex-shrink-0" },
+                React.createElement("h3", { className: "text-lg font-semibold" }, isEditMode ? 'Edit Widget' : 'Create Widget'),
+                React.createElement("button", { onClick: onClose, className: "p-1 rounded-full theme-hover" },
+                    React.createElement(X, { size: 20 }))),
+            React.createElement("div", { className: "flex border-b theme-border mb-4 flex-shrink-0" },
+                React.createElement("button", { onClick: () => !isComplexQuery && setMode('builder'), className: `px-4 py-2 text-sm ${mode === 'builder' ? 'border-b-2 border-blue-500' : 'theme-text-secondary'} ${isComplexQuery ? 'opacity-50 cursor-not-allowed' : ''}`, title: isComplexQuery ? "Cannot use builder for complex queries" : "" }, "Builder"),
+                React.createElement("button", { onClick: () => setMode('advanced'), className: `px-4 py-2 text-sm ${mode === 'advanced' ? 'border-b-2 border-blue-500' : 'theme-text-secondary'}` }, "Advanced SQL")),
+            React.createElement("div", { className: "flex-1 overflow-y-auto space-y-4 pr-2" },
+                React.createElement("div", { className: "p-3 border theme-border rounded-lg theme-bg-tertiary" },
+                    React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Title"),
+                    React.createElement("input", { type: "text", value: title, onChange: e => setTitle(e.target.value), className: "w-full theme-input mt-1", placeholder: "e.g., Daily Active Users" })),
+                React.createElement("div", { className: "p-3 border theme-border rounded-lg theme-bg-tertiary space-y-3" },
+                    React.createElement("h4", { className: "text-sm font-semibold theme-text-primary" }, "Data Source"),
+                    mode === 'builder' ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Table"),
+                            React.createElement("select", { value: selectedTable, onChange: e => {
+                                    setSelectedTable(e.target.value);
+                                    setSelectedColumns([]);
+                                }, className: "w-full theme-input mt-1" },
+                                React.createElement("option", { value: "" }, "Select a table..."),
+                                tables.map(t => (React.createElement("option", { key: t, value: t }, t))))),
+                        selectedTable && !type.includes('chart') && (React.createElement("div", null,
+                            React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Columns"),
+                            React.createElement("div", { className: "max-h-32 overflow-y-auto theme-bg-primary p-2 rounded mt-1" }, availableColumns.map(col => (React.createElement("div", { key: col.name, className: "flex items-center" },
+                                React.createElement("input", { type: "checkbox", id: `col-${col.name}`, checked: selectedColumns.includes(col.name), onChange: e => {
+                                        setSelectedColumns(prev => e.target.checked
+                                            ? [...prev, col.name]
+                                            : prev.filter(c => c !== col.name));
+                                    }, className: "w-4 h-4 theme-checkbox" }),
+                                React.createElement("label", { htmlFor: `col-${col.name}`, className: "ml-2 text-sm" },
+                                    col.name,
+                                    " ",
+                                    React.createElement("span", { className: "text-yellow-400" },
+                                        "(",
+                                        col.type,
+                                        ")")))))))))) : (React.createElement("div", null,
+                        React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "SQL Query"),
+                        React.createElement("textarea", { value: query, onChange: e => setQuery(e.target.value), rows: 6, className: "w-full theme-input mt-1 font-mono text-sm", placeholder: "SELECT * FROM table_name LIMIT 100" }),
+                        executeQuery && (React.createElement("button", { onClick: testQuery, className: "text-xs theme-button-subtle mt-2 flex items-center gap-1", disabled: testStatus.loading },
+                            testStatus.loading ? React.createElement(Loader, { size: 12, className: "animate-spin" }) : React.createElement(Play, { size: 12 }),
+                            testStatus.loading ? 'Testing...' : 'Test Query & Get Columns')),
+                        testStatus.error && (React.createElement("p", { className: "text-red-400 text-xs mt-1" }, testStatus.error))))),
+                React.createElement("div", { className: "p-3 border theme-border rounded-lg theme-bg-tertiary space-y-3" },
+                    React.createElement("h4", { className: "text-sm font-semibold theme-text-primary" }, "Visualization"),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Display As"),
+                        React.createElement("select", { value: type, onChange: e => setType(e.target.value), className: "w-full theme-input mt-1" }, WIDGET_TYPES.map(opt => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label))))),
+                    type.includes('chart') && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "grid grid-cols-2 gap-3" },
+                            React.createElement("div", null,
+                                React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "X-Axis"),
+                                React.createElement("textarea", { value: xCol, onChange: e => setXCol(e.target.value), className: "w-full theme-input mt-1 font-mono text-sm", rows: 2, placeholder: "e.g., strftime('%Y-%m-%d', timestamp) as date" }),
+                                outputColumns.length > 0 && (React.createElement("div", { className: "text-xs theme-text-secondary mt-1" },
+                                    "Available: ",
+                                    outputColumns.map(c => c.name).join(', ')))),
+                            React.createElement("div", null,
+                                React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Y-Axis (comma separated for multi-series)"),
+                                React.createElement("textarea", { value: yCol, onChange: e => setYCol(e.target.value), className: "w-full theme-input mt-1 font-mono text-sm", rows: 2, placeholder: "e.g., COUNT(*) as count" }))),
+                        React.createElement("div", { className: "grid grid-cols-2 gap-3" },
+                            React.createElement("div", null,
+                                React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "Chart Type"),
+                                React.createElement("select", { value: chartType, onChange: e => setChartType(e.target.value), className: "w-full theme-input mt-1" }, CHART_TYPES.map(opt => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label))))),
+                            React.createElement("div", null,
+                                React.createElement("label", { className: "text-xs font-semibold theme-text-secondary uppercase tracking-wider" }, "GROUP BY (optional)"),
+                                React.createElement("input", { type: "text", value: groupBy, onChange: e => setGroupBy(e.target.value), className: "w-full theme-input mt-1 font-mono text-sm", placeholder: "e.g., strftime('%Y-%m-%d', timestamp)" })))))),
+                React.createElement("div", { className: "p-3 border theme-border rounded-lg theme-bg-tertiary space-y-3" },
+                    React.createElement("div", { className: "flex justify-between items-center" },
+                        React.createElement("h4", { className: "text-sm font-semibold theme-text-primary" }, "Filter Toggles (optional)"),
+                        React.createElement("button", { onClick: addToggle, className: "text-xs theme-button-subtle" }, "+ Add Toggle")),
+                    toggleOptions.map((toggle, index) => (React.createElement("div", { key: index, className: "flex gap-2 items-start" },
+                        React.createElement("div", { className: "flex-1" },
+                            React.createElement("input", { type: "text", value: toggle.label, onChange: e => handleToggleChange(index, 'label', e.target.value), className: "w-full theme-input text-sm", placeholder: "Label (e.g., 7d)" })),
+                        React.createElement("div", { className: "flex-[2]" },
+                            React.createElement("input", { type: "text", value: toggle.modifier, onChange: e => handleToggleChange(index, 'modifier', e.target.value), className: "w-full theme-input text-sm font-mono", placeholder: "WHERE timestamp >= date('now', '-7 days')" })),
+                        React.createElement("button", { onClick: () => removeToggle(index), className: "p-1 text-red-400 hover:text-red-300" },
+                            React.createElement(X, { size: 16 }))))))),
+            React.createElement("div", { className: "flex justify-end gap-3 mt-6 pt-4 border-t theme-border flex-shrink-0" },
+                React.createElement("button", { onClick: onClose, className: "theme-button px-4 py-2 text-sm rounded" }, "Cancel"),
+                React.createElement("button", { onClick: handleSave, className: "theme-button-primary px-4 py-2 text-sm rounded" }, isEditMode ? 'Save Changes' : 'Create Widget')))));
+};

package/dist/ui/dashboard/WidgetGrid.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface WidgetGridProps {
+    children: React.ReactNode;
+    columns?: number | {
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    gap?: number;
+    className?: string;
+}
+export declare const WidgetGrid: React.FC<WidgetGridProps>;
+export interface WidgetSpanProps {
+    span?: number;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const WidgetSpan: React.FC<WidgetSpanProps>;

package/dist/ui/dashboard/WidgetGrid.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export const WidgetGrid = ({ children, columns = { sm: 1, md: 2, lg: 3, xl: 4 }, gap = 16, className = '' }) => {
+    const gridClass = typeof columns === 'number'
+        ? ''
+        : `grid-cols-${columns.sm || 1} md:grid-cols-${columns.md || 2} lg:grid-cols-${columns.lg || 3} xl:grid-cols-${columns.xl || 4}`;
+    const gridStyle = typeof columns === 'number'
+        ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, gap }
+        : { gap };
+    return (React.createElement("div", { className: `grid ${gridClass} ${className}`, style: gridStyle }, children));
+};
+export const WidgetSpan = ({ span = 1, children, className = '' }) => (React.createElement("div", { className: className, style: { gridColumn: `span ${span}` } }, children));

package/dist/ui/dashboard/index.d.ts

@@ -0,0 +1,8 @@
+export { Widget, StatValue, StatList, WidgetToggle } from './Widget';
+export type { WidgetProps, StatWidgetProps, StatListProps, WidgetToggleProps } from './Widget';
+export { WidgetGrid, WidgetSpan } from './WidgetGrid';
+export type { WidgetGridProps, WidgetSpanProps } from './WidgetGrid';
+export { QueryWidget } from './QueryWidget';
+export type { QueryWidgetConfig, QueryWidgetProps } from './QueryWidget';
+export { WidgetBuilder } from './WidgetBuilder';
+export type { WidgetBuilderProps, WidgetConfig, SchemaColumn } from './WidgetBuilder';

package/dist/ui/dashboard/index.js

@@ -0,0 +1,4 @@
+export { Widget, StatValue, StatList, WidgetToggle } from './Widget';
+export { WidgetGrid, WidgetSpan } from './WidgetGrid';
+export { QueryWidget } from './QueryWidget';
+export { WidgetBuilder } from './WidgetBuilder';

package/dist/ui/dialogs/BrowserUrlDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const BrowserUrlDialog: ({ isOpen, onClose, onNavigate, currentPath }: {
+    isOpen: any;
+    onClose: any;
+    onNavigate: any;
+    currentPath: any;
+}) => React.JSX.Element;
+export default BrowserUrlDialog;