senangwebs-photobooth 1.0.1

package/.github/copilot-instructions.md

@@ -0,0 +1,252 @@
+# SenangWebs Photobooth - AI Agent Instructions
+
+## Project Overview
+A zero-dependency, client-side photo editing library built as a UMD module. All image processing happens in the browser using HTML5 Canvas API and CSS filters. Single-class architecture exported as both ES6 module and global `window.SWP`.
+
+## Architecture & Design Principles
+
+### Core Philosophy
+- **Zero runtime dependencies** - Pure vanilla JavaScript, no frameworks
+- **Client-side only** - No server-side processing, all Canvas API based
+- **Single responsibility** - One `SWP` class handles all functionality (`src/js/swp.js`)
+- **UMD export** - Works in browser (global), CommonJS, AMD, and ES6 modules
+
+### Key Architectural Pattern
+The library follows a **self-contained UI generator** pattern:
+```javascript
+// Constructor -> init() -> createUI() -> bindEvents()
+class SWP {
+  constructor(container, options) {
+    // State setup
+    this.currentState = { brightness: 100, contrast: 100, saturation: 100, ... }
+    this.init();
+  }
+  
+  createUI() {
+    // Dynamically generates complete UI: toolbar, canvas, adjustment panels
+    // All HTML is template strings, no external templates
+  }
+  
+  drawImage() {
+    // Core rendering loop - ALL visual changes go through here
+    // Applies state transformations to canvas on every change
+  }
+}
+```
+
+**Critical:** Every image manipulation (rotate, flip, adjust, filter) calls `drawImage()` which re-renders from `currentState`. Never manipulate canvas directly outside `drawImage()`.
+
+## Build System & Workflows
+
+### Development Commands
+```bash
+npm run dev      # Webpack watch mode with auto-rebuild (no dev server)
+npm run build    # Production: dist/swp.min.js (~10KB) + swp.min.css (~4KB)
+```
+**Note:** There is no dev server configured. Open `examples/index.html` directly in browser or use your own local server. The `dev` script runs webpack in watch mode for auto-rebuilding.
+
+### Build Configuration (webpack.config.js)
+- **Dual entry points:** `swp.js` and `styles.css` (separate entries, not CSS-in-JS)
+- **Output naming:**
+  - Dev: `swp.js` + `swp.css`
+  - Prod: Uses same filenames (no .min suffix - configured elsewhere)
+- **UMD library config:** Exports as `SWP` global + default ES6 export
+- **NO HtmlWebpackPlugin** - Demo pages reference dist/ files via script tags
+- **CSS extraction:** MiniCssExtractPlugin extracts CSS to separate file
+
+### File Structure
+```
+src/
+├── js/swp.js      # Single ~630-line class - ALL library logic
+├── css/swp.css    # Complete styling (~6KB)
+dist/              # Generated build artifacts
+├── swp.js         # Built library bundle
+└── swp.css        # Built styles
+examples/
+└── index.html     # Standalone example (uses dist/ files via script tags)
+spec.md            # Original specification - source of truth
+```
+
+**Important:** Demo pages (`examples/index.html`) are NOT bundled by webpack. They reference built dist/ files directly via `<script>` tags. Always run `npm run build` first before testing demos.
+
+## Code Conventions & Patterns
+
+### State Management Pattern
+All edits are **non-destructive** until export:
+```javascript
+this.currentState = {
+  brightness: 100,    // 0-200 range
+  contrast: 100,      // 0-200 range
+  saturation: 100,    // 0-200 range
+  rotation: 0,        // 0, 90, 180, 270
+  flipH: false,       // boolean
+  flipV: false,       // boolean
+  filter: 'none'      // 'none' | 'grayscale' | 'sepia' | 'invert' | 'blur'
+};
+```
+State is applied via Canvas transforms + CSS filter strings in `drawImage()`.
+
+### Resize Functionality
+Canvas dimensions dynamically adjust to match loaded image:
+```javascript
+// In loadImage() - canvas resizes to exact image dimensions
+this.canvas.width = img.width;
+this.canvas.height = img.height;
+```
+Users can manually resize via UI panel which updates canvas dimensions and redraws.
+
+### Crop Functionality
+Crop method exists but **NO UI implementation** - only programmatic access:
+```javascript
+// crop(x, y, width, height) at lines ~519-538
+crop(x, y, width, height) {
+  // Creates temp canvas, draws cropped region from main canvas
+  // Loads result as new currentImage
+  tempCtx.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
+}
+```
+**Important:** Crops from current canvas state (including all applied transforms), not original image. Coordinates are relative to current canvas dimensions.
+
+**Missing UI features** (mentioned in spec.md but not implemented):
+- Interactive crop selection overlay
+- Aspect ratio presets (1:1, 4:3, 16:9, freeform)
+- Visual crop handles/rectangle
+
+If adding crop UI, follow the pattern: `createCropPanelHTML()` → add toolbar button → `handleAction('toggle-crop')` → bind mouse events for selection rectangle.
+
+### Event System
+Simple pub-sub pattern (`on()` / `emit()`):
+```javascript
+swp.on('load', () => {});    // Image loaded
+swp.on('change', () => {});  // Any edit applied
+swp.on('save', () => {});    // Image exported
+```
+
+### UI Generation Pattern
+All UI is **template strings** in `create*HTML()` methods:
+- `createToolbarHTML()` - Toolbar with data-action attributes
+- `createAdjustmentsPanelHTML()` - Sliders for brightness/contrast/saturation
+- `createFiltersPanelHTML()` - Filter button grid
+- `createResizePanelHTML()` - Canvas dimension controls
+
+Event delegation via `data-action` attributes → `handleAction(action)` dispatcher.
+
+### CSS Filter Application
+Filters use **CSS filter property** applied to canvas context:
+```javascript
+getFilterString() {
+  let filters = [];
+  if (this.currentState.brightness !== 100) filters.push(`brightness(${this.currentState.brightness}%)`);
+  // ... combine all active filters
+  return filters.join(' ');
+}
+ctx.filter = this.getFilterString(); // Applied before drawImage()
+```
+
+## Common Development Tasks
+
+### Adding Interactive Crop UI
+Currently crop only works programmatically (`swp.crop(x, y, w, h)`). To add UI:
+1. Create `createCropPanelHTML()` with aspect ratio buttons
+2. Add crop mode toggle to toolbar: `<button data-action="toggle-crop">Crop</button>`
+3. Add case in `handleAction()`: `case 'toggle-crop': this.enableCropMode(); break;`
+4. Implement selection rectangle with mouse events:
+   - `mousedown`: Start selection at (x, y)
+   - `mousemove`: Draw selection rectangle overlay
+   - `mouseup`: Call `this.crop(x, y, width, height)`
+5. Use CSS absolute positioning for overlay on `.swp-canvas-container`
+
+### Adding a New Filter
+1. Add to `createFiltersPanelHTML()` button grid
+2. Add case in `getFilterString()` switch statement
+3. CSS filter property examples: `grayscale(100%)`, `sepia(100%)`, `blur(5px)`
+
+### Adding a New Adjustment
+1. Add to `currentState` with default value
+2. Add slider in `createAdjustmentsPanelHTML()`
+3. Add event binding in `bindEvents()` for the slider
+4. Include in `getFilterString()` filter chain
+
+### Modifying Canvas Rendering
+**Always work in `drawImage()` method** - this is the single rendering pipeline:
+```javascript
+drawImage() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  // Apply all transforms based on currentState
+  ctx.translate(canvas.width / 2, canvas.height / 2);
+  ctx.rotate(this.currentState.rotation * Math.PI / 180);
+  ctx.scale(flipH ? -1 : 1, flipV ? -1 : 1);
+  ctx.filter = this.getFilterString();
+  ctx.drawImage(this.currentImage, ...);
+  ctx.restore();
+  this.emit('change');
+}
+```
+
+## Critical Implementation Details
+
+### Image Loading & CORS
+Images loaded with `crossOrigin = 'anonymous'` to enable canvas export:
+```javascript
+const img = new Image();
+img.crossOrigin = 'anonymous';  // Required for toDataURL()
+img.onload = () => { ... };
+```
+
+### Auto-initialization Pattern
+Supports declarative HTML usage via `data-swp` attribute:
+```javascript
+// In module footer:
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-swp]').forEach(container => {
+      new SWP(container);
+    });
+  });
+}
+```
+
+### Export Format
+```javascript
+getImageData(format = 'jpeg', quality = 0.9) {
+  const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
+  return this.canvas.toDataURL(mimeType, quality);
+}
+```
+
+## Testing & Debugging
+
+### Manual Testing
+Use dev server console:
+```javascript
+swpInstance.loadImage('https://picsum.photos/800/600');
+swpInstance.rotate(90);
+swpInstance.setAdjustment('brightness', 150);
+swpInstance.applyFilter('grayscale');
+```
+
+### Common Pitfalls
+- **Don't manipulate canvas outside `drawImage()`** - breaks state sync
+- **Always call `drawImage()` after state changes** - or UI won't update
+- **CSS import must be first line in swp.js** - webpack extracts it
+- **Filter values are percentages (0-200)** - not 0-1 or 0-255
+- **Rotation is in degrees** - convert to radians in drawImage()
+
+## Integration Points
+
+### Browser APIs Used
+- **Canvas 2D Context:** All rendering (`getContext('2d')`)
+- **FileReader API:** Image upload (`readAsDataURL`)
+- **Canvas.toDataURL():** Image export
+- **CSS filter property:** Filter effects
+
+### No External Dependencies
+- No npm runtime dependencies
+- No framework requirements
+- Works in vanilla HTML, React, Vue, etc.
+
+## Documentation References
+- `spec.md` - Original feature specification (source of truth)
+- `README.md` - API documentation and usage examples
+- `examples/index.html` - Standalone usage example (uses built dist/ files)

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 A.Hakim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,297 @@
+# SenangWebs Photobooth (SWP)
+
+A lightweight and easy-to-use JavaScript library for client-side photo editing. No dependencies, no server-side processing - everything happens in your browser!
+![SenangWebs Photobooth Preview](https://raw.githubusercontent.com/a-hakim/senangwebs-photobooth/master/swp_preview.png)
+
+## Quick Start
+
+### Development
+
+1. **Install dependencies:**
+
+   ```bash
+   npm install
+   ```
+2. **Start development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+   This will start a dev server at `http://localhost:3000` with hot reloading.
+3. **Build for production:**
+
+   ```bash
+   npm run build
+   ```
+
+   This creates optimized files in the `dist/` directory.
+
+### Using the Library
+
+#### Include the built files:
+
+```html
+<link rel="stylesheet" href="dist/swp.min.css">
+<script src="dist/swp.min.js"></script>
+```
+
+#### Or use source files directly:
+
+```html
+<link rel="stylesheet" href="src/css/swp.css">
+<script src="src/js/swp.js"></script>
+```
+
+## Features
+
+- Cropping** - Select and crop image areas with predefined aspect ratios
+- Rotating** - Rotate images in 90-degree increments
+- Flipping** - Flip images horizontally and vertically
+- Adjustments** - Fine-tune brightness, contrast, and saturation
+- Filters** - Apply pre-defined filters (Grayscale, Sepia, Invert, Blur)
+- **Export** - Save edited images in JPEG or PNG format
+
+## Usage
+
+### Programmatic Approach
+
+```html
+<div id="photobooth-container"></div>
+
+<script>
+    const container = document.getElementById('photobooth-container');
+    const swp = new SWP(container, {
+        imageUrl: 'path/to/your/image.jpg',
+        width: 800,
+        height: 600
+    });
+
+    // Listen to events
+    swp.on('load', () => console.log('Image loaded'));
+    swp.on('change', () => console.log('Image changed'));
+    swp.on('save', () => console.log('Image saved'));
+</script>
+```
+
+### Declarative Approach
+
+Use HTML data attributes for zero-JavaScript configuration:
+
+```html
+<!-- Basic -->
+<div data-swp></div>
+
+<!-- With configuration -->
+<div data-swp
+     data-swp-width="900"
+     data-swp-height="600"
+     data-swp-show-labels="false"></div>
+
+<!-- With custom labels (simple format) -->
+<div data-swp
+     data-swp-labels="upload: 'Muat Naik'; save: 'Simpan'; reset: 'Set Semula'"></div>
+
+<!-- With custom labels (JSON format) -->
+<div data-swp
+     data-swp-labels='{"upload":"Télécharger","save":"Enregistrer"}'></div>
+```
+
+**Available Data Attributes:**
+
+- `data-swp` - Enable auto-initialization
+- `data-swp-width` - Canvas width (number)
+- `data-swp-height` - Canvas height (number)
+- `data-swp-image-url` - Initial image URL
+- `data-swp-show-icons` - Show/hide icons ("true" or "false")
+- `data-swp-show-labels` - Show/hide labels ("true" or "false")
+- `data-swp-labels` - Custom labels (see formats above)
+
+The library will automatically initialize when the DOM is ready.
+
+## API Reference
+
+### Initialization
+
+```javascript
+const swp = new SWP(container, options);
+```
+
+**Options:**
+
+- `imageUrl` (String) - URL of the image to load
+- `width` (Number) - Width of the editor in pixels (default: 800)
+- `height` (Number) - Height of the editor in pixels (default: 600)
+- `showIcons` (Boolean) - Show icons in toolbar buttons (default: true)
+- `showLabels` (Boolean) - Show text labels in toolbar buttons (default: true)
+- `labels` (Object) - Custom labels for toolbar buttons
+  - `upload` (String|null) - Label for upload button (default: 'Upload')
+  - `rotateLeft` (String|null) - Label for rotate left button (default: null)
+  - `rotateRight` (String|null) - Label for rotate right button (default: null)
+  - `flipH` (String|null) - Label for flip horizontal button (default: null)
+  - `flipV` (String|null) - Label for flip vertical button (default: null)
+  - `resize` (String|null) - Label for resize button (default: 'Resize')
+  - `adjust` (String|null) - Label for adjustments button (default: 'Adjust')
+  - `filters` (String|null) - Label for filters button (default: 'Filters')
+  - `reset` (String|null) - Label for reset button (default: 'Reset')
+  - `save` (String|null) - Label for save button (default: 'Save')
+
+**Customization Examples:**
+
+```javascript
+// Icons only (compact view)
+const swp = new SWP(container, {
+    showLabels: false
+});
+
+// Custom labels (multilingual support)
+const swp = new SWP(container, {
+    labels: {
+        upload: 'Télécharger',
+        save: 'Enregistrer',
+        reset: 'Réinitialiser'
+    }
+});
+
+// Hide specific labels (set to null)
+const swp = new SWP(container, {
+    labels: {
+        rotateLeft: null,  // No label, icon only
+        rotateRight: null
+    }
+});
+
+// Show labels for rotate and flip buttons
+const swp = new SWP(container, {
+    labels: {
+        rotateLeft: 'Rotate Left',
+        rotateRight: 'Rotate Right',
+        flipH: 'Flip Horizontal',
+        flipV: 'Flip Vertical'
+    }
+});
+```
+
+**Note:** By default, `rotateLeft`, `rotateRight`, `flipH`, and `flipV` have `null` labels (icon-only display) to keep the toolbar compact. You can add custom labels to these buttons as shown above.
+
+### Methods
+
+#### `loadImage(imageUrl)`
+
+Load a new image into the editor.
+
+```javascript
+swp.loadImage('path/to/image.jpg');
+```
+
+#### `rotate(degrees)`
+
+Rotate the image by specified degrees.
+
+```javascript
+swp.rotate(90);  // Rotate 90 degrees clockwise
+swp.rotate(-90); // Rotate 90 degrees counter-clockwise
+```
+
+#### `flip(direction)`
+
+Flip the image horizontally or vertically.
+
+```javascript
+swp.flip('horizontal');
+swp.flip('vertical');
+```
+
+#### `setAdjustment(adjustment, value)`
+
+Apply adjustments to the image.
+
+```javascript
+swp.setAdjustment('brightness', 150); // Range: 0-200
+swp.setAdjustment('contrast', 120);   // Range: 0-200
+swp.setAdjustment('saturation', 80);  // Range: 0-200
+```
+
+#### `applyFilter(filterName)`
+
+Apply a pre-defined filter.
+
+```javascript
+swp.applyFilter('grayscale');
+swp.applyFilter('sepia');
+swp.applyFilter('invert');
+swp.applyFilter('blur');
+swp.applyFilter('none'); // Remove filter
+```
+
+#### `crop(x, y, width, height)`
+
+Crop the image to specified dimensions.
+
+```javascript
+swp.crop(100, 100, 400, 300);
+```
+
+#### `reset()`
+
+Reset all edits and revert to original image.
+
+```javascript
+swp.reset();
+```
+
+#### `getImageData(format, quality)`
+
+Export the edited image data.
+
+```javascript
+const dataUrl = swp.getImageData('png');        // PNG format
+const dataUrl = swp.getImageData('jpeg', 0.9);  // JPEG with 90% quality
+```
+
+### Events
+
+Listen to events using the `on()` method:
+
+```javascript
+swp.on('load', () => {
+    console.log('Image loaded successfully');
+});
+
+swp.on('change', () => {
+    console.log('Image has been edited');
+});
+
+swp.on('save', () => {
+    console.log('Image saved');
+});
+```
+
+## NPM Scripts
+
+- `npm run dev` - Start development server with hot reload
+- `npm run build` - Build for production
+
+## Browser Compatibility
+
+SWP works on all modern browsers that support HTML5 Canvas API and CSS filters:
+
+- ✅ Chrome (latest 2 versions)
+- ✅ Firefox (latest 2 versions)
+- ✅ Edge (latest 2 versions)
+- ✅ Safari (latest 2 versions)
+
+## License
+
+MIT License - Feel free to use in your projects!
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Future Enhancements
+
+- More filters and adjustments
+- Text and sticker overlays
+- Touch gesture support
+- Framework integrations (React, Vue, Angular)

package/dist/styles.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SWP=t():e.SWP=t()}(this,()=>(()=>{"use strict";var e={};return e.default})());