feat(svelte): selection box

packages/svelte/src/lib/components/KeyHandler/index.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { shortcut } from '@svelte-put/shortcut';
+
+  import { useStore } from '$lib/store';
+
+  const { selectionKeyPressedStore } = useStore();
+
+  function onSelectionKeyDown() {
+    selectionKeyPressedStore.set(true);
+  }
+
+  function onSelectionKeyUp() {
+    selectionKeyPressedStore.set(false);
+  }
+</script>
+
+<svelte:window
+  use:shortcut={{ 
+    trigger: [{ key: 'Shift', callback: onSelectionKeyDown }],
+    type: 'keydown'
+  }}
+  use:shortcut={{ 
+    trigger: [{ key: 'Shift', callback: onSelectionKeyUp }],
+    type: 'keyup'
+  }}
+/>

packages/svelte/src/lib/components/NodeSelection/index.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getRectOfNodes } from '@reactflow/utils';
+
+  import { useStore } from '$lib/store';
+  import Selection from '$lib/components/Selection/index.svelte';
+
+  const { selectionRectModeStore, nodesStore, nodeOriginStore } = useStore();
+
+  $: selectedNodes = $nodesStore.filter(n => n.selected);
+  $: rect = getRectOfNodes(selectedNodes, $nodeOriginStore);
+
+  // @todo: use zoom action for selection
+</script> 
+
+{#if selectedNodes}
+  <Selection
+    isVisible={$selectionRectModeStore === 'nodes'}
+    width={rect.width}
+    height={rect.height}
+    x={rect.x}
+    y={rect.y}
+  />
+{/if}

packages/svelte/src/lib/components/Selection/index.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let x: number | null = 0;
+  export let y: number | null = 0;
+  export let width: number | null = 0;
+  export let height: number | null = 0;
+  export let isVisible: boolean = true;
+</script> 
+
+{#if isVisible}
+  <div
+    class="react-flow__selection"
+    style={`width: ${width}px; height: ${height}px;transform: translate(${x}px, ${y}px)`}
+  />
+{/if}
+
+<style>
+  .react-flow__selection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 89, 220, 0.08);
+    border: 1px dotted rgba(0, 89, 220, 0.8);
+    z-index: 6;
+  }
+
+  .react-flow__selection:focus,
+  .react-flow__selection:focus-visible {
+    outline: none;
+  }
+</style>

packages/svelte/src/lib/components/UserSelection/index.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { useStore } from '$lib/store';
+  import Selection from '$lib/components/Selection/index.svelte';
+
+  const { selectionRectStore, selectionRectModeStore } = useStore();
+</script> 
+
+<Selection
+  isVisible={!!($selectionRectStore && $selectionRectModeStore === 'user')}
+  width={$selectionRectStore?.width}
+  height={$selectionRectStore?.height}
+  x={$selectionRectStore?.x}
+  y={$selectionRectStore?.y}
+/>

packages/svelte/src/lib/components/nodes/BaseNode.svelte

@@ -2,7 +2,7 @@
 	import { onMount, setContext } from 'svelte';
   import type { XYPosition } from '@reactflow/system';
 
-  import drag  from '$lib/hooks/drag'
+  import drag  from '$lib/actions/drag'
 	import { useStore } from '$lib/store';
 	import DefaultNode from './DefaultNode.svelte';
 
@@ -29,7 +29,6 @@
       resizeObserver?.unobserve(nodeRef);
     }
   });
-
 </script>
 
 <div
@@ -58,6 +57,8 @@
     background-color: white;
     position: absolute;
     cursor: grab; 
+    pointer-events: all;
+    user-select: none;
   }
 
   .dragging {