@foresthubai/workflow-builder 0.3.0

package/src/Canvas.tsx

@@ -0,0 +1,261 @@
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  Background,
+  BackgroundVariant,
+  Connection,
+  Controls,
+  EdgeChange,
+  MiniMap,
+  Node,
+  NodeChange,
+  OnSelectionChangeFunc,
+  ReactFlow,
+  ReactFlowProvider,
+  SelectionMode,
+  useNodesInitialized,
+  useReactFlow,
+} from "@xyflow/react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useResolvedTheme } from "./hooks/useResolvedTheme";
+
+import { NodeCategory, NodeDefinition, NodeData } from "@foresthubai/workflow-core/node";
+import { isValidConnection as validateConnection } from "./utils/connectionRules";
+import { getOrCreateCanvasStore } from "./stores/canvasStore";
+import { useEditorStore } from "./stores/editorStore";
+import { nodeTypes, edgeTypes } from "./graph/reactFlowRegistry";
+import { isReadOnly } from "./WorkflowBuilder";
+
+interface CanvasProps {
+  canvasId: string;
+  onConnect: (connection: Connection) => void;
+  onSelectionChange: OnSelectionChangeFunc;
+  onSelectionStart: () => void;
+  onSelectionStop: () => void;
+  onPaneClick: (event: React.MouseEvent) => void;
+  onAddNode: (nodeType: NodeDefinition, position?: { x: number; y: number }) => void;
+  onNodeDragStart: (event: React.MouseEvent, node: Node<NodeData>) => void;
+  viewportCenterRef: React.MutableRefObject<(() => { x: number; y: number }) | null>;
+}
+
+// Inner component that uses useReactFlow - must be inside ReactFlowProvider
+const CanvasArea = ({
+  canvasId,
+  onConnect,
+  onSelectionChange,
+  onSelectionStart,
+  onSelectionStop,
+  onPaneClick,
+  onAddNode,
+  onNodeDragStart,
+  viewportCenterRef,
+}: CanvasProps) => {
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const resolvedTheme = useResolvedTheme();
+  const { screenToFlowPosition, getViewport, fitView } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+
+  // Expose viewport center calculation to parent via ref so new nodes can be dropped there.
+  useEffect(() => {
+    viewportCenterRef.current = () => {
+      const container = document.querySelector(".react-flow");
+      if (!container) return { x: 250, y: 100 };
+      const { width, height } = container.getBoundingClientRect();
+      const { x, y, zoom } = getViewport();
+      // Offset by approximate half-node size so the node appears centered, not top-left aligned
+      return {
+        x: (-x + width / 2) / zoom - 90,
+        y: (-y + height / 2) / zoom - 50,
+      };
+    };
+  }, [getViewport, viewportCenterRef]);
+
+  // Get the independent store for this canvas - direct top-level access
+  const useStore = getOrCreateCanvasStore(canvasId);
+  const nodes = useStore((s) => s.nodes);
+  const edges = useStore((s) => s.edges);
+  const setNodes = useStore((s) => s.setNodes);
+  const setEdges = useStore((s) => s.setEdges);
+  const setViewport = useStore((s) => s.setViewport);
+
+  // This component remounts per canvas (key={canvasId} in BuilderLayout), so ReactFlow
+  // starts cold on every tab switch. Read the stored viewport ONCE at mount, non-reactively
+  // (a reactive read would re-render on every pan). Present → restore via defaultViewport so
+  // the FIRST painted frame is already correct. Absent (first visit) → fit once nodes are
+  // measured (effect below).
+  const initialViewport = useRef(useStore.getState().viewport).current;
+
+  // A first visit has nothing to restore, so the fit must run post-mount and would otherwise
+  // paint the default {0,0,1} frame first and jump to the fit on the next frame. Keep the
+  // canvas hidden until that fit lands, then reveal the already-correct frame. A restored
+  // viewport is right on frame 1, so it starts visible — only the first-visit fit is gated.
+  const [ready, setReady] = useState(initialViewport != null);
+
+  useEffect(() => {
+    if (ready || initialViewport != null) return;
+    // An empty canvas has nothing to fit — and useNodesInitialized stays false forever with
+    // zero nodes — so reveal at the default viewport instead of staying hidden (which would
+    // blank the canvas: no background, can't drop nodes in).
+    if (nodes.length === 0) {
+      setReady(true);
+      return;
+    }
+    if (!nodesInitialized) return;
+    // fitView updates ReactFlow's viewport, but the transform paints ONE FRAME LATER than this
+    // call (measured). Revealing now would show one frame at the identity viewport before the
+    // fit lands — the twitch. So fit now, then reveal on the next frame, once the transform has
+    // painted. Seed the store so re-entering this canvas restores the view instead of refitting.
+    fitView({ padding: 0.15, maxZoom: 1 });
+    const raf = requestAnimationFrame(() => {
+      setViewport(getViewport());
+      setReady(true);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [ready, initialViewport, nodes.length, nodesInitialized, fitView, getViewport, setViewport]);
+
+  // Function to determine node color for MiniMap (uses ReactFlow node types, not domain NodeType)
+  const nodeColor = (node: Node) => {
+    switch (node.type) {
+      case NodeCategory.Trigger:
+        return "hsl(var(--node-trigger))";
+      case NodeCategory.Tool:
+        return "hsl(var(--node-tool))";
+      case NodeCategory.AI:
+        return "hsl(var(--node-agent))";
+      default:
+        return "hsl(var(--muted))";
+    }
+  };
+
+  // ReactFlow change handlers - apply changes directly to store
+  const onNodesChange = useCallback(
+    (changes: NodeChange<Node<NodeData>>[]) => {
+      setNodes((nds) => applyNodeChanges(changes, nds));
+    },
+    [setNodes],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setEdges((eds) => applyEdgeChanges(changes, eds) as typeof eds);
+    },
+    [setEdges],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+
+      if (!onAddNode || readOnly) return;
+
+      try {
+        const dragData = JSON.parse(event.dataTransfer.getData("application/json"));
+        // Convert screen coordinates to flow coordinates (accounting for pan/zoom)
+        const position = screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+
+        onAddNode(dragData.nodeDef, position);
+      } catch (error) {
+        console.error("Failed to parse node data:", error);
+      }
+    },
+    [onAddNode, screenToFlowPosition, readOnly],
+  );
+
+  const handleDragOver = (event: React.DragEvent) => {
+    if (readOnly) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  };
+
+  // Prevent browser middle-click auto-scroll which causes viewport jumps
+  const handleMouseDownCapture = (e: React.MouseEvent) => {
+    if (e.button === 1) {
+      e.preventDefault();
+    }
+  };
+
+  const handleAuxClick = (e: React.MouseEvent) => {
+    if (e.button === 1) {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    // Gate the first-visit fit with opacity, NOT visibility/display:
+    //  - visibility:hidden is overridden by ReactFlow, which sets visibility:visible on each
+    //    measured node, so the nodes stay on screen and you still see the fit jump.
+    //  - display:none removes layout boxes, so nodes never measure and the fit can't compute.
+    // opacity applies to the whole subtree as a group (children can't override it) yet keeps
+    // layout intact, so measurement/fitView work while it's invisible.
+    <div className="w-full h-full" style={{ opacity: ready ? 1 : 0 }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        isValidConnection={(c) =>
+          !!validateConnection(c.source, c.target, c.sourceHandle, c.targetHandle, nodes, edges)
+        }
+        onPaneClick={onPaneClick}
+        onNodeDragStart={onNodeDragStart}
+        onSelectionChange={onSelectionChange}
+        onSelectionStart={onSelectionStart}
+        onSelectionEnd={onSelectionStop}
+        onMoveEnd={(_, vp) => setViewport(vp)}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        defaultViewport={initialViewport ?? undefined}
+        selectionOnDrag={!readOnly}
+        panOnDrag={[1, 2]}
+        selectionMode={SelectionMode.Partial}
+        selectNodesOnDrag={false}
+        nodesConnectable={!readOnly}
+        nodesDraggable={!readOnly}
+        zoomOnScroll={true}
+        zoomOnPinch={true}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        deleteKeyCode={null} // Disable delete controlled by react flow itself
+        onContextMenu={(e) => e.preventDefault()}
+        onMouseDownCapture={handleMouseDownCapture}
+        onAuxClick={handleAuxClick}
+        colorMode={resolvedTheme}
+        style={{ "--xy-background-color": "hsl(var(--canvas-background))" } as React.CSSProperties}
+      >
+        <Background
+          variant={BackgroundVariant.Dots}
+          color="hsl(var(--muted-foreground))"
+          gap={24}
+          size={1.5}
+          className="opacity-40"
+        />
+        <Controls className="glass-forest-panel !border !shadow-lg [&_button]:glass-forest-button [&_button]:!text-foreground hover:[&_button]:!scale-105" />
+        <MiniMap
+          nodeColor={nodeColor}
+          className="glass-forest-panel !border !shadow-lg"
+          maskColor="hsl(var(--primary) / 0.15)"
+          nodeBorderRadius={12}
+          nodeStrokeWidth={2}
+          style={{ width: 120, height: 80 }}
+        />
+      </ReactFlow>
+    </div>
+  );
+};
+
+// Wrapper component that provides ReactFlowProvider context
+const Canvas = (props: CanvasProps) => {
+  return (
+    <div className="w-full h-full overflow-hidden overscroll-contain">
+      <ReactFlowProvider>
+        <CanvasArea {...props} />
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default Canvas;

package/src/CanvasEditor.tsx

@@ -0,0 +1,142 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Connection, Node, OnSelectionChangeFunc } from "@xyflow/react";
+import type { NodeDefinition, NodeData } from "@foresthubai/workflow-core/node";
+import { getPorts } from "@foresthubai/workflow-core/node";
+import { getCompatibleNodeDefs } from "./utils/connectionRules";
+
+import Canvas from "./Canvas";
+import { NodePickerDialog } from "./dialogs/NodePickerDialog";
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "./stores/canvasStore";
+import type { PortActionDetail } from "./graph/PortHandle";
+
+/**
+ * The per-canvas editing surface. Wraps {@link Canvas} (the ReactFlow
+ * primitive) with the popup state and viewport-center machinery that has
+ * to remount when the user switches canvases.
+ *
+ * Mounted with `key={canvasId}` by {@link BuilderLayout} — when the active
+ * canvas changes, this component fully remounts so port-popup, selection-
+ * drag, and the viewport-center ref all reset cleanly without imperative
+ * teardown.
+ *
+ * Graph mutations, history, and keyboard handling live one level up in
+ * BuilderLayout so they can drive the sidebar and right panel siblings.
+ */
+export interface CanvasEditorProps {
+  canvasId: string;
+
+  /** Populated by Canvas/ReactFlow on mount; read by sidebar's click-to-add. */
+  viewportCenterRef: MutableRefObject<(() => { x: number; y: number }) | null>;
+
+  /** Node-palette registry for the contextual port-plus picker. */
+  nodeDefinitions: NodeDefinition[];
+
+  // Event handlers wired by BuilderLayout
+  onConnect: (connection: Connection) => void;
+  onAddNode: (nodeDef: NodeDefinition, position?: { x: number; y: number }) => string | null | undefined;
+  onAddNodeAndConnect: (
+    nodeDef: NodeDefinition,
+    position: { x: number; y: number },
+    connection: { source: string; sourceHandle: string; target: string; targetHandle: string },
+  ) => string | null | undefined;
+  onSelectionChange: OnSelectionChangeFunc;
+  onPaneClick: () => void;
+  onNodeDragStart: (event: React.MouseEvent, node: Node<NodeData>) => void;
+
+  // Selection-drag flag (lifted to BuilderLayout so the right panel can read it)
+  setSelectionDrag: Dispatch<SetStateAction<boolean>>;
+}
+
+export const CanvasEditor = ({
+  canvasId,
+  viewportCenterRef,
+  nodeDefinitions,
+  onConnect,
+  onAddNode,
+  onAddNodeAndConnect,
+  onSelectionChange,
+  onPaneClick,
+  onNodeDragStart,
+  setSelectionDrag,
+}: CanvasEditorProps) => {
+  const isFunctionCanvas = canvasId !== MAIN_CANVAS_ID;
+
+  // Contextual node picker ("+" on output ports). PortHandle lives deep
+  // inside ReactFlow's render tree, so it dispatches a bubbling CustomEvent
+  // that we catch on this container — no prop drilling through RF needed.
+  const [portAction, setPortAction] = useState<PortActionDetail | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handler = (e: Event) => setPortAction((e as CustomEvent<PortActionDetail>).detail);
+    el.addEventListener("port-plus-click", handler);
+    return () => el.removeEventListener("port-plus-click", handler);
+  }, []);
+
+  const compatibleDefs = useMemo(() => {
+    if (!portAction) return [];
+    const { nodes, edges } = getOrCreateCanvasStore(canvasId).getState();
+    return getCompatibleNodeDefs(
+      portAction.nodeId,
+      portAction.handleId,
+      nodes,
+      edges,
+      nodeDefinitions,
+      isFunctionCanvas,
+    );
+  }, [portAction, canvasId, nodeDefinitions, isFunctionCanvas]);
+
+  const handleAddAndConnect = useCallback(
+    (nodeDef: NodeDefinition) => {
+      if (!portAction) return;
+      const { nodes: currentNodes } = getOrCreateCanvasStore(canvasId).getState();
+      const originNode = currentNodes.find((n) => n.id === portAction.nodeId);
+      if (!originNode) return;
+      const originPos = originNode.position;
+      const position =
+        portAction.portType === "tool"
+          ? { x: originPos.x, y: originPos.y + 200 }
+          : { x: originPos.x + 280, y: originPos.y };
+      const newNodePorts = getPorts({ type: nodeDef.type } as NodeData);
+      const targetPort = newNodePorts.input.find((p) => p.type === portAction.portType);
+      if (!targetPort) return;
+      onAddNodeAndConnect(nodeDef, position, {
+        source: portAction.nodeId,
+        sourceHandle: portAction.handleId,
+        target: "",
+        targetHandle: targetPort.id,
+      });
+      setPortAction(null);
+    },
+    [portAction, canvasId, onAddNodeAndConnect],
+  );
+
+  return (
+    <div ref={containerRef} className="h-full flex flex-col">
+      <div className="flex-1 relative">
+        <Canvas
+          canvasId={canvasId}
+          onConnect={onConnect}
+          onSelectionChange={onSelectionChange}
+          onSelectionStart={() => setSelectionDrag(true)}
+          onSelectionStop={() => setSelectionDrag(false)}
+          onPaneClick={onPaneClick}
+          onAddNode={onAddNode}
+          onNodeDragStart={onNodeDragStart}
+          viewportCenterRef={viewportCenterRef}
+        />
+      </div>
+
+      <NodePickerDialog
+        open={portAction !== null}
+        onOpenChange={(open) => {
+          if (!open) setPortAction(null);
+        }}
+        compatibleDefs={compatibleDefs}
+        onSelect={handleAddAndConnect}
+      />
+    </div>
+  );
+};

package/src/CanvasTabsToolbar.tsx

@@ -0,0 +1,176 @@
+import { ScrollArea } from "./components/ui/scroll-area";
+import { cn } from "./cn";
+import { FunctionSquare, Workflow, X } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { CanvasTab } from "./hooks/useCanvasTabs";
+import { MAIN_CANVAS_ID } from "./stores/canvasStore";
+
+interface CanvasTabsToolbarProps {
+  tabs: CanvasTab[];
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+  onTabClose: (tabId: string) => void;
+  onTabReorder: (fromIndex: number, toIndex: number) => void;
+}
+
+export const CanvasTabsToolbar = ({
+  tabs,
+  activeTabId,
+  onTabChange,
+  onTabClose,
+  onTabReorder,
+}: CanvasTabsToolbarProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const dragIndex = useRef<number | null>(null);
+
+  // Translate vertical mouse-wheel deltas into horizontal scroll on the tabs
+  // viewport. A non-passive native listener is required because React's
+  // synthetic onWheel is passive — preventDefault() there is a no-op, so the
+  // page would also scroll vertically alongside the toolbar shift. We leave
+  // genuine horizontal wheels (touchpads, tilt wheels) alone by gating on
+  // deltaY, and skip the override entirely when there's nothing to scroll
+  // so vertical-page scrolling still works when the pointer happens to
+  // hover an unfilled toolbar.
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const handler = (e: WheelEvent) => {
+      if (e.deltaY === 0) return;
+      if (el.scrollWidth <= el.clientWidth) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, []);
+
+  // dropSlot: insertion index (before which tab the dragged tab lands)
+  const [dropSlot, setDropSlot] = useState<number | null>(null);
+  // indicatorX: pixel offset from container left for the visual line
+  const [indicatorX, setIndicatorX] = useState<number | null>(null);
+
+  const isMainTab = (index: number) => tabs[index]?.id === MAIN_CANVAS_ID;
+
+  const clearDrag = useCallback(() => {
+    dragIndex.current = null;
+    setDropSlot(null);
+    setIndicatorX(null);
+  }, []);
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, index: number) => {
+      if (dragIndex.current === null || !containerRef.current) return;
+      // Ignore Main tab entirely — not a valid drag target
+      if (tabs[index]?.id === MAIN_CANVAS_ID) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = "move";
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const midX = rect.left + rect.width / 2;
+      const isLeftHalf = e.clientX < midX;
+
+      // Slot: insertion index
+      const slot = isLeftHalf ? index : index + 1;
+      // Tabs are now flush with a 1px separator between them — land the indicator on that seam.
+      const raw = isLeftHalf ? rect.left - containerRect.left : rect.right - containerRect.left;
+      // Clamp so the indicator stays fully visible inside the container
+      const x = Math.round(Math.max(0, Math.min(raw, containerRef.current.clientWidth - 2)));
+
+      setDropSlot(slot);
+      setIndicatorX(x);
+    },
+    [tabs],
+  );
+
+  return (
+    // ScrollArea provides the horizontal overlay scrollbar (hover-only, in the
+    // panel gutter so the tab row doesn't shift). The Root carries the bg +
+    // bottom border; the inner div inside the Viewport stays the drag/drop
+    // container — containerRef points at it so the indicator's coordinates
+    // remain relative to the (scrollable) tab row, not the fixed Root.
+    <ScrollArea className="bg-card/80 border-b border-border/50" viewportRef={viewportRef}>
+      <div
+        ref={containerRef}
+        className="relative flex items-stretch"
+        onDragOver={(e) => {
+          // Fallback for empty area past last tab
+          if (dragIndex.current === null || !containerRef.current) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          if (dragIndex.current !== null && dropSlot !== null) {
+            const from = dragIndex.current;
+            const target = dropSlot > from ? dropSlot - 1 : dropSlot;
+            if (target > 0 && target !== from) {
+              onTabReorder(from, target);
+            }
+          }
+          clearDrag();
+        }}
+      >
+        {/* Absolute drop indicator — no layout shift */}
+        {indicatorX !== null && (
+          <div
+            className="absolute top-0 bottom-0 bg-primary z-10 pointer-events-none"
+            style={{ left: 0, width: "2px", transform: `translateX(${indicatorX}px)` }}
+          />
+        )}
+
+        {tabs.map((tab, index) => {
+          const isDraggable = !isMainTab(index);
+
+          return (
+            <React.Fragment key={tab.id}>
+              {index > 0 && <div className="w-px bg-border/70 shrink-0" />}
+              <div
+                draggable={isDraggable}
+                onDragStart={(e) => {
+                  if (!isDraggable) return;
+                  dragIndex.current = index;
+                  e.dataTransfer.effectAllowed = "move";
+                }}
+                onDragOver={(e) => handleTabDragOver(e, index)}
+                onDragEnd={clearDrag}
+                className={cn(
+                  "group flex items-center gap-1.5 pl-2 pr-1 text-sm font-medium cursor-pointer transition-colors",
+                  "hover:bg-field/80",
+                  activeTabId === tab.id ? "bg-field text-foreground" : "text-muted-foreground hover:text-foreground",
+                  isDraggable ? "cursor-grab active:cursor-grabbing" : "select-none",
+                )}
+                onClick={() => onTabChange(tab.id)}
+              >
+                {isMainTab(index) ? (
+                  <Workflow className="w-3.5 h-3.5 shrink-0" />
+                ) : (
+                  <FunctionSquare className="w-3.5 h-3.5 shrink-0" />
+                )}
+                <span className="truncate max-w-[120px] py-1">{tab.label}</span>
+                {tab.id !== MAIN_CANVAS_ID ? (
+                  <button
+                    type="button"
+                    aria-label={`Close tab ${tab.label}`}
+                    title={`Close tab ${tab.label}`}
+                    className="flex items-center justify-center w-4 h-4 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/15 hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTabClose(tab.id);
+                    }}
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                ) : (
+                  <span className="w-1 shrink-0" />
+                )}
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </ScrollArea>
+  );
+};