@cutcraft/player 0.1.0 → 0.2.0

package/dist/frame-plan-BNwblf1s.mjs

@@ -1,1074 +0,0 @@
-import { EASING_FN, RENDERED_MASK_TYPES, RENDERED_TRANSITIONS, capabilitiesOf, freezeHoldsOf, freezeShift, lookupAsset, rampAdvance, speedKeysOf } from "@cutcraft/kit";
-// src/constants.ts
-/** Seconds before a clip starts at which its decoder is mounted. */
-const MOUNT_AHEAD_S = 2;
-/** Seconds after a clip ends for which its decoder is kept. */
-const UNMOUNT_BEHIND_S = .5;
-/** Seconds an unreferenced mediabunny Input stays open before it is disposed. */
-const INPUT_IDLE_CLOSE_S = 10;
-/** Hard cap on open Inputs; idle ones are evicted LRU first. */
-const MAX_OPEN_INPUTS = 6;
-/** Decoded frames a clip decoder keeps queued ahead of the play head. */
-const QUEUE_TARGET = 8;
-const QUEUE_MAX = 10;
-/** Effective speed (clip speed × rate) above which frames are fetched by seek per tick instead of streamed. */
-const SEEK_MODE_SPEED = 4;
-/** Reverse playback pre-decodes this window behind the cursor. */
-const REVERSE_WINDOW_S = 1;
-const REVERSE_WINDOW_FRAMES = 16;
-/** Longest wait for a frame in `wait` mode (seek, export) before drawing without it. */
-const FRAME_WAIT_MS = 250;
-/** Audio scheduler period and horizon. */
-const SCHEDULER_MS = 100;
-const LOOKAHEAD_S = .2;
-/** Source ranges longer than twice this are decoded in chunks of this length. */
-const AUDIO_CHUNK_S = 30;
-/** LRU cap, in decoded seconds, on cached PCM. */
-const AUDIO_CACHE_S = 600;
-/** Pre-decode window on play, and how long play() waits for it. */
-const AUDIO_PRIME_S = .5;
-const PLAY_PRIME_TIMEOUT_MS = 500;
-/** Ducking defaults. */
-const DUCK_ATTACK_S = .1;
-const DUCK_RELEASE_S = .3;
-/** Sampling step for multiplied gain ramps. */
-const ENVELOPE_STEP_S = .05;
-/** Playback rate clamp. */
-const MIN_RATE = .25;
-const MAX_RATE = 4;
-/** Quiet time after the last setState before a paused preview fetches its exact frame. */
-const SETTLE_MS = 120;
-/** Tolerance when rounding a time to a frame index. */
-const FRAME_EPS = 1e-6;
-/**
-* Container timestamps are often rounded to the millisecond, so the frame for
-* the exact time n/fps can sit a fraction of a millisecond after it. A frame
-* is picked when its timestamp is at most this far past the wanted time.
-*/
-const PICK_EPS = .001;
-// src/warn.ts
-const seen = /* @__PURE__ */ new Set();
-let sink = null;
-/** Warn once per key. Tests capture warnings with `captureWarnings`. */
-function devWarn(key, message) {
-	if (seen.has(key)) return;
-	seen.add(key);
-	if (sink) sink(message);
-	else console.warn(`[cutcut/player] ${message}`);
-}
-function captureWarnings(fn) {
-	sink = fn;
-	seen.clear();
-}
-// src/model/time.ts
-function frameIndex(t, fps) {
-	return Math.max(0, Math.floor(t * fps + FRAME_EPS));
-}
-function frameTime(frame, fps) {
-	return frame / fps;
-}
-/** `mm:ss.ff` for a composition time, what the controls show and the contact sheet labels. */
-function timecode(t, fps) {
-	const total = Math.max(0, t);
-	const m = Math.floor(total / 60), s = Math.floor(total % 60), f = Math.floor((total - Math.floor(total)) * fps + 1e-6);
-	return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${String(f).padStart(2, "0")}`;
-}
-/** 0..1 progress through a placement, what `useT()` returns inside a Layer. */
-function localT(p, t) {
-	if (p.duration <= 0) return 0;
-	const u = (t - p.start) / p.duration;
-	return u < 0 ? 0 : u > 1 ? 1 : u;
-}
-/** What `useLayer()` returns inside a Layer: progress plus real seconds. */
-function layerClock(p, t, fps) {
-	const duration = Math.max(0, p.duration);
-	const elapsed = Math.min(duration, Math.max(0, t - p.start));
-	return {
-		t: localT(p, t),
-		elapsed,
-		remaining: duration - elapsed,
-		duration,
-		time: t,
-		fps
-	};
-}
-/**
-* Source seconds a media placement shows at composition time `t`: in/out
-* trim, constant speed or a speed-key ramp, reverse, and freeze holds.
-* A freeze is an insert hold: it shows `at` over its window, then the clip
-* resumes from where it stopped; the result is clamped to the trimmed range.
-*/
-function placementSourceTime(p, children, t) {
-	const src = p.source;
-	if (!src) return Math.max(0, t - p.start);
-	const shifted = freezeShift(freezeHoldsOf(children), Math.max(0, t - p.start));
-	if ("held" in shifted) return clampSource(shifted.held, src);
-	const keys = speedKeysOf(children);
-	const advance = keys.length > 0 ? rampAdvance(keys, shifted.rel) : shifted.rel * src.speed;
-	return clampSource(p.props.reverse === true ? src.out - advance : src.in + advance, src);
-}
-function nestedSourceTime(p, t) {
-	const src = p.source;
-	if (!src) return Math.max(0, t - p.start);
-	return clampSource(src.in + Math.max(0, t - p.start) * src.speed, src);
-}
-function clampSource(v, src) {
-	const end = src.out > src.in ? src.out : src.in;
-	return v < src.in ? src.in : v > end ? end : v;
-}
-// src/model/keyframes.ts
-const clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
-function ease(name, x) {
-	const fn = EASING_FN[name];
-	if (!fn) {
-		if (name !== void 0) devWarn(`easing:${name}`, `unknown easing "${name}", using linear`);
-		return clamp01(x);
-	}
-	return fn(clamp01(x));
-}
-function keysFor(children, property) {
-	const keys = [];
-	for (const c of children) {
-		if (c.kind !== "keyframe" || c.props.property !== property) continue;
-		keys.push({
-			at: Number(c.props.at ?? 0),
-			value: c.props.value,
-			easing: c.props.easing
-		});
-	}
-	return keys.sort((a, b) => a.at - b.at);
-}
-/**
-* The keyframed value of `property` at element-relative time `rel`. Holds
-* before the first and after the last key; the segment between two keys uses
-* the easing of the key it leaves. Non-numeric values step.
-*/
-function keyframedValue(children, property, rel, fallback) {
-	const keys = keysFor(children, property);
-	const first = keys[0];
-	if (!first) return fallback;
-	const last = keys[keys.length - 1];
-	if (rel <= first.at) return first.value;
-	if (rel >= last.at) return last.value;
-	for (let i = 0; i < keys.length - 1; i++) {
-		const a = keys[i], b = keys[i + 1];
-		if (rel < a.at || rel >= b.at) continue;
-		if (typeof a.value !== "number" || typeof b.value !== "number") return a.value;
-		const span = b.at - a.at;
-		const u = span <= 0 ? 1 : ease(a.easing, (rel - a.at) / span);
-		return a.value + (b.value - a.value) * u;
-	}
-	return last.value;
-}
-function hasKeyframes(children, property) {
-	return children.some((c) => c.kind === "keyframe" && c.props.property === property);
-}
-// src/model/visible.ts
-/** Visual, timed placements that show at `t`: tracks in document order (the first track is the bottom), items in track order. */
-function visiblePlacements(state, t) {
-	const out = [];
-	const tracks = [...state.tracks].sort((a, b) => a.order - b.order);
-	for (const track of tracks) {
-		if (track.hidden) continue;
-		const roles = transitionRoles(state, track, t);
-		for (const placement of trackItems(state, track)) {
-			const caps = capabilitiesOf(placement.kind);
-			if (!caps.visual || !caps.timed || placement.kind === "transition") continue;
-			if (!isVisibleAt(placement, t, state.composition.duration)) continue;
-			const role = roles.get(placement.id);
-			out.push({
-				placement,
-				track,
-				children: placement.children.map((id) => state.items.get(id)).filter((c) => c !== void 0),
-				...role ? { transition: role } : {}
-			});
-		}
-	}
-	return out;
-}
-function isVisibleAt(p, t, compositionDuration) {
-	if (t >= p.start && t < p.end) return true;
-	return t === compositionDuration && p.end === t && p.end > p.start;
-}
-/** Placements that sit on a track, in track order; a multicam's generated clips follow their parent. */
-function trackItems(state, track) {
-	const out = [];
-	for (const id of track.items) {
-		const p = state.items.get(id);
-		if (!p) continue;
-		if (p.kind === "multicam") {
-			const generated = [...state.items.values()].filter((q) => q.parent === id && q.kind === "clip").sort((a, b) => a.start - b.start);
-			out.push(...generated);
-			continue;
-		}
-		out.push(p);
-	}
-	return out;
-}
-function transitionRoles(state, track, t) {
-	const roles = /* @__PURE__ */ new Map();
-	for (const id of track.items) {
-		const x = state.items.get(id);
-		if (!x || x.kind !== "transition" || x.duration <= 0) continue;
-		if (t < x.start || t >= x.end) continue;
-		const params = x.props.params ?? {};
-		const progress = ease(typeof params.curve === "string" ? params.curve : "linear", (t - x.start) / x.duration);
-		if (x.between) {
-			roles.set(x.between[0], {
-				placement: x,
-				role: "out",
-				progress
-			});
-			roles.set(x.between[1], {
-				placement: x,
-				role: "in",
-				progress
-			});
-		} else if (typeof x.props.on === "string") roles.set(x.props.on, {
-			placement: x,
-			role: x.props.edge === "in" ? "in" : "out",
-			progress
-		});
-	}
-	return roles;
-}
-// src/model/transform.ts
-const IDENTITY = {
-	a: 1,
-	b: 0,
-	c: 0,
-	d: 1,
-	e: 0,
-	f: 0
-};
-function multiply(m, n) {
-	return {
-		a: m.a * n.a + m.c * n.b,
-		b: m.b * n.a + m.d * n.b,
-		c: m.a * n.c + m.c * n.d,
-		d: m.b * n.c + m.d * n.d,
-		e: m.a * n.e + m.c * n.f + m.e,
-		f: m.b * n.e + m.d * n.f + m.f
-	};
-}
-const translate = (x, y) => ({
-	...IDENTITY,
-	e: x,
-	f: y
-});
-const scaleM = (sx, sy) => ({
-	...IDENTITY,
-	a: sx,
-	d: sy
-});
-function rotate(deg) {
-	const r = deg * Math.PI / 180;
-	const cos = Math.cos(r), sin = Math.sin(r);
-	return {
-		a: cos,
-		b: sin,
-		c: -sin,
-		d: cos,
-		e: 0,
-		f: 0
-	};
-}
-function matrixToCss(m) {
-	const n = (v) => Math.abs(v) < 1e-9 ? "0" : String(Math.round(v * 1e6) / 1e6);
-	return `matrix(${n(m.a)}, ${n(m.b)}, ${n(m.c)}, ${n(m.d)}, ${n(m.e)}, ${n(m.f)})`;
-}
-/** The fitted rectangle of a source inside the composition, centred. */
-function fitRect(comp, src, fit) {
-	const W = comp.width, H = comp.height;
-	const w = src.width > 0 ? src.width : W, h = src.height > 0 ? src.height : H;
-	if (fit === "stretch") return {
-		x: 0,
-		y: 0,
-		w: W,
-		h: H
-	};
-	let s = 1;
-	if (fit === "contain") s = Math.min(W / w, H / h);
-	else if (fit === "cover") s = Math.max(W / w, H / h);
-	const dw = w * s, dh = h * s;
-	return {
-		x: (W - dw) / 2,
-		y: (H - dh) / 2,
-		w: dw,
-		h: dh
-	};
-}
-/**
-* Lay out a source of `src` pixels in the composition: crop, fit, then the
-* element transform (position offset, scale, rotation about the anchor).
-*/
-function layoutRect(comp, src, fit, transform) {
-	const t = transform ?? {};
-	let crop;
-	let effective = src;
-	if (t.crop && t.crop.width > 0 && t.crop.height > 0) {
-		crop = {
-			x: t.crop.x * src.width,
-			y: t.crop.y * src.height,
-			w: t.crop.width * src.width,
-			h: t.crop.height * src.height
-		};
-		effective = {
-			width: crop.w,
-			height: crop.h
-		};
-	}
-	const rect = fitRect(comp, effective, fit);
-	return {
-		rect,
-		matrix: transformMatrix(rect, t),
-		...crop ? { crop } : {},
-		opacity: t.opacity ?? 1
-	};
-}
-/** The matrix mapping an element's local pixels to the composition, given its untransformed rect. */
-function transformMatrix(rect, t) {
-	const tr = t ?? {};
-	const anchor = tr.anchor ?? {
-		x: .5,
-		y: .5
-	};
-	const ox = rect.x + anchor.x * rect.w, oy = rect.y + anchor.y * rect.h;
-	const sx = typeof tr.scale === "number" ? tr.scale : tr.scale?.x ?? 1;
-	const sy = typeof tr.scale === "number" ? tr.scale : tr.scale?.y ?? 1;
-	const px = tr.position?.x ?? 0, py = tr.position?.y ?? 0;
-	let m = translate(px + ox, py + oy);
-	if (tr.rotation) m = multiply(m, rotate(tr.rotation));
-	if (sx !== 1 || sy !== 1) m = multiply(m, scaleM(sx, sy));
-	m = multiply(m, translate(-ox, -oy));
-	return multiply(m, translate(rect.x, rect.y));
-}
-/** The upright box around `rect` after `m`: where a rectangle of an element's local pixels lands in the composition. */
-function boundsOf(rect, m) {
-	const xs = [
-		rect.x,
-		rect.x + rect.w,
-		rect.x,
-		rect.x + rect.w
-	], ys = [
-		rect.y,
-		rect.y,
-		rect.y + rect.h,
-		rect.y + rect.h
-	];
-	const px = xs.map((x, i) => m.a * x + m.c * ys[i] + m.e), py = xs.map((x, i) => m.b * x + m.d * ys[i] + m.f);
-	const x = Math.min(...px), y = Math.min(...py);
-	return {
-		x,
-		y,
-		w: Math.max(...px) - x,
-		h: Math.max(...py) - y
-	};
-}
-/** The transform with its keyframed properties evaluated at element-relative time `rel`. */
-function animatedTransform(base, children, rel) {
-	if (!children.some((c) => c.kind === "keyframe")) return base ?? {};
-	const t = { ...base ?? {} };
-	const num = (prop, fallback) => Number(keyframedValue(children, prop, rel, fallback));
-	const pos = base?.position ?? {
-		x: 0,
-		y: 0
-	};
-	const scl = typeof base?.scale === "number" ? {
-		x: base.scale,
-		y: base.scale
-	} : base?.scale ?? {
-		x: 1,
-		y: 1
-	};
-	const anc = base?.anchor ?? {
-		x: .5,
-		y: .5
-	};
-	const crop = base?.crop ?? {
-		x: 0,
-		y: 0,
-		width: 1,
-		height: 1
-	};
-	t.position = {
-		x: num("transform.position.x", pos.x),
-		y: num("transform.position.y", pos.y)
-	};
-	t.scale = {
-		x: num("transform.scale.x", scl.x),
-		y: num("transform.scale.y", scl.y)
-	};
-	t.rotation = num("transform.rotation", base?.rotation ?? 0);
-	t.opacity = num("transform.opacity", base?.opacity ?? 1);
-	t.anchor = {
-		x: num("transform.anchor.x", anc.x),
-		y: num("transform.anchor.y", anc.y)
-	};
-	t.borderRadius = num("transform.borderRadius", base?.borderRadius ?? 0);
-	if (base?.crop || [
-		"x",
-		"y",
-		"width",
-		"height"
-	].some((k) => children.some((c) => c.kind === "keyframe" && c.props.property === `transform.crop.${k}`))) t.crop = {
-		x: num("transform.crop.x", crop.x),
-		y: num("transform.crop.y", crop.y),
-		width: num("transform.crop.width", crop.width),
-		height: num("transform.crop.height", crop.height)
-	};
-	return t;
-}
-/** CSS for a DOM element laid out like `layoutRect` does: it sits at the origin with `transform-origin: 0 0`. */
-function cssTransform(layout) {
-	return matrixToCss(layout.matrix);
-}
-// src/model/effects.ts
-function num(params, keys, fallback) {
-	for (const k of keys) {
-		const v = params[k];
-		if (typeof v === "number" && Number.isFinite(v)) return v;
-	}
-	return fallback;
-}
-/**
-* Levels as `brightness(k) contrast(c)`: out = (in − black) / (white − black), with c = 1 + 2·black·s
-* and k = s/c for s = 1/(white − black). Gamma has no filter form; the lint reports it.
-*/
-function levels(p) {
-	const black = Math.max(0, Math.min(1, num(p, ["black"], 0))), white = Math.max(0, Math.min(1, num(p, ["white"], 1)));
-	if (white <= black) return "";
-	const s = 1 / (white - black), c = 1 + 2 * black * s;
-	return `brightness(${s / c}) contrast(${c})`;
-}
-/** Effects the painter draws over the element after it (`postEffects`), not as filters. */
-const POST_TYPES = ["vignette", "grain"];
-/** One filter per rendered effect type: kit's RENDERED_EFFECTS, which the `not-rendered` lint reads, less the post effects. */
-const CANVAS_FILTERABLE = {
-	brightness: (p) => `brightness(${1 + num(p, ["amount", "value"], 0) / 100})`,
-	contrast: (p) => `contrast(${1 + num(p, ["amount", "value"], 0) / 100})`,
-	saturation: (p) => `saturate(${1 + num(p, ["amount", "value"], 0) / 100})`,
-	hue: (p) => `hue-rotate(${num(p, [
-		"angle",
-		"amount",
-		"value"
-	], 0)}deg)`,
-	blur: (p) => `blur(${num(p, [
-		"radius",
-		"amount",
-		"value"
-	], 4)}px)`,
-	grayscale: (p) => `grayscale(${num(p, ["amount", "value"], 100) / 100})`,
-	sepia: (p) => `sepia(${num(p, ["amount", "value"], 100) / 100})`,
-	invert: (p) => `invert(${num(p, ["amount", "value"], 100) / 100})`,
-	temperature: (p) => colorGradeFilters({ temperature: num(p, ["amount", "value"], 0) }).join(" "),
-	tint: (p) => colorGradeFilters({ tint: num(p, ["amount", "value"], 0) }).join(" "),
-	levels,
-	shadow: (p) => `drop-shadow(${num(p, ["x"], 0)}px ${num(p, ["y"], 4)}px ${num(p, ["blur"], 8)}px ${typeof p.color === "string" ? p.color : "rgba(0,0,0,0.5)"})`
-};
-/** An effect's params with its keyframed ones (`effect.<id>.<param>` keyframes on the element) evaluated at element-relative `rel`. */
-function paramsAt(children, effect, rel) {
-	const base = effect.props.params ?? {};
-	const prefix = `effect.${effect.id}.`;
-	let out = null;
-	for (const k of children) {
-		const property = k.kind === "keyframe" ? String(k.props.property) : "";
-		if (!property.startsWith(prefix)) continue;
-		const name = property.slice(prefix.length);
-		out ??= { ...base };
-		out[name] = keyframedValue(children, property, rel, base[name]);
-	}
-	return out ?? base;
-}
-/** A single canvas/CSS `filter` string for an element's effect and colour-grade children at element-relative `rel`; unsupported types are listed. */
-function filterString(children, elementId, rel) {
-	const parts = [];
-	const unsupported = [];
-	for (const c of children) if (c.kind === "effect") {
-		if (c.props.enabled === false) continue;
-		const type = String(c.props.type);
-		if (POST_TYPES.includes(type)) continue;
-		const make = CANVAS_FILTERABLE[type];
-		if (make) {
-			const f = make(paramsAt(children, c, rel));
-			if (f) parts.push(f);
-		} else {
-			unsupported.push(type);
-			devWarn(`effect:${elementId}:${type}`, `effect "${type}" on "${elementId}" is not rendered by the browser player`);
-		}
-	} else if (c.kind === "colorGrade") parts.push(...colorGradeFilters({
-		temperature: keyframedValue(children, "colorGrade.temperature", rel, c.props.temperature),
-		tint: keyframedValue(children, "colorGrade.tint", rel, c.props.tint)
-	}));
-	return {
-		filter: parts.join(" "),
-		unsupported
-	};
-}
-/** Vignette and grain, in order, with `amount` on 0..1; grain is seeded by the frame, so a frame always looks the same. */
-function postEffects(children, frame, rel) {
-	const out = [];
-	for (const c of children) {
-		if (c.kind !== "effect" || c.props.enabled === false) continue;
-		const amount = Math.max(0, Math.min(1, num(paramsAt(children, c, rel), [
-			"amount",
-			"intensity",
-			"value"
-		], c.props.type === "grain" ? 20 : 50) / 100));
-		if (amount <= 0) continue;
-		if (c.props.type === "vignette") out.push({
-			type: "vignette",
-			amount
-		});
-		else if (c.props.type === "grain") out.push({
-			type: "grain",
-			amount,
-			seed: frame
-		});
-	}
-	return out.length ? out : void 0;
-}
-/**
-* Temperature and tint approximated with CSS filters: warm pulls toward
-* sepia, cool toward a slight hue rotation; tint rotates hue. Wheels, curves,
-* LUTs and HSL bands are not rendered by the browser player.
-*/
-function colorGradeFilters(props) {
-	const out = [];
-	const temperature = typeof props.temperature === "number" ? props.temperature : 0;
-	const tint = typeof props.tint === "number" ? props.tint : 0;
-	if (temperature > 0) out.push(`sepia(${temperature / 100 * .5})`);
-	else if (temperature < 0) out.push(`hue-rotate(${-temperature / 10}deg) saturate(${1 + -temperature / 200})`);
-	if (tint !== 0) out.push(`hue-rotate(${tint / 4}deg)`);
-	return out;
-}
-// src/model/motion.ts
-const STILL = {
-	opacity: 1,
-	matrix: IDENTITY,
-	clip: null,
-	draw: null
-};
-const DEFAULT_DURATION = .5;
-/** How far a slide travels: a quarter of the element's size, at most this many pixels (a title's box is the frame). */
-const SLIDE = .25;
-const SLIDE_MAX = 160;
-/**
-* The entrance and exit of an element `rel` seconds into its `duration`, for a
-* `width` by `height` box. Both can play at once on a short element; their
-* effects multiply. Pop, bounce and elastic carry their own curve; the others
-* follow the animation's easing (default ease-out).
-*/
-function motionAt(enter, exit, rel, duration, width, height) {
-	if (!enter && !exit) return STILL;
-	let m = STILL;
-	if (enter && enter.type !== "none") {
-		const len = enter.duration ?? DEFAULT_DURATION;
-		m = combine(m, effect(enter, len > 0 ? rel / len : 1, width, height));
-	}
-	if (exit && exit.type !== "none") {
-		const len = exit.duration ?? DEFAULT_DURATION;
-		m = combine(m, effect(exit, len > 0 ? (duration - rel) / len : 1, width, height));
-	}
-	return m;
-}
-/** One animation at raw progress `x` (0 hidden, 1 fully shown). */
-function effect(anim, x, w, h) {
-	const raw = Math.max(0, Math.min(1, x));
-	if (raw >= 1) return STILL;
-	const k = ease(anim.easing ?? "ease-out", raw);
-	const about = (m) => multiply(multiply(translate(w / 2, h / 2), m), translate(-w / 2, -h / 2));
-	const fadeIn = Math.min(1, raw * 3);
-	switch (anim.type) {
-		case "fade": return {
-			...STILL,
-			opacity: k
-		};
-		case "slide-left": return {
-			...STILL,
-			opacity: k,
-			matrix: translate(Math.min(w * SLIDE, SLIDE_MAX) * (1 - k), 0)
-		};
-		case "slide-right": return {
-			...STILL,
-			opacity: k,
-			matrix: translate(-Math.min(w * SLIDE, SLIDE_MAX) * (1 - k), 0)
-		};
-		case "slide-up": return {
-			...STILL,
-			opacity: k,
-			matrix: translate(0, Math.min(h * SLIDE, SLIDE_MAX) * (1 - k))
-		};
-		case "slide-down": return {
-			...STILL,
-			opacity: k,
-			matrix: translate(0, -Math.min(h * SLIDE, SLIDE_MAX) * (1 - k))
-		};
-		case "scale": return {
-			...STILL,
-			opacity: k,
-			matrix: about(scaleM(.6 + .4 * k, .6 + .4 * k))
-		};
-		case "rotate": return {
-			...STILL,
-			opacity: k,
-			matrix: about(multiply(rotate(-90 * (1 - k)), scaleM(.8 + .2 * k, .8 + .2 * k)))
-		};
-		case "pop": {
-			const s = ease("easeOutBack", raw);
-			return {
-				...STILL,
-				opacity: fadeIn,
-				matrix: about(scaleM(s, s))
-			};
-		}
-		case "bounce": {
-			const s = ease("easeOutBounce", raw);
-			return {
-				...STILL,
-				opacity: fadeIn,
-				matrix: about(scaleM(s, s))
-			};
-		}
-		case "elastic": {
-			const s = ease("easeOutElastic", raw);
-			return {
-				...STILL,
-				opacity: fadeIn,
-				matrix: about(scaleM(s, s))
-			};
-		}
-		case "flip-horizontal": return {
-			...STILL,
-			matrix: about(scaleM(Math.max(.001, Math.sin(k * Math.PI / 2)), 1))
-		};
-		case "flip-vertical": return {
-			...STILL,
-			matrix: about(scaleM(1, Math.max(.001, Math.sin(k * Math.PI / 2))))
-		};
-		case "wipe-right": return {
-			...STILL,
-			clip: [{
-				x: 0,
-				y: 0,
-				w: w * k,
-				h
-			}]
-		};
-		case "wipe-left": return {
-			...STILL,
-			clip: [{
-				x: w * (1 - k),
-				y: 0,
-				w: w * k,
-				h
-			}]
-		};
-		case "wipe-down": return {
-			...STILL,
-			clip: [{
-				x: 0,
-				y: 0,
-				w,
-				h: h * k
-			}]
-		};
-		case "wipe-up": return {
-			...STILL,
-			clip: [{
-				x: 0,
-				y: h * (1 - k),
-				w,
-				h: h * k
-			}]
-		};
-		case "reveal-center": return {
-			...STILL,
-			clip: [{
-				x: w * (1 - k) / 2,
-				y: h * (1 - k) / 2,
-				w: w * k,
-				h: h * k
-			}]
-		};
-		case "reveal-edges": return {
-			...STILL,
-			clip: [{
-				x: 0,
-				y: 0,
-				w: w * k / 2,
-				h
-			}, {
-				x: w - w * k / 2,
-				y: 0,
-				w: w * k / 2,
-				h
-			}]
-		};
-		case "draw": return {
-			...STILL,
-			draw: k
-		};
-		default: return {
-			...STILL,
-			opacity: k
-		};
-	}
-}
-/** Both effects at once: opacities and draw amounts multiply, matrices compose, clips intersect. */
-function combine(a, b) {
-	if (b === STILL) return a;
-	if (a === STILL) return b;
-	return {
-		opacity: a.opacity * b.opacity,
-		matrix: multiply(a.matrix, b.matrix),
-		clip: a.clip && b.clip ? intersect(a.clip, b.clip) : a.clip ?? b.clip,
-		draw: a.draw !== null && b.draw !== null ? a.draw * b.draw : a.draw ?? b.draw
-	};
-}
-function intersect(a, b) {
-	const out = [];
-	for (const r of a) for (const s of b) {
-		const x = Math.max(r.x, s.x), y = Math.max(r.y, s.y);
-		const x2 = Math.min(r.x + r.w, s.x + s.w), y2 = Math.min(r.y + r.h, s.y + s.h);
-		if (x2 > x && y2 > y) out.push({
-			x,
-			y,
-			w: x2 - x,
-			h: y2 - y
-		});
-	}
-	return out;
-}
-// src/model/transition.ts
-const DIRECTION = {
-	left: [-1, 0],
-	right: [1, 0],
-	up: [0, -1],
-	down: [0, 1]
-};
-/**
-* One side of a transition at its eased progress. Between two clips the
-* incoming one goes over the outgoing one, which stays put unless the
-* transition moves it; an edge transition plays its side against what is beneath.
-* Types without a look of their own draw as a crossfade.
-*/
-function transitionLook(t, W, H) {
-	const x = t.placement, p = t.progress, role = t.role, between = x.between !== void 0;
-	const type = String(x.props.type ?? "crossfade");
-	const params = x.props.params ?? {};
-	const dir = DIRECTION[String(params.direction)] ?? DIRECTION.left;
-	switch (type) {
-		case "dipToBlack":
-		case "dipToWhite": {
-			if (!between) return {
-				opacity: 1,
-				dip: role === "in" ? 1 - p : p
-			};
-			if (role === "out") return { opacity: 1 };
-			const ramp = (1 - (x.duration > 0 ? Math.max(0, Math.min(1, Number(params.holdDuration ?? .1) / x.duration)) : 1)) / 2;
-			const dip = ramp <= 0 ? 1 : Math.min(1, p / ramp, (1 - p) / ramp);
-			return {
-				opacity: p >= .5 ? 1 : 0,
-				dip
-			};
-		}
-		case "wipe":
-			if (role === "out" && between) return { opacity: 1 };
-			return {
-				opacity: 1,
-				clip: effect({
-					type: `wipe-${params.direction === "diagonal" || params.direction === void 0 ? "left" : String(params.direction)}`,
-					easing: "linear"
-				}, role === "in" ? p : 1 - p, W, H).clip ?? [{
-					x: 0,
-					y: 0,
-					w: W,
-					h: H
-				}]
-			};
-		case "slide":
-		case "push":
-			if (role === "in") return {
-				opacity: 1,
-				offset: {
-					x: -dir[0] * W * (1 - p),
-					y: -dir[1] * H * (1 - p)
-				}
-			};
-			if (between && type === "slide" && params.pushOut !== true) return { opacity: 1 };
-			return {
-				opacity: 1,
-				offset: {
-					x: dir[0] * W * p,
-					y: dir[1] * H * p
-				}
-			};
-		default: return { opacity: role === "in" ? p : between ? 1 : 1 - p };
-	}
-}
-// src/model/backdrop.ts
-/** Kinds the overlay plane draws (as DOM in the preview, through Satori and skia in the export) rather than the canvas. */
-const OVERLAY_KINDS = /* @__PURE__ */ new Set([
-	"title",
-	"shape",
-	"svg",
-	"sticker",
-	"graphic",
-	"layer",
-	"adjustment"
-]);
-/** Kinds that put footage on the canvas. */
-const FOOTAGE_KINDS = /* @__PURE__ */ new Set([
-	"clip",
-	"nested",
-	"multicam"
-]);
-const memo = /* @__PURE__ */ new WeakMap();
-/**
-* The tracks whose overlays draw beneath the footage: those below every
-* visible track that holds footage, when one of them holds an overlay (a
-* background graphic under the cut, say). Empty otherwise, and then every
-* overlay draws above the footage as before. When it is not empty, the canvas
-* holds only the footage over a transparent ground, and the composition
-* background is painted beneath the backdrop instead.
-*/
-function backdropTracks(state) {
-	const hit = memo.get(state);
-	if (hit) return hit;
-	const footage = state.tracks.filter((t) => !t.hidden && t.items.some((id) => FOOTAGE_KINDS.has(state.items.get(id)?.kind ?? "")));
-	const lowest = footage.length ? Math.min(...footage.map((t) => t.order)) : -1;
-	const drawn = (id) => {
-		const k = state.items.get(id)?.kind ?? "";
-		return k !== "adjustment" && OVERLAY_KINDS.has(k);
-	};
-	const below = state.tracks.filter((t) => t.order < lowest && !t.hidden && t.items.some(drawn));
-	const set = new Set(below.map((t) => t.id));
-	memo.set(state, set);
-	return set;
-}
-// src/model/frame-plan.ts
-const BLEND_TO_CANVAS = {
-	normal: "source-over",
-	multiply: "multiply",
-	screen: "screen",
-	overlay: "overlay",
-	darken: "darken",
-	lighten: "lighten",
-	"color-dodge": "color-dodge",
-	"color-burn": "color-burn",
-	"hard-light": "hard-light",
-	"soft-light": "soft-light",
-	difference: "difference",
-	exclusion: "exclusion",
-	hue: "hue",
-	saturation: "saturation",
-	color: "color",
-	luminosity: "luminosity",
-	add: "lighter",
-	"linear-dodge": "lighter"
-};
-function blendOf(value) {
-	return BLEND_TO_CANVAS[value] ?? "source-over";
-}
-/**
-* Everything the painter needs to draw composition time `t`, in draw order.
-* Pure: the same state and time give a deep-equal plan. DOM-rendered kinds
-* (title, shape, svg, sticker, layer, captions) are not in it; the DOM layer
-* reads `visiblePlacements` itself.
-*/
-function buildFramePlan(state, t, resolveNested) {
-	const comp = state.composition;
-	const warnings = [];
-	const ops = [];
-	const { background, backgroundGradient: gradient, blur } = compositionBackground(state);
-	const clear = backdropTracks(state).size > 0;
-	if (blur && clear) warnings.push("background mode blur is drawn as a colour under backdrop overlays");
-	for (const item of visiblePlacements(state, t)) {
-		const p = item.placement;
-		if (p.kind === "clip" || p.kind === "nested") {
-			const op = mediaOp(state, item, t, resolveNested, warnings);
-			if (op) ops.push(op);
-			const dip = item.transition && transitionLook(item.transition, comp.width, comp.height).dip;
-			if (op && dip) ops.push(dipOp(item.transition.placement, dip, comp.width, comp.height));
-		} else if (p.kind === "adjustment") {
-			if (p.props.enabled === false) continue;
-			const { filter } = filterString(item.children, p.id, t - p.start);
-			if (ops.length === 0) continue;
-			ops.push({
-				id: p.id,
-				kind: "adjustment",
-				rect: {
-					x: 0,
-					y: 0,
-					w: comp.width,
-					h: comp.height
-				},
-				matrix: {
-					a: 1,
-					b: 0,
-					c: 0,
-					d: 1,
-					e: 0,
-					f: 0
-				},
-				fit: "stretch",
-				opacity: Number(p.props.opacity ?? 1),
-				blend: blendOf(p.props.blend),
-				filter,
-				borderRadius: 0
-			});
-		}
-	}
-	const footage = blur && !clear ? ops.find((o) => o.kind === "video" || o.kind === "image" || o.kind === "nested") : void 0;
-	return {
-		time: t,
-		frame: frameIndex(t, comp.fps),
-		background,
-		...gradient ? { backgroundGradient: gradient } : {},
-		...clear ? { clear: true } : {},
-		...footage ? { backgroundBlur: { id: footage.id } } : {},
-		ops,
-		warnings
-	};
-}
-/** The composition's background as the painter draws it: a colour, or a gradient (whose first colour is `background`). */
-function compositionBackground(state) {
-	const bg = state.items.get(state.composition.id)?.props.background;
-	const gradient = bg?.mode === "gradient" && bg.gradient && bg.gradient.stops.length >= 2 ? bg.gradient : void 0;
-	return {
-		background: bg?.color ?? gradient?.stops[0]?.color ?? "#000000",
-		...gradient ? { backgroundGradient: gradient } : {},
-		blur: bg?.mode === "blur"
-	};
-}
-function mediaOp(state, item, t, resolveNested, warnings) {
-	const p = item.placement;
-	const comp = state.composition;
-	const rel = t - p.start;
-	const transform = animatedTransform(p.props.transform, item.children, rel);
-	const fit = p.props.fit ?? "contain";
-	let opacity = (transform.opacity ?? 1) * (typeof p.props.blendOpacity === "number" ? p.props.blendOpacity : 1);
-	let look;
-	if (item.transition) {
-		const x = item.transition.placement;
-		const type = String(x.props.type ?? "crossfade");
-		if (!RENDERED_TRANSITIONS.includes(type)) {
-			devWarn(`transition:${x.id}:${type}`, `transition "${type}" on "${x.id}" is drawn as a crossfade`);
-			warnings.push(`transition ${x.id}: ${type} drawn as crossfade`);
-		}
-		look = transitionLook(item.transition, comp.width, comp.height);
-		opacity *= look.opacity;
-	}
-	const { filter } = filterString(item.children, p.id, rel);
-	const mask = maskOf(item.children, warnings);
-	const post = postEffects(item.children, frameIndex(t, comp.fps), rel);
-	const common = {
-		id: p.id,
-		fit,
-		opacity,
-		blend: blendOf(p.props.blend),
-		filter,
-		borderRadius: transform.borderRadius ?? 0,
-		...mask ? { mask } : {},
-		...look?.clip ? { clip: look.clip } : {},
-		...post ? { post } : {}
-	};
-	const shift = (m) => look?.offset ? multiply(translate(look.offset.x, look.offset.y), m) : m;
-	if (p.kind === "nested") {
-		const nested = resolveNested?.(p) ?? null;
-		if (!nested) {
-			warnings.push(`nested ${p.id}: no resolver`);
-			const layout = layoutRect(comp, comp, fit, transform);
-			return {
-				...common,
-				kind: "error",
-				rect: layout.rect,
-				matrix: shift(layout.matrix)
-			};
-		}
-		const layout = layoutRect(comp, nested.composition, fit, transform);
-		return {
-			...common,
-			kind: "nested",
-			nested: {
-				state: nested,
-				time: nestedSourceTime(p, t)
-			},
-			rect: layout.rect,
-			matrix: shift(layout.matrix),
-			...layout.crop ? { crop: layout.crop } : {}
-		};
-	}
-	const src = p.source;
-	const asset = src ? lookupAsset(state.manifest, src.asset) : null;
-	if (!src || !asset) {
-		const layout = layoutRect(comp, comp, "contain", transform);
-		return {
-			...common,
-			kind: "error",
-			...src ? { asset: src.asset } : {},
-			rect: layout.rect,
-			matrix: shift(layout.matrix)
-		};
-	}
-	const size = {
-		width: asset.width ?? comp.width,
-		height: asset.height ?? comp.height
-	};
-	const layout = layoutRect(comp, size, fit, transform);
-	return {
-		...common,
-		kind: asset.kind === "image" ? "image" : "video",
-		asset: asset.id,
-		sourceTime: placementSourceTime(p, item.children, t),
-		rect: layout.rect,
-		matrix: shift(layout.matrix),
-		...layout.crop ? {
-			crop: layout.crop,
-			cropReference: size
-		} : {}
-	};
-}
-/** A dip to black or white over everything drawn so far: an adjustment that maps the picture to the colour, `amount` of the way. */
-function dipOp(x, amount, width, height) {
-	return {
-		id: x.id,
-		kind: "adjustment",
-		rect: {
-			x: 0,
-			y: 0,
-			w: width,
-			h: height
-		},
-		matrix: {
-			a: 1,
-			b: 0,
-			c: 0,
-			d: 1,
-			e: 0,
-			f: 0
-		},
-		fit: "stretch",
-		opacity: amount,
-		blend: "source-over",
-		filter: x.props.type === "dipToWhite" ? "brightness(0) invert(1)" : "brightness(0)",
-		borderRadius: 0
-	};
-}
-function maskOf(children, warnings) {
-	const m = children.find((c) => c.kind === "mask");
-	if (!m) return void 0;
-	if (!RENDERED_MASK_TYPES.includes(m.props.type ?? "shape") || m.props.matte) {
-		warnings.push(`mask ${m.id}: matte masks are not rendered`);
-		return;
-	}
-	return {
-		shape: m.props.shape,
-		path: m.props.path,
-		feather: Number(m.props.feather ?? 0),
-		inverted: m.props.inverted === true,
-		opacity: Number(m.props.opacity ?? 1)
-	};
-}
-export { MIN_RATE as $, hasKeyframes as A, devWarn as B, transformMatrix as C, visiblePlacements as D, trackItems as E, localT as F, DUCK_RELEASE_S as G, AUDIO_CHUNK_S as H, nestedSourceTime as I, FRAME_WAIT_MS as J, ENVELOPE_STEP_S as K, placementSourceTime as L, frameIndex as M, frameTime as N, EASING_FN as O, layerClock as P, MAX_RATE as Q, timecode as R, scaleM as S, isVisibleAt as T, AUDIO_PRIME_S as U, AUDIO_CACHE_S as V, DUCK_ATTACK_S as W, LOOKAHEAD_S as X, INPUT_IDLE_CLOSE_S as Y, MAX_OPEN_INPUTS as Z, fitRect as _, backdropTracks as a, REVERSE_WINDOW_FRAMES as at, multiply as b, combine as c, SEEK_MODE_SPEED as ct, filterString as d, MOUNT_AHEAD_S as et, postEffects as f, cssTransform as g, boundsOf as h, OVERLAY_KINDS as i, QUEUE_TARGET as it, keyframedValue as j, ease as k, effect as l, SETTLE_MS as lt, animatedTransform as m, buildFramePlan as n, PLAY_PRIME_TIMEOUT_MS as nt, transitionLook as o, REVERSE_WINDOW_S as ot, IDENTITY as p, FRAME_EPS as q, compositionBackground as r, QUEUE_MAX as rt, STILL as s, SCHEDULER_MS as st, blendOf as t, PICK_EPS as tt, motionAt as u, UNMOUNT_BEHIND_S as ut, layoutRect as v, translate as w, rotate as x, matrixToCss as y, captureWarnings as z };