@superblocksteam/library 2.0.37-next.41 → 2.0.37-next.42

package/dist/index.js

@@ -2061,6 +2061,7 @@ const InternalStack = observer(({ direction = "column", spacing: spacing$1, chil
 	return /* @__PURE__ */ jsx("div", {
 		className: combinedClassName,
 		...rest,
+		ref: props.dropTargetRef,
 		children
 	});
 });
@@ -3242,10 +3243,13 @@ const getWidgetNode = (instanceId) => {
 	const type = root_store_default.nameManager.getExistingIdentifier(instanceId)?.type;
 	return document?.querySelector(`[data-sb-selector="${getEditWrapperIdWithType(instanceId, type)}"]`);
 };
-const getIsComponentInInteractionLayer = (instanceId) => {
+const doesInteractionLayerContainInstance = (possibleParent, possibleChild) => {
+	if (!possibleParent || !possibleChild) return false;
 	const editStore = getEditStore();
-	const activeRootInstanceId = editStore.interactionLayerManager.activeRootInstanceId;
-	return !activeRootInstanceId || instanceId && (instanceId === activeRootInstanceId || editStore.runtimeEntitiesManager.isChildOf(instanceId, activeRootInstanceId));
+	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;
 };
 
 //#endregion
@@ -3267,7 +3271,29 @@ function rule(description, restriction) {
 		restriction
 	};
 }
-const restrictions = [
+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 = [
 	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 }) => {
@@ -3275,7 +3301,7 @@ const restrictions = [
 	})
 ];
 const isDragAndDropTypeValid = ({ draggedType, dropTargetType, dropTargetEmpty, isDraggingNewComponent }) => {
-	return restrictions.find((restriction) => restriction.restriction({
+	return typeRestrictions.find((restriction) => restriction.restriction({
 		draggedType,
 		dropTargetType,
 		dropTargetEmpty,
@@ -3298,23 +3324,6 @@ 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 = {};
@@ -3368,13 +3377,13 @@ const DroppableWidget = observer((props) => {
 	const widgetNode = useWidgetNodeRef(props.instanceId);
 	useEffect(() => {
 		let targetNode = null;
-		if (props.dropTargetRef?.current) targetNode = props.dropTargetRef.current;
+		if (props.dropTargetElem) targetNode = props.dropTargetElem;
 		else if (widgetNode) targetNode = widgetNode;
 		if (targetNode) setDroppableNodeRef(targetNode);
 	}, [
 		widgetNode,
 		setDroppableNodeRef,
-		props.dropTargetRef
+		props.dropTargetElem
 	]);
 	return /* @__PURE__ */ jsx(React.Fragment, { children: props.children });
 });
@@ -3442,6 +3451,28 @@ 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) {
@@ -3475,413 +3506,6 @@ const CANVAS_ROOT_ID = "canvas-root";
 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
-	};
-};
-/**
-* 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 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
 const StackDropPreview = observer(() => {
@@ -3898,7 +3522,7 @@ const StackDropPreview = observer(() => {
 			bottom: "anchor(bottom)",
 			positionAnchor: getWidgetDropAreaAnchorName(dropTargetId, dropTargetWidgetType)
 		},
-		children: [!editStore.ui.dnd.invalidDropTarget && placeholders ? /* @__PURE__ */ jsx(Fragment, { children: placeholders.map((placeholder) => /* @__PURE__ */ jsx("div", {
+		children: [editStore.ui.dnd.isProspectiveDropValid && placeholders ? /* @__PURE__ */ jsx(Fragment, { children: placeholders.map((placeholder) => /* @__PURE__ */ jsx("div", {
 			className: "sb-edit-drop-placeholder",
 			style: {
 				top: placeholder.top,
@@ -3911,36 +3535,24 @@ 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.invalidDropTarget
+			"data-invalid-target": !editStore.ui.dnd.isProspectiveDropValid
 		})]
 	});
 });
 
 //#endregion
 //#region src/edit-mode/dnd/drop-layer.tsx
-const DropLayer = observer(() => {
-	useHandleDnDEvents();
+const DropLayer = observer((props) => {
 	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 = 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, {
+	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, {
 		modifiers: [snapCenterToCursor],
-		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`
-			}
-		})
+		dropAnimation: null
 	})] });
 });
 var drop_layer_default = DropLayer;
@@ -4393,18 +4005,18 @@ const useWidgetErrors = (params) => {
 	]);
 };
 const useSelectionElements = (params) => {
-	const { focusedInstanceId, selectedInstanceIds, targetedSourceIds, aiContextMode } = params;
+	const { focusedInstanceId, selectedInstanceIds, targetedSourceIds, aiContextMode, rootId } = params;
 	const allTargetedComponents = useMemo(() => {
 		const components = [];
 		targetedSourceIds.forEach((sourceId) => {
 			const sourceInstanceIds = getEditStore().runtimeEntitiesManager.widgets.getAllInstanceIdsForSourceId(sourceId);
-			components.push(...sourceInstanceIds.map((instanceId) => ({
+			components.push(...sourceInstanceIds.filter((instanceId) => doesInteractionLayerContainInstance(rootId, instanceId)).map((instanceId) => ({
 				instanceId,
 				sourceId
 			})));
 		});
 		return components;
-	}, [targetedSourceIds]);
+	}, [targetedSourceIds, rootId]);
 	const visibleTargetedComponents = useViewportIntersection(allTargetedComponents);
 	return useObserverMemo(() => {
 		const selectedRects = [];
@@ -4419,7 +4031,7 @@ const useSelectionElements = (params) => {
 				isVisible
 			});
 		});
-		selectedInstanceIds.forEach((instanceId) => {
+		selectedInstanceIds.filter((instanceId) => doesInteractionLayerContainInstance(rootId, instanceId)).forEach((instanceId) => {
 			const { type, displayName, sourceId, isVisible } = selectDisplayNameAndVisibility(instanceId);
 			if (sourceId && !targetedSourceIds.includes(sourceId)) selectedRects.push({
 				instanceId,
@@ -4430,7 +4042,7 @@ const useSelectionElements = (params) => {
 				isVisible
 			});
 		});
-		if (focusedInstanceId && (aiContextMode === AiContextMode.AUTO_SELECT || !selectedInstanceIds.includes(focusedInstanceId))) {
+		if (focusedInstanceId && doesInteractionLayerContainInstance(rootId, focusedInstanceId) && (aiContextMode === AiContextMode.AUTO_SELECT || !selectedInstanceIds.includes(focusedInstanceId))) {
 			const { type, displayName, sourceId, isVisible } = selectDisplayNameAndVisibility(focusedInstanceId);
 			if (sourceId) selectedRects.push({
 				instanceId: focusedInstanceId,
@@ -4447,7 +4059,8 @@ const useSelectionElements = (params) => {
 		selectedInstanceIds,
 		targetedSourceIds,
 		aiContextMode,
-		visibleTargetedComponents
+		visibleTargetedComponents,
+		rootId
 	]);
 };
 const InteractionRectTargetBorder = ({ instanceId }) => {
@@ -4679,7 +4292,7 @@ const InteractionLayer = observer((props) => {
 		displayName: props.rootName ?? "Unknown",
 		hideRectBorder: false
 	}, props.rootInstanceId) : null;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
 		className: "sb-interaction-layer-wrapper",
 		children: [
 			interactionRectsForSelectedElements,
@@ -4690,9 +4303,9 @@ const InteractionLayer = observer((props) => {
 				displayName: name,
 				instanceId: id
 			}, id)),
-			props.rootType !== "App" && /* @__PURE__ */ jsx(drop_layer_default, {})
+			/* @__PURE__ */ jsx(drop_layer_default, { rootInstanceId: props.rootInstanceId })
 		]
-	});
+	}) });
 });
 var interaction_layer_default = InteractionLayer;
 
@@ -4787,7 +4400,7 @@ const stableEffectOptions$1 = {
 	cold: true
 };
 function useRuntimeEditTracking(props) {
-	const { parentInstanceId, directParentInstanceId, identifier, type, children, widgetProps, rootInstanceId, indexWithinParent, isRoot, isInsideRoot } = props;
+	const { parentInstanceId, directParentInstanceId, identifier, type, children, widgetProps, rootInstanceId, interactionLayerInstanceId, indexWithinParent, isRoot, isInsideRoot } = props;
 	const { children: _children,...rest } = widgetProps;
 	use_stable_effect_default(() => {
 		const widgetMeta = {
@@ -4802,6 +4415,7 @@ function useRuntimeEditTracking(props) {
 			directParentInstanceId,
 			sourceId: identifier.sourceId,
 			rootInstanceId,
+			interactionLayerInstanceId,
 			isRoot,
 			isInsideRoot
 		};
@@ -4814,6 +4428,7 @@ function useRuntimeEditTracking(props) {
 		parentInstanceId,
 		directParentInstanceId,
 		rootInstanceId,
+		interactionLayerInstanceId,
 		type,
 		rest
 	}, stableEffectOptions$1);
@@ -4913,6 +4528,7 @@ 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,
@@ -4921,6 +4537,7 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		children: props.children,
 		widgetProps: props.widgetProps,
 		rootInstanceId,
+		interactionLayerInstanceId,
 		indexWithinParent: props.indexWithinParent,
 		isRoot,
 		isInsideRoot
@@ -4963,7 +4580,7 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		editStore$1.ui.selectWidget(props.identifier.instanceId, ev.shiftKey === true);
 		stopPropagation();
 	}, [props.identifier.sourceId, props.identifier.instanceId]);
-	const dropTargetRef = useRef(null);
+	const [dropTargetElem, setDropTargetElem] = useState(null);
 	const handleRef = useCallback((el) => {
 		setDraggableNodeRef(el);
 	}, [setDraggableNodeRef]);
@@ -5001,7 +4618,7 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 			identifier,
 			widgetProps: props.widgetProps,
 			editorProps,
-			dropTargetRef,
+			dropTargetRef: setDropTargetElem,
 			showErrors: true,
 			children: [showVisibilityBackground && /* @__PURE__ */ jsx("div", {
 				className: VisibilityOverlayClass,
@@ -5020,10 +4637,13 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	}) : node;
 	if (isDroppable) content = /* @__PURE__ */ jsx(droppable_widget_default, {
 		instanceId: props.identifier.instanceId,
-		dropTargetRef,
+		dropTargetElem,
 		children: content
 	});
-	if (props.type === "App" || props.type === "Page") return /* @__PURE__ */ jsxs(Fragment, { children: [content, /* @__PURE__ */ jsx(interaction_layer_default, {
+	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, {
 		rootType: props.type,
 		rootInstanceId: props.identifier.instanceId,
 		rootName: identifier.name.value
@@ -6537,7 +6157,6 @@ 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
@@ -6993,10 +6612,137 @@ const FullPageSpinner = () => {
 function useGetCurrentUserQuery() {
 	return useMemo(() => {
 		return {
-			isLoading: false,
-			data: { user: { name: "Test User" } }
+			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
+		};
+		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
+				});
+			});
+		};
+		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
@@ -7020,7 +6766,7 @@ const fixCursorSnapOffset = (args) => {
 	const sortedCollisions = rectIntersection(updated).filter((collision) => {
 		const activeRootInstanceId = editStore.interactionLayerManager.activeRootInstanceId;
 		if (!activeRootInstanceId) return true;
-		return collision.id === activeRootInstanceId || editStore.runtimeEntitiesManager.isChildOf(collision.id, activeRootInstanceId);
+		return collision.id === activeRootInstanceId || doesInteractionLayerContainInstance(activeRootInstanceId, collision.id);
 	}).map((collision) => {
 		const rect = collision.data?.droppableContainer?.rect.current;
 		const pointerInside = rect && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
@@ -7075,6 +6821,184 @@ 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 } };
@@ -7089,14 +7013,18 @@ 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__ */ jsx(DndContext, {
+	return /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: collision_detection_default,
-		children: props.children
+		children: [props.children, /* @__PURE__ */ jsx(DragHandlerComponent, {})]
 	});
 };
 
@@ -7238,9 +7166,16 @@ 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;
 	}
@@ -8131,7 +8066,8 @@ var RuntimeEntitiesManager = class {
 		this.entitiesWithLocalBindings = new Set(entities);
 	}
 	doesEntityHaveLocalBindings(entity) {
-		return this.entitiesWithLocalBindings.has(entity);
+		const entitySourceId = this.getEditorWidgetSourceId(entity);
+		return entitySourceId && this.entitiesWithLocalBindings.has(entitySourceId);
 	}
 	getOptimisticWidgetChildrenIds(instanceId) {
 		return this.getChildrenWithOptimisticUpdates(instanceId).reduce((acc, child) => {
@@ -8613,14 +8549,36 @@ 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 invalidDropTarget() {
-		return this._invalidDropTarget;
+	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
+		});
 	}
 	canDragWidget(instanceId) {
 		const editStore = getEditStore();
@@ -8649,7 +8607,6 @@ var DragAndDropManager = class {
 			this._activeDragRect = null;
 			this._activeTargetRect = null;
 			this._validRootIds = null;
-			this._invalidDropTarget = false;
 		}
 	}
 	/**
@@ -8692,9 +8649,6 @@ 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;
@@ -10288,7 +10242,7 @@ function useDialogEditing(props) {
 	const selectedInstanceId = features.selectWidget.value;
 	useEffect(() => {
 		if (isEditing && instanceId) if (isOpen) {
-			if (!selectedInstanceId || selectedInstanceId !== instanceId && !getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId))
+			if (!selectedInstanceId || selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId))
  /**
 			* 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.
@@ -10304,10 +10258,10 @@ function useDialogEditing(props) {
 		if (isEditing && instanceId) {
 			if (prevIsOpenRef.current !== isOpen && !(prevIsOpenRef.current === void 0 && isOpen === false)) return;
 			if (isOpen) {
-				if (selectedInstanceId && selectedInstanceId !== instanceId && !getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId)) update((entity) => {
+				if (selectedInstanceId && selectedInstanceId !== instanceId && !doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {
 					set(entity, isOpenPropertyName, false);
 				});
-			} else if (selectedInstanceId === instanceId || selectedInstanceId && getEditStore().runtimeEntitiesManager.isChildOf(selectedInstanceId, instanceId)) update((entity) => {
+			} else if (selectedInstanceId === instanceId || selectedInstanceId && doesInteractionLayerContainInstance(instanceId, selectedInstanceId)) update((entity) => {
 				set(entity, isOpenPropertyName, true);
 			});
 		}
@@ -11330,7 +11284,10 @@ function DroppableContainer({ name, componentType, isOpen, children, layout, cla
 		ref: dropTargetRef,
 		id: getEditWrapperIdWithType(instanceId, componentType),
 		style: EXPANDED,
-		children: [internalContainer, isOpen && /* @__PURE__ */ jsx(interaction_layer_default, {
+		children: [/* @__PURE__ */ jsx(InteractionLayerProvider, {
+			instanceId,
+			children: internalContainer
+		}), isOpen && /* @__PURE__ */ jsx(interaction_layer_default, {
 			rootType: componentType,
 			rootInstanceId: instanceId,
 			rootName: name