@pixerate/flair 0.0.0-stage → 0.1.0

package/dist/chunk-JWZCPMFG.js

@@ -0,0 +1,2074 @@
+import {
+  SVG_EDGE,
+  ShaderCompileError,
+  TextureCache,
+  VERTEX_SOURCE,
+  compileShader,
+  createContext,
+  drawFrame,
+  resetGlCaches,
+  wrapSource
+} from "./chunk-HKXOHRCD.js";
+import {
+  ManualClock
+} from "./chunk-WMZQCUFJ.js";
+import {
+  CAMERA_MS,
+  DEFAULT_STAGE,
+  areaOf,
+  between,
+  boundsOf,
+  calculateFramingRect,
+  easeInOutCubic,
+  frame,
+  isDeleteCommand,
+  isElementCommand,
+  isUpdateCommand,
+  overlapArea,
+  viewAt,
+  visibleRect
+} from "./chunk-36DTNSHU.js";
+import {
+  controlValue,
+  imageUrls,
+  parseControls
+} from "./chunk-J55UBNAT.js";
+
+// src/shader/renderer.ts
+var ShaderRenderer = class {
+  canvas;
+  gl;
+  shader = null;
+  textures = null;
+  controls = [];
+  values;
+  source = "";
+  raf = 0;
+  lastNow = 0;
+  frame = 0;
+  fpsFrames = 0;
+  fpsSince = 0;
+  resizeObserver;
+  mouse = [0, 0, 0, 0];
+  disposed = false;
+  /** The latest source's status. */
+  status = { ok: true, errors: [] };
+  /** `iTime`, in seconds. Use `seek` to change it. */
+  time = 0;
+  /** Playback speed: 1 is real time. */
+  speed = 1;
+  /** Device pixels per CSS pixel; lower renders faster. Use `setPixelRatio` to change it. */
+  pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+  playing = true;
+  fps = 0;
+  onStats;
+  /** Called with `true` when the GL context is lost and `false` once it is restored and recompiled. */
+  onContextLost;
+  /** Called when an image control's URL cannot be loaded; the control shows black. */
+  onImageError;
+  /** Creates a canvas in `host` (with `className`) and starts the animation loop. Size the canvas with CSS. */
+  constructor(host, className = "") {
+    const canvas = document.createElement("canvas");
+    canvas.className = className;
+    host.appendChild(canvas);
+    this.canvas = canvas;
+    this.gl = createContext(canvas, true);
+    this.textures = this.gl && this.textureCache(this.gl);
+    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver.observe(canvas);
+    canvas.addEventListener("webglcontextlost", this.onLost);
+    canvas.addEventListener("webglcontextrestored", this.onRestored);
+    canvas.addEventListener("pointerdown", this.onPointerDown);
+    canvas.addEventListener("pointermove", this.onPointerMove);
+    window.addEventListener("pointerup", this.onPointerUp);
+    this.resize();
+    this.raf = requestAnimationFrame(this.tick);
+  }
+  /** False when the browser has no WebGL2. */
+  get supported() {
+    return this.gl !== null;
+  }
+  /** Compiles a new source; returns its status. Keeps the previous program when it fails. */
+  setSource(source) {
+    this.source = source;
+    const controls = parseControls(source);
+    if (!this.gl) {
+      this.status = {
+        ok: false,
+        errors: [{ line: 0, message: "WebGL2 is not available in this browser." }]
+      };
+      return this.status;
+    }
+    const result = compileShader(this.gl, source, controls);
+    if (result.ok) {
+      if (this.shader) this.gl.deleteProgram(this.shader.program);
+      this.shader = result.shader;
+      this.controls = controls;
+      this.status = { ok: true, errors: [] };
+    } else {
+      this.status = { ok: false, errors: result.errors };
+    }
+    this.syncTextures();
+    if (!this.playing) this.render();
+    return this.status;
+  }
+  /**
+   * Sets control values (see `controlValue`); a paused preview redraws.
+   * Images load in the background and show once they arrive: await
+   * `ready()` before a `capture` that needs them.
+   */
+  setValues(values) {
+    this.values = values;
+    this.syncTextures();
+    if (!this.playing) this.render();
+  }
+  /**
+   * Settles once the images the current controls show have loaded. Rejects
+   * with an {@link ImageLoadError} when one cannot be (it shows black).
+   */
+  async ready() {
+    await this.textures?.ready(imageUrls(this.controls, this.values));
+  }
+  play() {
+    this.playing = true;
+    this.emit();
+  }
+  pause() {
+    this.playing = false;
+    this.emit();
+  }
+  /** Back to `iTime` 0 and frame 0. */
+  restart() {
+    this.time = 0;
+    this.frame = 0;
+    this.render();
+    this.emit();
+  }
+  /** Jumps to `time` seconds (not below 0) and draws it. */
+  seek(time) {
+    this.time = Math.max(0, time);
+    this.render();
+    this.emit();
+  }
+  setPixelRatio(ratio) {
+    this.pixelRatio = ratio;
+    this.resize();
+  }
+  /**
+   * Captures the current frame (optionally at another time) as a data URL
+   * (JPEG unless `type` says PNG), at most `maxEdge` pixels on the long side
+   * (default 1024). Playback time is left as it was. Null when nothing has
+   * compiled yet.
+   */
+  capture(options = {}) {
+    if (!this.gl || !this.shader) return null;
+    const saved = this.time;
+    if (options.time !== void 0) this.time = Math.max(0, options.time);
+    this.render();
+    const { width, height } = this.canvas;
+    const scale = Math.min(1, (options.maxEdge ?? 1024) / Math.max(width, height));
+    const out = document.createElement("canvas");
+    out.width = Math.max(1, Math.round(width * scale));
+    out.height = Math.max(1, Math.round(height * scale));
+    out.getContext("2d").drawImage(this.canvas, 0, 0, out.width, out.height);
+    this.time = saved;
+    if (options.time !== void 0) this.render();
+    return out.toDataURL(options.type ?? "image/jpeg", 0.85);
+  }
+  /** Stops the loop, releases the context and removes the canvas. The renderer cannot be used again. */
+  dispose() {
+    this.disposed = true;
+    cancelAnimationFrame(this.raf);
+    this.resizeObserver.disconnect();
+    this.canvas.removeEventListener("webglcontextlost", this.onLost);
+    this.canvas.removeEventListener("webglcontextrestored", this.onRestored);
+    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    this.canvas.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    if (this.gl && this.shader) this.gl.deleteProgram(this.shader.program);
+    this.textures?.dispose();
+    this.textures = null;
+    this.gl?.getExtension("WEBGL_lose_context")?.loseContext();
+    this.gl = null;
+    this.canvas.remove();
+  }
+  resize() {
+    const w = Math.max(1, Math.round(this.canvas.clientWidth * this.pixelRatio));
+    const h = Math.max(1, Math.round(this.canvas.clientHeight * this.pixelRatio));
+    if (this.canvas.width !== w || this.canvas.height !== h) {
+      this.canvas.width = w;
+      this.canvas.height = h;
+      this.render();
+    }
+  }
+  render(delta = 0) {
+    if (!this.gl || !this.shader || this.gl.isContextLost()) return;
+    drawFrame(
+      this.gl,
+      this.shader,
+      this.controls,
+      this.values,
+      {
+        width: this.canvas.width,
+        height: this.canvas.height,
+        time: this.time,
+        delta,
+        frame: this.frame,
+        mouse: this.mouse
+      },
+      this.textures ?? void 0
+    );
+  }
+  textureCache(gl) {
+    return new TextureCache(gl, (_url, error) => {
+      if (error) this.onImageError?.(error);
+      else if (!this.playing) this.render();
+    });
+  }
+  /** Starts loading the images now shown, and frees the ones no longer shown. */
+  syncTextures() {
+    if (!this.textures) return;
+    const urls = imageUrls(this.controls, this.values);
+    this.textures.retain(urls);
+    for (const url of urls) this.textures.request(url);
+  }
+  tick = (now) => {
+    if (this.disposed) return;
+    this.raf = requestAnimationFrame(this.tick);
+    const delta = this.lastNow ? Math.min((now - this.lastNow) / 1e3, 0.1) : 0;
+    this.lastNow = now;
+    if (this.playing) {
+      this.time += delta * this.speed;
+      this.frame += 1;
+      this.render(delta * this.speed);
+      this.fpsFrames += 1;
+    }
+    if (now - this.fpsSince >= 500) {
+      this.fps = this.playing ? Math.round(this.fpsFrames * 1e3 / (now - this.fpsSince || 1)) : 0;
+      this.fpsFrames = 0;
+      this.fpsSince = now;
+      this.emit();
+    }
+  };
+  emit() {
+    this.onStats?.({
+      time: this.time,
+      fps: this.fps,
+      playing: this.playing,
+      width: this.canvas.width,
+      height: this.canvas.height
+    });
+  }
+  /** Pointer position in shader pixels (origin bottom-left, like gl_FragCoord). */
+  toPixels(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return [
+      (e.clientX - rect.left) * (this.canvas.width / rect.width),
+      (rect.bottom - e.clientY) * (this.canvas.height / rect.height)
+    ];
+  }
+  onPointerDown = (e) => {
+    const [x, y] = this.toPixels(e);
+    this.mouse = [x, y, x, y];
+    if (!this.playing) this.render();
+  };
+  onPointerMove = (e) => {
+    if (this.mouse[2] <= 0 || e.buttons === 0) return;
+    const [x, y] = this.toPixels(e);
+    this.mouse = [x, y, this.mouse[2], this.mouse[3]];
+    if (!this.playing) this.render();
+  };
+  onPointerUp = () => {
+    if (this.mouse[2] > 0)
+      this.mouse = [this.mouse[0], this.mouse[1], -this.mouse[2], -Math.abs(this.mouse[3])];
+  };
+  onLost = (e) => {
+    e.preventDefault();
+    this.shader = null;
+    this.textures?.dispose();
+    this.textures = null;
+    this.onContextLost?.(true);
+  };
+  onRestored = () => {
+    resetGlCaches();
+    this.gl = createContext(this.canvas, true);
+    this.textures = this.gl && this.textureCache(this.gl);
+    this.setSource(this.source);
+    this.onContextLost?.(false);
+  };
+};
+
+// src/shader/thumbnails.ts
+var ThumbnailPool = class {
+  renderWidth;
+  renderHeight;
+  interval;
+  fps;
+  stillTime;
+  reducedMotion;
+  entries = /* @__PURE__ */ new Set();
+  byCanvas = /* @__PURE__ */ new WeakMap();
+  observer;
+  glCanvas = null;
+  gl = null;
+  textures = null;
+  raf = 0;
+  last = 0;
+  start = null;
+  constructor(options = {}) {
+    this.renderWidth = options.renderWidth ?? 480;
+    this.renderHeight = options.renderHeight ?? 270;
+    this.fps = options.fps ?? 30;
+    this.interval = 1e3 / this.fps;
+    this.stillTime = options.stillTime ?? 2;
+    this.reducedMotion = options.reducedMotion ?? (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches);
+  }
+  /**
+   * Starts drawing `source` into `canvas`, which should be sized with CSS; its
+   * drawing buffer follows its CSS size and the device pixel ratio (up to 2).
+   * `onStatus` hears whether the source compiled (and `false` without WebGL2).
+   */
+  register(canvas, source, values, onStatus) {
+    const observer = this.intersection();
+    const entry = {
+      canvas,
+      ctx: canvas.getContext("2d"),
+      source,
+      values,
+      controls: [],
+      shader: null,
+      failed: false,
+      dirty: true,
+      visible: observer === null,
+      hovered: false,
+      onStatus
+    };
+    this.entries.add(entry);
+    this.byCanvas.set(canvas, entry);
+    observer?.observe(canvas);
+    if (!this.context()) onStatus?.(false);
+    this.schedule();
+    return {
+      update: (nextSource, nextValues) => {
+        if (nextSource !== entry.source) {
+          this.release(entry);
+          entry.source = nextSource;
+          entry.failed = false;
+        }
+        entry.values = nextValues;
+        entry.dirty = true;
+        this.retainTextures();
+        this.schedule();
+      },
+      setHovered: (hovered) => {
+        entry.hovered = hovered;
+        entry.dirty = true;
+        this.schedule();
+      },
+      dispose: () => {
+        observer?.unobserve(canvas);
+        this.entries.delete(entry);
+        this.byCanvas.delete(canvas);
+        this.release(entry);
+        this.retainTextures();
+      }
+    };
+  }
+  /** The number of registered thumbnails. */
+  get size() {
+    return this.entries.size;
+  }
+  intersection() {
+    if (this.observer !== void 0) return this.observer;
+    this.observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(
+      (records) => {
+        for (const r of records) {
+          const entry = this.byCanvas.get(r.target);
+          if (!entry) continue;
+          entry.visible = r.isIntersecting;
+          if (entry.visible) entry.dirty = true;
+        }
+        this.schedule();
+      },
+      { rootMargin: "100px" }
+    );
+    return this.observer;
+  }
+  context() {
+    if (this.gl && !this.gl.isContextLost()) return this.gl;
+    const canvas = document.createElement("canvas");
+    canvas.width = this.renderWidth;
+    canvas.height = this.renderHeight;
+    canvas.addEventListener("webglcontextlost", (e) => {
+      e.preventDefault();
+      for (const entry of this.entries) entry.shader = null;
+      this.textures?.dispose();
+    });
+    canvas.addEventListener("webglcontextrestored", () => {
+      resetGlCaches();
+      if (this.gl) this.textures = this.textureCache(this.gl);
+      for (const entry of this.entries) entry.dirty = true;
+      this.schedule();
+    });
+    resetGlCaches();
+    this.glCanvas = canvas;
+    this.gl = createContext(canvas);
+    this.textures = this.gl && this.textureCache(this.gl);
+    return this.gl;
+  }
+  textureCache(gl) {
+    return new TextureCache(gl, (url) => {
+      for (const entry of this.entries) {
+        if (imageUrls(entry.controls, entry.values).includes(url)) entry.dirty = true;
+      }
+      this.schedule();
+    });
+  }
+  /** Frees the textures no thumbnail shows any more. */
+  retainTextures() {
+    this.textures?.retain(
+      [...this.entries].flatMap((entry) => imageUrls(entry.controls, entry.values))
+    );
+  }
+  release(entry) {
+    if (entry.shader) this.gl?.deleteProgram(entry.shader.program);
+    entry.shader = null;
+  }
+  compile(entry, gl) {
+    entry.controls = parseControls(entry.source);
+    const result = compileShader(gl, entry.source, entry.controls);
+    entry.shader = result.ok ? result.shader : null;
+    entry.failed = !result.ok;
+    entry.onStatus?.(result.ok);
+  }
+  renderEntry(entry, gl, time) {
+    if (!entry.shader && !entry.failed) this.compile(entry, gl);
+    if (!entry.shader) return;
+    sizeCanvas(entry.canvas);
+    const aspect = entry.canvas.width / entry.canvas.height;
+    const w = Math.min(this.renderWidth, Math.round(this.renderHeight * aspect));
+    const h = Math.min(this.renderHeight, Math.round(w / aspect));
+    drawFrame(
+      gl,
+      entry.shader,
+      entry.controls,
+      entry.values,
+      {
+        width: w,
+        height: h,
+        time,
+        delta: this.interval / 1e3,
+        frame: Math.floor(time * this.fps),
+        mouse: [0, 0, 0, 0]
+      },
+      this.textures ?? void 0
+    );
+    entry.ctx.drawImage(
+      this.glCanvas,
+      0,
+      this.renderHeight - h,
+      w,
+      h,
+      0,
+      0,
+      entry.canvas.width,
+      entry.canvas.height
+    );
+    entry.dirty = false;
+  }
+  schedule() {
+    if (!this.raf && this.entries.size) this.raf = requestAnimationFrame(this.tick);
+  }
+  tick = (now) => {
+    this.raf = 0;
+    const gl = this.context();
+    if (!gl) return;
+    this.start ??= now;
+    const animate = now - this.last >= this.interval;
+    const time = (now - this.start) / 1e3;
+    let keepGoing = false;
+    for (const entry of this.entries) {
+      if (!entry.visible) continue;
+      const moving = !this.reducedMotion || entry.hovered;
+      if (entry.dirty || moving && animate) {
+        this.renderEntry(entry, gl, moving ? time : this.stillTime);
+      }
+      if (moving && entry.shader) keepGoing = true;
+    }
+    if (animate) this.last = now;
+    if (keepGoing) this.schedule();
+  };
+};
+function sizeCanvas(canvas) {
+  const ratio = Math.min(window.devicePixelRatio || 1, 2);
+  const w = Math.max(1, Math.round(canvas.clientWidth * ratio));
+  const h = Math.max(1, Math.round(canvas.clientHeight * ratio));
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+}
+var shared = null;
+function sharedThumbnailPool() {
+  shared ??= new ThumbnailPool();
+  return shared;
+}
+function registerThumbnail(canvas, source, values, onStatus) {
+  return sharedThumbnailPool().register(canvas, source, values, onStatus);
+}
+
+// src/shader/frames.ts
+var ShaderFrames = class {
+  canvas;
+  width;
+  height;
+  controls;
+  gl;
+  shader;
+  textures;
+  values;
+  rendered = 0;
+  lastTime = null;
+  pixels;
+  constructor(options) {
+    const { source, values, width, height } = options;
+    this.width = Math.max(1, Math.round(width));
+    this.height = Math.max(1, Math.round(height));
+    this.canvas = options.canvas ?? document.createElement("canvas");
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+    this.values = values;
+    const gl = createContext(this.canvas, true);
+    if (!gl) throw new Error("WebGL2 is not available in this browser.");
+    this.gl = gl;
+    this.controls = parseControls(source);
+    const compiled = compileShader(gl, source, this.controls);
+    if (!compiled.ok) {
+      this.dispose();
+      throw new ShaderCompileError(compiled.errors);
+    }
+    this.shader = compiled.shader;
+    this.textures = new TextureCache(gl);
+    this.syncTextures();
+    this.pixels = new Uint8Array(this.width * this.height * 4);
+  }
+  /** Changes control values for the frames that follow. */
+  setValues(values) {
+    this.values = values;
+    this.syncTextures();
+  }
+  /**
+   * Settles once every image the controls show has loaded. Rejects with an
+   * {@link ImageLoadError} when one cannot be.
+   */
+  async ready() {
+    await this.textures.ready(imageUrls(this.controls, this.values));
+  }
+  /** Draws the frame at `time` seconds onto `canvas`. */
+  render(time, options = {}) {
+    const gl = this.context();
+    const delta = options.delta ?? (this.lastTime === null ? 0 : time - this.lastTime);
+    drawFrame(
+      gl,
+      this.shader,
+      this.controls,
+      this.values,
+      {
+        width: this.width,
+        height: this.height,
+        time,
+        delta,
+        frame: options.frame ?? this.rendered,
+        mouse: options.mouse ?? [0, 0, 0, 0]
+      },
+      this.textures
+    );
+    this.rendered += 1;
+    this.lastTime = time;
+  }
+  /**
+   * The last rendered frame as RGBA bytes, rows top down (as in `ImageData`;
+   * WebGL itself reads bottom up). Pass `out` to reuse a buffer of
+   * `width * height * 4` bytes.
+   */
+  readPixels(out) {
+    const gl = this.context();
+    const { width, height } = this;
+    const target = out ?? new Uint8Array(width * height * 4);
+    if (target.length !== width * height * 4) {
+      throw new RangeError(`readPixels needs a buffer of ${width * height * 4} bytes.`);
+    }
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
+    const row = width * 4;
+    for (let y = 0; y < height; y++) {
+      target.set(this.pixels.subarray((height - 1 - y) * row, (height - y) * row), y * row);
+    }
+    return target;
+  }
+  /** Releases the GL context now rather than at garbage collection (browsers cap live contexts). */
+  dispose() {
+    if (!this.gl) return;
+    if (this.shader) this.gl.deleteProgram(this.shader.program);
+    this.textures?.dispose();
+    this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+    this.gl = null;
+  }
+  syncTextures() {
+    const urls = imageUrls(this.controls, this.values);
+    this.textures.retain(urls);
+    for (const url of urls) this.textures.request(url);
+  }
+  context() {
+    if (!this.gl) throw new Error("These frames have been disposed.");
+    if (this.gl.isContextLost()) throw new Error("The graphics context was lost.");
+    return this.gl;
+  }
+};
+
+// src/shader/gif.ts
+var yieldToBrowser = () => new Promise((resolve) => setTimeout(resolve, 0));
+async function recordGif(options) {
+  const { source, values, width, height, fps, duration, start = 0, onProgress, signal } = options;
+  const { GIFEncoder, quantize, applyPalette } = await import("gifenc");
+  const frames = new ShaderFrames({ source, values, width, height });
+  try {
+    await frames.ready();
+    const total = Math.max(1, Math.round(duration * fps));
+    const delay = 1e3 / fps;
+    const rgba = new Uint8Array(frames.width * frames.height * 4);
+    const gif = GIFEncoder();
+    for (let i = 0; i < total; i++) {
+      if (signal?.aborted) throw new DOMException("Cancelled", "AbortError");
+      frames.render(start + i / fps, { frame: i, delta: 1 / fps });
+      frames.readPixels(rgba);
+      const palette = quantize(rgba, 256);
+      gif.writeFrame(applyPalette(rgba, palette), frames.width, frames.height, {
+        palette,
+        delay,
+        ...i === 0 ? { repeat: 0 } : {}
+      });
+      onProgress?.(i + 1, total);
+      if (i % 2 === 1) await yieldToBrowser();
+    }
+    gif.finish();
+    return new Blob([gif.bytes()], { type: "image/gif" });
+  } finally {
+    frames.dispose();
+  }
+}
+
+// src/shader/standalone.ts
+var escapeHtml = (s) => s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var scriptJson = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+function standaloneHtml(title, source, values, options = {}) {
+  const controls = parseControls(source).map((c) => ({
+    name: c.name,
+    type: c.type,
+    value: controlValue(c, values),
+    ...c.texture ? { texture: c.texture } : {}
+  }));
+  const credit = (options.credit ?? "Exported with Flair.").replace(/\n/g, " ");
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>html,body{margin:0;height:100%;background:#000}canvas{display:block;width:100%;height:100%}</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<script>
+// ${credit.replace(/</g, "\\u003c")} Shadertoy-style fragment shader on WebGL2.
+const VERTEX = ${scriptJson(VERTEX_SOURCE)};
+const FRAGMENT = ${scriptJson(wrapSource(source))};
+const CONTROLS = ${scriptJson(controls)};
+const canvas = document.getElementById("c");
+const gl = canvas.getContext("webgl2");
+if (!gl) document.body.textContent = "WebGL2 is not available.";
+function compile(type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+  return s;
+}
+const program = gl.createProgram();
+gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX));
+gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT));
+gl.linkProgram(program);
+gl.useProgram(program);
+const u = (n) => gl.getUniformLocation(program, n);
+let unit = 0;
+// An SVG decodes at its own, often icon, size: give it ${SVG_EDGE} px on its long edge (and a
+// viewBox, so the drawing scales) to keep it sharp.
+async function sizedSvg(url) {
+  const doc = new DOMParser().parseFromString(await (await fetch(url)).text(), "image/svg+xml");
+  const svg = doc.documentElement;
+  const len = (n) => { const m = (svg.getAttribute(n) || "").trim().match(/^([\\d.]+)(px)?$/); return m && +m[1] > 0 ? +m[1] : 0; };
+  const box = (svg.getAttribute("viewBox") || "").trim().split(/[\\s,]+/).map(Number);
+  const hasBox = box.length === 4 && box[2] > 0 && box[3] > 0;
+  const w = len("width") || (hasBox ? box[2] : 300), h = len("height") || (hasBox ? box[3] : 150);
+  const scale = ${SVG_EDGE} / Math.max(w, h);
+  if (!hasBox) svg.setAttribute("viewBox", "0 0 " + w + " " + h);
+  svg.setAttribute("width", Math.max(1, Math.round(w * scale)));
+  svg.setAttribute("height", Math.max(1, Math.round(h * scale)));
+  return URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(svg)], { type: "image/svg+xml" }));
+}
+function image(loc, url, texture) {
+  const i = unit++, t = gl.createTexture();
+  const bind = () => { gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, t); };
+  const filter = { mipmap: gl.LINEAR_MIPMAP_LINEAR, linear: gl.LINEAR, nearest: gl.NEAREST }[texture.filter];
+  const wrap = { repeat: gl.REPEAT, clamp: gl.CLAMP_TO_EDGE, mirror: gl.MIRRORED_REPEAT }[texture.wrap];
+  bind();
+  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, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.filter === "nearest" ? gl.NEAREST : gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
+  gl.uniform1i(loc, i);
+  if (!url) return;
+  const img = new Image();
+  if (!/^(data|blob):/i.test(url)) img.crossOrigin = "anonymous";
+  img.onload = () => {
+    bind();
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+    gl.generateMipmap(gl.TEXTURE_2D);
+  };
+  if (/^data:image\\/svg\\+xml[;,]/i.test(url) || /^(?!data:)[^?#]*\\.svg([?#]|$)/i.test(url)) {
+    sizedSvg(url).then((src) => { img.src = src; }, () => {});
+  } else img.src = url;
+}
+for (const c of CONTROLS) {
+  const loc = u(c.name);
+  const v = c.value;
+  if (c.type === "float") gl.uniform1f(loc, v);
+  else if (c.type === "int" || c.type === "bool") gl.uniform1i(loc, Number(v));
+  else if (c.type === "sampler2D") image(loc, v, c.texture);
+  else gl["uniform" + v.length + "fv"](loc, v);
+}
+let mouse = [0, 0, 0, 0];
+const px = (e) => { const r = canvas.getBoundingClientRect(); return [(e.clientX - r.left) * canvas.width / r.width, (r.bottom - e.clientY) * canvas.height / r.height]; };
+canvas.addEventListener("pointerdown", (e) => { const [x, y] = px(e); mouse = [x, y, x, y]; });
+canvas.addEventListener("pointermove", (e) => { if (e.buttons && mouse[2] > 0) { const [x, y] = px(e); mouse = [x, y, mouse[2], mouse[3]]; } });
+addEventListener("pointerup", () => { if (mouse[2] > 0) mouse = [mouse[0], mouse[1], -mouse[2], -Math.abs(mouse[3])]; });
+let start = performance.now(), last = start, frame = 0;
+function draw(now) {
+  const dpr = Math.min(devicePixelRatio || 1, 2);
+  const w = Math.round(canvas.clientWidth * dpr), h = Math.round(canvas.clientHeight * dpr);
+  if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
+  gl.viewport(0, 0, w, h);
+  gl.uniform3f(u("iResolution"), w, h, 1);
+  gl.uniform1f(u("iTime"), (now - start) / 1000);
+  gl.uniform1f(u("iTimeDelta"), (now - last) / 1000);
+  gl.uniform1i(u("iFrame"), frame++);
+  gl.uniform4f(u("iMouse"), mouse[0], mouse[1], mouse[2], mouse[3]);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+  last = now;
+  requestAnimationFrame(draw);
+}
+requestAnimationFrame(draw);
+</script>
+</body>
+</html>
+`;
+}
+
+// src/shader/blend.ts
+var ALL_BLEND_MODES = [
+  "normal",
+  "dissolve",
+  "dancingDissolve",
+  "darken",
+  "multiply",
+  "colorBurn",
+  "classicColorBurn",
+  "linearBurn",
+  "darkerColor",
+  "add",
+  "lighten",
+  "screen",
+  "colorDodge",
+  "classicColorDodge",
+  "linearDodge",
+  "lighterColor",
+  "overlay",
+  "softLight",
+  "hardLight",
+  "linearLight",
+  "vividLight",
+  "pinLight",
+  "hardMix",
+  "difference",
+  "classicDifference",
+  "exclusion",
+  "subtract",
+  "divide",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+  "stencilAlpha",
+  "stencilLuma",
+  "silhouetteAlpha",
+  "silhouetteLuma",
+  "alphaAdd",
+  "luminescentPremul"
+];
+function lum(r, g, b) {
+  return 0.3 * r + 0.59 * g + 0.11 * b;
+}
+function sat(r, g, b) {
+  return Math.max(r, g, b) - Math.min(r, g, b);
+}
+function clipColor(r, g, b) {
+  const l = lum(r, g, b);
+  const n = Math.min(r, g, b);
+  const x = Math.max(r, g, b);
+  let cr = r;
+  let cg = g;
+  let cb = b;
+  if (n < 0) {
+    const denom = Math.max(1e-9, l - n);
+    cr = l + (cr - l) * l / denom;
+    cg = l + (cg - l) * l / denom;
+    cb = l + (cb - l) * l / denom;
+  }
+  if (x > 1) {
+    const denom = Math.max(1e-9, x - l);
+    cr = l + (cr - l) * (1 - l) / denom;
+    cg = l + (cg - l) * (1 - l) / denom;
+    cb = l + (cb - l) * (1 - l) / denom;
+  }
+  return [cr, cg, cb];
+}
+function setLum(r, g, b, l) {
+  const d = l - lum(r, g, b);
+  return clipColor(r + d, g + d, b + d);
+}
+function setSat(r, g, b, s) {
+  const mx = Math.max(r, g, b);
+  const mn = Math.min(r, g, b);
+  if (mx - mn <= 1e-9) return [0, 0, 0];
+  const f = (v) => (v - mn) * s / (mx - mn);
+  return [f(r), f(g), f(b)];
+}
+function burn(cb, cs) {
+  if (cb >= 1) return 1;
+  if (cs <= 0) return 0;
+  return 1 - Math.min(1, (1 - cb) / cs);
+}
+function dodge(cb, cs) {
+  if (cb <= 0) return 0;
+  if (cs >= 1) return 1;
+  return Math.min(1, cb / (1 - cs));
+}
+function hardLight(cb, cs) {
+  if (cs <= 0.5) {
+    return cb * 2 * cs;
+  }
+  const s = 2 * cs - 1;
+  return cb + s - cb * s;
+}
+function softLight(cb, cs) {
+  if (cs <= 0.5) {
+    return cb - (1 - 2 * cs) * cb * (1 - cb);
+  }
+  const d = cb <= 0.25 ? ((16 * cb - 12) * cb + 4) * cb : Math.sqrt(Math.max(0, cb));
+  return cb + (2 * cs - 1) * (d - cb);
+}
+function vividLight(cb, cs) {
+  return cs <= 0.5 ? burn(cb, 2 * cs) : dodge(cb, 2 * (cs - 0.5));
+}
+function separableBlend(mode, cb, cs) {
+  switch (mode) {
+    case "darken":
+      return Math.min(cb, cs);
+    case "multiply":
+      return cb * cs;
+    case "colorBurn":
+      return burn(cb, cs);
+    case "classicColorBurn":
+      return cs <= 0 ? 0 : 1 - (1 - cb) / cs;
+    case "linearBurn":
+      return Math.max(0, cb + cs - 1);
+    case "add":
+    case "linearDodge":
+      return cb + cs;
+    case "lighten":
+      return Math.max(cb, cs);
+    case "screen":
+      return cb + cs - cb * cs;
+    case "colorDodge":
+      return dodge(cb, cs);
+    case "classicColorDodge":
+      return cs >= 1 ? 1 : Math.min(1, cb / (1 - cs));
+    case "overlay":
+      return hardLight(cs, cb);
+    case "softLight":
+      return softLight(cb, cs);
+    case "hardLight":
+      return hardLight(cb, cs);
+    case "linearLight":
+      return Math.min(1, Math.max(0, cb + 2 * cs - 1));
+    case "vividLight":
+      return vividLight(cb, cs);
+    case "pinLight":
+      return cs <= 0.5 ? Math.min(cb, 2 * cs) : Math.max(cb, 2 * cs - 1);
+    case "hardMix":
+      return cb + cs >= 1 ? 1 : 0;
+    case "difference":
+    case "classicDifference":
+      return Math.abs(cb - cs);
+    case "exclusion":
+      return cb + cs - 2 * cb * cs;
+    case "subtract":
+      return Math.max(0, cb - cs);
+    case "divide":
+      return cs <= 0 ? cb > 0 ? 1 : 0 : cb / cs;
+    default:
+      return cs;
+  }
+}
+function blendRgba(mode, dst, src, noise = 0) {
+  const sa = src[3];
+  const da = dst[3];
+  switch (mode) {
+    case "normal": {
+      const k = 1 - sa;
+      return [src[0] + dst[0] * k, src[1] + dst[1] * k, src[2] + dst[2] * k, sa + da * k];
+    }
+    case "dissolve":
+    case "dancingDissolve": {
+      if (sa <= 0 || noise >= sa) return [...dst];
+      const inv = 1 / sa;
+      return [src[0] * inv, src[1] * inv, src[2] * inv, 1];
+    }
+    case "stencilAlpha":
+      return [dst[0] * sa, dst[1] * sa, dst[2] * sa, dst[3] * sa];
+    case "silhouetteAlpha": {
+      const k = 1 - sa;
+      return [dst[0] * k, dst[1] * k, dst[2] * k, dst[3] * k];
+    }
+    case "stencilLuma":
+    case "silhouetteLuma": {
+      const l = lum(src[0], src[1], src[2]);
+      const k = mode === "stencilLuma" ? l : 1 - l;
+      return [dst[0] * k, dst[1] * k, dst[2] * k, dst[3] * k];
+    }
+    case "alphaAdd": {
+      const k = 1 - sa;
+      return [src[0] + dst[0] * k, src[1] + dst[1] * k, src[2] + dst[2] * k, Math.min(1, sa + da)];
+    }
+    case "luminescentPremul": {
+      const k = 1 - sa;
+      return [src[0] + dst[0] * k, src[1] + dst[1] * k, src[2] + dst[2] * k, sa + da - sa * da];
+    }
+  }
+  if (sa <= 0) return [...dst];
+  if (da <= 0) return [...src];
+  const cs = [src[0] / sa, src[1] / sa, src[2] / sa];
+  const cb = [dst[0] / da, dst[1] / da, dst[2] / da];
+  let b;
+  switch (mode) {
+    case "hue":
+      b = setLum(...setSat(cs[0], cs[1], cs[2], sat(...cb)), lum(...cb));
+      break;
+    case "saturation":
+      b = setLum(...setSat(cb[0], cb[1], cb[2], sat(...cs)), lum(...cb));
+      break;
+    case "color":
+      b = setLum(cs[0], cs[1], cs[2], lum(...cb));
+      break;
+    case "luminosity":
+      b = setLum(cb[0], cb[1], cb[2], lum(...cs));
+      break;
+    case "darkerColor":
+      b = lum(...cs) < lum(...cb) ? cs : cb;
+      break;
+    case "lighterColor":
+      b = lum(...cs) > lum(...cb) ? cs : cb;
+      break;
+    default:
+      b = [
+        separableBlend(mode, cb[0], cs[0]),
+        separableBlend(mode, cb[1], cs[1]),
+        separableBlend(mode, cb[2], cs[2])
+      ];
+      break;
+  }
+  const ao = sa + da - sa * da;
+  return [
+    (1 - da) * src[0] + (1 - sa) * dst[0] + sa * da * b[0],
+    (1 - da) * src[1] + (1 - sa) * dst[1] + sa * da * b[1],
+    (1 - da) * src[2] + (1 - sa) * dst[2] + sa * da * b[2],
+    ao
+  ];
+}
+function getGlslBlendFunction(mode) {
+  switch (mode) {
+    case "multiply":
+      return `vec4 blend(vec4 dst, vec4 src) {
+  return vec4(src.rgb * dst.rgb * src.a + dst.rgb * (1.0 - src.a), src.a + dst.a * (1.0 - src.a));
+}`;
+    case "screen":
+      return `vec4 blend(vec4 dst, vec4 src) {
+  vec3 res = src.rgb + dst.rgb - src.rgb * dst.rgb;
+  return vec4(mix(dst.rgb, res, src.a), src.a + dst.a * (1.0 - src.a));
+}`;
+    case "add":
+    case "linearDodge":
+      return `vec4 blend(vec4 dst, vec4 src) {
+  return vec4(min(vec3(1.0), dst.rgb + src.rgb * src.a), min(1.0, dst.a + src.a));
+}`;
+    case "overlay":
+      return `vec4 blend(vec4 dst, vec4 src) {
+  vec3 res = mix(2.0 * dst.rgb * src.rgb, 1.0 - 2.0 * (1.0 - dst.rgb) * (1.0 - src.rgb), step(vec3(0.5), dst.rgb));
+  return vec4(mix(dst.rgb, res, src.a), src.a + dst.a * (1.0 - src.a));
+}`;
+    case "difference":
+      return `vec4 blend(vec4 dst, vec4 src) {
+  return vec4(mix(dst.rgb, abs(dst.rgb - src.rgb), src.a), src.a + dst.a * (1.0 - src.a));
+}`;
+    case "normal":
+    default:
+      return `vec4 blend(vec4 dst, vec4 src) {
+  return src + dst * (1.0 - src.a);
+}`;
+  }
+}
+
+// src/time/noise.ts
+var GOLDEN_GAMMA = 0x9e3779b97f4a7c15n;
+var MULT1 = 0xbf58476d1ce4e5b9n;
+var MULT2 = 0x94d049bb133111ebn;
+var MASK64 = 0xffffffffffffffffn;
+var BASE_MIX = 0x2545f4914f6cdd1dn;
+var POW2_53 = 9007199254740992;
+function hash64(x) {
+  let v = x + GOLDEN_GAMMA & MASK64;
+  v = (v ^ v >> 30n) * MULT1 & MASK64;
+  v = (v ^ v >> 27n) * MULT2 & MASK64;
+  return (v ^ v >> 31n) & MASK64;
+}
+function mixSeeds(parts) {
+  let h = BASE_MIX;
+  for (const p of parts) {
+    const val = typeof p === "bigint" ? p : BigInt(Math.floor(p));
+    h = hash64(h ^ hash64(val & MASK64));
+  }
+  return h;
+}
+function unitFloat(seed) {
+  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
+  const hashed = hash64(s);
+  const shifted = Number(hashed >> 11n);
+  return shifted / POW2_53;
+}
+function quinticFade(t) {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+function lattice(seed, i) {
+  const mixed = seed ^ hash64(i & MASK64);
+  return unitFloat(mixed) * 2 - 1;
+}
+function noise1d(seed, x) {
+  if (!Number.isFinite(x)) return 0;
+  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
+  const floorX = Math.floor(x);
+  const u = quinticFade(x - floorX);
+  const i = BigInt(Math.floor(floorX));
+  const a = lattice(s, i);
+  const b = lattice(s, i + 1n);
+  return a + (b - a) * u;
+}
+function noise3d(x, y, z, seed = 0) {
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
+    return 0;
+  }
+  const s = typeof seed === "bigint" ? seed : BigInt(Math.floor(seed));
+  const fx = Math.floor(x);
+  const fy = Math.floor(y);
+  const fz = Math.floor(z);
+  const u = quinticFade(x - fx);
+  const v = quinticFade(y - fy);
+  const w = quinticFade(z - fz);
+  const ix = BigInt(fx);
+  const iy = BigInt(fy);
+  const iz = BigInt(fz);
+  const g = (dx, dy, dz) => {
+    const combined = mixSeeds([s, ix + dx, iy + dy, iz + dz]);
+    return unitFloat(combined) * 2 - 1;
+  };
+  const lerp = (a, b, t) => a + (b - a) * t;
+  const x00 = lerp(g(0n, 0n, 0n), g(1n, 0n, 0n), u);
+  const x10 = lerp(g(0n, 1n, 0n), g(1n, 1n, 0n), u);
+  const x01 = lerp(g(0n, 0n, 1n), g(1n, 0n, 1n), u);
+  const x11 = lerp(g(0n, 1n, 1n), g(1n, 1n, 1n), u);
+  const y0 = lerp(x00, x10, v);
+  const y1 = lerp(x01, x11, v);
+  return lerp(y0, y1, w);
+}
+function fractalWiggle(freq, amp, octaves = 3, ampMult = 0.5, t = 0, seed = 42, dimension = 0) {
+  const oct = Math.max(1, Math.min(16, Math.floor(octaves)));
+  let currentAmp = amp;
+  let currentFreq = freq;
+  let sum = 0;
+  const baseSeed = BigInt(seed);
+  for (let k = 0; k < oct; k++) {
+    const s = mixSeeds([baseSeed, BigInt(dimension), BigInt(k)]);
+    const phaseOffset = unitFloat(s) * 1e3;
+    sum += currentAmp * noise1d(s, currentFreq * t + phaseOffset);
+    currentAmp *= ampMult;
+    currentFreq *= 2;
+  }
+  return sum;
+}
+
+// src/scene/effects.ts
+var EFFECT_TYPES = [
+  "gradient",
+  "flow",
+  "glow",
+  "spotlight",
+  "shimmer",
+  "ripple",
+  "timer",
+  "counter",
+  "highlight",
+  "blur",
+  "burst",
+  "media"
+];
+var EFFECT_FADE_MS = 300;
+function effectGone(running, now) {
+  if (running.until !== void 0) {
+    return now >= running.until + EFFECT_FADE_MS;
+  }
+  if (running.effect.duration !== void 0) {
+    return now >= running.from + running.effect.duration + EFFECT_FADE_MS;
+  }
+  return false;
+}
+function effectOpacity(running, now) {
+  if (now < running.from) return 0;
+  const inFade = Math.min(1, (now - running.from) / 150);
+  if (running.until !== void 0) {
+    const out = Math.max(0, 1 - (now - running.until) / EFFECT_FADE_MS);
+    return inFade * out;
+  }
+  if (running.effect.duration !== void 0) {
+    const remaining = running.from + running.effect.duration - now;
+    if (remaining < 0) {
+      const out = Math.max(0, 1 + remaining / EFFECT_FADE_MS);
+      return inFade * out;
+    }
+  }
+  return inFade;
+}
+
+// src/scene/check.ts
+var NO_CHECK = { framing: [], overlaps: [], edges: [], underTitle: [] };
+var SMALL_TEXT_PX = 24;
+function titleBox(title, stage) {
+  const width = Math.min(stage.width, title.length * 20 + 64);
+  return { x: (stage.width - width) / 2, y: 24, width, height: 60 };
+}
+function touchedIds(shot) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const cmd of shot.run ?? []) {
+    if (isElementCommand(cmd)) {
+      ids.add(cmd.element.id);
+    } else if ("id" in cmd && typeof cmd.id === "string") {
+      ids.add(cmd.id);
+    }
+  }
+  return [...ids];
+}
+var IN_FRAME = 0.95;
+function checkShot(shot, elements, view, stage, title) {
+  const frameRect = visibleRect(view, stage);
+  const touched = new Set(touchedIds(shot));
+  const framing = [];
+  const edges = [];
+  const overlaps = [];
+  const activeElements = elements.filter((e) => !e.isDeleted && (e.opacity === void 0 || e.opacity > 0));
+  for (const el of activeElements) {
+    const box = boundsOf(el);
+    const overlap = overlapArea(box, frameRect);
+    const boxArea = areaOf(box);
+    if (touched.has(el.id)) {
+      if (overlap === 0) {
+        framing.push({ id: el.id, how: "outside" });
+      } else if (boxArea > 0 && overlap / boxArea < IN_FRAME) {
+        framing.push({ id: el.id, how: "cut" });
+      }
+    } else if (overlap > 0 && boxArea > 0 && overlap / boxArea < IN_FRAME) {
+      edges.push(el.id);
+    }
+  }
+  const touchedList = activeElements.filter((e) => touched.has(e.id));
+  for (let i = 0; i < touchedList.length; i++) {
+    for (let j = i + 1; j < touchedList.length; j++) {
+      const a = touchedList[i];
+      const b = touchedList[j];
+      const aBox = boundsOf(a);
+      const bBox = boundsOf(b);
+      const ol = overlapArea(aBox, bBox);
+      const minArea = Math.min(areaOf(aBox), areaOf(bBox));
+      if (minArea > 0 && ol / minArea > 0.3) {
+        overlaps.push([a.id, b.id]);
+      }
+    }
+  }
+  const smallTexts = [];
+  let smallestText;
+  for (const el of activeElements) {
+    if (el.text && el.fontSize) {
+      const px = Math.round(el.fontSize * view.zoom);
+      const item = { id: el.id, text: el.text, px };
+      if (!smallestText || px < smallestText.px) {
+        smallestText = item;
+      }
+      if (px < SMALL_TEXT_PX) {
+        smallTexts.push(item);
+      }
+    }
+  }
+  const underTitle = [];
+  if (title) {
+    const tBox = titleBox(title, stage);
+    const sceneTBox = {
+      x: tBox.x / view.zoom - view.scrollX,
+      y: tBox.y / view.zoom - view.scrollY,
+      width: tBox.width / view.zoom,
+      height: tBox.height / view.zoom
+    };
+    for (const el of activeElements) {
+      if (overlapArea(boundsOf(el), sceneTBox) > 0) {
+        underTitle.push(el.id);
+      }
+    }
+  }
+  return {
+    framing,
+    overlaps,
+    smallestText,
+    smallTexts: smallTexts.length ? smallTexts : void 0,
+    edges,
+    underTitle
+  };
+}
+
+// src/scene/validate.ts
+var LONG_CAPTION = 120;
+var LONG_TITLE = 60;
+var MAX_EFFECTS_PER_SHOT = 5;
+function validateScene(scene) {
+  const issues = [];
+  const say = (shot, message) => issues.push({ shot, message });
+  if (!scene.name || typeof scene.name !== "string") {
+    say(0, "Scene needs a string name.");
+  } else if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(scene.name)) {
+    say(0, `Scene name "${scene.name}" should be lowercase words and dashes.`);
+  }
+  if (!Array.isArray(scene.shots) || scene.shots.length === 0) {
+    say(0, "Scene needs at least one shot.");
+    return issues;
+  }
+  const mediaKeys = new Set(Object.keys(scene.media ?? {}));
+  const effectIds = /* @__PURE__ */ new Set();
+  if (scene.media) {
+    for (const [id, m] of Object.entries(scene.media)) {
+      if (!m || typeof m !== "object") {
+        say(0, `Media "${id}" must be an object.`);
+      } else if (!m.type) {
+        say(0, `Media "${id}" needs a type.`);
+      } else if (m.type === "shader" && !m.source) {
+        say(0, `Shader media "${id}" needs a source string.`);
+      }
+    }
+  }
+  for (const [idx, shot] of scene.shots.entries()) {
+    const shotNum = idx + 1;
+    if (shot.camera) {
+      if ("frame" in shot.camera) {
+        if (!Array.isArray(shot.camera.frame) || shot.camera.frame.length === 0) {
+          say(shotNum, "Dynamic camera framing requires a non-empty frame array of element IDs.");
+        }
+      } else if (shot.camera.width <= 0 || shot.camera.height <= 0) {
+        say(shotNum, "Camera rectangle width and height must be positive.");
+      }
+    }
+    if (shot.hold !== void 0 && shot.hold < 0) {
+      say(shotNum, "Shot hold cannot be negative.");
+    }
+    if (shot.caption && shot.caption.length > LONG_CAPTION) {
+      say(shotNum, `Caption is long (${shot.caption.length} chars); consider breaking into multiple shots.`);
+    }
+    if (shot.title && shot.title.length > LONG_TITLE) {
+      say(shotNum, `Title is long (${shot.title.length} chars); titles should be concise headings.`);
+    }
+    const effects = shot.effects ?? [];
+    if (effects.length > MAX_EFFECTS_PER_SHOT) {
+      say(shotNum, `Shot starts ${effects.length} effects at once; consider keeping effects focused.`);
+    }
+    for (const eff of effects) {
+      if (!eff.id || typeof eff.id !== "string") {
+        say(shotNum, "Every effect needs a unique string id.");
+        continue;
+      }
+      if (effectIds.has(eff.id)) {
+        say(shotNum, `Duplicate effect id "${eff.id}".`);
+      }
+      effectIds.add(eff.id);
+      if (!EFFECT_TYPES.includes(eff.type)) {
+        say(shotNum, `Unknown effect type "${eff.type}".`);
+      }
+      if (eff.type === "media") {
+        if (!eff.media) {
+          say(shotNum, `Media effect "${eff.id}" needs a media id.`);
+        } else if (!mediaKeys.has(eff.media)) {
+          say(shotNum, `Media effect "${eff.id}" references "${eff.media}" which is not defined in scene.media.`);
+        }
+      }
+      if (eff.type === "flow" && !eff.along) {
+        say(shotNum, `Flow effect "${eff.id}" needs an "along" element id.`);
+      }
+      if (["glow", "ripple", "spotlight", "shimmer", "timer", "blur", "burst"].includes(eff.type)) {
+        const withIds = eff;
+        if (!Array.isArray(withIds.ids) || withIds.ids.length === 0) {
+          say(shotNum, `${eff.type} effect "${eff.id}" needs a non-empty ids array.`);
+        }
+      }
+    }
+  }
+  return issues;
+}
+
+// src/scene/report.ts
+function reviewScene(scene, logs, options = {}) {
+  const warnings = [];
+  const notes = [];
+  const minTextPx = options.minTextPx ?? 18;
+  const totalMs = logs.length > 0 ? logs[logs.length - 1].end : 0;
+  const totalSec = (totalMs / 1e3).toFixed(1);
+  if (scene.target) {
+    const [minS, maxS] = scene.target;
+    const durS = totalMs / 1e3;
+    if (durS < minS) {
+      warnings.push(`Scene is ${totalSec}s, shorter than target minimum (${minS}s).`);
+    } else if (durS > maxS) {
+      warnings.push(`Scene is ${totalSec}s, longer than target maximum (${maxS}s).`);
+    }
+  }
+  for (const log of logs) {
+    const shotPrefix = `Shot ${log.index}:`;
+    if (log.failed.length > 0) {
+      warnings.push(`${shotPrefix} ${log.failed.length} command(s) failed: ${log.failed.join(", ")}`);
+    }
+    for (const f of log.framing) {
+      warnings.push(`${shotPrefix} element "${f.id}" is ${f.how} of the camera frame.`);
+    }
+    for (const [a, b] of log.overlaps) {
+      notes.push(`${shotPrefix} elements "${a}" and "${b}" overlap significantly.`);
+    }
+    if (log.smallTexts) {
+      for (const t of log.smallTexts) {
+        if (t.px < minTextPx) {
+          warnings.push(`${shotPrefix} text "${t.text}" is only ${t.px}px on screen (less than ${minTextPx}px minimum).`);
+        }
+      }
+    }
+    for (const id of log.underTitle) {
+      warnings.push(`${shotPrefix} element "${id}" is partially covered by the title bar.`);
+    }
+  }
+  const lines = [
+    `# Scene Preview Review: ${scene.title || scene.name}`,
+    `**Total Duration:** ${totalSec}s (${logs.length} shots)`,
+    ""
+  ];
+  if (warnings.length > 0) {
+    lines.push("### \u26A0\uFE0F Warnings to Address:");
+    for (const w of warnings) lines.push(`- ${w}`);
+    lines.push("");
+  } else {
+    lines.push("\u2705 No critical layout or framing warnings.");
+    lines.push("");
+  }
+  if (notes.length > 0) {
+    lines.push("### \u2139\uFE0F Layout Notes:");
+    for (const n of notes) lines.push(`- ${n}`);
+    lines.push("");
+  }
+  lines.push("### Shot Breakdown");
+  lines.push("| Shot | Start | End | Duration | Title / Caption |");
+  lines.push("|:---:|:---:|:---:|:---:|:---|");
+  for (const log of logs) {
+    const dur = ((log.end - log.start) / 1e3).toFixed(1);
+    const text = log.title || log.caption || "\u2014";
+    lines.push(`| ${log.index} | ${(log.start / 1e3).toFixed(1)}s | ${(log.end / 1e3).toFixed(1)}s | ${dur}s | ${text.slice(0, 40)} |`);
+  }
+  return {
+    totalMs,
+    warnings,
+    notes,
+    markdown: lines.join("\n")
+  };
+}
+
+// src/scene/behavior.ts
+function evaluateWriggle(t, freq, amount, octaves = 3, seed = 42) {
+  return fractalWiggle(freq, amount, octaves, 0.5, t, seed, 0);
+}
+function evaluateBehavior(behavior, elapsedSec, durationSec, baseValue = 0) {
+  const t = Math.max(0, elapsedSec);
+  switch (behavior.type) {
+    case "oscillate": {
+      const freq = behavior.frequency;
+      const phase = behavior.phase ?? 0;
+      const angle = 2 * Math.PI * freq * t + phase;
+      let waveVal = 0;
+      switch (behavior.wave) {
+        case "square":
+          waveVal = Math.sin(angle) >= 0 ? 1 : -1;
+          break;
+        case "triangle":
+          waveVal = 2 / Math.PI * Math.asin(Math.sin(angle));
+          break;
+        case "sawtooth": {
+          const norm = angle / (2 * Math.PI) % 1;
+          waveVal = 2 * (norm < 0 ? norm + 1 : norm) - 1;
+          break;
+        }
+        case "sine":
+        default:
+          waveVal = Math.sin(angle);
+          break;
+      }
+      const offset = waveVal * behavior.amplitude;
+      return behavior.center !== void 0 ? behavior.center + offset : baseValue + offset;
+    }
+    case "ramp": {
+      const from = behavior.from ?? baseValue;
+      const to = behavior.to;
+      const p = durationSec > 0 ? Math.min(1, Math.max(0, t / durationSec)) : 1;
+      let eased = p;
+      switch (behavior.ease) {
+        case "easeIn":
+          eased = p * p;
+          break;
+        case "easeOut":
+          eased = p * (2 - p);
+          break;
+        case "easeInOut":
+          eased = p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p;
+          break;
+        case "linear":
+        default:
+          eased = p;
+          break;
+      }
+      return from + (to - from) * eased;
+    }
+    case "rate": {
+      return baseValue + behavior.rate * t;
+    }
+    case "wriggle": {
+      const wander = evaluateWriggle(
+        t,
+        behavior.frequency,
+        behavior.amount,
+        behavior.octaves ?? 3,
+        behavior.seed ?? 42
+      );
+      return baseValue + wander;
+    }
+    case "overshoot": {
+      const from = behavior.startValue ?? baseValue;
+      const target = behavior.targetValue;
+      const cycles = behavior.cycles ?? 3;
+      const damping = behavior.damping ?? 4;
+      if (durationSec <= 0) return target;
+      const p = Math.min(1, t / durationSec);
+      if (p >= 1) return target;
+      const envelope = Math.exp(-damping * p);
+      const oscillation = Math.cos(cycles * Math.PI * p);
+      const progress = 1 - envelope * oscillation;
+      return from + (target - from) * progress;
+    }
+    case "throw": {
+      const v0 = behavior.initialVelocity;
+      const k = Math.max(1e-3, behavior.friction ?? 2);
+      const displacement = v0 / k * (1 - Math.exp(-k * t));
+      return baseValue + displacement;
+    }
+  }
+}
+
+// src/scene/player.ts
+var MemorySceneBoard = class {
+  view;
+  elMap = /* @__PURE__ */ new Map();
+  currentTitle = "";
+  currentCaption = "";
+  runningEffects = [];
+  constructor(stage = DEFAULT_STAGE) {
+    this.view = viewAt(stage.width / 2, stage.height / 2, 1, stage);
+  }
+  getView() {
+    return this.view;
+  }
+  setView(view) {
+    this.view = view;
+  }
+  elements() {
+    return Array.from(this.elMap.values());
+  }
+  runCommand(cmd) {
+    if (isElementCommand(cmd)) {
+      this.elMap.set(cmd.element.id, { ...cmd.element });
+    } else if (isUpdateCommand(cmd)) {
+      const existing = this.elMap.get(cmd.id);
+      if (existing) {
+        this.elMap.set(cmd.id, { ...existing, ...cmd.props });
+      }
+    } else if (isDeleteCommand(cmd)) {
+      this.elMap.delete(cmd.id);
+    } else if (cmd.type === "clear") {
+      this.elMap.clear();
+    }
+  }
+  setTitle(text) {
+    this.currentTitle = text;
+  }
+  setCaption(text) {
+    this.currentCaption = text;
+  }
+  setEffects(effects) {
+    this.runningEffects = effects;
+  }
+};
+async function playScene(scene, board, clock, options = {}) {
+  const stage = {
+    width: scene.stage?.width ?? DEFAULT_STAGE.width,
+    height: scene.stage?.height ?? DEFAULT_STAGE.height,
+    caption: scene.stage?.caption ?? DEFAULT_STAGE.caption
+  };
+  const shots = [];
+  const begin = clock.now();
+  let runningEffects = [];
+  const endsAt = /* @__PURE__ */ new Map();
+  const updateEffects = (next) => {
+    runningEffects = next.filter((r) => !effectGone(r, clock.now()));
+    board.setEffects?.(runningEffects);
+  };
+  for (const [idx, shot] of scene.shots.entries()) {
+    const shotStart = clock.now() - begin;
+    const failedCmds = [];
+    const stopIds = new Set(shot.stopEffects ?? []);
+    if (stopIds.size > 0 || runningEffects.some((r) => endsAt.get(r) === idx)) {
+      const now = clock.now();
+      updateEffects(
+        runningEffects.map(
+          (r) => r.until === void 0 && (stopIds.has(r.effect.id) || endsAt.get(r) === idx) ? { ...r, until: now } : r
+        )
+      );
+    }
+    if (shot.camera) {
+      let targetRect;
+      if ("frame" in shot.camera) {
+        const frameIds = new Set(shot.camera.frame);
+        const targetElements = board.elements().filter((el) => frameIds.has(el.id));
+        if (targetElements.length === 0 && shot.run) {
+          for (const cmd of shot.run) {
+            if (isElementCommand(cmd) && frameIds.has(cmd.element.id)) {
+              targetElements.push(cmd.element);
+            }
+          }
+        }
+        targetRect = calculateFramingRect(targetElements, stage, {
+          padding: shot.camera.padding,
+          minWidth: shot.camera.minWidth,
+          minHeight: shot.camera.minHeight
+        });
+      } else {
+        targetRect = shot.camera;
+      }
+      const targetView = frame(targetRect, stage);
+      if (idx === 0) {
+        board.setView(targetView);
+      } else {
+        const fromView = board.getView();
+        const steps = 15;
+        const stepMs = CAMERA_MS / steps;
+        for (let s = 1; s <= steps; s++) {
+          const t = easeInOutCubic(s / steps);
+          board.setView(between(fromView, targetView, t, stage));
+          await clock.sleep(stepMs);
+        }
+      }
+    }
+    if (shot.title !== void 0) {
+      board.setTitle?.(shot.title, 1);
+    }
+    if (shot.caption !== void 0) {
+      board.setCaption?.(shot.caption);
+    }
+    const startEffects = (shot.effects ?? []).filter((e) => e.at === "start");
+    if (startEffects.length > 0) {
+      const now = clock.now();
+      const added = startEffects.map((effect) => ({ effect, from: now }));
+      for (const r of added) if (r.effect.shots) endsAt.set(r, idx + r.effect.shots);
+      updateEffects([...runningEffects, ...added]);
+    }
+    for (const cmd of shot.run ?? []) {
+      try {
+        await board.runCommand(cmd);
+      } catch (err) {
+        failedCmds.push(err.message || String(err));
+      }
+    }
+    const drawnEffects = (shot.effects ?? []).filter((e) => e.at !== "start");
+    if (drawnEffects.length > 0) {
+      const now = clock.now();
+      const added = drawnEffects.map((effect) => ({ effect, from: now }));
+      for (const r of added) if (r.effect.shots) endsAt.set(r, idx + r.effect.shots);
+      updateEffects([...runningEffects, ...added]);
+    }
+    const drawnTime = clock.now() - begin;
+    const check = options.check ? checkShot(shot, board.elements(), board.getView(), stage, shot.title) : { framing: [], overlaps: [], edges: [], underTitle: [] };
+    const holdMs = shot.hold ?? 800;
+    const behaviors = shot.behaviors ?? [];
+    if (behaviors.length > 0) {
+      const initialProps = /* @__PURE__ */ new Map();
+      for (const b of behaviors) {
+        const key = `${b.target}:${b.property}`;
+        const el = board.elements().find((e) => e.id === b.target);
+        if (el && typeof el[b.property] === "number") {
+          initialProps.set(key, el[b.property]);
+        } else {
+          initialProps.set(key, 0);
+        }
+      }
+      const stepMs = 50;
+      const steps = Math.max(1, Math.round(holdMs / stepMs));
+      const actualStepMs = holdMs / steps;
+      const durationSec = holdMs / 1e3;
+      for (let s = 1; s <= steps; s++) {
+        await clock.sleep(actualStepMs);
+        const elapsedSec = s * actualStepMs / 1e3;
+        for (const b of behaviors) {
+          const baseVal = initialProps.get(`${b.target}:${b.property}`) ?? 0;
+          const nextVal = evaluateBehavior(b, elapsedSec, durationSec, baseVal);
+          board.runCommand({
+            type: "update",
+            id: b.target,
+            props: { [b.property]: nextVal }
+          });
+        }
+      }
+    } else {
+      await clock.sleep(holdMs);
+    }
+    const shotEnd = clock.now() - begin;
+    const log = {
+      ...check,
+      index: idx + 1,
+      start: shotStart,
+      drawn: drawnTime,
+      end: shotEnd,
+      caption: shot.caption,
+      title: shot.title,
+      failed: failedCmds,
+      effects: runningEffects.map((r) => r.effect.id)
+    };
+    shots.push(log);
+    if (options.afterShot) {
+      await options.afterShot(log);
+    }
+  }
+  const duration = clock.now() - begin;
+  const ok = shots.every((s) => s.failed.length === 0 && s.framing.every((f) => f.how !== "outside"));
+  return { ok, duration, shots };
+}
+async function simulateScene(scene, options = {}) {
+  const clock = new ManualClock();
+  const board = new MemorySceneBoard();
+  let done = false;
+  let playError = null;
+  const playPromise = playScene(scene, board, clock, { check: true }).then((res) => {
+    done = true;
+    return res;
+  }).catch((err) => {
+    done = true;
+    playError = err;
+    throw err;
+  });
+  for (let i = 0; i < 5e3 && !done; i++) {
+    await clock.advance(50);
+  }
+  if (playError) throw playError;
+  const result = await playPromise;
+  const review = reviewScene(scene, result.shots, {
+    target: scene.target,
+    minTextPx: options.minTextPx
+  });
+  return { result, review };
+}
+
+// src/scene/standalone.ts
+function standaloneSceneHtml(scene) {
+  const serializedScene = JSON.stringify(scene).replace(/</g, "\\u003c");
+  const title = scene.title || scene.name;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml2(title)} - Flair</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: #0f1117;
+      color: #e2e8f0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      user-select: none;
+    }
+    .player-container {
+      position: relative;
+      width: 100%;
+      max-width: 1200px;
+      aspect-ratio: 16 / 9;
+      background: #000;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
+      display: flex;
+      flex-direction: column;
+    }
+    .viewport {
+      position: relative;
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    canvas.layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .overlay-title {
+      position: absolute;
+      top: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 17, 23, 0.85);
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      padding: 8px 24px;
+      border-radius: 9999px;
+      font-size: 1.15rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: #fff;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+    .overlay-caption {
+      position: absolute;
+      bottom: 64px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 17, 23, 0.88);
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 1.1rem;
+      color: #f1f5f9;
+      max-width: 80%;
+      text-align: center;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+    .controls-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 52px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 12px;
+      z-index: 10;
+    }
+    .btn {
+      background: rgba(255, 255, 255, 0.15);
+      border: none;
+      color: #fff;
+      padding: 6px 14px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: rgba(255, 255, 255, 0.25); }
+    .timeline {
+      flex: 1;
+      height: 6px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 3px;
+      cursor: pointer;
+      position: relative;
+    }
+    .timeline-progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      background: #3b82f6;
+      border-radius: 3px;
+      width: 0%;
+    }
+    .shot-badge {
+      font-size: 0.85rem;
+      color: #94a3b8;
+      font-variant-numeric: tabular-nums;
+    }
+  </style>
+</head>
+<body>
+  <div class="player-container">
+    <div class="viewport" id="viewport">
+      <canvas id="shaderCanvas" class="layer"></canvas>
+      <canvas id="sceneCanvas" class="layer"></canvas>
+      <div id="titleEl" class="overlay-title"></div>
+      <div id="captionEl" class="overlay-caption"></div>
+    </div>
+    <div class="controls-bar">
+      <button id="playBtn" class="btn">Play</button>
+      <button id="prevBtn" class="btn">\u23EE</button>
+      <button id="nextBtn" class="btn">\u23ED</button>
+      <div id="timeline" class="timeline">
+        <div id="progress" class="timeline-progress"></div>
+      </div>
+      <div id="shotBadge" class="shot-badge">Shot 1 / 1</div>
+    </div>
+  </div>
+
+  <script>
+    const scene = ${serializedScene};
+    const sceneCanvas = document.getElementById('sceneCanvas');
+    const shaderCanvas = document.getElementById('shaderCanvas');
+    const ctx = sceneCanvas.getContext('2d');
+    const titleEl = document.getElementById('titleEl');
+    const captionEl = document.getElementById('captionEl');
+    const playBtn = document.getElementById('playBtn');
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const progressEl = document.getElementById('progress');
+    const shotBadge = document.getElementById('shotBadge');
+
+    let currentShotIdx = 0;
+    let isPlaying = false;
+    let shotStartTime = 0;
+    let gl = null;
+    let shaderProgram = null;
+
+    function resize() {
+      const rect = sceneCanvas.parentElement.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      sceneCanvas.width = rect.width * dpr;
+      sceneCanvas.height = rect.height * dpr;
+      shaderCanvas.width = rect.width * dpr;
+      shaderCanvas.height = rect.height * dpr;
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    // Setup WebGL if shader media is present
+    const firstShaderKey = Object.keys(scene.media || {}).find(k => scene.media[k].type === 'shader');
+    if (firstShaderKey && scene.media[firstShaderKey].source) {
+      try {
+        gl = shaderCanvas.getContext('webgl2');
+        if (gl) {
+          const vs = gl.createShader(gl.VERTEX_SHADER);
+          gl.shaderSource(vs, '#version 300 es\\nin vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); }');
+          gl.compileShader(vs);
+
+          const fs = gl.createShader(gl.FRAGMENT_SHADER);
+          const fullFrag = '#version 300 es\\nprecision highp float;\\nout vec4 fragColor;\\nuniform vec2 u_resolution;\\nuniform float u_time;\\n' + scene.media[firstShaderKey].source + '\\nvoid main() { mainImage(fragColor, gl_FragCoord.xy); }';
+          gl.shaderSource(fs, fullFrag);
+          gl.compileShader(fs);
+
+          shaderProgram = gl.createProgram();
+          gl.attachShader(shaderProgram, vs);
+          gl.attachShader(shaderProgram, fs);
+          gl.linkProgram(shaderProgram);
+
+          const quad = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
+          const pos = gl.getAttribLocation(shaderProgram, 'position');
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+        }
+      } catch (e) {
+        console.warn('Shader setup failed:', e);
+      }
+    }
+
+    function renderShader(timeSeconds) {
+      if (!gl || !shaderProgram) return;
+      gl.viewport(0, 0, shaderCanvas.width, shaderCanvas.height);
+      gl.useProgram(shaderProgram);
+      const resLoc = gl.getUniformLocation(shaderProgram, 'u_resolution');
+      const timeLoc = gl.getUniformLocation(shaderProgram, 'u_time');
+      if (resLoc) gl.uniform2f(resLoc, shaderCanvas.width, shaderCanvas.height);
+      if (timeLoc) gl.uniform1f(timeLoc, timeSeconds);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+
+    function updateShotUI() {
+      const shot = scene.shots[currentShotIdx];
+      if (!shot) return;
+
+      shotBadge.textContent = 'Shot ' + (currentShotIdx + 1) + ' / ' + scene.shots.length;
+
+      if (shot.title) {
+        titleEl.textContent = shot.title;
+        titleEl.style.opacity = '1';
+      } else {
+        titleEl.style.opacity = '0';
+      }
+
+      if (shot.caption) {
+        captionEl.textContent = shot.caption;
+        captionEl.style.opacity = '1';
+      } else {
+        captionEl.style.opacity = '0';
+      }
+
+      const pct = (currentShotIdx / scene.shots.length) * 100;
+      progressEl.style.width = pct + '%';
+    }
+
+    function draw() {
+      const now = performance.now() / 1000;
+      renderShader(now);
+
+      ctx.clearRect(0, 0, sceneCanvas.width, sceneCanvas.height);
+      ctx.save();
+      const shot = scene.shots[currentShotIdx];
+
+      // Draw shot elements
+      if (shot && shot.run) {
+        for (const cmd of shot.run) {
+          if (cmd.type === 'element' && cmd.element) {
+            const el = cmd.element;
+            ctx.fillStyle = el.backgroundColor || 'rgba(59, 130, 246, 0.4)';
+            ctx.strokeStyle = el.strokeColor || '#3b82f6';
+            ctx.lineWidth = 3;
+            ctx.strokeRect(el.x, el.y, el.width, el.height);
+            ctx.fillRect(el.x, el.y, el.width, el.height);
+
+            if (el.text) {
+              ctx.fillStyle = '#fff';
+              ctx.font = '24px sans-serif';
+              ctx.fillText(el.text, el.x + 16, el.y + 40);
+            }
+          }
+        }
+      }
+      ctx.restore();
+
+      if (isPlaying) {
+        requestAnimationFrame(draw);
+      }
+    }
+
+    playBtn.addEventListener('click', () => {
+      isPlaying = !isPlaying;
+      playBtn.textContent = isPlaying ? 'Pause' : 'Play';
+      if (isPlaying) requestAnimationFrame(draw);
+    });
+
+    prevBtn.addEventListener('click', () => {
+      if (currentShotIdx > 0) {
+        currentShotIdx--;
+        updateShotUI();
+        draw();
+      }
+    });
+
+    nextBtn.addEventListener('click', () => {
+      if (currentShotIdx < scene.shots.length - 1) {
+        currentShotIdx++;
+        updateShotUI();
+        draw();
+      }
+    });
+
+    updateShotUI();
+    draw();
+  </script>
+</body>
+</html>`;
+}
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+export {
+  ShaderRenderer,
+  ThumbnailPool,
+  sharedThumbnailPool,
+  registerThumbnail,
+  ShaderFrames,
+  recordGif,
+  standaloneHtml,
+  ALL_BLEND_MODES,
+  blendRgba,
+  getGlslBlendFunction,
+  hash64,
+  mixSeeds,
+  unitFloat,
+  quinticFade,
+  noise1d,
+  noise3d,
+  fractalWiggle,
+  EFFECT_TYPES,
+  EFFECT_FADE_MS,
+  effectGone,
+  effectOpacity,
+  NO_CHECK,
+  SMALL_TEXT_PX,
+  titleBox,
+  touchedIds,
+  checkShot,
+  validateScene,
+  reviewScene,
+  evaluateBehavior,
+  MemorySceneBoard,
+  playScene,
+  simulateScene,
+  standaloneSceneHtml
+};
+//# sourceMappingURL=chunk-JWZCPMFG.js.map