@btst/stack 1.10.0 → 1.11.0

package/dist/packages/ui/src/components/ui-builder/internal/dnd/drop-zone.cjs

@@ -23,6 +23,8 @@ const DROP_INDICATOR_HOVER = "before:bg-blue-500 before:shadow-xl";
 const DROP_INDICATOR_DEFAULT = "before:bg-blue-400/50";
 const DROP_INDICATOR_INLINE_HOVER = "before:bg-blue-500 before:shadow-lg";
 const DROP_INDICATOR_INLINE_DEFAULT = "before:bg-blue-400/40";
+const DROP_INDICATOR_DISABLED = "before:bg-gray-400/30";
+const DROP_INDICATOR_DISABLED_HOVER = "before:bg-gray-500/40";
 function getLayoutType(element) {
   const styles = window.getComputedStyle(element);
   const display = styles.display;
@@ -59,6 +61,11 @@ const DropPlaceholder = ({
   isActive = false,
   style
 }) => {
+  const [layoutType, setLayoutType] = React__default.useState("block");
+  const [calculatedStyle, setCalculatedStyle] = React__default.useState(null);
+  const [element, setElement] = React__default.useState(null);
+  const dndContext = dndContexts.useDndContext();
+  const isDropValid = dndContext.canDropOnLayer(parentId);
   const {
     isOver,
     setNodeRef
@@ -68,31 +75,113 @@ const DropPlaceholder = ({
       type: "drop-zone",
       parentId,
       position
-    }
+    },
+    // Disable the droppable when drop is not valid (e.g., childOf constraint violation)
+    disabled: !isDropValid
   });
-  const [layoutType, setLayoutType] = React__default.useState("block");
-  const [element, setElement] = React__default.useState(null);
-  const dndContext = dndContexts.useDndContext();
   React__default.useLayoutEffect(() => {
     if (!isActive || !element) return;
-    let parentElement = element.parentElement;
-    while (parentElement && parentElement.classList.contains("relative") && parentElement.children.length === 2) {
-      parentElement = parentElement.parentElement;
+    const parentContainer = element.closest(`[data-layer-id="${parentId}"]`);
+    if (!parentContainer) return;
+    let detectedLayout = getLayoutType(parentContainer);
+    if (dndContext?.activeLayerId) {
+      const draggedElement = document.querySelector(`[data-layer-id="${dndContext.activeLayerId}"]`);
+      if (draggedElement) {
+        const draggedTagName = draggedElement.tagName.toLowerCase();
+        const draggedDisplay = window.getComputedStyle(draggedElement).display;
+        const isInlineElement = draggedDisplay === "inline" || draggedDisplay === "inline-block" || ["span", "a", "strong", "em", "code", "small", "mark", "del", "ins", "sub", "sup"].includes(draggedTagName);
+        if (isInlineElement && detectedLayout === "block") {
+          detectedLayout = "inline";
+        }
+      }
+    }
+    setLayoutType(detectedLayout);
+    const nextSibling = element.nextElementSibling;
+    let siblingElement = null;
+    if (nextSibling) {
+      if (nextSibling.hasAttribute("data-layer-id")) {
+        siblingElement = nextSibling;
+      } else {
+        siblingElement = nextSibling.querySelector("[data-layer-id]");
+      }
     }
-    if (parentElement) {
-      let detectedLayout = getLayoutType(parentElement);
-      if (dndContext?.activeLayerId) {
-        const draggedElement = document.querySelector(`[data-layer-id="${dndContext.activeLayerId}"]`);
-        if (draggedElement) {
-          const draggedTagName = draggedElement.tagName.toLowerCase();
-          const draggedDisplay = window.getComputedStyle(draggedElement).display;
-          const isInlineElement = draggedDisplay === "inline" || draggedDisplay === "inline-block" || ["span", "a", "strong", "em", "code", "small", "mark", "del", "ins", "sub", "sup"].includes(draggedTagName);
-          if (isInlineElement && detectedLayout === "block") {
-            detectedLayout = "inline";
-          }
+    const parentRect = parentContainer.getBoundingClientRect();
+    if (siblingElement) {
+      const siblingRect = siblingElement.getBoundingClientRect();
+      const positionStyle = {
+        position: "absolute",
+        pointerEvents: "auto",
+        zIndex: 999
+      };
+      if (detectedLayout === "flex-row") {
+        positionStyle.left = siblingRect.left - parentRect.left - 4;
+        positionStyle.top = siblingRect.top - parentRect.top;
+        positionStyle.width = 8;
+        positionStyle.height = siblingRect.height;
+      } else if (detectedLayout === "inline") {
+        positionStyle.left = siblingRect.left - parentRect.left - 3;
+        positionStyle.top = siblingRect.top - parentRect.top;
+        positionStyle.width = 6;
+        positionStyle.height = siblingRect.height;
+      } else if (detectedLayout === "grid") {
+        positionStyle.left = siblingRect.left - parentRect.left - 4;
+        positionStyle.top = siblingRect.top - parentRect.top - 4;
+        positionStyle.width = 8;
+        positionStyle.height = 8;
+      } else {
+        positionStyle.left = siblingRect.left - parentRect.left;
+        positionStyle.top = siblingRect.top - parentRect.top - 4;
+        positionStyle.width = siblingRect.width;
+        positionStyle.height = 8;
+      }
+      setCalculatedStyle(positionStyle);
+    } else {
+      const childLayers = parentContainer.querySelectorAll("[data-layer-id]");
+      const directChildLayers = Array.from(childLayers).filter((el) => {
+        const closestLayerParent = el.parentElement?.closest("[data-layer-id]");
+        return closestLayerParent === parentContainer || closestLayerParent === null;
+      });
+      const lastChild = directChildLayers[directChildLayers.length - 1];
+      if (lastChild) {
+        const lastChildRect = lastChild.getBoundingClientRect();
+        const positionStyle = {
+          position: "absolute",
+          pointerEvents: "auto",
+          zIndex: 999
+        };
+        if (detectedLayout === "flex-row") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 4;
+          positionStyle.top = lastChildRect.top - parentRect.top;
+          positionStyle.width = 8;
+          positionStyle.height = lastChildRect.height;
+        } else if (detectedLayout === "inline") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 3;
+          positionStyle.top = lastChildRect.top - parentRect.top;
+          positionStyle.width = 6;
+          positionStyle.height = lastChildRect.height;
+        } else if (detectedLayout === "grid") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 4;
+          positionStyle.top = lastChildRect.top - parentRect.top - 4;
+          positionStyle.width = 8;
+          positionStyle.height = 8;
+        } else {
+          positionStyle.left = lastChildRect.left - parentRect.left;
+          positionStyle.top = lastChildRect.bottom - parentRect.top - 4;
+          positionStyle.width = lastChildRect.width;
+          positionStyle.height = 8;
         }
+        setCalculatedStyle(positionStyle);
+      } else {
+        setCalculatedStyle({
+          position: "absolute",
+          pointerEvents: "auto",
+          zIndex: 999,
+          left: 0,
+          top: 0,
+          right: 0,
+          height: 8
+        });
       }
-      setLayoutType(detectedLayout);
     }
   }, [isActive, element, parentId, position, dndContext?.activeLayerId]);
   const combinedRef = React__default.useCallback((node) => {
@@ -100,57 +189,112 @@ const DropPlaceholder = ({
     setNodeRef(node);
   }, [setNodeRef]);
   if (!isActive) return null;
+  const useCalculatedPositioning = calculatedStyle !== null;
+  const getIndicatorStyles = (baseHover, baseDefault) => {
+    if (!isDropValid) {
+      return isOver ? DROP_INDICATOR_DISABLED_HOVER : DROP_INDICATOR_DISABLED;
+    }
+    return isOver ? baseHover : baseDefault;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: combinedRef,
       className: utils.cn(
+        // Always apply absolute positioning base classes
         "absolute pointer-events-auto z-[999]",
         "before:content-[''] before:absolute",
         BEFORE_TRANSITION,
         "before:pointer-events-none",
-        // Use custom style if provided, otherwise use default layout-based positioning
-        !style && [
-          // Flex-row layout: vertical lines on the left edge
+        // Disabled state visual cue
+        !isDropValid && "opacity-60 cursor-not-allowed",
+        // Fallback positioning classes when calculatedStyle is not available
+        !useCalculatedPositioning && !style && [
+          // Flex-row layout: vertical lines on left edge
           layoutType === "flex-row" && [
-            "-left-4 top-0 bottom-0 w-8",
+            "-left-1 top-0 bottom-0 w-2",
             BEFORE_CENTER_TRANSFORM,
             "before:w-1 before:h-8",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-6 before:h-20` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-1 before:h-6`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-1 before:h-6`
+            )
           ],
-          // Inline layout: subtle vertical indicators for text flow
+          // Inline layout: subtle vertical indicators
           layoutType === "inline" && [
-            "-left-3 top-0 bottom-0 w-6",
+            "-left-1 top-0 bottom-0 w-2",
             BEFORE_CENTER_TRANSFORM,
             "before:w-0.5 before:h-4",
-            isOver ? `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-4 before:h-10` : `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-0.5 before:h-3`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-1 before:h-8`,
+              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-0.5 before:h-3`
+            )
           ],
-          // Vertical layout (flex-col, block): horizontal lines on the top edge
+          // Vertical layout (flex-col, block): horizontal lines on top edge
           (layoutType === "flex-col" || layoutType === "block") && [
-            "left-0 right-0 -top-4 h-8",
+            "left-0 right-0 -top-1 h-2",
             BEFORE_CENTER_TRANSFORM,
             "before:h-1 before:w-8",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-6 before:w-20` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-1 before:w-6`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-1 before:w-6`
+            )
           ],
           // Grid layout: corner indicator
           layoutType === "grid" && [
-            "-left-4 -top-4 w-8 h-8",
+            "-left-1 -top-1 w-2 h-2",
             BEFORE_CENTER_TRANSFORM,
             "before:h-2 before:w-2",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-6 before:w-6` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-2 before:w-2`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-4 before:w-4`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-2 before:w-2`
+            )
+          ]
+        ],
+        // When using calculated positioning, only apply visual indicator classes
+        useCalculatedPositioning && [
+          BEFORE_CENTER_TRANSFORM,
+          layoutType === "flex-row" && [
+            "before:w-1 before:h-8",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          layoutType === "inline" && [
+            "before:w-0.5 before:h-4",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER}`,
+              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          (layoutType === "flex-col" || layoutType === "block") && [
+            "before:h-1 before:w-8",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          layoutType === "grid" && [
+            "before:h-2 before:w-2",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER}`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
           ]
         ],
-        // Custom style overrides for absolute positioning
+        // Custom style overrides
         style && [
-          "before:bg-blue-500/60 before:rounded-sm",
-          isOver && "before:bg-blue-600 before:shadow-md"
+          isDropValid ? ["before:bg-blue-500/60 before:rounded-sm", isOver && "before:bg-blue-600 before:shadow-md"] : ["before:bg-gray-400/30 before:rounded-sm", isOver && "before:bg-gray-500/40"]
         ]
       ),
-      style,
+      style: useCalculatedPositioning ? calculatedStyle : style,
       "data-testid": `drop-placeholder-${parentId}-${position}`,
-      "data-drop-indicator": true
+      "data-drop-indicator": true,
+      "data-drop-valid": isDropValid
     }
   );
 };
 
 exports.DropPlaceholder = DropPlaceholder;
+exports.getLayoutType = getLayoutType;

package/dist/packages/ui/src/components/ui-builder/internal/dnd/drop-zone.mjs

@@ -17,6 +17,8 @@ const DROP_INDICATOR_HOVER = "before:bg-blue-500 before:shadow-xl";
 const DROP_INDICATOR_DEFAULT = "before:bg-blue-400/50";
 const DROP_INDICATOR_INLINE_HOVER = "before:bg-blue-500 before:shadow-lg";
 const DROP_INDICATOR_INLINE_DEFAULT = "before:bg-blue-400/40";
+const DROP_INDICATOR_DISABLED = "before:bg-gray-400/30";
+const DROP_INDICATOR_DISABLED_HOVER = "before:bg-gray-500/40";
 function getLayoutType(element) {
   const styles = window.getComputedStyle(element);
   const display = styles.display;
@@ -53,6 +55,11 @@ const DropPlaceholder = ({
   isActive = false,
   style
 }) => {
+  const [layoutType, setLayoutType] = React__default.useState("block");
+  const [calculatedStyle, setCalculatedStyle] = React__default.useState(null);
+  const [element, setElement] = React__default.useState(null);
+  const dndContext = useDndContext();
+  const isDropValid = dndContext.canDropOnLayer(parentId);
   const {
     isOver,
     setNodeRef
@@ -62,31 +69,113 @@ const DropPlaceholder = ({
       type: "drop-zone",
       parentId,
       position
-    }
+    },
+    // Disable the droppable when drop is not valid (e.g., childOf constraint violation)
+    disabled: !isDropValid
   });
-  const [layoutType, setLayoutType] = React__default.useState("block");
-  const [element, setElement] = React__default.useState(null);
-  const dndContext = useDndContext();
   React__default.useLayoutEffect(() => {
     if (!isActive || !element) return;
-    let parentElement = element.parentElement;
-    while (parentElement && parentElement.classList.contains("relative") && parentElement.children.length === 2) {
-      parentElement = parentElement.parentElement;
+    const parentContainer = element.closest(`[data-layer-id="${parentId}"]`);
+    if (!parentContainer) return;
+    let detectedLayout = getLayoutType(parentContainer);
+    if (dndContext?.activeLayerId) {
+      const draggedElement = document.querySelector(`[data-layer-id="${dndContext.activeLayerId}"]`);
+      if (draggedElement) {
+        const draggedTagName = draggedElement.tagName.toLowerCase();
+        const draggedDisplay = window.getComputedStyle(draggedElement).display;
+        const isInlineElement = draggedDisplay === "inline" || draggedDisplay === "inline-block" || ["span", "a", "strong", "em", "code", "small", "mark", "del", "ins", "sub", "sup"].includes(draggedTagName);
+        if (isInlineElement && detectedLayout === "block") {
+          detectedLayout = "inline";
+        }
+      }
+    }
+    setLayoutType(detectedLayout);
+    const nextSibling = element.nextElementSibling;
+    let siblingElement = null;
+    if (nextSibling) {
+      if (nextSibling.hasAttribute("data-layer-id")) {
+        siblingElement = nextSibling;
+      } else {
+        siblingElement = nextSibling.querySelector("[data-layer-id]");
+      }
     }
-    if (parentElement) {
-      let detectedLayout = getLayoutType(parentElement);
-      if (dndContext?.activeLayerId) {
-        const draggedElement = document.querySelector(`[data-layer-id="${dndContext.activeLayerId}"]`);
-        if (draggedElement) {
-          const draggedTagName = draggedElement.tagName.toLowerCase();
-          const draggedDisplay = window.getComputedStyle(draggedElement).display;
-          const isInlineElement = draggedDisplay === "inline" || draggedDisplay === "inline-block" || ["span", "a", "strong", "em", "code", "small", "mark", "del", "ins", "sub", "sup"].includes(draggedTagName);
-          if (isInlineElement && detectedLayout === "block") {
-            detectedLayout = "inline";
-          }
+    const parentRect = parentContainer.getBoundingClientRect();
+    if (siblingElement) {
+      const siblingRect = siblingElement.getBoundingClientRect();
+      const positionStyle = {
+        position: "absolute",
+        pointerEvents: "auto",
+        zIndex: 999
+      };
+      if (detectedLayout === "flex-row") {
+        positionStyle.left = siblingRect.left - parentRect.left - 4;
+        positionStyle.top = siblingRect.top - parentRect.top;
+        positionStyle.width = 8;
+        positionStyle.height = siblingRect.height;
+      } else if (detectedLayout === "inline") {
+        positionStyle.left = siblingRect.left - parentRect.left - 3;
+        positionStyle.top = siblingRect.top - parentRect.top;
+        positionStyle.width = 6;
+        positionStyle.height = siblingRect.height;
+      } else if (detectedLayout === "grid") {
+        positionStyle.left = siblingRect.left - parentRect.left - 4;
+        positionStyle.top = siblingRect.top - parentRect.top - 4;
+        positionStyle.width = 8;
+        positionStyle.height = 8;
+      } else {
+        positionStyle.left = siblingRect.left - parentRect.left;
+        positionStyle.top = siblingRect.top - parentRect.top - 4;
+        positionStyle.width = siblingRect.width;
+        positionStyle.height = 8;
+      }
+      setCalculatedStyle(positionStyle);
+    } else {
+      const childLayers = parentContainer.querySelectorAll("[data-layer-id]");
+      const directChildLayers = Array.from(childLayers).filter((el) => {
+        const closestLayerParent = el.parentElement?.closest("[data-layer-id]");
+        return closestLayerParent === parentContainer || closestLayerParent === null;
+      });
+      const lastChild = directChildLayers[directChildLayers.length - 1];
+      if (lastChild) {
+        const lastChildRect = lastChild.getBoundingClientRect();
+        const positionStyle = {
+          position: "absolute",
+          pointerEvents: "auto",
+          zIndex: 999
+        };
+        if (detectedLayout === "flex-row") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 4;
+          positionStyle.top = lastChildRect.top - parentRect.top;
+          positionStyle.width = 8;
+          positionStyle.height = lastChildRect.height;
+        } else if (detectedLayout === "inline") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 3;
+          positionStyle.top = lastChildRect.top - parentRect.top;
+          positionStyle.width = 6;
+          positionStyle.height = lastChildRect.height;
+        } else if (detectedLayout === "grid") {
+          positionStyle.left = lastChildRect.right - parentRect.left - 4;
+          positionStyle.top = lastChildRect.top - parentRect.top - 4;
+          positionStyle.width = 8;
+          positionStyle.height = 8;
+        } else {
+          positionStyle.left = lastChildRect.left - parentRect.left;
+          positionStyle.top = lastChildRect.bottom - parentRect.top - 4;
+          positionStyle.width = lastChildRect.width;
+          positionStyle.height = 8;
         }
+        setCalculatedStyle(positionStyle);
+      } else {
+        setCalculatedStyle({
+          position: "absolute",
+          pointerEvents: "auto",
+          zIndex: 999,
+          left: 0,
+          top: 0,
+          right: 0,
+          height: 8
+        });
       }
-      setLayoutType(detectedLayout);
     }
   }, [isActive, element, parentId, position, dndContext?.activeLayerId]);
   const combinedRef = React__default.useCallback((node) => {
@@ -94,57 +183,111 @@ const DropPlaceholder = ({
     setNodeRef(node);
   }, [setNodeRef]);
   if (!isActive) return null;
+  const useCalculatedPositioning = calculatedStyle !== null;
+  const getIndicatorStyles = (baseHover, baseDefault) => {
+    if (!isDropValid) {
+      return isOver ? DROP_INDICATOR_DISABLED_HOVER : DROP_INDICATOR_DISABLED;
+    }
+    return isOver ? baseHover : baseDefault;
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: combinedRef,
       className: cn(
+        // Always apply absolute positioning base classes
         "absolute pointer-events-auto z-[999]",
         "before:content-[''] before:absolute",
         BEFORE_TRANSITION,
         "before:pointer-events-none",
-        // Use custom style if provided, otherwise use default layout-based positioning
-        !style && [
-          // Flex-row layout: vertical lines on the left edge
+        // Disabled state visual cue
+        !isDropValid && "opacity-60 cursor-not-allowed",
+        // Fallback positioning classes when calculatedStyle is not available
+        !useCalculatedPositioning && !style && [
+          // Flex-row layout: vertical lines on left edge
           layoutType === "flex-row" && [
-            "-left-4 top-0 bottom-0 w-8",
+            "-left-1 top-0 bottom-0 w-2",
             BEFORE_CENTER_TRANSFORM,
             "before:w-1 before:h-8",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-6 before:h-20` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-1 before:h-6`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-1 before:h-6`
+            )
           ],
-          // Inline layout: subtle vertical indicators for text flow
+          // Inline layout: subtle vertical indicators
           layoutType === "inline" && [
-            "-left-3 top-0 bottom-0 w-6",
+            "-left-1 top-0 bottom-0 w-2",
             BEFORE_CENTER_TRANSFORM,
             "before:w-0.5 before:h-4",
-            isOver ? `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-4 before:h-10` : `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-0.5 before:h-3`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-1 before:h-8`,
+              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-0.5 before:h-3`
+            )
           ],
-          // Vertical layout (flex-col, block): horizontal lines on the top edge
+          // Vertical layout (flex-col, block): horizontal lines on top edge
           (layoutType === "flex-col" || layoutType === "block") && [
-            "left-0 right-0 -top-4 h-8",
+            "left-0 right-0 -top-1 h-2",
             BEFORE_CENTER_TRANSFORM,
             "before:h-1 before:w-8",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-6 before:w-20` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-1 before:w-6`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-1 before:w-6`
+            )
           ],
           // Grid layout: corner indicator
           layoutType === "grid" && [
-            "-left-4 -top-4 w-8 h-8",
+            "-left-1 -top-1 w-2 h-2",
             BEFORE_CENTER_TRANSFORM,
             "before:h-2 before:w-2",
-            isOver ? `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-6 before:w-6` : `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-2 before:w-2`
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-4 before:w-4`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-2 before:w-2`
+            )
+          ]
+        ],
+        // When using calculated positioning, only apply visual indicator classes
+        useCalculatedPositioning && [
+          BEFORE_CENTER_TRANSFORM,
+          layoutType === "flex-row" && [
+            "before:w-1 before:h-8",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          layoutType === "inline" && [
+            "before:w-0.5 before:h-4",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER}`,
+              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          (layoutType === "flex-col" || layoutType === "block") && [
+            "before:h-1 before:w-8",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
+          ],
+          layoutType === "grid" && [
+            "before:h-2 before:w-2",
+            getIndicatorStyles(
+              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER}`,
+              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
+            )
           ]
         ],
-        // Custom style overrides for absolute positioning
+        // Custom style overrides
         style && [
-          "before:bg-blue-500/60 before:rounded-sm",
-          isOver && "before:bg-blue-600 before:shadow-md"
+          isDropValid ? ["before:bg-blue-500/60 before:rounded-sm", isOver && "before:bg-blue-600 before:shadow-md"] : ["before:bg-gray-400/30 before:rounded-sm", isOver && "before:bg-gray-500/40"]
         ]
       ),
-      style,
+      style: useCalculatedPositioning ? calculatedStyle : style,
       "data-testid": `drop-placeholder-${parentId}-${position}`,
-      "data-drop-indicator": true
+      "data-drop-indicator": true,
+      "data-drop-valid": isDropValid
     }
   );
 };
 
-export { DropPlaceholder };
+export { DropPlaceholder, getLayoutType };

package/dist/packages/ui/src/components/ui-builder/internal/editor-panel.cjs

@@ -338,7 +338,7 @@ const EditorPanelContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(addComponentPopover.AddComponentsPopover, { parentLayerId: selectedPageId, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(addComponentPopover.AddComponentsPopover, { parentLayerId: selectedPageId, enableDragToCanvas: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           button.Button,
           {
             variant: "secondary",

package/dist/packages/ui/src/components/ui-builder/internal/editor-panel.mjs

@@ -336,7 +336,7 @@ const EditorPanelContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(AddComponentsPopover, { parentLayerId: selectedPageId, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(AddComponentsPopover, { parentLayerId: selectedPageId, enableDragToCanvas: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: "secondary",

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/classname-group-control.cjs

@@ -48,7 +48,7 @@ function ClassNameGroupControl({
           {
             onClick: handleDropdownClick(String(key)),
             className: selectedKey === String(key) ? "bg-secondary-foreground/10" : "",
-            children: config.CONFIG[String(key)].label || String(key)
+            children: config.CONFIG[String(key)]?.label || String(key)
           },
           String(key)
         )) })

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/classname-group-control.mjs

@@ -46,7 +46,7 @@ function ClassNameGroupControl({
           {
             onClick: handleDropdownClick(String(key)),
             className: selectedKey === String(key) ? "bg-secondary-foreground/10" : "",
-            children: CONFIG[String(key)].label || String(key)
+            children: CONFIG[String(key)]?.label || String(key)
           },
           String(key)
         )) })

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/classname-item-control.cjs

@@ -34,7 +34,9 @@ function ClassNameItemControl({ value, onChange }) {
             }
           }
         });
-        if (!found) initialSelected[group.label] = group.keys[0];
+        if (!found && group.keys[0]) {
+          initialSelected[group.label] = group.keys[0];
+        }
       });
       const handledTokens = new Set(
         Object.values(parsedState).flatMap(
@@ -52,7 +54,9 @@ function ClassNameItemControl({ value, onChange }) {
     } else {
       const initialSelected = {};
       config.LAYOUT_GROUPS.forEach((group) => {
-        initialSelected[group.label] = group.keys[0];
+        if (group.keys[0]) {
+          initialSelected[group.label] = group.keys[0];
+        }
       });
       return {
         parsedState: {},
@@ -174,7 +178,9 @@ function ClassNameItemControl({ value, onChange }) {
       const keys = group.keys.map(String);
       const selectedKey = selectedKeys[group.label] || keys[0];
       if (entry.isVisible && !entry.isVisible(state)) return null;
+      if (!selectedKey) return null;
       const groupConfig = config.CONFIG[selectedKey];
+      if (!groupConfig) return null;
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("w-full", entry.className), "data-testid": `group-${group.label.toLowerCase().replace(/\s+/g, "-")}`, children: /* @__PURE__ */ jsxRuntime.jsx(
         classnameGroupControl.ClassNameGroupControl,
         {
@@ -190,6 +196,7 @@ function ClassNameItemControl({ value, onChange }) {
       if (entry.isVisible && !entry.isVisible(state)) return null;
       const configKey = entry.key;
       const ungroupedConfig = config.CONFIG[configKey];
+      if (!ungroupedConfig) return null;
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("w-full", entry.className), "data-testid": `item-${configKey}`, children: /* @__PURE__ */ jsxRuntime.jsx(
         ungroupedConfig.component,
         {