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

package/dist/index.js

@@ -115,7 +115,7 @@ var export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/Background/Background.vue
-const _sfc_main$24 = /* @__PURE__ */ (0, vue.defineComponent)({
+const _sfc_main$25 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Background",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -200,7 +200,7 @@ const _sfc_main$24 = /* @__PURE__ */ (0, vue.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",
@@ -214,8 +214,8 @@ const _hoisted_3$3 = [
 	"y",
 	"fill"
 ];
-function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$14, [
+function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
+	return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$15, [
 		(0, vue.renderSlot)(_ctx.$slots, "pattern-container", { id: $setup.patternId }, () => [(0, vue.createElementVNode)("pattern", {
 			id: $setup.patternId,
 			x: $setup.viewport.x % $setup.background.scaledGap[0],
@@ -248,10 +248,10 @@ function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
 		(0, vue.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__ */ (0, vue.defineComponent)({
+const _sfc_main$24 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ControlButton",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -275,12 +275,12 @@ const _sfc_main$23 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 		type: "button",
 		class: "vue-flow__controls-button",
@@ -288,9 +288,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))
-	}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_1$13);
+	}, [(0, vue.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
 /**
@@ -319,7 +319,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;
@@ -391,6 +391,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;
@@ -1720,7 +1727,7 @@ function useWatchProps(models, props, handle) {
 }
 //#endregion
 //#region src/components/Panel/Panel.vue
-const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
+const _sfc_main$23 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Panel",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -1750,15 +1757,15 @@ const _sfc_main$22 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 		class: (0, vue.normalizeClass)(["vue-flow__panel", $setup.positionClasses]),
 		"aria-label": $props.label ?? void 0,
 		style: (0, vue.normalizeStyle)({ pointerEvents: $setup.userSelectionActive ? "none" : "all" })
-	}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$12);
+	}, [(0, vue.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) {
@@ -1775,7 +1782,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__ */ (0, vue.defineComponent)({
+const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Controls",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -1885,7 +1892,7 @@ const _sfc_main$21 = /* @__PURE__ */ (0, vue.defineComponent)({
 		return __returned__;
 	}
 });
-function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createBlock)($setup["Panel"], {
 		class: "vue-flow__controls",
 		position: $props.position,
@@ -1932,10 +1939,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__ */ (0, vue.defineComponent)({
+const _sfc_main$21 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "EdgeText",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -2015,7 +2022,7 @@ const _sfc_main$20 = /* @__PURE__ */ (0, vue.defineComponent)({
 		return __returned__;
 	}
 });
-const _hoisted_1$11 = ["transform", "visibility"];
+const _hoisted_1$12 = ["transform", "visibility"];
 const _hoisted_2$3 = [
 	"width",
 	"height",
@@ -2025,7 +2032,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 (0, vue.openBlock)(), (0, vue.createElementBlock)("g", {
 		transform: $setup.transform,
 		visibility: $setup.box.width ? "visible" : "hidden",
@@ -2046,12 +2053,12 @@ function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
 		y: $setup.box.height / 2,
 		dy: "0.3em",
 		style: $props.labelStyle
-	}), [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.label), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)($props.label), 1)], 64))])], 16, _hoisted_3$2)], 8, _hoisted_1$11);
+	}), [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.label), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.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__ */ (0, vue.defineComponent)({
+const _sfc_main$20 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "BaseEdge",
 	inheritAttrs: false,
 	compatConfig: { MODE: 3 },
@@ -2134,14 +2141,14 @@ const _sfc_main$19 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
 		(0, vue.createElementVNode)("path", (0, vue.mergeProps)($setup.attrs, {
 			id: $props.id,
@@ -2150,7 +2157,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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", {
 			key: 0,
 			ref: "interactionEl",
@@ -2183,7 +2190,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
 		])) : (0, vue.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
 /**
@@ -2251,7 +2258,7 @@ const BezierEdge = (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Edges/EdgeLabelRenderer.vue
-const _sfc_main$18 = /* @__PURE__ */ (0, vue.defineComponent)({
+const _sfc_main$19 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "EdgeLabelRenderer",
 	compatConfig: { MODE: 3 },
 	setup(__props, { expose: __expose }) {
@@ -2268,17 +2275,17 @@ const _sfc_main$18 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", null, [((0, vue.openBlock)(), (0, vue.createElementBlock)("foreignObject", _hoisted_1$9, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+	return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", null, [((0, vue.openBlock)(), (0, vue.createElementBlock)("foreignObject", _hoisted_1$10, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 		to: $setup.teleportTarget,
 		disabled: !$setup.teleportTarget
 	}, [(0, vue.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 }) {
@@ -2487,7 +2494,7 @@ const StraightEdge = (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Handle/Handle.vue
-const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
+const _sfc_main$18 = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Handle",
 	compatConfig: { MODE: 3 },
 	props: {
@@ -2659,8 +2666,8 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ ref: "handle" }, $setup.handleDataIds, {
 		"aria-label": $setup.store.ariaLabelConfig["handle.ariaLabel"],
 		class: ["vue-flow__handle", [
@@ -2674,9 +2681,84 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
 		onMousedown: $setup.onPointerDown,
 		onTouchstartPassive: $setup.onPointerDown,
 		onClick: $setup.onClick
-	}), [(0, vue.renderSlot)(_ctx.$slots, "default", { id: $props.id })], 16, _hoisted_1$8);
+	}), [(0, vue.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__ */ (0, vue.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 = (0, vue.computed)(() => edgeLookup.get(props.edgeId));
+		const __returned__ = {
+			props,
+			viewport,
+			edgeLookup,
+			edge,
+			isActive: (0, vue.computed)(() => typeof props.isVisible === "boolean" ? props.isVisible : edge.value?.selected),
+			wrapperStyle: (0, vue.computed)(() => ({
+				position: "absolute",
+				transform: (0, _xyflow_system.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 ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["EdgeLabelRenderer"], { key: 0 }, {
+		default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)(_ctx.$attrs, {
+			style: $setup.wrapperStyle,
+			"data-id": $setup.edge?.id ?? "",
+			class: "vue-flow__edge-toolbar"
+		}), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16, _hoisted_1$8)]),
+		_: 3
+	})) : (0, vue.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");
@@ -3958,70 +4040,6 @@ function useNodesInitialized(options = { includeHiddenNodes: false }) {
 	return (0, vue.computed)(() => areNodesInitialized(nodeLookup, options.includeHiddenNodes));
 }
 //#endregion
-//#region src/components/A11y/A11yDescriptions.vue
-const _sfc_main$11 = /* @__PURE__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
-		(0, vue.createElementVNode)("div", {
-			id: `${$setup.ARIA_NODE_DESC_KEY}-${$setup.id}`,
-			style: { "display": "none" }
-		}, (0, vue.toDisplayString)($setup.disableKeyboardA11y ? $setup.ariaLabelConfig["node.a11yDescription.default"] : $setup.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]), 9, _hoisted_1$5),
-		(0, vue.createElementVNode)("div", {
-			id: `${$setup.ARIA_EDGE_DESC_KEY}-${$setup.id}`,
-			style: { "display": "none" }
-		}, (0, vue.toDisplayString)($setup.ariaLabelConfig["edge.a11yDescription.default"]), 9, _hoisted_2),
-		!$setup.disableKeyboardA11y ? ((0, vue.openBlock)(), (0, vue.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%)"
-			}
-		}, (0, vue.toDisplayString)($setup.ariaLiveMessage), 9, _hoisted_3)) : (0, vue.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 {
@@ -5075,6 +5093,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__ */ (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
+		(0, vue.createElementVNode)("div", {
+			id: `${$setup.ARIA_NODE_DESC_KEY}-${$setup.id}`,
+			style: { "display": "none" }
+		}, (0, vue.toDisplayString)($setup.disableKeyboardA11y ? $setup.ariaLabelConfig["node.a11yDescription.default"] : $setup.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]), 9, _hoisted_1$5),
+		(0, vue.createElementVNode)("div", {
+			id: `${$setup.ARIA_EDGE_DESC_KEY}-${$setup.id}`,
+			style: { "display": "none" }
+		}, (0, vue.toDisplayString)($setup.ariaLabelConfig["edge.a11yDescription.default"]), 9, _hoisted_2),
+		!$setup.disableKeyboardA11y ? ((0, vue.openBlock)(), (0, vue.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%)"
+			}
+		}, (0, vue.toDisplayString)($setup.ariaLiveMessage), 9, _hoisted_3)) : (0, vue.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.
@@ -7475,6 +7588,37 @@ function connectionLineProps() {
 	};
 }
 //#endregion
+//#region src/utils/edges.ts
+const defaultOnError = (0, _xyflow_system.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 (0, _xyflow_system.addEdge)(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 (0, _xyflow_system.reconnectEdge)(oldEdge, newConnection, edges, {
+		...options,
+		onError: options.onError ?? defaultOnError
+	});
+}
+//#endregion
 exports.Background = Background_default;
 exports.BaseEdge = BaseEdge_default;
 exports.BezierEdge = BezierEdge;
@@ -7494,6 +7638,7 @@ exports.ControlButton = ControlButton_default;
 exports.Controls = Controls_default;
 exports.EdgeLabelRenderer = EdgeLabelRenderer_default;
 exports.EdgeText = EdgeText_default;
+exports.EdgeToolbar = EdgeToolbar_default;
 exports.ErrorCode = ErrorCode;
 exports.Handle = Handle_default;
 exports.MarkerType = MarkerType;
@@ -7537,6 +7682,7 @@ exports.VueFlow = VueFlow_default;
 exports.VueFlowError = VueFlowError;
 exports.VueFlowInjection = VueFlow;
 exports.VueFlowProvider = VueFlowProvider_default;
+exports.addEdge = addEdge;
 exports.applyChanges = applyChanges;
 exports.applyEdgeChanges = applyEdgeChanges;
 exports.applyNodeChanges = applyNodeChanges;
@@ -7671,12 +7817,14 @@ Object.defineProperty(exports, "pointToRendererPoint", {
 		return _xyflow_system.pointToRendererPoint;
 	}
 });
+exports.reconnectEdge = reconnectEdge;
 Object.defineProperty(exports, "rendererPointToPoint", {
 	enumerable: true,
 	get: function() {
 		return _xyflow_system.rendererPointToPoint;
 	}
 });
+exports.setupVueFlow = setupVueFlow;
 exports.storeToRefs = storeToRefs;
 exports.useConnection = useConnection;
 exports.useEdge = useEdge;