camox 0.44.0 → 0.45.0

package/dist/lib/api-client.js

@@ -1,4 +1,6 @@
 import { getAuthCookieHeader, getAuthRequestCredentials } from "./auth.js";
+import { localeHeaders } from "./locale-path.js";
+import { DRAFT_HEADER, isContentWrite } from "@camox/api-contract/drafts";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 import { createTanstackQueryUtils } from "@orpc/tanstack-query";
@@ -7,29 +9,57 @@ import { createTanstackQueryUtils } from "@orpc/tanstack-query";
 let _client = null;
 let _orpc = null;
 let _apiUrl = null;
-let _environmentName = null;
-function initApiClient(apiUrl, environmentName) {
+let _draftScope = null;
+const _readClients = /* @__PURE__ */ new Map();
+/** Creates the window's API client, whose requests read and write the draft `draftScope` views. */
+function initApiClient(apiUrl, draftScope) {
 	_apiUrl = apiUrl;
-	_environmentName = environmentName ?? null;
+	_draftScope = draftScope;
+	_readClients.clear();
+	_client = createStudioClient(apiUrl, (path) => draftScope.requestHeaders(isContentWrite(path)));
+	_orpc = createTanstackQueryUtils(_client);
+	return _client;
+}
+/**
+* A client of the window's API whose requests name `draft` (null for Live) and `locale` (the
+* default locale without it), whatever the studio views by the time they're sent. The studio's
+* reads fetch through it, so a read caches only the draft and locale its key names.
+*/
+function getDraftReadClient(draft, locale) {
+	const headers = {
+		...draft && { [DRAFT_HEADER]: draft },
+		...localeHeaders(locale)
+	};
+	const cacheKey = JSON.stringify(headers);
+	let client = _readClients.get(cacheKey);
+	if (client) return client;
+	client = createStudioClient(getApiUrl(), () => ({
+		headers,
+		settle: () => {}
+	}));
+	_readClients.set(cacheKey, client);
+	return client;
+}
+function createStudioClient(apiUrl, draftHeaders) {
 	const headers = { "x-camox-client": "studio" };
-	if (environmentName) headers["x-environment-name"] = environmentName;
 	if (__CAMOX_TELEMETRY_DISABLED__) headers["x-camox-telemetry-disabled"] = "1";
-	_client = createORPCClient(new RPCLink({
+	const link = new RPCLink({
 		url: `${apiUrl}/rpc`,
 		headers,
-		fetch: (request, init) => {
+		fetch: async (request, init, _options, path) => {
 			const authCookieHeader = getAuthCookieHeader();
-			if (request instanceof Request) {
-				if (authCookieHeader) request.headers.set("Better-Auth-Cookie", authCookieHeader);
-			}
-			return fetch(request, {
+			if (authCookieHeader) request.headers.set("Better-Auth-Cookie", authCookieHeader);
+			const draft = draftHeaders(path);
+			for (const [name, value] of Object.entries(draft.headers)) request.headers.set(name, value);
+			const response = await fetch(request, {
 				...init,
 				credentials: getAuthRequestCredentials(authCookieHeader)
 			});
+			draft.settle(response.ok);
+			return response;
 		}
-	}));
-	_orpc = createTanstackQueryUtils(_client);
-	return _client;
+	});
+	return createORPCClient(link);
 }
 function getApiClient() {
 	if (!_client) throw new Error("API client not initialized — call initApiClient first");
@@ -43,9 +73,14 @@ function getApiUrl() {
 	if (!_apiUrl) throw new Error("API client not initialized — call initApiClient first");
 	return _apiUrl;
 }
-function getEnvironmentName() {
-	return _environmentName;
+/**
+* Headers for a content write sent outside oRPC, such as a file upload: on Live it starts a draft
+* like any other content write. Report the outcome through `settle`.
+*/
+function getContentWriteHeaders() {
+	if (!_draftScope) throw new Error("API client not initialized — call initApiClient first");
+	return _draftScope.requestHeaders(true);
 }
 
 //#endregion
-export { getApiClient, getApiUrl, getEnvironmentName, getOrpc, initApiClient };
+export { getApiClient, getApiUrl, getContentWriteHeaders, getDraftReadClient, getOrpc, initApiClient };

package/dist/lib/api-socket.js

@@ -0,0 +1,17 @@
+import { getAuthCookieHeader } from "./auth.js";
+
+//#region src/lib/api-socket.ts
+/**
+* PartySocket options reaching the API at `apiUrl` as the signed-in editor. WebSocket upgrades
+* can't carry custom headers, so the session is relayed in the query.
+*/
+function apiSocketOptions(apiUrl) {
+	return {
+		host: apiUrl.replace(/^https?:\/\//, "").replace(/\/+$/, ""),
+		protocol: new URL(apiUrl).protocol === "http:" ? "ws" : "wss",
+		query: () => ({ _authCookie: getAuthCookieHeader() })
+	};
+}
+
+//#endregion
+export { apiSocketOptions };

package/dist/lib/auth-page-styles.js

@@ -0,0 +1,39 @@
+//#region src/lib/auth-page-styles.ts
+const authPageStyles = `
+  .camox-auth-page {
+    align-items: center;
+    background: #09090b;
+    box-sizing: border-box;
+    color: #fafafa;
+    color-scheme: dark;
+    display: flex;
+    flex-direction: column;
+    font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
+    gap: 16px;
+    inset: 0;
+    justify-content: center;
+    margin: 0;
+    overflow: auto;
+    padding: 24px;
+    position: fixed;
+    text-align: center;
+  }
+  .camox-auth-page .camox-auth-spinner {
+    animation: camox-auth-spin 800ms linear infinite;
+    border: 2px solid #3f3f46;
+    border-radius: 999px;
+    border-top-color: #fafafa;
+    box-sizing: content-box;
+    flex-shrink: 0;
+    height: 24px;
+    width: 24px;
+  }
+  .camox-auth-page p { color: #a1a1aa; margin: 0; max-width: 32rem; }
+  @keyframes camox-auth-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .camox-auth-page .camox-auth-spinner { animation: none; }
+  }
+`;
+
+//#endregion
+export { authPageStyles };

package/dist/lib/auth.js

@@ -183,8 +183,10 @@ function createCamoxAuthClient(apiUrl) {
 * Verifies the token against the API backend and notifies the session store.
 *
 * Reports completion and explicit handoff failures instead of silently showing live content.
+* Keeps the handoff marker until SSR confirms authentication on the subsequent load.
 */
-function useProcessOtt(authClient, target) {
+function useProcessOtt(authClient, target, initialAuthenticated = false) {
+	const { projectUuid, apiUrl } = target;
 	const [error, setError] = React.useState(null);
 	const processing = React.useRef(false);
 	const [ready, setReady] = React.useState(() => {
@@ -193,15 +195,25 @@ function useProcessOtt(authClient, target) {
 	});
 	React.useEffect(() => {
 		const url = new URL(window.location.href);
-		const targetError = validatePreviewTarget(url.searchParams.get("camox-preview"), target);
+		const targetError = validatePreviewTarget(url.searchParams.get("camox-preview"), {
+			projectUuid,
+			apiUrl
+		});
 		if (targetError) {
 			url.searchParams.delete("ott");
-			window.history.replaceState({}, "", url);
+			window.history.replaceState(window.history.state, "", url);
 			setError(targetError);
 			setReady(true);
 			return;
 		}
-		if (ready || processing.current) return;
+		if (ready) {
+			if (initialAuthenticated && !error && url.searchParams.has("camox-preview")) {
+				url.searchParams.delete("camox-preview");
+				window.history.replaceState(window.history.state, "", url);
+			}
+			return;
+		}
+		if (processing.current) return;
 		const ott = url.searchParams.get("ott");
 		if (!ott) {
 			setReady(true);
@@ -209,7 +221,7 @@ function useProcessOtt(authClient, target) {
 		}
 		processing.current = true;
 		url.searchParams.delete("ott");
-		window.history.replaceState({}, "", url);
+		window.history.replaceState(window.history.state, "", url);
 		(async () => {
 			try {
 				const verification = await authClient.oneTimeToken.verify({ token: ott });
@@ -225,9 +237,10 @@ function useProcessOtt(authClient, target) {
 	}, [
 		authClient,
 		ready,
-		target.projectSlug,
-		target.environmentName,
-		target.apiUrl
+		error,
+		initialAuthenticated,
+		projectUuid,
+		apiUrl
 	]);
 	return {
 		ready,
@@ -236,76 +249,119 @@ function useProcessOtt(authClient, target) {
 }
 const AuthContext = React.createContext(null);
 function useAuthContext() {
-	const $ = c(1);
-	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
-	}
 	const ctx = React.useContext(AuthContext);
 	if (!ctx) throw new Error("Missing CamoxProvider");
 	return ctx;
 }
-function useProjectSlug() {
-	const $ = c(1);
-	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
-	}
-	return useAuthContext().projectSlug;
+function useProjectUuid() {
+	return useAuthContext().projectUuid;
 }
 const subscribeToHydration = () => () => {};
+function hasStoredAuthCookie() {
+	return getCookie(localStorage.getItem("better-auth_cookie") || "{}") !== "";
+}
+const noSubscription = () => () => {};
+/**
+* The session, from the client's session store. Listening to the store fetches the session from
+* the API, so an untracked session stays unfetched.
+*/
+function useSessionState(authClient, track) {
+	const $ = c(4);
+	const sessionAtom = authClient.$store.atoms.session;
+	let t0;
+	if ($[0] !== sessionAtom) {
+		t0 = () => sessionAtom.value;
+		$[0] = sessionAtom;
+		$[1] = t0;
+	} else t0 = $[1];
+	const getSnapshot = t0;
+	let t1;
+	if ($[2] !== sessionAtom) {
+		t1 = (onChange) => sessionAtom.listen(onChange);
+		$[2] = sessionAtom;
+		$[3] = t1;
+	} else t1 = $[3];
+	const subscribe = t1;
+	return React.useSyncExternalStore(track ? subscribe : noSubscription, getSnapshot, getSnapshot);
+}
 function useAuthState() {
-	const { authClient, initialAuthenticated = false } = useAuthContext();
-	const { data: session, isPending } = authClient.useSession();
-	const useInitial = !React.useSyncExternalStore(subscribeToHydration, () => true, () => false) || isPending;
-	return {
-		isAuthenticated: useInitial ? initialAuthenticated : !!session,
-		isLoading: useInitial && !initialAuthenticated
-	};
+	const $ = c(8);
+	const { authClient, initialAuthenticated: t0 } = useAuthContext();
+	const initialAuthenticated = t0 === void 0 ? false : t0;
+	const hydrated = React.useSyncExternalStore(subscribeToHydration, _temp2, _temp3);
+	let t1;
+	if ($[0] !== hydrated || $[1] !== initialAuthenticated) {
+		t1 = initialAuthenticated || hydrated && hasStoredAuthCookie();
+		$[0] = hydrated;
+		$[1] = initialAuthenticated;
+		$[2] = t1;
+	} else t1 = $[2];
+	const tracksSession = t1;
+	const { data: session, isPending } = useSessionState(authClient, tracksSession);
+	if (!tracksSession) {
+		const t2 = !hydrated;
+		let t3;
+		if ($[3] !== t2) {
+			t3 = {
+				isAuthenticated: false,
+				isLoading: t2
+			};
+			$[3] = t2;
+			$[4] = t3;
+		} else t3 = $[4];
+		return t3;
+	}
+	const useInitial = !hydrated || isPending;
+	const t2 = useInitial ? initialAuthenticated : !!session;
+	const t3 = useInitial && !initialAuthenticated;
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = {
+			isAuthenticated: t2,
+			isLoading: t3
+		};
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
+function _temp3() {
+	return false;
+}
+function _temp2() {
+	return true;
 }
 function useIsAuthenticated() {
-	const $ = c(1);
-	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
-	}
 	const { isAuthenticated } = useAuthState();
 	return isAuthenticated;
 }
 function useSignInRedirect(callbackHref) {
-	const $ = c(4);
-	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
-		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
-	}
+	const $ = c(3);
 	const { authenticationUrl } = useAuthContext();
 	let t0;
-	if ($[1] !== authenticationUrl || $[2] !== callbackHref) {
+	if ($[0] !== authenticationUrl || $[1] !== callbackHref) {
 		t0 = () => {
 			if (typeof window === "undefined") return;
 			const href = typeof callbackHref === "function" ? callbackHref() : callbackHref;
 			const callback = encodeURIComponent(href ?? window.location.href);
 			window.location.href = `${authenticationUrl}/studio-authorize?callback=${callback}`;
 		};
-		$[1] = authenticationUrl;
-		$[2] = callbackHref;
-		$[3] = t0;
-	} else t0 = $[3];
+		$[0] = authenticationUrl;
+		$[1] = callbackHref;
+		$[2] = t0;
+	} else t0 = $[2];
 	return t0;
 }
 /**
 * Registers sign-out and manage-account actions in the command palette.
 */
 function useAuthActions() {
-	const $ = c(5);
-	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
-	}
+	const $ = c(4);
 	const { authClient, authenticationUrl } = useAuthContext();
 	let t0;
 	let t1;
-	if ($[1] !== authClient || $[2] !== authenticationUrl) {
+	if ($[0] !== authClient || $[1] !== authenticationUrl) {
 		t0 = () => {
 			actionsStore.send({
 				type: "registerManyActions",
@@ -318,7 +374,7 @@ function useAuthActions() {
 						"User settings"
 					],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp,
+					checkIfAvailable: _temp4,
 					execute: () => {
 						window.open(`${authenticationUrl}/profile`, "_blank");
 					}
@@ -327,35 +383,35 @@ function useAuthActions() {
 					label: "Log out",
 					aliases: ["Sign out", "Logout"],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp2,
+					checkIfAvailable: _temp5,
 					execute: () => authClient.signOut()
 				}]
 			});
-			return _temp3;
+			return _temp6;
 		};
 		t1 = [authClient, authenticationUrl];
-		$[1] = authClient;
-		$[2] = authenticationUrl;
-		$[3] = t0;
-		$[4] = t1;
+		$[0] = authClient;
+		$[1] = authenticationUrl;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[3];
-		t1 = $[4];
+		t0 = $[2];
+		t1 = $[3];
 	}
 	React.useEffect(t0, t1);
 }
-function _temp3() {
+function _temp6() {
 	actionsStore.send({
 		type: "unregisterManyActions",
 		ids: ["manage-account", "log-out"]
 	});
 }
-function _temp2() {
+function _temp5() {
 	return true;
 }
-function _temp() {
+function _temp4() {
 	return true;
 }
 
 //#endregion
-export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, getAuthRequestCredentials, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectSlug, useSignInRedirect };
+export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, getAuthRequestCredentials, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectUuid, useSignInRedirect };

package/dist/lib/collection-cache.js

@@ -0,0 +1,23 @@
+import { queryKeys } from "@camox/api-contract/query-keys";
+
+//#region src/lib/collection-cache.ts
+/**
+* Refreshes a collection's records in every placement, in every scope, as the API's broadcast
+* after a record edit does, so the edit shows even without a realtime connection.
+*/
+function invalidateCollectionRecordViews(studioCache, projectUuid, collectionId) {
+	return studioCache.receive({
+		type: "invalidate",
+		draftId: null,
+		targets: [
+			queryKeys.collections.records(projectUuid, collectionId),
+			["camox", "blocks"],
+			queryKeys.pages.getByPathAll,
+			queryKeys.pages.list,
+			queryKeys.layouts.all
+		]
+	}, 0);
+}
+
+//#endregion
+export { invalidateCollectionRecordViews };

package/dist/lib/draft-scope.d.ts

@@ -0,0 +1,4 @@
+import "../features/routes/pageRuntime.js";
+import "react";
+import { EndedDraft } from "@camox/api-contract/drafts";
+import { QueryClient } from "@tanstack/react-query";

package/dist/lib/draft-scope.js

@@ -0,0 +1,222 @@
+import { UNNAMED_DEFAULT_LOCALE, localeHeaders } from "./locale-path.js";
+import { getApiClient } from "./api-client.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { generateUuidv7 } from "@camox/api-contract/ids";
+import { DEVELOPMENT_DRAFT, DRAFT_CREATE_HEADER, DRAFT_HEADER, DRAFT_SEARCH_PARAM } from "@camox/api-contract/drafts";
+import { LIVE_KEY_SCOPE, scopeOfKey } from "@camox/api-contract/query-keys";
+
+//#region src/lib/draft-scope.ts
+/** The draft a URL names, if any. */
+function draftNamedBy(href) {
+	return new URL(href, "http://camox.local").searchParams.get(DRAFT_SEARCH_PARAM) || null;
+}
+/** The URL without the draft param. */
+function withoutDraft(href) {
+	const url = new URL(href);
+	url.searchParams.delete(DRAFT_SEARCH_PARAM);
+	return url.href;
+}
+function buildIsDevelopmentMode() {
+	return typeof __CAMOX_DEVELOPMENT_DRAFT__ !== "undefined" && __CAMOX_DEVELOPMENT_DRAFT__;
+}
+function createDraftScope({ queryClient, browser, developmentMode = buildIsDevelopmentMode(), loadDevelopmentDraftId = async (projectId) => (await getApiClient().drafts.get({ projectId }))?.id }) {
+	let current = developmentMode ? DEVELOPMENT_DRAFT : null;
+	let locale = UNNAMED_DEFAULT_LOCALE;
+	let pending = null;
+	let developmentDraftId;
+	let adoptedRender = false;
+	const listeners = /* @__PURE__ */ new Set();
+	const noticeListeners = /* @__PURE__ */ new Set();
+	const pendingNotices = [];
+	const draftOfRender = (rendered) => {
+		if (!developmentMode) return rendered.draftId ?? null;
+		return rendered.refusedDraft ? null : DEVELOPMENT_DRAFT;
+	};
+	const notify = (move) => {
+		for (const listener of listeners) listener({
+			draftId: current,
+			move
+		});
+	};
+	const report = (notice) => {
+		if (noticeListeners.size === 0) return void pendingNotices.push(notice);
+		for (const listener of noticeListeners) listener(notice);
+	};
+	const replaceUrl = (draftId) => {
+		if (!browser) return;
+		const url = new URL(browser.location.href);
+		if (draftId === url.searchParams.get(DRAFT_SEARCH_PARAM)) return;
+		if (draftId) url.searchParams.set(DRAFT_SEARCH_PARAM, draftId);
+		else url.searchParams.delete(DRAFT_SEARCH_PARAM);
+		browser.history.replaceState(browser.history.state, "", url.pathname + url.search + url.hash);
+	};
+	const enterStartedDraft = (draftId) => {
+		pending = null;
+		current = draftId;
+		replaceUrl(draftId);
+		for (const query of queryClient.getQueryCache().findAll({ queryKey: ["camox"] })) {
+			if (scopeOfKey(query.queryKey) !== LIVE_KEY_SCOPE || query.state.data === void 0) continue;
+			queryClient.setQueryData([...query.queryKey.slice(0, -1), draftId], query.state.data);
+		}
+		queryClient.invalidateQueries({
+			queryKey: ["camox"],
+			predicate: (query) => scopeOfKey(query.queryKey) !== LIVE_KEY_SCOPE
+		});
+		notify("started");
+	};
+	const headersFor = (contentWrite) => {
+		const noop = () => {};
+		const inLocale = localeHeaders(locale);
+		if (current) return {
+			headers: {
+				[DRAFT_HEADER]: current,
+				...inLocale
+			},
+			settle: noop
+		};
+		if (!contentWrite || developmentMode) return {
+			headers: inLocale,
+			settle: noop
+		};
+		pending ??= {
+			id: generateUuidv7(),
+			inFlight: 0
+		};
+		const started = pending;
+		started.inFlight += 1;
+		return {
+			headers: {
+				[DRAFT_HEADER]: started.id,
+				[DRAFT_CREATE_HEADER]: "1",
+				...inLocale
+			},
+			settle: (ok) => {
+				if (pending !== started) return;
+				started.inFlight -= 1;
+				if (ok) return enterStartedDraft(started.id);
+				if (started.inFlight === 0) pending = null;
+			}
+		};
+	};
+	return {
+		current: () => current,
+		locale: () => locale,
+		developmentMode,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		requestHeaders: headersFor,
+		enterStarted(draftId) {
+			if (current !== null) return false;
+			enterStartedDraft(draftId);
+			return true;
+		},
+		hrefFor(to, { from, draft } = {}) {
+			if (developmentMode) return to;
+			const base = new URL(from ?? browser?.location.href ?? "http://camox.local");
+			const target = new URL(to, base);
+			if (target.origin !== base.origin) return to;
+			if (draft === void 0 && target.searchParams.has(DRAFT_SEARCH_PARAM)) return to;
+			const next = draft === void 0 ? current : draft;
+			if (next) target.searchParams.set(DRAFT_SEARCH_PARAM, next);
+			else target.searchParams.delete(DRAFT_SEARCH_PARAM);
+			if (target.href === new URL(to, base).href) return to;
+			return /^[a-z][a-z\d+.-]*:/i.test(to) || to.startsWith("//") ? target.href : `${target.pathname}${target.search}${target.hash}`;
+		},
+		adopt(rendered) {
+			if (rendered.locale) locale = rendered.locale;
+			if (rendered.refusedDraft) {
+				replaceUrl(null);
+				if (rendered.refusedDraft.notice) report(rendered.refusedDraft.notice);
+			}
+			const next = draftOfRender(rendered);
+			if (next !== null) pending = null;
+			const firstRender = !adoptedRender;
+			adoptedRender = true;
+			if (next === current) return;
+			current = next;
+			if (!firstRender) {
+				const entered = next ?? LIVE_KEY_SCOPE;
+				queryClient.invalidateQueries({
+					queryKey: ["camox"],
+					predicate: (query) => scopeOfKey(query.queryKey) === entered,
+					refetchType: "none"
+				});
+			}
+			notify("adopted");
+		},
+		leave(ended, { notice = false } = {}) {
+			queryClient.invalidateQueries({ queryKey: ["camox"] });
+			if (developmentMode) return false;
+			pending = null;
+			current = null;
+			replaceUrl(null);
+			if (notice && ended) report({
+				reason: "ended",
+				...ended
+			});
+			notify("left");
+			return true;
+		},
+		onNotice(listener) {
+			noticeListeners.add(listener);
+			for (const notice of pendingNotices.splice(0)) listener(notice);
+			return () => noticeListeners.delete(listener);
+		},
+		async keyScopeOfDraft(draftId, projectId) {
+			if (current !== DEVELOPMENT_DRAFT) return draftId;
+			developmentDraftId ??= loadDevelopmentDraftId(projectId).catch(() => {
+				developmentDraftId = void 0;
+			});
+			return draftId === await developmentDraftId ? DEVELOPMENT_DRAFT : draftId;
+		}
+	};
+}
+const DraftScopeContext = React.createContext(null);
+/**
+* The draft scope the studio is in, for handlers and effects. Render code reads the draft it
+* views from `useCurrentDraftId`: the scope object never changes, so a memoized render reading
+* `current()` from it would keep showing the draft of its first render.
+*/
+function useDraftScope() {
+	const scope = React.useContext(DraftScopeContext);
+	if (!scope) throw new Error("useDraftScope must be used inside a DraftScopeContext provider");
+	return scope;
+}
+const noScope = () => null;
+const noSubscription = () => () => {};
+/** The draft the studio is in, or null for Live. The caller re-renders after every move. */
+function useCurrentDraftId() {
+	const scope = useDraftScope();
+	return React.useSyncExternalStore(scope.subscribe, scope.current, scope.current);
+}
+/** The draft scope and the draft it views, outside the studio too, where there is none. */
+function useOptionalDraftScope() {
+	const $ = c(3);
+	const scope = React.useContext(DraftScopeContext);
+	const current = scope?.current ?? noScope;
+	const draftId = React.useSyncExternalStore(scope?.subscribe ?? noSubscription, current, current);
+	let t0;
+	if ($[0] !== draftId || $[1] !== scope) {
+		t0 = {
+			scope,
+			draftId
+		};
+		$[0] = draftId;
+		$[1] = scope;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* Follows the draft a browser URL names, for a studio mounted in a host application, whose
+* navigation renders nothing the scope could adopt.
+*/
+function followUrl(scope, href) {
+	scope.adopt({ draftId: draftNamedBy(href) ?? void 0 });
+}
+
+//#endregion
+export { DraftScopeContext, createDraftScope, draftNamedBy, followUrl, useCurrentDraftId, useDraftScope, useOptionalDraftScope, withoutDraft };