camox 0.44.0 → 0.45.0

package/dist/features/preview/viewportContinuity.js

@@ -0,0 +1,109 @@
+import * as React from "react";
+
+//#region src/features/preview/viewportContinuity.ts
+const blockSelector = "[data-camox-viewport-block]";
+function captureViewportAnchor(doc, y) {
+	const scroll = doc.scrollingElement?.scrollTop ?? 0;
+	const block = Array.from(doc.querySelectorAll(blockSelector)).find((element) => {
+		const rect = element.getBoundingClientRect();
+		return rect.height > 0 && rect.top + scroll <= y && rect.bottom + scroll > y;
+	});
+	if (!block) return {
+		y,
+		offset: 0
+	};
+	return {
+		blockId: block.getAttribute("data-camox-viewport-block"),
+		offset: y - block.getBoundingClientRect().top - scroll,
+		y
+	};
+}
+function anchorBlock(doc, anchor) {
+	return Array.from(doc.querySelectorAll(blockSelector)).find((element) => element.getAttribute("data-camox-viewport-block") === anchor.blockId);
+}
+function resolveViewportAnchor(doc, anchor) {
+	const block = anchorBlock(doc, anchor);
+	if (!block) return anchor.y;
+	const rect = block.getBoundingClientRect();
+	return rect.top + (doc.scrollingElement?.scrollTop ?? 0) + Math.min(anchor.offset, rect.height);
+}
+function previewViewportY(doc, scroll) {
+	return (doc.scrollingElement?.scrollTop ?? 0) + (scroll === doc.scrollingElement ? 0 : Math.max(0, scroll.getBoundingClientRect().top));
+}
+function capturePreviewAnchor(doc, scroll) {
+	return {
+		...captureViewportAnchor(doc, previewViewportY(doc, scroll)),
+		y: scroll.scrollTop
+	};
+}
+function restorePreviewAnchor(doc, scroll, anchor) {
+	const top = anchorBlock(doc, anchor) ? scroll.scrollTop + resolveViewportAnchor(doc, anchor) - previewViewportY(doc, scroll) : anchor.y;
+	scroll.scrollTo({
+		top,
+		behavior: "instant"
+	});
+}
+/** Owned by one preview surface; deliberately not persisted across projects. */
+var ViewportContinuity = class {
+	history = /* @__PURE__ */ new Map();
+	preview = null;
+	canvas = null;
+	pendingPreview = null;
+	pendingCanvas = null;
+	checkpoint = null;
+	transition(enabled, pathname) {
+		if (enabled) {
+			const anchor = this.preview?.capture() ?? this.history.get(pathname);
+			if (anchor) this.history.set(pathname, anchor);
+			const exact = this.checkpoint?.pathname === pathname && !this.checkpoint.moved;
+			this.pendingCanvas = {
+				anchor: exact ? void 0 : anchor,
+				camera: this.checkpoint?.camera
+			};
+			return;
+		}
+		const view = this.canvas?.capture();
+		if (!view) return;
+		this.checkpoint = {
+			pathname,
+			camera: view.camera,
+			moved: false
+		};
+		this.pendingPreview = {
+			pathname,
+			anchor: (view.pathname === pathname ? view.anchor : void 0) ?? this.history.get(pathname) ?? {
+				y: 0,
+				offset: 0
+			}
+		};
+	}
+	previewMoved(pathname, anchor) {
+		this.history.set(pathname, anchor);
+		if (this.checkpoint) this.checkpoint.moved = true;
+	}
+	navigate(pathname) {
+		if (this.checkpoint) this.checkpoint.moved = true;
+		const anchor = this.history.get(pathname) ?? {
+			y: 0,
+			offset: 0
+		};
+		if (this.pendingCanvas) this.pendingCanvas = {
+			anchor,
+			camera: this.pendingCanvas.camera
+		};
+		if (this.pendingPreview) this.pendingPreview = {
+			pathname,
+			anchor
+		};
+	}
+	restoreCanvas() {
+		if (!this.canvas || !this.pendingCanvas) return;
+		const { anchor, camera } = this.pendingCanvas;
+		this.canvas.restore(anchor, camera);
+		this.pendingCanvas = null;
+	}
+};
+const ViewportContinuityContext = React.createContext(null);
+
+//#endregion
+export { ViewportContinuity, ViewportContinuityContext, capturePreviewAnchor, captureViewportAnchor, resolveViewportAnchor, restorePreviewAnchor };

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -1,25 +1,22 @@
 import { AuthContext, useAuthActions } from "../../lib/auth.js";
-import { projectQueries } from "../../lib/queries.js";
+import { useDraftScope } from "../../lib/draft-scope.js";
+import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
 import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
-import { useNavbarActions } from "../studio/components/Navbar.js";
-import { usePreviewPagesActions } from "../preview/CamoxPreview.js";
+import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
 import { useProjectRoom } from "../../lib/use-project-room.js";
+import { useNavbarActions } from "../studio/components/Navbar.js";
+import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
 import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { c } from "react/compiler-runtime";
-import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Toaster } from "@camox/ui/toaster";
+import { Toaster, toast } from "@camox/ui/toaster";
 import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/AuthenticatedCamoxProvider.tsx
 function AuthenticatedCamoxProvider(t0) {
-	const $ = c(10);
-	if ($[0] !== "5934dd91b5a9b867275ab8801058e109f6352a3ac512ceb2f083d56bd54b2d7a") {
-		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5934dd91b5a9b867275ab8801058e109f6352a3ac512ceb2f083d56bd54b2d7a";
-	}
+	const $ = c(14);
 	const { children } = t0;
 	useAdminShortcuts();
 	useCommandPaletteActions();
@@ -27,49 +24,77 @@ function AuthenticatedCamoxProvider(t0) {
 	useAuthActions();
 	useNavbarActions();
 	usePreviewPagesActions();
-	const { apiUrl, projectSlug } = React.useContext(AuthContext);
+	useShowCanvasAction();
+	const { apiUrl, projectUuid } = React.useContext(AuthContext);
 	let t1;
-	if ($[1] !== projectSlug) {
-		t1 = projectQueries.getBySlug(projectSlug);
-		$[1] = projectSlug;
-		$[2] = t1;
-	} else t1 = $[2];
-	const { data: project } = useQuery(t1);
-	useProjectRoom(apiUrl, project?.id);
-	const { resolvedTheme } = useApplyTheme();
+	if ($[0] !== projectUuid) {
+		t1 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: project } = useReadQuery(t1);
+	const draftScope = useDraftScope();
+	const studioCache = useStudioCache();
 	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("link", {
-			rel: "stylesheet",
-			href: studioCssUrl,
-			"data-camox-studio": true
-		});
-		$[3] = t2;
-	} else t2 = $[3];
 	let t3;
-	if ($[4] !== resolvedTheme) {
-		t3 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
-		$[4] = resolvedTheme;
-		$[5] = t3;
-	} else t3 = $[5];
+	if ($[2] !== draftScope) {
+		t2 = () => draftScope.onNotice(_temp);
+		t3 = [draftScope];
+		$[2] = draftScope;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	React.useEffect(t2, t3);
 	let t4;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(CommandPalette, {});
+	if ($[5] !== draftScope) {
+		t4 = { onDraftEnded(ended) {
+			if (ended.draftId !== draftScope.current()) return;
+			draftScope.leave(ended, { notice: true });
+		} };
+		$[5] = draftScope;
 		$[6] = t4;
 	} else t4 = $[6];
+	useProjectRoom(apiUrl, project?.id, studioCache, t4);
+	const { resolvedTheme } = useApplyTheme();
 	let t5;
-	if ($[7] !== children || $[8] !== t3) {
-		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t2,
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("link", {
+			rel: "stylesheet",
+			href: studioCssUrl,
+			"data-camox-studio": true
+		});
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== resolvedTheme) {
+		t6 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
+		$[8] = resolvedTheme;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(CommandPalette, {});
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== children || $[12] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t5,
 			children,
-			t3,
-			t4
+			t6,
+			t7
 		] });
-		$[7] = children;
-		$[8] = t3;
-		$[9] = t5;
-	} else t5 = $[9];
-	return t5;
+		$[11] = children;
+		$[12] = t6;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
+}
+function _temp(notice) {
+	toast(draftNoticeMessage(notice));
 }
 
 //#endregion

package/dist/features/provider/CamoxProvider.d.ts

@@ -1,16 +1,13 @@
 import { CamoxApp } from "../../core/createApp.js";
 import * as React from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/features/provider/CamoxProvider.d.ts
 interface CamoxProviderProps {
   apiUrl: string;
   authenticationUrl: string;
   camoxApp: CamoxApp;
   children: React.ReactNode;
-  environmentName?: string;
-  projectSlug: string;
+  projectUuid: string;
 }
-declare function CamoxProvider(props: CamoxProviderProps): _$react_jsx_runtime0.JSX.Element;
+export declare function CamoxProvider(props: CamoxProviderProps): React.JSX.Element;
 //#endregion
-export { CamoxProvider };
+export {};

package/dist/features/provider/CamoxProvider.js

@@ -1,9 +1,9 @@
-import { useLocation } from "../navigation/navigation.js";
 import { useSignInRedirect } from "../../lib/auth.js";
+import { useLocation } from "../navigation/navigation.js";
 import { STUDIO_BASE_PATH } from "../studio/routes.js";
 import { AuthGate } from "../../components/AuthGate.js";
 import { AuthenticatedCamoxProvider } from "./AuthenticatedCamoxProvider.js";
-import { CoreCamoxProvider } from "./CoreCamoxProvider.js";
+import { CoreCamoxProvider, isLocalhostPreview } from "./CoreCamoxProvider.js";
 import { LocalhostPreviewProvider } from "./LocalhostPreviewProvider.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -11,98 +11,86 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/features/provider/CamoxProvider.tsx
 function UnauthenticatedExperience(t0) {
-	const $ = c(13);
-	if ($[0] !== "29d68a11213af2b1fef531271ea0f2268b5c50fdad0696b9211d3ed97537e7c8") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29d68a11213af2b1fef531271ea0f2268b5c50fdad0696b9211d3ed97537e7c8";
-	}
+	const $ = c(12);
 	const { children } = t0;
 	const { pathname } = useLocation();
 	let t1;
-	if ($[1] !== pathname) {
-		t1 = pathname === STUDIO_BASE_PATH || pathname.startsWith(`${STUDIO_BASE_PATH}/`);
-		$[1] = pathname;
-		$[2] = t1;
-	} else t1 = $[2];
+	if ($[0] !== pathname) {
+		t1 = pathname === "/camox" || pathname.startsWith(`${"/camox"}/`);
+		$[0] = pathname;
+		$[1] = t1;
+	} else t1 = $[1];
 	const isStudio = t1;
 	let t2;
-	if ($[3] !== isStudio) {
+	if ($[2] !== isStudio) {
 		t2 = () => {
 			if (typeof window === "undefined") return;
 			if (!isStudio) return window.location.href;
 			return new URL("/", window.location.href).href;
 		};
-		$[3] = isStudio;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[2] = isStudio;
+		$[3] = t2;
+	} else t2 = $[3];
 	const signInRedirect = useSignInRedirect(t2);
 	let t3;
 	let t4;
-	if ($[5] !== isStudio || $[6] !== signInRedirect) {
+	if ($[4] !== isStudio || $[5] !== signInRedirect) {
 		t3 = () => {
 			if (isStudio) signInRedirect();
 		};
 		t4 = [isStudio, signInRedirect];
-		$[5] = isStudio;
-		$[6] = signInRedirect;
-		$[7] = t3;
-		$[8] = t4;
+		$[4] = isStudio;
+		$[5] = signInRedirect;
+		$[6] = t3;
+		$[7] = t4;
 	} else {
-		t3 = $[7];
-		t4 = $[8];
+		t3 = $[6];
+		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
 	if (isStudio) return null;
-	if (typeof window !== "undefined" && [
-		"localhost",
-		"127.0.0.1",
-		"::1"
-	].includes(location.hostname)) {
+	if (isLocalhostPreview()) {
 		let t5;
-		if ($[9] !== children) {
+		if ($[8] !== children) {
 			t5 = /* @__PURE__ */ jsx(LocalhostPreviewProvider, { children });
-			$[9] = children;
-			$[10] = t5;
-		} else t5 = $[10];
+			$[8] = children;
+			$[9] = t5;
+		} else t5 = $[9];
 		return t5;
 	}
 	let t5;
-	if ($[11] !== children) {
+	if ($[10] !== children) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			className: "bg-background min-h-screen",
 			children
 		});
-		$[11] = children;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[10] = children;
+		$[11] = t5;
+	} else t5 = $[11];
 	return t5;
 }
 function CamoxProvider(props) {
-	const $ = c(6);
-	if ($[0] !== "29d68a11213af2b1fef531271ea0f2268b5c50fdad0696b9211d3ed97537e7c8") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29d68a11213af2b1fef531271ea0f2268b5c50fdad0696b9211d3ed97537e7c8";
-	}
+	const $ = c(5);
 	let t0;
-	if ($[1] !== props.children) {
+	if ($[0] !== props.children) {
 		t0 = /* @__PURE__ */ jsx(AuthGate, {
 			authenticated: /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: props.children }),
 			loading: /* @__PURE__ */ jsx(UnauthenticatedExperience, { children: props.children }),
 			unauthenticated: /* @__PURE__ */ jsx(UnauthenticatedExperience, { children: props.children })
 		});
-		$[1] = props.children;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[0] = props.children;
+		$[1] = t0;
+	} else t0 = $[1];
 	let t1;
-	if ($[3] !== props || $[4] !== t0) {
+	if ($[2] !== props || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(CoreCamoxProvider, {
 			...props,
 			children: t0
 		});
-		$[3] = props;
-		$[4] = t0;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
 	return t1;
 }
 

package/dist/features/provider/CoreCamoxProvider.js

@@ -1,77 +1,93 @@
 import { AuthContext, createCamoxAuthClient, useProcessOtt } from "../../lib/auth.js";
-import { initApiClient } from "../../lib/api-client.js";
+import { getDraftReadClient, initApiClient } from "../../lib/api-client.js";
+import { DraftScopeContext, createDraftScope, followUrl } from "../../lib/draft-scope.js";
 import { CamoxAppProvider } from "./components/CamoxAppContext.js";
-import { projectQueries } from "../../lib/queries.js";
-import { useQueryClient } from "@tanstack/react-query";
+import { StudioCacheContext, createStudioCache, reads } from "../../lib/studio-reads.js";
+import { PreviewSignInPage } from "./PreviewSignInPage.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { replaceEqualDeep, useQueryClient } from "@tanstack/react-query";
 
 //#region src/features/provider/CoreCamoxProvider.tsx
 function isLocalhostPreview() {
 	if (typeof window === "undefined") return false;
 	const { hostname } = window.location;
-	return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1";
+	return hostname === "localhost" || hostname.endsWith(".localhost") || hostname === "127.0.0.1" || hostname === "[::1]" || hostname === "::1";
 }
-function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, environmentName, projectSlug, initialAuthenticated = false, initialProject }) {
+function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, projectUuid, initialAuthenticated = false, initialProject }) {
 	const queryClient = useQueryClient();
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);
-	const initializedApiUrl = React.useRef(null);
-	if (initializedApiUrl.current !== apiUrl) {
-		initApiClient(apiUrl, environmentName);
-		initializedApiUrl.current = apiUrl;
+	const providedScope = React.useContext(DraftScopeContext);
+	const [ownScope] = React.useState(() => providedScope ? null : createWindowDraftScope(queryClient));
+	const draftScope = providedScope ?? ownScope;
+	const initializedClient = React.useRef(null);
+	if (initializedClient.current?.apiUrl !== apiUrl || initializedClient.current.draftScope !== draftScope) {
+		initApiClient(apiUrl, draftScope);
+		initializedClient.current = {
+			apiUrl,
+			draftScope
+		};
 	}
+	const providedCache = React.useContext(StudioCacheContext);
+	const [ownCache] = React.useState(() => providedCache ? null : createStudioCache({
+		queryClient,
+		scope: draftScope,
+		api: getDraftReadClient
+	}));
+	const studioCache = providedCache ?? ownCache;
 	const seededProject = React.useRef(void 0);
 	if (initialProject && seededProject.current !== initialProject) {
-		queryClient.setQueryData(projectQueries.getBySlug(projectSlug).queryKey, initialProject);
+		const read = reads.project({ projectUuid });
+		const cached = studioCache.get(read);
+		if (!cached || replaceEqualDeep(cached, initialProject) !== cached) studioCache.set(read, initialProject);
 		seededProject.current = initialProject;
 	}
+	const authContext = React.useMemo(() => ({
+		authClient,
+		authenticationUrl,
+		apiUrl,
+		projectUuid,
+		initialAuthenticated
+	}), [
+		authClient,
+		authenticationUrl,
+		apiUrl,
+		projectUuid,
+		initialAuthenticated
+	]);
 	const { ready, error } = useProcessOtt(authClient, {
-		projectSlug,
-		environmentName,
+		projectUuid,
 		apiUrl
-	});
+	}, initialAuthenticated);
 	const [isPreviewHandoff, setIsPreviewHandoff] = React.useState(false);
 	React.useEffect(() => {
 		setIsPreviewHandoff(new URL(window.location.href).searchParams.has("camox-preview"));
 	}, []);
-	if (error) return /* @__PURE__ */ jsx("div", {
-		role: "alert",
-		"data-camox-preview": "error",
-		children: error
-	});
-	if (isPreviewHandoff && !ready) return /* @__PURE__ */ jsx("div", {
-		role: "status",
-		"data-camox-preview": "pending",
-		children: "Signing in to draft preview…"
+	if (error) return /* @__PURE__ */ jsx(PreviewSignInPage, { error });
+	if (isPreviewHandoff && !ready) return /* @__PURE__ */ jsx(PreviewSignInPage, {});
+	if (isPreviewHandoff && !initialAuthenticated) return /* @__PURE__ */ jsx(PreviewSignInPage, { error: "Draft preview is not authenticated. Run camox preview again for a fresh link." });
+	return /* @__PURE__ */ jsx(DraftScopeContext.Provider, {
+		value: draftScope,
+		children: /* @__PURE__ */ jsx(StudioCacheContext.Provider, {
+			value: studioCache,
+			children: /* @__PURE__ */ jsx(AuthContext.Provider, {
+				value: authContext,
+				children: /* @__PURE__ */ jsx(CamoxAppProvider, {
+					app: camoxApp,
+					children
+				})
+			})
+		})
 	});
-	if (isPreviewHandoff && !initialAuthenticated) return /* @__PURE__ */ jsx("div", {
-		role: "alert",
-		"data-camox-preview": "error",
-		children: "Draft preview is not authenticated. Run camox preview again for a fresh link."
-	});
-	return /* @__PURE__ */ jsxs(AuthContext.Provider, {
-		value: {
-			authClient,
-			authenticationUrl,
-			apiUrl,
-			projectSlug,
-			environmentName,
-			initialAuthenticated
-		},
-		children: [isPreviewHandoff && /* @__PURE__ */ jsxs("div", {
-			role: "status",
-			"data-camox-preview": "ready",
-			children: [
-				"Draft preview · ",
-				projectSlug,
-				" · ",
-				environmentName
-			]
-		}), /* @__PURE__ */ jsx(CamoxAppProvider, {
-			app: camoxApp,
-			children
-		})]
+}
+function createWindowDraftScope(queryClient) {
+	if (typeof window === "undefined") return createDraftScope({ queryClient });
+	const draftScope = createDraftScope({
+		queryClient,
+		browser: window
 	});
+	followUrl(draftScope, window.location.href);
+	return draftScope;
 }
 
 //#endregion