@editframe/elements 0.46.4 → 0.47.1

package/dist/elements/EFMotionBlur.js

@@ -0,0 +1,809 @@
+import { getTrackedAnimationsForSubtree } from "./updateAnimations.js";
+
+//#region src/elements/EFMotionBlur.ts
+/** Multiplier on rotAmount → rotScale for centered displacement range. */
+const ROT_SCALE_FACTOR = 2;
+/** Multiplier on isotropicAmount → zoomScale. >2 amplifies zoom visibility;
+*  higher values tilt the spiral angle toward radial. */
+const ZOOM_SCALE_FACTOR = 3;
+/** Maximum arc displacement in pixels (caps rotAmount). */
+const MAX_ROT_AMOUNT_PX = 50;
+/** Maximum zoom displacement in pixels (caps isotropicAmount). */
+const MAX_ZOOM_AMOUNT_PX = 50;
+/** Maximum translation displacement in pixels. */
+const MAX_TRANS_AMOUNT_PX = 100;
+/** Gaussian sigma for temporal weights: sigma = max(n / SIGMA_DIVISOR, 2). */
+const GAUSSIAN_SIGMA_DIVISOR = 5.5;
+/** Spiral output blur: coefficient on step spacing. Must stay small to
+*  preserve zero-displacement center sharpness. */
+const SPIRAL_BLUR_COEFF = .15;
+/** Spiral output blur: hard cap in pixels. */
+const SPIRAL_BLUR_CAP = .8;
+/** Spiral output blur: floor in pixels. */
+const SPIRAL_BLUR_FLOOR = .3;
+/** Translation output blur: coefficient on step spacing. Can be larger than
+*  spiral because all pixels shift equally (no center-vs-edge gradient). */
+const TRANS_BLUR_COEFF = .35;
+/** Translation output blur: hard cap in pixels. */
+const TRANS_BLUR_CAP = 1.5;
+/** Translation output blur: floor in pixels. */
+const TRANS_BLUR_FLOOR = .3;
+/** Spiral angle quantization: angles rounded to π/(12*2) ≈ 7.5° steps. */
+const SPIRAL_ANGLE_QUANT = 12;
+/**
+* Extracts the 2D rotation angle (degrees) and uniform scale from a CSS
+* transform string. Handles `matrix(a,b,c,d,tx,ty)`, `rotate(Ndeg)`,
+* `scale(N)`, and `none`.
+*/
+function parseMatrix(transform) {
+	if (!transform || transform === "none") return {
+		angle: 0,
+		scale: 1
+	};
+	const mm = transform.match(/^matrix\(([^)]+)\)/);
+	if (mm) {
+		const [a, b] = mm[1].split(",").map(Number);
+		const scale = Math.sqrt(a * a + b * b);
+		return {
+			angle: Math.atan2(b, a) * 180 / Math.PI,
+			scale: scale || 1
+		};
+	}
+	const rm = transform.match(/rotate\(([^)]+)\)/);
+	if (rm) {
+		const v = rm[1].trim();
+		return {
+			angle: v.endsWith("rad") ? parseFloat(v) * 180 / Math.PI : parseFloat(v),
+			scale: 1
+		};
+	}
+	const sm = transform.match(/^scale\(([^)]+)\)/);
+	if (sm) return {
+		angle: 0,
+		scale: sm[1].split(",").map(Number)[0] ?? 1
+	};
+	return {
+		angle: 0,
+		scale: 1
+	};
+}
+/**
+* Reads the rotation angle and scale from an element's current animation state.
+*
+* Prefers direct keyframe interpolation via `getComputedTiming().progress` +
+* `getKeyframes()` — this is synchronous and not subject to Chromium's deferred
+* WAAPI style application (where `getComputedStyle` may lag behind `currentTime`).
+*
+* Falls back to `commitStyles()` + `getComputedStyle` for animations whose keyframes
+* use complex transform lists that our simple interpolation can't handle.
+*/
+function readTransformMatrix(child, anims) {
+	for (const anim of anims) {
+		const effect = anim.effect;
+		if (!(effect instanceof KeyframeEffect)) continue;
+		const progress = effect.getComputedTiming().progress;
+		if (progress === null || progress === void 0) continue;
+		const result$1 = interpolateTransformKeyframes(effect.getKeyframes(), progress);
+		if (result$1 !== null) return result$1;
+	}
+	let committed = false;
+	for (const anim of anims) try {
+		anim.commitStyles?.();
+		committed = true;
+	} catch (_) {}
+	child.getBoundingClientRect();
+	const result = parseMatrix(getComputedStyle(child).transform);
+	if (committed) child.style.removeProperty("transform");
+	return result;
+}
+/**
+* Decomposes a CSS transform string into cumulative rotation (degrees) and
+* uniform scale.  Handles compound transforms like `scale(0.3) rotate(90deg)`,
+* pure rotations, pure scales, and matrix() values.
+*
+* Multiple rotate() functions are summed (so the orbit pattern
+* `rotate(360deg) translateX(90px) rotate(-360deg)` correctly yields 0°).
+*
+* Returns null only when no rotation or scale function is found and the
+* string is not a matrix.
+*/
+function decomposeKeyframeTransform(transform) {
+	if (!transform || transform === "none") return {
+		angle: 0,
+		scale: 1
+	};
+	const mm = transform.match(/^matrix\(([^)]+)\)/);
+	if (mm) {
+		const [a, b] = mm[1].split(",").map(Number);
+		const scale = Math.sqrt(a * a + b * b);
+		return {
+			angle: Math.atan2(b, a) * 180 / Math.PI,
+			scale: scale || 1
+		};
+	}
+	let totalAngle = 0;
+	let totalScale = 1;
+	let found = false;
+	for (const m of transform.matchAll(/rotate\(([^)]+)\)/g)) {
+		const v = m[1].trim();
+		totalAngle += v.endsWith("rad") ? parseFloat(v) * 180 / Math.PI : parseFloat(v);
+		found = true;
+	}
+	const sm = transform.match(/scale\(([^),]+)(?:,\s*([^)]+))?\)/);
+	if (sm) {
+		const sx = parseFloat(sm[1]);
+		const sy = sm[2] !== void 0 ? parseFloat(sm[2]) : sx;
+		if (Math.abs(sx - sy) < .001) {
+			totalScale = sx;
+			found = true;
+		}
+	}
+	return found ? {
+		angle: totalAngle,
+		scale: totalScale
+	} : null;
+}
+/**
+* Solves a cubic-bezier curve: given control points (x1,y1,x2,y2) and input
+* parameter `t` (0–1), returns the output value y.  Uses Newton-Raphson
+* iteration to invert the x(u) polynomial.
+*/
+function solveCubicBezier(x1, y1, x2, y2, t) {
+	if (t <= 0) return 0;
+	if (t >= 1) return 1;
+	let u = t;
+	for (let i = 0; i < 8; i++) {
+		const u2$1 = u * u, u3$1 = u2$1 * u;
+		const xu = 3 * (1 - u) * (1 - u) * u * x1 + 3 * (1 - u) * u2$1 * x2 + u3$1;
+		const dxu = 3 * (1 - u) * (1 - u) * x1 + 6 * (1 - u) * u * (x2 - x1) + 3 * u2$1 * (1 - x2);
+		if (Math.abs(dxu) < 1e-9) break;
+		u -= (xu - t) / dxu;
+		u = Math.max(0, Math.min(1, u));
+	}
+	const u2 = u * u, u3 = u2 * u;
+	return 3 * (1 - u) * (1 - u) * u * y1 + 3 * (1 - u) * u2 * y2 + u3;
+}
+const EASING_KEYWORDS = {
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	],
+	"ease-in": [
+		.42,
+		0,
+		1,
+		1
+	],
+	"ease-out": [
+		0,
+		0,
+		.58,
+		1
+	],
+	"ease-in-out": [
+		.42,
+		0,
+		.58,
+		1
+	]
+};
+/**
+* Applies a CSS easing function to a linear parameter t (0–1).
+* Handles keyword easings and `cubic-bezier(x1,y1,x2,y2)`.
+*/
+function applyEasing(easing, t) {
+	if (!easing || easing === "linear") return t;
+	const kw = EASING_KEYWORDS[easing];
+	if (kw) return solveCubicBezier(kw[0], kw[1], kw[2], kw[3], t);
+	const cbm = easing.match(/cubic-bezier\(\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/);
+	if (cbm) return solveCubicBezier(parseFloat(cbm[1]), parseFloat(cbm[2]), parseFloat(cbm[3]), parseFloat(cbm[4]), t);
+	return t;
+}
+/**
+* Interpolates angle (degrees) and scale from a WAAPI keyframe list at the
+* given progress (0–1).
+*
+* Uses the original CSS value strings from the keyframes (not computed matrices)
+* so `rotate(0deg) → rotate(360deg)` interpolates correctly as 0→360°.
+*
+* Handles compound transforms (e.g. `scale(0.3) rotate(90deg)`) by decomposing
+* each keyframe individually, and applies per-keyframe easing so that blur
+* intensity tracks the actual eased velocity rather than the linear one.
+*/
+function interpolateTransformKeyframes(keyframes, progress) {
+	const withTransform = keyframes.filter((k) => k.transform != null);
+	if (withTransform.length < 2) return null;
+	let lo = withTransform[0];
+	let hi = withTransform[withTransform.length - 1];
+	for (let i = 0; i < withTransform.length - 1; i++) {
+		const a = withTransform[i];
+		const b = withTransform[i + 1];
+		const aOff = typeof a.offset === "number" ? a.offset : i / (withTransform.length - 1);
+		const bOff = typeof b.offset === "number" ? b.offset : (i + 1) / (withTransform.length - 1);
+		if (progress >= aOff && progress <= bOff) {
+			lo = a;
+			hi = b;
+			break;
+		}
+	}
+	const loOff = typeof lo.offset === "number" ? lo.offset : 0;
+	const hiOff = typeof hi.offset === "number" ? hi.offset : 1;
+	const linearT = hiOff === loOff ? 0 : (progress - loOff) / (hiOff - loOff);
+	const t = applyEasing(lo.easing, linearT);
+	const loD = decomposeKeyframeTransform(String(lo.transform ?? "none"));
+	const hiD = decomposeKeyframeTransform(String(hi.transform ?? "none"));
+	if (!loD || !hiD) return null;
+	if (loD.angle === 0 && hiD.angle === 0 && loD.scale === 1 && hiD.scale === 1) return null;
+	return {
+		angle: loD.angle + (hiD.angle - loD.angle) * t,
+		scale: loD.scale + (hiD.scale - loD.scale) * t
+	};
+}
+/**
+* Gaussian temporal weights for N blur steps.
+* Soft window (vs equal weights) eliminates the "stack of discrete frames" look.
+*/
+function gaussianWeights(n) {
+	if (n <= 1) return [1];
+	const mid = (n - 1) / 2;
+	const sigma = Math.max(n / GAUSSIAN_SIGMA_DIVISOR, 2);
+	return Array.from({ length: n }, (_, i) => Math.exp(-.5 * ((i - mid) / sigma) ** 2));
+}
+/**
+* Maximum distance from a point to any corner of a rectangle.
+*/
+function maxDistToCorner(cx, cy, w, h) {
+	let m = 0;
+	for (const px of [0, w]) for (const py of [0, h]) {
+		const d = Math.hypot(px - cx, py - cy);
+		if (d > m) m = d;
+	}
+	return m || 1;
+}
+/**
+* Generates a canvas displacement map encoding a **spiral** vector field.
+*
+* Each pixel encodes a 2D displacement direction as (R, G) where:
+*   R = 128 + vx*127   G = 128 + vy*127
+*
+* The vector at each pixel is:
+*   v = sin(spiralAngle) × tangent + cos(spiralAngle) × radial
+*
+* Because tangent ⊥ radial and both have magnitude r/maxR, the combined
+* vector also has magnitude r/maxR regardless of spiralAngle.  This means
+* one map + one set of N displaced copies correctly captures simultaneous
+* rotation and zoom as a single spiral smear — no sequential stages needed.
+*
+* spiralAngle = atan2(rotScale, zoomScale):
+*   π/2  → pure tangential (rotation only)
+*   0    → pure radial (zoom only)
+*   between → spiral
+*/
+function buildSpiralMap(pw, ph, ox, oy, iw, ih, cx, cy, spiralAngle) {
+	const ctx = new OffscreenCanvas(pw, ph).getContext("2d");
+	const img = ctx.createImageData(pw, ph);
+	const maxR = maxDistToCorner(cx, cy, iw, ih);
+	const sinA = Math.sin(spiralAngle);
+	const cosA = Math.cos(spiralAngle);
+	for (let py = 0; py < ph; py++) for (let px = 0; px < pw; px++) {
+		const ux = px - ox;
+		const uy = py - oy;
+		const i = (py * pw + px) * 4;
+		const dx = ux - cx;
+		const dy = uy - cy;
+		const vx = sinA * (-dy / maxR) + cosA * (dx / maxR);
+		const vy = sinA * (dx / maxR) + cosA * (dy / maxR);
+		img.data[i] = Math.round(128 + vx * 127);
+		img.data[i + 1] = Math.round(128 + vy * 127);
+		img.data[i + 2] = 128;
+		img.data[i + 3] = 255;
+	}
+	ctx.putImageData(img, 0, 0);
+	const c = document.createElement("canvas");
+	c.width = pw;
+	c.height = ph;
+	c.getContext("2d").putImageData(img, 0, 0);
+	return c.toDataURL();
+}
+/**
+* Appends the SVG filter primitives for one temporal displacement blur stage
+* into an existing filter string. Takes `inResult` as input and writes
+* the final blended output to `outResult`.
+*
+* When `centered=true`, steps run from -totalScale/2 → +totalScale/2, placing
+* the un-displaced copy at the center of the range. This is used for rotation
+* blur so the current frame sits in the middle of the smear.
+* When `centered=false` (default), steps run from 0 → totalScale.
+*
+* Produces N copies each displaced by the map at increasing scale,
+* blended with Gaussian temporal weights. A small feGaussianBlur softens slice edges.
+*/
+function appendTemporalBlurStage(xml, prefix, inResult, outResult, steps, totalScale, mapResult, centered = false) {
+	const weights = gaussianWeights(steps);
+	const stepSpacing = steps > 1 ? Math.abs(totalScale) / (steps - 1) / 2 : 0;
+	const outBlur = Math.min(SPIRAL_BLUR_CAP, Math.max(SPIRAL_BLUR_FLOOR, stepSpacing * SPIRAL_BLUR_COEFF));
+	for (let i = 0; i < steps; i++) {
+		const t = steps > 1 ? i / (steps - 1) : 0;
+		const scale = centered ? ((t - .5) * totalScale).toFixed(4) : (t * totalScale).toFixed(4);
+		xml += `  <feDisplacementMap in="${inResult}" in2="${mapResult}"
+    scale="${scale}" xChannelSelector="R" yChannelSelector="G"
+    result="${prefix}s${i}"/>\n`;
+	}
+	xml += `  <feComposite in="${prefix}s0" in2="${prefix}s0" operator="arithmetic"
+    k1="0" k2="1" k3="0" k4="0" result="${prefix}avg0"/>\n`;
+	let sumW = weights[0];
+	for (let i = 1; i < steps; i++) {
+		const sumWNew = sumW + weights[i];
+		const k2 = (sumW / sumWNew).toFixed(8);
+		const k3 = (weights[i] / sumWNew).toFixed(8);
+		xml += `  <feComposite in="${prefix}avg${i - 1}" in2="${prefix}s${i}" operator="arithmetic"
+    k1="0" k2="${k2}" k3="${k3}" k4="0" result="${prefix}avg${i}"/>\n`;
+		sumW = sumWNew;
+	}
+	xml += `  <feGaussianBlur in="${prefix}avg${steps - 1}"
+    stdDeviation="${outBlur.toFixed(3)}" result="${outResult}"/>\n`;
+	return xml;
+}
+/**
+* Appends SVG filter primitives for a directional translation blur using
+* feOffset. Produces N copies of `inResult` shifted along (vx, vy) from
+* 0 → (totalDx, totalDy), blended with Gaussian temporal weights.
+* No wrapper rotation needed — direction is encoded directly as dx/dy offsets.
+*/
+function appendTranslationBlurStage(xml, prefix, inResult, outResult, steps, totalDx, totalDy) {
+	const weights = gaussianWeights(steps);
+	const sweep = Math.sqrt(totalDx ** 2 + totalDy ** 2);
+	const stepSpacing = steps > 1 ? sweep / (steps - 1) : 0;
+	const outBlur = Math.min(TRANS_BLUR_CAP, Math.max(TRANS_BLUR_FLOOR, stepSpacing * TRANS_BLUR_COEFF));
+	for (let i = 0; i < steps; i++) {
+		const t = steps > 1 ? i / (steps - 1) : 0;
+		const dx = (t * totalDx).toFixed(3);
+		const dy = (t * totalDy).toFixed(3);
+		xml += `  <feOffset in="${inResult}" dx="${dx}" dy="${dy}" result="${prefix}s${i}"/>\n`;
+	}
+	xml += `  <feComposite in="${prefix}s0" in2="${prefix}s0" operator="arithmetic"
+    k1="0" k2="1" k3="0" k4="0" result="${prefix}avg0"/>\n`;
+	let sumW = weights[0];
+	for (let i = 1; i < steps; i++) {
+		const sumWNew = sumW + weights[i];
+		const k2 = (sumW / sumWNew).toFixed(8);
+		const k3 = (weights[i] / sumWNew).toFixed(8);
+		xml += `  <feComposite in="${prefix}avg${i - 1}" in2="${prefix}s${i}" operator="arithmetic"
+    k1="0" k2="${k2}" k3="${k3}" k4="0" result="${prefix}avg${i}"/>\n`;
+		sumW = sumWNew;
+	}
+	xml += `  <feGaussianBlur in="${prefix}avg${steps - 1}"
+    stdDeviation="${outBlur.toFixed(3)}" result="${outResult}"/>\n`;
+	return xml;
+}
+/**
+* Step-count limits for each render quality tier.
+*
+* "preview" — real-time playback in the workbench. Caps steps aggressively
+* to keep the SVG filter primitive count under ~30 per element so
+* imgLoad stays under 2ms for combined blur.
+*
+* "render" — final MP4 export. Uses the full step budget for smooth,
+* artifact-free motion blur at the cost of heavier SVG rendering.
+*/
+const STEP_LIMITS = {
+	preview: {
+		trans: 16,
+		spiral: 16
+	},
+	render: {
+		trans: 31,
+		spiral: 50
+	}
+};
+function transSteps(sweepPx) {
+	if (sweepPx <= 0) return 2;
+	const cap = STEP_LIMITS[EFMotionBlur.renderQuality].trans;
+	return Math.max(2, Math.min(cap, Math.ceil(sweepPx) + 1));
+}
+function spiralSteps(sweepPx, rotDeg) {
+	const cap = STEP_LIMITS[EFMotionBlur.renderQuality].spiral;
+	const fromPx = sweepPx > 0 ? Math.ceil(sweepPx / 1) + 1 : 2;
+	const fromAngle = rotDeg > 0 ? Math.ceil(rotDeg / .65) + 1 : 2;
+	return Math.max(2, Math.min(cap, Math.max(fromPx, fromAngle)));
+}
+/**
+* `<ef-motionblur>` applies motion blur to its child for two types of motion:
+*
+* **Translation** — N `feOffset` copies along the velocity vector, Gaussian-blended.
+*
+* **Spiral** (rotation + zoom combined) — N displaced copies using a single
+* spiral vector map that encodes the weighted sum of tangential (rotation) and
+* radial (zoom) components.  Because tangent ⊥ radial with equal magnitude,
+* the combined map always has magnitude r/maxR regardless of the rot/zoom ratio.
+* One pass correctly captures simultaneous rotation and scaling as a spiral
+* smear rather than the generic blur that sequential stages produce.
+*/
+const _EFMotionBlurBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
+var EFMotionBlur = class extends _EFMotionBlurBase {
+	constructor(..._args) {
+		super(..._args);
+		this._outer = null;
+		this._filterEl = null;
+		this._svg = null;
+		this._filterId = null;
+		this._spiralMapURI = null;
+		this._lastMapW = 0;
+		this._lastMapH = 0;
+		this._lastSpiralAngle = NaN;
+		this._filterNode = null;
+		this._transOffsets = [];
+		this._spiralDisplacements = [];
+		this._spiralFeImage = null;
+		this._spiralBlur = null;
+		this._lastStepConfig = "";
+		this._computedDx = 0;
+		this._computedDy = 0;
+		this._computedAngle = 0;
+		this._computedDirectionalAmount = 0;
+		this._computedRotAmount = 0;
+		this._computedRotDeg = 0;
+		this._computedIsotropicAmount = 0;
+		this._hasExplicitAngle = false;
+		this._hasExplicitAmount = false;
+	}
+	static {
+		this.observedAttributes = [
+			"angle",
+			"amount",
+			"shutter-angle",
+			"fps",
+			"sensitivity",
+			"threshold"
+		];
+	}
+	static {
+		this.renderQuality = "preview";
+	}
+	get _computedAmount() {
+		return this._computedDirectionalAmount;
+	}
+	set _computedAmount(v) {
+		this._computedDirectionalAmount = v;
+	}
+	connectedCallback() {
+		this._filterId = "ef-mb-" + Math.random().toString(36).slice(2);
+		this._inject();
+		this._update();
+	}
+	disconnectedCallback() {}
+	attributeChangedCallback(name, _old, newValue) {
+		if (name === "angle") this._hasExplicitAngle = newValue !== null;
+		if (name === "amount") this._hasExplicitAmount = newValue !== null;
+		if (this._outer) this._update();
+	}
+	get angle() {
+		return parseFloat(this.getAttribute("angle") ?? "0");
+	}
+	set angle(v) {
+		this.setAttribute("angle", String(v));
+	}
+	get amount() {
+		return parseFloat(this.getAttribute("amount") ?? "0");
+	}
+	set amount(v) {
+		this.setAttribute("amount", String(v));
+	}
+	get shutterAngle() {
+		return parseFloat(this.getAttribute("shutter-angle") ?? "180");
+	}
+	set shutterAngle(v) {
+		this.setAttribute("shutter-angle", String(v));
+	}
+	get fps() {
+		return parseFloat(this.getAttribute("fps") ?? "30");
+	}
+	set fps(v) {
+		this.setAttribute("fps", String(v));
+	}
+	get sensitivity() {
+		return parseFloat(this.getAttribute("sensitivity") ?? "1");
+	}
+	set sensitivity(v) {
+		this.setAttribute("sensitivity", String(v));
+	}
+	get threshold() {
+		return parseFloat(this.getAttribute("threshold") ?? "0.5");
+	}
+	set threshold(v) {
+		this.setAttribute("threshold", String(v));
+	}
+	get shutterMs() {
+		return this.shutterAngle / 360 * (1e3 / this.fps);
+	}
+	/**
+	* One-time DOM setup. Creates the SVG filter host and two wrapper divs
+	* (_outer for the SVG definition, _filterEl for the filtered content).
+	* The SVG filter is rebuilt dynamically in _update().
+	*/
+	_inject() {
+		const existingOuter = this.querySelector("[data-blur-outer]");
+		if (existingOuter) {
+			this._outer = existingOuter;
+			this._filterEl = existingOuter.querySelector("[data-blur-filter]");
+			this._svg = existingOuter.querySelector("svg");
+			if (!this._svg) {
+				this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+				this._svg.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none";
+				existingOuter.insertBefore(this._svg, this._filterEl);
+			}
+			this._svg.innerHTML = `<defs><filter id="${this._filterId}"></filter></defs>`;
+			this.style.display = "contents";
+			return;
+		}
+		this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		this._svg.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none";
+		this._svg.innerHTML = `<defs><filter id="${this._filterId}"></filter></defs>`;
+		this._outer = document.createElement("div");
+		this._outer.dataset.blurOuter = "";
+		this._outer.dataset.efStaticStyle = "display:block;transform:none;transform-origin:center center";
+		this._outer.style.transformOrigin = "center center";
+		this._filterEl = document.createElement("div");
+		this._filterEl.dataset.blurFilter = "";
+		this._filterEl.style.transformOrigin = "center center";
+		while (this.firstChild) this._filterEl.appendChild(this.firstChild);
+		this._outer.appendChild(this._svg);
+		this._outer.appendChild(this._filterEl);
+		this.appendChild(this._outer);
+		this.style.display = "contents";
+	}
+	/**
+	* Rebuilds wrapper transforms and the SVG filter. Called on attribute changes
+	* and after each sample().
+	*
+	* The SVG contains up to two filter stages:
+	* 1. feOffset×N — directional (translation) blur
+	* 2. Spiral (feImage + feDisplacementMap×N + feComposite blend + feGaussianBlur)
+	*    — combined rotation + zoom in one pass via a spiral vector map.
+	*
+	* On first call (or when step counts change), builds the full SVG filter DOM.
+	* On subsequent calls, updates only the attributes that change per frame.
+	*/
+	_update() {
+		if (!this._outer || !this._filterEl || !this._svg) return;
+		this._outer.style.transform = "none";
+		this._outer.style.display = "block";
+		this._filterEl.style.transform = "none";
+		this._filterEl.style.display = "block";
+		const dx = this._hasExplicitAmount ? this.amount * Math.cos(this.angle * Math.PI / 180) : this._computedDx;
+		const dy = this._hasExplicitAmount ? this.amount * Math.sin(this.angle * Math.PI / 180) : this._computedDy;
+		const directionalMag = Math.sqrt(dx * dx + dy * dy);
+		const rotAmount = this._hasExplicitAmount ? 0 : this._computedRotAmount;
+		const isotropicAmount = this._hasExplicitAmount ? 0 : this._computedIsotropicAmount;
+		const anyBlur = directionalMag > this.threshold || Math.abs(rotAmount) > this.threshold || isotropicAmount > this.threshold;
+		this._filterEl.style.display = "block";
+		if (!anyBlur) {
+			this._filterEl.style.filter = "none";
+			this._filterNode = null;
+			this._svg.innerHTML = `<defs><filter id="${this._filterId}"></filter></defs>`;
+			if (this._outer) this._outer._cachedFilterSVG = void 0;
+			return;
+		}
+		const rotScale = rotAmount * ROT_SCALE_FACTOR;
+		const zoomScale = isotropicAmount * ZOOM_SCALE_FACTOR;
+		const combinedScale = Math.sqrt(rotScale ** 2 + zoomScale ** 2);
+		const spiralAngle = Math.atan2(rotScale, zoomScale);
+		const anySpiralBlur = combinedScale > this.threshold;
+		const child = this._filterEl.firstElementChild ?? this._filterEl;
+		const childRect = child.getBoundingClientRect();
+		const filterElRect = this._filterEl.getBoundingClientRect();
+		const filterElLogicalW = this._filterEl.offsetWidth || 1;
+		const ancestorScale = filterElRect.width / filterElLogicalW || 1;
+		const iw = child.offsetWidth || childRect.width || 100;
+		const ih = child.offsetHeight || childRect.height || 100;
+		const bw = childRect.width / ancestorScale;
+		const bh = childRect.height / ancestorScale;
+		const cx = ((childRect.left + childRect.right) / 2 - filterElRect.left) / ancestorScale;
+		const cy = ((childRect.top + childRect.bottom) / 2 - filterElRect.top) / ancestorScale;
+		const maxBBox = Math.ceil(Math.hypot(iw, ih));
+		const mapPad = 64;
+		const mapSide = maxBBox + 2 * mapPad;
+		const mapContentOx = mapPad + Math.round((maxBBox - iw) / 2);
+		const mapContentOy = mapPad + Math.round((maxBBox - ih) / 2);
+		this._ensureMaps(mapSide, mapSide, mapContentOx, mapContentOy, iw, ih, spiralAngle);
+		const margin = Math.ceil(Math.hypot(bw, bh) / 2) + Math.ceil(combinedScale / 2) + Math.ceil(Math.abs(dx)) + Math.ceil(Math.abs(dy)) + 64;
+		const filterX = Math.floor(cx - margin);
+		const filterY = Math.floor(cy - margin);
+		const filterW = Math.ceil(margin * 2);
+		const filterH = Math.ceil(margin * 2);
+		const mapImgX = Math.round(cx - mapSide / 2);
+		const mapImgY = Math.round(cy - mapSide / 2);
+		const transStepCount = directionalMag > this.threshold ? transSteps(directionalMag) : 0;
+		const spiralStepCount = anySpiralBlur ? spiralSteps(combinedScale, this._computedRotDeg) : 0;
+		const stepConfig = `${transStepCount},${spiralStepCount}`;
+		if (stepConfig !== this._lastStepConfig || !this._filterNode) {
+			this._lastStepConfig = stepConfig;
+			this._buildFilterDOM(transStepCount, spiralStepCount, mapSide);
+		}
+		const f = this._filterNode;
+		f.setAttribute("x", String(filterX));
+		f.setAttribute("y", String(filterY));
+		f.setAttribute("width", String(filterW));
+		f.setAttribute("height", String(filterH));
+		if (transStepCount > 0) for (let i = 0; i < this._transOffsets.length; i++) {
+			const t = this._transOffsets.length > 1 ? i / (this._transOffsets.length - 1) : 0;
+			this._transOffsets[i].setAttribute("dx", String(t * dx));
+			this._transOffsets[i].setAttribute("dy", String(t * dy));
+		}
+		if (spiralStepCount > 0 && this._spiralFeImage) {
+			this._spiralFeImage.setAttribute("x", String(mapImgX));
+			this._spiralFeImage.setAttribute("y", String(mapImgY));
+			if (this._spiralMapURI) this._spiralFeImage.setAttribute("href", this._spiralMapURI);
+			for (let i = 0; i < this._spiralDisplacements.length; i++) {
+				const t = this._spiralDisplacements.length > 1 ? i / (this._spiralDisplacements.length - 1) : 0;
+				this._spiralDisplacements[i].setAttribute("scale", String((t - .5) * combinedScale));
+			}
+			const nSpiral = this._spiralDisplacements.length;
+			const spiralSpacing = nSpiral > 1 ? combinedScale / (nSpiral - 1) / 2 : 0;
+			this._spiralBlur?.setAttribute("stdDeviation", String(Math.min(SPIRAL_BLUR_CAP, Math.max(SPIRAL_BLUR_FLOOR, spiralSpacing * SPIRAL_BLUR_COEFF))));
+		}
+		this._filterEl.style.filter = `url(#${this._filterId})`;
+		this._refreshSerializationCache();
+	}
+	/**
+	* Refreshes the serialization cache on _outer. The serializer reads this
+	* instead of calling XMLSerializer on the SVG defs, which is important
+	* when rotation/zoom displacement maps embed large base64 data URIs.
+	*/
+	_refreshSerializationCache() {
+		if (!this._filterNode || !this._outer) return;
+		this._outer._cachedFilterSVG = new XMLSerializer().serializeToString(this._filterNode);
+	}
+	/**
+	* Builds the full SVG filter DOM tree. Called once when step configuration changes.
+	* Stores references to mutable elements for fast per-frame attribute updates.
+	*/
+	_buildFilterDOM(transStepCount, spiralStepCount, mapSide) {
+		let xml = `<filter id="${this._filterId}" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">\n`;
+		let lastResult = "SourceGraphic";
+		if (transStepCount > 0) {
+			xml = appendTranslationBlurStage(xml, "t", lastResult, "transblur", transStepCount, 0, 0);
+			lastResult = "transblur";
+		}
+		if (spiralStepCount > 0 && this._spiralMapURI) {
+			xml += `  <feImage href="${this._spiralMapURI}" preserveAspectRatio="none" width="${mapSide}" height="${mapSide}" result="spiralmap"/>\n`;
+			xml = appendTemporalBlurStage(xml, "sp", lastResult, "spiralblur", spiralStepCount, 0, "spiralmap", true);
+			lastResult = "spiralblur";
+		}
+		if (lastResult === "SourceGraphic") xml += `  <feComposite in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0"/>\n`;
+		xml += `</filter>`;
+		this._svg.innerHTML = `<defs>${xml}</defs>`;
+		this._filterNode = this._svg.querySelector("filter");
+		this._transOffsets = Array.from(this._svg.querySelectorAll("feOffset"));
+		this._spiralFeImage = this._svg.querySelector("feImage[result=\"spiralmap\"]");
+		this._spiralDisplacements = Array.from(this._svg.querySelectorAll("feDisplacementMap[result^=\"sps\"]"));
+		this._spiralBlur = this._svg.querySelector("feGaussianBlur[result=\"spiralblur\"]");
+	}
+	/**
+	* Generates or refreshes the spiral displacement map.
+	* Cached by element size and spiral angle (quantized to ~5°).
+	* The feImage href is updated in the fast path when the map URI changes.
+	*/
+	_ensureMaps(pw, ph, ox, oy, iw, ih, spiralAngle) {
+		const riw = Math.round(iw) || 100;
+		const rih = Math.round(ih) || 100;
+		const quantizedAngle = Math.round(spiralAngle * SPIRAL_ANGLE_QUANT) / SPIRAL_ANGLE_QUANT;
+		const sizeChanged = Math.abs(riw - this._lastMapW) > 4 || Math.abs(rih - this._lastMapH) > 4;
+		const angleChanged = Math.abs(quantizedAngle - this._lastSpiralAngle) > .001 || isNaN(this._lastSpiralAngle);
+		if (!sizeChanged && !angleChanged) return;
+		this._lastMapW = riw;
+		this._lastMapH = rih;
+		this._lastSpiralAngle = quantizedAngle;
+		this._spiralMapURI = buildSpiralMap(pw, ph, ox, oy, riw, rih, riw / 2, rih / 2, quantizedAngle);
+	}
+	/**
+	* Samples the child's current position and transform, computing blur amounts.
+	* Called by `updateAnimations` after all animation times are settled.
+	*/
+	sample(_timestamp = performance.now()) {
+		if (this._hasExplicitAngle && this._hasExplicitAmount) return;
+		if (!this._filterEl) return;
+		const child = this._filterEl.firstElementChild ?? this._filterEl;
+		const det = this._computeDeterministicTransform(child);
+		if (det !== null) this._applyTransform(det.dx, det.dy, det.dAngle, det.dScale, det.halfDiag);
+	}
+	/**
+	* Deterministic two-seek measurement. Seeks all animations back by shutterMs,
+	* reads positions and transforms, restores. Returns null when no seekable
+	* animations exist or currentTime < shutterMs.
+	*/
+	_computeDeterministicTransform(child) {
+		const tracked = getTrackedAnimationsForSubtree(child);
+		const animations = tracked.length > 0 ? tracked : child.getAnimations({ subtree: true });
+		if (animations.length === 0) return null;
+		const seekable = [];
+		const currentTimes = [];
+		for (const anim of animations) {
+			const t = anim.currentTime;
+			if (t !== null && typeof t === "number") {
+				seekable.push(anim);
+				currentTimes.push(t);
+			}
+		}
+		if (seekable.length === 0) return null;
+		const shutterMs = this.shutterMs;
+		if (currentTimes.every((t) => t < shutterMs)) return null;
+		if (seekable.every((anim) => {
+			const timing = anim.effect?.getComputedTiming();
+			if (!timing) return false;
+			const { activeDuration, progress } = timing;
+			return progress === null && typeof activeDuration === "number" && isFinite(activeDuration);
+		})) return null;
+		const outerWas = this._outer.style.transform;
+		const filterWas = this._filterEl.style.transform;
+		this._outer.style.transform = "none";
+		this._filterEl.style.transform = "none";
+		const filterElLogicalW = this._filterEl.offsetWidth || 1;
+		const ancestorScale = this._filterEl.getBoundingClientRect().width / filterElLogicalW || 1;
+		const r1 = child.getBoundingClientRect();
+		const cx1 = r1.left + r1.width / 2;
+		const cy1 = r1.top + r1.height / 2;
+		const halfDiag = Math.sqrt((child.offsetWidth || 1) ** 2 + (child.offsetHeight || 1) ** 2) / 2;
+		const { angle: angle1, scale: scale1 } = readTransformMatrix(child, seekable);
+		for (let i = 0; i < seekable.length; i++) {
+			const activeDuration = (seekable[i].effect?.getComputedTiming())?.activeDuration;
+			const endTime = typeof activeDuration === "number" && isFinite(activeDuration) ? activeDuration : Infinity;
+			seekable[i].currentTime = Math.min(Math.max(0, currentTimes[i] - shutterMs), endTime);
+		}
+		const r0 = child.getBoundingClientRect();
+		const cx0 = r0.left + r0.width / 2;
+		const cy0 = r0.top + r0.height / 2;
+		const { angle: angle0, scale: scale0 } = readTransformMatrix(child, seekable);
+		for (let i = 0; i < seekable.length; i++) seekable[i].currentTime = currentTimes[i];
+		this._outer.style.transform = outerWas;
+		this._filterEl.style.transform = filterWas;
+		return {
+			dx: (cx1 - cx0) / ancestorScale,
+			dy: (cy1 - cy0) / ancestorScale,
+			dAngle: angle1 - angle0,
+			dScale: scale1 - scale0,
+			halfDiag
+		};
+	}
+	/**
+	* Converts measured deltas to blur amounts and calls _update() when changed.
+	*
+	* Translation → directional box blur amount + angle.
+	* Rotation    → arc displacement amount (signed: + = CCW, − = CW).
+	*               Arc length at half-diagonal radius: R × |Δθ_rad|.
+	*               Stored signed so the displacement map is applied in the
+	*               correct tangential direction.
+	* Scale       → radial displacement amount: |Δscale| × half-diagonal.
+	*/
+	_applyTransform(dx, dy, dAngle, dScale, halfDiag) {
+		const s = this.sensitivity;
+		const mag = Math.sqrt(dx ** 2 + dy ** 2);
+		const scaledMag = Math.min(mag * s, MAX_TRANS_AMOUNT_PX);
+		const newDx = mag < this.threshold ? 0 : dx / mag * scaledMag;
+		const newDy = mag < this.threshold ? 0 : dy / mag * scaledMag;
+		const newDir = mag < this.threshold ? 0 : scaledMag;
+		const newAngle = mag < this.threshold ? this._computedAngle : Math.atan2(dy, dx) * 180 / Math.PI;
+		const dAngleRad = dAngle * Math.PI / 180;
+		const arcLen = halfDiag * Math.abs(dAngleRad) * s;
+		const newRot = Math.min(arcLen, MAX_ROT_AMOUNT_PX) * (dAngle > 0 ? -1 : 1);
+		const newRotDeg = Math.abs(dAngle);
+		const rawZoom = Math.abs(dScale) * halfDiag * s;
+		const newZoom = rawZoom < this.threshold ? 0 : Math.min(rawZoom, MAX_ZOOM_AMOUNT_PX);
+		if (!(newDx !== this._computedDx || newDy !== this._computedDy || newDir !== this._computedDirectionalAmount || newAngle !== this._computedAngle || newRot !== this._computedRotAmount || newRotDeg !== this._computedRotDeg || newZoom !== this._computedIsotropicAmount)) return;
+		this._computedDx = newDx;
+		this._computedDy = newDy;
+		this._computedDirectionalAmount = newDir;
+		this._computedAngle = newAngle;
+		this._computedRotAmount = newRot;
+		this._computedRotDeg = newRotDeg;
+		this._computedIsotropicAmount = newZoom;
+		this._update();
+	}
+};
+if (typeof customElements !== "undefined") customElements.define("ef-motionblur", EFMotionBlur);
+
+//#endregion
+export { EFMotionBlur };
+//# sourceMappingURL=EFMotionBlur.js.map