@btst/stack 1.10.0 → 1.12.0

package/dist/packages/ui/src/lib/ui-builder/context/dnd-context-colission-utils.mjs

@@ -136,17 +136,22 @@ const getTransformState = () => {
     const transform = computedStyle.transform;
     if (transform && transform !== "none") {
       const matrixMatch = transform.match(/matrix\(([^)]*)\)/);
-      if (matrixMatch) {
+      if (matrixMatch && matrixMatch[1]) {
         const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
         if (values.length >= 6) {
-          transformState = {
-            scale: values[0],
-            // scaleX
-            positionX: values[4],
-            // translateX
-            positionY: values[5]
-            // translateY
-          };
+          const scale = values[0];
+          const positionX = values[4];
+          const positionY = values[5];
+          if (scale !== void 0 && positionX !== void 0 && positionY !== void 0) {
+            transformState = {
+              scale,
+              // scaleX
+              positionX,
+              // translateX
+              positionY
+              // translateY
+            };
+          }
         }
       }
     }

package/dist/packages/ui/src/lib/ui-builder/context/dnd-context.cjs

@@ -13,37 +13,59 @@ const useDndEventHandlers = require('../hooks/use-dnd-event-handlers.cjs');
 const useDropValidation = require('../hooks/use-drop-validation.cjs');
 const useKeyboardShortcutsDnd = require('../hooks/use-keyboard-shortcuts-dnd.cjs');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const DndContextProvider = ({ children }) => {
   const [activeLayerId, setActiveLayerId] = React.useState(null);
+  const [newComponentType, setNewComponentType] = React.useState(null);
   const [componentDragging, setComponentDragging] = React.useState(false);
   const { handleParentMouseMove, handleIframeMouseMove, stopAutoScroll } = useAutoScroll.useAutoScroll();
   const sensors = useDndSensors.useDndSensors();
+  const clearDragState = React.useCallback(() => {
+    setActiveLayerId(null);
+    setNewComponentType(null);
+  }, []);
+  const canDropOnLayerRef = React__default.useRef(() => false);
   const { handleDragStart, handleDragEnd, handleDragCancel, isLayerDescendantOf } = useDndEventHandlers.useDndEventHandlers({
     stopAutoScroll,
-    setActiveLayerId
+    setActiveLayerId,
+    setNewComponentType,
+    clearDragState,
+    canDropOnLayer: (layerId) => canDropOnLayerRef.current(layerId)
   });
-  const { canDropOnLayer } = useDropValidation.useDropValidation(activeLayerId, isLayerDescendantOf);
-  useKeyboardShortcutsDnd.useKeyboardShortcutsDnd(activeLayerId, handleDragCancel);
+  const { canDropOnLayer } = useDropValidation.useDropValidation(activeLayerId, isLayerDescendantOf, newComponentType);
+  React__default.useEffect(() => {
+    canDropOnLayerRef.current = canDropOnLayer;
+  }, [canDropOnLayer]);
+  const handleKeyboardCancel = React.useCallback(() => {
+    handleDragCancel();
+    clearDragState();
+  }, [handleDragCancel, clearDragState]);
+  useKeyboardShortcutsDnd.useKeyboardShortcutsDnd(activeLayerId || newComponentType, handleKeyboardCancel);
   const collisionDetection = dndContextColissionUtils.createTransformAwareCollisionDetection();
   const contextValue = React.useMemo(() => ({
-    isDragging: !!activeLayerId,
+    isDragging: !!activeLayerId || !!newComponentType,
     activeLayerId,
+    newComponentType,
     canDropOnLayer
-  }), [activeLayerId, canDropOnLayer]);
+  }), [activeLayerId, newComponentType, canDropOnLayer]);
   const componentDragContextValue = React.useMemo(() => ({
     isDragging: componentDragging,
     setDragging: setComponentDragging
   }), [componentDragging]);
+  const isDragging = !!activeLayerId || !!newComponentType;
   React.useEffect(() => {
-    if (activeLayerId) {
-      const handleParentMove = (event) => handleParentMouseMove(event, activeLayerId);
+    if (isDragging) {
+      const handleParentMove = (event) => handleParentMouseMove(event, true);
       document.addEventListener("mousemove", handleParentMove);
       const iframeElements = dndUtils.getIframeElements();
       let iframeCleanup = null;
       if (iframeElements) {
         const { window: iframeWindow } = iframeElements;
         if (iframeWindow) {
-          const handleIframeMove = (event) => handleIframeMouseMove(event, activeLayerId);
+          const handleIframeMove = (event) => handleIframeMouseMove(event, true);
           iframeWindow.addEventListener("mousemove", handleIframeMove);
           iframeCleanup = () => {
             try {
@@ -64,7 +86,7 @@ const DndContextProvider = ({ children }) => {
     } else {
       stopAutoScroll();
     }
-  }, [activeLayerId, handleParentMouseMove, handleIframeMouseMove, stopAutoScroll]);
+  }, [isDragging, handleParentMouseMove, handleIframeMouseMove, stopAutoScroll]);
   React.useEffect(() => {
     return () => {
       stopAutoScroll();
@@ -80,7 +102,13 @@ const DndContextProvider = ({ children }) => {
       onDragCancel: handleDragCancel,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(dragOverlay.TransformAwareDragOverlay, { children: activeLayerId ? /* @__PURE__ */ jsxRuntime.jsx(dragOverlay.DragOverlayContent, { layerId: activeLayerId }) : null })
+        /* @__PURE__ */ jsxRuntime.jsx(dragOverlay.TransformAwareDragOverlay, { children: activeLayerId || newComponentType ? /* @__PURE__ */ jsxRuntime.jsx(
+          dragOverlay.DragOverlayContent,
+          {
+            layerId: activeLayerId || void 0,
+            componentType: newComponentType || void 0
+          }
+        ) : null })
       ]
     }
   ) }) });

package/dist/packages/ui/src/lib/ui-builder/context/dnd-context.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
+import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { DndContext } from '../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.mjs';
 import { createTransformAwareCollisionDetection } from './dnd-context-colission-utils.mjs';
 import { getIframeElements } from './dnd-utils.mjs';
@@ -14,35 +14,53 @@ import { useKeyboardShortcutsDnd } from '../hooks/use-keyboard-shortcuts-dnd.mjs
 
 const DndContextProvider = ({ children }) => {
   const [activeLayerId, setActiveLayerId] = useState(null);
+  const [newComponentType, setNewComponentType] = useState(null);
   const [componentDragging, setComponentDragging] = useState(false);
   const { handleParentMouseMove, handleIframeMouseMove, stopAutoScroll } = useAutoScroll();
   const sensors = useDndSensors();
+  const clearDragState = useCallback(() => {
+    setActiveLayerId(null);
+    setNewComponentType(null);
+  }, []);
+  const canDropOnLayerRef = React__default.useRef(() => false);
   const { handleDragStart, handleDragEnd, handleDragCancel, isLayerDescendantOf } = useDndEventHandlers({
     stopAutoScroll,
-    setActiveLayerId
+    setActiveLayerId,
+    setNewComponentType,
+    clearDragState,
+    canDropOnLayer: (layerId) => canDropOnLayerRef.current(layerId)
   });
-  const { canDropOnLayer } = useDropValidation(activeLayerId, isLayerDescendantOf);
-  useKeyboardShortcutsDnd(activeLayerId, handleDragCancel);
+  const { canDropOnLayer } = useDropValidation(activeLayerId, isLayerDescendantOf, newComponentType);
+  React__default.useEffect(() => {
+    canDropOnLayerRef.current = canDropOnLayer;
+  }, [canDropOnLayer]);
+  const handleKeyboardCancel = useCallback(() => {
+    handleDragCancel();
+    clearDragState();
+  }, [handleDragCancel, clearDragState]);
+  useKeyboardShortcutsDnd(activeLayerId || newComponentType, handleKeyboardCancel);
   const collisionDetection = createTransformAwareCollisionDetection();
   const contextValue = useMemo(() => ({
-    isDragging: !!activeLayerId,
+    isDragging: !!activeLayerId || !!newComponentType,
     activeLayerId,
+    newComponentType,
     canDropOnLayer
-  }), [activeLayerId, canDropOnLayer]);
+  }), [activeLayerId, newComponentType, canDropOnLayer]);
   const componentDragContextValue = useMemo(() => ({
     isDragging: componentDragging,
     setDragging: setComponentDragging
   }), [componentDragging]);
+  const isDragging = !!activeLayerId || !!newComponentType;
   useEffect(() => {
-    if (activeLayerId) {
-      const handleParentMove = (event) => handleParentMouseMove(event, activeLayerId);
+    if (isDragging) {
+      const handleParentMove = (event) => handleParentMouseMove(event, true);
       document.addEventListener("mousemove", handleParentMove);
       const iframeElements = getIframeElements();
       let iframeCleanup = null;
       if (iframeElements) {
         const { window: iframeWindow } = iframeElements;
         if (iframeWindow) {
-          const handleIframeMove = (event) => handleIframeMouseMove(event, activeLayerId);
+          const handleIframeMove = (event) => handleIframeMouseMove(event, true);
           iframeWindow.addEventListener("mousemove", handleIframeMove);
           iframeCleanup = () => {
             try {
@@ -63,7 +81,7 @@ const DndContextProvider = ({ children }) => {
     } else {
       stopAutoScroll();
     }
-  }, [activeLayerId, handleParentMouseMove, handleIframeMouseMove, stopAutoScroll]);
+  }, [isDragging, handleParentMouseMove, handleIframeMouseMove, stopAutoScroll]);
   useEffect(() => {
     return () => {
       stopAutoScroll();
@@ -79,7 +97,13 @@ const DndContextProvider = ({ children }) => {
       onDragCancel: handleDragCancel,
       children: [
         children,
-        /* @__PURE__ */ jsx(TransformAwareDragOverlay, { children: activeLayerId ? /* @__PURE__ */ jsx(DragOverlayContent, { layerId: activeLayerId }) : null })
+        /* @__PURE__ */ jsx(TransformAwareDragOverlay, { children: activeLayerId || newComponentType ? /* @__PURE__ */ jsx(
+          DragOverlayContent,
+          {
+            layerId: activeLayerId || void 0,
+            componentType: newComponentType || void 0
+          }
+        ) : null })
       ]
     }
   ) }) });

package/dist/packages/ui/src/lib/ui-builder/context/dnd-contexts.cjs

@@ -5,6 +5,7 @@ const React = require('react');
 const DndContextStateContext = React.createContext({
   isDragging: false,
   activeLayerId: null,
+  newComponentType: null,
   canDropOnLayer: () => false
 });
 const ComponentDragContext = React.createContext({

package/dist/packages/ui/src/lib/ui-builder/context/dnd-contexts.mjs

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 const DndContextStateContext = createContext({
   isDragging: false,
   activeLayerId: null,
+  newComponentType: null,
   canDropOnLayer: () => false
 });
 const ComponentDragContext = createContext({

package/dist/packages/ui/src/lib/ui-builder/context/drag-overlay.cjs

@@ -34,10 +34,13 @@ const TransformAwareDragOverlay = ({ children }) => {
     mountNode
   );
 };
-const DragOverlayContent = ({ layerId }) => {
-  const layer = layerStore.useLayerStore((state) => state.findLayerById(layerId));
-  if (!layer) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 bg-white shadow-lg border border-gray-200 rounded px-2 py-1 text-sm font-medium opacity-60 text-nowrap min-w-fit", children: layer.name || layer.type });
+const DragOverlayContent = ({ layerId, componentType }) => {
+  const layer = layerStore.useLayerStore((state) => layerId ? state.findLayerById(layerId) : null);
+  const displayName = layer?.name || layer?.type || componentType || "Component";
+  if (!layer && !componentType) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 bg-white dark:bg-gray-800 shadow-lg border-2 border-primary/50 rounded-lg px-3 py-2 text-sm font-medium opacity-90 text-nowrap min-w-fit pointer-events-none", children: displayName });
 };
 
 exports.DragOverlayContent = DragOverlayContent;

package/dist/packages/ui/src/lib/ui-builder/context/drag-overlay.mjs

@@ -32,10 +32,13 @@ const TransformAwareDragOverlay = ({ children }) => {
     mountNode
   );
 };
-const DragOverlayContent = ({ layerId }) => {
-  const layer = useLayerStore((state) => state.findLayerById(layerId));
-  if (!layer) return null;
-  return /* @__PURE__ */ jsx("div", { className: "mt-10 bg-white shadow-lg border border-gray-200 rounded px-2 py-1 text-sm font-medium opacity-60 text-nowrap min-w-fit", children: layer.name || layer.type });
+const DragOverlayContent = ({ layerId, componentType }) => {
+  const layer = useLayerStore((state) => layerId ? state.findLayerById(layerId) : null);
+  const displayName = layer?.name || layer?.type || componentType || "Component";
+  if (!layer && !componentType) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mt-10 bg-white dark:bg-gray-800 shadow-lg border-2 border-primary/50 rounded-lg px-3 py-2 text-sm font-medium opacity-90 text-nowrap min-w-fit pointer-events-none", children: displayName });
 };
 
 export { DragOverlayContent, TransformAwareDragOverlay };

package/dist/packages/ui/src/lib/ui-builder/hooks/use-auto-scroll.cjs

@@ -83,15 +83,15 @@ const useAutoScroll = () => {
       }
     }
   }, []);
-  const handleParentMouseMove = React.useCallback((event, activeLayerId) => {
-    if (!activeLayerId) return;
+  const handleParentMouseMove = React.useCallback((event, isDragging) => {
+    if (!isDragging) return;
     mousePositionRef.current = { x: event.clientX, y: event.clientY };
     if (!animationFrameRef.current) {
       animationFrameRef.current = requestAnimationFrame(performAutoScroll);
     }
   }, [performAutoScroll]);
-  const handleIframeMouseMove = React.useCallback((event, activeLayerId) => {
-    if (!activeLayerId) return;
+  const handleIframeMouseMove = React.useCallback((event, isDragging) => {
+    if (!isDragging) return;
     const iframeElements = dndUtils.getIframeElements();
     if (!iframeElements) return;
     const { iframe } = iframeElements;

package/dist/packages/ui/src/lib/ui-builder/hooks/use-auto-scroll.mjs

@@ -81,15 +81,15 @@ const useAutoScroll = () => {
       }
     }
   }, []);
-  const handleParentMouseMove = useCallback((event, activeLayerId) => {
-    if (!activeLayerId) return;
+  const handleParentMouseMove = useCallback((event, isDragging) => {
+    if (!isDragging) return;
     mousePositionRef.current = { x: event.clientX, y: event.clientY };
     if (!animationFrameRef.current) {
       animationFrameRef.current = requestAnimationFrame(performAutoScroll);
     }
   }, [performAutoScroll]);
-  const handleIframeMouseMove = useCallback((event, activeLayerId) => {
-    if (!activeLayerId) return;
+  const handleIframeMouseMove = useCallback((event, isDragging) => {
+    if (!isDragging) return;
     const iframeElements = getIframeElements();
     if (!iframeElements) return;
     const { iframe } = iframeElements;

package/dist/packages/ui/src/lib/ui-builder/hooks/use-dnd-event-handlers.cjs

@@ -4,8 +4,15 @@ const React = require('react');
 const layerStore = require('../store/layer-store.cjs');
 const layerUtils = require('../store/layer-utils.cjs');
 
-const useDndEventHandlers = ({ stopAutoScroll, setActiveLayerId }) => {
+const useDndEventHandlers = ({
+  stopAutoScroll,
+  setActiveLayerId,
+  setNewComponentType,
+  clearDragState,
+  canDropOnLayer
+}) => {
   const moveLayer = layerStore.useLayerStore((state) => state.moveLayer);
+  const addComponentLayer = layerStore.useLayerStore((state) => state.addComponentLayer);
   const pages = layerStore.useLayerStore((state) => state.pages);
   const isLayerDescendantOf = React.useCallback((childId, parentId) => {
     if (childId === parentId) return true;
@@ -16,34 +23,64 @@ const useDndEventHandlers = ({ stopAutoScroll, setActiveLayerId }) => {
     const { active } = event;
     if (active.data.current?.type === "layer") {
       setActiveLayerId(active.data.current.layerId);
-    } else {
-      console.log("Drag start: Non-layer drag detected", active.data.current?.type);
+    } else if (active.data.current?.type === "new-component") {
+      const componentType = active.data.current.componentType;
+      if (componentType && setNewComponentType) {
+        setNewComponentType(componentType);
+      }
     }
-  }, [setActiveLayerId]);
+  }, [setActiveLayerId, setNewComponentType]);
   const handleDragEnd = React.useCallback((event) => {
     const { active, over } = event;
     stopAutoScroll();
-    if (!over || !active.data.current?.layerId) {
-      setActiveLayerId(null);
+    const activeData = active.data.current;
+    const overData = over?.data.current;
+    if (!over || !overData || overData.type !== "drop-zone") {
+      if (clearDragState) {
+        clearDragState();
+      } else {
+        setActiveLayerId(null);
+      }
       return;
     }
-    const activeLayerId = active.data.current.layerId;
-    const overData = over.data.current;
-    if (overData?.type === "drop-zone") {
-      const targetParentId = overData.parentId;
-      const targetPosition = overData.position;
-      if (isLayerDescendantOf(targetParentId, activeLayerId)) {
+    const targetParentId = overData.parentId;
+    const targetPosition = overData.position;
+    if (canDropOnLayer && !canDropOnLayer(targetParentId)) {
+      if (clearDragState) {
+        clearDragState();
+      } else {
         setActiveLayerId(null);
+      }
+      return;
+    }
+    if (activeData?.type === "layer" && activeData.layerId) {
+      const activeLayerId = activeData.layerId;
+      if (isLayerDescendantOf(targetParentId, activeLayerId)) {
+        if (clearDragState) {
+          clearDragState();
+        } else {
+          setActiveLayerId(null);
+        }
         return;
       }
       moveLayer(activeLayerId, targetParentId, targetPosition);
+    } else if (activeData?.type === "new-component" && activeData.componentType) {
+      addComponentLayer(activeData.componentType, targetParentId, targetPosition);
+    }
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
     }
-    setActiveLayerId(null);
-  }, [moveLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId]);
+  }, [moveLayer, addComponentLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId, clearDragState, canDropOnLayer]);
   const handleDragCancel = React.useCallback(() => {
     stopAutoScroll();
-    setActiveLayerId(null);
-  }, [stopAutoScroll, setActiveLayerId]);
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
+    }
+  }, [stopAutoScroll, setActiveLayerId, clearDragState]);
   return {
     handleDragStart,
     handleDragEnd,

package/dist/packages/ui/src/lib/ui-builder/hooks/use-dnd-event-handlers.mjs

@@ -2,8 +2,15 @@ import { useCallback } from 'react';
 import { useLayerStore } from '../store/layer-store.mjs';
 import { findAllParentLayersRecursive } from '../store/layer-utils.mjs';
 
-const useDndEventHandlers = ({ stopAutoScroll, setActiveLayerId }) => {
+const useDndEventHandlers = ({
+  stopAutoScroll,
+  setActiveLayerId,
+  setNewComponentType,
+  clearDragState,
+  canDropOnLayer
+}) => {
   const moveLayer = useLayerStore((state) => state.moveLayer);
+  const addComponentLayer = useLayerStore((state) => state.addComponentLayer);
   const pages = useLayerStore((state) => state.pages);
   const isLayerDescendantOf = useCallback((childId, parentId) => {
     if (childId === parentId) return true;
@@ -14,34 +21,64 @@ const useDndEventHandlers = ({ stopAutoScroll, setActiveLayerId }) => {
     const { active } = event;
     if (active.data.current?.type === "layer") {
       setActiveLayerId(active.data.current.layerId);
-    } else {
-      console.log("Drag start: Non-layer drag detected", active.data.current?.type);
+    } else if (active.data.current?.type === "new-component") {
+      const componentType = active.data.current.componentType;
+      if (componentType && setNewComponentType) {
+        setNewComponentType(componentType);
+      }
     }
-  }, [setActiveLayerId]);
+  }, [setActiveLayerId, setNewComponentType]);
   const handleDragEnd = useCallback((event) => {
     const { active, over } = event;
     stopAutoScroll();
-    if (!over || !active.data.current?.layerId) {
-      setActiveLayerId(null);
+    const activeData = active.data.current;
+    const overData = over?.data.current;
+    if (!over || !overData || overData.type !== "drop-zone") {
+      if (clearDragState) {
+        clearDragState();
+      } else {
+        setActiveLayerId(null);
+      }
       return;
     }
-    const activeLayerId = active.data.current.layerId;
-    const overData = over.data.current;
-    if (overData?.type === "drop-zone") {
-      const targetParentId = overData.parentId;
-      const targetPosition = overData.position;
-      if (isLayerDescendantOf(targetParentId, activeLayerId)) {
+    const targetParentId = overData.parentId;
+    const targetPosition = overData.position;
+    if (canDropOnLayer && !canDropOnLayer(targetParentId)) {
+      if (clearDragState) {
+        clearDragState();
+      } else {
         setActiveLayerId(null);
+      }
+      return;
+    }
+    if (activeData?.type === "layer" && activeData.layerId) {
+      const activeLayerId = activeData.layerId;
+      if (isLayerDescendantOf(targetParentId, activeLayerId)) {
+        if (clearDragState) {
+          clearDragState();
+        } else {
+          setActiveLayerId(null);
+        }
         return;
       }
       moveLayer(activeLayerId, targetParentId, targetPosition);
+    } else if (activeData?.type === "new-component" && activeData.componentType) {
+      addComponentLayer(activeData.componentType, targetParentId, targetPosition);
+    }
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
     }
-    setActiveLayerId(null);
-  }, [moveLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId]);
+  }, [moveLayer, addComponentLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId, clearDragState, canDropOnLayer]);
   const handleDragCancel = useCallback(() => {
     stopAutoScroll();
-    setActiveLayerId(null);
-  }, [stopAutoScroll, setActiveLayerId]);
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
+    }
+  }, [stopAutoScroll, setActiveLayerId, clearDragState]);
   return {
     handleDragStart,
     handleDragEnd,

package/dist/packages/ui/src/lib/ui-builder/hooks/use-drop-validation.cjs

@@ -5,22 +5,38 @@ const layerStore = require('../store/layer-store.cjs');
 const editorStore = require('../store/editor-store.cjs');
 const layerUtils = require('../store/layer-utils.cjs');
 
-const useDropValidation = (activeLayerId, isLayerDescendantOf) => {
+const useDropValidation = (activeLayerId, isLayerDescendantOf, newComponentType) => {
   const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
   const componentRegistry = editorStore.useEditorStore((state) => state.registry);
   const canDropOnLayer = React.useCallback((layerId) => {
+    if (!layerId) return false;
     const targetLayer = findLayerById(layerId);
     if (!targetLayer) return false;
-    if (!activeLayerId) {
+    if (!activeLayerId && !newComponentType) {
       return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
     }
-    if (isLayerDescendantOf(layerId, activeLayerId)) {
-      return false;
+    if (newComponentType) {
+      const componentDef = componentRegistry[newComponentType];
+      if (componentDef?.childOf && !componentDef.childOf.includes(targetLayer.type)) {
+        return false;
+      }
+      return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
+    }
+    if (activeLayerId) {
+      if (isLayerDescendantOf(layerId, activeLayerId)) {
+        return false;
+      }
+      const draggedLayer = findLayerById(activeLayerId);
+      if (!draggedLayer) {
+        return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
+      }
+      const draggedDef = componentRegistry[draggedLayer.type];
+      if (draggedDef?.childOf && !draggedDef.childOf.includes(targetLayer.type)) {
+        return false;
+      }
     }
-    const draggedLayer = findLayerById(activeLayerId);
-    if (!draggedLayer) return false;
     return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
-  }, [activeLayerId, isLayerDescendantOf, findLayerById, componentRegistry]);
+  }, [activeLayerId, newComponentType, isLayerDescendantOf, findLayerById, componentRegistry]);
   return { canDropOnLayer };
 };
 

package/dist/packages/ui/src/lib/ui-builder/hooks/use-drop-validation.mjs

@@ -3,22 +3,38 @@ import { useLayerStore } from '../store/layer-store.mjs';
 import { useEditorStore } from '../store/editor-store.mjs';
 import { canLayerAcceptChildren } from '../store/layer-utils.mjs';
 
-const useDropValidation = (activeLayerId, isLayerDescendantOf) => {
+const useDropValidation = (activeLayerId, isLayerDescendantOf, newComponentType) => {
   const findLayerById = useLayerStore((state) => state.findLayerById);
   const componentRegistry = useEditorStore((state) => state.registry);
   const canDropOnLayer = useCallback((layerId) => {
+    if (!layerId) return false;
     const targetLayer = findLayerById(layerId);
     if (!targetLayer) return false;
-    if (!activeLayerId) {
+    if (!activeLayerId && !newComponentType) {
       return canLayerAcceptChildren(targetLayer, componentRegistry);
     }
-    if (isLayerDescendantOf(layerId, activeLayerId)) {
-      return false;
+    if (newComponentType) {
+      const componentDef = componentRegistry[newComponentType];
+      if (componentDef?.childOf && !componentDef.childOf.includes(targetLayer.type)) {
+        return false;
+      }
+      return canLayerAcceptChildren(targetLayer, componentRegistry);
+    }
+    if (activeLayerId) {
+      if (isLayerDescendantOf(layerId, activeLayerId)) {
+        return false;
+      }
+      const draggedLayer = findLayerById(activeLayerId);
+      if (!draggedLayer) {
+        return canLayerAcceptChildren(targetLayer, componentRegistry);
+      }
+      const draggedDef = componentRegistry[draggedLayer.type];
+      if (draggedDef?.childOf && !draggedDef.childOf.includes(targetLayer.type)) {
+        return false;
+      }
     }
-    const draggedLayer = findLayerById(activeLayerId);
-    if (!draggedLayer) return false;
     return canLayerAcceptChildren(targetLayer, componentRegistry);
-  }, [activeLayerId, isLayerDescendantOf, findLayerById, componentRegistry]);
+  }, [activeLayerId, newComponentType, isLayerDescendantOf, findLayerById, componentRegistry]);
   return { canDropOnLayer };
 };