camox 0.32.0 → 0.33.0

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

@@ -1,608 +0,0 @@
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
-import { previewStore, selectionBlockId, selectionField, selectionItemId } from "../previewStore.js";
-import { PreviewSideSheet, Sheet } from "./PreviewSideSheet.js";
-import { actionsStore } from "../../provider/actionsStore.js";
-import { blockMutations, blockQueries, fileQueries, repeatableItemMutations } from "../../../lib/queries.js";
-import { cn } from "../../../lib/utils.js";
-import { isFileMarker } from "../../../lib/normalized-data.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
-import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
-import { SingleAssetFieldEditor } from "./AssetFieldEditor.js";
-import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
-import { ItemFieldsEditor, formatFieldName } from "./ItemFieldsEditor.js";
-import { LinkFieldEditor } from "./LinkFieldEditor.js";
-import { MultipleAssetFieldEditor } from "./MultipleAssetFieldEditor.js";
-import { Label } from "@camox/ui/label";
-import { useMutation, useQueries, useQuery } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@camox/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
-import { Switch } from "@camox/ui/switch";
-import { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
-import { Spinner } from "@camox/ui/spinner";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@camox/ui/breadcrumb";
-
-//#region src/features/preview/components/PageContentSheet.tsx
-const getSettingsFields = (schema) => {
-	const properties = schema?.properties;
-	if (!properties) return [];
-	return Object.keys(properties).map((fieldName) => {
-		const prop = properties[fieldName];
-		return {
-			name: fieldName,
-			fieldType: prop.fieldType,
-			label: prop.title,
-			enumLabels: prop.enumLabels,
-			enumValues: prop.enum
-		};
-	});
-};
-/**
-* Builds the path of fieldNames from the block root to the given item,
-* then walks the schema down that path to return the sub-schema for the item's fields.
-*/
-const getSchemaForItem = (contentSchema, itemId, itemsMap) => {
-	const path = [];
-	let current = itemsMap.get(itemId);
-	while (current) {
-		path.unshift(current.fieldName);
-		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
-	}
-	let schema = contentSchema;
-	for (const fieldName of path) {
-		const prop = schema?.properties?.[fieldName];
-		if (!prop?.items) return null;
-		schema = prop.items;
-	}
-	return schema;
-};
-/**
-* Like `getSchemaForItem` but returns the **array** schema (one level above
-* the items schema), where per-item settings metadata lives.
-*/
-const getArraySchemaForItem = (contentSchema, itemId, itemsMap) => {
-	const path = [];
-	let current = itemsMap.get(itemId);
-	while (current) {
-		path.unshift(current.fieldName);
-		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
-	}
-	let schema = contentSchema;
-	for (let i = 0; i < path.length; i++) {
-		const prop = schema?.properties?.[path[i]];
-		if (!prop?.items) return null;
-		if (i === path.length - 1) return prop;
-		schema = prop.items;
-	}
-	return null;
-};
-/**
-* Builds the ancestor chain from root to this item (inclusive).
-* Returns items in order from root-most ancestor to the item itself.
-*/
-const buildAncestorChain = (itemId, itemsMap) => {
-	const chain = [];
-	let current = itemsMap.get(itemId);
-	while (current) {
-		chain.unshift(current);
-		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
-	}
-	return chain;
-};
-const PageContentSheet = () => {
-	const camoxApp = useCamoxApp();
-	const updateContent = useMutation(blockMutations.updateContent());
-	const updateSettings = useMutation(blockMutations.updateSettings());
-	const updateRepeatableContent = useMutation(repeatableItemMutations.updateContent());
-	const updateRepeatableSettings = useMutation(repeatableItemMutations.updateSettings());
-	const requireDraft = useRequireDraftSource();
-	const isOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
-	const selection = useSelector(previewStore, (state_0) => state_0.context.selection);
-	const iframeElement = useSelector(previewStore, (state_1) => state_1.context.iframeElement);
-	const isReadOnly = useSelector(previewStore, (state_2) => state_2.context.previewSource) !== "draft";
-	const postToIframe = React.useCallback((message) => {
-		if (!iframeElement?.contentWindow) return;
-		iframeElement.contentWindow.postMessage(message, "*");
-	}, [iframeElement]);
-	const blockId = selectionBlockId(selection);
-	const currentItemId = selectionItemId(selection);
-	const fieldInfo = selectionField(selection);
-	const { data: blockBundle } = useQuery({
-		...blockQueries.get(blockId),
-		enabled: blockId != null
-	});
-	const block = blockBundle?.block ?? null;
-	const itemsMap = React.useMemo(() => new Map((blockBundle?.repeatableItems ?? []).map((i) => [i.id, i])), [blockBundle?.repeatableItems]);
-	const fileIds = React.useMemo(() => (blockBundle?.files ?? []).map((f) => f.id), [blockBundle?.files]);
-	const fileResults = useQueries({ queries: fileIds.map((id) => fileQueries.get(id)) });
-	const filesMap = React.useMemo(() => {
-		const map = new Map((blockBundle?.files ?? []).map((f_0) => [f_0.id, f_0]));
-		for (let i_0 = 0; i_0 < fileIds.length; i_0++) {
-			const data = fileResults[i_0]?.data;
-			if (data) map.set(data.id, data);
-		}
-		return map;
-	}, [
-		blockBundle?.files,
-		fileIds,
-		fileResults
-	]);
-	const blockDef = block ? camoxApp.getBlockById(block.type) : null;
-	const settingsFields = React.useMemo(() => {
-		return blockDef ? getSettingsFields(blockDef._internal.settingsSchema) : [];
-	}, [blockDef]);
-	const itemArraySchema = React.useMemo(() => {
-		if (!blockDef || currentItemId == null) return null;
-		return getArraySchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
-	}, [
-		blockDef,
-		currentItemId,
-		itemsMap
-	]);
-	const itemSettingsFields = React.useMemo(() => {
-		return getSettingsFields(itemArraySchema?.itemSettingsSchema);
-	}, [itemArraySchema]);
-	const currentSchema = React.useMemo(() => {
-		if (!blockDef) return null;
-		if (currentItemId == null) return blockDef._internal.contentSchema;
-		return getSchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
-	}, [
-		blockDef,
-		currentItemId,
-		itemsMap
-	]);
-	const currentItem = currentItemId != null ? itemsMap.get(currentItemId) : null;
-	const isItemLoading = currentItemId != null && !currentItem;
-	const siblingCount = React.useMemo(() => {
-		if (!currentItem) return 0;
-		let count = 0;
-		for (const it of itemsMap.values()) if (it.fieldName === currentItem.fieldName && it.parentItemId === currentItem.parentItemId) count++;
-		return count;
-	}, [currentItem, itemsMap]);
-	const { canAdd: canAddSibling, addItem: addSibling, canRemove: canRemoveCurrent, removeItem: removeCurrent } = useRepeatableItemActions({
-		blockId: block?.id ?? -1,
-		fieldName: currentItem?.fieldName ?? "",
-		parentItemId: currentItem?.parentItemId ?? null,
-		arraySchema: itemArraySchema,
-		siblingCount
-	});
-	const rawCurrentData = currentItem ? currentItem.content : block?.content ?? {};
-	const currentData = React.useMemo(() => {
-		const resolveFile = (marker) => {
-			const file = filesMap.get(marker._fileId);
-			return file ? {
-				url: file.url,
-				alt: file.alt,
-				filename: file.filename,
-				mimeType: file.mimeType,
-				_fileId: marker._fileId
-			} : {
-				url: "",
-				alt: "",
-				filename: "",
-				mimeType: ""
-			};
-		};
-		const resolveValue = (value) => {
-			if (isFileMarker(value)) return resolveFile(value);
-			if (Array.isArray(value)) return value.map(resolveValue);
-			if (value && typeof value === "object" && !Array.isArray(value)) {
-				const obj = value;
-				const resolved = {};
-				for (const [k, v] of Object.entries(obj)) resolved[k] = resolveValue(v);
-				return resolved;
-			}
-			return value;
-		};
-		const resolved_0 = {};
-		for (const [key, value_0] of Object.entries(rawCurrentData)) resolved_0[key] = resolveValue(value_0);
-		return resolved_0;
-	}, [rawCurrentData, filesMap]);
-	const isViewingLink = fieldInfo?.fieldType === "Link";
-	const linkFieldName = isViewingLink ? fieldInfo.fieldName : null;
-	const isViewingImage = fieldInfo?.fieldType === "Image";
-	const imageFieldName = isViewingImage ? fieldInfo.fieldName : null;
-	const isViewingFile = fieldInfo?.fieldType === "File";
-	const fileFieldName = isViewingFile ? fieldInfo.fieldName : null;
-	const isViewingAsset = isViewingImage || isViewingFile;
-	const assetFieldName = imageFieldName ?? fileFieldName;
-	const assetType = isViewingImage ? "Image" : "File";
-	const isMultipleAsset = React.useMemo(() => {
-		if (!isViewingAsset || !assetFieldName) return false;
-		const prop = currentSchema?.properties?.[assetFieldName];
-		return prop?.fieldType === "ImageList" || prop?.fieldType === "FileList";
-	}, [
-		isViewingAsset,
-		assetFieldName,
-		currentSchema
-	]);
-	const sessionDirtyRef = React.useRef(false);
-	const trackedOpenRef = React.useRef(false);
-	React.useEffect(() => {
-		if (!isOpen) {
-			trackedOpenRef.current = false;
-			return;
-		}
-		if (trackedOpenRef.current) return;
-		if (!block) return;
-		trackedOpenRef.current = true;
-		sessionDirtyRef.current = false;
-		trackClientEvent("content_sheet_opened", { blockType: block.type });
-	}, [isOpen, block]);
-	const fieldIdPrefix = React.useId();
-	const autoFocusFieldName = React.useMemo(() => {
-		if ((selection?.type === "block-field" || selection?.type === "item-field") && (selection.fieldType === "String" || selection.fieldType === "Embed")) return selection.fieldName;
-		const properties = currentSchema?.properties;
-		if (!properties) return null;
-		for (const name of Object.keys(properties)) {
-			const ft = properties[name]?.fieldType;
-			if (ft === "String" || ft === "Embed") return name;
-		}
-		return null;
-	}, [selection, currentSchema]);
-	const getInitialFocus = React.useCallback(() => {
-		if (!autoFocusFieldName) return null;
-		return document.getElementById(`${fieldIdPrefix}-${autoFocusFieldName}`);
-	}, [autoFocusFieldName, fieldIdPrefix]);
-	React.useEffect(() => {
-		const action = {
-			id: "toggle-content-sheet",
-			label: isOpen ? "Close form" : "Open in form",
-			groupLabel: "Preview",
-			shortcut: {
-				key: "j",
-				withAlt: true
-			},
-			checkIfAvailable: () => blockId != null,
-			execute: () => {
-				previewStore.send({ type: "toggleContentSheet" });
-			}
-		};
-		actionsStore.send({
-			type: "registerAction",
-			action
-		});
-		return () => actionsStore.send({
-			type: "unregisterAction",
-			id: action.id
-		});
-	}, [blockId, isOpen]);
-	const handleBlockFieldChange = React.useCallback((fieldName, value_1) => {
-		if (!block) return;
-		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
-		updateContent.mutate({
-			id: block.id,
-			content: { [fieldName]: value_1 }
-		});
-	}, [
-		block,
-		updateContent,
-		requireDraft
-	]);
-	const handleItemFieldChange = React.useCallback((fieldName_0, value_2) => {
-		if (currentItemId == null) return;
-		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
-		updateRepeatableContent.mutate({
-			id: currentItemId,
-			content: { [fieldName_0]: value_2 }
-		});
-	}, [
-		currentItemId,
-		updateRepeatableContent,
-		requireDraft
-	]);
-	const activeFieldChangeHandler = currentItemId != null ? handleItemFieldChange : handleBlockFieldChange;
-	const handleOpenChange = (open) => {
-		if (open) return;
-		if (block && sessionDirtyRef.current) trackClientEvent("block_edited", {
-			via: "content-sheet",
-			blockType: block.type
-		});
-		sessionDirtyRef.current = false;
-		if (block && autoFocusFieldName) postToIframe({
-			type: "CAMOX_FOCUS_FIELD_END",
-			fieldId: currentItemId != null ? `${block.id}__${currentItemId}__${autoFocusFieldName}` : `${block.id}__${autoFocusFieldName}`
-		});
-		if (block && currentItemId != null) postToIframe({
-			type: "CAMOX_HOVER_REPEATER_ITEM_END",
-			blockId: String(block.id),
-			itemId: String(currentItemId)
-		});
-		previewStore.send({ type: "closeBlockContentSheet" });
-	};
-	const ancestorChain = React.useMemo(() => currentItemId != null ? buildAncestorChain(currentItemId, itemsMap) : [], [currentItemId, itemsMap]);
-	if (!block || !blockDef || !currentSchema) return null;
-	const fieldHasOwnView = fieldInfo ? fieldTypesDictionary[fieldInfo.fieldType].hasOwnView : false;
-	const isAtBlockLevel = ancestorChain.length === 0 && !fieldHasOwnView;
-	return /* @__PURE__ */ jsxs(PreviewSideSheet, {
-		open: isOpen,
-		onOpenChange: handleOpenChange,
-		initialFocus: getInitialFocus,
-		className: "flex flex-col gap-0",
-		children: [/* @__PURE__ */ jsxs(Sheet.SheetHeader, {
-			className: "border-border border-b",
-			children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: block.summary }), /* @__PURE__ */ jsx(Sheet.SheetDescription, {
-				render: /* @__PURE__ */ jsx(Breadcrumb, {}),
-				children: /* @__PURE__ */ jsxs(BreadcrumbList, {
-					className: "flex-nowrap",
-					children: [
-						/* @__PURE__ */ jsx(BreadcrumbItem, {
-							className: "min-w-0",
-							children: isAtBlockLevel ? /* @__PURE__ */ jsx(BreadcrumbPage, {
-								className: "truncate",
-								children: blockDef._internal.title
-							}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
-								className: "cursor-pointer",
-								onClick: () => previewStore.send({
-									type: "setFocusedBlock",
-									blockId: block.id
-								}),
-								children: blockDef._internal.title
-							})
-						}),
-						ancestorChain.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-							ancestorChain.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-								className: "flex items-center gap-1",
-								children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, { className: "size-5" })
-							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-								align: "start",
-								children: ancestorChain.slice(0, -1).map((ancestor) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-									onClick: () => previewStore.send({
-										type: "selectItem",
-										blockId: block.id,
-										itemId: ancestor.id
-									}),
-									children: ancestor.summary || formatFieldName(ancestor.fieldName)
-								}, ancestor.id))
-							})] }) })] }),
-							/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-							(() => {
-								const lastAncestor = ancestorChain[ancestorChain.length - 1];
-								const crumbLabel = lastAncestor.summary || formatFieldName(lastAncestor.fieldName);
-								if (fieldHasOwnView) return /* @__PURE__ */ jsx(BreadcrumbItem, {
-									className: "min-w-0",
-									children: /* @__PURE__ */ jsx(BreadcrumbLink, {
-										className: "cursor-pointer truncate",
-										onClick: () => previewStore.send({ type: "selectParent" }),
-										children: crumbLabel
-									})
-								});
-								return /* @__PURE__ */ jsx(BreadcrumbItem, {
-									className: "min-w-0",
-									children: /* @__PURE__ */ jsx(BreadcrumbPage, {
-										className: "truncate",
-										children: crumbLabel
-									})
-								});
-							})()
-						] }),
-						fieldHasOwnView && fieldInfo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, {
-							className: "min-w-0",
-							children: /* @__PURE__ */ jsx(BreadcrumbPage, {
-								className: "truncate",
-								children: currentSchema?.properties?.[fieldInfo.fieldName]?.title ?? formatFieldName(fieldInfo.fieldName)
-							})
-						})] })
-					]
-				})
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "relative flex-1 overflow-auto",
-			children: [isReadOnly && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Switch to draft to edit",
-				className: "absolute inset-0 z-10 h-full w-full cursor-not-allowed",
-				onClick: () => previewStore.send({ type: "requestDraftSwitch" })
-			}), /* @__PURE__ */ jsx("div", {
-				className: cn(isReadOnly && "pointer-events-none opacity-50"),
-				children: isItemLoading ? /* @__PURE__ */ jsx("div", {
-					className: "flex h-full items-center justify-center py-12",
-					children: /* @__PURE__ */ jsx(Spinner, {})
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-					currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "border-border space-y-4 border-b px-4 py-4",
-						children: [/* @__PURE__ */ jsx(Label, {
-							className: "text-muted-foreground",
-							children: "Settings"
-						}), settingsFields.map((field) => {
-							const label = field.label ?? formatFieldName(field.name);
-							const settingsValues = block.settings ?? {};
-							if (field.fieldType === "Enum") {
-								const value_3 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
-								return /* @__PURE__ */ jsxs("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ jsx(Label, {
-										htmlFor: `setting-${field.name}`,
-										children: label
-									}), /* @__PURE__ */ jsxs(Select, {
-										value: value_3,
-										onValueChange: (newValue) => {
-											if (!requireDraft()) return;
-											sessionDirtyRef.current = true;
-											updateSettings.mutate({
-												id: block.id,
-												settings: { [field.name]: newValue }
-											});
-										},
-										children: [/* @__PURE__ */ jsx(SelectTrigger, {
-											id: `setting-${field.name}`,
-											children: /* @__PURE__ */ jsx(SelectValue, {})
-										}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
-											value: enumValue,
-											children: field.enumLabels?.[enumValue] ?? enumValue
-										}, enumValue)) })]
-									})]
-								}, field.name);
-							}
-							if (field.fieldType === "Boolean") {
-								const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
-								return /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ jsx(Label, {
-										htmlFor: `setting-${field.name}`,
-										children: label
-									}), /* @__PURE__ */ jsx(Switch, {
-										id: `setting-${field.name}`,
-										checked,
-										onCheckedChange: (newValue_0) => {
-											if (!requireDraft()) return;
-											sessionDirtyRef.current = true;
-											updateSettings.mutate({
-												id: block.id,
-												settings: { [field.name]: newValue_0 }
-											});
-										}
-									})]
-								}, field.name);
-							}
-							return null;
-						})]
-					}),
-					currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "border-border space-y-4 border-b px-4 py-4",
-						children: [/* @__PURE__ */ jsx(Label, {
-							className: "text-muted-foreground",
-							children: "Settings"
-						}), itemSettingsFields.map((field_0) => {
-							const label_0 = field_0.label ?? formatFieldName(field_0.name);
-							const itemSettingsValues = currentItem?.settings ?? {};
-							const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
-							if (field_0.fieldType === "Enum") {
-								const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
-								return /* @__PURE__ */ jsxs("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ jsx(Label, {
-										htmlFor: `item-setting-${field_0.name}`,
-										children: label_0
-									}), /* @__PURE__ */ jsxs(Select, {
-										value: value_4,
-										onValueChange: (newValue_1) => {
-											if (!requireDraft()) return;
-											sessionDirtyRef.current = true;
-											updateRepeatableSettings.mutate({
-												id: currentItemId,
-												settings: { [field_0.name]: newValue_1 }
-											});
-										},
-										children: [/* @__PURE__ */ jsx(SelectTrigger, {
-											id: `item-setting-${field_0.name}`,
-											children: /* @__PURE__ */ jsx(SelectValue, {})
-										}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
-											value: enumValue_0,
-											children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
-										}, enumValue_0)) })]
-									})]
-								}, field_0.name);
-							}
-							if (field_0.fieldType === "Boolean") {
-								const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
-								return /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ jsx(Label, {
-										htmlFor: `item-setting-${field_0.name}`,
-										children: label_0
-									}), /* @__PURE__ */ jsx(Switch, {
-										id: `item-setting-${field_0.name}`,
-										checked: checked_0,
-										onCheckedChange: (newValue_2) => {
-											if (!requireDraft()) return;
-											sessionDirtyRef.current = true;
-											updateRepeatableSettings.mutate({
-												id: currentItemId,
-												settings: { [field_0.name]: newValue_2 }
-											});
-										}
-									})]
-								}, field_0.name);
-							}
-							return null;
-						})]
-					}),
-					isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
-						fieldName: assetFieldName,
-						assetType,
-						currentData,
-						onFieldChange: activeFieldChangeHandler
-					}),
-					isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
-						fieldName: assetFieldName,
-						assetType,
-						currentData,
-						onFieldChange: activeFieldChangeHandler
-					}),
-					!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
-						className: "px-4 py-4",
-						children: /* @__PURE__ */ jsx(LinkFieldEditor, {
-							fieldName: linkFieldName,
-							linkValue: currentData[linkFieldName] ?? {
-								type: "external",
-								text: "",
-								href: "",
-								newTab: false
-							},
-							onSave: (fieldName_1, value_5) => {
-								activeFieldChangeHandler(fieldName_1, value_5);
-							}
-						})
-					}),
-					!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
-						schema: currentSchema,
-						data: currentData,
-						blockId: block.id,
-						itemId: currentItemId ?? void 0,
-						onFieldChange: activeFieldChangeHandler,
-						postToIframe,
-						filesMap,
-						itemsMap,
-						fieldIdPrefix,
-						autoFocusFieldName
-					}, currentItemId ?? `block-${block.id}`),
-					!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
-						className: "border-border flex items-center gap-1 border-t px-4 py-4",
-						children: [
-							canAddSibling && /* @__PURE__ */ jsxs(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "sm",
-								className: "text-muted-foreground justify-start",
-								onClick: () => {
-									if (!requireDraft()) return;
-									addSibling({ afterPosition: currentItem.position });
-								},
-								children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
-							}),
-							canRemoveCurrent && /* @__PURE__ */ jsxs(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "sm",
-								className: "text-muted-foreground justify-start",
-								onClick: () => {
-									if (!requireDraft()) return;
-									removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
-								},
-								children: [/* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" }), "Remove item"]
-							}),
-							/* @__PURE__ */ jsxs(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "sm",
-								className: "text-muted-foreground justify-start",
-								onClick: () => previewStore.send({ type: "selectParent" }),
-								children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "h-4 w-4" }), "Select parent"]
-							})
-						]
-					})
-				] })
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { PageContentSheet };