@statelyai/flow-react 0.4.0

package/dist/esm/index.js

@@ -0,0 +1,979 @@
+import { a as useFlowEntity, c as useFlowPort, d as useFlowViewport, f as FlowInstanceProvider, h as createFlowInstance, i as useFlowEdge, l as useFlowSelector, m as useOptionalFlowInstance, n as useFlow, o as useFlowMeasurement, p as useFlowInstance, r as useFlowContext, s as useFlowNode, t as useCreateFlowInstance, u as useFlowValue } from "./hooks.js";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CONNECTION_PREVIEW_EDGE_ID, createConnectionPreviewGraph, createFlowInputRuntime, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getToolbarPlacement, nodeDepths, pathToSVG, profileModesForContext, viewportCenteredOn } from "@statelyai/flow";
+import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, computeRenderableIds, createMeasurementObserver, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/useFlowInput.ts
+/**
+* Bind a container element to the core input runtime: all pointer, wheel,
+* and keyboard gestures inside the container are recognized by input modes
+* and applied to the flow store. This replaces hand-written gesture handlers.
+*/
+function useFlowInput(flow, containerRef, options = {}) {
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const { modes, profile } = optionsRef.current;
+		const runtime = createFlowInputRuntime({
+			store: flow.store,
+			engine: flow.engine,
+			modes: modes ?? (profile ? profileModesForContext(profile) : void 0)
+		});
+		return attachInput({
+			container,
+			store: flow.store,
+			runtime,
+			autoPan: (context, screenPoint) => getAutoPanDelta(context, screenPoint, flow.engine)
+		});
+	}, [flow, containerRef]);
+}
+//#endregion
+//#region src/NodeContext.tsx
+const NodeRenderContext = createContext(null);
+const NodeRenderContextProvider = NodeRenderContext.Provider;
+function useNodeRenderContext() {
+	const context = useContext(NodeRenderContext);
+	if (!context) throw new Error("Port must be rendered inside a StatelyFlow node.");
+	return context;
+}
+//#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 useRenderableIds(instance, enabled) {
+	return useFlowSelector((context) => computeRenderableIds(instance.engine, context, enabled), { isEqual: renderableIdsEqual });
+}
+function useViewportTransform(ref, instance) {
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		return attachViewportTransform(instance.store, el);
+	}, [ref, instance]);
+}
+function StatelyFlow(props) {
+	if (props.flow) return /* @__PURE__ */ jsx(StatelyFlowView, {
+		...props,
+		flow: props.flow
+	});
+	return /* @__PURE__ */ jsx(OwnedStatelyFlow, { ...props });
+}
+function OwnedStatelyFlow(props) {
+	const flow = useCreateFlowInstance({
+		graph: props.graph,
+		settings: props.settings,
+		listeners: props.listeners,
+		events: props.events
+	});
+	return /* @__PURE__ */ jsx(StatelyFlowView, {
+		...props,
+		flow
+	});
+}
+function StatelyFlowView(props) {
+	const containerRef = useRef(null);
+	const viewportRef = useRef(null);
+	useViewportTransform(viewportRef, props.flow);
+	useLayoutEffect(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		return attachContainer(props.flow.store, element);
+	}, [props.flow]);
+	useFlowInput(props.flow, containerRef, {
+		modes: props.inputModes,
+		profile: props.settings?.store?.profile
+	});
+	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
+				})
+			]
+		})
+	});
+}
+function SnapLinesLayer() {
+	const instance = useFlowInstance();
+	const snapResult = useFlowSelector(() => instance.engine.getSnapResult());
+	const viewport = useFlowSelector((context) => context.viewport);
+	const viewportSize = useFlowSelector((context) => context.viewportSize);
+	if (!snapResult) return null;
+	const visibleBounds = {
+		x: -viewport.x / viewport.zoom,
+		y: -viewport.y / viewport.zoom,
+		width: viewportSize.width / viewport.zoom,
+		height: viewportSize.height / viewport.zoom
+	};
+	const strokeWidth = 1.5 / viewport.zoom;
+	const capSize = 4 / viewport.zoom;
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		"data-flow-canvas-layer": true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ jsxs("g", { children: [snapResult.snapLines.map((line, index) => line.axis === "x" ? /* @__PURE__ */ jsx("line", {
+			x1: line.value,
+			y1: visibleBounds.y,
+			x2: line.value,
+			y2: visibleBounds.y + visibleBounds.height,
+			stroke: "#ef4444",
+			strokeWidth,
+			strokeDasharray: `${6 / viewport.zoom} ${4 / viewport.zoom}`
+		}, `snap-x-${index}`) : /* @__PURE__ */ jsx("line", {
+			x1: visibleBounds.x,
+			y1: line.value,
+			x2: visibleBounds.x + visibleBounds.width,
+			y2: line.value,
+			stroke: "#ef4444",
+			strokeWidth,
+			strokeDasharray: `${6 / viewport.zoom} ${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", {
+					x1: range.start,
+					y1: guide.position,
+					x2: range.end,
+					y2: guide.position,
+					stroke: "#ef4444",
+					strokeWidth
+				}, `${key}-line`),
+				/* @__PURE__ */ jsx("line", {
+					x1: range.start,
+					y1: guide.position - capSize,
+					x2: range.start,
+					y2: guide.position + capSize,
+					stroke: "#ef4444",
+					strokeWidth,
+					strokeLinecap: "round"
+				}, `${key}-start`),
+				/* @__PURE__ */ jsx("line", {
+					x1: range.end,
+					y1: guide.position - capSize,
+					x2: range.end,
+					y2: guide.position + capSize,
+					stroke: "#ef4444",
+					strokeWidth,
+					strokeLinecap: "round"
+				}, `${key}-end`)
+			];
+			return [
+				/* @__PURE__ */ jsx("line", {
+					x1: guide.position,
+					y1: range.start,
+					x2: guide.position,
+					y2: range.end,
+					stroke: "#ef4444",
+					strokeWidth
+				}, `${key}-line`),
+				/* @__PURE__ */ jsx("line", {
+					x1: guide.position - capSize,
+					y1: range.start,
+					x2: guide.position + capSize,
+					y2: range.start,
+					stroke: "#ef4444",
+					strokeWidth,
+					strokeLinecap: "round"
+				}, `${key}-start`),
+				/* @__PURE__ */ jsx("line", {
+					x1: guide.position - capSize,
+					y1: range.end,
+					x2: guide.position + capSize,
+					y2: range.end,
+					stroke: "#ef4444",
+					strokeWidth,
+					strokeLinecap: "round"
+				}, `${key}-end`)
+			];
+		}))] })
+	});
+}
+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 renderEdge = props.renderEdge;
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-label": "edges",
+		"data-flow-canvas-layer": true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
+			pointerEvents: "auto"
+		},
+		children: /* @__PURE__ */ jsxs("g", { children: [edgeIds.map((id) => {
+			if (renderableIds && !renderableIds.edgeIds.has(id)) return null;
+			return /* @__PURE__ */ jsx(EdgeView, {
+				flow: instance,
+				id,
+				renderEdge
+			}, id);
+		}), /* @__PURE__ */ jsx(ConnectionPreviewEdge, {
+			flow: instance,
+			renderEdge
+		})] })
+	});
+}
+const EdgeView = memo(function EdgeView(props) {
+	const { edge, pathData, selected, hovered, highlights } = useFlowEntity(props.id, (context) => ({
+		edge: props.flow.getEdge(props.id) ?? null,
+		pathData: props.flow.getAllEdgePaths().get(props.id) ?? null,
+		selected: context.selection.has(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 });
+	if (!edge || !pathData) return null;
+	if (props.renderEdge) return /* @__PURE__ */ jsxs("g", {
+		"data-entity-id": props.id,
+		"data-flow-selected": selected ? "true" : void 0,
+		style: { pointerEvents: "auto" },
+		children: [/* @__PURE__ */ jsx(EdgeHitTarget, {
+			flow: props.flow,
+			edge,
+			pathData,
+			selected
+		}), props.renderEdge({
+			flow: props.flow,
+			edge,
+			pathData,
+			selected,
+			hovered,
+			highlights
+		})]
+	});
+	return /* @__PURE__ */ jsx("g", {
+		"data-entity-id": props.id,
+		"data-flow-selected": selected ? "true" : void 0,
+		style: { pointerEvents: "auto" },
+		children: /* @__PURE__ */ jsx(DefaultEdge, {
+			flow: props.flow,
+			edge,
+			pathData,
+			selected
+		})
+	});
+});
+/** 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;
+	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({
+			flow: props.flow,
+			edge,
+			pathData,
+			selected: false,
+			hovered: false,
+			highlights: []
+		}) : /* @__PURE__ */ jsx(DefaultEdge, {
+			flow: props.flow,
+			edge,
+			pathData,
+			selected: false,
+			preview: true
+		})
+	});
+}
+function DefaultEdge(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.pathData.segments.map((segment, index) => {
+		const d = pathToSVG(segment);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+			d,
+			fill: "none",
+			stroke: 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
+		}), props.preview ? null : /* @__PURE__ */ jsx("path", {
+			d,
+			"data-entity-id": props.edge.id,
+			fill: "none",
+			stroke: "#000",
+			strokeOpacity: 0,
+			strokeWidth: 18,
+			pointerEvents: "stroke"
+		})] }, index);
+	}) });
+}
+function EdgeHitTarget(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.pathData.segments.map((segment, index) => {
+		return /* @__PURE__ */ jsx("path", {
+			d: pathToSVG(segment),
+			"data-entity-id": props.edge.id,
+			fill: "none",
+			stroke: "#000",
+			strokeOpacity: 0,
+			strokeWidth: 18,
+			pointerEvents: "stroke"
+		}, index);
+	}) });
+}
+function EdgeLabelLayer(props) {
+	const instance = useFlowInstance();
+	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "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) => {
+			if (renderableIds && !renderableIds.edgeIds.has(id)) return null;
+			return /* @__PURE__ */ jsx(EdgeLabelItem, {
+				flow: instance,
+				id
+			}, id);
+		})
+	});
+}
+const EdgeLabelItem = memo(function EdgeLabelItem(props) {
+	const { edge, pathData, selected } = useFlowEntity(props.id, (context) => ({
+		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;
+	return /* @__PURE__ */ jsx(EdgeLabelView, {
+		flow: props.flow,
+		edge,
+		bounds: pathData.labelBounds,
+		selected
+	});
+});
+function EdgeLabelView(props) {
+	const ref = useRef(null);
+	const observer = useMemo(() => createMeasurementObserver(props.flow.store), [props.flow.store]);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		observer.observe(element, { edgeId: props.edge.id });
+		return () => observer.disconnect();
+	}, [observer, props.edge.id]);
+	const text = (props.edge.label?.data)?.text;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-entity-id": props.edge.id,
+		"data-flow-edge-label": "",
+		style: {
+			position: "absolute",
+			left: props.bounds.x,
+			top: props.bounds.y,
+			width: props.bounds.width,
+			height: 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",
+			pointerEvents: "auto",
+			userSelect: "none"
+		},
+		children: String(text ?? props.edge.id)
+	});
+}
+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]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "nodes",
+		"data-flow-canvas-layer": true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			transformOrigin: "0 0",
+			pointerEvents: "none"
+		},
+		children: nodeIds.map((id) => {
+			if (renderableIds && !renderableIds.nodeIds.has(id)) return null;
+			return /* @__PURE__ */ jsx(NodeView, {
+				flow: instance,
+				id,
+				observer,
+				renderNode: props.renderNode
+			}, id);
+		})
+	});
+}
+function rectsShallowEqual(a, b) {
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+const NodeView = memo(function NodeView(props) {
+	const ref = useRef(null);
+	const { node, hidden, selected, dragging, focused, hovered, highlights, bounds } = useFlowEntity(props.id, (context) => {
+		const current = props.flow.getNode(props.id) ?? null;
+		return {
+			node: current,
+			hidden: !current || props.flow.engine.resolveEntityConfig(current).hidden,
+			selected: context.selection.has(props.id),
+			dragging: context.draggedEntityId === 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)
+		};
+	}, { 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) });
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const target = props.flow.getNode(props.id)?.group?.type === "derived" ? element.querySelector("[data-flow-group-content-measure]") : element;
+		if (!target) return;
+		props.observer.observe(target, { nodeId: props.id });
+		return () => props.observer.unobserve(target);
+	}, [
+		props.id,
+		props.observer,
+		props.flow,
+		hidden
+	]);
+	if (!node || hidden) return null;
+	return /* @__PURE__ */ jsx(NodeRenderContextProvider, {
+		value: {
+			node,
+			bounds
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-entity-id": props.id,
+			"data-flow-selected": selected ? "true" : void 0,
+			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 }),
+			style: {
+				...nodePositionStyle(bounds, {
+					autoSize: node.autoSize,
+					dragging
+				}),
+				cursor: dragging ? "grabbing" : "grab",
+				pointerEvents: "auto",
+				userSelect: "none",
+				outline: focused ? "2px solid #2563eb" : "none",
+				outlineOffset: 2
+			},
+			children: props.renderNode ? props.renderNode({
+				flow: props.flow,
+				node,
+				bounds,
+				selected,
+				dragging,
+				hovered,
+				highlights
+			}) : node.group ? /* @__PURE__ */ jsx(DefaultGroupNode, {
+				flow: props.flow,
+				node,
+				bounds,
+				selected,
+				dragging,
+				hovered,
+				highlights
+			}) : /* @__PURE__ */ jsx(DefaultNode, {
+				flow: props.flow,
+				node,
+				bounds,
+				selected,
+				dragging,
+				hovered,
+				highlights
+			})
+		})
+	});
+});
+/**
+* Default group rendering: content block (the drag handle) on its configured
+* side plus a children-area backdrop. The geometry comes entirely from
+* `engine.getGroupGeometry`; custom renderers can do the same.
+*/
+function DefaultGroupNode(props) {
+	const geometry = props.flow.engine.getGroupGeometry(props.node.id);
+	const label = props.node.data?.label;
+	if (!geometry) return /* @__PURE__ */ jsx(DefaultNode, { ...props });
+	const relative = (rect) => ({
+		left: rect.x - props.bounds.x,
+		top: rect.y - props.bounds.y,
+		width: rect.width,
+		height: rect.height
+	});
+	const dropTarget = props.highlights.some((entry) => entry.kind === "drop-target");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+		position: "absolute",
+		...relative(geometry.childArea),
+		boxSizing: "border-box",
+		border: `2px dashed ${dropTarget ? "#16a34a" : props.selected ? "#93c5fd" : "#cbd5e1"}`,
+		...dropTarget ? { background: "rgba(22, 163, 74, 0.08)" } : null,
+		borderRadius: 10,
+		background: "rgba(148, 163, 184, 0.07)",
+		pointerEvents: "none"
+	} }), /* @__PURE__ */ jsx("div", {
+		"data-flow-drag-handle": true,
+		style: {
+			position: "absolute",
+			...relative(geometry.contentBounds),
+			boxSizing: "border-box",
+			display: "flex",
+			alignItems: "center",
+			padding: "0 12px",
+			border: `2px solid ${props.selected ? "#2563eb" : "#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"
+		},
+		children: String(label ?? props.node.id)
+	})] });
+}
+function DefaultNode(props) {
+	const label = props.node.data?.label;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			width: "100%",
+			height: "100%",
+			boxSizing: "border-box",
+			padding: "10px 14px",
+			border: `2px solid ${props.selected ? "#2563eb" : 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)"
+		},
+		children: String(label ?? props.node.id)
+	});
+}
+//#endregion
+//#region src/FlowToolbar.tsx
+/** Border-box size of an element, kept current via ResizeObserver. */
+function useMeasuredSize(deps = []) {
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const ref = useRef(null);
+	const measure = useCallback((node) => {
+		const rect = node.getBoundingClientRect();
+		setSize((prev) => prev.width === rect.width && prev.height === rect.height ? prev : {
+			width: rect.width,
+			height: rect.height
+		});
+	}, []);
+	const setRef = useCallback((node) => {
+		ref.current = node;
+		if (node) measure(node);
+	}, [measure]);
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		measure(node);
+		const observer = new ResizeObserver(() => measure(node));
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [measure, ...deps]);
+	return [setRef, size];
+}
+function rectsEqual(a, b) {
+	return a === b || a !== null && b !== null && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function useFlowToolbar(options = {}) {
+	const flow = useFlowInstance();
+	const idsKey = options.ids?.join(" ");
+	const anchor = useFlowSelector((context) => {
+		const ids = options.ids ?? [...context.selection];
+		if (ids.length === 0) return null;
+		const canvasRect = flow.engine.getToolbarAnchor(ids);
+		if (!canvasRect) return null;
+		const zoom = context.viewport.zoom;
+		return {
+			x: canvasRect.x * zoom + context.viewport.x,
+			y: canvasRect.y * zoom + context.viewport.y,
+			width: canvasRect.width * zoom,
+			height: canvasRect.height * zoom
+		};
+	}, {
+		flow,
+		isEqual: rectsEqual
+	});
+	const viewportSize = useFlowSelector((context) => context.viewportSize, { flow });
+	const [setRef, size] = useMeasuredSize([!!anchor, idsKey]);
+	if (!anchor) return {
+		setRef,
+		style: { display: "none" },
+		visible: false,
+		anchor: null,
+		side: "top"
+	};
+	const placement = getToolbarPlacement({
+		anchor,
+		toolbarWidth: size.width,
+		toolbarHeight: size.height,
+		viewportWidth: viewportSize.width,
+		viewportHeight: viewportSize.height,
+		offset: options.offset,
+		padding: options.padding
+	});
+	return {
+		setRef,
+		style: {
+			position: "absolute",
+			left: placement.left,
+			top: placement.top,
+			visibility: size.width > 0 ? "visible" : "hidden",
+			pointerEvents: "auto"
+		},
+		visible: true,
+		anchor,
+		side: placement.side
+	};
+}
+/**
+* Unstyled positioned toolbar anchored to the selection (or explicit `ids`).
+* Marked `data-flow-interactive`, so its contents receive pointer events
+* unopposed by canvas gestures.
+*/
+function FlowToolbar(props) {
+	const { children, className, style, ...options } = props;
+	const toolbar = useFlowToolbar(options);
+	if (!toolbar.visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: toolbar.setRef,
+		"data-flow-interactive": true,
+		className,
+		style: {
+			...toolbar.style,
+			...style
+		},
+		children
+	});
+}
+//#endregion
+//#region src/MiniMap.tsx
+/**
+* Overview map. Deliberately thin: all math lives in core
+* (`getMinimapProjection`, `viewportCenteredOn`) and every interaction is a
+* plain store trigger — this component is exactly what you would write in
+* userland, kept here as a convenience.
+*/
+function MiniMap(props) {
+	const flow = useFlowInstance();
+	const width = props.width ?? 200;
+	const height = props.height ?? 140;
+	const nodes = useFlowSelector((context) => context.graph.nodes);
+	const viewport = useFlowSelector((context) => context.viewport);
+	const viewportSize = useFlowSelector((context) => context.viewportSize);
+	const draggingRef = useRef(false);
+	const projection = getMinimapProjection({
+		contentBounds: flow.getGraphBounds(),
+		viewport,
+		viewportSize,
+		width,
+		height,
+		padding: props.padding
+	});
+	const jumpTo = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const canvasPoint = projection.toCanvas({
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		});
+		flow.trigger.setViewport(viewportCenteredOn(canvasPoint, viewportSize, viewport.zoom));
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-label": "minimap",
+		width,
+		height,
+		className: props.className,
+		onPointerDown: (event) => {
+			draggingRef.current = true;
+			jumpTo(event);
+			try {
+				event.currentTarget.setPointerCapture(event.pointerId);
+			} catch {}
+		},
+		onPointerMove: (event) => {
+			if (draggingRef.current) jumpTo(event);
+		},
+		onPointerUp: (event) => {
+			draggingRef.current = false;
+			if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		},
+		style: {
+			position: "absolute",
+			right: 12,
+			bottom: 12,
+			background: "rgba(248, 250, 252, 0.9)",
+			border: "1px solid #e2e8f0",
+			borderRadius: 8,
+			boxShadow: "0 2px 10px rgba(15, 23, 42, 0.12)",
+			cursor: "pointer",
+			pointerEvents: "auto",
+			...props.style
+		},
+		children: [nodes.map((node) => {
+			const rect = projection.rectToMinimap(flow.engine.resolvedBounds(node.id));
+			return props.renderNode?.(node, rect) ?? /* @__PURE__ */ jsx("rect", {
+				x: rect.x,
+				y: rect.y,
+				width: Math.max(rect.width, 1),
+				height: Math.max(rect.height, 1),
+				rx: 1,
+				fill: "#94a3b8"
+			}, node.id);
+		}), /* @__PURE__ */ jsx("rect", {
+			x: projection.viewportRect.x,
+			y: projection.viewportRect.y,
+			width: projection.viewportRect.width,
+			height: projection.viewportRect.height,
+			fill: "rgba(37, 99, 235, 0.08)",
+			stroke: "#2563eb",
+			strokeWidth: 1
+		})]
+	});
+}
+//#endregion
+//#region src/Controls.tsx
+const buttonStyle = {
+	width: 28,
+	height: 28,
+	display: "grid",
+	placeItems: "center",
+	border: "1px solid #e2e8f0",
+	borderRadius: 6,
+	background: "#ffffff",
+	color: "#0f172a",
+	font: "600 14px/1 system-ui, sans-serif",
+	cursor: "pointer"
+};
+/**
+* Zoom/fit toolbar. Deliberately thin: every button is one store trigger
+* (`zoomBy`, `fitView`) — replicate or extend it freely in userland.
+*/
+function Controls(props) {
+	const flow = useFlowInstance();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		"aria-label": "canvas controls",
+		className: props.className,
+		style: {
+			position: "absolute",
+			left: 12,
+			bottom: 12,
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
+			pointerEvents: "auto",
+			...props.style
+		},
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "zoom in",
+				style: buttonStyle,
+				onClick: () => flow.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 }),
+				children: "−"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "fit view",
+				style: buttonStyle,
+				onClick: () => flow.trigger.fitView({ padding: .1 }),
+				children: "⛶"
+			}),
+			props.children
+		]
+	});
+}
+//#endregion
+//#region src/EntityAnchor.tsx
+function EntityAnchor(props) {
+	const viewport = useFlowSelector((context) => context.viewport);
+	const transform = getAnchorTransform(props.bounds, viewport, props.anchor);
+	return /* @__PURE__ */ jsx("div", {
+		className: props.className,
+		style: {
+			position: "absolute",
+			left: transform.x,
+			top: transform.y,
+			transform: props.inverseScale ? `translate(-50%, -50%) scale(${transform.scale})` : "translate(-50%, -50%)",
+			transformOrigin: "center",
+			pointerEvents: "auto",
+			...props.style
+		},
+		children: props.children
+	});
+}
+//#endregion
+//#region src/Port.tsx
+/**
+* A connection port. Purely declarative: it renders the
+* `data-flow-port-name`/`data-flow-node-id` attributes that the input
+* runtime's `connectMode` recognizes, and reports its measured bounds to the
+* store. The connection gesture itself (start/move/validate/end) lives in
+* core — customize it by swapping `connectMode({ isValid })` in the
+* `inputModes` prop of `StatelyFlow` (or your own `useFlowInput` call), and
+* observe results via `flow.on("connectionEnded", …)` or the store's
+* `connection` state.
+*/
+function Port(props) {
+	const flow = useFlowInstance();
+	const { node } = useNodeRenderContext();
+	const ref = useRef(null);
+	const observerRef = useRef(null);
+	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,
+			portName: props.name
+		});
+		return () => {
+			observerRef.current = null;
+			observer.disconnect();
+		};
+	}, [
+		flow.store,
+		node.id,
+		props.name,
+		measured
+	]);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		if (flow.getSnapshot().canvasState !== "idle") return;
+		observerRef.current?.measure(element);
+	});
+	const candidate = useFlowSelector((context) => {
+		const connection = context.connection;
+		if (!connection?.active) return null;
+		if (connection.targetId !== node.id || connection.targetPort !== props.name) return null;
+		return connection.isValid === false ? "invalid" : "valid";
+	}, { flow });
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: props.className,
+		"data-flow-port-name": props.name,
+		"data-flow-node-id": node.id,
+		"data-connection-candidate": candidate ?? void 0,
+		style: props.style,
+		children: props.children
+	});
+}
+//#endregion
+//#region src/ColorMode.tsx
+function FlowColorModeScope(props) {
+	const { colorMode, resolvedColorMode } = useFlowColorMode();
+	return /* @__PURE__ */ jsx("div", {
+		className: props.className,
+		"data-flow-color-mode": resolvedColorMode,
+		"data-flow-color-mode-preference": colorMode,
+		style: {
+			colorScheme: resolvedColorMode,
+			...props.style
+		},
+		children: props.children
+	});
+}
+function useFlowColorMode() {
+	const colorMode = useFlowSelector((context) => context.colorMode);
+	const [systemColorMode, setSystemColorMode] = useState(() => resolveFlowColorMode("system"));
+	useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		function update() {
+			setSystemColorMode(resolveFlowColorMode("system"));
+		}
+		update();
+		media.addEventListener("change", update);
+		return () => media.removeEventListener("change", update);
+	}, []);
+	return useMemo(() => ({
+		colorMode,
+		resolvedColorMode: colorMode === "system" ? systemColorMode : colorMode
+	}), [colorMode, systemColorMode]);
+}
+function useApplyFlowColorMode(element) {
+	const { colorMode, resolvedColorMode } = useFlowColorMode();
+	useEffect(() => {
+		if (!element) return;
+		applyFlowColorMode(element, colorMode);
+	}, [
+		colorMode,
+		element,
+		resolvedColorMode
+	]);
+}
+//#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 };