pixi-effects 0.43.0 → 0.44.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.44.0
+
+An AI can now click, hover and drag on a page it made and see what happened (`check --do`), a text layer can be picked by its letters, a rebuild keeps a `three` layer that did not change, and the Interactive page has three samples that click, hover and drag. Nothing breaks.
+
+- **New: `setVars` / `resize` / `rebuild` keep a `three` layer that did not change.** A rebuild built every layer again, so a text variable changed with a model in the scene loaded the model again (and made a renderer again). A named `three` layer with the same `setup` function, size and options now takes over the old layer's scene, renderer, texture and mirrored lights: `setup` runs once (15 ms → 1 ms for a rebuild with a box scene on WebGL, 7 → 1 on WebGPU; more with a model). The new tree is built while the old one plays, the new layer only borrows until the swap, so a rebuild that fails changes nothing and the old layer is disposed once. `reuse: false` opts out (a `setup` that reads `movie.vars`). `tests/films/three-reuse`, `tests/three/ThreeSequence.reuse.test.ts`.
+- **New: `check --do "click Lime; hover 640,360; drag card > 770,240; wait 1; key Space"` clicks, hovers, drags and presses keys on the page.** Real mouse and key events (the page's own handlers run), after everything else; a point is `x,y` in canvas pixels or a layer name. The report says per step what was under the pointer (`over Lime/shape#0`), which variables changed (`score 0→1`), whether the page warned, and keeps a picture of the canvas after each step in `steps/`. A layer that is not there, a point outside the picture, or a console warning during a step is a problem. Until now `check` could not click and every page had to be tested by hand over Chrome's protocol. `tests/tools/checkDo.test.ts` (a test page, `tests/films/check-do.html`).
+- **New: `movie.pick(x, y, { alpha })` looks at the letters of a text layer.** A text layer was its box (the gap between letters and the hole of an O were hits); with `alpha` it is its glyphs, including the pieces of a `spans` line and an outline. The letters are drawn again with PixiJS's own generator once per text and style. `tests/films/pick-text`: over 95 % agreement with the picture on three texts.
+- **New: three samples on the Interactive page that click, hover and drag.** `click.html` (pop the bubbles: `movie.hover` and `movie.pick` on layers of the film), `drop.html` (drag cards onto zones: `pick` and variables), `move3d.html` (drag three.js objects along a floor under the film's own light: `hit.three.grab('floor')`, `movie.redraw()`). Until now the page only showed variables. `tests/site/interactiveClicks.test.ts` drives each with real mouse events in Chrome.
+- **Docs: what a `pick` hit names.** The hit is the layer drawn at the point, not its group: the group is the first segment of `hit.path` (found while writing the samples: `hit.name` of a bubble made of a group and an unnamed circle was undefined).
+
 ## 0.43.0
 
 A `three` layer on WebGPU shares PixiJS's GPU device, and the tests stop depending on the gallery. Nothing breaks.

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.43.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.44.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
 
 **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 43 pieces written as plain data by AI models · **[For AI →](https://yjmtmtk.github.io/pixi-effects/for-ai.html)** · what an AI reads and runs · **[Playground →](https://yjmtmtk.github.io/pixi-effects/examples/playground.html)** in the browser.
 
@@ -49,8 +49,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
   "imports": {
     "pixi.js":                 "https://esm.sh/pixi.js@8.22.0?bundle-deps",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/Controller.js"
   }
 }
 </script>
@@ -61,7 +61,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.43.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.44.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.
 >
@@ -78,7 +78,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
     "three/addons/":           "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/three.js"
   }
 }
 </script>

package/ai/chat-template.html

@@ -59,9 +59,9 @@
     "imports": {
       "pixi.js":                 "https://cdn.jsdelivr.net/npm/pixi.js@8.22.0/dist/pixi.min.mjs",
       "mediabunny":              "https://cdn.jsdelivr.net/npm/mediabunny@1.61.3/+esm",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.43.0/dist/present.js"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/present.js"
     }
   }
   </script>

package/ai/tools/check.mjs

@@ -17,6 +17,9 @@
  *          --query "a=1&b=2" (added to the page address: for a page that reads it, such as one video of a batch) ·
  *          --crop X,Y,W,H (with --at: each picture is that part of the canvas, in canvas pixels, enlarged up to 4x so a small figure can be judged) ·
  *          --pick X,Y (with --at, repeatable: what is under that canvas point at each moment, the top layer first, and the object a three layer met: `movie.pick`) ·
+
+ *          --do "click Lime; hover 640,360; drag card > 770,240; wait 1; key Space" (real mouse and key events on the page, one step after the other, after everything else: what was under the pointer, which
+ *          variables changed, whether the page warned, one picture per step in steps/; a point is x,y in canvas pixels or a layer name (the middle of its box); repeatable) ·
  *          --onion A:B (one picture of the movement between A and B seconds, frames overlaid: onion.png) ·
  *          --seam (a movie made to loop: the last frame to the first is compared with the steps between ordinary neighbouring frames; a jump is a problem) ·
  *          --strict (text overlaps and stops where the picture is still changing fail the check; by default they are only listed for review) · --out DIR · --frames N (contact sheet tiles, default 12) · --formats mp4,webm (default mp4) · --no-export ·
@@ -82,10 +85,41 @@ export function findChrome(env = process.env, exists = fs.existsSync, platform =
   return candidates.find(c => c && exists(c)) ?? null;
 }
 
-export const USAGE = 'usage: node ai/tools/check.mjs <page.html> [--out DIR] [--frames N] [--formats mp4,webm] [--no-export] [--draft] [--at 3.5,title@end] [--crop X,Y,W,H] [--pick X,Y] [--onion 1:3] [--seam] [--query a=1&b=2] [--var name=value] [--size 1920x1080,1080x1920] [--timeout S] [--root DIR] [--chrome PATH] [--strict] [--help]\n(the header of ai/tools/check.mjs explains each option)';
+export const USAGE = 'usage: node ai/tools/check.mjs <page.html> [--out DIR] [--frames N] [--formats mp4,webm] [--no-export] [--draft] [--at 3.5,title@end] [--crop X,Y,W,H] [--pick X,Y] [--do "click Lime; drag card > 770,240"] [--onion 1:3] [--seam] [--query a=1&b=2] [--var name=value] [--size 1920x1080,1080x1920] [--timeout S] [--root DIR] [--chrome PATH] [--strict] [--help]\n(the header of ai/tools/check.mjs explains each option)';
+
+const DO_VERBS = ['click', 'hover', 'drag', 'wait', 'key'];
+const pointOf = (text) => { const m = text.trim().match(/^(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)$/); return m ? { x: Number(m[1]), y: Number(m[2]) } : { name: text.trim() }; };
+/**
+ * `--do` steps: "click 640,360; hover Lime; drag card > 770,240; wait 0.5; key Space" (`;` or a new line between steps). A point is `x,y` in canvas pixels or a layer name; the points of a
+ * drag are separated by `>` or by spaces (a name with spaces needs `>`). Returns [{ verb, points?, seconds?, key? }].
+ */
+export function parseDo(text) {
+  const steps = [];
+  for (const raw of String(text).split(/[;\n]/).map(s => s.trim()).filter(Boolean)) {
+    const [verb, ...rest] = raw.split(/\s+/);
+    const arg = rest.join(' ');
+    if (!DO_VERBS.includes(verb)) throw new Error(`--do: "${verb}" is not a step; the steps are ${DO_VERBS.join(', ')} (for example --do "click 640,360; drag card > 770,240")`);
+    if (verb === 'wait') {
+      if (!arg || !Number.isFinite(Number(arg)) || Number(arg) < 0) throw new Error(`--do: wait needs a number of seconds, got "${arg}"`);
+      steps.push({ verb, seconds: Number(arg) });
+    } else if (verb === 'key') {
+      if (!arg) throw new Error('--do: key needs a key name (Space, Enter, ArrowLeft, a, …)');
+      steps.push({ verb, key: arg });
+    } else if (verb === 'drag') {
+      const parts = arg.includes('>') ? arg.split('>') : arg.split(/\s+/);
+      const points = parts.map(p => p.trim()).filter(Boolean).map(pointOf);
+      if (points.length < 2) throw new Error(`--do: drag needs two points or more (from > to), got "${arg}"`);
+      steps.push({ verb, points });
+    } else {
+      if (!arg) throw new Error(`--do: ${verb} needs a point (x,y in canvas pixels, or a layer name), for example "${verb} 640,360"`);
+      steps.push({ verb, points: [pointOf(arg)] });
+    }
+  }
+  return steps;
+}
 
 export function parseArgs(argv) {
-  const o = { page: null, out: null, frames: 12, formats: ['mp4'], export: true, timeout: 240, root: null, chrome: null, strict: false, at: null, crop: null, draft: false, onion: null, seam: false, query: null, pick: [], vars: [], sizes: [], help: false };
+  const o = { page: null, out: null, frames: 12, formats: ['mp4'], export: true, timeout: 240, root: null, chrome: null, strict: false, at: null, crop: null, draft: false, onion: null, seam: false, query: null, pick: [], do: [], vars: [], sizes: [], help: false };
   const need = (i, name) => { if (i + 1 >= argv.length) throw new Error(`${name} needs a value`); return argv[i + 1]; };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
@@ -108,6 +142,7 @@ export function parseArgs(argv) {
       if (m.length !== 2 || !m.every(Number.isFinite)) throw new Error(`--pick must look like 640,360 (x, y in canvas pixels), got "${argv[i]}"`);
       o.pick.push({ x: m[0], y: m[1] });
     }
+    else if (a === '--do') o.do.push(...parseDo(need(i++, a)));
     else if (a === '--var') o.vars.push(parseVar(need(i++, a)));
     else if (a === '--size') o.sizes.push(...parseSizes(need(i++, a)));
     else if (a === '--seam') o.seam = true;
@@ -620,6 +655,15 @@ export async function runCheck(opts, log = console.log) {
       report.logs.push(...fresh);
       report.problems.push(`${fresh.length} more console warning(s) / error(s) while the page was built at the other size(s) — each says what to change`);
     }
+    // --do: real clicks, hovers, drags and keys on the page, last (they change what the page shows and remembers)
+    if (opts.do.length) {
+      report.steps = await runSteps(cdp, opts.do, outDir, { width: info.width, height: info.height }, consoleLines, report.logs);
+      report.files.steps = shown(path.join(outDir, 'steps'));
+      report.steps.forEach((st, i) => {
+        if (st.error) report.problems.push(`step ${i + 1} (${st.label}): ${st.error}`);
+        if (st.warnings?.length) report.problems.push(`step ${i + 1} (${st.label}): ${st.warnings.length} console warning(s) — ${st.warnings[0].slice(0, 200)}`);
+      });
+    }
     return finish(report, outDir, log);
   } finally {
     try { chromeProc?.kill(); } catch { /* already gone */ }
@@ -673,6 +717,85 @@ export function exportLine(ex) {
   return `  export    ${ex.format}${ex.draft ? ' (draft)' : ''} ok · ${kb(ex.bytes)}${rate} · ${v} · ${au}`;
 }
 
+const KEYS = { Space: [' ', 'Space'], Enter: ['Enter', 'Enter'], Escape: ['Escape', 'Escape'], Tab: ['Tab', 'Tab'], Backspace: ['Backspace', 'Backspace'], ArrowLeft: ['ArrowLeft', 'ArrowLeft'], ArrowRight: ['ArrowRight', 'ArrowRight'], ArrowUp: ['ArrowUp', 'ArrowUp'], ArrowDown: ['ArrowDown', 'ArrowDown'] };
+const keyEvent = (name) => KEYS[name] ? { key: KEYS[name][0], code: KEYS[name][1] } : { key: name, code: /^[a-z]$/i.test(name) ? `Key${name.toUpperCase()}` : /^\d$/.test(name) ? `Digit${name}` : name };
+
+/**
+ * `check --do`: the steps, run on the page with real mouse and key events (the page's own handlers run: nothing is simulated), one picture of the canvas after each, in `steps/`.
+ * Returns [{ verb, label, hits, vars, frame, playing, warnings, picture, error? }]: what was under the last point, the variables that changed ([before, after]), what the page warned.
+ */
+export async function runSteps(cdp, steps, outDir, size, consoleLines, seenLogs) {
+  const dir = path.join(outDir, 'steps');
+  fs.mkdirSync(dir, { recursive: true });
+  for (const old of fs.readdirSync(dir)) if (old.endsWith('.png')) fs.rmSync(path.join(dir, old));
+  await cdp.send('Emulation.setDeviceMetricsOverride', { width: 1400, height: 1000, deviceScaleFactor: 1, mobile: false });
+  await cdp.eval(`movie.app.canvas.scrollIntoView({ block: 'center', inline: 'center' })`);
+  await sleep(150);
+  const seen = new Set(seenLogs);
+  const results = [];
+  const pageLogs = async () => [...new Set([...(await cdp.eval('window.__logs || []').catch(() => [])), ...consoleLines])];
+  const geometry = () => cdp.eval(`(() => { const r = movie.app.canvas.getBoundingClientRect(); return { left: r.left, top: r.top, w: r.width, h: r.height }; })()`);
+  const mouse = async (g, p, type, extra = {}) => cdp.send('Input.dispatchMouseEvent', { type, x: g.left + p.x * g.w / size.width, y: g.top + p.y * g.h / size.height, ...extra });
+  let n = 0;
+  for (const step of steps) {
+    n++;
+    const res = { verb: step.verb, label: step.verb + (step.points ? ' ' + step.points.map(pt => pt.name ?? `${pt.x},${pt.y}`).join(' > ') : '') };   // (a name that is found gets its place added below)
+    const before = await cdp.eval('JSON.parse(JSON.stringify(movie.vars || {}))').catch(() => ({}));
+    let last = null;
+    try {
+      if (step.verb === 'wait') { res.label = `wait ${step.seconds}`; await sleep(step.seconds * 1000); }
+      else if (step.verb === 'key') {
+        res.label = `key ${step.key}`;
+        const e = keyEvent(step.key);
+        await cdp.send('Input.dispatchKeyEvent', { type: 'keyDown', ...e, text: e.key.length === 1 ? e.key : undefined });
+        await cdp.send('Input.dispatchKeyEvent', { type: 'keyUp', ...e });
+      } else {
+        const points = [];
+        for (const pt of step.points) {
+          if (pt.name === undefined) { points.push({ ...pt }); continue; }
+          const box = await cdp.eval(`(async () => { const r = (await movie.inspect(movie.currentFrame)).layers.find(l => l.name === ${JSON.stringify(pt.name)} || l.path === ${JSON.stringify(pt.name)}); return r && r.bounds ? { x: r.bounds.x + r.bounds.width / 2, y: r.bounds.y + r.bounds.height / 2 } : null; })()`);
+          if (!box) throw new Error(`no layer named "${pt.name}" at this moment (it may not be alive yet: put a wait before, or give x,y)`);
+          points.push({ x: Math.round(box.x), y: Math.round(box.y), name: pt.name });
+        }
+        res.label = `${step.verb} ${points.map(pt => pt.name ? `${pt.name} (${pt.x}, ${pt.y})` : `${pt.x},${pt.y}`).join(' > ')}`;
+        res.points = points.map(({ x, y }) => ({ x, y }));
+        for (const pt of points) if (!(pt.x >= 0 && pt.x <= size.width && pt.y >= 0 && pt.y <= size.height)) throw new Error(`the point ${pt.x},${pt.y} is outside the picture (0..${size.width} × 0..${size.height})`);
+        const g = await geometry();
+        last = points[points.length - 1];
+        if (step.verb === 'hover') await mouse(g, points[0], 'mouseMoved');
+        else if (step.verb === 'click') {
+          await mouse(g, points[0], 'mouseMoved'); await sleep(60);
+          await mouse(g, points[0], 'mousePressed', { button: 'left', clickCount: 1 }); await sleep(40);
+          await mouse(g, points[0], 'mouseReleased', { button: 'left', clickCount: 1 });
+        } else {                                                           // drag: press at the first point, move through the others in small steps, release at the last
+          await mouse(g, points[0], 'mouseMoved'); await sleep(60);
+          await mouse(g, points[0], 'mousePressed', { button: 'left', clickCount: 1, buttons: 1 }); await sleep(60);
+          for (let i = 1; i < points.length; i++) for (let k = 1; k <= 8; k++) {
+            const a = points[i - 1], b = points[i];
+            await mouse(g, { x: a.x + (b.x - a.x) * k / 8, y: a.y + (b.y - a.y) * k / 8 }, 'mouseMoved', { buttons: 1 }); await sleep(25);
+          }
+          await mouse(g, last, 'mouseReleased', { button: 'left', clickCount: 1 });
+        }
+      }
+    } catch (e) { res.error = e.message; }
+    await sleep(300);                                                       // the page's handlers and rebuilds settle
+    const after = await cdp.eval('JSON.parse(JSON.stringify(movie.vars || {}))').catch(() => ({}));
+    res.vars = Object.fromEntries(Object.keys({ ...before, ...after }).filter(k => JSON.stringify(before[k]) !== JSON.stringify(after[k])).map(k => [k, [before[k], after[k]]]));
+    if (last) res.hits = await cdp.eval(`movie.pickAll(${last.x}, ${last.y}).map(h => h.kind === 'three' ? h.path + ' (three: ' + (h.three && h.three.object || '?') + ')' : h.path)`).catch(() => []);
+    res.frame = await cdp.eval('movie.currentFrame').catch(() => null);
+    res.playing = await cdp.eval('!!movie.isPlaying').catch(() => null);
+    const now = await pageLogs();
+    res.warnings = now.filter(l => !seen.has(l));
+    for (const l of res.warnings) seen.add(l);
+    const g = await geometry();
+    const shot = await cdp.send('Page.captureScreenshot', { format: 'png', clip: { x: g.left, y: g.top, width: g.w, height: g.h, scale: 1 } }).catch(() => null);
+    if (shot?.data) { const file = path.join(dir, `${String(n).padStart(2, '0')}-${step.verb}.png`); fs.writeFileSync(file, Buffer.from(shot.data, 'base64')); res.picture = shown(file); }
+    results.push(res);
+  }
+  return results;
+}
+
+const fmtVar = (v) => typeof v === 'string' ? JSON.stringify(v.length > 24 ? v.slice(0, 21) + '…' : v) : String(v);
 function finish(report, outDir, log) {
   const reportFile = path.join(outDir, 'report.json');
   report.files.report = shown(reportFile);
@@ -727,6 +850,12 @@ function finish(report, outDir, log) {
     const shown = Object.entries(w.light).sort((a, b) => b[1] - a[1]).slice(0, 8).map(([k, v]) => `${k} ${v}`).join(', ');   // the most lit first
     L.push(`  light     ${w.label} — ${shown}${Object.keys(w.light).length > 8 ? ', …' : ''} (the most lit threeD layers first: 1 = as bright as with no light, 0 = black; the number is the layer's middle, not what you can see)`);
   }
+  for (const [i, st] of (report.steps ?? []).entries()) {
+    const vars = Object.entries(st.vars ?? {});
+    const changed = vars.length ? vars.slice(0, 6).map(([k, [a, b]]) => `${k} ${fmtVar(a)}→${fmtVar(b)}`).join(', ') + (vars.length > 6 ? `, … (${vars.length - 6} more)` : '') : 'no variable changed';
+    const over = st.hits ? ` — over ${st.hits.length ? st.hits.join(', ') : 'nothing'}` : '';
+    L.push(`  do        ${i + 1} ${st.label}${over} · ${st.error ? 'NOT RUN: ' + st.error : changed}${st.warnings?.length ? ` · ${st.warnings.length} warning(s)` : ''}${st.picture ? '' : ''}`);
+  }
   if (report.stops) {
     const s = report.stops;
     L.push(`  stops     ${s.count} stop(s) on ${s.pages} page(s) — stops.png shows each one in order; the picture at a stop is what the audience sees while it waits`)

package/dist/Controller.d.cts

@@ -1,7 +1,7 @@
-import { M as Movie } from './Movie-BdUm2Mc9.cjs';
+import { M as Movie } from './Movie-B3VOAgwc.cjs';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.cjs';
-import './types-DiNHtdrS.cjs';
+import './types-C5xo0fzb.cjs';
 
 /**
  * The look of the bar. Each key sets a CSS custom property on the bar (so you can also set `--mc-accent` … in your own CSS, on the

package/dist/Controller.d.ts

@@ -1,7 +1,7 @@
-import { M as Movie } from './Movie-B_qQIYV6.js';
+import { M as Movie } from './Movie-CQCVUqRs.js';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.js';
-import './types-DiNHtdrS.js';
+import './types-C5xo0fzb.js';
 
 /**
  * The look of the bar. Each key sets a CSS custom property on the bar (so you can also set `--mc-accent` … in your own CSS, on the

package/dist/{Movie-BdUm2Mc9.d.cts → Movie-B3VOAgwc.d.cts}

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.cjs';
-import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DiNHtdrS.cjs';
+import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-C5xo0fzb.cjs';
 
 type EaseFn = (p: number) => number;
 
@@ -275,8 +275,8 @@ interface PickHit {
 }
 interface PickOptions {
     /**
-     * Look at the picture, not the box: a pixel of an image, a video or a `canvas` layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
-     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, text and `shader` layers by their box; a picture that cannot be read (from another origin) stays a hit.
+     * Look at the picture, not the box: a pixel of an image, a video, a `canvas` layer or the letters of a text layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
+     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, a `shader` layer by its box (and text by its box too unless `alpha` is given); a picture that cannot be read (from another origin) stays a hit.
      */
     alpha?: number;
     /** Only these layers can be hit (by `name` or by `path`; a group's name stands for everything in it). */

package/dist/{Movie-B_qQIYV6.d.ts → Movie-CQCVUqRs.d.ts}

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.js';
-import { b as Stop, A as AssetSpec, a as CompositionSpec } from './types-DiNHtdrS.js';
+import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-C5xo0fzb.js';
 
 type EaseFn = (p: number) => number;
 
@@ -275,8 +275,8 @@ interface PickHit {
 }
 interface PickOptions {
     /**
-     * Look at the picture, not the box: a pixel of an image, a video or a `canvas` layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
-     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, text and `shader` layers by their box; a picture that cannot be read (from another origin) stays a hit.
+     * Look at the picture, not the box: a pixel of an image, a video, a `canvas` layer or the letters of a text layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
+     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, a `shader` layer by its box (and text by its box too unless `alpha` is given); a picture that cannot be read (from another origin) stays a hit.
      */
     alpha?: number;
     /** Only these layers can be hit (by `name` or by `path`; a group's name stands for everything in it). */

package/dist/{chunk-6N5ZBUOU.js → chunk-4MBTYREC.js}

@@ -4,7 +4,7 @@ import { analyzeAudio, fft, resampleThrough, playSpan } from './chunk-UHNSL2KJ.j
 import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-VNP7QCJE.js';
 import { describeLayer } from './chunk-32MMNDDN.js';
 import { warnUnknownOptions, suggestName } from './chunk-BXOCEZ4U.js';
-import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert } from 'pixi.js';
+import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert, Text, CanvasTextGenerator, CanvasPool } from 'pixi.js';
 import { Output, BufferTarget, CanvasSource, AudioBufferSource, Input, ALL_FORMATS, BlobSource, WavOutputFormat, Conversion, VideoSampleSink, OggOutputFormat, QUALITY_VERY_HIGH, QUALITY_HIGH, QUALITY_MEDIUM, QUALITY_LOW, QUALITY_VERY_LOW, MkvOutputFormat, WebMOutputFormat, MovOutputFormat, Mp4OutputFormat, canEncodeVideo, getFirstEncodableAudioCodec } from 'mediabunny';
 
 // src/core/gpuShare.ts
@@ -188,7 +188,7 @@ function inspectFonts(root) {
   });
   const missing = [];
   const used = /* @__PURE__ */ new Set();
-  const walk2 = (seq, index) => {
+  const walk3 = (seq, index) => {
     const spec = seq.spec;
     if (spec.type === "text") {
       const raw = spec.style?.fontFamily;
@@ -197,10 +197,10 @@ function inspectFonts(root) {
       for (const f of list) used.add(f.replace(/^["']|["']$/g, "").toLowerCase());
       if (list.length && !list.some(fontAvailable) && !list.some((f) => failed.has(f.replace(/^["']|["']$/g, "")))) missing.push({ layer: spec.name ?? `text#${index}`, family: family2 });
     }
-    if (seq.maskSequence) walk2(seq.maskSequence, index);
-    (seq._children ?? []).forEach((child, i) => walk2(child, i));
+    if (seq.maskSequence) walk3(seq.maskSequence, index);
+    (seq._children ?? []).forEach((child, i) => walk3(child, i));
   };
-  walk2(root, 0);
+  walk3(root, 0);
   const all = [...failed];
   return { missing, failed: all.filter((f) => used.has(f.toLowerCase())), failedUnused: all.filter((f) => !used.has(f.toLowerCase())) };
 }
@@ -1526,16 +1526,16 @@ function canvasReport(root) {
       const problem = threw.length ? `${name} could not draw at ${threw.map((t) => `${t} s`).join(", ")} (its ${kind === "three" ? "update or render threw" : "draw threw"}, or the layer failed to build): ${kind === "three" ? "the warning above says why" : "it shows a magenta checkerboard there; the warning above says why"}, so the layer cannot be called deterministic` : differs.length ? `${name} does not draw the same picture for the same time (checked at ${differs.map(describeDiff).join(", ")}; drawn in two orders after one draw that was thrown away): ` + (kind === "three" ? "usually its update uses Math.random, Date.now, a clock, or state that builds up from call to call: a mixer advanced with mixer.update(dt) is one (pose a clip with mixer.setTime(t), or threeGltf(url).pose(t)), and so is a value moved by the time since the last call. A skinned model of your own (not loaded by threeGltf) that moves and casts a shadow does it too: three culls a skinned mesh by a bounding sphere that does not follow it, so set mesh.frustumCulled = false. Set every object from t, so playback, a seek and an export agree" : "usually its draw uses Math.random, Date.now or state that outlives the call (a value it keeps from the last call), so playback, a seek and an export would not agree: use info.random() (seeded) and derive everything from t. If it uses none of these, look at the canvases it draws from: make sprites and masks with info.canvas(w, h) (not document.createElement) and draw them into the picture before the strokes that depend on them") : "";
       out.push({ name: seq.spec.name ?? name, moments, drawMs, ok: !differs.length && !threw.length, problem, kind });
     }
-    if (seq instanceof CompositionSequence) walk2(seq);
+    if (seq instanceof CompositionSequence) walk3(seq);
   };
-  const walk2 = (comp) => {
+  const walk3 = (comp) => {
     for (const { seq } of comp.layers()) {
       visit(seq);
       const mask = seq.maskSequence;
       if (mask) visit(mask);
     }
   };
-  walk2(root);
+  walk3(root);
   return out;
 }
 var canvasProblems = (root) => canvasReport(root).filter((r) => !r.ok).map((r) => r.problem);
@@ -1602,7 +1602,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
   const specs = /* @__PURE__ */ new Map();
   const chains = /* @__PURE__ */ new Map();
   const chainAlpha = /* @__PURE__ */ new Map();
-  const walk2 = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMotion = NO_MOTION, parentZero = false, parentAlpha = 1) => {
+  const walk3 = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMotion = NO_MOTION, parentZero = false, parentAlpha = 1) => {
     const blending = /* @__PURE__ */ new Set();
     const now = comp.childTime(time);
     const cameraMotion = (comp.spec.sequences ?? []).filter((q) => q.type === "camera").reduce((m, q) => either(m, motionOf(q.keyframes, now - comp.childBase - (q.at ?? 0), q.duration ?? comp.duration ?? Infinity, () => true)), NO_MOTION);
@@ -1668,10 +1668,10 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       const group = parentScene ?? (name !== void 0 && blending.has(name) ? name : void 0);
       if (group) scene.set(info, group);
       if (zero || seq.showsNothingYet) scaledToNothing.add(info);
-      if (seq instanceof CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, motion, zero, parentAlpha * alpha);
+      if (seq instanceof CompositionSequence) walk3(seq, prefix + label + "/", insideThreeD || threeD, visible, group, motion, zero, parentAlpha * alpha);
     });
   };
-  walk2(root, "", false, true);
+  walk3(root, "", false, true);
   const issues = [];
   const texts = layers.filter((l) => l.type === "text" && l.visible && l.alpha >= FAINT && l.bounds);
   for (const l of texts) {
@@ -1798,7 +1798,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
     return true;
   };
   const inside = (b, p) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
-  const walk2 = (comp, prefix, parentVisible) => {
+  const walk3 = (comp, prefix, parentVisible) => {
     comp.layers().forEach(({ seq, display, threeD, carriers, quad }, i) => {
       const d = display;
       if (!d) return;
@@ -1811,7 +1811,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
       if (!visible) return;
       const isComposition = seq instanceof CompositionSequence;
       if (isComposition && !threeD) {
-        walk2(seq, path + "/", visible);
+        walk3(seq, path + "/", visible);
         return;
       }
       if (!wanted(name, path)) return;
@@ -1839,7 +1839,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
             hit = { name, path, type: seq.spec.type, kind: "three", point, three };
           } else if (three === void 0 && (typeof d.containsPoint !== "function" || d.containsPoint(local))) {
             let opaque = true;
-            const tex = opts.alpha !== void 0 && seq.spec.type !== "shader" ? d.texture : void 0;
+            const tex = opts.alpha !== void 0 && seq.spec.type !== "shader" ? d.texture ?? deps.textureOf?.(d) : void 0;
             if (tex?.source?.resource) {
               const res = tex.source.resolution ?? 1;
               const a = readAlpha(tex.source.resource, (tex.frame.x + (local.x - lb.x) / lb.width * tex.frame.width) * res, (tex.frame.y + (local.y - lb.y) / lb.height * tex.frame.height) * res);
@@ -1861,9 +1861,56 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
       found.push({ hit, order: orderOf(d) });
     });
   };
-  walk2(root, "", true);
+  walk3(root, "", true);
   return found.sort((a, b) => above(a.order, b.order)).map((f) => f.hit);
 }
+var cache = /* @__PURE__ */ new WeakMap();
+function textPictureOf(display) {
+  if (!(display instanceof Text)) return null;
+  const style = display.style;
+  const key = `${display.text}|${display.resolution}|${style.styleKey ?? ""}`;
+  const kept = cache.get(display);
+  if (kept?.key === key) return kept.picture;
+  try {
+    const { canvasAndContext, frame } = CanvasTextGenerator.getCanvasAndContext({ text: display.text, style: display.style, resolution: display.resolution });
+    const copy = document.createElement("canvas");
+    copy.width = canvasAndContext.canvas.width;
+    copy.height = canvasAndContext.canvas.height;
+    copy.getContext("2d").drawImage(canvasAndContext.canvas, 0, 0);
+    CanvasPool.returnCanvasAndContext(canvasAndContext);
+    const picture = { frame: { x: frame.x, y: frame.y, width: frame.width, height: frame.height }, source: { resolution: display.resolution, resource: copy } };
+    cache.set(display, { key, picture });
+    return picture;
+  } catch {
+    return null;
+  }
+}
+
+// src/core/reuse.ts
+var lendable = (s) => typeof s.reuseKey === "function";
+var borrower = (s) => typeof s.commitReuse === "function";
+function walk(root, visit) {
+  for (const { seq } of root.layers()) {
+    visit(seq);
+    const mask = seq.maskSequence;
+    if (mask) visit(mask);
+    if (seq instanceof CompositionSequence) walk(seq, visit);
+  }
+}
+function reusePoolOf(old) {
+  const free = /* @__PURE__ */ new Map();
+  if (old) walk(old, (seq) => {
+    if (!lendable(seq)) return;
+    const key = seq.reuseKey();
+    if (key !== null) free.set(key, [...free.get(key) ?? [], seq]);
+  });
+  return { claim: (key) => free.get(key)?.shift() ?? null };
+}
+function commitReuse(root) {
+  walk(root, (seq) => {
+    if (borrower(seq)) seq.commitReuse();
+  });
+}
 
 // src/core/hover.ts
 var keyOf = (h) => h ? `${h.path}${h.three ? `#${h.three.object}` : ""}` : null;
@@ -1957,7 +2004,7 @@ function detailOf(seq) {
   if (s.music && typeof s.music === "object") return "music";
   return void 0;
 }
-function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, local) {
+function walk2(comp, parentStart, parentEnd, depth, prefix, rows, transitions, local) {
   const entries = [];
   comp._children.forEach((seq, i) => {
     const name = seq.spec.name ?? `${seq.spec.type}#${i}`;
@@ -1970,7 +2017,7 @@ function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, lo
     const isComp = seq instanceof CompositionSequence;
     if (isComp) {
       const label = seq.remapLabel();
-      walk(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
+      walk2(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
     }
     entries.push({ row, inner, groupable: !isComp });
   });
@@ -2018,7 +2065,7 @@ function collectTimeline(root, duration) {
   const rows = [];
   const transitions = [];
   const label = root.remapLabel();
-  walk(root, 0, label ? root.contentSpan : duration, 0, "", rows, transitions, label ? `movie ${label}` : void 0);
+  walk2(root, 0, label ? root.contentSpan : duration, 0, "", rows, transitions, label ? `movie ${label}` : void 0);
   return { duration, rows, transitions };
 }
 var COLORS = {
@@ -2166,28 +2213,28 @@ function substitute(s, vars) {
 }
 function applyVars(spec, vars) {
   if (Object.keys(vars).length === 0) return spec;
-  const walk2 = (v) => {
+  const walk3 = (v) => {
     if (typeof v === "string") return substitute(v, vars);
-    if (Array.isArray(v)) return v.map(walk2);
+    if (Array.isArray(v)) return v.map(walk3);
     if (isPlain(v)) {
       const o = {};
-      for (const [k, x] of Object.entries(v)) o[k] = walk2(x);
+      for (const [k, x] of Object.entries(v)) o[k] = walk3(x);
       return o;
     }
     return v;
   };
-  return walk2(spec);
+  return walk3(spec);
 }
 var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function lintVars(spec, vars) {
   const declared = Object.keys(vars);
   const strings = [];
-  const walk2 = (v) => {
+  const walk3 = (v) => {
     if (typeof v === "string") strings.push(v);
-    else if (Array.isArray(v)) v.forEach(walk2);
-    else if (isPlain(v)) Object.values(v).forEach(walk2);
+    else if (Array.isArray(v)) v.forEach(walk3);
+    else if (isPlain(v)) Object.values(v).forEach(walk3);
   };
-  walk2(spec);
+  walk3(spec);
   const out = [];
   for (const name of declared) {
     const word = new RegExp(`(?<![A-Za-z0-9_.])${escapeRe(name)}(?![A-Za-z0-9_])`);
@@ -2741,7 +2788,7 @@ var Movie = class {
    * Build the composition tree for these variables and this size, off stage: `{name}` replaced, the root shape (with the numeric variables for the
    * expressions), transitions expanded, every layer built. Used by `init` and by `rebuild`.
    */
-  async _construct(composition, vars, width, height, lp, sizeWins = this._resized) {
+  async _construct(composition, vars, width, height, lp, sizeWins = this._resized, reuse) {
     const spec = applyVars(composition, vars);
     const gpu = sharedGpuOf(this.app?.renderer);
     const gpuField = gpu ? { gpu } : {};
@@ -2752,6 +2799,7 @@ var Movie = class {
       frameRate: this.frameRate,
       vars: numericVars(vars),
       ...gpuField,
+      ...reuse ? { reuse } : {},
       ...lp ? { onLayerBuilt: async () => {
         lp.tick();
         await lp.yieldIfDue();
@@ -2908,7 +2956,7 @@ var Movie = class {
       if (change.composition !== void 0) for (const w of lintVars(change.composition, vars)) console.warn(w);
       changed = changed || sizeChanged || change.composition !== void 0 || reason === "rebuild";
       if (!changed) return { reason, ms: 0, audio: "none", frame: this.currentFrame, playing: this.isPlaying, unchanged: true };
-      sequence = await this._construct(composition, vars, width, height, void 0, this._resized || sizeChanged);
+      sequence = await this._construct(composition, vars, width, height, void 0, this._resized || sizeChanged, reusePoolOf(this._rootSequence));
       alive();
       const timeline = createTimeline({ paused: true, defaults: { ease: "none" } });
       lengthen(timeline, this.duration);
@@ -2948,6 +2996,7 @@ var Movie = class {
         if (old?.target) root.removeChild(old.target);
         if (sequence.target) root.addChild(sequence.target);
         this._rootSequence = sequence;
+        commitReuse(sequence);
         this.timeline = timeline;
         this._timeFilters = collectTimeFilters(sequence);
         const unmute = muteBoundTextureWarning();
@@ -3222,7 +3271,8 @@ var Movie = class {
     warnUnknownOptions("movie.pick()", opts, ["only", "ignore", "alpha"]);
     this._requireReady("pick");
     if (!Number.isFinite(x) || !Number.isFinite(y)) throw new Error(`pixi-effects: movie.pick(x, y) needs two numbers (canvas pixels), got ${x}, ${y}. For a pointer event: movie.pick(...movie.canvasPoint(event))`);
-    return pickScene(this._rootSequence, x, y, opts);
+    const textureOf = textPictureOf;
+    return pickScene(this._rootSequence, x, y, opts, { textureOf });
   }
   /**
    * Which layer the pointer is over, as callbacks: `onEnter(hit)` when the layer (or, in a `three` layer, the object) under the pointer changes to another, `onLeave(hit)` for the one it
@@ -4743,5 +4793,5 @@ function withFade(spec, opts) {
 }
 
 export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, parseEase2 as parseEase, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade };
-//# sourceMappingURL=chunk-6N5ZBUOU.js.map
-//# sourceMappingURL=chunk-6N5ZBUOU.js.map
+//# sourceMappingURL=chunk-4MBTYREC.js.map
+//# sourceMappingURL=chunk-4MBTYREC.js.map