pixi-effects 0.44.0 → 0.46.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.46.0
+
+A live 2D layer can be the picture on a mesh of a `three` layer (a phone screen with an app running, a television, a label), clicks and hovers reach it, and a hidden source layer is no longer left culled. Nothing breaks.
+
+- **New: `threeLayerTexture(ctx, 'screen')` puts a live 2D layer on a mesh of a `three` layer.** A phone or laptop screen with an app running, a television, a billboard, a label on a bottle: a `composition` listed before the three layer is drawn into a texture just before the three layer draws, and `screen.material` shows it on any mesh (or one face of a box). The 2D layer keeps its timeline, keyframes and filters and is no longer drawn on the stage. Colours equal the 2D layer channel for channel, on both routes: when the three layer is on PixiJS's GPU device the texture is PixiJS's own GPU texture used through three's `ExternalTexture` (no copy, 0.3 ms a frame), otherwise the pixels are read back (1.6 ms at 480 x 270, 4 ms at 1280 x 720). A function of the time (seek, export, `check`), kept across `setVars`. `{ transparent: true }` lets the empty and half-transparent parts show what is behind the mesh (same colours as the 2D layer over the same background, on every route); a texture seen small or at a slant is filtered, not aliased (mipmaps made after every draw on the shared GPU, anisotropy 4: 1-pixel stripes at a quarter size went from black and white stripes, spread 127, to one even grey, spread 0). **A click or hover on the mesh reaches the 2D layer:** `movie.pick(x, y)` on a point of the mesh answers for the layers inside the screen at the point of its picture under the pointer (`screen/button`, `local` in the layer's own pixels, `via` naming the three layer and the mesh), above the mesh itself; `only` / `ignore`, `movie.hover` and a page's click handler work through it. Found while reading the PixiJS 3D beta (its `ContainerTexture`). `tests/films/three-layer-texture`, recipe `three-screen`, `docs/dsl.md` "A 2D layer on a mesh".
+## 0.45.0
+
+`check` stops waiting in silence when a page cannot load, says how the picture moves and ends, and the whole mix can be set to a loudness in one line. Nothing breaks.
+
+- **Changed: `check` / `inspectAudio()` call a mix quiet from -20 LUFS down (it was -24).** The note says `movie.init({ loudness: -16 })` is the one-line fix. In a second trial of Haiku films the note never fired for mixes at -20.8 and -22.8 LUFS, so nobody met the new option (the agent that read the -14 to -16 norm raised `volume` by hand, to -15.4). A mix of -20 to -24 is still 4 to 8 dB under what web video usually has; the note is advice, never a failure. `tests/core/inspectAudio.test.ts`.
+- **New: `check` says how the picture moves and how it ends, in numbers.** A new `motion` line: how much of the movie moves, when the last movement ends, the longest stretch that does not move, and (for review, never a failure) a last frame that is one plain colour (with the colour and since when), nothing on screen for the first second or more, and a hold of 3 s or a third of the movie (`the picture does not move from 3.1 s to 10.4 s`). `check` only said `OK — nothing to fix` for a picture that fades in, holds still for nine seconds and ends empty, so an agent stopped there (in a trial of ten Haiku films a blind judge named thin motion, long holds and empty endings as the common weakness; the new numbers name the same three things in eight of them). A presentation (stops) is not reviewed. Sampled at 10 % size, up to 90 frames: 2–3 s more. `tests/tools/checkMotion.test.ts`, `tests/films/check-motion`.
+- **New: `movie.init({ loudness: -16 })` brings the whole mix to a loudness.** One line instead of trial and error with `volume`: the finished mix gets one gain (up or down) to reach the target in LUFS (ITU-R BS.1770), the same for playback and export; the loudest sample is kept at -1 dBFS or under, so a mix with one loud click in a quiet bed stops short and `inspectAudio()` / `check` say how far it got and why. Off by default; `check`'s "the mix is quiet" note now names the option. Found in a trial of Haiku films: eight of nine with sound were -22 to -26 LUFS. `tests/core/loudnessTarget.test.ts`, `tests/films/audio-loudness`.
+- **Fixed: `check` no longer waits a silent minute when the page's module cannot be loaded.** A wrong path in the import map or a CDN that is down raises nothing in the page, so a page that never got ready ended with only `window.movie is missing` after 60 s, and an AI agent could not tell why (seen in a Haiku trial, five times in one earlier session, and in the claude.ai sandbox). `check` now listens to the browser's requests: after a failed script or page load it stops within seconds and names the address and how it failed (`…/no-such-module.js answered 404 (not found)`, or `could not be fetched (net::ERR_CONNECTION_RESET)`), says whether it is a file of the page's own server or another site, and tries once more, from the start, when it was another site's network failure or a 5xx (a hiccup of a CDN); the report says `retried` and lists `loadFailures`. 61 s → about 4 s for a 404, about 6 s with the retry. `tests/tools/checkLoadFailures.test.ts`.
+- **Changed: `pixi-effects new` says where the file is, in full** (`in the folder …: /full/path.html`), so an agent whose shell stands in another folder finds the file again (two of five agents in a trial edited or checked in the wrong folder).
+
 ## 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.

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **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.
+> **Status**: experimental — current release `0.46.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.44.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.44.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.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.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.
+Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.46.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.44.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.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.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"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.46.0/dist/present.js"
     }
   }
   </script>

package/ai/tools/check.mjs

@@ -87,6 +87,20 @@ export function findChrome(env = process.env, exists = fs.existsSync, platform =
 
 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)';
 
+/** One failed request, as a sentence the person (or the AI) can act on. `f` is { url, status? , error?, type? }. */
+export function describeLoadFailure(f) {
+  const how = f.status ? `answered ${f.status}${f.status === 404 ? ' (not found)' : ''}` : `could not be fetched (${f.error || 'a network error'})`;
+  return `${f.url} ${how}`;
+}
+/** A failure worth one more try: the network failed or the server had a bad moment (5xx, 429) on another site (a CDN); a missing file of the page's own server never gets better. */
+export function isTransientLoadFailure(f, ownOrigin) {
+  const foreign = !String(f.url).startsWith(ownOrigin);
+  if (f.error) return foreign;
+  return foreign && (f.status >= 500 || f.status === 429);
+}
+/** The kinds of request without which the page cannot start. */
+const CRITICAL_TYPES = new Set(['Script', 'Document', 'Stylesheet', 'Other', undefined]);
+
 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() }; };
 /**
@@ -419,13 +433,25 @@ export async function runCheck(opts, log = console.log) {
     const { proc, cdp } = await launchChrome(chrome, userDataDir);
     chromeProc = proc;
     const consoleLines = [];
+    // the requests that failed (a wrong path in the import map, a CDN that is down): a module that cannot be loaded raises nothing in the page, so without this the only sign is a page that never gets ready
+    const requests = new Map(), loadFailures = [];
+    let failureAt = 0;
     cdp.on(m => {
       if (m.method === 'Runtime.exceptionThrown') consoleLines.push(`uncaught: ${m.params.exceptionDetails.exception?.description || m.params.exceptionDetails.text}`);
+      else if (m.method === 'Network.requestWillBeSent') requests.set(m.params.requestId, { url: m.params.request.url, type: m.params.type });
+      else if (m.method === 'Network.responseReceived' && m.params.response.status >= 400) {
+        loadFailures.push({ url: m.params.response.url, status: m.params.response.status, type: m.params.type }); failureAt = Date.now();
+      } else if (m.method === 'Network.loadingFailed' && !m.params.canceled) {
+        const r = requests.get(m.params.requestId) ?? {};
+        if (r.url && !/favicon\.ico/.test(r.url)) { loadFailures.push({ url: r.url, error: m.params.errorText, type: m.params.type ?? r.type }); failureAt = Date.now(); }
+      }
     });
     await cdp.send('Runtime.enable');
     await cdp.send('Page.enable');
+    await cdp.send('Network.enable');
+    const pageUrl = `http://127.0.0.1:${port}/${path.relative(root, pagePath).split(path.sep).join('/')}${opts.query ? `?${opts.query}` : ''}`;
     const t0 = Date.now();
-    await cdp.send('Page.navigate', { url: `http://127.0.0.1:${port}/${path.relative(root, pagePath).split(path.sep).join('/')}${opts.query ? `?${opts.query}` : ''}` });
+    await cdp.send('Page.navigate', { url: pageUrl });
 
     // wait for the movie to be ready (or the page to say it failed)
     let info = null;
@@ -438,6 +464,16 @@ export async function runCheck(opts, log = console.log) {
         const failed = (info.logs || []).some(l => /^(init:|uncaught)/.test(l));
         if (ready || failed || consoleLines.length) break;
       } catch { /* the page is still loading */ }
+      // a script or the page itself could not be loaded and nothing has started since: no use in waiting out the minute
+      const critical = loadFailures.filter(f => CRITICAL_TYPES.has(f.type) && !/\.(png|jpe?g|gif|webp|svg|woff2?|ttf|otf|mp3|mp4|wav)(\?|$)/i.test(f.url));
+      if (critical.length && Date.now() - failureAt > 2500) {
+        if (critical.some(f => isTransientLoadFailure(f, `http://127.0.0.1:${port}`)) && !report.retried) {      // a hiccup of a CDN: once more, from the start
+          report.retried = true; loadFailures.length = 0; failureAt = 0; requests.clear();
+          await cdp.send('Page.navigate', { url: pageUrl });
+          continue;
+        }
+        break;
+      }
       if (Date.now() - t0 > 60000) break;
     }
     info = await cdp.eval(INFO).catch(() => info) ?? info;
@@ -445,8 +481,15 @@ export async function runCheck(opts, log = console.log) {
     report.readySeconds = Math.round((Date.now() - t0) / 100) / 10;
     report.loadStages = await cdp.eval('(window.movie && window.movie.loadStages) || null').catch(() => null);
     report.logs = [...new Set([...(info?.logs ?? []), ...consoleLines])];
+    if (loadFailures.length) report.loadFailures = loadFailures.map(({ url, status, error, type }) => ({ url, ...(status ? { status } : {}), ...(error ? { error } : {}), ...(type ? { type } : {}) }));
     if (!report.ready) {
-      report.problems.push(`the page did not become ready (window.__ready !== true within 60 s${info?.hasMovie ? '' : '; window.movie is missing'})`);
+      const lost = (report.loadFailures ?? []).filter(f => CRITICAL_TYPES.has(f.type));
+      if (lost.length) {
+        const own = lost.every(f => String(f.url).startsWith(`http://127.0.0.1:${port}`));
+        report.problems.push(`the page could not be loaded completely: ${lost.slice(0, 3).map(describeLoadFailure).join('; ')}${lost.length > 3 ? ` (+${lost.length - 3} more)` : ''}${report.retried ? ' — tried twice' : ''}. `
+          + (own ? `That is a file of the page's own server (the folder served is ${root}): check the path in the page's import map or its <script src>.` : 'That address is not served here (a CDN or another site): check it is spelled right and reachable, then run the check again.'));
+      }
+      report.problems.push(`the page did not become ready (window.__ready !== true${lost.length ? ', because of the failed load above' : ' within 60 s'}${info?.hasMovie ? '' : '; window.movie is missing'})`);
       return finish(report, outDir, log);
     }
     // --var / --size: the page is rebuilt once with what the command line gave (the first size; the others are looked at after the export)
@@ -546,6 +589,15 @@ export async function runCheck(opts, log = console.log) {
       }
     }
 
+    // the motion: how much of the movie moves, when the last movement ends, the longest hold, and how it starts and ends (numbers for review, never a failure)
+    {
+      const m = await cdp.eval(MOTION_SCRIPT).catch(() => null);
+      if (m && !m.error && m.samples) {
+        report.motion = motionVerdict(m.samples, { duration: m.duration, hasStops: m.hasStops });
+        report.motion.line = motionLine(report.motion, m.duration);
+      }
+    }
+
     // 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: new Set(s.map(x => x.pageIndex)).size, 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) {
@@ -691,6 +743,68 @@ export function seamVerdict({ seam, steps }) {
 }
 
 /** In the page: the seam (last frame against the first) and nine ordinary steps (the first and the last of them next to the seam), on pictures a quarter of the size. */
+const MOVING = 0.001;                                           // the mean change of a pixel between two samples above which the picture is moving (0..1)
+const PLAIN = 0.012;                                            // the spread of the picture below which it is one plain colour (0..1)
+const hex2 = v => Math.max(0, Math.min(255, Math.round(v * 255))).toString(16).padStart(2, '0');
+const sec = x => +x.toFixed(1);
+/**
+ * `check`'s motion line: from samples of the picture over the movie (`{ t, diff, spread, mean }`: how much it changed since the sample before, how much is on screen, its average colour) say how much of the
+ * movie moves, when the last movement ends, the longest stretch that does not move, and whether the first and last frames are one plain colour. These are for review, never a failure: a hold or a fade to black
+ * may be the point. A presentation (stops) is meant to stand still and is not reviewed.
+ */
+export function motionVerdict(samples, { duration, hasStops = false }) {
+  const steps = samples.slice(1);
+  const moving = steps.filter(s => s.diff > MOVING);
+  const out = { steps: steps.length, movingShare: steps.length ? moving.length / steps.length : 0, lastMotionAt: moving.length ? moving[moving.length - 1].t : 0, longestStill: null, first: { plain: false, visibleFrom: 0 }, last: { plain: false, plainFrom: null, color: null }, review: [], presentation: hasStops };
+  let run = null;
+  for (let i = 1; i < samples.length; i++) {
+    if (samples[i].diff <= MOVING) { if (!run) run = { from: samples[i - 1].t, i0: i - 1 }; run.to = samples[i].t; run.i1 = i; }
+    else run = null;
+    if (run && (!out.longestStill || run.to - run.from > out.longestStill.seconds)) out.longestStill = { from: sec(run.from), to: sec(run.to), seconds: sec(run.to - run.from), i0: run.i0, i1: run.i1 };
+  }
+  const visible = samples.find(s => s.spread >= PLAIN);
+  out.first = { plain: samples[0].spread < PLAIN, visibleFrom: visible ? visible.t : null };
+  const lastS = samples[samples.length - 1];
+  if (lastS && lastS.spread < PLAIN) {
+    let k = samples.length - 1;
+    while (k > 0 && samples[k - 1].spread < PLAIN) k--;
+    out.last = { plain: true, plainFrom: samples[k].t, color: `#${hex2(lastS.mean[0])}${hex2(lastS.mean[1])}${hex2(lastS.mean[2])}` };
+  }
+  if (!hasStops) {
+    if (out.last.plain && duration - out.last.plainFrom >= 0.4) out.review.push(`the last frame is one plain colour (${out.last.color}): nothing on screen from ${sec(out.last.plainFrom)} s to the end (on purpose for a fade to black or a held background; otherwise the ending is missing)`);
+    if (out.first.visibleFrom !== null && out.first.visibleFrom >= 1) out.review.push(`nothing is on screen until ${sec(out.first.visibleFrom)} s (the first second or more is a plain colour: a viewer may think the video is broken)`);
+    const still = out.longestStill;
+    if (still && still.seconds >= Math.max(3, duration * 0.35)) {
+      const emptyInside = samples.slice(still.i0, still.i1 + 1).every(s => s.spread < PLAIN);          // an empty picture is told by its first or last frame above, not twice
+      const inEmptyTail = out.last.plain && still.from >= out.last.plainFrom - 0.5;
+      if (!emptyInside && !inEmptyTail) out.review.push(`the picture does not move from ${still.from} s to ${still.to} s (${still.seconds} s of ${sec(duration)} s): a long hold; give it a slow drift, a second movement, or a reason to stay (a pause for the music or the reading is fine)`);
+    }
+  }
+  if (out.longestStill) { delete out.longestStill.i0; delete out.longestStill.i1; }
+  return out;
+}
+export function motionLine(v, duration) {
+  if (v.presentation) return '  motion    presentation: its stops are meant to stand still, so the motion is not reviewed';
+  const still = v.longestStill && v.longestStill.seconds >= 1 ? ` · longest still stretch ${v.longestStill.seconds} s (${v.longestStill.from}–${v.longestStill.to} s)` : '';
+  return `  motion    moves in ${Math.round(v.movingShare * 100)} % of the movie · last movement ends at ${sec(v.lastMotionAt)} s of ${sec(duration)} s${still}`;
+}
+const MOTION_SCRIPT = `(async () => {
+  const total = movie.totalFrames, fps = movie.frameRate;
+  if (total < 3) return { error: 'a movie of fewer than 3 frames has no motion to measure' };
+  const n = Math.min(90, Math.max(3, Math.round(movie.duration * 10) + 1));
+  const frames = [...new Set(Array.from({ length: n }, (_, i) => Math.round(i / (n - 1) * (total - 1))))];
+  const out = []; let prev = null;
+  for (const f of frames) {
+    const d = (await movie.snapshot(f, { as: 'imageData', scale: 0.1, motionBlur: false })).data;
+    let r = 0, g = 0, b = 0, l = 0, l2 = 0, diff = null; const px = d.length / 4;
+    for (let i = 0; i < d.length; i += 4) { r += d[i]; g += d[i + 1]; b += d[i + 2]; const y = (0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2]) / 255; l += y; l2 += y * y; }
+    if (prev) { let s = 0; for (let i = 0; i < d.length; i += 4) s += Math.abs(d[i] - prev[i]) + Math.abs(d[i + 1] - prev[i + 1]) + Math.abs(d[i + 2] - prev[i + 2]); diff = s / (px * 3 * 255); }
+    out.push({ t: f / fps, diff, spread: Math.sqrt(Math.max(0, l2 / px - (l / px) ** 2)), mean: [r / px / 255, g / px / 255, b / px / 255] });
+    prev = d;
+  }
+  return { samples: out, hasStops: !!(movie.stops && movie.stops.length), duration: movie.duration };
+})()`;
+
 const SEAM_SCRIPT = `(async () => {
   const total = movie.totalFrames;
   if (total < 4) return { error: 'a movie of fewer than 4 frames has no loop to measure' };
@@ -872,6 +986,7 @@ function finish(report, outDir, log) {
     for (const l of formatMusic(a?.sources)) L.push(l);
     for (const n of a?.notes ?? []) L.push(`  note      ${n}`);
   }
+  if (report.motion) { L.push(report.motion.line); for (const r of report.motion.review) L.push(`            - ${r}`); }
   if (report.seam) L.push(report.seam.line);
   for (const ex of report.exports ?? []) L.push(exportLine(ex));
   L.push(`  files     ${Object.values(report.files).join('  ')}`);

package/ai/tools/lookup.mjs

@@ -243,6 +243,7 @@ export function runLookup(cmd, args, { cwd = process.cwd(), root = PACKAGE_ROOT
       const f = shownPath(file, cwd);
       return ok([
         `created ${f} (the template: a ${size ? `${size.width}x${size.height}` : '1280x720'} page, ${duration ?? 6} s, that collects every warning in window.__logs)`,
+        `in the folder ${path.dirname(file)}: ${file}   (the next commands take this path; a file edited from another folder is another file)`,
         `next: npx pixi-effects view ${f}     look at it as you edit (it says when the file changed)`,
         `      npx pixi-effects check ${f}    review it: warnings, layout, sound, a contact sheet, a real export`,
         '      npx pixi-effects recipe        tested pieces to copy  ·  npx pixi-effects help <word>',

package/dist/Composition-NSY7A32Y.js

@@ -0,0 +1,7 @@
+export { CompositionSequence } from './chunk-FPV3NPYC.js';
+import './chunk-DM2OLQOJ.js';
+import './chunk-VNP7QCJE.js';
+import './chunk-32MMNDDN.js';
+import './chunk-BXOCEZ4U.js';
+//# sourceMappingURL=Composition-NSY7A32Y.js.map
+//# sourceMappingURL=Composition-NSY7A32Y.js.map

package/dist/{Composition-YGBQX3HZ.js.map → Composition-NSY7A32Y.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-YGBQX3HZ.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-NSY7A32Y.js"}

package/dist/Composition-PME3P5LP.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkDKCMJILW_cjs = require('./chunk-DKCMJILW.cjs');
+require('./chunk-LALEBV63.cjs');
+require('./chunk-JN7JHNZR.cjs');
+require('./chunk-3SAS3ZE5.cjs');
+require('./chunk-TWZNOUM7.cjs');
+
+
+
+Object.defineProperty(exports, "CompositionSequence", {
+  enumerable: true,
+  get: function () { return chunkDKCMJILW_cjs.CompositionSequence; }
+});
+//# sourceMappingURL=Composition-PME3P5LP.cjs.map
+//# sourceMappingURL=Composition-PME3P5LP.cjs.map

package/dist/{Composition-N6BOROJ2.cjs.map → Composition-PME3P5LP.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-N6BOROJ2.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-PME3P5LP.cjs"}

package/dist/Controller.d.cts

@@ -1,7 +1,7 @@
-import { M as Movie } from './Movie-B3VOAgwc.cjs';
+import { M as Movie } from './Movie-BqrAWN0g.cjs';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.cjs';
-import './types-C5xo0fzb.cjs';
+import './types-CTSrPvY3.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-CQCVUqRs.js';
+import { M as Movie } from './Movie-sV8nJr_f.js';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.js';
-import './types-C5xo0fzb.js';
+import './types-CTSrPvY3.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-B3VOAgwc.d.cts → Movie-BqrAWN0g.d.cts}

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.cjs';
-import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-C5xo0fzb.cjs';
+import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-CTSrPvY3.cjs';
 
 type EaseFn = (p: number) => number;
 
@@ -255,6 +255,11 @@ interface PickHit {
         x: number;
         y: number;
     };
+    /** The layer is shown on a mesh of a `three` layer (`threeLayerTexture`) and the point is on that mesh: the layer (`path` of the three layer) and the object (its name) it came through. `point` is still the canvas point; `local` is the point in the layer's own pixels. */
+    via?: {
+        path: string;
+        object: string;
+    };
     /** A `three` layer: what the ray through that point met first: the object (its name, or `''`), where (three's own units), and how far from the camera. */
     three?: {
         object: unknown;
@@ -428,6 +433,12 @@ interface MovieOptions {
     loader?: LoaderOption;
     /** Start with `movie.loop` on: playing goes back to the start at the end instead of stopping. Default false (like a `<video>`). */
     loop?: boolean;
+    /**
+     * The loudness of the whole mix in LUFS (ITU-R BS.1770): `-16` is usual for web video. The finished mix gets one gain (up or down) so its integrated loudness is that number, but the loudest sample
+     * never passes -1 dBFS: a mix with one loud click in a quiet bed stops short, and `inspectAudio()` / `check` say how far it got. Default: off (the mix is what the layers make; `check` says when it is quiet).
+     * A number of 0 or below, or `false`.
+     */
+    loudness?: number | false;
 }
 
 interface RenderOptions {
@@ -611,6 +622,7 @@ declare class Movie {
     /** What went into the mix, and its peak before limiting — kept for inspectAudio(). */
     private _audioSources;
     private _mixStats;
+    private _loudness;
     on(event: 'ready', fn: () => void): this;
     on(event: 'frame', fn: (e: FrameEvent) => void): this;
     /** A jump to another frame (`gotoFrame`, a seek bar) starts / finishes. Not emitted for playback ticks, `render()`, `snapshot()` or `contactSheet()`. */

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

@@ -1,6 +1,6 @@
 import { Application } from 'pixi.js';
 import { A as AudioReport, a as AudioInspectOptions } from './soundEntry-DT13DNt8.js';
-import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-C5xo0fzb.js';
+import { a as Stop, A as AssetSpec, C as CompositionSpec } from './types-CTSrPvY3.js';
 
 type EaseFn = (p: number) => number;
 
@@ -255,6 +255,11 @@ interface PickHit {
         x: number;
         y: number;
     };
+    /** The layer is shown on a mesh of a `three` layer (`threeLayerTexture`) and the point is on that mesh: the layer (`path` of the three layer) and the object (its name) it came through. `point` is still the canvas point; `local` is the point in the layer's own pixels. */
+    via?: {
+        path: string;
+        object: string;
+    };
     /** A `three` layer: what the ray through that point met first: the object (its name, or `''`), where (three's own units), and how far from the camera. */
     three?: {
         object: unknown;
@@ -428,6 +433,12 @@ interface MovieOptions {
     loader?: LoaderOption;
     /** Start with `movie.loop` on: playing goes back to the start at the end instead of stopping. Default false (like a `<video>`). */
     loop?: boolean;
+    /**
+     * The loudness of the whole mix in LUFS (ITU-R BS.1770): `-16` is usual for web video. The finished mix gets one gain (up or down) so its integrated loudness is that number, but the loudest sample
+     * never passes -1 dBFS: a mix with one loud click in a quiet bed stops short, and `inspectAudio()` / `check` say how far it got. Default: off (the mix is what the layers make; `check` says when it is quiet).
+     * A number of 0 or below, or `false`.
+     */
+    loudness?: number | false;
 }
 
 interface RenderOptions {
@@ -611,6 +622,7 @@ declare class Movie {
     /** What went into the mix, and its peak before limiting — kept for inspectAudio(). */
     private _audioSources;
     private _mixStats;
+    private _loudness;
     on(event: 'ready', fn: () => void): this;
     on(event: 'frame', fn: (e: FrameEvent) => void): this;
     /** A jump to another frame (`gotoFrame`, a seek bar) starts / finishes. Not emitted for playback ticks, `render()`, `snapshot()` or `contactSheet()`. */

package/dist/{Spans-XTIWYSNO.cjs → Spans-2TZCNREQ.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk3HZV3UHU_cjs = require('./chunk-3HZV3UHU.cjs');
-var chunkX62H3RBG_cjs = require('./chunk-X62H3RBG.cjs');
+var chunkDKCMJILW_cjs = require('./chunk-DKCMJILW.cjs');
+var chunkLALEBV63_cjs = require('./chunk-LALEBV63.cjs');
 require('./chunk-JN7JHNZR.cjs');
 require('./chunk-3SAS3ZE5.cjs');
 require('./chunk-TWZNOUM7.cjs');
@@ -12,12 +12,12 @@ var strip = (props) => {
   const { visibleChars: _gone, ...rest } = props;
   return rest;
 };
-var SpansSequence = class extends chunk3HZV3UHU_cjs.CompositionSequence {
+var SpansSequence = class extends chunkDKCMJILW_cjs.CompositionSequence {
   _meta;
   _count = { value: 0, visibleChars: 0 };
   constructor(spec, parent, root) {
     super(spec, parent, root);
-    this._meta = chunkX62H3RBG_cjs.spansMeta.get(spec);
+    this._meta = chunkLALEBV63_cjs.spansMeta.get(spec);
   }
   /** `visibleChars` is the group's own counter, not a property to write on the container. */
   displayProps() {
@@ -33,8 +33,8 @@ var SpansSequence = class extends chunk3HZV3UHU_cjs.CompositionSequence {
     if (!this._meta?.typed) return;
     const scope = this.scope();
     const first = this.spec.initial?.visibleChars;
-    this._count.visibleChars = first === void 0 ? 0 : chunkX62H3RBG_cjs.resolveNumber(first, scope);
-    chunkX62H3RBG_cjs.bindCounterKeyframes(timeline, this._count, "visibleChars", () => this._distribute(), this.spec.keyframes ?? [], this.duration, offset + this.at, scope);
+    this._count.visibleChars = first === void 0 ? 0 : chunkLALEBV63_cjs.resolveNumber(first, scope);
+    chunkLALEBV63_cjs.bindCounterKeyframes(timeline, this._count, "visibleChars", () => this._distribute(), this.spec.keyframes ?? [], this.duration, offset + this.at, scope);
     this._distribute();
   }
   /** Every piece shows its part of the first N characters of the whole text. */
@@ -43,7 +43,7 @@ var SpansSequence = class extends chunk3HZV3UHU_cjs.CompositionSequence {
     const total = Math.max(0, Math.floor(this._count.visibleChars));
     let i = 0;
     for (const child of this._children) {
-      if (!(child instanceof chunkX62H3RBG_cjs.TextSequence)) continue;
+      if (!(child instanceof chunkLALEBV63_cjs.TextSequence)) continue;
       const p = pieces[i++];
       if (p) child.setVisibleChars(Math.min(p.length, Math.max(0, total - p.start)));
     }
@@ -51,5 +51,5 @@ var SpansSequence = class extends chunk3HZV3UHU_cjs.CompositionSequence {
 };
 
 exports.SpansSequence = SpansSequence;
-//# sourceMappingURL=Spans-XTIWYSNO.cjs.map
-//# sourceMappingURL=Spans-XTIWYSNO.cjs.map
+//# sourceMappingURL=Spans-2TZCNREQ.cjs.map
+//# sourceMappingURL=Spans-2TZCNREQ.cjs.map

package/dist/{Spans-XTIWYSNO.cjs.map → Spans-2TZCNREQ.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/sequences/Spans.ts"],"names":["CompositionSequence","spansMeta","resolveNumber","bindCounterKeyframes","TextSequence"],"mappings":";;;;;;;;;AAQA,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAgD;AAC7D,EAAA,IAAI,CAAC,KAAA,IAAS,EAAE,cAAA,IAAkB,QAAQ,OAAO,KAAA;AACjD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,IAAM,aAAA,GAAN,cAA4BA,qCAAA,CAAoB;AAAA,EACpC,KAAA;AAAA,EACA,MAAA,GAAuB,EAAE,KAAA,EAAO,CAAA,EAAG,cAAc,CAAA,EAAE;AAAA,EAEpE,WAAA,CAAY,IAAA,EAAoB,MAAA,EAAiC,IAAA,EAAwB;AACvF,IAAA,KAAA,CAAM,IAAA,EAAM,QAAQ,IAAI,CAAA;AACxB,IAAA,IAAA,CAAK,KAAA,GAAQC,2BAAA,CAAU,GAAA,CAAI,IAAI,CAAA;AAAA,EACjC;AAAA;AAAA,EAGmB,YAAA,GAAyH;AAC1I,IAAA,MAAM,CAAA,GAAI,MAAM,YAAA,EAAa;AAC7B,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,OAAO,CAAA;AAC/B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA,CAAM,CAAA,CAAE,OAA4B,CAAA;AAAA,MAC7C,SAAA,EAAW,EAAE,SAAA,EAAW,GAAA,CAAI,SAAO,EAAE,GAAG,EAAA,EAAI,GAAA,EAAK,KAAA,CAAM,EAAA,CAAG,GAAG,CAAA,EAAG,EAAA,EAAI,KAAA,CAAM,EAAA,CAAG,EAAE,CAAA,EAAG,MAAM,KAAA,CAAM,EAAA,CAAG,IAAI,CAAA,EAAE,CAAE;AAAA,KAC3G;AAAA,EACF;AAAA,EAES,YAAA,CAAa,QAAA,EAAoB,MAAA,GAAS,CAAA,EAAS;AAC1D,IAAA,KAAA,CAAM,YAAA,CAAa,UAAU,MAAM,CAAA;AACnC,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,EAAM;AACzB,IAAA,MAAM,KAAA,GAAS,IAAA,CAAK,IAAA,CAAK,OAAA,EAAiD,YAAA;AAC1E,IAAA,IAAA,CAAK,OAAO,YAAA,GAAe,KAAA,KAAU,SAAY,CAAA,GAAIC,+BAAA,CAAc,OAAO,KAAK,CAAA;AAC/E,IAAAC,sCAAA,CAAqB,UAAU,IAAA,CAAK,MAAA,EAAQ,gBAAgB,MAAM,IAAA,CAAK,aAAY,EAAG,IAAA,CAAK,IAAA,CAAK,SAAA,IAAa,EAAC,EAAG,IAAA,CAAK,UAAW,MAAA,GAAS,IAAA,CAAK,IAAI,KAAK,CAAA;AACxJ,IAAA,IAAA,CAAK,WAAA,EAAY;AAAA,EACnB;AAAA;AAAA,EAGQ,WAAA,GAAoB;AAC1B,IAAA,MAAM,MAAA,GAAS,KAAK,KAAA,CAAO,MAAA;AAC3B,IAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,MAAA,CAAO,YAAY,CAAC,CAAA;AAC9D,IAAA,IAAI,CAAA,GAAI,CAAA;AACR,IAAA,KAAA,MAAW,KAAA,IAAS,KAAK,SAAA,EAAW;AAClC,MAAA,IAAI,EAAE,iBAAiBC,8BAAA,CAAA,EAAe;AACtC,MAAA,MAAM,CAAA,GAAI,OAAO,CAAA,EAAG,CAAA;AACpB,MAAA,IAAI,CAAA,EAAG,KAAA,CAAM,eAAA,CAAgB,IAAA,CAAK,IAAI,CAAA,CAAE,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAAA,IAC/E;AAAA,EACF;AACF","file":"Spans-XTIWYSNO.cjs","sourcesContent":["// The sequence behind a text layer with `spans`: a composition of ordinary text layers (see src/text/spans.ts) that also owns the typewriter\n// (`visibleChars`) of the whole text: it counts over every character of every piece, and tells each piece how many of its own to show.\nimport { CompositionSequence } from './Composition';\nimport { TextSequence, bindCounterKeyframes, resolveNumber, type CounterState } from './Text';\nimport { spansMeta, type SpansMeta } from '../text/spans';\nimport type { CompositionShape, SequenceSpec, Props } from '../types';\nimport type { Timeline } from '../core/timelineEngine';\n\nconst strip = (props: Props | undefined): Props | undefined => {\n  if (!props || !('visibleChars' in props)) return props;\n  const { visibleChars: _gone, ...rest } = props as Record<string, unknown>;\n  return rest as unknown as Props;\n};\n\nexport class SpansSequence extends CompositionSequence {\n  private readonly _meta: SpansMeta | undefined;\n  private readonly _count: CounterState = { value: 0, visibleChars: 0 };\n\n  constructor(spec: SequenceSpec, parent: CompositionShape | null, root: CompositionShape) {\n    super(spec, parent, root);\n    this._meta = spansMeta.get(spec);\n  }\n\n  /** `visibleChars` is the group's own counter, not a property to write on the container. */\n  protected override displayProps(): { initial: CompositionSequence['spec']['initial']; keyframes: CompositionSequence['spec']['keyframes'] } {\n    const p = super.displayProps();\n    if (!this._meta?.typed) return p;\n    return {\n      initial: strip(p.initial as Props | undefined) as never,\n      keyframes: p.keyframes?.map(kf => ({ ...kf, set: strip(kf.set), to: strip(kf.to), from: strip(kf.from) })),\n    };\n  }\n\n  override bindTimeline(timeline: Timeline, offset = 0): void {\n    super.bindTimeline(timeline, offset);\n    if (!this._meta?.typed) return;\n    const scope = this.scope();\n    const first = (this.spec.initial as Record<string, unknown> | undefined)?.visibleChars;\n    this._count.visibleChars = first === undefined ? 0 : resolveNumber(first, scope);          // like a text: it starts at 0 once it is animated\n    bindCounterKeyframes(timeline, this._count, 'visibleChars', () => this._distribute(), this.spec.keyframes ?? [], this.duration!, offset + this.at, scope);\n    this._distribute();\n  }\n\n  /** Every piece shows its part of the first N characters of the whole text. */\n  private _distribute(): void {\n    const pieces = this._meta!.pieces;\n    const total = Math.max(0, Math.floor(this._count.visibleChars));\n    let i = 0;\n    for (const child of this._children) {\n      if (!(child instanceof TextSequence)) continue;\n      const p = pieces[i++];\n      if (p) child.setVisibleChars(Math.min(p.length, Math.max(0, total - p.start)));\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../src/sequences/Spans.ts"],"names":["CompositionSequence","spansMeta","resolveNumber","bindCounterKeyframes","TextSequence"],"mappings":";;;;;;;;;AAQA,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAgD;AAC7D,EAAA,IAAI,CAAC,KAAA,IAAS,EAAE,cAAA,IAAkB,QAAQ,OAAO,KAAA;AACjD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,IAAM,aAAA,GAAN,cAA4BA,qCAAA,CAAoB;AAAA,EACpC,KAAA;AAAA,EACA,MAAA,GAAuB,EAAE,KAAA,EAAO,CAAA,EAAG,cAAc,CAAA,EAAE;AAAA,EAEpE,WAAA,CAAY,IAAA,EAAoB,MAAA,EAAiC,IAAA,EAAwB;AACvF,IAAA,KAAA,CAAM,IAAA,EAAM,QAAQ,IAAI,CAAA;AACxB,IAAA,IAAA,CAAK,KAAA,GAAQC,2BAAA,CAAU,GAAA,CAAI,IAAI,CAAA;AAAA,EACjC;AAAA;AAAA,EAGmB,YAAA,GAAyH;AAC1I,IAAA,MAAM,CAAA,GAAI,MAAM,YAAA,EAAa;AAC7B,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,OAAO,CAAA;AAC/B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA,CAAM,CAAA,CAAE,OAA4B,CAAA;AAAA,MAC7C,SAAA,EAAW,EAAE,SAAA,EAAW,GAAA,CAAI,SAAO,EAAE,GAAG,EAAA,EAAI,GAAA,EAAK,KAAA,CAAM,EAAA,CAAG,GAAG,CAAA,EAAG,EAAA,EAAI,KAAA,CAAM,EAAA,CAAG,EAAE,CAAA,EAAG,MAAM,KAAA,CAAM,EAAA,CAAG,IAAI,CAAA,EAAE,CAAE;AAAA,KAC3G;AAAA,EACF;AAAA,EAES,YAAA,CAAa,QAAA,EAAoB,MAAA,GAAS,CAAA,EAAS;AAC1D,IAAA,KAAA,CAAM,YAAA,CAAa,UAAU,MAAM,CAAA;AACnC,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,EAAM;AACzB,IAAA,MAAM,KAAA,GAAS,IAAA,CAAK,IAAA,CAAK,OAAA,EAAiD,YAAA;AAC1E,IAAA,IAAA,CAAK,OAAO,YAAA,GAAe,KAAA,KAAU,SAAY,CAAA,GAAIC,+BAAA,CAAc,OAAO,KAAK,CAAA;AAC/E,IAAAC,sCAAA,CAAqB,UAAU,IAAA,CAAK,MAAA,EAAQ,gBAAgB,MAAM,IAAA,CAAK,aAAY,EAAG,IAAA,CAAK,IAAA,CAAK,SAAA,IAAa,EAAC,EAAG,IAAA,CAAK,UAAW,MAAA,GAAS,IAAA,CAAK,IAAI,KAAK,CAAA;AACxJ,IAAA,IAAA,CAAK,WAAA,EAAY;AAAA,EACnB;AAAA;AAAA,EAGQ,WAAA,GAAoB;AAC1B,IAAA,MAAM,MAAA,GAAS,KAAK,KAAA,CAAO,MAAA;AAC3B,IAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,MAAA,CAAO,YAAY,CAAC,CAAA;AAC9D,IAAA,IAAI,CAAA,GAAI,CAAA;AACR,IAAA,KAAA,MAAW,KAAA,IAAS,KAAK,SAAA,EAAW;AAClC,MAAA,IAAI,EAAE,iBAAiBC,8BAAA,CAAA,EAAe;AACtC,MAAA,MAAM,CAAA,GAAI,OAAO,CAAA,EAAG,CAAA;AACpB,MAAA,IAAI,CAAA,EAAG,KAAA,CAAM,eAAA,CAAgB,IAAA,CAAK,IAAI,CAAA,CAAE,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAAA,IAC/E;AAAA,EACF;AACF","file":"Spans-2TZCNREQ.cjs","sourcesContent":["// The sequence behind a text layer with `spans`: a composition of ordinary text layers (see src/text/spans.ts) that also owns the typewriter\n// (`visibleChars`) of the whole text: it counts over every character of every piece, and tells each piece how many of its own to show.\nimport { CompositionSequence } from './Composition';\nimport { TextSequence, bindCounterKeyframes, resolveNumber, type CounterState } from './Text';\nimport { spansMeta, type SpansMeta } from '../text/spans';\nimport type { CompositionShape, SequenceSpec, Props } from '../types';\nimport type { Timeline } from '../core/timelineEngine';\n\nconst strip = (props: Props | undefined): Props | undefined => {\n  if (!props || !('visibleChars' in props)) return props;\n  const { visibleChars: _gone, ...rest } = props as Record<string, unknown>;\n  return rest as unknown as Props;\n};\n\nexport class SpansSequence extends CompositionSequence {\n  private readonly _meta: SpansMeta | undefined;\n  private readonly _count: CounterState = { value: 0, visibleChars: 0 };\n\n  constructor(spec: SequenceSpec, parent: CompositionShape | null, root: CompositionShape) {\n    super(spec, parent, root);\n    this._meta = spansMeta.get(spec);\n  }\n\n  /** `visibleChars` is the group's own counter, not a property to write on the container. */\n  protected override displayProps(): { initial: CompositionSequence['spec']['initial']; keyframes: CompositionSequence['spec']['keyframes'] } {\n    const p = super.displayProps();\n    if (!this._meta?.typed) return p;\n    return {\n      initial: strip(p.initial as Props | undefined) as never,\n      keyframes: p.keyframes?.map(kf => ({ ...kf, set: strip(kf.set), to: strip(kf.to), from: strip(kf.from) })),\n    };\n  }\n\n  override bindTimeline(timeline: Timeline, offset = 0): void {\n    super.bindTimeline(timeline, offset);\n    if (!this._meta?.typed) return;\n    const scope = this.scope();\n    const first = (this.spec.initial as Record<string, unknown> | undefined)?.visibleChars;\n    this._count.visibleChars = first === undefined ? 0 : resolveNumber(first, scope);          // like a text: it starts at 0 once it is animated\n    bindCounterKeyframes(timeline, this._count, 'visibleChars', () => this._distribute(), this.spec.keyframes ?? [], this.duration!, offset + this.at, scope);\n    this._distribute();\n  }\n\n  /** Every piece shows its part of the first N characters of the whole text. */\n  private _distribute(): void {\n    const pieces = this._meta!.pieces;\n    const total = Math.max(0, Math.floor(this._count.visibleChars));\n    let i = 0;\n    for (const child of this._children) {\n      if (!(child instanceof TextSequence)) continue;\n      const p = pieces[i++];\n      if (p) child.setVisibleChars(Math.min(p.length, Math.max(0, total - p.start)));\n    }\n  }\n}\n"]}

package/dist/{Spans-6L2ZVECX.js → Spans-TESJPQKX.js}

@@ -1,5 +1,5 @@
-import { CompositionSequence } from './chunk-ICI6ACHY.js';
-import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-4QVQ5UJJ.js';
+import { CompositionSequence } from './chunk-FPV3NPYC.js';
+import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-DM2OLQOJ.js';
 import './chunk-VNP7QCJE.js';
 import './chunk-32MMNDDN.js';
 import './chunk-BXOCEZ4U.js';
@@ -49,5 +49,5 @@ var SpansSequence = class extends CompositionSequence {
 };
 
 export { SpansSequence };
-//# sourceMappingURL=Spans-6L2ZVECX.js.map
-//# sourceMappingURL=Spans-6L2ZVECX.js.map
+//# sourceMappingURL=Spans-TESJPQKX.js.map
+//# sourceMappingURL=Spans-TESJPQKX.js.map

package/dist/{Spans-6L2ZVECX.js.map → Spans-TESJPQKX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/sequences/Spans.ts"],"names":[],"mappings":";;;;;;;AAQA,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAgD;AAC7D,EAAA,IAAI,CAAC,KAAA,IAAS,EAAE,cAAA,IAAkB,QAAQ,OAAO,KAAA;AACjD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,IAAM,aAAA,GAAN,cAA4B,mBAAA,CAAoB;AAAA,EACpC,KAAA;AAAA,EACA,MAAA,GAAuB,EAAE,KAAA,EAAO,CAAA,EAAG,cAAc,CAAA,EAAE;AAAA,EAEpE,WAAA,CAAY,IAAA,EAAoB,MAAA,EAAiC,IAAA,EAAwB;AACvF,IAAA,KAAA,CAAM,IAAA,EAAM,QAAQ,IAAI,CAAA;AACxB,IAAA,IAAA,CAAK,KAAA,GAAQ,SAAA,CAAU,GAAA,CAAI,IAAI,CAAA;AAAA,EACjC;AAAA;AAAA,EAGmB,YAAA,GAAyH;AAC1I,IAAA,MAAM,CAAA,GAAI,MAAM,YAAA,EAAa;AAC7B,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,OAAO,CAAA;AAC/B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA,CAAM,CAAA,CAAE,OAA4B,CAAA;AAAA,MAC7C,SAAA,EAAW,EAAE,SAAA,EAAW,GAAA,CAAI,SAAO,EAAE,GAAG,EAAA,EAAI,GAAA,EAAK,KAAA,CAAM,EAAA,CAAG,GAAG,CAAA,EAAG,EAAA,EAAI,KAAA,CAAM,EAAA,CAAG,EAAE,CAAA,EAAG,MAAM,KAAA,CAAM,EAAA,CAAG,IAAI,CAAA,EAAE,CAAE;AAAA,KAC3G;AAAA,EACF;AAAA,EAES,YAAA,CAAa,QAAA,EAAoB,MAAA,GAAS,CAAA,EAAS;AAC1D,IAAA,KAAA,CAAM,YAAA,CAAa,UAAU,MAAM,CAAA;AACnC,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,EAAM;AACzB,IAAA,MAAM,KAAA,GAAS,IAAA,CAAK,IAAA,CAAK,OAAA,EAAiD,YAAA;AAC1E,IAAA,IAAA,CAAK,OAAO,YAAA,GAAe,KAAA,KAAU,SAAY,CAAA,GAAI,aAAA,CAAc,OAAO,KAAK,CAAA;AAC/E,IAAA,oBAAA,CAAqB,UAAU,IAAA,CAAK,MAAA,EAAQ,gBAAgB,MAAM,IAAA,CAAK,aAAY,EAAG,IAAA,CAAK,IAAA,CAAK,SAAA,IAAa,EAAC,EAAG,IAAA,CAAK,UAAW,MAAA,GAAS,IAAA,CAAK,IAAI,KAAK,CAAA;AACxJ,IAAA,IAAA,CAAK,WAAA,EAAY;AAAA,EACnB;AAAA;AAAA,EAGQ,WAAA,GAAoB;AAC1B,IAAA,MAAM,MAAA,GAAS,KAAK,KAAA,CAAO,MAAA;AAC3B,IAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,MAAA,CAAO,YAAY,CAAC,CAAA;AAC9D,IAAA,IAAI,CAAA,GAAI,CAAA;AACR,IAAA,KAAA,MAAW,KAAA,IAAS,KAAK,SAAA,EAAW;AAClC,MAAA,IAAI,EAAE,iBAAiB,YAAA,CAAA,EAAe;AACtC,MAAA,MAAM,CAAA,GAAI,OAAO,CAAA,EAAG,CAAA;AACpB,MAAA,IAAI,CAAA,EAAG,KAAA,CAAM,eAAA,CAAgB,IAAA,CAAK,IAAI,CAAA,CAAE,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAAA,IAC/E;AAAA,EACF;AACF","file":"Spans-6L2ZVECX.js","sourcesContent":["// The sequence behind a text layer with `spans`: a composition of ordinary text layers (see src/text/spans.ts) that also owns the typewriter\n// (`visibleChars`) of the whole text: it counts over every character of every piece, and tells each piece how many of its own to show.\nimport { CompositionSequence } from './Composition';\nimport { TextSequence, bindCounterKeyframes, resolveNumber, type CounterState } from './Text';\nimport { spansMeta, type SpansMeta } from '../text/spans';\nimport type { CompositionShape, SequenceSpec, Props } from '../types';\nimport type { Timeline } from '../core/timelineEngine';\n\nconst strip = (props: Props | undefined): Props | undefined => {\n  if (!props || !('visibleChars' in props)) return props;\n  const { visibleChars: _gone, ...rest } = props as Record<string, unknown>;\n  return rest as unknown as Props;\n};\n\nexport class SpansSequence extends CompositionSequence {\n  private readonly _meta: SpansMeta | undefined;\n  private readonly _count: CounterState = { value: 0, visibleChars: 0 };\n\n  constructor(spec: SequenceSpec, parent: CompositionShape | null, root: CompositionShape) {\n    super(spec, parent, root);\n    this._meta = spansMeta.get(spec);\n  }\n\n  /** `visibleChars` is the group's own counter, not a property to write on the container. */\n  protected override displayProps(): { initial: CompositionSequence['spec']['initial']; keyframes: CompositionSequence['spec']['keyframes'] } {\n    const p = super.displayProps();\n    if (!this._meta?.typed) return p;\n    return {\n      initial: strip(p.initial as Props | undefined) as never,\n      keyframes: p.keyframes?.map(kf => ({ ...kf, set: strip(kf.set), to: strip(kf.to), from: strip(kf.from) })),\n    };\n  }\n\n  override bindTimeline(timeline: Timeline, offset = 0): void {\n    super.bindTimeline(timeline, offset);\n    if (!this._meta?.typed) return;\n    const scope = this.scope();\n    const first = (this.spec.initial as Record<string, unknown> | undefined)?.visibleChars;\n    this._count.visibleChars = first === undefined ? 0 : resolveNumber(first, scope);          // like a text: it starts at 0 once it is animated\n    bindCounterKeyframes(timeline, this._count, 'visibleChars', () => this._distribute(), this.spec.keyframes ?? [], this.duration!, offset + this.at, scope);\n    this._distribute();\n  }\n\n  /** Every piece shows its part of the first N characters of the whole text. */\n  private _distribute(): void {\n    const pieces = this._meta!.pieces;\n    const total = Math.max(0, Math.floor(this._count.visibleChars));\n    let i = 0;\n    for (const child of this._children) {\n      if (!(child instanceof TextSequence)) continue;\n      const p = pieces[i++];\n      if (p) child.setVisibleChars(Math.min(p.length, Math.max(0, total - p.start)));\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../src/sequences/Spans.ts"],"names":[],"mappings":";;;;;;;AAQA,IAAM,KAAA,GAAQ,CAAC,KAAA,KAAgD;AAC7D,EAAA,IAAI,CAAC,KAAA,IAAS,EAAE,cAAA,IAAkB,QAAQ,OAAO,KAAA;AACjD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,IAAM,aAAA,GAAN,cAA4B,mBAAA,CAAoB;AAAA,EACpC,KAAA;AAAA,EACA,MAAA,GAAuB,EAAE,KAAA,EAAO,CAAA,EAAG,cAAc,CAAA,EAAE;AAAA,EAEpE,WAAA,CAAY,IAAA,EAAoB,MAAA,EAAiC,IAAA,EAAwB;AACvF,IAAA,KAAA,CAAM,IAAA,EAAM,QAAQ,IAAI,CAAA;AACxB,IAAA,IAAA,CAAK,KAAA,GAAQ,SAAA,CAAU,GAAA,CAAI,IAAI,CAAA;AAAA,EACjC;AAAA;AAAA,EAGmB,YAAA,GAAyH;AAC1I,IAAA,MAAM,CAAA,GAAI,MAAM,YAAA,EAAa;AAC7B,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO,OAAO,CAAA;AAC/B,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,KAAA,CAAM,CAAA,CAAE,OAA4B,CAAA;AAAA,MAC7C,SAAA,EAAW,EAAE,SAAA,EAAW,GAAA,CAAI,SAAO,EAAE,GAAG,EAAA,EAAI,GAAA,EAAK,KAAA,CAAM,EAAA,CAAG,GAAG,CAAA,EAAG,EAAA,EAAI,KAAA,CAAM,EAAA,CAAG,EAAE,CAAA,EAAG,MAAM,KAAA,CAAM,EAAA,CAAG,IAAI,CAAA,EAAE,CAAE;AAAA,KAC3G;AAAA,EACF;AAAA,EAES,YAAA,CAAa,QAAA,EAAoB,MAAA,GAAS,CAAA,EAAS;AAC1D,IAAA,KAAA,CAAM,YAAA,CAAa,UAAU,MAAM,CAAA;AACnC,IAAA,IAAI,CAAC,IAAA,CAAK,KAAA,EAAO,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,EAAM;AACzB,IAAA,MAAM,KAAA,GAAS,IAAA,CAAK,IAAA,CAAK,OAAA,EAAiD,YAAA;AAC1E,IAAA,IAAA,CAAK,OAAO,YAAA,GAAe,KAAA,KAAU,SAAY,CAAA,GAAI,aAAA,CAAc,OAAO,KAAK,CAAA;AAC/E,IAAA,oBAAA,CAAqB,UAAU,IAAA,CAAK,MAAA,EAAQ,gBAAgB,MAAM,IAAA,CAAK,aAAY,EAAG,IAAA,CAAK,IAAA,CAAK,SAAA,IAAa,EAAC,EAAG,IAAA,CAAK,UAAW,MAAA,GAAS,IAAA,CAAK,IAAI,KAAK,CAAA;AACxJ,IAAA,IAAA,CAAK,WAAA,EAAY;AAAA,EACnB;AAAA;AAAA,EAGQ,WAAA,GAAoB;AAC1B,IAAA,MAAM,MAAA,GAAS,KAAK,KAAA,CAAO,MAAA;AAC3B,IAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,MAAA,CAAO,YAAY,CAAC,CAAA;AAC9D,IAAA,IAAI,CAAA,GAAI,CAAA;AACR,IAAA,KAAA,MAAW,KAAA,IAAS,KAAK,SAAA,EAAW;AAClC,MAAA,IAAI,EAAE,iBAAiB,YAAA,CAAA,EAAe;AACtC,MAAA,MAAM,CAAA,GAAI,OAAO,CAAA,EAAG,CAAA;AACpB,MAAA,IAAI,CAAA,EAAG,KAAA,CAAM,eAAA,CAAgB,IAAA,CAAK,IAAI,CAAA,CAAE,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA;AAAA,IAC/E;AAAA,EACF;AACF","file":"Spans-TESJPQKX.js","sourcesContent":["// The sequence behind a text layer with `spans`: a composition of ordinary text layers (see src/text/spans.ts) that also owns the typewriter\n// (`visibleChars`) of the whole text: it counts over every character of every piece, and tells each piece how many of its own to show.\nimport { CompositionSequence } from './Composition';\nimport { TextSequence, bindCounterKeyframes, resolveNumber, type CounterState } from './Text';\nimport { spansMeta, type SpansMeta } from '../text/spans';\nimport type { CompositionShape, SequenceSpec, Props } from '../types';\nimport type { Timeline } from '../core/timelineEngine';\n\nconst strip = (props: Props | undefined): Props | undefined => {\n  if (!props || !('visibleChars' in props)) return props;\n  const { visibleChars: _gone, ...rest } = props as Record<string, unknown>;\n  return rest as unknown as Props;\n};\n\nexport class SpansSequence extends CompositionSequence {\n  private readonly _meta: SpansMeta | undefined;\n  private readonly _count: CounterState = { value: 0, visibleChars: 0 };\n\n  constructor(spec: SequenceSpec, parent: CompositionShape | null, root: CompositionShape) {\n    super(spec, parent, root);\n    this._meta = spansMeta.get(spec);\n  }\n\n  /** `visibleChars` is the group's own counter, not a property to write on the container. */\n  protected override displayProps(): { initial: CompositionSequence['spec']['initial']; keyframes: CompositionSequence['spec']['keyframes'] } {\n    const p = super.displayProps();\n    if (!this._meta?.typed) return p;\n    return {\n      initial: strip(p.initial as Props | undefined) as never,\n      keyframes: p.keyframes?.map(kf => ({ ...kf, set: strip(kf.set), to: strip(kf.to), from: strip(kf.from) })),\n    };\n  }\n\n  override bindTimeline(timeline: Timeline, offset = 0): void {\n    super.bindTimeline(timeline, offset);\n    if (!this._meta?.typed) return;\n    const scope = this.scope();\n    const first = (this.spec.initial as Record<string, unknown> | undefined)?.visibleChars;\n    this._count.visibleChars = first === undefined ? 0 : resolveNumber(first, scope);          // like a text: it starts at 0 once it is animated\n    bindCounterKeyframes(timeline, this._count, 'visibleChars', () => this._distribute(), this.spec.keyframes ?? [], this.duration!, offset + this.at, scope);\n    this._distribute();\n  }\n\n  /** Every piece shows its part of the first N characters of the whole text. */\n  private _distribute(): void {\n    const pieces = this._meta!.pieces;\n    const total = Math.max(0, Math.floor(this._count.visibleChars));\n    let i = 0;\n    for (const child of this._children) {\n      if (!(child instanceof TextSequence)) continue;\n      const p = pieces[i++];\n      if (p) child.setVisibleChars(Math.min(p.length, Math.max(0, total - p.start)));\n    }\n  }\n}\n"]}