npcts 0.1.0

package/dist/ui/photo/LayerPanel.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+export interface Layer {
+    id: string;
+    type: string;
+    name: string;
+    visible: boolean;
+    params: Record<string, any>;
+    transform?: {
+        x: number;
+        y: number;
+        rotation: number;
+        scaleX: number;
+        scaleY: number;
+    };
+    mask?: any;
+}
+export declare const LAYER_TYPES: {
+    readonly ADJUSTMENTS: {
+        readonly name: "Adjustments";
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly defaultParams: {
+            readonly exposure: 0;
+            readonly contrast: 0;
+            readonly highlights: 0;
+            readonly shadows: 0;
+            readonly whites: 0;
+            readonly blacks: 0;
+            readonly saturation: 0;
+            readonly warmth: 0;
+            readonly tint: 0;
+            readonly pop: 0;
+            readonly vignette: 0;
+        };
+    };
+    readonly TEXT: {
+        readonly name: "Text";
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly defaultParams: {
+            readonly content: "Hello World";
+            readonly font: "Arial";
+            readonly size: 50;
+            readonly color: "#FFFFFF";
+            readonly x: 100;
+            readonly y: 100;
+        };
+    };
+    readonly TRANSFORM: {
+        readonly name: "Transform";
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly defaultParams: {
+            readonly rotation: 0;
+            readonly scaleX: 1;
+            readonly scaleY: 1;
+        };
+    };
+    readonly GENERATIVE_FILL: {
+        readonly name: "Generative Fill";
+        readonly icon: import("lucide-react").LucideIcon;
+        readonly defaultParams: {
+            readonly prompt: "";
+        };
+    };
+};
+export type LayerType = keyof typeof LAYER_TYPES;
+interface LayerItemProps {
+    layer: Layer;
+    isSelected: boolean;
+    onSelect: () => void;
+    onToggleVisibility: () => void;
+    onDelete: () => void;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: () => void;
+    onDragOver?: (e: React.DragEvent) => void;
+    onDrop?: (e: React.DragEvent) => void;
+}
+export declare const LayerItem: React.FC<LayerItemProps>;
+interface LayerPanelProps {
+    layers: Layer[];
+    selectedLayerId: string | null;
+    onSelectLayer: (id: string) => void;
+    onToggleVisibility: (id: string) => void;
+    onDeleteLayer: (id: string) => void;
+    onAddLayer: (type: LayerType) => void;
+    onReorderLayers?: (fromIndex: number, toIndex: number) => void;
+}
+export declare const LayerPanel: React.FC<LayerPanelProps>;
+export default LayerPanel;

package/dist/ui/photo/LayerPanel.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Eye, EyeOff, GripVertical, Trash2, Layers, Sliders, Type, RotateCw, Sparkles } from 'lucide-react';
+export const LAYER_TYPES = {
+    ADJUSTMENTS: {
+        name: 'Adjustments',
+        icon: Sliders,
+        defaultParams: { exposure: 0, contrast: 0, highlights: 0, shadows: 0, whites: 0, blacks: 0, saturation: 0, warmth: 0, tint: 0, pop: 0, vignette: 0 }
+    },
+    TEXT: {
+        name: 'Text',
+        icon: Type,
+        defaultParams: { content: 'Hello World', font: 'Arial', size: 50, color: '#FFFFFF', x: 100, y: 100 }
+    },
+    TRANSFORM: {
+        name: 'Transform',
+        icon: RotateCw,
+        defaultParams: { rotation: 0, scaleX: 1, scaleY: 1 }
+    },
+    GENERATIVE_FILL: {
+        name: 'Generative Fill',
+        icon: Sparkles,
+        defaultParams: { prompt: '' }
+    },
+};
+export const LayerItem = ({ layer, isSelected, onSelect, onToggleVisibility, onDelete, onDragStart, onDragEnd, onDragOver, onDrop }) => {
+    const layerConfig = LAYER_TYPES[layer.type];
+    const IconComponent = layerConfig?.icon || Layers;
+    return (React.createElement("div", { className: `flex items-center gap-2 p-2 rounded cursor-pointer transition-colors
+                ${isSelected ? 'bg-blue-600/30 border border-blue-500/50' : 'hover:bg-gray-700/50'}`, onClick: onSelect, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDrop: onDrop },
+        React.createElement(GripVertical, { size: 14, className: "text-gray-500 cursor-grab" }),
+        React.createElement("button", { onClick: (e) => { e.stopPropagation(); onToggleVisibility(); }, className: "p-1 hover:bg-gray-600 rounded" }, layer.visible ? (React.createElement(Eye, { size: 14, className: "text-gray-300" })) : (React.createElement(EyeOff, { size: 14, className: "text-gray-500" }))),
+        React.createElement(IconComponent, { size: 14, className: "text-gray-400" }),
+        React.createElement("span", { className: `flex-1 text-sm truncate ${layer.visible ? 'text-gray-200' : 'text-gray-500'}` }, layer.name),
+        React.createElement("button", { onClick: (e) => { e.stopPropagation(); onDelete(); }, className: "p-1 hover:bg-red-600/30 rounded opacity-0 group-hover:opacity-100 transition-opacity" },
+            React.createElement(Trash2, { size: 12, className: "text-gray-400 hover:text-red-400" }))));
+};
+export const LayerPanel = ({ layers, selectedLayerId, onSelectLayer, onToggleVisibility, onDeleteLayer, onAddLayer, onReorderLayers }) => {
+    const [draggedIndex, setDraggedIndex] = React.useState(null);
+    const handleDragStart = (index) => (e) => {
+        setDraggedIndex(index);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragOver = (index) => (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    };
+    const handleDrop = (targetIndex) => (e) => {
+        e.preventDefault();
+        if (draggedIndex !== null && draggedIndex !== targetIndex && onReorderLayers) {
+            onReorderLayers(draggedIndex, targetIndex);
+        }
+        setDraggedIndex(null);
+    };
+    return (React.createElement("div", { className: "flex flex-col h-full" },
+        React.createElement("div", { className: "flex items-center justify-between p-2 border-b border-gray-700" },
+            React.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" },
+                React.createElement(Layers, { size: 14 }),
+                React.createElement("span", null, "Layers")),
+            React.createElement("div", { className: "flex gap-1" }, Object.keys(LAYER_TYPES).map((type) => {
+                const config = LAYER_TYPES[type];
+                const Icon = config.icon;
+                return (React.createElement("button", { key: type, onClick: () => onAddLayer(type), className: "p-1.5 hover:bg-gray-700 rounded", title: `Add ${config.name} Layer` },
+                    React.createElement(Icon, { size: 14 })));
+            }))),
+        React.createElement("div", { className: "flex-1 overflow-y-auto p-2 space-y-1" }, layers.length === 0 ? (React.createElement("div", { className: "text-center text-gray-500 text-sm py-4" }, "No layers. Click + to add one.")) : ([...layers].reverse().map((layer, reversedIndex) => {
+            const actualIndex = layers.length - 1 - reversedIndex;
+            return (React.createElement(LayerItem, { key: layer.id, layer: layer, isSelected: layer.id === selectedLayerId, onSelect: () => onSelectLayer(layer.id), onToggleVisibility: () => onToggleVisibility(layer.id), onDelete: () => onDeleteLayer(layer.id), onDragStart: handleDragStart(actualIndex), onDragEnd: () => setDraggedIndex(null), onDragOver: handleDragOver(actualIndex), onDrop: handleDrop(actualIndex) }));
+        })))));
+};
+export default LayerPanel;

package/dist/ui/photo/Lightbox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface LightboxProps {
+    images: string[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+    onDownload?: (path: string) => void;
+    renderImage?: (path: string) => React.ReactNode;
+}
+export declare const Lightbox: React.FC<LightboxProps>;
+export default Lightbox;

package/dist/ui/photo/Lightbox.js

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect } from 'react';
+import { X, ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Download, RotateCw } from 'lucide-react';
+export const Lightbox = ({ images, currentIndex, isOpen, onClose, onNavigate, onDownload, renderImage }) => {
+    const [zoom, setZoom] = React.useState(1);
+    const [rotation, setRotation] = React.useState(0);
+    const currentImage = images[currentIndex];
+    const hasNext = currentIndex < images.length - 1;
+    const hasPrev = currentIndex > 0;
+    const handlePrev = useCallback(() => {
+        if (hasPrev) {
+            onNavigate(currentIndex - 1);
+            setZoom(1);
+            setRotation(0);
+        }
+    }, [currentIndex, hasPrev, onNavigate]);
+    const handleNext = useCallback(() => {
+        if (hasNext) {
+            onNavigate(currentIndex + 1);
+            setZoom(1);
+            setRotation(0);
+        }
+    }, [currentIndex, hasNext, onNavigate]);
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'Escape':
+                onClose();
+                break;
+            case 'ArrowLeft':
+                handlePrev();
+                break;
+            case 'ArrowRight':
+                handleNext();
+                break;
+            case '+':
+            case '=':
+                setZoom(z => Math.min(5, z + 0.25));
+                break;
+            case '-':
+                setZoom(z => Math.max(0.25, z - 0.25));
+                break;
+            case 'r':
+                setRotation(r => (r + 90) % 360);
+                break;
+        }
+    }, [onClose, handlePrev, handleNext]);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [isOpen, handleKeyDown]);
+    // Reset zoom/rotation when image changes
+    useEffect(() => {
+        setZoom(1);
+        setRotation(0);
+    }, [currentIndex]);
+    if (!isOpen || !currentImage)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 z-[100] bg-black/95 flex flex-col" },
+        React.createElement("div", { className: "flex items-center justify-between p-4 bg-black/50" },
+            React.createElement("div", { className: "text-sm text-gray-400" },
+                currentIndex + 1,
+                " / ",
+                images.length),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("button", { onClick: () => setZoom(z => Math.max(0.25, z - 0.25)), className: "p-2 hover:bg-gray-800 rounded", title: "Zoom out" },
+                    React.createElement(ZoomOut, { size: 18 })),
+                React.createElement("span", { className: "text-sm text-gray-400 w-12 text-center" },
+                    Math.round(zoom * 100),
+                    "%"),
+                React.createElement("button", { onClick: () => setZoom(z => Math.min(5, z + 0.25)), className: "p-2 hover:bg-gray-800 rounded", title: "Zoom in" },
+                    React.createElement(ZoomIn, { size: 18 })),
+                React.createElement("button", { onClick: () => setRotation(r => (r + 90) % 360), className: "p-2 hover:bg-gray-800 rounded", title: "Rotate" },
+                    React.createElement(RotateCw, { size: 18 })),
+                onDownload && (React.createElement("button", { onClick: () => onDownload(currentImage), className: "p-2 hover:bg-gray-800 rounded", title: "Download" },
+                    React.createElement(Download, { size: 18 }))),
+                React.createElement("button", { onClick: onClose, className: "p-2 hover:bg-gray-800 rounded ml-4", title: "Close (Esc)" },
+                    React.createElement(X, { size: 20 })))),
+        React.createElement("div", { className: "flex-1 flex items-center justify-center overflow-hidden relative" },
+            hasPrev && (React.createElement("button", { onClick: handlePrev, className: "absolute left-4 p-3 bg-black/50 hover:bg-black/70 rounded-full transition-colors z-10" },
+                React.createElement(ChevronLeft, { size: 24 }))),
+            React.createElement("div", { className: "max-w-full max-h-full overflow-auto flex items-center justify-center", style: { cursor: zoom > 1 ? 'grab' : 'default' } }, renderImage ? renderImage(currentImage) : (React.createElement("img", { src: currentImage, alt: currentImage.split('/').pop() || 'Image', className: "max-w-full max-h-full object-contain transition-transform duration-200", style: {
+                    transform: `scale(${zoom}) rotate(${rotation}deg)`
+                }, draggable: false }))),
+            hasNext && (React.createElement("button", { onClick: handleNext, className: "absolute right-4 p-3 bg-black/50 hover:bg-black/70 rounded-full transition-colors z-10" },
+                React.createElement(ChevronRight, { size: 24 })))),
+        React.createElement("div", { className: "p-4 bg-black/50 text-center" },
+            React.createElement("span", { className: "text-sm text-gray-400" }, currentImage.split('/').pop()))));
+};
+export default Lightbox;

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

@@ -0,0 +1,6 @@
+export { ImageAdjustmentSliders, AdjustmentSlider, calculateFilterStyle, defaultAdjustments, type ImageAdjustments } from './ImageAdjustmentSliders';
+export { LayerPanel, LayerItem, LAYER_TYPES, type Layer, type LayerType } from './LayerPanel';
+export { GalleryGrid, ViewModeToggle, type GalleryImage } from './GalleryGrid';
+export { Lightbox } from './Lightbox';
+export { ImageLabelingCanvas, LabelingToolbar, LabelList, type ImageLabel, type LabelCoords, type LabelingTool } from './ImageLabelingCanvas';
+export { ImageSourceTabs, PathEditor, type ImageSource } from './ImageSourceTabs';

package/dist/ui/photo/index.js

@@ -0,0 +1,7 @@
+// Photo editing and gallery components
+export { ImageAdjustmentSliders, AdjustmentSlider, calculateFilterStyle, defaultAdjustments } from './ImageAdjustmentSliders';
+export { LayerPanel, LayerItem, LAYER_TYPES } from './LayerPanel';
+export { GalleryGrid, ViewModeToggle } from './GalleryGrid';
+export { Lightbox } from './Lightbox';
+export { ImageLabelingCanvas, LabelingToolbar, LabelList } from './ImageLabelingCanvas';
+export { ImageSourceTabs, PathEditor } from './ImageSourceTabs';

package/dist/ui/primitives/AutosizeTextarea.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AutosizeTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    value: string;
+    minRows?: number;
+    maxRows?: number;
+}
+export declare const AutosizeTextarea: React.FC<AutosizeTextareaProps>;
+export default AutosizeTextarea;

package/dist/ui/primitives/AutosizeTextarea.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useRef } from 'react';
+export const AutosizeTextarea = ({ value, minRows = 1, maxRows = 10, ...props }) => {
+    const textareaRef = useRef(null);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = 'auto';
+        const scrollHeight = textarea.scrollHeight;
+        const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
+        const minHeight = lineHeight * minRows;
+        const maxHeight = lineHeight * maxRows;
+        textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
+    }, [value, minRows, maxRows]);
+    return React.createElement("textarea", { ref: textareaRef, value: value, ...props });
+};
+export default AutosizeTextarea;

package/dist/ui/primitives/Button.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md" | "lg";
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/ui/primitives/Button.js

@@ -0,0 +1,17 @@
+import React from "react";
+export const Button = ({ variant = "secondary", size = "md", className = "", children, ...props }) => {
+    const baseStyles = "rounded font-medium transition-all disabled:opacity-50";
+    const variantStyles = {
+        primary: "bg-blue-600 hover:bg-blue-700 text-white",
+        secondary: "bg-gray-700 hover:bg-gray-600 text-gray-100",
+        danger: "bg-red-600 hover:bg-red-700 text-white",
+        ghost: "hover:bg-gray-700 text-gray-300",
+    };
+    const sizeStyles = {
+        sm: "px-2 py-1 text-xs",
+        md: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base",
+    };
+    return (React.createElement("button", { className: `${baseStyles} ${variantStyles[variant]} 
+        ${sizeStyles[size]} ${className}`, ...props }, children));
+};

package/dist/ui/primitives/Card.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+interface CardProps {
+    title?: string;
+    icon?: LucideIcon;
+    iconColor?: string;
+    children: React.ReactNode;
+    className?: string;
+    onContextMenu?: (e: React.MouseEvent) => void;
+}
+export declare const Card: React.FC<CardProps>;
+export {};

package/dist/ui/primitives/Card.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const Card = ({ title, icon: Icon, iconColor = 'text-gray-400', children, className = '', onContextMenu }) => {
+    return (React.createElement("div", { className: `theme-bg-tertiary p-4 rounded-lg flex flex-col h-full relative ${className}`, onContextMenu: onContextMenu },
+        (title || Icon) && (React.createElement("div", { className: "flex items-center gap-3 mb-2 flex-shrink-0" },
+            Icon && React.createElement(Icon, { className: iconColor, size: 18 }),
+            title && (React.createElement("h4", { className: "font-semibold theme-text-secondary truncate" }, title)))),
+        React.createElement("div", { className: "flex-1 overflow-hidden" }, children)));
+};

package/dist/ui/primitives/Chart.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface ChartDataset {
+    label: string;
+    data: number[];
+    color?: string;
+}
+export interface ChartProps {
+    type: 'line' | 'bar';
+    labels: (string | Date)[];
+    datasets: ChartDataset[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    fillArea?: boolean;
+    timeUnit?: 'day' | 'week' | 'month' | 'year';
+}
+export declare const Chart: React.FC<ChartProps>;
+export interface QueryChartConfig {
+    x: string;
+    y: string;
+    type?: 'line' | 'bar';
+    groupBy?: string;
+}
+export interface QueryChartProps {
+    data: Record<string, unknown>[];
+    config: QueryChartConfig;
+    height?: number;
+    showLegend?: boolean;
+}
+/**
+ * QueryChart - renders a chart from SQL query results
+ * Automatically detects column names from AS aliases in config
+ */
+export declare const QueryChart: React.FC<QueryChartProps>;

package/dist/ui/primitives/Chart.js

@@ -0,0 +1,140 @@
+import React, { useMemo } from 'react';
+import { Line, Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler, TimeScale, TimeSeriesScale } from 'chart.js';
+// Register chart.js scales and components
+// Note: The consuming app should import 'chartjs-adapter-date-fns' for time scale support
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler, TimeScale, TimeSeriesScale);
+const defaultColors = [
+    '#8b5cf6', // purple
+    '#3b82f6', // blue
+    '#facc15', // yellow
+    '#ef4444', // red
+    '#22c55e', // green
+];
+/**
+ * Detects if labels appear to be date/time values
+ */
+const detectTimeSeries = (labels) => {
+    if (labels.length === 0)
+        return false;
+    const first = labels[0];
+    if (first instanceof Date)
+        return !isNaN(first.getTime());
+    if (typeof first === 'string') {
+        // Check for date-like patterns
+        return first.includes('-') || first.includes(':');
+    }
+    return false;
+};
+/**
+ * Converts string labels to Date objects if they look like dates
+ */
+const normalizeLabels = (labels) => {
+    return labels.map(label => {
+        if (label instanceof Date)
+            return label;
+        if (typeof label === 'string' && (label.includes('-') || label.includes(':'))) {
+            const date = new Date(label);
+            if (!isNaN(date.getTime()))
+                return date;
+        }
+        return label;
+    });
+};
+export const Chart = ({ type, labels: rawLabels, datasets, height = 300, showLegend = true, showGrid = true, fillArea, timeUnit = 'day' }) => {
+    const labels = useMemo(() => normalizeLabels(rawLabels), [rawLabels]);
+    const isTimeSeries = useMemo(() => detectTimeSeries(labels), [labels]);
+    const shouldFill = fillArea ?? (type === 'line');
+    const data = useMemo(() => ({
+        labels,
+        datasets: datasets.map((ds, i) => ({
+            label: ds.label,
+            data: ds.data,
+            backgroundColor: type === 'bar'
+                ? (ds.color || defaultColors[i % defaultColors.length])
+                : `${ds.color || defaultColors[i % defaultColors.length]}33`,
+            borderColor: ds.color || defaultColors[i % defaultColors.length],
+            borderWidth: type === 'line' ? 2 : 1,
+            fill: shouldFill,
+            tension: 0.3,
+        }))
+    }), [labels, datasets, type, shouldFill]);
+    const options = useMemo(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: showLegend && datasets.length > 1,
+                position: 'top',
+                labels: { color: '#9ca3af' }
+            },
+            tooltip: {
+                mode: 'index',
+                intersect: false
+            }
+        },
+        scales: {
+            x: isTimeSeries ? {
+                type: 'time',
+                time: {
+                    unit: timeUnit,
+                    tooltipFormat: 'MMM dd, yyyy'
+                },
+                ticks: { color: '#9ca3af' },
+                grid: { display: showGrid, color: '#374151' }
+            } : {
+                type: 'category',
+                ticks: { color: '#9ca3af' },
+                grid: { display: showGrid, color: '#374151' }
+            },
+            y: {
+                ticks: { color: '#9ca3af' },
+                grid: { display: showGrid, color: '#374151' }
+            }
+        }
+    }), [showLegend, showGrid, isTimeSeries, timeUnit, datasets.length]);
+    const Component = type === 'line' ? Line : Bar;
+    return React.createElement("div", { style: { height }, className: "w-full" },
+        React.createElement(Component, { data: data, options: options }));
+};
+/**
+ * QueryChart - renders a chart from SQL query results
+ * Automatically detects column names from AS aliases in config
+ */
+export const QueryChart = ({ data, config, height = 300, showLegend = true }) => {
+    const { chartType, labels, datasets } = useMemo(() => {
+        if (!data || data.length === 0 || !config) {
+            return { chartType: 'bar', labels: [], datasets: [] };
+        }
+        const dataKeys = Object.keys(data[0]);
+        const chartType = config.type || 'bar';
+        // Find x-axis key - check for AS alias first, then exact match
+        const xAxisKey = dataKeys.find(key => key.toLowerCase() === config.x.toLowerCase().split(' as ')[1]?.trim()) || dataKeys.find(key => key.toLowerCase() === config.x.toLowerCase()) || dataKeys[0];
+        // Parse y-axis expressions (comma-separated for multi-series)
+        const yAxisExpressions = config.y
+            ? config.y.split(',').map(s => s.trim())
+            : [];
+        // Build datasets
+        const datasets = yAxisExpressions.map((yExpr, index) => {
+            const yAxisKey = dataKeys.find(key => key.toLowerCase() === yExpr.toLowerCase().split(' as ')[1]?.trim()) || dataKeys.find(key => key.toLowerCase() === yExpr.toLowerCase());
+            return {
+                label: yAxisKey || yExpr,
+                data: data.map(d => parseFloat(String(d[yAxisKey || ''])) || 0),
+                color: defaultColors[index % defaultColors.length]
+            };
+        });
+        // Build labels (x-axis values)
+        const labels = data.map(d => {
+            const xValue = d[xAxisKey];
+            if (typeof xValue === 'string' && (xValue.includes('-') || xValue.includes(':'))) {
+                return new Date(xValue);
+            }
+            return String(xValue);
+        });
+        return { chartType, labels, datasets };
+    }, [data, config]);
+    if (datasets.length === 0) {
+        return React.createElement("div", { className: "theme-text-secondary text-sm" }, "Not enough data or chart is misconfigured.");
+    }
+    return (React.createElement(Chart, { type: chartType, labels: labels, datasets: datasets, height: height, showLegend: showLegend }));
+};

package/dist/ui/primitives/ContextMenu.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ContextMenuProps {
+    x: number;
+    y: number;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare const ContextMenu: React.FC<ContextMenuProps>;
+interface ContextMenuItemProps {
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const ContextMenuItem: React.FC<ContextMenuItemProps>;
+export declare const ContextMenuSeparator: React.FC;
+export {};

package/dist/ui/primitives/ContextMenu.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from "react";
+export const ContextMenu = ({ x, y, onClose, children, }) => {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [onClose]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "fixed inset-0 z-40", onClick: onClose }),
+        React.createElement("div", { ref: menuRef, className: "fixed theme-bg-secondary theme-border border rounded \n          shadow-lg py-1 z-50 min-w-[160px]", style: { top: `${y}px`, left: `${x}px` } }, children)));
+};
+export const ContextMenuItem = ({ onClick, disabled = false, icon, children, }) => {
+    return (React.createElement("button", { onClick: onClick, disabled: disabled, className: "flex items-center gap-2 px-4 py-2 theme-hover w-full \n        text-left theme-text-primary text-sm disabled:opacity-50 \n        disabled:cursor-not-allowed" },
+        icon && React.createElement("span", { className: "flex-shrink-0" }, icon),
+        React.createElement("span", null, children)));
+};
+export const ContextMenuSeparator = () => {
+    return React.createElement("div", { className: "border-t theme-border my-1" });
+};

package/dist/ui/primitives/DataTable.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface DataTableProps<T = any> {
+    data: T[];
+    columns: Array<{
+        key: string;
+        header: string;
+        render?: (value: any, row: T, index: number) => React.ReactNode;
+    }>;
+    className?: string;
+    maxHeight?: string;
+}
+export declare const DataTable: <T extends Record<string, any>>({ data, columns, className, maxHeight }: DataTableProps<T>) => React.JSX.Element;
+export {};

package/dist/ui/primitives/DataTable.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const DataTable = ({ data, columns, className = '', maxHeight = '400px' }) => {
+    if (!data || data.length === 0) {
+        return (React.createElement("div", { className: "text-center theme-text-muted text-sm p-4" }, "No data available"));
+    }
+    return (React.createElement("div", { className: `overflow-auto theme-border border rounded-lg ${className}`, style: { maxHeight } },
+        React.createElement("table", { className: "w-full text-sm text-left" },
+            React.createElement("thead", { className: "theme-bg-tertiary sticky top-0" },
+                React.createElement("tr", null, columns.map((col) => (React.createElement("th", { key: col.key, className: "p-2 font-semibold" }, col.header))))),
+            React.createElement("tbody", { className: "theme-bg-primary divide-y theme-divide" }, data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, columns.map((col) => (React.createElement("td", { key: col.key, className: "p-2 font-mono truncate max-w-xs" }, col.render
+                ? col.render(row[col.key], row, rowIndex)
+                : String(row[col.key] ?? '')))))))))));
+};

package/dist/ui/primitives/FileUpload.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface FileUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    onFilesSelected: (files: File[]) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const FileUpload: React.FC<FileUploadProps>;
+export {};

package/dist/ui/primitives/FileUpload.js

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import { Upload } from 'lucide-react';
+import { Button } from './Button';
+export const FileUpload = ({ accept = '*', multiple = false, onFilesSelected, children, className = '' }) => {
+    const inputRef = useRef(null);
+    const handleClick = () => {
+        inputRef.current?.click();
+    };
+    const handleChange = (e) => {
+        const files = Array.from(e.target.files || []);
+        if (files.length > 0) {
+            onFilesSelected(files);
+        }
+        // Reset input
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, className: "hidden", onChange: handleChange }),
+        React.createElement(Button, { onClick: handleClick, className: className }, children || (React.createElement(React.Fragment, null,
+            React.createElement(Upload, { size: 16 }),
+            " Upload Files")))));
+};