camox 0.43.0 → 0.44.0

package/dist/features/preview/overlayHighlights.js

@@ -0,0 +1,54 @@
+//#region src/features/preview/overlayHighlights.ts
+const states = ["hovered", "focused"];
+/** Detached borders represent their parent, not the portal div's DOM depth. */
+function targetOf(element) {
+	return element.hasAttribute("data-camox-detached") ? element.parentElement ?? element : element;
+}
+function depthOf(element) {
+	let depth = 0;
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) depth++;
+	return depth;
+}
+/**
+* Local and remote interactions publish the same candidate attributes. Resolve
+* them together, independently for hover and selection, before the browser paints.
+* Equal-depth candidates (e.g. a sidebar-hovered list) use document order.
+*/
+function observeOverlayHighlights(document) {
+	const Observer = document.defaultView?.MutationObserver;
+	if (!Observer) return () => {};
+	const winners = /* @__PURE__ */ new Map();
+	const update = () => {
+		for (const state of states) {
+			let winner;
+			let deepest = -1;
+			for (const candidate of document.querySelectorAll(`[data-camox-${state}]`)) {
+				const depth = depthOf(targetOf(candidate));
+				if (depth <= deepest) continue;
+				deepest = depth;
+				winner = candidate;
+			}
+			const previous = winners.get(state);
+			if (previous === winner) continue;
+			previous?.removeAttribute(`data-camox-highlight-${state}`);
+			winner?.setAttribute(`data-camox-highlight-${state}`, "");
+			if (winner) winners.set(state, winner);
+			else winners.delete(state);
+		}
+	};
+	const observer = new Observer(update);
+	observer.observe(document, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: states.map((state) => `data-camox-${state}`)
+	});
+	update();
+	return () => {
+		observer.disconnect();
+		for (const [state, winner] of winners) winner.removeAttribute(`data-camox-highlight-${state}`);
+	};
+}
+
+//#endregion
+export { observeOverlayHighlights };

package/dist/features/preview/previewCommentsStore.js

@@ -1,55 +1,78 @@
 import { previewStore } from "./previewStore.js";
+import { fieldTypesDictionary } from "../../core/lib/fieldTypes.js";
 import { createStore } from "@xstate/store-react";
 
 //#region src/features/preview/previewCommentsStore.ts
-function revealCommentTarget(target) {
+/** Resolve against the current definition, including nested repeater ancestry. */
+function getCommentTargetFieldType(target, bundle, app) {
+	if (target.kind !== "block-field" && target.kind !== "item-field") return;
+	if (bundle.block.id !== target.blockId) return;
+	let schema = app.getBlockById(bundle.block.type)?._internal.contentSchema;
+	if (target.kind === "item-field") {
+		const path = [];
+		const visited = /* @__PURE__ */ new Set();
+		let itemId = target.itemId;
+		while (itemId != null) {
+			if (visited.has(itemId)) return;
+			visited.add(itemId);
+			const item = bundle.repeatableItems.find((entry) => entry.id === itemId);
+			if (!item) return;
+			path.unshift(item.fieldName);
+			itemId = item.parentItemId;
+		}
+		for (const fieldName of path) schema = schema?.properties?.[fieldName]?.items;
+	}
+	const fieldType = schema?.properties?.[target.fieldName]?.fieldType;
+	if (fieldType && Object.hasOwn(fieldTypesDictionary, fieldType)) return fieldType;
+}
+/** Field types belong to the current app, never to persisted comment targets. */
+function revealCommentTarget(target, fieldType) {
 	previewStore.send({
 		type: "setCommentMode",
 		enabled: false
 	});
 	previewStore.send({ type: "closeAddBlockSidebar" });
 	previewStore.send({ type: "clearPeekedBlock" });
-	if (target.blockId == null) {
+	if (target.kind === "page") {
 		previewStore.send({
 			type: "setSelection",
 			selection: null
 		});
 		return;
 	}
-	if (target.fieldName != null) {
+	if ((target.kind === "block-field" || target.kind === "item-field") && fieldType) {
 		previewStore.send({
 			type: "setSelection",
-			selection: target.itemId == null ? {
-				type: "block-field",
+			selection: target.kind === "item-field" ? {
+				type: "item-field",
 				blockId: target.blockId,
+				itemId: target.itemId,
 				fieldName: target.fieldName,
-				fieldType: target.fieldType ?? "String"
+				fieldType
 			} : {
-				type: "item-field",
+				type: "block-field",
 				blockId: target.blockId,
-				itemId: target.itemId,
 				fieldName: target.fieldName,
-				fieldType: target.fieldType ?? "String"
+				fieldType
 			}
 		});
 		return;
 	}
 	previewStore.send({
 		type: "setSelection",
-		selection: target.itemId == null ? {
-			type: "block",
-			blockId: target.blockId
-		} : {
+		selection: "itemId" in target ? {
 			type: "item",
 			blockId: target.blockId,
 			itemId: target.itemId
+		} : {
+			type: "block",
+			blockId: target.blockId
 		}
 	});
 }
-/** UI prototype only: comments live in memory, scoped to their originating page. */
+/** Server comments belong to the query cache; this store holds composer UI only. */
 const previewCommentsStore = createStore({
 	context: {
-		comments: [],
 		draft: null,
 		activeId: null,
 		focusTarget: null
@@ -58,6 +81,7 @@ const previewCommentsStore = createStore({
 		startComment: (context, event) => ({
 			...context,
 			draft: {
+				id: crypto.randomUUID(),
 				pageId: event.pageId,
 				target: event.target,
 				message: ""
@@ -69,27 +93,23 @@ const previewCommentsStore = createStore({
 			...context,
 			focusTarget: null
 		}),
-		setMessage: (context, event) => ({
-			...context,
-			draft: context.draft ? {
-				...context.draft,
-				message: event.message
-			} : null
-		}),
-		postComment: (context, event) => {
-			const draft = context.draft;
-			if (!draft?.message.trim()) return context;
+		setMessage: (context, event) => {
+			if (!context.draft || context.draft.message === event.message) return context;
+			return {
+				...context,
+				draft: {
+					...context.draft,
+					id: crypto.randomUUID(),
+					message: event.message
+				}
+			};
+		},
+		postSucceeded: (context, event) => {
+			if (context.draft?.id !== event.draft.id) return context;
 			return {
 				...context,
-				comments: [...context.comments, {
-					...draft,
-					id: event.id,
-					message: draft.message.trim(),
-					author: event.author,
-					createdAt: event.createdAt
-				}],
 				draft: null,
-				activeId: event.id,
+				activeId: event.draft.id,
 				focusTarget: null
 			};
 		},
@@ -112,4 +132,4 @@ const previewCommentsStore = createStore({
 });
 
 //#endregion
-export { previewCommentsStore, revealCommentTarget };
+export { getCommentTargetFieldType, previewCommentsStore, revealCommentTarget };

package/dist/features/preview/previewSelection.js

@@ -5,6 +5,30 @@ import { createContext, useContext } from "react";
 
 //#region src/features/preview/previewSelection.ts
 const PreviewPageContext = createContext(null);
+function commentTarget(selection) {
+	switch (selection.type) {
+		case "block": return {
+			kind: "block",
+			blockId: selection.blockId
+		};
+		case "item": return {
+			kind: "item",
+			blockId: selection.blockId,
+			itemId: selection.itemId
+		};
+		case "block-field": return {
+			kind: "block-field",
+			blockId: selection.blockId,
+			fieldName: selection.fieldName
+		};
+		case "item-field": return {
+			kind: "item-field",
+			blockId: selection.blockId,
+			itemId: selection.itemId,
+			fieldName: selection.fieldName
+		};
+	}
+}
 /** Both editing and commenting use the target already known by the editable component. */
 function selectPreviewTarget(selection, pageId, event) {
 	const snapshot = previewStore.getSnapshot();
@@ -27,39 +51,20 @@ function selectPreviewTarget(selection, pageId, event) {
 	event.preventDefault();
 	event.stopPropagation();
 	if (pageId === null) return;
-	const element = event.currentTarget;
-	const rect = element.getBoundingClientRect();
-	const field = selection.type === "block-field" || selection.type === "item-field";
-	const itemId = "itemId" in selection ? selection.itemId : void 0;
-	const attribute = field ? "data-camox-field-id" : selection.type === "item" ? "data-camox-repeater-item-id" : element.hasAttribute("data-camox-comment-block-id") ? "data-camox-comment-block-id" : "data-camox-block-id";
-	const id = field ? [
-		selection.blockId,
-		itemId,
-		selection.fieldName
-	].filter((part) => part != null).join("__") : String(itemId ?? selection.blockId);
-	const target = {
-		blockId: selection.blockId,
-		itemId,
-		fieldName: field ? selection.fieldName : void 0,
-		fieldType: field ? selection.fieldType : void 0,
-		selector: `[${attribute}="${CSS.escape(id)}"]`,
-		label: field ? `Field · ${selection.fieldName}` : `${selection.type === "item" ? "Item" : "Block"} · ${id}`,
-		x: event.clientX == null ? .5 : Math.max(0, Math.min(1, (event.clientX - rect.left) / (rect.width || 1))),
-		y: event.clientY == null ? .5 : Math.max(0, Math.min(1, (event.clientY - rect.top) / (rect.height || 1)))
-	};
+	const target = commentTarget(selection);
 	previewCommentsStore.send({
 		type: "startComment",
 		pageId,
 		target,
 		focusComposer: true
 	});
-	revealCommentTarget(target);
+	revealCommentTarget(target, "fieldType" in selection ? selection.fieldType : void 0);
 }
 function usePreviewSelection() {
 	const $ = c(3);
-	if ($[0] !== "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6") {
+	if ($[0] !== "5d794da8ed357c0619bb8d670a0c5261637b093c5e0fce67e7cdf572e265bb4e") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "5c1128621012a50122fc348fb93c4181c8f52e6cf8c887d22b4d96421b55a5a6";
+		$[0] = "5d794da8ed357c0619bb8d670a0c5261637b093c5e0fce67e7cdf572e265bb4e";
 	}
 	const pageId = useContext(PreviewPageContext);
 	let t0;

package/dist/features/preview/usePageComments.js

@@ -0,0 +1,39 @@
+import { commentQueries } from "../../lib/queries.js";
+import { areCommentsEnabled } from "./commentsEnabled.js";
+import { c } from "react/compiler-runtime";
+import { useQuery } from "@tanstack/react-query";
+
+//#region src/features/preview/usePageComments.ts
+function usePageComments(pageId) {
+	const $ = c(8);
+	if ($[0] !== "53184284ca58f3bc8c3a79ab856fb86253dedefa1ff319d9aac05c62162bf3b0") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "53184284ca58f3bc8c3a79ab856fb86253dedefa1ff319d9aac05c62162bf3b0";
+	}
+	let t0;
+	if ($[1] !== pageId) {
+		t0 = commentQueries.list(pageId ?? 0);
+		$[1] = pageId;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== pageId) {
+		t1 = areCommentsEnabled() && pageId != null;
+		$[3] = pageId;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t2 = {
+			...t0,
+			enabled: t1
+		};
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return useQuery(t2);
+}
+
+//#endregion
+export { usePageComments };

package/dist/features/provider/CoreCamoxProvider.js

@@ -4,7 +4,7 @@ import { CamoxAppProvider } from "./components/CamoxAppContext.js";
 import { projectQueries } from "../../lib/queries.js";
 import { useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/provider/CoreCamoxProvider.tsx
 function isLocalhostPreview() {
@@ -25,8 +25,31 @@ function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, envi
 		queryClient.setQueryData(projectQueries.getBySlug(projectSlug).queryKey, initialProject);
 		seededProject.current = initialProject;
 	}
-	useProcessOtt(authClient);
-	return /* @__PURE__ */ jsx(AuthContext.Provider, {
+	const { ready, error } = useProcessOtt(authClient, {
+		projectSlug,
+		environmentName,
+		apiUrl
+	});
+	const [isPreviewHandoff, setIsPreviewHandoff] = React.useState(false);
+	React.useEffect(() => {
+		setIsPreviewHandoff(new URL(window.location.href).searchParams.has("camox-preview"));
+	}, []);
+	if (error) return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-camox-preview": "error",
+		children: error
+	});
+	if (isPreviewHandoff && !ready) return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"data-camox-preview": "pending",
+		children: "Signing in to draft preview…"
+	});
+	if (isPreviewHandoff && !initialAuthenticated) return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-camox-preview": "error",
+		children: "Draft preview is not authenticated. Run camox preview again for a fresh link."
+	});
+	return /* @__PURE__ */ jsxs(AuthContext.Provider, {
 		value: {
 			authClient,
 			authenticationUrl,
@@ -35,10 +58,19 @@ function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, envi
 			environmentName,
 			initialAuthenticated
 		},
-		children: /* @__PURE__ */ jsx(CamoxAppProvider, {
+		children: [isPreviewHandoff && /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"data-camox-preview": "ready",
+			children: [
+				"Draft preview · ",
+				projectSlug,
+				" · ",
+				environmentName
+			]
+		}), /* @__PURE__ */ jsx(CamoxAppProvider, {
 			app: camoxApp,
 			children
-		})
+		})]
 	});
 }
 

package/dist/features/provider/LocalhostPreviewProvider.js

@@ -13,15 +13,15 @@ import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/LocalhostPreviewProvider.tsx
 function LocalhostPreviewProvider(t0) {
-	const $ = c(21);
-	if ($[0] !== "fddfba0cee29e4fb721206c13e16fbe407ae9aeb750c2a716d0ba1347b862953") {
-		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fddfba0cee29e4fb721206c13e16fbe407ae9aeb750c2a716d0ba1347b862953";
+	const $ = c(31);
+	if ($[0] !== "197882bd626662aebba1ae79edba0ab6d320481729dba64af237363088a51e3f") {
+		for (let $i = 0; $i < 31; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "197882bd626662aebba1ae79edba0ab6d320481729dba64af237363088a51e3f";
 	}
 	const { children } = t0;
 	const signInRedirect = useSignInRedirect();
 	const { resolvedTheme } = useApplyTheme();
-	const [isSignInDialogOpen, setIsSignInDialogOpen] = React.useState(false);
+	const [signInReason, setSignInReason] = React.useState(null);
 	useAdminShortcuts();
 	let t1;
 	let t2;
@@ -33,7 +33,7 @@ function LocalhostPreviewProvider(t0) {
 				aliases: ["Enter edit mode", "Edit mode"],
 				groupLabel: "Preview",
 				checkIfAvailable: _temp,
-				execute: () => setIsSignInDialogOpen(true),
+				execute: () => setSignInReason("edit"),
 				shortcut: EDIT_MODE_SHORTCUT
 			}];
 			actionsStore.send({
@@ -81,9 +81,14 @@ function LocalhostPreviewProvider(t0) {
 	} else t5 = $[6];
 	let t6;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = { onEditModeChange: (checked) => {
-			if (checked) setIsSignInDialogOpen(true);
-		} };
+		t6 = {
+			onEditModeChange: (checked) => {
+				if (checked) setSignInReason("edit");
+			},
+			onCommentModeChange: (enabled) => {
+				if (enabled) setSignInReason("feedback");
+			}
+		};
 		$[7] = t6;
 	} else t6 = $[7];
 	let t7;
@@ -98,54 +103,85 @@ function LocalhostPreviewProvider(t0) {
 		$[8] = children;
 		$[9] = t7;
 	} else t7 = $[9];
-	let t8;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Sign in to edit" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "You need to sign in before you can enable edit mode." })] });
-		$[10] = t8;
-	} else t8 = $[10];
+	const t8 = signInReason !== null;
 	let t9;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(AlertDialogCancel, {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (open) => {
+			if (!open) setSignInReason(null);
+		};
+		$[10] = t9;
+	} else t9 = $[10];
+	const t10 = signInReason === "feedback" ? "Sign in to leave feedback" : "Sign in to edit";
+	let t11;
+	if ($[11] !== t10) {
+		t11 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: t10 });
+		$[11] = t10;
+		$[12] = t11;
+	} else t11 = $[12];
+	const t12 = signInReason === "feedback" ? "You need to sign in before you can leave feedback for agents." : "You need to sign in before you can enable edit mode.";
+	let t13;
+	if ($[13] !== t12) {
+		t13 = /* @__PURE__ */ jsx(AlertDialogDescription, { children: t12 });
+		$[13] = t12;
+		$[14] = t13;
+	} else t13 = $[14];
+	let t14;
+	if ($[15] !== t11 || $[16] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [t11, t13] });
+		$[15] = t11;
+		$[16] = t13;
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(AlertDialogCancel, {
 			variant: "outline",
 			size: "default",
 			children: "Cancel"
 		});
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== signInRedirect) {
-		t10 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t8, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t9, /* @__PURE__ */ jsx(AlertDialogAction, {
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] !== signInRedirect) {
+		t16 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t15, /* @__PURE__ */ jsx(AlertDialogAction, {
 			onClick: signInRedirect,
 			children: "Sign in"
-		})] })] });
-		$[12] = signInRedirect;
-		$[13] = t10;
-	} else t10 = $[13];
-	let t11;
-	if ($[14] !== isSignInDialogOpen || $[15] !== t10) {
-		t11 = /* @__PURE__ */ jsx(AlertDialog, {
-			open: isSignInDialogOpen,
-			onOpenChange: setIsSignInDialogOpen,
-			children: t10
+		})] });
+		$[19] = signInRedirect;
+		$[20] = t16;
+	} else t16 = $[20];
+	let t17;
+	if ($[21] !== t14 || $[22] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t14, t16] });
+		$[21] = t14;
+		$[22] = t16;
+		$[23] = t17;
+	} else t17 = $[23];
+	let t18;
+	if ($[24] !== t17 || $[25] !== t8) {
+		t18 = /* @__PURE__ */ jsx(AlertDialog, {
+			open: t8,
+			onOpenChange: t9,
+			children: t17
 		});
-		$[14] = isSignInDialogOpen;
-		$[15] = t10;
-		$[16] = t11;
-	} else t11 = $[16];
-	let t12;
-	if ($[17] !== t11 || $[18] !== t5 || $[19] !== t7) {
-		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		$[24] = t17;
+		$[25] = t8;
+		$[26] = t18;
+	} else t18 = $[26];
+	let t19;
+	if ($[27] !== t18 || $[28] !== t5 || $[29] !== t7) {
+		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t3,
 			t5,
 			t7,
-			t11
+			t18
 		] });
-		$[17] = t11;
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t12;
-	} else t12 = $[20];
-	return t12;
+		$[27] = t18;
+		$[28] = t5;
+		$[29] = t7;
+		$[30] = t19;
+	} else t19 = $[30];
+	return t19;
 }
 function _temp2(action) {
 	return action.id;