camox 0.44.0 → 0.45.0

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

@@ -1,6 +1,6 @@
-import { useProjectSlug } from "../../../lib/auth.js";
+import { useProjectUuid } from "../../../lib/auth.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.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";
@@ -8,7 +8,6 @@ import { AssetLightbox } from "./AssetLightbox.js";
 import { AssetPickerModal } from "./AssetPickerModal.js";
 import { UnlinkAssetButton } from "./UnlinkAssetButton.js";
 import { c } from "react/compiler-runtime";
-import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
@@ -20,73 +19,77 @@ function assetLabel(isImage, multiple) {
 	return multiple ? "files" : "file";
 }
 const AssetActionButtons = (t0) => {
-	const $ = c(27);
-	if ($[0] !== "4a65b10e6768746c3b5e48410da30f980b826ef25e0b19c47e522622b4dd7baf") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a65b10e6768746c3b5e48410da30f980b826ef25e0b19c47e522622b4dd7baf";
-	}
-	const { isImage, multiple, fileInputRef, onPickerOpen, onFilesSelected, uploads } = t0;
+	const $ = c(29);
+	const { isImage, multiple, fileInputRef, onPickerOpen, onFilesSelected, uploads, accept } = t0;
 	let t1;
-	if ($[1] !== isImage || $[2] !== multiple) {
+	if ($[0] !== isImage || $[1] !== multiple) {
 		t1 = assetLabel(isImage, multiple);
-		$[1] = isImage;
-		$[2] = multiple;
-		$[3] = t1;
-	} else t1 = $[3];
+		$[0] = isImage;
+		$[1] = multiple;
+		$[2] = t1;
+	} else t1 = $[2];
 	let t2;
-	if ($[4] !== onPickerOpen || $[5] !== t1) {
+	if ($[3] !== onPickerOpen || $[4] !== t1) {
 		t2 = /* @__PURE__ */ jsxs(Button, {
+			type: "button",
 			variant: "default",
 			className: "mx-auto flex w-full",
 			onClick: onPickerOpen,
 			children: ["Select existing ", t1]
 		});
-		$[4] = onPickerOpen;
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[3] = onPickerOpen;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[7] !== fileInputRef) {
+	if ($[6] !== fileInputRef) {
 		t3 = () => fileInputRef.current?.click();
-		$[7] = fileInputRef;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[6] = fileInputRef;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" });
-		$[9] = t4;
-	} else t4 = $[9];
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[10] !== t3) {
+	if ($[9] !== t3) {
 		t5 = /* @__PURE__ */ jsxs(Button, {
+			type: "button",
 			variant: "secondary",
 			className: "mx-auto flex w-full",
 			onClick: t3,
 			children: [t4, "Upload new"]
 		});
-		$[10] = t3;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground text-center text-xs",
 			children: "Or drag anywhere to upload"
 		});
-		$[12] = t6;
-	} else t6 = $[12];
-	const t7 = isImage ? "image/*" : "*/*";
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== accept || $[13] !== isImage) {
+		t7 = accept?.join(",") ?? (isImage ? "image/*" : "*/*");
+		$[12] = accept;
+		$[13] = isImage;
+		$[14] = t7;
+	} else t7 = $[14];
 	let t8;
-	if ($[13] !== onFilesSelected) {
+	if ($[15] !== onFilesSelected) {
 		t8 = (e) => {
 			if (e.target.files) onFilesSelected(e.target.files);
 			e.target.value = "";
 		};
-		$[13] = onFilesSelected;
-		$[14] = t8;
-	} else t8 = $[14];
+		$[15] = onFilesSelected;
+		$[16] = t8;
+	} else t8 = $[16];
 	let t9;
-	if ($[15] !== fileInputRef || $[16] !== multiple || $[17] !== t7 || $[18] !== t8) {
+	if ($[17] !== fileInputRef || $[18] !== multiple || $[19] !== t7 || $[20] !== t8) {
 		t9 = /* @__PURE__ */ jsx("input", {
 			type: "file",
 			ref: fileInputRef,
@@ -95,20 +98,20 @@ const AssetActionButtons = (t0) => {
 			multiple,
 			onChange: t8
 		});
-		$[15] = fileInputRef;
-		$[16] = multiple;
-		$[17] = t7;
-		$[18] = t8;
-		$[19] = t9;
-	} else t9 = $[19];
+		$[17] = fileInputRef;
+		$[18] = multiple;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
 	let t10;
-	if ($[20] !== uploads) {
+	if ($[22] !== uploads) {
 		t10 = uploads.length > 0 && /* @__PURE__ */ jsx("div", { children: uploads.map(_temp) });
-		$[20] = uploads;
-		$[21] = t10;
-	} else t10 = $[21];
+		$[22] = uploads;
+		$[23] = t10;
+	} else t10 = $[23];
 	let t11;
-	if ($[22] !== t10 || $[23] !== t2 || $[24] !== t5 || $[25] !== t9) {
+	if ($[24] !== t10 || $[25] !== t2 || $[26] !== t5 || $[27] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t2,
 			t5,
@@ -116,81 +119,91 @@ const AssetActionButtons = (t0) => {
 			t9,
 			t10
 		] });
-		$[22] = t10;
-		$[23] = t2;
-		$[24] = t5;
-		$[25] = t9;
-		$[26] = t11;
-	} else t11 = $[26];
+		$[24] = t10;
+		$[25] = t2;
+		$[26] = t5;
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
 	return t11;
 };
 const SingleAssetFieldEditor = (t0) => {
-	const $ = c(37);
-	if ($[0] !== "4a65b10e6768746c3b5e48410da30f980b826ef25e0b19c47e522622b4dd7baf") {
-		for (let $i = 0; $i < 37; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a65b10e6768746c3b5e48410da30f980b826ef25e0b19c47e522622b4dd7baf";
-	}
-	const { fieldName, assetType, currentData, onFieldChange } = t0;
+	const $ = c(41);
+	const { fieldName, assetType, currentData, onFieldChange, resolveLocally: t1, offerDelete: t2, accept } = t0;
+	const resolveLocally = t1 === void 0 ? false : t1;
+	const offerDelete = t2 === void 0 ? true : t2;
 	const asset = currentData[fieldName];
 	const hasAsset = !!asset?.url;
 	const [lightboxOpen, setLightboxOpen] = React.useState(false);
 	const [pickerOpen, setPickerOpen] = React.useState(false);
 	const isImage = assetType === "Image";
 	const fileInputRef = React.useRef(null);
-	const projectSlug = useProjectSlug();
-	let t1;
-	if ($[1] !== projectSlug) {
-		t1 = projectQueries.getBySlug(projectSlug);
-		$[1] = projectSlug;
-		$[2] = t1;
-	} else t1 = $[2];
-	const { data: project } = useQuery(t1);
-	const t2 = project?.id;
+	const projectUuid = useProjectUuid();
 	let t3;
-	if ($[3] !== fieldName || $[4] !== onFieldChange) {
-		t3 = (result) => {
-			onFieldChange(fieldName, { _fileId: Number(result.fileId) });
+	if ($[0] !== projectUuid) {
+		t3 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t3;
+	} else t3 = $[1];
+	const { data: project } = useReadQuery(t3);
+	const t4 = project?.id;
+	let t5;
+	if ($[2] !== fieldName || $[3] !== onFieldChange || $[4] !== resolveLocally) {
+		t5 = (result) => {
+			onFieldChange(fieldName, {
+				...resolveLocally ? {
+					...result,
+					alt: ""
+				} : {},
+				_fileId: result.fileId
+			});
 		};
-		$[3] = fieldName;
-		$[4] = onFieldChange;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t2 || $[7] !== t3) {
-		t4 = {
-			projectId: t2,
-			onFileCommitted: t3
+		$[2] = fieldName;
+		$[3] = onFieldChange;
+		$[4] = resolveLocally;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== t4 || $[7] !== t5) {
+		t6 = {
+			projectId: t4,
+			onFileCommitted: t5
 		};
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	const { uploads, uploadFiles } = useFileUpload(t4);
-	let t5;
+		$[6] = t4;
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	const { uploads, uploadFiles } = useFileUpload(t6);
+	let t7;
 	if ($[9] !== uploadFiles) {
-		t5 = (files) => {
+		t7 = (files) => {
+			if (!files.length) return;
 			const dt = new DataTransfer();
 			dt.items.add(files[0]);
 			uploadFiles(dt.files);
 		};
 		$[9] = uploadFiles;
-		$[10] = t5;
-	} else t5 = $[10];
-	const handleDrop = t5;
-	let t6;
-	if ($[11] !== fieldName || $[12] !== onFieldChange) {
-		t6 = (file) => {
-			onFieldChange(fieldName, { _fileId: file.id });
+		$[10] = t7;
+	} else t7 = $[10];
+	const handleDrop = t7;
+	let t8;
+	if ($[11] !== fieldName || $[12] !== onFieldChange || $[13] !== resolveLocally) {
+		t8 = (file) => {
+			onFieldChange(fieldName, {
+				...resolveLocally ? file : {},
+				_fileId: file.id
+			});
 			setPickerOpen(false);
 		};
 		$[11] = fieldName;
 		$[12] = onFieldChange;
-		$[13] = t6;
-	} else t6 = $[13];
-	const handleSelectExisting = t6;
-	let t7;
-	if ($[14] !== asset || $[15] !== fieldName || $[16] !== hasAsset || $[17] !== isImage || $[18] !== lightboxOpen || $[19] !== onFieldChange) {
-		t7 = hasAsset && /* @__PURE__ */ jsxs("div", {
+		$[13] = resolveLocally;
+		$[14] = t8;
+	} else t8 = $[14];
+	const handleSelectExisting = t8;
+	let t9;
+	if ($[15] !== asset || $[16] !== fieldName || $[17] !== hasAsset || $[18] !== isImage || $[19] !== lightboxOpen || $[20] !== offerDelete || $[21] !== onFieldChange || $[22] !== resolveLocally) {
+		t9 = hasAsset && /* @__PURE__ */ jsxs("div", {
 			className: "text-foreground hover:bg-accent/75 flex max-w-full flex-row items-center gap-2 rounded-lg border-2 px-1 py-1",
 			children: [
 				/* @__PURE__ */ jsxs("button", {
@@ -218,7 +231,9 @@ const SingleAssetFieldEditor = (t0) => {
 					})]
 				}),
 				/* @__PURE__ */ jsx(UnlinkAssetButton, {
-					fileId: asset._fileId != null ? Number(asset._fileId) : void 0,
+					fileId: asset._fileId,
+					persisted: !resolveLocally,
+					offerDelete,
 					onUnlink: () => {
 						onFieldChange(fieldName, null);
 					}
@@ -226,51 +241,55 @@ const SingleAssetFieldEditor = (t0) => {
 				asset._fileId && /* @__PURE__ */ jsx(AssetLightbox, {
 					open: lightboxOpen,
 					onOpenChange: setLightboxOpen,
-					fileId: Number(asset._fileId)
+					fileId: asset._fileId
 				})
 			]
 		});
-		$[14] = asset;
-		$[15] = fieldName;
-		$[16] = hasAsset;
-		$[17] = isImage;
-		$[18] = lightboxOpen;
-		$[19] = onFieldChange;
-		$[20] = t7;
-	} else t7 = $[20];
-	let t8;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = () => setPickerOpen(true);
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== handleDrop || $[23] !== isImage || $[24] !== uploads) {
-		t9 = /* @__PURE__ */ jsx(AssetActionButtons, {
+		$[15] = asset;
+		$[16] = fieldName;
+		$[17] = hasAsset;
+		$[18] = isImage;
+		$[19] = lightboxOpen;
+		$[20] = offerDelete;
+		$[21] = onFieldChange;
+		$[22] = resolveLocally;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => setPickerOpen(true);
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== accept || $[26] !== handleDrop || $[27] !== isImage || $[28] !== uploads) {
+		t11 = /* @__PURE__ */ jsx(AssetActionButtons, {
 			isImage,
 			multiple: false,
 			fileInputRef,
-			onPickerOpen: t8,
+			onPickerOpen: t10,
 			onFilesSelected: handleDrop,
-			uploads
+			uploads,
+			accept
 		});
-		$[22] = handleDrop;
-		$[23] = isImage;
-		$[24] = uploads;
-		$[25] = t9;
-	} else t9 = $[25];
-	let t10;
-	if ($[26] !== t7 || $[27] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+		$[25] = accept;
+		$[26] = handleDrop;
+		$[27] = isImage;
+		$[28] = uploads;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== t11 || $[31] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-4 px-2 py-4",
-			children: [t7, t9]
+			children: [t9, t11]
 		});
-		$[26] = t7;
-		$[27] = t9;
-		$[28] = t10;
-	} else t10 = $[28];
-	let t11;
-	if ($[29] !== assetType || $[30] !== handleSelectExisting || $[31] !== pickerOpen) {
-		t11 = /* @__PURE__ */ jsx(AssetPickerModal, {
+		$[30] = t11;
+		$[31] = t9;
+		$[32] = t12;
+	} else t12 = $[32];
+	let t13;
+	if ($[33] !== assetType || $[34] !== handleSelectExisting || $[35] !== pickerOpen) {
+		t13 = /* @__PURE__ */ jsx(AssetPickerModal, {
 			open: pickerOpen,
 			onOpenChange: setPickerOpen,
 			assetType,
@@ -278,23 +297,23 @@ const SingleAssetFieldEditor = (t0) => {
 			onSelectSingle: handleSelectExisting,
 			onSelectMultiple: _temp2
 		});
-		$[29] = assetType;
-		$[30] = handleSelectExisting;
-		$[31] = pickerOpen;
-		$[32] = t11;
-	} else t11 = $[32];
-	let t12;
-	if ($[33] !== handleDrop || $[34] !== t10 || $[35] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(UploadDropZone, {
+		$[33] = assetType;
+		$[34] = handleSelectExisting;
+		$[35] = pickerOpen;
+		$[36] = t13;
+	} else t13 = $[36];
+	let t14;
+	if ($[37] !== handleDrop || $[38] !== t12 || $[39] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(UploadDropZone, {
 			onDrop: handleDrop,
-			children: [t10, t11]
+			children: [t12, t13]
 		});
-		$[33] = handleDrop;
-		$[34] = t10;
-		$[35] = t11;
-		$[36] = t12;
-	} else t12 = $[36];
-	return t12;
+		$[37] = handleDrop;
+		$[38] = t12;
+		$[39] = t13;
+		$[40] = t14;
+	} else t14 = $[40];
+	return t14;
 };
 function _temp(item) {
 	return /* @__PURE__ */ jsx(UploadItemRow, { item }, item.id);