@pixerate/flair 0.24.0 → 0.26.0

package/dist/{chunk-NGKNI3QX.js → chunk-CK6EV37I.js}

@@ -1,393 +1,35 @@
 import {
-  CAMERA_MS,
   CAMERA_STEP_MS,
+  CAMERA_TRANSITIONS,
   EFFECT_TYPES,
   MAX_TILT,
   cameraAt,
   cameraTrack,
   sceneStage
-} from "./chunk-WAMA45G3.js";
+} from "./chunk-5USSDEQL.js";
+import {
+  ShaderFrames
+} from "./chunk-H6VDFBIO.js";
 import {
   HOVER_SECONDS,
   MAX_CLICKS,
   MAX_TRAIL,
-  PointerTracker,
   SVG_EDGE,
-  ShaderCompileError,
   TRAIL_SECONDS,
   TextureCache,
   VERTEX_SOURCE,
-  clicksUniform,
   compileShader,
   createContext,
   drawFrame,
   resetGlCaches,
-  trailUniform,
   wrapSource
-} from "./chunk-ARKC7LDW.js";
+} from "./chunk-RDU63CDO.js";
 import {
   controlValue,
   imageUrls,
   parseControls
 } from "./chunk-VYOMXE6I.js";
 
-// src/shader/renderer.ts
-var ShaderRenderer = class {
-  canvas;
-  gl;
-  alpha;
-  shader = null;
-  textures = null;
-  /** Live sources by image control, kept to set again on a restored context. */
-  live = /* @__PURE__ */ new Map();
-  controls = [];
-  values;
-  source = "";
-  raf = 0;
-  lastNow = 0;
-  frame = 0;
-  fpsFrames = 0;
-  fpsSince = 0;
-  ownsCanvas = false;
-  resizeObserver;
-  intersectionObserver;
-  wasPlayingBeforeHidden = false;
-  hasEnteredViewport = false;
-  mouse = [0, 0, 0, 0];
-  /** `iPointer` and `iClicks`. */
-  pointer = new PointerTracker();
-  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 (or live video) cannot be loaded; the control shows black. */
-  onImageError;
-  /**
-   * Creates a canvas in `target` (with `className` or options), or attaches to an existing
-   * `HTMLCanvasElement`, and starts the animation loop. Size the canvas with CSS.
-   */
-  constructor(target, options) {
-    const opts = typeof options === "string" ? { className: options } : options ?? {};
-    let canvas;
-    if (target instanceof HTMLCanvasElement || "tagName" in target && target.tagName === "CANVAS") {
-      canvas = target;
-      if (opts.className) canvas.className = opts.className;
-    } else {
-      canvas = document.createElement("canvas");
-      if (opts.className) canvas.className = opts.className;
-      target.appendChild(canvas);
-      this.ownsCanvas = true;
-    }
-    this.canvas = canvas;
-    this.alpha = Boolean(opts.alpha);
-    this.gl = createContext(canvas, true, this.alpha);
-    this.textures = this.gl && this.textureCache(this.gl);
-    this.resizeObserver = new ResizeObserver(() => this.resize());
-    this.resizeObserver.observe(canvas);
-    const needsObserver = (opts.pauseWhenHidden || opts.playOnEnter) && typeof IntersectionObserver !== "undefined";
-    if (needsObserver) {
-      this.intersectionObserver = new IntersectionObserver(([entry]) => {
-        if (!entry) return;
-        if (entry.isIntersecting) {
-          if (opts.playOnEnter && !this.hasEnteredViewport) {
-            this.hasEnteredViewport = true;
-            if (opts.autoplay ?? true) {
-              this.play();
-            }
-          } else if (this.wasPlayingBeforeHidden) {
-            this.wasPlayingBeforeHidden = false;
-            this.play();
-          }
-        } else {
-          if (this.playing && opts.pauseWhenHidden) {
-            this.wasPlayingBeforeHidden = true;
-            this.pause();
-          }
-        }
-      });
-      this.intersectionObserver.observe(canvas);
-    }
-    const shouldAutoplay = (opts.autoplay ?? true) && !opts.playOnEnter;
-    this.playing = shouldAutoplay;
-    canvas.addEventListener("webglcontextlost", this.onLost);
-    canvas.addEventListener("webglcontextrestored", this.onRestored);
-    canvas.addEventListener("pointerdown", this.onPointerDown);
-    canvas.addEventListener("pointermove", this.onPointerMove);
-    canvas.addEventListener("pointerenter", this.onPointerEnter);
-    canvas.addEventListener("pointerleave", this.onPointerLeave);
-    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();
-  }
-  /**
-   * Shows a `<video>` (or a canvas) in the image control `name` (the
-   * uniform's name, such as `uImage`) in place of its URL, frame by frame;
-   * `null` goes back to the URL. The preview follows the video even while
-   * the shader's own clock is paused, and the video plays, seeks and loops
-   * on its own: the renderer never controls it. A video from another site
-   * needs `crossOrigin = "anonymous"` and CORS, or `onImageError` hears why
-   * it shows black. The value stays as it is, so documents, presets and
-   * agents keep seeing the URL.
-   */
-  setLiveSource(name, source) {
-    if (source) this.live.set(name, source);
-    else this.live.delete(name);
-    this.textures?.setLive(name, source);
-    if (!this.playing) this.render();
-  }
-  /**
-   * Settles once the images the current controls show have loaded, and
-   * every live video has a frame. Rejects with an {@link ImageLoadError}
-   * when one cannot be (it shows black).
-   */
-  async ready() {
-    await Promise.all([
-      this.textures?.ready(imageUrls(this.controls, this.values)),
-      this.textures?.liveReady()
-    ]);
-  }
-  play() {
-    this.playing = true;
-    this.emit();
-  }
-  pause() {
-    this.playing = false;
-    this.emit();
-  }
-  /** Back to `iTime` 0 and frame 0. */
-  restart() {
-    this.time = 0;
-    this.pointer.clear();
-    this.frame = 0;
-    this.render();
-    this.emit();
-  }
-  /** Jumps to `time` seconds (not below 0) and draws it. */
-  seek(time) {
-    if (time < this.time) this.pointer.clear();
-    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.intersectionObserver?.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);
-    this.canvas.removeEventListener("pointerenter", this.onPointerEnter);
-    this.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-    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;
-    if (this.ownsCanvas) 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,
-        pointer: this.pointer.pointer(this.time),
-        clicks: this.pointer.clicksAt(this.time),
-        trail: this.pointer.trailAt(this.time)
-      },
-      this.textures ?? void 0
-    );
-  }
-  textureCache(gl) {
-    const cache = new TextureCache(gl, (_url, error) => {
-      if (error) this.onImageError?.(error);
-      else if (!this.playing) this.render();
-    });
-    for (const [name, source] of this.live) cache.setLive(name, source);
-    return cache;
-  }
-  /** 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;
-    } else if (this.textures?.liveChanged()) {
-      this.render();
-    }
-    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];
-    this.pointer.down(x, y, this.time);
-    if (!this.playing) this.render();
-  };
-  onPointerMove = (e) => {
-    const [x, y] = this.toPixels(e);
-    this.pointer.move(x, y, this.time);
-    if (this.mouse[2] <= 0 || e.buttons === 0) {
-      if (!this.playing) this.render();
-      return;
-    }
-    this.mouse = [x, y, this.mouse[2], this.mouse[3]];
-    if (!this.playing) this.render();
-  };
-  onPointerEnter = (e) => {
-    this.pointer.move(...this.toPixels(e), this.time);
-    this.pointer.hover(true, this.time);
-  };
-  onPointerLeave = () => {
-    this.pointer.hover(false, this.time);
-  };
-  onPointerUp = () => {
-    this.pointer.up(this.time);
-    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.alpha);
-    this.textures = this.gl && this.textureCache(this.gl);
-    this.setSource(this.source);
-    this.onContextLost?.(false);
-  };
-};
-
 // src/shader/thumbnails.ts
 var ThumbnailPool = class {
   renderWidth;
@@ -623,126 +265,6 @@ 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, Boolean(options.alpha));
-    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();
-  }
-  /**
-   * Draws a `<video>` (or a canvas) in the image control `name` instead of
-   * its URL, at the frame it is on when `render` runs; `null` goes back to
-   * the URL. See `ShaderRenderer.setLiveSource`.
-   */
-  setLiveSource(name, source) {
-    this.textures.setLive(name, source);
-  }
-  /**
-   * Settles once every image the controls show has loaded, and every live
-   * video has a frame. Rejects with an {@link ImageLoadError} when one
-   * cannot be.
-   */
-  async ready() {
-    await Promise.all([this.textures.ready(imageUrls(this.controls, this.values)), this.textures.liveReady()]);
-  }
-  /** 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],
-        pointer: options.pointer,
-        clicks: options.clicks && clicksUniform(options.clicks, time),
-        trail: options.trail && trailUniform(options.trail, time)
-      },
-      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) {
@@ -1229,6 +751,10 @@ function validateScene(scene) {
         say(shotNum, "Camera perspective is the lens distance as a multiple of the stage width, 0.3 or more (1.2 by default).");
       if (cam.motionBlur !== void 0 && !(typeof cam.motionBlur === "number" && cam.motionBlur >= 0 && cam.motionBlur <= 3))
         say(shotNum, "Camera motionBlur is 0 (none) to 3 (a whip); 1 is natural.");
+      if (cam.transition !== void 0 && !CAMERA_TRANSITIONS.includes(cam.transition))
+        say(shotNum, `Camera transition is one of ${CAMERA_TRANSITIONS.map((t) => `"${t}"`).join(", ")}; leave it out to move.`);
+      else if (idx === 0 && (cam.transition === "whip" || cam.transition === "zoom"))
+        say(shotNum, `The first shot has no framing to ${cam.transition} from, so its camera starts in place; move the transition to a later shot or leave it out.`);
     }
     if (shot.hold !== void 0 && shot.hold < 0) {
       say(shotNum, "Shot hold cannot be negative.");
@@ -1282,13 +808,13 @@ function planShots(scene, stage) {
     const steps = Math.round(entry.moveMs / CAMERA_STEP_MS);
     const move = Array.from({ length: Math.max(0, steps - 1) }, (_, i) => cameraAt(entry, (i + 1) * CAMERA_STEP_MS, stage));
     move.push(entry.to);
-    return { move, elements: entry.elements };
+    return { move, moveMs: entry.moveMs, elements: entry.elements };
   });
 }
 function standaloneSceneHtml(scene) {
   const stage = sceneStage(scene);
   const serializedScene = JSON.stringify(scene).replace(/</g, "\\u003c");
-  const serializedPlan = JSON.stringify({ stage, cameraMs: CAMERA_MS, shots: planShots(scene, stage) }).replace(/</g, "\\u003c");
+  const serializedPlan = JSON.stringify({ stage, shots: planShots(scene, stage) }).replace(/</g, "\\u003c");
   const title = scene.title || scene.name;
   return `<!DOCTYPE html>
 <html lang="en">
@@ -1550,8 +1076,8 @@ function standaloneSceneHtml(scene) {
 
     // The camera at time 'now': a step of the current shot's move, or where it settled.
     function cameraNow(now) {
-      const move = plan.shots[currentShotIdx].move;
-      const u = Math.min(1, (now - moveFrom) / plan.cameraMs);
+      const { move, moveMs } = plan.shots[currentShotIdx];
+      const u = moveMs > 0 ? Math.min(1, (now - moveFrom) / moveMs) : 1;
       return move[Math.min(move.length - 1, Math.floor(u * move.length))];
     }
 
@@ -1603,10 +1129,10 @@ function standaloneSceneHtml(scene) {
 
       // Playing moves on to the next shot once this one's move and hold are over.
       const shot = scene.shots[currentShotIdx];
-      if (isPlaying && now - shotStartTime > plan.cameraMs + (shot.hold ?? 800) && currentShotIdx < scene.shots.length - 1) {
+      if (isPlaying && now - shotStartTime > plan.shots[currentShotIdx].moveMs + (shot.hold ?? 800) && currentShotIdx < scene.shots.length - 1) {
         goTo(currentShotIdx + 1, true);
       }
-      if (isPlaying || now - moveFrom < plan.cameraMs) {
+      if (isPlaying || now - moveFrom < plan.shots[currentShotIdx].moveMs) {
         requestAnimationFrame(draw);
       }
     }
@@ -1615,7 +1141,7 @@ function standaloneSceneHtml(scene) {
     function goTo(idx, animate) {
       currentShotIdx = idx;
       shotStartTime = performance.now();
-      moveFrom = animate ? shotStartTime : shotStartTime - plan.cameraMs;
+      moveFrom = animate ? shotStartTime : shotStartTime - plan.shots[idx].moveMs;
       updateShotUI();
       requestAnimationFrame(draw);
     }
@@ -1625,7 +1151,7 @@ function standaloneSceneHtml(scene) {
       playBtn.textContent = isPlaying ? 'Pause' : 'Play';
       // The current shot counts as settled, so its hold runs from now.
       if (isPlaying) {
-        shotStartTime = performance.now() - plan.cameraMs;
+        shotStartTime = performance.now() - plan.shots[currentShotIdx].moveMs;
         requestAnimationFrame(draw);
       }
     });
@@ -1649,11 +1175,9 @@ function escapeHtml2(str) {
 }
 
 export {
-  ShaderRenderer,
   ThumbnailPool,
   sharedThumbnailPool,
   registerThumbnail,
-  ShaderFrames,
   recordGif,
   standaloneHtml,
   ALL_BLEND_MODES,
@@ -1662,4 +1186,4 @@ export {
   validateScene,
   standaloneSceneHtml
 };
-//# sourceMappingURL=chunk-NGKNI3QX.js.map
+//# sourceMappingURL=chunk-CK6EV37I.js.map