@stevejtrettel/shader-sandbox 0.1.0

package/dist-lib/app/App.js

@@ -0,0 +1,570 @@
+/**
+ * App Layer - Browser Runtime Coordinator
+ *
+ * Responsibilities:
+ *  - Create and manage canvas
+ *  - Initialize ShadertoyEngine
+ *  - Run animation loop (requestAnimationFrame)
+ *  - Handle resize and mouse events
+ *  - Present Image pass output to screen
+ */
+import './app.css';
+import { ShadertoyEngine } from '../engine/ShadertoyEngine';
+export class App {
+    constructor(opts) {
+        this.animationId = null;
+        this.startTime = 0;
+        // Mouse state for iMouse uniform
+        this.mouse = [0, 0, -1, -1];
+        this.frameCount = 0;
+        this.lastFpsUpdate = 0;
+        this.currentFps = 0;
+        // Playback controls
+        this.controlsContainer = null;
+        this.playPauseButton = null;
+        this.isPaused = false;
+        // Error overlay
+        this.errorOverlay = null;
+        this.isVisible = true;
+        // ===========================================================================
+        // Animation Loop
+        // ===========================================================================
+        this.animate = (currentTimeMs) => {
+            // Schedule next frame first (even if paused or invisible)
+            this.animationId = requestAnimationFrame(this.animate);
+            // Skip rendering if paused or off-screen
+            if (this.isPaused || !this.isVisible) {
+                return;
+            }
+            const currentTimeSec = currentTimeMs / 1000;
+            const elapsedTime = currentTimeSec - this.startTime;
+            // Update FPS counter
+            this.updateFps(currentTimeSec);
+            // Update keyboard texture with current key states
+            this.engine.updateKeyboardTexture();
+            // Run engine step
+            this.engine.step(elapsedTime, this.mouse);
+            // Present Image pass output to screen
+            this.presentToScreen();
+        };
+        this.container = opts.container;
+        this.project = opts.project;
+        this.pixelRatio = opts.pixelRatio ?? window.devicePixelRatio;
+        // Create canvas
+        this.canvas = document.createElement('canvas');
+        this.canvas.style.width = '100%';
+        this.canvas.style.height = '100%';
+        this.canvas.style.display = 'block';
+        this.container.appendChild(this.canvas);
+        // Create FPS display overlay
+        this.fpsDisplay = document.createElement('div');
+        this.fpsDisplay.className = 'fps-counter';
+        this.fpsDisplay.textContent = '0 FPS';
+        this.container.appendChild(this.fpsDisplay);
+        // Create playback controls if enabled
+        if (opts.project.controls) {
+            this.createControls();
+        }
+        // Get WebGL2 context
+        const gl = this.canvas.getContext('webgl2', {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true, // Required for screenshots
+            powerPreference: 'high-performance',
+        });
+        if (!gl) {
+            throw new Error('WebGL2 not supported');
+        }
+        this.gl = gl;
+        // Initialize canvas size
+        this.updateCanvasSize();
+        // Create engine
+        this.engine = new ShadertoyEngine({
+            gl: this.gl,
+            project: opts.project,
+        });
+        // Check for compilation errors and show overlay if needed
+        if (this.engine.hasErrors()) {
+            this.showErrorOverlay(this.engine.getCompilationErrors());
+        }
+        // Set up resize observer
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateCanvasSize();
+            this.engine.resize(this.canvas.width, this.canvas.height);
+            // Reset frame counter so shaders can reinitialize (important for accumulators)
+            this.startTime = performance.now() / 1000;
+            this.engine.reset();
+        });
+        this.resizeObserver.observe(this.container);
+        // Set up intersection observer for auto-pause when off-screen
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            this.isVisible = entry.isIntersecting;
+        }, { threshold: 0.1 } // Trigger when 10% visible
+        );
+        this.intersectionObserver.observe(this.container);
+        // Set up mouse tracking
+        this.setupMouseTracking();
+        // Set up keyboard tracking for shader keyboard texture
+        this.setupKeyboardTracking();
+        // Set up global keyboard shortcuts (always available)
+        this.setupGlobalShortcuts();
+        // Set up keyboard shortcuts if controls are enabled
+        if (opts.project.controls) {
+            this.setupKeyboardShortcuts();
+        }
+    }
+    // ===========================================================================
+    // Public API
+    // ===========================================================================
+    /**
+     * Check if there were any shader compilation errors.
+     * Returns true if the engine has errors and should not be started.
+     */
+    hasErrors() {
+        return this.engine.hasErrors();
+    }
+    /**
+     * Get the underlying engine instance.
+     * Used for live recompilation in editor mode.
+     */
+    getEngine() {
+        return this.engine;
+    }
+    /**
+     * Start the animation loop.
+     */
+    start() {
+        if (this.animationId !== null) {
+            return; // Already running
+        }
+        this.startTime = performance.now() / 1000;
+        this.animate(this.startTime);
+    }
+    /**
+     * Stop the animation loop.
+     */
+    stop() {
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    /**
+     * Clean up all resources.
+     */
+    dispose() {
+        this.stop();
+        this.resizeObserver.disconnect();
+        this.intersectionObserver.disconnect();
+        this.engine.dispose();
+        this.container.removeChild(this.canvas);
+        this.container.removeChild(this.fpsDisplay);
+    }
+    /**
+     * Update FPS counter.
+     * Updates the display roughly once per second.
+     */
+    updateFps(currentTimeSec) {
+        this.frameCount++;
+        // Update FPS display once per second
+        if (currentTimeSec - this.lastFpsUpdate >= 1.0) {
+            this.currentFps = this.frameCount / (currentTimeSec - this.lastFpsUpdate);
+            this.fpsDisplay.textContent = `${Math.round(this.currentFps)} FPS`;
+            this.frameCount = 0;
+            this.lastFpsUpdate = currentTimeSec;
+        }
+    }
+    /**
+     * Present the Image pass output to the screen.
+     *
+     * Since Image is the final pass and we execute all passes to their FBOs,
+     * we need to blit the Image pass output to the default framebuffer.
+     */
+    presentToScreen() {
+        const gl = this.gl;
+        const imageFramebuffer = this.engine.getImageFramebuffer();
+        if (!imageFramebuffer) {
+            console.warn('No Image pass found');
+            return;
+        }
+        // Bind default framebuffer (screen)
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        // Clear screen
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        // Blit Image pass FBO to screen
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, imageFramebuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(0, 0, this.canvas.width, this.canvas.height, // src
+        0, 0, this.canvas.width, this.canvas.height, // dst
+        gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+    }
+    // ===========================================================================
+    // Resize Handling
+    // ===========================================================================
+    updateCanvasSize() {
+        const rect = this.container.getBoundingClientRect();
+        const width = Math.floor(rect.width * this.pixelRatio);
+        const height = Math.floor(rect.height * this.pixelRatio);
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+    }
+    // ===========================================================================
+    // Mouse Tracking
+    // ===========================================================================
+    setupMouseTracking() {
+        const updateMouse = (e) => {
+            const rect = this.canvas.getBoundingClientRect();
+            const x = (e.clientX - rect.left) * this.pixelRatio;
+            const y = (rect.height - (e.clientY - rect.top)) * this.pixelRatio; // Flip Y
+            this.mouse[0] = x;
+            this.mouse[1] = y;
+        };
+        const handleClick = (e) => {
+            const rect = this.canvas.getBoundingClientRect();
+            const x = (e.clientX - rect.left) * this.pixelRatio;
+            const y = (rect.height - (e.clientY - rect.top)) * this.pixelRatio; // Flip Y
+            this.mouse[2] = x;
+            this.mouse[3] = y;
+        };
+        this.canvas.addEventListener('mousemove', updateMouse);
+        this.canvas.addEventListener('click', handleClick);
+    }
+    // ===========================================================================
+    // Playback Controls
+    // ===========================================================================
+    /**
+     * Create playback control buttons (play/pause and reset).
+     */
+    createControls() {
+        // Create container
+        this.controlsContainer = document.createElement('div');
+        this.controlsContainer.className = 'playback-controls';
+        // Play/Pause button (starts showing pause icon since we're playing)
+        this.playPauseButton = document.createElement('button');
+        this.playPauseButton.className = 'control-button';
+        this.playPauseButton.title = 'Play/Pause (Space)';
+        this.playPauseButton.innerHTML = `
+      <svg viewBox="0 0 16 16">
+        <path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/>
+      </svg>
+    `;
+        this.playPauseButton.addEventListener('click', () => this.togglePlayPause());
+        // Reset button
+        const resetButton = document.createElement('button');
+        resetButton.className = 'control-button';
+        resetButton.title = 'Reset (R)';
+        resetButton.innerHTML = `
+      <svg viewBox="0 0 16 16">
+        <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+        <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+      </svg>
+    `;
+        resetButton.addEventListener('click', () => this.reset());
+        // Screenshot button
+        const screenshotButton = document.createElement('button');
+        screenshotButton.className = 'control-button';
+        screenshotButton.title = 'Screenshot (S)';
+        screenshotButton.innerHTML = `
+      <svg viewBox="0 0 16 16">
+        <path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
+        <path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/>
+      </svg>
+    `;
+        screenshotButton.addEventListener('click', () => this.screenshot());
+        // Add to container
+        this.controlsContainer.appendChild(this.playPauseButton);
+        this.controlsContainer.appendChild(resetButton);
+        this.controlsContainer.appendChild(screenshotButton);
+        this.container.appendChild(this.controlsContainer);
+    }
+    /**
+     * Set up keyboard tracking for shader keyboard texture.
+     * Tracks all key presses/releases and forwards to engine.
+     */
+    setupKeyboardTracking() {
+        // Track keydown events
+        document.addEventListener('keydown', (e) => {
+            // Get keycode - use e.keyCode which is the ASCII code
+            const keycode = e.keyCode;
+            if (keycode >= 0 && keycode < 256) {
+                this.engine.updateKeyState(keycode, true);
+            }
+        });
+        // Track keyup events
+        document.addEventListener('keyup', (e) => {
+            const keycode = e.keyCode;
+            if (keycode >= 0 && keycode < 256) {
+                this.engine.updateKeyState(keycode, false);
+            }
+        });
+    }
+    /**
+     * Set up global keyboard shortcuts (always available).
+     */
+    setupGlobalShortcuts() {
+        document.addEventListener('keydown', (e) => {
+            // S - Screenshot
+            if (e.code === 'KeyS' && !e.repeat) {
+                e.preventDefault();
+                this.screenshot();
+            }
+        });
+    }
+    /**
+     * Set up keyboard shortcuts for playback control.
+     */
+    setupKeyboardShortcuts() {
+        document.addEventListener('keydown', (e) => {
+            // Space - Play/Pause
+            if (e.code === 'Space' && !e.repeat) {
+                e.preventDefault();
+                this.togglePlayPause();
+            }
+            // R - Reset
+            if (e.code === 'KeyR' && !e.repeat) {
+                e.preventDefault();
+                this.reset();
+            }
+        });
+    }
+    /**
+     * Toggle between play and pause states.
+     */
+    togglePlayPause() {
+        this.isPaused = !this.isPaused;
+        this.updatePlayPauseButton();
+    }
+    /**
+     * Reset the shader to frame 0.
+     */
+    reset() {
+        this.startTime = performance.now() / 1000;
+        this.frameCount = 0;
+        this.lastFpsUpdate = 0;
+        this.engine.reset();
+    }
+    /**
+     * Capture and download a screenshot of the current canvas as PNG.
+     * Filename format: shadertoy-{folderName}-{timestamp}.png
+     */
+    screenshot() {
+        // Extract folder name from project root (e.g., "/demos/keyboard-test" -> "keyboard-test")
+        const folderName = this.project.root.split('/').pop() || 'shader';
+        // Generate timestamp (YYYYMMDD-HHMMSS)
+        const now = new Date();
+        const timestamp = now.getFullYear().toString() +
+            (now.getMonth() + 1).toString().padStart(2, '0') +
+            now.getDate().toString().padStart(2, '0') + '-' +
+            now.getHours().toString().padStart(2, '0') +
+            now.getMinutes().toString().padStart(2, '0') +
+            now.getSeconds().toString().padStart(2, '0');
+        const filename = `shadertoy-${folderName}-${timestamp}.png`;
+        // Capture canvas as PNG blob
+        this.canvas.toBlob((blob) => {
+            if (!blob) {
+                console.error('Failed to create screenshot blob');
+                return;
+            }
+            // Create download link
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            link.click();
+            // Clean up
+            URL.revokeObjectURL(url);
+            console.log(`Screenshot saved: ${filename}`);
+        }, 'image/png');
+    }
+    /**
+     * Update play/pause button icon based on current state.
+     */
+    updatePlayPauseButton() {
+        if (!this.playPauseButton)
+            return;
+        if (this.isPaused) {
+            // Show play icon
+            this.playPauseButton.innerHTML = `
+        <svg viewBox="0 0 16 16">
+          <path d="M4 3v10l8-5-8-5z"/>
+        </svg>
+      `;
+        }
+        else {
+            // Show pause icon
+            this.playPauseButton.innerHTML = `
+        <svg viewBox="0 0 16 16">
+          <path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/>
+        </svg>
+      `;
+        }
+    }
+    // ===========================================================================
+    // Error Handling
+    // ===========================================================================
+    /**
+     * Display shader compilation errors in an overlay.
+     */
+    showErrorOverlay(errors) {
+        // Create overlay if it doesn't exist
+        if (!this.errorOverlay) {
+            this.errorOverlay = document.createElement('div');
+            this.errorOverlay.className = 'shader-error-overlay';
+            this.container.appendChild(this.errorOverlay);
+        }
+        // Group errors: separate common.glsl errors from pass-specific errors
+        const commonErrors = errors.filter(e => e.isFromCommon);
+        const passErrors = errors.filter(e => !e.isFromCommon);
+        // Deduplicate common errors (same error reported for multiple passes)
+        const uniqueCommonErrors = commonErrors.length > 0 ? [commonErrors[0]] : [];
+        // Combine: show common errors first, then pass-specific errors
+        const allErrors = [...uniqueCommonErrors, ...passErrors];
+        // Parse and format errors with source context
+        const formattedErrors = allErrors.map(({ passName, error, source, isFromCommon, originalLine }) => {
+            // Extract the actual GLSL error from the thrown error message
+            const glslError = error.replace('Shader compilation failed:\n', '');
+            // For common errors, adjust line number in error message
+            let adjustedError = glslError;
+            if (isFromCommon && originalLine !== null) {
+                adjustedError = glslError.replace(/Line \d+:/, `Line ${originalLine}:`);
+                adjustedError = adjustedError.replace(/ERROR:\s*\d+:(\d+):/, `ERROR: 0:${originalLine}:`);
+            }
+            return {
+                passName: isFromCommon ? 'common.glsl' : passName,
+                error: this.parseShaderError(adjustedError),
+                codeContext: isFromCommon
+                    ? this.extractCodeContextFromCommon(originalLine)
+                    : this.extractCodeContext(adjustedError, source),
+            };
+        });
+        // Build error HTML
+        const errorHTML = formattedErrors.map(({ passName, error, codeContext }) => `
+      <div class="error-section">
+        <div class="error-pass-name">${passName}</div>
+        <pre class="error-content">${this.escapeHTML(error)}</pre>
+        ${codeContext ? `<pre class="error-code-context">${codeContext}</pre>` : ''}
+      </div>
+    `).join('');
+        this.errorOverlay.innerHTML = `
+      <div class="error-overlay-content">
+        <div class="error-header">
+          <span class="error-title">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom;">
+              <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM3.5 7.5a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5h-9z"/>
+            </svg>
+            Shader Compilation Failed
+          </span>
+          <button class="error-close" title="Dismiss">×</button>
+        </div>
+        <div class="error-body">
+          ${errorHTML}
+        </div>
+      </div>
+    `;
+        // Add close button handler
+        const closeButton = this.errorOverlay.querySelector('.error-close');
+        if (closeButton) {
+            closeButton.addEventListener('click', () => this.hideErrorOverlay());
+        }
+    }
+    /**
+     * Parse and improve WebGL shader error messages.
+     */
+    parseShaderError(error) {
+        // WebGL errors typically look like: "ERROR: 0:45: 'texure' : no matching overloaded function found"
+        // Let's make them more readable by highlighting line numbers and adding context
+        return error.split('\n').map(line => {
+            // Match pattern: ERROR: 0:lineNumber: message
+            const match = line.match(/^ERROR:\s*(\d+):(\d+):\s*(.+)$/);
+            if (match) {
+                const [, , lineNum, message] = match;
+                return `Line ${lineNum}: ${message}`;
+            }
+            return line;
+        }).join('\n');
+    }
+    /**
+     * Extract code context around error line (±3 lines).
+     * Returns HTML with the error line highlighted.
+     */
+    extractCodeContext(error, source) {
+        // Extract line number from error
+        const match = error.match(/ERROR:\s*\d+:(\d+):/);
+        if (!match)
+            return null;
+        const errorLine = parseInt(match[1], 10);
+        const lines = source.split('\n');
+        // Extract context (3 lines before and after)
+        const contextRange = 3;
+        const startLine = Math.max(0, errorLine - contextRange - 1);
+        const endLine = Math.min(lines.length, errorLine + contextRange);
+        const contextLines = lines.slice(startLine, endLine);
+        // Build HTML with line numbers and highlighting
+        const html = contextLines.map((line, idx) => {
+            const lineNum = startLine + idx + 1;
+            const isErrorLine = lineNum === errorLine;
+            const lineNumPadded = String(lineNum).padStart(4, ' ');
+            const escapedLine = this.escapeHTML(line);
+            if (isErrorLine) {
+                return `<span class="error-line-highlight">${lineNumPadded} │ ${escapedLine}</span>`;
+            }
+            else {
+                return `<span class="context-line">${lineNumPadded} │ ${escapedLine}</span>`;
+            }
+        }).join(''); // No newline - spans already have display:block
+        return html;
+    }
+    /**
+     * Extract code context from common.glsl file.
+     * Similar to extractCodeContext but uses the original common source.
+     */
+    extractCodeContextFromCommon(errorLine) {
+        const commonSource = this.engine.project.commonSource;
+        if (!commonSource)
+            return null;
+        const lines = commonSource.split('\n');
+        // Extract context (3 lines before and after)
+        const contextRange = 3;
+        const startLine = Math.max(0, errorLine - contextRange - 1);
+        const endLine = Math.min(lines.length, errorLine + contextRange);
+        const contextLines = lines.slice(startLine, endLine);
+        // Build HTML with line numbers and highlighting
+        const html = contextLines.map((line, idx) => {
+            const lineNum = startLine + idx + 1;
+            const isErrorLine = lineNum === errorLine;
+            const lineNumPadded = String(lineNum).padStart(4, ' ');
+            const escapedLine = this.escapeHTML(line);
+            if (isErrorLine) {
+                return `<span class="error-line-highlight">${lineNumPadded} │ ${escapedLine}</span>`;
+            }
+            else {
+                return `<span class="context-line">${lineNumPadded} │ ${escapedLine}</span>`;
+            }
+        }).join(''); // No newline - spans already have display:block
+        return html;
+    }
+    /**
+     * Escape HTML to prevent XSS.
+     */
+    escapeHTML(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Hide the error overlay.
+     */
+    hideErrorOverlay() {
+        if (this.errorOverlay) {
+            this.errorOverlay.remove();
+            this.errorOverlay = null;
+        }
+    }
+}

package/dist-lib/app/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * App Layer - Type Definitions
+ *
+ * Types for the browser runtime coordinator.
+ */
+import type { ShadertoyProject } from '../project/types';
+/**
+ * Options for creating the App.
+ */
+export interface AppOptions {
+    /**
+     * HTML container element (App will create canvas inside).
+     */
+    container: HTMLElement;
+    /**
+     * Loaded Shadertoy project.
+     */
+    project: ShadertoyProject;
+    /**
+     * Canvas pixel ratio (default: window.devicePixelRatio).
+     * Set to 1 for performance, or higher for retina displays.
+     */
+    pixelRatio?: number;
+}
+/**
+ * Mouse state for iMouse uniform.
+ * Format: [x, y, clickX, clickY]
+ * - x, y: current mouse position in pixels
+ * - clickX, clickY: position of last click (or -1, -1 if no click)
+ */
+export type MouseState = [number, number, number, number];
+//# sourceMappingURL=types.d.ts.map

package/dist-lib/app/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/app/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/dist-lib/app/types.js

@@ -0,0 +1,6 @@
+/**
+ * App Layer - Type Definitions
+ *
+ * Types for the browser runtime coordinator.
+ */
+export {};

package/dist-lib/editor/EditorPanel.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Editor Panel - Shared component for code editing in layouts
+ *
+ * Provides:
+ * - CodeMirror editor (dynamically loaded)
+ * - Recompile button with keyboard shortcut
+ * - Error display
+ * - Tab management for multiple passes
+ */
+import { ShadertoyProject } from '../project/types';
+import { RecompileHandler } from '../layouts/types';
+import './editor-panel.css';
+export declare class EditorPanel {
+    private container;
+    private project;
+    private recompileHandler;
+    private tabBar;
+    private contentArea;
+    private copyButton;
+    private recompileButton;
+    private errorDisplay;
+    private tabs;
+    private activeTabIndex;
+    private editorInstance;
+    private modifiedSources;
+    constructor(container: HTMLElement, project: ShadertoyProject);
+    setRecompileHandler(handler: RecompileHandler): void;
+    dispose(): void;
+    private buildTabs;
+    private buildTabBar;
+    private showTab;
+    private saveCurrentEditorContent;
+    private recompile;
+    private showError;
+    private hideError;
+    private copyToClipboard;
+    private setupKeyboardShortcut;
+}
+//# sourceMappingURL=EditorPanel.d.ts.map

package/dist-lib/editor/EditorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorPanel.d.ts","sourceRoot":"","sources":["../../src/editor/EditorPanel.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,gBAAgB,EAAY,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAY5B,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,gBAAgB,CAAiC;IAEzD,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,cAAc,CAAa;IAGnC,OAAO,CAAC,cAAc,CAA+B;IAGrD,OAAO,CAAC,eAAe,CAAkC;gBAE7C,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB;IA+D7D,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIpD,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,SAAS;IAgDjB,OAAO,CAAC,WAAW;YAmBL,OAAO;IAsErB,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,SAAS;YAIH,eAAe;IA4B7B,OAAO,CAAC,qBAAqB;CAS9B"}