camox 0.33.1 → 0.35.0

package/dist/core/editing/createEditableBlock.js

@@ -0,0 +1,1751 @@
+import { useLocation } from "../../features/navigation/navigation.js";
+import { useProjectSlug } from "../../lib/auth.js";
+import { isFileMarker, isItemMarker, resolveFileMarker, useNormalizedData } from "../../lib/normalized-data.js";
+import { Type as Type$1, resolveToMarkdown } from "../lib/contentType.js";
+import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
+import { markdownToReactNodes } from "../lib/lexicalReact.js";
+import { blockMutations, pageQueries, projectQueries, repeatableItemMutations } from "../../lib/queries.js";
+import { trackClientEvent } from "../../lib/telemetry-client.js";
+import { previewStore } from "../../features/preview/previewStore.js";
+import { postOverlayMessage } from "../../features/preview/overlayMessages.js";
+import { useFrame } from "../../features/preview/components/Frame.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 { c } from "react/compiler-runtime";
+import { Type } from "@sinclair/typebox";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { generateKeyBetween } from "fractional-indexing";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Label } from "@camox/ui/label";
+import { Input } from "@camox/ui/input";
+import { createPortal } from "react-dom";
+
+//#region src/core/editing/createEditableBlock.tsx
+/** Normalize legacy links (no `type` field) to the new union shape */
+const normalizeLinkValue = (value) => {
+	if (!value.type) return {
+		type: "external",
+		...value
+	};
+	return value;
+};
+/**
+* Resolve a LinkValue to an href string.
+*
+* Hash-only and empty hrefs are anchored to `currentPathname` so TanStack Router's
+* `<Link to>` builds the same `href` on SSR and client — bare `"#"` otherwise
+* resolves inconsistently across environments, causing hydration mismatches.
+*/
+const resolveLinkHref = (link, pages, currentPathname) => {
+	if (link.type === "page") return (pages?.find((p) => String(p.id) === link.pageId))?.fullPath ?? currentPathname;
+	if (!link.href || link.href.startsWith("#")) return `${currentPathname}${link.href ?? ""}`;
+	return link.href;
+};
+/**
+* Recursively walks schema properties to generate RepeatableItemSeed objects.
+* Sets `_itemId` placeholder markers on `content` for each repeatable field,
+* and pushes seed objects into `allSeeds`.
+*/
+function buildInitialSeeds(properties, parentTempId, content, allSeeds, counter) {
+	for (const [fieldName, fieldSchema] of Object.entries(properties)) {
+		if (fieldSchema.type !== "array" || !fieldSchema.items?.properties) continue;
+		const ft = fieldSchema.fieldType;
+		if (ft === "ImageList" || ft === "FileList") continue;
+		const defaultCount = fieldSchema.defaultItems ?? fieldSchema.minItems ?? 0;
+		if (defaultCount <= 0) continue;
+		const itemProperties = fieldSchema.items.properties;
+		const itemContent = {};
+		for (const [propName, propSchema] of Object.entries(itemProperties)) {
+			if (propSchema.type === "array" && propSchema.items?.properties) continue;
+			if ("default" in propSchema) itemContent[propName] = propSchema.default;
+		}
+		const itemSettingsDefaults = fieldSchema.defaultItemSettings;
+		const markers = [];
+		let prevPosition = null;
+		for (let i = 0; i < defaultCount; i++) {
+			const tempId = `seed_${++counter.value}`;
+			const position = generateKeyBetween(prevPosition, null);
+			prevPosition = position;
+			allSeeds.push({
+				tempId,
+				parentTempId,
+				fieldName,
+				content: { ...itemContent },
+				settings: itemSettingsDefaults ? { ...itemSettingsDefaults } : void 0,
+				position
+			});
+			markers.push({ _itemId: tempId });
+			buildInitialSeeds(itemProperties, tempId, {}, allSeeds, counter);
+		}
+		content[fieldName] = markers;
+	}
+}
+/**
+* Recursively walks schema properties to generate fake repeatable items for peek mode.
+* Sets `_itemId` markers on `content` for each repeatable field,
+* and pushes the corresponding fake items into `allItems`.
+*/
+function buildPeekItems(properties, blockId, parentItemId, content, allItems, counter) {
+	for (const [fieldName, fieldSchema] of Object.entries(properties)) {
+		if (fieldSchema.type !== "array" || !fieldSchema.items?.properties) continue;
+		if (fieldSchema.fieldType === "ImageList" || fieldSchema.fieldType === "FileList") continue;
+		const defaultCount = fieldSchema.defaultItems ?? fieldSchema.minItems ?? 0;
+		if (defaultCount <= 0) continue;
+		const itemProperties = fieldSchema.items.properties;
+		const itemContent = {};
+		for (const [propName, propSchema] of Object.entries(itemProperties)) {
+			if (propSchema.type === "array" && propSchema.items?.properties) continue;
+			if ("default" in propSchema) itemContent[propName] = propSchema.default;
+		}
+		const itemSettingsDefaults = fieldSchema.defaultItemSettings;
+		const markers = [];
+		let prevPosition = null;
+		for (let i = 0; i < defaultCount; i++) {
+			const itemId = --counter.value;
+			const position = generateKeyBetween(prevPosition, null);
+			prevPosition = position;
+			allItems.push({
+				id: itemId,
+				blockId,
+				parentItemId,
+				fieldName,
+				content: { ...itemContent },
+				settings: itemSettingsDefaults ? { ...itemSettingsDefaults } : null,
+				summary: "",
+				position,
+				createdAt: 0,
+				updatedAt: 0
+			});
+			markers.push({ _itemId: itemId });
+			const nestedContent = {};
+			buildPeekItems(itemProperties, blockId, itemId, nestedContent, allItems, counter);
+			const item = allItems.find((it) => it.id === itemId);
+			item.content = {
+				...item.content,
+				...nestedContent
+			};
+		}
+		content[fieldName] = markers;
+	}
+}
+function createEditableBlock(options) {
+	const typeboxSchema = Type.Object(options.content);
+	const contentSchema = {
+		type: "object",
+		title: options.title,
+		description: options.description,
+		properties: typeboxSchema.properties,
+		required: Object.keys(options.content),
+		toMarkdown: resolveToMarkdown(options.toMarkdown, options.settings, "block")
+	};
+	const settingsTypeboxSchema = options.settings ? Type.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;
+		if (ft === "Image" || ft === "File" || ft === "ImageList" || ft === "FileList" || ft === "Repeater") continue;
+		contentDefaultsForStorage[key] = prop.default;
+	}
+	const repeatableItemDefaults = {};
+	const repeatableItemSettingsDefaults = {};
+	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;
+			if (p.defaultItemSettings && typeof p.defaultItemSettings === "object") repeatableItemSettingsDefaults[key] = p.defaultItemSettings;
+		}
+	}
+	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
+	*/
+	const getOverlayFieldId = (blockId, repeaterContext, fieldName) => {
+		if (repeaterContext?.itemId != null) return `${blockId}__${repeaterContext.itemId}__${fieldName}`;
+		return `${blockId}__${fieldName}`;
+	};
+	const Field = ({ name, components, 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 elementRef = React.useRef(null);
+		const { window: iframeWindow } = useFrame();
+		const projectSlug = useProjectSlug();
+		const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
+		const { data: pages } = useQuery({
+			...pageQueries.list(project?.id ?? 0),
+			enabled: !!project
+		});
+		const currentPathname = useLocation({ select: (l) => l.pathname });
+		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 isSelectedFromSelection = useFieldSelection(blockId, String(name), "String", repeaterContext?.itemId);
+		const isFocused = isEditorFocused || isSelectedFromSelection;
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		React.useEffect(() => {
+			setIsHovered(isHoveredFromSidebar);
+		}, [isHoveredFromSidebar]);
+		const updateBlockContent = useMutation(blockMutations.updateContent());
+		const updateRepeatableContent = useMutation(repeatableItemMutations.updateContent());
+		const handleChange = React.useCallback((newValue) => {
+			if (repeaterContext) {
+				const { itemId } = repeaterContext;
+				if (itemId != null) updateRepeatableContent.mutate({
+					id: itemId,
+					content: { [name]: newValue }
+				});
+			} else updateBlockContent.mutate({
+				id: blockId,
+				content: { [name]: newValue }
+			});
+		}, [
+			blockId,
+			name,
+			repeaterContext,
+			updateBlockContent,
+			updateRepeatableContent
+		]);
+		const handleFocus = React.useCallback(() => {
+			setIsEditorFocused(true);
+			if (repeaterContext?.itemId != null) previewStore.send({
+				type: "selectItemField",
+				blockId,
+				itemId: repeaterContext.itemId,
+				fieldName: name.toString(),
+				fieldType: "String"
+			});
+			else previewStore.send({
+				type: "selectBlockField",
+				blockId,
+				fieldName: name.toString(),
+				fieldType: "String"
+			});
+		}, [
+			blockId,
+			name,
+			repeaterContext?.itemId
+		]);
+		const handleBlur = React.useCallback((wasEdited) => {
+			setIsEditorFocused(false);
+			if (wasEdited) trackClientEvent("block_edited", {
+				via: "inline-lexical",
+				blockType: options.id,
+				field: String(name)
+			});
+		}, [name]);
+		const handleMouseEnter = () => {
+			if (isContentEditable) setIsHovered(true);
+		};
+		const handleMouseLeave = () => {
+			if (isContentEditable) setIsHovered(false);
+		};
+		const fieldData = { text: fieldValue };
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: markdownToReactNodes(fieldValue, {
+			pages,
+			fallbackHref: currentPathname,
+			components
+		}) }, fieldData) });
+		return /* @__PURE__ */ jsx(Fragment, { children: children({
+			ref: elementRef,
+			"data-camox-field-id": fieldId,
+			"data-camox-hovered": isHovered || void 0,
+			"data-camox-focused": isFocused || void 0,
+			"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			children: /* @__PURE__ */ jsx(InlineLexicalEditor, {
+				initialState: fieldValue,
+				externalState: fieldValue,
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur
+			})
+		}, fieldData) });
+	};
+	const Embed = (t0) => {
+		const $ = c(59);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { name, children } = t0;
+		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 { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const t1 = String(name);
+		let t2;
+		if ($[1] !== blockId || $[2] !== repeaterContext || $[3] !== t1) {
+			t2 = getOverlayFieldId(blockId, repeaterContext, t1);
+			$[1] = blockId;
+			$[2] = repeaterContext;
+			$[3] = t1;
+			$[4] = t2;
+		} else t2 = $[4];
+		const fieldId = t2;
+		const [isOpen, setIsOpen] = React.useState(false);
+		const [urlValue, setUrlValue] = React.useState(fieldValue);
+		const [isHovered, setIsHovered] = React.useState(false);
+		const timerRef = React.useRef(null);
+		let t3;
+		if ($[5] !== fieldId) {
+			t3 = { fieldId };
+			$[5] = fieldId;
+			$[6] = t3;
+		} else t3 = $[6];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t3);
+		let t4;
+		let t5;
+		if ($[7] !== isHoveredFromSidebar) {
+			t4 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t5 = [isHoveredFromSidebar];
+			$[7] = isHoveredFromSidebar;
+			$[8] = t4;
+			$[9] = t5;
+		} else {
+			t4 = $[8];
+			t5 = $[9];
+		}
+		React.useEffect(t4, t5);
+		let t6;
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = blockMutations.updateContent();
+			$[10] = t6;
+		} else t6 = $[10];
+		const updateBlockContent = useMutation(t6);
+		let t7;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = repeatableItemMutations.updateContent();
+			$[11] = t7;
+		} else t7 = $[11];
+		const updateRepeatableContent = useMutation(t7);
+		let t8;
+		let t9;
+		if ($[12] !== fieldValue || $[13] !== isOpen) {
+			t8 = () => {
+				if (!isOpen) setUrlValue(fieldValue);
+			};
+			t9 = [fieldValue, isOpen];
+			$[12] = fieldValue;
+			$[13] = isOpen;
+			$[14] = t8;
+			$[15] = t9;
+		} else {
+			t8 = $[14];
+			t9 = $[15];
+		}
+		React.useEffect(t8, t9);
+		let t10;
+		let t11;
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = () => () => {
+				if (timerRef.current) clearTimeout(timerRef.current);
+			};
+			t11 = [];
+			$[16] = t10;
+			$[17] = t11;
+		} else {
+			t10 = $[16];
+			t11 = $[17];
+		}
+		React.useEffect(t10, t11);
+		let t12;
+		if ($[18] !== blockId || $[19] !== name || $[20] !== repeaterContext || $[21] !== updateBlockContent || $[22] !== updateRepeatableContent) {
+			t12 = (e) => {
+				const newValue = e.target.value;
+				setUrlValue(newValue);
+				if (timerRef.current) clearTimeout(timerRef.current);
+				timerRef.current = window.setTimeout(() => {
+					if (repeaterContext?.itemId != null) updateRepeatableContent.mutate({
+						id: repeaterContext.itemId,
+						content: { [name]: newValue }
+					});
+					else updateBlockContent.mutate({
+						id: blockId,
+						content: { [name]: newValue }
+					});
+				}, 500);
+			};
+			$[18] = blockId;
+			$[19] = name;
+			$[20] = repeaterContext;
+			$[21] = updateBlockContent;
+			$[22] = updateRepeatableContent;
+			$[23] = t12;
+		} else t12 = $[23];
+		const handleUrlChange = t12;
+		let t13;
+		if ($[24] !== blockId || $[25] !== name || $[26] !== repeaterContext) {
+			t13 = (open, _eventDetails) => {
+				setIsOpen(open);
+				if (open) if (repeaterContext?.itemId != null) previewStore.send({
+					type: "selectItemField",
+					blockId,
+					itemId: repeaterContext.itemId,
+					fieldName: name.toString(),
+					fieldType: "Embed"
+				});
+				else previewStore.send({
+					type: "selectBlockField",
+					blockId,
+					fieldName: name.toString(),
+					fieldType: "Embed"
+				});
+			};
+			$[24] = blockId;
+			$[25] = name;
+			$[26] = repeaterContext;
+			$[27] = t13;
+		} else t13 = $[27];
+		const handleOpenChange = t13;
+		const t14 = isContentEditable ? isOpen : false;
+		const t15 = isContentEditable ? handleOpenChange : void 0;
+		const t16 = isContentEditable ? fieldId : void 0;
+		const t17 = isContentEditable ? "embed" : void 0;
+		const t18 = isContentEditable && isHovered || void 0;
+		const t19 = isContentEditable && isOpen || void 0;
+		const t20 = mode === "layout" ? "layout" : void 0;
+		let t21;
+		if ($[28] !== isContentEditable) {
+			t21 = isContentEditable ? () => setIsHovered(true) : void 0;
+			$[28] = isContentEditable;
+			$[29] = t21;
+		} else t21 = $[29];
+		let t22;
+		if ($[30] !== isContentEditable) {
+			t22 = isContentEditable ? () => setIsHovered(false) : void 0;
+			$[30] = isContentEditable;
+			$[31] = t22;
+		} else t22 = $[31];
+		let t23;
+		if ($[32] !== t16 || $[33] !== t17 || $[34] !== t18 || $[35] !== t19 || $[36] !== t20 || $[37] !== t21 || $[38] !== t22) {
+			t23 = /* @__PURE__ */ jsx("div", {
+				"data-camox-field-id": t16,
+				"data-camox-field-type": t17,
+				"data-camox-hovered": t18,
+				"data-camox-focused": t19,
+				"data-camox-overlay-mode": t20,
+				onMouseEnter: t21,
+				onMouseLeave: t22
+			});
+			$[32] = t16;
+			$[33] = t17;
+			$[34] = t18;
+			$[35] = t19;
+			$[36] = t20;
+			$[37] = t21;
+			$[38] = t22;
+			$[39] = t23;
+		} else t23 = $[39];
+		let t24;
+		if ($[40] !== children || $[41] !== fieldValue) {
+			t24 = children({ src: fieldValue }, { url: fieldValue });
+			$[40] = children;
+			$[41] = fieldValue;
+			$[42] = t24;
+		} else t24 = $[42];
+		let t25;
+		if ($[43] !== isContentEditable) {
+			t25 = isContentEditable && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 10
+			} });
+			$[43] = isContentEditable;
+			$[44] = t25;
+		} else t25 = $[44];
+		let t26;
+		if ($[45] !== t23 || $[46] !== t24 || $[47] !== t25) {
+			t26 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+				render: t23,
+				nativeButton: false,
+				children: [t24, t25]
+			});
+			$[45] = t23;
+			$[46] = t24;
+			$[47] = t25;
+			$[48] = t26;
+		} else t26 = $[48];
+		let t27;
+		if ($[49] !== handleUrlChange || $[50] !== isContentEditable || $[51] !== name || $[52] !== urlValue) {
+			t27 = 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
+					})]
+				})
+			});
+			$[49] = handleUrlChange;
+			$[50] = isContentEditable;
+			$[51] = name;
+			$[52] = urlValue;
+			$[53] = t27;
+		} else t27 = $[53];
+		let t28;
+		if ($[54] !== t14 || $[55] !== t15 || $[56] !== t26 || $[57] !== t27) {
+			t28 = /* @__PURE__ */ jsxs(Popover, {
+				open: t14,
+				onOpenChange: t15,
+				children: [t26, t27]
+			});
+			$[54] = t14;
+			$[55] = t15;
+			$[56] = t26;
+			$[57] = t27;
+			$[58] = t28;
+		} else t28 = $[58];
+		return t28;
+	};
+	const Link = (t0) => {
+		const $ = c(38);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { name, children } = t0;
+		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 elementRef = React.useRef(null);
+		const { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const fieldValue = normalizeLinkValue(repeaterContext ? repeaterContext.itemContent[name] : content[name]);
+		let t1;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = blockMutations.updateContent();
+			$[1] = t1;
+		} else t1 = $[1];
+		const updateBlockContent = useMutation(t1);
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = repeatableItemMutations.updateContent();
+			$[2] = t2;
+		} else t2 = $[2];
+		const updateRepeatableContent = useMutation(t2);
+		const projectSlug = useProjectSlug();
+		let t3;
+		if ($[3] !== projectSlug) {
+			t3 = projectQueries.getBySlug(projectSlug);
+			$[3] = projectSlug;
+			$[4] = t3;
+		} else t3 = $[4];
+		const { data: project } = useQuery(t3);
+		let t4;
+		if ($[5] !== project?.id) {
+			t4 = pageQueries.list(project?.id ?? 0);
+			$[5] = project?.id;
+			$[6] = t4;
+		} else t4 = $[6];
+		const t5 = !!project;
+		let t6;
+		if ($[7] !== t4 || $[8] !== t5) {
+			t6 = {
+				...t4,
+				enabled: t5
+			};
+			$[7] = t4;
+			$[8] = t5;
+			$[9] = t6;
+		} else t6 = $[9];
+		const { data: pages } = useQuery(t6);
+		let t7;
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = { select: _temp };
+			$[10] = t7;
+		} else t7 = $[10];
+		const resolvedHref = resolveLinkHref(fieldValue, pages, useLocation(t7));
+		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 isSelectedFromSelection = useFieldSelection(blockId, String(name), "Link", repeaterContext?.itemId);
+		const isFocused = isEditorFocused || isSelectedFromSelection;
+		React.useEffect(() => {
+			if (!isEditing) setDisplayText(fieldValue.text);
+		}, [fieldValue.text, isEditing]);
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		let t8;
+		let t9;
+		if ($[11] !== isHoveredFromSidebar) {
+			t8 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t9 = [isHoveredFromSidebar];
+			$[11] = isHoveredFromSidebar;
+			$[12] = t8;
+			$[13] = t9;
+		} else {
+			t8 = $[12];
+			t9 = $[13];
+		}
+		React.useEffect(t8, t9);
+		let t10;
+		if ($[14] !== blockId || $[15] !== name || $[16] !== repeaterContext || $[17] !== updateBlockContent || $[18] !== updateRepeatableContent) {
+			t10 = (newLinkValue) => {
+				if (repeaterContext?.itemId != null) updateRepeatableContent.mutate({
+					id: repeaterContext.itemId,
+					content: { [name]: newLinkValue }
+				});
+				else updateBlockContent.mutate({
+					id: blockId,
+					content: { [name]: newLinkValue }
+				});
+			};
+			$[14] = blockId;
+			$[15] = name;
+			$[16] = repeaterContext;
+			$[17] = updateBlockContent;
+			$[18] = updateRepeatableContent;
+			$[19] = t10;
+		} else t10 = $[19];
+		const saveLinkValue = t10;
+		const handleInput = (e) => {
+			const newText = e.target.textContent || "";
+			saveLinkValue({
+				...fieldValue,
+				text: newText
+			});
+		};
+		let t11;
+		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext) {
+			t11 = () => {
+				setIsEditing(true);
+				setIsEditorFocused(true);
+				if (repeaterContext?.itemId != null) previewStore.send({
+					type: "selectItemField",
+					blockId,
+					itemId: repeaterContext.itemId,
+					fieldName: String(name),
+					fieldType: "Link"
+				});
+				else previewStore.send({
+					type: "selectBlockField",
+					blockId,
+					fieldName: String(name),
+					fieldType: "Link"
+				});
+			};
+			$[20] = blockId;
+			$[21] = name;
+			$[22] = repeaterContext;
+			$[23] = t11;
+		} else t11 = $[23];
+		const handleFocus = t11;
+		let t12;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = () => {
+				setIsEditing(false);
+				setIsEditorFocused(false);
+			};
+			$[24] = t12;
+		} else t12 = $[24];
+		const handleBlur = t12;
+		let t13;
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = (e_0) => {
+				e_0.stopPropagation();
+				previewStore.send({ type: "toggleContentSheet" });
+				setIsEditorFocused(false);
+				setIsEditing(false);
+			};
+			$[25] = t13;
+		} else t13 = $[25];
+		const handleEditLink = t13;
+		const linkData = {
+			text: displayText,
+			href: resolvedHref,
+			newTab: fieldValue.newTab
+		};
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({
+			to: resolvedHref,
+			target: fieldValue.newTab ? "_blank" : void 0,
+			rel: fieldValue.newTab ? "noreferrer" : void 0,
+			children: fieldValue.text
+		}, linkData) });
+		let t14;
+		let t15;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t14 = () => setIsHovered(true);
+			t15 = () => setIsHovered(false);
+			$[26] = t14;
+			$[27] = t15;
+		} else {
+			t14 = $[26];
+			t15 = $[27];
+		}
+		const linkProps = {
+			ref: elementRef,
+			to: resolvedHref,
+			target: fieldValue.newTab ? "_blank" : void 0,
+			rel: fieldValue.newTab ? "noreferrer" : void 0,
+			children: displayText,
+			"data-camox-field-id": fieldId,
+			"data-camox-hovered": isHovered || void 0,
+			"data-camox-focused": isFocused || void 0,
+			"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
+			contentEditable: true,
+			onClick: _temp2,
+			onInput: handleInput,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onMouseEnter: t14,
+			onMouseLeave: t15,
+			onKeyDown: _temp3,
+			spellCheck: false,
+			suppressContentEditableWarning: true
+		};
+		const T0 = Popover;
+		const t16 = children(linkProps, linkData);
+		let t17;
+		if ($[28] !== handleEditLink) {
+			t17 = /* @__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: _temp4,
+				onClick: handleEditLink,
+				children: "Edit link"
+			});
+			$[28] = handleEditLink;
+			$[29] = t17;
+		} else t17 = $[29];
+		let t18;
+		if ($[30] !== elementRef || $[31] !== t17) {
+			t18 = /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-2",
+				initialFocus: false,
+				anchor: elementRef,
+				align: "end",
+				children: t17
+			});
+			$[30] = elementRef;
+			$[31] = t17;
+			$[32] = t18;
+		} else t18 = $[32];
+		let t19;
+		if ($[33] !== T0 || $[34] !== isEditorFocused || $[35] !== t16 || $[36] !== t18) {
+			t19 = /* @__PURE__ */ jsxs(T0, {
+				open: isEditorFocused,
+				children: [t16, t18]
+			});
+			$[33] = T0;
+			$[34] = isEditorFocused;
+			$[35] = t16;
+			$[36] = t18;
+			$[37] = t19;
+		} else t19 = $[37];
+		return t19;
+	};
+	const Image = (t0) => {
+		const $ = c(22);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { name, children } = t0;
+		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 { window: iframeWindow } = useFrame();
+		const repeaterContext = React.use(RepeaterItemContext);
+		const { filesMap } = useNormalizedData();
+		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
+		const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
+		const fieldValue = rawValue ?? defaultValue;
+		const isInlineArrayItem = repeaterContext != null && repeaterContext.itemId == null;
+		const overlayFieldName = isInlineArrayItem ? repeaterContext.arrayFieldName : String(name);
+		const overlayItemId = isInlineArrayItem ? repeaterContext.containerItemId : repeaterContext?.itemId;
+		const fieldId = overlayItemId != null ? `${blockId}__${overlayItemId}__${overlayFieldName}` : `${blockId}__${overlayFieldName}`;
+		const [isHovered, setIsHovered] = React.useState(false);
+		const isFocused = useFieldSelection(blockId, overlayFieldName, "Image", overlayItemId);
+		let t1;
+		if ($[1] !== fieldId) {
+			t1 = { fieldId };
+			$[1] = fieldId;
+			$[2] = t1;
+		} else t1 = $[2];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t1);
+		let t2;
+		let t3;
+		if ($[3] !== isHoveredFromSidebar) {
+			t2 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t3 = [isHoveredFromSidebar];
+			$[3] = isHoveredFromSidebar;
+			$[4] = t2;
+			$[5] = t3;
+		} else {
+			t2 = $[4];
+			t3 = $[5];
+		}
+		React.useEffect(t2, t3);
+		let t4;
+		if ($[6] !== blockId || $[7] !== isContentEditable || $[8] !== overlayFieldName || $[9] !== overlayItemId) {
+			t4 = () => {
+				if (!isContentEditable) return;
+				if (overlayItemId != null) previewStore.send({
+					type: "selectItemField",
+					blockId,
+					itemId: overlayItemId,
+					fieldName: overlayFieldName,
+					fieldType: "Image"
+				});
+				else previewStore.send({
+					type: "selectBlockField",
+					blockId,
+					fieldName: overlayFieldName,
+					fieldType: "Image"
+				});
+				previewStore.send({ type: "toggleContentSheet" });
+			};
+			$[6] = blockId;
+			$[7] = isContentEditable;
+			$[8] = overlayFieldName;
+			$[9] = overlayItemId;
+			$[10] = t4;
+		} else t4 = $[10];
+		const handleClick = t4;
+		const imageProps = {
+			src: transformImageUrl(fieldValue.url, {
+				width: getDefaultImageWidth(),
+				mimeType: fieldValue.mimeType,
+				size: fieldValue.size
+			}),
+			srcSet: buildImageSrcSet(fieldValue.url, fieldValue.mimeType, fieldValue.size),
+			sizes: getDefaultImageSizes(),
+			alt: fieldValue.alt
+		};
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(imageProps, fieldValue) });
+		const t5 = "image";
+		const t6 = isHovered || void 0;
+		const t7 = isFocused || void 0;
+		const t8 = mode === "layout" ? "layout" : void 0;
+		let t10;
+		let t9;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = () => setIsHovered(true);
+			t10 = () => setIsHovered(false);
+			$[11] = t10;
+			$[12] = t9;
+		} else {
+			t10 = $[11];
+			t9 = $[12];
+		}
+		const t11 = children(imageProps, fieldValue);
+		let t12;
+		if ($[13] !== fieldId || $[14] !== handleClick || $[15] !== t10 || $[16] !== t11 || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+			t12 = /* @__PURE__ */ jsx("div", {
+				"data-camox-field-id": fieldId,
+				"data-camox-field-type": t5,
+				"data-camox-hovered": t6,
+				"data-camox-focused": t7,
+				"data-camox-overlay-mode": t8,
+				onMouseEnter: t9,
+				onMouseLeave: t10,
+				onClick: handleClick,
+				children: t11
+			});
+			$[13] = fieldId;
+			$[14] = handleClick;
+			$[15] = t10;
+			$[16] = t11;
+			$[17] = t6;
+			$[18] = t7;
+			$[19] = t8;
+			$[20] = t9;
+			$[21] = t12;
+		} else t12 = $[21];
+		return t12;
+	};
+	const File = (t0) => {
+		const $ = c(9);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { name, children } = t0;
+		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);
+		const { filesMap } = useNormalizedData();
+		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		let t1;
+		if ($[1] !== children || $[2] !== filesMap || $[3] !== name || $[4] !== rawSource || $[5] !== repeaterContext) {
+			const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
+			const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
+			const fieldValue = rawValue ?? defaultValue;
+			t1 = children({
+				href: fieldValue.url,
+				download: fieldValue.filename
+			}, fieldValue);
+			$[1] = children;
+			$[2] = filesMap;
+			$[3] = name;
+			$[4] = rawSource;
+			$[5] = repeaterContext;
+			$[6] = t1;
+		} else t1 = $[6];
+		let t2;
+		if ($[7] !== t1) {
+			t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
+			$[7] = t1;
+			$[8] = t2;
+		} else t2 = $[8];
+		return t2;
+	};
+	const ASSET_LIST_SELF_KEY = "__camox_asset_self__";
+	const _AssetList = ({ name, children }) => {
+		const blockContext = React.use(Context);
+		if (!blockContext) throw new Error("ImageList/FileList must be used within a Block Component");
+		const parentRepeaterContext = React.use(RepeaterItemContext);
+		const { filesMap } = useNormalizedData();
+		const fieldName = String(name);
+		const fieldSchema = parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : typeboxSchema.properties[fieldName];
+		const ft = fieldSchema?.fieldType;
+		if (ft !== "ImageList" && ft !== "FileList") throw new Error(`"${fieldName}" is not a Type.ImageList or Type.FileList field`);
+		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[fieldName] : blockContext.content[fieldName];
+		let arr = Array.isArray(source) ? source : [];
+		if (arr.length === 0) {
+			const defaultCount = fieldSchema.defaultItems ?? 0;
+			const itemDefault = fieldSchema.items?.default;
+			if (defaultCount > 0 && itemDefault) arr = Array.from({ length: defaultCount }, () => itemDefault);
+		}
+		const resolved = arr.map((v) => isFileMarker(v) ? resolveFileMarker(v, filesMap) : v).filter((v) => v != null && typeof v === "object" && "url" in v);
+		const Single = ft === "ImageList" ? Image : File;
+		return /* @__PURE__ */ jsx(RepeaterHoverProvider, {
+			blockId: blockContext.blockId,
+			fieldName,
+			children: resolved.map((value, index) => /* @__PURE__ */ jsx(RepeaterItemContext.Provider, {
+				value: {
+					arrayFieldName: fieldName,
+					itemIndex: index,
+					itemContent: { [ASSET_LIST_SELF_KEY]: value },
+					itemSettings: {},
+					itemId: void 0,
+					containerItemId: parentRepeaterContext?.itemId ?? parentRepeaterContext?.containerItemId
+				},
+				children: /* @__PURE__ */ jsx(Single, {
+					name: ASSET_LIST_SELF_KEY,
+					children
+				})
+			}, index))
+		});
+	};
+	const ImageList = _AssetList;
+	const FileList = _AssetList;
+	const RepeaterItemWrapper = (t0) => {
+		const $ = c(9);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { itemId, blockId, mode, children } = t0;
+		const isContentEditable = useIsEditable(mode);
+		const { window: iframeWindow } = useFrame();
+		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
+		const t1 = String(blockId);
+		const t2 = String(itemId);
+		let t3;
+		if ($[1] !== t1 || $[2] !== t2) {
+			t3 = {
+				blockId: t1,
+				itemId: t2
+			};
+			$[1] = t1;
+			$[2] = t2;
+			$[3] = t3;
+		} else t3 = $[3];
+		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t3);
+		const showOverlay = isContentEditable && (isHovered || isRepeaterHovered);
+		const t4 = isContentEditable ? itemId : void 0;
+		const t5 = showOverlay || void 0;
+		const t6 = mode === "layout" ? "layout" : void 0;
+		let t7;
+		if ($[4] !== children || $[5] !== t4 || $[6] !== t5 || $[7] !== t6) {
+			t7 = /* @__PURE__ */ jsx("div", {
+				"data-camox-repeater-item-id": t4,
+				"data-camox-hovered": t5,
+				"data-camox-overlay-mode": t6,
+				children
+			});
+			$[4] = children;
+			$[5] = t4;
+			$[6] = t5;
+			$[7] = t6;
+			$[8] = t7;
+		} else t7 = $[8];
+		return t7;
+	};
+	const RepeaterHoverProvider = (t0) => {
+		const $ = c(7);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { blockId, fieldName, children } = t0;
+		const isContentEditable = useIsEditable("site");
+		const { window: iframeWindow } = useFrame();
+		const t1 = String(blockId);
+		let t2;
+		if ($[1] !== fieldName || $[2] !== t1) {
+			t2 = {
+				blockId: t1,
+				fieldName
+			};
+			$[1] = fieldName;
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER", "CAMOX_HOVER_REPEATER_END", t2);
+		let t3;
+		if ($[4] !== children || $[5] !== isHovered) {
+			t3 = /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
+				value: isHovered,
+				children
+			});
+			$[4] = children;
+			$[5] = isHovered;
+			$[6] = t3;
+		} else t3 = $[6];
+		return t3;
+	};
+	const Repeater = (t0) => {
+		const $ = c(27);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { name, children } = t0;
+		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 ItemField = Field;
+		const ItemLink = Link;
+		const ItemEmbed = Embed;
+		const ItemImage = Image;
+		const ItemImageList = _AssetList;
+		const ItemFileList = _AssetList;
+		const ItemFile = File;
+		const ItemRepeater = Repeater;
+		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[name] : content[name];
+		const { itemsMap } = useNormalizedData();
+		let T0;
+		let t1;
+		let t2;
+		let t3;
+		if ($[1] !== blockId || $[2] !== children || $[3] !== fieldName || $[4] !== itemsMap || $[5] !== mode || $[6] !== name || $[7] !== parentRepeaterContext?.containerItemId || $[8] !== source) {
+			let arrayValue = source ?? [];
+			if (!Array.isArray(arrayValue)) throw new Error(`Field "${String(name)}" is not an array`);
+			let t4;
+			if ($[13] !== itemsMap) {
+				t4 = (item) => {
+					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
+					return item;
+				};
+				$[13] = itemsMap;
+				$[14] = t4;
+			} else t4 = $[14];
+			arrayValue = arrayValue.map(t4).filter(Boolean);
+			const settingsDefaultsForField = repeatableItemSettingsDefaults[fieldName];
+			T0 = RepeaterHoverProvider;
+			t1 = blockId;
+			t2 = fieldName;
+			let t5;
+			if ($[15] !== blockId || $[16] !== children || $[17] !== fieldName || $[18] !== mode || $[19] !== parentRepeaterContext?.containerItemId || $[20] !== settingsDefaultsForField) {
+				t5 = (item_0, index) => {
+					const isDbItem = item_0.content !== void 0 && item_0.id != null;
+					const itemContent = {
+						...repeatableItemDefaults[fieldName],
+						...isDbItem ? item_0.content : item_0
+					};
+					const itemSettings = {
+						...settingsDefaultsForField,
+						...isDbItem ? item_0.settings : null
+					};
+					const itemId = isDbItem ? item_0.id : void 0;
+					const useItemSetting = (settingName) => itemSettings[settingName];
+					const itemApi = {
+						Field: ItemField,
+						Link: ItemLink,
+						Embed: ItemEmbed,
+						Image: ItemImage,
+						File: ItemFile,
+						ImageList: ItemImageList,
+						FileList: ItemFileList,
+						Repeater: ItemRepeater,
+						useSetting: useItemSetting
+					};
+					return /* @__PURE__ */ jsx(RepeaterItemContext.Provider, {
+						value: {
+							arrayFieldName: fieldName,
+							itemIndex: index,
+							itemContent,
+							itemSettings,
+							itemId,
+							containerItemId: itemId ?? parentRepeaterContext?.containerItemId
+						},
+						children: /* @__PURE__ */ jsx(RepeaterItemWrapper, {
+							itemId,
+							blockId,
+							mode,
+							children: children(itemApi, index)
+						})
+					}, itemId ?? index);
+				};
+				$[15] = blockId;
+				$[16] = children;
+				$[17] = fieldName;
+				$[18] = mode;
+				$[19] = parentRepeaterContext?.containerItemId;
+				$[20] = settingsDefaultsForField;
+				$[21] = t5;
+			} else t5 = $[21];
+			t3 = arrayValue.map(t5);
+			$[1] = blockId;
+			$[2] = children;
+			$[3] = fieldName;
+			$[4] = itemsMap;
+			$[5] = mode;
+			$[6] = name;
+			$[7] = parentRepeaterContext?.containerItemId;
+			$[8] = source;
+			$[9] = T0;
+			$[10] = t1;
+			$[11] = t2;
+			$[12] = t3;
+		} else {
+			T0 = $[9];
+			t1 = $[10];
+			t2 = $[11];
+			t3 = $[12];
+		}
+		let t4;
+		if ($[22] !== T0 || $[23] !== t1 || $[24] !== t2 || $[25] !== t3) {
+			t4 = /* @__PURE__ */ jsx(T0, {
+				blockId: t1,
+				fieldName: t2,
+				children: t3
+			});
+			$[22] = T0;
+			$[23] = t1;
+			$[24] = t2;
+			$[25] = t3;
+			$[26] = t4;
+		} else t4 = $[26];
+		return t4;
+	};
+	const BlockComponent = (t0) => {
+		const $ = c(78);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 78; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
+		const isContentEditable = useIsEditable(mode);
+		const { window: iframeWindow } = useFrame();
+		const [isHovered, setIsHovered] = React.useState(false);
+		const selection = useSelector(previewStore, _temp5);
+		const isPageEditorSidebarOpen = useSelector(previewStore, _temp6);
+		const isAddBlockSidebarOpen = useSelector(previewStore, _temp7);
+		const pendingAgentBlockFocus = useSelector(previewStore, _temp8);
+		const isBlockSelected = selection?.blockId === blockData._id;
+		const ref = React.useRef(null);
+		const [isFirstRender, setIsFirstRender] = React.useState(true);
+		let t1;
+		let t2;
+		if ($[1] !== isFirstRender) {
+			t1 = () => {
+				if (isFirstRender) setIsFirstRender(false);
+			};
+			t2 = [isFirstRender];
+			$[1] = isFirstRender;
+			$[2] = t1;
+			$[3] = t2;
+		} else {
+			t1 = $[2];
+			t2 = $[3];
+		}
+		React.useEffect(t1, t2);
+		let t3;
+		if ($[4] !== blockData._id || $[5] !== isBlockSelected || $[6] !== isFirstRender || $[7] !== pendingAgentBlockFocus?.blockId) {
+			t3 = () => {
+				if (!isBlockSelected || !ref.current) return;
+				if (pendingAgentBlockFocus?.blockId === blockData._id) return;
+				ref.current.scrollIntoView({
+					behavior: isFirstRender ? "instant" : "smooth",
+					block: isFirstRender ? "start" : "nearest"
+				});
+			};
+			$[4] = blockData._id;
+			$[5] = isBlockSelected;
+			$[6] = isFirstRender;
+			$[7] = pendingAgentBlockFocus?.blockId;
+			$[8] = t3;
+		} else t3 = $[8];
+		let t4;
+		if ($[9] !== blockData._id || $[10] !== isBlockSelected || $[11] !== isFirstRender || $[12] !== isPageEditorSidebarOpen || $[13] !== pendingAgentBlockFocus) {
+			t4 = [
+				blockData._id,
+				isBlockSelected,
+				isFirstRender,
+				isPageEditorSidebarOpen,
+				pendingAgentBlockFocus
+			];
+			$[9] = blockData._id;
+			$[10] = isBlockSelected;
+			$[11] = isFirstRender;
+			$[12] = isPageEditorSidebarOpen;
+			$[13] = pendingAgentBlockFocus;
+			$[14] = t4;
+		} else t4 = $[14];
+		React.useEffect(t3, t4);
+		let t5;
+		let t6;
+		if ($[15] !== blockData._id || $[16] !== pendingAgentBlockFocus) {
+			t5 = () => {
+				if (!pendingAgentBlockFocus || pendingAgentBlockFocus.blockId !== blockData._id) return;
+				if (!ref.current) return;
+				ref.current.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest"
+				});
+				previewStore.send({
+					type: "clearPendingAgentBlockFocus",
+					requestId: pendingAgentBlockFocus.requestId
+				});
+			};
+			t6 = [blockData._id, pendingAgentBlockFocus];
+			$[15] = blockData._id;
+			$[16] = pendingAgentBlockFocus;
+			$[17] = t5;
+			$[18] = t6;
+		} else {
+			t5 = $[17];
+			t6 = $[18];
+		}
+		React.useEffect(t5, t6);
+		const t7 = String(blockData._id);
+		let t8;
+		if ($[19] !== t7) {
+			t8 = { blockId: t7 };
+			$[19] = t7;
+			$[20] = t8;
+		} else t8 = $[20];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t8);
+		let t10;
+		let t9;
+		if ($[21] !== isHoveredFromSidebar) {
+			t9 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t10 = [isHoveredFromSidebar];
+			$[21] = isHoveredFromSidebar;
+			$[22] = t10;
+			$[23] = t9;
+		} else {
+			t10 = $[22];
+			t9 = $[23];
+		}
+		React.useEffect(t9, t10);
+		let result;
+		if ($[24] !== blockData.content) {
+			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(_temp9);
+			}
+			$[24] = blockData.content;
+			$[25] = result;
+		} else result = $[25];
+		const normalizedContent = result;
+		let t11;
+		if ($[26] !== blockData._id || $[27] !== isContentEditable) {
+			t11 = (e) => {
+				if (!isContentEditable) return;
+				if (e.target.closest("[data-camox-field-id]")) return;
+				previewStore.send({
+					type: "setFocusedBlock",
+					blockId: blockData._id
+				});
+			};
+			$[26] = blockData._id;
+			$[27] = isContentEditable;
+			$[28] = t11;
+		} else t11 = $[28];
+		const handleClick = t11;
+		let t12;
+		if ($[29] !== isContentEditable) {
+			t12 = () => {
+				if (isContentEditable) setIsHovered(true);
+			};
+			$[29] = isContentEditable;
+			$[30] = t12;
+		} else t12 = $[30];
+		const handleMouseEnter = t12;
+		let t13;
+		if ($[31] !== isContentEditable) {
+			t13 = () => {
+				if (isContentEditable) setIsHovered(false);
+			};
+			$[31] = isContentEditable;
+			$[32] = t13;
+		} else t13 = $[32];
+		const handleMouseLeave = t13;
+		let t14;
+		if ($[33] !== addBlockAfterPosition || $[34] !== blockData.position) {
+			t14 = (insertPosition) => {
+				postOverlayMessage({
+					type: "CAMOX_ADD_BLOCK_REQUEST",
+					blockPosition: blockData.position,
+					insertPosition,
+					...addBlockAfterPosition !== void 0 && { afterPosition: addBlockAfterPosition }
+				});
+			};
+			$[33] = addBlockAfterPosition;
+			$[34] = blockData.position;
+			$[35] = t14;
+		} else t14 = $[35];
+		const handleAddBlockClick = t14;
+		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSidebarOpen;
+		const shouldShowAddBlockOverlay = isAddBlockSidebarOpen && mode !== "peek";
+		let t15;
+		if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+			t15 = {
+				position: "relative",
+				scrollMargin: "5rem",
+				background: "var(--background)"
+			};
+			$[36] = t15;
+		} else t15 = $[36];
+		const t16 = isContentEditable ? blockData._id : void 0;
+		const t17 = shouldShowOverlay && !isBlockSelected || void 0;
+		const t18 = shouldShowOverlay && isBlockSelected || void 0;
+		const t19 = mode === "layout" ? "layout" : void 0;
+		const t20 = blockData._id;
+		let t21;
+		if ($[37] !== blockData.content) {
+			t21 = {
+				...contentDefaults,
+				...blockData.content
+			};
+			$[37] = blockData.content;
+			$[38] = t21;
+		} else t21 = $[38];
+		const merged = t21;
+		let overrides;
+		if ($[39] !== merged) {
+			overrides = {};
+			for (const key_0 in merged) {
+				const val = merged[key_0];
+				if (val && typeof val === "object" && "url" in val && !val.url && contentDefaults[key_0]) overrides[key_0] = contentDefaults[key_0];
+			}
+			$[39] = merged;
+			$[40] = overrides;
+		} else overrides = $[40];
+		let t22;
+		if ($[41] !== merged || $[42] !== overrides) {
+			t22 = {
+				...merged,
+				...overrides
+			};
+			$[41] = merged;
+			$[42] = overrides;
+			$[43] = t22;
+		} else t22 = $[43];
+		const t23 = t22;
+		let t24;
+		if ($[44] !== blockData.settings) {
+			t24 = {
+				...settingsDefaults,
+				...blockData.settings
+			};
+			$[44] = blockData.settings;
+			$[45] = t24;
+		} else t24 = $[45];
+		const t25 = t24;
+		let t26;
+		if ($[46] !== blockData._id || $[47] !== isHovered || $[48] !== mode || $[49] !== t23 || $[50] !== t25) {
+			t26 = {
+				blockId: t20,
+				content: t23,
+				settings: t25,
+				mode,
+				isHovered,
+				setIsHovered
+			};
+			$[46] = blockData._id;
+			$[47] = isHovered;
+			$[48] = mode;
+			$[49] = t23;
+			$[50] = t25;
+			$[51] = t26;
+		} else t26 = $[51];
+		let t27;
+		if ($[52] !== normalizedContent) {
+			t27 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
+			$[52] = normalizedContent;
+			$[53] = t27;
+		} else t27 = $[53];
+		let t28;
+		if ($[54] !== t26 || $[55] !== t27) {
+			t28 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: t26,
+				children: t27
+			});
+			$[54] = t26;
+			$[55] = t27;
+			$[56] = t28;
+		} else t28 = $[56];
+		const t29 = shouldShowAddBlockOverlay || void 0;
+		let t30;
+		if ($[57] !== t29) {
+			t30 = /* @__PURE__ */ jsx("div", {
+				className: "camox-sheet-overlay",
+				"data-camox-visible": t29
+			});
+			$[57] = t29;
+			$[58] = t30;
+		} else t30 = $[58];
+		let t31;
+		if ($[59] !== handleAddBlockClick || $[60] !== isAddBlockSidebarOpen || $[61] !== isFirstBlock || $[62] !== mode || $[63] !== shouldShowOverlay || $[64] !== showAddBlockBottom || $[65] !== showAddBlockTop) {
+			t31 = shouldShowOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
+				position: "top",
+				hidden: isAddBlockSidebarOpen,
+				onMouseLeave: () => setIsHovered(false),
+				onClick: () => handleAddBlockClick("before")
+			}), (showAddBlockBottom ?? mode !== "layout") && /* @__PURE__ */ jsx(AddBlockControlBar, {
+				position: "bottom",
+				hidden: isAddBlockSidebarOpen,
+				onMouseLeave: () => setIsHovered(false),
+				onClick: () => handleAddBlockClick("after")
+			})] });
+			$[59] = handleAddBlockClick;
+			$[60] = isAddBlockSidebarOpen;
+			$[61] = isFirstBlock;
+			$[62] = mode;
+			$[63] = shouldShowOverlay;
+			$[64] = showAddBlockBottom;
+			$[65] = showAddBlockTop;
+			$[66] = t31;
+		} else t31 = $[66];
+		let t32;
+		if ($[67] !== handleClick || $[68] !== handleMouseEnter || $[69] !== handleMouseLeave || $[70] !== t16 || $[71] !== t17 || $[72] !== t18 || $[73] !== t19 || $[74] !== t28 || $[75] !== t30 || $[76] !== t31) {
+			t32 = /* @__PURE__ */ jsxs("div", {
+				className: "group visual-editing-block",
+				ref,
+				style: t15,
+				"data-camox-block-id": t16,
+				"data-camox-hovered": t17,
+				"data-camox-focused": t18,
+				"data-camox-overlay-mode": t19,
+				onClick: handleClick,
+				onMouseEnter: handleMouseEnter,
+				onMouseLeave: handleMouseLeave,
+				children: [
+					t28,
+					t30,
+					t31
+				]
+			});
+			$[67] = handleClick;
+			$[68] = handleMouseEnter;
+			$[69] = handleMouseLeave;
+			$[70] = t16;
+			$[71] = t17;
+			$[72] = t18;
+			$[73] = t19;
+			$[74] = t28;
+			$[75] = t30;
+			$[76] = t31;
+			$[77] = t32;
+		} else t32 = $[77];
+		return t32;
+	};
+	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 = (t0) => {
+		const $ = c(31);
+		if ($[0] !== "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d") {
+			for (let $i = 0; $i < 31; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "e263b48438d7cbcbf7882d7283db437d4762f01fd895729e78d2eda64650183d";
+		}
+		const { children } = t0;
+		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 selection = useSelector(previewStore, _temp0);
+		const isAddBlockSidebarOpen = useSelector(previewStore, _temp1);
+		const isBlockSelected = selection?.blockId === blockId;
+		const t1 = String(blockId);
+		let t2;
+		if ($[1] !== t1) {
+			t2 = { blockId: t1 };
+			$[1] = t1;
+			$[2] = t2;
+		} else t2 = $[2];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t2);
+		let t3;
+		let t4;
+		if ($[3] !== isHoveredFromSidebar || $[4] !== setIsHovered) {
+			t3 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t4 = [isHoveredFromSidebar, setIsHovered];
+			$[3] = isHoveredFromSidebar;
+			$[4] = setIsHovered;
+			$[5] = t3;
+			$[6] = t4;
+		} else {
+			t3 = $[5];
+			t4 = $[6];
+		}
+		React.useEffect(t3, t4);
+		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSidebarOpen;
+		const shouldHideForAddBlockSidebar = isAddBlockSidebarOpen && mode !== "peek";
+		let t5;
+		if ($[7] !== blockId || $[8] !== isContentEditable) {
+			t5 = (e) => {
+				if (!isContentEditable) return;
+				e.stopPropagation();
+				previewStore.send({
+					type: "setFocusedBlock",
+					blockId
+				});
+			};
+			$[7] = blockId;
+			$[8] = isContentEditable;
+			$[9] = t5;
+		} else t5 = $[9];
+		const handleClick = t5;
+		let t6;
+		if ($[10] !== isContentEditable || $[11] !== setIsHovered) {
+			t6 = () => {
+				if (isContentEditable) setIsHovered(true);
+			};
+			$[10] = isContentEditable;
+			$[11] = setIsHovered;
+			$[12] = t6;
+		} else t6 = $[12];
+		const handleMouseEnter = t6;
+		let t7;
+		if ($[13] !== isContentEditable || $[14] !== setIsHovered) {
+			t7 = () => {
+				if (isContentEditable) setIsHovered(false);
+			};
+			$[13] = isContentEditable;
+			$[14] = setIsHovered;
+			$[15] = t7;
+		} else t7 = $[15];
+		const handleMouseLeave = t7;
+		const [container, setContainer] = React.useState(null);
+		const t8 = shouldHideForAddBlockSidebar ? 0 : 1;
+		let t9;
+		if ($[16] !== children || $[17] !== handleClick || $[18] !== handleMouseEnter || $[19] !== handleMouseLeave || $[20] !== t8) {
+			t9 = children({
+				ref: setContainer,
+				style: { opacity: t8 },
+				onClick: handleClick,
+				onMouseEnter: handleMouseEnter,
+				onMouseLeave: handleMouseLeave
+			});
+			$[16] = children;
+			$[17] = handleClick;
+			$[18] = handleMouseEnter;
+			$[19] = handleMouseLeave;
+			$[20] = t8;
+			$[21] = t9;
+		} else t9 = $[21];
+		let t10;
+		if ($[22] !== blockId || $[23] !== container || $[24] !== isBlockSelected || $[25] !== mode || $[26] !== shouldShowOverlay) {
+			t10 = container && createPortal(/* @__PURE__ */ jsx(Fragment, { children: shouldShowOverlay && /* @__PURE__ */ jsx("div", {
+				"data-camox-block-id": blockId,
+				"data-camox-detached": true,
+				"data-camox-hovered": !isBlockSelected || void 0,
+				"data-camox-focused": isBlockSelected || void 0,
+				"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
+				style: {
+					position: "absolute",
+					pointerEvents: "none",
+					zIndex: 10
+				}
+			}) }), container);
+			$[22] = blockId;
+			$[23] = container;
+			$[24] = isBlockSelected;
+			$[25] = mode;
+			$[26] = shouldShowOverlay;
+			$[27] = t10;
+		} else t10 = $[27];
+		let t11;
+		if ($[28] !== t10 || $[29] !== t9) {
+			t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
+			$[28] = t10;
+			$[29] = t9;
+			$[30] = t11;
+		} else t11 = $[30];
+		return t11;
+	};
+	return {
+		Detached,
+		Field,
+		Embed,
+		Link,
+		Image,
+		File,
+		ImageList,
+		FileList,
+		Repeater,
+		useSetting,
+		_internal: {
+			/**
+			* The react component to be used at the page level when mapping on blocks content.
+			* It exposes context that will be consumed by the Field component, and provides visual editing
+			* capabilities (e.g. delete and reorder blocks).
+			*/
+			Component: BlockComponent,
+			id: options.id,
+			title: options.title,
+			description: options.description,
+			contentSchema,
+			settingsSchema,
+			layoutOnly: options.layoutOnly ?? false,
+			getInitialBundle: () => {
+				const counter = { value: 0 };
+				const allSeeds = [];
+				const content = { ...contentDefaults };
+				buildInitialSeeds(typeboxSchema.properties, null, content, allSeeds, counter);
+				const storageContent = {};
+				for (const [key, prop] of Object.entries(typeboxSchema.properties)) {
+					const ft = prop.fieldType;
+					if (ft === "Image" || ft === "File" || ft === "ImageList" || ft === "FileList" || ft === "Repeater") continue;
+					if ("default" in prop) storageContent[key] = prop.default;
+				}
+				return {
+					content: storageContent,
+					settings: { ...settingsDefaults },
+					repeatableItems: allSeeds
+				};
+			},
+			getInitialContent: () => {
+				return { ...contentDefaultsForStorage };
+			},
+			getInitialSettings: () => {
+				return { ...settingsDefaults };
+			},
+			getPeekBundle: () => {
+				const PEEK_BLOCK_ID = -1;
+				const counter = { value: 0 };
+				const allItems = [];
+				const content = { ...contentDefaults };
+				buildPeekItems(typeboxSchema.properties, PEEK_BLOCK_ID, null, content, allItems, counter);
+				return {
+					block: {
+						id: PEEK_BLOCK_ID,
+						pageId: null,
+						layoutId: null,
+						type: options.id,
+						content,
+						settings: settingsDefaults,
+						placement: null,
+						summary: "",
+						position: "",
+						createdAt: 0,
+						updatedAt: 0
+					},
+					repeatableItems: allItems,
+					files: []
+				};
+			}
+		}
+	};
+}
+function _temp(l) {
+	return l.pathname;
+}
+function _temp2(e_1) {
+	return e_1.preventDefault();
+}
+function _temp3(e_2) {
+	if (e_2.key === "Escape") e_2.target.blur();
+}
+function _temp4(e_3) {
+	return e_3.preventDefault();
+}
+function _temp5(state) {
+	return state.context.selection;
+}
+function _temp6(state_0) {
+	return state_0.context.isPageEditorSidebarOpen;
+}
+function _temp7(state_1) {
+	return state_1.context.isAddBlockSidebarOpen;
+}
+function _temp8(state_2) {
+	return state_2.context.pendingAgentBlockFocus;
+}
+function _temp9(item) {
+	return item.content;
+}
+function _temp0(state) {
+	return state.context.selection;
+}
+function _temp1(state_0) {
+	return state_0.context.isAddBlockSidebarOpen;
+}
+
+//#endregion
+export { createEditableBlock };