@atmos.build/ui 0.1.0

package/dist/flow/canvas/canvas-frame.js

@@ -0,0 +1,521 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import ReactFlow, { Background, BackgroundVariant, Controls, MiniMap, Panel, } from 'reactflow';
+import { ClipboardPaste, Copy, Hand, Map as MapIcon, MousePointer2, Redo2, StickyNote, Undo2, Wand2, } from 'lucide-react';
+import { Button } from '../../components/button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip.js';
+import { cn } from '../../lib/cn.js';
+import { FlowEditorContext } from './editor-context.js';
+import { StickyNotesLayer } from './sticky-notes.js';
+import { MiniMapStickyOverlay } from './minimap-sticky-overlay.js';
+import { FlowCollaboratorLayer } from './collaborator-layer.js';
+const EMPTY_EDGE_HIGHLIGHT = new Set();
+const EMPTY_INVALID_NODES = new Set();
+const EMPTY_STATUS_BY_NODE = {};
+const EMPTY_DURATION_BY_NODE = {};
+const EMPTY_TAKEN_HANDLES_BY_NODE = {};
+export const FLOW_NODE_DND_MIME = 'application/atmos-flow-node';
+const KEYBOARD_PAN_SPEED = 820;
+const KEYBOARD_PAN_EASE = 16;
+const KEYBOARD_PAN_SETTLE_PX = 0.35;
+const KEYBOARD_PAN_KEYS = new Set(['w', 'a', 's', 'd']);
+export function FlowCanvasFrame({ controller, nodeTypes, edgeTypes, labels, titleForKind, renderDropPicker, renderInsertPicker, collaborators = [], onPointer, onNodeDragPreview, highlightedNodeId = null, highlightedEdgeIds, invalidNodeIds, showStickyNotes = false, onAddPickerReady, onCopySelection, onPasteSelection, toolbarExtras, rightPanel, onPaneDrop, testId = 'flow-canvas', collaboratorCursorTestIdPrefix = `${testId}-collaborator-cursor`, className = 'relative h-[360px] min-w-0 shrink-0 xl:h-auto xl:flex-1 xl:shrink', minimapDefaultThreshold = 8, dropPickerWidth = 320, dropPickerHeight = 360, replay = false, statusByNode, durationByNode, takenHandlesByNode, traversedEdgeIds, onReplayNodeClick, replayBanner, }) {
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isValidConnection, insertNodeOnEdge, removeNode, duplicateNode, } = controller;
+    const [mode, setMode] = useState('select');
+    const [hoveredEdgeId, setHoveredEdgeId] = useState(null);
+    const [insertEdgeId, setInsertEdgeId] = useState(null);
+    const [dropAdd, setDropAdd] = useState(null);
+    const [minimapPref, setMinimapPref] = useState(null);
+    const connectStartRef = useRef(null);
+    const didConnectRef = useRef(false);
+    const edgesRef = useRef(edges);
+    const controllerRef = useRef(controller);
+    const selectedIdsRef = useRef([]);
+    const canvasRef = useRef(null);
+    const sideRailRef = useRef(null);
+    const flowRef = useRef(null);
+    const userMovedViewportRef = useRef(false);
+    const pointerEventRef = useRef(null);
+    const pointerPublishTimerRef = useRef(null);
+    const keyboardPanKeysRef = useRef(new Set());
+    const keyboardPanFrameRef = useRef(null);
+    const keyboardPanTimeRef = useRef(0);
+    const keyboardPanTargetRef = useRef(null);
+    const keyboardPanRenderedRef = useRef(null);
+    const [layoutTick, setLayoutTick] = useState(0);
+    const selectedIds = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
+    const hasSelection = selectedIds.length > 0;
+    const showMinimap = minimapPref ?? nodes.length > minimapDefaultThreshold;
+    const remoteSelectedNodeIds = useMemo(() => {
+        const ids = new Set();
+        for (const collaborator of collaborators) {
+            for (const id of collaborator.selectedNodeIds ?? [])
+                ids.add(id);
+        }
+        return ids;
+    }, [collaborators]);
+    const stickyEnabled = showStickyNotes &&
+        Boolean(controller.annotations &&
+            controller.updateAnnotation &&
+            controller.commitAnnotation &&
+            controller.removeAnnotation);
+    useEffect(() => {
+        edgesRef.current = edges;
+        selectedIdsRef.current = selectedIds;
+    }, [edges, selectedIds]);
+    useEffect(() => {
+        controllerRef.current = controller;
+    }, [controller]);
+    useEffect(() => {
+        const el = canvasRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => setLayoutTick((tick) => tick + 1));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (userMovedViewportRef.current || nodes.length === 0)
+            return;
+        const frame = requestAnimationFrame(() => {
+            flowRef.current?.fitView({ padding: 0.18, maxZoom: 1.1, duration: 0 });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [layoutTick, nodes]);
+    useEffect(() => () => {
+        if (pointerPublishTimerRef.current)
+            clearTimeout(pointerPublishTimerRef.current);
+        if (keyboardPanFrameRef.current != null)
+            cancelAnimationFrame(keyboardPanFrameRef.current);
+    }, []);
+    const focusRequest = controller.focusRequest;
+    useEffect(() => {
+        if (!focusRequest)
+            return;
+        let inner = 0;
+        const outer = requestAnimationFrame(() => {
+            inner = requestAnimationFrame(() => {
+                const flow = flowRef.current;
+                const rect = canvasRef.current?.getBoundingClientRect();
+                if (!flow || !rect)
+                    return;
+                const node = flow.getNode(focusRequest.id);
+                if (!node)
+                    return;
+                const width = node.width ?? 200;
+                const height = node.height ?? 64;
+                const { x, y, zoom } = flow.getViewport();
+                const left = node.position.x * zoom + x;
+                const top = node.position.y * zoom + y;
+                const margin = 24;
+                const inView = left >= margin &&
+                    top >= margin &&
+                    left + width * zoom <= rect.width - margin &&
+                    top + height * zoom <= rect.height - margin;
+                if (inView)
+                    return;
+                userMovedViewportRef.current = true;
+                void flow.setCenter(node.position.x + width / 2, node.position.y + height / 2, {
+                    zoom,
+                    duration: 320,
+                });
+            });
+        });
+        return () => {
+            cancelAnimationFrame(outer);
+            if (inner)
+                cancelAnimationFrame(inner);
+        };
+    }, [focusRequest]);
+    const onConnectStart = useCallback((_, params) => {
+        connectStartRef.current = params;
+        didConnectRef.current = false;
+    }, []);
+    const handleConnect = useCallback((connection) => {
+        didConnectRef.current = true;
+        onConnect(connection);
+    }, [onConnect]);
+    const onConnectEnd = useCallback((event) => {
+        const start = connectStartRef.current;
+        connectStartRef.current = null;
+        if (!start?.nodeId)
+            return;
+        if (didConnectRef.current)
+            return;
+        const targetEl = event.target;
+        if (targetEl?.closest('.react-flow__node'))
+            return;
+        if (!targetEl?.classList.contains('react-flow__pane'))
+            return;
+        const point = 'changedTouches' in event ? event.changedTouches[0] : event;
+        const flow = flowRef.current;
+        const rect = canvasRef.current?.getBoundingClientRect();
+        if (!point || !flow || !rect)
+            return;
+        const flowPos = flow.screenToFlowPosition({ x: point.clientX, y: point.clientY });
+        const screen = {
+            x: Math.max(8, Math.min(point.clientX - rect.left, rect.width - dropPickerWidth - 8)),
+            y: Math.max(8, Math.min(point.clientY - rect.top, rect.height - dropPickerHeight - 8)),
+        };
+        setDropAdd(start.handleType === 'target'
+            ? { flow: flowPos, screen, to: { targetId: start.nodeId } }
+            : {
+                flow: flowPos,
+                screen,
+                from: { sourceId: start.nodeId, handleId: start.handleId ?? null },
+            });
+    }, [dropPickerHeight, dropPickerWidth]);
+    const addConnectedNodeAt = controller.addConnectedNodeAt;
+    const handleDropPick = useCallback((kind) => {
+        if (!dropAdd)
+            return;
+        addConnectedNodeAt({
+            kind,
+            title: titleForKind(kind),
+            at: { x: dropAdd.flow.x - 100, y: dropAdd.flow.y - 32 },
+            ...(dropAdd.from ? { from: dropAdd.from } : {}),
+            ...(dropAdd.to ? { to: dropAdd.to } : {}),
+        });
+        setDropAdd(null);
+    }, [addConnectedNodeAt, dropAdd, titleForKind]);
+    const openAddPicker = useCallback(() => {
+        const flow = flowRef.current;
+        const rect = canvasRef.current?.getBoundingClientRect();
+        if (!flow || !rect)
+            return;
+        const flowPos = flow.screenToFlowPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        });
+        setDropAdd({
+            flow: flowPos,
+            screen: {
+                x: Math.max(8, rect.width / 2 - dropPickerWidth / 2),
+                y: Math.max(8, Math.min(rect.height / 2 - 120, rect.height - dropPickerHeight - 8)),
+            },
+        });
+    }, [dropPickerHeight, dropPickerWidth]);
+    useEffect(() => {
+        onAddPickerReady?.(openAddPicker);
+    }, [onAddPickerReady, openAddPicker]);
+    const deleteEdge = useCallback((edgeId) => controllerRef.current.removeNodesAndEdges([], [edgeId]), []);
+    const onPaneDragOver = useCallback((event) => {
+        if (!onPaneDrop)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    }, [onPaneDrop]);
+    const onPaneDropHandler = useCallback((event) => {
+        if (!onPaneDrop)
+            return;
+        const kind = event.dataTransfer.getData(FLOW_NODE_DND_MIME);
+        if (!kind)
+            return;
+        event.preventDefault();
+        const flow = flowRef.current;
+        if (!flow)
+            return;
+        const screenToFlow = flow.screenToFlowPosition?.bind(flow) ??
+            flow.project?.bind(flow);
+        if (!screenToFlow)
+            return;
+        const flowPos = screenToFlow({ x: event.clientX, y: event.clientY });
+        onPaneDrop(kind, { x: flowPos.x - 100, y: flowPos.y - 32 });
+    }, [onPaneDrop]);
+    const editorContext = useMemo(() => ({
+        hoveredEdgeId,
+        highlightedNodeId,
+        highlightedEdgeIds: highlightedEdgeIds ?? EMPTY_EDGE_HIGHLIGHT,
+        invalidNodeIds: invalidNodeIds ?? EMPTY_INVALID_NODES,
+        remoteSelectedNodeIds,
+        requestInsert: (edgeId) => setInsertEdgeId(edgeId),
+        deleteNode: removeNode,
+        deleteEdge,
+        duplicateNode,
+        replay,
+        statusByNode: statusByNode ?? EMPTY_STATUS_BY_NODE,
+        durationByNode: durationByNode ?? EMPTY_DURATION_BY_NODE,
+        takenHandlesByNode: takenHandlesByNode ?? EMPTY_TAKEN_HANDLES_BY_NODE,
+        traversedEdgeIds: traversedEdgeIds ?? EMPTY_EDGE_HIGHLIGHT,
+    }), [
+        highlightedNodeId,
+        highlightedEdgeIds,
+        invalidNodeIds,
+        remoteSelectedNodeIds,
+        hoveredEdgeId,
+        removeNode,
+        deleteEdge,
+        duplicateNode,
+        replay,
+        statusByNode,
+        durationByNode,
+        takenHandlesByNode,
+        traversedEdgeIds,
+    ]);
+    const publishPointer = useCallback((event) => {
+        if (!onPointer)
+            return;
+        pointerEventRef.current = { x: event.clientX, y: event.clientY };
+        if (pointerPublishTimerRef.current)
+            return;
+        pointerPublishTimerRef.current = setTimeout(() => {
+            pointerPublishTimerRef.current = null;
+            const point = pointerEventRef.current;
+            const flow = flowRef.current;
+            if (!point || !flow)
+                return;
+            // Broadcast in flow/world coordinates so every peer projects the cursor
+            // back through its own pan/zoom viewport (correct position at any zoom).
+            onPointer(flow.screenToFlowPosition({ x: point.x, y: point.y }));
+        }, 50);
+    }, [onPointer]);
+    const emitNodeDrag = useCallback((node) => {
+        if (!onNodeDragPreview)
+            return;
+        onNodeDragPreview({
+            nodeId: node.id,
+            x: node.position.x,
+            y: node.position.y,
+            width: node.width ?? 160,
+            height: node.height ?? 44,
+        });
+    }, [onNodeDragPreview]);
+    useEffect(() => {
+        function stopKeyboardPan() {
+            keyboardPanKeysRef.current.clear();
+            if (keyboardPanFrameRef.current == null)
+                return;
+            cancelAnimationFrame(keyboardPanFrameRef.current);
+            keyboardPanFrameRef.current = null;
+            keyboardPanTargetRef.current = null;
+            keyboardPanRenderedRef.current = null;
+        }
+        function runKeyboardPan(timestamp) {
+            const keys = keyboardPanKeysRef.current;
+            const flow = flowRef.current;
+            if (!flow) {
+                keyboardPanFrameRef.current = null;
+                return;
+            }
+            const viewport = flow.getViewport();
+            const elapsedSeconds = Math.min(0.05, Math.max(0, timestamp - keyboardPanTimeRef.current) / 1000);
+            const target = keyboardPanTargetRef.current ?? viewport;
+            const rendered = keyboardPanRenderedRef.current ?? viewport;
+            let xDirection = 0;
+            let yDirection = 0;
+            if (keys.has('a'))
+                xDirection += 1;
+            if (keys.has('d'))
+                xDirection -= 1;
+            if (keys.has('w'))
+                yDirection += 1;
+            if (keys.has('s'))
+                yDirection -= 1;
+            if (xDirection !== 0 || yDirection !== 0) {
+                const distance = elapsedSeconds * KEYBOARD_PAN_SPEED;
+                const scale = xDirection !== 0 && yDirection !== 0 ? Math.SQRT1_2 : 1;
+                keyboardPanTargetRef.current = {
+                    x: target.x + xDirection * distance * scale,
+                    y: target.y + yDirection * distance * scale,
+                    zoom: viewport.zoom,
+                };
+            }
+            else {
+                keyboardPanTargetRef.current = { ...target, zoom: viewport.zoom };
+            }
+            const nextTarget = keyboardPanTargetRef.current;
+            const ease = 1 - Math.exp(-KEYBOARD_PAN_EASE * elapsedSeconds);
+            const nextRendered = {
+                x: rendered.x + (nextTarget.x - rendered.x) * ease,
+                y: rendered.y + (nextTarget.y - rendered.y) * ease,
+                zoom: viewport.zoom,
+            };
+            const delta = Math.hypot(nextTarget.x - nextRendered.x, nextTarget.y - nextRendered.y);
+            const active = keys.size > 0 || delta > KEYBOARD_PAN_SETTLE_PX;
+            userMovedViewportRef.current = true;
+            keyboardPanRenderedRef.current =
+                keys.size === 0 && delta <= KEYBOARD_PAN_SETTLE_PX ? nextTarget : nextRendered;
+            void flow.setViewport(keyboardPanRenderedRef.current);
+            keyboardPanTimeRef.current = timestamp;
+            if (active) {
+                keyboardPanFrameRef.current = requestAnimationFrame(runKeyboardPan);
+            }
+            else {
+                keyboardPanFrameRef.current = null;
+                keyboardPanTargetRef.current = null;
+                keyboardPanRenderedRef.current = null;
+            }
+        }
+        function startKeyboardPan(key) {
+            keyboardPanKeysRef.current.add(key);
+            if (keyboardPanFrameRef.current != null)
+                return;
+            const viewport = flowRef.current?.getViewport();
+            keyboardPanTargetRef.current = viewport ?? null;
+            keyboardPanRenderedRef.current = viewport ?? null;
+            keyboardPanTimeRef.current = performance.now();
+            keyboardPanFrameRef.current = requestAnimationFrame(runKeyboardPan);
+        }
+        function onKey(e) {
+            if (replay)
+                return;
+            const target = e.target;
+            // The side rail (step config + node library) owns its own keys — no canvas
+            // shortcut fires while focus is there; Tab or click back to a node.
+            if (target && sideRailRef.current?.contains(target))
+                return;
+            const editable = Boolean(target?.closest('input, textarea, [contenteditable="true"]'));
+            if (editable)
+                return;
+            if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'z') {
+                e.preventDefault();
+                if (e.shiftKey)
+                    controllerRef.current.redo();
+                else
+                    controllerRef.current.undo();
+                return;
+            }
+            if (e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'y') {
+                e.preventDefault();
+                controllerRef.current.redo();
+                return;
+            }
+            if ((e.key === 'Backspace' || e.key === 'Delete') && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                // Only delete when the keystroke lands on the canvas — the rail bailed
+                // above, and this also blocks a stray Backspace on <body> after a rail
+                // field empties and blurs. Clicking a node focuses its .react-flow__node.
+                const onCanvas = Boolean(canvasRef.current && target && canvasRef.current.contains(target));
+                if (!onCanvas)
+                    return;
+                const selectedEdgeIds = edgesRef.current
+                    .filter((edge) => edge.selected)
+                    .map((edge) => edge.id);
+                const selectedNodeIds = selectedIdsRef.current;
+                if (selectedNodeIds.length > 0 || selectedEdgeIds.length > 0) {
+                    e.preventDefault();
+                    controllerRef.current.removeNodesAndEdges(selectedNodeIds, selectedEdgeIds);
+                }
+                return;
+            }
+            if (editable)
+                return;
+            if (!e.metaKey && !e.ctrlKey && !e.altKey && e.key.toLowerCase() === 'h') {
+                e.preventDefault();
+                setMode('move');
+                return;
+            }
+            if (!e.metaKey && !e.ctrlKey && !e.altKey && e.key.toLowerCase() === 'v') {
+                e.preventDefault();
+                setMode('select');
+                return;
+            }
+            const panKey = e.key.toLowerCase();
+            if (!e.metaKey && !e.ctrlKey && !e.altKey && KEYBOARD_PAN_KEYS.has(panKey)) {
+                e.preventDefault();
+                startKeyboardPan(panKey);
+                return;
+            }
+            if ((e.metaKey || e.ctrlKey) &&
+                e.key.toLowerCase() === 'c' &&
+                selectedIdsRef.current.length > 0) {
+                e.preventDefault();
+                void onCopySelection?.();
+                return;
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'v') {
+                e.preventDefault();
+                void onPasteSelection?.();
+            }
+        }
+        document.addEventListener('keydown', onKey);
+        function onKeyUp(e) {
+            keyboardPanKeysRef.current.delete(e.key.toLowerCase());
+        }
+        document.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', stopKeyboardPan);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', stopKeyboardPan);
+            stopKeyboardPan();
+        };
+    }, [onCopySelection, onPasteSelection, replay]);
+    useEffect(() => {
+        function onEscape(e) {
+            if (e.key !== 'Escape')
+                return;
+            const target = e.target;
+            const inEditor = !target ||
+                target === document.body ||
+                canvasRef.current?.contains(target) ||
+                Boolean(target.closest?.('[data-flow-editor-region]'));
+            if (!inEditor)
+                return;
+            if (dropAdd) {
+                e.preventDefault();
+                e.stopPropagation();
+                setDropAdd(null);
+                return;
+            }
+            if (insertEdgeId) {
+                e.preventDefault();
+                e.stopPropagation();
+                setInsertEdgeId(null);
+                return;
+            }
+            if (target?.closest?.('input, textarea, [contenteditable="true"]')) {
+                e.preventDefault();
+                e.stopPropagation();
+                document.activeElement?.blur();
+                return;
+            }
+            const hasSelected = selectedIdsRef.current.length > 0 || edgesRef.current.some((edge) => edge.selected);
+            if (hasSelected) {
+                e.preventDefault();
+                e.stopPropagation();
+                controllerRef.current.deselectAll();
+            }
+        }
+        document.addEventListener('keydown', onEscape, true);
+        return () => document.removeEventListener('keydown', onEscape, true);
+    }, [dropAdd, insertEdgeId]);
+    const stickyController = stickyEnabled && controller.annotations
+        ? {
+            annotations: controller.annotations,
+            updateAnnotation: controller.updateAnnotation,
+            commitAnnotation: controller.commitAnnotation,
+            removeAnnotation: controller.removeAnnotation,
+        }
+        : null;
+    const canvas = (_jsxs("div", { ref: canvasRef, className: className, "data-testid": testId, onMouseMove: publishPointer, onMouseLeave: () => onPointer?.(null), ...(onPaneDrop ? { onDragOver: onPaneDragOver, onDrop: onPaneDropHandler } : {}), children: [_jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: handleConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, isValidConnection: isValidConnection, onInit: (instance) => {
+                    flowRef.current = instance;
+                }, onMoveStart: () => {
+                    userMovedViewportRef.current = true;
+                }, onNodeDragStart: (_, node) => {
+                    userMovedViewportRef.current = true;
+                    emitNodeDrag(node);
+                }, onNodeDrag: (_, node) => emitNodeDrag(node), onNodeDragStop: () => onNodeDragPreview?.(null), onSelectionDragStart: () => {
+                    userMovedViewportRef.current = true;
+                }, onEdgeMouseEnter: (_, edge) => setHoveredEdgeId(edge.id), onEdgeMouseLeave: () => setHoveredEdgeId(null), ...(replay && onReplayNodeClick
+                    ? {
+                        onNodeClick: (_, node) => onReplayNodeClick(node.id),
+                        onPaneClick: () => onReplayNodeClick(null),
+                    }
+                    : {}), nodesDraggable: !replay, nodesConnectable: !replay, elementsSelectable: !replay, selectionOnDrag: !replay && mode === 'select', selectNodesOnDrag: false, zoomOnDoubleClick: false, panOnDrag: replay || mode === 'move' ? [0, 1, 2] : [1, 2], zoomOnScroll: true, panOnScroll: true, multiSelectionKeyCode: ['Meta', 'Control', 'Shift'], deleteKeyCode: null, snapToGrid: true, snapGrid: [4, 4], proOptions: { hideAttribution: true }, fitView: true, fitViewOptions: { padding: 0.18, maxZoom: 1.1 }, children: [replay ? (_jsx(Panel, { position: "top-left", className: "!z-20", children: replayBanner })) : (_jsx(Panel, { position: "top-left", className: "!z-20 flex items-center gap-1", children: _jsxs(TooltipProvider, { delayDuration: 300, children: [_jsx(ToolbarButton, { active: mode === 'move', title: labels.modeMove, onClick: () => setMode('move'), children: _jsx(Hand, { className: "size-3.5", strokeWidth: 1.8 }) }), _jsx(ToolbarButton, { active: mode === 'select', title: labels.modeSelect, onClick: () => setMode('select'), children: _jsx(MousePointer2, { className: "size-3.5", strokeWidth: 1.8 }) }), onCopySelection || onPasteSelection ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border/70 mx-0.5 h-5 w-px" }), _jsx(ToolbarButton, { disabled: !hasSelection, title: labels.copy, onClick: () => void onCopySelection?.(), children: _jsx(Copy, { className: "size-3.5", strokeWidth: 1.8 }) }), _jsx(ToolbarButton, { title: labels.paste, onClick: () => void onPasteSelection?.(), children: _jsx(ClipboardPaste, { className: "size-3.5", strokeWidth: 1.8 }) })] })) : null, _jsx("span", { className: "bg-border/70 mx-0.5 h-5 w-px" }), _jsx(ToolbarButton, { disabled: !controller.canUndo, title: labels.undo, onClick: controller.undo, children: _jsx(Undo2, { className: "size-3.5", strokeWidth: 1.8 }) }), _jsx(ToolbarButton, { disabled: !controller.canRedo, title: labels.redo, onClick: controller.redo, children: _jsx(Redo2, { className: "size-3.5", strokeWidth: 1.8 }) }), _jsx("span", { className: "bg-border/70 mx-0.5 h-5 w-px" }), _jsx(ToolbarButton, { title: labels.tidy, onClick: controller.tidy, children: _jsx(Wand2, { className: "size-3.5", strokeWidth: 1.8 }) }), stickyEnabled && controller.addAnnotation ? (_jsx(ToolbarButton, { title: labels.addNote, onClick: () => controller.addAnnotation?.(), children: _jsx(StickyNote, { className: "size-3.5", strokeWidth: 1.8 }) })) : null, _jsx(ToolbarButton, { active: showMinimap, title: showMinimap ? labels.minimapHide : labels.minimapShow, onClick: () => setMinimapPref(!showMinimap), children: _jsx(MapIcon, { className: "size-3.5", strokeWidth: 1.8 }) }), toolbarExtras ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border/70 mx-0.5 h-5 w-px" }), toolbarExtras] })) : null] }) })), showMinimap ? (_jsx(MiniMap, { pannable: true, zoomable: true, position: "bottom-left", className: "!bg-background/95 !border-border/60 !z-20 !rounded-md !border !shadow-md", nodeColor: "var(--border)", nodeStrokeColor: "var(--muted-foreground)", maskColor: "color-mix(in srgb, var(--muted) 45%, transparent)" })) : null, showMinimap && stickyController && stickyController.annotations.length > 0 ? (_jsx(Panel, { position: "bottom-left", className: "pointer-events-none !z-20", children: _jsx(MiniMapStickyOverlay, { annotations: stickyController.annotations }) })) : null, stickyController ? (_jsx(StickyNotesLayer, { controller: stickyController, labels: labels.stickyNotes })) : null, _jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1.4, color: "currentColor", className: "text-muted-foreground/35" }), _jsx(Controls, { showInteractive: false, position: "bottom-right", className: "!border-border/60 !bg-background/95 !z-20 !rounded-md !border !shadow-md" }), _jsx(FlowCollaboratorLayer, { collaborators: collaborators, testIdPrefix: collaboratorCursorTestIdPrefix })] }), insertEdgeId
+                ? renderInsertPicker(insertEdgeId, {
+                    onClose: () => setInsertEdgeId(null),
+                    onPick: (kind) => {
+                        insertNodeOnEdge(insertEdgeId, kind, titleForKind(kind));
+                        setInsertEdgeId(null);
+                    },
+                })
+                : null, dropAdd ? (_jsxs("div", { className: "absolute inset-0 z-20", role: "dialog", "aria-modal": "true", children: [_jsx("button", { type: "button", "aria-label": labels.closePicker, onClick: () => setDropAdd(null), className: "absolute inset-0 cursor-default" }), renderDropPicker(dropAdd, {
+                        onClose: () => setDropAdd(null),
+                        onPick: handleDropPick,
+                    })] })) : null] }));
+    return (_jsx(FlowEditorContext.Provider, { value: editorContext, children: rightPanel != null ? (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col xl:flex-row", children: [canvas, _jsx("div", { ref: sideRailRef, className: "contents", children: rightPanel })] })) : (canvas) }));
+}
+export function ToolbarButton({ active, disabled, title, onClick, children, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": title, "aria-pressed": active, disabled: disabled, onClick: onClick, className: cn('bg-background/95 text-muted-foreground shadow-sm', 'hover:text-foreground hover:border-foreground/25', active && 'text-primary border-primary/45 bg-primary/10'), children: children }) }), _jsx(TooltipContent, { children: title })] }));
+}

package/dist/flow/canvas/collaborator-layer.d.ts

@@ -0,0 +1,12 @@
+import type { FlowCollaborator } from './canvas-frame.js';
+/**
+ * Renders peer cursors and live node-drag ghosts. Peers broadcast pointer and
+ * drag positions in flow/world coordinates; this layer is a child of ReactFlow,
+ * so `useViewport()` gives it the live pan/zoom to project world → screen. That
+ * projection is what makes a peer's cursor land on the same node for everyone,
+ * regardless of how each viewer has panned or zoomed.
+ */
+export declare function FlowCollaboratorLayer({ collaborators, testIdPrefix, }: {
+    collaborators: readonly FlowCollaborator[];
+    testIdPrefix: string;
+}): import("react").JSX.Element | null;

package/dist/flow/canvas/collaborator-layer.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MousePointer2 } from 'lucide-react';
+import { useMemo } from 'react';
+import { useViewport } from 'reactflow';
+import { useSmoothedFlowPoints } from '../presence-motion.js';
+/**
+ * Renders peer cursors and live node-drag ghosts. Peers broadcast pointer and
+ * drag positions in flow/world coordinates; this layer is a child of ReactFlow,
+ * so `useViewport()` gives it the live pan/zoom to project world → screen. That
+ * projection is what makes a peer's cursor land on the same node for everyone,
+ * regardless of how each viewer has panned or zoomed.
+ */
+export function FlowCollaboratorLayer({ collaborators, testIdPrefix, }) {
+    const { x: panX, y: panY, zoom } = useViewport();
+    const motionTargets = useMemo(() => collaborators.map((peer) => ({ id: peer.id, point: peer.pointer ?? null })), [collaborators]);
+    const smoothedPoints = useSmoothedFlowPoints(motionTargets);
+    const projected = useMemo(() => collaborators.map((peer) => {
+        const world = smoothedPoints.get(peer.id) ?? peer.pointer ?? null;
+        const cursor = world ? { x: world.x * zoom + panX, y: world.y * zoom + panY } : null;
+        const drag = peer.drag
+            ? {
+                left: peer.drag.x * zoom + panX,
+                top: peer.drag.y * zoom + panY,
+                width: peer.drag.width * zoom,
+                height: peer.drag.height * zoom,
+            }
+            : null;
+        return { peer, cursor, drag };
+    }), [collaborators, smoothedPoints, panX, panY, zoom]);
+    if (projected.length === 0)
+        return null;
+    return (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [projected.map(({ peer, drag }) => drag ? (_jsx("div", { className: "absolute rounded-lg border-2 border-dashed", style: {
+                    transform: `translate(${drag.left}px, ${drag.top}px)`,
+                    width: drag.width,
+                    height: drag.height,
+                    borderColor: peer.color,
+                    backgroundColor: `${peer.color}1f`,
+                } }, `${peer.id}-drag`)) : null), projected.map(({ peer, cursor }) => cursor ? (_jsxs("div", { "data-testid": `${testIdPrefix}-${peer.id}`, className: "absolute", style: {
+                    transform: `translate(${cursor.x}px, ${cursor.y}px)`,
+                    color: peer.color,
+                }, children: [_jsx(MousePointer2, { className: "size-4 drop-shadow-sm", fill: "currentColor" }), _jsx("span", { className: "border-border/70 bg-background/90 text-foreground ml-3 inline-flex max-w-36 truncate rounded-md border px-1.5 py-0.5 text-[11px] shadow-sm", children: peer.name })] }, peer.id)) : null)] }));
+}

package/dist/flow/canvas/connector-edge.d.ts

@@ -0,0 +1,22 @@
+import { type EdgeProps } from 'reactflow';
+export declare function edgeLabelPosition(args: {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    midX: number;
+    midY: number;
+}): {
+    x: number;
+    y: number;
+};
+export type FlowConnectorEdgeProps = EdgeProps & {
+    active?: boolean;
+    /** Animate a drifting dash along the edge — the "current flowed here" replay cue. */
+    flow?: boolean;
+    label?: string | null;
+    insertLabel: string;
+    deleteLabel: string;
+    testIdPrefix?: string;
+};
+export declare function FlowConnectorEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, selected, active: activeProp, flow, label, insertLabel, deleteLabel, testIdPrefix, }: FlowConnectorEdgeProps): import("react").JSX.Element;

package/dist/flow/canvas/connector-edge.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from 'reactflow';
+import { Plus, X } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+import { useFlowEditor } from './editor-context.js';
+export function edgeLabelPosition(args) {
+    const { sourceX, sourceY, targetX, targetY, midX, midY } = args;
+    const dx = targetX - sourceX;
+    if (Math.abs(dx) < 140)
+        return { x: midX, y: midY };
+    const t = 0.28;
+    return {
+        x: sourceX + dx * t,
+        y: sourceY + (targetY - sourceY) * (t * 0.45),
+    };
+}
+export function FlowConnectorEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, selected, active: activeProp = false, flow = false, label, insertLabel, deleteLabel, testIdPrefix = 'flow-edge', }) {
+    const [edgePath, midX, midY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 8,
+    });
+    const editor = useFlowEditor();
+    const hovered = editor?.hoveredEdgeId === id;
+    const onHighlightedPath = editor?.highlightedEdgeIds.has(id) ?? false;
+    const active = activeProp || onHighlightedPath;
+    const emphasized = active || hovered || Boolean(selected);
+    const labelPos = edgeLabelPosition({ sourceX, sourceY, targetX, targetY, midX, midY });
+    const showLabel = Boolean(label) && !hovered;
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: edgePath, markerEnd: markerEnd, interactionWidth: 28, style: {
+                    stroke: emphasized ? 'var(--primary)' : 'currentColor',
+                    strokeWidth: selected ? 2 : emphasized ? 1.6 : 1.25,
+                    strokeDasharray: active || selected ? undefined : '4 4',
+                    opacity: emphasized ? 1 : 0.55,
+                } }), flow ? (_jsx("path", { d: edgePath, fill: "none", stroke: "var(--primary)", strokeWidth: 1.6, strokeLinecap: "round", strokeDasharray: "3 11", className: "flow-edge-current", style: { pointerEvents: 'none' } })) : null, showLabel && (_jsx(EdgeLabelRenderer, { children: _jsx("div", { style: {
+                        position: 'absolute',
+                        transform: `translate(-50%, -50%) translate(${labelPos.x}px, ${labelPos.y}px)`,
+                        pointerEvents: 'none',
+                    }, className: cn('rounded-sm px-1.5 py-0.5 font-mono text-[10px] leading-none tabular-nums', active || selected
+                        ? 'bg-primary/15 text-primary border-primary/30 border'
+                        : 'bg-background text-muted-foreground border-border/60 border'), children: label }) })), editor && hovered && !editor.replay && (_jsx(EdgeLabelRenderer, { children: _jsx("button", { type: "button", "data-testid": `${testIdPrefix}-insert-${id}`, "aria-label": insertLabel, title: insertLabel, onClick: (event) => {
+                        event.stopPropagation();
+                        editor.requestInsert(id);
+                    }, style: {
+                        position: 'absolute',
+                        transform: `translate(-50%, -50%) translate(${midX}px, ${midY - 16}px)`,
+                        pointerEvents: 'all',
+                    }, className: "nodrag nopan border-primary/50 bg-background text-primary hover:bg-primary hover:text-primary-foreground inline-flex size-5 items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Plus, { className: "size-3", strokeWidth: 2.2 }) }) })), editor && selected && (_jsx(EdgeLabelRenderer, { children: _jsx("button", { type: "button", "data-testid": `${testIdPrefix}-delete-${id}`, "aria-label": deleteLabel, title: deleteLabel, onClick: (event) => {
+                        event.stopPropagation();
+                        editor.deleteEdge(id);
+                    }, style: {
+                        position: 'absolute',
+                        transform: `translate(-50%, -50%) translate(${midX}px, ${midY + (hovered ? 16 : 0)}px)`,
+                        pointerEvents: 'all',
+                    }, className: "nodrag nopan border-destructive/50 bg-background text-destructive hover:bg-destructive inline-flex size-5 items-center justify-center rounded-full border shadow-sm transition-colors hover:text-white", children: _jsx(X, { className: "size-3", strokeWidth: 2.2 }) }) }))] }));
+}