onda-engine 0.1.0

package/dist/player.js

@@ -0,0 +1,1749 @@
+import { renderFrame, registeredFonts } from 'onda-engine/react';
+import { forwardRef, useRef, useId, useState, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// ../player/src/canvas-renderer.ts
+function drawScene(ctx, scene) {
+  const { width, height } = scene.composition;
+  ctx.clearRect(0, 0, width, height);
+  ctx.save();
+  ctx.globalAlpha = 1;
+  drawNode(ctx, scene.root);
+  ctx.restore();
+}
+function drawNode(ctx, node) {
+  ctx.save();
+  const transform = node.transform;
+  if (transform?.translate) ctx.translate(transform.translate.x, transform.translate.y);
+  if (transform?.scale) ctx.scale(transform.scale.x, transform.scale.y);
+  if (typeof node.opacity === "number") ctx.globalAlpha *= node.opacity;
+  if (node.clip) {
+    geometryPath(ctx, node.clip);
+    ctx.clip();
+  }
+  const kind = node.kind;
+  switch (kind.type) {
+    case "group":
+      break;
+    case "shape":
+      drawShape(ctx, kind);
+      break;
+    case "text":
+      drawText(ctx, kind);
+      break;
+  }
+  for (const child of node.children ?? []) drawNode(ctx, child);
+  ctx.restore();
+}
+function geometryPath(ctx, geometry) {
+  ctx.beginPath();
+  switch (geometry.shape) {
+    case "rect": {
+      const { width, height } = geometry.size;
+      if (geometry.corner_radius) ctx.roundRect(0, 0, width, height, geometry.corner_radius);
+      else ctx.rect(0, 0, width, height);
+      break;
+    }
+    case "ellipse": {
+      const rx = geometry.size.width / 2;
+      const ry = geometry.size.height / 2;
+      ctx.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2);
+      break;
+    }
+    case "path":
+      ctx.beginPath();
+      tracePath(ctx, geometry.data);
+      break;
+  }
+}
+function tracePath(ctx, data) {
+  if (typeof Path2D === "undefined") return;
+  pendingPath = new Path2D(data);
+}
+var pendingPath = null;
+function drawShape(ctx, shape) {
+  pendingPath = null;
+  geometryPath(ctx, shape.geometry);
+  const paint = shape.gradient ? gradientStyle(ctx, shape.geometry, shape.gradient) : shape.fill ? cssColor(shape.fill) : null;
+  if (paint) {
+    ctx.fillStyle = paint;
+    if (pendingPath) ctx.fill(pendingPath);
+    else ctx.fill();
+  }
+  if (shape.stroke) {
+    ctx.strokeStyle = cssColor(shape.stroke.color);
+    ctx.lineWidth = shape.stroke.width;
+    if (pendingPath) ctx.stroke(pendingPath);
+    else ctx.stroke();
+  }
+  pendingPath = null;
+}
+function gradientStyle(ctx, geometry, gradient) {
+  let g;
+  if (gradient.gradient === "linear") {
+    g = ctx.createLinearGradient(gradient.start.x, gradient.start.y, gradient.end.x, gradient.end.y);
+  } else if (gradient.gradient === "radial") {
+    g = ctx.createRadialGradient(
+      gradient.center.x,
+      gradient.center.y,
+      0,
+      gradient.center.x,
+      gradient.center.y,
+      gradient.radius
+    );
+  } else {
+    const [w, h] = geometryExtent(geometry);
+    g = ctx.createLinearGradient(0, 0, w, h);
+  }
+  for (const stop of gradient.stops) {
+    g.addColorStop(Math.min(1, Math.max(0, stop.offset)), cssColor(stop.color));
+  }
+  return g;
+}
+function geometryExtent(geometry) {
+  if (geometry.shape === "rect" || geometry.shape === "ellipse") {
+    return [geometry.size.width, geometry.size.height];
+  }
+  return [256, 256];
+}
+function drawText(ctx, text) {
+  ctx.fillStyle = cssColor(text.color ?? { r: 1, g: 1, b: 1 });
+  ctx.textBaseline = "alphabetic";
+  const size = text.font_size ?? 48;
+  ctx.font = `${size}px sans-serif`;
+  ctx.fillText(text.content, 0, size * 0.8);
+}
+function cssColor(color) {
+  const to255 = (c) => Math.round(Math.min(1, Math.max(0, c)) * 255);
+  return `rgba(${to255(color.r)}, ${to255(color.g)}, ${to255(color.b)}, ${color.a ?? 1})`;
+}
+
+// ../player/src/engine-drawer.ts
+function engineDrawer(engine) {
+  return (ctx, scene) => {
+    const frame = engine.render(JSON.stringify(scene));
+    const buffer = frame.pixels instanceof Uint8ClampedArray ? frame.pixels : new Uint8ClampedArray(frame.pixels.buffer, frame.pixels.byteOffset, frame.pixels.length);
+    const image = new ImageData(buffer, frame.width, frame.height);
+    ctx.putImageData(image, 0, 0);
+  };
+}
+
+// ../player/src/audio-engine.ts
+var LOOKAHEAD = 2;
+var TOPUP_INTERVAL = 250;
+var GAIN_RAMP = 0.012;
+var PreviewAudio = class {
+  ctx = null;
+  master = null;
+  clips = [];
+  /** Decoded buffers keyed by src, reused across `setClips` so the editor's
+   *  frequent composition edits don't re-fetch/re-decode unchanged audio. */
+  bufferCache = /* @__PURE__ */ new Map();
+  /** Bumped on every `setClips` so a stale in-flight decode can't apply. */
+  clipsToken = 0;
+  period = 1;
+  // one timeline cycle, seconds (always > 0)
+  loop = false;
+  rate = 1;
+  volume = 1;
+  muted = false;
+  playing = false;
+  anchorCtx = 0;
+  // AudioContext time at `anchorComp`
+  anchorComp = 0;
+  // composition time (s) at the anchor
+  nextCycle = [];
+  // per clip: next loop cycle index to schedule
+  active = [];
+  timer = null;
+  // ── public API ──────────────────────────────────────────────────────────
+  /** Master volume × mute. Applied as a short ramp (click-free). */
+  setGain(volume, muted) {
+    this.volume = volume;
+    this.muted = muted;
+    this.applyMaster();
+  }
+  setLoop(loop) {
+    this.loop = loop;
+  }
+  /** Swap the clip set (composition changed) and the timeline period. Tears down
+   *  the current schedule, (re)decodes as needed, and reschedules if playing. */
+  setClips(clips, periodSeconds) {
+    this.period = Math.max(1e-3, periodSeconds);
+    this.stopActive();
+    const token = ++this.clipsToken;
+    this.clips = clips.map((clip) => ({ clip, buffer: null, gain: null, decoding: false }));
+    if (this.ctx) {
+      this.wireClipGains();
+      for (const cs of this.clips) this.ensureDecoded(cs, token);
+      if (this.playing) this.reanchor(this.currentComp());
+    }
+  }
+  setRate(rate) {
+    if (this.rate === rate) return;
+    const comp = this.playing ? this.currentComp() : this.anchorComp;
+    this.rate = rate;
+    if (this.playing) this.reanchor(comp);
+    else this.applyMaster();
+  }
+  /** Start (or restart) playback anchored at `compTime` (seconds). */
+  play(compTime) {
+    const ctx = this.ensureCtx();
+    void ctx.resume().catch(() => {
+    });
+    this.playing = true;
+    const token = this.clipsToken;
+    for (const cs of this.clips) this.ensureDecoded(cs, token);
+    this.reanchor(compTime);
+    this.startTimer();
+  }
+  pause() {
+    this.playing = false;
+    this.stopActive();
+    this.stopTimer();
+  }
+  /** Re-anchor to a new playhead. While playing this restarts the schedule from
+   *  `compTime`; while paused it just records the position for the next play. */
+  seek(compTime) {
+    if (this.playing) this.reanchor(compTime);
+    else this.anchorComp = compTime;
+  }
+  dispose() {
+    this.stopActive();
+    this.stopTimer();
+    this.clips = [];
+    this.bufferCache.clear();
+    if (this.ctx) {
+      void this.ctx.close().catch(() => {
+      });
+      this.ctx = null;
+      this.master = null;
+    }
+  }
+  // ── internals ───────────────────────────────────────────────────────────
+  ensureCtx() {
+    if (!this.ctx) {
+      const Ctor = window.AudioContext ?? window.webkitAudioContext;
+      this.ctx = new Ctor();
+      this.master = this.ctx.createGain();
+      this.master.connect(this.ctx.destination);
+      this.applyMaster();
+      this.wireClipGains();
+    }
+    return this.ctx;
+  }
+  /** Give every clip a per-clip gain (its own volume) feeding the master. */
+  wireClipGains() {
+    if (!this.ctx || !this.master) return;
+    for (const cs of this.clips) {
+      if (!cs.gain) {
+        const g = this.ctx.createGain();
+        g.gain.value = Math.max(0, Math.min(1, cs.clip.volume));
+        g.connect(this.master);
+        cs.gain = g;
+      }
+    }
+  }
+  ensureDecoded(cs, token) {
+    if (cs.buffer || cs.decoding || !this.ctx) return;
+    const cached = this.bufferCache.get(cs.clip.src);
+    if (cached) {
+      cs.buffer = cached;
+      return;
+    }
+    cs.decoding = true;
+    const ctx = this.ctx;
+    void (async () => {
+      try {
+        const res = await fetch(cs.clip.src);
+        const bytes = await res.arrayBuffer();
+        const decoded = await ctx.decodeAudioData(bytes);
+        if (token !== this.clipsToken) return;
+        this.bufferCache.set(cs.clip.src, decoded);
+        cs.buffer = decoded;
+        cs.decoding = false;
+        if (this.playing) this.scheduleAhead();
+      } catch (err) {
+        cs.decoding = false;
+        console.warn("[onda] preview audio decode failed:", cs.clip.src, err);
+      }
+    })();
+  }
+  /** Composition time (s) currently under the playhead, derived from the anchor. */
+  currentComp() {
+    if (!this.ctx) return this.anchorComp;
+    return this.anchorComp + (this.ctx.currentTime - this.anchorCtx) * this.rate;
+  }
+  compToCtx(compTime) {
+    return this.anchorCtx + (compTime - this.anchorComp) / this.rate;
+  }
+  reanchor(compTime) {
+    this.stopActive();
+    const ctx = this.ensureCtx();
+    this.anchorCtx = ctx.currentTime;
+    this.anchorComp = compTime;
+    const startCycle = this.loop ? Math.floor(compTime / this.period) : 0;
+    this.nextCycle = this.clips.map(() => startCycle);
+    this.applyMaster();
+    this.scheduleAhead();
+  }
+  /** Queue every clip instance whose start falls within the look-ahead window.
+   *  Idempotent + incremental: `nextCycle[i]` tracks how far each clip is queued,
+   *  so repeated calls only add the newly-reachable cycles. */
+  scheduleAhead() {
+    if (!this.playing || !this.ctx || this.rate !== 1) return;
+    const ctx = this.ctx;
+    const horizon = ctx.currentTime + LOOKAHEAD;
+    for (let i = 0; i < this.clips.length; i++) {
+      const cs = this.clips[i];
+      if (!cs || !cs.buffer || !cs.gain) continue;
+      const bufDur = cs.buffer.duration;
+      for (let guard = 0; guard < 512; guard++) {
+        const k = this.nextCycle[i] ?? 0;
+        const compClipStart = k * this.period + cs.clip.start;
+        let ctxStart = this.compToCtx(compClipStart);
+        if (ctxStart >= horizon) break;
+        let offset = cs.clip.startAt;
+        let dur = Math.min(bufDur - offset, this.period - cs.clip.start);
+        if (ctxStart < ctx.currentTime) {
+          const late = (ctx.currentTime - ctxStart) * this.rate;
+          offset += late;
+          dur -= late;
+          ctxStart = ctx.currentTime;
+        }
+        if (dur > 5e-3 && offset < bufDur) {
+          const src = ctx.createBufferSource();
+          src.buffer = cs.buffer;
+          src.connect(cs.gain);
+          src.onended = () => {
+            const idx = this.active.indexOf(src);
+            if (idx >= 0) this.active.splice(idx, 1);
+            try {
+              src.disconnect();
+            } catch {
+            }
+          };
+          try {
+            src.start(ctxStart, offset, dur);
+            this.active.push(src);
+          } catch {
+          }
+        }
+        this.nextCycle[i] = k + 1;
+        if (!this.loop) break;
+      }
+    }
+  }
+  applyMaster() {
+    if (!this.master || !this.ctx) return;
+    const target = this.muted || this.rate !== 1 ? 0 : Math.max(0, Math.min(1, this.volume));
+    this.master.gain.setTargetAtTime(target, this.ctx.currentTime, GAIN_RAMP);
+  }
+  stopActive() {
+    for (const src of this.active) {
+      src.onended = null;
+      try {
+        src.stop();
+      } catch {
+      }
+      try {
+        src.disconnect();
+      } catch {
+      }
+    }
+    this.active = [];
+  }
+  startTimer() {
+    if (this.timer != null) return;
+    this.timer = setInterval(() => this.scheduleAhead(), TOPUP_INTERVAL);
+  }
+  stopTimer() {
+    if (this.timer != null) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+};
+
+// ../player/src/audio.ts
+function collectAudioClips(root) {
+  const out = [];
+  const walk = (node) => {
+    if (!node) return;
+    const k = node.kind;
+    if (k?.type === "audio" && typeof k.src === "string" && k.src.length > 0) {
+      out.push({
+        src: k.src,
+        start: k.start ?? 0,
+        startAt: k.start_at ?? 0,
+        volume: k.volume ?? 1
+      });
+    }
+    for (const child of node.children ?? []) walk(child);
+  };
+  walk(root);
+  return out;
+}
+
+// ../player/src/images.ts
+var cache = /* @__PURE__ */ new Map();
+var inflight = /* @__PURE__ */ new Map();
+var failed = /* @__PURE__ */ new Set();
+function resolveImageUrl(url) {
+  if (cache.has(url) || failed.has(url) || typeof fetch === "undefined") return Promise.resolve();
+  const existing = inflight.get(url);
+  if (existing) return existing;
+  const p = (async () => {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) {
+        failed.add(url);
+        return;
+      }
+      const blob = await res.blob();
+      const dataUri = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+      });
+      cache.set(url, dataUri);
+    } catch {
+      failed.add(url);
+    } finally {
+      inflight.delete(url);
+    }
+  })();
+  inflight.set(url, p);
+  return p;
+}
+function imageResolved(url) {
+  return url.startsWith("data:") || url.startsWith("onda-noise:") || cache.has(url) || failed.has(url);
+}
+function collectImageUrls(node, out) {
+  if (!node) return;
+  const src = node.kind?.type === "image" ? node.kind.src : void 0;
+  if (typeof src === "string" && src.length > 0 && !src.startsWith("data:") && !src.startsWith("onda-noise:")) {
+    out.add(src);
+  }
+  for (const child of node.children ?? []) collectImageUrls(child, out);
+}
+function applyResolvedImages(node) {
+  if (!node) return;
+  if (node.kind?.type === "image" && typeof node.kind.src === "string") {
+    const dataUri = cache.get(node.kind.src);
+    if (dataUri) node.kind.src = dataUri;
+  }
+  for (const child of node.children ?? []) applyResolvedImages(child);
+}
+
+// ../player/src/video.ts
+var BUCKET_FPS = 30;
+var elements = /* @__PURE__ */ new Map();
+var frameCache = /* @__PURE__ */ new Map();
+var inflight2 = /* @__PURE__ */ new Map();
+var lastGood = /* @__PURE__ */ new Map();
+var seekChain = /* @__PURE__ */ new Map();
+var warned = /* @__PURE__ */ new Set();
+function warnUnresolved(src) {
+  if (warned.has(src) || typeof console === "undefined") return;
+  warned.add(src);
+  let crossOrigin = false;
+  try {
+    crossOrigin = typeof location !== "undefined" && new URL(src, location.href).origin !== location.origin;
+  } catch {
+  }
+  const reason = crossOrigin ? '  \u2022 Cross-origin: the browser only reads frames from a same-origin file or one served with CORS (Access-Control-Allow-Origin). Host it with CORS or copy it into your project. YouTube/Vimeo page links are not media files and never work. Or set previewFallback="element" to play it in preview without compositing.' : "  \u2022 The source failed to load (wrong path / not a video file?).";
+  console.warn(
+    `[onda] couldn't decode video for PREVIEW: ${src}
+${reason}
+  \u2022 This is a preview-only limit \u2014 \`onda export\` (ffmpeg) decodes any direct URL regardless of CORS.`
+  );
+}
+var scratch = null;
+function bucketKey(src, time) {
+  return `${src}@${Math.round(Math.max(0, time) * BUCKET_FPS)}`;
+}
+function getVideo(src) {
+  const existing = elements.get(src);
+  if (existing) return existing;
+  const p = new Promise((resolve, reject) => {
+    const v = document.createElement("video");
+    v.muted = true;
+    v.crossOrigin = "anonymous";
+    v.preload = "auto";
+    v.playsInline = true;
+    const cleanup = () => {
+      v.removeEventListener("loadeddata", onReady);
+      v.removeEventListener("error", onError);
+    };
+    const onReady = () => {
+      cleanup();
+      resolve(v);
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error(`video failed to load: ${src}`));
+    };
+    v.addEventListener("loadeddata", onReady);
+    v.addEventListener("error", onError);
+    v.src = src;
+    v.load();
+  });
+  elements.set(src, p);
+  return p;
+}
+function seek(v, t) {
+  return new Promise((resolve) => {
+    if (v.readyState >= 2 && Math.abs(v.currentTime - t) < 1 / (BUCKET_FPS * 2)) {
+      resolve();
+      return;
+    }
+    const onSeeked = () => {
+      v.removeEventListener("seeked", onSeeked);
+      resolve();
+    };
+    v.addEventListener("seeked", onSeeked);
+    try {
+      v.currentTime = t;
+    } catch {
+      v.removeEventListener("seeked", onSeeked);
+      resolve();
+    }
+  });
+}
+function decodeFrame(src, time) {
+  const key = bucketKey(src, time);
+  const cached = frameCache.get(key);
+  if (cached) return Promise.resolve(cached);
+  const pending = inflight2.get(key);
+  if (pending) return pending;
+  const prior = seekChain.get(src) ?? Promise.resolve();
+  const p = prior.then(async () => {
+    const again = frameCache.get(key);
+    if (again) return again;
+    try {
+      const v = await getVideo(src);
+      const dur = Number.isFinite(v.duration) ? v.duration : 0;
+      const t = dur > 0 ? Math.min(time, Math.max(0, dur - 1 / BUCKET_FPS)) : time;
+      await seek(v, t);
+      const w = v.videoWidth;
+      const h = v.videoHeight;
+      if (!w || !h) return null;
+      if (!scratch) scratch = document.createElement("canvas");
+      if (scratch.width !== w) scratch.width = w;
+      if (scratch.height !== h) scratch.height = h;
+      const ctx = scratch.getContext("2d");
+      if (!ctx) return null;
+      ctx.drawImage(v, 0, 0, w, h);
+      const uri = scratch.toDataURL("image/jpeg", 0.82);
+      frameCache.set(key, uri);
+      return uri;
+    } catch {
+      return null;
+    } finally {
+      inflight2.delete(key);
+    }
+  });
+  inflight2.set(key, p);
+  seekChain.set(src, p);
+  return p;
+}
+async function resolveVideoFrames(root) {
+  if (!root || typeof document === "undefined") return;
+  const nodes = [];
+  const collect = (n) => {
+    if (!n) return;
+    const src = n.kind?.type === "video" ? n.kind.src : void 0;
+    if (typeof src === "string" && src.length > 0 && !src.startsWith("data:") && n.kind?.previewFallback !== "element") {
+      nodes.push(n);
+    }
+    for (const child of n.children ?? []) collect(child);
+  };
+  collect(root);
+  for (const n of nodes) {
+    const src = n.kind?.src;
+    if (typeof src !== "string") continue;
+    const time = typeof n.kind?.time === "number" ? n.kind.time : 0;
+    const uri = await decodeFrame(src, time);
+    if (uri && n.kind) {
+      n.kind.src = uri;
+      lastGood.set(src, uri);
+    } else if (!uri && n.kind) {
+      const held = lastGood.get(src);
+      if (held) n.kind.src = held;
+      else warnUnresolved(src);
+    }
+  }
+}
+function collectVideoOverlays(root, compWidth, compHeight) {
+  const out = [];
+  if (!root) return out;
+  let idx = 0;
+  const walk = (node, ax, ay, asx, asy) => {
+    const t = node.transform?.translate;
+    const s = node.transform?.scale;
+    const nx = ax + asx * (t?.x ?? 0);
+    const ny = ay + asy * (t?.y ?? 0);
+    const nsx = asx * (s?.x ?? 1);
+    const nsy = asy * (s?.y ?? 1);
+    const k = node.kind;
+    if (k?.type === "video" && k.previewFallback === "element" && typeof k.src === "string" && k.src.length > 0) {
+      out.push({
+        key: `${k.src}#${idx++}`,
+        src: k.src,
+        x: nx,
+        y: ny,
+        w: (typeof k.width === "number" ? k.width : compWidth) * nsx,
+        h: (typeof k.height === "number" ? k.height : compHeight) * nsy,
+        fit: k.fit ?? "cover"
+      });
+    }
+    for (const child of node.children ?? []) walk(child, nx, ny, nsx, nsy);
+  };
+  walk(root, 0, 0, 1, 1);
+  return out;
+}
+var enginesRendering = /* @__PURE__ */ new WeakSet();
+var engineFontCount = /* @__PURE__ */ new WeakMap();
+function ensureFontsLoaded(engine) {
+  const e = engine;
+  const load = e.loadFont ?? e.load_font;
+  if (typeof load !== "function") return;
+  const fonts = registeredFonts();
+  const loaded = engineFontCount.get(engine) ?? 0;
+  for (let i = loaded; i < fonts.length; i++) {
+    try {
+      load.call(engine, fonts[i]);
+    } catch {
+    }
+  }
+  engineFontCount.set(engine, fonts.length);
+}
+var Player = forwardRef(function Player2({
+  composition,
+  autoPlay = true,
+  loop: initialLoop = true,
+  draw,
+  gpuEngine,
+  engine,
+  showStatus = true,
+  controls = "auto",
+  label = "ONDA composition player",
+  className,
+  initialFrame = 0,
+  playbackRate = 1,
+  onFrameUpdate,
+  onPlay,
+  onPause
+}, ref) {
+  const canvasRef = useRef(null);
+  const stageRef = useRef(null);
+  const uid = useId();
+  useInjectStyles();
+  const [gpuFailed, setGpuFailed] = useState(false);
+  const [engineFailed, setEngineFailed] = useState(false);
+  const mode = useMemo(() => {
+    if (draw) return { kind: "sync", draw, label: "Custom" };
+    if (gpuEngine && !gpuFailed) return { kind: "gpu", engine: gpuEngine };
+    if (engine && !engineFailed) {
+      const real = engineDrawer(engine);
+      const safe = (ctx, scene) => {
+        try {
+          real(ctx, scene);
+        } catch {
+          setEngineFailed(true);
+          drawScene(ctx, scene);
+        }
+      };
+      return { kind: "sync", draw: safe, label: "CPU" };
+    }
+    return { kind: "sync", draw: drawScene, label: "Canvas2D" };
+  }, [draw, gpuEngine, gpuFailed, engine, engineFailed]);
+  const backend = mode.kind === "gpu" ? "WebGPU" : mode.label;
+  const isExact = mode.kind === "gpu" || backend === "CPU" || backend === "Custom";
+  const config = useMemo(() => renderFrame(composition, 0).composition, [composition]);
+  const totalFrames = Math.max(1, config.duration_in_frames);
+  const lastFrame = totalFrames - 1;
+  const videoOverlays = useMemo(
+    () => collectVideoOverlays(renderFrame(composition, 0).root, config.width, config.height),
+    [composition, config.width, config.height]
+  );
+  const videoOverlayRef = useRef(null);
+  const audioClips = useMemo(
+    () => collectAudioClips(renderFrame(composition, 0).root),
+    [composition]
+  );
+  const audioRef = useRef(null);
+  if (audioRef.current === null && typeof window !== "undefined") {
+    audioRef.current = new PreviewAudio();
+  }
+  useEffect(
+    () => () => {
+      audioRef.current?.dispose();
+      audioRef.current = null;
+    },
+    []
+  );
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [frame, setFrame] = useState(
+    () => Math.min(lastFrame, Math.max(0, Math.floor(initialFrame)))
+  );
+  const [imagesReady, setImagesReady] = useState(0);
+  useEffect(() => {
+    const urls = /* @__PURE__ */ new Set();
+    for (const f of /* @__PURE__ */ new Set([0, Math.floor(lastFrame / 2), lastFrame])) {
+      collectImageUrls(renderFrame(composition, f).root, urls);
+    }
+    if (urls.size === 0) return;
+    let cancelled = false;
+    Promise.all([...urls].map(resolveImageUrl)).then(() => {
+      if (!cancelled) setImagesReady((v) => v + 1);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [composition, lastFrame]);
+  const [playing, setPlaying] = useState(autoPlay);
+  const [loop, setLoop] = useState(initialLoop);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [seekNonce, setSeekNonce] = useState(0);
+  const [rate, setRate] = useState(() => clampRate(playbackRate));
+  const [speedOpen, setSpeedOpen] = useState(false);
+  const speedRef = useRef(null);
+  const targetRef = useRef({ composition, frame, images: imagesReady });
+  targetRef.current = { composition, frame, images: imagesReady };
+  const pendingPaintRef = useRef(null);
+  const blitRafRef = useRef(null);
+  const scheduleBlit = useCallback((out) => {
+    pendingPaintRef.current = out;
+    if (blitRafRef.current != null) return;
+    blitRafRef.current = requestAnimationFrame(() => {
+      blitRafRef.current = null;
+      const p = pendingPaintRef.current;
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!p || !canvas || !ctx) return;
+      if (canvas.width !== p.width) canvas.width = p.width;
+      if (canvas.height !== p.height) canvas.height = p.height;
+      ctx.putImageData(new ImageData(new Uint8ClampedArray(p.pixels), p.width, p.height), 0, 0);
+    });
+  }, []);
+  useEffect(
+    () => () => {
+      if (blitRafRef.current != null) cancelAnimationFrame(blitRafRef.current);
+    },
+    []
+  );
+  const liveRef = useRef({ frame, playing, loop, lastFrame, totalFrames, rate });
+  liveRef.current = { frame, playing, loop, lastFrame, totalFrames, rate };
+  const onFrameUpdateRef = useRef(onFrameUpdate);
+  onFrameUpdateRef.current = onFrameUpdate;
+  const onPlayRef = useRef(onPlay);
+  onPlayRef.current = onPlay;
+  const onPauseRef = useRef(onPause);
+  onPauseRef.current = onPause;
+  const listenersRef = useRef(/* @__PURE__ */ new Map());
+  const emit = useCallback((type, atFrame, playbackRate2) => {
+    const set = listenersRef.current.get(type);
+    if (!set) return;
+    const detail = playbackRate2 === void 0 ? { frame: atFrame } : { frame: atFrame, playbackRate: playbackRate2 };
+    for (const listener of set) listener({ type, detail });
+  }, []);
+  const changeRate = useCallback(
+    (next) => {
+      const clamped = clampRate(next);
+      setRate(clamped);
+      emit("ratechange", liveRef.current.frame, clamped);
+    },
+    [emit]
+  );
+  useEffect(() => {
+    if (!speedOpen) return;
+    const onDown = (e) => {
+      if (!speedRef.current?.contains(e.target)) setSpeedOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setSpeedOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [speedOpen]);
+  const paintGpu = useCallback(
+    (gpu) => {
+      if (enginesRendering.has(gpu)) return;
+      enginesRendering.add(gpu);
+      (async () => {
+        try {
+          let done = null;
+          while (true) {
+            const { composition: c, frame: f, images: v } = targetRef.current;
+            if (done && done.c === c && done.f === f && done.v === v) break;
+            done = { c, f, v };
+            const scene = renderFrame(c, f);
+            const urls = /* @__PURE__ */ new Set();
+            collectImageUrls(scene.root, urls);
+            const pending = [...urls].filter((u) => !imageResolved(u));
+            if (pending.length > 0) {
+              void Promise.all(pending.map(resolveImageUrl)).then(
+                () => setImagesReady((n) => n + 1)
+              );
+            }
+            applyResolvedImages(scene.root);
+            await resolveVideoFrames(scene.root);
+            ensureFontsLoaded(gpu);
+            const out = await gpu.render(JSON.stringify(scene));
+            scheduleBlit(out);
+          }
+        } catch {
+          setGpuFailed(true);
+        } finally {
+          enginesRendering.delete(gpu);
+        }
+      })();
+    },
+    [scheduleBlit]
+  );
+  useEffect(() => {
+    if (mode.kind === "gpu") {
+      paintGpu(mode.engine);
+    } else {
+      const ctx = canvasRef.current?.getContext("2d");
+      if (ctx) {
+        const scene = renderFrame(composition, frame);
+        const urls = /* @__PURE__ */ new Set();
+        collectImageUrls(scene.root, urls);
+        const pending = [...urls].filter((u) => !imageResolved(u));
+        if (pending.length > 0) {
+          void Promise.all(pending.map(resolveImageUrl)).then(() => setImagesReady((n) => n + 1));
+        }
+        applyResolvedImages(scene.root);
+        mode.draw(ctx, scene);
+      }
+    }
+  }, [composition, frame, mode, paintGpu, imagesReady]);
+  useEffect(() => {
+    const vids = videoOverlayRef.current?.querySelectorAll("video");
+    if (!vids) return;
+    for (const v of vids) {
+      if (playing) void v.play().catch(() => {
+      });
+      else v.pause();
+    }
+  }, [playing, videoOverlays]);
+  const compSeconds = useCallback((f) => f / Math.max(1, config.fps), [config.fps]);
+  useEffect(() => {
+    audioRef.current?.setClips(audioClips, totalFrames / Math.max(1, config.fps));
+  }, [audioClips, totalFrames, config.fps]);
+  useEffect(() => {
+    audioRef.current?.setGain(volume, muted);
+  }, [volume, muted]);
+  useEffect(() => {
+    audioRef.current?.setLoop(loop);
+  }, [loop]);
+  useEffect(() => {
+    audioRef.current?.setRate(rate);
+  }, [rate]);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) audio.play(compSeconds(liveRef.current.frame));
+    else audio.pause();
+  }, [playing, compSeconds]);
+  useEffect(() => {
+    if (liveRef.current.playing) audioRef.current?.seek(compSeconds(liveRef.current.frame));
+  }, [seekNonce, compSeconds]);
+  useEffect(() => {
+    if (!playing) return;
+    const frameDuration = 1e3 / config.fps;
+    let last = null;
+    let raf = 0;
+    const tick = (now) => {
+      if (last === null) last = now;
+      const r = liveRef.current.rate;
+      const steps = Math.floor((now - last) * r / frameDuration);
+      if (steps > 0) {
+        last += steps * frameDuration / r;
+        setFrame((current) => {
+          const next = current + steps;
+          if (next <= lastFrame) return next;
+          return loop ? next % totalFrames : lastFrame;
+        });
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [playing, config.fps, totalFrames, lastFrame, loop]);
+  useEffect(() => {
+    if (!loop && frame >= lastFrame) {
+      setPlaying(false);
+      emit("ended", frame);
+    }
+  }, [frame, lastFrame, loop, emit]);
+  useEffect(() => {
+    onFrameUpdateRef.current?.(frame);
+    emit("frameupdate", frame);
+  }, [frame, emit]);
+  useEffect(() => {
+    if (playing) onPlayRef.current?.();
+    else onPauseRef.current?.();
+    emit(playing ? "play" : "pause", liveRef.current.frame);
+  }, [playing, emit]);
+  const togglePlay = useCallback(() => {
+    setPlaying((p) => {
+      const { frame: f, loop: lp, lastFrame: lf } = liveRef.current;
+      if (!p && !lp && f >= lf) setFrame(0);
+      return !p;
+    });
+  }, []);
+  const seekTo = useCallback(
+    (next) => {
+      setPlaying(false);
+      setFrame(Math.min(lastFrame, Math.max(0, next)));
+      setSeekNonce((n) => n + 1);
+    },
+    [lastFrame]
+  );
+  const goToFrame = useCallback(
+    (next) => {
+      const clamped = Math.min(lastFrame, Math.max(0, Math.floor(next)));
+      setFrame(clamped);
+      setSeekNonce((n) => n + 1);
+      emit("seeked", clamped);
+    },
+    [lastFrame, emit]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      seekTo: goToFrame,
+      play: () => {
+        const { frame: f, loop: lp, lastFrame: lf } = liveRef.current;
+        if (!lp && f >= lf) setFrame(0);
+        setPlaying(true);
+      },
+      pause: () => setPlaying(false),
+      toggle: togglePlay,
+      getCurrentFrame: () => liveRef.current.frame,
+      getTotalFrames: () => liveRef.current.totalFrames,
+      isPlaying: () => liveRef.current.playing,
+      getPlaybackRate: () => liveRef.current.rate,
+      setPlaybackRate: changeRate,
+      addEventListener: (type, listener) => {
+        const map = listenersRef.current;
+        if (!map.has(type)) map.set(type, /* @__PURE__ */ new Set());
+        map.get(type)?.add(listener);
+      },
+      removeEventListener: (type, listener) => {
+        listenersRef.current.get(type)?.delete(listener);
+      }
+    }),
+    [goToFrame, togglePlay, changeRate]
+  );
+  const toggleFullscreen = useCallback(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    const doc = document;
+    if (document.fullscreenElement ?? doc.webkitFullscreenElement) {
+      (document.exitFullscreen ?? doc.webkitExitFullscreen)?.call(document);
+    } else {
+      (el.requestFullscreen ?? el.webkitRequestFullscreen)?.call(el);
+    }
+  }, []);
+  useEffect(() => {
+    const onChange = () => {
+      const doc = document;
+      setIsFullscreen(Boolean(document.fullscreenElement ?? doc.webkitFullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", onChange);
+    document.addEventListener("webkitfullscreenchange", onChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onChange);
+      document.removeEventListener("webkitfullscreenchange", onChange);
+    };
+  }, []);
+  const onKeyDown = useCallback(
+    (event) => {
+      const onButton = event.target?.tagName === "BUTTON";
+      const jump = event.shiftKey ? 10 : 1;
+      switch (event.key) {
+        case " ":
+        case "k":
+          if (onButton && event.key === " ") return;
+          event.preventDefault();
+          togglePlay();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          seekTo(frame + jump);
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          seekTo(frame - jump);
+          break;
+        case "Home":
+          event.preventDefault();
+          seekTo(0);
+          break;
+        case "End":
+          event.preventDefault();
+          seekTo(lastFrame);
+          break;
+        case "l":
+          event.preventDefault();
+          setLoop((v) => !v);
+          break;
+        case "f":
+          event.preventDefault();
+          toggleFullscreen();
+          break;
+      }
+    },
+    [frame, lastFrame, togglePlay, seekTo, toggleFullscreen]
+  );
+  const seconds = frame / config.fps;
+  const totalSeconds = lastFrame / config.fps;
+  const statusLabel = backend;
+  const statusText = mode.kind === "gpu" ? "Rendered by Vello on WebGPU \u2014 pixel-identical to `onda export`, no Chromium." : backend === "CPU" ? "Rendered by the ONDA CPU engine in WebAssembly \u2014 no DOM, no Chromium." : backend === "Canvas2D" ? "Canvas2D fallback \u2014 WebGPU and the CPU engine are unavailable here." : "Custom renderer.";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "onda-player",
+        playing ? "" : "is-paused",
+        controls === "always" ? "is-controls" : "",
+        controls === "none" ? "is-controls-none" : "",
+        className
+      ].filter(Boolean).join(" "),
+      style: styles.root,
+      role: "group",
+      "aria-label": label,
+      "aria-roledescription": "media player",
+      tabIndex: 0,
+      onKeyDown,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stageRef,
+          className: "onda-player__stage",
+          style: { ...styles.stage, aspectRatio: `${config.width} / ${config.height}` },
+          children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                width: config.width,
+                height: config.height,
+                className: "onda-player__canvas",
+                style: styles.canvas,
+                onClick: controls === "none" ? void 0 : togglePlay,
+                "aria-label": `composition preview, ${config.width}\xD7${config.height} at ${config.fps}fps \u2014 click to ${playing ? "pause" : "play"}`
+              }
+            ),
+            videoOverlays.length > 0 && /* @__PURE__ */ jsx("div", { ref: videoOverlayRef, style: styles.videoOverlay, "aria-hidden": "true", children: videoOverlays.map((o) => /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: o.src,
+                muted: true,
+                autoPlay: true,
+                loop: true,
+                playsInline: true,
+                style: {
+                  position: "absolute",
+                  left: `${o.x / config.width * 100}%`,
+                  top: `${o.y / config.height * 100}%`,
+                  width: `${o.w / config.width * 100}%`,
+                  height: `${o.h / config.height * 100}%`,
+                  objectFit: o.fit
+                }
+              },
+              o.key
+            )) }),
+            showStatus && /* @__PURE__ */ jsxs("div", { className: "onda-player__badge", title: statusText, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `onda-player__dot onda-player__dot--${isExact ? "ok" : "warn"}`,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: statusLabel })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "onda-player__fs",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "Exit full screen" : "Full screen",
+                "aria-pressed": isFullscreen,
+                title: isFullscreen ? "Exit full screen (f)" : "Full screen (f)",
+                children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "onda-player__overlay", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${uid}-scrubber`,
+                  type: "range",
+                  className: "onda-player__scrubber",
+                  style: { "--progress": `${lastFrame ? frame / lastFrame * 100 : 0}%` },
+                  min: 0,
+                  max: lastFrame,
+                  step: 1,
+                  value: frame,
+                  onChange: (event) => seekTo(Number(event.target.value)),
+                  "aria-label": "Seek frame",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": lastFrame,
+                  "aria-valuenow": frame,
+                  "aria-valuetext": `Frame ${frame} of ${lastFrame}, ${seconds.toFixed(2)} seconds`
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "onda-player__row", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "onda-player__play",
+                    onClick: togglePlay,
+                    "aria-label": playing ? "Pause" : "Play",
+                    "aria-pressed": playing,
+                    children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "output",
+                  {
+                    className: "onda-player__readout",
+                    htmlFor: `${uid}-scrubber`,
+                    style: styles.readout,
+                    "aria-live": "off",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "onda-player__time", children: fmtTime(seconds) }),
+                      /* @__PURE__ */ jsx("span", { className: "onda-player__sep", "aria-hidden": "true", children: "/" }),
+                      /* @__PURE__ */ jsx("span", { className: "onda-player__total", children: fmtTime(totalSeconds) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "onda-player__spacer" }),
+                audioClips.length > 0 && /* @__PURE__ */ jsxs("div", { className: "onda-player__volume", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "onda-player__icon",
+                      onClick: () => setMuted((v) => !v),
+                      "aria-label": muted ? "Unmute" : "Mute",
+                      "aria-pressed": muted,
+                      title: muted ? "Unmute" : "Mute",
+                      children: muted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      className: "onda-player__volume-slider",
+                      min: 0,
+                      max: 1,
+                      step: 0.01,
+                      value: muted ? 0 : volume,
+                      onChange: (event) => {
+                        const v = Number(event.target.value);
+                        setVolume(v);
+                        setMuted(v === 0);
+                      },
+                      "aria-label": "Volume"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "onda-player__speed", ref: speedRef, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `onda-player__icon onda-player__speed-btn${rate !== 1 ? " is-active" : ""}`,
+                      onClick: () => setSpeedOpen((v) => !v),
+                      "aria-label": `Playback speed: ${formatRate(rate)}`,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": speedOpen,
+                      title: "Playback speed (preview only)",
+                      children: formatRate(rate)
+                    }
+                  ),
+                  speedOpen && /* @__PURE__ */ jsx("div", { className: "onda-player__speed-menu", role: "menu", "aria-label": "Playback speed", children: SPEED_PRESETS.map((r) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitemradio",
+                      "aria-checked": r === rate,
+                      className: `onda-player__speed-item${r === rate ? " is-active" : ""}`,
+                      onClick: () => {
+                        changeRate(r);
+                        setSpeedOpen(false);
+                      },
+                      children: formatRate(r)
+                    },
+                    r
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `onda-player__icon${loop ? " is-active" : ""}`,
+                    onClick: () => setLoop((v) => !v),
+                    "aria-label": "Loop playback",
+                    "aria-pressed": loop,
+                    title: "Loop",
+                    children: /* @__PURE__ */ jsx(LoopIcon, {})
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+var SPEED_PRESETS = [0.25, 0.5, 1, 1.5, 2];
+function clampRate(rate) {
+  if (!Number.isFinite(rate) || rate <= 0) return 1;
+  return Math.max(0.1, Math.min(4, rate));
+}
+function formatRate(rate) {
+  return `${Math.round(rate * 100) / 100}\xD7`;
+}
+function PlayIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "15", height: "16", viewBox: "0 0 15 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 1.4v13.2a1 1 0 0 0 1.52.85l11-6.6a1 1 0 0 0 0-1.7l-11-6.6A1 1 0 0 0 2 1.4Z" }) });
+}
+function PauseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "16", viewBox: "0 0 14 16", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "1.5", width: "3.5", height: "13", rx: "1.2" }),
+    /* @__PURE__ */ jsx("rect", { x: "8.5", y: "1.5", width: "3.5", height: "13", rx: "1.2" })
+  ] });
+}
+function LoopIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "17",
+      height: "17",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M17 1.5 21 5.5 17 9.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 22.5 3 18.5 7 14.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })
+      ]
+    }
+  );
+}
+function VolumeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 9v6h4l5 4V5L8 9H4Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.5 8.5a4 4 0 0 1 0 7" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6a7 7 0 0 1 0 12" })
+      ]
+    }
+  );
+}
+function VolumeMuteIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 9v6h4l5 4V5L8 9H4Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 9.5 16.5 15" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.5 9.5 22 15" })
+      ]
+    }
+  );
+}
+function FullscreenIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 8V4a1 1 0 0 1 1-1h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 8V4a1 1 0 0 0-1-1h-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 16v4a1 1 0 0 0 1 1h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 16v4a1 1 0 0 1-1 1h-4" })
+      ]
+    }
+  );
+}
+function ExitFullscreenIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 3v4a1 1 0 0 1-1 1H3" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 3v4a1 1 0 0 0 1 1h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 21v-4a1 1 0 0 0-1-1H3" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 21v-4a1 1 0 0 1 1-1h4" })
+      ]
+    }
+  );
+}
+function fmtTime(s) {
+  const minutes = Math.floor(s / 60);
+  const secs = Math.floor(s % 60);
+  const centis = Math.floor(s * 100 % 100);
+  return `${minutes}:${secs.toString().padStart(2, "0")}.${centis.toString().padStart(2, "0")}`;
+}
+var styles = {
+  root: {
+    display: "block",
+    width: "100%",
+    color: "var(--onda-text, #f2f2f4)",
+    fontFamily: 'var(--onda-font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif)'
+  },
+  stage: {
+    position: "relative",
+    width: "100%",
+    borderRadius: 14,
+    overflow: "hidden",
+    background: "var(--onda-bg-deep, #08080a)",
+    border: "1px solid var(--onda-border, #26262c)",
+    // Isolate the preview as its own compositing context + contain its paint, so
+    // the heavy, per-frame-updating canvas layer doesn't force the browser to
+    // recomposite the whole PAGE behind it. That recomposite is what flickers the
+    // background on some GPUs (e.g. Arc/Metal) while a video plays and the cursor
+    // moves — a compositor artifact, NOT a content change (the rendered frames are
+    // byte-identical) and NOT present in exported video.
+    isolation: "isolate",
+    contain: "paint",
+    // A query container (inline axis only, so aspect-ratio still drives height) so
+    // the control bar can adapt to narrow widths (e.g. 9:16) — see the @container
+    // rule in the stylesheet.
+    containerType: "inline-size"
+  },
+  // `translateZ(0)` promotes the canvas to its OWN GPU layer, so its per-frame
+  // pixel updates don't invalidate / re-raster sibling layers (see `stage`).
+  canvas: {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    cursor: "pointer",
+    transform: "translateZ(0)"
+  },
+  videoOverlay: { position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" },
+  readout: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: 4,
+    fontVariantNumeric: "tabular-nums",
+    fontSize: 13,
+    color: "rgba(255,255,255,.75)",
+    whiteSpace: "nowrap"
+  }
+};
+function useInjectStyles() {
+  useEffect(() => {
+    const id = "onda-player-styles";
+    if (typeof document === "undefined" || document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = PLAYER_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+var PLAYER_CSS = `
+.onda-player {
+  /* Brand tokens (onda.video palette) with safe fallbacks. */
+  --onda-bg: var(--bg, #0e0e12);
+  --onda-bg-deep: var(--bg-deep, #08080a);
+  --onda-surface: var(--surface, #121217);
+  --onda-surface-2: var(--surface-2, #18181d);
+  --onda-border: var(--border, #26262c);
+  --onda-text: var(--text, #f2f2f4);
+  --onda-text-muted: var(--text-muted, #8e8e98);
+  /* Player-scoped (NOT the page's generic --accent, which a host app like ONDA
+     Studio sets to its own color) so the controls stay the ONDA rose by default;
+     a host can still theme them via --onda-player-accent. */
+  --onda-accent: var(--onda-player-accent, #d96b82);
+  --onda-accent-600: var(--onda-player-accent-600, #c8576f);
+  --onda-on-accent: var(--on-accent, #0e0e12);
+  --onda-ok: var(--ok, #6bbf8a);
+  --onda-warn: var(--warn, #d9b06b);
+}
+/* Controls overlay the stage and auto-hide unless hovering / paused / focused. */
+.onda-player__overlay {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  display: flex; flex-direction: column; gap: 10px;
+  padding: 32px 14px 14px;
+  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.32) 55%, transparent);
+  opacity: 0; transform: translateY(8px);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+  pointer-events: none;
+}
+.onda-player__stage:hover .onda-player__overlay,
+.onda-player__stage:focus-within .onda-player__overlay,
+.onda-player.is-paused .onda-player__overlay,
+.onda-player.is-controls .onda-player__overlay {
+  opacity: 1; transform: none; pointer-events: auto;
+}
+/* controls:none \u2014 a chrome-free thumbnail: no overlay, no fullscreen button
+   (overrides the hover/focus/paused reveal above). */
+.onda-player.is-controls-none .onda-player__overlay,
+.onda-player.is-controls-none .onda-player__fs {
+  display: none;
+}
+.onda-player__row { display: flex; align-items: center; gap: 14px; }
+.onda-player__spacer { flex: 1 1 auto; }
+/* Responsive control bar \u2014 the overlay is an inline-size query container, so
+   these adapt to the PLAYER width regardless of canvas aspect (9:16, 4:5, 1:1,
+   16:9 all just resolve to a width).
+
+   KEY: the widest thing in the bar is the time readout ("0:07.80 / 0:11.06"),
+   NOT the buttons \u2014 so the right move on a narrow player is to compact the TIME,
+   which then lets every button (play \xB7 mute \xB7 speed \xB7 loop) stay in one row. We
+   only start dropping controls at sizes far below any real editor preview.
+
+   Tier 1 (\u2264440px \u2014 most 9:16 / smaller 4:5\xB71:1): readout \u2192 CURRENT time only
+     (the scrubber already shows the end point), tighten gaps. All buttons stay.
+   Tier 2 (\u2264340px \u2014 tight 9:16): collapse volume to a mute TOGGLE (its 56px
+     hover-out slider is the only thing left that would overflow). Muting works.
+   Tier 3 (\u2264280px \u2014 last resort, a very small player): drop the preview-only
+     speed control. */
+@container (max-width: 440px) {
+  .onda-player__overlay { padding-left: 12px; padding-right: 12px; }
+  .onda-player__row { gap: 9px; }
+  .onda-player__sep, .onda-player__total { display: none; }
+}
+@container (max-width: 340px) {
+  .onda-player__overlay { padding-left: 9px; padding-right: 9px; }
+  .onda-player__row { gap: 7px; }
+  .onda-player__volume-slider { display: none; }
+}
+@container (max-width: 280px) {
+  .onda-player__speed { display: none; }
+}
+/* Engine/preview badge (top-left), fades with the controls. */
+.onda-player__badge {
+  position: absolute; top: 12px; left: 12px;
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 5px 10px; border-radius: 999px;
+  background: rgba(8,8,10,.82);
+  border: 1px solid rgba(255,255,255,.1);
+  color: rgba(255,255,255,.85);
+  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
+  opacity: 0; transition: opacity 200ms ease-out; pointer-events: none;
+}
+.onda-player__stage:hover .onda-player__badge,
+.onda-player__stage:focus-within .onda-player__badge,
+.onda-player.is-paused .onda-player__badge,
+.onda-player.is-controls .onda-player__badge { opacity: 1; }
+/* Fullscreen toggle (top-right), fades in with the controls like the badge. */
+.onda-player__fs {
+  position: absolute; top: 12px; right: 12px;
+  width: 34px; height: 34px;
+  display: grid; place-items: center;
+  border-radius: 9px;
+  background: rgba(8,8,10,.82);
+  border: 1px solid rgba(255,255,255,.1);
+  color: rgba(255,255,255,.85);
+  cursor: pointer;
+  opacity: 0; transform: translateY(-4px);
+  transition: opacity 200ms ease-out, transform 200ms ease-out, background 160ms ease-out, color 160ms ease-out;
+  pointer-events: none;
+}
+.onda-player__stage:hover .onda-player__fs,
+.onda-player__stage:focus-within .onda-player__fs,
+.onda-player.is-paused .onda-player__fs,
+.onda-player.is-controls .onda-player__fs { opacity: 1; transform: none; pointer-events: auto; }
+.onda-player__fs:hover { background: rgba(8,8,10,.85); color: #fff; }
+.onda-player__fs:focus-visible { outline: 2px solid var(--onda-accent); outline-offset: 2px; }
+.onda-player__fs svg { display: block; }
+/* In fullscreen: fill the screen and letterbox the canvas (preserve aspect). */
+.onda-player__stage:fullscreen,
+.onda-player__stage:-webkit-full-screen {
+  width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; background: #000;
+}
+.onda-player__stage:fullscreen .onda-player__canvas,
+.onda-player__stage:-webkit-full-screen .onda-player__canvas {
+  width: 100vw; height: 100vh; object-fit: contain;
+}
+/* Circular primary play/pause \u2014 the player's focal control. */
+.onda-player__play {
+  flex: 0 0 auto;
+  width: 42px; height: 42px;
+  display: grid; place-items: center;
+  border: 0; border-radius: 999px;
+  background: var(--onda-accent);
+  color: var(--onda-on-accent);
+  cursor: pointer;
+  transition: background 160ms ease-out, transform 120ms ease-out;
+}
+.onda-player__play:hover { background: var(--onda-accent-600); transform: scale(1.06); }
+.onda-player__play:active { transform: scale(0.96); }
+.onda-player__play svg { display: block; }
+/* Ghost icon toggle (loop), over the scrim. */
+.onda-player__icon {
+  flex: 0 0 auto;
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
+  background: transparent; color: rgba(255,255,255,.8);
+  cursor: pointer;
+  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
+}
+.onda-player__icon:hover { background: rgba(255,255,255,.1); color: #fff; }
+.onda-player__icon.is-active {
+  color: var(--onda-accent);
+  border-color: color-mix(in srgb, var(--onda-accent) 60%, transparent);
+  background: color-mix(in srgb, var(--onda-accent) 16%, transparent);
+}
+.onda-player__icon svg { display: block; }
+/* Speed: a rate button (shows e.g. "1\xD7") that opens a preset menu above it. */
+.onda-player__speed { position: relative; display: inline-flex; flex: 0 0 auto; }
+.onda-player__speed-btn {
+  width: auto; min-width: 46px; padding: 0 10px;
+  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
+  font-variant-numeric: tabular-nums;
+}
+.onda-player__speed-menu {
+  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 6;
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 4px; border-radius: 10px;
+  background: #16161c; border: 1px solid rgba(255,255,255,.14);
+  box-shadow: 0 10px 30px rgba(0,0,0,.5);
+}
+.onda-player__speed-item {
+  appearance: none; border: 0; background: transparent;
+  color: rgba(255,255,255,.82); cursor: pointer;
+  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
+  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
+  padding: 7px 12px; border-radius: 7px; min-width: 60px;
+}
+.onda-player__speed-item:hover { background: rgba(255,255,255,.1); color: #fff; }
+.onda-player__speed-item.is-active { color: var(--onda-accent); }
+.onda-player__speed-btn:focus-visible,
+.onda-player__speed-item:focus-visible {
+  outline: 2px solid var(--onda-accent); outline-offset: 2px;
+}
+/* Volume: a mute toggle + a slider that expands on hover/focus (compact). */
+.onda-player__volume { display: inline-flex; align-items: center; gap: 4px; }
+.onda-player__volume-slider {
+  width: 0; opacity: 0; min-width: 0;
+  height: 5px; cursor: pointer; margin: 0;
+  -webkit-appearance: none; appearance: none; background: transparent;
+  transition: width 160ms ease-out, opacity 160ms ease-out;
+}
+.onda-player__volume:hover .onda-player__volume-slider,
+.onda-player__volume:focus-within .onda-player__volume-slider { width: 56px; opacity: 1; }
+.onda-player__volume-slider::-webkit-slider-runnable-track {
+  height: 4px; border-radius: 999px; background: rgba(255,255,255,.32);
+}
+.onda-player__volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -3.5px;
+  border-radius: 999px; background: #fff;
+}
+.onda-player__volume-slider::-moz-range-track {
+  height: 4px; border-radius: 999px; background: rgba(255,255,255,.32);
+}
+.onda-player__volume-slider::-moz-range-thumb {
+  width: 11px; height: 11px; border: 0; border-radius: 999px; background: #fff;
+}
+/* Visible focus rings on every interactive control + the player region. */
+.onda-player:focus-visible,
+.onda-player__play:focus-visible,
+.onda-player__icon:focus-visible,
+.onda-player__scrubber:focus-visible {
+  outline: 2px solid var(--onda-accent);
+  outline-offset: 2px;
+}
+/* Progress-aware scrubber over the scrim: rose fill, translucent track. */
+.onda-player__scrubber {
+  flex: 1 1 auto; min-width: 80px;
+  height: 8px; cursor: pointer; margin: 0;
+  -webkit-appearance: none; appearance: none;
+  background: transparent;
+}
+.onda-player__scrubber::-webkit-slider-runnable-track {
+  height: 6px; border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--onda-accent) 0 var(--progress, 0%),
+    rgba(255,255,255,.32) var(--progress, 0%) 100%
+  );
+}
+.onda-player__scrubber::-moz-range-track {
+  height: 6px; border-radius: 999px; background: rgba(255,255,255,.32);
+}
+.onda-player__scrubber::-moz-range-progress {
+  height: 6px; border-radius: 999px; background: var(--onda-accent);
+}
+.onda-player__scrubber::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 14px; height: 14px; margin-top: -4px;
+  border-radius: 999px; background: #fff;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--onda-accent) 45%, transparent), 0 1px 3px rgba(0,0,0,.6);
+  transition: box-shadow 140ms ease-out;
+}
+.onda-player__scrubber:hover::-webkit-slider-thumb {
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--onda-accent) 50%, transparent), 0 1px 3px rgba(0,0,0,.6);
+}
+.onda-player__scrubber::-moz-range-thumb {
+  width: 14px; height: 14px; border: 0;
+  border-radius: 999px; background: #fff;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--onda-accent) 45%, transparent), 0 1px 3px rgba(0,0,0,.6);
+}
+.onda-player__readout { flex: 0 0 auto; }
+.onda-player__time { font-weight: 600; color: #fff; }
+.onda-player__sep, .onda-player__total { color: rgba(255,255,255,.6); }
+.onda-player__dot {
+  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; display: inline-block;
+}
+.onda-player__dot--ok {
+  background: var(--onda-ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--onda-ok) 25%, transparent);
+}
+.onda-player__dot--warn {
+  background: var(--onda-warn);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--onda-warn) 25%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .onda-player__overlay,
+  .onda-player__badge,
+  .onda-player__play,
+  .onda-player__icon,
+  .onda-player__scrubber::-webkit-slider-thumb { transition: none; }
+  .onda-player__play:hover,
+  .onda-player__play:active { transform: none; }
+}
+`;
+//! Canvas2D **preview** renderer (the stopgap path).
+//!
+//! Draws an ONDA scene graph to a `CanvasRenderingContext2D` for a fast,
+//! dependency-free in-browser preview. It interprets the *same* scene graph the
+//! engine renders, and now covers shapes (rect/ellipse/path), gradients, clips,
+//! transforms, and opacity — but it is **not** the engine and is **not
+//! pixel-accurate**:
+//!   - Text uses the browser's font rasterizer (and a heuristic baseline), not
+//!     the engine's cosmic-text + bundled Open Sans, so glyph shapes/metrics
+//!     differ.
+//!   - Anti-aliasing, gradient color-space, and path/stroke geometry follow the
+//!     browser's Canvas2D, not Vello.
+//! The pixel-exact output is `onda render` / `onda export`, and in the browser
+//! the {@link @onda-engine/wasm} `OndaEngine` (the real Rust renderer compiled to wasm).
+//! Prefer that drawer in `<Player>` when it is available; this Canvas2D renderer
+//! is the graceful fallback. A WebGPU *present* path (see `WEBGPU.md`) is the
+//! planned way to make in-browser preview == export at real-time speed.
+//! Bridge the **real** ONDA renderer (the `@onda-engine/wasm` `OndaEngine`) into a
+//! `<Player>` {@link FrameDrawer}.
+//! The wasm engine is the same Rust renderer `onda export` uses (cosmic-text +
+//! the bundled Open Sans, Vello-class shape/path/gradient/clip semantics), so a
+//! preview drawn through it is **pixel-identical to the native/CLI render** — no
+//! DOM, no Chromium. This is the charter-true preview path; the Canvas2D
+//! {@link drawScene} renderer is the dependency-free fallback.
+//! To keep `@onda-engine/player` free of a hard dependency on `@onda-engine/wasm`, the engine
+//! is accepted *structurally*: any object exposing `render(json) -> RenderedFrame`
+//! works. The app owns wasm init and constructs the engine.
+//! Web Audio transport for the Player's preview.
+//! The preview's visual frame-clock pegs the main thread (the per-frame wasm/GPU
+//! render), and an HTML `<audio>` element leans on the main thread for buffering
+//! and servicing — so under that load it underruns and glitches every second or
+//! two. This plays each clip through the **Web Audio API** instead: the source is
+//! decoded ONCE into an in-memory `AudioBuffer` and scheduled on the audio render
+//! thread, which is immune to main-thread jank. No streaming, no per-frame seeks,
+//! no loop-seam click.
+//! Model: the timeline is the master clock. On play we anchor the audio to the
+//! playhead (a `compTime` ↔ `AudioContext.currentTime` mapping) and schedule clip
+//! instances cycle-by-cycle with a look-ahead, so a looping timeline is gapless
+//! (the next cycle is queued before the current one ends — no JS seek at the wrap).
+//! We re-anchor only on an explicit play/seek/rate change, never to chase drift.
+//! Export is unaffected — it muxes the same nodes through the native pipeline.
+//! Audio playback support for the Player.
+//! Non-visual `<Audio>` nodes ride in the scene graph; the player finds them here
+//! and plays them via plain `<audio>` elements, synced to play/pause + scrub at
+//! the player's volume. (Export muxes the same nodes via the native pipeline.)
+//! In-browser image resolution.
+//! The wasm engine decodes `data:` URIs but can't fetch URL/path image sources
+//! (there's no filesystem or fetch inside the render call). So the Player resolves
+//! image `src` URLs to `data:` URIs in JS — the browser fetches + the engine's
+//! existing `data:` decode path handles them. Resolved URIs are cached and shared
+//! across players, so each image is fetched once.
+//! In-browser video-frame decoding for the Player.
+//! The wasm engine can't decode video, so the Player decodes the frame the scene
+//! asks for — an off-screen `<video>` seeked to the node's source `time`, drawn
+//! to a canvas — and hands it to the engine as that frame's pixels. Today the
+//! hand-off reuses the engine's image path (a `data:` URI); a raw-buffer path
+//! (no per-frame base64) layers on top of this same resolver later.
+//! Decoded frames are cached by `(src, time-bucket)` and shared across players,
+//! so a looping preview decodes each distinct source frame at most once — the
+//! first pass seeks, every pass after is a cache hit. Seeking is serialized per
+//! source (one `<video>` element can only be at one `currentTime`).
+//! `<Player>` — an interactive, accessible preview of an ONDA composition.
+//! Renders each visible frame from `@onda-engine/react`'s `renderFrame` (so what you
+//! scrub is the real per-frame scene graph) and paints it to a canvas. By
+//! default it paints with the **real ONDA engine** when one is supplied (the
+//! `@onda-engine/wasm` `OndaEngine`, pixel-identical to `onda export`), and otherwise
+//! falls back to the dependency-free Canvas2D preview.
+//! Controls are fully keyboard-accessible (Space = play/pause, ←/→ = step,
+//! Shift+←/→ = jump, Home/End = ends), ARIA-labelled, and styled with the ONDA
+//! brand tokens (see `assets/brand/BRAND.md`). All non-essential motion respects
+//! `prefers-reduced-motion`.
+//! `@onda-engine/player` — interactive, accessible preview of ONDA compositions.
+//! `<Player>` previews through the **real** ONDA renderer when given an `engine`
+//! (`@onda-engine/wasm`'s `OndaEngine`, pixel-identical to `onda export`), and otherwise
+//! falls back to the dependency-free Canvas2D {@link drawScene} preview.
+
+export { Player, cssColor, drawScene, engineDrawer };
+//# sourceMappingURL=player.js.map
+//# sourceMappingURL=player.js.map