Allow normal DND in and out of grid children

packages/client/manifest.json

@@ -4573,7 +4573,9 @@
     "hasChildren": true,
     "styles": [
       "size"
-    ]
+    ],
+    "illegalChildren": ["grid", "section"],
+    "allowedDirectChildren": [""]
   },
   "formblock": {
     "name": "Form Block",

packages/client/src/components/preview/DNDHandler.svelte

@@ -23,7 +23,10 @@
   $: drop = $dndStore.drop
 
   const insideGrid = e => {
-    return e.target?.closest?.(".grid") != null
+    return e.target
+      ?.closest?.(".component")
+      ?.parentNode?.closest?.(".component")
+      ?.childNodes[0]?.classList.contains("grid")
   }
 
   // Util to get the inner DOM node by a component ID
@@ -218,7 +221,7 @@
 
   // Callback when on top of a component.
   const onDragOver = e => {
-    if (!source || !target || insideGrid(e)) {
+    if (!source || !target) {
       return
     }
     handleEvent(e)
@@ -226,7 +229,7 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    if (!source || insideGrid(e)) {
+    if (!source) {
       return
     }
 
@@ -249,7 +252,7 @@
 
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
-    if (!source || !drop?.parent || drop?.index == null || insideGrid(e)) {
+    if (!source || !drop?.parent || drop?.index == null) {
       return
     }
 

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -11,7 +11,13 @@
   $: applyStyles(dragNode, gridStyles)
 
   const insideGrid = e => {
-    return e.target?.closest?.(".grid") || e.target.classList.contains("anchor")
+    return (
+      e.target
+        ?.closest?.(".component")
+        ?.parentNode?.closest?.(".component")
+        ?.childNodes[0]?.classList.contains("grid") ||
+      e.target.classList.contains("anchor")
+    )
   }
 
   // Util to get the inner DOM node by a component ID

packages/client/src/components/preview/HoverIndicator.svelte

@@ -9,21 +9,17 @@
   const onMouseOver = e => {
     // Ignore if dragging
     if (e.buttons > 0) {
-      console.log("ignore")
       return
     }
 
     let newId
-
     if (e.target.classList.contains("anchor")) {
       // Handle resize anchors
       newId = e.target.dataset.id
-      console.log("anchor", newId)
     } else {
       // Handle normal components
       const element = e.target.closest(".interactive.component")
       newId = element?.dataset?.id
-      console.log("normal", newId)
     }
 
     if (newId !== componentId) {

packages/client/src/components/preview/IndicatorSet.svelte

@@ -34,8 +34,9 @@
       return false
     }
 
-    // Check if we're a descendent of a grid
+    return component?.parentNode
-    return domNode?.closest(".grid") != null
+      ?.closest?.(".component")
+      ?.childNodes[0]?.classList.contains("grid")
   }
 
   const createIntersectionCallback = idx => entries => {