camox 0.42.0 → 0.44.0

package/dist/features/preview/CamoxPreview.js

@@ -4,11 +4,13 @@ import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
 import { getApiClient } from "../../lib/api-client.js";
 import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
 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 { blockQueries } from "../../lib/queries.js";
+import { usePageDestinations } from "../../hooks/use-page-destinations.js";
+import { cn } from "../../lib/utils.js";
 import { SharedChromeContext } from "../runtime/SharedChromeContext.js";
-import { previewStore, selectIsEditMode, selectPreviewSource } from "./previewStore.js";
+import { areCommentsEnabled } from "./commentsEnabled.js";
+import { previewStore, selectIsCommentMode, selectIsEditMode, selectPreviewSource } from "./previewStore.js";
 import { Navbar } from "../studio/components/Navbar.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { EDIT_MODE_SHORTCUT } from "./previewConstants.js";
@@ -18,7 +20,7 @@ import { PreviewPanel } from "./components/PreviewPanel.js";
 import { PreviewToolbarSpacer } from "./components/PreviewToolbarSpacer.js";
 import { RightSidebar } from "./components/RightSidebar.js";
 import { c } from "react/compiler-runtime";
-import { useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
@@ -36,9 +38,9 @@ function getMobileStudioSnapshot() {
 }
 function useIsMobileStudio() {
 	const $ = c(1);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	return React.useSyncExternalStore(subscribeToMobileStudio, getMobileStudioSnapshot, _temp);
 }
@@ -71,9 +73,9 @@ function pageStructureQueryFn(path, projectSlug, source) {
 }
 function usePreviewedPage() {
 	const $ = c(11);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
 		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const { pathname } = useLocation();
 	const projectSlug = useProjectSlug();
@@ -109,9 +111,9 @@ function usePreviewedPage() {
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
 	const previewSource = useSelector(previewStore, selectPreviewSource);
@@ -254,9 +256,9 @@ const PageContent = () => {
 };
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -307,9 +309,9 @@ function useHydrateDraftCache() {
 function _temp2() {}
 const CamoxPreview = (t0) => {
 	const $ = c(4);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const { children } = t0;
 	const pageData = usePreviewedPage();
@@ -328,10 +330,10 @@ const CamoxPreview = (t0) => {
 };
 /** Studio chrome is shared; only curated previews require a Camox page record. */
 const PreviewShell = (t0) => {
-	const $ = c(59);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
-		for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+	const $ = c(61);
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
+		for (let $i = 0; $i < 61; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const { children, pageData, hasLiveVersion: t1, derivedLayoutId, derivedLayout } = t0;
 	const hasLiveVersion = t1 === void 0 ? false : t1;
@@ -339,6 +341,7 @@ const PreviewShell = (t0) => {
 	const isMobileStudio = useIsMobileStudio();
 	const sharedChrome = React.useContext(SharedChromeContext);
 	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 	const isToolbarHidden = useSelector(previewStore, _temp3);
 	const isAddBlockSidebarOpen = useSelector(previewStore, _temp4);
 	const previewSource = useSelector(previewStore, selectPreviewSource);
@@ -362,7 +365,7 @@ const PreviewShell = (t0) => {
 	React.useEffect(t2, t3);
 	let t4;
 	let t5;
-	if ($[4] !== hasLiveCheckpoint || $[5] !== isAuthenticated || $[6] !== isEditMode || $[7] !== isMobileStudio || $[8] !== previewSource) {
+	if ($[4] !== hasLiveCheckpoint || $[5] !== isAuthenticated || $[6] !== isCommentMode || $[7] !== isEditMode || $[8] !== isMobileStudio || $[9] !== pageData || $[10] !== previewSource) {
 		t4 = () => {
 			const actions = [
 				{
@@ -392,6 +395,25 @@ const PreviewShell = (t0) => {
 					execute: _temp6,
 					shortcut: EDIT_MODE_SHORTCUT
 				},
+				{
+					id: "enter-comment-mode",
+					label: "Leave feedback",
+					aliases: [
+						"Comment",
+						"Comment mode",
+						"Show feedback"
+					],
+					groupLabel: "Preview",
+					checkIfAvailable: () => isAuthenticated && !isMobileStudio && pageData != null && areCommentsEnabled() && !isCommentMode,
+					execute: () => {
+						if (!isEditMode) previewStore.send({ type: "enterEditMode" });
+						previewStore.send({
+							type: "setCommentMode",
+							enabled: true
+						});
+					},
+					shortcut: { key: "c" }
+				},
 				{
 					id: "preview-live-content",
 					label: "Preview live content",
@@ -447,43 +469,47 @@ const PreviewShell = (t0) => {
 		};
 		t5 = [
 			isEditMode,
+			isCommentMode,
 			isAuthenticated,
 			isMobileStudio,
+			pageData,
 			previewSource,
 			hasLiveCheckpoint
 		];
 		$[4] = hasLiveCheckpoint;
 		$[5] = isAuthenticated;
-		$[6] = isEditMode;
-		$[7] = isMobileStudio;
-		$[8] = previewSource;
-		$[9] = t4;
-		$[10] = t5;
+		$[6] = isCommentMode;
+		$[7] = isEditMode;
+		$[8] = isMobileStudio;
+		$[9] = pageData;
+		$[10] = previewSource;
+		$[11] = t4;
+		$[12] = t5;
 	} else {
-		t4 = $[9];
-		t5 = $[10];
+		t4 = $[11];
+		t5 = $[12];
 	}
 	React.useEffect(t4, t5);
 	if (!isAuthenticated) {
 		let t6;
-		if ($[11] !== children) {
+		if ($[13] !== children) {
 			t6 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[11] = children;
-			$[12] = t6;
-		} else t6 = $[12];
+			$[13] = children;
+			$[14] = t6;
+		} else t6 = $[14];
 		return t6;
 	}
 	const t6 = sharedChrome ? "h-full" : "h-screen";
 	const t7 = !isEditMode && "bg-black";
 	let t8;
-	if ($[13] !== t6 || $[14] !== t7) {
+	if ($[15] !== t6 || $[16] !== t7) {
 		t8 = cn("bg-background flex flex-col overflow-hidden", t6, t7);
-		$[13] = t6;
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[16] !== isAddBlockSidebarOpen || $[17] !== isMobileStudio || $[18] !== isToolbarHidden || $[19] !== pageData || $[20] !== sharedChrome) {
+	if ($[18] !== isAddBlockSidebarOpen || $[19] !== isMobileStudio || $[20] !== isToolbarHidden || $[21] !== pageData || $[22] !== sharedChrome) {
 		t9 = !sharedChrome && !isMobileStudio && !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ jsx(Navbar, { isPreview: true }), pageData && isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
@@ -492,15 +518,15 @@ const PreviewShell = (t0) => {
 				onClick: _temp10
 			})]
 		});
-		$[16] = isAddBlockSidebarOpen;
-		$[17] = isMobileStudio;
-		$[18] = isToolbarHidden;
-		$[19] = pageData;
-		$[20] = sharedChrome;
-		$[21] = t9;
-	} else t9 = $[21];
+		$[18] = isAddBlockSidebarOpen;
+		$[19] = isMobileStudio;
+		$[20] = isToolbarHidden;
+		$[21] = pageData;
+		$[22] = sharedChrome;
+		$[23] = t9;
+	} else t9 = $[23];
 	let t10;
-	if ($[22] !== derivedLayout || $[23] !== derivedLayoutId || $[24] !== isEditMode || $[25] !== isMobileStudio || $[26] !== pageData) {
+	if ($[24] !== derivedLayout || $[25] !== derivedLayoutId || $[26] !== isEditMode || $[27] !== isMobileStudio || $[28] !== pageData) {
 		t10 = !isMobileStudio && (pageData || derivedLayoutId) && /* @__PURE__ */ jsx("div", {
 			className: isEditMode ? "contents" : "hidden",
 			children: /* @__PURE__ */ jsx(LeftSidebar, {
@@ -508,38 +534,38 @@ const PreviewShell = (t0) => {
 				derivedLayout
 			})
 		});
-		$[22] = derivedLayout;
-		$[23] = derivedLayoutId;
-		$[24] = isEditMode;
-		$[25] = isMobileStudio;
-		$[26] = pageData;
-		$[27] = t10;
-	} else t10 = $[27];
+		$[24] = derivedLayout;
+		$[25] = derivedLayoutId;
+		$[26] = isEditMode;
+		$[27] = isMobileStudio;
+		$[28] = pageData;
+		$[29] = t10;
+	} else t10 = $[29];
 	const t11 = pageData?.page;
 	const t12 = pageData?.projectName;
 	const t13 = pageData?.page.id;
 	const t14 = pageData?.page.status;
 	let t15;
-	if ($[28] !== hasLiveCheckpoint || $[29] !== t13 || $[30] !== t14) {
+	if ($[30] !== hasLiveCheckpoint || $[31] !== t13 || $[32] !== t14) {
 		t15 = {
 			pageId: t13,
 			pageStatus: t14,
 			hasLiveVersion: hasLiveCheckpoint
 		};
-		$[28] = hasLiveCheckpoint;
-		$[29] = t13;
-		$[30] = t14;
-		$[31] = t15;
-	} else t15 = $[31];
+		$[30] = hasLiveCheckpoint;
+		$[31] = t13;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
 	let t16;
-	if ($[32] !== isEditMode || $[33] !== isMobileStudio) {
+	if ($[34] !== isEditMode || $[35] !== isMobileStudio) {
 		t16 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(PreviewToolbarSpacer, {});
-		$[32] = isEditMode;
-		$[33] = isMobileStudio;
-		$[34] = t16;
-	} else t16 = $[34];
+		$[34] = isEditMode;
+		$[35] = isMobileStudio;
+		$[36] = t16;
+	} else t16 = $[36];
 	let t17;
-	if ($[35] !== children || $[36] !== isMobileStudio || $[37] !== t11 || $[38] !== t12 || $[39] !== t15 || $[40] !== t16) {
+	if ($[37] !== children || $[38] !== isMobileStudio || $[39] !== t11 || $[40] !== t12 || $[41] !== t15 || $[42] !== t16) {
 		t17 = /* @__PURE__ */ jsxs(PreviewPanel, {
 			isMobileExperience: isMobileStudio,
 			page: t11,
@@ -547,28 +573,28 @@ const PreviewShell = (t0) => {
 			toolbarProps: t15,
 			children: [children, t16]
 		});
-		$[35] = children;
-		$[36] = isMobileStudio;
-		$[37] = t11;
-		$[38] = t12;
-		$[39] = t15;
-		$[40] = t16;
-		$[41] = t17;
-	} else t17 = $[41];
+		$[37] = children;
+		$[38] = isMobileStudio;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t15;
+		$[42] = t16;
+		$[43] = t17;
+	} else t17 = $[43];
 	let t18;
-	if ($[42] !== derivedLayoutId || $[43] !== isEditMode || $[44] !== isMobileStudio || $[45] !== pageData?.page) {
+	if ($[44] !== derivedLayoutId || $[45] !== isEditMode || $[46] !== isMobileStudio || $[47] !== pageData?.page) {
 		t18 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(RightSidebar, {
 			pageId: pageData?.page.id,
 			derivedLayoutId
 		});
-		$[42] = derivedLayoutId;
-		$[43] = isEditMode;
-		$[44] = isMobileStudio;
-		$[45] = pageData?.page;
-		$[46] = t18;
-	} else t18 = $[46];
+		$[44] = derivedLayoutId;
+		$[45] = isEditMode;
+		$[46] = isMobileStudio;
+		$[47] = pageData?.page;
+		$[48] = t18;
+	} else t18 = $[48];
 	let t19;
-	if ($[47] !== t10 || $[48] !== t17 || $[49] !== t18) {
+	if ($[49] !== t10 || $[50] !== t17 || $[51] !== t18) {
 		t19 = /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full flex-row items-stretch",
 			children: [
@@ -577,20 +603,20 @@ const PreviewShell = (t0) => {
 				t18
 			]
 		});
-		$[47] = t10;
-		$[48] = t17;
-		$[49] = t18;
-		$[50] = t19;
-	} else t19 = $[50];
+		$[49] = t10;
+		$[50] = t17;
+		$[51] = t18;
+		$[52] = t19;
+	} else t19 = $[52];
 	let t20;
-	if ($[51] !== isEditMode || $[52] !== isMobileStudio) {
+	if ($[53] !== isEditMode || $[54] !== isMobileStudio) {
 		t20 = (isMobileStudio || isEditMode) && /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[51] = isEditMode;
-		$[52] = isMobileStudio;
-		$[53] = t20;
-	} else t20 = $[53];
+		$[53] = isEditMode;
+		$[54] = isMobileStudio;
+		$[55] = t20;
+	} else t20 = $[55];
 	let t21;
-	if ($[54] !== t19 || $[55] !== t20 || $[56] !== t8 || $[57] !== t9) {
+	if ($[56] !== t19 || $[57] !== t20 || $[58] !== t8 || $[59] !== t9) {
 		t21 = /* @__PURE__ */ jsxs("div", {
 			className: t8,
 			children: [
@@ -599,53 +625,28 @@ const PreviewShell = (t0) => {
 				t20
 			]
 		});
-		$[54] = t19;
-		$[55] = t20;
-		$[56] = t8;
-		$[57] = t9;
-		$[58] = t21;
-	} else t21 = $[58];
+		$[56] = t19;
+		$[57] = t20;
+		$[58] = t8;
+		$[59] = t9;
+		$[60] = t21;
+	} else t21 = $[60];
 	return t21;
 };
 function usePreviewPagesActions() {
-	const $ = c(13);
-	if ($[0] !== "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c1ecb280688848a0300c65af5bc156d964441b9c769c2e406123217a6e83b30b";
+	const $ = c(6);
+	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
-	const projectSlug = useProjectSlug();
+	const pages = usePageDestinations();
 	let t0;
-	if ($[1] !== projectSlug) {
-		t0 = projectQueries.getBySlug(projectSlug);
-		$[1] = projectSlug;
-		$[2] = t0;
-	} else t0 = $[2];
-	const { data: project } = useQuery(t0);
 	let t1;
-	if ($[3] !== project?.id) {
-		t1 = pageQueries.list(project?.id ?? 0);
-		$[3] = project?.id;
-		$[4] = t1;
-	} else t1 = $[4];
-	const t2 = !!project;
-	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = {
-			...t1,
-			enabled: t2
-		};
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	const { data: pages } = useQuery(t3);
-	let t4;
-	let t5;
-	if ($[8] !== navigate || $[9] !== pages || $[10] !== pathname) {
-		t4 = () => {
-			const currentPage = pages?.find((p) => p.fullPath === pathname);
+	if ($[1] !== navigate || $[2] !== pages || $[3] !== pathname) {
+		t0 = () => {
+			const currentPage = pages.find((p) => p.kind === "curated" && p.fullPath === pathname);
 			const actions = [
 				{
 					id: "create-page",
@@ -664,12 +665,12 @@ function usePreviewPagesActions() {
 						"Page metadata"
 					],
 					groupLabel: "Preview",
-					checkIfAvailable: () => !!currentPage,
+					checkIfAvailable: () => currentPage?.kind === "curated",
 					execute: () => {
-						if (!currentPage) return;
+						if (currentPage?.kind !== "curated") return;
 						previewStore.send({
 							type: "openEditPageModal",
-							pageId: currentPage.id
+							pageId: currentPage.pageId
 						});
 					}
 				},
@@ -682,18 +683,19 @@ function usePreviewPagesActions() {
 						"Switch page"
 					],
 					groupLabel: "Preview",
-					checkIfAvailable: () => !!pages,
+					checkIfAvailable: () => pages.length > 0,
 					hasChildren: true,
 					execute: _temp13
 				},
-				...pages ? pages.map((page) => ({
-					id: `go-to-page-${page.id}`,
+				...pages.map((page) => ({
+					id: `go-to-page-${page.key}`,
 					parentActionId: "go-to-page",
-					label: `Go to "${page.nickname}"`,
+					label: `Go to "${page.title}"`,
+					aliases: [page.fullPath],
 					groupLabel: "Preview",
 					checkIfAvailable: _temp14,
 					execute: () => navigate({ to: page.fullPath })
-				})) : []
+				}))
 			];
 			actionsStore.send({
 				type: "registerManyActions",
@@ -706,21 +708,21 @@ function usePreviewPagesActions() {
 				});
 			};
 		};
-		t5 = [
+		t1 = [
 			navigate,
 			pages,
 			pathname
 		];
-		$[8] = navigate;
-		$[9] = pages;
-		$[10] = pathname;
-		$[11] = t4;
-		$[12] = t5;
+		$[1] = navigate;
+		$[2] = pages;
+		$[3] = pathname;
+		$[4] = t0;
+		$[5] = t1;
 	} else {
-		t4 = $[11];
-		t5 = $[12];
+		t0 = $[4];
+		t1 = $[5];
 	}
-	React.useEffect(t4, t5);
+	React.useEffect(t0, t1);
 }
 function _temp15(a) {
 	return a.id;

package/dist/features/preview/commentsEnabled.js

@@ -1,7 +1,7 @@
 //#region src/features/preview/commentsEnabled.ts
-/** Opt-in prototype flag, replaced by the Camox Vite plugin in both client and SSR builds. */
+/** Comments follow the experimental-features flag in both client and SSR builds. */
 function areCommentsEnabled() {
-	return typeof __CAMOX_ENABLE_COMMENTS__ !== "undefined" && __CAMOX_ENABLE_COMMENTS__;
+	return typeof __CAMOX_ENABLE_EXPERIMENTAL_FEATURES__ !== "undefined" && __CAMOX_ENABLE_EXPERIMENTAL_FEATURES__;
 }
 
 //#endregion

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

@@ -1,8 +1,8 @@
 import { useLocation } from "../../navigation/navigation.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { blockMutations, blockQueries, projectQueries } from "../../../lib/queries.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { blockMutations, blockQueries, projectQueries } from "../../../lib/queries.js";
 import { previewStore } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { BlockThumbnail } from "./BlockThumbnail.js";

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

@@ -21,9 +21,9 @@ import { Switch } from "@camox/ui/switch";
 //#region src/features/preview/components/AssetLightbox.tsx
 function DeliveredSize(t0) {
 	const $ = c(16);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
+	if ($[0] !== "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf") {
 		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
+		$[0] = "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf";
 	}
 	const { bytes, raw } = t0;
 	if (bytes == null) {
@@ -92,9 +92,9 @@ function DeliveredSize(t0) {
 }
 function DeliveredLabel(t0) {
 	const $ = c(4);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
+	if ($[0] !== "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
+		$[0] = "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf";
 	}
 	const { children } = t0;
 	let t1;
@@ -171,6 +171,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		}
 	}, [open]);
 	const isImage = file?.mimeType?.startsWith("image/") ?? false;
+	const isVideo = file?.mimeType?.startsWith("video/") ?? false;
 	const canUseAiMetadata = isRasterImage(file?.mimeType);
 	const fileUrl = file?.url;
 	const fileMimeType = file?.mimeType;
@@ -367,6 +368,16 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 								className: "max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
 								draggable: false
 							})
+						}) : isVideo ? /* @__PURE__ */ jsx("div", {
+							className: "checkered absolute inset-0 flex items-center justify-center p-6",
+							children: open && /* @__PURE__ */ jsx("video", {
+								src: file.url,
+								controls: true,
+								playsInline: true,
+								preload: "metadata",
+								"aria-label": file.alt || file.filename || "Video preview",
+								className: "max-h-full max-w-full object-contain shadow-lg"
+							}, file.url)
 						}) : /* @__PURE__ */ jsx("div", {
 							className: "bg-muted/30 flex h-full min-h-[70vh] items-center justify-center p-6",
 							children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-16 w-16" })
@@ -530,7 +541,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									ref: replaceInputRef,
 									type: "file",
 									className: "hidden",
-									accept: isImage ? "image/*" : "*/*",
+									accept: isImage ? "image/*" : isVideo ? "video/*" : "*/*",
 									onChange: (e_0) => {
 										if (e_0.target.files) handleReplaceDrop(e_0.target.files);
 										e_0.target.value = "";
@@ -540,7 +551,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									type: "button",
 									variant: "secondary",
 									onClick: () => replaceInputRef.current?.click(),
-									children: isImage ? "Replace image" : "Replace file"
+									children: isImage ? "Replace image" : isVideo ? "Replace video" : "Replace file"
 								})
 							]
 						})