diff --git a/demo/web/src/discover.ts b/demo/web/src/discover.ts
index 0c2b8f50f..efde1122a 100644
--- a/demo/web/src/discover.ts
+++ b/demo/web/src/discover.ts
@@ -1,4 +1,4 @@
-import { Moq, Signals } from "@moq/hang";
+import { Signals } from "@moq/hang";
 import type MoqWatch from "@moq/watch/element";
 
 /**
@@ -31,7 +31,7 @@ export default class MoqDiscover extends HTMLElement {
 		// Reactively render suggestions when broadcasts or selected name changes.
 		this.#signals.run((effect) => {
 			const broadcasts = effect.get(watch.connection.announced);
-			const selected = effect.get(watch.broadcast.name).toString();
+			const selected = effect.get(watch.broadcast.input.name).toString();
 
 			this.#clearSuggestions();
 
@@ -69,7 +69,7 @@ export default class MoqDiscover extends HTMLElement {
 					});
 				}
 				tag.addEventListener("click", () => {
-					watch.broadcast.name.set(Moq.Path.from(name));
+					watch.name = name;
 				});
 				this.#suggestions.appendChild(tag);
 			}
diff --git a/js/hang/src/container/consumer.ts b/js/hang/src/container/consumer.ts
index 5a67fb9b8..50f6367ed 100644
--- a/js/hang/src/container/consumer.ts
+++ b/js/hang/src/container/consumer.ts
@@ -1,14 +1,15 @@
 import type { Time } from "@moq/net";
 import * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, Signal } from "@moq/signals";
 
 import type { Format } from "./format";
 import type { BufferedRanges, Frame } from "./types";
 
 export interface ConsumerProps {
 	format: Format;
-	// Target latency in milliseconds (default: 0)
-	latency?: Signal<Time.Milli> | Time.Milli;
+	// Target latency in milliseconds (default: 0). Read-only: a Getter (e.g. another
+	// component's output) is accepted directly.
+	latency?: Getter<Time.Milli> | Time.Milli;
 }
 
 interface Group {
@@ -22,7 +23,7 @@ interface Group {
 export class Consumer {
 	#track: Moq.Track;
 	#format: Format;
-	#latency: Signal<Time.Milli>;
+	#latency: Getter<Time.Milli>;
 	#groups: Group[] = [];
 	#active?: number; // the active group sequence number
 
@@ -37,7 +38,7 @@ export class Consumer {
 	constructor(track: Moq.Track, props: ConsumerProps) {
 		this.#track = track;
 		this.#format = props.format;
-		this.#latency = Signal.from(props.latency ?? Moq.Time.Milli.zero);
+		this.#latency = getter(props.latency ?? Moq.Time.Milli.zero);
 
 		this.#signals.spawn(this.#run.bind(this));
 		this.#signals.cleanup(() => {
diff --git a/js/moq-boy/src/index.ts b/js/moq-boy/src/index.ts
index 80d246711..ebf29f6a2 100644
--- a/js/moq-boy/src/index.ts
+++ b/js/moq-boy/src/index.ts
@@ -75,6 +75,13 @@ export class Game {
 	readonly status = new Moq.Signals.Signal<GameStatus | undefined>(undefined);
 	readonly viewerId = new Moq.Signals.Signal<string | undefined>(undefined);
 
+	// The canvas to render into, owned here and wired into the renderer (read-only there).
+	// The UI sets this once the <canvas> is mounted.
+	readonly canvas = new Moq.Signals.Signal<HTMLCanvasElement | undefined>(undefined);
+
+	// The video rendition target, owned here and wired into the video source as an input.
+	readonly #target = new Moq.Signals.Signal<Watch.Video.Target | undefined>(undefined);
+
 	// Watch API objects — exposed so UI can access canvas, etc.
 	readonly broadcast: Watch.Broadcast;
 	readonly sync: Watch.Sync;
@@ -110,30 +117,37 @@ export class Game {
 		});
 		this.#signals.cleanup(() => this.broadcast.close());
 
-		this.sync = new Watch.Sync({ latency: this.latency, connection: connection.established });
-		this.#signals.cleanup(() => this.sync.close());
-
-		this.videoSource = new Watch.Video.Source(this.sync, { broadcast: this.broadcast });
+		// Sources no longer depend on Sync; they produce the per-rendition jitter that
+		// Sync consumes, so they're created first to avoid a construction cycle.
+		this.videoSource = new Watch.Video.Source({ broadcast: this.broadcast, target: this.#target });
 		this.#signals.cleanup(() => this.videoSource.close());
 
+		this.audioSource = new Watch.Audio.Source({ broadcast: this.broadcast });
+		this.#signals.cleanup(() => this.audioSource.close());
+
+		this.sync = new Watch.Sync({
+			latency: this.latency,
+			connection: connection.established,
+			video: this.videoSource.output.jitter,
+			audio: this.audioSource.output.jitter,
+		});
+		this.#signals.cleanup(() => this.sync.close());
+
 		this.#signals.run(this.#runPixelBudget.bind(this));
 
 		// Video is enabled on the grid or when this game is expanded.
 		const videoEnabled = new Moq.Signals.Signal(true);
 		this.#signals.run(this.#runVideoEnabled.bind(this, videoEnabled));
 
-		this.videoDecoder = new Watch.Video.Decoder(this.videoSource, { enabled: videoEnabled });
+		this.videoDecoder = new Watch.Video.Decoder(this.videoSource, this.sync, { enabled: videoEnabled });
 		this.#signals.cleanup(() => this.videoDecoder.close());
 
-		// Renderer needs a canvas — created by the UI layer, set via setCanvas().
-		this.videoRenderer = new Watch.Video.Renderer(this.videoDecoder);
+		// Renderer needs a canvas — created by the UI layer, set via `canvas`.
+		this.videoRenderer = new Watch.Video.Renderer(this.videoDecoder, { canvas: this.canvas });
 		this.#signals.cleanup(() => this.videoRenderer.close());
 
 		// Audio pipeline — the emitter controls muted (volume) and paused (download).
-		this.audioSource = new Watch.Audio.Source(this.sync, { broadcast: this.broadcast });
-		this.#signals.cleanup(() => this.audioSource.close());
-
-		this.audioDecoder = new Watch.Audio.Decoder(this.audioSource);
+		this.audioDecoder = new Watch.Audio.Decoder(this.audioSource, this.sync);
 		this.#signals.cleanup(() => this.audioDecoder.close());
 
 		const audioPaused = new Moq.Signals.Signal(true);
@@ -149,7 +163,7 @@ export class Game {
 		// Resume AudioContext on first user interaction (browser autoplay policy).
 		for (const event of ["click", "touchstart", "touchend", "mousedown", "keydown"]) {
 			this.#signals.event(document, event, () => {
-				const ctx = this.audioDecoder.context.peek();
+				const ctx = this.audioDecoder.output.context.peek();
 				if (ctx?.state === "suspended") ctx.resume();
 			});
 		}
@@ -179,11 +193,11 @@ export class Game {
 	/** Collect media timestamps at each pipeline stage for latency measurement. */
 	#timestamps(): { label: string; ts: number }[] {
 		const entries: { label: string; ts: number }[] = [];
-		const received = this.sync.timestamp.peek();
+		const received = this.sync.output.timestamp.peek();
 		if (received != null) entries.push({ label: "received", ts: received });
-		const decoded = this.videoDecoder.timestamp.peek();
+		const decoded = this.videoDecoder.output.timestamp.peek();
 		if (decoded != null) entries.push({ label: "decoded", ts: decoded });
-		const rendered = this.videoRenderer.timestamp.peek();
+		const rendered = this.videoRenderer.output.timestamp.peek();
 		if (rendered != null) entries.push({ label: "rendered", ts: rendered });
 		return entries;
 	}
@@ -205,7 +219,7 @@ export class Game {
 		const exp = effect.get(this.expanded);
 		// Native GB is 160x144 = 23040 pixels. When expanded, allow 4x for quality.
 		const pixels = exp === this.sessionId ? GB_PIXELS * 4 : GB_PIXELS;
-		this.videoSource.target.set({ pixels });
+		this.#target.set({ pixels });
 	}
 
 	#runVideoEnabled(videoEnabled: Moq.Signals.Signal<boolean>, effect: Moq.Signals.Effect) {
@@ -219,7 +233,7 @@ export class Game {
 	}
 
 	#runStatus(effect: Moq.Signals.Effect) {
-		const active = effect.get(this.broadcast.active);
+		const active = effect.get(this.broadcast.output.active);
 		if (!active) return;
 
 		const statusTrack = active.subscribe("status", 10);
diff --git a/js/moq-boy/src/ui/components/GameCard.tsx b/js/moq-boy/src/ui/components/GameCard.tsx
index dade44fa0..3c6cf930d 100644
--- a/js/moq-boy/src/ui/components/GameCard.tsx
+++ b/js/moq-boy/src/ui/components/GameCard.tsx
@@ -22,9 +22,9 @@ function GameCardInner() {
 	let canvasRef!: HTMLCanvasElement;
 	const signals = new Signals.Effect();
 
-	// Set canvas on the video renderer once mounted.
+	// Set canvas on the game once mounted; it wires it into the renderer.
 	onMount(() => {
-		game.videoRenderer.canvas.set(canvasRef);
+		game.canvas.set(canvasRef);
 	});
 
 	// Keyboard input — preventDefault when expanded or hovered.
diff --git a/js/moq-boy/src/ui/components/StatsPanel.tsx b/js/moq-boy/src/ui/components/StatsPanel.tsx
index abe68bba9..22891910f 100644
--- a/js/moq-boy/src/ui/components/StatsPanel.tsx
+++ b/js/moq-boy/src/ui/components/StatsPanel.tsx
@@ -7,7 +7,7 @@ export default function StatsPanel() {
 	const ctx = useGameUI();
 	const game = ctx.game;
 
-	const jitter = createAccessor(game.sync.jitter);
+	const jitter = createAccessor(game.sync.output.jitter);
 
 	const onJitterInput = (e: Event) => {
 		const el = e.currentTarget as HTMLInputElement;
diff --git a/js/signals/src/index.ts b/js/signals/src/index.ts
index 4d4ba5c62..508556568 100644
--- a/js/signals/src/index.ts
+++ b/js/signals/src/index.ts
@@ -186,7 +186,44 @@ export class Signal<T> implements Getter<T>, Setter<T> {
 }
 
 type SetterType<S> = S extends Setter<infer T> ? T : never;
-type GetterType<G> = G extends Getter<infer T> ? T : never;
+export type GetterType<G> = G extends Getter<infer T> ? T : never;
+
+// A record of named signals, used to group a component's inputs or outputs.
+export type SignalMap = Record<string, Getter<unknown>>;
+
+// A read-only view over a SignalMap: every entry collapses to its Getter and the
+// record itself is readonly. Consumers can peek/subscribe but can neither call set()
+// nor swap a signal out, so the owning component keeps sole write access.
+export type Readonlys<T extends SignalMap> = {
+	readonly [K in keyof T]: Getter<GetterType<T[K]>>;
+};
+
+// Re-type a record of Signals as read-only Getters. This is the identity function at
+// runtime; it only narrows the static type. Keep the original (writable) reference
+// private for the component to set, and expose the result as the public output.
+//
+//   readonly #output = { status: new Signal("offline") };
+//   readonly output = readonlys(this.#output); // status is now a Getter to callers
+export function readonlys<T extends SignalMap>(signals: T): Readonlys<T> {
+	return signals as unknown as Readonlys<T>;
+}
+
+// Build a read-only Getter from a value or an existing readable. The read-only
+// counterpart to `Signal.from`: a branded Signal (including the output of `readonlys`)
+// is reused as-is, so one component's output can be wired straight into another's
+// input; any other value is wrapped in a fresh Signal. The brand check means a
+// hand-rolled Getter that isn't backed by a Signal would be treated as a value.
+export function getter<T>(value: T | Getter<T>): Getter<T> {
+	if (typeof value === "object" && value !== null && SIGNAL_BRAND in value) {
+		return value as Getter<T>;
+	}
+	return new Signal(value as T);
+}
+
+// Derive a component's constructor props from its input map: every input becomes
+// optional and accepts a raw value, a Signal, or another component's output Getter
+// (the `getter()` contract). Removes the hand-written, drift-prone props interface.
+export type InputProps<I extends SignalMap> = { [K in keyof I]?: GetterType<I[K]> | I[K] };
 
 // Excludes common falsy values from a type
 type Falsy = false | 0 | "" | null | undefined;
diff --git a/js/watch/src/audio/backend.ts b/js/watch/src/audio/backend.ts
index 8685356e5..a47afab07 100644
--- a/js/watch/src/audio/backend.ts
+++ b/js/watch/src/audio/backend.ts
@@ -1,26 +1,22 @@
-import type { Getter, Signal } from "@moq/signals";
+import type { Getter } from "@moq/signals";
 import type { BufferedRanges } from "../backend";
 import type { Source } from "./source";
 
-// Audio specific signals that work regardless of the backend source (mse vs webcodecs).
+// Audio specific outputs that work regardless of the backend source (mse vs webcodecs).
 export interface Backend {
 	// The source of the audio.
 	source: Source;
 
-	// The volume of the audio, between 0 and 1.
-	volume: Signal<number>;
+	readonly output: {
+		// The stats of the audio.
+		readonly stats: Getter<Stats | undefined>;
 
-	// Whether the audio is muted.
-	muted: Signal<boolean>;
+		// Buffered time ranges (for MSE backend).
+		readonly buffered: Getter<BufferedRanges>;
 
-	// The stats of the audio.
-	stats: Getter<Stats | undefined>;
-
-	// Buffered time ranges (for MSE backend).
-	buffered: Getter<BufferedRanges>;
-
-	// The AudioContext used for playback (WebCodecs backend only).
-	context: Getter<AudioContext | undefined>;
+		// The AudioContext used for playback (WebCodecs backend only).
+		readonly context: Getter<AudioContext | undefined>;
+	};
 }
 
 export interface Stats {
diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index ce2ec2479..26d137f44 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -3,68 +3,79 @@ import * as Container from "@moq/hang/container";
 import * as Util from "@moq/hang/util";
 import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { BufferedRanges } from "../backend";
 import { base64ToBytes } from "../base64";
+import type { Sync } from "../sync";
 import { type AudioBuffer, createAudioBuffer } from "./buffer";
 // Compiled and inlined as a blob URL via vite-plugin-worklet.
 import RenderWorklet from "./render-worklet.ts?worklet";
 import type { Source } from "./source";
 
-export type DecoderProps = {
+type DecoderInput = {
 	// Enable to download the audio track.
-	enabled?: boolean | Signal<boolean>;
+	enabled: Getter<boolean>;
 };
 
-export interface AudioStats {
-	bytesReceived: number;
-}
-
-// Downloads audio from a track and emits it to an AudioContext.
-// The user is responsible for hooking up audio to speakers, an analyzer, etc.
-export class Decoder {
-	source: Source;
-	enabled: Signal<boolean>;
-
-	#context = new Signal<AudioContext | undefined>(undefined);
-	readonly context: Getter<AudioContext | undefined> = this.#context;
+type DecoderOutput = {
+	context: Signal<AudioContext | undefined>;
 
 	// The root of the audio graph, which can be used for custom visualizations.
-	#worklet = new Signal<AudioWorkletNode | undefined>(undefined);
 	// Downcast to AudioNode so it matches Publish.Audio
-	readonly root = this.#worklet as Getter<AudioNode | undefined>;
+	root: Signal<AudioNode | undefined>;
 
-	#sampleRate = new Signal<number | undefined>(undefined);
-	readonly sampleRate: Getter<number | undefined> = this.#sampleRate;
-
-	#stats = new Signal<AudioStats | undefined>(undefined);
-	readonly stats: Getter<AudioStats | undefined> = this.#stats;
+	sampleRate: Signal<number | undefined>;
+	stats: Signal<AudioStats | undefined>;
 
 	// Current playback timestamp from worklet
-	#timestamp = new Signal<Time.Milli | undefined>(undefined);
-	readonly timestamp: Getter<Time.Milli | undefined> = this.#timestamp;
+	timestamp: Signal<Time.Milli | undefined>;
 
 	// Whether the audio buffer is stalled (waiting to fill)
-	#stalled = new Signal<boolean>(true);
-	readonly stalled: Getter<boolean> = this.#stalled;
+	stalled: Signal<boolean>;
+
+	// Combined buffered ranges (network jitter + decode buffer)
+	buffered: Signal<BufferedRanges>;
+};
+
+export type DecoderProps = InputProps<DecoderInput>;
+
+export interface AudioStats {
+	bytesReceived: number;
+}
+
+// Downloads audio from a track and emits it to an AudioContext.
+// The user is responsible for hooking up audio to speakers, an analyzer, etc.
+export class Decoder {
+	readonly input: Readonlys<DecoderInput>;
+	source: Source;
+	sync: Sync;
+
+	readonly #output: DecoderOutput = {
+		context: new Signal<AudioContext | undefined>(undefined),
+		root: new Signal<AudioNode | undefined>(undefined),
+		sampleRate: new Signal<number | undefined>(undefined),
+		stats: new Signal<AudioStats | undefined>(undefined),
+		timestamp: new Signal<Time.Milli | undefined>(undefined),
+		stalled: new Signal<boolean>(true),
+		buffered: new Signal<BufferedRanges>([]),
+	};
+	readonly output = readonlys(this.#output);
 
 	// Decode buffer: audio sent to worklet but not yet played
 	#decodeBuffered = new Signal<BufferedRanges>([]);
 
-	// Combined buffered ranges (network jitter + decode buffer)
-	#buffered = new Signal<BufferedRanges>([]);
-	readonly buffered: Getter<BufferedRanges> = this.#buffered;
-
 	// Audio ring bridging main thread and worklet (shared memory or postMessage transport).
 	#ring: AudioBuffer | undefined;
 
 	#signals = new Effect();
 
-	constructor(source: Source, props?: DecoderProps) {
-		this.source = source;
-		this.source.supported.set(supported); // super hacky
+	constructor(source: Source, sync: Sync, props?: DecoderProps) {
+		this.input = {
+			enabled: getter(props?.enabled ?? false),
+		};
 
-		this.enabled = Signal.from(props?.enabled ?? false);
+		this.source = source;
+		this.sync = sync;
 
 		this.#signals.run(this.#runWorklet.bind(this));
 		this.#signals.run(this.#runEnabled.bind(this));
@@ -79,7 +90,7 @@ export class Decoder {
 		//const enabled = effect.get(this.enabled);
 		//if (!enabled) return;
 
-		const config = effect.get(this.source.config);
+		const config = effect.get(this.source.output.config);
 		if (!config) return;
 
 		const sampleRate = config.sampleRate;
@@ -92,7 +103,7 @@ export class Decoder {
 			latencyHint: "interactive", // We don't use real-time because of the buffer.
 			sampleRate,
 		});
-		effect.set(this.#context, context);
+		effect.set(this.#output.context, context);
 
 		effect.cleanup(() => context.close());
 
@@ -114,7 +125,7 @@ export class Decoder {
 			effect.cleanup(() => worklet.disconnect());
 
 			// Initial target latency in samples.
-			const latency = this.source.sync.buffer.peek();
+			const latency = this.sync.output.buffer.peek();
 			const latencySamples = Math.ceil(sampleRate * Time.Second.fromMilli(latency));
 
 			// Let the factory pick the best transport (SharedArrayBuffer or postMessage).
@@ -128,19 +139,19 @@ export class Decoder {
 			// Mirror ring state (timestamp/stalled) onto our public signals.
 			effect.run((inner) => {
 				const ts = Time.Milli.fromMicro(inner.get(ring.timestamp));
-				this.#timestamp.set(ts);
+				this.#output.timestamp.set(ts);
 				this.#trimDecodeBuffered(ts);
 			});
 			effect.run((inner) => {
-				this.#stalled.set(inner.get(ring.stalled));
+				this.#output.stalled.set(inner.get(ring.stalled));
 			});
 
-			effect.set(this.#worklet, worklet);
+			effect.set(this.#output.root, worklet);
 		});
 	}
 
 	#runEnabled(effect: Effect): void {
-		const values = effect.getAll([this.enabled, this.#context]);
+		const values = effect.getAll([this.input.enabled, this.#output.context]);
 		if (!values) return;
 		const [_, context] = values;
 
@@ -151,31 +162,31 @@ export class Decoder {
 
 	#runLatency(effect: Effect): void {
 		// Gate on the worklet signal so this effect re-runs once the ring is created.
-		const worklet = effect.get(this.#worklet);
+		const worklet = effect.get(this.#output.root);
 		if (!worklet) return;
 
 		const ring = this.#ring;
 		if (!ring) return;
 
-		const latency = effect.get(this.source.sync.buffer);
+		const latency = effect.get(this.sync.output.buffer);
 		const latencySamples = Math.ceil(ring.rate * Time.Second.fromMilli(latency));
 		ring.setLatency(latencySamples);
 	}
 
 	#runDecoder(effect: Effect): void {
-		const enabled = effect.get(this.enabled);
+		const enabled = effect.get(this.input.enabled);
 		if (!enabled) return;
 
-		const broadcast = effect.get(this.source.broadcast);
+		const broadcast = effect.get(this.source.input.broadcast);
 		if (!broadcast) return;
 
-		const track = effect.get(this.source.track);
+		const track = effect.get(this.source.output.track);
 		if (!track) return;
 
-		const config = effect.get(this.source.config);
+		const config = effect.get(this.source.output.config);
 		if (!config) return;
 
-		const active = effect.get(broadcast.active);
+		const active = effect.get(broadcast.output.active);
 		if (!active) return;
 
 		const sub = active.subscribe(track, Catalog.PRIORITY.audio);
@@ -194,7 +205,7 @@ export class Decoder {
 		// TODO include JITTER_UNDERHEAD
 		const consumer = new Container.Consumer(sub, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -202,7 +213,7 @@ export class Decoder {
 		effect.run((inner) => {
 			const network = inner.get(consumer.buffered);
 			const decode = inner.get(this.#decodeBuffered);
-			this.#buffered.update(() => Container.mergeBufferedRanges(network, decode));
+			this.#output.buffered.update(() => Container.mergeBufferedRanges(network, decode));
 		});
 
 		effect.spawn(async () => {
@@ -248,9 +259,9 @@ export class Decoder {
 
 				// Mark that we received this frame right now.
 				const timestamp = Time.Milli.fromMicro(frame.timestamp as Time.Micro);
-				this.source.sync.received(timestamp, "audio");
+				this.sync.received(timestamp, "audio");
 
-				this.#stats.update((stats) => ({
+				this.#output.stats.update((stats) => ({
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
@@ -281,7 +292,7 @@ export class Decoder {
 
 		const consumer = new Container.Consumer(sub, {
 			format: new Container.Cmaf.Format(init),
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -289,7 +300,7 @@ export class Decoder {
 		effect.run((inner) => {
 			const network = inner.get(consumer.buffered);
 			const decode = inner.get(this.#decodeBuffered);
-			this.#buffered.update(() => Container.mergeBufferedRanges(network, decode));
+			this.#output.buffered.update(() => Container.mergeBufferedRanges(network, decode));
 		});
 
 		effect.spawn(async () => {
@@ -320,9 +331,9 @@ export class Decoder {
 				if (!frame) continue;
 
 				const timestamp = Time.Milli.fromMicro(frame.timestamp);
-				this.source.sync.received(timestamp, "audio");
+				this.sync.received(timestamp, "audio");
 
-				this.#stats.update((stats) => ({
+				this.#output.stats.update((stats) => ({
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
@@ -409,7 +420,7 @@ export class Decoder {
 	}
 }
 
-async function supported(config: Catalog.AudioConfig): Promise<boolean> {
+export async function decoderSupported(config: Catalog.AudioConfig): Promise<boolean> {
 	// Opus in CMAF uses raw packets; dOps is not a valid OGG Identification Header.
 	let description: Uint8Array | undefined;
 	if (config.codec !== "opus") {
diff --git a/js/watch/src/audio/emitter.ts b/js/watch/src/audio/emitter.ts
index fce3c44e5..afd5b9e42 100644
--- a/js/watch/src/audio/emitter.ts
+++ b/js/watch/src/audio/emitter.ts
@@ -1,66 +1,59 @@
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { Decoder } from "./decoder";
 
 const MIN_GAIN = 0.001;
 const FADE_TIME = 0.2;
 
-export type EmitterProps = {
-	volume?: number | Signal<number>;
-	muted?: boolean | Signal<boolean>;
-	paused?: boolean | Signal<boolean>;
+type EmitterInput = {
+	volume: Getter<number>;
+	muted: Getter<boolean>;
+
+	// Similar to muted, but controls whether we download audio at all.
+	// That way we can be "muted" but also download audio for visualizations.
+	paused: Getter<boolean>;
+};
+
+type EmitterOutput = {
+	// Whether audio should be downloaded. Wired into the decoder's `enabled` input by the owner.
+	enabled: Signal<boolean>;
 };
 
+export type EmitterProps = InputProps<EmitterInput>;
+
 // A helper that emits audio directly to the speakers.
 export class Emitter {
 	source: Decoder;
-	volume: Signal<number>;
-	muted: Signal<boolean>;
 
-	// Similar to muted, but controls whether we download audio at all.
-	// That way we can be "muted" but also download audio for visualizations.
-	paused: Signal<boolean>;
+	readonly input: Readonlys<EmitterInput>;
 
-	#signals = new Effect();
+	readonly #output: EmitterOutput = {
+		enabled: new Signal<boolean>(false),
+	};
+	readonly output = readonlys(this.#output);
 
-	// The volume to use when unmuted.
-	#unmuteVolume = 0.5;
+	#signals = new Effect();
 
 	// The gain node used to adjust the volume.
 	#gain = new Signal<GainNode | undefined>(undefined);
 
 	constructor(source: Decoder, props?: EmitterProps) {
 		this.source = source;
-		this.volume = Signal.from(props?.volume ?? 0.5);
-		this.muted = Signal.from(props?.muted ?? false);
-		this.paused = Signal.from(props?.paused ?? props?.muted ?? false);
-
-		// Set the volume to 0 when muted.
-		this.#signals.run((effect) => {
-			const muted = effect.get(this.muted);
-			if (muted) {
-				this.#unmuteVolume = this.volume.peek() || 0.5;
-				this.volume.set(0);
-			} else {
-				this.volume.set(this.#unmuteVolume);
-			}
-		});
-
-		this.#signals.run((effect) => {
-			const enabled = !effect.get(this.paused) && !effect.get(this.muted);
-			this.source.enabled.set(enabled);
-		});
+		this.input = {
+			volume: getter(props?.volume ?? 0.5),
+			muted: getter(props?.muted ?? false),
+			paused: getter(props?.paused ?? props?.muted ?? false),
+		};
 
-		// Set unmute when the volume is non-zero.
 		this.#signals.run((effect) => {
-			const volume = effect.get(this.volume);
-			this.muted.set(volume === 0);
+			const enabled = !effect.get(this.input.paused) && !effect.get(this.input.muted);
+			this.#output.enabled.set(enabled);
 		});
 
 		this.#signals.run((effect) => {
-			const root = effect.get(this.source.root);
+			const root = effect.get(this.source.output.root);
 			if (!root) return;
 
-			const gain = new GainNode(root.context, { gain: effect.get(this.volume) });
+			const gain = new GainNode(root.context, { gain: effect.get(this.input.volume) });
 			root.connect(gain);
 
 			effect.set(this.#gain, gain);
@@ -68,7 +61,7 @@ export class Emitter {
 			effect.run((inner) => {
 				// We only connect/disconnect when enabled to save power.
 				// Otherwise the worklet keeps running in the background returning 0s.
-				const enabled = inner.get(this.source.enabled);
+				const enabled = inner.get(this.#output.enabled);
 				if (!enabled) return;
 
 				gain.connect(root.context.destination); // speakers
@@ -83,7 +76,7 @@ export class Emitter {
 			// Cancel any scheduled transitions on change.
 			effect.cleanup(() => gain.gain.cancelScheduledValues(gain.context.currentTime));
 
-			const volume = effect.get(this.volume);
+			const volume = effect.get(this.input.volume);
 			if (volume < MIN_GAIN) {
 				gain.gain.exponentialRampToValueAtTime(MIN_GAIN, gain.context.currentTime + FADE_TIME);
 				gain.gain.setValueAtTime(0, gain.context.currentTime + FADE_TIME + 0.01);
diff --git a/js/watch/src/audio/mse.ts b/js/watch/src/audio/mse.ts
index c63517e1c..f30cb6005 100644
--- a/js/watch/src/audio/mse.ts
+++ b/js/watch/src/audio/mse.ts
@@ -1,65 +1,76 @@
 import * as Catalog from "@moq/hang/catalog";
 import * as Container from "@moq/hang/container";
 import * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import { type BufferedRanges, timeRangesToArray } from "../backend";
 import { base64ToBytes } from "../base64";
 import type { Muxer } from "../mse";
+import type { Sync } from "../sync";
 import type { Backend, Stats } from "./backend";
 import type { Source } from "./source";
 
-export type MseProps = {
-	volume?: number | Signal<number>;
-	muted?: boolean | Signal<boolean>;
+type MseInput = {
+	volume: Getter<number>;
+	muted: Getter<boolean>;
 };
 
+type MseOutput = {
+	stats: Signal<Stats | undefined>;
+	buffered: Signal<BufferedRanges>;
+
+	// MSE plays through the <video> element, not WebAudio.
+	context: Signal<AudioContext | undefined>;
+};
+
+export type MseProps = InputProps<MseInput>;
+
 export class Mse implements Backend {
 	muxer: Muxer;
+	sync: Sync;
 	source: Source;
 
-	volume: Signal<number>;
-	muted: Signal<boolean>;
+	readonly input: Readonlys<MseInput>;
 
-	#stats = new Signal<Stats | undefined>(undefined);
-	readonly stats: Getter<Stats | undefined> = this.#stats;
-
-	#buffered = new Signal<BufferedRanges>([]);
-	readonly buffered: Getter<BufferedRanges> = this.#buffered;
-
-	// MSE plays through the <video> element, not WebAudio.
-	readonly context: Getter<AudioContext | undefined> = new Signal<AudioContext | undefined>(undefined);
+	readonly #output: MseOutput = {
+		stats: new Signal<Stats | undefined>(undefined),
+		buffered: new Signal<BufferedRanges>([]),
+		context: new Signal<AudioContext | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
-	constructor(muxer: Muxer, source: Source, props?: MseProps) {
+	constructor(muxer: Muxer, sync: Sync, source: Source, props?: MseProps) {
 		this.muxer = muxer;
+		this.sync = sync;
 		this.source = source;
-		this.source.supported.set(supported); // super hacky
 
-		this.volume = Signal.from(props?.volume ?? 0.5);
-		this.muted = Signal.from(props?.muted ?? false);
+		this.input = {
+			volume: getter(props?.volume ?? 0.5),
+			muted: getter(props?.muted ?? false),
+		};
 
 		this.#signals.run(this.#runMedia.bind(this));
 		this.#signals.run(this.#runVolume.bind(this));
 	}
 
 	#runMedia(effect: Effect): void {
-		const element = effect.get(this.muxer.element);
+		const element = effect.get(this.muxer.input.element);
 		if (!element) return;
 
-		const mediaSource = effect.get(this.muxer.mediaSource);
+		const mediaSource = effect.get(this.muxer.output.mediaSource);
 		if (!mediaSource) return;
 
-		const broadcast = effect.get(this.source.broadcast);
+		const broadcast = effect.get(this.source.input.broadcast);
 		if (!broadcast) return;
 
-		const active = effect.get(broadcast.active);
+		const active = effect.get(broadcast.output.active);
 		if (!active) return;
 
-		const track = effect.get(this.source.track);
+		const track = effect.get(this.source.output.track);
 		if (!track) return;
 
-		const config = effect.get(this.source.config);
+		const config = effect.get(this.source.output.config);
 		if (!config) return;
 
 		const mime = `audio/mp4; codecs="${config.codec}"`;
@@ -75,7 +86,7 @@ export class Mse implements Backend {
 		});
 
 		effect.event(sourceBuffer, "updateend", () => {
-			this.#buffered.set(timeRangesToArray(sourceBuffer.buffered));
+			this.#output.buffered.set(timeRangesToArray(sourceBuffer.buffered));
 		});
 
 		const sub = active.subscribe(track, Catalog.PRIORITY.audio);
@@ -121,7 +132,7 @@ export class Mse implements Backend {
 
 				// Extract the timestamp from the CMAF segment and mark when we received it.
 				const timestamp = Container.Cmaf.decodeTimestamp(frame, init);
-				this.source.sync.received(Moq.Time.Milli.fromMicro(timestamp), "audio");
+				this.sync.received(Moq.Time.Milli.fromMicro(timestamp), "audio");
 
 				await this.#appendBuffer(sourceBuffer, frame);
 
@@ -144,7 +155,7 @@ export class Mse implements Backend {
 		// Create consumer that reorders groups/frames up to the provided latency.
 		const consumer = new Container.Consumer(sub, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -167,7 +178,7 @@ export class Mse implements Backend {
 
 				// Mark that we received this frame for latency calculation.
 				const timestamp = Moq.Time.Milli.fromMicro(pending.timestamp as Moq.Time.Micro);
-				this.source.sync.received(timestamp, "audio");
+				this.sync.received(timestamp, "audio");
 
 				break;
 			}
@@ -184,7 +195,7 @@ export class Mse implements Backend {
 
 					// Mark that we received this frame for latency calculation.
 					const timestamp = Moq.Time.Milli.fromMicro(frame.timestamp as Moq.Time.Micro);
-					this.source.sync.received(timestamp, "audio");
+					this.sync.received(timestamp, "audio");
 				}
 
 				// Wrap raw frame in moof+mdat
@@ -210,11 +221,11 @@ export class Mse implements Backend {
 	}
 
 	#runVolume(effect: Effect): void {
-		const element = effect.get(this.muxer.element);
+		const element = effect.get(this.muxer.input.element);
 		if (!element) return;
 
-		const volume = effect.get(this.volume);
-		const muted = effect.get(this.muted);
+		const volume = effect.get(this.input.volume);
+		const muted = effect.get(this.input.muted);
 
 		if (muted && !element.muted) {
 			element.muted = true;
@@ -225,10 +236,6 @@ export class Mse implements Backend {
 		if (volume !== element.volume) {
 			element.volume = volume;
 		}
-
-		effect.event(element, "volumechange", () => {
-			this.volume.set(element.volume);
-		});
 	}
 
 	close(): void {
@@ -236,6 +243,6 @@ export class Mse implements Backend {
 	}
 }
 
-async function supported(config: Catalog.AudioConfig): Promise<boolean> {
+export async function mseSupported(config: Catalog.AudioConfig): Promise<boolean> {
 	return MediaSource.isTypeSupported(`audio/mp4; codecs="${config.codec}"`);
 }
diff --git a/js/watch/src/audio/source.ts b/js/watch/src/audio/source.ts
index 6430c7c72..5fb3042b1 100644
--- a/js/watch/src/audio/source.ts
+++ b/js/watch/src/audio/source.ts
@@ -1,8 +1,7 @@
 import type * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { Broadcast } from "../broadcast";
-import type { Sync } from "../sync";
 
 // AudioWorklet always renders in 128-sample quanta.
 const WORKLET_QUANTUM = 128;
@@ -17,49 +16,53 @@ export type Target = {
  */
 export type Supported = (config: Catalog.AudioConfig) => Promise<boolean>;
 
-export type SourceProps = {
-	broadcast?: Broadcast | Signal<Broadcast | undefined>;
+type SourceInput = {
+	broadcast: Getter<Broadcast | undefined>;
 
 	// The desired rendition/bitrate of the audio.
-	target?: Target | Signal<Target | undefined>;
+	target: Getter<Target | undefined>;
 
 	// A function that checks if an audio configuration is supported by the backend.
-	supported?: Supported;
+	// Provided by whichever backend (WebCodecs or MSE) is active.
+	supported: Getter<Supported | undefined>;
 };
 
+type SourceOutput = {
+	catalog: Signal<Catalog.Audio | undefined>;
+	available: Signal<Record<string, Catalog.AudioConfig>>;
+	track: Signal<string | undefined>;
+	config: Signal<Catalog.AudioConfig | undefined>;
+
+	// The per-rendition jitter (ms) to add to the sync buffer. Wired into Sync by the parent.
+	jitter: Signal<Moq.Time.Milli | undefined>;
+};
+
+export type SourceProps = InputProps<SourceInput>;
+
 /**
  * Source handles catalog extraction, support checking, and rendition selection
  * for audio playback. It is used by both MSE and Decoder backends.
  */
 export class Source {
-	broadcast: Signal<Broadcast | undefined>;
-	target: Signal<Target | undefined>;
-
-	#catalog = new Signal<Catalog.Audio | undefined>(undefined);
-	readonly catalog: Getter<Catalog.Audio | undefined> = this.#catalog;
+	readonly input: Readonlys<SourceInput>;
 
-	#available = new Signal<Record<string, Catalog.AudioConfig>>({});
-	readonly available: Getter<Record<string, Catalog.AudioConfig>> = this.#available;
-
-	#track = new Signal<string | undefined>(undefined);
-	readonly track: Signal<string | undefined> = this.#track;
-
-	#config = new Signal<Catalog.AudioConfig | undefined>(undefined);
-	readonly config: Getter<Catalog.AudioConfig | undefined> = this.#config;
-
-	supported: Signal<Supported | undefined>;
-
-	// Used to target a latency and synchronize playback of video with audio.
-	sync: Sync;
+	readonly #output: SourceOutput = {
+		catalog: new Signal<Catalog.Audio | undefined>(undefined),
+		available: new Signal<Record<string, Catalog.AudioConfig>>({}),
+		track: new Signal<string | undefined>(undefined),
+		config: new Signal<Catalog.AudioConfig | undefined>(undefined),
+		jitter: new Signal<Moq.Time.Milli | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
-	constructor(sync: Sync, props?: SourceProps) {
-		this.sync = sync;
-
-		this.broadcast = Signal.from(props?.broadcast);
-		this.target = Signal.from(props?.target);
-		this.supported = Signal.from(props?.supported);
+	constructor(props?: SourceProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			target: getter(props?.target),
+			supported: getter(props?.supported),
+		};
 
 		this.#signals.run(this.#runCatalog.bind(this));
 		this.#signals.run(this.#runSupported.bind(this));
@@ -67,18 +70,18 @@ export class Source {
 	}
 
 	#runCatalog(effect: Effect): void {
-		const broadcast = effect.get(this.broadcast);
+		const broadcast = effect.get(this.input.broadcast);
 		if (!broadcast) return;
 
-		const catalog = effect.get(broadcast.catalog)?.audio;
+		const catalog = effect.get(broadcast.output.catalog)?.audio;
 		if (!catalog) return;
 
-		effect.set(this.#catalog, catalog);
+		effect.set(this.#output.catalog, catalog);
 	}
 
 	#runSupported(effect: Effect): void {
-		const renditions = effect.get(this.#catalog)?.renditions ?? {};
-		const supported = effect.get(this.supported);
+		const renditions = effect.get(this.#output.catalog)?.renditions ?? {};
+		const supported = effect.get(this.input.supported);
 		if (!supported) return;
 
 		effect.spawn(async () => {
@@ -93,15 +96,15 @@ export class Source {
 				console.warn("no supported audio renditions found:", renditions);
 			}
 
-			this.#available.set(available);
+			this.#output.available.set(available);
 		});
 	}
 
 	#runSelected(effect: Effect): void {
-		const available = effect.get(this.#available);
+		const available = effect.get(this.#output.available);
 		if (Object.keys(available).length === 0) return;
 
-		const target = effect.get(this.target);
+		const target = effect.get(this.input.target);
 
 		let selected: { track: string; config: Catalog.AudioConfig } | undefined;
 
@@ -114,15 +117,15 @@ export class Source {
 			if (!selected) return;
 		}
 
-		effect.set(this.#track, selected.track);
-		effect.set(this.#config, selected.config);
+		effect.set(this.#output.track, selected.track);
+		effect.set(this.#output.config, selected.config);
 
 		// Use catalog jitter if available, otherwise estimate from codec frame duration.
 		// Add the worklet render quantum so the ring buffer has margin between frame arrivals.
 		const codecJitter = selected.config.jitter ?? defaultAudioJitter(selected.config) ?? 0;
 		const overhead = Math.ceil((WORKLET_QUANTUM / selected.config.sampleRate) * 1000);
 		const jitter = codecJitter + overhead;
-		effect.set(this.sync.audio, jitter as Moq.Time.Milli);
+		effect.set(this.#output.jitter, jitter as Moq.Time.Milli);
 	}
 
 	/**
diff --git a/js/watch/src/backend.ts b/js/watch/src/backend.ts
index 5f3c712db..bb17581d3 100644
--- a/js/watch/src/backend.ts
+++ b/js/watch/src/backend.ts
@@ -1,10 +1,14 @@
 import * as Moq from "@moq/net";
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import * as Audio from "./audio";
+import { decoderSupported as audioDecoderSupported } from "./audio/decoder";
+import { mseSupported as audioMseSupported } from "./audio/mse";
 import type { Broadcast } from "./broadcast";
 import { Muxer } from "./mse";
 import { type Latency, Sync } from "./sync";
 import * as Video from "./video";
+import { decoderSupported as videoDecoderSupported } from "./video/decoder";
+import { mseSupported as videoMseSupported } from "./video/mse";
 
 // Serializable representation of TimeRanges
 export interface BufferedRange {
@@ -26,97 +30,97 @@ export function timeRangesToArray(ranges: TimeRanges): BufferedRanges {
 	return result;
 }
 
-export interface Backend {
-	// Whether audio/video playback is paused.
-	paused: Signal<boolean>;
+type VideoBackendOutput = {
+	stats: Signal<Video.Stats | undefined>;
+	stalled: Signal<boolean>;
+	buffered: Signal<BufferedRanges>;
+	timestamp: Signal<Moq.Time.Milli>;
+};
 
-	// Video specific signals.
-	video?: Video.Backend;
-
-	// Audio specific signals.
-	audio?: Audio.Backend;
-
-	// The latency setting: "real-time" auto-computes jitter, a number sets a fixed jitter.
-	latency: Signal<Latency>;
-
-	// The jitter buffer in milliseconds.
-	jitter: Signal<Moq.Time.Milli>;
-}
-
-export interface MultiBackendProps {
-	element?: HTMLCanvasElement | HTMLVideoElement | Signal<HTMLCanvasElement | HTMLVideoElement | undefined>;
-	broadcast?: Broadcast | Signal<Broadcast | undefined>;
-
-	// Latency: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter in ms.
-	latency?: Latency | Signal<Latency>;
-
-	// Established connection, used by Sync to read RTT (PROBE) for dynamic jitter in "real-time" mode.
-	connection?: Signal<Moq.Connection.Established | undefined>;
-
-	paused?: boolean | Signal<boolean>;
-}
-
-// We have to proxy some of these signals because we support both the MSE and WebCodecs.
+// Unifies the video outputs across the MSE and WebCodecs backends.
 class VideoBackend implements Video.Backend {
-	// The source of the video.
 	source: Video.Source;
+	readonly output: Readonlys<VideoBackendOutput>;
 
-	// The stats of the video.
-	stats = new Signal<Video.Stats | undefined>(undefined);
-
-	// We're currently stalled waiting for the next frame
-	stalled = new Signal<boolean>(false);
+	constructor(source: Video.Source, output: VideoBackendOutput) {
+		this.source = source;
+		this.output = readonlys(output);
+	}
+}
 
-	// Buffered time ranges
-	buffered = new Signal<BufferedRanges>([]);
+type AudioBackendOutput = {
+	stats: Signal<Audio.Stats | undefined>;
+	buffered: Signal<BufferedRanges>;
+	context: Signal<AudioContext | undefined>;
+};
 
-	// The timestamp of the current frame
-	timestamp = new Signal<Moq.Time.Milli>(Moq.Time.Milli.zero);
+// Unifies the audio outputs across the MSE and WebCodecs backends.
+class AudioBackend implements Audio.Backend {
+	source: Audio.Source;
+	readonly output: Readonlys<AudioBackendOutput>;
 
-	constructor(source: Video.Source) {
+	constructor(source: Audio.Source, output: AudioBackendOutput) {
 		this.source = source;
+		this.output = readonlys(output);
 	}
 }
 
-// Audio specific signals that work regardless of the backend source (mse vs webcodecs).
-class AudioBackend implements Audio.Backend {
-	source: Audio.Source;
+type MultiBackendInput = {
+	element: Getter<HTMLCanvasElement | HTMLVideoElement | undefined>;
+	broadcast: Getter<Broadcast | undefined>;
 
-	// The volume of the audio, between 0 and 1.
-	volume = new Signal<number>(0.5);
+	// Established connection, used by Sync to read RTT (PROBE) for dynamic jitter in "real-time" mode.
+	connection: Getter<Moq.Connection.Established | undefined>;
 
-	// Whether the audio is muted.
-	muted = new Signal<boolean>(false);
+	paused: Getter<boolean>;
 
-	// The stats of the audio.
-	stats = new Signal<Audio.Stats | undefined>(undefined);
+	// Latency: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter in ms.
+	latency: Getter<Latency>;
 
-	// Buffered time ranges
-	buffered = new Signal<BufferedRanges>([]);
+	// Audio controls. The owner holds the writable Signals.
+	volume: Getter<number>;
+	muted: Getter<boolean>;
 
-	// The AudioContext used for playback (set by the WebCodecs backend; undefined under MSE).
-	context = new Signal<AudioContext | undefined>(undefined);
+	// The desired video rendition (resolution/bitrate cap).
+	target: Getter<Video.Target | undefined>;
+};
 
-	constructor(source: Audio.Source) {
-		this.source = source;
-	}
-}
+export type MultiBackendProps = InputProps<MultiBackendInput>;
 
 /// A generic backend that supports either MSE or WebCodecs based on the provided element.
 ///
 /// This is primarily what backs the <moq-watch> web component, but it's useful as a standalone for other use cases.
-export class MultiBackend implements Backend {
-	element = new Signal<HTMLCanvasElement | HTMLVideoElement | undefined>(undefined);
-	broadcast: Signal<Broadcast | undefined>;
-	latency: Signal<Latency>;
-	jitter: Signal<Moq.Time.Milli>;
-	paused: Signal<boolean>;
+export class MultiBackend {
+	readonly input: Readonlys<MultiBackendInput>;
+
+	// The jitter buffer in milliseconds, computed by Sync.
+	readonly output: { readonly jitter: Getter<Moq.Time.Milli> };
 
-	video: VideoBackend;
 	#videoSource: Video.Source;
+	#audioSource: Audio.Source;
 
+	// The active backend supplies its support probe; the source filters renditions with it.
+	#videoSupported = new Signal<Video.Supported | undefined>(undefined);
+	#audioSupported = new Signal<Audio.Supported | undefined>(undefined);
+
+	// Whether to download. Driven by the renderer/emitter policy, read by the decoders.
+	#videoEnabled = new Signal(false);
+	#audioEnabled = new Signal(false);
+
+	#videoOutput: VideoBackendOutput = {
+		stats: new Signal<Video.Stats | undefined>(undefined),
+		stalled: new Signal<boolean>(false),
+		buffered: new Signal<BufferedRanges>([]),
+		timestamp: new Signal<Moq.Time.Milli>(Moq.Time.Milli.zero),
+	};
+	#audioOutput: AudioBackendOutput = {
+		stats: new Signal<Audio.Stats | undefined>(undefined),
+		buffered: new Signal<BufferedRanges>([]),
+		context: new Signal<AudioContext | undefined>(undefined),
+	};
+
+	video: VideoBackend;
 	audio: AudioBackend;
-	#audioSource: Audio.Source;
 
 	// Used to sync audio and video playback at a target delay.
 	sync: Sync;
@@ -124,29 +128,46 @@ export class MultiBackend implements Backend {
 	signals = new Effect();
 
 	constructor(props?: MultiBackendProps) {
-		this.element = Signal.from(props?.element);
-		this.broadcast = Signal.from(props?.broadcast);
-		this.sync = new Sync({ latency: props?.latency, connection: props?.connection });
-		this.latency = this.sync.latency;
-		this.jitter = this.sync.jitter;
-
-		this.#videoSource = new Video.Source(this.sync, {
-			broadcast: this.broadcast,
+		this.input = {
+			element: getter(props?.element),
+			broadcast: getter(props?.broadcast),
+			connection: getter(props?.connection),
+			paused: getter(props?.paused ?? false),
+			latency: getter(props?.latency ?? ("real-time" as Latency)),
+			volume: getter(props?.volume ?? 0.5),
+			muted: getter(props?.muted ?? false),
+			target: getter(props?.target),
+		};
+
+		this.#videoSource = new Video.Source({
+			broadcast: this.input.broadcast,
+			target: this.input.target,
+			supported: this.#videoSupported,
+		});
+		this.#audioSource = new Audio.Source({
+			broadcast: this.input.broadcast,
+			supported: this.#audioSupported,
 		});
-		this.#audioSource = new Audio.Source(this.sync, {
-			broadcast: this.broadcast,
+
+		// Sources produce their per-rendition jitter, which Sync consumes. Sources
+		// don't depend on Sync, so this ordering avoids a construction cycle.
+		this.sync = new Sync({
+			latency: this.input.latency,
+			connection: this.input.connection,
+			video: this.#videoSource.output.jitter,
+			audio: this.#audioSource.output.jitter,
 		});
 
-		this.video = new VideoBackend(this.#videoSource);
-		this.audio = new AudioBackend(this.#audioSource);
+		this.video = new VideoBackend(this.#videoSource, this.#videoOutput);
+		this.audio = new AudioBackend(this.#audioSource, this.#audioOutput);
 
-		this.paused = Signal.from(props?.paused ?? false);
+		this.output = { jitter: this.sync.output.jitter };
 
 		this.signals.run(this.#runElement.bind(this));
 	}
 
 	#runElement(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
 		if (element instanceof HTMLCanvasElement) {
@@ -157,65 +178,92 @@ export class MultiBackend implements Backend {
 	}
 
 	#runWebcodecs(effect: Effect, element: HTMLCanvasElement): void {
-		const videoSource = new Video.Decoder(this.#videoSource);
-		const audioSource = new Audio.Decoder(this.#audioSource);
+		// This backend's support probes drive rendition selection.
+		effect.set(this.#videoSupported, videoDecoderSupported, undefined);
+		effect.set(this.#audioSupported, audioDecoderSupported, undefined);
 
-		const audioEmitter = new Audio.Emitter(audioSource, {
-			volume: this.audio.volume,
-			muted: this.audio.muted,
-			paused: this.paused,
+		const videoDecoder = new Video.Decoder(this.#videoSource, this.sync, { enabled: this.#videoEnabled });
+		const audioDecoder = new Audio.Decoder(this.#audioSource, this.sync, { enabled: this.#audioEnabled });
+
+		const audioEmitter = new Audio.Emitter(audioDecoder, {
+			volume: this.input.volume,
+			muted: this.input.muted,
+			paused: this.input.paused,
 		});
 
-		const videoRenderer = new Video.Renderer(videoSource, {
+		const videoRenderer = new Video.Renderer(videoDecoder, {
 			canvas: element,
-			paused: this.paused,
 		});
 
 		effect.cleanup(() => {
-			videoSource.close();
-			audioSource.close();
+			videoDecoder.close();
+			audioDecoder.close();
 			audioEmitter.close();
 			videoRenderer.close();
 		});
 
+		// Audio download follows the emitter's enable policy (paused/muted).
+		effect.proxy(this.#audioEnabled, audioEmitter.output.enabled);
+
+		// Video download policy (relocated from the renderer): when playing, follow
+		// visibility; when paused, fetch a single preview frame then stop.
+		effect.run((inner) => {
+			const paused = inner.get(this.input.paused);
+			const visible = inner.get(videoRenderer.output.visible);
+			if (!paused) {
+				this.#videoEnabled.set(visible);
+				return;
+			}
+			const frame = inner.get(videoDecoder.output.frame);
+			this.#videoEnabled.set(!frame);
+		});
+		effect.cleanup(() => {
+			this.#videoEnabled.set(false);
+			this.#audioEnabled.set(false);
+		});
+
 		// Proxy the read only signals to the backend.
-		effect.proxy(this.video.stats, videoSource.stats);
-		effect.proxy(this.video.buffered, videoSource.buffered);
-		effect.proxy(this.video.stalled, videoSource.stalled);
-		effect.proxy(this.video.timestamp, videoSource.timestamp);
-
-		effect.proxy(this.audio.stats, audioSource.stats);
-		effect.proxy(this.audio.buffered, audioSource.buffered);
-		effect.proxy(this.audio.context, audioSource.context);
+		effect.proxy(this.#videoOutput.stats, videoDecoder.output.stats);
+		effect.proxy(this.#videoOutput.buffered, videoDecoder.output.buffered);
+		effect.proxy(this.#videoOutput.stalled, videoDecoder.output.stalled);
+		effect.proxy(this.#videoOutput.timestamp, videoDecoder.output.timestamp);
+
+		effect.proxy(this.#audioOutput.stats, audioDecoder.output.stats);
+		effect.proxy(this.#audioOutput.buffered, audioDecoder.output.buffered);
+		effect.proxy(this.#audioOutput.context, audioDecoder.output.context);
 	}
 
 	#runMse(effect: Effect, element: HTMLVideoElement): void {
-		const mse = new Muxer(this.sync, {
-			paused: this.paused,
+		// This backend's support probes drive rendition selection.
+		effect.set(this.#videoSupported, videoMseSupported, undefined);
+		effect.set(this.#audioSupported, audioMseSupported, undefined);
+
+		const muxer = new Muxer(this.sync, {
+			paused: this.input.paused,
 			element,
 		});
 
-		const video = new Video.Mse(mse, this.#videoSource);
-		const audio = new Audio.Mse(mse, this.#audioSource, {
-			volume: this.audio.volume,
-			muted: this.audio.muted,
+		const video = new Video.Mse(muxer, this.sync, this.#videoSource);
+		const audio = new Audio.Mse(muxer, this.sync, this.#audioSource, {
+			volume: this.input.volume,
+			muted: this.input.muted,
 		});
 
 		effect.cleanup(() => {
 			video.close();
 			audio.close();
-			mse.close();
+			muxer.close();
 		});
 
 		// Proxy the read only signals to the backend.
-		effect.proxy(this.video.stats, video.stats);
-		effect.proxy(this.video.buffered, video.buffered);
-		effect.proxy(this.video.stalled, video.stalled);
-		effect.proxy(this.video.timestamp, video.timestamp);
-
-		effect.proxy(this.audio.stats, audio.stats);
-		effect.proxy(this.audio.buffered, audio.buffered);
-		effect.proxy(this.audio.context, audio.context);
+		effect.proxy(this.#videoOutput.stats, video.output.stats);
+		effect.proxy(this.#videoOutput.buffered, video.output.buffered);
+		effect.proxy(this.#videoOutput.stalled, video.output.stalled);
+		effect.proxy(this.#videoOutput.timestamp, video.output.timestamp);
+
+		effect.proxy(this.#audioOutput.stats, audio.output.stats);
+		effect.proxy(this.#audioOutput.buffered, audio.output.buffered);
+		effect.proxy(this.#audioOutput.context, audio.output.context);
 	}
 
 	close(): void {
diff --git a/js/watch/src/broadcast.ts b/js/watch/src/broadcast.ts
index dfdec3f00..d3d24ca1e 100644
--- a/js/watch/src/broadcast.ts
+++ b/js/watch/src/broadcast.ts
@@ -2,7 +2,7 @@ import * as Catalog from "@moq/hang/catalog";
 import * as Msf from "@moq/msf";
 import type * as Moq from "@moq/net";
 import { Path } from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
 import { toHang } from "./msf";
 
@@ -16,73 +16,78 @@ export function parseCatalogFormat(value: string | null): CatalogFormat | undefi
 	return CATALOG_FORMATS.find((f) => f === value);
 }
 
-export interface BroadcastProps {
-	connection?: Moq.Connection.Established | Signal<Moq.Connection.Established | undefined>;
+type Status = "offline" | "loading" | "live";
 
-	// All actively announced broadcast paths from the connection.
-	announced?: Getter<Set<Moq.Path.Valid>>;
+// Signals the component reads. Whoever owns the backing Signal (the caller, or
+// another component whose output is wired in) does the writing.
+type BroadcastInput = {
+	connection: Getter<Moq.Connection.Established | undefined>;
 
 	// Whether to start downloading the broadcast.
 	// Defaults to false so you can make sure everything is ready before starting.
-	enabled?: boolean | Signal<boolean>;
+	enabled: Getter<boolean>;
 
 	// The broadcast name.
-	name?: Moq.Path.Valid | Signal<Moq.Path.Valid>;
+	name: Getter<Moq.Path.Valid>;
 
 	// Whether to reload the broadcast when it goes offline.
 	// Defaults to false; pass true to wait for an announcement before subscribing.
-	reload?: boolean | Signal<boolean>;
+	reload: Getter<boolean>;
 
 	// Which catalog format to use. When `undefined` (the default), the format is
 	// auto-detected from the broadcast name extension (`.hang`, `.msf`), falling
 	// back to `"hang"` if the name has no recognized extension. Set to a
 	// specific value to override auto-detection.
-	catalogFormat?: CatalogFormat | Signal<CatalogFormat | undefined>;
-
-	// Initial catalog. Used directly when catalogFormat is "manual"; otherwise it's
-	// overwritten by whatever the fetched catalog track produces. Note: switching
-	// catalogFormat between "manual" and a fetched format will reset this signal
-	// to undefined when the fetched-format spawn tears down. Set the catalog
-	// after switching formats, not before.
-	catalog?: Catalog.Root | Signal<Catalog.Root | undefined>;
-}
+	catalogFormat: Getter<CatalogFormat | undefined>;
 
-// A catalog source that (optionally) reloads automatically when live/offline.
-export class Broadcast {
-	connection: Signal<Moq.Connection.Established | undefined>;
+	// The manual-mode catalog source. Used directly when catalogFormat is "manual";
+	// ignored otherwise. Read `output.catalog` for the effective catalog in any mode.
+	catalog: Getter<Catalog.Root | undefined>;
+};
+
+type BroadcastOutput = {
+	status: Signal<Status>;
+	active: Signal<Moq.Broadcast | undefined>;
 
-	enabled: Signal<boolean>;
-	name: Signal<Moq.Path.Valid>;
-	status = new Signal<"offline" | "loading" | "live">("offline");
-	reload: Signal<boolean>;
+	// The effective catalog: the fetched one, or a copy of input.catalog in manual mode.
+	catalog: Signal<Catalog.Root | undefined>;
+};
 
-	// `undefined` means auto-detect from the broadcast name extension.
-	catalogFormat: Signal<CatalogFormat | undefined>;
+export type BroadcastProps = InputProps<BroadcastInput> & {
+	// All actively announced broadcast paths from the connection.
+	announced?: Getter<Set<Moq.Path.Valid>>;
+};
 
-	#active = new Signal<Moq.Broadcast | undefined>(undefined);
-	readonly active: Getter<Moq.Broadcast | undefined> = this.#active;
+// A catalog source that (optionally) reloads automatically when live/offline.
+export class Broadcast {
+	readonly input: Readonlys<BroadcastInput>;
 
-	// The active catalog. Writable so users can supply it directly when
-	// catalogFormat is "manual"; otherwise the fetch loop owns writes.
-	catalog: Signal<Catalog.Root | undefined>;
+	readonly #output: BroadcastOutput = {
+		status: new Signal<Status>("offline"),
+		active: new Signal<Moq.Broadcast | undefined>(undefined),
+		catalog: new Signal<Catalog.Root | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	// All actively announced broadcast paths from the connection.
-	#announced: Getter<Set<Moq.Path.Valid>>;
+	readonly #announced: Getter<Set<Moq.Path.Valid>>;
 
 	// Whether `name` is currently in the announced set (or skipping the check).
 	// Derived in its own effect so that flaps for unrelated broadcasts don't
 	// retrigger the broadcast/catalog subscriptions.
-	#announcedNow = new Signal(false);
+	readonly #announcedNow = new Signal(false);
 
 	signals = new Effect();
 
 	constructor(props?: BroadcastProps) {
-		this.connection = Signal.from(props?.connection);
-		this.name = Signal.from(props?.name ?? Path.empty());
-		this.enabled = Signal.from(props?.enabled ?? false);
-		this.reload = Signal.from(props?.reload ?? false);
-		this.catalogFormat = Signal.from<CatalogFormat | undefined>(props?.catalogFormat);
-		this.catalog = Signal.from(props?.catalog);
+		this.input = {
+			connection: getter(props?.connection),
+			name: getter(props?.name ?? Path.empty()),
+			enabled: getter(props?.enabled ?? false),
+			reload: getter(props?.reload ?? false),
+			catalogFormat: getter<CatalogFormat | undefined>(props?.catalogFormat),
+			catalog: getter(props?.catalog),
+		};
 
 		this.#announced = props?.announced ?? new Signal(new Set());
 
@@ -92,7 +97,7 @@ export class Broadcast {
 	}
 
 	#runAnnouncedNow(effect: Effect): void {
-		const reload = effect.get(this.reload);
+		const reload = effect.get(this.input.reload);
 		if (!reload) {
 			this.#announcedNow.set(true);
 			return;
@@ -101,56 +106,57 @@ export class Broadcast {
 		// Cloudflare's relay does not yet support announcement subscriptions,
 		// so an announcement will never arrive. Fall back to subscribing
 		// immediately (reload=false behaviour) instead of waiting forever.
-		const conn = effect.get(this.connection);
+		const conn = effect.get(this.input.connection);
 		if (conn?.url.hostname.endsWith("mediaoverquic.com")) {
 			console.warn("Cloudflare relay does not support broadcast discovery yet; ignoring reload signal.");
 			this.#announcedNow.set(true);
 			return;
 		}
 
-		const name = effect.get(this.name);
+		const name = effect.get(this.input.name);
 		const announced = effect.get(this.#announced);
 		this.#announcedNow.set(announced.has(name));
 	}
 
 	#runBroadcast(effect: Effect): void {
-		const enabled = effect.get(this.enabled);
+		const enabled = effect.get(this.input.enabled);
 		if (!enabled) return;
 
 		if (!effect.get(this.#announcedNow)) return;
 
-		const conn = effect.get(this.connection);
+		const conn = effect.get(this.input.connection);
 		if (!conn) return;
 
-		const name = effect.get(this.name);
+		const name = effect.get(this.input.name);
 		const broadcast = conn.consume(name);
 		effect.cleanup(() => broadcast.close());
 
-		effect.set(this.#active, broadcast, undefined);
+		effect.set(this.#output.active, broadcast, undefined);
 	}
 
 	#runCatalog(effect: Effect): void {
-		const enabled = effect.get(this.enabled);
+		const enabled = effect.get(this.input.enabled);
 		if (!enabled) return;
 
-		const catalogFormat = effect.get(this.catalogFormat);
-		const name = effect.get(this.name);
+		const catalogFormat = effect.get(this.input.catalogFormat);
+		const name = effect.get(this.input.name);
 		// Explicit override beats name-derived auto-detection. When neither is
 		// set we fall back to the default, keeping legacy names that have no
 		// extension working.
 		const format: CatalogFormat = catalogFormat ?? Catalog.detectFormat(name) ?? Catalog.DEFAULT_FORMAT;
 
 		if (format === "manual") {
-			// User-supplied catalog; no track to fetch.
-			const catalog = effect.get(this.catalog);
-			this.status.set(catalog ? "live" : "loading");
+			// Mirror the caller-supplied catalog into the effective output.
+			const catalog = effect.get(this.input.catalog);
+			effect.set(this.#output.catalog, catalog, undefined);
+			this.#output.status.set(catalog ? "live" : "loading");
 			return;
 		}
 
-		const broadcast = effect.get(this.active);
+		const broadcast = effect.get(this.output.active);
 		if (!broadcast) return;
 
-		this.status.set("loading");
+		this.#output.status.set("loading");
 
 		const trackName = format === "hang" ? "catalog.json" : "catalog";
 		const track = broadcast.subscribe(trackName, Catalog.PRIORITY.catalog);
@@ -170,16 +176,16 @@ export class Broadcast {
 					const update = await Promise.race([effect.cancel, fetchNext()]);
 					if (!update) break;
 
-					console.debug("received catalog", format, this.name.peek(), update);
+					console.debug("received catalog", format, this.input.name.peek(), update);
 
-					this.catalog.set(update);
-					this.status.set("live");
+					this.#output.catalog.set(update);
+					this.#output.status.set("live");
 				}
 			} catch (err) {
-				console.warn("error fetching catalog", this.name.peek(), err);
+				console.warn("error fetching catalog", this.input.name.peek(), err);
 			} finally {
-				this.catalog.set(undefined);
-				this.status.set("offline");
+				this.#output.catalog.set(undefined);
+				this.#output.status.set("offline");
 			}
 		});
 	}
diff --git a/js/watch/src/chat/index.ts b/js/watch/src/chat/index.ts
index 8828bcaf0..93e8bff5c 100644
--- a/js/watch/src/chat/index.ts
+++ b/js/watch/src/chat/index.ts
@@ -1,36 +1,61 @@
 import type * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import { Message, type MessageProps } from "./message";
 import { Typing, type TypingProps } from "./typing";
 
-export interface ChatProps {
+// Signals the component reads. Whoever owns the backing Signal does the writing.
+type ChatInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+	catalog: Getter<Catalog.Root | undefined>;
+};
+
+type ChatOutput = {
+	catalog: Signal<Catalog.Chat | undefined>;
+};
+
+export type ChatProps = InputProps<ChatInput> & {
 	message?: MessageProps;
 	typing?: TypingProps;
-}
+};
 
 export class Chat {
+	readonly input: Readonlys<ChatInput>;
+
+	readonly #output: ChatOutput = {
+		catalog: new Signal<Catalog.Chat | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
+
 	message: Message;
 	typing: Typing;
 
-	#catalog = new Signal<Catalog.Chat | undefined>(undefined);
 	#signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: ChatProps,
-	) {
-		this.message = new Message(broadcast, catalog, props?.message);
-		this.typing = new Typing(broadcast, catalog, props?.typing);
+	constructor(props?: ChatProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+		};
+
+		this.message = new Message({
+			broadcast: this.input.broadcast,
+			catalog: this.input.catalog,
+			...props?.message,
+		});
+		this.typing = new Typing({
+			broadcast: this.input.broadcast,
+			catalog: this.input.catalog,
+			...props?.typing,
+		});
 
 		// Grab the chat section from the catalog (if it's changed).
 		this.#signals.run((effect) => {
-			const message = effect.get(this.message.catalog);
-			const typing = effect.get(this.typing.catalog);
+			const message = effect.get(this.message.output.catalog);
+			const typing = effect.get(this.typing.output.catalog);
 			if (!message && !typing) return;
 
-			effect.set(this.#catalog, {
+			effect.set(this.#output.catalog, {
 				message,
 				typing,
 			});
diff --git a/js/watch/src/chat/message.ts b/js/watch/src/chat/message.ts
index dbd562aca..9fabba1ed 100644
--- a/js/watch/src/chat/message.ts
+++ b/js/watch/src/chat/message.ts
@@ -1,45 +1,57 @@
 import * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
+
+// Signals the component reads. Whoever owns the backing Signal does the writing.
+type MessageInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+
+	// The catalog to grab the chat section from.
+	catalog: Getter<Catalog.Root | undefined>;
 
-export interface MessageProps {
 	// Whether to start downloading the chat.
 	// Defaults to false so you can make sure everything is ready before starting.
-	enabled?: boolean | Signal<boolean>;
-}
-
-export class Message {
-	broadcast: Signal<Moq.Broadcast | undefined>;
-	enabled: Signal<boolean>;
+	enabled: Getter<boolean>;
+};
 
+type MessageOutput = {
 	// Empty string is a valid message.
-	#latest = new Signal<string | undefined>(undefined);
-	readonly latest: Getter<string | undefined> = this.#latest;
+	latest: Signal<string | undefined>;
+
+	catalog: Signal<Catalog.Track | undefined>;
+};
+
+export type MessageProps = InputProps<MessageInput>;
+
+export class Message {
+	readonly input: Readonlys<MessageInput>;
 
-	#catalog = new Signal<Catalog.Track | undefined>(undefined);
-	readonly catalog: Getter<Catalog.Track | undefined> = this.#catalog;
+	readonly #output: MessageOutput = {
+		latest: new Signal<string | undefined>(undefined),
+		catalog: new Signal<Catalog.Track | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: MessageProps,
-	) {
-		this.broadcast = broadcast;
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: MessageProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+			enabled: getter(props?.enabled ?? false),
+		};
 
 		// Grab the chat section from the catalog (if it's changed).
 		this.#signals.run((effect) => {
-			if (!effect.get(this.enabled)) return;
-			this.#catalog.set(effect.get(catalog)?.chat?.message);
+			if (!effect.get(this.input.enabled)) return;
+			this.#output.catalog.set(effect.get(this.input.catalog)?.chat?.message);
 		});
 
 		this.#signals.run(this.#run.bind(this));
 	}
 
 	#run(effect: Effect) {
-		const values = effect.getAll([this.enabled, this.#catalog, this.broadcast]);
+		const values = effect.getAll([this.input.enabled, this.#output.catalog, this.input.broadcast]);
 		if (!values) return;
 		const [_, catalog, broadcast] = values;
 
@@ -47,8 +59,8 @@ export class Message {
 		effect.cleanup(() => track.close());
 
 		// Undefined is only when we're not subscribed to the track.
-		effect.set(this.#latest, "");
-		effect.cleanup(() => this.#latest.set(undefined));
+		effect.set(this.#output.latest, "");
+		effect.cleanup(() => this.#output.latest.set(undefined));
 
 		effect.spawn(async () => {
 			for (;;) {
@@ -56,7 +68,7 @@ export class Message {
 				if (frame === undefined) break;
 
 				// Use a function to avoid the dequal check.
-				this.#latest.set(frame);
+				this.#output.latest.set(frame);
 			}
 		});
 	}
diff --git a/js/watch/src/chat/typing.ts b/js/watch/src/chat/typing.ts
index 121f65a40..9aaab36f2 100644
--- a/js/watch/src/chat/typing.ts
+++ b/js/watch/src/chat/typing.ts
@@ -1,43 +1,56 @@
 import * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
+
+// Signals the component reads. Whoever owns the backing Signal does the writing.
+type TypingInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+
+	// The catalog to grab the chat section from.
+	catalog: Getter<Catalog.Root | undefined>;
 
-export interface TypingProps {
 	// Whether to start downloading the chat.
 	// Defaults to false so you can make sure everything is ready before starting.
-	enabled?: boolean | Signal<boolean>;
-}
+	enabled: Getter<boolean>;
+};
 
-export class Typing {
-	broadcast: Signal<Moq.Broadcast | undefined>;
-	enabled: Signal<boolean>;
+type TypingOutput = {
 	active: Signal<boolean | undefined>;
 
-	#catalog = new Signal<Catalog.Track | undefined>(undefined);
-	readonly catalog: Getter<Catalog.Track | undefined> = this.#catalog;
+	catalog: Signal<Catalog.Track | undefined>;
+};
+
+export type TypingProps = InputProps<TypingInput>;
+
+export class Typing {
+	readonly input: Readonlys<TypingInput>;
+
+	readonly #output: TypingOutput = {
+		active: new Signal<boolean | undefined>(undefined),
+		catalog: new Signal<Catalog.Track | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: TypingProps,
-	) {
-		this.broadcast = broadcast;
-		this.active = new Signal<boolean | undefined>(undefined);
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: TypingProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+			enabled: getter(props?.enabled ?? false),
+		};
 
 		// Grab the chat section from the catalog (if it's changed).
 		this.#signals.run((effect) => {
-			if (!effect.get(this.enabled)) return;
-			this.#catalog.set(effect.get(catalog)?.chat?.typing);
+			if (!effect.get(this.input.enabled)) return;
+			this.#output.catalog.set(effect.get(this.input.catalog)?.chat?.typing);
 		});
 
 		this.#signals.run(this.#run.bind(this));
 	}
 
 	#run(effect: Effect) {
-		const values = effect.getAll([this.enabled, this.#catalog, this.broadcast]);
+		const values = effect.getAll([this.input.enabled, this.#output.catalog, this.input.broadcast]);
 		if (!values) return;
 		const [_, catalog, broadcast] = values;
 
@@ -49,11 +62,11 @@ export class Typing {
 				const value = await track.readBool();
 				if (value === undefined) break;
 
-				this.active.set(value);
+				this.#output.active.set(value);
 			}
 		});
 
-		effect.cleanup(() => this.active.set(undefined));
+		effect.cleanup(() => this.#output.active.set(undefined));
 	}
 
 	close() {
diff --git a/js/watch/src/element.ts b/js/watch/src/element.ts
index d4f8798d4..748c8ddbe 100644
--- a/js/watch/src/element.ts
+++ b/js/watch/src/element.ts
@@ -5,6 +5,7 @@ import { Effect, Signal } from "@moq/signals";
 import { MultiBackend } from "./backend";
 import { Broadcast, type CatalogFormat, parseCatalogFormat } from "./broadcast";
 import type { Latency } from "./sync";
+import type * as Video from "./video";
 
 const OBSERVED = ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter", "catalog-format"] as const;
 type Observed = (typeof OBSERVED)[number];
@@ -27,9 +28,33 @@ export default class MoqWatch extends HTMLElement {
 	// The backend that powers this element.
 	backend: MultiBackend;
 
+	// The mutable user controls. As the top of the tree, this element owns the
+	// writable Signals and wires read-only views into broadcast/backend. The UI and
+	// the attribute/property accessors read and write these directly.
+	readonly controls = {
+		paused: new Signal(false),
+		volume: new Signal(0.5),
+		muted: new Signal(false),
+		latency: new Signal<Latency>("real-time"),
+		// The desired video rendition (resolution/bitrate cap).
+		target: new Signal<Video.Target | undefined>(undefined),
+	};
+
+	// Broadcast configuration owned here and wired into `broadcast` as inputs.
+	#name = new Signal<Moq.Path.Valid>(Moq.Path.empty());
+	#reload = new Signal(false);
+	#catalogFormat = new Signal<CatalogFormat | undefined>(undefined);
+	#catalog = new Signal<Catalog.Root | undefined>(undefined);
+
+	// The canvas/video element to render into.
+	#element = new Signal<HTMLCanvasElement | HTMLVideoElement | undefined>(undefined);
+
 	// Set when the element is connected to the DOM.
 	#enabled = new Signal(false);
 
+	// Stashed volume to restore on unmute.
+	#unmuteVolume = 0.5;
+
 	// Expose the Effect class, so users can easily create effects scoped to this element.
 	signals = new Effect();
 
@@ -47,15 +72,52 @@ export default class MoqWatch extends HTMLElement {
 			connection: this.connection.established,
 			announced: this.connection.announced,
 			enabled: this.#enabled,
+			name: this.#name,
+			reload: this.#reload,
+			catalogFormat: this.#catalogFormat,
+			catalog: this.#catalog,
 		});
 		this.signals.cleanup(() => this.broadcast.close());
 
 		this.backend = new MultiBackend({
+			element: this.#element,
 			broadcast: this.broadcast,
 			connection: this.connection.established,
+			paused: this.controls.paused,
+			latency: this.controls.latency,
+			volume: this.controls.volume,
+			muted: this.controls.muted,
+			target: this.controls.target,
 		});
 		this.signals.cleanup(() => this.backend.close());
 
+		// Mute/volume coupling, relocated here from the audio emitter (the writable
+		// volume/muted Signals live on this element). Muting stashes and zeroes the
+		// volume; a zero volume reports as muted.
+		this.signals.run((effect) => {
+			const muted = effect.get(this.controls.muted);
+			if (muted) {
+				this.#unmuteVolume = this.controls.volume.peek() || 0.5;
+				this.controls.volume.set(0);
+			} else {
+				this.controls.volume.set(this.#unmuteVolume);
+			}
+		});
+		this.signals.run((effect) => {
+			const volume = effect.get(this.controls.volume);
+			this.controls.muted.set(volume === 0);
+		});
+
+		// Keep the volume control in sync with native <video> controls (MSE backend).
+		// Relocated here from the audio MSE backend, which now only reads volume/muted.
+		this.signals.run((effect) => {
+			const element = effect.get(this.#element);
+			if (!(element instanceof HTMLVideoElement)) return;
+			effect.event(element, "volumechange", () => {
+				this.controls.volume.set(element.volume);
+			});
+		});
+
 		// Watch to see if the canvas element is added or removed.
 		const setElement = () => {
 			const canvas = this.querySelector("canvas") as HTMLCanvasElement | undefined;
@@ -63,7 +125,7 @@ export default class MoqWatch extends HTMLElement {
 			if (canvas && video) {
 				throw new Error("Cannot have both canvas and video elements");
 			}
-			this.backend.element.set(canvas ?? video);
+			this.#element.set(canvas ?? video);
 		};
 
 		const observer = new MutationObserver(setElement);
@@ -85,12 +147,12 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const name = effect.get(this.broadcast.name);
+			const name = effect.get(this.#name);
 			this.setAttribute("name", name.toString());
 		});
 
 		this.signals.run((effect) => {
-			const muted = effect.get(this.backend.audio.muted);
+			const muted = effect.get(this.controls.muted);
 			if (muted) {
 				this.setAttribute("muted", "");
 			} else {
@@ -99,7 +161,7 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const paused = effect.get(this.backend.paused);
+			const paused = effect.get(this.controls.paused);
 			if (paused) {
 				this.setAttribute("paused", "true");
 			} else {
@@ -108,16 +170,16 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const volume = effect.get(this.backend.audio.volume);
+			const volume = effect.get(this.controls.volume);
 			this.setAttribute("volume", volume.toString());
 		});
 
 		this.signals.run((effect) => {
-			const latency = effect.get(this.backend.latency);
+			const latency = effect.get(this.controls.latency);
 			if (latency === "real-time") {
 				this.setAttribute("latency", "real-time");
 			} else {
-				const jitter = Math.floor(effect.get(this.backend.jitter));
+				const jitter = Math.floor(effect.get(this.backend.output.jitter));
 				this.setAttribute("latency", jitter.toString());
 			}
 		});
@@ -127,7 +189,7 @@ export default class MoqWatch extends HTMLElement {
 		const updateDimensions = (width: number, height: number) => {
 			if (width <= 0 || height <= 0) return;
 			const dpr = window.devicePixelRatio || 1;
-			this.backend.video.source.target.update((prev) => ({
+			this.controls.target.update((prev) => ({
 				...prev,
 				width: Math.round(width * dpr),
 				height: Math.round(height * dpr),
@@ -163,7 +225,7 @@ export default class MoqWatch extends HTMLElement {
 
 	#setLatencyNumber(value: string | null) {
 		const parsed = value ? Number.parseFloat(value) : Number.NaN;
-		this.backend.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);
+		this.controls.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);
 	}
 
 	attributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {
@@ -174,19 +236,19 @@ export default class MoqWatch extends HTMLElement {
 		if (name === "url") {
 			this.connection.url.set(newValue ? new URL(newValue) : undefined);
 		} else if (name === "name") {
-			this.broadcast.name.set(Moq.Path.from(newValue ?? ""));
+			this.#name.set(Moq.Path.from(newValue ?? ""));
 		} else if (name === "paused") {
-			this.backend.paused.set(newValue !== null);
+			this.controls.paused.set(newValue !== null);
 		} else if (name === "volume") {
 			const volume = newValue ? Number.parseFloat(newValue) : 0.5;
-			this.backend.audio.volume.set(volume);
+			this.controls.volume.set(volume);
 		} else if (name === "muted") {
-			this.backend.audio.muted.set(newValue !== null);
+			this.controls.muted.set(newValue !== null);
 		} else if (name === "reload") {
-			this.broadcast.reload.set(newValue !== null);
+			this.#reload.set(newValue !== null);
 		} else if (name === "latency") {
 			if (!newValue || newValue === "real-time") {
-				this.backend.latency.set("real-time");
+				this.controls.latency.set("real-time");
 			} else {
 				this.#setLatencyNumber(newValue);
 			}
@@ -194,7 +256,7 @@ export default class MoqWatch extends HTMLElement {
 			// Deprecated: use latency="<number>" instead.
 			this.#setLatencyNumber(newValue);
 		} else if (name === "catalog-format") {
-			this.broadcast.catalogFormat.set(parseCatalogFormat(newValue));
+			this.#catalogFormat.set(parseCatalogFormat(newValue));
 		} else {
 			const exhaustive: never = name;
 			throw new Error(`Invalid attribute: ${exhaustive}`);
@@ -210,69 +272,69 @@ export default class MoqWatch extends HTMLElement {
 	}
 
 	get name(): Moq.Path.Valid {
-		return this.broadcast.name.peek();
+		return this.#name.peek();
 	}
 
 	set name(value: string | Moq.Path.Valid) {
-		this.broadcast.name.set(Moq.Path.from(value));
+		this.#name.set(Moq.Path.from(value));
 	}
 
 	get paused(): boolean {
-		return this.backend.paused.peek();
+		return this.controls.paused.peek();
 	}
 
 	set paused(value: boolean) {
-		this.backend.paused.set(value);
+		this.controls.paused.set(value);
 	}
 
 	get volume(): number {
-		return this.backend.audio.volume.peek();
+		return this.controls.volume.peek();
 	}
 
 	set volume(value: number) {
-		this.backend.audio.volume.set(value);
+		this.controls.volume.set(value);
 	}
 
 	get muted(): boolean {
-		return this.backend.audio.muted.peek();
+		return this.controls.muted.peek();
 	}
 
 	set muted(value: boolean) {
-		this.backend.audio.muted.set(value);
+		this.controls.muted.set(value);
 	}
 
 	get reload(): boolean {
-		return this.broadcast.reload.peek();
+		return this.#reload.peek();
 	}
 
 	set reload(value: boolean) {
-		this.broadcast.reload.set(value);
+		this.#reload.set(value);
 	}
 
 	get latency(): Latency {
-		return this.backend.latency.peek();
+		return this.controls.latency.peek();
 	}
 
 	set latency(value: Latency) {
-		this.backend.latency.set(value);
+		this.controls.latency.set(value);
 	}
 
 	/** The jitter buffer in milliseconds. */
 	get jitter(): Time.Milli {
-		return this.backend.jitter.peek();
+		return this.backend.output.jitter.peek();
 	}
 
 	/** @deprecated Use `latency = <number>` instead. */
 	set jitter(value: number) {
-		this.backend.latency.set(value as Time.Milli);
+		this.controls.latency.set(value as Time.Milli);
 	}
 
 	get catalogFormat(): CatalogFormat | undefined {
-		return this.broadcast.catalogFormat.peek();
+		return this.#catalogFormat.peek();
 	}
 
 	set catalogFormat(value: CatalogFormat | undefined) {
-		this.broadcast.catalogFormat.set(value);
+		this.#catalogFormat.set(value);
 	}
 
 	/**
@@ -280,11 +342,11 @@ export default class MoqWatch extends HTMLElement {
 	 * for `"hang"` and `"msf"` this is overwritten by the fetch loop.
 	 */
 	get catalog(): Catalog.Root | undefined {
-		return this.broadcast.catalog.peek();
+		return this.broadcast.output.catalog.peek();
 	}
 
 	set catalog(value: Catalog.Root | undefined) {
-		this.broadcast.catalog.set(value);
+		this.#catalog.set(value);
 	}
 }
 
diff --git a/js/watch/src/location/index.ts b/js/watch/src/location/index.ts
index 05672c9bb..2f8095a11 100644
--- a/js/watch/src/location/index.ts
+++ b/js/watch/src/location/index.ts
@@ -1,27 +1,35 @@
 import type * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, type Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys } from "@moq/signals";
 import { Peers, type PeersProps } from "./peers";
 import { Window, type WindowProps } from "./window";
 
-export interface Props {
+type RootInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+	catalog: Getter<Catalog.Root | undefined>;
+};
+
+export type Props = InputProps<RootInput> & {
 	window?: WindowProps;
 	peers?: PeersProps;
-}
+};
 
 export class Root {
+	readonly input: Readonlys<RootInput>;
+
 	window: Window;
 	peers: Peers;
 
 	signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: Props,
-	) {
-		this.window = new Window(broadcast, catalog, props?.window);
-		this.peers = new Peers(broadcast, catalog, props?.peers);
+	constructor(props?: Props) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+		};
+
+		this.window = new Window({ ...props?.window, broadcast: this.input.broadcast, catalog: this.input.catalog });
+		this.peers = new Peers({ ...props?.peers, broadcast: this.input.broadcast, catalog: this.input.catalog });
 	}
 
 	close() {
diff --git a/js/watch/src/location/peers.ts b/js/watch/src/location/peers.ts
index 8c55336b6..23540ccc9 100644
--- a/js/watch/src/location/peers.ts
+++ b/js/watch/src/location/peers.ts
@@ -1,38 +1,48 @@
 import * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
 import * as Zod from "@moq/net/zod";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
-export interface PeersProps {
-	enabled?: boolean | Signal<boolean>;
-}
+type PeersInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+	catalog: Getter<Catalog.Root | undefined>;
+	enabled: Getter<boolean>;
+};
+
+type PeersOutput = {
+	positions: Signal<Record<string, Catalog.Position> | undefined>;
+};
+
+export type PeersProps = InputProps<PeersInput>;
 
 export class Peers {
-	enabled: Signal<boolean>;
-	broadcast: Signal<Moq.Broadcast | undefined>;
+	readonly input: Readonlys<PeersInput>;
+
+	readonly #output: PeersOutput = {
+		positions: new Signal<Record<string, Catalog.Position> | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#catalog = new Signal<Catalog.Track | undefined>(undefined);
-	#positions = new Signal<Record<string, Catalog.Position> | undefined>(undefined);
 
 	signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: PeersProps,
-	) {
-		this.broadcast = broadcast;
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: PeersProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+			enabled: getter(props?.enabled ?? false),
+		};
 
 		this.signals.run((effect) => {
-			this.#catalog.set(effect.get(catalog)?.location?.peers);
+			this.#catalog.set(effect.get(this.input.catalog)?.location?.peers);
 		});
 
 		this.signals.run(this.#run.bind(this));
 	}
 
 	#run(effect: Effect) {
-		const values = effect.getAll([this.enabled, this.#catalog, this.broadcast]);
+		const values = effect.getAll([this.input.enabled, this.#catalog, this.input.broadcast]);
 		if (!values) return;
 		const [_, catalog, broadcast] = values;
 
@@ -48,18 +58,14 @@ export class Peers {
 				const frame = await Zod.read(track, Catalog.PeersSchema);
 				if (!frame) break;
 
-				this.#positions.set(frame);
+				this.#output.positions.set(frame);
 			}
 		} finally {
-			this.#positions.set(undefined);
+			this.#output.positions.set(undefined);
 			track.close();
 		}
 	}
 
-	get positions(): Getter<Record<string, Catalog.Position> | undefined> {
-		return this.#positions;
-	}
-
 	close() {
 		this.signals.close();
 	}
diff --git a/js/watch/src/location/window.ts b/js/watch/src/location/window.ts
index 0a00fd7dc..8b98bfc3d 100644
--- a/js/watch/src/location/window.ts
+++ b/js/watch/src/location/window.ts
@@ -1,50 +1,56 @@
 import * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
 import * as Zod from "@moq/net/zod";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
-export interface WindowProps {
-	enabled?: boolean | Signal<boolean>;
-}
+type WindowInput = {
+	broadcast: Getter<Moq.Broadcast | undefined>;
+	catalog: Getter<Catalog.Root | undefined>;
+	enabled: Getter<boolean>;
+};
 
-export class Window {
-	broadcast: Signal<Moq.Broadcast | undefined>;
+type WindowOutput = {
+	handle: Signal<string | undefined>;
+	position: Signal<Catalog.Position | undefined>;
+};
 
-	enabled: Signal<boolean>;
+export type WindowProps = InputProps<WindowInput>;
 
-	#handle = new Signal<string | undefined>(undefined);
-	readonly handle: Getter<string | undefined> = this.#handle;
+export class Window {
+	readonly input: Readonlys<WindowInput>;
 
-	#catalog = new Signal<Catalog.Location | undefined>(undefined);
+	readonly #output: WindowOutput = {
+		handle: new Signal<string | undefined>(undefined),
+		position: new Signal<Catalog.Position | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
-	#position = new Signal<Catalog.Position | undefined>(undefined);
-	readonly position: Getter<Catalog.Position | undefined> = this.#position;
+	#catalog = new Signal<Catalog.Location | undefined>(undefined);
 
 	signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: WindowProps,
-	) {
-		this.broadcast = broadcast;
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: WindowProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+			enabled: getter(props?.enabled ?? false),
+		};
 
 		this.signals.run((effect) => {
-			this.#catalog.set(effect.get(catalog)?.location);
+			this.#catalog.set(effect.get(this.input.catalog)?.location);
 		});
 
 		this.signals.run((effect) => {
-			if (!effect.get(this.enabled)) return;
-			this.#position.set(effect.get(this.#catalog)?.initial);
+			if (!effect.get(this.input.enabled)) return;
+			this.#output.position.set(effect.get(this.#catalog)?.initial);
 		});
 
 		this.signals.run((effect) => {
-			this.#handle.set(effect.get(this.#catalog)?.handle);
+			this.#output.handle.set(effect.get(this.#catalog)?.handle);
 		});
 
 		this.signals.run((effect) => {
-			const broadcast = effect.get(this.broadcast);
+			const broadcast = effect.get(this.input.broadcast);
 			if (!broadcast) return;
 
 			const updates = effect.get(this.#catalog)?.track;
@@ -63,10 +69,10 @@ export class Window {
 				const position = await Zod.read(track, Catalog.PositionSchema);
 				if (!position) break;
 
-				this.#position.set(position);
+				this.#output.position.set(position);
 			}
 		} finally {
-			this.#position.set(undefined);
+			this.#output.position.set(undefined);
 			track.close();
 		}
 	}
diff --git a/js/watch/src/mse.ts b/js/watch/src/mse.ts
index c48953c0b..90d245e0d 100644
--- a/js/watch/src/mse.ts
+++ b/js/watch/src/mse.ts
@@ -1,32 +1,39 @@
 import { Time } from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { Sync } from "./sync";
 
-export type MuxerProps = {
-	element?: HTMLMediaElement | Signal<HTMLMediaElement | undefined>;
-	paused?: boolean | Signal<boolean>;
+type MuxerInput = {
+	element: Getter<HTMLMediaElement | undefined>;
+	paused: Getter<boolean>;
 };
 
+type MuxerOutput = {
+	mediaSource: Signal<MediaSource | undefined>;
+};
+
+export type MuxerProps = InputProps<MuxerInput>;
+
 /**
  * MSE-based video source for CMAF/fMP4 fragments.
  * Uses Media Source Extensions to handle complete moof+mdat fragments.
  */
 export class Muxer {
-	element: Signal<HTMLMediaElement | undefined>;
-
-	paused: Signal<boolean>;
-
-	#sync: Sync;
+	readonly input: Readonlys<MuxerInput>;
+	sync: Sync;
 
-	#mediaSource = new Signal<MediaSource | undefined>(undefined);
-	readonly mediaSource: Getter<MediaSource | undefined> = this.#mediaSource;
+	readonly #output: MuxerOutput = {
+		mediaSource: new Signal<MediaSource | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
 	constructor(sync: Sync, props?: MuxerProps) {
-		this.element = Signal.from(props?.element);
-		this.paused = Signal.from(props?.paused ?? false);
-		this.#sync = sync;
+		this.input = {
+			element: getter(props?.element),
+			paused: getter(props?.paused ?? false),
+		};
+		this.sync = sync;
 
 		this.#signals.run(this.#runMediaSource.bind(this));
 		this.#signals.run(this.#runSkip.bind(this));
@@ -36,7 +43,7 @@ export class Muxer {
 	}
 
 	#runMediaSource(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
 		const mediaSource = new MediaSource();
@@ -48,7 +55,7 @@ export class Muxer {
 			mediaSource,
 			"sourceopen",
 			() => {
-				effect.set(this.#mediaSource, mediaSource);
+				effect.set(this.#output.mediaSource, mediaSource);
 			},
 			{ once: true },
 		);
@@ -59,16 +66,16 @@ export class Muxer {
 	}
 
 	#runSkip(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
 		// Don't skip when paused, otherwise we'll keep jerking forward.
-		const paused = effect.get(this.paused);
+		const paused = effect.get(this.input.paused);
 		if (paused) return;
 
 		// Use the computed latency (catalog jitter + user jitter)
 		// Convert to seconds since DOM APIs use seconds
-		const latency = Time.Milli.toSecond(effect.get(this.#sync.buffer));
+		const latency = Time.Milli.toSecond(effect.get(this.sync.output.buffer));
 
 		effect.interval(() => {
 			// Skip over gaps based on the effective latency.
@@ -88,10 +95,10 @@ export class Muxer {
 	}
 
 	#runTrim(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
-		const media = effect.get(this.mediaSource);
+		const media = effect.get(this.output.mediaSource);
 		if (!media) return;
 
 		// Periodically clean up old buffered data.
@@ -110,10 +117,10 @@ export class Muxer {
 	}
 
 	#runPaused(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
-		const paused = effect.get(this.paused);
+		const paused = effect.get(this.input.paused);
 		if (paused && !element.paused) {
 			element.pause();
 		} else if (!paused && element.paused) {
@@ -125,17 +132,17 @@ export class Muxer {
 
 	// Seek to the target position based on the reference and latency.
 	#runSync(effect: Effect): void {
-		const element = effect.get(this.element);
+		const element = effect.get(this.input.element);
 		if (!element) return;
 
 		// Don't seek when paused, otherwise we'll keep jerking around.
-		const paused = effect.get(this.paused);
+		const paused = effect.get(this.input.paused);
 		if (paused) return;
 
-		const reference = effect.get(this.#sync.reference);
+		const reference = effect.get(this.sync.output.reference);
 		if (reference === undefined) return;
 
-		const latency = effect.get(this.#sync.buffer);
+		const latency = effect.get(this.sync.output.buffer);
 
 		// Compute the target currentTime based on reference and latency.
 		// reference = performance.now() - frameTimestamp (in ms) when we received the earliest frame
diff --git a/js/watch/src/preview.ts b/js/watch/src/preview.ts
index 8f4224002..646466a3a 100644
--- a/js/watch/src/preview.ts
+++ b/js/watch/src/preview.ts
@@ -1,34 +1,45 @@
 import * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
 import * as Zod from "@moq/net/zod";
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
-export interface PreviewProps {
-	enabled?: boolean | Signal<boolean>;
-}
+type PreviewInput = {
+	enabled: Getter<boolean>;
+	broadcast: Getter<Moq.Broadcast | undefined>;
+	catalog: Getter<Catalog.Root | undefined>;
+};
+
+type PreviewOutput = {
+	preview: Signal<Catalog.Preview | undefined>;
+};
+
+export type PreviewProps = InputProps<PreviewInput>;
 
 export class Preview {
-	broadcast: Signal<Moq.Broadcast | undefined>;
-	enabled: Signal<boolean>;
-	preview = new Signal<Catalog.Preview | undefined>(undefined);
+	readonly input: Readonlys<PreviewInput>;
+
+	readonly #output: PreviewOutput = {
+		preview: new Signal<Catalog.Preview | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
+
 	#catalog = new Signal<Catalog.Track | undefined>(undefined);
 
 	#signals = new Effect();
 
-	constructor(
-		broadcast: Signal<Moq.Broadcast | undefined>,
-		catalog: Signal<Catalog.Root | undefined>,
-		props?: PreviewProps,
-	) {
-		this.broadcast = broadcast;
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: PreviewProps) {
+		this.input = {
+			enabled: getter(props?.enabled ?? false),
+			broadcast: getter(props?.broadcast),
+			catalog: getter(props?.catalog),
+		};
 
 		this.#signals.run((effect) => {
-			this.#catalog.set(effect.get(catalog)?.preview);
+			this.#catalog.set(effect.get(this.input.catalog)?.preview);
 		});
 
 		this.#signals.run((effect) => {
-			const values = effect.getAll([this.enabled, this.broadcast, this.#catalog]);
+			const values = effect.getAll([this.input.enabled, this.input.broadcast, this.#catalog]);
 			if (!values) return;
 			const [_, broadcast, catalog] = values;
 
@@ -41,13 +52,13 @@ export class Preview {
 					const info = await Zod.read(track, Catalog.PreviewSchema);
 					if (!info) return;
 
-					this.preview.set(info);
+					this.#output.preview.set(info);
 				} catch (error) {
 					console.warn("Failed to parse preview JSON:", error);
 				}
 			});
 
-			effect.cleanup(() => this.preview.set(undefined));
+			effect.cleanup(() => this.#output.preview.set(undefined));
 		});
 	}
 
diff --git a/js/watch/src/sync.ts b/js/watch/src/sync.ts
index 505a9967f..73be6d1ec 100644
--- a/js/watch/src/sync.ts
+++ b/js/watch/src/sync.ts
@@ -1,6 +1,6 @@
 import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
 /** Latency: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
 export type Latency = "real-time" | Time.Milli;
@@ -8,48 +8,55 @@ export type Latency = "real-time" | Time.Milli;
 const MIN_JITTER = 20 as Time.Milli;
 const FALLBACK_JITTER = 100 as Time.Milli;
 
-export interface SyncProps {
-	latency?: Latency | Signal<Latency>;
-	connection?: Signal<Moq.Connection.Established | undefined>;
-	audio?: Time.Milli | Signal<Time.Milli | undefined>;
-	video?: Time.Milli | Signal<Time.Milli | undefined>;
-}
+type SyncInput = {
+	// The latency setting: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
+	latency: Getter<Latency>;
 
-export class Sync {
+	// The connection used for "real-time" jitter: PROBE supplies RTT.
+	connection: Getter<Moq.Connection.Established | undefined>;
+
+	// Any additional delay required for audio or video (wired from the per-rendition source).
+	audio: Getter<Time.Milli | undefined>;
+	video: Getter<Time.Milli | undefined>;
+};
+
+type SyncOutput = {
 	// The earliest time we've received a frame, relative to its timestamp.
 	// This will keep being updated as we catch up to the live playhead then will be relatively static.
-	#reference = new Signal<Time.Milli | undefined>(undefined);
-	readonly reference: Signal<Time.Milli | undefined> = this.#reference;
+	reference: Signal<Time.Milli | undefined>;
 
-	// The latency setting: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
-	latency: Signal<Latency>;
+	// The total buffer required: jitter + max(audio, video).
+	buffer: Signal<Time.Milli>;
 
 	// The jitter buffer in milliseconds (always numeric).
 	// In "real-time" mode this is updated automatically from RTT.
 	// When latency is a number, jitter equals that number.
 	jitter: Signal<Time.Milli>;
 
-	// Any additional delay required for audio or video.
-	audio: Signal<Time.Milli | undefined>;
-	video: Signal<Time.Milli | undefined>;
+	// The media timestamp of the most recently received frame.
+	timestamp: Signal<Time.Milli | undefined>;
+};
 
-	// The total buffer required: jitter + max(audio, video).
-	#buffer = new Signal<Time.Milli>(Time.Milli.zero);
-	readonly buffer: Signal<Time.Milli> = this.#buffer;
+export type SyncProps = InputProps<SyncInput>;
+
+export class Sync {
+	readonly input: Readonlys<SyncInput>;
+
+	readonly #output: SyncOutput = {
+		reference: new Signal<Time.Milli | undefined>(undefined),
+		buffer: new Signal<Time.Milli>(Time.Milli.zero),
+		jitter: new Signal<Time.Milli>(FALLBACK_JITTER),
+		timestamp: new Signal<Time.Milli | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	// A ghetto way to learn when the reference/buffer changes.
 	// There's probably a way to use Effect, but lets keep it simple for now.
 	#update: PromiseWithResolvers<void>;
 
-	// The media timestamp of the most recently received frame.
-	readonly timestamp = new Signal<Time.Milli | undefined>(undefined);
-
 	// Per-label late-frame tracking: accumulate count and max lateness, flush on recovery.
 	#late = new Map<string, { count: number; maxMs: number }>();
 
-	// The connection used for "real-time" jitter: PROBE supplies RTT.
-	#connection?: Signal<Moq.Connection.Established | undefined>;
-
 	// Minimum RTT seen, used as the baseline for jitter calculation.
 	// Avoids inflating jitter due to bufferbloat.
 	#minRtt: number | undefined;
@@ -57,11 +64,12 @@ export class Sync {
 	signals = new Effect();
 
 	constructor(props?: SyncProps) {
-		this.latency = Signal.from(props?.latency ?? ("real-time" as Latency));
-		this.jitter = new Signal<Time.Milli>(FALLBACK_JITTER);
-		this.#connection = props?.connection;
-		this.audio = Signal.from(props?.audio);
-		this.video = Signal.from(props?.video);
+		this.input = {
+			latency: getter(props?.latency ?? ("real-time" as Latency)),
+			connection: getter(props?.connection),
+			audio: getter(props?.audio),
+			video: getter(props?.video),
+		};
 
 		this.#update = Promise.withResolvers();
 
@@ -70,17 +78,17 @@ export class Sync {
 	}
 
 	#runJitter(effect: Effect): void {
-		const latency = effect.get(this.latency);
+		const latency = effect.get(this.input.latency);
 
 		if (typeof latency === "number") {
 			// Fixed mode: latency value is the jitter.
 			this.#minRtt = undefined;
-			this.jitter.set(latency);
+			this.#output.jitter.set(latency);
 			return;
 		}
 
 		// "real-time" mode: compute jitter from RTT on the established connection.
-		const conn = this.#connection ? effect.get(this.#connection) : undefined;
+		const conn = effect.get(this.input.connection);
 		const rttSignal = conn?.rtt;
 		const rtt = rttSignal ? effect.get(rttSignal) : undefined;
 		if (rtt !== undefined) {
@@ -89,22 +97,22 @@ export class Sync {
 
 			// Buffer enough for a retransmit (1 RTT for ACK + retransmit).
 			const jitter = Math.max(MIN_JITTER, this.#minRtt * 1.25) as Time.Milli;
-			this.jitter.set(jitter);
+			this.#output.jitter.set(jitter);
 			return;
 		}
 
 		// No RTT available: fall back to static default.
 		this.#minRtt = undefined;
-		this.jitter.set(FALLBACK_JITTER);
+		this.#output.jitter.set(FALLBACK_JITTER);
 	}
 
 	#runBuffer(effect: Effect): void {
-		const jitter = effect.get(this.jitter);
-		const video = effect.get(this.video) ?? Time.Milli.zero;
-		const audio = effect.get(this.audio) ?? Time.Milli.zero;
+		const jitter = effect.get(this.#output.jitter);
+		const video = effect.get(this.input.video) ?? Time.Milli.zero;
+		const audio = effect.get(this.input.audio) ?? Time.Milli.zero;
 
 		const buffer = Time.Milli.add(Time.Milli.max(video, audio), jitter);
-		this.#buffer.set(buffer);
+		this.#output.buffer.set(buffer);
 
 		this.#update.resolve();
 		this.#update = Promise.withResolvers();
@@ -112,16 +120,18 @@ export class Sync {
 
 	// Update the reference if this is the earliest frame we've seen, relative to its timestamp.
 	received(timestamp: Time.Milli, label = ""): void {
-		this.timestamp.update((current) => (current === undefined || timestamp > current ? timestamp : current));
+		this.#output.timestamp.update((current) =>
+			current === undefined || timestamp > current ? timestamp : current,
+		);
 		const now = Time.Milli.now();
 		const ref = Time.Milli.sub(now, timestamp);
-		const currentRef = this.#reference.peek();
+		const currentRef = this.#output.reference.peek();
 
 		if (currentRef !== undefined) {
 			// Check if `wait()` would not sleep at all.
 			// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
 			// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
-			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#buffer.peek());
+			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#output.buffer.peek());
 			if (sleep < 0) {
 				const entry = this.#late.get(label);
 				if (entry) {
@@ -146,7 +156,7 @@ export class Sync {
 			}
 		}
 
-		this.#reference.set(ref);
+		this.#output.reference.set(ref);
 		this.#update.resolve();
 		this.#update = Promise.withResolvers();
 	}
@@ -154,14 +164,14 @@ export class Sync {
 	// The PTS that should be rendering right now, derived from the reference + buffer.
 	// Returns undefined if no frames have been received yet.
 	now(): Time.Milli | undefined {
-		const reference = this.#reference.peek();
+		const reference = this.#output.reference.peek();
 		if (reference === undefined) return undefined;
-		return Time.Milli.sub(Time.Milli.sub(Time.Milli.now(), reference), this.#buffer.peek());
+		return Time.Milli.sub(Time.Milli.sub(Time.Milli.now(), reference), this.#output.buffer.peek());
 	}
 
 	// Sleep until it's time to render this frame.
 	async wait(timestamp: Time.Milli): Promise<void> {
-		const reference = this.#reference.peek();
+		const reference = this.#output.reference.peek();
 		if (reference === undefined) {
 			throw new Error("reference not set; call update() first");
 		}
@@ -172,10 +182,10 @@ export class Sync {
 			const now = Time.Milli.now();
 			const ref = Time.Milli.sub(now, timestamp);
 
-			const currentRef = this.#reference.peek();
+			const currentRef = this.#output.reference.peek();
 			if (currentRef === undefined) return;
 
-			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#buffer.peek());
+			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#output.buffer.peek());
 			if (sleep <= 0) return;
 
 			// Skip setTimeout for small sleeps; the timer resolution (~4ms) would overshoot.
diff --git a/js/watch/src/ui/components/buffer-control.ts b/js/watch/src/ui/components/buffer-control.ts
index b5d6f159f..40f92967d 100644
--- a/js/watch/src/ui/components/buffer-control.ts
+++ b/js/watch/src/ui/components/buffer-control.ts
@@ -127,7 +127,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 	let hasInteracted = false;
 
 	parent.run((effect) => {
-		const jitter = effect.get(watch.backend.jitter);
+		const jitter = effect.get(watch.backend.output.jitter);
 		const pct = (jitter / max) * 100;
 		targetLine.style.left = `${pct}%`;
 		targetLabel.textContent = `${Math.round(jitter)}ms`;
@@ -141,7 +141,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		const ms = (x / trackWidth) * max;
 		const snapped = (Math.round(ms / RANGE_STEP) * RANGE_STEP) as Moq.Time.Milli;
 		const clamped = Math.max(MIN_RANGE, Math.min(max, snapped)) as Moq.Time.Milli;
-		watch.backend.latency.set(clamped);
+		watch.controls.latency.set(clamped);
 	};
 
 	const interact = () => {
@@ -179,16 +179,16 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		}
 		e.preventDefault();
 		interact();
-		const current = watch.backend.jitter.peek();
+		const current = watch.backend.output.jitter.peek();
 		const value = Math.max(MIN_RANGE, Math.min(max, current + delta)) as Moq.Time.Milli;
-		watch.backend.latency.set(value);
+		watch.controls.latency.set(value);
 	});
 
 	const draw = () => {
 		const timestamp = watch.backend.sync.now();
-		const isBuffering = watch.backend.video.stalled.peek();
-		drawRanges(videoCanvas, watch.backend.video.buffered.peek(), timestamp, max, isBuffering);
-		drawRanges(audioCanvas, watch.backend.audio.buffered.peek(), timestamp, max, isBuffering);
+		const isBuffering = watch.backend.video.output.stalled.peek();
+		drawRanges(videoCanvas, watch.backend.video.output.buffered.peek(), timestamp, max, isBuffering);
+		drawRanges(audioCanvas, watch.backend.audio.output.buffered.peek(), timestamp, max, isBuffering);
 		parent.animate(draw);
 	};
 	parent.animate(draw);
diff --git a/js/watch/src/ui/components/buffering-indicator.ts b/js/watch/src/ui/components/buffering-indicator.ts
index ceedab750..5b58c7b7c 100644
--- a/js/watch/src/ui/components/buffering-indicator.ts
+++ b/js/watch/src/ui/components/buffering-indicator.ts
@@ -9,8 +9,8 @@ export function bufferingIndicator(parent: Effect, watch: MoqWatch): HTMLElement
 	container.appendChild(spinner);
 
 	parent.run((effect) => {
-		const buffering = effect.get(watch.backend.video.stalled);
-		const offline = effect.get(watch.broadcast.status) === "offline";
+		const buffering = effect.get(watch.backend.video.output.stalled);
+		const offline = effect.get(watch.broadcast.output.status) === "offline";
 		container.style.display = buffering && !offline ? "" : "none";
 	});
 
diff --git a/js/watch/src/ui/components/offline-indicator.ts b/js/watch/src/ui/components/offline-indicator.ts
index a44e3a669..db358d3b6 100644
--- a/js/watch/src/ui/components/offline-indicator.ts
+++ b/js/watch/src/ui/components/offline-indicator.ts
@@ -13,7 +13,7 @@ export function offlineIndicator(parent: Effect, watch: MoqWatch): HTMLElement {
 	container.appendChild(text);
 
 	parent.run((effect) => {
-		const offline = effect.get(watch.broadcast.status) === "offline";
+		const offline = effect.get(watch.broadcast.output.status) === "offline";
 		container.style.display = offline ? "" : "none";
 	});
 
diff --git a/js/watch/src/ui/components/play-pause.ts b/js/watch/src/ui/components/play-pause.ts
index c0725cd7a..d3b8a0032 100644
--- a/js/watch/src/ui/components/play-pause.ts
+++ b/js/watch/src/ui/components/play-pause.ts
@@ -8,7 +8,7 @@ export function playPauseButton(parent: Effect, watch: MoqWatch): HTMLElement {
 	button.className = "button button--playback flex-center";
 
 	parent.run((effect) => {
-		const paused = effect.get(watch.backend.paused);
+		const paused = effect.get(watch.controls.paused);
 		button.title = paused ? "Play" : "Pause";
 		button.setAttribute("aria-label", paused ? "Play" : "Pause");
 		button.replaceChildren(icon(paused ? play : pause));
diff --git a/js/watch/src/ui/components/quality-selector.ts b/js/watch/src/ui/components/quality-selector.ts
index 5660aebf9..b704f4eb2 100644
--- a/js/watch/src/ui/components/quality-selector.ts
+++ b/js/watch/src/ui/components/quality-selector.ts
@@ -23,8 +23,8 @@ export function qualitySelector(parent: Effect, watch: MoqWatch): HTMLElement {
 	wrapper.append(label, select);
 
 	parent.run((effect) => {
-		const catalog = effect.get(watch.backend.video.source.catalog);
-		const active = effect.get(watch.backend.video.source.track);
+		const catalog = effect.get(watch.backend.video.source.output.catalog);
+		const active = effect.get(watch.backend.video.source.output.track);
 		const renditions = catalog?.renditions ?? {};
 
 		select.replaceChildren();
@@ -47,7 +47,7 @@ export function qualitySelector(parent: Effect, watch: MoqWatch): HTMLElement {
 
 	parent.event(select, "change", () => {
 		const value = select.value || undefined;
-		watch.backend.video.source.target.update((prev) => ({ ...prev, name: value }));
+		watch.controls.target.update((prev) => ({ ...prev, name: value }));
 	});
 
 	return wrapper;
diff --git a/js/watch/src/ui/components/volume-slider.ts b/js/watch/src/ui/components/volume-slider.ts
index 7b67f925f..1910858a1 100644
--- a/js/watch/src/ui/components/volume-slider.ts
+++ b/js/watch/src/ui/components/volume-slider.ts
@@ -28,8 +28,8 @@ export function volumeSlider(parent: Effect, watch: MoqWatch): HTMLElement {
 	wrapper.append(button, slider, label);
 
 	parent.run((effect) => {
-		const volume = effect.get(watch.backend.audio.volume);
-		const muted = effect.get(watch.backend.audio.muted);
+		const volume = effect.get(watch.controls.volume);
+		const muted = effect.get(watch.controls.muted);
 		const pct = Math.round(volume * 100);
 		slider.value = pct.toString();
 		label.textContent = pct.toString();
@@ -39,11 +39,11 @@ export function volumeSlider(parent: Effect, watch: MoqWatch): HTMLElement {
 	});
 
 	parent.event(slider, "input", () => {
-		watch.backend.audio.volume.set(Number.parseFloat(slider.value) / 100);
+		watch.controls.volume.set(Number.parseFloat(slider.value) / 100);
 	});
 
 	parent.event(button, "click", () => {
-		watch.backend.audio.muted.update((m) => !m);
+		watch.controls.muted.update((m) => !m);
 	});
 
 	return wrapper;
diff --git a/js/watch/src/ui/components/watch-status-indicator.ts b/js/watch/src/ui/components/watch-status-indicator.ts
index d629dcd41..0b91fd767 100644
--- a/js/watch/src/ui/components/watch-status-indicator.ts
+++ b/js/watch/src/ui/components/watch-status-indicator.ts
@@ -28,7 +28,7 @@ export function watchStatusIndicator(parent: Effect, watch: MoqWatch): HTMLEleme
 	parent.run((effect) => {
 		const url = effect.get(watch.connection.url);
 		const conn = effect.get(watch.connection.status);
-		const broadcast = effect.get(watch.broadcast.status);
+		const broadcast = effect.get(watch.broadcast.output.status);
 		const { variant, text: label } = deriveStatus(url, conn, broadcast);
 
 		dot.className = `status-indicator-dot status-indicator-dot--${variant}`;
diff --git a/js/watch/src/ui/stats.ts b/js/watch/src/ui/stats.ts
index d53ddfdf8..2cb04bd1e 100644
--- a/js/watch/src/ui/stats.ts
+++ b/js/watch/src/ui/stats.ts
@@ -64,8 +64,8 @@ function videoRow(parent: Effect, watch: MoqWatch): HTMLElement {
 	let prevWhen = performance.now();
 
 	parent.interval(() => {
-		const catalog = watch.backend.video.source.catalog.peek();
-		const stats = watch.backend.video.stats.peek();
+		const catalog = watch.backend.video.source.output.catalog.peek();
+		const stats = watch.backend.video.output.stats.peek();
 		const now = performance.now();
 		const elapsedMs = now - prevWhen;
 
@@ -104,9 +104,9 @@ function audioRow(parent: Effect, watch: MoqWatch): HTMLElement {
 	let prevWhen = performance.now();
 
 	parent.interval(() => {
-		const track = watch.backend.audio.source.track.peek();
-		const config = watch.backend.audio.source.config.peek();
-		const stats = watch.backend.audio.stats.peek();
+		const track = watch.backend.audio.source.output.track.peek();
+		const config = watch.backend.audio.source.output.config.peek();
+		const stats = watch.backend.audio.output.stats.peek();
 
 		if (!track || !config) {
 			data.textContent = "N/A";
@@ -141,7 +141,7 @@ function bufferRow(parent: Effect, watch: MoqWatch): HTMLElement {
 	const { el, data } = row("buffer", "buffer", buffer);
 
 	parent.run((effect) => {
-		const jitter = effect.get(watch.backend.jitter);
+		const jitter = effect.get(watch.backend.output.jitter);
 		data.textContent = `${Math.round(jitter)}ms`;
 	});
 
diff --git a/js/watch/src/user.ts b/js/watch/src/user.ts
index 4bc209b30..5eb83006d 100644
--- a/js/watch/src/user.ts
+++ b/js/watch/src/user.ts
@@ -1,49 +1,49 @@
 import type * as Catalog from "@moq/hang/catalog";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 
-export interface Props {
-	enabled?: boolean | Signal<boolean>;
-}
+type InfoInput = {
+	enabled: Getter<boolean>;
+	catalog: Getter<Catalog.Root | undefined>;
+};
+
+type InfoOutput = {
+	id: Signal<string | undefined>;
+	name: Signal<string | undefined>;
+	avatar: Signal<string | undefined>;
+	color: Signal<string | undefined>;
+};
+
+export type Props = InputProps<InfoInput>;
 
 export class Info {
-	enabled: Signal<boolean>;
+	readonly input: Readonlys<InfoInput>;
 
-	#id = new Signal<string | undefined>(undefined);
-	#name = new Signal<string | undefined>(undefined);
-	#avatar = new Signal<string | undefined>(undefined);
-	#color = new Signal<string | undefined>(undefined);
+	readonly #output: InfoOutput = {
+		id: new Signal<string | undefined>(undefined),
+		name: new Signal<string | undefined>(undefined),
+		avatar: new Signal<string | undefined>(undefined),
+		color: new Signal<string | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	signals = new Effect();
 
-	constructor(catalog: Signal<Catalog.Root | undefined>, props?: Props) {
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(props?: Props) {
+		this.input = {
+			enabled: getter(props?.enabled ?? false),
+			catalog: getter(props?.catalog),
+		};
 
 		this.signals.run((effect) => {
-			if (!effect.get(this.enabled)) return;
+			if (!effect.get(this.input.enabled)) return;
 
-			this.#id.set(effect.get(catalog)?.user?.id);
-			this.#name.set(effect.get(catalog)?.user?.name);
-			this.#avatar.set(effect.get(catalog)?.user?.avatar);
-			this.#color.set(effect.get(catalog)?.user?.color);
+			this.#output.id.set(effect.get(this.input.catalog)?.user?.id);
+			this.#output.name.set(effect.get(this.input.catalog)?.user?.name);
+			this.#output.avatar.set(effect.get(this.input.catalog)?.user?.avatar);
+			this.#output.color.set(effect.get(this.input.catalog)?.user?.color);
 		});
 	}
 
-	get id(): Getter<string | undefined> {
-		return this.#id;
-	}
-
-	get name(): Getter<string | undefined> {
-		return this.#name;
-	}
-
-	get avatar(): Getter<string | undefined> {
-		return this.#avatar;
-	}
-
-	get color(): Getter<string | undefined> {
-		return this.#color;
-	}
-
 	close() {
 		this.signals.close();
 	}
diff --git a/js/watch/src/video/backend.ts b/js/watch/src/video/backend.ts
index c4218f676..098d158d4 100644
--- a/js/watch/src/video/backend.ts
+++ b/js/watch/src/video/backend.ts
@@ -3,22 +3,24 @@ import type { Getter } from "@moq/signals";
 import type { BufferedRanges } from "../backend";
 import type { Source } from "./source";
 
-// Video specific signals that work regardless of the backend source (mse vs webcodecs).
+// Video specific outputs that work regardless of the backend source (mse vs webcodecs).
 export interface Backend {
 	// The source of the video.
 	source: Source;
 
-	// The stats of the video.
-	stats: Getter<Stats | undefined>;
+	readonly output: {
+		// The stats of the video.
+		readonly stats: Getter<Stats | undefined>;
 
-	// Whether the video is currently buffering
-	stalled: Getter<boolean>;
+		// Whether the video is currently buffering
+		readonly stalled: Getter<boolean>;
 
-	// Buffered time ranges (for MSE backend).
-	buffered: Getter<BufferedRanges>;
+		// Buffered time ranges (for MSE backend).
+		readonly buffered: Getter<BufferedRanges>;
 
-	// The timestamp of the current frame.
-	timestamp: Getter<Moq.Time.Milli | undefined>;
+		// The timestamp of the current frame.
+		readonly timestamp: Getter<Moq.Time.Milli | undefined>;
+	};
 }
 
 export interface Stats {
diff --git a/js/watch/src/video/decoder.ts b/js/watch/src/video/decoder.ts
index 358d120c7..e204cb64c 100644
--- a/js/watch/src/video/decoder.ts
+++ b/js/watch/src/video/decoder.ts
@@ -3,9 +3,10 @@ import * as Container from "@moq/hang/container";
 import * as Util from "@moq/hang/util";
 import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { BufferedRanges } from "../backend";
 import { base64ToBytes } from "../base64";
+import type { Sync } from "../sync";
 import type { Backend, Stats } from "./backend";
 import type { Source } from "./source";
 
@@ -13,59 +14,70 @@ import type { Source } from "./source";
 const BUFFERING = 500 as Time.Milli;
 const SWITCH = 100 as Time.Milli;
 
-export type DecoderProps = {
-	enabled?: boolean | Signal<boolean>;
+type DecoderInput = {
+	// Whether to download the video track. Wired from the renderer's output by the parent.
+	enabled: Getter<boolean>;
 };
 
+type DecoderOutput = {
+	// The current frame to render.
+	frame: Signal<VideoFrame | undefined>;
+
+	// The timestamp of the current frame.
+	timestamp: Signal<Time.Milli | undefined>;
+
+	// The display size of the video in pixels, ideally sourced from the catalog.
+	display: Signal<{ width: number; height: number } | undefined>;
+
+	stalled: Signal<boolean>;
+	stats: Signal<Stats | undefined>;
+
+	// Combined buffered ranges (network jitter + decode buffer)
+	buffered: Signal<BufferedRanges>;
+};
+
+export type DecoderProps = InputProps<DecoderInput>;
+
 // The types in VideoDecoderConfig that cause a hard reload.
 // ex. codedWidth/Height are optional and can be changed in-band, so we don't want to trigger a reload.
 // This way we can keep the current subscription active.
 type RequiredDecoderConfig = Omit<Catalog.VideoConfig, "codedWidth" | "codedHeight">;
 
 export class Decoder implements Backend {
-	enabled: Signal<boolean>; // Don't download any longer
+	readonly input: Readonlys<DecoderInput>;
 	source: Source;
+	sync: Sync;
+
+	readonly #output: DecoderOutput = {
+		frame: new Signal<VideoFrame | undefined>(undefined),
+		timestamp: new Signal<Time.Milli | undefined>(undefined),
+		display: new Signal<{ width: number; height: number } | undefined>(undefined),
+		stalled: new Signal<boolean>(false),
+		stats: new Signal<Stats | undefined>(undefined),
+		buffered: new Signal<BufferedRanges>([]),
+	};
+	readonly output = readonlys(this.#output);
 
 	// The current track running, held so we can cancel it when the new track is ready.
 	#active = new Signal<DecoderTrack | undefined>(undefined);
 
-	// Expose the current frame to render as a signal
-	#frame = new Signal<VideoFrame | undefined>(undefined);
-	readonly frame: Getter<VideoFrame | undefined> = this.#frame;
-
-	// The timestamp of the current frame.
-	#timestamp = new Signal<Time.Milli | undefined>(undefined);
-	readonly timestamp: Getter<Time.Milli | undefined> = this.#timestamp;
-
-	// The display size of the video in pixels, ideally sourced from the catalog.
-	#display = new Signal<{ width: number; height: number } | undefined>(undefined);
-	readonly display: Getter<{ width: number; height: number } | undefined> = this.#display;
-
-	#stalled = new Signal<boolean>(false);
-	readonly stalled: Getter<boolean> = this.#stalled;
-
-	#stats = new Signal<Stats | undefined>(undefined);
-	readonly stats: Getter<Stats | undefined> = this.#stats;
-
-	// Combined buffered ranges (network jitter + decode buffer)
-	#buffered = new Signal<BufferedRanges>([]);
-	readonly buffered: Getter<BufferedRanges> = this.#buffered;
-
 	#signals = new Effect();
 
 	#clearCurrentFrame(): void {
-		this.#frame.update((prev) => {
+		this.#output.frame.update((prev) => {
 			prev?.close();
 			return undefined;
 		});
-		this.#timestamp.set(undefined);
+		this.#output.timestamp.set(undefined);
 	}
 
-	constructor(source: Source, props?: DecoderProps) {
-		this.enabled = Signal.from(props?.enabled ?? false);
+	constructor(source: Source, sync: Sync, props?: DecoderProps) {
+		this.input = {
+			enabled: getter(props?.enabled ?? false),
+		};
 
 		this.source = source;
-		this.source.supported.set(supported); // super hacky
+		this.sync = sync;
 
 		this.#signals.run(this.#runPending.bind(this));
 		this.#signals.run(this.#runActive.bind(this));
@@ -74,31 +86,36 @@ export class Decoder implements Backend {
 	}
 
 	#runPending(effect: Effect): void {
-		const values = effect.getAll([this.enabled, this.source.broadcast, this.source.track, this.source.config]);
+		const values = effect.getAll([
+			this.input.enabled,
+			this.source.input.broadcast,
+			this.source.output.track,
+			this.source.output.config,
+		]);
 		if (!values) {
 			// Close the active track when disabled (e.g. paused or not visible).
 			// The pending cleanup won't do this because it was already promoted to #active.
 			this.#active.set(undefined);
 			return;
 		}
-		const [_, source, track, config] = values;
+		const [_, broadcast, track, config] = values;
 
-		const broadcast: Moq.Broadcast | undefined = effect.get(source.active);
-		if (!broadcast) {
+		const active: Moq.Broadcast | undefined = effect.get(broadcast.output.active);
+		if (!active) {
 			// Going offline should clear the last rendered frame.
 			this.#active.set(undefined);
 			this.#clearCurrentFrame();
-			this.#buffered.set([]);
+			this.#output.buffered.set([]);
 			return;
 		}
 
 		// Start a new pending effect.
 		let pending: DecoderTrack | undefined = new DecoderTrack({
-			source: this.source,
-			broadcast,
+			sync: this.sync,
+			broadcast: active,
 			track,
 			config,
-			stats: this.#stats,
+			stats: this.#output.stats,
 		});
 
 		effect.cleanup(() => pending?.close());
@@ -106,10 +123,10 @@ export class Decoder implements Backend {
 		effect.run((effect) => {
 			if (!pending) return;
 
-			const active = effect.get(this.#active);
-			if (active) {
+			const current = effect.get(this.#active);
+			if (current) {
 				const pendingTimestamp = effect.get(pending.timestamp);
-				const activeTimestamp = effect.get(active.timestamp);
+				const activeTimestamp = effect.get(current.timestamp);
 
 				// Switch to the new track if it's ready and we've caught up enough.
 				if (!pendingTimestamp) return;
@@ -130,7 +147,7 @@ export class Decoder implements Backend {
 		const active = effect.get(this.#active);
 		if (!active) {
 			// Clear stale data when disabled (e.g. paused or not visible).
-			this.#buffered.set([]);
+			this.#output.buffered.set([]);
 			return;
 		}
 
@@ -140,51 +157,51 @@ export class Decoder implements Backend {
 		// proxy() would share the same reference, allowing the source to close our frame.
 		effect.run((inner) => {
 			const frame = inner.get(active.frame);
-			this.#frame.update((prev) => {
+			this.#output.frame.update((prev) => {
 				prev?.close();
 				return frame?.clone();
 			});
 		});
-		effect.proxy(this.#timestamp, active.timestamp);
-		effect.proxy(this.#buffered, active.buffered);
+		effect.proxy(this.#output.timestamp, active.timestamp);
+		effect.proxy(this.#output.buffered, active.buffered);
 	}
 
 	#runDisplay(effect: Effect): void {
-		const catalog = effect.get(this.source.catalog);
+		const catalog = effect.get(this.source.output.catalog);
 		if (!catalog) return;
 
 		const display = catalog.display;
 		if (display) {
-			effect.set(this.#display, {
+			effect.set(this.#output.display, {
 				width: display.width,
 				height: display.height,
 			});
 			return;
 		}
 
-		const frame = effect.get(this.frame);
+		const frame = effect.get(this.#output.frame);
 		if (!frame) return;
 
-		effect.set(this.#display, {
+		effect.set(this.#output.display, {
 			width: frame.displayWidth,
 			height: frame.displayHeight,
 		});
 	}
 
 	#runBuffering(effect: Effect): void {
-		const enabled = effect.get(this.enabled);
+		const enabled = effect.get(this.input.enabled);
 		if (!enabled) return;
 
-		const frame = effect.get(this.frame);
+		const frame = effect.get(this.#output.frame);
 		if (!frame) {
-			this.#stalled.set(true);
+			this.#output.stalled.set(true);
 			return;
 		}
 
-		this.#stalled.set(false);
+		this.#output.stalled.set(false);
 
 		effect.timer(() => {
-			this.#stalled.set(true);
+			this.#output.stalled.set(true);
 		}, BUFFERING);
 	}
 
@@ -196,7 +213,7 @@ export class Decoder implements Backend {
 }
 
 interface DecoderTrackProps {
-	source: Source;
+	sync: Sync;
 	broadcast: Moq.Broadcast;
 	track: string;
 	config: Catalog.VideoConfig;
@@ -205,7 +222,7 @@ interface DecoderTrackProps {
 }
 
 class DecoderTrack {
-	source: Source;
+	sync: Sync;
 	broadcast: Moq.Broadcast;
 	track: string;
 	config: RequiredDecoderConfig;
@@ -226,7 +243,7 @@ class DecoderTrack {
 		// Remove the codedWidth/Height from the config to avoid a hard reload if nothing else has changed.
 		const { codedWidth: _, codedHeight: __, ...requiredConfig } = props.config;
 
-		this.source = props.source;
+		this.sync = props.sync;
 		this.broadcast = props.broadcast;
 		this.track = props.track;
 		this.config = requiredConfig;
@@ -253,7 +270,7 @@ class DecoderTrack {
 						this.frame.set(frame.clone());
 					}
 
-					const wait = this.source.sync.wait(timestamp).then(() => true);
+					const wait = this.sync.wait(timestamp).then(() => true);
 					const ok = await Promise.race([wait, effect.cancel]);
 					if (!ok) return;
 
@@ -300,7 +317,7 @@ class DecoderTrack {
 		// Create consumer that reorders groups/frames up to the provided latency.
 		const consumer = new Container.Consumer(sub, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -338,7 +355,7 @@ class DecoderTrack {
 
 				// Mark that we received this frame right now.
 				const timestamp = Time.Milli.fromMicro(frame.timestamp as Time.Micro);
-				this.source.sync.received(timestamp, "video");
+				this.sync.received(timestamp, "video");
 
 				const chunk = new EncodedVideoChunk({
 					type: frame.keyframe ? "key" : "delta",
@@ -380,7 +397,7 @@ class DecoderTrack {
 
 		const consumer = new Container.Consumer(sub, {
 			format: new Container.Cmaf.Format(init),
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -418,7 +435,7 @@ class DecoderTrack {
 
 				// Mark that we received this frame right now.
 				const timestamp = Time.Milli.fromMicro(frame.timestamp);
-				this.source.sync.received(timestamp, "video");
+				this.sync.received(timestamp, "video");
 
 				// Track stats
 				this.stats.update((current) => ({
@@ -494,7 +511,7 @@ class DecoderTrack {
 	}
 }
 
-async function supported(config: Catalog.VideoConfig): Promise<boolean> {
+export async function decoderSupported(config: Catalog.VideoConfig): Promise<boolean> {
 	let description: Uint8Array | undefined;
 	if (config.description) {
 		description = Util.Hex.toBytes(config.description);
diff --git a/js/watch/src/video/mse.ts b/js/watch/src/video/mse.ts
index d6ac3205d..95756fa23 100644
--- a/js/watch/src/video/mse.ts
+++ b/js/watch/src/video/mse.ts
@@ -1,40 +1,45 @@
 import * as Catalog from "@moq/hang/catalog";
 import * as Container from "@moq/hang/container";
 import * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, readonlys, Signal } from "@moq/signals";
 import { type BufferedRanges, timeRangesToArray } from "../backend";
 import { base64ToBytes } from "../base64";
 import type { Muxer } from "../mse";
+import type { Sync } from "../sync";
 import type { Backend, Stats } from "./backend";
 import type { Source } from "./source";
 
+type MseOutput = {
+	// TODO implement stats
+	stats: Signal<Stats | undefined>;
+	buffered: Signal<BufferedRanges>;
+	stalled: Signal<boolean>;
+	timestamp: Signal<Moq.Time.Milli>;
+};
+
 /**
  * MSE-based video source for CMAF/fMP4 fragments.
  * Uses Media Source Extensions to handle complete moof+mdat fragments.
  */
 export class Mse implements Backend {
 	muxer: Muxer;
+	sync: Sync;
 	source: Source;
 
-	// TODO implement stats
-	#stats = new Signal<Stats | undefined>(undefined);
-	readonly stats: Getter<Stats | undefined> = this.#stats;
-
-	#buffered = new Signal<BufferedRanges>([]);
-	readonly buffered: Getter<BufferedRanges> = this.#buffered;
-
-	#stalled = new Signal<boolean>(false);
-	readonly stalled: Getter<boolean> = this.#stalled;
-
-	#timestamp = new Signal<Moq.Time.Milli>(Moq.Time.Milli.zero);
-	readonly timestamp: Getter<Moq.Time.Milli> = this.#timestamp;
+	readonly #output: MseOutput = {
+		stats: new Signal<Stats | undefined>(undefined),
+		buffered: new Signal<BufferedRanges>([]),
+		stalled: new Signal<boolean>(false),
+		timestamp: new Signal<Moq.Time.Milli>(Moq.Time.Milli.zero),
+	};
+	readonly output = readonlys(this.#output);
 
 	signals = new Effect();
 
-	constructor(muxer: Muxer, source: Source) {
+	constructor(muxer: Muxer, sync: Sync, source: Source) {
 		this.muxer = muxer;
+		this.sync = sync;
 		this.source = source;
-		this.source.supported.set(supported); // super hacky
 
 		this.signals.run(this.#runMedia.bind(this));
 		this.signals.run(this.#runStalled.bind(this));
@@ -42,22 +47,22 @@ export class Mse implements Backend {
 	}
 
 	#runMedia(effect: Effect): void {
-		const element = effect.get(this.muxer.element);
+		const element = effect.get(this.muxer.input.element);
 		if (!element) return;
 
-		const mediaSource = effect.get(this.muxer.mediaSource);
+		const mediaSource = effect.get(this.muxer.output.mediaSource);
 		if (!mediaSource) return;
 
-		const broadcast = effect.get(this.source.broadcast);
+		const broadcast = effect.get(this.source.input.broadcast);
 		if (!broadcast) return;
 
-		const active = effect.get(broadcast.active);
+		const active = effect.get(broadcast.output.active);
 		if (!active) return;
 
-		const track = effect.get(this.source.track);
+		const track = effect.get(this.source.output.track);
 		if (!track) return;
 
-		const config = effect.get(this.source.config);
+		const config = effect.get(this.source.output.config);
 		if (!config) return;
 
 		const mime = `video/mp4; codecs="${config.codec}"`;
@@ -73,7 +78,7 @@ export class Mse implements Backend {
 		});
 
 		effect.event(sourceBuffer, "updateend", () => {
-			this.#buffered.set(timeRangesToArray(sourceBuffer.buffered));
+			this.#output.buffered.set(timeRangesToArray(sourceBuffer.buffered));
 		});
 
 		if (config.container.kind === "cmaf") {
@@ -125,7 +130,7 @@ export class Mse implements Backend {
 
 				// Extract the timestamp from the CMAF segment and mark when we received it.
 				const timestamp = Container.Cmaf.decodeTimestamp(frame, init);
-				this.source.sync.received(Moq.Time.Milli.fromMicro(timestamp), "video");
+				this.sync.received(Moq.Time.Milli.fromMicro(timestamp), "video");
 
 				await this.#appendBuffer(sourceBuffer, frame);
 
@@ -152,7 +157,7 @@ export class Mse implements Backend {
 		// Create consumer that reorders groups/frames up to the provided latency.
 		const consumer = new Container.Consumer(data, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.sync.output.buffer,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -175,7 +180,7 @@ export class Mse implements Backend {
 
 				// Mark that we received this frame right now.
 				const timestamp = Moq.Time.Milli.fromMicro(pending.timestamp as Moq.Time.Micro);
-				this.source.sync.received(timestamp, "video");
+				this.sync.received(timestamp, "video");
 
 				break;
 			}
@@ -191,7 +196,7 @@ export class Mse implements Backend {
 
 					// Mark that we received this frame right now for latency calculation.
 					const timestamp = Moq.Time.Milli.fromMicro(frame.timestamp as Moq.Time.Micro);
-					this.source.sync.received(timestamp, "video");
+					this.sync.received(timestamp, "video");
 				}
 
 				// Wrap raw frame in moof+mdat
@@ -217,11 +222,11 @@ export class Mse implements Backend {
 	}
 
 	#runStalled(effect: Effect): void {
-		const element = effect.get(this.muxer.element);
+		const element = effect.get(this.muxer.input.element);
 		if (!element) return;
 
 		const update = () => {
-			this.#stalled.set(element.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA);
+			this.#output.stalled.set(element.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA);
 		};
 
 		// Set initial state
@@ -234,7 +239,7 @@ export class Mse implements Backend {
 	}
 
 	#runTimestamp(effect: Effect): void {
-		const element = effect.get(this.muxer.element);
+		const element = effect.get(this.muxer.input.element);
 		if (!element) return;
 
 		// Use requestVideoFrameCallback if available (frame-accurate)
@@ -244,7 +249,7 @@ export class Mse implements Backend {
 			let handle: number;
 			const onFrame = () => {
 				const timestamp = Moq.Time.Milli.fromSecond(video.currentTime as Moq.Time.Second);
-				this.#timestamp.set(timestamp);
+				this.#output.timestamp.set(timestamp);
 				handle = video.requestVideoFrameCallback(onFrame);
 			};
 			handle = video.requestVideoFrameCallback(onFrame);
@@ -254,17 +259,17 @@ export class Mse implements Backend {
 			// Fallback to timeupdate event
 			effect.event(element, "timeupdate", () => {
 				const timestamp = Moq.Time.Milli.fromSecond(element.currentTime as Moq.Time.Second);
-				this.#timestamp.set(timestamp);
+				this.#output.timestamp.set(timestamp);
 			});
 		}
 	}
 
 	close(): void {
-		this.source.close();
+		// The source is owned by MultiBackend, not by this backend; don't close it here.
 		this.signals.close();
 	}
 }
 
-async function supported(config: Catalog.VideoConfig): Promise<boolean> {
+export async function mseSupported(config: Catalog.VideoConfig): Promise<boolean> {
 	return MediaSource.isTypeSupported(`video/mp4; codecs="${config.codec}"`);
 }
diff --git a/js/watch/src/video/renderer.ts b/js/watch/src/video/renderer.ts
index 12e962160..a2db98fa3 100644
--- a/js/watch/src/video/renderer.ts
+++ b/js/watch/src/video/renderer.ts
@@ -1,50 +1,59 @@
 import { Time } from "@moq/net";
-import { Effect, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { Decoder } from "./decoder";
 
-export type RendererProps = {
-	canvas?: HTMLCanvasElement | Signal<HTMLCanvasElement | undefined>;
-	paused?: boolean | Signal<boolean>;
+type RendererInput = {
+	canvas: Getter<HTMLCanvasElement | undefined>;
 };
 
+type RendererOutput = {
+	// The most recently rendered frame, updated after each rAF paint.
+	frame: Signal<VideoFrame | undefined>;
+
+	// The media timestamp of the most recently rendered frame.
+	timestamp: Signal<Time.Milli | undefined>;
+
+	// Whether the canvas is visible in the viewport and the tab is focused.
+	// The owner combines this with `paused` to drive the decoder's `enabled` input.
+	visible: Signal<boolean>;
+};
+
+export type RendererProps = InputProps<RendererInput>;
+
 // An component to render a video to a canvas.
 export class Renderer {
 	decoder: Decoder;
 
-	// The canvas to render the video to.
-	canvas: Signal<HTMLCanvasElement | undefined>;
+	readonly input: Readonlys<RendererInput>;
 
-	// Whether the video is paused.
-	paused: Signal<boolean>;
-
-	// The most recently rendered frame, updated after each rAF paint.
-	readonly frame = new Signal<VideoFrame | undefined>(undefined);
-
-	// The media timestamp of the most recently rendered frame.
-	readonly timestamp = new Signal<Time.Milli | undefined>(undefined);
+	readonly #output: RendererOutput = {
+		frame: new Signal<VideoFrame | undefined>(undefined),
+		timestamp: new Signal<Time.Milli | undefined>(undefined),
+		visible: new Signal(false),
+	};
+	readonly output = readonlys(this.#output);
 
 	#ctx = new Signal<CanvasRenderingContext2D | undefined>(undefined);
-	#visible = new Signal(false);
 	#signals = new Effect();
 
 	constructor(decoder: Decoder, props?: RendererProps) {
 		this.decoder = decoder;
-		this.canvas = Signal.from(props?.canvas);
-		this.paused = Signal.from(props?.paused ?? false);
+		this.input = {
+			canvas: getter(props?.canvas),
+		};
 
 		this.#signals.run((effect) => {
-			const canvas = effect.get(this.canvas);
+			const canvas = effect.get(this.input.canvas);
 			this.#ctx.set(canvas?.getContext("2d") ?? undefined);
 		});
 
 		this.#signals.run(this.#runVisible.bind(this));
-		this.#signals.run(this.#runEnabled.bind(this));
 		this.#signals.run(this.#runRender.bind(this));
 		this.#signals.run(this.#runResize.bind(this));
 	}
 
 	#runResize(effect: Effect) {
-		const values = effect.getAll([this.canvas, this.decoder.display]);
+		const values = effect.getAll([this.input.canvas, this.decoder.output.display]);
 		if (!values) return; // Keep current canvas size until we have new dimensions
 		const [canvas, display] = values;
 
@@ -58,16 +67,16 @@ export class Renderer {
 
 	// Track whether the canvas is visible in the viewport and the tab is focused.
 	#runVisible(effect: Effect): void {
-		const canvas = effect.get(this.canvas);
+		const canvas = effect.get(this.input.canvas);
 		if (!canvas) {
-			this.#visible.set(false);
+			this.#output.visible.set(false);
 			return;
 		}
 
 		let intersecting = false;
 
 		const update = () => {
-			this.#visible.set(intersecting && !document.hidden);
+			this.#output.visible.set(intersecting && !document.hidden);
 		};
 
 		const observer = new IntersectionObserver(
@@ -84,31 +93,14 @@ export class Renderer {
 
 		observer.observe(canvas);
 		effect.cleanup(() => observer.disconnect());
-		effect.cleanup(() => this.#visible.set(false));
-	}
-
-	// Detect when video should be downloaded.
-	#runEnabled(effect: Effect): void {
-		const paused = effect.get(this.paused);
-		const visible = effect.get(this.#visible);
-
-		effect.cleanup(() => this.decoder.enabled.set(false));
-
-		if (!paused) {
-			this.decoder.enabled.set(visible);
-			return;
-		}
-
-		// When paused, fetch a single preview frame then disable.
-		const frame = effect.get(this.decoder.frame);
-		this.decoder.enabled.set(!frame);
+		effect.cleanup(() => this.#output.visible.set(false));
 	}
 
 	#runRender(effect: Effect) {
 		const ctx = effect.get(this.#ctx);
 		if (!ctx) return;
 
-		const frame = effect.get(this.decoder.frame);
+		const frame = effect.get(this.decoder.output.frame);
 
 		// Request a callback to render the frame based on the monitor's refresh rate.
 		// Always render, even when paused (to show last frame).
@@ -116,17 +108,17 @@ export class Renderer {
 			this.#render(ctx, frame);
 
 			if (frame) {
-				this.frame.update((current) => {
+				this.#output.frame.update((current) => {
 					current?.close();
 					return frame.clone();
 				});
-				this.timestamp.set(Time.Milli.fromMicro(frame.timestamp as Time.Micro));
+				this.#output.timestamp.set(Time.Milli.fromMicro(frame.timestamp as Time.Micro));
 			} else {
-				this.frame.update((current) => {
+				this.#output.frame.update((current) => {
 					current?.close();
 					return undefined;
 				});
-				this.timestamp.set(undefined);
+				this.#output.timestamp.set(undefined);
 			}
 
 			animate = undefined;
@@ -152,7 +144,7 @@ export class Renderer {
 		ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
 		// Apply horizontal flip if specified in the video config
-		const flip = this.decoder.source.catalog.peek()?.flip;
+		const flip = this.decoder.source.output.catalog.peek()?.flip;
 		if (flip) {
 			ctx.scale(-1, 1);
 			ctx.translate(-ctx.canvas.width, 0);
@@ -164,11 +156,11 @@ export class Renderer {
 
 	// Close the track and all associated resources.
 	close() {
-		this.frame.update((current) => {
+		this.#output.frame.update((current) => {
 			current?.close();
 			return undefined;
 		});
-		this.timestamp.set(undefined);
+		this.#output.timestamp.set(undefined);
 		this.#signals.close();
 	}
 }
diff --git a/js/watch/src/video/source.ts b/js/watch/src/video/source.ts
index c16cb6f57..aa5f3b82f 100644
--- a/js/watch/src/video/source.ts
+++ b/js/watch/src/video/source.ts
@@ -1,20 +1,13 @@
 import type * as Catalog from "@moq/hang/catalog";
 import type * as Moq from "@moq/net";
-import { Effect, type Getter, Signal } from "@moq/signals";
+import { Effect, type Getter, getter, type InputProps, type Readonlys, readonlys, Signal } from "@moq/signals";
 import type { Broadcast } from "../broadcast";
-import type { Sync } from "../sync";
 
 /**
  * A function that checks if a video configuration is supported by the backend.
  */
 export type Supported = (config: Catalog.VideoConfig) => Promise<boolean>;
 
-export type SourceProps = {
-	broadcast?: Broadcast | Signal<Broadcast | undefined>;
-	target?: Target | Signal<Target | undefined>;
-	supported?: Supported;
-};
-
 export type Target = {
 	// Optional manual override for the selected rendition name.
 	name?: string;
@@ -32,6 +25,29 @@ export type Target = {
 	bitrate?: number;
 };
 
+type SourceInput = {
+	broadcast: Getter<Broadcast | undefined>;
+	target: Getter<Target | undefined>;
+
+	// A function that checks if a video configuration is supported by the backend.
+	// Provided by whichever backend (WebCodecs or MSE) is active.
+	supported: Getter<Supported | undefined>;
+};
+
+type SourceOutput = {
+	catalog: Signal<Catalog.Video | undefined>;
+	available: Signal<Record<string, Catalog.VideoConfig>>;
+
+	// The name of the active rendition.
+	track: Signal<string | undefined>;
+	config: Signal<Catalog.VideoConfig | undefined>;
+
+	// The per-rendition jitter (ms) to add to the sync buffer. Wired into Sync by the parent.
+	jitter: Signal<Moq.Time.Milli | undefined>;
+};
+
+export type SourceProps = InputProps<SourceInput>;
+
 /**
  * A filter that returns matching renditions sorted by preference (most preferred first).
  * Must return at least one rendition.
@@ -189,32 +205,25 @@ function bestRendition(entries: [string, Catalog.VideoConfig][]): string {
  * for video playback. It is used by both MSE and Decoder backends.
  */
 export class Source {
-	broadcast: Signal<Broadcast | undefined>;
-	target: Signal<Target | undefined>;
-
-	#catalog = new Signal<Catalog.Video | undefined>(undefined);
-	readonly catalog: Getter<Catalog.Video | undefined> = this.#catalog;
-
-	#available = new Signal<Record<string, Catalog.VideoConfig>>({});
-	readonly available: Getter<Record<string, Catalog.VideoConfig>> = this.#available;
-
-	// The name of the active rendition.
-	#track = new Signal<string | undefined>(undefined);
-	readonly track: Getter<string | undefined> = this.#track;
-
-	#config = new Signal<Catalog.VideoConfig | undefined>(undefined);
-	readonly config: Getter<Catalog.VideoConfig | undefined> = this.#config;
-
-	sync: Sync;
-	supported: Signal<Supported | undefined>;
+	readonly input: Readonlys<SourceInput>;
+
+	readonly #output: SourceOutput = {
+		catalog: new Signal<Catalog.Video | undefined>(undefined),
+		available: new Signal<Record<string, Catalog.VideoConfig>>({}),
+		track: new Signal<string | undefined>(undefined),
+		config: new Signal<Catalog.VideoConfig | undefined>(undefined),
+		jitter: new Signal<Moq.Time.Milli | undefined>(undefined),
+	};
+	readonly output = readonlys(this.#output);
 
 	#signals = new Effect();
 
-	constructor(sync: Sync, props?: SourceProps) {
-		this.broadcast = Signal.from(props?.broadcast);
-		this.target = Signal.from(props?.target);
-		this.sync = sync;
-		this.supported = Signal.from(props?.supported);
+	constructor(props?: SourceProps) {
+		this.input = {
+			broadcast: getter(props?.broadcast),
+			target: getter(props?.target),
+			supported: getter(props?.supported),
+		};
 
 		this.#signals.run(this.#runCatalog.bind(this));
 		this.#signals.run(this.#runSupported.bind(this));
@@ -222,20 +231,20 @@ export class Source {
 	}
 
 	#runCatalog(effect: Effect): void {
-		const broadcast = effect.get(this.broadcast);
+		const broadcast = effect.get(this.input.broadcast);
 		if (!broadcast) return;
 
-		const catalog = effect.get(broadcast.catalog)?.video;
+		const catalog = effect.get(broadcast.output.catalog)?.video;
 		if (!catalog) return;
 
-		effect.set(this.#catalog, catalog);
+		effect.set(this.#output.catalog, catalog);
 	}
 
 	#runSupported(effect: Effect): void {
-		const supported = effect.get(this.supported);
+		const supported = effect.get(this.input.supported);
 		if (!supported) return;
 
-		const renditions = effect.get(this.#catalog)?.renditions ?? {};
+		const renditions = effect.get(this.#output.catalog)?.renditions ?? {};
 
 		effect.spawn(async () => {
 			const available: Record<string, Catalog.VideoConfig> = {};
@@ -249,30 +258,30 @@ export class Source {
 				console.warn("[Source] No supported video renditions found:", renditions);
 			}
 
-			this.#available.set(available);
+			this.#output.available.set(available);
 		});
 	}
 
 	#runSelected(effect: Effect): void {
-		const available = effect.get(this.#available);
+		const available = effect.get(this.#output.available);
 		if (Object.keys(available).length === 0) return;
 
-		const target = effect.get(this.target);
+		const target = effect.get(this.input.target);
 
 		// Manual selection by name — skip all ABR logic.
 		if (target?.name && target.name in available) {
 			const config = available[target.name];
-			effect.set(this.#track, target.name);
-			effect.set(this.#config, config);
-			effect.set(this.sync.video, config.jitter as Moq.Time.Milli | undefined);
+			effect.set(this.#output.track, target.name);
+			effect.set(this.#output.config, config);
+			effect.set(this.#output.jitter, config.jitter as Moq.Time.Milli | undefined);
 			return;
 		}
 
 		// Auto-select: use recv bandwidth if no explicit bitrate target.
 		let effectiveTarget = target;
 		if (!target?.bitrate) {
-			const broadcast = effect.get(this.broadcast);
-			const connection = broadcast ? effect.get(broadcast.connection) : undefined;
+			const broadcast = effect.get(this.input.broadcast);
+			const connection = broadcast ? effect.get(broadcast.input.connection) : undefined;
 			const recvBw = connection?.recvBandwidth;
 			if (recvBw) {
 				const estimate = effect.get(recvBw);
@@ -289,12 +298,12 @@ export class Source {
 
 		const config = available[selected];
 
-		effect.set(this.#track, selected);
-		effect.set(this.#config, config);
+		effect.set(this.#output.track, selected);
+		effect.set(this.#output.config, config);
 
 		// Use catalog jitter if available, otherwise estimate from framerate.
 		const jitter = config.jitter ?? (config.framerate ? Math.ceil(1000 / config.framerate) : undefined);
-		effect.set(this.sync.video, jitter as Moq.Time.Milli | undefined);
+		effect.set(this.#output.jitter, jitter as Moq.Time.Milli | undefined);
 	}
 
 	/**