Prevent hovering over layout components when editing screens

packages/client/src/components/Component.svelte

@@ -25,6 +25,7 @@
 
   // Get contexts
   const context = getContext("context")
+  const insideScreenslot = !!getContext("screenslot")
 
   // Create component context
   const componentStore = writable({})
@@ -45,12 +46,13 @@
   $: selected =
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
+  $: interactive = $builderStore.previewType === "layout" || insideScreenslot
 
   // Update component context
   $: componentStore.set({
     id,
     children: children.length,
-    styles: { ...instance._styles, id, empty },
+    styles: { ...instance._styles, id, empty, interactive },
     empty,
     transition: instance._transition,
     selected,
@@ -116,7 +118,7 @@
 
 <div
   class={`component ${id}`}
-  data-type="component"
+  data-type={interactive ? "component" : ""}
   data-id={id}
   data-name={name}
 >

packages/client/src/components/Router.svelte

@@ -1,12 +1,12 @@
 <script>
-  import { getContext } from "svelte"
+  import { setContext, getContext } from "svelte"
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
-  import { onMount } from "svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
+  setContext("screenslot", true)
 
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config

packages/client/src/utils/styleable.js

@@ -60,7 +60,9 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      builderStore.actions.selectComponent(componentId)
+      if (newStyles.interactive) {
+        builderStore.actions.selectComponent(componentId)
+      }
       event.preventDefault()
       event.stopPropagation()
       return false