From a954a77c91b60f958126f099543443c2b711c755 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Tue, 10 Feb 2026 00:27:52 +0100
Subject: feat: Add HTML WGSL shader editor tool

ShaderToy-like web tool for live WGSL shader editing with WebGPU preview.

Features:
- Live WebGPU preview with real-time shader updates
- Shader composition: #include directive support
- Animation controls: time, loop_time (0..1), audio_peak
- File I/O: Load/save .wgsl files
- CommonUniforms binding (resolution, time, beat, audio_intensity)
- Keyboard shortcuts: Ctrl+S (save), Ctrl+O (load), Space (play/pause)

Single-file HTML (no build step, no CORS issues).

handoff(Claude): Implemented HTML WGSL shader editor per plan

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/shader_editor/README.md  | 121 +++++++
 tools/shader_editor/index.html | 767 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 888 insertions(+)
 create mode 100644 tools/shader_editor/README.md
 create mode 100644 tools/shader_editor/index.html

diff --git a/tools/shader_editor/README.md b/tools/shader_editor/README.md
new file mode 100644
index 0000000..d22fe5e
--- /dev/null
+++ b/tools/shader_editor/README.md
@@ -0,0 +1,121 @@
+# WGSL Shader Editor
+
+ShaderToy-like web tool for live WGSL shader editing with WebGPU preview.
+
+## Features
+
+- **Live Preview**: WebGPU rendering with real-time shader updates
+- **Shader Composition**: `#include` directive support for modular shaders
+- **Animation Controls**: Configurable time, loop, and audio parameters
+- **File I/O**: Load/save `.wgsl` files directly from browser
+- **Snippet Library**: Pre-loaded math, SDF, and rendering utilities
+
+## Usage
+
+1. **Open**: `file:///path/to/tools/shader_editor/index.html` in Chrome/Edge
+2. **Edit**: Type WGSL code in right pane (auto-composes on change)
+3. **Preview**: View live output in left canvas
+4. **Save**: Click "Save .wgsl" to download
+
+## Keyboard Shortcuts
+
+- `Ctrl/Cmd+S` - Save shader
+- `Ctrl/Cmd+O` - Load shader
+- `Space` - Play/Pause animation
+
+## Available Uniforms
+
+All shaders have access to `CommonUniforms` at `@binding(2)`:
+
+```wgsl
+struct CommonUniforms {
+    resolution: vec2<f32>,      // Canvas width/height
+    aspect_ratio: f32,          // width / height
+    time: f32,                  // Seconds since start (resetable)
+    beat: f32,                  // Loop time 0.0→1.0 (configurable period)
+    audio_intensity: f32,       // Manual slider or auto-pulse
+};
+@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
+```
+
+Standard bindings:
+- `@binding(0)` - Sampler
+- `@binding(1)` - Texture (1x1 black placeholder)
+- `@binding(2)` - CommonUniforms
+
+## Available Snippets
+
+Use `#include "name"` to import:
+
+- `common_uniforms` - CommonUniforms struct definition
+- `math/sdf_shapes` - Sphere, box, torus primitives
+- `math/sdf_utils` - SDF operations (union, smooth blend)
+- `math/common_utils` - Rotation matrices, utilities
+- `math/noise` - Noise functions
+- `render/scene_query_linear` - Linear scene traversal
+- `render/scene_query_bvh` - BVH scene traversal
+- `render/lighting_utils` - Lighting helpers
+- `render/shadows` - Shadow calculation
+- `sdf_primitives` - Additional SDF shapes
+- `lighting` - Phong/lighting models
+- `ray_box` - Ray-AABB intersection
+- `ray_triangle` - Ray-triangle intersection
+
+Click "📚 Snippets" to browse and insert.
+
+## Animation Controls
+
+- **Play/Pause**: Start/stop animation
+- **Loop Time**: Progress bar showing 0.0→1.0 cycle
+- **Loop Period**: Adjust cycle duration (1-10s)
+- **Time**: Ever-increasing clock (reset button)
+- **Audio Peak**: Manual slider (0-1) or auto-pulse mode
+- **Resolution**: Preset canvas sizes
+
+## Example Shaders
+
+### Minimal (No Composition)
+```wgsl
+@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
+
+@fragment fn fs_main(@builtin(position) p: vec4<f32>) -> @location(0) vec4<f32> {
+    let uv = p.xy / uniforms.resolution;
+    return vec4<f32>(uv, 0.5 + 0.5 * sin(uniforms.time), 1.0);
+}
+```
+
+### With Includes
+```wgsl
+#include "common_uniforms"
+@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
+
+#include "math/sdf_shapes"
+
+@fragment fn fs_main(@builtin(position) p: vec4<f32>) -> @location(0) vec4<f32> {
+    let uv = (p.xy / uniforms.resolution) * 2.0 - 1.0;
+    let d = sdSphere(vec3<f32>(uv, 0.0), 0.5);
+    return vec4<f32>(vec3<f32>(step(d, 0.0)), 1.0);
+}
+```
+
+## Limitations
+
+- **Fragment shaders only** (no compute/vertex customization)
+- **Single texture input** (1x1 black placeholder)
+- **No custom uniforms** (CommonUniforms only)
+- **Read-only snippet library** (hardcoded from workspace)
+- **No syntax highlighting** (plain textarea)
+
+## Testing
+
+Load existing shaders from workspace:
+- `../../workspaces/main/shaders/passthrough.wgsl` - Basic
+- `../../workspaces/main/shaders/distort.wgsl` - With includes
+
+## Future Enhancements
+
+- Monaco editor (syntax highlighting, autocomplete)
+- Custom uniform parameter UI
+- Texture upload support
+- Compute shader support
+- Export C++ Effect class skeleton
diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html
new file mode 100644
index 0000000..d74b9ff
--- /dev/null
+++ b/tools/shader_editor/index.html
@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WGSL Shader Editor</title>
+    <style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
+    background: #1e1e1e;
+    color: #d4d4d4;
+    overflow: hidden;
+    height: 100vh;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+.preview-pane {
+    flex: 0 0 70%;
+    background: #252526;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+#preview-canvas {
+    flex: 1;
+    width: 100%;
+    height: auto;
+    background: #000;
+}
+
+.fps-counter {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 5px 10px;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #0f0;
+    font-family: monospace;
+}
+
+.error-overlay {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    right: 10px;
+    background: rgba(200, 0, 0, 0.9);
+    color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    font-family: monospace;
+    font-size: 12px;
+    white-space: pre-wrap;
+    max-height: 50%;
+    overflow-y: auto;
+}
+
+.error-overlay.hidden {
+    display: none;
+}
+
+.controls {
+    background: #2d2d30;
+    padding: 15px;
+    border-top: 1px solid #3e3e42;
+}
+
+.control-group {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.control-group label {
+    font-size: 13px;
+}
+
+.control-group button {
+    background: #0e639c;
+    color: #fff;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.control-group button:hover {
+    background: #1177bb;
+}
+
+.control-group input[type="number"],
+.control-group select {
+    background: #3c3c3c;
+    color: #d4d4d4;
+    border: 1px solid #3e3e42;
+    padding: 4px 8px;
+    border-radius: 3px;
+    font-size: 13px;
+}
+
+.control-group input[type="range"] {
+    flex: 1;
+    max-width: 200px;
+}
+
+.control-group input[type="checkbox"] {
+    margin: 0 5px;
+}
+
+.progress-bar {
+    flex: 1;
+    height: 8px;
+    background: #3c3c3c;
+    border-radius: 4px;
+    overflow: hidden;
+    max-width: 300px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #0e639c;
+    transition: width 0.1s linear;
+}
+
+.editor-pane {
+    flex: 0 0 30%;
+    background: #1e1e1e;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #3e3e42;
+}
+
+.editor-header {
+    background: #2d2d30;
+    padding: 10px;
+    border-bottom: 1px solid #3e3e42;
+    display: flex;
+    gap: 10px;
+}
+
+.editor-header button {
+    background: #0e639c;
+    color: #fff;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.editor-header button:hover {
+    background: #1177bb;
+}
+
+#code-editor {
+    flex: 1;
+    width: 100%;
+    background: #1e1e1e;
+    color: #d4d4d4;
+    border: none;
+    padding: 15px;
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    resize: none;
+    outline: none;
+}
+
+.snippets-panel {
+    background: #252526;
+    border-top: 1px solid #3e3e42;
+    padding: 15px;
+    max-height: 40%;
+    overflow-y: auto;
+}
+
+.snippets-panel.hidden {
+    display: none;
+}
+
+.snippets-panel h3 {
+    font-size: 14px;
+    margin-bottom: 10px;
+    color: #4ec9b0;
+}
+
+.snippet-item {
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 12px;
+}
+
+.snippet-item:hover {
+    background: #2a2d2e;
+}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="preview-pane">
+            <canvas id="preview-canvas"></canvas>
+            <div id="error-overlay" class="error-overlay hidden"></div>
+            <div class="fps-counter" id="fps-counter">FPS: 0</div>
+
+            <div class="controls">
+                <div class="control-group">
+                    <button id="play-pause-btn">▶ Play</button>
+                    <button id="reset-time-btn">Reset Time</button>
+                </div>
+
+                <div class="control-group">
+                    <label>Loop Time: <span id="loop-time-value">0.00</span></label>
+                    <div class="progress-bar">
+                        <div id="loop-time-bar" class="progress-fill"></div>
+                    </div>
+                </div>
+
+                <div class="control-group">
+                    <label>Loop Period: <input type="number" id="loop-period" min="0.1" max="10" step="0.1" value="2.0">s</label>
+                </div>
+
+                <div class="control-group">
+                    <label>Time: <span id="time-value">0.00</span>s</label>
+                </div>
+
+                <div class="control-group">
+                    <label>Audio Peak: <input type="range" id="audio-peak" min="0" max="1" step="0.01" value="0.5"></label>
+                    <span id="audio-peak-value">0.50</span>
+                    <label><input type="checkbox" id="audio-pulse"> Auto Pulse</label>
+                </div>
+
+                <div class="control-group">
+                    <label>Resolution:
+                        <select id="resolution">
+                            <option value="512x512">512×512</option>
+                            <option value="1024x1024" selected>1024×1024</option>
+                            <option value="1920x1080">1920×1080</option>
+                            <option value="1280x720">1280×720</option>
+                        </select>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <div class="editor-pane">
+            <div class="editor-header">
+                <input type="file" id="file-input" accept=".wgsl" style="display: none;">
+                <button id="load-btn">Load .wgsl</button>
+                <button id="save-btn">Save .wgsl</button>
+                <button id="snippets-btn">📚 Snippets</button>
+            </div>
+
+            <textarea id="code-editor" spellcheck="false"></textarea>
+
+            <div id="snippets-panel" class="snippets-panel hidden">
+                <h3>Available Snippets</h3>
+                <div id="snippets-list"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+// Shader Composer
+class ShaderComposer {
+    constructor() {
+        this.snippets = new Map();
+    }
+
+    registerSnippet(name, code) {
+        this.snippets.set(name, code);
+    }
+
+    resolveRecursive(source, included, substitutions) {
+        const lines = source.split('\n');
+        const result = [];
+
+        for (const line of lines) {
+            if (line.trim().startsWith('#include ')) {
+                const match = line.match(/#include\s+"([^"]+)"/);
+                if (match) {
+                    let name = match[1];
+
+                    if (substitutions && substitutions.has(name)) {
+                        name = substitutions.get(name);
+                    }
+
+                    if (!included.has(name)) {
+                        included.add(name);
+                        const snippet = this.snippets.get(name);
+                        if (snippet) {
+                            result.push(`// --- Included: ${name} ---`);
+                            const resolved = this.resolveRecursive(snippet, included, substitutions);
+                            result.push(resolved);
+                            result.push(`// --- End Include: ${name} ---`);
+                        } else {
+                            result.push(`// ERROR: Snippet not found: ${name}`);
+                        }
+                    }
+                }
+            } else {
+                result.push(line);
+            }
+        }
+
+        return result.join('\n');
+    }
+
+    compose(mainCode, dependencies = [], substitutions = null) {
+        const result = ['// Generated by ShaderComposer', ''];
+        const included = new Set();
+
+        for (let dep of dependencies) {
+            let name = dep;
+            if (substitutions && substitutions.has(name)) {
+                name = substitutions.get(name);
+            }
+
+            if (!included.has(name)) {
+                included.add(name);
+                const snippet = this.snippets.get(name);
+                if (snippet) {
+                    result.push(`// --- Dependency: ${name} ---`);
+                    result.push(this.resolveRecursive(snippet, included, substitutions));
+                    result.push('');
+                }
+            }
+        }
+
+        result.push('// --- Main Code ---');
+        result.push(this.resolveRecursive(mainCode, included, substitutions));
+
+        return result.join('\n');
+    }
+}
+
+// WebGPU Preview
+class WebGPUPreview {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.device = null;
+        this.context = null;
+        this.pipeline = null;
+        this.uniformBuffer = null;
+        this.bindGroup = null;
+        this.vertexBuffer = null;
+        this.sampler = null;
+        this.texture = null;
+        this.textureView = null;
+        this.isPlaying = false;
+        this.startTime = performance.now();
+        this.pauseTime = 0;
+        this.currentTime = 0;
+        this.loopPeriod = 2.0;
+        this.audioPeak = 0.5;
+        this.autoPulse = false;
+        this.lastFrameTime = 0;
+        this.frameCount = 0;
+        this.fps = 0;
+        this.errorCallback = null;
+    }
+
+    async init() {
+        if (!navigator.gpu) {
+            throw new Error('WebGPU not supported');
+        }
+
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter) {
+            throw new Error('No GPU adapter found');
+        }
+
+        this.device = await adapter.requestDevice();
+        this.context = this.canvas.getContext('webgpu');
+
+        const format = navigator.gpu.getPreferredCanvasFormat();
+        this.context.configure({
+            device: this.device,
+            format: format,
+            alphaMode: 'opaque',
+        });
+
+        const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+        this.vertexBuffer = this.device.createBuffer({
+            size: vertices.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            mappedAtCreation: true,
+        });
+        new Float32Array(this.vertexBuffer.getMappedRange()).set(vertices);
+        this.vertexBuffer.unmap();
+
+        this.uniformBuffer = this.device.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+
+        this.sampler = this.device.createSampler({
+            magFilter: 'linear',
+            minFilter: 'linear',
+        });
+
+        this.texture = this.device.createTexture({
+            size: [1, 1],
+            format: 'rgba8unorm',
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        });
+        this.textureView = this.texture.createView();
+
+        const blackPixel = new Uint8Array([0, 0, 0, 255]);
+        this.device.queue.writeTexture(
+            { texture: this.texture },
+            blackPixel,
+            { bytesPerRow: 4 },
+            [1, 1]
+        );
+
+        await this.loadShader(this.getDefaultShader());
+    }
+
+    getDefaultShader() {
+        return `@group(0) @binding(0) var smplr: sampler;
+@group(0) @binding(1) var txt: texture_2d<f32>;
+
+struct CommonUniforms {
+    resolution: vec2<f32>,
+    _pad0: f32,
+    _pad1: f32,
+    aspect_ratio: f32,
+    time: f32,
+    beat: f32,
+    audio_intensity: f32,
+};
+@group(0) @binding(2) var<uniform> uniforms: CommonUniforms;
+
+@vertex fn vs_main(@builtin(vertex_index) i: u32) -> @builtin(position) vec4<f32> {
+    var pos = array<vec2<f32>, 3>(
+        vec2<f32>(-1, -1),
+        vec2<f32>(3, -1),
+        vec2<f32>(-1, 3)
+    );
+    return vec4<f32>(pos[i], 0.0, 1.0);
+}
+
+@fragment fn fs_main(@builtin(position) p: vec4<f32>) -> @location(0) vec4<f32> {
+    let uv = p.xy / uniforms.resolution;
+    let c = vec3<f32>(
+        0.5 + 0.5 * sin(uniforms.time + uv.x * 3.0),
+        0.5 + 0.5 * cos(uniforms.time + uv.y * 3.0),
+        0.5 + 0.5 * sin(uniforms.beat * 6.28)
+    );
+    return vec4<f32>(c * uniforms.audio_intensity, 1.0);
+}`;
+    }
+
+    async loadShader(shaderCode) {
+        try {
+            const shaderModule = this.device.createShaderModule({ code: shaderCode });
+
+            const info = await shaderModule.getCompilationInfo();
+            if (info.messages.length > 0) {
+                const errors = info.messages.filter(m => m.type === 'error');
+                if (errors.length > 0) {
+                    const errorText = errors.map(e => `Line ${e.lineNum}: ${e.message}`).join('\n');
+                    throw new Error(errorText);
+                }
+            }
+
+            this.pipeline = this.device.createRenderPipeline({
+                layout: 'auto',
+                vertex: {
+                    module: shaderModule,
+                    entryPoint: 'vs_main',
+                    buffers: [{
+                        arrayStride: 8,
+                        attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }],
+                    }],
+                },
+                fragment: {
+                    module: shaderModule,
+                    entryPoint: 'fs_main',
+                    targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }],
+                },
+                primitive: { topology: 'triangle-list' },
+            });
+
+            this.bindGroup = this.device.createBindGroup({
+                layout: this.pipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: this.sampler },
+                    { binding: 1, resource: this.textureView },
+                    { binding: 2, resource: { buffer: this.uniformBuffer } },
+                ],
+            });
+
+            if (this.errorCallback) this.errorCallback(null);
+        } catch (error) {
+            if (this.errorCallback) this.errorCallback(error.message);
+            throw error;
+        }
+    }
+
+    updateUniforms() {
+        const now = performance.now();
+        if (!this.isPlaying) {
+            this.currentTime = this.pauseTime;
+        } else {
+            this.currentTime = (now - this.startTime) / 1000;
+        }
+
+        const loopTime = (this.currentTime % this.loopPeriod) / this.loopPeriod;
+        const audioPeak = this.autoPulse ? 0.5 + 0.5 * Math.sin(this.currentTime * Math.PI) : this.audioPeak;
+
+        const uniformData = new Float32Array([
+            this.canvas.width, this.canvas.height, 0, 0,
+            this.canvas.width / this.canvas.height,
+            this.currentTime, loopTime, audioPeak,
+        ]);
+
+        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
+
+        this.frameCount++;
+        if (now - this.lastFrameTime >= 1000) {
+            this.fps = this.frameCount;
+            this.frameCount = 0;
+            this.lastFrameTime = now;
+        }
+
+        return { time: this.currentTime, loopTime, audioPeak };
+    }
+
+    render() {
+        if (!this.pipeline) return;
+
+        const stats = this.updateUniforms();
+
+        const commandEncoder = this.device.createCommandEncoder();
+        const textureView = this.context.getCurrentTexture().createView();
+
+        const renderPass = commandEncoder.beginRenderPass({
+            colorAttachments: [{
+                view: textureView,
+                clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                loadOp: 'clear',
+                storeOp: 'store',
+            }],
+        });
+
+        renderPass.setPipeline(this.pipeline);
+        renderPass.setBindGroup(0, this.bindGroup);
+        renderPass.setVertexBuffer(0, this.vertexBuffer);
+        renderPass.draw(3);
+        renderPass.end();
+
+        this.device.queue.submit([commandEncoder.finish()]);
+
+        return stats;
+    }
+
+    play() {
+        this.isPlaying = true;
+        this.startTime = this.pauseTime > 0 ? performance.now() - this.pauseTime * 1000 : performance.now();
+    }
+
+    pause() {
+        this.isPlaying = false;
+        this.pauseTime = this.currentTime;
+    }
+
+    resetTime() {
+        this.startTime = performance.now();
+        this.pauseTime = 0;
+        this.currentTime = 0;
+    }
+
+    setResolution(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
+    setLoopPeriod(period) { this.loopPeriod = period; }
+    setAudioPeak(peak) { this.audioPeak = peak; }
+    setAutoPulse(enabled) { this.autoPulse = enabled; }
+    setErrorCallback(callback) { this.errorCallback = callback; }
+    getFPS() { return this.fps; }
+}
+
+// Main App
+const composer = new ShaderComposer();
+composer.registerSnippet('common_uniforms', `struct CommonUniforms {
+    resolution: vec2<f32>,
+    _pad0: f32,
+    _pad1: f32,
+    aspect_ratio: f32,
+    time: f32,
+    beat: f32,
+    audio_intensity: f32,
+};`);
+
+const canvas = document.getElementById('preview-canvas');
+const preview = new WebGPUPreview(canvas);
+const editor = document.getElementById('code-editor');
+const playPauseBtn = document.getElementById('play-pause-btn');
+const resetTimeBtn = document.getElementById('reset-time-btn');
+const loopPeriodInput = document.getElementById('loop-period');
+const audioPeakInput = document.getElementById('audio-peak');
+const audioPeakValue = document.getElementById('audio-peak-value');
+const autoPulseCheckbox = document.getElementById('audio-pulse');
+const resolutionSelect = document.getElementById('resolution');
+const loadBtn = document.getElementById('load-btn');
+const saveBtn = document.getElementById('save-btn');
+const snippetsBtn = document.getElementById('snippets-btn');
+const fileInput = document.getElementById('file-input');
+const errorOverlay = document.getElementById('error-overlay');
+const fpsCounter = document.getElementById('fps-counter');
+const timeValue = document.getElementById('time-value');
+const loopTimeValue = document.getElementById('loop-time-value');
+const loopTimeBar = document.getElementById('loop-time-bar');
+const snippetsPanel = document.getElementById('snippets-panel');
+const snippetsList = document.getElementById('snippets-list');
+
+let composeTimeout = null;
+
+async function init() {
+    try {
+        await preview.init();
+
+        preview.setErrorCallback((error) => {
+            if (error) {
+                errorOverlay.textContent = error;
+                errorOverlay.classList.remove('hidden');
+            } else {
+                errorOverlay.classList.add('hidden');
+            }
+        });
+
+        updateResolution();
+        editor.value = preview.getDefaultShader();
+        renderLoop();
+    } catch (error) {
+        errorOverlay.textContent = `Init failed: ${error.message}`;
+        errorOverlay.classList.remove('hidden');
+    }
+}
+
+function renderLoop() {
+    const stats = preview.render();
+    if (stats) {
+        fpsCounter.textContent = `FPS: ${preview.getFPS()}`;
+        timeValue.textContent = stats.time.toFixed(2);
+        loopTimeValue.textContent = stats.loopTime.toFixed(2);
+        loopTimeBar.style.width = `${stats.loopTime * 100}%`;
+        audioPeakValue.textContent = stats.audioPeak.toFixed(2);
+    }
+    requestAnimationFrame(renderLoop);
+}
+
+playPauseBtn.addEventListener('click', () => {
+    if (preview.isPlaying) {
+        preview.pause();
+        playPauseBtn.textContent = '▶ Play';
+    } else {
+        preview.play();
+        playPauseBtn.textContent = '⏸ Pause';
+    }
+});
+
+resetTimeBtn.addEventListener('click', () => preview.resetTime());
+loopPeriodInput.addEventListener('input', (e) => preview.setLoopPeriod(parseFloat(e.target.value)));
+audioPeakInput.addEventListener('input', (e) => preview.setAudioPeak(parseFloat(e.target.value)));
+autoPulseCheckbox.addEventListener('change', (e) => {
+    preview.setAutoPulse(e.target.checked);
+    audioPeakInput.disabled = e.target.checked;
+});
+resolutionSelect.addEventListener('change', updateResolution);
+
+function updateResolution() {
+    const [width, height] = resolutionSelect.value.split('x').map(Number);
+    preview.setResolution(width, height);
+}
+
+editor.addEventListener('input', () => {
+    clearTimeout(composeTimeout);
+    composeTimeout = setTimeout(composeAndLoad, 300);
+});
+
+editor.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = editor.selectionStart;
+        editor.value = editor.value.substring(0, start) + '    ' + editor.value.substring(editor.selectionEnd);
+        editor.selectionStart = editor.selectionEnd = start + 4;
+    }
+});
+
+async function composeAndLoad() {
+    try {
+        const composed = composer.compose(editor.value);
+        await preview.loadShader(composed);
+    } catch (error) {
+        console.error('Compose failed:', error);
+    }
+}
+
+loadBtn.addEventListener('click', () => {
+    fileInput.value = '';
+    fileInput.click();
+});
+
+fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            editor.value = event.target.result;
+            composeAndLoad();
+        };
+        reader.readAsText(file);
+    }
+});
+
+saveBtn.addEventListener('click', () => {
+    const blob = new Blob([editor.value], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
+    a.download = `shader_${timestamp}.wgsl`;
+    a.click();
+    URL.revokeObjectURL(url);
+});
+
+snippetsBtn.addEventListener('click', () => snippetsPanel.classList.toggle('hidden'));
+
+document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        saveBtn.click();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
+        e.preventDefault();
+        loadBtn.click();
+    }
+    if (e.key === ' ' && !editor.matches(':focus')) {
+        e.preventDefault();
+        playPauseBtn.click();
+    }
+});
+
+init();
+    </script>
+</body>
+</html>
-- 
cgit v1.2.3