@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/hooks/use-toast.ts

@@ -1,125 +1,125 @@
-// Standard shadcn toast hook + dispatcher
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "../components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1_000_000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-function genId(): string {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | { type: ActionType["ADD_TOAST"]; toast: ToasterToast }
-  | { type: ActionType["UPDATE_TOAST"]; toast: Partial<ToasterToast> & { id: string } }
-  | { type: ActionType["DISMISS_TOAST"]; toastId?: ToasterToast["id"] }
-  | { type: ActionType["REMOVE_TOAST"]; toastId?: ToasterToast["id"] };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-function addToRemoveQueue(toastId: string) {
-  if (toastTimeouts.has(toastId)) return;
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({ type: "REMOVE_TOAST", toastId });
-  }, TOAST_REMOVE_DELAY);
-  toastTimeouts.set(toastId, timeout);
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((t) => addToRemoveQueue(t.id));
-      }
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === toastId || toastId === undefined ? { ...t, open: false } : t)),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) return { ...state, toasts: [] };
-      return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId) };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => listener(memoryState));
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-  const update = (next: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...next, id } });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-  return { id, dismiss, update };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) listeners.splice(index, 1);
-    };
-  }, []);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };
+// Standard shadcn toast hook + dispatcher
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "../components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1_000_000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+function genId(): string {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | { type: ActionType["ADD_TOAST"]; toast: ToasterToast }
+  | { type: ActionType["UPDATE_TOAST"]; toast: Partial<ToasterToast> & { id: string } }
+  | { type: ActionType["DISMISS_TOAST"]; toastId?: ToasterToast["id"] }
+  | { type: ActionType["REMOVE_TOAST"]; toastId?: ToasterToast["id"] };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((t) => addToRemoveQueue(t.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === toastId || toastId === undefined ? { ...t, open: false } : t)),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) return { ...state, toasts: [] };
+      return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId) };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+  const update = (next: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...next, id } });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+  return { id, dismiss, update };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, []);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/src/hooks/useAvailableVariables.ts

@@ -1,20 +1,20 @@
-import { useMemo } from "react";
-import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
-import { computeAvailableVariables } from "@foresthubai/workflow-core/variable";
-
-// Re-export types for consumers
-export type { Variable as AvailableVariable } from "@foresthubai/workflow-core/variable";
-
-/**
- * Hook that provides access to all available variables for a specific canvas.
- * Each canvas is self-contained — main and function canvases do not share scope.
- *
- * Returns both an array (for iteration/UI) and a record (for O(1) lookup).
- */
-export const useAvailableVariables = (canvasId: string = MAIN_CANVAS_ID) => {
-  const store = getOrCreateCanvasStore(canvasId);
-  const variables = store((s) => s.variables);
-  const edges = store((s) => s.edges);
-
-  return useMemo(() => computeAvailableVariables(variables, edges), [variables, edges]);
-};
+import { useMemo } from "react";
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
+import { computeAvailableVariables } from "@foresthubai/workflow-core/variable";
+
+// Re-export types for consumers
+export type { Variable as AvailableVariable } from "@foresthubai/workflow-core/variable";
+
+/**
+ * Hook that provides access to all available variables for a specific canvas.
+ * Each canvas is self-contained — main and function canvases do not share scope.
+ *
+ * Returns both an array (for iteration/UI) and a record (for O(1) lookup).
+ */
+export const useAvailableVariables = (canvasId: string = MAIN_CANVAS_ID) => {
+  const store = getOrCreateCanvasStore(canvasId);
+  const variables = store((s) => s.variables);
+  const edges = store((s) => s.edges);
+
+  return useMemo(() => computeAvailableVariables(variables, edges), [variables, edges]);
+};

package/src/hooks/useCanvasHistory.ts

@@ -1,22 +1,22 @@
-import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
-
-/**
- * Hook that exposes all history functions from a canvas store.
- * Each canvas has its own independent undo/redo history.
- */
-export const useCanvasHistory = (canvasId: string = MAIN_CANVAS_ID) => {
-  const canvasStore = getOrCreateCanvasStore(canvasId);
-
-  return {
-    // History actions
-    undo: canvasStore.undo,
-    redo: canvasStore.redo,
-    takeCheckpoint: canvasStore.takeCheckpoint,
-    withCheckpoint: canvasStore.withCheckpoint,
-    clearHistory: canvasStore.clearHistory,
-
-    // History state checks
-    canUndo: canvasStore.canUndo,
-    canRedo: canvasStore.canRedo,
-  };
-};
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
+
+/**
+ * Hook that exposes all history functions from a canvas store.
+ * Each canvas has its own independent undo/redo history.
+ */
+export const useCanvasHistory = (canvasId: string = MAIN_CANVAS_ID) => {
+  const canvasStore = getOrCreateCanvasStore(canvasId);
+
+  return {
+    // History actions
+    undo: canvasStore.undo,
+    redo: canvasStore.redo,
+    takeCheckpoint: canvasStore.takeCheckpoint,
+    withCheckpoint: canvasStore.withCheckpoint,
+    clearHistory: canvasStore.clearHistory,
+
+    // History state checks
+    canUndo: canvasStore.canUndo,
+    canRedo: canvasStore.canRedo,
+  };
+};

package/src/hooks/useCanvasTabs.ts

@@ -1,168 +1,168 @@
-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,
-  };
-};
+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,
+  };
+};