camox 0.18.2 → 0.20.0

package/dist/features/content/CamoxContent.js

@@ -1,5 +1,6 @@
 import { useProjectSlug } from "../../lib/auth.js";
 import { fileMutations, fileQueries, projectQueries } from "../../lib/queries.js";
+import { checkIfInputFocused } from "../../lib/utils.js";
 import { UploadDropZone } from "./components/UploadDropZone.js";
 import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../hooks/use-file-upload.js";
@@ -10,7 +11,7 @@ import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
 import { ContentSidebar } from "./components/ContentSidebar.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { PanelContent } from "@camox/ui/panel";
@@ -18,10 +19,10 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/content/CamoxContent.tsx
 const CamoxContent = () => {
-	const $ = c(50);
-	if ($[0] !== "555aaa7d0dfb9d48290ff084e4bccb6f79b8d215cf4511a7189c87640abf6593") {
-		for (let $i = 0; $i < 50; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "555aaa7d0dfb9d48290ff084e4bccb6f79b8d215cf4511a7189c87640abf6593";
+	const $ = c(53);
+	if ($[0] !== "41ba2e77784594f1ce07296c7a619951f1b5765164f78c588070f4799d74d906") {
+		for (let $i = 0; $i < 53; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "41ba2e77784594f1ce07296c7a619951f1b5765164f78c588070f4799d74d906";
 	}
 	const projectSlug = useProjectSlug();
 	let t0;
@@ -80,54 +81,76 @@ const CamoxContent = () => {
 		$[12] = t8;
 	} else t8 = $[12];
 	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
-	let t9;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(ContentSidebar, {});
-		$[13] = t9;
-	} else t9 = $[13];
 	let t10;
-	if ($[14] !== didDragRef) {
-		t10 = () => {
+	let t9;
+	if ($[13] !== lightboxFileId) {
+		t9 = () => {
+			const handleKeyDown = (event) => {
+				if (event.key !== "Escape") return;
+				if (lightboxFileId !== null) return;
+				if (checkIfInputFocused()) return;
+				setSelectedIds(_temp);
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			return () => document.removeEventListener("keydown", handleKeyDown);
+		};
+		t10 = [lightboxFileId];
+		$[13] = lightboxFileId;
+		$[14] = t10;
+		$[15] = t9;
+	} else {
+		t10 = $[14];
+		t9 = $[15];
+	}
+	useEffect(t9, t10);
+	let t11;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ContentSidebar, {});
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== didDragRef) {
+		t12 = () => {
 			if (didDragRef.current) {
 				didDragRef.current = false;
 				return;
 			}
 			setSelectedIds(/* @__PURE__ */ new Set());
 		};
-		$[14] = didDragRef;
-		$[15] = t10;
-	} else t10 = $[15];
-	let t11;
-	if ($[16] !== files) {
-		t11 = files === void 0 && /* @__PURE__ */ jsx("div", {
+		$[17] = didDragRef;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== files) {
+		t13 = files === void 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
-			children: Array.from({ length: 12 }, _temp)
+			children: Array.from({ length: 12 }, _temp2)
 		});
-		$[16] = files;
-		$[17] = t11;
-	} else t11 = $[17];
-	let t12;
-	if ($[18] !== files?.length) {
-		t12 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
+		$[19] = files;
+		$[20] = t13;
+	} else t13 = $[20];
+	let t14;
+	if ($[21] !== files?.length) {
+		t14 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex h-full flex-1 items-center justify-center",
 			children: /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
 				children: "No assets yet"
 			})
 		});
-		$[18] = files?.length;
-		$[19] = t12;
-	} else t12 = $[19];
-	let t13;
-	if ($[20] !== files || $[21] !== selectedIds) {
-		t13 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+		$[21] = files?.length;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== files || $[24] !== selectedIds) {
+		t15 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
 				file,
 				selected: selectedIds.has(String(file.id)),
 				onSelect: () => {
-					setSelectedIds((prev) => {
-						const next = new Set(prev);
+					setSelectedIds((prev_0) => {
+						const next = new Set(prev_0);
 						if (next.has(String(file.id))) next.delete(String(file.id));
 						else next.add(String(file.id));
 						return next;
@@ -136,13 +159,13 @@ const CamoxContent = () => {
 				onOpen: () => setLightboxFileId(file.id)
 			}, file.id))
 		});
-		$[20] = files;
-		$[21] = selectedIds;
-		$[22] = t13;
-	} else t13 = $[22];
-	let t14;
-	if ($[23] !== selectionRect) {
-		t14 = selectionRect && /* @__PURE__ */ jsx("div", {
+		$[23] = files;
+		$[24] = selectedIds;
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== selectionRect) {
+		t16 = selectionRect && /* @__PURE__ */ jsx("div", {
 			className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
 			style: {
 				left: selectionRect.left,
@@ -151,62 +174,62 @@ const CamoxContent = () => {
 				height: selectionRect.height
 			}
 		});
-		$[23] = selectionRect;
-		$[24] = t14;
-	} else t14 = $[24];
-	let t15;
-	if ($[25] !== handlers.onPointerDown || $[26] !== handlers.onPointerMove || $[27] !== handlers.onPointerUp || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14) {
-		t15 = /* @__PURE__ */ jsxs(PanelContent, {
+		$[26] = selectionRect;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== handlers.onPointerDown || $[29] !== handlers.onPointerMove || $[30] !== handlers.onPointerUp || $[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== t15 || $[35] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(PanelContent, {
 			ref: containerRef,
 			className: "relative p-4 select-none",
-			onClick: t10,
+			onClick: t12,
 			onPointerDown: handlers.onPointerDown,
 			onPointerMove: handlers.onPointerMove,
 			onPointerUp: handlers.onPointerUp,
 			children: [
-				t11,
-				t12,
 				t13,
-				t14
+				t14,
+				t15,
+				t16
 			]
 		});
-		$[25] = handlers.onPointerDown;
-		$[26] = handlers.onPointerMove;
-		$[27] = handlers.onPointerUp;
-		$[28] = t10;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t14;
-		$[33] = t15;
-	} else t15 = $[33];
-	let t16;
-	if ($[34] !== t15 || $[35] !== uploadFiles) {
-		t16 = /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 flex-1 flex-col",
+		$[28] = handlers.onPointerDown;
+		$[29] = handlers.onPointerMove;
+		$[30] = handlers.onPointerUp;
+		$[31] = t12;
+		$[32] = t13;
+		$[33] = t14;
+		$[34] = t15;
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t17 || $[38] !== uploadFiles) {
+		t18 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 min-w-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsx(UploadDropZone, {
 				onDrop: uploadFiles,
-				className: "flex flex-1 flex-col",
-				children: t15
+				className: "flex min-h-0 flex-1 flex-col",
+				children: t17
 			})
 		});
-		$[34] = t15;
-		$[35] = uploadFiles;
-		$[36] = t16;
-	} else t16 = $[36];
-	let t17;
-	if ($[37] !== clearAll || $[38] !== uploads) {
-		t17 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
+		$[37] = t17;
+		$[38] = uploadFiles;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== clearAll || $[41] !== uploads) {
+		t19 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
 			uploads,
 			onClose: clearAll
 		});
-		$[37] = clearAll;
-		$[38] = uploads;
-		$[39] = t17;
-	} else t17 = $[39];
-	let t18;
-	if ($[40] !== deleteFiles || $[41] !== selectedIds) {
-		t18 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
+		$[40] = clearAll;
+		$[41] = uploads;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== deleteFiles || $[44] !== selectedIds) {
+		t20 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
 			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground",
@@ -226,43 +249,46 @@ const CamoxContent = () => {
 				children: deleteFiles.isPending ? "Deleting…" : "Delete"
 			})]
 		});
-		$[40] = deleteFiles;
-		$[41] = selectedIds;
-		$[42] = t18;
-	} else t18 = $[42];
-	let t19;
-	if ($[43] !== lightboxFileId) {
-		t19 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+		$[43] = deleteFiles;
+		$[44] = selectedIds;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== lightboxFileId) {
+		t21 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: true,
 			onOpenChange: (open) => {
 				if (!open) setLightboxFileId(null);
 			},
 			fileId: lightboxFileId
 		});
-		$[43] = lightboxFileId;
-		$[44] = t19;
-	} else t19 = $[44];
-	let t20;
-	if ($[45] !== t16 || $[46] !== t17 || $[47] !== t18 || $[48] !== t19) {
-		t20 = /* @__PURE__ */ jsxs("div", {
+		$[46] = lightboxFileId;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t18 || $[49] !== t19 || $[50] !== t20 || $[51] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-1 flex-row",
 			children: [
-				t9,
-				t16,
-				t17,
+				t11,
 				t18,
-				t19
+				t19,
+				t20,
+				t21
 			]
 		});
-		$[45] = t16;
-		$[46] = t17;
-		$[47] = t18;
-		$[48] = t19;
-		$[49] = t20;
-	} else t20 = $[49];
-	return t20;
+		$[48] = t18;
+		$[49] = t19;
+		$[50] = t20;
+		$[51] = t21;
+		$[52] = t22;
+	} else t22 = $[52];
+	return t22;
 };
-function _temp(_, i) {
+function _temp(prev) {
+	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();
+}
+function _temp2(_, i) {
 	return /* @__PURE__ */ jsx(AssetCardSkeleton, {}, i);
 }
 

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

@@ -15,8 +15,8 @@ import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Copy, Pen, Settings, Trash2 } from "lucide-react";
-import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 
 //#region src/features/preview/components/BlockActionsPopover.tsx
 const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start", isLayoutBlock, layoutPlacement }) => {

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

@@ -12,9 +12,9 @@ import { useSelector } from "@xstate/store-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
+import { Spinner } from "@camox/ui/spinner";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { Spinner } from "@camox/ui/spinner";
 import { Textarea } from "@camox/ui/textarea";
 import { useForm } from "@tanstack/react-form";
 

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

@@ -1,3 +1,4 @@
+import { useDebouncedField } from "../../../hooks/use-debounced-field.js";
 import { c } from "react/compiler-runtime";
 import { Input } from "@camox/ui/input";
 import { Label } from "@camox/ui/label";
@@ -7,77 +8,45 @@ import { Textarea } from "@camox/ui/textarea";
 
 //#region src/features/preview/components/DebouncedFieldEditor.tsx
 const DebouncedFieldEditor = (t0) => {
-	const $ = c(23);
-	if ($[0] !== "b4acdbdf8d2c83fc60b024b0d396faa1ca600b59ef52a07c5cbc6cb95d6648a6") {
-		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b4acdbdf8d2c83fc60b024b0d396faa1ca600b59ef52a07c5cbc6cb95d6648a6";
+	const $ = c(20);
+	if ($[0] !== "b055596bded307c924a7395888c92fcea4e52513ebc4fda5ab62fb2105997062") {
+		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "b055596bded307c924a7395888c92fcea4e52513ebc4fda5ab62fb2105997062";
 	}
 	const { label, placeholder, initialValue, onSave, disabled, rows } = t0;
-	const [value, setValue] = React.useState(initialValue);
-	const timerRef = React.useRef(null);
+	const { value, setValue, onFocus, onBlur } = useDebouncedField(initialValue, onSave);
 	const inputId = React.useId();
 	let t1;
-	let t2;
-	if ($[1] !== initialValue) {
-		t1 = () => {
-			setValue(initialValue);
-		};
-		t2 = [initialValue];
-		$[1] = initialValue;
-		$[2] = t1;
-		$[3] = t2;
-	} else {
-		t1 = $[2];
-		t2 = $[3];
-	}
-	React.useEffect(t1, t2);
-	let t3;
-	if ($[4] !== disabled || $[5] !== onSave || $[6] !== rows) {
-		t3 = (newValue) => {
+	if ($[1] !== disabled || $[2] !== rows || $[3] !== setValue) {
+		t1 = (newValue) => {
 			if (disabled) return;
 			if (rows) newValue = newValue.replace(/\n/g, " ");
 			setValue(newValue);
-			if (timerRef.current) clearTimeout(timerRef.current);
-			timerRef.current = window.setTimeout(() => {
-				onSave(newValue);
-			}, 500);
-		};
-		$[4] = disabled;
-		$[5] = onSave;
-		$[6] = rows;
-		$[7] = t3;
-	} else t3 = $[7];
-	const handleChange = t3;
-	let t4;
-	let t5;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
 		};
-		t5 = [];
-		$[8] = t4;
-		$[9] = t5;
-	} else {
-		t4 = $[8];
-		t5 = $[9];
-	}
-	React.useEffect(t4, t5);
-	let t6;
-	if ($[10] !== inputId || $[11] !== label) {
-		t6 = /* @__PURE__ */ jsx(Label, {
+		$[1] = disabled;
+		$[2] = rows;
+		$[3] = setValue;
+		$[4] = t1;
+	} else t1 = $[4];
+	const handleChange = t1;
+	let t2;
+	if ($[5] !== inputId || $[6] !== label) {
+		t2 = /* @__PURE__ */ jsx(Label, {
 			htmlFor: inputId,
 			children: label
 		});
-		$[10] = inputId;
-		$[11] = label;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== disabled || $[14] !== handleChange || $[15] !== inputId || $[16] !== placeholder || $[17] !== rows || $[18] !== value) {
-		t7 = rows ? /* @__PURE__ */ jsx(Textarea, {
+		$[5] = inputId;
+		$[6] = label;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== disabled || $[9] !== handleChange || $[10] !== inputId || $[11] !== onBlur || $[12] !== onFocus || $[13] !== placeholder || $[14] !== rows || $[15] !== value) {
+		t3 = rows ? /* @__PURE__ */ jsx(Textarea, {
 			id: inputId,
 			value,
 			onChange: (e) => handleChange(e.target.value),
+			onFocus,
+			onBlur,
 			placeholder,
 			disabled,
 			rows,
@@ -86,28 +55,32 @@ const DebouncedFieldEditor = (t0) => {
 			id: inputId,
 			value,
 			onChange: (e_0) => handleChange(e_0.target.value),
+			onFocus,
+			onBlur,
 			placeholder,
 			disabled
 		});
-		$[13] = disabled;
-		$[14] = handleChange;
-		$[15] = inputId;
-		$[16] = placeholder;
-		$[17] = rows;
-		$[18] = value;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== t6 || $[21] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[8] = disabled;
+		$[9] = handleChange;
+		$[10] = inputId;
+		$[11] = onBlur;
+		$[12] = onFocus;
+		$[13] = placeholder;
+		$[14] = rows;
+		$[15] = value;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== t2 || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
-			children: [t6, t7]
+			children: [t2, t3]
 		});
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	return t8;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
 };
 
 //#endregion

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

@@ -18,10 +18,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { Globe, Info } from "lucide-react";
+import { Spinner } from "@camox/ui/spinner";
 import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { Spinner } from "@camox/ui/spinner";
 import { useForm } from "@tanstack/react-form";
 import { Switch } from "@camox/ui/switch";