fix: add compatConfig to all components

packages/core/src/components/A11y/A11yDescriptions.vue

@@ -17,6 +17,12 @@ const ariaLiveStyle: CSSProperties = {
 }
 </script>
 
+<script lang="ts">
+export default {
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
     Press enter or space to select a node.

packages/core/src/components/ConnectionLine/ConnectionLine.vue

@@ -93,6 +93,7 @@ const dAttr = computed(() => {
 <script lang="ts">
 export default {
   name: 'ConnectionLine',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/BaseEdge.ts

@@ -71,5 +71,6 @@ BaseEdge.props = [
 ]
 
 BaseEdge.inheritAttrs = false
+BaseEdge.compatConfig = { MODE: 3 }
 
 export default BaseEdge

packages/core/src/components/Edges/BezierEdge.ts

@@ -42,5 +42,6 @@ BezierEdge.props = [
 ]
 
 BezierEdge.inheritAttrs = false
+BezierEdge.compatConfig = { MODE: 3 }
 
 export default BezierEdge

packages/core/src/components/Edges/EdgeAnchor.ts

@@ -46,5 +46,6 @@ const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX
 }
 
 EdgeAnchor.props = ['radius', 'centerX', 'centerY', 'position']
+EdgeAnchor.compatConfig = { MODE: 3 }
 
 export default EdgeAnchor

packages/core/src/components/Edges/EdgeLabelRenderer.vue

@@ -7,6 +7,7 @@ const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName(
 <script lang="ts">
 export default {
   name: 'EdgeLabelRenderer',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/EdgeText.vue

@@ -38,6 +38,7 @@ function getBox() {
 <script lang="ts">
 export default {
   name: 'EdgeText',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -14,6 +14,7 @@ interface Props {
 
 const EdgeWrapper = defineComponent({
   name: 'Edge',
+  compatConfig: { MODE: 3 },
   props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
   setup(props: Props) {
     const {

packages/core/src/components/Edges/SimpleBezierEdge.ts

@@ -41,5 +41,6 @@ SimpleBezierEdge.props = [
 ]
 
 SimpleBezierEdge.inheritAttrs = false
+SimpleBezierEdge.compatConfig = { MODE: 3 }
 
 export default SimpleBezierEdge

packages/core/src/components/Edges/SmoothStepEdge.ts

@@ -43,5 +43,6 @@ SmoothStepEdge.props = [
 ]
 
 SmoothStepEdge.inheritAttrs = false
+SmoothStepEdge.compatConfig = { MODE: 3 }
 
 export default SmoothStepEdge

packages/core/src/components/Edges/StepEdge.ts

@@ -25,5 +25,6 @@ StepEdge.props = [
 ]
 
 StepEdge.inheritAttrs = false
+StepEdge.compatConfig = { MODE: 3 }
 
 export default StepEdge

packages/core/src/components/Edges/StraightEdge.ts

@@ -31,5 +31,6 @@ StraightEdge.props = [
 ]
 
 StraightEdge.inheritAttrs = false
+StraightEdge.compatConfig = { MODE: 3 }
 
 export default StraightEdge

packages/core/src/components/Handle/Handle.vue

@@ -74,6 +74,7 @@ onMounted(() => {
 <script lang="ts">
 export default {
   name: 'Handle',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Nodes/DefaultNode.ts

@@ -20,5 +20,6 @@ const DefaultNode: FunctionalComponent<NodeProps> = function ({
 
 DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable']
 DefaultNode.inheritAttrs = false
+DefaultNode.compatConfig = { MODE: 3 }
 
 export default DefaultNode

packages/core/src/components/Nodes/InputNode.ts

@@ -17,5 +17,6 @@ const InputNode: FunctionalComponent<NodeProps> = function ({
 
 InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable']
 InputNode.inheritAttrs = false
+InputNode.compatConfig = { MODE: 3 }
 
 export default InputNode

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -242,6 +242,7 @@ function onKeyDown(event: KeyboardEvent) {
 export default {
   name: 'Node',
   inheritAttrs: false,
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Nodes/OutputNode.ts

@@ -17,5 +17,6 @@ const OutputNode: FunctionalComponent<NodeProps> = function ({
 
 OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable']
 OutputNode.inheritAttrs = false
+OutputNode.compatConfig = { MODE: 3 }
 
 export default OutputNode

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -55,6 +55,7 @@ function onKeyDown(event: KeyboardEvent) {
 <script lang="ts">
 export default {
   name: 'NodesSelection',
+  compatConfig: { MODE: 3 },
 }
 </script>
 

packages/core/src/components/Panel/Panel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PanelProps } from '../../types'
+import type { PanelProps } from '../../types/panel'
 
 const props = defineProps<PanelProps>()
 
@@ -8,6 +8,13 @@ const { userSelectionActive } = useVueFlow()
 const positionClasses = computed(() => `${props.position}`.split('-'))
 </script>
 
+<script lang="ts">
+export default {
+  name: 'Panel',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div class="vue-flow__panel" :class="positionClasses" :style="{ pointerEvents: userSelectionActive ? 'none' : 'all' }">
     <slot />

packages/core/src/components/UserSelection/UserSelection.vue

@@ -2,6 +2,13 @@
 const { userSelectionRect } = useVueFlow()
 </script>
 
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div
     class="vue-flow__selection vue-flow__container"