feat: sandboxed iframe TSL preview runtime

[devallibus]

Context

Follow-up from #56 (TSL support). The playground currently shows a placeholder for TSL sessions. We need a sandboxed iframe runtime that actually executes TSL code and renders it with WebGPURenderer + NodeMaterial.

Architecture (from #56)

Two separate runtimes behind a shared interface:

type PreviewResult = {
  errors: PlaygroundError[]
  screenshotBase64: string | null
}

interface PreviewRuntime {
  init(container: HTMLElement): Promise<void>
  render(session: PlaygroundSession): Promise<PreviewResult>
  dispose(): void
}

• GlslPreviewRuntime: existing WebGLRenderer + ShaderMaterial + GL log scraping
• TslPreviewRuntime: WebGPURenderer + NodeMaterial from createMaterial() contract

Sandbox model

TSL runs in a sandboxed iframe (sandbox="allow-scripts", no allow-same-origin). Source passed via postMessage, screenshots/errors returned via postMessage. Same isolation model as CodePen/CodeSandbox.

TSL contract

Every TSL shader exports createMaterial:

import { color, mix, uv, sin, time } from 'three/tsl';
import { NodeMaterial } from 'three/webgpu';

export function createMaterial(): NodeMaterial {
  const material = new NodeMaterial();
  // ... build node graph ...
  return material;
}

Current state

• PlaygroundCanvas.tsx has a placeholder for TSL ("WebGPU-based TSL preview coming soon.")
• Structured error types are already in place (tsl-parse, tsl-runtime, tsl-material-build)
• Session DB has shader_language and tsl_source columns

Tasks

• Create iframe sandbox HTML that loads Three.js and evaluates TSL source
• Implement postMessage protocol (source in, screenshot/errors out)
• Create TslPreviewRuntime class
• Refactor PlaygroundCanvas.tsx to use the runtime interface
• Handle WebGPU availability detection and fallback messaging
• Wire up structured error reporting from the iframe

Explicitly out of scope

• TSL postprocessing pipeline (separate issue)
• Same-origin execution of user TSL source