@bian-womp/spark-workbench 0.3.87 → 0.3.89

package/lib/src/misc/WorkbenchCanvas.js

@@ -0,0 +1,669 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useImperativeHandle, useCallback, useEffect } from "react";
+import { ReactFlow, Background, Controls, MiniMap, BackgroundVariant, ReactFlowProvider, } from "@xyflow/react";
+import lod from "lodash";
+import { toReactFlow } from "./mapping";
+import { useWorkbenchBridge } from "./hooks";
+import { DefaultNode } from "./DefaultNode";
+import { DefaultEdge } from "./DefaultEdge";
+import { DefaultContextMenu } from "./context-menu/DefaultContextMenu";
+import { NodeContextMenu } from "./context-menu/NodeContextMenu";
+import { SelectionContextMenu } from "./context-menu/SelectionContextMenu";
+import { useWorkbenchContext } from "./context/WorkbenchContext";
+import { createNodeContextMenuHandlers, createSelectionContextMenuHandlers, createDefaultContextMenuHandlers, getBakeableOutputs, } from "./context-menu/ContextMenuHelpers";
+import { KeyboardShortcutToast, useKeyboardShortcutToast } from "./KeyboardShortcutToast";
+import SelectionActiveSync from "./SelectionActiveSync";
+export const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
+    const { showValues, toString, toElement, getDefaultNodeSize, reactFlowProps, children } = props;
+    const { wb, handlesMap, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
+    const nodeValidation = validationByNode;
+    const edgeValidation = validationByEdge.errors;
+    const [historyState, setHistoryState] = useState(wb.getHistory());
+    const prevNodesRef = useRef([]);
+    const prevEdgesRef = useRef([]);
+    function retainStabilityById(prev, next, isSame) {
+        if (prev.length === 0)
+            return next;
+        const map = new Map();
+        for (const p of prev)
+            map.set(p.id, p);
+        const out = new Array(next.length);
+        for (let i = 0; i < next.length; i++) {
+            const n = next[i];
+            const p = map.get(n.id);
+            out[i] = p && isSame(p, n) ? p : n;
+        }
+        return out;
+    }
+    const isSameNode = (a, b) => {
+        // Compare the parts that affect rendering
+        const pick = (n) => ({
+            position: n.position,
+            type: n.type,
+            selected: n.selected,
+            measured: n.measured,
+            data: n.data && {
+                typeId: n.data.typeId,
+                handles: n.data.handles,
+                inputHandles: n.data.inputHandles,
+                outputHandles: n.data.outputHandles,
+                showValues: n.data.showValues,
+                inputValues: n.data.inputValues,
+                outputValues: n.data.outputValues,
+                status: n.data.status,
+                validation: n.data.validation,
+                inputConnected: n.data.inputConnected,
+                custom: n.data.custom,
+            },
+        });
+        return lod.isEqual(pick(a), pick(b));
+    };
+    const isSameEdge = (a, b) => {
+        const pick = (e) => ({
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle,
+            targetHandle: e.targetHandle,
+            selected: e.selected,
+            animated: e.animated,
+            style: e.style,
+            label: e.label,
+            type: e.type,
+            data: e.data && {
+                edgeTypeId: e.data.edgeTypeId,
+                isRunning: e.data.isRunning,
+                hasError: e.data.hasError,
+                isInvalid: e.data.isInvalid,
+                isMissing: e.data.isMissing,
+                custom: e.data.custom,
+            },
+        });
+        return lod.isEqual(pick(a), pick(b));
+    };
+    // Expose imperative API
+    const rfInstanceRef = useRef(null);
+    const containerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        fitView: () => {
+            try {
+                rfInstanceRef.current?.fitView();
+            }
+            catch (err) {
+                console.warn("Failed to fit view", err);
+            }
+        },
+        setViewport: (viewport) => {
+            if (rfInstanceRef.current) {
+                rfInstanceRef.current.setViewport(lod.clone(viewport));
+            }
+        },
+    }), []);
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete } = useWorkbenchBridge(wb, handlesMap);
+    const ui = useMemo(() => wb.getUI(), [wb, uiVersion]);
+    const { nodeTypes, resolveNodeType } = useMemo(() => {
+        // Build nodeTypes map using UI extension registry
+        const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
+        const allNodeRenderers = ui.getAllNodeRenderers();
+        for (const typeId of Object.keys(allNodeRenderers)) {
+            custom.set(typeId, allNodeRenderers[typeId]);
+        }
+        const types = {
+            "spark-default": DefaultNode,
+            default: DefaultNode,
+        };
+        for (const [typeId, comp] of custom.entries()) {
+            types[`spark-${typeId}`] = comp;
+        }
+        const resolver = (nodeTypeId) => (custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default");
+        return { nodeTypes: types, resolveNodeType: resolver };
+        // Include uiVersion to recompute when custom renderers are registered
+        // Include registryVersion to recompute when registry enums/types change
+    }, [wb, wb.registry, registryVersion, ui, uiVersion]);
+    const edgeTypes = useMemo(() => {
+        // Use default edge renderer override if registered, otherwise use DefaultEdge
+        const customEdgeRenderer = ui.getEdgeRenderer();
+        return { default: customEdgeRenderer || DefaultEdge };
+    }, [uiVersion, ui]);
+    // Track selection state to prevent unnecessary re-renders
+    const [selection, setSelection] = useState(() => wb.getSelection());
+    useEffect(() => {
+        const off = wb.on("selectionChanged", (sel) => {
+            setSelection({ nodes: sel.nodes, edges: sel.edges });
+        });
+        return () => off();
+    }, [wb]);
+    const rfData = useMemo(() => {
+        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
+            showValues,
+            inputs: inputsMap,
+            inputDefaults: inputDefaultsMap,
+            outputs: outputsMap,
+            handles: handlesMap,
+            resolveNodeType,
+            toString,
+            toElement,
+            nodeStatus,
+            edgeStatus,
+            nodeValidation,
+            edgeValidation,
+            selectedNodeIds: new Set(selection.nodes),
+            selectedEdgeIds: new Set(selection.edges),
+            getDefaultNodeSize,
+            ui,
+            customData: wb.getCustomData(),
+        });
+        // Retain references for unchanged items
+        const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
+        const stableEdges = retainStabilityById(prevEdgesRef.current, out.edges, isSameEdge);
+        // Debug: log updates/additions/removals (use value equality, not reference)
+        try {
+            const prevNodeIds = new Set(prevNodesRef.current.map((n) => n.id));
+            const nextNodeIds = new Set(out.nodes.map((n) => n.id));
+            const addedNodeIds = out.nodes.filter((n) => !prevNodeIds.has(n.id)).map((n) => n.id);
+            const removedNodeIds = prevNodesRef.current.filter((n) => !nextNodeIds.has(n.id)).map((n) => n.id);
+            const prevNodeMap = new Map(prevNodesRef.current.map((n) => [n.id, n]));
+            const changedNodeIds = out.nodes
+                .filter((n) => {
+                const p = prevNodeMap.get(n.id);
+                return p ? !isSameNode(p, n) : false;
+            })
+                .map((n) => n.id);
+            // Detect handle updates (ids/length changes) for targeted debug
+            const toIds = (arr) => Array.isArray(arr)
+                ? arr.map((h) => (h && typeof h === "object" && "id" in h ? String(h.id) : "")).filter(Boolean)
+                : [];
+            const handlesEqual = (a, b) => {
+                const aIds = toIds(a);
+                const bIds = toIds(b);
+                if (aIds.length !== bIds.length)
+                    return false;
+                for (let i = 0; i < aIds.length; i++) {
+                    if (aIds[i] !== bIds[i])
+                        return false;
+                }
+                return true;
+            };
+            const handleChanged = out.nodes
+                .filter((n) => {
+                const p = prevNodeMap.get(n.id);
+                if (!p)
+                    return false;
+                const inChanged = !handlesEqual(p.data?.inputHandles, n.data?.inputHandles);
+                const outChanged = !handlesEqual(p.data?.outputHandles, n.data?.outputHandles);
+                return inChanged || outChanged;
+            })
+                .map((n) => n.id);
+            const prevEdgeIds = new Set(prevEdgesRef.current.map((e) => e.id));
+            const nextEdgeIds = new Set(out.edges.map((e) => e.id));
+            const addedEdgeIds = out.edges.filter((e) => !prevEdgeIds.has(e.id)).map((e) => e.id);
+            const removedEdgeIds = prevEdgesRef.current.filter((e) => !nextEdgeIds.has(e.id)).map((e) => e.id);
+            const prevEdgeMap = new Map(prevEdgesRef.current.map((e) => [e.id, e]));
+            const changedEdgeIds = out.edges
+                .filter((e) => {
+                const p = prevEdgeMap.get(e.id);
+                return p ? !isSameEdge(p, e) : false;
+            })
+                .map((e) => e.id);
+            if (addedNodeIds.length || removedNodeIds.length || changedNodeIds.length || handleChanged.length) {
+                // eslint-disable-next-line no-console
+                console.debug("[WorkbenchCanvas] node updates", {
+                    added: addedNodeIds,
+                    removed: removedNodeIds,
+                    changed: changedNodeIds,
+                    handleChanged,
+                });
+            }
+            if (addedEdgeIds.length || removedEdgeIds.length || changedEdgeIds.length) {
+                // eslint-disable-next-line no-console
+                console.debug("[WorkbenchCanvas] edge updates", {
+                    added: addedEdgeIds,
+                    removed: removedEdgeIds,
+                    changed: changedEdgeIds,
+                });
+            }
+        }
+        catch { }
+        prevNodesRef.current = stableNodes;
+        prevEdgesRef.current = stableEdges;
+        return { nodes: stableNodes, edges: stableEdges };
+    }, [
+        showValues,
+        inputsMap,
+        inputDefaultsMap,
+        outputsMap,
+        handlesMap,
+        valuesTick,
+        toString,
+        toElement,
+        nodeStatus,
+        edgeStatus,
+        nodeValidation,
+        edgeValidation,
+        resolveNodeType,
+        selection,
+        ui,
+        getDefaultNodeSize,
+        wb,
+        uiVersion,
+    ]);
+    const [menuState, setMenuState] = useState(null);
+    // Compute the rectangular screen-space bounds of the current selection
+    const getSelectionScreenBounds = () => {
+        if (typeof document === "undefined")
+            return null;
+        const selection = wb.getSelection();
+        if (!selection.nodes.length)
+            return null;
+        let bounds = null;
+        for (const nodeId of selection.nodes) {
+            const el = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            if (!bounds) {
+                bounds = {
+                    left: rect.left,
+                    top: rect.top,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                };
+            }
+            else {
+                bounds.left = Math.min(bounds.left, rect.left);
+                bounds.top = Math.min(bounds.top, rect.top);
+                bounds.right = Math.max(bounds.right, rect.right);
+                bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+            }
+        }
+        return bounds;
+    };
+    const onContextMenu = (e) => {
+        e.preventDefault();
+        const selection = wb.getSelection();
+        const isSingleNodeSelected = selection.nodes.length === 1;
+        const hasMultipleNodesSelected = selection.nodes.length > 1;
+        // Determine if right-clicked over a node by hit-testing
+        const target = e.target?.closest(".react-flow__node");
+        if (target) {
+            // Resolve node id from data-id attribute React Flow sets
+            const nodeId = target.getAttribute("data-id");
+            if (!nodeId)
+                return;
+            const isSelected = selection.nodes.includes(nodeId);
+            if (isSelected && !isSingleNodeSelected) {
+                // Right-clicked on a node that's part of multi-selection - show selection menu
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
+                return;
+            }
+            else {
+                // Right-clicked on a non-selected node - show node menu
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
+                return;
+            }
+        }
+        // Check if right-clicked on a selected edge
+        const edgeTarget = e.target?.closest(".react-flow__edge");
+        if (edgeTarget) {
+            const edgeId = edgeTarget.getAttribute("data-id");
+            const isSelected = edgeId && selection.edges.includes(edgeId);
+            if (isSelected && isSingleNodeSelected) {
+                // Right-clicked on an edge, but only one node is selected - show node menu
+                const nodeId = selection.nodes[0];
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
+                return;
+            }
+            else if (isSelected) {
+                // Right-clicked on a selected edge with multiple nodes - show selection menu
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
+                return;
+            }
+        }
+        // Check if the cursor is inside the rectangular bounds of the current selection
+        // (for multi-selection when right-clicking on empty space within selection bounds)
+        const selectionBounds = getSelectionScreenBounds();
+        if (selectionBounds && hasMultipleNodesSelected) {
+            const { left, top, right, bottom } = selectionBounds;
+            if (e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom) {
+                // If only one node is selected (even with edges), show node menu for empty space clicks
+                if (isSingleNodeSelected) {
+                    const nodeId = selection.nodes[0];
+                    setMenuState({
+                        type: "node",
+                        menuPos: { x: e.clientX, y: e.clientY },
+                        nodeId,
+                    });
+                    return;
+                }
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
+                return;
+            }
+        }
+        // Right-clicked on empty space with no selection - show default menu
+        setMenuState({
+            type: "default",
+            menuPos: { x: e.clientX, y: e.clientY },
+        });
+    };
+    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
+    const onCloseMenu = useCallback(() => {
+        setMenuState(null);
+    }, []);
+    const onCloseNodeMenu = useCallback(() => {
+        setMenuState(null);
+    }, []);
+    const onCloseSelectionMenu = useCallback(() => {
+        setMenuState(null);
+    }, []);
+    useEffect(() => {
+        const off = wb.on("historyChanged", (event) => {
+            setHistoryState(event.history);
+        });
+        return () => off();
+    }, [wb]);
+    const nodeIds = useMemo(() => Array.from(wb.registry.nodes.keys()), [wb.registry, registryVersion]);
+    const defaultContextMenuHandlers = useMemo(() => {
+        // Get storage from override or use workbench's internal storage
+        const storage = overrides?.getCopiedDataStorage
+            ? overrides.getCopiedDataStorage()
+            : {
+                get: () => wb.getCopiedData(),
+                set: (data) => wb.setCopiedData(data),
+            };
+        const baseHandlers = createDefaultContextMenuHandlers(addNodeAt, onCloseMenu, (position) => {
+            const data = storage.get();
+            if (!data)
+                return;
+            wb.pasteCopiedData(data, position, { commit: true, reason: "paste" });
+            onCloseMenu();
+        }, runner, () => storage.get(), () => storage.set(null), historyState, wb);
+        if (overrides?.getDefaultContextMenuHandlers) {
+            return overrides.getDefaultContextMenuHandlers(wb, baseHandlers);
+        }
+        return baseHandlers;
+    }, [addNodeAt, onCloseMenu, overrides, wb, runner, historyState]);
+    const selectionContextMenuHandlers = useMemo(() => {
+        // Get storage from override or use workbench's internal storage
+        const storage = overrides?.getCopiedDataStorage
+            ? overrides.getCopiedDataStorage()
+            : {
+                get: () => wb.getCopiedData(),
+                set: (data) => wb.setCopiedData(data),
+            };
+        const baseHandlers = createSelectionContextMenuHandlers(wb, onCloseSelectionMenu, overrides?.getDefaultNodeSize, (data) => {
+            storage.set(data);
+        }, runner);
+        if (overrides?.getSelectionContextMenuHandlers) {
+            const selection = wb.getSelection();
+            return overrides.getSelectionContextMenuHandlers(wb, selection, baseHandlers, {
+                getDefaultNodeSize: overrides.getDefaultNodeSize,
+            });
+        }
+        return baseHandlers;
+    }, [wb, runner, overrides, onCloseSelectionMenu]);
+    const nodeContextMenuHandlers = useMemo(() => {
+        if (menuState?.type !== "node")
+            return null;
+        const nodeAtMenu = menuState.nodeId;
+        // Get storage from override or use workbench's internal storage
+        const storage = overrides?.getCopiedDataStorage
+            ? overrides.getCopiedDataStorage()
+            : {
+                get: () => wb.getCopiedData(),
+                set: (data) => wb.setCopiedData(data),
+            };
+        const baseHandlers = createNodeContextMenuHandlers(nodeAtMenu, wb, runner, wb.registry, outputsMap, outputTypesMap, onCloseNodeMenu, overrides?.getDefaultNodeSize, (data) => {
+            storage.set(data);
+        }, runNode, runFromHere);
+        if (overrides?.getNodeContextMenuHandlers) {
+            return overrides.getNodeContextMenuHandlers(wb, nodeAtMenu, baseHandlers);
+        }
+        return baseHandlers;
+    }, [
+        menuState,
+        wb,
+        runner,
+        wb.registry,
+        registryVersion,
+        outputsMap,
+        outputTypesMap,
+        onCloseNodeMenu,
+        overrides?.getDefaultNodeSize,
+        overrides?.getNodeContextMenuHandlers,
+        overrides?.getCopiedDataStorage,
+    ]);
+    const bakeableOutputs = useMemo(() => {
+        if (menuState?.type !== "node")
+            return [];
+        return getBakeableOutputs(menuState.nodeId, wb, wb.registry, outputTypesMap);
+    }, [menuState, wb, wb.registry, registryVersion, outputTypesMap]);
+    // Keyboard shortcuts configuration
+    const keyboardShortcutEnables = useMemo(() => ({
+        undo: true,
+        redo: true,
+        copy: true,
+        paste: true,
+        duplicate: true,
+        selectAll: true,
+        ...(overrides?.enableKeyboardShortcuts ?? {}),
+    }), [overrides?.enableKeyboardShortcuts]);
+    const isShortcutEnabled = useCallback((action) => keyboardShortcutEnables[action] !== false, [keyboardShortcutEnables]);
+    const hasEnabledKeyboardShortcuts = useMemo(() => Object.values(keyboardShortcutEnables).some(Boolean), [keyboardShortcutEnables]);
+    const keyboardShortcuts = useMemo(() => overrides?.keyboardShortcuts || {
+        undo: "⌘/Ctrl + Z",
+        redo: "⌘/Ctrl + Shift + Z",
+        copy: "⌘/Ctrl + C",
+        paste: "⌘/Ctrl + V",
+        duplicate: "⌘/Ctrl + E",
+        selectAll: "⌘/Ctrl + A",
+        delete: "Delete",
+    }, [overrides?.keyboardShortcuts]);
+    // Toast notification for keyboard shortcuts
+    const { toast, showToast, hideToast } = useKeyboardShortcutToast();
+    // Keyboard shortcut handler
+    useEffect(() => {
+        if (!hasEnabledKeyboardShortcuts)
+            return;
+        const handleKeyDown = async (e) => {
+            // Check if target is inside WorkbenchCanvas container
+            const target = e.target;
+            if (!containerRef.current || !(containerRef.current.contains(target) || containerRef.current == target)) {
+                return;
+            }
+            // Ignore if typing in input/textarea
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+                return;
+            }
+            // Detect Mac platform using userAgent (navigator.platform is deprecated)
+            const isMac = typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac");
+            const modKey = isMac ? e.metaKey : e.ctrlKey;
+            const key = e.key.toLowerCase();
+            // Undo: Cmd/Ctrl + Z
+            if (modKey && key === "z" && !e.shiftKey && !e.altKey) {
+                if (!isShortcutEnabled("undo"))
+                    return;
+                e.preventDefault();
+                if (runner &&
+                    "onUndo" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onUndo &&
+                    defaultContextMenuHandlers.canUndo) {
+                    if (defaultContextMenuHandlers.canUndo) {
+                        const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                        showToast(`Undo (${modKeyLabel} + Z)`);
+                        defaultContextMenuHandlers.onUndo();
+                    }
+                }
+                return;
+            }
+            // Redo: Cmd/Ctrl + Shift + Z
+            if (modKey && e.shiftKey && key === "z" && !e.altKey) {
+                if (!isShortcutEnabled("redo"))
+                    return;
+                e.preventDefault();
+                if (runner &&
+                    "onRedo" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onRedo &&
+                    defaultContextMenuHandlers.canRedo) {
+                    if (defaultContextMenuHandlers.canRedo) {
+                        const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                        showToast(`Redo (${modKeyLabel} + Shift + Z)`);
+                        defaultContextMenuHandlers.onRedo();
+                    }
+                }
+                return;
+            }
+            // Copy: Cmd/Ctrl + C
+            if (modKey && key === "c" && !e.shiftKey && !e.altKey) {
+                if (!isShortcutEnabled("copy"))
+                    return;
+                const selection = wb.getSelection();
+                if (selection.nodes.length > 0 || selection.edges.length > 0) {
+                    e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Copy (${modKeyLabel} + C)`);
+                    // If single node selected, use node context menu handler; otherwise use selection handler
+                    if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onCopy) {
+                        nodeContextMenuHandlers.onCopy();
+                    }
+                    else if (selectionContextMenuHandlers.onCopy) {
+                        selectionContextMenuHandlers.onCopy();
+                    }
+                }
+                return;
+            }
+            // Duplicate: Cmd/Ctrl + E
+            if (modKey && key === "e" && !e.shiftKey && !e.altKey) {
+                if (!isShortcutEnabled("duplicate"))
+                    return;
+                const selection = wb.getSelection();
+                if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onDuplicate) {
+                    // Single node selected - use node context menu handler
+                    e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Duplicate (${modKeyLabel} + E)`);
+                    nodeContextMenuHandlers.onDuplicate();
+                }
+                else if (selection.nodes.length > 1 && selectionContextMenuHandlers.onDuplicate) {
+                    // Multiple nodes selected - use selection context menu handler
+                    e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Duplicate (${modKeyLabel} + E)`);
+                    selectionContextMenuHandlers.onDuplicate();
+                }
+                return;
+            }
+            // Paste: Cmd/Ctrl + V
+            if (modKey && key === "v" && !e.shiftKey && !e.altKey) {
+                if (!isShortcutEnabled("paste"))
+                    return;
+                e.preventDefault();
+                if ("hasPasteData" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.hasPasteData &&
+                    defaultContextMenuHandlers.hasPasteData() &&
+                    "onPaste" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onPaste) {
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Paste (${modKeyLabel} + V)`);
+                    const center = rfInstanceRef.current?.screenToFlowPosition({
+                        x: window.innerWidth / 2,
+                        y: window.innerHeight / 2,
+                    }) || { x: 0, y: 0 };
+                    defaultContextMenuHandlers.onPaste(center);
+                }
+                return;
+            }
+            // Select All: Cmd/Ctrl + A
+            if (modKey && key === "a" && !e.shiftKey && !e.altKey) {
+                if (!isShortcutEnabled("selectAll"))
+                    return;
+                e.preventDefault();
+                if (defaultContextMenuHandlers.onSelectAll) {
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Select All (${modKeyLabel} + A)`);
+                    defaultContextMenuHandlers.onSelectAll();
+                }
+                return;
+            }
+            // Note: Delete/Backspace is handled by ReactFlow's deleteKeyCode prop
+            // which triggers onNodesDelete/onEdgesDelete, so we don't need to handle it here
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        hasEnabledKeyboardShortcuts,
+        wb,
+        runner,
+        defaultContextMenuHandlers,
+        selectionContextMenuHandlers,
+        nodeContextMenuHandlers,
+        rfInstanceRef,
+        showToast,
+        isShortcutEnabled,
+    ]);
+    // Get custom renderers from UI extension registry (reactive to uiVersion changes)
+    const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, SelectionContextMenuRenderer, connectionLineRenderer, } = useMemo(() => {
+        return {
+            BackgroundRenderer: ui.getBackgroundRenderer(),
+            MinimapRenderer: ui.getMinimapRenderer(),
+            ControlsRenderer: ui.getControlsRenderer(),
+            DefaultContextMenuRenderer: ui.getDefaultContextMenuRenderer(),
+            NodeContextMenuRenderer: ui.getNodeContextMenuRenderer(),
+            SelectionContextMenuRenderer: ui.getSelectionContextMenuRenderer(),
+            connectionLineRenderer: ui.getConnectionLineRenderer(),
+        };
+    }, [ui, uiVersion]);
+    const onMoveEnd = useCallback(() => {
+        if (rfInstanceRef.current) {
+            const viewport = rfInstanceRef.current.getViewport();
+            const viewportData = lod.clone(viewport);
+            wb.setViewport(viewportData);
+        }
+    }, [wb]);
+    // Sync viewport when workbench fires graphUiChanged with viewport event
+    useEffect(() => {
+        const off = wb.on("graphUiChanged", (event) => {
+            if (event.change?.type === "viewport" && rfInstanceRef.current && event.init) {
+                const viewport = wb.getViewport();
+                if (viewport) {
+                    rfInstanceRef.current.setViewport(lod.clone(viewport));
+                }
+            }
+        });
+        return () => off();
+    }, [wb]);
+    const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
+    return (_jsxs("div", { ref: containerRef, className: "w-full h-full relative overflow-hidden", tabIndex: 0, onContextMenu: onContextMenu, children: [_jsxs(ReactFlowProvider, { children: [_jsxs(ReactFlow, { ...restReactFlowProps, nodes: rfData.nodes, edges: rfData.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+                            rfInstanceRef.current = inst;
+                            const savedViewport = wb.getViewport();
+                            if (savedViewport) {
+                                inst.setViewport(lod.clone(savedViewport));
+                            }
+                            if (userOnInit) {
+                                userOnInit(inst);
+                            }
+                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [children, BackgroundRenderer ? (_jsx(BackgroundRenderer, {})) : (_jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? _jsx(MinimapRenderer, {}) : _jsx(MiniMap, {}), ControlsRenderer ? _jsx(ControlsRenderer, {}) : _jsx(Controls, {}), menuState?.type === "default" &&
+                                (DefaultContextMenuRenderer ? (_jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts })) : (_jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
+                                nodeContextMenuHandlers &&
+                                (NodeContextMenuRenderer ? (_jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, keyboardShortcuts: keyboardShortcuts })) : (_jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
+                                (SelectionContextMenuRenderer ? (_jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (_jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), _jsx(SelectionActiveSync, { selection: selection })] }), toast && _jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id)] }));
+});
+export const WorkbenchCanvas = WorkbenchCanvasComponent;
+//# sourceMappingURL=WorkbenchCanvas.js.map