@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/hooks/useFunctionDiagnosticsSync.ts

@@ -1,40 +1,40 @@
-import { useEffect } from "react";
-import { validateFunction } from "@foresthubai/workflow-core/diagnostics";
-import { computeAvailableVariables } from "@foresthubai/workflow-core/variable";
-import { useEditorStore } from "../stores/editorStore";
-import { useDiagnosticsStore } from "../stores/diagnosticsStore";
-import { getCanvasStore } from "../stores/canvasStore";
-
-/**
- * Keeps the `byFunctionId` diagnostics slot in sync with the function declarations —
- * the single source for the sidebar tab badge, the function list ring, AND the config
- * panel's per-output rings (they all read this slot). Mounted once at the
- * workflow-builder root so it survives tab open/close.
- *
- * Scope-aware: each function is validated against its own body canvas's variables, so
- * invalid/typed return expressions surface here too — not just missing ones. (Reacts
- * to declaration/expression edits via `functions`; a body-only edit that changes the
- * available variables without touching a declaration refreshes on the next
- * declaration change or a full `validate`.)
- */
-export function useFunctionDiagnosticsSync(): void {
-  const functions = useEditorStore((s) => s.functions);
-
-  useEffect(() => {
-    const ds = useDiagnosticsStore.getState();
-
-    const seen = new Set<string>();
-    for (const [id, def] of Object.entries(functions)) {
-      seen.add(id);
-      const store = getCanvasStore(id);
-      const lookup = store
-        ? computeAvailableVariables(store.getState().variables, store.getState().edges).lookup
-        : undefined;
-      ds.setFunctionDiagnostics(id, validateFunction(def, lookup));
-    }
-
-    for (const id of Object.keys(ds.byFunctionId)) {
-      if (!seen.has(id)) ds.clearFunctionDiagnostics(id);
-    }
-  }, [functions]);
-}
+import { useEffect } from "react";
+import { validateFunction } from "@foresthubai/workflow-core/diagnostics";
+import { computeAvailableVariables } from "@foresthubai/workflow-core/variable";
+import { useEditorStore } from "../stores/editorStore";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { getCanvasStore } from "../stores/canvasStore";
+
+/**
+ * Keeps the `byFunctionId` diagnostics slot in sync with the function declarations —
+ * the single source for the sidebar tab badge, the function list ring, AND the config
+ * panel's per-output rings (they all read this slot). Mounted once at the
+ * workflow-builder root so it survives tab open/close.
+ *
+ * Scope-aware: each function is validated against its own body canvas's variables, so
+ * invalid/typed return expressions surface here too — not just missing ones. (Reacts
+ * to declaration/expression edits via `functions`; a body-only edit that changes the
+ * available variables without touching a declaration refreshes on the next
+ * declaration change or a full `validate`.)
+ */
+export function useFunctionDiagnosticsSync(): void {
+  const functions = useEditorStore((s) => s.functions);
+
+  useEffect(() => {
+    const ds = useDiagnosticsStore.getState();
+
+    const seen = new Set<string>();
+    for (const [id, def] of Object.entries(functions)) {
+      seen.add(id);
+      const store = getCanvasStore(id);
+      const lookup = store
+        ? computeAvailableVariables(store.getState().variables, store.getState().edges).lookup
+        : undefined;
+      ds.setFunctionDiagnostics(id, validateFunction(def, lookup));
+    }
+
+    for (const id of Object.keys(ds.byFunctionId)) {
+      if (!seen.has(id)) ds.clearFunctionDiagnostics(id);
+    }
+  }, [functions]);
+}

package/src/hooks/useFunctionRegistry.ts

@@ -1,26 +1,26 @@
-import { useCallback, useMemo } from "react";
-import { useEditorStore } from "../stores/editorStore";
-import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
-
-// Functions are a project-scoped resource: the registry IS editorStore.functions —
-// the domain FunctionDeclaration, no conversion. (Crossing to the flat api FunctionInfo
-// is done only when stamping a call-site snapshot; see useNodeDefinitions/migration.)
-
-/**
- * Access to all function declarations by id. Reactive over editorStore.functions.
- * - functions: Record of FunctionDeclaration by id
- * - functionsList: array of FunctionDeclaration
- * - getFunction(id): one declaration by id
- */
-export function useFunctionRegistry() {
-  const functions = useEditorStore((s) => s.functions);
-  const functionsList = useMemo(() => Object.values(functions), [functions]);
-  const getFunction = useCallback((id: string): FunctionDeclaration | undefined => functions[id], [functions]);
-
-  return { functions, functionsList, getFunction };
-}
-
-/** All function declarations without React subscription (for non-component code). */
-export function getAllFunctions(): Record<string, FunctionDeclaration> {
-  return useEditorStore.getState().functions;
-}
+import { useCallback, useMemo } from "react";
+import { useEditorStore } from "../stores/editorStore";
+import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
+
+// Functions are a project-scoped resource: the registry IS editorStore.functions —
+// the domain FunctionDeclaration, no conversion. (Crossing to the flat api FunctionInfo
+// is done only when stamping a call-site snapshot; see useNodeDefinitions/migration.)
+
+/**
+ * Access to all function declarations by id. Reactive over editorStore.functions.
+ * - functions: Record of FunctionDeclaration by id
+ * - functionsList: array of FunctionDeclaration
+ * - getFunction(id): one declaration by id
+ */
+export function useFunctionRegistry() {
+  const functions = useEditorStore((s) => s.functions);
+  const functionsList = useMemo(() => Object.values(functions), [functions]);
+  const getFunction = useCallback((id: string): FunctionDeclaration | undefined => functions[id], [functions]);
+
+  return { functions, functionsList, getFunction };
+}
+
+/** All function declarations without React subscription (for non-component code). */
+export function getAllFunctions(): Record<string, FunctionDeclaration> {
+  return useEditorStore.getState().functions;
+}

package/src/hooks/useFunctions.ts

@@ -1,44 +1,44 @@
-import { useCallback } from "react";
-import { useEditorStore } from "../stores/editorStore";
-import { getOrCreateCanvasStore } from "../stores/canvasStore";
-import { useFunctionRegistry } from "./useFunctionRegistry";
-import { addFunction } from "../utils/functionOperations";
-
-export interface UseFunctionsOptions {
-  /** Open (or focus) a tab for a function canvas. */
-  onOpenTab: (id: string, label: string) => void;
-}
-
-/**
- * Coordinates the canvas-tab UI with function declarations (editorStore). The
- * declarations themselves are CRUD'd in utils/functionOperations; this hook only
- * handles the open/create flows that must also touch the tab strip and selection.
- */
-export const useFunctions = ({ onOpenTab }: UseFunctionsOptions) => {
-  const { functionsList: functions, getFunction } = useFunctionRegistry();
-  const selectFunction = useEditorStore((s) => s.selectFunction);
-
-  // Open an existing function: ensure its body canvas exists, open its tab, and
-  // select it so the right panel shows its definition. onOpenTab switches the active
-  // canvas first; selectFunction sets the selection last so it isn't cleared.
-  const openFunction = useCallback(
-    (functionId: string) => {
-      const fn = getFunction(functionId);
-      if (!fn) return;
-      getOrCreateCanvasStore(functionId);
-      onOpenTab(functionId, fn.name);
-      selectFunction(functionId);
-    },
-    [getFunction, onOpenTab, selectFunction],
-  );
-
-  // Create a new function and open it (the canvas body is created by addFunction).
-  const createFunction = useCallback(() => {
-    const fn = addFunction();
-    onOpenTab(fn.id, fn.name);
-    selectFunction(fn.id);
-    return fn.id;
-  }, [onOpenTab, selectFunction]);
-
-  return { functions, openFunction, createFunction };
-};
+import { useCallback } from "react";
+import { useEditorStore } from "../stores/editorStore";
+import { getOrCreateCanvasStore } from "../stores/canvasStore";
+import { useFunctionRegistry } from "./useFunctionRegistry";
+import { addFunction } from "../utils/functionOperations";
+
+export interface UseFunctionsOptions {
+  /** Open (or focus) a tab for a function canvas. */
+  onOpenTab: (id: string, label: string) => void;
+}
+
+/**
+ * Coordinates the canvas-tab UI with function declarations (editorStore). The
+ * declarations themselves are CRUD'd in utils/functionOperations; this hook only
+ * handles the open/create flows that must also touch the tab strip and selection.
+ */
+export const useFunctions = ({ onOpenTab }: UseFunctionsOptions) => {
+  const { functionsList: functions, getFunction } = useFunctionRegistry();
+  const selectFunction = useEditorStore((s) => s.selectFunction);
+
+  // Open an existing function: ensure its body canvas exists, open its tab, and
+  // select it so the right panel shows its definition. onOpenTab switches the active
+  // canvas first; selectFunction sets the selection last so it isn't cleared.
+  const openFunction = useCallback(
+    (functionId: string) => {
+      const fn = getFunction(functionId);
+      if (!fn) return;
+      getOrCreateCanvasStore(functionId);
+      onOpenTab(functionId, fn.name);
+      selectFunction(functionId);
+    },
+    [getFunction, onOpenTab, selectFunction],
+  );
+
+  // Create a new function and open it (the canvas body is created by addFunction).
+  const createFunction = useCallback(() => {
+    const fn = addFunction();
+    onOpenTab(fn.id, fn.name);
+    selectFunction(fn.id);
+    return fn.id;
+  }, [onOpenTab, selectFunction]);
+
+  return { functions, openFunction, createFunction };
+};

package/src/hooks/useGraph.ts

@@ -1,161 +1,161 @@
-import { NodeDefinition, NodeData } from "@foresthubai/workflow-core/node";
-import { Connection, Edge, Node } from "@xyflow/react";
-import type { EdgeData } from "@foresthubai/workflow-core/edge";
-import { useCallback } from "react";
-import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
-import {
-  addNodeToStore,
-  type Clipboard,
-  connectNodesInStore,
-  deleteEdgesFromStore,
-  deleteNodeFromStore,
-  pasteToStore,
-  updateEdgeInStore,
-  updateNodeInStore,
-} from "../utils/graphOperations";
-import type { EdgeType } from "@foresthubai/workflow-core/edge";
-import { useNodeDefinitions } from "./useNodeDefinitions";
-
-// Shared across all useGraph instances (one per canvas) so copy/paste works
-// across canvas switches within a single builder session.
-const clipboardRef: { current: Clipboard | null } = { current: null };
-
-/**
- * Hook that provides graph management actions for a specific canvas.
- *
- * All mutations are:
- * - Gated by readOnly (no-op when true)
- * - Automatically wrapped in a history checkpoint (undo/redo)
- *
- * Callers don't need to worry about either concern.
- */
-export const useGraph = (canvasId: string = MAIN_CANVAS_ID, readOnly: boolean = false) => {
-  const canvasStore = getOrCreateCanvasStore(canvasId);
-  const nodes = canvasStore((s) => s.nodes);
-  const edges = canvasStore((s) => s.edges);
-  const { withCheckpoint } = canvasStore;
-
-  const { getNodeDefinition } = useNodeDefinitions();
-
-  // Guarded checkpoint: skips when readOnly, otherwise wraps in undo history entry
-  const guarded = useCallback(
-    <R>(operation: () => R): R | undefined => {
-      if (readOnly) return undefined;
-      return withCheckpoint(operation);
-    },
-    [readOnly, withCheckpoint],
-  );
-
-  const addNode = useCallback(
-    (nodeDef: NodeDefinition, position?: { x: number; y: number }) => {
-      return guarded(() => addNodeToStore(canvasStore, nodeDef, position)) ?? null;
-    },
-    [canvasStore, guarded],
-  );
-
-  const updateNode = useCallback(
-    (nodeId: string, updates: { arguments?: Record<string, unknown>; label?: string }) => {
-      guarded(() => updateNodeInStore(canvasStore, nodeId, updates));
-    },
-    [canvasStore, guarded],
-  );
-
-  const deleteNode = useCallback(
-    (nodeId: string) => {
-      guarded(() => deleteNodeFromStore(canvasStore, nodeId, getNodeDefinition));
-    },
-    [canvasStore, getNodeDefinition, guarded],
-  );
-
-  const onConnect = useCallback(
-    (connection: Connection): EdgeType | false => {
-      return guarded(() => connectNodesInStore(canvasStore, connection)) ?? false;
-    },
-    [canvasStore, guarded],
-  );
-
-  const updateEdge = useCallback(
-    (edgeId: string, updates: Record<string, unknown>) => {
-      guarded(() => updateEdgeInStore(canvasStore, edgeId, updates));
-    },
-    [canvasStore, guarded],
-  );
-
-  const deleteEdges = useCallback(
-    (edgeIds: string[]) => {
-      guarded(() => deleteEdgesFromStore(canvasStore, edgeIds));
-    },
-    [canvasStore, guarded],
-  );
-
-  // Batch delete nodes and edges as a single undo entry
-  const deleteSelected = useCallback(
-    (nodeIds: string[], edgeIds: string[]) => {
-      if (nodeIds.length === 0 && edgeIds.length === 0) return;
-      guarded(() => {
-        for (const nodeId of nodeIds) deleteNodeFromStore(canvasStore, nodeId, getNodeDefinition);
-        if (edgeIds.length > 0) deleteEdgesFromStore(canvasStore, edgeIds);
-      });
-    },
-    [canvasStore, getNodeDefinition, guarded],
-  );
-
-  // Copy is read-only — no checkpoint, no readOnly gate
-  const copySelection = useCallback(
-    (nodeIds: string[]) => {
-      if (nodeIds.length === 0) return;
-
-      const nodeIdSet = new Set(nodeIds);
-
-      const copiedNodes = nodes
-        .filter((node) => nodeIdSet.has(node.id))
-        .map((node) => JSON.parse(JSON.stringify(node)) as Node<NodeData>);
-
-      const copiedEdges = edges
-        .filter((edge) => nodeIdSet.has(edge.source) && nodeIdSet.has(edge.target))
-        .map((edge) => JSON.parse(JSON.stringify(edge)) as Edge<EdgeData>);
-
-      clipboardRef.current = { nodes: copiedNodes, edges: copiedEdges };
-    },
-    [nodes, edges],
-  );
-
-  const pasteSelection = useCallback(
-    (offset?: { x: number; y: number }) => {
-      const clipboard = clipboardRef.current;
-      if (!clipboard) return undefined;
-      return guarded(() => pasteToStore(canvasStore, clipboard, offset, getNodeDefinition));
-    },
-    [canvasStore, getNodeDefinition, guarded],
-  );
-
-  // Batch add node + connect as a single undo entry (used by contextual node picker)
-  const addNodeAndConnect = useCallback(
-    (nodeDef: NodeDefinition, position: { x: number; y: number }, connection: Connection): string | null => {
-      return (
-        guarded(() => {
-          const nodeId = addNodeToStore(canvasStore, nodeDef, position);
-          if (nodeId == null) return null;
-          connectNodesInStore(canvasStore, { ...connection, target: nodeId });
-          return nodeId;
-        }) ?? null
-      );
-    },
-    [canvasStore, guarded],
-  );
-
-  return {
-    nodes,
-    edges,
-    addNode,
-    updateNode,
-    updateEdge,
-    deleteNode,
-    deleteEdges,
-    deleteSelected,
-    onConnect,
-    addNodeAndConnect,
-    copySelection,
-    pasteSelection,
-  };
-};
+import { NodeDefinition, NodeData } from "@foresthubai/workflow-core/node";
+import { Connection, Edge, Node } from "@xyflow/react";
+import type { EdgeData } from "@foresthubai/workflow-core/edge";
+import { useCallback } from "react";
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
+import {
+  addNodeToStore,
+  type Clipboard,
+  connectNodesInStore,
+  deleteEdgesFromStore,
+  deleteNodeFromStore,
+  pasteToStore,
+  updateEdgeInStore,
+  updateNodeInStore,
+} from "../utils/graphOperations";
+import type { EdgeType } from "@foresthubai/workflow-core/edge";
+import { useNodeDefinitions } from "./useNodeDefinitions";
+
+// Shared across all useGraph instances (one per canvas) so copy/paste works
+// across canvas switches within a single builder session.
+const clipboardRef: { current: Clipboard | null } = { current: null };
+
+/**
+ * Hook that provides graph management actions for a specific canvas.
+ *
+ * All mutations are:
+ * - Gated by readOnly (no-op when true)
+ * - Automatically wrapped in a history checkpoint (undo/redo)
+ *
+ * Callers don't need to worry about either concern.
+ */
+export const useGraph = (canvasId: string = MAIN_CANVAS_ID, readOnly: boolean = false) => {
+  const canvasStore = getOrCreateCanvasStore(canvasId);
+  const nodes = canvasStore((s) => s.nodes);
+  const edges = canvasStore((s) => s.edges);
+  const { withCheckpoint } = canvasStore;
+
+  const { getNodeDefinition } = useNodeDefinitions();
+
+  // Guarded checkpoint: skips when readOnly, otherwise wraps in undo history entry
+  const guarded = useCallback(
+    <R>(operation: () => R): R | undefined => {
+      if (readOnly) return undefined;
+      return withCheckpoint(operation);
+    },
+    [readOnly, withCheckpoint],
+  );
+
+  const addNode = useCallback(
+    (nodeDef: NodeDefinition, position?: { x: number; y: number }) => {
+      return guarded(() => addNodeToStore(canvasStore, nodeDef, position)) ?? null;
+    },
+    [canvasStore, guarded],
+  );
+
+  const updateNode = useCallback(
+    (nodeId: string, updates: { arguments?: Record<string, unknown>; label?: string }) => {
+      guarded(() => updateNodeInStore(canvasStore, nodeId, updates));
+    },
+    [canvasStore, guarded],
+  );
+
+  const deleteNode = useCallback(
+    (nodeId: string) => {
+      guarded(() => deleteNodeFromStore(canvasStore, nodeId, getNodeDefinition));
+    },
+    [canvasStore, getNodeDefinition, guarded],
+  );
+
+  const onConnect = useCallback(
+    (connection: Connection): EdgeType | false => {
+      return guarded(() => connectNodesInStore(canvasStore, connection)) ?? false;
+    },
+    [canvasStore, guarded],
+  );
+
+  const updateEdge = useCallback(
+    (edgeId: string, updates: Record<string, unknown>) => {
+      guarded(() => updateEdgeInStore(canvasStore, edgeId, updates));
+    },
+    [canvasStore, guarded],
+  );
+
+  const deleteEdges = useCallback(
+    (edgeIds: string[]) => {
+      guarded(() => deleteEdgesFromStore(canvasStore, edgeIds));
+    },
+    [canvasStore, guarded],
+  );
+
+  // Batch delete nodes and edges as a single undo entry
+  const deleteSelected = useCallback(
+    (nodeIds: string[], edgeIds: string[]) => {
+      if (nodeIds.length === 0 && edgeIds.length === 0) return;
+      guarded(() => {
+        for (const nodeId of nodeIds) deleteNodeFromStore(canvasStore, nodeId, getNodeDefinition);
+        if (edgeIds.length > 0) deleteEdgesFromStore(canvasStore, edgeIds);
+      });
+    },
+    [canvasStore, getNodeDefinition, guarded],
+  );
+
+  // Copy is read-only — no checkpoint, no readOnly gate
+  const copySelection = useCallback(
+    (nodeIds: string[]) => {
+      if (nodeIds.length === 0) return;
+
+      const nodeIdSet = new Set(nodeIds);
+
+      const copiedNodes = nodes
+        .filter((node) => nodeIdSet.has(node.id))
+        .map((node) => JSON.parse(JSON.stringify(node)) as Node<NodeData>);
+
+      const copiedEdges = edges
+        .filter((edge) => nodeIdSet.has(edge.source) && nodeIdSet.has(edge.target))
+        .map((edge) => JSON.parse(JSON.stringify(edge)) as Edge<EdgeData>);
+
+      clipboardRef.current = { nodes: copiedNodes, edges: copiedEdges };
+    },
+    [nodes, edges],
+  );
+
+  const pasteSelection = useCallback(
+    (offset?: { x: number; y: number }) => {
+      const clipboard = clipboardRef.current;
+      if (!clipboard) return undefined;
+      return guarded(() => pasteToStore(canvasStore, clipboard, offset, getNodeDefinition));
+    },
+    [canvasStore, getNodeDefinition, guarded],
+  );
+
+  // Batch add node + connect as a single undo entry (used by contextual node picker)
+  const addNodeAndConnect = useCallback(
+    (nodeDef: NodeDefinition, position: { x: number; y: number }, connection: Connection): string | null => {
+      return (
+        guarded(() => {
+          const nodeId = addNodeToStore(canvasStore, nodeDef, position);
+          if (nodeId == null) return null;
+          connectNodesInStore(canvasStore, { ...connection, target: nodeId });
+          return nodeId;
+        }) ?? null
+      );
+    },
+    [canvasStore, guarded],
+  );
+
+  return {
+    nodes,
+    edges,
+    addNode,
+    updateNode,
+    updateEdge,
+    deleteNode,
+    deleteEdges,
+    deleteSelected,
+    onConnect,
+    addNodeAndConnect,
+    copySelection,
+    pasteSelection,
+  };
+};