camox 0.22.0 → 0.24.0

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

@@ -1,107 +1,154 @@
 import { cn } from "../../../lib/utils.js";
+import { transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileIcon } from "lucide-react";
 
 //#region src/features/content/components/AssetCard.tsx
+const OPAQUE_IMAGE_MIME_TYPES = new Set(["image/jpeg", "image/jpg"]);
 const AssetCard = (t0) => {
-	const $ = c(26);
-	if ($[0] !== "62dab0d9b73ffb903a48127d8b52340688d238c98cfa8a817c9ae69dc68148ec") {
-		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "62dab0d9b73ffb903a48127d8b52340688d238c98cfa8a817c9ae69dc68148ec";
+	const $ = c(46);
+	if ($[0] !== "1047e431261024f9506ec8f4989ecb00b2808af70364054688c5f3d5eb9e1f28") {
+		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1047e431261024f9506ec8f4989ecb00b2808af70364054688c5f3d5eb9e1f28";
 	}
 	const { file, selected, onSelect, onOpen } = t0;
+	let extension;
+	let isImage;
+	let isOpaqueImage;
 	let t1;
-	if ($[1] !== file.mimeType) {
-		t1 = file.mimeType?.startsWith("image/");
-		$[1] = file.mimeType;
-		$[2] = t1;
-	} else t1 = $[2];
-	const isImage = t1;
 	let t2;
-	if ($[3] !== file.filename) {
-		t2 = file.filename?.split(".").pop()?.toUpperCase() ?? "";
-		$[3] = file.filename;
-		$[4] = t2;
-	} else t2 = $[4];
-	const extension = t2;
-	const t3 = file.id;
-	const t4 = selected ? "bg-primary/20 border-2 border-primary" : "hover:bg-accent/75";
+	let t3;
+	let t4;
 	let t5;
-	if ($[5] !== t4) {
-		t5 = cn("group flex flex-col gap-1.5 rounded-lg p-2 text-left border-2 border-transparent", t4);
-		$[5] = t4;
-		$[6] = t5;
-	} else t5 = $[6];
 	let t6;
-	if ($[7] !== onSelect) {
-		t6 = (e) => {
-			e.stopPropagation();
-			onSelect();
-		};
-		$[7] = onSelect;
-		$[8] = t6;
-	} else t6 = $[8];
+	if ($[1] !== file.filename || $[2] !== file.id || $[3] !== file.mimeType || $[4] !== onOpen || $[5] !== onSelect || $[6] !== selected) {
+		isImage = file.mimeType?.startsWith("image/");
+		isOpaqueImage = isImage && OPAQUE_IMAGE_MIME_TYPES.has(file.mimeType ?? "");
+		let t7;
+		if ($[16] !== file.filename) {
+			t7 = file.filename?.split(".").pop()?.toUpperCase() ?? "";
+			$[16] = file.filename;
+			$[17] = t7;
+		} else t7 = $[17];
+		extension = t7;
+		t2 = "button";
+		t3 = file.id;
+		const t8 = selected ? "bg-primary/20 border-2 border-primary" : "hover:bg-accent/75";
+		if ($[18] !== t8) {
+			t4 = cn("group flex flex-col gap-1.5 rounded-lg p-2 text-left border-2 border-transparent", t8);
+			$[18] = t8;
+			$[19] = t4;
+		} else t4 = $[19];
+		if ($[20] !== onSelect) {
+			t5 = (e) => {
+				e.stopPropagation();
+				onSelect();
+			};
+			$[20] = onSelect;
+			$[21] = t5;
+		} else t5 = $[21];
+		if ($[22] !== onOpen) {
+			t6 = (e_0) => {
+				e_0.stopPropagation();
+				onOpen();
+			};
+			$[22] = onOpen;
+			$[23] = t6;
+		} else t6 = $[23];
+		t1 = cn("flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm", isOpaqueImage && "bg-muted", !isImage && "bg-muted", isImage && !isOpaqueImage && "checkered p-1.5");
+		$[1] = file.filename;
+		$[2] = file.id;
+		$[3] = file.mimeType;
+		$[4] = onOpen;
+		$[5] = onSelect;
+		$[6] = selected;
+		$[7] = extension;
+		$[8] = isImage;
+		$[9] = isOpaqueImage;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else {
+		extension = $[7];
+		isImage = $[8];
+		isOpaqueImage = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+		t5 = $[14];
+		t6 = $[15];
+	}
 	let t7;
-	if ($[9] !== onOpen) {
-		t7 = (e_0) => {
-			e_0.stopPropagation();
-			onOpen();
-		};
-		$[9] = onOpen;
-		$[10] = t7;
-	} else t7 = $[10];
+	if ($[24] !== extension || $[25] !== file.alt || $[26] !== file.filename || $[27] !== file.mimeType || $[28] !== file.size || $[29] !== file.url || $[30] !== isImage || $[31] !== isOpaqueImage) {
+		t7 = isImage ? /* @__PURE__ */ jsx("img", {
+			src: transformImageUrl(file.url, {
+				width: 480,
+				mimeType: file.mimeType,
+				size: file.size
+			}),
+			alt: file.alt || file.filename,
+			draggable: false,
+			className: cn("pointer-events-none h-full w-full", isOpaqueImage ? "object-cover" : "object-contain")
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex flex-col items-center gap-1",
+			children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-8 w-8" }), extension && /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: extension
+			})]
+		});
+		$[24] = extension;
+		$[25] = file.alt;
+		$[26] = file.filename;
+		$[27] = file.mimeType;
+		$[28] = file.size;
+		$[29] = file.url;
+		$[30] = isImage;
+		$[31] = isOpaqueImage;
+		$[32] = t7;
+	} else t7 = $[32];
 	let t8;
-	if ($[11] !== extension || $[12] !== file.alt || $[13] !== file.filename || $[14] !== file.url || $[15] !== isImage) {
+	if ($[33] !== t1 || $[34] !== t7) {
 		t8 = /* @__PURE__ */ jsx("div", {
-			className: "bg-muted flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm",
-			children: isImage ? /* @__PURE__ */ jsx("img", {
-				src: file.url,
-				alt: file.alt || file.filename,
-				draggable: false,
-				className: "pointer-events-none h-full w-full object-cover"
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground flex flex-col items-center gap-1",
-				children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-8 w-8" }), extension && /* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium",
-					children: extension
-				})]
-			})
+			className: t1,
+			children: t7
 		});
-		$[11] = extension;
-		$[12] = file.alt;
-		$[13] = file.filename;
-		$[14] = file.url;
-		$[15] = isImage;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[33] = t1;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
 	let t9;
-	if ($[17] !== file.filename) {
+	if ($[36] !== file.filename) {
 		t9 = /* @__PURE__ */ jsx("p", {
 			className: "line-clamp-2 px-0.5 text-xs break-all",
 			children: file.filename
 		});
-		$[17] = file.filename;
-		$[18] = t9;
-	} else t9 = $[18];
+		$[36] = file.filename;
+		$[37] = t9;
+	} else t9 = $[37];
 	let t10;
-	if ($[19] !== file.id || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+	if ($[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 || $[43] !== t8 || $[44] !== t9) {
 		t10 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
+			type: t2,
 			"data-asset-id": t3,
-			className: t5,
-			onClick: t6,
-			onDoubleClick: t7,
+			className: t4,
+			onClick: t5,
+			onDoubleClick: t6,
 			children: [t8, t9]
 		});
-		$[19] = file.id;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-		$[25] = t10;
-	} else t10 = $[25];
+		$[38] = t2;
+		$[39] = t3;
+		$[40] = t4;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t8;
+		$[44] = t9;
+		$[45] = t10;
+	} else t10 = $[45];
 	return t10;
 };
 

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

@@ -15,6 +15,8 @@ declare function usePreviewedPage(): {
     metaTitle: string | null;
     metaDescription: string | null;
     aiSeoEnabled: boolean | null;
+    customOgImageBlobId: string | null;
+    customOgImageUrl: string | null;
     createdAt: number;
     updatedAt: number;
   };

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

@@ -1,5 +1,6 @@
 import { useProjectSlug } from "../../../lib/auth.js";
 import { projectQueries } from "../../../lib/queries.js";
+import { transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { UploadItemRow } from "../../content/components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../../hooks/use-file-upload.js";
@@ -20,9 +21,9 @@ function assetLabel(isImage, multiple) {
 }
 const AssetActionButtons = (t0) => {
 	const $ = c(27);
-	if ($[0] !== "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa") {
+	if ($[0] !== "578c810b03b0bcf84595cb011652bdf58260b853f4d229ef94d55109880eacf0") {
 		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa";
+		$[0] = "578c810b03b0bcf84595cb011652bdf58260b853f4d229ef94d55109880eacf0";
 	}
 	const { isImage, multiple, fileInputRef, onPickerOpen, onFilesSelected, uploads } = t0;
 	let t1;
@@ -125,9 +126,9 @@ const AssetActionButtons = (t0) => {
 };
 const SingleAssetFieldEditor = (t0) => {
 	const $ = c(29);
-	if ($[0] !== "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa") {
+	if ($[0] !== "578c810b03b0bcf84595cb011652bdf58260b853f4d229ef94d55109880eacf0") {
 		for (let $i = 0; $i < 29; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa";
+		$[0] = "578c810b03b0bcf84595cb011652bdf58260b853f4d229ef94d55109880eacf0";
 	}
 	const { fieldName, assetType, currentData, onFieldChange } = t0;
 	const asset = currentData[fieldName];
@@ -207,7 +208,11 @@ const SingleAssetFieldEditor = (t0) => {
 						children: [isImage ? /* @__PURE__ */ jsx("div", {
 							className: "border-border h-10 w-10 shrink-0 overflow-hidden rounded border",
 							children: /* @__PURE__ */ jsx("img", {
-								src: asset.url,
+								src: transformImageUrl(asset.url, {
+									width: 128,
+									mimeType: asset.mimeType,
+									size: asset.size
+								}),
 								alt: asset.alt || asset.filename,
 								className: "h-full w-full object-cover"
 							})

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

@@ -2,17 +2,18 @@ import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { getAuthCookieHeader } from "../../../lib/auth.js";
 import { getApiUrl, getEnvironmentName } from "../../../lib/api-client.js";
 import { fileMutations, fileQueries } from "../../../lib/queries.js";
-import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
+import { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
+import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
 import { c } from "react/compiler-runtime";
 import { Label } from "@camox/ui/label";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { Check, Download, FileIcon, Link, Loader2, Trash2, X } from "lucide-react";
+import { Check, Download, FileIcon, Info, Link, Loader2, Trash2, X } from "lucide-react";
 import { Dialog, DialogContent, DialogTitle } from "@camox/ui/dialog";
 import { Switch } from "@camox/ui/switch";
 import { ButtonGroup } from "@camox/ui/button-group";
@@ -20,9 +21,9 @@ import { ButtonGroup } from "@camox/ui/button-group";
 //#region src/features/preview/components/AssetLightbox.tsx
 function MetadataRow(t0) {
 	const $ = c(9);
-	if ($[0] !== "37940925d91368c87c0e95d97da969b420d7241705fd90761ebca29def086c1e") {
+	if ($[0] !== "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "37940925d91368c87c0e95d97da969b420d7241705fd90761ebca29def086c1e";
+		$[0] = "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d";
 	}
 	const { label, children } = t0;
 	let t1;
@@ -64,6 +65,116 @@ function MetadataRow(t0) {
 	} else t4 = $[8];
 	return t4;
 }
+function DeliveredSize(t0) {
+	const $ = c(16);
+	if ($[0] !== "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d") {
+		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d";
+	}
+	const { bytes, raw } = t0;
+	if (bytes == null) {
+		let t1;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(Fragment, { children: "…" });
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	let t1;
+	if ($[2] !== bytes || $[3] !== raw) {
+		t1 = raw != null && raw > 0 ? Math.round((raw - bytes) / raw * 100) : null;
+		$[2] = bytes;
+		$[3] = raw;
+		$[4] = t1;
+	} else t1 = $[4];
+	const savingsPct = t1;
+	if (savingsPct == null || savingsPct <= 0) {
+		let t2;
+		if ($[5] !== bytes) {
+			t2 = formatFileSize(bytes);
+			$[5] = bytes;
+			$[6] = t2;
+		} else t2 = $[6];
+		let t3;
+		if ($[7] !== t2) {
+			t3 = /* @__PURE__ */ jsxs(Fragment, { children: ["≈", t2] });
+			$[7] = t2;
+			$[8] = t3;
+		} else t3 = $[8];
+		return t3;
+	}
+	let t2;
+	if ($[9] !== bytes) {
+		t2 = formatFileSize(bytes);
+		$[9] = bytes;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== savingsPct) {
+		t3 = /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
+			children: [
+				"(−",
+				savingsPct,
+				"%)"
+			]
+		});
+		$[11] = savingsPct;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== t2 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			"≈",
+			t2,
+			" ",
+			t3
+		] });
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+}
+function DeliveredLabel(t0) {
+	const $ = c(4);
+	if ($[0] !== "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5a5b1edf9c8dcefe67d31c9a59c95831dcc6dfede24df286efbdba62d1fd4e8d";
+	}
+	const { children } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-muted-foreground hover:text-foreground",
+				"aria-label": "About image optimization"
+			}),
+			children: /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" })
+		}), /* @__PURE__ */ jsxs(TooltipContent, {
+			className: "max-w-xs",
+			children: [
+				"Visitors automatically receive a compressed WebP/AVIF version sized to their device. Estimates use ",
+				DELIVERED_PHONE_WIDTH,
+				"px (phone) and ",
+				DELIVERED_LAPTOP_WIDTH,
+				"px (laptop) — the original is preserved."
+			]
+		})] });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [children, t1]
+		});
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
 function formatRelativeTime(epochMs) {
 	const now = Temporal.Now.instant();
 	const then = Temporal.Instant.fromEpochMilliseconds(epochMs);
@@ -86,6 +197,20 @@ function formatFileSize(bytes) {
 	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
+const DELIVERED_PHONE_WIDTH = 640;
+const DELIVERED_LAPTOP_WIDTH = 1280;
+async function measureContentLength(url, signal) {
+	try {
+		const res = await fetch(url, { signal });
+		res.body?.cancel();
+		const cl = res.headers.get("content-length");
+		if (!cl) return null;
+		const parsed = Number.parseInt(cl, 10);
+		return Number.isFinite(parsed) ? parsed : null;
+	} catch {
+		return null;
+	}
+}
 const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 	const replaceFile = useMutation(fileMutations.replace());
 	const deleteFile = useMutation(fileMutations.delete());
@@ -100,12 +225,57 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 	const [zoomed, setZoomed] = useState(false);
 	const [zoomedWidth, setZoomedWidth] = useState(null);
 	const clickFractionRef = useRef(null);
+	const [deliveredSizes, setDeliveredSizes] = useState(null);
 	useEffect(() => {
 		if (!open) {
 			setZoomed(false);
 			setZoomedWidth(null);
 		}
 	}, [open]);
+	const isImage = file?.mimeType?.startsWith("image/") ?? false;
+	const canUseAiMetadata = isRasterImage(file?.mimeType);
+	const fileUrl = file?.url;
+	const fileMimeType = file?.mimeType;
+	useEffect(() => {
+		if (!open || !isImage || !fileUrl) {
+			setDeliveredSizes(null);
+			return;
+		}
+		const phoneUrl = transformImageUrl(fileUrl, {
+			width: DELIVERED_PHONE_WIDTH,
+			mimeType: fileMimeType,
+			size: file?.size
+		});
+		const laptopUrl = transformImageUrl(fileUrl, {
+			width: DELIVERED_LAPTOP_WIDTH,
+			mimeType: fileMimeType,
+			size: file?.size
+		});
+		if (phoneUrl === fileUrl && laptopUrl === fileUrl) {
+			setDeliveredSizes(null);
+			return;
+		}
+		setDeliveredSizes({
+			phone: null,
+			laptop: null,
+			measured: false
+		});
+		const controller = new AbortController();
+		Promise.all([measureContentLength(phoneUrl, controller.signal), measureContentLength(laptopUrl, controller.signal)]).then(([phone, laptop]) => {
+			if (controller.signal.aborted) return;
+			setDeliveredSizes({
+				phone,
+				laptop,
+				measured: true
+			});
+		});
+		return () => controller.abort();
+	}, [
+		open,
+		isImage,
+		fileUrl,
+		fileMimeType
+	]);
 	useEffect(() => {
 		if (!zoomed || !zoomedWidth || !containerRef.current || !clickFractionRef.current) return;
 		const container = containerRef.current;
@@ -194,7 +364,6 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		onOpenChange(false);
 	};
 	if (!file) return null;
-	const isImage = file.mimeType?.startsWith("image/");
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange,
@@ -340,11 +509,12 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 										children: /* @__PURE__ */ jsx(Trash2, {})
 									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Delete" })] })
 								] }),
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-2",
+								/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+									render: /* @__PURE__ */ jsx("div", { className: `flex items-center gap-2 ${canUseAiMetadata ? "" : "cursor-not-allowed"}` }),
 									children: [/* @__PURE__ */ jsx(Switch, {
 										id: "ai-metadata",
-										checked: file.aiMetadataEnabled !== false,
+										disabled: !canUseAiMetadata,
+										checked: canUseAiMetadata && file.aiMetadataEnabled !== false,
 										onCheckedChange: (checked) => {
 											setAiMetadata.mutate({
 												id: fileId,
@@ -359,14 +529,15 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 										}
 									}), /* @__PURE__ */ jsx(Label, {
 										htmlFor: "ai-metadata",
+										className: canUseAiMetadata ? "" : "text-muted-foreground",
 										children: "AI metadata"
 									})]
-								}),
+								}), !canUseAiMetadata && /* @__PURE__ */ jsx(TooltipContent, { children: "AI metadata is only available for raster images." })] }),
 								/* @__PURE__ */ jsx(DebouncedFieldEditor, {
 									label: "File name",
 									placeholder: "File name...",
 									initialValue: file.filename,
-									disabled: file.aiMetadataEnabled !== false,
+									disabled: canUseAiMetadata && file.aiMetadataEnabled !== false,
 									onSave: (value) => setFilename.mutate({
 										id: fileId,
 										filename: value
@@ -376,7 +547,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									label: "Alt text",
 									placeholder: "Describe this file...",
 									initialValue: file.alt,
-									disabled: file.aiMetadataEnabled !== false,
+									disabled: canUseAiMetadata && file.aiMetadataEnabled !== false,
 									rows: 2,
 									onSave: (value_0) => setAlt.mutate({
 										id: fileId,
@@ -391,9 +562,22 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 											children: file.mimeType.split("/").pop()?.toUpperCase() ?? "Unknown"
 										}),
 										/* @__PURE__ */ jsx(MetadataRow, {
-											label: "Size",
+											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)