fix system library dependency

packages/svelte/src/lib/actions/portal/index.ts

@@ -1 +1 @@
-export { default as portal } from './portal.svelte';
+export { portal } from './portal.svelte';

packages/svelte/src/lib/actions/portal/portal.svelte.ts

@@ -14,12 +14,12 @@ function tryToMount(node: Element, domNode: Element | null, target: Portal | und
   }
 }
 
-export default function (node: Element, target: Portal | undefined) {
+export function portal(node: Element, target: Portal | undefined) {
-  const { domNode } = $derived(useStore());
+  const store = useStore();
 
   let previousTarget: Portal | undefined = target;
 
-  tryToMount(node, domNode, target);
+  tryToMount(node, store.domNode, target);
 
   return {
     async update(target: Portal) {
@@ -27,7 +27,7 @@ export default function (node: Element, target: Portal | undefined) {
         node.parentNode?.removeChild(node);
         previousTarget = target;
       }
-      tryToMount(node, domNode, target);
+      tryToMount(node, store.domNode, target);
     },
     destroy() {
       if (node.parentNode) {

packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte

@@ -11,7 +11,7 @@
   {#if !store.disableKeyboardA11y}
     You can then use the arrow keys to move the node around.
   {/if}
-  Press delete to remove it and escape to cancel.{' '}
+  Press delete to remove it and escape to cancel.
 </div>
 <div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
   Press enter or space to select an edge. You can then press delete to remove it or escape to

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

@@ -1,11 +1,11 @@
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
-  import { arrowKeyDiffs, getInternalNodesBounds, isNumeric, type Rect } from '@xyflow/system';
+  import { getInternalNodesBounds, isNumeric, type Rect } from '@xyflow/system';
 
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
 
   import type { NodeSelectionProps } from './types';
-  import { toPxString } from '$lib/utils';
+  import { arrowKeyDiffs, toPxString } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
 
   let {

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { setContext, onDestroy } from 'svelte';
   import {
-    arrowKeyDiffs,
     elementSelectionKeys,
     errorMessages,
     isInputDOMNode,
@@ -14,7 +13,7 @@
 
   import type { ConnectableContext, NodeWrapperProps } from './types';
   import type { Node, Edge, NodeEvents } from '$lib/types';
-  import { toPxString } from '$lib/utils';
+  import { arrowKeyDiffs, toPxString } from '$lib/utils';
   import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
 
   let {

packages/svelte/src/lib/utils/index.ts

@@ -1,4 +1,4 @@
-import { isNodeBase, isEdgeBase } from '@xyflow/system';
+import { isNodeBase, isEdgeBase, type XYPosition } from '@xyflow/system';
 
 import type { Edge, Node } from '$lib/types';
 
@@ -25,3 +25,10 @@ export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element
 export function toPxString(value: number | undefined): string | undefined {
   return value === undefined ? undefined : `${value}px`;
 }
+
+export const arrowKeyDiffs: Record<string, XYPosition> = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 }
+};