Fix flashing of missing component settings panel when deleting components

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -2,7 +2,11 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import { screenStore, selectedScreen } from "stores/builder"
+  import {
+    screenStore,
+    selectedScreen,
+    selectedComponent,
+  } from "stores/builder"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 

packages/builder/src/stores/builder/components.js

@@ -574,15 +574,26 @@ export class ComponentStore extends BudiStore {
       return
     }
 
-    // Determine the next component to select after deletion
+    // Determine the next component to select, and select it before deletion
+    // to avoid an intermediate state of no component selection
     const state = get(this.store)
-    let nextSelectedComponentId
+    let nextId
     if (state.selectedComponentId === component._id) {
-      nextSelectedComponentId = this.getNext()
+      nextId = this.getNext()
-      if (!nextSelectedComponentId) {
+      if (!nextId) {
-        nextSelectedComponentId = this.getPrevious()
+        nextId = this.getPrevious()
       }
     }
+    if (nextId) {
+      // If this is the nav, select the screen instead
+      if (nextId.endsWith("-navigation")) {
+        nextId = nextId.replace("-navigation", "-screen")
+      }
+      this.update(state => {
+        state.selectedComponentId = nextId
+        return state
+      })
+    }
 
     // Patch screen
     await screenStore.patch(screen => {
@@ -601,14 +612,6 @@ export class ComponentStore extends BudiStore {
         child => child._id !== component._id
       )
     })
-
-    // Update selected component if required
-    if (nextSelectedComponentId) {
-      this.update(state => {
-        state.selectedComponentId = nextSelectedComponentId
-        return state
-      })
-    }
   }
 
   copy(component, cut = false, selectParent = true) {

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

@@ -11,7 +11,6 @@
   export let componentId
 
   $: currentValue = getGridVarValue(gridStyles, style)
-  $: console.log(style, currentValue, value)
   $: active = currentValue === value
 </script>