clean up BaseEdge, fix store functions

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import cc from 'classcat';
+  import type { BaseEdgeProps } from '../../types';
+  import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
+
+  let {
+    id,
+    path,
+    label,
+    labelX,
+    labelY,
+    labelStyle,
+    markerStart,
+    markerEnd,
+    style,
+    interactionWidth = 20,
+    class: className
+  }: BaseEdgeProps = $props();
+</script>
+
+<path
+  {id}
+  d={path}
+  class={cc(['svelte-flow__edge-path', className])}
+  marker-start={markerStart}
+  marker-end={markerEnd}
+  fill="none"
+  {style}
+/>
+
+{#if interactionWidth > 0}
+  <path
+    d={path}
+    stroke-opacity={0}
+    stroke-width={interactionWidth}
+    fill="none"
+    class="svelte-flow__edge-interaction"
+  />
+{/if}
+
+{#if label}
+  <EdgeLabel x={labelX} y={labelY} style={labelStyle}>
+    {label}
+  </EdgeLabel>
+{/if}

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -1,25 +1,24 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { BezierEdgeProps } from '$lib/types';
 
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
   let {
     id,
+    interactionWidth,
     label,
     labelStyle,
-    style,
-    markerStart,
     markerEnd,
+    markerStart,
     pathOptions,
-    interactionWidth,
+    sourcePosition,
     sourceX,
     sourceY,
-    sourcePosition,
+    style,
+    targetPosition,
     targetX,
-    targetY,
-    targetPosition
+    targetY
   }: BezierEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
+
   let {
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
+    interactionWidth,
     label,
     labelStyle,
-    markerStart,
     markerEnd,
-    interactionWidth,
-    style
+    markerStart,
+    sourcePosition,
+    sourceX,
+    sourceY,
+    style,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,
+    interactionWidth,
     label,
     labelStyle,
     style,
-    markerStart,
     markerEnd,
+    markerStart,
     pathOptions,
-    interactionWidth,
+    sourcePosition,
     sourceX,
     sourceY,
-    sourcePosition,
+    targetPosition,
     targetX,
-    targetY,
-    targetPosition
+    targetY
   }: SmoothStepEdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
+    interactionWidth,
     label,
     labelStyle,
-    markerStart,
+    style,
     markerEnd,
-    interactionWidth,
-    style
+    markerStart,
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
   }: EdgeProps = $props();
 
   let [path, labelX, labelY] = $derived(

packages/svelte/src/lib/components/edges/StepEdge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { StepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,

packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     sourceX,

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { StraightEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     id,

packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
+  import BaseEdge from './BaseEdge.svelte';
   import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
 
   let {
     sourceX,

packages/svelte/src/lib/components/edges/index.ts

@@ -5,7 +5,7 @@
 // @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
 // both are quite similar, it's just about 1-2 props that are different
 export { default as BezierEdge } from './BezierEdge.svelte';
-export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
+export { default as BezierEdgeInternal } from './BezierEdge.svelte';
 
 export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
 export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
@@ -15,3 +15,5 @@ export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
 
 export { default as StepEdge } from './StepEdge.svelte';
 export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';
+
+export { default as BaseEdge } from './BaseEdge.svelte';