@xyflow/vue 2.0.0-next.3 → 2.0.0-next.5

package/dist/index.js

@@ -22,12 +22,14 @@ let ErrorCode = /* @__PURE__ */ function(ErrorCode) {
 	ErrorCode["NODE_MISSING_PARENT"] = "NODE_MISSING_PARENT";
 	ErrorCode["NODE_TYPE_MISSING"] = "NODE_TYPE_MISSING";
 	ErrorCode["NODE_EXTENT_INVALID"] = "NODE_EXTENT_INVALID";
+	ErrorCode["NODE_DUPLICATE_ID"] = "NODE_DUPLICATE_ID";
 	ErrorCode["EDGE_INVALID"] = "EDGE_INVALID";
 	ErrorCode["EDGE_NOT_FOUND"] = "EDGE_NOT_FOUND";
 	ErrorCode["EDGE_SOURCE_MISSING"] = "EDGE_SOURCE_MISSING";
 	ErrorCode["EDGE_TARGET_MISSING"] = "EDGE_TARGET_MISSING";
 	ErrorCode["EDGE_TYPE_MISSING"] = "EDGE_TYPE_MISSING";
 	ErrorCode["EDGE_SOURCE_TARGET_MISSING"] = "EDGE_SOURCE_TARGET_MISSING";
+	ErrorCode["EDGE_DUPLICATE_ID"] = "EDGE_DUPLICATE_ID";
 	ErrorCode["USE_VUE_FLOW_OUTSIDE_PROVIDER"] = "USE_VUE_FLOW_OUTSIDE_PROVIDER";
 	return ErrorCode;
 }({});
@@ -39,11 +41,13 @@ const messages = {
 	["NODE_MISSING_PARENT"]: (id, parentId) => `Node is missing a parent\nNode id: ${id}\nParent id: ${parentId}`,
 	["NODE_TYPE_MISSING"]: (type) => `Node type is missing\nType: ${type}`,
 	["NODE_EXTENT_INVALID"]: (id) => `Only child nodes can use a parent extent\nNode id: ${id}`,
+	["NODE_DUPLICATE_ID"]: (id) => `Node id is not unique — a later node overwrites the earlier one in the lookup\nNode id: ${id}`,
 	["EDGE_INVALID"]: (id) => `An edge needs a source and a target\nEdge id: ${id}`,
 	["EDGE_SOURCE_MISSING"]: (id, source) => `Edge source is missing\nEdge id: ${id} \nSource id: ${source}`,
 	["EDGE_TARGET_MISSING"]: (id, target) => `Edge target is missing\nEdge id: ${id} \nTarget id: ${target}`,
 	["EDGE_TYPE_MISSING"]: (type) => `Edge type is missing\nType: ${type}`,
 	["EDGE_SOURCE_TARGET_MISSING"]: (id, source, target) => `Edge source or target is missing\nEdge id: ${id} \nSource id: ${source} \nTarget id: ${target}`,
+	["EDGE_DUPLICATE_ID"]: (id) => `Edge id is not unique — a later edge overwrites the earlier one in the lookup\nEdge id: ${id}`,
 	["EDGE_NOT_FOUND"]: (id) => `Edge not found\nEdge id: ${id}`,
 	["USE_VUE_FLOW_OUTSIDE_PROVIDER"]: () => `useVueFlow() was called without a <VueFlow> or <VueFlowProvider> ancestor (or outside a component setup). Render one of them above the call, or wrap your components in <VueFlowProvider> to share a store.`
 };
@@ -111,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: {
@@ -196,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",
@@ -210,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],
@@ -244,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: {
@@ -271,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",
@@ -284,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
 /**
@@ -315,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;
@@ -387,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;
@@ -826,12 +837,15 @@ function reconnectEdgeAction(edge, newConnection, prevEdge, shouldReplaceId, tri
 */
 function adoptNodes(nodes, nodeLookup, parentLookup, triggerError, options) {
 	const validNodes = [];
+	const seenNodeIds = /* @__PURE__ */ new Set();
 	for (let i = 0; i < nodes.length; ++i) {
 		const node = nodes[i];
 		if (!isNode(node)) {
 			triggerError(new VueFlowError("NODE_INVALID", node?.id ?? `[ID UNKNOWN|INDEX ${i}]`));
 			continue;
 		}
+		if (seenNodeIds.has(node.id)) triggerError(new VueFlowError("NODE_DUPLICATE_ID", node.id));
+		else seenNodeIds.add(node.id);
 		validNodes.push((0, vue.markRaw)((0, vue.toRaw)(node)));
 	}
 	const priorInternals = /* @__PURE__ */ new Map();
@@ -1554,9 +1568,10 @@ function useViewportHelper(state, nodeLookup) {
 /**
 * Two-way bind a `v-model` array ref to the store, identity-in / snapshot-out, with native `watch`.
 *
-* Used only when `<VueFlow>` does NOT own its store (it reuses a `<VueFlowProvider>`'s), so the model
-* refs can't back the store directly. The owned-store path is single-source instead — the model refs
-* ARE the store's nodes/edges (see `createStore`'s `StoreSignals` binding), needing no sync here.
+* Runs for BOTH the owned- and reused-store paths: the store's canonical nodes/edges are always an
+* internal `shallowRef` (see `createStore`), never the v-model ref, so this is the single place the model
+* ref is bridged to the store. Both directions flush synchronously so the model ref and the store's
+* synchronous reads (`getNodes`/`state.nodes`) never disagree within a tick.
 *
 * - **out** (store → model): snapshot on every membership change; element refs are shared, so per-node
 *   field mutations surface without a copy.
@@ -1569,24 +1584,29 @@ function syncModelArray(model, storeItems, setItems) {
 	(0, vue.watch)([storeItems, () => storeItems.value.length], () => {
 		lastSnapshot = [...storeItems.value];
 		model.value = lastSnapshot;
-	}, { immediate: storeItems.value.length > 0 });
+	}, {
+		immediate: storeItems.value.length > 0,
+		flush: "sync"
+	});
 	(0, vue.watch)([model, () => model.value?.length], ([next]) => {
 		if (!Array.isArray(next)) return;
 		const nextRaw = (0, vue.toRaw)(next);
 		if (nextRaw === lastSnapshot) return;
 		setItems(nextRaw);
-	}, { immediate: true });
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
 }
 /**
 * Watches props and updates the store accordingly
 *
 * @internal
-* @param models v-model refs for nodes/edges (bound only when `ownsStore` is false — see {@link syncModelArray})
+* @param models v-model refs for nodes/edges — bridged to the store here (see {@link syncModelArray})
 * @param props the `<VueFlow>` props
 * @param handle the created store handle ({@link VueFlowStoreHandle}) — instance (actions) + reactive state
-* @param ownsStore whether this `<VueFlow>` created the store (then nodes/edges are signal-backed and skipped here)
 */
-function useWatchProps(models, props, handle, ownsStore = false) {
+function useWatchProps(models, props, handle) {
 	const { instance, state } = handle;
 	const storeRefs = storeToRefs(state);
 	const scope = (0, vue.effectScope)(true);
@@ -1690,10 +1710,8 @@ function useWatchProps(models, props, handle, ownsStore = false) {
 			}
 		};
 		const runAll = () => {
-			if (!ownsStore) {
-				watchNodesValue();
-				watchEdgesValue();
-			}
+			watchNodesValue();
+			watchEdgesValue();
 			watchMinZoom();
 			watchMaxZoom();
 			watchTranslateExtent();
@@ -1709,13 +1727,14 @@ function useWatchProps(models, props, handle, ownsStore = false) {
 }
 //#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: {
 		position: {
 			type: String,
-			required: true
+			required: false,
+			default: "top-left"
 		},
 		label: {
 			type: [String, null],
@@ -1738,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) {
@@ -1763,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: {
@@ -1873,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,
@@ -1920,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: {
@@ -2003,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",
@@ -2013,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",
@@ -2034,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 },
@@ -2122,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,
@@ -2138,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",
@@ -2171,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
 /**
@@ -2239,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 }) {
@@ -2256,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 }) {
@@ -2475,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: {
@@ -2647,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", [
@@ -2662,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");
@@ -3307,14 +3401,16 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 		const { nodeLookup, parentLookup } = useStore();
 		const { transform, nodeOrigin, snapGrid, snapToGrid, vueFlowRef, noDragClassName } = storeToRefs(useStore());
 		const resizeControlRef = (0, vue.shallowRef)();
+		const contextNodeId = (0, vue.inject)(NodeId, null);
+		const nodeId = (0, vue.toRef)(() => typeof props.nodeId === "string" ? props.nodeId : contextNodeId ?? void 0);
 		const controlPosition = (0, vue.toRef)(() => props.position ?? DefaultPositions[props.variant]);
 		const positionClassNames = (0, vue.computed)(() => controlPosition.value.split("-"));
 		const controlStyle = (0, vue.toRef)(() => props.color ? { [StylingProperty[props.variant]]: props.color } : {});
 		(0, vue.watchEffect)((onCleanup) => {
-			if (!resizeControlRef.value || !props.nodeId) return;
+			if (!resizeControlRef.value || !nodeId.value) return;
 			const resizerInstance = (0, _xyflow_system.XYResizer)({
 				domNode: resizeControlRef.value,
-				nodeId: props.nodeId,
+				nodeId: nodeId.value,
 				getStoreItems: () => ({
 					nodeLookup,
 					transform: transform.value,
@@ -3325,7 +3421,7 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 				}),
 				onChange: (changes, childChanges) => {
 					const nodeChanges = [];
-					const node = nodeLookup.get(props.nodeId);
+					const node = nodeLookup.get(nodeId.value);
 					let nextX = changes.x;
 					let nextY = changes.y;
 					if (node?.expandParent && node.parentId) {
@@ -3357,14 +3453,14 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 							y: nextY ?? node?.position.y ?? 0
 						};
 						nodeChanges.push({
-							id: props.nodeId,
+							id: nodeId.value,
 							type: "position",
 							position,
 							positionAbsolute: position
 						});
 					}
 					if (typeof changes.width !== "undefined" || typeof changes.height !== "undefined") nodeChanges.push({
-						id: props.nodeId,
+						id: nodeId.value,
 						type: "dimensions",
 						setAttributes: true,
 						resizing: true,
@@ -3383,7 +3479,7 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 				},
 				onEnd: ({ width, height }) => {
 					triggerEmits.nodesChange([{
-						id: props.nodeId,
+						id: nodeId.value,
 						type: "dimensions",
 						resizing: false,
 						dimensions: {
@@ -3434,6 +3530,8 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 			vueFlowRef,
 			noDragClassName,
 			resizeControlRef,
+			contextNodeId,
+			nodeId,
 			controlPosition,
 			positionClassNames,
 			controlStyle,
@@ -4277,8 +4375,11 @@ function useActions(state, nodeLookup, parentLookup, edgeLookup) {
 	*/
 	function commitEdges(next) {
 		const rawEdgeLookup = (0, vue.toRaw)(edgeLookup);
+		const seenEdgeIds = /* @__PURE__ */ new Set();
 		for (let i = 0; i < next.length; i++) {
 			const edge = next[i] = (0, vue.markRaw)((0, vue.toRaw)(next[i]));
+			if (seenEdgeIds.has(edge.id)) state.hooks.error.trigger(new VueFlowError("EDGE_DUPLICATE_ID", edge.id));
+			else seenEdgeIds.add(edge.id);
 			if (rawEdgeLookup.get(edge.id) !== edge) edgeLookup.set(edge.id, edge);
 		}
 		if (rawEdgeLookup.size !== next.length) {
@@ -4962,17 +5063,14 @@ function useGetters(state, nodeLookup) {
 * @internal
 */
 function createVueFlowStore(id, preloadedState, onDestroy, signals) {
-	const nodesSignal = signals?.nodes ?? (0, vue.shallowRef)([]);
-	const edgesSignal = signals?.edges ?? (0, vue.shallowRef)([]);
-	let lastWriteNodes;
-	let lastWriteEdges;
+	const nodesSignal = (0, vue.shallowRef)(signals?.nodes?.value ?? []);
+	const edgesSignal = (0, vue.shallowRef)(signals?.edges?.value ?? []);
 	const emptyNodes = [];
 	const emptyEdges = [];
 	const state = useState();
 	Object.defineProperty(state, "nodes", {
 		get: () => nodesSignal.value ?? emptyNodes,
 		set: (value) => {
-			lastWriteNodes = (0, vue.toRaw)(value);
 			nodesSignal.value = value;
 		},
 		enumerable: true,
@@ -4981,7 +5079,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 	Object.defineProperty(state, "edges", {
 		get: () => edgesSignal.value ?? emptyEdges,
 		set: (value) => {
-			lastWriteEdges = (0, vue.toRaw)(value);
 			edgesSignal.value = value;
 		},
 		enumerable: true,
@@ -5004,14 +5101,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 		...reactiveState,
 		...preloadedState
 	});
-	if (signals?.nodes) (0, vue.watch)(nodesSignal, (next) => {
-		const nextRaw = next && (0, vue.toRaw)(next);
-		if (nextRaw && nextRaw !== lastWriteNodes) actions.setNodes(nextRaw);
-	});
-	if (signals?.edges) (0, vue.watch)(edgesSignal, (next) => {
-		const nextRaw = next && (0, vue.toRaw)(next);
-		if (nextRaw && nextRaw !== lastWriteEdges) actions.setEdges(nextRaw);
-	});
 	return {
 		instance: {
 			...hooksOn,
@@ -5162,7 +5251,7 @@ function useViewportSync(model, state = useStore()) {
 		};
 		if (sameViewport(viewport, model.value)) return;
 		model.value = viewport;
-	});
+	}, { flush: "sync" });
 }
 //#endregion
 //#region src/components/ConnectionLine/index.ts
@@ -5195,13 +5284,13 @@ const ConnectionLine = (0, vue.defineComponent)({
 			}
 			const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null;
 			const fromPosition = fromHandle?.position ?? _xyflow_system.Position.Top;
-			const { x: fromX, y: fromY } = (0, _xyflow_system.getHandlePosition)(fromNode.value, fromHandle, fromPosition);
+			const { x: fromX, y: fromY } = (0, _xyflow_system.getHandlePosition)(fromNode.value, fromHandle, fromPosition, true);
 			let toHandle = null;
 			if (toNode.value) if (connectionMode.value === _xyflow_system.ConnectionMode.Strict) toHandle = toNode.value.internals.handleBounds?.[handleType === "source" ? "target" : "source"]?.find((d) => d.id === connectionEndHandle.value?.id) || null;
 			else toHandle = [...toNode.value.internals.handleBounds?.source ?? [], ...toNode.value.internals.handleBounds?.target ?? []].find((d) => d.id === connectionEndHandle.value?.id) || null;
 			const toPosition = connectionEndHandle.value?.position ?? (fromPosition ? _xyflow_system.oppositePosition[fromPosition] : null);
 			if (!fromPosition || !toPosition) return null;
-			const { x: toX, y: toY } = toHandle && toNode.value ? (0, _xyflow_system.getHandlePosition)(toNode.value, toHandle, toPosition) : pointer.value;
+			const { x: toX, y: toY } = toHandle && toNode.value ? (0, _xyflow_system.getHandlePosition)(toNode.value, toHandle, toPosition, true) : pointer.value;
 			const type = connectionLineOptions.value.type ?? _xyflow_system.ConnectionLineType.Bezier;
 			let dAttr = "";
 			const pathParams = {
@@ -5942,6 +6031,8 @@ const NodeWrapper = (0, vue.defineComponent)({
 		const getStyle = (0, vue.computed)(() => {
 			const node = nodeRef.value;
 			const styles = { ...node?.style };
+			if (typeof styles.width === "number") styles.width = `${styles.width}px`;
+			if (typeof styles.height === "number") styles.height = `${styles.height}px`;
 			const isMeasured = !!node?.internals.handleBounds;
 			const width = node?.width ?? (isMeasured ? void 0 : node?.initialWidth);
 			const height = node?.height ?? (isMeasured ? void 0 : node?.initialHeight);
@@ -7310,7 +7401,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, props, {
 			instance,
 			state
-		}, ownsStore);
+		});
 		useHooks(emit, state.hooks);
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
@@ -7383,6 +7474,120 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var VueFlowProvider_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/container/VueFlowProvider/VueFlowProvider.vue"]]);
 //#endregion
+//#region src/utils/prop-of.ts
+function propOf(required = false) {
+	return {
+		type: null,
+		required
+	};
+}
+//#endregion
+//#region src/props-objects.gen.ts
+function nodeProps() {
+	return {
+		data: propOf(true),
+		deletable: propOf(true),
+		dragHandle: propOf(),
+		draggable: propOf(true),
+		dragging: propOf(true),
+		height: propOf(),
+		id: propOf(true),
+		isConnectable: propOf(true),
+		parentId: propOf(),
+		positionAbsoluteX: propOf(true),
+		positionAbsoluteY: propOf(true),
+		selectable: propOf(true),
+		selected: propOf(true),
+		sourcePosition: propOf(),
+		targetPosition: propOf(),
+		type: propOf(true),
+		width: propOf(),
+		zIndex: propOf(true)
+	};
+}
+function edgeProps() {
+	return {
+		animated: propOf(),
+		curvature: propOf(),
+		data: propOf(),
+		deletable: propOf(),
+		id: propOf(true),
+		interactionWidth: propOf(),
+		label: propOf(),
+		labelBgBorderRadius: propOf(),
+		labelBgPadding: propOf(),
+		labelBgStyle: propOf(),
+		labelShowBg: propOf(),
+		labelStyle: propOf(),
+		markerEnd: propOf(),
+		markerStart: propOf(),
+		reconnectable: propOf(),
+		selectable: propOf(),
+		selected: propOf(),
+		source: propOf(true),
+		sourceHandleId: propOf(),
+		sourcePosition: propOf(true),
+		sourceX: propOf(true),
+		sourceY: propOf(true),
+		style: propOf(),
+		target: propOf(true),
+		targetHandleId: propOf(),
+		targetPosition: propOf(true),
+		targetX: propOf(true),
+		targetY: propOf(true),
+		type: propOf()
+	};
+}
+function connectionLineProps() {
+	return {
+		connectionStatus: propOf(true),
+		fromHandle: propOf(true),
+		fromNode: propOf(true),
+		fromPosition: propOf(true),
+		fromX: propOf(true),
+		fromY: propOf(true),
+		markerEnd: propOf(),
+		markerStart: propOf(),
+		pointer: propOf(true),
+		toHandle: propOf(true),
+		toNode: propOf(true),
+		toPosition: propOf(true),
+		toX: propOf(true),
+		toY: propOf(true)
+	};
+}
+//#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;
@@ -7402,6 +7607,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;
@@ -7445,6 +7651,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;
@@ -7455,8 +7662,10 @@ Object.defineProperty(exports, "clamp", {
 	}
 });
 exports.connectionExists = connectionExists;
+exports.connectionLineProps = connectionLineProps;
 exports.defaultEdgeTypes = defaultEdgeTypes;
 exports.defaultNodeTypes = defaultNodeTypes;
+exports.edgeProps = edgeProps;
 Object.defineProperty(exports, "getBezierEdgeCenter", {
 	enumerable: true,
 	get: function() {
@@ -7570,12 +7779,14 @@ Object.defineProperty(exports, "isNodeBase", {
 		return _xyflow_system.isNodeBase;
 	}
 });
+exports.nodeProps = nodeProps;
 Object.defineProperty(exports, "pointToRendererPoint", {
 	enumerable: true,
 	get: function() {
 		return _xyflow_system.pointToRendererPoint;
 	}
 });
+exports.reconnectEdge = reconnectEdge;
 Object.defineProperty(exports, "rendererPointToPoint", {
 	enumerable: true,
 	get: function() {