refactor(svelte): cleanup node options and props

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, type Connection, type HandleProps } from '@reactflow/system';
+  import { Position, type Connection } from '@reactflow/system';
   import { isMouseEvent } from '@reactflow/utils';
 
   import { handlePointerDown } from './handler';
   import { useStore } from '$lib/store';
+  import type { HandleComponentProps } from '$lib/types';
 
-  type $$Props = HandleProps;
+  type $$Props = HandleComponentProps;
 
   export let id: $$Props['id'] = undefined;
   export let type: $$Props['type'] = 'source';
   export let position: $$Props['position'] = Position.Top;
   export let isConnectable: $$Props['isConnectable'] = true;
+  export let style: $$Props['style'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext<string>('rf_nodeid');
@@ -78,13 +81,15 @@
     `svelte-flow__handle-${position}`,
     'nodrag',
     'nopan',
-    position
+    position,
+    className
   ])}
   class:source={!isTarget}
   class:target={isTarget}
   class:connectable={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
+  {style}
 >
   <slot />
 </div>