pixi-effects 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.13.0
+
+**Changed**
+
+- **The `Controller` plays a deck stop by stop.** For a movie with `stops`, the play button, Space and a click on the picture now play to the next stop and pause there (a second press while playing pauses; after the end, play starts again from the first page). `new Controller(movie, { pauseAtStops: false })` plays straight through as before; `movie.play()` itself still ignores stops. Scrubbing and the export resume use the same rule.
+- **The stop marks are easier to see**: a taller white mark with a dark outline on the seek bar, and a page start is taller still, with a dot on top.
+
+**Added**
+
+- **`pdf` on a stop** chooses which moment stands for a page in a PDF and in the page overview: `{ at: 4, pdf: true }` is the page's picture, `{ at: 5, pdf: false }` keeps the stop out (default: the page's last stop). With `which: 'stops'` a PDF leaves out the stops flagged `false`; a page whose stops are all `false` is left out of the PDF. `deck()` takes `stops: [1.2, { at: 3, pdf: true }]`, and `pictureStops()` is the helper behind it. `movie.stopImages({ pdf: true })` applies the same rule for your own PDFs.
+- **PDF in the player bar's download panel.** For a movie with stops the format list also offers PDF (pages) and PDF (every step); the quality choice becomes the JPEG quality, and the progress bar counts pages.
+
 ## 0.12.0
 
 **Added**

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.12.0`. The API may still change between minor versions (see [CHANGELOG](./CHANGELOG.md): `0.12.0` adds presentations (`stops`, `Presenter`, `deck()`, page overview, presenter view, PDF export) and audio-reactive visuals (`audioEnvelope()`, `react()`), `0.11.0` adds particles, motion blur, a shared loader and a much faster build for pieces with many layers, `0.10.0` adds seeded randomness, `wiggle` and `stagger`, null layers with `parent`, `animateText`, `followPath` and path morphing, and click-to-play in the player, `0.9.0` adds a poster time (`movie.init({ poster })`) and a guide site, `0.8.0` adds events and a theme for building your own player, `0.7.0` adds filters by name, the `pixi-effects-render` and `pixi-effects-view` commands and the timeline chart, `0.6.0` adds draw-on strokes (`trimEnd`) and text that changes over time, `0.5.0` adds synthesised sound effects (`sfx`, no files) and the `check` tool, `0.4.0` makes a mask share its layer's lifetime, `0.3.0` made keyframe `at` relative to the layer).
+> **Status**: experimental — current release `0.13.0`. The API may still change between minor versions (see [CHANGELOG](./CHANGELOG.md): `0.13.0` makes the player bar play a deck stop by stop (`pauseAtStops`), marks the stops more clearly, adds PDF to the download panel and a `pdf` flag on stops, `0.12.0` adds presentations (`stops`, `Presenter`, `deck()`, page overview, presenter view, PDF export) and audio-reactive visuals (`audioEnvelope()`, `react()`), `0.11.0` adds particles, motion blur, a shared loader and a much faster build for pieces with many layers, `0.10.0` adds seeded randomness, `wiggle` and `stagger`, null layers with `parent`, `animateText`, `followPath` and path morphing, and click-to-play in the player, `0.9.0` adds a poster time (`movie.init({ poster })`) and a guide site, `0.8.0` adds events and a theme for building your own player, `0.7.0` adds filters by name, the `pixi-effects-render` and `pixi-effects-view` commands and the timeline chart, `0.6.0` adds draw-on strokes (`trimEnd`) and text that changes over time, `0.5.0` adds synthesised sound effects (`sfx`, no files) and the `check` tool, `0.4.0` makes a mask share its layer's lifetime, `0.3.0` made keyframe `at` relative to the layer).
 
 **[Guide →](https://yjmtmtk.github.io/pixi-effects/guide/)** · **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 37 portfolio pieces written as plain data by AI models · **[Live demos →](https://yjmtmtk.github.io/pixi-effects/)** · 12 numbered examples + an in-browser playground.
 
@@ -42,8 +42,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
     "gsap":                    "https://esm.sh/gsap@3.12.5",
     "gsap/PixiPlugin":         "https://esm.sh/gsap@3.12.5/PixiPlugin",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/Controller.js"
   }
 }
 </script>
@@ -54,7 +54,7 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 </script>
 ```
 
-Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.12.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
+Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.13.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
 
 > **Using three.js?** Add two more entries (`three` and `pixi-effects/three`) to this importmap — see [Adding three.js](#adding-threejs-optional) below.
 >
@@ -70,7 +70,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
   "imports": {
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/three.js"
   }
 }
 </script>

package/ai/reference/cheatsheet.md

@@ -123,13 +123,13 @@ keyframes: followPath({ d: 'M 120 560 C 360 120 920 120 1160 560', duration: 4,
 ...particles({ count: 90, at: 2, emit: 0 /* 0 = burst; or seconds to spread births */, life: [1, 1.8], area: { x: 640, y: 330 /*, width, height */ }, angle: [0, 360] /* 0 right, 90 down, −90 up */,
                speed: [120, 420], gravity: 240, wind: 0, drag: 1.2, sway: { amp: 30, freq: 0.6 }, size: [2, 4.5], scale: [1, 0], fade: { in: 0.2, out: 0.6 },
                colors: ['#ffd166', '#ff6b9d'], shape: 'circle'|'rect'|'star', spin: [-200, 200], blendMode: 'add', seed: 1, name: 'burst', template: { type: 'image', asset } })   // seeded layers, paths baked into keyframes
-// a presentation: stops pause playback (`composition.stops: [2, { at: 5, page: 'Name', notes, advance }]`; a `page` stop begins a page, the others are steps); deck() lays pages out
+// a presentation: stops pause playback (`composition.stops: [2, { at: 5, page: 'Name', notes, advance, pdf }]`; `pdf: true` = the stop that pictures its page in a PDF, `pdf: false` = keep it out; default the page's last stop; a `page` stop begins a page, the others are steps); deck() lays pages out
 await movie.init({ canvas, width, height, frameRate, ...deck({ transition: { kind: 'slide', direction: 'left', duration: 0.6 },
   pages: [{ name: 'Hello', duration: 3.2 /* last stop + transition */, stops: [2.6] /* page-local */, notes, sequences: [ /* page-local time; a step = a layer starting at the previous stop */ ] }] }) });
 new Presenter(movie, { canvas });         // import { Presenter } from 'pixi-effects/presenter': → ↓ Space Enter click = next, ← = back, Home / End, number+Enter, B / W, F, ?
-movie.next() / prev() / goToStop(i) / goToPage(n) / movie.stops / movie.on('stop', …)   // Controller shows the stops on the seek bar + a Present button
+movie.next() / prev() / goToStop(i) / goToPage(n) / movie.stops / movie.on('stop', …)   // Controller: marks on the seek bar, play / Space / click = play to the next stop (pauseAtStops: false = straight through), a Present button, PDF in the download panel
 // Presenter extras: G = page overview (pictures), P = presenter view (a second window: live picture, next picture, notes, timer); start() makes the pictures before the audience sees anything
-await movie.stopImages({ as: 'dataURL', scale: 0.25 }) // [{ stop, page, image }] one per page (its last stop); { which: 'stops' } one per stop
+await movie.stopImages({ as: 'dataURL', scale: 0.25 }) // [{ stop, page, image }] one per page (its last stop); { which: 'stops' } one per stop (a page's picture honours `pdf` flags)
 await movie.exportPDF({ title })                       // Blob: a PDF page per page of the deck; CLI: pixi-effects-render talk.html -o talk.pdf (--all-stops)
 const env = await audioEnvelope('music.mp3', { frameRate: 30 })   // BEFORE movie.init: .series.level|bass|mid|treble (0–1 per frame), .beats [s], .bpm, .at(t, band); bands: { name: [Hz, Hz] }
 const env = bpmEnvelope(120, { duration: 12 })                     // no audio file: kick / snare / hats exactly on a tempo

package/ai/reference/pitfalls.md

@@ -78,7 +78,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
 51. **Arcs and rings are `shape: 'arc'`** (`radius`, `innerRadius`, `startAngle`, `endAngle`, degrees; 0° = 3 o'clock, clockwise). A progress ring is an arc with `startAngle: -90` and an animated `endAngle` (−90 → 270); `strokeCap: 'round'` rounds BOTH ends. Fill it for a pie slice, add `innerRadius` for a donut slice (a 120-polygon donut is no longer needed). Style (`strokeColor`, `strokeWidth`, `fillColor`) goes in `initial`; `strokeCap` / `strokeJoin` may be top level. *(fixed)*
 52. **Measure and split text with `measureText` / `splitText`, not by hand.** `splitText(text, style, { by, x, y, align })` returns each piece's x / y / width in the renderer's own font metrics (kerning kept; verified: a whole line vs the same line in per-letter layers differs only by anti-aliasing). The pieces are for text layers with the default top-left anchor and the same `style`. Load a web font before measuring (`await document.fonts.load('24px "Name"')`) or the fallback font's widths are used. Size a pill from `measureText(...).width + padding` instead of `0.58 × fontSize × length`. *(fixed)*
 53. **Draw-on and typewriter need no masks or per-letter layers.** `trimStart` / `trimEnd` (0–1 of the outline, animatable, every shape but `arc`) draw a stroke on: `trimEnd: 0` plus a keyframe `to: { trimEnd: 1 }`. The fill is not trimmed, so fade `fillAlpha` in afterwards; use `strokeCap: 'round'`. Text changes over time with `set: { text }` (swap at a time) and `visibleChars` (typewriter; left-align it so it grows rightward). A `to: { text }` cannot tween a string and warns. *(fixed)*
-54. **A deck page lasts until its last stop plus the transition.** `deck()` lays pages out one after another in page-local time and a `transition` overlaps them: a page shorter than its last stop (or shorter than the transition) loses its final step or flashes. A step is a layer that starts at the previous stop (`at: <previous stop>`), so the thing that appears on a press is fully visible when the movie stops. The transition option is `kind`, not `type`.
-55. **Presenter and Controller both listen to click and keys.** Use the `Presenter` for a talk (or let the Controller's Present button start one); do not run both on the same canvas yourself. Ordinary `play()` ignores stops; `movie.next()` plays to the next stop (a second press skips to it), `prev()` jumps back (nothing plays in reverse).
+54. **A deck page lasts until its last stop plus the transition.** `deck()` lays pages out one after another in page-local time and a `transition` overlaps them: a page shorter than its last stop (or shorter than the transition) loses its final step or flashes. A step is a layer that starts at the previous stop (`at: <previous stop>`), so the thing that appears on a press is fully visible when the movie stops. The transition option is `kind`, not `type`. If the last stop is mid-exit on paper, flag the stop you want in the PDF: `{ at, pdf: true }` (in `deck()`: `stops: [1.2, { at: 3, pdf: true }]`), and `pdf: false` keeps one out.
+55. **Presenter and Controller both listen to click and keys.** Use the `Presenter` for a talk (or let the Controller's Present button start one); do not run both on the same canvas yourself. `movie.play()` ignores stops, but the Controller's play button / Space / click-on-picture play to the next stop and pause (`pauseAtStops: false` plays through); `movie.next()` plays to the next stop (a second press skips to it), `prev()` jumps back (nothing plays in reverse).
 56. **Analyse audio before `init`, and give it the movie's frame rate.** `const env = await audioEnvelope('music.mp3', { frameRate })` is async; `react()` is pure and bakes the keyframes, so there is no per-frame callback. A custom `bands` list replaces the defaults (include `bass` if you want it; beats are picked there). No file yet: `bpmEnvelope(120, { duration })` is a stand-in with a kick on every beat. Offset the music with `audioOffset` when the audio layer does not start at 0.
 57. **Review a deck by its stops, not by its timeline.** `pixi-effects-check` writes `stops.png` (one picture per stop, in order) for a page with `stops`; the picture at a stop is what the audience reads while it waits.

package/ai/template.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>pixi-effects video</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/loader.css" />   <!-- the loader: HTML + CSS only, so it is on screen at once and keeps moving while the page builds the video -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/loader.css" />   <!-- the loader: HTML + CSS only, so it is on screen at once and keeps moving while the page builds the video -->
   <style>
     body { background: #0d1220; margin: 0; padding: 16px; }
     .stage { position: relative; width: min(960px, 100%); }                 /* the player and the loader both sit inside this box */
@@ -39,10 +39,10 @@
       "gsap":                    "https://esm.sh/gsap@3.12.5",
       "gsap/PixiPlugin":         "https://esm.sh/gsap@3.12.5/PixiPlugin",
       "mediabunny":              "https://esm.sh/mediabunny",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/Controller.js",
-      "pixi-effects/presenter":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/Presenter.js",
-      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.12.0/dist/three.js",
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/Controller.js",
+      "pixi-effects/presenter":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/Presenter.js",
+      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.13.0/dist/three.js",
       "pixi-filters":            "https://esm.sh/pixi-filters@6.1.5?external=pixi.js",
       "three":                   "https://esm.sh/three@0.178.0"
     }

package/ai/tools/check.mjs

@@ -280,7 +280,7 @@ export async function runCheck(opts, log = console.log) {
     report.files.sheet = shown(sheetFile);
 
     // a presentation (composition.stops): one picture of every stop, in order, so the pages and steps can be read at a glance
-    const stops = await cdp.eval(`(() => { const s = movie.stops || []; return s.length ? { count: s.length, pages: movie.pageCount, items: s.map(x => ({ at: Math.round(x.at * 100) / 100, frame: x.frame, page: x.page, pageStart: x.pageStart, notes: !!x.notes })) } : null; })()`).catch(() => null);
+    const stops = await cdp.eval(`(() => { const s = movie.stops || []; return s.length ? { count: s.length, pages: movie.pageCount, items: s.map(x => ({ at: Math.round(x.at * 100) / 100, frame: x.frame, page: x.page, pageStart: x.pageStart, notes: !!x.notes, pdf: x.pdf })) } : null; })()`).catch(() => null);
     if (stops) {
       report.stops = stops;
       const stopsSheet = await cdp.eval(`movie.contactSheet({ frames: movie.stops.map(s => s.frame), as: 'dataURL' })`).catch(() => null);

package/dist/{Base-W3sQzGPO.d.cts → Base-C6ZnJ9pD.d.cts}

@@ -1,5 +1,5 @@
 import { Filter, Container, RenderTexture, Matrix } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape, M as AudioDescriptor } from './types-mpqQO8MJ.cjs';
+import { S as SequenceSpec, C as CompositionShape, O as AudioDescriptor } from './types-CBSiUKau.cjs';
 import { gsap } from 'gsap';
 
 /**

package/dist/{Base-CYH9vPCH.d.ts → Base-CQOlB2VH.d.ts}

@@ -1,5 +1,5 @@
 import { Filter, Container, RenderTexture, Matrix } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape, M as AudioDescriptor } from './types-mpqQO8MJ.js';
+import { S as SequenceSpec, C as CompositionShape, O as AudioDescriptor } from './types-CBSiUKau.js';
 import { gsap } from 'gsap';
 
 /**

package/dist/Controller.cjs

@@ -49,7 +49,9 @@ var CONTROLLER_CSS = `
 }
 .mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: calc(var(--mc-track-height, 3px) + 2px); }
 .mc-stops { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; pointer-events: none; }
-.mc-stop-tick { position: absolute; top: 50%; width: 2px; height: calc(var(--mc-track-height, 3px) + 6px); transform: translate(-50%, -50%); background: var(--mc-fg, #fff); opacity: 0.6; border-radius: 1px; }
+.mc-stop-tick { position: absolute; top: 50%; width: 2px; height: calc(var(--mc-track-height, 3px) + 10px); transform: translate(-50%, -50%); background: var(--mc-fg, #fff); opacity: 0.9; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
+.mc-stop-page { width: 4px; height: calc(var(--mc-track-height, 3px) + 20px); opacity: 1; }
+.mc-stop-page::before { content: ''; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: var(--mc-fg, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
 .mc-progress-fill {
   position: absolute; left: 12px; top: 50%;
   height: var(--mc-track-height, 3px);
@@ -271,8 +273,10 @@ function pxToFraction(clientX, rect, inset = 0) {
   const ratio = (clientX - innerLeft) / innerWidth;
   return Math.min(Math.max(ratio, 0), 1);
 }
+var PDF_QUALITY = { "low": 0.6, "medium": 0.75, "high": 0.88, "very-high": 0.95 };
 function extensionForMimeType(mime) {
   const t = (mime || "").toLowerCase();
+  if (t.includes("pdf")) return "pdf";
   if (t.includes("webm")) return "webm";
   if (t.includes("quicktime") || t.includes("mov")) return "mov";
   if (t.includes("matroska") || t.includes("mkv")) return "mkv";
@@ -319,6 +323,7 @@ var Controller = class _Controller {
   wasPlayingBeforeScrub = false;
   activePointerId = null;
   isExporting = false;
+  exportPages = null;
   exportOverlay = null;
   exportFillEl = null;
   exportTextEl = null;
@@ -359,6 +364,7 @@ var Controller = class _Controller {
       enableKeyboardShortcuts: options.enableKeyboardShortcuts ?? true,
       clickToPlay: options.clickToPlay ?? true,
       present: options.present ?? true,
+      pauseAtStops: options.pauseAtStops ?? true,
       className: options.className ?? "movie-controller"
     };
     installStyles();
@@ -566,6 +572,7 @@ var Controller = class _Controller {
   refreshStops() {
     this.progressEl.querySelector(".mc-stops")?.remove();
     const stops = this.movie.stops ?? [];
+    this.refreshPdfChoices(stops.length > 0);
     if (stops.length === 0) {
       this.presentBtn?.remove();
       this.presentBtn = null;
@@ -576,7 +583,7 @@ var Controller = class _Controller {
     holder.className = "mc-stops";
     for (const s of stops) {
       const tick = document.createElement("div");
-      tick.className = "mc-stop-tick";
+      tick.className = s.pageStart ? "mc-stop-tick mc-stop-page" : "mc-stop-tick";
       tick.style.left = `${s.frame / total * 100}%`;
       if (s.page) tick.title = s.page;
       holder.appendChild(tick);
@@ -595,6 +602,41 @@ var Controller = class _Controller {
       this.presentBtn = btn;
     }
   }
+  /** A deck can be downloaded as a PDF: the format list gets "PDF" choices while the movie has stops. */
+  refreshPdfChoices(has) {
+    const select = this.settingsFormatSelect;
+    if (!select) return;
+    const present = !!select.querySelector('option[value="pdf"]');
+    if (has && !present) {
+      for (const [value, label] of [["pdf", "PDF (pages)"], ["pdf-steps", "PDF (every step)"]]) {
+        const o = document.createElement("option");
+        o.value = value;
+        o.textContent = label;
+        select.appendChild(o);
+      }
+    } else if (!has && present) {
+      select.querySelectorAll('option[value="pdf"], option[value="pdf-steps"]').forEach((o) => o.remove());
+      if (this.exportFormat === "pdf" || this.exportFormat === "pdf-steps") {
+        this.exportFormat = "mp4";
+        select.value = "mp4";
+      }
+    }
+  }
+  /** Play, or pause: a movie with stops plays to the next stop (and from the end, again from the start). */
+  async togglePlay() {
+    if (this.movie.isPlaying) {
+      this.movie.pause();
+      return;
+    }
+    await this.startPlaying();
+  }
+  /** Start playing: to the next stop for a movie with stops, to the end for any other (or with `pauseAtStops: false`). */
+  async startPlaying() {
+    if (this.options.pauseAtStops && (this.movie.stops?.length ?? 0) > 0) {
+      if (this.movie.currentFrame >= this.movie.totalFrames) await this.movie.gotoFrame(0, true);
+      await this.movie.next();
+    } else this.movie.play();
+  }
   /** Hand the page over to a Presenter (fullscreen, keys, click and swipe move through the stops); Escape gives it back. */
   async startPresenting() {
     if (this.presenter || this.destroyed) return;
@@ -611,11 +653,7 @@ var Controller = class _Controller {
   }
   bindPlayButton() {
     this.playBtn.addEventListener("click", () => {
-      if (this.movie.isPlaying) {
-        this.movie.pause();
-      } else {
-        this.movie.play();
-      }
+      void this.togglePlay();
     });
   }
   /** Clicking the picture plays / pauses (a tap on a phone too). */
@@ -632,8 +670,7 @@ var Controller = class _Controller {
         this.swallowCanvasClick = false;
         return;
       }
-      if (this.movie.isPlaying) this.movie.pause();
-      else this.movie.play();
+      void this.togglePlay();
     };
     canvas.addEventListener("pointerdown", this.canvasPointerDownHandler);
     canvas.addEventListener("click", this.canvasClickHandler);
@@ -789,7 +826,7 @@ var Controller = class _Controller {
       } catch {
       }
       if (this.wasPlayingBeforeScrub) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     };
@@ -838,7 +875,7 @@ var Controller = class _Controller {
     if (this.settingsFormatSelect) {
       this.settingsFormatSelect.addEventListener("change", (e) => {
         const v = e.target.value;
-        if (v === "mp4" || v === "webm" || v === "mov") this.exportFormat = v;
+        if (v === "mp4" || v === "webm" || v === "mov" || v === "pdf" || v === "pdf-steps") this.exportFormat = v;
       });
     }
     if (this.settingsQualitySelect) {
@@ -888,9 +925,19 @@ var Controller = class _Controller {
       this.movie.pause();
       this.refreshPlayIcon();
     }
-    this.showExportOverlay();
+    const pdf = this.exportFormat === "pdf" || this.exportFormat === "pdf-steps";
+    if (pdf) {
+      const stops = this.movie.stops ?? [];
+      const total = this.exportFormat === "pdf-steps" ? stops.filter((s) => s.pdf !== false).length : new Set(stops.map((s) => s.pageIndex)).size;
+      this.showExportOverlay("Exporting PDF...", `0% (0 / ${total} pages)`);
+      this.exportPages = { done: 0, total };
+    } else this.showExportOverlay();
     try {
-      const blob = await this.movie.render({
+      const blob = pdf ? await this.movie.exportPDF({
+        which: this.exportFormat === "pdf-steps" ? "stops" : "pages",
+        quality: PDF_QUALITY[this.exportQuality],
+        onImage: () => this.pdfPageDone()
+      }) : await this.movie.render({
         format: this.exportFormat,
         video: { bitrate: this.exportQuality },
         audio: { bitrate: this.exportQuality }
@@ -906,7 +953,7 @@ var Controller = class _Controller {
       this.hideExportOverlay();
       this.isExporting = false;
       if (wasPlaying) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     }
@@ -929,16 +976,27 @@ var Controller = class _Controller {
     const ts = `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
     return `movie-${ts}.${ext}`;
   }
-  showExportOverlay() {
+  /** One more PDF page is ready: move the bar. */
+  pdfPageDone() {
+    const p = this.exportPages;
+    if (!p || !this.exportFillEl || !this.exportTextEl) return;
+    p.done++;
+    const percent = p.total ? Math.min(100, Math.round(p.done / p.total * 100)) : 100;
+    this.exportFillEl.style.width = `${percent}%`;
+    this.exportTextEl.textContent = `${percent}% (${p.done} / ${p.total} pages)`;
+  }
+  showExportOverlay(title = "Exporting video...", text = "0% (0 / 0 frames)") {
     const overlay = document.createElement("div");
     overlay.className = "mc-export-overlay";
     overlay.innerHTML = `
       <div class="mc-export-panel">
-        <div class="mc-export-title">Exporting video...</div>
+        <div class="mc-export-title"></div>
         <div class="mc-export-track"><div class="mc-export-fill"></div></div>
-        <div class="mc-export-text">0% (0 / 0 frames)</div>
+        <div class="mc-export-text"></div>
       </div>
     `;
+    overlay.querySelector(".mc-export-title").textContent = title;
+    overlay.querySelector(".mc-export-text").textContent = text;
     this.root.appendChild(overlay);
     this.exportOverlay = overlay;
     this.exportFillEl = overlay.querySelector(".mc-export-fill");
@@ -951,6 +1009,7 @@ var Controller = class _Controller {
       this.exportFillEl = null;
       this.exportTextEl = null;
     }
+    this.exportPages = null;
   }
   bindVisibility() {
     const wrap = this.wrapper;