Fix a few possible crashes by dragging in certain ways, and display on screen when an invalid drop target is hovered over

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

@@ -18,6 +18,10 @@
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
+    if (!e.target?.dataset?.componentId) {
+      return
+    }
+
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
@@ -32,23 +36,29 @@
 
   // Callback when drag stops (whether dropped or not)
   const onDragEnd = e => {
-    // Reset state and styles
-    dropTarget = null
-    dropInfo = null
-    builderStore.actions.setDragging(false)
-
     // Reset opacity style
+    if (dragTarget) {
       const child = getDOMNodeForComponent(e.target)
       if (child) {
         child.style.opacity = ""
       }
     }
 
+    // Reset state and styles
+    dragTarget = null
+    dropTarget = null
+    dropInfo = null
+    builderStore.actions.setDragging(false)
+  }
+
   // Callback when on top of a component
   const onDragOver = e => {
-    e.preventDefault()
+    // Skip if we aren't validly dragging currently
+    if (!dragTarget || !dropInfo) {
+      return
+    }
 
-    if (dropInfo) {
+    e.preventDefault()
     const { droppableInside, bounds } = dropInfo
     const { top, height } = bounds
     const mouseY = e.clientY
@@ -85,10 +95,14 @@
       }
     }
   }
-  }
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
+    // Skip if we aren't validly dragging currently
+    if (!dragTarget) {
+      return
+    }
+
     const element = e.target.closest("[data-type='component']")
     if (
       element &&