Improve column/row detection by appending an ephemeral child component and tune timings

packages/client/src/components/Component.svelte

@@ -489,21 +489,15 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 250ms ease, border 250ms ease;
+    transition: padding 260ms ease, border 260ms ease;
   }
   .component.explode :global(> *) {
-    padding: 16px !important;
-    gap: 16px !important;
-    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+    padding: 12px !important;
+    gap: 12px !important;
+    border: 2px dotted var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
   }
-  .interactive :global(*:hover) {
-    cursor: pointer;
-  }
-  .draggable :global(*:hover) {
-    cursor: grab;
-  }
-  .editing :global(*:hover) {
-    cursor: auto;
+  .interactive :global(*) {
+    cursor: default;
   }
 </style>

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

@@ -102,14 +102,21 @@
       return
     }
 
+    // Append an ephemeral div to allow us to determine layout if only one
+    // child exists
+    let ephemeralDiv
+    if (node.children.length === 1) {
+      ephemeralDiv = document.createElement("div")
+      ephemeralDiv.classList.add("placeholder")
+      node.appendChild(ephemeralDiv)
+    }
+
     // We're now hovering over something which accepts children and is not
     // empty, so we need to work out where to inside the placeholder
     // Calculate the coordinates of various locations on each child.
-    // We include the placeholder component in this as it guarantees we have
-    // at least 2 child components, and therefore guarantee there is no
-    // ambiguity in the layout.
     const childCoords = [...(node.children || [])].map(node => {
-      const bounds = node.children[0].getBoundingClientRect()
+      const child = node.children?.[0] || node
+      const bounds = child.getBoundingClientRect()
       return {
         placeholder: node.classList.contains("placeholder"),
         centerX: bounds.left + bounds.width / 2,
@@ -121,6 +128,12 @@
       }
     })
 
+    // Now that we've calculated the position of the children, we no longer need
+    // the ephemeral div
+    if (ephemeralDiv) {
+      node.removeChild(ephemeralDiv)
+    }
+
     // Calculate the variance between each set of positions on the children
     const variances = Object.keys(childCoords[0])
       .filter(x => x !== "placeholder")

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

@@ -19,8 +19,8 @@
 
 <div
   in:fade={{
-    delay: transition ? 130 : 0,
-    duration: transition ? 130 : 0,
+    delay: transition ? 100 : 0,
+    duration: transition ? 100 : 0,
   }}
   class="indicator"
   class:flipped