camox 0.44.0 → 0.45.0

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

@@ -22,16 +22,12 @@ const getHighlighter = () => {
 	return highlighterPromise;
 };
 const ShikiMarkdown = (t0) => {
-	const $ = c(7);
-	if ($[0] !== "51a753852d99d64ce6db6e4ded83a948d584276c60158342567a84f8fad92985") {
-		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "51a753852d99d64ce6db6e4ded83a948d584276c60158342567a84f8fad92985";
-	}
+	const $ = c(6);
 	const { code } = t0;
 	const [html, setHtml] = React.useState("");
 	let t1;
 	let t2;
-	if ($[1] !== code) {
+	if ($[0] !== code) {
 		t1 = () => {
 			let cancelled = false;
 			getHighlighter().then((highlighter) => {
@@ -50,29 +46,29 @@ const ShikiMarkdown = (t0) => {
 			};
 		};
 		t2 = [code];
-		$[1] = code;
-		$[2] = t1;
-		$[3] = t2;
+		$[0] = code;
+		$[1] = t1;
+		$[2] = t2;
 	} else {
-		t1 = $[2];
-		t2 = $[3];
+		t1 = $[1];
+		t2 = $[2];
 	}
 	React.useEffect(t1, t2);
 	if (!html) return null;
 	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("style", { children: css });
-		$[4] = t3;
-	} else t3 = $[4];
+		$[3] = t3;
+	} else t3 = $[3];
 	let t4;
-	if ($[5] !== html) {
+	if ($[4] !== html) {
 		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, /* @__PURE__ */ jsx("div", {
 			className: "border-input w-full min-w-0 overflow-hidden rounded-md border text-sm [&_code]:font-mono [&_pre]:rounded-md [&_pre]:px-3 [&_pre]:py-2 [&_pre]:break-all [&_pre]:whitespace-pre-wrap",
 			dangerouslySetInnerHTML: { __html: html }
 		})] });
-		$[5] = html;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[4] = html;
+		$[5] = t4;
+	} else t4 = $[5];
 	return t4;
 };
 

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

@@ -4,116 +4,104 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/components/SidebarSection.tsx
 function SidebarSection(t0) {
-	const $ = c(12);
-	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
-		for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
-	}
+	const $ = c(11);
 	let className;
 	let props;
 	let t1;
-	if ($[1] !== t0) {
+	if ($[0] !== t0) {
 		({divider: t1, className, ...props} = t0);
-		$[1] = t0;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
 	} else {
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
 	}
 	const divider = t1 === void 0 ? "none" : t1;
 	const t2 = divider === "top" && "border-t";
 	const t3 = divider === "bottom" && "border-b";
 	let t4;
-	if ($[5] !== className || $[6] !== t2 || $[7] !== t3) {
+	if ($[4] !== className || $[5] !== t2 || $[6] !== t3) {
 		t4 = cn("border-border space-y-4 px-2 py-4", t2, t3, className);
-		$[5] = className;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[4] = className;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
 	let t5;
-	if ($[9] !== props || $[10] !== t4) {
+	if ($[8] !== props || $[9] !== t4) {
 		t5 = /* @__PURE__ */ jsx("section", {
 			className: t4,
 			...props
 		});
-		$[9] = props;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[8] = props;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
 	return t5;
 }
 function SidebarSectionHeader(t0) {
-	const $ = c(9);
-	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
-	}
+	const $ = c(8);
 	let className;
 	let props;
-	if ($[1] !== t0) {
+	if ($[0] !== t0) {
 		({className, ...props} = t0);
-		$[1] = t0;
-		$[2] = className;
-		$[3] = props;
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[4] !== className) {
+	if ($[3] !== className) {
 		t1 = cn("text-muted-foreground flex items-center gap-2 text-sm leading-none font-medium", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[6] !== props || $[7] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("h3", {
 			className: t1,
 			...props
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 }
 function SidebarSectionContent(t0) {
-	const $ = c(9);
-	if ($[0] !== "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "938a82e9b8a6fb2a869fbfc9e5e1c7b223dbe304de2e86e65be966943dbe5b5f";
-	}
+	const $ = c(8);
 	let className;
 	let props;
-	if ($[1] !== t0) {
+	if ($[0] !== t0) {
 		({className, ...props} = t0);
-		$[1] = t0;
-		$[2] = className;
-		$[3] = props;
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[4] !== className) {
+	if ($[3] !== className) {
 		t1 = cn("space-y-4", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[6] !== props || $[7] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("div", {
 			className: t1,
 			...props
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 }
 

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

@@ -0,0 +1,56 @@
+import { CanvasSidebarSkeleton } from "../../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { previewStore, selectIsCanvasShown } from "../previewStore.js";
+import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
+import { c } from "react/compiler-runtime";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/StudioEditingFallback.tsx
+/**
+* The read-only page shown while the editor loads. Showing the Canvas before the editor
+* is ready shows what the editor shows while the Canvas prepares: the Canvas sidebar's
+* placeholder, and a loading screen where the Canvas will be. The page's frame keeps its
+* place in the tree underneath, so it never reloads.
+*/
+function StudioEditingFallback(t0) {
+	const $ = c(11);
+	const { layoutPage, children } = t0;
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	let t1;
+	if ($[0] !== isCanvasShown || $[1] !== layoutPage) {
+		t1 = isCanvasShown && /* @__PURE__ */ jsx(CanvasSidebarSkeleton, { layoutPage });
+		$[0] = isCanvasShown;
+		$[1] = layoutPage;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== isCanvasShown) {
+		t2 = isCanvasShown && /* @__PURE__ */ jsx(CanvasLoadingScreen, {});
+		$[3] = isCanvasShown;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== children || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-0 min-w-0 flex-1",
+			children: [children, t2]
+		});
+		$[5] = children;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-0 flex-1",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+
+//#endregion
+export { StudioEditingFallback };

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

@@ -1,126 +1,123 @@
-import { fileMutations, fileQueries } from "../../../lib/queries.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
+import { fileMutations } from "../../../lib/queries.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { X } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 
 //#region src/features/preview/components/UnlinkAssetButton.tsx
 const UnlinkAssetButton = (t0) => {
 	const $ = c(38);
-	if ($[0] !== "98ef69b59dc7ee877222a6436f2d70c9eec7d4caa8c5a4bed248c1b5cf221d00") {
-		for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "98ef69b59dc7ee877222a6436f2d70c9eec7d4caa8c5a4bed248c1b5cf221d00";
-	}
-	const { fileId, onUnlink, className } = t0;
+	const { fileId, onUnlink, className, persisted: t1, offerDelete: t2 } = t0;
+	const persisted = t1 === void 0 ? true : t1;
+	const offerDelete = t2 === void 0 ? true : t2;
 	const [dialogOpen, setDialogOpen] = useState(false);
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = fileMutations.delete();
-		$[1] = t1;
-	} else t1 = $[1];
-	const deleteFile = useMutation(t1);
-	let t2;
-	if ($[2] !== fileId) {
-		t2 = fileQueries.getUsageCount(fileId);
-		$[2] = fileId;
-		$[3] = t2;
-	} else t2 = $[3];
-	const t3 = !!fileId;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = fileMutations.delete();
+		$[0] = t3;
+	} else t3 = $[0];
+	const deleteFile = useMutation(t3);
 	let t4;
-	if ($[4] !== t2 || $[5] !== t3) {
-		t4 = {
-			...t2,
-			enabled: t3
-		};
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
-	const { data: usageCount } = useQuery(t4);
-	let t5;
-	if ($[7] !== fileId || $[8] !== onUnlink || $[9] !== usageCount) {
-		t5 = (e) => {
+	if ($[1] !== fileId) {
+		t4 = reads.fileUsageCount(fileId);
+		$[1] = fileId;
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = !!fileId && offerDelete;
+	let t6;
+	if ($[3] !== t5) {
+		t6 = { enabled: t5 };
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const { data: usageCount } = useReadQuery(t4, t6);
+	let t7;
+	if ($[5] !== fileId || $[6] !== offerDelete || $[7] !== onUnlink || $[8] !== persisted || $[9] !== usageCount) {
+		t7 = (e) => {
 			e.stopPropagation();
-			if (!fileId || usageCount === void 0 || usageCount > 1) {
+			if (!offerDelete || !fileId || usageCount === void 0 || usageCount > (persisted ? 1 : 0)) {
 				onUnlink();
 				return;
 			}
 			setDialogOpen(true);
 		};
-		$[7] = fileId;
-		$[8] = onUnlink;
+		$[5] = fileId;
+		$[6] = offerDelete;
+		$[7] = onUnlink;
+		$[8] = persisted;
 		$[9] = usageCount;
-		$[10] = t5;
-	} else t5 = $[10];
-	const handleClick = t5;
-	let t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const handleClick = t7;
+	let t8;
 	if ($[11] !== className) {
-		t6 = cn("text-muted-foreground hover:text-foreground shrink-0", className);
+		t8 = cn("text-muted-foreground hover:text-foreground shrink-0", className);
 		$[11] = className;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== handleClick || $[14] !== t6) {
-		t7 = /* @__PURE__ */ jsx(Button, {
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== handleClick || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon-sm",
-			className: t6,
+			className: t8,
 			onClick: handleClick
 		});
 		$[13] = handleClick;
-		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
-	let t8;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[17] !== t7) {
-		t9 = /* @__PURE__ */ jsx(TooltipTrigger, {
-			render: t7,
-			children: t8
-		});
-		$[17] = t7;
-		$[18] = t9;
-	} else t9 = $[18];
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
 	let t10;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" });
-		$[19] = t10;
-	} else t10 = $[19];
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
+		$[16] = t10;
+	} else t10 = $[16];
 	let t11;
-	if ($[20] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Tooltip, { children: [t9, t10] });
-		$[20] = t9;
-		$[21] = t11;
-	} else t11 = $[21];
+	if ($[17] !== t9) {
+		t11 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: t9,
+			children: t10
+		});
+		$[17] = t9;
+		$[18] = t11;
+	} else t11 = $[18];
 	let t12;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unlink file" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This file is not used anywhere else. Would you like to also delete it?" })] });
-		$[22] = t12;
-	} else t12 = $[22];
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" });
+		$[19] = t12;
+	} else t12 = $[19];
 	let t13;
+	if ($[20] !== t11) {
+		t13 = /* @__PURE__ */ jsxs(Tooltip, { children: [t11, t12] });
+		$[20] = t11;
+		$[21] = t13;
+	} else t13 = $[21];
+	let t14;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unlink file" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This file is not used anywhere else. Would you like to also delete it?" })] });
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
 	if ($[23] !== onUnlink) {
-		t13 = /* @__PURE__ */ jsx(AlertDialogAction, {
+		t15 = /* @__PURE__ */ jsx(AlertDialogAction, {
 			variant: "outline",
 			className: "bg-background hover:bg-accent text-foreground",
 			onClick: () => onUnlink(),
 			children: "Unlink only"
 		});
 		$[23] = onUnlink;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
+		$[24] = t15;
+	} else t15 = $[24];
+	let t16;
 	if ($[25] !== deleteFile || $[26] !== fileId || $[27] !== onUnlink) {
-		t14 = /* @__PURE__ */ jsx(AlertDialogAction, {
+		t16 = /* @__PURE__ */ jsx(AlertDialogAction, {
 			onClick: () => {
 				onUnlink();
 				if (fileId) deleteFile.mutate({ id: fileId });
@@ -130,34 +127,34 @@ const UnlinkAssetButton = (t0) => {
 		$[25] = deleteFile;
 		$[26] = fileId;
 		$[27] = onUnlink;
-		$[28] = t14;
-	} else t14 = $[28];
-	let t15;
-	if ($[29] !== t13 || $[30] !== t14) {
-		t15 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t12, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t13, t14] })] });
-		$[29] = t13;
-		$[30] = t14;
-		$[31] = t15;
-	} else t15 = $[31];
-	let t16;
-	if ($[32] !== dialogOpen || $[33] !== t15) {
-		t16 = /* @__PURE__ */ jsx(AlertDialog, {
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t15 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t14, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t15, t16] })] });
+		$[29] = t15;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== dialogOpen || $[33] !== t17) {
+		t18 = /* @__PURE__ */ jsx(AlertDialog, {
 			open: dialogOpen,
 			onOpenChange: setDialogOpen,
-			children: t15
+			children: t17
 		});
 		$[32] = dialogOpen;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
-	let t17;
-	if ($[35] !== t11 || $[36] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t16] });
-		$[35] = t11;
-		$[36] = t16;
-		$[37] = t17;
-	} else t17 = $[37];
-	return t17;
+		$[33] = t17;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t13 || $[36] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [t13, t18] });
+		$[35] = t13;
+		$[36] = t18;
+		$[37] = t19;
+	} else t19 = $[37];
+	return t19;
 };
 
 //#endregion

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

@@ -0,0 +1,15 @@
+//#region src/features/preview/components/blockGridNavigation.ts
+/** Move within a non-wrapping grid, clamping down into a short final row. */
+function getGridNavigationIndex(index, count, columns, key) {
+	if (count === 0) return -1;
+	if (index < 0) return 0;
+	const column = index % columns;
+	if (key === "ArrowLeft") return column > 0 ? index - 1 : index;
+	if (key === "ArrowRight") return column < columns - 1 ? Math.min(index + 1, count - 1) : index;
+	if (key === "ArrowUp") return index >= columns ? index - columns : index;
+	if (key === "ArrowDown") return (Math.floor(index / columns) + 1) * columns < count ? Math.min(index + columns, count - 1) : index;
+	return index;
+}
+
+//#endregion
+export { getGridNavigationIndex };

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

@@ -0,0 +1,8 @@
+//#region src/features/preview/components/contentFieldSchema.ts
+/** Reads one field's schema from a block, repeater item or collection content schema. */
+function contentFieldSchema(schema, fieldName) {
+	return schema?.properties?.[fieldName];
+}
+
+//#endregion
+export { contentFieldSchema };