@mcut/compositor 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,2647 @@
+import { buildFilterString, getActiveLayout, getActiveTransitionPairs, getAngleTransitionAt, getLayout, getMulticamSourceTimeMs, getRunStyleAt, getSourceTimeMs, getTransitionCompletion, isElementActiveAt, registerEffectType, resolveAnimatedElement, toCompositeOperation } from "@mcut/timeline";
+import { z } from "zod";
+//#region src/geometry.ts
+/**
+* Element coordinates are center-origin: (0, 0) is the canvas center and the
+* element is anchored at its own center. This converts to canvas pixels.
+*/
+function toCanvasPoint(project, x, y) {
+	return {
+		x: project.width / 2 + x,
+		y: project.height / 2 + y
+	};
+}
+function fromCanvasPoint(project, x, y) {
+	return {
+		x: x - project.width / 2,
+		y: y - project.height / 2
+	};
+}
+const degToRad = (deg) => deg * Math.PI / 180;
+function getElementNaturalSize(element, helpers = {}) {
+	if (element.type === "audio" || element.type === "caption" || element.type === "multicam") return null;
+	if (element.type === "text") return helpers.measureText?.(element.text, element.style, element.box, element.runs) ?? null;
+	const size = helpers.getAssetSize?.(element.assetId) ?? null;
+	if (size && "crop" in element && element.crop) return {
+		width: size.width * element.crop.w,
+		height: size.height * element.crop.h
+	};
+	return size;
+}
+function getElementDisplaySize(element, helpers = {}) {
+	if (!("transform" in element)) return null;
+	const natural = getElementNaturalSize(element, helpers);
+	if (!natural || natural.width <= 0 || natural.height <= 0) return null;
+	return {
+		width: natural.width * Math.abs(element.transform.scaleX),
+		height: natural.height * Math.abs(element.transform.scaleY)
+	};
+}
+function getTransformForDisplaySize(transform, natural, patch) {
+	if (natural.width <= 0 || natural.height <= 0) return transform;
+	const signX = transform.scaleX < 0 ? -1 : 1;
+	const signY = transform.scaleY < 0 ? -1 : 1;
+	let scaleX = patch.width !== void 0 ? signX * Math.max(.001, patch.width / natural.width) : transform.scaleX;
+	let scaleY = patch.height !== void 0 ? signY * Math.max(.001, patch.height / natural.height) : transform.scaleY;
+	if (patch.preserveAspect) {
+		if (patch.width !== void 0 && patch.height === void 0) scaleY = signY * Math.abs(scaleX);
+		if (patch.height !== void 0 && patch.width === void 0) scaleX = signX * Math.abs(scaleY);
+	}
+	return {
+		...transform,
+		scaleX,
+		scaleY
+	};
+}
+/**
+* The element's oriented bounding box on the canvas, or `null` when its size
+* is unknown (e.g. unprobed media without a frame yet). Captions are
+* positioned by their style band and are not transformable; they have no OBB.
+*/
+function getElementOBB(project, element, helpers = {}) {
+	if (element.type === "audio" || element.type === "caption" || element.type === "multicam") return null;
+	const natural = getElementNaturalSize(element, helpers);
+	const transform = element.transform;
+	if (!natural || natural.width <= 0 || natural.height <= 0) return null;
+	const center = toCanvasPoint(project, transform.x, transform.y);
+	return {
+		cx: center.x,
+		cy: center.y,
+		width: natural.width * Math.abs(transform.scaleX),
+		height: natural.height * Math.abs(transform.scaleY),
+		rotation: transform.rotation
+	};
+}
+/** Is the canvas-space point inside the (rotated) box? */
+function hitTestOBB(obb, x, y) {
+	const rad = degToRad(-obb.rotation);
+	const dx = x - obb.cx;
+	const dy = y - obb.cy;
+	const localX = dx * Math.cos(rad) - dy * Math.sin(rad);
+	const localY = dx * Math.sin(rad) + dy * Math.cos(rad);
+	return Math.abs(localX) <= obb.width / 2 && Math.abs(localY) <= obb.height / 2;
+}
+/** Distance of the rotate handle above the box's top edge (canvas px). */
+const ROTATE_HANDLE_OFFSET = 32;
+/** The 8 resize handles plus the rotate handle, in canvas space. */
+function getHandles(obb) {
+	const rad = degToRad(obb.rotation);
+	const cos = Math.cos(rad);
+	const sin = Math.sin(rad);
+	const hw = obb.width / 2;
+	const hh = obb.height / 2;
+	return [
+		[
+			"nw",
+			-hw,
+			-hh
+		],
+		[
+			"n",
+			0,
+			-hh
+		],
+		[
+			"ne",
+			hw,
+			-hh
+		],
+		[
+			"e",
+			hw,
+			0
+		],
+		[
+			"se",
+			hw,
+			hh
+		],
+		[
+			"s",
+			0,
+			hh
+		],
+		[
+			"sw",
+			-hw,
+			hh
+		],
+		[
+			"w",
+			-hw,
+			0
+		],
+		[
+			"rotate",
+			0,
+			-hh - 32
+		]
+	].map(([id, lx, ly]) => ({
+		id,
+		x: obb.cx + lx * cos - ly * sin,
+		y: obb.cy + lx * sin + ly * cos
+	}));
+}
+/** Hit-test the handles (square hit area of `size` px around each). */
+function hitTestHandles(obb, x, y, size = 12) {
+	for (const handle of getHandles(obb)) if (Math.abs(x - handle.x) <= size && Math.abs(y - handle.y) <= size) return handle.id;
+	return null;
+}
+/**
+* "Contain" scale factor for fitting a `width`×`height` media into the
+* project frame (used when inserting media elements).
+*/
+function getFitScale(project, width, height) {
+	if (width <= 0 || height <= 0) return 1;
+	return Math.min(project.width / width, project.height / height);
+}
+//#endregion
+//#region src/backend.ts
+/**
+* Transform + opacity + effect-stack filter + blend mode around a canvas2d
+* draw (the original withTransform). `ctx.filter` is unsupported in some
+* older engines; there the stack degrades to an unfiltered render rather
+* than failing.
+*/
+function applyChrome(ctx, chrome, draw) {
+	ctx.save();
+	ctx.globalAlpha *= chrome.opacity;
+	const filter = buildFilterString(chrome.effects);
+	if (filter && "filter" in ctx) ctx.filter = filter;
+	if (chrome.blendMode) ctx.globalCompositeOperation = toCompositeOperation(chrome.blendMode);
+	ctx.translate(chrome.centerX, chrome.centerY);
+	if (chrome.rotationDeg !== 0) ctx.rotate(chrome.rotationDeg * Math.PI / 180);
+	ctx.scale(chrome.scaleX, chrome.scaleY);
+	draw();
+	ctx.restore();
+}
+/** Draw an {@link ImageQuad} in local (chrome-applied) coordinates. */
+function drawImageQuad2D(ctx, quad) {
+	ctx.save();
+	if (quad.cornerRadius > 0) {
+		ctx.beginPath();
+		ctx.roundRect(-quad.dw / 2, -quad.dh / 2, quad.dw, quad.dh, quad.cornerRadius);
+		ctx.clip();
+	}
+	if (quad.src) ctx.drawImage(quad.image, quad.src.sx, quad.src.sy, quad.src.sw, quad.src.sh, -quad.dw / 2, -quad.dh / 2, quad.dw, quad.dh);
+	else ctx.drawImage(quad.image, -quad.dw / 2, -quad.dh / 2, quad.dw, quad.dh);
+	ctx.restore();
+}
+/** The canvas2d backend: draws straight into the target context. */
+var Canvas2DBackend = class {
+	ctx;
+	width;
+	height;
+	kind = "canvas2d";
+	constructor(ctx, width, height) {
+		this.ctx = ctx;
+		this.width = width;
+		this.height = height;
+	}
+	beginFrame(backgroundColor) {
+		this.ctx.save();
+		this.ctx.fillStyle = backgroundColor;
+		this.ctx.fillRect(0, 0, this.width, this.height);
+	}
+	endFrame() {
+		this.ctx.restore();
+	}
+	acquireRaster() {
+		return this.ctx;
+	}
+	drawImageQuad(quad, chrome) {
+		applyChrome(this.ctx, chrome, () => drawImageQuad2D(this.ctx, quad));
+	}
+	pushRasterScope() {}
+	popRasterScope() {}
+};
+/**
+* Build the per-element render context. `ctx` is a getter so backends learn
+* when raster content is actually being drawn (GPU backends flush the
+* raster surface lazily, in z-order).
+*/
+function createElementContext(backend, project, track, timeMs, source) {
+	return {
+		backend,
+		project,
+		track,
+		timeMs,
+		source,
+		get ctx() {
+			return backend.acquireRaster();
+		}
+	};
+}
+//#endregion
+//#region src/motion-blur.ts
+/**
+* Per-element motion blur, After Effects' layer model: the element renders
+* N times at sub-frame moments inside a shutter window centered on the
+* frame, each pass at 1/N alpha, accumulated additively in a scratch canvas
+* and composited once. Deterministic — sample times derive only from the
+* frame time and project fps, so preview, scrubbing in any order, and export
+* all blur identically.
+*
+* Only KEYFRAMED transform motion blurs (the keyframes give us the
+* sub-frame transforms analytically); static clips and motion inside the
+* source footage are untouched. Video sub-samples reuse the single source
+* frame at the frame's center time — only the transform sweeps.
+*/
+const TRANSFORM_PROPERTIES = [
+	"position.x",
+	"position.y",
+	"scale.x",
+	"scale.y",
+	"rotation"
+];
+const DEFAULT_SAMPLES = 8;
+/** Movement gates: skip the N-pass cost when travel inside the window is invisible. */
+const MIN_TRAVEL_PX = .75;
+const MIN_ROTATION_DEG = .05;
+const MIN_SCALE_DELTA = .002;
+function getMotionBlur(element) {
+	return "motionBlur" in element ? element.motionBlur : void 0;
+}
+function hasTransformMotion(element) {
+	const keyframes = "keyframes" in element ? element.keyframes : void 0;
+	if (!keyframes) return false;
+	return TRANSFORM_PROPERTIES.some((property) => (keyframes[property]?.length ?? 0) >= 2);
+}
+function isMovingBetween(element, t0, t1) {
+	const a = resolveAnimatedElement(element, t0);
+	const b = resolveAnimatedElement(element, t1);
+	if (!("transform" in a) || !("transform" in b)) return false;
+	const from = a.transform;
+	const to = b.transform;
+	if (Math.hypot(to.x - from.x, to.y - from.y) >= MIN_TRAVEL_PX) return true;
+	if (Math.abs(to.rotation - from.rotation) >= MIN_ROTATION_DEG) return true;
+	return Math.abs(to.scaleX - from.scaleX) >= MIN_SCALE_DELTA || Math.abs(to.scaleY - from.scaleY) >= MIN_SCALE_DELTA;
+}
+/** Cached accumulation surface; cleared before every use, so reuse is safe. */
+let cachedScratch = null;
+function acquireScratch(width, height, options) {
+	if (options.createScratchContext) return options.createScratchContext(width, height);
+	if (typeof OffscreenCanvas === "undefined") return null;
+	const cachedCanvas = cachedScratch?.canvas;
+	if (!cachedScratch || cachedCanvas?.width !== width || cachedCanvas?.height !== height) {
+		const ctx = new OffscreenCanvas(width, height).getContext("2d");
+		if (!ctx) return null;
+		cachedScratch = ctx;
+	}
+	return cachedScratch;
+}
+/**
+* Render `element` with motion blur into `ctx`. Returns false when motion
+* blur does not apply (off, no keyframed transform motion, sub-threshold
+* travel, or no scratch surface available) — the caller then renders the
+* plain single-sample pass.
+*/
+function renderElementWithMotionBlur(backend, project, track, element, timeMs, options, renderer) {
+	const blur = getMotionBlur(element);
+	if (!blur?.enabled) return false;
+	if (!hasTransformMotion(element)) return false;
+	const windowMs = 1e3 / project.fps * (blur.shutterAngle / 360);
+	if (!(windowMs > 0)) return false;
+	const start = timeMs - windowMs / 2;
+	if (!isMovingBetween(element, start, start + windowMs)) return false;
+	const scratch = acquireScratch(project.width, project.height, options);
+	if (!scratch) return false;
+	const samples = Math.max(2, Math.min(64, Math.round(options.motionBlurSamples ?? DEFAULT_SAMPLES)));
+	scratch.clearRect(0, 0, project.width, project.height);
+	scratch.save();
+	scratch.globalCompositeOperation = "lighter";
+	scratch.globalAlpha = 1 / samples;
+	const subBackend = new Canvas2DBackend(scratch, project.width, project.height);
+	for (let i = 0; i < samples; i++) {
+		const resolved = resolveAnimatedElement(element, start + windowMs * ((i + .5) / samples));
+		renderer("blendMode" in resolved && resolved.blendMode ? {
+			...resolved,
+			blendMode: void 0
+		} : resolved, createElementContext(subBackend, project, track, timeMs, options.source));
+	}
+	scratch.restore();
+	const ctx = backend.acquireRaster();
+	ctx.save();
+	const blendMode = "blendMode" in element ? element.blendMode : void 0;
+	if (blendMode) ctx.globalCompositeOperation = toCompositeOperation(blendMode);
+	ctx.drawImage(scratch.canvas, 0, 0);
+	ctx.restore();
+	return true;
+}
+//#endregion
+//#region src/transition-renderers.ts
+const transitionRenderers = /* @__PURE__ */ new Map();
+/**
+* Register the renderer half of a transition type. Built-ins register below
+* through the same call; re-registering overrides (e.g. to restyle a
+* built-in wipe).
+*/
+function registerTransitionRenderer(type, renderer) {
+	transitionRenderers.set(type, renderer);
+}
+/** The registered renderer for `type`, or undefined (degrade to a hard cut). */
+function getTransitionRenderer(type) {
+	return transitionRenderers.get(type);
+}
+registerTransitionRenderer("dissolve", ({ ctx, completion, drawLeft, drawRight }) => {
+	drawLeft();
+	ctx.save();
+	ctx.globalAlpha *= completion;
+	drawRight();
+	ctx.restore();
+});
+const fade = (color) => ({ ctx, project, pair, timeMs, completion, drawLeft, drawRight }) => {
+	if (timeMs < pair.cutMs) drawLeft();
+	else drawRight();
+	const veil = completion < .5 ? completion * 2 : (1 - completion) * 2;
+	if (veil > 0) {
+		ctx.save();
+		ctx.globalAlpha *= veil;
+		ctx.fillStyle = color;
+		ctx.fillRect(0, 0, project.width, project.height);
+		ctx.restore();
+	}
+};
+registerTransitionRenderer("fade-black", fade("#000000"));
+registerTransitionRenderer("fade-white", fade("#ffffff"));
+const slide = (direction) => ({ ctx, project, completion, drawLeft, drawRight }) => {
+	drawLeft();
+	const remaining = (1 - completion) * (1 - completion);
+	ctx.save();
+	ctx.translate(remaining * project.width * direction, 0);
+	drawRight();
+	ctx.restore();
+};
+registerTransitionRenderer("slide-left", slide(1));
+registerTransitionRenderer("slide-right", slide(-1));
+const wipe = (fromLeft) => ({ ctx, project, completion, drawLeft, drawRight }) => {
+	drawLeft();
+	const revealed = project.width * completion;
+	ctx.save();
+	ctx.beginPath();
+	if (fromLeft) ctx.rect(0, 0, revealed, project.height);
+	else ctx.rect(project.width - revealed, 0, revealed, project.height);
+	ctx.clip();
+	drawRight();
+	ctx.restore();
+};
+registerTransitionRenderer("wipe-right", wipe(true));
+registerTransitionRenderer("wipe-left", wipe(false));
+//#endregion
+//#region src/text.ts
+function buildFont(style) {
+	const fontStyle = style.fontStyle === "italic" ? "italic " : "";
+	const family = quoteFamily(style.fontFamily);
+	return `${fontStyle}${style.fontWeight} ${style.fontSize}px ${family}`;
+}
+const GENERIC_FAMILIES = new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded"
+]);
+/**
+* Quote a single family name for the canvas font shorthand ("Bebas Neue"
+* breaks the parse unquoted). Generic keywords and pre-built stacks
+* (commas/quotes) pass through untouched.
+*/
+function quoteFamily(family) {
+	const trimmed = family.trim();
+	if (GENERIC_FAMILIES.has(trimmed) || /[,"']/.test(trimmed)) return trimmed;
+	return `"${trimmed}"`;
+}
+/** Render-time case transform; the stored text keeps the user's casing. */
+function applyTextTransform(text, transform) {
+	if (transform === "uppercase") return text.toUpperCase();
+	if (transform === "lowercase") return text.toLowerCase();
+	return text;
+}
+function segmentFont(style, run) {
+	return buildFont({
+		fontStyle: run.fontStyle ?? style.fontStyle ?? "normal",
+		fontWeight: run.fontWeight ?? style.fontWeight,
+		fontSize: style.fontSize,
+		fontFamily: style.fontFamily
+	});
+}
+/**
+* Slice [from, to) of the SOURCE text into measured segments, splitting at
+* run boundaries. Case transform applies per segment (after slicing), so
+* run offsets stay valid even for case-changing transforms.
+*/
+function sliceSegments(measure, text, style, runs, from, to, letterSpacing) {
+	if (to <= from) return [];
+	const edges = new Set([from, to]);
+	for (const run of runs) {
+		if (run.start > from && run.start < to) edges.add(run.start);
+		if (run.end > from && run.end < to) edges.add(run.end);
+	}
+	const sorted = [...edges].sort((a, b) => a - b);
+	const segments = [];
+	for (let i = 0; i < sorted.length - 1; i++) {
+		const a = sorted[i];
+		const b = sorted[i + 1];
+		const run = getRunStyleAt(runs, a);
+		const font = segmentFont(style, run);
+		const segText = applyTextTransform(text.slice(a, b), style.textTransform ?? "none");
+		segments.push({
+			text: segText,
+			width: measure(segText, font, letterSpacing),
+			font,
+			...run.color !== void 0 ? { color: run.color } : {}
+		});
+	}
+	return segments;
+}
+/** Sum of segment widths over a source range (wrap candidate measure). */
+function rangeWidth(measure, text, style, runs, from, to, letterSpacing) {
+	let width = 0;
+	for (const seg of sliceSegments(measure, text, style, runs, from, to, letterSpacing)) width += seg.width;
+	return width;
+}
+function wrapLine(measure, font, line, maxWidth, letterSpacing) {
+	const words = line.match(/\S+/g);
+	if (!words || words.length === 0) return [{
+		text: "",
+		width: 0
+	}];
+	const lines = [];
+	let current = words[0];
+	let currentWidth = measure(current, font, letterSpacing);
+	for (const word of words.slice(1)) {
+		const candidate = `${current} ${word}`;
+		const candidateWidth = measure(candidate, font, letterSpacing);
+		if (candidateWidth <= maxWidth) {
+			current = candidate;
+			currentWidth = candidateWidth;
+			continue;
+		}
+		lines.push({
+			text: current,
+			width: currentWidth
+		});
+		current = word;
+		currentWidth = measure(current, font, letterSpacing);
+	}
+	lines.push({
+		text: current,
+		width: currentWidth
+	});
+	return lines;
+}
+/**
+* Run-aware layout: lines slice at run boundaries into measured segments.
+* Font size is element-global (runs vary only color/weight/italic), so line
+* metrics stay uniform; only widths differ per segment.
+*/
+function layoutRunLines(measure, text, style, runs, innerBoxWidth, letterSpacing) {
+	const lines = [];
+	const finishLine = (from, to) => {
+		const segments = sliceSegments(measure, text, style, runs, from, to, letterSpacing);
+		lines.push({
+			text: segments.map((seg) => seg.text).join(""),
+			width: segments.reduce((sum, seg) => sum + seg.width, 0),
+			segments
+		});
+	};
+	let lineStart = 0;
+	const sourceLines = [];
+	for (let i = 0; i <= text.length; i++) if (i === text.length || text[i] === "\n") {
+		sourceLines.push({
+			start: lineStart,
+			end: i
+		});
+		lineStart = i + 1;
+	}
+	for (const source of sourceLines) {
+		if (!innerBoxWidth) {
+			finishLine(source.start, source.end);
+			continue;
+		}
+		const lineText = text.slice(source.start, source.end);
+		const words = [];
+		const matcher = /\S+/g;
+		for (let m = matcher.exec(lineText); m; m = matcher.exec(lineText)) words.push({
+			start: source.start + m.index,
+			end: source.start + m.index + m[0].length
+		});
+		if (words.length === 0) {
+			finishLine(source.start, source.start);
+			continue;
+		}
+		let visualStart = words[0].start;
+		let lastEnd = words[0].end;
+		for (const word of words.slice(1)) {
+			if (rangeWidth(measure, text, style, runs, visualStart, word.end, letterSpacing) <= innerBoxWidth) {
+				lastEnd = word.end;
+				continue;
+			}
+			finishLine(visualStart, lastEnd);
+			visualStart = word.start;
+			lastEnd = word.end;
+		}
+		finishLine(visualStart, lastEnd);
+	}
+	return lines;
+}
+/**
+* Lay out a (possibly multi-line) text element. Lines come from explicit
+* newlines only unless a text box width is provided.
+*/
+function layoutTextBlock(measure, text, style, options = {}) {
+	const font = buildFont(style);
+	const letterSpacing = style.letterSpacing ?? 0;
+	const lineHeight = style.fontSize * (style.lineHeight ?? 1.25);
+	const padding = style.backgroundColor ? style.fontSize * .25 : 0;
+	const box = options.box;
+	const innerBoxWidth = box ? Math.max(1, box.width - padding * 2) : null;
+	const runs = options.runs && options.runs.length > 0 ? options.runs : null;
+	const lines = runs ? layoutRunLines(measure, text, style, runs, innerBoxWidth, letterSpacing) : applyTextTransform(text, style.textTransform ?? "none").split("\n").flatMap((line) => innerBoxWidth ? wrapLine(measure, font, line, innerBoxWidth, letterSpacing) : [{
+		text: line,
+		width: measure(line, font, letterSpacing)
+	}]);
+	const maxLineWidth = Math.max(0, ...lines.map((l) => l.width));
+	const autoHeight = lines.length * lineHeight + padding * 2;
+	return {
+		lines,
+		font,
+		lineHeight,
+		padding,
+		overflow: box?.overflow ?? null,
+		width: box ? box.width : maxLineWidth + padding * 2,
+		height: box?.height ?? autoHeight
+	};
+}
+/**
+* Greedily wrap caption words into centered lines no wider than `maxWidth`.
+* Falls back to whitespace-split text when word timings are absent.
+*/
+function layoutCaption(measure, element, style, maxWidth) {
+	const font = buildFont(style);
+	const lineHeight = style.fontSize * 1.3;
+	const spaceWidth = measure(" ", font);
+	const words = element.words && element.words.length > 0 ? element.words : element.text.split(/\s+/).filter(Boolean).map((text) => ({
+		text,
+		startMs: void 0,
+		endMs: void 0
+	}));
+	const lines = [];
+	let current = [];
+	let currentWidth = 0;
+	for (const word of words) {
+		const width = measure(word.text, font);
+		const widthWithSpace = current.length === 0 ? width : currentWidth + spaceWidth + width;
+		if (current.length > 0 && widthWithSpace > maxWidth) {
+			lines.push({
+				words: current,
+				width: currentWidth
+			});
+			current = [];
+			currentWidth = 0;
+		}
+		const x = current.length === 0 ? 0 : currentWidth + spaceWidth;
+		current.push({
+			text: word.text,
+			x,
+			width,
+			startMs: word.startMs,
+			endMs: word.endMs
+		});
+		currentWidth = x + width;
+	}
+	if (current.length > 0) lines.push({
+		words: current,
+		width: currentWidth
+	});
+	return {
+		lines,
+		font,
+		lineHeight,
+		spaceWidth
+	};
+}
+//#endregion
+//#region src/renderers.ts
+const renderers = /* @__PURE__ */ new Map();
+/**
+* Register a renderer for an element type. Built-in types can be overridden;
+* custom element types (added via custom commands) plug in here — the
+* compositor side of the engine's command registry.
+*/
+function registerElementRenderer(type, renderer) {
+	renderers.set(type, renderer);
+}
+function getElementRenderer(type) {
+	return renderers.get(type);
+}
+/**
+* `letterSpacing` shipped in Chromium 99+/Safari 17 but is still missing from
+* some engines (and OffscreenCanvas typings); feature-detect and degrade to
+* no tracking — measurement and drawing stay consistent either way.
+*/
+function setLetterSpacing(ctx, px) {
+	if ("letterSpacing" in ctx) ctx.letterSpacing = `${px}px`;
+}
+function measureWith(ctx) {
+	return (text, font, letterSpacingPx) => {
+		ctx.font = font;
+		setLetterSpacing(ctx, letterSpacingPx ?? 0);
+		return ctx.measureText(text).width;
+	};
+}
+function getImageSize(source) {
+	if (typeof HTMLVideoElement !== "undefined" && source instanceof HTMLVideoElement) return {
+		width: source.videoWidth,
+		height: source.videoHeight
+	};
+	if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) return {
+		width: source.naturalWidth,
+		height: source.naturalHeight
+	};
+	if (typeof VideoFrame !== "undefined" && source instanceof VideoFrame) return {
+		width: source.displayWidth,
+		height: source.displayHeight
+	};
+	const maybe = source;
+	return {
+		width: typeof maybe.width === "number" ? maybe.width : maybe.width?.baseVal.value ?? 0,
+		height: typeof maybe.height === "number" ? maybe.height : maybe.height?.baseVal.value ?? 0
+	};
+}
+/** Resolve an element's visual chrome to frame coordinates (backend input). */
+function chromeOf(context, element) {
+	const center = toCanvasPoint(context.project, element.transform.x, element.transform.y);
+	return {
+		centerX: center.x,
+		centerY: center.y,
+		rotationDeg: element.transform.rotation,
+		scaleX: element.transform.scaleX,
+		scaleY: element.transform.scaleY,
+		opacity: element.opacity,
+		blendMode: element.blendMode,
+		effects: element.effects
+	};
+}
+/**
+* Transform + opacity + effect-stack filter + blend mode around a canvas2d
+* draw (see backend.ts `applyChrome` for the actual state handling).
+*/
+function withTransform(ctx, context, element, draw) {
+	applyChrome(ctx, chromeOf(context, element), draw);
+}
+/**
+* Frame chrome around a centered `dw`×`dh` media draw: drop shadow behind
+* the rounded rect, rounded clip on the content, inside border on top — the
+* layout-slot look, available as element-level fields (style.ts primitives).
+* Strokes paint INSIDE the bounds (clip + doubled width) so the frame's
+* geometry — and every snap/handle derived from it — stays exact.
+*/
+function withFrameChrome(ctx, style, dw, dh, draw) {
+	const radius = (style.cornerRadius ?? 0) * Math.min(dw, dh);
+	const tracePath = () => {
+		ctx.beginPath();
+		ctx.roundRect(-dw / 2, -dh / 2, dw, dh, radius);
+	};
+	if (style.shadow) {
+		ctx.save();
+		ctx.shadowColor = style.shadow.color;
+		ctx.shadowBlur = style.shadow.blur;
+		ctx.shadowOffsetX = style.shadow.offsetX;
+		ctx.shadowOffsetY = style.shadow.offsetY;
+		ctx.fillStyle = "#000";
+		tracePath();
+		ctx.fill();
+		ctx.restore();
+	}
+	ctx.save();
+	if (radius > 0) {
+		tracePath();
+		ctx.clip();
+	}
+	draw();
+	ctx.restore();
+	if (style.stroke) {
+		ctx.save();
+		tracePath();
+		ctx.clip();
+		ctx.strokeStyle = style.stroke.color;
+		ctx.lineWidth = style.stroke.width * 2;
+		tracePath();
+		ctx.stroke();
+		ctx.restore();
+	}
+}
+/** Source rect for a crop mask, in the actual frame's pixel space. */
+function cropSourceRect(crop, frame) {
+	if (!crop) return null;
+	const { width: fw, height: fh } = getImageSize(frame);
+	if (fw <= 0 || fh <= 0) return null;
+	return {
+		sx: crop.x * fw,
+		sy: crop.y * fh,
+		sw: crop.w * fw,
+		sh: crop.h * fh
+	};
+}
+/**
+* Composite a media frame: the plain case (no stroke/shadow chrome) goes
+* through the backend's structured quad path — on GPU backends that is the
+* zero-copy fast path with WGSL effects — while framed draws keep the
+* canvas2d chrome (shadow + rounded clip + inside border) on the raster
+* surface.
+*/
+function drawMediaFrame(context, element, frame, dw, dh) {
+	const src = cropSourceRect(element.crop, frame);
+	if (!element.stroke && !element.shadow) {
+		context.backend.drawImageQuad({
+			image: frame,
+			src,
+			dw,
+			dh,
+			cornerRadius: (element.cornerRadius ?? 0) * Math.min(dw, dh)
+		}, chromeOf(context, element));
+		return;
+	}
+	const ctx = context.ctx;
+	withTransform(ctx, context, element, () => {
+		withFrameChrome(ctx, element, dw, dh, () => {
+			if (src) ctx.drawImage(frame, src.sx, src.sy, src.sw, src.sh, -dw / 2, -dh / 2, dw, dh);
+			else ctx.drawImage(frame, -dw / 2, -dh / 2, dw, dh);
+		});
+	});
+}
+const renderVideo = (element, context) => {
+	if (!context.source) return;
+	const sourceTimeMs = Math.max(0, getSourceTimeMs(element, context.timeMs - element.startMs));
+	const frame = context.source.getFrame(element.assetId, sourceTimeMs);
+	if (!frame) return;
+	const asset = context.project.assets[element.assetId];
+	const { width, height } = asset?.width && asset?.height ? {
+		width: asset.width,
+		height: asset.height
+	} : getImageSize(frame);
+	if (width <= 0 || height <= 0) return;
+	drawMediaFrame(context, element, frame, width * (element.crop?.w ?? 1), height * (element.crop?.h ?? 1));
+};
+const renderImage = (element, context) => {
+	if (!context.source) return;
+	const frame = context.source.getFrame(element.assetId, 0);
+	if (!frame) return;
+	const { width, height } = getImageSize(frame);
+	if (width <= 0 || height <= 0) return;
+	drawMediaFrame(context, element, frame, width * (element.crop?.w ?? 1), height * (element.crop?.h ?? 1));
+};
+const renderText = (element, context) => {
+	const { ctx } = context;
+	const layout = layoutTextBlock(measureWith(ctx), element.text, element.style, {
+		box: element.box,
+		...element.runs ? { runs: element.runs } : {}
+	});
+	withTransform(ctx, context, element, () => {
+		if (element.style.backgroundColor) {
+			ctx.fillStyle = element.style.backgroundColor;
+			ctx.beginPath();
+			ctx.roundRect(-layout.width / 2, -layout.height / 2, layout.width, layout.height, element.style.fontSize * .15);
+			ctx.fill();
+		}
+		if (layout.overflow === "clip") {
+			ctx.beginPath();
+			ctx.rect(-layout.width / 2, -layout.height / 2, layout.width, layout.height);
+			ctx.clip();
+		}
+		const { style } = element;
+		ctx.font = layout.font;
+		setLetterSpacing(ctx, style.letterSpacing ?? 0);
+		ctx.textBaseline = "middle";
+		const stroke = style.stroke && style.stroke.width > 0 ? style.stroke : null;
+		if (stroke) {
+			ctx.strokeStyle = stroke.color;
+			ctx.lineWidth = stroke.width * 2;
+			ctx.lineJoin = "round";
+		}
+		const innerWidth = Math.max(1, layout.width - layout.padding * 2);
+		const setShadow = () => {
+			if (!style.shadow) return;
+			ctx.shadowColor = style.shadow.color;
+			ctx.shadowBlur = style.shadow.blur;
+			ctx.shadowOffsetX = style.shadow.offsetX;
+			ctx.shadowOffsetY = style.shadow.offsetY;
+		};
+		const clearShadow = () => {
+			ctx.shadowColor = "transparent";
+			ctx.shadowBlur = 0;
+			ctx.shadowOffsetX = 0;
+			ctx.shadowOffsetY = 0;
+		};
+		for (let i = 0; i < layout.lines.length; i++) {
+			const line = layout.lines[i];
+			const y = -layout.height / 2 + layout.padding + layout.lineHeight * (i + .5);
+			if (line.segments) {
+				ctx.textAlign = "left";
+				let x = style.align === "left" ? -innerWidth / 2 : style.align === "right" ? innerWidth / 2 - line.width : -line.width / 2;
+				for (const segment of line.segments) {
+					ctx.font = segment.font;
+					setShadow();
+					if (stroke) {
+						ctx.strokeText(segment.text, x, y);
+						clearShadow();
+					}
+					ctx.fillStyle = segment.color ?? style.color;
+					ctx.fillText(segment.text, x, y);
+					if (style.shadow && !stroke) clearShadow();
+					x += segment.width;
+				}
+				ctx.font = layout.font;
+				continue;
+			}
+			let x;
+			if (style.align === "left") {
+				ctx.textAlign = "left";
+				x = -innerWidth / 2;
+			} else if (style.align === "right") {
+				ctx.textAlign = "right";
+				x = innerWidth / 2;
+			} else {
+				ctx.textAlign = "center";
+				x = 0;
+			}
+			setShadow();
+			if (stroke) {
+				ctx.strokeText(line.text, x, y);
+				clearShadow();
+			}
+			ctx.fillStyle = style.color;
+			ctx.fillText(line.text, x, y);
+			if (style.shadow && !stroke) clearShadow();
+		}
+	});
+};
+const renderCaption = (element, context) => {
+	const { ctx, project, timeMs } = context;
+	const style = element.style;
+	const maxWidth = project.width * .85;
+	const layout = layoutCaption(measureWith(ctx), element, style, maxWidth);
+	if (layout.lines.length === 0) return;
+	const blockHeight = layout.lines.length * layout.lineHeight;
+	let blockTop;
+	if (style.position === "top") blockTop = project.height * .08;
+	else if (style.position === "middle") blockTop = project.height / 2 - blockHeight / 2;
+	else blockTop = project.height * .92 - blockHeight;
+	const relativeMs = timeMs - element.startMs;
+	const padX = style.fontSize * .4;
+	const padY = style.fontSize * .18;
+	ctx.save();
+	ctx.font = layout.font;
+	ctx.textBaseline = "middle";
+	ctx.textAlign = "left";
+	for (let i = 0; i < layout.lines.length; i++) {
+		const line = layout.lines[i];
+		const lineLeft = project.width / 2 - line.width / 2;
+		const lineCenterY = blockTop + layout.lineHeight * (i + .5);
+		if (style.backgroundColor) {
+			ctx.fillStyle = style.backgroundColor;
+			ctx.beginPath();
+			ctx.roundRect(lineLeft - padX, lineCenterY - layout.lineHeight / 2 + (layout.lineHeight - style.fontSize) / 2 - padY, line.width + padX * 2, style.fontSize + padY * 2, style.fontSize * .15);
+			ctx.fill();
+		}
+		for (const word of line.words) {
+			ctx.fillStyle = style.activeWordColor !== void 0 && word.startMs !== void 0 && word.endMs !== void 0 && relativeMs >= word.startMs && relativeMs < word.endMs ? style.activeWordColor : style.color;
+			ctx.fillText(word.text, lineLeft + word.x, lineCenterY);
+		}
+	}
+	ctx.restore();
+};
+/**
+* Multicam: composes the sources of the ACTIVE layout (the cut under the
+* playhead) into normalized slot rects — cover/contain crop via 9-arg
+* drawImage, rounded clip, optional drop shadow. Same renderer for preview
+* and export; decode parity comes from getFrameRequests.
+*/
+const renderMulticam = (element, context) => {
+	if (!context.source) return;
+	const { ctx, project } = context;
+	const W = project.width;
+	const H = project.height;
+	const drawLayout = (layout) => {
+		if (!layout) return;
+		withTransform(ctx, context, element, () => {
+			for (const slot of layout.slots) {
+				const source = element.sources.find((s) => s.key === slot.source);
+				if (!source) continue;
+				const sourceTimeMs = getMulticamSourceTimeMs(element, source, context.timeMs);
+				const frame = context.source.getFrame(source.assetId, sourceTimeMs);
+				if (!frame) continue;
+				const { width: fw, height: fh } = getImageSize(frame);
+				if (fw <= 0 || fh <= 0) continue;
+				const rx = (slot.rect.x - .5) * W;
+				const ry = (slot.rect.y - .5) * H;
+				const rw = slot.rect.w * W;
+				const rh = slot.rect.h * H;
+				const radius = slot.cornerRadius * Math.min(rw, rh);
+				if (slot.shadow) {
+					ctx.save();
+					ctx.shadowColor = "rgba(0, 0, 0, 0.45)";
+					ctx.shadowBlur = Math.min(rw, rh) * .12;
+					ctx.shadowOffsetY = Math.min(rw, rh) * .04;
+					ctx.fillStyle = "#000";
+					ctx.beginPath();
+					ctx.roundRect(rx, ry, rw, rh, radius);
+					ctx.fill();
+					ctx.restore();
+				}
+				const scale = slot.fit === "cover" ? Math.max(rw / fw, rh / fh) : Math.min(rw / fw, rh / fh);
+				const sw = Math.min(fw, rw / scale);
+				const sh = Math.min(fh, rh / scale);
+				const sx = (fw - sw) * (slot.focus?.x ?? .5);
+				const sy = (fh - sh) * (slot.focus?.y ?? .5);
+				const dw = sw * scale;
+				const dh = sh * scale;
+				const dx = rx + (rw - dw) / 2;
+				const dy = ry + (rh - dh) / 2;
+				ctx.save();
+				if (radius > 0) {
+					ctx.beginPath();
+					ctx.roundRect(rx, ry, rw, rh, radius);
+					ctx.clip();
+				}
+				ctx.drawImage(frame, sx, sy, sw, sh, dx, dy, dw, dh);
+				ctx.restore();
+				if (slot.stroke) {
+					ctx.save();
+					ctx.beginPath();
+					ctx.roundRect(rx, ry, rw, rh, radius);
+					ctx.clip();
+					ctx.strokeStyle = slot.stroke.color;
+					ctx.lineWidth = slot.stroke.width * 2;
+					ctx.beginPath();
+					ctx.roundRect(rx, ry, rw, rh, radius);
+					ctx.stroke();
+					ctx.restore();
+				}
+			}
+		});
+	};
+	const window = getAngleTransitionAt(element, context.timeMs - element.startMs);
+	if (window) {
+		const renderer = getTransitionRenderer(window.type);
+		if (renderer) {
+			const pair = {
+				left: element,
+				right: element,
+				cutMs: element.startMs + window.cutMs,
+				durationMs: window.durationMs,
+				type: window.type
+			};
+			renderer({
+				ctx,
+				project,
+				pair,
+				timeMs: context.timeMs,
+				completion: getTransitionCompletion(pair, context.timeMs),
+				drawLeft: () => drawLayout(getLayout(project.layouts, window.fromLayoutId)),
+				drawRight: () => drawLayout(getLayout(project.layouts, window.toLayoutId))
+			});
+			return;
+		}
+	}
+	drawLayout(getActiveLayout(project, element, context.timeMs));
+};
+registerElementRenderer("video", renderVideo);
+registerElementRenderer("multicam", renderMulticam);
+registerElementRenderer("image", renderImage);
+registerElementRenderer("text", renderText);
+registerElementRenderer("caption", renderCaption);
+registerElementRenderer("audio", () => {});
+//#endregion
+//#region src/render-frame.ts
+/**
+* Render one frame of `project` at `timeMs` into `ctx` (canvas2d path).
+*
+* Pure with respect to inputs: the same project, time, and frame source
+* produce the same pixels — which is what makes the export path
+* deterministic. The context is expected to be in project coordinates
+* (`project.width` × `project.height`); callers rendering at other sizes
+* apply their own transform before calling.
+*/
+function renderFrame(ctx, project, timeMs, options = {}) {
+	renderFrameWith(new Canvas2DBackend(ctx, project.width, project.height), project, timeMs, options);
+}
+/**
+* Render one frame through an explicit {@link RenderBackend}. The
+* track/element walk, transition pairing, and animation resolution here are
+* backend-agnostic; only the draws differ.
+*
+* Tracks render bottom-up (index 0 first), elements in start order. Clips
+* joined by a transition render through the blend instead of the normal
+* pass while the window (centered on their cut) is active.
+*/
+function renderFrameWith(backend, project, timeMs, options = {}) {
+	backend.beginFrame(options.backgroundColor ?? "#000000");
+	for (const track of project.tracks) {
+		if (track.hidden) continue;
+		const pairs = getActiveTransitionPairs(track, timeMs);
+		const blending = /* @__PURE__ */ new Set();
+		for (const pair of pairs) {
+			blending.add(pair.left.id);
+			blending.add(pair.right.id);
+		}
+		for (const element of track.elements) {
+			if (element.startMs > timeMs) break;
+			if (options.skipElementIds?.has(element.id)) continue;
+			if (blending.has(element.id)) continue;
+			if (!isElementActiveAt(element, timeMs)) continue;
+			renderElement(backend, project, track, element, timeMs, options);
+		}
+		for (const pair of pairs) renderTransition(backend, project, track, pair, timeMs, options);
+	}
+	backend.endFrame();
+}
+function renderElement(backend, project, track, element, timeMs, options) {
+	const renderer = getElementRenderer(element.type);
+	if (!renderer) return;
+	if (renderElementWithMotionBlur(backend, project, track, element, timeMs, options, renderer)) return;
+	renderer(resolveAnimatedElement(element, timeMs), createElementContext(backend, project, track, timeMs, options.source));
+}
+/**
+* Blend a transition pair at `timeMs` via its registered renderer. Unknown
+* types degrade to a hard cut (left before the cut, right after) so a
+* project from a plugin you don't have still plays.
+*
+* The mix manipulates canvas2d state (alpha, clips, translations) around the
+* pair's draws, so the whole window renders inside a raster scope — on GPU
+* backends both sides rasterize into the shared scratch and composite as one
+* layer, which is exactly the canvas2d-correct result.
+*/
+function renderTransition(backend, project, track, pair, timeMs, options) {
+	const completion = getTransitionCompletion(pair, timeMs);
+	backend.pushRasterScope();
+	try {
+		const context = {
+			ctx: backend.acquireRaster(),
+			project,
+			pair,
+			timeMs,
+			completion,
+			drawLeft: () => renderElement(backend, project, track, pair.left, timeMs, options),
+			drawRight: () => renderElement(backend, project, track, pair.right, timeMs, options)
+		};
+		const renderer = getTransitionRenderer(pair.type);
+		if (renderer) renderer(context);
+		else if (timeMs < pair.cutMs) context.drawLeft();
+		else context.drawRight();
+	} finally {
+		backend.popRasterScope();
+	}
+}
+//#endregion
+//#region src/gpu-effects.ts
+/**
+* GPU-only effects — they exist only on the WebGPU backend (the canvas2d
+* reference path has no per-pixel programmability, so `toFilter` is inert
+* and the layer renders without them there). Registered through the same
+* registry the CSS-filter built-ins use, so they parse in saved projects,
+* validate, and get inspector UI for free.
+*/
+const curvePointSchema = z.object({
+	/** Input level 0..1. */
+	x: z.number().min(0).max(1),
+	/** Output level 0..1. */
+	y: z.number().min(0).max(1)
+});
+let registered = false;
+/** Idempotent; the compositor registers these at module load. */
+function registerGpuEffectTypes() {
+	if (registered) return;
+	registered = true;
+	registerEffectType({
+		type: "chroma-key",
+		shape: {
+			/** Key color to remove (green-screen green by default). */
+			keyColor: z.string().default("#00ff00"),
+			/** Chroma distance (YCbCr plane) treated as fully transparent. */
+			tolerance: z.number().min(0).max(1).default(.25),
+			/** Distance band over which alpha ramps back in. */
+			softness: z.number().min(0).max(1).default(.1),
+			/** How strongly key-colored spill is pulled out of kept pixels. */
+			spillSuppression: z.number().min(0).max(1).default(.5)
+		},
+		toFilter: () => "",
+		param: {
+			key: "tolerance",
+			min: 0,
+			max: 1
+		}
+	});
+	registerEffectType({
+		type: "curves",
+		shape: {
+			/** Master curve, applied after the per-channel ones. */
+			rgb: z.array(curvePointSchema).optional(),
+			red: z.array(curvePointSchema).optional(),
+			green: z.array(curvePointSchema).optional(),
+			blue: z.array(curvePointSchema).optional()
+		},
+		toFilter: () => ""
+	});
+	registerEffectType({
+		type: "lut3d",
+		shape: {
+			/**
+			* Identifier of a LUT registered with the WebGPU backend at runtime
+			* (`WebGPUBackend.registerLut3D`) — LUT pixel data doesn't belong in
+			* project JSON.
+			*/
+			lutId: z.string().min(1),
+			/** Blend between original (0) and graded (1). */
+			intensity: z.number().min(0).max(1).default(1)
+		},
+		toFilter: () => ""
+	});
+}
+registerGpuEffectTypes();
+//#endregion
+//#region src/webgpu/color.ts
+/** Minimal CSS color → linear-ish RGBA for GPU clear values (0..1, straight). */
+const NAMED = {
+	black: [
+		0,
+		0,
+		0,
+		1
+	],
+	white: [
+		1,
+		1,
+		1,
+		1
+	],
+	red: [
+		1,
+		0,
+		0,
+		1
+	],
+	green: [
+		0,
+		128 / 255,
+		0,
+		1
+	],
+	blue: [
+		0,
+		0,
+		1,
+		1
+	],
+	gray: [
+		128 / 255,
+		128 / 255,
+		128 / 255,
+		1
+	],
+	grey: [
+		128 / 255,
+		128 / 255,
+		128 / 255,
+		1
+	],
+	transparent: [
+		0,
+		0,
+		0,
+		0
+	]
+};
+/**
+* Parse the CSS colors the compositor actually meets (#hex, rgb()/rgba(),
+* a few names). Unknown input falls back to opaque black — the same color
+* the canvas2d path would effectively paint for an invalid background.
+*/
+function parseCssColor(input) {
+	const value = input.trim().toLowerCase();
+	const named = NAMED[value];
+	if (named) return [...named];
+	if (value.startsWith("#")) {
+		const hex = value.slice(1);
+		if (hex.length === 3 || hex.length === 4) {
+			const parts = [...hex].map((c) => Number.parseInt(c + c, 16));
+			if (parts.every((p) => Number.isFinite(p))) return [
+				parts[0] / 255,
+				parts[1] / 255,
+				parts[2] / 255,
+				hex.length === 4 ? parts[3] / 255 : 1
+			];
+		}
+		if (hex.length === 6 || hex.length === 8) {
+			const parts = [
+				0,
+				2,
+				4,
+				6
+			].slice(0, hex.length / 2).map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
+			if (parts.every((p) => Number.isFinite(p))) return [
+				parts[0] / 255,
+				parts[1] / 255,
+				parts[2] / 255,
+				hex.length === 8 ? parts[3] / 255 : 1
+			];
+		}
+	}
+	const fn = value.match(/^rgba?\(([^)]+)\)$/);
+	if (fn) {
+		const parts = fn[1].split(/[\s,/]+/).filter(Boolean);
+		if (parts.length >= 3) {
+			const channel = (raw) => raw.endsWith("%") ? Number.parseFloat(raw) / 100 * 255 : Number.parseFloat(raw);
+			const r = channel(parts[0]);
+			const g = channel(parts[1]);
+			const b = channel(parts[2]);
+			const rawA = parts[3];
+			const a = rawA === void 0 ? 1 : rawA.endsWith("%") ? Number.parseFloat(rawA) / 100 : Number.parseFloat(rawA);
+			if ([
+				r,
+				g,
+				b,
+				a
+			].every((p) => Number.isFinite(p))) return [
+				Math.min(1, Math.max(0, r / 255)),
+				Math.min(1, Math.max(0, g / 255)),
+				Math.min(1, Math.max(0, b / 255)),
+				Math.min(1, Math.max(0, a))
+			];
+		}
+	}
+	return [
+		0,
+		0,
+		0,
+		1
+	];
+}
+//#endregion
+//#region src/webgpu/effect-plan.ts
+/**
+* Compile an element's effect stack into the GPU pass plan, preserving
+* stack order (CSS filter semantics: left to right — blur-then-brightness
+* is not brightness-then-blur). Consecutive color-space effects fuse into
+* ONE fragment pass that loops an ordered op list; blur, drop-shadow, and
+* 3D LUTs become their own passes. `css` (raw CSS filter strings) cannot
+* run on GPU — those layers fall back to the canvas2d raster path.
+*/
+/** Op kinds, mirrored in COLOR_SHADER — keep the numbering in sync. */
+const COLOR_OP = {
+	brightness: 1,
+	contrast: 2,
+	saturate: 3,
+	grayscale: 4,
+	sepia: 5,
+	hueRotate: 6,
+	invert: 7,
+	chromaKey: 8,
+	curves: 9
+};
+const params = (...values) => values;
+/** Monotone-x piecewise-linear curve → 256-entry LUT (identity when empty). */
+function curveToLut(points) {
+	const lut = new Float32Array(256);
+	const sorted = [...points ?? []].sort((a, b) => a.x - b.x);
+	if (sorted.length === 0) {
+		for (let i = 0; i < 256; i++) lut[i] = i / 255;
+		return lut;
+	}
+	for (let i = 0; i < 256; i++) {
+		const x = i / 255;
+		const after = sorted.findIndex((p) => p.x >= x);
+		if (after < 0) lut[i] = sorted[sorted.length - 1].y;
+		else if (after === 0) lut[i] = sorted[0].y;
+		else {
+			const a = sorted[after - 1];
+			const b = sorted[after];
+			const t = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+			lut[i] = a.y + (b.y - a.y) * t;
+		}
+		lut[i] = Math.min(1, Math.max(0, lut[i]));
+	}
+	return lut;
+}
+function planEffects(effects) {
+	const plan = {
+		passes: [],
+		unsupported: false
+	};
+	if (!effects) return plan;
+	const colorRun = () => {
+		const last = plan.passes[plan.passes.length - 1];
+		if (last && last.kind === "color" && last.ops.length < 16 && !last.curves) return last;
+		const run = {
+			kind: "color",
+			ops: [],
+			curves: null
+		};
+		plan.passes.push(run);
+		return run;
+	};
+	for (const effect of effects) {
+		if (!effect.enabled) continue;
+		switch (effect.type) {
+			case "brightness":
+				if (effect.amount !== 1) colorRun().ops.push({
+					kind: COLOR_OP.brightness,
+					params: params(effect.amount)
+				});
+				break;
+			case "contrast":
+				if (effect.amount !== 1) colorRun().ops.push({
+					kind: COLOR_OP.contrast,
+					params: params(effect.amount)
+				});
+				break;
+			case "saturate":
+				if (effect.amount !== 1) colorRun().ops.push({
+					kind: COLOR_OP.saturate,
+					params: params(effect.amount)
+				});
+				break;
+			case "grayscale":
+				if (effect.amount > 0) colorRun().ops.push({
+					kind: COLOR_OP.grayscale,
+					params: params(effect.amount)
+				});
+				break;
+			case "sepia":
+				if (effect.amount > 0) colorRun().ops.push({
+					kind: COLOR_OP.sepia,
+					params: params(effect.amount)
+				});
+				break;
+			case "hue-rotate":
+				if (effect.degrees !== 0) colorRun().ops.push({
+					kind: COLOR_OP.hueRotate,
+					params: params(effect.degrees * Math.PI / 180)
+				});
+				break;
+			case "invert":
+				if (effect.amount > 0) colorRun().ops.push({
+					kind: COLOR_OP.invert,
+					params: params(effect.amount)
+				});
+				break;
+			case "blur":
+				if (effect.radius > 0) plan.passes.push({
+					kind: "blur",
+					radius: effect.radius
+				});
+				break;
+			case "drop-shadow":
+				plan.passes.push({
+					kind: "shadow",
+					offsetX: effect.offsetX,
+					offsetY: effect.offsetY,
+					blur: effect.blur,
+					color: parseCssColor(effect.color)
+				});
+				break;
+			case "css":
+				plan.unsupported = true;
+				break;
+			default: {
+				const record = effect;
+				if (record.type === "chroma-key") {
+					const key = parseCssColor(String(record.keyColor ?? "#00ff00"));
+					colorRun().ops.push({
+						kind: COLOR_OP.chromaKey,
+						params: params(key[0], key[1], key[2], Number(record.tolerance ?? .25), Number(record.softness ?? .1), Number(record.spillSuppression ?? .5))
+					});
+				} else if (record.type === "curves") {
+					const channels = record;
+					const master = curveToLut(channels.rgb);
+					const compose = (channel) => {
+						const out = new Float32Array(256);
+						for (let i = 0; i < 256; i++) out[i] = master[Math.round(channel[i] * 255)];
+						return out;
+					};
+					const run = colorRun();
+					run.curves = {
+						r: compose(curveToLut(channels.red)),
+						g: compose(curveToLut(channels.green)),
+						b: compose(curveToLut(channels.blue))
+					};
+					run.ops.push({
+						kind: COLOR_OP.curves,
+						params: params()
+					});
+				} else if (record.type === "lut3d") plan.passes.push({
+					kind: "lut3d",
+					lutId: String(record.lutId ?? ""),
+					intensity: Number(record.intensity ?? 1)
+				});
+				else plan.unsupported = true;
+			}
+		}
+	}
+	return plan;
+}
+/** True when this stack can only render through the canvas2d raster path. */
+function hasUnsupportedEffects(effects) {
+	if (!effects) return false;
+	return planEffects(effects).unsupported;
+}
+//#endregion
+//#region src/webgpu/shaders.ts
+/**
+* WGSL for the WebGPU backend. All composite work happens in full-frame
+* passes over a ping-pong pair of offscreen textures: each pass samples the
+* accumulated frame (dst) and one prepared layer texture (src), maps the
+* fragment back into the layer's local space with the inverse chrome
+* transform, and blends by mode — one blend.wgsl with a mode switch,
+* correctness over micro-optimization.
+*
+* Layer textures hold PREMULTIPLIED alpha (canvas uploads premultiply;
+* VideoFrames are effectively opaque). Blend formulas operate on straight
+* color, so src/dst unpremultiply around the math.
+*/
+/** Fullscreen triangle; uv covers [0,1]² across the target. */
+const FULLSCREEN_VERTEX = `
+struct VertexOut {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vs_main(@builtin(vertex_index) index: u32) -> VertexOut {
+  var out: VertexOut;
+  let pos = array<vec2f, 3>(vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0));
+  let p = pos[index];
+  out.position = vec4f(p, 0.0, 1.0);
+  out.uv = vec2f((p.x + 1.0) * 0.5, (1.0 - p.y) * 0.5);
+  return out;
+}
+`;
+/**
+* The composite pass: dst = blend(layer at inverse-transformed position,
+* dst). Pixels outside the layer's quad pass dst through untouched.
+*/
+const COMPOSITE_SHADER = `
+${FULLSCREEN_VERTEX}
+
+struct CompositeUniforms {
+  // local = inv * (frame - center)
+  inv: vec4f,          // m00, m01, m10, m11
+  center: vec2f,
+  halfSize: vec2f,     // dw/2, dh/2
+  frameSize: vec2f,
+  cornerRadius: f32,
+  opacity: f32,
+  mode: u32,
+  identity: u32,       // 1 = raster layer: sample at uv directly
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var dstTex: texture_2d<f32>;
+@group(0) @binding(1) var srcTex: texture_2d<f32>;
+@group(0) @binding(2) var srcSampler: sampler;
+@group(0) @binding(3) var<uniform> u: CompositeUniforms;
+
+
+fn lum(c: vec3f) -> f32 {
+  return dot(c, vec3f(0.3, 0.59, 0.11));
+}
+
+fn clip_color(c_in: vec3f) -> vec3f {
+  var c = c_in;
+  let l = lum(c);
+  let n = min(min(c.r, c.g), c.b);
+  let x = max(max(c.r, c.g), c.b);
+  if (n < 0.0) {
+    c = vec3f(l) + (c - vec3f(l)) * l / max(l - n, 1e-6);
+  }
+  if (x > 1.0) {
+    c = vec3f(l) + (c - vec3f(l)) * (1.0 - l) / max(x - l, 1e-6);
+  }
+  return c;
+}
+
+fn set_lum(c: vec3f, l: f32) -> vec3f {
+  return clip_color(c + vec3f(l - lum(c)));
+}
+
+fn sat(c: vec3f) -> f32 {
+  return max(max(c.r, c.g), c.b) - min(min(c.r, c.g), c.b);
+}
+
+fn set_sat(c: vec3f, s: f32) -> vec3f {
+  let mn = min(min(c.r, c.g), c.b);
+  let mx = max(max(c.r, c.g), c.b);
+  var out = vec3f(0.0);
+  if (mx > mn) {
+    out = (c - vec3f(mn)) * s / (mx - mn);
+  }
+  return out;
+}
+
+fn hard_light_channel(s: f32, d: f32) -> f32 {
+  if (s <= 0.5) { return 2.0 * s * d; }
+  return 1.0 - 2.0 * (1.0 - s) * (1.0 - d);
+}
+
+fn soft_light_channel(s: f32, d: f32) -> f32 {
+  if (s <= 0.5) {
+    return d - (1.0 - 2.0 * s) * d * (1.0 - d);
+  }
+  var dd: f32;
+  if (d <= 0.25) {
+    dd = ((16.0 * d - 12.0) * d + 4.0) * d;
+  } else {
+    dd = sqrt(d);
+  }
+  return d + (2.0 * s - 1.0) * (dd - d);
+}
+
+fn color_dodge_channel(s: f32, d: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (s >= 1.0) { return 1.0; }
+  return min(1.0, d / (1.0 - s));
+}
+
+fn color_burn_channel(s: f32, d: f32) -> f32 {
+  if (d >= 1.0) { return 1.0; }
+  if (s <= 0.0) { return 0.0; }
+  return 1.0 - min(1.0, (1.0 - d) / s);
+}
+
+// W3C compositing-and-blending-1 B(Cb, Cs); straight (unpremultiplied) color.
+fn blend_colors(mode: u32, src: vec3f, dst: vec3f) -> vec3f {
+  switch (mode) {
+    case 1u: { return src * dst; }                                    // multiply
+    case 2u: { return src + dst - src * dst; }                        // screen
+    case 3u: {                                                        // overlay
+      return vec3f(
+        hard_light_channel(dst.r, src.r),
+        hard_light_channel(dst.g, src.g),
+        hard_light_channel(dst.b, src.b),
+      );
+    }
+    case 4u: { return min(src, dst); }                                // darken
+    case 5u: { return max(src, dst); }                                // lighten
+    case 6u: {                                                        // color-dodge
+      return vec3f(
+        color_dodge_channel(src.r, dst.r),
+        color_dodge_channel(src.g, dst.g),
+        color_dodge_channel(src.b, dst.b),
+      );
+    }
+    case 7u: {                                                        // color-burn
+      return vec3f(
+        color_burn_channel(src.r, dst.r),
+        color_burn_channel(src.g, dst.g),
+        color_burn_channel(src.b, dst.b),
+      );
+    }
+    case 8u: {                                                        // hard-light
+      return vec3f(
+        hard_light_channel(src.r, dst.r),
+        hard_light_channel(src.g, dst.g),
+        hard_light_channel(src.b, dst.b),
+      );
+    }
+    case 9u: {                                                        // soft-light
+      return vec3f(
+        soft_light_channel(src.r, dst.r),
+        soft_light_channel(src.g, dst.g),
+        soft_light_channel(src.b, dst.b),
+      );
+    }
+    case 10u: { return abs(src - dst); }                              // difference
+    case 11u: { return src + dst - 2.0 * src * dst; }                 // exclusion
+    case 12u: { return set_lum(set_sat(src, sat(dst)), lum(dst)); }   // hue
+    case 13u: { return set_lum(set_sat(dst, sat(src)), lum(dst)); }   // saturation
+    case 14u: { return set_lum(src, lum(dst)); }                      // color
+    case 15u: { return set_lum(dst, lum(src)); }                      // luminosity
+    default: { return src; }                                          // normal
+  }
+}
+
+
+// Signed distance to a centered rounded rect of half-size b, radius r.
+fn rounded_rect_sdf(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - r;
+}
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  let dst = textureSampleLevel(dstTex, srcSampler, in.uv, 0.0);
+
+  var src: vec4f;
+  if (u.identity == 1u) {
+    src = textureSampleLevel(srcTex, srcSampler, in.uv, 0.0);
+  } else {
+    let frame = in.uv * u.frameSize;
+    let local = vec2f(
+      u.inv.x * (frame.x - u.center.x) + u.inv.y * (frame.y - u.center.y),
+      u.inv.z * (frame.x - u.center.x) + u.inv.w * (frame.y - u.center.y),
+    );
+    if (abs(local.x) > u.halfSize.x || abs(local.y) > u.halfSize.y) {
+      return dst;
+    }
+    let uv = (local + u.halfSize) / (u.halfSize * 2.0);
+    src = textureSampleLevel(srcTex, srcSampler, uv, 0.0);
+    if (u.cornerRadius > 0.0) {
+      let d = rounded_rect_sdf(local, u.halfSize, u.cornerRadius);
+      // ~1px feather in local units (no derivatives needed for our scales).
+      src = src * clamp(0.5 - d, 0.0, 1.0);
+    }
+  }
+
+  src = src * u.opacity;
+
+  // Premultiplied src-over for normal; spec blending otherwise.
+  if (u.mode == 0u) {
+    return src + dst * (1.0 - src.a);
+  }
+
+  let sa = src.a;
+  let da = dst.a;
+  var sc = vec3f(0.0);
+  if (sa > 0.0) { sc = src.rgb / sa; }
+  var dc = vec3f(0.0);
+  if (da > 0.0) { dc = dst.rgb / da; }
+  let blended = blend_colors(u.mode, sc, dc);
+  // Cs' = (1 - ab) * Cs + ab * B(Cb, Cs), then source-over composite.
+  let mixed = mix(sc, blended, da);
+  let outA = sa + da * (1.0 - sa);
+  let outRgb = mixed * sa + dc * da * (1.0 - sa);
+  return vec4f(outRgb, outA);
+}
+`;
+/** Prepare pass: sample (and crop) the source image into a layer texture. */
+const PREPARE_SHADER = (external) => `
+${FULLSCREEN_VERTEX}
+
+struct PrepareUniforms {
+  cropOrigin: vec2f,   // normalized crop origin in the source
+  cropSize: vec2f,     // normalized crop size
+}
+
+@group(0) @binding(0) var src: ${external ? "texture_external" : "texture_2d<f32>"};
+@group(0) @binding(1) var srcSampler: sampler;
+@group(0) @binding(2) var<uniform> u: PrepareUniforms;
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  let uv = u.cropOrigin + in.uv * u.cropSize;
+  ${external ? "let color = textureSampleBaseClampToEdge(src, srcSampler, uv);" : "let color = textureSampleLevel(src, srcSampler, uv, 0.0);"}
+  return color;
+}
+`;
+/**
+* Fused color pass: applies the ordered op list (brightness/contrast/
+* saturate/grayscale/sepia/hue-rotate/invert/chroma-key/curves) in one
+* fragment invocation. Curves sample a 256×1 LUT texture.
+*/
+const COLOR_SHADER = `
+${FULLSCREEN_VERTEX}
+
+struct ColorOp {
+  kind: vec4u,         // x = op kind
+  a: vec4f,            // params 0..3
+  b: vec4f,            // params 4..7
+}
+
+struct ColorUniforms {
+  count: vec4u,
+  ops: array<ColorOp, 16>,
+}
+
+@group(0) @binding(0) var src: texture_2d<f32>;
+@group(0) @binding(1) var srcSampler: sampler;
+@group(0) @binding(2) var<uniform> u: ColorUniforms;
+@group(0) @binding(3) var curvesTex: texture_2d<f32>;
+
+const LUMA = vec3f(0.2126, 0.7152, 0.0722);
+
+fn apply_op(op: ColorOp, color_in: vec4f) -> vec4f {
+  var color = color_in;
+  switch (op.kind.x) {
+    case 1u: { // brightness
+      color = vec4f(color.rgb * op.a.x, color.a);
+    }
+    case 2u: { // contrast
+      color = vec4f((color.rgb - 0.5) * op.a.x + 0.5, color.a);
+    }
+    case 3u: { // saturate
+      let l = dot(color.rgb, LUMA);
+      color = vec4f(mix(vec3f(l), color.rgb, op.a.x), color.a);
+    }
+    case 4u: { // grayscale
+      let l = dot(color.rgb, LUMA);
+      color = vec4f(mix(color.rgb, vec3f(l), op.a.x), color.a);
+    }
+    case 5u: { // sepia
+      let s = vec3f(
+        dot(color.rgb, vec3f(0.393, 0.769, 0.189)),
+        dot(color.rgb, vec3f(0.349, 0.686, 0.168)),
+        dot(color.rgb, vec3f(0.272, 0.534, 0.131)),
+      );
+      color = vec4f(mix(color.rgb, s, op.a.x), color.a);
+    }
+    case 6u: { // hue-rotate (radians)
+      let angle = op.a.x;
+      let c = cos(angle);
+      let s = sin(angle);
+      // CSS filter hue-rotation matrix.
+      let m = mat3x3f(
+        vec3f(0.213 + c * 0.787 - s * 0.213, 0.213 - c * 0.213 + s * 0.143, 0.213 - c * 0.213 - s * 0.787),
+        vec3f(0.715 - c * 0.715 - s * 0.715, 0.715 + c * 0.285 + s * 0.140, 0.715 - c * 0.715 + s * 0.715),
+        vec3f(0.072 - c * 0.072 + s * 0.928, 0.072 - c * 0.072 - s * 0.283, 0.072 + c * 0.928 + s * 0.072),
+      );
+      color = vec4f(clamp(m * color.rgb, vec3f(0.0), vec3f(1.0)), color.a);
+    }
+    case 7u: { // invert
+      color = vec4f(mix(color.rgb, vec3f(1.0) - color.rgb, op.a.x), color.a);
+    }
+    case 8u: { // chroma key: a = key rgb + tolerance, b = softness, spill
+      let key = op.a.rgb;
+      // Distance in the CbCr plane — luma-independent keying.
+      let cb = -0.169 * color.r - 0.331 * color.g + 0.5 * color.b;
+      let cr = 0.5 * color.r - 0.419 * color.g - 0.081 * color.b;
+      let kcb = -0.169 * key.r - 0.331 * key.g + 0.5 * key.b;
+      let kcr = 0.5 * key.r - 0.419 * key.g - 0.081 * key.b;
+      let distance = length(vec2f(cb - kcb, cr - kcr));
+      let tolerance = op.a.w;
+      let softness = max(op.b.x, 1e-4);
+      let keyAlpha = clamp((distance - tolerance) / softness, 0.0, 1.0);
+      // Spill suppression: pull the dominant key channel toward the others.
+      var rgb = color.rgb;
+      let spill = op.b.y;
+      if (spill > 0.0 && keyAlpha > 0.0) {
+        let isGreen = key.g >= key.r && key.g >= key.b;
+        if (isGreen) {
+          let limit = max(rgb.r, rgb.b);
+          rgb.g = mix(rgb.g, min(rgb.g, limit), spill);
+        } else {
+          let limit = max(rgb.g, rgb.b);
+          rgb.r = mix(rgb.r, min(rgb.r, limit), spill);
+        }
+      }
+      color = vec4f(rgb * keyAlpha, color.a * keyAlpha);
+    }
+    case 9u: { // curves via 256×1 LUT texture (rgb channels)
+      let r = textureSampleLevel(curvesTex, srcSampler, vec2f(color.r * (255.0 / 256.0) + 0.5 / 256.0, 0.5), 0.0).r;
+      let g = textureSampleLevel(curvesTex, srcSampler, vec2f(color.g * (255.0 / 256.0) + 0.5 / 256.0, 0.5), 0.0).g;
+      let b = textureSampleLevel(curvesTex, srcSampler, vec2f(color.b * (255.0 / 256.0) + 0.5 / 256.0, 0.5), 0.0).b;
+      color = vec4f(r, g, b, color.a);
+    }
+    default: {}
+  }
+  return color;
+}
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  var color = textureSampleLevel(src, srcSampler, in.uv, 0.0);
+  // Work in straight alpha for color math.
+  let alpha = color.a;
+  if (alpha > 0.0) {
+    color = vec4f(color.rgb / alpha, alpha);
+  }
+  for (var i = 0u; i < u.count.x; i = i + 1u) {
+    color = apply_op(u.ops[i], color);
+  }
+  return vec4f(color.rgb * color.a, color.a);
+}
+`;
+/** Separable Gaussian blur, one direction per pass (weights in a storage buffer). */
+const BLUR_SHADER = `
+${FULLSCREEN_VERTEX}
+
+struct BlurUniforms {
+  direction: vec2f,    // (1,0) then (0,1), in texels
+  texelSize: vec2f,
+  halfTaps: u32,
+  _pad0: u32,
+  _pad1: u32,
+  _pad2: u32,
+}
+
+@group(0) @binding(0) var src: texture_2d<f32>;
+@group(0) @binding(1) var srcSampler: sampler;
+@group(0) @binding(2) var<uniform> u: BlurUniforms;
+@group(0) @binding(3) var<storage, read> weights: array<f32>;
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  var sum = vec4f(0.0);
+  let half = i32(u.halfTaps);
+  for (var i = -half; i <= half; i = i + 1) {
+    let w = weights[i + half];
+    let offset = u.direction * u.texelSize * f32(i);
+    sum = sum + textureSampleLevel(src, srcSampler, in.uv + offset, 0.0) * w;
+  }
+  return sum;
+}
+`;
+/**
+* Drop-shadow compose: out = layer over (shadowColor × blurredAlpha at
+* offset). Both textures are layer-sized; the offset arrives in layer UVs.
+*/
+const SHADOW_SHADER = `
+${FULLSCREEN_VERTEX}
+
+struct ShadowUniforms {
+  color: vec4f,        // straight alpha
+  offsetUv: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var layerTex: texture_2d<f32>;
+@group(0) @binding(1) var blurredTex: texture_2d<f32>;
+@group(0) @binding(2) var srcSampler: sampler;
+@group(0) @binding(3) var<uniform> u: ShadowUniforms;
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  let layer = textureSampleLevel(layerTex, srcSampler, in.uv, 0.0);
+  let shadowUv = in.uv - u.offsetUv;
+  var shadowAlpha = 0.0;
+  if (shadowUv.x >= 0.0 && shadowUv.x <= 1.0 && shadowUv.y >= 0.0 && shadowUv.y <= 1.0) {
+    shadowAlpha = textureSampleLevel(blurredTex, srcSampler, shadowUv, 0.0).a;
+  }
+  let shadow = vec4f(u.color.rgb, 1.0) * (u.color.a * shadowAlpha);
+  return layer + shadow * (1.0 - layer.a);
+}
+`;
+/**
+* 3D LUT grade: trilinear sample of a size³ table flattened into a 2D
+* texture (slices side by side: width = size², height = size).
+*/
+const LUT3D_SHADER = `
+${FULLSCREEN_VERTEX}
+
+struct LutUniforms {
+  size: f32,
+  intensity: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var src: texture_2d<f32>;
+@group(0) @binding(1) var srcSampler: sampler;
+@group(0) @binding(2) var lutTex: texture_2d<f32>;
+@group(0) @binding(3) var<uniform> u: LutUniforms;
+
+fn sample_lut(rgb: vec3f, size: f32) -> vec3f {
+  let scaled = clamp(rgb, vec3f(0.0), vec3f(1.0)) * (size - 1.0);
+  let slice0 = floor(scaled.b);
+  let slice1 = min(slice0 + 1.0, size - 1.0);
+  let f = scaled.b - slice0;
+  let uvBase = vec2f((scaled.r + 0.5) / (size * size), (scaled.g + 0.5) / size);
+  let uv0 = vec2f(uvBase.x + slice0 / size, uvBase.y);
+  let uv1 = vec2f(uvBase.x + slice1 / size, uvBase.y);
+  let c0 = textureSampleLevel(lutTex, srcSampler, uv0, 0.0).rgb;
+  let c1 = textureSampleLevel(lutTex, srcSampler, uv1, 0.0).rgb;
+  return mix(c0, c1, f);
+}
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  var color = textureSampleLevel(src, srcSampler, in.uv, 0.0);
+  let alpha = color.a;
+  var rgb = color.rgb;
+  if (alpha > 0.0) { rgb = rgb / alpha; }
+  let graded = sample_lut(rgb, u.size);
+  rgb = mix(rgb, graded, u.intensity);
+  return vec4f(rgb * alpha, alpha);
+}
+`;
+/** Final present: stretch the accumulated frame onto the canvas texture. */
+const PRESENT_SHADER = `
+${FULLSCREEN_VERTEX}
+
+@group(0) @binding(0) var src: texture_2d<f32>;
+@group(0) @binding(1) var srcSampler: sampler;
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  return textureSampleLevel(src, srcSampler, in.uv, 0.0);
+}
+`;
+/** Blend mode name → shader id (0 = normal). Keep in sync with blend_colors. */
+const BLEND_MODE_IDS = {
+	normal: 0,
+	multiply: 1,
+	screen: 2,
+	overlay: 3,
+	darken: 4,
+	lighten: 5,
+	"color-dodge": 6,
+	"color-burn": 7,
+	"hard-light": 8,
+	"soft-light": 9,
+	difference: 10,
+	exclusion: 11,
+	hue: 12,
+	saturation: 13,
+	color: 14,
+	luminosity: 15
+};
+//#endregion
+//#region src/webgpu/transform.ts
+function invertChrome(chrome) {
+	const { scaleX, scaleY, rotationDeg, centerX, centerY } = chrome;
+	if (scaleX === 0 || scaleY === 0) return {
+		m00: 0,
+		m01: 0,
+		m10: 0,
+		m11: 0,
+		centerX,
+		centerY,
+		degenerate: true
+	};
+	const angle = -rotationDeg * Math.PI / 180;
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return {
+		m00: cos / scaleX,
+		m01: -sin / scaleX,
+		m10: sin / scaleY,
+		m11: cos / scaleY,
+		centerX,
+		centerY,
+		degenerate: false
+	};
+}
+/**
+* 1D Gaussian kernel for a CSS-style blur radius (σ = radius / 2, kernel
+* support 3σ each side), normalized to sum 1.
+*/
+function gaussianKernel(radius) {
+	const sigma = Math.max(.1, radius / 2);
+	const half = Math.max(1, Math.ceil(sigma * 3));
+	const weights = new Float32Array(half * 2 + 1);
+	let sum = 0;
+	for (let i = -half; i <= half; i++) {
+		const w = Math.exp(-(i * i) / (2 * sigma * sigma));
+		weights[i + half] = w;
+		sum += w;
+	}
+	for (let i = 0; i < weights.length; i++) weights[i] = weights[i] / sum;
+	return weights;
+}
+//#endregion
+//#region src/webgpu/webgpu-backend.ts
+/** Whether this runtime exposes WebGPU at all (Chrome 113+/Safari 26+/Firefox 141+). */
+function isWebGPUSupported() {
+	return typeof navigator !== "undefined" && "gpu" in navigator && !!navigator.gpu;
+}
+const FORMAT = "rgba8unorm";
+const TEXTURE_USAGE = {
+	COPY_DST: 2,
+	TEXTURE_BINDING: 4,
+	RENDER_ATTACHMENT: 16
+};
+const BUFFER_USAGE = {
+	COPY_DST: 8,
+	UNIFORM: 64,
+	STORAGE: 128
+};
+var WebGPUBackend = class WebGPUBackend {
+	kind = "webgpu";
+	width;
+	height;
+	device;
+	context;
+	presentationFormat;
+	acc;
+	accIndex = 0;
+	rasterCanvas;
+	rasterCtx;
+	rasterDirty = false;
+	rasterScope = 0;
+	sampler;
+	pipelines;
+	texturePool = [];
+	frameBuffers = [];
+	identityCurves;
+	luts = /* @__PURE__ */ new Map();
+	static async create(options) {
+		let device = options.device;
+		if (!device) {
+			if (!isWebGPUSupported()) throw new Error("WebGPU is not available in this browser");
+			const adapter = await navigator.gpu.requestAdapter();
+			if (!adapter) throw new Error("No WebGPU adapter available");
+			device = await adapter.requestDevice();
+		}
+		return new WebGPUBackend(device, options);
+	}
+	constructor(device, options) {
+		this.device = device;
+		this.width = options.width;
+		this.height = options.height;
+		const context = options.canvas.getContext("webgpu");
+		if (!context) throw new Error("Could not create a webgpu canvas context");
+		this.context = context;
+		this.presentationFormat = typeof navigator !== "undefined" && navigator.gpu ? navigator.gpu.getPreferredCanvasFormat() : FORMAT;
+		context.configure({
+			device,
+			format: this.presentationFormat,
+			alphaMode: "opaque"
+		});
+		this.rasterCanvas = new OffscreenCanvas(this.width, this.height);
+		const rasterCtx = this.rasterCanvas.getContext("2d");
+		if (!rasterCtx) throw new Error("Could not create the raster scratch context");
+		this.rasterCtx = rasterCtx;
+		this.acc = [this.createAccTexture(), this.createAccTexture()];
+		this.sampler = device.createSampler({
+			magFilter: "linear",
+			minFilter: "linear",
+			addressModeU: "clamp-to-edge",
+			addressModeV: "clamp-to-edge"
+		});
+		const fullscreen = (code, format) => {
+			const module = device.createShaderModule({ code });
+			return device.createRenderPipeline({
+				layout: "auto",
+				vertex: {
+					module,
+					entryPoint: "vs_main"
+				},
+				fragment: {
+					module,
+					entryPoint: "fs_main",
+					targets: [{ format }]
+				},
+				primitive: { topology: "triangle-list" }
+			});
+		};
+		this.pipelines = {
+			composite: fullscreen(COMPOSITE_SHADER, FORMAT),
+			prepare2d: fullscreen(PREPARE_SHADER(false), FORMAT),
+			prepareExternal: fullscreen(PREPARE_SHADER(true), FORMAT),
+			color: fullscreen(COLOR_SHADER, FORMAT),
+			blur: fullscreen(BLUR_SHADER, FORMAT),
+			shadow: fullscreen(SHADOW_SHADER, FORMAT),
+			lut3d: fullscreen(LUT3D_SHADER, FORMAT),
+			present: fullscreen(PRESENT_SHADER, this.presentationFormat)
+		};
+		this.identityCurves = device.createTexture({
+			size: {
+				width: 256,
+				height: 1
+			},
+			format: FORMAT,
+			usage: TEXTURE_USAGE.TEXTURE_BINDING | TEXTURE_USAGE.COPY_DST
+		});
+		const identity = new Uint8Array(256 * 4);
+		for (let i = 0; i < 256; i++) {
+			identity[i * 4] = i;
+			identity[i * 4 + 1] = i;
+			identity[i * 4 + 2] = i;
+			identity[i * 4 + 3] = 255;
+		}
+		device.queue.writeTexture({ texture: this.identityCurves }, identity, { bytesPerRow: 256 * 4 }, {
+			width: 256,
+			height: 1
+		});
+	}
+	/**
+	* Register a 3D LUT for `lut3d` effects: `data` is size³ RGB triples
+	* (0..1, red fastest), flattened to a (size² × size) 2D texture.
+	*/
+	registerLut3D(lutId, size, data) {
+		if (data.length < size * size * size * 3) throw new Error("LUT data is too short for its size");
+		const width = size * size;
+		const bytes = new Uint8Array(width * size * 4);
+		for (let b = 0; b < size; b++) for (let g = 0; g < size; g++) for (let r = 0; r < size; r++) {
+			const src = ((b * size + g) * size + r) * 3;
+			const dst = (g * width + b * size + r) * 4;
+			bytes[dst] = Math.round(Math.min(1, Math.max(0, data[src])) * 255);
+			bytes[dst + 1] = Math.round(Math.min(1, Math.max(0, data[src + 1])) * 255);
+			bytes[dst + 2] = Math.round(Math.min(1, Math.max(0, data[src + 2])) * 255);
+			bytes[dst + 3] = 255;
+		}
+		const texture = this.device.createTexture({
+			size: {
+				width,
+				height: size
+			},
+			format: FORMAT,
+			usage: TEXTURE_USAGE.TEXTURE_BINDING | TEXTURE_USAGE.COPY_DST
+		});
+		this.device.queue.writeTexture({ texture }, bytes, { bytesPerRow: width * 4 }, {
+			width,
+			height: size
+		});
+		this.luts.get(lutId)?.texture.destroy();
+		this.luts.set(lutId, {
+			texture,
+			size
+		});
+	}
+	beginFrame(backgroundColor) {
+		const [r, g, b] = parseCssColor(backgroundColor);
+		this.accIndex = 0;
+		const encoder = this.device.createCommandEncoder();
+		encoder.beginRenderPass({ colorAttachments: [{
+			view: this.acc[0].createView(),
+			loadOp: "clear",
+			storeOp: "store",
+			clearValue: {
+				r,
+				g,
+				b,
+				a: 1
+			}
+		}] }).end();
+		this.device.queue.submit([encoder.finish()]);
+	}
+	endFrame() {
+		this.flushRaster();
+		const encoder = this.device.createCommandEncoder();
+		const pass = encoder.beginRenderPass({ colorAttachments: [{
+			view: this.context.getCurrentTexture().createView(),
+			loadOp: "clear",
+			storeOp: "store",
+			clearValue: {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 1
+			}
+		}] });
+		pass.setPipeline(this.pipelines.present);
+		pass.setBindGroup(0, this.device.createBindGroup({
+			layout: this.pipelines.present.getBindGroupLayout(0),
+			entries: [{
+				binding: 0,
+				resource: this.acc[this.accIndex].createView()
+			}, {
+				binding: 1,
+				resource: this.sampler
+			}]
+		}));
+		pass.draw(3);
+		pass.end();
+		this.device.queue.submit([encoder.finish()]);
+		for (const buffer of this.frameBuffers) buffer.destroy();
+		this.frameBuffers = [];
+		for (const pooled of this.texturePool) pooled.inUse = false;
+	}
+	acquireRaster() {
+		this.rasterDirty = true;
+		return this.rasterCtx;
+	}
+	pushRasterScope() {
+		this.rasterScope++;
+	}
+	popRasterScope() {
+		this.rasterScope = Math.max(0, this.rasterScope - 1);
+	}
+	drawImageQuad(quad, chrome) {
+		if (chrome.opacity <= 0) return;
+		const plan = planEffects(chrome.effects);
+		if (this.rasterScope > 0 || plan.unsupported) {
+			const ctx = this.acquireRaster();
+			applyChrome(ctx, chrome, () => drawImageQuad2D(ctx, quad));
+			return;
+		}
+		const inverse = invertChrome(chrome);
+		if (inverse.degenerate) return;
+		this.flushRaster();
+		try {
+			this.drawQuadOnGpu(quad, chrome, plan, inverse);
+		} catch {
+			const ctx = this.acquireRaster();
+			applyChrome(ctx, chrome, () => drawImageQuad2D(ctx, quad));
+		}
+	}
+	/** Free GPU resources. The backend is unusable afterwards. */
+	dispose() {
+		for (const pooled of this.texturePool) pooled.texture.destroy();
+		this.texturePool.length = 0;
+		for (const buffer of this.frameBuffers) buffer.destroy();
+		this.frameBuffers = [];
+		this.acc[0].destroy();
+		this.acc[1].destroy();
+		this.identityCurves.destroy();
+		for (const { texture } of this.luts.values()) texture.destroy();
+		this.luts.clear();
+		this.context.unconfigure();
+	}
+	createAccTexture() {
+		return this.device.createTexture({
+			size: {
+				width: this.width,
+				height: this.height
+			},
+			format: FORMAT,
+			usage: TEXTURE_USAGE.RENDER_ATTACHMENT | TEXTURE_USAGE.TEXTURE_BINDING
+		});
+	}
+	acquireTexture(width, height) {
+		const found = this.texturePool.find((p) => !p.inUse && p.width === width && p.height === height);
+		if (found) {
+			found.inUse = true;
+			return found.texture;
+		}
+		const texture = this.device.createTexture({
+			size: {
+				width,
+				height
+			},
+			format: FORMAT,
+			usage: TEXTURE_USAGE.RENDER_ATTACHMENT | TEXTURE_USAGE.TEXTURE_BINDING | TEXTURE_USAGE.COPY_DST
+		});
+		this.texturePool.push({
+			texture,
+			width,
+			height,
+			inUse: true
+		});
+		return texture;
+	}
+	releaseTexture(texture) {
+		const pooled = this.texturePool.find((p) => p.texture === texture);
+		if (pooled) pooled.inUse = false;
+	}
+	uniformBuffer(data) {
+		const buffer = this.device.createBuffer({
+			size: Math.max(16, Math.ceil(data.byteLength / 16) * 16),
+			usage: BUFFER_USAGE.UNIFORM | BUFFER_USAGE.COPY_DST
+		});
+		this.device.queue.writeBuffer(buffer, 0, data);
+		this.frameBuffers.push(buffer);
+		return buffer;
+	}
+	storageBuffer(data) {
+		const buffer = this.device.createBuffer({
+			size: Math.max(16, Math.ceil(data.byteLength / 16) * 16),
+			usage: BUFFER_USAGE.STORAGE | BUFFER_USAGE.COPY_DST
+		});
+		this.device.queue.writeBuffer(buffer, 0, data);
+		this.frameBuffers.push(buffer);
+		return buffer;
+	}
+	/** Upload the raster scratch and composite it as a normal full-frame layer. */
+	flushRaster() {
+		if (!this.rasterDirty) return;
+		this.rasterDirty = false;
+		const texture = this.acquireTexture(this.width, this.height);
+		this.device.queue.copyExternalImageToTexture({ source: this.rasterCanvas }, {
+			texture,
+			premultipliedAlpha: true
+		}, {
+			width: this.width,
+			height: this.height
+		});
+		this.compositeFullFrame(texture, {
+			identity: true,
+			opacity: 1,
+			mode: 0
+		});
+		this.releaseTexture(texture);
+		this.rasterCtx.clearRect(0, 0, this.width, this.height);
+	}
+	drawQuadOnGpu(quad, chrome, plan, inverse) {
+		const limits = this.device.limits.maxTextureDimension2D;
+		const lw = Math.max(1, Math.min(limits, Math.round(quad.dw)));
+		const lh = Math.max(1, Math.min(limits, Math.round(quad.dh)));
+		let layer = this.prepareLayer(quad, lw, lh);
+		for (const pass of plan.passes) layer = this.runEffectPass(layer, pass, lw, lh);
+		this.compositeFullFrame(layer, {
+			identity: false,
+			opacity: chrome.opacity,
+			mode: BLEND_MODE_IDS[chrome.blendMode ?? "normal"] ?? 0,
+			inverse,
+			halfW: quad.dw / 2,
+			halfH: quad.dh / 2,
+			cornerRadius: quad.cornerRadius
+		});
+		this.releaseTexture(layer);
+	}
+	/** Sample (and crop) the source into a fresh layer texture. */
+	prepareLayer(quad, lw, lh) {
+		const layer = this.acquireTexture(lw, lh);
+		const { width: iw, height: ih } = getImageSize(quad.image);
+		const crop = quad.src;
+		const uniforms = new Float32Array(4);
+		if (crop && iw > 0 && ih > 0) uniforms.set([
+			crop.sx / iw,
+			crop.sy / ih,
+			crop.sw / iw,
+			crop.sh / ih
+		]);
+		else uniforms.set([
+			0,
+			0,
+			1,
+			1
+		]);
+		const uniformBuffer = this.uniformBuffer(uniforms.buffer);
+		const isExternal = typeof VideoFrame !== "undefined" && quad.image instanceof VideoFrame || typeof HTMLVideoElement !== "undefined" && quad.image instanceof HTMLVideoElement;
+		const encoder = this.device.createCommandEncoder();
+		const pass = encoder.beginRenderPass({ colorAttachments: [{
+			view: layer.createView(),
+			loadOp: "clear",
+			storeOp: "store",
+			clearValue: {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 0
+			}
+		}] });
+		if (isExternal) {
+			const external = this.device.importExternalTexture({ source: quad.image });
+			pass.setPipeline(this.pipelines.prepareExternal);
+			pass.setBindGroup(0, this.device.createBindGroup({
+				layout: this.pipelines.prepareExternal.getBindGroupLayout(0),
+				entries: [
+					{
+						binding: 0,
+						resource: external
+					},
+					{
+						binding: 1,
+						resource: this.sampler
+					},
+					{
+						binding: 2,
+						resource: { buffer: uniformBuffer }
+					}
+				]
+			}));
+		} else {
+			const sw = Math.max(1, iw);
+			const sh = Math.max(1, ih);
+			const staging = this.acquireTexture(sw, sh);
+			this.device.queue.copyExternalImageToTexture({ source: quad.image }, {
+				texture: staging,
+				premultipliedAlpha: true
+			}, {
+				width: sw,
+				height: sh
+			});
+			pass.setPipeline(this.pipelines.prepare2d);
+			pass.setBindGroup(0, this.device.createBindGroup({
+				layout: this.pipelines.prepare2d.getBindGroupLayout(0),
+				entries: [
+					{
+						binding: 0,
+						resource: staging.createView()
+					},
+					{
+						binding: 1,
+						resource: this.sampler
+					},
+					{
+						binding: 2,
+						resource: { buffer: uniformBuffer }
+					}
+				]
+			}));
+			this.releaseTexture(staging);
+		}
+		pass.draw(3);
+		pass.end();
+		this.device.queue.submit([encoder.finish()]);
+		return layer;
+	}
+	runEffectPass(layer, pass, lw, lh) {
+		switch (pass.kind) {
+			case "color": return this.runColorPass(layer, pass, lw, lh);
+			case "blur": return this.runBlurPasses(layer, pass.radius, lw, lh);
+			case "shadow": {
+				const blurred = this.runBlurPasses(layer, pass.blur, lw, lh, true);
+				const out = this.acquireTexture(lw, lh);
+				const uniforms = new Float32Array(8);
+				uniforms.set(pass.color, 0);
+				uniforms.set([pass.offsetX / lw, pass.offsetY / lh], 4);
+				this.renderFullscreen(this.pipelines.shadow, out, [
+					{
+						binding: 0,
+						resource: layer.createView()
+					},
+					{
+						binding: 1,
+						resource: blurred.createView()
+					},
+					{
+						binding: 2,
+						resource: this.sampler
+					},
+					{
+						binding: 3,
+						resource: { buffer: this.uniformBuffer(uniforms.buffer) }
+					}
+				]);
+				this.releaseTexture(blurred);
+				this.releaseTexture(layer);
+				return out;
+			}
+			case "lut3d": {
+				const lut = this.luts.get(pass.lutId);
+				if (!lut) return layer;
+				const out = this.acquireTexture(lw, lh);
+				const uniforms = new Float32Array(4);
+				uniforms.set([lut.size, pass.intensity]);
+				this.renderFullscreen(this.pipelines.lut3d, out, [
+					{
+						binding: 0,
+						resource: layer.createView()
+					},
+					{
+						binding: 1,
+						resource: this.sampler
+					},
+					{
+						binding: 2,
+						resource: lut.texture.createView()
+					},
+					{
+						binding: 3,
+						resource: { buffer: this.uniformBuffer(uniforms.buffer) }
+					}
+				]);
+				this.releaseTexture(layer);
+				return out;
+			}
+		}
+	}
+	runColorPass(layer, pass, lw, lh) {
+		if (pass.ops.length === 0) return layer;
+		const out = this.acquireTexture(lw, lh);
+		const buffer = /* @__PURE__ */ new ArrayBuffer(784);
+		const u32 = new Uint32Array(buffer);
+		const f32 = new Float32Array(buffer);
+		u32[0] = Math.min(16, pass.ops.length);
+		for (let i = 0; i < Math.min(16, pass.ops.length); i++) {
+			const base = (16 + i * 48) / 4;
+			u32[base] = pass.ops[i].kind;
+			for (let p = 0; p < 8; p++) f32[base + 4 + p] = pass.ops[i].params[p] ?? 0;
+		}
+		let curvesTexture = this.identityCurves;
+		if (pass.curves) {
+			curvesTexture = this.acquireTexture(256, 1);
+			const bytes = new Uint8Array(256 * 4);
+			for (let i = 0; i < 256; i++) {
+				bytes[i * 4] = Math.round(pass.curves.r[i] * 255);
+				bytes[i * 4 + 1] = Math.round(pass.curves.g[i] * 255);
+				bytes[i * 4 + 2] = Math.round(pass.curves.b[i] * 255);
+				bytes[i * 4 + 3] = 255;
+			}
+			this.device.queue.writeTexture({ texture: curvesTexture }, bytes, { bytesPerRow: 256 * 4 }, {
+				width: 256,
+				height: 1
+			});
+		}
+		this.renderFullscreen(this.pipelines.color, out, [
+			{
+				binding: 0,
+				resource: layer.createView()
+			},
+			{
+				binding: 1,
+				resource: this.sampler
+			},
+			{
+				binding: 2,
+				resource: { buffer: this.uniformBuffer(buffer) }
+			},
+			{
+				binding: 3,
+				resource: curvesTexture.createView()
+			}
+		]);
+		if (curvesTexture !== this.identityCurves) this.releaseTexture(curvesTexture);
+		this.releaseTexture(layer);
+		return out;
+	}
+	runBlurPasses(layer, radius, lw, lh, keepInput = false) {
+		if (radius <= 0) return layer;
+		const weights = gaussianKernel(radius);
+		const halfTaps = (weights.length - 1) / 2;
+		const weightsBuffer = this.storageBuffer(weights);
+		const blurUniforms = (dx, dy) => {
+			const buffer = /* @__PURE__ */ new ArrayBuffer(32);
+			const f32 = new Float32Array(buffer);
+			const u32 = new Uint32Array(buffer);
+			f32[0] = dx;
+			f32[1] = dy;
+			f32[2] = 1 / lw;
+			f32[3] = 1 / lh;
+			u32[4] = halfTaps;
+			return this.uniformBuffer(buffer);
+		};
+		const horizontal = this.acquireTexture(lw, lh);
+		this.renderFullscreen(this.pipelines.blur, horizontal, [
+			{
+				binding: 0,
+				resource: layer.createView()
+			},
+			{
+				binding: 1,
+				resource: this.sampler
+			},
+			{
+				binding: 2,
+				resource: { buffer: blurUniforms(1, 0) }
+			},
+			{
+				binding: 3,
+				resource: { buffer: weightsBuffer }
+			}
+		]);
+		const vertical = this.acquireTexture(lw, lh);
+		this.renderFullscreen(this.pipelines.blur, vertical, [
+			{
+				binding: 0,
+				resource: horizontal.createView()
+			},
+			{
+				binding: 1,
+				resource: this.sampler
+			},
+			{
+				binding: 2,
+				resource: { buffer: blurUniforms(0, 1) }
+			},
+			{
+				binding: 3,
+				resource: { buffer: weightsBuffer }
+			}
+		]);
+		this.releaseTexture(horizontal);
+		if (!keepInput) this.releaseTexture(layer);
+		return vertical;
+	}
+	compositeFullFrame(layer, options) {
+		const src = this.acc[this.accIndex];
+		const dst = this.acc[1 - this.accIndex];
+		const buffer = /* @__PURE__ */ new ArrayBuffer(64);
+		const f32 = new Float32Array(buffer);
+		const u32 = new Uint32Array(buffer);
+		const inv = options.inverse;
+		f32[0] = inv?.m00 ?? 1;
+		f32[1] = inv?.m01 ?? 0;
+		f32[2] = inv?.m10 ?? 0;
+		f32[3] = inv?.m11 ?? 1;
+		f32[4] = inv?.centerX ?? 0;
+		f32[5] = inv?.centerY ?? 0;
+		f32[6] = options.halfW ?? 0;
+		f32[7] = options.halfH ?? 0;
+		f32[8] = this.width;
+		f32[9] = this.height;
+		f32[10] = options.cornerRadius ?? 0;
+		f32[11] = options.opacity;
+		u32[12] = options.mode;
+		u32[13] = options.identity ? 1 : 0;
+		this.renderFullscreen(this.pipelines.composite, dst, [
+			{
+				binding: 0,
+				resource: src.createView()
+			},
+			{
+				binding: 1,
+				resource: layer.createView()
+			},
+			{
+				binding: 2,
+				resource: this.sampler
+			},
+			{
+				binding: 3,
+				resource: { buffer: this.uniformBuffer(buffer) }
+			}
+		]);
+		this.accIndex = 1 - this.accIndex;
+	}
+	renderFullscreen(pipeline, target, entries) {
+		const encoder = this.device.createCommandEncoder();
+		const pass = encoder.beginRenderPass({ colorAttachments: [{
+			view: target.createView(),
+			loadOp: "clear",
+			storeOp: "store",
+			clearValue: {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 0
+			}
+		}] });
+		pass.setPipeline(pipeline);
+		pass.setBindGroup(0, this.device.createBindGroup({
+			layout: pipeline.getBindGroupLayout(0),
+			entries
+		}));
+		pass.draw(3);
+		pass.end();
+		this.device.queue.submit([encoder.finish()]);
+	}
+};
+//#endregion
+export { Canvas2DBackend, ROTATE_HANDLE_OFFSET, WebGPUBackend, applyChrome, applyTextTransform, buildFont, createElementContext, curveToLut, degToRad, drawImageQuad2D, fromCanvasPoint, getElementDisplaySize, getElementNaturalSize, getElementOBB, getElementRenderer, getFitScale, getHandles, getImageSize, getTransformForDisplaySize, getTransitionRenderer, hasUnsupportedEffects, hitTestHandles, hitTestOBB, isWebGPUSupported, layoutCaption, layoutTextBlock, measureWith, planEffects, registerElementRenderer, registerGpuEffectTypes, registerTransitionRenderer, renderFrame, renderFrameWith, toCanvasPoint };