pixi-effects 0.40.0 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.42.0
+
+Interaction on top of `pick`: hover, dragging, a hit that looks at the picture, and a fix for a false warning that every rebuilt page with a `three` layer showed since 0.40.0. Nothing breaks.
+
+- **Fixed (found by an AI trial of the interactive features): a rebuilt `three` layer said the browser had taken its WebGL context.** `setVars`, `resize` and `rebuild` destroy the old layers; a three layer lets its context go with `forceContextLoss()`, and the loss event that follows was reported by the "the browser took this layer's WebGL context away" warning added in 0.40.0, though it was the layer's own doing. A page whose three layer changed a variable on a click showed a false warning. The layer now knows it is closing (`tests/three/budget.test.ts`; `tests/films/three-budget` rebuilds in Chrome and fails without the fix).
+- **New: `movie.hover({ onEnter, onLeave })`.** Which layer the pointer is over (in a `three` layer, which object), as callbacks on top of `pick`: `onEnter(hit)` when the layer under the pointer changes to another, `onLeave(hit)` for the one it left (also when the pointer leaves the picture or the returned stop function is called). While the pointer rests inside it is asked again on every frame, so a picture that moves under a still pointer is followed (a runner leaves the pointer with no pointer event in between: tested in real Chrome). `{ only, ignore }`, `cursor: true` (or a CSS cursor). A page-side tool: an exported video has no pointer.
+- **New: `pick` looks at the picture (`{ alpha }`), and an object of a `three` layer can be dragged (`hit.three.grab`, `movie.redraw()`).** `movie.pick(x, y, { alpha: 0.1 })` leaves out a pixel of an image, a video or a `canvas` layer whose alpha is at or below it (a transparent corner of a logo, the clear part of a drawn circle); off by default, nothing is read without it; shapes are hit by their outline, text and `shader` layers by their box (a shader's WebGL picture cannot be read back safely); a picture that cannot be read (another origin) stays a hit with one warning. `hit.three.grab('screen' | 'floor' | 'wall' | [nx, ny, nz])` fixes a plane through the point taken and `grab.move(x, y)` returns where the pointer's ray meets it and the `delta` from the point taken (null where it never does): the object follows the pointer exactly (checked in real Chrome on a wall and on a floor seen in perspective). `movie.redraw()` draws the paused frame again, quietly, for a layer that reads the page's own state. `pick`'s `only` / `ignore` take a group's name for everything in it (a card and its label: `only: ['card']`), as well as layer names and paths.
+- **Recipes and docs, from three fresh-AI trials of `pick`, `hover` and dragging** (a fox that stops when clicked, a card dragged onto a zone that lights, a logo clicked by its picture and a cube dragged along a floor; each page checked in a real browser): the recipes `pick-click`, `drag-drop` (a flat layer, a zone that lights by a variable alpha, the grab and grabbing cursors, `touch-action: none`) and `drag-3d` (with a floor variant) are complete pages whose code is tested (`tests/films/drag-recipe`, `drag3d`, `interact`, `pick`); SKILL.md says how to test an interactive page with pointer events (`check` does not click); the `vars` doc says a rebuild runs a three layer's `setup` again, so a 3D drag keeps the object's place in the page and calls `redraw()`.
+
+## 0.41.0
+
+`movie.pick` (what is under a point of the canvas) and a better fit of the light falloff in a `three` layer. Nothing breaks.
+
+- **New: `movie.pick(x, y)`, `pickAll`, `canvasPoint(event)`: what is under a point of the canvas.** The layer on top (or every layer under the point, the top first) at the frame on screen, in canvas pixels: a flat layer by its own shape (a rotated bar by its rotated rectangle, a circle by the circle), a `threeD` card by its projected quad, a `three` layer by a ray through its camera (`hit.three.object` names the object it met, with the point and the distance; with `followCamera` it is the composition's camera). `canvasPoint(event)` turns a pointer event into canvas pixels when the canvas is shown at another size. A layer outside its life, at alpha 0, hidden by a parent or outside its mask is not hit; `{ only, ignore }` choose by name or path. No clock: it reads the frame as the last draw left it, so it is a function of the frame (a seek back gives the same answer). Not in this version: alpha-exact hits, hover and drag. `check --at 3.5 --pick 640,360` (repeatable) prints what is under that point at each moment, so an AI can answer "is the button where I think" without looking. Recipe `pick-click`; `docs/api.md`; tests `tests/core/pick.test.ts`, `tests/films/pick` (real Chrome: rotated bar, circle, a turned card, a cube, a gliding camera, a canvas shown at twice its size).
+
+- **Changed: `followLights` fits the falloff better.** `falloff: 'smooth'` on a mirrored light is now three's cut-off distance and gain chosen from where the fall starts (before: the cut-off at `radius + falloffDistance`), which halves the largest difference to the composition's curve (0.15–0.40 before, 0.09–0.17 for a fall that is not steep; in the real picture mean 0.08–0.28 of 255, was 1.0–1.2). `'inverseSquare'` was already exact outside the radius (mean 0.02–0.03) but blows out inside it (three keeps rising where the composition holds 1; measured mean 21 of 255 with the lit objects inside the radius): the layer now says so once, with the distance and the way out (a smaller radius, or `'smooth'`). `tests/films/three-space`, `tests/three/spaceBridge.test.ts`.
+
 ## 0.40.0
 
 The `three` layer grows up: it can live in the composition's space, it loads glTF models, `check` holds it to the library's contract, and it can use three's WebGPU renderer. Nothing else changed; one type-only break (the last entry).

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.40.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.42.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.40.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.40.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.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.40.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.42.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.40.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.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.40.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.40.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.40.0/dist/present.js"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.42.0/dist/present.js"
     }
   }
   </script>

package/ai/tools/check.mjs

@@ -16,6 +16,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) ·
+ *          --pick X,Y (with --at, repeatable: what is under that canvas point at each moment, the top layer first, and the object a three layer met: `movie.pick`) ·
  *          --onion A:B (one picture of the movement between A and B seconds, frames overlaid: onion.png) ·
  *          --seam (a movie made to loop: the last frame to the first is compared with the steps between ordinary neighbouring frames; a jump is a problem) ·
  *          --strict (text overlaps and stops where the picture is still changing fail the check; by default they are only listed for review) · --out DIR · --frames N (contact sheet tiles, default 12) · --formats mp4,webm (default mp4) · --no-export ·
@@ -81,10 +82,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] [--crop X,Y,W,H] [--onion 1:3] [--seam] [--query a=1&b=2] [--var name=value] [--size 1920x1080,1080x1920] [--timeout S] [--root DIR] [--chrome PATH] [--strict] [--help]\n(the header of ai/tools/check.mjs explains each option)';
+export const USAGE = 'usage: node ai/tools/check.mjs <page.html> [--out DIR] [--frames N] [--formats mp4,webm] [--no-export] [--draft] [--at 3.5,title@end] [--crop X,Y,W,H] [--pick X,Y] [--onion 1:3] [--seam] [--query a=1&b=2] [--var name=value] [--size 1920x1080,1080x1920] [--timeout S] [--root DIR] [--chrome PATH] [--strict] [--help]\n(the header of ai/tools/check.mjs explains each option)';
 
 export function parseArgs(argv) {
-  const o = { page: null, out: null, frames: 12, formats: ['mp4'], export: true, timeout: 240, root: null, chrome: null, strict: false, at: null, crop: null, draft: false, onion: null, seam: false, query: null, vars: [], sizes: [], help: false };
+  const o = { page: null, out: null, frames: 12, formats: ['mp4'], export: true, timeout: 240, root: null, chrome: null, strict: false, at: null, crop: null, draft: false, onion: null, seam: false, query: null, pick: [], 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];
@@ -102,6 +103,11 @@ export function parseArgs(argv) {
       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 === '--pick') {
+      const m = need(i++, a).split(',').map(Number);
+      if (m.length !== 2 || !m.every(Number.isFinite)) throw new Error(`--pick must look like 640,360 (x, y in canvas pixels), got "${argv[i]}"`);
+      o.pick.push({ x: m[0], y: m[1] });
+    }
     else if (a === '--var') o.vars.push(parseVar(need(i++, a)));
     else if (a === '--size') o.sizes.push(...parseSizes(need(i++, a)));
     else if (a === '--seam') o.seam = true;
@@ -118,6 +124,7 @@ export function parseArgs(argv) {
     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)');
+  if (o.pick.length && !o.at) throw new Error('--pick asks about the moments of --at: give --at too (for example --at 3.5 --pick 640,360)');
   return o;
 }
 
@@ -466,6 +473,10 @@ export async function runCheck(opts, log = console.log) {
         // 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(() => []);
         if (rows.some(([, px]) => px > 0)) w.depthBlur = Object.fromEntries(rows);
+        // pick: what is under each --pick point at this moment (the frame is on screen after the snapshot above)
+        if (opts.pick.length) {
+          w.pick = await cdp.eval(`(${JSON.stringify(opts.pick)}).map(p => ({ x: p.x, y: p.y, hits: movie.pickAll(p.x, p.y).map(h => ({ name: h.name ?? h.path, path: h.path, kind: h.kind, object: h.three ? h.three.object : undefined })) }))`).catch(() => []);
+        }
         // light: how lit each threeD layer is at this moment (left out when the composition has no light)
         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);
@@ -702,6 +713,12 @@ function finish(report, outDir, log) {
     L.push(`  sizes     ${g.map(x => `${x.size} ${x.issues.length ? x.issues.length + ' layout issue kind(s)' : 'no layout issue'}`).join(' · ')}${g.length > 1 ? ' (one contact sheet each: sheet.png, sheet-<size>.png)' : ''}`);
     for (const x of g) for (const i of x.issues.slice(0, 3)) L.push(`            - ${x.size}: ${i.message}`);
   }
+  for (const w of (report.at ?? []).filter(x => x.pick)) {
+    for (const p of w.pick) {
+      const says = p.hits.length ? p.hits.map(h => h.kind === 'three' ? `${h.name} (three: ${h.object || '?'})` : h.name).join(', ') : 'nothing';
+      L.push(`  pick      ${w.label} (${p.x}, ${p.y}) — ${says}`);
+    }
+  }
   for (const w of (report.at ?? []).filter(x => x.depthBlur)) {
     const shown = Object.entries(w.depthBlur).slice(0, 8).map(([k, px]) => `${k} ${px} px`).join(', ');
     L.push(`  depth     ${w.label} — ${shown}${Object.keys(w.depthBlur).length > 8 ? ', …' : ''} (blur of each threeD layer at that moment; 0 = sharp)`);

package/dist/Composition-N6BOROJ2.cjs

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

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

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

package/dist/Composition-YGBQX3HZ.js

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

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

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

package/dist/Controller.d.cts

@@ -1,4 +1,4 @@
-import { M as Movie } from './Movie-CMq4KFmc.cjs';
+import { M as Movie } from './Movie-BHGhg-fJ.cjs';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.cjs';
 import './types-DIh93lFb.cjs';

package/dist/Controller.d.ts

@@ -1,4 +1,4 @@
-import { M as Movie } from './Movie-CG6Jy1tx.js';
+import { M as Movie } from './Movie-CBVFZ1kg.js';
 import 'pixi.js';
 import './soundEntry-DT13DNt8.js';
 import './types-DIh93lFb.js';

package/dist/{Movie-CMq4KFmc.d.cts → Movie-BHGhg-fJ.d.cts}

@@ -235,6 +235,69 @@ interface InspectOptions {
     layers?: 'all' | 'visible' | 'none';
 }
 
+interface PickHit {
+    /** The layer's `name` (when it has one). */
+    name?: string;
+    /** Names (or `type#index`) from the root, joined by `/`: the same as `movie.inspect()`'s `path`. */
+    path: string;
+    type: string;
+    /** `'flat'`: a 2D layer; `'card'`: a `threeD` layer (its projected card); `'three'`: a `three` layer, and `three` says what the ray met. */
+    kind: 'flat' | 'card' | 'three';
+    /** The point asked about, in canvas pixels. */
+    point: {
+        x: number;
+        y: number;
+    };
+    /** A flat layer: the point in the layer's own pixels (the top-left of its picture is 0, 0). */
+    local?: {
+        x: number;
+        y: number;
+    };
+    /** 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;
+        point: [number, number, number];
+        distance: number;
+        object3d?: unknown;
+        /**
+         * Drag what the ray met: `grab(plane)` fixes a plane through the hit point (`'screen'` facing the camera, the default; `'floor'`; `'wall'`; or a normal `[x, y, z]`), and `move(x, y)` takes the pointer
+         * in canvas pixels and gives where its ray meets that plane (`point`) and how far that is from the hit point (`delta`): move the object by it. null where the ray never meets the plane.
+         */
+        grab?: (plane?: 'screen' | 'floor' | 'wall' | [number, number, number]) => {
+            move: (x: number, y: number) => {
+                point: [number, number, number];
+                delta: [number, number, number];
+            } | null;
+        };
+    };
+}
+interface PickOptions {
+    /**
+     * Look at the picture, not the box: a pixel of an image, a video or a `canvas` layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
+     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, text and `shader` layers by their box; a picture that cannot be read (from another origin) stays a hit.
+     */
+    alpha?: number;
+    /** Only these layers can be hit (by `name` or by `path`; a group's name stands for everything in it). */
+    only?: string[];
+    /** These layers cannot be hit (by `name` or by `path`; a group's name stands for everything in it). */
+    ignore?: string[];
+}
+
+/**
+ * `movie.hover({ onEnter, onLeave })`: which layer (or which object of a three layer) the pointer is over, as two callbacks. It is a page-side tool on top of `movie.pick`: it listens to the
+ * canvas, asks `pick` where the pointer is, and calls `onEnter(hit)` when the layer under it changes to another and `onLeave(hit)` for the one it left. While the pointer rests inside the
+ * picture it asks again on every frame, so a layer that runs away from a still pointer is left. Nothing here is part of the video: an exported file has no pointer.
+ */
+
+interface HoverOptions extends PickOptions {
+    /** The layer (or, in a `three` layer, the object) the pointer has just come onto. */
+    onEnter?: (hit: PickHit) => void;
+    /** The one it has just left (also when the pointer leaves the picture, or `stop()` is called). */
+    onLeave?: (hit: PickHit) => void;
+    /** A CSS cursor to show while something is hovered (`true` is `'pointer'`); it goes back when nothing is. */
+    cursor?: string | boolean;
+}
+
 /** One layer (or a run of similar layers) on the timeline. Times are in seconds, absolute (from the start of the movie). */
 interface TimelineRow {
     /** `parent/child` for a layer inside a composition. */
@@ -612,6 +675,11 @@ declare class Movie {
     private _runRebuild;
     private _doRebuild;
     gotoFrame(frame: number, force?: boolean): Promise<void>;
+    /**
+     * Draw the frame on screen again, quietly (no `seeking` / `seeked`). For a paused movie when something outside it that a layer reads has changed: a `three` layer whose `update` reads the page's own
+     * state (a dragged object's place) shows it after `await movie.redraw()`. A playing movie needs no call: the next frame draws it.
+     */
+    redraw(): Promise<void>;
     /** Run `fn` with `seeking` / `seeked` silenced: the movie is moving its own playhead, not answering a seek. */
     private _quietly;
     private _emitError;
@@ -678,6 +746,25 @@ declare class Movie {
      * Where every layer is drawn at `frame` (canvas pixels, visibility) plus `issues` — text that is off
      * the canvas, cut by an edge, empty, or overlapping other text. Seeks there and stays there.
      */
+    /**
+     * What is under the canvas point (x, y) (canvas pixels: the movie's own `width` x `height`; `canvasPoint(event)` makes them from a pointer event) at the frame on screen: the layer on
+     * top, or null. A flat layer is hit by its own shape, a `threeD` card by its projected quad, a `three` layer by a ray through its camera (`hit.three` has the object). It reads the
+     * frame as the last draw left it, so after `await movie.snapshot(frame)` or any seek it answers for that frame. `opts.only` / `opts.ignore`: layer names or paths.
+     */
+    pick(x: number, y: number, opts?: PickOptions): PickHit | null;
+    /** Every layer under the canvas point, the one on top first (see `pick`). */
+    pickAll(x: number, y: number, opts?: PickOptions): PickHit[];
+    /**
+     * Which layer the pointer is over, as callbacks: `onEnter(hit)` when the layer (or, in a `three` layer, the object) under the pointer changes to another, `onLeave(hit)` for the one it
+     * left (also when the pointer leaves the picture). While the pointer rests inside, it is asked again on every frame, so a picture that moves under a still pointer is followed.
+     * `{ only, ignore }` as for `pick`; `cursor: true` (or a CSS cursor) shows it while something is hovered. Returns the function that stops it. A page-side tool: an exported video has no pointer.
+     */
+    hover(opts?: HoverOptions): () => void;
+    /** A pointer event's place in canvas pixels (the canvas may be shown larger or smaller than its own size): `movie.pick(...movie.canvasPoint(event))`. */
+    canvasPoint(event: {
+        clientX: number;
+        clientY: number;
+    }): [number, number];
     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[];
@@ -768,4 +855,4 @@ declare class Movie {
     destroy(): Promise<void>;
 }
 
-export { type ContactSheetOptions as C, type FontReport as F, type InspectOptions as I, type LayerInfo as L, Movie as M, type OnionSkinOptions as O, type ProgressEvent as P, type RebuildOptions as R, type SnapshotOptions as S, type ThumbnailOptions as T, type VolumeEvent as V, type MotionBlurSpec as a, type FrameEvent as b, type InspectReport as c, type IssueGroup as d, type LoadProgressState as e, type LoadStage as f, type LoaderOption as g, type LoopEvent as h, type MotionBlurOptions as i, type MovieErrorEvent as j, type MovieOptions as k, type RebuildReason as l, type RebuildReport as m, type RenderOptions as n, type ReviewOptions as o, type ReviewReport as p, type TimelineData as q, type TimelineHtmlOptions as r, type TimelineRow as s, type TimelineSvgOptions as t, type TimelineTransition as u, dismissLoader as v, failLoader as w, resolveLoader as x };
+export { type ContactSheetOptions as C, type FontReport as F, type HoverOptions as H, type InspectOptions as I, type LayerInfo as L, Movie as M, type OnionSkinOptions as O, type PickHit as P, type RebuildOptions as R, type SnapshotOptions as S, type ThumbnailOptions as T, type VolumeEvent as V, type MotionBlurSpec as a, type FrameEvent as b, type InspectReport as c, type IssueGroup as d, type LoadProgressState as e, type LoadStage as f, type LoaderOption as g, type LoopEvent as h, type MotionBlurOptions as i, type MovieErrorEvent as j, type MovieOptions as k, type PickOptions as l, type ProgressEvent as m, type RebuildReason as n, type RebuildReport as o, type RenderOptions as p, type ReviewOptions as q, type ReviewReport as r, type TimelineData as s, type TimelineHtmlOptions as t, type TimelineRow as u, type TimelineSvgOptions as v, type TimelineTransition as w, dismissLoader as x, failLoader as y, resolveLoader as z };

package/dist/{Movie-CG6Jy1tx.d.ts → Movie-CBVFZ1kg.d.ts}

@@ -235,6 +235,69 @@ interface InspectOptions {
     layers?: 'all' | 'visible' | 'none';
 }
 
+interface PickHit {
+    /** The layer's `name` (when it has one). */
+    name?: string;
+    /** Names (or `type#index`) from the root, joined by `/`: the same as `movie.inspect()`'s `path`. */
+    path: string;
+    type: string;
+    /** `'flat'`: a 2D layer; `'card'`: a `threeD` layer (its projected card); `'three'`: a `three` layer, and `three` says what the ray met. */
+    kind: 'flat' | 'card' | 'three';
+    /** The point asked about, in canvas pixels. */
+    point: {
+        x: number;
+        y: number;
+    };
+    /** A flat layer: the point in the layer's own pixels (the top-left of its picture is 0, 0). */
+    local?: {
+        x: number;
+        y: number;
+    };
+    /** 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;
+        point: [number, number, number];
+        distance: number;
+        object3d?: unknown;
+        /**
+         * Drag what the ray met: `grab(plane)` fixes a plane through the hit point (`'screen'` facing the camera, the default; `'floor'`; `'wall'`; or a normal `[x, y, z]`), and `move(x, y)` takes the pointer
+         * in canvas pixels and gives where its ray meets that plane (`point`) and how far that is from the hit point (`delta`): move the object by it. null where the ray never meets the plane.
+         */
+        grab?: (plane?: 'screen' | 'floor' | 'wall' | [number, number, number]) => {
+            move: (x: number, y: number) => {
+                point: [number, number, number];
+                delta: [number, number, number];
+            } | null;
+        };
+    };
+}
+interface PickOptions {
+    /**
+     * Look at the picture, not the box: a pixel of an image, a video or a `canvas` layer whose alpha is at or below this (0..1; `0.1` leaves out what is nearly clear) is not a hit.
+     * Off by default (the box is the picture, and nothing is read). Shapes are always hit by their outline, text and `shader` layers by their box; a picture that cannot be read (from another origin) stays a hit.
+     */
+    alpha?: number;
+    /** Only these layers can be hit (by `name` or by `path`; a group's name stands for everything in it). */
+    only?: string[];
+    /** These layers cannot be hit (by `name` or by `path`; a group's name stands for everything in it). */
+    ignore?: string[];
+}
+
+/**
+ * `movie.hover({ onEnter, onLeave })`: which layer (or which object of a three layer) the pointer is over, as two callbacks. It is a page-side tool on top of `movie.pick`: it listens to the
+ * canvas, asks `pick` where the pointer is, and calls `onEnter(hit)` when the layer under it changes to another and `onLeave(hit)` for the one it left. While the pointer rests inside the
+ * picture it asks again on every frame, so a layer that runs away from a still pointer is left. Nothing here is part of the video: an exported file has no pointer.
+ */
+
+interface HoverOptions extends PickOptions {
+    /** The layer (or, in a `three` layer, the object) the pointer has just come onto. */
+    onEnter?: (hit: PickHit) => void;
+    /** The one it has just left (also when the pointer leaves the picture, or `stop()` is called). */
+    onLeave?: (hit: PickHit) => void;
+    /** A CSS cursor to show while something is hovered (`true` is `'pointer'`); it goes back when nothing is. */
+    cursor?: string | boolean;
+}
+
 /** One layer (or a run of similar layers) on the timeline. Times are in seconds, absolute (from the start of the movie). */
 interface TimelineRow {
     /** `parent/child` for a layer inside a composition. */
@@ -612,6 +675,11 @@ declare class Movie {
     private _runRebuild;
     private _doRebuild;
     gotoFrame(frame: number, force?: boolean): Promise<void>;
+    /**
+     * Draw the frame on screen again, quietly (no `seeking` / `seeked`). For a paused movie when something outside it that a layer reads has changed: a `three` layer whose `update` reads the page's own
+     * state (a dragged object's place) shows it after `await movie.redraw()`. A playing movie needs no call: the next frame draws it.
+     */
+    redraw(): Promise<void>;
     /** Run `fn` with `seeking` / `seeked` silenced: the movie is moving its own playhead, not answering a seek. */
     private _quietly;
     private _emitError;
@@ -678,6 +746,25 @@ declare class Movie {
      * Where every layer is drawn at `frame` (canvas pixels, visibility) plus `issues` — text that is off
      * the canvas, cut by an edge, empty, or overlapping other text. Seeks there and stays there.
      */
+    /**
+     * What is under the canvas point (x, y) (canvas pixels: the movie's own `width` x `height`; `canvasPoint(event)` makes them from a pointer event) at the frame on screen: the layer on
+     * top, or null. A flat layer is hit by its own shape, a `threeD` card by its projected quad, a `three` layer by a ray through its camera (`hit.three` has the object). It reads the
+     * frame as the last draw left it, so after `await movie.snapshot(frame)` or any seek it answers for that frame. `opts.only` / `opts.ignore`: layer names or paths.
+     */
+    pick(x: number, y: number, opts?: PickOptions): PickHit | null;
+    /** Every layer under the canvas point, the one on top first (see `pick`). */
+    pickAll(x: number, y: number, opts?: PickOptions): PickHit[];
+    /**
+     * Which layer the pointer is over, as callbacks: `onEnter(hit)` when the layer (or, in a `three` layer, the object) under the pointer changes to another, `onLeave(hit)` for the one it
+     * left (also when the pointer leaves the picture). While the pointer rests inside, it is asked again on every frame, so a picture that moves under a still pointer is followed.
+     * `{ only, ignore }` as for `pick`; `cursor: true` (or a CSS cursor) shows it while something is hovered. Returns the function that stops it. A page-side tool: an exported video has no pointer.
+     */
+    hover(opts?: HoverOptions): () => void;
+    /** A pointer event's place in canvas pixels (the canvas may be shown larger or smaller than its own size): `movie.pick(...movie.canvasPoint(event))`. */
+    canvasPoint(event: {
+        clientX: number;
+        clientY: number;
+    }): [number, number];
     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[];
@@ -768,4 +855,4 @@ declare class Movie {
     destroy(): Promise<void>;
 }
 
-export { type ContactSheetOptions as C, type FontReport as F, type InspectOptions as I, type LayerInfo as L, Movie as M, type OnionSkinOptions as O, type ProgressEvent as P, type RebuildOptions as R, type SnapshotOptions as S, type ThumbnailOptions as T, type VolumeEvent as V, type MotionBlurSpec as a, type FrameEvent as b, type InspectReport as c, type IssueGroup as d, type LoadProgressState as e, type LoadStage as f, type LoaderOption as g, type LoopEvent as h, type MotionBlurOptions as i, type MovieErrorEvent as j, type MovieOptions as k, type RebuildReason as l, type RebuildReport as m, type RenderOptions as n, type ReviewOptions as o, type ReviewReport as p, type TimelineData as q, type TimelineHtmlOptions as r, type TimelineRow as s, type TimelineSvgOptions as t, type TimelineTransition as u, dismissLoader as v, failLoader as w, resolveLoader as x };
+export { type ContactSheetOptions as C, type FontReport as F, type HoverOptions as H, type InspectOptions as I, type LayerInfo as L, Movie as M, type OnionSkinOptions as O, type PickHit as P, type RebuildOptions as R, type SnapshotOptions as S, type ThumbnailOptions as T, type VolumeEvent as V, type MotionBlurSpec as a, type FrameEvent as b, type InspectReport as c, type IssueGroup as d, type LoadProgressState as e, type LoadStage as f, type LoaderOption as g, type LoopEvent as h, type MotionBlurOptions as i, type MovieErrorEvent as j, type MovieOptions as k, type PickOptions as l, type ProgressEvent as m, type RebuildReason as n, type RebuildReport as o, type RenderOptions as p, type ReviewOptions as q, type ReviewReport as r, type TimelineData as s, type TimelineHtmlOptions as t, type TimelineRow as u, type TimelineSvgOptions as v, type TimelineTransition as w, dismissLoader as x, failLoader as y, resolveLoader as z };

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

@@ -1,5 +1,5 @@
-import { CompositionSequence } from './chunk-26Z544SH.js';
-import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-LMWXR5OC.js';
+import { CompositionSequence } from './chunk-ICI6ACHY.js';
+import { spansMeta, resolveNumber, bindCounterKeyframes, TextSequence } from './chunk-4QVQ5UJJ.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-TWO4VN5H.js.map
-//# sourceMappingURL=Spans-TWO4VN5H.js.map
+//# sourceMappingURL=Spans-6L2ZVECX.js.map
+//# sourceMappingURL=Spans-6L2ZVECX.js.map

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

package/dist/{Spans-APNJHCYO.cjs → Spans-XTIWYSNO.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk27PYJ4JY_cjs = require('./chunk-27PYJ4JY.cjs');
-var chunk7EI2N7WO_cjs = require('./chunk-7EI2N7WO.cjs');
+var chunk3HZV3UHU_cjs = require('./chunk-3HZV3UHU.cjs');
+var chunkX62H3RBG_cjs = require('./chunk-X62H3RBG.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 chunk27PYJ4JY_cjs.CompositionSequence {
+var SpansSequence = class extends chunk3HZV3UHU_cjs.CompositionSequence {
   _meta;
   _count = { value: 0, visibleChars: 0 };
   constructor(spec, parent, root) {
     super(spec, parent, root);
-    this._meta = chunk7EI2N7WO_cjs.spansMeta.get(spec);
+    this._meta = chunkX62H3RBG_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 chunk27PYJ4JY_cjs.CompositionSequence {
     if (!this._meta?.typed) return;
     const scope = this.scope();
     const first = this.spec.initial?.visibleChars;
-    this._count.visibleChars = first === void 0 ? 0 : chunk7EI2N7WO_cjs.resolveNumber(first, scope);
-    chunk7EI2N7WO_cjs.bindCounterKeyframes(timeline, this._count, "visibleChars", () => this._distribute(), this.spec.keyframes ?? [], this.duration, offset + this.at, scope);
+    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._distribute();
   }
   /** Every piece shows its part of the first N characters of the whole text. */
@@ -43,7 +43,7 @@ var SpansSequence = class extends chunk27PYJ4JY_cjs.CompositionSequence {
     const total = Math.max(0, Math.floor(this._count.visibleChars));
     let i = 0;
     for (const child of this._children) {
-      if (!(child instanceof chunk7EI2N7WO_cjs.TextSequence)) continue;
+      if (!(child instanceof chunkX62H3RBG_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 chunk27PYJ4JY_cjs.CompositionSequence {
 };
 
 exports.SpansSequence = SpansSequence;
-//# sourceMappingURL=Spans-APNJHCYO.cjs.map
-//# sourceMappingURL=Spans-APNJHCYO.cjs.map
+//# sourceMappingURL=Spans-XTIWYSNO.cjs.map
+//# sourceMappingURL=Spans-XTIWYSNO.cjs.map

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