framefields 2.0.2

package/dist/index.mjs

@@ -0,0 +1,2623 @@
+import "./chunk-GMkBE123.mjs";
+import { $ as VideoAnimationSchema, A as MediaSourceSchema, At as programmaticSignal, B as SignalChannelMetaSchema, Bt as takeRenderDiagnostics, C as GeneratorSignalDataSchema, Ct as getLeafMediaType, D as MIME_TYPES, Dt as isEqual, E as JsonValueSchema, Et as hasOnlySingleSource, F as NodeResultSchema, Ft as serializeSignalData, G as SingleOutputGenericSchema, H as SignalGateDataSchema, Ht as updateClockSignals, I as NodeVisualConfigSchema, It as signal, J as TextOperationSchema, K as SourceOperationSchema, L as OutputItemSchema, Lt as signalBuilder, M as ModerationUnrefundableError, Mt as registerSignalDependency, N as MultiOutputGenericSchema, Nt as reportRenderDiagnostic, O as MediaMetadataSchema, Ot as isSignal, P as NodeMetadataSchema, Pt as resolveMediaMimeType, Q as TransitionTypeSchema, R as ProgrammaticSignal, Rt as sineSignal, S as FileDataSchema, St as getFingerprint, T as HandleTypeVal, Tt as getRenderFingerprint, U as SignalMathDataSchema, V as SignalDataSchema, Vt as timeSignal, W as SignalStatsSchema, X as TimelineTransformSchema, Y as TimelineSegmentSchema, Z as TransitionSchema, _ as DataTypes, _t as frameArraySignal, a as BaseVideoLayerPropsSchema, at as VirtualMediaDataSchema, b as ExtendedLayerSchema, bt as getActiveMediaMetadata, c as COMPOSITOR_DEFAULTS, ct as computeVideoCropRenderProps, d as DATA_TYPE_EXTENSIONS, dt as createOutputItemSchema, et as VideoLayerTypeSchema, f as DEFAULT_DURATION_MS, ft as createVirtualMedia, g as DataTypeVal, gt as findSourceAsset, h as DataType, ht as extractSvgDimensions, i as BaseMediaOperationPropsSchema, it as VideoTimingPropsSchema, j as ModerationError, jt as progressSignal, k as MediaOperationSchema, kt as isVirtualMediaData, l as ConfigHandleSchema, lt as computed, m as DEFAULT_MEDIA_DIMENSION, mt as deserializeSignalData, n as AnyOutputUnionSchema, nt as VideoStylePropsSchema, o as CAPTION_LAYER_DEFAULTS, ot as appendOperation, p as DEFAULT_FPS, pt as dataTypeColors, q as TEXT_LAYER_DEFAULTS, r as AudioExtractorSignalDataSchema, rt as VideoTextPropsSchema, s as COMPOSITE_OPERATIONS, st as checkNodeResultCache, t as AnimationTypeSchema, tt as VideoSpatialPropsSchema, u as ConfigSchemaRegistry, ut as cosineSignal, v as Effect$1, vt as frameSignal, w as GlobalCompositeOperation, wt as getMediaType, x as FileAssetSchema, xt as getFileDataMetadata, y as ExportResultSchema, yt as generateId, z as Signal, zt as stampResult } from "./dist-Bx6J0VcM.mjs";
+import { B as inputStore, F as ensureDevice, G as lutStore, H as loadFBX, I as generateExtrudedTextGeometry, U as loadModel3D, W as loadOBJ, X as parseMTL, Y as parseFBX, Z as parseOBJ, _ as ShadowPipeline, a as Camera3D, c as Light3D, et as shaderStore, f as Path3D, h as SSAOPipeline, m as Renderer3D, n as AudioLatentTrackCache, o as EffectPipeline, p as Renderer2D, q as mediaDecoderCache, r as AudioMeshDeformPipeline, rt as textureCache, s as GlassPipeline, t as AudioLatentEngine, tt as signalRegistry, u as MotionBlurPipeline, x as SlugPipeline, y as SlugFontCache } from "./dist-gjHmorxL.mjs";
+import "./renderers-BWg16W-V-BXG_cjhM.mjs";
+import "./signals-BwbdO3AN.mjs";
+import "./renderer-BXMmISWG.mjs";
+import "./renderer-bZU_ndxf.mjs";
+import { S as springCalculation, _ as measureTextAsync, b as requiresIsolation, c as MAX_LIGHTS, d as bezier, f as computeStrokeRect, g as measureText, h as measureSpring, i as mixAudioTracks, l as Matrix4Math, m as mapBlendModeToSkia, o as Easing, p as interpolate, s as LIGHT_UNIFORM_SIZE_BYTES, u as Vector3Math, v as parseColorToRgb, x as spring, y as preloadFont } from "./dist-1iUYuPct.mjs";
+import { t as AudioSignal } from "./audio-x28ZgQBP.mjs";
+import { t as FontManager } from "./fonts-DrGTBJJk.mjs";
+import "./renderer-Tp6OXWNZ.mjs";
+import "./renderer-vCFTm0oe.mjs";
+import "./renderer-C17wL9QX.mjs";
+import "./renderer-7DOcIxFG.mjs";
+import "./renderer-BGXU6vcW.mjs";
+import "./renderer-vvpdx1vk.mjs";
+import "./renderer-C2n-EHxg.mjs";
+import "./renderer-WkVrkCVA.mjs";
+import { i as softLimit, n as mixSfxInto, r as renderSfx, t as encodeStereoWav } from "./audio-TAvPwzLR.mjs";
+import { i as OpticalFlowComputePipeline, n as ControlNetMultiplexer, o as TemporalDeflickerPipeline, r as DepthNormalsComputePipeline, s as TensorPipeline, t as CannyComputePipeline } from "./dist-C_hjvkdN.mjs";
+import { a as PoseSkeletonRenderer, c as TemporalObjectTracker, d as VisionRunner, f as analyzeSequence, h as COCO_CLASSES, i as COCO17_KEYPOINT_NAMES, l as VisionBundle, m as pinNodeToObject, n as COCO17_BONES, o as SegmentationTexturePool, p as pinNodeToLandmark, r as COCO17_KEYPOINTS, s as SpatialLandmarkTransformer, u as VisionNode } from "./renderer-XcmYTd6P.mjs";
+import { $ as TextPathBuilder, A as MaterialTypeSchema, At as evaluateAnimationAtFrame, B as SelectorUnitsSchema, Bt as evaluateVolumetricFormation, C as KineticMarqueeConfigSchema, Ct as computeLayoutSync, D as LightTypeSchema, Dt as deterministicWigglyNoise, E as LightNodeSchema, Et as computeStaggerDelay, F as SceneDefinitionSchema, Ft as evaluateSelectorCombination, G as SpringPhysicsSchema, H as ShapeNodeSchema, Ht as generatePathSegments, I as SceneTransitionTypeSchema, It as evaluateSkewMatrix, J as TextAnimatorBuilder, Jt as sampleCurveGeometry, K as TextAnchorConfigSchema, Kt as parseSvgPathToCubicBeziers, L as SelectorBasedOnSchema, Lt as evaluateSpringProgress, M as Model3DNodeSchema, Mt as evaluateCubicBezierDerivative, N as ParticleDissolveConfigSchema, Nt as evaluateExpressionSelector, O as LineSpacingDynamicsSchema, Ot as distanceToCurveParameter, P as Scene, Pt as evaluateMarqueeOffset, Q as TextNodeSchema, R as SelectorModeSchema, Rt as evaluateTrackAtFrame, S as GlyphAnchorPointSchema, St as computeLayout, T as LayoutNodeSchema, Tt as computeRangeSelectorWeight, U as SkewPropertiesSchema, Ut as getScramblePool, V as Sequence, Vt as generateArcLengthLUT, W as Spatial3DPropertiesSchema, Wt as getShuffledOrder, X as TextCursorConfigSchema, Xt as waveToCubicBeziers, Y as TextAnimatorSchema, Yt as samplePathChainGeometry, Z as TextCursorStyleSchema, _ as EnhancedTextNodeSchema, _t as calculateSequenceTimeline, a as AnchorPresetSchema, at as TextSignalSelectorSchema, b as FlexNodeSchema, bt as computeAnchorPivotOffset, c as BoxNodeSchema, ct as TextWigglySelectorSchema, d as CarrierHandoffConfigSchema, dt as VariableFontAxesSchema, et as TextPathOptionsSchema, f as ChromaticGlitchConfigSchema, ft as Vec2Schema, g as DynamicStrokePropertiesSchema, gt as buildPathLUT, h as CubicBezierSegmentSchema, ht as applyStaggerToChildren, i as AnchorGroupingSchema, it as TextSelectorSchema, j as MediaNodeSchema, jt as evaluateCubicBezier, k as LongShadowConfigSchema, kt as ellipseToCubicBeziers, l as CameraAnimation, lt as TypewriterAnimatorSchema, m as CompositorProgramSchema, mt as VolumetricFormationModeSchema, n as AdvancedTextAnimatorBuilder, nt as TextRangeSelectorSchema, o as AnimatableGlyphPropsSchema, ot as TextSpanMarkSchema, p as ColorStopSchema, pt as VolumetricFormationConfigSchema, q as TextAnimator, qt as sampleAudioSpectrumScale, r as AdvancedTextAnimatorSchema, rt as TextScrambleConfigSchema, s as AudioSpectrumTypographySchema, st as TextSpanSchema, t as AETextAnimatorSchema, tt as TextPathSourceSchema, u as CameraNodeSchema, ut as TypingCadenceSchema, v as ExpressionSelectorSchema, vt as collectNodeOps, w as LayerAnimation, wt as computeLineLeadingDisplacement, x as GlyphAnchorGroupingSchema, xt as computeCarrierContinuity, y as ExtendedGlyphPropertiesSchema, yt as compositorToProgram, z as SelectorShapeSchema, zt as evaluateTypewriterState } from "./program-Dl510wmI.mjs";
+import "./renderer-Cl1oUXMi.mjs";
+import "./renderer-CDOUAN7X.mjs";
+import "./renderer-pxXf9dvk.mjs";
+import "./renderer-CQiTodg9.mjs";
+import "./renderer-CzPWB0Ss.mjs";
+import "./renderer-DZGtBUCx.mjs";
+import "./renderer-BDLnExoP.mjs";
+import "./renderer-CH8sdfYX.mjs";
+import "./renderer-CB5aWAaf.mjs";
+import "./renderer-ho_jXJ0H.mjs";
+import "./renderer-DxjVQV6f.mjs";
+import "./renderer-Ryo2CEFD.mjs";
+import "./renderer-BsgIcBKH.mjs";
+import "./renderer-_uvdg48N.mjs";
+import "./renderer-x2s9LmVL.mjs";
+import "./renderer-BQHbp-Sp.mjs";
+import "./renderer-CpkiHRhh.mjs";
+import "./renderer-CMzEjdzi.mjs";
+import "./renderer-DbaQLI4z.mjs";
+import "./renderer-BREIjsUU.mjs";
+import "./renderer-I-Sw3JBB.mjs";
+import "./renderer-OWQmmg4Z.mjs";
+import "./renderer-Dt6fzgX5.mjs";
+import "./renderer-B_NuVaIP.mjs";
+import "./renderer-CwQhzcUn.mjs";
+import "./renderer-DFKsLrUs.mjs";
+import "./renderer-B1CvhW4p.mjs";
+import "./renderer-k2JL79kM.mjs";
+import "./renderer-ByDhfrPE.mjs";
+import "./renderer-Dp_FfvF-.mjs";
+import { D as Vignette, E as ColorKey, S as Vision, T as ColorBalance, _ as SelectiveColor, a as CustomEffect, b as TileOffset, c as GradientMap, d as Levels, f as Modulate, g as SSAO, h as Relight3D, i as Curves, l as HalftoneScreen, m as PBRGlass, n as AudioSignalExtractor, o as DepthOfField, p as MotionBlur, r as Crop, s as FilmGrain, t as ApplyLUT, u as HighPass, v as ShadowsHighlights, w as Blur, x as UnsharpMask, y as TemporalDeflicker } from "./effects-CHWORCYd.mjs";
+import { a as HeadlessWebGPURenderer, i as HeadlessMediaRenderer, n as renderFrameGrid, o as formatQaReport, r as resolveSamplePoints, s as renderSemaphore, t as computeGridLayout } from "./renderer-Fco4EmAu.mjs";
+import "./dist-cjs-BKmGCgtm.mjs";
+import { t as startPreview } from "./preview-uQM210iy.mjs";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { format } from "d3-format";
+import { scaleBand, scaleLinear, scaleUtc } from "d3-scale";
+import { arc, area, curveLinear, curveMonotoneX, curveStepAfter, line, pie, stack, stackOffsetDiverging } from "d3-shape";
+
+//#region src/ids.ts
+/**
+* Default ids for nodes created without one. A counter per prefix rather than
+* a random suffix: the same composition script builds the same ids on every
+* run and in every render worker, so specs, caches and diffs stay stable.
+*/
+const counters = /* @__PURE__ */ new Map();
+function autoId(prefix) {
+	const n = (counters.get(prefix) ?? 0) + 1;
+	counters.set(prefix, n);
+	return `${prefix}-auto-${n}`;
+}
+
+//#endregion
+//#region src/rich-text.ts
+/**
+* Tagged template literal for authoring rich, multi-style text runs.
+*
+* Interpolates strings, numbers, reactive signals, and typed span modifiers
+* directly into a structured TextSpan[] array with zero runtime parsing.
+*
+* @example
+* rich`Scale ${bold("10x", { fill: "#6366f1" })} faster with ${mark("120 FPS", { bg: "#10b98133" })}`
+*/
+function rich(strings, ...values) {
+	const spans = [];
+	for (let i = 0; i < strings.length; i++) {
+		const str = strings[i];
+		if (str) spans.push({ text: str });
+		if (i < values.length) {
+			const val = values[i];
+			if (val === null || val === void 0) continue;
+			if (Array.isArray(val)) {
+				for (const item of val) if (typeof item === "string") {
+					if (item) spans.push({ text: item });
+				} else if (item && typeof item === "object" && "text" in item) spans.push(item);
+			} else if (typeof val === "object" && "text" in val) spans.push(val);
+			else if (typeof val === "object" && "get" in val && typeof val.get === "function") spans.push({ text: val });
+			else spans.push({ text: String(val) });
+		}
+	}
+	return spans;
+}
+function span(text, options = {}) {
+	return {
+		text,
+		...options
+	};
+}
+function bold(text, options = {}) {
+	return {
+		text,
+		fontWeight: options.fontWeight ?? 700,
+		...options
+	};
+}
+function italic(text, options = {}) {
+	return {
+		text,
+		fontStyle: "italic",
+		...options
+	};
+}
+function accent(text, options = {}) {
+	return {
+		text,
+		fill: options.fill ?? "#6366f1",
+		...options
+	};
+}
+function color(text, fill, options = {}) {
+	return {
+		text,
+		fill,
+		...options
+	};
+}
+function size(text, fontSize, options = {}) {
+	return {
+		text,
+		fontSize,
+		...options
+	};
+}
+function mark(text, options = {}) {
+	const { bg, fill, radius, paddingX, paddingY, ...rest } = options;
+	return {
+		text,
+		fill,
+		mark: {
+			background: bg ?? "#6366f133",
+			borderRadius: radius ?? 4,
+			paddingX: paddingX ?? 6,
+			paddingY: paddingY ?? 2
+		},
+		...rest
+	};
+}
+function sup(text, options = {}) {
+	return {
+		text,
+		baselineShift: options.baselineShift ?? -8,
+		...options
+	};
+}
+function sub(text, options = {}) {
+	return {
+		text,
+		baselineShift: options.baselineShift ?? 6,
+		...options
+	};
+}
+function code(text, options = {}) {
+	return {
+		text,
+		fontFamily: options.fontFamily ?? "JetBrains Mono",
+		mark: options.mark ?? {
+			background: "#ffffff18",
+			borderRadius: 4,
+			paddingX: 6,
+			paddingY: 2
+		},
+		...options
+	};
+}
+/**
+* Normalizes string, TextSpan[], or array of mixed strings/spans into plain text and spans.
+*/
+function normalizeTextSpans(input) {
+	if (typeof input === "string") return { text: input };
+	if (!Array.isArray(input)) return { text: String(input) };
+	const spans = [];
+	let plainText = "";
+	for (const item of input) if (typeof item === "string") {
+		if (item) {
+			spans.push({ text: item });
+			plainText += item;
+		}
+	} else if (item && typeof item === "object" && "text" in item) {
+		const s = item;
+		spans.push(s);
+		const piece = typeof s.text === "string" ? s.text : s.text && typeof s.text === "object" && "get" in s.text && typeof s.text.get === "function" ? String(s.text.get()) : String(s.text ?? "");
+		plainText += piece;
+	}
+	return {
+		text: plainText,
+		spans: spans.length > 0 ? spans : void 0
+	};
+}
+/**
+* Upfront parser for external CMS or subtitle strings containing basic tags
+* (<b>, <i>, <span>, <color>, <mark>, <accent>, <code>, <sup>, <sub>).
+*
+* Compiles string markup into clean TextSpan[] before entering the composition pipeline.
+*/
+function parseMarkup(markup) {
+	if (!markup || !markup.includes("<")) return [{ text: markup }];
+	const spans = [];
+	const tagRegex = /<(\/?[a-zA-Z0-9_-]+)([^>]*)>/g;
+	let lastIndex = 0;
+	const stack$1 = [];
+	const getCurrentStyle = () => {
+		const merged = {};
+		for (const state of stack$1) Object.assign(merged, state.style);
+		return merged;
+	};
+	for (;;) {
+		const match = tagRegex.exec(markup);
+		if (!match) break;
+		const textBefore = markup.slice(lastIndex, match.index);
+		if (textBefore) spans.push({
+			text: textBefore,
+			...getCurrentStyle()
+		});
+		lastIndex = match.index + match[0].length;
+		const tagName = match[1].toLowerCase();
+		const rawAttrs = match[2];
+		if (tagName.startsWith("/")) {
+			const closingTag = tagName.slice(1);
+			for (let i = stack$1.length - 1; i >= 0; i--) if (stack$1[i].tag === closingTag) {
+				stack$1.splice(i, 1);
+				break;
+			}
+		} else {
+			const attrs = {};
+			const attrRegex = /([a-zA-Z0-9_-]+)=["']([^"']*)["']/g;
+			for (;;) {
+				const attrMatch = attrRegex.exec(rawAttrs);
+				if (!attrMatch) break;
+				attrs[attrMatch[1].toLowerCase()] = attrMatch[2];
+			}
+			const style = {};
+			if (tagName === "b" || tagName === "strong") {
+				style.fontWeight = 700;
+				if (attrs.color || attrs.fill) style.fill = attrs.color ?? attrs.fill;
+			} else if (tagName === "i" || tagName === "em") {
+				style.fontStyle = "italic";
+				if (attrs.color || attrs.fill) style.fill = attrs.color ?? attrs.fill;
+			} else if (tagName === "accent") style.fill = "#6366f1";
+			else if (tagName === "color") style.fill = attrs.value ?? attrs.hex ?? attrs.fill;
+			else if (tagName === "size") {
+				const num = parseFloat(attrs.value ?? attrs.px ?? attrs.pt ?? "0");
+				if (num > 0) style.fontSize = num;
+			} else if (tagName === "mark") {
+				style.mark = {
+					background: attrs.bg ?? attrs.background ?? "#6366f133",
+					borderRadius: attrs.radius ? parseFloat(attrs.radius) : 4,
+					paddingX: attrs.paddingx ? parseFloat(attrs.paddingx) : 6,
+					paddingY: attrs.paddingy ? parseFloat(attrs.paddingy) : 2
+				};
+				if (attrs.color || attrs.fill) style.fill = attrs.color ?? attrs.fill;
+			} else if (tagName === "sup") style.baselineShift = -8;
+			else if (tagName === "sub") style.baselineShift = 6;
+			else if (tagName === "code") {
+				style.fontFamily = "JetBrains Mono";
+				style.mark = {
+					background: attrs.bg ?? "#ffffff18",
+					borderRadius: 4,
+					paddingX: 6,
+					paddingY: 2
+				};
+			} else if (tagName === "span") {
+				if (attrs.color || attrs.fill) style.fill = attrs.color ?? attrs.fill;
+				if (attrs.fontfamily) style.fontFamily = attrs.fontfamily;
+				if (attrs.fontsize) style.fontSize = parseFloat(attrs.fontsize);
+				if (attrs.fontweight) {
+					const nw = parseInt(attrs.fontweight, 10);
+					style.fontWeight = Number.isNaN(nw) ? attrs.fontweight : nw;
+				}
+				if (attrs.fontstyle === "italic" || attrs.fontstyle === "normal") style.fontStyle = attrs.fontstyle;
+				if (attrs.letterspacing) style.letterSpacing = parseFloat(attrs.letterspacing);
+				if (attrs.baselineshift) style.baselineShift = parseFloat(attrs.baselineshift);
+				if (attrs.opacity) style.opacity = parseFloat(attrs.opacity);
+			}
+			stack$1.push({
+				tag: tagName,
+				style
+			});
+		}
+	}
+	const remainingText = markup.slice(lastIndex);
+	if (remainingText) spans.push({
+		text: remainingText,
+		...getCurrentStyle()
+	});
+	return spans;
+}
+
+//#endregion
+//#region src/chart.ts
+/**
+* Charts built from ordinary layout nodes. d3 does the math (scales, ticks,
+* line/area/arc geometry, stacking); every bar, line, slice and label is a
+* regular box, shape or text node, so charts use the composition's fonts and
+* can be animated, graded and composited like any other layer.
+*/
+const DEFAULT_CHART_COLORS = [
+	"#6366f1",
+	"#22d3ee",
+	"#f59e0b",
+	"#ec4899",
+	"#10b981",
+	"#8b5cf6",
+	"#f97316",
+	"#3b82f6"
+];
+const isCandle = (d) => typeof d === "object" && d !== null && "open" in d && "close" in d;
+const isSlice = (d) => typeof d === "object" && d !== null && "label" in d && "value" in d;
+function curveOf(curve) {
+	if (curve === "linear") return curveLinear;
+	if (curve === "step") return curveStepAfter;
+	return curveMonotoneX;
+}
+function withAlpha(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];
+	if (h.length === 3) h = [...h].map((c) => c + c).join("");
+	const n = parseInt(h, 16);
+	return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+}
+function fmt(axis) {
+	if (!axis?.format) return null;
+	if (typeof axis.format === "function") return axis.format;
+	const f = format(axis.format);
+	return (v) => typeof v === "number" ? f(v) : String(v);
+}
+function round(v) {
+	return Math.round(v * 100) / 100;
+}
+function fadeIn(t, delay = 0, duration = t.duration) {
+	return LayerAnimation.create().fromTo("opacity", 0, 1, {
+		start: t.start + delay,
+		end: t.start + delay + Math.max(1, duration),
+		ease: "power2.out"
+	});
+}
+/** Builds the chart as a box of absolutely positioned child nodes. */
+function buildChart(options, props, defaultFontFamily) {
+	const id = props.id ?? autoId("chart");
+	const width = options.width ?? (typeof props.width === "number" ? props.width : 960);
+	const height = options.height ?? (typeof props.height === "number" ? props.height : 540);
+	const type = options.type ?? "line";
+	const fontSize = options.fontSize ?? 18;
+	const fontFamily = options.fontFamily ?? defaultFontFamily;
+	const textColor = options.textColor ?? "#94a3b8";
+	const strongText = options.textColor ?? "#e2e8f0";
+	const gridColor = options.gridColor ?? "rgba(148, 163, 184, 0.18)";
+	const colors = options.colors?.length ? options.colors : DEFAULT_CHART_COLORS;
+	const radius = options.cornerRadius ?? 4;
+	const anim = options.animate === false ? void 0 : options.animate ?? {};
+	const timing = {
+		enabled: anim !== void 0,
+		start: anim?.start ?? 0,
+		duration: anim?.duration ?? 30,
+		stagger: anim?.stagger ?? -1,
+		ease: anim?.ease ?? "power3.out"
+	};
+	const children = [];
+	const label = (text, rect, align, extra = {}, key = "") => {
+		const node = Layer.text(text, {
+			id: `${id}-label-${key || children.length}`,
+			position: "absolute",
+			x: round(rect.x),
+			y: round(rect.y),
+			width: round(rect.width),
+			height: round(rect.height),
+			fontFamily,
+			fontSize,
+			fontWeight: extra.weight ?? 500,
+			fill: extra.color ?? textColor,
+			align,
+			verticalAlign: "middle"
+		});
+		if (timing.enabled) node.animate(fadeIn(timing, extra.delay ?? 0));
+		children.push(node);
+	};
+	const lineHeight = Math.ceil(fontSize * 1.4);
+	if (type === "pie" || type === "donut") buildPie();
+	else buildCartesian();
+	for (const child of children) snapKeyframes(child);
+	return Layer.box({
+		background: options.background ?? "transparent",
+		...props,
+		id,
+		width,
+		height,
+		children
+	});
+	function buildPie() {
+		const slices = collectSlices();
+		const total = slices.reduce((s, d) => s + Math.max(0, d.value), 0);
+		const showLegend = options.legend ?? true;
+		const plot = plotRect(resolvePadding({
+			top: 16,
+			right: showLegend ? legendColumnWidth(slices.map((s) => s.label)) : 16,
+			bottom: 16,
+			left: 16
+		}));
+		const r = Math.max(1, Math.min(plot.width, plot.height) / 2);
+		const inner = r * (options.innerRadius ?? (type === "donut" ? .6 : 0));
+		const cx = plot.x + plot.width / 2;
+		const cy = plot.y + plot.height / 2;
+		const m = 4;
+		const arcs = pie().sort(null).value((d) => Math.max(0, d.value)).padAngle(slices.length > 1 ? .012 : 0)(slices);
+		const arcGen = arc().innerRadius(inner).outerRadius(r).cornerRadius(Math.min(radius, (r - inner) / 2));
+		const step = staggerStep(arcs.length);
+		arcs.forEach((a, i) => {
+			const d = arcGen(a);
+			if (!d) return;
+			const color$1 = slices[i].color ?? colors[i % colors.length];
+			const node = Layer.shape("path", {
+				id: `${id}-slice-${i}`,
+				position: "absolute",
+				x: round(cx - r - m),
+				y: round(cy - r - m),
+				width: round(2 * (r + m)),
+				height: round(2 * (r + m)),
+				d: translatePath(d, r + m, r + m),
+				fillColor: color$1,
+				anchorX: .5,
+				anchorY: .5
+			});
+			if (timing.enabled) {
+				const s = timing.start + i * step;
+				node.animate(LayerAnimation.create().fromTo("opacity", 0, 1, {
+					start: s,
+					end: s + timing.duration * .5
+				}).fromTo("scale", .85, 1, {
+					start: s,
+					end: s + timing.duration,
+					ease: timing.ease
+				}));
+			}
+			children.push(node);
+			if (options.valueLabels && total > 0 && a.value > 0) {
+				const [lx, ly] = arc().innerRadius(inner || r * .55).outerRadius(r).centroid(a);
+				label(`${Math.round(a.value / total * 100)}%`, {
+					x: cx + lx - 60,
+					y: cy + ly - lineHeight / 2,
+					width: 120,
+					height: lineHeight
+				}, "center", {
+					delay: i * step + timing.duration * .5,
+					color: "#ffffff",
+					weight: 700
+				}, `value-${i}`);
+			}
+		});
+		if (showLegend) legendColumn(slices.map((s, i) => ({
+			name: s.label,
+			color: s.color ?? colors[i % colors.length]
+		})), {
+			x: plot.x + plot.width + 24,
+			y: plot.y,
+			height: plot.height
+		});
+	}
+	function collectSlices() {
+		return (options.data ?? options.series?.[0]?.data ?? []).map((d, i) => {
+			if (isSlice(d)) return d;
+			const value = typeof d === "number" ? d : Array.isArray(d) ? Number(d[1]) : Number(d.y);
+			return {
+				label: options.categories?.[i] ?? (Array.isArray(d) ? String(d[0]) : typeof d === "object" && d ? String(d.x) : `${i + 1}`),
+				value
+			};
+		});
+	}
+	function buildCartesian() {
+		const series = options.series?.length ? [...options.series] : options.data ? [{ data: options.data }] : [];
+		if (series.length === 0) return;
+		const typeOf = (s) => s.type ?? type ?? "line";
+		const colorOf = (s, i) => s.color ?? colors[i % colors.length];
+		const points = series.map((s) => s.data.map((d, i) => {
+			if (isCandle(d)) return {
+				x: d.x,
+				y: d.close
+			};
+			if (typeof d === "number") return {
+				x: options.categories?.[i] ?? i,
+				y: d
+			};
+			if (Array.isArray(d)) return {
+				x: d[0],
+				y: Number(d[1])
+			};
+			return {
+				x: d.x,
+				y: Number(d.y)
+			};
+		}));
+		const anyBand = series.some((s) => typeOf(s) === "bar" || typeOf(s) === "candlestick");
+		const allX = points.flat().map((p) => p.x);
+		const xKind = anyBand || allX.some((x$1) => typeof x$1 === "string") ? "band" : allX.some((x$1) => x$1 instanceof Date) ? "time" : "linear";
+		const stackable = (s) => typeOf(s) === "bar" || typeOf(s) === "area";
+		const stacked = !!options.stacked;
+		const categories = xKind === "band" ? [...new Set(allX.map(String))] : [];
+		const stackRanges = /* @__PURE__ */ new Map();
+		if (stacked) {
+			const keys = series.map((_, i) => i).filter((i) => stackable(series[i]));
+			const rows = categories.length ? categories : [...new Set(allX.map((x$1) => +x$1))].sort((a, b) => a - b).map(String);
+			const table = rows.map((key) => {
+				const row = {};
+				for (const i of keys) row[i] = points[i].find((pt) => String(xKind === "band" ? pt.x : +pt.x) === key)?.y ?? 0;
+				return row;
+			});
+			stack().keys(keys.map(String)).offset(stackOffsetDiverging)(table).forEach((layer) => {
+				const i = Number(layer.key);
+				stackRanges.set(i, points[i].map((p) => {
+					const idx = rows.indexOf(String(xKind === "band" ? p.x : +p.x));
+					return [layer[idx][0], layer[idx][1]];
+				}));
+			});
+		}
+		const yValues = [0];
+		series.forEach((s, i) => {
+			const range = stackRanges.get(i);
+			if (typeOf(s) === "candlestick") for (const c of s.data) yValues.push(c.high, c.low);
+			else if (range) for (const [a, b] of range) yValues.push(a, b);
+			else for (const p of points[i]) yValues.push(p.y);
+		});
+		if (series.every((s) => typeOf(s) === "candlestick" || typeOf(s) === "scatter" || typeOf(s) === "line")) yValues.shift();
+		const yAxis = options.yAxis ?? {};
+		const xAxis = options.xAxis ?? {};
+		const yTickCount = yAxis.ticks ?? 5;
+		let lo = yAxis.min ?? Math.min(...yValues);
+		let hi = yAxis.max ?? Math.max(...yValues);
+		if (!Number.isFinite(lo) || !Number.isFinite(hi)) [lo, hi] = [0, 1];
+		if (lo === hi) [lo, hi] = [lo - 1, hi + 1];
+		const y = scaleLinear().domain([lo, hi]);
+		if (yAxis.min === void 0 || yAxis.max === void 0) y.nice(yTickCount);
+		const yFormat = fmt(yAxis) ?? ((v) => y.tickFormat(yTickCount)(v));
+		const yTicks = y.ticks(yTickCount);
+		const legendItems = series.map((s, i) => ({
+			name: s.name ?? `Series ${i + 1}`,
+			color: colorOf(s, i)
+		}));
+		const showLegend = options.legend ?? series.length > 1;
+		const showY = yAxis.show !== false;
+		const showX = xAxis.show !== false;
+		const yLabelWidth = showY ? Math.max(...yTicks.map((t) => yFormat(t).length)) * fontSize * .7 + 20 : 0;
+		const plot = plotRect(resolvePadding({
+			top: (showLegend ? lineHeight + 20 : 0) + Math.ceil(lineHeight / 2),
+			right: 20,
+			bottom: showX ? lineHeight + 14 : 12,
+			left: Math.max(16, Math.ceil(yLabelWidth))
+		}));
+		const labelRoom = lineHeight + 6;
+		const barValues = options.valueLabels ? series.flatMap((s, i) => typeOf(s) === "bar" ? points[i].map((p) => p.y) : []) : [];
+		const topInset = barValues.some((v) => v > 0) ? labelRoom : 0;
+		const bottomInset = barValues.some((v) => v < 0) ? labelRoom : 0;
+		y.range([plot.height - bottomInset, topInset]);
+		let x;
+		if (xKind === "band") x = scaleBand().domain(categories).range([0, plot.width]).paddingInner(anyBand ? .28 : 0).paddingOuter(anyBand ? .14 : .5);
+		else if (xKind === "time") {
+			const xs = allX.map((v) => +new Date(v));
+			x = scaleUtc().domain([Math.min(...xs), Math.max(...xs)]).range([0, plot.width]);
+		} else {
+			const xs = allX.map(Number);
+			x = scaleLinear().domain([xAxis.min ?? Math.min(...xs), xAxis.max ?? Math.max(...xs)]).range([0, plot.width]);
+		}
+		const xPos = (v) => {
+			if (xKind === "band") {
+				const b = x;
+				return (b(String(v)) ?? 0) + b.bandwidth() / 2;
+			}
+			if (xKind === "time") return x(new Date(v));
+			return x(Number(v));
+		};
+		const gridDelay = 0;
+		if (yAxis.grid !== false) yTicks.forEach((t, i) => {
+			const node = Layer.box({
+				id: `${id}-ygrid-${i}`,
+				position: "absolute",
+				x: plot.x,
+				y: round(plot.y + y(t) - .5),
+				width: plot.width,
+				height: 1,
+				background: gridColor
+			});
+			if (timing.enabled) node.animate(fadeIn(timing, gridDelay, timing.duration / 2));
+			children.push(node);
+		});
+		if (showY) yTicks.forEach((t, i) => {
+			label(yFormat(t), {
+				x: 0,
+				y: plot.y + y(t) - lineHeight / 2,
+				width: plot.x - 12,
+				height: lineHeight
+			}, "end", {}, `y-${i}`);
+		});
+		const xTicks = [];
+		const xFormat = fmt(xAxis);
+		if (xKind === "band") {
+			const b = x;
+			const every = Math.max(1, Math.ceil(categories.length / Math.max(1, Math.floor(plot.width / (fontSize * 4)))));
+			categories.forEach((c, i) => {
+				if (i % every === 0) xTicks.push({
+					pos: (b(c) ?? 0) + b.bandwidth() / 2,
+					text: xFormat ? xFormat(c) : c
+				});
+			});
+		} else {
+			const s = x;
+			const count = xAxis.ticks ?? Math.max(2, Math.floor(plot.width / (fontSize * 6)));
+			const tf = s.tickFormat(count);
+			for (const t of s.ticks(count)) xTicks.push({
+				pos: s(t),
+				text: xFormat ? xFormat(xKind === "time" ? new Date(t) : t) : tf(t)
+			});
+		}
+		if (xAxis.grid) xTicks.forEach((t, i) => {
+			const node = Layer.box({
+				id: `${id}-xgrid-${i}`,
+				position: "absolute",
+				x: round(plot.x + t.pos - .5),
+				y: plot.y,
+				width: 1,
+				height: plot.height,
+				background: gridColor
+			});
+			if (timing.enabled) node.animate(fadeIn(timing, gridDelay, timing.duration / 2));
+			children.push(node);
+		});
+		if (showX) {
+			const slot = Math.max(fontSize * 3, plot.width / Math.max(1, xTicks.length));
+			xTicks.forEach((t, i) => {
+				label(t.text, {
+					x: plot.x + t.pos - slot / 2,
+					y: plot.y + plot.height + 10,
+					width: slot,
+					height: lineHeight
+				}, "center", {}, `x-${i}`);
+			});
+		}
+		const [y0, y1] = y.domain();
+		if (y0 <= 0 && y1 >= 0 && anyBand) {
+			const node = Layer.box({
+				id: `${id}-zero`,
+				position: "absolute",
+				x: plot.x,
+				y: round(plot.y + y(0) - 1),
+				width: plot.width,
+				height: 2,
+				background: withAlpha("#94a3b8", .45)
+			});
+			if (timing.enabled) node.animate(fadeIn(timing, 0, timing.duration / 2));
+			children.push(node);
+		}
+		const barSeries = series.map((_, i) => i).filter((i) => typeOf(series[i]) === "bar");
+		const order = [
+			...barSeries,
+			...series.map((_, i) => i).filter((i) => typeOf(series[i]) === "candlestick"),
+			...series.map((_, i) => i).filter((i) => typeOf(series[i]) === "area"),
+			...series.map((_, i) => i).filter((i) => typeOf(series[i]) === "line"),
+			...series.map((_, i) => i).filter((i) => typeOf(series[i]) === "scatter")
+		];
+		const band = xKind === "band" ? x : null;
+		const bandStep = band ? staggerStep(categories.length) : 0;
+		const categoryIndex = (v) => band ? categories.indexOf(String(v)) : 0;
+		order.forEach((si, rank) => {
+			const s = series[si];
+			const color$1 = colorOf(s, si);
+			const kind = typeOf(s);
+			const pts = points[si];
+			const range = stackRanges.get(si);
+			if (kind === "bar" && band) {
+				const groupSize = stacked ? 1 : barSeries.length;
+				const groupIdx = stacked ? 0 : barSeries.indexOf(si);
+				const bw = band.bandwidth() / groupSize;
+				const gap = groupSize > 1 ? Math.min(4, bw * .12) : 0;
+				pts.forEach((p, i) => {
+					const [lo$1, hi$1] = range ? range[i] : [0, p.y];
+					const top = plot.y + y(Math.max(lo$1, hi$1));
+					const bottom = plot.y + y(Math.min(lo$1, hi$1));
+					const h = Math.max(0, bottom - top);
+					const bx = plot.x + (band(String(p.x)) ?? 0) + groupIdx * bw + gap / 2;
+					const grows = p.y >= 0 ? "up" : "down";
+					const node = Layer.box({
+						id: `${id}-bar-${si}-${i}`,
+						position: "absolute",
+						x: round(bx),
+						y: round(top),
+						width: round(Math.max(1, bw - gap)),
+						height: round(h),
+						background: color$1,
+						borderRadius: Math.min(radius, (bw - gap) / 2, h / 2)
+					});
+					const delay = categoryIndex(p.x) * bandStep + (stacked ? barSeries.indexOf(si) * timing.duration * .6 : 0);
+					if (timing.enabled) {
+						const st = timing.start + delay;
+						const end = st + timing.duration;
+						const a = LayerAnimation.create().fromTo("height", 0, round(h), {
+							start: st,
+							end,
+							ease: timing.ease
+						});
+						if (grows === "up") a.fromTo("y", round(top + h), round(top), {
+							start: st,
+							end,
+							ease: timing.ease
+						});
+						node.animate(a);
+					}
+					children.push(node);
+					if (options.valueLabels) {
+						const text = yFormat(p.y);
+						const ly = grows === "up" ? top - lineHeight - 4 : top + h + 4;
+						label(text, {
+							x: bx - 30,
+							y: ly,
+							width: bw - gap + 60,
+							height: lineHeight
+						}, "center", {
+							delay: delay + timing.duration * .6,
+							color: strongText,
+							weight: 600
+						}, `value-${si}-${i}`);
+					}
+				});
+				return;
+			}
+			if (kind === "candlestick" && band) {
+				const up = options.upColor ?? "#22c55e";
+				const down = options.downColor ?? "#ef4444";
+				const bw = band.bandwidth();
+				s.data.forEach((c, i) => {
+					const col = c.close >= c.open ? up : down;
+					const cxp = plot.x + (band(String(c.x)) ?? 0) + bw / 2;
+					const delay = categoryIndex(c.x) * bandStep;
+					const parts = [["wick", {
+						x: cxp - Math.max(1, bw * .06),
+						y: plot.y + y(c.high),
+						width: Math.max(2, bw * .12),
+						height: Math.max(1, y(c.low) - y(c.high))
+					}], ["body", {
+						x: cxp - bw / 2,
+						y: plot.y + y(Math.max(c.open, c.close)),
+						width: bw,
+						height: Math.max(2, Math.abs(y(c.open) - y(c.close)))
+					}]];
+					for (const [part, r] of parts) {
+						const node = Layer.box({
+							id: `${id}-candle-${si}-${i}-${part}`,
+							position: "absolute",
+							x: round(r.x),
+							y: round(r.y),
+							width: round(r.width),
+							height: round(r.height),
+							background: col,
+							borderRadius: part === "body" ? Math.min(radius / 2, r.width / 2) : 0
+						});
+						if (timing.enabled) {
+							const st = timing.start + delay;
+							const mid = r.y + r.height / 2;
+							node.animate(LayerAnimation.create().fromTo("height", 0, round(r.height), {
+								start: st,
+								end: st + timing.duration,
+								ease: timing.ease
+							}).fromTo("y", round(mid), round(r.y), {
+								start: st,
+								end: st + timing.duration,
+								ease: timing.ease
+							}));
+						}
+						children.push(node);
+					}
+				});
+				return;
+			}
+			if (kind === "line" || kind === "area") {
+				const sw = s.strokeWidth ?? 3;
+				const m = Math.ceil(sw * 2 + (s.pointRadius ?? 0) + 2);
+				const xy = pts.map((p, i) => ({
+					x: xPos(p.x) + m,
+					top: (range ? y(range[i][1]) : y(p.y)) + m,
+					base: (range ? y(range[i][0]) : y(Math.max(y.domain()[0], Math.min(0, y.domain()[1])))) + m
+				}));
+				const curve = curveOf(s.curve);
+				const frame = {
+					x: plot.x - m,
+					y: plot.y - m,
+					width: plot.width + 2 * m,
+					height: plot.height + 2 * m
+				};
+				const delay = rank * (timing.duration / 3);
+				if (kind === "area") {
+					const d$1 = area().x((p) => p.x).y0((p) => p.base).y1((p) => p.top).curve(curve)(xy);
+					if (d$1) {
+						const node = Layer.shape("path", {
+							id: `${id}-area-${si}`,
+							position: "absolute",
+							...roundRect(frame),
+							d: roundPath(d$1),
+							fillType: "linear",
+							fillColor: withAlpha(color$1, .45),
+							gradientEndColor: withAlpha(color$1, .02),
+							gradientAngle: 90
+						});
+						if (timing.enabled) node.animate(fadeIn(timing, delay + timing.duration * .4, timing.duration));
+						children.push(node);
+					}
+				}
+				const d = line().x((p) => p.x).y((p) => p.top).curve(curve)(xy);
+				if (d && sw > 0) {
+					const node = Layer.shape("path", {
+						id: `${id}-line-${si}`,
+						position: "absolute",
+						...roundRect(frame),
+						d: roundPath(d),
+						fillType: "none",
+						strokeColor: color$1,
+						strokeWidth: sw,
+						strokeLineCap: "round",
+						strokeLineJoin: "round"
+					});
+					if (timing.enabled) node.animate(LayerAnimation.create().fromTo("trimEnd", 0, 1, {
+						start: timing.start + delay,
+						end: timing.start + delay + timing.duration * 1.5,
+						ease: "power2.inOut"
+					}));
+					children.push(node);
+				}
+				if ((s.pointRadius ?? 0) > 0) dots(si, pts, color$1, s.pointRadius ?? 0, delay + timing.duration * .5, range);
+				return;
+			}
+			if (kind === "scatter") dots(si, pts, color$1, s.pointRadius ?? 6, rank * (timing.duration / 3), range);
+		});
+		if (showLegend) legendRow(legendItems);
+		function dots(si, pts, color$1, r, baseDelay, range) {
+			const step = staggerStep(pts.length);
+			pts.forEach((p, i) => {
+				const py = range ? y(range[i][1]) : y(p.y);
+				const node = Layer.shape("circle", {
+					id: `${id}-point-${si}-${i}`,
+					position: "absolute",
+					x: round(plot.x + xPos(p.x) - r),
+					y: round(plot.y + py - r),
+					width: round(r * 2),
+					height: round(r * 2),
+					fillColor: color$1,
+					anchorX: .5,
+					anchorY: .5
+				});
+				if (timing.enabled) {
+					const st = timing.start + baseDelay + i * step;
+					node.animate(LayerAnimation.create().fromTo("scale", 0, 1, {
+						start: st,
+						end: st + timing.duration * .6,
+						ease: "back.out(2)"
+					}).fromTo("opacity", 0, 1, {
+						start: st,
+						end: st + 6
+					}));
+				}
+				children.push(node);
+			});
+		}
+	}
+	function staggerStep(count) {
+		if (!timing.enabled || count <= 1) return 0;
+		if (timing.stagger >= 0) return timing.stagger;
+		return Math.min(4, timing.duration / count);
+	}
+	function resolvePadding(auto) {
+		const p = options.padding;
+		if (typeof p === "number") return {
+			top: p,
+			right: p,
+			bottom: p,
+			left: p
+		};
+		return {
+			top: p?.top ?? auto.top,
+			right: p?.right ?? auto.right,
+			bottom: p?.bottom ?? auto.bottom,
+			left: p?.left ?? auto.left
+		};
+	}
+	function plotRect(p) {
+		return {
+			x: p.left,
+			y: p.top,
+			width: Math.max(1, width - p.left - p.right),
+			height: Math.max(1, height - p.top - p.bottom)
+		};
+	}
+	function legendColumnWidth(names) {
+		const longest = Math.max(0, ...names.map((n) => n.length));
+		return Math.min(width * .4, longest * fontSize * .6 + fontSize + 48);
+	}
+	function legendColumn(items, at) {
+		const rowH = lineHeight + 8;
+		const top = at.y + Math.max(0, (at.height - items.length * rowH) / 2);
+		items.forEach((item, i) => {
+			legendItem(item, at.x, top + i * rowH, i);
+		});
+	}
+	function legendRow(items) {
+		const widths = items.map((it) => it.name.length * fontSize * .6 + fontSize + 28);
+		const total = widths.reduce((a, b) => a + b, 0);
+		let cursor = Math.max(0, width - total - 20);
+		items.forEach((item, i) => {
+			legendItem(item, cursor, 4, i);
+			cursor += widths[i];
+		});
+	}
+	function legendItem(item, lx, ly, i) {
+		const sw = Math.round(fontSize * .7);
+		const swatch = Layer.box({
+			id: `${id}-legend-swatch-${i}`,
+			position: "absolute",
+			x: round(lx),
+			y: round(ly + (lineHeight - sw) / 2),
+			width: sw,
+			height: sw,
+			borderRadius: Math.round(sw / 4),
+			background: item.color
+		});
+		if (timing.enabled) swatch.animate(fadeIn(timing, 0, timing.duration / 2));
+		children.push(swatch);
+		label(item.name, {
+			x: lx + sw + 8,
+			y: ly,
+			width: item.name.length * fontSize * .6 + 12,
+			height: lineHeight
+		}, "start", { color: options.textColor ?? "#cbd5e1" }, `legend-${i}`);
+	}
+}
+function snapKeyframes(node) {
+	for (const track of node.animation?.tracks ?? []) for (const kf of track.keyframes ?? []) kf.frame = Math.round(kf.frame);
+	for (const child of node.children ?? []) snapKeyframes(child);
+}
+function roundRect(r) {
+	return {
+		x: round(r.x),
+		y: round(r.y),
+		width: round(r.width),
+		height: round(r.height)
+	};
+}
+/** Shortens the long float literals d3 emits. */
+function roundPath(d) {
+	return d.replace(/-?\d*\.\d{3,}(?:e-?\d+)?/gi, (n) => String(round(Number(n))));
+}
+/** Offsets an absolute SVG path (as produced by d3-arc) by dx, dy. */
+function translatePath(d, dx, dy) {
+	const out = [];
+	for (const [, cmd, args] of d.matchAll(/([MLAZ])([^MLAZ]*)/gi)) {
+		const nums = (args.match(/-?\d*\.?\d+(?:e-?\d+)?/gi) ?? []).map(Number);
+		if (cmd.toUpperCase() === "A") for (let i = 0; i + 6 < nums.length; i += 7) {
+			nums[i + 5] += dx;
+			nums[i + 6] += dy;
+		}
+		else if (cmd.toUpperCase() !== "Z") for (let i = 0; i + 1 < nums.length; i += 2) {
+			nums[i] += dx;
+			nums[i + 1] += dy;
+		}
+		out.push(cmd + nums.map(round).join(","));
+	}
+	return out.join("");
+}
+
+//#endregion
+//#region src/shapes3d.ts
+/**
+* Attaches the faces/items handles as non-enumerable properties, like
+* `animate`, so they stay out of `toSpec()` and schema validation.
+*/
+function withParts(node, parts) {
+	const list = parts.faces ?? parts.items ?? [];
+	for (const [key, value] of Object.entries(parts)) Object.defineProperty(node, key, {
+		value,
+		enumerable: false,
+		configurable: true
+	});
+	Object.defineProperty(node, Symbol.iterator, {
+		value: function* () {
+			yield* list;
+		},
+		enumerable: false,
+		configurable: true
+	});
+	return node;
+}
+/** Largest initial scale of an extruded text node along its outline's axes. */
+function extrudedTextScale(options) {
+	const scale = options.scale ?? 1;
+	const s = Math.max(Math.abs(scale * (options.scaleX ?? 1)), Math.abs(scale * (options.scaleY ?? 1)));
+	return s > 0 ? s : 1;
+}
+const Layer3D = {
+	cube(options) {
+		const size$1 = options.size;
+		const [w, h, d] = typeof size$1 === "number" ? [
+			size$1,
+			size$1,
+			size$1
+		] : size$1;
+		const twoSided = options.twoSided ?? true;
+		const defaultColors = {
+			front: "#3b82f6",
+			back: "#1d4ed8",
+			left: "#2563eb",
+			right: "#1e40af",
+			top: "#60a5fa",
+			bottom: "#172554"
+		};
+		const buildFace = (faceId, input, defaultColor, faceW, faceH, faceProps) => {
+			if (input && typeof input === "object" && "kind" in input) {
+				const node = input;
+				node.position = "absolute";
+				node.is3D = true;
+				node.twoSided = twoSided;
+				node.material = node.material ?? options.material ?? "lit";
+				node.shininess = node.shininess ?? options.shininess ?? 32;
+				node.specularIntensity = node.specularIntensity ?? options.specularIntensity ?? .5;
+				if (options.roughness !== void 0 && node.roughness === void 0) node.roughness = options.roughness;
+				if (options.metallic !== void 0 && node.metallic === void 0) node.metallic = options.metallic;
+				if (options.ambientIntensity !== void 0 && node.ambientIntensity === void 0) node.ambientIntensity = options.ambientIntensity;
+				Object.assign(node, faceProps);
+				return node;
+			}
+			const cfg = typeof input === "string" ? { background: input } : input ?? { background: defaultColor };
+			return Layer.box({
+				id: `${options.id ?? "cube"}-${faceId}`,
+				position: "absolute",
+				width: faceW,
+				height: faceH,
+				is3D: true,
+				twoSided,
+				material: cfg.material ?? options.material ?? "lit",
+				shininess: cfg.shininess ?? options.shininess ?? 32,
+				specularIntensity: cfg.specularIntensity ?? options.specularIntensity ?? .5,
+				roughness: cfg.roughness ?? options.roughness,
+				metallic: cfg.metallic ?? options.metallic,
+				ambientIntensity: cfg.ambientIntensity ?? options.ambientIntensity ?? 1,
+				background: cfg.background ?? defaultColor,
+				borderRadius: cfg.borderRadius ?? 0,
+				borderWidth: cfg.borderWidth,
+				borderColor: cfg.borderColor,
+				opacity: cfg.opacity ?? 1,
+				children: cfg.children ?? [],
+				...faceProps
+			});
+		};
+		const halfW = w / 2;
+		const halfH = h / 2;
+		const halfD = d / 2;
+		const faces = [
+			buildFace("front", options.faces?.front, defaultColors.front, w, h, {
+				x: 0,
+				y: 0,
+				z: -halfD,
+				rotateX: 0,
+				rotateY: 0,
+				rotateZ: 0
+			}),
+			buildFace("back", options.faces?.back, defaultColors.back, w, h, {
+				x: 0,
+				y: 0,
+				z: halfD,
+				rotateX: 0,
+				rotateY: 180,
+				rotateZ: 0
+			}),
+			buildFace("left", options.faces?.left, defaultColors.left, d, h, {
+				x: -halfW,
+				y: 0,
+				z: 0,
+				rotateX: 0,
+				rotateY: 90,
+				rotateZ: 0
+			}),
+			buildFace("right", options.faces?.right, defaultColors.right, d, h, {
+				x: halfW,
+				y: 0,
+				z: 0,
+				rotateX: 0,
+				rotateY: -90,
+				rotateZ: 0
+			}),
+			buildFace("top", options.faces?.top, defaultColors.top, w, d, {
+				x: 0,
+				y: -halfH,
+				z: 0,
+				rotateX: -90,
+				rotateY: 0,
+				rotateZ: 0
+			}),
+			buildFace("bottom", options.faces?.bottom, defaultColors.bottom, w, d, {
+				x: 0,
+				y: halfH,
+				z: 0,
+				rotateX: 90,
+				rotateY: 0,
+				rotateZ: 0
+			})
+		];
+		return withParts(Layer.box({
+			id: options.id ?? autoId("cube"),
+			position: "absolute",
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			width: w,
+			height: h,
+			is3D: true,
+			transformStyle: "preserve-3d",
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			opacity: options.opacity ?? 1,
+			background: "transparent",
+			children: faces
+		}), { faces });
+	},
+	carousel(options) {
+		const { items, radius, faceInward = false, twoSided = true } = options;
+		const n = items.length;
+		const angleStep = n > 0 ? 360 / n : 0;
+		const transformedItems = items.map((item, idx) => {
+			const angleDeg = idx * angleStep;
+			const rad = angleDeg * Math.PI / 180;
+			const x = radius * Math.sin(rad);
+			const z = -radius * Math.cos(rad);
+			const ry = faceInward ? 180 - angleDeg : -angleDeg;
+			const node = item;
+			node.position = "absolute";
+			node.is3D = true;
+			node.twoSided = twoSided;
+			node.x = x;
+			node.y = 0;
+			node.z = z;
+			node.rotateY = ry;
+			return node;
+		});
+		return withParts(Layer.box({
+			id: options.id ?? autoId("carousel"),
+			position: "absolute",
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			width: options.itemWidth ?? 200,
+			height: options.itemHeight ?? 200,
+			is3D: true,
+			transformStyle: "preserve-3d",
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			opacity: options.opacity ?? 1,
+			background: "transparent",
+			children: transformedItems
+		}), { items: transformedItems });
+	},
+	prism(options) {
+		const { sides, radius, height, twoSided = true } = options;
+		const n = Math.max(3, sides);
+		const sideWidth = 2 * radius * Math.tan(Math.PI / n);
+		const angleStep = 360 / n;
+		const panels = [];
+		for (let i = 0; i < n; i++) {
+			const angleDeg = i * angleStep;
+			const rad = angleDeg * Math.PI / 180;
+			const x = radius * Math.sin(rad);
+			const z = radius * Math.cos(rad);
+			const cfg = options.sideConfigs?.[i];
+			const color$1 = typeof cfg === "string" ? cfg : cfg?.background ?? `hsl(${i * 360 / n}, 70%, 50%)`;
+			panels.push(Layer.box({
+				id: `${options.id ?? "prism"}-panel-${i}`,
+				position: "absolute",
+				width: sideWidth,
+				height,
+				is3D: true,
+				twoSided,
+				x,
+				y: 0,
+				z,
+				rotateY: angleDeg,
+				background: color$1
+			}));
+		}
+		return withParts(Layer.box({
+			id: options.id ?? autoId("prism"),
+			position: "absolute",
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			width: sideWidth,
+			height,
+			is3D: true,
+			transformStyle: "preserve-3d",
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			opacity: options.opacity ?? 1,
+			background: "transparent",
+			children: panels
+		}), { faces: panels });
+	},
+	plane(options) {
+		return Layer.box({
+			id: options.id ?? autoId("plane"),
+			position: "absolute",
+			width: options.width,
+			height: options.height,
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			is3D: true,
+			twoSided: options.twoSided ?? true,
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			background: options.background ?? "#3b82f6",
+			borderRadius: options.borderRadius ?? 0,
+			opacity: options.opacity ?? 1,
+			children: options.children ?? []
+		});
+	},
+	grid(options) {
+		const { width, height } = options;
+		const id = options.id ?? autoId("grid");
+		const divisions = Math.max(1, Math.round(options.divisions ?? 10));
+		const lineWidth = options.lineWidth ?? 2;
+		const color$1 = options.color ?? "rgba(59, 130, 246, 0.5)";
+		const line$1 = (lineId, x, y, w, h) => Layer.box({
+			id: `${id}-${lineId}`,
+			position: "absolute",
+			x,
+			y,
+			z: 0,
+			width: w,
+			height: h,
+			is3D: true,
+			twoSided: true,
+			material: "unlit",
+			background: color$1
+		});
+		const MAX_SEGMENT = 4096;
+		const lines = [];
+		const vSegments = Math.ceil(height / MAX_SEGMENT);
+		const hSegments = Math.ceil(width / MAX_SEGMENT);
+		for (let i = 0; i <= divisions; i++) {
+			const u = i / divisions - .5;
+			for (let k = 0; k < vSegments; k++) {
+				const len = height / vSegments;
+				const y = -height / 2 + len * (k + .5);
+				lines.push(line$1(`v${i}-${k}`, u * width, y, lineWidth, len));
+			}
+			for (let k = 0; k < hSegments; k++) {
+				const len = width / hSegments;
+				const x = -width / 2 + len * (k + .5);
+				lines.push(line$1(`h${i}-${k}`, x, u * height, len, lineWidth));
+			}
+		}
+		return Layer.box({
+			id,
+			position: "absolute",
+			width,
+			height,
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			is3D: true,
+			transformStyle: "preserve-3d",
+			rotateX: options.rotateX ?? 90,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			background: "transparent",
+			opacity: options.opacity ?? 1,
+			children: lines
+		});
+	},
+	text(options) {
+		if (options.extrusionDepth && options.extrusionDepth > 0) return Layer3D.extrudedText({
+			...options,
+			depth: options.extrusionDepth
+		});
+		return Layer.text(options.text, {
+			id: options.id ?? autoId("text3d"),
+			position: "absolute",
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			is3D: true,
+			twoSided: options.twoSided ?? true,
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			fontSize: options.fontSize ?? 48,
+			fontFamily: options.fontFamily,
+			fontWeight: options.fontWeight ?? "bold",
+			fontStyle: options.fontStyle,
+			fill: options.fill ?? "#ffffff",
+			align: options.align ?? "center",
+			verticalAlign: options.verticalAlign ?? "middle",
+			letterSpacing: options.letterSpacing,
+			lineHeight: options.lineHeight,
+			material: options.material ?? "lit",
+			shininess: options.shininess ?? 64,
+			roughness: options.roughness,
+			specularIntensity: options.specularIntensity ?? .8,
+			ambientIntensity: options.ambientIntensity ?? 1,
+			metallic: options.metallic,
+			opacity: options.opacity ?? 1,
+			background: options.background,
+			borderRadius: options.borderRadius,
+			padding: options.padding,
+			stroke: options.stroke,
+			strokeWidth: options.strokeWidth
+		});
+	},
+	extrudedText(options) {
+		const { depth, text, fill = "#ffffff", bevelColor } = options;
+		let modelData;
+		const curveTolerance = (options.curveTolerance ?? .1) / extrudedTextScale(options);
+		const parsedFont = (options.fontFamily ? SlugFontCache.getParsed(options.fontFamily) : null) ?? SlugFontCache.getParsed("Inter") ?? SlugFontCache.getParsed("Unbounded") ?? SlugFontCache.getFirstParsed();
+		if (parsedFont) modelData = generateExtrudedTextGeometry({
+			text,
+			font: parsedFont,
+			fontSize: options.fontSize ?? 48,
+			depth,
+			fill,
+			bevelColor,
+			curveSegments: options.curveSegments,
+			curveTolerance,
+			align: options.align,
+			verticalAlign: options.verticalAlign,
+			letterSpacing: options.letterSpacing,
+			material: options.material === "lit" || options.material === "unlit" || options.material === "toon" ? options.material : void 0,
+			shininess: options.shininess,
+			roughness: options.roughness,
+			metallic: options.metallic
+		}).modelData;
+		const modelNode = Layer.model({
+			id: options.id ?? autoId("extruded-text"),
+			modelData,
+			is3D: true,
+			x: options.x ?? 0,
+			y: options.y ?? 0,
+			z: options.z ?? 0,
+			rotateX: options.rotateX ?? 0,
+			rotateY: options.rotateY ?? 0,
+			rotateZ: options.rotateZ ?? 0,
+			scale: options.scale ?? 1,
+			scaleX: options.scaleX ?? 1,
+			scaleY: options.scaleY ?? 1,
+			scaleZ: options.scaleZ ?? 1,
+			opacity: options.opacity ?? 1,
+			material: options.material,
+			shininess: options.shininess ?? 32,
+			roughness: options.roughness,
+			specularIntensity: options.specularIntensity ?? .8,
+			ambientIntensity: options.ambientIntensity ?? 1,
+			metallic: options.metallic,
+			twoSided: options.twoSided ?? true,
+			text3dOptions: {
+				...options,
+				curveTolerance
+			}
+		});
+		return withParts(modelNode, {
+			faces: [modelNode],
+			items: [modelNode]
+		});
+	},
+	model(options = {}) {
+		return Layer.model(options);
+	},
+	obj(src, options = {}) {
+		return Layer.obj(src, options);
+	},
+	fbx(src, options = {}) {
+		return Layer.fbx(src, options);
+	},
+	gltf(src, options = {}) {
+		return Layer.gltf(src, options);
+	},
+	glb(src, options = {}) {
+		return Layer.glb(src, options);
+	},
+	stl(src, options = {}) {
+		return Layer.stl(src, options);
+	},
+	ply(src, options = {}) {
+		return Layer.ply(src, options);
+	},
+	vox(src, options = {}) {
+		return Layer.vox(src, options);
+	},
+	threeDS(src, options = {}) {
+		return Layer.threeDS(src, options);
+	},
+	off(src, options = {}) {
+		return Layer.off(src, options);
+	}
+};
+
+//#endregion
+//#region src/index.ts
+function decorateTrackSignals(track, source) {
+	if (!track) return track;
+	if (source && !track.source) Object.defineProperty(track, "source", {
+		value: source,
+		enumerable: true,
+		writable: true,
+		configurable: true
+	});
+	if (typeof track.section !== "function") Object.defineProperty(track, "section", {
+		value: (sourceOrOptions, options) => {
+			if (typeof sourceOrOptions === "object" && sourceOrOptions !== null && !("kind" in sourceOrOptions) && !("inputHandleId" in sourceOrOptions) && !("src" in sourceOrOptions)) {
+				const resolvedSource$1 = sourceOrOptions.source ?? track.source ?? source;
+				return Layer.section(resolvedSource$1, track, sourceOrOptions);
+			}
+			const resolvedSource = sourceOrOptions ?? track.source ?? source;
+			return Layer.section(resolvedSource, track, options);
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	if (typeof track.blurEffect !== "function") Object.defineProperty(track, "blurEffect", {
+		value: (options) => new Blur({
+			track,
+			...options
+		}),
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	if (typeof track.isolate !== "function") Object.defineProperty(track, "isolate", {
+		value: (sourceArg, options) => Layer.section(sourceArg, track, options),
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	return track;
+}
+const origVisionAttach = VisionNode.attach;
+VisionNode.attach = function(source, config, bundleOptions) {
+	const bundle = origVisionAttach.call(this, source, config, bundleOptions);
+	if (bundle?.objects) {
+		const src = source;
+		const origGet = bundle.objects.get.bind(bundle.objects);
+		bundle.objects.get = (id) => decorateTrackSignals(origGet(id), src);
+		const origByCategory = bundle.objects.byCategory.bind(bundle.objects);
+		bundle.objects.byCategory = (cat, rank) => decorateTrackSignals(origByCategory(cat, rank), src);
+		if (bundle.objects.primary) decorateTrackSignals(bundle.objects.primary, src);
+	}
+	return bundle;
+};
+/**
+* Fluent builder for single clips and chained visual/audio effect pipelines.
+*/
+var Media = class Media {
+	virtualMedia;
+	constructor(source, type = "Video") {
+		this.virtualMedia = createVirtualMedia(source, type);
+	}
+	static video(source, meta) {
+		const m = new Media(source, "Video");
+		if (meta) Object.assign(m.virtualMedia.metadata, meta);
+		return m;
+	}
+	static image(source, meta) {
+		const m = new Media(source, "Image");
+		if (meta) Object.assign(m.virtualMedia.metadata, meta);
+		return m;
+	}
+	static audio(source, meta) {
+		const m = new Media(source, "Audio");
+		if (meta) Object.assign(m.virtualMedia.metadata, meta);
+		return m;
+	}
+	apply(effectOrOp, config = {}) {
+		let opPayload;
+		if (effectOrOp instanceof Effect || typeof effectOrOp === "object" && effectOrOp !== null && "op" in effectOrOp) opPayload = effectOrOp.toOperation();
+		else opPayload = {
+			op: effectOrOp,
+			...config
+		};
+		return new Media(appendOperation(this.virtualMedia, {
+			...opPayload,
+			dataType: this.virtualMedia.operation.dataType
+		}));
+	}
+	/**
+	* Returns the underlying VirtualMediaData AST node ready for rendering.
+	*/
+	toVirtualMedia() {
+		return this.virtualMedia;
+	}
+	/**
+	* Renders a single frame from this media pipeline to a PNG Buffer.
+	* Can render either by timestamp in milliseconds (`atMs`) or by frame index (`frame`).
+	*/
+	async renderFrame(options = {}) {
+		return (options.renderer ?? new HeadlessMediaRenderer()).renderFrame(this.virtualMedia, options);
+	}
+	get fps() {
+		return this.virtualMedia.metadata?.fps ?? void 0;
+	}
+	get durationMs() {
+		return this.virtualMedia.metadata?.durationMs ?? void 0;
+	}
+	get width() {
+		return this.virtualMedia.metadata?.width ?? void 0;
+	}
+	get height() {
+		return this.virtualMedia.metadata?.height ?? void 0;
+	}
+	/**
+	* Renders an image grid of sequential frames across a given frame or millisecond range.
+	* Ideal for automated visual inspection of animation motion, easing curves, and layout stability.
+	*/
+	async renderFrameGrid(options = {}) {
+		return renderFrameGrid(this, options);
+	}
+	/**
+	* Renders this media pipeline into an MP4/WebM video file with audio.
+	*/
+	async renderVideo(outputPathOrOptions = {}, options = {}) {
+		const opts = typeof outputPathOrOptions === "string" ? {
+			...options,
+			outputPath: outputPathOrOptions
+		} : outputPathOrOptions;
+		return deliverToOutputPath(await (opts.renderer ?? new HeadlessMediaRenderer()).renderVideo(this.virtualMedia, opts), opts.outputPath);
+	}
+};
+/**
+* Copies a rendered temp file to `outputPath` and drops the temp, so the
+* returned `filePath` is where the video actually lives.
+*/
+async function deliverToOutputPath(result, outputPath) {
+	if (!outputPath) return result;
+	const target = path.resolve(outputPath);
+	await fs.mkdir(path.dirname(target), { recursive: true });
+	await fs.copyFile(result.filePath, target);
+	await result.cleanup();
+	return {
+		...result,
+		filePath: target,
+		cleanup: async () => {}
+	};
+}
+/**
+* High-level programmatic builder for multi-layer Framefields compositions.
+*/
+var Composition = class Composition {
+	width;
+	height;
+	fps;
+	durationMs;
+	backgroundColor;
+	antialias3d;
+	fonts;
+	children = [];
+	audioTracks = [];
+	signals = {};
+	_frameHooks = [];
+	_visionConfig;
+	_visionBundle;
+	_effects = [];
+	/**
+	* Applies a whole-composition post-processing effect or vision pipeline.
+	*/
+	apply(effect) {
+		if (effect instanceof Vision) {
+			this.withVision(effect);
+			return this;
+		}
+		this._effects.push(effect);
+		return this;
+	}
+	/**
+	* Runs vision on the whole composition — the rendered frame (composition, blur, crop,
+	* anything upstream) is the inference input. Models are LAZY: nothing downloads until
+	* the first frame actually runs a task.
+	* Returns the reactive VisionBundle (objects / masks / pose / classes signals).
+	*/
+	withVision(config = {}) {
+		this._visionBundle ??= new VisionBundle({
+			width: this.width,
+			height: this.height,
+			fps: this.fps
+		});
+		this._visionConfig = {
+			...config instanceof Vision ? config.config : config,
+			visionBundle: this._visionBundle
+		};
+		return this._visionBundle;
+	}
+	/**
+	* One-shot, ffmpeg-free vision analysis of a media source.
+	*
+	* Decodes frames through the same mediabunny pipeline the renderer uses, runs the requested
+	* tasks lazily (only those models download), temporally tracks detections, and returns a
+	* zod-serializable report. The decoder is released and the runner closed on completion.
+	*/
+	async analyzeVisionSequence(source, options = {}) {
+		const fps = options.fps ?? this.fps;
+		const durationMs = this.durationMs ?? await this.computeDuration();
+		const totalFrames = options.totalFrames ?? Math.max(1, Math.round(durationMs / 1e3 * fps));
+		const runner = VisionRunner.create({
+			modelsDir: options.modelsDir,
+			baseUrl: options.baseUrl,
+			...options.confidence !== void 0 ? { confidence: options.confidence } : {},
+			...options.variant !== void 0 ? { variant: options.variant } : {}
+		});
+		const decoder = mediaDecoderCache.getVideo(source, true);
+		async function* frameSource() {
+			for (let i = 0; i < totalFrames; i++) {
+				const frame = await decoder.getFrame(i / fps);
+				if (frame?.buffer && frame.width > 0 && frame.height > 0) yield {
+					data: frame.buffer,
+					width: frame.width,
+					height: frame.height
+				};
+			}
+		}
+		try {
+			return await analyzeSequence(frameSource(), {
+				runner,
+				source,
+				fps,
+				...options.tasks !== void 0 ? { tasks: options.tasks } : {},
+				...options.categories !== void 0 ? { categories: options.categories } : {},
+				...options.pathStride !== void 0 ? { pathStride: options.pathStride } : {},
+				...options.includeMasks !== void 0 ? { includeMasks: options.includeMasks } : {},
+				...options.iouThreshold !== void 0 ? { iouThreshold: options.iouThreshold } : {}
+			});
+		} finally {
+			runner.close();
+			decoder.destroy();
+		}
+	}
+	/**
+	* Game-engine per-frame lifecycle hook for the composition.
+	* Invoked before rendering each frame so scripts or agents can mutate properties and signals.
+	*/
+	onRequestFrame(callback) {
+		this._frameHooks.push(callback);
+		return this;
+	}
+	notifyFrame(ctx) {
+		for (const hook of this._frameHooks) hook(ctx);
+	}
+	constructor(options) {
+		this.width = options.width;
+		this.height = options.height;
+		this.fps = options.fps ?? 60;
+		this.durationMs = options.durationMs ?? (options.durationFrames !== void 0 ? options.durationFrames / this.fps * 1e3 : void 0);
+		this.backgroundColor = options.backgroundColor ?? "#000000";
+		this.antialias3d = options.antialias3d;
+		this.fonts = options.fonts ?? [];
+		this.signals = options.signals ?? {};
+	}
+	static create(options) {
+		return new Composition(options);
+	}
+	addSignal(name, signal$1) {
+		this.signals[name] = signal$1;
+		return this;
+	}
+	add(layerOrFirst, ...rest) {
+		if (layerOrFirst instanceof TensorPipeline) this.children.push(layerOrFirst.toNode());
+		else if (layerOrFirst instanceof VisionNode) this.children.push(layerOrFirst.toNode());
+		else if (layerOrFirst && typeof layerOrFirst === "object" && "node" in layerOrFirst) {
+			this.add(layerOrFirst.node, ...rest);
+			return this;
+		} else if (Array.isArray(layerOrFirst)) for (const l of layerOrFirst) this.add(l);
+		else {
+			const targetNode = layerOrFirst;
+			const animCandidate = rest[0];
+			if (animCandidate && !(animCandidate instanceof TensorPipeline) && !Array.isArray(animCandidate) && (animCandidate instanceof LayerAnimation || "tracks" in animCandidate)) {
+				targetNode.animation = animCandidate instanceof LayerAnimation ? animCandidate.toSpec() : animCandidate;
+				this.children.push(targetNode);
+				return this;
+			}
+			this.children.push(targetNode);
+		}
+		for (const item of rest) if (item && !(item instanceof LayerAnimation) && !("tracks" in item)) this.add(item);
+		return this;
+	}
+	addAudio(track) {
+		this.audioTracks.push(track);
+		return this;
+	}
+	/**
+	* Turnkey "Text Behind Subject" ("Sandwich") Primitive.
+	* Lowers into:
+	* 1. Bottom Layer: Full background video plate
+	* 2. Middle Layer: User-supplied `behind` nodes
+	* 3. Top Layer: Subject cutout video with continuous matte alpha registered at identical coordinates
+	*/
+	addSubjectSandwich(options) {
+		const src = typeof options.source === "string" ? options.source : options.source.inputHandleId ?? "";
+		const fit = options.fit ?? "cover";
+		const feather = options.feather ?? 4;
+		const featherVal = feather > 1 ? feather / 100 : feather;
+		const variant = options.variant ?? "s";
+		const bottomPlate = Layer.video(src, {
+			width: this.width,
+			height: this.height,
+			position: "absolute",
+			x: 0,
+			y: 0,
+			fit,
+			muted: options.muted ?? false,
+			volume: options.muted ? 0 : options.volume ?? 1
+		});
+		this.add(bottomPlate);
+		for (const node of options.behind) this.add(node);
+		const topPlate = Layer.video(src, {
+			width: this.width,
+			height: this.height,
+			position: "absolute",
+			x: 0,
+			y: 0,
+			fit,
+			muted: true,
+			volume: 0
+		}).withVision({
+			mode: "matte",
+			enableSegmentation: true,
+			variant,
+			confidence: options.confidence ?? .25,
+			featherRadius: featherVal,
+			keyBackground: options.keyBackground ?? true,
+			backgroundKeyThreshold: options.backgroundKeyThreshold
+		});
+		this.add(topPlate);
+		return this;
+	}
+	/**
+	* Dynamic Smart Re-Framing (16:9 → 9:16 Auto-Crop).
+	* Automatically transforms landscape footage into vertical shorts/reels by framing the
+	* tracked subject with smooth camera physics and lead headroom.
+	*/
+	addSmartFraming(options) {
+		const src = typeof options.source === "string" ? options.source : options.source.inputHandleId ?? "";
+		const damping = Math.max(0, Math.min(.99, options.damping ?? .8));
+		const headroom = options.leadHeadroom ?? .18;
+		const compW = this.width;
+		const compH = this.height;
+		const sourceAspect = options.sourceAspect ?? 16 / 9;
+		const compAspect = compW / compH;
+		const plateWidth = compAspect < sourceAspect ? Math.round(compH * sourceAspect) : compW;
+		const plateHeight = compAspect < sourceAspect ? compH : Math.round(compW / sourceAspect);
+		const minOffsetX = compW - plateWidth;
+		const minOffsetY = compH - plateHeight;
+		const targetObj = options.target;
+		const rawOffsetX = new ProgrammaticSignal((ctx) => {
+			if (minOffsetX >= 0) return 0;
+			const normX = targetObj.center?.x ? targetObj.center.x.get(ctx) : targetObj.bounds?.centerX ? targetObj.bounds.centerX.get(ctx) / compW : targetObj.center?.screenX ? targetObj.center.screenX.get(ctx) / compW : .5;
+			const targetPx = Math.max(0, Math.min(1, normX)) * plateWidth;
+			const desired = compW / 2 - targetPx;
+			return Math.max(minOffsetX, Math.min(0, desired));
+		}, {
+			fps: this.fps,
+			label: "smart_framing_pan_x"
+		});
+		const rawOffsetY = new ProgrammaticSignal((ctx) => {
+			if (minOffsetY >= 0) return 0;
+			const normY = targetObj.center?.y ? targetObj.center.y.get(ctx) : targetObj.bounds?.centerY ? targetObj.bounds.centerY.get(ctx) / compH : targetObj.center?.screenY ? targetObj.center.screenY.get(ctx) / compH : .5;
+			const targetPy = Math.max(0, Math.min(1, normY)) * plateHeight;
+			const desired = compH * headroom - targetPy;
+			return Math.max(minOffsetY, Math.min(0, desired));
+		}, {
+			fps: this.fps,
+			label: "smart_framing_pan_y"
+		});
+		const smoothOffsetX = new ProgrammaticSignal((ctx) => {
+			const targetFrame = ctx.frame;
+			if (targetFrame <= 0) return rawOffsetX.get(ctx);
+			let filtered = rawOffsetX.get({
+				...ctx,
+				frame: 0,
+				time: 0
+			});
+			const alpha = 1 - damping;
+			for (let f = 1; f <= targetFrame; f++) {
+				const val = rawOffsetX.get({
+					...ctx,
+					frame: f,
+					time: f / ctx.fps
+				});
+				filtered = filtered + alpha * (val - filtered);
+			}
+			return filtered;
+		}, {
+			fps: this.fps,
+			label: "smart_framing_smooth_x"
+		});
+		const smoothOffsetY = new ProgrammaticSignal((ctx) => {
+			const targetFrame = ctx.frame;
+			if (targetFrame <= 0) return rawOffsetY.get(ctx);
+			let filtered = rawOffsetY.get({
+				...ctx,
+				frame: 0,
+				time: 0
+			});
+			const alpha = 1 - damping;
+			for (let f = 1; f <= targetFrame; f++) {
+				const val = rawOffsetY.get({
+					...ctx,
+					frame: f,
+					time: f / ctx.fps
+				});
+				filtered = filtered + alpha * (val - filtered);
+			}
+			return filtered;
+		}, {
+			fps: this.fps,
+			label: "smart_framing_smooth_y"
+		});
+		const container = Layer.box({
+			width: compW,
+			height: compH,
+			overflow: "hidden",
+			position: "relative"
+		});
+		const videoPlate = Layer.video(src, {
+			width: plateWidth,
+			height: plateHeight,
+			position: "absolute",
+			x: smoothOffsetX,
+			y: smoothOffsetY,
+			fit: options.fit ?? "cover",
+			muted: options.muted ?? false,
+			volume: options.muted ? 0 : options.volume ?? 1
+		});
+		(container.children ??= []).push(videoPlate);
+		this.add(container);
+		return this;
+	}
+	/**
+	* Subject Contour Glow & Neon Outline.
+	* Strokes the silhouette boundary with a stylized bloom/glow and optional audio-reactive pulse.
+	*/
+	addSubjectOutline(_subject, options = {}) {
+		const blur = options.blur ?? 12;
+		const compW = this.width;
+		const compH = this.height;
+		const pulse = options.pulseSignal;
+		const baseOpacity = pulse ? new ProgrammaticSignal((ctx) => Math.max(0, Math.min(1, Number(pulse.get(ctx)) || 0)), {
+			fps: this.fps,
+			label: "outline_pulse"
+		}) : 1;
+		const src = typeof options.source === "string" ? options.source : options.source?.inputHandleId ?? "";
+		const outlineLayer = Layer.box({
+			width: compW,
+			height: compH,
+			position: "absolute",
+			x: 0,
+			y: 0,
+			opacity: baseOpacity
+		});
+		if (src) {
+			const maskVideo = Layer.video(src, {
+				width: compW,
+				height: compH,
+				position: "absolute",
+				x: 0,
+				y: 0,
+				fit: "cover",
+				muted: true,
+				volume: 0
+			}).withVision({
+				mode: "mask",
+				enableSegmentation: true
+			});
+			(outlineLayer.children ??= []).push(maskVideo);
+		}
+		outlineLayer.apply(new Blur({
+			strength: blur,
+			blurType: "Gaussian"
+		}));
+		this.add(outlineLayer);
+		return this;
+	}
+	/**
+	* Creates an isolated, styled section of the composition or underlying source plate.
+	* Any WebGPU effects (Blur, FilmGrain, Curves, Vignette, etc.) can be applied to this section.
+	*/
+	section(sourceOrTargetOrOptions, targetOrOptions, options) {
+		let source;
+		let target;
+		let opts = {};
+		const isFirstTrack = sourceOrTargetOrOptions !== null && typeof sourceOrTargetOrOptions === "object" && "bounds" in sourceOrTargetOrOptions;
+		const isFirstMedia = typeof sourceOrTargetOrOptions === "string" || sourceOrTargetOrOptions !== null && typeof sourceOrTargetOrOptions === "object" && ("kind" in sourceOrTargetOrOptions || "src" in sourceOrTargetOrOptions || "inputHandleId" in sourceOrTargetOrOptions);
+		if (isFirstMedia && targetOrOptions && typeof targetOrOptions === "object" && "bounds" in targetOrOptions) {
+			source = sourceOrTargetOrOptions;
+			target = targetOrOptions;
+			opts = options ?? {};
+		} else if (isFirstMedia && targetOrOptions) {
+			source = sourceOrTargetOrOptions;
+			opts = targetOrOptions;
+		} else if (isFirstTrack) {
+			target = sourceOrTargetOrOptions;
+			opts = targetOrOptions ?? {};
+			source = opts.source ?? target.source;
+		} else if (sourceOrTargetOrOptions && typeof sourceOrTargetOrOptions === "object") {
+			opts = sourceOrTargetOrOptions;
+			source = opts.source;
+		}
+		if (!source) {
+			const mediaChild = this.children.find((c) => c.kind === "media" && (c.dataType === "Video" || c.dataType === "Image"));
+			if (mediaChild) source = mediaChild;
+		}
+		return Layer.section(source ?? "", target ?? opts, {
+			compositionWidth: this.width,
+			compositionHeight: this.height,
+			...opts
+		});
+	}
+	/**
+	* Creates a section and immediately adds it to the composition layout tree.
+	*/
+	addSection(sourceOrTargetOrOptions, targetOrOptions, options) {
+		const node = this.section(sourceOrTargetOrOptions, targetOrOptions, options);
+		this.add(node);
+		return node;
+	}
+	/**
+	* Dynamically calculates composition duration from the longest media or animation layer.
+	*/
+	async computeDuration() {
+		if (this.durationMs !== void 0) return this.durationMs;
+		let maxDurationMs = 0;
+		const mediaSources = [];
+		for (const node of [...this.children, ...this.audioTracks]) {
+			if (node.kind === "media") {
+				const src = node.inputHandleId;
+				if (typeof src === "string" && (node.dataType === "Video" || node.dataType === "Audio")) mediaSources.push(src);
+			}
+			if (typeof node.durationFrames === "number") {
+				const durMs = ((typeof node.startFrame === "number" ? node.startFrame : 0) + node.durationFrames) / this.fps * 1e3;
+				if (durMs > maxDurationMs) maxDurationMs = durMs;
+			}
+		}
+		for (const src of mediaSources) try {
+			const sec = await (await inputStore.acquire(src)).computeDuration();
+			if (Number.isFinite(sec) && sec > 0) {
+				const ms = Math.round(sec * 1e3);
+				if (ms > maxDurationMs) maxDurationMs = ms;
+			}
+		} catch (_) {}
+		return maxDurationMs > 0 ? maxDurationMs : 5e3;
+	}
+	async registerFont(optionsOrFamilyOrSource, source) {
+		const reg = await FontManager.register(optionsOrFamilyOrSource, source);
+		if (reg.filePath && !this.fonts.includes(reg.filePath)) this.fonts.push(reg.filePath);
+		return this;
+	}
+	toSpec() {
+		const layoutItems = [...this.children, ...this.audioTracks];
+		const registeredPaths = FontManager.getRegisteredFontPaths();
+		const mergedFonts = Array.from(new Set([...this.fonts, ...registeredPaths]));
+		return {
+			width: this.width,
+			height: this.height,
+			fps: this.fps,
+			mode: "Video",
+			backgroundColor: this.backgroundColor,
+			...this.antialias3d !== void 0 && { antialias3d: this.antialias3d },
+			layout: layoutItems,
+			fonts: mergedFonts,
+			signals: this.signals,
+			...this._effects.length > 0 && { effects: this._effects },
+			...this._visionConfig && { vision: this._visionConfig },
+			...this._frameHooks.length > 0 && { onRequestFrame: (ctx) => this.notifyFrame(ctx) }
+		};
+	}
+	/**
+	* Compiles the composition into a VirtualMediaData AST ready for WebGPU rendering.
+	*/
+	toVirtualMedia(options = {}) {
+		return compositorToProgram(this.toSpec(), {
+			isVideoMode: true,
+			fps: this.fps,
+			durationMs: options.durationMs ?? this.durationMs,
+			signals: options.signals ?? this.signals,
+			...this._effects.length > 0 && { effects: this._effects },
+			...this._visionConfig && { vision: this._visionConfig },
+			...options
+		});
+	}
+	/**
+	* Compiles the composition into a VirtualMediaData AST with dynamically resolved duration.
+	*/
+	async toVirtualMediaAsync(options = {}) {
+		const durationMs = options.durationMs ?? this.durationMs ?? await this.computeDuration();
+		this.durationMs = durationMs;
+		return compositorToProgram(this.toSpec(), {
+			isVideoMode: true,
+			fps: this.fps,
+			durationMs,
+			signals: options.signals ?? this.signals,
+			...this._effects.length > 0 && { effects: this._effects },
+			...this._visionConfig && { vision: this._visionConfig },
+			...options
+		});
+	}
+	/**
+	* Renders a single frame from the composition to a PNG Buffer.
+	* Can render either by timestamp in milliseconds (`atMs`) or by frame index (`frame`).
+	*/
+	async renderFrame(options = {}) {
+		if (this._frameHooks.length > 0) {
+			const targetFrame = options.frame ?? (options.atMs !== void 0 ? Math.round(options.atMs / 1e3 * this.fps) : 0);
+			this.notifyFrame({
+				frame: targetFrame,
+				fps: this.fps,
+				time: this.fps > 0 ? targetFrame / this.fps : 0,
+				duration: (this.durationMs ?? 0) / 1e3,
+				durationMs: this.durationMs ?? 0,
+				progress: this.durationMs && this.durationMs > 0 ? Math.max(0, Math.min(1, targetFrame / this.fps * 1e3 / this.durationMs)) : 0,
+				deltaTime: this.fps > 0 ? 1 / this.fps : 0
+			});
+		}
+		return (options.renderer ?? new HeadlessMediaRenderer()).renderFrame(this.toVirtualMedia(), {
+			fps: this.fps,
+			...options
+		});
+	}
+	/**
+	* Renders an image grid of sequential frames across a given frame or millisecond range.
+	* Ideal for automated visual inspection of animation motion, easing curves, and layout stability.
+	*/
+	async renderFrameGrid(options = {}) {
+		return renderFrameGrid(this, options);
+	}
+	/**
+	* Renders this composition into an MP4/WebM video file with audio.
+	*/
+	async renderVideo(outputPathOrOptions = {}, options = {}) {
+		const opts = typeof outputPathOrOptions === "string" ? {
+			...options,
+			outputPath: outputPathOrOptions
+		} : outputPathOrOptions;
+		return deliverToOutputPath(await (opts.renderer ?? new HeadlessMediaRenderer()).renderVideo(this.toVirtualMedia(), opts), opts.outputPath);
+	}
+};
+function withAnimation(node) {
+	const target = node;
+	Object.defineProperty(target, "animate", {
+		value: (...anims) => {
+			const flatAnims = anims.flat();
+			if (flatAnims.length > 1 || flatAnims.length === 1 && Array.isArray(anims[0])) target.animation = { tracks: flatAnims.flatMap((a) => a instanceof LayerAnimation ? a.tracks : a.tracks ?? []) };
+			else if (flatAnims.length === 1) {
+				const anim = flatAnims[0];
+				target.animation = anim instanceof LayerAnimation ? anim.toSpec() : anim;
+			}
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "pinToLandmark", {
+		value: (landmarkTarget, options) => {
+			pinNodeToLandmark(target, landmarkTarget, options);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "pinToObject", {
+		value: (objectTarget, options) => {
+			pinNodeToObject(target, objectTarget, options);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withMask", {
+		value: (mask) => {
+			target.mask = mask;
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withPbrGlass", {
+		value: (options) => {
+			target.glass = options ?? {};
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "deformWithAudio", {
+		value: (config) => {
+			target.audioDeform = config ?? {};
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withCrop", {
+		value: (cropConfig) => {
+			target.crop = cropConfig instanceof Crop ? cropConfig : new Crop(cropConfig);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withVision", {
+		value: (config) => {
+			target.vision = config instanceof Vision ? config : new Vision(config);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withRelighting", {
+		value: (options) => {
+			target.relighting = options ?? {};
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "relight", {
+		value: (options) => {
+			target.relighting = options ?? {};
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withDeflicker", {
+		value: (options) => {
+			target.deflicker = options ?? {};
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "apply", {
+		value: (effect) => {
+			if (!target.effects) target.effects = [];
+			target.effects.push(effect);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withEffect", {
+		value: (effect) => {
+			if (!target.effects) target.effects = [];
+			target.effects.push(effect);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withEffects", {
+		value: (effects) => {
+			if (!target.effects) target.effects = [];
+			target.effects.push(...effects);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "section", {
+		value: (targetOrOptions = {}, options) => {
+			if (targetOrOptions !== null && typeof targetOrOptions === "object" && "bounds" in targetOrOptions) return Layer.section(target, targetOrOptions, options);
+			return Layer.section(target, targetOrOptions);
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "blurRegion", {
+		value: (trackTarget, options) => {
+			const blur = new Blur({
+				track: trackTarget,
+				strength: options?.strength ?? 25,
+				shape: options?.shape ?? "ellipse",
+				...options
+			});
+			if (!target.effects) target.effects = [];
+			target.effects.push(blur);
+			return target;
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	Object.defineProperty(target, "withBlurRegion", {
+		value: (trackTarget, options) => {
+			return target.blurRegion(trackTarget, options);
+		},
+		enumerable: false,
+		writable: true,
+		configurable: true
+	});
+	return target;
+}
+const Layer = {
+	video: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("video"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: "Video",
+		fit: options.fit ?? "cover",
+		...options
+	}),
+	image: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("img"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: "Image",
+		fit: options.fit ?? "cover",
+		...options
+	}),
+	svg: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("svg"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: "SVG",
+		fit: options.fit ?? "contain",
+		...options
+	}),
+	lottie: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("lottie"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: "Lottie",
+		fit: options.fit ?? "contain",
+		...options
+	}),
+	audio: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("audio"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: "Audio",
+		volume: options.volume ?? 1,
+		...options
+	}),
+	text: (contentOrOptions, maybeOptions = {}) => {
+		const isArray = Array.isArray(contentOrOptions);
+		const isObj = !isArray && typeof contentOrOptions === "object" && contentOrOptions !== null;
+		const options = isObj ? contentOrOptions : maybeOptions;
+		let textContent = "";
+		let spans = options.spans;
+		if (isArray) {
+			const normalized = normalizeTextSpans(contentOrOptions);
+			textContent = normalized.text;
+			spans = normalized.spans;
+		} else if (isObj) if (options.spans && !options.text) textContent = normalizeTextSpans(options.spans).text;
+		else textContent = options.text ?? "";
+		else textContent = typeof contentOrOptions === "string" ? contentOrOptions : String(contentOrOptions ?? "");
+		return withAnimation({
+			id: options.id ?? autoId("text"),
+			kind: "text",
+			fontFamily: options.fontFamily ?? FontManager.getAll()[0]?.family ?? "Inter",
+			fontSize: options.fontSize ?? 48,
+			fill: options.fill ?? "#ffffff",
+			...options,
+			text: options.text ?? textContent,
+			spans: options.spans ?? spans
+		});
+	},
+	caption: (src, options = {}) => withAnimation({
+		id: options.id ?? autoId("caption"),
+		kind: "media",
+		inputHandleId: src,
+		dataType: options.dataType ?? "Caption",
+		fontFamily: options.fontFamily ?? FontManager.getAll()[0]?.family ?? "Inter",
+		fontSize: options.fontSize ?? 48,
+		fill: options.fill ?? "#ffffff",
+		...options
+	}),
+	shape: (shapeType = "rect", options = {}) => withAnimation({
+		id: options.id ?? autoId("shape"),
+		kind: "shape",
+		shapeType: options.shapeType ?? shapeType,
+		fillColor: options.fillColor ?? "#3b82f6",
+		...options
+	}),
+	flex: (options = {}) => withAnimation({
+		id: options.id ?? autoId("flex"),
+		kind: "flex",
+		dir: options.dir ?? "column",
+		children: options.children ?? [],
+		...options
+	}),
+	box: (options = {}) => withAnimation({
+		id: options.id ?? autoId("box"),
+		kind: "box",
+		background: options.background ?? "transparent",
+		children: options.children ?? [],
+		...options
+	}),
+	section: (source, targetOrOptions = {}, options = {}) => {
+		let realSource = source;
+		if (source && typeof source === "object" && "toSpec" in source && "children" in source) {
+			const compMedia = (source.children || []).find((c) => c.kind === "media" && (c.dataType === "Video" || c.dataType === "Image"));
+			if (compMedia) realSource = compMedia;
+		}
+		const isTracked = targetOrOptions !== null && typeof targetOrOptions === "object" && "bounds" in targetOrOptions;
+		const opts = isTracked ? options : targetOrOptions;
+		const target = isTracked ? targetOrOptions : void 0;
+		const padding = opts.padding ?? 0;
+		const src = typeof realSource === "string" ? realSource : realSource?.inputHandleId ?? realSource?.src ?? "";
+		const dataType = typeof realSource === "object" && realSource?.dataType ? realSource.dataType : "Video";
+		const compW = opts.compositionWidth ?? opts.compWidth ?? (isTracked ? opts.width : void 0) ?? 1920;
+		const compH = opts.compositionHeight ?? opts.compHeight ?? (isTracked ? opts.height : void 0) ?? 1080;
+		const effList = Array.isArray(opts.effects) ? [...opts.effects] : opts.effects ? [opts.effects] : [];
+		const innerX = target ? target.bounds.screenX.multiply(-1).add(padding) : typeof opts.x === "number" ? -opts.x : opts.x && typeof opts.x.multiply === "function" ? opts.x.multiply(-1) : 0;
+		const innerY = target ? target.bounds.screenY.multiply(-1).add(padding) : typeof opts.y === "number" ? -opts.y : opts.y && typeof opts.y.multiply === "function" ? opts.y.multiply(-1) : 0;
+		const innerMedia = (dataType === "Image" ? Layer.image(src, {
+			position: "absolute",
+			width: compW,
+			height: compH,
+			fit: opts.fit ?? "cover",
+			x: innerX,
+			y: innerY
+		}) : Layer.video(src, {
+			position: "absolute",
+			width: compW,
+			height: compH,
+			fit: opts.fit ?? "cover",
+			x: innerX,
+			y: innerY
+		})).withEffects(effList);
+		const boxWidth = target ? target.bounds.screenWidth.add(padding * 2) : opts.width !== void 0 ? opts.width : compW;
+		const boxHeight = target ? target.bounds.screenHeight.add(padding * 2) : opts.height !== void 0 ? opts.height : compH;
+		const boxChildren = [innerMedia, ...opts.children ?? []];
+		const boxId = opts.id ?? (target ? autoId(`section-track-${target.trackId}`) : autoId("section"));
+		let box = Layer.box({
+			id: boxId,
+			position: opts.position ?? "absolute",
+			width: boxWidth,
+			height: boxHeight,
+			x: target ? void 0 : opts.x,
+			y: target ? void 0 : opts.y,
+			borderRadius: opts.borderRadius ?? 0,
+			borderColor: opts.borderColor,
+			borderWidth: opts.borderWidth,
+			opacity: opts.opacity ?? 1,
+			overflow: "hidden",
+			children: boxChildren
+		});
+		if (target) box = box.pinToObject(target, {
+			anchor: "topLeft",
+			offsetX: -padding,
+			offsetY: -padding,
+			hideWhenLost: opts.hideWhenLost ?? true,
+			smoothFrames: opts.smoothFrames
+		});
+		const sectionNode = box;
+		Object.defineProperty(sectionNode, "innerMedia", {
+			value: innerMedia,
+			enumerable: true,
+			writable: false
+		});
+		Object.defineProperty(sectionNode, "effects", {
+			get: () => effList,
+			enumerable: true
+		});
+		Object.defineProperty(sectionNode, "addEffect", {
+			value: (effect) => {
+				effList.push(effect);
+				innerMedia.effects = effList;
+				return sectionNode;
+			},
+			enumerable: true,
+			writable: false
+		});
+		Object.defineProperty(sectionNode, "withEffect", {
+			value: (effect) => sectionNode.addEffect(effect),
+			enumerable: true,
+			writable: false
+		});
+		Object.defineProperty(sectionNode, "withEffects", {
+			value: (effects) => {
+				for (const eff of effects) sectionNode.addEffect(eff);
+				return sectionNode;
+			},
+			enumerable: true,
+			writable: false
+		});
+		return sectionNode;
+	},
+	trackedRegion: (source, target, options = {}) => {
+		return Layer.section(source, target, options);
+	},
+	blurTrackedRegion: (source, target, options = {}) => {
+		const { padding, borderRadius, borderColor, borderWidth, ...blurOptions } = options;
+		return Layer.section(source, target, {
+			padding: padding ?? 8,
+			borderRadius: borderRadius ?? 12,
+			borderColor,
+			borderWidth,
+			effects: [new Blur({
+				strength: blurOptions.strength ?? 25,
+				blurType: blurOptions.blurType ?? "Gaussian",
+				...blurOptions
+			})]
+		});
+	},
+	chart: (options, props = {}) => buildChart(options, props, FontManager.getAll()[0]?.family ?? "Inter"),
+	camera: (options = {}) => withAnimation({
+		id: options.id ?? autoId("camera"),
+		kind: "camera",
+		mode: options.mode ?? "lookAt",
+		pitch: options.pitch ?? 0,
+		yaw: options.yaw ?? 0,
+		roll: options.roll ?? 0,
+		...options
+	}),
+	light: (options = {}) => withAnimation({
+		id: options.id ?? autoId("light"),
+		kind: "light",
+		lightType: options.lightType ?? "point",
+		color: options.color ?? "#ffffff",
+		intensity: options.intensity ?? 1,
+		...options
+	}),
+	ambientLight: (color$1 = "#ffffff", intensity = .5, options = {}) => Light.ambient(color$1, intensity, options),
+	directionalLight: (options = {}) => Light.directional(options),
+	pointLight: (options = {}) => Light.point(options),
+	spotLight: (options = {}) => Light.spot(options),
+	cube: (options) => Layer3D.cube(options),
+	carousel3d: (options) => Layer3D.carousel(options),
+	plane3d: (options) => Layer3D.plane(options),
+	prism3d: (options) => Layer3D.prism(options),
+	model: (options = {}) => withAnimation({
+		id: options.id ?? autoId("model3d"),
+		kind: "model3d",
+		is3D: options.is3D ?? true,
+		modelFormat: options.modelFormat ?? "auto",
+		loop: options.loop ?? true,
+		scale: options.scale ?? 1,
+		scaleX: options.scaleX ?? 1,
+		scaleY: options.scaleY ?? 1,
+		scaleZ: options.scaleZ ?? 1,
+		opacity: options.opacity ?? 1,
+		...options
+	}),
+	obj: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "obj",
+		...options
+	}),
+	fbx: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "fbx",
+		...options
+	}),
+	gltf: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "gltf",
+		...options
+	}),
+	glb: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "glb",
+		...options
+	}),
+	stl: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "stl",
+		...options
+	}),
+	ply: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "ply",
+		...options
+	}),
+	vox: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "vox",
+		...options
+	}),
+	threeDS: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "3ds",
+		...options
+	}),
+	off: (src, options = {}) => Layer.model({
+		src,
+		modelFormat: "off",
+		...options
+	})
+};
+const Light = {
+	ambient: (color$1 = "#ffffff", intensity = .5, options = {}) => withAnimation({
+		id: options.id ?? autoId("light-ambient"),
+		kind: "light",
+		lightType: "ambient",
+		color: color$1,
+		intensity,
+		...options
+	}),
+	directional: (options = {}) => withAnimation({
+		id: options.id ?? autoId("light-directional"),
+		kind: "light",
+		lightType: "directional",
+		color: options.color ?? "#ffffff",
+		intensity: options.intensity ?? 1,
+		x: options.x ?? 0,
+		y: options.y ?? -1e3,
+		z: options.z ?? -1e3,
+		targetX: options.targetX ?? 0,
+		targetY: options.targetY ?? 0,
+		targetZ: options.targetZ ?? 0,
+		...options
+	}),
+	point: (options = {}) => withAnimation({
+		id: options.id ?? autoId("light-point"),
+		kind: "light",
+		lightType: "point",
+		color: options.color ?? "#ffffff",
+		intensity: options.intensity ?? 1,
+		x: options.x ?? 0,
+		y: options.y ?? 0,
+		z: options.z ?? -500,
+		radius: options.radius ?? 1e3,
+		decay: options.decay ?? 1,
+		...options
+	}),
+	spot: (options = {}) => withAnimation({
+		id: options.id ?? autoId("light-spot"),
+		kind: "light",
+		lightType: "spot",
+		color: options.color ?? "#ffffff",
+		intensity: options.intensity ?? 1,
+		x: options.x ?? 0,
+		y: options.y ?? -500,
+		z: options.z ?? -1e3,
+		targetX: options.targetX ?? 0,
+		targetY: options.targetY ?? 0,
+		targetZ: options.targetZ ?? 0,
+		angle: options.angle ?? 45,
+		penumbra: options.penumbra ?? .2,
+		radius: options.radius ?? 2e3,
+		decay: options.decay ?? 1,
+		...options
+	})
+};
+function section(source, targetOrOptions = {}, options = {}) {
+	return Layer.section(source, targetOrOptions, options);
+}
+function blurRegion(sourceOrLayer, target, options = {}) {
+	if (typeof sourceOrLayer === "object" && "blurRegion" in sourceOrLayer) return sourceOrLayer.blurRegion(target, options);
+	return Layer.blurTrackedRegion(sourceOrLayer, target, options);
+}
+function editTrackedRegion(source, target, options = {}) {
+	return Layer.section(source, target, options);
+}
+const Effect = Object.assign(Effect$1, {
+	blur: (config) => new Blur(config),
+	vignette: (config) => new Vignette(config),
+	colorBalance: (config) => new ColorBalance(config),
+	colorKey: (config) => new ColorKey(config),
+	levels: (config) => new Levels(config),
+	filmGrain: (config) => new FilmGrain(config),
+	curves: (config) => new Curves(config),
+	selectiveColor: (config) => new SelectiveColor(config),
+	gradientMap: (config) => new GradientMap(config),
+	shadowsHighlights: (config) => new ShadowsHighlights(config),
+	applyLut: (config) => new ApplyLUT(config),
+	unsharpMask: (config) => new UnsharpMask(config),
+	highPass: (config) => new HighPass(config),
+	halftoneScreen: (config) => new HalftoneScreen(config),
+	tileOffset: (config) => new TileOffset(config),
+	motionBlur: (config) => new MotionBlur(config),
+	ssao: (config) => new SSAO(config),
+	pbrGlass: (config) => new PBRGlass(config),
+	depthOfField: (config) => new DepthOfField(config),
+	crop: (config) => new Crop(config),
+	vision: (config) => new Vision(config),
+	relight3d: (config) => new Relight3D(config),
+	modulate: (config) => new Modulate(config),
+	deflicker: (config) => new TemporalDeflicker(config),
+	custom: (op, config = {}) => new CustomEffect(op, config)
+});
+
+//#endregion
+export { AETextAnimatorSchema, AdvancedTextAnimatorBuilder, AdvancedTextAnimatorSchema, AnchorGroupingSchema, AnchorPresetSchema, AnimatableGlyphPropsSchema, AnimationTypeSchema, AnyOutputUnionSchema, ApplyLUT, AudioExtractorSignalDataSchema, AudioLatentEngine, AudioLatentTrackCache, AudioMeshDeformPipeline, AudioSignal, AudioSignalExtractor, AudioSpectrumTypographySchema, BaseMediaOperationPropsSchema, BaseVideoLayerPropsSchema, Blur, BoxNodeSchema, CAPTION_LAYER_DEFAULTS, COCO17_BONES, COCO17_KEYPOINTS, COCO17_KEYPOINT_NAMES, COCO_CLASSES, COMPOSITE_OPERATIONS, COMPOSITOR_DEFAULTS, Camera3D, CameraAnimation, CameraNodeSchema, CannyComputePipeline, CarrierHandoffConfigSchema, ChromaticGlitchConfigSchema, ColorBalance, ColorKey, ColorStopSchema, Composition, CompositorProgramSchema, ConfigHandleSchema, ConfigSchemaRegistry, ControlNetMultiplexer, Crop, CubicBezierSegmentSchema, Curves, CustomEffect, DATA_TYPE_EXTENSIONS, DEFAULT_CHART_COLORS, DEFAULT_DURATION_MS, DEFAULT_FPS, DEFAULT_MEDIA_DIMENSION, DataType, DataTypeVal, DataTypes, DepthNormalsComputePipeline, DepthOfField, DynamicStrokePropertiesSchema, Easing, Effect, EffectPipeline, EnhancedTextNodeSchema, ExportResultSchema, ExpressionSelectorSchema, ExtendedGlyphPropertiesSchema, ExtendedLayerSchema, FileAssetSchema, FileDataSchema, FilmGrain, FlexNodeSchema, FontManager, GeneratorSignalDataSchema, GlassPipeline, GlobalCompositeOperation, GlyphAnchorGroupingSchema, GlyphAnchorPointSchema, GradientMap, HalftoneScreen, HandleTypeVal, HeadlessMediaRenderer, HeadlessWebGPURenderer, HighPass, JsonValueSchema, KineticMarqueeConfigSchema, LIGHT_UNIFORM_SIZE_BYTES, Layer, Layer3D, LayerAnimation, LayoutNodeSchema, Levels, Light, Light3D, LightNodeSchema, LightTypeSchema, LineSpacingDynamicsSchema, LongShadowConfigSchema, MAX_LIGHTS, MIME_TYPES, MaterialTypeSchema, Matrix4Math, Media, MediaMetadataSchema, MediaNodeSchema, MediaOperationSchema, MediaSourceSchema, Model3DNodeSchema, ModerationError, ModerationUnrefundableError, Modulate, MotionBlur, MotionBlurPipeline, MultiOutputGenericSchema, NodeMetadataSchema, NodeResultSchema, NodeVisualConfigSchema, OpticalFlowComputePipeline, OutputItemSchema, PBRGlass, ParticleDissolveConfigSchema, Path3D, PoseSkeletonRenderer, ProgrammaticSignal, Relight3D, Renderer2D, Renderer3D, SSAO, SSAOPipeline, Scene, SceneDefinitionSchema, SceneTransitionTypeSchema, SegmentationTexturePool, SelectiveColor, SelectorBasedOnSchema, SelectorModeSchema, SelectorShapeSchema, SelectorUnitsSchema, Sequence, ShadowPipeline, ShadowsHighlights, ShapeNodeSchema, Signal, SignalChannelMetaSchema, SignalDataSchema, SignalGateDataSchema, SignalMathDataSchema, SignalStatsSchema, SingleOutputGenericSchema, SkewPropertiesSchema, SlugFontCache, SlugPipeline, SourceOperationSchema, Spatial3DPropertiesSchema, SpatialLandmarkTransformer, SpringPhysicsSchema, TEXT_LAYER_DEFAULTS, TemporalDeflicker, TemporalDeflickerPipeline, TemporalObjectTracker, TensorPipeline, TextAnchorConfigSchema, TextAnimator, TextAnimatorBuilder, TextAnimatorSchema, TextCursorConfigSchema, TextCursorStyleSchema, TextNodeSchema, TextOperationSchema, TextPathBuilder, TextPathOptionsSchema, TextPathSourceSchema, TextRangeSelectorSchema, TextScrambleConfigSchema, TextSelectorSchema, TextSignalSelectorSchema, TextSpanMarkSchema, TextSpanSchema, TextWigglySelectorSchema, TileOffset, TimelineSegmentSchema, TimelineTransformSchema, TransitionSchema, TransitionTypeSchema, TypewriterAnimatorSchema, TypingCadenceSchema, UnsharpMask, VariableFontAxesSchema, Vec2Schema, Vector3Math, VideoAnimationSchema, VideoLayerTypeSchema, VideoSpatialPropsSchema, VideoStylePropsSchema, VideoTextPropsSchema, VideoTimingPropsSchema, Vignette, VirtualMediaDataSchema, Vision, VisionBundle, VisionNode, VisionRunner, VolumetricFormationConfigSchema, VolumetricFormationModeSchema, accent, analyzeSequence, appendOperation, applyStaggerToChildren, bezier, blurRegion, bold, buildPathLUT, calculateSequenceTimeline, checkNodeResultCache, code, collectNodeOps, color, compositorToProgram, computeAnchorPivotOffset, computeCarrierContinuity, computeGridLayout, computeLayout, computeLayoutSync, computeLineLeadingDisplacement, computeRangeSelectorWeight, computeStaggerDelay, computeStrokeRect, computeVideoCropRenderProps, computed, cosineSignal, createOutputItemSchema, createVirtualMedia, dataTypeColors, deserializeSignalData, deterministicWigglyNoise, distanceToCurveParameter, editTrackedRegion, ellipseToCubicBeziers, encodeStereoWav, ensureDevice, evaluateAnimationAtFrame, evaluateCubicBezier, evaluateCubicBezierDerivative, evaluateExpressionSelector, evaluateMarqueeOffset, evaluateSelectorCombination, evaluateSkewMatrix, evaluateSpringProgress, evaluateTrackAtFrame, evaluateTypewriterState, evaluateVolumetricFormation, extractSvgDimensions, findSourceAsset, formatQaReport, frameArraySignal, frameSignal, generateArcLengthLUT, generateId, generatePathSegments, getActiveMediaMetadata, getFileDataMetadata, getFingerprint, getLeafMediaType, getMediaType, getRenderFingerprint, getScramblePool, getShuffledOrder, hasOnlySingleSource, inputStore, interpolate, isEqual, isSignal, isVirtualMediaData, italic, loadFBX, loadModel3D, loadOBJ, lutStore, mapBlendModeToSkia, mark, measureSpring, measureText, measureTextAsync, mixAudioTracks, mixSfxInto, normalizeTextSpans, parseColorToRgb, parseFBX, parseMTL, parseMarkup, parseOBJ, parseSvgPathToCubicBeziers, pinNodeToLandmark, pinNodeToObject, preloadFont, programmaticSignal, progressSignal, registerSignalDependency, renderFrameGrid, renderSemaphore, renderSfx, reportRenderDiagnostic, requiresIsolation, resolveMediaMimeType, resolveSamplePoints, rich, sampleAudioSpectrumScale, sampleCurveGeometry, samplePathChainGeometry, section, serializeSignalData, shaderStore, signal, signalBuilder, signalRegistry, sineSignal, size, softLimit, span, spring, springCalculation, stampResult, startPreview, sub, sup, takeRenderDiagnostics, textureCache, timeSignal, updateClockSignals, waveToCubicBeziers };
+//# sourceMappingURL=index.mjs.map