feat: pattern editor

README.md

@@ -2,16 +2,20 @@
 
 LEDLab is a tool for streaming animations to LED matrices connected to SPORE nodes. Create visual effects with real-time parameter control and individual node management.
 
-![ledlab](assets/ledlab.png)
+![ledlab](assets/ledlab.png)  
+![editor](assets/editor.png)
+
 
 ## Features
 
 - **Multi-Node Management**: Control multiple SPORE nodes individually
 - **Real-Time Preview**: See live canvas preview for each node
 - **Dynamic Presets**: Choose from 10+ built-in animation presets
+- **Visual Preset Editor**: Create custom animations with building blocks
 - **Live Parameter Control**: Adjust animation parameters in real-time
 - **Auto-Discovery**: Automatically discovers SPORE nodes on the network
 - **Modern UI**: Clean, responsive interface with dark/light theme support
+- **Import/Export**: Save and share custom presets as JSON files
 
 ## Architecture
 
@@ -83,12 +87,17 @@ spore-ledlab/
 ├── presets/            # Animation preset implementations
 │   ├── preset-registry.js
 │   ├── base-preset.js
+│   ├── building-blocks.js  # Reusable shape/animation components
+│   ├── custom-preset.js    # Configurable preset engine
 │   ├── rainbow-preset.js
 │   ├── lava-lamp-preset.js
+│   ├── examples/           # Example custom preset JSON files
 │   └── ...
 ├── public/             # Frontend web UI
 │   ├── index.html
 │   ├── scripts/       # JavaScript modules
+│   │   ├── preset-editor.js  # Visual preset editor
+│   │   └── ...
 │   └── styles/        # CSS stylesheets
 └── package.json       # Project dependencies
 ```
@@ -228,6 +237,88 @@ const MyCustomPreset = require('./my-custom-preset');
 registerPreset('my-custom', MyCustomPreset);
 ```
 
+## Preset Editor
+
+The **🎨 Editor** view allows you to create custom animations by combining reusable building blocks without writing code.
+
+### Building Blocks
+
+#### Shapes
+- **Circle**: Round shape with adjustable radius
+- **Rectangle**: Four-sided shape with width and height  
+- **Triangle**: Three-sided shape
+- **Blob**: Soft circle with energy field falloff
+- **Point**: Single pixel
+- **Line**: Line between two points
+
+#### Patterns
+- **Trail**: Fade effect on previous frames
+- **Radial**: Gradient radiating from center
+- **Spiral**: Rotating spiral arms
+
+#### Colors
+- **Solid**: Single color
+- **Gradient**: Linear blend between two colors
+- **Palette**: Multi-stop gradient with custom colors
+- **Rainbow**: Color wheel effect
+
+#### Animations
+- **Move**: Linear movement from point A to B
+- **Rotate**: Rotation around center
+- **Pulse**: Scale oscillation (breathing effect)
+- **Oscillate X/Y**: Sine wave movement on X or Y axis
+- **Fade**: Fade in or out
+
+### Creating a Custom Preset
+
+1. Navigate to the **🎨 Editor** view
+2. Enter a name and description
+3. Add layers (shapes or patterns):
+   - Select type and configure properties
+   - Set position, size, and color
+   - Add optional animation
+   - Click **➕ Add Layer**
+4. Edit layers with ✏️, reorder with ▲/▼, or delete with ✕
+5. Preview with **▶️ Preview** (requires a selected node from Stream view)
+6. **💾 Save** to browser localStorage or **📤 Export JSON** to file
+
+### Example Presets
+
+Import example JSON files from `presets/examples/` to learn:
+
+- **Pulsing Circle**: Rainbow circle with pulse animation
+- **Bouncing Squares**: Multiple colored squares oscillating
+- **Spiral Rainbow**: Rotating spiral with rainbow gradient
+- **Moving Triangle**: Triangle with linear movement
+
+Use **📥 Import JSON** to load examples and customize them.
+
+### JSON Format
+
+Presets are stored as JSON:
+
+```json
+{
+  "name": "My Preset",
+  "description": "Custom animation",
+  "layers": [
+    {
+      "type": "shape",
+      "shape": "circle",
+      "position": { "x": 8, "y": 8 },
+      "size": { "radius": 4 },
+      "color": { "type": "solid", "value": "ff0000" },
+      "animation": {
+        "type": "pulse",
+        "params": { "minScale": 0.5, "maxScale": 1.5, "frequency": 1.0 }
+      }
+    }
+  ]
+}
+```
+
+See `presets/examples/README.md` for detailed documentation.
+
 ## Troubleshooting
 
 ### Nodes Not Appearing
@@ -248,6 +339,12 @@ registerPreset('my-custom', MyCustomPreset);
 - Choose a preset from the dropdown
 - Verify the node shows "streaming" status
 
+### Custom Preset Issues
+
+- **No preview**: Ensure a node is selected from Stream view first
+- **Nothing visible**: Check layer has valid position/size values
+- **Errors**: Open browser console (F12) for detailed error messages
+
 ## Technology Stack
 
 **Backend:**