@statelyai/flow-react 0.5.0 → 0.7.0

package/dist/esm/index.js

@@ -1,44 +1,45 @@
-import { n as useFlowInstance, r as useOptionalFlowInstance, t as FlowInstanceProvider } from "./FlowInstanceContext.js";
-import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { a as FlowInstanceProvider, i as LinesBackground, n as CrossBackground, o as useFlowInstance, r as DotsBackground, s as useOptionalFlowInstance, t as Background } from "./backgrounds2.js";
+import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowView, createMeasurementObserver, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
+import { CONNECTION_PREVIEW_EDGE_ID, areNodesMeasured, createConnectionPreviewGraph, createEntityChangeNotifier, createFlow, createFlowInputRuntime, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getProjectedEdgeAttrs, getProjectedNodeAttrs, getToolbarPlacement, nodeDepths, pathToSVG, profileModesForContext, profilePoliciesForContext, viewportCenteredOn } from "@statelyai/flow";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, computeRenderableIds, createMeasurementObserver, getAttachedContainer, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
-import { CONNECTION_PREVIEW_EDGE_ID, createConnectionPreviewGraph, createEntityChangeNotifier, createFlow, createFlowInputRuntime, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getToolbarPlacement, nodeDepths, pathToSVG, profileModesForContext, viewportCenteredOn } from "@statelyai/flow";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
+import { createPortal } from "react-dom";
+export * from "@statelyai/flow-dom";
 //#region src/createFlowInstance.ts
 function createFlowInstance(options) {
+	const { keymap, ...createFlowSettings } = options.settings ?? {};
 	const flow = createFlow({
-		graph: options.graph,
-		...options.settings
+		graph: options.initialGraph,
+		...createFlowSettings
 	});
+	const inputSettings = { keymap };
 	const cleanup = /* @__PURE__ */ new Set();
 	function getSnapshot() {
-		return flow.store.getSnapshot().context;
+		return flow.getSnapshot();
 	}
-	function clientToCanvas(point) {
-		const rect = getAttachedContainer(flow.store)?.getBoundingClientRect();
-		return flow.screenToCanvas({
-			x: point.x - (rect?.left ?? 0),
-			y: point.y - (rect?.top ?? 0)
-		});
+	function clientToCanvas$1(point) {
+		return clientToCanvas(flow.internals.store, point);
 	}
 	function listen(selector, listener, listenerOptions = {}) {
 		const isEqual = listenerOptions.isEqual ?? Object.is;
 		let previousValue = selector(getSnapshot());
 		if (listenerOptions.fireImmediately) listener(previousValue, previousValue, getSnapshot());
-		const unsubscribe = flow.subscribe((context) => {
-			const nextValue = selector(context);
-			if (isEqual(previousValue, nextValue)) return;
-			const currentPreviousValue = previousValue;
+		const unsubscribe = flow.subscribe(selector, (nextValue, currentPreviousValue) => {
 			previousValue = nextValue;
-			listener(nextValue, currentPreviousValue, context);
-		});
+			listener(nextValue, currentPreviousValue, getSnapshot());
+		}, { equals: isEqual });
 		cleanup.add(unsubscribe);
 		return () => {
 			cleanup.delete(unsubscribe);
 			unsubscribe();
 		};
 	}
+	const configure = (next) => {
+		flow.configure(next);
+	};
 	function subscribeEvent(event, listener) {
-		const subscription = flow.on(event, listener);
+		const subscription = event === "commit" ? flow.on("commit", listener) : flow.on(event, listener);
 		const unsubscribe = () => subscription.unsubscribe();
 		cleanup.add(unsubscribe);
 		return () => {
@@ -48,12 +49,16 @@ function createFlowInstance(options) {
 	}
 	if (options.events?.connectionEnded) subscribeEvent("connectionEnded", options.events.connectionEnded);
 	if (options.events?.layoutRequested) subscribeEvent("layoutRequested", options.events.layoutRequested);
+	if (options.events?.commit) subscribeEvent("commit", options.events.commit);
+	if (options.onCommit) subscribeEvent("commit", options.onCommit);
 	for (const listener of options.listeners ?? []) listen(listener.selector, listener.onChange, listener);
 	return {
 		...flow,
 		getSnapshot,
+		configure,
 		listen,
-		clientToCanvas,
+		clientToCanvas: clientToCanvas$1,
+		inputSettings,
 		destroy() {
 			for (const unsubscribe of cleanup) unsubscribe();
 			cleanup.clear();
@@ -66,25 +71,19 @@ function createFlowInstance(options) {
 function useFlow(options) {
 	return useCreateFlowInstance(options);
 }
+/** @deprecated Use `useFlow(options)`. */
 function useCreateFlowInstance(options) {
 	const instanceRef = useRef(null);
 	const listenersRef = useRef(options.listeners);
 	const eventsRef = useRef(options.events);
-	const didMountRef = useRef(false);
+	const lifecycleRef = useRef(0);
 	listenersRef.current = options.listeners;
 	eventsRef.current = options.events;
 	if (!instanceRef.current) instanceRef.current = createFlowInstance({
-		graph: options.graph,
+		initialGraph: options.initialGraph,
 		settings: options.settings
 	});
 	const flow = instanceRef.current;
-	useEffect(() => {
-		if (!didMountRef.current) {
-			didMountRef.current = true;
-			return;
-		}
-		flow.trigger.setGraph({ graph: options.graph });
-	}, [flow, options.graph]);
 	useEffect(() => {
 		const cleanup = [];
 		if (eventsRef.current?.connectionEnded) {
@@ -95,6 +94,14 @@ function useCreateFlowInstance(options) {
 			const subscription = flow.on("layoutRequested", eventsRef.current.layoutRequested);
 			cleanup.push(() => subscription.unsubscribe());
 		}
+		if (eventsRef.current?.commit) {
+			const subscription = flow.on("commit", eventsRef.current.commit);
+			cleanup.push(() => subscription.unsubscribe());
+		}
+		if (options.onCommit) {
+			const subscription = flow.on("commit", options.onCommit);
+			cleanup.push(() => subscription.unsubscribe());
+		}
 		for (const listener of listenersRef.current ?? []) cleanup.push(flow.listen(listener.selector, listener.onChange, listener));
 		return () => {
 			for (const dispose of cleanup) dispose();
@@ -102,40 +109,70 @@ function useCreateFlowInstance(options) {
 	}, [
 		flow,
 		options.listeners,
-		options.events
+		options.events,
+		options.onCommit
 	]);
-	useEffect(() => () => flow.destroy(), [flow]);
+	useEffect(() => {
+		const lifecycle = lifecycleRef;
+		const generation = ++lifecycle.current;
+		return () => {
+			queueMicrotask(() => {
+				if (lifecycle.current !== generation) return;
+				lifecycle.current++;
+				flow.destroy();
+			});
+		};
+	}, [flow]);
 	return flow;
 }
 function useFlowSelector(selector, options = {}) {
 	const contextFlow = useOptionalFlowInstance();
 	const flow = options.flow ?? contextFlow;
 	if (!flow) throw new Error("Flow instance is missing. Pass { flow } or render inside <FlowInstanceProvider>.");
-	const selectorRef = useRef(selector);
-	const isEqualRef = useRef(options.isEqual ?? Object.is);
-	selectorRef.current = selector;
-	isEqualRef.current = options.isEqual ?? Object.is;
-	const [selected, setSelected] = useState(() => selector(flow.getSnapshot()));
-	useEffect(() => {
-		setSelected((previous) => {
-			const next = selectorRef.current(flow.getSnapshot());
-			return isEqualRef.current(previous, next) ? previous : next;
-		});
-		return flow.listen((context) => selectorRef.current(context), (value) => {
-			setSelected((previous) => isEqualRef.current(previous, value) ? previous : value);
-		});
-	}, [flow]);
-	return selected;
+	return useSyncExternalStoreWithSelector(useCallback((listener) => flow.subscribe(() => listener()), [flow]), flow.getSnapshot, flow.getSnapshot, selector, options.isEqual);
 }
 function useFlowContext() {
 	return useFlowSelector((context) => context);
 }
+function useConnection() {
+	return useFlowSelector((context) => context.connection);
+}
+function useFlowConnections(input) {
+	const flow = useFlowInstance();
+	return useFlowSelector(() => flow.connections.get(input), { isEqual: (current, next) => current.length === next.length && current.every((connection, index) => {
+		const candidate = next[index];
+		return connection.edge === candidate.edge && connection.source.nodeId === candidate.source.nodeId && connection.source.port === candidate.source.port && connection.target.nodeId === candidate.target.nodeId && connection.target.port === candidate.target.port;
+	}) });
+}
+function useNodesInitialized() {
+	return useFlowSelector(areNodesMeasured);
+}
+function useKeyPress(keys) {
+	const keySet = useMemo(() => new Set(Array.isArray(keys) ? keys : [keys]), [keys]);
+	const [pressed, setPressed] = useState(false);
+	useEffect(() => {
+		function update(event, value) {
+			const target = event.target;
+			if (target && (target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT")) return;
+			if (keySet.has(event.key)) setPressed(value);
+		}
+		const down = (event) => update(event, true);
+		const up = (event) => update(event, false);
+		window.addEventListener("keydown", down);
+		window.addEventListener("keyup", up);
+		return () => {
+			window.removeEventListener("keydown", down);
+			window.removeEventListener("keyup", up);
+		};
+	}, [keySet]);
+	return pressed;
+}
 const entityNotifiers = /* @__PURE__ */ new WeakMap();
 function getEntityNotifier(flow) {
-	let notifier = entityNotifiers.get(flow.store);
+	let notifier = entityNotifiers.get(flow.internals.store);
 	if (!notifier) {
-		notifier = createEntityChangeNotifier(flow.store);
-		entityNotifiers.set(flow.store, notifier);
+		notifier = createEntityChangeNotifier(flow.internals.store, { getEdgeDependents: flow.internals.engine.getEdgeSourceDependents });
+		entityNotifiers.set(flow.internals.store, notifier);
 	}
 	return notifier;
 }
@@ -151,15 +188,23 @@ function useFlowEntity(id, selector, options = {}) {
 	if (!flow) throw new Error("Flow instance is missing. Pass { flow } or render inside <FlowInstanceProvider>.");
 	const selectorRef = useRef(selector);
 	const isEqualRef = useRef(options.isEqual ?? Object.is);
+	const selectedRef = useRef(void 0);
+	const selectedInitializedRef = useRef(false);
 	selectorRef.current = selector;
 	isEqualRef.current = options.isEqual ?? Object.is;
-	const [selected, setSelected] = useState(() => selector(flow.getSnapshot()));
+	const [selected, setSelected] = useState(() => {
+		const initial = selector(flow.getSnapshot());
+		selectedRef.current = initial;
+		selectedInitializedRef.current = true;
+		return initial;
+	});
 	useEffect(() => {
 		const update = () => {
-			setSelected((previous) => {
-				const next = selectorRef.current(flow.getSnapshot());
-				return isEqualRef.current(previous, next) ? previous : next;
-			});
+			const next = selectorRef.current(flow.getSnapshot());
+			if (selectedInitializedRef.current && isEqualRef.current(selectedRef.current, next)) return;
+			selectedRef.current = next;
+			selectedInitializedRef.current = true;
+			setSelected(next);
 		};
 		update();
 		return getEntityNotifier(flow).subscribe(id, update);
@@ -204,7 +249,7 @@ function useFlowEdge(id, selector, isEqual) {
 function useFlowPort(id, selector, isEqual) {
 	const flow = useFlowInstance();
 	return useFlowSelector((context) => {
-		const addressable = flow?.getAddressable(id);
+		const addressable = flow?.getEntityRef(id);
 		if (!addressable || addressable.kind !== "port") throw new Error(`Flow port "${id}" was not found.`);
 		const binding = {
 			...addressable.port,
@@ -243,24 +288,128 @@ function getDerivedFields(context, id, props) {
 * and applied to the flow store. This replaces hand-written gesture handlers.
 */
 function useFlowInput(flow, containerRef, options = {}) {
-	const optionsRef = useRef(options);
-	optionsRef.current = options;
+	const { modes, profile, keyboardTarget, keymap } = options;
+	const effectiveKeymap = keymap ?? flow.inputSettings?.keymap;
+	const keymapKey = effectiveKeymap ? JSON.stringify(effectiveKeymap) : void 0;
+	const keymapRef = useRef(effectiveKeymap);
+	keymapRef.current = effectiveKeymap;
 	useEffect(() => {
 		const container = containerRef.current;
 		if (!container) return;
-		const { modes, profile } = optionsRef.current;
+		const activeKeymap = keymapRef.current;
 		const runtime = createFlowInputRuntime({
-			store: flow.store,
-			engine: flow.engine,
-			modes: modes ?? (profile ? profileModesForContext(profile) : void 0)
+			store: flow.internals.store,
+			engine: flow.internals.engine,
+			modes: modes ?? (profile ? profileModesForContext(profile) : void 0),
+			policies: profile ? profilePoliciesForContext(profile) : void 0,
+			...activeKeymap ? { keymap: activeKeymap } : {}
 		});
 		return attachInput({
 			container,
-			store: flow.store,
+			store: flow.internals.store,
 			runtime,
-			autoPan: (context, screenPoint) => getAutoPanDelta(context, screenPoint, flow.engine)
+			keyboardTarget,
+			autoPan: (context, screenPoint) => getAutoPanDelta(context, screenPoint, flow.internals.engine)
 		});
-	}, [flow, containerRef]);
+	}, [
+		flow,
+		containerRef,
+		modes,
+		profile,
+		keyboardTarget,
+		keymapKey
+	]);
+}
+//#endregion
+//#region src/MeasurementContext.tsx
+const MeasurementContext = createContext(null);
+function MeasurementProvider(props) {
+	return /* @__PURE__ */ jsx(MeasurementContext.Provider, {
+		value: props.observer,
+		children: props.children
+	});
+}
+function useMeasurementObserver() {
+	const observer = useContext(MeasurementContext);
+	if (!observer) throw new Error("Measurement observer is missing.");
+	return observer;
+}
+//#endregion
+//#region src/useFlowView.tsx
+const FlowViewContext = createContext(null);
+function FlowViewProvider(props) {
+	const measurements = useMeasurementObserver();
+	const view = useMemo(() => ({
+		exportImage: (options) => {
+			const container = props.containerRef.current;
+			if (!container) return Promise.reject(/* @__PURE__ */ new Error("Flow view is not mounted."));
+			return createFlowView(container, { measurements }).exportImage(options);
+		},
+		refreshMeasurements: (targets) => measurements.refresh(targets)
+	}), [measurements, props.containerRef]);
+	return /* @__PURE__ */ jsx(FlowViewContext.Provider, {
+		value: view,
+		children: props.children
+	});
+}
+function useFlowView() {
+	const view = useContext(FlowViewContext);
+	if (!view) throw new Error("useFlowView() must be used within <StatelyFlow>.");
+	return view;
+}
+//#endregion
+//#region src/baseStyles.ts
+/**
+* Minimal base stylesheet for the flow canvas. Intentionally tiny and
+* inert-by-default: it only styles elements that opt in via `data-flow-*`
+* attributes, and every visual value is a namespaced `--flow-*` CSS variable
+* so consumers can theme it (set the variable on the canvas root or any
+* ancestor) without overriding rules.
+*
+* Attributes:
+* - `data-flow-interactive-when-selected` — the element ignores all pointer /
+*   wheel input (so canvas pan/zoom and box-select pass straight through it,
+*   e.g. over an embedded `<iframe>`) until its node/edge is selected, at which
+*   point it becomes fully interactive. Mark the embedded content, not the
+*   whole node, so ports and the selecting click still work. Don't also set an
+*   inline `pointer-events` on the same element — inline wins over this rule.
+* - `data-flow-selection-box` — the box-select marquee (styled here; geometry
+*   is set inline by the renderer).
+*/
+const FLOW_BASE_STYLES_ID = "flow-base-styles";
+const FLOW_BASE_CSS = `
+[data-flow-root] {
+  --flow-selection-color: #2563eb;
+  --flow-selection-bg: rgba(37, 99, 235, 0.12);
+  touch-action: none;
+}
+
+[data-flow-interactive-when-selected] {
+  pointer-events: none;
+}
+[data-flow-selected="true"] [data-flow-interactive-when-selected] {
+  pointer-events: auto;
+}
+
+[data-flow-selection-box] {
+  position: absolute;
+  box-sizing: border-box;
+  border: calc(1px / var(--flow-zoom, 1)) solid var(--flow-selection-color);
+  border-radius: calc(2px / var(--flow-zoom, 1));
+  background: var(--flow-selection-bg);
+  pointer-events: none;
+}
+`;
+/** Inject the base stylesheet once per document (deduped by element id). */
+function useFlowBaseStyles() {
+	useLayoutEffect(() => {
+		if (typeof document === "undefined") return;
+		if (document.getElementById("flow-base-styles")) return;
+		const style = document.createElement("style");
+		style.id = FLOW_BASE_STYLES_ID;
+		style.textContent = FLOW_BASE_CSS;
+		document.head.appendChild(style);
+	}, []);
 }
 //#endregion
 //#region src/NodeContext.tsx
@@ -272,20 +421,56 @@ function useNodeRenderContext() {
 	return context;
 }
 //#endregion
+//#region src/LayerPortals.tsx
+const FlowLayerTargetsContext = createContext(null);
+function FlowLayerTargetsProvider(props) {
+	return /* @__PURE__ */ jsx(FlowLayerTargetsContext.Provider, {
+		value: props.targets,
+		children: props.children
+	});
+}
+function useFlowLayerTargets() {
+	const targets = useContext(FlowLayerTargetsContext);
+	if (!targets) throw new Error("Flow layer portals must be rendered within <StatelyFlow>.");
+	return targets;
+}
+/** Render canvas-coordinate content in the transformed viewport layer. */
+function ViewportPortal(props) {
+	const target = useFlowLayerTargets().viewport;
+	return target ? createPortal(props.children, target) : null;
+}
+/** Render screen-coordinate content in the untransformed pane layer. */
+function PanePortal(props) {
+	const target = useFlowLayerTargets().pane;
+	return target ? createPortal(props.children, target) : null;
+}
+//#endregion
 //#region src/StatelyFlow.tsx
 function stringArraysEqual(a, b) {
 	if (a.length !== b.length) return false;
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+function nodePaintEntriesEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let index = 0; index < a.length; index++) if (a[index]?.id !== b[index]?.id || a[index]?.orderIndex !== b[index]?.orderIndex) return false;
+	return true;
+}
+function classNames$1(...values) {
+	return values.filter(Boolean).join(" ");
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
 function useRenderableIds(instance, enabled) {
-	return useFlowSelector((context) => computeRenderableIds(instance.engine, context, enabled), { isEqual: renderableIdsEqual });
+	return useFlowSelector((context) => computeRenderableIds(instance.internals.engine, context, enabled), { isEqual: renderableIdsEqual });
 }
 function useViewportTransform(ref, instance) {
 	useLayoutEffect(() => {
 		const el = ref.current;
 		if (!el) return;
-		return attachViewportTransform(instance.store, el);
+		return attachViewportTransform(instance.internals.store, el);
 	}, [ref, instance]);
 }
 function StatelyFlow(props) {
@@ -296,11 +481,12 @@ function StatelyFlow(props) {
 	return /* @__PURE__ */ jsx(OwnedStatelyFlow, { ...props });
 }
 function OwnedStatelyFlow(props) {
-	const flow = useCreateFlowInstance({
-		graph: props.graph,
+	const flow = useFlow({
+		initialGraph: props.initialGraph,
 		settings: props.settings,
 		listeners: props.listeners,
-		events: props.events
+		events: props.events,
+		onCommit: props.onCommit
 	});
 	return /* @__PURE__ */ jsx(StatelyFlowView, {
 		...props,
@@ -309,61 +495,155 @@ function OwnedStatelyFlow(props) {
 }
 function StatelyFlowView(props) {
 	const containerRef = useRef(null);
+	const setContainerRef = useCallback((element) => {
+		containerRef.current = element;
+		assignRef(props.rootRef, element);
+	}, [props.rootRef]);
 	const viewportRef = useRef(null);
+	const [viewportLayer, setViewportLayer] = useState(null);
+	const [paneLayer, setPaneLayer] = useState(null);
+	const layerTargets = useMemo(() => ({
+		viewport: viewportLayer,
+		pane: paneLayer
+	}), [viewportLayer, paneLayer]);
+	const measurementObserver = useMemo(() => createMeasurementObserver(props.flow.internals.store, { container: () => containerRef.current }), [props.flow]);
+	const geometryObserver = useMemo(() => createEntityGeometryObserver(props.flow.internals.store, { getEdgeDependents: props.flow.internals.engine.getEdgeSourceDependents }), [props.flow]);
+	useLayoutEffect(() => () => {
+		measurementObserver.disconnect();
+		geometryObserver.disconnect();
+	}, [geometryObserver, measurementObserver]);
 	useViewportTransform(viewportRef, props.flow);
+	useFlowBaseStyles();
+	const projections = useActiveProjections(props.flow, props.projections);
+	const { className: rootClassName, style: rootStyle, tabIndex: rootTabIndex, ...rootProps } = props.rootProps ?? {};
 	useLayoutEffect(() => {
 		const element = containerRef.current;
 		if (!element) return;
-		return attachContainer(props.flow.store, element);
+		return attachContainer(props.flow.internals.store, element);
 	}, [props.flow]);
 	useFlowInput(props.flow, containerRef, {
 		modes: props.inputModes,
-		profile: props.settings?.store?.profile
+		profile: props.settings?.store?.profile,
+		keyboardTarget: props.keyboardTarget,
+		keymap: props.settings?.keymap
 	});
+	useEffect(() => {
+		props.flow.configure({
+			engine: props.settings?.engine,
+			store: props.settings?.store,
+			defaultEdgeOptions: props.settings?.defaultEdgeOptions,
+			createEdgeOnConnect: props.settings?.createEdgeOnConnect,
+			layout: props.settings?.layout,
+			historyLimit: props.settings?.store?.historyLimit
+		});
+		if (props.settings?.projections) props.flow.projections.set(props.settings.projections);
+	}, [
+		props.flow,
+		props.settings?.engine,
+		props.settings?.store,
+		props.settings?.defaultEdgeOptions,
+		props.settings?.createEdgeOnConnect,
+		props.settings?.layout,
+		props.settings?.projections
+	]);
 	return /* @__PURE__ */ jsx(FlowInstanceProvider, {
 		flow: props.flow,
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: containerRef,
-			className: props.className,
-			style: {
-				position: "relative",
-				overflow: "hidden",
-				width: "100%",
-				height: "100%",
-				minHeight: 320,
-				touchAction: "none",
-				...props.style
-			},
-			children: [
-				props.background,
-				/* @__PURE__ */ jsxs("div", {
-					ref: viewportRef,
-					"data-flow-viewport": true,
-					style: viewportStyle(),
-					children: [
-						/* @__PURE__ */ jsx(EdgeLayer, {
-							renderEdge: props.renderEdge,
-							onlyRenderVisible: props.onlyRenderVisible
-						}),
-						/* @__PURE__ */ jsx(NodeLayer, {
-							renderNode: props.renderNode,
-							onlyRenderVisible: props.onlyRenderVisible
-						}),
-						/* @__PURE__ */ jsx(SnapLinesLayer, {}),
-						/* @__PURE__ */ jsx(EdgeLabelLayer, { onlyRenderVisible: props.onlyRenderVisible })
-					]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					"data-flow-overlay": true,
-					children: props.children
+		children: /* @__PURE__ */ jsx(MeasurementProvider, {
+			observer: measurementObserver,
+			children: /* @__PURE__ */ jsx(FlowViewProvider, {
+				containerRef,
+				children: /* @__PURE__ */ jsx(FlowLayerTargetsProvider, {
+					targets: layerTargets,
+					children: /* @__PURE__ */ jsxs("div", {
+						...rootProps,
+						ref: setContainerRef,
+						className: classNames$1("stately-flow", "stately-flow__pane", props.className, rootClassName),
+						"data-flow-root": "",
+						tabIndex: rootTabIndex ?? 0,
+						style: {
+							position: "relative",
+							overflow: "hidden",
+							width: "100%",
+							height: "100%",
+							minHeight: 320,
+							touchAction: "none",
+							...props.style,
+							...rootStyle
+						},
+						children: [
+							props.background,
+							/* @__PURE__ */ jsxs("div", {
+								ref: viewportRef,
+								className: "stately-flow__viewport",
+								"data-flow-viewport": true,
+								style: viewportStyle(),
+								children: [
+									/* @__PURE__ */ jsx(EdgeLayer, {
+										geometryObserver,
+										renderEdge: props.renderEdge,
+										renderConnectionLine: props.renderConnectionLine,
+										projections,
+										onlyRenderVisible: props.onlyRenderVisible
+									}),
+									/* @__PURE__ */ jsx(NodeLayer, {
+										geometryObserver,
+										renderNode: props.renderNode,
+										projections,
+										onlyRenderVisible: props.onlyRenderVisible
+									}),
+									/* @__PURE__ */ jsx(SnapLinesLayer, {}),
+									/* @__PURE__ */ jsx(EdgeLabelLayer, {
+										geometryObserver,
+										renderEdgeLabel: props.renderEdgeLabel,
+										projections,
+										onlyRenderVisible: props.onlyRenderVisible
+									}),
+									/* @__PURE__ */ jsx(SelectionBoxLayer, {}),
+									/* @__PURE__ */ jsx("div", {
+										ref: setViewportLayer,
+										className: "stately-flow__viewport-layer",
+										"data-flow-canvas-layer": "",
+										"data-flow-layer": "viewport",
+										style: {
+											position: "absolute",
+											inset: 0,
+											pointerEvents: "none"
+										},
+										children: props.layers?.viewport
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: setPaneLayer,
+								className: "stately-flow__pane-layer",
+								"data-flow-canvas-layer": "",
+								"data-flow-layer": "pane",
+								style: {
+									position: "absolute",
+									inset: 0,
+									pointerEvents: "none"
+								},
+								children: props.layers?.pane
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "stately-flow__overlays",
+								"data-flow-overlay": true,
+								children: props.children
+							})
+						]
+					})
 				})
-			]
+			})
 		})
 	});
 }
+function useActiveProjections(flow, projections) {
+	const flowProjections = useSyncExternalStore(flow.projections.subscribe, flow.projections.get, flow.projections.get);
+	return projections ?? flowProjections;
+}
 function SnapLinesLayer() {
 	const instance = useFlowInstance();
-	const snapResult = useFlowSelector(() => instance.engine.getSnapResult());
+	const snapResult = useFlowSelector(() => instance.internals.engine.getSnapResult());
 	const viewport = useFlowSelector((context) => context.viewport);
 	const viewportSize = useFlowSelector((context) => context.viewportSize);
 	if (!snapResult) return null;
@@ -373,11 +653,16 @@ function SnapLinesLayer() {
 		width: viewportSize.width / viewport.zoom,
 		height: viewportSize.height / viewport.zoom
 	};
-	const strokeWidth = 1.5 / viewport.zoom;
+	const strokeWidth = 1 / viewport.zoom;
 	const capSize = 4 / viewport.zoom;
+	const fontSize = 10 / viewport.zoom;
+	const labelOffset = 6 / viewport.zoom;
+	const snapColor = "var(--flow-snap-line-color, #ef4444)";
+	const spacingColor = "var(--flow-spacing-guide-color, var(--flow-snap-line-color, #ef4444))";
 	return /* @__PURE__ */ jsx("svg", {
 		"aria-hidden": "true",
 		"data-flow-canvas-layer": true,
+		"data-flow-snap-guides": "",
 		style: {
 			position: "absolute",
 			inset: 0,
@@ -387,89 +672,128 @@ function SnapLinesLayer() {
 			pointerEvents: "none"
 		},
 		children: /* @__PURE__ */ jsxs("g", { children: [snapResult.snapLines.map((line, index) => line.axis === "x" ? /* @__PURE__ */ jsx("line", {
+			"data-flow-snap-line": "x",
 			x1: line.value,
 			y1: visibleBounds.y,
 			x2: line.value,
 			y2: visibleBounds.y + visibleBounds.height,
-			stroke: "#ef4444",
+			stroke: snapColor,
 			strokeWidth,
-			strokeDasharray: `${6 / viewport.zoom} ${4 / viewport.zoom}`
+			strokeDasharray: `${4 / viewport.zoom}`
 		}, `snap-x-${index}`) : /* @__PURE__ */ jsx("line", {
+			"data-flow-snap-line": "y",
 			x1: visibleBounds.x,
 			y1: line.value,
 			x2: visibleBounds.x + visibleBounds.width,
 			y2: line.value,
-			stroke: "#ef4444",
+			stroke: snapColor,
 			strokeWidth,
-			strokeDasharray: `${6 / viewport.zoom} ${4 / viewport.zoom}`
+			strokeDasharray: `${4 / viewport.zoom}`
 		}, `snap-y-${index}`)), snapResult.spacingGuides?.flatMap((guide, guideIndex) => guide.ranges.flatMap((range, rangeIndex) => {
 			const key = `spacing-${guideIndex}-${rangeIndex}`;
 			if (guide.axis === "x") return [
 				/* @__PURE__ */ jsx("line", {
+					"data-flow-spacing-guide": "x",
 					x1: range.start,
 					y1: guide.position,
 					x2: range.end,
 					y2: guide.position,
-					stroke: "#ef4444",
+					stroke: spacingColor,
 					strokeWidth
 				}, `${key}-line`),
 				/* @__PURE__ */ jsx("line", {
 					x1: range.start,
-					y1: guide.position - capSize,
+					y1: guide.position,
 					x2: range.start,
-					y2: guide.position + capSize,
-					stroke: "#ef4444",
-					strokeWidth,
+					y2: guide.position,
+					stroke: spacingColor,
+					strokeWidth: capSize,
 					strokeLinecap: "round"
 				}, `${key}-start`),
 				/* @__PURE__ */ jsx("line", {
 					x1: range.end,
-					y1: guide.position - capSize,
+					y1: guide.position,
 					x2: range.end,
-					y2: guide.position + capSize,
-					stroke: "#ef4444",
-					strokeWidth,
+					y2: guide.position,
+					stroke: spacingColor,
+					strokeWidth: capSize,
 					strokeLinecap: "round"
-				}, `${key}-end`)
+				}, `${key}-end`),
+				/* @__PURE__ */ jsx("text", {
+					"data-flow-spacing-label": "x",
+					x: (range.start + range.end) / 2,
+					y: guide.position - labelOffset,
+					fontSize,
+					fill: spacingColor,
+					textAnchor: "middle",
+					children: Math.round(guide.spacing)
+				}, `${key}-label`)
 			];
 			return [
 				/* @__PURE__ */ jsx("line", {
+					"data-flow-spacing-guide": "y",
 					x1: guide.position,
 					y1: range.start,
 					x2: guide.position,
 					y2: range.end,
-					stroke: "#ef4444",
+					stroke: spacingColor,
 					strokeWidth
 				}, `${key}-line`),
 				/* @__PURE__ */ jsx("line", {
-					x1: guide.position - capSize,
+					x1: guide.position,
 					y1: range.start,
-					x2: guide.position + capSize,
+					x2: guide.position,
 					y2: range.start,
-					stroke: "#ef4444",
-					strokeWidth,
+					stroke: spacingColor,
+					strokeWidth: capSize,
 					strokeLinecap: "round"
 				}, `${key}-start`),
 				/* @__PURE__ */ jsx("line", {
-					x1: guide.position - capSize,
+					x1: guide.position,
 					y1: range.end,
-					x2: guide.position + capSize,
+					x2: guide.position,
 					y2: range.end,
-					stroke: "#ef4444",
-					strokeWidth,
+					stroke: spacingColor,
+					strokeWidth: capSize,
 					strokeLinecap: "round"
-				}, `${key}-end`)
+				}, `${key}-end`),
+				/* @__PURE__ */ jsx("text", {
+					"data-flow-spacing-label": "y",
+					x: guide.position + labelOffset,
+					y: (range.start + range.end) / 2,
+					fontSize,
+					fill: spacingColor,
+					textAnchor: "start",
+					dominantBaseline: "middle",
+					children: Math.round(guide.spacing)
+				}, `${key}-label`)
 			];
 		}))] })
 	});
 }
+function SelectionBoxLayer() {
+	const box = useFlowSelector((context) => context.selectionBox);
+	if (!box) return null;
+	const [a, b] = box;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-flow-selection-box": "",
+		style: {
+			left: Math.min(a.x, b.x),
+			top: Math.min(a.y, b.y),
+			width: Math.abs(b.x - a.x),
+			height: Math.abs(b.y - a.y)
+		}
+	});
+}
 function EdgeLayer(props) {
 	const instance = useFlowInstance();
 	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
-	const edgeIds = useFlowSelector((context) => context.graph.edges.map((edge) => edge.id), { isEqual: stringArraysEqual });
+	const edgeIds = useFlowSelector((context) => getOrderedEntities(instance, context).edges.map((edge) => edge.id), { isEqual: stringArraysEqual });
 	const renderEdge = props.renderEdge;
 	return /* @__PURE__ */ jsx("svg", {
 		"aria-label": "edges",
+		className: "stately-flow__edges",
 		"data-flow-canvas-layer": true,
 		style: {
 			position: "absolute",
@@ -477,34 +801,77 @@ function EdgeLayer(props) {
 			width: "100%",
 			height: "100%",
 			overflow: "visible",
-			pointerEvents: "auto"
+			pointerEvents: "none"
 		},
 		children: /* @__PURE__ */ jsxs("g", { children: [edgeIds.map((id) => {
 			if (renderableIds && !renderableIds.edgeIds.has(id)) return null;
 			return /* @__PURE__ */ jsx(EdgeView, {
 				flow: instance,
+				geometryObserver: props.geometryObserver,
 				id,
+				projections: props.projections,
 				renderEdge
 			}, id);
 		}), /* @__PURE__ */ jsx(ConnectionPreviewEdge, {
 			flow: instance,
-			renderEdge
+			renderEdge,
+			renderConnectionLine: props.renderConnectionLine
 		})] })
 	});
 }
 const EdgeView = memo(function EdgeView(props) {
-	const { edge, pathData, selected, hovered, highlights } = useFlowEntity(props.id, (context) => ({
+	const ref = useRef(null);
+	const { graph, edge, pathData, selected, focused, hovered, highlights } = useFlowEntity(props.id, (context) => ({
+		graph: context.graph,
 		edge: props.flow.getEdge(props.id) ?? null,
 		pathData: props.flow.getAllEdgePaths().get(props.id) ?? null,
+		geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
 		selected: context.selection.has(props.id),
+		focused: context.focusedEntityId === props.id,
 		hovered: context.hoveredEntityIds.has(props.id),
-		highlights: props.flow.engine.getHighlights(props.id)
-	}), { isEqual: (a, b) => a.edge === b.edge && a.pathData === b.pathData && a.selected === b.selected && a.hovered === b.hovered && a.highlights === b.highlights });
+		highlights: props.flow.internals.engine.getHighlights(props.id)
+	}), { isEqual: (a, b) => {
+		if (!(a.selected === b.selected && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
+		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
+	} });
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		return props.geometryObserver.observeEdge(element, {
+			id: props.id,
+			getPathData: () => props.flow.getAllEdgePaths().get(props.id) ?? null
+		});
+	}, [
+		props.flow,
+		props.geometryObserver,
+		props.id
+	]);
 	if (!edge || !pathData) return null;
+	const attrs = getProjectedEdgeAttrs({
+		graph,
+		edge,
+		projections: props.projections
+	});
+	const focusable = props.flow.internals.engine.resolveEntityConfig(edge).focusable;
+	const focusProps = {
+		role: "group",
+		"aria-roledescription": "flow edge",
+		"aria-label": props.flow.internals.engine.getAriaLabel(props.id),
+		"aria-selected": selected,
+		tabIndex: focusable ? 0 : void 0,
+		onFocus: () => props.flow.internals.store.trigger.focus({ entityId: props.id })
+	};
 	if (props.renderEdge) return /* @__PURE__ */ jsxs("g", {
+		ref,
+		...focusProps,
 		"data-entity-id": props.id,
 		"data-flow-selected": selected ? "true" : void 0,
-		style: { pointerEvents: "auto" },
+		className: classNames$1("stately-flow__edge", attrs.className),
+		style: {
+			pointerEvents: "auto",
+			outline: focused ? "2px solid #2563eb" : "none"
+		},
 		children: [/* @__PURE__ */ jsx(EdgeHitTarget, {
 			flow: props.flow,
 			edge,
@@ -514,19 +881,28 @@ const EdgeView = memo(function EdgeView(props) {
 			flow: props.flow,
 			edge,
 			pathData,
+			attrs,
 			selected,
 			hovered,
 			highlights
 		})]
 	});
 	return /* @__PURE__ */ jsx("g", {
+		ref,
+		...focusProps,
 		"data-entity-id": props.id,
 		"data-flow-selected": selected ? "true" : void 0,
-		style: { pointerEvents: "auto" },
+		className: classNames$1("stately-flow__edge", attrs.className),
+		style: {
+			pointerEvents: "auto",
+			opacity: attrs.opacity,
+			outline: focused ? "2px solid #2563eb" : "none"
+		},
 		children: /* @__PURE__ */ jsx(DefaultEdge, {
 			flow: props.flow,
 			edge,
 			pathData,
+			attrs,
 			selected
 		})
 	});
@@ -534,17 +910,22 @@ const EdgeView = memo(function EdgeView(props) {
 /** The in-progress connection gesture's preview edge (renders only mid-gesture). */
 function ConnectionPreviewEdge(props) {
 	const connection = useFlowSelector((context) => context.connection);
-	if (!connection?.active) return null;
+	if (!connection?.active || connection.preview === false) return null;
 	const previewGraph = createConnectionPreviewGraph(props.flow.getSnapshot().graph, connection);
 	const pathData = props.flow.getAllEdgePaths({ graph: previewGraph }).get(CONNECTION_PREVIEW_EDGE_ID);
 	const edge = previewGraph.edges.find((candidate) => candidate.id === CONNECTION_PREVIEW_EDGE_ID);
 	if (!edge || !pathData) return null;
 	return /* @__PURE__ */ jsx("g", {
 		style: { pointerEvents: "none" },
-		children: props.renderEdge ? props.renderEdge({
+		children: props.renderConnectionLine ? props.renderConnectionLine({
+			connection,
+			pathData,
+			isValid: connection.isValid
+		}) : props.renderEdge ? props.renderEdge({
 			flow: props.flow,
 			edge,
 			pathData,
+			attrs: {},
 			selected: false,
 			hovered: false,
 			highlights: []
@@ -552,22 +933,26 @@ function ConnectionPreviewEdge(props) {
 			flow: props.flow,
 			edge,
 			pathData,
+			attrs: {},
 			selected: false,
 			preview: true
 		})
 	});
 }
 function DefaultEdge(props) {
-	return /* @__PURE__ */ jsx(Fragment, { children: props.pathData.segments.map((segment, index) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [props.pathData.segments.map((segment, index) => {
 		const d = pathToSVG(segment);
 		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
 			d,
+			"data-flow-edge-segment": index,
 			fill: "none",
-			stroke: props.preview ? props.edge.data?.isValid === false ? "#dc2626" : props.edge.data?.isValid === true ? "#16a34a" : "#0f766e" : props.selected ? "#2563eb" : "#94a3b8",
+			stroke: props.attrs.color ?? (props.preview ? props.edge.data?.isValid === false ? "#dc2626" : props.edge.data?.isValid === true ? "#16a34a" : "#0f766e" : props.selected ? "#2563eb" : "#94a3b8"),
 			strokeDasharray: props.preview ? "6 6" : void 0,
-			strokeWidth: props.selected ? 3 : 2
+			strokeWidth: props.attrs.strokeWidth ?? (props.selected ? 3 : 2),
+			style: props.attrs.style
 		}), props.preview ? null : /* @__PURE__ */ jsx("path", {
 			d,
+			"data-flow-edge-segment": index,
 			"data-entity-id": props.edge.id,
 			fill: "none",
 			stroke: "#000",
@@ -575,12 +960,18 @@ function DefaultEdge(props) {
 			strokeWidth: 18,
 			pointerEvents: "stroke"
 		})] }, index);
-	}) });
+	}), props.preview ? null : /* @__PURE__ */ jsx(EdgeEndpointHandles, {
+		flow: props.flow,
+		edge: props.edge,
+		pathData: props.pathData,
+		selected: props.selected
+	})] });
 }
 function EdgeHitTarget(props) {
-	return /* @__PURE__ */ jsx(Fragment, { children: props.pathData.segments.map((segment, index) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [props.pathData.segments.map((segment, index) => {
 		return /* @__PURE__ */ jsx("path", {
 			d: pathToSVG(segment),
+			"data-flow-edge-segment": index,
 			"data-entity-id": props.edge.id,
 			fill: "none",
 			stroke: "#000",
@@ -588,88 +979,225 @@ function EdgeHitTarget(props) {
 			strokeWidth: 18,
 			pointerEvents: "stroke"
 		}, index);
-	}) });
+	}), /* @__PURE__ */ jsx(EdgeEndpointHandles, { ...props })] });
+}
+function EdgeEndpointHandles(props) {
+	if (!props.selected) return null;
+	if (!props.flow.internals.engine.resolveEntityConfig(props.edge).reconnectable) return null;
+	const first = props.pathData.segments[0]?.points[0];
+	const last = props.pathData.segments.at(-1)?.points.at(-1);
+	if (!first || !last) return null;
+	const radius = 6 / props.flow.getContext().viewport.zoom;
+	const strokeWidth = 2 / props.flow.getContext().viewport.zoom;
+	return /* @__PURE__ */ jsx(Fragment, { children: [{
+		end: "source",
+		point: first,
+		cursor: "crosshair"
+	}, {
+		end: "target",
+		point: last,
+		cursor: "crosshair"
+	}].map(({ end, point, cursor }) => /* @__PURE__ */ jsx("circle", {
+		"data-entity-id": props.edge.id,
+		"data-flow-part": `edge-endpoint:${end}`,
+		"data-flow-edge-endpoint": end,
+		cx: point.x,
+		cy: point.y,
+		r: radius,
+		fill: "#ffffff",
+		stroke: "#2563eb",
+		strokeWidth,
+		style: {
+			cursor,
+			pointerEvents: "auto"
+		}
+	}, end)) });
 }
 function EdgeLabelLayer(props) {
 	const instance = useFlowInstance();
 	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
+	const renderEdgeLabel = props.renderEdgeLabel;
+	const graphEdgeIds = useFlowSelector((context) => context.graph.edges.map((edge) => edge.id), { isEqual: stringArraysEqual });
+	const durableLabelIds = useFlowSelector((context) => context.graph.edges.filter((edge) => edge.label).map((edge) => edge.id), { isEqual: stringArraysEqual });
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": "edge labels",
+		className: "stately-flow__edge-labels",
 		style: {
 			position: "absolute",
 			inset: 0,
 			pointerEvents: "none"
 		},
-		children: useFlowSelector((context) => context.graph.edges.filter((edge) => edge.label).map((edge) => edge.id), { isEqual: stringArraysEqual }).map((id) => {
+		children: useMemo(() => {
+			const ids = new Set(durableLabelIds);
+			const existing = new Set(graphEdgeIds);
+			for (const entry of props.projections ?? []) for (const id of Object.keys(entry.projection.edges ?? {})) if (existing.has(id)) ids.add(id);
+			return [...ids];
+		}, [
+			durableLabelIds,
+			graphEdgeIds,
+			props.projections
+		]).map((id) => {
 			if (renderableIds && !renderableIds.edgeIds.has(id)) return null;
 			return /* @__PURE__ */ jsx(EdgeLabelItem, {
 				flow: instance,
-				id
+				geometryObserver: props.geometryObserver,
+				id,
+				projections: props.projections,
+				renderEdgeLabel
 			}, id);
 		})
 	});
 }
 const EdgeLabelItem = memo(function EdgeLabelItem(props) {
-	const { edge, pathData, selected } = useFlowEntity(props.id, (context) => ({
+	const { graph, edge, pathData, selected, dragging, hovered, highlights } = useFlowEntity(props.id, (context) => ({
+		graph: context.graph,
 		edge: props.flow.getEdge(props.id) ?? null,
 		pathData: props.flow.getAllEdgePaths().get(props.id) ?? null,
-		selected: context.selection.has(props.id)
-	}), { isEqual: (a, b) => a.edge === b.edge && a.pathData === b.pathData && a.selected === b.selected });
-	if (!edge?.label || !pathData?.labelBounds) return null;
+		geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
+		selected: context.selection.has(props.id),
+		dragging: context.draggedEntityId === props.id,
+		hovered: context.hoveredEntityIds.has(props.id),
+		highlights: props.flow.internals.engine.getHighlights(props.id)
+	}), { isEqual: (a, b) => {
+		if (!(a.selected === b.selected && a.dragging === b.dragging && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
+		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
+	} });
+	if (!edge || !pathData) return null;
+	const attrs = getProjectedEdgeAttrs({
+		graph,
+		edge,
+		projections: props.projections
+	});
+	const bounds = pathData.labelBounds ?? projectedEdgeLabelBounds(pathData, attrs.label);
+	if (!edge.label && attrs.label === void 0 || !bounds) return null;
 	return /* @__PURE__ */ jsx(EdgeLabelView, {
 		flow: props.flow,
+		geometryObserver: props.geometryObserver,
 		edge,
-		bounds: pathData.labelBounds,
-		selected
+		attrs,
+		bounds,
+		pathData,
+		selected,
+		dragging,
+		hovered,
+		highlights,
+		projections: props.projections,
+		renderEdgeLabel: props.renderEdgeLabel
 	});
 });
 function EdgeLabelView(props) {
 	const ref = useRef(null);
-	const observer = useMemo(() => createMeasurementObserver(props.flow.store), [props.flow.store]);
+	const observer = useMeasurementObserver();
 	useLayoutEffect(() => {
 		const element = ref.current;
 		if (!element) return;
 		observer.observe(element, { edgeId: props.edge.id });
-		return () => observer.disconnect();
+		return () => observer.unobserve(element);
 	}, [observer, props.edge.id]);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		return props.geometryObserver.observeRect(element, {
+			id: props.edge.id,
+			autoSize: props.edge.label?.autoSize,
+			getRect: () => {
+				const pathData = props.flow.getAllEdgePaths().get(props.edge.id);
+				if (!pathData) return null;
+				const edge = props.flow.getEdge(props.edge.id);
+				if (!edge) return null;
+				const attrs = getProjectedEdgeAttrs({
+					graph: props.flow.getSnapshot().graph,
+					edge,
+					projections: props.projections
+				});
+				return pathData.labelBounds ?? projectedEdgeLabelBounds(pathData, attrs.label);
+			}
+		});
+	}, [
+		props.edge.id,
+		props.edge.label?.autoSize,
+		props.flow,
+		props.geometryObserver,
+		props.projections
+	]);
 	const text = (props.edge.label?.data)?.text;
+	const label = props.attrs.label ?? String(text ?? props.edge.id);
+	const customLabel = props.renderEdgeLabel?.({
+		flow: props.flow,
+		edge: props.edge,
+		pathData: props.pathData,
+		attrs: props.attrs,
+		bounds: props.bounds,
+		selected: props.selected,
+		dragging: props.dragging,
+		hovered: props.hovered,
+		highlights: props.highlights
+	});
+	const defaultStyle = props.renderEdgeLabel ? void 0 : {
+		padding: "4px 8px",
+		border: `1px solid ${props.selected ? "#2563eb" : props.attrs.color ?? "#cbd5e1"}`,
+		borderRadius: 999,
+		background: "#fff",
+		color: "#334155",
+		display: "grid",
+		placeItems: "center",
+		cursor: "grab",
+		font: "600 12px/1 system-ui, sans-serif"
+	};
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-entity-id": props.edge.id,
 		"data-flow-edge-label": "",
+		"data-flow-selected": props.selected ? "true" : void 0,
+		"data-flow-dragging": props.dragging ? "true" : void 0,
+		className: classNames$1("stately-flow__edge-label", props.attrs.className),
 		style: {
 			position: "absolute",
-			left: props.bounds.x,
-			top: props.bounds.y,
-			width: props.bounds.width,
-			height: props.bounds.height,
+			left: 0,
+			top: 0,
+			transform: `translate(${props.bounds.x}px, ${props.bounds.y}px)`,
+			width: props.edge.label?.autoSize ? void 0 : props.bounds.width,
+			height: props.edge.label?.autoSize ? void 0 : props.bounds.height,
 			boxSizing: "border-box",
-			padding: "4px 8px",
-			border: `1px solid ${props.selected ? "#2563eb" : "#cbd5e1"}`,
-			borderRadius: 999,
-			background: "#fff",
-			color: "#334155",
-			display: "grid",
-			placeItems: "center",
-			cursor: "grab",
-			font: "600 12px/1 system-ui, sans-serif",
+			...defaultStyle,
 			pointerEvents: "auto",
-			userSelect: "none"
+			userSelect: "none",
+			opacity: props.attrs.opacity,
+			...props.attrs.style
 		},
-		children: String(text ?? props.edge.id)
+		children: props.renderEdgeLabel ? customLabel : label
 	});
 }
+function projectedEdgeLabelBounds(pathData, label) {
+	if (label === void 0) return null;
+	const points = pathData.segments.flatMap((segment) => segment.points);
+	if (!points.length) return null;
+	const middle = points[Math.floor(points.length / 2)];
+	return {
+		x: middle.x - 40,
+		y: middle.y - 12,
+		width: 80,
+		height: 24
+	};
+}
 function NodeLayer(props) {
 	const instance = useFlowInstance();
 	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
-	const nodeIds = useFlowSelector((context) => {
-		const depths = nodeDepths(context.graph.nodes);
-		return context.graph.nodes.map((node) => node.id).sort((a, b) => (depths.get(a) ?? 0) - (depths.get(b) ?? 0));
-	}, { isEqual: stringArraysEqual });
-	const observer = useMemo(() => createMeasurementObserver(instance.store), [instance]);
-	useLayoutEffect(() => () => observer.disconnect(), [observer]);
+	const nodePaintEntries = useFlowSelector((context) => {
+		const paintOrder = new Map(getOrderedEntities(instance, context).nodes.map((node, orderIndex) => [node.id, orderIndex]));
+		return context.graph.nodes.flatMap((node) => {
+			const orderIndex = paintOrder.get(node.id);
+			return orderIndex === void 0 ? [] : [{
+				id: node.id,
+				orderIndex
+			}];
+		});
+	}, { isEqual: nodePaintEntriesEqual });
+	const observer = useMeasurementObserver();
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": "nodes",
+		className: "stately-flow__nodes",
 		"data-flow-canvas-layer": true,
 		style: {
 			position: "absolute",
@@ -677,35 +1205,100 @@ function NodeLayer(props) {
 			transformOrigin: "0 0",
 			pointerEvents: "none"
 		},
-		children: nodeIds.map((id) => {
+		children: nodePaintEntries.map(({ id, orderIndex }) => {
 			if (renderableIds && !renderableIds.nodeIds.has(id)) return null;
 			return /* @__PURE__ */ jsx(NodeView, {
 				flow: instance,
+				geometryObserver: props.geometryObserver,
 				id,
+				orderIndex,
 				observer,
+				projections: props.projections,
 				renderNode: props.renderNode
 			}, id);
 		})
 	});
 }
+function getOrderedEntities(flow, context) {
+	const maybeEngine = flow.internals.engine;
+	const visibleOrdered = maybeEngine.getVisibleEntities?.();
+	if (visibleOrdered) return visibleOrdered;
+	const ordered = maybeEngine.getEntityOrder?.();
+	if (ordered) return ordered;
+	const depths = nodeDepths(context.graph.nodes);
+	const nodeOrder = new Map(context.graph.nodes.map((node, index) => [node.id, index]));
+	const edgeOrder = new Map(context.graph.edges.map((edge, index) => [edge.id, index]));
+	return {
+		nodes: [...context.graph.nodes].sort((a, b) => {
+			const depthDelta = (depths.get(a.id) ?? 0) - (depths.get(b.id) ?? 0);
+			if (depthDelta !== 0) return depthDelta;
+			const zDelta = (a.zIndex ?? 0) - (b.zIndex ?? 0);
+			if (zDelta !== 0) return zDelta;
+			const selectedDelta = Number(context.selection.has(a.id)) - Number(context.selection.has(b.id));
+			if (selectedDelta !== 0) return selectedDelta;
+			return (nodeOrder.get(a.id) ?? 0) - (nodeOrder.get(b.id) ?? 0);
+		}),
+		edges: [...context.graph.edges].sort((a, b) => {
+			const depthDelta = Math.max(depths.get(a.sourceId) ?? 0, depths.get(a.targetId) ?? 0) - Math.max(depths.get(b.sourceId) ?? 0, depths.get(b.targetId) ?? 0);
+			if (depthDelta !== 0) return depthDelta;
+			const zDelta = (a.zIndex ?? 0) - (b.zIndex ?? 0);
+			if (zDelta !== 0) return zDelta;
+			return (edgeOrder.get(a.id) ?? 0) - (edgeOrder.get(b.id) ?? 0);
+		})
+	};
+}
 function rectsShallowEqual(a, b) {
 	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
+const ENTITY_GEOMETRY_KEYS = /* @__PURE__ */ new Set([
+	"x",
+	"y",
+	"dx",
+	"dy",
+	"width",
+	"height",
+	"measured"
+]);
+const EDGE_GEOMETRY_KEYS = /* @__PURE__ */ new Set([...ENTITY_GEOMETRY_KEYS, "label"]);
+function shallowObjectEqualExcept(a, b, ignored) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const left = a;
+	const right = b;
+	const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+	for (const key of keys) if (!ignored.has(key) && left[key] !== right[key]) return false;
+	return true;
+}
+function nodeRenderContentEqual(a, b) {
+	return shallowObjectEqualExcept(a, b, ENTITY_GEOMETRY_KEYS);
+}
+function edgeRenderContentEqual(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return shallowObjectEqualExcept(a, b, EDGE_GEOMETRY_KEYS) && shallowObjectEqualExcept(a.label, b.label, ENTITY_GEOMETRY_KEYS);
+}
 const NodeView = memo(function NodeView(props) {
 	const ref = useRef(null);
-	const { node, hidden, selected, dragging, focused, hovered, highlights, bounds } = useFlowEntity(props.id, (context) => {
+	const { graph, node, hidden, selected, dragging, focused, hovered, highlights, bounds } = useFlowEntity(props.id, (context) => {
 		const current = props.flow.getNode(props.id) ?? null;
 		return {
+			graph: context.graph,
 			node: current,
-			hidden: !current || props.flow.engine.resolveEntityConfig(current).hidden,
+			geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
+			hidden: !current || props.flow.internals.engine.resolveEntityConfig(current).hidden,
 			selected: context.selection.has(props.id),
-			dragging: context.draggedEntityId === props.id,
+			dragging: context.canvasState === "dragging" && context.selection.has(props.id),
 			focused: context.focusedEntityId === props.id,
 			hovered: context.hoveredEntityIds.has(props.id),
-			highlights: props.flow.engine.getHighlights(props.id),
-			bounds: context.resizingEntityId === props.id && context.resizeCorners ? props.flow.engine.getResizeBounds() ?? props.flow.engine.resolvedBounds(props.id) : props.flow.engine.resolvedBounds(props.id)
+			highlights: props.flow.internals.engine.getHighlights(props.id),
+			bounds: context.resizingEntityId === props.id && context.resizeCorners ? props.flow.internals.engine.getResizeBounds() ?? props.flow.internals.engine.visualBounds(props.id) : props.flow.internals.engine.visualBounds(props.id)
 		};
-	}, { isEqual: (a, b) => a.node === b.node && a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights && rectsShallowEqual(a.bounds, b.bounds) });
+	}, { isEqual: (a, b) => {
+		if (!(a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (a.geometryActive) return nodeRenderContentEqual(a.node, b.node);
+		return a.graph === b.graph && a.node === b.node && rectsShallowEqual(a.bounds, b.bounds);
+	} });
+	const contentOwnsSize = Boolean(node?.autoSize && node.style?.customWidth === void 0 && node.style?.customHeight === void 0);
 	useLayoutEffect(() => {
 		const element = ref.current;
 		if (!element) return;
@@ -719,7 +1312,30 @@ const NodeView = memo(function NodeView(props) {
 		props.flow,
 		hidden
 	]);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		return props.geometryObserver.observeRect(element, {
+			id: props.id,
+			autoSize: contentOwnsSize,
+			getRect: () => {
+				const context = props.flow.getSnapshot();
+				return context.resizingEntityId === props.id && context.resizeCorners ? props.flow.internals.engine.getResizeBounds() ?? props.flow.internals.engine.visualBounds(props.id) : props.flow.internals.engine.visualBounds(props.id);
+			}
+		});
+	}, [
+		contentOwnsSize,
+		props.flow,
+		props.geometryObserver,
+		props.id
+	]);
 	if (!node || hidden) return null;
+	const attrs = getProjectedNodeAttrs({
+		graph,
+		node,
+		projections: props.projections
+	});
+	const focusable = props.flow.internals.engine.resolveEntityConfig(node).focusable;
 	return /* @__PURE__ */ jsx(NodeRenderContextProvider, {
 		value: {
 			node,
@@ -729,26 +1345,31 @@ const NodeView = memo(function NodeView(props) {
 			ref,
 			"data-entity-id": props.id,
 			"data-flow-selected": selected ? "true" : void 0,
+			className: classNames$1("stately-flow__node", attrs.className),
 			role: "group",
 			"aria-roledescription": "flow node",
-			"aria-label": props.flow.engine.getAriaLabel(props.id) + (selected ? ", selected" : ""),
-			tabIndex: 0,
-			onFocus: () => props.flow.trigger.focus({ entityId: props.id }),
+			"aria-selected": selected,
+			"aria-label": props.flow.internals.engine.getAriaLabel(props.id) + (selected ? ", selected" : ""),
+			tabIndex: focusable ? 0 : void 0,
+			onFocus: () => props.flow.internals.store.trigger.focus({ entityId: props.id }),
 			style: {
 				...nodePositionStyle(bounds, {
-					autoSize: node.autoSize,
+					autoSize: contentOwnsSize,
 					dragging
 				}),
 				cursor: dragging ? "grabbing" : "grab",
 				pointerEvents: "auto",
 				userSelect: "none",
+				zIndex: props.orderIndex,
 				outline: focused ? "2px solid #2563eb" : "none",
-				outlineOffset: 2
+				outlineOffset: 2,
+				opacity: attrs.opacity
 			},
 			children: props.renderNode ? props.renderNode({
 				flow: props.flow,
 				node,
 				bounds,
+				attrs,
 				selected,
 				dragging,
 				hovered,
@@ -757,6 +1378,7 @@ const NodeView = memo(function NodeView(props) {
 				flow: props.flow,
 				node,
 				bounds,
+				attrs,
 				selected,
 				dragging,
 				hovered,
@@ -765,6 +1387,7 @@ const NodeView = memo(function NodeView(props) {
 				flow: props.flow,
 				node,
 				bounds,
+				attrs,
 				selected,
 				dragging,
 				hovered,
@@ -779,8 +1402,10 @@ const NodeView = memo(function NodeView(props) {
 * `engine.getGroupGeometry`; custom renderers can do the same.
 */
 function DefaultGroupNode(props) {
-	const geometry = props.flow.engine.getGroupGeometry(props.node.id);
+	const geometry = props.flow.internals.engine.getGroupGeometry(props.node.id);
 	const label = props.node.data?.label;
+	const badges = decorationsToArray(props.attrs.badge);
+	const title = decorationTitle(props.attrs.tooltip);
 	if (!geometry) return /* @__PURE__ */ jsx(DefaultNode, { ...props });
 	const relative = (rect) => ({
 		left: rect.x - props.bounds.x,
@@ -793,13 +1418,14 @@ function DefaultGroupNode(props) {
 		position: "absolute",
 		...relative(geometry.childArea),
 		boxSizing: "border-box",
-		border: `2px dashed ${dropTarget ? "#16a34a" : props.selected ? "#93c5fd" : "#cbd5e1"}`,
+		border: `2px dashed ${dropTarget ? "#16a34a" : props.selected ? "#93c5fd" : props.attrs.color ?? "#cbd5e1"}`,
 		...dropTarget ? { background: "rgba(22, 163, 74, 0.08)" } : null,
 		borderRadius: 10,
 		background: "rgba(148, 163, 184, 0.07)",
 		pointerEvents: "none"
-	} }), /* @__PURE__ */ jsx("div", {
+	} }), /* @__PURE__ */ jsxs("div", {
 		"data-flow-drag-handle": true,
+		title,
 		style: {
 			position: "absolute",
 			...relative(geometry.contentBounds),
@@ -807,37 +1433,65 @@ function DefaultGroupNode(props) {
 			display: "flex",
 			alignItems: "center",
 			padding: "0 12px",
-			border: `2px solid ${props.selected ? "#2563eb" : "#94a3b8"}`,
+			border: `2px solid ${props.selected ? "#2563eb" : props.attrs.color ?? "#94a3b8"}`,
 			borderRadius: 8,
 			background: props.selected ? "#eff6ff" : "#f8fafc",
 			color: "#0f172a",
 			font: "600 13px/1.2 system-ui, sans-serif",
 			cursor: props.dragging ? "grabbing" : "grab",
-			userSelect: "none"
+			userSelect: "none",
+			...props.attrs.style
 		},
-		children: String(label ?? props.node.id)
+		children: [/* @__PURE__ */ jsx("span", { children: String(label ?? props.node.id) }), badges.length ? /* @__PURE__ */ jsx("span", {
+			style: defaultBadgeListStyle,
+			children: badges
+		}) : null]
 	})] });
 }
 function DefaultNode(props) {
 	const label = props.node.data?.label;
-	return /* @__PURE__ */ jsx("div", {
+	const badges = decorationsToArray(props.attrs.badge);
+	return /* @__PURE__ */ jsxs("div", {
+		title: decorationTitle(props.attrs.tooltip),
 		style: {
+			position: "relative",
 			display: "grid",
 			placeItems: "center",
 			width: "100%",
 			height: "100%",
 			boxSizing: "border-box",
 			padding: "10px 14px",
-			border: `2px solid ${props.selected ? "#2563eb" : props.hovered ? "#94a3b8" : "#cbd5e1"}`,
+			border: `2px solid ${props.selected ? "#2563eb" : props.attrs.color ?? (props.hovered ? "#94a3b8" : "#cbd5e1")}`,
 			borderRadius: 8,
 			background: props.selected ? "#eff6ff" : "#ffffff",
 			color: "#0f172a",
 			font: "600 14px/1.2 system-ui, sans-serif",
-			boxShadow: props.selected ? "0 0 0 4px rgba(37, 99, 235, 0.16)" : "0 1px 2px rgba(15, 23, 42, 0.1)"
+			boxShadow: props.selected ? "0 0 0 4px rgba(37, 99, 235, 0.16)" : "0 1px 2px rgba(15, 23, 42, 0.1)",
+			...props.attrs.style
 		},
-		children: String(label ?? props.node.id)
+		children: [/* @__PURE__ */ jsx("span", { children: String(label ?? props.node.id) }), badges.length ? /* @__PURE__ */ jsx("span", {
+			style: defaultBadgeListStyle,
+			children: badges
+		}) : null]
 	});
 }
+const defaultBadgeListStyle = {
+	position: "absolute",
+	top: -8,
+	right: -8,
+	display: "flex",
+	gap: 4,
+	alignItems: "center"
+};
+function decorationsToArray(value) {
+	if (value === void 0) return [];
+	return Array.isArray(value) ? value : [value];
+}
+function decorationTitle(value) {
+	if (value === void 0) return void 0;
+	const text = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string" || typeof item === "number").map(String);
+	return text.length ? text.join("\n") : void 0;
+}
 //#endregion
 //#region src/FlowToolbar.tsx
 /** Border-box size of an element, kept current via ResizeObserver. */
@@ -877,7 +1531,7 @@ function useFlowToolbar(options = {}) {
 	const anchor = useFlowSelector((context) => {
 		const ids = options.ids ?? [...context.selection];
 		if (ids.length === 0) return null;
-		const canvasRect = flow.engine.getToolbarAnchor(ids);
+		const canvasRect = flow.internals.engine.getToolbarAnchor(ids);
 		if (!canvasRect) return null;
 		const zoom = context.viewport.zoom;
 		return {
@@ -972,7 +1626,7 @@ function MiniMap(props) {
 			x: event.clientX - rect.left,
 			y: event.clientY - rect.top
 		});
-		flow.trigger.setViewport(viewportCenteredOn(canvasPoint, viewportSize, viewport.zoom));
+		flow.internals.store.trigger.setViewport(viewportCenteredOn(canvasPoint, viewportSize, viewport.zoom));
 	};
 	return /* @__PURE__ */ jsxs("svg", {
 		"aria-label": "minimap",
@@ -1006,7 +1660,7 @@ function MiniMap(props) {
 			...props.style
 		},
 		children: [nodes.map((node) => {
-			const rect = projection.rectToMinimap(flow.engine.resolvedBounds(node.id));
+			const rect = projection.rectToMinimap(flow.internals.engine.visualBounds(node.id));
 			return props.renderNode?.(node, rect) ?? /* @__PURE__ */ jsx("rect", {
 				x: rect.x,
 				y: rect.y,
@@ -1027,6 +1681,60 @@ function MiniMap(props) {
 	});
 }
 //#endregion
+//#region src/Panel.tsx
+const placement = {
+	"top-left": {
+		top: 12,
+		left: 12
+	},
+	"top-center": {
+		top: 12,
+		left: "50%",
+		transform: "translateX(-50%)"
+	},
+	"top-right": {
+		top: 12,
+		right: 12
+	},
+	"center-left": {
+		top: "50%",
+		left: 12,
+		transform: "translateY(-50%)"
+	},
+	"center-right": {
+		top: "50%",
+		right: 12,
+		transform: "translateY(-50%)"
+	},
+	"bottom-left": {
+		bottom: 12,
+		left: 12
+	},
+	"bottom-center": {
+		bottom: 12,
+		left: "50%",
+		transform: "translateX(-50%)"
+	},
+	"bottom-right": {
+		bottom: 12,
+		right: 12
+	}
+};
+function Panel(props) {
+	const { position = "top-left", style, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-flow-panel": position,
+		...rest,
+		style: {
+			position: "absolute",
+			pointerEvents: "auto",
+			...placement[position],
+			...style
+		},
+		children: props.children
+	});
+}
+//#endregion
 //#region src/Controls.tsx
 const buttonStyle = {
 	width: 28,
@@ -1046,18 +1754,15 @@ const buttonStyle = {
 */
 function Controls(props) {
 	const flow = useFlowInstance();
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Panel, {
 		role: "toolbar",
 		"aria-label": "canvas controls",
+		position: props.position ?? "bottom-left",
 		className: props.className,
 		style: {
-			position: "absolute",
-			left: 12,
-			bottom: 12,
 			display: "flex",
 			flexDirection: "column",
 			gap: 4,
-			pointerEvents: "auto",
 			...props.style
 		},
 		children: [
@@ -1065,21 +1770,21 @@ function Controls(props) {
 				type: "button",
 				"aria-label": "zoom in",
 				style: buttonStyle,
-				onClick: () => flow.trigger.zoomBy({ factor: 1.2 }),
+				onClick: () => flow.internals.store.trigger.zoomBy({ factor: 1.2 }),
 				children: "+"
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "zoom out",
 				style: buttonStyle,
-				onClick: () => flow.trigger.zoomBy({ factor: 1 / 1.2 }),
+				onClick: () => flow.internals.store.trigger.zoomBy({ factor: 1 / 1.2 }),
 				children: "−"
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "fit view",
 				style: buttonStyle,
-				onClick: () => flow.trigger.fitView({ padding: .1 }),
+				onClick: () => flow.internals.store.trigger.fitView({ padding: .1 }),
 				children: "⛶"
 			}),
 			props.children
@@ -1089,22 +1794,84 @@ function Controls(props) {
 //#endregion
 //#region src/EntityAnchor.tsx
 function EntityAnchor(props) {
+	if (props.isVisible === false) return null;
+	if ("bounds" in props && props.bounds) return /* @__PURE__ */ jsx(CanvasEntityAnchor, { ...props });
+	return /* @__PURE__ */ jsx(RelativeEntityAnchor, { ...props });
+}
+function CanvasEntityAnchor(props) {
 	const viewport = useFlowSelector((context) => context.viewport);
 	const transform = getAnchorTransform(props.bounds, viewport, props.anchor);
+	const { bounds: _bounds, anchor: _anchor, inverseScale, isVisible: _isVisible, children, className, style, ...divProps } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: props.className,
+		...divProps,
+		"data-flow-entity-anchor": "",
+		className: classNames("stately-flow__entity-anchor", className),
 		style: {
 			position: "absolute",
 			left: transform.x,
 			top: transform.y,
-			transform: props.inverseScale ? `translate(-50%, -50%) scale(${transform.scale})` : "translate(-50%, -50%)",
+			transform: inverseScale ? `translate(-50%, -50%) scale(${transform.scale})` : "translate(-50%, -50%)",
 			transformOrigin: "center",
 			pointerEvents: "auto",
-			...props.style
+			...style
 		},
-		children: props.children
+		children
+	});
+}
+function RelativeEntityAnchor(props) {
+	const { side, anchor = defaultAnchorPoint(props.side), align = "center", offset = 0, inverseScale, isVisible: _isVisible, children, className, style, ...divProps } = props;
+	const positionStyle = relativePositionStyle(side, align, anchor, offset, !!inverseScale);
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		"data-flow-entity-anchor": "",
+		"data-flow-entity-anchor-side": side,
+		className: classNames("stately-flow__entity-anchor", `stately-flow__entity-anchor-${side}`, className),
+		style: {
+			position: "absolute",
+			zIndex: 20,
+			pointerEvents: "auto",
+			...positionStyle,
+			transformOrigin: inverseScale ? anchorTransformOrigin(anchor) : void 0,
+			...style
+		},
+		children
 	});
 }
+function relativePositionStyle(side, align, anchor, offset, inverseScale) {
+	const crossAxis = align === "start" ? "0%" : align === "end" ? "100%" : "50%";
+	const translate = anchorTranslate(anchor);
+	const signedOffset = side === "top" || side === "left" ? -offset : offset;
+	const offsetValue = inverseScale ? `calc(${signedOffset}px * var(--flow-inverse-zoom, 1))` : `${signedOffset}px`;
+	const offsetTransform = side === "top" || side === "bottom" ? `translateY(${offsetValue})` : `translateX(${offsetValue})`;
+	const scaleTransform = inverseScale ? " scale(var(--flow-inverse-zoom, 1))" : "";
+	return {
+		left: side === "left" ? 0 : side === "right" ? "100%" : crossAxis,
+		top: side === "top" ? 0 : side === "bottom" ? "100%" : crossAxis,
+		transform: `translate(${translate.x}, ${translate.y}) ${offsetTransform}${scaleTransform}`
+	};
+}
+function defaultAnchorPoint(side) {
+	switch (side) {
+		case "top": return "bottom-center";
+		case "bottom": return "top-center";
+		case "left": return "center-right";
+		case "right": return "center-left";
+	}
+}
+function anchorTranslate(anchor) {
+	const [vertical, horizontal] = anchor === "center" ? ["center", "center"] : anchor.split("-");
+	return {
+		x: horizontal === "left" ? "0%" : horizontal === "right" ? "-100%" : "-50%",
+		y: vertical === "top" ? "0%" : vertical === "bottom" ? "-100%" : "-50%"
+	};
+}
+function anchorTransformOrigin(anchor) {
+	const [vertical, horizontal] = anchor === "center" ? ["center", "center"] : anchor.split("-");
+	return `${horizontal} ${vertical}`;
+}
+function classNames(...values) {
+	return values.filter(Boolean).join(" ");
+}
 //#endregion
 //#region src/Port.tsx
 /**
@@ -1122,11 +1889,11 @@ function Port(props) {
 	const { node } = useNodeRenderContext();
 	const ref = useRef(null);
 	const observerRef = useRef(null);
+	const observer = useMeasurementObserver();
 	const measured = props.measured ?? true;
 	useLayoutEffect(() => {
 		const element = ref.current;
 		if (!element || !measured) return;
-		const observer = createMeasurementObserver(flow.store);
 		observerRef.current = observer;
 		observer.observe(element, {
 			nodeId: node.id,
@@ -1134,10 +1901,10 @@ function Port(props) {
 		});
 		return () => {
 			observerRef.current = null;
-			observer.disconnect();
+			observer.unobserve(element);
 		};
 	}, [
-		flow.store,
+		observer,
 		node.id,
 		props.name,
 		measured
@@ -1165,6 +1932,128 @@ function Port(props) {
 	});
 }
 //#endregion
+//#region src/DragHandle.tsx
+/**
+* Marks a region inside a custom node as the *only* draggable area. When a node
+* renders a `<DragHandle>`, pointer presses elsewhere on the node no longer
+* start a drag (they select/pass through) — the input runtime only begins a
+* move when the press lands inside an element carrying `data-flow-drag-handle`.
+*
+* Render it anywhere inside your node's markup:
+*
+* ```tsx
+* function MyNode(props) {
+*   return (
+*     <div>
+*       <DragHandle>⠿ title bar</DragHandle>
+*       <div>…non-draggable body…</div>
+*     </div>
+*   );
+* }
+* ```
+*/
+function DragHandle({ children, style, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-flow-drag-handle": "",
+		style: {
+			cursor: "grab",
+			...style
+		},
+		...rest,
+		children
+	});
+}
+//#endregion
+//#region src/NodeResizer.tsx
+const DEFAULT_HANDLES = [
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+];
+const HANDLE_STYLE = {
+	top: {
+		left: "50%",
+		top: 0,
+		cursor: "ns-resize"
+	},
+	right: {
+		left: "100%",
+		top: "50%",
+		cursor: "ew-resize"
+	},
+	bottom: {
+		left: "50%",
+		top: "100%",
+		cursor: "ns-resize"
+	},
+	left: {
+		left: 0,
+		top: "50%",
+		cursor: "ew-resize"
+	},
+	"top-left": {
+		left: 0,
+		top: 0,
+		cursor: "nwse-resize"
+	},
+	"top-right": {
+		left: "100%",
+		top: 0,
+		cursor: "nesw-resize"
+	},
+	"bottom-left": {
+		left: 0,
+		top: "100%",
+		cursor: "nesw-resize"
+	},
+	"bottom-right": {
+		left: "100%",
+		top: "100%",
+		cursor: "nwse-resize"
+	}
+};
+function NodeResizer(props) {
+	const { node } = useNodeRenderContext();
+	const selected = useFlowSelector((context) => context.selection.has(node.id));
+	if (!(props.isVisible ?? selected)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: props.className,
+		"data-flow-node-resizer": "",
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none",
+			...props.style
+		},
+		children: (props.handles ?? DEFAULT_HANDLES).map((handle) => /* @__PURE__ */ jsx("div", {
+			"data-entity-id": node.id,
+			"data-flow-part": `resize-handle:${handle}`,
+			"data-flow-resize-handle": handle,
+			style: {
+				position: "absolute",
+				width: "calc(10px / var(--flow-zoom, 1))",
+				height: "calc(10px / var(--flow-zoom, 1))",
+				minWidth: 6,
+				minHeight: 6,
+				boxSizing: "border-box",
+				border: "calc(1px / var(--flow-zoom, 1)) solid #ffffff",
+				borderRadius: "calc(2px / var(--flow-zoom, 1))",
+				background: "var(--flow-selection-color, #2563eb)",
+				boxShadow: "0 0 0 calc(1px / var(--flow-zoom, 1)) rgba(15, 23, 42, 0.8)",
+				pointerEvents: "auto",
+				transform: "translate(-50%, -50%)",
+				...HANDLE_STYLE[handle]
+			}
+		}, handle))
+	});
+}
+//#endregion
 //#region src/ColorMode.tsx
 function FlowColorModeScope(props) {
 	const { colorMode, resolvedColorMode } = useFlowColorMode();
@@ -1209,4 +2098,4 @@ function useApplyFlowColorMode(element) {
 	]);
 }
 //#endregion
-export { Controls, EntityAnchor, FlowColorModeScope, FlowInstanceProvider, FlowToolbar, MiniMap, Port, StatelyFlow, createFlowInstance, useApplyFlowColorMode, useCreateFlowInstance, useFlow, useFlowColorMode, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowViewport, useMeasuredSize, useOptionalFlowInstance };
+export { Background, Controls, CrossBackground, DotsBackground, DragHandle, EntityAnchor, FLOW_BASE_CSS, FLOW_BASE_STYLES_ID, FlowColorModeScope, FlowInstanceProvider, FlowToolbar, LinesBackground, MiniMap, NodeResizer, PanePortal, Panel, Port, StatelyFlow, ViewportPortal, createFlowInstance, useApplyFlowColorMode, useConnection, useCreateFlowInstance, useFlow, useFlowBaseStyles, useFlowColorMode, useFlowConnections, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowView, useFlowViewport, useKeyPress, useMeasuredSize, useNodesInitialized, useOptionalFlowInstance };