framefields 2.5.5 → 2.6.1

package/dist/{src-r7Suenhp.mjs → src-_l81YkMD.mjs}

@@ -1,12 +1,12 @@
 import { H as Signal, Tt as frameArraySignal, V as ProgrammaticSignal, gt as createVirtualMedia, lt as appendOperation, y as Effect$1 } from "./dist-D021IFfp.mjs";
-import { F as getPrimitiveGeometry, K as mediaDecoderCache, N as generateExtrudedTextGeometry, Z as parseSvgPathToSegments, _ as buildShapeSvgPath, p as SlugFontCache, q as parseColor, z as inputStore } from "./dist-BuirkW-f.mjs";
-import { n as decodeAudioSource } from "./dist-DBdxM6xv.mjs";
-import { t as FontManager } from "./fonts-DNx6ps2p.mjs";
+import { F as getPrimitiveGeometry, K as mediaDecoderCache, N as generateExtrudedTextGeometry, Z as parseSvgPathToSegments, _ as buildShapeSvgPath, p as SlugFontCache, q as parseColor$1, z as inputStore } from "./dist-cC6nOaMR.mjs";
+import { n as decodeAudioSource } from "./dist-DSKhnhDk.mjs";
+import { t as FontManager } from "./fonts-B6a4CyoM.mjs";
 import { s as TensorPipeline } from "./dist-C_SMBmHr.mjs";
 import { a as COCO17_KEYPOINT_NAMES, d as VisionNode, f as VisionRunner, g as pinNodeToObject, h as pinNodeToLandmark, m as mergeSubjectMask, n as CLIP_SUBJECT, p as analyzeSequence, u as VisionBundle } from "./renderer-Duorbrb8.mjs";
-import { N as compositorToProgram, U as lintComposition, W as mergeAnimationTracks, d as LayerAnimation } from "./program-O2bWX0cs.mjs";
-import { C as effectFactories, H as Dither, I as ColorBalance, K as Iridescence, L as ColorKey, M as CRT, R as Contour, S as Vision, T as Ascii, Y as LayerStyle, _ as SelectiveColor, a as CustomEffect, at as Posterize, b as TileOffset, c as GradientMap, d as Levels, et as OpArt, f as Modulate, g as SSAO, h as Relight3D, ht as Vignette, i as Curves, it as Pixelate, l as HalftoneScreen, m as PBRGlass, nt as Painterly, o as DepthOfField, ot as ProceduralVFX, p as MotionBlur, pt as Toon, q as Kaleidoscope, r as Crop, s as FilmGrain, st as RGBSplit, t as ApplyLUT, u as HighPass, v as ShadowsHighlights, w as Blur, x as UnsharpMask, y as TemporalDeflicker } from "./effects-B263lgUi.mjs";
-import { a as HeadlessMediaRenderer, n as renderFrameGrid } from "./renderer-BfQdc3RM.mjs";
+import { N as compositorToProgram, U as lintComposition, W as mergeAnimationTracks, d as LayerAnimation } from "./program-W4CWO2bp.mjs";
+import { C as effectFactories, H as Dither, I as ColorBalance, K as Iridescence, L as ColorKey, M as CRT, R as Contour, S as Vision, T as Ascii, Y as LayerStyle, _ as SelectiveColor, a as CustomEffect, at as Posterize, b as TileOffset, c as GradientMap, d as Levels, et as OpArt, f as Modulate, g as SSAO, h as Relight3D, ht as Vignette, i as Curves, it as Pixelate, l as HalftoneScreen, m as PBRGlass, nt as Painterly, o as DepthOfField, ot as ProceduralVFX, p as MotionBlur, pt as Toon, q as Kaleidoscope, r as Crop, s as FilmGrain, st as RGBSplit, t as ApplyLUT, u as HighPass, v as ShadowsHighlights, w as Blur, x as UnsharpMask, y as TemporalDeflicker } from "./effects-Dvdwndk0.mjs";
+import { a as HeadlessMediaRenderer, n as renderFrameGrid } from "./renderer-DGsWlXjl.mjs";
 import { z, z as z$2 } from "zod";
 import path from "node:path";
 import fs from "node:fs/promises";
@@ -317,8 +317,8 @@ async function* serverSentEvents(body) {
 			end = buffer.indexOf("\n\n");
 		}
 	}
-	const last = parseBlock(buffer);
-	if (last) yield last;
+	const last$1 = parseBlock(buffer);
+	if (last$1) yield last$1;
 }
 function parseBlock(block) {
 	let event = "message";
@@ -360,11 +360,11 @@ async function stream(model, { input, abortSignal }) {
 		requestId
 	});
 	const source = outputs(response.body, requestId);
-	let last;
+	let last$1;
 	let finished;
 	async function* tracked() {
 		for await (const value of source) {
-			last = value;
+			last$1 = value;
 			yield value;
 		}
 	}
@@ -372,12 +372,12 @@ async function stream(model, { input, abortSignal }) {
 	const drain = async () => {
 		let step = await iterator.next();
 		while (!step.done) step = await iterator.next();
-		if (last === void 0) throw new ApiError({
+		if (last$1 === void 0) throw new ApiError({
 			message: "Stream had no output",
 			status: 502,
 			requestId
 		});
-		return last;
+		return last$1;
 	};
 	return {
 		requestId,
@@ -682,7 +682,7 @@ function curveOf(curve) {
 	if (curve === "step") return curveStepAfter;
 	return curveMonotoneX;
 }
-function withAlpha(color$1, alpha) {
+function withAlpha$1(color$1, alpha) {
 	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color$1.trim());
 	if (!hex) return color$1;
 	let h = hex[1];
@@ -1013,7 +1013,7 @@ function buildChart(options, props, defaultFontFamily) {
 				y: round$1(plot.y + y(0) - 1),
 				width: plot.width,
 				height: 2,
-				background: withAlpha("#94a3b8", .45)
+				background: withAlpha$1("#94a3b8", .45)
 			});
 			if (timing.enabled) node.animate(fadeIn(timing, 0, timing.duration / 2));
 			children.push(node);
@@ -1164,8 +1164,8 @@ function buildChart(options, props, defaultFontFamily) {
 							...roundRect(frame),
 							d: roundPath(d$1),
 							fillType: "linear",
-							fillColor: withAlpha(color$1, .45),
-							gradientEndColor: withAlpha(color$1, .02),
+							fillColor: withAlpha$1(color$1, .45),
+							gradientEndColor: withAlpha$1(color$1, .02),
 							gradientAngle: 90
 						});
 						if (timing.enabled) node.animate(fadeIn(timing, delay + timing.duration * .4, timing.duration));
@@ -2394,7 +2394,7 @@ var Particles = class extends Effect$1 {
 		const width = options.width;
 		const height = options.height;
 		const colors = (Array.isArray(options.color) ? options.color : [options.color ?? "#ffffff"]).map((c) => {
-			const p = parseColor(c);
+			const p = parseColor$1(c);
 			return [
 				p.r,
 				p.g,
@@ -5195,7 +5195,7 @@ const Styles = {
 };
 
 //#endregion
-//#region ../components/dist/meta-DHC7xghM.mjs
+//#region ../components/dist/meta-VjYvRsYe.mjs
 /** splitmix32: tiny, fast, and well distributed for animation jitter. */
 function rng(seed) {
 	let state = seed >>> 0;
@@ -5367,9 +5367,11 @@ function resolveMotion(input, kind, theme, fps = 30) {
 		duration: Math.max(1, Math.round(o.duration ?? scaleFrames(theme.motion.speed.base, fps))),
 		ease: o.ease ?? (o.preset === "pop" ? theme.motion.ease.snap : kind === "enter" ? theme.motion.ease.enter : theme.motion.ease.exit),
 		distance: o.distance ?? (o.preset.startsWith("slide-") ? 120 : 40) * theme.scale,
-		delay: Math.max(0, Math.round(o.delay ?? 0))
+		delay: Math.max(0, Math.round(o.delay ?? 0)),
+		blur: shutter(o.blur ?? o.preset.startsWith("slide-"))
 	};
 }
+const shutter = (blur) => blur === true ? 90 : blur === false ? 0 : Math.max(0, Math.min(360, blur));
 const isMask = (m) => m.preset.startsWith("mask-");
 /** Offset (dx, dy) a translating preset starts from (enter) or ends at (exit). */
 function offsetOf(m, size$1) {
@@ -5484,6 +5486,131 @@ function exitAnimation(m, end, size$1) {
 	}
 	return anim;
 }
+const NAMED = {
+	white: [
+		255,
+		255,
+		255,
+		1
+	],
+	black: [
+		0,
+		0,
+		0,
+		1
+	],
+	transparent: [
+		0,
+		0,
+		0,
+		0
+	]
+};
+/** The color's channels, or null when the format isn't one listed above. */
+function parseColor(color$1) {
+	const c = color$1.trim().toLowerCase();
+	const named = NAMED[c];
+	if (named) return [...named];
+	const hex = c.match(/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/);
+	if (hex?.[1]) {
+		const h = hex[1].length <= 4 ? [...hex[1]].map((x) => x + x).join("") : hex[1];
+		const byte = (i) => Number.parseInt(h.slice(i, i + 2), 16);
+		return [
+			byte(0),
+			byte(2),
+			byte(4),
+			h.length === 8 ? byte(6) / 255 : 1
+		];
+	}
+	const fn$1 = c.match(/^rgba?\(([^)]*)\)$/);
+	if (fn$1?.[1]) {
+		const parts = fn$1[1].split(/[\s,/]+/).filter(Boolean);
+		if (parts.length !== 3 && parts.length !== 4) return null;
+		const num$2$1 = (p, max) => p.endsWith("%") ? Number.parseFloat(p) / 100 * max : Number(p);
+		const [r, g, b] = parts.slice(0, 3).map((p) => num$2$1(p, 255));
+		const a = parts[3] === void 0 ? 1 : num$2$1(parts[3], 1);
+		if ([
+			r,
+			g,
+			b,
+			a
+		].some((v) => v === void 0 || Number.isNaN(v))) return null;
+		return [
+			r,
+			g,
+			b,
+			a
+		];
+	}
+	return null;
+}
+const css = ([r, g, b, a]) => `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${+a.toFixed(3)})`;
+/** `color` at `alpha` (replacing its own); unknown formats pass through. */
+function withAlpha(color$1, alpha) {
+	const c = parseColor(color$1);
+	return c ? css([
+		c[0],
+		c[1],
+		c[2],
+		alpha
+	]) : color$1;
+}
+/**
+* `color` fully transparent, keeping its hue, so a gradient fading to it has
+* no dark fringe. Unknown formats give plain `rgba(0,0,0,0)`.
+*/
+function transparent(color$1) {
+	const c = parseColor(color$1);
+	return css(c ? [
+		c[0],
+		c[1],
+		c[2],
+		0
+	] : [
+		0,
+		0,
+		0,
+		0
+	]);
+}
+/** Mix `a` toward `b` by `t` (0 → a, 1 → b): `#rrggbb` when both are opaque. */
+function mix(a, b, t) {
+	const x = parseColor(a);
+	const y = parseColor(b);
+	if (!x || !y) return a;
+	const m = x.map((v, k) => v + (y[k] - v) * t);
+	if (m[3] < 1) return css(m);
+	return `#${m.slice(0, 3).map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+}
+/** WCAG relative luminance (0 black … 1 white), or null for unknown formats. */
+function luminance(color$1) {
+	const c = parseColor(color$1);
+	if (!c) return null;
+	const channel = (v) => {
+		const s = v / 255;
+		return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * channel(c[0]) + .7152 * channel(c[1]) + .0722 * channel(c[2]);
+}
+/** WCAG contrast ratio of two colors, or null when either is unknown. */
+function contrastRatio(a, b) {
+	const la = luminance(a);
+	const lb = luminance(b);
+	if (la === null || lb === null) return null;
+	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+	return (hi + .05) / (lo + .05);
+}
+/**
+* True when black text reads better than white on `color` (luminance above
+* ~0.18). Unknown formats count as dark.
+*/
+function isLight(color$1) {
+	return (luminance(color$1) ?? 0) > .179;
+}
+/** Whichever of `light` / `dark` ink reads better on `background`. */
+function inkOn(background, light = "#ffffff", dark = "#0b0c0e") {
+	return (contrastRatio(light, background) ?? 0) >= (contrastRatio(dark, background) ?? 0) ? light : dark;
+}
 /**
 * Design tokens every component reads instead of hard-coded colors, fonts and
 * timings. `defineTheme` deep-merges a partial theme over `themes.graphite`.
@@ -5499,6 +5626,68 @@ const motion = {
 		fast: 8,
 		base: 16,
 		slow: 30
+	},
+	spring: {
+		settle: {
+			stiffness: 230,
+			damping: 24
+		},
+		base: {
+			stiffness: 260,
+			damping: 20
+		},
+		pop: {
+			stiffness: 320,
+			damping: 14
+		}
+	}
+};
+const weight = {
+	regular: 400,
+	medium: 500,
+	semibold: 600,
+	bold: 700,
+	heavy: 800
+};
+/** Dark grounds need deeper shadows, and a lit top edge to separate surfaces. */
+const darkElevation = {
+	low: {
+		opacity: .32,
+		distance: 3,
+		size: 10,
+		edge: .07
+	},
+	mid: {
+		opacity: .4,
+		distance: 10,
+		size: 30,
+		edge: .08
+	},
+	high: {
+		opacity: .5,
+		distance: 22,
+		size: 60,
+		edge: .1
+	}
+};
+const lightElevation = {
+	low: {
+		opacity: .1,
+		distance: 2,
+		size: 8,
+		edge: 0
+	},
+	mid: {
+		opacity: .14,
+		distance: 8,
+		size: 26,
+		edge: 0
+	},
+	high: {
+		opacity: .2,
+		distance: 18,
+		size: 54,
+		edge: 0
 	}
 };
 const shape = {
@@ -5522,6 +5711,7 @@ const fonts = {
 /** Built-in themes. Fonts are never bundled: register the families you use. */
 const themes = {
 	graphite: {
+		mode: "dark",
 		color: {
 			bg: "#0d0e11",
 			surface: "#16181d",
@@ -5533,14 +5723,18 @@ const themes = {
 			accent2: "#b07cff",
 			positive: "#3ecf8e",
 			negative: "#ff5c5c",
-			highlight: "#ffd23f"
+			highlight: "#ffd23f",
+			shadow: "#000000"
 		},
 		font: fonts,
+		weight,
 		...shape,
+		elevation: darkElevation,
 		motion,
 		scale: 1
 	},
 	paper: {
+		mode: "light",
 		color: {
 			bg: "#f4f1ea",
 			surface: "#fffdf8",
@@ -5552,14 +5746,18 @@ const themes = {
 			accent2: "#1f5fe0",
 			positive: "#1f8a4c",
 			negative: "#c8282d",
-			highlight: "#ffe066"
+			highlight: "#ffe066",
+			shadow: "#3b2f1e"
 		},
 		font: fonts,
+		weight,
 		...shape,
+		elevation: lightElevation,
 		motion,
 		scale: 1
 	},
 	signal: {
+		mode: "dark",
 		color: {
 			bg: "#000000",
 			surface: "#111111",
@@ -5571,10 +5769,13 @@ const themes = {
 			accent2: "#ff2e88",
 			positive: "#00e676",
 			negative: "#ff1744",
-			highlight: "#c6ff00"
+			highlight: "#c6ff00",
+			shadow: "#000000"
 		},
 		font: fonts,
+		weight,
 		...shape,
+		elevation: darkElevation,
 		motion: {
 			...motion,
 			ease: {
@@ -5585,6 +5786,20 @@ const themes = {
 				fast: 6,
 				base: 12,
 				slow: 24
+			},
+			spring: {
+				settle: {
+					stiffness: 300,
+					damping: 26
+				},
+				base: {
+					stiffness: 340,
+					damping: 22
+				},
+				pop: {
+					stiffness: 400,
+					damping: 14
+				}
 			}
 		},
 		scale: 1
@@ -5596,6 +5811,10 @@ const themes = {
 */
 function defineTheme(input = {}, base = themes.graphite) {
 	const theme = merge(base, input);
+	if (input.mode === void 0 && input.color?.bg !== void 0) {
+		theme.mode = isLight(theme.color.bg) ? "light" : "dark";
+		if (input.elevation === void 0) theme.elevation = theme.mode === "light" ? lightElevation : darkElevation;
+	}
 	const ratio = contrastRatio(theme.color.ink, theme.color.surface);
 	if (ratio !== null && ratio < 4.5) throw new Error(`Theme contrast too low: ink ${theme.color.ink} on surface ${theme.color.surface} is ${ratio.toFixed(2)}:1 (needs 4.5:1).`);
 	return theme;
@@ -5611,24 +5830,6 @@ function merge(base, over) {
 	for (const [key, value] of Object.entries(over)) out[key] = merge(out[key], value);
 	return out;
 }
-/** WCAG contrast ratio of two hex colors, or null when either isn't hex. */
-function contrastRatio(a, b) {
-	const la = luminance(a);
-	const lb = luminance(b);
-	if (la === null || lb === null) return null;
-	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-	return (hi + .05) / (lo + .05);
-}
-function luminance(hex) {
-	const m = hex.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-	if (!m?.[1]) return null;
-	const h = m[1].length === 3 ? m[1].split("").map((c) => c + c).join("") : m[1];
-	const channel = (i) => {
-		const c = Number.parseInt(h.slice(i, i + 2), 16) / 255;
-		return c <= .03928 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
-	};
-	return .2126 * channel(0) + .7152 * channel(2) + .0722 * channel(4);
-}
 /** Shift every cue's `frame` (and `end`, when present) by `offset`. */
 function offsetCues(cues, offset) {
 	const out = {};
@@ -5670,7 +5871,8 @@ function motionPresetSchema() {
 		duration: z.number().int().positive().optional(),
 		ease: z.string().optional(),
 		distance: z.number().optional(),
-		delay: z.number().int().min(0).optional()
+		delay: z.number().int().min(0).optional(),
+		blur: z.union([z.boolean(), z.number().min(0).max(360)]).optional()
 	})]);
 }
 let baseProps;
@@ -5695,12 +5897,42 @@ function buildBaseProps() {
 		theme: z.custom((v) => typeof v === "object" && v !== null).optional(),
 		seed: z.number().int().optional(),
 		fps: z.number().positive().optional(),
+		canvas: z.object({
+			width: z.number().positive(),
+			height: z.number().positive()
+		}).strict().optional(),
 		customize: fn().optional()
 	});
 }
 function defineComponent(definition) {
 	return definition;
 }
+/**
+* Wrap component factories so every call starts from the project's frame
+* rate, canvas, theme and seed. Props given at the call win; a call's
+* partial `theme` merges over the default theme, not over `graphite`.
+*
+* ```ts
+* const ui = withDefaults({ fps: 60, canvas: { width: 1080, height: 1920 }, theme: themes.paper });
+* const Captions = ui(CaptionsBase);
+* ```
+*/
+function withDefaults(defaults) {
+	const base = defaults.theme ? defineTheme(defaults.theme) : void 0;
+	return (factory) => (props) => factory({
+		...defaults,
+		...props,
+		theme: props.theme && base ? defineTheme(props.theme, base) : props.theme ?? base
+	});
+}
+/**
+* The frame `gap` frames after `node` ends: `at: after(title, 6)`. Throws
+* for open-ended components, which have no end until given a `duration`.
+*/
+function after(node, gap = 0) {
+	if (!Number.isFinite(node.span.end)) throw new Error("after(): this component is open-ended (it stays until its parent ends). Give it a `duration`, or use its cues.");
+	return node.span.end + gap;
+}
 const kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 /**
 * Bind a definition to a host, producing the user-facing factory. framefields
@@ -5713,12 +5945,40 @@ function bind(host$1, definition) {
 		schema ??= basePropsSchema().extend(definition.props()).strict();
 		const parsed = schema.safeParse(input ?? {});
 		if (!parsed.success) {
-			const issues = parsed.error.issues.map((i) => `  - ${i.path.join(".") || "(props)"}: ${i.message}`).join("\n");
-			throw new Error(`${definition.name}: invalid props\n${issues}`);
+			const known = Object.keys(schema.shape);
+			const issues = parsed.error.issues.map((i) => {
+				const where = i.path.join(".") || "(props)";
+				const hint = i.code === "unrecognized_keys" && i.path.length === 0 ? suggest(i.keys, known) : "";
+				return `  - ${where}: ${i.message}${hint}`;
+			}).join("\n");
+			const who = typeof input?.id === "string" ? `${definition.name}#${input.id}` : definition.name;
+			throw new Error(`${who}: invalid props\n${issues}`);
 		}
 		return assemble(host$1, definition, parsed.data);
 	};
 }
+/** ` (did you mean "label"?)` for keys one or two edits from a known prop. */
+function suggest(keys, known) {
+	const hints = keys.flatMap((key) => {
+		let best;
+		let bestD = 3;
+		for (const k of known) {
+			const d = editDistance(key.toLowerCase(), k.toLowerCase());
+			if (d < bestD) [best, bestD] = [k, d];
+		}
+		return best ? [`"${key}" → "${best}"`] : [];
+	});
+	return hints.length > 0 ? ` (did you mean ${hints.join(", ")}?)` : "";
+}
+function editDistance(a, b) {
+	let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+	for (let i = 1; i <= a.length; i++) {
+		const row = [i];
+		for (let j = 1; j <= b.length; j++) row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+		prev = row;
+	}
+	return prev[b.length];
+}
 function assemble(host$1, definition, props) {
 	const theme = defineTheme(props.theme ?? {});
 	const fps = props.fps ?? 30;
@@ -5740,7 +6000,11 @@ function assemble(host$1, definition, props) {
 			duration: props.duration,
 			at: props.at ?? 0
 		},
-		hold
+		hold,
+		canvas: props.canvas ?? {
+			width: 1920 * theme.scale,
+			height: 1080 * theme.scale
+		}
 	};
 	const built = definition.build(ctx, props);
 	const enter = resolveMotion(props.enter === void 0 ? defaults.enter : props.enter, "enter", theme, fps);
@@ -5750,6 +6014,7 @@ function assemble(host$1, definition, props) {
 	if (duration === null && exit) throw new Error(`${definition.name}: an exit needs a known end. Give \`duration\`, or drop \`exit\`.`);
 	const width = props.width ?? built.width;
 	const height = props.height ?? built.height;
+	const blur = Math.max(enter?.blur ?? 0, exit?.blur ?? 0);
 	const stage = host$1.box({
 		id: ctx.partId("stage"),
 		position: "absolute",
@@ -5757,6 +6022,7 @@ function assemble(host$1, definition, props) {
 		y: 0,
 		width,
 		height,
+		...blur > 0 && { motionBlurShutter: blur },
 		children: built.children
 	});
 	const size$1 = {
@@ -5808,6 +6074,10 @@ function assemble(host$1, definition, props) {
 		part: {
 			value: (name) => parts[name],
 			enumerable: false
+		},
+		partNames: {
+			value: Object.keys(parts),
+			enumerable: false
 		}
 	});
 	if (built.api) {
@@ -5872,11 +6142,11 @@ function catmullRomPoint(p0, p1, p2, p3, t) {
 	const t2 = t1 + knot(p1, p2);
 	const t3 = t2 + knot(p2, p3);
 	const u = t1 + (t2 - t1) * t;
-	const mix = (a, b, ta, tb) => tb === ta ? a : lerp2(a, b, (u - ta) / (tb - ta));
-	const a1 = mix(p0, p1, t0, t1);
-	const a2 = mix(p1, p2, t1, t2);
-	const a3 = mix(p2, p3, t2, t3);
-	return mix(mix(a1, a2, t0, t2), mix(a2, a3, t1, t3), t1, t2);
+	const mix$1 = (a, b, ta, tb) => tb === ta ? a : lerp2(a, b, (u - ta) / (tb - ta));
+	const a1 = mix$1(p0, p1, t0, t1);
+	const a2 = mix$1(p1, p2, t1, t2);
+	const a3 = mix$1(p2, p3, t2, t3);
+	return mix$1(mix$1(a1, a2, t0, t2), mix$1(a2, a3, t1, t3), t1, t2);
 }
 function arcPath(points) {
 	if (points.length === 0) throw new Error("arcPath: no points");
@@ -6406,6 +6676,182 @@ function targetPoint(resolved, frame = 0, isText = false) {
 	const first = resolved.rects[0];
 	return anchorPoint(resolved.anchor === "tip" ? first : boundsOf(resolved.rects), resolved.anchor, isText);
 }
+const clamp01$1 = (t) => t < 0 ? 0 : t > 1 ? 1 : t;
+/** The "in" form of each base curve; `out` and `inOut` derive from it. */
+const BASES = {
+	none: () => (x) => x,
+	linear: () => (x) => x,
+	power1: () => (x) => x * x,
+	power2: () => (x) => x * x * x,
+	cubic: () => (x) => x * x * x,
+	power3: () => (x) => x ** 4,
+	sine: () => (x) => 1 - Math.cos(x * Math.PI / 2),
+	circ: () => (x) => 1 - Math.sqrt(Math.max(0, 1 - x * x)),
+	expo: () => (x) => x === 0 ? 0 : 2 ** (10 * (x - 1)),
+	back: ([overshoot = 1.70158]) => (x) => (overshoot + 1) * x * x * x - overshoot * x * x,
+	elastic: ([amplitude = 1, period = .3]) => {
+		const a = Math.max(1, amplitude);
+		const s = period / (2 * Math.PI) * Math.asin(1 / a);
+		return (x) => x === 0 || x === 1 ? x : -(a * 2 ** (10 * (x - 1)) * Math.sin((x - 1 - s) * (2 * Math.PI) / period));
+	},
+	bounce: () => (x) => 1 - bounceOut(1 - x)
+};
+function bounceOut(x) {
+	const n1 = 7.5625;
+	const d1 = 2.75;
+	if (x < 1 / d1) return n1 * x * x;
+	if (x < 2 / d1) return n1 * (x - 1.5 / d1) ** 2 + .75;
+	if (x < 2.5 / d1) return n1 * (x - 2.25 / d1) ** 2 + .9375;
+	return n1 * (x - 2.625 / d1) ** 2 + .984375;
+}
+const cache = /* @__PURE__ */ new Map();
+/** Parse an ease name into a function on [0, 1]. Unknown names throw. */
+function ease(name) {
+	if (!name) return (t) => clamp01$1(t);
+	const cached = cache.get(name);
+	if (cached) return cached;
+	const match = name.trim().match(/^([a-zA-Z0-9]+)(?:\.([a-zA-Z]+))?(?:\(([^)]*)\))?$/);
+	if (!match) throw new Error(`Unknown ease "${name}"`);
+	const base = (match[1] ?? "").toLowerCase();
+	const dir = (match[2] ?? "out").toLowerCase();
+	const params = (match[3] ?? "").split(",").map((s) => Number.parseFloat(s)).filter((n) => !Number.isNaN(n));
+	let fn$1;
+	if (base === "hold") fn$1 = (t) => t >= 1 ? 1 : 0;
+	else {
+		const make = BASES[base];
+		if (!make) throw new Error(`Unknown ease "${name}"`);
+		const easeIn = make(params);
+		if (dir === "in") fn$1 = (t) => easeIn(clamp01$1(t));
+		else if (dir === "inout") fn$1 = (t) => {
+			const s = clamp01$1(t);
+			return s < .5 ? easeIn(s * 2) / 2 : 1 - easeIn((1 - s) * 2) / 2;
+		};
+		else if (dir === "out") fn$1 = (t) => 1 - easeIn(1 - clamp01$1(t));
+		else throw new Error(`Unknown ease direction in "${name}"`);
+	}
+	cache.set(name, fn$1);
+	return fn$1;
+}
+/** `ease(name)(t)` in one call. */
+function evaluateEase(name, t) {
+	return ease(name)(t);
+}
+/**
+* Keyframe bookkeeping shared by every component: ordering, sampling, and
+* builders that collect keys per node and prop before animating once.
+*/
+/** Round to `places` decimals (default 3): keeps baked keys short and stable. */
+const round = (v, places = 3) => {
+	const k = 10 ** places;
+	return Math.round(v * k) / k;
+};
+/** The last element, or `undefined`. */
+const last = (list$1) => list$1[list$1.length - 1];
+/**
+* Keys in ascending frame order; of several keys on one frame, the one given
+* last wins. Input order is otherwise free.
+*/
+function ascending(keys) {
+	const byFrame = /* @__PURE__ */ new Map();
+	for (const k of keys) byFrame.set(k[0], k);
+	return [...byFrame.values()].sort((a, b) => a[0] - b[0]);
+}
+/**
+* Keys written as a timeline where each key supersedes what came before at
+* or after its frame: a key earlier than the previous one drops the later
+* ones (a retarget cancels the planned rest of a move).
+*/
+function supersede(keys) {
+	const out = [];
+	for (const k of keys) {
+		while (out.length > 0 && last(out)[0] >= k[0]) out.pop();
+		out.push(k);
+	}
+	return out;
+}
+/**
+* A numeric track's value at `frame`, the way the renderer evaluates it:
+* each segment eased by its end key's ease, `hold` stepping on the key.
+*/
+function valueAt(keys, frame) {
+	const first = keys[0];
+	if (!first) return 0;
+	if (frame <= first[0]) return first[1];
+	for (let i = 1; i < keys.length; i++) {
+		const [f0, v0] = keys[i - 1];
+		const [f1, v1, ease$1] = keys[i];
+		if (frame > f1) continue;
+		if (ease$1 === "hold") return frame === f1 ? v1 : v0;
+		const t = evaluateEase(typeof ease$1 === "string" ? ease$1 : void 0, (frame - f0) / Math.max(1, f1 - f0));
+		return v0 + (v1 - v0) * t;
+	}
+	return last(keys)[1];
+}
+/** A value track built from transitions: each eases from wherever the value is to `to`. */
+var Track = class {
+	changes = [];
+	constructor(initial) {
+		this.initial = initial;
+	}
+	to(start, end, value, ease$1 = "power2.out") {
+		this.changes.push({
+			start,
+			end: Math.max(start, end),
+			to: value,
+			ease: ease$1
+		});
+		return this;
+	}
+	/** Jump to `value` on `frame` (a hold key). */
+	set(frame, value) {
+		return this.to(frame, frame, value);
+	}
+	/** Ascending keyframes; a change that starts mid-transition starts from its target. */
+	keys() {
+		const keys = [[0, this.initial]];
+		let value = this.initial;
+		for (const c of [...this.changes].sort((x, y) => x.start - y.start)) {
+			const prev = last(keys);
+			const start = Math.max(c.start, prev[0] + (c.end === c.start ? 1 : 0));
+			if (start > prev[0]) keys.push([start, value]);
+			const end = Math.max(c.end, start);
+			if (end === start) keys[keys.length - 1] = [
+				start,
+				c.to,
+				"hold"
+			];
+			else keys.push([
+				end,
+				c.to,
+				c.ease
+			]);
+			value = c.to;
+		}
+		return supersede(keys);
+	}
+};
+/**
+* Keys collected per node and prop from anywhere in a build, merged into one
+* ascending track each and applied with one `animate()` per node.
+*/
+var KeyBook = class {
+	book = /* @__PURE__ */ new Map();
+	/** Append keys for `node`'s `prop` (merged with any already given). */
+	key(node, prop, keys) {
+		const byProp = this.book.get(node) ?? /* @__PURE__ */ new Map();
+		this.book.set(node, byProp);
+		byProp.set(prop, [...byProp.get(prop) ?? [], ...keys]);
+		return this;
+	}
+	/** Animate every node once with its merged tracks. */
+	apply() {
+		for (const [node, byProp] of this.book) {
+			const anim = LayerAnimation.create();
+			for (const [prop, keys] of byProp) anim.keys(prop, ascending(keys));
+			node.animate(anim);
+		}
+	}
+};
 /**
 * Simplify `values` (one per frame, starting at `startFrame`) to linear keys
 * whose interpolation stays within `tolerance` of every sample
@@ -6472,9 +6918,9 @@ function springAt(seconds, { stiffness = 170, damping = 26, mass = 1 } = {}) {
 * `max` frames.
 */
 function springSettleFrames(fps, options, epsilon = .001, max = 600) {
-	let last = 0;
-	for (let f = 0; f <= max; f++) if (Math.abs(1 - springAt(f / fps, options)) > epsilon) last = f;
-	return Math.min(max, last + 1);
+	let last$1 = 0;
+	for (let f = 0; f <= max; f++) if (Math.abs(1 - springAt(f / fps, options)) > epsilon) last$1 = f;
+	return Math.min(max, last$1 + 1);
 }
 /**
 * A spring from `from` to `to` starting at frame `start`, baked to linear
@@ -6484,65 +6930,69 @@ function springKeys(start, from, to, fps, options, tolerance = Math.max(1e-4, Ma
 	const frames = springSettleFrames(fps, options);
 	return bakeSamples(Array.from({ length: frames + 1 }, (_, f) => f === frames ? to : from + (to - from) * springAt(f / fps, options)), start, { tolerance });
 }
-const clamp01$1 = (t) => t < 0 ? 0 : t > 1 ? 1 : t;
-/** The "in" form of each base curve; `out` and `inOut` derive from it. */
-const BASES = {
-	none: () => (x) => x,
-	linear: () => (x) => x,
-	power1: () => (x) => x * x,
-	power2: () => (x) => x * x * x,
-	cubic: () => (x) => x * x * x,
-	power3: () => (x) => x ** 4,
-	sine: () => (x) => 1 - Math.cos(x * Math.PI / 2),
-	circ: () => (x) => 1 - Math.sqrt(Math.max(0, 1 - x * x)),
-	expo: () => (x) => x === 0 ? 0 : 2 ** (10 * (x - 1)),
-	back: ([overshoot = 1.70158]) => (x) => (overshoot + 1) * x * x * x - overshoot * x * x,
-	elastic: ([amplitude = 1, period = .3]) => {
-		const a = Math.max(1, amplitude);
-		const s = period / (2 * Math.PI) * Math.asin(1 / a);
-		return (x) => x === 0 || x === 1 ? x : -(a * 2 ** (10 * (x - 1)) * Math.sin((x - 1 - s) * (2 * Math.PI) / period));
-	},
-	bounce: () => (x) => 1 - bounceOut(1 - x)
-};
-function bounceOut(x) {
-	const n1 = 7.5625;
-	const d1 = 2.75;
-	if (x < 1 / d1) return n1 * x * x;
-	if (x < 2 / d1) return n1 * (x - 1.5 / d1) ** 2 + .75;
-	if (x < 2.5 / d1) return n1 * (x - 2.25 / d1) ** 2 + .9375;
-	return n1 * (x - 2.625 / d1) ** 2 + .984375;
-}
-const cache = /* @__PURE__ */ new Map();
-/** Parse an ease name into a function on [0, 1]. Unknown names throw. */
-function ease(name) {
-	if (!name) return (t) => clamp01$1(t);
-	const cached = cache.get(name);
-	if (cached) return cached;
-	const match = name.trim().match(/^([a-zA-Z0-9]+)(?:\.([a-zA-Z]+))?(?:\(([^)]*)\))?$/);
-	if (!match) throw new Error(`Unknown ease "${name}"`);
-	const base = (match[1] ?? "").toLowerCase();
-	const dir = (match[2] ?? "out").toLowerCase();
-	const params = (match[3] ?? "").split(",").map((s) => Number.parseFloat(s)).filter((n) => !Number.isNaN(n));
-	let fn$1;
-	if (base === "hold") fn$1 = (t) => t >= 1 ? 1 : 0;
-	else {
-		const make = BASES[base];
-		if (!make) throw new Error(`Unknown ease "${name}"`);
-		const easeIn = make(params);
-		if (dir === "in") fn$1 = (t) => easeIn(clamp01$1(t));
-		else if (dir === "inout") fn$1 = (t) => {
-			const s = clamp01$1(t);
-			return s < .5 ? easeIn(s * 2) / 2 : 1 - easeIn((1 - s) * 2) / 2;
-		};
-		else if (dir === "out") fn$1 = (t) => 1 - easeIn(1 - clamp01$1(t));
-		else throw new Error(`Unknown ease direction in "${name}"`);
+/**
+* Per-frame values (frames 0…`length`) that spring to each new target from
+* wherever they are: a retarget mid-flight starts from the current value
+* (velocity isn't carried over). Bake with `bakeSamples` or bind as a signal.
+*/
+function springTrack(changes, initial, length, fps, options = {
+	stiffness: 230,
+	damping: 24
+}) {
+	const sorted = [...changes].sort((a, b) => a[0] - b[0]);
+	const out = new Array(length + 1);
+	let from = initial;
+	let to = initial;
+	let since = 0;
+	let k = 0;
+	for (let f = 0; f <= length; f++) {
+		while (k < sorted.length && sorted[k][0] <= f) {
+			from = from + (to - from) * springAt((f - since) / fps, options);
+			to = sorted[k][1];
+			since = sorted[k][0];
+			k++;
+		}
+		out[f] = from + (to - from) * springAt((f - since) / fps, options);
 	}
-	cache.set(name, fn$1);
-	return fn$1;
+	return out;
 }
-/** `ease(name)(t)` in one call. */
-function evaluateEase(name, t) {
-	return ease(name)(t);
+/** Layer styles for `level`: a drop shadow and, when the theme asks, a top-edge highlight. */
+function elevationStyle(theme, level) {
+	const e = theme.elevation[level];
+	const s = theme.scale;
+	return {
+		...e.opacity > 0 && { dropShadow: {
+			color: theme.color.shadow,
+			opacity: e.opacity,
+			angle: 90,
+			distance: e.distance * s,
+			size: e.size * s
+		} },
+		...e.edge > 0 && { innerShadow: {
+			color: "#ffffff",
+			opacity: e.edge,
+			angle: 270,
+			distance: Math.max(1, s),
+			size: 0,
+			blendMode: "normal"
+		} }
+	};
+}
+/** Put `node` at `level` (or leave it flat for `false`); returns it. */
+function elevate(host$1, node, theme, level) {
+	if (level === false) return node;
+	const style = elevationStyle(theme, level);
+	return Object.keys(style).length > 0 ? host$1.style(node, style) : node;
+}
+/**
+* A background for a surface of `color`: a vertical sheen a few percent
+* lighter at the top on dark themes (light themes stay flat, where a
+* lighter top reads as a glare). Non-hex / non-rgb colors pass through.
+*/
+function surfaceFill(color$1, theme, sheen = .05) {
+	if (theme.mode === "light" || sheen <= 0) return color$1;
+	const top = mix(color$1, "#ffffff", sheen);
+	return top === color$1 ? color$1 : `linear-gradient(180deg, ${top} 0%, ${color$1} 100%)`;
 }
 /**
 * Audio analysis, offline and deterministic: decoded samples in, plain
@@ -6600,7 +7050,6 @@ function percentile(values, p) {
 }
 const db = (v) => 20 * Math.log10(v + 1e-9);
 const clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
-const round = (v) => Math.round(v * 1e3) / 1e3;
 /** Band edges in Hz, log-spaced. */
 function bandEdges(count, minHz, maxHz) {
 	return Array.from({ length: count + 1 }, (_, i) => minHz * (maxHz / minHz) ** (i / count));
@@ -6687,8 +7136,8 @@ function pickOnsets(flux, fps) {
 		const near = flux.slice(Math.max(0, f - reach), f + reach + 1);
 		const mean = near.reduce((a, b) => a + b, 0) / near.length;
 		if (v < mean + 1.5 * Math.sqrt(near.reduce((a, b) => a + (b - mean) ** 2, 0) / near.length)) continue;
-		const last = beats$1[beats$1.length - 1];
-		if (last !== void 0 && f - last < gap) continue;
+		const last$1 = beats$1[beats$1.length - 1];
+		if (last$1 !== void 0 && f - last$1 < gap) continue;
 		beats$1.push(f);
 	}
 	return beats$1;
@@ -6757,8 +7206,8 @@ function scheduleExpression(unit, schedule, mode, factors) {
 	const table = Array.from({ length: n + 1 }, (_, k) => evaluateEase(schedule.ease, k / n));
 	const idx = UNIT_INDEX[unit];
 	const pick = (arr) => `(${arr}[${idx}]??${arr}[${arr}.length-1])`;
-	const weight = mode === "enter" ? "1-v" : "v";
-	const scaled = factors ? `(${weight})*${pick("F")}` : weight;
+	const weight$1 = mode === "enter" ? "1-v" : "v";
+	const scaled = factors ? `(${weight$1})*${pick("F")}` : weight$1;
 	return [
 		`((S,L,F)=>{`,
 		`const t=frame-${pick("S")};`,
@@ -6825,6 +7274,52 @@ function evaluateGlyphExpression(expression, scope) {
 	return Number.isFinite(result$1) ? Math.max(-1, Math.min(1, result$1)) : 0;
 }
 /**
+* Safe-area margins by use. Portrait leaves room for the captions, buttons
+* and handles that short-form platforms draw over the bottom and right.
+*/
+const SAFE_INSETS = {
+	titles: {
+		landscape: {
+			x: .06,
+			top: .08,
+			bottom: .1
+		},
+		portrait: {
+			x: .08,
+			top: .1,
+			bottom: .24
+		}
+	},
+	captions: {
+		landscape: {
+			x: .1,
+			top: .08,
+			bottom: .1
+		},
+		portrait: {
+			x: .08,
+			top: .12,
+			bottom: .22
+		}
+	}
+};
+/**
+* The rect inside `canvas` that content keeps to. `area` forces an
+* orientation or gives the rect itself; by default a frame taller than it is
+* wide counts as portrait.
+*/
+function safeArea(canvas, area$1, insets = SAFE_INSETS.titles) {
+	if (area$1 && typeof area$1 === "object") return area$1;
+	const { width: W, height: H } = canvas;
+	const i = (area$1 ? area$1 === "portrait" : H > W) ? insets.portrait : insets.landscape;
+	return {
+		x: W * i.x,
+		y: H * i.top,
+		width: W * (1 - 2 * i.x),
+		height: H * (1 - i.top - i.bottom)
+	};
+}
+/**
 * Keystroke frames for typing at `cps` characters a second: seeded ±30 %
 * jitter, a beat after spaces, a longer one after punctuation. Frame `k[i]`
 * is when character `i` appears.
@@ -7715,7 +8210,7 @@ var Composition = class Composition {
 	* never change. `renderVideo({ qa })` includes these automatically.
 	*/
 	lint() {
-		return lintComposition(this.toSpec());
+		return lintComposition(this.toSpec(), { emojiFont: FontManager.hasEmojiFont() });
 	}
 };
 function withAnimation(node) {
@@ -8369,5 +8864,5 @@ const Effect = Object.assign(Effect$1, effectFactories, {
 });
 
 //#endregion
-export { offsetCues as $, rich as $t, constantExpression as A, wobblePoints as At, enterAnimation as B, Layer3D as Bt, beats as C, toFrames as Ct, boxPath as D, typingFrames as Dt, boundsOf as E, transformPathData as Et, defineTheme as F, PhysicsWorld3D as Ft, frameSpan as G, accent as Gt, evaluateGlyphExpression as H, ClipVision as Ht, dist as I, PhysicsBody2D as It, hashString as J, color as Jt, glyphAnimator as K, bold as Kt, drawOnKeys as L, PhysicsWorld2D as Lt, cover as M, Styles as Mt, defineComponent as N, Physics as Nt, catmullRom as O, windowExpression as Ot, defineMeta as P, PhysicsBody3D as Pt, lineShift as Q, parseMarkup as Qt, ease as R, Lighting as Rt, basePropsSchema as S, themes as St, boilKeys as T, toSeconds as Tt, exitAnimation as U, PersonTrack as Ut, evaluateEase as V, Particles as Vt, findRange as W, DEFAULT_CHART_COLORS as Wt, lerp2 as X, mark as Xt, holdFirstKeys as Y, italic as Yt, linePath as Z, normalizeTextSpans as Zt, arrowPaths as _, stepExpression as _t, Media as a, FRAMEFIELDS_AI_PROXY_URL as an, resolveMotion as at, bakeSamples as b, textLayout as bt, section as c, scaleFrames as ct, analyzeAudio as d, springAt as dt, size as en, pulseKeys as et, MOTION_PRESETS as f, springKeys as ft, arcPath as g, staggerRanks as gt, anchorPoint as h, staggerOffsets as ht, Light as i, ApiError as in, resampleBands as it, contrastRatio as j, wordRanges as jt, chain as k, within as kt, bindComponent as l, scheduleExpression as lt, analyzeChannels as m, squigglePath as mt, Effect as n, sub as nn, rangeRects as nt, blurRegion as o, ValidationError as on, resolveTarget as ot, UNIT_INDEX as p, springSettleFrames as pt, hashRng as q, code as qt, Layer as r, sup as rn, rendererChars as rt, editTrackedRegion as s, ai as sn, rng as st, Composition as t, span as tn, quantize as tt, z$2 as u, smoothRelease as ut, audioLevelsSchema as v, targetPoint as vt, bind as w, toPathData as wt, bandEdges as x, themeFrames as xt, bakeFunction as y, targetSchema as yt, ellipsePath as z, Transition as zt };
-//# sourceMappingURL=src-r7Suenhp.mjs.map
+export { glyphAnimator as $, wordRanges as $t, boilKeys as A, squigglePath as At, defineTheme as B, themes as Bt, audioLevelsSchema as C, span as Cn, scaleFrames as Ct, basePropsSchema as D, FRAMEFIELDS_AI_PROXY_URL as Dn, springKeys as Dt, bandEdges as E, ApiError as En, springAt as Et, constantExpression as F, surfaceFill as Ft, elevationStyle as G, transparent as Gt, drawOnKeys as H, toPathData as Ht, contrastRatio as I, targetPoint as It, evaluateEase as J, windowExpression as Jt, ellipsePath as K, typingFrames as Kt, cover as L, targetSchema as Lt, boxPath as M, staggerRanks as Mt, catmullRom as N, stepExpression as Nt, beats as O, ValidationError as On, springSettleFrames as Ot, chain as P, supersede as Pt, frameSpan as Q, wobblePoints as Qt, defineComponent as R, textLayout as Rt, ascending as S, size as Sn, safeArea as St, bakeSamples as T, sup as Tn, smoothRelease as Tt, ease as U, toSeconds as Ut, dist as V, toFrames as Vt, elevate as W, transformPathData as Wt, exitAnimation as X, withDefaults as Xt, evaluateGlyphExpression as Y, withAlpha as Yt, findRange as Z, within as Zt, after as _, italic as _n, resampleBands as _t, Media as a, PhysicsWorld2D as an, last as at, arcPath as b, parseMarkup as bn, rng as bt, section as c, Layer3D as cn, lineShift as ct, analyzeAudio as d, PersonTrack as dn, offsetCues as dt, Styles as en, hashRng as et, KeyBook as f, DEFAULT_CHART_COLORS as fn, parseColor as ft, UNIT_INDEX as g, color as gn, rendererChars as gt, Track as h, code as hn, rangeRects as ht, Light as i, PhysicsBody2D as in, isLight as it, boundsOf as j, staggerOffsets as jt, bind as k, ai as kn, springTrack as kt, bindComponent as l, Particles as ln, luminance as lt, SAFE_INSETS as m, bold as mn, quantize as mt, Effect as n, PhysicsBody3D as nn, holdFirstKeys as nt, blurRegion as o, Lighting as on, lerp2 as ot, MOTION_PRESETS as p, accent as pn, pulseKeys as pt, enterAnimation as q, valueAt as qt, Layer as r, PhysicsWorld3D as rn, inkOn as rt, editTrackedRegion as s, Transition as sn, linePath as st, Composition as t, Physics as tn, hashString as tt, z$2 as u, ClipVision as un, mix as ut, analyzeChannels as v, mark as vn, resolveMotion as vt, bakeFunction as w, sub as wn, scheduleExpression as wt, arrowPaths as x, rich as xn, round as xt, anchorPoint as y, normalizeTextSpans as yn, resolveTarget as yt, defineMeta as z, themeFrames as zt };
+//# sourceMappingURL=src-_l81YkMD.mjs.map