camox 0.0.0 → 0.1.2-alpha.2

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

@@ -0,0 +1,366 @@
+import { previewStore } from "../previewStore.js";
+import { useSelector } from "@xstate/store/react";
+import { api } from "camox/server/api";
+import { useMutation } from "convex/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocation } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+import { Button } from "@camox/ui/button";
+import { CircleMinus, CirclePlus, GripVertical } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { generateKeyBetween } from "fractional-indexing";
+//#region src/features/preview/components/RepeatableItemsList.tsx
+var SortableRepeatableItem = ({ item, blockId, fieldName, canRemove, onRemove }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item._id });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1
+	};
+	const selectionBreadcrumbs = useSelector(previewStore, (state) => state.context.selectionBreadcrumbs);
+	const iframeElement = useSelector(previewStore, (state) => state.context.iframeElement);
+	const isSelected = selectionBreadcrumbs.some((b) => b.type === "RepeatableObject" && b.id === item._id);
+	const shouldShowHover = !isDragging && !isSelected;
+	const handleMouseEnter = () => {
+		if (!iframeElement?.contentWindow) return;
+		const message = {
+			type: "CAMOX_HOVER_REPEATER_ITEM",
+			blockId,
+			itemId: item._id
+		};
+		iframeElement.contentWindow.postMessage(message, "*");
+	};
+	const handleMouseLeave = () => {
+		if (!iframeElement?.contentWindow) return;
+		const message = {
+			type: "CAMOX_HOVER_REPEATER_ITEM_END",
+			blockId,
+			itemId: item._id
+		};
+		iframeElement.contentWindow.postMessage(message, "*");
+	};
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style,
+		className: cn("flex flex-row justify-between items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", shouldShowHover && "hover:bg-accent/75", isSelected && "bg-accent text-accent-foreground"),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "text-muted-foreground hover:text-foreground flex cursor-grab active:cursor-grabbing",
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center gap-1 overflow-x-hidden",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "flex-1 cursor-default truncate py-1 text-sm",
+					title: item.summary,
+					onClick: () => {
+						handleMouseLeave();
+						previewStore.send({
+							type: "drillIntoRepeatableItem",
+							itemId: item._id,
+							fieldName
+						});
+					},
+					children: item.summary
+				})
+			}),
+			canRemove && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					className: "text-muted-foreground hover:text-foreground hidden shrink-0 group-focus-within:flex group-hover:flex",
+					onClick: (e) => {
+						e.stopPropagation();
+						onRemove(item._id);
+					},
+					children: /* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" })
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "right",
+				children: "Remove item"
+			})] })
+		]
+	}) });
+};
+var getInlineItemLabel = (item, index) => {
+	for (const value of Object.values(item)) {
+		if (typeof value === "string" && value.trim()) return value;
+		if (value && typeof value === "object" && "text" in value) {
+			const text = value.text;
+			if (typeof text === "string" && text.trim()) return text;
+		}
+	}
+	return `Item ${index + 1}`;
+};
+var SortableInlineRepeatableItem = ({ item, index, blockId, parentItemId, fieldName, canRemove, onRemove }) => {
+	const sortableId = `idx:${index}`;
+	const label = getInlineItemLabel(item, index);
+	const nestedItemId = `nested:${parentItemId}:${fieldName}:${index}`;
+	const iframeElement = useSelector(previewStore, (state) => state.context.iframeElement);
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sortableId });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1
+	};
+	const handleMouseEnter = () => {
+		if (!iframeElement?.contentWindow) return;
+		const message = {
+			type: "CAMOX_HOVER_REPEATER_ITEM",
+			blockId,
+			itemId: nestedItemId
+		};
+		iframeElement.contentWindow.postMessage(message, "*");
+	};
+	const handleMouseLeave = () => {
+		if (!iframeElement?.contentWindow) return;
+		const message = {
+			type: "CAMOX_HOVER_REPEATER_ITEM_END",
+			blockId,
+			itemId: nestedItemId
+		};
+		iframeElement.contentWindow.postMessage(message, "*");
+	};
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style,
+		className: cn("flex flex-row justify-between items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", !isDragging && "hover:bg-accent/75"),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "text-muted-foreground hover:text-foreground flex cursor-grab active:cursor-grabbing",
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center gap-1 overflow-x-hidden",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "flex-1 cursor-default truncate py-1 text-sm",
+					title: label,
+					onClick: () => {
+						handleMouseLeave();
+						previewStore.send({
+							type: "drillIntoRepeatableItem",
+							itemId: sortableId,
+							fieldName
+						});
+					},
+					children: label
+				})
+			}),
+			canRemove && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					className: "text-muted-foreground hover:text-foreground hidden shrink-0 group-focus-within:flex group-hover:flex",
+					onClick: (e) => {
+						e.stopPropagation();
+						onRemove(index);
+					},
+					children: /* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" })
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "right",
+				children: "Remove item"
+			})] })
+		]
+	}) });
+};
+var RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, schema, parentItemId }) => {
+	const isInline = !!parentItemId;
+	const { pathname } = useLocation();
+	const updateRepeatableItemContent = useMutation(api.repeatableItems.updateRepeatableItemContent);
+	const updatePositionMutation = useMutation(api.repeatableItems.updateRepeatableItemPosition).withOptimisticUpdate((localStore, args) => {
+		const currentPage = localStore.getQuery(api.pages.getPage, { fullPath: pathname });
+		if (!currentPage) return;
+		const updatedBlocks = currentPage.blocks.map((block) => {
+			if (!Object.entries(block.content).some(([_, value]) => {
+				if (Array.isArray(value)) return value.some((item) => item._id === args.itemId);
+				return false;
+			})) return block;
+			const updatedContent = { ...block.content };
+			for (const [fieldName, fieldValue] of Object.entries(block.content)) {
+				if (!Array.isArray(fieldValue)) continue;
+				const items = fieldValue;
+				const itemIndex = items.findIndex((item) => item._id === args.itemId);
+				if (itemIndex === -1) continue;
+				const item = items[itemIndex];
+				const newPosition = generateKeyBetween(args.afterPosition ?? null, args.beforePosition ?? null);
+				const updatedItem = {
+					...item,
+					position: newPosition
+				};
+				const newItems = [...items];
+				newItems[itemIndex] = updatedItem;
+				newItems.sort((a, b) => {
+					if (a.position < b.position) return -1;
+					if (a.position > b.position) return 1;
+					return 0;
+				});
+				updatedContent[fieldName] = newItems;
+			}
+			return {
+				...block,
+				content: updatedContent
+			};
+		});
+		localStore.setQuery(api.pages.getPage, { fullPath: pathname }, {
+			...currentPage,
+			blocks: updatedBlocks
+		});
+	});
+	const createItemMutation = useMutation(api.repeatableItems.createRepeatableItem);
+	const deleteItemMutation = useMutation(api.repeatableItems.deleteRepeatableItem);
+	const canAdd = maxItems === void 0 || items.length < maxItems;
+	const canRemove = minItems === void 0 || items.length > minItems;
+	const handleAddItem = () => {
+		const defaultContent = {};
+		const itemsSchema = schema?.items;
+		if (itemsSchema?.properties) for (const [key, prop] of Object.entries(itemsSchema.properties)) {
+			const ft = prop.fieldType;
+			if (ft === "Image" || ft === "File") continue;
+			if ("default" in prop) defaultContent[key] = prop.default;
+		}
+		createItemMutation({
+			blockId,
+			fieldName,
+			content: defaultContent
+		});
+	};
+	const handleRemoveItem = (itemId) => {
+		deleteItemMutation({ itemId });
+	};
+	const handleAddInlineItem = () => {
+		if (!parentItemId) return;
+		const defaultContent = {};
+		const itemsSchema = schema?.items;
+		if (itemsSchema?.properties) for (const [key, prop] of Object.entries(itemsSchema.properties)) {
+			const ft = prop.fieldType;
+			if (ft === "Image" || ft === "File") continue;
+			if ("default" in prop) defaultContent[key] = prop.default;
+		}
+		const currentItems = items;
+		updateRepeatableItemContent({
+			itemId: parentItemId,
+			content: { [fieldName]: [...currentItems, defaultContent] }
+		});
+	};
+	const handleRemoveInlineItem = (index) => {
+		if (!parentItemId) return;
+		const currentItems = items;
+		updateRepeatableItemContent({
+			itemId: parentItemId,
+			content: { [fieldName]: currentItems.filter((_, i) => i !== index) }
+		});
+	};
+	const handleInlineDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id || !parentItemId) return;
+		const oldIndex = parseInt(active.id.slice(4), 10);
+		const newIndex = parseInt(over.id.slice(4), 10);
+		if (isNaN(oldIndex) || isNaN(newIndex)) return;
+		const currentItems = [...items];
+		const [moved] = currentItems.splice(oldIndex, 1);
+		currentItems.splice(newIndex, 0, moved);
+		updateRepeatableItemContent({
+			itemId: parentItemId,
+			content: { [fieldName]: currentItems }
+		});
+	};
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = async (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const dbItems = items;
+		const oldIndex = dbItems.findIndex((item) => item._id === active.id);
+		const newIndex = dbItems.findIndex((item) => item._id === over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		let afterPosition;
+		let beforePosition;
+		if (oldIndex < newIndex) {
+			afterPosition = dbItems[newIndex].position;
+			beforePosition = newIndex < dbItems.length - 1 ? dbItems[newIndex + 1].position : void 0;
+		} else {
+			afterPosition = newIndex > 0 ? dbItems[newIndex - 1].position : void 0;
+			beforePosition = dbItems[newIndex].position;
+		}
+		await updatePositionMutation({
+			itemId: active.id,
+			afterPosition,
+			beforePosition
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [isInline ? items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			onDragEnd: handleInlineDragEnd,
+			modifiers: [restrictToVerticalAxis],
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: items.map((_, i) => `idx:${i}`),
+				strategy: verticalListSortingStrategy,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1",
+					children: items.map((item, index) => /* @__PURE__ */ jsx(SortableInlineRepeatableItem, {
+						item,
+						index,
+						blockId,
+						parentItemId,
+						fieldName,
+						canRemove,
+						onRemove: handleRemoveInlineItem
+					}, index))
+				})
+			})
+		}) : items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			onDragEnd: handleDragEnd,
+			modifiers: [restrictToVerticalAxis],
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: items.map((item) => item._id),
+				strategy: verticalListSortingStrategy,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1",
+					children: items.map((item) => /* @__PURE__ */ jsx(SortableRepeatableItem, {
+						item,
+						blockId,
+						fieldName,
+						canRemove,
+						onRemove: handleRemoveItem
+					}, item._id))
+				})
+			})
+		}), canAdd && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			className: "text-muted-foreground justify-start self-start",
+			onClick: isInline ? handleAddInlineItem : handleAddItem,
+			children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
+		})]
+	});
+};
+//#endregion
+export { RepeatableItemsList };

package/dist/features/preview/components/ShikiMarkdown.d.ts

@@ -0,0 +1,4 @@
+export declare const ShikiMarkdown: ({ code }: {
+    code: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ShikiMarkdown.d.ts.map

package/dist/features/preview/components/ShikiMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShikiMarkdown.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/ShikiMarkdown.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,mDA4BvD,CAAC"}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { codeToHtml } from "shiki";
+//#region src/features/preview/components/ShikiMarkdown.tsx
+var css = `
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}
+`;
+var ShikiMarkdown = ({ code }) => {
+	const [html, setHtml] = React.useState("");
+	React.useEffect(() => {
+		let cancelled = false;
+		codeToHtml(code, {
+			lang: "markdown",
+			themes: {
+				light: "github-light",
+				dark: "github-dark-high-contrast"
+			},
+			defaultColor: false
+		}).then((result) => {
+			if (!cancelled) setHtml(result);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [code]);
+	if (!html) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: css }), /* @__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 }
+	})] });
+};
+//#endregion
+export { ShikiMarkdown };

package/dist/features/preview/components/TextFormatToolbar.d.ts

@@ -0,0 +1,2 @@
+export declare const TextFormatToolbar: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextFormatToolbar.d.ts.map

package/dist/features/preview/components/TextFormatToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFormatToolbar.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/TextFormatToolbar.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,iBAAiB,+CA6D7B,CAAC"}

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

@@ -0,0 +1,73 @@
+import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
+import { FORMAT_FLAGS } from "../../../core/lib/modifierFormats.js";
+import { useIsPreviewSheetOpen } from "./PreviewSideSheet.js";
+import { Kbd } from "@camox/ui/kbd";
+import { useSelector } from "@xstate/store/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+import { Bold, Italic } from "lucide-react";
+import * as Tooltip$1 from "@camox/ui/tooltip";
+import { ButtonGroup } from "@camox/ui/button-group";
+import { FloatingToolbar } from "@camox/ui/floating-toolbar";
+import { Toggle } from "@camox/ui/toggle";
+//#region src/features/preview/components/TextFormatToolbar.tsx
+var FORMAT_BUTTONS = [{
+	key: "bold",
+	flag: FORMAT_FLAGS.bold,
+	icon: Bold,
+	label: "Bold",
+	shortcut: "⌘ B"
+}, {
+	key: "italic",
+	flag: FORMAT_FLAGS.italic,
+	icon: Italic,
+	label: "Italic",
+	shortcut: "⌘ I"
+}];
+var TextFormatToolbar = () => {
+	const iframeElement = useSelector(previewStore, (state) => state.context.iframeElement);
+	const isAnySideSheetOpen = useIsPreviewSheetOpen();
+	const [hasSelection, setHasSelection] = React.useState(false);
+	const [activeFormats, setActiveFormats] = React.useState(0);
+	React.useEffect(() => {
+		const handleMessage = (event) => {
+			const data = event.data;
+			if (!isOverlayMessage(data) || data.type !== "CAMOX_TEXT_SELECTION_STATE") return;
+			setHasSelection(data.hasSelection);
+			setActiveFormats(data.activeFormats);
+		};
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, []);
+	const sendFormat = (formatKey) => {
+		iframeElement?.contentWindow?.postMessage({
+			type: "CAMOX_FORMAT_TEXT",
+			formatKey
+		}, "*");
+	};
+	return /* @__PURE__ */ jsx(FloatingToolbar, {
+		onMouseDown: (e) => e.preventDefault(),
+		className: cn("bottom-16 gap-1", hasSelection && !isAnySideSheetOpen ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2"),
+		children: /* @__PURE__ */ jsx(ButtonGroup, { children: FORMAT_BUTTONS.map(({ key, flag, icon: Icon, label, shortcut }) => {
+			const isActive = !!(activeFormats & flag);
+			return /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Toggle, {
+					"data-state": isActive ? "on" : "off",
+					pressed: isActive,
+					variant: "outline",
+					onPressedChange: () => sendFormat(key),
+					children: /* @__PURE__ */ jsx(Icon, {})
+				})
+			}), /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: [
+				label,
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: shortcut })
+			] })] }, key);
+		}) })
+	});
+};
+//#endregion
+export { TextFormatToolbar };

package/dist/features/preview/components/UnlinkAssetButton.d.ts

@@ -0,0 +1,9 @@
+import { Id } from 'camox/server/dataModel';
+interface UnlinkAssetButtonProps {
+    fileId: Id<"files"> | undefined;
+    onUnlink: () => void;
+    className?: string;
+}
+declare const UnlinkAssetButton: ({ fileId, onUnlink, className }: UnlinkAssetButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { UnlinkAssetButton };
+//# sourceMappingURL=UnlinkAssetButton.d.ts.map

package/dist/features/preview/components/UnlinkAssetButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkAssetButton.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/UnlinkAssetButton.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAOjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,iCAAiC,sBAAsB,4CA0DjF,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,55 @@
+import { api } from "camox/server/api";
+import { useMutation, useQuery } from "convex/react";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+import { Button } from "@camox/ui/button";
+import { X } from "lucide-react";
+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
+var UnlinkAssetButton = ({ fileId, onUnlink, className }) => {
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const usageCount = useQuery(api.files.getFileUsageCount, fileId ? { fileId } : "skip");
+	const deleteFile = useMutation(api.files.deleteFile);
+	const handleClick = (e) => {
+		e.stopPropagation();
+		if (!fileId || usageCount === void 0 || usageCount > 1) {
+			onUnlink();
+			return;
+		}
+		setDialogOpen(true);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: cn("text-muted-foreground hover:text-foreground shrink-0", className),
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" })] }), /* @__PURE__ */ jsx(AlertDialog, {
+		open: dialogOpen,
+		onOpenChange: setDialogOpen,
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__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?" })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogAction, {
+			onClick: () => onUnlink(),
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				className: "bg-background hover:bg-accent text-foreground",
+				children: "Unlink only"
+			})
+		}), /* @__PURE__ */ jsx(AlertDialogAction, {
+			onClick: () => {
+				onUnlink();
+				if (fileId) deleteFile({ fileId });
+			},
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, { children: "Delete file" })
+		})] })] })
+	})] });
+};
+//#endregion
+export { UnlinkAssetButton };

package/dist/features/preview/overlayConstants.d.ts

@@ -0,0 +1,19 @@
+export declare const OVERLAY_COLORS: {
+    readonly hover: "#F472B6BF";
+    readonly selected: "#F472B6";
+};
+export declare const LAYOUT_OVERLAY_COLORS: {
+    readonly hover: "#c084fcBF";
+    readonly selected: "#c084fc";
+};
+export declare const OVERLAY_WIDTHS: {
+    readonly hover: "3px";
+    readonly selected: "1px";
+};
+export declare const OVERLAY_OFFSETS: {
+    readonly fieldHover: "1px";
+    readonly fieldSelected: "2px";
+    readonly blockHover: "-1px";
+    readonly blockSelected: "0px";
+};
+//# sourceMappingURL=overlayConstants.d.ts.map

package/dist/features/preview/overlayConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayConstants.d.ts","sourceRoot":"","sources":["../../../src/features/preview/overlayConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,eAAO,MAAM,qBAAqB;;;CAGxB,CAAC;AAEX,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC"}

package/dist/features/preview/overlayConstants.js

@@ -0,0 +1,21 @@
+//#region src/features/preview/overlayConstants.ts
+var OVERLAY_COLORS = {
+	hover: "#F472B6BF",
+	selected: "#F472B6"
+};
+var LAYOUT_OVERLAY_COLORS = {
+	hover: "#c084fcBF",
+	selected: "#c084fc"
+};
+var OVERLAY_WIDTHS = {
+	hover: "3px",
+	selected: "1px"
+};
+var OVERLAY_OFFSETS = {
+	fieldHover: "1px",
+	fieldSelected: "2px",
+	blockHover: "-1px",
+	blockSelected: "0px"
+};
+//#endregion
+export { LAYOUT_OVERLAY_COLORS, OVERLAY_COLORS, OVERLAY_OFFSETS, OVERLAY_WIDTHS };

package/dist/features/preview/overlayMessages.d.ts

@@ -0,0 +1,62 @@
+export interface FieldRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export type OverlayMessage = {
+    type: "CAMOX_FOCUS_FIELD";
+    fieldId: string;
+} | {
+    type: "CAMOX_FOCUS_FIELD_END";
+    fieldId: string;
+} | {
+    type: "CAMOX_HOVER_FIELD";
+    fieldId: string;
+} | {
+    type: "CAMOX_HOVER_FIELD_END";
+    fieldId: string;
+} | {
+    type: "CAMOX_HOVER_BLOCK";
+    blockId: string;
+} | {
+    type: "CAMOX_HOVER_BLOCK_END";
+    blockId: string;
+} | {
+    type: "CAMOX_HOVER_REPEATER";
+    blockId: string;
+    fieldName: string;
+} | {
+    type: "CAMOX_HOVER_REPEATER_END";
+    blockId: string;
+    fieldName: string;
+} | {
+    type: "CAMOX_HOVER_REPEATER_ITEM";
+    blockId: string;
+    itemId: string;
+} | {
+    type: "CAMOX_HOVER_REPEATER_ITEM_END";
+    blockId: string;
+    itemId: string;
+} | {
+    type: "CAMOX_ADD_BLOCK_REQUEST";
+    blockPosition: string;
+    insertPosition: "before" | "after";
+    afterPosition?: string | null;
+} | {
+    type: "CAMOX_TEXT_SELECTION_STATE";
+    hasSelection: boolean;
+    activeFormats: number;
+} | {
+    type: "CAMOX_FORMAT_TEXT";
+    formatKey: string;
+};
+export declare function isOverlayMessage(data: unknown): data is OverlayMessage;
+export declare function postOverlayMessage(message: OverlayMessage): void;
+/**
+ * Returns the element's position relative to the document (not viewport).
+ * This allows overlays to be positioned correctly regardless of scroll position,
+ * by applying scroll offset at the container level instead of per-overlay.
+ */
+export declare function getElementRect(element: HTMLElement): FieldRect;
+//# sourceMappingURL=overlayMessages.d.ts.map

package/dist/features/preview/overlayMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayMessages.d.ts","sourceRoot":"","sources":["../../../src/features/preview/overlayMessages.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,cAAc,GAEtB;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,uBAAuB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,uBAAuB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAElD;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,uBAAuB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAElD;IAAE,IAAI,EAAE,sBAAsB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,GACpE;IAAE,IAAI,EAAE,0BAA0B,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,GAExE;IAAE,IAAI,EAAE,2BAA2B,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GACtE;IAAE,IAAI,EAAE,+BAA+B,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAE1E;IACE,IAAI,EAAE,yBAAyB,CAAC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,GAED;IAAE,IAAI,EAAE,4BAA4B,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAEpF;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,cAAc,CAQtE;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,cAAc,QAEzD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAQ9D"}