camox 0.34.0 → 0.36.0

package/dist/features/preview/CamoxPreview.js

@@ -2,25 +2,25 @@ 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";
 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 { 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
@@ -51,9 +51,9 @@ function pageStructureQueryFn(path, projectSlug, source) {
 }
 function usePreviewedPage() {
 	const $ = c(26);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
@@ -150,9 +150,9 @@ function _temp(state) {
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d";
 	}
 	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] !== "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -347,15 +347,16 @@ 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(39);
+	if ($[0] !== "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d") {
+		for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
 	const isEditMode = useSelector(previewStore, _temp5);
-	const previewSource = useSelector(previewStore, _temp6);
+	const isToolbarHidden = useSelector(previewStore, _temp6);
+	const previewSource = useSelector(previewStore, _temp7);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
 	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
@@ -375,7 +376,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isEditMode,
-					execute: _temp7,
+					execute: _temp8,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -391,7 +392,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isEditMode,
-					execute: _temp8,
+					execute: _temp9,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -407,7 +408,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp9,
+					execute: _temp0,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -423,7 +424,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp0,
+					execute: _temp1,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -434,8 +435,8 @@ const CamoxPreview = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp1,
-					execute: _temp10,
+					checkIfAvailable: _temp10,
+					execute: _temp11,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -446,7 +447,7 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp11)
+					ids: actions.map(_temp12)
 				});
 			};
 		};
@@ -476,7 +477,6 @@ const CamoxPreview = (t0) => {
 		} else t3 = $[8];
 		return t3;
 	}
-	const shouldShowStudioChrome = isEditMode;
 	const t3 = !isEditMode && "bg-black";
 	let t4;
 	if ($[9] !== t3) {
@@ -485,85 +485,99 @@ const CamoxPreview = (t0) => {
 		$[10] = t4;
 	} else t4 = $[10];
 	let t5;
-	if ($[11] !== shouldShowStudioChrome) {
-		t5 = shouldShowStudioChrome && /* @__PURE__ */ jsx(Navbar, {});
-		$[11] = shouldShowStudioChrome;
+	if ($[11] !== isToolbarHidden) {
+		t5 = !isToolbarHidden && /* @__PURE__ */ jsx(Navbar, {});
+		$[11] = isToolbarHidden;
 		$[12] = t5;
 	} else t5 = $[12];
 	let t6;
-	if ($[13] !== pageData.page || $[14] !== shouldShowStudioChrome) {
-		t6 = shouldShowStudioChrome && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
-		$[13] = pageData.page;
-		$[14] = shouldShowStudioChrome;
+	if ($[13] !== isEditMode || $[14] !== pageData.page) {
+		t6 = isEditMode && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
+		$[13] = isEditMode;
+		$[14] = pageData.page;
 		$[15] = t6;
 	} else t6 = $[15];
 	let t7;
-	if ($[16] !== shouldShowStudioChrome) {
-		t7 = shouldShowStudioChrome && /* @__PURE__ */ jsx("div", { style: {
+	if ($[16] !== hasLiveCheckpoint || $[17] !== pageData.page.status) {
+		t7 = {
+			pageStatus: pageData.page.status,
+			hasLiveVersion: hasLiveCheckpoint
+		};
+		$[16] = hasLiveCheckpoint;
+		$[17] = pageData.page.status;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== 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;
+		$[19] = isEditMode;
 		$[20] = t8;
 	} else t8 = $[20];
 	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 ($[21] !== children || $[22] !== t7 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(PreviewPanel, {
+			toolbarProps: t7,
+			children: [children, t8]
+		});
+		$[21] = children;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
 	let t10;
-	if ($[24] !== t6 || $[25] !== t8 || $[26] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+	if ($[25] !== isEditMode || $[26] !== pageData.page.id) {
+		t10 = isEditMode && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
+		$[25] = isEditMode;
+		$[26] = pageData.page.id;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== t10 || $[29] !== t6 || $[30] !== 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];
+		$[28] = t10;
+		$[29] = t6;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
 	let t12;
-	if ($[30] !== t10 || $[31] !== t11 || $[32] !== t4 || $[33] !== t5) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+	if ($[32] !== isEditMode) {
+		t12 = isEditMode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
+		$[32] = isEditMode;
+		$[33] = t12;
+	} else t12 = $[33];
+	let t13;
+	if ($[34] !== t11 || $[35] !== t12 || $[36] !== t4 || $[37] !== 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;
+		$[34] = t11;
+		$[35] = t12;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t13;
+	} else t13 = $[38];
+	return t13;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772") {
+	if ($[0] !== "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "670b66d6cc9d1448ea3caf37ecbbb00789310266338f543cbce54775c049c772";
+		$[0] = "a8aadbae83f448aedc99fd8344f3c11935e775ce61e901362c961f0c7099892d";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -604,8 +618,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp12,
-					execute: _temp13
+					checkIfAvailable: _temp13,
+					execute: _temp14
 				},
 				{
 					id: "edit-current-page",
@@ -636,14 +650,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp14
+					execute: _temp15
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp15,
+					checkIfAvailable: _temp16,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -654,7 +668,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp16)
+					ids: actions.map(_temp17)
 				});
 			};
 		};
@@ -674,17 +688,17 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp16(a) {
+function _temp17(a) {
 	return a.id;
 }
-function _temp15() {
+function _temp16() {
 	return true;
 }
-function _temp14() {}
-function _temp13() {
+function _temp15() {}
+function _temp14() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp12() {
+function _temp13() {
 	return true;
 }
 function _temp3(state) {
@@ -694,33 +708,36 @@ function _temp5(state) {
 	return state.context.isEditMode;
 }
 function _temp6(state_0) {
-	return state_0.context.previewSource;
+	return state_0.context.isToolbarHidden;
 }
-function _temp7() {
-	return previewStore.send({ type: "exitEditMode" });
+function _temp7(state_1) {
+	return state_1.context.previewSource;
 }
 function _temp8() {
-	return previewStore.send({ type: "enterEditMode" });
+	return previewStore.send({ type: "exitEditMode" });
 }
 function _temp9() {
+	return previewStore.send({ type: "enterEditMode" });
+}
+function _temp0() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "live"
 	});
 }
-function _temp0() {
+function _temp1() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "draft"
 	});
 }
-function _temp1() {
+function _temp10() {
 	return true;
 }
-function _temp10() {
+function _temp11() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp11(a) {
+function _temp12(a) {
 	return a.id;
 }
 

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";
+import { Switch } from "@camox/ui/switch";
 
 //#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",