camox 0.41.0 → 0.42.0

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

@@ -3,7 +3,6 @@ import { useProjectSlug } from "../../../lib/auth.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { blockMutations, blockQueries, projectQueries } from "../../../lib/queries.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { previewStore } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { BlockThumbnail } from "./BlockThumbnail.js";
@@ -23,10 +22,10 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 
 //#region src/features/preview/components/AddBlockSidebar.tsx
 const AddBlockSidebar = () => {
-	const $ = c(58);
-	if ($[0] !== "0a9bbf9c6eddd22fc242436657c914b17db692a3ab0e958a7f9451a343536838") {
-		for (let $i = 0; $i < 58; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "0a9bbf9c6eddd22fc242436657c914b17db692a3ab0e958a7f9451a343536838";
+	const $ = c(57);
+	if ($[0] !== "4c8d55ba83f686c7bfc04ce464d348e236b6ed16fb43d0305b13b93cf8de061f") {
+		for (let $i = 0; $i < 57; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4c8d55ba83f686c7bfc04ce464d348e236b6ed16fb43d0305b13b93cf8de061f";
 	}
 	const [highlightedValue, setHighlightedValue] = React.useState("");
 	const queryClient = useQueryClient();
@@ -167,9 +166,8 @@ const AddBlockSidebar = () => {
 	} else t8 = $[16];
 	const pageCounts = t8;
 	const peekedBlockPosition = useSelector(previewStore, _temp3);
-	const addBlockSource = useSelector(previewStore, _temp4);
 	let t9;
-	if ($[17] !== addBlockSource || $[18] !== createBlock || $[19] !== page || $[20] !== pageBlocks_0 || $[21] !== peekedBlockPosition || $[22] !== requireDraft) {
+	if ($[17] !== createBlock || $[18] !== page || $[19] !== pageBlocks_0 || $[20] !== peekedBlockPosition || $[21] !== requireDraft) {
 		t9 = async (block_0) => {
 			if (!page) return;
 			if (!requireDraft()) return;
@@ -183,27 +181,22 @@ const AddBlockSidebar = () => {
 				afterPosition: afterPosition_0,
 				repeatableItems: bundle.repeatableItems
 			});
-			trackClientEvent("block_added", {
-				blockType: block_0._internal.id,
-				via: addBlockSource ?? "unknown"
-			});
 			previewStore.send({
 				type: "focusCreatedBlock",
 				blockId
 			});
 			previewStore.send({ type: "exitPeekedBlock" });
 		};
-		$[17] = addBlockSource;
-		$[18] = createBlock;
-		$[19] = page;
-		$[20] = pageBlocks_0;
-		$[21] = peekedBlockPosition;
-		$[22] = requireDraft;
-		$[23] = t9;
-	} else t9 = $[23];
+		$[17] = createBlock;
+		$[18] = page;
+		$[19] = pageBlocks_0;
+		$[20] = peekedBlockPosition;
+		$[21] = requireDraft;
+		$[22] = t9;
+	} else t9 = $[22];
 	const handleAddBlock = t9;
 	let t10;
-	if ($[24] !== pageBlocks_0 || $[25] !== peekedBlockPosition) {
+	if ($[23] !== pageBlocks_0 || $[24] !== peekedBlockPosition) {
 		t10 = (block_1) => {
 			const afterPosition_1 = peekedBlockPosition === "" ? "" : peekedBlockPosition ?? pageBlocks_0[pageBlocks_0.length - 1]?.position;
 			previewStore.send({
@@ -212,10 +205,10 @@ const AddBlockSidebar = () => {
 				afterPosition: afterPosition_1
 			});
 		};
-		$[24] = pageBlocks_0;
-		$[25] = peekedBlockPosition;
-		$[26] = t10;
-	} else t10 = $[26];
+		$[23] = pageBlocks_0;
+		$[24] = peekedBlockPosition;
+		$[25] = t10;
+	} else t10 = $[25];
 	const handlePreviewBlock = t10;
 	const handleValueChange = (value) => {
 		setHighlightedValue(value);
@@ -224,62 +217,62 @@ const AddBlockSidebar = () => {
 		else previewStore.send({ type: "clearPeekedBlock" });
 	};
 	let t11;
-	if ($[27] !== pageCounts || $[28] !== totalCounts) {
+	if ($[26] !== pageCounts || $[27] !== totalCounts) {
 		t11 = (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] = t11;
-	} else t11 = $[29];
+		$[26] = pageCounts;
+		$[27] = totalCounts;
+		$[28] = t11;
+	} else t11 = $[28];
 	const displayCount = t11;
 	let t12;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
 		t12 = /* @__PURE__ */ jsx("div", {
-			className: "px-2 pt-4",
+			className: "px-2 pt-2",
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
 				className: "w-full justify-start",
-				onClick: _temp5,
+				onClick: _temp4,
 				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "text-muted-foreground" }), "Add new block"]
 			})
 		});
-		$[30] = t12;
-	} else t12 = $[30];
+		$[29] = t12;
+	} else t12 = $[29];
 	const T0 = PanelContent;
-	const t13 = "flex grow basis-0 flex-col overflow-auto px-2 py-2";
+	const t13 = "flex min-h-0 grow basis-0 flex-col overflow-hidden px-2 pt-2";
 	const T1 = Command;
-	const t14 = "overflow-visible rounded-none! bg-transparent! p-0!";
-	const t15 = _temp6;
+	const t14 = "h-0 min-h-0 flex-1 rounded-none! bg-transparent! p-0!";
+	const t15 = _temp5;
 	let t16;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = /* @__PURE__ */ jsx(CommandInput, {
 			placeholder: "Search blocks...",
 			className: "px-0 pt-0",
 			autoFocus: true
 		});
-		$[31] = t16;
-	} else t16 = $[31];
+		$[30] = t16;
+	} else t16 = $[30];
 	const T2 = CommandList;
-	const t17 = "mt-2 max-h-full";
+	const t17 = "mt-2 max-h-none min-h-0 flex-1 pb-2";
 	let t18;
-	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
 		t18 = /* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found." });
-		$[32] = t18;
-	} else t18 = $[32];
+		$[31] = t18;
+	} else t18 = $[31];
 	const T3 = CommandGroup;
 	const t19 = "p-0";
 	let t20;
-	if ($[33] !== totalCounts) {
+	if ($[32] !== totalCounts) {
 		t20 = (a, b_3) => (totalCounts[b_3._internal.id] ?? 0) - (totalCounts[a._internal.id] ?? 0);
-		$[33] = totalCounts;
-		$[34] = t20;
-	} else t20 = $[34];
+		$[32] = totalCounts;
+		$[33] = t20;
+	} else t20 = $[33];
 	let t21;
-	if ($[35] !== displayCount || $[36] !== handleAddBlock) {
+	if ($[34] !== displayCount || $[35] !== handleAddBlock) {
 		t21 = (block_3) => /* @__PURE__ */ jsxs(CommandItem, {
 			value: block_3._internal.title,
 			keywords: [block_3._internal.description ?? ""],
@@ -287,7 +280,7 @@ const AddBlockSidebar = () => {
 			onSelect: () => {
 				handleAddBlock(block_3);
 			},
-			className: "group bg-card data-[selected=true]:border-primary data-[selected=true]:after:border-primary mb-3 flex flex-col items-stretch gap-0 overflow-hidden rounded-lg border p-0 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] last:mb-0 data-[selected=true]:after:border",
+			className: "group bg-card data-[selected=true]:border-primary mb-3 flex flex-col items-stretch gap-0 overflow-hidden rounded-lg border-2 p-0 last:mb-0",
 			children: [/* @__PURE__ */ jsx(BlockThumbnail, { block: block_3 }), /* @__PURE__ */ jsxs("div", {
 				className: "border-border flex flex-col gap-1 border-t px-3 py-2",
 				children: [/* @__PURE__ */ jsxs("div", {
@@ -306,34 +299,34 @@ const AddBlockSidebar = () => {
 				})]
 			})]
 		}, block_3._internal.id);
-		$[35] = displayCount;
-		$[36] = handleAddBlock;
-		$[37] = t21;
-	} else t21 = $[37];
+		$[34] = displayCount;
+		$[35] = handleAddBlock;
+		$[36] = t21;
+	} else t21 = $[36];
 	const t22 = availableBlocks.sort(t20).map(t21);
 	let t23;
-	if ($[38] !== T3 || $[39] !== t22) {
+	if ($[37] !== T3 || $[38] !== t22) {
 		t23 = /* @__PURE__ */ jsx(T3, {
 			className: t19,
 			children: t22
 		});
-		$[38] = T3;
-		$[39] = t22;
-		$[40] = t23;
-	} else t23 = $[40];
+		$[37] = T3;
+		$[38] = t22;
+		$[39] = t23;
+	} else t23 = $[39];
 	let t24;
-	if ($[41] !== T2 || $[42] !== t18 || $[43] !== t23) {
+	if ($[40] !== T2 || $[41] !== t18 || $[42] !== t23) {
 		t24 = /* @__PURE__ */ jsxs(T2, {
 			className: t17,
 			children: [t18, t23]
 		});
-		$[41] = T2;
-		$[42] = t18;
-		$[43] = t23;
-		$[44] = t24;
-	} else t24 = $[44];
+		$[40] = T2;
+		$[41] = t18;
+		$[42] = t23;
+		$[43] = t24;
+	} else t24 = $[43];
 	let t25;
-	if ($[45] !== T1 || $[46] !== handleValueChange || $[47] !== highlightedValue || $[48] !== t15 || $[49] !== t16 || $[50] !== t24) {
+	if ($[44] !== T1 || $[45] !== handleValueChange || $[46] !== highlightedValue || $[47] !== t15 || $[48] !== t16 || $[49] !== t24) {
 		t25 = /* @__PURE__ */ jsxs(T1, {
 			value: highlightedValue,
 			onValueChange: handleValueChange,
@@ -341,31 +334,31 @@ const AddBlockSidebar = () => {
 			onKeyDown: t15,
 			children: [t16, t24]
 		});
-		$[45] = T1;
-		$[46] = handleValueChange;
-		$[47] = highlightedValue;
-		$[48] = t15;
-		$[49] = t16;
-		$[50] = t24;
-		$[51] = t25;
-	} else t25 = $[51];
+		$[44] = T1;
+		$[45] = handleValueChange;
+		$[46] = highlightedValue;
+		$[47] = t15;
+		$[48] = t16;
+		$[49] = t24;
+		$[50] = t25;
+	} else t25 = $[50];
 	let t26;
-	if ($[52] !== T0 || $[53] !== t25) {
+	if ($[51] !== T0 || $[52] !== t25) {
 		t26 = /* @__PURE__ */ jsx(T0, {
 			className: t13,
 			children: t25
 		});
-		$[52] = T0;
-		$[53] = t25;
-		$[54] = t26;
-	} else t26 = $[54];
+		$[51] = T0;
+		$[52] = t25;
+		$[53] = t26;
+	} else t26 = $[53];
 	let t27;
-	if ($[55] !== t12 || $[56] !== t26) {
+	if ($[54] !== t12 || $[55] !== t26) {
 		t27 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t26] });
-		$[55] = t12;
-		$[56] = t26;
-		$[57] = t27;
-	} else t27 = $[57];
+		$[54] = t12;
+		$[55] = t26;
+		$[56] = t27;
+	} else t27 = $[56];
 	return t27;
 };
 function _temp(b) {
@@ -377,13 +370,10 @@ function _temp2(b_1) {
 function _temp3(state) {
 	return state.context.peekedBlockPosition;
 }
-function _temp4(state_0) {
-	return state_0.context.addBlockSource;
-}
-function _temp5() {
+function _temp4() {
 	return previewStore.send({ type: "closeAddBlockSidebar" });
 }
-function _temp6(e) {
+function _temp5(e) {
 	if (e.key === "Escape") previewStore.send({ type: "closeAddBlockSidebar" });
 }
 

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

@@ -2,7 +2,6 @@ import { getAuthCookieHeader, getAuthRequestCredentials } from "../../../lib/aut
 import { getApiUrl, getEnvironmentName } from "../../../lib/api-client.js";
 import { isRasterImage, transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { fileMutations, fileQueries } from "../../../lib/queries.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
 import { Metadata, MetadataRow, formatRelativeTime } from "./Metadata.js";
@@ -22,9 +21,9 @@ import { Switch } from "@camox/ui/switch";
 //#region src/features/preview/components/AssetLightbox.tsx
 function DeliveredSize(t0) {
 	const $ = c(16);
-	if ($[0] !== "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9") {
+	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
 		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9";
+		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
 	}
 	const { bytes, raw } = t0;
 	if (bytes == null) {
@@ -93,9 +92,9 @@ function DeliveredSize(t0) {
 }
 function DeliveredLabel(t0) {
 	const $ = c(4);
-	if ($[0] !== "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9") {
+	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1dc3a839581aee4dce763fdadc5f599293f7d6288e481a0914cf562382a66ab9";
+		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
 	}
 	const { children } = t0;
 	let t1;
@@ -460,12 +459,6 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 												id: fileId,
 												enabled: checked
 											});
-											trackClientEvent("ai_metadata_toggled", {
-												target: "file",
-												enabled: checked,
-												fileId,
-												mimeType: file.mimeType
-											});
 										}
 									}), /* @__PURE__ */ jsx(Label, {
 										htmlFor: "ai-metadata",

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

@@ -0,0 +1,194 @@
+import { useAuthContext } from "../../../lib/auth.js";
+import { previewStore } from "../previewStore.js";
+import { previewCommentsStore, revealCommentTarget } from "../previewCommentsStore.js";
+import { CommentHeader } from "./CommentHeader.js";
+import { CommentTargetQuote } from "./CommentTargetQuote.js";
+import { SidebarSection, SidebarSectionContent, SidebarSectionHeader } from "./SidebarSection.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
+import { Button } from "@camox/ui/button";
+import { ArrowUp, X } from "lucide-react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@camox/ui/input-group";
+
+//#region src/features/preview/components/AttachedComments.tsx
+function resizeComposer(element) {
+	element.style.height = "auto";
+	element.style.height = `${element.scrollHeight}px`;
+}
+/** Shared comment list and composer for editors and the Feedback sidebar. */
+function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPageComments = false }) {
+	const { authClient } = useAuthContext();
+	const { data: session } = authClient.useSession();
+	const { comments, draft, activeId, focusTarget } = useSelector(previewCommentsStore, (state) => state.context);
+	const matches = (entry) => entry.pageId === pageId && (allPageComments || entry.target.blockId === blockId && entry.target.itemId === itemId && entry.target.fieldName === fieldName);
+	const attached = comments.filter(matches);
+	const currentDraft = draft && matches(draft) ? draft : null;
+	const selected = attached.find((comment) => comment.id === activeId);
+	const textarea = React.useRef(null);
+	const activeComment = React.useRef(null);
+	const draftTarget = currentDraft?.target;
+	const message = currentDraft?.message ?? "";
+	React.useLayoutEffect(() => {
+		if (textarea.current) resizeComposer(textarea.current);
+	}, [message, pageId]);
+	React.useEffect(() => {
+		const element = textarea.current;
+		if (!element) return;
+		let width = element.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (element.clientWidth === width) return;
+			width = element.clientWidth;
+			resizeComposer(element);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [pageId]);
+	const submit = () => {
+		if (!message.trim()) return;
+		previewCommentsStore.send({
+			type: "postComment",
+			id: crypto.randomUUID(),
+			author: {
+				name: session?.user.name || "You",
+				image: session?.user.image ?? null
+			},
+			createdAt: Date.now()
+		});
+		textarea.current?.focus({ preventScroll: true });
+	};
+	React.useEffect(() => {
+		if (!draftTarget || focusTarget !== draftTarget || !textarea.current) return;
+		textarea.current?.scrollIntoView({ block: "nearest" });
+		textarea.current?.focus({ preventScroll: true });
+		previewCommentsStore.send({ type: "composerFocused" });
+	}, [draftTarget, focusTarget]);
+	React.useEffect(() => {
+		if (!selected) return;
+		activeComment.current?.scrollIntoView({ block: "nearest" });
+	}, [selected]);
+	if (pageId == null) return null;
+	return /* @__PURE__ */ jsxs(SidebarSection, {
+		"aria-label": allPageComments ? "Feedback" : blockId == null ? "Page comments" : fieldName ? `Comments on ${fieldName}` : itemId == null ? "Block comments" : "Item comments",
+		divider: allPageComments ? "none" : "top",
+		children: [allPageComments ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-base font-semibold",
+				children: "Feedback"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "End comment mode",
+				onClick: () => previewStore.send({
+					type: "setCommentMode",
+					enabled: false
+				}),
+				children: /* @__PURE__ */ jsx(X, { className: "text-muted-foreground" })
+			})]
+		}) : /* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Feedback" }), /* @__PURE__ */ jsxs(SidebarSectionContent, { children: [
+			allPageComments && attached.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "No feedback yet. Select something on the page to comment on it."
+			}),
+			attached.map((comment_0) => /* @__PURE__ */ jsxs("div", {
+				ref: comment_0.id === activeId ? activeComment : void 0,
+				...allPageComments && {
+					role: "button",
+					tabIndex: 0,
+					className: "hover:bg-card focus-visible:ring-ring rounded-md p-1 outline-none focus-visible:ring-2",
+					onClick: () => {
+						previewCommentsStore.send({
+							type: "selectComment",
+							id: comment_0.id
+						});
+						revealCommentTarget(comment_0.target);
+					},
+					onKeyDown: (event) => {
+						if (event.key !== "Enter" && event.key !== " ") return;
+						event.preventDefault();
+						event.currentTarget.click();
+					}
+				},
+				children: [/* @__PURE__ */ jsx(CommentHeader, {
+					author: comment_0.author,
+					createdAt: comment_0.createdAt
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pl-8",
+					children: [allPageComments && /* @__PURE__ */ jsx(CommentTargetQuote, {
+						pageId,
+						target: comment_0.target
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm wrap-break-word whitespace-pre-wrap",
+						children: comment_0.message
+					})]
+				})]
+			}, comment_0.id)),
+			allPageComments && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				className: "w-full",
+				disabled: attached.length === 0,
+				children: "Send feedback to agent..."
+			}),
+			!allPageComments && /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
+				ref: textarea,
+				"aria-label": "Comment text",
+				placeholder: "Add a comment",
+				className: "block field-sizing-fixed min-h-0 flex-none overflow-hidden leading-6",
+				rows: 1,
+				value: message,
+				onKeyDown: (event_0) => {
+					if (event_0.key !== "Enter" || event_0.shiftKey || event_0.nativeEvent.isComposing) return;
+					event_0.preventDefault();
+					event_0.stopPropagation();
+					submit();
+				},
+				onChange: (event_1) => {
+					if (!currentDraft) {
+						const fieldId = [
+							blockId,
+							itemId,
+							fieldName
+						].filter((part) => part != null).join("__");
+						previewCommentsStore.send({
+							type: "startComment",
+							pageId,
+							target: {
+								blockId,
+								itemId,
+								fieldName,
+								fieldType,
+								selector: blockId == null ? "body" : fieldName != null ? `[data-camox-field-id="${CSS.escape(fieldId)}"]` : itemId != null ? `[data-camox-repeater-item-id="${itemId}"]` : `[data-camox-block-id="${blockId}"]`,
+								label: blockId == null ? `Page · ${pageId}` : fieldName != null ? `Field · ${fieldName}` : itemId != null ? `Item · ${itemId}` : `Block · ${blockId}`,
+								x: .5,
+								y: .5
+							}
+						});
+					}
+					previewCommentsStore.send({
+						type: "setMessage",
+						message: event_1.target.value
+					});
+				}
+			}), /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "block-end",
+				className: "justify-end",
+				children: /* @__PURE__ */ jsx(InputGroupButton, {
+					type: "button",
+					size: "icon-sm",
+					variant: "default",
+					className: "rounded-full",
+					"aria-label": "Post comment",
+					disabled: !message.trim(),
+					onClick: submit,
+					children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 })
+				})
+			})] })
+		] })]
+	});
+}
+
+//#endregion
+export { AttachedComments };