@stevejtrettel/shader-sandbox 0.1.0

package/dist-lib/engine/glHelpers.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Engine Layer - WebGL Helper Functions
+ *
+ * Low-level WebGL utilities for shader compilation, texture creation,
+ * framebuffer management, and VAO setup.
+ *
+ * Based on docs/engine-spec.md
+ */
+/**
+ * Compile a shader of given type from source. Throws on error.
+ */
+export declare function createShader(gl: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader;
+/**
+ * Link a program from vertex + fragment source strings.
+ * Throws with a descriptive error if link fails.
+ */
+export declare function createProgramFromSources(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram;
+/**
+ * Create a full-screen triangle VAO.
+ *
+ * Attribute layout:
+ *  - location 0: vec2 position in clip space.
+ *
+ * The triangle covers the entire screen using three vertices:
+ * (-1, -1), (3, -1), (-1, 3)
+ * This ensures all pixels are covered without needing two triangles.
+ */
+export declare function createFullscreenTriangleVAO(gl: WebGL2RenderingContext): WebGLVertexArrayObject;
+/**
+ * Create a float RGBA texture (no data) for use as a render target.
+ * This MUST use an internal format compatible with EXT_color_buffer_float.
+ *
+ * Per spec: ALL render targets MUST be RGBA32F.
+ */
+export declare function createRenderTargetTexture(gl: WebGL2RenderingContext, width: number, height: number): WebGLTexture;
+/**
+ * Create a framebuffer with a single color attachment at COLOR_ATTACHMENT0.
+ * Throws if framebuffer is not complete.
+ */
+export declare function createFramebufferWithColorAttachment(gl: WebGL2RenderingContext, texture: WebGLTexture): WebGLFramebuffer;
+/**
+ * Create a 1x1 black float texture for unused channels.
+ *
+ * Per spec: UNUSED CHANNELS MUST STILL BIND A 1×1 BLACK FLOAT TEXTURE.
+ * This prevents NaN/undefined behavior when sampling unused channels.
+ */
+export declare function createBlackTexture(gl: WebGL2RenderingContext): WebGLTexture;
+/**
+ * Create a 256x3 keyboard state texture.
+ *
+ * Shadertoy keyboard texture format:
+ * - Width: 256 (one column per ASCII keycode)
+ * - Height: 3 (3 rows for different data)
+ * - Row 0 (sample at y=0.25): Current key state (0.0 = up, 1.0 = down)
+ * - Row 1: Unused
+ * - Row 2 (sample at y=0.75): Toggle state (flips between 0.0 and 1.0 on each press)
+ *
+ * Returns the WebGLTexture. Data is initialized to all zeros.
+ * Use updateKeyboardTexture() to update the state.
+ */
+export declare function createKeyboardTexture(gl: WebGL2RenderingContext): WebGLTexture;
+/**
+ * Update keyboard texture with current key states.
+ *
+ * @param gl WebGL context
+ * @param texture The keyboard texture to update
+ * @param keyStates Map of keycode -> current state (true = down, false = up)
+ * @param toggleStates Map of keycode -> toggle state (0.0 or 1.0)
+ */
+export declare function updateKeyboardTexture(gl: WebGL2RenderingContext, texture: WebGLTexture, keyStates: Map<number, boolean>, toggleStates: Map<number, number>): void;
+/**
+ * Create a 2D texture from an HTMLImageElement (or ImageBitmap).
+ * This is used for project textures (dog.png, noise.png, etc.)
+ *
+ * NOTE: actual image loading is done by the App; engine just gets an
+ * already-loaded image object.
+ */
+export declare function createTextureFromImage(gl: WebGL2RenderingContext, image: HTMLImageElement | ImageBitmap, filter: 'nearest' | 'linear', wrap: 'clamp' | 'repeat'): WebGLTexture;
+//# sourceMappingURL=glHelpers.d.ts.map

package/dist-lib/engine/glHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glHelpers.d.ts","sourceRoot":"","sources":["../../src/engine/glHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,wBAAgB,YAAY,CAC1B,EAAE,EAAE,sBAAsB,EAC1B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GACb,WAAW,CAiBb;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,EAAE,EAAE,sBAAsB,EAC1B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACrB,YAAY,CA6Bd;AAMD;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAAE,EAAE,sBAAsB,GAAG,sBAAsB,CAuC9F;AAMD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,YAAY,CAiCd;AAED;;;GAGG;AACH,wBAAgB,oCAAoC,CAClD,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,GACpB,gBAAgB,CA2BlB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAkC3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAoC9E;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,IAAI,CAsCN;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,gBAAgB,GAAG,WAAW,EACrC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GACvB,YAAY,CA+Bd"}

package/dist-lib/engine/glHelpers.js

@@ -0,0 +1,298 @@
+/**
+ * Engine Layer - WebGL Helper Functions
+ *
+ * Low-level WebGL utilities for shader compilation, texture creation,
+ * framebuffer management, and VAO setup.
+ *
+ * Based on docs/engine-spec.md
+ */
+// =============================================================================
+// Shader Compilation
+// =============================================================================
+/**
+ * Compile a shader of given type from source. Throws on error.
+ */
+export function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) {
+        throw new Error('Failed to create shader object');
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!success) {
+        const infoLog = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Shader compilation failed:\n${infoLog}`);
+    }
+    return shader;
+}
+/**
+ * Link a program from vertex + fragment source strings.
+ * Throws with a descriptive error if link fails.
+ */
+export function createProgramFromSources(gl, vertexSource, fragmentSource) {
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    const program = gl.createProgram();
+    if (!program) {
+        throw new Error('Failed to create program object');
+    }
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!success) {
+        const infoLog = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+        throw new Error(`Program linking failed:\n${infoLog}`);
+    }
+    // Clean up shaders (no longer needed after linking)
+    gl.detachShader(program, vertexShader);
+    gl.detachShader(program, fragmentShader);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    return program;
+}
+// =============================================================================
+// Fullscreen Triangle VAO
+// =============================================================================
+/**
+ * Create a full-screen triangle VAO.
+ *
+ * Attribute layout:
+ *  - location 0: vec2 position in clip space.
+ *
+ * The triangle covers the entire screen using three vertices:
+ * (-1, -1), (3, -1), (-1, 3)
+ * This ensures all pixels are covered without needing two triangles.
+ */
+export function createFullscreenTriangleVAO(gl) {
+    const vao = gl.createVertexArray();
+    if (!vao) {
+        throw new Error('Failed to create VAO');
+    }
+    gl.bindVertexArray(vao);
+    // Create VBO with triangle vertices
+    const positions = new Float32Array([
+        -1, -1, // Bottom-left
+        3, -1, // Bottom-right (extends beyond viewport)
+        -1, 3, // Top-left (extends beyond viewport)
+    ]);
+    const vbo = gl.createBuffer();
+    if (!vbo) {
+        throw new Error('Failed to create VBO');
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    // Enable and configure vertex attribute at location 0
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, // attribute location
+    2, // size (vec2)
+    gl.FLOAT, // type
+    false, // normalized
+    0, // stride
+    0 // offset
+    );
+    // Unbind
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    return vao;
+}
+// =============================================================================
+// Texture Creation
+// =============================================================================
+/**
+ * Create a float RGBA texture (no data) for use as a render target.
+ * This MUST use an internal format compatible with EXT_color_buffer_float.
+ *
+ * Per spec: ALL render targets MUST be RGBA32F.
+ */
+export function createRenderTargetTexture(gl, width, height) {
+    const tex = gl.createTexture();
+    if (!tex) {
+        throw new Error('Failed to create texture');
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // Allocate RGBA32F texture (float format required by Shadertoy spec)
+    gl.texImage2D(gl.TEXTURE_2D, 0, // mip level
+    gl.RGBA32F, // internal format (32-bit float per channel)
+    width, height, 0, // border (must be 0)
+    gl.RGBA, // format
+    gl.FLOAT, // type
+    null // no data (allocate only)
+    );
+    // Set filtering to NEAREST (common for simulation/compute shaders)
+    // This prevents interpolation artifacts in PDE/physics shaders
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    // Set wrap mode to CLAMP_TO_EDGE (prevent wrap-around at boundaries)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return tex;
+}
+/**
+ * Create a framebuffer with a single color attachment at COLOR_ATTACHMENT0.
+ * Throws if framebuffer is not complete.
+ */
+export function createFramebufferWithColorAttachment(gl, texture) {
+    const fbo = gl.createFramebuffer();
+    if (!fbo) {
+        throw new Error('Failed to create framebuffer');
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    // Attach texture to color attachment 0
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0 // mip level
+    );
+    // Check framebuffer completeness
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    if (status !== gl.FRAMEBUFFER_COMPLETE) {
+        gl.deleteFramebuffer(fbo);
+        throw new Error(`Framebuffer incomplete: ${getFramebufferStatusString(gl, status)}`);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    return fbo;
+}
+/**
+ * Create a 1x1 black float texture for unused channels.
+ *
+ * Per spec: UNUSED CHANNELS MUST STILL BIND A 1×1 BLACK FLOAT TEXTURE.
+ * This prevents NaN/undefined behavior when sampling unused channels.
+ */
+export function createBlackTexture(gl) {
+    const tex = gl.createTexture();
+    if (!tex) {
+        throw new Error('Failed to create black texture');
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // 1x1 black pixel [0, 0, 0, 1] as float
+    const blackPixel = new Float32Array([0, 0, 0, 1]);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, blackPixel);
+    // Set filtering
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    // Set wrap mode
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return tex;
+}
+/**
+ * Create a 256x3 keyboard state texture.
+ *
+ * Shadertoy keyboard texture format:
+ * - Width: 256 (one column per ASCII keycode)
+ * - Height: 3 (3 rows for different data)
+ * - Row 0 (sample at y=0.25): Current key state (0.0 = up, 1.0 = down)
+ * - Row 1: Unused
+ * - Row 2 (sample at y=0.75): Toggle state (flips between 0.0 and 1.0 on each press)
+ *
+ * Returns the WebGLTexture. Data is initialized to all zeros.
+ * Use updateKeyboardTexture() to update the state.
+ */
+export function createKeyboardTexture(gl) {
+    const tex = gl.createTexture();
+    if (!tex) {
+        throw new Error('Failed to create keyboard texture');
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // 256x3 texture, all zeros initially
+    const width = 256;
+    const height = 3;
+    const data = new Float32Array(width * height * 4); // RGBA, all zeros
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, data);
+    // NEAREST filtering - no interpolation between keys!
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    // CLAMP to edge
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return tex;
+}
+/**
+ * Update keyboard texture with current key states.
+ *
+ * @param gl WebGL context
+ * @param texture The keyboard texture to update
+ * @param keyStates Map of keycode -> current state (true = down, false = up)
+ * @param toggleStates Map of keycode -> toggle state (0.0 or 1.0)
+ */
+export function updateKeyboardTexture(gl, texture, keyStates, toggleStates) {
+    const width = 256;
+    const height = 3;
+    const data = new Float32Array(width * height * 4);
+    // Fill in key states
+    for (let keycode = 0; keycode < 256; keycode++) {
+        const isDown = keyStates.get(keycode) || false;
+        const toggleValue = toggleStates.get(keycode) || 0.0;
+        // Row 0 (y=0): Current key state
+        const row0Index = (0 * width + keycode) * 4;
+        data[row0Index + 0] = isDown ? 1.0 : 0.0; // R channel
+        data[row0Index + 1] = isDown ? 1.0 : 0.0; // G channel (redundant but matches Shadertoy)
+        data[row0Index + 2] = isDown ? 1.0 : 0.0; // B channel
+        data[row0Index + 3] = 1.0; // A channel
+        // Row 1 (y=1): Unused (keep as zeros)
+        // Row 2 (y=2): Toggle state
+        const row2Index = (2 * width + keycode) * 4;
+        data[row2Index + 0] = toggleValue;
+        data[row2Index + 1] = toggleValue;
+        data[row2Index + 2] = toggleValue;
+        data[row2Index + 3] = 1.0;
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, // x, y offset
+    width, height, gl.RGBA, gl.FLOAT, data);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+}
+/**
+ * Create a 2D texture from an HTMLImageElement (or ImageBitmap).
+ * This is used for project textures (dog.png, noise.png, etc.)
+ *
+ * NOTE: actual image loading is done by the App; engine just gets an
+ * already-loaded image object.
+ */
+export function createTextureFromImage(gl, image, filter, wrap) {
+    const tex = gl.createTexture();
+    if (!tex) {
+        throw new Error('Failed to create texture');
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // Upload image data
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    // Set filtering
+    const glFilter = filter === 'nearest' ? gl.NEAREST : gl.LINEAR;
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, glFilter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, glFilter);
+    // Set wrap mode
+    const glWrap = wrap === 'clamp' ? gl.CLAMP_TO_EDGE : gl.REPEAT;
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, glWrap);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, glWrap);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return tex;
+}
+// =============================================================================
+// Helper Utilities
+// =============================================================================
+/**
+ * Get a human-readable string for framebuffer status.
+ */
+function getFramebufferStatusString(gl, status) {
+    switch (status) {
+        case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+            return 'FRAMEBUFFER_INCOMPLETE_ATTACHMENT';
+        case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+            return 'FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT';
+        case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+            return 'FRAMEBUFFER_INCOMPLETE_DIMENSIONS';
+        case gl.FRAMEBUFFER_UNSUPPORTED:
+            return 'FRAMEBUFFER_UNSUPPORTED';
+        case gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
+            return 'FRAMEBUFFER_INCOMPLETE_MULTISAMPLE';
+        default:
+            return `Unknown status: ${status}`;
+    }
+}

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

@@ -0,0 +1,77 @@
+/**
+ * Engine Layer - Type Definitions
+ *
+ * Internal types used by ShadertoyEngine for managing WebGL resources.
+ * Based on docs/engine-spec.md
+ */
+import type { ShadertoyProject, PassName, Channels } from '../project/types';
+/**
+ * Options for constructing a ShadertoyEngine.
+ *
+ * The App is responsible for creating the WebGL2RenderingContext
+ * and passing it in.
+ */
+export interface EngineOptions {
+    gl: WebGL2RenderingContext;
+    project: ShadertoyProject;
+}
+/**
+ * Per-pass uniform locations and metadata.
+ *
+ * NOTE: This is separate from RuntimePass so that we can keep
+ * the GL program + locations together.
+ */
+export interface PassUniformLocations {
+    program: WebGLProgram;
+    iResolution: WebGLUniformLocation | null;
+    iTime: WebGLUniformLocation | null;
+    iTimeDelta: WebGLUniformLocation | null;
+    iFrame: WebGLUniformLocation | null;
+    iMouse: WebGLUniformLocation | null;
+    iChannel: (WebGLUniformLocation | null)[];
+}
+/**
+ * A runtime representation of a pass:
+ * - knows which project pass it corresponds to
+ * - owns two textures (current + previous) for ping-pong
+ * - owns a framebuffer and VAO for drawing
+ */
+export interface RuntimePass {
+    name: PassName;
+    projectChannels: Channels;
+    vao: WebGLVertexArrayObject;
+    uniforms: PassUniformLocations;
+    framebuffer: WebGLFramebuffer;
+    currentTexture: WebGLTexture;
+    previousTexture: WebGLTexture;
+}
+/**
+ * Runtime representation of an external 2D texture.
+ * This corresponds 1:1 to ShadertoyTexture2D from the project.
+ */
+export interface RuntimeTexture2D {
+    name: string;
+    texture: WebGLTexture;
+    width: number;
+    height: number;
+}
+/**
+ * Keyboard texture representation.
+ * For v1, you can leave this unimplemented or just stub it out.
+ */
+export interface RuntimeKeyboardTexture {
+    texture: WebGLTexture;
+    width: number;
+    height: number;
+}
+/**
+ * Engine stats (for optional overlay / debugging).
+ */
+export interface EngineStats {
+    frame: number;
+    time: number;
+    deltaTime: number;
+    width: number;
+    height: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/engine/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAM1B;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,sBAAsB,CAAC;IAC3B,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAMD;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,YAAY,CAAC;IAGtB,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACzC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACnC,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAGpC,QAAQ,EAAE,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC;CAC3C;AAMD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAE1B,GAAG,EAAE,sBAAsB,CAAC;IAC5B,QAAQ,EAAE,oBAAoB,CAAC;IAE/B,WAAW,EAAE,gBAAgB,CAAC;IAK9B,cAAc,EAAE,YAAY,CAAC;IAC7B,eAAe,EAAE,YAAY,CAAC;CAC/B;AAMD;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAMD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist-lib/engine/types.js

@@ -0,0 +1,7 @@
+/**
+ * Engine Layer - Type Definitions
+ *
+ * Internal types used by ShadertoyEngine for managing WebGL resources.
+ * Based on docs/engine-spec.md
+ */
+export {};

package/dist-lib/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shadertoy Runner - Public API
+ *
+ * This module exports everything needed to create a shader playground.
+ */
+import './styles/base.css';
+export { App } from './app/App';
+export { createLayout } from './layouts';
+export { loadDemo } from './project/loaderHelper';
+export type { ShadertoyProject, ShadertoyConfig, PassName } from './project/types';
+export type { RecompileResult, BaseLayout, LayoutMode, LayoutOptions, RecompileHandler } from './layouts/types';
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACnF,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist-lib/index.js

@@ -0,0 +1,9 @@
+/**
+ * Shadertoy Runner - Public API
+ *
+ * This module exports everything needed to create a shader playground.
+ */
+import './styles/base.css';
+export { App } from './app/App';
+export { createLayout } from './layouts';
+export { loadDemo } from './project/loaderHelper';

package/dist-lib/layouts/DefaultLayout.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Default Layout
+ *
+ * Centered canvas with rounded corners and drop shadow.
+ * Default layout mode for a polished presentation.
+ */
+import './default.css';
+import { BaseLayout, LayoutOptions } from './types';
+export declare class DefaultLayout implements BaseLayout {
+    private container;
+    private root;
+    private canvasContainer;
+    constructor(opts: LayoutOptions);
+    getCanvasContainer(): HTMLElement;
+    dispose(): void;
+}
+//# sourceMappingURL=DefaultLayout.d.ts.map

package/dist-lib/layouts/DefaultLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/DefaultLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,qBAAa,aAAc,YAAW,UAAU;IAC9C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;gBAEzB,IAAI,EAAE,aAAa;IAgB/B,kBAAkB,IAAI,WAAW;IAIjC,OAAO,IAAI,IAAI;CAGhB"}

package/dist-lib/layouts/DefaultLayout.js

@@ -0,0 +1,27 @@
+/**
+ * Default Layout
+ *
+ * Centered canvas with rounded corners and drop shadow.
+ * Default layout mode for a polished presentation.
+ */
+import './default.css';
+export class DefaultLayout {
+    constructor(opts) {
+        this.container = opts.container;
+        // Create root layout container
+        this.root = document.createElement('div');
+        this.root.className = 'layout-default';
+        // Create canvas container
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'canvas-container';
+        // Assemble and append to DOM
+        this.root.appendChild(this.canvasContainer);
+        this.container.appendChild(this.root);
+    }
+    getCanvasContainer() {
+        return this.canvasContainer;
+    }
+    dispose() {
+        this.container.innerHTML = '';
+    }
+}

package/dist-lib/layouts/FullscreenLayout.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Fullscreen Layout
+ *
+ * Canvas fills entire viewport, no padding or styling.
+ * Used for immersive shader experiences.
+ */
+import './fullscreen.css';
+import { BaseLayout, LayoutOptions } from './types';
+export declare class FullscreenLayout implements BaseLayout {
+    private container;
+    private root;
+    private canvasContainer;
+    constructor(opts: LayoutOptions);
+    getCanvasContainer(): HTMLElement;
+    dispose(): void;
+}
+//# sourceMappingURL=FullscreenLayout.d.ts.map

package/dist-lib/layouts/FullscreenLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/FullscreenLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,qBAAa,gBAAiB,YAAW,UAAU;IACjD,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;gBAEzB,IAAI,EAAE,aAAa;IAgB/B,kBAAkB,IAAI,WAAW;IAIjC,OAAO,IAAI,IAAI;CAGhB"}

package/dist-lib/layouts/FullscreenLayout.js

@@ -0,0 +1,27 @@
+/**
+ * Fullscreen Layout
+ *
+ * Canvas fills entire viewport, no padding or styling.
+ * Used for immersive shader experiences.
+ */
+import './fullscreen.css';
+export class FullscreenLayout {
+    constructor(opts) {
+        this.container = opts.container;
+        // Create root layout container
+        this.root = document.createElement('div');
+        this.root.className = 'layout-fullscreen';
+        // Create canvas container
+        this.canvasContainer = document.createElement('div');
+        this.canvasContainer.className = 'canvas-container';
+        // Assemble and append to DOM
+        this.root.appendChild(this.canvasContainer);
+        this.container.appendChild(this.root);
+    }
+    getCanvasContainer() {
+        return this.canvasContainer;
+    }
+    dispose() {
+        this.container.innerHTML = '';
+    }
+}

package/dist-lib/layouts/SplitLayout.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Split Layout
+ *
+ * Shader on left, editable code on right with syntax highlighting.
+ * Ideal for teaching and presentations where viewers can tweak the code.
+ */
+import './split.css';
+import { BaseLayout, LayoutOptions, RecompileHandler } from './types';
+export declare class SplitLayout implements BaseLayout {
+    private container;
+    private project;
+    private root;
+    private canvasContainer;
+    private codePanel;
+    private editorPanel;
+    private recompileHandler;
+    constructor(opts: LayoutOptions);
+    getCanvasContainer(): HTMLElement;
+    setRecompileHandler(handler: RecompileHandler): void;
+    dispose(): void;
+    /**
+     * Build editor panel (dynamically loaded).
+     */
+    private buildEditorPanel;
+}
+//# sourceMappingURL=SplitLayout.d.ts.map

package/dist-lib/layouts/SplitLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/SplitLayout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGtE,qBAAa,WAAY,YAAW,UAAU;IAC5C,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,SAAS,CAAc;IAE/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAiC;gBAE7C,IAAI,EAAE,aAAa;IAyB/B,kBAAkB,IAAI,WAAW;IAIjC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOpD,OAAO,IAAI,IAAI;IAQf;;OAEG;YACW,gBAAgB;CAW/B"}