@foresthubai/workflow-builder 0.4.3 → 0.4.5

package/src/hooks/useCanvasTabs.ts

@@ -1,168 +1,172 @@
-import { useState, useCallback, useEffect } from "react";
-import { MAIN_CANVAS_ID } from "../stores/canvasStore";
-import { useEditorStore } from "../stores/editorStore";
-
-// Holds info for a canvas tab. id is identical to canvasId.
-export interface CanvasTab {
-  id: string;
-  label: string;
-}
-
-/**
- * Hook for managing canvas tabs UI.
- * Tab switching directly updates the UI store's activeCanvasId.
- */
-export const useCanvasTabs = () => {
-  const [tabs, setTabs] = useState<CanvasTab[]>([{ id: MAIN_CANVAS_ID, label: "Main" }]);
-
-  // Get active canvas ID and setter from editor store
-  const activeCanvasId = useEditorStore((state) => state.activeCanvasId);
-  const setActiveCanvas = useEditorStore((state) => state.setActiveCanvas);
-  const selectFunction = useEditorStore((state) => state.selectFunction);
-
-  // Tabs are a projection of the function declarations: a deleted function drops its
-  // tab (falling back to Main if it was active), a renamed one relabels. Open/close
-  // of an existing function's tab is still explicit (openTab/closeTab) — this only
-  // reconciles against the source of truth so the strip can't show a stale function.
-  const functions = useEditorStore((state) => state.functions);
-  useEffect(() => {
-    setTabs((prev) => {
-      let changed = false;
-      const next = prev.flatMap<CanvasTab>((t) => {
-        if (t.id === MAIN_CANVAS_ID) return [t];
-        const fn = functions[t.id];
-        if (!fn) {
-          changed = true;
-          return [];
-        }
-        if (fn.name !== t.label) {
-          changed = true;
-          return [{ ...t, label: fn.name }];
-        }
-        return [t];
-      });
-      return changed ? next : prev;
-    });
-    if (activeCanvasId !== MAIN_CANVAS_ID && !functions[activeCanvasId]) {
-      setActiveCanvas(MAIN_CANVAS_ID);
-    }
-  }, [functions, activeCanvasId, setActiveCanvas]);
-
-  // Switch to a tab's canvas. A function tab focuses its declaration (selectFunction
-  // switches the canvas AND selects the function so its config panel opens) — matching
-  // the dropdown/sidebar open path; any other tab just switches the canvas.
-  const setActiveTabId = useCallback(
-    (tabId: string) => {
-      if (tabId !== MAIN_CANVAS_ID && functions[tabId]) {
-        selectFunction(tabId);
-      } else {
-        setActiveCanvas(tabId);
-      }
-    },
-    [functions, selectFunction, setActiveCanvas],
-  );
-
-  // Open a tab for a function (add if not exists, switch to it)
-  const openTab = useCallback(
-    (id: string, label: string) => {
-      setTabs((prev) => {
-        const existing = prev.find((t) => t.id === id);
-        if (existing) {
-          return prev; // Already exists
-        }
-        return [...prev, { id, label }];
-      });
-      setActiveCanvas(id);
-      return id;
-    },
-    [setActiveCanvas],
-  );
-
-  // Close a tab (just removes from visible tabs, does NOT delete canvas data)
-  const closeTab = useCallback(
-    (tabId: string) => {
-      // Cannot close main tab
-      if (tabId === MAIN_CANVAS_ID) return;
-
-      setTabs((prev) => {
-        const filtered = prev.filter((t) => t.id !== tabId);
-        // If closing active tab, switch to main
-        if (tabId === activeCanvasId) {
-          setActiveCanvas(MAIN_CANVAS_ID);
-        }
-        return filtered;
-      });
-    },
-    [activeCanvasId, setActiveCanvas],
-  );
-
-  // Remove a tab completely (called when function is deleted)
-  const removeTab = useCallback(
-    (tabId: string) => {
-      if (tabId === MAIN_CANVAS_ID) return;
-
-      setTabs((prev) => {
-        const filtered = prev.filter((t) => t.id !== tabId);
-        // Switch to main canvas if removing active tab
-        if (tabId === activeCanvasId) {
-          setActiveCanvas(MAIN_CANVAS_ID);
-        }
-        return filtered;
-      });
-    },
-    [activeCanvasId, setActiveCanvas],
-  );
-
-  const renameTab = useCallback((tabId: string, newLabel: string) => {
-    setTabs((prev) => prev.map((t) => (t.id === tabId ? { ...t, label: newLabel } : t)));
-  }, []);
-
-  const reorderTabs = useCallback((fromIndex: number, toIndex: number) => {
-    if (fromIndex === 0 || toIndex === 0) return;
-    setTabs((prev) => {
-      const updated = [...prev];
-      const [moved] = updated.splice(fromIndex, 1);
-      if (!moved) return prev;
-      updated.splice(toIndex, 0, moved);
-      return updated;
-    });
-  }, []);
-
-  // Reset to main canvas only (closes all function tabs)
-  const resetToMain = useCallback(() => {
-    setTabs([{ id: MAIN_CANVAS_ID, label: "Main" }]);
-    setActiveCanvas(MAIN_CANVAS_ID);
-  }, [setActiveCanvas]);
-
-  // Restore a previously saved tab state
-  const restoreTabState = useCallback(
-    (savedTabs: CanvasTab[], savedActiveId: string) => {
-      setTabs(savedTabs);
-      setActiveCanvas(savedActiveId);
-    },
-    [setActiveCanvas],
-  );
-
-  // Get label for a tab
-  const getTabLabel = useCallback(
-    (tabId: string) => {
-      return tabs.find((t) => t.id === tabId)?.label || "Unknown";
-    },
-    [tabs],
-  );
-
-  return {
-    tabs,
-    activeTabId: activeCanvasId,
-    setActiveTabId,
-    openTab,
-    closeTab,
-    removeTab,
-    renameTab,
-    reorderTabs,
-    resetToMain,
-    restoreTabState,
-    getTabLabel,
-    isMainCanvas: activeCanvasId === MAIN_CANVAS_ID,
-  };
-};
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+import { useState, useCallback, useEffect } from "react";
+import { MAIN_CANVAS_ID } from "../stores/canvasStore";
+import { useEditorStore } from "../stores/editorStore";
+
+// Holds info for a canvas tab. id is identical to canvasId.
+export interface CanvasTab {
+  id: string;
+  label: string;
+}
+
+/**
+ * Hook for managing canvas tabs UI.
+ * Tab switching directly updates the UI store's activeCanvasId.
+ */
+export const useCanvasTabs = () => {
+  const [tabs, setTabs] = useState<CanvasTab[]>([{ id: MAIN_CANVAS_ID, label: "Main" }]);
+
+  // Get active canvas ID and setter from editor store
+  const activeCanvasId = useEditorStore((state) => state.activeCanvasId);
+  const setActiveCanvas = useEditorStore((state) => state.setActiveCanvas);
+  const selectFunction = useEditorStore((state) => state.selectFunction);
+
+  // Tabs are a projection of the function declarations: a deleted function drops its
+  // tab (falling back to Main if it was active), a renamed one relabels. Open/close
+  // of an existing function's tab is still explicit (openTab/closeTab) — this only
+  // reconciles against the source of truth so the strip can't show a stale function.
+  const functions = useEditorStore((state) => state.functions);
+  useEffect(() => {
+    setTabs((prev) => {
+      let changed = false;
+      const next = prev.flatMap<CanvasTab>((t) => {
+        if (t.id === MAIN_CANVAS_ID) return [t];
+        const fn = functions[t.id];
+        if (!fn) {
+          changed = true;
+          return [];
+        }
+        if (fn.name !== t.label) {
+          changed = true;
+          return [{ ...t, label: fn.name }];
+        }
+        return [t];
+      });
+      return changed ? next : prev;
+    });
+    if (activeCanvasId !== MAIN_CANVAS_ID && !functions[activeCanvasId]) {
+      setActiveCanvas(MAIN_CANVAS_ID);
+    }
+  }, [functions, activeCanvasId, setActiveCanvas]);
+
+  // Switch to a tab's canvas. A function tab focuses its declaration (selectFunction
+  // switches the canvas AND selects the function so its config panel opens) — matching
+  // the dropdown/sidebar open path; any other tab just switches the canvas.
+  const setActiveTabId = useCallback(
+    (tabId: string) => {
+      if (tabId !== MAIN_CANVAS_ID && functions[tabId]) {
+        selectFunction(tabId);
+      } else {
+        setActiveCanvas(tabId);
+      }
+    },
+    [functions, selectFunction, setActiveCanvas],
+  );
+
+  // Open a tab for a function (add if not exists, switch to it)
+  const openTab = useCallback(
+    (id: string, label: string) => {
+      setTabs((prev) => {
+        const existing = prev.find((t) => t.id === id);
+        if (existing) {
+          return prev; // Already exists
+        }
+        return [...prev, { id, label }];
+      });
+      setActiveCanvas(id);
+      return id;
+    },
+    [setActiveCanvas],
+  );
+
+  // Close a tab (just removes from visible tabs, does NOT delete canvas data)
+  const closeTab = useCallback(
+    (tabId: string) => {
+      // Cannot close main tab
+      if (tabId === MAIN_CANVAS_ID) return;
+
+      setTabs((prev) => {
+        const filtered = prev.filter((t) => t.id !== tabId);
+        // If closing active tab, switch to main
+        if (tabId === activeCanvasId) {
+          setActiveCanvas(MAIN_CANVAS_ID);
+        }
+        return filtered;
+      });
+    },
+    [activeCanvasId, setActiveCanvas],
+  );
+
+  // Remove a tab completely (called when function is deleted)
+  const removeTab = useCallback(
+    (tabId: string) => {
+      if (tabId === MAIN_CANVAS_ID) return;
+
+      setTabs((prev) => {
+        const filtered = prev.filter((t) => t.id !== tabId);
+        // Switch to main canvas if removing active tab
+        if (tabId === activeCanvasId) {
+          setActiveCanvas(MAIN_CANVAS_ID);
+        }
+        return filtered;
+      });
+    },
+    [activeCanvasId, setActiveCanvas],
+  );
+
+  const renameTab = useCallback((tabId: string, newLabel: string) => {
+    setTabs((prev) => prev.map((t) => (t.id === tabId ? { ...t, label: newLabel } : t)));
+  }, []);
+
+  const reorderTabs = useCallback((fromIndex: number, toIndex: number) => {
+    if (fromIndex === 0 || toIndex === 0) return;
+    setTabs((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      if (!moved) return prev;
+      updated.splice(toIndex, 0, moved);
+      return updated;
+    });
+  }, []);
+
+  // Reset to main canvas only (closes all function tabs)
+  const resetToMain = useCallback(() => {
+    setTabs([{ id: MAIN_CANVAS_ID, label: "Main" }]);
+    setActiveCanvas(MAIN_CANVAS_ID);
+  }, [setActiveCanvas]);
+
+  // Restore a previously saved tab state
+  const restoreTabState = useCallback(
+    (savedTabs: CanvasTab[], savedActiveId: string) => {
+      setTabs(savedTabs);
+      setActiveCanvas(savedActiveId);
+    },
+    [setActiveCanvas],
+  );
+
+  // Get label for a tab
+  const getTabLabel = useCallback(
+    (tabId: string) => {
+      return tabs.find((t) => t.id === tabId)?.label || "Unknown";
+    },
+    [tabs],
+  );
+
+  return {
+    tabs,
+    activeTabId: activeCanvasId,
+    setActiveTabId,
+    openTab,
+    closeTab,
+    removeTab,
+    renameTab,
+    reorderTabs,
+    resetToMain,
+    restoreTabState,
+    getTabLabel,
+    isMainCanvas: activeCanvasId === MAIN_CANVAS_ID,
+  };
+};

package/src/hooks/useFunctionDiagnosticsSync.ts

@@ -1,40 +1,44 @@
-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]);
-}
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+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,30 @@
-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;
-}
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+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,48 @@
-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 };
-};
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+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 };
+};