@superblocksteam/library 2.0.37-next.50 → 2.0.37-next.6

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-D7IuNpKE.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-OkumbU1B.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";
@@ -1241,6 +1241,20 @@ const createMemoizedClassGenerator = (generator) => {
 function getDefaultTypographies(themeVersion) {
 	return DEFAULT_TYPOGRAPHIES_BY_VERSION[themeVersion || 2];
 }
+function dimToCSS(dim, dimension, primary = true) {
+	switch (dim.mode) {
+		case "fit": return { [dimension]: "fit-content" };
+		case "fill":
+			if (!primary) return {
+				alignSelf: "stretch",
+				[dimension]: "unset"
+			};
+			return { flex: dim.value ?? 1 };
+		case "px": return { [dimension]: `${dim.value}px` };
+		case "%": return { [dimension]: `${dim.value}%` };
+		default: return {};
+	}
+}
 const Classes = {
 	minHeightZero: styleWithPrefix("sb-min-height-zero")`
     @layer components {
@@ -1267,13 +1281,7 @@ const Classes = {
       height: -webkit-fill-available;
     }
   `,
-	fitPrimaryHeight: styleWithPrefix("sb-fit-primary-height")`
-    @layer components {
-      flex-basis: auto;
-      flex-shrink: 0;
-    }
-  `,
-	fitPrimaryWidth: styleWithPrefix("sb-fit-primary-width")`
+	fitPrimary: styleWithPrefix("sb-fit-primary")`
     @layer components {
       flex-basis: auto;
     }
@@ -1402,8 +1410,7 @@ const getWidthHeightInfo = (dim, dimension, instanceId) => {
 				if (dimension === "width") return { classnames: [Classes.fitWidth] };
 				return { classnames: [Classes.fitHeight] };
 			}
-			if (primaryDimension) if (dimension === "height") return { classnames: [Classes.fitPrimaryHeight] };
-			else return { classnames: [Classes.fitPrimaryWidth] };
+			if (primaryDimension) return { classnames: [Classes.fitPrimary] };
 			if (dimension === "width") return { classnames: [Classes.fitSecondaryWidth] };
 			return { classnames: [Classes.fitSecondaryHeight] };
 		case "fill":
@@ -1433,6 +1440,9 @@ const getWidthHeightInfo = (dim, dimension, instanceId) => {
 		default: return { classnames: [] };
 	}
 };
+const getMinMaxCss = (dim, dimension) => {
+	return dim ? dim.mode === "fill" ? { [dimension]: "100%" } : dimToCSS(dim, dimension) : {};
+};
 
 //#endregion
 //#region src/lib/user-facing/properties-panel/mixins/appearance-properties.ts
@@ -1508,11 +1518,74 @@ const borderRadius = (propertiesPanelConfig = {}) => {
 
 //#endregion
 //#region src/lib/user-facing/properties-panel/mixins/layout-section.ts
+const getSizeProp = ({ label, controlType, defaultValue, defaultOnAdd, isVisible }) => {
+	let sizeProp = Prop.dimension().readAndWrite().propertiesPanel({
+		label,
+		controlType
+	});
+	if (defaultValue !== void 0 || defaultOnAdd !== void 0) {
+		sizeProp = sizeProp.propertiesPanel({
+			label,
+			controlType,
+			isRemovable: true,
+			visibility: "SHOW_NAME",
+			defaultOnAdd,
+			isVisible
+		});
+		if (defaultValue) sizeProp = sizeProp.default(defaultValue);
+	}
+	return sizeProp.docs({ description: `Controls the ${label.toLowerCase()} dimension of the component` });
+};
 /**
 * Sets width default to `fill` if no default width config provided.
 * Sets height default to `fit` if no default height config provided.
 */
-const size = ({ defaults, showWidth, showHeight } = {}) => {
+const size = ({ defaults, defaultsOnAdd = {
+	minWidth: Dim$1.px(0),
+	minHeight: Dim$1.px(0),
+	maxWidth: Dim$1.px(200),
+	maxHeight: Dim$1.px(120)
+}, hasMinWidth = true, hasMaxWidth = true, hasMinHeight = true, hasMaxHeight = true, showMinWidth, showMinHeight, showMaxWidth, showMaxHeight, showWidth, showHeight } = {}) => {
+	const minWidthProperty = getSizeProp({
+		label: "Min width",
+		controlType: "WIDTH_DROPDOWN",
+		defaultValue: defaults?.minWidth,
+		defaultOnAdd: defaultsOnAdd?.minWidth,
+		isVisible: function(s) {
+			const hideWidth = this?.width?.mode === "px";
+			return Boolean((showMinWidth ? showMinWidth?.call(this, s) : true) && !hideWidth);
+		}
+	});
+	const maxWidthProperty = getSizeProp({
+		label: "Max width",
+		controlType: "WIDTH_DROPDOWN",
+		defaultValue: defaults?.maxWidth,
+		defaultOnAdd: defaultsOnAdd?.maxWidth,
+		isVisible: function(s) {
+			const hideWidth = this?.width?.mode === "px";
+			return Boolean((showMaxWidth ? showMaxWidth?.call(this, s) : true) && !hideWidth);
+		}
+	});
+	const minHeightProperty = getSizeProp({
+		label: "Min height",
+		controlType: "HEIGHT_DROPDOWN",
+		defaultValue: defaults?.minHeight,
+		defaultOnAdd: defaultsOnAdd?.minHeight,
+		isVisible: function(s) {
+			const hideHeight = this?.height?.mode === "px";
+			return Boolean((showMinHeight ? showMinHeight?.call(this, s) : true) && !hideHeight);
+		}
+	});
+	const maxHeightProperty = getSizeProp({
+		label: "Max height",
+		controlType: "HEIGHT_DROPDOWN",
+		defaultValue: defaults?.maxHeight,
+		defaultOnAdd: defaultsOnAdd?.maxHeight,
+		isVisible: function(s) {
+			const hideHeight = this?.height?.mode === "px";
+			return Boolean((showMaxHeight ? showMaxHeight?.call(this, s) : true) && !hideHeight);
+		}
+	});
 	let heightProperty = Prop.dimension().readAndWrite().propertiesPanel({
 		label: "Height",
 		controlType: "HEIGHT_DROPDOWN",
@@ -1531,7 +1604,11 @@ const size = ({ defaults, showWidth, showHeight } = {}) => {
 	widthProperty = widthProperty.docs({ description: "Sets the width of the component" });
 	return {
 		width: widthProperty,
-		height: heightProperty
+		height: heightProperty,
+		...hasMinWidth ? { minWidth: minWidthProperty } : {},
+		...hasMaxWidth ? { maxWidth: maxWidthProperty } : {},
+		...hasMinHeight ? { minHeight: minHeightProperty } : {},
+		...hasMaxHeight ? { maxHeight: maxHeightProperty } : {}
 	};
 };
 /** @deprecated Using it will override the defaults values defined in size() for width */
@@ -1747,69 +1824,69 @@ const loading = () => Prop.boolean().default(void 0).readAndWrite().propertiesPa
 //#endregion
 //#region src/lib/user-facing/components/stack/stack-classes.ts
 const STACK_CLASSES = {
-	base: styleWithPrefix("sb-stack-base")`
+	base: styleAsClass`
     @layer components {
       display: flex;
       position: relative;
       box-sizing: border-box;
     }
   `,
-	directionColumn: styleWithPrefix("sb-direction-column")`
+	directionColumn: styleAsClass`
     @layer components {
       flex-direction: column;
     }
   `,
-	directionRow: styleWithPrefix("sb-direction-row")`
+	directionRow: styleAsClass`
     @layer components {
       flex-direction: row;
     }
   `,
-	justifyStart: styleWithPrefix("sb-justify-start")`
+	justifyStart: styleAsClass`
     @layer components {
       justify-content: flex-start;
     }
   `,
-	justifyCenter: styleWithPrefix("sb-justify-center")`
+	justifyCenter: styleAsClass`
     @layer components {
       justify-content: center;
     }
   `,
-	justifyEnd: styleWithPrefix("sb-justify-end")`
+	justifyEnd: styleAsClass`
     @layer components {
       justify-content: flex-end;
     }
   `,
-	justifySpaceBetween: styleWithPrefix("sb-justify-space-between")`
+	justifySpaceBetween: styleAsClass`
     @layer components {
       justify-content: space-between;
     }
   `,
-	justifySpaceAround: styleWithPrefix("sb-justify-space-around")`
+	justifySpaceAround: styleAsClass`
     @layer components {
       justify-content: space-around;
     }
   `,
-	alignStart: styleWithPrefix("sb-align-start")`
+	alignStart: styleAsClass`
     @layer components {
       align-items: flex-start;
     }
   `,
-	alignCenter: styleWithPrefix("sb-align-center")`
+	alignCenter: styleAsClass`
     @layer components {
       align-items: center;
     }
   `,
-	alignEnd: styleWithPrefix("sb-align-end")`
+	alignEnd: styleAsClass`
     @layer components {
       align-items: flex-end;
     }
   `,
-	alignStretch: styleWithPrefix("sb-align-stretch")`
+	alignStretch: styleAsClass`
     @layer components {
       align-items: stretch;
     }
   `,
-	overflowAuto: styleWithPrefix("sb-overflow-auto")`
+	overflowAuto: styleAsClass`
     @layer components {
       overflow: auto;
     }
@@ -2068,12 +2145,11 @@ const InternalStack = observer(({ direction = "column", spacing: spacing$1, chil
 	return /* @__PURE__ */ jsx("div", {
 		className: combinedClassName,
 		...rest,
-		ref: props.dropTargetRef,
 		children
 	});
 });
 const InternalVStack = (props) => {
-	const { verticalAlign,...rest } = props;
+	const { verticalAlign, horizontalAlign,...rest } = props;
 	return /* @__PURE__ */ jsx(InternalStack, {
 		direction: "column",
 		...rest,
@@ -2160,7 +2236,7 @@ const InternalContainer = (props) => {
 		height: "100%",
 		width: "100%"
 	}), [alignmentStyles]);
-	const shouldApplyEmptyContainerMinHeight = isEditing && props.height?.mode !== "px" && isEmpty(props.children);
+	const shouldApplyEmptyContainerMinHeight = isEditing && props.height?.mode !== "px" && props.minHeight?.mode !== "px" && props.maxHeight?.mode !== "px" && isEmpty(props.children);
 	const containerStyle = useMemo(() => ({
 		display: "grid",
 		gridTemplate: "minmax(0px, 1fr) / minmax(0px, 1fr)",
@@ -3043,12 +3119,26 @@ const useStyleWithSize = (props, instanceId) => {
 	use_stable_effect_default(() => {
 		const widthInfo = props.width ? getWidthHeightInfo(props.width, "width", instanceId) : { classnames: [] };
 		const heightInfo = props.height ? getWidthHeightInfo(props.height, "height", instanceId) : { classnames: [] };
-		if (props.style) setStyle(props.style);
+		const minWidthCss = getMinMaxCss(props.minWidth, "minWidth");
+		const maxWidthCss = getMinMaxCss(props.maxWidth, "maxWidth");
+		const minHeightCss = getMinMaxCss(props.minHeight, "minHeight");
+		const maxHeightCss = getMinMaxCss(props.maxHeight, "maxHeight");
+		setStyle({
+			...minWidthCss,
+			...maxWidthCss,
+			...minHeightCss,
+			...maxHeightCss,
+			...props.style
+		});
 		setClassNames([...widthInfo.classnames, ...heightInfo.classnames]);
 	}, {
 		instanceId,
 		width: props.width,
 		height: props.height,
+		minHeight: props.minHeight,
+		minWidth: props.minWidth,
+		maxHeight: props.maxHeight,
+		maxWidth: props.maxWidth,
 		style: props.style
 	}, {
 		cold: true,
@@ -3106,12 +3196,8 @@ const ReactiveComponent = observer(function Component$1({ Component: Component$2
 	const editorClickHandler = editorProps?.onClick;
 	const handleClick = useCallback(async (e, ...rest) => {
 		if (typeof realClickHandler === "function") realClickHandler(e, ...rest);
-		try {
-			const extraClickHandler = editorClickHandler;
-			if (typeof extraClickHandler === "function") extraClickHandler(e);
-		} catch (error) {
-			console.error("Editor click handler error", error);
-		}
+		const extraClickHandler = editorClickHandler;
+		if (typeof extraClickHandler === "function") extraClickHandler(e);
 	}, [editorClickHandler, realClickHandler]);
 	const hide = shouldHideComponent(reactiveProps?.isVisible);
 	const fallbackPassthroughProps = useMemo(() => {
@@ -3250,13 +3336,10 @@ 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) => {
-	if (!possibleParent || !possibleChild) return false;
+const getIsComponentInInteractionLayer = (instanceId) => {
 	const editStore = getEditStore();
-	const parentMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(possibleParent);
-	const childMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(possibleChild);
-	if (editStore.interactionLayerManager.interactionLayerInstanceIds.has(possibleParent)) return possibleChild === possibleParent || childMeta?.interactionLayerInstanceId === possibleParent;
-	return parentMeta?.interactionLayerInstanceId === childMeta?.interactionLayerInstanceId;
+	const activeRootInstanceId = editStore.interactionLayerManager.activeRootInstanceId;
+	return !activeRootInstanceId || instanceId && (instanceId === activeRootInstanceId || editStore.runtimeEntitiesManager.isChildOf(instanceId, activeRootInstanceId));
 };
 
 //#endregion
@@ -3278,29 +3361,7 @@ function rule(description, restriction) {
 		restriction
 	};
 }
-const instanceRestrictions = [
-	rule("Drop target and dragged instance must be in the same interaction layer", ({ dropTargetInstanceId, draggedInstanceId, isDraggingNewComponent }) => {
-		if (isDraggingNewComponent || !draggedInstanceId) return false;
-		return !doesInteractionLayerContainInstance(dropTargetInstanceId, draggedInstanceId);
-	}),
-	rule("Dragged instance must not be a child of the drop target", ({ dropTargetInstanceId, draggedInstanceId }) => {
-		if (!dropTargetInstanceId || !draggedInstanceId) return false;
-		return getEditStore().runtimeEntitiesManager.isChildOf(dropTargetInstanceId, draggedInstanceId);
-	}),
-	rule("If the dragged instance has local bindings, it must share its root instance with the drop target", ({ dropTargetInstanceId, draggedInstanceId }) => {
-		if (!dropTargetInstanceId || !draggedInstanceId) return false;
-		const editStore = getEditStore();
-		if (!(draggedInstanceId && editStore.runtimeEntitiesManager.doesEntityHaveLocalBindings(draggedInstanceId))) return false;
-		const dropTargetMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(dropTargetInstanceId);
-		const draggedMeta = editStore.runtimeEntitiesManager.getEditorWidgetMeta(draggedInstanceId);
-		if (dropTargetMeta?.isRoot) return dropTargetMeta.instanceId !== draggedMeta?.rootInstanceId;
-		else return dropTargetMeta?.rootInstanceId !== draggedMeta?.rootInstanceId;
-	})
-];
-const areDragAndDropInstancesValid = (params) => {
-	return instanceRestrictions.find((restriction) => restriction.restriction(params)) == null;
-};
-const typeRestrictions = [
+const restrictions = [
 	rule("Draggable type must be draggable", ({ draggedType, isDraggingNewComponent }) => !isDraggingNewComponent && !isTypeDraggable(draggedType)),
 	rule("Drop target type must be droppable", ({ dropTargetType }) => !isTypeDroppable(dropTargetType)),
 	rule("Only containers can be dropped on non empty pages", ({ draggedType, dropTargetType, dropTargetEmpty }) => {
@@ -3308,7 +3369,7 @@ const typeRestrictions = [
 	})
 ];
 const isDragAndDropTypeValid = ({ draggedType, dropTargetType, dropTargetEmpty, isDraggingNewComponent }) => {
-	return typeRestrictions.find((restriction) => restriction.restriction({
+	return restrictions.find((restriction) => restriction.restriction({
 		draggedType,
 		dropTargetType,
 		dropTargetEmpty,
@@ -3331,6 +3392,23 @@ const isContentDraggable = (type) => {
 	if (!isTypeDraggable(type)) return false;
 	return root_store_default.componentRegistry.getEditorConfig(type)?.isContentDraggable !== false;
 };
+/**
+* TODO - should use the EditorConfig to determine if the created/dropped component should be wrapped.
+* @param type - the type of the component being created
+* @param parentType - the type of the parent component
+* @returns
+*  - [false] if the component should not be wrapped
+*  - [true, wrapInType] if the component should be wrapped in the given type
+*/
+function shouldWrapComponent(type, parentType) {
+	if (isComponentTypeDetached(type)) return [false];
+	if (!parentType) return [false];
+	if (parentType.includes("Modal") || parentType.includes("Slideout") || parentType.includes("Sheet") || parentType.includes("Dialog") || parentType === NATIVE_COMPONENT_TYPES.Page) {
+		if (root_store_default.componentRegistry.containerTypes.has(type)) return [false];
+		return [true, root_store_default.componentRegistry.defaultTagNames.container];
+	}
+	return [false];
+}
 const filterSafeStackDimensionProperties = (existingProps) => {
 	const { width, height, size: size$1 } = existingProps;
 	const safeDimensions = {};
@@ -3384,13 +3462,13 @@ const DroppableWidget = observer((props) => {
 	const widgetNode = useWidgetNodeRef(props.instanceId);
 	useEffect(() => {
 		let targetNode = null;
-		if (props.dropTargetElem) targetNode = props.dropTargetElem;
+		if (props.dropTargetRef?.current) targetNode = props.dropTargetRef.current;
 		else if (widgetNode) targetNode = widgetNode;
 		if (targetNode) setDroppableNodeRef(targetNode);
 	}, [
 		widgetNode,
 		setDroppableNodeRef,
-		props.dropTargetElem
+		props.dropTargetRef
 	]);
 	return /* @__PURE__ */ jsx(React.Fragment, { children: props.children });
 });
@@ -3458,28 +3536,6 @@ function ParentIdentifierProvider({ identifier, children }) {
 	});
 }
 
-//#endregion
-//#region src/edit-mode/interaction-layer/interaction-context.tsx
-const defaultContext = { rootInstanceId: void 0 };
-const InteractionLayerContext = createContext(void 0);
-const useInteractionLayerContext = () => {
-	return useContext(InteractionLayerContext) ?? defaultContext;
-};
-const InteractionLayerProvider = (props) => {
-	const context$1 = useMemo(() => ({ rootInstanceId: props.instanceId }), [props.instanceId]);
-	useEffect(() => {
-		const editStore = getEditStore();
-		editStore.interactionLayerManager.addInteractionLayerInstanceId(props.instanceId);
-		return () => {
-			editStore.interactionLayerManager.removeInteractionLayerInstanceId(props.instanceId);
-		};
-	}, [props.instanceId]);
-	return /* @__PURE__ */ jsx(InteractionLayerContext.Provider, {
-		value: context$1,
-		children: props.children
-	});
-};
-
 //#endregion
 //#region src/lib/internal-details/lib/throttle.ts
 function throttle$1(func, delay) {
@@ -3505,13 +3561,420 @@ function throttle$1(func, delay) {
 }
 
 //#endregion
-//#region src/lib/user-facing/constants.ts
-const CANVAS_ROOT_ID = "canvas-root";
+//#region src/lib/user-facing/constants.ts
+const CANVAS_ROOT_ID = "canvas-root";
+/**
+* The ID of the element used to target detached components (e.g: modals, slideouts) when they are opened in the app.
+*/
+const PORTAL_ROOT_ID = "portal-root";
+const POPOVER_ROOT_ID = "sb-popover-root";
+
+//#endregion
+//#region src/edit-mode/dnd/is-nestable.ts
+function isNestable(componentType, _parentType) {
+	if (componentType === PAGE_COMPONENT_TYPE) return false;
+	return true;
+}
+
+//#endregion
+//#region src/edit-mode/create-component.ts
+function getParentInfo(parent) {
+	return { type: getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id)?.type };
+}
+const generateUniqueName = (componentType) => {
+	const baseName = componentType;
+	let counter = 1;
+	let name = `${baseName}${counter}`;
+	while (root_store_default.nameManager.hasEntityWithName(name)) {
+		counter++;
+		name = `${baseName}${counter}`;
+	}
+	return name;
+};
+function getBinding({ componentType, editorTemplateCreateRequest }) {
+	if (editorTemplateCreateRequest?.generateBinding === true) return Property$1.Static(generateUniqueName(componentType));
+	else if (typeof editorTemplateCreateRequest?.generateBinding === "string") return Property$1.Static(editorTemplateCreateRequest.generateBinding);
+	else return;
+}
+function getComponentBaseProperties(componentType, _parentInfo, editorTemplateCreateRequest) {
+	let properties = {};
+	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
+	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
+	if (editorTemplateCreateRequest?.properties) properties = {
+		...properties,
+		...editorTemplateCreateRequest.properties
+	};
+	const binding = getBinding({
+		componentType,
+		editorTemplateCreateRequest
+	});
+	if (binding) properties.name = binding;
+	const { width, height, size: size$1 } = properties;
+	const safeDimensions = filterSafeStackDimensionProperties({
+		width: width?.value,
+		height: height?.value,
+		size: size$1?.value
+	});
+	return {
+		properties: {
+			...properties,
+			...safeDimensions
+		},
+		children: editorTemplateCreateRequest?.children ?? []
+	};
+}
+function getCreateAtParentElement(relativeParent, createAt) {
+	if (createAt === "root") {
+		const parentInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(relativeParent.id);
+		const pageComponent = getEditStore().runtimeEntitiesManager.getClosestAncestorByType(parentInstanceId, "Page");
+		if (!pageComponent) throw new Error(`Page component not found for parent: ${relativeParent.id}`);
+		return { source: { id: pageComponent.sourceId } };
+	} else return { source: relativeParent };
+}
+async function createComponent({ componentType, parent, scopeName, baseProperties = {}, skipSecondaryComponentsCreation, otherComponentsUpdates }) {
+	const parentInfo = getParentInfo(parent);
+	if (!isNestable(componentType, parentInfo.type)) {
+		console.error(`${componentType} cannot be nested under ${parentInfo.type}`);
+		return;
+	}
+	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
+	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
+	const context$1 = {
+		generateUniqueName,
+		parentInfo,
+		defaultTagNames: root_store_default.componentRegistry.defaultTagNames,
+		selfTagName: componentType
+	};
+	const editorTemplateCreateRequest = editorTemplates?.[0]?.create?.(context$1);
+	const primaryEditorTemplateCreateRequest = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest[0] : editorTemplateCreateRequest;
+	if (editorTemplateCreateRequest && primaryEditorTemplateCreateRequest?.type !== componentType) throw new Error(`When defining a ${Array.isArray(editorTemplateCreateRequest) ? "multiple" : "single"} component to be created on an EditorTemplate, the type must match with the component being created. got: ${primaryEditorTemplateCreateRequest?.type} when it should have been ${componentType}`);
+	const editorTemplateCreateRequests = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest : [editorTemplateCreateRequest];
+	const editStore = getEditStore();
+	function editorTemplateCreateRequestToInternalCreateRequest({ editorTemplateCreateRequest: editorTemplateCreateRequest$1, baseProperties: baseProperties$1 }) {
+		const type = editorTemplateCreateRequest$1?.type ?? componentType;
+		const [shouldWrap, wrapInType] = shouldWrapComponent(type, parentInfo.type);
+		const { properties: propertiesFromType, children } = getComponentBaseProperties(type, parentInfo, editorTemplateCreateRequest$1);
+		const properties = {
+			...propertiesFromType,
+			...baseProperties$1
+		};
+		let primaryComponent = {
+			parentElement: getCreateAtParentElement(parent, editorTemplateCreateRequest$1?.createAt),
+			tagName: type,
+			properties,
+			children,
+			scopeName,
+			id: editStore.operationManager.generateSourceId()
+		};
+		if (shouldWrap) primaryComponent = wrapComponentIfNecessary(primaryComponent, wrapInType);
+		return primaryComponent;
+	}
+	const createRequests = editorTemplateCreateRequests.map((editorTemplateCreateRequest$1, index) => editorTemplateCreateRequestToInternalCreateRequest({
+		editorTemplateCreateRequest: editorTemplateCreateRequest$1,
+		baseProperties: index === 0 ? baseProperties : {}
+	}));
+	const hasOtherComponentsUpdates = otherComponentsUpdates && Object.keys(otherComponentsUpdates).length > 0;
+	const hasMultipleCreateComponents = editorTemplateCreateRequests.length > 1 && !skipSecondaryComponentsCreation;
+	if (hasOtherComponentsUpdates || hasMultipleCreateComponents) {
+		const performOtherComponentsUpdates = (otherComponentsUpdates$1) => {
+			Object.entries(otherComponentsUpdates$1).forEach(([sourceId, updates]) => {
+				editStore.operationManager.setWidgetProperties({
+					sourceId,
+					properties: updates
+				});
+			});
+		};
+		editStore.operationManager.batchUpdate(() => {
+			if (skipSecondaryComponentsCreation) editStore.operationManager.createComponent(createRequests[0]);
+			else createRequests.forEach((createRequest) => {
+				editStore.operationManager.createComponent(createRequest);
+			});
+			if (hasOtherComponentsUpdates) performOtherComponentsUpdates(otherComponentsUpdates);
+		});
+	} else editStore.operationManager.createComponent(createRequests[0]);
+	/**
+	* Returns the single id, or the the last component if there are multiple.
+	* See EditorTemplate's definition to understand why.
+	*/
+	return createRequests.at(-1).id;
+}
+function wrapComponentIfNecessary(primaryComponent, wrapInType) {
+	if (!wrapInType) return primaryComponent;
+	const { properties } = getComponentBaseProperties(wrapInType, { type: "Page" });
+	const [_$1, continueWrappingInType] = shouldWrapComponent(primaryComponent.tagName, wrapInType);
+	return {
+		parentElement: primaryComponent.parentElement,
+		tagName: wrapInType,
+		id: getEditStore().operationManager.generateSourceId(),
+		properties,
+		children: [wrapComponentIfNecessary(primaryComponent, continueWrappingInType)]
+	};
+}
+
+//#endregion
+//#region src/edit-mode/dnd/handle-stack-drop.ts
+const mergeDroppedDimensions = (draggedType, draggedProps, activeDragRect) => {
+	const safeExistingDimensions = filterSafeStackDimensionProperties({
+		width: draggedProps?.width,
+		height: draggedProps?.height,
+		size: draggedProps?.size
+	});
+	const width = safeExistingDimensions.width;
+	const height = safeExistingDimensions.height;
+	if (draggedType === "Icon") return { size: safeExistingDimensions.size ?? (activeDragRect?.height ? Property$1.Dimension(Dim$1.px(activeDragRect.height)) : Property$1.Static("")) };
+	return {
+		width,
+		height
+	};
+};
+const handleStackDropWithinCanvas = (params) => {
+	const { dropInfo, draggedId, dropTargetId } = params;
+	const editStore = getEditStore();
+	const dropSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
+	const draggedSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(draggedId);
+	if (!dropSourceId || !draggedSourceId) throw new Error(`Missing IDs: dragging ${draggedId} to ${dropTargetId}`);
+	console.log(`Dragged ${draggedSourceId} to ${dropSourceId}`, {
+		dropInfo,
+		index: dropInfo.insertionIndex
+	});
+	if (dropInfo.noopDrop) return;
+	const draggedType = editStore.runtimeEntitiesManager.getEditorWidgetType(draggedId);
+	const dropTargetType = editStore.runtimeEntitiesManager.getEditorWidgetType(dropTargetId);
+	if (!draggedType) throw new Error(`Missing dragged type: ${draggedId}`);
+	const [shouldWrap, wrapInType] = shouldWrapComponent(draggedType, dropTargetType);
+	const activeDragRect = editStore.ui.dnd.activeDragRect;
+	if (shouldWrap) dropComponentAndWrap({
+		draggedId,
+		draggedSourceId,
+		dropTargetId,
+		dropSourceId,
+		dropInfo,
+		dropTargetType,
+		activeDragRect,
+		wrapInType
+	});
+	else {
+		const draggedProps = editStore.runtimeEntitiesManager.getEditorWidgetMeta(draggedId)?.props;
+		editStore.operationManager.dropComponent({
+			from: { source: { id: draggedSourceId } },
+			to: { source: {
+				id: dropSourceId,
+				index: dropInfo.insertionIndex
+			} },
+			propsToChange: { ...mergeDroppedDimensions(draggedType, draggedProps, activeDragRect) }
+		});
+	}
+};
+const dropComponentAndWrap = async (params) => {
+	const { draggedId, draggedSourceId, dropSourceId, dropTargetId, dropInfo, dropTargetType, activeDragRect, wrapInType } = params;
+	const editStore = getEditStore();
+	const dropScopeId = editStore.runtimeEntitiesManager.getEditorWidgetScopeId(dropTargetId);
+	if (!dropScopeId) throw new Error(`Missing drop scope id: ${dropTargetId}`);
+	const scopeName = root_store_default.entityManager.getScopeName(dropScopeId);
+	const newComponentSourceId = await createComponent({
+		componentType: wrapInType,
+		parent: {
+			index: dropInfo.insertionIndex,
+			id: dropSourceId
+		},
+		scopeName
+	});
+	if (!newComponentSourceId) throw new Error("Missing new component source id");
+	const draggedProps = editStore.runtimeEntitiesManager.getEditorWidgetMeta(draggedId)?.props;
+	editStore.operationManager.dropComponent({
+		from: { source: { id: draggedSourceId } },
+		to: { source: {
+			id: newComponentSourceId,
+			index: 0
+		} },
+		propsToChange: { ...mergeDroppedDimensions(dropTargetType, draggedProps, activeDragRect) }
+	});
+};
+const handleStackDropForNewComponent = ({ componentType, dropInfo, dropTargetId }) => {
+	const editStore = getEditStore();
+	const dropSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
+	const dropScopeId = editStore.runtimeEntitiesManager.getEditorWidgetScopeId(dropTargetId);
+	if (!dropSourceId || !dropScopeId) throw new Error("Missing drop source id");
+	const scopeName = root_store_default.entityManager.getScopeName(dropScopeId);
+	return createComponent({
+		componentType,
+		parent: {
+			index: dropInfo.insertionIndex,
+			id: dropSourceId
+		},
+		scopeName
+	});
+};
+const handleStackDrop = async ({ dropInfo, draggedId, dropTargetId, isDraggingNewComponent, newComponentType }) => {
+	if (dropInfo.insertionIndex == null) throw new Error("No insertion index found");
+	if (isDraggingNewComponent) {
+		if (!newComponentType) throw new Error("Missing componentType to create new component");
+		return handleStackDropForNewComponent({
+			componentType: newComponentType,
+			dropTargetId,
+			dropInfo
+		});
+	} else {
+		if (!draggedId) throw new Error("Missing dragged id");
+		handleStackDropWithinCanvas({
+			dropInfo,
+			draggedId,
+			dropTargetId
+		});
+	}
+};
+
+//#endregion
+//#region src/edit-mode/dnd/hooks/use-handle-dnd-events.ts
+const measureRect = (id) => {
+	const rect = id ? getBoundingBoxForWidget(id) : null;
+	if (!rect) return null;
+	return {
+		left: rect.left,
+		top: rect.top,
+		right: rect.right,
+		bottom: rect.bottom,
+		width: rect.width,
+		height: rect.height
+	};
+};
 /**
-* The ID of the element used to target detached components (e.g: modals, slideouts) when they are opened in the app.
+* We have to follow a few rules while drag and dropping:
+* 1. You can drag and drop within your own function component/scope
+* 2. You can drag to another function component, but only if it doesn't break references to local variables in the current function component
+* > a. If the reference is to some SB state, and you are in the same scope, you can drag to another function component and we will update the reference to the SB state
+* @param overSourceId the widget ID we are currently dragging over
+* @param overRootId the root ID (which could be the same as the widget ID) that we are dragging over, for example dragging over a container in another function component
+* @returns true if the drop target is invalid
 */
-const PORTAL_ROOT_ID = "portal-root";
-const POPOVER_ROOT_ID = "sb-popover-root";
+const isInvalidDropTarget = (overInstanceId, overRootInstanceId) => {
+	const activeRootInstanceIds = getEditStore().ui.dnd.validRootIds;
+	return Boolean(activeRootInstanceIds && !activeRootInstanceIds.includes(overInstanceId) && !activeRootInstanceIds.includes(overRootInstanceId)) || isDroppingOnAncestor(overInstanceId);
+};
+const isDroppingOnAncestor = (overInstanceId) => {
+	if (overInstanceId) {
+		const editStore = getEditStore();
+		const ancestorIds = /* @__PURE__ */ new Set();
+		let currentId = overInstanceId;
+		let iterations = 0;
+		const MAX_ITERATIONS$1 = 1e3;
+		while (currentId && iterations < MAX_ITERATIONS$1) {
+			const entity = editStore.runtimeEntitiesManager.getEditorWidgetMeta(currentId);
+			if (entity?.parentInstanceId) {
+				ancestorIds.add(entity.parentInstanceId);
+				currentId = entity.parentInstanceId;
+			} else break;
+			iterations++;
+		}
+		return Array.from(ancestorIds).some((id) => editStore.ui.isInstanceSelected(id));
+	}
+	return false;
+};
+const useHandleDnDEvents = () => {
+	const setActiveDragRect = useMemo(() => {
+		const editStore = getEditStore();
+		const throttled = throttle((rect) => {
+			editStore.ui.dnd.setActiveDragRect(rect);
+		}, 10, {
+			leading: true,
+			trailing: true
+		});
+		return (val) => {
+			throttled(val);
+		};
+	}, []);
+	const setActiveTargetInfo = useMemo(() => {
+		const editStore = getEditStore();
+		const throttled = throttle((id, rect) => {
+			editStore.ui.dnd.setDropTargetId(id);
+			editStore.ui.dnd.setActiveTargetRect(rect);
+		}, 10, {
+			leading: true,
+			trailing: true
+		});
+		return (id, val) => {
+			throttled(id, val);
+		};
+	}, []);
+	useDndMonitor({
+		onDragStart: useCallback((event) => {
+			const editStore = getEditStore();
+			const activeData = event.active?.data.current;
+			if (!activeData && !editStore.ui.dnd.isDraggingNewComponent) {
+				console.error("No active widget data");
+				return;
+			}
+			const activeRootInstanceId = (activeData?.instanceId && editStore.runtimeEntitiesManager.getEditorWidgetMeta(activeData?.instanceId))?.rootInstanceId;
+			const hasLocalBinding = activeData?.instanceId && editStore.runtimeEntitiesManager.doesEntityHaveLocalBindings(activeData?.instanceId);
+			if (activeRootInstanceId && hasLocalBinding) editStore.ui.dnd.setValidRootIds([activeRootInstanceId]);
+			editStore.ui.dnd.setDropTargetId(null);
+			editStore.ui.dnd.setIsDragging(true);
+			if (editStore.ui.dnd.isDraggingNewComponent) {
+				editStore.ui.selectWidget(null);
+				editStore.ui.dnd.resizePageIfNeeded();
+			} else editStore.ui.selectWidget(event.active?.id ? event.active.id : null, event.activatorEvent?.shiftKey);
+		}, []),
+		onDragMove: useCallback((event) => {
+			const editStore = getEditStore();
+			const overData = event.over?.data.current;
+			const overRootId = overData?.rootInstanceId ?? null;
+			const overInstanceId = overData?.instanceId ?? null;
+			editStore.ui.dnd.setInvalidDropTarget(isInvalidDropTarget(overInstanceId, overRootId));
+			setActiveTargetInfo(event.over?.id ?? null, event.over?.rect ?? null);
+			const collisionRect = event.collisions?.[0]?.data?.injectedCollisionRect;
+			if (collisionRect) setActiveDragRect(collisionRect);
+			else setActiveDragRect(null);
+		}, [setActiveDragRect, setActiveTargetInfo]),
+		onDragOver: useCallback((event) => {
+			const editStore = getEditStore();
+			const overData = event.over?.data.current;
+			const overRootId = overData?.rootInstanceId ?? null;
+			const overInstanceId = overData?.instanceId ?? null;
+			editStore.ui.dnd.setInvalidDropTarget(isInvalidDropTarget(overInstanceId, overRootId));
+			const overId = event.over?.id ? String(event.over?.id) : null;
+			setActiveTargetInfo(overId, measureRect(overId));
+		}, [setActiveTargetInfo]),
+		onDragCancel: useCallback((_event) => {
+			const editStore = getEditStore();
+			editStore.ui.dnd.setIsDragging(false);
+			editStore.ui.dnd.cancelNewComponentDrag();
+		}, []),
+		onDragEnd: useCallback(async (event) => {
+			const editStore = getEditStore();
+			let possibleNewComponentId;
+			try {
+				if (editStore.ui.dnd.invalidDropTarget) {
+					editorBridge.sendNotification("error", "You cannot drop a component here.");
+					return;
+				}
+				const dropTargetId = event.over?.id ? String(event.over.id) : null;
+				const draggedId = event.active?.id ? String(event.active?.id) : null;
+				const activeRootInstanceId = editStore.interactionLayerManager.activeRootInstanceId;
+				if (dropTargetId && activeRootInstanceId && !(editStore.runtimeEntitiesManager.isChildOf(dropTargetId, activeRootInstanceId) || dropTargetId === activeRootInstanceId)) return;
+				if (dropTargetId !== editStore.ui.dnd.dropTargetId) throw new Error("Drop target id and drag over id do not match");
+				if (!dropTargetId) throw new Error("No drop target id");
+				if (editStore.ui.dnd.isDropTargetStackLike) {
+					const dropInfo = editStore.ui.dnd.stack.refreshPositionsAndGetDropIndex();
+					possibleNewComponentId = await handleStackDrop({
+						dropInfo,
+						isDraggingNewComponent: editStore.ui.dnd.isDraggingNewComponent,
+						newComponentType: editStore.ui.dnd.dragToCanvasComponentType,
+						dropTargetId,
+						draggedId
+					});
+				} else throw new Error("Grid is no longer supported");
+			} catch (e) {
+				console.error("Error dropping item", e);
+			} finally {
+				runInAction(() => {
+					editStore.ui.dnd.setIsDragging(false);
+					editStore.ui.dnd.cancelNewComponentDrag();
+					if (possibleNewComponentId) editStore.ui.selectNewComponentBySourceId(possibleNewComponentId);
+				});
+			}
+		}, [])
+	});
+};
 
 //#endregion
 //#region src/edit-mode/dnd/stack-drop.tsx
@@ -3529,7 +3992,7 @@ const StackDropPreview = observer(() => {
 			bottom: "anchor(bottom)",
 			positionAnchor: getWidgetDropAreaAnchorName(dropTargetId, dropTargetWidgetType)
 		},
-		children: [editStore.ui.dnd.isProspectiveDropValid && placeholders ? /* @__PURE__ */ jsx(Fragment, { children: placeholders.map((placeholder) => /* @__PURE__ */ jsx("div", {
+		children: [!editStore.ui.dnd.invalidDropTarget && placeholders ? /* @__PURE__ */ jsx(Fragment, { children: placeholders.map((placeholder) => /* @__PURE__ */ jsx("div", {
 			className: "sb-edit-drop-placeholder",
 			style: {
 				top: placeholder.top,
@@ -3542,24 +4005,36 @@ const StackDropPreview = observer(() => {
 			"data-is-valid-drop": true
 		}, placeholder.top + placeholder.left)) }) : null, /* @__PURE__ */ jsx("div", {
 			className: "sb-edit-drop-target-outline",
-			"data-invalid-target": !editStore.ui.dnd.isProspectiveDropValid
+			"data-invalid-target": editStore.ui.dnd.invalidDropTarget
 		})]
 	});
 });
 
 //#endregion
 //#region src/edit-mode/dnd/drop-layer.tsx
-const DropLayer = observer((props) => {
+const DropLayer = observer(() => {
+	useHandleDnDEvents();
 	const editStore = getEditStore();
 	const draggedWidgetType = editStore.ui.dnd.draggedWidgetType;
 	const dropTargetWidgetType = editStore.ui.dnd.dropTargetWidgetType;
 	const isDropTargetStackLike = editStore.ui.dnd.isDropTargetStackLike;
 	const dropTargetId = editStore.ui.dnd.dropTargetId;
-	const isDropTargetInInteractionLayer = doesInteractionLayerContainInstance(props.rootInstanceId, dropTargetId);
-	const possibleStackDrop = editStore.ui.dnd.isDragging && isDropTargetInInteractionLayer && Boolean(draggedWidgetType && dropTargetWidgetType) && isDropTargetStackLike;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [possibleStackDrop && /* @__PURE__ */ jsx(StackDropPreview, {}), /* @__PURE__ */ jsx(DragOverlay, {
+	const isDropTargetInInteractionLayer = getIsComponentInInteractionLayer(dropTargetId);
+	const isDragging = editStore.ui.dnd.isDragging;
+	const validStackDrop = isDropTargetInInteractionLayer && isDragging && Boolean(draggedWidgetType && dropTargetWidgetType) && isDropTargetStackLike;
+	const isValidDrop = validStackDrop;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [validStackDrop && /* @__PURE__ */ jsx(StackDropPreview, {}), /* @__PURE__ */ jsx(DragOverlay, {
 		modifiers: [snapCenterToCursor],
-		dropAnimation: null
+		dropAnimation: null,
+		children: editStore.ui.dnd.isDraggingNewComponent && /* @__PURE__ */ jsx("div", {
+			className: "sb-edit-drag-preview",
+			"data-is-valid-drop": isValidDrop,
+			style: {
+				visibility: "visible",
+				height: `${editStore.ui.dnd.draggingWidgetSize.height * 12}px`,
+				width: `${editStore.ui.dnd.draggingWidgetSize.width * 12}px`
+			}
+		})
 	})] });
 });
 var drop_layer_default = DropLayer;
@@ -4012,18 +4487,18 @@ const useWidgetErrors = (params) => {
 	]);
 };
 const useSelectionElements = (params) => {
-	const { focusedInstanceId, selectedInstanceIds, targetedSourceIds, aiContextMode, rootId } = params;
+	const { focusedInstanceId, selectedInstanceIds, targetedSourceIds, aiContextMode } = params;
 	const allTargetedComponents = useMemo(() => {
 		const components = [];
 		targetedSourceIds.forEach((sourceId) => {
 			const sourceInstanceIds = getEditStore().runtimeEntitiesManager.widgets.getAllInstanceIdsForSourceId(sourceId);
-			components.push(...sourceInstanceIds.filter((instanceId) => doesInteractionLayerContainInstance(rootId, instanceId)).map((instanceId) => ({
+			components.push(...sourceInstanceIds.map((instanceId) => ({
 				instanceId,
 				sourceId
 			})));
 		});
 		return components;
-	}, [targetedSourceIds, rootId]);
+	}, [targetedSourceIds]);
 	const visibleTargetedComponents = useViewportIntersection(allTargetedComponents);
 	return useObserverMemo(() => {
 		const selectedRects = [];
@@ -4038,7 +4513,7 @@ const useSelectionElements = (params) => {
 				isVisible
 			});
 		});
-		selectedInstanceIds.filter((instanceId) => doesInteractionLayerContainInstance(rootId, instanceId)).forEach((instanceId) => {
+		selectedInstanceIds.forEach((instanceId) => {
 			const { type, displayName, sourceId, isVisible } = selectDisplayNameAndVisibility(instanceId);
 			if (sourceId && !targetedSourceIds.includes(sourceId)) selectedRects.push({
 				instanceId,
@@ -4049,7 +4524,7 @@ const useSelectionElements = (params) => {
 				isVisible
 			});
 		});
-		if (focusedInstanceId && doesInteractionLayerContainInstance(rootId, focusedInstanceId) && (aiContextMode === AiContextMode.AUTO_SELECT || !selectedInstanceIds.includes(focusedInstanceId))) {
+		if (focusedInstanceId && (aiContextMode === AiContextMode.AUTO_SELECT || !selectedInstanceIds.includes(focusedInstanceId))) {
 			const { type, displayName, sourceId, isVisible } = selectDisplayNameAndVisibility(focusedInstanceId);
 			if (sourceId) selectedRects.push({
 				instanceId: focusedInstanceId,
@@ -4066,8 +4541,7 @@ const useSelectionElements = (params) => {
 		selectedInstanceIds,
 		targetedSourceIds,
 		aiContextMode,
-		visibleTargetedComponents,
-		rootId
+		visibleTargetedComponents
 	]);
 };
 const InteractionRectTargetBorder = ({ instanceId }) => {
@@ -4299,7 +4773,7 @@ const InteractionLayer = observer((props) => {
 		displayName: props.rootName ?? "Unknown",
 		hideRectBorder: false
 	}, props.rootInstanceId) : null;
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: "sb-interaction-layer-wrapper",
 		children: [
 			interactionRectsForSelectedElements,
@@ -4310,9 +4784,9 @@ const InteractionLayer = observer((props) => {
 				displayName: name,
 				instanceId: id
 			}, id)),
-			/* @__PURE__ */ jsx(drop_layer_default, { rootInstanceId: props.rootInstanceId })
+			props.rootType !== "App" && /* @__PURE__ */ jsx(drop_layer_default, {})
 		]
-	}) });
+	});
 });
 var interaction_layer_default = InteractionLayer;
 
@@ -4407,7 +4881,7 @@ const stableEffectOptions$1 = {
 	cold: true
 };
 function useRuntimeEditTracking(props) {
-	const { parentInstanceId, directParentInstanceId, identifier, type, children, widgetProps, rootInstanceId, interactionLayerInstanceId, indexWithinParent, isRoot, isInsideRoot } = props;
+	const { parentInstanceId, directParentInstanceId, identifier, type, children, widgetProps, rootInstanceId, indexWithinParent, isRoot, isInsideRoot } = props;
 	const { children: _children,...rest } = widgetProps;
 	use_stable_effect_default(() => {
 		const widgetMeta = {
@@ -4422,7 +4896,6 @@ function useRuntimeEditTracking(props) {
 			directParentInstanceId,
 			sourceId: identifier.sourceId,
 			rootInstanceId,
-			interactionLayerInstanceId,
 			isRoot,
 			isInsideRoot
 		};
@@ -4435,7 +4908,6 @@ function useRuntimeEditTracking(props) {
 		parentInstanceId,
 		directParentInstanceId,
 		rootInstanceId,
-		interactionLayerInstanceId,
 		type,
 		rest
 	}, stableEffectOptions$1);
@@ -4535,7 +5007,6 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	const rootInstanceId = editorRootContext?.instanceId;
 	const parentIdentifier = useParentIdentifier();
 	const isRoot = ROOT_WIDGET_ATTRIBUTE in props.widgetProps;
-	const { rootInstanceId: interactionLayerInstanceId } = useInteractionLayerContext();
 	const children = useRuntimeEditTracking({
 		parentInstanceId: parentIdentifier?.instanceId,
 		directParentInstanceId: props.directParentInstanceId,
@@ -4544,7 +5015,6 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		children: props.children,
 		widgetProps: props.widgetProps,
 		rootInstanceId,
-		interactionLayerInstanceId,
 		indexWithinParent: props.indexWithinParent,
 		isRoot,
 		isInsideRoot
@@ -4573,21 +5043,18 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	const { onContextMenu } = useRightClickMenu({ sourceId: props.identifier.sourceId });
 	const showVisibilityBackground = props.widgetProps.isVisible === false && !editStore.ui.getSelectedSourceIds().includes(props.identifier.sourceId);
 	const handleClick = useCallback((ev) => {
-		const stopPropagation = () => {
-			if (ev.stopPropagation) ev.stopPropagation();
-		};
 		const editStore$1 = getEditStore();
 		if (ev.altKey || editStore$1.ai.getIsTaggingEnabled() && editStore$1.ai.shouldToggleComponentInAiContext()) {
 			const sourceId = props.identifier.sourceId;
 			const instanceId = props.identifier.instanceId;
 			editorBridge.toggleComponentInAiContext(sourceId, instanceId);
-			stopPropagation();
+			ev.stopPropagation();
 			return;
 		}
 		editStore$1.ui.selectWidget(props.identifier.instanceId, ev.shiftKey === true);
-		stopPropagation();
+		ev.stopPropagation();
 	}, [props.identifier.sourceId, props.identifier.instanceId]);
-	const [dropTargetElem, setDropTargetElem] = useState(null);
+	const dropTargetRef = useRef(null);
 	const handleRef = useCallback((el) => {
 		setDraggableNodeRef(el);
 	}, [setDraggableNodeRef]);
@@ -4625,7 +5092,7 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 			identifier,
 			widgetProps: props.widgetProps,
 			editorProps,
-			dropTargetRef: setDropTargetElem,
+			dropTargetRef,
 			showErrors: true,
 			children: [showVisibilityBackground && /* @__PURE__ */ jsx("div", {
 				className: VisibilityOverlayClass,
@@ -4644,13 +5111,10 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	}) : node;
 	if (isDroppable) content = /* @__PURE__ */ jsx(droppable_widget_default, {
 		instanceId: props.identifier.instanceId,
-		dropTargetElem,
+		dropTargetRef,
 		children: content
 	});
-	if (props.type === "App" || props.type === "Page") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InteractionLayerProvider, {
-		instanceId: props.identifier.instanceId,
-		children: content
-	}), /* @__PURE__ */ jsx(interaction_layer_default, {
+	if (props.type === "App" || props.type === "Page") return /* @__PURE__ */ jsxs(Fragment, { children: [content, /* @__PURE__ */ jsx(interaction_layer_default, {
 		rootType: props.type,
 		rootInstanceId: props.identifier.instanceId,
 		rootName: identifier.name.value
@@ -5765,7 +6229,7 @@ var AsyncSocket = class {
 
 //#endregion
 //#region src/edit-mode/source-update-api.ts
-const PING_INTERVAL_MS = 15e3;
+const PING_INTERVAL_MS = 3e4;
 var OperationAPI = class {
 	retryAttempts = 0;
 	asyncSocket = new AsyncSocket();
@@ -5921,9 +6385,6 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, onClose
 			removeRegisteredComponent: [async (payload) => {
 				root_store_default.componentRegistry.deleteCustomComponent(payload.name);
 			}],
-			loadComponents: [async (payload) => {
-				import(payload.componentFilePath);
-			}],
 			deleteEntities: [async (payload) => {
 				payload.forEach((entity) => {
 					if (entity.entityName) root_store_default.entityManager.deleteEntity({
@@ -6167,6 +6628,7 @@ const registerComponentInternal = (type, config, Component$1) => {
 			widgetProps,
 			component: Component$1,
 			identifier: identifier.current,
+			isDroppable,
 			directParentInstanceId: props[WIDGET_PARENT_INSTANCE_ID_ATTRIBUTE],
 			indexWithinParent: props[WIDGET_INDEX_WITHIN_PARENT],
 			children: props.children
@@ -6243,7 +6705,10 @@ const propertiesDefinition$4 = {
 			height: Dim$1.fill()
 		},
 		showWidth: () => false,
-		showHeight: () => false
+		hasMinWidth: false,
+		hasMinHeight: false,
+		hasMaxWidth: false,
+		hasMaxHeight: false
 	})),
 	appearance: Section.category(PropsPanelCategory.Appearance).children({ loading: loading() }),
 	events: Section.category(PropsPanelCategory.EventHandlers).children({ onLoad: Prop.event().propertiesPanel({ label: "onPageLoad" }) })
@@ -6252,7 +6717,7 @@ const propertiesDefinition$4 = {
 //#endregion
 //#region src/lib/user-facing/components/page/index.tsx
 const Page = registerComponentInternal(NATIVE_COMPONENT_TYPES.Page, { propertiesDefinition: propertiesDefinition$4 }, (props) => {
-	const { name, isAnonymous, style, onLoad, editorProps,...other } = props;
+	const { name, isAnonymous, style, onLoad,...other } = props;
 	const { scopeId } = useScope();
 	useEffect(() => {
 		return root_store_default.onPageLoaded(scopeId, () => {
@@ -6266,13 +6731,13 @@ const Page = registerComponentInternal(NATIVE_COMPONENT_TYPES.Page, { properties
 			overflow: "auto"
 		},
 		children: /* @__PURE__ */ jsx(InternalVStack, {
-			...editorProps,
 			isVisible: true,
 			style: {
 				height: "100%",
 				width: "100%",
 				...style
 			},
+			direction: "none",
 			...other,
 			children: props.children
 		})
@@ -6588,171 +7053,44 @@ const SbApi = registerEntity(SbEntityType.API, { propertiesDefinition }, ({ onSu
 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() {
-	return useMemo(() => {
-		return {
-			isLoading: false,
-			data: { user: { name: "Test User" } }
-		};
-	}, []);
-}
-
-//#endregion
-//#region src/edit-mode/dnd/is-nestable.ts
-function isNestable(componentType, _parentType) {
-	if (componentType === PAGE_COMPONENT_TYPE) return false;
-	return true;
-}
-
-//#endregion
-//#region src/edit-mode/create-component.ts
-function getParentInfo(parent) {
-	return { type: getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id)?.type };
-}
-const generateUniqueName = (componentType) => {
-	const baseName = componentType;
-	let counter = 1;
-	let name = `${baseName}${counter}`;
-	while (root_store_default.nameManager.hasEntityWithName(name)) {
-		counter++;
-		name = `${baseName}${counter}`;
-	}
-	return name;
-};
-function getBinding({ componentType, editorTemplateCreateRequest }) {
-	if (editorTemplateCreateRequest?.generateBinding === true) return Property$1.Static(generateUniqueName(componentType));
-	else if (typeof editorTemplateCreateRequest?.generateBinding === "string") return Property$1.Static(editorTemplateCreateRequest.generateBinding);
-	else return;
-}
-function getComponentBaseProperties(componentType, _parentInfo, editorTemplateCreateRequest) {
-	let properties = {};
-	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
-	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
-	if (editorTemplateCreateRequest?.properties) properties = {
-		...properties,
-		...editorTemplateCreateRequest.properties
-	};
-	const binding = getBinding({
-		componentType,
-		editorTemplateCreateRequest
-	});
-	if (binding) properties.name = binding;
-	const { width, height, size: size$1 } = properties;
-	const safeDimensions = filterSafeStackDimensionProperties({
-		width: width?.value,
-		height: height?.value,
-		size: size$1?.value
-	});
-	return {
-		properties: {
-			...properties,
-			...safeDimensions
-		},
-		children: editorTemplateCreateRequest?.children ?? []
-	};
-}
-function getCreateAtParentElement(relativeParent, createAt) {
-	if (createAt === "root") {
-		const parentInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(relativeParent.id);
-		const pageComponent = getEditStore().runtimeEntitiesManager.getClosestAncestorByType(parentInstanceId, "Page");
-		if (!pageComponent) throw new Error(`Page component not found for parent: ${relativeParent.id}`);
-		return { source: { id: pageComponent.sourceId } };
-	} else return { source: relativeParent };
-}
-async function createComponent({ componentType, parent, scopeName, baseProperties = {}, skipSecondaryComponentsCreation, otherComponentsUpdates }) {
-	const parentInfo = getParentInfo(parent);
-	if (!isNestable(componentType, parentInfo.type)) {
-		console.error(`${componentType} cannot be nested under ${parentInfo.type}`);
-		return;
-	}
-	const editorTemplates = root_store_default.componentRegistry.getEditorTemplates(componentType);
-	if (editorTemplates && editorTemplates.length > 1) throw new Error(`Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`);
-	const context$1 = {
-		generateUniqueName,
-		parentInfo,
-		defaultTagNames: root_store_default.componentRegistry.defaultTagNames,
-		selfTagName: componentType
-	};
-	const editorTemplateCreateRequest = editorTemplates?.[0]?.create?.(context$1);
-	const primaryEditorTemplateCreateRequest = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest[0] : editorTemplateCreateRequest;
-	if (editorTemplateCreateRequest && primaryEditorTemplateCreateRequest?.type !== componentType) throw new Error(`When defining a ${Array.isArray(editorTemplateCreateRequest) ? "multiple" : "single"} component to be created on an EditorTemplate, the type must match with the component being created. got: ${primaryEditorTemplateCreateRequest?.type} when it should have been ${componentType}`);
-	const editorTemplateCreateRequests = Array.isArray(editorTemplateCreateRequest) ? editorTemplateCreateRequest : [editorTemplateCreateRequest];
-	const editStore = getEditStore();
-	function editorTemplateCreateRequestToInternalCreateRequest({ editorTemplateCreateRequest: editorTemplateCreateRequest$1, baseProperties: baseProperties$1 }) {
-		const type = editorTemplateCreateRequest$1?.type ?? componentType;
-		const { properties: propertiesFromType, children } = getComponentBaseProperties(type, parentInfo, editorTemplateCreateRequest$1);
-		const properties = {
-			...propertiesFromType,
-			...baseProperties$1
-		};
+  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() {
+	return useMemo(() => {
 		return {
-			parentElement: getCreateAtParentElement(parent, editorTemplateCreateRequest$1?.createAt),
-			tagName: type,
-			properties,
-			children,
-			scopeName,
-			id: editStore.operationManager.generateSourceId()
-		};
-	}
-	const createRequests = editorTemplateCreateRequests.map((editorTemplateCreateRequest$1, index) => editorTemplateCreateRequestToInternalCreateRequest({
-		editorTemplateCreateRequest: editorTemplateCreateRequest$1,
-		baseProperties: index === 0 ? baseProperties : {}
-	}));
-	const hasOtherComponentsUpdates = otherComponentsUpdates && Object.keys(otherComponentsUpdates).length > 0;
-	const hasMultipleCreateComponents = editorTemplateCreateRequests.length > 1 && !skipSecondaryComponentsCreation;
-	if (hasOtherComponentsUpdates || hasMultipleCreateComponents) {
-		const performOtherComponentsUpdates = (otherComponentsUpdates$1) => {
-			Object.entries(otherComponentsUpdates$1).forEach(([sourceId, updates]) => {
-				editStore.operationManager.setWidgetProperties({
-					sourceId,
-					properties: updates
-				});
-			});
+			isLoading: false,
+			data: { user: { name: "Test User" } }
 		};
-		editStore.operationManager.batchUpdate(() => {
-			if (skipSecondaryComponentsCreation) editStore.operationManager.createComponent(createRequests[0]);
-			else createRequests.forEach((createRequest) => {
-				editStore.operationManager.createComponent(createRequest);
-			});
-			if (hasOtherComponentsUpdates) performOtherComponentsUpdates(otherComponentsUpdates);
-		});
-	} else editStore.operationManager.createComponent(createRequests[0]);
-	/**
-	* Returns the single id, or the the last component if there are multiple.
-	* See EditorTemplate's definition to understand why.
-	*/
-	return createRequests.at(-1).id;
+	}, []);
 }
 
 //#endregion
@@ -6776,7 +7114,7 @@ const fixCursorSnapOffset = (args) => {
 	const sortedCollisions = rectIntersection(updated).filter((collision) => {
 		const activeRootInstanceId = editStore.interactionLayerManager.activeRootInstanceId;
 		if (!activeRootInstanceId) return true;
-		return collision.id === activeRootInstanceId || doesInteractionLayerContainInstance(activeRootInstanceId, collision.id);
+		return collision.id === activeRootInstanceId || editStore.runtimeEntitiesManager.isChildOf(collision.id, activeRootInstanceId);
 	}).map((collision) => {
 		const rect = collision.data?.droppableContainer?.rect.current;
 		const pointerInside = rect && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
@@ -6831,184 +7169,6 @@ const bubblingToParentIfFar = (args) => {
 };
 var collision_detection_default = fixCursorSnapOffset;
 
-//#endregion
-//#region src/edit-mode/dnd/handle-stack-drop.ts
-const mergeDroppedDimensions = (draggedType, draggedProps, activeDragRect) => {
-	const safeExistingDimensions = filterSafeStackDimensionProperties({
-		width: draggedProps?.width,
-		height: draggedProps?.height,
-		size: draggedProps?.size
-	});
-	const width = safeExistingDimensions.width;
-	const height = safeExistingDimensions.height;
-	if (draggedType === "Icon") return { size: safeExistingDimensions.size ?? (activeDragRect?.height ? Property$1.Dimension(Dim$1.px(activeDragRect.height)) : Property$1.Static("")) };
-	return {
-		width,
-		height
-	};
-};
-const handleStackDropWithinCanvas = (params) => {
-	const { dropInfo, draggedId, dropTargetId } = params;
-	const editStore = getEditStore();
-	const dropSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
-	const draggedSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(draggedId);
-	if (!dropSourceId || !draggedSourceId) throw new Error(`Missing IDs: dragging ${draggedId} to ${dropTargetId}`);
-	console.log(`Dragged ${draggedSourceId} to ${dropSourceId}`, {
-		dropInfo,
-		index: dropInfo.insertionIndex
-	});
-	if (dropInfo.noopDrop) return;
-	const draggedType = editStore.runtimeEntitiesManager.getEditorWidgetType(draggedId);
-	if (!draggedType) throw new Error(`Missing dragged type: ${draggedId}`);
-	const activeDragRect = editStore.ui.dnd.activeDragRect;
-	const draggedProps = editStore.runtimeEntitiesManager.getEditorWidgetMeta(draggedId)?.props;
-	editStore.operationManager.dropComponent({
-		from: { source: { id: draggedSourceId } },
-		to: { source: {
-			id: dropSourceId,
-			index: dropInfo.insertionIndex
-		} },
-		propsToChange: { ...mergeDroppedDimensions(draggedType, draggedProps, activeDragRect) }
-	});
-};
-const handleStackDropForNewComponent = ({ componentType, dropInfo, dropTargetId }) => {
-	const editStore = getEditStore();
-	const dropSourceId = editStore.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
-	const dropScopeId = editStore.runtimeEntitiesManager.getEditorWidgetScopeId(dropTargetId);
-	if (!dropSourceId || !dropScopeId) throw new Error("Missing drop source id");
-	const scopeName = root_store_default.entityManager.getScopeName(dropScopeId);
-	return createComponent({
-		componentType,
-		parent: {
-			index: dropInfo.insertionIndex,
-			id: dropSourceId
-		},
-		scopeName
-	});
-};
-const handleStackDrop = async ({ dropInfo, draggedId, dropTargetId, isDraggingNewComponent, newComponentType }) => {
-	if (dropInfo.insertionIndex == null) throw new Error("No insertion index found");
-	if (isDraggingNewComponent) {
-		if (!newComponentType) throw new Error("Missing componentType to create new component");
-		return handleStackDropForNewComponent({
-			componentType: newComponentType,
-			dropTargetId,
-			dropInfo
-		});
-	} else {
-		if (!draggedId) throw new Error("Missing dragged id");
-		handleStackDropWithinCanvas({
-			dropInfo,
-			draggedId,
-			dropTargetId
-		});
-	}
-};
-
-//#endregion
-//#region src/edit-mode/dnd/hooks/use-handle-dnd-events.ts
-const measureRect = (id) => {
-	const rect = id ? getBoundingBoxForWidget(id) : null;
-	if (!rect) return null;
-	return {
-		left: rect.left,
-		top: rect.top,
-		right: rect.right,
-		bottom: rect.bottom,
-		width: rect.width,
-		height: rect.height
-	};
-};
-const useHandleDnDEvents = () => {
-	const setActiveDragRect = useMemo(() => {
-		const editStore = getEditStore();
-		const throttled = throttle((rect) => {
-			editStore.ui.dnd.setActiveDragRect(rect);
-		}, 10, {
-			leading: true,
-			trailing: true
-		});
-		return (val) => {
-			throttled(val);
-		};
-	}, []);
-	const setActiveTargetInfo = useMemo(() => {
-		const editStore = getEditStore();
-		const throttled = throttle((id, rect) => {
-			editStore.ui.dnd.setDropTargetId(id);
-			editStore.ui.dnd.setActiveTargetRect(rect);
-		}, 10, {
-			leading: true,
-			trailing: true
-		});
-		return (id, val) => {
-			throttled(id, val);
-		};
-	}, []);
-	useDndMonitor({
-		onDragStart: useCallback((event) => {
-			const editStore = getEditStore();
-			if (!event.active?.data.current && !editStore.ui.dnd.isDraggingNewComponent) {
-				console.error("No active widget data");
-				return;
-			}
-			editStore.ui.dnd.setDropTargetId(null);
-			editStore.ui.dnd.setIsDragging(true);
-			if (editStore.ui.dnd.isDraggingNewComponent) {
-				editStore.ui.selectWidget(null);
-				editStore.ui.dnd.resizePageIfNeeded();
-			} else editStore.ui.selectWidget(event.active?.id ? event.active.id : null, event.activatorEvent?.shiftKey);
-		}, []),
-		onDragMove: useCallback((event) => {
-			setActiveTargetInfo(event.over?.id ?? null, event.over?.rect ?? null);
-			const collisionRect = event.collisions?.[0]?.data?.injectedCollisionRect;
-			if (collisionRect) setActiveDragRect(collisionRect);
-			else setActiveDragRect(null);
-		}, [setActiveDragRect, setActiveTargetInfo]),
-		onDragOver: useCallback((event) => {
-			const overId = event.over?.id ? String(event.over?.id) : null;
-			setActiveTargetInfo(overId, measureRect(overId));
-		}, [setActiveTargetInfo]),
-		onDragCancel: useCallback((_event) => {
-			const editStore = getEditStore();
-			editStore.ui.dnd.setIsDragging(false);
-			editStore.ui.dnd.cancelNewComponentDrag();
-		}, []),
-		onDragEnd: useCallback(async (event) => {
-			const editStore = getEditStore();
-			let possibleNewComponentId;
-			try {
-				if (!editStore.ui.dnd.isProspectiveDropValid) {
-					editorBridge.sendNotification("error", "You cannot drop a component here.");
-					return;
-				}
-				const dropTargetId = event.over?.id ? String(event.over.id) : null;
-				const draggedId = event.active?.id ? String(event.active?.id) : null;
-				if (dropTargetId !== editStore.ui.dnd.dropTargetId) throw new Error("Drop target id and drag over id do not match");
-				if (!dropTargetId) throw new Error("No drop target id");
-				if (editStore.ui.dnd.isDropTargetStackLike) {
-					const dropInfo = editStore.ui.dnd.stack.refreshPositionsAndGetDropIndex();
-					possibleNewComponentId = await handleStackDrop({
-						dropInfo,
-						isDraggingNewComponent: editStore.ui.dnd.isDraggingNewComponent,
-						newComponentType: editStore.ui.dnd.dragToCanvasComponentType,
-						dropTargetId,
-						draggedId
-					});
-				} else throw new Error("Grid is no longer supported");
-			} catch (e) {
-				console.error("Error dropping item", e);
-			} finally {
-				runInAction(() => {
-					editStore.ui.dnd.setIsDragging(false);
-					editStore.ui.dnd.cancelNewComponentDrag();
-					if (possibleNewComponentId) editStore.ui.selectNewComponentBySourceId(possibleNewComponentId);
-				});
-			}
-		}, [])
-	});
-};
-
 //#endregion
 //#region src/edit-mode/dnd/dnd-provider.tsx
 const pointerConfig = { activationConstraint: { distance: 10 } };
@@ -7023,18 +7183,14 @@ var CustomPointerSensor = class extends PointerSensor {
 		}
 	}];
 };
-const DragHandlerComponent = () => {
-	useHandleDnDEvents();
-	return null;
-};
 const DnDProvider = (props) => {
 	const pointerSensor = useSensor(PointerSensor, pointerConfig);
 	const customPointerSensor = useSensor(CustomPointerSensor);
 	const sensors = useSensors(pointerSensor, customPointerSensor);
-	return /* @__PURE__ */ jsxs(DndContext, {
+	return /* @__PURE__ */ jsx(DndContext, {
 		sensors,
 		collisionDetection: collision_detection_default,
-		children: [props.children, /* @__PURE__ */ jsx(DragHandlerComponent, {})]
+		children: props.children
 	});
 };
 
@@ -7176,16 +7332,9 @@ var InteractionLayerManager = class {
 	* if set to the detached component id, the interaction layer will be disabled on the page
 	*/
 	activeRootInstanceId = void 0;
-	interactionLayerInstanceIds = /* @__PURE__ */ new Set();
 	constructor() {
 		makeAutoObservable(this);
 	}
-	@action addInteractionLayerInstanceId(instanceId) {
-		this.interactionLayerInstanceIds.add(instanceId);
-	}
-	@action removeInteractionLayerInstanceId(instanceId) {
-		this.interactionLayerInstanceIds.delete(instanceId);
-	}
 	@action setActiveRootInstanceId(rootInstanceId) {
 		this.activeRootInstanceId = rootInstanceId;
 	}
@@ -8076,8 +8225,7 @@ var RuntimeEntitiesManager = class {
 		this.entitiesWithLocalBindings = new Set(entities);
 	}
 	doesEntityHaveLocalBindings(entity) {
-		const entitySourceId = this.getEditorWidgetSourceId(entity);
-		return entitySourceId && this.entitiesWithLocalBindings.has(entitySourceId);
+		return this.entitiesWithLocalBindings.has(entity);
 	}
 	getOptimisticWidgetChildrenIds(instanceId) {
 		return this.getChildrenWithOptimisticUpdates(instanceId).reduce((acc, child) => {
@@ -8559,36 +8707,14 @@ var DragAndDropManager = class {
 		const draggedInstanceId = this.root.editStore.ui.getSelectedInstanceIds()[0];
 		return draggedInstanceId ? getEditStore().runtimeEntitiesManager.getEditorWidgetType(draggedInstanceId) : void 0;
 	}
-	get draggedWidgetInstanceId() {
-		if (this.isDraggingNewComponent) return;
-		return this.root.editStore.ui.getSelectedInstanceIds()[0];
-	}
 	get dragToCanvasComponentType() {
 		return this._dragToCanvasComponentType;
 	}
 	get validRootIds() {
 		return this._validRootIds;
 	}
-	get isProspectiveDropValid() {
-		const dropTargetInstanceId = this.dropTargetId;
-		const draggedInstanceId = this.draggedWidgetInstanceId;
-		if (!dropTargetInstanceId) return false;
-		const isDraggingNewComponent = this.isDraggingNewComponent;
-		if (!areDragAndDropInstancesValid({
-			dropTargetInstanceId,
-			draggedInstanceId,
-			isDraggingNewComponent
-		})) return false;
-		const draggedType = this.draggedWidgetType;
-		const dropTargetType = this.dropTargetWidgetType;
-		if (!draggedType || !dropTargetType) return false;
-		const dropTargetEmpty = (dropTargetInstanceId && getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetInstanceId)?.children?.length === 0) ?? true;
-		return isDragAndDropTypeValid({
-			draggedType,
-			dropTargetType,
-			isDraggingNewComponent,
-			dropTargetEmpty
-		});
+	get invalidDropTarget() {
+		return this._invalidDropTarget;
 	}
 	canDragWidget(instanceId) {
 		const editStore = getEditStore();
@@ -8617,6 +8743,7 @@ var DragAndDropManager = class {
 			this._activeDragRect = null;
 			this._activeTargetRect = null;
 			this._validRootIds = null;
+			this._invalidDropTarget = false;
 		}
 	}
 	/**
@@ -8659,6 +8786,9 @@ var DragAndDropManager = class {
 	@action setValidRootIds(ids) {
 		this._validRootIds = ids;
 	}
+	@action setInvalidDropTarget(invalid) {
+		this._invalidDropTarget = invalid;
+	}
 	@action setDropTargetId(id) {
 		this._dropTargetInstanceId = id;
 		if (id == null) this._activeTargetRect = null;
@@ -9932,8 +10062,9 @@ const SbProvider = function SbProvider$1({ name = "codemode", settings, children
 	}, [runApiInitialization]);
 	useEffect(() => {
 		const mergedTheme = merge(BASE_THEME_V5, settings?.theme);
-		const userAccessibleTheme$1 = generateTheme(mergedTheme, settings?.themeOverrides);
-		setUserAccessibleTheme(userAccessibleTheme$1);
+		const generatedTheme = generateTheme(mergedTheme, settings?.themeOverrides);
+		editorBridge.updateTheme(mergedTheme, generatedTheme);
+		setUserAccessibleTheme(generatedTheme);
 	}, [settings?.theme, settings?.themeOverrides]);
 	useEffect(() => {
 		const resolvePromiseListener = (event) => {
@@ -10252,7 +10383,7 @@ function useDialogEditing(props) {
 	const selectedInstanceId = features.selectWidget.value;
 	useEffect(() => {
 		if (isEditing && instanceId) if (isOpen) {
-			if (!selectedInstanceId || selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId))
+			if (!selectedInstanceId || selectedInstanceId !== instanceId && !getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId))
  /**
 			* If the dialog is open and the dialog or its children are not selected, then select it.
 			* This happens when an event handler changes the open state of the dialog.
@@ -10268,10 +10399,10 @@ 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 && !getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId)) update((entity) => {
 					set(entity, isOpenPropertyName, false);
 				});
-			} else if (selectedInstanceId === instanceId || selectedInstanceId && doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {
+			} else if (selectedInstanceId === instanceId || selectedInstanceId && getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId)) update((entity) => {
 				set(entity, isOpenPropertyName, true);
 			});
 		}
@@ -11294,10 +11425,7 @@ function DroppableContainer({ name, componentType, isOpen, children, layout, cla
 		ref: dropTargetRef,
 		id: getEditWrapperIdWithType(instanceId, componentType),
 		style: EXPANDED,
-		children: [/* @__PURE__ */ jsx(InteractionLayerProvider, {
-			instanceId,
-			children: internalContainer
-		}), isOpen && /* @__PURE__ */ jsx(interaction_layer_default, {
+		children: [internalContainer, isOpen && /* @__PURE__ */ jsx(interaction_layer_default, {
 			rootType: componentType,
 			rootInstanceId: instanceId,
 			rootName: name