@xyflow/vue 2.0.0-next.4 → 2.0.0-next.6

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createPropsRestProxy, createTextVNode, createVNode, defineComponent, effectScope, getCurrentInstance, h, inject, isMemoSame, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toRef, toRefs, toValue, unref, useAttrs, useId, useModel, useSlots, watch, watchEffect, withCtx } from "vue";
-import { ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, Position, Position as Position$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$2, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfBoxes, getBoundsOfRects, getBoundsOfRects as getBoundsOfRects$1, getConnectedEdges, getConnectedEdges as getConnectedEdges$1, getConnectionStatus, getDimensions, getEdgeId, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getMarkerId, getMarkerId as getMarkerId$1, getNodeDimensions, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getNodesInside as getNodesInside$1, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeBase as isEdgeBase$1, isEdgeVisible, isInternalNodeBase, isInternalNodeBase as isInternalNodeBase$1, isMacOs, isMacOs as isMacOs$1, isMouseEvent, isNodeBase, isNodeBase as isNodeBase$1, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, oppositePosition, panBy, pointToRendererPoint, pointToRendererPoint as pointToRendererPoint$1, rendererPointToPoint, rendererPointToPoint as rendererPointToPoint$1, snapPosition, updateAbsolutePositions } from "@xyflow/system";
+import { ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, Position, Position as Position$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$2, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, addEdge as addEdge$1, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createDevWarn, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfBoxes, getBoundsOfRects, getBoundsOfRects as getBoundsOfRects$1, getConnectedEdges, getConnectedEdges as getConnectedEdges$1, getConnectionStatus, getDimensions, getEdgeId, getEdgeToolbarTransform, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getMarkerId, getMarkerId as getMarkerId$1, getNodeDimensions, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getNodesInside as getNodesInside$1, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeBase as isEdgeBase$1, isEdgeVisible, isInternalNodeBase, isInternalNodeBase as isInternalNodeBase$1, isMacOs, isMacOs as isMacOs$1, isMouseEvent, isNodeBase, isNodeBase as isNodeBase$1, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, oppositePosition, panBy, pointToRendererPoint, pointToRendererPoint as pointToRendererPoint$1, reconnectEdge as reconnectEdge$1, rendererPointToPoint, rendererPointToPoint as rendererPointToPoint$1, snapPosition, updateAbsolutePositions } from "@xyflow/system";
 import { onKeyStroke, until, useEventListener } from "@vueuse/core";
 //#region src/context/index.ts
 /** the curated instance (`useVueFlow()`) */
@@ -114,7 +114,7 @@ var export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/Background/Background.vue
-const _sfc_main$24 = /* @__PURE__ */ defineComponent({
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 	name: "Background",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -199,7 +199,7 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$14 = { class: "vue-flow__background vue-flow__container" };
+const _hoisted_1$15 = { class: "vue-flow__background vue-flow__container" };
 const _hoisted_2$4 = [
 	"id",
 	"x",
@@ -213,8 +213,8 @@ const _hoisted_3$3 = [
 	"y",
 	"fill"
 ];
-function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$14, [
+function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$15, [
 		renderSlot(_ctx.$slots, "pattern-container", { id: $setup.patternId }, () => [createElementVNode("pattern", {
 			id: $setup.patternId,
 			x: $setup.viewport.x % $setup.background.scaledGap[0],
@@ -247,10 +247,10 @@ function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
 		renderSlot(_ctx.$slots, "default", { id: $setup.patternId })
 	]);
 }
-var Background_default = /* @__PURE__ */ export_helper_default(_sfc_main$24, [["render", _sfc_render$24], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Background/Background.vue"]]);
+var Background_default = /* @__PURE__ */ export_helper_default(_sfc_main$25, [["render", _sfc_render$25], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Background/Background.vue"]]);
 //#endregion
 //#region src/components/Controls/ControlButton.vue
-const _sfc_main$23 = /* @__PURE__ */ defineComponent({
+const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 	name: "ControlButton",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -274,12 +274,12 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$13 = [
+const _hoisted_1$14 = [
 	"disabled",
 	"aria-label",
 	"title"
 ];
-function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("button", {
 		type: "button",
 		class: "vue-flow__controls-button",
@@ -287,9 +287,9 @@ function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
 		"aria-label": $props.label,
 		title: $props.label,
 		onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-	}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$13);
+	}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$14);
 }
-var ControlButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$23, [["render", _sfc_render$23], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/ControlButton.vue"]]);
+var ControlButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$24, [["render", _sfc_render$24], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/ControlButton.vue"]]);
 //#endregion
 //#region src/composables/storeToRefs.ts
 /**
@@ -318,7 +318,7 @@ function storeToRefs(store) {
 * @param params
 */
 function useDrag(params) {
-	const { panBy, getInternalNode, removeSelectedNodes, removeSelectedEdges, updateNodePositions, getNodes, getEdges } = useVueFlow();
+	const { panBy, getInternalNode, addSelectedNodes, removeSelectedNodes, removeSelectedEdges, updateNodePositions, getNodes, getEdges } = useVueFlow();
 	const store = useStore();
 	const { nodeLookup } = store;
 	const { onStart, onDrag, onStop, onClick, el, disabled, id, selectable, dragHandle } = params;
@@ -390,6 +390,13 @@ function useDrag(params) {
 				},
 				autoPanSpeed: store.autoPanSpeed
 			}),
+			onNodeMouseDown: (nodeId) => {
+				const node = getInternalNode(nodeId);
+				if (!node) return;
+				store.nodesSelectionActive = false;
+				if (!node.selected) addSelectedNodes([node]);
+				else if (store.multiSelectionActive) removeSelectedNodes([node]);
+			},
 			onDragStart: (event, _dragItems, node, nodes) => {
 				dragFired = true;
 				dragging.value = true;
@@ -1719,7 +1726,7 @@ function useWatchProps(models, props, handle) {
 }
 //#endregion
 //#region src/components/Panel/Panel.vue
-const _sfc_main$22 = /* @__PURE__ */ defineComponent({
+const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 	name: "Panel",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -1749,15 +1756,15 @@ const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$12 = ["aria-label"];
-function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$13 = ["aria-label"];
+function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
 		class: normalizeClass(["vue-flow__panel", $setup.positionClasses]),
 		"aria-label": $props.label ?? void 0,
 		style: normalizeStyle({ pointerEvents: $setup.userSelectionActive ? "none" : "all" })
-	}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1$12);
+	}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1$13);
 }
-var Panel_default = /* @__PURE__ */ export_helper_default(_sfc_main$22, [["render", _sfc_render$22], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Panel/Panel.vue"]]);
+var Panel_default = /* @__PURE__ */ export_helper_default(_sfc_main$23, [["render", _sfc_render$23], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Panel/Panel.vue"]]);
 //#endregion
 //#region src/components/Controls/icons.ts
 function icon(viewBox, d) {
@@ -1774,7 +1781,7 @@ const Lock = icon("0 0 25 32", "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 1
 const Unlock = icon("0 0 25 32", "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z");
 //#endregion
 //#region src/components/Controls/Controls.vue
-const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 	name: "Controls",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -1884,7 +1891,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createBlock($setup["Panel"], {
 		class: "vue-flow__controls",
 		position: $props.position,
@@ -1931,10 +1938,10 @@ function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 3
 	}, 8, ["position", "label"]);
 }
-var Controls_default = /* @__PURE__ */ export_helper_default(_sfc_main$21, [["render", _sfc_render$21], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/Controls.vue"]]);
+var Controls_default = /* @__PURE__ */ export_helper_default(_sfc_main$22, [["render", _sfc_render$22], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/Controls.vue"]]);
 //#endregion
 //#region src/components/Edges/EdgeText.vue
-const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 	name: "EdgeText",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -2014,7 +2021,7 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$11 = ["transform", "visibility"];
+const _hoisted_1$12 = ["transform", "visibility"];
 const _hoisted_2$3 = [
 	"width",
 	"height",
@@ -2024,7 +2031,7 @@ const _hoisted_2$3 = [
 	"ry"
 ];
 const _hoisted_3$2 = ["y"];
-function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("g", {
 		transform: $setup.transform,
 		visibility: $setup.box.width ? "visible" : "hidden",
@@ -2045,12 +2052,12 @@ function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
 		y: $setup.box.height / 2,
 		dy: "0.3em",
 		style: $props.labelStyle
-	}), [renderSlot(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? (openBlock(), createBlock(resolveDynamicComponent($props.label), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString($props.label), 1)], 64))])], 16, _hoisted_3$2)], 8, _hoisted_1$11);
+	}), [renderSlot(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? (openBlock(), createBlock(resolveDynamicComponent($props.label), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString($props.label), 1)], 64))])], 16, _hoisted_3$2)], 8, _hoisted_1$12);
 }
-var EdgeText_default = /* @__PURE__ */ export_helper_default(_sfc_main$20, [["render", _sfc_render$20], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeText.vue"]]);
+var EdgeText_default = /* @__PURE__ */ export_helper_default(_sfc_main$21, [["render", _sfc_render$21], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeText.vue"]]);
 //#endregion
 //#region src/components/Edges/BaseEdge.vue
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 	name: "BaseEdge",
 	inheritAttrs: false,
 	compatConfig: { MODE: 3 },
@@ -2133,14 +2140,14 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$10 = [
+const _hoisted_1$11 = [
 	"id",
 	"d",
 	"marker-end",
 	"marker-start"
 ];
 const _hoisted_2$2 = ["d", "stroke-width"];
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock(Fragment, null, [
 		createElementVNode("path", mergeProps($setup.attrs, {
 			id: $props.id,
@@ -2149,7 +2156,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
 			class: "vue-flow__edge-path",
 			"marker-end": $props.markerEnd,
 			"marker-start": $props.markerStart
-		}), null, 16, _hoisted_1$10),
+		}), null, 16, _hoisted_1$11),
 		$props.interactionWidth ? (openBlock(), createElementBlock("path", {
 			key: 0,
 			ref: "interactionEl",
@@ -2182,7 +2189,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
 		])) : createCommentVNode("v-if", true)
 	], 64);
 }
-var BaseEdge_default = /* @__PURE__ */ export_helper_default(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/BaseEdge.vue"]]);
+var BaseEdge_default = /* @__PURE__ */ export_helper_default(_sfc_main$20, [["render", _sfc_render$20], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/BaseEdge.vue"]]);
 //#endregion
 //#region src/components/Edges/utils.ts
 /**
@@ -2250,7 +2257,7 @@ const BezierEdge = defineComponent({
 });
 //#endregion
 //#region src/components/Edges/EdgeLabelRenderer.vue
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 	name: "EdgeLabelRenderer",
 	compatConfig: { MODE: 3 },
 	setup(__props, { expose: __expose }) {
@@ -2267,17 +2274,17 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$9 = {
+const _hoisted_1$10 = {
 	height: "0",
 	width: "0"
 };
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("svg", null, [(openBlock(), createElementBlock("foreignObject", _hoisted_1$9, [(openBlock(), createBlock(Teleport, {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("svg", null, [(openBlock(), createElementBlock("foreignObject", _hoisted_1$10, [(openBlock(), createBlock(Teleport, {
 		to: $setup.teleportTarget,
 		disabled: !$setup.teleportTarget
 	}, [renderSlot(_ctx.$slots, "default")], 8, ["to", "disabled"]))]))]);
 }
-var EdgeLabelRenderer_default = /* @__PURE__ */ export_helper_default(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeLabelRenderer.vue"]]);
+var EdgeLabelRenderer_default = /* @__PURE__ */ export_helper_default(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeLabelRenderer.vue"]]);
 //#endregion
 //#region src/components/Edges/SimpleBezierEdge.ts
 function getControl({ pos, x1, y1, x2, y2 }) {
@@ -2486,7 +2493,7 @@ const StraightEdge = defineComponent({
 });
 //#endregion
 //#region src/components/Handle/Handle.vue
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 	name: "Handle",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -2658,8 +2665,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1$8 = ["aria-label"];
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$9 = ["aria-label"];
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", mergeProps({ ref: "handle" }, $setup.handleDataIds, {
 		"aria-label": $setup.store.ariaLabelConfig["handle.ariaLabel"],
 		class: ["vue-flow__handle", [
@@ -2673,9 +2680,84 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
 		onMousedown: $setup.onPointerDown,
 		onTouchstartPassive: $setup.onPointerDown,
 		onClick: $setup.onClick
-	}), [renderSlot(_ctx.$slots, "default", { id: $props.id })], 16, _hoisted_1$8);
+	}), [renderSlot(_ctx.$slots, "default", { id: $props.id })], 16, _hoisted_1$9);
 }
-var Handle_default = /* @__PURE__ */ export_helper_default(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Handle/Handle.vue"]]);
+var Handle_default = /* @__PURE__ */ export_helper_default(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Handle/Handle.vue"]]);
+//#endregion
+//#region src/components/EdgeToolbar/EdgeToolbar.vue
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+	name: "EdgeToolbar",
+	compatConfig: { MODE: 3 },
+	inheritAttrs: false,
+	props: {
+		edgeId: {
+			type: String,
+			required: true
+		},
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		isVisible: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		alignX: {
+			type: String,
+			required: false,
+			default: "center"
+		},
+		alignY: {
+			type: String,
+			required: false,
+			default: "center"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const { viewport } = useVueFlow();
+		const { edgeLookup } = useStore();
+		const edge = computed(() => edgeLookup.get(props.edgeId));
+		const __returned__ = {
+			props,
+			viewport,
+			edgeLookup,
+			edge,
+			isActive: computed(() => typeof props.isVisible === "boolean" ? props.isVisible : edge.value?.selected),
+			wrapperStyle: computed(() => ({
+				position: "absolute",
+				transform: getEdgeToolbarTransform(props.x, props.y, viewport.value.zoom, props.alignX, props.alignY),
+				zIndex: (edge.value?.zIndex ?? 0) + 1,
+				pointerEvents: "all",
+				transformOrigin: "0 0"
+			})),
+			EdgeLabelRenderer: EdgeLabelRenderer_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$8 = ["data-id"];
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+	return $setup.isActive ? (openBlock(), createBlock($setup["EdgeLabelRenderer"], { key: 0 }, {
+		default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, {
+			style: $setup.wrapperStyle,
+			"data-id": $setup.edge?.id ?? "",
+			class: "vue-flow__edge-toolbar"
+		}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$8)]),
+		_: 3
+	})) : createCommentVNode("v-if", true);
+}
+var EdgeToolbar_default = /* @__PURE__ */ export_helper_default(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/EdgeToolbar/EdgeToolbar.vue"]]);
 //#endregion
 //#region src/components/MiniMap/types.ts
 const Slots = Symbol("MiniMapSlots");
@@ -3957,70 +4039,6 @@ function useNodesInitialized(options = { includeHiddenNodes: false }) {
 	return computed(() => areNodesInitialized(nodeLookup, options.includeHiddenNodes));
 }
 //#endregion
-//#region src/components/A11y/A11yDescriptions.vue
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
-	name: "A11yDescriptions",
-	compatConfig: { MODE: 3 },
-	setup(__props, { expose: __expose }) {
-		__expose();
-		const { id } = useVueFlow();
-		const { disableKeyboardA11y, ariaLiveMessage, ariaLabelConfig } = storeToRefs(useStore());
-		const __returned__ = {
-			id,
-			disableKeyboardA11y,
-			ariaLiveMessage,
-			ariaLabelConfig,
-			get ARIA_EDGE_DESC_KEY() {
-				return ARIA_EDGE_DESC_KEY;
-			},
-			get ARIA_LIVE_MESSAGE() {
-				return ARIA_LIVE_MESSAGE;
-			},
-			get ARIA_NODE_DESC_KEY() {
-				return ARIA_NODE_DESC_KEY;
-			}
-		};
-		Object.defineProperty(__returned__, "__isScriptSetup", {
-			enumerable: false,
-			value: true
-		});
-		return __returned__;
-	}
-});
-const _hoisted_1$5 = ["id"];
-const _hoisted_2 = ["id"];
-const _hoisted_3 = ["id"];
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock(Fragment, null, [
-		createElementVNode("div", {
-			id: `${$setup.ARIA_NODE_DESC_KEY}-${$setup.id}`,
-			style: { "display": "none" }
-		}, toDisplayString($setup.disableKeyboardA11y ? $setup.ariaLabelConfig["node.a11yDescription.default"] : $setup.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]), 9, _hoisted_1$5),
-		createElementVNode("div", {
-			id: `${$setup.ARIA_EDGE_DESC_KEY}-${$setup.id}`,
-			style: { "display": "none" }
-		}, toDisplayString($setup.ariaLabelConfig["edge.a11yDescription.default"]), 9, _hoisted_2),
-		!$setup.disableKeyboardA11y ? (openBlock(), createElementBlock("div", {
-			key: 0,
-			id: `${$setup.ARIA_LIVE_MESSAGE}-${$setup.id}`,
-			"aria-live": "assertive",
-			"aria-atomic": "true",
-			style: {
-				"position": "absolute",
-				"width": "1px",
-				"height": "1px",
-				"margin": "-1px",
-				"border": "0",
-				"padding": "0",
-				"overflow": "hidden",
-				"clip": "rect(0px, 0px, 0px, 0px)",
-				"clip-path": "inset(100%)"
-			}
-		}, toDisplayString($setup.ariaLiveMessage), 9, _hoisted_3)) : createCommentVNode("v-if", true)
-	], 64);
-}
-var A11yDescriptions_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/A11y/A11yDescriptions.vue"]]);
-//#endregion
 //#region src/store/hooks.ts
 function createHooks() {
 	return {
@@ -5074,6 +5092,101 @@ function useCreateVueFlow(options, signals) {
 	return handle;
 }
 //#endregion
+//#region src/composables/setupVueFlow.ts
+/**
+* Create a VueFlow store, `provide` it to the current component's subtree, and return the instance — the
+* same API as {@link useVueFlow}. The Vue-native alternative to wrapping in `<VueFlowProvider>`: call it
+* in the component that renders `<VueFlow>` and you get the store's actions/getters/hooks in that same
+* `setup`, while the rendered `<VueFlow>` (and any `useVueFlow()`/`useStore()` below it) reuse the provided
+* store instead of creating their own.
+*
+* Must run in a component `setup` (it calls `provide`). Delegates to the same store factory as
+* `<VueFlowProvider>`, so one call scopes one store — host a single `<VueFlow>` per setup.
+*
+* @public
+* @param options - initial flow options (`id`, initial nodes/edges, defaults, …)
+* @returns the VueFlow instance (same shape `useVueFlow()` returns)
+* @example
+* ```vue
+* <script setup lang="ts">
+* import { setupVueFlow, VueFlow } from '@xyflow/vue'
+*
+* const { addEdges, fitView } = setupVueFlow()
+* <\/script>
+*
+* <template>
+*   <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
+* </template>
+* ```
+*/
+function setupVueFlow(options) {
+	return useCreateVueFlow(options).instance;
+}
+//#endregion
+//#region src/components/A11y/A11yDescriptions.vue
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+	name: "A11yDescriptions",
+	compatConfig: { MODE: 3 },
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const { id } = useVueFlow();
+		const { disableKeyboardA11y, ariaLiveMessage, ariaLabelConfig } = storeToRefs(useStore());
+		const __returned__ = {
+			id,
+			disableKeyboardA11y,
+			ariaLiveMessage,
+			ariaLabelConfig,
+			get ARIA_EDGE_DESC_KEY() {
+				return ARIA_EDGE_DESC_KEY;
+			},
+			get ARIA_LIVE_MESSAGE() {
+				return ARIA_LIVE_MESSAGE;
+			},
+			get ARIA_NODE_DESC_KEY() {
+				return ARIA_NODE_DESC_KEY;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$5 = ["id"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["id"];
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(Fragment, null, [
+		createElementVNode("div", {
+			id: `${$setup.ARIA_NODE_DESC_KEY}-${$setup.id}`,
+			style: { "display": "none" }
+		}, toDisplayString($setup.disableKeyboardA11y ? $setup.ariaLabelConfig["node.a11yDescription.default"] : $setup.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]), 9, _hoisted_1$5),
+		createElementVNode("div", {
+			id: `${$setup.ARIA_EDGE_DESC_KEY}-${$setup.id}`,
+			style: { "display": "none" }
+		}, toDisplayString($setup.ariaLabelConfig["edge.a11yDescription.default"]), 9, _hoisted_2),
+		!$setup.disableKeyboardA11y ? (openBlock(), createElementBlock("div", {
+			key: 0,
+			id: `${$setup.ARIA_LIVE_MESSAGE}-${$setup.id}`,
+			"aria-live": "assertive",
+			"aria-atomic": "true",
+			style: {
+				"position": "absolute",
+				"width": "1px",
+				"height": "1px",
+				"margin": "-1px",
+				"border": "0",
+				"padding": "0",
+				"overflow": "hidden",
+				"clip": "rect(0px, 0px, 0px, 0px)",
+				"clip-path": "inset(100%)"
+			}
+		}, toDisplayString($setup.ariaLiveMessage), 9, _hoisted_3)) : createCommentVNode("v-if", true)
+	], 64);
+}
+var A11yDescriptions_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/A11y/A11yDescriptions.vue"]]);
+//#endregion
 //#region src/composables/useOnInitHandler.ts
 /**
 * Composable that handles the initialization of the viewport.
@@ -7474,6 +7587,37 @@ function connectionLineProps() {
 	};
 }
 //#endregion
-export { Background_default as Background, BaseEdge_default as BaseEdge, BezierEdge, ConnectionLineType, ConnectionMode, ControlButton_default as ControlButton, Controls_default as Controls, EdgeLabelRenderer_default as EdgeLabelRenderer, EdgeText_default as EdgeText, ErrorCode, Handle_default as Handle, MarkerType, MiniMap_default as MiniMap, MiniMapNode_default as MiniMapNode, NodeId as NodeIdInjection, ResizeControl_default as NodeResizeControl, NodeResizer_default as NodeResizer, NodeToolbar_default as NodeToolbar, PanOnScrollMode, Panel_default as Panel, Position, ResizeControlVariant, SelectionMode, SimpleBezierEdge, Slots, SmoothStepEdge, StepEdge, StraightEdge, VueFlow_default as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowProvider_default as VueFlowProvider, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, connectionLineProps, defaultEdgeTypes, defaultNodeTypes, edgeProps, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, nodeProps, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
+//#region src/utils/edges.ts
+const defaultOnError = createDevWarn("Vue Flow", "https://vueflow.dev/");
+/**
+* Adds a `Connection` (or a full `Edge`) to an edges array and returns a new array — generating the
+* edge id and skipping the add when an equivalent connection already exists. The pure helper to use
+* in an `@connect` handler against a `v-model:edges` array, e.g.
+* `edges.value = addEdge(connection, edges.value)`, with no store/instance access.
+*
+* Mirrors xyflow/react's + xyflow/svelte's `addEdge`.
+*/
+function addEdge(edgeParams, edges, options = {}) {
+	return addEdge$1(edgeParams, edges, {
+		...options,
+		onError: options.onError ?? defaultOnError
+	});
+}
+/**
+* Reconnects an existing edge to a new `Connection`, returning a new edges array. The pure,
+* controlled counterpart to the store action `useVueFlow().reconnectEdge` — use it in an
+* `@reconnect` handler against a `v-model:edges` array, e.g.
+* `edges.value = reconnectEdge(oldEdge, newConnection, edges.value)`.
+*
+* Mirrors xyflow/react's `reconnectEdge`.
+*/
+function reconnectEdge(oldEdge, newConnection, edges, options = { shouldReplaceId: true }) {
+	return reconnectEdge$1(oldEdge, newConnection, edges, {
+		...options,
+		onError: options.onError ?? defaultOnError
+	});
+}
+//#endregion
+export { Background_default as Background, BaseEdge_default as BaseEdge, BezierEdge, ConnectionLineType, ConnectionMode, ControlButton_default as ControlButton, Controls_default as Controls, EdgeLabelRenderer_default as EdgeLabelRenderer, EdgeText_default as EdgeText, EdgeToolbar_default as EdgeToolbar, ErrorCode, Handle_default as Handle, MarkerType, MiniMap_default as MiniMap, MiniMapNode_default as MiniMapNode, NodeId as NodeIdInjection, ResizeControl_default as NodeResizeControl, NodeResizer_default as NodeResizer, NodeToolbar_default as NodeToolbar, PanOnScrollMode, Panel_default as Panel, Position, ResizeControlVariant, SelectionMode, SimpleBezierEdge, Slots, SmoothStepEdge, StepEdge, StraightEdge, VueFlow_default as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowProvider_default as VueFlowProvider, addEdge, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, connectionLineProps, defaultEdgeTypes, defaultNodeTypes, edgeProps, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, nodeProps, pointToRendererPoint, reconnectEdge, rendererPointToPoint, setupVueFlow, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
 
 //# sourceMappingURL=index.mjs.map