@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/src/engine/glHelpers.ts

@@ -407,6 +407,123 @@ export function createTextureFromImage(
   return tex;
 }
 
+// =============================================================================
+// Audio Texture
+// =============================================================================
+
+/**
+ * Create a 512x2 audio texture (Shadertoy-compatible).
+ * Row 0: frequency spectrum (FFT), Row 1: waveform.
+ * Uses R8 format — data is in the red channel, sampled with texture().x
+ */
+export function createAudioTexture(gl: WebGL2RenderingContext): WebGLTexture {
+  const tex = gl.createTexture();
+  if (!tex) throw new Error('Failed to create audio texture');
+
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+
+  const width = 512;
+  const height = 2;
+  const data = new Uint8Array(width * height); // R8, all zeros
+
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, width, height, 0, gl.RED, gl.UNSIGNED_BYTE, data);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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 audio texture with frequency and waveform data.
+ */
+export function updateAudioTextureData(
+  gl: WebGL2RenderingContext,
+  texture: WebGLTexture,
+  frequencyData: Uint8Array,
+  waveformData: Uint8Array,
+): void {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  // Row 0: frequency
+  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 512, 1, gl.RED, gl.UNSIGNED_BYTE, frequencyData);
+  // Row 1: waveform
+  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 1, 512, 1, gl.RED, gl.UNSIGNED_BYTE, waveformData);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+// =============================================================================
+// Video/Webcam Texture
+// =============================================================================
+
+/**
+ * Create a placeholder texture for video/webcam (1x1 black, RGBA).
+ * Updated each frame with actual video data once ready.
+ */
+export function createVideoPlaceholderTexture(gl: WebGL2RenderingContext): WebGLTexture {
+  const tex = gl.createTexture();
+  if (!tex) throw new Error('Failed to create video texture');
+
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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;
+}
+
+/**
+ * Upload a video frame to a texture.
+ */
+export function updateVideoTexture(
+  gl: WebGL2RenderingContext,
+  texture: WebGLTexture,
+  video: HTMLVideoElement,
+): void {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+// =============================================================================
+// Script-Uploaded Texture
+// =============================================================================
+
+/**
+ * Create or update a script-uploaded texture.
+ * Detects data type: Uint8Array → RGBA8, Float32Array → RGBA32F.
+ */
+export function createOrUpdateScriptTexture(
+  gl: WebGL2RenderingContext,
+  existing: WebGLTexture | null,
+  width: number,
+  height: number,
+  data: Uint8Array | Float32Array,
+): WebGLTexture {
+  const tex = existing ?? gl.createTexture();
+  if (!tex) throw new Error('Failed to create script texture');
+
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+
+  if (data instanceof Float32Array) {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, data);
+  } else {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  }
+
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  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;
+}
+
 // =============================================================================
 // Helper Utilities
 // =============================================================================

package/src/engine/std140.ts

@@ -0,0 +1,136 @@
+/**
+ * std140 Layout Packing Utilities
+ *
+ * Handles conversion from tightly-packed user data to std140 layout
+ * required by WebGL2 Uniform Buffer Objects.
+ *
+ * std140 array element rules:
+ * - Every array element is rounded up to a vec4 (16 bytes) stride
+ * - float[N]: 4 bytes data + 12 bytes padding per element
+ * - vec2[N]:  8 bytes data + 8 bytes padding per element
+ * - vec3[N]:  12 bytes data + 4 bytes padding per element
+ * - vec4[N]:  16 bytes, no padding
+ * - mat3[N]:  3 columns of vec4 (padded) = 48 bytes per element
+ * - mat4[N]:  4 columns of vec4 = 64 bytes, no padding needed
+ */
+
+import { ArrayUniformType } from '../project/types';
+
+/** Number of floats per element in tightly-packed user data */
+const TIGHT_FLOATS: Record<ArrayUniformType, number> = {
+  float: 1,
+  vec2: 2,
+  vec3: 3,
+  vec4: 4,
+  mat3: 9,
+  mat4: 16,
+};
+
+/** Number of floats per array element in std140 layout */
+const STD140_STRIDE_FLOATS: Record<ArrayUniformType, number> = {
+  float: 4,   // 1 float + 3 padding
+  vec2: 4,    // 2 floats + 2 padding
+  vec3: 4,    // 3 floats + 1 padding
+  vec4: 4,    // 4 floats, naturally aligned
+  mat3: 12,   // 3 columns × 4 floats (vec3 padded to vec4)
+  mat4: 16,   // 4 columns × 4 floats, no padding
+};
+
+/**
+ * Number of tightly-packed floats for a given type and count.
+ */
+export function tightFloatCount(type: ArrayUniformType, count: number): number {
+  return TIGHT_FLOATS[type] * count;
+}
+
+/**
+ * Compute the total byte size of a std140 uniform block for an array.
+ */
+export function std140ByteSize(type: ArrayUniformType, count: number): number {
+  return STD140_STRIDE_FLOATS[type] * count * 4; // 4 bytes per float
+}
+
+/**
+ * Compute the total number of floats in std140 layout for a given type and count.
+ */
+export function std140FloatCount(type: ArrayUniformType, count: number): number {
+  return STD140_STRIDE_FLOATS[type] * count;
+}
+
+/**
+ * Pack tightly-packed user data into std140 layout.
+ *
+ * For mat4 and vec4, the tight layout is already std140-compatible,
+ * so this returns the input directly (no copy).
+ *
+ * For other types, allocates a new Float32Array with proper padding.
+ *
+ * @param type - The GLSL type of each array element
+ * @param count - Number of elements
+ * @param tightData - User-provided tightly-packed data
+ * @param out - Optional pre-allocated output buffer (reused across frames)
+ */
+export function packStd140(
+  type: ArrayUniformType,
+  count: number,
+  tightData: Float32Array,
+  out?: Float32Array
+): Float32Array {
+  const tightPerElement = TIGHT_FLOATS[type];
+  const strideFloats = STD140_STRIDE_FLOATS[type];
+
+  // Fast path: mat4 and vec4 are already std140-compatible
+  if (tightPerElement === strideFloats) {
+    return tightData;
+  }
+
+  const totalFloats = strideFloats * count;
+  const result = out && out.length >= totalFloats ? out : new Float32Array(totalFloats);
+
+  if (type === 'mat3') {
+    // mat3: 9 tight floats → 3 columns of vec4 (12 floats)
+    // Column-major: tight = [c0r0, c0r1, c0r2, c1r0, c1r1, c1r2, c2r0, c2r1, c2r2]
+    // std140:       [c0r0, c0r1, c0r2, 0, c1r0, c1r1, c1r2, 0, c2r0, c2r1, c2r2, 0]
+    for (let i = 0; i < count; i++) {
+      const srcOff = i * 9;
+      const dstOff = i * 12;
+      // Column 0
+      result[dstOff + 0] = tightData[srcOff + 0];
+      result[dstOff + 1] = tightData[srcOff + 1];
+      result[dstOff + 2] = tightData[srcOff + 2];
+      result[dstOff + 3] = 0;
+      // Column 1
+      result[dstOff + 4] = tightData[srcOff + 3];
+      result[dstOff + 5] = tightData[srcOff + 4];
+      result[dstOff + 6] = tightData[srcOff + 5];
+      result[dstOff + 7] = 0;
+      // Column 2
+      result[dstOff + 8] = tightData[srcOff + 6];
+      result[dstOff + 9] = tightData[srcOff + 7];
+      result[dstOff + 10] = tightData[srcOff + 8];
+      result[dstOff + 11] = 0;
+    }
+  } else {
+    // float, vec2, vec3: pad each element to 4 floats
+    for (let i = 0; i < count; i++) {
+      const srcOff = i * tightPerElement;
+      const dstOff = i * 4;
+      for (let j = 0; j < tightPerElement; j++) {
+        result[dstOff + j] = tightData[srcOff + j];
+      }
+      // Remaining floats stay 0 (from Float32Array initialization or previous clear)
+      for (let j = tightPerElement; j < 4; j++) {
+        result[dstOff + j] = 0;
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Get the GLSL type string for use in uniform block declarations.
+ */
+export function glslTypeName(type: ArrayUniformType): string {
+  return type; // float, vec2, vec3, vec4, mat3, mat4 are already valid GLSL
+}

package/src/engine/types.ts

@@ -1,14 +1,15 @@
 /**
  * Engine Layer - Type Definitions
  *
- * Internal types used by ShadertoyEngine for managing WebGL resources.
+ * Internal types used by ShaderEngine for managing WebGL resources.
  * Based on docs/engine-spec.md
  */
 
 import type {
-  ShadertoyProject,
+  ShaderProject,
   PassName,
   Channels,
+  ChannelSource,
 } from '../project/types';
 
 // =============================================================================
@@ -16,14 +17,14 @@ import type {
 // =============================================================================
 
 /**
- * Options for constructing a ShadertoyEngine.
+ * Options for constructing a ShaderEngine.
  *
  * The App is responsible for creating the WebGL2RenderingContext
  * and passing it in.
  */
 export interface EngineOptions {
   gl: WebGL2RenderingContext;
-  project: ShadertoyProject;
+  project: ShaderProject;
 }
 
 // =============================================================================
@@ -45,9 +46,29 @@ export interface PassUniformLocations {
   iTimeDelta: WebGLUniformLocation | null;
   iFrame: WebGLUniformLocation | null;
   iMouse: WebGLUniformLocation | null;
+  iMousePressed: WebGLUniformLocation | null;
+  iDate: WebGLUniformLocation | null;
+  iFrameRate: WebGLUniformLocation | null;
 
   // iChannel0..3
   iChannel: (WebGLUniformLocation | null)[];
+
+  // iChannelResolution[4] - resolution of each channel texture
+  iChannelResolution: (WebGLUniformLocation | null)[];
+
+  // Touch uniforms (Shader Sandbox extensions)
+  iTouchCount: WebGLUniformLocation | null;
+  iTouch: (WebGLUniformLocation | null)[]; // iTouch0, iTouch1, iTouch2
+  iPinch: WebGLUniformLocation | null;
+  iPinchDelta: WebGLUniformLocation | null;
+  iPinchCenter: WebGLUniformLocation | null;
+
+  // Custom uniforms (from project config)
+  custom: Map<string, WebGLUniformLocation | null>;
+
+  // Named samplers (standard mode)
+  namedSamplers: Map<string, WebGLUniformLocation | null>;
+  namedSamplerResolutions: Map<string, WebGLUniformLocation | null>;
 }
 
 // =============================================================================
@@ -74,6 +95,9 @@ export interface RuntimePass {
   // - previous: where we read "previous" from when needed
   currentTexture: WebGLTexture;
   previousTexture: WebGLTexture;
+
+  // Named samplers (standard mode) - maps sampler name → channel source
+  namedSamplers?: Map<string, ChannelSource>;
 }
 
 // =============================================================================
@@ -82,7 +106,7 @@ export interface RuntimePass {
 
 /**
  * Runtime representation of an external 2D texture.
- * This corresponds 1:1 to ShadertoyTexture2D from the project.
+ * This corresponds 1:1 to ShaderTexture2D from the project.
  */
 export interface RuntimeTexture2D {
   name: string; // e.g. "tex0" (same as project texture name)
@@ -101,6 +125,46 @@ export interface RuntimeKeyboardTexture {
   height: number;
 }
 
+/**
+ * Runtime audio texture (microphone FFT + waveform).
+ * 512x2, R8 format: row 0 = frequency, row 1 = waveform.
+ */
+export interface RuntimeAudioTexture {
+  texture: WebGLTexture;
+  audioContext: AudioContext | null;
+  analyser: AnalyserNode | null;
+  stream: MediaStream | null;
+  frequencyData: Uint8Array<ArrayBuffer>;   // 512 bytes
+  waveformData: Uint8Array<ArrayBuffer>;    // 512 bytes
+  width: number;  // 512
+  height: number; // 2
+  initialized: boolean;
+}
+
+/**
+ * Runtime video texture (webcam or video file).
+ */
+export interface RuntimeVideoTexture {
+  texture: WebGLTexture;
+  video: HTMLVideoElement | null;
+  stream: MediaStream | null;  // Only for webcam
+  width: number;
+  height: number;
+  ready: boolean;
+  kind: 'webcam' | 'video';
+  src?: string;  // Only for video files
+}
+
+/**
+ * Runtime script-uploaded texture.
+ */
+export interface RuntimeScriptTexture {
+  texture: WebGLTexture;
+  width: number;
+  height: number;
+  isFloat: boolean;  // Float32Array → RGBA32F, Uint8Array → RGBA8
+}
+
 // =============================================================================
 // Engine Stats
 // =============================================================================

package/src/index.ts

@@ -7,7 +7,8 @@
 import './styles/base.css';
 
 export { App } from './app/App';
-export { createLayout } from './layouts';
+export { createLayout, applyTheme } 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';
+export type { ShaderProject, ProjectConfig, PassName, ThemeMode, DemoScriptHooks, ScriptEngineAPI, ArrayUniformDefinition } from './project/types';
+export { isArrayUniform } from './project/types';
+export type { RecompileResult, BaseLayout, LayoutMode, LayoutOptions, RecompileHandler, UniformChangeHandler } from './layouts/types';

package/src/layouts/SplitLayout.ts

@@ -7,12 +7,12 @@
 
 import './split.css';
 
-import { BaseLayout, LayoutOptions, RecompileHandler } from './types';
-import { ShadertoyProject } from '../project/types';
+import { BaseLayout, LayoutOptions, RecompileHandler, UniformChangeHandler } from './types';
+import { ShaderProject } from '../project/types';
 
 export class SplitLayout implements BaseLayout {
   private container: HTMLElement;
-  private project: ShadertoyProject;
+  private project: ShaderProject;
   private root: HTMLElement;
   private canvasContainer: HTMLElement;
   private codePanel: HTMLElement;
@@ -20,6 +20,7 @@ export class SplitLayout implements BaseLayout {
   private editorPanel: any = null;
   private recompileHandler: RecompileHandler | null = null;
 
+
   constructor(opts: LayoutOptions) {
     this.container = opts.container;
     this.project = opts.project;
@@ -56,6 +57,10 @@ export class SplitLayout implements BaseLayout {
     }
   }
 
+  setUniformHandler(_handler: UniformChangeHandler): void {
+    // TODO: wire up uniform change handler to editor panel
+  }
+
   dispose(): void {
     if (this.editorPanel) {
       this.editorPanel.dispose();

package/src/layouts/TabbedLayout.ts

@@ -8,7 +8,7 @@
 import './tabbed.css';
 
 import { BaseLayout, LayoutOptions, RecompileHandler } from './types';
-import { ShadertoyProject, PassName } from '../project/types';
+import { ShaderProject, PassName } from '../project/types';
 
 type ShaderTab = { kind: 'shader'; name: string };
 type CodeTab = { kind: 'code'; name: string; passName: 'common' | PassName; source: string };
@@ -17,7 +17,7 @@ type Tab = ShaderTab | CodeTab | ImageTab;
 
 export class TabbedLayout implements BaseLayout {
   private container: HTMLElement;
-  private project: ShadertoyProject;
+  private project: ShaderProject;
   private root: HTMLElement;
   private canvasContainer: HTMLElement;
   private contentArea: HTMLElement;
@@ -337,7 +337,7 @@ export class TabbedLayout implements BaseLayout {
         this.imageViewer.style.visibility = 'visible';
 
         const img = document.createElement('img');
-        img.src = tab.url;
+        img.src = (tab as ImageTab).url;
         img.alt = tab.name;
 
         this.imageViewer.innerHTML = '';

package/src/layouts/UILayout.ts

@@ -0,0 +1,185 @@
+/**
+ * UI Layout
+ *
+ * Shader on left, uniform controls panel on right (~200px wide).
+ * Playback controls (play/pause, reset, screenshot) at bottom of UI panel.
+ * Responsive: stacks vertically on small screens (<600px).
+ */
+
+import './ui.css';
+
+import { BaseLayout, LayoutOptions } from './types';
+import { ShaderProject, UniformValue } from '../project/types';
+import type { UniformControls as UniformControlsType } from '../uniforms/UniformControls';
+
+export class UILayout implements BaseLayout {
+  private container: HTMLElement;
+  private project: ShaderProject;
+  private root: HTMLElement;
+  private canvasContainer: HTMLElement;
+  private uiPanel: HTMLElement;
+
+  // Uniform controls
+  private uniformsContainer: HTMLElement;
+  private uniformControls: UniformControlsType | null = null;
+
+  // Playback controls
+  private playbackContainer: HTMLElement;
+  private playPauseButton: HTMLElement | null = null;
+
+  // Callbacks (set by App)
+  private onPlayPause: (() => void) | null = null;
+  private onReset: (() => void) | null = null;
+  private onScreenshot: (() => void) | null = null;
+  private onUniformChange: ((name: string, value: UniformValue) => void) | null = null;
+
+  constructor(opts: LayoutOptions) {
+    this.container = opts.container;
+    this.project = opts.project;
+
+    // Create root layout container
+    this.root = document.createElement('div');
+    this.root.className = 'layout-ui';
+
+    // Create canvas container (left side)
+    this.canvasContainer = document.createElement('div');
+    this.canvasContainer.className = 'ui-canvas-container';
+
+    // Create UI panel (right side)
+    this.uiPanel = document.createElement('div');
+    this.uiPanel.className = 'ui-panel';
+
+    // Create uniforms container (scrollable, vertically centered)
+    this.uniformsContainer = document.createElement('div');
+    this.uniformsContainer.className = 'ui-uniforms-container';
+    this.uiPanel.appendChild(this.uniformsContainer);
+
+    // Create playback controls container (fixed at bottom)
+    this.playbackContainer = document.createElement('div');
+    this.playbackContainer.className = 'ui-playback-container';
+    this.buildPlaybackControls();
+    this.uiPanel.appendChild(this.playbackContainer);
+
+    // Load uniform controls
+    this.loadUniformControls();
+
+    // Assemble and append to DOM
+    this.root.appendChild(this.canvasContainer);
+    this.root.appendChild(this.uiPanel);
+    this.container.appendChild(this.root);
+  }
+
+  getCanvasContainer(): HTMLElement {
+    return this.canvasContainer;
+  }
+
+  /**
+   * Set callbacks for playback controls.
+   * Called by App after initialization.
+   */
+  setPlaybackCallbacks(callbacks: {
+    onPlayPause: () => void;
+    onReset: () => void;
+    onScreenshot: () => void;
+  }): void {
+    this.onPlayPause = callbacks.onPlayPause;
+    this.onReset = callbacks.onReset;
+    this.onScreenshot = callbacks.onScreenshot;
+  }
+
+  /**
+   * Set callback for uniform changes.
+   * Called by App after initialization.
+   */
+  setUniformCallback(callback: (name: string, value: UniformValue) => void): void {
+    this.onUniformChange = callback;
+  }
+
+  /**
+   * Update play/pause button state.
+   */
+  setPaused(paused: boolean): void {
+    if (this.playPauseButton) {
+      this.playPauseButton.innerHTML = paused
+        ? `<svg viewBox="0 0 16 16"><path d="M4 3v10l8-5-8-5z"/></svg>`
+        : `<svg viewBox="0 0 16 16"><path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/></svg>`;
+      this.playPauseButton.title = paused ? 'Play' : 'Pause';
+    }
+  }
+
+  dispose(): void {
+    if (this.uniformControls) {
+      this.uniformControls.destroy();
+      this.uniformControls = null;
+    }
+    this.container.innerHTML = '';
+  }
+
+  /**
+   * Build playback control buttons.
+   */
+  private buildPlaybackControls(): void {
+    // Play/Pause button
+    this.playPauseButton = document.createElement('button');
+    this.playPauseButton.className = 'ui-control-button';
+    this.playPauseButton.title = 'Pause';
+    this.playPauseButton.innerHTML = `<svg viewBox="0 0 16 16"><path d="M5 3h2v10H5V3zm4 0h2v10H9V3z"/></svg>`;
+    this.playPauseButton.addEventListener('click', () => {
+      if (this.onPlayPause) this.onPlayPause();
+    });
+
+    // Reset button
+    const resetButton = document.createElement('button');
+    resetButton.className = 'ui-control-button';
+    resetButton.title = 'Reset';
+    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', () => {
+      if (this.onReset) this.onReset();
+    });
+
+    // Screenshot button
+    const screenshotButton = document.createElement('button');
+    screenshotButton.className = 'ui-control-button';
+    screenshotButton.title = 'Screenshot';
+    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', () => {
+      if (this.onScreenshot) this.onScreenshot();
+    });
+
+    this.playbackContainer.appendChild(this.playPauseButton);
+    this.playbackContainer.appendChild(resetButton);
+    this.playbackContainer.appendChild(screenshotButton);
+  }
+
+  /**
+   * Load uniform controls dynamically.
+   */
+  private async loadUniformControls(): Promise<void> {
+    const uniforms = this.project.uniforms;
+
+    // If no uniforms, show empty state
+    if (!uniforms || Object.keys(uniforms).length === 0) {
+      const emptyState = document.createElement('div');
+      emptyState.className = 'ui-empty-state';
+      emptyState.textContent = 'No uniforms';
+      this.uniformsContainer.appendChild(emptyState);
+      return;
+    }
+
+    try {
+      const { UniformControls } = await import('../uniforms/UniformControls');
+      this.uniformControls = new UniformControls({
+        container: this.uniformsContainer,
+        uniforms: uniforms,
+        onChange: (name: string, value: UniformValue) => {
+          if (this.onUniformChange) {
+            this.onUniformChange(name, value);
+          }
+        },
+      });
+    } catch (err) {
+      console.error('Failed to load uniform controls:', err);
+      this.uniformsContainer.textContent = 'Failed to load controls';
+    }
+  }
+}

package/src/layouts/default.css

@@ -15,8 +15,8 @@
   position: relative;
   width: 800px;
   height: 600px;
-  background: #000;
+  background: var(--bg-canvas);
   border-radius: 8px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg), var(--shadow-sm);
   overflow: hidden;
 }