camox 0.32.0 → 0.33.0

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

@@ -0,0 +1,563 @@
+import { blockMutations, blockQueries, fileQueries, repeatableItemMutations } from "../../../lib/queries.js";
+import { trackClientEvent } from "../../../lib/telemetry-client.js";
+import { cn } from "../../../lib/utils.js";
+import { previewStore, selectionBlockId, selectionField, selectionItemId } from "../previewStore.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 { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
+import { Spinner } from "@camox/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { Switch } from "@camox/ui/switch";
+
+//#region src/features/preview/components/PageEditorSidebar.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 PageEditorSidebar = () => {
+	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 selection = useSelector(previewStore, (state) => state.context.selection);
+	const iframeElement = useSelector(previewStore, (state_0) => state_0.context.iframeElement);
+	const isReadOnly = useSelector(previewStore, (state_1) => state_1.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 trackedBlockIdRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!block) {
+			trackedBlockIdRef.current = null;
+			return;
+		}
+		if (trackedBlockIdRef.current === block.id) return;
+		trackedBlockIdRef.current = block.id;
+		sessionDirtyRef.current = false;
+		trackClientEvent("page_editor_sidebar_opened", { blockType: block.type });
+	}, [block]);
+	React.useEffect(() => {
+		if (!block) return;
+		return () => {
+			if (!sessionDirtyRef.current) return;
+			trackClientEvent("block_edited", {
+				via: "page-editor-sidebar",
+				blockType: block.type
+			});
+			sessionDirtyRef.current = false;
+		};
+	}, [block]);
+	const fieldIdPrefix = React.useId();
+	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 ancestorChain = React.useMemo(() => currentItemId != null ? buildAncestorChain(currentItemId, itemsMap) : [], [currentItemId, itemsMap]);
+	if (!block || !blockDef || !currentSchema) return /* @__PURE__ */ jsxs("div", {
+		className: "text-muted-foreground flex flex-1 items-center justify-center px-2 text-sm",
+		children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-3.5" }), " Loading block..."]
+	});
+	const fieldHasOwnView = fieldInfo ? fieldTypesDictionary[fieldInfo.fieldType].hasOwnView : false;
+	const [pageNavigationItem, ...contentNavigationItems] = [
+		{
+			key: "page",
+			label: "Page",
+			isCurrent: false,
+			onClick: () => previewStore.send({ type: "clearSelection" })
+		},
+		{
+			key: "block",
+			label: block.summary || blockDef._internal.title,
+			isCurrent: ancestorChain.length === 0 && !fieldHasOwnView,
+			onClick: () => previewStore.send({
+				type: "setFocusedBlock",
+				blockId: block.id
+			})
+		},
+		...ancestorChain.map((ancestor) => ({
+			key: `item-${ancestor.id}`,
+			label: ancestor.summary || formatFieldName(ancestor.fieldName),
+			isCurrent: ancestor.id === currentItemId && !fieldHasOwnView && ancestor.id === ancestorChain[ancestorChain.length - 1]?.id,
+			onClick: () => previewStore.send({
+				type: "selectItem",
+				blockId: block.id,
+				itemId: ancestor.id
+			})
+		})),
+		...fieldHasOwnView && fieldInfo ? [{
+			key: `field-${fieldInfo.fieldName}`,
+			label: currentSchema?.properties?.[fieldInfo.fieldName]?.title ?? formatFieldName(fieldInfo.fieldName),
+			isCurrent: true,
+			onClick: void 0
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "border-border flex flex-col gap-1.5 border-b px-2 py-4",
+		children: /* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Selection path",
+			className: "text-muted-foreground text-sm",
+			children: [pageNavigationItem?.onClick ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "hover:text-foreground block min-w-0 cursor-pointer truncate py-0.5 text-left transition-colors",
+				onClick: pageNavigationItem.onClick,
+				children: pageNavigationItem.label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-foreground block min-w-0 truncate py-0.5 font-medium",
+				children: pageNavigationItem?.label
+			}), /* @__PURE__ */ jsx("ol", {
+				className: "flex flex-col",
+				children: contentNavigationItems.map((item, index) => {
+					return /* @__PURE__ */ jsxs("li", {
+						className: "relative min-w-0 pl-6",
+						children: [/* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
+							className: "text-muted-foreground pointer-events-none absolute top-0 left-0 h-full w-4",
+							fill: "none",
+							preserveAspectRatio: "none",
+							viewBox: "0 0 16 24",
+							children: /* @__PURE__ */ jsx("path", {
+								d: index < contentNavigationItems.length - 1 ? "M1 0 V24 M1 5 Q1 12 8 12 H16" : "M1 0 V5 Q1 12 8 12 H16",
+								stroke: "currentColor",
+								strokeLinecap: "square",
+								strokeWidth: "1.25",
+								vectorEffect: "non-scaling-stroke"
+							})
+						}), item.onClick ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: cn("hover:text-foreground relative -top-px block min-w-0 cursor-pointer truncate py-0.5 text-left transition-colors", item.isCurrent && "text-foreground font-medium"),
+							onClick: item.onClick,
+							children: item.label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-foreground relative -top-px block min-w-0 truncate py-0.5 font-medium",
+							children: item.label
+						})]
+					}, item.key);
+				})
+			})]
+		})
+	}), /* @__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-2 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-2 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-2 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
+				}, currentItemId ?? `block-${block.id}`),
+				!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
+					className: "border-border flex items-center gap-1 border-t px-2 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 { PageEditorSidebar };