senangwebs-photobooth 1.0.1 → 2.0.2

package/src/js/swp.js

@@ -1,726 +1,314 @@
 /**
  * SenangWebs Photobooth (SWP)
- * A lightweight client-side photo editing library
- * @version 1.0.0
+ * Professional browser-based image editor
+ * @version 2.0.0
  */
 
 import '../css/swp.css';
+import { EventEmitter, Events } from './core/EventEmitter.js';
+import { Canvas } from './core/Canvas.js';
+import { History } from './core/History.js';
+import { Keyboard } from './core/Keyboard.js';
+import { LayerManager } from './layers/LayerManager.js';
+import { ToolManager } from './tools/ToolManager.js';
+import { Selection } from './selection/Selection.js';
+import { FilterManager } from './filters/FilterManager.js';
+import { ColorManager } from './ui/ColorManager.js';
+import { UI } from './ui/UI.js';
+import { FileManager } from './io/FileManager.js';
+import { Clipboard } from './io/Clipboard.js';
 
 class SWP {
-        constructor(container, options = {}) {
-            this.container = container;
-            this.options = {
-                imageUrl: options.imageUrl || null,
-                width: options.width || 800,
-                height: options.height || 600,
-                showIcons: options.showIcons !== undefined ? options.showIcons : true,
-                showLabels: options.showLabels !== undefined ? options.showLabels : true,
-                labels: {
-                    upload: options.labels?.upload !== undefined ? options.labels.upload : 'Upload',
-                    rotateLeft: options.labels?.rotateLeft !== undefined ? options.labels.rotateLeft : null,
-                    rotateRight: options.labels?.rotateRight !== undefined ? options.labels.rotateRight : null,
-                    flipH: options.labels?.flipH !== undefined ? options.labels.flipH : null,
-                    flipV: options.labels?.flipV !== undefined ? options.labels.flipV : null,
-                    resize: options.labels?.resize !== undefined ? options.labels.resize : 'Resize',
-                    adjust: options.labels?.adjust !== undefined ? options.labels.adjust : 'Adjust',
-                    filters: options.labels?.filters !== undefined ? options.labels.filters : 'Filters',
-                    reset: options.labels?.reset !== undefined ? options.labels.reset : 'Reset',
-                    save: options.labels?.save !== undefined ? options.labels.save : 'Save'
-                }
-            };
-
-            this.canvas = null;
-            this.ctx = null;
-            this.originalImage = null;
-            this.currentImage = null;
-            this.history = [];
-            this.currentState = {
-                brightness: 100,
-                contrast: 100,
-                saturation: 100,
-                rotation: 0,
-                flipH: false,
-                flipV: false,
-                filter: 'none'
-            };
-            this.eventListeners = {};
-
-            this.init();
-        }
-
-        init() {
-            this.createUI();
-            if (this.options.imageUrl) {
-                this.loadImage(this.options.imageUrl);
-            }
-        }
-
-        createUI() {
-            // Clear container
-            this.container.innerHTML = '';
-            this.container.classList.add('swp-container');
-
-            // Create main structure
-            const wrapper = document.createElement('div');
-            wrapper.className = 'swp-wrapper';
-
-            // Create toolbar
-            const toolbar = document.createElement('div');
-            toolbar.className = 'swp-toolbar';
-            toolbar.innerHTML = this.createToolbarHTML();
-
-            // Create layout container
-            const layoutContainer = document.createElement('div');
-            layoutContainer.className = 'swp-layout-container';
-
-            // Create control container
-            const controlContainer = document.createElement('div');
-            controlContainer.className = 'swp-control-container';
-
-            // Create canvas container
-            const canvasContainer = document.createElement('div');
-            canvasContainer.className = 'swp-canvas-container';
-
-            // Create canvas
-            this.canvas = document.createElement('canvas');
-            this.canvas.width = this.options.width;
-            this.canvas.height = this.options.height;
-            this.canvas.className = 'swp-canvas';
-            this.ctx = this.canvas.getContext('2d');
-
-            canvasContainer.appendChild(this.canvas);
-
-            // Create adjustments panel
-            const adjustmentsPanel = document.createElement('div');
-            adjustmentsPanel.className = 'swp-adjustments-panel';
-            adjustmentsPanel.innerHTML = this.createAdjustmentsPanelHTML();
-
-            // Create filters panel
-            const filtersPanel = document.createElement('div');
-            filtersPanel.className = 'swp-filters-panel';
-            filtersPanel.innerHTML = this.createFiltersPanelHTML();
-
-            // Create resize panel
-            const resizePanel = document.createElement('div');
-            resizePanel.className = 'swp-resize-panel';
-            resizePanel.innerHTML = this.createResizePanelHTML();
-
-            // Append elements
-            wrapper.appendChild(toolbar);
-            wrapper.appendChild(layoutContainer);
-
-            layoutContainer.appendChild(canvasContainer);
-            layoutContainer.appendChild(controlContainer);
-
-            controlContainer.appendChild(adjustmentsPanel);
-            controlContainer.appendChild(filtersPanel);
-            controlContainer.appendChild(resizePanel);
-            this.container.appendChild(wrapper);
-
-            // Bind events
-            this.bindEvents();
-        }
-
-        createToolbarHTML() {
-            const { showIcons, showLabels, labels } = this.options;
-            
-            const createButton = (action, icon, label, title) => {
-                const showIcon = showIcons ? `<span class="swp-icon"><i class="${icon}"></i></span>` : '';
-                const showLabel = showLabels && label !== null ? `<span>${label}</span>` : '';
-                return `<button class="swp-btn${!showLabel ? ' swp-btn-icon-only' : ''}" data-action="${action}" title="${title}">${showIcon}${showLabel}</button>`;
-            };
-            
-            return `
-                <div class="swp-toolbar-group">
-                    ${createButton('upload', 'fas fa-folder', labels.upload, 'Upload Image')}
-                    <input type="file" id="swp-file-input" accept="image/*" style="display: none;">
-                </div>
-                
-                <div class="swp-toolbar-group" style="margin: 0px auto;">
-                    ${createButton('rotate-left', 'fas fa-undo', labels.rotateLeft, 'Rotate Left')}
-                    ${createButton('rotate-right', 'fas fa-redo', labels.rotateRight, 'Rotate Right')}
-                    ${createButton('flip-h', 'fas fa-arrows-alt-h', labels.flipH, 'Flip Horizontal')}
-                    ${createButton('flip-v', 'fas fa-arrows-alt-v', labels.flipV, 'Flip Vertical')}
-                </div>
-
-                <div class="swp-toolbar-group">
-                    ${createButton('reset', 'fas fa-history', labels.reset, 'Reset')}
-                </div>
-
-                <div class="swp-toolbar-group">
-                    ${createButton('toggle-resize', 'fas fa-expand-arrows-alt', labels.resize, 'Resize')}
-                    ${createButton('toggle-adjustments', 'fas fa-sliders-h', labels.adjust, 'Adjustments')}
-                    ${createButton('toggle-filters', 'fas fa-magic', labels.filters, 'Filters')}
-                </div>
-                <div class="swp-toolbar-group">
-                    <button class="swp-btn swp-btn-primary${!showLabels || labels.save === null ? ' swp-btn-icon-only' : ''}" data-action="download" title="Download">
-                        ${showIcons ? '<span class="swp-icon"><i class="fas fa-save"></i></span>' : ''}
-                        ${showLabels && labels.save !== null ? `<span>${labels.save}</span>` : ''}
-                    </button>
-                </div>
-            `;
-        }
-
-        createAdjustmentsPanelHTML() {
-            return `
-                <h3>Adjustments</h3>
-                <div class="swp-adjustment">
-                    <label>Brightness</label>
-                    <input type="range" id="swp-brightness" min="0" max="200" value="100">
-                    <span class="swp-value">100%</span>
-                </div>
-                <div class="swp-adjustment">
-                    <label>Contrast</label>
-                    <input type="range" id="swp-contrast" min="0" max="200" value="100">
-                    <span class="swp-value">100%</span>
-                </div>
-                <div class="swp-adjustment">
-                    <label>Saturation</label>
-                    <input type="range" id="swp-saturation" min="0" max="200" value="100">
-                    <span class="swp-value">100%</span>
-                </div>
-            `;
-        }
-
-        createResizePanelHTML() {
-            return `
-                <h3>Resize Image</h3>
-                <div class="swp-resize-controls">
-                    <div class="swp-adjustment">
-                        <label>Width (px)</label>
-                        <input type="number" id="swp-resize-width" min="1" max="5000" value="800">
-                    </div>
-                    <div class="swp-adjustment">
-                        <label>Height (px)</label>
-                        <input type="number" id="swp-resize-height" min="1" max="5000" value="600">
-                    </div>
-                    <div class="swp-adjustment">
-                        <label>
-                            <input type="checkbox" id="swp-maintain-ratio" checked>
-                            Maintain aspect ratio
-                        </label>
-                    </div>
-                    <button class="swp-btn swp-btn-primary" data-action="apply-resize">Apply Resize</button>
-                </div>
-            `;
-        }
-
-        createFiltersPanelHTML() {
-            const filters = [
-                { name: 'none', label: 'None' },
-                { name: 'grayscale', label: 'Grayscale' },
-                { name: 'sepia', label: 'Sepia' },
-                { name: 'invert', label: 'Invert' },
-                { name: 'blur', label: 'Blur' }
-            ];
-
-            return `
-                <h3>Filters</h3>
-                <div class="swp-filters-grid">
-                    ${filters.map(filter => `
-                        <button class="swp-filter-btn ${filter.name === 'none' ? 'active' : ''}" 
-                                data-filter="${filter.name}">
-                            <span class="swp-filter-preview" data-filter="${filter.name}"></span>
-                            <span>${filter.label}</span>
-                        </button>
-                    `).join('')}
-                </div>
-            `;
-        }
-
-        bindEvents() {
-            // Toolbar buttons
-            this.container.querySelectorAll('[data-action]').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    const action = e.currentTarget.getAttribute('data-action');
-                    this.handleAction(action);
-                });
-            });
-
-            // File input
-            const fileInput = this.container.querySelector('#swp-file-input');
-            if (fileInput) {
-                fileInput.addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        const reader = new FileReader();
-                        reader.onload = (event) => {
-                            this.loadImage(event.target.result);
-                        };
-                        reader.readAsDataURL(file);
-                    }
-                });
-            }
-
-            // Adjustment sliders
-            ['brightness', 'contrast', 'saturation'].forEach(adj => {
-                const slider = this.container.querySelector(`#swp-${adj}`);
-                if (slider) {
-                    slider.addEventListener('input', (e) => {
-                        const value = parseInt(e.target.value);
-                        e.target.nextElementSibling.textContent = value + '%';
-                        this.setAdjustment(adj, value);
-                    });
-                }
-            });
-
-            // Filter buttons
-            this.container.querySelectorAll('[data-filter]').forEach(btn => {
-                if (btn.classList.contains('swp-filter-btn')) {
-                    btn.addEventListener('click', (e) => {
-                        const filter = e.currentTarget.getAttribute('data-filter');
-                        this.applyFilter(filter);
-                        
-                        // Update active state
-                        this.container.querySelectorAll('.swp-filter-btn').forEach(b => {
-                            b.classList.remove('active');
-                        });
-                        e.currentTarget.classList.add('active');
-                    });
-                }
-            });
-
-        }
-
-        bindResizeInputs() {
-            const widthInput = this.container.querySelector('#swp-resize-width');
-            const heightInput = this.container.querySelector('#swp-resize-height');
-            const maintainRatio = this.container.querySelector('#swp-maintain-ratio');
-            
-            if (!widthInput || !heightInput || !this.currentImage) return;
-
-            // Remove old event listeners by cloning and replacing
-            const newWidthInput = widthInput.cloneNode(true);
-            const newHeightInput = heightInput.cloneNode(true);
-            widthInput.parentNode.replaceChild(newWidthInput, widthInput);
-            heightInput.parentNode.replaceChild(newHeightInput, heightInput);
-
-            const aspectRatio = this.currentImage.width / this.currentImage.height;
-            
-            // Real-time width adjustment with aspect ratio
-            newWidthInput.addEventListener('input', (e) => {
-                const newWidth = parseInt(e.target.value);
-                
-                if (maintainRatio.checked) {
-                    const newHeight = Math.round(newWidth / aspectRatio);
-                    newHeightInput.value = newHeight;
-                }
-                
-                // Real-time preview
-                this.updateCanvasSize(parseInt(newWidthInput.value), parseInt(newHeightInput.value));
-            });
-            
-            // Real-time height adjustment with aspect ratio
-            newHeightInput.addEventListener('input', (e) => {
-                const newHeight = parseInt(e.target.value);
-                
-                if (maintainRatio.checked) {
-                    const newWidth = Math.round(newHeight * aspectRatio);
-                    newWidthInput.value = newWidth;
-                }
-                
-                // Real-time preview
-                this.updateCanvasSize(parseInt(newWidthInput.value), parseInt(newHeightInput.value));
-            });
-        }
-
-        updateCanvasSize(width, height) {
-            if (!this.currentImage || !width || !height || width < 1 || height < 1) return;
-
-            // Update canvas dimensions
-            this.canvas.width = width;
-            this.canvas.height = height;
-            
-            // Redraw image at new size
-            this.drawImage();
-        }
-
-        handleAction(action) {
-            switch(action) {
-                case 'upload':
-                    this.container.querySelector('#swp-file-input').click();
-                    break;
-                case 'rotate-left':
-                    this.rotate(-90);
-                    break;
-                case 'rotate-right':
-                    this.rotate(90);
-                    break;
-                case 'flip-h':
-                    this.flip('horizontal');
-                    break;
-                case 'flip-v':
-                    this.flip('vertical');
-                    break;
-                case 'toggle-adjustments':
-                    this.togglePanel('.swp-adjustments-panel');
-                    break;
-                case 'toggle-filters':
-                    this.togglePanel('.swp-filters-panel');
-                    break;
-                case 'toggle-resize':
-                    this.togglePanel('.swp-resize-panel');
-                    break;
-                case 'apply-resize':
-                    this.applyResize();
-                    break;
-                case 'reset':
-                    this.reset();
-                    break;
-                case 'download':
-                    this.download();
-                    break;
-            }
-        }
-
-        togglePanel(selector) {
-            const panel = this.container.querySelector(selector);
-            if (panel) {
-                panel.classList.toggle('active');
-                
-                // Close other panels
-                const panels = ['.swp-adjustments-panel', '.swp-filters-panel', '.swp-resize-panel'];
-                panels.forEach(p => {
-                    if (p !== selector) {
-                        this.container.querySelector(p)?.classList.remove('active');
-                    }
-                });
-            }
-        }
-
-        loadImage(imageUrl) {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            
-            img.onload = () => {
-                this.originalImage = img;
-                this.currentImage = img;
-                
-                // Set canvas to exact image dimensions
-                this.canvas.width = img.width;
-                this.canvas.height = img.height;
-                
-                // Update resize inputs
-                const widthInput = this.container.querySelector('#swp-resize-width');
-                const heightInput = this.container.querySelector('#swp-resize-height');
-                if (widthInput) widthInput.value = img.width;
-                if (heightInput) heightInput.value = img.height;
-                
-                // Bind resize inputs with aspect ratio
-                this.bindResizeInputs();
-                
-                this.drawImage();
-                this.emit('load');
-            };
-
-            img.onerror = () => {
-                console.error('Failed to load image');
-            };
-
-            img.src = imageUrl;
-        }
-
-        drawImage() {
-            if (!this.currentImage) return;
-
-            const canvas = this.canvas;
-            const ctx = this.ctx;
-
-            // Clear canvas
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-            // Apply transformations
-            ctx.save();
-            
-            // Move to center for transformations
-            ctx.translate(canvas.width / 2, canvas.height / 2);
-            
-            // Apply rotation
-            ctx.rotate(this.currentState.rotation * Math.PI / 180);
-            
-            // Apply flips
-            ctx.scale(
-                this.currentState.flipH ? -1 : 1,
-                this.currentState.flipV ? -1 : 1
-            );
-
-            // Apply CSS filters
-            ctx.filter = this.getFilterString();
-
-            // Draw image at actual size (canvas matches image dimensions)
-            ctx.drawImage(
-                this.currentImage,
-                -canvas.width / 2,
-                -canvas.height / 2,
-                canvas.width,
-                canvas.height
-            );
-
-            ctx.restore();
-
-            this.emit('change');
-        }
-
-        getFilterString() {
-            let filters = [];
-
-            if (this.currentState.brightness !== 100) {
-                filters.push(`brightness(${this.currentState.brightness}%)`);
-            }
-            if (this.currentState.contrast !== 100) {
-                filters.push(`contrast(${this.currentState.contrast}%)`);
-            }
-            if (this.currentState.saturation !== 100) {
-                filters.push(`saturate(${this.currentState.saturation}%)`);
-            }
-
-            switch(this.currentState.filter) {
-                case 'grayscale':
-                    filters.push('grayscale(100%)');
-                    break;
-                case 'sepia':
-                    filters.push('sepia(100%)');
-                    break;
-                case 'invert':
-                    filters.push('invert(100%)');
-                    break;
-                case 'blur':
-                    filters.push('blur(5px)');
-                    break;
-            }
-
-            return filters.length > 0 ? filters.join(' ') : 'none';
-        }
-
-        rotate(degrees) {
-            if (!this.currentImage) return;
-            
-            this.currentState.rotation = (this.currentState.rotation + degrees) % 360;
-            this.drawImage();
-        }
-
-        flip(direction) {
-            if (!this.currentImage) return;
-
-            if (direction === 'horizontal') {
-                this.currentState.flipH = !this.currentState.flipH;
-            } else if (direction === 'vertical') {
-                this.currentState.flipV = !this.currentState.flipV;
-            }
-
-            this.drawImage();
-        }
-
-        setAdjustment(adjustment, value) {
-            if (!this.currentImage) return;
-
-            this.currentState[adjustment] = value;
-            this.drawImage();
-        }
-
-        applyFilter(filterName) {
-            if (!this.currentImage) return;
-
-            this.currentState.filter = filterName;
-            this.drawImage();
-        }
-
-        applyResize() {
-            if (!this.currentImage) return;
-
-            const widthInput = this.container.querySelector('#swp-resize-width');
-            const heightInput = this.container.querySelector('#swp-resize-height');
-            
-            const newWidth = parseInt(widthInput.value);
-            const newHeight = parseInt(heightInput.value);
-
-            if (!newWidth || !newHeight || newWidth < 1 || newHeight < 1) {
-                alert('Please enter valid dimensions');
-                return;
-            }
-
-            // Canvas size is already updated by real-time preview
-            // Now we need to make the resize permanent by updating the currentImage
-            
-            // Create temporary canvas with current canvas content
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = this.canvas.width;
-            tempCanvas.height = this.canvas.height;
-            const tempCtx = tempCanvas.getContext('2d');
-
-            // Copy current canvas content
-            tempCtx.drawImage(this.canvas, 0, 0);
-
-            // Load as new current image
-            const resizedImage = new Image();
-            resizedImage.onload = () => {
-                this.currentImage = resizedImage;
-                this.originalImage = resizedImage;
-                
-                // Rebind resize inputs with new aspect ratio
-                this.bindResizeInputs();
-                
-                this.drawImage();
-            };
-            resizedImage.src = tempCanvas.toDataURL();
-        }
-
-        crop(x, y, width, height) {
-            if (!this.currentImage) return;
-
-            // Create temporary canvas for cropping
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = width;
-            tempCanvas.height = height;
-            const tempCtx = tempCanvas.getContext('2d');
-
-            // Draw cropped area
-            tempCtx.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
-
-            // Load cropped image
-            const croppedImage = new Image();
-            croppedImage.onload = () => {
-                this.currentImage = croppedImage;
-                this.drawImage();
-            };
-            croppedImage.src = tempCanvas.toDataURL();
-        }
-
-        reset() {
-            // Reset all states
-            this.currentState = {
-                brightness: 100,
-                contrast: 100,
-                saturation: 100,
-                rotation: 0,
-                flipH: false,
-                flipV: false,
-                filter: 'none'
-            };
-
-            // Reset sliders
-            ['brightness', 'contrast', 'saturation'].forEach(adj => {
-                const slider = this.container.querySelector(`#swp-${adj}`);
-                if (slider) {
-                    slider.value = 100;
-                    slider.nextElementSibling.textContent = '100%';
-                }
-            });
-
-            // Reset filter selection
-            this.container.querySelectorAll('.swp-filter-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (btn.getAttribute('data-filter') === 'none') {
-                    btn.classList.add('active');
-                }
-            });
-
-            // Reset image
-            if (this.originalImage) {
-                this.currentImage = this.originalImage;
-                this.drawImage();
-            }
-        }
-
-        getImageData(format = 'jpeg', quality = 0.9) {
-            if (!this.canvas) return null;
-
-            const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
-            return this.canvas.toDataURL(mimeType, quality);
-        }
-
-        download() {
-            const dataUrl = this.getImageData('png');
-            if (!dataUrl) return;
-
-            const link = document.createElement('a');
-            link.download = `swp-edited-${Date.now()}.png`;
-            link.href = dataUrl;
-            link.click();
-
-            this.emit('save');
-        }
-
-        // Event system
-        on(event, callback) {
-            if (!this.eventListeners[event]) {
-                this.eventListeners[event] = [];
-            }
-            this.eventListeners[event].push(callback);
-        }
-
-        emit(event, data) {
-            if (this.eventListeners[event]) {
-                this.eventListeners[event].forEach(callback => {
-                    callback(data);
-                });
-            }
-        }
+  constructor(container, options = {}) {
+    this.container = typeof container === 'string' 
+      ? document.querySelector(container) 
+      : container;
+    
+    if (!this.container) {
+      throw new Error('SWP: Container element not found');
     }
 
-// Auto-initialize for declarative approach
-if (typeof document !== 'undefined') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const declarativeContainers = document.querySelectorAll('[data-swp]');
-        declarativeContainers.forEach(container => {
-            // Parse data attributes for options
-            const options = {};
-            
-            // Parse basic options
-            if (container.dataset.swpImageUrl) {
-                options.imageUrl = container.dataset.swpImageUrl;
-            }
-            if (container.dataset.swpWidth) {
-                options.width = parseInt(container.dataset.swpWidth);
-            }
-            if (container.dataset.swpHeight) {
-                options.height = parseInt(container.dataset.swpHeight);
-            }
-            
-            // Parse boolean options
-            if (container.dataset.swpShowIcons !== undefined) {
-                options.showIcons = container.dataset.swpShowIcons !== 'false';
-            }
-            if (container.dataset.swpShowLabels !== undefined) {
-                options.showLabels = container.dataset.swpShowLabels !== 'false';
-            }
-            
-            // Parse labels object
-            if (container.dataset.swpLabels) {
-                try {
-                    // Support both JSON and simple key:value format
-                    let labelsStr = container.dataset.swpLabels.trim();
-                    
-                    // If it looks like JSON, parse as JSON
-                    if (labelsStr.startsWith('{')) {
-                        options.labels = JSON.parse(labelsStr);
-                    } else {
-                        // Parse simple format: "upload: 'text'; resize: 'text'"
-                        options.labels = {};
-                        const pairs = labelsStr.split(';');
-                        pairs.forEach(pair => {
-                            const [key, value] = pair.split(':').map(s => s.trim());
-                            if (key && value) {
-                                // Remove quotes and parse null
-                                const cleanValue = value.replace(/^['"]|['"]$/g, '');
-                                options.labels[key] = cleanValue === 'null' ? null : cleanValue;
-                            }
-                        });
-                    }
-                } catch (e) {
-                    console.error('Failed to parse data-swp-labels:', e);
-                }
-            }
-            
-            new SWP(container, options);
-        });
+    this.options = {
+      width: options.width || 1920,
+      height: options.height || 1080,
+      theme: options.theme || 'dark',
+      accentColor: options.accentColor || '#00FF99',
+      ...options
+    };
+
+    // Core systems
+    this.events = new EventEmitter();
+    this.canvas = new Canvas(this, { width: this.options.width, height: this.options.height });
+    this.history = new History(this);
+    this.keyboard = new Keyboard(this);
+    
+    // Managers
+    this.layers = new LayerManager(this);
+    this.tools = new ToolManager(this);
+    this.selection = new Selection(this);
+    this.filters = new FilterManager(this);
+    this.colors = new ColorManager(this);
+    this.file = new FileManager(this);
+    this.clipboard = new Clipboard(this);
+    
+    // UI
+    this.ui = new UI(this);
+
+    this.init();
+  }
+
+  init() {
+    // Initialize UI
+    this.ui.init(this.container);
+    
+    // Apply theme class
+    this.applyTheme(this.options.theme);
+    
+    // Apply accent color
+    this.applyAccentColor(this.options.accentColor);
+    
+    // Initialize canvas in workspace
+    const workspace = this.ui.getWorkspace();
+    this.canvas.init(workspace);
+    
+    // Bind tool events to canvas
+    this.tools.bindCanvasEvents(this.canvas.displayCanvas);
+    
+    // Create initial document
+    this.file.newDocument({
+      width: this.options.width,
+      height: this.options.height
     });
+    
+    // Update UI
+    this.ui.updateLayersPanel();
+    this.ui.updateHistoryPanel();
+    this.ui.updateToolbox();
+    
+    // Emit ready
+    this.events.emit(Events.READY);
+  }
+
+  // Public API
+  
+  loadImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        this.file.newDocument({ width: img.width, height: img.height });
+        const layer = this.layers.getActiveLayer();
+        if (layer) {
+          layer.ctx.drawImage(img, 0, 0);
+          this.canvas.render();
+          this.history.pushState('Load Image');
+        }
+        resolve();
+      };
+      img.onerror = reject;
+      img.src = url;
+    });
+  }
+
+  newDocument(width, height, background = '#ffffff') {
+    this.file.newDocument({ width, height, background });
+  }
+
+  getImageData(format = 'png', quality = 1) {
+    return this.canvas.toDataURL(`image/${format}`, quality);
+  }
+
+  export(format = 'png', quality = 1) {
+    return this.file.export(format, quality);
+  }
+
+  undo() {
+    return this.history.undo();
+  }
+
+  redo() {
+    return this.history.redo();
+  }
+
+  setTool(name) {
+    this.tools.setTool(name);
+  }
+
+  applyFilter(name, options) {
+    this.filters.applyFilter(name, options);
+  }
+
+  on(event, callback) {
+    return this.events.on(event, callback);
+  }
+
+  off(event, callback) {
+    this.events.off(event, callback);
+  }
+
+  cancelCurrentAction() {
+    this.filters.cancelPreview();
+    this.selection.clear();
+  }
+
+  confirmCurrentAction() {
+    // Confirm crop, text, etc.
+    const tool = this.tools.currentTool;
+    if (tool?.name === 'crop' && tool.applyCrop) {
+      tool.applyCrop();
+    }
+    if (tool?.name === 'text' && tool.commitText) {
+      tool.commitText();
+    }
+  }
+
+  applyTheme(theme) {
+    // The container itself has .swp-app class added by UI.init()
+    const app = this.container.classList.contains('swp-app') 
+      ? this.container 
+      : this.container.querySelector('.swp-app');
+    if (app) {
+      app.classList.remove('swp-theme-dark', 'swp-theme-light');
+      app.classList.add(`swp-theme-${theme}`);
+    }
+    this.options.theme = theme;
+  }
+
+  applyAccentColor(color) {
+    const app = this.container.classList.contains('swp-app') 
+      ? this.container 
+      : this.container.querySelector('.swp-app');
+    if (app && color) {
+      // Parse hex color to RGB for variations
+      const hex = color.replace('#', '');
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      
+      // Create lighter hover color (add 20% brightness)
+      const lighten = (val) => Math.min(255, Math.round(val + (255 - val) * 0.2));
+      const hoverR = lighten(r);
+      const hoverG = lighten(g);
+      const hoverB = lighten(b);
+      const hoverColor = `#${hoverR.toString(16).padStart(2, '0')}${hoverG.toString(16).padStart(2, '0')}${hoverB.toString(16).padStart(2, '0')}`;
+      
+      // Calculate relative luminance for contrast (WCAG formula)
+      const toLinear = (val) => {
+        const sRGB = val / 255;
+        return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+      };
+      const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+      
+      // Choose contrasting text color (black for light backgrounds, white for dark)
+      // Threshold 0.179 is the crossover point where black/white have equal contrast
+      const contrastColor = luminance > 0.179 ? '#000000' : '#ffffff';
+      
+      // Apply CSS variables
+      app.style.setProperty('--swp-accent', color);
+      app.style.setProperty('--swp-accent-hover', hoverColor);
+      app.style.setProperty('--swp-accent-dim', `rgba(${r}, ${g}, ${b}, 0.2)`);
+      app.style.setProperty('--swp-accent-contrast', contrastColor);
+    }
+    this.options.accentColor = color;
+  }
+
+  setAccentColor(color) {
+    this.applyAccentColor(color);
+    this.events.emit(Events.CHANGE, { type: 'accentColor', color });
+  }
+
+  setTheme(theme) {
+    if (theme === 'light' || theme === 'dark') {
+      this.applyTheme(theme);
+      this.events.emit(Events.CHANGE, { type: 'theme', theme });
+    }
+  }
+
+  destroy() {
+    this.keyboard.destroy();
+    this.selection.destroy();
+    this.canvas.destroy();
+    this.container.innerHTML = '';
+  }
 }
 
+// Static method to parse data attributes
+SWP.parseDataAttributes = function(element) {
+  const options = {};
+  
+  // Parse data-swp-* attributes
+  const dataset = element.dataset;
+  
+  // Width
+  if (dataset.swpWidth) {
+    options.width = parseInt(dataset.swpWidth, 10);
+  }
+  
+  // Height
+  if (dataset.swpHeight) {
+    options.height = parseInt(dataset.swpHeight, 10);
+  }
+  
+  // Theme
+  if (dataset.swpTheme) {
+    options.theme = dataset.swpTheme;
+  }
+  
+  // Any other data-swp-* attributes (convert kebab-case to camelCase)
+  for (const key in dataset) {
+    if (key.startsWith('swp') && key !== 'swp') {
+      // Remove 'swp' prefix and convert first char to lowercase
+      const optionKey = key.slice(3).charAt(0).toLowerCase() + key.slice(4);
+      if (!(optionKey in options)) {
+        // Try to parse as number or boolean
+        let value = dataset[key];
+        if (value === 'true') value = true;
+        else if (value === 'false') value = false;
+        else if (!isNaN(value) && value !== '') value = parseFloat(value);
+        options[optionKey] = value;
+      }
+    }
+  }
+  
+  return options;
+};
+
+// Auto-initialize elements with data-swp attribute
+SWP.autoInit = function() {
+  const elements = document.querySelectorAll('[data-swp]');
+  const instances = [];
+  
+  elements.forEach(element => {
+    // Skip if already initialized
+    if (element.swpInstance) return;
+    
+    const options = SWP.parseDataAttributes(element);
+    const instance = new SWP(element, options);
+    element.swpInstance = instance;
+    instances.push(instance);
+  });
+  
+  return instances;
+};
+
+// Store all auto-initialized instances
+SWP.instances = [];
+
 // Export
+export { SWP, Events };
 export default SWP;
 
-// Also attach to window for non-module usage
+// Global access
 if (typeof window !== 'undefined') {
-    window.SWP = SWP;
+  window.SWP = SWP;
+  
+  // Auto-init on DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      SWP.instances = SWP.autoInit();
+    });
+  } else {
+    // DOM already loaded
+    SWP.instances = SWP.autoInit();
+  }
 }