@btst/stack 1.9.1 → 1.11.0

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

@@ -0,0 +1,47 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const core_esm = require('../../../../../../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.cjs');
+const layerStore = require('../store/layer-store.cjs');
+
+const TransformAwareDragOverlay = ({ children }) => {
+  const [mountNode, setMountNode] = React.useState(null);
+  const overlayStyle = React.useMemo(() => ({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: 9999
+  }), []);
+  React.useEffect(() => {
+    const transformComponent = document.querySelector('[data-testid="transform-component"]');
+    if (transformComponent) {
+      setMountNode(transformComponent);
+    } else {
+      const editorContainer = document.getElementById("editor-panel-content");
+      setMountNode(editorContainer);
+    }
+  }, []);
+  if (!mountNode) {
+    return /* @__PURE__ */ jsxRuntime.jsx(core_esm.DragOverlay, { dropAnimation: null, children });
+  }
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: overlayStyle, children: /* @__PURE__ */ jsxRuntime.jsx(core_esm.DragOverlay, { dropAnimation: null, children }) }),
+    mountNode
+  );
+};
+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;
+exports.TransformAwareDragOverlay = TransformAwareDragOverlay;

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

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { DragOverlay } 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 { useLayerStore } from '../store/layer-store.mjs';
+
+const TransformAwareDragOverlay = ({ children }) => {
+  const [mountNode, setMountNode] = useState(null);
+  const overlayStyle = useMemo(() => ({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: 9999
+  }), []);
+  useEffect(() => {
+    const transformComponent = document.querySelector('[data-testid="transform-component"]');
+    if (transformComponent) {
+      setMountNode(transformComponent);
+    } else {
+      const editorContainer = document.getElementById("editor-panel-content");
+      setMountNode(editorContainer);
+    }
+  }, []);
+  if (!mountNode) {
+    return /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children });
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { style: overlayStyle, children: /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children }) }),
+    mountNode
+  );
+};
+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

@@ -0,0 +1,126 @@
+'use strict';
+
+const React = require('react');
+const dndUtils = require('../context/dnd-utils.cjs');
+const autoScrollConstants = require('../context/auto-scroll-constants.cjs');
+
+const useAutoScroll = () => {
+  const autoScrollStateRef = React.useRef({
+    isScrolling: false,
+    directions: { left: false, right: false, top: false, bottom: false },
+    speeds: { horizontal: 0, vertical: 0 }
+  });
+  const mousePositionRef = React.useRef(null);
+  const animationFrameRef = React.useRef(null);
+  const performAutoScroll = React.useCallback(() => {
+    const iframeElements = dndUtils.getIframeElements();
+    if (!iframeElements || !mousePositionRef.current) {
+      return;
+    }
+    const { iframe, window: iframeWindow } = iframeElements;
+    const iframeRect = iframe.getBoundingClientRect();
+    const iframeMouseX = mousePositionRef.current.x - iframeRect.left;
+    const iframeMouseY = mousePositionRef.current.y - iframeRect.top;
+    const scrollableWidth = iframeRect.width;
+    const scrollableHeight = iframeRect.height;
+    const distanceFromLeft = iframeMouseX;
+    const distanceFromRight = scrollableWidth - iframeMouseX;
+    const distanceFromTop = iframeMouseY;
+    const distanceFromBottom = scrollableHeight - iframeMouseY;
+    let shouldScrollLeft = distanceFromLeft < autoScrollConstants.AUTO_SCROLL_THRESHOLD;
+    let shouldScrollRight = distanceFromRight < autoScrollConstants.AUTO_SCROLL_THRESHOLD;
+    let shouldScrollUp = distanceFromTop < autoScrollConstants.AUTO_SCROLL_THRESHOLD;
+    let shouldScrollDown = distanceFromBottom < autoScrollConstants.AUTO_SCROLL_THRESHOLD;
+    if (shouldScrollLeft && shouldScrollRight) {
+      if (distanceFromLeft < distanceFromRight) {
+        shouldScrollRight = false;
+      } else {
+        shouldScrollLeft = false;
+      }
+    }
+    if (shouldScrollUp && shouldScrollDown) {
+      if (distanceFromTop < distanceFromBottom) {
+        shouldScrollDown = false;
+      } else {
+        shouldScrollUp = false;
+      }
+    }
+    const leftSpeed = shouldScrollLeft ? autoScrollConstants.calculateScrollSpeed(Math.max(0, distanceFromLeft)) : 0;
+    const rightSpeed = shouldScrollRight ? autoScrollConstants.calculateScrollSpeed(Math.max(0, distanceFromRight)) : 0;
+    const upSpeed = shouldScrollUp ? autoScrollConstants.calculateScrollSpeed(Math.max(0, distanceFromTop)) : 0;
+    const downSpeed = shouldScrollDown ? autoScrollConstants.calculateScrollSpeed(Math.max(0, distanceFromBottom)) : 0;
+    const state = autoScrollStateRef.current;
+    state.directions = {
+      left: shouldScrollLeft,
+      right: shouldScrollRight,
+      top: shouldScrollUp,
+      bottom: shouldScrollDown
+    };
+    state.speeds = {
+      horizontal: leftSpeed || rightSpeed,
+      vertical: upSpeed || downSpeed
+    };
+    state.isScrolling = shouldScrollLeft || shouldScrollRight || shouldScrollUp || shouldScrollDown;
+    if (state.isScrolling) {
+      let scrollX = 0;
+      let scrollY = 0;
+      if (shouldScrollLeft) scrollX = -leftSpeed;
+      else if (shouldScrollRight) scrollX = rightSpeed;
+      if (shouldScrollUp) scrollY = -upSpeed;
+      else if (shouldScrollDown) scrollY = downSpeed;
+      if (scrollX !== 0 || scrollY !== 0) {
+        try {
+          iframeWindow.scrollBy(scrollX, scrollY);
+        } catch (error) {
+          console.warn("Auto-scroll failed:", error);
+        }
+      }
+      animationFrameRef.current = requestAnimationFrame(performAutoScroll);
+    } else {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    }
+  }, []);
+  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, isDragging) => {
+    if (!isDragging) return;
+    const iframeElements = dndUtils.getIframeElements();
+    if (!iframeElements) return;
+    const { iframe } = iframeElements;
+    const iframeRect = iframe.getBoundingClientRect();
+    const parentX = event.clientX + iframeRect.left;
+    const parentY = event.clientY + iframeRect.top;
+    mousePositionRef.current = { x: parentX, y: parentY };
+    if (!animationFrameRef.current) {
+      animationFrameRef.current = requestAnimationFrame(performAutoScroll);
+    }
+  }, [performAutoScroll]);
+  const stopAutoScroll = React.useCallback(() => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    autoScrollStateRef.current = {
+      isScrolling: false,
+      directions: { left: false, right: false, top: false, bottom: false },
+      speeds: { horizontal: 0, vertical: 0 }
+    };
+    mousePositionRef.current = null;
+  }, []);
+  return {
+    handleParentMouseMove,
+    handleIframeMouseMove,
+    stopAutoScroll,
+    autoScrollState: autoScrollStateRef.current
+  };
+};
+
+exports.useAutoScroll = useAutoScroll;

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

@@ -0,0 +1,124 @@
+import { useRef, useCallback } from 'react';
+import { getIframeElements } from '../context/dnd-utils.mjs';
+import { calculateScrollSpeed, AUTO_SCROLL_THRESHOLD } from '../context/auto-scroll-constants.mjs';
+
+const useAutoScroll = () => {
+  const autoScrollStateRef = useRef({
+    isScrolling: false,
+    directions: { left: false, right: false, top: false, bottom: false },
+    speeds: { horizontal: 0, vertical: 0 }
+  });
+  const mousePositionRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const performAutoScroll = useCallback(() => {
+    const iframeElements = getIframeElements();
+    if (!iframeElements || !mousePositionRef.current) {
+      return;
+    }
+    const { iframe, window: iframeWindow } = iframeElements;
+    const iframeRect = iframe.getBoundingClientRect();
+    const iframeMouseX = mousePositionRef.current.x - iframeRect.left;
+    const iframeMouseY = mousePositionRef.current.y - iframeRect.top;
+    const scrollableWidth = iframeRect.width;
+    const scrollableHeight = iframeRect.height;
+    const distanceFromLeft = iframeMouseX;
+    const distanceFromRight = scrollableWidth - iframeMouseX;
+    const distanceFromTop = iframeMouseY;
+    const distanceFromBottom = scrollableHeight - iframeMouseY;
+    let shouldScrollLeft = distanceFromLeft < AUTO_SCROLL_THRESHOLD;
+    let shouldScrollRight = distanceFromRight < AUTO_SCROLL_THRESHOLD;
+    let shouldScrollUp = distanceFromTop < AUTO_SCROLL_THRESHOLD;
+    let shouldScrollDown = distanceFromBottom < AUTO_SCROLL_THRESHOLD;
+    if (shouldScrollLeft && shouldScrollRight) {
+      if (distanceFromLeft < distanceFromRight) {
+        shouldScrollRight = false;
+      } else {
+        shouldScrollLeft = false;
+      }
+    }
+    if (shouldScrollUp && shouldScrollDown) {
+      if (distanceFromTop < distanceFromBottom) {
+        shouldScrollDown = false;
+      } else {
+        shouldScrollUp = false;
+      }
+    }
+    const leftSpeed = shouldScrollLeft ? calculateScrollSpeed(Math.max(0, distanceFromLeft)) : 0;
+    const rightSpeed = shouldScrollRight ? calculateScrollSpeed(Math.max(0, distanceFromRight)) : 0;
+    const upSpeed = shouldScrollUp ? calculateScrollSpeed(Math.max(0, distanceFromTop)) : 0;
+    const downSpeed = shouldScrollDown ? calculateScrollSpeed(Math.max(0, distanceFromBottom)) : 0;
+    const state = autoScrollStateRef.current;
+    state.directions = {
+      left: shouldScrollLeft,
+      right: shouldScrollRight,
+      top: shouldScrollUp,
+      bottom: shouldScrollDown
+    };
+    state.speeds = {
+      horizontal: leftSpeed || rightSpeed,
+      vertical: upSpeed || downSpeed
+    };
+    state.isScrolling = shouldScrollLeft || shouldScrollRight || shouldScrollUp || shouldScrollDown;
+    if (state.isScrolling) {
+      let scrollX = 0;
+      let scrollY = 0;
+      if (shouldScrollLeft) scrollX = -leftSpeed;
+      else if (shouldScrollRight) scrollX = rightSpeed;
+      if (shouldScrollUp) scrollY = -upSpeed;
+      else if (shouldScrollDown) scrollY = downSpeed;
+      if (scrollX !== 0 || scrollY !== 0) {
+        try {
+          iframeWindow.scrollBy(scrollX, scrollY);
+        } catch (error) {
+          console.warn("Auto-scroll failed:", error);
+        }
+      }
+      animationFrameRef.current = requestAnimationFrame(performAutoScroll);
+    } else {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    }
+  }, []);
+  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, isDragging) => {
+    if (!isDragging) return;
+    const iframeElements = getIframeElements();
+    if (!iframeElements) return;
+    const { iframe } = iframeElements;
+    const iframeRect = iframe.getBoundingClientRect();
+    const parentX = event.clientX + iframeRect.left;
+    const parentY = event.clientY + iframeRect.top;
+    mousePositionRef.current = { x: parentX, y: parentY };
+    if (!animationFrameRef.current) {
+      animationFrameRef.current = requestAnimationFrame(performAutoScroll);
+    }
+  }, [performAutoScroll]);
+  const stopAutoScroll = useCallback(() => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    autoScrollStateRef.current = {
+      isScrolling: false,
+      directions: { left: false, right: false, top: false, bottom: false },
+      speeds: { horizontal: 0, vertical: 0 }
+    };
+    mousePositionRef.current = null;
+  }, []);
+  return {
+    handleParentMouseMove,
+    handleIframeMouseMove,
+    stopAutoScroll,
+    autoScrollState: autoScrollStateRef.current
+  };
+};
+
+export { useAutoScroll };

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

@@ -0,0 +1,92 @@
+'use strict';
+
+const React = require('react');
+const layerStore = require('../store/layer-store.cjs');
+const layerUtils = require('../store/layer-utils.cjs');
+
+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;
+    const parentLayers = layerUtils.findAllParentLayersRecursive(pages, childId);
+    return parentLayers.some((parent) => parent.id === parentId);
+  }, [pages]);
+  const handleDragStart = React.useCallback((event) => {
+    const { active } = event;
+    if (active.data.current?.type === "layer") {
+      setActiveLayerId(active.data.current.layerId);
+    } else if (active.data.current?.type === "new-component") {
+      const componentType = active.data.current.componentType;
+      if (componentType && setNewComponentType) {
+        setNewComponentType(componentType);
+      }
+    }
+  }, [setActiveLayerId, setNewComponentType]);
+  const handleDragEnd = React.useCallback((event) => {
+    const { active, over } = event;
+    stopAutoScroll();
+    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 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);
+    }
+  }, [moveLayer, addComponentLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId, clearDragState, canDropOnLayer]);
+  const handleDragCancel = React.useCallback(() => {
+    stopAutoScroll();
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
+    }
+  }, [stopAutoScroll, setActiveLayerId, clearDragState]);
+  return {
+    handleDragStart,
+    handleDragEnd,
+    handleDragCancel,
+    isLayerDescendantOf
+  };
+};
+
+exports.useDndEventHandlers = useDndEventHandlers;

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

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import { useLayerStore } from '../store/layer-store.mjs';
+import { findAllParentLayersRecursive } from '../store/layer-utils.mjs';
+
+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;
+    const parentLayers = findAllParentLayersRecursive(pages, childId);
+    return parentLayers.some((parent) => parent.id === parentId);
+  }, [pages]);
+  const handleDragStart = useCallback((event) => {
+    const { active } = event;
+    if (active.data.current?.type === "layer") {
+      setActiveLayerId(active.data.current.layerId);
+    } else if (active.data.current?.type === "new-component") {
+      const componentType = active.data.current.componentType;
+      if (componentType && setNewComponentType) {
+        setNewComponentType(componentType);
+      }
+    }
+  }, [setActiveLayerId, setNewComponentType]);
+  const handleDragEnd = useCallback((event) => {
+    const { active, over } = event;
+    stopAutoScroll();
+    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 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);
+    }
+  }, [moveLayer, addComponentLayer, isLayerDescendantOf, stopAutoScroll, setActiveLayerId, clearDragState, canDropOnLayer]);
+  const handleDragCancel = useCallback(() => {
+    stopAutoScroll();
+    if (clearDragState) {
+      clearDragState();
+    } else {
+      setActiveLayerId(null);
+    }
+  }, [stopAutoScroll, setActiveLayerId, clearDragState]);
+  return {
+    handleDragStart,
+    handleDragEnd,
+    handleDragCancel,
+    isLayerDescendantOf
+  };
+};
+
+export { useDndEventHandlers };

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

@@ -0,0 +1,21 @@
+'use strict';
+
+const core_esm = require('../../../../../../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.cjs');
+
+const useDndSensors = () => {
+  return core_esm.useSensors(
+    core_esm.useSensor(core_esm.MouseSensor, {
+      activationConstraint: {
+        distance: 4
+      }
+    }),
+    core_esm.useSensor(core_esm.TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 8
+      }
+    })
+  );
+};
+
+exports.useDndSensors = useDndSensors;

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

@@ -0,0 +1,19 @@
+import { useSensors, useSensor, TouchSensor, MouseSensor } 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';
+
+const useDndSensors = () => {
+  return useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 4
+      }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 8
+      }
+    })
+  );
+};
+
+export { useDndSensors };

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

@@ -0,0 +1,43 @@
+'use strict';
+
+const React = require('react');
+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, 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 && !newComponentType) {
+      return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
+    }
+    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;
+      }
+    }
+    return layerUtils.canLayerAcceptChildren(targetLayer, componentRegistry);
+  }, [activeLayerId, newComponentType, isLayerDescendantOf, findLayerById, componentRegistry]);
+  return { canDropOnLayer };
+};
+
+exports.useDropValidation = useDropValidation;

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

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+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, 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 && !newComponentType) {
+      return canLayerAcceptChildren(targetLayer, componentRegistry);
+    }
+    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;
+      }
+    }
+    return canLayerAcceptChildren(targetLayer, componentRegistry);
+  }, [activeLayerId, newComponentType, isLayerDescendantOf, findLayerById, componentRegistry]);
+  return { canDropOnLayer };
+};
+
+export { useDropValidation };

package/dist/packages/ui/src/lib/ui-builder/hooks/use-keyboard-shortcuts-dnd.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const React = require('react');
+
+const useKeyboardShortcutsDnd = (activeLayerId, handleDragCancel) => {
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && activeLayerId) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleDragCancel();
+      }
+    };
+    if (activeLayerId) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [activeLayerId, handleDragCancel]);
+};
+
+exports.useKeyboardShortcutsDnd = useKeyboardShortcutsDnd;