camox 0.41.0 → 0.42.0

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

@@ -1,7 +1,6 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { getApiClient } from "../../../lib/api-client.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
-import { previewStore } from "../previewStore.js";
+import { previewStore, selectPreviewSource } from "../previewStore.js";
 import { buildPublicationPlan, getPublicationCapabilities, getPublicationRequest } from "../publication.js";
 import { PublishDialog } from "./PublishDialog.js";
 import { c } from "react/compiler-runtime";
@@ -20,9 +19,9 @@ import { ButtonGroup } from "@camox/ui/button-group";
 //#region src/features/preview/components/PublicationRow.tsx
 function PublicationRow(t0) {
 	const $ = c(4);
-	if ($[0] !== "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9") {
+	if ($[0] !== "523b5f62d51c452de4fc84846c3eb3bd79ec8b996291e394294cbc9a83e20848") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9";
+		$[0] = "523b5f62d51c452de4fc84846c3eb3bd79ec8b996291e394294cbc9a83e20848";
 	}
 	const { target } = t0;
 	const identity = target ? `${target.kind}:${target.kind === "page" ? target.page.id : target.layout.id}` : "loading";
@@ -37,12 +36,12 @@ function PublicationRow(t0) {
 }
 function PublicationControls(t0) {
 	const $ = c(78);
-	if ($[0] !== "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9") {
+	if ($[0] !== "523b5f62d51c452de4fc84846c3eb3bd79ec8b996291e394294cbc9a83e20848") {
 		for (let $i = 0; $i < 78; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9";
+		$[0] = "523b5f62d51c452de4fc84846c3eb3bd79ec8b996291e394294cbc9a83e20848";
 	}
 	const { target } = t0;
-	const source = useSelector(previewStore, _temp);
+	const source = useSelector(previewStore, selectPreviewSource);
 	const queryClient = useQueryClient();
 	const [action, setAction] = React.useState(null);
 	let t1;
@@ -74,10 +73,6 @@ function PublicationControls(t0) {
 					return;
 				}
 				await api.pages.publish(request.input);
-				trackClientEvent("page_published", {
-					pageId: request.input.id,
-					...request.input.alsoPublishLayout ? { alsoPublishedLayout: true } : {}
-				});
 				return;
 			}
 			if (target.kind === "layout") {
@@ -86,11 +81,9 @@ function PublicationControls(t0) {
 			}
 			if (operation === "discard") {
 				await api.pages.discardChanges({ id: target.page.id });
-				trackClientEvent("page_changes_discarded", { pageId: target.page.id });
 				return;
 			}
 			await api.pages.unpublish({ id: target.page.id });
-			trackClientEvent("page_unpublished", { pageId: target.page.id });
 		};
 		$[6] = capabilities;
 		$[7] = target;
@@ -100,10 +93,7 @@ function PublicationControls(t0) {
 	if ($[9] !== queryClient) {
 		t4 = async (_, t5) => {
 			const { operation: operation_0 } = t5;
-			if (operation_0 !== "publish") previewStore.send({
-				type: "setPreviewSource",
-				source: "draft"
-			});
+			if (operation_0 !== "publish") previewStore.send({ type: "viewDraftPage" });
 			setAction(null);
 			toast.success(operation_0 === "publish" ? "Published selected changes" : operation_0 === "unpublish" ? "Unpublished successfully" : "Discarded draft changes");
 			await Promise.all([
@@ -130,7 +120,7 @@ function PublicationControls(t0) {
 		t5 = {
 			mutationFn: t3,
 			onSuccess: t4,
-			onError: _temp2
+			onError: _temp
 		};
 		$[11] = t3;
 		$[12] = t4;
@@ -180,7 +170,7 @@ function PublicationControls(t0) {
 			});
 			return () => actionsStore.send({
 				type: "unregisterManyActions",
-				ids: actions.map(_temp3)
+				ids: actions.map(_temp2)
 			});
 		};
 		t7 = [
@@ -417,15 +407,12 @@ function PublicationControls(t0) {
 	} else t33 = $[77];
 	return t33;
 }
-function _temp3(item) {
+function _temp2(item) {
 	return item.id;
 }
-function _temp2() {
+function _temp() {
 	return toast.error("Could not complete this action. Please try again.");
 }
-function _temp(state) {
-	return state.context.previewSource;
-}
 
 //#endregion
 export { PublicationRow };

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

@@ -1,7 +1,8 @@
-import { previewStore, selectionBlockId } from "../previewStore.js";
+import { previewStore, selectIsCommentMode, selectionBlockId } from "../previewStore.js";
 import { AddBlockSidebar } from "./AddBlockSidebar.js";
 import { PageEditorSidebar } from "./PageEditorSidebar.js";
 import { PageInfoSidebar } from "./PageInfoSidebar.js";
+import { CommentSidebar } from "./CommentSidebar.js";
 import { DerivedPageInfoSidebar } from "./DerivedPageInfoSidebar.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -9,14 +10,15 @@ import { useSelector } from "@xstate/store-react";
 
 //#region src/features/preview/components/RightSidebar.tsx
 const RightSidebar = (t0) => {
-	const $ = c(9);
-	if ($[0] !== "d71e54add8a0890703a029e4ca30b5b8fa7b144767455a2e03c5c0c217ac64a0") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d71e54add8a0890703a029e4ca30b5b8fa7b144767455a2e03c5c0c217ac64a0";
+	const $ = c(10);
+	if ($[0] !== "3a6f3cf40d082faeaea258269c927ca17e318c22f0c389df569e2bea3318461a") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "3a6f3cf40d082faeaea258269c927ca17e318c22f0c389df569e2bea3318461a";
 	}
 	const { pageId, derivedLayoutId } = t0;
 	const selection = useSelector(previewStore, _temp);
 	const isAddBlockSidebarOpen = useSelector(previewStore, _temp2);
+	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 	let t1;
 	if ($[1] !== selection) {
 		t1 = selectionBlockId(selection);
@@ -31,18 +33,19 @@ const RightSidebar = (t0) => {
 		$[3] = t2;
 	} else t2 = $[3];
 	let t3;
-	if ($[4] !== derivedLayoutId || $[5] !== isAddBlockSidebarOpen || $[6] !== pageId || $[7] !== selectedBlockId) {
+	if ($[4] !== derivedLayoutId || $[5] !== isAddBlockSidebarOpen || $[6] !== isCommentMode || $[7] !== pageId || $[8] !== selectedBlockId) {
 		t3 = /* @__PURE__ */ jsx("aside", {
 			className: "bg-background relative flex shrink-0 flex-col border-l-2",
 			style: t2,
-			children: pageId != null && isAddBlockSidebarOpen ? /* @__PURE__ */ jsx(AddBlockSidebar, {}) : selectedBlockId != null ? /* @__PURE__ */ jsx(PageEditorSidebar, {}) : pageId != null ? /* @__PURE__ */ jsx(PageInfoSidebar, { pageId }) : /* @__PURE__ */ jsx(DerivedPageInfoSidebar, { layoutId: derivedLayoutId })
+			children: pageId != null && isCommentMode ? /* @__PURE__ */ jsx(CommentSidebar, { pageId }, pageId) : pageId != null && isAddBlockSidebarOpen ? /* @__PURE__ */ jsx(AddBlockSidebar, {}) : selectedBlockId != null ? /* @__PURE__ */ jsx(PageEditorSidebar, { pageId }) : pageId != null ? /* @__PURE__ */ jsx(PageInfoSidebar, { pageId }) : /* @__PURE__ */ jsx(DerivedPageInfoSidebar, { layoutId: derivedLayoutId })
 		});
 		$[4] = derivedLayoutId;
 		$[5] = isAddBlockSidebarOpen;
-		$[6] = pageId;
-		$[7] = selectedBlockId;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[6] = isCommentMode;
+		$[7] = pageId;
+		$[8] = selectedBlockId;
+		$[9] = t3;
+	} else t3 = $[9];
 	return t3;
 };
 function _temp(state) {

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

@@ -0,0 +1,121 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/preview/components/SidebarSection.tsx
+function SidebarSection(t0) {
+	const $ = c(12);
+	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
+		for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
+	}
+	let className;
+	let props;
+	let t1;
+	if ($[1] !== t0) {
+		({divider: t1, className, ...props} = t0);
+		$[1] = t0;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const divider = t1 === void 0 ? "none" : t1;
+	const t2 = divider === "top" && "border-t";
+	const t3 = divider === "bottom" && "border-b";
+	let t4;
+	if ($[5] !== className || $[6] !== t2 || $[7] !== t3) {
+		t4 = cn("border-border space-y-4 px-2 py-4", t2, t3, className);
+		$[5] = className;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx("section", {
+			className: t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function SidebarSectionHeader(t0) {
+	const $ = c(9);
+	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
+	}
+	let className;
+	let props;
+	if ($[1] !== t0) {
+		({className, ...props} = t0);
+		$[1] = t0;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("text-muted-foreground flex items-center gap-2 text-sm leading-none font-medium", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("h3", {
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+function SidebarSectionContent(t0) {
+	const $ = c(9);
+	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
+	}
+	let className;
+	let props;
+	if ($[1] !== t0) {
+		({className, ...props} = t0);
+		$[1] = t0;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("space-y-4", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+
+//#endregion
+export { SidebarSection, SidebarSectionContent, SidebarSectionHeader };

package/dist/features/preview/previewCommentsStore.js

@@ -0,0 +1,115 @@
+import { previewStore } from "./previewStore.js";
+import { createStore } from "@xstate/store-react";
+
+//#region src/features/preview/previewCommentsStore.ts
+function revealCommentTarget(target) {
+	previewStore.send({
+		type: "setCommentMode",
+		enabled: false
+	});
+	previewStore.send({ type: "closeAddBlockSidebar" });
+	previewStore.send({ type: "clearPeekedBlock" });
+	if (target.blockId == null) {
+		previewStore.send({
+			type: "setSelection",
+			selection: null
+		});
+		return;
+	}
+	if (target.fieldName != null) {
+		previewStore.send({
+			type: "setSelection",
+			selection: target.itemId == null ? {
+				type: "block-field",
+				blockId: target.blockId,
+				fieldName: target.fieldName,
+				fieldType: target.fieldType ?? "String"
+			} : {
+				type: "item-field",
+				blockId: target.blockId,
+				itemId: target.itemId,
+				fieldName: target.fieldName,
+				fieldType: target.fieldType ?? "String"
+			}
+		});
+		return;
+	}
+	previewStore.send({
+		type: "setSelection",
+		selection: target.itemId == null ? {
+			type: "block",
+			blockId: target.blockId
+		} : {
+			type: "item",
+			blockId: target.blockId,
+			itemId: target.itemId
+		}
+	});
+}
+/** UI prototype only: comments live in memory, scoped to their originating page. */
+const previewCommentsStore = createStore({
+	context: {
+		comments: [],
+		draft: null,
+		activeId: null,
+		focusTarget: null
+	},
+	on: {
+		startComment: (context, event) => ({
+			...context,
+			draft: {
+				pageId: event.pageId,
+				target: event.target,
+				message: ""
+			},
+			activeId: null,
+			focusTarget: event.focusComposer ? event.target : null
+		}),
+		composerFocused: (context) => ({
+			...context,
+			focusTarget: null
+		}),
+		setMessage: (context, event) => ({
+			...context,
+			draft: context.draft ? {
+				...context.draft,
+				message: event.message
+			} : null
+		}),
+		postComment: (context, event) => {
+			const draft = context.draft;
+			if (!draft?.message.trim()) return context;
+			return {
+				...context,
+				comments: [...context.comments, {
+					...draft,
+					id: event.id,
+					message: draft.message.trim(),
+					author: event.author,
+					createdAt: event.createdAt
+				}],
+				draft: null,
+				activeId: event.id,
+				focusTarget: null
+			};
+		},
+		selectComment: (context, event) => ({
+			...context,
+			activeId: event.id
+		}),
+		cancelDraft: (context) => ({
+			...context,
+			draft: null,
+			focusTarget: null
+		}),
+		clearSelection: (context) => ({
+			...context,
+			draft: null,
+			activeId: null,
+			focusTarget: null
+		})
+	}
+});
+
+//#endregion
+export { previewCommentsStore, revealCommentTarget };

package/dist/features/preview/previewSelection.js

@@ -0,0 +1,75 @@
+import { previewStore, selectIsCommentMode, selectIsEditMode } from "./previewStore.js";
+import { previewCommentsStore, revealCommentTarget } from "./previewCommentsStore.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+
+//#region src/features/preview/previewSelection.ts
+const PreviewPageContext = createContext(null);
+/** Both editing and commenting use the target already known by the editable component. */
+function selectPreviewTarget(selection, pageId, event) {
+	const snapshot = previewStore.getSnapshot();
+	if (!selectIsEditMode(snapshot)) return;
+	if (!selectIsCommentMode(snapshot)) {
+		if (selection.type === "block") {
+			previewStore.send({
+				type: "setFocusedBlock",
+				blockId: selection.blockId
+			});
+			return;
+		}
+		previewStore.send({
+			type: "setSelection",
+			selection
+		});
+		return;
+	}
+	if (!event) return;
+	event.preventDefault();
+	event.stopPropagation();
+	if (pageId === null) return;
+	const element = event.currentTarget;
+	const rect = element.getBoundingClientRect();
+	const field = selection.type === "block-field" || selection.type === "item-field";
+	const itemId = "itemId" in selection ? selection.itemId : void 0;
+	const attribute = field ? "data-camox-field-id" : selection.type === "item" ? "data-camox-repeater-item-id" : element.hasAttribute("data-camox-comment-block-id") ? "data-camox-comment-block-id" : "data-camox-block-id";
+	const id = field ? [
+		selection.blockId,
+		itemId,
+		selection.fieldName
+	].filter((part) => part != null).join("__") : String(itemId ?? selection.blockId);
+	const target = {
+		blockId: selection.blockId,
+		itemId,
+		fieldName: field ? selection.fieldName : void 0,
+		fieldType: field ? selection.fieldType : void 0,
+		selector: `[${attribute}="${CSS.escape(id)}"]`,
+		label: field ? `Field · ${selection.fieldName}` : `${selection.type === "item" ? "Item" : "Block"} · ${id}`,
+		x: event.clientX == null ? .5 : Math.max(0, Math.min(1, (event.clientX - rect.left) / (rect.width || 1))),
+		y: event.clientY == null ? .5 : Math.max(0, Math.min(1, (event.clientY - rect.top) / (rect.height || 1)))
+	};
+	previewCommentsStore.send({
+		type: "startComment",
+		pageId,
+		target,
+		focusComposer: true
+	});
+	revealCommentTarget(target);
+}
+function usePreviewSelection() {
+	const $ = c(3);
+	if ($[0] !== "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6";
+	}
+	const pageId = useContext(PreviewPageContext);
+	let t0;
+	if ($[1] !== pageId) {
+		t0 = (selection, event) => selectPreviewTarget(selection, pageId, event);
+		$[1] = pageId;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+
+//#endregion
+export { PreviewPageContext, usePreviewSelection };

package/dist/features/preview/previewStore.js

@@ -1,4 +1,4 @@
-import { trackClientEvent } from "../../lib/telemetry-client.js";
+import { areCommentsEnabled } from "./commentsEnabled.js";
 import { createStore } from "@xstate/store-react";
 import { toast } from "@camox/ui/toaster";
 
@@ -22,43 +22,46 @@ function selectionField(sel) {
 	};
 	return null;
 }
+const selectIsCommentMode = (state) => state.context.mode === "commenting-draft";
+/** Commenting is a draft-only editing submode. */
+const selectIsEditMode = (state) => state.context.mode === "editing-draft" || selectIsCommentMode(state);
+const selectPreviewSource = (state) => state.context.mode === "previewing-live" ? "live" : "draft";
 const previewStore = createStore({
 	context: {
-		isEditMode: false,
+		mode: "previewing-draft",
 		isToolbarHidden: false,
-		isPageEditorSidebarOpen: false,
 		isAddBlockSidebarOpen: false,
-		addBlockSource: null,
 		isCreatePageModalOpen: false,
 		editingPageId: null,
-		isDraftSwitchDialogOpen: false,
 		viewportMode: "full",
 		peekedBlock: null,
 		peekedBlockPosition: null,
 		skipPeekedBlockExitAnimation: false,
 		selection: null,
-		iframeElement: null,
-		previewSource: "draft"
+		iframeElement: null
 	},
 	on: {
-		exitEditMode: (context, _, enqueue) => {
-			if (!context.isEditMode) return context;
-			enqueue.effect(() => {
-				trackClientEvent("edit_mode_toggled", { enabled: false });
-			});
+		setCommentMode: (context, event) => {
+			if (!selectIsEditMode({ context })) return context;
+			const commenting = areCommentsEnabled() && event.enabled;
 			return {
 				...context,
-				isEditMode: false
+				mode: commenting ? "commenting-draft" : "editing-draft",
+				selection: commenting ? null : context.selection
 			};
 		},
-		enterEditMode: (context, _, enqueue) => {
-			if (context.isEditMode) return context;
-			enqueue.effect(() => {
-				trackClientEvent("edit_mode_toggled", { enabled: true });
-			});
+		exitEditMode: (context) => {
+			if (!selectIsEditMode({ context })) return context;
 			return {
 				...context,
-				isEditMode: true,
+				mode: "previewing-draft"
+			};
+		},
+		enterEditMode: (context) => {
+			if (selectIsEditMode({ context })) return context;
+			return {
+				...context,
+				mode: "editing-draft",
 				isToolbarHidden: false
 			};
 		},
@@ -68,14 +71,12 @@ const previewStore = createStore({
 		}),
 		viewLivePage: (context, _, enqueue) => {
 			enqueue.effect(() => {
-				if (context.isEditMode) trackClientEvent("edit_mode_toggled", { enabled: false });
 				toast("Viewing live version of the site");
 			});
 			return {
 				...context,
-				isEditMode: false,
-				isToolbarHidden: true,
-				previewSource: "live"
+				mode: "previewing-live",
+				isToolbarHidden: true
 			};
 		},
 		setViewportMode: (context, event) => {
@@ -186,14 +187,12 @@ const previewStore = createStore({
 		openAddBlockSidebar: (context, event) => ({
 			...context,
 			isAddBlockSidebarOpen: true,
-			addBlockSource: event.via ?? null,
 			peekedBlock: null,
 			peekedBlockPosition: event.afterPosition ?? null
 		}),
 		closeAddBlockSidebar: (context) => ({
 			...context,
 			isAddBlockSidebarOpen: false,
-			addBlockSource: null,
 			peekedBlock: null,
 			peekedBlockPosition: null
 		}),
@@ -212,25 +211,6 @@ const previewStore = createStore({
 			...context,
 			skipPeekedBlockExitAnimation: false
 		}),
-		toggleContentSheet: (context) => ({
-			...context,
-			isPageEditorSidebarOpen: false
-		}),
-		openBlockContentSheet: (context, event) => {
-			const currentBlockMatches = context.selection?.blockId === event.blockId;
-			return {
-				...context,
-				isPageEditorSidebarOpen: false,
-				selection: currentBlockMatches ? context.selection : {
-					type: "block",
-					blockId: event.blockId
-				}
-			};
-		},
-		closeBlockContentSheet: (context) => ({
-			...context,
-			isPageEditorSidebarOpen: false
-		}),
 		openCreatePageModal: (context) => ({
 			...context,
 			isCreatePageModalOpen: true
@@ -239,9 +219,8 @@ const previewStore = createStore({
 			...context,
 			isCreatePageModalOpen: false
 		}),
-		openEditPageModal: (context, event, enqueue) => {
+		openEditPageModal: (context, event) => {
 			if (context.editingPageId === event.pageId) return context;
-			enqueue.effect(() => trackClientEvent("page_editor_opened", { pageId: event.pageId }));
 			return {
 				...context,
 				editingPageId: event.pageId
@@ -255,29 +234,19 @@ const previewStore = createStore({
 			...context,
 			iframeElement: event.element
 		}),
-		setPreviewSource: (context, event, enqueue) => {
-			if (event.source === context.previewSource) return context;
+		viewDraftPage: (context, _, enqueue) => {
+			if (context.mode !== "previewing-live") return context;
 			enqueue.effect(() => {
-				toast(event.source === "draft" ? "Previewing draft content" : "Previewing live content", { duration: 2500 });
+				toast("Previewing draft content", { duration: 2500 });
 			});
 			return {
 				...context,
-				previewSource: event.source
-			};
-		},
-		requestDraftSwitch: (context) => {
-			if (context.previewSource === "draft") return context;
-			return {
-				...context,
-				isDraftSwitchDialogOpen: true
+				mode: "previewing-draft",
+				isToolbarHidden: false
 			};
-		},
-		dismissDraftSwitch: (context) => ({
-			...context,
-			isDraftSwitchDialogOpen: false
-		})
+		}
 	}
 });
 
 //#endregion
-export { previewStore, selectionBlockId, selectionField, selectionItemId };
+export { previewStore, selectIsCommentMode, selectIsEditMode, selectPreviewSource, selectionBlockId, selectionField, selectionItemId };