Two-way selection

src/lib/components/BlockContainer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
  import { Block, BlockTitle } from "@gradio/atoms";
  import uiState from "$lib/stores/uiState";
+ import selectionState from "$lib/stores/selectionState";
  import WidgetContainer from "./WidgetContainer.svelte"
 
  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -49,9 +50,10 @@
 </script>
 
 {#if container && children}
+    {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(container.id)}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
          class:hide-block={container.attrs.containerVariant === "hidden"}
-         class:selected={$uiState.uiUnlocked && $layoutState.currentSelection.includes(container.id)}
+         class:selected
          class:root-container={zIndex === 0}
          class:is-executing={container.isNodeExecuting}
          class:mobile={isMobile}
@@ -154,6 +156,10 @@
  .container {
      display: flex;
 
+     &.selected {
+         background: var(--comfy-container-selected-background-fill) !important;
+     }
+
      > :global(*) {
          border-radius: 0;
      }