@videojs/html 10.0.0-beta.15 → 10.0.0-beta.16

package/cdn/media/simple-hls-video.dev.js

@@ -1,9 +1,8 @@
 import { t as listen } from "../listen-w-Aun0yN.js";
-import { s as safeDefine } from "../context-BjrbhiSk.js";
+import { o as safeDefine } from "../context-CvJ83xGk.js";
 import { t as anyAbortSignal } from "../abort-CzqmAxxH.js";
-import { t as DelegateMixin } from "../delegate-BCw-LjP_.js";
-import { t as MediaAttachMixin } from "../media-attach-mixin-DfKkofgF.js";
-import { n as CustomVideoElement, t as MediaPropsMixin } from "../media-props-mixin-Dc5dpCV4.js";
+import { i as DelegateMixin, r as CustomVideoElement, t as MediaPropsMixin } from "../media-props-mixin-CZLZIhGT.js";
+import { t as MediaAttachMixin } from "../media-attach-mixin-CMH1ziXP.js";
 
 //#region ../spf/dist/dev/core/abr/ewma.js
 /**
@@ -981,19 +980,436 @@ function calculateBackBufferFlushPoint(segments, currentTime, config = DEFAULT_B
 	return segmentsBefore[segmentsToFlush].startTime;
 }
 
+//#endregion
+//#region ../spf/dist/dev/core/machine.js
+/**
+* Provisions the shared mechanics for all machine-like primitives: a snapshot
+* signal, an untracked state reader, and a transition function.
+*
+* Internal — consumed by `createMachineActor` and `createMachineReactor`. Not part of the
+* public API.
+*/
+function createMachineCore(initialSnapshot) {
+	const snapshotSignal = signal(initialSnapshot);
+	const getState = () => untrack(() => snapshotSignal.get().value);
+	const transition = (to) => update(snapshotSignal, (current) => ({
+		...current,
+		value: to
+	}));
+	return {
+		snapshotSignal,
+		getState,
+		transition
+	};
+}
+
+//#endregion
+//#region ../spf/dist/dev/core/create-machine-actor.js
+/**
+* Creates a message-driven actor from a declarative definition.
+*
+* The actor owns a reactive snapshot signal (state + context), an optional
+* runner, and dispatches incoming messages to per-state handlers. `'destroyed'`
+* is always the implicit terminal state — `destroy()` transitions there
+* unconditionally and all subsequent `send()` calls are no-ops.
+*
+* When a state declares `onSettled`, the framework calls `runner.whenSettled()`
+* after the handler returns. The runner owns the generation-token logic — if
+* new tasks are scheduled before the current batch settles, the callback is
+* automatically superseded.
+*
+* @example
+* const actor = createMachineActor({
+*   runner: () => new SerialRunner(),
+*   initial: 'idle',
+*   context: {},
+*   states: {
+*     idle: {
+*       on: {
+*         load: (msg, { transition, runner }) => {
+*           segments.forEach(s => runner.schedule(new Task(...)));
+*           transition('loading');
+*         }
+*       }
+*     },
+*     loading: {
+*       onSettled: 'idle',
+*       on: {
+*         load: (msg, { runner }) => {
+*           runner.abortAll();
+*           segments.forEach(s => runner.schedule(new Task(...)));
+*         }
+*       }
+*     }
+*   }
+* });
+*/
+function createMachineActor(def) {
+	const runner = def.runner?.();
+	const { snapshotSignal, getState, transition } = createMachineCore({
+		value: def.initial,
+		context: def.context
+	});
+	const getContext = () => untrack(() => snapshotSignal.get().context);
+	const setContext = (context) => {
+		update(snapshotSignal, { context });
+	};
+	return {
+		get snapshot() {
+			return snapshotSignal;
+		},
+		send(message) {
+			const state = getState();
+			if (state === "destroyed") return;
+			const handler = def.states[state]?.on?.[message.type];
+			if (!handler) return;
+			handler(message, {
+				context: getContext(),
+				getContext,
+				transition: (to) => transition(to),
+				setContext,
+				...runner ? { runner } : {}
+			});
+			const newState = getState();
+			if (newState !== "destroyed") {
+				const newStateDef = def.states[newState];
+				if (newStateDef?.onSettled && runner) {
+					const targetState = newStateDef.onSettled;
+					runner.whenSettled(() => {
+						if (getState() !== newState) return;
+						transition(targetState);
+					});
+				}
+			}
+		},
+		destroy() {
+			if (getState() === "destroyed") return;
+			runner?.destroy();
+			transition("destroyed");
+		}
+	};
+}
+
+//#endregion
+//#region ../spf/dist/dev/core/utils/generate-id.js
+/**
+* Generate unique ID for HAM objects.
+*
+* Uses timestamp + random number for sufficient uniqueness.
+* IDs are strings without decimals.
+*
+* @returns Unique string ID in format: timestamp-random
+*
+* @example
+* ```ts
+* const id = generateId();  // "1738423156789-542891"
+* ```
+*/
+function generateId() {
+	return `${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
+}
+
+//#endregion
+//#region ../spf/dist/dev/core/task.js
+/**
+* Generic reusable task that wraps an async run function.
+*
+* Owns its own AbortController so it can always be aborted independently.
+* Optionally composes an external AbortSignal so that a parent's cancellation
+* propagates into the task's work without requiring the caller to track the
+* task separately.
+*
+* Ordering guarantee: `value` is written before `status` transitions to `'done'`;
+* `error` is written before `status` transitions to `'error'`. Any reader
+* observing `status === 'done'` is guaranteed `value` is already present.
+*/
+var Task = class {
+	id;
+	#runFn;
+	#abortController = new AbortController();
+	#signal;
+	#status = "pending";
+	#value = void 0;
+	#error = void 0;
+	constructor(runFn, config) {
+		this.#runFn = runFn;
+		const rawId = config?.id;
+		this.id = typeof rawId === "function" ? rawId() : rawId ?? generateId();
+		this.#signal = config?.signal ? anyAbortSignal([this.#abortController.signal, config.signal]) : this.#abortController.signal;
+	}
+	get status() {
+		return this.#status;
+	}
+	get value() {
+		return this.#value;
+	}
+	get error() {
+		return this.#error;
+	}
+	async run() {
+		this.#status = "running";
+		try {
+			const result = await this.#runFn(this.#signal);
+			this.#value = result;
+			this.#status = "done";
+			return result;
+		} catch (e) {
+			this.#error = e;
+			this.#status = "error";
+			throw e;
+		}
+	}
+	abort() {
+		this.#abortController.abort();
+	}
+};
+/**
+* Runs tasks concurrently, deduplicated by task id.
+*
+* If a task with a given id is already in flight, subsequent schedule() calls
+* for that id are silently ignored until the first completes. Tasks are stored
+* so abortAll() can cancel any in-flight work (e.g. on engine cleanup).
+*/
+var ConcurrentRunner = class {
+	#pending = /* @__PURE__ */ new Map();
+	#settled = Promise.resolve();
+	#resolveSettled = null;
+	#destroyed = false;
+	schedule(task) {
+		if (this.#destroyed) return Promise.resolve();
+		const existing = this.#pending.get(task.id);
+		if (existing) return existing.promise;
+		if (this.#pending.size === 0) this.#settled = new Promise((resolve) => {
+			this.#resolveSettled = resolve;
+		});
+		const promise = task.run();
+		promise.catch(() => {});
+		const cleanup = () => {
+			this.#pending.delete(task.id);
+			if (this.#pending.size === 0) {
+				this.#resolveSettled?.();
+				this.#resolveSettled = null;
+			}
+		};
+		promise.then(cleanup, cleanup);
+		this.#pending.set(task.id, {
+			task,
+			promise
+		});
+		return promise;
+	}
+	/**
+	* Registers a callback to fire when all currently in-flight tasks settle.
+	* If the runner is already idle, the callback is never called. If abortAll()
+	* is called before the batch settles, the callback is superseded and silently
+	* dropped — no stale callbacks, no generation token required by the caller.
+	*/
+	whenSettled(callback) {
+		if (this.#pending.size === 0) return;
+		const captured = this.#settled;
+		captured.then(() => {
+			if (this.#settled !== captured) return;
+			callback();
+		}, () => {});
+	}
+	abortAll() {
+		for (const { task } of this.#pending.values()) task.abort();
+		this.#pending.clear();
+		this.#resolveSettled?.();
+		this.#resolveSettled = null;
+		this.#settled = Promise.resolve();
+	}
+	destroy() {
+		this.#destroyed = true;
+		this.abortAll();
+	}
+};
+/**
+* Runs tasks one at a time in submission order.
+*
+* Each schedule() call returns a Promise that resolves or rejects with the
+* task's result when it is eventually executed. Tasks wait in queue until the
+* prior task completes.
+*
+* Serialization is achieved by chaining each task's run() onto the tail of a
+* shared promise chain — no explicit queue or drain loop needed.
+*
+* abortAll() aborts all pending (not yet started) tasks and the currently
+* in-flight task. Pending tasks still run briefly but receive an aborted
+* signal and are expected to exit early.
+*/
+var SerialRunner = class {
+	#chain = Promise.resolve();
+	#pending = /* @__PURE__ */ new Set();
+	#current = null;
+	#destroyed = false;
+	schedule(task) {
+		if (this.#destroyed) return Promise.resolve();
+		const t = task;
+		this.#pending.add(t);
+		const result = this.#chain.then(() => {
+			this.#pending.delete(t);
+			this.#current = t;
+			return task.run();
+		}).finally(() => {
+			this.#current = null;
+		});
+		this.#chain = result.then(() => {}, () => {});
+		return result;
+	}
+	/**
+	* A promise that resolves when all currently-scheduled tasks have settled.
+	* Use the reference as a generation token: capture it after scheduling a
+	* batch, then check identity in the resolution callback to detect whether
+	* a subsequent abortAll() + new batch has superseded this one.
+	*/
+	get settled() {
+		return this.#chain;
+	}
+	/**
+	* Registers a callback to fire when all currently-pending tasks settle.
+	* If the runner is already idle (no pending or running tasks), the callback
+	* is never called. If new tasks are scheduled before the current batch
+	* settles, the callback is superseded and silently dropped — no stale
+	* callbacks, no generation token required by the caller.
+	*/
+	whenSettled(callback) {
+		if (this.#pending.size === 0 && this.#current === null) return;
+		const currentChain = this.#chain;
+		currentChain.then(() => {
+			if (this.#chain !== currentChain) return;
+			callback();
+		}, () => {});
+	}
+	/** Aborts and clears queued tasks without touching the in-flight task. */
+	abortPending() {
+		for (const task of this.#pending) task.abort();
+		this.#pending.clear();
+	}
+	abortAll() {
+		this.abortPending();
+		this.#current?.abort();
+	}
+	destroy() {
+		this.#destroyed = true;
+		this.abortAll();
+	}
+};
+
 //#endregion
 //#region ../spf/dist/dev/dom/features/segment-loader-actor.js
 /**
+* Resolves when the SourceBufferActor snapshot reaches 'idle'.
+* Rejects if the signal is aborted or the actor is destroyed.
+*
+* Used to sequence SourceBufferActor operations without awaiting send()
+* directly — send() is fire-and-forget; callers observe completion via
+* state transition.
+*/
+function waitForIdle(snapshot, signal) {
+	return new Promise((resolve, reject) => {
+		if (snapshot.get().value === "idle") {
+			resolve();
+			return;
+		}
+		if (snapshot.get().value === "destroyed") {
+			reject(new DOMException("Aborted", "AbortError"));
+			return;
+		}
+		if (signal.aborted) {
+			reject(signal.reason);
+			return;
+		}
+		let stop;
+		const cleanup = (fn) => {
+			stop?.();
+			signal.removeEventListener("abort", onAbort);
+			fn();
+		};
+		const onAbort = () => cleanup(() => reject(signal.reason));
+		stop = effect(() => {
+			const value = snapshot.get().value;
+			if (value === "idle") cleanup(resolve);
+			else if (value === "destroyed") cleanup(() => reject(new DOMException("Aborted", "AbortError")));
+		});
+		signal.addEventListener("abort", onAbort, { once: true });
+	});
+}
+/**
+* Wraps a LoadTask descriptor into a Task that fetches (if needed) and
+* forwards to SourceBufferActor. Updates in-flight context around async
+* operations so the loading handler can make accurate continue/preempt
+* decisions at any point.
+*/
+function makeLoadTask(op, { getContext, setContext, fetchBytes, sourceBufferActor }) {
+	return new Task(async (taskSignal) => {
+		if (taskSignal.aborted) return;
+		if (op.type === "remove") {
+			sourceBufferActor.send(op);
+			await waitForIdle(sourceBufferActor.snapshot, taskSignal);
+			return;
+		}
+		if (op.type === "append-init") {
+			setContext({
+				...getContext(),
+				inFlightInitTrackId: op.meta.trackId
+			});
+			try {
+				const data = await fetchBytes(op, {
+					signal: taskSignal,
+					minChunkSize: Infinity
+				});
+				if (!taskSignal.aborted) {
+					sourceBufferActor.send({
+						type: "append-init",
+						data,
+						meta: op.meta
+					});
+					await waitForIdle(sourceBufferActor.snapshot, taskSignal);
+				}
+			} finally {
+				setContext({
+					...getContext(),
+					inFlightInitTrackId: null
+				});
+			}
+			return;
+		}
+		setContext({
+			...getContext(),
+			inFlightSegmentId: op.meta.id
+		});
+		try {
+			const stream = await fetchBytes(op, { signal: taskSignal });
+			if (!taskSignal.aborted) {
+				sourceBufferActor.send({
+					type: "append-segment",
+					data: stream,
+					meta: op.meta
+				});
+				await waitForIdle(sourceBufferActor.snapshot, taskSignal);
+			}
+		} finally {
+			setContext({
+				...getContext(),
+				inFlightSegmentId: null
+			});
+		}
+	});
+}
+/**
 * Creates a SegmentLoaderActor for one track type (video or audio).
 *
 * Receives load assignments via `send()` and owns all execution: planning,
 * removes, fetches, and appends. Coordinates with the SourceBufferActor for
 * all physical SourceBuffer operations.
 *
-* Planning (Cases 1–3) happens in `send()` on every incoming message, producing
-* an ordered LoadTask list. The runner drains that list sequentially. When a new
-* message arrives mid-run, send() replans and either continues the in-flight
-* operation (if still needed) or preempts it.
+* Planning (Cases 1–3) happens in the `load` handler on every incoming
+* message, producing an ordered LoadTask list. The runner drains that list
+* sequentially via SerialRunner. When a new message arrives mid-run, the
+* handler replans and either continues the in-flight operation (abortPending
+* + schedule new remainder) or preempts it (abortAll + cancel SourceBuffer
+* if needed + schedule new plan).
 *
 * @param sourceBufferActor - Shared SourceBufferActor reference (not owned)
 * @param fetchBytes - Tracked fetch closure (owns throughput sampling for segments).
@@ -1001,19 +1417,13 @@ function calculateBackBufferFlushPoint(segments, currentTime, config = DEFAULT_B
 *   so the entire body accumulates as one chunk before appending.
 */
 function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
-	let pendingTasks = null;
-	let inFlightInitTrackId = null;
-	let inFlightSegmentId = null;
-	let abortController = null;
-	let running = false;
-	let destroyed = false;
 	const getBufferedSegments = (allSegments) => {
 		const bufferedIds = new Set(sourceBufferActor.snapshot.get().context.segments.filter((s) => !s.partial).map((s) => s.id));
 		return allSegments.filter((s) => bufferedIds.has(s.id));
 	};
 	/**
 	* Translate a load message into an ordered LoadTask list based on committed
-	* actor state. In-flight awareness is handled separately in send().
+	* actor state. In-flight awareness is handled separately in the load handler.
 	*
 	* @todo Rename alongside LoadTask (e.g. planOps).
 	*
@@ -1075,102 +1485,51 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 		}
 		return tasks;
 	};
-	/**
-	* Execute a single LoadTask: fetch (if needed) then forward to SourceBufferActor.
-	* Sets/clears in-flight tracking around async operations so send() can make
-	* accurate continue/preempt decisions at any point during execution.
-	*
-	* @todo Rename alongside LoadTask (e.g. executeOp).
-	*/
-	const executeLoadTask = async (task) => {
-		const signal = abortController.signal;
-		try {
-			if (task.type === "remove") {
-				await sourceBufferActor.send(task, signal);
-				return;
-			}
-			if (task.type === "append-init") {
-				inFlightInitTrackId = task.meta.trackId;
-				if (!signal.aborted) {
-					const data = await fetchBytes(task, {
-						signal,
-						minChunkSize: Infinity
-					});
-					const isTrackSwitch = pendingTasks?.some((t) => t.type === "append-init" && t.meta.trackId !== task.meta.trackId);
-					if (!signal.aborted || !isTrackSwitch) {
-						const appendSignal = signal.aborted ? new AbortController().signal : signal;
-						await sourceBufferActor.send({
-							type: "append-init",
-							data,
-							meta: task.meta
-						}, appendSignal);
-					}
-				}
-				return;
-			}
-			inFlightSegmentId = task.meta.id;
-			if (!signal.aborted) {
-				const stream = await fetchBytes(task, { signal });
-				if (!signal.aborted) await sourceBufferActor.send({
-					type: "append-segment",
-					data: stream,
-					meta: task.meta
-				}, signal);
-			}
-		} finally {
-			inFlightInitTrackId = null;
-			inFlightSegmentId = null;
-		}
-	};
-	/**
-	* Drain the scheduled task list sequentially.
-	* After each task completes, checks for a pending replacement plan from send().
-	* If the signal was aborted and no new plan arrived, stops immediately.
-	*/
-	const runScheduled = async (initialTasks) => {
-		running = true;
-		abortController = new AbortController();
-		let scheduled = initialTasks;
-		while (scheduled.length > 0 && !destroyed) {
-			const task = scheduled[0];
-			scheduled = scheduled.slice(1);
-			try {
-				await executeLoadTask(task);
-			} catch (error) {
-				if (error instanceof Error && error.name === "AbortError") {} else {
-					console.error("Unexpected error in segment loader:", error);
-					scheduled = [];
-				}
-			}
-			if (pendingTasks !== null) {
-				scheduled = pendingTasks;
-				pendingTasks = null;
-				abortController = new AbortController();
-			} else if (abortController.signal.aborted) break;
-		}
-		abortController = null;
-		running = false;
+	const scheduleAll = (tasks, { getContext, setContext, runner }) => {
+		tasks.forEach((op) => {
+			runner.schedule(makeLoadTask(op, {
+				getContext,
+				setContext,
+				fetchBytes,
+				sourceBufferActor
+			})).then(void 0, (e) => {
+				if (e instanceof Error && e.name === "AbortError") return;
+				console.error("Unexpected error in segment loader:", e);
+				runner.abortPending();
+			});
+		});
 	};
-	return {
-		send(message) {
-			if (destroyed) return;
-			const allTasks = planTasks(message);
-			if (!running) {
+	return createMachineActor({
+		runner: () => new SerialRunner(),
+		initial: "idle",
+		context: {
+			inFlightInitTrackId: null,
+			inFlightSegmentId: null
+		},
+		states: {
+			idle: { on: { load: (msg, ctx) => {
+				const allTasks = planTasks(msg);
 				if (allTasks.length === 0) return;
-				runScheduled(allTasks);
-				return;
-			}
-			if (inFlightSegmentId !== null && allTasks.some((t) => t.type === "append-segment" && t.meta.id === inFlightSegmentId) || inFlightInitTrackId !== null && allTasks.some((t) => t.type === "append-init" && t.meta.trackId === inFlightInitTrackId)) pendingTasks = allTasks.filter((t) => !(t.type === "append-segment" && t.meta.id === inFlightSegmentId) && !(t.type === "append-init" && t.meta.trackId === inFlightInitTrackId));
-			else {
-				pendingTasks = allTasks;
-				abortController?.abort();
+				ctx.transition("loading");
+				scheduleAll(allTasks, ctx);
+			} } },
+			loading: {
+				onSettled: "idle",
+				on: { load: (msg, ctx) => {
+					const { context, runner } = ctx;
+					const allTasks = planTasks(msg);
+					if (context.inFlightSegmentId !== null && allTasks.some((t) => t.type === "append-segment" && t.meta.id === context.inFlightSegmentId) || context.inFlightInitTrackId !== null && allTasks.some((t) => t.type === "append-init" && t.meta.trackId === context.inFlightInitTrackId)) {
+						runner.abortPending();
+						scheduleAll(allTasks.filter((t) => !(t.type === "append-segment" && t.meta.id === context.inFlightSegmentId) && !(t.type === "append-init" && t.meta.trackId === context.inFlightInitTrackId)), ctx);
+					} else {
+						runner.abortAll();
+						if (context.inFlightSegmentId !== null || context.inFlightInitTrackId !== null && allTasks.some((t) => t.type === "append-init" && t.meta.trackId !== context.inFlightInitTrackId)) sourceBufferActor.send({ type: "cancel" });
+						scheduleAll(allTasks, ctx);
+					}
+				} }
 			}
-		},
-		destroy() {
-			destroyed = true;
-			abortController?.abort();
 		}
-	};
+	});
 }
 
 //#endregion
@@ -1409,157 +1768,308 @@ function destroyVttParser() {
 }
 
 //#endregion
-//#region ../spf/dist/dev/dom/features/load-text-track-cues.js
-const CueKeys = [
-	"startTime",
-	"endTime",
-	"text"
-];
-function isDuplicateCue(cue, existingCues) {
-	return Array.prototype.some.call(existingCues ?? [], (existingCue) => {
-		return CueKeys.every((k) => existingCue[k] === cue[k]);
-	});
-}
-const loadVttSegmentTask = async ({ segment }, { textTrack }) => {
-	(await parseVttSegment(segment.url)).forEach((cue) => {
-		if (isDuplicateCue(cue, textTrack.cues)) return;
-		textTrack.addCue(cue);
-	});
-};
-/**
-* Load text track cues task (composite - orchestrates VTT segment subtasks).
-*/
-const loadTextTrackCuesTask = async ({ currentState }, context) => {
-	const track = findSelectedTextTrack(currentState);
-	if (!track || !isResolvedTrack(track)) return;
-	const { segments } = track;
-	if (segments.length === 0) return;
-	const trackId = track.id;
-	const loadedIds = new Set((currentState.textBufferState?.[trackId]?.segments ?? []).map((s) => s.id));
-	const segmentsToLoad = getSegmentsToLoad(segments, segments.filter((s) => loadedIds.has(s.id)), currentState.currentTime ?? 0).filter((s) => !loadedIds.has(s.id));
-	if (segmentsToLoad.length === 0) return;
-	for (const segment of segmentsToLoad) {
-		if (context.signal.aborted) break;
-		try {
-			await loadVttSegmentTask({ segment }, { textTrack: context.textTrack });
-			const latestState = context.state.get();
-			const latest = latestState.textBufferState ?? {};
-			const trackState = latest[trackId] ?? { segments: [] };
-			context.state.set({
-				...latestState,
-				textBufferState: {
-					...latest,
-					[trackId]: { segments: [...trackState.segments, { id: segment.id }] }
-				}
-			});
-		} catch (error) {
-			if (error instanceof Error && error.name === "AbortError") break;
-			console.error("Failed to load VTT segment:", error);
-		}
-	}
-	if (context.textTrack.mode === "showing" && context.textTrack.cues) Array.from(context.textTrack.cues).forEach((cue) => {
-		context.textTrack.addCue(cue);
-	});
-	await new Promise((resolve) => requestAnimationFrame(resolve));
-};
+//#region ../spf/dist/dev/core/create-machine-reactor.js
+const toArray = (x) => x === void 0 ? [] : Array.isArray(x) ? x : [x];
 /**
-* Find the selected text track in the presentation.
-*/
-function findSelectedTextTrack(state) {
-	if (!state.presentation || !state.selectedTextTrackId) return;
-	const textSet = state.presentation.selectionSets.find((set) => set.type === "text");
-	if (!textSet?.switchingSets?.[0]?.tracks) return;
-	return textSet.switchingSets[0].tracks.find((t) => t.id === state.selectedTextTrackId);
-}
-/**
-* Get the browser's TextTrack object for the selected text track.
+* Creates a reactive Reactor from a declarative definition.
 *
-* Retrieves the live TextTrack interface from the track element in owners,
-* which is used for adding cues, checking mode, and managing track state.
+* A Reactor is driven by subscriptions to external signals rather than
+* imperative messages. Each state holds an array of effect functions —
+* every element becomes one independent `effect()` call gated on that state,
+* with its own dependency tracking and cleanup lifecycle.
 *
-* Note: Returns the DOM TextTrack interface (HTMLTrackElement.track),
-* not the presentation Track metadata type.
+* `'destroying'` and `'destroyed'` are always implicit terminal states.
+* `destroy()` transitions through both in sequence: `'destroying'` first (for
+* potential async teardown in a future extension), then immediately `'destroyed'`
+* for the synchronous base case. Active effect cleanups fire via disposal.
 *
-* @param state - Current playback state (track selection)
-* @param owners - DOM owners containing track elements map
-* @returns DOM TextTrack interface or undefined if not found
+* @example
+* const reactor = createMachineReactor({
+*   initial: 'waiting',
+*   monitor: () => srcSignal.get() ? 'active' : 'waiting',
+*   states: {
+*     active: {
+*       // entry: runs once on state entry; fn body is automatically untracked.
+*       entry: () => listen(el, 'play', handler),
+*       // effects: re-runs whenever tracked signals change.
+*       effects: () => { currentTimeSignal.get(); return cleanup; },
+*     },
+*     waiting: {},
+*   }
+* });
 */
-function getSelectedTextTrackFromOwners(state, owners) {
-	const trackId = state.selectedTextTrackId;
-	if (!trackId || !owners.textTracks) return;
-	return owners.textTracks.get(trackId)?.track;
+function createMachineReactor(def) {
+	const { snapshotSignal, getState, transition } = createMachineCore({ value: def.initial });
+	const effectDisposals = [];
+	const wrapResult = (result) => {
+		if (!result) return void 0;
+		if (typeof result === "function") return result;
+		return () => result.abort();
+	};
+	const untracked = (baseCall) => () => untrack(baseCall);
+	const isTerminal = (snapshot) => snapshot.value === "destroying" || snapshot.value === "destroyed";
+	const descriptors = [...toArray(def.monitor).map((fn) => ({
+		fn: () => {
+			const target = fn();
+			if (target !== getState()) transition(target);
+		},
+		shouldSkip: isTerminal
+	})), ...Object.entries(def.states).flatMap(([state, stateDef]) => {
+		const isNotState = (snapshot) => snapshot.value !== state;
+		return [...toArray(stateDef.entry).map((fn) => ({
+			fn,
+			shouldSkip: isNotState,
+			toFnCall: untracked
+		})), ...toArray(stateDef.effects).map((fn) => ({
+			fn,
+			shouldSkip: isNotState
+		}))];
+	})];
+	const toEffect = ({ fn, shouldSkip, toFnCall = (baseCall) => baseCall }) => effect(() => {
+		if (shouldSkip(snapshotSignal.get())) return;
+		const baseCall = () => fn();
+		return wrapResult(toFnCall(baseCall)());
+	});
+	effectDisposals.push(...descriptors.map(toEffect));
+	return {
+		get snapshot() {
+			return snapshotSignal;
+		},
+		destroy() {
+			const state = getState();
+			if (state === "destroying" || state === "destroyed") return;
+			transition("destroying");
+			transition("destroyed");
+			for (const dispose of effectDisposals) dispose();
+		}
+	};
 }
+
+//#endregion
+//#region ../spf/dist/dev/dom/features/text-track-segment-loader-actor.js
 /**
-* Check if we can load text track cues.
+* Loads VTT segments for a text track and delegates cue management to a
+* TextTracksActor. Mirrors the SegmentLoaderActor/SourceBufferActor pattern
+* for the text track equivalent.
 *
-* Requires:
-* - Selected text track ID exists
-* - Track elements map exists
-* - Track element exists for selected track
+* Planning is done in the load handler: segments already recorded in
+* TextTracksActor's context are skipped. Each load preempts in-flight work
+* via abortAll() before scheduling fresh tasks.
 */
-function canLoadTextTrackCues(state, owners) {
-	return !!state.selectedTextTrackId && !!owners.textTracks && owners.textTracks.has(state.selectedTextTrackId);
+function createTextTrackSegmentLoaderActor(textTracksActor) {
+	const runner = new SerialRunner();
+	let destroyed = false;
+	return {
+		send({ track, currentTime }) {
+			if (destroyed) return;
+			const trackId = track.id;
+			const bufferedSegments = untrack(() => textTracksActor.snapshot.get().context.segments[trackId] ?? []);
+			const segmentsToLoad = getSegmentsToLoad(track.segments, bufferedSegments, currentTime);
+			runner.abortAll();
+			for (const segment of segmentsToLoad) runner.schedule(new Task(async (signal) => {
+				if (signal.aborted) return;
+				try {
+					const cues = await parseVttSegment(segment.url);
+					if (signal.aborted) return;
+					textTracksActor.send({
+						type: "add-cues",
+						meta: {
+							trackId,
+							id: segment.id,
+							startTime: segment.startTime,
+							duration: segment.duration
+						},
+						cues
+					});
+				} catch (error) {
+					console.error("Failed to load VTT segment:", error);
+				}
+			}));
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			runner.destroy();
+		}
+	};
 }
+
+//#endregion
+//#region ../spf/dist/dev/core/create-transition-actor.js
 /**
-* Check if we should load text track cues.
+* Creates a reducer-shaped actor from an initial context and a reducer function.
 *
-* Only load if:
-* - Track is resolved (has segments)
-* - Track has at least one segment
-* - Track element exists
+* The reducer receives the current context and a message and returns the next
+* context. Returning the same reference (by identity) skips the signal update —
+* so early-returning `context` unchanged is both the no-op and the optimization.
+*
+* Side effects (e.g. DOM mutations) may be performed inside the reducer.
+* They run synchronously before the signal is updated.
+*
+* @example
+* const actor = createTransitionActor(
+*   { count: 0 },
+*   (context, message: { type: 'increment' }) => ({ count: context.count + 1 })
+* );
 */
-function shouldLoadTextTrackCues(state, owners) {
-	if (!canLoadTextTrackCues(state, owners)) return false;
-	const track = findSelectedTextTrack(state);
-	if (!track || !isResolvedTrack(track) || track.segments.length === 0) return false;
-	if (!getSelectedTextTrackFromOwners(state, owners)) return false;
-	return true;
+function createTransitionActor(initialContext, reducer) {
+	const { snapshotSignal, getState, transition } = createMachineCore({
+		value: "active",
+		context: initialContext
+	});
+	const getContext = () => untrack(() => snapshotSignal.get().context);
+	const setContext = (context) => update(snapshotSignal, { context });
+	return {
+		get snapshot() {
+			return snapshotSignal;
+		},
+		send(message) {
+			if (getState() === "destroyed") return;
+			const context = getContext();
+			const newContext = reducer(context, message);
+			if (newContext !== context) setContext(newContext);
+		},
+		destroy() {
+			if (getState() === "destroyed") return;
+			transition("destroyed");
+		}
+	};
+}
+
+//#endregion
+//#region ../spf/dist/dev/dom/features/text-tracks-actor.js
+function isDuplicateCue(cue, existing) {
+	return existing.some((r) => r.startTime === cue.startTime && r.endTime === cue.endTime && r.text === cue.text);
+}
+/** TextTrack actor: wraps all text tracks on a media element, owns cue operations. */
+function createTextTracksActor(mediaElement) {
+	return createTransitionActor({
+		loaded: {},
+		segments: {}
+	}, (context, message) => {
+		const { meta, cues } = message;
+		const { trackId, id: segmentId, startTime, duration } = meta;
+		const textTrack = Array.from(mediaElement.textTracks).find((t) => t.id === trackId);
+		if (!textTrack) return context;
+		const existingCues = context.loaded[trackId] ?? [];
+		const existingSegments = context.segments[trackId] ?? [];
+		const prunedCues = cues.filter((cue) => !isDuplicateCue(cue, existingCues));
+		const segmentAlreadyLoaded = existingSegments.some((s) => s.id === segmentId);
+		if (prunedCues.length === 0 && segmentAlreadyLoaded) return context;
+		for (const cue of prunedCues) textTrack.addCue(cue);
+		return {
+			...context,
+			loaded: {
+				...context.loaded,
+				[trackId]: [...existingCues, ...prunedCues]
+			},
+			segments: segmentAlreadyLoaded ? context.segments : {
+				...context.segments,
+				[trackId]: [...existingSegments, {
+					id: segmentId,
+					startTime,
+					duration
+				}]
+			}
+		};
+	});
+}
+
+//#endregion
+//#region ../spf/dist/dev/dom/features/load-text-track-cues.js
+function getTextTracks(presentation) {
+	return presentation?.selectionSets?.find((s) => s.type === "text")?.switchingSets[0]?.tracks;
+}
+function findSelectedTrack(state) {
+	const track = getTextTracks(state.presentation)?.find((t) => t.id === state.selectedTextTrackId);
+	return track && isResolvedTrack(track) ? track : void 0;
+}
+/**
+* Derives the correct state from current state and owners.
+*
+* States are mutually exclusive and exhaustive:
+* - `'preconditions-unmet'`: no mediaElement, or no resolved presentation with text tracks
+* - `'setting-up'`:          preconditions met; actors not yet in owners
+* - `'pending'`:             actors alive; no selection, or selected track not yet resolved/in DOM
+* - `'monitoring-for-loads'`: selected track resolved, in DOM — ready to dispatch load messages
+*/
+function deriveState$2(state, owners) {
+	if (!owners.mediaElement || !getTextTracks(state.presentation)?.length) return "preconditions-unmet";
+	if (!owners.textTracksActor || !owners.segmentLoaderActor) return "setting-up";
+	const track = findSelectedTrack(state);
+	if (!track || track.segments.length === 0) return "pending";
+	if (!Array.from(owners.mediaElement.textTracks).some((t) => t.id === state.selectedTextTrackId)) return "pending";
+	return "monitoring-for-loads";
+}
+function teardownActors(owners) {
+	const { textTracksActor, segmentLoaderActor } = untrack(() => owners.get());
+	if (!textTracksActor && !segmentLoaderActor) return;
+	textTracksActor?.destroy();
+	segmentLoaderActor?.destroy();
+	update(owners, {
+		textTracksActor: void 0,
+		segmentLoaderActor: void 0
+	});
 }
 /**
-* Load text track cues orchestration.
+* Text track cue loading orchestration.
+*
+* A single `always` monitor keeps the reactor in sync with conditions.
+* Actor lifecycle is managed across two states:
 *
-* Triggers when:
-* - Text track is selected
-* - Track is resolved (has segments)
-* - Track element exists
+* - **`'setting-up'`** — creates `TextTracksActor` and `TextTrackSegmentLoaderActor`
+*   and writes them to owners. Entry resets any stale actors first.
+* - **`'preconditions-unmet'`** — destroys any actors in owners and resets them to
+*   `undefined`. Handles all paths back from active states.
+* - **`'monitoring-for-loads'`** — reactive dispatch: re-runs whenever `state`
+*   changes (selection, currentTime, presentation) and sends a `load` message to
+*   the segment loader.
 *
-* Fetches and parses VTT segments within the forward buffer window, then adds
-* cues to the track incrementally. Continues on segment errors to provide
-* partial subtitles.
+* **Destroy note:** actors written to owners are NOT auto-destroyed when
+* `reactor.destroy()` is called. Callers must read them from owners and destroy
+* them explicitly alongside the reactor.
 *
 * @example
-* const cleanup = loadTextTrackCues({ state, owners });
+* const reactor = loadTextTrackCues({ state, owners });
+* // later:
+* const { textTracksActor, segmentLoaderActor } = owners.get();
+* textTracksActor?.destroy();
+* segmentLoaderActor?.destroy();
+* reactor.destroy();
 */
 function loadTextTrackCues({ state, owners }) {
-	let currentTask = null;
-	let abortController = null;
-	let lastTrackId;
-	const selectedTrackId = computed(() => state.get().selectedTextTrackId);
-	const cleanupEffect = effect(() => {
-		const s = state.get();
-		const o = owners.get();
-		if (selectedTrackId.get() !== lastTrackId) {
-			lastTrackId = selectedTrackId.get();
-			abortController?.abort();
-			currentTask = null;
+	const derivedStateSignal = computed(() => deriveState$2(state.get(), owners.get()));
+	const currentTimeSignal = computed(() => state.get().currentTime ?? 0);
+	const selectedTrackSignal = computed(() => findSelectedTrack(state.get()));
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => derivedStateSignal.get(),
+		states: {
+			"preconditions-unmet": { entry: () => {
+				teardownActors(owners);
+			} },
+			"setting-up": { entry: () => {
+				teardownActors(owners);
+				const mediaElement = owners.get().mediaElement;
+				const textTracksActor = createTextTracksActor(mediaElement);
+				update(owners, {
+					textTracksActor,
+					segmentLoaderActor: createTextTrackSegmentLoaderActor(textTracksActor)
+				});
+			} },
+			pending: {},
+			"monitoring-for-loads": { effects: () => {
+				const currentTime = currentTimeSignal.get();
+				const track = selectedTrackSignal.get();
+				const { segmentLoaderActor } = untrack(() => owners.get());
+				segmentLoaderActor.send({
+					type: "load",
+					track,
+					currentTime
+				});
+			} }
 		}
-		if (currentTask) return;
-		if (!shouldLoadTextTrackCues(s, o)) return;
-		const textTrack = getSelectedTextTrackFromOwners(s, o);
-		if (!textTrack) return;
-		abortController = new AbortController();
-		currentTask = loadTextTrackCuesTask({ currentState: s }, {
-			signal: abortController.signal,
-			textTrack,
-			state
-		}).finally(() => {
-			currentTask = null;
-		});
 	});
-	return () => {
-		abortController?.abort();
-		cleanupEffect();
-	};
 }
 
 //#endregion
@@ -1609,49 +2119,62 @@ function trackCurrentTime({ state, owners }) {
 //#endregion
 //#region ../spf/dist/dev/dom/features/track-playback-initiated.js
 /**
+* FSM states for playback initiation tracking.
+*
+* ```
+* 'preconditions-unmet' ──── element + URL ────→ 'monitoring'
+*         ↑                        ↑                  │
+*         │   preconditions lost   │             play / !paused
+*         │                        │                  ↓
+*         └────────────── 'playback-initiated' ←──────┘
+*                (exit cleanup resets state.playbackInitiated → false)
+*
+* any state ──── destroy() ────→ 'destroying' ────→ 'destroyed'
+* ```
+*/
+function deriveState$1(state, owners) {
+	if (!owners.mediaElement || !state.presentation?.url) return "preconditions-unmet";
+	if (state.playbackInitiated) return "playback-initiated";
+	return "monitoring";
+}
+/**
 * Track whether playback has been initiated for the current presentation URL.
 *
-* Uses a local intermediate signal written by two effect streams:
-* - false stream: resets on URL change
-* - true stream: sets on play event
-*
-* A third merge effect reads the local signal and writes to state, reading
-* `state.get()` at merge time so the spread uses the up-to-date value after
-* the async forward bridge has run.
+* A three-state Reactor FSM driven by `state.playbackInitiated` and the
+* `deriveState` pattern:
+* - `'preconditions-unmet'` — no element or URL yet; no effects.
+* - `'monitoring'` — checks `!el.paused` on entry; listens for `play`.
+* - `'playback-initiated'` — tracks element and URL; exit cleanup resets
+*   `state.playbackInitiated` to `false` on any change or lost preconditions.
 *
 * @example
-* const cleanup = trackPlaybackInitiated({ state, owners, events });
+* const reactor = trackPlaybackInitiated({ state, owners });
+* // later:
+* reactor.destroy();
 */
 function trackPlaybackInitiated({ state, owners }) {
-	const presentationUrl = computed(() => state.get().presentation?.url);
-	const mediaElement = computed(() => owners.get().mediaElement);
-	const playbackInitiated = signal(void 0);
-	let lastPresentationUrl;
-	let lastMediaElement;
-	const cleanupResetEffect = effect(() => {
-		const url = presentationUrl.get();
-		const el = mediaElement.get();
-		if (url !== lastPresentationUrl && lastPresentationUrl !== void 0 || el !== lastMediaElement && lastMediaElement !== void 0) playbackInitiated.set(false);
-		lastPresentationUrl = url;
-		lastMediaElement = el;
-	});
-	const cleanupPlayEffect = effect(() => {
-		const el = mediaElement.get();
-		if (!el) return;
-		return listen(el, "play", () => {
-			playbackInitiated.set(true);
-		});
-	});
-	const cleanupMergeEffect = effect(() => {
-		const pi = playbackInitiated.get();
-		if (pi === void 0) return;
-		if (state.get().playbackInitiated !== pi) update(state, { playbackInitiated: pi });
+	const derivedStateSignal = computed(() => deriveState$1(state.get(), owners.get()));
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const urlSignal = computed(() => state.get().presentation?.url);
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => derivedStateSignal.get(),
+		states: {
+			"preconditions-unmet": {},
+			monitoring: { entry: () => {
+				const el = mediaElementSignal.get();
+				update(state, { playbackInitiated: !el.paused });
+				return listen(el, "play", () => {
+					update(state, { playbackInitiated: !el.paused });
+				});
+			} },
+			"playback-initiated": { effects: () => {
+				mediaElementSignal.get();
+				urlSignal.get();
+				return () => update(state, { playbackInitiated: false });
+			} }
+		}
 	});
-	return () => {
-		cleanupResetEffect();
-		cleanupPlayEffect();
-		cleanupMergeEffect();
-	};
 }
 
 //#endregion
@@ -1927,25 +2450,6 @@ function switchQuality({ state }, config = {}) {
 	});
 }
 
-//#endregion
-//#region ../spf/dist/dev/core/utils/generate-id.js
-/**
-* Generate unique ID for HAM objects.
-*
-* Uses timestamp + random number for sufficient uniqueness.
-* IDs are strings without decimals.
-*
-* @returns Unique string ID in format: timestamp-random
-*
-* @example
-* ```ts
-* const id = generateId();  // "1738423156789-542891"
-* ```
-*/
-function generateId() {
-	return `${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
-}
-
 //#endregion
 //#region ../spf/dist/dev/core/hls/parse-attributes.js
 /**
@@ -2299,15 +2803,6 @@ function parseMultivariantPlaylist(text, unresolved) {
 //#endregion
 //#region ../spf/dist/dev/core/features/resolve-presentation.js
 /**
-* Type guard to check if presentation is unresolved.
-*/
-function isUnresolved(presentation) {
-	return presentation !== void 0 && "url" in presentation && !("id" in presentation);
-}
-function canResolve$1(state) {
-	return isUnresolved(state.presentation);
-}
-/**
 * Determines if resolution conditions are met based on preload policy and playback state.
 *
 * Resolution conditions:
@@ -2322,49 +2817,54 @@ function shouldResolve(state) {
 	return ["auto", "metadata"].includes(preload) || !!playbackInitiated;
 }
 /**
+* Derives the correct state from current state conditions.
+*
+* States are mutually exclusive and exhaustive:
+* - `'preconditions-unmet'`: no presentation, or presentation has no URL
+* - `'idle'`:     URL present, unresolved (no id), shouldResolve not met
+* - `'resolving'`: URL present, unresolved (no id), shouldResolve met
+* - `'resolved'`:  URL present, resolved (has id)
+*/
+function deriveState(state) {
+	const { presentation } = state;
+	if (!presentation || !("url" in presentation)) return "preconditions-unmet";
+	if ("id" in presentation) return "resolved";
+	return shouldResolve(state) ? "resolving" : "idle";
+}
+/**
 * Resolves unresolved presentations using reactive composition.
 *
-* Triggers resolution when:
-* - State-driven: Unresolved presentation + preload allows (auto/metadata)
-* - Playback-driven: playbackInitiated is true
+* FSM driven by `deriveState` — a single `always` monitor keeps the state in
+* sync with conditions at all times. `'resolving'` additionally runs the fetch
+* task and returns an AbortController so the framework aborts it on state exit.
 *
 * @example
-* ```ts
-* const state = signal({ presentation: undefined, preload: 'auto', playbackInitiated: false });
-*
-* const cleanup = resolvePresentation({ state });
-*
-* // State-driven: resolves immediately when preload allows
-* state.set({ ...state.get(), presentation: { url: 'http://example.com/playlist.m3u8' } });
-*
-* // Playback-driven: resolves when playbackInitiated is set
-* state.set({ ...state.get(), preload: 'none', presentation: { url: '...' }, playbackInitiated: true });
-* ```
+* const reactor = resolvePresentation({ state });
+* // later:
+* reactor.destroy();
 */
 function resolvePresentation({ state }) {
-	const canResolveSignal = computed(() => canResolve$1(state.get()));
-	const shouldResolveSignal = computed(() => shouldResolve(state.get()));
-	let resolving = false;
-	let abortController = null;
-	const cleanupEffect = effect(() => {
-		if (!canResolveSignal.get() || !shouldResolveSignal.get() || resolving) return;
-		const presentation = state.get().presentation;
-		resolving = true;
-		abortController = new AbortController();
-		fetchResolvable(presentation, { signal: abortController.signal }).then((response) => getResponseText(response)).then((text) => {
-			update(state, { presentation: parseMultivariantPlaylist(text, presentation) });
-		}).catch((error) => {
-			if (error instanceof Error && error.name === "AbortError") return;
-			throw error;
-		}).finally(() => {
-			resolving = false;
-			abortController = null;
-		});
+	const derivedStateSignal = computed(() => deriveState(state.get()));
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => derivedStateSignal.get(),
+		states: {
+			"preconditions-unmet": {},
+			idle: {},
+			resolving: { entry: () => {
+				const presentation = state.get().presentation;
+				const ac = new AbortController();
+				fetchResolvable(presentation, { signal: ac.signal }).then((response) => getResponseText(response)).then((text) => {
+					update(state, { presentation: parseMultivariantPlaylist(text, presentation) });
+				}).catch((error) => {
+					if (error instanceof Error && error.name === "AbortError") return;
+					throw error;
+				});
+				return ac;
+			} },
+			resolved: {}
+		}
 	});
-	return () => {
-		abortController?.abort();
-		cleanupEffect();
-	};
 }
 
 //#endregion
@@ -2445,124 +2945,6 @@ function parseMediaPlaylist(text, unresolved) {
 	};
 }
 
-//#endregion
-//#region ../spf/dist/dev/core/task.js
-/**
-* Generic reusable task that wraps an async run function.
-*
-* Owns its own AbortController so it can always be aborted independently.
-* Optionally composes an external AbortSignal so that a parent's cancellation
-* propagates into the task's work without requiring the caller to track the
-* task separately.
-*
-* Ordering guarantee: `value` is written before `status` transitions to `'done'`;
-* `error` is written before `status` transitions to `'error'`. Any reader
-* observing `status === 'done'` is guaranteed `value` is already present.
-*/
-var Task = class {
-	id;
-	#runFn;
-	#abortController = new AbortController();
-	#signal;
-	#status = "pending";
-	#value = void 0;
-	#error = void 0;
-	constructor(runFn, config) {
-		this.#runFn = runFn;
-		const rawId = config?.id;
-		this.id = typeof rawId === "function" ? rawId() : rawId ?? generateId();
-		this.#signal = config?.signal ? anyAbortSignal([this.#abortController.signal, config.signal]) : this.#abortController.signal;
-	}
-	get status() {
-		return this.#status;
-	}
-	get value() {
-		return this.#value;
-	}
-	get error() {
-		return this.#error;
-	}
-	async run() {
-		this.#status = "running";
-		try {
-			const result = await this.#runFn(this.#signal);
-			this.#value = result;
-			this.#status = "done";
-			return result;
-		} catch (e) {
-			this.#error = e;
-			this.#status = "error";
-			throw e;
-		}
-	}
-	abort() {
-		this.#abortController.abort();
-	}
-};
-/**
-* Runs tasks concurrently, deduplicated by task id.
-*
-* If a task with a given id is already in flight, subsequent schedule() calls
-* for that id are silently ignored until the first completes. Tasks are stored
-* so abortAll() can cancel any in-flight work (e.g. on engine cleanup).
-*/
-var ConcurrentRunner = class {
-	#pending = /* @__PURE__ */ new Map();
-	schedule(task) {
-		if (this.#pending.has(task.id)) return;
-		this.#pending.set(task.id, task);
-		task.run().catch((error) => {
-			if (!(error instanceof Error && error.name === "AbortError")) throw error;
-		}).finally(() => {
-			this.#pending.delete(task.id);
-		});
-	}
-	abortAll() {
-		for (const task of this.#pending.values()) task.abort();
-		this.#pending.clear();
-	}
-};
-/**
-* Runs tasks one at a time in submission order.
-*
-* Each schedule() call returns a Promise that resolves or rejects with the
-* task's result when it is eventually executed. Tasks wait in queue until the
-* prior task completes.
-*
-* Serialization is achieved by chaining each task's run() onto the tail of a
-* shared promise chain — no explicit queue or drain loop needed.
-*
-* abortAll() aborts all pending (not yet started) tasks and the currently
-* in-flight task. Pending tasks still run briefly but receive an aborted
-* signal and are expected to exit early.
-*/
-var SerialRunner = class {
-	#chain = Promise.resolve();
-	#pending = /* @__PURE__ */ new Set();
-	#current = null;
-	schedule(task) {
-		const t = task;
-		this.#pending.add(t);
-		const result = this.#chain.then(() => {
-			this.#pending.delete(t);
-			this.#current = t;
-			return task.run();
-		}).finally(() => {
-			this.#current = null;
-		});
-		this.#chain = result.then(() => {}, () => {});
-		return result;
-	}
-	abortAll() {
-		for (const task of this.#pending) task.abort();
-		this.#pending.clear();
-		this.#current?.abort();
-	}
-	destroy() {
-		this.abortAll();
-	}
-};
-
 //#endregion
 //#region ../spf/dist/dev/core/features/resolve-track.js
 function canResolve(state, config) {
@@ -2820,8 +3202,8 @@ function shouldEndStream(state, owners) {
 	const hasAudioTrack = !!state.selectedAudioTrackId;
 	if (hasVideoTrack && !owners.videoBuffer) return false;
 	if (hasAudioTrack && !owners.audioBuffer) return false;
-	if (owners.videoBufferActor?.snapshot.get().status === "updating") return false;
-	if (owners.audioBufferActor?.snapshot.get().status === "updating") return false;
+	if (owners.videoBufferActor?.snapshot.get().value === "updating") return false;
+	if (owners.audioBufferActor?.snapshot.get().value === "updating") return false;
 	if (!hasLastSegmentLoaded(state, owners)) return false;
 	if (mediaElement) {
 		const videoTrack = hasVideoTrack ? getSelectedTrack(state, "video") : void 0;
@@ -2836,17 +3218,17 @@ function shouldEndStream(state, owners) {
 }
 /**
 * Wait for all currently-updating SourceBufferActors to finish.
-* Uses actor status rather than raw SourceBuffer.updating so the wait is
+* Uses actor state rather than raw SourceBuffer.updating so the wait is
 * aligned with the same abstraction that owns all buffer operations.
 */
 function waitForSourceBuffersReady$1(owners) {
-	const updatingActors = [owners.videoBufferActor, owners.audioBufferActor].filter((actor) => actor !== void 0 && actor.snapshot.get().status === "updating");
+	const updatingActors = [owners.videoBufferActor, owners.audioBufferActor].filter((actor) => actor !== void 0 && actor.snapshot.get().value === "updating");
 	if (updatingActors.length === 0) return Promise.resolve();
 	return Promise.all(updatingActors.map((actor) => new Promise((resolve) => {
 		let cleanup;
 		let resolved = false;
 		cleanup = effect(() => {
-			if (actor.snapshot.get().status !== "updating") {
+			if (actor.snapshot.get().value !== "updating") {
 				if (!resolved) {
 					resolved = true;
 					resolve();
@@ -3095,16 +3477,6 @@ function setupMediaSource({ state, owners }) {
 
 //#endregion
 //#region ../spf/dist/dev/dom/media/source-buffer-actor.js
-/**
-* Thrown when a message is sent to the actor in a state that does not
-* accept messages (currently: 'updating').
-*/
-var SourceBufferActorError = class extends Error {
-	constructor(message) {
-		super(message);
-		this.name = "SourceBufferActorError";
-	}
-};
 function snapshotBuffered(buffered) {
 	const ranges = [];
 	for (let i = 0; i < buffered.length; i++) ranges.push({
@@ -3113,25 +3485,25 @@ function snapshotBuffered(buffered) {
 	});
 	return ranges;
 }
-function appendInitTask(message, { signal, getCtx, sourceBuffer }) {
+function appendInitTask(message, { getContext, sourceBuffer }) {
 	return new Task(async (taskSignal) => {
-		const ctx = getCtx();
+		const ctx = getContext();
 		if (taskSignal.aborted) return ctx;
 		await appendSegment(sourceBuffer, message.data);
 		return {
 			...ctx,
 			initTrackId: message.meta.trackId
 		};
-	}, { signal });
+	});
 }
-function appendSegmentTask(message, { signal, getCtx, sourceBuffer, onPartialContext }) {
+function appendSegmentTask(message, { getContext, sourceBuffer, setContext }) {
 	return new Task(async (taskSignal) => {
-		const ctx = getCtx();
+		const ctx = getContext();
 		if (taskSignal.aborted) return ctx;
 		const { meta } = message;
 		const EPSILON = 1e-4;
 		const filtered = ctx.segments.filter((s) => Math.abs(s.startTime - meta.startTime) >= EPSILON);
-		if (!(message.data instanceof ArrayBuffer)) onPartialContext({
+		if (!(message.data instanceof ArrayBuffer)) setContext({
 			...ctx,
 			segments: [...filtered, {
 				id: meta.id,
@@ -3155,11 +3527,11 @@ function appendSegmentTask(message, { signal, getCtx, sourceBuffer, onPartialCon
 			}],
 			bufferedRanges: snapshotBuffered(sourceBuffer.buffered)
 		};
-	}, { signal });
+	});
 }
-function removeTask(message, { signal, getCtx, sourceBuffer }) {
+function removeTask(message, { getContext, sourceBuffer }) {
 	return new Task(async (taskSignal) => {
-		const ctx = getCtx();
+		const ctx = getContext();
 		if (taskSignal.aborted) return ctx;
 		await flushBuffer(sourceBuffer, message.start, message.end);
 		const bufferedRanges = snapshotBuffered(sourceBuffer.buffered);
@@ -3172,7 +3544,7 @@ function removeTask(message, { signal, getCtx, sourceBuffer }) {
 			segments: filtered,
 			bufferedRanges
 		};
-	}, { signal });
+	});
 }
 const messageTaskFactories = {
 	"append-init": appendInitTask,
@@ -3184,83 +3556,54 @@ function messageToTask(message, options) {
 	return factory(message, options);
 }
 function createSourceBufferActor(sourceBuffer, initialContext) {
-	const snapshotSignal = signal({
-		status: "idle",
+	const handleError = (e) => {
+		if (!(e instanceof Error && e.name === "AbortError")) console.error("SourceBuffer operation failed:", e);
+	};
+	const onMessage = (msg, { transition, setContext, getContext, runner }) => {
+		transition("updating");
+		const task = messageToTask(msg, {
+			getContext,
+			sourceBuffer,
+			setContext
+		});
+		runner.schedule(task).then(setContext, handleError);
+	};
+	return createMachineActor({
+		runner: () => new SerialRunner(),
+		initial: "idle",
 		context: {
 			segments: [],
 			bufferedRanges: [],
 			initTrackId: void 0,
 			...initialContext
-		}
-	});
-	const runner = new SerialRunner();
-	function applyResult(newContext) {
-		const status = snapshotSignal.get().status === "destroyed" ? "destroyed" : "idle";
-		snapshotSignal.set({
-			status,
-			context: newContext
-		});
-	}
-	function handleError(e) {
-		update(snapshotSignal, { status: snapshotSignal.get().status === "destroyed" ? "destroyed" : "idle" });
-		throw e;
-	}
-	return {
-		get snapshot() {
-			return snapshotSignal;
-		},
-		send(message, signal) {
-			if (snapshotSignal.get().status !== "idle") return Promise.reject(new SourceBufferActorError(`send() called while actor is ${snapshotSignal.get().status}`));
-			update(snapshotSignal, { status: "updating" });
-			const onPartialContext = (ctx) => {
-				snapshotSignal.set({
-					status: "updating",
-					context: ctx
-				});
-			};
-			const task = messageToTask(message, {
-				signal,
-				getCtx: () => snapshotSignal.get().context,
-				sourceBuffer,
-				onPartialContext
-			});
-			return runner.schedule(task).then(applyResult).catch(handleError);
 		},
-		batch(messages, signal) {
-			if (snapshotSignal.get().status !== "idle") return Promise.reject(new SourceBufferActorError(`batch() called while actor is ${snapshotSignal.get().status}`));
-			if (messages.length === 0) return Promise.resolve();
-			update(snapshotSignal, { status: "updating" });
-			let workingCtx = snapshotSignal.get().context;
-			const onPartialContext = (ctx) => {
-				snapshotSignal.set({
-					status: "updating",
-					context: ctx
-				});
-			};
-			for (const message of messages.slice(0, -1)) {
-				const task = messageToTask(message, {
-					signal,
-					getCtx: () => workingCtx,
-					sourceBuffer,
-					onPartialContext
-				});
-				runner.schedule(task).then((newCtx) => {
-					workingCtx = newCtx;
-				});
+		states: {
+			idle: { on: {
+				"append-init": onMessage,
+				"append-segment": onMessage,
+				remove: onMessage,
+				batch: (msg, { transition, setContext, getContext, runner }) => {
+					const { messages } = msg;
+					if (messages.length === 0) return;
+					transition("updating");
+					messages.forEach((msg) => {
+						const task = messageToTask(msg, {
+							getContext,
+							sourceBuffer,
+							setContext
+						});
+						runner.schedule(task).then(setContext, handleError);
+					});
+				}
+			} },
+			updating: {
+				onSettled: "idle",
+				on: { cancel: (_, { runner }) => {
+					runner.abortAll();
+				} }
 			}
-			const lastTask = messageToTask(messages[messages.length - 1], {
-				signal,
-				getCtx: () => workingCtx,
-				sourceBuffer,
-				onPartialContext
-			});
-			return runner.schedule(lastTask).then(applyResult).catch(handleError);
-		},
-		destroy() {
-			update(snapshotSignal, { status: "destroyed" });
-			runner.destroy();
 		}
-	};
+	});
 }
 
 //#endregion
@@ -3334,143 +3677,92 @@ function setupSourceBuffers({ state, owners }) {
 }
 
 //#endregion
-//#region ../spf/dist/dev/dom/features/setup-text-tracks.js
-/**
-* Create a track element for a text track.
-*
-* Note: We use DOM <track> elements instead of the TextTrack JS API
-* because there's no way to remove TextTracks added via addTextTrack().
-*/
+//#region ../spf/dist/dev/dom/features/sync-text-tracks.js
 function createTrackElement(track) {
-	const trackElement = document.createElement("track");
-	trackElement.id = track.id;
-	trackElement.kind = track.kind;
-	trackElement.label = track.label;
-	if (track.language) trackElement.srclang = track.language;
-	if (track.default) trackElement.default = true;
-	trackElement.src = track.url;
-	return trackElement;
+	const el = document.createElement("track");
+	el.id = track.id;
+	el.kind = track.kind;
+	el.label = track.label;
+	el.toggleAttribute("data-src-track", true);
+	if (track.language) el.srclang = track.language;
+	if (track.default) el.default = true;
+	return el;
+}
+function getModelTextTracks(presentation) {
+	return presentation?.selectionSets?.find((s) => s.type === "text")?.switchingSets[0]?.tracks;
+}
+function syncModes(textTracks, selectedId) {
+	for (let i = 0; i < textTracks.length; i++) {
+		const track = textTracks[i];
+		if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+		track.mode = track.id === selectedId ? "showing" : "disabled";
+	}
 }
 /**
-* Setup text tracks orchestration.
+* Text track sync orchestration.
 *
-* Triggers when:
-* - mediaElement exists
-* - presentation is resolved (has text tracks)
+* A single `always` monitor keeps the reactor in sync with preconditions.
+* `'set-up'` owns the full lifecycle of `<track>` elements:
 *
-* Creates <track> elements for all text tracks and adds them as children
-* to the media element. This allows the browser's native text track rendering.
-*
-* Note: Uses DOM track elements instead of TextTrack API because tracks
-* added via addTextTrack() cannot be removed.
+* - **Effect 1** — creates `<track>` elements on entry; exit cleanup removes
+*   them and clears `selectedTextTrackId` on any outbound transition.
+* - **Effect 2** — owns mode sync, the Chromium settling-window guard, and
+*   the `'change'` listener that bridges DOM state back to
+*   `selectedTextTrackId`.
 *
 * @example
-* const cleanup = setupTextTracks({ state, owners });
+* const reactor = syncTextTracks({ state, owners });
+* // later:
+* reactor.destroy();
 */
-function setupTextTracks({ state, owners }) {
-	const modelTextTracksSignal = computed(() => state.get().presentation?.selectionSets?.find((selectionSet) => selectionSet.type === "text")?.switchingSets[0]?.tracks, { equals(prevTextTracks, nextTextTracks) {
+function syncTextTracks({ state, owners }) {
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const modelTextTracksSignal = computed(() => getModelTextTracks(state.get().presentation), { equals(prevTextTracks, nextTextTracks) {
 		if (prevTextTracks === nextTextTracks) return true;
 		if (typeof prevTextTracks !== typeof nextTextTracks) return false;
 		if (prevTextTracks?.length !== nextTextTracks?.length) return false;
 		return !!nextTextTracks && nextTextTracks.every((nextTextTrack) => prevTextTracks?.some((prevTextTrack) => prevTextTrack.id === nextTextTrack.id));
 	} });
-	const ownerTextTracksSignal = computed(() => owners.get().textTracks);
-	const mediaElementSignal = computed(() => owners.get().mediaElement);
-	const canSetupTextTracksSignal = computed(() => !!mediaElementSignal.get() && modelTextTracksSignal.get()?.length);
-	const shouldSetupTextTracksSignal = computed(() => !ownerTextTracksSignal.get());
-	const cleanupEffect = effect(() => {
-		if (!canSetupTextTracksSignal.get() || !shouldSetupTextTracksSignal.get()) return;
-		const mediaElement = mediaElementSignal.get();
-		const modelTextTracks = modelTextTracksSignal.get();
-		const trackMap = /* @__PURE__ */ new Map();
-		modelTextTracks.forEach((modelTextTrack) => {
-			const trackElement = createTrackElement(modelTextTrack);
-			mediaElement.appendChild(trackElement);
-			trackMap.set(modelTextTrack.id, trackElement);
-		});
-		if (trackMap.size) update(owners, { textTracks: trackMap });
-	});
-	return () => {
-		owners.get().textTracks?.forEach((trackElement) => trackElement.remove());
-		cleanupEffect();
-	};
-}
-
-//#endregion
-//#region ../spf/dist/dev/dom/features/sync-selected-text-track-from-dom.js
-/**
-* Sync selectedTextTrackId from DOM text track mode changes.
-*
-* Listens to the `change` event on `media.textTracks` and updates
-* `selectedTextTrackId` when external code (e.g. the captions button via
-* `toggleSubtitles()`) changes a subtitle/caption track mode to 'showing'.
-*
-* This bridges the core store's `toggleSubtitles()` with SPF's reactive text
-* track pipeline (`syncTextTrackModes`, `loadTextTrackCues`). Without this
-* bridge, direct DOM mode changes would be immediately overridden by
-* `syncTextTrackModes` on the next SPF state update.
-*
-* When a subtitle/caption track's mode is 'showing', its DOM `id` — which
-* matches the SPF track ID set by `setupTextTracks` — is written to
-* `selectedTextTrackId`. When no subtitle/caption track is 'showing',
-* `selectedTextTrackId` is cleared along with the deselected track's
-* `textBufferState` entry — setting mode to 'disabled' clears native cues from
-* the track element, so the buffer must be reset to re-fetch cues on re-enable.
-*
-* @example
-* const cleanup = syncSelectedTextTrackFromDom({ state, owners });
-*/
-function syncSelectedTextTrackFromDom({ state, owners }) {
-	const mediaElement = computed(() => owners.get().mediaElement);
-	return effect(() => {
-		const el = mediaElement.get();
-		if (!el) return;
-		return listen(el.textTracks, "change", () => {
-			const newId = Array.from(el.textTracks).find((t) => t.mode === "showing" && (t.kind === "subtitles" || t.kind === "captions"))?.id || void 0;
-			const current = state.get();
-			if (current.selectedTextTrackId === newId) return;
-			if (newId) update(state, { selectedTextTrackId: newId });
-			else {
-				const prevId = current.selectedTextTrackId;
-				if (prevId && current.textBufferState?.[prevId]) {
-					const next = { ...current.textBufferState };
-					delete next[prevId];
-					update(state, {
-						selectedTextTrackId: void 0,
-						textBufferState: next
-					});
-				} else update(state, { selectedTextTrackId: void 0 });
-			}
-		});
-	});
-}
-
-//#endregion
-//#region ../spf/dist/dev/dom/features/sync-text-track-modes.js
-/**
-* Sync text track modes orchestration.
-*
-* Manages track element modes based on selectedTextTrackId:
-* - Selected track: mode = "showing"
-* - Other tracks: mode = "hidden"
-* - No selection: all tracks mode = "hidden"
-*
-* Note: Uses "hidden" instead of "disabled" for non-selected tracks
-* so they remain available in the browser's track menu.
-*
-* @example
-* const cleanup = syncTextTrackModes({ state, owners });
-*/
-function syncTextTrackModes({ state, owners }) {
-	const textTracksSignal = computed(() => owners.get().textTracks);
 	const selectedTextTrackIdSignal = computed(() => state.get().selectedTextTrackId);
-	const canSyncTextTrackModes = computed(() => !!textTracksSignal.get()?.size);
-	return effect(() => {
-		if (!canSyncTextTrackModes.get()) return;
-		/** @TODO refactor TextTracks owners model. Should simply use id. Also should use corresponding TextTrack (JS) element if possible (CJP) */
-		const textTracks = textTracksSignal.get();
-		const selectedTextTrackId = selectedTextTrackIdSignal.get();
-		for (const [trackId, trackElement] of textTracks) trackElement.track.mode = trackId === selectedTextTrackId ? "showing" : "hidden";
+	const preconditionsMetSignal = computed(() => !!mediaElementSignal.get() && !!modelTextTracksSignal.get()?.length);
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => preconditionsMetSignal.get() ? "set-up" : "preconditions-unmet",
+		states: {
+			"preconditions-unmet": {},
+			"set-up": {
+				entry: () => {
+					const mediaElement = mediaElementSignal.get();
+					modelTextTracksSignal.get().forEach((track) => mediaElement.appendChild(createTrackElement(track)));
+					return () => {
+						mediaElement.querySelectorAll("track[data-src-track]:is([kind=\"subtitles\"],[kind=\"captions\"]").forEach((trackEl) => trackEl.remove());
+						update(state, { selectedTextTrackId: void 0 });
+					};
+				},
+				effects: () => {
+					const mediaElement = untrack(() => mediaElementSignal.get());
+					const selectedId = selectedTextTrackIdSignal.get();
+					syncModes(mediaElement.textTracks, selectedId);
+					let syncTimeout = setTimeout(() => {
+						syncTimeout = void 0;
+					}, 0);
+					const onChange = () => {
+						if (syncTimeout) {
+							syncModes(mediaElement.textTracks, untrack(() => selectedTextTrackIdSignal.get()));
+							return;
+						}
+						const newId = Array.from(mediaElement.textTracks).find((t) => t.mode === "showing" && (t.kind === "subtitles" || t.kind === "captions"))?.id;
+						if (newId === untrack(() => selectedTextTrackIdSignal.get())) return;
+						update(state, { selectedTextTrackId: newId });
+					};
+					const unlisten = listen(mediaElement.textTracks, "change", onChange);
+					return () => {
+						clearTimeout(syncTimeout ?? void 0);
+						unlisten();
+					};
+				}
+			}
+		}
 	});
 }
 
@@ -3651,15 +3943,7 @@ function createPlaybackEngine(config = {}) {
 			state,
 			owners
 		}),
-		setupTextTracks({
-			state,
-			owners
-		}),
-		syncTextTrackModes({
-			state,
-			owners
-		}),
-		syncSelectedTextTrackFromDom({
+		syncTextTracks({
 			state,
 			owners
 		}),
@@ -3672,7 +3956,8 @@ function createPlaybackEngine(config = {}) {
 		state,
 		owners,
 		destroy: () => {
-			cleanups.forEach((cleanup) => cleanup());
+			cleanups.forEach((cleanup) => typeof cleanup === "function" ? cleanup() : cleanup.destroy());
+			for (const value of Object.values(owners.get())) if (value !== null && typeof value === "object" && typeof value.destroy === "function") value.destroy();
 			destroyVttParser();
 		}
 	};