camox 0.0.0 → 0.1.2-alpha.2

package/dist/core/createBlock.js

@@ -0,0 +1,873 @@
+import { LAYOUT_OVERLAY_COLORS, OVERLAY_COLORS, OVERLAY_OFFSETS, OVERLAY_WIDTHS } from "../features/preview/overlayConstants.js";
+import { postOverlayMessage } from "../features/preview/overlayMessages.js";
+import { previewStore } from "../features/preview/previewStore.js";
+import { AddBlockControlBar } from "./components/AddBlockControlBar.js";
+import { InlineLexicalEditor } from "./components/lexical/InlineLexicalEditor.js";
+import { useFieldSelection } from "./hooks/useFieldSelection.js";
+import { useIsEditable } from "./hooks/useIsEditable.js";
+import { useOverlayMessage } from "./hooks/useOverlayMessage.js";
+import { Type } from "./lib/contentType.js";
+import { lexicalStateToReactNodes } from "./lib/lexicalReact.js";
+import { useFrame } from "@camox/ui/frame";
+import { Input } from "@camox/ui/input";
+import { Kbd } from "@camox/ui/kbd";
+import { Label } from "@camox/ui/label";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { toast } from "@camox/ui/toaster";
+import { Slot } from "@radix-ui/react-slot";
+import { Type as Type$1 } from "@sinclair/typebox";
+import { useSelector } from "@xstate/store/react";
+import { api } from "camox/server/api";
+import { useMutation, useQuery } from "convex/react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useIsPreviewSheetOpen } from "@/features/preview/components/PreviewSideSheet.tsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/createBlock.tsx
+/** Normalize legacy links (no `type` field) to the new union shape */
+var normalizeLinkValue = (value) => {
+	if (!value.type) return {
+		type: "external",
+		...value
+	};
+	return value;
+};
+/** Resolve a LinkValue to an href string */
+var resolveLinkHref = (link, pages) => {
+	if (link.type === "page") return (pages?.find((p) => p._id === link.pageId))?.fullPath ?? "#";
+	return link.href;
+};
+var hasShownEmbedLockToast = false;
+function createBlock(options) {
+	const typeboxSchema = Type$1.Object(options.content);
+	const contentSchema = {
+		type: "object",
+		title: options.title,
+		description: options.description,
+		properties: typeboxSchema.properties,
+		required: Object.keys(options.content),
+		toMarkdown: options.toMarkdown
+	};
+	const settingsTypeboxSchema = options.settings ? Type$1.Object(options.settings) : null;
+	const settingsSchema = settingsTypeboxSchema ? {
+		type: "object",
+		properties: settingsTypeboxSchema.properties,
+		required: Object.keys(options.settings)
+	} : void 0;
+	const contentDefaults = {};
+	const contentDefaultsForStorage = {};
+	for (const [key, prop] of Object.entries(typeboxSchema.properties)) if ("default" in prop) {
+		contentDefaults[key] = prop.default;
+		const ft = prop.fieldType;
+		const ait = prop.arrayItemType;
+		if (ft === "Image" || ft === "File" || ait === "Image" || ait === "File") continue;
+		contentDefaultsForStorage[key] = prop.default;
+	}
+	const repeatableItemDefaults = {};
+	for (const [key, prop] of Object.entries(typeboxSchema.properties)) {
+		const p = prop;
+		if (p.type === "array" && p.items?.properties) {
+			const itemDefaults = {};
+			for (const [itemKey, itemProp] of Object.entries(p.items.properties)) if (itemProp && typeof itemProp === "object" && "default" in itemProp) itemDefaults[itemKey] = itemProp.default;
+			if (Object.keys(itemDefaults).length > 0) repeatableItemDefaults[key] = itemDefaults;
+		}
+	}
+	const settingsDefaults = {};
+	if (settingsTypeboxSchema) {
+		for (const [key, prop] of Object.entries(settingsTypeboxSchema.properties)) if ("default" in prop) settingsDefaults[key] = prop.default;
+	}
+	const Context = React.createContext(null);
+	const RepeaterItemContext = React.createContext(null);
+	const RepeaterHoverContext = React.createContext(false);
+	/**
+	* Build a field ID that matches the sidebar's `getFieldId` format.
+	* Root fields:          blockId__fieldName
+	* Repeater item fields: blockId__itemId__fieldName
+	* Nested item fields:   blockId__parentItemId:nestedFieldName:index__fieldName
+	*/
+	const getOverlayFieldId = (blockId, repeaterContext, fieldName) => {
+		if (repeaterContext?.itemId) return `${blockId}__${repeaterContext.itemId}__${fieldName}`;
+		if (repeaterContext?.nested) {
+			const { parentItemId, nestedFieldName, nestedIndex } = repeaterContext.nested;
+			return `${blockId}__${parentItemId}:${nestedFieldName}:${nestedIndex}__${fieldName}`;
+		}
+		return `${blockId}__${fieldName}`;
+	};
+	const Field = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("Field must be used within a Block Component");
+		const { blockId, content, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+		const elementRef = React.useRef(null);
+		const { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const [isHovered, setIsHovered] = React.useState(false);
+		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
+		const isSelectedFromBreadcrumbs = useFieldSelection(blockId, String(name), "String", repeaterContext?.itemId);
+		const isFocused = isEditorFocused || isSelectedFromBreadcrumbs;
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const updateBlockContent = useMutation(api.blocks.updateBlockContent);
+		const updateRepeatableItemContent = useMutation(api.repeatableItems.updateRepeatableItemContent);
+		const handleChange = React.useCallback((newValue) => {
+			if (repeaterContext) {
+				const { itemId } = repeaterContext;
+				if (itemId) updateRepeatableItemContent({
+					itemId,
+					content: { [name]: newValue }
+				});
+			} else updateBlockContent({
+				blockId,
+				content: { [name]: newValue }
+			});
+		}, [
+			blockId,
+			name,
+			repeaterContext,
+			updateRepeatableItemContent,
+			updateBlockContent
+		]);
+		const handleFocus = React.useCallback(() => {
+			setIsEditorFocused(true);
+			if (repeaterContext && repeaterContext.itemId) previewStore.send({
+				type: "setSelectedRepeatableItem",
+				blockId,
+				itemId: repeaterContext.itemId,
+				fieldName: repeaterContext.arrayFieldName
+			});
+			else previewStore.send({
+				type: "setSelectedField",
+				blockId,
+				fieldName: name.toString(),
+				fieldType: "String"
+			});
+		}, [
+			blockId,
+			name,
+			repeaterContext?.itemId
+		]);
+		const handleBlur = React.useCallback(() => {
+			setIsEditorFocused(false);
+		}, []);
+		const handleMouseEnter = () => {
+			if (isContentEditable) setIsHovered(true);
+		};
+		const handleMouseLeave = () => {
+			if (isContentEditable) setIsHovered(false);
+		};
+		const activateRef = React.useRef(null);
+		const handleSlotClick = React.useCallback(() => {
+			activateRef.current?.();
+		}, []);
+		const overlayStyle = isContentEditable && (isHovered || isFocused) ? {
+			outline: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
+			outlineOffset: isFocused ? OVERLAY_OFFSETS.fieldSelected : OVERLAY_OFFSETS.fieldHover
+		} : void 0;
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(lexicalStateToReactNodes(fieldValue)) });
+		return /* @__PURE__ */ jsx(Slot, {
+			ref: elementRef,
+			"data-camox-field-id": fieldId,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			onClick: handleSlotClick,
+			style: overlayStyle,
+			children: children(/* @__PURE__ */ jsx(InlineLexicalEditor, {
+				initialState: fieldValue,
+				externalState: fieldValue,
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				activateRef
+			}))
+		});
+	};
+	const Embed = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("Embed must be used within a Block Component");
+		const { blockId, content, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+		const { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		const [isOpen, setIsOpen] = React.useState(false);
+		const [urlValue, setUrlValue] = React.useState(fieldValue);
+		const [isHovered, setIsHovered] = React.useState(false);
+		const timerRef = React.useRef(null);
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const updateBlockContent = useMutation(api.blocks.updateBlockContent);
+		const updateRepeatableItemContent = useMutation(api.repeatableItems.updateRepeatableItemContent);
+		React.useEffect(() => {
+			if (!isOpen) setUrlValue(fieldValue);
+		}, [fieldValue, isOpen]);
+		React.useEffect(() => {
+			return () => {
+				if (timerRef.current) clearTimeout(timerRef.current);
+			};
+		}, []);
+		const handleUrlChange = (e) => {
+			const newValue = e.target.value;
+			setUrlValue(newValue);
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				if (repeaterContext?.nested) {
+					const { parentItemId, parentContent, nestedFieldName, nestedIndex } = repeaterContext.nested;
+					const nestedArray = [...parentContent[nestedFieldName] || []];
+					nestedArray[nestedIndex] = {
+						...nestedArray[nestedIndex],
+						[name]: newValue
+					};
+					updateRepeatableItemContent({
+						itemId: parentItemId,
+						content: { [nestedFieldName]: nestedArray }
+					});
+				} else if (repeaterContext?.itemId) updateRepeatableItemContent({
+					itemId: repeaterContext.itemId,
+					content: { [name]: newValue }
+				});
+				else updateBlockContent({
+					blockId,
+					content: { [name]: newValue }
+				});
+			}, 500);
+		};
+		const handleOpenChange = (open) => {
+			setIsOpen(open);
+			if (open) if (repeaterContext?.nested) previewStore.send({
+				type: "setSelectedRepeatableItem",
+				blockId,
+				itemId: repeaterContext.nested.parentItemId,
+				fieldName: repeaterContext.nested.parentArrayFieldName
+			});
+			else if (repeaterContext?.itemId) previewStore.send({
+				type: "setSelectedRepeatableItem",
+				blockId,
+				itemId: repeaterContext.itemId,
+				fieldName: repeaterContext.arrayFieldName
+			});
+			else previewStore.send({
+				type: "setSelectedField",
+				blockId,
+				fieldName: name.toString(),
+				fieldType: "Embed"
+			});
+		};
+		return /* @__PURE__ */ jsxs(Popover, {
+			open: isContentEditable ? isOpen : false,
+			onOpenChange: isContentEditable ? handleOpenChange : void 0,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					style: { position: "relative" },
+					onMouseEnter: isContentEditable ? () => setIsHovered(true) : void 0,
+					onMouseLeave: isContentEditable ? () => setIsHovered(false) : void 0,
+					children: [children(fieldValue), isContentEditable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							inset: 0,
+							zIndex: 10
+						},
+						onClick: () => {
+							if (hasShownEmbedLockToast) return;
+							hasShownEmbedLockToast = true;
+							toast(/* @__PURE__ */ jsxs("span", { children: [
+								"Hold ",
+								/* @__PURE__ */ jsx(Kbd, { children: "L" }),
+								" to interact with the embed content"
+							] }));
+						}
+					}), (isHovered || isOpen) && /* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						inset: isOpen ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
+						border: `${isOpen ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isOpen ? colors.selected : colors.hover}`,
+						pointerEvents: "none",
+						zIndex: 11
+					} })] })]
+				})
+			}), isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-96 gap-2",
+				children: /* @__PURE__ */ jsxs("form", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: "url",
+						children: options.content[name]?.title ?? String(name)
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "url",
+						id: "url",
+						value: urlValue,
+						onChange: handleUrlChange
+					})]
+				})
+			})]
+		});
+	};
+	const Link = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("Link must be used within a Block Component");
+		const { blockId, content, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+		const elementRef = React.useRef(null);
+		const { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldValue = normalizeLinkValue(repeaterContext ? repeaterContext.itemContent[name] : content[name]);
+		const resolvedHref = resolveLinkHref(fieldValue, useQuery(api.pages.listPages));
+		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		const [isEditing, setIsEditing] = React.useState(false);
+		const [displayText, setDisplayText] = React.useState(fieldValue.text);
+		const [isHovered, setIsHovered] = React.useState(false);
+		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
+		const isSelectedFromBreadcrumbs = useFieldSelection(blockId, String(name), "Link", repeaterContext?.itemId);
+		const isFocused = isEditorFocused || isSelectedFromBreadcrumbs;
+		React.useEffect(() => {
+			if (!isEditing) setDisplayText(fieldValue.text);
+		}, [fieldValue.text, isEditing]);
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const updateBlockContent = useMutation(api.blocks.updateBlockContent);
+		const updateRepeatableItemContent = useMutation(api.repeatableItems.updateRepeatableItemContent);
+		const saveLinkValue = (newLinkValue) => {
+			if (repeaterContext?.nested) {
+				const { parentItemId, parentContent, nestedFieldName, nestedIndex } = repeaterContext.nested;
+				const nestedArray = [...parentContent[nestedFieldName] || []];
+				nestedArray[nestedIndex] = {
+					...nestedArray[nestedIndex],
+					[name]: newLinkValue
+				};
+				updateRepeatableItemContent({
+					itemId: parentItemId,
+					content: { [nestedFieldName]: nestedArray }
+				});
+			} else if (repeaterContext?.itemId) updateRepeatableItemContent({
+				itemId: repeaterContext.itemId,
+				content: { [name]: newLinkValue }
+			});
+			else updateBlockContent({
+				blockId,
+				content: { [name]: newLinkValue }
+			});
+		};
+		const handleInput = (e) => {
+			const newText = e.target.textContent || "";
+			saveLinkValue({
+				...fieldValue,
+				text: newText
+			});
+		};
+		const buildLinkBreadcrumbs = () => {
+			const crumbs = [{
+				type: "Block",
+				id: blockId
+			}];
+			if (repeaterContext?.nested) {
+				crumbs.push({
+					type: "RepeatableObject",
+					id: repeaterContext.nested.parentItemId,
+					fieldName: repeaterContext.nested.parentArrayFieldName
+				});
+				crumbs.push({
+					type: "RepeatableObject",
+					id: `idx:${repeaterContext.nested.nestedIndex}`,
+					fieldName: repeaterContext.nested.nestedFieldName
+				});
+			} else if (repeaterContext?.itemId) crumbs.push({
+				type: "RepeatableObject",
+				id: repeaterContext.itemId,
+				fieldName: repeaterContext.arrayFieldName
+			});
+			crumbs.push({
+				type: "Link",
+				id: String(name),
+				fieldName: String(name)
+			});
+			return crumbs;
+		};
+		const handleFocus = () => {
+			setIsEditing(true);
+			setIsEditorFocused(true);
+			previewStore.send({
+				type: "setSelectionBreadcrumbs",
+				breadcrumbs: buildLinkBreadcrumbs()
+			});
+		};
+		const handleBlur = () => {
+			setIsEditing(false);
+			setIsEditorFocused(false);
+		};
+		const handleEditLink = (e) => {
+			e.stopPropagation();
+			previewStore.send({ type: "toggleContentSheet" });
+			setIsEditorFocused(false);
+			setIsEditing(false);
+		};
+		return /* @__PURE__ */ jsxs(Popover, {
+			open: isContentEditable && isEditorFocused,
+			children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Slot, {
+					ref: elementRef,
+					"data-camox-field-id": isContentEditable ? fieldId : void 0,
+					contentEditable: isContentEditable,
+					onClick: isContentEditable ? (e) => e.preventDefault() : void 0,
+					onInput: handleInput,
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					onMouseEnter: isContentEditable ? () => setIsHovered(true) : void 0,
+					onMouseLeave: isContentEditable ? () => setIsHovered(false) : void 0,
+					onKeyDown: (e) => {
+						if (e.key === "Escape") e.target.blur();
+					},
+					spellCheck: false,
+					suppressContentEditableWarning: true,
+					style: isContentEditable && (isHovered || isFocused) ? {
+						outline: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
+						outlineOffset: isFocused ? OVERLAY_OFFSETS.fieldSelected : OVERLAY_OFFSETS.fieldHover
+					} : void 0,
+					children: children({
+						text: displayText,
+						href: resolvedHref,
+						newTab: fieldValue.newTab
+					})
+				})
+			}), isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-2",
+				onOpenAutoFocus: (e) => e.preventDefault(),
+				align: "end",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "hover:bg-accent flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: handleEditLink,
+					children: "Edit link"
+				})
+			})]
+		});
+	};
+	const Image = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("Image must be used within a Block Component");
+		const { blockId, content, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+		const { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		const [isHovered, setIsHovered] = React.useState(false);
+		const isFocused = useFieldSelection(blockId, String(name), "Image", repeaterContext?.itemId);
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const buildImageBreadcrumbs = () => {
+			const crumbs = [{
+				type: "Block",
+				id: blockId
+			}];
+			if (repeaterContext?.nested) {
+				crumbs.push({
+					type: "RepeatableObject",
+					id: repeaterContext.nested.parentItemId,
+					fieldName: repeaterContext.nested.parentArrayFieldName
+				});
+				crumbs.push({
+					type: "RepeatableObject",
+					id: `idx:${repeaterContext.nested.nestedIndex}`,
+					fieldName: repeaterContext.nested.nestedFieldName
+				});
+			} else if (repeaterContext?.itemId) crumbs.push({
+				type: "RepeatableObject",
+				id: repeaterContext.itemId,
+				fieldName: repeaterContext.arrayFieldName
+			});
+			crumbs.push({
+				type: "Image",
+				id: String(name),
+				fieldName: String(name)
+			});
+			return crumbs;
+		};
+		const handleClick = () => {
+			if (!isContentEditable) return;
+			previewStore.send({
+				type: "setSelectionBreadcrumbs",
+				breadcrumbs: buildImageBreadcrumbs()
+			});
+			previewStore.send({ type: "toggleContentSheet" });
+		};
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(fieldValue) });
+		const showOverlay = isHovered || isFocused;
+		return /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			"data-camox-field-id": fieldId,
+			onMouseEnter: () => setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			onClick: handleClick,
+			children: [children(fieldValue), showOverlay && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: isFocused ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
+				border: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
+				pointerEvents: "none",
+				zIndex: 10
+			} })]
+		});
+	};
+	const File = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("File must be used within a Block Component");
+		const { content } = blockContext;
+		const repeaterContext = React.use(RepeaterItemContext);
+		return /* @__PURE__ */ jsx(Fragment, { children: children(repeaterContext ? repeaterContext.itemContent[name] : content[name]) });
+	};
+	const RepeaterItemWrapper = ({ itemId, blockId, mode, children }) => {
+		const isContentEditable = useIsEditable(mode);
+		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+		const { window: iframeWindow } = useFrame();
+		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
+		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", {
+			blockId,
+			itemId
+		});
+		const showOverlay = isContentEditable && (isHovered || isRepeaterHovered);
+		return /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			"data-camox-repeater-item-id": isContentEditable ? itemId : void 0,
+			children: [children, showOverlay && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: OVERLAY_OFFSETS.blockHover,
+				border: `${OVERLAY_WIDTHS.hover} solid ${colors.hover}`,
+				pointerEvents: "none",
+				zIndex: 10
+			} })]
+		});
+	};
+	const RepeaterHoverProvider = ({ blockId, fieldName, children }) => {
+		const isContentEditable = useIsEditable("site");
+		const { window: iframeWindow } = useFrame();
+		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER", "CAMOX_HOVER_REPEATER_END", {
+			blockId,
+			fieldName
+		});
+		return /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
+			value: isHovered,
+			children
+		});
+	};
+	const Repeater = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("Repeater must be used within a Block Component");
+		const { blockId, content, mode } = blockContext;
+		const parentRepeaterContext = React.use(RepeaterItemContext);
+		const fieldName = String(name);
+		const itemComponents = {
+			Field,
+			Link,
+			Embed,
+			Image,
+			File,
+			Repeater
+		};
+		if (parentRepeaterContext) {
+			const nestedArray = parentRepeaterContext.itemContent[name] ?? [];
+			if (!Array.isArray(nestedArray)) throw new Error(`Field "${String(name)}" is not an array`);
+			const parentItemId = parentRepeaterContext.itemId;
+			return /* @__PURE__ */ jsx(RepeaterHoverProvider, {
+				blockId,
+				fieldName,
+				children: nestedArray.map((item, index) => {
+					const nestedItemId = `nested:${parentItemId}:${fieldName}:${index}`;
+					return /* @__PURE__ */ jsx(RepeaterItemContext.Provider, {
+						value: {
+							arrayFieldName: fieldName,
+							itemIndex: index,
+							itemContent: {
+								...repeatableItemDefaults[fieldName],
+								...item
+							},
+							nested: {
+								parentItemId,
+								parentContent: parentRepeaterContext.itemContent,
+								parentArrayFieldName: parentRepeaterContext.arrayFieldName,
+								nestedFieldName: fieldName,
+								nestedIndex: index
+							}
+						},
+						children: /* @__PURE__ */ jsx(RepeaterItemWrapper, {
+							itemId: nestedItemId,
+							blockId,
+							mode,
+							children: children(itemComponents, index)
+						})
+					}, index);
+				})
+			});
+		}
+		const arrayValue = content[name] ?? [];
+		if (!Array.isArray(arrayValue)) throw new Error(`Field "${String(name)}" is not an array`);
+		return /* @__PURE__ */ jsx(RepeaterHoverProvider, {
+			blockId,
+			fieldName,
+			children: arrayValue.map((item, index) => {
+				const itemContent = {
+					...repeatableItemDefaults[fieldName],
+					...item.content
+				};
+				const itemId = item._id;
+				return /* @__PURE__ */ jsx(RepeaterItemContext.Provider, {
+					value: {
+						arrayFieldName: fieldName,
+						itemIndex: index,
+						itemContent,
+						itemId
+					},
+					children: /* @__PURE__ */ jsx(RepeaterItemWrapper, {
+						itemId,
+						blockId,
+						mode,
+						children: children(itemComponents, index)
+					})
+				}, itemId || index);
+			})
+		});
+	};
+	const BlockComponent = ({ blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition }) => {
+		const isContentEditable = useIsEditable(mode);
+		const { window: iframeWindow } = useFrame();
+		const [isHovered, setIsHovered] = React.useState(false);
+		const selectionBreadcrumbs = useSelector(previewStore, (state) => state.context.selectionBreadcrumbs);
+		const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
+		const isAddBlockSheetOpen = useSelector(previewStore, (state) => state.context.isAddBlockSheetOpen);
+		const isAnySideSheetOpen = useIsPreviewSheetOpen();
+		const isBlockSelected = (selectionBreadcrumbs[0]?.id ?? null) === blockData._id;
+		const ref = React.useRef(null);
+		const [isFirstRender, setIsFirstRender] = React.useState(true);
+		React.useEffect(() => {
+			if (isFirstRender) setIsFirstRender(false);
+		}, [isFirstRender]);
+		React.useEffect(() => {
+			if (isBlockSelected && ref.current) ref.current.scrollIntoView({
+				behavior: isFirstRender ? "instant" : "smooth",
+				block: isFirstRender ? "start" : "nearest"
+			});
+		}, [
+			isBlockSelected,
+			isFirstRender,
+			isPageContentSheetOpen
+		]);
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", { blockId: blockData._id });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const normalizedContent = React.useMemo(() => {
+			const result = { ...blockData.content };
+			for (const key in result) {
+				const value = result[key];
+				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map((item) => item.content);
+			}
+			return result;
+		}, [blockData.content]);
+		const handleClick = (e) => {
+			if (!isContentEditable) return;
+			if (e.target.closest("[data-camox-field-id]")) return;
+			previewStore.send({
+				type: "setFocusedBlock",
+				blockId: blockData._id
+			});
+		};
+		const handleMouseEnter = () => {
+			if (isContentEditable) setIsHovered(true);
+		};
+		const handleMouseLeave = () => {
+			if (isContentEditable) setIsHovered(false);
+		};
+		const handleAddBlockClick = (insertPosition) => {
+			postOverlayMessage({
+				type: "CAMOX_ADD_BLOCK_REQUEST",
+				blockPosition: blockData.position,
+				insertPosition,
+				...addBlockAfterPosition !== void 0 && { afterPosition: addBlockAfterPosition }
+			});
+		};
+		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSheetOpen;
+		const shouldShowSheetOverlay = isAddBlockSheetOpen && mode !== "peek" || isPageContentSheetOpen && !isBlockSelected;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "group visual-editing-block",
+			ref,
+			style: {
+				position: "relative",
+				scrollMargin: "5rem",
+				background: "var(--background)"
+			},
+			"data-camox-block-id": isContentEditable ? blockData._id : void 0,
+			onClick: handleClick,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			children: [
+				/* @__PURE__ */ jsx(Context.Provider, {
+					value: {
+						blockId: blockData._id,
+						content: (() => {
+							const merged = {
+								...contentDefaults,
+								...blockData.content
+							};
+							const overrides = {};
+							for (const key in merged) {
+								const val = merged[key];
+								if (val && typeof val === "object" && "url" in val && !val.url && contentDefaults[key]) overrides[key] = contentDefaults[key];
+							}
+							return {
+								...merged,
+								...overrides
+							};
+						})(),
+						settings: {
+							...settingsDefaults,
+							...blockData.settings
+						},
+						mode,
+						isHovered,
+						setIsHovered
+					},
+					children: /* @__PURE__ */ jsx(options.component, { content: normalizedContent })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						width: "100%",
+						height: "100%",
+						top: 0,
+						left: 0,
+						background: "#000",
+						opacity: shouldShowSheetOverlay ? .6 : 0,
+						transition: "opacity 0.3s ease-in-out",
+						pointerEvents: "none",
+						zIndex: 20
+					},
+					id: "hello"
+				}),
+				shouldShowOverlay && (() => {
+					const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						inset: isBlockSelected ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
+						border: `${isBlockSelected ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isBlockSelected ? colors.selected : colors.hover}`,
+						pointerEvents: "none",
+						zIndex: 10
+					} }), /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
+						position: "top",
+						hidden: isAnySideSheetOpen,
+						onMouseLeave: () => setIsHovered(false),
+						onClick: () => handleAddBlockClick("before")
+					}), (showAddBlockBottom ?? mode !== "layout") && /* @__PURE__ */ jsx(AddBlockControlBar, {
+						position: "bottom",
+						hidden: isAnySideSheetOpen,
+						onMouseLeave: () => setIsHovered(false),
+						onClick: () => handleAddBlockClick("after")
+					})] })] });
+				})()
+			]
+		});
+	};
+	const useSetting = (name) => {
+		const ctx = React.use(Context);
+		if (!ctx) throw new Error("useSetting must be used within a Block Component");
+		return ctx.settings[name];
+	};
+	/**
+	* Wraps block content that renders outside the block's visual bounds (fixed navbars, modals, portals, etc.).
+	* Provides the same hover, selection, and sheet overlays as the main BlockComponent.
+	*/
+	const Detached = ({ children }) => {
+		const ctx = React.use(Context);
+		if (!ctx) throw new Error("Detached must be used within a Block Component");
+		const { blockId, mode, isHovered, setIsHovered } = ctx;
+		const isContentEditable = useIsEditable(mode);
+		const { window: iframeWindow } = useFrame();
+		const selectionBreadcrumbs = useSelector(previewStore, (state) => state.context.selectionBreadcrumbs);
+		const isAddBlockSheetOpen = useSelector(previewStore, (state) => state.context.isAddBlockSheetOpen);
+		const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
+		const isBlockSelected = (selectionBreadcrumbs[0]?.id ?? null) === blockId;
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", { blockId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar, setIsHovered]);
+		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSheetOpen;
+		const shouldShowSheetOverlay = isAddBlockSheetOpen && mode !== "peek" || isPageContentSheetOpen && !isBlockSelected;
+		const handleClick = (e) => {
+			if (!isContentEditable) return;
+			e.stopPropagation();
+			previewStore.send({
+				type: "setFocusedBlock",
+				blockId
+			});
+		};
+		const handleMouseEnter = () => {
+			if (isContentEditable) setIsHovered(true);
+		};
+		const handleMouseLeave = () => {
+			if (isContentEditable) setIsHovered(false);
+		};
+		const [container, setContainer] = React.useState(null);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slot, {
+			ref: setContainer,
+			onClick: handleClick,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			children
+		}), container && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 0,
+			background: "#000",
+			opacity: shouldShowSheetOverlay ? .6 : 0,
+			transition: "opacity 0.3s ease-in-out",
+			pointerEvents: "none",
+			zIndex: 20
+		} }), shouldShowOverlay && (() => {
+			const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
+			return /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: isBlockSelected ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
+				border: `${isBlockSelected ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isBlockSelected ? colors.selected : colors.hover}`,
+				pointerEvents: "none",
+				zIndex: 10
+			} });
+		})()] }), container)] });
+	};
+	return {
+		Component: BlockComponent,
+		Detached,
+		Field,
+		Embed,
+		Link,
+		Image,
+		File,
+		Repeater,
+		useSetting,
+		id: options.id,
+		title: options.title,
+		description: options.description,
+		contentSchema,
+		settingsSchema,
+		getInitialContent: () => {
+			return { ...contentDefaultsForStorage };
+		},
+		getInitialSettings: () => {
+			return { ...settingsDefaults };
+		},
+		layoutOnly: options.layoutOnly ?? false
+	};
+}
+//#endregion
+export { Type, createBlock };