Allow view deselect when clicking on empty area. Screen is no longer highlighted

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -37,6 +37,7 @@
     "svg",
     "bmp",
     "jfif",
+    "webp",
   ]
 
   const fieldId = id || uuid()

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

@@ -130,7 +130,7 @@
       // Catch any app errors
       loading = false
       error = event.error || "An unknown error occurred"
-    } else if (type === "select-component" && data.id) {
+    } else if (type === "select-component" && "id" in data) {
       componentStore.select(data.id)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)

packages/client/src/components/app/Layout.svelte

@@ -284,10 +284,6 @@
     <div
       class="main-wrapper"
       on:click={() => {
-        // inBuilder
-        // check selected
-        // selectedComponentId : "ce300d7f6c08b432b8db18d11690932f5"
-        console.log("Screen check ", $builderStore)
         if ($builderStore.inBuilder) {
           builderStore.actions.selectComponent(null)
         }

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

@@ -5,10 +5,14 @@
   $: color = $builderStore.editMode
     ? "var(--spectrum-global-color-static-green-500)"
     : "var(--spectrum-global-color-static-blue-600)"
+
+  $: isScreen = $builderStore.selectedComponentId?.startsWith(
+    $builderStore.screen._id
+  )
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.selectedComponentId}
+  componentId={!isScreen ? $builderStore.selectedComponentId : null}
   {color}
   zIndex="910"
   transition