@aperture-browser/session-react 0.0.0-init.0

package/dist/headless-CKFacFX3.js

@@ -0,0 +1,2135 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+import { DEFAULT_VIEWPORT, LiveSessionConnection, LiveSessionError, LiveSessionError as LiveSessionError$1, computeRenderMetrics, createViewportPreset, evdevKeycodeByCode, keyboardInputMessage, keyboardModifiers, shouldForwardBrowserShortcut, strictParseOptions, windowsVirtualKeyCodeForCodeOrKey } from "@aperture-browser/live-session";
+import * as Option from "effect/Option";
+import * as PubSub from "effect/PubSub";
+import * as Schema from "effect/Schema";
+import * as SubscriptionRef from "effect/SubscriptionRef";
+import * as Data from "effect/Data";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SessionsApi, apiClientLayer, baseUrlLayer } from "@aperture-browser/api-client";
+import * as Layer from "effect/Layer";
+import * as ManagedRuntime from "effect/ManagedRuntime";
+import * as FetchHttpClient from "effect/unstable/http/FetchHttpClient";
+import * as HttpClient from "effect/unstable/http/HttpClient";
+//#region src/effect.tsx
+const RuntimeContext = createContext(null);
+/** A hook below needed the app runtime, but no RuntimeProvider is above the component. */
+var RuntimeProviderMissingError = class extends Data.TaggedError("RuntimeProviderMissingError") {
+	message = "useRuntime must be used inside RuntimeProvider";
+};
+function RuntimeProvider({ runtime, baseUrl, children }) {
+	const value = useMemo(() => ({
+		runtime,
+		baseUrl
+	}), [runtime, baseUrl]);
+	return /* @__PURE__ */ jsx(RuntimeContext.Provider, {
+		value,
+		children
+	});
+}
+function useRuntimeContext() {
+	const context = useContext(RuntimeContext);
+	if (!context) throw new RuntimeProviderMissingError();
+	return context;
+}
+function useRuntime() {
+	return useRuntimeContext().runtime;
+}
+function useBaseUrl() {
+	return useRuntimeContext().baseUrl;
+}
+/**
+* Runs an effect while the component is mounted, restarting it when `deps` change, like
+* `useEffect`. Return `undefined` to run nothing. The fiber is interrupted synchronously
+* on cleanup, so its synchronous finalizers have run before the next effect starts.
+*/
+function useFork(effect, deps) {
+	const runtime = useRuntime();
+	useEffect(() => {
+		const program = effect();
+		if (!program) return;
+		const fiber = runtime.runFork(program);
+		return () => fiber.interruptUnsafe();
+	}, [runtime, ...deps]);
+}
+/**
+* Returns an event handler that forks the effect `callback` builds. Fibers still running
+* when the component unmounts are interrupted.
+*/
+function useEffectCallback(callback, deps) {
+	const runtime = useRuntime();
+	const fibers = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const running = fibers.current;
+		return () => {
+			for (const fiber of running) fiber.interruptUnsafe();
+			running.clear();
+		};
+	}, []);
+	return useCallback((...args) => {
+		const fiber = runtime.runFork(callback(...args));
+		if (fiber.pollUnsafe()) return;
+		fibers.current.add(fiber);
+		fiber.addObserver(() => fibers.current.delete(fiber));
+	}, [runtime, ...deps]);
+}
+/**
+* Returns a function that runs an API call for promise-based callers such as TanStack
+* Query. Aborting the signal interrupts the request.
+*/
+function useRunApi() {
+	const runtime = useRuntime();
+	return useCallback((call, options) => runtime.runPromise(call, options), [runtime]);
+}
+//#endregion
+//#region src/hooks/use-live-session.ts
+const heartbeatIntervalMs = 2e3;
+const transportUnavailable = () => new LiveSessionConnection.LiveSessionError({ message: "live session transport is unavailable" });
+const cursorIntervalMs = 40;
+const collaborationPaintLifetimeMs = 7e3;
+const pointerButtonCode = {
+	left: 272,
+	right: 273,
+	middle: 274
+};
+function useLiveSession({ sessionId, displayName = null, credentials, sessionToken, role, enabled, webrtcSupported, iceServers }) {
+	const identity = useMemo(() => collaborationIdentity(role, displayName), [displayName, role]);
+	const runtime = useRuntime();
+	const baseUrl = useBaseUrl();
+	const frameRef = useMemo(() => runtime.runSync(SubscriptionRef.make(null)), [runtime]);
+	const paintPubSub = useMemo(() => runtime.runSync(PubSub.unbounded()), [runtime]);
+	const frames = useMemo(() => SubscriptionRef.changes(frameRef), [frameRef]);
+	const paintEvents = useMemo(() => Stream.fromPubSub(paintPubSub), [paintPubSub]);
+	const publishFrame = useCallback((frame) => runtime.runSync(SubscriptionRef.set(frameRef, frame)), [frameRef, runtime]);
+	const publishPaint = useCallback((event) => PubSub.publishUnsafe(paintPubSub, event), [paintPubSub]);
+	const connectionRef = useRef(null);
+	const holderClientIdRef = useRef(null);
+	const clientIdRef = useRef("");
+	const claimPendingRef = useRef(false);
+	const releasePendingRef = useRef(false);
+	const cursorVisibleRef = useRef(false);
+	const lastCursorSentAtRef = useRef(0);
+	const participantsRef = useRef([]);
+	const followingClientIdRef = useRef(null);
+	const mediaSizeRef = useRef(null);
+	const transportRef = useRef(null);
+	const presentationRef = useRef(null);
+	const presentationSelectionRef = useRef(false);
+	const [phase, setPhase] = useState("idle");
+	const [targets, setTargets] = useState([]);
+	const [activeTargetId, setActiveTargetId] = useState(null);
+	const [mediaStream, setMediaStream] = useState(null);
+	const [mediaSize, setMediaSize] = useState(null);
+	const [transport, setTransport] = useState(null);
+	const [targetSwitching, setTargetSwitching] = useState(false);
+	const [presentationSwitching, setPresentationSwitching] = useState(false);
+	const [presentation, setPresentation] = useState(null);
+	const [recordings, setRecordings] = useState([]);
+	const [clientId, setClientId] = useState("");
+	const [holderClientId, setHolderClientId] = useState(null);
+	const [leaseMode, setLeaseMode] = useState(null);
+	const [participants, setParticipants] = useState([]);
+	const [cursors, setCursors] = useState(() => /* @__PURE__ */ new Map());
+	const [lastError, setLastError] = useState(null);
+	mediaSizeRef.current = mediaSize;
+	transportRef.current = transport;
+	presentationRef.current = presentation;
+	const handleMessage = useCallback((message) => {
+		switch (message.type) {
+			case "session.snapshot":
+				clientIdRef.current = message.clientId;
+				setClientId(message.clientId);
+				holderClientIdRef.current = message.holderClientId ?? null;
+				setHolderClientId(message.holderClientId ?? null);
+				setLeaseMode(message.mode ?? null);
+				participantsRef.current = message.participants;
+				setParticipants(message.participants);
+				followingClientIdRef.current = message.participants.find((participant) => participant.clientId === message.clientId)?.followingClientId ?? null;
+				setTargets(message.targets);
+				setActiveTargetId(message.activeTargetId ?? null);
+				setMediaSize(resolveMediaSize(message.targets, message.activeTargetId));
+				setRecordings(message.recordings);
+				setPresentation(message.presentation ?? null);
+				setLastError(null);
+				return;
+			case "targets.state":
+				setTargets(message.targets);
+				setActiveTargetId(message.activeTargetId ?? null);
+				setMediaSize(resolveMediaSize(message.targets, message.activeTargetId));
+				setTargetSwitching(false);
+				return;
+			case "presence.state":
+				participantsRef.current = message.participants;
+				setParticipants(message.participants);
+				followingClientIdRef.current = message.participants.find((participant) => participant.clientId === clientIdRef.current)?.followingClientId ?? null;
+				setCursors((current) => {
+					const followed = followingClientIdRef.current;
+					if (!followed) return current.size === 0 ? current : /* @__PURE__ */ new Map();
+					const cursor = current.get(followed);
+					return cursor ? /* @__PURE__ */ new Map([[followed, cursor]]) : /* @__PURE__ */ new Map();
+				});
+				return;
+			case "input.state":
+				holderClientIdRef.current = message.holderClientId ?? null;
+				setHolderClientId(message.holderClientId ?? null);
+				setLeaseMode(message.mode ?? null);
+				claimPendingRef.current = false;
+				releasePendingRef.current = false;
+				setLastError((current) => current?.code === "input_busy" || current?.code === "input_not_owned" ? null : current);
+				return;
+			case "presence.cursor":
+				if (message.clientId !== followingClientIdRef.current) return;
+				setCursors((current) => new Map(current).set(message.clientId, message));
+				return;
+			case "presence.cursor.clear":
+				setCursors((current) => {
+					if (!current.has(message.clientId)) return current;
+					const next = new Map(current);
+					next.delete(message.clientId);
+					return next;
+				});
+				return;
+			case "paint.point":
+				if (participantsRef.current.some((participant) => participant.clientId === message.clientId)) publishPaint({
+					type: "point",
+					message
+				});
+				return;
+			case "recordings.state":
+				setRecordings(message.recordings);
+				return;
+			case "presentation.state":
+				setPresentation(message.presentation);
+				return;
+			case "error":
+				claimPendingRef.current = false;
+				releasePendingRef.current = false;
+				setLastError({
+					code: message.code,
+					message: message.message
+				});
+				return;
+			default:
+				if (message.presentation) setPresentation(message.presentation);
+				if (!message.ok) setLastError({
+					code: message.code ?? "request_rejected",
+					message: message.message ?? "Live session command failed."
+				});
+		}
+	}, [publishPaint]);
+	useFork(() => {
+		if (!enabled || !sessionId || !credentials) {
+			connectionRef.current = null;
+			setPhase("idle");
+			setTargets([]);
+			setActiveTargetId(null);
+			setMediaStream(null);
+			setMediaSize(null);
+			setTransport(null);
+			setPresentation(null);
+			setTargetSwitching(false);
+			setPresentationSwitching(false);
+			setParticipants([]);
+			setCursors(/* @__PURE__ */ new Map());
+			setRecordings([]);
+			publishFrame(null);
+			publishPaint({ type: "clear" });
+			return;
+		}
+		return Effect.gen(function* () {
+			const connection = yield* LiveSessionConnection.make({
+				baseUrl,
+				sessionId,
+				credentials,
+				sessionToken,
+				identity,
+				iceServers,
+				webrtcSupported,
+				callbacks: {
+					onPhase: setPhase,
+					onMessage: handleMessage,
+					onFrame: publishFrame,
+					onStream: setMediaStream,
+					onTransport: setTransport,
+					onError: (message) => setLastError({
+						code: "connection_failed",
+						message
+					})
+				}
+			});
+			connectionRef.current = connection;
+			yield* Effect.addFinalizer(() => Effect.sync(() => {
+				if (connectionRef.current === connection) connectionRef.current = null;
+			}));
+			return yield* Effect.never;
+		}).pipe(Effect.scoped, Effect.ensuring(Effect.sync(() => {
+			publishFrame(null);
+			publishPaint({ type: "clear" });
+		})));
+	}, [
+		baseUrl,
+		credentials,
+		enabled,
+		handleMessage,
+		iceServers,
+		identity,
+		publishFrame,
+		publishPaint,
+		sessionId,
+		sessionToken,
+		webrtcSupported
+	]);
+	const sendReliable = useCallback((message) => connectionRef.current?.sendReliable(message) ?? false, []);
+	const sendRealtime = useCallback((message) => connectionRef.current?.sendRealtime(message) ?? false, []);
+	const runCommand = useEffectCallback((connection, type, payload) => connection.command(type, payload).pipe(Effect.catch((error) => Effect.sync(() => {
+		setTargetSwitching(false);
+		setLastError({
+			code: "request_rejected",
+			message: error.message
+		});
+	}))), []);
+	const command = useCallback((type, payload = {}) => {
+		const connection = connectionRef.current;
+		if (!connection) return false;
+		runCommand(connection, type, payload);
+		return true;
+	}, [runCommand]);
+	const request = useCallback((type, payload = {}) => Effect.suspend(() => connectionRef.current ? connectionRef.current.command(type, payload) : Effect.fail(transportUnavailable())), []);
+	const runSelectTarget = useEffectCallback((connection, targetId) => connection.command("target.select", { targetId }).pipe(Effect.match({
+		onSuccess: () => setActiveTargetId(targetId),
+		onFailure: (error) => setLastError({
+			code: "request_rejected",
+			message: error.message
+		})
+	}), Effect.ensuring(Effect.sync(() => setTargetSwitching(false)))), []);
+	const requestSelectTarget = useCallback((targetId) => Effect.suspend(() => {
+		const connection = connectionRef.current;
+		if (!connection) return Effect.fail(transportUnavailable());
+		setTargetSwitching(true);
+		return connection.command("target.select", { targetId }).pipe(Effect.tap(() => Effect.sync(() => setActiveTargetId(targetId))), Effect.tapError((error) => Effect.sync(() => setLastError({
+			code: "request_rejected",
+			message: error.message
+		}))), Effect.ensuring(Effect.sync(() => setTargetSwitching(false))), Effect.asVoid);
+	}), []);
+	const selectTarget = useCallback((targetId) => {
+		const connection = connectionRef.current;
+		if (!connection) return false;
+		setTargetSwitching(true);
+		runSelectTarget(connection, targetId);
+		return true;
+	}, [runSelectTarget]);
+	const selectPresentation = useCallback((selection) => Effect.suspend(() => {
+		const connection = connectionRef.current;
+		if (!connection) return Effect.fail(transportUnavailable());
+		if (presentationSelectionRef.current) return Effect.fail(new LiveSessionConnection.LiveSessionError({ message: "another presentation update is already in progress" }));
+		presentationSelectionRef.current = true;
+		setPresentationSwitching(true);
+		return Effect.gen(function* () {
+			switch (selection.kind) {
+				case "jpeg": return yield* connection.selectTransport("websocket");
+				case "webrtc-retry": return yield* connection.selectTransport("webrtc");
+				case "webrtc": {
+					const size = mediaSizeRef.current;
+					if (!size) return yield* new LiveSessionConnection.LiveSessionError({ message: "presentation size is unavailable" });
+					const restoreWebRTC = presentationRef.current?.quality?.profile !== selection.quality.profile && transportRef.current === "webrtc";
+					if (restoreWebRTC) yield* connection.selectTransport("websocket");
+					const result = yield* connection.command("presentation.quality.set", {
+						profile: selection.quality.profile,
+						width: size.canvasWidth,
+						height: size.canvasHeight,
+						fps: selection.quality.fps,
+						bitrateKbps: selection.quality.bitrateKbps
+					}).pipe(Effect.tapError(() => restoreWebRTC ? Effect.ignore(connection.selectTransport("webrtc")) : Effect.void));
+					if (result.presentation) setPresentation(result.presentation);
+					return yield* connection.selectTransport("webrtc");
+				}
+				default: return selection;
+			}
+		}).pipe(Effect.tapError((error) => Effect.sync(() => setLastError({
+			code: "presentation_update_failed",
+			message: error.message
+		}))), Effect.ensuring(Effect.sync(() => {
+			presentationSelectionRef.current = false;
+			setPresentationSwitching(false);
+		})));
+	}), []);
+	const claim = useCallback((targetId, mode) => {
+		if (role === "viewer" || !sendReliable({
+			type: "input.claim",
+			targetId,
+			mode
+		})) return false;
+		claimPendingRef.current = true;
+		releasePendingRef.current = false;
+		return true;
+	}, [role, sendReliable]);
+	const release = useCallback(() => {
+		if (releasePendingRef.current || holderClientIdRef.current !== clientIdRef.current || !sendReliable({ type: "input.release" })) return false;
+		releasePendingRef.current = true;
+		claimPendingRef.current = false;
+		return true;
+	}, [sendReliable]);
+	const setActiveTarget = useCallback((targetId) => targetId ? selectTarget(targetId) : false, [selectTarget]);
+	const follow = useCallback((followingClientId) => sendReliable({
+		type: "follow.set",
+		followingClientId: followingClientId ?? ""
+	}), [sendReliable]);
+	const sendCursor = useCallback((targetId, x, y, dimensions) => {
+		const now = performance.now();
+		if (now - lastCursorSentAtRef.current < cursorIntervalMs) return false;
+		lastCursorSentAtRef.current = now;
+		const sent = sendRealtime({
+			type: "presence.cursor",
+			targetId,
+			x: normalizedCoordinate(x, dimensions.width),
+			y: normalizedCoordinate(y, dimensions.height)
+		});
+		if (sent) cursorVisibleRef.current = true;
+		return sent;
+	}, [sendRealtime]);
+	const sendPaintPoint = useCallback((point) => point.phase === "move" ? sendRealtime({
+		type: "paint.point",
+		...point
+	}) : sendReliable({
+		type: "paint.point",
+		...point
+	}), [sendRealtime, sendReliable]);
+	const clearCursor = useCallback(() => {
+		if (!cursorVisibleRef.current || !sendReliable({ type: "presence.cursor.clear" })) return false;
+		cursorVisibleRef.current = false;
+		return true;
+	}, [sendReliable]);
+	const sendInputEvent = useCallback((message, realtime = false) => realtime ? sendRealtime(message) : sendReliable(message), [sendRealtime, sendReliable]);
+	const sendBrowserInput = useCallback((message, dimensions) => {
+		if (role === "viewer" || holderClientIdRef.current !== clientIdRef.current && !claimPendingRef.current) return false;
+		switch (message.type) {
+			case "input.mouse": {
+				const x = normalizedCoordinate(message.x, dimensions.width);
+				const y = normalizedCoordinate(message.y, dimensions.height);
+				if (message.action === "move") return sendInputEvent({
+					type: "input.pointer.motion.absolute",
+					targetId: message.targetId,
+					x,
+					y,
+					width: dimensions.width,
+					height: dimensions.height,
+					modifiers: message.modifiers ?? 0
+				}, true);
+				if (message.button === "none") return true;
+				const buttonCode = pointerButtonCode[message.button ?? "left"];
+				const sendButton = (pressed, clickCount) => sendInputEvent({
+					type: "input.pointer.button",
+					targetId: message.targetId,
+					x,
+					y,
+					width: dimensions.width,
+					height: dimensions.height,
+					buttonCode,
+					pressed,
+					clickCount,
+					modifiers: message.modifiers ?? 0
+				});
+				if (message.action === "down" || message.action === "up") return sendButton(message.action === "down", message.clickCount ?? 1);
+				const count = message.action === "doubleClick" ? 2 : 1;
+				for (let index = 0; index < count; index += 1) {
+					const clickCount = message.action === "doubleClick" ? index + 1 : 1;
+					sendButton(true, clickCount);
+					sendButton(false, clickCount);
+				}
+				return true;
+			}
+			case "input.wheel": {
+				const x = normalizedCoordinate(message.x, dimensions.width);
+				const y = normalizedCoordinate(message.y, dimensions.height);
+				sendInputEvent({
+					type: "input.pointer.scroll",
+					targetId: message.targetId,
+					x,
+					y,
+					width: dimensions.width,
+					height: dimensions.height,
+					horizontal: message.deltaX,
+					vertical: message.deltaY,
+					stopHorizontal: false,
+					stopVertical: false,
+					modifiers: message.modifiers ?? 0
+				});
+				return sendInputEvent({
+					type: "input.pointer.scroll",
+					targetId: message.targetId,
+					x,
+					y,
+					width: dimensions.width,
+					height: dimensions.height,
+					horizontal: 0,
+					vertical: 0,
+					stopHorizontal: message.deltaX !== 0,
+					stopVertical: message.deltaY !== 0,
+					modifiers: message.modifiers ?? 0
+				});
+			}
+			case "input.key": {
+				if (message.action === "char") return message.text ? sendInputEvent({
+					type: "input.keyboard.text",
+					targetId: message.targetId,
+					text: message.text
+				}) : false;
+				const keycode = evdevKeycodeByCode[message.code ?? ""];
+				if (!keycode) return false;
+				const windowsVirtualKeyCode = message.windowsVirtualKeyCode ?? windowsVirtualKeyCodeForCodeOrKey(message.code, message.key);
+				return sendInputEvent({
+					type: "input.keyboard.key",
+					targetId: message.targetId,
+					keycode,
+					pressed: message.action === "down",
+					key: message.key,
+					code: message.code,
+					text: message.text,
+					unmodifiedText: message.unmodifiedText,
+					modifiers: message.modifiers ?? 0,
+					windowsVirtualKeyCode,
+					nativeVirtualKeyCode: message.nativeVirtualKeyCode ?? windowsVirtualKeyCode,
+					location: message.location ?? 0,
+					autoRepeat: message.autoRepeat ?? false,
+					isKeypad: message.isKeypad ?? false
+				});
+			}
+			case "clipboard.copy": return sendShortcut(sendInputEvent, message.targetId, "KeyC");
+			case "clipboard.cut": return sendShortcut(sendInputEvent, message.targetId, "KeyX");
+			case "clipboard.paste": {
+				const item = message.items.find((candidate) => candidate.mimeType === "text/plain");
+				return item ? sendInputEvent({
+					type: "input.keyboard.text",
+					targetId: message.targetId,
+					text: item.data
+				}) : false;
+			}
+			default: return message;
+		}
+	}, [role, sendInputEvent]);
+	const hasControl = holderClientId === clientId && clientId !== "";
+	const followingClientId = participants.find((participant) => participant.clientId === clientId)?.followingClientId ?? null;
+	useFork(() => hasControl ? Effect.sleep(heartbeatIntervalMs).pipe(Effect.andThen(Effect.sync(() => {
+		if (holderClientIdRef.current === clientIdRef.current) sendReliable({ type: "input.heartbeat" });
+	})), Effect.forever) : void 0, [hasControl, sendReliable]);
+	return {
+		phase,
+		targets,
+		activeTargetId,
+		frames,
+		mediaStream,
+		mediaSize,
+		transport,
+		presentation,
+		mediaSwitching: targetSwitching || presentationSwitching,
+		recordings,
+		sendBrowserInput,
+		selectTarget,
+		requestSelectTarget,
+		command,
+		request,
+		selectPresentation,
+		reconnect: () => {
+			const connection = connectionRef.current;
+			if (connection) runtime.runSync(connection.reconnect);
+		},
+		collaboration: {
+			phase: phase === "error" ? "disconnected" : phase,
+			role,
+			clientId,
+			holderClientId,
+			leaseMode,
+			hasControl,
+			canRequestControl: role !== "viewer" && phase === "connected",
+			lastError,
+			participants,
+			cursors,
+			paintEvents,
+			followingClientId,
+			claim,
+			release,
+			setActiveTarget,
+			follow,
+			sendCursor,
+			sendPaintPoint,
+			clearCursor,
+			sendInput: sendBrowserInput
+		}
+	};
+}
+const StoredIdentity = Schema.Struct({
+	name: Schema.String.check(Schema.isLengthBetween(1, 48)),
+	avatarHash: Schema.String.check(Schema.isPattern(/^[0-9a-f]{32}$/))
+});
+const decodeStoredIdentity = Schema.decodeUnknownOption(Schema.fromJsonString(StoredIdentity), strictParseOptions);
+function collaborationIdentity(role, accountName) {
+	const anonymous = loadAnonymousIdentity();
+	if (role !== "owner" || !accountName?.trim()) return anonymous;
+	return {
+		...anonymous,
+		name: Array.from(accountName.trim()).slice(0, 48).join("")
+	};
+}
+function loadAnonymousIdentity() {
+	const storageKey = "aperture.collaboration.identity";
+	try {
+		const stored = window.localStorage.getItem(storageKey);
+		if (stored) {
+			const parsed = decodeStoredIdentity(stored);
+			if (Option.isSome(parsed)) return parsed.value;
+		}
+		const created = createAnonymousIdentity();
+		window.localStorage.setItem(storageKey, JSON.stringify(created));
+		return created;
+	} catch {
+		return createAnonymousIdentity();
+	}
+}
+function createAnonymousIdentity() {
+	const adjectives = [
+		"Amber",
+		"Brisk",
+		"Calm",
+		"Clever",
+		"Misty",
+		"Quiet",
+		"Swift",
+		"Warm"
+	];
+	const animals = [
+		"Badger",
+		"Falcon",
+		"Fox",
+		"Koala",
+		"Otter",
+		"Panda",
+		"Raven",
+		"Tiger"
+	];
+	const random = /* @__PURE__ */ new Uint8Array(18);
+	crypto.getRandomValues(random);
+	return {
+		name: `${adjectives[(random.at(0) ?? 0) % adjectives.length] ?? "Quiet"} ${animals[(random.at(1) ?? 0) % animals.length] ?? "Otter"}`,
+		avatarHash: Array.from(random.slice(2), (value) => value.toString(16).padStart(2, "0")).join("")
+	};
+}
+function resolveMediaSize(targets, activeTargetId) {
+	const viewport = targets.find((target) => target.id === activeTargetId)?.viewport;
+	return viewport ? {
+		width: viewport.width,
+		height: viewport.height,
+		canvasWidth: viewport.canvasWidth,
+		canvasHeight: viewport.canvasHeight,
+		deviceScaleFactor: viewport.deviceScaleFactor
+	} : null;
+}
+function normalizedCoordinate(value, length) {
+	if (length <= 1) return 0;
+	return Math.min(1, Math.max(0, value / length));
+}
+function sendShortcut(sendInputEvent, targetId, code) {
+	const controlKeycode = evdevKeycodeByCode.ControlLeft;
+	const shortcutKeycode = evdevKeycodeByCode[code];
+	if (!controlKeycode || !shortcutKeycode) return false;
+	const controlVirtualKeyCode = windowsVirtualKeyCodeForCodeOrKey("ControlLeft", "Control");
+	const shortcutKey = code === "KeyC" ? "c" : "x";
+	const shortcutVirtualKeyCode = windowsVirtualKeyCodeForCodeOrKey(code, shortcutKey);
+	sendInputEvent({
+		type: "input.keyboard.key",
+		targetId,
+		keycode: controlKeycode,
+		pressed: true,
+		key: "Control",
+		code: "ControlLeft",
+		windowsVirtualKeyCode: controlVirtualKeyCode,
+		nativeVirtualKeyCode: controlVirtualKeyCode,
+		modifiers: 2
+	});
+	sendInputEvent({
+		type: "input.keyboard.key",
+		targetId,
+		keycode: shortcutKeycode,
+		pressed: true,
+		key: shortcutKey,
+		code,
+		windowsVirtualKeyCode: shortcutVirtualKeyCode,
+		nativeVirtualKeyCode: shortcutVirtualKeyCode,
+		modifiers: 2
+	});
+	sendInputEvent({
+		type: "input.keyboard.key",
+		targetId,
+		keycode: shortcutKeycode,
+		pressed: false,
+		key: shortcutKey,
+		code,
+		windowsVirtualKeyCode: shortcutVirtualKeyCode,
+		nativeVirtualKeyCode: shortcutVirtualKeyCode,
+		modifiers: 2
+	});
+	return sendInputEvent({
+		type: "input.keyboard.key",
+		targetId,
+		keycode: controlKeycode,
+		pressed: false,
+		key: "Control",
+		code: "ControlLeft",
+		windowsVirtualKeyCode: controlVirtualKeyCode,
+		nativeVirtualKeyCode: controlVirtualKeyCode,
+		modifiers: 0
+	});
+}
+//#endregion
+//#region src/components/collaboration-paint-overlay.tsx
+const paintColors = [
+	"#f43f5e",
+	"#f97316",
+	"#eab308",
+	"#22c55e",
+	"#06b6d4",
+	"#8b5cf6"
+];
+const paintWidth = 4;
+const paintSendIntervalMs = 24;
+const maximumPaintPoints = 2048;
+const maximumPaintStrokes = 512;
+function CollaborationPaintOverlay({ collaboration, targetId, enabled, visible, left, top, width, height }) {
+	const canvasRef = useRef(null);
+	const activeStrokeIdRef = useRef(null);
+	const activePointerIdRef = useRef(null);
+	const lastPointSentAtRef = useRef(0);
+	const strokesRef = useRef(/* @__PURE__ */ new Map());
+	const color = colorForClient(collaboration.clientId);
+	useFork(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const pixelRatio = window.devicePixelRatio || 1;
+		canvas.width = Math.max(1, Math.round(width * pixelRatio));
+		canvas.height = Math.max(1, Math.round(height * pixelRatio));
+		const context = canvas.getContext("2d");
+		if (!context) return;
+		let animationFrame = null;
+		const participantIds = new Set(collaboration.participants.map((participant) => participant.clientId));
+		const disconnectedAt = Date.now();
+		for (const [key, stroke] of strokesRef.current) if (!stroke.ended && !participantIds.has(stroke.clientId)) strokesRef.current.set(key, {
+			...stroke,
+			updatedAt: disconnectedAt,
+			ended: true
+		});
+		const draw = () => {
+			animationFrame = null;
+			context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+			context.clearRect(0, 0, width, height);
+			const now = Date.now();
+			let fadingStrokeCount = 0;
+			for (const [key, stroke] of strokesRef.current) {
+				const age = now - stroke.updatedAt;
+				if (stroke.ended && age >= 7e3) {
+					strokesRef.current.delete(key);
+					continue;
+				}
+				if (stroke.ended) fadingStrokeCount += 1;
+				if (stroke.targetId !== targetId || stroke.points.length === 0) continue;
+				const opacity = stroke.ended ? 1 - age / collaborationPaintLifetimeMs : 1;
+				context.globalAlpha = opacity;
+				context.strokeStyle = stroke.color;
+				context.fillStyle = stroke.color;
+				context.lineWidth = stroke.width;
+				context.lineCap = "round";
+				context.lineJoin = "round";
+				const first = stroke.points[0];
+				if (!first) continue;
+				if (stroke.points.length === 1) {
+					context.beginPath();
+					context.arc(first.x * width, first.y * height, stroke.width / 2, 0, Math.PI * 2);
+					context.fill();
+					continue;
+				}
+				context.beginPath();
+				context.moveTo(first.x * width, first.y * height);
+				for (let index = 1; index < stroke.points.length - 1; index += 1) {
+					const point = stroke.points[index];
+					const next = stroke.points[index + 1];
+					if (!point || !next) continue;
+					context.quadraticCurveTo(point.x * width, point.y * height, (point.x + next.x) / 2 * width, (point.y + next.y) / 2 * height);
+				}
+				const last = stroke.points[stroke.points.length - 1];
+				if (last) context.lineTo(last.x * width, last.y * height);
+				context.stroke();
+			}
+			context.globalAlpha = 1;
+			if (fadingStrokeCount > 0) animationFrame = window.requestAnimationFrame(draw);
+		};
+		const requestDraw = () => {
+			if (animationFrame === null) animationFrame = window.requestAnimationFrame(draw);
+		};
+		const onPaint = (event) => {
+			if (event.type === "clear") {
+				strokesRef.current.clear();
+				requestDraw();
+				return;
+			}
+			const message = event.message;
+			const key = `${message.clientId}:${message.targetId}:${message.strokeId}`;
+			const existing = strokesRef.current.get(key);
+			if (message.phase !== "start" && !existing || existing?.ended && message.phase !== "start") return;
+			const updatedAt = Date.now();
+			if (message.phase === "start") {
+				for (const [candidateKey, stroke] of strokesRef.current) if (!stroke.ended && stroke.clientId === message.clientId) strokesRef.current.set(candidateKey, {
+					...stroke,
+					updatedAt,
+					ended: true
+				});
+			}
+			let points = message.phase === "start" || !existing ? [{
+				x: message.x,
+				y: message.y
+			}] : [...existing.points, {
+				x: message.x,
+				y: message.y
+			}];
+			if (points.length > maximumPaintPoints) points = points.filter((_, index) => index % 2 === 0);
+			if (!existing && strokesRef.current.size >= maximumPaintStrokes) {
+				let oldestKey = null;
+				let oldestUpdatedAt = Number.POSITIVE_INFINITY;
+				for (const [candidateKey, stroke] of strokesRef.current) {
+					if (!stroke.ended) continue;
+					if (stroke.updatedAt < oldestUpdatedAt) {
+						oldestKey = candidateKey;
+						oldestUpdatedAt = stroke.updatedAt;
+					}
+				}
+				if (oldestKey) strokesRef.current.delete(oldestKey);
+			}
+			strokesRef.current.set(key, {
+				clientId: message.clientId,
+				targetId: message.targetId,
+				color: message.color,
+				width: message.width,
+				points,
+				updatedAt,
+				ended: message.phase === "end"
+			});
+			requestDraw();
+		};
+		draw();
+		return Stream.runForEach(collaboration.paintEvents, (event) => Effect.sync(() => onPaint(event))).pipe(Effect.ensuring(Effect.sync(() => {
+			if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
+		})));
+	}, [
+		collaboration.paintEvents,
+		collaboration.participants,
+		height,
+		targetId,
+		width
+	]);
+	useEffect(() => {
+		activeStrokeIdRef.current = null;
+		activePointerIdRef.current = null;
+	}, [enabled, targetId]);
+	function sendPoint(event, phase) {
+		const strokeId = activeStrokeIdRef.current;
+		const point = normalizedPointer(event);
+		if (!strokeId || !point) return;
+		collaboration.sendPaintPoint({
+			targetId,
+			strokeId,
+			color,
+			width: paintWidth,
+			phase,
+			x: point.x,
+			y: point.y
+		});
+	}
+	function handlePointerDown(event) {
+		stopPointerEvent(event);
+		if (!event.isPrimary || event.button !== 0 || activePointerIdRef.current !== null) return;
+		event.currentTarget.focus();
+		activeStrokeIdRef.current = crypto.randomUUID();
+		activePointerIdRef.current = event.pointerId;
+		lastPointSentAtRef.current = performance.now();
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		const point = normalizedPointer(event);
+		if (point) collaboration.sendCursor(targetId, point.x * width, point.y * height, {
+			width,
+			height
+		});
+		sendPoint(event, "start");
+	}
+	function handlePointerMove(event) {
+		stopPointerEvent(event);
+		if (activePointerIdRef.current !== null && event.pointerId !== activePointerIdRef.current) return;
+		const point = normalizedPointer(event);
+		if (point) collaboration.sendCursor(targetId, point.x * width, point.y * height, {
+			width,
+			height
+		});
+		if (!activeStrokeIdRef.current || performance.now() - lastPointSentAtRef.current < paintSendIntervalMs) return;
+		lastPointSentAtRef.current = performance.now();
+		sendPoint(event, "move");
+	}
+	function finishStroke(event) {
+		stopPointerEvent(event);
+		if (!activeStrokeIdRef.current || activePointerIdRef.current !== event.pointerId) return;
+		sendPoint(event, "end");
+		activeStrokeIdRef.current = null;
+		activePointerIdRef.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+	}
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		tabIndex: -1,
+		style: {
+			position: "absolute",
+			zIndex: 20,
+			touchAction: "none",
+			cursor: enabled ? "crosshair" : void 0,
+			pointerEvents: enabled ? void 0 : "none",
+			visibility: visible ? void 0 : "hidden",
+			left,
+			top,
+			width,
+			height
+		},
+		"aria-label": "Shared drawing overlay",
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: finishStroke,
+		onPointerCancel: finishStroke,
+		onWheel: stopPointerEvent,
+		onContextMenu: stopPointerEvent
+	});
+}
+function normalizedPointer(event) {
+	const rect = event.currentTarget.getBoundingClientRect();
+	if (rect.width === 0 || rect.height === 0) return null;
+	return {
+		x: Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)),
+		y: Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height))
+	};
+}
+function stopPointerEvent(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+function colorForClient(clientId) {
+	let hash = 0;
+	for (const character of clientId) hash = hash * 31 + character.charCodeAt(0) >>> 0;
+	return paintColors[hash % paintColors.length] ?? "#f43f5e";
+}
+//#endregion
+//#region src/components/session-viewport.tsx
+const MULTI_CLICK_MS = 500;
+const MULTI_CLICK_DISTANCE = 5;
+function SessionViewport({ control, viewport = control.viewport, localCursorEnabled = true, paintingEnabled = false, onPaintingEnabledChange, onNotice, className, style, renderOverlay }) {
+	const containerRef = useRef(null);
+	const imageRef = useRef(null);
+	const videoRef = useRef(null);
+	const rasterDecoderRef = useRef({
+		decodingFrame: null,
+		generation: 0,
+		pending: null
+	});
+	const frameMetadataRef = useRef(null);
+	const pressedKeysRef = useRef(/* @__PURE__ */ new Map());
+	const releasedKeysRef = useRef(/* @__PURE__ */ new Set());
+	const pointerCaptureRef = useRef(null);
+	const dragCleanupRef = useRef(null);
+	const implicitControlDesiredRef = useRef(false);
+	const cursorHintPointRef = useRef(null);
+	const lastClickRef = useRef(null);
+	const [cursorHintPoint, setCursorHintPoint] = useState(null);
+	const [frameMetadata, setFrameMetadata] = useState(null);
+	const [presentedMedia, setPresentedMedia] = useState(null);
+	const showingWebRTC = control.mediaPath === "webrtc-live" && control.mediaPhase === "live" && Boolean(control.mediaStream) && Boolean(control.activeTargetId);
+	const mediaTransitioning = showingWebRTC && (control.mediaSwitching || control.mediaTargetId !== control.activeTargetId || presentedMedia?.stream !== control.mediaStream || presentedMedia?.targetId !== control.activeTargetId);
+	const paintOverlayEnabled = paintingEnabled && (showingWebRTC || frameMetadata !== null) && control.collaboration.phase === "connected" && !control.mediaSwitching && !mediaTransitioning;
+	const inputDisabled = paintingEnabled || control.mediaSwitching || mediaTransitioning || control.collaboration.phase !== "connected" || control.collaboration.role === "viewer";
+	const displayedMediaSize = mediaTransitioning && presentedMedia ? presentedMedia.size : control.mediaSize;
+	const renderWidth = showingWebRTC ? displayedMediaSize?.width ?? viewport.width : frameMetadata?.width ?? viewport.width;
+	const renderHeight = showingWebRTC ? displayedMediaSize?.height ?? viewport.height : frameMetadata?.height ?? viewport.height;
+	const inputWidth = showingWebRTC ? renderWidth : viewport.width;
+	const inputHeight = showingWebRTC ? renderHeight : viewport.height;
+	const contentWidth = showingWebRTC ? Math.min(displayedMediaSize?.canvasWidth ?? renderWidth, Math.round(renderWidth * (displayedMediaSize?.deviceScaleFactor ?? 1))) : renderWidth;
+	const contentHeight = showingWebRTC ? Math.min(displayedMediaSize?.canvasHeight ?? renderHeight, Math.round(renderHeight * (displayedMediaSize?.deviceScaleFactor ?? 1))) : renderHeight;
+	const displayMetrics = computeRenderMetrics(control.browserViewportSize?.width ?? renderWidth, control.browserViewportSize?.height ?? renderHeight, renderWidth, renderHeight);
+	const disconnectedHint = resolveDisconnectedHint(control.phase);
+	const collaborationHint = resolveCollaborationHint(control.collaboration);
+	const cursorHint = disconnectedHint ?? collaborationHint;
+	const displayedCursorHintPoint = cursorHint ? cursorHintPointRef.current ?? cursorHintPoint : null;
+	const followedParticipant = control.collaboration.followingClientId ? control.collaboration.participants.find((participant) => participant.clientId === control.collaboration.followingClientId) : null;
+	const followedCursor = followedParticipant ? control.collaboration.cursors.get(followedParticipant.clientId) : null;
+	const followedCursorPoint = followedCursor?.targetId === control.activeTargetId ? {
+		x: displayMetrics.offsetX + followedCursor.x * displayMetrics.renderedWidth,
+		y: displayMetrics.offsetY + followedCursor.y * displayMetrics.renderedHeight
+	} : null;
+	useEffect(() => {
+		control.setInputDimensions({
+			width: inputWidth,
+			height: inputHeight
+		});
+	}, [
+		control.setInputDimensions,
+		inputHeight,
+		inputWidth
+	]);
+	const releasePressedKeys = useCallback(() => {
+		const pressedKeys = [...pressedKeysRef.current.entries()].reverse();
+		pressedKeysRef.current.clear();
+		for (const [keyId, pressedKey] of pressedKeys) if (control.sendInput({
+			type: "input.key",
+			targetId: pressedKey.targetId,
+			action: "up",
+			...pressedKey.input,
+			text: void 0,
+			modifiers: 0,
+			autoRepeat: false
+		})) releasedKeysRef.current.add(keyId);
+	}, [control.sendInput]);
+	useFork(() => {
+		const onFrame = (frame) => {
+			if (!frame) {
+				if (imageRef.current) resetImageFrames(imageRef.current, rasterDecoderRef.current);
+				else resetRasterFrameDecoder(rasterDecoderRef.current);
+				if (frameMetadataRef.current !== null) {
+					frameMetadataRef.current = null;
+					setFrameMetadata(null);
+				}
+				return;
+			}
+			if (frame.targetId !== control.activeTargetId) return;
+			if (imageRef.current && !showingWebRTC) enqueueImageFrame(imageRef.current, rasterDecoderRef.current, frame);
+			else rasterDecoderRef.current.pending = frame;
+			const currentMetadata = frameMetadataRef.current;
+			if (currentMetadata?.width !== frame.width || currentMetadata?.height !== frame.height) {
+				const nextMetadata = {
+					width: frame.width,
+					height: frame.height
+				};
+				frameMetadataRef.current = nextMetadata;
+				setFrameMetadata(nextMetadata);
+			}
+		};
+		return Stream.runForEach(control.frames, (frame) => Effect.sync(() => onFrame(frame))).pipe(Effect.ensuring(Effect.sync(() => {
+			if (imageRef.current) resetImageFrames(imageRef.current, rasterDecoderRef.current);
+			else resetRasterFrameDecoder(rasterDecoderRef.current);
+		})));
+	}, [
+		control.activeTargetId,
+		control.frames,
+		showingWebRTC
+	]);
+	useLayoutEffect(() => {
+		const decoder = rasterDecoderRef.current;
+		const targetId = control.activeTargetId;
+		const targetFrame = decoder.pending?.targetId === targetId ? decoder.pending : decoder.decodingFrame?.targetId === targetId ? decoder.decodingFrame : null;
+		const image = imageRef.current;
+		if (image) resetImageFrames(image, decoder);
+		else resetRasterFrameDecoder(decoder);
+		if (targetFrame) {
+			decoder.pending = targetFrame;
+			const nextMetadata = {
+				width: targetFrame.width,
+				height: targetFrame.height
+			};
+			frameMetadataRef.current = nextMetadata;
+			setFrameMetadata(nextMetadata);
+			if (image) decodeNextImageFrame(image, decoder);
+		} else if (frameMetadataRef.current !== null) {
+			frameMetadataRef.current = null;
+			setFrameMetadata(null);
+		}
+	}, [control.activeTargetId]);
+	useEffect(() => {
+		const image = imageRef.current;
+		if (showingWebRTC || !image) return;
+		decodeNextImageFrame(image, rasterDecoderRef.current);
+	}, [frameMetadata, showingWebRTC]);
+	useEffect(() => {
+		if (!videoRef.current) return;
+		videoRef.current.srcObject = showingWebRTC ? control.mediaStream : null;
+	}, [control.mediaStream, showingWebRTC]);
+	useEffect(() => {
+		const video = videoRef.current;
+		const stream = control.mediaStream;
+		const targetId = control.activeTargetId;
+		const size = control.mediaSize;
+		if (!showingWebRTC || !video || !stream || !targetId || !size || control.mediaSwitching || control.mediaTargetId !== targetId || presentedMedia?.stream === stream && presentedMedia.targetId === targetId) return;
+		const callback = video.requestVideoFrameCallback(() => {
+			setPresentedMedia({
+				stream,
+				targetId,
+				size
+			});
+		});
+		return () => video.cancelVideoFrameCallback(callback);
+	}, [
+		control.activeTargetId,
+		control.mediaSize,
+		control.mediaStream,
+		control.mediaSwitching,
+		control.mediaTargetId,
+		presentedMedia,
+		showingWebRTC
+	]);
+	useEffect(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const syncSize = (width, height) => {
+			control.setBrowserViewportSize({
+				width,
+				height
+			});
+		};
+		const rect = element.getBoundingClientRect();
+		syncSize(rect.width, rect.height);
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) syncSize(entry.contentRect.width, entry.contentRect.height);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [control.setBrowserViewportSize]);
+	useEffect(() => {
+		return () => {
+			dragCleanupRef.current?.();
+			releasePressedKeys();
+		};
+	}, [releasePressedKeys]);
+	useEffect(() => {
+		const handleWindowBlur = () => {
+			releasePressedKeys();
+			releaseImplicitControl();
+		};
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "hidden") {
+				releasePressedKeys();
+				releaseImplicitControl();
+			}
+		};
+		window.addEventListener("blur", handleWindowBlur);
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			window.removeEventListener("blur", handleWindowBlur);
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, [releasePressedKeys, control.collaboration]);
+	useEffect(() => {
+		if (inputDisabled) {
+			dragCleanupRef.current?.();
+			releasePressedKeys();
+			releaseImplicitControl();
+		}
+	}, [inputDisabled, releasePressedKeys]);
+	useEffect(() => {
+		if (paintingEnabled) {
+			control.setCaptured(false);
+			implicitControlDesiredRef.current = false;
+		}
+		if (control.collaboration.hasControl && control.collaboration.leaseMode === "implicit" && !implicitControlDesiredRef.current) control.collaboration.release();
+	}, [
+		control.collaboration.hasControl,
+		control.collaboration.leaseMode,
+		control.collaboration.release,
+		control.setCaptured,
+		paintingEnabled
+	]);
+	function mapPointer(event, clamp) {
+		const rect = containerRef.current?.getBoundingClientRect();
+		if (!rect) return null;
+		const metrics = computeRenderMetrics(rect.width, rect.height, renderWidth, renderHeight);
+		const localX = event.clientX - rect.left - metrics.offsetX;
+		const localY = event.clientY - rect.top - metrics.offsetY;
+		if (!clamp && (localX < 0 || localY < 0 || localX > metrics.renderedWidth || localY > metrics.renderedHeight)) return null;
+		const x = localX / metrics.scale * (inputWidth / renderWidth);
+		const y = localY / metrics.scale * (inputHeight / renderHeight);
+		if (clamp) return {
+			x: Math.round(clampNumber(x, 0, Math.max(inputWidth - 1, 0))),
+			y: Math.round(clampNumber(y, 0, Math.max(inputHeight - 1, 0)))
+		};
+		return {
+			x: Math.round(x),
+			y: Math.round(y)
+		};
+	}
+	function resolveInputTarget() {
+		if (control.phase !== "connected" || !control.activeTargetId || inputDisabled) return null;
+		if (!control.captured) control.setCaptured(true);
+		requestImplicitControl(control.activeTargetId);
+		containerRef.current?.focus();
+		return control.activeTargetId;
+	}
+	function requestImplicitControl(targetId) {
+		implicitControlDesiredRef.current = true;
+		if (!control.collaboration.hasControl) control.collaboration.claim(targetId, "implicit");
+	}
+	function releaseImplicitControl() {
+		implicitControlDesiredRef.current = false;
+		if (control.collaboration.hasControl && control.collaboration.leaseMode === "implicit") control.collaboration.release();
+	}
+	function preventViewportDefault(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function preventNativeDefault(event) {
+		if (event.cancelable) event.preventDefault();
+		event.stopPropagation();
+	}
+	function handleCaptureClick() {
+		if (control.phase !== "connected" || inputDisabled) return;
+		control.setCaptured(true);
+		if (control.activeTargetId) requestImplicitControl(control.activeTargetId);
+		containerRef.current?.focus();
+	}
+	function handlePointerEnter(event) {
+		updateCursorHint(event);
+		if (inputDisabled || !control.activeTargetId) return;
+		control.setCaptured(true);
+		requestImplicitControl(control.activeTargetId);
+	}
+	function handlePointerLeave() {
+		cursorHintPointRef.current = null;
+		setCursorHintPoint(null);
+		control.collaboration.clearCursor();
+		if (!pointerCaptureRef.current) {
+			releasePressedKeys();
+			releaseImplicitControl();
+			control.setCaptured(false);
+		}
+	}
+	function handlePointerClick() {
+		if (!control.captured) handleCaptureClick();
+	}
+	function handlePointerMove(event) {
+		updateCursorHint(event);
+		const point = mapPointer(event, false);
+		if (control.activeTargetId && point) control.collaboration.sendCursor(control.activeTargetId, point.x, point.y, {
+			width: inputWidth,
+			height: inputHeight
+		});
+		else if (!point) control.collaboration.clearCursor();
+		if (inputDisabled) return;
+		if (pointerCaptureRef.current?.pointerId === event.pointerId) return;
+		const targetId = control.captured && event.buttons === 0 ? control.activeTargetId : null;
+		if (!targetId) return;
+		if (!point) return;
+		preventViewportDefault(event);
+		control.sendInput({
+			type: "input.mouse",
+			targetId,
+			action: "move",
+			x: point.x,
+			y: point.y,
+			button: "none",
+			buttons: 0,
+			clickCount: 0,
+			modifiers: keyboardModifiers(event.nativeEvent)
+		});
+	}
+	function handlePointerDown(event) {
+		updateCursorHint(event);
+		const targetId = resolveInputTarget();
+		if (!targetId) return;
+		const point = mapPointer(event, false);
+		if (!point) return;
+		const element = containerRef.current;
+		if (!element) return;
+		const button = resolveMouseButton(event.button);
+		const now = Date.now();
+		const clickCount = resolveClickCount(targetId, button, point, now, lastClickRef.current);
+		lastClickRef.current = {
+			targetId,
+			button,
+			point,
+			time: now,
+			clickCount
+		};
+		preventViewportDefault(event);
+		pointerCaptureRef.current = {
+			pointerId: event.pointerId,
+			targetId,
+			button,
+			clickCount
+		};
+		dragCleanupRef.current?.();
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		bindDragListeners({
+			pointerId: event.pointerId,
+			targetId,
+			button,
+			clickCount,
+			element
+		});
+		control.sendInput({
+			type: "input.mouse",
+			targetId,
+			action: "down",
+			x: point.x,
+			y: point.y,
+			button,
+			buttons: event.buttons,
+			clickCount,
+			modifiers: keyboardModifiers(event.nativeEvent)
+		});
+	}
+	function handlePointerUp(event) {
+		if (inputDisabled) return;
+		const capturedPointer = pointerCaptureRef.current;
+		const targetId = capturedPointer?.pointerId === event.pointerId ? capturedPointer.targetId : control.activeTargetId;
+		if (!targetId) return;
+		const point = mapPointer(event, capturedPointer?.pointerId === event.pointerId);
+		if (!point) return;
+		preventViewportDefault(event);
+		control.sendInput({
+			type: "input.mouse",
+			targetId,
+			action: "up",
+			x: point.x,
+			y: point.y,
+			button: capturedPointer?.button ?? resolveMouseButton(event.button),
+			buttons: event.buttons,
+			clickCount: capturedPointer?.clickCount ?? 1,
+			modifiers: keyboardModifiers(event.nativeEvent)
+		});
+		if (capturedPointer?.pointerId === event.pointerId) {
+			pointerCaptureRef.current = null;
+			if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		}
+	}
+	function handlePointerCancel(event) {
+		const capturedPointer = pointerCaptureRef.current;
+		if (capturedPointer?.pointerId !== event.pointerId) return;
+		const point = mapPointer(event, true);
+		pointerCaptureRef.current = null;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (!point || inputDisabled) return;
+		preventViewportDefault(event);
+		control.sendInput({
+			type: "input.mouse",
+			targetId: capturedPointer.targetId,
+			action: "up",
+			x: point.x,
+			y: point.y,
+			button: capturedPointer.button,
+			buttons: 0,
+			clickCount: capturedPointer.clickCount,
+			modifiers: keyboardModifiers(event.nativeEvent)
+		});
+	}
+	function bindDragListeners({ pointerId, targetId, button, clickCount, element }) {
+		const handleMove = (event) => {
+			if (event.pointerId !== pointerId) return;
+			const point = mapPointer(event, true);
+			preventNativeDefault(event);
+			if (!point) return;
+			control.collaboration.sendCursor(targetId, point.x, point.y, {
+				width: inputWidth,
+				height: inputHeight
+			});
+			control.sendInput({
+				type: "input.mouse",
+				targetId,
+				action: "move",
+				x: point.x,
+				y: point.y,
+				button,
+				buttons: event.buttons || mouseButtonsForButton(button),
+				clickCount,
+				modifiers: keyboardModifiers(event)
+			});
+		};
+		const finish = (event, canceled) => {
+			if (event.pointerId !== pointerId) return;
+			const point = mapPointer(event, true);
+			if (!mapPointer(event, false)) control.collaboration.clearCursor();
+			preventNativeDefault(event);
+			if (point) {
+				control.sendInput({
+					type: "input.mouse",
+					targetId,
+					action: "up",
+					x: point.x,
+					y: point.y,
+					button,
+					buttons: 0,
+					clickCount,
+					modifiers: keyboardModifiers(event)
+				});
+				if (!canceled) lastClickRef.current = {
+					targetId,
+					button,
+					point,
+					time: Date.now(),
+					clickCount
+				};
+			}
+			cleanup();
+		};
+		const handleUp = (event) => finish(event, false);
+		const handleCancel = (event) => finish(event, true);
+		const cleanup = () => {
+			window.removeEventListener("pointermove", handleMove, true);
+			window.removeEventListener("pointerup", handleUp, true);
+			window.removeEventListener("pointercancel", handleCancel, true);
+			try {
+				if (element.hasPointerCapture(pointerId)) element.releasePointerCapture(pointerId);
+			} catch {}
+			if (pointerCaptureRef.current?.pointerId === pointerId) pointerCaptureRef.current = null;
+			if (dragCleanupRef.current === cleanup) dragCleanupRef.current = null;
+		};
+		dragCleanupRef.current = cleanup;
+		window.addEventListener("pointermove", handleMove, true);
+		window.addEventListener("pointerup", handleUp, true);
+		window.addEventListener("pointercancel", handleCancel, true);
+	}
+	function handleWheel(event) {
+		const targetId = resolveInputTarget();
+		if (!targetId) return;
+		const point = mapPointer(event, false);
+		if (!point) return;
+		preventViewportDefault(event);
+		const wheelScale = wheelDeltaScale(event.deltaMode, inputHeight);
+		control.sendInput({
+			type: "input.wheel",
+			targetId,
+			x: point.x,
+			y: point.y,
+			deltaX: event.deltaX * wheelScale,
+			deltaY: event.deltaY * wheelScale,
+			modifiers: keyboardModifiers(event.nativeEvent)
+		});
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Escape" && paintingEnabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			onPaintingEnabledChange?.(false);
+			return;
+		}
+		if (event.key === "Escape") {
+			if (control.captured) {
+				event.preventDefault();
+				event.stopPropagation();
+				control.setCaptured(false);
+				releaseImplicitControl();
+			}
+			return;
+		}
+		const keyId = event.code || event.key;
+		if (event.repeat && releasedKeysRef.current.has(keyId)) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		const targetId = control.activeTargetId;
+		if (inputDisabled || !targetId || !control.captured && focusedElement(containerRef.current) !== containerRef.current && !containerRef.current?.contains(event.target)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const clipboardShortcut = resolveClipboardShortcut(event.nativeEvent);
+		if (clipboardShortcut === "copy") {
+			control.sendInput({
+				type: "clipboard.copy",
+				targetId
+			});
+			return;
+		}
+		if (clipboardShortcut === "cut") {
+			control.sendInput({
+				type: "clipboard.cut",
+				targetId
+			});
+			return;
+		}
+		if (clipboardShortcut === "paste") {
+			pasteClipboard(control, onNotice);
+			return;
+		}
+		if (!shouldForwardBrowserShortcut(event.nativeEvent)) return;
+		const input = keyboardInputMessage(event.nativeEvent, "down");
+		if (control.sendInput({
+			type: "input.key",
+			targetId,
+			action: "down",
+			...input
+		})) {
+			releasedKeysRef.current.delete(keyId);
+			pressedKeysRef.current.set(keyId, {
+				targetId,
+				input
+			});
+		}
+	}
+	function handleKeyUp(event) {
+		const keyId = event.code || event.key;
+		if (releasedKeysRef.current.delete(keyId)) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		const pressedKey = pressedKeysRef.current.get(keyId);
+		const targetId = pressedKey?.targetId ?? control.activeTargetId;
+		const canForwardUntrackedKey = !inputDisabled && (control.captured || focusedElement(containerRef.current) === containerRef.current || Boolean(containerRef.current?.contains(event.target)));
+		if (!targetId || !pressedKey && !canForwardUntrackedKey) return;
+		if (event.key === "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!pressedKey && resolveClipboardShortcut(event.nativeEvent)) return;
+		if (!pressedKey && !shouldForwardBrowserShortcut(event.nativeEvent)) return;
+		if (control.sendInput({
+			type: "input.key",
+			targetId,
+			action: "up",
+			...keyboardInputMessage(event.nativeEvent, "up")
+		})) pressedKeysRef.current.delete(keyId);
+	}
+	function handleBlur(event) {
+		if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+		releasePressedKeys();
+		releaseImplicitControl();
+		control.setCaptured(false);
+	}
+	function updateCursorHint(event) {
+		const rect = containerRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const point = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		cursorHintPointRef.current = point;
+		if (cursorHint) setCursorHintPoint(point);
+	}
+	const status = resolveViewportStatus(control.phase, frameMetadata !== null, control.mediaPhase, control.mediaPath, showingWebRTC);
+	const placeholder = resolveViewportPlaceholder(control.phase, control.mediaPhase, control.mediaSwitching);
+	const visibleCollaborationError = collaborationHint || isInputOwnershipError(control.collaboration.lastError) ? null : control.collaboration.lastError;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		tabIndex: 0,
+		onKeyDown: handleKeyDown,
+		onKeyUp: handleKeyUp,
+		onBlur: handleBlur,
+		onClick: handlePointerClick,
+		onPointerMove: handlePointerMove,
+		onFocus: () => {
+			if (!inputDisabled && control.activeTargetId) requestImplicitControl(control.activeTargetId);
+		},
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onWheel: handleWheel,
+		onContextMenu: (event) => {
+			if (control.captured) event.preventDefault();
+		},
+		"aria-busy": mediaTransitioning,
+		"aria-disabled": inputDisabled,
+		className,
+		style: {
+			position: "relative",
+			display: "flex",
+			flex: "1 1 0%",
+			minHeight: 0,
+			alignItems: "center",
+			justifyContent: "center",
+			overflow: "hidden",
+			outline: "none",
+			touchAction: "none",
+			cursor: localCursorEnabled ? void 0 : "none",
+			...style
+		},
+		children: [
+			showingWebRTC ? /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "relative",
+					overflow: "hidden",
+					background: "black",
+					transition: "opacity 150ms",
+					opacity: mediaTransitioning ? .75 : 1,
+					width: displayMetrics.renderedWidth,
+					height: displayMetrics.renderedHeight
+				},
+				children: /* @__PURE__ */ jsx("video", {
+					ref: videoRef,
+					autoPlay: true,
+					muted: true,
+					playsInline: true,
+					"data-viewport-width": renderWidth,
+					"data-viewport-height": renderHeight,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						maxWidth: "none",
+						objectFit: "fill",
+						width: displayMetrics.renderedWidth * ((displayedMediaSize?.canvasWidth ?? contentWidth) / contentWidth),
+						height: displayMetrics.renderedHeight * ((displayedMediaSize?.canvasHeight ?? contentHeight) / contentHeight)
+					}
+				})
+			}) : frameMetadata ? /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "relative",
+					overflow: "hidden",
+					background: "black",
+					width: displayMetrics.renderedWidth,
+					height: displayMetrics.renderedHeight
+				},
+				children: /* @__PURE__ */ jsx("img", {
+					ref: imageRef,
+					alt: "",
+					draggable: false,
+					style: {
+						position: "absolute",
+						inset: 0,
+						width: "100%",
+						height: "100%",
+						objectFit: "contain"
+					}
+				})
+			}) : null,
+			control.activeTargetId ? /* @__PURE__ */ jsx(CollaborationPaintOverlay, {
+				collaboration: control.collaboration,
+				targetId: control.activeTargetId,
+				enabled: paintOverlayEnabled,
+				visible: !control.mediaSwitching && !mediaTransitioning && (showingWebRTC || frameMetadata !== null),
+				left: displayMetrics.offsetX,
+				top: displayMetrics.offsetY,
+				width: displayMetrics.renderedWidth,
+				height: displayMetrics.renderedHeight
+			}) : null,
+			renderOverlay?.({
+				status,
+				placeholder: showingWebRTC || frameMetadata ? null : placeholder,
+				cursorHint: cursorHint && displayedCursorHintPoint ? {
+					text: cursorHint,
+					...displayedCursorHintPoint
+				} : null,
+				followedCursor: followedCursorPoint && followedParticipant ? {
+					name: followedParticipant.name,
+					...followedCursorPoint
+				} : null,
+				collaborationError: visibleCollaborationError?.message ?? null
+			})
+		]
+	});
+}
+function resolveDisconnectedHint(phase) {
+	if (phase === "disconnected" || phase === "error") return "Session disconnected";
+	return null;
+}
+function resolveCollaborationHint(collaboration) {
+	if (collaboration.holderClientId !== null && collaboration.holderClientId !== collaboration.clientId) return "Input in use";
+	if (collaboration.hasControl) return null;
+	if (collaboration.lastError?.code === "input_busy" || collaboration.lastError?.code === "input_not_owned") return "Input in use";
+	if (collaboration.lastError?.code === "input_unavailable") return "Input unavailable";
+	return null;
+}
+function isInputOwnershipError(error) {
+	return error?.code === "input_busy" || error?.code === "input_not_owned";
+}
+function enqueueImageFrame(image, decoder, frame) {
+	decoder.pending = frame;
+	decodeNextImageFrame(image, decoder);
+}
+function decodeNextImageFrame(image, decoder) {
+	if (decoder.decodingFrame !== null || decoder.pending === null) return;
+	const frame = decoder.pending;
+	const generation = decoder.generation;
+	decoder.pending = null;
+	decoder.decodingFrame = frame;
+	setImageFrame(image, frame).then(() => {
+		if (decoder.generation !== generation) return;
+		decoder.decodingFrame = null;
+		decodeNextImageFrame(image, decoder);
+	});
+}
+async function setImageFrame(image, frame) {
+	const previousSource = image.src;
+	const source = URL.createObjectURL(frame.data);
+	image.src = source;
+	try {
+		await image.decode();
+	} catch {} finally {
+		if (previousSource.startsWith("blob:")) URL.revokeObjectURL(previousSource);
+		if (image.src !== source) URL.revokeObjectURL(source);
+	}
+}
+function resetImageFrames(image, decoder) {
+	resetRasterFrameDecoder(decoder);
+	const source = image.src;
+	image.removeAttribute("src");
+	if (source.startsWith("blob:")) URL.revokeObjectURL(source);
+}
+function resetRasterFrameDecoder(decoder) {
+	decoder.generation += 1;
+	decoder.decodingFrame = null;
+	decoder.pending = null;
+}
+function resolveViewportPlaceholder(phase, mediaPhase, switching) {
+	if (phase === "connecting") return "connecting";
+	if (phase === "connected" && mediaPhase === "connecting") return "connecting-media";
+	if (phase === "connected" && switching) return "switching";
+	if (phase === "disconnected" || phase === "error") return "disconnected";
+	return "waiting";
+}
+function resolveClipboardShortcut(event) {
+	if (!(event.metaKey || event.ctrlKey) || event.altKey) return null;
+	switch (event.code) {
+		case "KeyC": return "copy";
+		case "KeyX": return "cut";
+		case "KeyV": return "paste";
+		default: return null;
+	}
+}
+function resolveMouseButton(button) {
+	if (button === 0) return "left";
+	if (button === 1) return "middle";
+	if (button === 2) return "right";
+	return "none";
+}
+function resolveClickCount(targetId, button, point, time, previous) {
+	if (previous && previous.targetId === targetId && previous.button === button && time - previous.time <= MULTI_CLICK_MS && Math.abs(previous.point.x - point.x) <= MULTI_CLICK_DISTANCE && Math.abs(previous.point.y - point.y) <= MULTI_CLICK_DISTANCE) return Math.min(previous.clickCount + 1, 3);
+	return 1;
+}
+function mouseButtonsForButton(button) {
+	switch (button) {
+		case "left": return 1;
+		case "right": return 2;
+		case "middle": return 4;
+		case "none": return 0;
+		default: return button;
+	}
+}
+function clampNumber(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function wheelDeltaScale(deltaMode, viewportHeight) {
+	if (deltaMode === WheelEvent.DOM_DELTA_LINE) return 16;
+	if (deltaMode === WheelEvent.DOM_DELTA_PAGE) return viewportHeight;
+	return 1;
+}
+async function pasteClipboard(control, onNotice) {
+	if (!control.activeTargetId) return;
+	let text = "";
+	try {
+		text = await navigator.clipboard.readText();
+	} catch (error) {
+		console.warn("Clipboard read failed", error);
+		onNotice?.({
+			level: "error",
+			message: "Clipboard read failed"
+		});
+		return;
+	}
+	if (!text) return;
+	control.sendInput({
+		type: "clipboard.paste",
+		targetId: control.activeTargetId,
+		items: [{
+			mimeType: "text/plain",
+			data: text
+		}]
+	});
+}
+function resolveViewportStatus(phase, hasFrame, mediaPhase, mediaPath, showingWebRTC) {
+	if (phase !== "connected") return "offline";
+	if (mediaPhase === "live" && showingWebRTC) return "webrtc";
+	if (!hasFrame) return "offline";
+	return mediaPath === "websocket-live" ? "websocket" : "webrtc";
+}
+function focusedElement(node) {
+	const root = node?.getRootNode();
+	return root instanceof Document || root instanceof ShadowRoot ? root.activeElement : null;
+}
+//#endregion
+//#region src/hooks/use-browser-control.ts
+const emptyIceServers$1 = [];
+function useBrowserControl({ sessionId, credentials, displayName, sessionToken, collaborationRole = "owner", enabled = true, webrtcProducerSupported = false, webrtcIceServers = emptyIceServers$1, onNotice }) {
+	const runtime = useRuntime();
+	const onNoticeRef = useRef(onNotice);
+	onNoticeRef.current = onNotice;
+	const notify = (level, message) => Effect.sync(() => onNoticeRef.current?.({
+		level,
+		message
+	}));
+	const live = useLiveSession({
+		sessionId,
+		displayName,
+		credentials,
+		sessionToken,
+		role: collaborationRole,
+		enabled: Boolean(enabled && sessionId && credentials),
+		webrtcSupported: webrtcProducerSupported,
+		iceServers: webrtcIceServers
+	});
+	const [targetOrder, setTargetOrder] = useState([]);
+	const targets = useMemo(() => mergeTargetsInCurrentOrder(targetOrder, live.targets), [live.targets, targetOrder]);
+	const liveTargetsRef = useRef(live.targets);
+	liveTargetsRef.current = live.targets;
+	const phaseRef = useRef(live.phase);
+	phaseRef.current = live.phase;
+	const [viewport, setViewportState] = useState(DEFAULT_VIEWPORT);
+	const [browserViewportSize, setBrowserViewportSizeState] = useState(null);
+	const [viewportAutoSync, setViewportAutoSyncState] = useState(false);
+	const [captured, setCaptured] = useState(false);
+	const [recordingBusy, setRecordingBusy] = useState(false);
+	const activeTargetIdRef = useRef(null);
+	const viewportRef = useRef(viewport);
+	const inputDimensionsRef = useRef(DEFAULT_VIEWPORT);
+	const browserViewportSizeRef = useRef(null);
+	const viewportAutoSyncRef = useRef(false);
+	activeTargetIdRef.current = live.activeTargetId;
+	viewportRef.current = viewport;
+	browserViewportSizeRef.current = browserViewportSize;
+	viewportAutoSyncRef.current = viewportAutoSync;
+	useEffect(() => {
+		if (live.phase !== "connected") setCaptured(false);
+	}, [live.phase]);
+	useEffect(() => {
+		if (!live.mediaSize) return;
+		const current = viewportRef.current;
+		if (current.width === live.mediaSize.width && current.height === live.mediaSize.height && current.deviceScaleFactor === live.mediaSize.deviceScaleFactor) return;
+		setViewportState(createBrowserViewport(live.mediaSize, live.mediaSize.deviceScaleFactor));
+	}, [live.mediaSize]);
+	const sendInput = useCallback((message) => {
+		if (!enabled || !sessionId || !credentials) return false;
+		return live.sendBrowserInput(message, inputDimensionsRef.current);
+	}, [
+		credentials,
+		enabled,
+		live,
+		sessionId
+	]);
+	const activateTarget = useCallback((targetId) => {
+		live.selectTarget(targetId);
+	}, [live]);
+	const reorderTargets = useCallback((sourceTargetId, destinationTargetId, placement) => {
+		if (sourceTargetId === destinationTargetId) return;
+		setTargetOrder((order) => {
+			const current = mergeTargetsInCurrentOrder(order, liveTargetsRef.current).map((target) => target.id);
+			const sourceIndex = current.indexOf(sourceTargetId);
+			const destinationIndex = current.indexOf(destinationTargetId);
+			const source = current[sourceIndex];
+			if (sourceIndex === -1 || destinationIndex === -1 || !source) return order;
+			const next = [...current];
+			next.splice(sourceIndex, 1);
+			const requestedIndex = placement === "after" ? destinationIndex + 1 : destinationIndex;
+			const nextIndex = sourceIndex < requestedIndex ? requestedIndex - 1 : requestedIndex;
+			if (nextIndex === sourceIndex) return order;
+			next.splice(nextIndex, 0, source);
+			return next;
+		});
+	}, []);
+	const createAndSelectTarget = useCallback((url) => runtime.runPromise(live.request("target.create", { url }).pipe(Effect.map((result) => result.targetId ?? null), Effect.catch((error) => notify("error", errorMessage(error, "Tab could not be created")).pipe(Effect.as(null))))), [live, runtime]);
+	const createTarget = useCallback((url = "about:blank") => {
+		createAndSelectTarget(url);
+	}, [createAndSelectTarget]);
+	const duplicateTarget = useCallback((target) => {
+		createAndSelectTarget(target.url || "about:blank").then((targetId) => {
+			if (targetId) reorderTargets(targetId, target.id, "after");
+		});
+	}, [createAndSelectTarget, reorderTargets]);
+	const closeTarget = useCallback((targetId) => {
+		live.command("target.close", { targetId });
+	}, [live]);
+	const navigate = useCallback((url) => {
+		const targetId = activeTargetIdRef.current;
+		if (targetId) live.command("page.navigate", {
+			targetId,
+			url
+		});
+	}, [live]);
+	const reload = useCallback((targetId) => {
+		live.command("page.reload", { targetId });
+	}, [live]);
+	const stopLoading = useCallback(() => {
+		const targetId = activeTargetIdRef.current;
+		if (targetId) live.command("page.stop-loading", { targetId });
+	}, [live]);
+	const historyBack = useCallback(() => {
+		const targetId = activeTargetIdRef.current;
+		if (targetId) live.command("page.history-back", { targetId });
+	}, [live]);
+	const historyForward = useCallback(() => {
+		const targetId = activeTargetIdRef.current;
+		if (targetId) live.command("page.history-forward", { targetId });
+	}, [live]);
+	const commitViewport = useCallback((preset) => {
+		setViewportState(preset);
+		const targetId = activeTargetIdRef.current;
+		if (targetId) live.command("viewport.set", {
+			targetId,
+			width: preset.width,
+			height: preset.height,
+			deviceScaleFactor: preset.deviceScaleFactor
+		});
+	}, [live]);
+	const setViewport = useCallback((preset) => {
+		viewportAutoSyncRef.current = false;
+		setViewportAutoSyncState(false);
+		commitViewport(preset);
+	}, [commitViewport]);
+	const setBrowserViewportSize = useCallback((size) => {
+		const next = {
+			width: Math.round(size.width),
+			height: Math.round(size.height)
+		};
+		if (next.width < 1 || next.height < 1) return;
+		const current = browserViewportSizeRef.current;
+		if (current?.width === next.width && current.height === next.height) return;
+		browserViewportSizeRef.current = next;
+		setBrowserViewportSizeState(next);
+		if (viewportAutoSyncRef.current) commitViewport(createBrowserViewport(next, viewportRef.current.deviceScaleFactor));
+	}, [commitViewport]);
+	const setViewportAutoSync = useCallback((nextEnabled) => {
+		viewportAutoSyncRef.current = nextEnabled;
+		setViewportAutoSyncState(nextEnabled);
+		const size = browserViewportSizeRef.current;
+		if (nextEnabled && size) commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor));
+	}, [commitViewport]);
+	const setViewportToBrowserSize = useCallback(() => {
+		const size = browserViewportSizeRef.current;
+		if (!size) return;
+		viewportAutoSyncRef.current = false;
+		setViewportAutoSyncState(false);
+		commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor));
+	}, [commitViewport]);
+	const settleRecording = (effect, failure) => effect.pipe(Effect.catch((error) => notify("error", errorMessage(error, failure))), Effect.ensuring(Effect.sync(() => setRecordingBusy(false))));
+	const runStartRecording = useEffectCallback((mode, targetId) => settleRecording(live.request("recording.start", {
+		mode,
+		targetId
+	}), "Recording failed to start"), [live]);
+	const startRecording = useCallback((mode) => {
+		const targetId = activeTargetIdRef.current;
+		if (!targetId || collaborationRole !== "owner" || recordingBusy) return;
+		setRecordingBusy(true);
+		runStartRecording(mode, targetId);
+	}, [
+		collaborationRole,
+		recordingBusy,
+		runStartRecording
+	]);
+	const runStopRecording = useEffectCallback((credentials, sessionId, recordingId) => settleRecording(live.request("recording.stop", { recordingId }).pipe(Effect.andThen(SessionsApi.use((sessions) => sessions.downloadSessionRecording(credentials, sessionId, recordingId, sessionToken))), Effect.flatMap(({ blob, filename }) => {
+		const recording = live.recordings.find((candidate) => candidate.recordingId === recordingId);
+		return downloadBlob(blob, filename ?? `${sessionId}-${recording?.targetId ?? "target"}-${recordingId}.webm`);
+	}), Effect.andThen(notify("success", "Recording saved"))), "Recording failed to stop"), [live, sessionToken]);
+	const stopRecording = useCallback((recordingId) => {
+		if (!sessionId || !credentials || recordingBusy) return;
+		setRecordingBusy(true);
+		runStopRecording(credentials, sessionId, recordingId);
+	}, [
+		credentials,
+		recordingBusy,
+		runStopRecording,
+		sessionId
+	]);
+	const runCancelRecording = useEffectCallback((recordingId) => settleRecording(live.request("recording.cancel", { recordingId }).pipe(Effect.andThen(notify("success", "Recording stopped"))), "Recording failed to stop"), [live]);
+	const cancelRecording = useCallback((recordingId) => {
+		if (recordingBusy) return;
+		setRecordingBusy(true);
+		runCancelRecording(recordingId);
+	}, [recordingBusy, runCancelRecording]);
+	const runSetRemoteCursor = useEffectCallback((visible) => live.request("presentation.cursor.set", { visible }).pipe(Effect.catch((error) => notify("error", errorMessage(error, "Remote cursor could not be updated")))), [live]);
+	const setRemoteCursorEnabled = useCallback((visible) => {
+		if (sessionId && credentials) runSetRemoteCursor(visible);
+	}, [
+		credentials,
+		runSetRemoteCursor,
+		sessionId
+	]);
+	const runSelectPresentation = useEffectCallback((selection) => live.selectPresentation(selection).pipe(Effect.catch((error) => notify("error", errorMessage(error, "Presentation could not be updated")))), [live]);
+	const selectMediaStream = useCallback((selection) => {
+		if (!enabled || !sessionId || !credentials || live.mediaSwitching) return false;
+		runSelectPresentation(selection);
+		return true;
+	}, [
+		credentials,
+		enabled,
+		live.mediaSwitching,
+		runSelectPresentation,
+		sessionId
+	]);
+	const setWebRTCStreamSettings = useCallback((settings) => selectMediaStream({
+		kind: "webrtc",
+		quality: settings
+	}), [selectMediaStream]);
+	const commands = useMemo(() => {
+		const connected = (effect) => Effect.suspend(() => phaseRef.current === "connected" ? effect : Effect.fail(new LiveSessionError({ message: "the session is not connected" })));
+		const request = (type, payload) => connected(live.request(type, payload));
+		const onActiveTarget = (type, payload = {}) => connected(Effect.suspend(() => {
+			const targetId = activeTargetIdRef.current;
+			return targetId ? live.request(type, {
+				targetId,
+				...payload
+			}) : Effect.fail(new LiveSessionError({ message: "no tab is active" }));
+		})).pipe(Effect.asVoid);
+		return {
+			navigate: (url) => onActiveTarget("page.navigate", { url }),
+			historyBack: () => onActiveTarget("page.history-back"),
+			historyForward: () => onActiveTarget("page.history-forward"),
+			reload: (targetId) => targetId ? request("page.reload", { targetId }).pipe(Effect.asVoid) : onActiveTarget("page.reload"),
+			stopLoading: () => onActiveTarget("page.stop-loading"),
+			createTarget: (url = "about:blank") => request("target.create", { url }).pipe(Effect.map((result) => result.targetId ?? null)),
+			closeTarget: (targetId) => request("target.close", { targetId }).pipe(Effect.asVoid),
+			activateTarget: (targetId) => connected(live.requestSelectTarget(targetId))
+		};
+	}, [live.request, live.requestSelectTarget]);
+	const activeTarget = useMemo(() => targets.find((target) => target.id === live.activeTargetId) ?? null, [live.activeTargetId, targets]);
+	const mediaPath = live.transport === "webrtc" ? "webrtc-live" : "websocket-live";
+	const mediaPhase = live.phase === "connected" ? "live" : live.phase === "connecting" ? "connecting" : live.phase === "error" ? "failed" : "idle";
+	return {
+		phase: live.phase,
+		targets,
+		activeTargetId: live.activeTargetId,
+		activeTarget,
+		frames: live.frames,
+		mediaPhase,
+		mediaStream: live.mediaStream,
+		mediaStreamSettings: live.presentation?.quality ?? null,
+		mediaVideoProfiles: live.presentation?.profiles ?? [],
+		mediaSize: live.mediaSize,
+		mediaPath,
+		mediaTargetId: live.activeTargetId,
+		mediaSwitching: live.mediaSwitching,
+		viewport,
+		browserViewportSize,
+		viewportAutoSync,
+		captured,
+		recordings: live.recordings,
+		recordingBusy,
+		remoteCursorEnabled: live.presentation?.cursorVisible ?? true,
+		collaboration: live.collaboration,
+		commands,
+		setCaptured,
+		setInputDimensions: (size) => {
+			inputDimensionsRef.current = size;
+		},
+		setViewport,
+		setBrowserViewportSize,
+		setViewportAutoSync,
+		setViewportToBrowserSize,
+		setWebRTCStreamSettings,
+		selectMediaStream,
+		sendInput,
+		activateTarget,
+		reorderTargets,
+		createTarget,
+		duplicateTarget,
+		closeTarget,
+		navigate,
+		reload,
+		stopLoading,
+		historyBack,
+		historyForward,
+		startRecording,
+		stopRecording,
+		cancelRecording,
+		setRemoteCursorEnabled,
+		reconnect: live.reconnect
+	};
+}
+function mergeTargetsInCurrentOrder(order, nextTargets) {
+	const nextById = new Map(nextTargets.map((target) => [target.id, target]));
+	const seen = /* @__PURE__ */ new Set();
+	const ordered = [];
+	for (const targetId of order) {
+		const nextTarget = nextById.get(targetId);
+		if (nextTarget) {
+			ordered.push(nextTarget);
+			seen.add(nextTarget.id);
+		}
+	}
+	for (const nextTarget of nextTargets) if (!seen.has(nextTarget.id)) ordered.push(nextTarget);
+	return ordered;
+}
+function createBrowserViewport(size, deviceScaleFactor) {
+	return createViewportPreset(size.width, size.height, deviceScaleFactor);
+}
+const downloadBlob = (blob, filename) => Effect.acquireUseRelease(Effect.sync(() => URL.createObjectURL(blob)), (url) => Effect.sync(() => {
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = filename;
+	link.click();
+}), (url) => Effect.sync(() => URL.revokeObjectURL(url)).pipe(Effect.delay(0)));
+function errorMessage(cause, fallback) {
+	return cause instanceof Error && cause.message ? cause.message : fallback;
+}
+//#endregion
+//#region src/runtime.ts
+const makeApertureRuntime = (options = {}) => ManagedRuntime.make(Layer.mergeAll(apiClientLayer.pipe(Layer.provide(options.baseUrl ? baseUrlLayer(options.baseUrl) : Layer.empty), Layer.provide(FetchHttpClient.layer)), Layer.succeed(HttpClient.TracerPropagationEnabled, false)));
+//#endregion
+//#region src/provider.tsx
+function ApertureProvider({ baseUrl, children }) {
+	const [runtime, setRuntime] = useState(null);
+	useEffect(() => {
+		const created = makeApertureRuntime({ baseUrl });
+		setRuntime(created);
+		return () => {
+			setRuntime(null);
+			created.dispose();
+		};
+	}, [baseUrl]);
+	return runtime ? /* @__PURE__ */ jsx(RuntimeProvider, {
+		runtime,
+		baseUrl,
+		children
+	}) : null;
+}
+//#endregion
+//#region src/shared-session.ts
+function parseShareToken(token) {
+	const sessionId = token.slice(4, 40);
+	const role = token.startsWith("ape_") ? "editor" : token.startsWith("apv_") ? "viewer" : null;
+	if (!role || token[40] !== "_" || !sessionId || !token.slice(41)) return null;
+	return {
+		token,
+		sessionId,
+		role
+	};
+}
+const emptyIceServers = [];
+function useSharedSession({ token, displayName, onNotice }) {
+	const share = useMemo(() => parseShareToken(token), [token]);
+	const credentials = useMemo(() => share && {
+		kind: "bearer",
+		token: share.token,
+		authorityType: null,
+		tenantId: null,
+		selectedTenantId: null
+	}, [share]);
+	const [state, setState] = useState({ kind: "loading" });
+	useFork(() => share && credentials ? Effect.sync(() => setState({ kind: "loading" })).pipe(Effect.andThen(SessionsApi.use((sessions) => sessions.getBrowserStatus(credentials, share.sessionId))), Effect.match({
+		onFailure: (error) => setState({ kind: error.status === 410 ? "expired" : "unavailable" }),
+		onSuccess: (browser) => setState(browser.sessionId === share.sessionId ? {
+			kind: "ready",
+			browser
+		} : { kind: "unavailable" })
+	})) : void 0, [credentials, share]);
+	const browser = state.kind === "ready" ? state.browser : null;
+	const control = useBrowserControl({
+		sessionId: share?.sessionId ?? null,
+		credentials: browser ? credentials : null,
+		displayName,
+		sessionToken: share?.token,
+		collaborationRole: share?.role ?? "viewer",
+		enabled: browser !== null,
+		webrtcProducerSupported: browser?.media.mode === "auto" && browser.media.webrtcProducer,
+		webrtcIceServers: browser?.media.iceServers ?? emptyIceServers,
+		onNotice
+	});
+	return {
+		status: share ? state.kind : "invalid",
+		share,
+		browser,
+		control
+	};
+}
+//#endregion
+export { makeApertureRuntime as a, collaborationPaintLifetimeMs as c, RuntimeProviderMissingError as d, useBaseUrl as f, useRuntime as g, useRunApi as h, ApertureProvider as i, useLiveSession as l, useFork as m, parseShareToken as n, useBrowserControl as o, useEffectCallback as p, useSharedSession as r, SessionViewport as s, LiveSessionError$1 as t, RuntimeProvider as u };
+
+//# sourceMappingURL=headless-CKFacFX3.js.map