npcts 0.1.0

package/dist/ui/dialogs/BrowserUrlDialog.js

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { Globe, Bookmark, History, Star, Trash, X, ExternalLink } from 'lucide-react';
+const BrowserUrlDialog = ({ isOpen, onClose, onNavigate, currentPath }) => {
+    const [activeTab, setActiveTab] = useState('url');
+    const [urlInput, setUrlInput] = useState('');
+    const [bookmarks, setBookmarks] = useState([]);
+    const [history, setHistory] = useState([]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            loadBookmarksAndHistory();
+            setUrlInput('');
+        }
+    }, [isOpen, currentPath]);
+    const loadBookmarksAndHistory = async () => {
+        setLoading(true);
+        try {
+            const [bookmarkRes, historyRes] = await Promise.all([
+                window.api.browserGetBookmarks({ folderPath: currentPath }),
+                window.api.browserGetHistory({ folderPath: currentPath, limit: 20 })
+            ]);
+            if (bookmarkRes.success)
+                setBookmarks(bookmarkRes.bookmarks);
+            if (historyRes.success)
+                setHistory(historyRes.history);
+        }
+        catch (error) {
+            console.error('Error loading bookmarks/history:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleUrlSubmit = (e) => {
+        e.preventDefault();
+        if (urlInput.trim()) {
+            const finalUrl = urlInput.startsWith('http') ? urlInput : `https://${urlInput}`;
+            onNavigate(finalUrl);
+            onClose();
+        }
+    };
+    const handleItemSelect = (url) => {
+        onNavigate(url);
+        onClose();
+    };
+    const handleAddBookmark = async () => {
+        if (!urlInput.trim())
+            return;
+        try {
+            const finalUrl = urlInput.startsWith('http') ? urlInput : `https://${urlInput}`;
+            const title = finalUrl.replace(/^https?:\/\//, '').split('/')[0];
+            const result = await window.api.browserAddBookmark({
+                url: finalUrl,
+                title,
+                folderPath: currentPath,
+                isGlobal: false
+            });
+            if (result.success) {
+                await loadBookmarksAndHistory();
+                setActiveTab('bookmarks');
+            }
+        }
+        catch (error) {
+            console.error('Error adding bookmark:', error);
+        }
+    };
+    const handleDeleteBookmark = async (bookmarkId, e) => {
+        e.stopPropagation();
+        try {
+            const result = await window.api.browserDeleteBookmark({ bookmarkId });
+            if (result.success) {
+                await loadBookmarksAndHistory();
+            }
+        }
+        catch (error) {
+            console.error('Error deleting bookmark:', error);
+        }
+    };
+    const handleMakeGlobal = async (bookmark, e) => {
+        e.stopPropagation();
+        try {
+            await window.api.browserDeleteBookmark({ bookmarkId: bookmark.id });
+            await window.api.browserAddBookmark({
+                url: bookmark.url,
+                title: bookmark.title,
+                folderPath: currentPath,
+                isGlobal: true
+            });
+            await loadBookmarksAndHistory();
+        }
+        catch (error) {
+            console.error('Error making bookmark global:', error);
+        }
+    };
+    const clearHistory = async () => {
+        try {
+            const result = await window.api.browserClearHistory({ folderPath: currentPath });
+            if (result.success) {
+                setHistory([]);
+            }
+        }
+        catch (error) {
+            console.error('Error clearing history:', error);
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" },
+        React.createElement("div", { className: "theme-bg-secondary p-6 theme-border border rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col" },
+            React.createElement("div", { className: "flex items-center justify-between mb-4" },
+                React.createElement("h3", { className: "text-lg font-medium theme-text-primary flex items-center gap-2" },
+                    React.createElement(Globe, { size: 20 }),
+                    "Open Website"),
+                React.createElement("button", { onClick: onClose, className: "p-1 theme-hover rounded-full transition-colors" },
+                    React.createElement(X, { size: 16 }))),
+            React.createElement("div", { className: "flex border-b theme-border mb-4 -mx-2" },
+                React.createElement("button", { onClick: () => setActiveTab('url'), className: `px-4 py-2 text-sm border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'url'
+                        ? 'border-blue-500 theme-text-primary bg-blue-500/10'
+                        : 'border-transparent theme-text-muted hover:theme-text-primary hover:bg-gray-700/30'}` },
+                    React.createElement(ExternalLink, { size: 14 }),
+                    "Enter URL"),
+                React.createElement("button", { onClick: () => setActiveTab('bookmarks'), className: `px-4 py-2 text-sm border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'bookmarks'
+                        ? 'border-blue-500 theme-text-primary bg-blue-500/10'
+                        : 'border-transparent theme-text-muted hover:theme-text-primary hover:bg-gray-700/30'}` },
+                    React.createElement(Bookmark, { size: 14 }),
+                    "Bookmarks (",
+                    bookmarks.length,
+                    ")"),
+                React.createElement("button", { onClick: () => setActiveTab('history'), className: `px-4 py-2 text-sm border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'history'
+                        ? 'border-blue-500 theme-text-primary bg-blue-500/10'
+                        : 'border-transparent theme-text-muted hover:theme-text-primary hover:bg-gray-700/30'}` },
+                    React.createElement(History, { size: 14 }),
+                    "History (",
+                    history.length,
+                    ")")),
+            React.createElement("div", { className: "flex-1 overflow-y-auto min-h-0" },
+                activeTab === 'url' && (React.createElement("div", { className: "space-y-4" },
+                    React.createElement("form", { onSubmit: handleUrlSubmit, className: "space-y-3" },
+                        React.createElement("div", { className: "flex gap-2" },
+                            React.createElement("input", { type: "text", value: urlInput, onChange: (e) => setUrlInput(e.target.value), placeholder: "Enter URL (e.g., google.com or https://example.com)", className: "flex-1 theme-input text-sm rounded px-3 py-2 border focus:outline-none focus:ring-2 focus:ring-blue-500", autoFocus: true }),
+                            React.createElement("button", { type: "button", onClick: handleAddBookmark, disabled: !urlInput.trim(), className: "px-3 py-2 theme-button theme-hover rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1" },
+                                React.createElement(Star, { size: 14 }))),
+                        React.createElement("button", { type: "submit", disabled: !urlInput.trim(), className: "w-full px-4 py-2 theme-button-primary rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed" }, "Open Website")),
+                    React.createElement("div", { className: "text-xs theme-text-muted space-y-1 theme-bg-tertiary p-3 rounded" },
+                        React.createElement("p", null,
+                            React.createElement("strong", null, "Tips:")),
+                        React.createElement("p", null,
+                            "\u2022 Enter just the domain: ",
+                            React.createElement("code", null, "google.com")),
+                        React.createElement("p", null,
+                            "\u2022 Or full URL: ",
+                            React.createElement("code", null, "https://example.com/page")),
+                        React.createElement("p", null, "\u2022 Use the star button to save as a bookmark")))),
+                activeTab === 'bookmarks' && (React.createElement("div", { className: "space-y-2" }, loading ? (React.createElement("div", { className: "text-center py-8 theme-text-muted" },
+                    React.createElement("div", { className: "w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
+                    "Loading bookmarks...")) : bookmarks.length === 0 ? (React.createElement("div", { className: "text-center py-8 theme-text-muted" },
+                    React.createElement(Bookmark, { size: 32, className: "mx-auto mb-2 opacity-50" }),
+                    React.createElement("p", null, "No bookmarks yet"),
+                    React.createElement("p", { className: "text-xs mt-1" }, "Add URLs from the \"Enter URL\" tab"))) : (bookmarks.map((bookmark) => (React.createElement("div", { key: bookmark.id, className: "flex items-center gap-3 p-3 theme-hover rounded cursor-pointer group transition-colors", onClick: () => handleItemSelect(bookmark.url) },
+                    React.createElement("div", { className: "flex-shrink-0" }, bookmark.is_global ? (React.createElement(Globe, { size: 16, className: "text-blue-400" })) : (React.createElement(Bookmark, { size: 16, className: "text-yellow-400" }))),
+                    React.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("div", { className: "font-medium theme-text-primary truncate" }, bookmark.title),
+                        React.createElement("div", { className: "text-sm theme-text-muted truncate" }, bookmark.url),
+                        React.createElement("div", { className: "text-xs theme-text-muted" },
+                            bookmark.is_global ? 'Global' : 'Local',
+                            " \u2022 ",
+                            new Date(bookmark.timestamp).toLocaleDateString())),
+                    React.createElement("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" },
+                        !bookmark.is_global && (React.createElement("button", { onClick: (e) => handleMakeGlobal(bookmark, e), className: "p-1 theme-hover rounded text-blue-400" },
+                            React.createElement(Globe, { size: 12 }))),
+                        React.createElement("button", { onClick: (e) => handleDeleteBookmark(bookmark.id, e), className: "p-1 theme-hover rounded text-red-400" },
+                            React.createElement(Trash, { size: 12 }))))))))),
+                activeTab === 'history' && (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", { className: "flex justify-between items-center mb-3" },
+                        React.createElement("span", { className: "text-sm theme-text-muted" }, "Recent visits in this folder"),
+                        history.length > 0 && (React.createElement("button", { onClick: clearHistory, className: "px-2 py-1 text-xs theme-button theme-hover rounded text-red-400" }, "Clear History"))),
+                    loading ? (React.createElement("div", { className: "text-center py-8 theme-text-muted" },
+                        React.createElement("div", { className: "w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
+                        "Loading history...")) : history.length === 0 ? (React.createElement("div", { className: "text-center py-8 theme-text-muted" },
+                        React.createElement(History, { size: 32, className: "mx-auto mb-2 opacity-50" }),
+                        React.createElement("p", null, "No browsing history"),
+                        React.createElement("p", { className: "text-xs mt-1" }, "Visited websites will appear here"))) : (history.map((item) => (React.createElement("div", { key: item.id, className: "flex items-center gap-3 p-3 theme-hover rounded cursor-pointer group transition-colors", onClick: () => handleItemSelect(item.url) },
+                        React.createElement(History, { size: 16, className: "text-gray-400 flex-shrink-0" }),
+                        React.createElement("div", { className: "flex-1 min-w-0" },
+                            React.createElement("div", { className: "font-medium theme-text-primary truncate" }, item.title || item.url),
+                            React.createElement("div", { className: "text-sm theme-text-muted truncate" }, item.url),
+                            React.createElement("div", { className: "text-xs theme-text-muted" },
+                                item.visit_count,
+                                " visit",
+                                item.visit_count !== 1 ? 's' : '',
+                                " \u2022 ",
+                                new Date(item.last_visited).toLocaleDateString())),
+                        React.createElement("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                handleAddBookmark();
+                                setUrlInput(item.url);
+                                setActiveTab('url');
+                            }, className: "opacity-0 group-hover:opacity-100 p-1 theme-hover rounded text-yellow-400" },
+                            React.createElement(Star, { size: 12 }))))))))),
+            React.createElement("div", { className: "flex justify-end gap-3 mt-4 pt-4 border-t theme-border" },
+                React.createElement("button", { onClick: onClose, className: "px-4 py-2 theme-button theme-hover rounded text-sm" }, "Cancel")))));
+};
+export default BrowserUrlDialog;

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

@@ -0,0 +1 @@
+export { default as BrowserUrlDialog } from "./BrowserUrlDialog";

package/dist/ui/dialogs/index.js

@@ -0,0 +1 @@
+export { default as BrowserUrlDialog } from "./BrowserUrlDialog";

package/dist/ui/editors/ImageEditor.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export type EditorTool = 'select' | 'rect-select' | 'lasso' | 'text' | 'brush' | 'eraser' | 'crop';
+export interface ImageAdjustments {
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    whites: number;
+    blacks: number;
+    saturation: number;
+    warmth: number;
+    tint: number;
+    pop: number;
+    vignette: number;
+    blur: number;
+}
+export interface TextLayer {
+    id: string;
+    content: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    color: string;
+    fontFamily: string;
+}
+export interface Selection {
+    type: 'rect' | 'lasso';
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    points?: Array<{
+        x: number;
+        y: number;
+    }>;
+}
+export interface ImageEditorProps {
+    imageSrc: string | null;
+    onSave?: (data: {
+        adjustments: ImageAdjustments;
+        textLayers: TextLayer[];
+    }) => void;
+    onClose?: () => void;
+    onGenerativeFill?: (selection: Selection, prompt: string) => Promise<void>;
+    className?: string;
+    showHeader?: boolean;
+    title?: string;
+}
+export declare const ImageEditor: React.FC<ImageEditorProps>;

package/dist/ui/editors/ImageEditor.js

@@ -0,0 +1,264 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Camera, Type, Crop, Undo, Redo, Save, X, Brush, Eraser } from 'lucide-react';
+// Icons for tools (using inline SVG for cursor/select tool)
+const CursorIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    React.createElement("path", { d: "M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" })));
+const RectSelectIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", strokeDasharray: "4 2" })));
+const LassoIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    React.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c2.5 0 4.8-.9 6.6-2.4" }),
+    React.createElement("circle", { cx: "18", cy: "18", r: "3" })));
+const SliderControl = ({ label, value, min, max, onChange, onCommit }) => (React.createElement("div", { className: "flex items-center gap-2" },
+    React.createElement("span", { className: "text-xs w-20 flex-shrink-0" }, label),
+    React.createElement("input", { type: "range", min: min, max: max, value: value, onChange: (e) => onChange(Number(e.target.value)), onMouseUp: onCommit, className: "flex-1 h-1 bg-gray-600 rounded appearance-none cursor-pointer" }),
+    React.createElement("span", { className: "text-xs w-8 text-right font-mono" }, value)));
+const ToolButton = ({ active, onClick, title, children }) => (React.createElement("button", { onClick: onClick, className: `p-2 rounded transition-colors ${active ? 'bg-blue-600 text-white' : 'hover:bg-gray-700'}`, title: title }, children));
+// ----- Default Values -----
+const defaultAdjustments = {
+    exposure: 0,
+    contrast: 0,
+    highlights: 0,
+    shadows: 0,
+    whites: 0,
+    blacks: 0,
+    saturation: 100,
+    warmth: 0,
+    tint: 0,
+    pop: 0,
+    vignette: 0,
+    blur: 0
+};
+const generateId = () => `layer_${Math.random().toString(36).substring(2, 11)}`;
+// ----- Main Component -----
+export const ImageEditor = ({ imageSrc, onSave, onClose, onGenerativeFill, className = '', showHeader = true, title = 'Image Editor' }) => {
+    // Tool state
+    const [activeTool, setActiveTool] = useState('select');
+    // Adjustments
+    const [adjustments, setAdjustments] = useState(defaultAdjustments);
+    // Text layers
+    const [textLayers, setTextLayers] = useState([]);
+    const [editingTextId, setEditingTextId] = useState(null);
+    // Selection
+    const [selection, setSelection] = useState(null);
+    const [isDrawingSelection, setIsDrawingSelection] = useState(false);
+    const [selectionPoints, setSelectionPoints] = useState([]);
+    // History
+    const [history, setHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    // Refs
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    // Generative fill prompt
+    const [fillPrompt, setFillPrompt] = useState('');
+    // Push to history
+    const pushHistory = useCallback(() => {
+        const newEntry = { adjustments: { ...adjustments }, textLayers: [...textLayers] };
+        setHistory(prev => [...prev.slice(0, historyIndex + 1), newEntry]);
+        setHistoryIndex(prev => prev + 1);
+    }, [adjustments, textLayers, historyIndex]);
+    // Undo/Redo
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
+    const undo = useCallback(() => {
+        if (canUndo) {
+            const prev = history[historyIndex - 1];
+            setAdjustments(prev.adjustments);
+            setTextLayers(prev.textLayers);
+            setHistoryIndex(i => i - 1);
+        }
+    }, [canUndo, history, historyIndex]);
+    const redo = useCallback(() => {
+        if (canRedo) {
+            const next = history[historyIndex + 1];
+            setAdjustments(next.adjustments);
+            setTextLayers(next.textLayers);
+            setHistoryIndex(i => i + 1);
+        }
+    }, [canRedo, history, historyIndex]);
+    // Handle adjustment change
+    const handleAdjustmentChange = (key, value) => {
+        setAdjustments(prev => ({ ...prev, [key]: value }));
+    };
+    // Calculate CSS filter from adjustments
+    const calculateImageStyle = useCallback(() => {
+        const { exposure, contrast, saturation, warmth, blur } = adjustments;
+        const brightness = 1 + (exposure / 100);
+        const contrastVal = 1 + (contrast / 100);
+        const saturateVal = saturation / 100;
+        const sepiaVal = warmth > 0 ? warmth / 200 : 0;
+        const hueRotate = warmth < 0 ? warmth : 0;
+        return {
+            filter: `
+                brightness(${brightness})
+                contrast(${contrastVal})
+                saturate(${saturateVal})
+                sepia(${sepiaVal})
+                hue-rotate(${hueRotate}deg)
+                blur(${blur}px)
+            `.trim(),
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'contain'
+        };
+    }, [adjustments]);
+    // Mouse handlers for selection
+    const handleMouseDown = (e) => {
+        if (activeTool === 'select' || activeTool === 'crop')
+            return;
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        if (activeTool === 'text') {
+            const newText = {
+                id: generateId(),
+                content: 'Text',
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+                fontSize: 24,
+                color: '#ffffff',
+                fontFamily: 'Arial'
+            };
+            setTextLayers(prev => [...prev, newText]);
+            setEditingTextId(newText.id);
+            pushHistory();
+            return;
+        }
+        if (activeTool === 'rect-select') {
+            setIsDrawingSelection(true);
+            setSelection({ type: 'rect', x1: x, y1: y, x2: x, y2: y });
+        }
+        else if (activeTool === 'lasso') {
+            setIsDrawingSelection(true);
+            setSelectionPoints([{ x, y }]);
+        }
+    };
+    const handleMouseMove = (e) => {
+        if (!isDrawingSelection)
+            return;
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        if (activeTool === 'rect-select' && selection?.type === 'rect') {
+            setSelection(prev => prev ? { ...prev, x2: x, y2: y } : null);
+        }
+        else if (activeTool === 'lasso') {
+            setSelectionPoints(prev => [...prev, { x, y }]);
+        }
+    };
+    const handleMouseUp = () => {
+        if (!isDrawingSelection)
+            return;
+        setIsDrawingSelection(false);
+        if (activeTool === 'lasso' && selectionPoints.length > 2) {
+            setSelection({ type: 'lasso', points: selectionPoints });
+        }
+    };
+    // Handle save
+    const handleSave = () => {
+        onSave?.({ adjustments, textLayers });
+    };
+    // Reset adjustments
+    const resetAdjustments = () => {
+        setAdjustments(defaultAdjustments);
+        pushHistory();
+    };
+    if (!imageSrc) {
+        return (React.createElement("div", { className: `flex items-center justify-center h-full bg-gray-900 ${className}` },
+            React.createElement("div", { className: "text-center text-gray-500" },
+                React.createElement(Camera, { size: 48, className: "mx-auto mb-4" }),
+                React.createElement("p", null, "No image selected"))));
+    }
+    return (React.createElement("div", { className: `flex flex-col h-full bg-gray-900 ${className}` },
+        showHeader && (React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-gray-700 bg-gray-800" },
+            React.createElement("h3", { className: "font-semibold flex items-center gap-2" },
+                React.createElement(Camera, { size: 18 }),
+                " ",
+                title),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("button", { onClick: undo, disabled: !canUndo, className: "p-2 rounded hover:bg-gray-700 disabled:opacity-50", title: "Undo" },
+                    React.createElement(Undo, { size: 18 })),
+                React.createElement("button", { onClick: redo, disabled: !canRedo, className: "p-2 rounded hover:bg-gray-700 disabled:opacity-50", title: "Redo" },
+                    React.createElement(Redo, { size: 18 })),
+                onSave && (React.createElement("button", { onClick: handleSave, className: "px-3 py-1 bg-blue-600 rounded text-sm hover:bg-blue-700" },
+                    React.createElement(Save, { size: 14, className: "inline mr-1" }),
+                    " Save")),
+                onClose && (React.createElement("button", { onClick: onClose, className: "p-2 rounded hover:bg-gray-700" },
+                    React.createElement(X, { size: 18 })))))),
+        React.createElement("div", { className: "flex-1 flex overflow-hidden" },
+            React.createElement("div", { className: "w-14 border-r border-gray-700 flex flex-col items-center py-2 gap-1 bg-gray-800" },
+                React.createElement(ToolButton, { active: activeTool === 'select', onClick: () => setActiveTool('select'), title: "Select" },
+                    React.createElement(CursorIcon, null)),
+                React.createElement(ToolButton, { active: activeTool === 'rect-select', onClick: () => setActiveTool('rect-select'), title: "Rectangle Select" },
+                    React.createElement(RectSelectIcon, null)),
+                React.createElement(ToolButton, { active: activeTool === 'lasso', onClick: () => setActiveTool('lasso'), title: "Lasso Select" },
+                    React.createElement(LassoIcon, null)),
+                React.createElement(ToolButton, { active: activeTool === 'text', onClick: () => setActiveTool('text'), title: "Text Tool" },
+                    React.createElement(Type, { size: 20 })),
+                React.createElement("div", { className: "border-t border-gray-600 w-full my-2" }),
+                React.createElement(ToolButton, { active: activeTool === 'brush', onClick: () => setActiveTool('brush'), title: "Brush" },
+                    React.createElement(Brush, { size: 20 })),
+                React.createElement(ToolButton, { active: activeTool === 'eraser', onClick: () => setActiveTool('eraser'), title: "Eraser" },
+                    React.createElement(Eraser, { size: 20 })),
+                React.createElement("div", { className: "border-t border-gray-600 w-full my-2" }),
+                React.createElement(ToolButton, { active: activeTool === 'crop', onClick: () => setActiveTool('crop'), title: "Crop" },
+                    React.createElement(Crop, { size: 20 }))),
+            React.createElement("div", { ref: containerRef, className: "flex-1 flex items-center justify-center p-4 overflow-hidden relative bg-gray-800/50", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: { cursor: activeTool === 'text' ? 'text' : activeTool === 'lasso' ? 'crosshair' : 'default' } },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("img", { ref: imageRef, src: imageSrc, style: calculateImageStyle(), alt: "Editing", draggable: false }),
+                    selection?.type === 'rect' && (React.createElement("div", { className: "absolute border-2 border-dashed border-blue-400 pointer-events-none", style: {
+                            left: `${Math.min(selection.x1 || 0, selection.x2 || 0)}%`,
+                            top: `${Math.min(selection.y1 || 0, selection.y2 || 0)}%`,
+                            width: `${Math.abs((selection.x2 || 0) - (selection.x1 || 0))}%`,
+                            height: `${Math.abs((selection.y2 || 0) - (selection.y1 || 0))}%`
+                        } })),
+                    selection?.type === 'lasso' && selection.points && (React.createElement("svg", { className: "absolute inset-0 pointer-events-none w-full h-full" },
+                        React.createElement("polygon", { points: selection.points.map(p => `${p.x}%,${p.y}%`).join(' '), fill: "rgba(59, 130, 246, 0.1)", stroke: "rgb(59, 130, 246)", strokeWidth: "2", strokeDasharray: "5,5" }))),
+                    textLayers.map(text => (React.createElement("div", { key: text.id, className: "absolute cursor-move", style: {
+                            left: text.x,
+                            top: text.y,
+                            fontSize: text.fontSize,
+                            color: text.color,
+                            fontFamily: text.fontFamily,
+                            zIndex: 10
+                        }, onDoubleClick: () => setEditingTextId(text.id) }, editingTextId === text.id ? (React.createElement("input", { type: "text", value: text.content, onChange: (e) => setTextLayers(prev => prev.map(t => t.id === text.id ? { ...t, content: e.target.value } : t)), onBlur: () => setEditingTextId(null), onKeyDown: (e) => e.key === 'Enter' && setEditingTextId(null), autoFocus: true, className: "bg-black/50 border border-blue-400 outline-none px-2", style: {
+                            fontSize: text.fontSize,
+                            color: text.color,
+                            fontFamily: text.fontFamily
+                        } })) : (React.createElement("span", { className: "px-2 py-1 bg-black/30 rounded" }, text.content))))),
+                    adjustments.vignette > 0 && (React.createElement("div", { className: "absolute inset-0 pointer-events-none", style: {
+                            boxShadow: `inset 0 0 ${adjustments.vignette * 2.5}px ${adjustments.vignette * 1.5}px rgba(0,0,0,0.9)`
+                        } })))),
+            React.createElement("div", { className: "w-72 border-l border-gray-700 bg-gray-800 flex flex-col overflow-hidden" },
+                React.createElement("div", { className: "p-3 border-b border-gray-700" },
+                    React.createElement("h4", { className: "font-semibold text-sm" }, "Adjustments")),
+                React.createElement("div", { className: "flex-1 overflow-y-auto p-3 space-y-4" },
+                    React.createElement("details", { open: true },
+                        React.createElement("summary", { className: "font-semibold text-sm cursor-pointer mb-2" }, "Light"),
+                        React.createElement("div", { className: "space-y-2" },
+                            React.createElement(SliderControl, { label: "Exposure", value: adjustments.exposure, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('exposure', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Contrast", value: adjustments.contrast, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('contrast', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Highlights", value: adjustments.highlights, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('highlights', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Shadows", value: adjustments.shadows, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('shadows', v), onCommit: pushHistory }))),
+                    React.createElement("details", { open: true },
+                        React.createElement("summary", { className: "font-semibold text-sm cursor-pointer mb-2" }, "Color"),
+                        React.createElement("div", { className: "space-y-2" },
+                            React.createElement(SliderControl, { label: "Saturation", value: adjustments.saturation, min: 0, max: 200, onChange: (v) => handleAdjustmentChange('saturation', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Warmth", value: adjustments.warmth, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('warmth', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Tint", value: adjustments.tint, min: -100, max: 100, onChange: (v) => handleAdjustmentChange('tint', v), onCommit: pushHistory }))),
+                    React.createElement("details", { open: true },
+                        React.createElement("summary", { className: "font-semibold text-sm cursor-pointer mb-2" }, "Effects"),
+                        React.createElement("div", { className: "space-y-2" },
+                            React.createElement(SliderControl, { label: "Vignette", value: adjustments.vignette, min: 0, max: 100, onChange: (v) => handleAdjustmentChange('vignette', v), onCommit: pushHistory }),
+                            React.createElement(SliderControl, { label: "Blur", value: adjustments.blur, min: 0, max: 20, onChange: (v) => handleAdjustmentChange('blur', v), onCommit: pushHistory }))),
+                    selection && onGenerativeFill && (React.createElement("div", { className: "border-t border-gray-700 pt-4 space-y-2" },
+                        React.createElement("h5", { className: "font-semibold text-sm" }, "Selection"),
+                        React.createElement("input", { type: "text", value: fillPrompt, onChange: (e) => setFillPrompt(e.target.value), placeholder: "Fill prompt...", className: "w-full bg-gray-700 rounded px-2 py-1 text-sm" }),
+                        React.createElement("div", { className: "flex gap-2" },
+                            React.createElement("button", { onClick: () => onGenerativeFill(selection, fillPrompt), className: "flex-1 bg-blue-600 rounded py-1 text-sm hover:bg-blue-700" }, "Fill"),
+                            React.createElement("button", { onClick: () => setSelection(null), className: "flex-1 bg-gray-700 rounded py-1 text-sm hover:bg-gray-600" }, "Clear")))),
+                    React.createElement("button", { onClick: resetAdjustments, className: "w-full bg-gray-700 rounded py-2 text-sm hover:bg-gray-600" }, "Reset All"))))));
+};

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

@@ -0,0 +1,2 @@
+export { ImageEditor } from './ImageEditor';
+export type { ImageEditorProps, ImageAdjustments, TextLayer, Selection, EditorTool } from './ImageEditor';

package/dist/ui/editors/index.js

@@ -0,0 +1 @@
+export { ImageEditor } from './ImageEditor';

package/dist/ui/execution/ExecutionFilters.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ExecutionFiltersProps {
+    searchTerm: string;
+    onSearchChange: (term: string) => void;
+    labelFilter: string;
+    onLabelFilterChange: (label: string) => void;
+    dateRange: string;
+    onDateRangeChange: (range: string) => void;
+}
+export declare const ExecutionFilters: React.FC<ExecutionFiltersProps>;
+export {};

package/dist/ui/execution/ExecutionFilters.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Search, Filter } from 'lucide-react';
+export const ExecutionFilters = ({ searchTerm, onSearchChange, labelFilter, onLabelFilterChange, dateRange, onDateRangeChange }) => {
+    return (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4" },
+        React.createElement("div", null,
+            React.createElement("label", { className: "text-sm font-medium mb-2 block" },
+                React.createElement(Search, { size: 14, className: "inline mr-1" }),
+                "Search"),
+            React.createElement("input", { type: "text", value: searchTerm, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search executions...", className: "w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-sm" })),
+        React.createElement("div", null,
+            React.createElement("label", { className: "text-sm font-medium mb-2 block" },
+                React.createElement(Filter, { size: 14, className: "inline mr-1" }),
+                "Label Filter"),
+            React.createElement("select", { value: labelFilter, onChange: (e) => onLabelFilterChange(e.target.value), className: "w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-sm" },
+                React.createElement("option", { value: "all" }, "All Labels"),
+                React.createElement("option", { value: "good" }, "Good"),
+                React.createElement("option", { value: "bad" }, "Bad"),
+                React.createElement("option", { value: "neutral" }, "Neutral"),
+                React.createElement("option", { value: "unlabeled" }, "Unlabeled"))),
+        React.createElement("div", null,
+            React.createElement("label", { className: "text-sm font-medium mb-2 block" }, "Date Range"),
+            React.createElement("select", { value: dateRange, onChange: (e) => onDateRangeChange(e.target.value), className: "w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-sm" },
+                React.createElement("option", { value: "all" }, "All Time"),
+                React.createElement("option", { value: "7d" }, "Last 7 Days"),
+                React.createElement("option", { value: "30d" }, "Last 30 Days"),
+                React.createElement("option", { value: "90d" }, "Last 90 Days")))));
+};

package/dist/ui/execution/ExecutionHistoryList.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface Execution {
+    id: string;
+    timestamp: string;
+    input: string;
+    output: string;
+    label?: 'good' | 'bad' | 'neutral';
+    favorited?: boolean;
+}
+interface ExecutionHistoryListProps {
+    executions: Execution[];
+    onRun?: (id: string) => void;
+    onCopy?: (id: string) => void;
+    onToggleFavorite?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    onLabel?: (id: string, label: 'good' | 'bad' | 'neutral') => void;
+}
+export declare const ExecutionHistoryList: React.FC<ExecutionHistoryListProps>;
+export {};

package/dist/ui/execution/ExecutionHistoryList.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Play, Copy, Star, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
+export const ExecutionHistoryList = ({ executions, onRun, onCopy, onToggleFavorite, onDelete, onLabel }) => {
+    const [expandedId, setExpandedId] = React.useState(null);
+    return (React.createElement("ul", { className: "space-y-1 text-sm font-mono" },
+        executions.map((exec) => (React.createElement("li", { key: exec.id, className: "group rounded hover:bg-gray-800" },
+            React.createElement("div", { className: "flex items-center justify-between p-2" },
+                React.createElement("button", { onClick: () => setExpandedId(expandedId === exec.id ? null : exec.id), className: "flex-1 text-left truncate flex items-center gap-2", title: exec.input },
+                    expandedId === exec.id ? React.createElement(ChevronDown, { size: 14 }) : React.createElement(ChevronRight, { size: 14 }),
+                    React.createElement("span", { className: "truncate" }, exec.input)),
+                React.createElement("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" },
+                    onRun && (React.createElement("button", { onClick: () => onRun(exec.id), className: "p-1 hover:bg-gray-700 rounded", title: "Run" },
+                        React.createElement(Play, { size: 14 }))),
+                    onCopy && (React.createElement("button", { onClick: () => onCopy(exec.id), className: "p-1 hover:bg-gray-700 rounded", title: "Copy" },
+                        React.createElement(Copy, { size: 14 }))),
+                    onToggleFavorite && (React.createElement("button", { onClick: () => onToggleFavorite(exec.id), className: "p-1 hover:bg-gray-700 rounded", title: "Favorite" },
+                        React.createElement(Star, { size: 14, className: exec.favorited ? 'fill-yellow-400 text-yellow-400' : '' }))),
+                    onDelete && (React.createElement("button", { onClick: () => onDelete(exec.id), className: "p-1 hover:bg-gray-700 rounded text-red-400", title: "Delete" },
+                        React.createElement(Trash2, { size: 14 }))))),
+            expandedId === exec.id && (React.createElement("div", { className: "px-2 pb-2 space-y-2 text-xs" },
+                React.createElement("div", { className: "bg-gray-900 p-2 rounded" },
+                    React.createElement("div", { className: "text-gray-500 mb-1" }, "Output:"),
+                    React.createElement("div", null, exec.output)),
+                onLabel && (React.createElement("div", { className: "flex gap-2" },
+                    React.createElement("button", { onClick: () => onLabel(exec.id, 'good'), className: `px-2 py-1 rounded ${exec.label === 'good'
+                            ? 'bg-green-600 text-white'
+                            : 'bg-gray-700 hover:bg-gray-600'}` }, "Good"),
+                    React.createElement("button", { onClick: () => onLabel(exec.id, 'bad'), className: `px-2 py-1 rounded ${exec.label === 'bad'
+                            ? 'bg-red-600 text-white'
+                            : 'bg-gray-700 hover:bg-gray-600'}` }, "Bad"),
+                    React.createElement("button", { onClick: () => onLabel(exec.id, 'neutral'), className: `px-2 py-1 rounded ${exec.label === 'neutral'
+                            ? 'bg-gray-600 text-white'
+                            : 'bg-gray-700 hover:bg-gray-600'}` }, "Neutral")))))))),
+        executions.length === 0 && (React.createElement("li", { className: "text-center p-4 text-gray-500" }, "No execution history"))));
+};

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

@@ -0,0 +1,3 @@
+export { ExecutionHistoryList } from './ExecutionHistoryList';
+export { ExecutionFilters } from './ExecutionFilters';
+export type { Execution } from './ExecutionHistoryList';