From 0ce0f5c823cffba2db2d700437820d6ec7c6da90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 07:28:59 +0100
Subject: [PATCH 01/24] Add initial DND implementation with working
 functionality for dropping inside components

---
 .../AppPreview/CurrentItemPreview.svelte      | 16 ++++
 .../client/src/components/ClientApp.svelte    |  2 +
 .../client/src/components/Component.svelte    |  4 +
 .../src/components/preview/DNDHandler.svelte  | 83 +++++++++++++++++++
 packages/client/src/stores/builder.js         |  9 +-
 packages/client/src/utils/styleable.js        |  2 +
 6 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/preview/DNDHandler.svelte

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 494050f690..422eba73b0 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import { store, currentAsset } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
@@ -7,6 +8,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "assets/error.svg?raw"
+  import { findComponent } from "builderStore/storeUtils"
 
   let iframe
   let layout
@@ -111,6 +113,20 @@
         // Wait for this event to show the client library if intelligent
         // loading is supported
         loading = false
+      } else if (type === "move-component") {
+        // Copy
+        const sourceComponent = findComponent(
+          get(currentAsset).props,
+          data.componentId
+        )
+        const destinationComponent = findComponent(
+          get(currentAsset).props,
+          data.destinationComponentId
+        )
+        if (sourceComponent && destinationComponent) {
+          store.actions.components.copy(sourceComponent, true)
+          store.actions.components.paste(destinationComponent, data.mode)
+        }
       } else {
         console.warning(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 5890c0e2a9..5c46161577 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -23,6 +23,7 @@
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
+  import DNDHandler from "components/preview/DNDHandler.svelte"
   import ErrorSVG from "../../../builder/assets/error.svg"
 
   // Provide contexts
@@ -122,6 +123,7 @@
               {#if $builderStore.inBuilder}
                 <SelectionIndicator />
                 <HoverIndicator />
+                <DNDHandler />
               {/if}
             </div>
           </StateBindingsProvider>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 785b989754..20d8b53609 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -178,6 +178,7 @@
       data-type={interactive ? "component" : ""}
       data-id={id}
       data-name={name}
+      data-droppable={definition?.hasChildren || false}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
@@ -196,4 +197,7 @@
   .component {
     display: contents;
   }
+  .component > :global(*:hover) {
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
new file mode 100644
index 0000000000..88b9176efb
--- /dev/null
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { onMount } from "svelte"
+  import IndicatorSet from "./IndicatorSet.svelte"
+  import { builderStore } from "stores"
+
+  let dragTarget
+  let dropTarget
+
+  // Callback when initially starting a drag on a draggable component
+  const onDragStart = e => {
+    dragTarget = e.target.dataset.componentId
+    e.target.style.opacity = 0.5
+  }
+
+  // Callback when drag stops (whether dropped or not)
+  const onDragEnd = e => {
+    // reset the transparency
+    dragTarget = null
+    e.target.style.opacity = ""
+    dropTarget = null
+  }
+
+  // Callback when on top of a component
+  const onDragOver = e => {
+    e.preventDefault()
+  }
+
+  // Callback when entering a potential drop target
+  const onDragEnter = e => {
+    const element = e.target.closest("[data-type='component']")
+    if (element && element.dataset.droppable === "true") {
+      dropTarget = element.dataset.id
+    } else {
+      dropTarget = null
+    }
+  }
+
+  // Callback when leaving a potential drop target.
+  // Since we don't style our targets, we don't need to unset anything.
+  const onDragLeave = () => {}
+
+  // Callback when dropping a drag on top of some component
+  const onDrop = e => {
+    e.preventDefault()
+
+    // Check if the target is droppable
+    const element = e.target.closest("[data-type='component']")
+    if (element && element.dataset.droppable === "true") {
+      builderStore.actions.moveComponent(dragTarget, dropTarget, "inside")
+    }
+  }
+
+  onMount(() => {
+    // Events fired on the draggable target
+    document.addEventListener("dragstart", onDragStart, false)
+    document.addEventListener("dragend", onDragEnd, false)
+
+    // Events fired on the drop targets
+    document.addEventListener("dragover", onDragOver, false)
+    document.addEventListener("dragenter", onDragEnter, false)
+    document.addEventListener("dragleave", onDragLeave, false)
+    document.addEventListener("drop", onDrop, false)
+
+    return () => {
+      // Events fired on the draggable target
+      document.removeEventListener("dragstart", onDragStart, false)
+      document.removeEventListener("dragend", onDragEnd, false)
+
+      // Events fired on the drop targets
+      document.removeEventListener("dragover", onDragOver, false)
+      document.removeEventListener("dragenter", onDragEnter, false)
+      document.removeEventListener("dragleave", onDragLeave, false)
+      document.removeEventListener("drop", onDrop, false)
+    }
+  })
+</script>
+
+<IndicatorSet
+  componentId={dropTarget}
+  color="var(--spectrum-global-color-static-red-600)"
+  zIndex="930"
+  transition
+/>
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 3f36af1d06..3a7eb1df61 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -64,13 +64,18 @@ const createBuilderStore = () => {
       dispatchEvent("preview-loaded")
     },
     setSelectedPath: path => {
-      console.log("set to ")
-      console.log(path)
       writableStore.update(state => {
         state.selectedPath = path
         return state
       })
     },
+    moveComponent: (componentId, destinationComponentId, mode) => {
+      dispatchEvent("move-component", {
+        componentId,
+        destinationComponentId,
+        mode,
+      })
+    },
   }
   return {
     ...writableStore,
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index d9925af91a..32171b9478 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -23,6 +23,8 @@ export const styleable = (node, styles = {}) => {
   let applyHoverStyles
   let selectComponent
 
+  node.setAttribute("draggable", true)
+
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
     // Use empty state styles as base styles if required, but let them, get

From d86e5718d56e58b0de7eba38c6ba89ea8bf02d7a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 07:35:19 +0100
Subject: [PATCH 02/24] Prevent DND if target is a child of source

---
 .../design/AppPreview/CurrentItemPreview.svelte     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 422eba73b0..a8f1b507f4 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -8,7 +8,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "assets/error.svg?raw"
-  import { findComponent } from "builderStore/storeUtils"
+  import { findComponent, findComponentPath } from "builderStore/storeUtils"
 
   let iframe
   let layout
@@ -123,6 +123,17 @@
           get(currentAsset).props,
           data.destinationComponentId
         )
+
+        // Stop if the target is a child of source
+        const path = findComponentPath(
+          sourceComponent,
+          data.destinationComponentId
+        )
+        const ids = path.map(component => component._id)
+        if (ids.includes(data.destinationComponentId)) {
+          return
+        }
+
         if (sourceComponent && destinationComponent) {
           store.actions.components.copy(sourceComponent, true)
           store.actions.components.paste(destinationComponent, data.mode)

From 97800563c4c3b0176424c9a365bf007afd5f726e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 07:52:49 +0100
Subject: [PATCH 03/24] Prevent dragging the screen or layout components, and
 prevent dragging any layout components when previewing a screen

---
 packages/client/src/components/ClientApp.svelte | 5 ++++-
 packages/client/src/components/Component.svelte | 7 +++++--
 packages/client/src/components/Screen.svelte    | 2 +-
 packages/client/src/utils/styleable.js          | 6 +++++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 5c46161577..fb9117832f 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -105,7 +105,10 @@
               <div id="app-root">
                 <CustomThemeWrapper>
                   {#key $screenStore.activeLayout._id}
-                    <Component instance={$screenStore.activeLayout.props} />
+                    <Component
+                      isLayout
+                      instance={$screenStore.activeLayout.props}
+                    />
                   {/key}
 
                   <!-- Layers on top of app -->
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 20d8b53609..414d87a0aa 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -11,6 +11,8 @@
   import Placeholder from "components/app/Placeholder.svelte"
 
   export let instance = {}
+  export let isLayout = false
+  export let isScreen = false
 
   // The enriched component settings
   let enrichedSettings
@@ -178,7 +180,8 @@
       data-type={interactive ? "component" : ""}
       data-id={id}
       data-name={name}
-      data-droppable={definition?.hasChildren || false}
+      data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"}
+      data-droppable={definition?.hasChildren ? "true" : "false"}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
@@ -197,7 +200,7 @@
   .component {
     display: contents;
   }
-  .component > :global(*:hover) {
+  [data-draggable="true"] {
     cursor: pointer;
   }
 </style>
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index a759119320..4878df157f 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -22,6 +22,6 @@
 <!-- Ensure to fully remount when screen changes -->
 {#key screenDefinition?._id}
   <Provider key="url" data={params}>
-    <Component instance={screenDefinition} />
+    <Component isScreen instance={screenDefinition} />
   </Provider>
 {/key}
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 32171b9478..27f6c6a0f6 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -23,7 +23,11 @@ export const styleable = (node, styles = {}) => {
   let applyHoverStyles
   let selectComponent
 
-  node.setAttribute("draggable", true)
+  // Allow dragging if required
+  const parent = node.closest("[data-type='component']")
+  if (parent && parent.dataset.draggable === "true") {
+    node.setAttribute("draggable", true)
+  }
 
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {

From 5c37238c8a0e8571eb592bd97d6ad9213e292d90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 14:11:05 +0100
Subject: [PATCH 04/24] Fix progress circle never animating because of wrong
 default prop

---
 packages/bbui/src/ProgressCircle/ProgressCircle.svelte          | 2 +-
 .../client/src/components/preview/DNDPositionIndicator.svelte   | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/preview/DNDPositionIndicator.svelte

diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
index a86de55423..0428263346 100644
--- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -13,7 +13,7 @@
     }
   }
 
-  export let value = false
+  export let value = null
   export let minValue = 0
   export let maxValue = 100
 
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
new file mode 100644
index 0000000000..e69de29bb2

From bdc86e4c22c2eb98058384d06ad4a2e6473254f0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 14:28:44 +0100
Subject: [PATCH 05/24] Add above/below dnd and support for dropping
 above/below components which also allow dropping inside

---
 .../client/src/components/Component.svelte    |   3 +-
 .../src/components/preview/DNDHandler.svelte  | 106 ++++++++++++++++--
 .../preview/DNDPositionIndicator.svelte       |  33 ++++++
 .../components/preview/HoverIndicator.svelte  |   2 +-
 .../components/preview/IndicatorSet.svelte    |   4 +
 packages/client/src/stores/builder.js         |   8 ++
 packages/client/src/utils/styleable.js        |   3 +-
 7 files changed, 144 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 414d87a0aa..a7ac7b0cd0 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -181,7 +181,8 @@
       data-id={id}
       data-name={name}
       data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"}
-      data-droppable={definition?.hasChildren ? "true" : "false"}
+      data-droppable={interactive ? "true" : "false"}
+      data-droppable-inside={definition?.hasChildren ? "true" : "false"}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 88b9176efb..c3630051ee 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,36 +1,116 @@
 <script>
   import { onMount } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
+  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { builderStore } from "stores"
 
   let dragTarget
   let dropTarget
+  let dropMode
+  let dropInfo
+
+  const getDOMNodeForComponent = component => {
+    const parent = component.closest("[data-type='component']")
+    const children = Array.from(parent.childNodes)
+    return children?.find(node => node?.nodeType === 1)
+  }
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
+    // Update state
     dragTarget = e.target.dataset.componentId
-    e.target.style.opacity = 0.5
+    builderStore.actions.selectComponent(dragTarget)
+    builderStore.actions.showHoverIndicator(false)
+
+    // Highlight being dragged by setting opacity
+    const child = getDOMNodeForComponent(e.target)
+    console.log(child)
+    if (child) {
+      console.log("set opacity")
+      child.style.opacity = "0.5"
+    }
   }
 
   // Callback when drag stops (whether dropped or not)
   const onDragEnd = e => {
-    // reset the transparency
-    dragTarget = null
-    e.target.style.opacity = ""
+    // Reset state and styles
     dropTarget = null
+    dropInfo = null
+
+    // Reset opacity style
+    const child = getDOMNodeForComponent(e.target)
+    if (child) {
+      child.style.opacity = ""
+    }
+
+    // Re-enable the hover indicator
+    builderStore.actions.showHoverIndicator(true)
   }
 
   // Callback when on top of a component
   const onDragOver = e => {
     e.preventDefault()
+
+    if (dropInfo) {
+      const { droppableInside, bounds } = dropInfo
+      const { top, height } = bounds
+      const mouseY = e.clientY
+      const elTop = top
+      const elBottom = top + height
+
+      // Determine which edge we're nearest as this is needed for potentially
+      // any drop mode
+      let nearestEdge
+      if (Math.abs(elTop - mouseY) < Math.abs(elBottom - mouseY)) {
+        nearestEdge = "above"
+      } else {
+        nearestEdge = "below"
+      }
+
+      // If not available to drop inside, just check whether we are closer
+      // to the top or bottom
+      if (!droppableInside) {
+        dropMode = nearestEdge
+      }
+
+      // Otherwise determine whether the user wants to drop inside or at
+      // either edge
+      else {
+        const edgeLimit = Math.min(40, height * 0.33)
+        const insideLimit = [
+          Math.round(top + edgeLimit),
+          Math.round(top + height - edgeLimit),
+        ]
+        if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
+          dropMode = "inside"
+        } else {
+          dropMode = nearestEdge
+        }
+      }
+    }
   }
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
     const element = e.target.closest("[data-type='component']")
-    if (element && element.dataset.droppable === "true") {
+    if (
+      element &&
+      element.dataset.droppable &&
+      element.dataset.id !== dragTarget
+    ) {
+      // Store target ID
       dropTarget = element.dataset.id
+
+      // Precompute and store some info to avoid recalculating everything in
+      // dragOver
+      const child = getDOMNodeForComponent(e.target)
+      const bounds = child.getBoundingClientRect()
+      dropInfo = {
+        droppableInside: element.dataset.droppableInside === "true",
+        bounds,
+      }
     } else {
+      dropInfo = null
       dropTarget = null
     }
   }
@@ -42,11 +122,8 @@
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
     e.preventDefault()
-
-    // Check if the target is droppable
-    const element = e.target.closest("[data-type='component']")
-    if (element && element.dataset.droppable === "true") {
-      builderStore.actions.moveComponent(dragTarget, dropTarget, "inside")
+    if (dropTarget && dropMode) {
+      builderStore.actions.moveComponent(dragTarget, dropTarget, dropMode)
     }
   }
 
@@ -76,8 +153,13 @@
 </script>
 
 <IndicatorSet
-  componentId={dropTarget}
-  color="var(--spectrum-global-color-static-red-600)"
+  componentId={dropMode === "inside" ? dropTarget : null}
+  color="var(--spectrum-global-color-static-green-500)"
   zIndex="930"
   transition
+  prefix="Inside"
 />
+
+{#if dropMode !== "inside" && dropInfo}
+  <DNDPositionIndicator bounds={dropInfo.bounds} mode={dropMode} zIndex="940" />
+{/if}
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index e69de29bb2..d86b79b88f 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -0,0 +1,33 @@
+<script>
+  export let bounds
+  export let mode
+  export let zIndex
+
+  $: x = bounds?.left
+  $: y = getYPos(bounds, mode)
+  $: width = bounds?.width
+  $: valid = bounds != null
+
+  const getYPos = (bounds, mode) => {
+    if (!bounds || !mode) {
+      return null
+    }
+    const { top, height } = bounds
+    return mode === "above" ? top - 2 : top + height
+  }
+</script>
+
+{#if valid}
+  <div
+    class="indicator"
+    style={`top:${y}px;left:${x}px;width:${width}px;z-index:${zIndex};`}
+  />
+{/if}
+
+<style>
+  .indicator {
+    position: absolute;
+    height: 2px;
+    background: var(--spectrum-global-color-static-green-500);
+  }
+</style>
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 9518c6d101..3cae1e4c85 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  {componentId}
+  componentId={$builderStore.showHoverIndicator ? componentId : null}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 957c7d7bef..012aa7e470 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -7,6 +7,7 @@
   export let color
   export let transition
   export let zIndex
+  export let prefix = null
 
   let indicators = []
   let interval
@@ -51,6 +52,9 @@
     const parents = document.getElementsByClassName(componentId)
     if (parents.length) {
       text = parents[0].dataset.name
+      if (prefix) {
+        text = `${prefix} ${text}`
+      }
     }
 
     // Batch reads to minimize reflow
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 3a7eb1df61..ce653a8fc1 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -23,6 +23,7 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
+    showHoverIndicator: true,
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -76,9 +77,16 @@ const createBuilderStore = () => {
         mode,
       })
     },
+    showHoverIndicator: show => {
+      writableStore.update(state => {
+        state.showHoverIndicator = show
+        return state
+      })
+    },
   }
   return {
     ...writableStore,
+    set: state => writableStore.set({ ...initialState, ...state }),
     subscribe: derivedStore.subscribe,
     actions,
   }
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 27f6c6a0f6..899854ecc9 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -33,6 +33,7 @@ export const styleable = (node, styles = {}) => {
   const setupStyles = (newStyles = {}) => {
     // Use empty state styles as base styles if required, but let them, get
     // overridden by any user specified styles
+    const baseString = node.style.cssText
     let baseStyles = {}
     if (newStyles.empty) {
       baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
@@ -50,7 +51,7 @@ export const styleable = (node, styles = {}) => {
 
     // Applies a style string to a DOM node
     const applyStyles = styleString => {
-      node.style = styleString
+      node.style = `${baseString}${styleString}`
       node.dataset.componentId = componentId
     }
 

From 46867b8a198a28785aa7311b4526cec22a4253fd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 15:08:42 +0100
Subject: [PATCH 06/24] Add labels to DND to describe where the component will
 be dropped

---
 .../src/components/preview/DNDHandler.svelte  | 12 +++--
 .../preview/DNDPositionIndicator.svelte       | 53 +++++++++++--------
 .../src/components/preview/Indicator.svelte   |  8 ++-
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index c3630051ee..d1a4934826 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
+  import Indicator from "./Indicator.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { builderStore } from "stores"
 
@@ -106,6 +107,7 @@
       const child = getDOMNodeForComponent(e.target)
       const bounds = child.getBoundingClientRect()
       dropInfo = {
+        name: element.dataset.name,
         droppableInside: element.dataset.droppableInside === "true",
         bounds,
       }
@@ -160,6 +162,10 @@
   prefix="Inside"
 />
 
-{#if dropMode !== "inside" && dropInfo}
-  <DNDPositionIndicator bounds={dropInfo.bounds} mode={dropMode} zIndex="940" />
-{/if}
+<DNDPositionIndicator
+  dropInfo={dropMode !== "inside" ? dropInfo : null}
+  mode={dropMode}
+  color="var(--spectrum-global-color-static-green-500)"
+  zIndex="940"
+  transition
+/>
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index d86b79b88f..d9a12231ed 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -1,33 +1,42 @@
 <script>
-  export let bounds
+  import Indicator from "./Indicator.svelte"
+
+  export let dropInfo
   export let mode
   export let zIndex
+  export let color
+  export let transition
 
-  $: x = bounds?.left
-  $: y = getYPos(bounds, mode)
-  $: width = bounds?.width
-  $: valid = bounds != null
+  $: dimensions = getDimensions(dropInfo?.bounds, mode)
+  $: prefix = mode === "above" ? "Above" : "Below"
+  $: text = `${prefix} ${dropInfo?.name}`
 
-  const getYPos = (bounds, mode) => {
+  const getDimensions = (bounds, mode) => {
     if (!bounds || !mode) {
       return null
     }
-    const { top, height } = bounds
-    return mode === "above" ? top - 2 : top + height
+    const { left, top, width, height } = bounds
+    return {
+      top: mode === "above" ? top - 4 : top + height,
+      left: left - 2,
+      width: width + 4,
+    }
   }
 </script>
 
-{#if valid}
-  <div
-    class="indicator"
-    style={`top:${y}px;left:${x}px;width:${width}px;z-index:${zIndex};`}
-  />
-{/if}
-
-<style>
-  .indicator {
-    position: absolute;
-    height: 2px;
-    background: var(--spectrum-global-color-static-green-500);
-  }
-</style>
+{#key mode}
+  {#if dimensions}
+    <Indicator
+      left={dimensions.left}
+      top={dimensions.top}
+      width={dimensions.width}
+      height={0}
+      {text}
+      {zIndex}
+      {color}
+      {transition}
+      flip={mode === "below"}
+      rounded
+    />
+  {/if}
+{/key}
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 95364d0278..66363e3992 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -9,6 +9,9 @@
   export let color
   export let zIndex
   export let transition = false
+  export let flip = false
+
+  $: flipped = flip || top < 20
 </script>
 
 <div
@@ -18,11 +21,11 @@
   }}
   out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
-  class:flipped={top < 20}
+  class:flipped
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped={top < 20}>
+    <div class="text" class:flipped>
       {text}
     </div>
   {/if}
@@ -63,6 +66,7 @@
   }
   .text.flipped {
     border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
     transform: translateY(0%);
     top: -2px;
   }

From 601a4935a9a207a50925ebb7f04e9bcc797ab7e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 15:49:58 +0100
Subject: [PATCH 07/24] Ensure transitions work properly when showing and
 hiding DND candidate positions

---
 packages/client/src/components/preview/DNDHandler.svelte     | 5 ++---
 .../src/components/preview/DNDPositionIndicator.svelte       | 5 +++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index d1a4934826..111c009a3a 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -25,9 +25,7 @@
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
-    console.log(child)
     if (child) {
-      console.log("set opacity")
       child.style.opacity = "0.5"
     }
   }
@@ -163,7 +161,8 @@
 />
 
 <DNDPositionIndicator
-  dropInfo={dropMode !== "inside" ? dropInfo : null}
+  componentId={dropTarget}
+  {dropInfo}
   mode={dropMode}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="940"
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index d9a12231ed..8f7e1bdcbc 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -1,6 +1,7 @@
 <script>
   import Indicator from "./Indicator.svelte"
 
+  export let componentId
   export let dropInfo
   export let mode
   export let zIndex
@@ -24,8 +25,8 @@
   }
 </script>
 
-{#key mode}
-  {#if dimensions}
+{#key `${componentId}-${mode}`}
+  {#if dimensions && mode !== "inside"}
     <Indicator
       left={dimensions.left}
       top={dimensions.top}

From cb04b3fa7d92599f613bc7b77cdf059feaa429a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 16:02:45 +0100
Subject: [PATCH 08/24] Ensure hover indicator is correctly hidden when using
 DND and improve DND labels

---
 .../src/components/preview/DNDHandler.svelte       | 10 ++++++++--
 .../components/preview/DNDPositionIndicator.svelte |  3 +--
 .../client/src/components/preview/Indicator.svelte | 14 +++++++++++---
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 111c009a3a..409eeb2d8f 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import Indicator from "./Indicator.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { builderStore } from "stores"
 
@@ -21,7 +21,6 @@
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
-    builderStore.actions.showHoverIndicator(false)
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
@@ -97,6 +96,13 @@
       element.dataset.droppable &&
       element.dataset.id !== dragTarget
     ) {
+      // Disable hover selection again to ensure it's always disabled.
+      // There's a bit of a race condition between the app reinitialisation
+      // after selecting the DND component and setting this the first time
+      if (get(builderStore).showHoverIndicator) {
+        builderStore.actions.showHoverIndicator(false)
+      }
+
       // Store target ID
       dropTarget = element.dataset.id
 
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index 8f7e1bdcbc..80539004c6 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -36,8 +36,7 @@
       {zIndex}
       {color}
       {transition}
-      flip={mode === "below"}
-      rounded
+      line
     />
   {/if}
 {/key}
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 66363e3992..e4082f6f7c 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -9,9 +9,9 @@
   export let color
   export let zIndex
   export let transition = false
-  export let flip = false
+  export let line = false
 
-  $: flipped = flip || top < 20
+  $: flipped = top < 20
 </script>
 
 <div
@@ -22,10 +22,11 @@
   out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
   class:flipped
+  class:line
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped>
+    <div class="text" class:flipped class:line>
       {text}
     </div>
   {/if}
@@ -45,6 +46,9 @@
   .indicator.flipped {
     border-top-left-radius: 4px;
   }
+  .indicator.line {
+    border-radius: 4px !important;
+  }
   .text {
     background-color: var(--color);
     color: white;
@@ -70,4 +74,8 @@
     transform: translateY(0%);
     top: -2px;
   }
+  .text.line {
+    transform: translateY(-50%) !important;
+    border-radius: 4px !important;
+  }
 </style>

From e625d2e4a321a20ff62c1904c9e65ce4ec0df636 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 17:39:39 +0100
Subject: [PATCH 09/24] Reduce duplication in move componment handler from dnd
 callback

---
 .../AppPreview/CurrentItemPreview.svelte      | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 3901252ee9..4e51850fe1 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -125,29 +125,24 @@
       // loading is supported
       loading = false
     } else if (type === "move-component") {
-      // Copy
-      const sourceComponent = findComponent(
-        get(currentAsset).props,
-        data.componentId
-      )
-      const destinationComponent = findComponent(
-        get(currentAsset).props,
-        data.destinationComponentId
-      )
+      const { componentId, destinationComponentId } = data
+      const rootComponent = get(currentAsset).props
+
+      // Get source and destination components
+      const source = findComponent(rootComponent, componentId)
+      const destination = findComponent(rootComponent, destinationComponentId)
 
       // Stop if the target is a child of source
-      const path = findComponentPath(
-        sourceComponent,
-        data.destinationComponentId
-      )
+      const path = findComponentPath(source, destinationComponentId)
       const ids = path.map(component => component._id)
       if (ids.includes(data.destinationComponentId)) {
         return
       }
 
-      if (sourceComponent && destinationComponent) {
-        store.actions.components.copy(sourceComponent, true)
-        store.actions.components.paste(destinationComponent, data.mode)
+      // Cut and paste the component to the new destination
+      if (source && destination) {
+        store.actions.components.copy(source, true)
+        store.actions.components.paste(destination, data.mode)
       }
     } else {
       console.warning(`Client sent unknown event type: ${type}`)

From 7eeb215e51722e4afd42f034f3a973d764cb1034 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 17 Sep 2021 14:17:50 +0100
Subject: [PATCH 10/24] Refactor to use generic flag for dragging and hide
 settings bar when dragging

---
 .../client/src/components/preview/DNDHandler.svelte   | 11 +++++------
 .../src/components/preview/HoverIndicator.svelte      |  2 +-
 .../client/src/components/preview/SettingsBar.svelte  |  2 +-
 packages/client/src/stores/builder.js                 |  7 +++----
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 409eeb2d8f..c1a6a74465 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -21,6 +21,7 @@
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
+    builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
@@ -34,15 +35,13 @@
     // Reset state and styles
     dropTarget = null
     dropInfo = null
+    builderStore.actions.setDragging(false)
 
     // Reset opacity style
     const child = getDOMNodeForComponent(e.target)
     if (child) {
       child.style.opacity = ""
     }
-
-    // Re-enable the hover indicator
-    builderStore.actions.showHoverIndicator(true)
   }
 
   // Callback when on top of a component
@@ -96,11 +95,11 @@
       element.dataset.droppable &&
       element.dataset.id !== dragTarget
     ) {
-      // Disable hover selection again to ensure it's always disabled.
+      // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
       // after selecting the DND component and setting this the first time
-      if (get(builderStore).showHoverIndicator) {
-        builderStore.actions.showHoverIndicator(false)
+      if (!get(builderStore).isDragging) {
+        builderStore.actions.setDragging(true)
       }
 
       // Store target ID
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 3cae1e4c85..28109cb262 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.showHoverIndicator ? componentId : null}
+  componentId={$builderStore.isDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 3581d4f5f8..43c77ef1e6 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $builderStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar
+  $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
   $: settings = definition?.settings?.filter(setting => setting.showInBar) ?? []
 
   const updatePosition = () => {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index ce653a8fc1..0d738e4a11 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -23,7 +23,7 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    showHoverIndicator: true,
+    isDragging: false,
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -77,16 +77,15 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    showHoverIndicator: show => {
+    setDragging: dragging => {
       writableStore.update(state => {
-        state.showHoverIndicator = show
+        state.isDragging = dragging
         return state
       })
     },
   }
   return {
     ...writableStore,
-    set: state => writableStore.set({ ...initialState, ...state }),
     subscribe: derivedStore.subscribe,
     actions,
   }

From 54bf420ef89b6fe7eb6ec2c43051ec22d49f4d34 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 17 Sep 2021 14:30:54 +0100
Subject: [PATCH 11/24] Apply grab cursor when hovering over a draggable
 component

---
 packages/client/src/components/Component.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a7ac7b0cd0..980e7cd80b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -201,7 +201,7 @@
   .component {
     display: contents;
   }
-  [data-draggable="true"] {
-    cursor: pointer;
+  [data-draggable="true"] :global(*:hover) {
+    cursor: grab !important;
   }
 </style>

From f0dde4a4a425c625893b32a255d3ea02c5dc7027 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 08:06:01 +0100
Subject: [PATCH 12/24] Fix a few possible crashes by dragging in certain ways,
 and display on screen when an invalid drop target is hovered over

---
 .../src/components/preview/DNDHandler.svelte  | 90 +++++++++++--------
 1 file changed, 52 insertions(+), 38 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index c1a6a74465..fe4d7f4d59 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/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,63 +36,73 @@
 
   // Callback when drag stops (whether dropped or not)
   const onDragEnd = e => {
+    // 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)
-
-    // Reset opacity style
-    const child = getDOMNodeForComponent(e.target)
-    if (child) {
-      child.style.opacity = ""
-    }
   }
 
   // Callback when on top of a component
   const onDragOver = e => {
+    // Skip if we aren't validly dragging currently
+    if (!dragTarget || !dropInfo) {
+      return
+    }
+
     e.preventDefault()
+    const { droppableInside, bounds } = dropInfo
+    const { top, height } = bounds
+    const mouseY = e.clientY
+    const elTop = top
+    const elBottom = top + height
 
-    if (dropInfo) {
-      const { droppableInside, bounds } = dropInfo
-      const { top, height } = bounds
-      const mouseY = e.clientY
-      const elTop = top
-      const elBottom = top + height
+    // Determine which edge we're nearest as this is needed for potentially
+    // any drop mode
+    let nearestEdge
+    if (Math.abs(elTop - mouseY) < Math.abs(elBottom - mouseY)) {
+      nearestEdge = "above"
+    } else {
+      nearestEdge = "below"
+    }
 
-      // Determine which edge we're nearest as this is needed for potentially
-      // any drop mode
-      let nearestEdge
-      if (Math.abs(elTop - mouseY) < Math.abs(elBottom - mouseY)) {
-        nearestEdge = "above"
+    // If not available to drop inside, just check whether we are closer
+    // to the top or bottom
+    if (!droppableInside) {
+      dropMode = nearestEdge
+    }
+
+    // Otherwise determine whether the user wants to drop inside or at
+    // either edge
+    else {
+      const edgeLimit = Math.min(40, height * 0.33)
+      const insideLimit = [
+        Math.round(top + edgeLimit),
+        Math.round(top + height - edgeLimit),
+      ]
+      if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
+        dropMode = "inside"
       } else {
-        nearestEdge = "below"
-      }
-
-      // If not available to drop inside, just check whether we are closer
-      // to the top or bottom
-      if (!droppableInside) {
         dropMode = nearestEdge
       }
-
-      // Otherwise determine whether the user wants to drop inside or at
-      // either edge
-      else {
-        const edgeLimit = Math.min(40, height * 0.33)
-        const insideLimit = [
-          Math.round(top + edgeLimit),
-          Math.round(top + height - edgeLimit),
-        ]
-        if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
-          dropMode = "inside"
-        } else {
-          dropMode = nearestEdge
-        }
-      }
     }
   }
 
   // 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 &&

From 8cf3971b471a4c67a47de30f58702859f8148367 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 08:26:44 +0100
Subject: [PATCH 13/24] Only allow dropping inside empty components that accept
 children to massively reduce the amount of unwanted drop targets due to
 parent container components

---
 .../client/src/components/Component.svelte    | 15 ++++--
 .../src/components/preview/DNDHandler.svelte  | 53 ++++++++++---------
 .../preview/DNDPositionIndicator.svelte       | 10 ++--
 3 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 980e7cd80b..6192004b42 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -171,18 +171,23 @@
     conditionalSettings = result.settingUpdates
     visible = nextVisible
   }
+
+  // Drag and drop helper tags
+  $: draggable = interactive && !isLayout && !isScreen
+  $: droppable = interactive
+  $: dropInside = interactive && definition?.hasChildren && !children.length
 </script>
 
 {#key propsHash}
   {#if constructor && componentSettings && (visible || inSelectedPath)}
     <div
       class={`component ${id}`}
-      data-type={interactive ? "component" : ""}
+      data-type={interactive ? "component" : "readonly"}
       data-id={id}
       data-name={name}
-      data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"}
-      data-droppable={interactive ? "true" : "false"}
-      data-droppable-inside={definition?.hasChildren ? "true" : "false"}
+      data-draggable={draggable}
+      data-droppable={droppable}
+      data-droppable-inside={dropInside}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
@@ -202,6 +207,6 @@
     display: contents;
   }
   [data-draggable="true"] :global(*:hover) {
-    cursor: grab !important;
+    cursor: grab;
   }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index fe4d7f4d59..2437386929 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -5,9 +5,7 @@
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { builderStore } from "stores"
 
-  let dragTarget
-  let dropTarget
-  let dropMode
+  let dragInfo
   let dropInfo
 
   const getDOMNodeForComponent = component => {
@@ -18,26 +16,28 @@
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    if (!e.target?.dataset?.componentId) {
+    const parent = e.target.closest("[data-type='component']")
+    const child = getDOMNodeForComponent(e.target)
+    if (!parent?.dataset?.id || !child) {
       return
     }
 
     // Update state
-    dragTarget = e.target.dataset.componentId
-    builderStore.actions.selectComponent(dragTarget)
+    dragInfo = {
+      target: parent.dataset.id,
+      parent: parent.dataset.parent,
+    }
+    builderStore.actions.selectComponent(dragInfo.target)
     builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
-    const child = getDOMNodeForComponent(e.target)
-    if (child) {
-      child.style.opacity = "0.5"
-    }
+    child.style.opacity = "0.5"
   }
 
   // Callback when drag stops (whether dropped or not)
   const onDragEnd = e => {
     // Reset opacity style
-    if (dragTarget) {
+    if (dragInfo) {
       const child = getDOMNodeForComponent(e.target)
       if (child) {
         child.style.opacity = ""
@@ -45,8 +45,7 @@
     }
 
     // Reset state and styles
-    dragTarget = null
-    dropTarget = null
+    dragInfo = null
     dropInfo = null
     builderStore.actions.setDragging(false)
   }
@@ -54,7 +53,7 @@
   // Callback when on top of a component
   const onDragOver = e => {
     // Skip if we aren't validly dragging currently
-    if (!dragTarget || !dropInfo) {
+    if (!dragInfo || !dropInfo) {
       return
     }
 
@@ -77,7 +76,7 @@
     // If not available to drop inside, just check whether we are closer
     // to the top or bottom
     if (!droppableInside) {
-      dropMode = nearestEdge
+      dropInfo.mode = nearestEdge
     }
 
     // Otherwise determine whether the user wants to drop inside or at
@@ -89,9 +88,9 @@
         Math.round(top + height - edgeLimit),
       ]
       if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
-        dropMode = "inside"
+        dropInfo.mode = "inside"
       } else {
-        dropMode = nearestEdge
+        dropInfo.mode = nearestEdge
       }
     }
   }
@@ -99,7 +98,7 @@
   // Callback when entering a potential drop target
   const onDragEnter = e => {
     // Skip if we aren't validly dragging currently
-    if (!dragTarget) {
+    if (!dragInfo) {
       return
     }
 
@@ -107,7 +106,7 @@
     if (
       element &&
       element.dataset.droppable &&
-      element.dataset.id !== dragTarget
+      element.dataset.id !== dragInfo.target
     ) {
       // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
@@ -117,20 +116,20 @@
       }
 
       // Store target ID
-      dropTarget = element.dataset.id
+      const target = element.dataset.id
 
       // Precompute and store some info to avoid recalculating everything in
       // dragOver
       const child = getDOMNodeForComponent(e.target)
       const bounds = child.getBoundingClientRect()
       dropInfo = {
+        target,
         name: element.dataset.name,
         droppableInside: element.dataset.droppableInside === "true",
         bounds,
       }
     } else {
       dropInfo = null
-      dropTarget = null
     }
   }
 
@@ -141,8 +140,12 @@
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
     e.preventDefault()
-    if (dropTarget && dropMode) {
-      builderStore.actions.moveComponent(dragTarget, dropTarget, dropMode)
+    if (dropInfo) {
+      builderStore.actions.moveComponent(
+        dragInfo.target,
+        dropInfo.target,
+        dropInfo.mode
+      )
     }
   }
 
@@ -172,7 +175,7 @@
 </script>
 
 <IndicatorSet
-  componentId={dropMode === "inside" ? dropTarget : null}
+  componentId={dropInfo?.mode === "inside" ? dropInfo.target : null}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="930"
   transition
@@ -180,9 +183,7 @@
 />
 
 <DNDPositionIndicator
-  componentId={dropTarget}
   {dropInfo}
-  mode={dropMode}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="940"
   transition
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index 80539004c6..8565d42f9e 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -1,15 +1,13 @@
 <script>
   import Indicator from "./Indicator.svelte"
 
-  export let componentId
   export let dropInfo
-  export let mode
   export let zIndex
   export let color
   export let transition
 
-  $: dimensions = getDimensions(dropInfo?.bounds, mode)
-  $: prefix = mode === "above" ? "Above" : "Below"
+  $: dimensions = getDimensions(dropInfo?.bounds, dropInfo?.mode)
+  $: prefix = dropInfo?.mode === "above" ? "Above" : "Below"
   $: text = `${prefix} ${dropInfo?.name}`
 
   const getDimensions = (bounds, mode) => {
@@ -25,8 +23,8 @@
   }
 </script>
 
-{#key `${componentId}-${mode}`}
-  {#if dimensions && mode !== "inside"}
+{#key `${dropInfo?.target}-${dropInfo?.mode}`}
+  {#if dimensions && dropInfo?.mode !== "inside"}
     <Indicator
       left={dimensions.left}
       top={dimensions.top}

From e19d17c4f52565caf6345fbe210f126661a11f64 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 09:12:35 +0100
Subject: [PATCH 14/24] Prevent DND targetting either above or below the
 screen/layout, and fix bug determinging whether a drop target is valid

---
 packages/client/src/components/Component.svelte          | 2 +-
 packages/client/src/components/preview/DNDHandler.svelte | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6192004b42..5e02e345d4 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -174,7 +174,7 @@
 
   // Drag and drop helper tags
   $: draggable = interactive && !isLayout && !isScreen
-  $: droppable = interactive
+  $: droppable = interactive && !isLayout && !isScreen
   $: dropInside = interactive && definition?.hasChildren && !children.length
 </script>
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 2437386929..90e2a55ca4 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -105,9 +105,14 @@
     const element = e.target.closest("[data-type='component']")
     if (
       element &&
-      element.dataset.droppable &&
+      element.dataset.droppable === "true" &&
       element.dataset.id !== dragInfo.target
     ) {
+      // Do nothing if this is the same target
+      if (element.dataset.id === dropInfo?.target) {
+        return
+      }
+
       // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
       // after selecting the DND component and setting this the first time

From 9ca0aeae8e23ce22e846b78b09bc6224d08eec00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 12:14:40 +0100
Subject: [PATCH 15/24] Fix spectrum button not being able to be dragged

---
 packages/client/src/components/app/Button.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index ed465e3e66..9900c740d2 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -31,4 +31,7 @@
   .spectrum-Button--overBackground:hover {
     color: #555;
   }
+  .spectrum-Button::after {
+    display: none;
+  }
 </style>

From 10f754a9ad52982a3322afdc8350477d5b8aa947 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 12:16:23 +0100
Subject: [PATCH 16/24] Remove preview specific data tags from components when
 running real apps

---
 packages/client/src/components/Component.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 5e02e345d4..f590e2aa9f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -63,7 +63,9 @@
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
-  $: interactive = $builderStore.previewType === "layout" || insideScreenslot
+  $: interactive =
+    $builderStore.inBuilder &&
+    ($builderStore.previewType === "layout" || insideScreenslot)
   $: evaluateConditions(enrichedSettings?._conditions)
   $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
 

From 07e0cbb210c5357f83b3e5532b39b86ac3b5fed6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 12:20:34 +0100
Subject: [PATCH 17/24] Remove old and no longer needed component-id data tag
 applied by styleable helper

---
 packages/builder/cypress/support/commands.js | 2 +-
 packages/client/src/utils/styleable.js       | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index ea6ca81e66..dbfabeda3f 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -145,7 +145,7 @@ Cypress.Commands.add("getComponent", componentId => {
     .its("body")
     .should("not.be.null")
     .then(cy.wrap)
-    .find(`[data-component-id=${componentId}]`)
+    .find(`[data-id=${componentId}]`)
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 899854ecc9..3fce1bcf26 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -52,7 +52,6 @@ export const styleable = (node, styles = {}) => {
     // Applies a style string to a DOM node
     const applyStyles = styleString => {
       node.style = `${baseString}${styleString}`
-      node.dataset.componentId = componentId
     }
 
     // Applies the "normal" style definition

From 488ec4d988686899650a48b53e6badeac1ecdbfa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 15:34:51 +0100
Subject: [PATCH 18/24] Refactor client app data tags to be classnames and
 simplify logic

---
 .../client/src/components/Component.svelte    | 69 ++++++++++---------
 .../src/components/app/Container.svelte       |  4 +-
 .../src/components/preview/DNDHandler.svelte  | 18 ++---
 .../components/preview/HoverIndicator.svelte  |  2 +-
 packages/client/src/utils/styleable.js        |  4 +-
 5 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f590e2aa9f..3d863c276e 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -51,11 +51,11 @@
   $: children = instance._children || []
   $: id = instance._id
   $: name = instance._instanceName
-  $: empty =
-    !children.length &&
-    definition?.hasChildren &&
-    definition?.showEmptyState !== false &&
-    $builderStore.inBuilder
+  $: interactive =
+    $builderStore.inBuilder &&
+    ($builderStore.previewType === "layout" || insideScreenslot)
+  $: empty = interactive && !children.length && definition?.hasChildren
+  $: emptyState = empty && definition?.showEmptyState !== false
   $: rawProps = getRawProps(instance)
   $: instanceKey = JSON.stringify(rawProps)
   $: updateComponentProps(rawProps, instanceKey, $context)
@@ -63,9 +63,6 @@
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
-  $: interactive =
-    $builderStore.inBuilder &&
-    ($builderStore.previewType === "layout" || insideScreenslot)
   $: evaluateConditions(enrichedSettings?._conditions)
   $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
 
@@ -73,8 +70,8 @@
   $: componentStore.set({
     id,
     children: children.length,
-    styles: { ...instance._styles, id, empty, interactive },
-    empty,
+    styles: { ...instance._styles, id, empty: emptyState, interactive },
+    empty: emptyState,
     selected,
     name,
   })
@@ -177,38 +174,44 @@
   // Drag and drop helper tags
   $: draggable = interactive && !isLayout && !isScreen
   $: droppable = interactive && !isLayout && !isScreen
-  $: dropInside = interactive && definition?.hasChildren && !children.length
 </script>
 
 {#key propsHash}
-  {#if constructor && componentSettings && (visible || inSelectedPath)}
-    <div
-      class={`component ${id}`}
-      data-type={interactive ? "component" : "readonly"}
-      data-id={id}
-      data-name={name}
-      data-draggable={draggable}
-      data-droppable={droppable}
-      data-droppable-inside={dropInside}
-    >
-      <svelte:component this={constructor} {...componentSettings}>
-        {#if children.length}
-          {#each children as child (child._id)}
-            <svelte:self instance={child} />
-          {/each}
-        {:else if empty}
-          <Placeholder />
-        {/if}
-      </svelte:component>
-    </div>
-  {/if}
+  {#key empty}
+    {#if constructor && componentSettings && (visible || inSelectedPath)}
+      <!-- The ID is used as a class because getElementsByClassName is O(1) -->
+      <!-- and the performance matters for the selection indicators -->
+      <div
+        class={`component ${id}`}
+        class:draggable
+        class:droppable
+        class:empty
+        class:interactive
+        data-id={id}
+        data-name={name}
+      >
+        <svelte:component this={constructor} {...componentSettings}>
+          {#if children.length}
+            {#each children as child (child._id)}
+              <svelte:self instance={child} />
+            {/each}
+          {:else if emptyState}
+            <Placeholder />
+          {/if}
+        </svelte:component>
+      </div>
+    {/if}
+  {/key}
 {/key}
 
 <style>
   .component {
     display: contents;
   }
-  [data-draggable="true"] :global(*:hover) {
+  .interactive :global(*:hover) {
+    cursor: pointer;
+  }
+  .draggable :global(*:hover) {
     cursor: grab;
   }
 </style>
diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte
index 5b2f951c8d..148179c98f 100644
--- a/packages/client/src/components/app/Container.svelte
+++ b/packages/client/src/components/app/Container.svelte
@@ -34,7 +34,7 @@
     display: flex;
     max-width: 100%;
   }
-  .valid-container :global([data-type="component"] > *) {
+  .valid-container :global(.component > *) {
     max-width: 100%;
   }
   .direction-row {
@@ -46,7 +46,7 @@
 
   /* Grow containers inside a row need 0 width 0 so that they ignore content */
   /* The nested selector for data-type is the wrapper around all components */
-  .direction-row :global(> [data-type="component"] > .size-grow) {
+  .direction-row :global(> .component > .size-grow) {
     width: 0;
   }
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 90e2a55ca4..d7d2d94793 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -9,16 +9,15 @@
   let dropInfo
 
   const getDOMNodeForComponent = component => {
-    const parent = component.closest("[data-type='component']")
+    const parent = component.closest(".component")
     const children = Array.from(parent.childNodes)
     return children?.find(node => node?.nodeType === 1)
   }
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    const parent = e.target.closest("[data-type='component']")
-    const child = getDOMNodeForComponent(e.target)
-    if (!parent?.dataset?.id || !child) {
+    const parent = e.target.closest(".component")
+    if (!parent?.classList.contains("draggable")) {
       return
     }
 
@@ -31,7 +30,10 @@
     builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
-    child.style.opacity = "0.5"
+    const child = getDOMNodeForComponent(e.target)
+    if (child) {
+      child.style.opacity = "0.5"
+    }
   }
 
   // Callback when drag stops (whether dropped or not)
@@ -102,10 +104,10 @@
       return
     }
 
-    const element = e.target.closest("[data-type='component']")
+    const element = e.target.closest(".component")
     if (
       element &&
-      element.dataset.droppable === "true" &&
+      element.classList.contains("droppable") &&
       element.dataset.id !== dragInfo.target
     ) {
       // Do nothing if this is the same target
@@ -130,7 +132,7 @@
       dropInfo = {
         target,
         name: element.dataset.name,
-        droppableInside: element.dataset.droppableInside === "true",
+        droppableInside: element.classList.contains("empty"),
         bounds,
       }
     } else {
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 28109cb262..1a9e6477ac 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -7,7 +7,7 @@
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
 
   const onMouseOver = e => {
-    const element = e.target.closest("[data-type='component']")
+    const element = e.target.closest(".interactive.component")
     const newId = element?.dataset?.id
     if (newId !== componentId) {
       componentId = newId
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 3fce1bcf26..89d983d73b 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -24,8 +24,8 @@ export const styleable = (node, styles = {}) => {
   let selectComponent
 
   // Allow dragging if required
-  const parent = node.closest("[data-type='component']")
-  if (parent && parent.dataset.draggable === "true") {
+  const parent = node.closest(".component")
+  if (parent && parent.classList.contains("draggable")) {
     node.setAttribute("draggable", true)
   }
 

From 9febe391bb96f9cba99d5c1c63f750a2433f2898 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 15:35:27 +0100
Subject: [PATCH 19/24] Refactor DND labels to before and after rather then
 above and below

---
 .../client/src/components/preview/DNDPositionIndicator.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index 8565d42f9e..19a44cfccc 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -7,7 +7,7 @@
   export let transition
 
   $: dimensions = getDimensions(dropInfo?.bounds, dropInfo?.mode)
-  $: prefix = dropInfo?.mode === "above" ? "Above" : "Below"
+  $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
   $: text = `${prefix} ${dropInfo?.name}`
 
   const getDimensions = (bounds, mode) => {

From 495c20f85173899c2859fa6176c98e0782e89e3d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 15:41:20 +0100
Subject: [PATCH 20/24] Simplify client app component re-render keying

---
 .../client/src/components/Component.svelte    | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d863c276e..faf0226604 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -65,6 +65,7 @@
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
   $: evaluateConditions(enrichedSettings?._conditions)
   $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
+  $: renderKey = `${propsHash}-${emptyState}`
 
   // Update component context
   $: componentStore.set({
@@ -176,32 +177,30 @@
   $: droppable = interactive && !isLayout && !isScreen
 </script>
 
-{#key propsHash}
-  {#key empty}
-    {#if constructor && componentSettings && (visible || inSelectedPath)}
-      <!-- The ID is used as a class because getElementsByClassName is O(1) -->
-      <!-- and the performance matters for the selection indicators -->
-      <div
-        class={`component ${id}`}
-        class:draggable
-        class:droppable
-        class:empty
-        class:interactive
-        data-id={id}
-        data-name={name}
-      >
-        <svelte:component this={constructor} {...componentSettings}>
-          {#if children.length}
-            {#each children as child (child._id)}
-              <svelte:self instance={child} />
-            {/each}
-          {:else if emptyState}
-            <Placeholder />
-          {/if}
-        </svelte:component>
-      </div>
-    {/if}
-  {/key}
+{#key renderKey}
+  {#if constructor && componentSettings && (visible || inSelectedPath)}
+    <!-- The ID is used as a class because getElementsByClassName is O(1) -->
+    <!-- and the performance matters for the selection indicators -->
+    <div
+      class={`component ${id}`}
+      class:draggable
+      class:droppable
+      class:empty
+      class:interactive
+      data-id={id}
+      data-name={name}
+    >
+      <svelte:component this={constructor} {...componentSettings}>
+        {#if children.length}
+          {#each children as child (child._id)}
+            <svelte:self instance={child} />
+          {/each}
+        {:else if emptyState}
+          <Placeholder />
+        {/if}
+      </svelte:component>
+    </div>
+  {/if}
 {/key}
 
 <style>

From dc3df10c581e916d629c7d42ff8c857a5b124df2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 16:11:42 +0100
Subject: [PATCH 21/24] Reduce DND snap to edge threshold to prevent unwanted
 target spamming on the edges of the parent component

---
 .../src/components/preview/DNDHandler.svelte  | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index d7d2d94793..7d83e0998c 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -63,37 +63,21 @@
     const { droppableInside, bounds } = dropInfo
     const { top, height } = bounds
     const mouseY = e.clientY
-    const elTop = top
-    const elBottom = top + height
+    const snapFactor = droppableInside ? 0.33 : 0.5
+    const snapLimit = Math.min(40, height * snapFactor)
+    const edgeLimits = [
+      Math.round(top + snapLimit),
+      Math.round(top + height - snapLimit),
+    ]
 
-    // Determine which edge we're nearest as this is needed for potentially
-    // any drop mode
-    let nearestEdge
-    if (Math.abs(elTop - mouseY) < Math.abs(elBottom - mouseY)) {
-      nearestEdge = "above"
+    if (mouseY <= edgeLimits[0]) {
+      dropInfo.mode = "above"
+    } else if (mouseY >= edgeLimits[1]) {
+      dropInfo.mode = "below"
+    } else if (droppableInside) {
+      dropInfo.mode = "inside"
     } else {
-      nearestEdge = "below"
-    }
-
-    // If not available to drop inside, just check whether we are closer
-    // to the top or bottom
-    if (!droppableInside) {
-      dropInfo.mode = nearestEdge
-    }
-
-    // Otherwise determine whether the user wants to drop inside or at
-    // either edge
-    else {
-      const edgeLimit = Math.min(40, height * 0.33)
-      const insideLimit = [
-        Math.round(top + edgeLimit),
-        Math.round(top + height - edgeLimit),
-      ]
-      if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
-        dropInfo.mode = "inside"
-      } else {
-        dropInfo.mode = nearestEdge
-      }
+      dropInfo.mode = null
     }
   }
 
@@ -147,7 +131,7 @@
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
     e.preventDefault()
-    if (dropInfo) {
+    if (dropInfo?.mode) {
       builderStore.actions.moveComponent(
         dragInfo.target,
         dropInfo.target,

From 393e95d795f86173d7fe1638f824bc8107f06d10 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 16:47:53 +0100
Subject: [PATCH 22/24] Revert preservation of base component styles by
 styleable helper to fix stale styles being applied after removal

---
 packages/client/src/utils/styleable.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 89d983d73b..6a2562fb48 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -31,9 +31,6 @@ export const styleable = (node, styles = {}) => {
 
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
-    // Use empty state styles as base styles if required, but let them, get
-    // overridden by any user specified styles
-    const baseString = node.style.cssText
     let baseStyles = {}
     if (newStyles.empty) {
       baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
@@ -51,7 +48,7 @@ export const styleable = (node, styles = {}) => {
 
     // Applies a style string to a DOM node
     const applyStyles = styleString => {
-      node.style = `${baseString}${styleString}`
+      node.style = styleString
     }
 
     // Applies the "normal" style definition

From eeb0617d2b8ecc49c602341dfcfcf05b6930d624 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 21 Sep 2021 08:36:02 +0100
Subject: [PATCH 23/24] Enable left/right side targetting for DND

---
 .../src/components/preview/DNDHandler.svelte  | 83 ++++++++++++++++---
 .../preview/DNDPositionIndicator.svelte       | 36 +++++---
 .../src/components/preview/Indicator.svelte   |  8 +-
 3 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 7d83e0998c..8a824f6131 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,3 +1,12 @@
+<script context="module">
+  export const Sides = {
+    Top: "Top",
+    Right: "Right",
+    Bottom: "Bottom",
+    Left: "Left",
+  }
+</script>
+
 <script>
   import { onMount } from "svelte"
   import { get } from "svelte/store"
@@ -8,6 +17,22 @@
   let dragInfo
   let dropInfo
 
+  const getEdges = (bounds, mousePoint) => {
+    const { width, height, top, left } = bounds
+    return {
+      [Sides.Top]: [mousePoint[0], top],
+      [Sides.Right]: [left + width, mousePoint[1]],
+      [Sides.Bottom]: [mousePoint[0], top + height],
+      [Sides.Left]: [left, mousePoint[1]],
+    }
+  }
+
+  const calculatePointDelta = (point1, point2) => {
+    const deltaX = Math.abs(point1[0] - point2[0])
+    const deltaY = Math.abs(point1[1] - point2[1])
+    return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+  }
+
   const getDOMNodeForComponent = component => {
     const parent = component.closest(".component")
     const children = Array.from(parent.childNodes)
@@ -61,23 +86,57 @@
 
     e.preventDefault()
     const { droppableInside, bounds } = dropInfo
-    const { top, height } = bounds
+    const { top, left, height, width } = bounds
     const mouseY = e.clientY
+    const mouseX = e.clientX
     const snapFactor = droppableInside ? 0.33 : 0.5
-    const snapLimit = Math.min(40, height * snapFactor)
-    const edgeLimits = [
-      Math.round(top + snapLimit),
-      Math.round(top + height - snapLimit),
-    ]
+    const snapLimitV = Math.min(40, height * snapFactor)
+    const snapLimitH = Math.min(40, width * snapFactor)
 
-    if (mouseY <= edgeLimits[0]) {
+    // Determine all sies we are within snap range of
+    let sides = []
+    if (mouseY <= top + snapLimitV) {
+      sides.push(Sides.Top)
+    } else if (mouseY >= top + height - snapLimitV) {
+      sides.push(Sides.Bottom)
+    }
+    if (mouseX < left + snapLimitH) {
+      sides.push(Sides.Left)
+    } else if (mouseX > left + width - snapLimitH) {
+      sides.push(Sides.Right)
+    }
+
+    // When no edges match, drop inside if possible
+    if (!sides.length) {
+      dropInfo.mode = droppableInside ? "inside" : null
+      dropInfo.side = null
+      return
+    }
+
+    // When one edge matches, use that edge
+    if (sides.length === 1) {
+      dropInfo.side = sides[0]
+      if ([Sides.Top, Sides.Left].includes(sides[0])) {
+        dropInfo.mode = "above"
+      } else {
+        dropInfo.mode = "below"
+      }
+      return
+    }
+
+    // When 2 edges match, work out which is closer
+    const mousePoint = [mouseX, mouseY]
+    const edges = getEdges(bounds, mousePoint)
+    const edge1 = edges[sides[0]]
+    const delta1 = calculatePointDelta(mousePoint, edge1)
+    const edge2 = edges[sides[1]]
+    const delta2 = calculatePointDelta(mousePoint, edge2)
+    const edge = delta1 < delta2 ? sides[0] : sides[1]
+    dropInfo.side = edge
+    if ([Sides.Top, Sides.Left].includes(edge)) {
       dropInfo.mode = "above"
-    } else if (mouseY >= edgeLimits[1]) {
-      dropInfo.mode = "below"
-    } else if (droppableInside) {
-      dropInfo.mode = "inside"
     } else {
-      dropInfo.mode = null
+      dropInfo.mode = "below"
     }
   }
 
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index 19a44cfccc..e849ab0313 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte
@@ -1,39 +1,53 @@
 <script>
   import Indicator from "./Indicator.svelte"
+  import { Sides } from "./DNDHandler.svelte"
 
   export let dropInfo
   export let zIndex
   export let color
   export let transition
 
-  $: dimensions = getDimensions(dropInfo?.bounds, dropInfo?.mode)
+  $: dimensions = getDimensions(dropInfo)
   $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
   $: text = `${prefix} ${dropInfo?.name}`
+  $: renderKey = `${dropInfo?.target}-${dropInfo?.side}`
 
-  const getDimensions = (bounds, mode) => {
-    if (!bounds || !mode) {
+  const getDimensions = info => {
+    const { bounds, side } = info ?? {}
+    if (!bounds || !side) {
       return null
     }
     const { left, top, width, height } = bounds
-    return {
-      top: mode === "above" ? top - 4 : top + height,
-      left: left - 2,
-      width: width + 4,
+    if (side === Sides.Top || side === Sides.Bottom) {
+      return {
+        top: side === Sides.Top ? top - 4 : top + height,
+        left: left - 2,
+        width: width + 4,
+        height: 0,
+      }
+    } else {
+      return {
+        top: top - 2,
+        left: side === Sides.Left ? left - 4 : left + width,
+        width: 0,
+        height: height + 4,
+      }
     }
   }
 </script>
 
-{#key `${dropInfo?.target}-${dropInfo?.mode}`}
+{#key renderKey}
   {#if dimensions && dropInfo?.mode !== "inside"}
     <Indicator
-      left={dimensions.left}
-      top={dimensions.top}
+      left={Math.round(dimensions.left)}
+      top={Math.round(dimensions.top)}
       width={dimensions.width}
-      height={0}
+      height={dimensions.height}
       {text}
       {zIndex}
       {color}
       {transition}
+      alignRight={dropInfo?.side === Sides.Right}
       line
     />
   {/if}
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index e4082f6f7c..212cd1671d 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -10,6 +10,7 @@
   export let zIndex
   export let transition = false
   export let line = false
+  export let alignRight = false
 
   $: flipped = top < 20
 </script>
@@ -26,7 +27,7 @@
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped class:line>
+    <div class="text" class:flipped class:line class:right={alignRight}>
       {text}
     </div>
   {/if}
@@ -34,6 +35,7 @@
 
 <style>
   .indicator {
+    right: 0;
     position: absolute;
     z-index: var(--zIndex);
     border: 2px solid var(--color);
@@ -78,4 +80,8 @@
     transform: translateY(-50%) !important;
     border-radius: 4px !important;
   }
+  .text.right {
+    right: -2px !important;
+    left: auto !important;
+  }
 </style>

From 0297b3de3fa604bdbeef377fb50c4b1c9b1befdd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 21 Sep 2021 08:47:43 +0100
Subject: [PATCH 24/24] Simplify some DND style rules

---
 .../client/src/components/preview/Indicator.svelte   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 212cd1671d..5f3a4b70c7 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -70,18 +70,18 @@
     justify-content: flex-start;
     align-items: center;
   }
+  .text.line {
+    transform: translateY(-50%);
+    border-radius: 4px;
+  }
   .text.flipped {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     transform: translateY(0%);
     top: -2px;
   }
-  .text.line {
-    transform: translateY(-50%) !important;
-    border-radius: 4px !important;
-  }
   .text.right {
-    right: -2px !important;
-    left: auto !important;
+    right: -2px;
+    left: auto;
   }
 </style>