camox 0.35.0 → 0.36.1

package/dist/features/preview/CamoxPreview.js

@@ -11,11 +11,11 @@ import { Navbar } from "../studio/components/Navbar.js";
 import { previewStore } from "./previewStore.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { DraftSwitchDialog } from "./components/DraftSwitchDialog.js";
-import { pageFullQueryFn } from "./previewQueryFns.js";
 import { LeftSidebar } from "./components/LeftSidebar.js";
 import { PeekedBlock } from "./components/PeekedBlock.js";
 import { PreviewPanel } from "./components/PreviewPanel.js";
 import { RightSidebar } from "./components/RightSidebar.js";
+import { pageFullQueryFn } from "./previewQueryFns.js";
 import { c } from "react/compiler-runtime";
 import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import * as React from "react";
@@ -51,9 +51,9 @@ function pageStructureQueryFn(path, projectSlug, source) {
 }
 function usePreviewedPage() {
 	const $ = c(26);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
@@ -150,9 +150,9 @@ function _temp(state) {
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
 	const previewSource = useSelector(previewStore, _temp3);
@@ -295,9 +295,9 @@ const PageContent = () => {
 };
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -347,15 +347,17 @@ function useHydrateDraftCache() {
 }
 function _temp4() {}
 const CamoxPreview = (t0) => {
-	const $ = c(35);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
-		for (let $i = 0; $i < 35; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+	const $ = c(40);
+	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
+		for (let $i = 0; $i < 40; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
 	const isEditMode = useSelector(previewStore, _temp5);
-	const previewSource = useSelector(previewStore, _temp6);
+	const isToolbarHidden = useSelector(previewStore, _temp6);
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp7);
+	const previewSource = useSelector(previewStore, _temp8);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
 	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
@@ -375,7 +377,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isEditMode,
-					execute: _temp7,
+					execute: _temp9,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -391,7 +393,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isEditMode,
-					execute: _temp8,
+					execute: _temp0,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -407,7 +409,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp9,
+					execute: _temp1,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -423,7 +425,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp0,
+					execute: _temp10,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -434,8 +436,8 @@ const CamoxPreview = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp1,
-					execute: _temp10,
+					checkIfAvailable: _temp11,
+					execute: _temp12,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -446,7 +448,7 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp11)
+					ids: actions.map(_temp13)
 				});
 			};
 		};
@@ -476,7 +478,6 @@ const CamoxPreview = (t0) => {
 		} else t3 = $[8];
 		return t3;
 	}
-	const shouldShowStudioChrome = isEditMode;
 	const t3 = !isEditMode && "bg-black";
 	let t4;
 	if ($[9] !== t3) {
@@ -485,85 +486,107 @@ const CamoxPreview = (t0) => {
 		$[10] = t4;
 	} else t4 = $[10];
 	let t5;
-	if ($[11] !== shouldShowStudioChrome) {
-		t5 = shouldShowStudioChrome && /* @__PURE__ */ jsx(Navbar, {});
-		$[11] = shouldShowStudioChrome;
-		$[12] = t5;
-	} else t5 = $[12];
+	if ($[11] !== isAddBlockSidebarOpen || $[12] !== isToolbarHidden) {
+		t5 = !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
+			})]
+		});
+		$[11] = isAddBlockSidebarOpen;
+		$[12] = isToolbarHidden;
+		$[13] = t5;
+	} else t5 = $[13];
 	let t6;
-	if ($[13] !== pageData.page || $[14] !== shouldShowStudioChrome) {
-		t6 = shouldShowStudioChrome && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
-		$[13] = pageData.page;
-		$[14] = shouldShowStudioChrome;
-		$[15] = t6;
-	} else t6 = $[15];
+	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 ($[16] !== shouldShowStudioChrome) {
-		t7 = shouldShowStudioChrome && /* @__PURE__ */ jsx("div", { style: {
+	if ($[17] !== hasLiveCheckpoint || $[18] !== pageData.page.status) {
+		t7 = {
+			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"
 		} });
-		$[16] = shouldShowStudioChrome;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== children || $[19] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(PreviewPanel, { children: [children, t7] });
-		$[18] = children;
-		$[19] = t7;
-		$[20] = t8;
-	} else t8 = $[20];
+		$[20] = isEditMode;
+		$[21] = t8;
+	} else t8 = $[21];
 	let t9;
-	if ($[21] !== pageData.page.id || $[22] !== shouldShowStudioChrome) {
-		t9 = shouldShowStudioChrome && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
-		$[21] = pageData.page.id;
-		$[22] = shouldShowStudioChrome;
-		$[23] = t9;
-	} else t9 = $[23];
+	if ($[22] !== children || $[23] !== t7 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(PreviewPanel, {
+			toolbarProps: t7,
+			children: [children, t8]
+		});
+		$[22] = children;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
 	let t10;
-	if ($[24] !== t6 || $[25] !== t8 || $[26] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+	if ($[26] !== isEditMode || $[27] !== pageData.page.id) {
+		t10 = isEditMode && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
+		$[26] = isEditMode;
+		$[27] = pageData.page.id;
+		$[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,
-				t8,
-				t9
+				t9,
+				t10
 			]
 		});
-		$[24] = t6;
-		$[25] = t8;
-		$[26] = t9;
-		$[27] = t10;
-	} else t10 = $[27];
-	let t11;
-	if ($[28] !== shouldShowStudioChrome) {
-		t11 = shouldShowStudioChrome && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
-		$[28] = shouldShowStudioChrome;
-		$[29] = t11;
-	} else t11 = $[29];
+		$[29] = t10;
+		$[30] = t6;
+		$[31] = t9;
+		$[32] = t11;
+	} else t11 = $[32];
 	let t12;
-	if ($[30] !== t10 || $[31] !== t11 || $[32] !== t4 || $[33] !== t5) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+	if ($[33] !== isEditMode) {
+		t12 = isEditMode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
+		$[33] = isEditMode;
+		$[34] = t12;
+	} else t12 = $[34];
+	let t13;
+	if ($[35] !== t11 || $[36] !== t12 || $[37] !== t4 || $[38] !== t5) {
+		t13 = /* @__PURE__ */ jsxs("div", {
 			className: t4,
 			children: [
 				t5,
-				t10,
-				t11
+				t11,
+				t12
 			]
 		});
-		$[30] = t10;
-		$[31] = t11;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t12;
-	} else t12 = $[34];
-	return t12;
+		$[35] = t11;
+		$[36] = t12;
+		$[37] = t4;
+		$[38] = t5;
+		$[39] = t13;
+	} else t13 = $[39];
+	return t13;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "08efc24964e6f71a0b75d26676e04d8253640e7adc88fa9c6e2293e86440c27a";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -604,8 +627,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp12,
-					execute: _temp13
+					checkIfAvailable: _temp15,
+					execute: _temp16
 				},
 				{
 					id: "edit-current-page",
@@ -636,14 +659,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp14
+					execute: _temp17
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp15,
+					checkIfAvailable: _temp18,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -654,7 +677,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp16)
+					ids: actions.map(_temp19)
 				});
 			};
 		};
@@ -674,17 +697,17 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp16(a) {
+function _temp19(a) {
 	return a.id;
 }
-function _temp15() {
+function _temp18() {
 	return true;
 }
-function _temp14() {}
-function _temp13() {
+function _temp17() {}
+function _temp16() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp12() {
+function _temp15() {
 	return true;
 }
 function _temp3(state) {
@@ -694,35 +717,44 @@ function _temp5(state) {
 	return state.context.isEditMode;
 }
 function _temp6(state_0) {
-	return state_0.context.previewSource;
+	return state_0.context.isToolbarHidden;
+}
+function _temp7(state_1) {
+	return state_1.context.isAddBlockSidebarOpen;
 }
-function _temp7() {
+function _temp8(state_2) {
+	return state_2.context.previewSource;
+}
+function _temp9() {
 	return previewStore.send({ type: "exitEditMode" });
 }
-function _temp8() {
+function _temp0() {
 	return previewStore.send({ type: "enterEditMode" });
 }
-function _temp9() {
+function _temp1() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "live"
 	});
 }
-function _temp0() {
+function _temp10() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "draft"
 	});
 }
-function _temp1() {
+function _temp11() {
 	return true;
 }
-function _temp10() {
+function _temp12() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp11(a) {
+function _temp13(a) {
 	return a.id;
 }
+function _temp14() {
+	return previewStore.send({ type: "closeAddBlockSidebar" });
+}
 
 //#endregion
 export { CamoxPreview, PageContent, usePreviewPagesActions, usePreviewedPage };

package/dist/features/preview/components/AssetLightbox.js

@@ -16,8 +16,8 @@ import { toast } from "@camox/ui/toaster";
 import { Dialog, DialogContent, DialogTitle } from "@camox/ui/dialog";
 import { Label } from "@camox/ui/label";
 import { ButtonGroup } from "@camox/ui/button-group";
-import { Switch } from "@camox/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/AssetLightbox.tsx
 function DeliveredSize(t0) {

package/dist/features/preview/components/PageEditorSidebar.js

@@ -272,7 +272,7 @@ const PageEditorSidebar = () => {
 		children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-3.5" }), " Loading block..."]
 	});
 	const fieldHasOwnView = fieldInfo ? fieldTypesDictionary[fieldInfo.fieldType].hasOwnView : false;
-	const [pageNavigationItem, ...contentNavigationItems] = [
+	const navigationItems = [
 		{
 			key: "page",
 			label: "Page",
@@ -307,47 +307,57 @@ const PageEditorSidebar = () => {
 	];
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "border-border flex flex-col gap-1.5 border-b px-2 py-4",
-		children: /* @__PURE__ */ jsxs("nav", {
+		children: /* @__PURE__ */ jsx("nav", {
 			"aria-label": "Selection path",
 			className: "text-muted-foreground text-sm",
-			children: [pageNavigationItem?.onClick ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "hover:text-foreground block min-w-0 cursor-pointer truncate py-0.5 text-left transition-colors",
-				onClick: pageNavigationItem.onClick,
-				children: pageNavigationItem.label
-			}) : /* @__PURE__ */ jsx("span", {
-				className: "text-foreground block min-w-0 truncate py-0.5 font-medium",
-				children: pageNavigationItem?.label
-			}), /* @__PURE__ */ jsx("ol", {
+			children: /* @__PURE__ */ jsx("ol", {
 				className: "flex flex-col",
-				children: contentNavigationItems.map((item, index) => {
+				children: navigationItems.map((item, index) => {
+					const isFirstItem = index === 0;
+					const isLastItem = index === navigationItems.length - 1;
 					return /* @__PURE__ */ jsxs("li", {
 						className: "relative min-w-0 pl-6",
-						children: [/* @__PURE__ */ jsx("svg", {
+						children: [/* @__PURE__ */ jsxs("svg", {
 							"aria-hidden": "true",
-							className: "text-muted-foreground pointer-events-none absolute top-0 left-0 h-full w-4",
+							className: "text-muted-foreground pointer-events-none absolute top-0 left-0 h-7 w-4",
 							fill: "none",
 							preserveAspectRatio: "none",
-							viewBox: "0 0 16 24",
-							children: /* @__PURE__ */ jsx("path", {
-								d: index < contentNavigationItems.length - 1 ? "M1 0 V24 M1 5 Q1 12 8 12 H16" : "M1 0 V5 Q1 12 8 12 H16",
-								stroke: "currentColor",
-								strokeLinecap: "square",
-								strokeWidth: "1.25",
-								vectorEffect: "non-scaling-stroke"
-							})
+							viewBox: "0 0 16 28",
+							children: [
+								!isFirstItem && /* @__PURE__ */ jsx("path", {
+									d: "M8 0 V10",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									vectorEffect: "non-scaling-stroke"
+								}),
+								!isLastItem && /* @__PURE__ */ jsx("path", {
+									d: "M8 18 V28",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									vectorEffect: "non-scaling-stroke"
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									className: "fill-background",
+									cx: "8",
+									cy: "14",
+									r: "4",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									vectorEffect: "non-scaling-stroke"
+								})
+							]
 						}), item.onClick ? /* @__PURE__ */ jsx("button", {
 							type: "button",
-							className: cn("hover:text-foreground relative -top-px block min-w-0 cursor-pointer truncate py-0.5 text-left transition-colors", item.isCurrent && "text-foreground font-medium"),
+							className: cn("hover:text-foreground flex h-7 min-w-0 cursor-pointer items-center truncate text-left transition-colors", item.isCurrent && "text-foreground font-medium"),
 							onClick: item.onClick,
 							children: item.label
 						}) : /* @__PURE__ */ jsx("span", {
-							className: "text-foreground relative -top-px block min-w-0 truncate py-0.5 font-medium",
+							className: "text-foreground block h-7 min-w-0 truncate leading-7 font-medium",
 							children: item.label
 						})]
 					}, item.key);
 				})
-			})]
+			})
 		})
 	}), /* @__PURE__ */ jsxs("div", {
 		className: "relative flex-1 overflow-auto",

package/dist/features/preview/components/PageInfoSidebar.js

@@ -25,8 +25,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { useForm } from "@tanstack/react-form";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText } from "@camox/ui/input-group";
 import { Input } from "@camox/ui/input";
-import { Switch } from "@camox/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PageInfoSidebar.tsx
 const usePageMetadataData = (pageId) => {