camox 0.14.2 → 0.16.0

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

@@ -20,18 +20,22 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 
 //#region src/features/preview/components/AddBlockSheet.tsx
 const AddBlockSheet = () => {
-	const $ = c(58);
+	const $ = c(59);
+	if ($[0] !== "8763aa071e35caf6be6fe7de97ee503b9321631f9ce9abdbf0e15b6a425577e9") {
+		for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8763aa071e35caf6be6fe7de97ee503b9321631f9ce9abdbf0e15b6a425577e9";
+	}
 	const [highlightedValue, setHighlightedValue] = React.useState("");
 	const queryClient = useQueryClient();
 	const { pathname } = useLocation();
 	const pagePathname = useSelector(previewStore, _temp) ?? pathname;
 	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = blockMutations.create();
-		$[0] = t0;
-	} else t0 = $[0];
+		$[1] = t0;
+	} else t0 = $[1];
 	let t1;
-	if ($[1] !== pagePathname || $[2] !== queryClient) {
+	if ($[2] !== pagePathname || $[3] !== queryClient) {
 		t1 = {
 			...t0,
 			onMutate: (variables) => {
@@ -102,49 +106,49 @@ const AddBlockSheet = () => {
 				queryClient.invalidateQueries({ queryKey: queryKeys.pages.getByPath(pagePathname) });
 			}
 		};
-		$[1] = pagePathname;
-		$[2] = queryClient;
-		$[3] = t1;
-	} else t1 = $[3];
+		$[2] = pagePathname;
+		$[3] = queryClient;
+		$[4] = t1;
+	} else t1 = $[4];
 	const createBlock = useMutation(t1);
 	const projectSlug = useProjectSlug();
 	let t2;
-	if ($[4] !== projectSlug) {
+	if ($[5] !== projectSlug) {
 		t2 = projectQueries.getBySlug(projectSlug);
-		$[4] = projectSlug;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[5] = projectSlug;
+		$[6] = t2;
+	} else t2 = $[6];
 	const { data: project } = useQuery(t2);
 	const availableBlocks = useCamoxApp().getBlocks().filter(_temp3);
 	const page = usePreviewedPage();
 	const { pageBlocks: pageBlocks_0 } = usePageBlocks(page);
 	let t3;
-	if ($[6] !== project?.id) {
+	if ($[7] !== project?.id) {
 		t3 = blockQueries.getUsageCounts(project?.id ?? 0);
-		$[6] = project?.id;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = project?.id;
+		$[8] = t3;
+	} else t3 = $[8];
 	const t4 = !!project;
 	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
+	if ($[9] !== t3 || $[10] !== t4) {
 		t5 = {
 			...t3,
 			enabled: t4
 		};
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
 	const { data: t6 } = useQuery(t5);
 	let t7;
-	if ($[11] !== t6) {
+	if ($[12] !== t6) {
 		t7 = t6 === void 0 ? {} : t6;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
 	const totalCounts = t7;
 	let t8;
-	if ($[13] !== page || $[14] !== pageBlocks_0) {
+	if ($[14] !== page || $[15] !== pageBlocks_0) {
 		bb0: {
 			const counts = {};
 			if (!page) {
@@ -154,15 +158,15 @@ const AddBlockSheet = () => {
 			for (const block of pageBlocks_0) counts[block.type] = (counts[block.type] ?? 0) + 1;
 			t8 = counts;
 		}
-		$[13] = page;
-		$[14] = pageBlocks_0;
-		$[15] = t8;
-	} else t8 = $[15];
+		$[14] = page;
+		$[15] = pageBlocks_0;
+		$[16] = t8;
+	} else t8 = $[16];
 	const pageCounts = t8;
 	const isOpen = useSelector(previewStore, _temp4);
 	const peekedBlockPosition = useSelector(previewStore, _temp5);
 	let t9;
-	if ($[16] !== createBlock || $[17] !== page || $[18] !== pageBlocks_0 || $[19] !== peekedBlockPosition) {
+	if ($[17] !== createBlock || $[18] !== page || $[19] !== pageBlocks_0 || $[20] !== peekedBlockPosition) {
 		t9 = async (block_0) => {
 			if (!page) return;
 			const afterPosition_0 = peekedBlockPosition === "" ? "" : peekedBlockPosition ?? pageBlocks_0[pageBlocks_0.length - 1]?.position;
@@ -185,15 +189,15 @@ const AddBlockSheet = () => {
 			});
 			previewStore.send({ type: "exitPeekedBlock" });
 		};
-		$[16] = createBlock;
-		$[17] = page;
-		$[18] = pageBlocks_0;
-		$[19] = peekedBlockPosition;
-		$[20] = t9;
-	} else t9 = $[20];
+		$[17] = createBlock;
+		$[18] = page;
+		$[19] = pageBlocks_0;
+		$[20] = peekedBlockPosition;
+		$[21] = t9;
+	} else t9 = $[21];
 	const handleAddBlock = t9;
 	let t10;
-	if ($[21] !== pageBlocks_0 || $[22] !== peekedBlockPosition) {
+	if ($[22] !== pageBlocks_0 || $[23] !== peekedBlockPosition) {
 		t10 = (block_1) => {
 			const afterPosition_1 = peekedBlockPosition === "" ? "" : peekedBlockPosition ?? pageBlocks_0[pageBlocks_0.length - 1]?.position;
 			previewStore.send({
@@ -202,10 +206,10 @@ const AddBlockSheet = () => {
 				afterPosition: afterPosition_1
 			});
 		};
-		$[21] = pageBlocks_0;
-		$[22] = peekedBlockPosition;
-		$[23] = t10;
-	} else t10 = $[23];
+		$[22] = pageBlocks_0;
+		$[23] = peekedBlockPosition;
+		$[24] = t10;
+	} else t10 = $[24];
 	const handlePreviewBlock = t10;
 	const handleValueChange = (value) => {
 		setHighlightedValue(value);
@@ -216,70 +220,70 @@ const AddBlockSheet = () => {
 	const handleOpenChange = _temp6;
 	let t11;
 	let t12;
-	if ($[24] !== isOpen) {
+	if ($[25] !== isOpen) {
 		t11 = () => {
 			if (isOpen) setHighlightedValue("");
 		};
 		t12 = [isOpen];
-		$[24] = isOpen;
-		$[25] = t11;
-		$[26] = t12;
+		$[25] = isOpen;
+		$[26] = t11;
+		$[27] = t12;
 	} else {
-		t11 = $[25];
-		t12 = $[26];
+		t11 = $[26];
+		t12 = $[27];
 	}
 	React.useEffect(t11, t12);
 	let t13;
-	if ($[27] !== pageCounts || $[28] !== totalCounts) {
+	if ($[28] !== pageCounts || $[29] !== totalCounts) {
 		t13 = (blockId_0) => {
 			const total = totalCounts[blockId_0] ?? 0;
 			if (total === 0) return "Never used";
 			const page_0 = pageCounts[blockId_0] ?? "none";
 			return `${total} use${total > 1 ? "s" : ""} (${page_0} here)`;
 		};
-		$[27] = pageCounts;
-		$[28] = totalCounts;
-		$[29] = t13;
-	} else t13 = $[29];
+		$[28] = pageCounts;
+		$[29] = totalCounts;
+		$[30] = t13;
+	} else t13 = $[30];
 	const displayCount = t13;
 	const T0 = PreviewSideSheet;
 	const t14 = "flex flex-col gap-0";
 	let t15;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
 		t15 = /* @__PURE__ */ jsxs(Sheet.SheetHeader, {
 			className: "border-border border-b",
 			children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: "Add new block" }), /* @__PURE__ */ jsx(Sheet.SheetDescription, { children: "Search and select a block to add to the page." })]
 		});
-		$[30] = t15;
-	} else t15 = $[30];
+		$[31] = t15;
+	} else t15 = $[31];
 	const t16 = "flex-1 overflow-auto p-2";
 	const T1 = Command;
 	const t17 = "overflow-visible";
 	const t18 = _temp7;
 	let t19;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
 		t19 = /* @__PURE__ */ jsx(CommandInput, {
 			placeholder: "Search blocks...",
 			autoFocus: true
 		});
-		$[31] = t19;
-	} else t19 = $[31];
+		$[32] = t19;
+	} else t19 = $[32];
 	const T2 = CommandList;
 	const t20 = "mt-1 max-h-full";
 	let t21;
-	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
 		t21 = /* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found." });
-		$[32] = t21;
-	} else t21 = $[32];
+		$[33] = t21;
+	} else t21 = $[33];
 	const T3 = CommandGroup;
 	let t22;
-	if ($[33] !== totalCounts) {
+	if ($[34] !== totalCounts) {
 		t22 = (a, b_3) => (totalCounts[b_3._internal.id] ?? 0) - (totalCounts[a._internal.id] ?? 0);
-		$[33] = totalCounts;
-		$[34] = t22;
-	} else t22 = $[34];
+		$[34] = totalCounts;
+		$[35] = t22;
+	} else t22 = $[35];
 	let t23;
-	if ($[35] !== displayCount || $[36] !== handleAddBlock) {
+	if ($[36] !== displayCount || $[37] !== handleAddBlock) {
 		t23 = (block_3) => /* @__PURE__ */ jsxs(CommandItem, {
 			value: block_3._internal.title,
 			onSelect: () => {
@@ -296,36 +300,36 @@ const AddBlockSheet = () => {
 				className: "hidden group-focus-within:flex group-hover:flex",
 				children: /* @__PURE__ */ jsx(InfoIcon, {})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
-				className: "max-w-[300px]",
+				className: "max-w-75",
 				side: "right",
 				children: block_3._internal.description
 			})] })]
 		}, block_3._internal.id);
-		$[35] = displayCount;
-		$[36] = handleAddBlock;
-		$[37] = t23;
-	} else t23 = $[37];
+		$[36] = displayCount;
+		$[37] = handleAddBlock;
+		$[38] = t23;
+	} else t23 = $[38];
 	const t24 = availableBlocks.sort(t22).map(t23);
 	let t25;
-	if ($[38] !== T3 || $[39] !== t24) {
+	if ($[39] !== T3 || $[40] !== t24) {
 		t25 = /* @__PURE__ */ jsx(T3, { children: t24 });
-		$[38] = T3;
-		$[39] = t24;
-		$[40] = t25;
-	} else t25 = $[40];
+		$[39] = T3;
+		$[40] = t24;
+		$[41] = t25;
+	} else t25 = $[41];
 	let t26;
-	if ($[41] !== T2 || $[42] !== t21 || $[43] !== t25) {
+	if ($[42] !== T2 || $[43] !== t21 || $[44] !== t25) {
 		t26 = /* @__PURE__ */ jsxs(T2, {
 			className: t20,
 			children: [t21, t25]
 		});
-		$[41] = T2;
-		$[42] = t21;
-		$[43] = t25;
-		$[44] = t26;
-	} else t26 = $[44];
+		$[42] = T2;
+		$[43] = t21;
+		$[44] = t25;
+		$[45] = t26;
+	} else t26 = $[45];
 	let t27;
-	if ($[45] !== T1 || $[46] !== handleValueChange || $[47] !== highlightedValue || $[48] !== t18 || $[49] !== t19 || $[50] !== t26) {
+	if ($[46] !== T1 || $[47] !== handleValueChange || $[48] !== highlightedValue || $[49] !== t18 || $[50] !== t19 || $[51] !== t26) {
 		t27 = /* @__PURE__ */ jsx("div", {
 			className: t16,
 			children: /* @__PURE__ */ jsxs(T1, {
@@ -336,29 +340,29 @@ const AddBlockSheet = () => {
 				children: [t19, t26]
 			})
 		});
-		$[45] = T1;
-		$[46] = handleValueChange;
-		$[47] = highlightedValue;
-		$[48] = t18;
-		$[49] = t19;
-		$[50] = t26;
-		$[51] = t27;
-	} else t27 = $[51];
+		$[46] = T1;
+		$[47] = handleValueChange;
+		$[48] = highlightedValue;
+		$[49] = t18;
+		$[50] = t19;
+		$[51] = t26;
+		$[52] = t27;
+	} else t27 = $[52];
 	let t28;
-	if ($[52] !== T0 || $[53] !== handleOpenChange || $[54] !== isOpen || $[55] !== t15 || $[56] !== t27) {
+	if ($[53] !== T0 || $[54] !== handleOpenChange || $[55] !== isOpen || $[56] !== t15 || $[57] !== t27) {
 		t28 = /* @__PURE__ */ jsxs(T0, {
 			open: isOpen,
 			onOpenChange: handleOpenChange,
 			className: t14,
 			children: [t15, t27]
 		});
-		$[52] = T0;
-		$[53] = handleOpenChange;
-		$[54] = isOpen;
-		$[55] = t15;
-		$[56] = t27;
-		$[57] = t28;
-	} else t28 = $[57];
+		$[53] = T0;
+		$[54] = handleOpenChange;
+		$[55] = isOpen;
+		$[56] = t15;
+		$[57] = t27;
+		$[58] = t28;
+	} else t28 = $[58];
 	return t28;
 };
 function _temp(state) {

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

@@ -3,39 +3,92 @@ import { PreviewSideSheet, Sheet } from "./PreviewSideSheet.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store/react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 
 //#region src/features/preview/components/AgentChatSheet.tsx
 const AgentChatSheet = () => {
-	const $ = c(4);
+	const $ = c(9);
+	if ($[0] !== "c20d48a4fd3b9b3c33b623c97e01394a05d71fe73cd1e3f495a45671d8fbcda3") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c20d48a4fd3b9b3c33b623c97e01394a05d71fe73cd1e3f495a45671d8fbcda3";
+	}
 	const isOpen = useSelector(previewStore, _temp);
 	const handleOpenChange = _temp2;
 	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = /* @__PURE__ */ jsxs(Sheet.SheetHeader, { children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: "Agent Chat" }), /* @__PURE__ */ jsx(Sheet.SheetDescription, { children: "Describe the changes you'd like to make to this page." })] });
-		$[0] = t0;
-	} else t0 = $[0];
+		$[1] = t0;
+	} else t0 = $[1];
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "flex flex-1 items-center justify-center p-6",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-center text-sm",
-				children: "Coming soon: MCP server and integrated chat"
-			})
-		});
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Alert, { children: [
+			/* @__PURE__ */ jsx(Info, { className: "size-4" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: "In-app agentic chat is coming soon" }),
+			/* @__PURE__ */ jsx(AlertDescription, { children: "You'll be able to describe changes right here without leaving the preview." })
+		] });
+		$[2] = t1;
+	} else t1 = $[2];
 	let t2;
-	if ($[2] !== isOpen) {
-		t2 = /* @__PURE__ */ jsxs(PreviewSideSheet, {
-			open: isOpen,
-			onOpenChange: handleOpenChange,
-			children: [t0, t1]
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground text-sm font-medium",
+			children: "Edit your site from your coding agent"
 		});
-		$[2] = isOpen;
 		$[3] = t2;
 	} else t2 = $[3];
-	return t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("strong", { children: "CLI" });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground text-sm",
+			children: [
+				"Your app comes with a ",
+				t3,
+				" and a set of ",
+				/* @__PURE__ */ jsx("strong", { children: "Skills" }),
+				" that let Claude Code, Cursor, or any other coding agent create pages, edit blocks, and update layouts directly."
+			]
+		});
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-4 p-6",
+			children: [t1, /* @__PURE__ */ jsxs("div", {
+				className: "border-primary bg-primary/5 space-y-2 rounded-lg border-2 p-4",
+				children: [
+					t2,
+					t4,
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-sm",
+						children: [
+							"Your agent has the ability to edit both the structure of blocks ",
+							/* @__PURE__ */ jsx("em", { children: "and" }),
+							" their content, making it the most powerful way to manage your Camox website."
+						]
+					})
+				]
+			})]
+		});
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== isOpen) {
+		t6 = /* @__PURE__ */ jsxs(PreviewSideSheet, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: [t0, t5]
+		});
+		$[7] = isOpen;
+		$[8] = t6;
+	} else t6 = $[8];
+	return t6;
 };
 function _temp(state) {
 	return state.context.isAgentChatSheetOpen;