Improve new component DND for both types of layout

packages/client/src/components/Component.svelte

@@ -153,7 +153,7 @@
   $: builderInteractive =
     $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
-  $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
+  $: interactive = builderInteractive || devToolsInteractive
   $: editing = editable && selected && $builderStore.editMode
   $: draggable =
     !inDragPath &&
@@ -231,6 +231,7 @@
       empty: emptyState,
       selected,
       interactive,
+      isRoot,
       draggable,
       editable,
       isBlock,
@@ -672,6 +673,7 @@
     class:parent={hasChildren}
     class:block={isBlock}
     class:error={errorState}
+    class:root={isRoot}
     data-id={id}
     data-name={name}
     data-icon={icon}

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

@@ -19,7 +19,7 @@
       newId = e.target.dataset.id
     } else {
       // Handle normal components
-      const element = e.target.closest(".interactive.component")
+      const element = e.target.closest(".interactive.component:not(.root)")
       newId = element?.dataset?.id
     }
 

packages/client/src/utils/styleable.js

@@ -93,7 +93,7 @@ export const styleable = (node, styles = {}) => {
     node.addEventListener("mouseout", applyNormalStyles)
 
     // Add builder preview click listener
-    if (newStyles.interactive) {
+    if (newStyles.interactive && !newStyles.isRoot) {
       node.addEventListener("click", selectComponent, false)
       node.addEventListener("dblclick", editComponent, false)
     }