@statelyai/flow-dom 0.1.0 → 3.0.0

package/dist/esm/index.d.ts

@@ -1,6 +1,91 @@
-import { FlowStore } from "@statelyai/flow";
+import { FlowColorMode, FlowEngine, FlowInputEffects, FlowInputEvent, FlowStore, FlowStoreContext, Rect } from "@statelyai/flow";
 
+//#region src/culling.d.ts
+
+/**
+ * Node/edge ids worth mounting, or `null` meaning "render everything" — either
+ * because culling is disabled, the viewport hasn't been measured yet, or the
+ * whole graph already fits the viewport (so culling would mount everything
+ * anyway). Adapters mount exactly these ids; `null` means mount all.
+ */
+type RenderableIds = {
+  nodeIds: Set<string>;
+  edgeIds: Set<string>;
+} | null;
+/**
+ * Compare two `computeRenderableIds` results by contents. Adapters use this as
+ * the equality function for their reactive subscription so a layer only
+ * re-renders when the visible set actually changes — not on every store
+ * transition (e.g. every drag frame).
+ */
+declare function renderableIdsEqual(a: RenderableIds, b: RenderableIds): boolean;
+/**
+ * Which entities should be mounted for the current viewport, or `null` to mount
+ * everything.
+ *
+ * Returns `null` when:
+ * - `enabled` is false (culling off),
+ * - the viewport is unmeasured (0×0 — culling against it would blank the first
+ *   paint),
+ * - or the whole graph fits the viewport (+overscan). In that case culling
+ *   would mount every entity anyway, so we skip the per-frame O(n+e) cull and
+ *   the N-id Set build entirely — running it for zero benefit is what makes a
+ *   zoomed-out drag laggy. The containment check is one O(n) `getGraphBounds`,
+ *   far cheaper than the cull it avoids.
+ *
+ * Otherwise returns the visible node/edge id sets (viewport cull + overscan).
+ *
+ * `context` must be the engine's current snapshot (the engine reads its own
+ * `getGraphBounds`/`getRenderableEntities` from the live store) — which holds
+ * when called inside a store-subscription selector.
+ */
+declare function computeRenderableIds(engine: FlowEngine, context: FlowStoreContext, enabled: boolean | undefined): RenderableIds;
+//#endregion
+//#region src/render-styles.d.ts
+type NodePositionStyle = {
+  position: "absolute";
+  top: 0;
+  left: 0;
+  transform: string;
+  transformOrigin: "0 0";
+  willChange: "transform" | undefined;
+  width: number | "max-content";
+  height: number | undefined;
+};
+/**
+ * Position + size for a node's *wrapper* element. Always uses `transform`
+ * (compositor-friendly), never `left/top`, and GPU-promotes the wrapper while
+ * it is being dragged so moving it doesn't repaint its neighbours.
+ *
+ * `autoSize` nodes are sized by their content (the DOM owns the size and the
+ * measurement observer feeds it back); all others use the graph-owned size.
+ *
+ * This styles the wrapper box only — the node's content (including any custom
+ * component) renders inside and is untouched.
+ */
+declare function nodePositionStyle(bounds: Rect, options?: {
+  autoSize?: boolean;
+  dragging?: boolean;
+}): NodePositionStyle;
+type ViewportStyle = {
+  position: "absolute";
+  inset: 0;
+  transformOrigin: "0 0";
+  pointerEvents: "none";
+};
+/**
+ * Style for the single transformed viewport element that wraps all canvas
+ * layers (nodes, edges, labels as static children). Its `transform` is set
+ * imperatively by `attachViewportTransform` and is deliberately NOT in this
+ * recipe — so a reactive framework binding can't re-render the node tree on
+ * every pan frame by owning the transform.
+ */
+declare function viewportStyle(): ViewportStyle;
+//#endregion
 //#region src/index.d.ts
+type ResolvedFlowColorMode = "light" | "dark";
+declare function resolveFlowColorMode(colorMode: FlowColorMode, targetWindow?: Pick<Window, "matchMedia"> | undefined): ResolvedFlowColorMode;
+declare function applyFlowColorMode(element: HTMLElement, colorMode: FlowColorMode, targetWindow?: Pick<Window, "matchMedia"> | undefined): ResolvedFlowColorMode;
 type MeasurementTarget = {
   nodeId: string;
 } | {
@@ -11,10 +96,42 @@ type MeasurementTarget = {
 };
 type MeasurementObserver = {
   observe(element: Element, target: MeasurementTarget): void;
+  /** Re-measure now (position-only changes don't fire ResizeObserver). */
+  measure(element: Element): void;
   unobserve(element: Element): void;
   disconnect(): void;
 };
-declare function createMeasurementObserver(store: FlowStore): MeasurementObserver;
+type MeasurementObserverOptions = {
+  container?: Element | (() => Element | null | undefined) | null;
+};
+declare function createMeasurementObserver(store: FlowStore, options?: MeasurementObserverOptions): MeasurementObserver;
+/** The container element registered for this store via `attachContainer`. */
+declare function getAttachedContainer(store: FlowStore): Element | undefined;
 declare function attachContainer(store: FlowStore, element: Element): () => void;
+declare function attachViewportTransform(store: FlowStore, element: HTMLElement): () => void;
+type AttachInputOptions = {
+  container: HTMLElement;
+  store: FlowStore;
+  runtime: {
+    send(event: FlowInputEvent): FlowInputEffects;
+    cancelSession(): void;
+  };
+  /**
+   * Auto-pan policy, evaluated once per animation frame while a gesture
+   * session holds the pointer near the container edge. Pass
+   * `getAutoPanDelta` from @statelyai/flow (injected as a function so this
+   * package keeps no runtime dependency on the optional peer). When it
+   * returns a delta, the binder pans the viewport and re-sends the
+   * stationary pointer so the dragged entity follows the canvas.
+   */
+  autoPan?: (context: ReturnType<FlowStore["getSnapshot"]>["context"], screenPoint: {
+    x: number;
+    y: number;
+  }) => {
+    x: number;
+    y: number;
+  } | null;
+};
+declare function attachInput(options: AttachInputOptions): () => void;
 //#endregion
-export { MeasurementObserver, MeasurementTarget, attachContainer, createMeasurementObserver };
+export { AttachInputOptions, MeasurementObserver, MeasurementObserverOptions, MeasurementTarget, type NodePositionStyle, type RenderableIds, ResolvedFlowColorMode, type ViewportStyle, applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, computeRenderableIds, createMeasurementObserver, getAttachedContainer, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle };

package/dist/esm/index.js

@@ -1,54 +1,178 @@
+//#region src/culling.ts
+/** Overscan (canvas px) added around the viewport so entities just off-screen
+* stay mounted and don't pop in/out at the edges. */
+const CULL_OVERSCAN = 100;
+function idSetsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const value of a) if (!b.has(value)) return false;
+	return true;
+}
+/**
+* Compare two `computeRenderableIds` results by contents. Adapters use this as
+* the equality function for their reactive subscription so a layer only
+* re-renders when the visible set actually changes — not on every store
+* transition (e.g. every drag frame).
+*/
+function renderableIdsEqual(a, b) {
+	return a === b || a !== null && b !== null && idSetsEqual(a.nodeIds, b.nodeIds) && idSetsEqual(a.edgeIds, b.edgeIds);
+}
+/**
+* Which entities should be mounted for the current viewport, or `null` to mount
+* everything.
+*
+* Returns `null` when:
+* - `enabled` is false (culling off),
+* - the viewport is unmeasured (0×0 — culling against it would blank the first
+*   paint),
+* - or the whole graph fits the viewport (+overscan). In that case culling
+*   would mount every entity anyway, so we skip the per-frame O(n+e) cull and
+*   the N-id Set build entirely — running it for zero benefit is what makes a
+*   zoomed-out drag laggy. The containment check is one O(n) `getGraphBounds`,
+*   far cheaper than the cull it avoids.
+*
+* Otherwise returns the visible node/edge id sets (viewport cull + overscan).
+*
+* `context` must be the engine's current snapshot (the engine reads its own
+* `getGraphBounds`/`getRenderableEntities` from the live store) — which holds
+* when called inside a store-subscription selector.
+*/
+function computeRenderableIds(engine, context, enabled) {
+	if (!enabled) return null;
+	const viewportSize = context.viewportSize;
+	if (viewportSize.width === 0 || viewportSize.height === 0) return null;
+	const viewport = context.viewport;
+	const left = -viewport.x / viewport.zoom - CULL_OVERSCAN;
+	const top = -viewport.y / viewport.zoom - CULL_OVERSCAN;
+	const right = left + viewportSize.width / viewport.zoom + CULL_OVERSCAN * 2;
+	const bottom = top + viewportSize.height / viewport.zoom + CULL_OVERSCAN * 2;
+	const bounds = engine.getGraphBounds();
+	if (left <= bounds.x && top <= bounds.y && right >= bounds.x + bounds.width && bottom >= bounds.y + bounds.height) return null;
+	const renderable = engine.getRenderableEntities({
+		cull: "viewport",
+		overscan: CULL_OVERSCAN
+	});
+	return {
+		nodeIds: new Set(renderable.nodes.map((node) => node.id)),
+		edgeIds: new Set(renderable.edges.map((edge) => edge.id))
+	};
+}
+//#endregion
+//#region src/render-styles.ts
+/**
+* Position + size for a node's *wrapper* element. Always uses `transform`
+* (compositor-friendly), never `left/top`, and GPU-promotes the wrapper while
+* it is being dragged so moving it doesn't repaint its neighbours.
+*
+* `autoSize` nodes are sized by their content (the DOM owns the size and the
+* measurement observer feeds it back); all others use the graph-owned size.
+*
+* This styles the wrapper box only — the node's content (including any custom
+* component) renders inside and is untouched.
+*/
+function nodePositionStyle(bounds, options = {}) {
+	return {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		transform: `translate(${bounds.x}px, ${bounds.y}px)`,
+		transformOrigin: "0 0",
+		willChange: options.dragging ? "transform" : void 0,
+		width: options.autoSize ? "max-content" : bounds.width,
+		height: options.autoSize ? void 0 : bounds.height
+	};
+}
+/**
+* Style for the single transformed viewport element that wraps all canvas
+* layers (nodes, edges, labels as static children). Its `transform` is set
+* imperatively by `attachViewportTransform` and is deliberately NOT in this
+* recipe — so a reactive framework binding can't re-render the node tree on
+* every pan frame by owning the transform.
+*/
+function viewportStyle() {
+	return {
+		position: "absolute",
+		inset: 0,
+		transformOrigin: "0 0",
+		pointerEvents: "none"
+	};
+}
+//#endregion
 //#region src/index.ts
-function createMeasurementObserver(store) {
+function resolveFlowColorMode(colorMode, targetWindow = typeof window === "undefined" ? void 0 : window) {
+	if (colorMode !== "system") return colorMode;
+	return targetWindow?.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyFlowColorMode(element, colorMode, targetWindow = element.ownerDocument.defaultView ?? void 0) {
+	const resolvedColorMode = resolveFlowColorMode(colorMode, targetWindow);
+	element.dataset.flowColorMode = resolvedColorMode;
+	element.dataset.flowColorModePreference = colorMode;
+	element.style.colorScheme = resolvedColorMode;
+	return resolvedColorMode;
+}
+const containers = /* @__PURE__ */ new WeakMap();
+function createMeasurementObserver(store, options = {}) {
 	const elementMap = /* @__PURE__ */ new Map();
-	let pendingMeasurements = /* @__PURE__ */ new Map();
-	let pendingPorts = [];
+	let pendingMeasurements = [];
 	let rafId = null;
 	function flush() {
 		rafId = null;
-		if (pendingMeasurements.size > 0) {
-			store.trigger.reportMeasurements({ measurements: pendingMeasurements });
-			pendingMeasurements = /* @__PURE__ */ new Map();
-		}
-		if (pendingPorts.length > 0) {
-			store.trigger.reportPortMeasurements({ measurements: pendingPorts });
-			pendingPorts = [];
+		if (pendingMeasurements.length > 0) {
+			store.trigger.updateMeasurements({ measurements: pendingMeasurements });
+			pendingMeasurements = [];
 		}
 	}
 	function scheduleFlush() {
 		if (rafId === null) rafId = requestAnimationFrame(flush);
 	}
+	function pushMeasurement(element, target, layoutSize) {
+		const viewport = store.getSnapshot().context.viewport;
+		const zoom = viewport.zoom || 1;
+		const rect = element.getBoundingClientRect();
+		const containerRect = (getContainer(options.container) ?? containers.get(store))?.getBoundingClientRect();
+		const measurement = {
+			x: (rect.left - (containerRect?.left ?? 0) - viewport.x) / zoom,
+			y: (rect.top - (containerRect?.top ?? 0) - viewport.y) / zoom,
+			width: layoutSize ? layoutSize.width : rect.width / zoom,
+			height: layoutSize ? layoutSize.height : rect.height / zoom
+		};
+		const id = "portName" in target ? `${target.nodeId}:${target.portName}` : "nodeId" in target ? target.nodeId : target.edgeId;
+		const existing = store.getSnapshot().context.measurements.get(id);
+		if (existing && Math.abs(existing.x - measurement.x) < .5 && Math.abs(existing.y - measurement.y) < .5 && Math.abs(existing.width - measurement.width) < .5 && Math.abs(existing.height - measurement.height) < .5) return;
+		pendingMeasurements.push({
+			id,
+			rect: measurement
+		});
+		scheduleFlush();
+	}
 	const observer = new ResizeObserver((entries) => {
 		for (const entry of entries) {
 			const target = elementMap.get(entry.target);
 			if (!target) continue;
-			const rect = entry.target.getBoundingClientRect();
-			if ("portName" in target) {
-				const nodeRect = entry.target.closest(`[data-entity-id="${target.nodeId}"]`)?.getBoundingClientRect();
-				if (nodeRect) pendingPorts.push({
-					nodeId: target.nodeId,
-					portName: target.portName,
-					x: rect.left - nodeRect.left,
-					y: rect.top - nodeRect.top,
-					width: rect.width,
-					height: rect.height
-				});
-			} else if ("nodeId" in target) pendingMeasurements.set(target.nodeId, {
-				width: rect.width,
-				height: rect.height
-			});
-			else pendingMeasurements.set(target.edgeId, {
-				width: rect.width,
-				height: rect.height
-			});
+			const box = entry.borderBoxSize?.[0];
+			const layoutSize = box ? {
+				width: box.inlineSize,
+				height: box.blockSize
+			} : entry.contentRect ? {
+				width: entry.contentRect.width,
+				height: entry.contentRect.height
+			} : void 0;
+			pushMeasurement(entry.target, target, layoutSize);
 		}
-		scheduleFlush();
 	});
 	return {
 		observe(element, target) {
 			elementMap.set(element, target);
 			observer.observe(element);
 		},
+		/**
+		* Re-measure an observed element immediately. ResizeObserver only fires
+		* on SIZE changes — position-only changes (layout passes, graph swaps,
+		* a port moving within its node) need an explicit re-measure.
+		*/
+		measure(element) {
+			const target = elementMap.get(element);
+			if (target) pushMeasurement(element, target);
+		},
 		unobserve(element) {
 			elementMap.delete(element);
 			observer.unobserve(element);
@@ -60,12 +184,19 @@ function createMeasurementObserver(store) {
 				cancelAnimationFrame(rafId);
 				rafId = null;
 			}
-			pendingMeasurements = /* @__PURE__ */ new Map();
-			pendingPorts = [];
+			pendingMeasurements = [];
 		}
 	};
 }
+function getContainer(container) {
+	return typeof container === "function" ? container() ?? null : container ?? null;
+}
+/** The container element registered for this store via `attachContainer`. */
+function getAttachedContainer(store) {
+	return containers.get(store);
+}
 function attachContainer(store, element) {
+	containers.set(store, element);
 	const update = () => {
 		const rect = element.getBoundingClientRect();
 		if (rect.width > 0 && rect.height > 0) store.trigger.updateViewportSize({
@@ -76,7 +207,252 @@ function attachContainer(store, element) {
 	update();
 	const observer = new ResizeObserver(update);
 	observer.observe(element);
-	return () => observer.disconnect();
+	return () => {
+		if (containers.get(store) === element) containers.delete(store);
+		observer.disconnect();
+	};
+}
+/** Idle delay (ms) before dropping the GPU-layer hint after interaction stops. */
+const VIEWPORT_PROMOTE_IDLE_MS = 200;
+function attachViewportTransform(store, element) {
+	let prevViewport = store.getSnapshot().context.viewport;
+	let prevState = store.getSnapshot().context.canvasState;
+	let idle;
+	const writeTransform = (viewport) => {
+		element.style.transform = `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
+	};
+	const promote = () => {
+		element.style.willChange = "transform";
+		if (idle !== void 0) clearTimeout(idle);
+	};
+	const scheduleClear = () => {
+		if (idle !== void 0) clearTimeout(idle);
+		idle = setTimeout(() => {
+			element.style.willChange = "auto";
+		}, VIEWPORT_PROMOTE_IDLE_MS);
+	};
+	writeTransform(prevViewport);
+	if (prevState !== "idle") promote();
+	const subscription = store.subscribe((snapshot) => {
+		const context = snapshot.context;
+		if (context.viewport !== prevViewport) {
+			prevViewport = context.viewport;
+			writeTransform(context.viewport);
+			promote();
+			if (context.canvasState === "idle") scheduleClear();
+		}
+		if (context.canvasState !== prevState) {
+			prevState = context.canvasState;
+			if (prevState !== "idle") promote();
+			else scheduleClear();
+		}
+	});
+	return () => {
+		if (idle !== void 0) clearTimeout(idle);
+		subscription.unsubscribe();
+	};
+}
+function attachInput(options) {
+	const { container, store, runtime } = options;
+	const doc = container.ownerDocument;
+	const win = doc.defaultView;
+	let capturedPointerId = null;
+	let lastClient = null;
+	let autoPanFrame = null;
+	function stopAutoPan() {
+		if (autoPanFrame !== null) {
+			win?.cancelAnimationFrame(autoPanFrame);
+			autoPanFrame = null;
+		}
+	}
+	function autoPanTick() {
+		autoPanFrame = null;
+		if (!options.autoPan || capturedPointerId === null || !lastClient) return;
+		const rect = container.getBoundingClientRect();
+		const screenPoint = {
+			x: lastClient.x - rect.left,
+			y: lastClient.y - rect.top
+		};
+		const delta = options.autoPan(store.getSnapshot().context, screenPoint);
+		if (delta) {
+			store.trigger.panBy({
+				x: -delta.x,
+				y: -delta.y
+			});
+			sendPointer("pointer.move", lastClient.x, lastClient.y, {
+				pointerId: lastClient.pointerId,
+				button: -1,
+				modifiers: {
+					shift: false,
+					meta: false,
+					ctrl: false,
+					alt: false
+				},
+				target: null
+			});
+		}
+		scheduleAutoPan();
+	}
+	function scheduleAutoPan() {
+		if (options.autoPan && autoPanFrame === null && win) autoPanFrame = win.requestAnimationFrame(autoPanTick);
+	}
+	function modifiers(event) {
+		return {
+			shift: event.shiftKey,
+			meta: event.metaKey,
+			ctrl: event.ctrlKey,
+			alt: event.altKey
+		};
+	}
+	function toPoints(event) {
+		const rect = container.getBoundingClientRect();
+		const screenPoint = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		const { viewport } = store.getSnapshot().context;
+		const zoom = viewport.zoom || 1;
+		return {
+			screenPoint,
+			point: {
+				x: (screenPoint.x - viewport.x) / zoom,
+				y: (screenPoint.y - viewport.y) / zoom
+			}
+		};
+	}
+	function resolveTarget(event) {
+		const element = capturedPointerId !== null ? doc.elementFromPoint(event.clientX, event.clientY) : event.target instanceof Element ? event.target : null;
+		if (!element) return { kind: "none" };
+		const portElement = element.closest("[data-flow-port-name]");
+		if (portElement?.dataset.flowPortName) return {
+			kind: "port",
+			nodeId: portElement.dataset.flowNodeId ?? "",
+			portName: portElement.dataset.flowPortName
+		};
+		if (element.closest("[data-flow-interactive]")) return { kind: "none" };
+		const entityElement = element.closest("[data-entity-id]");
+		if (entityElement?.dataset.entityId) {
+			const isLabel = element.closest("[data-flow-edge-label]") !== null;
+			const entityHasDragHandle = entityElement.querySelector("[data-flow-drag-handle]") !== null;
+			const pressedDragHandle = entityHasDragHandle && element.closest("[data-flow-drag-handle]") !== null;
+			return {
+				kind: "entity",
+				id: entityElement.dataset.entityId,
+				...isLabel ? { part: "label" } : {},
+				...entityHasDragHandle ? {
+					entityHasDragHandle,
+					pressedDragHandle
+				} : {}
+			};
+		}
+		if (element === container || element.closest("[data-flow-canvas-layer]") !== null) return { kind: "pane" };
+		return { kind: "none" };
+	}
+	function applyEffects(event, effects) {
+		if (effects.preventDefault) event.preventDefault();
+		if (effects.stopPropagation) event.stopPropagation();
+	}
+	function sendPointer(kind, clientX, clientY, info) {
+		const { screenPoint, point } = toPoints({
+			clientX,
+			clientY
+		});
+		const effects = runtime.send({
+			kind,
+			pointerId: info.pointerId,
+			button: info.button,
+			point,
+			screenPoint,
+			target: resolveTarget({
+				clientX,
+				clientY,
+				target: info.target
+			}),
+			modifiers: info.modifiers
+		});
+		if (effects.sessionStarted && kind === "pointer.down") {
+			try {
+				container.setPointerCapture(info.pointerId);
+			} catch {}
+			capturedPointerId = info.pointerId;
+			scheduleAutoPan();
+		}
+		if (effects.sessionEnded && capturedPointerId !== null) {
+			try {
+				if (container.hasPointerCapture(capturedPointerId)) container.releasePointerCapture(capturedPointerId);
+			} catch {}
+			capturedPointerId = null;
+			lastClient = null;
+			stopAutoPan();
+		}
+		return effects;
+	}
+	function handlePointer(kind) {
+		return (event) => {
+			if (kind === "pointer.down" || capturedPointerId !== null && event.pointerId === capturedPointerId) lastClient = {
+				x: event.clientX,
+				y: event.clientY,
+				pointerId: event.pointerId
+			};
+			applyEffects(event, sendPointer(kind, event.clientX, event.clientY, {
+				pointerId: event.pointerId,
+				button: event.button,
+				modifiers: modifiers(event),
+				target: event.target
+			}));
+		};
+	}
+	function handleWheel(event) {
+		const { screenPoint, point } = toPoints(event);
+		applyEffects(event, runtime.send({
+			kind: "wheel",
+			deltaX: event.deltaX,
+			deltaY: event.deltaY,
+			deltaMode: event.deltaMode,
+			point,
+			screenPoint,
+			target: resolveTarget(event),
+			modifiers: modifiers(event)
+		}));
+	}
+	function isEditableTarget(target) {
+		if (!(target instanceof HTMLElement)) return false;
+		return target.isContentEditable || target.matches("input, textarea, select, [contenteditable='true']");
+	}
+	function handleKey(kind) {
+		return (event) => {
+			applyEffects(event, runtime.send({
+				kind,
+				key: event.key,
+				editableTarget: isEditableTarget(event.target),
+				modifiers: modifiers(event)
+			}));
+		};
+	}
+	const onPointerDown = handlePointer("pointer.down");
+	const onPointerMove = handlePointer("pointer.move");
+	const onPointerUp = handlePointer("pointer.up");
+	const onPointerCancel = handlePointer("pointer.cancel");
+	const onKeyDown = handleKey("key.down");
+	const onKeyUp = handleKey("key.up");
+	container.addEventListener("pointerdown", onPointerDown);
+	container.addEventListener("pointermove", onPointerMove);
+	container.addEventListener("pointerup", onPointerUp);
+	container.addEventListener("pointercancel", onPointerCancel);
+	container.addEventListener("wheel", handleWheel, { passive: false });
+	win?.addEventListener("keydown", onKeyDown);
+	win?.addEventListener("keyup", onKeyUp);
+	return () => {
+		stopAutoPan();
+		runtime.cancelSession();
+		container.removeEventListener("pointerdown", onPointerDown);
+		container.removeEventListener("pointermove", onPointerMove);
+		container.removeEventListener("pointerup", onPointerUp);
+		container.removeEventListener("pointercancel", onPointerCancel);
+		container.removeEventListener("wheel", handleWheel);
+		win?.removeEventListener("keydown", onKeyDown);
+		win?.removeEventListener("keyup", onKeyUp);
+	};
 }
 //#endregion
-export { attachContainer, createMeasurementObserver };
+export { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, computeRenderableIds, createMeasurementObserver, getAttachedContainer, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-dom",
-  "version": "0.1.0",
+  "version": "3.0.0",
   "description": "DOM-specific helpers for @statelyai/flow.",
   "keywords": [
     "flow",
@@ -17,27 +17,32 @@
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/esm/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
-    },
-    "./src/index.ts": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
     }
   },
   "license": "MIT",
-  "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
-    "@statelyai/flow": ">=0.1.0"
+    "@statelyai/flow": ">=0.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@statelyai/flow": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "jsdom": "^25.0.0",
     "tsdown": "^0.12.0",
-    "typescript": "^5.8.0"
+    "typescript": "^5.8.0",
+    "vitest": "^4.1.0",
+    "@statelyai/flow": "0.4.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}