camox 0.44.0 → 0.46.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,131 @@ 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(9);
+	const { authClient, initialAuthenticated: t0, exchangingToken: t1 } = useAuthContext();
+	const initialAuthenticated = t0 === void 0 ? false : t0;
+	const exchangingToken = t1 === void 0 ? false : t1;
+	const hydrated = React.useSyncExternalStore(subscribeToHydration, _temp2, _temp3);
+	let t2;
+	if ($[0] !== hydrated || $[1] !== initialAuthenticated) {
+		t2 = initialAuthenticated || hydrated && hasStoredAuthCookie();
+		$[0] = hydrated;
+		$[1] = initialAuthenticated;
+		$[2] = t2;
+	} else t2 = $[2];
+	const tracksSession = t2;
+	const { data: session, isPending } = useSessionState(authClient, tracksSession);
+	if (exchangingToken && !initialAuthenticated) {
+		let t3;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = {
+				isAuthenticated: false,
+				isLoading: true
+			};
+			$[3] = t3;
+		} else t3 = $[3];
+		return t3;
+	}
+	if (!tracksSession) {
+		const t3 = !hydrated;
+		let t4;
+		if ($[4] !== t3) {
+			t4 = {
+				isAuthenticated: false,
+				isLoading: t3
+			};
+			$[4] = t3;
+			$[5] = t4;
+		} else t4 = $[5];
+		return t4;
+	}
+	const useInitial = !hydrated || isPending;
+	const t3 = useInitial ? initialAuthenticated : !!session;
+	const t4 = useInitial && !initialAuthenticated;
+	let t5;
+	if ($[6] !== t3 || $[7] !== t4) {
+		t5 = {
+			isAuthenticated: t3,
+			isLoading: t4
+		};
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+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 +386,7 @@ function useAuthActions() {
 						"User settings"
 					],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp,
+					checkIfAvailable: _temp4,
 					execute: () => {
 						window.open(`${authenticationUrl}/profile`, "_blank");
 					}
@@ -327,35 +395,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";