camox 0.39.0 → 0.40.0

package/dist/features/preview/CamoxPreview.js

@@ -7,8 +7,8 @@ import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
 import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
 import { cn } from "../../lib/utils.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
-import { Navbar } from "../studio/components/Navbar.js";
 import { previewStore } from "./previewStore.js";
+import { Navbar } from "../studio/components/Navbar.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { DraftSwitchDialog } from "./components/DraftSwitchDialog.js";
 import { LeftSidebar } from "./components/LeftSidebar.js";
@@ -24,6 +24,23 @@ import { useSelector } from "@xstate/store-react";
 import { queryKeys } from "@camox/api-contract/query-keys";
 
 //#region src/features/preview/CamoxPreview.tsx
+const MOBILE_STUDIO_QUERY = "(max-width: 767px)";
+function subscribeToMobileStudio(callback) {
+	const mediaQuery = window.matchMedia(MOBILE_STUDIO_QUERY);
+	mediaQuery.addEventListener("change", callback);
+	return () => mediaQuery.removeEventListener("change", callback);
+}
+function getMobileStudioSnapshot() {
+	return window.matchMedia(MOBILE_STUDIO_QUERY).matches;
+}
+function useIsMobileStudio() {
+	const $ = c(1);
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+	}
+	return React.useSyncExternalStore(subscribeToMobileStudio, getMobileStudioSnapshot, _temp);
+}
 /**
 * Fetches the current page being previewed, with live updates for authenticated users.
 * Also will switch to peeked page data if there is one.
@@ -42,6 +59,9 @@ import { queryKeys } from "@camox/api-contract/query-keys";
 * this query function doesn't run for them — they stay on the SSR-seeded
 * 'live' data.
 */
+function _temp() {
+	return false;
+}
 function pageStructureQueryFn(path, projectSlug, source) {
 	return () => getApiClient().pages.getStructure({
 		path,
@@ -51,15 +71,15 @@ function pageStructureQueryFn(path, projectSlug, source) {
 }
 function usePreviewedPage() {
 	const $ = c(26);
-	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
 	const projectSlug = useProjectSlug();
-	const peekedPagePathname = useSelector(previewStore, _temp);
-	const previewSource = useSelector(previewStore, _temp2);
+	const peekedPagePathname = useSelector(previewStore, _temp2);
+	const previewSource = useSelector(previewStore, _temp3);
 	const prevPathnameRef = React.useRef(pathname);
 	let t0;
 	let t1;
@@ -142,20 +162,20 @@ function usePreviewedPage() {
 	const { data: peekedPage } = useQuery(t9);
 	return peekedPagePathname ? peekedPage ?? currentPage : currentPage;
 }
-function _temp2(state_0) {
+function _temp3(state_0) {
 	return state_0.context.previewSource;
 }
-function _temp(state) {
+function _temp2(state) {
 	return state.context.peekedPagePathname;
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
-	const previewSource = useSelector(previewStore, _temp3);
+	const previewSource = useSelector(previewStore, _temp4);
 	let t1;
 	if ($[1] !== blockId || $[2] !== previewSource) {
 		t1 = blockQueries.get(blockId, previewSource);
@@ -295,9 +315,9 @@ const PageContent = () => {
 };
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -322,7 +342,7 @@ function useHydrateDraftCache() {
 					projectName: data.projectName,
 					project: data.project
 				});
-			}).catch(_temp4);
+			}).catch(_temp5);
 			return () => {
 				cancelled = true;
 			};
@@ -345,26 +365,44 @@ function useHydrateDraftCache() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp4() {}
+function _temp5() {}
 const CamoxPreview = (t0) => {
-	const $ = c(40);
-	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
-		for (let $i = 0; $i < 40; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
+	const $ = c(52);
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+		for (let $i = 0; $i < 52; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
-	const isEditMode = useSelector(previewStore, _temp5);
-	const isToolbarHidden = useSelector(previewStore, _temp6);
-	const isAddBlockSidebarOpen = useSelector(previewStore, _temp7);
-	const previewSource = useSelector(previewStore, _temp8);
+	const isMobileStudio = useIsMobileStudio();
+	const isEditMode = useSelector(previewStore, _temp6);
+	const isToolbarHidden = useSelector(previewStore, _temp7);
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp8);
+	const previewSource = useSelector(previewStore, _temp9);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
 	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
 	let t1;
 	let t2;
-	if ($[1] !== hasLiveCheckpoint || $[2] !== isAuthenticated || $[3] !== isEditMode || $[4] !== previewSource) {
+	if ($[1] !== isMobileStudio) {
 		t1 = () => {
+			if (!isMobileStudio) return;
+			previewStore.send({ type: "exitEditMode" });
+			previewStore.send({ type: "closeAddBlockSidebar" });
+		};
+		t2 = [isMobileStudio];
+		$[1] = isMobileStudio;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[4] !== hasLiveCheckpoint || $[5] !== isAuthenticated || $[6] !== isEditMode || $[7] !== isMobileStudio || $[8] !== previewSource) {
+		t3 = () => {
 			const actions = [
 				{
 					id: "exit-edit-mode",
@@ -377,7 +415,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isEditMode,
-					execute: _temp9,
+					execute: _temp0,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -392,8 +430,8 @@ const CamoxPreview = (t0) => {
 						"Edit mode"
 					],
 					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && !isEditMode,
-					execute: _temp0,
+					checkIfAvailable: () => isAuthenticated && !isEditMode && !isMobileStudio,
+					execute: _temp1,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -409,7 +447,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp1,
+					execute: _temp10,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -425,7 +463,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp10,
+					execute: _temp11,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -436,8 +474,8 @@ const CamoxPreview = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp11,
-					execute: _temp12,
+					checkIfAvailable: _temp12,
+					execute: _temp13,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -448,145 +486,158 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp13)
+					ids: actions.map(_temp14)
 				});
 			};
 		};
-		t2 = [
+		t4 = [
 			isEditMode,
 			isAuthenticated,
+			isMobileStudio,
 			previewSource,
 			hasLiveCheckpoint
 		];
-		$[1] = hasLiveCheckpoint;
-		$[2] = isAuthenticated;
-		$[3] = isEditMode;
-		$[4] = previewSource;
-		$[5] = t1;
-		$[6] = t2;
+		$[4] = hasLiveCheckpoint;
+		$[5] = isAuthenticated;
+		$[6] = isEditMode;
+		$[7] = isMobileStudio;
+		$[8] = previewSource;
+		$[9] = t3;
+		$[10] = t4;
 	} else {
-		t1 = $[5];
-		t2 = $[6];
+		t3 = $[9];
+		t4 = $[10];
 	}
-	React.useEffect(t1, t2);
+	React.useEffect(t3, t4);
 	if (!isAuthenticated) {
-		let t3;
-		if ($[7] !== children) {
-			t3 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[7] = children;
-			$[8] = t3;
-		} else t3 = $[8];
-		return t3;
+		let t5;
+		if ($[11] !== children) {
+			t5 = /* @__PURE__ */ jsx(Fragment, { children });
+			$[11] = children;
+			$[12] = t5;
+		} else t5 = $[12];
+		return t5;
 	}
-	const t3 = !isEditMode && "bg-black";
-	let t4;
-	if ($[9] !== t3) {
-		t4 = cn("bg-background flex h-screen flex-col overflow-hidden", t3);
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	let t5;
-	if ($[11] !== isAddBlockSidebarOpen || $[12] !== isToolbarHidden) {
-		t5 = !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
+	const t5 = !isEditMode && "bg-black";
+	let t6;
+	if ($[13] !== t5) {
+		t6 = cn("bg-background flex h-screen flex-col overflow-hidden", t5);
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== isAddBlockSidebarOpen || $[16] !== isMobileStudio || $[17] !== isToolbarHidden) {
+		t7 = !isMobileStudio && !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ jsx(Navbar, {}), isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 z-20",
 				style: { background: "rgba(0, 0, 0, 0.66)" },
-				onClick: _temp14
+				onClick: _temp15
 			})]
 		});
-		$[11] = isAddBlockSidebarOpen;
-		$[12] = isToolbarHidden;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== isEditMode || $[15] !== pageData.page) {
-		t6 = isEditMode && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
-		$[14] = isEditMode;
-		$[15] = pageData.page;
-		$[16] = t6;
-	} else t6 = $[16];
-	let t7;
-	if ($[17] !== hasLiveCheckpoint || $[18] !== pageData.page.status) {
-		t7 = {
+		$[15] = isAddBlockSidebarOpen;
+		$[16] = isMobileStudio;
+		$[17] = isToolbarHidden;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== isEditMode || $[20] !== isMobileStudio || $[21] !== pageData.page) {
+		t8 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
+		$[19] = isEditMode;
+		$[20] = isMobileStudio;
+		$[21] = pageData.page;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== hasLiveCheckpoint || $[24] !== pageData.page.status) {
+		t9 = {
 			pageStatus: pageData.page.status,
 			hasLiveVersion: hasLiveCheckpoint
 		};
-		$[17] = hasLiveCheckpoint;
-		$[18] = pageData.page.status;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== isEditMode) {
-		t8 = isEditMode && /* @__PURE__ */ jsx("div", { style: {
-			height: "80px",
-			background: "transparent"
-		} });
-		$[20] = isEditMode;
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== children || $[23] !== t7 || $[24] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(PreviewPanel, {
-			toolbarProps: t7,
-			children: [children, t8]
-		});
-		$[22] = children;
-		$[23] = t7;
-		$[24] = t8;
+		$[23] = hasLiveCheckpoint;
+		$[24] = pageData.page.status;
 		$[25] = t9;
 	} else t9 = $[25];
 	let t10;
-	if ($[26] !== isEditMode || $[27] !== pageData.page.id) {
-		t10 = isEditMode && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
+	if ($[26] !== isEditMode || $[27] !== isMobileStudio) {
+		t10 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx("div", { style: {
+			height: "80px",
+			background: "transparent"
+		} });
 		$[26] = isEditMode;
-		$[27] = pageData.page.id;
+		$[27] = isMobileStudio;
 		$[28] = t10;
 	} else t10 = $[28];
 	let t11;
-	if ($[29] !== t10 || $[30] !== t6 || $[31] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-row items-stretch",
-			children: [
-				t6,
-				t9,
-				t10
-			]
+	if ($[29] !== children || $[30] !== isMobileStudio || $[31] !== pageData.page || $[32] !== pageData.projectName || $[33] !== t10 || $[34] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(PreviewPanel, {
+			isMobileExperience: isMobileStudio,
+			page: pageData.page,
+			projectName: pageData.projectName,
+			toolbarProps: t9,
+			children: [children, t10]
 		});
-		$[29] = t10;
-		$[30] = t6;
-		$[31] = t9;
-		$[32] = t11;
-	} else t11 = $[32];
+		$[29] = children;
+		$[30] = isMobileStudio;
+		$[31] = pageData.page;
+		$[32] = pageData.projectName;
+		$[33] = t10;
+		$[34] = t9;
+		$[35] = t11;
+	} else t11 = $[35];
 	let t12;
-	if ($[33] !== isEditMode) {
-		t12 = isEditMode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
-		$[33] = isEditMode;
-		$[34] = t12;
-	} else t12 = $[34];
+	if ($[36] !== isEditMode || $[37] !== isMobileStudio || $[38] !== pageData.page.id) {
+		t12 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
+		$[36] = isEditMode;
+		$[37] = isMobileStudio;
+		$[38] = pageData.page.id;
+		$[39] = t12;
+	} else t12 = $[39];
 	let t13;
-	if ($[35] !== t11 || $[36] !== t12 || $[37] !== t4 || $[38] !== t5) {
+	if ($[40] !== t11 || $[41] !== t12 || $[42] !== t8) {
 		t13 = /* @__PURE__ */ jsxs("div", {
-			className: t4,
+			className: "flex h-full flex-row items-stretch",
 			children: [
-				t5,
+				t8,
 				t11,
 				t12
 			]
 		});
-		$[35] = t11;
-		$[36] = t12;
-		$[37] = t4;
-		$[38] = t5;
-		$[39] = t13;
-	} else t13 = $[39];
-	return t13;
+		$[40] = t11;
+		$[41] = t12;
+		$[42] = t8;
+		$[43] = t13;
+	} else t13 = $[43];
+	let t14;
+	if ($[44] !== isEditMode || $[45] !== isMobileStudio) {
+		t14 = (isMobileStudio || isEditMode) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
+		$[44] = isEditMode;
+		$[45] = isMobileStudio;
+		$[46] = t14;
+	} else t14 = $[46];
+	let t15;
+	if ($[47] !== t13 || $[48] !== t14 || $[49] !== t6 || $[50] !== t7) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
+			children: [
+				t7,
+				t13,
+				t14
+			]
+		});
+		$[47] = t13;
+		$[48] = t14;
+		$[49] = t6;
+		$[50] = t7;
+		$[51] = t15;
+	} else t15 = $[51];
+	return t15;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
+	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
+		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -627,8 +678,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp15,
-					execute: _temp16
+					checkIfAvailable: _temp16,
+					execute: _temp17
 				},
 				{
 					id: "edit-current-page",
@@ -659,14 +710,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp17
+					execute: _temp18
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp18,
+					checkIfAvailable: _temp19,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -677,7 +728,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp19)
+					ids: actions.map(_temp20)
 				});
 			};
 		};
@@ -697,62 +748,62 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp19(a) {
+function _temp20(a) {
 	return a.id;
 }
-function _temp18() {
+function _temp19() {
 	return true;
 }
-function _temp17() {}
-function _temp16() {
+function _temp18() {}
+function _temp17() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp15() {
+function _temp16() {
 	return true;
 }
-function _temp3(state) {
+function _temp4(state) {
 	return state.context.previewSource;
 }
-function _temp5(state) {
+function _temp6(state) {
 	return state.context.isEditMode;
 }
-function _temp6(state_0) {
+function _temp7(state_0) {
 	return state_0.context.isToolbarHidden;
 }
-function _temp7(state_1) {
+function _temp8(state_1) {
 	return state_1.context.isAddBlockSidebarOpen;
 }
-function _temp8(state_2) {
+function _temp9(state_2) {
 	return state_2.context.previewSource;
 }
-function _temp9() {
+function _temp0() {
 	return previewStore.send({ type: "exitEditMode" });
 }
-function _temp0() {
+function _temp1() {
 	return previewStore.send({ type: "enterEditMode" });
 }
-function _temp1() {
+function _temp10() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "live"
 	});
 }
-function _temp10() {
+function _temp11() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "draft"
 	});
 }
-function _temp11() {
+function _temp12() {
 	return true;
 }
-function _temp12() {
+function _temp13() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp13(a) {
+function _temp14(a) {
 	return a.id;
 }
-function _temp14() {
+function _temp15() {
 	return previewStore.send({ type: "closeAddBlockSidebar" });
 }