@framefields/node-compositor 0.0.0-stage → 2.0.2

package/dist/renderers-DoYYCzgA.mjs

@@ -0,0 +1,3326 @@
+import { decodeAudioSource, resolveLayerDuration } from "@framefields/compositions";
+import { collectNodeOps, computeLayout, evaluateTrackAtFrame, initLayout } from "@framefields/compositions/program";
+import { DEFAULT_DURATION_MS, getActiveMediaMetadata, reportRenderDiagnostic } from "@framefields/core";
+import gsapModule from "gsap";
+import { audioRegistry } from "@framefields/node-sdk";
+import { defineRenderer } from "@framefields/node-sdk/renderer";
+import { resolveMediaSourceUrl } from "@framefields/client-utils";
+import { measureText } from "@framefields/renderers";
+import { TemporalDeflickerPipeline } from "@framefields/tensor-webgpu";
+import { AudioLatentTrackCache, Camera3D, Matrix4Math, Renderer3D, ScreenSpaceRelightPipeline, SlugFontCache, Vector3Math, generateExtrudedTextGeometry, jointMatrices, measureMaxCaptionHeight, parseColor, poseNodes, srtLoader } from "@framefields/webgpu-renderers";
+
+//#region src/shared/bezier-solver.ts
+/**
+* Solves a cubic bezier curve defined by control points (x1, y1) and (x2, y2)
+* for a given progress parameter t in [0, 1].
+*/
+function solveCubicBezier(x1, y1, x2, y2, t) {
+	if (t <= 0) return 0;
+	if (t >= 1) return 1;
+	if (x1 === y1 && x2 === y2) return t;
+	let u = t;
+	for (let i = 0; i < 8; i++) {
+		const oneMinusU$1 = 1 - u;
+		const oneMinusU2 = oneMinusU$1 * oneMinusU$1;
+		const u2 = u * u;
+		const diff = 3 * oneMinusU2 * u * x1 + 3 * oneMinusU$1 * u2 * x2 + u2 * u - t;
+		if (Math.abs(diff) < 1e-6) break;
+		const dx = 3 * oneMinusU2 * x1 + 6 * oneMinusU$1 * u * (x2 - x1) + 3 * u2 * (1 - x2);
+		if (Math.abs(dx) < 1e-6) break;
+		u -= diff / dx;
+		u = Math.max(0, Math.min(1, u));
+	}
+	const oneMinusU = 1 - u;
+	const checkX = 3 * oneMinusU * oneMinusU * u * x1 + 3 * oneMinusU * u * u * x2 + u * u * u;
+	if (Math.abs(checkX - t) > .001) {
+		let low = 0;
+		let high = 1;
+		u = t;
+		for (let i = 0; i < 16; i++) {
+			const mid = (low + high) * .5;
+			const oMid = 1 - mid;
+			const xMid = 3 * oMid * oMid * mid * x1 + 3 * oMid * mid * mid * x2 + mid * mid * mid;
+			if (Math.abs(xMid - t) < 1e-5) {
+				u = mid;
+				break;
+			}
+			if (xMid < t) low = mid;
+			else high = mid;
+			u = mid;
+		}
+	}
+	const oU = 1 - u;
+	return 3 * oU * oU * u * y1 + 3 * oU * u * u * y2 + u * u * u;
+}
+
+//#endregion
+//#region src/shared/compiler.ts
+const gsap = gsapModule.timeline ? gsapModule : gsapModule.default || gsapModule;
+const cache = /* @__PURE__ */ new Map();
+const nodesHashMemo = /* @__PURE__ */ new WeakMap();
+/** Entries untouched for this long are dropped (and their timeline killed). */
+const CACHE_TTL_MS = 1e4;
+/** Max compiled timelines retained per cache. */
+const TIMELINE_CACHE_MAX = 50;
+const LAYER_TIMELINE_CACHE_MAX = 50;
+function fnv1a(str) {
+	let hash = 2166136261;
+	for (let i = 0; i < str.length; i++) {
+		hash ^= str.charCodeAt(i);
+		hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+	}
+	return (hash >>> 0).toString(16);
+}
+const signalIds = /* @__PURE__ */ new WeakMap();
+let nextSignalId = 0;
+function signalsKey(signals) {
+	if (!signals || typeof signals !== "object") return stableStringify(signals);
+	return Object.keys(signals).sort().map((name) => {
+		const s = signals[name];
+		if (s && typeof s === "object" && typeof s.get === "function") {
+			let id = signalIds.get(s);
+			if (id === void 0) {
+				id = nextSignalId++;
+				signalIds.set(s, id);
+			}
+			return `${JSON.stringify(name)}:#${id}`;
+		}
+		return `${JSON.stringify(name)}:${stableStringify(s)}`;
+	}).join(",");
+}
+/**
+* Paused gsap timelines stay attached to gsap's global timeline until killed,
+* so anything dropped from a cache must be killed or it is never collected.
+*/
+function release(value) {
+	value.tl.kill();
+}
+/**
+* Make room for one insertion: drop and kill TTL-expired entries, then evict
+* the least-recently-used entry if the cache is at capacity. Every dropped
+* timeline MUST be killed — see `release`.
+*/
+function evictForInsert(cache$1, maxSize) {
+	const now = Date.now();
+	for (const [key, entry] of cache$1.entries()) if (now - entry.cacheTime > CACHE_TTL_MS) {
+		cache$1.delete(key);
+		release(entry.value);
+	}
+	if (cache$1.size >= maxSize) {
+		const oldestKey = cache$1.keys().next().value;
+		if (oldestKey !== void 0) {
+			const oldest = cache$1.get(oldestKey);
+			cache$1.delete(oldestKey);
+			if (oldest) release(oldest.value);
+		}
+	}
+}
+function stableStringify(obj) {
+	if (obj === null) return "null";
+	if (obj === void 0) return "undefined";
+	if (typeof obj !== "object") return JSON.stringify(obj);
+	if (ArrayBuffer.isView(obj)) return `[TypedArray:${obj.byteLength}]`;
+	if (Array.isArray(obj)) return "[" + obj.map(stableStringify).join(",") + "]";
+	return "{" + Object.keys(obj).sort().map((key) => {
+		return `${JSON.stringify(key)}:${stableStringify(obj[key])}`;
+	}).join(",") + "}";
+}
+function getCachedTimeline(cacheKey) {
+	const entry = cache.get(cacheKey);
+	if (entry) {
+		if (Date.now() - entry.cacheTime > CACHE_TTL_MS) {
+			cache.delete(cacheKey);
+			release(entry.value);
+			return;
+		}
+		entry.cacheTime = Date.now();
+		cache.delete(cacheKey);
+		cache.set(cacheKey, entry);
+		return entry.value;
+	}
+}
+function setCachedTimeline(cacheKey, value) {
+	evictForInsert(cache, TIMELINE_CACHE_MAX);
+	cache.set(cacheKey, {
+		cacheTime: Date.now(),
+		value
+	});
+}
+function mappedEase(ease, durationFrames, fps = 24) {
+	if (!ease) return "none";
+	const { name, dir, params } = ease;
+	if (name === "none") return "none";
+	if (name === "spring") {
+		const damping = Math.max(.001, params?.[0] ?? 10);
+		const stiffness = Math.max(.001, params?.[1] ?? 100);
+		const mass = Math.max(.001, params?.[2] ?? 1);
+		return (p) => {
+			const t = p * (durationFrames && durationFrames > 0 ? durationFrames / (fps > 0 ? fps : 24) : 1);
+			const m = mass;
+			const k = stiffness;
+			const c = damping;
+			const w0 = Math.sqrt(k / m);
+			const zeta = c / (2 * Math.sqrt(k * m));
+			let x = 0;
+			if (zeta < 1) {
+				const wd = w0 * Math.sqrt(1 - zeta * zeta);
+				const A = -1;
+				const B = -zeta * w0 / wd;
+				x = Math.exp(-zeta * w0 * t) * (A * Math.cos(wd * t) + B * Math.sin(wd * t));
+			} else if (zeta === 1) {
+				const A = -1;
+				const B = -w0;
+				x = Math.exp(-w0 * t) * (A + B * t);
+			} else {
+				const r1 = -w0 * (zeta - Math.sqrt(zeta * zeta - 1));
+				const r2 = -w0 * (zeta + Math.sqrt(zeta * zeta - 1));
+				const C1 = -1 / (1 - r1 / r2);
+				const C2 = -1 - C1;
+				x = C1 * Math.exp(r1 * t) + C2 * Math.exp(r2 * t);
+			}
+			return 1 + x;
+		};
+	}
+	if (name === "cubic") {
+		const x1 = params?.[0] ?? .25;
+		const y1 = params?.[1] ?? .1;
+		const x2 = params?.[2] ?? .25;
+		const y2 = params?.[3] ?? 1;
+		return (p) => solveCubicBezier(x1, y1, x2, y2, p);
+	}
+	if (name === "hold") return (p) => p >= .9999 ? 1 : 0;
+	const easeName = name;
+	let suffix = "";
+	if (params && params.length > 0) suffix = `(${params.join(", ")})`;
+	else if (name === "back") suffix = "(1.7)";
+	else if (name === "elastic") suffix = "(1, 0.3)";
+	return `${easeName}.${dir}${suffix}`;
+}
+function compileTrackToTimeline(tl, stub, track, startFrame, fps, durationFrames, signals) {
+	const prop = track.prop;
+	if ((track.source ?? { type: "keyframe" }).type !== "keyframe") {
+		const endF = Number.isFinite(durationFrames) ? durationFrames : Math.round(fps * 5);
+		const frameStepSec = 1 / fps;
+		const kfList = [];
+		const firstVal = evaluateTrackAtFrame(track, startFrame, fps, {
+			startFrame,
+			baseValues: stub,
+			signals
+		});
+		stub[prop] = firstVal;
+		kfList.push({
+			[prop]: firstVal,
+			duration: 0
+		});
+		for (let f = 1; f <= endF; f++) {
+			const val = evaluateTrackAtFrame(track, startFrame + f, fps, {
+				startFrame,
+				baseValues: stub,
+				signals
+			});
+			kfList.push({
+				[prop]: val,
+				duration: frameStepSec,
+				ease: "none"
+			});
+		}
+		tl.to(stub, {
+			keyframes: kfList,
+			repeat: track.repeat ?? 0,
+			yoyo: !!track.yoyo,
+			lazy: false,
+			overwrite: false,
+			immediateRender: false
+		}, startFrame / fps);
+		return {
+			dropped: 0,
+			maxAuthoredFrame: 0
+		};
+	}
+	const sortedKeyframes = [...track.keyframes].sort((a, b) => a.frame - b.frame);
+	const validKeyframes = sortedKeyframes.filter((kf) => kf.frame >= 0 && kf.frame <= durationFrames);
+	const dropped = sortedKeyframes.length - validKeyframes.length;
+	const maxAuthoredFrame = dropped > 0 ? sortedKeyframes[sortedKeyframes.length - 1].frame : 0;
+	if (validKeyframes.length === 0) return {
+		dropped,
+		maxAuthoredFrame
+	};
+	if (prop === "hidden" || prop === "muted") for (const kf of validKeyframes) {
+		const absoluteSec = (startFrame + kf.frame) / fps;
+		tl.set(stub, {
+			[prop]: kf.value,
+			immediateRender: false
+		}, absoluteSec);
+	}
+	else {
+		const repeat = track.repeat ?? 0;
+		const yoyo = !!track.yoyo;
+		if (validKeyframes.length === 1) {
+			const kf0 = validKeyframes[0];
+			const absoluteSec = (startFrame + kf0.frame) / fps;
+			tl.set(stub, {
+				[prop]: kf0.value,
+				immediateRender: false
+			}, absoluteSec);
+		} else if (validKeyframes.length === 2) {
+			const kf0 = validKeyframes[0];
+			const kf1 = validKeyframes[1];
+			const val0 = kf0.value;
+			const val1 = kf1.value;
+			const startSec = (startFrame + kf0.frame) / fps;
+			const durSec = (kf1.frame - kf0.frame) / fps;
+			const trackDurationFrames = track.durationFrames ?? kf1.frame - kf0.frame;
+			const easeVal = mappedEase(kf1.ease ?? kf0.ease, trackDurationFrames, fps);
+			if (val0 === stub[prop]) tl.to(stub, {
+				[prop]: val1,
+				duration: durSec,
+				ease: easeVal,
+				repeat,
+				yoyo,
+				lazy: false,
+				overwrite: false,
+				immediateRender: false
+			}, startSec);
+			else tl.fromTo(stub, { [prop]: val0 }, {
+				[prop]: val1,
+				duration: durSec,
+				ease: easeVal,
+				repeat,
+				yoyo,
+				lazy: false,
+				overwrite: false,
+				immediateRender: false
+			}, startSec);
+		} else {
+			const kf0 = validKeyframes[0];
+			const startSec = (startFrame + kf0.frame) / fps;
+			const kfList = [];
+			kfList.push({
+				[prop]: kf0.value,
+				duration: 0
+			});
+			for (let i = 1; i < validKeyframes.length; i++) {
+				const prevKf = validKeyframes[i - 1];
+				const currKf = validKeyframes[i];
+				const deltaFrames = currKf.frame - prevKf.frame;
+				const durSec = deltaFrames / fps;
+				const easeVal = mappedEase(currKf.ease, deltaFrames, fps);
+				kfList.push({
+					[prop]: currKf.value,
+					duration: durSec,
+					ease: easeVal
+				});
+			}
+			tl.to(stub, {
+				keyframes: kfList,
+				repeat,
+				yoyo,
+				lazy: false,
+				overwrite: false,
+				immediateRender: false
+			}, startSec);
+		}
+	}
+	return {
+		dropped,
+		maxAuthoredFrame
+	};
+}
+/**
+* Dedupe per compiled cache key — a fresh render of the same broken doc SHOULD
+* re-warn. Single-frame renders are the exception: each `renderFrame` call has
+* its own `img-` render id, so probing a doc frame by frame would repeat the
+* warning on every frame; those dedupe per document instead.
+*/
+const truncationWarnedKeys = /* @__PURE__ */ new Set();
+const TRUNCATION_WARNED_CAP = 100;
+function warnTruncationOnce(cacheKey, truncations) {
+	if (truncationWarnedKeys.has(cacheKey)) return;
+	if (truncationWarnedKeys.size >= TRUNCATION_WARNED_CAP) truncationWarnedKeys.clear();
+	truncationWarnedKeys.add(cacheKey);
+	const details = truncations.map((t) => `'${t.prop}' (track '${t.trackId}') on '${t.layerId}': ${t.dropped} keyframe(s) past the clip window (last authored frame ${t.maxAuthoredFrame})`).join("; ");
+	console.warn(`[compositor] ${truncations.length} track(s) truncated — animation tails will not play: ${details}. Extend durationFrames or move those keyframes.`);
+}
+function hashNodes(nodeOps, width, height, fps, durationSec) {
+	return fnv1a(stableStringify({
+		nodes: nodeOps.map((vm) => {
+			const lop = vm?.operation || {};
+			return {
+				id: lop.id,
+				animation: lop.animation,
+				startFrame: lop.startFrame,
+				durationFrames: lop.durationFrames,
+				x: lop.x,
+				y: lop.y,
+				scale: lop.scale,
+				rotation: lop.rotation,
+				opacity: lop.opacity,
+				volume: lop.volume,
+				width: lop.width,
+				height: lop.height,
+				hidden: lop.hidden,
+				muted: lop.muted,
+				backgroundColor: lop.backgroundColor,
+				fill: lop.fill,
+				borderColor: lop.borderColor,
+				textBackgroundColor: lop.textBackgroundColor,
+				rotateX: lop.rotateX,
+				rotateY: lop.rotateY,
+				rotateZ: lop.rotateZ,
+				perspective: lop.perspective,
+				perspectiveOriginX: lop.perspectiveOriginX,
+				perspectiveOriginY: lop.perspectiveOriginY,
+				translateZ: lop.translateZ,
+				backfaceVisibility: lop.backfaceVisibility,
+				transformStyle: lop.transformStyle,
+				is3D: lop.is3D,
+				z: lop.z,
+				scaleZ: lop.scaleZ,
+				twoSided: lop.twoSided,
+				cameraX: lop.cameraX,
+				cameraY: lop.cameraY,
+				cameraZ: lop.cameraZ,
+				targetX: lop.targetX,
+				targetY: lop.targetY,
+				targetZ: lop.targetZ,
+				cameraPitch: lop.cameraPitch,
+				cameraYaw: lop.cameraYaw,
+				cameraRoll: lop.cameraRoll,
+				cameraFov: lop.cameraFov,
+				cameraZoom: lop.cameraZoom,
+				focalLength: lop.focalLength,
+				focusDistance: lop.focusDistance,
+				fStop: lop.fStop,
+				maxBlurRadius: lop.maxBlurRadius,
+				shakeTranslation: lop.shakeTranslation,
+				shakeRotation: lop.shakeRotation,
+				orbitRadius: lop.orbitRadius,
+				orbitAzimuth: lop.orbitAzimuth,
+				orbitElevation: lop.orbitElevation,
+				material: lop.material,
+				shininess: lop.shininess,
+				roughness: lop.roughness,
+				specularIntensity: lop.specularIntensity,
+				ambientIntensity: lop.ambientIntensity,
+				metallic: lop.metallic,
+				lightType: lop.lightType,
+				intensity: lop.intensity,
+				radius: lop.radius,
+				angle: lop.angle,
+				penumbra: lop.penumbra,
+				animationProgress: lop.animationProgress,
+				animationTime: lop.animationTime,
+				animationSpeed: lop.animationSpeed,
+				wireframe: lop.wireframe,
+				scaleX: lop.scaleX,
+				scaleY: lop.scaleY,
+				fontSize: lop.fontSize,
+				text: lop.text
+			};
+		}),
+		width,
+		height,
+		fps,
+		durationSec
+	}));
+}
+function compileTimeline(renderId, virtualMedia, options) {
+	const fps = options.fps;
+	const durationSec = options.durationSec;
+	const width = virtualMedia?.metadata?.width ?? 1920;
+	const height = virtualMedia?.metadata?.height ?? 1080;
+	const nodeOps = collectNodeOps(virtualMedia?.children ?? []);
+	const memoKey = virtualMedia?.children;
+	const memo = memoKey ? nodesHashMemo.get(memoKey) : void 0;
+	let nodesHash;
+	if (memo && memo.width === width && memo.height === height && memo.fps === fps && memo.durationSec === durationSec) nodesHash = memo.hash;
+	else {
+		nodesHash = hashNodes(nodeOps, width, height, fps, durationSec);
+		if (memoKey) nodesHashMemo.set(memoKey, {
+			width,
+			height,
+			fps,
+			durationSec,
+			hash: nodesHash
+		});
+	}
+	const irHash = fnv1a(`${nodesHash}|${signalsKey(virtualMedia?.operation?.signals ?? virtualMedia?.signals)}`);
+	const cacheKey = `${renderId}_${irHash}`;
+	const cached = getCachedTimeline(cacheKey);
+	if (cached) return cached;
+	const tl = gsap.timeline({
+		paused: true,
+		smoothChildTiming: false
+	});
+	const targetsById = {};
+	const signals = virtualMedia?.operation?.signals ?? virtualMedia?.signals ?? {};
+	nodeOps.forEach((vm, index) => {
+		const lop = vm?.operation || {};
+		const layerId = lop.id || lop.inputHandleId || `layer_${index}`;
+		const stub = {
+			id: layerId,
+			inputHandleId: lop.inputHandleId || `layer_${index}`,
+			trackId: layerId,
+			x: lop.kind === "camera" || lop.kind === "light" ? lop.x ?? lop.cameraX : lop.x ?? 0,
+			y: lop.kind === "camera" || lop.kind === "light" ? lop.y ?? lop.cameraY : lop.y ?? 0,
+			scale: lop.scale ?? 1,
+			rotation: lop.rotation ?? 0,
+			opacity: lop.opacity ?? 1,
+			volume: lop.volume ?? 1,
+			width: lop.width,
+			height: lop.height,
+			hidden: !!lop.hidden,
+			muted: !!lop.muted,
+			rotateX: lop.rotateX ?? 0,
+			rotateY: lop.rotateY ?? 0,
+			rotateZ: lop.rotateZ ?? 0,
+			perspective: lop.perspective ?? 0,
+			perspectiveOriginX: lop.perspectiveOriginX ?? .5,
+			perspectiveOriginY: lop.perspectiveOriginY ?? .5,
+			translateZ: lop.translateZ ?? 0,
+			backfaceVisibility: lop.backfaceVisibility ?? "visible",
+			transformStyle: lop.transformStyle ?? "flat",
+			fontSize: lop.fontSize,
+			text: 1,
+			fill: lop.fill,
+			fillColor: lop.fillColor ?? lop.fill,
+			strokeColor: lop.strokeColor ?? lop.stroke,
+			strokeWidth: lop.strokeWidth,
+			letterSpacing: lop.letterSpacing,
+			firstMargin: lop.firstMargin ?? lop.pathOptions?.firstMargin,
+			lastMargin: lop.lastMargin ?? lop.pathOptions?.lastMargin,
+			baselineShift: lop.baselineShift ?? lop.pathOptions?.baselineShift,
+			offset: lop.offset,
+			rangeStart: lop.rangeStart,
+			rangeEnd: lop.rangeEnd,
+			animators: lop.animators,
+			pathOptions: lop.pathOptions,
+			typewriter: lop.typewriter,
+			marquee: lop.marquee,
+			is3D: lop.is3D ?? (lop.kind === "camera" || lop.kind === "light" || lop.kind === "model3d" ? true : false),
+			z: lop.z ?? (lop.kind === "camera" ? lop.z ?? -1500 : 0),
+			scaleZ: lop.scaleZ ?? 1,
+			twoSided: lop.twoSided ?? true,
+			material: lop.material,
+			shininess: lop.shininess,
+			roughness: lop.roughness,
+			specularIntensity: lop.specularIntensity,
+			ambientIntensity: lop.ambientIntensity,
+			metallic: lop.metallic,
+			animationProgress: lop.animationProgress ?? 0,
+			animationTime: lop.animationTime ?? 0,
+			animationSpeed: lop.animationSpeed ?? 1,
+			wireframe: lop.wireframe ?? false,
+			scaleX: lop.scaleX ?? 1,
+			scaleY: lop.scaleY ?? 1,
+			cameraX: lop.cameraX ?? (lop.kind === "camera" ? lop.x : void 0),
+			cameraY: lop.cameraY ?? (lop.kind === "camera" ? lop.y : void 0),
+			cameraZ: lop.cameraZ ?? (lop.kind === "camera" ? lop.z : void 0),
+			targetX: lop.targetX,
+			targetY: lop.targetY,
+			targetZ: lop.targetZ,
+			cameraPitch: lop.cameraPitch ?? lop.pitch ?? 0,
+			cameraYaw: lop.cameraYaw ?? lop.yaw ?? 0,
+			cameraRoll: lop.cameraRoll ?? lop.roll ?? 0,
+			cameraFov: lop.cameraFov ?? lop.lens?.fov ?? 50,
+			cameraZoom: lop.cameraZoom ?? lop.lens?.zoom ?? 1,
+			focalLength: lop.focalLength ?? lop.lens?.focalLength ?? 50,
+			focusDistance: lop.focusDistance ?? lop.dof?.focusDistance,
+			fStop: lop.fStop ?? lop.dof?.fStop ?? 2.8,
+			maxBlurRadius: lop.maxBlurRadius ?? lop.dof?.maxBlurRadius ?? 24,
+			shakeTranslation: lop.shakeTranslation ?? (lop.shake?.enabled ? lop.shake?.translationAmplitude ?? 0 : 0),
+			shakeRotation: lop.shakeRotation ?? (lop.shake?.enabled ? lop.shake?.rotationAmplitude ?? 0 : 0),
+			orbitRadius: lop.orbitRadius,
+			orbitAzimuth: lop.orbitAzimuth,
+			orbitElevation: lop.orbitElevation,
+			lightType: lop.lightType,
+			intensity: lop.intensity ?? (lop.kind === "light" ? 1 : void 0),
+			radius: lop.radius,
+			angle: lop.angle,
+			penumbra: lop.penumbra,
+			decay: lop.decay
+		};
+		for (const track of lop.animation?.tracks ?? []) if ((track.source ?? { type: "keyframe" }).type !== "keyframe") stub[track.prop] = evaluateTrackAtFrame(track, lop.startFrame ?? 0, fps, {
+			startFrame: lop.startFrame ?? 0,
+			baseValues: stub,
+			signals
+		});
+		else if (track.keyframes && track.keyframes.length > 0) {
+			const kf0 = track.keyframes[0];
+			const seeded = stub;
+			if (kf0.frame === 0) seeded[track.prop] = kf0.value;
+			else if (seeded[track.prop] === void 0) seeded[track.prop] = lop[track.prop] ?? kf0.value;
+		}
+		targetsById[layerId] = stub;
+	});
+	const truncations = [];
+	nodeOps.forEach((vm) => {
+		const lop = vm?.operation || {};
+		const layerId = lop.id || lop.inputHandleId;
+		const stub = layerId ? targetsById[layerId] : void 0;
+		if (!stub) return;
+		const startFrame = lop.startFrame ?? 0;
+		let durationFrames = lop.durationFrames;
+		if (durationFrames === void 0) {
+			const child = vm.children?.[0];
+			const childMeta = child ? getActiveMediaMetadata(child) : null;
+			const composeDuration = virtualMedia?.metadata?.durationMs ?? DEFAULT_DURATION_MS;
+			const layerType = lop.type ?? (lop.kind === "text" ? "Text" : lop.kind === "media" ? child ? child.operation?.dataType : void 0 : void 0);
+			const durationMs = resolveLayerDuration(void 0, childMeta?.durationMs ?? void 0, composeDuration, layerType);
+			durationFrames = Math.max(1, Math.round(durationMs / 1e3 * fps));
+		}
+		for (const track of lop.animation?.tracks ?? []) {
+			const { dropped, maxAuthoredFrame } = compileTrackToTimeline(tl, stub, track, startFrame, fps, durationFrames, signals);
+			if (dropped > 0) truncations.push({
+				layerId,
+				trackId: track.id,
+				prop: track.prop,
+				dropped,
+				maxAuthoredFrame
+			});
+		}
+	});
+	if (truncations.length > 0) {
+		warnTruncationOnce(renderId.startsWith("img-") ? `frame_${irHash}` : cacheKey, truncations);
+		for (const t of truncations) reportRenderDiagnostic(renderId, {
+			severity: "warning",
+			code: "animation_truncated",
+			layerId: t.layerId,
+			message: `'${t.prop}' on '${t.layerId}': ${t.dropped} keyframe(s) past the clip window (last authored frame ${t.maxAuthoredFrame}) never play`
+		});
+	}
+	tl.seek(1e-6);
+	tl.seek(0);
+	const compileResult = {
+		tl,
+		targetsById,
+		nodes: nodeOps
+	};
+	setCachedTimeline(cacheKey, compileResult);
+	return compileResult;
+}
+const layerTimelineCache = /* @__PURE__ */ new Map();
+function compileLayerTimeline(layerId, animation, baseVolume, baseMuted, fps) {
+	const cacheKey = `layer_${layerId}_${fnv1a(stableStringify({
+		animation,
+		baseVolume,
+		baseMuted,
+		fps
+	}))}`;
+	const cached = layerTimelineCache.get(cacheKey);
+	if (cached) {
+		if (Date.now() - cached.cacheTime <= CACHE_TTL_MS) {
+			cached.cacheTime = Date.now();
+			return cached.value;
+		}
+		layerTimelineCache.delete(cacheKey);
+		release(cached.value);
+	}
+	const tl = gsap.timeline({
+		paused: true,
+		smoothChildTiming: false
+	});
+	const stub = {
+		volume: baseVolume,
+		muted: baseMuted
+	};
+	const tracks = animation?.tracks ?? [];
+	for (const track of tracks) {
+		const prop = track.prop;
+		if (prop !== "volume" && prop !== "muted") continue;
+		compileTrackToTimeline(tl, stub, track, 0, fps, Infinity);
+	}
+	tl.seek(1e-6);
+	tl.seek(0);
+	const result = {
+		tl,
+		stub
+	};
+	evictForInsert(layerTimelineCache, LAYER_TIMELINE_CACHE_MAX);
+	layerTimelineCache.set(cacheKey, {
+		cacheTime: Date.now(),
+		value: result
+	});
+	return result;
+}
+
+//#endregion
+//#region src/renderers/container-bg.ts
+/**
+* Which container kinds paint their own background.
+*
+* flex/block/box all accept an optional `background` in the program schema.
+* The renderer must draw the rounded background pass for ALL of them (the old
+* code only painted `box`, so flex/block backgrounds were silently dropped and
+* their "transparent-optimized" fast path skipped the fill entirely).
+*/
+function shouldPaintContainerBackground(kind, background) {
+	if (!background) return false;
+	return kind === "flex" || kind === "block" || kind === "box";
+}
+
+//#endregion
+//#region src/renderers/transform.ts
+function translate(tx, ty) {
+	return {
+		a: 1,
+		b: 0,
+		c: 0,
+		d: 1,
+		e: tx,
+		f: ty
+	};
+}
+/** Rotation in degrees (screen convention: positive = clockwise, y-down). */
+function rotate(degrees) {
+	const rad = degrees * Math.PI / 180;
+	const cos = Math.cos(rad);
+	const sin = Math.sin(rad);
+	return {
+		a: cos,
+		b: sin,
+		c: -sin,
+		d: cos,
+		e: 0,
+		f: 0
+	};
+}
+function scale(sx, sy = sx) {
+	return {
+		a: sx,
+		b: 0,
+		c: 0,
+		d: sy,
+		e: 0,
+		f: 0
+	};
+}
+/** m1 ∘ m2 (m2 applied first — matches DOMMatrix.multiply ordering). */
+function multiply(m1, m2) {
+	return {
+		a: m1.a * m2.a + m1.c * m2.b,
+		b: m1.b * m2.a + m1.d * m2.b,
+		c: m1.a * m2.c + m1.c * m2.d,
+		d: m1.b * m2.c + m1.d * m2.d,
+		e: m1.a * m2.e + m1.c * m2.f + m1.e,
+		f: m1.b * m2.e + m1.d * m2.f + m1.f
+	};
+}
+/** Materialize into a DOMMatrix for the renderer's transform stack. */
+function toDOMMatrix(m) {
+	return new DOMMatrix([
+		m.a,
+		m.b,
+		m.c,
+		m.d,
+		m.e,
+		m.f
+	]);
+}
+/**
+* Layer transform matrix with anchor-aware pivot semantics.
+*
+* The composition node box is drawn at (0, 0, width, height) in local space
+* and positioned at `x`/`y`. `anchorX`/`anchorY` (0–1 fractions of the box)
+* select the pivot point that scale/rotation are applied AROUND:
+*
+*   position → pivot → rotate → scale → un-pivot
+*
+* With the default center anchor (0.5, 0.5) a `scale: 2` animation grows the
+* node symmetrically from its middle instead of from its top-left corner.
+* The pivot point itself is invariant under rotation and scale.
+*/
+function buildLayerMatrix(params) {
+	const ax = params.anchorX ?? .5;
+	const ay = params.anchorY ?? .5;
+	const px = ax * params.width;
+	const py = ay * params.height;
+	return multiply(translate(params.x, params.y), multiply(translate(px, py), multiply(rotate(params.rotation), multiply(scale(params.scale), translate(-px, -py)))));
+}
+
+//#endregion
+//#region src/renderers/transform3d.ts
+const Transform3DMath = {
+	identity() {
+		return [
+			1,
+			0,
+			0,
+			0,
+			0,
+			1,
+			0,
+			0,
+			0,
+			0,
+			1,
+			0,
+			0,
+			0,
+			0,
+			1
+		];
+	},
+	multiply(a, b) {
+		const out = new Array(16);
+		for (let row = 0; row < 4; row++) for (let col = 0; col < 4; col++) out[col * 4 + row] = a[0 + row] * b[col * 4 + 0] + a[4 + row] * b[col * 4 + 1] + a[8 + row] * b[col * 4 + 2] + a[12 + row] * b[col * 4 + 3];
+		return out;
+	},
+	translate(tx, ty, tz = 0) {
+		return [
+			1,
+			0,
+			0,
+			0,
+			0,
+			1,
+			0,
+			0,
+			0,
+			0,
+			1,
+			0,
+			tx,
+			ty,
+			tz,
+			1
+		];
+	},
+	scale(sx, sy, sz = 1) {
+		return [
+			sx,
+			0,
+			0,
+			0,
+			0,
+			sy,
+			0,
+			0,
+			0,
+			0,
+			sz,
+			0,
+			0,
+			0,
+			0,
+			1
+		];
+	},
+	rotateX(rad) {
+		const c = Math.cos(rad);
+		const s = Math.sin(rad);
+		return [
+			1,
+			0,
+			0,
+			0,
+			0,
+			c,
+			s,
+			0,
+			0,
+			-s,
+			c,
+			0,
+			0,
+			0,
+			0,
+			1
+		];
+	},
+	rotateY(rad) {
+		const c = Math.cos(rad);
+		const s = Math.sin(rad);
+		return [
+			c,
+			0,
+			-s,
+			0,
+			0,
+			1,
+			0,
+			0,
+			s,
+			0,
+			c,
+			0,
+			0,
+			0,
+			0,
+			1
+		];
+	},
+	rotateZ(rad) {
+		const c = Math.cos(rad);
+		const s = Math.sin(rad);
+		return [
+			c,
+			s,
+			0,
+			0,
+			-s,
+			c,
+			0,
+			0,
+			0,
+			0,
+			1,
+			0,
+			0,
+			0,
+			0,
+			1
+		];
+	},
+	perspective(d) {
+		if (d <= 0) return Transform3DMath.identity();
+		const m = Transform3DMath.identity();
+		m[11] = -1 / d;
+		return m;
+	},
+	buildLayer3DMatrix(config) {
+		const { x, y, width, height, rotateXDeg = 0, rotateYDeg = 0, rotateZDeg = 0, scaleX = 1, scaleY = 1, perspectivePx = 0, originXRatio = .5, originYRatio = .5, translateZPx = 0 } = config;
+		const pivotX = x + width * originXRatio;
+		const pivotY = y + height * originYRatio;
+		const rxRad = rotateXDeg * Math.PI / 180;
+		const ryRad = rotateYDeg * Math.PI / 180;
+		const rzRad = rotateZDeg * Math.PI / 180;
+		let m = Transform3DMath.identity();
+		m = Transform3DMath.multiply(m, Transform3DMath.translate(pivotX, pivotY, 0));
+		if (perspectivePx > 0) m = Transform3DMath.multiply(m, Transform3DMath.perspective(perspectivePx));
+		if (translateZPx !== 0) m = Transform3DMath.multiply(m, Transform3DMath.translate(0, 0, translateZPx));
+		if (rzRad !== 0) m = Transform3DMath.multiply(m, Transform3DMath.rotateZ(rzRad));
+		if (ryRad !== 0) m = Transform3DMath.multiply(m, Transform3DMath.rotateY(ryRad));
+		if (rxRad !== 0) m = Transform3DMath.multiply(m, Transform3DMath.rotateX(rxRad));
+		m = Transform3DMath.multiply(m, Transform3DMath.translate(-width * originXRatio, -height * originYRatio, 0));
+		if (scaleX !== 1 || scaleY !== 1) m = Transform3DMath.multiply(m, Transform3DMath.scale(scaleX, scaleY, 1));
+		return m;
+	},
+	projectPoint(m, p) {
+		const x = p.x;
+		const y = p.y;
+		const z = p.z;
+		const X = m[0] * x + m[4] * y + m[8] * z + m[12];
+		const Y = m[1] * x + m[5] * y + m[9] * z + m[13];
+		const W = m[3] * x + m[7] * y + m[11] * z + m[15];
+		const wInv = Math.abs(W) > 1e-6 ? 1 / W : 1;
+		return {
+			x: X * wInv,
+			y: Y * wInv
+		};
+	},
+	projectRectangleCorners(matrix, width, height) {
+		return {
+			topLeft: Transform3DMath.projectPoint(matrix, {
+				x: 0,
+				y: 0,
+				z: 0
+			}),
+			topRight: Transform3DMath.projectPoint(matrix, {
+				x: width,
+				y: 0,
+				z: 0
+			}),
+			bottomLeft: Transform3DMath.projectPoint(matrix, {
+				x: 0,
+				y: height,
+				z: 0
+			}),
+			bottomRight: Transform3DMath.projectPoint(matrix, {
+				x: width,
+				y: height,
+				z: 0
+			})
+		};
+	},
+	computeSignedArea(quad) {
+		const { topLeft: p0, topRight: p1, bottomRight: p2, bottomLeft: p3 } = quad;
+		return .5 * (p0.x * p1.y - p1.x * p0.y + (p1.x * p2.y - p2.x * p1.y) + (p2.x * p3.y - p3.x * p2.y) + (p3.x * p0.y - p0.x * p3.y));
+	}
+};
+/**
+* Computes an 8-parameter 3x3 homography matrix mapping destination coordinates (quad)
+* to normalized source coordinates (unit square [0, 1]^2).
+*
+* The homography H maps destination (x, y) to source (u, v):
+*   u = (h00*x + h01*y + h02) / (h20*x + h21*y + h22)
+*   v = (h10*x + h11*y + h12) / (h20*x + h21*y + h22)
+*
+* Resulting array: [h00, h01, h02, h10, h11, h12, h20, h21, 1.0]
+*/
+function solveHomography(dstPoints, srcPoints = [
+	{
+		x: 0,
+		y: 0
+	},
+	{
+		x: 1,
+		y: 0
+	},
+	{
+		x: 0,
+		y: 1
+	},
+	{
+		x: 1,
+		y: 1
+	}
+]) {
+	const A = [];
+	const B = [];
+	for (let i = 0; i < 4; i++) {
+		const xi = dstPoints[i]?.x ?? 0;
+		const yi = dstPoints[i]?.y ?? 0;
+		const ui = srcPoints[i]?.x ?? 0;
+		const vi = srcPoints[i]?.y ?? 0;
+		A.push([
+			xi,
+			yi,
+			1,
+			0,
+			0,
+			0,
+			-xi * ui,
+			-yi * ui
+		]);
+		B.push(ui);
+		A.push([
+			0,
+			0,
+			0,
+			xi,
+			yi,
+			1,
+			-xi * vi,
+			-yi * vi
+		]);
+		B.push(vi);
+	}
+	const n = 8;
+	for (let i = 0; i < n; i++) {
+		let maxRow = i;
+		let maxVal = Math.abs(A[i][i]);
+		for (let k = i + 1; k < n; k++) if (Math.abs(A[k][i]) > maxVal) {
+			maxVal = Math.abs(A[k][i]);
+			maxRow = k;
+		}
+		const tempRow = A[i];
+		A[i] = A[maxRow];
+		A[maxRow] = tempRow;
+		const tempB = B[i];
+		B[i] = B[maxRow];
+		B[maxRow] = tempB;
+		const pivot = A[i][i];
+		if (Math.abs(pivot) < 1e-12) A[i][i] = pivot < 0 ? -1e-12 : 1e-12;
+		for (let k = i + 1; k < n; k++) {
+			const factor = A[k][i] / A[i][i];
+			for (let j = i; j < n; j++) A[k][j] -= factor * A[i][j];
+			B[k] -= factor * B[i];
+		}
+	}
+	const h = new Array(8).fill(0);
+	for (let i = n - 1; i >= 0; i--) {
+		let sum = B[i];
+		for (let j = i + 1; j < n; j++) sum -= A[i][j] * h[j];
+		h[i] = sum / A[i][i];
+	}
+	return [
+		h[0],
+		h[1],
+		h[2],
+		h[3],
+		h[4],
+		h[5],
+		h[6],
+		h[7],
+		1
+	];
+}
+/**
+* Checks whether a layer operation or compiled stub activates the 3D perspective path.
+*/
+function has3DTransform(target, lop) {
+	const rx = target?.rotateX ?? lop?.rotateX ?? 0;
+	const ry = target?.rotateY ?? lop?.rotateY ?? 0;
+	const rz = target?.rotateZ ?? lop?.rotateZ ?? 0;
+	const tz = target?.translateZ ?? lop?.translateZ ?? 0;
+	const p = target?.perspective ?? lop?.perspective ?? 0;
+	if (rx !== 0 || ry !== 0 || tz !== 0 || p > 0 && (rx !== 0 || ry !== 0 || tz !== 0 || rz !== 0)) return true;
+	if (target?.rotateZ !== void 0 && target.rotateZ !== 0 || lop?.rotateZ !== void 0 && lop.rotateZ !== 0) return true;
+	const tracks = lop?.animation?.tracks;
+	if (tracks && tracks.length > 0) {
+		for (const t of tracks) if (t.prop === "rotateX" || t.prop === "rotateY" || t.prop === "rotateZ" || t.prop === "translateZ" || t.prop === "perspective") return true;
+	}
+	return false;
+}
+
+//#endregion
+//#region src/renderers/webgpu-renderer.ts
+const LAYOUT_PROPS = [
+	"width",
+	"height",
+	"gap",
+	"padding",
+	"fontSize",
+	"letterSpacing"
+];
+const layoutMemo = /* @__PURE__ */ new WeakMap();
+function layoutKey(width, height, targetsById, mediaDims) {
+	const parts = [width, height];
+	for (const id in targetsById) {
+		const t = targetsById[id];
+		for (const k of LAYOUT_PROPS) if (t[k] !== void 0) parts.push(id, k, t[k]);
+	}
+	for (const [id, d] of mediaDims) parts.push(id, d.width, d.height);
+	return JSON.stringify(parts);
+}
+const compositorHomographyWgsl = `
+struct HomographyUniforms {
+	matrix_row0 : vec4<f32>,
+	matrix_row1 : vec4<f32>,
+	matrix_row2 : vec4<f32>,
+	params      : vec4<f32>, // params.x = opacity
+};
+
+@group(0) @binding(0) var<uniform> u : HomographyUniforms;
+@group(1) @binding(0) var tex        : texture_2d<f32>;
+@group(1) @binding(1) var samp       : sampler;
+
+struct VSOut {
+	@builtin(position) pos : vec4<f32>,
+	@location(0) uv        : vec2<f32>,
+};
+
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
+	var pos = array<vec2<f32>, 4>(
+		vec2<f32>(-1.0, 1.0),
+		vec2<f32>(1.0, 1.0),
+		vec2<f32>(-1.0, -1.0),
+		vec2<f32>(1.0, -1.0)
+	);
+	var uv = array<vec2<f32>, 4>(
+		vec2<f32>(0.0, 0.0),
+		vec2<f32>(1.0, 0.0),
+		vec2<f32>(0.0, 1.0),
+		vec2<f32>(1.0, 1.0)
+	);
+	return VSOut(vec4<f32>(pos[vi], 0.0, 1.0), uv[vi]);
+}
+
+@fragment fn fs(in : VSOut) -> @location(0) vec4<f32> {
+	let x = in.uv.x;
+	let y = in.uv.y;
+
+	let d = u.matrix_row2.x * x + u.matrix_row2.y * y + u.matrix_row2.z;
+	if (d <= 1e-6) {
+		return vec4<f32>(0.0);
+	}
+
+	let src_u = (u.matrix_row0.x * x + u.matrix_row0.y * y + u.matrix_row0.z) / d;
+	let src_v = (u.matrix_row1.x * x + u.matrix_row1.y * y + u.matrix_row1.z) / d;
+
+	if (src_u < 0.0 || src_u > 1.0 || src_v < 0.0 || src_v > 1.0) {
+		return vec4<f32>(0.0);
+	}
+
+	let color = textureSampleLevel(tex, samp, vec2<f32>(src_u, src_v), 0.0);
+	return color * u.params.x;
+}
+`;
+const deviceHomographyCache = /* @__PURE__ */ new WeakMap();
+function getHomographyResources(device, format) {
+	let res = deviceHomographyCache.get(device);
+	if (!res) {
+		const uniformLayout = device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.FRAGMENT,
+			buffer: { type: "uniform" }
+		}] });
+		const textureLayout = device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.FRAGMENT,
+			texture: { sampleType: "float" }
+		}, {
+			binding: 1,
+			visibility: GPUShaderStage.FRAGMENT,
+			sampler: { type: "filtering" }
+		}] });
+		const module = device.createShaderModule({
+			label: "compositor_homography.wgsl",
+			code: compositorHomographyWgsl
+		});
+		res = {
+			pipeline: device.createRenderPipeline({
+				label: "CompositorHomographyPipeline",
+				layout: device.createPipelineLayout({ bindGroupLayouts: [uniformLayout, textureLayout] }),
+				vertex: {
+					module,
+					entryPoint: "vs"
+				},
+				fragment: {
+					module,
+					entryPoint: "fs",
+					targets: [{
+						format,
+						blend: {
+							color: {
+								srcFactor: "one",
+								dstFactor: "one-minus-src-alpha",
+								operation: "add"
+							},
+							alpha: {
+								srcFactor: "one",
+								dstFactor: "one-minus-src-alpha",
+								operation: "add"
+							}
+						}
+					}]
+				},
+				primitive: { topology: "triangle-strip" }
+			}),
+			uniformLayout,
+			textureLayout
+		};
+		deviceHomographyCache.set(device, res);
+	}
+	return res;
+}
+const audioTrackLatentCache = /* @__PURE__ */ new Map();
+const deviceRenderer3DCache = /* @__PURE__ */ new WeakMap();
+/** One Renderer3D per device, target format and MSAA sample count. */
+function getRenderer3D(device, format, sampleCount) {
+	let byConfig = deviceRenderer3DCache.get(device);
+	if (!byConfig) {
+		byConfig = /* @__PURE__ */ new Map();
+		deviceRenderer3DCache.set(device, byConfig);
+	}
+	const key = `${format}|${sampleCount}`;
+	let r3d = byConfig.get(key);
+	if (!r3d) {
+		r3d = new Renderer3D(device, format, sampleCount);
+		byConfig.set(key, r3d);
+	}
+	return r3d;
+}
+const deviceRelightPipelineCache = /* @__PURE__ */ new WeakMap();
+function getScreenSpaceRelightPipeline(device, format) {
+	let relight = deviceRelightPipelineCache.get(device);
+	if (!relight || relight.format !== format) {
+		relight = new ScreenSpaceRelightPipeline(device, format);
+		deviceRelightPipelineCache.set(device, relight);
+	}
+	return relight;
+}
+const deviceDeflickerPipelineCache = /* @__PURE__ */ new WeakMap();
+function getTemporalDeflickerPipeline(device, layerKey) {
+	let map = deviceDeflickerPipelineCache.get(device);
+	if (!map) {
+		map = /* @__PURE__ */ new Map();
+		deviceDeflickerPipelineCache.set(device, map);
+	}
+	let pipe = map.get(layerKey);
+	if (!pipe) {
+		pipe = new TemporalDeflickerPipeline(device);
+		map.set(layerKey, pipe);
+	}
+	return pipe;
+}
+function resolveVal(val, fallback, frame, fps) {
+	if (val === void 0 || val === null) return fallback;
+	if (typeof val === "number") return Number.isFinite(val) ? val : fallback;
+	if (typeof val === "object" && val !== null) {
+		if ("get" in val && typeof val.get === "function") try {
+			const res = val.get({
+				frame,
+				fps,
+				time: fps > 0 ? frame / fps : 0,
+				duration: 0,
+				durationMs: 0,
+				progress: 0,
+				deltaTime: fps > 0 ? 1 / fps : 0
+			});
+			const n$1 = Number(res);
+			if (Number.isFinite(n$1)) return n$1;
+		} catch {}
+		if ("value" in val) {
+			const n$1 = Number(val.value);
+			if (Number.isFinite(n$1)) return n$1;
+		}
+	}
+	if (typeof val === "function") try {
+		const n$1 = Number(val({
+			frame,
+			fps,
+			time: fps > 0 ? frame / fps : 0
+		}));
+		if (Number.isFinite(n$1)) return n$1;
+	} catch {}
+	const n = Number(val);
+	return Number.isFinite(n) ? n : fallback;
+}
+function synthesizeRelightLights(relightOpts, sceneLights, bounds, shiftedFrame, fps) {
+	if (sceneLights.length > 0 || relightOpts.lightType === void 0 && relightOpts.intensity === void 0 && relightOpts.lightPosX === void 0) return sceneLights;
+	const lightTypeStr = String(relightOpts.lightType ?? "point").toLowerCase();
+	const lightKind = lightTypeStr === "directional" ? "directional" : lightTypeStr === "spot" ? "spot" : "point";
+	const intensity = resolveVal(relightOpts.intensity ?? 1, 1, shiftedFrame, fps);
+	const normX = resolveVal(relightOpts.lightPosX, .5, shiftedFrame, fps);
+	const normY = resolveVal(relightOpts.lightPosY, .5, shiftedFrame, fps);
+	const normZ = resolveVal(relightOpts.lightPosZ, .25, shiftedFrame, fps);
+	const normRadius = resolveVal(relightOpts.lightRadius, .75, shiftedFrame, fps);
+	const lightX = bounds.x + normX * bounds.width;
+	const lightY = bounds.y + normY * bounds.height;
+	const lightZ = normZ * Math.max(bounds.width, bounds.height);
+	const lightRadius = normRadius * Math.max(bounds.width, bounds.height);
+	const synthLight = {
+		lightType: lightKind,
+		color: relightOpts.lightColor ?? "#ffffff",
+		intensity,
+		x: lightX,
+		y: lightY,
+		z: lightZ,
+		radius: lightRadius,
+		decay: 1
+	};
+	const ambientInt = resolveVal(relightOpts.ambientIntensity, .15, shiftedFrame, fps);
+	return [{
+		lightType: "ambient",
+		color: relightOpts.ambientColor ?? "#ffffff",
+		intensity: ambientInt
+	}, synthLight];
+}
+function drawProjectedQuad(ctx, encoder, destView, sourceTex, quad, destWidth, destHeight, opacity) {
+	if (Math.abs(Transform3DMath.computeSignedArea(quad)) < 1e-4) return;
+	const minX = Math.max(0, Math.min(destWidth, Math.floor(Math.min(quad.topLeft.x, quad.topRight.x, quad.bottomLeft.x, quad.bottomRight.x))));
+	const minY = Math.max(0, Math.min(destHeight, Math.floor(Math.min(quad.topLeft.y, quad.topRight.y, quad.bottomLeft.y, quad.bottomRight.y))));
+	const maxX = Math.max(0, Math.min(destWidth, Math.ceil(Math.max(quad.topLeft.x, quad.topRight.x, quad.bottomLeft.x, quad.bottomRight.x))));
+	const maxY = Math.max(0, Math.min(destHeight, Math.ceil(Math.max(quad.topLeft.y, quad.topRight.y, quad.bottomLeft.y, quad.bottomRight.y))));
+	const scissorW = maxX - minX;
+	const scissorH = maxY - minY;
+	if (scissorW <= 0 || scissorH <= 0) return;
+	const h = solveHomography([
+		{
+			x: quad.topLeft.x / destWidth,
+			y: quad.topLeft.y / destHeight
+		},
+		{
+			x: quad.topRight.x / destWidth,
+			y: quad.topRight.y / destHeight
+		},
+		{
+			x: quad.bottomLeft.x / destWidth,
+			y: quad.bottomLeft.y / destHeight
+		},
+		{
+			x: quad.bottomRight.x / destWidth,
+			y: quad.bottomRight.y / destHeight
+		}
+	]);
+	for (const val of h) if (!Number.isFinite(val)) return;
+	const uniformData = new Float32Array(16);
+	uniformData[0] = h[0];
+	uniformData[1] = h[1];
+	uniformData[2] = h[2];
+	uniformData[3] = 0;
+	uniformData[4] = h[3];
+	uniformData[5] = h[4];
+	uniformData[6] = h[5];
+	uniformData[7] = 0;
+	uniformData[8] = h[6];
+	uniformData[9] = h[7];
+	uniformData[10] = h[8];
+	uniformData[11] = 0;
+	uniformData[12] = opacity;
+	uniformData[13] = 0;
+	uniformData[14] = 0;
+	uniformData[15] = 0;
+	const { pipeline, uniformLayout, textureLayout } = getHomographyResources(ctx.device, ctx.renderer.format);
+	const sampler = ctx.renderer.samplerCache.getSampler(ctx.device);
+	const uniformBuffer = ctx.renderer.getTemporaryBuffer(uniformData);
+	const uniformBindGroup = ctx.device.createBindGroup({
+		layout: uniformLayout,
+		entries: [{
+			binding: 0,
+			resource: { buffer: uniformBuffer }
+		}]
+	});
+	const textureBindGroup = ctx.renderer.bindGroupCache.getBindGroup(ctx.device, textureLayout, sourceTex, sampler);
+	const renderPass = encoder.beginRenderPass({ colorAttachments: [{
+		view: destView,
+		loadOp: "load",
+		storeOp: "store"
+	}] });
+	renderPass.setPipeline(pipeline);
+	renderPass.setScissorRect(minX, minY, scissorW, scissorH);
+	renderPass.setBindGroup(0, uniformBindGroup);
+	renderPass.setBindGroup(1, textureBindGroup);
+	renderPass.draw(4);
+	renderPass.end();
+}
+function computeContainerScissor(matrix, width, height) {
+	const corners = [
+		matrix.transformPoint(new DOMPoint(0, 0)),
+		matrix.transformPoint(new DOMPoint(width, 0)),
+		matrix.transformPoint(new DOMPoint(0, height)),
+		matrix.transformPoint(new DOMPoint(width, height))
+	];
+	const xs = corners.map((p) => p.x);
+	const ys = corners.map((p) => p.y);
+	const minX = Math.min(...xs);
+	const minY = Math.min(...ys);
+	const maxX = Math.max(...xs);
+	const maxY = Math.max(...ys);
+	return {
+		x: Math.round(minX),
+		y: Math.round(minY),
+		width: Math.max(0, Math.round(maxX - minX)),
+		height: Math.max(0, Math.round(maxY - minY))
+	};
+}
+const CompositorWebGPURenderer = async (args) => {
+	const { ctx, pass, targetView, targetTexture, targetWidth, targetHeight, encoder, props, drawChild } = args;
+	const { virtualMedia, fps, frame } = props;
+	const op = virtualMedia.operation;
+	if (!op) return;
+	pass.end();
+	if (op.op === "CompositorLayer") {
+		console.warn("CompositorWebGPURenderer called directly with legacy CompositorLayer operation. This is a bug.");
+		args.pass = ctx.renderer.beginFrame(encoder, targetView, {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 0
+		}, targetWidth, targetHeight, "load");
+		return;
+	}
+	if (op.op === "Compositor") {
+		const vop = op;
+		const sampleCount3d = vop.antialias3d === false ? 1 : 4;
+		const containerWidth = props.containerWidth ?? ctx.surface.width;
+		const containerHeight = props.containerHeight ?? ctx.surface.height;
+		const nativeWidth = vop.width ?? containerWidth;
+		const nativeHeight = vop.height ?? containerHeight;
+		const opacity = typeof vop.opacity === "number" ? vop.opacity : 1;
+		const isVideoMode = props.isVideoMode ?? (vop.mode === "Video" || vop.dataType === "Video" || virtualMedia?.metadata?.durationMs != null);
+		const inheritedSeekOffset = props.inheritedSeekOffset ?? 0;
+		const shiftedFrame = Math.max(0, frame != null && fps != null ? frame + Math.round(inheritedSeekOffset * fps) : frame ?? 0);
+		const compTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [...props.excludeTextures || [], targetTexture]);
+		const compView = compTex.createView();
+		const composeDuration = virtualMedia?.metadata?.durationMs ?? DEFAULT_DURATION_MS;
+		const durationSec = composeDuration / 1e3;
+		const { tl, targetsById } = compileTimeline(props.renderId, virtualMedia, {
+			fps: fps ?? 24,
+			durationSec
+		});
+		tl.seek(shiftedFrame / (fps ?? 24));
+		getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d).resetPools();
+		getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm").resetPools();
+		const clearColor = parseColor(vop.backgroundColor);
+		ctx.renderer.beginFrame(encoder, compView, clearColor, nativeWidth, nativeHeight, "clear").end();
+		let currentCompTex = compTex;
+		ctx.renderer.pushScissor({
+			x: 0,
+			y: 0,
+			width: nativeWidth,
+			height: nativeHeight
+		});
+		ctx.renderer.pushIdentity();
+		await initLayout();
+		const mediaDims = /* @__PURE__ */ new Map();
+		for (const vm of collectNodeOps(virtualMedia.children)) {
+			const lop = vm.operation;
+			if (lop.kind === "media") {
+				const meta = getActiveMediaMetadata(vm.children?.[0]);
+				if (meta?.width && meta?.height) mediaDims.set(lop.id, {
+					width: meta.width,
+					height: meta.height
+				});
+				else if (lop.dataType === "Caption" || (vm.children?.[0]?.operation)?.dataType === "Caption" || (vm.children?.[0]?.operation)?.srtText !== void 0) {
+					const lopWidth = targetsById[lop.id]?.width ?? lop.width;
+					const autoWidth = typeof lopWidth === "number" ? lopWidth : Math.round(nativeWidth * .8);
+					const lopHeight = targetsById[lop.id]?.height ?? lop.height;
+					let autoHeight = typeof lopHeight === "number" ? lopHeight : 160;
+					const contentVM = vm.children?.[0];
+					const src = resolveMediaSourceUrl(contentVM) ?? (contentVM?.operation)?.url ?? (contentVM?.operation)?.src ?? (contentVM?.operation)?.srtText ?? lop.src ?? lop.url;
+					if (typeof lopHeight !== "number" && src) try {
+						const captions = await srtLoader.load(src);
+						if (captions && captions.length > 0) autoHeight = measureMaxCaptionHeight(captions, lop, autoWidth);
+					} catch {}
+					mediaDims.set(lop.id, {
+						width: autoWidth,
+						height: autoHeight
+					});
+				}
+			}
+		}
+		const frameResolveNode = (vm) => {
+			const lop = vm?.operation ?? {};
+			const target = targetsById[lop.id];
+			const pick = (k) => target && target[k] !== void 0 ? target[k] : lop[k];
+			const node = {
+				...lop,
+				width: pick("width"),
+				height: pick("height"),
+				gap: pick("gap"),
+				padding: pick("padding"),
+				fontSize: pick("fontSize"),
+				letterSpacing: pick("letterSpacing")
+			};
+			node.children = (vm?.children ?? []).map(frameResolveNode);
+			if (!node.children.length) node.children = void 0;
+			return node;
+		};
+		const layoutRoots = () => (virtualMedia.children ?? []).map(frameResolveNode).filter((node) => node?.kind !== "camera" && node?.kind !== "light");
+		const memoTree = virtualMedia.children;
+		const memoKey = layoutKey(nativeWidth, nativeHeight, targetsById, mediaDims);
+		const memo = memoTree ? layoutMemo.get(memoTree) : void 0;
+		const { rects } = memo?.key === memoKey ? memo : await computeLayout({
+			layout: layoutRoots(),
+			viewport: {
+				width: nativeWidth,
+				height: nativeHeight
+			},
+			measure: (node, constraintWidth) => {
+				if (node.kind === "text") {
+					const textStyle = {
+						fontSize: node.fontSize ?? 48,
+						fontWeight: node.fontWeight,
+						fontFamily: node.fontFamily,
+						letterSpacing: node.letterSpacing,
+						lineHeight: node.lineHeight,
+						padding: node.padding
+					};
+					if (constraintWidth !== void 0) {
+						const isAuto = typeof node.width !== "number";
+						const wrapped$1 = measureText(node.text ?? "", {
+							...textStyle,
+							width: isAuto ? void 0 : constraintWidth,
+							keepNaturalWidth: true
+						});
+						return {
+							width: isAuto ? Math.ceil(wrapped$1.width) : Math.min(constraintWidth, Math.ceil(wrapped$1.width)),
+							height: Math.ceil(wrapped$1.height)
+						};
+					}
+					const natural = measureText(node.text ?? "", textStyle);
+					if (typeof node.width !== "number") return {
+						width: Math.ceil(natural.width),
+						height: Math.ceil(natural.height)
+					};
+					const wrapped = measureText(node.text ?? "", {
+						...textStyle,
+						width: node.width
+					});
+					return {
+						width: Math.ceil(wrapped.width),
+						height: Math.ceil(wrapped.height)
+					};
+				}
+				if (node.kind === "media") return mediaDims.get(node.id) ?? null;
+				return null;
+			}
+		});
+		if (memoTree && memo?.key !== memoKey) layoutMemo.set(memoTree, {
+			key: memoKey,
+			rects
+		});
+		const allNodeOps = collectNodeOps(virtualMedia.children ?? []);
+		const cameraVMs = allNodeOps.filter((vm) => vm.operation?.kind === "camera");
+		const cameraVM = isVideoMode ? cameraVMs.filter((vm) => {
+			const op$1 = vm.operation;
+			const start = op$1.startFrame ?? 0;
+			const dur = op$1.durationFrames;
+			return shiftedFrame >= start && (dur === void 0 || shiftedFrame < start + dur);
+		}).sort((a, b) => (b.operation.startFrame ?? 0) - (a.operation.startFrame ?? 0))[0] : cameraVMs[0];
+		const lightVMs = allNodeOps.filter((vm) => vm.operation?.kind === "light");
+		const has3DLayer = allNodeOps.some((vm) => {
+			const lop = vm.operation;
+			const target = lop.id ? targetsById[lop.id] : void 0;
+			return lop.kind !== "camera" && lop.kind !== "light" && (Boolean(target?.is3D ?? lop.is3D) || (target?.z ?? lop.z ?? 0) !== 0);
+		});
+		const is3DScene = Boolean(cameraVM || has3DLayer || lightVMs.length > 0);
+		let camera = null;
+		let dofEnabled = false;
+		const sceneLights = [];
+		if (is3DScene) {
+			const camOp = cameraVM?.operation;
+			const camStub = camOp?.id ? targetsById[camOp.id] : void 0;
+			const fov = camStub?.cameraFov ?? camOp?.lens?.fov ?? 50;
+			camera = Camera3D.createDefaultCamera(nativeWidth, nativeHeight, fov);
+			camera.near = camOp?.lens?.near ?? 1;
+			camera.far = camOp?.lens?.far ?? 5e4;
+			camera.zoom = camStub?.cameraZoom ?? camOp?.lens?.zoom ?? 1;
+			const defaultEye = camera.eye;
+			const defaultTarget = camera.target;
+			const eyeX = camStub?.cameraX ?? camStub?.x ?? camOp?.x ?? defaultEye[0];
+			const eyeY = camStub?.cameraY ?? camStub?.y ?? camOp?.y ?? defaultEye[1];
+			const eyeZ = camStub?.cameraZ ?? camStub?.z ?? camOp?.z ?? defaultEye[2];
+			camera.eye = [
+				eyeX,
+				eyeY,
+				eyeZ
+			];
+			if (camStub?.targetX !== void 0 || camStub?.targetY !== void 0 || camStub?.targetZ !== void 0 || camOp?.targetX !== void 0 || camOp?.targetY !== void 0 || camOp?.targetZ !== void 0) camera.target = [
+				camStub?.targetX ?? camOp?.targetX ?? defaultTarget[0],
+				camStub?.targetY ?? camOp?.targetY ?? defaultTarget[1],
+				camStub?.targetZ ?? camOp?.targetZ ?? defaultTarget[2]
+			];
+			else camera.target = [
+				eyeX,
+				eyeY,
+				0
+			];
+			const pitch = camStub?.cameraPitch ?? camOp?.pitch ?? 0;
+			const yaw = camStub?.cameraYaw ?? camOp?.yaw ?? 0;
+			const roll = camStub?.cameraRoll ?? camOp?.roll ?? 0;
+			if (pitch !== 0 || yaw !== 0 || roll !== 0) camera = Camera3D.applyOrientation(camera, pitch, yaw, roll);
+			const orbitAzimuth = camStub?.orbitAzimuth;
+			const orbitElevation = camStub?.orbitElevation;
+			const orbitRadius = camStub?.orbitRadius;
+			if (orbitAzimuth !== void 0 || orbitElevation !== void 0 || orbitRadius !== void 0) {
+				const radius = orbitRadius ?? Vector3Math.distance(camera.eye, camera.target);
+				camera.eye = Camera3D.orbit(camera.target, radius, orbitAzimuth ?? 0, orbitElevation ?? 0);
+			}
+			const shakeTrans = camStub?.shakeTranslation ?? (camOp?.shake?.enabled ? camOp?.shake?.translationAmplitude : 0) ?? 0;
+			const shakeRot = camStub?.shakeRotation ?? (camOp?.shake?.enabled ? camOp?.shake?.rotationAmplitude : 0) ?? 0;
+			if (shakeTrans > 0 || shakeRot > 0) {
+				const t = shiftedFrame / (fps ?? 24);
+				camera = Camera3D.applyCameraShake(camera, t, {
+					translationAmplitude: shakeTrans,
+					rotationAmplitude: shakeRot,
+					frequency: camOp?.shake?.frequency ?? 1.5,
+					octaves: camOp?.shake?.octaves ?? 3,
+					seed: camOp?.shake?.seed ?? 42
+				});
+			}
+			dofEnabled = Boolean(camOp?.dof?.enabled || camStub?.focusDistance !== void 0);
+			if (dofEnabled) {
+				camera.focusDistance = camStub?.focusDistance ?? camOp?.dof?.focusDistance ?? Vector3Math.distance(camera.eye, camera.target);
+				camera.fStop = camStub?.fStop ?? camOp?.dof?.fStop ?? 2.8;
+				camera.maxBlurRadius = camStub?.maxBlurRadius ?? camOp?.dof?.maxBlurRadius ?? 24;
+			}
+			for (const lvm of lightVMs) {
+				const lop = lvm.operation;
+				const targetId = lop.id || lop.inputHandleId;
+				const target = targetId ? targetsById[targetId] : void 0;
+				if (target?.hidden || lop.hidden) continue;
+				if (isVideoMode) {
+					const startFrame = lop.startFrame ?? 0;
+					const durationFrames = lop.durationFrames;
+					if (shiftedFrame < startFrame) continue;
+					if (durationFrames !== void 0 && shiftedFrame >= startFrame + durationFrames) continue;
+				}
+				const lightType = target?.lightType ?? lop.lightType ?? "point";
+				const color = parseColor(target?.color ?? lop.color ?? "#ffffff");
+				const intensity = target?.intensity ?? lop.intensity ?? 1;
+				const x = target?.x ?? lop.x ?? 0;
+				const y = target?.y ?? lop.y ?? 0;
+				const z = target?.z ?? lop.z ?? 0;
+				const targetX = target?.targetX ?? lop.targetX ?? 0;
+				const targetY = target?.targetY ?? lop.targetY ?? 0;
+				const targetZ = target?.targetZ ?? lop.targetZ ?? 0;
+				const radius = target?.radius ?? lop.radius ?? 1e3;
+				const angle = target?.angle ?? lop.angle ?? 45;
+				const penumbra = target?.penumbra ?? lop.penumbra ?? .2;
+				const decay = target?.decay ?? lop.decay ?? 1;
+				sceneLights.push({
+					type: lightType,
+					color,
+					intensity,
+					position: [
+						x,
+						y,
+						z
+					],
+					target: [
+						targetX,
+						targetY,
+						targetZ
+					],
+					radius,
+					angle,
+					penumbra,
+					decay
+				});
+			}
+		}
+		const pending3DItems = [];
+		const flush3DPass = (curTex, curView, curExcludes) => {
+			if (pending3DItems.length === 0 || !camera) return {
+				finalTex: curTex,
+				finalView: curView
+			};
+			const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+			for (const item of pending3DItems) if (item.kind === "mesh" && item.opts.audioDeform) item.meshBuffers = r3d.deformMesh(encoder, item.mesh, item.opts.audioDeform);
+			const itemTextures = pending3DItems.map((q) => q.kind === "quad" ? q.texture : q.texture).filter((t) => Boolean(t));
+			const scene3dTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
+				curTex,
+				targetTexture,
+				...curExcludes,
+				...itemTextures
+			]);
+			const scene3dView = scene3dTex.createView();
+			let linearDepthTex;
+			let linearDepthView;
+			if (dofEnabled) {
+				linearDepthTex = r3d.getOrCreateLinearDepthTexture(nativeWidth, nativeHeight);
+				linearDepthView = linearDepthTex.createView();
+			}
+			const { pass: pass3d, cameraBindGroup, cameraBuffer, lightsBindGroup } = r3d.beginPass(encoder, scene3dView, nativeWidth, nativeHeight, camera, "clear", {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 0
+			}, linearDepthView, sceneLights);
+			for (const item of pending3DItems) if (item.kind === "quad") r3d.drawTextureQuad(pass3d, cameraBindGroup, lightsBindGroup, item.texture, item.opts, dofEnabled);
+			else if (item.kind === "slug") r3d.drawSlugText(pass3d, cameraBindGroup, lightsBindGroup, item.batches, item.opts, item.stackBase, dofEnabled);
+			else if (item.kind === "mesh") r3d.drawMesh3D(pass3d, cameraBindGroup, lightsBindGroup, item.meshBuffers ?? item.mesh, item.texture, item.opts, dofEnabled);
+			pass3d.end();
+			let final3dTex = scene3dTex;
+			if (dofEnabled && linearDepthTex) {
+				const dofResultTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
+					curTex,
+					targetTexture,
+					scene3dTex,
+					...curExcludes
+				]);
+				r3d.applyDepthOfField(encoder, scene3dTex, linearDepthTex, dofResultTex.createView(), cameraBuffer);
+				final3dTex = dofResultTex;
+			}
+			const nextTex = ctx.renderer.composite(encoder, curTex, final3dTex, "normal", [targetTexture, ...curExcludes]);
+			pending3DItems.length = 0;
+			return {
+				finalTex: nextTex,
+				finalView: nextTex.createView()
+			};
+		};
+		let nodeIndex = 0;
+		const renderNodeTree = async (vms, initialTex, initialView, excludes, accumulatedOpacity = 1, parentMatrix = new DOMMatrix(), parentRect = null, targetW = nativeWidth, targetH = nativeHeight, parent3DMatrix = null, isRootScene = false) => {
+			const sorted = [...vms].sort((a, b) => {
+				return (a.operation?.zIndex ?? 0) - (b.operation?.zIndex ?? 0);
+			});
+			let activeTex = initialTex;
+			let activeView = initialView;
+			let activeExcludes = excludes;
+			for (const child of sorted) {
+				const lop = child.operation;
+				if (lop.kind === "camera" || lop.kind === "light") continue;
+				const targetId = lop.id || lop.inputHandleId;
+				const target = targetId ? targetsById[targetId] : void 0;
+				const isChild3D = Boolean(target?.is3D ?? lop.is3D) || Boolean(camera && ((target?.z ?? lop.z ?? 0) !== 0 || lop.is3D)) || Boolean(parent3DMatrix);
+				if (isRootScene && !isChild3D && pending3DItems.length > 0) {
+					const flushed = flush3DPass(activeTex, activeView, activeExcludes);
+					if (flushed.finalTex !== activeTex) activeExcludes = [...activeExcludes, flushed.finalTex];
+					activeTex = flushed.finalTex;
+					activeView = flushed.finalView;
+				}
+				if (lop.op !== "CompositorLayer") {
+					await drawChild(child, {
+						containerWidth: targetW,
+						containerHeight: targetH,
+						renderId: `${props.renderId}-c${nodeIndex}-${lop.op}`,
+						fps,
+						isVideoMode,
+						frame: shiftedFrame,
+						excludeTextures: [targetTexture, ...activeExcludes]
+					}, activeView, activeTex, targetW, targetH);
+					continue;
+				}
+				nodeIndex += 1;
+				const res = await renderLayerVM(child, nodeIndex, activeTex, activeView, activeExcludes, accumulatedOpacity, parentMatrix, parentRect, targetW, targetH, parent3DMatrix, isRootScene);
+				if (res) {
+					if (res.finalTex !== activeTex) activeExcludes = [...activeExcludes, res.finalTex];
+					activeTex = res.finalTex;
+					activeView = res.finalView;
+				}
+			}
+			if (isRootScene && pending3DItems.length > 0) {
+				const flushed = flush3DPass(activeTex, activeView, activeExcludes);
+				if (flushed.finalTex !== activeTex) activeExcludes = [...activeExcludes, flushed.finalTex];
+				activeTex = flushed.finalTex;
+				activeView = flushed.finalView;
+			}
+			return {
+				finalTex: activeTex,
+				finalView: activeView
+			};
+		};
+		const renderLayerVM = async (nodeVM, i, destTex, destView, baseExcludes, accumulatedOpacity, parentMatrix, parentRect, targetW = nativeWidth, targetH = nativeHeight, parent3DMatrix = null, isRootScene = false) => {
+			const excludes = [...baseExcludes, ...pending3DItems.map((q) => q.texture).filter((t) => Boolean(t))];
+			const lop = nodeVM.operation;
+			if (lop.kind === "camera" || lop.kind === "light") return;
+			const targetId = lop.id || lop.inputHandleId;
+			const target = targetId ? targetsById[targetId] : void 0;
+			if (target?.hidden || lop.hidden) return;
+			const kind = lop.kind;
+			const isContainer = kind === "flex" || kind === "block" || kind === "box";
+			if (isVideoMode) {
+				const startFrame = lop.startFrame ?? 0;
+				const durationFrames = lop.durationFrames;
+				if (shiftedFrame < startFrame) return;
+				if (durationFrames !== void 0 && shiftedFrame >= startFrame + durationFrames) return;
+			}
+			if (kind === "model3d") {
+				const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+				let modelSrc = lop.modelData ?? lop.src;
+				if (!modelSrc && lop.text3dOptions) {
+					const tOpts = lop.text3dOptions;
+					const font = (tOpts.fontFamily ? SlugFontCache.getParsed(tOpts.fontFamily) : null) ?? SlugFontCache.getParsed("Inter") ?? SlugFontCache.getParsed("Unbounded") ?? SlugFontCache.getFirstParsed();
+					if (font) {
+						modelSrc = generateExtrudedTextGeometry({
+							...tOpts,
+							font
+						}).modelData;
+						lop.modelData = modelSrc;
+					}
+				}
+				if (!modelSrc) return;
+				let model;
+				try {
+					model = typeof modelSrc === "object" && modelSrc !== null && "meshes" in modelSrc ? modelSrc : r3d.loadModel(modelSrc, lop.modelFormat ?? "auto", {
+						center: lop.center,
+						normalizeSize: lop.normalizeSize
+					});
+				} catch (err) {
+					console.error("Failed to load 3D model:", err);
+					return;
+				}
+				if (!model || model.meshes.length === 0) return;
+				const posX = target?.x ?? lop.x ?? 0;
+				const posY = target?.y ?? lop.y ?? 0;
+				const posZ = target?.z ?? lop.z ?? 0;
+				const rotX = target?.rotateX ?? lop.rotateX ?? 0;
+				const rotY = target?.rotateY ?? lop.rotateY ?? 0;
+				const rotZ = (target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : target?.rotation ?? lop.rotation ?? 0;
+				const sc = target?.scale ?? lop.scale ?? 1;
+				const scX = (target?.scaleX ?? lop.scaleX ?? 1) * sc;
+				const scY = (target?.scaleY ?? lop.scaleY ?? 1) * sc;
+				const scZ = (target?.scaleZ ?? lop.scaleZ ?? 1) * sc;
+				let localM = Matrix4Math.identity();
+				localM = Matrix4Math.multiply(localM, Matrix4Math.translate(posX, posY, posZ));
+				const rxRad = rotX * Math.PI / 180;
+				const ryRad = rotY * Math.PI / 180;
+				const rzRad = rotZ * Math.PI / 180;
+				if (rzRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateZ(rzRad));
+				if (ryRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateY(ryRad));
+				if (rxRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateX(rxRad));
+				localM = Matrix4Math.multiply(localM, Matrix4Math.scale(scX, scY, scZ));
+				const finalModelMatrix = parent3DMatrix ? Matrix4Math.multiply(parent3DMatrix, localM) : localM;
+				const colorParsed = target?.colorTint || target?.color || lop.colorTint || lop.color ? parseColor(target?.colorTint ?? target?.color ?? lop.colorTint ?? lop.color) : void 0;
+				const colorTint = colorParsed ? [
+					colorParsed.r,
+					colorParsed.g,
+					colorParsed.b,
+					colorParsed.a
+				] : [
+					1,
+					1,
+					1,
+					1
+				];
+				const modelOpacity = (target?.opacity ?? lop.opacity ?? 1) * accumulatedOpacity;
+				let skinningMatrices;
+				const animProgress = target?.animationProgress ?? lop.animationProgress ?? 0;
+				const animTime = target?.animationTime ?? lop.animationTime ?? 0;
+				const animSpeed = target?.animationSpeed ?? lop.animationSpeed ?? 1;
+				const clip = (lop.animationName ? model.animations.find((a) => a.name === lop.animationName) : void 0) ?? model.animations[0];
+				let clipSec = 0;
+				if (clip && clip.duration > 0) {
+					clipSec = animProgress > 0 ? animProgress * clip.duration : animTime + (shiftedFrame ?? 0) / (fps || 30) * animSpeed;
+					if (lop.loop ?? true) clipSec %= clip.duration;
+				}
+				const sceneRoot = Matrix4Math.multiply(finalModelMatrix, model.rootTransform ?? Matrix4Math.identity());
+				const posed = model.nodes ? poseNodes(model, clip, clipSec) : void 0;
+				const skinCache = /* @__PURE__ */ new Map();
+				const placeMesh = (mesh) => {
+					if (!posed) return { matrix: sceneRoot };
+					if (mesh.skin !== void 0) {
+						let joints = skinCache.get(mesh.skin);
+						if (!joints) {
+							joints = jointMatrices(model, mesh.skin, posed);
+							skinCache.set(mesh.skin, joints);
+						}
+						return {
+							matrix: sceneRoot,
+							joints
+						};
+					}
+					if (mesh.node !== void 0) return { matrix: Matrix4Math.multiply(sceneRoot, posed[mesh.node]) };
+					return { matrix: sceneRoot };
+				};
+				if (!posed && clip && clip.duration > 0) {
+					const currentSec = clipSec;
+					if (model.skeleton && model.skeleton.bones.length > 0) {
+						const numBones = Math.min(128, model.skeleton.bones.length);
+						skinningMatrices = new Float32Array(2048);
+						for (let b = 0; b < 128; b++) {
+							skinningMatrices[b * 16] = 1;
+							skinningMatrices[b * 16 + 5] = 1;
+							skinningMatrices[b * 16 + 10] = 1;
+							skinningMatrices[b * 16 + 15] = 1;
+						}
+						for (const track of clip.tracks) {
+							const boneIdx = model.skeleton.boneIndicesByName[track.nodeName];
+							if (boneIdx !== void 0 && boneIdx < numBones) {
+								const times = track.times;
+								let sampleIdx = 0;
+								for (let k = 0; k < times.length - 1; k++) if (currentSec >= times[k] && currentSec <= times[k + 1]) {
+									sampleIdx = k;
+									break;
+								}
+								const t0 = times[sampleIdx] ?? 0;
+								const t1 = times[sampleIdx + 1] ?? t0;
+								const alpha = t1 > t0 ? (currentSec - t0) / (t1 - t0) : 0;
+								if (track.translations) {
+									const x0 = track.translations[sampleIdx * 3] ?? 0;
+									const y0 = track.translations[sampleIdx * 3 + 1] ?? 0;
+									const z0 = track.translations[sampleIdx * 3 + 2] ?? 0;
+									const x1 = track.translations[(sampleIdx + 1) * 3] ?? x0;
+									const y1 = track.translations[(sampleIdx + 1) * 3 + 1] ?? y0;
+									const z1 = track.translations[(sampleIdx + 1) * 3 + 2] ?? z0;
+									const curX = x0 + (x1 - x0) * alpha;
+									const curY = y0 + (y1 - y0) * alpha;
+									const curZ = z0 + (z1 - z0) * alpha;
+									const boneMat = Matrix4Math.translate(curX, curY, curZ);
+									const bone = model.skeleton.bones[boneIdx];
+									const skinMat = bone ? Matrix4Math.multiply(boneMat, bone.inverseBindMatrix) : boneMat;
+									skinningMatrices.set(skinMat, boneIdx * 16);
+								}
+							}
+						}
+					}
+				}
+				const isBlend = (m) => m.materialName ? model.materials[m.materialName]?.alphaMode === "blend" : false;
+				const drawOrder = [...model.meshes].sort((a, b) => Number(isBlend(a)) - Number(isBlend(b)));
+				for (const mesh of drawOrder) {
+					const mat = mesh.materialName ? model.materials[mesh.materialName] : void 0;
+					const placed = placeMesh(mesh);
+					const meshSkin = placed.joints ?? skinningMatrices;
+					let meshColorTint;
+					if (colorParsed) if (mat?.diffuseColor) meshColorTint = [
+						mat.diffuseColor[0] * colorTint[0],
+						mat.diffuseColor[1] * colorTint[1],
+						mat.diffuseColor[2] * colorTint[2],
+						(mat.diffuseColor[3] ?? 1) * colorTint[3]
+					];
+					else meshColorTint = colorTint;
+					else if (mat?.diffuseColor) meshColorTint = mat.diffuseColor;
+					else meshColorTint = [
+						.8,
+						.8,
+						.85,
+						1
+					];
+					const audioDeformConfig = target?.audioDeform ?? lop.audioDeform;
+					let meshAudioDeform;
+					if (audioDeformConfig) {
+						const currentSec = (shiftedFrame ?? 0) / (fps || 30);
+						const timeMs = currentSec * 1e3;
+						let latentBuffer = audioDeformConfig.latentBuffer;
+						if (!latentBuffer && audioDeformConfig.audioBuffer) latentBuffer = audioDeformConfig.audioBuffer;
+						if (!latentBuffer) {
+							const directAudio = audioDeformConfig.audioData;
+							if (directAudio) {
+								const cacheKey = (lop.id ?? "audio-mesh") + "-direct-audio";
+								let trackCache = audioTrackLatentCache.get(cacheKey);
+								if (!trackCache) {
+									const chs = Array.isArray(directAudio) ? directAudio : directAudio.channels;
+									const sRate = Array.isArray(directAudio) ? 48e3 : directAudio.sampleRate;
+									const totalF = Math.max(10, Math.ceil((chs[0]?.length ?? 0) / sRate * (fps || 30)) + 10);
+									trackCache = new AudioLatentTrackCache(chs, sRate, fps || 30, totalF);
+									audioTrackLatentCache.set(cacheKey, trackCache);
+								}
+								latentBuffer = trackCache.getGpuBuffer(ctx.device, shiftedFrame ?? 0);
+							}
+						}
+						if (!latentBuffer && audioDeformConfig.audioTrackId) {
+							const trackId = audioDeformConfig.audioTrackId;
+							let foundAudioUrl;
+							const searchVms = (list) => {
+								for (const v of list) {
+									const op$1 = v.operation;
+									if (op$1) {
+										if (op$1.id === trackId || op$1.inputHandleId === trackId) {
+											foundAudioUrl = op$1.inputHandleId || op$1.src || op$1.url;
+											return;
+										}
+										if (v.children) searchVms(v.children);
+									}
+								}
+							};
+							if (virtualMedia.children) searchVms(virtualMedia.children);
+							if (!foundAudioUrl && (trackId.endsWith(".mp3") || trackId.endsWith(".wav") || trackId.endsWith(".ogg"))) foundAudioUrl = trackId;
+							if (foundAudioUrl) try {
+								let trackCache = audioTrackLatentCache.get(foundAudioUrl);
+								if (!trackCache) {
+									const decoded = await decodeAudioSource(foundAudioUrl);
+									if (decoded && decoded.channels.length > 0) {
+										const sRate = decoded.sampleRate || 48e3;
+										const ch0Len = decoded.channels[0]?.length ?? 0;
+										const durationSec$1 = decoded.durationSec ?? ch0Len / sRate;
+										const totalF = Math.max(10, Math.ceil(durationSec$1 * (fps || 30)) + 10);
+										trackCache = new AudioLatentTrackCache(decoded.channels, sRate, fps || 30, totalF);
+										audioTrackLatentCache.set(foundAudioUrl, trackCache);
+									}
+								}
+								if (trackCache) latentBuffer = trackCache.getGpuBuffer(ctx.device, shiftedFrame ?? 0);
+							} catch (err) {
+								console.warn("[webgpu-renderer] Failed to decode audio for deformWithAudio:", err);
+							}
+						}
+						if (latentBuffer) {
+							let amplitudeMultiplier = audioDeformConfig.amplitudeMultiplier ?? 1;
+							if (typeof amplitudeMultiplier !== "number" && typeof amplitudeMultiplier?.get === "function") {
+								const frameCtx = {
+									frame: shiftedFrame ?? 0,
+									fps: fps || 30,
+									time: currentSec,
+									duration: 0,
+									durationMs: 0,
+									progress: 0,
+									deltaTime: 1 / (fps || 30)
+								};
+								amplitudeMultiplier = Number(amplitudeMultiplier.get(frameCtx));
+							} else if (typeof amplitudeMultiplier !== "number" && typeof amplitudeMultiplier?.value === "number") amplitudeMultiplier = amplitudeMultiplier.value;
+							meshAudioDeform = {
+								config: {
+									...audioDeformConfig,
+									amplitudeMultiplier: Number.isFinite(amplitudeMultiplier) ? amplitudeMultiplier : 1
+								},
+								latentBuffer,
+								timeMs,
+								sampleRate: 48e3
+							};
+						}
+					}
+					const meshOpts = {
+						modelMatrix: placed.matrix,
+						opacity: modelOpacity * (mat?.opacity ?? 1),
+						colorTint: meshColorTint,
+						twoSided: target?.twoSided ?? lop.twoSided ?? mat?.twoSided ?? true,
+						wireframe: Boolean(target?.wireframe ?? lop.wireframe),
+						isSkinned: Boolean(meshSkin || mesh.jointIndices && mesh.jointWeights),
+						skinningMatrices: meshSkin,
+						material: target?.material ?? lop.material ?? mat?.shading ?? "lit",
+						shadeColor: mat?.shadeColor,
+						alphaCutoff: mat?.alphaCutoff,
+						textureWrap: mat?.textureWrap,
+						shininess: target?.shininess ?? lop.shininess ?? mat?.shininess ?? 32,
+						roughness: target?.roughness ?? lop.roughness ?? mat?.roughness,
+						specularIntensity: target?.specularIntensity ?? lop.specularIntensity ?? .5,
+						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity ?? 1,
+						metallic: target?.metallic ?? lop.metallic ?? mat?.metallic,
+						audioDeform: meshAudioDeform
+					};
+					pending3DItems.push({
+						kind: "mesh",
+						mesh,
+						texture: mat ? await r3d.materialTexture(mat) : void 0,
+						opts: meshOpts
+					});
+				}
+				return {
+					finalTex: destTex,
+					finalView: destView
+				};
+			}
+			const rect = rects[lop.id];
+			if (!rect) {
+				if (isContainer) return await renderNodeTree(nodeVM.children ?? [], destTex, destView, excludes, accumulatedOpacity, parentMatrix, parentRect, targetW, targetH, parent3DMatrix, isRootScene);
+				return;
+			}
+			const baseX = lop.x ?? 0;
+			const baseY = lop.y ?? 0;
+			const sampledX = target?.x ?? baseX;
+			const sampledY = target?.y ?? baseY;
+			let localX = 0;
+			let localY = 0;
+			if (parentRect) {
+				const localLayoutX = rect.x - parentRect.x;
+				const localLayoutY = rect.y - parentRect.y;
+				localX = localLayoutX + (sampledX - baseX);
+				localY = localLayoutY + (sampledY - baseY);
+			} else {
+				localX = rect.x + (sampledX - baseX);
+				localY = rect.y + (sampledY - baseY);
+			}
+			const scale$1 = target?.scale ?? lop.scale ?? 1;
+			const rotation = target?.rotation ?? lop.rotation ?? 0;
+			const layerOpacity = (target?.opacity ?? lop.opacity ?? 1) * accumulatedOpacity;
+			const rawAnimators = target?.animators ?? lop.animators;
+			const isPathText = kind === "text" && Boolean(lop.pathOptions || target?.pathOptions);
+			const hasKineticAnimators = kind === "text" && Array.isArray(rawAnimators) && rawAnimators.length > 0;
+			const hasFormation = kind === "text" && Array.isArray(rawAnimators) && rawAnimators.some((a) => {
+				const anim = a;
+				return anim?.props?.formation !== void 0 || anim?.formation !== void 0;
+			});
+			let padX = 0;
+			let padY = 0;
+			if (hasFormation) {
+				let formationRadius = 0;
+				let formationPitch = 0;
+				for (const a of rawAnimators) {
+					const anim = a;
+					const f = anim?.props?.formation ?? anim?.formation;
+					if (f) {
+						if (typeof f.radius === "number") formationRadius = Math.max(formationRadius, f.radius);
+						if (typeof f.pitch === "number") formationPitch = Math.max(formationPitch, f.pitch);
+					}
+				}
+				padX = Math.max(160, Math.ceil(formationRadius + 100));
+				padY = Math.max(100, Math.ceil(formationRadius + formationPitch * 15 + 100));
+			} else if (!isPathText && hasKineticAnimators) {
+				padX = Math.max(80, Math.ceil(rect.width * .2));
+				padY = Math.max(50, Math.ceil(rect.height * .5));
+			}
+			const layerW = isPathText ? targetW : rect.width + padX * 2;
+			const layerH = isPathText ? targetH : rect.height + padY * 2;
+			if (!isPathText && hasKineticAnimators) {
+				localX -= padX;
+				localY -= padY;
+			}
+			const anchorX = lop.anchorX ?? .5;
+			const anchorY = lop.anchorY ?? .5;
+			const localMatrix = toDOMMatrix(buildLayerMatrix({
+				x: localX,
+				y: localY,
+				width: layerW,
+				height: layerH,
+				rotation,
+				scale: scale$1,
+				anchorX: isPathText ? anchorX * rect.width / layerW : anchorX,
+				anchorY: isPathText ? anchorY * rect.height / layerH : anchorY
+			}));
+			const layerMatrix = parentMatrix.multiply(localMatrix);
+			const blendMode = lop.blendMode || "normal";
+			let activeTex = destTex;
+			let activeView = destView;
+			const is3D = has3DTransform(target, lop);
+			const rotateX = target?.rotateX ?? lop.rotateX ?? 0;
+			const rotateY = target?.rotateY ?? lop.rotateY ?? 0;
+			const rotateZ = target?.rotateZ ?? lop.rotateZ ?? 0;
+			const translateZ = target?.translateZ ?? lop.translateZ ?? 0;
+			const perspective = target?.perspective ?? lop.perspective ?? 0;
+			const perspectiveOriginX = target?.perspectiveOriginX ?? lop.perspectiveOriginX ?? lop.anchorX ?? .5;
+			const perspectiveOriginY = target?.perspectiveOriginY ?? lop.perspectiveOriginY ?? lop.anchorY ?? .5;
+			const backfaceVisibility = target?.backfaceVisibility ?? lop.backfaceVisibility ?? "visible";
+			let quad3D = null;
+			if (is3D) {
+				const m3d = Transform3DMath.buildLayer3DMatrix({
+					x: localX,
+					y: localY,
+					width: layerW,
+					height: layerH,
+					rotateXDeg: rotateX,
+					rotateYDeg: rotateY,
+					rotateZDeg: rotateZ !== 0 ? rotateZ : rotation,
+					scaleX: scale$1,
+					scaleY: scale$1,
+					perspectivePx: perspective,
+					originXRatio: perspectiveOriginX,
+					originYRatio: perspectiveOriginY,
+					translateZPx: translateZ
+				});
+				let q = Transform3DMath.projectRectangleCorners(m3d, layerW, layerH);
+				if (!parentMatrix.isIdentity) q = {
+					topLeft: parentMatrix.transformPoint(new DOMPoint(q.topLeft.x, q.topLeft.y)),
+					topRight: parentMatrix.transformPoint(new DOMPoint(q.topRight.x, q.topRight.y)),
+					bottomLeft: parentMatrix.transformPoint(new DOMPoint(q.bottomLeft.x, q.bottomLeft.y)),
+					bottomRight: parentMatrix.transformPoint(new DOMPoint(q.bottomRight.x, q.bottomRight.y))
+				};
+				if (backfaceVisibility === "hidden" && Transform3DMath.computeSignedArea(q) < 0) return;
+				quad3D = q;
+			}
+			const isTrue3D = Boolean(target?.is3D ?? lop.is3D) || Boolean(camera && ((target?.z ?? lop.z ?? 0) !== 0 || lop.is3D));
+			if (isContainer) {
+				if (lop.transformStyle === "preserve-3d" && isTrue3D) {
+					let current3DMatrix = Matrix4Math.identity();
+					const containerX = parent3DMatrix !== null ? target?.x ?? lop.x ?? 0 : target?.x ?? lop.x ?? localX + layerW * .5;
+					const containerY = parent3DMatrix !== null ? target?.y ?? lop.y ?? 0 : target?.y ?? lop.y ?? localY + layerH * .5;
+					const containerZ = target?.z ?? lop.z ?? 0;
+					current3DMatrix = Matrix4Math.multiply(current3DMatrix, Matrix4Math.translate(containerX, containerY, containerZ));
+					const rxRad = (target?.rotateX ?? lop.rotateX ?? 0) * Math.PI / 180;
+					const ryRad = (target?.rotateY ?? lop.rotateY ?? 0) * Math.PI / 180;
+					const rzRad = ((target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation) * (Math.PI / 180);
+					if (rzRad !== 0) current3DMatrix = Matrix4Math.multiply(current3DMatrix, Matrix4Math.rotateZ(rzRad));
+					if (ryRad !== 0) current3DMatrix = Matrix4Math.multiply(current3DMatrix, Matrix4Math.rotateY(ryRad));
+					if (rxRad !== 0) current3DMatrix = Matrix4Math.multiply(current3DMatrix, Matrix4Math.rotateX(rxRad));
+					const csX = (target?.scaleX ?? lop.scaleX ?? 1) * scale$1;
+					const csY = (target?.scaleY ?? lop.scaleY ?? 1) * scale$1;
+					const csZ = (target?.scaleZ ?? lop.scaleZ ?? 1) * scale$1;
+					if (csX !== 1 || csY !== 1 || csZ !== 1) current3DMatrix = Matrix4Math.multiply(current3DMatrix, Matrix4Math.scale(csX, csY, csZ));
+					if (parent3DMatrix) current3DMatrix = Matrix4Math.multiply(parent3DMatrix, current3DMatrix);
+					if (nodeVM.children && nodeVM.children.length > 0) {
+						const res = await renderNodeTree(nodeVM.children, activeTex, activeView, excludes, layerOpacity, new DOMMatrix(), null, layerW, layerH, current3DMatrix, false);
+						activeTex = res.finalTex;
+						activeView = res.finalView;
+					}
+					return {
+						finalTex: activeTex,
+						finalView: activeView
+					};
+				}
+				if (isTrue3D) {
+					const texW$1 = Math.max(1, Math.ceil(layerW));
+					const texH$1 = Math.max(1, Math.ceil(layerH));
+					const groupExcludes$1 = [
+						activeTex,
+						targetTexture,
+						...excludes,
+						...pending3DItems.map((q) => q.texture).filter((t) => Boolean(t))
+					];
+					const groupTex$1 = ctx.renderer.getTemporaryTexture(texW$1, texH$1, groupExcludes$1);
+					const groupView$1 = groupTex$1.createView();
+					ctx.renderer.beginFrame(encoder, groupView$1, {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, texW$1, texH$1, "clear").end();
+					const br$2 = Math.min(lop.borderRadius ?? lop.strokeRadius ?? 0, layerW / 2, layerH / 2);
+					if (shouldPaintContainerBackground(kind, lop.background)) {
+						const bgPass = ctx.renderer.beginFrame(encoder, groupView$1, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, texW$1, texH$1, "load");
+						ctx.renderer.drawRect(bgPass, {
+							x: 0,
+							y: 0,
+							width: layerW,
+							height: layerH
+						}, lop.background, 0, { opacity: 1 });
+						bgPass.end();
+					}
+					let activeGroupTex$1 = groupTex$1;
+					let activeGroupView$1 = groupView$1;
+					if (nodeVM.children && nodeVM.children.length > 0) {
+						const res = await renderNodeTree(nodeVM.children, groupTex$1, groupView$1, [groupTex$1, ...groupExcludes$1], 1, new DOMMatrix(), rect, texW$1, texH$1, null, false);
+						activeGroupTex$1 = res.finalTex;
+						activeGroupView$1 = res.finalView;
+					}
+					const borderResult$2 = !isTrue3D && lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br$2, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", [activeGroupTex$1, ...groupExcludes$1]) : null;
+					if (borderResult$2) {
+						const borderPass = ctx.renderer.beginFrame(encoder, activeGroupView$1, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, texW$1, texH$1, "load");
+						ctx.renderer.drawTexture(borderPass, borderResult$2.borderTex, {
+							x: borderResult$2.ox,
+							y: borderResult$2.oy,
+							width: borderResult$2.ow,
+							height: borderResult$2.oh
+						}, { opacity: 1 });
+						borderPass.end();
+					}
+					let modelMatrix;
+					if (parent3DMatrix) {
+						let localM = Matrix4Math.identity();
+						const childX = target?.x ?? lop.x ?? 0;
+						const childY = target?.y ?? lop.y ?? 0;
+						const childZ = target?.z ?? lop.z ?? 0;
+						localM = Matrix4Math.multiply(localM, Matrix4Math.translate(childX, childY, childZ));
+						const rxRad = (target?.rotateX ?? lop.rotateX ?? 0) * Math.PI / 180;
+						const ryRad = (target?.rotateY ?? lop.rotateY ?? 0) * Math.PI / 180;
+						const rzRad = ((target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation) * (Math.PI / 180);
+						if (rzRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateZ(rzRad));
+						if (ryRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateY(ryRad));
+						if (rxRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateX(rxRad));
+						const sx = layerW * scale$1;
+						const sy = layerH * scale$1;
+						const sz = target?.scaleZ ?? lop.scaleZ ?? 1;
+						localM = Matrix4Math.multiply(localM, Matrix4Math.scale(sx, sy, sz));
+						const ax = lop.anchorX ?? .5;
+						const ay = lop.anchorY ?? .5;
+						const pivotX = .5 - ax;
+						const pivotY = .5 - ay;
+						if (pivotX !== 0 || pivotY !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.translate(pivotX, pivotY, 0));
+						modelMatrix = Matrix4Math.multiply(parent3DMatrix, localM);
+					}
+					const quadOpts = {
+						position: [
+							localX + layerW * .5,
+							localY + layerH * .5,
+							target?.z ?? lop.z ?? 0
+						],
+						width: layerW,
+						height: layerH,
+						textureExtent: [layerW / activeGroupTex$1.width, layerH / activeGroupTex$1.height],
+						rotation: [
+							target?.rotateX ?? lop.rotateX ?? 0,
+							target?.rotateY ?? lop.rotateY ?? 0,
+							(target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation
+						],
+						scale: [
+							scale$1,
+							scale$1,
+							target?.scaleZ ?? lop.scaleZ ?? 1
+						],
+						anchor: [lop.anchorX ?? .5, lop.anchorY ?? .5],
+						borderRadius: br$2,
+						borderWidth: lop.borderWidth,
+						borderColor: lop.borderColor,
+						opacity: layerOpacity,
+						twoSided: target?.twoSided ?? lop.twoSided ?? true,
+						material: target?.material ?? lop.material,
+						shininess: target?.shininess ?? lop.shininess,
+						roughness: target?.roughness ?? lop.roughness,
+						specularIntensity: target?.specularIntensity ?? lop.specularIntensity,
+						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
+						metallic: target?.metallic ?? lop.metallic,
+						...modelMatrix && { modelMatrix }
+					};
+					pending3DItems.push({
+						kind: "quad",
+						texture: activeGroupTex$1,
+						opts: quadOpts
+					});
+					return {
+						finalTex: activeTex,
+						finalView: activeView
+					};
+				}
+				if (is3D && quad3D) {
+					const texW$1 = Math.max(1, Math.ceil(layerW));
+					const texH$1 = Math.max(1, Math.ceil(layerH));
+					const groupExcludes$1 = [
+						activeTex,
+						targetTexture,
+						...excludes
+					];
+					const groupTex$1 = ctx.renderer.getTemporaryTexture(texW$1, texH$1, groupExcludes$1);
+					const groupView$1 = groupTex$1.createView();
+					ctx.renderer.beginFrame(encoder, groupView$1, {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, texW$1, texH$1, "clear").end();
+					const br$2 = Math.min(lop.borderRadius ?? lop.strokeRadius ?? 0, layerW / 2, layerH / 2);
+					if (shouldPaintContainerBackground(kind, lop.background)) {
+						const bgPass = ctx.renderer.beginFrame(encoder, groupView$1, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, texW$1, texH$1, "load");
+						ctx.renderer.drawRect(bgPass, {
+							x: 0,
+							y: 0,
+							width: layerW,
+							height: layerH
+						}, lop.background, br$2, { opacity: 1 });
+						bgPass.end();
+					}
+					let activeGroupTex$1 = groupTex$1;
+					let activeGroupView$1 = groupView$1;
+					if (nodeVM.children && nodeVM.children.length > 0) {
+						const res = await renderNodeTree(nodeVM.children, groupTex$1, groupView$1, [groupTex$1, ...groupExcludes$1], 1, new DOMMatrix(), rect, texW$1, texH$1, null, false);
+						activeGroupTex$1 = res.finalTex;
+						activeGroupView$1 = res.finalView;
+					}
+					const borderResult$2 = lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br$2, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", [activeGroupTex$1, ...groupExcludes$1]) : null;
+					if (borderResult$2) {
+						const borderPass = ctx.renderer.beginFrame(encoder, activeGroupView$1, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, texW$1, texH$1, "load");
+						ctx.renderer.drawTexture(borderPass, borderResult$2.borderTex, {
+							x: borderResult$2.ox,
+							y: borderResult$2.oy,
+							width: borderResult$2.ow,
+							height: borderResult$2.oh
+						}, { opacity: 1 });
+						borderPass.end();
+					}
+					const container3DShutter = target?.motionBlurShutter ?? lop.motionBlurShutter ?? 0;
+					if (container3DShutter > 0 && fps && shiftedFrame !== void 0) {
+						const currentT = shiftedFrame / fps;
+						const prevT = (shiftedFrame - 1) / fps;
+						tl.seek(prevT);
+						const prevTarget = targetId ? targetsById[targetId] : void 0;
+						const prevX = prevTarget?.x ?? baseX;
+						const prevY = prevTarget?.y ?? baseY;
+						tl.seek(currentT);
+						const vx = sampledX - prevX;
+						const vy = sampledY - prevY;
+						if (Math.hypot(vx, vy) > .5) {
+							activeGroupTex$1 = ctx.renderer.applyMotionBlur(encoder, activeGroupTex$1, vx, vy, container3DShutter, 16, [
+								activeTex,
+								targetTexture,
+								...excludes
+							]);
+							activeGroupView$1 = activeGroupTex$1.createView();
+						}
+					}
+					if (blendMode === "normal" || blendMode === "source-over") drawProjectedQuad(ctx, encoder, activeView, activeGroupTex$1, quad3D, targetW, targetH, layerOpacity);
+					else {
+						const compositeExcludes$1 = [
+							activeTex,
+							targetTexture,
+							activeGroupTex$1,
+							...excludes
+						];
+						if (borderResult$2) compositeExcludes$1.push(borderResult$2.borderTex);
+						const layerTex = ctx.renderer.getTemporaryTexture(targetW, targetH, compositeExcludes$1);
+						const layerView = layerTex.createView();
+						ctx.renderer.beginFrame(encoder, layerView, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, targetW, targetH, "clear").end();
+						drawProjectedQuad(ctx, encoder, layerView, activeGroupTex$1, quad3D, targetW, targetH, layerOpacity);
+						activeTex = ctx.renderer.composite(encoder, activeTex, layerTex, blendMode, [targetTexture, ...excludes]);
+						activeView = activeTex.createView();
+					}
+					return {
+						finalTex: activeTex,
+						finalView: activeView
+					};
+				}
+				const shouldClip = lop.overflow !== "visible";
+				const scissorRect = shouldClip ? computeContainerScissor(layerMatrix, layerW, layerH) : null;
+				const clipRadius = shouldClip ? Math.min(target?.borderRadius ?? lop.borderRadius ?? 0, layerW / 2, layerH / 2) : 0;
+				if ((kind === "flex" || kind === "block") && clipRadius <= 0 && !shouldPaintContainerBackground(kind, lop.background) && layerOpacity === 1 && blendMode === "normal" && !lop.borderWidth && !lop.borderColor && (typeof lop.relighting !== "object" || !lop.relighting) && (typeof lop.relight !== "object" || !lop.relight) && (typeof target?.relighting !== "object" || !target?.relighting) && (typeof target?.relight !== "object" || !target?.relight) && (typeof lop.deflicker !== "object" || !lop.deflicker) && (typeof target?.deflicker !== "object" || !target?.deflicker)) {
+					if (scissorRect) ctx.renderer.pushScissor(scissorRect);
+					const res = await renderNodeTree(nodeVM.children ?? [], activeTex, activeView, excludes, accumulatedOpacity, layerMatrix, rect, targetW, targetH, null, isRootScene);
+					if (scissorRect) ctx.renderer.popScissor();
+					return res;
+				}
+				const groupExcludes = [
+					activeTex,
+					targetTexture,
+					...excludes
+				];
+				const groupTex = ctx.renderer.getTemporaryTexture(targetW, targetH, groupExcludes);
+				const groupView = groupTex.createView();
+				ctx.renderer.beginFrame(encoder, groupView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, targetW, targetH, "clear").end();
+				const br$1 = Math.min(target?.borderRadius ?? lop.borderRadius ?? lop.strokeRadius ?? 0, layerW / 2, layerH / 2);
+				if (shouldPaintContainerBackground(kind, lop.background)) {
+					const bgPass = ctx.renderer.beginFrame(encoder, groupView, {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, targetW, targetH, "load");
+					ctx.renderer.pushTransform(layerMatrix);
+					ctx.renderer.drawRect(bgPass, {
+						x: 0,
+						y: 0,
+						width: layerW,
+						height: layerH
+					}, lop.background, br$1, { opacity: layerOpacity });
+					ctx.renderer.popTransform();
+					bgPass.end();
+				}
+				let activeGroupTex = groupTex;
+				let activeGroupView = groupView;
+				if (nodeVM.children && nodeVM.children.length > 0) {
+					if (scissorRect) ctx.renderer.pushScissor(scissorRect);
+					const res = await renderNodeTree(nodeVM.children, groupTex, groupView, [groupTex, ...groupExcludes], layerOpacity, layerMatrix, rect, targetW, targetH, null, false);
+					if (scissorRect) ctx.renderer.popScissor();
+					activeGroupTex = res.finalTex;
+					activeGroupView = res.finalView;
+				}
+				if (clipRadius > 0) {
+					const maskTex = ctx.renderer.getTemporaryTexture(targetW, targetH, [activeGroupTex, ...groupExcludes]);
+					const maskPass = ctx.renderer.beginFrame(encoder, maskTex.createView(), {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, targetW, targetH, "clear");
+					ctx.renderer.pushTransform(layerMatrix);
+					ctx.renderer.drawRect(maskPass, {
+						x: 0,
+						y: 0,
+						width: layerW,
+						height: layerH
+					}, "#ffffff", clipRadius);
+					ctx.renderer.popTransform();
+					maskPass.end();
+					activeGroupTex = ctx.renderer.composite(encoder, activeGroupTex, maskTex, "mask-in", [
+						activeGroupTex,
+						maskTex,
+						...groupExcludes
+					]);
+					activeGroupView = activeGroupTex.createView();
+				}
+				const borderResult$1 = lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br$1, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", [activeGroupTex, ...groupExcludes]) : null;
+				if (borderResult$1) {
+					const borderPass = ctx.renderer.beginFrame(encoder, activeGroupView, {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, targetW, targetH, "load");
+					ctx.renderer.pushTransform(layerMatrix);
+					ctx.renderer.drawTexture(borderPass, borderResult$1.borderTex, {
+						x: borderResult$1.ox,
+						y: borderResult$1.oy,
+						width: borderResult$1.ow,
+						height: borderResult$1.oh
+					}, { opacity: layerOpacity });
+					ctx.renderer.popTransform();
+					borderPass.end();
+				}
+				const containerShutter = target?.motionBlurShutter ?? lop.motionBlurShutter ?? 0;
+				if (containerShutter > 0 && fps && shiftedFrame !== void 0) {
+					const currentT = shiftedFrame / fps;
+					const prevT = (shiftedFrame - 1) / fps;
+					tl.seek(prevT);
+					const prevTarget = targetId ? targetsById[targetId] : void 0;
+					const prevX = prevTarget?.x ?? baseX;
+					const prevY = prevTarget?.y ?? baseY;
+					tl.seek(currentT);
+					const vx = sampledX - prevX;
+					const vy = sampledY - prevY;
+					if (Math.hypot(vx, vy) > .5) {
+						activeGroupTex = ctx.renderer.applyMotionBlur(encoder, activeGroupTex, vx, vy, containerShutter, 16, [
+							activeTex,
+							targetTexture,
+							...excludes
+						]);
+						activeGroupView = activeGroupTex.createView();
+					}
+				}
+				const deflickerFromEffects = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "TemporalDeflicker" || e?.op === "Deflicker" || e?.constructor?.name === "TemporalDeflicker") : void 0;
+				const rawDeflicker = target?.deflicker ?? lop.deflicker ?? deflickerFromEffects;
+				const deflickerOpts$1 = typeof rawDeflicker === "object" && rawDeflicker !== null ? rawDeflicker : void 0;
+				if (deflickerOpts$1) {
+					const deflickerPipe = getTemporalDeflickerPipeline(ctx.device, lop.id || `layer_${i}`);
+					if (shiftedFrame === 0) deflickerPipe.reset();
+					activeGroupTex = deflickerPipe.execute(activeGroupTex, deflickerOpts$1, encoder);
+					activeGroupView = activeGroupTex.createView();
+				}
+				const relightEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "Relight3D" || e?.constructor?.name === "Relight3D") : void 0;
+				const rawRelight = target?.relighting ?? lop.relighting ?? (typeof lop.relight === "object" ? lop.relight : void 0) ?? relightEffect;
+				const relightOpts$1 = typeof rawRelight === "object" && rawRelight !== null ? rawRelight : void 0;
+				if (relightOpts$1) {
+					const relightPipeline = getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm");
+					const r3dInstance = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+					const activeLights = synthesizeRelightLights(relightOpts$1, sceneLights, rect, shiftedFrame, fps ?? 24);
+					const lightsBuffer = r3dInstance.getOrCreateLightsBuffer(activeLights);
+					const relitTex = ctx.renderer.getTemporaryTexture(targetW, targetH, [
+						activeGroupTex,
+						activeTex,
+						targetTexture,
+						...excludes
+					]);
+					const relitView = relitTex.createView();
+					const normalTex = relightOpts$1.normalTexture ?? relightOpts$1.normalMap;
+					relightPipeline.execute(encoder, relitView, activeGroupTex, normalTex, lightsBuffer, {
+						viewportWidth: targetW,
+						viewportHeight: targetH,
+						layerX: 0,
+						layerY: 0,
+						roughness: resolveVal(target?.roughness ?? target?.relightRoughness ?? relightOpts$1.specularRoughness ?? relightOpts$1.roughness, .35, shiftedFrame, fps ?? 24),
+						specularStrength: resolveVal(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts$1.specularStrength, .7, shiftedFrame, fps ?? 24),
+						metallic: resolveVal(target?.metallic ?? target?.relightMetallic ?? relightOpts$1.metallic, 0, shiftedFrame, fps ?? 24),
+						ambientIntensity: resolveVal(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts$1.ambientIntensity, .15, shiftedFrame, fps ?? 24),
+						depthScale: resolveVal(target?.depthScale ?? target?.relightDepthScale ?? relightOpts$1.depthScale, 1, shiftedFrame, fps ?? 24),
+						opacity: 1
+					}, "clear");
+					activeGroupTex = relitTex;
+					activeGroupView = relitView;
+				}
+				const compositeExcludes = [
+					activeTex,
+					targetTexture,
+					...excludes
+				];
+				if (borderResult$1) compositeExcludes.push(borderResult$1.borderTex);
+				activeTex = ctx.renderer.composite(encoder, activeTex, activeGroupTex, blendMode, compositeExcludes);
+				activeView = activeTex.createView();
+				return {
+					finalTex: activeTex,
+					finalView: activeView
+				};
+			}
+			if (!(layerW > 0 && layerH > 0)) return {
+				finalTex: activeTex,
+				finalView: activeView
+			};
+			const br = Math.min(lop.borderRadius ?? lop.strokeRadius ?? 0, layerW / 2, layerH / 2);
+			const texW = Math.ceil(layerW);
+			const texH = Math.ceil(layerH);
+			const savedScissors = ctx.renderer.suspendScissors?.() ?? [];
+			const localTex = ctx.renderer.getTemporaryTexture(texW, texH, [
+				activeTex,
+				targetTexture,
+				...excludes
+			]);
+			const localView = localTex.createView();
+			ctx.renderer.beginFrame(encoder, localView, {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 0
+			}, texW, texH, "clear").end();
+			let content;
+			let isCaption = false;
+			if (kind === "media") {
+				content = nodeVM.children?.[0];
+				isCaption = content?.operation?.dataType === "Caption" || lop.dataType === "Caption" || (content?.operation)?.srtText !== void 0;
+			} else if (kind === "text") {
+				const fullText = lop.text ?? "";
+				let displayText = fullText;
+				let resolvedAnimators = rawAnimators;
+				if (Array.isArray(rawAnimators) && rawAnimators.length > 0) resolvedAnimators = rawAnimators.map((animator, idx) => {
+					const a = {
+						...animator,
+						transform: { ...animator.transform ?? {} }
+					};
+					if (idx === 0) {
+						const offsetVal = typeof target?.offset === "number" ? target.offset : typeof target?.animatorOffset === "number" ? target.animatorOffset : void 0;
+						const rangeStartVal = typeof target?.rangeStart === "number" ? target.rangeStart : typeof target?.animatorRangeStart === "number" ? target.animatorRangeStart : void 0;
+						const rangeEndVal = typeof target?.rangeEnd === "number" ? target.rangeEnd : typeof target?.animatorRangeEnd === "number" ? target.animatorRangeEnd : void 0;
+						if (offsetVal !== void 0) a.offset = offsetVal;
+						if (rangeStartVal !== void 0) a.rangeStart = rangeStartVal;
+						if (rangeEndVal !== void 0) a.rangeEnd = rangeEndVal;
+						if (Array.isArray(a.selectors)) a.selectors = a.selectors.map((s) => {
+							if (s.type === "range") return {
+								...s,
+								...offsetVal !== void 0 ? { offset: offsetVal } : {},
+								...rangeStartVal !== void 0 ? { start: rangeStartVal } : {},
+								...rangeEndVal !== void 0 ? { end: rangeEndVal } : {}
+							};
+							return s;
+						});
+					}
+					return a;
+				});
+				const hasKineticAnimators$1 = Array.isArray(resolvedAnimators) && resolvedAnimators.length > 0;
+				const hasTypewriter = Boolean(lop.typewriter || target?.typewriter);
+				const textTrack = lop.animation?.tracks?.find((t) => t.prop === "text");
+				if (!hasKineticAnimators$1 && !hasTypewriter && (textTrack !== void 0 || typeof target?.text === "number") && fullText.length > 0) {
+					const progress = typeof target?.text === "number" ? Math.max(0, Math.min(1, target.text)) : 1;
+					if (progress >= 1) displayText = fullText;
+					else if (progress <= 0) displayText = "";
+					else {
+						const presetType = textTrack?.keyframes?.find((k) => k.presetType)?.presetType ?? "typewriter";
+						const textNumeric = typeof target?.text === "number" ? target.text : null;
+						const isDirectCount = textNumeric !== null && textNumeric > 1.0001;
+						if (presetType === "word-reveal" || presetType === "karaoke") {
+							const tokens = fullText.split(/(\s+)/);
+							const wordIndices = [];
+							tokens.forEach((token, idx) => {
+								if (token.trim().length > 0) wordIndices.push(idx);
+							});
+							const visibleWordCount = isDirectCount && textNumeric !== null ? Math.min(wordIndices.length, Math.round(textNumeric)) : Math.round(wordIndices.length * progress);
+							if (visibleWordCount === 0) displayText = "";
+							else {
+								const lastTokenIdx = wordIndices[Math.min(wordIndices.length - 1, visibleWordCount - 1)];
+								displayText = tokens.slice(0, lastTokenIdx + 1).join("");
+							}
+						} else if (presetType === "line-reveal") {
+							const lines = fullText.split("\n");
+							const visibleLineCount = isDirectCount && textNumeric !== null ? Math.min(lines.length, Math.round(textNumeric)) : Math.round(lines.length * progress);
+							displayText = lines.slice(0, Math.max(0, visibleLineCount)).join("\n");
+						} else {
+							const visibleChars = isDirectCount && textNumeric !== null ? Math.min(fullText.length, Math.round(textNumeric)) : Math.round(fullText.length * progress);
+							displayText = fullText.slice(0, visibleChars);
+						}
+					}
+				}
+				content = {
+					metadata: {},
+					operation: {
+						op: "text",
+						text: displayText,
+						animators: resolvedAnimators,
+						pathOptions: target?.pathOptions ?? lop.pathOptions,
+						typewriter: target?.typewriter ?? lop.typewriter,
+						marquee: target?.marquee ?? lop.marquee,
+						textProgress: typeof target?.text === "number" ? target.text : void 0,
+						firstMargin: target?.firstMargin ?? lop.firstMargin,
+						lastMargin: target?.lastMargin ?? lop.lastMargin,
+						baselineShift: target?.baselineShift ?? lop.baselineShift,
+						signals: virtualMedia?.operation?.signals ?? virtualMedia?.signals,
+						fontSize: target?.fontSize ?? lop.fontSize,
+						fontFamily: lop.fontFamily,
+						fontStyle: lop.fontStyle,
+						fontWeight: lop.fontWeight,
+						fill: target?.fill ?? target?.color ?? lop.fill,
+						align: lop.align === "start" ? "left" : lop.align === "end" ? "right" : lop.align,
+						verticalAlign: lop.verticalAlign,
+						letterSpacing: target?.letterSpacing ?? lop.letterSpacing,
+						lineHeight: lop.lineHeight,
+						padding: lop.padding,
+						textBackgroundColor: target?.textBackgroundColor ?? target?.background ?? lop.background,
+						borderRadius: lop.borderRadius,
+						stroke: target?.stroke ?? target?.strokeColor ?? lop.stroke,
+						strokeWidth: target?.strokeWidth ?? lop.strokeWidth,
+						strokeAlign: lop.strokeAlign,
+						textShadow: lop.textShadow,
+						shadows: lop.shadows,
+						x: isPathText ? 0 : padX,
+						y: isPathText ? 0 : padY,
+						width: isPathText ? targetW : lop.width !== void 0 ? rect.width : void 0,
+						height: isPathText ? targetH : lop.height !== void 0 ? rect.height : void 0
+					},
+					children: []
+				};
+			}
+			let glyphBatches = null;
+			let layerHasRaster = true;
+			if (content) {
+				const contentDurationMs = getActiveMediaMetadata(content)?.durationMs ?? composeDuration;
+				const layerDurationInMS = Math.max(1, Math.round(contentDurationMs / 1e3 * (fps ?? 24))) / (fps ?? 24) * 1e3;
+				const contentIsImageCompositor = content.operation?.op === "Compositor" && content.operation?.dataType === "Image";
+				const captureGlyphs = isTrue3D && kind === "text";
+				const rasterDrawsBefore = ctx.renderer.rasterDrawCount;
+				if (captureGlyphs) ctx.renderer.slugPipeline.beginCapture();
+				try {
+					await drawChild(content, {
+						containerWidth: layerW,
+						containerHeight: layerH,
+						renderId: `${props.renderId}-l${i}`,
+						durationMs: layerDurationInMS,
+						opacity: 1,
+						fps,
+						excludeTextures: [
+							activeTex,
+							targetTexture,
+							...excludes
+						],
+						isVideoMode: isVideoMode && !contentIsImageCompositor,
+						...isVideoMode && { frame: Math.max(0, shiftedFrame - (lop.startFrame ?? 0)) + (lop.mediaStartFrame ?? lop.trimStartFrames ?? (lop.trimStartSec != null ? Math.round(lop.trimStartSec * (fps ?? 24)) : 0)) },
+						...isCaption && {
+							fontFamily: lop.fontFamily,
+							fontSize: target?.fontSize ?? lop.fontSize,
+							fontWeight: lop.fontWeight,
+							fontStyle: lop.fontStyle,
+							fill: lop.fill,
+							color: lop.fill,
+							align: lop.align === "start" ? "left" : lop.align === "end" ? "right" : lop.align ?? "center",
+							verticalAlign: lop.verticalAlign ?? lop.textAlignVertical,
+							lineHeight: lop.lineHeight,
+							letterSpacing: lop.letterSpacing,
+							textBackgroundColor: lop.background ?? lop.textBackgroundColor,
+							borderRadius: lop.borderRadius ?? lop.strokeRadius,
+							strokeRadius: lop.strokeRadius ?? lop.borderRadius,
+							stroke: lop.stroke,
+							strokeWidth: lop.strokeWidth,
+							shadows: lop.shadows,
+							padding: lop.padding,
+							maxWidth: lop.maxWidth ?? layerW
+						}
+					}, localView, localTex, texW, texH);
+				} finally {
+					if (captureGlyphs) glyphBatches = ctx.renderer.slugPipeline.endCapture();
+				}
+				layerHasRaster = ctx.renderer.rasterDrawCount !== rasterDrawsBefore;
+			} else if (kind === "shape") {
+				const shapePass = ctx.renderer.beginFrame(encoder, localView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, texW, texH, "load");
+				const shapeConfig = {
+					shapeType: lop.shapeType ?? lop.shape ?? "rect",
+					width: layerW,
+					height: layerH,
+					path: lop.d ?? lop.path,
+					cornerRadius: target?.cornerRadius ?? lop.cornerRadius ?? lop.borderRadius ?? lop.radius ?? 0,
+					starPoints: lop.starPoints ?? 5,
+					starInnerRadiusRatio: target?.starInnerRadiusRatio ?? lop.starInnerRadiusRatio ?? .5,
+					polygonSides: lop.polygonSides ?? 5
+				};
+				const fillType = lop.fillType ?? "solid";
+				const fillColor = target?.fillColor ?? target?.fill ?? lop.fillColor ?? lop.fill ?? "#38bdf8";
+				const color2 = target?.gradientEndColor ?? lop.gradientEndColor ?? lop.fillColor2 ?? "#9333ea";
+				let startX = lop.fillStartX;
+				let startY = lop.fillStartY;
+				let endX = lop.fillEndX;
+				let endY = lop.fillEndY;
+				if (fillType === "linear" && startX === void 0 && lop.gradientAngle !== void 0) {
+					const rad = lop.gradientAngle * Math.PI / 180;
+					const cx = layerW / 2;
+					const cy = layerH / 2;
+					const half = (Math.abs(layerW * Math.cos(rad)) + Math.abs(layerH * Math.sin(rad))) / 2;
+					startX = cx - Math.cos(rad) * half;
+					startY = cy - Math.sin(rad) * half;
+					endX = cx + Math.cos(rad) * half;
+					endY = cy + Math.sin(rad) * half;
+				}
+				const fillConfig = {
+					type: fillType,
+					color: fillColor,
+					color2,
+					startX,
+					startY,
+					endX,
+					endY,
+					cx: lop.fillCx,
+					cy: lop.fillCy,
+					radius: lop.fillRadius
+				};
+				const strokeWidth = target?.strokeWidth ?? lop.strokeWidth ?? 0;
+				const strokeColor = target?.strokeColor ?? lop.strokeColor ?? lop.stroke ?? "#ffffff";
+				const strokeLineCap = lop.strokeLineCap ?? "round";
+				const strokeDashArray = lop.strokeDashArray;
+				const strokeDashOffset = target?.strokeDashOffset ?? lop.strokeDashOffset ?? 0;
+				const trimStart = target?.trimStart ?? lop.trimStart ?? 0;
+				const trimEnd = target?.trimEnd ?? lop.trimEnd ?? 1;
+				const trimOffset = target?.trimOffset ?? lop.trimOffset ?? 0;
+				ctx.renderer.drawShape(shapePass, shapeConfig, fillConfig, strokeWidth > 0 ? {
+					color: strokeColor,
+					width: strokeWidth,
+					cap: strokeLineCap,
+					trimStart,
+					trimEnd,
+					trimOffset,
+					dashArray: strokeDashArray,
+					dashOffset: strokeDashOffset
+				} : void 0);
+				shapePass.end();
+			}
+			const leafDeflickerEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "TemporalDeflicker" || e?.constructor?.name === "TemporalDeflicker") : void 0;
+			const deflickerOpts = target?.deflicker ?? lop.deflicker ?? leafDeflickerEffect;
+			const leafRelightEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "Relight3D" || e?.constructor?.name === "Relight3D") : void 0;
+			const rawLeafRelight = target?.relighting ?? lop.relighting ?? (typeof lop.relight === "object" ? lop.relight : void 0) ?? leafRelightEffect;
+			const relightOpts = typeof rawLeafRelight === "object" && rawLeafRelight !== null ? rawLeafRelight : void 0;
+			const shutterAngle = target?.motionBlurShutter ?? lop.motionBlurShutter ?? 0;
+			if (glyphBatches && glyphBatches.length > 0 && (deflickerOpts || relightOpts || shutterAngle > 0)) {
+				const glyphPass = ctx.renderer.beginFrame(encoder, localView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, texW, texH, "load");
+				ctx.renderer.slugPipeline.drawBatches(glyphPass, glyphBatches, texW, texH);
+				glyphPass.end();
+				glyphBatches = null;
+				layerHasRaster = true;
+			}
+			let finalTex = localTex;
+			if (!isTrue3D && br > 0 && !isCaption && kind !== "shape") {
+				const maskTex = ctx.renderer.getTemporaryTexture(texW, texH, [
+					localTex,
+					activeTex,
+					targetTexture,
+					...excludes
+				]);
+				const maskView = maskTex.createView();
+				ctx.renderer.beginFrame(encoder, maskView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, texW, texH, "clear").end();
+				const maskPass = ctx.renderer.beginFrame(encoder, maskView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, texW, texH, "load");
+				ctx.renderer.drawRect(maskPass, {
+					x: 0,
+					y: 0,
+					width: layerW,
+					height: layerH
+				}, {
+					r: 1,
+					g: 1,
+					b: 1,
+					a: 1
+				}, br);
+				maskPass.end();
+				finalTex = ctx.renderer.composite(encoder, localTex, maskTex, "mask-in", [
+					activeTex,
+					targetTexture,
+					...excludes
+				]);
+			}
+			if (deflickerOpts) {
+				const deflickerPipe = getTemporalDeflickerPipeline(ctx.device, lop.id || `layer_${i}`);
+				if (shiftedFrame === 0) deflickerPipe.reset();
+				finalTex = deflickerPipe.execute(finalTex, deflickerOpts, encoder);
+			}
+			if (relightOpts) {
+				const relightPipeline = getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm");
+				const r3dInstance = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+				const activeLights = synthesizeRelightLights(relightOpts, sceneLights, {
+					x: sampledX,
+					y: sampledY,
+					width: texW,
+					height: texH
+				}, shiftedFrame, fps ?? 24);
+				const lightsBuffer = r3dInstance.getOrCreateLightsBuffer(activeLights);
+				const relitTex = ctx.renderer.getTemporaryTexture(texW, texH, [
+					finalTex,
+					activeTex,
+					targetTexture,
+					...excludes
+				]);
+				const relitView = relitTex.createView();
+				const normalTex = relightOpts.normalTexture ?? relightOpts.normalMap;
+				relightPipeline.execute(encoder, relitView, finalTex, normalTex, lightsBuffer, {
+					viewportWidth: texW,
+					viewportHeight: texH,
+					layerX: sampledX,
+					layerY: sampledY,
+					roughness: resolveVal(target?.roughness ?? target?.relightRoughness ?? relightOpts.specularRoughness ?? relightOpts.roughness, .35, shiftedFrame, fps ?? 24),
+					specularStrength: resolveVal(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts.specularStrength, .7, shiftedFrame, fps ?? 24),
+					metallic: resolveVal(target?.metallic ?? target?.relightMetallic ?? relightOpts.metallic, 0, shiftedFrame, fps ?? 24),
+					ambientIntensity: resolveVal(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts.ambientIntensity, .15, shiftedFrame, fps ?? 24),
+					depthScale: resolveVal(target?.depthScale ?? target?.relightDepthScale ?? relightOpts.depthScale, 1, shiftedFrame, fps ?? 24),
+					opacity: 1
+				}, "clear");
+				finalTex = relitTex;
+			}
+			let blurPadX = 0;
+			let blurPadY = 0;
+			if (shutterAngle > 0 && fps && shiftedFrame !== void 0) {
+				const currentT = shiftedFrame / fps;
+				const prevT = (shiftedFrame - 1) / fps;
+				tl.seek(prevT);
+				const prevTarget = targetId ? targetsById[targetId] : void 0;
+				const prevX = prevTarget?.x ?? baseX;
+				const prevY = prevTarget?.y ?? baseY;
+				tl.seek(currentT);
+				const vx = sampledX - prevX;
+				const vy = sampledY - prevY;
+				if (Math.hypot(vx, vy) > .5) {
+					if (!isTrue3D && !(is3D && quad3D)) {
+						const reach = shutterAngle / 360;
+						blurPadX = Math.ceil(Math.abs(vx) * reach);
+						blurPadY = Math.ceil(Math.abs(vy) * reach);
+						const paddedTex = ctx.renderer.getTemporaryTexture(texW + blurPadX * 2, texH + blurPadY * 2, [
+							finalTex,
+							activeTex,
+							targetTexture,
+							...excludes
+						]);
+						const padPass = ctx.renderer.beginFrame(encoder, paddedTex.createView(), {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, paddedTex.width, paddedTex.height, "clear");
+						ctx.renderer.drawTexture(padPass, finalTex, {
+							x: blurPadX,
+							y: blurPadY,
+							width: texW,
+							height: texH
+						}, { opacity: 1 });
+						padPass.end();
+						finalTex = paddedTex;
+					}
+					const streakPx = Math.hypot(vx, vy) * (shutterAngle / 360) * 2;
+					const samples = Math.min(128, Math.max(16, Math.ceil(streakPx / 2)));
+					finalTex = ctx.renderer.applyMotionBlur(encoder, finalTex, vx, vy, shutterAngle, samples, [
+						activeTex,
+						targetTexture,
+						...excludes
+					]);
+				}
+			}
+			const borderExcludes = [
+				localTex,
+				finalTex,
+				activeTex,
+				targetTexture,
+				...excludes
+			];
+			const borderResult = !isTrue3D && lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", borderExcludes) : null;
+			if (savedScissors.length > 0) ctx.renderer.resumeScissors?.(savedScissors);
+			if (isTrue3D) {
+				const renderedTex = finalTex;
+				if (borderResult) {
+					const borderPass = ctx.renderer.beginFrame(encoder, renderedTex.createView(), {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, texW, texH, "load");
+					ctx.renderer.drawTexture(borderPass, borderResult.borderTex, {
+						x: borderResult.ox,
+						y: borderResult.oy,
+						width: borderResult.ow,
+						height: borderResult.oh
+					}, { opacity: 1 });
+					borderPass.end();
+				}
+				let modelMatrix;
+				if (parent3DMatrix) {
+					let localM = Matrix4Math.identity();
+					const childX = target?.x ?? lop.x ?? 0;
+					const childY = target?.y ?? lop.y ?? 0;
+					const childZ = target?.z ?? lop.z ?? 0;
+					localM = Matrix4Math.multiply(localM, Matrix4Math.translate(childX, childY, childZ));
+					const rxRad = (target?.rotateX ?? lop.rotateX ?? 0) * Math.PI / 180;
+					const ryRad = (target?.rotateY ?? lop.rotateY ?? 0) * Math.PI / 180;
+					const rzRad = ((target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation) * (Math.PI / 180);
+					if (rzRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateZ(rzRad));
+					if (ryRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateY(ryRad));
+					if (rxRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateX(rxRad));
+					const sx = layerW * scale$1;
+					const sy = layerH * scale$1;
+					const sz = target?.scaleZ ?? lop.scaleZ ?? 1;
+					localM = Matrix4Math.multiply(localM, Matrix4Math.scale(sx, sy, sz));
+					const ax = lop.anchorX ?? .5;
+					const ay = lop.anchorY ?? .5;
+					const pivotX = .5 - ax;
+					const pivotY = .5 - ay;
+					if (pivotX !== 0 || pivotY !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.translate(pivotX, pivotY, 0));
+					modelMatrix = Matrix4Math.multiply(parent3DMatrix, localM);
+				}
+				const quadOpts = {
+					position: [
+						localX + layerW * .5,
+						localY + layerH * .5,
+						target?.z ?? lop.z ?? 0
+					],
+					width: layerW,
+					height: layerH,
+					textureExtent: [layerW / texW, layerH / texH],
+					rotation: [
+						target?.rotateX ?? lop.rotateX ?? 0,
+						target?.rotateY ?? lop.rotateY ?? 0,
+						(target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation
+					],
+					scale: [
+						scale$1,
+						scale$1,
+						target?.scaleZ ?? lop.scaleZ ?? 1
+					],
+					anchor: [lop.anchorX ?? .5, lop.anchorY ?? .5],
+					borderRadius: br,
+					borderWidth: lop.borderWidth,
+					borderColor: lop.borderColor,
+					opacity: layerOpacity,
+					twoSided: target?.twoSided ?? lop.twoSided ?? true,
+					material: target?.material ?? lop.material,
+					shininess: target?.shininess ?? lop.shininess,
+					roughness: target?.roughness ?? lop.roughness,
+					specularIntensity: target?.specularIntensity ?? lop.specularIntensity,
+					ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
+					metallic: target?.metallic ?? lop.metallic,
+					...modelMatrix && { modelMatrix }
+				};
+				const quadHasContent = layerHasRaster || Boolean(quadOpts.borderWidth && quadOpts.borderWidth > 0 && quadOpts.borderColor);
+				if (!glyphBatches || quadHasContent) pending3DItems.push({
+					kind: "quad",
+					texture: renderedTex,
+					opts: quadOpts
+				});
+				if (glyphBatches && glyphBatches.length > 0) pending3DItems.push({
+					kind: "slug",
+					batches: glyphBatches,
+					opts: quadOpts,
+					stackBase: quadHasContent ? 1 : 0
+				});
+				return {
+					finalTex: activeTex,
+					finalView: activeView
+				};
+			}
+			if (is3D && quad3D) {
+				const renderedTex = finalTex;
+				if (borderResult) {
+					const borderPass = ctx.renderer.beginFrame(encoder, renderedTex.createView(), {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, texW, texH, "load");
+					ctx.renderer.drawTexture(borderPass, borderResult.borderTex, {
+						x: borderResult.ox,
+						y: borderResult.oy,
+						width: borderResult.ow,
+						height: borderResult.oh
+					}, { opacity: 1 });
+					borderPass.end();
+				}
+				if (blendMode === "normal" || blendMode === "source-over") drawProjectedQuad(ctx, encoder, activeView, renderedTex, quad3D, targetW, targetH, layerOpacity);
+				else {
+					const layerExcludes = [
+						activeTex,
+						targetTexture,
+						renderedTex,
+						...excludes
+					];
+					if (borderResult) layerExcludes.push(borderResult.borderTex);
+					const layerTex = ctx.renderer.getTemporaryTexture(targetW, targetH, layerExcludes);
+					const layerView = layerTex.createView();
+					ctx.renderer.beginFrame(encoder, layerView, {
+						r: 0,
+						g: 0,
+						b: 0,
+						a: 0
+					}, targetW, targetH, "clear").end();
+					drawProjectedQuad(ctx, encoder, layerView, renderedTex, quad3D, targetW, targetH, layerOpacity);
+					activeTex = ctx.renderer.composite(encoder, activeTex, layerTex, blendMode, [targetTexture, ...excludes]);
+					activeView = activeTex.createView();
+				}
+				return {
+					finalTex: activeTex,
+					finalView: activeView
+				};
+			}
+			if (blendMode === "normal" || blendMode === "source-over") {
+				const drawPass = ctx.renderer.beginFrame(encoder, activeView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, targetW, targetH, "load");
+				ctx.renderer.pushTransform(layerMatrix);
+				ctx.renderer.drawTexture(drawPass, finalTex, {
+					x: -blurPadX,
+					y: -blurPadY,
+					width: layerW + blurPadX * 2,
+					height: layerH + blurPadY * 2
+				}, { opacity: layerOpacity });
+				if (borderResult) ctx.renderer.drawTexture(drawPass, borderResult.borderTex, {
+					x: borderResult.ox,
+					y: borderResult.oy,
+					width: borderResult.ow,
+					height: borderResult.oh
+				}, { opacity: layerOpacity });
+				ctx.renderer.popTransform();
+				drawPass.end();
+			} else {
+				const layerExcludes = [
+					finalTex,
+					activeTex,
+					targetTexture,
+					...excludes
+				];
+				if (borderResult) layerExcludes.push(borderResult.borderTex);
+				const layerTex = ctx.renderer.getTemporaryTexture(targetW, targetH, layerExcludes);
+				const layerView = layerTex.createView();
+				ctx.renderer.beginFrame(encoder, layerView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, targetW, targetH, "clear").end();
+				const drawPass = ctx.renderer.beginFrame(encoder, layerView, {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: 0
+				}, targetW, targetH, "load");
+				ctx.renderer.pushTransform(layerMatrix);
+				ctx.renderer.drawTexture(drawPass, finalTex, {
+					x: -blurPadX,
+					y: -blurPadY,
+					width: layerW + blurPadX * 2,
+					height: layerH + blurPadY * 2
+				}, { opacity: layerOpacity });
+				if (borderResult) ctx.renderer.drawTexture(drawPass, borderResult.borderTex, {
+					x: borderResult.ox,
+					y: borderResult.oy,
+					width: borderResult.ow,
+					height: borderResult.oh
+				}, { opacity: layerOpacity });
+				ctx.renderer.popTransform();
+				drawPass.end();
+				activeTex = ctx.renderer.composite(encoder, activeTex, layerTex, blendMode, [targetTexture, ...excludes]);
+				activeView = activeTex.createView();
+			}
+			return {
+				finalTex: activeTex,
+				finalView: activeView
+			};
+		};
+		const initialExcludes = [
+			compTex,
+			targetTexture,
+			...props.excludeTextures || []
+		];
+		currentCompTex = (await renderNodeTree(virtualMedia.children ?? [], compTex, compView, initialExcludes, 1, new DOMMatrix(), null, nativeWidth, nativeHeight, null, true)).finalTex;
+		ctx.renderer.popTransform();
+		ctx.renderer.popScissor();
+		const finalPass = ctx.renderer.beginFrame(encoder, targetView, {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 0
+		}, targetWidth, targetHeight, "load");
+		ctx.renderer.drawTexture(finalPass, currentCompTex, {
+			x: 0,
+			y: 0,
+			width: props.containerWidth ?? targetWidth,
+			height: props.containerHeight ?? targetHeight
+		}, { opacity });
+		args.pass = finalPass;
+	}
+};
+function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, strokeAlign, excludeTextures) {
+	if (w <= 0 || h <= 0 || !borderColor || !borderWidth || borderWidth <= 0) return null;
+	let ox = 0;
+	let oy = 0;
+	let ow = w;
+	let oh = h;
+	let outerRadius = br;
+	let innerRadius = br;
+	if (strokeAlign === "inside") {
+		ox = 0;
+		oy = 0;
+		ow = w;
+		oh = h;
+		outerRadius = br;
+		innerRadius = Math.max(0, br - borderWidth);
+	} else if (strokeAlign === "outside") {
+		ox = -borderWidth;
+		oy = -borderWidth;
+		ow = w + 2 * borderWidth;
+		oh = h + 2 * borderWidth;
+		outerRadius = br + borderWidth;
+		innerRadius = br;
+	} else {
+		ox = -borderWidth / 2;
+		oy = -borderWidth / 2;
+		ow = w + borderWidth;
+		oh = h + borderWidth;
+		outerRadius = br + borderWidth / 2;
+		innerRadius = Math.max(0, br - borderWidth / 2);
+	}
+	if (br <= 0) {
+		outerRadius = 0;
+		innerRadius = 0;
+	}
+	if (ow <= 0 || oh <= 0) return null;
+	const borderTexW = Math.ceil(ow);
+	const borderTexH = Math.ceil(oh);
+	const outerTex = ctx.renderer.getTemporaryTexture(borderTexW, borderTexH, excludeTextures);
+	const outerView = outerTex.createView();
+	ctx.renderer.beginFrame(encoder, outerView, {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	}, borderTexW, borderTexH, "clear").end();
+	const outerDrawPass = ctx.renderer.beginFrame(encoder, outerView, {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	}, borderTexW, borderTexH, "load");
+	ctx.renderer.drawRect(outerDrawPass, {
+		x: 0,
+		y: 0,
+		width: ow,
+		height: oh
+	}, borderColor, outerRadius);
+	outerDrawPass.end();
+	const innerW = ow - 2 * borderWidth;
+	const innerH = oh - 2 * borderWidth;
+	if (innerW > 0 && innerH > 0) {
+		const innerTex = ctx.renderer.getTemporaryTexture(borderTexW, borderTexH, [outerTex, ...excludeTextures]);
+		const innerView = innerTex.createView();
+		ctx.renderer.beginFrame(encoder, innerView, {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 0
+		}, borderTexW, borderTexH, "clear").end();
+		const innerDrawPass = ctx.renderer.beginFrame(encoder, innerView, {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 0
+		}, borderTexW, borderTexH, "load");
+		ctx.renderer.drawRect(innerDrawPass, {
+			x: borderWidth,
+			y: borderWidth,
+			width: innerW,
+			height: innerH
+		}, {
+			r: 1,
+			g: 1,
+			b: 1,
+			a: 1
+		}, innerRadius);
+		innerDrawPass.end();
+		return {
+			borderTex: ctx.renderer.composite(encoder, outerTex, innerTex, "mask-out", excludeTextures),
+			ox,
+			oy,
+			ow,
+			oh
+		};
+	}
+	return {
+		borderTex: outerTex,
+		ox,
+		oy,
+		ow,
+		oh
+	};
+}
+
+//#endregion
+//#region src/renderers/audio-processor.ts
+const compositorLayerAudioProcessor = async (channels, sampleRate, virtualMedia, ctx) => {
+	const op = virtualMedia.operation;
+	if (!op) return;
+	const numChannels = channels.length;
+	if (numChannels === 0) return;
+	const numSamples = channels[0].length;
+	if (numSamples === 0) return;
+	if (op.op === "Compositor") {
+		const master = typeof op.volume === "number" ? op.volume : 1;
+		if (master === 1) return;
+		for (let c = 0; c < numChannels; c++) {
+			const ch = channels[c];
+			for (let i = 0; i < ch.length; i++) ch[i] *= master;
+		}
+		return;
+	}
+	const volume = typeof op.volume === "number" ? op.volume : 1;
+	const muted = !!op.muted;
+	const animation = op.animation;
+	const fps = ctx?.fps ?? 24;
+	const tracks = animation?.tracks || [];
+	const hasVolumeKeys = tracks.some((t) => t.prop === "volume" && t.keyframes && t.keyframes.length > 0);
+	const hasMutedKeys = tracks.some((t) => t.prop === "muted" && t.keyframes && t.keyframes.length > 0);
+	if (!hasVolumeKeys && !hasMutedKeys) return;
+	const { tl, stub } = compileLayerTimeline(op.id || op.inputHandleId || "layer", animation, volume, muted, fps);
+	const startTimeSec = (ctx?.elapsedMs ?? 0) / 1e3;
+	const subChunkSize = 128;
+	tl.seek(startTimeSec);
+	let lastVol = stub.volume;
+	let lastMuted = stub.muted;
+	const baseGain = muted ? 0 : volume;
+	for (let i = 0; i < numSamples; i += subChunkSize) {
+		const nextI = Math.min(numSamples, i + subChunkSize);
+		const tNext = startTimeSec + (nextI - i) / sampleRate;
+		tl.seek(tNext);
+		const nextVol = stub.volume;
+		const nextMuted = stub.muted;
+		for (let j = i; j < nextI; j++) {
+			const p = (j - i) / (nextI - i);
+			const currentVol = Math.min(1, Math.max(0, lastVol + (nextVol - lastVol) * p));
+			const finalGain = (j - i < (nextI - i) / 2 ? lastMuted : nextMuted) ? 0 : currentVol;
+			const relativeGain = baseGain === 0 ? 0 : finalGain / baseGain;
+			if (relativeGain !== 1) for (let c = 0; c < numChannels; c++) channels[c][j] *= relativeGain;
+		}
+		lastVol = nextVol;
+		lastMuted = nextMuted;
+	}
+};
+audioRegistry.register("CompositorLayer", compositorLayerAudioProcessor);
+
+//#endregion
+//#region src/renderers/index.ts
+var renderers_default = defineRenderer({ WebGPURenderer: CompositorWebGPURenderer });
+
+//#endregion
+export { compileLayerTimeline as a, mappedEase as c, solveHomography as i, setCachedTimeline as l, Transform3DMath as n, compileTimeline as o, has3DTransform as r, getCachedTimeline as s, renderers_default as t };
+//# sourceMappingURL=renderers-DoYYCzgA.mjs.map