@genfeedai/workflow-ui 0.2.3 → 0.2.4

package/dist/hooks.d.ts

@@ -1,10 +1,34 @@
-export { C as CommentNavigation, u as useAIGenNode, a as useAIGenNodeHeader, b as useAutoLoadModelSchema, c as useCanGenerate, d as useCanvasKeyboardShortcuts, e as useCommentNavigation, f as useMediaUpload, g as useModelSelection, h as useNodeExecution, i as usePromptAutocomplete, j as useRequiredInputs } from './useCommentNavigation-BakbiiIc.js';
+export { C as CommentNavigation, u as useAIGenNode, a as useAIGenNodeHeader, b as useAutoLoadModelSchema, c as useCanGenerate, d as useCanvasKeyboardShortcuts, e as useCommentNavigation, f as useMediaUpload, g as useModelSelection, h as useNodeExecution, i as usePromptAutocomplete, j as useRequiredInputs } from './useRequiredInputs-ByoIS-fT.js';
+import { C as ContextMenuType, a as ContextMenuPosition } from './contextMenuStore-DMg0hJQ1.js';
 import { WorkflowNode, WorkflowEdge } from '@genfeedai/types';
-import { a as ContextMenuPosition, C as ContextMenuType } from './contextMenuStore-DMg0hJQ1.js';
-import '@xyflow/react';
 import 'react';
+import '@xyflow/react';
 import 'zustand';
 
+interface ContextMenuItemConfig {
+    id: string;
+    label?: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+    submenu?: ContextMenuItemConfig[];
+    onClick?: () => void;
+}
+
+declare function useContextMenu(): {
+    close: () => void;
+    isOpen: boolean;
+    menuItems: ContextMenuItemConfig[];
+    menuType: ContextMenuType;
+    openEdgeMenu: (edgeId: string, x: number, y: number) => void;
+    openNodeMenu: (nodeId: string, x: number, y: number) => void;
+    openPaneMenu: (x: number, y: number) => void;
+    openSelectionMenu: (nodeIds: string[], x: number, y: number) => void;
+    position: ContextMenuPosition;
+};
+
 interface ClipboardData {
     nodes: WorkflowNode[];
     edges: WorkflowEdge[];
@@ -12,53 +36,29 @@ interface ClipboardData {
 }
 declare function useNodeActions(): {
     clipboard: ClipboardData | null;
-    deleteNode: (nodeId: string) => void;
-    duplicate: (nodeId: string) => string | null;
-    copyNode: (nodeId: string) => void;
     copyMultipleNodes: (nodeIds: string[]) => void;
-    cutNode: (nodeId: string) => void;
+    copyNode: (nodeId: string) => void;
     cutMultipleNodes: (nodeIds: string[]) => void;
+    cutNode: (nodeId: string) => void;
     deleteMultipleNodes: (nodeIds: string[]) => void;
+    deleteNode: (nodeId: string) => void;
+    duplicate: (nodeId: string) => string | null;
     duplicateMultipleNodes: (nodeIds: string[]) => string[];
-    pasteNodes: (offsetX: number, offsetY: number) => {
-        nodeIds: string[];
-        edgeIds: string[];
-    } | null;
     getPasteData: (offsetX: number, offsetY: number) => {
         nodes: WorkflowNode[];
         edges: WorkflowEdge[];
     } | null;
+    pasteNodes: (offsetX: number, offsetY: number) => {
+        nodeIds: string[];
+        edgeIds: string[];
+    } | null;
 };
 
 declare function usePaneActions(): {
     addNodeAtPosition: (type: string, screenX: number, screenY: number) => void;
-    selectAll: () => void;
-    fitView: () => void;
     autoLayout: (direction?: "TB" | "LR") => void;
-};
-
-interface ContextMenuItemConfig {
-    id: string;
-    label?: string;
-    icon?: React.ReactNode;
-    shortcut?: string;
-    disabled?: boolean;
-    danger?: boolean;
-    separator?: boolean;
-    submenu?: ContextMenuItemConfig[];
-    onClick?: () => void;
-}
-
-declare function useContextMenu(): {
-    isOpen: boolean;
-    position: ContextMenuPosition;
-    menuType: ContextMenuType;
-    menuItems: ContextMenuItemConfig[];
-    openNodeMenu: (nodeId: string, x: number, y: number) => void;
-    openEdgeMenu: (edgeId: string, x: number, y: number) => void;
-    openPaneMenu: (x: number, y: number) => void;
-    openSelectionMenu: (nodeIds: string[], x: number, y: number) => void;
-    close: () => void;
+    fitView: () => void;
+    selectAll: () => void;
 };
 
 export { useContextMenu, useNodeActions, usePaneActions };

package/dist/hooks.mjs

@@ -1,11 +1,11 @@
-export { useCommentNavigation } from './chunk-7H3WJJYS.mjs';
-export { useCanvasKeyboardShortcuts, useContextMenu, useNodeActions, usePaneActions } from './chunk-ZD2BADZO.mjs';
-export { useAIGenNode, useAIGenNodeHeader, useAutoLoadModelSchema, useCanGenerate, useMediaUpload, useModelSelection, useNodeExecution, usePromptAutocomplete, useRequiredInputs } from './chunk-GWBGK3KL.mjs';
-import './chunk-7SKSRSS7.mjs';
-import './chunk-EFXQT23N.mjs';
-import './chunk-PCIWWD37.mjs';
+export { useCommentNavigation } from './chunk-ESVULCFY.mjs';
+export { useCanvasKeyboardShortcuts, useContextMenu, useNodeActions, usePaneActions } from './chunk-ORVDYXDP.mjs';
+export { useAIGenNode, useAIGenNodeHeader, useAutoLoadModelSchema, useCanGenerate, useMediaUpload, useModelSelection, useNodeExecution, usePromptAutocomplete, useRequiredInputs } from './chunk-FWJIAW2E.mjs';
+import './chunk-B4EAAKYF.mjs';
+import './chunk-VVQ4CH77.mjs';
+import './chunk-YUIK4AHM.mjs';
+import './chunk-7LV4UAUS.mjs';
 import './chunk-LDN7IX4Y.mjs';
-import './chunk-LT3ZJJL6.mjs';
-import './chunk-R727OFBR.mjs';
-import './chunk-FT33LFII.mjs';
-import './chunk-VRN3UWE5.mjs';
+import './chunk-OJWVEEMM.mjs';
+import './chunk-GPYIIWD5.mjs';
+import './chunk-XRC3O5GK.mjs';

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './canvas.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GroupColor, WorkflowNode } from '@genfeedai/types';
+export { GroupColor, NodeGroup } from '@genfeedai/types';
+import { NodeTypes } from '@xyflow/react';
+import { ReactNode } from 'react';
+export { C as CommentNavigation, u as useAIGenNode, a as useAIGenNodeHeader, b as useAutoLoadModelSchema, c as useCanGenerate, d as useCanvasKeyboardShortcuts, e as useCommentNavigation, f as useMediaUpload, g as useModelSelection, h as useNodeExecution, i as usePromptAutocomplete, j as useRequiredInputs } from './useRequiredInputs-ByoIS-fT.js';
 export { BaseNode, nodeTypes } from './nodes.js';
 export { DebugPanel, NodePalette, PanelContainer } from './panels.js';
-export { BottomBar, CostIndicator, DropdownItem, OverflowMenu, OverflowMenuProps, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown, ToolbarDropdownProps } from './toolbar.js';
-export { C as CommentNavigation, u as useAIGenNode, a as useAIGenNodeHeader, b as useAutoLoadModelSchema, c as useCanGenerate, d as useCanvasKeyboardShortcuts, e as useCommentNavigation, f as useMediaUpload, g as useModelSelection, h as useNodeExecution, i as usePromptAutocomplete, j as useRequiredInputs } from './useCommentNavigation-BakbiiIc.js';
-import { GroupColor } from '@genfeedai/types';
-export { GroupColor, NodeGroup } from '@genfeedai/types';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-export { I as ImageHistoryItem, j as configurePromptLibrary, u as useAnnotationStore, k as useExecutionStore, l as usePromptEditorStore, m as usePromptLibraryStore, n as useSettingsStore, o as useUIStore, p as useWorkflowStore } from './promptLibraryStore-Dl3Q3cP6.js';
+export { M as ModelBrowserModalProps, P as PromptLibraryService, a as PromptPickerProps, W as WorkflowUIConfig } from './types-CRXJnajq.js';
 export { WorkflowUIProvider, useWorkflowUIConfig } from './provider.js';
-export { M as ModelBrowserModalProps, P as PromptLibraryService, a as PromptPickerProps, W as WorkflowUIConfig } from './types-IEKYuYhu.js';
-import '@xyflow/react';
-import 'react';
+export { I as ImageHistoryItem, j as configurePromptLibrary, u as useAnnotationStore, k as useExecutionStore, l as usePromptEditorStore, m as usePromptLibraryStore, n as useSettingsStore, o as useUIStore, p as useWorkflowStore } from './workflowStore-Bsz0nd5c.js';
+export { BottomBar, CostIndicator, DropdownItem, OverflowMenu, OverflowMenuProps, SaveAsDialog, SaveIndicator, SaveIndicatorProps, Toolbar, ToolbarDropdown, ToolbarDropdownProps, ToolbarMenu, ToolbarProps } from './toolbar.js';
 import 'zustand';
 import 'zundo';
 
@@ -26,8 +26,23 @@ declare const GROUP_COLORS: Record<GroupColor, {
 }>;
 declare const DEFAULT_GROUP_COLORS: GroupColor[];
 
+declare function GlobalImageHistory(): react_jsx_runtime.JSX.Element | null;
+
 declare function NotificationToast(): react_jsx_runtime.JSX.Element | null;
 
-declare function GlobalImageHistory(): react_jsx_runtime.JSX.Element | null;
+declare function SmallGraphViewportGuard(): null;
+
+interface WorkflowEditorShellProps {
+    modalContent?: ReactNode;
+    nodePalette?: ReactNode;
+    nodeTypes?: NodeTypes;
+    onDownloadAsZip?: (nodes: WorkflowNode[]) => void;
+    rightPanel?: ReactNode;
+    showBottomBar?: boolean;
+    showNodePalette?: boolean;
+    showSmallGraphViewportGuard?: boolean;
+    toolbar: ReactNode;
+}
+declare function WorkflowEditorShell({ modalContent, nodePalette, nodeTypes, onDownloadAsZip, rightPanel, showBottomBar, showNodePalette, showSmallGraphViewportGuard, toolbar, }: WorkflowEditorShellProps): react_jsx_runtime.JSX.Element;
 
-export { DEFAULT_GROUP_COLORS, GROUP_COLORS, GlobalImageHistory, NotificationToast };
+export { DEFAULT_GROUP_COLORS, GROUP_COLORS, GlobalImageHistory, NotificationToast, SmallGraphViewportGuard, WorkflowEditorShell };

package/dist/index.mjs

@@ -1,20 +1,100 @@
-export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-HWVTD2LC.mjs';
-export { BaseNode, nodeTypes } from './chunk-XPZAHIWY.mjs';
-import './chunk-ZJD5WMR3.mjs';
-import './chunk-6PSJTBNV.mjs';
-export { DebugPanel, NodePalette, PanelContainer } from './chunk-OQREHJXK.mjs';
-export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-FMJPFB6W.mjs';
-import './chunk-N5NJZTK4.mjs';
-export { useCommentNavigation } from './chunk-7H3WJJYS.mjs';
-export { useCanvasKeyboardShortcuts } from './chunk-ZD2BADZO.mjs';
-export { useAIGenNode, useAIGenNodeHeader, useAutoLoadModelSchema, useCanGenerate, useMediaUpload, useModelSelection, useNodeExecution, usePromptAutocomplete, useRequiredInputs } from './chunk-GWBGK3KL.mjs';
-import './chunk-7SKSRSS7.mjs';
-import './chunk-EFXQT23N.mjs';
-export { useAnnotationStore, usePromptEditorStore } from './chunk-CV4M7CNU.mjs';
-import './chunk-PCIWWD37.mjs';
-import './chunk-LDN7IX4Y.mjs';
-export { useExecutionStore, useSettingsStore, useUIStore } from './chunk-LT3ZJJL6.mjs';
-export { useWorkflowStore } from './chunk-R727OFBR.mjs';
+import { BottomBar } from './chunk-ZSITTZ4S.mjs';
+export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-ZSITTZ4S.mjs';
+import { WorkflowCanvas } from './chunk-53XDE62A.mjs';
+export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-53XDE62A.mjs';
+export { useCommentNavigation } from './chunk-ESVULCFY.mjs';
+export { useCanvasKeyboardShortcuts } from './chunk-ORVDYXDP.mjs';
+import './chunk-MGLAKMDP.mjs';
+export { BaseNode, nodeTypes } from './chunk-2FUPL67V.mjs';
+import './chunk-C6MQBJFC.mjs';
+export { useAIGenNode, useAIGenNodeHeader, useAutoLoadModelSchema, useCanGenerate, useMediaUpload, useModelSelection, useNodeExecution, usePromptAutocomplete, useRequiredInputs } from './chunk-FWJIAW2E.mjs';
+import './chunk-B4EAAKYF.mjs';
+import './chunk-U4QPE4CY.mjs';
+import './chunk-VVQ4CH77.mjs';
+import { NodePalette } from './chunk-IYFWAJBB.mjs';
+export { DebugPanel, NodePalette, PanelContainer } from './chunk-IYFWAJBB.mjs';
 import './chunk-MLJJBBTB.mjs';
-export { WorkflowUIProvider, useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
-export { configurePromptLibrary, usePromptLibraryStore } from './chunk-VRN3UWE5.mjs';
+export { WorkflowUIProvider, useWorkflowUIConfig } from './chunk-YUIK4AHM.mjs';
+import './chunk-7LV4UAUS.mjs';
+export { useAnnotationStore, usePromptEditorStore } from './chunk-QQVHGJ2G.mjs';
+import './chunk-LDN7IX4Y.mjs';
+import { useUIStore } from './chunk-OJWVEEMM.mjs';
+export { useExecutionStore, useSettingsStore, useUIStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
+export { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
+export { configurePromptLibrary, usePromptLibraryStore } from './chunk-XRC3O5GK.mjs';
+import { useReactFlow } from '@xyflow/react';
+import { useRef, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var SMALL_GRAPH_NODE_LIMIT = 2;
+var SMALL_GRAPH_MAX_ZOOM = 0.9;
+var SMALL_GRAPH_MIN_ZOOM = 0.35;
+var SMALL_GRAPH_PADDING = 0.24;
+function SmallGraphViewportGuard() {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const reactFlow = useReactFlow();
+  const previousNodeCountRef = useRef(null);
+  useEffect(() => {
+    const previousNodeCount = previousNodeCountRef.current;
+    previousNodeCountRef.current = nodes.length;
+    if (previousNodeCount === null) {
+      return;
+    }
+    const isSmallGraph = nodes.length > 0 && nodes.length <= SMALL_GRAPH_NODE_LIMIT;
+    const addedNodeToSmallGraph = nodes.length > previousNodeCount;
+    if (!isSmallGraph || !addedNodeToSmallGraph) {
+      return;
+    }
+    const schedule = typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : (callback) => window.setTimeout(() => callback(performance.now()), 0);
+    const cancel = typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame.bind(window) : window.clearTimeout.bind(window);
+    const handle = schedule(() => {
+      reactFlow.fitView({
+        duration: 180,
+        maxZoom: SMALL_GRAPH_MAX_ZOOM,
+        minZoom: SMALL_GRAPH_MIN_ZOOM,
+        padding: SMALL_GRAPH_PADDING
+      });
+    });
+    return () => {
+      cancel(handle);
+    };
+  }, [nodes.length, reactFlow]);
+  return null;
+}
+function WorkflowEditorShell({
+  modalContent,
+  nodePalette,
+  nodeTypes: nodeTypes2,
+  onDownloadAsZip,
+  rightPanel,
+  showBottomBar = true,
+  showNodePalette = true,
+  showSmallGraphViewportGuard = true,
+  toolbar
+}) {
+  const showPalette = useUIStore((state) => state.showPalette);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("main", { className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-[var(--background)]", children: [
+      toolbar,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+        showNodePalette && showPalette && (nodePalette ?? /* @__PURE__ */ jsx(NodePalette, {})),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          showSmallGraphViewportGuard && /* @__PURE__ */ jsx(SmallGraphViewportGuard, {}),
+          /* @__PURE__ */ jsx(
+            WorkflowCanvas,
+            {
+              nodeTypes: nodeTypes2,
+              onDownloadAsZip
+            }
+          ),
+          showBottomBar && /* @__PURE__ */ jsx(BottomBar, {})
+        ] }),
+        rightPanel
+      ] })
+    ] }),
+    modalContent
+  ] });
+}
+
+export { SmallGraphViewportGuard, WorkflowEditorShell };