camox 0.32.0 → 0.33.0

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

@@ -1,20 +1,17 @@
-import { previewStore } from "../previewStore.js";
-import { useIsPreviewSheetOpen } from "./PreviewSideSheet.js";
-import { cn, formatShortcut } from "../../../lib/utils.js";
+import { cn } from "../../../lib/utils.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
 import { FORMAT_FLAGS } from "../../../core/lib/modifierFormats.js";
 import { TextLinkPopover } from "../../../core/components/lexical/TextLinkPopover.js";
-import { useCurrentItemActions } from "./useRepeatableItemActions.js";
-import { formatFieldName } from "./ItemFieldsEditor.js";
 import { c } from "react/compiler-runtime";
-import { Kbd } from "@camox/ui/kbd";
 import { useSelector } from "@xstate/store-react";
 import * as React from "react";
+import { Kbd } from "@camox/ui/kbd";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
+import { Bold, Italic } from "lucide-react";
 import { ButtonGroup } from "@camox/ui/button-group";
 import * as Tooltip$1 from "@camox/ui/tooltip";
-import { Bold, CircleMinus, CirclePlus, Italic } from "lucide-react";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 
@@ -33,14 +30,12 @@ const FORMAT_BUTTONS = [{
 	shortcut: "⌘ I"
 }];
 const FieldToolbar = () => {
-	const $ = c(38);
-	if ($[0] !== "8a2b2d9ef81221d4535d05947c07828197adc9a5cdfe31ce4861c6c95ece3e43") {
-		for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8a2b2d9ef81221d4535d05947c07828197adc9a5cdfe31ce4861c6c95ece3e43";
+	const $ = c(28);
+	if ($[0] !== "bee72c888eb7fec22d667ab73801a7ed4c0292a3149ebb46febb13e2bf2d9bc3") {
+		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "bee72c888eb7fec22d667ab73801a7ed4c0292a3149ebb46febb13e2bf2d9bc3";
 	}
 	const iframeElement = useSelector(previewStore, _temp);
-	const selection = useSelector(previewStore, _temp2);
-	const isAnySideSheetOpen = useIsPreviewSheetOpen();
 	const [hasSelection, setHasSelection] = React.useState(false);
 	const [activeFormats, setActiveFormats] = React.useState(0);
 	const [linkTarget, setLinkTarget] = React.useState(null);
@@ -121,81 +116,19 @@ const FieldToolbar = () => {
 		$[9] = t5;
 	} else t5 = $[9];
 	const unlinkText = t5;
-	const isOnField = selection?.type === "block-field" || selection?.type === "item-field";
-	const isOnItemField = selection?.type === "item-field";
-	const isVisible = isOnField && !isAnySideSheetOpen;
-	const { canAdd, addItem, canRemove, removeItem, currentItem } = useCurrentItemActions(isOnItemField ? selection.blockId : null, isOnItemField ? selection.itemId : null);
-	let t6;
-	if ($[10] !== selection) {
-		t6 = () => {
-			if (!selection) return;
-			previewStore.send({
-				type: "openBlockContentSheet",
-				blockId: selection.blockId
-			});
-		};
-		$[10] = selection;
-		$[11] = t6;
-	} else t6 = $[11];
-	const handleEditInForm = t6;
-	const handleToolbarMouseDown = _temp3;
-	const t7 = isVisible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2";
+	const isVisible = hasSelection || linkPopoverOpen;
+	const handleToolbarMouseDown = _temp2;
+	const t6 = isVisible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2";
+	let t7;
+	if ($[10] !== t6) {
+		t7 = cn("bottom-17 gap-2", t6);
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
 	let t8;
-	if ($[12] !== t7) {
-		t8 = cn("bottom-17 gap-2", t7);
-		$[12] = t7;
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = formatShortcut({
-			key: "j",
-			withAlt: true
-		});
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== handleEditInForm) {
-		t10 = /* @__PURE__ */ jsxs(Button, {
-			variant: "outline",
-			onClick: handleEditInForm,
-			children: ["Edit in form", t9]
-		});
-		$[15] = handleEditInForm;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== addItem || $[18] !== canAdd || $[19] !== canRemove || $[20] !== currentItem || $[21] !== isOnItemField || $[22] !== removeItem) {
-		t11 = isOnItemField && currentItem && (canAdd || canRemove) && /* @__PURE__ */ jsx(Tooltip$1.TooltipProvider, {
-			delay: 0,
-			children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [canAdd && /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-				render: /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "icon",
-					onClick: () => addItem({ afterPosition: currentItem.position })
-				}),
-				children: /* @__PURE__ */ jsx(CirclePlus, {})
-			}), /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: ["Add item to ", formatFieldName(currentItem.fieldName)] })] }), canRemove && /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-				render: /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "icon",
-					onClick: () => removeItem(currentItem.id, { onSuccess: _temp4 })
-				}),
-				children: /* @__PURE__ */ jsx(CircleMinus, {})
-			}), /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: ["Remove item from ", formatFieldName(currentItem.fieldName)] })] })] })
-		});
-		$[17] = addItem;
-		$[18] = canAdd;
-		$[19] = canRemove;
-		$[20] = currentItem;
-		$[21] = isOnItemField;
-		$[22] = removeItem;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== activeFormats || $[25] !== hasSelection || $[26] !== linkPopoverOpen || $[27] !== linkTarget || $[28] !== selectedText || $[29] !== sendFormat || $[30] !== sendTextLink || $[31] !== unlinkText) {
-		t12 = hasSelection && /* @__PURE__ */ jsxs(ButtonGroup, { children: [FORMAT_BUTTONS.map((t13) => {
-			const { key, flag, icon: Icon, label, shortcut } = t13;
+	if ($[12] !== activeFormats || $[13] !== sendFormat) {
+		t8 = FORMAT_BUTTONS.map((t9) => {
+			const { key, flag, icon: Icon, label, shortcut } = t9;
 			const isActive = !!(activeFormats & flag);
 			return /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(Toggle, {
@@ -210,55 +143,62 @@ const FieldToolbar = () => {
 				" ",
 				/* @__PURE__ */ jsx(Kbd, { children: shortcut })
 			] })] }, key);
-		}), /* @__PURE__ */ jsx(TextLinkPopover, {
+		});
+		$[12] = activeFormats;
+		$[13] = sendFormat;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "icon",
+			"aria-label": "Add link"
+		});
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== linkPopoverOpen || $[17] !== linkTarget || $[18] !== selectedText || $[19] !== sendTextLink || $[20] !== unlinkText) {
+		t10 = /* @__PURE__ */ jsx(TextLinkPopover, {
 			open: linkPopoverOpen,
 			onOpenChange: handleLinkPopoverOpenChange,
-			trigger: /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: "icon",
-				"aria-label": "Add link"
-			}),
+			trigger: t9,
 			text: selectedText,
 			target: linkTarget,
 			onSave: sendTextLink,
 			onUnlink: unlinkText
-		})] });
-		$[24] = activeFormats;
-		$[25] = hasSelection;
-		$[26] = linkPopoverOpen;
-		$[27] = linkTarget;
-		$[28] = selectedText;
-		$[29] = sendFormat;
-		$[30] = sendTextLink;
-		$[31] = unlinkText;
-		$[32] = t12;
-	} else t12 = $[32];
-	let t13;
-	if ($[33] !== t10 || $[34] !== t11 || $[35] !== t12 || $[36] !== t8) {
-		t13 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+		});
+		$[16] = linkPopoverOpen;
+		$[17] = linkTarget;
+		$[18] = selectedText;
+		$[19] = sendTextLink;
+		$[20] = unlinkText;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10 || $[23] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(ButtonGroup, { children: [t8, t10] });
+		$[22] = t10;
+		$[23] = t8;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t11 || $[26] !== t7) {
+		t12 = /* @__PURE__ */ jsx(FloatingToolbar, {
 			onMouseDown: handleToolbarMouseDown,
-			className: t8,
-			children: [
-				t10,
-				t11,
-				t12
-			]
+			className: t7,
+			children: t11
 		});
-		$[33] = t10;
-		$[34] = t11;
-		$[35] = t12;
-		$[36] = t8;
-		$[37] = t13;
-	} else t13 = $[37];
-	return t13;
+		$[25] = t11;
+		$[26] = t7;
+		$[27] = t12;
+	} else t12 = $[27];
+	return t12;
 };
 function _temp(state) {
 	return state.context.iframeElement;
 }
-function _temp2(state_0) {
-	return state_0.context.selection;
-}
-function _temp3(event_0) {
+function _temp2(event_0) {
 	const target_0 = event_0.target;
 	if (!(target_0 instanceof HTMLElement)) {
 		event_0.preventDefault();
@@ -267,9 +207,6 @@ function _temp3(event_0) {
 	if (target_0.closest("input, select, textarea, button, [role='combobox']")) return;
 	event_0.preventDefault();
 }
-function _temp4() {
-	return previewStore.send({ type: "selectParent" });
-}
 
 //#endregion
 export { FieldToolbar };

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

@@ -30,9 +30,9 @@ const getSchemaFieldsInOrder = (schema) => {
 };
 const DrillRow = (t0) => {
 	const $ = c(28);
-	if ($[0] !== "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d") {
+	if ($[0] !== "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d";
+		$[0] = "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b";
 	}
 	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
 	let t1;
@@ -134,12 +134,12 @@ const DrillRow = (t0) => {
 	return t7;
 };
 const ItemFieldsEditor = (t0) => {
-	const $ = c(47);
-	if ($[0] !== "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d") {
-		for (let $i = 0; $i < 47; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "10d7e880adc2a5d4d4076a1bdf35fee064c2b42cd42d45b2991c5ebaf6c4d95d";
+	const $ = c(42);
+	if ($[0] !== "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b") {
+		for (let $i = 0; $i < 42; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b";
 	}
-	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix, autoFocusFieldName } = t0;
+	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
 	let t1;
 	if ($[1] !== schema) {
 		t1 = getSchemaFieldsInOrder(schema);
@@ -168,102 +168,75 @@ const ItemFieldsEditor = (t0) => {
 	} else t3 = $[7];
 	const getFieldElementId = t3;
 	let t4;
-	if ($[8] !== autoFocusFieldName || $[9] !== fieldIdPrefix) {
-		t4 = {
-			fieldName: autoFocusFieldName,
-			prefix: fieldIdPrefix
-		};
-		$[8] = autoFocusFieldName;
-		$[9] = fieldIdPrefix;
-		$[10] = t4;
-	} else t4 = $[10];
-	const initialAutoFocusRef = React.useRef(t4);
-	let t5;
-	let t6;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = () => {
-			const { fieldName: fieldName_1, prefix } = initialAutoFocusRef.current;
-			if (!fieldName_1) return;
-			document.getElementById(`${prefix}-${fieldName_1}`)?.focus();
-		};
-		t6 = [];
-		$[11] = t5;
-		$[12] = t6;
-	} else {
-		t5 = $[11];
-		t6 = $[12];
-	}
-	React.useLayoutEffect(t5, t6);
-	let t7;
-	if ($[13] !== fields) {
-		t7 = fields.filter(_temp).map(_temp2);
-		$[13] = fields;
-		$[14] = t7;
-	} else t7 = $[14];
-	const scalarFields = t7;
+	if ($[8] !== fields) {
+		t4 = fields.filter(_temp).map(_temp2);
+		$[8] = fields;
+		$[9] = t4;
+	} else t4 = $[9];
+	const scalarFields = t4;
 	let values;
-	if ($[15] !== data || $[16] !== scalarFields) {
+	if ($[10] !== data || $[11] !== scalarFields) {
 		values = {};
-		for (const fieldName_2 of scalarFields) values[fieldName_2] = data[fieldName_2] ?? "";
-		$[15] = data;
-		$[16] = scalarFields;
-		$[17] = values;
-	} else values = $[17];
+		for (const fieldName_1 of scalarFields) values[fieldName_1] = data[fieldName_1] ?? "";
+		$[10] = data;
+		$[11] = scalarFields;
+		$[12] = values;
+	} else values = $[12];
 	const defaultValues = values;
-	let t8;
-	if ($[18] !== defaultValues) {
-		t8 = { defaultValues };
-		$[18] = defaultValues;
-		$[19] = t8;
-	} else t8 = $[19];
-	const form = useForm(t8);
-	let t10;
-	let t9;
-	if ($[20] !== defaultValues || $[21] !== form) {
-		t9 = () => {
+	let t5;
+	if ($[13] !== defaultValues) {
+		t5 = { defaultValues };
+		$[13] = defaultValues;
+		$[14] = t5;
+	} else t5 = $[14];
+	const form = useForm(t5);
+	let t6;
+	let t7;
+	if ($[15] !== defaultValues || $[16] !== form) {
+		t6 = () => {
 			form.update({ defaultValues });
 		};
-		t10 = [defaultValues, form];
-		$[20] = defaultValues;
-		$[21] = form;
-		$[22] = t10;
-		$[23] = t9;
+		t7 = [defaultValues, form];
+		$[15] = defaultValues;
+		$[16] = form;
+		$[17] = t6;
+		$[18] = t7;
 	} else {
-		t10 = $[22];
-		t9 = $[23];
+		t6 = $[17];
+		t7 = $[18];
 	}
-	React.useEffect(t9, t10);
-	let t11;
-	let t12;
-	if ($[24] !== postToIframe) {
-		t11 = () => () => {
+	React.useEffect(t6, t7);
+	let t8;
+	let t9;
+	if ($[19] !== postToIframe) {
+		t8 = () => () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 			if (focusedFieldIdRef.current) postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: focusedFieldIdRef.current
 			});
 		};
-		t12 = [postToIframe];
-		$[24] = postToIframe;
-		$[25] = t11;
-		$[26] = t12;
+		t9 = [postToIframe];
+		$[19] = postToIframe;
+		$[20] = t8;
+		$[21] = t9;
 	} else {
-		t11 = $[25];
-		t12 = $[26];
+		t8 = $[20];
+		t9 = $[21];
 	}
-	React.useEffect(t11, t12);
-	let t13;
-	let t14;
-	if ($[27] !== blockId || $[28] !== data || $[29] !== fields || $[30] !== filesMap || $[31] !== form || $[32] !== getFieldElementId || $[33] !== getFieldId || $[34] !== itemId || $[35] !== itemsMap || $[36] !== onFieldChange || $[37] !== postToIframe || $[38] !== schema) {
-		const handleScalarChange = (fieldName_3, value, fieldApi) => {
+	React.useEffect(t8, t9);
+	let t10;
+	let t11;
+	if ($[22] !== blockId || $[23] !== data || $[24] !== fields || $[25] !== filesMap || $[26] !== form || $[27] !== getFieldElementId || $[28] !== getFieldId || $[29] !== itemId || $[30] !== itemsMap || $[31] !== onFieldChange || $[32] !== postToIframe || $[33] !== schema) {
+		const handleScalarChange = (fieldName_2, value, fieldApi) => {
 			fieldApi.handleChange(value);
 			if (timerRef.current) clearTimeout(timerRef.current);
 			timerRef.current = window.setTimeout(() => {
-				onFieldChange(fieldName_3, value);
+				onFieldChange(fieldName_2, value);
 			}, 500);
 		};
-		const handleFieldFocus = (fieldName_4, fieldType) => {
-			const fieldId = getFieldId(fieldName_4);
+		const handleFieldFocus = (fieldName_3, fieldType) => {
+			const fieldId = getFieldId(fieldName_3);
 			focusedFieldIdRef.current = fieldId;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD",
@@ -273,18 +246,18 @@ const ItemFieldsEditor = (t0) => {
 				type: "selectItemField",
 				blockId,
 				itemId,
-				fieldName: fieldName_4,
+				fieldName: fieldName_3,
 				fieldType
 			});
 			else previewStore.send({
 				type: "selectBlockField",
 				blockId,
-				fieldName: fieldName_4,
+				fieldName: fieldName_3,
 				fieldType
 			});
 		};
-		const handleFieldBlur = (fieldName_5) => {
-			const fieldId_0 = getFieldId(fieldName_5);
+		const handleFieldBlur = (fieldName_4) => {
+			const fieldId_0 = getFieldId(fieldName_4);
 			focusedFieldIdRef.current = null;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
@@ -294,30 +267,30 @@ const ItemFieldsEditor = (t0) => {
 				if (!focusedFieldIdRef.current) previewStore.send({ type: "selectParent" });
 			});
 		};
-		let t15;
-		if ($[41] !== blockId || $[42] !== itemId) {
-			t15 = (fieldName_6, fieldType_0) => {
+		let t12;
+		if ($[36] !== blockId || $[37] !== itemId) {
+			t12 = (fieldName_5, fieldType_0) => {
 				if (itemId != null) previewStore.send({
 					type: "selectItemField",
 					blockId,
 					itemId,
-					fieldName: fieldName_6,
+					fieldName: fieldName_5,
 					fieldType: fieldType_0
 				});
 				else previewStore.send({
 					type: "selectBlockField",
 					blockId,
-					fieldName: fieldName_6,
+					fieldName: fieldName_5,
 					fieldType: fieldType_0
 				});
 			};
-			$[41] = blockId;
-			$[42] = itemId;
-			$[43] = t15;
-		} else t15 = $[43];
-		const drillIntoField = t15;
-		t13 = "space-y-4 px-4 py-4";
-		t14 = fields.map((field) => {
+			$[36] = blockId;
+			$[37] = itemId;
+			$[38] = t12;
+		} else t12 = $[38];
+		const drillIntoField = t12;
+		t10 = "space-y-4 px-2 py-4";
+		t11 = fields.map((field) => {
 			const label = field.label ?? formatFieldName(field.name);
 			const fieldId_1 = getFieldId(field.name);
 			if (field.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
@@ -451,35 +424,35 @@ const ItemFieldsEditor = (t0) => {
 			}
 			return null;
 		});
-		$[27] = blockId;
-		$[28] = data;
-		$[29] = fields;
-		$[30] = filesMap;
-		$[31] = form;
-		$[32] = getFieldElementId;
-		$[33] = getFieldId;
-		$[34] = itemId;
-		$[35] = itemsMap;
-		$[36] = onFieldChange;
-		$[37] = postToIframe;
-		$[38] = schema;
-		$[39] = t13;
-		$[40] = t14;
+		$[22] = blockId;
+		$[23] = data;
+		$[24] = fields;
+		$[25] = filesMap;
+		$[26] = form;
+		$[27] = getFieldElementId;
+		$[28] = getFieldId;
+		$[29] = itemId;
+		$[30] = itemsMap;
+		$[31] = onFieldChange;
+		$[32] = postToIframe;
+		$[33] = schema;
+		$[34] = t10;
+		$[35] = t11;
 	} else {
-		t13 = $[39];
-		t14 = $[40];
+		t10 = $[34];
+		t11 = $[35];
 	}
-	let t15;
-	if ($[44] !== t13 || $[45] !== t14) {
-		t15 = /* @__PURE__ */ jsx("form", {
-			className: t13,
-			children: t14
+	let t12;
+	if ($[39] !== t10 || $[40] !== t11) {
+		t12 = /* @__PURE__ */ jsx("form", {
+			className: t10,
+			children: t11
 		});
-		$[44] = t13;
-		$[45] = t14;
-		$[46] = t15;
-	} else t15 = $[46];
-	return t15;
+		$[39] = t10;
+		$[40] = t11;
+		$[41] = t12;
+	} else t12 = $[41];
+	return t12;
 };
 function _temp(f) {
 	return f.fieldType === "String" || f.fieldType === "Embed";

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

@@ -0,0 +1,64 @@
+import { previewStore } from "../previewStore.js";
+import { AddBlockSidebar } from "./AddBlockSidebar.js";
+import { PageNavigatorSidebar } from "./PageNavigatorSidebar.js";
+import { c } from "react/compiler-runtime";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/LeftSidebar.tsx
+const getLeftSidebarRoute = ({ isAddBlockSidebarOpen }) => {
+	if (isAddBlockSidebarOpen) return { type: "add-block" };
+	return { type: "page-navigator" };
+};
+const LeftSidebar = (t0) => {
+	const $ = c(12);
+	if ($[0] !== "f683caf1e19043e2a8ec108ed89c22771f4e771637dbf0249087f015011f6726") {
+		for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "f683caf1e19043e2a8ec108ed89c22771f4e771637dbf0249087f015011f6726";
+	}
+	const { page } = t0;
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp);
+	let t1;
+	if ($[1] !== isAddBlockSidebarOpen) {
+		t1 = getLeftSidebarRoute({ isAddBlockSidebarOpen });
+		$[1] = isAddBlockSidebarOpen;
+		$[2] = t1;
+	} else t1 = $[2];
+	const route = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { width: 250 };
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== route.type) {
+		t3 = route.type === "add-block" && /* @__PURE__ */ jsx(AddBlockSidebar, {});
+		$[4] = route.type;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== page || $[7] !== route.type) {
+		t4 = route.type === "page-navigator" && /* @__PURE__ */ jsx(PageNavigatorSidebar, { page });
+		$[6] = page;
+		$[7] = route.type;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("aside", {
+			className: "flex shrink-0 flex-col border-r-2",
+			style: t2,
+			children: [t3, t4]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+};
+function _temp(state) {
+	return state.context.isAddBlockSidebarOpen;
+}
+
+//#endregion
+export { LeftSidebar };

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

@@ -10,9 +10,9 @@ import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { Switch } from "@camox/ui/switch";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
+import { Switch } from "@camox/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@camox/ui/tabs";
 
 //#region src/features/preview/components/LinkFieldEditor.tsx