camox 0.43.0 → 0.44.0

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

@@ -21,9 +21,9 @@ import { Switch } from "@camox/ui/switch";
 //#region src/features/preview/components/AssetLightbox.tsx
 function DeliveredSize(t0) {
 	const $ = c(16);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
+	if ($[0] !== "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf") {
 		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
+		$[0] = "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf";
 	}
 	const { bytes, raw } = t0;
 	if (bytes == null) {
@@ -92,9 +92,9 @@ function DeliveredSize(t0) {
 }
 function DeliveredLabel(t0) {
 	const $ = c(4);
-	if ($[0] !== "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63") {
+	if ($[0] !== "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "974fbfa56da78c6c8e188316efcb7f5517bffbf74578eecb8288c82aad4e9b63";
+		$[0] = "a37322f6f4a0473903954c8afefb928b001d0a8beede19e05fe56bf7cdbe1ecf";
 	}
 	const { children } = t0;
 	let t1;
@@ -171,6 +171,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		}
 	}, [open]);
 	const isImage = file?.mimeType?.startsWith("image/") ?? false;
+	const isVideo = file?.mimeType?.startsWith("video/") ?? false;
 	const canUseAiMetadata = isRasterImage(file?.mimeType);
 	const fileUrl = file?.url;
 	const fileMimeType = file?.mimeType;
@@ -367,6 +368,16 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 								className: "max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
 								draggable: false
 							})
+						}) : isVideo ? /* @__PURE__ */ jsx("div", {
+							className: "checkered absolute inset-0 flex items-center justify-center p-6",
+							children: open && /* @__PURE__ */ jsx("video", {
+								src: file.url,
+								controls: true,
+								playsInline: true,
+								preload: "metadata",
+								"aria-label": file.alt || file.filename || "Video preview",
+								className: "max-h-full max-w-full object-contain shadow-lg"
+							}, file.url)
 						}) : /* @__PURE__ */ jsx("div", {
 							className: "bg-muted/30 flex h-full min-h-[70vh] items-center justify-center p-6",
 							children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-16 w-16" })
@@ -530,7 +541,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									ref: replaceInputRef,
 									type: "file",
 									className: "hidden",
-									accept: isImage ? "image/*" : "*/*",
+									accept: isImage ? "image/*" : isVideo ? "video/*" : "*/*",
 									onChange: (e_0) => {
 										if (e_0.target.files) handleReplaceDrop(e_0.target.files);
 										e_0.target.value = "";
@@ -540,7 +551,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 									type: "button",
 									variant: "secondary",
 									onClick: () => replaceInputRef.current?.click(),
-									children: isImage ? "Replace image" : "Replace file"
+									children: isImage ? "Replace image" : isVideo ? "Replace video" : "Replace file"
 								})
 							]
 						})

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

@@ -1,34 +1,148 @@
-import { useAuthContext } from "../../../lib/auth.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { blockQueries, commentMutations, commentQueries } from "../../../lib/queries.js";
+import { areCommentsEnabled } from "../commentsEnabled.js";
 import { previewStore } from "../previewStore.js";
-import { previewCommentsStore, revealCommentTarget } from "../previewCommentsStore.js";
+import { getCommentTargetFieldType, previewCommentsStore, revealCommentTarget } from "../previewCommentsStore.js";
+import { usePageComments } from "../usePageComments.js";
 import { CommentHeader } from "./CommentHeader.js";
 import { CommentTargetQuote } from "./CommentTargetQuote.js";
+import { SendFeedbackDialog } from "./SendFeedbackDialog.js";
 import { SidebarSection, SidebarSectionContent, SidebarSectionHeader } from "./SidebarSection.js";
+import { c } from "react/compiler-runtime";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
+import { COMMENT_MESSAGE_MAX_LENGTH } from "@camox/api-contract";
 import { Button } from "@camox/ui/button";
-import { ArrowUp, X } from "lucide-react";
+import { Archive, ArrowUp, CornerLeftUp, Eye, X } from "lucide-react";
+import { toast } from "@camox/ui/toaster";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@camox/ui/input-group";
+import { ButtonGroup } from "@camox/ui/button-group";
 
 //#region src/features/preview/components/AttachedComments.tsx
 function resizeComposer(element) {
 	element.style.height = "auto";
 	element.style.height = `${element.scrollHeight}px`;
 }
+function editorTarget({ blockId, itemId, fieldName }) {
+	if (blockId == null) return { kind: "page" };
+	if (itemId != null) {
+		if (fieldName != null) return {
+			kind: "item-field",
+			blockId,
+			itemId,
+			fieldName
+		};
+		return {
+			kind: "item",
+			blockId,
+			itemId
+		};
+	}
+	if (fieldName != null) return {
+		kind: "block-field",
+		blockId,
+		fieldName
+	};
+	return {
+		kind: "block",
+		blockId
+	};
+}
+/** Gate before mounting queries, mutations, or composers. */
+function AttachedComments(props) {
+	const $ = c(3);
+	if ($[0] !== "8254f8bf23ff0138d71d56295c89e5b6eb791bb39cd29713ed38f79fecd96403") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8254f8bf23ff0138d71d56295c89e5b6eb791bb39cd29713ed38f79fecd96403";
+	}
+	if (!areCommentsEnabled() || props.pageId == null) return null;
+	let t0;
+	if ($[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(EnabledAttachedComments, {
+			...props,
+			pageId: props.pageId
+		});
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
 /** 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);
+function EnabledAttachedComments({ pageId, blockId, itemId, fieldName, allPageComments = false }) {
+	const camoxApp = useCamoxApp();
+	const queryClient = useQueryClient();
+	const commentsQuery = usePageComments(pageId);
+	const { draft, activeId, focusTarget } = useSelector(previewCommentsStore, (state) => state.context);
+	const target = editorTarget({
+		blockId,
+		itemId,
+		fieldName
+	});
+	const matches = (entry) => entry.pageId === pageId && (allPageComments || entry.target != null && entry.target.kind === target.kind && (!("blockId" in entry.target) || entry.target.blockId === blockId) && (!("itemId" in entry.target) || entry.target.itemId === itemId) && (!("fieldName" in entry.target) || entry.target.fieldName === fieldName));
+	const attached = (commentsQuery.data ?? []).filter(matches);
+	const visible = attached.filter((comment) => !comment.resolved);
 	const currentDraft = draft && matches(draft) ? draft : null;
-	const selected = attached.find((comment) => comment.id === activeId);
+	const selected = attached.find((comment_0) => comment_0.id === activeId);
 	const textarea = React.useRef(null);
 	const activeComment = React.useRef(null);
 	const draftTarget = currentDraft?.target;
 	const message = currentDraft?.message ?? "";
+	const submitting = React.useRef(false);
+	const setResolved = useMutation({
+		...commentMutations.setResolved(),
+		onSuccess: (comment_1, submitted) => {
+			const queryKey = commentQueries.list(submitted.pageId).queryKey;
+			queryClient.setQueryData(queryKey, (comments) => comments?.map((entry_0) => entry_0.id === comment_1.id ? comment_1 : entry_0));
+			queryClient.invalidateQueries({ queryKey });
+		},
+		onError: () => toast.error("Could not update feedback. Please try again.")
+	});
+	const createComment = useMutation({
+		...commentMutations.create(),
+		onSuccess: (comment_2, submitted_0) => {
+			const queryKey_0 = commentQueries.list(submitted_0.pageId).queryKey;
+			queryClient.setQueryData(queryKey_0, (comments_0) => {
+				if (!comments_0) return void 0;
+				return [...comments_0.filter((entry_1) => entry_1.id !== comment_2.id), comment_2].sort((a, b) => a.createdAt - b.createdAt || a.id.localeCompare(b.id));
+			});
+			queryClient.invalidateQueries({ queryKey: queryKey_0 });
+			previewCommentsStore.send({
+				type: "postSucceeded",
+				draft: submitted_0
+			});
+		},
+		onSettled: () => {
+			submitting.current = false;
+		}
+	});
+	const selectComment = async (id, target_0) => {
+		previewCommentsStore.send({
+			type: "selectComment",
+			id
+		});
+		if (target_0.kind === "page") {
+			revealCommentTarget(target_0);
+			return;
+		}
+		try {
+			const bundle = await queryClient.fetchQuery(blockQueries.get(target_0.blockId));
+			if (previewCommentsStore.getSnapshot().context.activeId !== id) return;
+			if ("itemId" in target_0 && !bundle.repeatableItems.some((item) => item.id === target_0.itemId)) {
+				toast.error("This feedback target is no longer available.");
+				return;
+			}
+			const fieldType = getCommentTargetFieldType(target_0, bundle, camoxApp);
+			if ("fieldName" in target_0 && !fieldType) {
+				toast.error("This feedback field is no longer available.");
+				return;
+			}
+			revealCommentTarget(target_0, fieldType);
+		} catch {
+			toast.error("This feedback target is no longer available.");
+		}
+	};
 	React.useLayoutEffect(() => {
 		if (textarea.current) resizeComposer(textarea.current);
 	}, [message, pageId]);
@@ -45,17 +159,9 @@ function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPa
 		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 });
+		if (!areCommentsEnabled() || !currentDraft || !message.trim() || submitting.current) return;
+		submitting.current = true;
+		createComment.mutate(currentDraft);
 	};
 	React.useEffect(() => {
 		if (!draftTarget || focusTarget !== draftTarget || !textarea.current) return;
@@ -67,7 +173,6 @@ function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPa
 		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",
@@ -88,50 +193,92 @@ function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPa
 				children: /* @__PURE__ */ jsx(X, { className: "text-muted-foreground" })
 			})]
 		}) : /* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Feedback" }), /* @__PURE__ */ jsxs(SidebarSectionContent, { children: [
-			allPageComments && attached.length === 0 && /* @__PURE__ */ jsx("p", {
+			commentsQuery.isPending && /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm",
-				children: "No feedback yet. Select something on the page to comment on it."
+				children: "Loading feedback…"
 			}),
-			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
+			commentsQuery.isError && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "text-sm",
+				children: [
+					"Could not load feedback.",
+					" ",
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "link",
+						onClick: () => void commentsQuery.refetch(),
+						children: "Retry"
+					})
+				]
+			}),
+			allPageComments && commentsQuery.isSuccess && visible.length === 0 && /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground text-sm",
+				children: [attached.length === 0 ? "No feedback yet." : "No unresolved feedback.", " Select something on the page to comment on it."]
+			}),
+			visible.map((comment_3) => /* @__PURE__ */ jsxs("div", {
+				ref: comment_3.id === activeId ? activeComment : void 0,
+				className: "rounded-md p-1",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CommentHeader, {
+					author: comment_3.author,
+					createdAt: comment_3.createdAt
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "pl-8",
-					children: [allPageComments && /* @__PURE__ */ jsx(CommentTargetQuote, {
+					children: [allPageComments && (comment_3.target ? /* @__PURE__ */ jsx(CommentTargetQuote, {
 						pageId,
-						target: comment_0.target
-					}), /* @__PURE__ */ jsx("p", {
+						target: comment_3.target
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: "Target no longer available"
+					})), /* @__PURE__ */ jsx("p", {
 						className: "text-sm wrap-break-word whitespace-pre-wrap",
-						children: comment_0.message
+						children: comment_3.message
 					})]
+				})] }), /* @__PURE__ */ jsxs(ButtonGroup, {
+					className: "mt-2 ml-8",
+					"aria-label": "Comment actions",
+					children: [
+						allPageComments && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: comment_3.target == null,
+							onClick: () => {
+								if (comment_3.target) selectComment(comment_3.id, comment_3.target);
+							},
+							children: [/* @__PURE__ */ jsx(Eye, { className: "text-muted-foreground" }), "View"]
+						}),
+						!allPageComments && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: () => previewStore.send({
+								type: "setCommentMode",
+								enabled: true
+							}),
+							children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "text-muted-foreground" }), "See all"]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							"aria-label": "Archive comment",
+							disabled: setResolved.isPending,
+							onClick: () => {
+								setResolved.mutate({
+									pageId,
+									id: comment_3.id,
+									resolved: true
+								});
+							},
+							children: [/* @__PURE__ */ jsx(Archive, { className: "text-muted-foreground" }), "Archive"]
+						})
+					]
 				})]
-			}, comment_0.id)),
-			allPageComments && /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "secondary",
-				className: "w-full",
-				disabled: attached.length === 0,
-				children: "Send feedback to agent..."
-			}),
+			}, comment_3.id)),
+			allPageComments && /* @__PURE__ */ jsx(SendFeedbackDialog, {
+				pageId,
+				disabled: visible.length === 0
+			}, pageId),
 			!allPageComments && /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
 				ref: textarea,
 				"aria-label": "Comment text",
@@ -139,37 +286,22 @@ function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPa
 				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();
+				maxLength: COMMENT_MESSAGE_MAX_LENGTH,
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+					event.preventDefault();
+					event.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
-							}
-						});
-					}
+				onChange: (event_0) => {
+					if (!currentDraft) previewCommentsStore.send({
+						type: "startComment",
+						pageId,
+						target
+					});
 					previewCommentsStore.send({
 						type: "setMessage",
-						message: event_1.target.value
+						message: event_0.target.value
 					});
 				}
 			}), /* @__PURE__ */ jsx(InputGroupAddon, {
@@ -181,11 +313,16 @@ function AttachedComments({ pageId, blockId, itemId, fieldName, fieldType, allPa
 					variant: "default",
 					className: "rounded-full",
 					"aria-label": "Post comment",
-					disabled: !message.trim(),
+					disabled: !message.trim() || createComment.isPending,
 					onClick: submit,
 					children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 })
 				})
-			})] })
+			})] }),
+			createComment.isError && currentDraft?.id === createComment.variables?.id && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-destructive text-sm",
+				children: "Could not post feedback. Your draft is saved here; try posting again."
+			})
 		] })]
 	});
 }

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

@@ -1,5 +1,7 @@
 import { isLexicalState, lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { blockQueries, pageQueries } from "../../../lib/queries.js";
+import { getCommentTargetFieldType } from "../previewCommentsStore.js";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { jsx } from "react/jsx-runtime";
@@ -7,9 +9,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/features/preview/components/CommentTargetQuote.tsx
 function Quote(t0) {
 	const $ = c(3);
-	if ($[0] !== "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92") {
+	if ($[0] !== "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92";
+		$[0] = "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab";
 	}
 	const { children } = t0;
 	let t1;
@@ -25,9 +27,9 @@ function Quote(t0) {
 }
 function PageQuote(t0) {
 	const $ = c(5);
-	if ($[0] !== "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92") {
+	if ($[0] !== "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92";
+		$[0] = "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab";
 	}
 	const { pageId } = t0;
 	let t1;
@@ -48,11 +50,12 @@ function PageQuote(t0) {
 }
 function BlockQuote(t0) {
 	const $ = c(19);
-	if ($[0] !== "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92") {
+	if ($[0] !== "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab") {
 		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92";
+		$[0] = "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab";
 	}
 	const { target } = t0;
+	const app = useCamoxApp();
 	let t1;
 	if ($[1] !== target.blockId) {
 		t1 = blockQueries.get(target.blockId);
@@ -71,11 +74,11 @@ function BlockQuote(t0) {
 		return t3;
 	}
 	let t2;
-	if ($[5] !== bundle.block || $[6] !== bundle.repeatableItems || $[7] !== target.itemId) {
-		t2 = target.itemId == null ? bundle.block : bundle.repeatableItems.find((item) => item.id === target.itemId);
+	if ($[5] !== bundle.block || $[6] !== bundle.repeatableItems || $[7] !== target) {
+		t2 = "itemId" in target ? bundle.repeatableItems.find((item) => item.id === target.itemId) : bundle.block;
 		$[5] = bundle.block;
 		$[6] = bundle.repeatableItems;
-		$[7] = target.itemId;
+		$[7] = target;
 		$[8] = t2;
 	} else t2 = $[8];
 	const subject = t2;
@@ -87,9 +90,10 @@ function BlockQuote(t0) {
 		} else t3 = $[9];
 		return t3;
 	}
-	if (target.fieldName != null) {
+	if ("fieldName" in target) {
+		const fieldType = getCommentTargetFieldType(target, bundle, app);
 		const value = subject.content[target.fieldName];
-		if (target.fieldType === "String" || target.fieldType == null) {
+		if (fieldType === "String") {
 			if (typeof value === "string" || isLexicalState(value)) {
 				let t3;
 				if ($[10] !== value) {
@@ -105,7 +109,7 @@ function BlockQuote(t0) {
 				} else t4 = $[13];
 				return t4;
 			}
-			if (value == null && target.fieldType === "String") {
+			if (value == null) {
 				let t3;
 				if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
 					t3 = /* @__PURE__ */ jsx(Quote, { children: "Empty text" });
@@ -114,7 +118,7 @@ function BlockQuote(t0) {
 				return t3;
 			}
 		}
-		if (target.fieldType === "Link" && value && typeof value === "object" && "text" in value && typeof value.text === "string") {
+		if (fieldType === "Link" && value && typeof value === "object" && "text" in value && typeof value.text === "string") {
 			const t3 = value.text || "Empty link text";
 			let t4;
 			if ($[15] !== t3) {
@@ -125,7 +129,7 @@ function BlockQuote(t0) {
 			return t4;
 		}
 	}
-	const t3 = subject.summary || (target.itemId == null ? "Untitled block" : "Untitled item");
+	const t3 = subject.summary || ("itemId" in target ? "Untitled item" : "Untitled block");
 	let t4;
 	if ($[17] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Quote, { children: t3 });
@@ -136,12 +140,12 @@ function BlockQuote(t0) {
 }
 function CommentTargetQuote(t0) {
 	const $ = c(5);
-	if ($[0] !== "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92") {
+	if ($[0] !== "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c7d7da293bb0be577af3f96a804786ef95d893a2ac7e10598c27ec5225cf9e92";
+		$[0] = "3d839e9320d85d713ee71a099780efa90c475e3bad1d5b3892ff6d87762000ab";
 	}
 	const { pageId, target } = t0;
-	if (target.blockId == null) {
+	if (target.kind === "page") {
 		let t1;
 		if ($[1] !== pageId) {
 			t1 = /* @__PURE__ */ jsx(PageQuote, { pageId });
@@ -152,10 +156,7 @@ function CommentTargetQuote(t0) {
 	}
 	let t1;
 	if ($[3] !== target) {
-		t1 = /* @__PURE__ */ jsx(BlockQuote, { target: {
-			...target,
-			blockId: target.blockId
-		} });
+		t1 = /* @__PURE__ */ jsx(BlockQuote, { target });
 		$[3] = target;
 		$[4] = t1;
 	} else t1 = $[4];

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

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Label } from "@camox/ui/label";
-import { Input } from "@camox/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@camox/ui/input-group";
 
 //#region src/features/preview/components/DerivedLayoutDialog.tsx
 function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
@@ -28,11 +28,12 @@ function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
 		const value = values[param]?.trim();
 		return value && !value.includes("/") && value !== "." && value !== "..";
 	});
-	const path = `/${segments.map((segment_1) => {
+	const resolvedSegments = segments.map((segment_1) => {
 		if (!segment_1.startsWith("$")) return encodeURIComponent(segment_1);
 		const value_0 = values[segment_1.slice(1)]?.trim();
 		return value_0 ? encodeURIComponent(value_0) : segment_1;
-	}).join("/")}`;
+	});
+	const path = `/${resolvedSegments.join("/")}`;
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: true,
 		onOpenChange: (open) => !open && onClose(),
@@ -57,24 +58,38 @@ function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
 			},
 			children: [
 				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: ["Preview ", layout._internal.title] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Enter the path parameters for the page you want to preview." })] }),
-				params.map((param_0) => /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: `${id}-${param_0}`,
-						children: param_0
-					}), /* @__PURE__ */ jsx(Input, {
-						id: `${id}-${param_0}`,
-						required: true,
-						value: values[param_0] ?? "",
-						onChange: (event_0) => setValues((previous) => ({
-							...previous,
-							[param_0]: event_0.target.value
-						}))
-					})]
-				}, param_0)),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground font-mono text-sm break-all",
-					children: path
+				params.map((param_0) => {
+					const index = segments.indexOf(`$${param_0}`);
+					const prefix = resolvedSegments.slice(0, index).join("/");
+					const suffix = segments.slice(index + 1).every((segment_2) => !segment_2.startsWith("$")) ? resolvedSegments.slice(index + 1).join("/") : "";
+					return /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: `${id}-${param_0}`,
+							children: param_0
+						}), /* @__PURE__ */ jsxs(InputGroup, { children: [
+							/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxs(InputGroupText, {
+								className: "font-mono",
+								children: ["/", prefix && `${prefix}/`]
+							}) }),
+							/* @__PURE__ */ jsx(InputGroupInput, {
+								id: `${id}-${param_0}`,
+								required: true,
+								value: values[param_0] ?? "",
+								onChange: (event_0) => setValues((previous) => ({
+									...previous,
+									[param_0]: event_0.target.value
+								}))
+							}),
+							suffix && /* @__PURE__ */ jsx(InputGroupAddon, {
+								align: "inline-end",
+								children: /* @__PURE__ */ jsxs(InputGroupText, {
+									className: "font-mono",
+									children: ["/", suffix]
+								})
+							})
+						] })]
+					}, param_0);
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",