@superblocksteam/library 2.0.41-next.9 → 2.0.42-next.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { early_console_buffer_default } from "./early-console-buffer-DWTLgla0.js";
-import { CLASS_NAMES, DEFAULT_ANONYMOUS_SOURCE_ID, DevTools, EventFlow, GLOBAL_SCOPE_ID, LazyFunction, NavigationEvent, Prop, PropsPanelCategory, RecordProp, Section, VALIDATORS, addNewPromise, colors, createInternalPropsList, createManagedPropsList, createPropertiesPanelDefinition, editorBridge, generateId, getEditStore, getName, iframeMessageHandler, isEditMode, isEmbeddedBySuperblocksFirstParty, isLocalLink, isName, isNameEqual, navigation, rejectById, resolveById, root_store_default, run_event_handlers_default, sendNotification, startEditorSync, system_error_default } from "./root-store-D4uiJaOf.js";
+import { CLASS_NAMES, DEFAULT_ANONYMOUS_SOURCE_ID, DevTools, EventFlow, GLOBAL_SCOPE_ID, LazyFunction, NavigationEvent, Prop, PropsPanelCategory, RecordProp, Section, VALIDATORS, addNewPromise, colors, createInternalPropsList, createManagedPropsList, createPropertiesPanelDefinition, editorBridge, generateId, getEditStore, getName, iframeMessageHandler, isEditMode, isEmbeddedBySuperblocksFirstParty, isLocalLink, isName, isNameEqual, navigation, rejectById, resolveById, root_store_default, run_event_handlers_default, sendNotification, startEditorSync, system_error_default } from "./root-store-mvrXQD3h.js";
 import "./utils-CCBWAYIM.js";
 import { AiContextMode, AiGenerationState, BindingMetaSymbol, SbEntityType, StateVarPersistence, StateVarPersistence as StateVarPersistence$1, ThemeMode, TriggerStepType, ViteMessageKind, isValidStepDef, sbEntitySymbol } from "@superblocksteam/library-shared/types";
 import _, { get, isEmpty, isEqual, isNumber, isObject, merge, set, throttle } from "lodash";
@@ -7,7 +7,7 @@ import * as React$1 from "react";
 import React, { Component, Suspense, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Dim, Dim as Dim$1, INSTANCE_ID_ATTRIBUTE, INSTANCE_ID_ATTRIBUTE as INSTANCE_ID_ATTRIBUTE$1, NATIVE_COMPONENT_TYPES, NO_CONTENT_ATTRIBUTE, NO_CONTENT_ATTRIBUTE as NO_CONTENT_ATTRIBUTE$1, PAGE_COMPONENT_TYPE, PROCESSED_TRANSACTIONS_ATTRIBUTE, Property, Property as Property$1, ROOT_WIDGET_ATTRIBUTE, SB, SB as SB$1, SOURCE_ID_ATTRIBUTE, WIDGET_INDEX_WITHIN_PARENT, WIDGET_PARENT_INSTANCE_ID_ATTRIBUTE, generateSourceId, getBindingIdentifier, getRuntimeComputedExpression, getStableScopeId, isBindingEqual, isBindingString, isDimension, isEntityWithBindingIdentifier, isPropertyInfo, predictableNameGenerator, withBindingIdentifier } from "@superblocksteam/library-shared";
+import { Dim, Dim as Dim$1, INSTANCE_ID_ATTRIBUTE, INSTANCE_ID_ATTRIBUTE as INSTANCE_ID_ATTRIBUTE$1, NATIVE_COMPONENT_TYPES, NO_CONTENT_ATTRIBUTE, NO_CONTENT_ATTRIBUTE as NO_CONTENT_ATTRIBUTE$1, PAGE_COMPONENT_TYPE, PROCESSED_TRANSACTIONS_ATTRIBUTE, Property, Property as Property$1, ROOT_WIDGET_ATTRIBUTE, SB, SB as SB$1, SOURCE_ID_ATTRIBUTE, WIDGET_DISABLE_DND, WIDGET_INDEX_WITHIN_PARENT, WIDGET_PARENT_INSTANCE_ID_ATTRIBUTE, generateSourceId, getBindingIdentifier, getRuntimeComputedExpression, getStableScopeId, isBindingEqual, isBindingString, isDimension, isEntityWithBindingIdentifier, isPropertyInfo, predictableNameGenerator, withBindingIdentifier } from "@superblocksteam/library-shared";
 import { action, autorun, computed as computed$1, isObservable, makeAutoObservable, makeObservable, observable, reaction, runInAction, toJS, when } from "mobx";
 import { Link, Outlet, UNSAFE_DataRouterContext, generatePath, generatePath as generatePath$1, useLocation, useNavigate, useParams, useRouteError } from "react-router";
 import { ISocketWithClientAuth, OBS_TAG_APPLICATION_ID, connectWebSocket, createISocketClient } from "@superblocksteam/shared";
@@ -15,8 +15,8 @@ import { trace } from "@opentelemetry/api";
 import { observer } from "mobx-react-lite";
 import { compile, middleware, prefixer, serialize, stringify } from "stylis";
 import polyfill from "@oddbird/css-anchor-positioning/fn";
-import * as Popover from "@radix-ui/react-popover";
 import { DndContext, DragOverlay, PointerSensor, rectIntersection, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import * as Popover from "@radix-ui/react-popover";
 import { snapCenterToCursor } from "@dnd-kit/modifiers";
 import { Root, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
 import tinycolor from "tinycolor2";
@@ -89,7 +89,8 @@ const PASSTHROUGH_KEYS = [
 	ROOT_WIDGET_ATTRIBUTE,
 	INSTANCE_ID_ATTRIBUTE$1,
 	WIDGET_PARENT_INSTANCE_ID_ATTRIBUTE,
-	WIDGET_INDEX_WITHIN_PARENT
+	WIDGET_INDEX_WITHIN_PARENT,
+	WIDGET_DISABLE_DND
 ];
 const usePassthroughProps = (props) => {
 	const passThroughItems = PASSTHROUGH_KEYS.map((key) => props[key]);
@@ -2193,6 +2194,40 @@ const InternalContainer = (props) => {
 	});
 };
 
+//#endregion
+//#region src/lib/internal-details/internal-components/spinner.tsx
+const Spinner = styled.span`
+  width: 50px;
+  height: 50px;
+  border: 4px solid #e0e1e5;
+  border-bottom-color: #8c95a1;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 0.5s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const FullPageSpinner = () => {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			height: "100svh",
+			width: "100%"
+		},
+		children: /* @__PURE__ */ jsx(Spinner, {})
+	});
+};
+
 //#endregion
 //#region src/lib/internal-details/css-constants.ts
 const CSS_CLASSES = {
@@ -2200,6 +2235,98 @@ const CSS_CLASSES = {
 	ANCHOR_NAME: "sb-anchor-name"
 };
 
+//#endregion
+//#region src/edit-mode/dnd/hooks/use-component-draggable.ts
+function useComponentDraggable({ instanceId, disableDrag }) {
+	return useDraggable({
+		id: instanceId,
+		disabled: disableDrag,
+		data: { instanceId }
+	});
+}
+
+//#endregion
+//#region src/edit-mode/dnd/use-draggable-widget.ts
+function useDraggableWidget(props) {
+	const editStore = getEditStore();
+	const disableDrag = props.disableDrag || editStore.ui.dnd.isDraggingNewComponent;
+	const specificWidgetDragDisabled = !editStore.ui.dnd.canDragWidget(props.instanceId);
+	const { setNodeRef, isDragging, listeners, attributes } = useComponentDraggable({
+		instanceId: props.instanceId,
+		disableDrag: disableDrag ?? false
+	});
+	const onPointerDown = useCallback((e) => {
+		if (e.target instanceof HTMLElement && e.target.dataset.ignoreDnd) return;
+		if (specificWidgetDragDisabled) e.stopPropagation();
+		else listeners?.onPointerDown(e);
+	}, [specificWidgetDragDisabled, listeners]);
+	const onPointerMove = useCallback((e) => {
+		if (specificWidgetDragDisabled) e.stopPropagation();
+		else listeners?.onPointerMove(e);
+	}, [specificWidgetDragDisabled, listeners]);
+	return useMemo(() => {
+		return {
+			...listeners,
+			...attributes,
+			className: "sb-draggable-wrapper",
+			"data-is-dragged": isDragging,
+			onPointerDown,
+			onPointerMove,
+			setNodeRef
+		};
+	}, [
+		listeners,
+		attributes,
+		isDragging,
+		onPointerDown,
+		onPointerMove,
+		setNodeRef
+	]);
+}
+
+//#endregion
+//#region src/lib/internal-details/draggable-context-provider.tsx
+const DraggablePropsContext = createContext({
+	instanceId: void 0,
+	props: {
+		className: void 0,
+		ref: null
+	}
+});
+const DraggablePropsProvider = ({ identifier, disableDrag, children }) => {
+	const draggableWidgetProps = useDraggableWidget({
+		instanceId: identifier.instanceId,
+		disableDrag
+	});
+	const setNodeRef = draggableWidgetProps.setNodeRef;
+	const handleRef = useCallback((el) => {
+		setNodeRef(el);
+	}, [setNodeRef]);
+	const value = useMemo(() => {
+		return {
+			instanceId: identifier.instanceId,
+			props: {
+				...draggableWidgetProps,
+				ref: handleRef
+			}
+		};
+	}, [
+		draggableWidgetProps,
+		handleRef,
+		identifier.instanceId
+	]);
+	return /* @__PURE__ */ jsx(DraggablePropsContext.Provider, {
+		value,
+		children
+	});
+};
+const EMPTY_PROPS = {};
+const useMyDraggableProps = (instanceId) => {
+	const contextValue = useContext(DraggablePropsContext);
+	if (contextValue.instanceId !== instanceId) return EMPTY_PROPS;
+	return contextValue.props;
+};
+
 //#endregion
 //#region src/lib/user-facing/assets/icons/close.svg
 var _path$4;
@@ -3172,6 +3299,33 @@ const WrappedReactiveComponent = (props) => {
 };
 var reactive_component_default = WrappedReactiveComponent;
 
+//#endregion
+//#region src/lib/internal-details/editor-reactive-component.tsx
+const mergeProps = (props1, props2) => {
+	const mergedClassName = props1.className && props2.className ? `${props1.className} ${props2.className}` : props1.className || props2.className;
+	const mergedStyle = {
+		...props1.style,
+		...props2.style
+	};
+	return {
+		...props1,
+		...props2,
+		style: mergedStyle,
+		className: mergedClassName
+	};
+};
+const EditorReactiveComponent = (props) => {
+	const { editorProps,...restProps } = props;
+	const myDraggableProps = useMyDraggableProps(props.identifier.instanceId);
+	const mergedEditorProps = useMemo(() => {
+		return mergeProps(editorProps ?? {}, myDraggableProps);
+	}, [editorProps, myDraggableProps]);
+	return /* @__PURE__ */ jsx(reactive_component_default, {
+		...restProps,
+		editorProps: mergedEditorProps
+	});
+};
+
 //#endregion
 //#region src/lib/utils/is-component-type-detached.ts
 function isComponentTypeDetached(componentType) {
@@ -3253,14 +3407,19 @@ const getWidgetNode = (instanceId) => {
 	const type = root_store_default.nameManager.getExistingIdentifier(instanceId)?.type;
 	return document?.querySelector(`[data-sb-selector="${getEditWrapperIdWithType(instanceId, type)}"]`);
 };
-const doesInteractionLayerContainInstance = (possibleParent, possibleChild) => {
+const doesInteractionLayerContainInstance = (possibleParent, possibleChild, handleNewlyCreatedComponents = false) => {
 	if (!possibleParent || !possibleChild) return false;
 	const editStore = getEditStore();
 	const parentMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(possibleParent);
 	const childMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(possibleChild);
+	if (!childMeta?.interactionLayerInstanceId && handleNewlyCreatedComponents) return true;
 	if (editStore.interactionLayerManager.interactionLayerInstanceIds.has(possibleParent)) return possibleChild === possibleParent || childMeta?.interactionLayerInstanceId === possibleParent;
 	return parentMeta?.interactionLayerInstanceId === childMeta?.interactionLayerInstanceId;
 };
+const isPage = (instanceId) => {
+	if (!instanceId) return false;
+	return getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(instanceId)?.type === NATIVE_COMPONENT_TYPES.Page;
+};
 
 //#endregion
 //#region src/edit-mode/dnd/hooks/use-widget-node-ref.ts
@@ -3399,45 +3558,6 @@ const DroppableWidget = observer((props) => {
 });
 var droppable_widget_default = DroppableWidget;
 
-//#endregion
-//#region src/edit-mode/dnd/hooks/use-component-draggable.ts
-function useComponentDraggable({ instanceId, disableDrag }) {
-	return useDraggable({
-		id: instanceId,
-		disabled: disableDrag,
-		data: { instanceId }
-	});
-}
-
-//#endregion
-//#region src/edit-mode/dnd/use-draggable-widget.ts
-function useDraggableWidget(props) {
-	const editStore = getEditStore();
-	const disableDrag = props.disableDrag || editStore.ui.dnd.isDraggingNewComponent;
-	const specificWidgetDragDisabled = !editStore.ui.dnd.canDragWidget(props.instanceId);
-	const { setNodeRef, isDragging, listeners, attributes } = useComponentDraggable({
-		instanceId: props.instanceId,
-		disableDrag: disableDrag ?? false
-	});
-	const onPointerDown = useCallback((e) => {
-		if (specificWidgetDragDisabled) e.stopPropagation();
-		else listeners?.onPointerDown(e);
-	}, [specificWidgetDragDisabled, listeners]);
-	const onPointerMove = useCallback((e) => {
-		if (specificWidgetDragDisabled) e.stopPropagation();
-		else listeners?.onPointerMove(e);
-	}, [specificWidgetDragDisabled, listeners]);
-	return {
-		...listeners,
-		...attributes,
-		className: "sb-draggable-wrapper",
-		"data-is-dragged": isDragging,
-		onPointerDown,
-		onPointerMove,
-		setNodeRef
-	};
-}
-
 //#endregion
 //#region src/edit-mode/hooks/use-right-click-menu.ts
 function useRightClickMenu({ sourceId }) {
@@ -4561,18 +4681,6 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	});
 	const isDroppable = isEntityDroppable({ type: props.type });
 	const disableDrag = !isDraggable || !isContentDraggable(props.type);
-	const draggableWidgetProps = useDraggableWidget({
-		instanceId: props.identifier.instanceId,
-		disableDrag
-	});
-	const { setDraggableNodeRef, draggableClassName, draggableProps } = useMemo(() => {
-		const { setNodeRef: setDraggableNodeRef$1, className: draggableClassName$1,...draggableProps$1 } = draggableWidgetProps;
-		return {
-			setDraggableNodeRef: setDraggableNodeRef$1,
-			draggableClassName: draggableClassName$1,
-			draggableProps: draggableProps$1
-		};
-	}, [draggableWidgetProps]);
 	const { onContextMenu } = useRightClickMenu({ sourceId: props.identifier.sourceId });
 	const showVisibilityBackground = props.widgetProps.isVisible === false && !editStore.ui.getSelectedSourceIds().includes(props.identifier.sourceId);
 	const handleClick = useCallback((ev) => {
@@ -4592,13 +4700,10 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		stopPropagation();
 	}, [props.identifier.sourceId, props.identifier.instanceId]);
 	const [dropTargetElem, setDropTargetElem] = useState(null);
-	const handleRef = useCallback((el) => {
-		setDraggableNodeRef(el);
-	}, [setDraggableNodeRef]);
 	const isEmpty$1 = React.Children.count(children) === 0;
 	const editorProps = useMemo(() => {
 		const testProps = identifier.name.isAnonymous ? {} : { "data-test": `component-${identifier.name.value}` };
-		const componentClassName = `${CSS_CLASSES.ANCHOR_NAME} ${draggableClassName}`;
+		const componentClassName = `${CSS_CLASSES.ANCHOR_NAME}`;
 		const componentStyle = createAnchorNameStyle({ instanceId: props.identifier.instanceId });
 		return {
 			[INSTANCE_ID_ATTRIBUTE$1]: identifier.instanceId,
@@ -4608,23 +4713,18 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 			"data-sb-selector": getEditWrapperId(props.identifier.instanceId),
 			onClick: handleClick,
 			onContextMenu,
-			ref: handleRef,
-			...testProps,
-			...draggableProps
+			...testProps
 		};
 	}, [
 		identifier,
-		draggableProps,
-		draggableClassName,
 		handleClick,
-		handleRef,
 		onContextMenu,
 		props.identifier.instanceId,
 		isEmpty$1
 	]);
 	const node = /* @__PURE__ */ jsx(ParentIdentifierProvider, {
 		identifier,
-		children: /* @__PURE__ */ jsxs(reactive_component_default, {
+		children: /* @__PURE__ */ jsxs(EditorReactiveComponent, {
 			Component: props.component,
 			identifier,
 			widgetProps: props.widgetProps,
@@ -4646,6 +4746,11 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		widgetProps: props.widgetProps,
 		children: node
 	}) : node;
+	if (isDraggable) content = /* @__PURE__ */ jsx(DraggablePropsProvider, {
+		identifier: props.identifier,
+		disableDrag,
+		children: content
+	});
 	if (isDroppable) content = /* @__PURE__ */ jsx(droppable_widget_default, {
 		instanceId: props.identifier.instanceId,
 		dropTargetElem,
@@ -5949,7 +6054,10 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, onClose
 			clientImport: [async (payload) => {
 				const { importPath } = payload;
 				try {
-					await import(`${importPath}?v=${Date.now()}`);
+					await import(
+						/* @vite-ignore */
+						`${importPath}?v=${Date.now()}`
+);
 					return;
 				} catch (error) {
 					const err = error;
@@ -6252,6 +6360,18 @@ const propertiesDefinition$4 = {
 
 //#endregion
 //#region src/lib/user-facing/components/page/index.tsx
+const SpinnerFadeIn = styled.div`
+  display: contents;
+  animation: fadein 0.2s ease-in-out forwards;
+  @keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
 const Page = registerComponentInternal(NATIVE_COMPONENT_TYPES.Page, { propertiesDefinition: propertiesDefinition$4 }, (props) => {
 	const { name, isAnonymous, style, onLoad, editorProps,...other } = props;
 	const { scopeId } = useScope();
@@ -6260,6 +6380,10 @@ const Page = registerComponentInternal(NATIVE_COMPONENT_TYPES.Page, { properties
 			onLoad?.();
 		});
 	}, [onLoad, scopeId]);
+	const [initializing, setInitializing] = useState(true);
+	useEffect(() => {
+		setInitializing(false);
+	}, []);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			height: "100%",
@@ -6275,7 +6399,7 @@ const Page = registerComponentInternal(NATIVE_COMPONENT_TYPES.Page, { properties
 				...style
 			},
 			...other,
-			children: props.children
+			children: initializing ? /* @__PURE__ */ jsx(SpinnerFadeIn, { children: /* @__PURE__ */ jsx(FullPageSpinner, {}) }) : props.children
 		})
 	});
 }).editorConfig(editorConfig$1);
@@ -6389,11 +6513,11 @@ const propertiesDefinition$2 = {
 		})
 	}),
 	functions: Section.category(PropsPanelCategory.Functions).children({
-		set: Prop.function(function(_s, value) {
+		set: Prop.function(function(value) {
 			const widget = this;
 			widget.value = value;
 		}),
-		reset: Prop.function(function(_s) {
+		reset: Prop.function(function() {
 			const widget = this;
 			widget.value = widget.defaultValue;
 		})
@@ -6496,10 +6620,10 @@ var SuspensibleAPI = class {
 	get error() {
 		return this._error;
 	}
-	async run(options, ...args) {
+	async run(options) {
 		this._isLoading = true;
 		this._error = void 0;
-		this._promise = this._runFn(options, ...args).then(action((data) => {
+		this._promise = this._runFn(options).then(action((data) => {
 			this._response = data;
 			this._isLoading = false;
 			return data;
@@ -6540,10 +6664,10 @@ const propertiesDefinition = {
 		}).readable()
 	}),
 	functions: Section.category("Derived").children({
-		run: Prop.function(async function(_s, traceHeaders) {
+		run: Prop.function(async function(args) {
 			const api = this;
 			try {
-				const result = await api._suspensibleApi.run(traceHeaders);
+				const result = await api._suspensibleApi.run(args);
 				await api.onSuccess?.();
 				return result;
 			} catch (error) {
@@ -6551,7 +6675,7 @@ const propertiesDefinition = {
 				throw error;
 			}
 		}),
-		cancel: Prop.function(async function(_s) {
+		cancel: Prop.function(async function() {
 			await this._suspensibleApi.cancel();
 		})
 	}),
@@ -6559,7 +6683,7 @@ const propertiesDefinition = {
 		const api = this;
 		return new SuspensibleAPI({
 			runFn: async (options) => {
-				const result = await root_store_default.apis.runApi(api.name, api.scopeId, options?.traceHeaders).catch((err) => ({
+				const result = await root_store_default.apis.runApi(api.name, api.scopeId, options).catch((err) => ({
 					error: err,
 					data: null
 				}));
@@ -6584,40 +6708,6 @@ const SbApi = registerEntity(SbEntityType.API, { propertiesDefinition }, ({ onSu
 	};
 });
 
-//#endregion
-//#region src/lib/internal-details/internal-components/spinner.tsx
-const Spinner = styled.span`
-  width: 50px;
-  height: 50px;
-  border: 4px solid #e0e1e5;
-  border-bottom-color: #8c95a1;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 0.5s linear infinite;
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-const FullPageSpinner = () => {
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			display: "flex",
-			justifyContent: "center",
-			alignItems: "center",
-			height: "100svh",
-			width: "100%"
-		},
-		children: /* @__PURE__ */ jsx(Spinner, {})
-	});
-};
-
 //#endregion
 //#region src/lib/internal-details/lib/features/injected-features.ts
 function useGetCurrentUserQuery() {
@@ -6979,6 +7069,13 @@ const useHandleDnDEvents = () => {
 			const editStore = getEditStore();
 			let possibleNewComponentId;
 			try {
+				const activeData = event.active?.data.current;
+				if (activeData?.instanceId) {
+					if (!!editStore.runtimeEntitiesManager.getEditorWidgetMeta(activeData.instanceId)?.props?.[WIDGET_DISABLE_DND]) {
+						editorBridge.sendNotification("error", "This component can't be moved because it's defined in code. Ask Clark to move it.");
+						return;
+					}
+				}
 				if (!editStore.ui.dnd.isProspectiveDropValid) {
 					editorBridge.sendNotification("error", "You cannot drop a component here.");
 					return;
@@ -10271,7 +10368,7 @@ function useDialogEditing(props) {
 		if (isEditing && instanceId) {
 			if (prevIsOpenRef.current !== isOpen && !(prevIsOpenRef.current === void 0 && isOpen === false)) return;
 			if (isOpen) {
-				if (selectedInstanceId && selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {
+				if (selectedInstanceId && selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId, true) && !isPage(selectedInstanceId)) update((entity) => {
 					set(entity, isOpenPropertyName, false);
 				});
 			} else if (selectedInstanceId === instanceId || selectedInstanceId && doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {