camox 0.22.0 → 0.23.0

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

@@ -1,14 +1,15 @@
 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 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(27);
+	if ($[0] !== "9ecd8015db2f9718029c6f2952f71322cd0d4bdec949a22375db105de6ada5db") {
+		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9ecd8015db2f9718029c6f2952f71322cd0d4bdec949a22375db105de6ada5db";
 	}
 	const { file, selected, onSelect, onOpen } = t0;
 	let t1;
@@ -52,14 +53,17 @@ const AssetCard = (t0) => {
 		$[10] = t7;
 	} else t7 = $[10];
 	let t8;
-	if ($[11] !== extension || $[12] !== file.alt || $[13] !== file.filename || $[14] !== file.url || $[15] !== isImage) {
+	if ($[11] !== extension || $[12] !== file.alt || $[13] !== file.filename || $[14] !== file.mimeType || $[15] !== file.url || $[16] !== isImage) {
 		t8 = /* @__PURE__ */ jsx("div", {
-			className: "bg-muted flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm",
+			className: "checkered flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm p-1.5",
 			children: isImage ? /* @__PURE__ */ jsx("img", {
-				src: file.url,
+				src: transformImageUrl(file.url, {
+					width: 480,
+					mimeType: file.mimeType
+				}),
 				alt: file.alt || file.filename,
 				draggable: false,
-				className: "pointer-events-none h-full w-full object-cover"
+				className: "pointer-events-none h-full w-full 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", {
@@ -71,21 +75,22 @@ const AssetCard = (t0) => {
 		$[11] = extension;
 		$[12] = file.alt;
 		$[13] = file.filename;
-		$[14] = file.url;
-		$[15] = isImage;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[14] = file.mimeType;
+		$[15] = file.url;
+		$[16] = isImage;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[17] !== file.filename) {
+	if ($[18] !== 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];
+		$[18] = file.filename;
+		$[19] = t9;
+	} else t9 = $[19];
 	let t10;
-	if ($[19] !== file.id || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+	if ($[20] !== file.id || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9) {
 		t10 = /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-asset-id": t3,
@@ -94,14 +99,14 @@ const AssetCard = (t0) => {
 			onDoubleClick: t7,
 			children: [t8, t9]
 		});
-		$[19] = file.id;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-		$[25] = t10;
-	} else t10 = $[25];
+		$[20] = file.id;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
 	return t10;
 };
 

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] !== "44259d77bb7c7c167ba0def21aa6d5d7b7d1115e4b30d38a3c3d829d0a76df91") {
 		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa";
+		$[0] = "44259d77bb7c7c167ba0def21aa6d5d7b7d1115e4b30d38a3c3d829d0a76df91";
 	}
 	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] !== "44259d77bb7c7c167ba0def21aa6d5d7b7d1115e4b30d38a3c3d829d0a76df91") {
 		for (let $i = 0; $i < 29; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "511bbc6572b1a9ed249b95be0b61223953390bf5d43cd01f6b380f115b1aadaa";
+		$[0] = "44259d77bb7c7c167ba0def21aa6d5d7b7d1115e4b30d38a3c3d829d0a76df91";
 	}
 	const { fieldName, assetType, currentData, onFieldChange } = t0;
 	const asset = currentData[fieldName];
@@ -207,7 +208,10 @@ 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
+								}),
 								alt: asset.alt || asset.filename,
 								className: "h-full w-full object-cover"
 							})

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

@@ -2,6 +2,7 @@ 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 { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { c } from "react/compiler-runtime";
@@ -9,10 +10,10 @@ 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] !== "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "37940925d91368c87c0e95d97da969b420d7241705fd90761ebca29def086c1e";
+		$[0] = "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a";
 	}
 	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] !== "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a") {
+		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a";
+	}
+	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] !== "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "50fbf2f7ee8a6e8b4452e53c7c776c76cf2aa2926c13218fcc4664012d02ad9a";
+	}
+	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,55 @@ 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
+		});
+		const laptopUrl = transformImageUrl(fileUrl, {
+			width: DELIVERED_LAPTOP_WIDTH,
+			mimeType: fileMimeType
+		});
+		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 +362,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 +507,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 +527,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 +545,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 +560,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)

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

@@ -24,16 +24,15 @@ const getSchemaFieldsInOrder = (schema) => {
 			fieldType: prop.fieldType,
 			label: prop.title,
 			minItems: prop.minItems,
-			maxItems: prop.maxItems,
-			arrayItemType: prop.arrayItemType
+			maxItems: prop.maxItems
 		};
 	});
 };
 const DrillRow = (t0) => {
 	const $ = c(28);
-	if ($[0] !== "15f9ee4a513b843fbbfefffb10bc5ae0ad53bad634945c9c8e78821de81003d0") {
+	if ($[0] !== "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "15f9ee4a513b843fbbfefffb10bc5ae0ad53bad634945c9c8e78821de81003d0";
+		$[0] = "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d";
 	}
 	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
 	let t1;
@@ -136,9 +135,9 @@ const DrillRow = (t0) => {
 };
 const ItemFieldsEditor = (t0) => {
 	const $ = c(47);
-	if ($[0] !== "15f9ee4a513b843fbbfefffb10bc5ae0ad53bad634945c9c8e78821de81003d0") {
+	if ($[0] !== "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d") {
 		for (let $i = 0; $i < 47; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "15f9ee4a513b843fbbfefffb10bc5ae0ad53bad634945c9c8e78821de81003d0";
+		$[0] = "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d";
 	}
 	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix, autoFocusFieldName } = t0;
 	let t1;
@@ -384,10 +383,10 @@ const ItemFieldsEditor = (t0) => {
 					postToIframe
 				}, field.name);
 			}
-			if (field.fieldType === "MultipleAssets") {
+			if (field.fieldType === "ImageList" || field.fieldType === "FileList") {
 				const value_1 = data[field.name];
 				const count = Array.isArray(value_1) ? value_1.length : 0;
-				const isImage = field.arrayItemType === "Image";
+				const isImage = field.fieldType === "ImageList";
 				const noun = isImage ? "image" : "file";
 				let preview_0;
 				if (count === 0) preview_0 = isImage ? "No images" : "No files";
@@ -434,7 +433,7 @@ const ItemFieldsEditor = (t0) => {
 					postToIframe
 				}, field.name);
 			}
-			if (field.fieldType === "RepeatableItem") {
+			if (field.fieldType === "Repeater") {
 				const items = (data[field.name] ?? []).map((item) => {
 					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
 					return item;

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

@@ -1,6 +1,7 @@
 import { useProjectSlug } from "../../../lib/auth.js";
 import { projectQueries } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
+import { transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { useFileUpload } from "../../../hooks/use-file-upload.js";
 import { AssetLightbox } from "./AssetLightbox.js";
@@ -20,10 +21,10 @@ import { CSS } from "@dnd-kit/utilities";
 
 //#region src/features/preview/components/MultipleAssetFieldEditor.tsx
 const SortableAssetItem = (t0) => {
-	const $ = c(43);
-	if ($[0] !== "4a9a772ea33768d0b437f29310be43cbb00f08bde5995fde9df846193f68d652") {
-		for (let $i = 0; $i < 43; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a9a772ea33768d0b437f29310be43cbb00f08bde5995fde9df846193f68d652";
+	const $ = c(44);
+	if ($[0] !== "2cded293bac7099a2f0d21d69f3d54cce48c76ba242f02366ecaa807b6b79b7d") {
+		for (let $i = 0; $i < 44; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "2cded293bac7099a2f0d21d69f3d54cce48c76ba242f02366ecaa807b6b79b7d";
 	}
 	const { asset, assetType, onRemove, onAssetOpen } = t0;
 	const t1 = String(asset._fileId);
@@ -89,11 +90,14 @@ const SortableAssetItem = (t0) => {
 		$[17] = t10;
 	} else t10 = $[17];
 	let t11;
-	if ($[18] !== asset.alt || $[19] !== asset.filename || $[20] !== asset.url || $[21] !== assetType) {
+	if ($[18] !== asset.alt || $[19] !== asset.filename || $[20] !== asset.mimeType || $[21] !== asset.url || $[22] !== assetType) {
 		t11 = assetType === "Image" ? /* @__PURE__ */ jsx("div", {
 			className: "border-border h-12 w-12 shrink-0 overflow-hidden rounded border",
 			children: /* @__PURE__ */ jsx("img", {
-				src: asset.url,
+				src: transformImageUrl(asset.url, {
+					width: 128,
+					mimeType: asset.mimeType
+				}),
 				alt: asset.alt || asset.filename,
 				className: "h-full w-full object-cover"
 			})
@@ -103,55 +107,56 @@ const SortableAssetItem = (t0) => {
 		});
 		$[18] = asset.alt;
 		$[19] = asset.filename;
-		$[20] = asset.url;
-		$[21] = assetType;
-		$[22] = t11;
-	} else t11 = $[22];
+		$[20] = asset.mimeType;
+		$[21] = asset.url;
+		$[22] = assetType;
+		$[23] = t11;
+	} else t11 = $[23];
 	const t12 = asset.filename || "Untitled";
 	let t13;
-	if ($[23] !== asset.filename || $[24] !== t12) {
+	if ($[24] !== asset.filename || $[25] !== t12) {
 		t13 = /* @__PURE__ */ jsx("p", {
 			className: "flex-1 truncate text-left text-sm",
 			title: asset.filename,
 			children: t12
 		});
-		$[23] = asset.filename;
-		$[24] = t12;
-		$[25] = t13;
-	} else t13 = $[25];
+		$[24] = asset.filename;
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
 	let t14;
-	if ($[26] !== t10 || $[27] !== t11 || $[28] !== t13) {
+	if ($[27] !== t10 || $[28] !== t11 || $[29] !== t13) {
 		t14 = /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2",
 			onClick: t10,
 			children: [t11, t13]
 		});
-		$[26] = t10;
-		$[27] = t11;
-		$[28] = t13;
-		$[29] = t14;
-	} else t14 = $[29];
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
 	let t15;
-	if ($[30] !== asset._fileId || $[31] !== onRemove) {
+	if ($[31] !== asset._fileId || $[32] !== onRemove) {
 		t15 = () => onRemove(asset._fileId);
-		$[30] = asset._fileId;
-		$[31] = onRemove;
-		$[32] = t15;
-	} else t15 = $[32];
+		$[31] = asset._fileId;
+		$[32] = onRemove;
+		$[33] = t15;
+	} else t15 = $[33];
 	let t16;
-	if ($[33] !== asset._fileId || $[34] !== t15) {
+	if ($[34] !== asset._fileId || $[35] !== t15) {
 		t16 = /* @__PURE__ */ jsx(UnlinkAssetButton, {
 			fileId: asset._fileId,
 			onUnlink: t15,
 			className: "hidden group-focus-within:flex group-hover:flex"
 		});
-		$[33] = asset._fileId;
-		$[34] = t15;
-		$[35] = t16;
-	} else t16 = $[35];
+		$[34] = asset._fileId;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
 	let t17;
-	if ($[36] !== setNodeRef || $[37] !== style || $[38] !== t14 || $[39] !== t16 || $[40] !== t7 || $[41] !== t9) {
+	if ($[37] !== setNodeRef || $[38] !== style || $[39] !== t14 || $[40] !== t16 || $[41] !== t7 || $[42] !== t9) {
 		t17 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
 			ref: setNodeRef,
 			style,
@@ -162,21 +167,21 @@ const SortableAssetItem = (t0) => {
 				t16
 			]
 		}) });
-		$[36] = setNodeRef;
-		$[37] = style;
-		$[38] = t14;
-		$[39] = t16;
-		$[40] = t7;
-		$[41] = t9;
-		$[42] = t17;
-	} else t17 = $[42];
+		$[37] = setNodeRef;
+		$[38] = style;
+		$[39] = t14;
+		$[40] = t16;
+		$[41] = t7;
+		$[42] = t9;
+		$[43] = t17;
+	} else t17 = $[43];
 	return t17;
 };
 const MultipleAssetFieldEditor = (t0) => {
 	const $ = c(12);
-	if ($[0] !== "4a9a772ea33768d0b437f29310be43cbb00f08bde5995fde9df846193f68d652") {
+	if ($[0] !== "2cded293bac7099a2f0d21d69f3d54cce48c76ba242f02366ecaa807b6b79b7d") {
 		for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a9a772ea33768d0b437f29310be43cbb00f08bde5995fde9df846193f68d652";
+		$[0] = "2cded293bac7099a2f0d21d69f3d54cce48c76ba242f02366ecaa807b6b79b7d";
 	}
 	const { fieldName, assetType, currentData, onFieldChange } = t0;
 	const isImage = assetType === "Image";

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

@@ -35,8 +35,7 @@ const getSettingsFields = (schema) => {
 			fieldType: prop.fieldType,
 			label: prop.title,
 			enumLabels: prop.enumLabels,
-			enumValues: prop.enum,
-			arrayItemType: prop.arrayItemType
+			enumValues: prop.enum
 		};
 	});
 };
@@ -211,7 +210,7 @@ const PageContentSheet = () => {
 	const isMultipleAsset = React.useMemo(() => {
 		if (!isViewingAsset || !assetFieldName) return false;
 		const prop = currentSchema?.properties?.[assetFieldName];
-		return prop?.arrayItemType === "Image" || prop?.arrayItemType === "File";
+		return prop?.fieldType === "ImageList" || prop?.fieldType === "FileList";
 	}, [
 		isViewingAsset,
 		assetFieldName,