camox 0.43.0 → 0.45.0

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

@@ -1,71 +1,72 @@
 import { getAuthCookieHeader, getAuthRequestCredentials } from "../../../lib/auth.js";
-import { getApiUrl, getEnvironmentName } from "../../../lib/api-client.js";
+import { getApiUrl, getContentWriteHeaders } from "../../../lib/api-client.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
-import { fileMutations, fileQueries } from "../../../lib/queries.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
+import { fileMutations } from "../../../lib/queries.js";
 import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
 import { Metadata, MetadataRow, formatRelativeTime } from "./Metadata.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
+import { Label } from "@camox/ui/label";
+import { Switch } from "@camox/ui/switch";
 import { Check, Download, FileIcon, Info, Link, Loader2, Trash2, X } from "lucide-react";
-import { toast } from "@camox/ui/toaster";
+import { ButtonGroup } from "@camox/ui/button-group";
 import { Dialog, DialogContent, DialogTitle } from "@camox/ui/dialog";
-import { Label } from "@camox/ui/label";
+import { toast } from "@camox/ui/toaster";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { ButtonGroup } from "@camox/ui/button-group";
-import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/AssetLightbox.tsx
 function DeliveredSize(t0) {
-	const $ = c(16);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
-		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
-	}
-	const { bytes, raw } = t0;
+	const $ = c(17);
+	const { bytes, raw, estimated: t1 } = t0;
+	const estimated = t1 === void 0 ? true : t1;
 	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;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(Fragment, { children: "…" });
+			$[0] = t2;
+		} else t2 = $[0];
+		return t2;
 	}
 	let t2;
+	if ($[1] !== bytes || $[2] !== raw) {
+		t2 = raw != null && raw > 0 ? Math.round((raw - bytes) / raw * 100) : null;
+		$[1] = bytes;
+		$[2] = raw;
+		$[3] = t2;
+	} else t2 = $[3];
+	const savingsPct = t2;
+	if (savingsPct == null || savingsPct <= 0) {
+		const t3 = estimated ? "≈" : "";
+		let t4;
+		if ($[4] !== bytes) {
+			t4 = formatFileSize(bytes);
+			$[4] = bytes;
+			$[5] = t4;
+		} else t4 = $[5];
+		let t5;
+		if ($[6] !== t3 || $[7] !== t4) {
+			t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+			$[6] = t3;
+			$[7] = t4;
+			$[8] = t5;
+		} else t5 = $[8];
+		return t5;
+	}
+	const t3 = estimated ? "≈" : "";
+	let t4;
 	if ($[9] !== bytes) {
-		t2 = formatFileSize(bytes);
+		t4 = formatFileSize(bytes);
 		$[9] = bytes;
-		$[10] = t2;
-	} else t2 = $[10];
-	let t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
 	if ($[11] !== savingsPct) {
-		t3 = /* @__PURE__ */ jsxs("span", {
+		t5 = /* @__PURE__ */ jsxs("span", {
 			className: "text-muted-foreground",
 			children: [
 				"(−",
@@ -74,66 +75,91 @@ function DeliveredSize(t0) {
 			]
 		});
 		$[11] = savingsPct;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[13] !== t2 || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			"≈",
-			t2,
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t3 || $[14] !== t4 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t3,
+			t4,
 			" ",
-			t3
+			t5
 		] });
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
 }
 function DeliveredLabel(t0) {
-	const $ = c(4);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
-		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
-	}
-	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, {
+	const $ = c(13);
+	const { children, video: t1 } = t0;
+	const video = t1 === void 0 ? false : t1;
+	const t2 = video ? "About video optimization" : "About image optimization";
+	let t3;
+	if ($[0] !== t2) {
+		t3 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "text-muted-foreground hover:text-foreground",
+			"aria-label": t2
+		});
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" });
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== t3) {
+		t5 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: t3,
+			children: t4
+		});
+		$[3] = t3;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== video) {
+		t6 = /* @__PURE__ */ jsx(TooltipContent, {
 			className: "max-w-xs",
-			children: [
+			children: video ? /* @__PURE__ */ jsx(Fragment, { children: "Visitors receive the optimized video. The original is preserved." }) : /* @__PURE__ */ jsxs(Fragment, { 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", {
+			] })
+		});
+		$[5] = video;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== t5 || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Tooltip, { children: [t5, t6] });
+		$[7] = t5;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== children || $[11] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("span", {
 			className: "inline-flex items-center gap-1",
-			children: [children, t1]
+			children: [children, t7]
 		});
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
+		$[10] = children;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	return t8;
 }
 function formatFileSize(bytes) {
 	if (bytes < 1024) return `${bytes} B`;
-	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
+	return `${(bytes / 1073741824).toFixed(1)} GB`;
 }
 const DELIVERED_PHONE_WIDTH = 640;
 const DELIVERED_LAPTOP_WIDTH = 1280;
@@ -149,14 +175,24 @@ async function measureContentLength(url, signal) {
 		return null;
 	}
 }
+/**
+* What to tell an editor before replacing a file in use with one of another kind (an image with
+* a PDF, say): a field using it may not accept the new type, which blocks publishing, even for
+* content the draft never touched. Undefined when there's nothing to warn about.
+*/
+function replacementTypeWarning(currentType, nextType, uses) {
+	if (!currentType || uses === 0) return void 0;
+	const kind = (mimeType) => mimeType.split("/")[0] || mimeType;
+	if (kind(currentType) === kind(nextType)) return void 0;
+	return `${uses === 1 ? "1 block uses" : `${uses} blocks use`} this ${kind(currentType)}, and their fields may not accept a ${nextType || "file of unknown type"}. Publishing is blocked until each one accepts the new file. Replace anyway?`;
+}
 const AssetLightbox = ({ open, onOpenChange, fileId }) => {
-	const replaceFile = useMutation(fileMutations.replace());
 	const deleteFile = useMutation(fileMutations.delete());
 	const setAiMetadata = useMutation(fileMutations.setAiMetadata());
 	const setFilename = useMutation(fileMutations.setFilename());
 	const setAlt = useMutation(fileMutations.setAlt());
-	const { data: file } = useQuery(fileQueries.get(fileId));
-	const { data: usageCount } = useQuery(fileQueries.getUsageCount(fileId));
+	const { data: file } = useReadQuery(reads.file(fileId));
+	const { data: usageCount } = useReadQuery(reads.fileUsageCount(fileId));
 	const [uploadState, setUploadState] = useState(null);
 	const replaceInputRef = useRef(null);
 	const containerRef = useRef(null);
@@ -164,16 +200,21 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 	const [zoomedWidth, setZoomedWidth] = useState(null);
 	const clickFractionRef = useRef(null);
 	const [deliveredSizes, setDeliveredSizes] = useState(null);
-	useEffect(() => {
+	const [previousOpen, setPreviousOpen] = useState(open);
+	if (open !== previousOpen) {
+		setPreviousOpen(open);
 		if (!open) {
 			setZoomed(false);
 			setZoomedWidth(null);
 		}
-	}, [open]);
+	}
 	const isImage = file?.mimeType?.startsWith("image/") ?? false;
+	const isVideo = file?.mimeType?.startsWith("video/") ?? false;
 	const canUseAiMetadata = isRasterImage(file?.mimeType);
 	const fileUrl = file?.url;
 	const fileMimeType = file?.mimeType;
+	const fileSize = file?.size;
+	const fileProjectId = file?.projectId;
 	useEffect(() => {
 		if (!open || !isImage || !fileUrl) {
 			setDeliveredSizes(null);
@@ -182,12 +223,12 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		const phoneUrl = transformImageUrl(fileUrl, {
 			width: DELIVERED_PHONE_WIDTH,
 			mimeType: fileMimeType,
-			size: file?.size
+			size: fileSize
 		});
 		const laptopUrl = transformImageUrl(fileUrl, {
 			width: DELIVERED_LAPTOP_WIDTH,
 			mimeType: fileMimeType,
-			size: file?.size
+			size: fileSize
 		});
 		if (phoneUrl === fileUrl && laptopUrl === fileUrl) {
 			setDeliveredSizes(null);
@@ -212,7 +253,8 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		open,
 		isImage,
 		fileUrl,
-		fileMimeType
+		fileMimeType,
+		fileSize
 	]);
 	useEffect(() => {
 		if (!zoomed || !zoomedWidth || !containerRef.current || !clickFractionRef.current) return;
@@ -230,47 +272,41 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 	const handleReplaceDrop = useCallback(async (files) => {
 		const droppedFile = files[0];
 		if (!droppedFile) return;
+		const warning = replacementTypeWarning(fileMimeType, droppedFile.type, usageCount ?? 0);
+		if (warning && !window.confirm(warning)) return;
 		setUploadState({
 			status: "uploading",
 			progress: 0,
 			filename: droppedFile.name
 		});
+		const draft = getContentWriteHeaders();
 		try {
 			const formData = new FormData();
 			formData.append("file", droppedFile);
-			formData.append("projectId", String(file?.projectId ?? 0));
-			const envName = getEnvironmentName();
+			formData.append("projectId", String(fileProjectId ?? 0));
 			const authCookieHeader = getAuthCookieHeader();
-			const uploadRes = await fetch(`${getApiUrl()}/files/upload`, {
+			const uploadRes = await fetch(`${getApiUrl()}/files/${fileId}/content`, {
 				method: "POST",
 				body: formData,
 				credentials: getAuthRequestCredentials(authCookieHeader),
 				headers: {
 					...authCookieHeader ? { "Better-Auth-Cookie": authCookieHeader } : {},
-					...envName ? { "x-environment-name": envName } : {}
+					...draft.headers
 				}
 			});
+			draft.settle(uploadRes.ok);
 			if (!uploadRes.ok) throw new Error(`Upload failed: ${uploadRes.status}`);
-			setUploadState((prev_0) => prev_0 ? {
-				...prev_0,
-				status: "committing",
-				progress: 100
-			} : prev_0);
-			const { id: newFileId } = await uploadRes.json();
-			await replaceFile.mutateAsync({
-				id: fileId,
-				newFileId
-			});
-			setUploadState((prev_1) => prev_1 ? {
-				...prev_1,
+			setUploadState((prev) => prev ? {
+				...prev,
 				status: "complete"
-			} : prev_1);
+			} : prev);
 			toast.success("File replaced");
 			setTimeout(() => {
 				setUploadState(null);
 				onOpenChange(false);
 			}, 600);
 		} catch (err) {
+			draft.settle(false);
 			const message = err instanceof Error ? err.message : "Upload failed";
 			setUploadState((prev) => prev ? {
 				...prev,
@@ -281,8 +317,9 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 			setTimeout(() => setUploadState(null), 3e3);
 		}
 	}, [
-		replaceFile,
-		file?.projectId,
+		fileProjectId,
+		fileMimeType,
+		usageCount,
 		fileId,
 		onOpenChange
 	]);
@@ -333,18 +370,18 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 							ref: containerRef,
 							className: `checkered absolute inset-0 ${zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden p-6"}`,
 							onClick: (e) => {
-								const img_0 = containerRef.current?.querySelector("img");
-								if (!img_0) return;
+								const img = containerRef.current?.querySelector("img");
+								if (!img) return;
 								if (!zoomed) {
-									const rect = img_0.getBoundingClientRect();
+									const rect = img.getBoundingClientRect();
 									clickFractionRef.current = {
 										x: (e.clientX - rect.left) / rect.width,
 										y: (e.clientY - rect.top) / rect.height
 									};
-									const container_0 = containerRef.current;
-									const scaleForWidth = container_0.clientWidth * 2.5 / img_0.clientWidth;
-									const scaleForHeight = container_0.clientHeight * 2.5 / img_0.clientHeight;
-									setZoomedWidth(img_0.clientWidth * Math.max(scaleForWidth, scaleForHeight));
+									const container = containerRef.current;
+									const scaleForWidth = container.clientWidth * 2.5 / img.clientWidth;
+									const scaleForHeight = container.clientHeight * 2.5 / img.clientHeight;
+									setZoomedWidth(img.clientWidth * Math.max(scaleForWidth, scaleForHeight));
 									setZoomed(true);
 								} else {
 									setZoomed(false);
@@ -367,6 +404,16 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 								className: "max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
 								draggable: false
 							})
+						}) : isVideo ? /* @__PURE__ */ jsx("div", {
+							className: "checkered absolute inset-0 flex items-center justify-center p-6",
+							children: open && /* @__PURE__ */ jsx("video", {
+								src: file.url,
+								controls: true,
+								playsInline: true,
+								preload: "metadata",
+								"aria-label": file.alt || file.filename || "Video preview",
+								className: "max-h-full max-w-full object-contain shadow-lg"
+							}, file.url)
 						}) : /* @__PURE__ */ jsx("div", {
 							className: "bg-muted/30 flex h-full min-h-[70vh] items-center justify-center p-6",
 							children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-16 w-16" })
@@ -453,7 +500,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									children: [/* @__PURE__ */ jsx(Switch, {
 										id: "ai-metadata",
 										disabled: !canUseAiMetadata,
-										checked: canUseAiMetadata && file.aiMetadataEnabled !== false,
+										checked: canUseAiMetadata && file.aiMetadata,
 										onCheckedChange: (checked) => {
 											setAiMetadata.mutate({
 												id: fileId,
@@ -470,7 +517,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									label: "File name",
 									placeholder: "File name...",
 									initialValue: file.filename,
-									disabled: canUseAiMetadata && file.aiMetadataEnabled !== false,
+									disabled: canUseAiMetadata && file.aiMetadata,
 									onSave: (value) => setFilename.mutate({
 										id: fileId,
 										filename: value
@@ -480,11 +527,11 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									label: "Alt text",
 									placeholder: "Describe this file...",
 									initialValue: file.alt,
-									disabled: canUseAiMetadata && file.aiMetadataEnabled !== false,
+									disabled: canUseAiMetadata && file.aiMetadata,
 									rows: 2,
-									onSave: (value_0) => setAlt.mutate({
+									onSave: (value) => setAlt.mutate({
 										id: fileId,
-										alt: value_0
+										alt: value
 									})
 								}),
 								/* @__PURE__ */ jsxs(Metadata, { children: [
@@ -509,6 +556,17 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 											raw: file.size
 										})
 									})] }),
+									isVideo && file.optimizedSize != null && /* @__PURE__ */ jsx(MetadataRow, {
+										label: /* @__PURE__ */ jsx(DeliveredLabel, {
+											video: true,
+											children: "Delivered"
+										}),
+										children: /* @__PURE__ */ jsx(DeliveredSize, {
+											bytes: file.optimizedSize,
+											raw: file.size,
+											estimated: false
+										})
+									}),
 									/* @__PURE__ */ jsx(MetadataRow, {
 										label: "Created",
 										children: formatRelativeTime(file.createdAt)
@@ -530,17 +588,17 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									ref: replaceInputRef,
 									type: "file",
 									className: "hidden",
-									accept: isImage ? "image/*" : "*/*",
-									onChange: (e_0) => {
-										if (e_0.target.files) handleReplaceDrop(e_0.target.files);
-										e_0.target.value = "";
+									accept: isImage ? "image/*" : isVideo ? "video/*" : "*/*",
+									onChange: (e) => {
+										if (e.target.files) handleReplaceDrop(e.target.files);
+										e.target.value = "";
 									}
 								}),
 								/* @__PURE__ */ jsx(Button, {
 									type: "button",
 									variant: "secondary",
 									onClick: () => replaceInputRef.current?.click(),
-									children: isImage ? "Replace image" : "Replace file"
+									children: isImage ? "Replace image" : isVideo ? "Replace video" : "Replace file"
 								})
 							]
 						})
@@ -552,4 +610,4 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 };
 
 //#endregion
-export { AssetLightbox };
+export { AssetLightbox, replacementTypeWarning };