floatnote 1.0.0 → 1.0.6

package/src/renderer.js

@@ -1,3203 +0,0 @@
-// Glassboard Renderer Process
-// Handles drawing canvas, text overlays, and UI interactions
-
-class Glassboard {
-    constructor() {
-        this.app = document.getElementById('app');
-        this.canvas = document.getElementById('draw-canvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.textContainer = document.getElementById('text-container');
-
-        // Multi-note system
-        this.notes = []; // Array of notes
-        this.currentNoteIndex = 0;
-
-        this.isDrawing = false;
-        this.isTextMode = false;
-        this.isSelectMode = false;
-        this.currentColor = '#ffffff';
-        this.currentStrokeWidth = 4;
-        this.currentLine = null;
-        this.selectedTextId = null;
-
-        // Object grouping state
-        this.currentObjectId = null;
-        this.lastStrokeTime = 0;
-        this.objectGroupTimeout = 500; // ms - strokes within this time are grouped
-
-        // Selection state for drawing objects
-        this.selectedObjectId = null;
-        this.isDraggingObject = false;
-        this.dragStartPoint = null;
-
-        // Zoom state
-        this.zoomLevel = 1;
-        this.minZoom = 0.25;
-        this.maxZoom = 4;
-
-        // Pan state
-        this.panX = 0;
-        this.panY = 0;
-
-        // Rotation state
-        this.rotation = 0;
-
-        // Settings
-        this.settings = {
-            pinchZoom: true,
-            pan: true,
-            rotate: true,
-            showZoomControls: true,
-            openWithCleanSlate: false,
-            activeBgMode: 'transparent',
-            inactiveBgMode: 'transparent',
-            activeOpacity: 100,
-            inactiveOpacity: 50,
-            autoSaveToFolder: false
-        };
-
-        // Selection rectangle state
-        this.isSelecting = false;
-        this.selectionStart = null;
-        this.selectionRect = document.getElementById('selection-rect');
-
-        // Multi-selection state
-        this.multiSelectedObjects = [];
-
-        // Clipboard state (internal)
-        this.clipboard = null; // { type: 'object' | 'text', data: ... }
-
-        // System clipboard state
-        this.systemClipboard = null; // Content from system clipboard
-        this.pasteOverlayVisible = false;
-
-        // Undo/redo history
-        this.history = [];
-        this.historyIndex = -1;
-        this.maxHistorySize = 50;
-        this.isUndoRedoAction = false;
-
-        // Auto-save debounce
-        this.saveTimeout = null;
-
-        // Select all state
-        this.allSelected = false;
-        this.selectedObjects = [];
-
-        // Double command key tracking
-        this.lastRightCommandTime = 0;
-
-        this.init();
-    }
-
-    init() {
-        this.setupCanvas();
-        this.setupToolbar();
-        this.setupDrawing();
-        this.setupTextMode();
-        this.setupKeyboardShortcuts();
-        this.setupFocusHandling();
-        this.setupResize();
-        this.setupZoom();
-        this.setupContextMenu();
-        this.setupClipboardPaste();
-        this.setupSettings();
-        this.setupGestures();
-        this.setupFileDrop();
-
-        // Initialize with empty note if needed
-        if (this.notes.length === 0) {
-            this.notes.push(this.createEmptyNote());
-        }
-
-        // Load saved data
-        this.loadSavedData();
-
-        // Setup left edge resize
-        this.setupLeftResize();
-
-        // Setup pagination controls
-        this.setupPagination();
-
-        // Setup window toggle handler for clean slate
-        this.setupWindowToggleHandler();
-    }
-
-    // Note management - getters for current note's data
-    get lines() {
-        return this.notes[this.currentNoteIndex]?.lines || [];
-    }
-    set lines(value) {
-        if (this.notes[this.currentNoteIndex]) {
-            this.notes[this.currentNoteIndex].lines = value;
-        }
-    }
-
-    get textItems() {
-        return this.notes[this.currentNoteIndex]?.textItems || [];
-    }
-    set textItems(value) {
-        if (this.notes[this.currentNoteIndex]) {
-            this.notes[this.currentNoteIndex].textItems = value;
-        }
-    }
-
-    get images() {
-        return this.notes[this.currentNoteIndex]?.images || [];
-    }
-    set images(value) {
-        if (this.notes[this.currentNoteIndex]) {
-            this.notes[this.currentNoteIndex].images = value;
-        }
-    }
-
-    get attachments() {
-        return this.notes[this.currentNoteIndex]?.attachments || [];
-    }
-    set attachments(value) {
-        if (this.notes[this.currentNoteIndex]) {
-            this.notes[this.currentNoteIndex].attachments = value;
-        }
-    }
-
-    createEmptyNote() {
-        // Get viewport dimensions for origin calculation
-        const rect = this.canvas?.getBoundingClientRect() || { width: 800, height: 600 };
-        const zoom = this.zoomLevel || 1;
-        return {
-            id: Date.now().toString(),
-            lines: [],
-            textItems: [],
-            images: [],
-            attachments: [],
-            // Store the origin point in content-space (center of viewport when note was created)
-            originX: (rect.width / 2) / zoom,
-            originY: (rect.height / 2) / zoom,
-            createdAt: Date.now(),
-            lastModified: Date.now()
-        };
-    }
-
-    // Navigate to previous note
-    previousNote() {
-        if (this.currentNoteIndex > 0) {
-            this.saveCurrentNoteState();
-            this.currentNoteIndex--;
-            this.loadCurrentNote();
-            this.updateNoteIndicator();
-        }
-    }
-
-    // Navigate to next note or create new one
-    nextNote() {
-        this.saveCurrentNoteState();
-
-        if (this.currentNoteIndex < this.notes.length - 1) {
-            // Go to existing next note
-            this.currentNoteIndex++;
-        } else {
-            // Create new note
-            this.notes.push(this.createEmptyNote());
-            this.currentNoteIndex = this.notes.length - 1;
-        }
-
-        this.loadCurrentNote();
-        this.updateNoteIndicator();
-    }
-
-    // Save current note state before switching
-    saveCurrentNoteState() {
-        if (this.notes[this.currentNoteIndex]) {
-            this.notes[this.currentNoteIndex].lastModified = Date.now();
-        }
-        this.autoSave();
-    }
-
-    // Load and display current note
-    loadCurrentNote() {
-        // Clear current display
-        this.clearDisplay();
-
-        const note = this.notes[this.currentNoteIndex];
-        if (!note) return;
-
-        // Restore text items
-        note.textItems.forEach(item => {
-            this.restoreTextItem(item);
-        });
-
-        // Restore images
-        note.images.forEach(img => {
-            this.restoreImage(img);
-        });
-
-        // Redraw canvas with lines
-        this.redraw();
-
-        // Reset history for this note
-        this.history = [];
-        this.historyIndex = -1;
-        this.saveState();
-    }
-
-    // Clear the display without affecting note data
-    clearDisplay() {
-        this.textContainer.querySelectorAll('.text-item').forEach(el => el.remove());
-        this.textContainer.querySelectorAll('.pasted-image').forEach(el => el.remove());
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.selectedTextId = null;
-        this.selectedObjectId = null;
-        this.allSelected = false;
-    }
-
-    // Update note indicator in UI
-    updateNoteIndicator() {
-        // Update pagination counter
-        this.updatePaginationCounter();
-
-        // Show temporary indicator
-        let indicator = document.getElementById('note-indicator');
-        if (!indicator) {
-            indicator = document.createElement('div');
-            indicator.id = 'note-indicator';
-            this.app.appendChild(indicator);
-        }
-        indicator.textContent = `${this.currentNoteIndex + 1} / ${this.notes.length}`;
-        indicator.classList.add('visible');
-
-        // Hide after 1.5 seconds
-        clearTimeout(this.noteIndicatorTimeout);
-        this.noteIndicatorTimeout = setTimeout(() => {
-            indicator.classList.remove('visible');
-        }, 1500);
-    }
-
-    setupCanvas() {
-        const resize = () => {
-            const rect = this.canvas.parentElement.getBoundingClientRect();
-            const dpr = window.devicePixelRatio || 1;
-            this.canvas.width = rect.width * dpr;
-            this.canvas.height = rect.height * dpr;
-            this.canvas.style.width = rect.width + 'px';
-            this.canvas.style.height = rect.height + 'px';
-            this.ctx.scale(dpr, dpr);
-            this.redraw();
-        };
-
-        resize();
-        window.addEventListener('resize', resize);
-    }
-
-    setupToolbar() {
-        // Mode toggle
-        const selectModeBtn = document.getElementById('select-mode');
-        const drawModeBtn = document.getElementById('draw-mode');
-        const textModeBtn = document.getElementById('text-mode');
-
-        const setMode = (mode) => {
-            this.isSelectMode = mode === 'select';
-            this.isTextMode = mode === 'text';
-
-            // Update button states
-            selectModeBtn.classList.toggle('active', mode === 'select');
-            drawModeBtn.classList.toggle('active', mode === 'draw');
-            textModeBtn.classList.toggle('active', mode === 'text');
-
-            // Update canvas/text container interactions
-            if (mode === 'select') {
-                this.canvas.style.pointerEvents = 'auto';
-                this.canvas.style.cursor = 'default';
-                this.textContainer.style.pointerEvents = 'auto';
-                this.textContainer.style.cursor = 'default';
-            } else if (mode === 'draw') {
-                this.canvas.style.pointerEvents = 'auto';
-                this.canvas.style.cursor = 'crosshair';
-                this.textContainer.style.pointerEvents = 'none';
-                this.textContainer.style.cursor = 'default';
-            } else if (mode === 'text') {
-                this.canvas.style.pointerEvents = 'none';
-                this.textContainer.style.pointerEvents = 'auto';
-                this.textContainer.style.cursor = 'crosshair';
-            }
-        };
-
-        // Store setMode for keyboard shortcuts
-        this.setMode = setMode;
-
-        selectModeBtn.addEventListener('click', () => setMode('select'));
-        drawModeBtn.addEventListener('click', () => setMode('draw'));
-        textModeBtn.addEventListener('click', () => setMode('text'));
-
-        // Color picker dropdown
-        const colorBtns = document.querySelectorAll('.color-grid .color-btn');
-        const currentColorSwatch = document.querySelector('.current-color');
-        colorBtns.forEach(btn => {
-            btn.addEventListener('click', () => {
-                colorBtns.forEach(b => b.classList.remove('active'));
-                btn.classList.add('active');
-                this.currentColor = btn.dataset.color;
-                if (currentColorSwatch) {
-                    currentColorSwatch.style.background = btn.dataset.color;
-                }
-                // Update selected object's color
-                if (this.selectedObjectId) {
-                    this.changeObjectColor(this.selectedObjectId, btn.dataset.color);
-                }
-                // Update selected text item's color
-                if (this.selectedTextId) {
-                    this.changeTextColor(this.selectedTextId, btn.dataset.color);
-                }
-            });
-        });
-
-        // Stroke width dropdown
-        const strokeOptions = document.querySelectorAll('.stroke-option');
-        const currentStroke = document.querySelector('.current-stroke');
-        strokeOptions.forEach(btn => {
-            btn.addEventListener('click', () => {
-                strokeOptions.forEach(b => b.classList.remove('active'));
-                btn.classList.add('active');
-                this.currentStrokeWidth = parseInt(btn.dataset.width);
-                if (currentStroke) {
-                    const size = Math.min(16, 4 + parseInt(btn.dataset.width));
-                    currentStroke.style.width = size + 'px';
-                    currentStroke.style.height = size + 'px';
-                }
-            });
-        });
-
-        // Clear button
-        document.getElementById('clear-btn').addEventListener('click', () => {
-            this.clear();
-        });
-
-        // Background mode toggle
-        this.setupBackgroundToggle();
-
-        // Pin toggle
-        this.setupPinToggle();
-
-        // Size toggle
-        this.setupSizeToggle();
-
-        // Create zoom controls
-        this.createZoomControls();
-    }
-
-    setupPinToggle() {
-        const pinCheckbox = document.getElementById('pin-checkbox');
-        if (pinCheckbox) {
-            pinCheckbox.addEventListener('change', () => {
-                window.glassboard.setPinned(pinCheckbox.checked);
-                this.animatePinIcon();
-            });
-        }
-    }
-
-    togglePin() {
-        const pinCheckbox = document.getElementById('pin-checkbox');
-        if (pinCheckbox) {
-            pinCheckbox.checked = !pinCheckbox.checked;
-            window.glassboard.setPinned(pinCheckbox.checked);
-            this.animatePinIcon();
-        }
-    }
-
-    animatePinIcon() {
-        const pinToggle = document.querySelector('.pin-toggle');
-        if (pinToggle) {
-            pinToggle.classList.add('animate');
-            setTimeout(() => {
-                pinToggle.classList.remove('animate');
-            }, 400);
-        }
-    }
-
-    setupSizeToggle() {
-        const sizeItems = document.querySelectorAll('.dropdown-item[data-size]');
-        sizeItems.forEach(item => {
-            item.addEventListener('click', () => {
-                sizeItems.forEach(i => i.classList.remove('active'));
-                item.classList.add('active');
-                window.glassboard.setWindowSize(item.dataset.size);
-            });
-        });
-    }
-
-    updateSizeDropdown(size) {
-        const sizeItems = document.querySelectorAll('.dropdown-item[data-size]');
-        sizeItems.forEach(item => {
-            item.classList.toggle('active', item.dataset.size === size);
-        });
-    }
-
-    createZoomControls() {
-        const zoomControls = document.createElement('div');
-        zoomControls.id = 'zoom-controls';
-        zoomControls.innerHTML = `
-            <button class="zoom-btn" id="zoom-out" title="Zoom out (Cmd+-)">−</button>
-            <span id="zoom-indicator">100%</span>
-            <button class="zoom-btn" id="zoom-in" title="Zoom in (Cmd++)">+</button>
-            <button class="zoom-btn" id="zoom-reset" title="Reset view (Cmd+0)">⟲</button>
-        `;
-        this.app.appendChild(zoomControls);
-
-        document.getElementById('zoom-out').addEventListener('click', () => this.zoomOut());
-        document.getElementById('zoom-in').addEventListener('click', () => this.zoomIn());
-        document.getElementById('zoom-reset').addEventListener('click', () => this.resetTransform());
-    }
-
-    setupBackgroundToggle() {
-        const dropdownItems = document.querySelectorAll('.dropdown-item[data-bg]');
-
-        // Set initial background mode
-        this.app.classList.add('bg-transparent');
-        this.currentBgMode = 'transparent';
-
-        dropdownItems.forEach(item => {
-            item.addEventListener('click', () => {
-                // Update active state
-                dropdownItems.forEach(i => i.classList.remove('active'));
-                item.classList.add('active');
-
-                // Update background class
-                const bgMode = item.dataset.bg;
-                this.currentBgMode = bgMode;
-                this.app.classList.remove('bg-transparent', 'bg-blur', 'bg-dark');
-                this.app.classList.add(`bg-${bgMode}`);
-
-                // Tell main process to update vibrancy (for blur effect)
-                window.glassboard.setBackgroundMode(bgMode);
-            });
-        });
-    }
-
-    setupDrawing() {
-        const getPoint = (e) => {
-            const rect = this.canvas.getBoundingClientRect();
-            let x, y;
-            if (e.touches) {
-                x = e.touches[0].clientX - rect.left;
-                y = e.touches[0].clientY - rect.top;
-            } else {
-                x = e.clientX - rect.left;
-                y = e.clientY - rect.top;
-            }
-            // Clamp coordinates to canvas bounds and adjust for zoom
-            x = Math.max(0, Math.min(x, rect.width)) / this.zoomLevel;
-            y = Math.max(0, Math.min(y, rect.height)) / this.zoomLevel;
-            return { x, y };
-        };
-
-        const startDrawing = (e) => {
-            if (this.isTextMode) return;
-
-            const point = getPoint(e);
-
-            // Check if clicking on an existing stroke (for selection)
-            const clickedObjectId = this.findObjectAtPoint(point);
-            if (clickedObjectId) {
-                // Select the object
-                this.selectObject(clickedObjectId);
-                // Start dragging
-                this.isDraggingObject = true;
-                this.dragStartPoint = point;
-                return;
-            }
-
-            // Deselect if clicking empty space
-            this.deselectObject();
-            this.clearMultiSelection();
-
-            // In select mode, start drag-box selection
-            if (this.isSelectMode) {
-                this.isSelecting = true;
-                this.selectionStart = point;
-                this.selectionRect.style.left = point.x + 'px';
-                this.selectionRect.style.top = point.y + 'px';
-                this.selectionRect.style.width = '0px';
-                this.selectionRect.style.height = '0px';
-                this.selectionRect.classList.add('active');
-                return;
-            }
-
-            // Start new drawing (only in draw mode)
-            this.isDrawing = true;
-            this.app.classList.add('drawing');
-
-            // Determine object ID based on timing
-            const now = Date.now();
-            if (now - this.lastStrokeTime > this.objectGroupTimeout) {
-                this.currentObjectId = now.toString();
-            }
-            this.lastStrokeTime = now;
-
-            this.currentLine = {
-                points: [point],
-                color: this.currentColor,
-                width: this.currentStrokeWidth,
-                objectId: this.currentObjectId
-            };
-        };
-
-        const draw = (e) => {
-            if (this.isTextMode) return;
-            e.preventDefault();
-
-            const point = getPoint(e);
-
-            // Handle drag-box selection
-            if (this.isSelecting && this.selectionStart) {
-                const x = Math.min(point.x, this.selectionStart.x);
-                const y = Math.min(point.y, this.selectionStart.y);
-                const width = Math.abs(point.x - this.selectionStart.x);
-                const height = Math.abs(point.y - this.selectionStart.y);
-                this.selectionRect.style.left = x + 'px';
-                this.selectionRect.style.top = y + 'px';
-                this.selectionRect.style.width = width + 'px';
-                this.selectionRect.style.height = height + 'px';
-                return;
-            }
-
-            // Handle object dragging
-            if (this.isDraggingObject && this.selectedObjectId) {
-                const dx = point.x - this.dragStartPoint.x;
-                const dy = point.y - this.dragStartPoint.y;
-                this.moveObject(this.selectedObjectId, dx, dy);
-                this.dragStartPoint = point;
-                return;
-            }
-
-            if (!this.isDrawing) return;
-            this.currentLine.points.push(point);
-            this.redraw();
-        };
-
-        const stopDrawing = (e) => {
-            // Handle drag-box selection completion
-            if (this.isSelecting) {
-                this.isSelecting = false;
-                this.selectionRect.classList.remove('active');
-
-                if (this.selectionStart) {
-                    const point = e ? getPoint(e) : this.selectionStart;
-                    const rect = {
-                        x: Math.min(point.x, this.selectionStart.x),
-                        y: Math.min(point.y, this.selectionStart.y),
-                        width: Math.abs(point.x - this.selectionStart.x),
-                        height: Math.abs(point.y - this.selectionStart.y)
-                    };
-                    this.selectObjectsInRect(rect);
-                }
-                this.selectionStart = null;
-                return;
-            }
-
-            if (this.isDraggingObject) {
-                this.isDraggingObject = false;
-                this.dragStartPoint = null;
-                this.saveState(); // Save after dragging object
-                return;
-            }
-
-            if (!this.isDrawing) return;
-            this.isDrawing = false;
-            this.app.classList.remove('drawing');
-            if (this.currentLine && this.currentLine.points.length > 1) {
-                this.lines.push(this.currentLine);
-                this.saveState(); // Save after drawing
-            }
-            this.currentLine = null;
-        };
-
-        // Mouse events - use document for move/up to continue drawing over other elements
-        this.canvas.addEventListener('mousedown', startDrawing);
-        document.addEventListener('mousemove', draw);
-        document.addEventListener('mouseup', stopDrawing);
-
-        // Touch events - use document for move/end to continue drawing over other elements
-        this.canvas.addEventListener('touchstart', startDrawing, { passive: false });
-        document.addEventListener('touchmove', draw, { passive: false });
-        document.addEventListener('touchend', stopDrawing);
-    }
-
-    // Find which object (if any) is at the given point
-    findObjectAtPoint(point) {
-        const hitRadius = 10; // pixels tolerance for clicking
-        for (let i = this.lines.length - 1; i >= 0; i--) {
-            const line = this.lines[i];
-            for (const p of line.points) {
-                const dist = Math.sqrt((p.x - point.x) ** 2 + (p.y - point.y) ** 2);
-                if (dist < hitRadius + line.width / 2) {
-                    return line.objectId;
-                }
-            }
-        }
-        return null;
-    }
-
-    // Select all strokes belonging to an object
-    selectObject(objectId) {
-        this.selectedObjectId = objectId;
-        this.redraw();
-    }
-
-    // Deselect current object
-    deselectObject() {
-        this.selectedObjectId = null;
-        this.redraw();
-    }
-
-    // Move all strokes of an object by dx, dy
-    moveObject(objectId, dx, dy) {
-        this.lines.forEach(line => {
-            if (line.objectId === objectId) {
-                line.points.forEach(p => {
-                    p.x += dx;
-                    p.y += dy;
-                });
-            }
-        });
-        this.redraw();
-    }
-
-    // Delete all strokes of an object
-    deleteObject(objectId) {
-        this.lines = this.lines.filter(line => line.objectId !== objectId);
-        if (this.selectedObjectId === objectId) {
-            this.selectedObjectId = null;
-        }
-        this.redraw();
-        this.saveState();
-    }
-
-    // Select all objects within a rectangle
-    selectObjectsInRect(rect) {
-        const selectedIds = new Set();
-
-        // Find all objects with points inside the rectangle
-        this.lines.forEach(line => {
-            for (const p of line.points) {
-                if (p.x >= rect.x && p.x <= rect.x + rect.width &&
-                    p.y >= rect.y && p.y <= rect.y + rect.height) {
-                    selectedIds.add(line.objectId);
-                    break;
-                }
-            }
-        });
-
-        this.multiSelectedObjects = Array.from(selectedIds);
-
-        // If only one object, use single selection
-        if (this.multiSelectedObjects.length === 1) {
-            this.selectObject(this.multiSelectedObjects[0]);
-            this.multiSelectedObjects = [];
-        } else if (this.multiSelectedObjects.length > 1) {
-            this.redraw();
-        }
-    }
-
-    // Clear multi-selection
-    clearMultiSelection() {
-        this.multiSelectedObjects = [];
-        this.redraw();
-    }
-
-    // Check if object is in multi-selection
-    isObjectMultiSelected(objectId) {
-        return this.multiSelectedObjects.includes(objectId);
-    }
-
-    // Setup pagination controls
-    setupPagination() {
-        const prevBtn = document.getElementById('prev-note');
-        const nextBtn = document.getElementById('next-note');
-        const newNoteBtn = document.getElementById('new-note');
-        const counter = document.getElementById('note-counter');
-
-        if (prevBtn) {
-            prevBtn.addEventListener('click', () => this.previousNote());
-        }
-        if (nextBtn) {
-            nextBtn.addEventListener('click', () => this.nextNote());
-        }
-        if (newNoteBtn) {
-            newNoteBtn.addEventListener('click', () => this.createNewNoteAndSwitch());
-        }
-
-        // Update counter display
-        this.updatePaginationCounter();
-    }
-
-    // Create a new note and switch to it
-    createNewNoteAndSwitch() {
-        this.saveCurrentNoteState();
-        this.notes.push(this.createEmptyNote());
-        this.currentNoteIndex = this.notes.length - 1;
-        this.loadCurrentNote();
-        this.updateNoteIndicator();
-        this.updatePaginationCounter();
-    }
-
-    // Update pagination counter display
-    updatePaginationCounter() {
-        const counter = document.getElementById('note-counter');
-        if (counter) {
-            counter.textContent = `${this.currentNoteIndex + 1}/${this.notes.length}`;
-        }
-
-        // Update button states
-        const prevBtn = document.getElementById('prev-note');
-        const nextBtn = document.getElementById('next-note');
-        if (prevBtn) {
-            prevBtn.disabled = this.currentNoteIndex === 0;
-        }
-        if (nextBtn) {
-            nextBtn.disabled = false; // Always enabled (creates new note)
-        }
-    }
-
-    // Handle window toggle for clean slate mode
-    setupWindowToggleHandler() {
-        if (window.glassboard?.onWindowToggledOpen) {
-            window.glassboard.onWindowToggledOpen(() => {
-                this.handleWindowToggledOpen();
-            });
-        }
-    }
-
-    handleWindowToggledOpen() {
-        // Only activate clean slate behavior if setting is enabled
-        if (!this.settings.openWithCleanSlate) {
-            return;
-        }
-
-        // Create a new blank note
-        this.notes.push(this.createEmptyNote());
-        this.currentNoteIndex = this.notes.length - 1;
-        this.updatePaginationCounter();
-        this.redraw();
-
-        // Switch to text mode
-        this.setMode('text');
-
-        // Create a text item at top-left (under window controls)
-        // Position: x=20 (left margin), y=50 (below toolbar)
-        const x = 20;
-        const y = 50;
-        this.createTextItem(x, y);
-
-        // Save state
-        this.saveState();
-    }
-
-    // Change color of all strokes in an object
-    changeObjectColor(objectId, color) {
-        this.lines.forEach(line => {
-            if (line.objectId === objectId) {
-                line.color = color;
-            }
-        });
-        this.redraw();
-    }
-
-    // Change color of a text item
-    changeTextColor(textId, color) {
-        const textItem = this.textItems.find(t => t.id === textId);
-        if (textItem) {
-            textItem.color = color;
-        }
-        const element = this.textContainer.querySelector(`[data-id="${textId}"]`);
-        if (element) {
-            element.style.color = color;
-            const editor = element.querySelector('.text-input');
-            if (editor) {
-                editor.style.color = color;
-            }
-        }
-    }
-
-    // Copy selected object to clipboard
-    copyObject(objectId) {
-        const objectLines = this.lines.filter(line => line.objectId === objectId);
-        if (objectLines.length === 0) return;
-
-        // Deep copy the lines
-        const copiedLines = objectLines.map(line => ({
-            points: line.points.map(p => ({ x: p.x, y: p.y })),
-            color: line.color,
-            width: line.width
-        }));
-
-        this.clipboard = {
-            type: 'object',
-            data: copiedLines
-        };
-    }
-
-    // Copy selected text item to clipboard
-    copyTextItem(textId) {
-        const textItem = this.textItems.find(t => t.id === textId);
-        if (!textItem) return;
-
-        const element = this.textContainer.querySelector(`[data-id="${textId}"]`);
-        const editor = element?.querySelector('.text-input');
-
-        this.clipboard = {
-            type: 'text',
-            data: {
-                content: editor?.innerHTML || textItem.content || '',
-                color: textItem.color
-            }
-        };
-    }
-
-    // Paste from clipboard
-    paste() {
-        if (!this.clipboard) return;
-
-        const pasteOffset = 20; // Offset for pasted items
-
-        if (this.clipboard.type === 'object') {
-            // Create new object ID for pasted object
-            const newObjectId = Date.now().toString();
-
-            // Calculate bounding box to find offset
-            let minX = Infinity, minY = Infinity;
-            this.clipboard.data.forEach(line => {
-                line.points.forEach(p => {
-                    minX = Math.min(minX, p.x);
-                    minY = Math.min(minY, p.y);
-                });
-            });
-
-            // Add lines with new objectId and offset
-            this.clipboard.data.forEach(line => {
-                this.lines.push({
-                    points: line.points.map(p => ({
-                        x: p.x + pasteOffset,
-                        y: p.y + pasteOffset
-                    })),
-                    color: line.color,
-                    width: line.width,
-                    objectId: newObjectId
-                });
-            });
-
-            // Select the pasted object
-            this.selectedObjectId = newObjectId;
-            this.redraw();
-
-        } else if (this.clipboard.type === 'text') {
-            // Get center of viewport for paste location
-            const rect = this.textContainer.getBoundingClientRect();
-            const x = rect.width / 2 / this.zoomLevel;
-            const y = rect.height / 2 / this.zoomLevel;
-
-            // Create new text item
-            const id = Date.now().toString();
-            const item = document.createElement('div');
-            item.className = 'text-item selected';
-            item.dataset.id = id;
-            item.style.left = (x + pasteOffset) + 'px';
-            item.style.top = (y + pasteOffset) + 'px';
-            item.style.color = this.clipboard.data.color;
-            // Apply counter-scale so text doesn't zoom
-            item.style.transform = `scale(${1 / this.zoomLevel})`;
-            item.style.transformOrigin = 'top left';
-
-            // Add drag handle
-            const dragHandle = document.createElement('div');
-            dragHandle.className = 'text-drag-handle';
-            dragHandle.innerHTML = `
-                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-                    <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>
-                </svg>
-            `;
-            dragHandle.title = 'Drag to move';
-
-            // Add format bar
-            const formatBar = document.createElement('div');
-            formatBar.className = 'text-format-bar';
-            formatBar.innerHTML = `
-                <button class="format-btn" data-format="bold" title="Bold">B</button>
-                <button class="format-btn" data-format="italic" title="Italic">I</button>
-                <button class="format-btn" data-format="underline" title="Underline">U</button>
-                <button class="format-btn delete-btn" title="Delete">✕</button>
-            `;
-
-            // Create contentEditable div
-            const editor = document.createElement('div');
-            editor.className = 'text-input';
-            editor.contentEditable = 'true';
-            // Support both old 'text' and new 'content' formats
-            editor.innerHTML = this.clipboard.data.content || this.clipboard.data.text || '';
-            editor.style.color = this.clipboard.data.color;
-
-            // Add resize handle
-            const resizeHandle = document.createElement('div');
-            resizeHandle.className = 'text-resize-handle';
-
-            item.appendChild(dragHandle);
-            item.appendChild(formatBar);
-            item.appendChild(editor);
-            item.appendChild(resizeHandle);
-            this.textContainer.appendChild(item);
-
-            this.textItems.push({
-                id,
-                x: x + pasteOffset,
-                y: y + pasteOffset,
-                content: this.clipboard.data.content || this.clipboard.data.text || '',
-                color: this.clipboard.data.color
-            });
-
-            // Setup event handlers for the new text item
-            this.setupPastedTextItem(item, id, editor, formatBar);
-
-            // Select the pasted item
-            this.deselectAllText();
-            this.selectedTextId = id;
-            editor.focus();
-        }
-    }
-
-    // Setup event handlers for a pasted/restored text item
-    setupPastedTextItem(item, id, editor, formatBar) {
-        // Handle input changes
-        editor.addEventListener('input', () => {
-            const textItem = this.textItems.find(t => t.id === id);
-            if (textItem) {
-                textItem.content = editor.innerHTML;
-            }
-        });
-
-        // Handle delete on empty backspace and rich text shortcuts
-        editor.addEventListener('keydown', (e) => {
-            if (e.key === 'Backspace' && editor.textContent.trim() === '') {
-                e.preventDefault();
-                this.deleteTextItem(id);
-            }
-            // Rich text keyboard shortcuts
-            if (e.metaKey && !e.shiftKey) {
-                if (e.key === 'b') {
-                    e.preventDefault();
-                    document.execCommand('bold', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                } else if (e.key === 'i') {
-                    e.preventDefault();
-                    document.execCommand('italic', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                } else if (e.key === 'u') {
-                    e.preventDefault();
-                    document.execCommand('underline', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                }
-            }
-        });
-
-        // Format button handlers - use execCommand for selection-based formatting
-        formatBar.querySelectorAll('.format-btn[data-format]').forEach(btn => {
-            btn.addEventListener('mousedown', (e) => {
-                e.preventDefault();
-                const format = btn.dataset.format;
-                document.execCommand(format, false, null);
-                this.updateFormatButtonStates(formatBar);
-            });
-        });
-
-        // Delete button handler
-        formatBar.querySelector('.delete-btn').addEventListener('mousedown', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.deleteTextItem(id);
-        });
-
-        // Delete empty text item when clicking away
-        editor.addEventListener('blur', () => {
-            setTimeout(() => {
-                if (editor.textContent.trim() === '') {
-                    this.deleteTextItem(id);
-                }
-            }, 100);
-        });
-
-        // Update format button states when selection changes
-        editor.addEventListener('mouseup', () => this.updateFormatButtonStates(formatBar));
-        editor.addEventListener('keyup', () => this.updateFormatButtonStates(formatBar));
-
-        // Add resize handle if not already present
-        let resizeHandle = item.querySelector('.text-resize-handle');
-        if (!resizeHandle) {
-            resizeHandle = document.createElement('div');
-            resizeHandle.className = 'text-resize-handle';
-            item.appendChild(resizeHandle);
-        }
-
-        // Setup drag and resize
-        this.setupTextItemDrag(item, id);
-        this.setupTextResize(item, id, resizeHandle);
-
-        // Select on click
-        item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.selectTextItem(id);
-        });
-    }
-
-    setupTextMode() {
-        this.textContainer.addEventListener('click', (e) => {
-            if (!this.isTextMode) return;
-            if (e.target !== this.textContainer) return;
-
-            const rect = this.textContainer.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-
-            this.createTextItem(x, y);
-        });
-
-        // Deselect on click outside (only in draw mode)
-        document.addEventListener('click', (e) => {
-            if (this.isTextMode) return;
-            if (!e.target.closest('.text-item') && !e.target.closest('#toolbar')) {
-                this.deselectAllText();
-            }
-        });
-    }
-
-    createTextItem(x, y) {
-        const id = Date.now().toString();
-        const item = document.createElement('div');
-        item.className = 'text-item selected';
-        item.dataset.id = id;
-        item.style.left = x + 'px';
-        item.style.top = y + 'px';
-        item.style.color = this.currentColor;
-        // Apply counter-scale so text doesn't zoom
-        item.style.transform = `scale(${1 / this.zoomLevel})`;
-        item.style.transformOrigin = 'top left';
-
-        // Add drag handle with move icon
-        const dragHandle = document.createElement('div');
-        dragHandle.className = 'text-drag-handle';
-        dragHandle.innerHTML = `
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-                <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>
-            </svg>
-        `;
-        dragHandle.title = 'Drag to move';
-
-        // Inline formatting toolbar
-        const formatBar = document.createElement('div');
-        formatBar.className = 'text-format-bar';
-        formatBar.innerHTML = `
-            <button class="format-btn" data-format="bold" title="Bold">B</button>
-            <button class="format-btn" data-format="italic" title="Italic">I</button>
-            <button class="format-btn" data-format="underline" title="Underline">U</button>
-            <button class="format-btn delete-btn" title="Delete">✕</button>
-        `;
-
-        // Use contentEditable div for rich text support
-        const editor = document.createElement('div');
-        editor.className = 'text-input';
-        editor.contentEditable = 'true';
-        editor.dataset.placeholder = 'Type here...';
-        editor.style.color = this.currentColor;
-
-        // Add resize handle
-        const resizeHandle = document.createElement('div');
-        resizeHandle.className = 'text-resize-handle';
-
-        item.appendChild(dragHandle);
-        item.appendChild(formatBar);
-        item.appendChild(editor);
-        item.appendChild(resizeHandle);
-        this.textContainer.appendChild(item);
-
-        this.textItems.push({ id, x, y, content: '', color: this.currentColor });
-        this.selectedTextId = id;
-
-        // Focus editor
-        editor.focus();
-
-        // Handle input changes
-        editor.addEventListener('input', () => {
-            const textItem = this.textItems.find(t => t.id === id);
-            if (textItem) {
-                textItem.content = editor.innerHTML;
-            }
-        });
-
-        // Handle delete on empty backspace
-        editor.addEventListener('keydown', (e) => {
-            if (e.key === 'Backspace' && editor.textContent.trim() === '') {
-                e.preventDefault();
-                this.deleteTextItem(id);
-            }
-            // Rich text keyboard shortcuts
-            if (e.metaKey && !e.shiftKey) {
-                if (e.key === 'b') {
-                    e.preventDefault();
-                    document.execCommand('bold', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                } else if (e.key === 'i') {
-                    e.preventDefault();
-                    document.execCommand('italic', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                } else if (e.key === 'u') {
-                    e.preventDefault();
-                    document.execCommand('underline', false, null);
-                    this.updateFormatButtonStates(formatBar);
-                }
-            }
-        });
-
-        // Format button handlers - use execCommand for selection-based formatting
-        formatBar.querySelectorAll('.format-btn[data-format]').forEach(btn => {
-            btn.addEventListener('mousedown', (e) => {
-                e.preventDefault(); // Prevent focus loss
-                const format = btn.dataset.format;
-                document.execCommand(format, false, null);
-                this.updateFormatButtonStates(formatBar);
-            });
-        });
-
-        // Delete button handler
-        formatBar.querySelector('.delete-btn').addEventListener('mousedown', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.deleteTextItem(id);
-        });
-
-        // Delete empty text item when clicking away
-        editor.addEventListener('blur', () => {
-            setTimeout(() => {
-                if (editor.textContent.trim() === '') {
-                    this.deleteTextItem(id);
-                }
-            }, 100); // Small delay to allow format button clicks
-        });
-
-        // Update format button states when selection changes
-        editor.addEventListener('mouseup', () => this.updateFormatButtonStates(formatBar));
-        editor.addEventListener('keyup', () => this.updateFormatButtonStates(formatBar));
-
-        // Setup drag and resize
-        this.setupTextItemDrag(item, id);
-        this.setupTextResize(item, id, resizeHandle);
-
-        // Select on click
-        item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.selectTextItem(id);
-        });
-    }
-
-    updateFormatButtonStates(formatBar) {
-        // Update format button active states based on current selection
-        const boldBtn = formatBar.querySelector('[data-format="bold"]');
-        const italicBtn = formatBar.querySelector('[data-format="italic"]');
-        const underlineBtn = formatBar.querySelector('[data-format="underline"]');
-
-        if (boldBtn) {
-            boldBtn.classList.toggle('active', document.queryCommandState('bold'));
-        }
-        if (italicBtn) {
-            italicBtn.classList.toggle('active', document.queryCommandState('italic'));
-        }
-        if (underlineBtn) {
-            underlineBtn.classList.toggle('active', document.queryCommandState('underline'));
-        }
-    }
-
-    setupTextItemDrag(element, id) {
-        let isDragging = false;
-        let startX, startY, origX, origY;
-
-        const startDrag = (e) => {
-            // Don't drag from text editor, format buttons, or resize handle
-            if (e.target.closest('.text-input') || e.target.closest('.format-btn') || e.target.closest('.text-resize-handle')) return;
-            e.preventDefault();
-            isDragging = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            origX = parseInt(element.style.left) || 0;
-            origY = parseInt(element.style.top) || 0;
-            element.style.cursor = 'grabbing';
-            element.classList.add('dragging');
-        };
-
-        const drag = (e) => {
-            if (!isDragging) return;
-            const dx = e.clientX - startX;
-            const dy = e.clientY - startY;
-            element.style.left = (origX + dx) + 'px';
-            element.style.top = (origY + dy) + 'px';
-
-            const textItem = this.textItems.find(t => t.id === id);
-            if (textItem) {
-                textItem.x = origX + dx;
-                textItem.y = origY + dy;
-            }
-        };
-
-        const stopDrag = () => {
-            if (isDragging) {
-                isDragging = false;
-                element.style.cursor = 'grab';
-                element.classList.remove('dragging');
-            }
-        };
-
-        element.addEventListener('mousedown', startDrag);
-        document.addEventListener('mousemove', drag);
-        document.addEventListener('mouseup', stopDrag);
-    }
-
-    setupTextResize(element, id, handle) {
-        let isResizing = false;
-        let startX, startY, initialWidth, initialHeight;
-
-        handle.addEventListener('mousedown', (e) => {
-            isResizing = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            initialWidth = element.offsetWidth;
-            initialHeight = element.offsetHeight;
-            element.classList.add('resizing');
-            e.preventDefault();
-            e.stopPropagation();
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isResizing) return;
-
-            const dx = (e.clientX - startX) / this.zoomLevel;
-            const dy = (e.clientY - startY) / this.zoomLevel;
-
-            // Allow independent width/height resize
-            const newWidth = Math.max(100, initialWidth + dx);
-            const newHeight = Math.max(40, initialHeight + dy);
-
-            element.style.width = newWidth + 'px';
-            element.style.minHeight = newHeight + 'px';
-
-            // Update editor width to match
-            const editor = element.querySelector('.text-input');
-            if (editor) {
-                editor.style.width = '100%';
-            }
-        });
-
-        document.addEventListener('mouseup', () => {
-            if (isResizing) {
-                isResizing = false;
-                element.classList.remove('resizing');
-
-                // Update stored dimensions
-                const textItem = this.textItems.find(t => t.id === id);
-                if (textItem) {
-                    textItem.width = element.offsetWidth;
-                    textItem.height = element.offsetHeight;
-                }
-            }
-        });
-    }
-
-    selectTextItem(id) {
-        this.deselectAllText();
-        this.selectedTextId = id;
-        const element = this.textContainer.querySelector(`[data-id="${id}"]`);
-        if (element) {
-            element.classList.add('selected');
-            const editor = element.querySelector('.text-input');
-            if (editor) {
-                editor.focus();
-            }
-        }
-    }
-
-    deselectAllText() {
-        this.selectedTextId = null;
-        this.textContainer.querySelectorAll('.text-item').forEach(item => {
-            item.classList.remove('selected');
-        });
-    }
-
-    deleteTextItem(id) {
-        const element = this.textContainer.querySelector(`[data-id="${id}"]`);
-        if (element) {
-            element.remove();
-        }
-        this.textItems = this.textItems.filter(t => t.id !== id);
-        if (this.selectedTextId === id) {
-            this.selectedTextId = null;
-        }
-        this.saveState();
-    }
-
-    setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-            // Check if we're in a text input
-            const isInTextInput = e.target.closest('.text-input');
-
-            // Cmd+N - do nothing (prevent default new window behavior)
-            if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
-                e.preventDefault();
-                return;
-            }
-
-            // Cmd+W to close window
-            if ((e.metaKey || e.ctrlKey) && e.key === 'w') {
-                e.preventDefault();
-                window.glassboard.closeWindow();
-                return;
-            }
-
-            // Cmd+S to export as PNG
-            if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-                e.preventDefault();
-                this.exportAsPNG();
-                return;
-            }
-
-            // Cmd+, to open settings
-            if ((e.metaKey || e.ctrlKey) && e.key === ',') {
-                e.preventDefault();
-                this.toggleSettings();
-                return;
-            }
-
-            // Cmd+P to toggle pin
-            if ((e.metaKey || e.ctrlKey) && e.key === 'p') {
-                e.preventDefault();
-                this.togglePin();
-                return;
-            }
-
-            // Cmd+Z to undo
-            if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
-                if (isInTextInput) return; // Let native undo handle it
-                e.preventDefault();
-                this.undo();
-                return;
-            }
-
-            // Cmd+Shift+Z or Cmd+Y to redo
-            if ((e.metaKey || e.ctrlKey) && (e.key === 'z' && e.shiftKey || e.key === 'y')) {
-                if (isInTextInput) return; // Let native redo handle it
-                e.preventDefault();
-                this.redo();
-                return;
-            }
-
-            // Cmd+C to copy
-            if ((e.metaKey || e.ctrlKey) && e.key === 'c') {
-                // Allow native copy in text inputs with selected text
-                if (isInTextInput && window.getSelection().toString()) {
-                    return; // Let native copy handle it
-                }
-                // Copy selected object or text item
-                if (this.selectedObjectId) {
-                    e.preventDefault();
-                    this.copyObject(this.selectedObjectId);
-                    return;
-                }
-                if (this.selectedTextId && !isInTextInput) {
-                    e.preventDefault();
-                    this.copyTextItem(this.selectedTextId);
-                    return;
-                }
-            }
-
-            // Cmd+V to smart paste
-            if ((e.metaKey || e.ctrlKey) && e.key === 'v') {
-                // Allow native paste in text inputs
-                if (isInTextInput) {
-                    return; // Let native paste handle it
-                }
-                e.preventDefault();
-                this.smartPaste();
-                return;
-            }
-
-            // Cmd+A to select all
-            if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
-                if (isInTextInput) return; // Let native select all handle it
-                e.preventDefault();
-                this.selectAll();
-                return;
-            }
-
-            // 'd' or Delete/Backspace to delete selected object or all selected
-            if ((e.key === 'd' || e.key === 'Delete' || e.key === 'Backspace') && !isInTextInput) {
-                // If all selected (after Cmd+A), delete everything
-                if (this.allSelected) {
-                    e.preventDefault();
-                    this.deleteAllSelected();
-                    return;
-                }
-                // Otherwise delete single selected object
-                if (this.selectedObjectId) {
-                    e.preventDefault();
-                    this.deleteObject(this.selectedObjectId);
-                    return;
-                }
-                // Or delete selected text item
-                if (this.selectedTextId) {
-                    e.preventDefault();
-                    this.deleteTextItem(this.selectedTextId);
-                    return;
-                }
-            }
-
-            // Cmd+Plus to zoom in
-            if ((e.metaKey || e.ctrlKey) && (e.key === '=' || e.key === '+')) {
-                e.preventDefault();
-                this.zoomIn();
-                return;
-            }
-
-            // Cmd+Minus to zoom out
-            if ((e.metaKey || e.ctrlKey) && e.key === '-') {
-                e.preventDefault();
-                this.zoomOut();
-                return;
-            }
-
-            // Cmd+0 to reset view (zoom, pan, rotation)
-            if ((e.metaKey || e.ctrlKey) && e.key === '0') {
-                e.preventDefault();
-                this.resetTransform();
-                return;
-            }
-
-            // Escape to deselect
-            if (e.key === 'Escape') {
-                this.deselectObject();
-                this.deselectAllText();
-            }
-
-            // Note navigation (only when not in text input)
-            if (!isInTextInput) {
-                // [ or ArrowLeft to go to previous note
-                if (e.key === '[' || e.key === 'ArrowLeft') {
-                    e.preventDefault();
-                    this.previousNote();
-                    return;
-                }
-
-                // ] or ArrowRight to go to next note or create new one
-                if (e.key === ']' || e.key === 'ArrowRight') {
-                    e.preventDefault();
-                    this.nextNote();
-                    return;
-                }
-            }
-
-            // Mode shortcuts (only when not in text input)
-            if (!isInTextInput) {
-                if (e.key === 'v' || e.key === 'V') {
-                    this.setMode('select');
-                    return;
-                }
-                if (e.key === 'b' || e.key === 'B') {
-                    this.setMode('draw');
-                    return;
-                }
-                if (e.key === 't' || e.key === 'T') {
-                    this.setMode('text');
-                    return;
-                }
-                // Size shortcuts: Cmd+1=sm, Cmd+2=md, Cmd+3=lg
-                if (e.metaKey && e.key === '1') {
-                    e.preventDefault();
-                    window.glassboard.setWindowSize('sm');
-                    this.updateSizeDropdown('sm');
-                    return;
-                }
-                if (e.metaKey && e.key === '2') {
-                    e.preventDefault();
-                    window.glassboard.setWindowSize('md');
-                    this.updateSizeDropdown('md');
-                    return;
-                }
-                if (e.metaKey && e.key === '3') {
-                    e.preventDefault();
-                    window.glassboard.setWindowSize('lg');
-                    this.updateSizeDropdown('lg');
-                    return;
-                }
-                // N for new note
-                if (e.key === 'n' || e.key === 'N') {
-                    this.createNewNoteAndSwitch();
-                    return;
-                }
-            }
-
-            // Double right Command key to toggle (hide) Glassboard
-            if (e.code === 'MetaRight' && !e.repeat) {
-                const now = Date.now();
-                if (now - this.lastRightCommandTime < 300) {
-                    // Double tap detected - hide the window
-                    window.glassboard.hideWindow();
-                    this.lastRightCommandTime = 0;
-                } else {
-                    this.lastRightCommandTime = now;
-                }
-            }
-        });
-    }
-
-    setupFocusHandling() {
-        window.glassboard.onFocusChange((focused) => {
-            if (focused) {
-                this.app.classList.add('focused');
-            } else {
-                this.app.classList.remove('focused');
-                // Deselect all text items when window loses focus
-                this.deselectAllText();
-            }
-            // Apply background modes via CSS classes
-            this.applyBackgroundModes();
-            // Apply appropriate opacity
-            this.applyBackgroundOpacity();
-            // Update native vibrancy based on current mode
-            const currentMode = focused
-                ? this.settings.activeBgMode
-                : this.settings.inactiveBgMode;
-            window.glassboard.setBackgroundMode(currentMode || 'transparent');
-        });
-    }
-
-    applyBackgroundModes() {
-        // Remove all background classes first
-        this.app.classList.remove('bg-transparent', 'bg-blur', 'bg-dark');
-        this.app.classList.remove('inactive-bg-transparent', 'inactive-bg-blur', 'inactive-bg-dark');
-
-        // Apply active background class
-        const activeMode = this.settings.activeBgMode || 'transparent';
-        this.app.classList.add(`bg-${activeMode}`);
-
-        // Apply inactive background class
-        const inactiveMode = this.settings.inactiveBgMode || 'transparent';
-        this.app.classList.add(`inactive-bg-${inactiveMode}`);
-    }
-
-    setupResize() {
-        // Add resize handles to window (corners and edges)
-        const handles = ['se', 'sw', 'ne', 'nw', 'n', 's', 'e', 'w'];
-        handles.forEach(pos => {
-            const handle = document.createElement('div');
-            handle.className = `resize-handle ${pos}`;
-            this.app.appendChild(handle);
-
-            // Add resizing class when dragging resize handles
-            handle.addEventListener('mousedown', () => {
-                this.app.classList.add('resizing');
-            });
-        });
-
-        // Remove resizing class when mouse is released anywhere
-        document.addEventListener('mouseup', () => {
-            this.app.classList.remove('resizing');
-        });
-
-        // Also detect native window resize events for yellow border
-        let resizeTimeout;
-        window.addEventListener('resize', () => {
-            this.app.classList.add('resizing');
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                this.app.classList.remove('resizing');
-            }, 200);
-        });
-    }
-
-    setupZoom() {
-        // Zoom is now handled in setupGestures for trackpad support
-        // This method is kept for future zoom-related setup
-    }
-
-    zoomIn() {
-        this.zoomLevel = Math.min(this.maxZoom, this.zoomLevel + 0.25);
-        this.applyZoom();
-    }
-
-    zoomOut() {
-        this.zoomLevel = Math.max(this.minZoom, this.zoomLevel - 0.25);
-        this.applyZoom();
-    }
-
-    resetZoom() {
-        this.zoomLevel = 1;
-        this.applyZoom();
-    }
-
-    applyZoom() {
-        this.applyTransform();
-    }
-
-    applyTransform() {
-        // Build transform string with translate, scale, and rotate
-        const transform = `translate(${this.panX}px, ${this.panY}px) scale(${this.zoomLevel}) rotate(${this.rotation}deg)`;
-        this.canvas.style.transform = transform;
-        this.canvas.style.transformOrigin = 'center center';
-        this.textContainer.style.transform = transform;
-        this.textContainer.style.transformOrigin = 'center center';
-
-        // Counter-scale text items so they maintain visual size
-        // Text items should move with pan/zoom but not change visual size
-        const counterScale = 1 / this.zoomLevel;
-        this.textContainer.querySelectorAll('.text-item').forEach(item => {
-            item.style.transform = `scale(${counterScale})`;
-            item.style.transformOrigin = 'top left';
-        });
-
-        // Update zoom indicator if exists
-        const zoomIndicator = document.getElementById('zoom-indicator');
-        if (zoomIndicator) {
-            zoomIndicator.textContent = `${Math.round(this.zoomLevel * 100)}%`;
-        }
-    }
-
-    resetTransform() {
-        this.zoomLevel = 1;
-        this.panX = 0;
-        this.panY = 0;
-        this.rotation = 0;
-        this.applyTransform();
-    }
-
-    setupContextMenu() {
-        this.canvas.addEventListener('contextmenu', (e) => {
-            e.preventDefault();
-
-            const rect = this.canvas.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / this.zoomLevel;
-            const y = (e.clientY - rect.top) / this.zoomLevel;
-
-            const clickedObjectId = this.findObjectAtPoint({ x, y });
-            if (clickedObjectId) {
-                this.selectObject(clickedObjectId);
-                this.showContextMenu(e.clientX, e.clientY, 'object');
-            } else {
-                // Show general context menu for empty area
-                this.showContextMenu(e.clientX, e.clientY, 'general');
-            }
-        });
-
-        // Hide context menu on click elsewhere
-        document.addEventListener('click', () => {
-            this.hideContextMenu();
-        });
-    }
-
-    showContextMenu(x, y, type = 'object') {
-        let menu = document.getElementById('context-menu');
-        if (menu) {
-            menu.remove();
-        }
-
-        menu = document.createElement('div');
-        menu.id = 'context-menu';
-
-        if (type === 'general') {
-            // General context menu for empty area
-            menu.innerHTML = `
-                <button class="context-menu-item" data-action="zoom-in">
-                    <span>Zoom In</span>
-                    <span class="shortcut">⌘+</span>
-                </button>
-                <button class="context-menu-item" data-action="zoom-out">
-                    <span>Zoom Out</span>
-                    <span class="shortcut">⌘-</span>
-                </button>
-                <button class="context-menu-item" data-action="reset-zoom">
-                    <span>Reset View</span>
-                    <span class="shortcut">⌘0</span>
-                </button>
-                <div class="context-menu-divider"></div>
-                <button class="context-menu-item" data-action="paste">
-                    <span>Paste</span>
-                    <span class="shortcut">⌘V</span>
-                </button>
-                <div class="context-menu-divider"></div>
-                <button class="context-menu-item" data-action="settings">
-                    <span>Settings</span>
-                    <span class="shortcut">⌘,</span>
-                </button>
-            `;
-
-            menu.querySelector('[data-action="zoom-in"]').addEventListener('click', () => {
-                this.zoomIn();
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="zoom-out"]').addEventListener('click', () => {
-                this.zoomOut();
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="reset-zoom"]').addEventListener('click', () => {
-                this.resetTransform();
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="paste"]').addEventListener('click', () => {
-                this.paste();
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="settings"]').addEventListener('click', () => {
-                this.toggleSettings();
-                this.hideContextMenu();
-            });
-        } else {
-            // Object context menu
-            menu.innerHTML = `
-                <button class="context-menu-item" data-action="copy">
-                    <span>Copy</span>
-                    <span class="shortcut">⌘C</span>
-                </button>
-                <button class="context-menu-item" data-action="paste">
-                    <span>Paste</span>
-                    <span class="shortcut">⌘V</span>
-                </button>
-                <div class="context-menu-divider"></div>
-                <button class="context-menu-item" data-action="delete">
-                    <span>Delete</span>
-                    <span class="shortcut">D</span>
-                </button>
-            `;
-
-            menu.querySelector('[data-action="copy"]').addEventListener('click', () => {
-                if (this.selectedObjectId) {
-                    this.copyObject(this.selectedObjectId);
-                }
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="paste"]').addEventListener('click', () => {
-                this.paste();
-                this.hideContextMenu();
-            });
-
-            menu.querySelector('[data-action="delete"]').addEventListener('click', () => {
-                if (this.selectedObjectId) {
-                    this.deleteObject(this.selectedObjectId);
-                }
-                this.hideContextMenu();
-            });
-        }
-
-        document.body.appendChild(menu);
-
-        // Update paste button state
-        const pasteBtn = menu.querySelector('[data-action="paste"]');
-        if (pasteBtn) {
-            pasteBtn.disabled = !this.clipboard;
-            pasteBtn.style.opacity = this.clipboard ? '1' : '0.5';
-        }
-
-        menu.style.left = x + 'px';
-        menu.style.top = y + 'px';
-        menu.classList.add('visible');
-    }
-
-    hideContextMenu() {
-        const menu = document.getElementById('context-menu');
-        if (menu) {
-            menu.classList.remove('visible');
-        }
-    }
-
-    redraw() {
-        const rect = this.canvas.getBoundingClientRect();
-        this.ctx.clearRect(0, 0, rect.width / this.zoomLevel, rect.height / this.zoomLevel);
-
-        // Draw center origin dot (2x2px, zoom-independent)
-        this.drawCenterDot();
-
-        // Draw all saved lines
-        this.lines.forEach(line => this.drawLine(line));
-
-        // Draw current line
-        if (this.currentLine) {
-            this.drawLine(this.currentLine);
-        }
-
-        // Draw selection highlight for single selection
-        if (this.selectedObjectId) {
-            this.drawSelectionHighlight();
-        }
-
-        // Draw selection highlights for multi-selected objects
-        if (this.multiSelectedObjects.length > 0) {
-            this.multiSelectedObjects.forEach(objectId => {
-                this.drawSelectionHighlightForObject(objectId);
-            });
-        }
-
-        // Draw selection highlights for all-selected objects
-        if (this.allSelected && this.selectedObjects.length > 0) {
-            this.selectedObjects.forEach(objectId => {
-                this.drawSelectionHighlightForObject(objectId);
-            });
-        }
-    }
-
-    drawLine(line) {
-        if (line.points.length < 2) return;
-
-        this.ctx.beginPath();
-        this.ctx.strokeStyle = line.color;
-        this.ctx.lineWidth = line.width;
-        this.ctx.lineCap = 'round';
-        this.ctx.lineJoin = 'round';
-
-        this.ctx.moveTo(line.points[0].x, line.points[0].y);
-        for (let i = 1; i < line.points.length; i++) {
-            this.ctx.lineTo(line.points[i].x, line.points[i].y);
-        }
-        this.ctx.stroke();
-    }
-
-    drawCenterDot() {
-        // Draw a 2x2px bright yellow dot at the note's stored origin
-        // Size is compensated for zoom so it always appears 2x2px visually
-        const dotSize = 2 / this.zoomLevel;
-
-        // Get origin from current note (already in content-space)
-        const note = this.notes[this.currentNoteIndex];
-        const rect = this.canvas.getBoundingClientRect();
-        // Fallback for notes without origin (legacy) or if note doesn't exist
-        const originX = note?.originX ?? (rect.width / 2 / this.zoomLevel);
-        const originY = note?.originY ?? (rect.height / 2 / this.zoomLevel);
-
-        this.ctx.fillStyle = '#facc15'; // Bright yellow
-        this.ctx.fillRect(
-            originX - dotSize / 2,
-            originY - dotSize / 2,
-            dotSize,
-            dotSize
-        );
-    }
-
-    drawSelectionHighlight() {
-        // Get bounding box of selected object
-        const selectedLines = this.lines.filter(l => l.objectId === this.selectedObjectId);
-        if (selectedLines.length === 0) return;
-
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        selectedLines.forEach(line => {
-            line.points.forEach(p => {
-                minX = Math.min(minX, p.x);
-                minY = Math.min(minY, p.y);
-                maxX = Math.max(maxX, p.x);
-                maxY = Math.max(maxY, p.y);
-            });
-        });
-
-        // Add padding
-        const padding = 8;
-        minX -= padding;
-        minY -= padding;
-        maxX += padding;
-        maxY += padding;
-
-        // Draw selection box
-        this.ctx.strokeStyle = '#3b82f6';
-        this.ctx.lineWidth = 2;
-        this.ctx.setLineDash([5, 5]);
-        this.ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
-        this.ctx.setLineDash([]);
-
-        // Draw corner handles
-        const handleSize = 8;
-        this.ctx.fillStyle = '#3b82f6';
-        const corners = [
-            [minX, minY], [maxX, minY],
-            [minX, maxY], [maxX, maxY]
-        ];
-        corners.forEach(([x, y]) => {
-            this.ctx.fillRect(x - handleSize/2, y - handleSize/2, handleSize, handleSize);
-        });
-    }
-
-    // Draw selection highlight for a specific object (used for multi-select)
-    drawSelectionHighlightForObject(objectId) {
-        const selectedLines = this.lines.filter(l => l.objectId === objectId);
-        if (selectedLines.length === 0) return;
-
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        selectedLines.forEach(line => {
-            line.points.forEach(p => {
-                minX = Math.min(minX, p.x);
-                minY = Math.min(minY, p.y);
-                maxX = Math.max(maxX, p.x);
-                maxY = Math.max(maxY, p.y);
-            });
-        });
-
-        // Add padding
-        const padding = 8;
-        minX -= padding;
-        minY -= padding;
-        maxX += padding;
-        maxY += padding;
-
-        // Draw selection box (green for multi-select to distinguish)
-        this.ctx.strokeStyle = '#22c55e';
-        this.ctx.lineWidth = 2;
-        this.ctx.setLineDash([5, 5]);
-        this.ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
-        this.ctx.setLineDash([]);
-    }
-
-    clear() {
-        this.lines = [];
-        this.currentLine = null;
-        this.textItems = [];
-        this.images = [];
-        this.textContainer.innerHTML = '';
-        this.redraw();
-    }
-
-    setupClipboardPaste() {
-        // Check clipboard when window gains focus
-        window.glassboard.onFocusChange((focused) => {
-            if (focused) {
-                this.checkSystemClipboard();
-            } else {
-                this.hidePasteOverlay();
-            }
-        });
-
-        // Also check on initial load
-        setTimeout(() => this.checkSystemClipboard(), 500);
-    }
-
-    // File drag-and-drop support
-    setupFileDrop() {
-        // Prevent default drag behaviors on document
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
-            document.addEventListener(event, (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-            });
-        });
-
-        // Visual feedback on dragover
-        this.app.addEventListener('dragenter', () => {
-            this.app.classList.add('drag-over');
-        });
-
-        this.app.addEventListener('dragleave', (e) => {
-            if (!this.app.contains(e.relatedTarget)) {
-                this.app.classList.remove('drag-over');
-            }
-        });
-
-        // Handle drop
-        this.app.addEventListener('drop', (e) => {
-            this.app.classList.remove('drag-over');
-            this.handleFileDrop(e);
-        });
-    }
-
-    handleFileDrop(e) {
-        const files = e.dataTransfer.files;
-        if (!files.length) return;
-
-        const dropX = e.clientX - this.app.getBoundingClientRect().left;
-        const dropY = e.clientY - this.app.getBoundingClientRect().top;
-
-        // Process each file
-        Array.from(files).forEach((file, index) => {
-            const x = dropX + (index * 20); // Offset multiple files
-            const y = dropY + (index * 20);
-
-            if (this.isImageFile(file)) {
-                this.handleDroppedImage(file, x, y);
-            } else {
-                this.handleDroppedFile(file, x, y);
-            }
-        });
-
-        this.saveState();
-    }
-
-    isImageFile(file) {
-        const imageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml', 'image/bmp'];
-        return imageTypes.includes(file.type) || /\.(png|jpe?g|gif|webp|svg|bmp)$/i.test(file.name);
-    }
-
-    handleDroppedImage(file, x, y) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            const img = new Image();
-            img.onload = () => {
-                this.pasteImage(e.target.result, x, y, img.width, img.height);
-            };
-            img.src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-    }
-
-    handleDroppedFile(file, x, y) {
-        const id = Date.now().toString();
-
-        // Create attachment element
-        const attachment = document.createElement('div');
-        attachment.className = 'file-attachment';
-        attachment.dataset.id = id;
-        attachment.style.left = (x / this.zoomLevel) + 'px';
-        attachment.style.top = (y / this.zoomLevel) + 'px';
-
-        // File icon based on extension
-        const icon = this.getFileIcon(file.name);
-
-        attachment.innerHTML = `
-            <div class="attachment-icon">${icon}</div>
-            <div class="attachment-name" title="${file.name}">${file.name}</div>
-            <button class="attachment-delete-btn">✕</button>
-        `;
-
-        this.textContainer.appendChild(attachment);
-
-        // Store attachment data
-        this.attachments.push({
-            id,
-            x: x / this.zoomLevel,
-            y: y / this.zoomLevel,
-            filePath: file.path, // Electron provides full path
-            fileName: file.name,
-            fileType: file.type || this.getExtension(file.name)
-        });
-
-        // Setup interactions
-        this.setupAttachmentDrag(attachment, id);
-        this.setupAttachmentClick(attachment, id);
-
-        // Delete button
-        attachment.querySelector('.attachment-delete-btn').addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.deleteAttachment(id);
-        });
-    }
-
-    getFileIcon(fileName) {
-        const ext = this.getExtension(fileName).toLowerCase();
-        const icons = {
-            pdf: '📄', doc: '📝', docx: '📝', txt: '📃',
-            xls: '📊', xlsx: '📊', csv: '📊',
-            ppt: '📽️', pptx: '📽️',
-            zip: '🗜️', rar: '🗜️', '7z': '🗜️',
-            mp3: '🎵', wav: '🎵', m4a: '🎵',
-            mp4: '🎬', mov: '🎬', avi: '🎬',
-            js: '📜', py: '📜', html: '📜', css: '📜',
-            default: '📎'
-        };
-        return icons[ext] || icons.default;
-    }
-
-    getExtension(fileName) {
-        return fileName.split('.').pop() || '';
-    }
-
-    setupAttachmentDrag(element, id) {
-        let isDragging = false;
-        let startX, startY, initialX, initialY;
-
-        element.addEventListener('mousedown', (e) => {
-            if (e.target.classList.contains('attachment-delete-btn')) return;
-            isDragging = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            initialX = parseInt(element.style.left);
-            initialY = parseInt(element.style.top);
-            element.classList.add('dragging');
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isDragging) return;
-            const dx = (e.clientX - startX) / this.zoomLevel;
-            const dy = (e.clientY - startY) / this.zoomLevel;
-            element.style.left = (initialX + dx) + 'px';
-            element.style.top = (initialY + dy) + 'px';
-        });
-
-        document.addEventListener('mouseup', () => {
-            if (isDragging) {
-                isDragging = false;
-                element.classList.remove('dragging');
-                // Update stored position
-                const att = this.attachments.find(a => a.id === id);
-                if (att) {
-                    att.x = parseInt(element.style.left);
-                    att.y = parseInt(element.style.top);
-                }
-            }
-        });
-    }
-
-    setupAttachmentClick(element, id) {
-        element.addEventListener('dblclick', () => {
-            const att = this.attachments.find(a => a.id === id);
-            if (att?.filePath) {
-                window.glassboard.openFile(att.filePath);
-            }
-        });
-    }
-
-    deleteAttachment(id) {
-        this.attachments = this.attachments.filter(a => a.id !== id);
-        const element = this.textContainer.querySelector(`.file-attachment[data-id="${id}"]`);
-        if (element) element.remove();
-        this.saveState();
-    }
-
-    restoreAttachment(att) {
-        const attachment = document.createElement('div');
-        attachment.className = 'file-attachment';
-        attachment.dataset.id = att.id;
-        attachment.style.left = att.x + 'px';
-        attachment.style.top = att.y + 'px';
-
-        const icon = this.getFileIcon(att.fileName);
-        attachment.innerHTML = `
-            <div class="attachment-icon">${icon}</div>
-            <div class="attachment-name" title="${att.fileName}">${att.fileName}</div>
-            <button class="attachment-delete-btn">✕</button>
-        `;
-
-        this.textContainer.appendChild(attachment);
-        this.setupAttachmentDrag(attachment, att.id);
-        this.setupAttachmentClick(attachment, att.id);
-
-        attachment.querySelector('.attachment-delete-btn').addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.deleteAttachment(att.id);
-        });
-    }
-
-    checkSystemClipboard() {
-        const content = window.glassboard.getClipboardContent();
-        if (content) {
-            this.systemClipboard = content;
-        } else {
-            this.systemClipboard = null;
-        }
-    }
-
-    showPasteOverlay(x, y) {
-        if (!this.systemClipboard) return;
-
-        // Remove existing overlay
-        this.hidePasteOverlay();
-
-        const overlay = document.createElement('div');
-        overlay.id = 'paste-overlay';
-        overlay.className = 'paste-overlay';
-
-        if (this.systemClipboard.type === 'image') {
-            // Image preview
-            const img = document.createElement('img');
-            img.src = this.systemClipboard.dataUrl;
-            img.className = 'paste-preview-image';
-
-            const label = document.createElement('div');
-            label.className = 'paste-label';
-            label.innerHTML = `
-                <span class="paste-icon">📋</span>
-                <span>Paste Image</span>
-                <span class="paste-size">${this.systemClipboard.width}×${this.systemClipboard.height}</span>
-            `;
-
-            overlay.appendChild(img);
-            overlay.appendChild(label);
-        } else if (this.systemClipboard.type === 'text') {
-            // Text preview
-            const preview = document.createElement('div');
-            preview.className = 'paste-preview-text';
-            preview.textContent = this.systemClipboard.content.substring(0, 100) +
-                (this.systemClipboard.content.length > 100 ? '...' : '');
-
-            const label = document.createElement('div');
-            label.className = 'paste-label';
-            label.innerHTML = `
-                <span class="paste-icon">📋</span>
-                <span>Paste Text</span>
-            `;
-
-            overlay.appendChild(preview);
-            overlay.appendChild(label);
-        }
-
-        // Position the overlay
-        overlay.style.left = x + 'px';
-        overlay.style.top = y + 'px';
-
-        // Click to paste
-        overlay.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.pasteFromSystemClipboard(x, y);
-            this.hidePasteOverlay();
-        });
-
-        this.app.appendChild(overlay);
-        this.pasteOverlayVisible = true;
-
-        // Auto-hide after a delay if not clicked
-        setTimeout(() => {
-            if (this.pasteOverlayVisible) {
-                this.hidePasteOverlay();
-            }
-        }, 5000);
-    }
-
-    hidePasteOverlay() {
-        const overlay = document.getElementById('paste-overlay');
-        if (overlay) {
-            overlay.remove();
-        }
-        this.pasteOverlayVisible = false;
-    }
-
-    pasteFromSystemClipboard(x, y) {
-        if (!this.systemClipboard) return;
-
-        if (this.systemClipboard.type === 'image') {
-            this.pasteImage(this.systemClipboard.dataUrl, x, y,
-                this.systemClipboard.width, this.systemClipboard.height);
-        } else if (this.systemClipboard.type === 'text') {
-            this.pasteText(this.systemClipboard.content, x, y);
-        }
-    }
-
-    pasteImage(dataUrl, x, y, width, height) {
-        // Scale down if too large
-        const maxSize = 400;
-        let displayWidth = width;
-        let displayHeight = height;
-
-        if (width > maxSize || height > maxSize) {
-            const scale = Math.min(maxSize / width, maxSize / height);
-            displayWidth = width * scale;
-            displayHeight = height * scale;
-        }
-
-        // Create image element
-        const id = Date.now().toString();
-        const imageItem = document.createElement('div');
-        imageItem.className = 'pasted-image';
-        imageItem.dataset.id = id;
-        imageItem.style.left = (x / this.zoomLevel) + 'px';
-        imageItem.style.top = (y / this.zoomLevel) + 'px';
-        imageItem.style.width = displayWidth + 'px';
-        imageItem.style.height = displayHeight + 'px';
-
-        const img = document.createElement('img');
-        img.src = dataUrl;
-        img.draggable = false;
-
-        // Delete button
-        const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'image-delete-btn';
-        deleteBtn.innerHTML = '✕';
-        deleteBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.deleteImage(id);
-        });
-
-        // Resize handle
-        const resizeHandle = document.createElement('div');
-        resizeHandle.className = 'image-resize-handle';
-
-        imageItem.appendChild(img);
-        imageItem.appendChild(deleteBtn);
-        imageItem.appendChild(resizeHandle);
-        this.textContainer.appendChild(imageItem);
-
-        // Store reference
-        this.images.push({
-            id,
-            x: x / this.zoomLevel,
-            y: y / this.zoomLevel,
-            width: displayWidth,
-            height: displayHeight,
-            dataUrl
-        });
-
-        // Setup drag for image
-        this.setupImageDrag(imageItem, id);
-        this.setupImageResize(imageItem, id, resizeHandle);
-        this.saveState();
-    }
-
-    setupImageDrag(element, id) {
-        let isDragging = false;
-        let startX, startY, initialX, initialY;
-
-        element.addEventListener('mousedown', (e) => {
-            if (e.target.closest('.image-delete-btn') || e.target.closest('.image-resize-handle')) return;
-
-            isDragging = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            initialX = parseInt(element.style.left);
-            initialY = parseInt(element.style.top);
-            element.style.cursor = 'grabbing';
-            e.preventDefault();
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isDragging) return;
-
-            const dx = (e.clientX - startX) / this.zoomLevel;
-            const dy = (e.clientY - startY) / this.zoomLevel;
-
-            element.style.left = (initialX + dx) + 'px';
-            element.style.top = (initialY + dy) + 'px';
-        });
-
-        document.addEventListener('mouseup', () => {
-            if (isDragging) {
-                isDragging = false;
-                element.style.cursor = 'grab';
-
-                // Update stored position
-                const imageData = this.images.find(i => i.id === id);
-                if (imageData) {
-                    imageData.x = parseInt(element.style.left);
-                    imageData.y = parseInt(element.style.top);
-                }
-            }
-        });
-    }
-
-    setupImageResize(element, id, handle) {
-        let isResizing = false;
-        let startX, startY, initialWidth, initialHeight;
-
-        handle.addEventListener('mousedown', (e) => {
-            isResizing = true;
-            startX = e.clientX;
-            startY = e.clientY;
-            initialWidth = element.offsetWidth;
-            initialHeight = element.offsetHeight;
-            e.preventDefault();
-            e.stopPropagation();
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isResizing) return;
-
-            const dx = (e.clientX - startX) / this.zoomLevel;
-            const dy = (e.clientY - startY) / this.zoomLevel;
-
-            // Maintain aspect ratio
-            const scale = Math.max(dx / initialWidth, dy / initialHeight);
-            const newWidth = Math.max(50, initialWidth * (1 + scale));
-            const newHeight = Math.max(50, initialHeight * (1 + scale));
-
-            element.style.width = newWidth + 'px';
-            element.style.height = newHeight + 'px';
-        });
-
-        document.addEventListener('mouseup', () => {
-            if (isResizing) {
-                isResizing = false;
-
-                // Update stored size
-                const imageData = this.images.find(i => i.id === id);
-                if (imageData) {
-                    imageData.width = element.offsetWidth;
-                    imageData.height = element.offsetHeight;
-                }
-            }
-        });
-    }
-
-    deleteImage(id) {
-        this.images = this.images.filter(i => i.id !== id);
-        const element = this.textContainer.querySelector(`.pasted-image[data-id="${id}"]`);
-        if (element) {
-            element.remove();
-        }
-        this.saveState();
-    }
-
-    pasteText(text, x, y) {
-        // Create a new text item at the paste location
-        const id = Date.now().toString();
-        const item = document.createElement('div');
-        item.className = 'text-item';
-        item.dataset.id = id;
-        item.style.left = (x / this.zoomLevel) + 'px';
-        item.style.top = (y / this.zoomLevel) + 'px';
-        item.style.color = this.currentColor;
-        // Apply counter-scale so text doesn't zoom
-        item.style.transform = `scale(${1 / this.zoomLevel})`;
-        item.style.transformOrigin = 'top left';
-
-        // Add drag handle
-        const dragHandle = document.createElement('div');
-        dragHandle.className = 'text-drag-handle';
-        dragHandle.innerHTML = `
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-                <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>
-            </svg>
-        `;
-
-        // Add format bar
-        const formatBar = document.createElement('div');
-        formatBar.className = 'text-format-bar';
-        formatBar.innerHTML = `
-            <button class="format-btn" data-format="bold" title="Bold">B</button>
-            <button class="format-btn" data-format="italic" title="Italic">I</button>
-            <button class="format-btn" data-format="underline" title="Underline">U</button>
-            <button class="format-btn delete-btn" title="Delete">✕</button>
-        `;
-
-        // Create contentEditable div with pasted text
-        const editor = document.createElement('div');
-        editor.className = 'text-input';
-        editor.contentEditable = 'true';
-        // Escape HTML to prevent XSS when pasting plain text
-        editor.textContent = text;
-        editor.style.color = this.currentColor;
-
-        // Add resize handle
-        const resizeHandle = document.createElement('div');
-        resizeHandle.className = 'text-resize-handle';
-
-        item.appendChild(dragHandle);
-        item.appendChild(formatBar);
-        item.appendChild(editor);
-        item.appendChild(resizeHandle);
-        this.textContainer.appendChild(item);
-
-        this.textItems.push({
-            id,
-            x: x / this.zoomLevel,
-            y: y / this.zoomLevel,
-            content: editor.innerHTML,
-            color: this.currentColor
-        });
-
-        // Setup event handlers
-        this.setupPastedTextItem(item, id, editor, formatBar);
-        this.saveState();
-    }
-
-    // Settings panel methods
-    setupSettings() {
-        this.settingsPanel = document.getElementById('settings-panel');
-        const closeBtn = document.getElementById('settings-close');
-
-        // Close button
-        closeBtn.addEventListener('click', () => {
-            this.hideSettings();
-        });
-
-        // Close on click outside
-        this.settingsPanel.addEventListener('click', (e) => {
-            if (e.target === this.settingsPanel) {
-                this.hideSettings();
-            }
-        });
-
-        // Close on Escape
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.settingsPanel.classList.contains('visible')) {
-                e.preventDefault();
-                this.hideSettings();
-            }
-        });
-
-        // Gesture toggles
-        document.getElementById('setting-pinch-zoom').addEventListener('change', (e) => {
-            this.settings.pinchZoom = e.target.checked;
-            this.autoSave();
-        });
-
-        document.getElementById('setting-pan').addEventListener('change', (e) => {
-            this.settings.pan = e.target.checked;
-            this.autoSave();
-        });
-
-        document.getElementById('setting-rotate').addEventListener('change', (e) => {
-            this.settings.rotate = e.target.checked;
-            this.autoSave();
-        });
-
-        // Zoom controls toggle
-        document.getElementById('setting-zoom-controls').addEventListener('change', (e) => {
-            this.settings.showZoomControls = e.target.checked;
-            const zoomControls = document.getElementById('zoom-controls');
-            if (zoomControls) {
-                zoomControls.style.display = e.target.checked ? '' : 'none';
-            }
-            this.autoSave();
-        });
-
-        // Active background mode options
-        document.querySelectorAll('input[name="bg-mode"]').forEach(radio => {
-            radio.addEventListener('change', (e) => {
-                const mode = e.target.value;
-                this.settings.activeBgMode = mode;
-                this.app.dataset.activeBg = mode;
-                if (this.app.classList.contains('focused')) {
-                    window.glassboard.setBackgroundMode(mode);
-                }
-                this.applyBackgroundModes();
-                this.applyBackgroundOpacity();
-                this.autoSave();
-            });
-        });
-
-        // Inactive background mode options
-        document.querySelectorAll('input[name="inactive-bg-mode"]').forEach(radio => {
-            radio.addEventListener('change', (e) => {
-                const mode = e.target.value;
-                this.settings.inactiveBgMode = mode;
-                this.app.dataset.inactiveBg = mode;
-                if (!this.app.classList.contains('focused')) {
-                    window.glassboard.setBackgroundMode(mode);
-                }
-                this.applyBackgroundModes();
-                this.applyBackgroundOpacity();
-                this.autoSave();
-            });
-        });
-
-        // Active opacity slider
-        const activeOpacitySlider = document.getElementById('setting-active-opacity');
-        const activeOpacityValue = document.getElementById('active-opacity-value');
-        if (activeOpacitySlider) {
-            activeOpacitySlider.addEventListener('input', (e) => {
-                const value = parseInt(e.target.value);
-                this.settings.activeOpacity = value;
-                if (activeOpacityValue) {
-                    activeOpacityValue.textContent = `${value}%`;
-                }
-                this.applyBackgroundOpacity();
-                this.autoSave();
-            });
-        }
-
-        // Inactive opacity slider
-        const inactiveOpacitySlider = document.getElementById('setting-inactive-opacity');
-        const inactiveOpacityValue = document.getElementById('inactive-opacity-value');
-        if (inactiveOpacitySlider) {
-            inactiveOpacitySlider.addEventListener('input', (e) => {
-                const value = parseInt(e.target.value);
-                this.settings.inactiveOpacity = value;
-                if (inactiveOpacityValue) {
-                    inactiveOpacityValue.textContent = `${value}%`;
-                }
-                this.applyBackgroundOpacity();
-                this.autoSave();
-            });
-        }
-
-        // Clean slate setting
-        const cleanSlateCheckbox = document.getElementById('setting-clean-slate');
-        if (cleanSlateCheckbox) {
-            cleanSlateCheckbox.addEventListener('change', (e) => {
-                this.settings.openWithCleanSlate = e.target.checked;
-                this.autoSave();
-            });
-        }
-
-        // Auto-save to folder setting
-        const autoSaveFolderCheckbox = document.getElementById('setting-auto-save-folder');
-        if (autoSaveFolderCheckbox) {
-            autoSaveFolderCheckbox.addEventListener('change', (e) => {
-                this.settings.autoSaveToFolder = e.target.checked;
-                this.autoSave();
-            });
-        }
-
-        // Open folder button
-        const openFolderBtn = document.getElementById('open-folder-btn');
-        if (openFolderBtn) {
-            openFolderBtn.addEventListener('click', () => {
-                this.openFloatnoteFolder();
-            });
-        }
-    }
-
-    // Apply background opacity based on focus state
-    applyBackgroundOpacity() {
-        const isFocused = this.app.classList.contains('focused');
-        const opacity = isFocused ? this.settings.activeOpacity : this.settings.inactiveOpacity;
-        this.app.style.setProperty('--bg-opacity', opacity / 100);
-    }
-
-    toggleSettings() {
-        if (this.settingsPanel.classList.contains('visible')) {
-            this.hideSettings();
-        } else {
-            this.showSettings();
-        }
-    }
-
-    showSettings() {
-        this.settingsPanel.classList.add('visible');
-    }
-
-    hideSettings() {
-        this.settingsPanel.classList.remove('visible');
-    }
-
-    // Trackpad gesture support
-    setupGestures() {
-        // Pinch-to-zoom via wheel event (trackpad sends wheel events with ctrlKey)
-        this.app.addEventListener('wheel', (e) => {
-            // Pinch-to-zoom (trackpad sends ctrlKey with pinch)
-            if (e.ctrlKey && this.settings.pinchZoom) {
-                e.preventDefault();
-                const delta = -e.deltaY * 0.01;
-                const newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoomLevel + delta));
-                this.zoomLevel = newZoom;
-                this.applyTransform();
-                return;
-            }
-
-            // Two-finger pan (no modifier key)
-            if (this.settings.pan && !e.ctrlKey && !e.metaKey) {
-                // Only pan if not drawing
-                if (this.isDrawing) return;
-
-                e.preventDefault();
-                this.panX -= e.deltaX;
-                this.panY -= e.deltaY;
-                this.applyTransform();
-            }
-        }, { passive: false });
-
-        // Safari/WebKit gesture events for pinch and rotate
-        this.app.addEventListener('gesturestart', (e) => {
-            e.preventDefault();
-            this.gestureStartZoom = this.zoomLevel;
-            this.gestureStartRotation = this.rotation;
-        });
-
-        this.app.addEventListener('gesturechange', (e) => {
-            e.preventDefault();
-
-            // Pinch-to-zoom
-            if (this.settings.pinchZoom) {
-                const newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.gestureStartZoom * e.scale));
-                this.zoomLevel = newZoom;
-            }
-
-            // Rotation
-            if (this.settings.rotate) {
-                this.rotation = this.gestureStartRotation + e.rotation;
-            }
-
-            this.applyTransform();
-        });
-
-        this.app.addEventListener('gestureend', (e) => {
-            e.preventDefault();
-        });
-
-        // Double-tap to reset (via double-click)
-        let lastTap = 0;
-        this.app.addEventListener('click', (e) => {
-            const now = Date.now();
-            if (now - lastTap < 300) {
-                // Double-tap detected - reset transform
-                this.resetTransform();
-            }
-            lastTap = now;
-        });
-    }
-
-    // Undo/Redo functionality
-    saveState() {
-        if (this.isUndoRedoAction) return;
-
-        // Create a snapshot of current state
-        const state = {
-            lines: JSON.parse(JSON.stringify(this.lines)),
-            textItems: this.textItems.map(t => ({ ...t })),
-            images: this.images.map(i => ({ ...i }))
-        };
-
-        // Remove any states after current index (new branch)
-        this.history = this.history.slice(0, this.historyIndex + 1);
-
-        // Add new state
-        this.history.push(state);
-        this.historyIndex++;
-
-        // Limit history size
-        if (this.history.length > this.maxHistorySize) {
-            this.history.shift();
-            this.historyIndex--;
-        }
-
-        // Trigger auto-save
-        this.autoSave();
-    }
-
-    undo() {
-        if (this.historyIndex <= 0) return;
-
-        this.isUndoRedoAction = true;
-        this.historyIndex--;
-        this.restoreState(this.history[this.historyIndex]);
-        this.isUndoRedoAction = false;
-        this.autoSave();
-    }
-
-    redo() {
-        if (this.historyIndex >= this.history.length - 1) return;
-
-        this.isUndoRedoAction = true;
-        this.historyIndex++;
-        this.restoreState(this.history[this.historyIndex]);
-        this.isUndoRedoAction = false;
-        this.autoSave();
-    }
-
-    restoreState(state) {
-        // Restore lines
-        this.lines = JSON.parse(JSON.stringify(state.lines));
-
-        // Clear and restore text items
-        this.textContainer.querySelectorAll('.text-item').forEach(el => el.remove());
-        this.textItems = [];
-        state.textItems.forEach(item => {
-            this.restoreTextItem(item);
-        });
-
-        // Clear and restore images
-        this.textContainer.querySelectorAll('.pasted-image').forEach(el => el.remove());
-        this.images = [];
-        state.images.forEach(img => {
-            this.restoreImage(img);
-        });
-
-        this.redraw();
-    }
-
-    restoreTextItem(item) {
-        const element = document.createElement('div');
-        element.className = 'text-item';
-        element.dataset.id = item.id;
-        element.style.left = item.x + 'px';
-        element.style.top = item.y + 'px';
-        element.style.color = item.color;
-        if (item.width) element.style.width = item.width + 'px';
-        // Apply counter-scale so text doesn't zoom
-        element.style.transform = `scale(${1 / this.zoomLevel})`;
-        element.style.transformOrigin = 'top left';
-
-        const dragHandle = document.createElement('div');
-        dragHandle.className = 'text-drag-handle';
-        dragHandle.innerHTML = `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/></svg>`;
-
-        const formatBar = document.createElement('div');
-        formatBar.className = 'text-format-bar';
-        formatBar.innerHTML = `
-            <button class="format-btn" data-format="bold" title="Bold">B</button>
-            <button class="format-btn" data-format="italic" title="Italic">I</button>
-            <button class="format-btn" data-format="underline" title="Underline">U</button>
-            <button class="format-btn delete-btn" title="Delete">✕</button>
-        `;
-
-        const editor = document.createElement('div');
-        editor.className = 'text-input';
-        editor.contentEditable = 'true';
-        // Support both old 'text' and new 'content' formats for backwards compatibility
-        editor.innerHTML = item.content || item.text || '';
-        editor.style.color = item.color;
-
-        const resizeHandle = document.createElement('div');
-        resizeHandle.className = 'text-resize-handle';
-
-        element.appendChild(dragHandle);
-        element.appendChild(formatBar);
-        element.appendChild(editor);
-        element.appendChild(resizeHandle);
-        this.textContainer.appendChild(element);
-
-        // Normalize to new format
-        const normalizedItem = { ...item, content: item.content || item.text || '' };
-        delete normalizedItem.text;
-        this.textItems.push(normalizedItem);
-        this.setupPastedTextItem(element, item.id, editor, formatBar);
-    }
-
-    restoreImage(img) {
-        const imageItem = document.createElement('div');
-        imageItem.className = 'pasted-image';
-        imageItem.dataset.id = img.id;
-        imageItem.style.left = img.x + 'px';
-        imageItem.style.top = img.y + 'px';
-        imageItem.style.width = img.width + 'px';
-        imageItem.style.height = img.height + 'px';
-
-        const imgEl = document.createElement('img');
-        imgEl.src = img.dataUrl;
-        imgEl.draggable = false;
-
-        const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'image-delete-btn';
-        deleteBtn.innerHTML = '✕';
-        deleteBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.deleteImage(img.id);
-        });
-
-        const resizeHandle = document.createElement('div');
-        resizeHandle.className = 'image-resize-handle';
-
-        imageItem.appendChild(imgEl);
-        imageItem.appendChild(deleteBtn);
-        imageItem.appendChild(resizeHandle);
-        this.textContainer.appendChild(imageItem);
-
-        this.images.push({ ...img });
-        this.setupImageDrag(imageItem, img.id);
-        this.setupImageResize(imageItem, img.id, resizeHandle);
-    }
-
-    // Smart paste - checks system clipboard first, then internal clipboard
-    smartPaste() {
-        // Check system clipboard first
-        this.checkSystemClipboard();
-
-        if (this.systemClipboard) {
-            // Paste from system clipboard at center of canvas
-            const rect = this.app.getBoundingClientRect();
-            const x = rect.width / 2;
-            const y = rect.height / 2;
-            this.pasteFromSystemClipboard(x, y);
-            this.saveState();
-        } else if (this.clipboard) {
-            // Paste from internal clipboard
-            this.paste();
-            this.saveState();
-        }
-    }
-
-    // Data persistence
-    autoSave() {
-        clearTimeout(this.saveTimeout);
-        this.saveTimeout = setTimeout(() => {
-            this.saveData();
-        }, 1000); // Debounce saves to 1 second
-    }
-
-    async saveData() {
-        const data = {
-            notes: this.notes,
-            currentNoteIndex: this.currentNoteIndex,
-            settings: this.settings,
-            transform: {
-                zoomLevel: this.zoomLevel,
-                panX: this.panX,
-                panY: this.panY,
-                rotation: this.rotation
-            }
-        };
-
-        try {
-            await window.glassboard.saveData(data);
-
-            // Also save to ~/.floatnote folder if enabled
-            if (this.settings.autoSaveToFolder && this.notes[this.currentNoteIndex]) {
-                await window.glassboard.exportToFloatnote(this.notes[this.currentNoteIndex]);
-            }
-        } catch (error) {
-            console.error('Failed to save data:', error);
-        }
-    }
-
-    // Export current note as PNG
-    async exportAsPNG() {
-        try {
-            // Create a temporary canvas to render everything
-            const exportCanvas = document.createElement('canvas');
-            const rect = this.canvas.getBoundingClientRect();
-            exportCanvas.width = rect.width;
-            exportCanvas.height = rect.height;
-            const exportCtx = exportCanvas.getContext('2d');
-
-            // Fill with transparent background
-            exportCtx.clearRect(0, 0, exportCanvas.width, exportCanvas.height);
-
-            // Draw all lines from current note
-            this.lines.forEach(line => {
-                if (line.points.length < 2) return;
-                exportCtx.beginPath();
-                exportCtx.strokeStyle = line.color;
-                exportCtx.lineWidth = line.width;
-                exportCtx.lineCap = 'round';
-                exportCtx.lineJoin = 'round';
-                exportCtx.moveTo(line.points[0].x, line.points[0].y);
-                for (let i = 1; i < line.points.length; i++) {
-                    exportCtx.lineTo(line.points[i].x, line.points[i].y);
-                }
-                exportCtx.stroke();
-            });
-
-            // Draw text items
-            this.textItems.forEach(item => {
-                const element = this.textContainer.querySelector(`[data-id="${item.id}"]`);
-                if (element) {
-                    const editor = element.querySelector('.text-input');
-                    if (editor && editor.textContent) {
-                        exportCtx.font = '16px system-ui, -apple-system, sans-serif';
-                        exportCtx.fillStyle = item.color;
-                        const lines = editor.textContent.split('\n');
-                        lines.forEach((line, i) => {
-                            exportCtx.fillText(line, item.x, item.y + 20 + (i * 20));
-                        });
-                    }
-                }
-            });
-
-            // Draw images
-            for (const img of this.images) {
-                const imgElement = document.querySelector(`.pasted-image[data-id="${img.id}"] img`);
-                if (imgElement) {
-                    exportCtx.drawImage(imgElement, img.x, img.y, img.width, img.height);
-                }
-            }
-
-            // Get data URL and export
-            const dataUrl = exportCanvas.toDataURL('image/png');
-            const result = await window.glassboard.exportPNG(dataUrl);
-
-            if (result.success) {
-                console.log('Exported to:', result.path);
-            }
-        } catch (error) {
-            console.error('Failed to export PNG:', error);
-        }
-    }
-
-    // Open ~/.floatnote folder in Finder
-    async openFloatnoteFolder() {
-        try {
-            await window.glassboard.openFloatnoteFolder();
-        } catch (error) {
-            console.error('Failed to open folder:', error);
-        }
-    }
-
-    async loadSavedData() {
-        try {
-            const result = await window.glassboard.loadData();
-            if (result.success && result.data) {
-                const data = result.data;
-
-                // Restore settings first
-                if (data.settings) {
-                    this.settings = { ...this.settings, ...data.settings };
-                    // Update settings UI
-                    document.getElementById('setting-pinch-zoom').checked = this.settings.pinchZoom;
-                    document.getElementById('setting-pan').checked = this.settings.pan;
-                    document.getElementById('setting-rotate').checked = this.settings.rotate;
-                    document.getElementById('setting-zoom-controls').checked = this.settings.showZoomControls;
-                    const cleanSlateCheckbox = document.getElementById('setting-clean-slate');
-                    if (cleanSlateCheckbox) {
-                        cleanSlateCheckbox.checked = this.settings.openWithCleanSlate;
-                    }
-                    const autoSaveFolderCheckbox = document.getElementById('setting-auto-save-folder');
-                    if (autoSaveFolderCheckbox) {
-                        autoSaveFolderCheckbox.checked = this.settings.autoSaveToFolder || false;
-                    }
-                    const zoomControls = document.getElementById('zoom-controls');
-                    if (zoomControls) {
-                        zoomControls.style.display = this.settings.showZoomControls ? '' : 'none';
-                    }
-
-                    // Restore background settings
-                    const activeBgRadio = document.querySelector(`input[name="bg-mode"][value="${this.settings.activeBgMode || 'transparent'}"]`);
-                    if (activeBgRadio) activeBgRadio.checked = true;
-                    this.app.dataset.activeBg = this.settings.activeBgMode || 'transparent';
-
-                    const inactiveBgRadio = document.querySelector(`input[name="inactive-bg-mode"][value="${this.settings.inactiveBgMode || 'transparent'}"]`);
-                    if (inactiveBgRadio) inactiveBgRadio.checked = true;
-                    this.app.dataset.inactiveBg = this.settings.inactiveBgMode || 'transparent';
-
-                    // Restore opacity settings
-                    const activeOpacitySlider = document.getElementById('setting-active-opacity');
-                    const activeOpacityValue = document.getElementById('active-opacity-value');
-                    if (activeOpacitySlider) {
-                        activeOpacitySlider.value = this.settings.activeOpacity || 100;
-                        if (activeOpacityValue) activeOpacityValue.textContent = `${this.settings.activeOpacity || 100}%`;
-                    }
-
-                    const inactiveOpacitySlider = document.getElementById('setting-inactive-opacity');
-                    const inactiveOpacityValue = document.getElementById('inactive-opacity-value');
-                    if (inactiveOpacitySlider) {
-                        inactiveOpacitySlider.value = this.settings.inactiveOpacity || 50;
-                        if (inactiveOpacityValue) inactiveOpacityValue.textContent = `${this.settings.inactiveOpacity || 50}%`;
-                    }
-
-                    this.applyBackgroundModes();
-                    this.applyBackgroundOpacity();
-
-                    // Apply native vibrancy based on restored settings
-                    const currentBgMode = this.app.classList.contains('focused')
-                        ? this.settings.activeBgMode
-                        : this.settings.inactiveBgMode;
-                    if (currentBgMode === 'blur') {
-                        window.glassboard.setBackgroundMode('blur');
-                    }
-                }
-
-                // Check if we should open with clean slate
-                if (this.settings.openWithCleanSlate) {
-                    // Keep the notes but create/go to a new blank note
-                    if (data.notes && data.notes.length > 0) {
-                        this.notes = data.notes;
-                        this.notes.push(this.createEmptyNote());
-                        this.currentNoteIndex = this.notes.length - 1;
-                    }
-                    // Don't restore transform - start fresh
-                    this.redraw();
-                    this.saveState();
-                    return;
-                }
-
-                // Restore notes (new multi-note format)
-                if (data.notes && data.notes.length > 0) {
-                    this.notes = data.notes;
-                    this.currentNoteIndex = data.currentNoteIndex || 0;
-
-                    // Make sure index is valid
-                    if (this.currentNoteIndex >= this.notes.length) {
-                        this.currentNoteIndex = this.notes.length - 1;
-                    }
-
-                    // Load current note display
-                    this.loadCurrentNote();
-                }
-                // Legacy format support (single note)
-                else if (data.lines || data.textItems || data.images) {
-                    // Migrate old format to new format
-                    this.notes = [{
-                        id: Date.now().toString(),
-                        lines: data.lines || [],
-                        textItems: data.textItems || [],
-                        images: data.images || [],
-                        createdAt: Date.now(),
-                        lastModified: Date.now()
-                    }];
-                    this.currentNoteIndex = 0;
-                    this.loadCurrentNote();
-                }
-
-                // Restore transform
-                if (data.transform) {
-                    this.zoomLevel = data.transform.zoomLevel || 1;
-                    this.panX = data.transform.panX || 0;
-                    this.panY = data.transform.panY || 0;
-                    this.rotation = data.transform.rotation || 0;
-                    this.applyTransform();
-                }
-
-                // Initialize history with loaded state
-                this.saveState();
-            }
-        } catch (error) {
-            console.error('Failed to load data:', error);
-        }
-    }
-
-    setupLeftResize() {
-        const handle = document.getElementById('left-resize-handle');
-        if (!handle) return;
-
-        let isResizing = false;
-        let startX = 0;
-
-        handle.addEventListener('mousedown', (e) => {
-            isResizing = true;
-            startX = e.screenX;
-            e.preventDefault();
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isResizing) return;
-
-            const deltaX = e.screenX - startX;
-            if (deltaX !== 0) {
-                window.glassboard.resizeWindowLeft(deltaX);
-                startX = e.screenX;
-            }
-        });
-
-        document.addEventListener('mouseup', () => {
-            isResizing = false;
-        });
-    }
-
-    // Select all items
-    selectAll() {
-        // Select all drawn objects (by selecting the most recent object group)
-        const objectIds = [...new Set(this.lines.map(l => l.objectId))];
-        this.selectedObjects = objectIds;
-
-        // Select all text items
-        this.textItems.forEach(item => {
-            const element = this.textContainer.querySelector(`[data-id="${item.id}"]`);
-            if (element) {
-                element.classList.add('selected');
-            }
-        });
-
-        // Select all images
-        this.images.forEach(img => {
-            const element = this.textContainer.querySelector(`.pasted-image[data-id="${img.id}"]`);
-            if (element) {
-                element.classList.add('selected');
-            }
-        });
-
-        this.allSelected = true;
-        // Redraw to show selection highlights on drawn objects
-        this.redraw();
-    }
-
-    // Delete all selected items
-    deleteAllSelected() {
-        if (!this.allSelected) return;
-
-        // Delete all lines
-        this.lines = [];
-
-        // Delete all text items
-        this.textContainer.querySelectorAll('.text-item').forEach(el => el.remove());
-        this.textItems = [];
-
-        // Delete all images
-        this.textContainer.querySelectorAll('.pasted-image').forEach(el => el.remove());
-        this.images = [];
-
-        this.allSelected = false;
-        this.selectedObjectId = null;
-        this.selectedTextId = null;
-
-        this.redraw();
-        this.saveState();
-    }
-}
-
-// Initialize when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-    new Glassboard();
-});