From 22845c210da8a48dc489fcee31bd482479639e5f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 11 May 2022 20:54:55 +0200
Subject: [PATCH] chore: lint files

---
 README.md                                     |  7 ++--
 docs/components/home/Acknowledgement.vue      |  1 +
 docs/components/home/Banner.vue               |  1 +
 docs/components/home/Features.vue             |  6 ++-
 docs/components/home/Home.vue                 |  4 +-
 docs/components/home/edges/Custom.vue         | 12 +++---
 docs/components/home/flows/Additional.vue     |  8 ++--
 docs/components/home/flows/Intro.vue          |  4 +-
 docs/components/home/flows/Nested.vue         |  8 ++--
 docs/components/home/flows/RGB.vue            | 13 ++++---
 docs/components/home/nodes/Box.vue            |  1 +
 docs/components/home/nodes/Input.vue          |  4 +-
 docs/components/home/nodes/Output.vue         | 14 ++++---
 docs/src/examples/validation.md               |  4 +-
 docs/src/guide/composables.md                 | 11 +++---
 docs/tsconfig.json                            | 22 ++---------
 .../integration/1-store/setElements.spec.ts   |  3 +-
 .../integration/1-store/setState.spec.ts      |  3 +-
 .../integration/2-flow/container.spec.ts      |  3 +-
 e2e/tsconfig.json                             | 13 ++-----
 examples/App.vue                              |  1 +
 examples/Header.vue                           |  1 +
 examples/router.ts                            |  3 +-
 examples/src/Basic/Basic.vue                  |  4 +-
 examples/src/Basic/BasicOptionsAPI.vue        |  4 +-
 examples/src/Basic/ResizableNode.vue          |  6 ++-
 .../CustomConnectionLine/ConnectionLine.vue   |  1 +
 .../CustomConnectionLine.vue                  |  4 +-
 examples/src/CustomNode/ColorSelectorNode.vue |  7 +++-
 examples/src/CustomNode/CustomNode.vue        | 15 ++------
 examples/src/DragNDrop/DnD.vue                |  5 ++-
 examples/src/DragNDrop/Sidebar.vue            |  1 +
 examples/src/EdgeTypes/EdgeTypesExample.vue   |  4 +-
 examples/src/EdgeTypes/utils.ts               |  3 +-
 examples/src/Edges/CustomEdge.vue             |  6 ++-
 examples/src/Edges/CustomEdge2.vue            |  5 ++-
 examples/src/Edges/CustomLabel.vue            |  1 +
 examples/src/Edges/EdgesExample.vue           |  4 +-
 examples/src/Empty/EmptyExample.vue           |  4 +-
 .../FloatingEdges/FloatingConnectionLine.vue  |  4 +-
 examples/src/FloatingEdges/FloatingEdge.vue   |  6 ++-
 examples/src/FloatingEdges/FloatingEdges.vue  |  4 +-
 .../src/FloatingEdges/floating-edge-utils.ts  |  3 +-
 examples/src/Hidden/HiddenExample.vue         |  3 +-
 .../src/Interaction/InteractionExample.vue    |  3 +-
 examples/src/Layouting/LayoutingExample.vue   |  5 ++-
 examples/src/Layouting/initial-elements.ts    |  2 +-
 examples/src/MultiFlows/Flow.vue              |  4 +-
 examples/src/MultiFlows/MultiFlowsExample.vue |  2 +
 examples/src/Nesting/GroupNode.vue            |  2 +
 examples/src/Nesting/Nesting.vue              |  3 +-
 .../NodeTypeChange/NodeTypeChangeExample.vue  |  4 +-
 examples/src/Overview/Overview.vue            | 19 ++--------
 examples/src/Provider/ProviderExample.vue     |  5 ++-
 examples/src/Provider/Sidebar.vue             |  1 +
 examples/src/RGBFlow/RGBFlow.vue              |  7 +++-
 examples/src/RGBFlow/RGBNode.vue              |  7 +++-
 examples/src/RGBFlow/RGBOutputNode.vue        |  5 ++-
 examples/src/SaveRestore/Controls.vue         |  4 +-
 .../src/SaveRestore/SaveRestoreExample.vue    |  5 ++-
 examples/src/Stress/StressExample.vue         |  1 +
 examples/src/Stress/utils.ts                  |  2 +-
 examples/src/Switch/SwitchExample.vue         |  4 +-
 examples/src/Unidirectional/CustomNode.vue    |  3 +-
 .../Unidirectional/UnidirectionalExample.vue  |  4 +-
 .../UpdatableEdge/UpdatableEdgeExample.vue    | 15 ++------
 examples/src/UpdateNode/UpdateNodeExample.vue |  5 ++-
 examples/src/Validation/CustomInput.vue       |  5 ++-
 examples/src/Validation/CustomNode.vue        |  5 ++-
 examples/src/Validation/ValidationExample.vue |  5 ++-
 examples/tsconfig.json                        | 18 ++-------
 package/package.json                          | 12 +++---
 .../Background/Background.vue                 |  2 +
 .../Controls/ControlButton.vue                |  1 +
 .../Controls/Controls.vue                     |  2 +
 .../additional-components/MiniMap/MiniMap.vue |  4 +-
 .../MiniMap/MiniMapNode.ts                    |  4 +-
 .../ConnectionLine/ConnectionLine.vue         |  5 ++-
 package/src/components/Edges/BaseEdge.ts      |  2 +-
 package/src/components/Edges/BezierEdge.ts    |  4 +-
 package/src/components/Edges/EdgeAnchor.ts    |  2 +-
 package/src/components/Edges/EdgeText.vue     |  8 ++--
 package/src/components/Edges/EdgeWrapper.vue  |  7 +++-
 .../src/components/Edges/SimpleBezierEdge.ts  |  2 +-
 .../src/components/Edges/SmoothStepEdge.ts    |  5 ++-
 package/src/components/Edges/StepEdge.ts      |  4 +-
 package/src/components/Edges/StraightEdge.ts  |  4 +-
 package/src/components/Handle/Handle.vue      |  5 ++-
 package/src/components/Nodes/DefaultNode.ts   |  5 ++-
 package/src/components/Nodes/InputNode.ts     |  5 ++-
 package/src/components/Nodes/NodeWrapper.vue  |  6 ++-
 package/src/components/Nodes/OutputNode.ts    |  5 ++-
 .../NodesSelection/NodesSelection.vue         |  2 +
 .../UserSelection/SelectionRect.vue           |  2 +
 .../UserSelection/UserSelection.vue           |  4 +-
 package/src/components/UserSelection/utils.ts |  2 +-
 package/src/composables/useHandle.ts          |  5 ++-
 package/src/composables/useKeyPress.ts        |  4 +-
 package/src/composables/useVueFlow.ts         | 10 ++---
 package/src/composables/useZoomPanHelper.ts   |  4 +-
 .../container/EdgeRenderer/EdgeRenderer.vue   |  4 +-
 package/src/container/EdgeRenderer/Marker.vue |  2 +
 .../EdgeRenderer/MarkerDefinitions.vue        |  5 ++-
 .../container/NodeRenderer/NodeRenderer.vue   |  4 +-
 .../container/SelectionPane/SelectionPane.vue |  6 ++-
 package/src/container/Viewport/Transform.vue  |  6 ++-
 package/src/container/Viewport/Viewport.vue   |  8 +++-
 package/src/container/VueFlow/VueFlow.vue     |  2 +
 package/src/container/VueFlow/watch.ts        |  6 +--
 package/src/context/index.ts                  |  4 +-
 package/src/env.d.ts                          |  2 +-
 package/src/store/actions.ts                  |  4 +-
 package/src/store/getters.ts                  |  2 +-
 package/src/store/hooks.ts                    |  2 +-
 package/src/store/index.ts                    |  5 ++-
 package/src/store/state.ts                    | 15 ++------
 package/src/types/changes.ts                  | 22 +++++------
 package/src/types/components.ts               | 10 ++---
 package/src/types/connection.ts               | 10 ++---
 package/src/types/edge.ts                     |  8 ++--
 package/src/types/flow.ts                     | 18 ++++-----
 package/src/types/handle.ts                   |  8 ++--
 package/src/types/hooks.ts                    | 18 ++++-----
 package/src/types/node.ts                     | 10 ++---
 package/src/types/store.ts                    | 38 +++++++++++++------
 package/src/types/zoom.ts                     | 14 ++++---
 package/src/utils/changes.ts                  | 26 ++++++-------
 package/src/utils/edge.ts                     |  3 +-
 package/src/utils/graph.ts                    |  2 +-
 package/src/utils/node.ts                     |  2 +-
 package/tsconfig.build.json                   | 23 +++--------
 package/tsconfig.docs.json                    | 17 ++-------
 package/tsconfig.json                         | 23 +++--------
 133 files changed, 461 insertions(+), 381 deletions(-)

diff --git a/README.md b/README.md
index 8aafc983..a0d320d5 100644
--- a/README.md
+++ b/README.md
@@ -57,9 +57,6 @@ A simple setup could look like this:
 
 ```vue
 <!-- Flowchart.vue -->
-<template>
-  <VueFlow v-model="elements"></VueFlow>
-</template>
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -81,6 +78,10 @@ const elements = ref([
   },
 ])
 </script>
+
+<template>
+  <VueFlow v-model="elements"></VueFlow>
+</template>
 ```
 
 ### __Make sure to import the necessary styles:__
diff --git a/docs/components/home/Acknowledgement.vue b/docs/components/home/Acknowledgement.vue
index 95951097..feeb0f9d 100644
--- a/docs/components/home/Acknowledgement.vue
+++ b/docs/components/home/Acknowledgement.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Heart from '~icons/mdi/heart'
 </script>
+
 <template>
   <div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index d851f78f..24aac7cb 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -6,6 +6,7 @@ import Download from '~icons/carbon/download'
 const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
 const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
 </script>
+
 <template>
   <div class="w-full bg-black text-white border-b-1 border-white">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index f3cb87ff..beb90f1f 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
-import { FlowInstance } from '@braks/vue-flow'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import type { FlowInstance } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -22,6 +22,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
   }, 5),
 )
 </script>
+
 <template>
   <div class="w-full dark:(bg-black text-white)">
     <div
@@ -42,6 +43,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
     </div>
   </div>
 </template>
+
 <style>
 .button {
   @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index a2bf8c50..302c8699 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
 
@@ -29,11 +29,13 @@ onMounted(() => {
   }
 })
 </script>
+
 <template>
   <div class="relative h-[90vh] md:h-[75vh]">
     <Intro />
   </div>
 </template>
+
 <style>
 button:focus {
   outline: none;
diff --git a/docs/components/home/edges/Custom.vue b/docs/components/home/edges/Custom.vue
index b590beee..cfd55976 100644
--- a/docs/components/home/edges/Custom.vue
+++ b/docs/components/home/edges/Custom.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
+import type { EdgeProps, MarkerType, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -33,11 +34,13 @@ const edgePath = computed(() =>
   }),
 )
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path
     :id="props.id"
@@ -47,12 +50,7 @@ export default {
     :marker-end="props.markerEnd"
   />
   <text>
-    <textPath
-      :href="`#${props.id}`"
-      :style="{ fontSize: '1.25rem', fill: 'white' }"
-      startOffset="50%"
-      text-anchor="middle"
-    >
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
       {{ props.data?.text }}
     </textPath>
   </text>
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index 97a83e57..cd1311e2 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+
+const emit = defineEmits(['pane'])
 
 const elements = ref<Elements>([
   {
@@ -77,8 +80,6 @@ const elements = ref<Elements>([
   { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
 ])
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady } = useVueFlow({
   modelValue: elements.value,
   zoomOnScroll: false,
@@ -87,6 +88,7 @@ const { onPaneReady } = useVueFlow({
 
 onPaneReady((i) => emit('pane', i))
 </script>
+
 <template>
   <div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
     <VueFlow>
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 61ba85ed..fc1a438a 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
+import { Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import BoxNode from '../nodes/Box.vue'
 import Heart from '~icons/mdi/heart'
@@ -170,6 +170,7 @@ const scrollTo = () => {
   }
 }
 </script>
+
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
     <template #node-box="props">
@@ -208,6 +209,7 @@ const scrollTo = () => {
     </template>
   </VueFlow>
 </template>
+
 <style>
 .intro {
   @apply cursor-pointer
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 90abdad4..59969d0a 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const emit = defineEmits(['pane'])
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
 const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
 
@@ -55,6 +55,7 @@ watch(
 
 onPaneReady((i) => emit('pane', i))
 </script>
+
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
@@ -76,6 +77,7 @@ onPaneReady((i) => emit('pane', i))
     </VueFlow>
   </div>
 </template>
+
 <style>
 .nested .vue-flow__handle {
   opacity: 0;
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 03442158..2d1c5add 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
+import type { MiniMapNodeFunc } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
 
+const emit = defineEmits(['pane'])
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-type Colors = {
+interface Colors {
   red: number
   green: number
   blue: number
 }
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
@@ -73,6 +74,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
   return ''
 }
 </script>
+
 <template>
   <div
     ref="el"
@@ -103,7 +105,8 @@ const nodeColor: MiniMapNodeFunc = (node) => {
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>
-        You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
+        You can expand on the existing features by using your own custom nodes and edges and implement any design and
+        functionality you want.
       </p>
       <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
     </div>
diff --git a/docs/components/home/nodes/Box.vue b/docs/components/home/nodes/Box.vue
index 51e48c7f..c0fd280c 100644
--- a/docs/components/home/nodes/Box.vue
+++ b/docs/components/home/nodes/Box.vue
@@ -3,6 +3,7 @@ import { Handle, Position } from '@braks/vue-flow'
 
 const emit = defineEmits(['next'])
 </script>
+
 <template>
   <div class="px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
     <slot />
diff --git a/docs/components/home/nodes/Input.vue b/docs/components/home/nodes/Input.vue
index 11a22531..683377d9 100644
--- a/docs/components/home/nodes/Input.vue
+++ b/docs/components/home/nodes/Input.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -27,6 +28,7 @@ switch (props.data?.color) {
 }
 const onChange = (e: any) => emit('change', { color, val: e.target.value })
 </script>
+
 <template>
   <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
diff --git a/docs/components/home/nodes/Output.vue b/docs/components/home/nodes/Output.vue
index dff8d864..50cdce16 100644
--- a/docs/components/home/nodes/Output.vue
+++ b/docs/components/home/nodes/Output.vue
@@ -1,15 +1,19 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from "@braks/vue-flow";
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
-  rgb: string;
+  rgb: string
 }
 
-const props = defineProps<RBGOutputNodeProps>();
+const props = defineProps<RBGOutputNodeProps>()
 </script>
+
 <template>
-  <div :style="{ backgroundColor: props.rgb }"
-       class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
+  <div
+    :style="{ backgroundColor: props.rgb }"
+    class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white"
+  >
     <div class="text-xl font-bold">Color Output</div>
     <div class="font-semibold">{{ props.rgb }}</div>
     <Handle type="target" :position="Position.Left" />
diff --git a/docs/src/examples/validation.md b/docs/src/examples/validation.md
index fb5fa8bd..1af7a9a9 100644
--- a/docs/src/examples/validation.md
+++ b/docs/src/examples/validation.md
@@ -22,10 +22,10 @@ const nodes = [
   {
     id: '1',
     label: 'Node 1',
-    position: { x: 0 , y: 0 },
+    position: { x: 0, y: 0 },
     isValidSourcePos: (connection) => {
       return connection.target === '2'
-    }
+    },
   },
 ]
 ```
diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index abecaedb..06f48ffa 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -61,16 +61,16 @@ This is how the default handle component is built:
 
 ```vue
 <script lang="ts" setup>
-import { useHandle, useVueFlow, Position, NodeId } from '@braks/vue-flow'
-import type { HandleProps } from '@braks/vue-flow'
+import { NodeId, useHandle, useVueFlow } from '@braks/vue-flow'
+import type { HandleProps, Position } from '@braks/vue-flow'
 
-const { id, hooks, connectionStartHandle } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
   connectable: true,
 })
 
+const { id, hooks, connectionStartHandle } = useVueFlow()
 const nodeId = inject(NodeId, '')
 
 const { onMouseDown, onClick } = useHandle()
@@ -80,21 +80,22 @@ const onMouseDownHandler = (event: MouseEvent) =>
   )
 const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
 </script>
+
 <script lang="ts">
 export default {
   name: 'Handle',
 }
 </script>
+
 <template>
   <div
     :data-handleid="props.id"
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
+    class="vue-flow__handle nodrag"
     :class="[
-      'vue-flow__handle',
       `vue-flow__handle-${props.position}`,
       `vue-flow__handle-${id}`,
-      'nodrag',
       {
         source: props.type !== 'target',
         target: props.type === 'target',
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index d20e9b98..4603ac5f 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,20 +15,9 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-      "@types/node",
-      "unplugin-icons/types/vue"
-    ]
+    "types": ["vite/client", "@types/node", "unplugin-icons/types/vue"]
   },
-  "include": [
-    "components",
-    "src",
-    "src/.vuepress/auto-imports.d.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "include": ["components", "src", "src/.vuepress/auto-imports.d.ts"],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/e2e/cypress/integration/1-store/setElements.spec.ts b/e2e/cypress/integration/1-store/setElements.spec.ts
index 25599946..f446d749 100644
--- a/e2e/cypress/integration/1-store/setElements.spec.ts
+++ b/e2e/cypress/integration/1-store/setElements.spec.ts
@@ -1,4 +1,5 @@
-import { useVueFlow, isEdge, isNode, Edge, Node, SetState, VueFlowStore } from '@braks/vue-flow'
+import type { Edge, Node, SetState, VueFlowStore } from '@braks/vue-flow'
+import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../../examples/src/Stress/utils'
 
 describe('test store action setElements', () => {
diff --git a/e2e/cypress/integration/1-store/setState.spec.ts b/e2e/cypress/integration/1-store/setState.spec.ts
index 62870a80..7a593623 100644
--- a/e2e/cypress/integration/1-store/setState.spec.ts
+++ b/e2e/cypress/integration/1-store/setState.spec.ts
@@ -1,5 +1,6 @@
 import { isRef } from 'vue'
-import { useVueFlow, State } from '@braks/vue-flow'
+import type { State } from '@braks/vue-flow'
+import { useVueFlow } from '@braks/vue-flow'
 
 describe('test store state', () => {
   let store = useVueFlow()
diff --git a/e2e/cypress/integration/2-flow/container.spec.ts b/e2e/cypress/integration/2-flow/container.spec.ts
index 709a9458..54356537 100644
--- a/e2e/cypress/integration/2-flow/container.spec.ts
+++ b/e2e/cypress/integration/2-flow/container.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from '@cypress/vue'
-import { VueFlow, isEdge, isNode, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow, isEdge, isNode } from '@braks/vue-flow'
 import '@braks/vue-flow/dist/style.css'
 import '@braks/vue-flow/dist/theme-default.css'
 
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
index 62a187ef..d6f9d4e4 100644
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,12 +15,8 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client"
-    ],
+    "types": ["vite/client"]
   },
   "include": ["cypress"],
-  "exclude": [
-    "node_modules",
-  ],
+  "exclude": ["node_modules"]
 }
diff --git a/examples/App.vue b/examples/App.vue
index 7452d696..cfbcb3bd 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Header from './Header.vue'
 </script>
+
 <template>
   <Header />
   <router-view />
diff --git a/examples/Header.vue b/examples/Header.vue
index cfcf1302..a3a4073e 100644
--- a/examples/Header.vue
+++ b/examples/Header.vue
@@ -17,6 +17,7 @@ const computedRoutes = computed(() => {
     }))
 })
 </script>
+
 <template>
   <header>
     <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
diff --git a/examples/router.ts b/examples/router.ts
index 2af92005..71101096 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -1,4 +1,5 @@
-import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
+import type { RouterOptions } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 export const routes: RouterOptions['routes'] = [
   {
diff --git a/examples/src/Basic/Basic.vue b/examples/src/Basic/Basic.vue
index af40525d..c176e60d 100644
--- a/examples/src/Basic/Basic.vue
+++ b/examples/src/Basic/Basic.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -35,6 +36,7 @@ const logToObject = () => console.log(instance.value?.toObject())
 const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
+
 <template>
   <VueFlow v-model="elements" class="vue-flow-basic-example">
     <Background />
diff --git a/examples/src/Basic/BasicOptionsAPI.vue b/examples/src/Basic/BasicOptionsAPI.vue
index 25bd51eb..4c51d5cf 100644
--- a/examples/src/Basic/BasicOptionsAPI.vue
+++ b/examples/src/Basic/BasicOptionsAPI.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
@@ -50,6 +51,7 @@ export default defineComponent({
   },
 })
 </script>
+
 <template>
   <VueFlow
     v-model="elements"
diff --git a/examples/src/Basic/ResizableNode.vue b/examples/src/Basic/ResizableNode.vue
index 6a5dddbc..12cbe130 100644
--- a/examples/src/Basic/ResizableNode.vue
+++ b/examples/src/Basic/ResizableNode.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle } from '@braks/vue-flow'
 
 interface Props {
   id: string
@@ -17,12 +18,14 @@ const props = withDefaults(defineProps<Props>(), {
   targetPosition: 'top' as Position,
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'ResizableNode',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle
     type="target"
@@ -41,6 +44,7 @@ export default {
     :is-valid-connection="props.isValidSourcePos"
   />
 </template>
+
 <style>
 .resize-node {
   padding: 1rem;
diff --git a/examples/src/CustomConnectionLine/ConnectionLine.vue b/examples/src/CustomConnectionLine/ConnectionLine.vue
index cb25182e..af6c81d7 100644
--- a/examples/src/CustomConnectionLine/ConnectionLine.vue
+++ b/examples/src/CustomConnectionLine/ConnectionLine.vue
@@ -7,6 +7,7 @@ interface CustomConnectionLineProps {
 }
 const props = defineProps<CustomConnectionLineProps>()
 </script>
+
 <template>
   <g>
     <path
diff --git a/examples/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/src/CustomConnectionLine/CustomConnectionLine.vue
index cfe87889..acdc369c 100644
--- a/examples/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Background, BackgroundVariant, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
@@ -11,6 +12,7 @@ const elements = ref<Elements>([
   },
 ])
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <template #connection-line="props">
diff --git a/examples/src/CustomNode/ColorSelectorNode.vue b/examples/src/CustomNode/ColorSelectorNode.vue
index 61dee0d4..f0469d59 100644
--- a/examples/src/CustomNode/ColorSelectorNode.vue
+++ b/examples/src/CustomNode/ColorSelectorNode.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {
@@ -16,11 +17,13 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
   <div>
diff --git a/examples/src/CustomNode/CustomNode.vue b/examples/src/CustomNode/CustomNode.vue
index 83da0a17..a05cad1d 100644
--- a/examples/src/CustomNode/CustomNode.vue
+++ b/examples/src/CustomNode/CustomNode.vue
@@ -1,16 +1,6 @@
 <script lang="ts" setup>
-import {
-  ConnectionMode,
-  Controls,
-  Elements,
-  isEdge,
-  MiniMap,
-  Node,
-  Position,
-  SnapGrid,
-  useVueFlow,
-  VueFlow,
-} from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
@@ -85,6 +75,7 @@ onPaneReady((i) => {
   console.log('flow loaded:', i)
 })
 </script>
+
 <template>
   <VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
     <template #node-selectorNode="props">
diff --git a/examples/src/DragNDrop/DnD.vue b/examples/src/DragNDrop/DnD.vue
index dd85c6e2..1474c28e 100644
--- a/examples/src/DragNDrop/DnD.vue
+++ b/examples/src/DragNDrop/DnD.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Node, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
@@ -38,12 +39,14 @@ const onDrop = (event: DragEvent) => {
   }
 }
 </script>
+
 <template>
   <div class="dndflow" @drop="onDrop">
     <VueFlow @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>
+
 <style>
 @import 'dnd.css';
 </style>
diff --git a/examples/src/DragNDrop/Sidebar.vue b/examples/src/DragNDrop/Sidebar.vue
index 39c8681e..d44f8e13 100644
--- a/examples/src/DragNDrop/Sidebar.vue
+++ b/examples/src/DragNDrop/Sidebar.vue
@@ -6,6 +6,7 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
   }
 }
 </script>
+
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>
diff --git a/examples/src/EdgeTypes/EdgeTypesExample.vue b/examples/src/EdgeTypes/EdgeTypesExample.vue
index d6d3471e..2ec935a6 100644
--- a/examples/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { FlowInstance } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
@@ -9,6 +10,7 @@ const onLoad = (flowInstance: FlowInstance) => {
 
 const elements = getElements()
 </script>
+
 <template>
   <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
     <MiniMap />
diff --git a/examples/src/EdgeTypes/utils.ts b/examples/src/EdgeTypes/utils.ts
index e8ac1135..1f65a282 100644
--- a/examples/src/EdgeTypes/utils.ts
+++ b/examples/src/EdgeTypes/utils.ts
@@ -1,4 +1,5 @@
-import { Elements, Position } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Position } from '@braks/vue-flow'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
diff --git a/examples/src/Edges/CustomEdge.vue b/examples/src/Edges/CustomEdge.vue
index 3b3baebb..eed2725e 100644
--- a/examples/src/Edges/CustomEdge.vue
+++ b/examples/src/Edges/CustomEdge.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, Position, useVueFlow, EdgeProps } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
@@ -42,11 +43,13 @@ const center = computed(() =>
   }),
 )
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
   <foreignObject
@@ -62,6 +65,7 @@ export default {
     </body>
   </foreignObject>
 </template>
+
 <style>
 .edgebutton {
   border-radius: 999px;
diff --git a/examples/src/Edges/CustomEdge2.vue b/examples/src/Edges/CustomEdge2.vue
index d5666c1c..29f5a7cd 100644
--- a/examples/src/Edges/CustomEdge2.vue
+++ b/examples/src/Edges/CustomEdge2.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -42,11 +43,13 @@ const center = computed(() =>
 )
 const onClick = () => console.log(props.data)
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText
diff --git a/examples/src/Edges/CustomLabel.vue b/examples/src/Edges/CustomLabel.vue
index 3f9c0c05..c4b38ddd 100644
--- a/examples/src/Edges/CustomLabel.vue
+++ b/examples/src/Edges/CustomLabel.vue
@@ -5,6 +5,7 @@ interface CustomLabelProps {
 
 const props = defineProps<CustomLabelProps>()
 </script>
+
 <template>
   <tspan dy="10" x="0">{{ props.label }}</tspan>
 </template>
diff --git a/examples/src/Edges/EdgesExample.vue b/examples/src/Edges/EdgesExample.vue
index 562a6590..7f7ef74e 100644
--- a/examples/src/Edges/EdgesExample.vue
+++ b/examples/src/Edges/EdgesExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
@@ -71,6 +72,7 @@ useVueFlow({
   edges: initialEdges,
 })
 </script>
+
 <template>
   <VueFlow :fit-view-on-init="true" :snap-to-grid="true">
     <template #edge-custom="props">
diff --git a/examples/src/Empty/EmptyExample.vue b/examples/src/Empty/EmptyExample.vue
index 4fbd1c99..638f7d28 100644
--- a/examples/src/Empty/EmptyExample.vue
+++ b/examples/src/Empty/EmptyExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
@@ -17,6 +18,7 @@ const addRandomNode = () => {
   addNodes([newNode])
 }
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />
diff --git a/examples/src/FloatingEdges/FloatingConnectionLine.vue b/examples/src/FloatingEdges/FloatingConnectionLine.vue
index b649eb51..91c4ec29 100644
--- a/examples/src/FloatingEdges/FloatingConnectionLine.vue
+++ b/examples/src/FloatingEdges/FloatingConnectionLine.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getBezierPath, GraphNode, Position } from '@braks/vue-flow'
+import type { GraphNode, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingConnectionLineProps {
@@ -30,6 +31,7 @@ const d = computed(() =>
   }),
 )
 </script>
+
 <template>
   <g>
     <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d" />
diff --git a/examples/src/FloatingEdges/FloatingEdge.vue b/examples/src/FloatingEdges/FloatingEdge.vue
index 139cbd2e..6606811a 100644
--- a/examples/src/FloatingEdges/FloatingEdge.vue
+++ b/examples/src/FloatingEdges/FloatingEdge.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { getBezierPath, GraphNode, EdgeProps, MarkerType } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {
@@ -33,6 +34,7 @@ const d = computed(
     '',
 )
 </script>
+
 <template>
   <g class="vue-flow__connection">
     <path
diff --git a/examples/src/FloatingEdges/FloatingEdges.vue b/examples/src/FloatingEdges/FloatingEdges.vue
index c9779753..f6b2de2c 100644
--- a/examples/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/src/FloatingEdges/FloatingEdges.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, MiniMap, Controls, MarkerType, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
@@ -10,6 +10,7 @@ const { addEdges, onConnect, onPaneReady, getNodes } = useVueFlow({
 onPaneReady(({ fitView }) => fitView())
 onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: MarkerType.Arrow }]))
 </script>
+
 <template>
   <div class="floatingedges">
     <VueFlow>
@@ -26,6 +27,7 @@ onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: Marker
     </VueFlow>
   </div>
 </template>
+
 <style>
 .floatingedges {
   flex-direction: column;
diff --git a/examples/src/FloatingEdges/floating-edge-utils.ts b/examples/src/FloatingEdges/floating-edge-utils.ts
index c2a881ca..c2c22987 100644
--- a/examples/src/FloatingEdges/floating-edge-utils.ts
+++ b/examples/src/FloatingEdges/floating-edge-utils.ts
@@ -1,4 +1,5 @@
-import { Position, MarkerType, XYPosition, GraphNode, Edge } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
+import { MarkerType, Position } from '@braks/vue-flow'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
diff --git a/examples/src/Hidden/HiddenExample.vue b/examples/src/Hidden/HiddenExample.vue
index c67df2d4..0d87dfbb 100644
--- a/examples/src/Hidden/HiddenExample.vue
+++ b/examples/src/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const isHidden = ref(false)
 
@@ -21,6 +21,7 @@ watchEffect(() => {
   edges.value.forEach((e) => (e.hidden = isHidden.value))
 })
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />
diff --git a/examples/src/Interaction/InteractionExample.vue b/examples/src/Interaction/InteractionExample.vue
index 87397ed7..ce989d07 100644
--- a/examples/src/Interaction/InteractionExample.vue
+++ b/examples/src/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,
@@ -41,6 +41,7 @@ onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', ev
 onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
 onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />
diff --git a/examples/src/Layouting/LayoutingExample.vue b/examples/src/Layouting/LayoutingExample.vue
index 09d702a3..1f83605f 100644
--- a/examples/src/Layouting/LayoutingExample.vue
+++ b/examples/src/Layouting/LayoutingExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '@braks/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
@@ -37,6 +38,7 @@ const onLayout = (direction: string) => {
   })
 }
 </script>
+
 <template>
   <div class="layoutflow">
     <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
@@ -48,6 +50,7 @@ const onLayout = (direction: string) => {
     </div>
   </div>
 </template>
+
 <style>
 @import 'layouting.css';
 </style>
diff --git a/examples/src/Layouting/initial-elements.ts b/examples/src/Layouting/initial-elements.ts
index c540dd1f..29d92e14 100644
--- a/examples/src/Layouting/initial-elements.ts
+++ b/examples/src/Layouting/initial-elements.ts
@@ -1,4 +1,4 @@
-import { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '@braks/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 
diff --git a/examples/src/MultiFlows/Flow.vue b/examples/src/MultiFlows/Flow.vue
index 4dbddcd2..8814e5c6 100644
--- a/examples/src/MultiFlows/Flow.vue
+++ b/examples/src/MultiFlows/Flow.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, VueFlow } from '@braks/vue-flow'
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
@@ -11,6 +12,7 @@ const initialElements: Elements = [
 
 const elements = ref<Elements>(initialElements)
 </script>
+
 <template>
   <VueFlow v-model="elements" :fit-view-on-init="true">
     <Background />
diff --git a/examples/src/MultiFlows/MultiFlowsExample.vue b/examples/src/MultiFlows/MultiFlowsExample.vue
index 172c368b..1112d023 100644
--- a/examples/src/MultiFlows/MultiFlowsExample.vue
+++ b/examples/src/MultiFlows/MultiFlowsExample.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import Flow from './Flow.vue'
 </script>
+
 <template>
   <div class="vue-flow__example-multiflows">
     <Flow />
     <Flow />
   </div>
 </template>
+
 <style>
 @import 'multiflows.css';
 </style>
diff --git a/examples/src/Nesting/GroupNode.vue b/examples/src/Nesting/GroupNode.vue
index c98573ae..c9499696 100644
--- a/examples/src/Nesting/GroupNode.vue
+++ b/examples/src/Nesting/GroupNode.vue
@@ -25,6 +25,7 @@ onNodeDragStop(({ node }) => {
   }
 })
 </script>
+
 <template>
   <div class="vue-flow__group-node">
     <Handle type="target" :position="Position.Top" />
@@ -32,6 +33,7 @@ onNodeDragStop(({ node }) => {
     <Handle type="source" :position="Position.Bottom" />
   </div>
 </template>
+
 <style>
 .vue-flow__group-node {
   padding: 15px;
diff --git a/examples/src/Nesting/Nesting.vue b/examples/src/Nesting/Nesting.vue
index c63cd796..b944dd3c 100644
--- a/examples/src/Nesting/Nesting.vue
+++ b/examples/src/Nesting/Nesting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
@@ -87,6 +87,7 @@ onMounted(() => {
   ])
 })
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />
diff --git a/examples/src/NodeTypeChange/NodeTypeChangeExample.vue b/examples/src/NodeTypeChange/NodeTypeChangeExample.vue
index 0086a87c..ee9c748d 100644
--- a/examples/src/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -33,6 +34,7 @@ const changeType = () => {
   })
 }
 </script>
+
 <template>
   <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
     <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
diff --git a/examples/src/Overview/Overview.vue b/examples/src/Overview/Overview.vue
index 3033d4f4..033f7883 100644
--- a/examples/src/Overview/Overview.vue
+++ b/examples/src/Overview/Overview.vue
@@ -1,20 +1,6 @@
 <script lang="ts" setup>
-import {
-  VueFlow,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  Node,
-  Elements,
-  FlowInstance,
-  FlowTransform,
-  SnapGrid,
-  Connection,
-  Edge,
-  FlowEvents,
-  MarkerType,
-} from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
@@ -114,6 +100,7 @@ const nodeColor = (n: Node): string => {
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"
diff --git a/examples/src/Provider/ProviderExample.vue b/examples/src/Provider/ProviderExample.vue
index 168c7401..fcb20a93 100644
--- a/examples/src/Provider/ProviderExample.vue
+++ b/examples/src/Provider/ProviderExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements, FlowInstance } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 
@@ -16,6 +17,7 @@ const initialElements: Elements = [
 useVueFlow()
 const elements = ref<Elements>(initialElements)
 </script>
+
 <template>
   <div class="providerflow">
     <Sidebar />
@@ -26,6 +28,7 @@ const elements = ref<Elements>(initialElements)
     </div>
   </div>
 </template>
+
 <style>
 @import 'provider.css';
 </style>
diff --git a/examples/src/Provider/Sidebar.vue b/examples/src/Provider/Sidebar.vue
index 90594c64..fbff809c 100644
--- a/examples/src/Provider/Sidebar.vue
+++ b/examples/src/Provider/Sidebar.vue
@@ -7,6 +7,7 @@ const selectAll = () => {
   nodesSelectionActive.value = true
 }
 </script>
+
 <template>
   <aside>
     <div class="description">
diff --git a/examples/src/RGBFlow/RGBFlow.vue b/examples/src/RGBFlow/RGBFlow.vue
index acde02a9..5e74c5a3 100644
--- a/examples/src/RGBFlow/RGBFlow.vue
+++ b/examples/src/RGBFlow/RGBFlow.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
+import type { Elements, FlowInstance } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 
-type Colors = {
+interface Colors {
   red: number
   green: number
   blue: number
@@ -31,6 +32,7 @@ const color = ref<Colors>({
 })
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
 </script>
+
 <template>
   <div ref="page" class="demo-flow">
     <VueFlow v-model="elements" @pane-ready="onLoad">
@@ -43,6 +45,7 @@ const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (c
     </VueFlow>
   </div>
 </template>
+
 <style>
 .demo-flow {
   display: flex;
diff --git a/examples/src/RGBFlow/RGBNode.vue b/examples/src/RGBFlow/RGBNode.vue
index 32086421..c0ea1711 100644
--- a/examples/src/RGBFlow/RGBNode.vue
+++ b/examples/src/RGBFlow/RGBNode.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -37,6 +38,7 @@ const colorVal = computed({
 
 const style = { '--color': color } as CSSProperties
 </script>
+
 <template>
   <div class="wrapper">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
@@ -44,6 +46,7 @@ const style = { '--color': color } as CSSProperties
     <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
   </div>
 </template>
+
 <style>
 .wrapper {
   padding: 16px;
diff --git a/examples/src/RGBFlow/RGBOutputNode.vue b/examples/src/RGBFlow/RGBOutputNode.vue
index 0bcce7b3..793d8a33 100644
--- a/examples/src/RGBFlow/RGBOutputNode.vue
+++ b/examples/src/RGBFlow/RGBOutputNode.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
@@ -7,12 +8,14 @@ interface RBGOutputNodeProps extends NodeProps {
 
 const props = defineProps<RBGOutputNodeProps>()
 </script>
+
 <template>
   <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
     <div class="text-md uppercase">{{ props.rgb }}</div>
     <Handle type="target" :position="Position.Left" />
   </div>
 </template>
+
 <style>
 .rgb-output-node {
   padding: 9px;
diff --git a/examples/src/SaveRestore/Controls.vue b/examples/src/SaveRestore/Controls.vue
index 1b2e1ba2..7221797a 100644
--- a/examples/src/SaveRestore/Controls.vue
+++ b/examples/src/SaveRestore/Controls.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '@braks/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
@@ -38,6 +39,7 @@ const onAdd = () => {
   addNodes([newNode])
 }
 </script>
+
 <template>
   <div class="save__controls">
     <button @click="onSave">save</button>
diff --git a/examples/src/SaveRestore/SaveRestoreExample.vue b/examples/src/SaveRestore/SaveRestoreExample.vue
index f4901209..2bebff33 100644
--- a/examples/src/SaveRestore/SaveRestoreExample.vue
+++ b/examples/src/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import Controls from './Controls.vue'
-import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
@@ -10,11 +11,13 @@ const initialElements: Elements = [
 
 const elements = ref(initialElements)
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <Controls />
   </VueFlow>
 </template>
+
 <style>
 @import 'save.css';
 </style>
diff --git a/examples/src/Stress/StressExample.vue b/examples/src/Stress/StressExample.vue
index a6eae4fd..e2e01ef3 100644
--- a/examples/src/Stress/StressExample.vue
+++ b/examples/src/Stress/StressExample.vue
@@ -16,6 +16,7 @@ onPaneReady((i) => {
   console.log(i.getElements())
 })
 </script>
+
 <template>
   <VueFlow />
 </template>
diff --git a/examples/src/Stress/utils.ts b/examples/src/Stress/utils.ts
index c435a7e2..268abe79 100644
--- a/examples/src/Stress/utils.ts
+++ b/examples/src/Stress/utils.ts
@@ -1,4 +1,4 @@
-import { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []
diff --git a/examples/src/Switch/SwitchExample.vue b/examples/src/Switch/SwitchExample.vue
index 4d7c68a8..41958956 100644
--- a/examples/src/Switch/SwitchExample.vue
+++ b/examples/src/Switch/SwitchExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -25,6 +26,7 @@ const elementsB: Elements = [
 
 const elements = ref(elementsA)
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <div :style="{ position: 'absolute', right: 10, top: 10, zIndex: 4 }">
diff --git a/examples/src/Unidirectional/CustomNode.vue b/examples/src/Unidirectional/CustomNode.vue
index 95bc7380..4316dc7d 100644
--- a/examples/src/Unidirectional/CustomNode.vue
+++ b/examples/src/Unidirectional/CustomNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { Handle, Position } from '@braks/vue-flow'
 
 interface Props {
@@ -9,6 +9,7 @@ interface Props {
 const props = defineProps<Props>()
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
 </script>
+
 <template>
   <div :key="props.id" :style="nodeStyles">
     <div>node {{ props.id }}</div>
diff --git a/examples/src/Unidirectional/UnidirectionalExample.vue b/examples/src/Unidirectional/UnidirectionalExample.vue
index 4e1bcef2..a805b247 100644
--- a/examples/src/Unidirectional/UnidirectionalExample.vue
+++ b/examples/src/Unidirectional/UnidirectionalExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements, Node } from '@braks/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -171,6 +172,7 @@ const onPaneClick = (evt: MouseEvent) =>
     type: 'custom',
   } as Node))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"
diff --git a/examples/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/src/UpdatableEdge/UpdatableEdgeExample.vue
index 2b50537f..257295ba 100644
--- a/examples/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,16 +1,6 @@
 <script lang="ts" setup>
-import {
-  VueFlow,
-  Controls,
-  updateEdge,
-  addEdge,
-  Elements,
-  FlowInstance,
-  Connection,
-  Edge,
-  FlowEvents,
-  ConnectionMode,
-} from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -42,6 +32,7 @@ const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {
 }
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"
diff --git a/examples/src/UpdateNode/UpdateNodeExample.vue b/examples/src/UpdateNode/UpdateNodeExample.vue
index fc151fc4..1e35f428 100644
--- a/examples/src/UpdateNode/UpdateNodeExample.vue
+++ b/examples/src/UpdateNode/UpdateNodeExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },
@@ -27,6 +28,7 @@ const updateNode = () => {
 
 onMounted(updateNode)
 </script>
+
 <template>
   <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
@@ -43,6 +45,7 @@ onMounted(updateNode)
     </div>
   </VueFlow>
 </template>
+
 <style>
 @import 'updatenode.css';
 </style>
diff --git a/examples/src/Validation/CustomInput.vue b/examples/src/Validation/CustomInput.vue
index 97572fec..b0ab2e6a 100644
--- a/examples/src/Validation/CustomInput.vue
+++ b/examples/src/Validation/CustomInput.vue
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc
 }
 const props = defineProps<CustomInputProps>()
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <div>Only connectable with B</div>
   <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
diff --git a/examples/src/Validation/CustomNode.vue b/examples/src/Validation/CustomNode.vue
index 996ee1f2..b84134a4 100644
--- a/examples/src/Validation/CustomNode.vue
+++ b/examples/src/Validation/CustomNode.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string
@@ -8,11 +9,13 @@ interface CustomNodeProps extends NodeProps {
 
 const props = defineProps<CustomNodeProps>()
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
   <div>{{ props.id }}</div>
diff --git a/examples/src/Validation/ValidationExample.vue b/examples/src/Validation/ValidationExample.vue
index 09a97c8d..83e9ebd5 100644
--- a/examples/src/Validation/ValidationExample.vue
+++ b/examples/src/Validation/ValidationExample.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [
@@ -26,6 +27,7 @@ const onConnect = (params: Connection) => {
   addEdges([params])
 }
 </script>
+
 <template>
   <VueFlow
     :select-nodes-on-drag="false"
@@ -44,6 +46,7 @@ const onConnect = (params: Connection) => {
     </template>
   </VueFlow>
 </template>
+
 <style>
 @import 'validation.css';
 </style>
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
index b975d89e..409d9b82 100644
--- a/examples/tsconfig.json
+++ b/examples/tsconfig.json
@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,18 +15,11 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client"
-    ],
+    "types": ["vite/client"],
     "paths": {
-      "~/*": [
-        "../package/src/*"
-      ]
+      "~/*": ["../package/src/*"]
     }
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/package/package.json b/package/package.json
index 96eb9cec..b5b14482 100644
--- a/package/package.json
+++ b/package/package.json
@@ -2,19 +2,19 @@
   "name": "@braks/vue-flow",
   "version": "0.4.8",
   "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcakmakoglu/vue-flow"
   },
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
   "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
   "bugs": {
     "url": "https://github.com/bcakmakoglu/vue-flow/issues"
   },
   "main": "./dist/vue-flow.cjs.js",
-  "types": "./dist/index.d.ts",
   "module": "./dist/vue-flow.es.js",
+  "types": "./dist/index.d.ts",
   "unpkg": "./dist/vue-flow.iife.js",
   "jsdelivr": "./dist/vue-flow.iife.js",
   "files": [
@@ -33,6 +33,9 @@
     "release": "yarn np",
     "postpublish": "shx rm README.md"
   },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
   "dependencies": {
     "@braks/revue-draggable": "^0.4.2",
     "@types/d3": "^7.1.0",
@@ -58,9 +61,6 @@
     "vite-svg-loader": "^2.2.0",
     "vue-tsc": "^0.33.9"
   },
-  "peerDependencies": {
-    "vue": "^3.2.25"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "http://registry.npmjs.org/"
diff --git a/package/src/additional-components/Background/Background.vue b/package/src/additional-components/Background/Background.vue
index 94448579..439ef479 100644
--- a/package/src/additional-components/Background/Background.vue
+++ b/package/src/additional-components/Background/Background.vue
@@ -45,11 +45,13 @@ const d = computed(
   () => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
 )
 </script>
+
 <script lang="ts">
 export default {
   name: 'Background',
 }
 </script>
+
 <template>
   <svg
     class="vue-flow__background"
diff --git a/package/src/additional-components/Controls/ControlButton.vue b/package/src/additional-components/Controls/ControlButton.vue
index f2c11d6d..6c074f57 100644
--- a/package/src/additional-components/Controls/ControlButton.vue
+++ b/package/src/additional-components/Controls/ControlButton.vue
@@ -3,6 +3,7 @@ export default {
   name: 'ControlButton',
 }
 </script>
+
 <template>
   <button class="vue-flow__controls-button">
     <slot></slot>
diff --git a/package/src/additional-components/Controls/Controls.vue b/package/src/additional-components/Controls/Controls.vue
index ee379bbc..1a473ba4 100644
--- a/package/src/additional-components/Controls/Controls.vue
+++ b/package/src/additional-components/Controls/Controls.vue
@@ -41,11 +41,13 @@ const onInteractiveChangeHandler = () => {
   emit('interaction-change', !isInteractive.value)
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Controls',
 }
 </script>
+
 <template>
   <div class="vue-flow__controls">
     <template v-if="showZoom">
diff --git a/package/src/additional-components/MiniMap/MiniMap.vue b/package/src/additional-components/MiniMap/MiniMap.vue
index 19584f41..db7ad3b5 100644
--- a/package/src/additional-components/MiniMap/MiniMap.vue
+++ b/package/src/additional-components/MiniMap/MiniMap.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ShapeRendering, MiniMapNodeFunc, GraphNode } from '../../types'
+import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
@@ -90,11 +90,13 @@ const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
   hooks.miniMapNodeDoubleClick.trigger({ event, node })
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'MiniMap',
 }
 </script>
+
 <template>
   <svg
     :width="elementWidth"
diff --git a/package/src/additional-components/MiniMap/MiniMapNode.ts b/package/src/additional-components/MiniMap/MiniMapNode.ts
index 2f00ae77..489831d0 100644
--- a/package/src/additional-components/MiniMap/MiniMapNode.ts
+++ b/package/src/additional-components/MiniMap/MiniMapNode.ts
@@ -1,5 +1,5 @@
-import { CSSProperties, FunctionalComponent } from 'vue'
-import { MiniMapNodeProps } from '~/types'
+import type { CSSProperties, FunctionalComponent } from 'vue'
+import type { MiniMapNodeProps } from '~/types'
 
 const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
   {
diff --git a/package/src/components/ConnectionLine/ConnectionLine.vue b/package/src/components/ConnectionLine/ConnectionLine.vue
index 746a2aab..bdca3873 100644
--- a/package/src/components/ConnectionLine/ConnectionLine.vue
+++ b/package/src/components/ConnectionLine/ConnectionLine.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { ConnectionLineType, GraphNode, HandleElement, HandleType, Position } from '../../types'
+import type { GraphNode, HandleElement, HandleType } from '../../types'
+import { ConnectionLineType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
@@ -81,11 +82,13 @@ const dAttr = computed(() => {
   return path
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'ConnectionLine',
 }
 </script>
+
 <template>
   <g class="vue-flow__connection">
     <component
diff --git a/package/src/components/Edges/BaseEdge.ts b/package/src/components/Edges/BaseEdge.ts
index 557d542b..c70288f3 100644
--- a/package/src/components/Edges/BaseEdge.ts
+++ b/package/src/components/Edges/BaseEdge.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties, FunctionalComponent } from 'vue'
 import EdgeText from './EdgeText.vue'
 
 interface Props {
diff --git a/package/src/components/Edges/BezierEdge.ts b/package/src/components/Edges/BezierEdge.ts
index e7273cfd..ee5380ad 100644
--- a/package/src/components/Edges/BezierEdge.ts
+++ b/package/src/components/Edges/BezierEdge.ts
@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'vue'
-import { getBezierPath, getBezierCenter } from './utils'
+import type { FunctionalComponent } from 'vue'
+import { getBezierCenter, getBezierPath } from './utils'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
 import type { EdgeProps } from '~/types'
diff --git a/package/src/components/Edges/EdgeAnchor.ts b/package/src/components/Edges/EdgeAnchor.ts
index a5fb3a4c..1a17dfec 100644
--- a/package/src/components/Edges/EdgeAnchor.ts
+++ b/package/src/components/Edges/EdgeAnchor.ts
@@ -1,4 +1,4 @@
-import { FunctionalComponent, HTMLAttributes } from 'vue'
+import type { FunctionalComponent, HTMLAttributes } from 'vue'
 import { Position } from '~/types'
 
 interface Props extends HTMLAttributes {
diff --git a/package/src/components/Edges/EdgeText.vue b/package/src/components/Edges/EdgeText.vue
index b0b5f21a..78ef5027 100644
--- a/package/src/components/Edges/EdgeText.vue
+++ b/package/src/components/Edges/EdgeText.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EdgeTextProps } from '../../types/components'
-import { Rect } from '../../types'
+import type { Rect } from '../../types'
 
 const props = withDefaults(defineProps<EdgeTextProps>(), {
   labelStyle: () => ({}),
@@ -19,18 +19,20 @@ onMounted(() => {
 })
 const transform = computed(() => `translate(${props.x - edgeRefBbox.width / 2} ${props.y - edgeRefBbox.height / 2})`)
 </script>
+
 <script lang="ts">
 export default {
   name: 'EdgeText',
 }
 </script>
+
 <template>
   <g :transform="transform" :class="props.class" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
       class="vue-flow__edge-textbg"
-      :width="edgeRefBbox.width + 2 * props.labelBgPadding[0] + 'px'"
-      :height="edgeRefBbox.height + 2 * props.labelBgPadding[1] + 'px'"
+      :width="`${edgeRefBbox.width + 2 * props.labelBgPadding[0]}px`"
+      :height="`${edgeRefBbox.height + 2 * props.labelBgPadding[1]}px`"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
       :style="props.labelBgStyle"
diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index 5e6c425d..cd9a4909 100644
--- a/package/src/components/Edges/EdgeWrapper.vue
+++ b/package/src/components/Edges/EdgeWrapper.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, EdgeComponent, GraphEdge, Position } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
+import { ConnectionMode, Position } from '../../types'
 import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
@@ -161,12 +162,14 @@ const getClass = () => {
 
 const getStyle = () => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
 </script>
+
 <script lang="ts">
 export default {
   name: 'Edge',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <g
     :class="getClass()"
diff --git a/package/src/components/Edges/SimpleBezierEdge.ts b/package/src/components/Edges/SimpleBezierEdge.ts
index 991d33b5..69b2cbc5 100644
--- a/package/src/components/Edges/SimpleBezierEdge.ts
+++ b/package/src/components/Edges/SimpleBezierEdge.ts
@@ -1,4 +1,4 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { getSimpleBezierCenter, getSimpleBezierPath } from './utils'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
diff --git a/package/src/components/Edges/SmoothStepEdge.ts b/package/src/components/Edges/SmoothStepEdge.ts
index 40cbffa8..4dcc8b82 100644
--- a/package/src/components/Edges/SmoothStepEdge.ts
+++ b/package/src/components/Edges/SmoothStepEdge.ts
@@ -1,7 +1,8 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { getCenter, getSmoothStepPath } from './utils'
 import BaseEdge from './BaseEdge'
-import { Position, SmoothStepEdgeProps } from '~/types'
+import type { SmoothStepEdgeProps } from '~/types'
+import { Position } from '~/types'
 
 const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
   sourcePosition = Position.Bottom,
diff --git a/package/src/components/Edges/StepEdge.ts b/package/src/components/Edges/StepEdge.ts
index 0fb0729f..34ee2057 100644
--- a/package/src/components/Edges/StepEdge.ts
+++ b/package/src/components/Edges/StepEdge.ts
@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
-import { EdgeProps } from '~/types'
+import type { EdgeProps } from '~/types'
 
 const StepEdge: FunctionalComponent<EdgeProps> = function (props) {
   return h(SmoothStepEdge, { ...props, borderRadius: 0 })
diff --git a/package/src/components/Edges/StraightEdge.ts b/package/src/components/Edges/StraightEdge.ts
index 58692767..3be7537e 100644
--- a/package/src/components/Edges/StraightEdge.ts
+++ b/package/src/components/Edges/StraightEdge.ts
@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
-import { EdgeProps } from '~/types'
+import type { EdgeProps } from '~/types'
 
 const StraightEdge: FunctionalComponent<EdgeProps> = function ({
   label,
diff --git a/package/src/components/Handle/Handle.vue b/package/src/components/Handle/Handle.vue
index c6f5f3ae..55b19fd0 100644
--- a/package/src/components/Handle/Handle.vue
+++ b/package/src/components/Handle/Handle.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, Position } from '../../types'
+import type { Position } from '../../types'
+import { ConnectionMode } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
@@ -49,11 +50,13 @@ const getClasses = computed(() => {
   ]
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Handle',
 }
 </script>
+
 <template>
   <div
     :data-handleid="handleId"
diff --git a/package/src/components/Nodes/DefaultNode.ts b/package/src/components/Nodes/DefaultNode.ts
index dcc3c209..94791870 100644
--- a/package/src/components/Nodes/DefaultNode.ts
+++ b/package/src/components/Nodes/DefaultNode.ts
@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const DefaultNode: FunctionalComponent<NodeProps> = function ({
   sourcePosition = Position.Bottom,
diff --git a/package/src/components/Nodes/InputNode.ts b/package/src/components/Nodes/InputNode.ts
index 017c2d72..685b7075 100644
--- a/package/src/components/Nodes/InputNode.ts
+++ b/package/src/components/Nodes/InputNode.ts
@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const InputNode: FunctionalComponent<NodeProps> = function ({
   sourcePosition = Position.Bottom,
diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index dccbab12..378bf713 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useDraggableCore } from '@braks/revue-draggable'
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { useVueFlow } from '../../composables'
-import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getHandleBounds, getXYZPos } from '../../utils'
 
@@ -238,12 +238,14 @@ const getStyle = computed(() => {
   } as CSSProperties
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Node',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <div
     ref="nodeElement"
diff --git a/package/src/components/Nodes/OutputNode.ts b/package/src/components/Nodes/OutputNode.ts
index 71556569..781da096 100644
--- a/package/src/components/Nodes/OutputNode.ts
+++ b/package/src/components/Nodes/OutputNode.ts
@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const OutputNode: FunctionalComponent<NodeProps> = function ({
   targetPosition = Position.Top,
diff --git a/package/src/components/NodesSelection/NodesSelection.vue b/package/src/components/NodesSelection/NodesSelection.vue
index 8b6f3cc4..d9ef985d 100644
--- a/package/src/components/NodesSelection/NodesSelection.vue
+++ b/package/src/components/NodesSelection/NodesSelection.vue
@@ -54,11 +54,13 @@ onDragStop(({ event }) => {
   getSelectedNodes.forEach((node) => (node.dragging = false))
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'NodesSelection',
 }
 </script>
+
 <template>
   <div class="vue-flow__nodesselection vue-flow__container" :class="noPanClassName" :style="{ transform }">
     <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
diff --git a/package/src/components/UserSelection/SelectionRect.vue b/package/src/components/UserSelection/SelectionRect.vue
index 275a3ebb..875b17fe 100644
--- a/package/src/components/UserSelection/SelectionRect.vue
+++ b/package/src/components/UserSelection/SelectionRect.vue
@@ -8,11 +8,13 @@ interface SelectionRectProps {
 
 const { width, height, x, y } = defineProps<SelectionRectProps>()
 </script>
+
 <script lang="ts">
 export default {
   name: 'SelectionRect',
 }
 </script>
+
 <template>
   <div
     class="vue-flow__selection"
diff --git a/package/src/components/UserSelection/UserSelection.vue b/package/src/components/UserSelection/UserSelection.vue
index 58434de4..bb9813eb 100644
--- a/package/src/components/UserSelection/UserSelection.vue
+++ b/package/src/components/UserSelection/UserSelection.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import { SelectionRect as Rect } from '../../types'
+import type { SelectionRect as Rect } from '../../types'
 import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
@@ -110,11 +110,13 @@ onBeforeUnmount(() => {
   reset()
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'UserSelection',
 }
 </script>
+
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane vue-flow__container">
     <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />
diff --git a/package/src/components/UserSelection/utils.ts b/package/src/components/UserSelection/utils.ts
index cc795620..ee2f5784 100644
--- a/package/src/components/UserSelection/utils.ts
+++ b/package/src/components/UserSelection/utils.ts
@@ -1,4 +1,4 @@
-import { XYPosition } from '../../types'
+import type { XYPosition } from '../../types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')
diff --git a/package/src/composables/useHandle.ts b/package/src/composables/useHandle.ts
index 2801326e..90d16c6f 100644
--- a/package/src/composables/useHandle.ts
+++ b/package/src/composables/useHandle.ts
@@ -1,8 +1,9 @@
 import useVueFlow from './useVueFlow'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
+import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
+import { ConnectionMode } from '~/types'
 
-type Result = {
+interface Result {
   elementBelow: Element | null
   isValid: boolean
   connection: Connection
diff --git a/package/src/composables/useKeyPress.ts b/package/src/composables/useKeyPress.ts
index c25f6f10..02d8150e 100644
--- a/package/src/composables/useKeyPress.ts
+++ b/package/src/composables/useKeyPress.ts
@@ -1,7 +1,7 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import useWindow from './useWindow'
-import { KeyCode } from '~/types'
+import type { KeyCode } from '~/types'
 import { isInputDOMNode } from '~/utils'
 
 export default (keyCode: Ref<KeyCode>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts
index 92e28c8f..028e41ee 100644
--- a/package/src/composables/useVueFlow.ts
+++ b/package/src/composables/useVueFlow.ts
@@ -1,10 +1,8 @@
-import { EffectScope } from 'vue'
-import { MaybeRef } from '@vueuse/core'
-import { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import type { EffectScope } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
 import { VueFlow } from '~/context'
-import useState from '~/store/state'
-import useGetters from '~/store/getters'
-import useActions from '~/store/actions'
+import { useActions, useGetters, useState } from '~/store'
 
 /**
  * Stores all currently created store instances
diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts
index 466793fe..51461219 100644
--- a/package/src/composables/useZoomPanHelper.ts
+++ b/package/src/composables/useZoomPanHelper.ts
@@ -1,8 +1,8 @@
 import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
 import useWindow from './useWindow'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, clampPosition } from '~/utils'
-import { GraphNode, ViewportFuncs, D3Selection, Getters, Dimensions } from '~/types'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
+import type { D3Selection, Dimensions, Getters, GraphNode, ViewportFuncs } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
diff --git a/package/src/container/EdgeRenderer/EdgeRenderer.vue b/package/src/container/EdgeRenderer/EdgeRenderer.vue
index 0dafca3e..f2dfdd47 100644
--- a/package/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/package/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -3,7 +3,7 @@ import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useVueFlow } from '../../composables'
 import { groupEdgesByZLevel } from '../../utils'
-import { EdgeComponent, GraphEdge } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
@@ -86,11 +86,13 @@ const getType = (edge: GraphEdge) => {
   return slot
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Edges',
 }
 </script>
+
 <template>
   <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
     <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
diff --git a/package/src/container/EdgeRenderer/Marker.vue b/package/src/container/EdgeRenderer/Marker.vue
index 219b50df..bc412a4d 100644
--- a/package/src/container/EdgeRenderer/Marker.vue
+++ b/package/src/container/EdgeRenderer/Marker.vue
@@ -12,11 +12,13 @@ const {
   color = 'none',
 } = defineProps<MarkerProps>()
 </script>
+
 <script lang="ts">
 export default {
   name: 'Marker',
 }
 </script>
+
 <template>
   <marker
     :id="id"
diff --git a/package/src/container/EdgeRenderer/MarkerDefinitions.vue b/package/src/container/EdgeRenderer/MarkerDefinitions.vue
index ec3cd48b..3a834a8e 100644
--- a/package/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/package/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import type { MarkerProps } from '../../types/edge'
+import type { MarkerProps, MarkerType } from '../../types/edge'
 import { getMarkerId } from '../../utils'
-import { MarkerType } from '../../types/edge'
 import Marker from './Marker.vue'
 
 interface MarkerDefinitionsProps {
@@ -31,11 +30,13 @@ const markers = computed(() => {
   }, [])
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'MarkerDefinitions',
 }
 </script>
+
 <template>
   <defs>
     <Marker
diff --git a/package/src/container/NodeRenderer/NodeRenderer.vue b/package/src/container/NodeRenderer/NodeRenderer.vue
index 5102bd81..17db8706 100644
--- a/package/src/container/NodeRenderer/NodeRenderer.vue
+++ b/package/src/container/NodeRenderer/NodeRenderer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
-import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
@@ -47,11 +47,13 @@ const getType = (node: GraphNode) => {
   return slot
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Nodes',
 }
 </script>
+
 <template>
   <div class="vue-flow__nodes vue-flow__container">
     <NodeWrapper
diff --git a/package/src/container/SelectionPane/SelectionPane.vue b/package/src/container/SelectionPane/SelectionPane.vue
index 97dca2f0..4b2c625d 100644
--- a/package/src/container/SelectionPane/SelectionPane.vue
+++ b/package/src/container/SelectionPane/SelectionPane.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { EdgeChange, NodeChange } from '../../types'
-import { useVueFlow, useKeyPress } from '../../composables'
+import type { EdgeChange, NodeChange } from '../../types'
+import { useKeyPress, useVueFlow } from '../../composables'
 import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
@@ -69,12 +69,14 @@ const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPressed) => {
   })
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'SelectionPane',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
   <NodesSelection v-if="nodesSelectionActive" :key="`nodes-selection-${id}`" />
diff --git a/package/src/container/Viewport/Transform.vue b/package/src/container/Viewport/Transform.vue
index 03adcb27..17c99e36 100644
--- a/package/src/container/Viewport/Transform.vue
+++ b/package/src/container/Viewport/Transform.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
-import { Dimensions, FlowExportObject, FlowInstance, XYPosition } from '../../types'
+import { useVueFlow, useWindow, useZoomPanHelper } from '../../composables'
+import type { Dimensions, FlowExportObject, FlowInstance, XYPosition } from '../../types'
 import { pointToRendererPoint } from '../../utils'
 
 const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, emits } = $(useVueFlow())
@@ -68,11 +68,13 @@ onMounted(async () => {
   emits.paneReady(instance)
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Transform',
 }
 </script>
+
 <template>
   <div
     :key="`transform-${id}`"
diff --git a/package/src/container/Viewport/Viewport.vue b/package/src/container/Viewport/Viewport.vue
index 35e1ac46..b00709ed 100644
--- a/package/src/container/Viewport/Viewport.vue
+++ b/package/src/container/Viewport/Viewport.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
+import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
+import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, PanOnScrollMode } from '../../types'
+import type { FlowTransform } from '../../types'
+import { PanOnScrollMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
 import { clamp, clampPosition } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -177,11 +179,13 @@ onMounted(() => {
   })
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Viewport',
 }
 </script>
+
 <template>
   <div ref="viewport" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
     <Transform>
diff --git a/package/src/container/VueFlow/VueFlow.vue b/package/src/container/VueFlow/VueFlow.vue
index 000c0429..9db1c779 100644
--- a/package/src/container/VueFlow/VueFlow.vue
+++ b/package/src/container/VueFlow/VueFlow.vue
@@ -52,11 +52,13 @@ useHooks(emit, hooks.value)
 
 provide(Slots, useSlots())
 </script>
+
 <script lang="ts">
 export default {
   name: 'VueFlow',
 }
 </script>
+
 <template>
   <div class="vue-flow">
     <Viewport>
diff --git a/package/src/container/VueFlow/watch.ts b/package/src/container/VueFlow/watch.ts
index 12e1d4a1..2f640eba 100644
--- a/package/src/container/VueFlow/watch.ts
+++ b/package/src/container/VueFlow/watch.ts
@@ -1,6 +1,6 @@
-import { Ref, ToRefs } from 'vue'
-import { WatchPausableReturn } from '@vueuse/core'
-import { FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
+import type { Ref, ToRefs } from 'vue'
+import type { WatchPausableReturn } from '@vueuse/core'
+import type { FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {
diff --git a/package/src/context/index.ts b/package/src/context/index.ts
index e9a3a720..0a023dba 100644
--- a/package/src/context/index.ts
+++ b/package/src/context/index.ts
@@ -1,5 +1,5 @@
-import { InjectionKey, Slots as TSlots } from 'vue'
-import { VueFlowStore } from '~/types'
+import type { InjectionKey, Slots as TSlots } from 'vue'
+import type { VueFlowStore } from '~/types'
 
 export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')
diff --git a/package/src/env.d.ts b/package/src/env.d.ts
index 8003af94..fe706fd0 100644
--- a/package/src/env.d.ts
+++ b/package/src/env.d.ts
@@ -3,7 +3,7 @@
 /// <reference types="vue/macros-global" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component
diff --git a/package/src/store/actions.ts b/package/src/store/actions.ts
index 71c0ac05..d6efde6a 100644
--- a/package/src/store/actions.ts
+++ b/package/src/store/actions.ts
@@ -1,6 +1,7 @@
 import useState from './state'
-import {
+import type {
   Actions,
+  ComputedGetters,
   Connection,
   CoordinateExtent,
   Edge,
@@ -13,7 +14,6 @@ import {
   NodeDimensionChange,
   NodePositionChange,
   State,
-  ComputedGetters,
 } from '~/types'
 import {
   applyChanges,
diff --git a/package/src/store/getters.ts b/package/src/store/getters.ts
index ee5d2ad0..bdb0bf62 100644
--- a/package/src/store/getters.ts
+++ b/package/src/store/getters.ts
@@ -1,5 +1,5 @@
 import { defaultEdgeTypes, defaultNodeTypes } from './state'
-import { State, GraphEdge, GraphNode, ComputedGetters } from '~/types'
+import type { ComputedGetters, GraphEdge, GraphNode, State } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
 export default (state: State): ComputedGetters => {
diff --git a/package/src/store/hooks.ts b/package/src/store/hooks.ts
index 62d62654..807ddb2a 100644
--- a/package/src/store/hooks.ts
+++ b/package/src/store/hooks.ts
@@ -1,4 +1,4 @@
-import { EmitFunc, FlowHooks } from '~/types'
+import type { EmitFunc, FlowHooks } from '~/types'
 
 // flow event hooks
 export const createHooks = (): FlowHooks => ({
diff --git a/package/src/store/index.ts b/package/src/store/index.ts
index d51c2f08..ef0a15d3 100644
--- a/package/src/store/index.ts
+++ b/package/src/store/index.ts
@@ -1,3 +1,4 @@
 export { default as useHooks, createHooks } from './hooks'
-export * from './actions'
-export * from './state'
+export { default as useActions } from './actions'
+export { default as useState } from './state'
+export { default as useGetters } from './getters'
diff --git a/package/src/store/state.ts b/package/src/store/state.ts
index deb7686b..47937fdc 100644
--- a/package/src/store/state.ts
+++ b/package/src/store/state.ts
@@ -1,22 +1,15 @@
 import { createHooks } from './hooks'
+import type { DefaultEdgeTypes, DefaultNodeTypes, FlowOptions, State } from '~/types'
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '~/types'
 import {
-  ConnectionMode,
-  State,
-  PanOnScrollMode,
-  DefaultNodeTypes,
-  DefaultEdgeTypes,
-  ConnectionLineType,
-  FlowOptions,
-} from '~/types'
-import {
+  BezierEdge,
   DefaultNode,
   InputNode,
   OutputNode,
-  BezierEdge,
+  SimpleBezierEdge,
   SmoothStepEdge,
   StepEdge,
   StraightEdge,
-  SimpleBezierEdge,
 } from '~/components'
 
 export const defaultNodeTypes: DefaultNodeTypes = {
diff --git a/package/src/types/changes.ts b/package/src/types/changes.ts
index cb58d50e..c2b1c6b5 100644
--- a/package/src/types/changes.ts
+++ b/package/src/types/changes.ts
@@ -1,38 +1,38 @@
-import { XYPosition, Dimensions, ElementData } from './flow'
-import { NodeHandleBounds, Node } from './node'
-import { Edge } from './edge'
+import type { Dimensions, ElementData, XYPosition } from './flow'
+import type { Node, NodeHandleBounds } from './node'
+import type { Edge } from './edge'
 
-export type NodeDimensionChange = {
+export interface NodeDimensionChange {
   id: string
   type: 'dimensions'
   dimensions: Dimensions
   handleBounds?: NodeHandleBounds
 }
 
-export type NodePositionChange = {
+export interface NodePositionChange {
   id: string
   type: 'position'
   position?: XYPosition
   dragging?: boolean
 }
 
-export type NodeSelectionChange = {
+export interface NodeSelectionChange {
   id: string
   type: 'select'
   selected: boolean
 }
 
-export type NodeRemoveChange = {
+export interface NodeRemoveChange {
   id: string
   type: 'remove'
 }
 
-export type NodeAddChange<Data = ElementData> = {
+export interface NodeAddChange<Data = ElementData> {
   item: Node<Data>
   type: 'add'
 }
 
-export type NodeResetChange<Data = ElementData> = {
+export interface NodeResetChange<Data = ElementData> {
   item: Node<Data>
   type: 'reset'
 }
@@ -47,11 +47,11 @@ export type NodeChange =
 
 export type EdgeSelectionChange = NodeSelectionChange
 export type EdgeRemoveChange = NodeRemoveChange
-export type EdgeAddChange<Data = ElementData> = {
+export interface EdgeAddChange<Data = ElementData> {
   item: Edge<Data>
   type: 'add'
 }
-export type EdgeResetChange<Data = ElementData> = {
+export interface EdgeResetChange<Data = ElementData> {
   item: Edge<Data>
   type: 'reset'
 }
diff --git a/package/src/types/components.ts b/package/src/types/components.ts
index 09dcc046..5176deb2 100644
--- a/package/src/types/components.ts
+++ b/package/src/types/components.ts
@@ -1,8 +1,8 @@
-import { Component, CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
-import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
-import { GraphNode, NodeProps } from './node'
-import { EdgeProps } from './edge'
-import { FitViewParams } from './zoom'
+import type { CSSProperties, Component, DefineComponent, HTMLAttributes, VNode } from 'vue'
+import type { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
+import type { GraphNode, NodeProps } from './node'
+import type { EdgeProps } from './edge'
+import type { FitViewParams } from './zoom'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string
diff --git a/package/src/types/connection.ts b/package/src/types/connection.ts
index 6d88aae8..2f0aebcf 100644
--- a/package/src/types/connection.ts
+++ b/package/src/types/connection.ts
@@ -1,7 +1,7 @@
-import { CSSProperties } from 'vue'
-import { Position } from './flow'
-import { GraphNode } from './node'
-import { HandleElement, HandleType } from './handle'
+import type { CSSProperties } from 'vue'
+import type { Position } from './flow'
+import type { GraphNode } from './node'
+import type { HandleElement, HandleType } from './handle'
 
 /** Connection line types (same as default edge types */
 export enum ConnectionLineType {
@@ -24,7 +24,7 @@ export interface Connection {
 }
 
 /** The source nodes params when connection is initiated */
-export type OnConnectStartParams = {
+export interface OnConnectStartParams {
   /** Source node id */
   nodeId?: string
   /** Source handle id */
diff --git a/package/src/types/edge.ts b/package/src/types/edge.ts
index 0e5fac0e..5bbdf6e2 100644
--- a/package/src/types/edge.ts
+++ b/package/src/types/edge.ts
@@ -1,7 +1,7 @@
-import { Component, CSSProperties, VNode } from 'vue'
-import { Position, BaseElement, ElementData } from './flow'
-import { GraphNode } from './node'
-import { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
+import type { CSSProperties, Component, VNode } from 'vue'
+import type { BaseElement, ElementData, Position } from './flow'
+import type { GraphNode } from './node'
+import type { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
 
 /** Edge markers */
 export enum MarkerType {
diff --git a/package/src/types/flow.ts b/package/src/types/flow.ts
index 8149014f..f1d8d9aa 100644
--- a/package/src/types/flow.ts
+++ b/package/src/types/flow.ts
@@ -1,9 +1,9 @@
-import { Component, CSSProperties, VNode } from 'vue'
-import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
-import { GraphNode, CoordinateExtent, Node } from './node'
-import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode, ViewportFuncs } from './zoom'
-import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
+import type { CSSProperties, Component, VNode } from 'vue'
+import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { ConnectionLineType, ConnectionMode } from './connection'
+import type { KeyCode, PanOnScrollMode, ViewportFuncs } from './zoom'
+import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
 export type ElementData = any
 
@@ -77,7 +77,7 @@ export interface SelectionRect extends Rect {
   draw: boolean
 }
 
-export type FlowExportObject = {
+export interface FlowExportObject {
   nodes: GraphNode[]
   edges: GraphEdge[]
   position: [number, number]
@@ -99,9 +99,9 @@ export interface FlowProps {
   nodes?: Node[]
   edges?: Edge[]
   /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
-  edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & { [key: string]: EdgeComponent }
+  edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & Record<string, EdgeComponent>
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
-  nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & { [key: string]: NodeComponent }
+  nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & Record<string, NodeComponent>
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties | null
diff --git a/package/src/types/handle.ts b/package/src/types/handle.ts
index 313d6011..48f374ee 100644
--- a/package/src/types/handle.ts
+++ b/package/src/types/handle.ts
@@ -1,7 +1,7 @@
-import { Dimensions, Position, XYPosition } from './flow'
-import { Connection } from './connection'
-import { GraphEdge } from './edge'
-import { GraphNode } from './node'
+import type { Dimensions, Position, XYPosition } from './flow'
+import type { Connection } from './connection'
+import type { GraphEdge } from './edge'
+import type { GraphNode } from './node'
 
 export type HandleType = 'source' | 'target'
 
diff --git a/package/src/types/hooks.ts b/package/src/types/hooks.ts
index b57c9f4d..adbf3fbc 100644
--- a/package/src/types/hooks.ts
+++ b/package/src/types/hooks.ts
@@ -1,12 +1,12 @@
-import { EventHook, EventHookOn, EventHookTrigger } from '@vueuse/core'
-import { MouseTouchEvent } from '@braks/revue-draggable'
-import { D3ZoomEvent } from 'd3-zoom'
-import { FlowInstance } from './flow'
-import { GraphEdge } from './edge'
-import { GraphNode } from './node'
-import { Connection, OnConnectStartParams } from './connection'
-import { FlowTransform } from './zoom'
-import { EdgeChange, NodeChange } from './changes'
+import type { EventHook, EventHookOn, EventHookTrigger } from '@vueuse/core'
+import type { MouseTouchEvent } from '@braks/revue-draggable'
+import type { D3ZoomEvent } from 'd3-zoom'
+import type { FlowInstance } from './flow'
+import type { GraphEdge } from './edge'
+import type { GraphNode } from './node'
+import type { Connection, OnConnectStartParams } from './connection'
+import type { FlowTransform } from './zoom'
+import type { EdgeChange, NodeChange } from './changes'
 
 export interface FlowEvents {
   nodesChange: NodeChange[]
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 0751baf9..ec99f633 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -1,12 +1,12 @@
-import { Component, VNode } from 'vue'
-import { XYPosition, Position, SnapGrid, BaseElement, XYZPosition, Dimensions, ElementData } from './flow'
-import { DefaultNodeTypes, NodeComponent } from './components'
-import { HandleElement, ValidConnectionFunc } from './handle'
+import type { Component, VNode } from 'vue'
+import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow'
+import type { DefaultNodeTypes, NodeComponent } from './components'
+import type { HandleElement, ValidConnectionFunc } from './handle'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] **/
 export type CoordinateExtent = [[number, number], [number, number]]
 
-export type NodeHandleBounds = {
+export interface NodeHandleBounds {
   source?: HandleElement[]
   target?: HandleElement[]
 }
diff --git a/package/src/types/store.ts b/package/src/types/store.ts
index e6ddb7f8..b40372fb 100644
--- a/package/src/types/store.ts
+++ b/package/src/types/store.ts
@@ -1,21 +1,35 @@
-import { ComputedRef, CSSProperties, ToRefs } from 'vue'
-import { Dimensions, ElementData, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, XYPosition } from './flow'
-import { EdgeComponent, NodeComponent, DefaultNodeTypes, DefaultEdgeTypes } from './components'
-import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
-import { GraphNode, CoordinateExtent, Node } from './node'
-import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
-import { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
-import { NodeChange, EdgeChange } from './changes'
-import { StartHandle, HandleType } from './handle'
+import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
+import type {
+  Dimensions,
+  ElementData,
+  Elements,
+  FlowElements,
+  FlowInstance,
+  FlowOptions,
+  Rect,
+  SnapGrid,
+  XYPosition,
+} from './flow'
+import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
+import type { Connection, ConnectionLineType, ConnectionMode } from './connection'
+import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
+import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
+import type { EdgeChange, NodeChange } from './changes'
+import type { HandleType, StartHandle } from './handle'
 
-export type UpdateNodeDimensionsParams = {
+export interface UpdateNodeDimensionsParams {
   id: string
   nodeElement: HTMLDivElement
   forceUpdate?: boolean
 }
 
-export type UpdateNodePositionsParams = { id?: string; diff?: XYPosition; dragging?: boolean }
+export interface UpdateNodePositionsParams {
+  id?: string
+  diff?: XYPosition
+  dragging?: boolean
+}
 
 export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** Event hooks, you can manipulate the triggers at your own peril */
diff --git a/package/src/types/zoom.ts b/package/src/types/zoom.ts
index 0ee675d9..180bba90 100644
--- a/package/src/types/zoom.ts
+++ b/package/src/types/zoom.ts
@@ -1,12 +1,16 @@
-import { Selection, ZoomBehavior } from 'd3'
-import { Rect, XYPosition } from './flow'
+import type { Selection, ZoomBehavior } from 'd3'
+import type { Rect, XYPosition } from './flow'
 
 export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
 export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
 export type D3ZoomHandler = (this: HTMLDivElement, event: any, d: unknown) => void
 
 /** Transform x, y, z */
-export type Viewport = { x: number; y: number; zoom: number }
+export interface Viewport {
+  x: number
+  y: number
+  zoom: number
+}
 
 export type KeyCode = number | string
 
@@ -16,7 +20,7 @@ export enum PanOnScrollMode {
   Horizontal = 'horizontal',
 }
 
-export type ViewportFuncsOptions = {
+export interface ViewportFuncsOptions {
   duration?: number
 }
 
@@ -32,7 +36,7 @@ export type FitViewParams = {
   nodes?: string[]
 } & ViewportFuncsOptions
 
-export type FlowTransform = {
+export interface FlowTransform {
   x: number
   y: number
   zoom: number
diff --git a/package/src/utils/changes.ts b/package/src/utils/changes.ts
index ccb656e0..e82d7fb5 100644
--- a/package/src/utils/changes.ts
+++ b/package/src/utils/changes.ts
@@ -1,23 +1,23 @@
 import { clampPosition, isGraphEdge, isGraphNode } from './graph'
-import {
+import type {
+  CoordinateExtent,
+  Edge,
   EdgeChange,
   EdgeSelectionChange,
   ElementChange,
-  FlowElements,
-  GraphNode,
-  NodeChange,
-  NodeSelectionChange,
-  NodePositionChange,
-  Getters,
-  CoordinateExtent,
-  XYPosition,
-  GraphEdge,
-  Node,
   FlowElement,
-  Edge,
+  FlowElements,
+  Getters,
+  GraphEdge,
+  GraphNode,
+  Node,
+  NodeChange,
+  NodePositionChange,
+  NodeSelectionChange,
+  XYPosition,
 } from '~/types'
 
-type CreatePositionChangeParams = {
+interface CreatePositionChangeParams {
   node: GraphNode
   nodeExtent: CoordinateExtent
   diff?: XYPosition
diff --git a/package/src/utils/edge.ts b/package/src/utils/edge.ts
index 684f4dc4..e9998b1c 100644
--- a/package/src/utils/edge.ts
+++ b/package/src/utils/edge.ts
@@ -1,5 +1,6 @@
 import { rectToBox } from './graph'
-import { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Position, Rect, Viewport, XYPosition } from '~/types'
+import type { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Rect, Viewport, XYPosition } from '~/types'
+import { Position } from '~/types'
 
 export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
   const x = (handle?.x ?? 0) + rect.x
diff --git a/package/src/utils/graph.ts b/package/src/utils/graph.ts
index e8bfc855..5d608a9b 100644
--- a/package/src/utils/graph.ts
+++ b/package/src/utils/graph.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   Box,
   Connection,
   CoordinateExtent,
diff --git a/package/src/utils/node.ts b/package/src/utils/node.ts
index 1ff6053f..2c0b5783 100644
--- a/package/src/utils/node.ts
+++ b/package/src/utils/node.ts
@@ -1,5 +1,5 @@
 import { getDimensions } from './graph'
-import { HandleElement, Position } from '~/types'
+import type { HandleElement, Position } from '~/types'
 
 export const getHandleBoundsByHandleType = (
   selector: string,
diff --git a/package/tsconfig.build.json b/package/tsconfig.build.json
index e35205c0..ddd289fe 100644
--- a/package/tsconfig.build.json
+++ b/package/tsconfig.build.json
@@ -4,10 +4,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "declaration": true,
     "declarationDir": "./dist",
     "strict": true,
@@ -19,25 +16,15 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ],
+    "types": ["vite/client", "vue/macros"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/package/tsconfig.docs.json b/package/tsconfig.docs.json
index d619b272..e8dcb962 100644
--- a/package/tsconfig.docs.json
+++ b/package/tsconfig.docs.json
@@ -4,10 +4,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
     "incremental": false,
@@ -17,20 +14,14 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-    ],
+    "types": ["vite/client"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
diff --git a/package/tsconfig.json b/package/tsconfig.json
index 58793bee..a1b6ebe7 100644
--- a/package/tsconfig.json
+++ b/package/tsconfig.json
@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
     "incremental": false,
@@ -18,26 +15,16 @@
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ],
+    "types": ["vite/client", "vue/macros"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": [
-    "./src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }