panelui-web 0.0.0-stage → 0.1.0

package/dist/components/flow/index.js

@@ -0,0 +1,597 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Flow — a canvas of nodes joined by edges, that you pan, zoom and rearrange.
+ *
+ * ```tsx
+ * <Flow>
+ *   <Flow.Background variant="dots" />
+ *   <Flow.Node id="source" position={{ x: 24, y: 40 }}>…</Flow.Node>
+ *   <Flow.Node id="build" position={{ x: 24, y: 200 }}>…</Flow.Node>
+ *   <Flow.Edge from="source" to="build" dashed animated arrow />
+ *   <Flow.Controls />
+ * </Flow>
+ * ```
+ *
+ * ## The same parts as the app
+ *
+ * The parts and their props are the app library's Flow, so a graph written
+ * for one reads the same in the other. What differs is the hand: here the
+ * pane is dragged with a mouse, zoomed with a pinch or with Control and the
+ * wheel, and every node can be reached and moved from the keyboard.
+ *
+ * ## Where the positions live
+ *
+ * A node's `position` is where it starts. From then on the canvas holds it:
+ * a drag moves it there, and `onNodeDragEnd` says where it came to rest. Pass
+ * a new `position` and the node goes to it, which is how nodes are driven
+ * from outside.
+ *
+ * Edges are drawn from the boxes of the nodes they join, measured off the
+ * page. An edge therefore follows a node whatever is inside it, and redraws
+ * as either end is dragged.
+ *
+ * ## Three gestures, one canvas
+ *
+ * The pane pans, a node drags, and a handle draws a new connection. Each is
+ * taken by the innermost thing under the pointer, which is what a hand
+ * expects.
+ */
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { tv } from 'tailwind-variants';
+import { anchorOf, arrivalDirection, arrowHeadPath, autoSides, bezierPath, edgePath, } from './flow-paths.js';
+const flowVariants = tv({
+    slots: {
+        root: 'relative h-96 w-full cursor-grab touch-none select-none overflow-hidden rounded-2xl border bg-background text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
+        underlay: 'pointer-events-none absolute inset-0 text-muted-foreground/35',
+        layer: 'absolute left-0 top-0 origin-top-left will-change-transform',
+        overlay: 'pointer-events-none absolute inset-0 *:pointer-events-auto',
+        node: 'absolute left-0 top-0 z-10 cursor-grab rounded-2xl border bg-card text-card-foreground shadow-sm outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
+        group: 'absolute left-0 top-0 cursor-grab rounded-3xl border border-dashed bg-muted/40 p-3 pt-8 outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
+        groupLabel: 'absolute start-4 top-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground',
+        handle: 'absolute z-20 size-3 -translate-x-1/2 -translate-y-1/2 cursor-crosshair rounded-full border-2 border-background bg-muted-foreground outline-none transition-[scale,background-color] hover:scale-150 hover:bg-foreground focus-visible:ring-2 focus-visible:ring-ring',
+        edge: 'pointer-events-none absolute left-0 top-0 size-px overflow-visible text-[var(--pu-color)]',
+        controls: 'absolute flex flex-col divide-y divide-border overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',
+        control: 'flex size-9 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground active:bg-muted [&_svg]:size-4',
+        minimap: 'absolute overflow-hidden rounded-xl border bg-card/90 shadow-sm backdrop-blur-sm',
+    },
+    variants: {
+        color: {
+            primary: { edge: '[--pu-color:var(--primary)]' },
+            info: { edge: '[--pu-color:var(--info)]' },
+            success: { edge: '[--pu-color:var(--success)]' },
+            warning: { edge: '[--pu-color:var(--warning)]' },
+            destructive: { edge: '[--pu-color:var(--destructive)]' },
+            // The colour of a hairline that is meant to be seen but not looked at.
+            muted: { edge: '[--pu-color:var(--muted-foreground)]' },
+        },
+        selected: { true: { node: 'z-20 ring-2 ring-ring' } },
+        position: {
+            'top-left': { controls: 'left-3 top-3', minimap: 'left-3 top-3' },
+            'top-right': { controls: 'right-3 top-3', minimap: 'right-3 top-3' },
+            'bottom-left': { controls: 'bottom-3 left-3', minimap: 'bottom-3 left-3' },
+            'bottom-right': { controls: 'bottom-3 right-3', minimap: 'bottom-3 right-3' },
+        },
+    },
+});
+const FlowContext = createContext(null);
+const NodeContext = createContext(null);
+function useFlow(part) {
+    const flow = useContext(FlowContext);
+    if (!flow)
+        throw new Error(`${part} must be used inside a <Flow>.`);
+    return flow;
+}
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, maxZoom = 2.5, panOnDrag = true, zoomOnPinch = true, fitViewOnMount = false, fitViewPadding = 48, onViewportChange, onNodeDragEnd, onConnect, isValidConnection, label = 'Diagram', className, children, onKeyDown, ...props }) {
+    const slots = flowVariants();
+    const root = useRef(null);
+    const [viewport, setViewportState] = useState(defaultViewport);
+    const [rects, setRects] = useState({});
+    const [handles, setHandles] = useState({});
+    const [locked, setLocked] = useState(false);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const [underlay, setUnderlay] = useState(null);
+    const [overlay, setOverlay] = useState(null);
+    /** A connection being drawn: where it leaves from and where the pointer is. */
+    const [wire, setWire] = useState(null);
+    const live = useRef({ viewport, rects, size, locked });
+    live.current = { viewport, rects, size, locked };
+    const callbacks = useRef({ onViewportChange, onConnect, isValidConnection });
+    callbacks.current = { onViewportChange, onConnect, isValidConnection };
+    const setViewport = useCallback((next) => {
+        setViewportState(next);
+        callbacks.current.onViewportChange?.(next);
+    }, []);
+    /** A point on the page, as a point on the graph. */
+    const toGraph = useCallback((clientX, clientY) => {
+        const box = root.current?.getBoundingClientRect();
+        const { x, y, zoom } = live.current.viewport;
+        return { x: (clientX - (box?.left ?? 0) - x) / zoom, y: (clientY - (box?.top ?? 0) - y) / zoom };
+    }, []);
+    /** Zooms about a point on the canvas, so that point stays where it is. */
+    const zoomAbout = useCallback((factor, px, py) => {
+        const { x, y, zoom } = live.current.viewport;
+        const next = clamp(zoom * factor, minZoom, maxZoom);
+        const ratio = next / zoom;
+        setViewport({ x: px - (px - x) * ratio, y: py - (py - y) * ratio, zoom: next });
+    }, [minZoom, maxZoom, setViewport]);
+    const zoomBy = useCallback((factor) => {
+        const { width, height } = live.current.size;
+        zoomAbout(factor, width / 2, height / 2);
+    }, [zoomAbout]);
+    const fit = useCallback(() => {
+        const boxes = Object.values(live.current.rects).filter((box) => box.width > 0);
+        const { width, height } = live.current.size;
+        if (boxes.length === 0 || width === 0)
+            return;
+        const left = Math.min(...boxes.map((box) => box.x));
+        const top = Math.min(...boxes.map((box) => box.y));
+        const right = Math.max(...boxes.map((box) => box.x + box.width));
+        const bottom = Math.max(...boxes.map((box) => box.y + box.height));
+        const zoom = clamp(Math.min((width - fitViewPadding * 2) / Math.max(1, right - left), (height - fitViewPadding * 2) / Math.max(1, bottom - top), 1), minZoom, maxZoom);
+        setViewport({
+            x: (width - (right - left) * zoom) / 2 - left * zoom,
+            y: (height - (bottom - top) * zoom) / 2 - top * zoom,
+            zoom,
+        });
+    }, [fitViewPadding, minZoom, maxZoom, setViewport]);
+    // The canvas's own size, for fitting and for the minimap.
+    useLayoutEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(() => {
+            setSize({ width: node.clientWidth, height: node.clientHeight });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    // Fitted once, when every node has been measured and the canvas has a size.
+    const fitted = useRef(false);
+    useEffect(() => {
+        if (!fitViewOnMount || fitted.current || size.width === 0)
+            return;
+        const boxes = Object.values(rects);
+        if (boxes.length === 0 || boxes.some((box) => box.width === 0))
+            return;
+        fitted.current = true;
+        fit();
+    }, [fitViewOnMount, rects, size, fit]);
+    // Control with the wheel, which is also what a trackpad pinch sends. The
+    // plain wheel is left alone: a diagram in a page must not trap its scroll.
+    useEffect(() => {
+        const node = root.current;
+        if (!node || !zoomOnPinch)
+            return;
+        const onWheel = (event) => {
+            if (!event.ctrlKey && !event.metaKey)
+                return;
+            event.preventDefault();
+            if (live.current.locked)
+                return;
+            const box = node.getBoundingClientRect();
+            zoomAbout(Math.exp(-event.deltaY * 0.01), event.clientX - box.left, event.clientY - box.top);
+        };
+        node.addEventListener('wheel', onWheel, { passive: false });
+        return () => node.removeEventListener('wheel', onWheel);
+    }, [zoomOnPinch, zoomAbout]);
+    /* Panning, and pinching with two fingers. */
+    const pointers = useRef(new Map());
+    const gesture = useRef(null);
+    const onPointerDown = (event) => {
+        if (event.target !== event.currentTarget && !event.target.hasAttribute('data-flow-pane'))
+            return;
+        if (event.button !== 0 || locked)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        gesture.current = null;
+    };
+    const onPointerMove = (event) => {
+        const held = pointers.current.get(event.pointerId);
+        if (!held)
+            return;
+        const all = [...pointers.current.values()];
+        if (all.length === 1 && panOnDrag) {
+            const { x, y, zoom } = live.current.viewport;
+            setViewport({ x: x + event.clientX - held.x, y: y + event.clientY - held.y, zoom });
+        }
+        pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        if (all.length === 2 && zoomOnPinch) {
+            const [a, b] = [...pointers.current.values()];
+            if (!a || !b)
+                return;
+            const spread = Math.hypot(a.x - b.x, a.y - b.y);
+            const box = event.currentTarget.getBoundingClientRect();
+            const mid = { x: (a.x + b.x) / 2 - box.left, y: (a.y + b.y) / 2 - box.top };
+            if (gesture.current)
+                zoomAbout(spread / gesture.current.spread, mid.x, mid.y);
+            gesture.current = { ...mid, spread };
+        }
+    };
+    const onPointerEnd = (event) => {
+        pointers.current.delete(event.pointerId);
+        gesture.current = null;
+    };
+    /* Drawing a connection from a handle. */
+    const connectFrom = useCallback((source, handle, event) => {
+        const box = live.current.rects[source];
+        if (!box || live.current.locked)
+            return;
+        const from = anchorOf(box, handle.side, handle.offset);
+        setWire({ from, side: handle.side, to: toGraph(event.clientX, event.clientY) });
+        const move = (next) => {
+            setWire({ from, side: handle.side, to: toGraph(next.clientX, next.clientY) });
+        };
+        const up = (next) => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
+            setWire(null);
+            if (next.type === 'pointercancel')
+                return;
+            const under = document.elementFromPoint(next.clientX, next.clientY);
+            const onHandle = under?.closest('[data-flow-handle]');
+            const onNode = under?.closest('[data-flow-node]');
+            const target = onNode?.dataset.flowNode;
+            if (!target || target === source || !root.current?.contains(onNode ?? null))
+                return;
+            const connection = {
+                source,
+                sourceHandle: handle.id,
+                target,
+                targetHandle: onHandle?.dataset.flowHandle || undefined,
+            };
+            if (callbacks.current.isValidConnection?.(connection) === false)
+                return;
+            callbacks.current.onConnect?.(connection);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+    }, [toGraph]);
+    const place = useCallback((id, position) => {
+        setRects((current) => {
+            const before = current[id];
+            if (before && before.x === position.x && before.y === position.y)
+                return current;
+            return {
+                ...current,
+                [id]: { x: position.x, y: position.y, width: before?.width ?? 0, height: before?.height ?? 0 },
+            };
+        });
+    }, []);
+    const measure = useCallback((id, width, height) => {
+        setRects((current) => {
+            const before = current[id];
+            if (!before || (before.width === width && before.height === height))
+                return current;
+            return { ...current, [id]: { ...before, width, height } };
+        });
+    }, []);
+    const forget = useCallback((id) => {
+        setRects((current) => {
+            if (!(id in current))
+                return current;
+            const { [id]: _gone, ...rest } = current;
+            return rest;
+        });
+    }, []);
+    const setHandle = useCallback((node, key, entry) => {
+        setHandles((current) => {
+            const others = (current[node] ?? []).filter((handle) => (handle.id ?? handle.side) !== key);
+            return { ...current, [node]: entry ? [...others, entry] : others };
+        });
+    }, []);
+    const context = useMemo(() => ({
+        viewport,
+        rects,
+        handles,
+        locked,
+        size,
+        underlay,
+        overlay,
+        place,
+        measure,
+        forget,
+        setHandle,
+        zoomBy,
+        fit,
+        setLocked,
+        connectFrom,
+        onNodeDragEnd,
+    }), [
+        viewport,
+        rects,
+        handles,
+        locked,
+        size,
+        underlay,
+        overlay,
+        place,
+        measure,
+        forget,
+        setHandle,
+        zoomBy,
+        fit,
+        connectFrom,
+        onNodeDragEnd,
+    ]);
+    const keys = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.target !== event.currentTarget)
+            return;
+        const pan = {
+            ArrowLeft: [40, 0],
+            ArrowRight: [-40, 0],
+            ArrowUp: [0, 40],
+            ArrowDown: [0, -40],
+        };
+        const by = pan[event.key];
+        if (by && !locked) {
+            event.preventDefault();
+            setViewport({ ...viewport, x: viewport.x + by[0], y: viewport.y + by[1] });
+        }
+        else if (event.key === '+' || event.key === '=')
+            zoomBy(1.3);
+        else if (event.key === '-')
+            zoomBy(1 / 1.3);
+        else if (event.key === '0')
+            fit();
+    };
+    return (_jsx(FlowContext.Provider, { value: context, children: _jsxs("div", { ref: root, role: "application", "aria-label": label, "aria-roledescription": "Diagram", tabIndex: 0, "data-locked": locked ? '' : undefined, className: slots.root({ className }), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onKeyDown: keys, ...props, children: [_jsx("div", { ref: setUnderlay, "data-flow-pane": "", className: slots.underlay() }), _jsxs("div", { "data-flow-layer": "", className: slots.layer(), style: {
+                        transform: `translate(${viewport.x.toFixed(2)}px, ${viewport.y.toFixed(2)}px) scale(${viewport.zoom.toFixed(4)})`,
+                    }, children: [children, wire ? (_jsx("svg", { "aria-hidden": "true", className: flowVariants({ color: 'muted' }).edge(), children: _jsx("path", { 
+                                // It arrives facing back the way it left, which is the shape a
+                                // wire has while it is still in the hand.
+                                d: bezierPath(wire.from, wire.side, wire.to, OPPOSITE[wire.side], 0.25), fill: "none", stroke: "currentColor", strokeWidth: 2, strokeDasharray: "6 6", strokeLinecap: "round" }) })) : null] }), _jsx("div", { ref: setOverlay, className: slots.overlay() })] }) }));
+}
+FlowRoot.displayName = 'Flow';
+/** The pattern behind the graph, which moves and scales with it. */
+function FlowBackground({ variant = 'dots', gap = 24, size, className }) {
+    const flow = useFlow('Flow.Background');
+    const id = useId();
+    if (!flow.underlay || variant === 'none')
+        return null;
+    const { x, y, zoom } = flow.viewport;
+    const mark = size ?? (variant === 'dots' ? 1.2 : variant === 'lines' ? 1 : 3);
+    return createPortal(_jsxs("svg", { "aria-hidden": "true", className: className ?? 'size-full', children: [_jsxs("pattern", { id: id, width: gap, height: gap, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x.toFixed(2)} ${y.toFixed(2)}) scale(${zoom.toFixed(4)})`, children: [variant === 'dots' ? _jsx("circle", { cx: gap / 2, cy: gap / 2, r: mark, fill: "currentColor" }) : null, variant === 'lines' ? (_jsx("path", { d: `M${gap} 0H0V${gap}`, fill: "none", stroke: "currentColor", strokeWidth: mark, opacity: "0.5" })) : null, variant === 'cross' ? (_jsx("path", { d: `M${gap / 2 - mark} ${gap / 2}h${mark * 2}M${gap / 2} ${gap / 2 - mark}v${mark * 2}`, stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })) : null] }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })] }), flow.underlay);
+}
+FlowBackground.displayName = 'Flow.Background';
+/** What a node and a group share: a box on the graph that can be moved. */
+function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
+    const flow = useFlow('Flow.Node');
+    const element = useRef(null);
+    const { place, measure, forget } = flow;
+    const step = moveStep ?? 24;
+    useLayoutEffect(() => {
+        place(id, position);
+        // Only when the caller's position changes, not on every drawing.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, position.x, position.y, place]);
+    useLayoutEffect(() => {
+        const node = element.current;
+        if (!node)
+            return;
+        const read = () => measure(id, node.offsetWidth, node.offsetHeight);
+        read();
+        const observer = new ResizeObserver(read);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [id, measure]);
+    useEffect(() => () => forget(id), [id, forget]);
+    const at = flow.rects[id] ?? { ...position, width: 0, height: 0 };
+    const drag = useRef(null);
+    const latest = useRef(at);
+    latest.current = at;
+    const onPointerDown = (event) => {
+        if (event.button !== 0)
+            return;
+        // A handle starts a connection, and a control inside a node is pressed.
+        if (event.target.closest('[data-flow-handle], button, a, input, textarea, select, [data-no-drag]')) {
+            return;
+        }
+        // Kept from the pane, and from a group this node may be sitting in.
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { x: event.clientX, y: event.clientY, from: { x: at.x, y: at.y }, moved: false };
+    };
+    const onPointerMove = (event) => {
+        const state = drag.current;
+        if (!state)
+            return;
+        const dx = event.clientX - state.x;
+        const dy = event.clientY - state.y;
+        if (!state.moved && Math.hypot(dx, dy) < 3)
+            return;
+        state.moved = true;
+        if (draggable === false || flow.locked)
+            return;
+        place(id, { x: state.from.x + dx / flow.viewport.zoom, y: state.from.y + dy / flow.viewport.zoom });
+    };
+    const onPointerUp = () => {
+        const state = drag.current;
+        drag.current = null;
+        if (!state)
+            return;
+        if (!state.moved)
+            onPress?.();
+        else if (draggable !== false && !flow.locked) {
+            flow.onNodeDragEnd?.(id, { x: latest.current.x, y: latest.current.y });
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const moves = {
+            ArrowLeft: [-1, 0],
+            ArrowRight: [1, 0],
+            ArrowUp: [0, -1],
+            ArrowDown: [0, 1],
+        };
+        const by = moves[event.key];
+        if (by) {
+            // Kept from the canvas, which would pan on the same key.
+            event.stopPropagation();
+            if (draggable === false || flow.locked)
+                return;
+            event.preventDefault();
+            const far = step * (event.shiftKey ? 4 : 1);
+            const next = { x: at.x + by[0] * far, y: at.y + by[1] * far };
+            place(id, next);
+            flow.onNodeDragEnd?.(id, next);
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            if (!onPress)
+                return;
+            event.preventDefault();
+            onPress();
+        }
+        else if ((event.key === 'Delete' || event.key === 'Backspace') && onDelete) {
+            event.preventDefault();
+            onDelete();
+        }
+    };
+    return {
+        element,
+        style: { translate: `${at.x.toFixed(2)}px ${at.y.toFixed(2)}px` },
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: () => {
+                drag.current = null;
+            },
+            onKeyDown,
+        },
+    };
+}
+/** A box on the graph. Whatever is inside it is yours. */
+function FlowNode({ id, position, draggable = true, selected = false, onPress, onDelete, moveStep, className, style, children, ...props }) {
+    const movable = useMovable({ id, position, draggable, onPress, onDelete, moveStep });
+    return (_jsx(NodeContext.Provider, { value: id, children: _jsx("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Node", "aria-selected": selected || undefined, className: flowVariants({ selected }).node({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: children }) }));
+}
+FlowNode.displayName = 'Flow.Node';
+/**
+ * A dashed box round a few things that belong together. It is a node like any
+ * other: it is dragged as one, and an edge can be joined to it.
+ */
+function FlowGroup({ id, position, draggable = true, selected: _selected, onPress, onDelete, moveStep, label, className, style, children, ...props }) {
+    const movable = useMovable({ id, position, draggable, onPress, onDelete, moveStep });
+    return (_jsx(NodeContext.Provider, { value: id, children: _jsxs("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Group", className: flowVariants().group({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: [label !== undefined ? _jsx("span", { className: flowVariants().groupLabel(), children: label }) : null, children] }) }));
+}
+FlowGroup.displayName = 'Flow.Group';
+const SIDE_STYLE = {
+    top: (offset) => ({ left: `${offset * 100}%`, top: '0%' }),
+    bottom: (offset) => ({ left: `${offset * 100}%`, top: '100%' }),
+    left: (offset) => ({ left: '0%', top: `${offset * 100}%` }),
+    right: (offset) => ({ left: '100%', top: `${offset * 100}%` }),
+};
+/** A point on a node's edge that a connection can be drawn from, or dropped on. */
+function FlowHandle({ id, position = 'right', offset = 0.5, className, style, ...props }) {
+    const flow = useFlow('Flow.Handle');
+    const node = useContext(NodeContext);
+    if (node === null)
+        throw new Error('Flow.Handle must be used inside a <Flow.Node>.');
+    const { setHandle, connectFrom } = flow;
+    useEffect(() => {
+        const key = id ?? position;
+        setHandle(node, key, { id, side: position, offset });
+        return () => setHandle(node, key, null);
+    }, [node, id, position, offset, setHandle]);
+    return (_jsx("span", { "data-flow-handle": id ?? '', "aria-hidden": "true", className: flowVariants().handle({ className }), style: { ...SIDE_STYLE[position](offset), ...style }, onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+            connectFrom(node, { id, side: position, offset }, event);
+        }, ...props }));
+}
+FlowHandle.displayName = 'Flow.Handle';
+const endpoint = (reference) => typeof reference === 'string' ? { node: reference } : reference;
+/** A line from one node to another, which follows them as they move. */
+function FlowEdge({ from, to, variant = 'bezier', animated = false, dashed = false, color, width = 2, arrow = false, fromSide, toSide, radius = 8, gap = 20, curvature = 0.25, }) {
+    const flow = useFlow('Flow.Edge');
+    // Whether motion is wanted is only known in the browser.
+    const [still, setStill] = useState(true);
+    useEffect(() => {
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const read = () => setStill(query.matches);
+        read();
+        query.addEventListener('change', read);
+        return () => query.removeEventListener('change', read);
+    }, []);
+    const source = endpoint(from);
+    const target = endpoint(to);
+    const a = flow.rects[source.node];
+    const b = flow.rects[target.node];
+    // Nothing to draw until both ends have been measured.
+    if (!a || !b || a.width === 0 || b.width === 0)
+        return null;
+    const named = (node, handle) => handle === undefined ? undefined : flow.handles[node]?.find((entry) => entry.id === handle);
+    const out = named(source.node, source.handle);
+    const into = named(target.node, target.handle);
+    const auto = autoSides(a, b);
+    const sideA = fromSide ?? out?.side ?? auto.from;
+    const sideB = toSide ?? into?.side ?? auto.to;
+    const start = anchorOf(a, sideA, out?.offset ?? 0.5);
+    const tip = anchorOf(b, sideB, into?.offset ?? 0.5);
+    // The line stops short of the tip when there is an arrowhead to finish it.
+    const head = arrow ? 9 : 0;
+    const direction = arrivalDirection(variant, start, tip, sideB);
+    const length = Math.hypot(direction.x, direction.y) || 1;
+    const end = { x: tip.x - (direction.x / length) * head * 0.6, y: tip.y - (direction.y / length) * head * 0.6 };
+    const d = edgePath(variant, start, sideA, end, sideB, curvature, radius, gap);
+    const dash = dashed || animated ? '6 6' : undefined;
+    return (_jsxs("svg", { "aria-hidden": "true", className: flowVariants({ color: color ?? 'muted' }).edge(), children: [_jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: width, strokeDasharray: dash, strokeLinecap: "round", strokeLinejoin: "round", opacity: color ? 1 : 0.7, children: animated && !still ? (_jsx("animate", { attributeName: "stroke-dashoffset", from: "12", to: "0", dur: "0.6s", repeatCount: "indefinite" })) : null }), arrow ? (_jsx("path", { d: arrowHeadPath(tip, direction.x, direction.y, head), fill: "currentColor", opacity: color ? 1 : 0.7 })) : null] }));
+}
+FlowEdge.displayName = 'Flow.Edge';
+const icon = (path) => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: path }));
+/** Buttons for what a pinch and a drag do, for anyone without either. */
+function FlowControls({ zoom = true, fit = true, lock = true, step = 1.3, position = 'bottom-right', className, ...props }) {
+    const flow = useFlow('Flow.Controls');
+    const slots = flowVariants({ position });
+    if (!flow.overlay)
+        return null;
+    return createPortal(_jsxs("div", { role: "group", "aria-label": "Canvas controls", className: slots.controls({ className }), ...props, children: [zoom ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Zoom in", className: slots.control(), onClick: () => flow.zoomBy(step), children: icon(_jsx("path", { d: "M12 5v14M5 12h14" })) }), _jsx("button", { type: "button", "aria-label": "Zoom out", className: slots.control(), onClick: () => flow.zoomBy(1 / step), children: icon(_jsx("path", { d: "M5 12h14" })) })] })) : null, fit ? (_jsx("button", { type: "button", "aria-label": "Fit everything in view", className: slots.control(), onClick: flow.fit, children: icon(_jsx("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" })) })) : null, lock ? (_jsx("button", { type: "button", "aria-label": "Lock the canvas", "aria-pressed": flow.locked, className: slots.control(), onClick: () => flow.setLocked(!flow.locked), children: icon(_jsxs(_Fragment, { children: [_jsx("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }), _jsx("path", { d: flow.locked ? 'M8 11V8a4 4 0 0 1 8 0v3' : 'M8 11V8a4 4 0 0 1 7.5-2' })] })) })) : null] }), flow.overlay);
+}
+FlowControls.displayName = 'Flow.Controls';
+/** The whole graph, small, with the part in view marked on it. */
+function FlowMiniMap({ width = 120, height = 80, position = 'bottom-left', className, style, ...props }) {
+    const flow = useFlow('Flow.MiniMap');
+    const slots = flowVariants({ position });
+    if (!flow.overlay)
+        return null;
+    const boxes = Object.values(flow.rects).filter((box) => box.width > 0);
+    const { x, y, zoom } = flow.viewport;
+    // What the canvas is showing, in the graph's own coordinates.
+    const view = { x: -x / zoom, y: -y / zoom, width: flow.size.width / zoom, height: flow.size.height / zoom };
+    const all = [...boxes, view];
+    const left = Math.min(...all.map((box) => box.x));
+    const top = Math.min(...all.map((box) => box.y));
+    const right = Math.max(...all.map((box) => box.x + box.width));
+    const bottom = Math.max(...all.map((box) => box.y + box.height));
+    const pad = 20;
+    return createPortal(_jsx("div", { "aria-hidden": "true", className: slots.minimap({ className }), style: { width, height, ...style }, ...props, children: _jsxs("svg", { viewBox: `${(left - pad).toFixed(1)} ${(top - pad).toFixed(1)} ${(right - left + pad * 2).toFixed(1)} ${(bottom - top + pad * 2).toFixed(1)}`, className: "size-full", children: [boxes.map((box, index) => (_jsx("rect", { x: box.x, y: box.y, width: box.width, height: box.height, rx: "10", className: "fill-muted-foreground/40" }, index))), _jsx("rect", { x: view.x, y: view.y, width: view.width, height: view.height, rx: "8", className: "fill-foreground/5 stroke-foreground/50", strokeWidth: "2", vectorEffect: "non-scaling-stroke" })] }) }), flow.overlay);
+}
+FlowMiniMap.displayName = 'Flow.MiniMap';
+export const Flow = Object.assign(FlowRoot, {
+    Background: FlowBackground,
+    Node: FlowNode,
+    Handle: FlowHandle,
+    Edge: FlowEdge,
+    Group: FlowGroup,
+    Controls: FlowControls,
+    MiniMap: FlowMiniMap,
+});
+/* By name as well, for a Server Component, which cannot dot into a client
+   module. */
+export { FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowControls, FlowMiniMap };