camox 0.34.0 → 0.35.0

package/dist/core/lib/lexicalState.js

@@ -1,5 +1,5 @@
-import { FORMAT_FLAGS, lexicalTextToMarkdown } from "./modifierFormats.js";
 import { isValidTextLinkTarget } from "./textLinks.js";
+import { FORMAT_FLAGS, lexicalTextToMarkdown } from "./modifierFormats.js";
 
 //#region src/core/lib/lexicalState.ts
 function isLexicalState(value) {

package/dist/features/agent-chat/components/AgentChatSidebar.js

@@ -5,9 +5,9 @@ import { previewStore } from "../../preview/previewStore.js";
 import { AgentChatThread } from "./AgentChatThread.js";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Lock, Plus, X } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";

package/dist/features/content/components/AssetCard.js

@@ -1,5 +1,5 @@
-import { cn } from "../../../lib/utils.js";
 import { transformImageUrl } from "../../../core/lib/imageTransform.js";
+import { cn } from "../../../lib/utils.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileIcon } from "lucide-react";

package/dist/features/page/PublishedPageContent.js

@@ -0,0 +1,236 @@
+import { useLocation } from "../navigation/navigation.js";
+import { useProjectSlug } from "../../lib/auth.js";
+import { getApiClient } from "../../lib/api-client.js";
+import { viewBlockQueries } from "../../lib/view-queries.js";
+import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
+import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { c } from "react/compiler-runtime";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { queryKeys } from "@camox/api-contract/query-keys";
+
+//#region src/features/page/PublishedPageContent.tsx
+function pageStructureQueryFn(path, projectSlug, source) {
+	return () => getApiClient().pages.getStructure({
+		path,
+		projectSlug,
+		source
+	});
+}
+function PublishedBlock(t0) {
+	const $ = c(21);
+	if ($[0] !== "6b1d872701fbf673bbf88f17d9fcd827a3ba76fd3c668c35080c3a59e9b03bf1") {
+		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6b1d872701fbf673bbf88f17d9fcd827a3ba76fd3c668c35080c3a59e9b03bf1";
+	}
+	const { blockId, mode, source } = t0;
+	let t1;
+	if ($[1] !== blockId || $[2] !== source) {
+		t1 = viewBlockQueries.get(blockId, source);
+		$[1] = blockId;
+		$[2] = source;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { data } = useSuspenseQuery(t1);
+	const camoxApp = useCamoxApp();
+	let t2;
+	if ($[4] !== camoxApp || $[5] !== data.block.type) {
+		t2 = camoxApp.getBlockById(data.block.type);
+		$[4] = camoxApp;
+		$[5] = data.block.type;
+		$[6] = t2;
+	} else t2 = $[6];
+	const blockDef = t2;
+	if (!blockDef) return null;
+	const t3 = data.files;
+	const t4 = data.repeatableItems;
+	const T0 = blockDef._internal.Component;
+	const t5 = data.block.id;
+	const t6 = data.block.type;
+	const t7 = data.block.content;
+	const t8 = data.block.settings;
+	const t9 = String(data.block.position);
+	let t10;
+	if ($[7] !== data.block.id || $[8] !== data.block.type || $[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
+		t10 = {
+			_id: t5,
+			type: t6,
+			content: t7,
+			settings: t8,
+			position: t9
+		};
+		$[7] = data.block.id;
+		$[8] = data.block.type;
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== blockDef._internal.Component || $[14] !== mode || $[15] !== t10) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			blockData: t10,
+			mode,
+			showAddBlockTop: false,
+			showAddBlockBottom: false
+		});
+		$[13] = blockDef._internal.Component;
+		$[14] = mode;
+		$[15] = t10;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== data.files || $[18] !== data.repeatableItems || $[19] !== t11) {
+		t12 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+			files: t3,
+			repeatableItems: t4,
+			children: t11
+		});
+		$[17] = data.files;
+		$[18] = data.repeatableItems;
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
+	return t12;
+}
+function PublishedPageContent(t0) {
+	const $ = c(35);
+	if ($[0] !== "6b1d872701fbf673bbf88f17d9fcd827a3ba76fd3c668c35080c3a59e9b03bf1") {
+		for (let $i = 0; $i < 35; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6b1d872701fbf673bbf88f17d9fcd827a3ba76fd3c668c35080c3a59e9b03bf1";
+	}
+	const { source } = t0;
+	const { pathname } = useLocation();
+	const projectSlug = useProjectSlug();
+	const camoxApp = useCamoxApp();
+	let t1;
+	if ($[1] !== pathname || $[2] !== source) {
+		t1 = queryKeys.pages.getByPath(pathname, source);
+		$[1] = pathname;
+		$[2] = source;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== pathname || $[5] !== projectSlug || $[6] !== source) {
+		t2 = pageStructureQueryFn(pathname, projectSlug, source);
+		$[4] = pathname;
+		$[5] = projectSlug;
+		$[6] = source;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t1 || $[9] !== t2) {
+		t3 = {
+			queryKey: t1,
+			queryFn: t2,
+			staleTime: Infinity
+		};
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { data: pageData } = useSuspenseQuery(t3);
+	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData, source);
+	let t4;
+	if ($[11] !== camoxApp || $[12] !== pageData.layout) {
+		t4 = pageData.layout ? camoxApp.getLayoutById(pageData.layout.layoutId) : void 0;
+		$[11] = camoxApp;
+		$[12] = pageData.layout;
+		$[13] = t4;
+	} else t4 = $[13];
+	const layout = t4;
+	let t5;
+	bb0: {
+		if (!pageData.layout) {
+			t5 = null;
+			break bb0;
+		}
+		let blocks;
+		if ($[14] !== afterBlocks || $[15] !== beforeBlocks) {
+			blocks = {};
+			for (const block of [...beforeBlocks, ...afterBlocks]) blocks[block.type] = {
+				_id: block.id,
+				type: block.type,
+				content: block.content,
+				settings: block.settings,
+				position: String(block.position)
+			};
+			$[14] = afterBlocks;
+			$[15] = beforeBlocks;
+			$[16] = blocks;
+		} else blocks = $[16];
+		t5 = blocks;
+	}
+	const layoutBlocksMap = t5;
+	let t6;
+	if ($[17] !== pageBlocks || $[18] !== source) {
+		let t7;
+		if ($[20] !== source) {
+			t7 = (block_0) => /* @__PURE__ */ jsx(BlockErrorBoundary, {
+				blockId: block_0.id,
+				blockType: block_0.type,
+				children: /* @__PURE__ */ jsx(PublishedBlock, {
+					blockId: block_0.id,
+					mode: "site",
+					source
+				})
+			}, block_0.id);
+			$[20] = source;
+			$[21] = t7;
+		} else t7 = $[21];
+		t6 = pageBlocks.map(t7);
+		$[17] = pageBlocks;
+		$[18] = source;
+		$[19] = t6;
+	} else t6 = $[19];
+	const pageBlocksContent = t6;
+	if (!layout || !layoutBlocksMap) {
+		let t7;
+		if ($[22] !== pageBlocksContent) {
+			t7 = /* @__PURE__ */ jsx("main", {
+				className: "flex min-h-screen flex-col",
+				children: pageBlocksContent
+			});
+			$[22] = pageBlocksContent;
+			$[23] = t7;
+		} else t7 = $[23];
+		return t7;
+	}
+	const LayoutComponent = layout._internal.component;
+	let t7;
+	if ($[24] !== LayoutComponent || $[25] !== pageBlocksContent) {
+		t7 = /* @__PURE__ */ jsx(LayoutComponent, { children: pageBlocksContent });
+		$[24] = LayoutComponent;
+		$[25] = pageBlocksContent;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== layout._internal.Provider || $[28] !== layoutBlocksMap || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsx(layout._internal.Provider, {
+			layoutBlocks: layoutBlocksMap,
+			children: t7
+		});
+		$[27] = layout._internal.Provider;
+		$[28] = layoutBlocksMap;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	let t9;
+	if ($[31] !== layoutFiles || $[32] !== layoutItems || $[33] !== t8) {
+		t9 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+			files: layoutFiles,
+			repeatableItems: layoutItems,
+			children: t8
+		});
+		$[31] = layoutFiles;
+		$[32] = layoutItems;
+		$[33] = t8;
+		$[34] = t9;
+	} else t9 = $[34];
+	return t9;
+}
+
+//#endregion
+export { PublishedPageContent };

package/dist/features/page/PublishedPageExperience.js

@@ -0,0 +1,23 @@
+import { PublishedPageContent } from "./PublishedPageContent.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/page/PublishedPageExperience.tsx
+function PublishedPageExperience(t0) {
+	const $ = c(3);
+	if ($[0] !== "f8c4ab62f3391b7d7d7c339075d7595002caf53b46af25469e17c7fecd4d7d52") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "f8c4ab62f3391b7d7d7c339075d7595002caf53b46af25469e17c7fecd4d7d52";
+	}
+	const { source } = t0;
+	let t1;
+	if ($[1] !== source) {
+		t1 = /* @__PURE__ */ jsx(PublishedPageContent, { source });
+		$[1] = source;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+
+//#endregion
+export { PublishedPageExperience };

package/dist/features/preview/CamoxPreview.d.ts

@@ -22,6 +22,7 @@ declare function usePreviewedPage(): {
     customOgImageUrl: string | null;
     livePublishedCheckpointId: number | null;
     contentUpdatedAt: number;
+    createdById: string | null;
     createdAt: number;
     updatedAt: number;
   };

package/dist/features/preview/CamoxPreview.js

@@ -2,13 +2,13 @@ import { useLocation, useNavigate } from "../navigation/navigation.js";
 import { actionsStore } from "../provider/actionsStore.js";
 import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
 import { getApiClient } from "../../lib/api-client.js";
-import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
-import { cn } from "../../lib/utils.js";
-import { previewStore } from "./previewStore.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 { 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";
@@ -18,9 +18,9 @@ import { PreviewPanel } from "./components/PreviewPanel.js";
 import { RightSidebar } from "./components/RightSidebar.js";
 import { c } from "react/compiler-runtime";
 import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { queryKeys } from "@camox/api-contract/query-keys";
 
 //#region src/features/preview/CamoxPreview.tsx

package/dist/features/preview/EditablePageContent.js

@@ -0,0 +1,3 @@
+import { PageContent } from "./CamoxPreview.js";
+
+export {  };

package/dist/features/preview/EditablePageExperience.js

@@ -0,0 +1,24 @@
+import { CamoxPreview, PageContent } from "./CamoxPreview.js";
+import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
+import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
+import "./EditablePageContent.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/preview/EditablePageExperience.tsx
+function EditablePageExperience(t0) {
+	const $ = c(2);
+	if ($[0] !== "62fa8b2b4207f6a9197bd7473308418337b4719a942b8cb83f05f5f584c962c9") {
+		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "62fa8b2b4207f6a9197bd7473308418337b4719a942b8cb83f05f5f584c962c9";
+	}
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: /* @__PURE__ */ jsx(CamoxPreview, { children: /* @__PURE__ */ jsx(PageContent, {}) }) }) });
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+
+//#endregion
+export { EditablePageExperience };

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

@@ -1,18 +1,18 @@
 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 { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { previewStore } from "../previewStore.js";
-import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import { generateKeyBetween } from "fractional-indexing";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { queryKeys } from "@camox/api-contract/query-keys";
 import { Button } from "@camox/ui/button";
 import { ArrowLeft } from "lucide-react";

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

@@ -1,6 +1,6 @@
 import { useProjectSlug } from "../../../lib/auth.js";
-import { projectQueries } from "../../../lib/queries.js";
 import { transformImageUrl } from "../../../core/lib/imageTransform.js";
+import { projectQueries } from "../../../lib/queries.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { UploadItemRow } from "../../content/components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../../hooks/use-file-upload.js";

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

@@ -1,75 +1,30 @@
 import { getAuthCookieHeader, getAuthRequestCredentials } from "../../../lib/auth.js";
 import { getApiUrl, getEnvironmentName } from "../../../lib/api-client.js";
+import { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { fileMutations, fileQueries } from "../../../lib/queries.js";
 import { trackClientEvent } from "../../../lib/telemetry-client.js";
-import { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
+import { Metadata, MetadataRow, formatRelativeTime } from "./Metadata.js";
 import { c } from "react/compiler-runtime";
-import { Label } from "@camox/ui/label";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
 import { Button } from "@camox/ui/button";
 import { Check, Download, FileIcon, Info, Link, Loader2, Trash2, X } from "lucide-react";
+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";
 
 //#region src/features/preview/components/AssetLightbox.tsx
-function MetadataRow(t0) {
-	const $ = c(9);
-	if ($[0] !== "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553";
-	}
-	const { label, children } = t0;
-	let t1;
-	if ($[1] !== label) {
-		t1 = /* @__PURE__ */ jsx("span", {
-			className: "shrink-0",
-			children: label
-		});
-		$[1] = label;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("span", { className: "border-border min-w-0 flex-1 border-b" });
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== children) {
-		t3 = /* @__PURE__ */ jsx("span", {
-			className: "text-foreground shrink-0",
-			children
-		});
-		$[4] = children;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t1 || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline gap-2",
-			children: [
-				t1,
-				t2,
-				t3
-			]
-		});
-		$[6] = t1;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
-}
 function DeliveredSize(t0) {
 	const $ = c(16);
-	if ($[0] !== "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553") {
+	if ($[0] !== "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9") {
 		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553";
+		$[0] = "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9";
 	}
 	const { bytes, raw } = t0;
 	if (bytes == null) {
@@ -138,9 +93,9 @@ function DeliveredSize(t0) {
 }
 function DeliveredLabel(t0) {
 	const $ = c(4);
-	if ($[0] !== "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553") {
+	if ($[0] !== "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "57c6d07de7206779e7a888ace2e7d9e6b374e2f3c9aed614f5bd25f704694553";
+		$[0] = "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9";
 	}
 	const { children } = t0;
 	let t1;
@@ -175,22 +130,6 @@ function DeliveredLabel(t0) {
 	} else t2 = $[3];
 	return t2;
 }
-function formatRelativeTime(epochMs) {
-	const now = Temporal.Now.instant();
-	const then = Temporal.Instant.fromEpochMilliseconds(epochMs);
-	const totalSeconds = now.since(then).total("seconds");
-	const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-	if (totalSeconds < 60) return rtf.format(-Math.floor(totalSeconds), "second");
-	const totalMinutes = Math.floor(totalSeconds / 60);
-	if (totalMinutes < 60) return rtf.format(-totalMinutes, "minute");
-	const totalHours = Math.floor(totalMinutes / 60);
-	if (totalHours < 24) return rtf.format(-totalHours, "hour");
-	const totalDays = Math.floor(totalHours / 24);
-	if (totalDays < 30) return rtf.format(-totalDays, "day");
-	const totalMonths = Math.floor(totalDays / 30);
-	if (totalMonths < 12) return rtf.format(-totalMonths, "month");
-	return rtf.format(-Math.floor(totalDays / 365), "year");
-}
 function formatFileSize(bytes) {
 	if (bytes < 1024) return `${bytes} B`;
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -555,48 +494,45 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 										alt: value_0
 									})
 								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "text-muted-foreground space-y-1 text-sm",
-									children: [
-										/* @__PURE__ */ jsx(MetadataRow, {
-											label: "Format",
-											children: file.mimeType.split("/").pop()?.toUpperCase() ?? "Unknown"
-										}),
-										/* @__PURE__ */ jsx(MetadataRow, {
-											label: "Raw size",
-											children: file.size != null ? formatFileSize(file.size) : "Unknown"
-										}),
-										isImage && deliveredSizes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MetadataRow, {
-											label: /* @__PURE__ */ jsx(DeliveredLabel, { children: "On phone" }),
-											children: /* @__PURE__ */ jsx(DeliveredSize, {
-												bytes: deliveredSizes.phone,
-												raw: file.size
-											})
-										}), /* @__PURE__ */ jsx(MetadataRow, {
-											label: /* @__PURE__ */ jsx(DeliveredLabel, { children: "On laptop" }),
-											children: /* @__PURE__ */ jsx(DeliveredSize, {
-												bytes: deliveredSizes.laptop,
-												raw: file.size
-											})
-										})] }),
-										/* @__PURE__ */ jsx(MetadataRow, {
-											label: "Created",
-											children: formatRelativeTime(file.createdAt)
-										}),
-										/* @__PURE__ */ jsx(MetadataRow, {
-											label: "Updated",
-											children: formatRelativeTime(file.updatedAt)
-										}),
-										/* @__PURE__ */ jsxs(MetadataRow, {
-											label: "Used in",
-											children: [
-												usageCount == null && "…",
-												usageCount === 0 && "No blocks",
-												usageCount != null && usageCount > 0 && `${usageCount} ${usageCount === 1 ? "block" : "blocks"}`
-											]
+								/* @__PURE__ */ jsxs(Metadata, { children: [
+									/* @__PURE__ */ jsx(MetadataRow, {
+										label: "Format",
+										children: file.mimeType.split("/").pop()?.toUpperCase() ?? "Unknown"
+									}),
+									/* @__PURE__ */ jsx(MetadataRow, {
+										label: "Raw size",
+										children: file.size != null ? formatFileSize(file.size) : "Unknown"
+									}),
+									isImage && deliveredSizes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MetadataRow, {
+										label: /* @__PURE__ */ jsx(DeliveredLabel, { children: "On phone" }),
+										children: /* @__PURE__ */ jsx(DeliveredSize, {
+											bytes: deliveredSizes.phone,
+											raw: file.size
 										})
-									]
-								}),
+									}), /* @__PURE__ */ jsx(MetadataRow, {
+										label: /* @__PURE__ */ jsx(DeliveredLabel, { children: "On laptop" }),
+										children: /* @__PURE__ */ jsx(DeliveredSize, {
+											bytes: deliveredSizes.laptop,
+											raw: file.size
+										})
+									})] }),
+									/* @__PURE__ */ jsx(MetadataRow, {
+										label: "Created",
+										children: formatRelativeTime(file.createdAt)
+									}),
+									/* @__PURE__ */ jsx(MetadataRow, {
+										label: "Updated",
+										children: formatRelativeTime(file.updatedAt)
+									}),
+									/* @__PURE__ */ jsxs(MetadataRow, {
+										label: "Used in",
+										children: [
+											usageCount == null && "…",
+											usageCount === 0 && "No blocks",
+											usageCount != null && usageCount > 0 && `${usageCount} ${usageCount === 1 ? "block" : "blocks"}`
+										]
+									})
+								] }),
 								/* @__PURE__ */ jsx("input", {
 									ref: replaceInputRef,
 									type: "file",

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

@@ -1,22 +1,22 @@
 import { actionsStore } from "../../provider/actionsStore.js";
+import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { formatShortcut } from "../../../lib/utils.js";
-import { previewStore, selectionItemId } from "../previewStore.js";
-import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { trackClientEvent } from "../../../lib/telemetry-client.js";
+import { previewStore, selectionItemId } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { useMutation } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
+import { useSelector } from "@xstate/store-react";
 import { Copy, Pen, Settings, Trash2 } from "lucide-react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { toast } from "@camox/ui/toaster";
 import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 
 //#region src/features/preview/components/BlockActionsPopover.tsx

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

@@ -1,21 +1,21 @@
 import { useNavigate } from "../../navigation/navigation.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { layoutQueries, pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { previewStore } from "../previewStore.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { PageLocationFieldset } from "./PageLocationFieldset.js";
 import { PageNicknameField } from "./PageNicknameField.js";
 import { c } from "react/compiler-runtime";
-import { Label } from "@camox/ui/label";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Spinner } from "@camox/ui/spinner";
+import { toast } from "@camox/ui/toaster";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Label } from "@camox/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 import { useForm } from "@tanstack/react-form";
 

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

@@ -1,9 +1,9 @@
 import { useDebouncedField } from "../../../hooks/use-debounced-field.js";
 import { c } from "react/compiler-runtime";
-import { Input } from "@camox/ui/input";
-import { Label } from "@camox/ui/label";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@camox/ui/label";
+import { Input } from "@camox/ui/input";
 import { Textarea } from "@camox/ui/textarea";
 
 //#region src/features/preview/components/DebouncedFieldEditor.tsx