@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/FlowCanvas/FlowCanvas.js

@@ -0,0 +1,1151 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { overlayStack, useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { useFocusTrap } from "../_internal/overlay/useFocusTrap.js";
+import { useScrollLock } from "../_internal/overlay/useScrollLock.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { isLetterKey } from "../_internal/letterKey.js";
+import { mergeAriaDescribedby, mergeRefs, sanitizeId } from "../_internal/refs.js";
+import { useControllableState } from "../_internal/useControllableState.js";
+import { ESTIMATED_NODE_SIZE, computeLayout } from "./layout.js";
+import { edgeGeometry, selfLoopGeometry } from "./edgePath.js";
+import { nearestInDirection, topLeftMost } from "./spatialNav.js";
+import { FlowControls } from "./FlowControls.js";
+import { FlowEdge } from "./FlowEdge.js";
+import { FlowNode } from "./FlowNode.js";
+import { ZOOM_STEP, useViewport } from "./useViewport.js";
+import FlowCanvas_module_default from "./FlowCanvas.module.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2, Minimize2 } from "lucide-react";
+// src/components/FlowCanvas/FlowCanvas.tsx
+/**
+* A pan/zoom canvas for directed node-edge diagrams, the primitive behind visual workflow builders.
+* @see docs/components/FlowCanvas.md
+*/
+var FlowCanvas = forwardRef(function FlowCanvas({ nodes, edges, onNodeCreate, onNodeMove, onNodeOpen, onNodeDelete, onEdgeCreate, onEdgeReconnect, onEdgeOpen, onEdgeDelete, isValidConnection, selection: selectionProp, defaultSelection = null, onSelectionChange, readOnly = false, allowConnections = true, confineNodesToView = false, renderNodeActions, renderEdgeActions, controls, maximizeControl = true, maximized: maximizedProp, defaultMaximized = false, onMaximizedChange, refitKey, className, "aria-describedby": ariaDescribedby, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, onDoubleClick, onBlur, onFocusCapture, ...rest }, ref) {
+	const t = useTranslation();
+	const rootRef = useRef(null);
+	const uid = sanitizeId(useId());
+	const instructionsId = `flow-instructions-${uid}`;
+	const markerId = `flow-arrow-${uid}`;
+	const markerActiveId = `flow-arrow-active-${uid}`;
+	const canConnect = !readOnly && allowConnections;
+	const nodeById = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+	const edgeIds = useMemo(() => new Set(edges.map((e) => e.id)), [edges]);
+	const [rawSelection, setSelection] = useControllableState({
+		value: selectionProp,
+		defaultValue: defaultSelection,
+		onChange: onSelectionChange
+	});
+	const [maximized, setMaximized] = useControllableState({
+		value: maximizedProp,
+		defaultValue: defaultMaximized,
+		onChange: onMaximizedChange
+	});
+	const setMaximizedAnnounced = (next) => {
+		setMaximized(next);
+		announce(t(next ? "flowCanvas.maximized" : "flowCanvas.restored"));
+	};
+	useScrollLock(maximized);
+	useFocusTrap(rootRef, maximized);
+	const prevMaximizedRef = useRef(maximized);
+	const previouslyFocusedRef = useRef(null);
+	useEffect(() => {
+		const was = prevMaximizedRef.current;
+		prevMaximizedRef.current = maximized;
+		if (maximized && !was) {
+			previouslyFocusedRef.current = document.activeElement ?? null;
+			rootRef.current?.focus({ preventScroll: true });
+		} else if (!maximized && was) {
+			const target = previouslyFocusedRef.current;
+			previouslyFocusedRef.current = null;
+			if (target && document.contains(target)) target.focus({ preventScroll: true });
+			else rootRef.current?.focus({ preventScroll: true });
+		}
+	}, [maximized]);
+	const selection = useMemo(() => {
+		if (!rawSelection) return null;
+		return (rawSelection.type === "node" ? nodeById.has(rawSelection.id) : edgeIds.has(rawSelection.id)) ? rawSelection : null;
+	}, [
+		rawSelection,
+		nodeById,
+		edgeIds
+	]);
+	const selectionRef = useRef(selection);
+	selectionRef.current = selection;
+	const nodeEls = useRef(/* @__PURE__ */ new Map());
+	const edgeEls = useRef(/* @__PURE__ */ new Map());
+	const [sizes, setSizes] = useState(/* @__PURE__ */ new Map());
+	const pendingFocusReclaim = useRef(false);
+	const flagFocusReclaim = useCallback((el) => {
+		if (el && (el === document.activeElement || el.contains(document.activeElement))) pendingFocusReclaim.current = true;
+	}, []);
+	const registerNodeEl = useCallback((id, el) => {
+		if (el) nodeEls.current.set(id, el);
+		else {
+			flagFocusReclaim(nodeEls.current.get(id));
+			nodeEls.current.delete(id);
+		}
+	}, [flagFocusReclaim]);
+	const registerEdgeEl = useCallback((id, el) => {
+		if (el) edgeEls.current.set(id, el);
+		else {
+			flagFocusReclaim(edgeEls.current.get(id));
+			edgeEls.current.delete(id);
+		}
+	}, [flagFocusReclaim]);
+	const nodeIdsKey = nodes.map((n) => n.id).join(" ");
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const next = /* @__PURE__ */ new Map();
+			for (const [id, el] of nodeEls.current) if (el.offsetWidth > 0 && el.offsetHeight > 0) next.set(id, {
+				width: el.offsetWidth,
+				height: el.offsetHeight
+			});
+			setSizes(next);
+		});
+		for (const el of nodeEls.current.values()) observer.observe(el);
+		return () => observer.disconnect();
+	}, [nodeIdsKey]);
+	const [dragOverrides, setDragOverrides] = useState(/* @__PURE__ */ new Map());
+	const [liveDrag, setLiveDrag] = useState(null);
+	const dragState = useRef(null);
+	const layoutPositions = useMemo(() => computeLayout(nodes, edges, sizes), [
+		nodes,
+		edges,
+		sizes
+	]);
+	const positionOf = useCallback((node) => {
+		if (liveDrag?.id === node.id) return liveDrag.position;
+		return node.position ?? dragOverrides.get(node.id) ?? layoutPositions.get(node.id) ?? {
+			x: 0,
+			y: 0
+		};
+	}, [
+		liveDrag,
+		dragOverrides,
+		layoutPositions
+	]);
+	const rects = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const node of nodes) {
+			const pos = positionOf(node);
+			const size = sizes.get(node.id) ?? ESTIMATED_NODE_SIZE;
+			map.set(node.id, {
+				x: pos.x,
+				y: pos.y,
+				width: size.width,
+				height: size.height
+			});
+		}
+		return map;
+	}, [
+		nodes,
+		positionOf,
+		sizes
+	]);
+	const [connect, setConnect] = useState(null);
+	const connectRef = useRef(connect);
+	connectRef.current = connect;
+	useFloatingSurface(connect != null);
+	const defaultIsValid = useCallback((from, to) => from !== to && !edges.some((e) => e.from === from && e.to === to), [edges]);
+	const isValid = isValidConnection ?? defaultIsValid;
+	const isRewireValid = useCallback((edgeId, from, to) => from !== to && !edges.some((e) => e.id !== edgeId && e.from === from && e.to === to) && (isValidConnection ? isValidConnection(from, to) : true), [edges, isValidConnection]);
+	const rewireEndpoints = (c) => c.end === "source" ? [c.target ?? c.fixed, c.fixed] : [c.fixed, c.target ?? c.fixed];
+	const nodeAtPoint = useCallback((point) => {
+		for (const [id, rect] of [...rects].reverse()) if (point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height) return id;
+		return null;
+	}, [rects]);
+	const canCommitConnect = (from, to) => nodeById.has(from) && nodeById.has(to) && isValid(from, to);
+	const warnedEdges = useRef(/* @__PURE__ */ new Set());
+	const resolvedEdges = useMemo(() => {
+		const reverse = new Set(edges.map((e) => `${e.to} ${e.from}`));
+		return edges.flatMap((edge) => {
+			const source = rects.get(edge.from);
+			const target = rects.get(edge.to);
+			if (!source || !target) {
+				if (process.env.NODE_ENV !== "production" && !warnedEdges.current.has(edge.id)) {
+					warnedEdges.current.add(edge.id);
+					console.warn(`[FlowCanvas] edge "${edge.id}" references a missing node (${edge.from} → ${edge.to}) and was skipped.`);
+				}
+				return [];
+			}
+			return [{
+				edge,
+				geometry: edge.from === edge.to ? selfLoopGeometry(source) : edgeGeometry(source, target, reverse.has(`${edge.from} ${edge.to}`) ? edge.from < edge.to ? 1 : -1 : 0)
+			}];
+		});
+	}, [edges, rects]);
+	const { viewport, panBy, zoomBy, fitTo } = useViewport(rootRef);
+	const [announcement, setAnnouncement] = useState({
+		text: "",
+		nonce: 0
+	});
+	const announce = useCallback((message) => setAnnouncement((prev) => ({
+		text: message,
+		nonce: prev.nonce + 1
+	})), []);
+	const commitRewire = (c, prevented = false) => {
+		if (!c.edgeId || !c.target || prevented) return false;
+		const edge = edges.find((e) => e.id === c.edgeId);
+		if (!edge) return false;
+		const [newFrom, newTo] = rewireEndpoints(c);
+		if (newFrom === edge.from && newTo === edge.to) return false;
+		if (!isRewireValid(c.edgeId, newFrom, newTo)) return false;
+		onEdgeReconnect?.(c.edgeId, newFrom, newTo);
+		announce(t("flowCanvas.rewireDone", {
+			from: nodeById.get(newFrom)?.label || newFrom,
+			to: nodeById.get(newTo)?.label || newTo
+		}));
+		return true;
+	};
+	const clampToView = useCallback((id, position) => {
+		if (!confineNodesToView) return position;
+		const root = rootRef.current;
+		if (!root) return position;
+		const { width: rw, height: rh } = root.getBoundingClientRect();
+		const { tx, ty, z } = viewport;
+		const visX = -tx / z;
+		const visY = -ty / z;
+		const visW = rw / z;
+		const visH = rh / z;
+		const size = sizes.get(id) ?? ESTIMATED_NODE_SIZE;
+		const maxX = Math.max(visX, visX + visW - size.width);
+		const maxY = Math.max(visY, visY + visH - size.height);
+		return {
+			x: Math.min(Math.max(position.x, visX), maxX),
+			y: Math.min(Math.max(position.y, visY), maxY)
+		};
+	}, [
+		confineNodesToView,
+		viewport,
+		sizes
+	]);
+	const contentBounds = useMemo(() => {
+		if (rects.size === 0) return null;
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const rect of rects.values()) {
+			minX = Math.min(minX, rect.x);
+			minY = Math.min(minY, rect.y);
+			maxX = Math.max(maxX, rect.x + rect.width);
+			maxY = Math.max(maxY, rect.y + rect.height);
+		}
+		return {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY
+		};
+	}, [rects]);
+	const svgExtent = useMemo(() => {
+		const MARGIN = 64;
+		if (!contentBounds) return {
+			x: 0,
+			y: 0,
+			width: 1,
+			height: 1
+		};
+		const x = Math.min(0, contentBounds.x) - MARGIN;
+		const y = Math.min(0, contentBounds.y) - MARGIN;
+		return {
+			x,
+			y,
+			width: Math.max(1, contentBounds.x + contentBounds.width + MARGIN - x),
+			height: Math.max(1, contentBounds.y + contentBounds.height + MARGIN - y)
+		};
+	}, [contentBounds]);
+	const fitState = useRef("pending");
+	const hasMeasuredSizes = sizes.size > 0;
+	useEffect(() => {
+		if (fitState.current === "done" || !contentBounds) return;
+		if (fitState.current === "estimated") {
+			if (hasMeasuredSizes && fitTo(contentBounds)) fitState.current = "done";
+			return;
+		}
+		if (fitTo(contentBounds)) {
+			fitState.current = hasMeasuredSizes ? "done" : "estimated";
+			return;
+		}
+		if (typeof ResizeObserver === "undefined") return;
+		const el = rootRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			if (fitState.current === "pending" && fitTo(contentBounds)) {
+				fitState.current = hasMeasuredSizes ? "done" : "estimated";
+				observer.disconnect();
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		contentBounds,
+		fitTo,
+		hasMeasuredSizes
+	]);
+	const fitToRef = useRef(fitTo);
+	fitToRef.current = fitTo;
+	const contentBoundsRef = useRef(contentBounds);
+	contentBoundsRef.current = contentBounds;
+	const prevRefitKeyRef = useRef(refitKey);
+	useLayoutEffect(() => {
+		if (prevRefitKeyRef.current === refitKey) return;
+		prevRefitKeyRef.current = refitKey;
+		const bounds = contentBoundsRef.current;
+		if (bounds) fitToRef.current(bounds);
+	}, [refitKey]);
+	const zoomIn = useCallback(() => {
+		zoomBy(ZOOM_STEP);
+	}, [zoomBy]);
+	const zoomOut = useCallback(() => {
+		zoomBy(1 / ZOOM_STEP);
+	}, [zoomBy]);
+	const lastZoom = useRef(viewport.z);
+	useEffect(() => {
+		if (viewport.z !== lastZoom.current) {
+			lastZoom.current = viewport.z;
+			announce(t("flowCanvas.zoomLevel", { percent: Math.round(viewport.z * 100) }));
+		}
+	}, [
+		viewport.z,
+		announce,
+		t
+	]);
+	const [isPanning, setIsPanning] = useState(false);
+	const panState = useRef(null);
+	const isBackgroundTarget = (target) => {
+		const el = target;
+		if (!el || !rootRef.current?.contains(el)) return false;
+		return !el.closest?.("[data-flow-node], [data-flow-edge], [data-flow-chip], [data-flow-controls], [data-flow-handle]");
+	};
+	const cancelKeyboardConnect = useCallback(() => {
+		if (connectRef.current?.mode !== "keyboard") return;
+		setConnect(null);
+		announce(t("flowCanvas.connectCancelled"));
+	}, [announce, t]);
+	const handleRootPointerDown = (event) => {
+		onPointerDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.button !== 0 || !isBackgroundTarget(event.target)) return;
+		cancelKeyboardConnect();
+		panState.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			moved: false
+		};
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+	};
+	const handleRootPointerMove = (event) => {
+		onPointerMove?.(event);
+		if (event.defaultPrevented) return;
+		if (connect?.mode === "pointer" && event.pointerId === connect.pointerId) {
+			const point = toCanvasPoint(event.clientX, event.clientY);
+			const over = nodeAtPoint(point);
+			const target = over && (connect.edgeId ? over !== connect.fixed && isRewireValid(connect.edgeId, connect.end === "target" ? connect.fixed : over, connect.end === "target" ? over : connect.fixed) : over !== connect.from && isValid(connect.from, over)) ? over : null;
+			setConnect({
+				...connect,
+				target,
+				cursor: point
+			});
+			return;
+		}
+		const drag = dragState.current;
+		if (drag && event.pointerId === drag.pointerId) {
+			if (!drag.moved && Math.abs(event.clientX - drag.startClientX) + Math.abs(event.clientY - drag.startClientY) < 3) return;
+			drag.moved = true;
+			drag.position = clampToView(drag.id, {
+				x: drag.position.x + (event.clientX - drag.lastClientX) / viewport.z,
+				y: drag.position.y + (event.clientY - drag.lastClientY) / viewport.z
+			});
+			drag.lastClientX = event.clientX;
+			drag.lastClientY = event.clientY;
+			setLiveDrag({
+				id: drag.id,
+				position: drag.position
+			});
+			return;
+		}
+		const pan = panState.current;
+		if (!pan || event.pointerId !== pan.pointerId) return;
+		const dx = event.clientX - pan.startX;
+		const dy = event.clientY - pan.startY;
+		if (!pan.moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+		pan.moved = true;
+		setIsPanning(true);
+		pan.startX = event.clientX;
+		pan.startY = event.clientY;
+		panBy(dx, dy);
+	};
+	const handleRootPointerUp = (event) => {
+		onPointerUp?.(event);
+		if (connect?.mode === "pointer" && event.pointerId === connect.pointerId) {
+			if (connect.edgeId) {
+				commitRewire(connect, event.defaultPrevented);
+				setConnect(null);
+				return;
+			}
+			if (connect.target && !event.defaultPrevented && canCommitConnect(connect.from, connect.target)) {
+				onEdgeCreate?.(connect.from, connect.target);
+				announce(t("flowCanvas.connectDone", {
+					from: nodeById.get(connect.from)?.label || connect.from,
+					to: nodeById.get(connect.target)?.label || connect.target
+				}));
+			}
+			setConnect(null);
+			return;
+		}
+		const drag = dragState.current;
+		if (drag && event.pointerId === drag.pointerId) {
+			dragState.current = null;
+			const node = nodeById.get(drag.id);
+			if (drag.moved && !event.defaultPrevented && node) {
+				const position = clampToView(drag.id, {
+					x: drag.position.x + (event.clientX - drag.lastClientX) / viewport.z,
+					y: drag.position.y + (event.clientY - drag.lastClientY) / viewport.z
+				});
+				if (node.position === void 0) setDragOverrides((prev) => new Map(prev).set(drag.id, position));
+				onNodeMove?.(drag.id, position);
+				announce(t("flowCanvas.nodeMoved", { label: node.label }));
+			}
+			setLiveDrag(null);
+			return;
+		}
+		const pan = panState.current;
+		if (!pan || event.pointerId !== pan.pointerId) return;
+		panState.current = null;
+		setIsPanning(false);
+		if (!pan.moved && !event.defaultPrevented && selection != null) {
+			setSelection(null);
+			announce(t("flowCanvas.selectionCleared"));
+		}
+	};
+	const handleRootPointerCancel = (event) => {
+		onPointerCancel?.(event);
+		if (connect?.mode === "pointer" && event.pointerId === connect.pointerId) {
+			setConnect(null);
+			return;
+		}
+		const drag = dragState.current;
+		if (drag && event.pointerId === drag.pointerId) {
+			dragState.current = null;
+			setLiveDrag(null);
+			return;
+		}
+		const pan = panState.current;
+		if (!pan || event.pointerId !== pan.pointerId) return;
+		panState.current = null;
+		setIsPanning(false);
+	};
+	const edgeCycle = useRef(null);
+	const REVEAL_PAD = 24;
+	const revealRect = useCallback((rect) => {
+		const rootRect = rootRef.current?.getBoundingClientRect();
+		if (!rootRect || rootRect.width === 0 || rootRect.height === 0) return;
+		const { tx, ty, z } = viewport;
+		const left = rect.x * z + tx;
+		const top = rect.y * z + ty;
+		const right = (rect.x + rect.width) * z + tx;
+		const bottom = (rect.y + rect.height) * z + ty;
+		let dx = 0;
+		let dy = 0;
+		if (right > rootRect.width) dx = rootRect.width - REVEAL_PAD - right;
+		if (left + dx < 0) dx = REVEAL_PAD - left;
+		if (bottom > rootRect.height) dy = rootRect.height - REVEAL_PAD - bottom;
+		if (top + dy < 0) dy = REVEAL_PAD - top;
+		if (dx !== 0 || dy !== 0) panBy(dx, dy);
+	}, [viewport, panBy]);
+	const focusNode = useCallback((id) => {
+		const el = nodeEls.current.get(id);
+		if (!el) return;
+		edgeCycle.current = null;
+		el.focus({ preventScroll: true });
+		const rect = rects.get(id);
+		if (rect) revealRect(rect);
+		const index = nodes.findIndex((n) => n.id === id);
+		announce(t("flowCanvas.nodeFocused", {
+			label: nodeById.get(id)?.label || id,
+			index: index + 1,
+			total: nodes.length
+		}));
+	}, [
+		nodes,
+		nodeById,
+		announce,
+		t,
+		rects,
+		revealRect
+	]);
+	const focusEdge = useCallback((id, index, total) => {
+		const el = edgeEls.current.get(id);
+		if (!el) return;
+		el.focus({ preventScroll: true });
+		const resolved = resolvedEdges.find((r) => r.edge.id === id);
+		if (resolved) {
+			const { midpoint } = resolved.geometry;
+			revealRect({
+				x: midpoint.x - 20,
+				y: midpoint.y - 20,
+				width: 40,
+				height: 40
+			});
+		}
+		const edge = edges.find((e) => e.id === id);
+		if (edge) announce(t("flowCanvas.edgeFocused", {
+			from: nodeById.get(edge.from)?.label || edge.from,
+			to: nodeById.get(edge.to)?.label || edge.to,
+			index,
+			total
+		}));
+	}, [
+		edges,
+		nodeById,
+		announce,
+		t,
+		resolvedEdges,
+		revealRect
+	]);
+	useEffect(() => {
+		if (!pendingFocusReclaim.current) return;
+		pendingFocusReclaim.current = false;
+		const active = document.activeElement;
+		if (active && active !== document.body && active !== document.documentElement && active.isConnected) return;
+		const root = rootRef.current;
+		if (!root || !root.isConnected) return;
+		root.focus({ preventScroll: true });
+		announce(t("flowCanvas.focusReturned"));
+	});
+	const handleRootKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const targetEl = event.target;
+		if (!(targetEl === event.currentTarget || targetEl.hasAttribute("data-flow-node") || targetEl.hasAttribute("data-flow-edge"))) return;
+		const { key, ctrlKey, metaKey } = event;
+		if (connect?.mode === "pointer" && key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			setConnect(null);
+			announce(t("flowCanvas.connectCancelled"));
+			return;
+		}
+		if (connect?.mode === "keyboard") {
+			if (key === "Tab") return;
+			if (ctrlKey || metaKey) {
+				if (key.startsWith("Arrow")) {
+					event.preventDefault();
+					if (key === "ArrowRight") panBy(-40, 0);
+					else if (key === "ArrowLeft") panBy(40, 0);
+					else if (key === "ArrowDown") panBy(0, -40);
+					else if (key === "ArrowUp") panBy(0, 40);
+					return;
+				}
+				return;
+			}
+			event.preventDefault();
+			if (key === "Escape") {
+				event.stopPropagation();
+				setConnect(null);
+				const sourceRect = rects.get(connect.from);
+				if (sourceRect) revealRect(sourceRect);
+				announce(t("flowCanvas.connectCancelled"));
+				return;
+			}
+			if (key === "Enter") {
+				if (connect.edgeId) {
+					if (!commitRewire(connect)) announce(t("flowCanvas.connectCancelled"));
+					setConnect(null);
+					const exitRect = rects.get(connect.fixed ?? connect.from);
+					if (exitRect) revealRect(exitRect);
+					return;
+				}
+				if (connect.target && canCommitConnect(connect.from, connect.target)) {
+					onEdgeCreate?.(connect.from, connect.target);
+					announce(t("flowCanvas.connectDone", {
+						from: nodeById.get(connect.from)?.label || connect.from,
+						to: nodeById.get(connect.target)?.label || connect.target
+					}));
+				} else announce(t("flowCanvas.connectCancelled"));
+				setConnect(null);
+				const exitRect = rects.get(connect.from);
+				if (exitRect) revealRect(exitRect);
+				return;
+			}
+			if (key.startsWith("Arrow")) {
+				const candidates = /* @__PURE__ */ new Map();
+				for (const [id, rect] of rects) if (connect.edgeId ? id !== connect.fixed && isRewireValid(connect.edgeId, connect.end === "target" ? connect.fixed : id, connect.end === "target" ? id : connect.fixed) : id !== connect.from && isValid(connect.from, id)) candidates.set(id, rect);
+				const sourceRect = rects.get(connect.from);
+				if (sourceRect) candidates.set(connect.from, sourceRect);
+				const fromId = connect.target ?? connect.from;
+				const direction = key.replace("Arrow", "").toLowerCase();
+				let next = nearestInDirection(fromId, candidates, direction);
+				if (next === connect.from) next = nearestInDirection(connect.from, candidates, direction);
+				if (next && next !== connect.from) {
+					setConnect({
+						...connect,
+						target: next
+					});
+					const targetRect = candidates.get(next);
+					if (targetRect) revealRect(targetRect);
+					announce(t("flowCanvas.connectTarget", { label: nodeById.get(next)?.label || next }));
+				} else announce(t("flowCanvas.connectNoTarget"));
+				return;
+			}
+			return;
+		}
+		if (isLetterKey(event, "c") && !ctrlKey && !metaKey) {
+			if (!canConnect) return;
+			if (connect?.mode === "pointer") return;
+			const nodeId = targetEl.getAttribute("data-flow-node") ?? (selection?.type === "node" ? selection.id : null);
+			if (!nodeId) return;
+			event.preventDefault();
+			setConnect({
+				from: nodeId,
+				mode: "keyboard",
+				pointerId: null,
+				target: null,
+				cursor: null
+			});
+			announce(t("flowCanvas.connectStart", { label: nodeById.get(nodeId)?.label || nodeId }));
+			return;
+		}
+		if (isLetterKey(event, "r") && !ctrlKey && !metaKey) {
+			if (!canConnect) return;
+			if (connect?.mode === "pointer") return;
+			const edgeId = targetEl.getAttribute("data-flow-edge") ?? (selection?.type === "edge" ? selection.id : null);
+			if (!edgeId) return;
+			const edge = edges.find((e) => e.id === edgeId);
+			if (!edge) return;
+			event.preventDefault();
+			const end = event.shiftKey ? "source" : "target";
+			const fixed = end === "target" ? edge.from : edge.to;
+			setConnect({
+				from: fixed,
+				mode: "keyboard",
+				pointerId: null,
+				target: null,
+				cursor: null,
+				edgeId,
+				end,
+				fixed
+			});
+			announce(t(end === "source" ? "flowCanvas.rewireStartSource" : "flowCanvas.rewireStartTarget"));
+			return;
+		}
+		if (event.shiftKey && key.startsWith("Arrow")) {
+			if (readOnly) return;
+			const nodeId = targetEl.getAttribute("data-flow-node") ?? (selection?.type === "node" ? selection.id : null);
+			if (!nodeId) return;
+			event.preventDefault();
+			const node = nodeById.get(nodeId);
+			if (!node) return;
+			const current = positionOf(node);
+			const NUDGE = 8;
+			const next = clampToView(nodeId, {
+				x: current.x + (key === "ArrowRight" ? NUDGE : key === "ArrowLeft" ? -8 : 0),
+				y: current.y + (key === "ArrowDown" ? NUDGE : key === "ArrowUp" ? -8 : 0)
+			});
+			if (node.position === void 0) setDragOverrides((prev) => new Map(prev).set(nodeId, next));
+			onNodeMove?.(nodeId, next);
+			const size = rects.get(nodeId);
+			if (size) revealRect({
+				x: next.x,
+				y: next.y,
+				width: size.width,
+				height: size.height
+			});
+			announce(t("flowCanvas.nodeMoved", { label: node.label }));
+			return;
+		}
+		if ((ctrlKey || metaKey) && key.startsWith("Arrow")) {
+			event.preventDefault();
+			if (key === "ArrowRight") panBy(-40, 0);
+			else if (key === "ArrowLeft") panBy(40, 0);
+			else if (key === "ArrowDown") panBy(0, -40);
+			else if (key === "ArrowUp") panBy(0, 40);
+			return;
+		}
+		if (ctrlKey || metaKey) return;
+		const focusedNodeId = targetEl.getAttribute("data-flow-node");
+		const focusedEdgeId = targetEl.getAttribute("data-flow-edge");
+		if (key.startsWith("Arrow")) {
+			event.preventDefault();
+			if (focusedEdgeId) {
+				const edge = edges.find((e) => e.id === focusedEdgeId);
+				const cycleOrigin = edgeCycle.current?.nodeId;
+				const originId = edge && cycleOrigin != null && (edge.from === cycleOrigin || edge.to === cycleOrigin) ? cycleOrigin : edge?.from;
+				if (originId) {
+					focusNode(originId);
+					return;
+				}
+			}
+			const direction = key.replace("Arrow", "").toLowerCase();
+			if (!focusedNodeId) {
+				const first = selection?.type === "node" && rects.has(selection.id) ? selection.id : topLeftMost(rects);
+				if (first) focusNode(first);
+				return;
+			}
+			const next = nearestInDirection(focusedNodeId, rects, direction);
+			if (next) focusNode(next);
+			return;
+		}
+		if (key === "Home" || key === "End") {
+			event.preventDefault();
+			const target = key === "Home" ? nodes[0] : nodes[nodes.length - 1];
+			if (target) focusNode(target.id);
+			return;
+		}
+		if (isLetterKey(event, "e")) {
+			const focusedEdge = focusedEdgeId ? edges.find((e) => e.id === focusedEdgeId) : void 0;
+			const cycleOrigin = edgeCycle.current?.nodeId;
+			const cycleOwnsFocusedEdge = focusedEdge != null && cycleOrigin != null && (focusedEdge.from === cycleOrigin || focusedEdge.to === cycleOrigin);
+			const originId = focusedNodeId ?? (focusedEdge ? cycleOwnsFocusedEdge ? cycleOrigin : focusedEdge.from : cycleOrigin);
+			if (!originId) return;
+			event.preventDefault();
+			const renderable = new Set(resolvedEdges.map((r) => r.edge.id));
+			const attached = [...edges.filter((e) => e.from === originId), ...edges.filter((e) => e.to === originId && e.from !== originId)].filter((e) => renderable.has(e.id));
+			if (attached.length === 0) return;
+			const index = edgeCycle.current?.nodeId === originId ? (edgeCycle.current.index + 1) % attached.length : 0;
+			edgeCycle.current = {
+				nodeId: originId,
+				index
+			};
+			focusEdge(attached[index].id, index + 1, attached.length);
+			return;
+		}
+		if (key === "+" || key === "=") {
+			event.preventDefault();
+			zoomIn();
+			return;
+		}
+		if (key === "-" || key === "_") {
+			event.preventDefault();
+			zoomOut();
+			return;
+		}
+		if (key === "0") {
+			event.preventDefault();
+			fitTo(contentBounds);
+			return;
+		}
+		if (isLetterKey(event, "f") && !ctrlKey && !metaKey) {
+			event.preventDefault();
+			setMaximizedAnnounced(!maximized);
+			return;
+		}
+		if (key === "Delete" || key === "Backspace") {
+			if (readOnly) return;
+			const target = focusedNodeId != null ? {
+				type: "node",
+				id: focusedNodeId
+			} : focusedEdgeId != null ? {
+				type: "edge",
+				id: focusedEdgeId
+			} : selection;
+			if (!target) return;
+			event.preventDefault();
+			if (target.type === "node") onNodeDelete?.(target.id);
+			else onEdgeDelete?.(target.id);
+			return;
+		}
+		if (key === "Escape") {
+			if (overlayStack.hasOpenFloating() || overlayStack.wasEscapeConsumed(event.nativeEvent)) return;
+			if (selection) {
+				event.preventDefault();
+				event.stopPropagation();
+				setSelection(null);
+				announce(t("flowCanvas.selectionCleared"));
+				return;
+			}
+			if (maximized) {
+				event.preventDefault();
+				event.stopPropagation();
+				setMaximizedAnnounced(false);
+			}
+			return;
+		}
+		if (key === "Enter" || key === " ") {
+			const target = focusedNodeId != null ? {
+				type: "node",
+				id: focusedNodeId
+			} : focusedEdgeId != null ? {
+				type: "edge",
+				id: focusedEdgeId
+			} : selection;
+			if (!target) return;
+			event.preventDefault();
+			if (target.type === "node") onNodeOpen?.(target.id);
+			else onEdgeOpen?.(target.id);
+			return;
+		}
+	};
+	const handleNodePointerDown = useCallback((id, event) => {
+		if (event.button !== 0) return;
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		event.stopPropagation();
+		cancelKeyboardConnect();
+		const current = selectionRef.current;
+		if (!(current?.type === "node" && current.id === id)) setSelection({
+			type: "node",
+			id
+		});
+		if (readOnly) return;
+		if (dragState.current) return;
+		const node = nodeById.get(id);
+		if (!node) return;
+		const start = node.position ?? dragOverrides.get(id) ?? layoutPositions.get(id) ?? {
+			x: 0,
+			y: 0
+		};
+		dragState.current = {
+			id,
+			pointerId: event.pointerId,
+			startClientX: event.clientX,
+			startClientY: event.clientY,
+			lastClientX: event.clientX,
+			lastClientY: event.clientY,
+			position: start,
+			moved: false
+		};
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+	}, [
+		setSelection,
+		cancelKeyboardConnect,
+		readOnly,
+		nodeById,
+		dragOverrides,
+		layoutPositions
+	]);
+	const handleHandlePointerDown = useCallback((id, event) => {
+		if (event.button !== 0 || !canConnect) return;
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		if (connectRef.current?.mode === "pointer") return;
+		setConnect({
+			from: id,
+			mode: "pointer",
+			pointerId: event.pointerId,
+			target: null,
+			cursor: null
+		});
+		try {
+			rootRef.current?.setPointerCapture(event.pointerId);
+		} catch {}
+	}, [canConnect]);
+	const handleEndpointPointerDown = useCallback((edgeId, end, event) => {
+		if (event.button !== 0 || !canConnect) return;
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		event.stopPropagation();
+		if (connectRef.current?.mode === "pointer") return;
+		const edge = edges.find((e) => e.id === edgeId);
+		if (!edge) return;
+		const fixed = end === "target" ? edge.from : edge.to;
+		setConnect({
+			from: fixed,
+			mode: "pointer",
+			pointerId: event.pointerId,
+			target: null,
+			cursor: null,
+			edgeId,
+			end,
+			fixed
+		});
+		try {
+			rootRef.current?.setPointerCapture(event.pointerId);
+		} catch {}
+	}, [edges, canConnect]);
+	const handleEdgePointerDown = useCallback((id, event) => {
+		if (event.button !== 0) return;
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		event.stopPropagation();
+		cancelKeyboardConnect();
+		const current = selectionRef.current;
+		if (current?.type === "edge" && current.id === id) return;
+		setSelection({
+			type: "edge",
+			id
+		});
+	}, [setSelection, cancelKeyboardConnect]);
+	const handleNodeDoubleClick = useCallback((id, event) => {
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		onNodeOpen?.(id);
+	}, [onNodeOpen]);
+	const handleEdgeDoubleClick = useCallback((id, event) => {
+		if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+		onEdgeOpen?.(id);
+	}, [onEdgeOpen]);
+	/** Client (screen) coordinates → canvas coordinates, inverting the viewport transform. */
+	const toCanvasPoint = useCallback((clientX, clientY) => {
+		const rect = rootRef.current?.getBoundingClientRect();
+		return {
+			x: (clientX - (rect?.left ?? 0) - viewport.tx) / viewport.z,
+			y: (clientY - (rect?.top ?? 0) - viewport.ty) / viewport.z
+		};
+	}, [viewport]);
+	const handleRootBlur = (event) => {
+		onBlur?.(event);
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget.contains(next)) return;
+		cancelKeyboardConnect();
+	};
+	const handleRootFocusCapture = (event) => {
+		onFocusCapture?.(event);
+		const el = event.target;
+		const nodeId = el.getAttribute?.("data-flow-node");
+		const edgeId = el.getAttribute?.("data-flow-edge");
+		const current = selectionRef.current;
+		if (nodeId && !(current?.type === "node" && current.id === nodeId)) setSelection({
+			type: "node",
+			id: nodeId
+		});
+		else if (edgeId && !(current?.type === "edge" && current.id === edgeId)) setSelection({
+			type: "edge",
+			id: edgeId
+		});
+	};
+	const handleRootDoubleClick = (event) => {
+		onDoubleClick?.(event);
+		if (event.defaultPrevented) return;
+		if (readOnly || !isBackgroundTarget(event.target)) return;
+		onNodeCreate?.(toCanvasPoint(event.clientX, event.clientY));
+	};
+	const selectionActions = (() => {
+		if (!selection) return null;
+		const { tx, ty, z } = viewport;
+		if (selection.type === "node" && renderNodeActions) {
+			const rect = rects.get(selection.id);
+			if (!rect) return null;
+			const content = renderNodeActions(selection.id);
+			if (content == null) return null;
+			return {
+				left: rect.x * z + tx + rect.width * z,
+				top: rect.y * z + ty,
+				content
+			};
+		}
+		if (selection.type === "edge" && renderEdgeActions) {
+			const resolved = resolvedEdges.find((r) => r.edge.id === selection.id);
+			if (!resolved) return null;
+			const content = renderEdgeActions(selection.id);
+			if (content == null) return null;
+			const { midpoint } = resolved.geometry;
+			return {
+				left: midpoint.x * z + tx,
+				top: midpoint.y * z + ty,
+				content
+			};
+		}
+		return null;
+	})();
+	const selectionResolves = selection != null && (selection.type === "node" ? rects.has(selection.id) : resolvedEdges.some((r) => r.edge.id === selection.id));
+	const setRootRef = useMemo(() => mergeRefs(rootRef, ref), [ref]);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": t("flowCanvas.canvasLabel"),
+		...rest,
+		ref: setRootRef,
+		role: "application",
+		tabIndex: 0,
+		"aria-describedby": mergeAriaDescribedby(ariaDescribedby, instructionsId),
+		className: clsx(FlowCanvas_module_default.root, isPanning && FlowCanvas_module_default.rootPanning, maximized && FlowCanvas_module_default.rootMaximized, className),
+		"data-flowcanvas-maximized": maximized ? "" : void 0,
+		"data-flow-has-selection": selectionResolves ? "" : void 0,
+		onPointerDown: handleRootPointerDown,
+		onPointerMove: handleRootPointerMove,
+		onPointerUp: handleRootPointerUp,
+		onPointerCancel: handleRootPointerCancel,
+		onKeyDown: handleRootKeyDown,
+		onDoubleClick: handleRootDoubleClick,
+		onBlur: handleRootBlur,
+		onFocusCapture: handleRootFocusCapture,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: FlowCanvas_module_default.stage,
+				"data-flow-stage": "",
+				style: { transform: `translate(${viewport.tx}px, ${viewport.ty}px) scale(${viewport.z})` },
+				children: [
+					/* @__PURE__ */ jsxs("svg", {
+						className: FlowCanvas_module_default.edges,
+						style: {
+							left: svgExtent.x,
+							top: svgExtent.y
+						},
+						width: svgExtent.width,
+						height: svgExtent.height,
+						viewBox: `${svgExtent.x} ${svgExtent.y} ${svgExtent.width} ${svgExtent.height}`,
+						children: [
+							/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("marker", {
+								id: markerId,
+								viewBox: "0 0 10 10",
+								refX: "9",
+								refY: "5",
+								markerWidth: "7",
+								markerHeight: "7",
+								orient: "auto-start-reverse",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M0,0 L10,5 L0,10 z",
+									className: FlowCanvas_module_default.markerFill
+								})
+							}), /* @__PURE__ */ jsx("marker", {
+								id: markerActiveId,
+								viewBox: "0 0 10 10",
+								refX: "9",
+								refY: "5",
+								markerWidth: "7",
+								markerHeight: "7",
+								orient: "auto-start-reverse",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M0,0 L10,5 L0,10 z",
+									className: FlowCanvas_module_default.markerFillActive
+								})
+							})] }),
+							resolvedEdges.map(({ edge, geometry }) => /* @__PURE__ */ jsx(FlowEdge, {
+								edge,
+								geometry,
+								active: selection?.type === "edge" && selection.id === edge.id,
+								markerId,
+								markerActiveId,
+								ariaLabel: t("flowCanvas.edgeLabel", {
+									from: nodeById.get(edge.from)?.label || edge.from,
+									to: nodeById.get(edge.to)?.label || edge.to
+								}),
+								roleDescription: t("flowCanvas.edgeRole"),
+								registerEl: registerEdgeEl,
+								onEdgePointerDown: handleEdgePointerDown,
+								onEdgeDoubleClick: handleEdgeDoubleClick
+							}, edge.id)),
+							connect ? (() => {
+								const anchorRect = rects.get(connect.fixed ?? connect.from);
+								if (!anchorRect) return null;
+								const movingEnd = (connect.target ? rects.get(connect.target) : null) ?? {
+									x: (connect.cursor?.x ?? anchorRect.x + anchorRect.width + 40) - 1,
+									y: (connect.cursor?.y ?? anchorRect.y) - 1,
+									width: 2,
+									height: 2
+								};
+								const [a, b] = connect.end === "source" ? [movingEnd, anchorRect] : [anchorRect, movingEnd];
+								return /* @__PURE__ */ jsx("path", {
+									className: FlowCanvas_module_default.ghostEdge,
+									d: edgeGeometry(a, b).path
+								});
+							})() : null
+						]
+					}),
+					resolvedEdges.map(({ edge, geometry }) => edge.label != null ? /* @__PURE__ */ jsx("div", {
+						className: FlowCanvas_module_default.chip,
+						"data-flow-chip": edge.id,
+						style: {
+							left: geometry.midpoint.x,
+							top: geometry.midpoint.y
+						},
+						onPointerDown: (event) => {
+							if (event.button !== 0) return;
+							if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target)) return;
+							event.stopPropagation();
+							cancelKeyboardConnect();
+							if (selection?.type === "edge" && selection.id === edge.id) return;
+							setSelection({
+								type: "edge",
+								id: edge.id
+							});
+						},
+						onDoubleClick: (event) => {
+							event.stopPropagation();
+							handleEdgeDoubleClick(edge.id, event);
+						},
+						children: edge.label
+					}, `chip-${edge.id}`) : null),
+					nodes.map((node) => /* @__PURE__ */ jsx(FlowNode, {
+						node,
+						position: positionOf(node),
+						selected: selection?.type === "node" && selection.id === node.id,
+						dragging: liveDrag?.id === node.id,
+						connectTarget: connect?.target === node.id,
+						canConnect,
+						roleDescription: t("flowCanvas.nodeRole"),
+						registerEl: registerNodeEl,
+						onNodePointerDown: handleNodePointerDown,
+						onNodeDoubleClick: handleNodeDoubleClick,
+						onHandlePointerDown: handleHandlePointerDown
+					}, node.id))
+				]
+			}),
+			canConnect && selection?.type === "edge" ? (() => {
+				const resolved = resolvedEdges.find((r) => r.edge.id === selection.id);
+				if (!resolved) return null;
+				const { z, tx, ty } = viewport;
+				return ["source", "target"].map((end) => {
+					const p = resolved.geometry[end];
+					return /* @__PURE__ */ jsx("div", {
+						className: FlowCanvas_module_default.endpointHandle,
+						"data-flow-edge-endpoint": end,
+						"data-flow-edge-endpoint-hit": end,
+						"aria-hidden": "true",
+						style: {
+							left: p.x * z + tx,
+							top: p.y * z + ty
+						},
+						onPointerDown: (event) => handleEndpointPointerDown(selection.id, end, event),
+						children: /* @__PURE__ */ jsx("span", { className: FlowCanvas_module_default.endpointDot })
+					}, end);
+				});
+			})() : null,
+			/* @__PURE__ */ jsx(FlowControls, {
+				onZoomIn: zoomIn,
+				onZoomOut: zoomOut,
+				onFit: () => fitTo(contentBounds)
+			}),
+			controls != null ? /* @__PURE__ */ jsx("div", {
+				className: FlowCanvas_module_default.controlsTopLeft,
+				"data-flow-controls": "",
+				role: "toolbar",
+				"aria-label": t("flowCanvas.controlsLabel"),
+				children: controls
+			}) : null,
+			maximizeControl ? /* @__PURE__ */ jsx("div", {
+				className: FlowCanvas_module_default.controlsTopRight,
+				"data-flow-controls": "",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					iconOnly: true,
+					"aria-label": t(maximized ? "flowCanvas.exitFullscreen" : "flowCanvas.enterFullscreen"),
+					"aria-pressed": maximized,
+					onClick: () => setMaximizedAnnounced(!maximized),
+					children: maximized ? /* @__PURE__ */ jsx(Minimize2, {
+						size: 16,
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(Maximize2, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				})
+			}) : null,
+			selectionActions ? /* @__PURE__ */ jsx("div", {
+				className: FlowCanvas_module_default.selectionActions,
+				"data-flow-controls": "",
+				"data-flow-selection-edge": selection?.type === "edge" ? "" : void 0,
+				style: {
+					left: selectionActions.left,
+					top: selectionActions.top
+				},
+				children: selectionActions.content
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				id: instructionsId,
+				className: FlowCanvas_module_default.srOnly,
+				children: t(readOnly ? "flowCanvas.instructionsReadOnly" : "flowCanvas.instructions")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: FlowCanvas_module_default.srOnly,
+				children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.nonce)
+			})
+		]
+	});
+});
+FlowCanvas.displayName = "FlowCanvas";
+export { FlowCanvas };