@genfeedai/workflow-ui 0.2.2 → 0.2.4

package/dist/toolbar.d.ts

@@ -1,12 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare function BottomBar(): react_jsx_runtime.JSX.Element;
+
+declare function CostIndicator(): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Toolbar Component Types
  */
+
 interface DropdownItem {
     id: string;
     label?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     onClick?: () => void;
     external?: boolean;
     separator?: boolean;
@@ -19,7 +25,10 @@ interface ToolbarDropdownProps {
 interface OverflowMenuProps {
     items: DropdownItem[];
 }
-
+interface ToolbarMenu {
+    label: string;
+    items: DropdownItem[];
+}
 interface ToolbarProps {
     /** Optional callback for auto-layout functionality */
     onAutoLayout?: (direction: 'LR' | 'TB') => void;
@@ -30,34 +39,36 @@ interface ToolbarProps {
     /** Additional file menu items to append */
     fileMenuItemsAppend?: DropdownItem[];
     /** Additional menu dropdowns to render after File */
-    additionalMenus?: Array<{
-        label: string;
-        items: DropdownItem[];
-    }>;
+    additionalMenus?: ToolbarMenu[];
+    /** Optional custom branding; falls back to the default logo link */
+    branding?: ReactNode;
+    /** Optional content rendered between branding and the File menu */
+    leftContent?: ReactNode;
+    /** Optional content rendered after the save indicator and before the spacer */
+    middleContent?: ReactNode;
+    /** Additional elements to render in the right side of the toolbar */
+    rightContent?: ReactNode;
+    /** Custom save indicator override */
+    saveIndicator?: ReactNode;
     /** Logo href (defaults to "/") */
     logoHref?: string;
     /** Logo image src */
     logoSrc?: string;
     /** Whether to show the settings button */
     showSettings?: boolean;
-    /** Additional elements to render in the right side of the toolbar */
-    rightContent?: React.ReactNode;
+    /** Whether to show the shortcut help button */
+    showShortcutHelp?: boolean;
+}
+interface SaveIndicatorProps {
+    isDirty?: boolean;
+    isSaving?: boolean;
+    variant?: 'default' | 'pill';
 }
-declare function Toolbar({ onAutoLayout, onSaveAs, fileMenuItemsPrepend, fileMenuItemsAppend, additionalMenus, logoHref, logoSrc, showSettings, rightContent, }: ToolbarProps): react_jsx_runtime.JSX.Element;
-
-declare function BottomBar(): react_jsx_runtime.JSX.Element;
-
-declare function CostIndicator(): react_jsx_runtime.JSX.Element | null;
-
-/**
- * Auto-save status indicator
- */
-declare function SaveIndicator(): react_jsx_runtime.JSX.Element;
 
 /**
- * Toolbar dropdown menu component
+ * Overflow menu with icon trigger
  */
-declare function ToolbarDropdown({ label, items }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+declare function OverflowMenu({ items }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
 
 interface SaveAsDialogProps {
     isOpen: boolean;
@@ -65,11 +76,18 @@ interface SaveAsDialogProps {
     onSave: (newName: string) => void;
     onClose: () => void;
 }
-declare function SaveAsDialog({ isOpen, currentName, onSave, onClose }: SaveAsDialogProps): react_jsx_runtime.JSX.Element | null;
+declare function SaveAsDialog({ isOpen, currentName, onSave, onClose, }: SaveAsDialogProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Overflow menu with icon trigger
+ * Auto-save status indicator
  */
-declare function OverflowMenu({ items }: OverflowMenuProps): react_jsx_runtime.JSX.Element;
+declare function SaveIndicator({ isDirty: isDirtyProp, isSaving: isSavingProp, variant, }: SaveIndicatorProps): react_jsx_runtime.JSX.Element;
+
+declare function Toolbar({ onAutoLayout, onSaveAs, fileMenuItemsPrepend, fileMenuItemsAppend, additionalMenus, branding, leftContent, middleContent, saveIndicator, logoHref, logoSrc, showSettings, showShortcutHelp, rightContent, }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Toolbar dropdown menu component
+ */
+declare function ToolbarDropdown({ label, items }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
 
-export { BottomBar, CostIndicator, type DropdownItem, OverflowMenu, type OverflowMenuProps, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown, type ToolbarDropdownProps };
+export { BottomBar, CostIndicator, type DropdownItem, OverflowMenu, type OverflowMenuProps, SaveAsDialog, SaveIndicator, type SaveIndicatorProps, Toolbar, ToolbarDropdown, type ToolbarDropdownProps, type ToolbarMenu, type ToolbarProps };

package/dist/toolbar.mjs

@@ -1,6 +1,5 @@
-export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-JT4Y5H3U.mjs';
-import './chunk-2JQSKIWR.mjs';
-import './chunk-OY7BRSGG.mjs';
+export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-ZSITTZ4S.mjs';
+import './chunk-MGLAKMDP.mjs';
 import './chunk-LDN7IX4Y.mjs';
-import './chunk-LT3ZJJL6.mjs';
-import './chunk-R727OFBR.mjs';
+import './chunk-OJWVEEMM.mjs';
+import './chunk-GPYIIWD5.mjs';

package/dist/ui.d.ts

@@ -9,8 +9,8 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "icon" | "sm" | "icon-lg" | "icon-sm" | "lg" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "ghost" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: react.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/ui.mjs

@@ -1,2 +1,2 @@
-export { Checkbox, ComparisonSlider, GridPositionSelector, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider } from './chunk-ZJD5WMR3.mjs';
-export { Button, buttonVariants, cn } from './chunk-7SKSRSS7.mjs';
+export { Checkbox, ComparisonSlider, GridPositionSelector, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider } from './chunk-C6MQBJFC.mjs';
+export { Button, buttonVariants, cn } from './chunk-B4EAAKYF.mjs';

package/dist/{useCommentNavigation-BakbiiIc.d.ts → useRequiredInputs-ByoIS-fT.d.ts}

@@ -1,64 +1,79 @@
-import { NodeGroup, WorkflowNode, NodeType, WorkflowNodeData, ProviderModel, SelectedModel, AvailableVariable } from '@genfeedai/types';
-import { FitViewOptions } from '@xyflow/react';
+import { WorkflowNodeData, SelectedModel, ProviderModel, NodeType, NodeGroup, WorkflowNode, AvailableVariable } from '@genfeedai/types';
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
+import { FitViewOptions } from '@xyflow/react';
 
-interface UseCanvasKeyboardShortcutsParams {
-    selectedNodeIds: string[];
-    groups: NodeGroup[];
-    nodes: WorkflowNode[];
-    toggleNodeLock: (nodeId: string) => void;
-    createGroup: (nodeIds: string[]) => string;
-    deleteGroup: (groupId: string) => void;
-    unlockAllNodes: () => void;
-    addNode: (type: NodeType, position: {
-        x: number;
-        y: number;
-    }) => string;
-    togglePalette: () => void;
-    fitView: (options?: FitViewOptions) => void;
-    openShortcutHelp: () => void;
-    openNodeSearch: () => void;
-    deleteSelectedElements: () => void;
-}
 /**
- * Hook that handles keyboard shortcuts for the workflow canvas
- *
- * Shortcuts:
- * - M: Toggle sidebar/palette
- * - L: Toggle lock on selected nodes
- * - F: Fit view to selection (or all if none selected)
- * - ?: Show shortcut help modal
- * - Ctrl/Cmd+F: Open node search
- * - Ctrl/Cmd+G: Create group from selection
- * - Ctrl/Cmd+Shift+G: Ungroup selected nodes
- * - Ctrl/Cmd+Shift+L: Unlock all nodes
- * - Shift+I: Add image generator node
- * - Shift+V: Add video generator node
- * - Shift+P: Add prompt node
- * - Shift+L: Add LLM node
- * - Ctrl/Cmd+Z: Undo
- * - Ctrl/Cmd+Shift+Z: Redo
+ * JSON Schema property definition
+ * These come from Replicate model schemas
  */
-declare function useCanvasKeyboardShortcuts({ selectedNodeIds, groups, nodes, toggleNodeLock, createGroup, deleteGroup, unlockAllNodes, addNode, togglePalette, fitView, openShortcutHelp, openNodeSearch, deleteSelectedElements, }: UseCanvasKeyboardShortcutsParams): void;
+interface SchemaProperty {
+    type?: string;
+    title?: string;
+    description?: string;
+    default?: unknown;
+    minimum?: number;
+    maximum?: number;
+    'x-order'?: number;
+    allOf?: Array<{
+        $ref: string;
+    }>;
+    enum?: string[];
+    nullable?: boolean;
+}
 
-interface RequiredInputsResult {
-    /** Whether all required inputs have connections */
-    hasRequiredInputs: boolean;
-    /** List of missing required input handle IDs */
-    missingInputs: string[];
-    /** Map of handle ID to whether it's connected */
-    connectionStatus: Map<string, boolean>;
+interface UseAIGenNodeOptions {
+    nodeId: string;
+    selectedModel: SelectedModel | undefined;
+    schemaParams: Record<string, unknown> | undefined;
+}
+declare function useAIGenNode<TNodeData extends WorkflowNodeData>({ nodeId, selectedModel, schemaParams, }: UseAIGenNodeOptions): {
+    componentSchemas: Record<string, {
+        enum?: unknown[];
+        type?: string;
+    }> | undefined;
+    enumValues: Record<string, string[]> | undefined;
+    handleSchemaParamChange: (key: string, value: unknown) => void;
+    modelSupportsImageInput: boolean;
+    schemaProperties: Record<string, SchemaProperty> | undefined;
+};
+
+interface UseAIGenNodeHeaderOptions {
+    modelDisplayName: string;
+    isProcessing: boolean;
+    canGenerate: boolean;
+    hasOutput: boolean;
+    onModelBrowse: () => void;
+    onGenerate: () => void;
+    onStop: () => void;
+    onExpand: () => void;
+}
+declare function useAIGenNodeHeader({ modelDisplayName, isProcessing, canGenerate, hasOutput, onModelBrowse, onGenerate, onStop, onExpand, }: UseAIGenNodeHeaderOptions): {
+    titleElement: ReactNode;
+    headerActions: ReactNode;
+};
+
+interface UseAutoLoadModelSchemaOptions<TModel extends string> {
+    /** Current model type from node data */
+    currentModel: TModel | undefined;
+    /** Selected model with full schema (if already loaded) */
+    selectedModel: SelectedModel | undefined;
+    /** Map from internal model type to API model ID */
+    modelIdMap: Record<TModel, string>;
+    /** Callback when model is loaded from API */
+    onModelSelect: (model: ProviderModel) => void;
 }
 /**
- * Hook that checks if all required inputs for a node are connected.
- * Uses edge connections, not actual data values.
+ * Hook that auto-loads model schema for a node when the selectedModel is not set
+ * but a model type is already selected.
  *
- * @param nodeId - The node ID to check
- * @param nodeType - The node type (to look up required inputs from NODE_DEFINITIONS)
- * @returns Object with hasRequiredInputs boolean and details about missing inputs
+ * This handles the case where a node has a default model but hasn't loaded
+ * the full schema yet.
+ *
+ * Uses the WorkflowUIProvider's modelSchema service to fetch the schema.
+ * Falls back to no-op if the service is not configured.
  */
-declare function useRequiredInputs(nodeId: string, nodeType: NodeType): RequiredInputsResult;
+declare function useAutoLoadModelSchema<TModel extends string>({ currentModel, selectedModel, modelIdMap, onModelSelect, }: UseAutoLoadModelSchemaOptions<TModel>): void;
 
 interface MissingItem {
     type: 'connection' | 'data' | 'schema';
@@ -99,21 +114,77 @@ interface UseCanGenerateOptions {
  */
 declare function useCanGenerate({ nodeId, nodeType, inputSchema, schemaParams, }: UseCanGenerateOptions): CanGenerateResult;
 
+interface UseCanvasKeyboardShortcutsParams {
+    selectedNodeIds: string[];
+    groups: NodeGroup[];
+    nodes: WorkflowNode[];
+    toggleNodeLock: (nodeId: string) => void;
+    createGroup: (nodeIds: string[]) => string;
+    deleteGroup: (groupId: string) => void;
+    unlockAllNodes: () => void;
+    addNode: (type: NodeType, position: {
+        x: number;
+        y: number;
+    }) => string;
+    togglePalette: () => void;
+    fitView: (options?: FitViewOptions) => void;
+    openShortcutHelp: () => void;
+    openNodeSearch: () => void;
+    deleteSelectedElements: () => void;
+}
 /**
- * Hook for triggering and stopping node execution
- *
- * Encapsulates the common pattern of:
- * 1. Setting node status to processing
- * 2. Triggering execution
- * 3. Stopping execution and resetting status
+ * Hook that handles keyboard shortcuts for the workflow canvas
  *
- * @param nodeId - The ID of the node to execute
- * @returns handleGenerate - Callback to trigger node execution
- * @returns handleStop - Callback to stop node execution
+ * Shortcuts:
+ * - M: Toggle sidebar/palette
+ * - L: Toggle lock on selected nodes
+ * - F: Fit view to selection (or all if none selected)
+ * - ?: Show shortcut help modal
+ * - Ctrl/Cmd+F: Open node search
+ * - Ctrl/Cmd+G: Create group from selection
+ * - Ctrl/Cmd+Shift+G: Ungroup selected nodes
+ * - Ctrl/Cmd+Shift+L: Unlock all nodes
+ * - Shift+I: Add image generator node
+ * - Shift+V: Add video generator node
+ * - Shift+P: Add prompt node
+ * - Shift+L: Add LLM node
+ * - Ctrl/Cmd+Z: Undo
+ * - Ctrl/Cmd+Shift+Z: Redo
  */
-declare function useNodeExecution(nodeId: string): {
-    handleGenerate: () => void;
-    handleStop: () => void;
+declare function useCanvasKeyboardShortcuts({ selectedNodeIds, groups, nodes, toggleNodeLock, createGroup, deleteGroup, unlockAllNodes, addNode, togglePalette, fitView, openShortcutHelp, openNodeSearch, deleteSelectedElements, }: UseCanvasKeyboardShortcutsParams): void;
+
+interface CommentNavigation {
+    currentIndex: number;
+    totalCount: number;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+/**
+ * Hook that provides navigation props for nodes with comments.
+ * Returns null if the node has no comment.
+ */
+declare function useCommentNavigation(nodeId: string): CommentNavigation | null;
+
+interface UseMediaUploadOptions<T extends WorkflowNodeData> {
+    nodeId: string;
+    mediaType: 'image' | 'video';
+    initialUrl?: string;
+    getMetadata: (src: string) => Promise<Record<string, unknown>>;
+    buildUploadUpdate: (url: string, filename: string, metadata: Record<string, unknown>) => Partial<T>;
+    buildUrlUpdate: (url: string, metadata: Record<string, unknown> | null) => Partial<T>;
+    buildRemoveUpdate: () => Partial<T>;
+}
+declare function useMediaUpload<T extends WorkflowNodeData>({ nodeId, mediaType, initialUrl, getMetadata, buildUploadUpdate, buildUrlUpdate, buildRemoveUpdate, }: UseMediaUploadOptions<T>): {
+    fileInputRef: react.RefObject<HTMLInputElement | null>;
+    handleFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    handleRemove: () => void;
+    handleUrlKeyDown: (e: React.KeyboardEvent) => void;
+    handleUrlSubmit: () => Promise<void>;
+    isUploading: boolean;
+    setShowUrlInput: react.Dispatch<react.SetStateAction<boolean>>;
+    setUrlValue: react.Dispatch<react.SetStateAction<string>>;
+    showUrlInput: boolean;
+    urlValue: string;
 };
 
 type ModelMap = Record<string, string>;
@@ -138,53 +209,20 @@ declare function useModelSelection<TModel extends string, TNodeData extends Work
 };
 
 /**
- * JSON Schema property definition
- * These come from Replicate model schemas
+ * Hook for triggering and stopping node execution
+ *
+ * Encapsulates the common pattern of:
+ * 1. Setting node status to processing
+ * 2. Triggering execution
+ * 3. Stopping execution and resetting status
+ *
+ * @param nodeId - The ID of the node to execute
+ * @returns handleGenerate - Callback to trigger node execution
+ * @returns handleStop - Callback to stop node execution
  */
-interface SchemaProperty {
-    type?: string;
-    title?: string;
-    description?: string;
-    default?: unknown;
-    minimum?: number;
-    maximum?: number;
-    'x-order'?: number;
-    allOf?: Array<{
-        $ref: string;
-    }>;
-    enum?: string[];
-    nullable?: boolean;
-}
-
-interface UseAIGenNodeOptions {
-    nodeId: string;
-    selectedModel: SelectedModel | undefined;
-    schemaParams: Record<string, unknown> | undefined;
-}
-declare function useAIGenNode<TNodeData extends WorkflowNodeData>({ nodeId, selectedModel, schemaParams, }: UseAIGenNodeOptions): {
-    schemaProperties: Record<string, SchemaProperty> | undefined;
-    enumValues: Record<string, string[]> | undefined;
-    modelSupportsImageInput: boolean;
-    handleSchemaParamChange: (key: string, value: unknown) => void;
-    componentSchemas: Record<string, {
-        enum?: unknown[];
-        type?: string;
-    }> | undefined;
-};
-
-interface UseAIGenNodeHeaderOptions {
-    modelDisplayName: string;
-    isProcessing: boolean;
-    canGenerate: boolean;
-    hasOutput: boolean;
-    onModelBrowse: () => void;
-    onGenerate: () => void;
-    onStop: () => void;
-    onExpand: () => void;
-}
-declare function useAIGenNodeHeader({ modelDisplayName, isProcessing, canGenerate, hasOutput, onModelBrowse, onGenerate, onStop, onExpand, }: UseAIGenNodeHeaderOptions): {
-    titleElement: ReactNode;
-    headerActions: ReactNode;
+declare function useNodeExecution(nodeId: string): {
+    handleGenerate: () => void;
+    handleStop: () => void;
 };
 
 interface UsePromptAutocompleteOptions {
@@ -209,60 +247,22 @@ interface UsePromptAutocompleteReturn {
 }
 declare function usePromptAutocomplete({ availableVariables, textareaRef, localTemplate, setLocalTemplate, onTemplateCommit, }: UsePromptAutocompleteOptions): UsePromptAutocompleteReturn;
 
-interface UseMediaUploadOptions<T extends WorkflowNodeData> {
-    nodeId: string;
-    mediaType: 'image' | 'video';
-    initialUrl?: string;
-    getMetadata: (src: string) => Promise<Record<string, unknown>>;
-    buildUploadUpdate: (url: string, filename: string, metadata: Record<string, unknown>) => Partial<T>;
-    buildUrlUpdate: (url: string, metadata: Record<string, unknown> | null) => Partial<T>;
-    buildRemoveUpdate: () => Partial<T>;
-}
-declare function useMediaUpload<T extends WorkflowNodeData>({ nodeId, mediaType, initialUrl, getMetadata, buildUploadUpdate, buildUrlUpdate, buildRemoveUpdate, }: UseMediaUploadOptions<T>): {
-    fileInputRef: react.RefObject<HTMLInputElement | null>;
-    showUrlInput: boolean;
-    setShowUrlInput: react.Dispatch<react.SetStateAction<boolean>>;
-    urlValue: string;
-    setUrlValue: react.Dispatch<react.SetStateAction<string>>;
-    isUploading: boolean;
-    handleFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
-    handleRemove: () => void;
-    handleUrlSubmit: () => Promise<void>;
-    handleUrlKeyDown: (e: React.KeyboardEvent) => void;
-};
-
-interface UseAutoLoadModelSchemaOptions<TModel extends string> {
-    /** Current model type from node data */
-    currentModel: TModel | undefined;
-    /** Selected model with full schema (if already loaded) */
-    selectedModel: SelectedModel | undefined;
-    /** Map from internal model type to API model ID */
-    modelIdMap: Record<TModel, string>;
-    /** Callback when model is loaded from API */
-    onModelSelect: (model: ProviderModel) => void;
+interface RequiredInputsResult {
+    /** Whether all required inputs have connections */
+    hasRequiredInputs: boolean;
+    /** List of missing required input handle IDs */
+    missingInputs: string[];
+    /** Map of handle ID to whether it's connected */
+    connectionStatus: Map<string, boolean>;
 }
 /**
- * Hook that auto-loads model schema for a node when the selectedModel is not set
- * but a model type is already selected.
- *
- * This handles the case where a node has a default model but hasn't loaded
- * the full schema yet.
+ * Hook that checks if all required inputs for a node are connected.
+ * Uses edge connections, not actual data values.
  *
- * Uses the WorkflowUIProvider's modelSchema service to fetch the schema.
- * Falls back to no-op if the service is not configured.
- */
-declare function useAutoLoadModelSchema<TModel extends string>({ currentModel, selectedModel, modelIdMap, onModelSelect, }: UseAutoLoadModelSchemaOptions<TModel>): void;
-
-interface CommentNavigation {
-    currentIndex: number;
-    totalCount: number;
-    onPrevious: () => void;
-    onNext: () => void;
-}
-/**
- * Hook that provides navigation props for nodes with comments.
- * Returns null if the node has no comment.
+ * @param nodeId - The node ID to check
+ * @param nodeType - The node type (to look up required inputs from NODE_DEFINITIONS)
+ * @returns Object with hasRequiredInputs boolean and details about missing inputs
  */
-declare function useCommentNavigation(nodeId: string): CommentNavigation | null;
+declare function useRequiredInputs(nodeId: string, nodeType: NodeType): RequiredInputsResult;
 
 export { type CommentNavigation as C, useAIGenNodeHeader as a, useAutoLoadModelSchema as b, useCanGenerate as c, useCanvasKeyboardShortcuts as d, useCommentNavigation as e, useMediaUpload as f, useModelSelection as g, useNodeExecution as h, usePromptAutocomplete as i, useRequiredInputs as j, useAIGenNode as u };