Only explode components when dragging over them

packages/client/src/components/Component.svelte

@@ -98,8 +98,8 @@
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
-  $: isDndParent = $componentStore.dndParent === id
   $: inDragPath = inSelectedPath && $builderStore.editMode
+  $: inDndPath = $componentStore.dndPath?.includes(id)
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
@@ -457,7 +457,7 @@
     class:interactive
     class:editing
     class:block={isBlock}
-    class:explode={interactive && hasChildren && $builderStore.isDragging}
+    class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === "placeholder"}
     data-id={id}
     data-name={name}

packages/client/src/stores/components.js

@@ -39,6 +39,8 @@ const createComponentStore = () => {
       // Derive the selected component path
       const selectedPath =
         findComponentPathById(asset?.props, selectedComponentId) || []
+      const dndPath =
+        findComponentPathById(asset?.props, $builderState.dndParent) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -49,6 +51,7 @@ const createComponentStore = () => {
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
+        dndPath: dndPath?.map(component => component._id),
       }
     }
   )