pixi-effects 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +16 -10
  3. package/ai/SKILL.md +1 -1
  4. package/ai/reference/cheatsheet.md +5 -1
  5. package/ai/template.html +4 -3
  6. package/ai/tools/check.mjs +14 -5
  7. package/ai/tools/render.mjs +202 -0
  8. package/ai/tools/view.mjs +269 -0
  9. package/dist/{Base-4vNLl4tH.d.cts → Base-CSIulyIq.d.cts} +1 -1
  10. package/dist/{Base-CD4AoT5-.d.ts → Base-DVgwyIUj.d.ts} +1 -1
  11. package/dist/Composition-3KHQPRBA.cjs +14 -0
  12. package/dist/{Composition-Y5VZSDDP.cjs.map → Composition-3KHQPRBA.cjs.map} +1 -1
  13. package/dist/Composition-DT657FO5.js +5 -0
  14. package/dist/{Composition-7SO5WYHU.js.map → Composition-DT657FO5.js.map} +1 -1
  15. package/dist/Controller.cjs +67 -0
  16. package/dist/Controller.cjs.map +1 -1
  17. package/dist/Controller.d.cts +15 -2
  18. package/dist/Controller.d.ts +15 -2
  19. package/dist/Controller.js +67 -0
  20. package/dist/Controller.js.map +1 -1
  21. package/dist/{Movie-CADDBfpl.d.cts → Movie-B0OUKlZI.d.ts} +52 -2
  22. package/dist/{Movie-Ch2SUI1h.d.ts → Movie-BK9daiTt.d.cts} +52 -2
  23. package/dist/{chunk-B2FTJLNB.js → chunk-36Z4RIRK.js} +3 -3
  24. package/dist/{chunk-B2FTJLNB.js.map → chunk-36Z4RIRK.js.map} +1 -1
  25. package/dist/{chunk-7IJHJXDI.js → chunk-4O2NYDJG.js} +127 -10
  26. package/dist/chunk-4O2NYDJG.js.map +1 -0
  27. package/dist/{chunk-4AGJF5RK.cjs → chunk-4VSIJLU3.cjs} +21 -21
  28. package/dist/{chunk-4AGJF5RK.cjs.map → chunk-4VSIJLU3.cjs.map} +1 -1
  29. package/dist/{chunk-KQM2ZZMK.cjs → chunk-6I55T4OH.cjs} +166 -29
  30. package/dist/chunk-6I55T4OH.cjs.map +1 -0
  31. package/dist/index.cjs +188 -17
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/index.d.cts +4 -4
  34. package/dist/index.d.ts +4 -4
  35. package/dist/index.js +180 -9
  36. package/dist/index.js.map +1 -1
  37. package/dist/three.cjs +6 -5
  38. package/dist/three.cjs.map +1 -1
  39. package/dist/three.d.cts +2 -2
  40. package/dist/three.d.ts +2 -2
  41. package/dist/three.js +2 -1
  42. package/dist/three.js.map +1 -1
  43. package/dist/{types-DrW9QeKU.d.ts → types-oJijbn-K.d.cts} +14 -1
  44. package/dist/{types-DrW9QeKU.d.cts → types-oJijbn-K.d.ts} +14 -1
  45. package/docs/api.md +6 -0
  46. package/docs/dsl.md +48 -1
  47. package/llms-full.txt +60 -3
  48. package/package.json +7 -4
  49. package/dist/Composition-7SO5WYHU.js +0 -4
  50. package/dist/Composition-Y5VZSDDP.cjs +0 -13
  51. package/dist/chunk-7IJHJXDI.js.map +0 -1
  52. package/dist/chunk-KQM2ZZMK.cjs.map +0 -1
package/ai/tools/view.mjs ADDED
@@ -0,0 +1,269 @@
1
+ #!/usr/bin/env node
2
+ /**
3
+ * pixi-effects view — look at a composition page WITH its timeline, and scrub the one with the other.
4
+ *
5
+ * node ai/tools/view.mjs my-video.html (or: npx pixi-effects-view my-video.html)
6
+ *
7
+ * It serves the page's folder on a private port and opens your browser on a viewer: the page itself on top (its own player
8
+ * works as usual) and, under it, the timeline of every layer (`movie.timelineSvg()`) with a playhead that follows the movie.
9
+ * Click or drag on the timeline to seek the movie; click a layer's name to jump to where it starts; Space plays / pauses,
10
+ * ← / → step a frame (Shift: a second), Home / End jump to the ends. Stop it with Ctrl-C.
11
+ *
12
+ * Needs: Node >= 18. A browser (the default one is opened; --no-open prints the address instead). The page must follow
13
+ * ai/template.html (`window.movie`, `window.__ready = true`) and use a pixi-effects that has `movie.timelineSvg()` (0.7+).
14
+ * Options: --port N (default: a free one) · --no-open · --query "a=1" (added to the page URL) · --root DIR (default: the nearest folder above the page with dist/)
15
+ */
16
+ import http from 'node:http';
17
+ import fs from 'node:fs';
18
+ import path from 'node:path';
19
+ import { spawn } from 'node:child_process';
20
+ import { pathToFileURL } from 'node:url';
21
+ import { findRoot, serve } from './check.mjs';
22
+
23
+ export const VIEWER = '/__viewer';
24
+
25
+ export function parseViewArgs(argv) {
26
+ const o = { page: null, port: 0, open: true, query: null, root: null };
27
+ const need = (i, name) => { if (i + 1 >= argv.length) throw new Error(`${name} needs a value`); return argv[i + 1]; };
28
+ for (let i = 0; i < argv.length; i++) {
29
+ const a = argv[i];
30
+ if (a === '--port') o.port = Math.max(0, Math.round(Number(need(i++, a))) || 0);
31
+ else if (a === '--no-open') o.open = false;
32
+ else if (a === '--query') o.query = need(i++, a).replace(/^\?/, '');
33
+ else if (a === '--root') o.root = need(i++, a);
34
+ else if (a.startsWith('-')) throw new Error(`unknown option ${a} (see the header of view.mjs)`);
35
+ else if (!o.page) o.page = a;
36
+ else throw new Error(`unexpected argument ${a}`);
37
+ }
38
+ return o;
39
+ }
40
+
41
+ const escHtml = s => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
42
+
43
+ /** The viewer page: the composition in an iframe, its timeline under it (zoomable), a playhead, click / drag / keys to seek. */
44
+ export function viewerHtml({ pageUrl, title }) {
45
+ return `<!doctype html>
46
+ <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escHtml(title)} — timeline view</title>
47
+ <style>
48
+ :root { --bg: #f7f5f1; --ink: #1d2433; --dim: #6b7587; --line: #d9d5cc; --head: #e0245e; }
49
+ @media (prefers-color-scheme: dark) { :root { --bg: #0e1320; --ink: #e8eefc; --dim: #8fa0bf; --line: #26304a; --head: #ff5c8a; } }
50
+ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px system-ui, sans-serif; }
51
+ body { display: flex; flex-direction: column; }
52
+ header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
53
+ header b { font-size: 14px; font-weight: 600; }
54
+ #time { font-family: ui-monospace, Menlo, monospace; color: var(--dim); }
55
+ #status { color: var(--dim); }
56
+ .zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
57
+ #zlabel { min-width: 44px; text-align: center; font-family: ui-monospace, Menlo, monospace; color: var(--dim); }
58
+ button { font: inherit; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px; cursor: pointer; }
59
+ button:disabled { opacity: .4; cursor: default; }
60
+ #stage { flex: none; overflow: hidden; background: #000; }
61
+ iframe { border: 0; display: block; transform-origin: 0 0; }
62
+ #chart { flex: 1 1 0; min-height: 0; overflow: auto; border-top: 1px solid var(--line); display: flex; align-items: flex-start; }
63
+ #names { position: sticky; left: 0; z-index: 2; flex: none; width: 250px; background: var(--bg); border-right: 1px solid var(--line); }
64
+ #names .name { height: 22px; line-height: 22px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; font: 12px/22px ui-monospace, Menlo, monospace; cursor: pointer; }
65
+ #names .name:nth-of-type(odd) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
66
+ #names .name:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
67
+ #plot { flex: none; }
68
+ #plot svg { display: block; touch-action: none; user-select: none; cursor: col-resize; }
69
+ #plot svg .grid { stroke: var(--line); } #plot svg .tick { fill: var(--dim); font-size: 11px; }
70
+ #plot svg .band { fill: var(--ink); } #plot svg .key { fill: var(--ink); opacity: .85; } #plot svg .transition { fill: #4cc9f0; opacity: .16; } #plot svg .bar { opacity: .88; }
71
+ #plot svg .row:hover .band { fill-opacity: .1; }
72
+ #head line { stroke: var(--head); stroke-width: 2; } #head path { fill: var(--head); }
73
+ </style></head>
74
+ <body>
75
+ <header><b>${escHtml(title)}</b><button id="play" type="button" disabled>▶</button><span id="time">0.00 / 0.00 s · frame 0</span><span id="status">loading the page…</span>
76
+ <span class="zoom"><button id="zout" type="button" title="zoom out (-)" disabled>−</button><span id="zlabel">fit</span><button id="zin" type="button" title="zoom in (+, or Ctrl/⌘ + wheel)" disabled>+</button><button id="zfit" type="button" title="fit the whole movie (0)" disabled>fit</button></span></header>
77
+ <div id="stage"><iframe id="page" src="${escHtml(pageUrl)}" allow="autoplay; fullscreen"></iframe></div>
78
+ <div id="chart"><div id="names"></div><div id="plot"></div></div>
79
+ <script>
80
+ (() => {
81
+ const NS = 'http://www.w3.org/2000/svg';
82
+ const frame = document.getElementById('page'), chart = document.getElementById('chart'), stage = document.getElementById('stage');
83
+ const names = document.getElementById('names'), plot = document.getElementById('plot');
84
+ const $time = document.getElementById('time'), $status = document.getElementById('status'), $play = document.getElementById('play');
85
+ const $zin = document.getElementById('zin'), $zout = document.getElementById('zout'), $zfit = document.getElementById('zfit'), $zlabel = document.getElementById('zlabel');
86
+ const NAMES_W = 250, MAX_PX = 60000;
87
+ const sleep = ms => new Promise(r => setTimeout(r, ms));
88
+ const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
89
+ const esc = s => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
90
+ let movie = null, svg = null, head = null, geom = null, zoom = 1, scrubbing = false;
91
+
92
+ (async () => {
93
+ for (let i = 0; i < 600 && !movie; i++) {
94
+ try { const w = frame.contentWindow; if (w && w.__ready === true && w.movie) movie = w.movie; } catch { /* still loading */ }
95
+ if (!movie) await sleep(200);
96
+ }
97
+ if (!movie) { $status.textContent = 'the page did not become ready (window.__ready === true and window.movie are needed)'; return; }
98
+ if (typeof movie.timelineSvg !== 'function') { $status.textContent = 'this page loads a pixi-effects without movie.timelineSvg() (0.7+ needed)'; return; }
99
+ layout();
100
+ mount();
101
+ })();
102
+
103
+ // The page is shown whole: as tall as its picture, scaled down (never up) so the timeline stays in view under it.
104
+ function layout() {
105
+ const stageW = stage.clientWidth || innerWidth, headH = document.querySelector('header').offsetHeight;
106
+ let h = 560;
107
+ const fit = k => { frame.style.width = (stageW / k) + 'px'; frame.style.transform = 'scale(' + k + ')'; };
108
+ fit(1);
109
+ try {
110
+ const c = frame.contentDocument.querySelector('canvas');
111
+ if (c) h = Math.round(c.getBoundingClientRect().height + 40);
112
+ } catch { /* a page we cannot read */ }
113
+ const k = Math.min(1, Math.max(200, innerHeight - headH - 240) / h);
114
+ fit(k);
115
+ frame.style.height = h + 'px';
116
+ stage.style.height = Math.round(h * k) + 'px';
117
+ }
118
+ frame.addEventListener('load', layout);
119
+ addEventListener('resize', () => { layout(); if (svg) render(null); });
120
+
121
+ const fitWidth = () => Math.max(300, chart.clientWidth - NAMES_W - 32);
122
+ const maxZoom = () => Math.max(1, Math.min(MAX_PX, movie.totalFrames * 12) / fitWidth()); // at most ~12 px per frame
123
+ const tToX = t => geom.x0 + (t / geom.dur) * (geom.x1 - geom.x0);
124
+ const nowT = () => movie.currentFrame / movie.frameRate;
125
+ function clientToTime(clientX) {
126
+ const r = svg.getBoundingClientRect();
127
+ const ux = ((clientX - r.left) / r.width) * geom.vbw;
128
+ return clamp((ux - geom.x0) / (geom.x1 - geom.x0), 0, 1) * geom.dur;
129
+ }
130
+
131
+ // seek: only the latest wanted frame is rendered, so dragging never queues up
132
+ let wanted = null, busy = false;
133
+ async function seekFrame(f) {
134
+ wanted = clamp(Math.round(f), 0, movie.totalFrames);
135
+ if (busy) return;
136
+ busy = true;
137
+ try { while (wanted !== null) { const n = wanted; wanted = null; await movie.gotoFrame(n, true); } } finally { busy = false; }
138
+ }
139
+ const seekTime = t => seekFrame(t * movie.frameRate);
140
+
141
+ /** Draw the chart at the current zoom. \`anchor\` = { t, x }: the time that must stay at x pixels from the left of the panel. */
142
+ function render(anchor) {
143
+ const keep = anchor ?? (geom ? { t: nowT(), x: tToX(nowT()) + NAMES_W - chart.scrollLeft } : null);
144
+ plot.innerHTML = movie.timelineSvg({ chartWidth: Math.min(MAX_PX, Math.round(fitWidth() * zoom)), labels: false });
145
+ svg = plot.querySelector('svg');
146
+ const d = svg.dataset;
147
+ geom = { dur: +d.duration, x0: +d.x0, x1: +d.x1, top: +d.top, bottom: +d.bottom, vbw: svg.viewBox.baseVal.width };
148
+ head = document.createElementNS(NS, 'g'); head.id = 'head';
149
+ head.innerHTML = '<line x1="0" x2="0" y1="' + (geom.top - 2) + '" y2="' + geom.bottom + '"/><path d="M -6 ' + (geom.top - 8) + ' l 12 0 l -6 9 z"/>';
150
+ svg.appendChild(head);
151
+ svg.addEventListener('pointerdown', onDown); svg.addEventListener('pointermove', onMove);
152
+ svg.addEventListener('pointerup', onEnd); svg.addEventListener('pointercancel', onEnd);
153
+ if (zoom <= 1) chart.scrollLeft = 0;
154
+ else if (keep) chart.scrollLeft = Math.max(0, NAMES_W + tToX(keep.t) - keep.x);
155
+ $zlabel.textContent = zoom <= 1.001 ? 'fit' : zoom.toFixed(zoom < 10 ? 1 : 0) + '×';
156
+ $zout.disabled = zoom <= 1.001; $zfit.disabled = zoom <= 1.001; $zin.disabled = zoom >= maxZoom() - 0.001;
157
+ }
158
+ function setZoom(z, anchor) {
159
+ const next = clamp(z, 1, maxZoom());
160
+ if (Math.abs(next - zoom) < 1e-6) return;
161
+ zoom = next;
162
+ render(anchor);
163
+ }
164
+ const playheadAnchor = () => {
165
+ const x = tToX(nowT()) + NAMES_W - chart.scrollLeft;
166
+ return { t: nowT(), x: clamp(x, NAMES_W + 20, chart.clientWidth - 20) };
167
+ };
168
+
169
+ function onDown(e) {
170
+ const r = svg.getBoundingClientRect();
171
+ scrubbing = true; wasPlaying = movie.isPlaying; if (wasPlaying) movie.pause();
172
+ try { svg.setPointerCapture(e.pointerId); } catch { /* a synthetic event has no pointer */ }
173
+ seekTime(clientToTime(e.clientX));
174
+ }
175
+ let wasPlaying = false;
176
+ function onMove(e) { if (scrubbing) seekTime(clientToTime(e.clientX)); }
177
+ function onEnd() { if (!scrubbing) return; scrubbing = false; if (wasPlaying) movie.play(); }
178
+
179
+ function mount() {
180
+ const data = movie.timelineData();
181
+ names.innerHTML = '<div class="ruler" style="height:34px"></div>' + data.rows.map(r =>
182
+ '<div class="name" data-start="' + r.start + '" style="padding-left:' + (8 + r.depth * 14) + 'px" title="' + esc(r.path + ' · ' + r.type) + '">' + esc(r.name) + '</div>').join('');
183
+ names.addEventListener('click', e => { const n = e.target.closest('.name'); if (n) seekTime(parseFloat(n.dataset.start) || 0); });
184
+ render(null);
185
+ $status.textContent = 'click or drag the timeline · Space plays · ← → step a frame (Shift: a second) · + / − zoom (Ctrl/⌘ + wheel) · click a layer name to jump to its start';
186
+ $play.disabled = false; $zfit.disabled = true;
187
+
188
+ $play.addEventListener('click', toggle);
189
+ $zin.addEventListener('click', () => setZoom(zoom * 1.6, playheadAnchor()));
190
+ $zout.addEventListener('click', () => setZoom(zoom / 1.6, playheadAnchor()));
191
+ $zfit.addEventListener('click', () => setZoom(1, null));
192
+ chart.addEventListener('wheel', e => {
193
+ if (!(e.ctrlKey || e.metaKey)) return; // a plain wheel scrolls as usual
194
+ e.preventDefault();
195
+ const r = chart.getBoundingClientRect(), overPlot = e.clientX - r.left > NAMES_W;
196
+ const t = overPlot ? clientToTime(e.clientX) : nowT(), x = overPlot ? e.clientX - r.left : playheadAnchor().x;
197
+ setZoom(zoom * Math.exp(-e.deltaY * 0.0025), { t, x });
198
+ }, { passive: false });
199
+ addEventListener('keydown', e => {
200
+ if (e.target && /input|textarea|select/i.test(e.target.tagName)) return;
201
+ const fps = movie.frameRate, f = movie.currentFrame;
202
+ if (e.key === ' ') { e.preventDefault(); toggle(); }
203
+ else if (e.key === 'ArrowLeft') { e.preventDefault(); seekFrame(f - (e.shiftKey ? fps : 1)); }
204
+ else if (e.key === 'ArrowRight') { e.preventDefault(); seekFrame(f + (e.shiftKey ? fps : 1)); }
205
+ else if (e.key === 'Home') { e.preventDefault(); seekFrame(0); }
206
+ else if (e.key === 'End') { e.preventDefault(); seekFrame(movie.totalFrames); }
207
+ else if (e.key === '+' || e.key === '=') { e.preventDefault(); setZoom(zoom * 1.6, playheadAnchor()); }
208
+ else if (e.key === '-') { e.preventDefault(); setZoom(zoom / 1.6, playheadAnchor()); }
209
+ else if (e.key === '0') { e.preventDefault(); setZoom(1, null); }
210
+ });
211
+ requestAnimationFrame(tick);
212
+ }
213
+ const toggle = () => { if (movie.isPlaying) movie.pause(); else movie.play(); };
214
+
215
+ function tick() {
216
+ const t = nowT(), x = tToX(t);
217
+ head.setAttribute('transform', 'translate(' + x.toFixed(2) + ',0)');
218
+ $time.textContent = t.toFixed(2) + ' / ' + geom.dur.toFixed(2) + ' s · frame ' + movie.currentFrame;
219
+ $play.textContent = movie.isPlaying ? '❚❚' : '▶';
220
+ if (movie.isPlaying && !scrubbing && zoom > 1) { // follow the playhead when it runs off the visible part
221
+ const screenX = NAMES_W + x - chart.scrollLeft;
222
+ if (screenX > chart.clientWidth - 40 || screenX < NAMES_W) chart.scrollLeft = Math.max(0, NAMES_W + x - NAMES_W - 120);
223
+ }
224
+ requestAnimationFrame(tick);
225
+ }
226
+ })();
227
+ </script>
228
+ </body></html>
229
+ `;
230
+ }
231
+
232
+ /** Open an address in the default browser (macOS open, Windows start, otherwise xdg-open). */
233
+ function openBrowser(url) {
234
+ const [cmd, args] = process.platform === 'darwin' ? ['open', [url]] : process.platform === 'win32' ? ['cmd', ['/c', 'start', '', url]] : ['xdg-open', [url]];
235
+ try { spawn(cmd, args, { stdio: 'ignore', detached: true }).on('error', () => {}).unref(); } catch { /* the address is printed anyway */ }
236
+ }
237
+
238
+ export async function startViewer(opts) {
239
+ const pagePath = path.resolve(opts.page);
240
+ if (!fs.existsSync(pagePath)) throw new Error(`page not found: ${opts.page}`);
241
+ const root = path.resolve(opts.root ?? findRoot(path.dirname(pagePath)));
242
+ if (!pagePath.startsWith(root)) throw new Error(`the page must be inside the server root (${root}); use --root`);
243
+ const rel = path.relative(root, pagePath).split(path.sep).join('/');
244
+ const pageUrl = '/' + rel + (opts.query ? '?' + opts.query : '');
245
+ const title = path.basename(pagePath).replace(/\.[^.]+$/, '');
246
+ const html = viewerHtml({ pageUrl, title });
247
+ const { server, port } = await serve(root, (req, res) => {
248
+ if (req.method !== 'GET' || !req.url.startsWith(VIEWER)) return false;
249
+ res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' }).end(html);
250
+ return true;
251
+ }, opts.port);
252
+ return { server, url: `http://127.0.0.1:${port}${VIEWER}` };
253
+ }
254
+
255
+ if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
256
+ try {
257
+ const opts = parseViewArgs(process.argv.slice(2));
258
+ if (!opts.page) {
259
+ console.error('usage: node ai/tools/view.mjs <page.html> [--port N] [--no-open] [--query a=1] [--root DIR]');
260
+ process.exit(2);
261
+ }
262
+ const { url } = await startViewer(opts);
263
+ console.log(`timeline view: ${url} (Ctrl-C to stop)`);
264
+ if (opts.open) openBrowser(url);
265
+ } catch (e) {
266
+ console.error(`pixi-effects view failed: ${e.message}`);
267
+ process.exit(2);
268
+ }
269
+ }
package/dist/{Base-4vNLl4tH.d.cts → Base-CSIulyIq.d.cts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { Filter, Container, RenderTexture, Matrix } from 'pixi.js';
2
- import { S as SequenceSpec, C as CompositionShape, B as AudioDescriptor } from './types-DrW9QeKU.cjs';
2
+ import { S as SequenceSpec, C as CompositionShape, B as AudioDescriptor } from './types-oJijbn-K.cjs';
3
3
  import { gsap } from 'gsap';
4
4
 
5
5
  /**
package/dist/{Base-CD4AoT5-.d.ts → Base-DVgwyIUj.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { Filter, Container, RenderTexture, Matrix } from 'pixi.js';
2
- import { S as SequenceSpec, C as CompositionShape, B as AudioDescriptor } from './types-DrW9QeKU.js';
2
+ import { S as SequenceSpec, C as CompositionShape, B as AudioDescriptor } from './types-oJijbn-K.js';
3
3
  import { gsap } from 'gsap';
4
4
 
5
5
  /**
package/dist/Composition-3KHQPRBA.cjs ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ var chunk4VSIJLU3_cjs = require('./chunk-4VSIJLU3.cjs');
4
+ require('./chunk-6I55T4OH.cjs');
5
+ require('./chunk-UQBGW5DO.cjs');
6
+
7
+
8
+
9
+ Object.defineProperty(exports, "CompositionSequence", {
10
+ enumerable: true,
11
+ get: function () { return chunk4VSIJLU3_cjs.CompositionSequence; }
12
+ });
13
+ //# sourceMappingURL=Composition-3KHQPRBA.cjs.map
14
+ //# sourceMappingURL=Composition-3KHQPRBA.cjs.map
package/dist/{Composition-Y5VZSDDP.cjs.map → Composition-3KHQPRBA.cjs.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-Y5VZSDDP.cjs"}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-3KHQPRBA.cjs"}
package/dist/Composition-DT657FO5.js ADDED
@@ -0,0 +1,5 @@
1
+ export { CompositionSequence } from './chunk-36Z4RIRK.js';
2
+ import './chunk-4O2NYDJG.js';
3
+ import './chunk-DKGG7WD4.js';
4
+ //# sourceMappingURL=Composition-DT657FO5.js.map
5
+ //# sourceMappingURL=Composition-DT657FO5.js.map
package/dist/{Composition-7SO5WYHU.js.map → Composition-DT657FO5.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-7SO5WYHU.js"}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-DT657FO5.js"}
package/dist/Controller.cjs CHANGED
@@ -279,6 +279,11 @@ var Controller = class _Controller {
279
279
  root;
280
280
  wrapper;
281
281
  wrappedHere = false;
282
+ /** The canvas's own inline width / height, as the page wrote them (we override them while the wrapper is fitted). */
283
+ canvasInlineWidth = "";
284
+ canvasInlineHeight = "";
285
+ fitWrapHandler = null;
286
+ fitObserver = null;
282
287
  destroyed = false;
283
288
  progressEl;
284
289
  progressFillEl;
@@ -340,6 +345,7 @@ var Controller = class _Controller {
340
345
  this.root.className = this.options.className;
341
346
  this.wrapper.appendChild(this.root);
342
347
  this.buildBar();
348
+ this.bindFitWrap();
343
349
  this.syncRootToCanvas();
344
350
  if (typeof ResizeObserver !== "undefined") {
345
351
  this.resizeObserver = new ResizeObserver(() => this.syncRootToCanvas());
@@ -437,8 +443,56 @@ var Controller = class _Controller {
437
443
  parent.insertBefore(wrap, canvas);
438
444
  wrap.appendChild(canvas);
439
445
  this.wrappedHere = true;
446
+ this.canvasInlineWidth = canvas.style.width;
447
+ this.canvasInlineHeight = canvas.style.height;
440
448
  return wrap;
441
449
  }
450
+ /**
451
+ * Make the wrapper exactly as wide as the canvas. A shrink-to-fit wrapper around a canvas that is sized in percent (the usual
452
+ * `canvas { width: min(960px, 100%) }`) is as wide as the canvas's width ATTRIBUTE (1280), so the picture sat at its left edge
453
+ * with an empty strip beside it. We measure the canvas as the page styled it (the wrapper made transparent to layout), give
454
+ * the wrapper that width, and let the canvas fill the wrapper. Re-measured when the window or the page's box changes.
455
+ */
456
+ fitWrap() {
457
+ if (!this.wrappedHere) return;
458
+ const wrap = this.wrapper, canvas = this.options.canvas;
459
+ if (document.fullscreenElement === wrap) {
460
+ wrap.style.width = "";
461
+ canvas.style.width = this.canvasInlineWidth;
462
+ canvas.style.height = this.canvasInlineHeight;
463
+ return;
464
+ }
465
+ canvas.style.width = this.canvasInlineWidth;
466
+ canvas.style.height = this.canvasInlineHeight;
467
+ const display = wrap.style.display;
468
+ wrap.style.display = "contents";
469
+ wrap.style.width = "";
470
+ const w = canvas.getBoundingClientRect().width;
471
+ wrap.style.display = display;
472
+ if (!(w > 0)) return;
473
+ wrap.style.width = `${w}px`;
474
+ canvas.style.width = "100%";
475
+ canvas.style.height = "auto";
476
+ }
477
+ bindFitWrap() {
478
+ if (!this.wrappedHere) return;
479
+ this.fitWrap();
480
+ let queued = false;
481
+ this.fitWrapHandler = () => {
482
+ if (queued) return;
483
+ queued = true;
484
+ requestAnimationFrame(() => {
485
+ queued = false;
486
+ this.fitWrap();
487
+ });
488
+ };
489
+ window.addEventListener("resize", this.fitWrapHandler);
490
+ const parent = this.wrapper.parentElement;
491
+ if (parent && typeof ResizeObserver !== "undefined") {
492
+ this.fitObserver = new ResizeObserver(this.fitWrapHandler);
493
+ this.fitObserver.observe(parent);
494
+ }
495
+ }
442
496
  bindMovieEvents() {
443
497
  this.onReady = () => {
444
498
  this.progressEl.setAttribute("aria-valuemax", String(this.movie.totalFrames));
@@ -557,6 +611,7 @@ var Controller = class _Controller {
557
611
  void this.toggleFullscreen();
558
612
  });
559
613
  this.fullscreenChangeHandler = () => {
614
+ this.fitWrap();
560
615
  this.refreshFullscreenIcon();
561
616
  this.syncRootToCanvas();
562
617
  };
@@ -914,6 +969,18 @@ var Controller = class _Controller {
914
969
  this.resizeObserver.disconnect();
915
970
  this.resizeObserver = null;
916
971
  }
972
+ if (this.fitObserver) {
973
+ this.fitObserver.disconnect();
974
+ this.fitObserver = null;
975
+ }
976
+ if (this.fitWrapHandler) {
977
+ window.removeEventListener("resize", this.fitWrapHandler);
978
+ this.fitWrapHandler = null;
979
+ }
980
+ if (this.wrappedHere) {
981
+ this.options.canvas.style.width = this.canvasInlineWidth;
982
+ this.options.canvas.style.height = this.canvasInlineHeight;
983
+ }
917
984
  this.root.remove();
918
985
  if (this.wrappedHere) {
919
986
  const parent = this.wrapper.parentElement;