ilse-design 0.3.0-beta.1

package/dist/react/toolbar.js

@@ -0,0 +1,755 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { captureElement, captureTextSelection, captureArea, captureEnvironment } from './annotator.js';
+import { connect, disconnect, send, onMessage, isConnected } from './ws-client.js';
+import { useImageInput, ImagePreview } from './image-input.js';
+import { toggleFreeze, isFrozen } from './freeze.js';
+// ── Clipboard fallback: format annotations as markdown ──────────────────────
+function formatAnnotationMarkdown(ann, index, env) {
+    const lines = [];
+    lines.push(`### ${index + 1}. ${ann.capture.element}${ann.capture.component ? ` (${ann.capture.component})` : ''}`);
+    if (ann.capture.grepPattern)
+        lines.push(`**Grep:** \`${ann.capture.grepPattern}\``);
+    if (ann.capture.componentStack?.length)
+        lines.push(`**Stack:** ${ann.capture.componentStack.join(' > ')}`);
+    if (ann.capture.domPath)
+        lines.push(`**DOM:** ${ann.capture.domPath}`);
+    if (ann.note)
+        lines.push(`**Feedback:** ${ann.note}`);
+    const styleEntries = Object.entries(ann.capture.styles).slice(0, 10);
+    if (styleEntries.length > 0) {
+        lines.push(`**Styles:** ${styleEntries.map(([k, v]) => `${k}: ${v}`).join('; ')}`);
+    }
+    if (ann.capture.parent)
+        lines.push(`**Parent:** ${ann.capture.parent}`);
+    return lines.join('\n');
+}
+function formatAllAsMarkdown(annotations) {
+    const env = captureEnvironment();
+    const pending = annotations.filter(a => a.status === 'pending');
+    const lines = [
+        `## Page Feedback: ${env.url}`,
+        '',
+        `**Environment:** ${env.viewport} · DPR ${env.devicePixelRatio}`,
+        `**Timestamp:** ${env.timestamp}`,
+        '',
+        ...pending.map((ann, i) => formatAnnotationMarkdown(ann, i, env)),
+        '',
+        '---',
+        '*Gerado por Ilse — cole no seu agente de código para corrigir.*',
+    ];
+    return lines.join('\n');
+}
+// ─── AnnotationEditor (inside settings panel) ─────────────────────────────────
+function AnnotationEditor({ note, imageRef, onNoteChange, onImageChange, onSend, }) {
+    const { handlePaste, handleFileChange, openFilePicker, fileRef } = useImageInput(onImageChange);
+    return (_jsxs("div", { style: { marginTop: 6 }, onClick: (e) => e.stopPropagation(), children: [_jsx("textarea", { value: note, onChange: (e) => onNoteChange(e.target.value), onPaste: handlePaste, placeholder: "O que est\u00E1 errado?", style: {
+                    width: '100%', minHeight: 48, padding: 6,
+                    backgroundColor: '#0f0f23', border: '1px solid #2d2d4a',
+                    borderRadius: 6, color: '#e2e8f0', fontSize: 12,
+                    resize: 'vertical', outline: 'none', boxSizing: 'border-box',
+                } }), _jsx(ImagePreview, { value: imageRef, onRemove: () => onImageChange(undefined), onUpload: openFilePicker, fileRef: fileRef, onFileChange: handleFileChange }), _jsx("button", { onClick: onSend, style: {
+                    marginTop: 4, padding: '4px 10px', backgroundColor: '#6366f1',
+                    color: 'white', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 12,
+                }, children: "Enviar" })] }));
+}
+// ─── AnnotationPopover ────────────────────────────────────────────────────────
+function AnnotationPopover({ context, rect, note, grepPattern, onNoteChange, onAdd, onCancel, }) {
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const width = 300;
+        const height = grepPattern ? 196 : 168;
+        const gap = 8;
+        let top = rect.top + rect.height + gap;
+        let left = rect.left;
+        if (left + width > window.innerWidth - 8)
+            left = window.innerWidth - width - 8;
+        if (left < 8)
+            left = 8;
+        if (top + height > window.innerHeight - 8)
+            top = rect.top - height - gap;
+        if (top < 8)
+            top = 8;
+        setPos({ top, left });
+    }, [rect, grepPattern]);
+    const copyGrep = () => {
+        if (!grepPattern)
+            return;
+        navigator.clipboard.writeText(grepPattern).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        });
+    };
+    return (_jsxs("div", { "data-ilse-toolbar": true, style: {
+            position: 'fixed', top: pos.top, left: pos.left, width: 300,
+            backgroundColor: '#1a1a2e', border: '1px solid #2d2d4a',
+            borderRadius: 17, padding: 16, zIndex: 99999,
+            boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontSize: 12, color: '#64748b', marginBottom: grepPattern ? 6 : 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: context }), grepPattern && (_jsxs("div", { onClick: copyGrep, title: "Copiar padr\u00E3o para grep", style: {
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    backgroundColor: '#0f0f23', border: '1px solid #2d2d4a',
+                    borderRadius: 6, padding: '4px 8px', marginBottom: 10,
+                    cursor: 'pointer', gap: 6,
+                }, children: [_jsx("code", { style: { fontSize: 11, color: '#a78bfa', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }, children: grepPattern }), _jsx("span", { style: { fontSize: 10, color: copied ? '#4ade80' : '#64748b', flexShrink: 0 }, children: copied ? '✓' : '⎘' })] })), _jsx("textarea", { autoFocus: true, value: note, onChange: (e) => onNoteChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault();
+                        onAdd();
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onCancel();
+                    }
+                }, placeholder: "Descreva o problema...", style: {
+                    width: '100%', minHeight: 52, padding: 8,
+                    backgroundColor: '#0f0f23', border: '1px solid #2d2d4a',
+                    borderRadius: 8, color: '#e2e8f0', fontSize: 13,
+                    resize: 'none', outline: 'none', boxSizing: 'border-box',
+                    marginBottom: 10, display: 'block',
+                } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx("button", { onClick: onCancel, style: { padding: '6px 14px', background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer', fontSize: 13, borderRadius: 8 }, children: "Cancelar" }), _jsx("button", { onClick: onAdd, style: { padding: '6px 16px', backgroundColor: '#6366f1', color: 'white', border: 'none', borderRadius: 8, cursor: 'pointer', fontSize: 13, fontWeight: 600 }, children: "Adicionar" })] })] }));
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function normalizeRect(start, end) {
+    return {
+        top: Math.min(start.y, end.y),
+        left: Math.min(start.x, end.x),
+        width: Math.abs(end.x - start.x),
+        height: Math.abs(end.y - start.y),
+    };
+}
+function clampToViewport(pos, buttonSize = 40) {
+    if (typeof window === 'undefined')
+        return pos;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    return {
+        x: Math.min(Math.max(pos.x, 8), vw - buttonSize - 8),
+        y: Math.min(Math.max(pos.y, 8), vh - buttonSize - 8),
+    };
+}
+function getInitialToolbarPos() {
+    if (typeof window === 'undefined')
+        return { x: 0, y: 0 };
+    try {
+        const saved = sessionStorage.getItem('ilse-toolbar-pos');
+        if (saved)
+            return clampToViewport(JSON.parse(saved));
+    }
+    catch { /* ignore */ }
+    return { x: Math.max(0, window.innerWidth / 2 - 160), y: window.innerHeight - 72 };
+}
+// ─── IlseToolbar ─────────────────────────────────────────────────────────────
+export function IlseToolbar() {
+    const [mounted, setMounted] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [annotating, setAnnotating] = useState(false);
+    const [annotations, setAnnotations] = useState([]);
+    const [activeMarker, setActiveMarker] = useState(null);
+    const [markersVisible, setMarkersVisible] = useState(true);
+    const [showSettings, setShowSettings] = useState(false);
+    const [paused, setPaused] = useState(false);
+    const [connected, setConnected] = useState(false);
+    const [clearConfirm, setClearConfirm] = useState(false);
+    const [sendFeedback, setSendFeedback] = useState(null);
+    const [clipboardToast, setClipboardToast] = useState(null);
+    const [highlight, setHighlight] = useState(null);
+    const [dragRect, setDragRect] = useState(null);
+    const [pendingCapture, setPendingCapture] = useState(null);
+    const [toolbarPos, setToolbarPos] = useState({ x: 0, y: 0 });
+    const [hoverLabel, setHoverLabel] = useState(null);
+    const [hoverLabelRect, setHoverLabelRect] = useState(null);
+    const toolbarDragRef = useRef(null);
+    const annotationDragRef = useRef(null);
+    const isDraggingAnnotationRef = useRef(false);
+    const clearTimerRef = useRef(null);
+    const toolbarPosRef = useRef(toolbarPos);
+    useEffect(() => { toolbarPosRef.current = toolbarPos; }, [toolbarPos]);
+    // ── Mount guard (SSR safety) ───────────────────────────────────────────────
+    useEffect(() => {
+        setMounted(true);
+        setToolbarPos(getInitialToolbarPos());
+    }, []);
+    // ── Clamp position on resize (monitor/window changes) ─────────────────────
+    useEffect(() => {
+        const onResize = () => setToolbarPos(prev => clampToViewport(prev));
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    // ── WS connection ──────────────────────────────────────────────────────────
+    useEffect(() => {
+        connect();
+        const checkConnection = setInterval(() => setConnected(isConnected()), 1000);
+        const unsub = onMessage((msg) => {
+            if (msg.type === 'annotated' && msg.annotation) {
+                const a = msg.annotation;
+                setAnnotations(prev => prev.map(ann => !ann.id && ann.capture.element === a.element ? { ...ann, id: a.id } : ann));
+            }
+            if (msg.type === 'resolved' && msg.annotation) {
+                const a = msg.annotation;
+                setAnnotations(prev => prev.map(ann => ann.id === a.id ? { ...ann, status: 'resolved', resolvedSummary: a.resolvedSummary } : ann));
+            }
+            if (msg.type === 'status') {
+                setAnnotations(prev => prev.map(ann => ann.id === msg.id ? { ...ann, status: msg.status } : ann));
+            }
+        });
+        return () => { clearInterval(checkConnection); unsub(); disconnect(); };
+    }, []);
+    // ── Annotation helpers ─────────────────────────────────────────────────────
+    const addAnnotation = useCallback((capture, prefillNote = '', markerType = 'element') => {
+        setAnnotations(prev => [...prev, { capture, note: prefillNote, status: 'pending', markerType }]);
+    }, []);
+    const confirmCapture = useCallback(() => {
+        if (!pendingCapture)
+            return;
+        addAnnotation(pendingCapture.capture, pendingCapture.note, pendingCapture.markerType);
+        setPendingCapture(null);
+        setAnnotating(true); // re-enter annotation mode after confirming
+    }, [pendingCapture, addAnnotation]);
+    const cancelCapture = useCallback(() => {
+        setPendingCapture(null);
+        setAnnotating(true);
+    }, []);
+    // ── Toolbar drag ───────────────────────────────────────────────────────────
+    const handleToolbarMouseDown = useCallback((e) => {
+        e.preventDefault();
+        toolbarDragRef.current = {
+            startMouseX: e.clientX,
+            startMouseY: e.clientY,
+            startPosX: toolbarPosRef.current.x,
+            startPosY: toolbarPosRef.current.y,
+        };
+        document.body.style.cursor = 'grabbing';
+    }, []);
+    useEffect(() => {
+        const onMove = (e) => {
+            if (!toolbarDragRef.current)
+                return;
+            const dx = e.clientX - toolbarDragRef.current.startMouseX;
+            const dy = e.clientY - toolbarDragRef.current.startMouseY;
+            setToolbarPos({
+                x: toolbarDragRef.current.startPosX + dx,
+                y: toolbarDragRef.current.startPosY + dy,
+            });
+        };
+        const onUp = (e) => {
+            if (!toolbarDragRef.current)
+                return;
+            const dx = e.clientX - toolbarDragRef.current.startMouseX;
+            const dy = e.clientY - toolbarDragRef.current.startMouseY;
+            if (Math.abs(dx) > 3 || Math.abs(dy) > 3)
+                wasDraggedRef.current = true;
+            const finalPos = { x: toolbarDragRef.current.startPosX + dx, y: toolbarDragRef.current.startPosY + dy };
+            try {
+                sessionStorage.setItem('ilse-toolbar-pos', JSON.stringify(finalPos));
+            }
+            catch { /* ignore */ }
+            toolbarDragRef.current = null;
+            document.body.style.cursor = '';
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        return () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+    }, []);
+    // ── Unified annotation mode handlers ──────────────────────────────────────
+    const handleMouseDown = useCallback((e) => {
+        if (toolbarDragRef.current)
+            return;
+        if (e.target.closest('[data-ilse-toolbar]'))
+            return;
+        annotationDragRef.current = { x: e.clientX, y: e.clientY };
+        isDraggingAnnotationRef.current = false;
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (toolbarDragRef.current)
+            return;
+        const target = e.target;
+        if (annotationDragRef.current && e.buttons === 1) {
+            const dx = e.clientX - annotationDragRef.current.x;
+            const dy = e.clientY - annotationDragRef.current.y;
+            if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+                isDraggingAnnotationRef.current = true;
+                setHighlight(null);
+                setHoverLabel(null);
+                setHoverLabelRect(null);
+                setDragRect(normalizeRect(annotationDragRef.current, { x: e.clientX, y: e.clientY }));
+                return;
+            }
+        }
+        if (!target.closest('[data-ilse-toolbar]')) {
+            const rect = target.getBoundingClientRect();
+            const r = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+            setHighlight(r);
+            const tag = target.tagName.toLowerCase();
+            const id = target.id ? `#${target.id}` : '';
+            const cls = !id && target.classList.length > 0 ? `.${target.classList[0]}` : '';
+            setHoverLabel(`${tag}${id}${cls}`);
+            setHoverLabelRect(r);
+        }
+        else {
+            setHighlight(null);
+        }
+    }, []);
+    const handleMouseUp = useCallback((e) => {
+        if (toolbarDragRef.current)
+            return;
+        const target = e.target;
+        if (target.closest('[data-ilse-toolbar]'))
+            return;
+        const start = annotationDragRef.current;
+        const wasDragging = isDraggingAnnotationRef.current;
+        annotationDragRef.current = null;
+        isDraggingAnnotationRef.current = false;
+        setDragRect(null);
+        if (wasDragging && start) {
+            const rect = normalizeRect(start, { x: e.clientX, y: e.clientY });
+            if (rect.width > 10 && rect.height > 10) {
+                const area = captureArea(rect);
+                setPendingCapture({
+                    capture: { element: `[área: ${area.elementCount} elementos]`, styles: {}, rect: area.region, _scrollX: window.scrollX, _scrollY: window.scrollY },
+                    context: `Área: ${area.elementCount} elementos`,
+                    rect,
+                    note: `${area.elements.slice(0, 5).map(el => el.selector).join(', ')}${area.elementCount > 5 ? '...' : ''}`,
+                    markerType: 'area',
+                });
+                setAnnotating(false);
+            }
+            return;
+        }
+        const textCapture = captureTextSelection();
+        if (textCapture) {
+            setPendingCapture({
+                capture: {
+                    element: textCapture.element,
+                    component: textCapture.component,
+                    styles: textCapture.styles,
+                    parent: undefined,
+                    rect: textCapture.rect,
+                    grepPattern: textCapture.grepPattern,
+                    componentStack: textCapture.componentStack,
+                    _scrollX: window.scrollX,
+                    _scrollY: window.scrollY,
+                },
+                context: `"${textCapture.text}"`,
+                rect: textCapture.rect,
+                note: '',
+                markerType: 'text',
+            });
+            window.getSelection()?.removeAllRanges();
+            setAnnotating(false);
+            return;
+        }
+        const capture = captureElement(target);
+        const domRect = target.getBoundingClientRect();
+        setPendingCapture({
+            capture,
+            context: capture.element,
+            rect: { top: Math.round(domRect.top), left: Math.round(domRect.left), width: Math.round(domRect.width), height: Math.round(domRect.height) },
+            note: '',
+            markerType: 'element',
+        });
+        setAnnotating(false);
+    }, []);
+    useEffect(() => {
+        if (annotating) {
+            document.addEventListener('mousedown', handleMouseDown, true);
+            document.addEventListener('mousemove', handleMouseMove, true);
+            document.addEventListener('mouseup', handleMouseUp, true);
+            document.body.style.cursor = 'crosshair';
+        }
+        else {
+            document.body.style.cursor = '';
+            setHighlight(null);
+            setDragRect(null);
+            setHoverLabel(null);
+            setHoverLabelRect(null);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown, true);
+            document.removeEventListener('mousemove', handleMouseMove, true);
+            document.removeEventListener('mouseup', handleMouseUp, true);
+            document.body.style.cursor = '';
+        };
+    }, [annotating, handleMouseDown, handleMouseMove, handleMouseUp]);
+    // ── Escape: close everything ───────────────────────────────────────────────
+    useEffect(() => {
+        const onEsc = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            setAnnotating(false);
+            setIsOpen(false);
+            setPendingCapture(null);
+            setActiveMarker(null);
+            setShowSettings(false);
+        };
+        document.addEventListener('keydown', onEsc);
+        return () => document.removeEventListener('keydown', onEsc);
+    }, []);
+    // ── Send / remove ──────────────────────────────────────────────────────────
+    const sendAnnotation = useCallback((index) => {
+        const ann = annotations[index];
+        if (!ann)
+            return;
+        const env = captureEnvironment();
+        const payload = {
+            type: 'annotate',
+            note: ann.note,
+            element: ann.capture.element,
+            component: ann.capture.component,
+            styles: ann.capture.styles,
+            parent: ann.capture.parent,
+            grepPattern: ann.capture.grepPattern,
+            componentStack: ann.capture.componentStack,
+            domPath: ann.capture.domPath,
+            nearbyElements: ann.capture.nearbyElements,
+            position: ann.capture.rect,
+            environment: env,
+        };
+        if (ann.imageRef)
+            payload.imageRef = ann.imageRef;
+        // Smart fallback: MCP → clipboard → show markdown
+        if (send(payload)) {
+            // WS connected — sent to MCP
+            setAnnotations(prev => prev.map((a, i) => i === index ? { ...a, status: 'sent' } : a));
+            setSendFeedback('sending');
+            setTimeout(() => setSendFeedback(null), 1500);
+        }
+        else {
+            // WS not connected — copy to clipboard
+            const markdown = formatAnnotationMarkdown(ann, index);
+            navigator.clipboard.writeText(markdown).then(() => {
+                setAnnotations(prev => prev.map((a, i) => i === index ? { ...a, status: 'sent' } : a));
+                setClipboardToast('Copiado! Cole no seu agente (Cmd+V)');
+                setTimeout(() => setClipboardToast(null), 4000);
+            }).catch(() => {
+                setClipboardToast('Não foi possível copiar. Use o botão copiar.');
+                setTimeout(() => setClipboardToast(null), 4000);
+            });
+        }
+    }, [annotations]);
+    const sendAll = useCallback(() => {
+        if (isConnected()) {
+            // WS connected — send each via MCP
+            annotations.forEach((ann, i) => { if (ann.status === 'pending')
+                sendAnnotation(i); });
+        }
+        else {
+            // WS not connected — copy all as markdown
+            const markdown = formatAllAsMarkdown(annotations);
+            navigator.clipboard.writeText(markdown).then(() => {
+                setAnnotations(prev => prev.map(a => a.status === 'pending' ? { ...a, status: 'sent' } : a));
+                setClipboardToast('Copiado! Cole no seu agente (Cmd+V)');
+                setTimeout(() => setClipboardToast(null), 4000);
+            }).catch(() => {
+                setClipboardToast('Não foi possível copiar.');
+                setTimeout(() => setClipboardToast(null), 4000);
+            });
+        }
+    }, [annotations, sendAnnotation]);
+    const removeAnnotation = useCallback((index) => {
+        setAnnotations(prev => prev.filter((_, i) => i !== index));
+        if (activeMarker === index)
+            setActiveMarker(null);
+    }, [activeMarker]);
+    const updateNote = (index, note) => {
+        setAnnotations(prev => prev.map((a, i) => i === index ? { ...a, note } : a));
+    };
+    const updateImageRef = (index, imageRef) => {
+        setAnnotations(prev => prev.map((a, i) => i === index ? { ...a, imageRef } : a));
+    };
+    const handleClear = () => {
+        if (clearConfirm) {
+            setAnnotations([]);
+            setActiveMarker(null);
+            setClearConfirm(false);
+            if (clearTimerRef.current)
+                clearTimeout(clearTimerRef.current);
+        }
+        else {
+            setClearConfirm(true);
+            clearTimerRef.current = setTimeout(() => setClearConfirm(false), 2000);
+        }
+    };
+    const pendingCount = annotations.filter(a => a.status === 'pending').length;
+    // ── Toolbar open/close ─────────────────────────────────────────────────────
+    const wasDraggedRef = useRef(false);
+    const openToolbar = () => {
+        if (wasDraggedRef.current) {
+            wasDraggedRef.current = false;
+            return;
+        }
+        setIsOpen(true);
+        setAnnotating(true);
+    };
+    const closeToolbar = () => {
+        setIsOpen(false);
+        setAnnotating(false);
+        setPendingCapture(null);
+        setActiveMarker(null);
+        setShowSettings(false);
+    };
+    // ── Render ─────────────────────────────────────────────────────────────────
+    if (!mounted)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @keyframes ilse-pulse {
+          0%, 100% { box-shadow: 0 0 0 3px rgba(255,108,3,0.4), 0 0 20px rgba(255,108,3,0.3), 0 4px 16px rgba(255,108,3,0.2); }
+          50% { box-shadow: 0 0 0 6px rgba(255,108,3,0.2), 0 0 30px rgba(255,108,3,0.4), 0 4px 16px rgba(255,108,3,0.3); }
+        }
+        @keyframes ilse-pixel {
+          0%, 100% { transform: scale(0.3); opacity: 0.2; }
+          50% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes ilse-processing {
+          0%, 100% { box-shadow: 0 0 0 0 rgba(255,108,3,0.6); }
+          50% { box-shadow: 0 0 0 8px rgba(255,108,3,0); }
+        }
+        @keyframes ilse-resolved {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.3); }
+          100% { transform: scale(1); }
+        }
+        @keyframes ilse-open {
+          from { clip-path: inset(0 0 0 calc(100% - 52px) round 22px); }
+          to   { clip-path: inset(0 0 0 0% round 17px); }
+        }
+      ` }), annotating && highlight && !dragRect && (_jsx("div", { style: {
+                    position: 'fixed', top: highlight.top, left: highlight.left,
+                    width: highlight.width, height: highlight.height,
+                    border: '2px solid #6366f1', backgroundColor: 'rgba(99,102,241,0.08)',
+                    pointerEvents: 'none', zIndex: 99996, borderRadius: 4,
+                    transition: 'all 0.08s ease',
+                } })), annotating && hoverLabel && hoverLabelRect && !dragRect && (_jsx("div", { style: {
+                    position: 'fixed',
+                    top: hoverLabelRect.top + hoverLabelRect.height + 6,
+                    left: hoverLabelRect.left,
+                    backgroundColor: 'rgba(15,15,35,0.92)',
+                    border: '1px solid #2d2d4a',
+                    borderRadius: 5,
+                    padding: '3px 8px',
+                    fontSize: 11,
+                    color: '#94a3b8',
+                    pointerEvents: 'none',
+                    zIndex: 99997,
+                    whiteSpace: 'nowrap',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.35)',
+                    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
+                }, children: hoverLabel })), dragRect && (_jsx("div", { style: {
+                    position: 'fixed', top: dragRect.top, left: dragRect.left,
+                    width: dragRect.width, height: dragRect.height,
+                    border: '2px dashed #6366f1', backgroundColor: 'rgba(99,102,241,0.06)',
+                    pointerEvents: 'none', zIndex: 99996, borderRadius: 4,
+                } })), pendingCapture && (_jsx(AnnotationPopover, { context: pendingCapture.context, rect: pendingCapture.rect, note: pendingCapture.note, grepPattern: pendingCapture.capture.grepPattern, onNoteChange: (note) => setPendingCapture(prev => prev ? { ...prev, note } : null), onAdd: confirmCapture, onCancel: cancelCapture })), isOpen && markersVisible && annotations.map((ann, i) => {
+                const r = ann.capture.rect;
+                const scrollX = ann.capture._scrollX ?? 0;
+                const scrollY = ann.capture._scrollY ?? 0;
+                const isArea = ann.markerType === 'area';
+                const isSent = ann.status === 'sent';
+                const isResolved = ann.status === 'resolved';
+                const markerColor = isResolved ? '#22c55e' : isSent ? '#FF6C03' : isArea ? '#22c55e' : '#f97316';
+                return (_jsx("div", { "data-ilse-toolbar": true, onClick: () => setActiveMarker(activeMarker === i ? null : i), style: {
+                        position: 'absolute',
+                        top: isArea ? (r.top + scrollY) - 6 : (r.top + scrollY) + r.height / 2 - 11,
+                        left: (r.left + scrollX) - 6,
+                        width: 22, height: 22,
+                        borderRadius: 7,
+                        backgroundColor: markerColor,
+                        color: 'white', fontSize: 11, fontWeight: 700,
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        zIndex: 99997, cursor: 'pointer',
+                        boxShadow: '0 1px 6px rgba(0,0,0,0.35)',
+                        fontFamily: '-apple-system, sans-serif',
+                        outline: activeMarker === i ? '2px solid white' : 'none',
+                        outlineOffset: 1,
+                        animation: isSent ? 'ilse-processing 1.5s ease-in-out infinite' : isResolved ? 'ilse-resolved 0.4s ease' : 'none',
+                    }, children: isResolved ? '\u2713' : isSent ? '\u2026' : i + 1 }, i));
+            }), activeMarker !== null && annotations[activeMarker] && (() => {
+                const ann = annotations[activeMarker];
+                const r = ann.capture.rect;
+                const scrollX = ann.capture._scrollX ?? 0;
+                const scrollY = ann.capture._scrollY ?? 0;
+                const absTop = r.top + scrollY;
+                const absLeft = r.left + scrollX;
+                let cardTop = absTop - 90;
+                let cardLeft = absLeft;
+                if (cardTop < window.scrollY + 8)
+                    cardTop = absTop + r.height + 8;
+                if (cardLeft + 240 > window.scrollX + window.innerWidth - 8)
+                    cardLeft = window.scrollX + window.innerWidth - 248;
+                if (cardLeft < window.scrollX + 8)
+                    cardLeft = window.scrollX + 8;
+                return (_jsxs("div", { "data-ilse-toolbar": true, style: {
+                        position: 'absolute', top: cardTop, left: cardLeft,
+                        width: 240, backgroundColor: '#1a1a2e',
+                        border: '1px solid #2d2d4a', borderRadius: 10, padding: 10,
+                        zIndex: 99998, boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+                        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }, children: [_jsx("code", { style: { fontSize: 10, color: '#a78bfa', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }, children: ann.capture.element }), _jsx("span", { style: {
+                                        fontSize: 10, padding: '1px 5px', borderRadius: 4, marginLeft: 6, flexShrink: 0,
+                                        backgroundColor: ann.status === 'pending' ? '#854d0e' : ann.status === 'sent' ? '#7c2d12' : '#14532d',
+                                        color: ann.status === 'pending' ? '#fbbf24' : ann.status === 'sent' ? '#FF6C03' : '#4ade80',
+                                    }, children: ann.status === 'sent' ? 'corrigindo...' : ann.status === 'resolved' ? 'corrigido' : 'pendente' })] }), ann.note ? (_jsx("div", { style: { fontSize: 12, color: '#e2e8f0', marginBottom: 8, lineHeight: 1.4 }, children: ann.note })) : (_jsx("div", { style: { fontSize: 12, color: '#64748b', marginBottom: 8 }, children: "sem nota" })), ann.status === 'sent' && (_jsx("div", { style: { fontSize: 11, color: '#FF6C03', marginBottom: 8, lineHeight: 1.4 }, children: "Corrigindo... Seu agente pode pedir permiss\u00E3o no terminal." })), ann.status === 'resolved' && ann.resolvedSummary && (_jsx("div", { style: { fontSize: 11, color: '#4ade80', marginBottom: 8 }, children: ann.resolvedSummary })), ann.status === 'pending' && (_jsx(AnnotationEditor, { note: ann.note, imageRef: ann.imageRef, onNoteChange: (note) => updateNote(activeMarker, note), onImageChange: (img) => updateImageRef(activeMarker, img), onSend: () => { sendAnnotation(activeMarker); setActiveMarker(null); } })), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', marginTop: 6 }, children: _jsx("button", { onClick: () => removeAnnotation(activeMarker), style: { background: 'none', border: 'none', color: '#ef4444', cursor: 'pointer', fontSize: 11, padding: '2px 4px' }, children: "\u2715 Remover" }) })] }));
+            })(), _jsxs("div", { "data-ilse-toolbar": true, style: { position: 'fixed', zIndex: 99999, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }, children: [!isOpen && (_jsx("div", { style: { position: 'fixed', top: toolbarPos.y, left: toolbarPos.x }, onMouseDown: handleToolbarMouseDown, children: _jsx(IlsePixelButton, { onClick: openToolbar, badge: pendingCount > 0 ? pendingCount : undefined }) })), isOpen && (() => {
+                        // Container anchored at the button's right edge, extending left via translateX(-100%).
+                        // Width-agnostic: works regardless of actual pill width.
+                        return (_jsxs("div", { style: {
+                                position: 'fixed',
+                                top: toolbarPos.y,
+                                left: toolbarPos.x + PILL_W,
+                                transform: 'translateX(-100%)',
+                            }, children: [showSettings && (_jsxs("div", { style: {
+                                        position: 'absolute', bottom: 'calc(100% + 8px)', right: 0,
+                                        backgroundColor: '#1a1a2e', border: '1px solid #2d2d4a',
+                                        borderRadius: 10, padding: 12,
+                                        width: 200, boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+                                        color: '#e2e8f0', fontSize: 12,
+                                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }, children: [_jsx("span", { style: { width: 7, height: 7, borderRadius: '50%', backgroundColor: connected ? '#22c55e' : '#ef4444', display: 'inline-block' } }), _jsx("span", { style: { color: '#94a3b8', fontSize: 11 }, children: connected ? 'WS conectado' : 'offline' })] }), annotations.length === 0 ? (_jsx("div", { style: { color: '#64748b', textAlign: 'center', padding: '8px 0' }, children: "Nenhuma anota\u00E7\u00E3o" })) : (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [
+                                                { label: 'pendente', count: annotations.filter(a => a.status === 'pending').length, color: '#fbbf24' },
+                                                { label: 'enviado', count: annotations.filter(a => a.status === 'sent').length, color: '#60a5fa' },
+                                                { label: 'resolvido', count: annotations.filter(a => a.status === 'resolved').length, color: '#4ade80' },
+                                            ].filter(s => s.count > 0).map(s => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#94a3b8' }, children: s.label }), _jsx("span", { style: { color: s.color, fontWeight: 600 }, children: s.count })] }, s.label))) }))] })), _jsxs("div", { onMouseDown: handleToolbarMouseDown, style: {
+                                        display: 'inline-flex', alignItems: 'center', gap: 4,
+                                        backgroundColor: '#ffffff', border: '1px solid #e5e5e5',
+                                        borderRadius: 17, padding: '8px 14px',
+                                        boxShadow: sendFeedback
+                                            ? '0 0 0 3px rgba(255,108,3,0.4), 0 0 20px rgba(255,108,3,0.3), 0 4px 16px rgba(255,108,3,0.2)'
+                                            : annotating
+                                                ? '0 2px 12px rgba(255,108,3,0.15), 0 0 0 1px rgba(255,108,3,0.2)'
+                                                : '0 2px 12px rgba(255,108,3,0.1), 0 4px 16px rgba(0,0,0,0.06)',
+                                        cursor: 'grab', userSelect: 'none',
+                                        transition: 'box-shadow 0.3s ease',
+                                        animation: sendFeedback
+                                            ? 'ilse-pulse 1s ease-in-out infinite'
+                                            : 'ilse-open 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards',
+                                    }, children: [_jsx(PillBtn, { title: paused ? 'Retomar animações' : 'Pausar animações', active: paused, onClick: () => { toggleFreeze(); setPaused(isFrozen()); }, children: paused
+                                                ? _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 2l10 6-10 6V2z", fill: "currentColor" }) })
+                                                : _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("rect", { x: "2", y: "2", width: "4", height: "12", rx: "1", fill: "currentColor" }), _jsx("rect", { x: "10", y: "2", width: "4", height: "12", rx: "1", fill: "currentColor" })] }) }), _jsx(PillBtn, { title: markersVisible ? 'Ocultar marcadores' : 'Mostrar marcadores', active: !markersVisible, onClick: () => setMarkersVisible(v => !v), children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "2" }), markersVisible && _jsx("circle", { cx: "8", cy: "8", r: "3", fill: "currentColor" })] }) }), _jsx(PillBtn, { title: clearConfirm ? 'Clique novamente para confirmar' : 'Limpar anotações', active: clearConfirm, danger: clearConfirm, onClick: handleClear, disabled: annotations.length === 0, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), _jsx(PillBtn, { title: "Enviar pendentes", onClick: sendAll, disabled: pendingCount === 0, badge: pendingCount > 0 ? pendingCount : undefined, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8.5 1L4 9h3.5v6L12 7H8.5V1z", fill: "currentColor" }) }) }), _jsx("div", { style: { width: 1, height: 18, backgroundColor: '#e0e0e0', margin: '0 6px' } }), _jsx(PillBtn, { title: "Configura\u00E7\u00F5es", active: showSettings, onClick: () => setShowSettings(v => !v), children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), _jsx(PillBtn, { title: "Fechar", onClick: closeToolbar, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }));
+                    })(), clipboardToast && (_jsx("div", { style: {
+                            position: 'fixed',
+                            bottom: 80,
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            backgroundColor: '#1a1a2e',
+                            color: '#e2e8f0',
+                            padding: '10px 20px',
+                            borderRadius: 10,
+                            fontSize: 13,
+                            fontFamily: '-apple-system, sans-serif',
+                            boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+                            zIndex: 100000,
+                            border: '1px solid #FF6C03',
+                            whiteSpace: 'nowrap',
+                        }, children: clipboardToast }))] })] }));
+}
+// ─── PillBtn helper ───────────────────────────────────────────────────────────
+// ─── Pixel pill button (closed state) ────────────────────────────────────────
+const PILL_COLORS = ['#FFFFFF', '#F6F6F6', '#FFECDE', '#FFC194', '#FF6C03', '#D9D9D9'];
+// Seeded pseudo-random for deterministic grid
+function seededRandom(seed) {
+    let s = seed;
+    return () => {
+        s = (s * 16807 + 0) % 2147483647;
+        return (s - 1) / 2147483646;
+    };
+}
+// Opacity per color index — lighter colors are more transparent
+const COLOR_OPACITY = [0.22, 0.25, 0.35, 0.55, 1.0, 0.20]; // #FFF, #F6F6, #FFECDE, #FFC194, #FF6C03, #D9D9
+function generatePixelGrid(cols, rows) {
+    const rand = seededRandom(42);
+    const grid = [];
+    for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+            const distFromCenter = Math.sqrt(Math.pow((x - cols / 2) / (cols / 2), 2) +
+                Math.pow((y - rows / 2) / (rows / 2), 2));
+            // Radial soft edge — outer pixels excluded progressively (organic shape)
+            const r0 = rand();
+            if (distFromCenter > 1.0)
+                continue;
+            if (distFromCenter > 0.85 && r0 < 0.55)
+                continue;
+            if (distFromCenter > 0.70 && r0 < 0.20)
+                continue;
+            // Small random holes in the dense core (~10%)
+            if (distFromCenter < 0.70 && r0 < 0.10)
+                continue;
+            // More orange in center, lighter at edges
+            const r = rand();
+            let colorIdx;
+            if (distFromCenter < 0.5) {
+                colorIdx = r < 0.5 ? 4 : r < 0.75 ? 3 : r < 0.9 ? 2 : 0;
+            }
+            else {
+                colorIdx = r < 0.25 ? 4 : r < 0.5 ? 3 : r < 0.7 ? 2 : r < 0.85 ? 0 : 1;
+            }
+            const isOrange = colorIdx === 4;
+            // Radial brightness falloff — edges fade out smoothly
+            const radialFade = Math.max(0.3, 1 - distFromCenter * 0.5);
+            const baseBrightness = COLOR_OPACITY[colorIdx] ?? 0.3;
+            grid.push({
+                x, y,
+                color: PILL_COLORS[colorIdx],
+                size: 2 + Math.floor(rand() * 3),
+                delay: rand() * 5,
+                duration: 1.8 + rand() * 3,
+                brightness: baseBrightness * radialFade,
+                glow: isOrange,
+            });
+        }
+    }
+    return grid;
+}
+const PILL_W = 52;
+const PILL_H = 44;
+const CELL = 4;
+const PIXEL_DATA = generatePixelGrid(Math.floor(PILL_W / CELL), Math.floor(PILL_H / CELL));
+function IlsePixelButton({ onClick, badge }) {
+    return (_jsxs("button", { onClick: onClick, style: {
+            width: PILL_W, height: PILL_H,
+            position: 'relative',
+            background: 'none',
+            border: 'none',
+            cursor: 'grab', userSelect: 'none',
+            padding: 0, display: 'block',
+        }, children: [PIXEL_DATA.map((p, i) => (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: p.y * CELL + (CELL - p.size) / 2,
+                    left: p.x * CELL + (CELL - p.size) / 2,
+                    width: p.size,
+                    height: p.size,
+                    backgroundColor: p.color,
+                    opacity: p.brightness,
+                    animation: `ilse-pixel ${p.duration.toFixed(1)}s ease-in-out ${p.delay.toFixed(1)}s infinite`,
+                    boxShadow: p.glow ? '0 0 6px rgba(255,108,3,0.5), 0 0 12px rgba(255,108,3,0.2)' : 'none',
+                } }, i))), badge !== undefined && (_jsx("span", { style: {
+                    position: 'absolute', top: -4, right: -4,
+                    backgroundColor: '#FF6C03', color: 'white',
+                    fontSize: 9, borderRadius: 5, width: 16, height: 16,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
+                    zIndex: 1,
+                }, children: badge }))] }));
+}
+// ─── PillBtn helper ───────────────────────────────────────────────────────────
+function PillBtn({ children, title, onClick, active, danger, disabled, badge, }) {
+    return (_jsxs("button", { title: title, onClick: (e) => { e.stopPropagation(); onClick?.(); }, disabled: disabled, style: {
+            background: active ? (danger ? 'rgba(239,68,68,0.08)' : 'rgba(255,108,3,0.1)') : 'none',
+            border: 'none',
+            color: disabled ? '#c0c0c0' : danger ? '#ef4444' : active ? '#FF6C03' : '#2D2D2D',
+            cursor: disabled ? 'default' : 'pointer',
+            fontSize: 16,
+            padding: '6px 9px',
+            borderRadius: 8,
+            lineHeight: 1,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            position: 'relative',
+            transition: 'color 0.15s, background 0.15s',
+        }, onMouseEnter: (e) => { if (!disabled)
+            e.currentTarget.style.background = danger ? 'rgba(239,68,68,0.08)' : 'rgba(255,108,3,0.06)'; }, onMouseLeave: (e) => { e.currentTarget.style.background = active ? (danger ? 'rgba(239,68,68,0.08)' : 'rgba(255,108,3,0.1)') : 'none'; }, children: [children, badge !== undefined && (_jsx("span", { style: {
+                    position: 'absolute', top: -3, right: -3,
+                    backgroundColor: '#FF6C03', color: 'white',
+                    fontSize: 9, borderRadius: 5, width: 14, height: 14,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
+                }, children: badge }))] }));
+}
+//# sourceMappingURL=toolbar.js.map