@aperture-browser/session-react 0.0.0-init.0 → 0.0.0-nightly.100.78b4e7ef6edc

package/README.md

@@ -1,77 +1,28 @@
 # @aperture-browser/session-react
 
-React components for embedding a live [Aperture](https://github.com/tarik02/aperture) browser session.
+React components and hooks for embedding a live [Aperture](https://github.com/tarik02/aperture) browser session, with the built-in UI or headless.
 
 ```sh
 npm install @aperture-browser/session-react effect react react-dom
 ```
 
 ```tsx
-import { ApertureSession } from "@aperture-browser/session-react";
+import { useMemo } from "react";
+import { ApertureSession, shareSessionAccess } from "@aperture-browser/session-react";
 import "@aperture-browser/session-react/styles.css";
 
 export function SharedBrowser({ token }: { token: string }) {
+  const access = useMemo(() => shareSessionAccess(token, "https://aperture.example"), [token]);
   return (
     <div style={{ height: 600 }}>
-      <ApertureSession baseUrl="https://aperture.example" token={token} />
+      <ApertureSession access={access} />
     </div>
   );
 }
 ```
 
-`token` is a share link's editor (`ape_…`) or viewer (`apv_…`) token; the component grants exactly what the link grants. Props:
+`@aperture-browser/session-react/headless` has the same session without any UI, for apps that build their own controls.
 
-- `baseUrl`: the Aperture instance, when it is not the page's own origin. The instance must list your origin in `embed_allowed_origins`.
-- `features`: turns parts of the UI off, e.g. `{ tabs: false, menus: false }`. Each defaults to on: `tabs`, `navigation` (back, forward, reload), `addressBar`, `presence` (who else is connected), `drawing`, `menus` (stream, viewport, recording and input settings), `statusBadge`, `toaster` (turn it off if your app renders its own [sonner](https://sonner.emilkowal.ski) toaster).
-- `theme`: `"light"`, `"dark"` or `"system"` (the default).
+Documentation: https://aperture-browser-docs.pages.dev/docs/packages/session-react
 
-## Styles
-
-`styles.css` styles everything inside the component's `.aperture-root` element: theme colors and a scoped reset. It does not touch your page's `html`, `body` or `:root`, and menus and tooltips render inside the root. It does include Tailwind utility classes, which your own unlayered CSS can override. For full isolation use [`@aperture-browser/session-element`](https://www.npmjs.com/package/@aperture-browser/session-element), which renders into Shadow DOM.
-
-The component uses your page's font. To pick others, set `--aperture-font-sans` and `--aperture-font-mono` (used for URLs) on it or any ancestor, e.g. `--aperture-font-sans: "Inter", sans-serif`.
-
-## Headless
-
-`@aperture-browser/session-react/headless` has the session without any UI: no tab strip, toolbar, menus, stylesheet or UI dependencies. Build your own controls around it.
-
-```tsx
-import {
-  ApertureProvider,
-  SessionViewport,
-  useSharedSession,
-} from "@aperture-browser/session-react/headless";
-
-function Browser({ token }: { token: string }) {
-  const { status, control } = useSharedSession({ token, onNotice: console.warn });
-  if (status !== "ready") return <p>{status}</p>;
-  return (
-    <>
-      {control.targets.map((tab) => (
-        <button key={tab.id} onClick={() => control.activateTarget(tab.id)}>
-          {tab.title}
-        </button>
-      ))}
-      <button onClick={() => control.historyBack()}>Back</button>
-      <SessionViewport control={control} style={{ height: 600 }} />
-    </>
-  );
-}
-
-export const App = ({ token }: { token: string }) => (
-  <ApertureProvider baseUrl="https://aperture.example">
-    <Browser token={token} />
-  </ApertureProvider>
-);
-```
-
-- `useSharedSession` resolves the token (`status` is `loading`, `ready`, `invalid`, `expired` or `unavailable`) and connects once it is ready. `control` lists the tabs and navigates, opens, closes and activates them.
-- `SessionViewport` shows the active tab and forwards input to it. It is styled inline and takes `className` and `style`. `renderOverlay` receives the connection status, a placeholder reason while there is no picture yet, and cursor hints, for drawing your own overlays.
-- `onNotice` receives the errors and confirmations the full UI shows as toasts.
-- `control.commands` has the same actions as Effects that succeed once Aperture has carried them out and fail with a `LiveSessionError` otherwise, e.g. `yield* control.commands.navigate(url)`.
-
-## Lower-level pieces
-
-`SharedSession` is the same view without its own runtime, tooltip provider and toaster, for apps that provide them (`RuntimeProvider` with `makeApertureRuntime`, and `TooltipProvider`). `useBrowserControl` and `BrowserControlPane` drive and render a session for other credentials. These are what the Aperture web app is built from.
-
-Requires `effect` 4 and React 19.
+For consumer-authenticated access, pass a stable `access` object with `{ kind: "relay", baseUrl: "/aperture", sessionId }`. Your backend owns authentication through `@aperture-browser/session-relay`; the browser sends no Aperture credentials. `useSession({ access })` exposes the same connection headlessly.

package/dist/{headless-CKFacFX3.js → headless-CPoXwbFz.js}

@@ -1,18 +1,19 @@
 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 { DEFAULT_VIEWPORT, LiveSessionConnection, LiveSessionError, LiveSessionError as LiveSessionError$1, computeRenderMetrics, createViewportPreset, downloadSessionRecording, evdevKeycodeByCode, getSessionStatus, getTargetThumbnail, 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";
+import * as FetchHttpClient from "effect/http/FetchHttpClient";
+import * as HttpClient from "effect/http/HttpClient";
+import { apiClientLayer, baseUrlLayer } from "@aperture-browser/api-client";
+import * as Redacted from "effect/Redacted";
 //#region src/effect.tsx
 const RuntimeContext = createContext(null);
 /** A hook below needed the app runtime, but no RuntimeProvider is above the component. */
@@ -94,10 +95,10 @@ const pointerButtonCode = {
 	right: 273,
 	middle: 274
 };
-function useLiveSession({ sessionId, displayName = null, credentials, sessionToken, role, enabled, webrtcSupported, iceServers }) {
-	const identity = useMemo(() => collaborationIdentity(role, displayName), [displayName, role]);
+function useLiveSession({ access, displayName = null, enabled, webrtcSupported, iceServers, autoSize }) {
+	const identity = useMemo(() => collaborationIdentity(displayName), [displayName]);
+	const [role, setRole] = useState("viewer");
 	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]);
@@ -127,6 +128,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 	const [presentationSwitching, setPresentationSwitching] = useState(false);
 	const [presentation, setPresentation] = useState(null);
 	const [recordings, setRecordings] = useState([]);
+	const [viewportOwnership, setViewportOwnership] = useState(null);
 	const [clientId, setClientId] = useState("");
 	const [holderClientId, setHolderClientId] = useState(null);
 	const [leaseMode, setLeaseMode] = useState(null);
@@ -139,6 +141,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 	const handleMessage = useCallback((message) => {
 		switch (message.type) {
 			case "session.snapshot":
+				setRole(message.role);
 				clientIdRef.current = message.clientId;
 				setClientId(message.clientId);
 				holderClientIdRef.current = message.holderClientId ?? null;
@@ -152,6 +155,10 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 				setMediaSize(resolveMediaSize(message.targets, message.activeTargetId));
 				setRecordings(message.recordings);
 				setPresentation(message.presentation ?? null);
+				setViewportOwnership(message.autoSize === void 0 ? null : {
+					ownerClientId: message.viewportOwnerClientId ?? null,
+					autoSize: message.autoSize
+				});
 				setLastError(null);
 				return;
 			case "targets.state":
@@ -179,6 +186,12 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 				releasePendingRef.current = false;
 				setLastError((current) => current?.code === "input_busy" || current?.code === "input_not_owned" ? null : current);
 				return;
+			case "viewport.state":
+				setViewportOwnership({
+					ownerClientId: message.viewportOwnerClientId ?? null,
+					autoSize: message.autoSize
+				});
+				return;
 			case "presence.cursor":
 				if (message.clientId !== followingClientIdRef.current) return;
 				setCursors((current) => new Map(current).set(message.clientId, message));
@@ -220,9 +233,10 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 		}
 	}, [publishPaint]);
 	useFork(() => {
-		if (!enabled || !sessionId || !credentials) {
+		if (!enabled || access === null) {
 			connectionRef.current = null;
 			setPhase("idle");
+			setRole("viewer");
 			setTargets([]);
 			setActiveTargetId(null);
 			setMediaStream(null);
@@ -234,17 +248,17 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 			setParticipants([]);
 			setCursors(/* @__PURE__ */ new Map());
 			setRecordings([]);
+			setViewportOwnership(null);
 			publishFrame(null);
 			publishPaint({ type: "clear" });
 			return;
 		}
+		setRole("viewer");
 		return Effect.gen(function* () {
 			const connection = yield* LiveSessionConnection.make({
-				baseUrl,
-				sessionId,
-				credentials,
-				sessionToken,
+				access,
 				identity,
+				autoSize,
 				iceServers,
 				webrtcSupported,
 				callbacks: {
@@ -269,16 +283,14 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 			publishPaint({ type: "clear" });
 		})));
 	}, [
-		baseUrl,
-		credentials,
+		autoSize,
+		access,
 		enabled,
 		handleMessage,
 		iceServers,
 		identity,
 		publishFrame,
 		publishPaint,
-		sessionId,
-		sessionToken,
 		webrtcSupported
 	]);
 	const sendReliable = useCallback((message) => connectionRef.current?.sendReliable(message) ?? false, []);
@@ -525,6 +537,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 		presentation,
 		mediaSwitching: targetSwitching || presentationSwitching,
 		recordings,
+		viewportOwnership,
 		sendBrowserInput,
 		selectTarget,
 		requestSelectTarget,
@@ -560,13 +573,13 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 	};
 }
 const StoredIdentity = Schema.Struct({
-	name: Schema.String.check(Schema.isLengthBetween(1, 48)),
+	name: Schema.String.check(Schema.isMinLength(1), Schema.isMaxLength(48)),
 	avatarHash: Schema.String.check(Schema.isPattern(/^[0-9a-f]{32}$/))
 });
 const decodeStoredIdentity = Schema.decodeUnknownOption(Schema.fromJsonString(StoredIdentity), strictParseOptions);
-function collaborationIdentity(role, accountName) {
+function collaborationIdentity(accountName) {
 	const anonymous = loadAnonymousIdentity();
-	if (role !== "owner" || !accountName?.trim()) return anonymous;
+	if (!accountName?.trim()) return anonymous;
 	return {
 		...anonymous,
 		name: Array.from(accountName.trim()).slice(0, 48).join("")
@@ -1749,7 +1762,8 @@ function focusedElement(node) {
 //#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 AUTO_SIZE_DEFAULT_STORAGE_KEY = "aperture.viewport.auto-size-default";
+function useBrowserControl({ access, displayName, enabled = true, webrtcProducerSupported = false, webrtcIceServers = emptyIceServers$1, onNotice }) {
 	const runtime = useRuntime();
 	const onNoticeRef = useRef(onNotice);
 	onNoticeRef.current = onNotice;
@@ -1757,16 +1771,20 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		level,
 		message
 	}));
+	const [viewportAutoSizeDefault, setViewportAutoSizeDefaultState] = useState(loadAutoSizeDefault);
+	const [viewportAutoSync, setViewportAutoSyncState] = useState(() => viewportAutoSizeDefault);
+	const viewportAutoSyncRef = useRef(viewportAutoSync);
+	viewportAutoSyncRef.current = viewportAutoSync;
+	const autoSizePreference = useCallback(() => viewportAutoSyncRef.current, []);
 	const live = useLiveSession({
-		sessionId,
+		access,
 		displayName,
-		credentials,
-		sessionToken,
-		role: collaborationRole,
-		enabled: Boolean(enabled && sessionId && credentials),
+		enabled: enabled && access !== null,
 		webrtcSupported: webrtcProducerSupported,
-		iceServers: webrtcIceServers
+		iceServers: webrtcIceServers,
+		autoSize: autoSizePreference
 	});
+	const collaborationRole = live.collaboration.role;
 	const [targetOrder, setTargetOrder] = useState([]);
 	const targets = useMemo(() => mergeTargetsInCurrentOrder(targetOrder, live.targets), [live.targets, targetOrder]);
 	const liveTargetsRef = useRef(live.targets);
@@ -1775,18 +1793,17 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	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 canRecord = collaborationRole === "owner" || collaborationRole === "editor";
+	const loadTargetThumbnail = useMemo(() => access === null ? null : (targetId) => getTargetThumbnail(access, targetId), [access]);
 	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]);
@@ -1797,13 +1814,12 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		setViewportState(createBrowserViewport(live.mediaSize, live.mediaSize.deviceScaleFactor));
 	}, [live.mediaSize]);
 	const sendInput = useCallback((message) => {
-		if (!enabled || !sessionId || !credentials) return false;
+		if (!enabled || access === null) return false;
 		return live.sendBrowserInput(message, inputDimensionsRef.current);
 	}, [
-		credentials,
+		access,
 		enabled,
-		live,
-		sessionId
+		live
 	]);
 	const activateTarget = useCallback((targetId) => {
 		live.selectTarget(targetId);
@@ -1859,21 +1875,54 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		const targetId = activeTargetIdRef.current;
 		if (targetId) live.command("page.history-forward", { targetId });
 	}, [live]);
-	const commitViewport = useCallback((preset) => {
+	const viewportOwnership = live.viewportOwnership;
+	const viewportOwnershipRef = useRef(viewportOwnership);
+	viewportOwnershipRef.current = viewportOwnership;
+	const viewportAutoSizeActive = viewportAutoSync && (viewportOwnership === null || viewportOwnership.ownerClientId === live.collaboration.clientId);
+	const viewportAutoSizeActiveRef = useRef(viewportAutoSizeActive);
+	viewportAutoSizeActiveRef.current = viewportAutoSizeActive;
+	useEffect(() => {
+		if (viewportOwnership !== null) {
+			viewportAutoSyncRef.current = viewportOwnership.autoSize;
+			setViewportAutoSyncState(viewportOwnership.autoSize);
+		}
+	}, [viewportOwnership]);
+	const runAutoSizeViewport = useEffectCallback((payload) => live.request("viewport.set", payload).pipe(Effect.ignore), [live.request]);
+	const commitViewport = useCallback((preset, autoSize) => {
 		setViewportState(preset);
 		const targetId = activeTargetIdRef.current;
-		if (targetId) live.command("viewport.set", {
+		if (targetId === null) return;
+		const payload = {
 			targetId,
 			width: preset.width,
 			height: preset.height,
 			deviceScaleFactor: preset.deviceScaleFactor
+		};
+		if (autoSize && viewportOwnershipRef.current !== null) runAutoSizeViewport({
+			...payload,
+			autoSize: true
 		});
-	}, [live]);
+		else live.command("viewport.set", payload);
+	}, [live.command, runAutoSizeViewport]);
+	const setViewportAutoSync = useCallback((nextEnabled) => {
+		if (viewportAutoSyncRef.current === nextEnabled) return;
+		viewportAutoSyncRef.current = nextEnabled;
+		setViewportAutoSyncState(nextEnabled);
+		if (viewportOwnershipRef.current !== null) live.command("viewport.auto-size.set", { enabled: nextEnabled });
+	}, [live.command]);
+	useEffect(() => {
+		const size = browserViewportSizeRef.current;
+		if (viewportAutoSizeActive && live.phase === "connected" && live.activeTargetId !== null && size !== null) commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor), true);
+	}, [
+		commitViewport,
+		live.activeTargetId,
+		live.phase,
+		viewportAutoSizeActive
+	]);
 	const setViewport = useCallback((preset) => {
-		viewportAutoSyncRef.current = false;
-		setViewportAutoSyncState(false);
-		commitViewport(preset);
-	}, [commitViewport]);
+		setViewportAutoSync(false);
+		commitViewport(preset, false);
+	}, [commitViewport, setViewportAutoSync]);
 	const setBrowserViewportSize = useCallback((size) => {
 		const next = {
 			width: Math.round(size.width),
@@ -1884,21 +1933,25 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		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));
+		if (viewportAutoSizeActiveRef.current) commitViewport(createBrowserViewport(next, viewportRef.current.deviceScaleFactor), true);
 	}, [commitViewport]);
 	const setViewportToBrowserSize = useCallback(() => {
 		const size = browserViewportSizeRef.current;
 		if (!size) return;
-		viewportAutoSyncRef.current = false;
-		setViewportAutoSyncState(false);
-		commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor));
-	}, [commitViewport]);
+		setViewportAutoSync(false);
+		commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor), false);
+	}, [commitViewport, setViewportAutoSync]);
+	const takeOverViewport = useCallback(() => {
+		viewportAutoSyncRef.current = true;
+		setViewportAutoSyncState(true);
+		live.command("viewport.owner.claim");
+	}, [live.command]);
+	const setViewportAutoSizeDefault = useCallback((nextEnabled) => {
+		setViewportAutoSizeDefaultState(nextEnabled);
+		try {
+			window.localStorage.setItem(AUTO_SIZE_DEFAULT_STORAGE_KEY, String(nextEnabled));
+		} catch {}
+	}, []);
 	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,
@@ -1906,27 +1959,26 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	}), "Recording failed to start"), [live]);
 	const startRecording = useCallback((mode) => {
 		const targetId = activeTargetIdRef.current;
-		if (!targetId || collaborationRole !== "owner" || recordingBusy) return;
+		if (!targetId || !canRecord || recordingBusy) return;
 		setRecordingBusy(true);
 		runStartRecording(mode, targetId);
 	}, [
-		collaborationRole,
+		canRecord,
 		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 runStopRecording = useEffectCallback((access, recordingId) => settleRecording(live.request("recording.stop", { recordingId }).pipe(Effect.andThen(downloadSessionRecording(access, recordingId)), 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]);
+		return downloadBlob(blob, filename ?? `${access.sessionId}-${recording?.targetId ?? "target"}-${recordingId}.webm`);
+	}), Effect.andThen(notify("success", "Recording saved"))), "Recording failed to stop"), [live]);
 	const stopRecording = useCallback((recordingId) => {
-		if (!sessionId || !credentials || recordingBusy) return;
+		if (access === null || recordingBusy) return;
 		setRecordingBusy(true);
-		runStopRecording(credentials, sessionId, recordingId);
+		runStopRecording(access, recordingId);
 	}, [
-		credentials,
+		access,
 		recordingBusy,
-		runStopRecording,
-		sessionId
+		runStopRecording
 	]);
 	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) => {
@@ -1936,23 +1988,28 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	}, [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);
+		if (access !== null) runSetRemoteCursor(visible);
+	}, [access, runSetRemoteCursor]);
+	const [watchableAutomation, setWatchableAutomation] = useState(false);
+	const commandRef = useRef(live.command);
+	commandRef.current = live.command;
+	useEffect(() => {
+		if (live.phase === "connected" && canRecord) commandRef.current("automation.pacing.set", { pacing: watchableAutomation ? "watchable" : "normal" });
 	}, [
-		credentials,
-		runSetRemoteCursor,
-		sessionId
+		live.phase,
+		canRecord,
+		watchableAutomation
 	]);
 	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;
+		if (!enabled || access === null || live.mediaSwitching) return false;
 		runSelectPresentation(selection);
 		return true;
 	}, [
-		credentials,
+		access,
 		enabled,
 		live.mediaSwitching,
-		runSelectPresentation,
-		sessionId
+		runSelectPresentation
 	]);
 	const setWebRTCStreamSettings = useCallback((settings) => selectMediaStream({
 		kind: "webrtc",
@@ -1999,10 +2056,16 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		viewport,
 		browserViewportSize,
 		viewportAutoSync,
+		viewportAutoSizeActive,
+		viewportOwnership,
+		viewportAutoSizeDefault,
 		captured,
 		recordings: live.recordings,
+		canRecord,
+		loadTargetThumbnail,
 		recordingBusy,
 		remoteCursorEnabled: live.presentation?.cursorVisible ?? true,
+		watchableAutomation,
 		collaboration: live.collaboration,
 		commands,
 		setCaptured,
@@ -2013,6 +2076,8 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		setBrowserViewportSize,
 		setViewportAutoSync,
 		setViewportToBrowserSize,
+		setViewportAutoSizeDefault,
+		takeOverViewport,
 		setWebRTCStreamSettings,
 		selectMediaStream,
 		sendInput,
@@ -2030,6 +2095,7 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		stopRecording,
 		cancelRecording,
 		setRemoteCursorEnabled,
+		setWatchableAutomation,
 		reconnect: live.reconnect
 	};
 }
@@ -2047,6 +2113,13 @@ function mergeTargetsInCurrentOrder(order, nextTargets) {
 	for (const nextTarget of nextTargets) if (!seen.has(nextTarget.id)) ordered.push(nextTarget);
 	return ordered;
 }
+function loadAutoSizeDefault() {
+	try {
+		return window.localStorage.getItem(AUTO_SIZE_DEFAULT_STORAGE_KEY) === "true";
+	} catch {
+		return false;
+	}
+}
 function createBrowserViewport(size, deviceScaleFactor) {
 	return createViewportPreset(size.width, size.height, deviceScaleFactor);
 }
@@ -2061,7 +2134,7 @@ function errorMessage(cause, 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)));
+const makeApertureRuntime = (options = {}) => ManagedRuntime.make(Layer.mergeAll(FetchHttpClient.layer, 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 }) {
@@ -2081,55 +2154,75 @@ function ApertureProvider({ baseUrl, children }) {
 	}) : null;
 }
 //#endregion
-//#region src/shared-session.ts
-function parseShareToken(token) {
+//#region src/session.ts
+/** Convert an editor/viewer share link into direct session access. */
+function shareSessionAccess(token, baseUrl) {
 	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;
+	if (!(token.startsWith("ape_") || token.startsWith("apv_")) || token[40] !== "_" || token.length <= 41) return null;
 	return {
-		token,
+		kind: "direct",
+		baseUrl,
 		sessionId,
-		role
+		credentials: {
+			kind: "bearer",
+			token: Redacted.make(token),
+			authorityType: null,
+			tenantId: null,
+			selectedTenantId: null
+		}
 	};
 }
 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;
+function failedStatus(httpStatus) {
+	if (httpStatus === 401 || httpStatus === 403) return "denied";
+	if (httpStatus === 410) return "expired";
+	return "unavailable";
+}
+function useSession({ access, displayName, onNotice }) {
+	const [state, setState] = useState({
+		access: null,
+		status: "loading",
+		browser: null
+	});
+	useFork(() => {
+		if (access === null) return;
+		setState({
+			access,
+			status: "loading",
+			browser: null
+		});
+		return getSessionStatus(access).pipe(Effect.match({
+			onFailure: (error) => setState({
+				access,
+				status: failedStatus(error.status),
+				browser: null
+			}),
+			onSuccess: (browser) => setState(access.kind === "direct" && browser.sessionId !== access.sessionId ? {
+				access,
+				status: "unavailable",
+				browser: null
+			} : {
+				access,
+				status: "ready",
+				browser
+			})
+		}));
+	}, [access]);
+	const browser = state.access === access ? state.browser : null;
 	const control = useBrowserControl({
-		sessionId: share?.sessionId ?? null,
-		credentials: browser ? credentials : null,
+		access: browser === null ? null : access,
 		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,
+		status: access === null ? "invalid" : state.access !== access ? "loading" : state.status,
 		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 };
+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, shareSessionAccess as n, useBrowserControl as o, useEffectCallback as p, useSession as r, SessionViewport as s, LiveSessionError$1 as t, RuntimeProvider as u };
 
-//# sourceMappingURL=headless-CKFacFX3.js.map
+//# sourceMappingURL=headless-CPoXwbFz.js.map