@signalflare-ai/ui 0.5.0

package/dist/flow-BRsYUCJa.js

@@ -0,0 +1,741 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue, useTransform } from "motion/react";
+//#region src/components/flow/connectors.tsx
+/**
+* Maximum vertical/horizontal distance between anchor points where the line
+* would render as straight. Below this number, the line will be drawn as a
+* straight line.
+*/
+var FLAT_THRESHOLD = 2;
+function createRoundedPath({ x1, y1, x2, y2 }, { cornerRadius: maxCornerRadius = 8, midOffset = 32, arrowheadOffset = 8, isBottom = false, single = false, orientation = "vertical" } = {}) {
+	/**
+	* Cap the corner radius to half the vertical/horizontal distance between the
+	* anchor points so the line still looks smooth even in small gaps.
+	*/
+	const cornerRadius = Math.min(maxCornerRadius, Math.abs(orientation === "horizontal" ? (y2 - y1) / 2 : (x2 - x1) / 2));
+	if (orientation === "horizontal") {
+		if (Math.abs(y2 - y1) <= FLAT_THRESHOLD) return `M ${x1} ${y1} L ${x2 - arrowheadOffset} ${y2}`;
+		const verticalX = x2 - midOffset;
+		const horizontalSign = x2 > x1 ? 1 : -1;
+		const verticalSign = y2 > y1 ? 1 : -1;
+		const firstHorizontalEnd = verticalX - horizontalSign * cornerRadius;
+		const verticalStart = y1 + verticalSign * cornerRadius;
+		const verticalEnd = y2 - verticalSign * cornerRadius;
+		const secondHorizontalStart = verticalX + horizontalSign * cornerRadius;
+		const pathEndX = x2 - horizontalSign * arrowheadOffset;
+		const bottomCurveCommands = [
+			`L ${firstHorizontalEnd} ${y1}`,
+			`Q ${verticalX} ${y1} ${verticalX} ${verticalStart}`,
+			`L ${verticalX} ${y2}`
+		];
+		const topCurveCommands = [
+			single ? `L ${firstHorizontalEnd} ${y1} Q ${verticalX} ${y1} ${verticalX} ${verticalStart}` : `L ${verticalX} ${y1}`,
+			`L ${verticalX} ${verticalEnd}`,
+			`Q ${verticalX} ${y2} ${secondHorizontalStart} ${y2}`
+		];
+		return [
+			`M ${x1} ${y1}`,
+			isBottom ? [...bottomCurveCommands] : [...topCurveCommands],
+			`L ${pathEndX} ${y2}`
+		].join(" ");
+	}
+	if (Math.abs(x2 - x1) <= FLAT_THRESHOLD) return `M ${x1} ${y1} L ${x2} ${y2 - arrowheadOffset}`;
+	const horizontalY = y2 - midOffset;
+	const horizontalSign = x2 > x1 ? 1 : -1;
+	const verticalSign = y2 > y1 ? 1 : -1;
+	const firstVerticalEnd = horizontalY - cornerRadius;
+	const horizontalStart = x1 + horizontalSign * cornerRadius;
+	const horizontalEnd = x2 - horizontalSign * cornerRadius;
+	const secondVerticalStart = horizontalY + cornerRadius;
+	const pathEndY = y2 - verticalSign * arrowheadOffset;
+	const bottomCurveCommands = [
+		`L ${x1} ${firstVerticalEnd}`,
+		`Q ${x1} ${horizontalY} ${horizontalStart} ${horizontalY}`,
+		`L ${x2} ${horizontalY}`
+	];
+	const topCurveCommands = [
+		`L ${x1} ${horizontalY}`,
+		`L ${horizontalEnd} ${horizontalY}`,
+		`Q ${x2} ${horizontalY} ${x2} ${secondVerticalStart}`
+	];
+	return [
+		`M ${x1} ${y1}`,
+		isBottom ? [...bottomCurveCommands] : [...topCurveCommands],
+		`L ${x2} ${pathEndY}`
+	].join(" ");
+}
+var Connectors = forwardRef(function Connectors({ connectors, children, ...pathProps }, svgRef) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "100%",
+		height: "100%",
+		"aria-hidden": "true",
+		className: "text-sf-inactive overflow-visible",
+		ref: svgRef,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+				id,
+				markerWidth: "8",
+				markerHeight: "8",
+				refX: "0",
+				refY: "4",
+				orient: "auto",
+				markerUnits: "userSpaceOnUse",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z",
+					fill: "currentColor",
+					stroke: "none"
+				})
+			}) }),
+			connectors.map((connector, index) => {
+				return /* @__PURE__ */ jsx("path", {
+					d: createRoundedPath(connector, {
+						isBottom: connector.isBottom,
+						...pathProps
+					}),
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					markerEnd: `url(#${id})`,
+					"data-index": index
+				}, index);
+			}),
+			children
+		]
+	});
+});
+//#endregion
+//#region src/components/flow/use-children.tsx
+var DescendantsContext = createContext(null);
+/**
+* Hook that manages descendant registration and provides access to all registered descendants.
+* This hook contains all the logic for tracking and managing descendants.
+*
+* @returns The descendants context value with register function and descendants array
+*/
+function useDescendants() {
+	const [registeredDescendants, setRegisteredDescendants] = useState([]);
+	const descendantsRef = useRef(/* @__PURE__ */ new Map());
+	const renderOrderCounterRef = useRef(0);
+	const renderOrderMapRef = useRef(/* @__PURE__ */ new Map());
+	renderOrderCounterRef.current = 0;
+	renderOrderMapRef.current.clear();
+	const claimRenderOrder = useCallback((id) => {
+		if (!renderOrderMapRef.current.has(id)) renderOrderMapRef.current.set(id, renderOrderCounterRef.current++);
+		return renderOrderMapRef.current.get(id);
+	}, []);
+	const register = useCallback((id, renderOrder, props = {}) => {
+		const descendantInfo = {
+			id,
+			props,
+			renderOrder
+		};
+		descendantsRef.current.set(id, descendantInfo);
+		setRegisteredDescendants(Array.from(descendantsRef.current.values()).sort((a, b) => a.renderOrder - b.renderOrder));
+		const unregister = () => {
+			descendantsRef.current.delete(id);
+			setRegisteredDescendants(Array.from(descendantsRef.current.values()).sort((a, b) => a.renderOrder - b.renderOrder));
+		};
+		return { unregister };
+	}, []);
+	return useMemo(() => ({
+		register,
+		descendants: registeredDescendants,
+		claimRenderOrder
+	}), [
+		register,
+		registeredDescendants,
+		claimRenderOrder
+	]);
+}
+function DescendantsProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(DescendantsContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Hook to access the descendants context from within a DescendantsProvider.
+* This allows callers to access the descendants data and register function.
+*
+* @returns The descendants context value
+* @throws Error if used outside of DescendantsProvider
+*/
+function useDescendantsContext() {
+	const context = useContext(DescendantsContext);
+	if (!context) throw new Error("useDescendantsContext must be used within DescendantsProvider");
+	return context;
+}
+/**
+* Hook that allows a descendant component to register itself with a parent
+* and returns the index of the descendant in the parent's list.
+*
+* @example
+* ```tsx
+* function Parent() {
+*   return (
+*     <DescendantsProvider>
+*       <Descendant />
+*       <Descendant />
+*       <Descendant />
+*     </DescendantsProvider>
+*   );
+* }
+*
+* function Descendant() {
+*   const index = useDescendantIndex();
+*   return <div>I am descendant {index}</div>;
+* }
+*
+* // With props
+* function Descendant() {
+*   const index = useDescendantIndex({ name: "Descendant 1", type: "primary" });
+*   return <div>I am descendant {index}</div>;
+* }
+* ```
+*/
+function useDescendantIndex(props) {
+	const context = useDescendantsContext();
+	const id = useId();
+	const renderOrder = context.claimRenderOrder(id);
+	const unregisterRef = useRef(null);
+	const registerRef = useRef(context.register);
+	registerRef.current = context.register;
+	useEffect(() => {
+		const { unregister } = registerRef.current(id, renderOrder, props);
+		if (!unregisterRef.current) unregisterRef.current = unregister;
+		return () => {
+			if (unregisterRef.current) {
+				unregisterRef.current();
+				unregisterRef.current = null;
+			}
+		};
+	}, [
+		id,
+		renderOrder,
+		props
+	]);
+	const index = useMemo(() => {
+		return context.descendants.findIndex((descendant) => descendant.id === id);
+	}, [context.descendants, id]);
+	return {
+		index,
+		id,
+		getPrevious: useCallback(() => {
+			if (index <= 0) return void 0;
+			return context.descendants[index - 1];
+		}, [context.descendants, index]),
+		getNext: useCallback(() => {
+			if (index < 0 || index >= context.descendants.length - 1) return void 0;
+			return context.descendants[index + 1];
+		}, [context.descendants, index])
+	};
+}
+//#endregion
+//#region src/components/flow/diagram.tsx
+var PAN_SPACING = {
+	y: 64,
+	x: 16
+};
+/** Minimum scrollbar thumb size in percentage to ensure visibility */
+var MIN_SCROLLBAR_THUMB_SIZE = 10;
+var DiagramContext = createContext(null);
+function useDiagramContext() {
+	const context = useContext(DiagramContext);
+	if (context === null) throw new Error("useDiagramContext must be used within a FlowDiagram");
+	return context;
+}
+function FlowDiagram({ orientation = "horizontal", align = "start", className, children }) {
+	const wrapperRef = useRef(null);
+	const contentRef = useRef(null);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const [bounds, setBounds] = useState(null);
+	const [dimensions, setDimensions] = useState(null);
+	const [isPanning, setIsPanning] = useState(false);
+	const [canPan, setCanPan] = useState(false);
+	useEffect(() => {
+		if (!wrapperRef.current || !contentRef.current) return;
+		const measureBounds = () => {
+			if (!wrapperRef.current || !contentRef.current) return;
+			const wrapper = wrapperRef.current.getBoundingClientRect();
+			const content = contentRef.current.getBoundingClientRect();
+			const availableWidth = wrapper.width - PAN_SPACING.x * 2;
+			const availableHeight = wrapper.height - PAN_SPACING.y * 2;
+			setBounds({
+				x: Math.min(0, availableWidth - content.width),
+				y: Math.min(0, availableHeight - content.height)
+			});
+			setDimensions({
+				viewportWidth: availableWidth,
+				viewportHeight: availableHeight,
+				contentWidth: content.width,
+				contentHeight: content.height
+			});
+			setCanPan(content.width > availableWidth || content.height > availableHeight);
+		};
+		measureBounds();
+		const resizeObserver = new ResizeObserver(measureBounds);
+		resizeObserver.observe(wrapperRef.current);
+		resizeObserver.observe(contentRef.current);
+		return () => resizeObserver.disconnect();
+	}, []);
+	useEffect(() => {
+		if (!bounds) return;
+		/**
+		* It's possible for the content to resize after the user panned. If we're
+		* at the edge of the pan and the content gets smaller, then we've "panned
+		* too far". In this case, we transition the pan back to the new bounds.
+		*/
+		if (x.get() < bounds.x) x.set(bounds.x);
+		if (y.get() < bounds.y) y.set(bounds.y);
+	}, [
+		bounds,
+		x,
+		y
+	]);
+	useEffect(() => {
+		return () => {
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+		};
+	}, []);
+	useEffect(() => {
+		const wrapper = wrapperRef.current;
+		if (!wrapper) return;
+		const handleWheel = (e) => {
+			if (!bounds) return;
+			const canScrollX = bounds.x < 0;
+			const canScrollY = bounds.y < 0;
+			if (!canScrollX && !canScrollY) return;
+			e.preventDefault();
+			if (canScrollY) {
+				const newY = Math.max(bounds.y, Math.min(0, y.get() - e.deltaY));
+				y.set(newY);
+			}
+			if (canScrollX) {
+				const newX = Math.max(bounds.x, Math.min(0, x.get() - e.deltaX));
+				x.set(newX);
+			}
+		};
+		wrapper.addEventListener("wheel", handleWheel, { passive: false });
+		return () => wrapper.removeEventListener("wheel", handleWheel);
+	}, [
+		bounds,
+		x,
+		y
+	]);
+	const handlePan = (_, info) => {
+		if (!bounds) return;
+		x.set(Math.max(bounds.x, Math.min(0, x.get() + info.delta.x)));
+		y.set(Math.max(bounds.y, Math.min(0, y.get() + info.delta.y)));
+	};
+	const canScrollX = bounds && bounds.x < 0;
+	const canScrollY = bounds && bounds.y < 0;
+	const scrollThumbWidth = dimensions && dimensions.contentWidth > 0 && dimensions.viewportWidth > 0 ? Math.max(MIN_SCROLLBAR_THUMB_SIZE, dimensions.viewportWidth / dimensions.contentWidth * 100) : 0;
+	const scrollThumbHeight = dimensions && dimensions.contentHeight > 0 && dimensions.viewportHeight > 0 ? Math.max(MIN_SCROLLBAR_THUMB_SIZE, dimensions.viewportHeight / dimensions.contentHeight * 100) : 0;
+	const scrollbarXPercent = useTransform(x, [0, bounds?.x ?? 0], [0, 100 - scrollThumbWidth]);
+	const scrollTop = useMotionTemplate`${useTransform(y, [0, bounds?.y ?? 0], [0, 100 - scrollThumbHeight])}%`;
+	const scrollLeft = useMotionTemplate`${scrollbarXPercent}%`;
+	const contextValue = useMemo(() => ({
+		orientation,
+		align,
+		x,
+		y,
+		wrapperRef
+	}), [
+		orientation,
+		align,
+		x,
+		y
+	]);
+	return /* @__PURE__ */ jsx(DiagramContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			ref: wrapperRef,
+			className: cn("relative overflow-hidden py-16 px-4 grow isolate group", className),
+			style: { cursor: canPan && !isPanning ? "grab" : void 0 },
+			onPanStart: () => {
+				setIsPanning(true);
+				document.body.style.cursor = "grabbing";
+				document.body.style.userSelect = "none";
+			},
+			onPan: handlePan,
+			onPanEnd: () => {
+				setIsPanning(false);
+				document.body.style.cursor = "";
+				document.body.style.userSelect = "";
+			},
+			children: [
+				/* @__PURE__ */ jsx(motion.div, {
+					ref: contentRef,
+					className: "w-max mx-auto",
+					style: {
+						x,
+						y
+					},
+					children: /* @__PURE__ */ jsx(FlowNodeList, { children })
+				}),
+				canScrollY && /* @__PURE__ */ jsx("div", {
+					className: "absolute right-1 top-4 bottom-4 w-1.5 rounded-full bg-sf-line/50 opacity-0 group-hover:opacity-100",
+					children: /* @__PURE__ */ jsx(motion.div, {
+						className: "absolute w-full rounded-full bg-sf-fill",
+						style: {
+							height: `${scrollThumbHeight}%`,
+							top: scrollTop
+						}
+					})
+				}),
+				canScrollX && /* @__PURE__ */ jsx("div", {
+					className: "absolute bottom-1 left-4 right-4 h-1.5 rounded-full bg-sf-line/50 opacity-0 group-hover:opacity-100",
+					children: /* @__PURE__ */ jsx(motion.div, {
+						className: "absolute h-full rounded-full bg-sf-fill",
+						style: {
+							width: `${scrollThumbWidth}%`,
+							left: scrollLeft
+						}
+					})
+				})
+			]
+		})
+	});
+}
+var useNodeGroup = () => useDescendants();
+var useNode = (props) => useDescendantIndex(props);
+var getNodeRect = (node, { type = "start" }) => {
+	if (!node) return null;
+	return node.props[type] ?? null;
+};
+function FlowNodeList({ children }) {
+	const { orientation, align } = useDiagramContext();
+	const descendants = useNodeGroup();
+	const containerRef = useRef(null);
+	const connectors = useMemo(() => {
+		const edges = [];
+		const nodes = descendants.descendants;
+		const containerRect = containerRef.current?.getBoundingClientRect();
+		const offsetX = containerRect?.left ?? 0;
+		const offsetY = containerRect?.top ?? 0;
+		for (let i = 0; i < nodes.length - 1; i++) {
+			const currentRect = getNodeRect(nodes[i], { type: "start" });
+			const nextRect = getNodeRect(nodes[i + 1], { type: "end" });
+			if (currentRect && nextRect) edges.push({
+				x1: currentRect.left - offsetX + currentRect.width,
+				y1: currentRect.top - offsetY + currentRect.height / 2,
+				x2: nextRect.left - offsetX,
+				y2: nextRect.top - offsetY + nextRect.height / 2
+			});
+		}
+		return edges;
+	}, [descendants.descendants]);
+	return /* @__PURE__ */ jsx(DescendantsProvider, {
+		value: descendants,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			ref: containerRef,
+			children: [/* @__PURE__ */ jsx("ul", {
+				className: cn("ml-0 list-none", orientation === "vertical" ? "grid auto-rows-min gap-16" : "flex gap-16", orientation === "horizontal" && (align === "center" ? "items-center" : "items-start")),
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 pointer-events-none",
+				children: /* @__PURE__ */ jsx(Connectors, {
+					connectors,
+					orientation,
+					single: true
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/flow/node.tsx
+function mergeRefs(...refs) {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") ref(value);
+			else if (ref != null) ref.current = value;
+		});
+	};
+}
+var FlowNode = forwardRef(function FlowNode({ render, children }, ref) {
+	const nodeRef = useRef(null);
+	const startAnchorRef = useRef(null);
+	const endAnchorRef = useRef(null);
+	const [measurements, setMeasurements] = useState({
+		start: null,
+		end: null
+	});
+	const { index, id } = useNode(useMemo(() => ({
+		parallel: false,
+		...measurements
+	}), [measurements]));
+	/**
+	* This effect intentionally has no dependencies because we want it to run on
+	* every render to ensure measurements are always up to date.
+	*/
+	useEffect(() => {
+		if (!nodeRef.current) return;
+		const nodeRect = nodeRef.current.getBoundingClientRect();
+		let startRect = nodeRect;
+		let endRect = nodeRect;
+		if (startAnchorRef.current) startRect = startAnchorRef.current.getBoundingClientRect();
+		if (endAnchorRef.current) endRect = endAnchorRef.current.getBoundingClientRect();
+		setMeasurements((m) => {
+			const newVal = {
+				start: startRect,
+				end: endRect
+			};
+			if (JSON.stringify(m) === JSON.stringify(newVal)) return m;
+			return newVal;
+		});
+	});
+	const mergedRef = mergeRefs(ref, nodeRef);
+	let element;
+	if (render && isValidElement(render)) {
+		const renderProps = render.props;
+		element = cloneElement(render, {
+			ref: mergedRef,
+			"data-node-index": index,
+			"data-node-id": id,
+			children: renderProps.children ?? children
+		});
+	} else element = /* @__PURE__ */ jsx("li", {
+		ref: mergedRef,
+		className: "py-2 px-3 rounded-md shadow bg-sf-base ring ring-sf-line",
+		"data-node-index": index,
+		"data-node-id": id,
+		children
+	});
+	return /* @__PURE__ */ jsx(FlowNodeAnchorContext.Provider, {
+		value: useMemo(() => ({
+			registerStartAnchor: (anchorRef) => {
+				startAnchorRef.current = anchorRef;
+			},
+			registerEndAnchor: (anchorRef) => {
+				endAnchorRef.current = anchorRef;
+			}
+		}), []),
+		children: element
+	});
+});
+FlowNode.displayName = "Flow.Node";
+var FlowNodeAnchorContext = createContext(null);
+var FlowAnchor = forwardRef(function FlowAnchor({ type, render, children }, ref) {
+	const context = useContext(FlowNodeAnchorContext);
+	const anchorRef = useRef(null);
+	if (!context) throw new Error("Flow.Anchor must be used within Flow.Node");
+	useEffect(() => {
+		if (!anchorRef.current) return;
+		if (type === "start" || type === void 0) context.registerStartAnchor(anchorRef.current);
+		if (type === "end" || type === void 0) context.registerEndAnchor(anchorRef.current);
+		return () => {
+			if (type === "start" || type === void 0) context.registerStartAnchor(null);
+			if (type === "end" || type === void 0) context.registerEndAnchor(null);
+		};
+	}, [
+		type,
+		context.registerStartAnchor,
+		context.registerEndAnchor
+	]);
+	const mergedRef = mergeRefs(ref, anchorRef);
+	if (render && isValidElement(render)) {
+		const renderProps = render.props;
+		return cloneElement(render, {
+			ref: mergedRef,
+			children: renderProps.children ?? children
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergedRef,
+		children
+	});
+});
+FlowAnchor.displayName = "Flow.Anchor";
+//#endregion
+//#region src/components/flow/parallel.tsx
+function getStartAndEndPoints({ container, previous, next, orientation }) {
+	if (orientation === "vertical") return {
+		start: {
+			x: container.width / 2,
+			y: 0
+		},
+		end: {
+			x: container.width / 2,
+			y: container.height
+		}
+	};
+	let start = {
+		x: 0,
+		y: container.height / 2
+	};
+	let end = {
+		x: container.width,
+		y: container.height / 2
+	};
+	if (previous) start.y = previous.top - container.top + previous.height / 2;
+	if (next) end.y = next.top - container.top + next.height / 2;
+	return {
+		start,
+		end
+	};
+}
+function FlowParallelNode({ children }) {
+	const { orientation } = useDiagramContext();
+	const descendants = useNodeGroup();
+	const containerRef = useRef(null);
+	const { index, getPrevious, getNext } = useNode(useMemo(() => ({ parallel: true }), []));
+	const measure = () => {
+		const container = containerRef.current;
+		if (!container) return;
+		const containerRect = container.getBoundingClientRect();
+		const [prevNode, nextNode] = [getPrevious(), getNext()];
+		const previousNodeRect = getNodeRect(prevNode, { type: "start" });
+		const nextNodeRect = getNodeRect(nextNode, { type: "end" });
+		const { start, end } = getStartAndEndPoints({
+			container: containerRect,
+			previous: previousNodeRect,
+			next: nextNodeRect,
+			orientation
+		});
+		return {
+			connectors: descendants.descendants.flatMap(({ props }) => {
+				const connectors = [];
+				const [endAnchorRect, startAnchorRect] = [props.end, props.start];
+				if (endAnchorRect) {
+					let branchStart;
+					switch (orientation) {
+						case "vertical":
+							branchStart = {
+								x: endAnchorRect.left - containerRect.left + endAnchorRect.width / 2,
+								y: endAnchorRect.top - containerRect.top
+							};
+							break;
+						case "horizontal": {
+							const anchorCenter = endAnchorRect.top - containerRect.top + endAnchorRect.height / 2;
+							branchStart = {
+								x: endAnchorRect.left - containerRect.left,
+								y: anchorCenter
+							};
+							break;
+						}
+						default: throw new Error(`Unknown orientation: ${orientation}`);
+					}
+					connectors.push({
+						x1: start.x,
+						y1: start.y,
+						x2: branchStart.x,
+						y2: branchStart.y,
+						isBottom: false
+					});
+				}
+				if (nextNodeRect && startAnchorRect) {
+					let branchEnd;
+					switch (orientation) {
+						case "vertical":
+							branchEnd = {
+								x: startAnchorRect.left - containerRect.left + startAnchorRect.width / 2,
+								y: startAnchorRect.bottom - containerRect.top
+							};
+							break;
+						case "horizontal": {
+							const anchorCenter = startAnchorRect.top - containerRect.top + startAnchorRect.height / 2;
+							branchEnd = {
+								x: startAnchorRect.right - containerRect.left,
+								y: anchorCenter
+							};
+							break;
+						}
+						default: throw new Error(`Unknown orientation: ${orientation}`);
+					}
+					connectors.push({
+						x1: branchEnd.x,
+						y1: branchEnd.y,
+						x2: end.x,
+						y2: end.y,
+						isBottom: true
+					});
+				}
+				return connectors;
+			}),
+			junctions: {
+				start: {
+					x: orientation === "vertical" ? start.x : start.x + 32,
+					y: orientation === "vertical" ? start.y + 32 : start.y
+				},
+				end: nextNodeRect ? {
+					x: orientation === "vertical" ? end.x : end.x - 32,
+					y: orientation === "vertical" ? end.y - 32 : end.y
+				} : void 0
+			},
+			containerRect
+		};
+	};
+	const links = measure();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cn("relative", orientation === "horizontal" ? "px-16 -mx-16" : "py-16 -my-16"),
+		"data-node-index": index,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 pointer-events-none z-10",
+			children: links && /* @__PURE__ */ jsxs(Connectors, {
+				connectors: links.connectors,
+				orientation,
+				children: [links.junctions?.start && /* @__PURE__ */ jsx("g", {
+					transform: `translate(${links.junctions.start.x} ${links.junctions.start.y})`,
+					children: /* @__PURE__ */ jsx(JunctionBox, {})
+				}), links.junctions?.end && /* @__PURE__ */ jsx("g", {
+					transform: `translate(${links.junctions.end.x} ${links.junctions.end.y})`,
+					children: /* @__PURE__ */ jsx(JunctionBox, {})
+				})]
+			})
+		}), /* @__PURE__ */ jsx("ul", {
+			className: cn("gap-5 list-none flex items-start", orientation === "horizontal" ? "flex-col ml-0" : "gap-5 w-fit mx-auto"),
+			children: /* @__PURE__ */ jsx(DescendantsProvider, {
+				value: descendants,
+				children
+			})
+		})]
+	});
+}
+function JunctionBox({ size = 6 }) {
+	const halfSize = size / 2;
+	return /* @__PURE__ */ jsx("rect", {
+		x: -halfSize,
+		y: -halfSize,
+		width: size,
+		height: size,
+		fill: "currentColor",
+		rx: "1"
+	});
+}
+//#endregion
+//#region src/components/flow/index.ts
+/**
+* Flow - Components for visualizing workflows and data flows.
+*
+* @example
+* ```tsx
+* <Flow>
+*   <Flow.Node>Step 1</Flow.Node>
+*   <Flow.Node>Step 2</Flow.Node>
+*   <Flow.Parallel>
+*     <Flow.Node>Branch A</Flow.Node>
+*     <Flow.Node>Branch B</Flow.Node>
+*   </Flow.Parallel>
+*   <Flow.Node>Step 3</Flow.Node>
+* </Flow>
+* ```
+*/
+var Flow = Object.assign(FlowDiagram, {
+	Node: FlowNode,
+	Parallel: FlowParallelNode,
+	List: FlowNodeList,
+	Anchor: FlowAnchor
+});
+//#endregion
+export { Flow as t };
+
+//# sourceMappingURL=flow-BRsYUCJa.js.map