@statelyai/flow-react 0.4.0 → 0.6.0

package/README.md

@@ -2,11 +2,11 @@
 
 <!-- description from package.json -->
 
-Thin React adapter for `@statelyai/flow` and `@statelyai/flow-dom`.
+Thin React adapter for `@statelyai/flow` with core and DOM re-exports.
 
 ## Philosophy
 
-`@statelyai/flow-react` should be completely event-driven and composable. React should not hide a second flow model behind component internals; it should adapt the same `FlowInstance` that consumers can create, inspect, subscribe to, and trigger directly.
+`@statelyai/flow-react` should be completely event-driven and composable. React should not hide a second flow model behind component internals; it should adapt the same `FlowInstance` that consumers can create, inspect, subscribe to, and trigger directly. It re-exports the lower layers so React consumers can install and import from one package.
 
 The adapter abstracts over two lower layers:
 
@@ -54,11 +54,13 @@ Color mode is store data, not engine behavior. `@statelyai/flow-dom` exports sma
 
 ```tsx
 import {
+  createEdge,
+  createGraph,
+  createNode,
   StatelyFlow,
   useFlow,
   useFlowSelector,
 } from "@statelyai/flow-react";
-import { createEdge, createGraph, createNode } from "@statelyai/flow";
 
 const graph = createGraph({
   nodes: [

package/dist/esm/FlowInstanceContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FlowInstanceContext.tsx
+const FlowInstanceContext = createContext(null);
+function FlowInstanceProvider(props) {
+	return /* @__PURE__ */ jsx(FlowInstanceContext.Provider, {
+		value: props.flow,
+		children: props.children
+	});
+}
+function useFlowInstance() {
+	const flow = useContext(FlowInstanceContext);
+	if (!flow) throw new Error("Flow instance is missing. Wrap this tree in <FlowInstanceProvider flow={flow}>.");
+	return flow;
+}
+function useOptionalFlowInstance() {
+	return useContext(FlowInstanceContext);
+}
+//#endregion
+export { useFlowInstance as n, useOptionalFlowInstance as r, FlowInstanceProvider as t };

package/dist/esm/backgrounds.d.ts

@@ -5,10 +5,18 @@ import { CSSProperties } from "react";
 type BackgroundVariant = "dots" | "lines" | "cross";
 type BackgroundProps = {
   variant?: BackgroundVariant;
+  /** Grid spacing in canvas units at zoom 1. */
   gap?: number;
+  /** Dot radius / line thickness in screen pixels (constant across zoom). */
   size?: number;
   color?: string;
   backgroundColor?: string;
+  /**
+   * Minimum on-screen spacing (px) before the grid subdivides. The effective
+   * spacing is kept in `[minSpacing, 2 * minSpacing)` by snapping `gap` to a
+   * power-of-two multiple, so the grid never looks crowded or sparse.
+   */
+  minSpacing?: number;
   className?: string;
   style?: CSSProperties;
 };

package/dist/esm/backgrounds.js

@@ -1,27 +1,70 @@
-import { l as useFlowSelector } from "./hooks.js";
-import { jsx } from "react/jsx-runtime";
+import { n as useFlowInstance } from "./FlowInstanceContext.js";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/backgrounds.tsx
 function Background(props) {
-	const viewport = useFlowSelector((context) => context.viewport);
+	const instance = useFlowInstance();
 	const variant = props.variant ?? "dots";
 	const gap = props.gap ?? 24;
 	const size = props.size ?? 1;
 	const color = props.color ?? "#cbd5e1";
-	const scaledGap = gap * viewport.zoom;
-	const scaledSize = size * viewport.zoom;
-	return /* @__PURE__ */ jsx("div", {
+	const minSpacing = props.minSpacing ?? 24;
+	const image = useMemo(() => getBackgroundImage(variant, color, size), [
+		variant,
+		color,
+		size
+	]);
+	const majorRef = useRef(null);
+	const minorRef = useRef(null);
+	useLayoutEffect(() => {
+		const major = majorRef.current;
+		const minor = minorRef.current;
+		if (!major || !minor) return;
+		const phase = variant === "lines" ? 0 : .5;
+		const apply = (viewport) => {
+			const screenGap = gap * viewport.zoom;
+			const majorGap = screenGap * 2 ** Math.ceil(Math.log2(minSpacing / screenGap));
+			const minorGap = majorGap / 2;
+			const t = majorGap / minSpacing - 1;
+			major.style.backgroundSize = `${majorGap}px ${majorGap}px`;
+			major.style.backgroundPosition = `${viewport.x - phase * majorGap}px ${viewport.y - phase * majorGap}px`;
+			minor.style.backgroundSize = `${minorGap}px ${minorGap}px`;
+			minor.style.backgroundPosition = `${viewport.x - phase * minorGap}px ${viewport.y - phase * minorGap}px`;
+			minor.style.opacity = String(t);
+		};
+		apply(instance.getSnapshot().viewport);
+		return instance.listen((context) => context.viewport, (viewport) => apply(viewport));
+	}, [
+		instance,
+		gap,
+		minSpacing,
+		variant
+	]);
+	const layerStyle = {
+		position: "absolute",
+		inset: 0,
+		backgroundImage: image
+	};
+	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
 		className: props.className,
 		style: {
 			position: "absolute",
 			inset: 0,
 			backgroundColor: props.backgroundColor,
-			backgroundImage: getBackgroundImage(variant, color, scaledSize),
-			backgroundPosition: `${viewport.x}px ${viewport.y}px`,
-			backgroundSize: `${scaledGap}px ${scaledGap}px`,
 			pointerEvents: "none",
 			...props.style
-		}
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: minorRef,
+			style: {
+				...layerStyle,
+				opacity: 0
+			}
+		}), /* @__PURE__ */ jsx("div", {
+			ref: majorRef,
+			style: layerStyle
+		})]
 	});
 }
 function DotsBackground(props) {

package/dist/esm/index.d.ts

@@ -1,7 +1,8 @@
-import * as react10 from "react";
+import * as react4 from "react";
 import { CSSProperties, HTMLAttributes, ReactNode, RefObject } from "react";
-import { AnchorSpec, ConnectionEndedEvent, CreateFlowOptions, EdgePathData, FlowColorMode, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowNode, FlowProfile, FlowStoreContext, LayoutRequestedEvent, Point, Rect, Viewport, VisualPort } from "@statelyai/flow";
 import { ResolvedFlowColorMode } from "@statelyai/flow-dom";
+import { AnchorSpec, ConnectionEndedEvent, CreateFlowOptions, EdgePathData, FlowColorMode, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowNode, FlowProfile, FlowStoreContext, LayoutRequestedEvent, Point, Rect, Viewport, VisualPort } from "@statelyai/flow";
+export * from "@statelyai/flow-dom";
 
 //#region src/createFlowInstance.d.ts
 type FlowSelector<T> = (context: FlowStoreContext) => T;
@@ -43,7 +44,7 @@ declare function createFlowInstance(options: CreateFlowInstanceOptions): FlowIns
 declare function FlowInstanceProvider(props: {
   flow: FlowInstance;
   children: ReactNode;
-}): react10.JSX.Element;
+}): react4.JSX.Element;
 declare function useFlowInstance(): FlowInstance;
 declare function useOptionalFlowInstance(): FlowInstance | null;
 //#endregion
@@ -169,7 +170,7 @@ type StatelyFlowProps<TNodeData = unknown, TEdgeData = unknown> = {
   background?: ReactNode;
   children?: ReactNode;
 };
-declare function StatelyFlow<TNodeData = unknown, TEdgeData = unknown>(props: StatelyFlowProps<TNodeData, TEdgeData>): react10.JSX.Element;
+declare function StatelyFlow<TNodeData = unknown, TEdgeData = unknown>(props: StatelyFlowProps<TNodeData, TEdgeData>): react4.JSX.Element;
 //#endregion
 //#region src/FlowToolbar.d.ts
 /** Border-box size of an element, kept current via ResizeObserver. */
@@ -211,7 +212,7 @@ type FlowToolbarProps = UseFlowToolbarOptions & {
  * Marked `data-flow-interactive`, so its contents receive pointer events
  * unopposed by canvas gestures.
  */
-declare function FlowToolbar(props: FlowToolbarProps): react10.JSX.Element | null;
+declare function FlowToolbar(props: FlowToolbarProps): react4.JSX.Element | null;
 //#endregion
 //#region src/MiniMap.d.ts
 type MiniMapProps = {
@@ -230,7 +231,7 @@ type MiniMapProps = {
  * plain store trigger — this component is exactly what you would write in
  * userland, kept here as a convenience.
  */
-declare function MiniMap(props: MiniMapProps): react10.JSX.Element;
+declare function MiniMap(props: MiniMapProps): react4.JSX.Element;
 //#endregion
 //#region src/Controls.d.ts
 type ControlsProps = {
@@ -243,7 +244,7 @@ type ControlsProps = {
  * Zoom/fit toolbar. Deliberately thin: every button is one store trigger
  * (`zoomBy`, `fitView`) — replicate or extend it freely in userland.
  */
-declare function Controls(props: ControlsProps): react10.JSX.Element;
+declare function Controls(props: ControlsProps): react4.JSX.Element;
 //#endregion
 //#region src/EntityAnchor.d.ts
 type EntityAnchorProps = {
@@ -254,7 +255,7 @@ type EntityAnchorProps = {
   style?: CSSProperties;
   children: ReactNode;
 };
-declare function EntityAnchor(props: EntityAnchorProps): react10.JSX.Element;
+declare function EntityAnchor(props: EntityAnchorProps): react4.JSX.Element;
 //#endregion
 //#region src/Port.d.ts
 type PortProps = {
@@ -288,7 +289,7 @@ type PortProps = {
  * observe results via `flow.on("connectionEnded", …)` or the store's
  * `connection` state.
  */
-declare function Port(props: PortProps): react10.JSX.Element;
+declare function Port(props: PortProps): react4.JSX.Element;
 //#endregion
 //#region src/ColorMode.d.ts
 type FlowColorModeScopeProps = {
@@ -296,7 +297,7 @@ type FlowColorModeScopeProps = {
   className?: string;
   style?: CSSProperties;
 };
-declare function FlowColorModeScope(props: FlowColorModeScopeProps): react10.JSX.Element;
+declare function FlowColorModeScope(props: FlowColorModeScopeProps): react4.JSX.Element;
 declare function useFlowColorMode(): {
   colorMode: FlowColorMode;
   resolvedColorMode: ResolvedFlowColorMode;

package/dist/esm/index.js

@@ -1,8 +1,242 @@
-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 { 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 { 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";
+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";
+export * from "@statelyai/flow-dom";
+//#region src/createFlowInstance.ts
+function createFlowInstance(options) {
+	const flow = createFlow({
+		graph: options.graph,
+		...options.settings
+	});
+	const cleanup = /* @__PURE__ */ new Set();
+	function getSnapshot() {
+		return flow.store.getSnapshot().context;
+	}
+	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 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;
+			previousValue = nextValue;
+			listener(nextValue, currentPreviousValue, context);
+		});
+		cleanup.add(unsubscribe);
+		return () => {
+			cleanup.delete(unsubscribe);
+			unsubscribe();
+		};
+	}
+	function subscribeEvent(event, listener) {
+		const subscription = flow.on(event, listener);
+		const unsubscribe = () => subscription.unsubscribe();
+		cleanup.add(unsubscribe);
+		return () => {
+			cleanup.delete(unsubscribe);
+			unsubscribe();
+		};
+	}
+	if (options.events?.connectionEnded) subscribeEvent("connectionEnded", options.events.connectionEnded);
+	if (options.events?.layoutRequested) subscribeEvent("layoutRequested", options.events.layoutRequested);
+	for (const listener of options.listeners ?? []) listen(listener.selector, listener.onChange, listener);
+	return {
+		...flow,
+		getSnapshot,
+		listen,
+		clientToCanvas,
+		destroy() {
+			for (const unsubscribe of cleanup) unsubscribe();
+			cleanup.clear();
+			flow.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/hooks.ts
+function useFlow(options) {
+	return useCreateFlowInstance(options);
+}
+function useCreateFlowInstance(options) {
+	const instanceRef = useRef(null);
+	const listenersRef = useRef(options.listeners);
+	const eventsRef = useRef(options.events);
+	const didMountRef = useRef(false);
+	listenersRef.current = options.listeners;
+	eventsRef.current = options.events;
+	if (!instanceRef.current) instanceRef.current = createFlowInstance({
+		graph: options.graph,
+		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) {
+			const subscription = flow.on("connectionEnded", eventsRef.current.connectionEnded);
+			cleanup.push(() => subscription.unsubscribe());
+		}
+		if (eventsRef.current?.layoutRequested) {
+			const subscription = flow.on("layoutRequested", eventsRef.current.layoutRequested);
+			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();
+		};
+	}, [
+		flow,
+		options.listeners,
+		options.events
+	]);
+	useEffect(() => () => 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;
+}
+function useFlowContext() {
+	return useFlowSelector((context) => context);
+}
+const entityNotifiers = /* @__PURE__ */ new WeakMap();
+function getEntityNotifier(flow) {
+	let notifier = entityNotifiers.get(flow.store);
+	if (!notifier) {
+		notifier = createEntityChangeNotifier(flow.store);
+		entityNotifiers.set(flow.store, notifier);
+	}
+	return notifier;
+}
+/**
+* Like `useFlowSelector`, but subscribed through the entity-change notifier:
+* the selector re-runs only when the entity with `id` may have changed, not
+* on every store transition. This is what makes thousands of mounted entity
+* views affordable — see BENCHMARK.md.
+*/
+function useFlowEntity(id, 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(() => {
+		const update = () => {
+			setSelected((previous) => {
+				const next = selectorRef.current(flow.getSnapshot());
+				return isEqualRef.current(previous, next) ? previous : next;
+			});
+		};
+		update();
+		return getEntityNotifier(flow).subscribe(id, update);
+	}, [flow, id]);
+	return selected;
+}
+function useFlowValue(selector, isEqual) {
+	return useFlowSelector(selector, { isEqual });
+}
+function useFlowNode(id, selector, isEqual) {
+	return useFlowSelector((context) => {
+		const node = context.graph.nodes.find((candidate) => candidate.id === id);
+		if (!node) throw new Error(`Flow node "${id}" was not found.`);
+		if (selector) return selector(node, context);
+		return {
+			...node,
+			...getDerivedFields(context, id, {
+				"data-flow-target": "entity",
+				"data-flow-entity-id": id,
+				"data-entity-id": id
+			})
+		};
+	}, { isEqual });
+}
+function useFlowEdge(id, selector, isEqual) {
+	const flow = useOptionalFlowInstance();
+	return useFlowSelector((context) => {
+		const edge = context.graph.edges.find((candidate) => candidate.id === id);
+		if (!edge) throw new Error(`Flow edge "${id}" was not found.`);
+		if (selector) return selector(edge, context);
+		return {
+			...edge,
+			pathData: flow?.getAllEdgePaths().get(id) ?? null,
+			...getDerivedFields(context, id, {
+				"data-flow-target": "entity",
+				"data-flow-entity-id": id,
+				"data-entity-id": id
+			})
+		};
+	}, { isEqual });
+}
+function useFlowPort(id, selector, isEqual) {
+	const flow = useFlowInstance();
+	return useFlowSelector((context) => {
+		const addressable = flow?.getAddressable(id);
+		if (!addressable || addressable.kind !== "port") throw new Error(`Flow port "${id}" was not found.`);
+		const binding = {
+			...addressable.port,
+			id,
+			nodeId: addressable.nodeId,
+			portName: addressable.portName,
+			...getDerivedFields(context, id, {
+				"data-flow-target": "port",
+				"data-flow-port-id": id,
+				"data-flow-node-id": addressable.nodeId,
+				"data-flow-port-name": addressable.portName
+			})
+		};
+		return selector ? selector(binding, context) : binding;
+	}, { isEqual });
+}
+function useFlowViewport() {
+	return useFlowSelector((context) => context.viewport);
+}
+function useFlowMeasurement(id) {
+	return useFlowSelector((context) => context.measurements.get(id) ?? null);
+}
+function getDerivedFields(context, id, props) {
+	return {
+		selected: context.selection.has(id),
+		focused: context.focusedEntityId === id,
+		hovered: context.hoveredEntityIds.has(id),
+		props
+	};
+}
+//#endregion
 //#region src/useFlowInput.ts
 /**
 * Bind a container element to the core input runtime: all pointer, wheel,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.4.0",
-  "description": "Thin React adapter for @statelyai/flow and @statelyai/flow-dom.",
+  "version": "0.6.0",
+  "description": "Thin React adapter for @statelyai/flow with core and DOM re-exports.",
   "keywords": [
     "flow",
     "diagram",
@@ -30,20 +30,9 @@
     }
   },
   "license": "MIT",
-  "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit",
-    "test:browser": "vitest run --config vitest.browser.config.mjs",
-    "test:e2e": "playwright test",
-    "storybook": "storybook dev -p 6008",
-    "storybook:build": "storybook build",
-    "test:stories": "storybook build --quiet && concurrently -k -s first -n SB,TEST \"http-server storybook-static -p 6010 --silent\" \"wait-on tcp:127.0.0.1:6010 && test-storybook --url http://127.0.0.1:6010 --maxWorkers=2\""
-  },
   "dependencies": {
-    "@statelyai/flow": "workspace:*",
-    "@statelyai/flow-dom": "workspace:*"
+    "@statelyai/flow": "0.4.2",
+    "@statelyai/flow-dom": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -83,5 +72,16 @@
     "vitest": "^4.1.0",
     "wait-on": "^9.0.10",
     "yjs": "^13.6.31"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "test:browser": "vitest run --config vitest.browser.config.mjs",
+    "test:e2e": "playwright test",
+    "storybook": "storybook dev -p 6008",
+    "storybook:build": "storybook build",
+    "test:stories": "storybook build --quiet && concurrently -k -s first -n SB,TEST \"http-server storybook-static -p 6010 --silent\" \"wait-on tcp:127.0.0.1:6010 && test-storybook --url http://127.0.0.1:6010 --maxWorkers=2\""
   }
 }

package/dist/esm/hooks.js

@@ -1,255 +0,0 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { createEntityChangeNotifier, createFlow } from "@statelyai/flow";
-import { getAttachedContainer } from "@statelyai/flow-dom";
-import { jsx } from "react/jsx-runtime";
-//#region src/createFlowInstance.ts
-function createFlowInstance(options) {
-	const flow = createFlow({
-		graph: options.graph,
-		...options.settings
-	});
-	const cleanup = /* @__PURE__ */ new Set();
-	function getSnapshot() {
-		return flow.store.getSnapshot().context;
-	}
-	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 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;
-			previousValue = nextValue;
-			listener(nextValue, currentPreviousValue, context);
-		});
-		cleanup.add(unsubscribe);
-		return () => {
-			cleanup.delete(unsubscribe);
-			unsubscribe();
-		};
-	}
-	function subscribeEvent(event, listener) {
-		const subscription = flow.on(event, listener);
-		const unsubscribe = () => subscription.unsubscribe();
-		cleanup.add(unsubscribe);
-		return () => {
-			cleanup.delete(unsubscribe);
-			unsubscribe();
-		};
-	}
-	if (options.events?.connectionEnded) subscribeEvent("connectionEnded", options.events.connectionEnded);
-	if (options.events?.layoutRequested) subscribeEvent("layoutRequested", options.events.layoutRequested);
-	for (const listener of options.listeners ?? []) listen(listener.selector, listener.onChange, listener);
-	return {
-		...flow,
-		getSnapshot,
-		listen,
-		clientToCanvas,
-		destroy() {
-			for (const unsubscribe of cleanup) unsubscribe();
-			cleanup.clear();
-			flow.destroy();
-		}
-	};
-}
-//#endregion
-//#region src/FlowInstanceContext.tsx
-const FlowInstanceContext = createContext(null);
-function FlowInstanceProvider(props) {
-	return /* @__PURE__ */ jsx(FlowInstanceContext.Provider, {
-		value: props.flow,
-		children: props.children
-	});
-}
-function useFlowInstance() {
-	const flow = useContext(FlowInstanceContext);
-	if (!flow) throw new Error("Flow instance is missing. Wrap this tree in <FlowInstanceProvider flow={flow}>.");
-	return flow;
-}
-function useOptionalFlowInstance() {
-	return useContext(FlowInstanceContext);
-}
-//#endregion
-//#region src/hooks.ts
-function useFlow(options) {
-	return useCreateFlowInstance(options);
-}
-function useCreateFlowInstance(options) {
-	const instanceRef = useRef(null);
-	const listenersRef = useRef(options.listeners);
-	const eventsRef = useRef(options.events);
-	const didMountRef = useRef(false);
-	listenersRef.current = options.listeners;
-	eventsRef.current = options.events;
-	if (!instanceRef.current) instanceRef.current = createFlowInstance({
-		graph: options.graph,
-		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) {
-			const subscription = flow.on("connectionEnded", eventsRef.current.connectionEnded);
-			cleanup.push(() => subscription.unsubscribe());
-		}
-		if (eventsRef.current?.layoutRequested) {
-			const subscription = flow.on("layoutRequested", eventsRef.current.layoutRequested);
-			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();
-		};
-	}, [
-		flow,
-		options.listeners,
-		options.events
-	]);
-	useEffect(() => () => 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;
-}
-function useFlowContext() {
-	return useFlowSelector((context) => context);
-}
-const entityNotifiers = /* @__PURE__ */ new WeakMap();
-function getEntityNotifier(flow) {
-	let notifier = entityNotifiers.get(flow.store);
-	if (!notifier) {
-		notifier = createEntityChangeNotifier(flow.store);
-		entityNotifiers.set(flow.store, notifier);
-	}
-	return notifier;
-}
-/**
-* Like `useFlowSelector`, but subscribed through the entity-change notifier:
-* the selector re-runs only when the entity with `id` may have changed, not
-* on every store transition. This is what makes thousands of mounted entity
-* views affordable — see BENCHMARK.md.
-*/
-function useFlowEntity(id, 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(() => {
-		const update = () => {
-			setSelected((previous) => {
-				const next = selectorRef.current(flow.getSnapshot());
-				return isEqualRef.current(previous, next) ? previous : next;
-			});
-		};
-		update();
-		return getEntityNotifier(flow).subscribe(id, update);
-	}, [flow, id]);
-	return selected;
-}
-function useFlowValue(selector, isEqual) {
-	return useFlowSelector(selector, { isEqual });
-}
-function useFlowNode(id, selector, isEqual) {
-	return useFlowSelector((context) => {
-		const node = context.graph.nodes.find((candidate) => candidate.id === id);
-		if (!node) throw new Error(`Flow node "${id}" was not found.`);
-		if (selector) return selector(node, context);
-		return {
-			...node,
-			...getDerivedFields(context, id, {
-				"data-flow-target": "entity",
-				"data-flow-entity-id": id,
-				"data-entity-id": id
-			})
-		};
-	}, { isEqual });
-}
-function useFlowEdge(id, selector, isEqual) {
-	const flow = useOptionalFlowInstance();
-	return useFlowSelector((context) => {
-		const edge = context.graph.edges.find((candidate) => candidate.id === id);
-		if (!edge) throw new Error(`Flow edge "${id}" was not found.`);
-		if (selector) return selector(edge, context);
-		return {
-			...edge,
-			pathData: flow?.getAllEdgePaths().get(id) ?? null,
-			...getDerivedFields(context, id, {
-				"data-flow-target": "entity",
-				"data-flow-entity-id": id,
-				"data-entity-id": id
-			})
-		};
-	}, { isEqual });
-}
-function useFlowPort(id, selector, isEqual) {
-	const flow = useFlowInstance();
-	return useFlowSelector((context) => {
-		const addressable = flow?.getAddressable(id);
-		if (!addressable || addressable.kind !== "port") throw new Error(`Flow port "${id}" was not found.`);
-		const binding = {
-			...addressable.port,
-			id,
-			nodeId: addressable.nodeId,
-			portName: addressable.portName,
-			...getDerivedFields(context, id, {
-				"data-flow-target": "port",
-				"data-flow-port-id": id,
-				"data-flow-node-id": addressable.nodeId,
-				"data-flow-port-name": addressable.portName
-			})
-		};
-		return selector ? selector(binding, context) : binding;
-	}, { isEqual });
-}
-function useFlowViewport() {
-	return useFlowSelector((context) => context.viewport);
-}
-function useFlowMeasurement(id) {
-	return useFlowSelector((context) => context.measurements.get(id) ?? null);
-}
-function getDerivedFields(context, id, props) {
-	return {
-		selected: context.selection.has(id),
-		focused: context.focusedEntityId === id,
-		hovered: context.hoveredEntityIds.has(id),
-		props
-	};
-}
-//#endregion
-export { useFlowEntity as a, useFlowPort as c, useFlowViewport as d, FlowInstanceProvider as f, createFlowInstance as h, useFlowEdge as i, useFlowSelector as l, useOptionalFlowInstance as m, useFlow as n, useFlowMeasurement as o, useFlowInstance as p, useFlowContext as r, useFlowNode as s, useCreateFlowInstance as t, useFlowValue as u };