Ensure transitions work properly when showing and hiding DND candidate positions

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"

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}