@frame-by-frame/core 1.0.0-rc.1

package/dist/public-controller-jGcw6iqQ.js

@@ -0,0 +1,2825 @@
+//#region src/core/event-emitter.ts
+/** Small typed emitter that isolates failures from individual listeners. */
+var EventEmitter = class {
+	#listeners = /* @__PURE__ */ new Map();
+	#reportAsyncError;
+	constructor(reportAsyncError) {
+		this.#reportAsyncError = reportAsyncError;
+	}
+	on(event, listener) {
+		let listeners = this.#listeners.get(event);
+		if (listeners === void 0) {
+			listeners = /* @__PURE__ */ new Set();
+			this.#listeners.set(event, listeners);
+		}
+		const storedListener = listener;
+		listeners.add(storedListener);
+		let active = true;
+		return () => {
+			if (!active) return;
+			active = false;
+			listeners.delete(storedListener);
+		};
+	}
+	emit(event, payload) {
+		const listeners = this.#listeners.get(event);
+		if (listeners === void 0) return;
+		for (const listener of [...listeners]) try {
+			listener(payload);
+		} catch (error) {
+			this.#reportAsyncError(error);
+		}
+	}
+	clear() {
+		this.#listeners.clear();
+	}
+};
+
+//#endregion
+//#region src/core/errors.ts
+/** An error with a stable package-specific code and structured context. */
+var FrameByFrameError = class extends Error {
+	name = "FrameByFrameError";
+	cause;
+	code;
+	details;
+	constructor(code, message, options = {}) {
+		super(message, options.cause === void 0 ? void 0 : { cause: options.cause });
+		this.cause = options.cause;
+		this.code = code;
+		this.details = options.details === void 0 ? void 0 : Object.freeze({ ...options.details });
+	}
+};
+
+//#endregion
+//#region src/mapping/easing.ts
+const clampProgress$2 = (progress) => Math.min(1, Math.max(0, progress));
+const sampleBezier = (parameter, firstControl, secondControl) => {
+	const inverse = 1 - parameter;
+	return 3 * inverse * inverse * parameter * firstControl + 3 * inverse * parameter * parameter * secondControl + parameter * parameter * parameter;
+};
+const createCubicBezier = (x1, y1, x2, y2) => {
+	return (progress) => {
+		const x = clampProgress$2(progress);
+		if (x === 0 || x === 1) return x;
+		let lower = 0;
+		let upper = 1;
+		let parameter = x;
+		for (let iteration = 0; iteration < 24; iteration += 1) {
+			const sampledX = sampleBezier(parameter, x1, x2);
+			if (Math.abs(sampledX - x) <= 1e-7) break;
+			if (sampledX < x) lower = parameter;
+			else upper = parameter;
+			parameter = (lower + upper) / 2;
+		}
+		return clampProgress$2(sampleBezier(parameter, y1, y2));
+	};
+};
+const namedEasing = {
+	linear: (progress) => progress,
+	"ease-in": createCubicBezier(.42, 0, 1, 1),
+	"ease-out": createCubicBezier(0, 0, .58, 1),
+	"ease-in-out": createCubicBezier(.42, 0, .58, 1)
+};
+const invalidEasingDefinition = (easing, segmentIndex) => {
+	const scope = segmentIndex === null ? "timeline" : `segment at index ${String(segmentIndex)}`;
+	throw new FrameByFrameError(segmentIndex === null ? "INVALID_TIMELINE" : "INVALID_SEGMENT", `The ${scope} has an unsupported easing definition.`, { details: {
+		easing,
+		segmentIndex
+	} });
+};
+function assertEasingDefinition(easing, segmentIndex) {
+	if (easing === void 0 || typeof easing === "function") return;
+	if (typeof easing !== "string" || !Object.hasOwn(namedEasing, easing)) invalidEasingDefinition(easing, segmentIndex);
+}
+const resolveEasing = (easing, segmentIndex) => {
+	if (easing === void 0) return namedEasing.linear;
+	if (typeof easing === "string") return namedEasing[easing];
+	return (progress) => {
+		let result;
+		try {
+			result = easing(clampProgress$2(progress));
+		} catch (cause) {
+			throw new FrameByFrameError("INVALID_EASING_RESULT", `The custom easing for segment at index ${String(segmentIndex)} threw an error.`, {
+				cause,
+				details: {
+					progress,
+					segmentIndex
+				}
+			});
+		}
+		if (!Number.isFinite(result)) throw new FrameByFrameError("INVALID_EASING_RESULT", `The custom easing for segment at index ${String(segmentIndex)} returned a non-finite value.`, { details: {
+			progress,
+			result,
+			segmentIndex
+		} });
+		return clampProgress$2(result);
+	};
+};
+
+//#endregion
+//#region src/mapping/normalize-timeline.ts
+const isRecord$4 = (value) => typeof value === "object" && value !== null;
+const invalidTimeline = (message, details) => {
+	throw new FrameByFrameError("INVALID_TIMELINE", message, { details });
+};
+const invalidSegment = (index, message, details) => {
+	throw new FrameByFrameError("INVALID_SEGMENT", message, { details: {
+		...details,
+		segmentIndex: index
+	} });
+};
+const readSegment = (value, segmentIndex) => {
+	if (!isRecord$4(value)) return invalidSegment(segmentIndex, "Each timeline segment must be an object.", { segment: value });
+	return value;
+};
+const readTuple = (value, field, segmentIndex) => {
+	if (!Array.isArray(value) || value.length !== 2) return invalidSegment(segmentIndex, `Segment ${field} must contain exactly two numbers.`, {
+		field,
+		value
+	});
+	const tuple = value;
+	const start = tuple[0];
+	const end = tuple[1];
+	if (typeof start !== "number" || !Number.isFinite(start)) return invalidSegment(segmentIndex, `Segment ${field} start must be finite.`, {
+		field,
+		value: start
+	});
+	if (typeof end !== "number" || !Number.isFinite(end)) return invalidSegment(segmentIndex, `Segment ${field} end must be finite.`, {
+		field,
+		value: end
+	});
+	return [start, end];
+};
+const readUnit = (value, segmentIndex) => {
+	if (value === void 0) return "px";
+	if (value !== "px" && value !== "progress") return invalidSegment(segmentIndex, "Segment scrollUnit must be \"px\" or \"progress\".", { scrollUnit: value });
+	return value;
+};
+const readClipId = (value, segmentIndex) => {
+	if (value === void 0) return null;
+	if (typeof value !== "string" || value.trim().length === 0) return invalidSegment(segmentIndex, "Segment clip must be a non-empty string.", { clip: value });
+	return value;
+};
+const readFrameRate = (value) => {
+	if (value === void 0) return null;
+	if (!isRecord$4(value)) throw new FrameByFrameError("INVALID_FRAME_RATE", "Frame configuration must be an object.", { details: { frame: value } });
+	if (value["snap"] === void 0 || value["snap"] === false) {
+		if (value["fps"] !== void 0) throw new FrameByFrameError("INVALID_FRAME_RATE", "Frame rate may only be provided when frame snapping is enabled.", { details: { frame: value } });
+		return null;
+	}
+	if (value["snap"] !== true || typeof value["fps"] !== "number" || !Number.isFinite(value["fps"])) throw new FrameByFrameError("INVALID_FRAME_RATE", "Frame snapping requires a finite, positive fps value.", { details: { frame: value } });
+	if (value["fps"] <= 0) throw new FrameByFrameError("INVALID_FRAME_RATE", "Frame snapping requires a finite, positive fps value.", { details: { frame: value } });
+	return value["fps"];
+};
+const normalizeTimeline = (options) => {
+	if (!isRecord$4(options)) return invalidTimeline("Timeline options must be an object.", { options });
+	const segmentsValue = options.segments;
+	if (!Array.isArray(segmentsValue) || segmentsValue.length === 0) return invalidTimeline("A timeline requires at least one segment.", { segments: segmentsValue });
+	assertEasingDefinition(options.easing, null);
+	const defaultEasing = options.easing;
+	let timelineUnit;
+	const normalizedSegments = [];
+	const segmentValues = segmentsValue;
+	for (const [sourceIndex, segmentValue] of segmentValues.entries()) {
+		const segment = readSegment(segmentValue, sourceIndex);
+		const scroll = readTuple(segment.scroll, "scroll", sourceIndex);
+		const media = readTuple(segment.media, "media", sourceIndex);
+		const unit = readUnit(segment.scrollUnit, sourceIndex);
+		if (timelineUnit === void 0) timelineUnit = unit;
+		else if (timelineUnit !== unit) return invalidTimeline("All segments in a timeline must use the same scroll unit.", {
+			expectedUnit: timelineUnit,
+			receivedUnit: unit,
+			segmentIndex: sourceIndex
+		});
+		if (scroll[1] <= scroll[0]) invalidSegment(sourceIndex, "Segment scroll intervals must be strictly increasing.", { scroll });
+		if (unit === "progress" && (scroll[0] < 0 || scroll[1] > 1)) invalidSegment(sourceIndex, "Progress segment boundaries must stay between 0 and 1.", { scroll });
+		if (media[0] < 0 || media[1] < 0) invalidSegment(sourceIndex, "Segment media times cannot be negative.", { media });
+		const segmentEasing = segment.easing;
+		assertEasingDefinition(segmentEasing, sourceIndex);
+		const easingDefinition = segmentEasing ?? defaultEasing;
+		normalizedSegments.push({
+			sourceIndex,
+			scrollStart: scroll[0],
+			scrollEnd: scroll[1],
+			mediaStart: media[0],
+			mediaEnd: media[1],
+			clipId: readClipId(segment.clip, sourceIndex),
+			easing: resolveEasing(easingDefinition, sourceIndex)
+		});
+	}
+	normalizedSegments.sort((left, right) => left.scrollStart - right.scrollStart || left.scrollEnd - right.scrollEnd || left.sourceIndex - right.sourceIndex);
+	for (let index = 1; index < normalizedSegments.length; index += 1) {
+		const previous = normalizedSegments[index - 1];
+		const current = normalizedSegments[index];
+		if (previous !== void 0 && current !== void 0 && current.scrollStart < previous.scrollEnd) throw new FrameByFrameError("OVERLAPPING_SEGMENTS", `Segments at indexes ${String(previous.sourceIndex)} and ${String(current.sourceIndex)} overlap.`, { details: {
+			currentSegmentIndex: current.sourceIndex,
+			previousSegmentIndex: previous.sourceIndex
+		} });
+	}
+	return {
+		unit: timelineUnit ?? "px",
+		segments: normalizedSegments,
+		frameRate: readFrameRate(options.frame)
+	};
+};
+
+//#endregion
+//#region src/mapping/timeline.ts
+const clampProgress$1 = (progress) => Math.min(1, Math.max(0, progress));
+const snapTime = (time, frameRate) => frameRate === null ? time : Math.round(time * frameRate) / frameRate;
+const createHeldResolution = (phase, segment, requestedTime, frameRate) => ({
+	phase,
+	segmentIndex: null,
+	clipId: segment.clipId,
+	rawProgress: null,
+	easedProgress: null,
+	requestedTime,
+	targetTime: snapTime(requestedTime, frameRate)
+});
+const createActiveResolution = (segment, position, frameRate) => {
+	const rawProgress = clampProgress$1((position - segment.scrollStart) / (segment.scrollEnd - segment.scrollStart));
+	const easedProgress = segment.easing(rawProgress);
+	const requestedTime = segment.mediaStart + easedProgress * (segment.mediaEnd - segment.mediaStart);
+	return {
+		phase: "active",
+		segmentIndex: segment.sourceIndex,
+		clipId: segment.clipId,
+		rawProgress,
+		easedProgress,
+		requestedTime,
+		targetTime: snapTime(requestedTime, frameRate)
+	};
+};
+const findLastStartedSegment = (segments, position) => {
+	let lower = 0;
+	let upper = segments.length;
+	while (lower < upper) {
+		const middle = Math.floor((lower + upper) / 2);
+		const segment = segments[middle];
+		if (segment !== void 0 && segment.scrollStart <= position) lower = middle + 1;
+		else upper = middle;
+	}
+	return lower - 1;
+};
+const resolveTimeline = (timeline, position) => {
+	if (!Number.isFinite(position)) throw new FrameByFrameError("INVALID_TIMELINE", "Timeline position must be finite.", { details: { position } });
+	const first = timeline.segments[0];
+	const last = timeline.segments[timeline.segments.length - 1];
+	if (first === void 0 || last === void 0) throw new FrameByFrameError("INVALID_TIMELINE", "A timeline requires at least one segment.");
+	if (position < first.scrollStart) return createHeldResolution("before", first, first.mediaStart, timeline.frameRate);
+	if (position > last.scrollEnd) return createHeldResolution("after", last, last.mediaEnd, timeline.frameRate);
+	const candidateIndex = findLastStartedSegment(timeline.segments, position);
+	const candidate = timeline.segments[candidateIndex];
+	if (candidate === void 0) return createHeldResolution("before", first, first.mediaStart, timeline.frameRate);
+	if (position <= candidate.scrollEnd) return createActiveResolution(candidate, position, timeline.frameRate);
+	return createHeldResolution("gap", candidate, candidate.mediaEnd, timeline.frameRate);
+};
+/** Creates an immutable, DOM-independent scroll-to-media timeline. */
+const createTimeline = (options) => {
+	const normalized = normalizeTimeline(options);
+	return Object.freeze({
+		unit: normalized.unit,
+		resolve: (position) => resolveTimeline(normalized, position)
+	});
+};
+
+//#endregion
+//#region src/core/controller-config.ts
+const AXES = ["x", "y"];
+const CROSS_ORIGIN_VALUES = [
+	"",
+	"anonymous",
+	"use-credentials"
+];
+const PRELOAD_VALUES = [
+	"none",
+	"metadata",
+	"auto",
+	"full"
+];
+const LOADING_MODES = ["immediate", "on-demand"];
+const LOADING_TRIGGERS = [
+	"manual",
+	"target-near-viewport",
+	"first-use"
+];
+const REQUEST_CREDENTIALS = [
+	"omit",
+	"same-origin",
+	"include"
+];
+const REQUEST_CACHE = [
+	"default",
+	"no-store",
+	"reload",
+	"no-cache",
+	"force-cache",
+	"only-if-cached"
+];
+const REDUCED_MOTION_BEHAVIORS = [
+	"first-frame",
+	"last-frame",
+	"disable",
+	"ignore"
+];
+const BREAKPOINT_KEYS = [
+	"id",
+	"query",
+	"override"
+];
+const BREAKPOINT_OVERRIDE_KEYS = ["axes"];
+const AXIS_OVERRIDE_KEYS = ["enabled", "bindings"];
+const VIDEO_BINDING_OVERRIDE_KEYS = [
+	"id",
+	"segments",
+	"clips",
+	"easing",
+	"frame",
+	"loading",
+	"video",
+	"seek"
+];
+const CANVAS_BINDING_OVERRIDE_KEYS = [...VIDEO_BINDING_OVERRIDE_KEYS, "canvas"];
+const CANVAS_FITS = [
+	"contain",
+	"cover",
+	"fill",
+	"none"
+];
+const CANVAS_OVERRIDE_KEYS = [
+	"fit",
+	"pixelRatio",
+	"imageSmoothingEnabled"
+];
+const isRecord$3 = (value) => typeof value === "object" && value !== null;
+const invalidController = (message, details) => {
+	throw new FrameByFrameError("INVALID_CONTROLLER", message, { details });
+};
+const invalidMediaConfig = (bindingId, message, details) => {
+	throw new FrameByFrameError("INVALID_MEDIA_CONFIG", message, { details: {
+		...details,
+		bindingId
+	} });
+};
+const invalidBreakpoint = (message, details, cause) => {
+	throw new FrameByFrameError("INVALID_BREAKPOINT_CONFIG", message, {
+		cause,
+		details
+	});
+};
+const cloneTuple = (value) => Array.isArray(value) ? Object.freeze([...value]) : value;
+const cloneSegments = (value) => {
+	if (!Array.isArray(value)) return value;
+	return Object.freeze(value.map((segment) => isRecord$3(segment) ? Object.freeze({
+		...segment,
+		scroll: cloneTuple(segment["scroll"]),
+		media: cloneTuple(segment["media"])
+	}) : segment));
+};
+const cloneClips = (value) => {
+	if (!Array.isArray(value)) return value;
+	return Object.freeze(value.map((clip) => isRecord$3(clip) ? Object.freeze({
+		...clip,
+		sources: Array.isArray(clip["sources"]) ? Object.freeze(clip["sources"].map((source) => isRecord$3(source) ? Object.freeze({ ...source }) : source)) : clip["sources"]
+	}) : clip));
+};
+const cloneOption = (value) => isRecord$3(value) ? Object.freeze({ ...value }) : value;
+const createBindingDefinition = (value, axis) => Object.freeze({
+	id: value["id"],
+	axis,
+	...value["renderer"] === void 0 ? {} : { renderer: value["renderer"] },
+	...value["target"] === void 0 ? {} : { target: value["target"] },
+	...value["mountTo"] === void 0 ? {} : { mountTo: value["mountTo"] },
+	segments: cloneSegments(value["segments"]),
+	clips: cloneClips(value["clips"]),
+	...value["easing"] === void 0 ? {} : { easing: value["easing"] },
+	...value["frame"] === void 0 ? {} : { frame: cloneOption(value["frame"]) },
+	...value["loading"] === void 0 ? {} : { loading: cloneOption(value["loading"]) },
+	...value["video"] === void 0 ? {} : { video: cloneOption(value["video"]) },
+	...value["canvas"] === void 0 ? {} : { canvas: cloneOption(value["canvas"]) },
+	...value["seek"] === void 0 ? {} : { seek: cloneOption(value["seek"]) }
+});
+const readAxis = (value, axis) => {
+	if (!isRecord$3(value)) return invalidController(`Axis "${axis}" must be an object or false.`, {
+		axis,
+		value
+	});
+	if (value["enabled"] !== void 0 && typeof value["enabled"] !== "boolean") return invalidController(`Axis "${axis}" enabled must be a boolean.`, {
+		axis,
+		enabled: value["enabled"]
+	});
+	if (!Array.isArray(value["bindings"]) || value["bindings"].length === 0) return invalidController(`Axis "${axis}" requires at least one binding.`, {
+		axis,
+		bindings: value["bindings"]
+	});
+	return value;
+};
+const isElementReference = (value) => typeof value === "function" || typeof value === "string" && value.trim().length > 0 || isRecord$3(value);
+const compileSource = (value, bindingId, clipId, sourceIndex) => {
+	if (!isRecord$3(value)) return invalidMediaConfig(bindingId, "Each video source must be an object.", {
+		clipId,
+		source: value,
+		sourceIndex
+	});
+	const src = value["src"];
+	const type = value["type"];
+	if (typeof src !== "string" || src.trim().length === 0) return invalidMediaConfig(bindingId, "Video source src must be a non-empty string.", {
+		clipId,
+		sourceIndex,
+		src
+	});
+	if (type !== void 0 && (typeof type !== "string" || type.trim().length === 0)) return invalidMediaConfig(bindingId, "Video source type must be a non-empty string.", {
+		clipId,
+		sourceIndex,
+		type
+	});
+	return Object.freeze({
+		src,
+		type: type ?? null
+	});
+};
+const compileClip = (value, bindingId, clipIndex) => {
+	if (!isRecord$3(value)) return invalidMediaConfig(bindingId, "Each video clip must be an object.", {
+		clip: value,
+		clipIndex
+	});
+	const id = value["id"];
+	const sources = value["sources"];
+	const poster = value["poster"];
+	const crossOrigin = value["crossOrigin"];
+	const preload = value["preload"];
+	if (typeof id !== "string" || id.trim().length === 0) return invalidMediaConfig(bindingId, "Each video clip requires a non-empty string ID.", {
+		clipId: id,
+		clipIndex
+	});
+	if (!Array.isArray(sources) || sources.length === 0) return invalidMediaConfig(bindingId, `Video clip "${id}" requires at least one source.`, {
+		clipId: id,
+		sources
+	});
+	if (poster !== void 0 && (typeof poster !== "string" || poster.trim().length === 0)) return invalidMediaConfig(bindingId, "Video clip poster must be a non-empty string.", {
+		clipId: id,
+		poster
+	});
+	if (crossOrigin !== void 0 && !CROSS_ORIGIN_VALUES.includes(crossOrigin)) return invalidMediaConfig(bindingId, "Video clip crossOrigin is invalid.", {
+		clipId: id,
+		crossOrigin
+	});
+	if (preload !== void 0 && !PRELOAD_VALUES.includes(preload)) return invalidMediaConfig(bindingId, "Video clip preload is invalid.", {
+		clipId: id,
+		preload
+	});
+	return Object.freeze({
+		id,
+		sources: Object.freeze(sources.map((source, sourceIndex) => compileSource(source, bindingId, id, sourceIndex))),
+		poster: poster ?? null,
+		crossOrigin: crossOrigin ?? null,
+		preload: preload ?? "metadata"
+	});
+};
+const compileClips = (value, bindingId) => {
+	if (!Array.isArray(value) || value.length === 0) return invalidMediaConfig(bindingId, "Each binding requires at least one video clip.", { clips: value });
+	const ids = /* @__PURE__ */ new Set();
+	const clips = value.map((clip, clipIndex) => compileClip(clip, bindingId, clipIndex));
+	for (const clip of clips) {
+		if (ids.has(clip.id)) return invalidMediaConfig(bindingId, `Video clip ID "${clip.id}" is duplicated.`, { clipId: clip.id });
+		ids.add(clip.id);
+	}
+	return Object.freeze(clips);
+};
+const compileVideoOptions = (value, bindingId) => {
+	if (value !== void 0 && !isRecord$3(value)) return invalidMediaConfig(bindingId, "Video options must be an object.", { video: value });
+	const options = value ?? {};
+	for (const field of [
+		"muted",
+		"playsInline",
+		"controls",
+		"loop"
+	]) if (options[field] !== void 0 && typeof options[field] !== "boolean") return invalidMediaConfig(bindingId, `Video option "${field}" must be a boolean.`, {
+		field,
+		value: options[field]
+	});
+	return Object.freeze({
+		muted: options["muted"],
+		playsInline: options["playsInline"],
+		controls: options["controls"],
+		loop: options["loop"]
+	});
+};
+const compileCanvasOptions = (value, bindingId, renderer) => {
+	if (renderer === "video") {
+		if (value !== void 0) return invalidMediaConfig(bindingId, "Canvas options require renderer \"canvas\".", { canvas: value });
+		return null;
+	}
+	if (value !== void 0 && !isRecord$3(value)) return invalidMediaConfig(bindingId, "Canvas options must be an object.", { canvas: value });
+	const options = value ?? {};
+	const fit = options["fit"] ?? "contain";
+	const pixelRatio = options["pixelRatio"] ?? "device";
+	const imageSmoothingEnabled = options["imageSmoothingEnabled"] ?? true;
+	const decoderTarget = options["decoderTarget"];
+	if (!CANVAS_FITS.includes(fit)) return invalidMediaConfig(bindingId, "Canvas fit is invalid.", { fit });
+	if (pixelRatio !== "device" && (typeof pixelRatio !== "number" || !Number.isFinite(pixelRatio) || pixelRatio <= 0)) return invalidMediaConfig(bindingId, "Canvas pixelRatio must be \"device\" or finite and positive.", { pixelRatio });
+	if (typeof imageSmoothingEnabled !== "boolean") return invalidMediaConfig(bindingId, "Canvas imageSmoothingEnabled must be a boolean.", { imageSmoothingEnabled });
+	if (decoderTarget !== void 0 && !isElementReference(decoderTarget)) return invalidMediaConfig(bindingId, "Canvas decoderTarget must be an element, selector, or resolver.", { decoderTarget });
+	return Object.freeze({
+		fit,
+		pixelRatio,
+		imageSmoothingEnabled,
+		decoderTarget
+	});
+};
+const compileLoading = (value, bindingId, clips) => {
+	if (value !== void 0 && !isRecord$3(value)) return invalidMediaConfig(bindingId, "Loading options must be an object.", { loading: value });
+	const options = value ?? {};
+	const mode = options["mode"] ?? "immediate";
+	const trigger = options["trigger"];
+	const rootMargin = options["rootMargin"];
+	const credentials = options["credentials"] ?? "same-origin";
+	const cache = options["cache"] ?? "default";
+	if (!LOADING_MODES.includes(mode)) return invalidMediaConfig(bindingId, "Loading mode is invalid.", { mode });
+	if (mode === "on-demand") {
+		if (!LOADING_TRIGGERS.includes(trigger)) return invalidMediaConfig(bindingId, "On-demand loading requires an explicit trigger.", { trigger });
+	} else if (trigger !== void 0) return invalidMediaConfig(bindingId, "Immediate loading cannot declare a trigger.", { trigger });
+	if (rootMargin !== void 0) {
+		if (mode !== "on-demand" || trigger !== "target-near-viewport" || typeof rootMargin !== "string" || rootMargin.trim().length === 0) return invalidMediaConfig(bindingId, "rootMargin is only valid for target-near-viewport loading.", {
+			rootMargin,
+			trigger
+		});
+	}
+	if (!REQUEST_CREDENTIALS.includes(credentials)) return invalidMediaConfig(bindingId, "Full preload credentials are invalid.", { credentials });
+	if (!REQUEST_CACHE.includes(cache)) return invalidMediaConfig(bindingId, "Full preload cache mode is invalid.", { cache });
+	if (!clips.some((clip) => clip.preload === "full") && (options["credentials"] !== void 0 || options["cache"] !== void 0)) return invalidMediaConfig(bindingId, "Fetch credentials and cache options require at least one full-preload clip.", {
+		cache: options["cache"],
+		credentials: options["credentials"]
+	});
+	return Object.freeze({
+		mode,
+		trigger: mode === "on-demand" ? trigger : null,
+		rootMargin: mode === "on-demand" && trigger === "target-near-viewport" ? rootMargin ?? "0px" : null,
+		credentials,
+		cache
+	});
+};
+const compileTimeEpsilon = (value, bindingId) => {
+	if (value === void 0) return .001;
+	if (!isRecord$3(value)) return invalidMediaConfig(bindingId, "Seek options must be an object.", { seek: value });
+	const epsilon = value["timeEpsilon"];
+	if (epsilon !== void 0 && (typeof epsilon !== "number" || !Number.isFinite(epsilon) || epsilon < 0)) return invalidMediaConfig(bindingId, "Seek timeEpsilon must be finite and non-negative.", { timeEpsilon: epsilon });
+	return epsilon ?? .001;
+};
+const validateSegmentClips = (segments, clips, bindingId) => {
+	if (!Array.isArray(segments)) return;
+	const clipIds = new Set(clips.map((clip) => clip.id));
+	for (const [segmentIndex, segment] of segments.entries()) {
+		if (!isRecord$3(segment)) continue;
+		const clipId = segment["clip"];
+		if (clips.length > 1 && clipId === void 0) invalidMediaConfig(bindingId, "Every segment requires a clip when a binding has multiple clips.", { segmentIndex });
+		if (clipId !== void 0 && (typeof clipId !== "string" || !clipIds.has(clipId))) invalidMediaConfig(bindingId, "Timeline segment references an unknown video clip.", {
+			clipId,
+			segmentIndex
+		});
+	}
+};
+const compileBinding = (value, axis, supportedRenderers) => {
+	if (!isRecord$3(value)) return invalidController("Each controller binding must be an object.", {
+		axis,
+		binding: value
+	});
+	const id = value["id"];
+	if (typeof id !== "string" || id.trim().length === 0) return invalidController("Each controller binding requires a non-empty string ID.", {
+		axis,
+		id
+	});
+	const rendererValue = value["renderer"] ?? "video";
+	if (rendererValue !== "video" && rendererValue !== "canvas") return invalidMediaConfig(id, "The configured renderer is not supported.", { renderer: value["renderer"] });
+	const renderer = rendererValue;
+	if (!supportedRenderers.has(renderer)) return invalidMediaConfig(id, renderer === "canvas" ? "Canvas rendering requires the @frame-by-frame/core/canvas entry point." : "The configured renderer is not supported.", { renderer: value["renderer"] });
+	const hasTarget = value["target"] !== void 0;
+	const hasMountTo = value["mountTo"] !== void 0;
+	if (hasTarget === hasMountTo) return invalidMediaConfig(id, "A binding requires exactly one of target or mountTo.", {
+		mountTo: value["mountTo"],
+		target: value["target"]
+	});
+	const reference = hasTarget ? value["target"] : value["mountTo"];
+	if (!isElementReference(reference)) return invalidMediaConfig(id, "Media target references must be elements, selectors, or resolvers.", { reference });
+	const timeline = createTimeline({
+		segments: value["segments"],
+		...value["easing"] === void 0 ? {} : { easing: value["easing"] },
+		...value["frame"] === void 0 ? {} : { frame: value["frame"] }
+	});
+	const clips = compileClips(value["clips"], id);
+	validateSegmentClips(value["segments"], clips, id);
+	const loading = compileLoading(value["loading"], id, clips);
+	const video = compileVideoOptions(value["video"], id);
+	const canvas = compileCanvasOptions(value["canvas"], id, renderer);
+	const timeEpsilon = compileTimeEpsilon(value["seek"], id);
+	const segments = value["segments"];
+	const startPosition = Math.min(...segments.map((segment) => segment.scroll[0]));
+	const endPosition = Math.max(...segments.map((segment) => segment.scroll[1]));
+	const definition = createBindingDefinition(value, axis);
+	const decoderSignature = JSON.stringify({
+		clips,
+		loading,
+		video,
+		timeEpsilon
+	});
+	return Object.freeze({
+		id,
+		axis,
+		renderer,
+		timeline,
+		startPosition,
+		endPosition,
+		target: hasTarget ? value["target"] : void 0,
+		mountTo: hasMountTo ? value["mountTo"] : void 0,
+		clips,
+		loading,
+		video,
+		canvas,
+		timeEpsilon,
+		decoderSignature,
+		mediaSignature: JSON.stringify({
+			decoderSignature,
+			canvas: canvas === null ? null : {
+				fit: canvas.fit,
+				pixelRatio: canvas.pixelRatio,
+				imageSmoothingEnabled: canvas.imageSmoothingEnabled
+			}
+		}),
+		definition
+	});
+};
+/** Validates controller shape and compiles every timeline and media binding at factory time. */
+const compileControllerConfig = (options, supportedRenderers = /* @__PURE__ */ new Set(["video"])) => {
+	if (!isRecord$3(options)) return invalidController("Controller options must be an object.", { options });
+	const axesValue = options.axes;
+	if (!isRecord$3(axesValue)) return invalidController("Controller axes must be an object.", { axes: axesValue });
+	const axes = {};
+	const bindings = [];
+	const ids = /* @__PURE__ */ new Set();
+	for (const axisName of AXES) {
+		const axisValue = axesValue[axisName];
+		if (axisValue === void 0 || axisValue === false) continue;
+		const axis = readAxis(axisValue, axisName);
+		const axisBindings = axis.bindings.map((binding) => compileBinding(binding, axisName, supportedRenderers));
+		for (const binding of axisBindings) {
+			if (ids.has(binding.id)) throw new FrameByFrameError("DUPLICATE_BINDING_ID", `Binding ID "${binding.id}" is used more than once.`, { details: { bindingId: binding.id } });
+			ids.add(binding.id);
+			bindings.push(binding);
+		}
+		axes[axisName] = Object.freeze({
+			enabled: axis.enabled ?? true,
+			bindings: Object.freeze(axisBindings)
+		});
+	}
+	if (bindings.length === 0) return invalidController("At least one configured axis with one binding is required.", { axes: axesValue });
+	return Object.freeze({
+		source: options.source,
+		axes: Object.freeze(axes),
+		bindings: Object.freeze(bindings)
+	});
+};
+const hasOwn = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+const assertKnownKeys = (value, allowed, breakpointId, scope) => {
+	for (const key of Object.keys(value)) if (!allowed.includes(key)) invalidBreakpoint(`Breakpoint "${breakpointId}" cannot override "${scope}.${key}".`, {
+		breakpointId,
+		key,
+		scope
+	});
+};
+const cloneBindingOverride = (value, breakpointId, axis, bindingIds, canvasEnabled) => {
+	if (!isRecord$3(value)) return invalidBreakpoint("Each breakpoint binding override must be an object.", {
+		axis,
+		breakpointId,
+		value
+	});
+	assertKnownKeys(value, canvasEnabled ? CANVAS_BINDING_OVERRIDE_KEYS : VIDEO_BINDING_OVERRIDE_KEYS, breakpointId, `axes.${axis}.bindings`);
+	const id = value["id"];
+	if (typeof id !== "string" || !bindingIds.has(id)) return invalidBreakpoint(`Breakpoint "${breakpointId}" references an unknown binding on axis "${axis}".`, {
+		axis,
+		bindingId: id,
+		breakpointId
+	});
+	for (const field of ["segments", "clips"]) if (hasOwn(value, field) && !Array.isArray(value[field])) invalidBreakpoint(`Breakpoint binding override "${field}" must be an array.`, {
+		axis,
+		bindingId: id,
+		breakpointId,
+		field
+	});
+	for (const field of [
+		"frame",
+		"loading",
+		"video",
+		"seek",
+		"canvas"
+	]) if (hasOwn(value, field) && !isRecord$3(value[field])) invalidBreakpoint(`Breakpoint binding override "${field}" must be an object.`, {
+		axis,
+		bindingId: id,
+		breakpointId,
+		field
+	});
+	if (hasOwn(value, "canvas")) {
+		const canvas = value["canvas"];
+		assertKnownKeys(canvas, CANVAS_OVERRIDE_KEYS, breakpointId, `axes.${axis}.bindings.canvas`);
+	}
+	return Object.freeze({
+		id,
+		...hasOwn(value, "segments") ? { segments: cloneSegments(value["segments"]) } : {},
+		...hasOwn(value, "clips") ? { clips: cloneClips(value["clips"]) } : {},
+		...hasOwn(value, "easing") ? { easing: value["easing"] } : {},
+		...hasOwn(value, "frame") ? { frame: cloneOption(value["frame"]) } : {},
+		...hasOwn(value, "loading") ? { loading: cloneOption(value["loading"]) } : {},
+		...hasOwn(value, "video") ? { video: cloneOption(value["video"]) } : {},
+		...hasOwn(value, "canvas") ? { canvas: cloneOption(value["canvas"]) } : {},
+		...hasOwn(value, "seek") ? { seek: cloneOption(value["seek"]) } : {}
+	});
+};
+const cloneBreakpointOverride = (value, breakpointId, base, canvasEnabled) => {
+	if (!isRecord$3(value)) return invalidBreakpoint(`Breakpoint "${breakpointId}" override must be an object.`, {
+		breakpointId,
+		override: value
+	});
+	assertKnownKeys(value, BREAKPOINT_OVERRIDE_KEYS, breakpointId, "override");
+	const axesValue = value["axes"];
+	if (!isRecord$3(axesValue) || Object.keys(axesValue).length === 0) return invalidBreakpoint(`Breakpoint "${breakpointId}" requires at least one axis override.`, {
+		axes: axesValue,
+		breakpointId
+	});
+	assertKnownKeys(axesValue, AXES, breakpointId, "axes");
+	const axes = {};
+	for (const axis of AXES) {
+		if (!hasOwn(axesValue, axis)) continue;
+		const axisValue = axesValue[axis];
+		const baseAxis = base.axes[axis];
+		if (baseAxis === void 0) return invalidBreakpoint(`Breakpoint "${breakpointId}" references an unconfigured axis.`, {
+			axis,
+			breakpointId
+		});
+		if (axisValue === false) {
+			axes[axis] = false;
+			continue;
+		}
+		if (!isRecord$3(axisValue)) return invalidBreakpoint(`Breakpoint axis "${axis}" must be an object or false.`, {
+			axis,
+			breakpointId,
+			value: axisValue
+		});
+		assertKnownKeys(axisValue, AXIS_OVERRIDE_KEYS, breakpointId, `axes.${axis}`);
+		if (hasOwn(axisValue, "enabled") && typeof axisValue["enabled"] !== "boolean") return invalidBreakpoint(`Breakpoint axis "${axis}" enabled must be a boolean.`, {
+			axis,
+			breakpointId,
+			enabled: axisValue["enabled"]
+		});
+		const bindingIds = new Set(baseAxis.bindings.map((binding) => binding.id));
+		const bindingsValue = axisValue["bindings"];
+		if (hasOwn(axisValue, "bindings") && !Array.isArray(bindingsValue)) return invalidBreakpoint(`Breakpoint axis "${axis}" bindings must be an array.`, {
+			axis,
+			bindings: bindingsValue,
+			breakpointId
+		});
+		const seen = /* @__PURE__ */ new Set();
+		const bindings = Array.isArray(bindingsValue) ? bindingsValue.map((binding) => {
+			const cloned = cloneBindingOverride(binding, breakpointId, axis, bindingIds, canvasEnabled);
+			const bindingId = cloned["id"];
+			if (seen.has(bindingId)) invalidBreakpoint(`Breakpoint "${breakpointId}" overrides binding "${bindingId}" more than once.`, {
+				axis,
+				bindingId,
+				breakpointId
+			});
+			seen.add(bindingId);
+			return cloned;
+		}) : void 0;
+		axes[axis] = Object.freeze({
+			...hasOwn(axisValue, "enabled") ? { enabled: axisValue["enabled"] } : {},
+			...bindings === void 0 ? {} : { bindings: Object.freeze(bindings) }
+		});
+	}
+	return Object.freeze({ axes: Object.freeze(axes) });
+};
+const compileBreakpoints = (value, base, canvasEnabled) => {
+	if (value === void 0) return Object.freeze([]);
+	if (!Array.isArray(value)) return invalidBreakpoint("Controller breakpoints must be an array.", { breakpoints: value });
+	const ids = /* @__PURE__ */ new Set();
+	const breakpoints = value.map((candidate, index) => {
+		if (!isRecord$3(candidate)) return invalidBreakpoint("Each breakpoint must be an object.", {
+			breakpoint: candidate,
+			index
+		});
+		const provisionalId = typeof candidate["id"] === "string" && candidate["id"].trim().length > 0 ? candidate["id"] : `#${String(index)}`;
+		assertKnownKeys(candidate, BREAKPOINT_KEYS, provisionalId, "breakpoint");
+		const id = candidate["id"];
+		const query = candidate["query"];
+		if (typeof id !== "string" || id.trim().length === 0) return invalidBreakpoint("Each breakpoint requires a non-empty string ID.", {
+			id,
+			index
+		});
+		if (ids.has(id)) return invalidBreakpoint(`Breakpoint ID "${id}" is duplicated.`, { breakpointId: id });
+		if (typeof query !== "string" || query.trim().length === 0) return invalidBreakpoint(`Breakpoint "${id}" requires a non-empty media query.`, {
+			breakpointId: id,
+			query
+		});
+		ids.add(id);
+		return Object.freeze({
+			id,
+			query,
+			override: cloneBreakpointOverride(candidate["override"], id, base, canvasEnabled)
+		});
+	});
+	return Object.freeze(breakpoints);
+};
+const mergeOption = (current, override) => isRecord$3(current) && isRecord$3(override) ? Object.freeze({
+	...current,
+	...override
+}) : cloneOption(override);
+const mergeBindingDefinition = (current, override) => {
+	const next = { ...current };
+	for (const field of [
+		"segments",
+		"clips",
+		"easing"
+	]) if (hasOwn(override, field)) next[field] = override[field];
+	for (const field of [
+		"frame",
+		"loading",
+		"video",
+		"seek",
+		"canvas"
+	]) if (hasOwn(override, field)) next[field] = mergeOption(current[field], override[field]);
+	const frame = next["frame"];
+	if (isRecord$3(frame) && frame["snap"] === false) {
+		const withoutFps = { ...frame };
+		delete withoutFps["fps"];
+		next["frame"] = Object.freeze(withoutFps);
+	}
+	const loading = next["loading"];
+	if (isRecord$3(loading)) {
+		const normalized = { ...loading };
+		if (normalized["mode"] === "immediate") {
+			delete normalized["trigger"];
+			delete normalized["rootMargin"];
+		} else if (normalized["trigger"] !== "target-near-viewport") delete normalized["rootMargin"];
+		next["loading"] = Object.freeze(normalized);
+	}
+	return Object.freeze(next);
+};
+/** Resolves and revalidates one ordered set of matching breakpoint IDs. */
+const resolveControllerConfig = (program, activeBreakpointIds) => {
+	const active = new Set(activeBreakpointIds);
+	const axes = /* @__PURE__ */ new Map();
+	for (const axis of AXES) {
+		const baseAxis = program.base.axes[axis];
+		if (baseAxis !== void 0) axes.set(axis, {
+			enabled: baseAxis.enabled,
+			bindings: new Map(baseAxis.bindings.map((binding) => [binding.id, binding.definition]))
+		});
+	}
+	for (const breakpoint of program.breakpoints) {
+		if (!active.has(breakpoint.id)) continue;
+		const breakpointAxes = breakpoint.override["axes"];
+		for (const axis of AXES) {
+			if (!hasOwn(breakpointAxes, axis)) continue;
+			const target = axes.get(axis);
+			const override = breakpointAxes[axis];
+			if (target === void 0) continue;
+			if (override === false) {
+				target.enabled = false;
+				continue;
+			}
+			if (!isRecord$3(override)) continue;
+			if (hasOwn(override, "enabled")) target.enabled = override["enabled"];
+			const bindingOverrides = override["bindings"];
+			if (Array.isArray(bindingOverrides)) for (const bindingOverride of bindingOverrides) {
+				const bindingId = bindingOverride["id"];
+				const current = target.bindings.get(bindingId);
+				if (current !== void 0) target.bindings.set(bindingId, mergeBindingDefinition(current, bindingOverride));
+			}
+		}
+	}
+	const resolvedAxes = {};
+	for (const [axis, value] of axes) resolvedAxes[axis] = {
+		enabled: value.enabled,
+		bindings: [...value.bindings.values()]
+	};
+	try {
+		return compileControllerConfig({
+			...program.base.source === void 0 ? {} : { source: program.base.source },
+			axes: resolvedAxes
+		}, program.supportedRenderers);
+	} catch (cause) {
+		return invalidBreakpoint("The matching breakpoint cascade does not produce a valid controller configuration.", { activeBreakpoints: Object.freeze([...activeBreakpointIds]) }, cause);
+	}
+};
+/** Compiles the immutable base configuration and responsive program at factory time. */
+const compileControllerProgram = (options, supportedRenderers = /* @__PURE__ */ new Set(["video"])) => {
+	const base = compileControllerConfig(options, supportedRenderers);
+	const reducedMotion = options.reducedMotion ?? "first-frame";
+	if (!REDUCED_MOTION_BEHAVIORS.includes(reducedMotion)) return invalidController("Controller reducedMotion behavior is invalid.", { reducedMotion });
+	return Object.freeze({
+		base,
+		breakpoints: compileBreakpoints(options.breakpoints, base, supportedRenderers.has("canvas")),
+		reducedMotion,
+		supportedRenderers
+	});
+};
+
+//#endregion
+//#region src/responsive/environment-observer.ts
+const isRecord$2 = (value) => typeof value === "object" && value !== null;
+const getDocument = (source) => {
+	if (source.nodeType === 9) return source;
+	const ownerDocument = source.ownerDocument;
+	return ownerDocument.nodeType === 9 ? ownerDocument : null;
+};
+const getView = (document) => {
+	const ownerView = document?.defaultView;
+	if (isRecord$2(ownerView)) return ownerView;
+	const globalWindow = globalThis.window;
+	return isRecord$2(globalWindow) ? globalWindow : null;
+};
+const freezeSnapshot = (activeBreakpoints, prefersReducedMotion, hidden) => Object.freeze({
+	activeBreakpoints: Object.freeze([...activeBreakpoints]),
+	prefersReducedMotion,
+	hidden
+});
+const arraysEqual = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+const listenToMediaQuery = (query, listener) => {
+	if (query.addEventListener !== void 0 && query.removeEventListener !== void 0) {
+		query.addEventListener("change", listener);
+		return () => {
+			query.removeEventListener?.("change", listener);
+		};
+	}
+	if (query.addListener !== void 0 && query.removeListener !== void 0) {
+		query.addListener(listener);
+		return () => {
+			query.removeListener?.(listener);
+		};
+	}
+	return () => void 0;
+};
+/** Mount-scoped browser observers with no import-time DOM access or timers. */
+const createControllerEnvironmentObserver = (options) => {
+	const document = getDocument(options.source);
+	const view = getView(document);
+	const mediaQueries = /* @__PURE__ */ new Map();
+	const cleanups = [];
+	let reducedMotionQuery = null;
+	let resizeObserver = null;
+	let resizeFrame = null;
+	let mediaScheduled = false;
+	let destroyed = false;
+	const readHidden = () => document?.hidden === true;
+	const readSnapshot = () => freezeSnapshot(options.breakpoints.filter((breakpoint) => mediaQueries.get(breakpoint.id)?.matches === true).map((breakpoint) => breakpoint.id), reducedMotionQuery?.matches === true, readHidden());
+	let snapshot = freezeSnapshot([], false, readHidden());
+	const publishMedia = () => {
+		mediaScheduled = false;
+		if (destroyed) return;
+		const next = readSnapshot();
+		if (next.prefersReducedMotion !== snapshot.prefersReducedMotion || !arraysEqual(next.activeBreakpoints, snapshot.activeBreakpoints)) {
+			snapshot = next;
+			options.onMediaChange(snapshot);
+		}
+	};
+	const scheduleMedia = () => {
+		if (!mediaScheduled) {
+			mediaScheduled = true;
+			globalThis.queueMicrotask(publishMedia);
+		}
+	};
+	if (view?.matchMedia !== void 0) {
+		for (const breakpoint of options.breakpoints) {
+			let mediaQuery;
+			try {
+				mediaQuery = view.matchMedia(breakpoint.query);
+			} catch (cause) {
+				for (const cleanup of cleanups.splice(0)) cleanup();
+				throw new FrameByFrameError("INVALID_BREAKPOINT_CONFIG", `The media query for breakpoint "${breakpoint.id}" could not be evaluated.`, {
+					cause,
+					details: {
+						breakpointId: breakpoint.id,
+						query: breakpoint.query
+					}
+				});
+			}
+			mediaQueries.set(breakpoint.id, mediaQuery);
+			cleanups.push(listenToMediaQuery(mediaQuery, scheduleMedia));
+		}
+		try {
+			reducedMotionQuery = view.matchMedia("(prefers-reduced-motion: reduce)");
+		} catch (cause) {
+			for (const cleanup of cleanups.splice(0)) cleanup();
+			throw new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", "The reduced-motion media query could not be evaluated.", { cause });
+		}
+		cleanups.push(listenToMediaQuery(reducedMotionQuery, scheduleMedia));
+	}
+	snapshot = readSnapshot();
+	const scheduleResize = () => {
+		if (resizeFrame === null && !snapshot.hidden && !destroyed) resizeFrame = options.requestFrame(() => {
+			resizeFrame = null;
+			options.onResize();
+		});
+	};
+	if (view?.addEventListener !== void 0 && view.removeEventListener !== void 0) {
+		view.addEventListener("resize", scheduleResize, { passive: true });
+		cleanups.push(() => {
+			view.removeEventListener?.("resize", scheduleResize);
+		});
+	}
+	if (document !== null) {
+		const handleVisibility = () => {
+			const hidden = readHidden();
+			if (hidden === snapshot.hidden) return;
+			snapshot = freezeSnapshot(snapshot.activeBreakpoints, snapshot.prefersReducedMotion, hidden);
+			if (hidden && resizeFrame !== null) {
+				options.cancelFrame(resizeFrame);
+				resizeFrame = null;
+			}
+			options.onVisibilityChange(hidden);
+		};
+		document.addEventListener("visibilitychange", handleVisibility);
+		cleanups.push(() => {
+			document.removeEventListener("visibilitychange", handleVisibility);
+		});
+	}
+	const ResizeObserverConstructor = view?.ResizeObserver ?? globalThis.ResizeObserver;
+	if (typeof ResizeObserverConstructor === "function") try {
+		resizeObserver = new ResizeObserverConstructor(scheduleResize);
+		const sourceTarget = options.source.nodeType === 9 ? document?.documentElement : options.source;
+		if (sourceTarget !== void 0) resizeObserver.observe(sourceTarget);
+	} catch {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
+	}
+	return {
+		getSnapshot: () => snapshot,
+		observeTargets: (targets) => {
+			for (const target of targets) resizeObserver?.observe(target);
+		},
+		destroy: () => {
+			if (destroyed) return;
+			destroyed = true;
+			if (resizeFrame !== null) {
+				options.cancelFrame(resizeFrame);
+				resizeFrame = null;
+			}
+			resizeObserver?.disconnect();
+			resizeObserver = null;
+			for (const cleanup of cleanups.splice(0)) cleanup();
+		}
+	};
+};
+
+//#endregion
+//#region src/core/controller.ts
+const createInitialMediaState = () => ({
+	loadState: "idle",
+	loadProgress: Object.freeze({}),
+	activeClipId: null,
+	selectedSource: null,
+	duration: null,
+	appliedTime: null,
+	presentedTime: null,
+	seeking: false,
+	error: null
+});
+const cloneResolution = (resolution) => Object.freeze({ ...resolution });
+const cloneError = (error) => new FrameByFrameError(error.code, error.message, {
+	cause: error.cause,
+	...error.details === void 0 ? {} : { details: error.details }
+});
+const asPackageError = (error, code, message) => error instanceof FrameByFrameError ? error : new FrameByFrameError(code, message, { cause: error });
+var Controller = class {
+	#program;
+	#config;
+	#dependencies;
+	#events;
+	#axes = {};
+	#bindings = /* @__PURE__ */ new Map();
+	#handleScroll = (snapshot) => {
+		if (this.#status !== "ready" || !this.#enabled || this.#hidden) return;
+		try {
+			this.#applySnapshot(snapshot, true);
+			this.#emitUpdate("scroll");
+		} catch (error) {
+			this.#transitionToRuntimeError(error);
+		}
+	};
+	#status = "idle";
+	#enabled = true;
+	#source = null;
+	#scheduler = null;
+	#unsubscribe = null;
+	#mountPromise = null;
+	#mountGeneration = 0;
+	#lastError = null;
+	#environment = null;
+	#activeBreakpoints = Object.freeze([]);
+	#prefersReducedMotion = false;
+	#hidden = false;
+	constructor(options, dependencies) {
+		this.#program = compileControllerProgram(options, dependencies.supportedRenderers);
+		this.#config = this.#program.base;
+		this.#dependencies = dependencies;
+		this.#events = new EventEmitter(dependencies.reportAsyncError);
+		for (const [axisName, axisConfig] of Object.entries(this.#config.axes)) this.#axes[axisName] = {
+			enabled: axisConfig.enabled,
+			offset: 0,
+			max: 0,
+			progress: 0
+		};
+		for (const binding of this.#config.bindings) this.#bindings.set(binding.id, {
+			config: binding,
+			resolution: null,
+			renderer: null,
+			media: createInitialMediaState()
+		});
+	}
+	mount() {
+		this.#assertNotDestroyed();
+		if (this.#status === "ready" || this.#status === "disabled") return Promise.resolve();
+		if (this.#status === "mounting" && this.#mountPromise !== null) return this.#mountPromise;
+		const generation = ++this.#mountGeneration;
+		this.#status = "mounting";
+		this.#lastError = null;
+		const promise = Promise.resolve().then(() => {
+			this.#performMount(generation);
+		}).catch((error) => {
+			throw this.#handleMountFailure(error, generation);
+		}).finally(() => {
+			if (this.#mountPromise === promise) this.#mountPromise = null;
+		});
+		this.#mountPromise = promise;
+		return promise;
+	}
+	refresh() {
+		this.#assertNotDestroyed();
+		if (this.#status !== "ready" && this.#status !== "disabled" || this.#scheduler === null) throw new FrameByFrameError("INVALID_LIFECYCLE_OPERATION", "refresh() requires a successfully mounted controller.", { details: { status: this.#status } });
+		try {
+			for (const binding of this.#bindings.values()) binding.renderer?.resize();
+			this.#applySnapshot(this.#scheduler.refresh(), this.#enabled);
+			this.#emitUpdate("refresh");
+		} catch (error) {
+			throw this.#transitionToRuntimeError(error);
+		}
+	}
+	enable() {
+		this.#assertNotDestroyed();
+		if (this.#enabled) return;
+		this.#enabled = true;
+		if (this.#status === "disabled" && this.#scheduler !== null) try {
+			this.#applySnapshot(this.#scheduler.getSnapshot(), true);
+			this.#status = "ready";
+			this.#subscribe();
+		} catch (error) {
+			throw this.#transitionToRuntimeError(error);
+		}
+		this.#emitUpdate("enable");
+	}
+	disable() {
+		this.#assertNotDestroyed();
+		if (!this.#enabled) return;
+		this.#enabled = false;
+		if (this.#status === "ready") {
+			this.#unsubscribeFromSource();
+			this.#status = "disabled";
+		}
+		this.#emitUpdate("disable");
+	}
+	load(bindingId) {
+		this.#assertMediaLifecycle("load()");
+		return Promise.all(this.#selectBindings(bindingId).map((binding) => this.#getMountedRenderer(binding).load())).then(() => void 0);
+	}
+	whenReady() {
+		this.#assertMediaLifecycle("whenReady()");
+		return Promise.all([...this.#bindings.values()].map((binding) => this.#getMountedRenderer(binding).whenReady())).then(() => {
+			this.#assertNotDestroyed();
+			return this.getState();
+		});
+	}
+	unload(bindingId) {
+		this.#assertMediaLifecycle("unload()");
+		for (const binding of this.#selectBindings(bindingId)) this.#getMountedRenderer(binding).unload();
+	}
+	getTarget(bindingId) {
+		this.#assertNotDestroyed();
+		return this.#getBinding(bindingId).renderer?.getTarget() ?? null;
+	}
+	getState() {
+		const axes = {};
+		for (const [axisName, axis] of Object.entries(this.#axes)) axes[axisName] = Object.freeze({
+			enabled: axis.enabled,
+			offset: axis.offset,
+			max: axis.max,
+			progress: axis.progress
+		});
+		const bindings = {};
+		for (const [id, binding] of this.#bindings) {
+			const media = binding.renderer?.getState() ?? binding.media;
+			bindings[id] = Object.freeze({
+				id,
+				axis: binding.config.axis,
+				resolution: binding.resolution === null ? null : cloneResolution(binding.resolution),
+				renderer: binding.config.renderer,
+				loadState: media.loadState,
+				loadProgress: Object.freeze(Object.fromEntries(Object.entries(media.loadProgress).map(([clipId, progress]) => [clipId, Object.freeze({ ...progress })]))),
+				activeClipId: media.activeClipId,
+				selectedSource: media.selectedSource,
+				duration: media.duration,
+				appliedTime: media.appliedTime,
+				presentedTime: media.presentedTime,
+				seeking: media.seeking,
+				error: media.error === null ? null : cloneError(media.error)
+			});
+		}
+		return Object.freeze({
+			status: this.#status,
+			enabled: this.#enabled,
+			source: this.#source,
+			activeBreakpoints: Object.freeze([...this.#activeBreakpoints]),
+			prefersReducedMotion: this.#prefersReducedMotion,
+			axes: Object.freeze(axes),
+			bindings: Object.freeze(bindings),
+			lastError: this.#lastError === null ? null : cloneError(this.#lastError)
+		});
+	}
+	on(event, listener) {
+		this.#assertNotDestroyed();
+		if (typeof listener !== "function") throw new FrameByFrameError("INVALID_CONTROLLER", "Event listeners must be functions.", { details: {
+			event,
+			listener
+		} });
+		return this.#events.on(event, listener);
+	}
+	destroy() {
+		if (this.#status === "destroyed") return;
+		++this.#mountGeneration;
+		this.#unsubscribeFromSource();
+		this.#destroyEnvironment();
+		this.#destroyRenderers();
+		this.#scheduler = null;
+		this.#source = null;
+		this.#enabled = false;
+		this.#status = "destroyed";
+		this.#events.emit("destroy", this.getState());
+		this.#events.clear();
+	}
+	#performMount(generation) {
+		if (generation !== this.#mountGeneration) throw new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed before mount completed.");
+		const resolvedSource = this.#dependencies.resolveSource(this.#config.source);
+		const scheduler = this.#dependencies.sourceRegistry.get(resolvedSource);
+		const snapshot = scheduler.refresh();
+		const environment = (this.#dependencies.createEnvironmentObserver ?? createControllerEnvironmentObserver)({
+			source: resolvedSource.publicSource,
+			breakpoints: this.#program.breakpoints,
+			requestFrame: resolvedSource.requestFrame,
+			cancelFrame: resolvedSource.cancelFrame,
+			onMediaChange: (next) => {
+				this.#handleMediaChange(next);
+			},
+			onResize: () => {
+				this.#handleResize();
+			},
+			onVisibilityChange: (hidden) => {
+				this.#handleVisibilityChange(hidden);
+			}
+		});
+		const environmentSnapshot = environment.getSnapshot();
+		let initialConfig;
+		try {
+			initialConfig = resolveControllerConfig(this.#program, environmentSnapshot.activeBreakpoints);
+		} catch (error) {
+			environment.destroy();
+			throw error;
+		}
+		this.#environment = environment;
+		this.#activeBreakpoints = environmentSnapshot.activeBreakpoints;
+		this.#prefersReducedMotion = environmentSnapshot.prefersReducedMotion;
+		this.#hidden = environmentSnapshot.hidden;
+		this.#adoptConfig(initialConfig);
+		this.#createRenderers();
+		if (generation !== this.#mountGeneration || this.#status === "destroyed") throw new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed before mount completed.");
+		this.#source = resolvedSource.publicSource;
+		this.#scheduler = scheduler;
+		this.#applyRendererActivity();
+		this.#applySnapshot(snapshot, this.#enabled);
+		this.#status = this.#enabled ? "ready" : "disabled";
+		this.#subscribe();
+		environment.observeTargets([...this.#bindings.values()].map((binding) => binding.renderer?.getTarget() ?? null).filter((target) => target !== null));
+		const state = this.getState();
+		this.#events.emit("mount", state);
+		this.#events.emit("update", {
+			reason: "mount",
+			state: this.getState()
+		});
+	}
+	#handleMountFailure(error, generation) {
+		const packageError = asPackageError(error, "SOURCE_NOT_FOUND", "The controller could not mount its scroll source.");
+		if (this.#status === "destroyed" || generation !== this.#mountGeneration) return packageError.code === "CONTROLLER_DESTROYED" ? packageError : new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed before mount completed.", { cause: packageError });
+		this.#unsubscribeFromSource();
+		this.#destroyEnvironment();
+		this.#destroyRenderers();
+		this.#scheduler = null;
+		this.#source = null;
+		this.#status = "error";
+		this.#lastError = packageError;
+		this.#events.emit("error", cloneError(packageError));
+		return packageError;
+	}
+	#applySnapshot(snapshot, resolveBindings) {
+		for (const axisName of ["x", "y"]) {
+			const axis = this.#axes[axisName];
+			if (axis === void 0) continue;
+			const metrics = snapshot[axisName];
+			axis.offset = metrics.offset;
+			axis.max = metrics.max;
+			axis.progress = metrics.progress;
+		}
+		for (const binding of this.#bindings.values()) {
+			const axis = this.#axes[binding.config.axis];
+			const reducedMotionBehavior = this.#program.reducedMotion;
+			if (!resolveBindings || !axis?.enabled || this.#prefersReducedMotion && reducedMotionBehavior === "disable") {
+				binding.resolution = null;
+				binding.renderer?.setResolution(null);
+				continue;
+			}
+			const position = this.#prefersReducedMotion && reducedMotionBehavior === "first-frame" ? binding.config.startPosition : this.#prefersReducedMotion && reducedMotionBehavior === "last-frame" ? binding.config.endPosition : binding.config.timeline.unit === "px" ? axis.offset : axis.progress;
+			binding.resolution = binding.config.timeline.resolve(position);
+			binding.renderer?.setResolution(binding.resolution);
+		}
+	}
+	#createRenderers() {
+		try {
+			for (const binding of this.#bindings.values()) {
+				const renderer = this.#dependencies.createRenderer(binding.config, (event) => {
+					this.#handleRendererEvent(binding.config.id, event);
+				}, this.#getRendererActivity());
+				binding.renderer = renderer;
+				binding.media = renderer.getState();
+			}
+		} catch (error) {
+			this.#destroyRenderers();
+			throw error;
+		}
+	}
+	#destroyRenderers() {
+		for (const binding of this.#bindings.values()) {
+			const renderer = binding.renderer;
+			if (renderer === null) continue;
+			renderer.destroy();
+			binding.media = renderer.getState();
+			binding.renderer = null;
+		}
+	}
+	#handleRendererEvent(bindingId, event) {
+		const binding = this.#bindings.get(bindingId);
+		const renderer = binding?.renderer;
+		if (binding === void 0 || renderer === void 0 || renderer === null || this.#status === "destroyed") return;
+		binding.media = renderer.getState();
+		switch (event.type) {
+			case "loadstart":
+			case "loadready":
+				this.#events.emit(event.type, {
+					bindingId,
+					clipId: event.clipId,
+					state: this.getState()
+				});
+				break;
+			case "loadprogress":
+				this.#events.emit("loadprogress", {
+					bindingId,
+					clipId: event.clipId,
+					loadedBytes: event.progress.loadedBytes,
+					totalBytes: event.progress.totalBytes,
+					ratio: event.progress.ratio,
+					state: this.getState()
+				});
+				break;
+			case "loadedmetadata":
+				this.#events.emit("loadedmetadata", {
+					bindingId,
+					clipId: event.clipId,
+					duration: event.duration,
+					state: this.getState()
+				});
+				break;
+			case "seekrequest":
+				this.#events.emit("seekrequest", {
+					bindingId,
+					clipId: event.clipId,
+					requestedTime: event.requestedTime,
+					targetTime: event.targetTime,
+					state: this.getState()
+				});
+				break;
+			case "frame":
+				this.#events.emit("frame", {
+					bindingId,
+					clipId: event.clipId,
+					presentedTime: event.presentedTime,
+					expectedDisplayTime: event.expectedDisplayTime,
+					width: event.width,
+					height: event.height,
+					state: this.getState()
+				});
+				break;
+			case "error":
+				this.#events.emit("error", cloneError(event.error));
+				break;
+		}
+	}
+	#adoptConfig(config) {
+		this.#config = config;
+		for (const axisName of ["x", "y"]) {
+			const axis = this.#axes[axisName];
+			const next = config.axes[axisName];
+			if (axis !== void 0 && next !== void 0) axis.enabled = next.enabled;
+		}
+		for (const next of config.bindings) {
+			const binding = this.#bindings.get(next.id);
+			if (binding !== void 0) binding.config = next;
+		}
+	}
+	#applyResponsiveConfig(config) {
+		const transactions = [];
+		try {
+			for (const next of config.bindings) {
+				const binding = this.#bindings.get(next.id);
+				if (binding?.renderer !== null && binding?.renderer !== void 0 && binding.config.mediaSignature !== next.mediaSignature) transactions.push(binding.renderer.prepareConfig(next));
+			}
+		} catch (cause) {
+			for (const transaction of transactions) transaction.cancel();
+			throw asPackageError(cause, "INVALID_BREAKPOINT_CONFIG", "The responsive media configuration could not be prepared atomically.");
+		}
+		for (const transaction of transactions) transaction.commit();
+		this.#adoptConfig(config);
+	}
+	#handleMediaChange(snapshot) {
+		if (this.#status !== "ready" && this.#status !== "disabled") return;
+		let breakpointChanged = snapshot.activeBreakpoints.length !== this.#activeBreakpoints.length || snapshot.activeBreakpoints.some((id, index) => id !== this.#activeBreakpoints[index]);
+		const preferenceChanged = snapshot.prefersReducedMotion !== this.#prefersReducedMotion;
+		const previousBreakpoints = this.#activeBreakpoints;
+		if (breakpointChanged) try {
+			const candidate = resolveControllerConfig(this.#program, snapshot.activeBreakpoints);
+			this.#applyResponsiveConfig(candidate);
+			this.#activeBreakpoints = Object.freeze([...snapshot.activeBreakpoints]);
+			this.#lastError = null;
+		} catch (error) {
+			const packageError = asPackageError(error, "INVALID_BREAKPOINT_CONFIG", "The responsive configuration change was rejected.");
+			this.#lastError = packageError;
+			this.#events.emit("error", cloneError(packageError));
+			breakpointChanged = false;
+		}
+		if (preferenceChanged) this.#prefersReducedMotion = snapshot.prefersReducedMotion;
+		if (!breakpointChanged && !preferenceChanged) return;
+		try {
+			this.#applyRendererActivity();
+			if (this.#scheduler !== null) {
+				const scrollSnapshot = breakpointChanged ? this.#scheduler.refresh() : this.#scheduler.getSnapshot();
+				this.#applySnapshot(scrollSnapshot, this.#enabled);
+			}
+			this.#syncSubscription();
+		} catch (error) {
+			this.#transitionToRuntimeError(error);
+			return;
+		}
+		if (breakpointChanged) {
+			const state = this.getState();
+			this.#events.emit("breakpointchange", {
+				previous: Object.freeze([...previousBreakpoints]),
+				current: Object.freeze([...this.#activeBreakpoints]),
+				state
+			});
+			this.#emitUpdate("breakpoint");
+		}
+		if (preferenceChanged) this.#emitUpdate("preference");
+	}
+	#handleResize() {
+		if (this.#status !== "ready" && this.#status !== "disabled" || this.#scheduler === null || this.#hidden) return;
+		try {
+			for (const binding of this.#bindings.values()) binding.renderer?.resize();
+			this.#applySnapshot(this.#scheduler.refresh(), this.#enabled);
+			this.#emitUpdate("resize");
+		} catch (error) {
+			this.#transitionToRuntimeError(error);
+		}
+	}
+	#handleVisibilityChange(hidden) {
+		if (this.#status !== "ready" && this.#status !== "disabled") return;
+		this.#hidden = hidden;
+		try {
+			if (hidden) this.#unsubscribeFromSource();
+			this.#applyRendererActivity();
+			if (!hidden && this.#scheduler !== null) {
+				this.#applySnapshot(this.#scheduler.refresh(), this.#enabled);
+				this.#subscribe();
+			}
+			this.#emitUpdate("visibility");
+		} catch (error) {
+			this.#transitionToRuntimeError(error);
+		}
+	}
+	#getRendererActivity() {
+		if (this.#prefersReducedMotion && this.#program.reducedMotion === "disable") return "disabled";
+		return this.#hidden ? "suspended" : "active";
+	}
+	#applyRendererActivity() {
+		const activity = this.#getRendererActivity();
+		for (const binding of this.#bindings.values()) binding.renderer?.setActivity(activity);
+	}
+	#destroyEnvironment() {
+		this.#environment?.destroy();
+		this.#environment = null;
+		this.#hidden = false;
+	}
+	#selectBindings(bindingId) {
+		if (bindingId === void 0) return [...this.#bindings.values()];
+		return [this.#getBinding(bindingId)];
+	}
+	#getBinding(bindingId) {
+		const binding = this.#bindings.get(bindingId);
+		if (binding === void 0) throw new FrameByFrameError("INVALID_CONTROLLER", `Binding "${bindingId}" is not configured.`, { details: { bindingId } });
+		return binding;
+	}
+	#getMountedRenderer(binding) {
+		const renderer = binding.renderer;
+		if (renderer === null) throw new FrameByFrameError("INVALID_LIFECYCLE_OPERATION", "Media operations require a successfully mounted controller.", { details: {
+			bindingId: binding.config.id,
+			status: this.#status
+		} });
+		return renderer;
+	}
+	#assertMediaLifecycle(operation) {
+		this.#assertNotDestroyed();
+		if (this.#status !== "ready" && this.#status !== "disabled") throw new FrameByFrameError("INVALID_LIFECYCLE_OPERATION", `${operation} requires a successfully mounted controller.`, { details: { status: this.#status } });
+	}
+	#subscribe() {
+		if (this.#unsubscribe !== null || !this.#enabled || this.#hidden || this.#scheduler === null || !Object.values(this.#axes).some((axis) => axis.enabled)) return;
+		this.#unsubscribe = this.#scheduler.subscribe(this.#handleScroll);
+	}
+	#syncSubscription() {
+		if (!this.#enabled || this.#hidden || !Object.values(this.#axes).some((axis) => axis.enabled)) {
+			this.#unsubscribeFromSource();
+			return;
+		}
+		this.#subscribe();
+	}
+	#unsubscribeFromSource() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = null;
+	}
+	#transitionToRuntimeError(error) {
+		const packageError = asPackageError(error, "INVALID_CONTROLLER", "The controller failed while resolving a scroll update.");
+		this.#unsubscribeFromSource();
+		this.#destroyEnvironment();
+		this.#destroyRenderers();
+		this.#scheduler = null;
+		this.#source = null;
+		this.#status = "error";
+		this.#lastError = packageError;
+		this.#events.emit("error", cloneError(packageError));
+		return packageError;
+	}
+	#emitUpdate(reason) {
+		this.#events.emit("update", {
+			reason,
+			state: this.getState()
+		});
+	}
+	#assertNotDestroyed() {
+		if (this.#status === "destroyed") throw new FrameByFrameError("CONTROLLER_DESTROYED", "The controller has already been destroyed.");
+	}
+};
+/** Internal factory with injectable browser dependencies for deterministic tests. */
+const createController = (options, dependencies) => new Controller(options, dependencies);
+
+//#endregion
+//#region src/media/asset-cache.ts
+const initialProgress = () => Object.freeze({
+	loadedBytes: 0,
+	totalBytes: null,
+	ratio: null
+});
+const readTotalBytes = (response) => {
+	const header = response.headers.get("content-length");
+	if (header === null) return null;
+	const value = Number(header);
+	return Number.isFinite(value) && value >= 0 ? value : null;
+};
+const calculateRatio = (loadedBytes, totalBytes) => totalBytes !== null && totalBytes > 0 ? Math.min(1, loadedBytes / totalBytes) : null;
+const cacheKey = (request) => JSON.stringify([
+	request.url,
+	request.credentials,
+	request.cache
+]);
+/** Internal reference-counted cache used only by explicit full-file preloads. */
+var AssetCache = class {
+	#dependencies;
+	#entries = /* @__PURE__ */ new Map();
+	constructor(dependencies) {
+		this.#dependencies = dependencies;
+	}
+	acquire(request, onProgress) {
+		const key = cacheKey(request);
+		let entry = this.#entries.get(key);
+		if (entry === void 0) {
+			entry = this.#createEntry(key, request);
+			this.#entries.set(key, entry);
+		}
+		entry.references += 1;
+		entry.listeners.add(onProgress);
+		onProgress(entry.progress);
+		let released = false;
+		return {
+			result: entry.result,
+			release: () => {
+				if (released) return;
+				released = true;
+				entry.listeners.delete(onProgress);
+				this.#release(entry);
+			}
+		};
+	}
+	#createEntry(key, request) {
+		const entry = {
+			key,
+			request,
+			abortController: new AbortController(),
+			listeners: /* @__PURE__ */ new Set(),
+			references: 0,
+			progress: initialProgress(),
+			asset: null,
+			result: Promise.resolve(null)
+		};
+		entry.result = this.#load(entry).catch((error) => {
+			if (this.#entries.get(key) === entry) this.#entries.delete(key);
+			throw error;
+		});
+		return entry;
+	}
+	async #load(entry) {
+		const response = await this.#dependencies.fetch(entry.request.url, {
+			signal: entry.abortController.signal,
+			credentials: entry.request.credentials,
+			cache: entry.request.cache,
+			mode: entry.request.cache === "only-if-cached" ? "same-origin" : "cors"
+		});
+		if (!response.ok) throw new Error(`Full preload request failed with HTTP ${String(response.status)}.`);
+		const totalBytes = readTotalBytes(response);
+		this.#publish(entry, 0, totalBytes);
+		const blob = await this.#readBlob(entry, response, totalBytes);
+		const objectUrl = this.#dependencies.createObjectURL(blob);
+		const asset = Object.freeze({
+			objectUrl,
+			size: blob.size,
+			type: blob.type
+		});
+		entry.asset = asset;
+		this.#publish(entry, blob.size, totalBytes);
+		return asset;
+	}
+	async #readBlob(entry, response, totalBytes) {
+		if (response.body === null) {
+			const blob = await response.blob();
+			this.#publish(entry, blob.size, totalBytes);
+			return blob;
+		}
+		const reader = response.body.getReader();
+		const chunks = [];
+		let loadedBytes = 0;
+		try {
+			for (;;) {
+				const chunk = await reader.read();
+				if (chunk.done) break;
+				const bytes = new Uint8Array(chunk.value);
+				chunks.push(bytes);
+				loadedBytes += bytes.byteLength;
+				this.#publish(entry, loadedBytes, totalBytes);
+			}
+		} finally {
+			reader.releaseLock();
+		}
+		return new Blob(chunks, { type: response.headers.get("content-type") ?? "" });
+	}
+	#publish(entry, loadedBytes, totalBytes) {
+		const progress = Object.freeze({
+			loadedBytes,
+			totalBytes,
+			ratio: calculateRatio(loadedBytes, totalBytes)
+		});
+		entry.progress = progress;
+		for (const listener of entry.listeners) listener(progress);
+	}
+	#release(entry) {
+		entry.references -= 1;
+		if (entry.references > 0) return;
+		if (this.#entries.get(entry.key) === entry) this.#entries.delete(entry.key);
+		if (entry.asset === null) {
+			entry.abortController.abort();
+			return;
+		}
+		this.#dependencies.revokeObjectURL(entry.asset.objectUrl);
+	}
+};
+
+//#endregion
+//#region src/media/video-renderer.ts
+const defaultDependencies = {
+	assetCache: new AssetCache({
+		fetch: (url, init) => globalThis.fetch(url, init),
+		createObjectURL: (blob) => globalThis.URL.createObjectURL(blob),
+		revokeObjectURL: (url) => {
+			globalThis.URL.revokeObjectURL(url);
+		}
+	}),
+	resolveUrl: (source, target) => {
+		return new URL(source, target.ownerDocument.baseURI).href;
+	},
+	observeNearViewport: (target, rootMargin, onEnter) => {
+		if (typeof globalThis.IntersectionObserver !== "function") throw new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", "IntersectionObserver is required by target-near-viewport loading.");
+		const observer = new globalThis.IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) onEnter();
+		}, {
+			root: null,
+			rootMargin
+		});
+		observer.observe(target);
+		return () => {
+			observer.disconnect();
+		};
+	}
+};
+const SNAPSHOT_ATTRIBUTES = [
+	"src",
+	"preload",
+	"poster",
+	"crossorigin",
+	"muted",
+	"playsinline",
+	"controls",
+	"loop",
+	"autoplay"
+];
+const finiteOrNull = (value) => Number.isFinite(value) ? value : null;
+const readDuration = (target) => {
+	const duration = finiteOrNull(target.duration);
+	return duration === null ? null : Math.max(0, duration);
+};
+const snapshotTarget = (target) => {
+	const attributes = {};
+	for (const attribute of SNAPSHOT_ATTRIBUTES) attributes[attribute] = target.getAttribute(attribute);
+	return {
+		attributes: Object.freeze(attributes),
+		srcObject: target.srcObject,
+		muted: target.muted,
+		defaultMuted: target.defaultMuted,
+		playsInline: target.playsInline,
+		controls: target.controls,
+		loop: target.loop,
+		autoplay: target.autoplay
+	};
+};
+const restoreTarget = (target, snapshot) => {
+	for (const attribute of SNAPSHOT_ATTRIBUTES) {
+		const value = snapshot.attributes[attribute];
+		if (value === null || value === void 0) target.removeAttribute(attribute);
+		else target.setAttribute(attribute, value);
+	}
+	target.srcObject = snapshot.srcObject;
+	target.muted = snapshot.muted;
+	target.defaultMuted = snapshot.defaultMuted;
+	target.playsInline = snapshot.playsInline;
+	target.controls = snapshot.controls;
+	target.loop = snapshot.loop;
+	target.autoplay = snapshot.autoplay;
+	try {
+		target.load();
+	} catch {}
+};
+const restoreTargetConfiguration = (target, snapshot) => {
+	for (const attribute of SNAPSHOT_ATTRIBUTES) {
+		if (attribute === "src") continue;
+		const value = snapshot.attributes[attribute];
+		if (value === null || value === void 0) target.removeAttribute(attribute);
+		else target.setAttribute(attribute, value);
+	}
+	target.muted = snapshot.muted;
+	target.defaultMuted = snapshot.defaultMuted;
+	target.playsInline = snapshot.playsInline;
+	target.controls = snapshot.controls;
+	target.loop = snapshot.loop;
+	target.autoplay = snapshot.autoplay;
+};
+const configureTarget = (target, config, owned) => {
+	target.pause();
+	target.autoplay = false;
+	if (owned) {
+		const muted = config.video.muted ?? true;
+		target.muted = muted;
+		target.defaultMuted = muted;
+		target.playsInline = config.video.playsInline ?? true;
+		target.controls = config.video.controls ?? false;
+		target.loop = config.video.loop ?? false;
+		return;
+	}
+	if (config.video.muted !== void 0) {
+		target.muted = config.video.muted;
+		target.defaultMuted = config.video.muted;
+	}
+	if (config.video.playsInline !== void 0) target.playsInline = config.video.playsInline;
+	if (config.video.controls !== void 0) target.controls = config.video.controls;
+	if (config.video.loop !== void 0) target.loop = config.video.loop;
+};
+const createError = (code, message, bindingId, clipId, source, cause) => new FrameByFrameError(code, message, {
+	cause,
+	details: {
+		bindingId,
+		clipId,
+		source
+	}
+});
+var NativeVideoRenderer = class {
+	#config;
+	#handle;
+	#target;
+	#onEvent;
+	#snapshot;
+	#waiters = /* @__PURE__ */ new Set();
+	#readinessWaiters = /* @__PURE__ */ new Set();
+	#dependencies;
+	#viewportTarget;
+	#fullAssets = /* @__PURE__ */ new Map();
+	#loadProgress = /* @__PURE__ */ new Map();
+	#loadState = "idle";
+	#activeClipId = null;
+	#selectedSource = null;
+	#duration = null;
+	#appliedTime = null;
+	#presentedTime = null;
+	#seeking = false;
+	#error = null;
+	#desired = null;
+	#autoLoad;
+	#destroyed = false;
+	#generation = 0;
+	#candidateSources = [];
+	#candidateIndex = -1;
+	#removeSourceListeners = null;
+	#seekInFlight = false;
+	#pendingSeek = null;
+	#frameHandle = null;
+	#frameToken = 0;
+	#readinessGeneration = 0;
+	#stopObserving = null;
+	#activity = "active";
+	#manualUnload = false;
+	constructor(config, handle, onEvent, dependencies, activity, viewportTarget) {
+		this.#config = config;
+		this.#handle = handle;
+		this.#target = handle.target;
+		this.#onEvent = onEvent;
+		this.#dependencies = dependencies;
+		this.#viewportTarget = viewportTarget;
+		this.#activity = activity;
+		this.#snapshot = handle.owned ? null : snapshotTarget(this.#target);
+		configureTarget(this.#target, config, handle.owned);
+		this.#autoLoad = activity === "active" && config.loading.mode === "immediate";
+		if (this.#autoLoad) this.#prepareAllFullClips();
+		else if (activity === "active" && config.loading.trigger === "target-near-viewport") try {
+			this.#stopObserving = dependencies.observeNearViewport(this.#viewportTarget, config.loading.rootMargin ?? "0px", () => {
+				this.#activate(true, true);
+			});
+		} catch (cause) {
+			throw cause instanceof FrameByFrameError ? cause : new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", "The target-near-viewport observer could not be created.", {
+				cause,
+				details: { bindingId: config.id }
+			});
+		}
+	}
+	prepareConfig(config) {
+		this.#assertNotDestroyed();
+		if (config.id !== this.#config.id || config.axis !== this.#config.axis || config.target !== this.#config.target || config.mountTo !== this.#config.mountTo) throw new FrameByFrameError("INVALID_BREAKPOINT_CONFIG", "Responsive overrides cannot change binding identity, axis, or target ownership.", { details: { bindingId: this.#config.id } });
+		let committed = false;
+		let enteredBeforeCommit = false;
+		let candidateObserver = null;
+		if (this.#activity === "active" && config.loading.mode === "on-demand" && config.loading.trigger === "target-near-viewport") candidateObserver = this.#observeNearViewport(config, () => {
+			if (committed) this.#activate(true, true);
+			else enteredBeforeCommit = true;
+		});
+		let settled = false;
+		return {
+			commit: () => {
+				if (settled) return;
+				settled = true;
+				this.#stopObserving?.();
+				this.#stopObserving = null;
+				this.#rejectWaiters(createError("MEDIA_LOAD_FAILED", "Media loading was superseded by a responsive configuration change.", this.#config.id, this.#activeClipId, this.#selectedSource));
+				this.#supersedeReadiness();
+				this.#releaseFullAssets();
+				this.#desired = null;
+				this.#resetSource("idle");
+				if (this.#snapshot !== null) restoreTargetConfiguration(this.#target, this.#snapshot);
+				this.#config = config;
+				configureTarget(this.#target, config, this.#handle.owned);
+				this.#manualUnload = false;
+				this.#autoLoad = this.#activity === "active" && config.loading.mode === "immediate";
+				committed = true;
+				if (this.#activity === "active") if (this.#autoLoad) {
+					candidateObserver?.();
+					candidateObserver = null;
+					this.#prepareAllFullClips();
+				} else {
+					this.#stopObserving = candidateObserver;
+					candidateObserver = null;
+					if (enteredBeforeCommit) this.#activate(true, true);
+				}
+				else {
+					candidateObserver?.();
+					candidateObserver = null;
+				}
+			},
+			cancel: () => {
+				if (settled) return;
+				settled = true;
+				candidateObserver?.();
+				candidateObserver = null;
+			}
+		};
+	}
+	setActivity(activity) {
+		this.#assertNotDestroyed();
+		if (activity === this.#activity) return;
+		this.#activity = activity;
+		if (activity === "suspended") {
+			this.#cancelFrameObservation();
+			return;
+		}
+		if (activity === "disabled") {
+			this.#autoLoad = false;
+			this.#stopObserving?.();
+			this.#stopObserving = null;
+			this.#rejectWaiters(createError("MEDIA_LOAD_FAILED", "Media loading was cancelled by the active reduced-motion behavior.", this.#config.id, this.#activeClipId, this.#selectedSource));
+			this.#supersedeReadiness();
+			this.#releaseFullAssets();
+			this.#desired = null;
+			this.#resetSource("unloaded");
+			return;
+		}
+		if (this.#manualUnload) return;
+		this.#startConfiguredLoadingPolicy();
+	}
+	setResolution(resolution) {
+		if (this.#destroyed || resolution === null || this.#activity === "disabled") return;
+		const clipId = resolution.clipId ?? this.#config.clips[0]?.id;
+		if (clipId === void 0) return;
+		const desired = {
+			clipId,
+			requestedTime: resolution.requestedTime,
+			targetTime: resolution.targetTime
+		};
+		const clipChanged = this.#desired?.clipId !== clipId;
+		this.#desired = desired;
+		if (this.#activity === "suspended") return;
+		if (!this.#autoLoad && this.#config.loading.mode === "on-demand" && this.#config.loading.trigger === "first-use" && this.#loadState !== "unloaded") this.#activate(false, false);
+		if (clipChanged) this.#supersedeReadiness();
+		if (!this.#autoLoad || this.#loadState === "unloaded") return;
+		if (clipChanged || this.#activeClipId !== clipId || this.#loadState === "idle") {
+			this.#beginDesiredClip();
+			return;
+		}
+		if (this.#loadState === "metadata" || this.#loadState === "ready") this.#requestSeek(desired);
+	}
+	load() {
+		this.#assertNotDestroyed();
+		this.#manualUnload = false;
+		if (this.#activity === "disabled") return Promise.resolve();
+		if (this.#error?.code === "FULL_PRELOAD_FAILED" && this.#desired !== null) this.#discardFullAsset(this.#desired.clipId);
+		this.#activate(true);
+		if (this.#desired === null) {
+			const soleClip = this.#config.clips[0];
+			if (this.#config.clips.length !== 1 || soleClip === void 0) return Promise.reject(createError("MEDIA_LOAD_FAILED", "The binding has no currently resolved clip to load.", this.#config.id, null, null));
+			this.#desired = {
+				clipId: soleClip.id,
+				requestedTime: 0,
+				targetTime: 0
+			};
+		}
+		if (this.#activeClipId === this.#desired.clipId && (this.#loadState === "metadata" || this.#loadState === "ready")) return Promise.resolve();
+		const promise = new Promise((resolve, reject) => {
+			this.#waiters.add({
+				resolve,
+				reject
+			});
+		});
+		if (this.#activeClipId !== this.#desired.clipId || this.#loadState === "idle" || this.#loadState === "unloaded" || this.#loadState === "error") this.#beginDesiredClip();
+		return promise;
+	}
+	async whenReady() {
+		this.#assertNotDestroyed();
+		for (;;) {
+			const generation = this.#readinessGeneration;
+			const tasks = this.#readinessTasks();
+			await Promise.all(tasks);
+			if (this.#destroyed) throw new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed while media readiness was pending.", { details: { bindingId: this.#config.id } });
+			if (generation === this.#readinessGeneration) return;
+		}
+	}
+	unload() {
+		this.#assertNotDestroyed();
+		this.#manualUnload = true;
+		this.#autoLoad = false;
+		this.#stopObserving?.();
+		this.#stopObserving = null;
+		this.#rejectWaiters(createError("MEDIA_LOAD_FAILED", "Media loading was cancelled by unload().", this.#config.id, this.#activeClipId, this.#selectedSource));
+		this.#supersedeReadiness();
+		this.#releaseFullAssets();
+		this.#resetSource("unloaded");
+	}
+	resize() {
+		this.#assertNotDestroyed();
+	}
+	getTarget() {
+		this.#assertNotDestroyed();
+		return this.#target;
+	}
+	getState() {
+		return {
+			loadState: this.#loadState,
+			loadProgress: Object.freeze(Object.fromEntries(this.#loadProgress)),
+			activeClipId: this.#activeClipId,
+			selectedSource: this.#selectedSource,
+			duration: this.#duration,
+			appliedTime: this.#appliedTime,
+			presentedTime: this.#presentedTime,
+			seeking: this.#seeking,
+			error: this.#error
+		};
+	}
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		this.#autoLoad = false;
+		this.#stopObserving?.();
+		this.#stopObserving = null;
+		this.#rejectWaiters(new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed while media was loading.", { details: { bindingId: this.#config.id } }));
+		this.#rejectReadinessWaiters(new FrameByFrameError("CONTROLLER_DESTROYED", "The controller was destroyed while media readiness was pending.", { details: { bindingId: this.#config.id } }));
+		this.#releaseFullAssets();
+		this.#resetSource("unloaded");
+		try {
+			if (this.#snapshot !== null) restoreTarget(this.#target, this.#snapshot);
+		} finally {
+			this.#handle.release();
+		}
+	}
+	#activate(prepareAllFullClips, beginDesired = true) {
+		if (this.#activity !== "active") return;
+		const changed = !this.#autoLoad;
+		this.#autoLoad = true;
+		this.#stopObserving?.();
+		this.#stopObserving = null;
+		if (changed) this.#supersedeReadiness();
+		if (prepareAllFullClips) this.#prepareAllFullClips();
+		if (beginDesired && this.#desired !== null && (changed || this.#activeClipId !== this.#desired.clipId || this.#loadState === "idle" || this.#loadState === "unloaded" || this.#loadState === "error")) this.#beginDesiredClip();
+	}
+	#observeNearViewport(config, onEnter) {
+		try {
+			return this.#dependencies.observeNearViewport(this.#viewportTarget, config.loading.rootMargin ?? "0px", onEnter);
+		} catch (cause) {
+			throw cause instanceof FrameByFrameError ? cause : new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", "The target-near-viewport observer could not be created.", {
+				cause,
+				details: { bindingId: config.id }
+			});
+		}
+	}
+	#startConfiguredLoadingPolicy() {
+		this.#stopObserving?.();
+		this.#stopObserving = null;
+		if (this.#loadState === "unloaded") this.#loadState = "idle";
+		this.#autoLoad = this.#config.loading.mode === "immediate";
+		if (this.#autoLoad) {
+			this.#prepareAllFullClips();
+			if (this.#desired !== null) if (this.#activeClipId === this.#desired.clipId && (this.#loadState === "metadata" || this.#loadState === "ready")) this.#requestSeek(this.#desired);
+			else this.#beginDesiredClip();
+			return;
+		}
+		if (this.#config.loading.trigger === "target-near-viewport") this.#stopObserving = this.#observeNearViewport(this.#config, () => {
+			this.#activate(true, true);
+		});
+		if (this.#config.loading.trigger === "first-use" && this.#desired !== null) this.#activate(false, true);
+	}
+	#prepareAllFullClips() {
+		for (const clip of this.#config.clips) if (clip.preload === "full") this.#ensureFullAsset(clip, 0).result.catch(() => void 0);
+	}
+	#ensureFullAsset(clip, startIndex) {
+		const current = this.#fullAssets.get(clip.id);
+		if (current !== void 0) return current;
+		const candidates = this.#playableSources(clip);
+		const preparation = {
+			clipId: clip.id,
+			consumer: null,
+			result: Promise.resolve(null)
+		};
+		preparation.result = this.#loadFullAssetCandidates(preparation, clip, candidates, startIndex).catch((cause) => {
+			const error = cause instanceof FrameByFrameError ? cause : createError("FULL_PRELOAD_FAILED", `Every full-preload source failed for video clip "${clip.id}".`, this.#config.id, clip.id, candidates.at(-1)?.src ?? null, cause);
+			if (this.#fullAssets.get(clip.id) === preparation && !this.#destroyed) {
+				this.#error = error;
+				this.#emit({
+					type: "error",
+					error
+				});
+			}
+			throw error;
+		});
+		this.#fullAssets.set(clip.id, preparation);
+		return preparation;
+	}
+	async #loadFullAssetCandidates(preparation, clip, candidates, startIndex) {
+		let lastCause;
+		for (let sourceIndex = startIndex; sourceIndex < candidates.length; sourceIndex += 1) {
+			const source = candidates[sourceIndex];
+			if (source === void 0) continue;
+			try {
+				const url = this.#dependencies.resolveUrl(source.src, this.#target);
+				const consumer = this.#dependencies.assetCache.acquire({
+					url,
+					credentials: this.#config.loading.credentials,
+					cache: this.#config.loading.cache
+				}, (progress) => {
+					if (this.#fullAssets.get(clip.id) === preparation) this.#publishProgress(clip.id, progress);
+				});
+				preparation.consumer = consumer;
+				try {
+					const asset = await consumer.result;
+					return Object.freeze({
+						asset,
+						source,
+						sourceIndex
+					});
+				} catch (cause) {
+					lastCause = cause;
+					consumer.release();
+					preparation.consumer = null;
+				}
+			} catch (cause) {
+				lastCause = cause;
+			}
+		}
+		throw createError("FULL_PRELOAD_FAILED", `Every full-preload source failed for video clip "${clip.id}".`, this.#config.id, clip.id, candidates.at(-1)?.src ?? null, lastCause);
+	}
+	#publishProgress(clipId, progress) {
+		const snapshot = Object.freeze({ ...progress });
+		this.#loadProgress.set(clipId, snapshot);
+		this.#emit({
+			type: "loadprogress",
+			clipId,
+			progress: snapshot
+		});
+	}
+	#releaseFullAssets() {
+		for (const preparation of this.#fullAssets.values()) preparation.consumer?.release();
+		this.#fullAssets.clear();
+		this.#loadProgress.clear();
+	}
+	#discardFullAsset(clipId) {
+		this.#fullAssets.get(clipId)?.consumer?.release();
+		this.#fullAssets.delete(clipId);
+		this.#loadProgress.delete(clipId);
+	}
+	#readinessTasks() {
+		if (!this.#autoLoad) return [];
+		const tasks = [...this.#fullAssets.values()].map((preparation) => preparation.result);
+		const desired = this.#desired;
+		if (desired === null) return tasks;
+		const clip = this.#config.clips.find((candidate) => candidate.id === desired.clipId);
+		if (clip === void 0 || clip.preload === "none") return tasks;
+		if (clip.preload === "full") {
+			const preparation = this.#ensureFullAsset(clip, 0);
+			if (!tasks.includes(preparation.result)) tasks.push(preparation.result);
+		}
+		tasks.push(this.#waitForReadiness(clip.id, clip.preload === "metadata" ? "metadata" : "ready"));
+		return tasks;
+	}
+	#waitForReadiness(clipId, state) {
+		if (this.#activeClipId === clipId && this.#hasReadiness(state)) return Promise.resolve();
+		if (this.#activeClipId === clipId && this.#loadState === "error" && this.#error !== null) return Promise.reject(this.#error);
+		return new Promise((resolve, reject) => {
+			this.#readinessWaiters.add({
+				clipId,
+				state,
+				resolve,
+				reject
+			});
+		});
+	}
+	#hasReadiness(state) {
+		return state === "metadata" ? this.#loadState === "metadata" || this.#loadState === "ready" : this.#loadState === "ready";
+	}
+	#resolveReadinessWaiters() {
+		for (const waiter of this.#readinessWaiters) if (waiter.clipId === this.#activeClipId && this.#hasReadiness(waiter.state)) {
+			waiter.resolve();
+			this.#readinessWaiters.delete(waiter);
+		}
+	}
+	#supersedeReadiness() {
+		this.#readinessGeneration += 1;
+		for (const waiter of this.#readinessWaiters) waiter.resolve();
+		this.#readinessWaiters.clear();
+	}
+	#rejectReadinessWaiters(error) {
+		for (const waiter of this.#readinessWaiters) waiter.reject(error);
+		this.#readinessWaiters.clear();
+	}
+	#playableSources(clip) {
+		return clip.sources.filter((source) => {
+			if (source.type === null) return true;
+			try {
+				return this.#target.canPlayType(source.type) !== "";
+			} catch {
+				return false;
+			}
+		});
+	}
+	#beginDesiredClip() {
+		const desired = this.#desired;
+		if (desired === null) return;
+		const clip = this.#config.clips.find((candidate) => candidate.id === desired.clipId);
+		if (clip === void 0) {
+			this.#fail(createError("MEDIA_SOURCE_UNSUPPORTED", `Video clip "${desired.clipId}" is not configured.`, this.#config.id, desired.clipId, null));
+			return;
+		}
+		const candidates = this.#playableSources(clip);
+		if (candidates.length === 0) {
+			this.#fail(createError("MEDIA_SOURCE_UNSUPPORTED", `No playable source is available for video clip "${clip.id}".`, this.#config.id, clip.id, null));
+			return;
+		}
+		this.#candidateSources = candidates;
+		this.#candidateIndex = 0;
+		if (clip.preload === "full") this.#startFullCandidate(clip, 0);
+		else this.#startCandidate(clip, candidates[0]);
+	}
+	#startFullCandidate(clip, startIndex) {
+		const source = this.#candidateSources[startIndex];
+		if (source === void 0 || this.#destroyed) return;
+		const generation = this.#prepareCandidate(clip, source);
+		this.#ensureFullAsset(clip, startIndex).result.then((prepared) => {
+			if (!this.#isCurrentGeneration(generation)) return;
+			this.#candidateIndex = prepared.sourceIndex;
+			this.#selectedSource = prepared.source.src;
+			this.#loadTargetSource(prepared.asset.objectUrl, generation);
+		}, (error) => {
+			const packageError = error instanceof FrameByFrameError ? error : createError("FULL_PRELOAD_FAILED", `Full preload failed for video clip "${clip.id}".`, this.#config.id, clip.id, source.src, error);
+			if (this.#isCurrentGeneration(generation)) this.#fail(packageError, this.#error !== packageError);
+		});
+	}
+	#startCandidate(clip, source) {
+		if (source === void 0 || this.#destroyed) return;
+		const generation = this.#prepareCandidate(clip, source);
+		this.#loadTargetSource(source.src, generation);
+	}
+	#prepareCandidate(clip, source) {
+		const generation = ++this.#generation;
+		this.#cancelFrameObservation();
+		this.#removeSourceListeners?.();
+		this.#removeSourceListeners = null;
+		this.#seekInFlight = false;
+		this.#pendingSeek = null;
+		this.#seeking = false;
+		this.#activeClipId = clip.id;
+		this.#selectedSource = source.src;
+		this.#duration = null;
+		this.#appliedTime = null;
+		this.#presentedTime = null;
+		this.#error = null;
+		this.#loadState = "loading";
+		this.#applyClipAttributes(clip);
+		this.#emit({
+			type: "loadstart",
+			clipId: clip.id
+		});
+		return generation;
+	}
+	#loadTargetSource(targetSource, generation) {
+		this.#attachSourceListeners(generation);
+		try {
+			this.#target.pause();
+			this.#target.srcObject = null;
+			this.#target.setAttribute("src", targetSource);
+			this.#target.load();
+		} catch (cause) {
+			this.#handleSourceFailure(generation, cause);
+		}
+	}
+	#applyClipAttributes(clip) {
+		this.#target.preload = clip.preload === "full" ? "auto" : clip.preload;
+		if (clip.poster === null) this.#target.removeAttribute("poster");
+		else this.#target.poster = clip.poster;
+		if (clip.crossOrigin === null) this.#target.removeAttribute("crossorigin");
+		else this.#target.crossOrigin = clip.crossOrigin;
+	}
+	#attachSourceListeners(generation) {
+		const loadedMetadata = () => {
+			if (this.#isCurrentGeneration(generation)) this.#handleLoadedMetadata();
+		};
+		const loadedData = () => {
+			if (this.#isCurrentGeneration(generation)) this.#handleLoadedData();
+		};
+		const seeked = () => {
+			if (this.#isCurrentGeneration(generation)) this.#handleSeeked();
+		};
+		const error = () => {
+			if (this.#isCurrentGeneration(generation)) this.#handleSourceFailure(generation, this.#target.error);
+		};
+		this.#target.addEventListener("loadedmetadata", loadedMetadata);
+		this.#target.addEventListener("loadeddata", loadedData);
+		this.#target.addEventListener("seeked", seeked);
+		this.#target.addEventListener("error", error);
+		this.#removeSourceListeners = () => {
+			this.#target.removeEventListener("loadedmetadata", loadedMetadata);
+			this.#target.removeEventListener("loadeddata", loadedData);
+			this.#target.removeEventListener("seeked", seeked);
+			this.#target.removeEventListener("error", error);
+		};
+	}
+	#handleLoadedMetadata() {
+		const clipId = this.#activeClipId;
+		if (clipId === null) return;
+		this.#duration = readDuration(this.#target);
+		this.#loadState = "metadata";
+		this.#error = null;
+		this.#emit({
+			type: "loadedmetadata",
+			clipId,
+			duration: this.#duration
+		});
+		this.#resolveWaiters();
+		this.#resolveReadinessWaiters();
+		if (this.#activity === "active" && this.#desired?.clipId === clipId) this.#requestSeek(this.#desired);
+	}
+	#handleLoadedData() {
+		const clipId = this.#activeClipId;
+		if (clipId === null) return;
+		this.#loadState = "ready";
+		this.#emit({
+			type: "loadready",
+			clipId
+		});
+		this.#resolveReadinessWaiters();
+		if (this.#activity !== "active") return;
+		if (this.#supportsVideoFrameCallback()) this.#scheduleFrameObservation();
+		else if (!this.#seekInFlight) this.#presentFrame(this.#target.currentTime, null, null, null);
+	}
+	#handleSeeked() {
+		this.#seekInFlight = false;
+		this.#seeking = false;
+		if (this.#activity === "active" && !this.#supportsVideoFrameCallback()) this.#presentFrame(this.#target.currentTime, null, null, null);
+		const pending = this.#pendingSeek;
+		this.#pendingSeek = null;
+		if (this.#activity === "active" && pending !== null && pending.clipId === this.#activeClipId) this.#requestSeek(pending);
+	}
+	#requestSeek(desired) {
+		if (this.#activity !== "active" || desired.clipId !== this.#activeClipId || this.#loadState === "loading") return;
+		const targetTime = this.#duration === null ? Math.max(0, desired.targetTime) : Math.min(this.#duration, Math.max(0, desired.targetTime));
+		const normalized = {
+			...desired,
+			targetTime
+		};
+		const reference = this.#pendingSeek?.targetTime ?? this.#appliedTime ?? this.#target.currentTime;
+		if (Math.abs(reference - targetTime) <= this.#config.timeEpsilon) return;
+		if (this.#seekInFlight) {
+			this.#pendingSeek = normalized;
+			return;
+		}
+		this.#applySeek(normalized);
+	}
+	#applySeek(desired) {
+		try {
+			this.#target.currentTime = desired.targetTime;
+			this.#appliedTime = desired.targetTime;
+			this.#seekInFlight = true;
+			this.#seeking = true;
+			this.#emit({
+				type: "seekrequest",
+				clipId: desired.clipId,
+				requestedTime: desired.requestedTime,
+				targetTime: desired.targetTime
+			});
+			this.#scheduleFrameObservation();
+		} catch (cause) {
+			this.#fail(createError("MEDIA_SEEK_FAILED", "The native video target rejected a seek request.", this.#config.id, desired.clipId, this.#selectedSource, cause));
+		}
+	}
+	#scheduleFrameObservation() {
+		if (this.#activity !== "active" || !this.#supportsVideoFrameCallback() || this.#activeClipId === null) return;
+		this.#cancelFrameObservation();
+		const generation = this.#generation;
+		const token = ++this.#frameToken;
+		const request = this.#target.requestVideoFrameCallback;
+		if (request === void 0) return;
+		this.#frameHandle = request.call(this.#target, (_now, metadata) => {
+			if (this.#destroyed || generation !== this.#generation || token !== this.#frameToken || this.#activeClipId === null) return;
+			this.#frameHandle = null;
+			const presentedTime = typeof metadata.mediaTime === "number" && Number.isFinite(metadata.mediaTime) ? metadata.mediaTime : this.#target.currentTime;
+			this.#presentFrame(presentedTime, finiteOrNull(metadata.expectedDisplayTime ?? NaN), finiteOrNull(metadata.width ?? NaN), finiteOrNull(metadata.height ?? NaN));
+		});
+	}
+	#presentFrame(presentedTime, expectedDisplayTime, width, height) {
+		const clipId = this.#activeClipId;
+		if (this.#activity !== "active" || clipId === null || !Number.isFinite(presentedTime)) return;
+		this.#presentedTime = presentedTime;
+		this.#emit({
+			type: "frame",
+			clipId,
+			presentedTime,
+			expectedDisplayTime,
+			width,
+			height
+		});
+	}
+	#handleSourceFailure(generation, cause) {
+		if (!this.#isCurrentGeneration(generation)) return;
+		const nextIndex = this.#candidateIndex + 1;
+		const desiredClip = this.#activeClipId;
+		const clip = this.#config.clips.find((candidate) => candidate.id === desiredClip);
+		if (clip !== void 0 && nextIndex < this.#candidateSources.length) {
+			this.#candidateIndex = nextIndex;
+			if (clip.preload === "full") {
+				this.#discardFullAsset(clip.id);
+				this.#startFullCandidate(clip, nextIndex);
+			} else this.#startCandidate(clip, this.#candidateSources[nextIndex]);
+			return;
+		}
+		const mediaErrorCode = this.#target.error?.code;
+		const code = mediaErrorCode === 3 ? "MEDIA_DECODE_FAILED" : mediaErrorCode === 4 ? "MEDIA_SOURCE_UNSUPPORTED" : "MEDIA_LOAD_FAILED";
+		this.#fail(createError(code, code === "MEDIA_DECODE_FAILED" ? "The browser could not decode the selected video clip." : code === "MEDIA_SOURCE_UNSUPPORTED" ? "The browser could not use any source for the selected video clip." : "The selected video clip failed to load.", this.#config.id, this.#activeClipId, this.#selectedSource, cause));
+	}
+	#fail(error, emit = true) {
+		++this.#generation;
+		this.#cancelFrameObservation();
+		this.#removeSourceListeners?.();
+		this.#removeSourceListeners = null;
+		this.#seekInFlight = false;
+		this.#pendingSeek = null;
+		this.#seeking = false;
+		this.#loadState = "error";
+		this.#error = error;
+		this.#rejectWaiters(error);
+		this.#rejectReadinessWaiters(error);
+		if (emit) this.#emit({
+			type: "error",
+			error
+		});
+	}
+	#resetSource(loadState) {
+		++this.#generation;
+		this.#cancelFrameObservation();
+		this.#removeSourceListeners?.();
+		this.#removeSourceListeners = null;
+		this.#seekInFlight = false;
+		this.#pendingSeek = null;
+		this.#seeking = false;
+		this.#activeClipId = null;
+		this.#selectedSource = null;
+		this.#duration = null;
+		this.#appliedTime = null;
+		this.#presentedTime = null;
+		this.#error = null;
+		this.#loadState = loadState;
+		try {
+			this.#target.pause();
+			this.#target.srcObject = null;
+			this.#target.removeAttribute("src");
+			this.#target.load();
+		} catch {}
+	}
+	#supportsVideoFrameCallback() {
+		return typeof this.#target.requestVideoFrameCallback === "function";
+	}
+	#cancelFrameObservation() {
+		++this.#frameToken;
+		if (this.#frameHandle === null) return;
+		try {
+			const cancel = this.#target.cancelVideoFrameCallback;
+			if (cancel !== void 0) cancel.call(this.#target, this.#frameHandle);
+		} catch {}
+		this.#frameHandle = null;
+	}
+	#resolveWaiters() {
+		for (const waiter of this.#waiters) waiter.resolve();
+		this.#waiters.clear();
+	}
+	#rejectWaiters(error) {
+		for (const waiter of this.#waiters) waiter.reject(error);
+		this.#waiters.clear();
+	}
+	#emit(event) {
+		if (!this.#destroyed) this.#onEvent(event);
+	}
+	#isCurrentGeneration(generation) {
+		return !this.#destroyed && generation === this.#generation;
+	}
+	#assertNotDestroyed() {
+		if (this.#destroyed) throw new FrameByFrameError("CONTROLLER_DESTROYED", "The video renderer has already been destroyed.", { details: { bindingId: this.#config.id } });
+	}
+};
+/** Creates one native video renderer around an already resolved and claimed target. */
+const createNativeVideoRenderer = (config, handle, onEvent, dependencies = defaultDependencies, activity = "active", viewportTarget = handle.target) => new NativeVideoRenderer(config, handle, onEvent, dependencies, activity, viewportTarget);
+
+//#endregion
+//#region src/media/video-target.ts
+const isRecord$1 = (value) => typeof value === "object" && value !== null;
+const isMediaDocument = (value) => isRecord$1(value) && value["nodeType"] === 9 && typeof value["querySelector"] === "function" && typeof value["createElement"] === "function";
+const isMediaHtmlElement = (value) => isRecord$1(value) && value["nodeType"] === 1 && typeof value["appendChild"] === "function" && isMediaDocument(value["ownerDocument"]);
+const getElementName = (value) => {
+	const localName = value["localName"];
+	if (typeof localName === "string") return localName.toLowerCase();
+	const tagName = value["tagName"];
+	return typeof tagName === "string" ? tagName.toLowerCase() : "";
+};
+const isMediaVideoElement = (value) => isRecord$1(value) && value["nodeType"] === 1 && getElementName(value) === "video" && typeof value["addEventListener"] === "function" && typeof value["removeEventListener"] === "function" && typeof value["canPlayType"] === "function" && typeof value["load"] === "function" && typeof value["pause"] === "function" && typeof value["getAttribute"] === "function" && typeof value["setAttribute"] === "function" && typeof value["removeAttribute"] === "function" && typeof value["currentTime"] === "number";
+const getGlobalDocument$1 = () => {
+	const candidate = globalThis.document;
+	return isMediaDocument(candidate) ? candidate : null;
+};
+const targetError = (code, bindingId, message, cause) => {
+	throw new FrameByFrameError(code, message, {
+		cause,
+		details: { bindingId }
+	});
+};
+const resolveMediaReference = (reference, bindingId, label) => {
+	let candidate = reference;
+	if (typeof candidate === "function") try {
+		candidate = candidate();
+	} catch (cause) {
+		return targetError("TARGET_NOT_FOUND", bindingId, `The ${label} resolver threw an error.`, cause);
+	}
+	if (typeof candidate === "string") {
+		const document = getGlobalDocument$1();
+		if (document === null) throw new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", `A browser document is required to resolve the ${label} selector.`, { details: { bindingId } });
+		try {
+			candidate = document.querySelector(candidate);
+		} catch (cause) {
+			return targetError("TARGET_NOT_FOUND", bindingId, `The ${label} selector is invalid.`, cause);
+		}
+	}
+	if (candidate === null || candidate === void 0) return targetError("TARGET_NOT_FOUND", bindingId, `The ${label} could not be resolved.`, candidate);
+	return candidate;
+};
+/** Prevents more than one mounted binding from writing to the same target. */
+var VideoTargetRegistry = class {
+	#owners = /* @__PURE__ */ new WeakMap();
+	acquire(target, owner, bindingId) {
+		if (this.#owners.has(target)) throw new FrameByFrameError("TARGET_CONFLICT", "The video target is already controlled by another mounted binding.", { details: { bindingId } });
+		this.#owners.set(target, owner);
+		let active = true;
+		return () => {
+			if (!active) return;
+			active = false;
+			if (this.#owners.get(target) === owner) this.#owners.delete(target);
+		};
+	}
+};
+const createOwnedTarget = (mountTo, bindingId) => {
+	const document = mountTo.ownerDocument;
+	if (!isMediaDocument(document)) throw new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", "The mount container does not expose an owner document.", { details: { bindingId } });
+	const target = document.createElement("video");
+	if (!isMediaVideoElement(target)) return targetError("INVALID_TARGET_TYPE", bindingId, "The owner document could not create an HTMLVideoElement.", target);
+	mountTo.appendChild(target);
+	return target;
+};
+/** Resolves, creates, and globally claims one binding's native video target. */
+const resolveVideoTarget = (config, registry) => {
+	const owner = {};
+	let target;
+	let owned = false;
+	if (config.target !== void 0) {
+		const candidate = resolveMediaReference(config.target, config.id, "video target");
+		if (!isMediaVideoElement(candidate)) return targetError("INVALID_TARGET_TYPE", config.id, "The resolved target must be an HTMLVideoElement.", candidate);
+		target = candidate;
+	} else {
+		const candidate = resolveMediaReference(config.mountTo, config.id, "video mount container");
+		if (!isMediaHtmlElement(candidate)) return targetError("INVALID_TARGET_TYPE", config.id, "The resolved mountTo value must be an HTMLElement.", candidate);
+		target = createOwnedTarget(candidate, config.id);
+		owned = true;
+	}
+	let releaseOwnership = null;
+	try {
+		releaseOwnership = registry.acquire(target, owner, config.id);
+	} catch (error) {
+		if (owned) target.parentNode?.removeChild(target);
+		throw error;
+	}
+	let active = true;
+	return {
+		target,
+		owned,
+		release: () => {
+			if (!active) return;
+			active = false;
+			releaseOwnership();
+			if (owned) target.parentNode?.removeChild(target);
+		}
+	};
+};
+
+//#endregion
+//#region src/scroll/source.ts
+const isRecord = (value) => typeof value === "object" && value !== null;
+const hasEventTargetMethods = (value) => typeof value["addEventListener"] === "function" && typeof value["removeEventListener"] === "function";
+const isDocument = (value) => isRecord(value) && value["nodeType"] === 9 && hasEventTargetMethods(value) && typeof value["querySelector"] === "function" && isRecord(value["documentElement"]);
+const isHtmlElement = (value) => isRecord(value) && value["nodeType"] === 1 && hasEventTargetMethods(value) && typeof value["scrollLeft"] === "number" && typeof value["scrollTop"] === "number" && typeof value["scrollWidth"] === "number" && typeof value["scrollHeight"] === "number" && typeof value["clientWidth"] === "number" && typeof value["clientHeight"] === "number";
+const isAnimationFrameHost = (value) => isRecord(value) && typeof value["requestAnimationFrame"] === "function" && typeof value["cancelAnimationFrame"] === "function";
+const getGlobalDocument = () => {
+	const candidate = globalThis.document;
+	return isDocument(candidate) ? candidate : null;
+};
+const getGlobalWindow = () => globalThis.window;
+const environmentUnavailable = (message) => {
+	throw new FrameByFrameError("ENVIRONMENT_UNAVAILABLE", message);
+};
+const sourceNotFound = (message, cause) => {
+	throw new FrameByFrameError("SOURCE_NOT_FOUND", message, { cause });
+};
+const getDocumentMetricsTarget = (documentSource) => {
+	const metricsTarget = documentSource.scrollingElement ?? documentSource.documentElement;
+	if (!isHtmlElement(metricsTarget)) return sourceNotFound("The document does not expose a valid scrolling element.", metricsTarget);
+	return metricsTarget;
+};
+const getOwnerDocument = (source) => {
+	if (isDocument(source)) return source;
+	const ownerDocument = source.ownerDocument;
+	return isDocument(ownerDocument) ? ownerDocument : null;
+};
+const resolveFrameHost = (source) => {
+	const ownerWindow = getOwnerDocument(source)?.defaultView;
+	const frameHost = isAnimationFrameHost(ownerWindow) ? ownerWindow : getGlobalWindow();
+	if (!isAnimationFrameHost(frameHost)) return environmentUnavailable("requestAnimationFrame and cancelAnimationFrame are required to mount a controller.");
+	return frameHost;
+};
+const canonicalizeSource = (source) => {
+	if (isDocument(source)) return source;
+	const ownerDocument = getOwnerDocument(source);
+	if (ownerDocument !== null && (source === ownerDocument.scrollingElement || ownerDocument.scrollingElement === null && source === ownerDocument.documentElement)) return ownerDocument;
+	return source;
+};
+const resolveReference = (reference) => {
+	let candidate = reference;
+	if (typeof candidate === "function") try {
+		candidate = candidate();
+	} catch (cause) {
+		return sourceNotFound("The scroll source resolver threw an error.", cause);
+	}
+	if (candidate === void 0) {
+		const globalDocument = getGlobalDocument();
+		if (globalDocument === null) return environmentUnavailable("A browser document is required when no scroll source is provided.");
+		return globalDocument;
+	}
+	if (typeof candidate === "string") {
+		const globalDocument = getGlobalDocument();
+		if (globalDocument === null) return environmentUnavailable("A browser document is required to resolve a selector.");
+		let selected;
+		try {
+			selected = globalDocument.querySelector(candidate);
+		} catch (cause) {
+			return sourceNotFound(`The scroll source selector "${candidate}" is invalid.`, cause);
+		}
+		if (!isHtmlElement(selected)) return sourceNotFound(`The scroll source selector "${candidate}" did not resolve to an HTMLElement.`, selected);
+		return selected;
+	}
+	if (!isDocument(candidate) && !isHtmlElement(candidate)) return sourceNotFound("The scroll source must be a Document, HTMLElement, selector, or synchronous resolver.", candidate);
+	return candidate;
+};
+/** Resolves and canonicalizes a configured source without accessing the DOM before mount. */
+const resolveScrollSource = (reference) => {
+	const source = canonicalizeSource(resolveReference(reference));
+	const frameHost = resolveFrameHost(source);
+	return {
+		key: source,
+		publicSource: source,
+		eventTarget: source,
+		metricsTarget: isDocument(source) ? getDocumentMetricsTarget(source) : source,
+		requestFrame: frameHost.requestAnimationFrame.bind(frameHost),
+		cancelFrame: frameHost.cancelAnimationFrame.bind(frameHost)
+	};
+};
+
+//#endregion
+//#region src/scroll/source-scheduler.ts
+const clampProgress = (value) => Math.min(1, Math.max(0, value));
+const finiteOrZero = (value) => Number.isFinite(value) ? value : 0;
+const createAxisSnapshot = (offset, max) => ({
+	offset,
+	max,
+	progress: max === 0 ? 0 : clampProgress(offset / max)
+});
+/** One passive listener and at most one pending animation frame per scroll source. */
+var SourceScheduler = class {
+	#source;
+	#reportAsyncError;
+	#subscribers = /* @__PURE__ */ new Set();
+	#handleScroll = () => {
+		this.#schedule();
+	};
+	#handleFrame = () => {
+		this.#frameHandle = null;
+		const snapshot = this.getSnapshot();
+		for (const subscriber of [...this.#subscribers]) try {
+			subscriber(snapshot);
+		} catch (error) {
+			this.#reportAsyncError(error);
+		}
+	};
+	#frameHandle = null;
+	#xMax = 0;
+	#yMax = 0;
+	constructor(source, reportAsyncError) {
+		this.#source = source;
+		this.#reportAsyncError = reportAsyncError;
+	}
+	subscribe(subscriber) {
+		const shouldAttach = this.#subscribers.size === 0;
+		this.#subscribers.add(subscriber);
+		if (shouldAttach) try {
+			this.#source.eventTarget.addEventListener("scroll", this.#handleScroll, { passive: true });
+		} catch (error) {
+			this.#subscribers.delete(subscriber);
+			throw error;
+		}
+		let active = true;
+		return () => {
+			if (!active) return;
+			active = false;
+			this.#subscribers.delete(subscriber);
+			if (this.#subscribers.size === 0) {
+				this.#source.eventTarget.removeEventListener("scroll", this.#handleScroll);
+				if (this.#frameHandle !== null) {
+					this.#source.cancelFrame(this.#frameHandle);
+					this.#frameHandle = null;
+				}
+			}
+		};
+	}
+	refresh() {
+		const metrics = this.#source.metricsTarget;
+		this.#xMax = Math.max(0, finiteOrZero(metrics.scrollWidth) - finiteOrZero(metrics.clientWidth));
+		this.#yMax = Math.max(0, finiteOrZero(metrics.scrollHeight) - finiteOrZero(metrics.clientHeight));
+		return this.getSnapshot();
+	}
+	getSnapshot() {
+		const metrics = this.#source.metricsTarget;
+		const x = createAxisSnapshot(finiteOrZero(metrics.scrollLeft), this.#xMax);
+		const y = createAxisSnapshot(finiteOrZero(metrics.scrollTop), this.#yMax);
+		return Object.freeze({
+			x: Object.freeze(x),
+			y: Object.freeze(y)
+		});
+	}
+	#schedule() {
+		if (this.#frameHandle === null && this.#subscribers.size > 0) this.#frameHandle = this.#source.requestFrame(this.#handleFrame);
+	}
+};
+/** Weakly keys the shared scheduler used by every controller on one source. */
+var SourceRegistry = class {
+	#schedulers = /* @__PURE__ */ new WeakMap();
+	#reportAsyncError;
+	constructor(reportAsyncError) {
+		this.#reportAsyncError = reportAsyncError;
+	}
+	get(source) {
+		const existing = this.#schedulers.get(source.key);
+		if (existing !== void 0) return existing;
+		const scheduler = new SourceScheduler(source, this.#reportAsyncError);
+		this.#schedulers.set(source.key, scheduler);
+		return scheduler;
+	}
+};
+
+//#endregion
+//#region src/core/public-controller.ts
+const reportAsyncError = (error) => {
+	globalThis.queueMicrotask(() => {
+		throw error;
+	});
+};
+const sourceRegistry = new SourceRegistry(reportAsyncError);
+const videoTargetRegistry = new VideoTargetRegistry();
+const createVideoRenderer = (config, onEvent, activity) => {
+	const handle = resolveVideoTarget(config, videoTargetRegistry);
+	try {
+		return createNativeVideoRenderer(config, handle, onEvent, void 0, activity);
+	} catch (error) {
+		handle.release();
+		throw error;
+	}
+};
+/** Creates an SSR-safe controller; browser capabilities are resolved by mount(). */
+const createFrameByFrame = (options) => createController(options, {
+	resolveSource: resolveScrollSource,
+	sourceRegistry,
+	reportAsyncError,
+	createRenderer: createVideoRenderer,
+	supportedRenderers: /* @__PURE__ */ new Set(["video"])
+});
+
+//#endregion
+export { videoTargetRegistry as a, isMediaHtmlElement as c, createNativeVideoRenderer as d, createController as f, sourceRegistry as i, isMediaVideoElement as l, FrameByFrameError as m, createVideoRenderer as n, resolveScrollSource as o, createTimeline as p, reportAsyncError as r, isMediaDocument as s, createFrameByFrame as t, resolveMediaReference as u };
+//# sourceMappingURL=public-controller-jGcw6iqQ.js.map