refactor(packages): change package structure

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

@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { XYDrag } from '@reactflow/utils';
+import { XYDrag } from '@xyflow/system';
 
 import type { SvelteFlowStore } from '$lib/store/types';
 

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

@@ -6,8 +6,8 @@ import type {
   PanZoomInstance,
   Transform,
   Viewport
-} from '@reactflow/system';
-import { XYPanZoom } from '@reactflow/utils';
+} from '@xyflow/system';
+import { XYPanZoom } from '@xyflow/system';
 
 type ZoomParams = {
   transform: Writable<Transform>;
@@ -33,6 +33,7 @@ type ZoomParams = {
   noPanClassName: string;
   noWheelClassName: string;
   userSelectionActive: boolean;
+  lib: string;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {

packages/svelte/src/lib/components/Attribution/types.ts

@@ -1,4 +1,4 @@
-import type { PanelPosition, ProOptions } from '@reactflow/system';
+import type { PanelPosition, ProOptions } from '@xyflow/system';
 
 export type AttributionProps = {
   proOptions?: ProOptions;

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, type SvelteComponentTyped } from 'svelte';
-  import { Position } from '@reactflow/system';
-  import { getMarkerId } from '@reactflow/utils';
+  import { Position } from '@xyflow/system';
+  import { getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, type Connection } from '@reactflow/system';
-  import { XYHandle, isMouseEvent } from '@reactflow/utils';
+  import { Position, type Connection } from '@xyflow/system';
+  import { XYHandle, isMouseEvent } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
@@ -17,7 +17,6 @@
   export let isConnectableStart: $$Props['isConnectableStart'] = true;
   export let isConnectableEnd: $$Props['isConnectableEnd'] = true;
 
-
   let className: $$Props['class'] = undefined;
   export { className as class };
 
@@ -64,7 +63,6 @@
         domNode: $domNode,
         nodes: $nodes,
         connectionMode: $connectionMode,
-        transform: $transform,
         lib: $lib,
         autoPanOnConnect: true,
         isValidConnection: $isValidConnection,
@@ -72,6 +70,7 @@
         cancelConnection,
         panBy,
         onConnect: onConnectExtended,
+        getTransform: () => $transform,
       });
     }
   }
@@ -92,8 +91,8 @@
   ])}
   class:source={!isTarget}
   class:target={isTarget}
-  class:connectableStart={isConnectableStart}
-  class:isConnectableEnd={isConnectableEnd}
+  class:connectablestart={isConnectableStart}
+  class:connectableend={isConnectableEnd}
   class:connectable={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getRectOfNodes } from '@reactflow/utils';
+  import { getRectOfNodes } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';

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

@@ -2,7 +2,7 @@
   
   import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
-  import { errorMessages, type NodeProps } from '@reactflow/system';
+  import { errorMessages, type NodeProps } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';

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

@@ -1,4 +1,4 @@
-import type { XYPosition } from '@reactflow/system';
+import type { XYPosition } from '@xyflow/system';
 import type { Node } from '$lib/types';
 
 export type NodeWrapperProps = Pick<

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBezierPath } from '@reactflow/edge-utils';
+  import { getBezierPath } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getSmoothStepPath } from '@reactflow/edge-utils';
+  import { getSmoothStepPath } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getSmoothStepPath } from '@reactflow/edge-utils';
+  import { getSmoothStepPath } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getStraightPath } from '@reactflow/edge-utils';
+  import { getStraightPath } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@reactflow/system';
+  import { Position, type NodeProps } from '@xyflow/system';
 
   import { Handle } from '$lib/components/Handle';
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@reactflow/system';
+  import { Position, type NodeProps } from '@xyflow/system';
 
   import { Handle } from '$lib/components/Handle';
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position, type NodeProps } from '@reactflow/system';
+  import { Position, type NodeProps } from '@xyflow/system';
 
   import { Handle } from '$lib/components/Handle';
 

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type MarkerProps, MarkerType } from '@reactflow/system';
+  import { type MarkerProps, MarkerType } from '@xyflow/system';
 
   type $$Props = MarkerProps;
 

packages/svelte/src/lib/container/EdgeRenderer/utils.ts

@@ -1,11 +1,11 @@
-import { getHandlePosition } from '@reactflow/edge-utils';
+import { getHandlePosition } from '@xyflow/system';
 import {
   type NodeHandleBounds,
   type Rect,
   type HandleElement,
   Position,
   internalsSymbol
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import type { Node } from '$lib/types';
 

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { internalsSymbol } from '@reactflow/system';
-  import { getPositionWithOrigin } from '@reactflow/utils';
+  import { internalsSymbol } from '@xyflow/system';
+  import { getPositionWithOrigin } from '@xyflow/system';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -30,8 +30,8 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { SelectionMode } from '@reactflow/system';
-  import { getEventPosition, getNodesInside } from '@reactflow/utils';
+  import { SelectionMode } from '@xyflow/system';
+  import { getEventPosition, getNodesInside } from '@xyflow/system';
   
   import { useStore } from '$lib/store';
   import { getConnectedEdges } from '$lib/utils';

packages/svelte/src/lib/container/Panel/types.ts

@@ -1,4 +1,4 @@
-import type { PanelPosition } from '@reactflow/system';
+import type { PanelPosition } from '@xyflow/system';
 import type { HTMLAttributes } from 'svelte/elements';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode, type CoordinateExtent, type Viewport } from '@reactflow/system';
+  import { PanOnScrollMode, type CoordinateExtent, type Viewport } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -13,7 +13,7 @@ import type {
   CoordinateExtent,
   PanOnScrollMode,
   IsValidConnection
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
 

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts"> 
-  import { PanOnScrollMode } from '@reactflow/system';
+  import { PanOnScrollMode } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
@@ -26,7 +26,8 @@
     minZoom,
     maxZoom,
     dragging,
-    translateExtent
+    translateExtent,
+    lib
   } = useStore();
   
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
@@ -54,7 +55,8 @@
   noPanClassName: 'nopan',
   noWheelClassName: 'nowheel',
   userSelectionActive: $selectionKeyPressed,
-  translateExtent: $translateExtent
+  translateExtent: $translateExtent,
+  lib: $lib
 }}>
   <slot />
 </div>

packages/svelte/src/lib/container/Zoom/types.ts

@@ -1,4 +1,4 @@
-import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@reactflow/system';
+import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
 
 export type ZoomProps = {
   initialViewport: Viewport;

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -6,8 +6,8 @@ import type {
   ViewportHelperFunctionOptions,
   XYPosition,
   ZoomInOut
-} from '@reactflow/system';
-import { pointToRendererPoint } from '@reactflow/utils';
+} from '@xyflow/system';
+import { pointToRendererPoint } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 import type { FitViewOptions } from '$lib/types';

packages/svelte/src/lib/index.ts

@@ -17,8 +17,8 @@ export * from '$lib/utils';
 
 export * from '$lib/hooks/useSvelteFlow';
 
-export * from '@reactflow/utils';
-export * from '@reactflow/system';
-export * from '@reactflow/edge-utils';
+export * from '@xyflow/system';
+export * from '@xyflow/system';
+export * from '@xyflow/system';
 
 export default SvelteFlow;

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -1,4 +1,4 @@
-import type { PanelPosition } from '@reactflow/system';
+import type { PanelPosition } from '@xyflow/system';
 
 export type ControlsProps = {
   position?: PanelPosition;

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
   import cc from 'classcat';
-  import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';
+  import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
@@ -35,7 +35,7 @@
 
   const defaultWidth = 200;
   const defaultHeight = 150;
-  const { nodes, transform, width: containerWidth, height: containerHeight, id } = useStore();
+  const { nodes, transform, width: containerWidth, height: containerHeight, flowId } = useStore();
 
   
   const nodeColorFunc = getAttrFunction(nodeColor);
@@ -43,7 +43,7 @@
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
   const shapeRendering =
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-  const labelledBy = `svelte-flow__minimap-desc-${$id}`;
+  const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
 
   $: viewBB = {
     x: -$transform[0] / $transform[2],

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -1,4 +1,4 @@
-import type { PanelPosition } from '@reactflow/system';
+import type { PanelPosition } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
 

packages/svelte/src/lib/store/connection-path.ts

@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
-import { getBezierPath, getSmoothStepPath, getStraightPath } from '@reactflow/edge-utils';
-import { ConnectionLineType, ConnectionMode, Position, internalsSymbol } from '@reactflow/system';
+import { getBezierPath, getSmoothStepPath, getStraightPath } from '@xyflow/system';
+import { ConnectionLineType, ConnectionMode, Position, internalsSymbol } from '@xyflow/system';
 
 import type { SvelteFlowStoreState } from './types';
 

packages/svelte/src/lib/store/edges-layouted.ts

@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
-import { Position } from '@reactflow/system';
-import { getHandle } from '@reactflow/edge-utils';
+import { Position } from '@xyflow/system';
+import { getHandle } from '@xyflow/system';
 
 import { getEdgePositions, getNodeData } from '$lib/container/EdgeRenderer/utils';
 import type { EdgeLayouted } from '$lib/types';

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

@@ -9,7 +9,7 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection
-} from '@reactflow/system';
+} from '@xyflow/system';
 import {
   createMarkerIds,
   fitView as fitViewUtil,
@@ -17,7 +17,7 @@ import {
   getElementsToRemove,
   getHandleBounds,
   infiniteExtent
-} from '@reactflow/utils';
+} from '@xyflow/system';
 
 import { addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData, FitViewOptions } from '$lib/types';

packages/svelte/src/lib/store/initial-store.ts

@@ -10,7 +10,7 @@ import {
   type PanZoomInstance,
   type CoordinateExtent,
   type IsValidConnection
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
@@ -20,7 +20,7 @@ import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
 import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Edge, Node } from '$lib/types';
-import { infiniteExtent } from '@reactflow/utils';
+import { infiniteExtent } from '@xyflow/system';
 
 export const initConnectionData = {
   connectionStartHandle: null,

packages/svelte/src/lib/store/types.ts

@@ -6,7 +6,7 @@ import type {
   UpdateNodePositions,
   CoordinateExtent,
   UpdateConnection
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import type { initialStoreState } from './initial-store';
 import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';

packages/svelte/src/lib/types/edges.ts

@@ -6,7 +6,7 @@ import type {
   DefaultEdgeOptionsBase,
   Position,
   SmoothStepPathOptions
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import type { Node } from '$lib/types';
 

packages/svelte/src/lib/types/general.ts

@@ -5,7 +5,7 @@ import type {
   Position,
   XYPosition,
   ConnectingHandle
-} from '@reactflow/system';
+} from '@xyflow/system';
 
 import type { Node } from './nodes';
 
@@ -26,9 +26,9 @@ export type HandleComponentProps = {
   id?: string;
   class?: string;
   style?: string;
-  isConnectable?: boolean;,
-  isConnectableStart?: boolean;,
-  isConnectableEnd?: boolean;,
+  isConnectable?: boolean;
+  isConnectableStart?: boolean;
+  isConnectableEnd?: boolean;
 };
 
 export type FitViewOptions = FitViewOptionsBase<Node>;

packages/svelte/src/lib/types/nodes.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { SvelteComponentTyped } from 'svelte';
-import type { BaseNode, NodeProps } from '@reactflow/system';
+import type { BaseNode, NodeProps } from '@xyflow/system';
 
 // @todo: currently the helper function only like Node from '@reactflow/core'
 // we need a base node type or helpes that accept Node like types

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

@@ -9,8 +9,8 @@ import {
   getConnectedEdgesBase,
   isNumeric,
   getNodePositionWithOrigin
-} from '@reactflow/utils';
-import { internalsSymbol, type XYZPosition } from '@reactflow/system';
+} from '@xyflow/system';
+import { internalsSymbol, type XYZPosition } from '@xyflow/system';
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
 export const isNode = isNodeBase<Node, Edge>;

packages/svelte/src/routes/customnode/CustomNode/Custom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position } from '@reactflow/system';
+  import { Position } from '@xyflow/system';
   import { Handle } from '../../../lib/index';
 
   export let data: { color: string, onChange: () => void } = { color: '#111', onChange: () => {} };

packages/svelte/src/routes/overview/CustomEdge/Custom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getBezierPath } from '@reactflow/edge-utils';
+  import { getBezierPath } from '@xyflow/system';
 
   import { BaseEdge, EdgeLabelRenderer, useSvelteFlow, type EdgeProps } from '../../../lib/index';
 

packages/svelte/src/routes/overview/CustomNode/Custom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position } from '@reactflow/system';
+  import { Position } from '@xyflow/system';
   import { Handle } from '../../../lib/index';
 
   export let data: { label: string } = { label: 'Node' };

packages/svelte/src/routes/validation/+page.svelte

@@ -8,7 +8,7 @@
     createEdges,
     type IsValidConnection
   } from '../../lib/index';
-  import { Position } from '@reactflow/system';
+  import { Position } from '@xyflow/system';
 
   const nodes = createNodes([
     { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },