camox 0.32.0 → 0.33.0

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

@@ -0,0 +1,109 @@
+import { previewStore, selectionBlockId } from "../previewStore.js";
+import { AgentChatSidebar } from "../../agent-chat/components/AgentChatSidebar.js";
+import { PageEditorSidebar } from "./PageEditorSidebar.js";
+import { PageInfoSidebar } from "./PageInfoSidebar.js";
+import { c } from "react/compiler-runtime";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/RightSidebar.tsx
+const getRightSidebarRoute = ({ pageId, selectedBlockId, isAgentChatSidebarOpen }) => {
+	if (isAgentChatSidebarOpen) return { type: "agent-chat" };
+	if (selectedBlockId == null) return {
+		type: "page-info",
+		pageId
+	};
+	return { type: "page-editor" };
+};
+const RightSidebar = (t0) => {
+	const $ = c(20);
+	if ($[0] !== "e28d4f43142dcdc5527c359ae145ad38b0701935b08a0740871f5af399460a0b") {
+		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "e28d4f43142dcdc5527c359ae145ad38b0701935b08a0740871f5af399460a0b";
+	}
+	const { pageId } = t0;
+	const selection = useSelector(previewStore, _temp);
+	const isAgentChatSidebarOpen = useSelector(previewStore, _temp2);
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp3);
+	let t1;
+	if ($[1] !== isAgentChatSidebarOpen || $[2] !== pageId || $[3] !== selection) {
+		t1 = getRightSidebarRoute({
+			pageId,
+			selectedBlockId: selectionBlockId(selection),
+			isAgentChatSidebarOpen
+		});
+		$[1] = isAgentChatSidebarOpen;
+		$[2] = pageId;
+		$[3] = selection;
+		$[4] = t1;
+	} else t1 = $[4];
+	const route = t1;
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { width: 250 };
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== route.type) {
+		t3 = route.type === "agent-chat" && /* @__PURE__ */ jsx(AgentChatSidebar, {});
+		$[6] = route.type;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== route.pageId || $[9] !== route.type) {
+		t4 = route.type === "page-info" && /* @__PURE__ */ jsx(PageInfoSidebar, { pageId: route.pageId });
+		$[8] = route.pageId;
+		$[9] = route.type;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== route.type) {
+		t5 = route.type === "page-editor" && /* @__PURE__ */ jsx(PageEditorSidebar, {});
+		$[11] = route.type;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== isAddBlockSidebarOpen) {
+		t6 = isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 z-20",
+			style: { background: "rgba(0, 0, 0, 0.66)" },
+			onClick: _temp4
+		});
+		$[13] = isAddBlockSidebarOpen;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("aside", {
+			className: "bg-background relative flex shrink-0 flex-col border-l-2",
+			style: t2,
+			children: [
+				t3,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+};
+function _temp(state) {
+	return state.context.selection;
+}
+function _temp2(state_0) {
+	return state_0.context.isAgentChatSidebarOpen;
+}
+function _temp3(state_1) {
+	return state_1.context.isAddBlockSidebarOpen;
+}
+function _temp4() {
+	return previewStore.send({ type: "closeAddBlockSidebar" });
+}
+
+//#endregion
+export { RightSidebar };

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

@@ -4,10 +4,10 @@ import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { X } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 
 //#region src/features/preview/components/UnlinkAssetButton.tsx
 const UnlinkAssetButton = (t0) => {

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

@@ -1,6 +1,6 @@
+import { repeatableItemMutations } from "../../../lib/queries.js";
 import { previewStore } from "../previewStore.js";
-import { blockQueries, repeatableItemMutations } from "../../../lib/queries.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import "../../provider/components/CamoxAppContext.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -133,141 +133,6 @@ const useRepeatableItemActions = (t0) => {
 	} else t5 = $[17];
 	return t5;
 };
-const getArraySchemaForItem = (contentSchema, itemId, itemsMap) => {
-	const path = [];
-	let current = itemsMap.get(itemId);
-	while (current) {
-		path.unshift(current.fieldName);
-		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
-	}
-	let schema = contentSchema;
-	for (let i = 0; i < path.length; i++) {
-		const prop = schema?.properties?.[path[i]];
-		if (!prop?.items) return null;
-		if (i === path.length - 1) return prop;
-		schema = prop.items;
-	}
-	return null;
-};
-/**
-* Resolves the action surface for the currently-edited repeatable item by
-* fetching the block bundle, locating the item's array-level schema, and
-* counting siblings. Hook is safe to call when ids are null — it'll just
-* return disabled actions.
-*/
-const useCurrentItemActions = (blockId, itemId) => {
-	const $ = c(27);
-	if ($[0] !== "16e9f8f4b1a1e8d41d093c0930e510d6bea72e481f78c01b1ca1e595bec9f4cb") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "16e9f8f4b1a1e8d41d093c0930e510d6bea72e481f78c01b1ca1e595bec9f4cb";
-	}
-	const camoxApp = useCamoxApp();
-	let t0;
-	if ($[1] !== blockId) {
-		t0 = blockQueries.get(blockId);
-		$[1] = blockId;
-		$[2] = t0;
-	} else t0 = $[2];
-	const t1 = blockId != null;
-	let t2;
-	if ($[3] !== t0 || $[4] !== t1) {
-		t2 = {
-			...t0,
-			enabled: t1
-		};
-		$[3] = t0;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	const { data: blockBundle } = useQuery(t2);
-	blockBundle?.repeatableItems;
-	let t3;
-	if ($[6] !== blockBundle?.repeatableItems) {
-		t3 = new Map((blockBundle?.repeatableItems ?? []).map(_temp));
-		$[6] = blockBundle?.repeatableItems;
-		$[7] = t3;
-	} else t3 = $[7];
-	const itemsMap = t3;
-	let t4;
-	if ($[8] !== itemId || $[9] !== itemsMap) {
-		t4 = itemId != null ? itemsMap.get(itemId) ?? null : null;
-		$[8] = itemId;
-		$[9] = itemsMap;
-		$[10] = t4;
-	} else t4 = $[10];
-	const currentItem = t4;
-	const block = blockBundle?.block ?? null;
-	let t5;
-	if ($[11] !== block || $[12] !== camoxApp) {
-		t5 = block ? camoxApp.getBlockById(block.type) : null;
-		$[11] = block;
-		$[12] = camoxApp;
-		$[13] = t5;
-	} else t5 = $[13];
-	const blockDef = t5;
-	let t6;
-	bb0: {
-		if (!blockDef || itemId == null) {
-			t6 = null;
-			break bb0;
-		}
-		let t7;
-		if ($[14] !== blockDef._internal.contentSchema || $[15] !== itemId || $[16] !== itemsMap) {
-			t7 = getArraySchemaForItem(blockDef._internal.contentSchema, itemId, itemsMap);
-			$[14] = blockDef._internal.contentSchema;
-			$[15] = itemId;
-			$[16] = itemsMap;
-			$[17] = t7;
-		} else t7 = $[17];
-		t6 = t7;
-	}
-	const arraySchema = t6;
-	let t7;
-	bb1: {
-		if (!currentItem) {
-			t7 = 0;
-			break bb1;
-		}
-		let count = 0;
-		for (const it of itemsMap.values()) if (it.fieldName === currentItem.fieldName && it.parentItemId === currentItem.parentItemId) count++;
-		t7 = count;
-	}
-	const siblingCount = t7;
-	const t8 = block?.id ?? -1;
-	const t9 = currentItem?.fieldName ?? "";
-	const t10 = currentItem?.parentItemId ?? null;
-	let t11;
-	if ($[18] !== arraySchema || $[19] !== siblingCount || $[20] !== t10 || $[21] !== t8 || $[22] !== t9) {
-		t11 = {
-			blockId: t8,
-			fieldName: t9,
-			parentItemId: t10,
-			arraySchema,
-			siblingCount
-		};
-		$[18] = arraySchema;
-		$[19] = siblingCount;
-		$[20] = t10;
-		$[21] = t8;
-		$[22] = t9;
-		$[23] = t11;
-	} else t11 = $[23];
-	const actions = useRepeatableItemActions(t11);
-	let t12;
-	if ($[24] !== actions || $[25] !== currentItem) {
-		t12 = {
-			...actions,
-			currentItem
-		};
-		$[24] = actions;
-		$[25] = currentItem;
-		$[26] = t12;
-	} else t12 = $[26];
-	return t12;
-};
-function _temp(i) {
-	return [i.id, i];
-}
 
 //#endregion
-export { useCurrentItemActions, useRepeatableItemActions };
+export { useRepeatableItemActions };

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

@@ -1,5 +1,5 @@
-import { previewStore } from "../previewStore.js";
 import { blockMutations } from "../../../lib/queries.js";
+import { previewStore } from "../previewStore.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useLocation } from "@tanstack/react-router";

package/dist/features/preview/previewQueryFns.js

@@ -0,0 +1,23 @@
+import { getApiClient } from "../../lib/api-client.js";
+import { seedBlockCaches } from "../../lib/normalized-data.js";
+
+//#region src/features/preview/previewQueryFns.ts
+function pageFullQueryFn(queryClient, path, projectSlug, source) {
+	return async () => {
+		const data = await getApiClient().pages.getByPath({
+			path,
+			projectSlug,
+			source
+		});
+		seedBlockCaches(queryClient, data, source);
+		return {
+			page: data.page,
+			layout: data.layout,
+			projectName: data.projectName,
+			project: data.project
+		};
+	};
+}
+
+//#endregion
+export { pageFullQueryFn };

package/dist/features/preview/previewStore.js

@@ -1,6 +1,6 @@
 import { trackClientEvent } from "../../lib/telemetry-client.js";
-import { toast } from "@camox/ui/toaster";
 import { createStore } from "@xstate/store-react";
+import { toast } from "@camox/ui/toaster";
 
 //#region src/features/preview/previewStore.ts
 /** Extract the blockId from any selection variant. */
@@ -24,19 +24,18 @@ function selectionField(sel) {
 }
 const previewStore = createStore({
 	context: {
-		isPresentationMode: false,
+		isEditMode: false,
+		isToolbarHidden: false,
 		isSidebarOpen: true,
-		isPageContentSheetOpen: false,
-		isAddBlockSheetOpen: false,
+		isPageEditorSidebarOpen: false,
+		isAddBlockSidebarOpen: false,
 		addBlockSource: null,
-		isAgentChatSheetOpen: false,
+		isAgentChatSidebarOpen: false,
 		agentChatPageScaffoldContext: null,
 		isCreatePageModalOpen: false,
 		editingPageId: null,
-		isContentLocked: false,
-		prePreviewLockState: null,
 		isDraftSwitchDialogOpen: false,
-		isMobileMode: false,
+		viewportMode: "full",
 		peekedBlock: null,
 		peekedBlockPosition: null,
 		peekedPagePathname: null,
@@ -47,51 +46,47 @@ const previewStore = createStore({
 		previewSource: "draft"
 	},
 	on: {
-		enterPresentationMode: (context, _, enqueue) => {
-			if (context.isPresentationMode) return context;
+		exitEditMode: (context, _, enqueue) => {
+			if (!context.isEditMode) return context;
 			enqueue.effect(() => {
-				toast("Press ⌘ + Enter to restore Camox Studio", { duration: 2500 });
-				trackClientEvent("presentation_mode_toggled", { enabled: true });
+				trackClientEvent("edit_mode_toggled", { enabled: false });
 			});
 			return {
 				...context,
-				isPresentationMode: true
+				isEditMode: false
 			};
 		},
-		exitPresentationMode: (context, _, enqueue) => {
-			if (!context.isPresentationMode) return context;
+		enterEditMode: (context, _, enqueue) => {
+			if (context.isEditMode) return context;
 			enqueue.effect(() => {
-				trackClientEvent("presentation_mode_toggled", { enabled: false });
+				trackClientEvent("edit_mode_toggled", { enabled: true });
 			});
 			return {
 				...context,
-				isPresentationMode: false
+				isEditMode: true,
+				isSidebarOpen: true
 			};
 		},
-		toggleSidebar: (context) => {
-			if (context.isPresentationMode) return context;
-			return {
-				...context,
-				isSidebarOpen: !context.isSidebarOpen
-			};
-		},
-		toggleLockContent: (context, _, enqueue) => {
-			if (context.previewSource !== "draft") return context;
-			enqueue.effect(() => {
-				toast(context.isContentLocked ? "Enabling edits" : "Preventing edits");
-			});
+		hideToolbar: (context) => ({
+			...context,
+			isToolbarHidden: true
+		}),
+		toggleSidebar: (context) => ({
+			...context,
+			isSidebarOpen: true
+		}),
+		setViewportMode: (context, event) => {
+			if (context.viewportMode === event.mode) return context;
 			return {
 				...context,
-				isContentLocked: !context.isContentLocked
+				viewportMode: event.mode
 			};
 		},
-		toggleMobileMode: (context, _, enqueue) => {
-			enqueue.effect(() => {
-				toast(context.isMobileMode ? "Leaving mobile mode" : "Entering mobile mode");
-			});
+		cycleViewportMode: (context) => {
+			const nextMode = context.viewportMode === "full" ? "tablet" : context.viewportMode === "tablet" ? "mobile" : "full";
 			return {
 				...context,
-				isMobileMode: !context.isMobileMode
+				viewportMode: nextMode
 			};
 		},
 		setPeekedBlock: (context, event) => {
@@ -106,7 +101,7 @@ const previewStore = createStore({
 			...context,
 			peekedBlock: null,
 			peekedBlockPosition: null,
-			isAddBlockSheetOpen: false
+			isAddBlockSidebarOpen: false
 		}),
 		clearPeekedBlock: (context) => ({
 			...context,
@@ -127,7 +122,7 @@ const previewStore = createStore({
 			pendingAgentBlockFocus: null,
 			peekedBlock: null,
 			peekedBlockPosition: null,
-			isAddBlockSheetOpen: false
+			isAddBlockSidebarOpen: false
 		}),
 		focusAgentBlock: (context, event) => ({
 			...context,
@@ -141,7 +136,7 @@ const previewStore = createStore({
 			},
 			peekedBlock: null,
 			peekedBlockPosition: null,
-			isAddBlockSheetOpen: false
+			isAddBlockSidebarOpen: false
 		}),
 		clearPendingAgentBlockFocus: (context, event) => {
 			if (context.pendingAgentBlockFocus?.requestId !== event.requestId) return context;
@@ -222,16 +217,16 @@ const previewStore = createStore({
 			...context,
 			peekedPagePathname: null
 		}),
-		openAddBlockSheet: (context, event) => ({
+		openAddBlockSidebar: (context, event) => ({
 			...context,
-			isAddBlockSheetOpen: true,
+			isAddBlockSidebarOpen: true,
 			addBlockSource: event.via ?? null,
 			peekedBlock: null,
 			peekedBlockPosition: event.afterPosition ?? null
 		}),
-		closeAddBlockSheet: (context) => ({
+		closeAddBlockSidebar: (context) => ({
 			...context,
-			isAddBlockSheetOpen: false,
+			isAddBlockSidebarOpen: false,
 			addBlockSource: null,
 			peekedBlock: null,
 			peekedBlockPosition: null
@@ -243,7 +238,7 @@ const previewStore = createStore({
 				blockId: event.blockId
 			},
 			pendingAgentBlockFocus: null,
-			isAddBlockSheetOpen: false,
+			isAddBlockSidebarOpen: false,
 			peekedBlock: null,
 			peekedBlockPosition: null,
 			skipPeekedBlockExitAnimation: true
@@ -254,13 +249,13 @@ const previewStore = createStore({
 		}),
 		toggleContentSheet: (context) => ({
 			...context,
-			isPageContentSheetOpen: !context.isPageContentSheetOpen
+			isPageEditorSidebarOpen: false
 		}),
 		openBlockContentSheet: (context, event) => {
 			const currentBlockMatches = context.selection?.blockId === event.blockId;
 			return {
 				...context,
-				isPageContentSheetOpen: true,
+				isPageEditorSidebarOpen: false,
 				selection: currentBlockMatches ? context.selection : {
 					type: "block",
 					blockId: event.blockId
@@ -269,15 +264,15 @@ const previewStore = createStore({
 		},
 		closeBlockContentSheet: (context) => ({
 			...context,
-			isPageContentSheetOpen: false
+			isPageEditorSidebarOpen: false
 		}),
-		openAgentChatSheet: (context, event, enqueue) => {
+		openAgentChatSidebar: (context, event, enqueue) => {
 			const pageScaffoldContext = event?.pageScaffoldContext;
-			if (context.isAgentChatSheetOpen && !pageScaffoldContext) return context;
+			if (context.isAgentChatSidebarOpen && !pageScaffoldContext) return context;
 			enqueue.effect(() => trackClientEvent("agent_chat_opened"));
 			return {
 				...context,
-				isAgentChatSheetOpen: true,
+				isAgentChatSidebarOpen: true,
 				agentChatPageScaffoldContext: pageScaffoldContext ? {
 					id: Date.now(),
 					nickname: pageScaffoldContext.nickname,
@@ -285,9 +280,9 @@ const previewStore = createStore({
 				} : context.agentChatPageScaffoldContext
 			};
 		},
-		closeAgentChatSheet: (context) => ({
+		closeAgentChatSidebar: (context) => ({
 			...context,
-			isAgentChatSheetOpen: false
+			isAgentChatSidebarOpen: false
 		}),
 		clearAgentChatPageScaffoldContext: (context) => ({
 			...context,
@@ -322,18 +317,6 @@ const previewStore = createStore({
 			enqueue.effect(() => {
 				toast(event.source === "draft" ? "Previewing draft content" : "Previewing live content", { duration: 2500 });
 			});
-			if (event.source !== "draft" && context.previewSource === "draft") return {
-				...context,
-				previewSource: event.source,
-				prePreviewLockState: context.isContentLocked,
-				isContentLocked: true
-			};
-			if (event.source === "draft" && context.previewSource !== "draft") return {
-				...context,
-				previewSource: "draft",
-				isContentLocked: context.prePreviewLockState ?? false,
-				prePreviewLockState: null
-			};
 			return {
 				...context,
 				previewSource: event.source