pixi-effects 0.35.0 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.37.0
+
+**The `canvas` layer: draw it yourself, and what eight trial pieces taught**
+
+- **New: `{ type: 'canvas', draw: (ctx, t, info) => { … } }`.** A picture drawn by your own function of the time into a canvas of the layer's own (cleared before every call, nothing survives into the next), shown like an image at its place in the stack: `initial`, `keyframes`, `filters`, `mask`, `blendMode`, `parent`, `threeD`, transitions and export work on it. Keys: `draw` (required), `setup` (once, may be async; its result is `info.state`, the place to compute a whole simulation), `width` / `height` (px or expression, at most 8192), `resolution` (0.25 to 4), `params` (numbers that keyframes animate as `'params.name'`), `seed` (seeds `info.random()`, which starts again at every call), `smoothing: false` (hard pixels, also when the layer is scaled up: pixel art). `info` is `{ frame, duration, progress, width, height, resolution, frameRate, params, state, random, start, time, canvas }`.
+- **The contract is a function of the time, and `check` holds you to it:** a build-time warning for `Math.random`, `Date.now`, `performance.now` and `new Date()` in `draw`, and `check` (and `movie.review()`, so the Playground) draws every canvas layer twice at four moments and reports a layer whose two pictures differ, naming the moments (`movie.canvasProblems()`). The check draws in two orders (an integrator that moves by the time since the last call is caught, which two draws in a row cannot show) and in a scratch canvas (reading the pixels of the real one made Chrome move it from the GPU to the CPU in the middle of the check, which anti-aliases a few pixels differently), covers inline canvas masks, and `check` lists it under its own `canvas` heading, not as a layout issue. A missing or throwing `draw` / `setup` is said once with the layer's name and the layer is a magenta checkerboard (the next frames are tried again).
+- It cannot see or paint on what is below it, it is not audio, and a spec that holds one holds functions (not pure JSON): an escape hatch like `three` and the `custom` filter. Recipes `canvas-trail`, `canvas-rings`, `canvas-pixel-sprite`, `canvas-life`; a guide section with a live demo; pitfall 115; `help canvas` finds the layer first (a heading that is the word now ranks first).
+- **What eight fresh authors needed (a trial of eight different pieces made with the layer: a botanical plate, a fifths clock, a data race, a brush painting, an elastic exposure, a pixel-art scene, kinetic type, a flow field), and what changed because of it:**
+  - **`info.time`** (the movie's seconds) and **`info.start`** (where the layer starts on the movie's clock, nested compositions counted; inside a time-remapped composition it is that composition's own clock): several canvas layers and the sound share one clock without adding the layer's `at` by hand, which broke quietly when someone moved the layer (6 of 8 pieces did it by hand).
+  - **`info.canvas(w, h)`**: an offscreen canvas for sprites, masks and scratch pictures, with a 2D context made for reading (CPU). Found by tracing a `check` report that blamed `Math.random` for a layer that used none: a canvas made in `setup` with `document.createElement` and drawn with `destination-in` over 96 anti-aliased strokes was drawn differently the first time (up to 128 of 255, 40 418 channel values on a 1280×720 layer) and the same every time after.
+  - **`check` tells the truth about canvas layers**: every moment is drawn once and thrown away before the two orders are compared (a first-use difference of the browser is not held against the layer, and a cache filled on the first call is fine); a layer that differs is reported with how many channel values differ and by how much; when every layer passes, `check` prints a `canvas` line (`2 canvas layer(s) drew the same picture twice at 4 moments (two orders): deterministic · slowest draw 3.2 ms on the CPU`; silence made 7 of 8 authors unsure it had run); `movie.canvasReport()` and `review().canvas` carry the rows. A draw that throws at a checked moment is no longer "deterministic" (its checkerboard was the same twice): the row says it could not draw there. The draw time is measured after a one-pixel read, because a canvas keeps its calls until something reads it (a draw that took 259 ms in the check was the flow-field piece's 3600 lines).
+  - **New exports for `draw`:** `samplePath(d)` (SVG path data walked by length: `.length`, `.at(u)` → `{ x, y, angle }`, `.trim(a, b)` → flat point pieces; for a line that draws on, text along a curve, a petal that falls along a route) and `noise2(x, y, seed)` (smooth 2-D noise). `ease`, `noise`, `random` and `rand` were already exported and are now named in the docs: 6 of 8 authors rewrote easing by hand because nothing said it could be imported.
+  - **Docs:** shared data belongs in module scope (the state `setup` returns is private to its layer), a cache of a pure function is fine, sprites and masks come from `info.canvas`, `ctx.filter` / composite operations / `drawImage` of another canvas / `measureText` all work, a web font is loaded with `await document.fonts.load(…)` in `setup`, **`check` does not see text drawn in a canvas**, the first line of SKILL.md and AGENTS.md no longer says "you never write per-frame code" without the one exception; pitfalls 116–118; recipes `canvas-text-mask` (words as a window onto moving bands: mask first, then `source-atop`), `canvas-text-on-path` and `canvas-bars` (bars that swap places) in a section of their own.
+  - **Not built, on purpose:** values several layers read from one animated source (`composition.params`), reading another layer's picture, text on a path as a layer, pixel-art helpers (framebuffer, dither, palette, bitmap font), `paramAt(name, t)` (a keyframed param read at another time), a square wave for `music`. Each was asked for by one or two pieces.
+- Gallery: five pieces made with the layer in the trial (a botanical plate, a bar-chart race, an elastic long exposure, a pixel cut-scene, a poem in kinetic type): 64 pieces.
+- Spec and plan: `docs/superpowers/specs/2026-10-14-canvas-layer-design.md`. Plugins, registries and maintainer-only fields were considered and dropped: a layer that can draw anything makes them unnecessary.
+
+## 0.36.0
+
+**Vertical writing, `check` that sees pictures over text, holes in paths, and the fixes found by 18 fresh authors (the claims that were verified on the real build)**
+
+- **New: vertical writing (tategaki).** `animateText(..., { vertical: true })` and `splitText(..., { vertical: true })`: characters go down a column and a new line is a new column to the left (`x` is the right edge of the first column). 、。 sit at the upper right of their cell, small kana a little up and right, and the long vowel mark, dashes, waves and brackets are turned a quarter clockwise (`rotation: 90`); pieces carry `cx` / `cy` / `rotation`. No tate-chu-yoko and no automatic line breaking.
+- **New: `check` lists an opaque shape or image drawn over part of a text, and a thin line drawn over its body** (review list, with the other overlaps; a shadow, glow, ring or backdrop is not reported), **`check --at … --crop X,Y,W,H`** writes each picture as that part of the canvas, enlarged up to 4x, and **`help`** finds a heading written with spaces (`motionBlur`), a table row (`path`) and a call (`steps`).
+- **New: `format: { time: 'hh:mm' }`** (also `'hh:mm:ss'`, `'h:mm:ss'`, `'mm:ss'`, `'m:ss'`) prints a counter's value, in seconds, as a clock; **`resolution`** on a text layer (1–8) draws it at N× the pixels so text inside a group scaled up N× stays sharp; **image `scaleMode: 'nearest'`** for pixel art; **`inspectAudio`** gives each source `belowMixDb` (how far below the mix around its loudest moment it is) and `check` gives ONE note when short sfx sit more than 12 dB under the mix ("buried", naming the worst).
+- **Guide demos load this repository's build** (`../../dist/…`), like the gallery pages, so a demo shows the code of the same commit.
+- **Fixed: `initial: { fill }` on a text layer was dropped without a word** (only a `fill` keyframe worked). It is now the colour from the start (it wins over `style.fill`).
+- **Fixed: a filter option set to `undefined` (a misspelt variable) overwrote the filter's own default**: `{ type: 'bloom', strength: undefined }` made `movie.init` fail with "Cannot read properties of undefined (reading 'x')". The key is now left out and a warning names the filter and the options.
+- **`check --at`** no longer leaves the pictures of an earlier run in `frames/` (it cleared nothing, so an old frame could be taken for the current one). The music read-back no longer says "ends early" for a track that is a few millionths of a beat shorter (decimal note lengths add up with float noise).
+- **`pixi-effects new --size`** sizes the shown page for a tall or square movie (it was 960 px wide, so a 9:16 page was 1700 px tall).
+- **New: `fillRule: 'evenodd'` on a `path`** (a donut written as two circles in one `d` was a solid disc: sub-paths were never holes). The biggest sub-path is the shape, every other one is cut out of it, and the stroke goes round all of them.
+- **Changed: a morph between two outlines with the same number of corners is paired corner to corner** (it resampled both to 128 points along the edges, so a morph between two quads whose edges are not in proportion rounded the corners half way). Outlines with different corner counts, and curves, behave as before.
+- Docs: a keyframe's `from` holds from the start of the layer and beats `initial` (cheatsheet, pitfall 114: no warning, because `initial` = the resting value and `from` = where it starts is what the recipes do); a path's `x` / `y`, when given, place its middle.
+- Docs: `--out DIR` writes straight into DIR (no `<name>/` inside); pitfalls 112 (text under a scaled-up parent is soft) and 113 (an `sfx` lasts at most 10 s, a `music` layer plays 16 tracks).
+- Gallery and guide: 59 pieces (18 new, 17 swapped, 11 removed); the guide no longer shows gallery pieces (its demos are built from its own recipes, `scripts/build-guide-demos.mjs`); `scripts/gallery-swap.mjs` also adds (`--add`) and removes (`--remove`).
+
 ## 0.35.0
 
 **The player's seek-bar preview (`thumbnails: true`, off by default) and `movie.thumbnail()`**

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.35.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.37.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
 
 **[Guide →](https://yjmtmtk.github.io/pixi-effects/guide/)** · **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 52 portfolio pieces written as plain data by AI models · **[Examples →](https://yjmtmtk.github.io/pixi-effects/examples/)** · 15 numbered examples, a music lab + an in-browser playground.
 
@@ -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.35.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.35.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.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.35.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.37.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.
 >
@@ -77,7 +77,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
   "imports": {
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.35.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.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.35.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.35.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.35.0/dist/present.js"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.37.0/dist/present.js"
     }
   }
   </script>

package/ai/tools/check.mjs

@@ -7,7 +7,7 @@
  * It starts a private static server and a private headless Chrome (nothing shared with other sessions), opens the page,
  * waits for `window.__ready === true`, then checks: console warnings / errors, `movie.inspect` over the whole timeline
  * (grouped), `movie.inspectAudio()`, a contact sheet (a PNG you can look at), and a real export (`movie.render`) that it
- * decodes again: video size / length, audio length, loudness per second, silence. Output goes to `check-out/<name>/`
+ * decodes again: video size / length, audio length, loudness per second, silence. Output goes to `check-out/<name>/` (`--out DIR` writes straight into DIR, with no <name>/ inside it)
  * (`sheet.png`, `<name>.<format>`, `report.json`; a presentation with `stops` also gets `stops.png`, one picture per stop) and a short summary is printed. Exit code 0 = nothing to fix, 1 = problems.
  *
  * Needs: Node >= 22 (built-in WebSocket), Chrome / Chromium installed (or --chrome PATH / CHROME=PATH). No npm dependencies.
@@ -15,6 +15,7 @@
  *
  * Options: --draft (the export is a draft: half size, low quality, no motion blur: a much smaller file; the drawing itself is not faster) · --at LIST (pictures at moments you name: 3.5, 50%, f120, title@end → frames/*.png and at.png) ·
  *          --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) ·
  *          --onion A:B (one picture of the movement between A and B seconds, frames overlaid: onion.png) ·
  *          --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 ·
  *          --timeout SECONDS (default 240) · --root DIR (static server root; default: the nearest folder above the page with dist/) · --chrome PATH
@@ -44,8 +45,8 @@ export function formatMusic(sources) {
     out.push(`  music     ${s.layer} · ${num(m.bpm)} bpm · ${num(m.beats)} beats = ${num(m.bars)} bars of ${m.meter} beats${assumed} · ${num(Math.round(m.seconds * 10) / 10)} s (+ ${num(m.tail)} s tail)`);
     for (const t of m.tracks) {
       const whole = Math.abs(t.bars - Math.round(t.bars)) < 1e-6;
-      // a track shorter than the longest stops early (whatever its length in bars); a short BAR can only be the longest track's, and only the author's meter can say so
-      const note = t.beats < m.beats - 1e-6 ? ` (ends early: silent from beat ${num(t.beats)})` : !whole && m.meterSet !== false ? ' (not a whole number of bars: a bar is short)' : '';
+      // a track shorter than the longest stops early (whatever its length in bars; decimal note lengths add up with float noise, so a gap under 1e-4 of a beat is none); a short BAR can only be the longest track's, and only the author's meter can say so
+      const note = t.beats < m.beats - 1e-4 ? ` (ends early: silent from beat ${num(t.beats)})` : !whole && m.meterSet !== false ? ' (not a whole number of bars: a bar is short)' : '';
       const cell = names => { const n = names.match(/\[[^\]]*\]\S*|\S+/g) ?? []; return n.length === 0 ? '–' : n.length > 4 ? `${n.slice(0, 4).join(' ')} …` : n.join(' '); };
       const shown = t.perBar.slice(0, 16).map(cell).join(' | ');
       out.push(`${pad}${t.inst.padEnd(6)} ${num(t.bars)} bar${t.bars === 1 ? '' : 's'}${note} | ${shown}${t.perBar.length > 16 ? ` | … (${t.perBar.length - 16} more)` : ''}`);
@@ -79,10 +80,10 @@ 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] [--onion 1:3] [--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] [--onion 1:3] [--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 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, draft: false, onion: null, query: null, 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, query: null, 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];
@@ -95,6 +96,11 @@ export function parseArgs(argv) {
     else if (a === '--draft') o.draft = true;
     else if (a === '--query') o.query = need(i++, a).replace(/^\?/, '');
     else if (a === '--at') o.at = need(i++, a);
+    else if (a === '--crop') {
+      const m = need(i++, a).split(',').map(Number);
+      if (m.length !== 4 || !m.every(Number.isFinite) || m[0] < 0 || m[1] < 0 || m[2] < 1 || m[3] < 1) throw new Error(`--crop must look like 100,200,400,300 (x, y, width, height in canvas pixels, width and height at least 1), got "${argv[i]}"`);
+      o.crop = { x: Math.round(m[0]), y: Math.round(m[1]), width: Math.round(m[2]), height: Math.round(m[3]) };
+    }
     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 === '--onion') {
@@ -109,6 +115,7 @@ export function parseArgs(argv) {
     else if (!o.page) o.page = a;
     else throw new Error(`unexpected argument ${a}`);
   }
+  if (o.crop && !o.at) throw new Error('--crop crops the pictures of --at: give --at too (for example --at 3.5 --crop 100,200,400,300)');
   return o;
 }
 
@@ -377,11 +384,14 @@ export async function runCheck(opts, log = console.log) {
       if (r.error) throw new Error(r.error.replace(/^pixi-effects: /, ''));
       atList = r.at;
     }
+    if (opts.crop && (opts.crop.x + opts.crop.width > info.width || opts.crop.y + opts.crop.height > info.height)) throw new Error(`--crop ${opts.crop.x},${opts.crop.y},${opts.crop.width},${opts.crop.height} goes past the canvas (${info.width}×${info.height})`);
     if (opts.onion && opts.onion[1] > info.duration + 1e-9) throw new Error(`--onion ${opts.onion[0]}:${opts.onion[1]} goes past the end: the movie is ${info.duration} s`);
 
     const rv = await cdp.eval(`movie.review(${JSON.stringify({ strict: !!opts.strict })})`);
-    report.inspect = { checkedFrames: rv.frames, issues: rv.problems, review: rv.review };
-    if (rv.problems.length) report.problems.push(`${rv.problems.length} kind(s) of layout issue from movie.inspect`);
+    const layoutProblems = rv.problems.filter(g => g.kind !== 'canvas'), canvasProblems = rv.problems.filter(g => g.kind === 'canvas');
+    report.inspect = { checkedFrames: rv.frames, issues: layoutProblems, review: rv.review, canvas: canvasProblems.map(g => g.message), canvasLayers: rv.canvas ?? [] };
+    if (layoutProblems.length) report.problems.push(`${layoutProblems.length} kind(s) of layout issue from movie.inspect`);
+    if (canvasProblems.length) report.problems.push(`${canvasProblems.length} canvas layer(s) that do not draw the same picture for the same time (movie.canvasProblems)`);
     // fonts: a web font whose file did not load is a problem (the library lists a layer with no available font for review)
     report.fonts = rv.fonts;
     if (rv.fonts.failed.length) report.problems.push(`${rv.fonts.failed.length} web font(s) failed to load: ${rv.fonts.failed.join(', ')} (the layers that use them are drawn in a fallback)`);
@@ -398,8 +408,16 @@ export async function runCheck(opts, log = console.log) {
       const wanted = atList;
       const framesDir = path.join(outDir, 'frames');
       fs.mkdirSync(framesDir, { recursive: true });
+      for (const old of fs.readdirSync(framesDir)) if (old.endsWith('.png')) fs.rmSync(path.join(framesDir, old));        // the pictures of an earlier run: frames/ shows this run's moments only
+      // --crop: that part of the canvas, enlarged by a whole factor (up to 4x, the longer side to about 800 px) with no smoothing, so small figures and fine lines can be judged
+      const crop = opts.crop ? { ...opts.crop, scale: Math.max(1, Math.min(4, Math.floor(800 / Math.max(opts.crop.width, opts.crop.height)))) } : null;
+      const cropped = [];
       for (const w of wanted) {
-        const png = await cdp.eval(`movie.snapshot(${w.frame}, { as: 'dataURL' })`);
+        let png = await cdp.eval(`movie.snapshot(${w.frame}, { as: 'dataURL' })`);
+        if (crop) {
+          png = await cdp.eval(`(async (url, c) => { const img = new Image(); img.src = url; await img.decode(); const cv = document.createElement('canvas'); cv.width = c.width * c.scale; cv.height = c.height * c.scale; const g = cv.getContext('2d'); g.imageSmoothingEnabled = false; g.drawImage(img, c.x, c.y, c.width, c.height, 0, 0, cv.width, cv.height); return cv.toDataURL('image/png'); })(${JSON.stringify(png)}, ${JSON.stringify(crop)})`);
+          cropped.push(png);
+        }
         fs.writeFileSync(path.join(framesDir, `${w.label}.png`), Buffer.from(png.slice(png.indexOf(',') + 1), 'base64'));
         // depth of field: the blur (px) each threeD layer has at this moment, so a focus pull can be read as numbers (0 = sharp)
         const rows = await cdp.eval(`movie.inspect(${w.frame}).then(r => r.layers.filter(l => l.depthBlur !== undefined).map(l => [l.path, l.depthBlur]))`).catch(() => []);
@@ -408,12 +426,15 @@ export async function runCheck(opts, log = console.log) {
         const lit = await cdp.eval(`movie.inspect(${w.frame}).then(r => r.layers.filter(l => l.light !== undefined).map(l => [l.path, l.light]))`).catch(() => []);
         if (lit.length) w.light = Object.fromEntries(lit);
       }
-      const atSheet = await cdp.eval(`movie.contactSheet({ frames: ${JSON.stringify(wanted.map(w => w.frame))}, as: 'dataURL' })`);
+      const atSheet = crop
+        ? await cdp.eval(`(async (urls) => { const imgs = await Promise.all(urls.map(async u => { const i = new Image(); i.src = u; await i.decode(); return i; })); const cols = Math.min(imgs.length, 3), rows = Math.ceil(imgs.length / cols), w = imgs[0].width, h = imgs[0].height; const cv = document.createElement('canvas'); cv.width = cols * w; cv.height = rows * h; const g = cv.getContext('2d'); imgs.forEach((im, k) => g.drawImage(im, (k % cols) * w, Math.floor(k / cols) * h)); return cv.toDataURL('image/png'); })(${JSON.stringify(cropped)})`)
+        : await cdp.eval(`movie.contactSheet({ frames: ${JSON.stringify(wanted.map(w => w.frame))}, as: 'dataURL' })`);
       const atFile = path.join(outDir, 'at.png');
       fs.writeFileSync(atFile, Buffer.from(atSheet.slice(atSheet.indexOf(',') + 1), 'base64'));
       report.files.at = shown(atFile);
       report.files.frames = shown(framesDir);
       report.at = wanted;
+      if (crop) report.crop = crop;
     }
 
     // --onion A:B: one picture of the movement between A and B seconds (8 frames overlaid, the later the stronger)
@@ -561,6 +582,14 @@ function finish(report, outDir, log) {
     L.push(`  layout    ${g.length ? g.length + ' kind(s) of issue over ' + report.inspect.checkedFrames + ' frames:' : 'no cut-off / off-canvas text over ' + report.inspect.checkedFrames + ' frames (movie.inspect)'}`);
     for (const i of g.slice(0, 8)) L.push(line(i));
     if (g.length > 8) L.push(`            … ${g.length - 8} more (report.json)`);
+    const cv = report.inspect.canvas ?? [];
+    const rows = report.inspect.canvasLayers ?? [];
+    if (cv.length) { L.push(`  canvas    ${cv.length} canvas layer(s) that do not draw the same picture for the same time:`); for (const m of cv.slice(0, 4)) L.push(`            - ${m}`); }
+    if (rows.length) {                                              // silence must not be the only sign that the check ran
+      const good = rows.filter(r => r.ok), slow = [...rows].sort((a, b) => b.drawMs - a.drawMs)[0];
+      const ms = x => x < 10 ? x.toFixed(1) : String(Math.round(x));
+      if (good.length) L.push(`  canvas    ${cv.length ? 'the other ' : ''}${good.length} canvas layer(s) drew the same picture twice at ${good[0].moments.length} moments (two orders): deterministic · slowest draw ${ms(slow.drawMs)} ms on the CPU (${slow.name})`);
+    }
     const rv = report.inspect.review;
     if (rv.length) {
       L.push(`  review    ${rv.length} to look at — text overlaps are often intentional (ghost / glow copies, per-letter boxes, a wipe), and a font that is not available is drawn in a fallback; check them on the contact sheet, or use --strict to fail on them:`);

package/ai/tools/lookup.mjs

@@ -105,9 +105,20 @@ export function searchDocs(root, word) {
       const heading = s.heading.toLowerCase();
       const body = s.lines.join('\n').toLowerCase();
       if (!tokens.every(t => body.includes(t))) continue;
-      const inHeading = tokens.every(t => heading.includes(t));
+      const flat = (x) => x.replace(/[^a-z0-9]/g, '');                       // "motionBlur" is the heading "Motion blur"
+      const inHeading = tokens.every(t => heading.includes(t) || (flat(t).length > 2 && flat(heading).includes(flat(t))));
       const count = tokens.reduce((n, t) => n + body.split(t).length - 1, 0);
-      scored.push({ s, score: (inHeading ? 1000 : 0) + Math.min(count, 50) + bonus });
+      // the word as a table row (`| \`path\` | …`, the first cell) or as a call in code (`steps(n)`) says the section is ABOUT it, not that it only mentions it
+      const row = tokens.some(t => s.lines.some(l => new RegExp(`^\\|\\s*\\*{0,2}\\x60${t.replace(/[^a-z0-9]/g, '')}\\x60`).test(l.toLowerCase())));
+      const calls = (t) => {                                                 // the word followed by a bracket INSIDE code: a fenced block or an inline `span` (not prose that has a bracket after it)
+        const w = t.replace(/[^a-z0-9]/g, ''), re = new RegExp(`\\b${w}\\s*\\(`);
+        const fences = [...body.matchAll(/```[\s\S]*?```/g)].map(m => m[0]);
+        const inline = [...body.replace(/```[\s\S]*?```/g, ' ').matchAll(/`([^`\n]+)`/g)].map(m => m[1]);
+        return [...fences, ...inline].some(code => re.test(code));
+      };
+      const call = tokens.some(calls);
+      const exact = tokens.length === 1 && flat(heading) === flat(tokens[0]);                // the heading IS the word
+      scored.push({ s, score: (exact ? 1500 : 0) + (inHeading ? 1000 : 0) + (row ? 1100 : 0) + (call ? 300 : 0) + Math.min(count, 50) + bonus });
     }
   }
   scored.sort((a, b) => b.score - a.score);
@@ -155,6 +166,8 @@ export function newPage(name, { cwd = process.cwd(), root = PACKAGE_ROOT, force
     .replace('<title>pixi-effects video</title>', `<title>${base.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</title>`)
     // the size sits in two places (the canvas attributes and W / H) and the length in one; the poster follows DURATION
     .replace('<canvas id="stage" width="1280" height="720">', size ? `<canvas id="stage" width="${size.width}" height="${size.height}">` : '<canvas id="stage" width="1280" height="720">')
+    // a tall or square page would be 960 px wide and far taller than a laptop screen: its width follows a height of about 760 px
+    .replace('.stage { position: relative; width: min(960px, 100%); }', size ? `.stage { position: relative; width: min(${Math.min(960, Math.round(760 * size.width / size.height))}px, 100%); }` : '.stage { position: relative; width: min(960px, 100%); }')
     .replace('const W = 1280, H = 720, FPS = 30, DURATION = 6;', `const W = ${size ? size.width : 1280}, H = ${size ? size.height : 720}, FPS = 30, DURATION = ${duration ?? 6};`);
   fs.writeFileSync(file, html);
   return { file };

package/dist/{Base-pNq6sVGl.d.cts → Base-BlA6SeqJ.d.cts}

@@ -1,5 +1,5 @@
 import { Container } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape } from './types-CavnUvd5.cjs';
+import { S as SequenceSpec, C as CompositionShape } from './types-DvnXXm33.cjs';
 
 /**
  * Resolves a routed keyframe path to a concrete tween target.

package/dist/{Base-CXsMdmJB.d.ts → Base-YqM0Ljvp.d.ts}

@@ -1,5 +1,5 @@
 import { Container } from 'pixi.js';
-import { S as SequenceSpec, C as CompositionShape } from './types-CavnUvd5.js';
+import { S as SequenceSpec, C as CompositionShape } from './types-DvnXXm33.js';
 
 /**
  * Resolves a routed keyframe path to a concrete tween target.

package/dist/Composition-5KZETM4J.js

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

package/dist/{Composition-NDXKQHB4.js.map → Composition-5KZETM4J.js.map}

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

package/dist/Composition-MHDI7UNZ.cjs

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

package/dist/{Composition-OLH7RC5Z.cjs.map → Composition-MHDI7UNZ.cjs.map}

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

package/dist/Controller.d.cts

@@ -1,6 +1,6 @@
-import { l as Movie } from './Movie-Db4QnMIH.cjs';
+import { l as Movie } from './Movie-CJN_gvLB.cjs';
 import 'pixi.js';
-import './types-CavnUvd5.cjs';
+import './types-DvnXXm33.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,6 +1,6 @@
-import { l as Movie } from './Movie-VYtUN4TS.js';
+import { l as Movie } from './Movie-CfHaGmUP.js';
 import 'pixi.js';
-import './types-CavnUvd5.js';
+import './types-DvnXXm33.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-VYtUN4TS.d.ts → Movie-CJN_gvLB.d.cts}

@@ -1,5 +1,5 @@
 import { Application } from 'pixi.js';
-import { Z as Stop, c as AssetSpec, k as CompositionSpec } from './types-CavnUvd5.js';
+import { $ as Stop, c as AssetSpec, m as CompositionSpec } from './types-DvnXXm33.cjs';
 
 type EaseFn = (p: number) => number;
 
@@ -232,6 +232,11 @@ interface AudioSourceReport {
     /** Loudest sample of the MIX while this source plays, dBFS (−120 = silence). */
     peakDb: number;
     sound: SoundMeasure;
+    /**
+     * How far below the loudest sample of the MIX around its own loudest moment this source is, dB (0 = it is the loudest thing there; 20 = the mix is 20 dB louder, so
+     * the source is hardly heard). Absent for a sound inside a remapped composition (its time is not the movie's).
+     */
+    belowMixDb?: number;
     /** For a `music` layer: its score read back (bars per track, what starts in each bar, the drum spans). */
     music?: MusicSummary;
 }
@@ -292,12 +297,25 @@ interface FontReport {
     failedUnused: string[];
 }
 
+/** One canvas layer as the check saw it. */
+interface CanvasRow {
+    name: string;
+    /** The moments (seconds of the layer's own time) it was drawn at, in two orders. */
+    moments: number[];
+    /** The usual time of one draw on the CPU canvas of the check (the browser's GPU may be faster or slower). */
+    drawMs: number;
+    ok: boolean;
+    /** Why not, in a sentence (empty when ok). */
+    problem: string;
+}
+
 /** One kind of issue, with how many frames it was seen in. Issues that differ only by numbers are one kind. */
 interface IssueGroup {
     message: string;
     count: number;
     firstFrame: number;
-    lastFrame: number;
+    lastFrame: number; /** `'canvas'`: a canvas layer that does not draw the same picture for the same time (not about the layout; `check` lists it under its own heading). */
+    kind?: 'canvas';
 }
 interface ReviewOptions {
     /** Moments to resolve and report: `3.5`, `50%`, `f120`, `title@end` (comma-separated). */
@@ -312,6 +330,8 @@ interface ReviewReport {
     problems: IssueGroup[];
     /** Text overlaps and fonts that are not available: often intentional, look at them on the contact sheet. */
     review: IssueGroup[];
+    /** Every canvas layer as the determinism check saw it (a failing one is also in `problems` with `kind: 'canvas'`). */
+    canvas: CanvasRow[];
     fonts: FontReport;
     /** The sound as numbers (`movie.inspectAudio()`), or null for a movie with no audio. */
     audio: AudioReport | null;
@@ -812,6 +832,10 @@ declare class Movie {
      * the canvas, cut by an edge, empty, or overlapping other text. Seeks there and stays there.
      */
     inspect(frame?: number, opts?: InspectOptions): Promise<InspectReport>;
+    /** The canvas layers whose same frame is not the same picture (what `check` reports as a problem): one sentence each. */
+    canvasProblems(): string[];
+    /** Every canvas layer as the determinism check saw it: the moments drawn, the usual time of a draw in ms, and whether the same time gave the same picture (`check` prints it even when all pass). */
+    canvasReport(): CanvasRow[];
     /**
      * Every layer as a row with absolute start / end / keyframe times (seconds), plus the transition windows. Runs of
      * similar layers (`pop-1` … `pop-12`) are one row with a `parts` span each. Read it, or draw it with `timelineChart()`.

package/dist/{Movie-Db4QnMIH.d.cts → Movie-CfHaGmUP.d.ts}

@@ -1,5 +1,5 @@
 import { Application } from 'pixi.js';
-import { Z as Stop, c as AssetSpec, k as CompositionSpec } from './types-CavnUvd5.cjs';
+import { $ as Stop, c as AssetSpec, m as CompositionSpec } from './types-DvnXXm33.js';
 
 type EaseFn = (p: number) => number;
 
@@ -232,6 +232,11 @@ interface AudioSourceReport {
     /** Loudest sample of the MIX while this source plays, dBFS (−120 = silence). */
     peakDb: number;
     sound: SoundMeasure;
+    /**
+     * How far below the loudest sample of the MIX around its own loudest moment this source is, dB (0 = it is the loudest thing there; 20 = the mix is 20 dB louder, so
+     * the source is hardly heard). Absent for a sound inside a remapped composition (its time is not the movie's).
+     */
+    belowMixDb?: number;
     /** For a `music` layer: its score read back (bars per track, what starts in each bar, the drum spans). */
     music?: MusicSummary;
 }
@@ -292,12 +297,25 @@ interface FontReport {
     failedUnused: string[];
 }
 
+/** One canvas layer as the check saw it. */
+interface CanvasRow {
+    name: string;
+    /** The moments (seconds of the layer's own time) it was drawn at, in two orders. */
+    moments: number[];
+    /** The usual time of one draw on the CPU canvas of the check (the browser's GPU may be faster or slower). */
+    drawMs: number;
+    ok: boolean;
+    /** Why not, in a sentence (empty when ok). */
+    problem: string;
+}
+
 /** One kind of issue, with how many frames it was seen in. Issues that differ only by numbers are one kind. */
 interface IssueGroup {
     message: string;
     count: number;
     firstFrame: number;
-    lastFrame: number;
+    lastFrame: number; /** `'canvas'`: a canvas layer that does not draw the same picture for the same time (not about the layout; `check` lists it under its own heading). */
+    kind?: 'canvas';
 }
 interface ReviewOptions {
     /** Moments to resolve and report: `3.5`, `50%`, `f120`, `title@end` (comma-separated). */
@@ -312,6 +330,8 @@ interface ReviewReport {
     problems: IssueGroup[];
     /** Text overlaps and fonts that are not available: often intentional, look at them on the contact sheet. */
     review: IssueGroup[];
+    /** Every canvas layer as the determinism check saw it (a failing one is also in `problems` with `kind: 'canvas'`). */
+    canvas: CanvasRow[];
     fonts: FontReport;
     /** The sound as numbers (`movie.inspectAudio()`), or null for a movie with no audio. */
     audio: AudioReport | null;
@@ -812,6 +832,10 @@ declare class Movie {
      * the canvas, cut by an edge, empty, or overlapping other text. Seeks there and stays there.
      */
     inspect(frame?: number, opts?: InspectOptions): Promise<InspectReport>;
+    /** The canvas layers whose same frame is not the same picture (what `check` reports as a problem): one sentence each. */
+    canvasProblems(): string[];
+    /** Every canvas layer as the determinism check saw it: the moments drawn, the usual time of a draw in ms, and whether the same time gave the same picture (`check` prints it even when all pass). */
+    canvasReport(): CanvasRow[];
     /**
      * Every layer as a row with absolute start / end / keyframe times (seconds), plus the transition windows. Runs of
      * similar layers (`pop-1` … `pop-12`) are one row with a `parts` span each. Read it, or draw it with `timelineChart()`.

package/dist/{Spans-QHHWC2PB.js → Spans-FSSO2HGX.js}

@@ -1,7 +1,7 @@
-import { CompositionSequence } from './chunk-XV4L72FW.js';
-import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-Y253JQOH.js';
-import './chunk-RTJD3ZSW.js';
-import './chunk-ITDYFBB6.js';
+import { CompositionSequence } from './chunk-IPQNT65V.js';
+import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-SBR75G73.js';
+import './chunk-VNP7QCJE.js';
+import './chunk-32MMNDDN.js';
 import './chunk-BXOCEZ4U.js';
 
 // src/sequences/Spans.ts
@@ -49,5 +49,5 @@ var SpansSequence = class extends CompositionSequence {
 };
 
 export { SpansSequence };
-//# sourceMappingURL=Spans-QHHWC2PB.js.map
-//# sourceMappingURL=Spans-QHHWC2PB.js.map
+//# sourceMappingURL=Spans-FSSO2HGX.js.map
+//# sourceMappingURL=Spans-FSSO2HGX.js.map

package/dist/{Spans-QHHWC2PB.js.map → Spans-FSSO2HGX.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-QHHWC2PB.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-FSSO2HGX.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"]}

package/dist/{Spans-QRMN2EZO.cjs → Spans-WVJH77BW.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunk5IJENZOG_cjs = require('./chunk-5IJENZOG.cjs');
-var chunkLEECUCTG_cjs = require('./chunk-LEECUCTG.cjs');
-require('./chunk-IMQJVRMT.cjs');
-require('./chunk-GL2AQFLQ.cjs');
+var chunkMJMOPWMK_cjs = require('./chunk-MJMOPWMK.cjs');
+var chunkQHIOOK5S_cjs = require('./chunk-QHIOOK5S.cjs');
+require('./chunk-JN7JHNZR.cjs');
+require('./chunk-3SAS3ZE5.cjs');
 require('./chunk-TWZNOUM7.cjs');
 
 // src/sequences/Spans.ts
@@ -12,12 +12,12 @@ var strip = (props) => {
   const { visibleChars: _gone, ...rest } = props;
   return rest;
 };
-var SpansSequence = class extends chunk5IJENZOG_cjs.CompositionSequence {
+var SpansSequence = class extends chunkMJMOPWMK_cjs.CompositionSequence {
   _meta;
   _count = { value: 0, visibleChars: 0 };
   constructor(spec, parent, root) {
     super(spec, parent, root);
-    this._meta = chunkLEECUCTG_cjs.spansMeta.get(spec);
+    this._meta = chunkQHIOOK5S_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 chunk5IJENZOG_cjs.CompositionSequence {
     if (!this._meta?.typed) return;
     const scope = this.scope();
     const first = this.spec.initial?.visibleChars;
-    this._count.visibleChars = first === void 0 ? 0 : chunkLEECUCTG_cjs.resolveNumber(first, scope);
-    chunkLEECUCTG_cjs.bindCounterKeyframes(timeline, this._count, "visibleChars", () => this._distribute(), this.spec.keyframes ?? [], this.duration, offset + this.at, scope);
+    this._count.visibleChars = first === void 0 ? 0 : chunkQHIOOK5S_cjs.resolveNumber(first, scope);
+    chunkQHIOOK5S_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 chunk5IJENZOG_cjs.CompositionSequence {
     const total = Math.max(0, Math.floor(this._count.visibleChars));
     let i = 0;
     for (const child of this._children) {
-      if (!(child instanceof chunkLEECUCTG_cjs.TextSequence)) continue;
+      if (!(child instanceof chunkQHIOOK5S_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 chunk5IJENZOG_cjs.CompositionSequence {
 };
 
 exports.SpansSequence = SpansSequence;
-//# sourceMappingURL=Spans-QRMN2EZO.cjs.map
-//# sourceMappingURL=Spans-QRMN2EZO.cjs.map
+//# sourceMappingURL=Spans-WVJH77BW.cjs.map
+//# sourceMappingURL=Spans-WVJH77BW.cjs.map

package/dist/{Spans-QRMN2EZO.cjs.map → Spans-WVJH77BW.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-QRMN2EZO.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-WVJH77BW.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"]}