@genfeedai/workflow-ui 0.1.5 → 0.2.1

package/README.md

@@ -0,0 +1,53 @@
+# @genfeedai/workflow-ui
+
+Shared UI components for the Genfeed workflow editor built on React Flow.
+
+## Installation
+
+```bash
+npm install @genfeedai/workflow-ui
+# or
+bun add @genfeedai/workflow-ui
+```
+
+### Peer Dependencies
+
+```bash
+npm install @xyflow/react react react-dom zustand zundo next
+```
+
+## Usage
+
+```typescript
+import { WorkflowCanvas } from '@genfeedai/workflow-ui/canvas';
+import { useWorkflowStore } from '@genfeedai/workflow-ui/stores';
+import { WorkflowProvider } from '@genfeedai/workflow-ui/provider';
+```
+
+### Subpath Exports
+
+| Export | Description |
+|--------|-------------|
+| `@genfeedai/workflow-ui` | Main entry (re-exports all) |
+| `@genfeedai/workflow-ui/canvas` | Workflow canvas components |
+| `@genfeedai/workflow-ui/nodes` | Node type components |
+| `@genfeedai/workflow-ui/panels` | Side panels (inspector, settings) |
+| `@genfeedai/workflow-ui/toolbar` | Toolbar components |
+| `@genfeedai/workflow-ui/hooks` | React hooks |
+| `@genfeedai/workflow-ui/stores` | Zustand stores |
+| `@genfeedai/workflow-ui/provider` | Context providers |
+| `@genfeedai/workflow-ui/ui` | Primitive UI components |
+| `@genfeedai/workflow-ui/lib` | Utility functions |
+| `@genfeedai/workflow-ui/styles` | CSS stylesheet |
+
+### Styles
+
+Import the stylesheet in your app:
+
+```typescript
+import '@genfeedai/workflow-ui/styles';
+```
+
+## License
+
+AGPL-3.0

package/dist/canvas.mjs

@@ -1,8 +1,8 @@
-export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-O5II6BOJ.mjs';
-import './chunk-PANZDSP6.mjs';
+export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-4VEN4UN7.mjs';
+import './chunk-WBR34V4L.mjs';
 import './chunk-ZJD5WMR3.mjs';
 import './chunk-6PSJTBNV.mjs';
-import './chunk-JTPADIUO.mjs';
+import './chunk-2JQSKIWR.mjs';
 import './chunk-OY7BRSGG.mjs';
 import './chunk-ZD2BADZO.mjs';
 import './chunk-GWBGK3KL.mjs';

package/dist/{chunk-JTPADIUO.mjs → chunk-2JQSKIWR.mjs}

@@ -28,8 +28,10 @@ function calculateWorkflowCost(nodes) {
         nodeLabel: label,
         nodeType: type,
         model,
-        unit: "per image",
-        cost
+        unitPrice: cost,
+        quantity: 1,
+        subtotal: cost,
+        unit: "per image"
       });
       continue;
     }
@@ -43,33 +45,40 @@ function calculateWorkflowCost(nodes) {
         const entry = priceEntry;
         perSecond = generateAudio ? entry.withAudio ?? 0 : entry.withoutAudio ?? 0;
       }
+      const subtotal = perSecond * duration;
       estimates.push({
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
         model,
+        unitPrice: perSecond,
+        quantity: duration,
+        subtotal,
         unit: `${duration}s video`,
-        cost: perSecond * duration
+        duration,
+        withAudio: generateAudio
       });
       continue;
     }
     if (isNodeType(type, LUMA_NODE_TYPES)) {
       const model = getDataField(data, "model", "photon-flash-1");
       const inputType = getDataField(data, "inputType", "image");
-      let cost = 0;
+      let subtotal = 0;
       if (inputType === "video") {
-        cost = PRICING["luma-reframe-video"] * DEFAULT_VIDEO_DURATION;
+        subtotal = PRICING["luma-reframe-video"] * DEFAULT_VIDEO_DURATION;
       } else {
         const imageEntry = PRICING["luma-reframe-image"];
-        cost = imageEntry[model] ?? 0.01;
+        subtotal = imageEntry[model] ?? 0.01;
       }
       estimates.push({
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
         model,
-        unit: inputType === "video" ? "per video" : "per image",
-        cost
+        unitPrice: subtotal,
+        quantity: 1,
+        subtotal,
+        unit: inputType === "video" ? "per video" : "per image"
       });
       continue;
     }
@@ -87,8 +96,11 @@ function calculateWorkflowCost(nodes) {
           nodeLabel: label,
           nodeType: type,
           model: "topaz-video",
+          unitPrice: pricePerChunk,
+          quantity: chunks,
+          subtotal: pricePerChunk * chunks,
           unit: `${duration}s video`,
-          cost: pricePerChunk * chunks
+          duration
         });
       } else {
         const tier = PRICING["topaz-image-upscale"].find((t) => 1 <= t.maxMP) ?? PRICING["topaz-image-upscale"][0];
@@ -97,8 +109,10 @@ function calculateWorkflowCost(nodes) {
           nodeLabel: label,
           nodeType: type,
           model: getDataField(data, "model", "topaz-standard-v2"),
-          unit: "per image",
-          cost: tier.price
+          unitPrice: tier.price,
+          quantity: 1,
+          subtotal: tier.price,
+          unit: "per image"
         });
       }
       continue;
@@ -106,19 +120,22 @@ function calculateWorkflowCost(nodes) {
     if (type === "llm") {
       const maxTokens = getDataField(data, "maxTokens", 1024);
       const estimatedTokens = maxTokens * 3;
+      const subtotal = estimatedTokens * PRICING.llama;
       estimates.push({
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
         model: getDataField(data, "model", "llama"),
-        unit: `~${estimatedTokens} tokens`,
-        cost: estimatedTokens * PRICING.llama
+        unitPrice: PRICING.llama,
+        quantity: estimatedTokens,
+        subtotal,
+        unit: `~${estimatedTokens} tokens`
       });
     }
   }
   return {
-    total: estimates.reduce((sum, e) => sum + e.cost, 0),
-    nodes: estimates
+    total: estimates.reduce((sum, e) => sum + e.subtotal, 0),
+    items: estimates
   };
 }
 function formatCost(amount) {

package/dist/{chunk-O5II6BOJ.mjs → chunk-4VEN4UN7.mjs}

@@ -1,5 +1,5 @@
-import { nodeTypes, NodeDetailModal } from './chunk-PANZDSP6.mjs';
-import { calculateWorkflowCost, formatCost } from './chunk-JTPADIUO.mjs';
+import { nodeTypes, NodeDetailModal } from './chunk-WBR34V4L.mjs';
+import { calculateWorkflowCost, formatCost } from './chunk-2JQSKIWR.mjs';
 import { useContextMenu, useCanvasKeyboardShortcuts, ContextMenu } from './chunk-ZD2BADZO.mjs';
 import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-LT3ZJJL6.mjs';
 import { useWorkflowStore, getHandleType } from './chunk-R727OFBR.mjs';

package/dist/{chunk-AUQGOJOQ.mjs → chunk-JT4Y5H3U.mjs}

@@ -1,4 +1,4 @@
-import { calculateWorkflowCost, formatCost } from './chunk-JTPADIUO.mjs';
+import { calculateWorkflowCost, formatCost } from './chunk-2JQSKIWR.mjs';
 import { useSettingsStore, useExecutionStore, useUIStore } from './chunk-LT3ZJJL6.mjs';
 import { useWorkflowStore } from './chunk-R727OFBR.mjs';
 import { X, CloudOff, Loader2, Cloud, Check, ChevronDown, SaveAll, Save, FolderOpen, Bug, LayoutGrid, Undo2, Redo2, Settings, AlertCircle, Minus, Plus, Square, Play, ChevronUp, PlayCircle, RotateCcw, DollarSign, MoreVertical } from 'lucide-react';
@@ -690,7 +690,7 @@ function CostIndicator() {
   const { openModal } = useUIStore();
   const breakdown = useMemo(() => calculateWorkflowCost(nodes), [nodes]);
   const displayCost = isRunning && actualCost > 0 ? actualCost : breakdown.total;
-  if (breakdown.nodes.length === 0) return null;
+  if (breakdown.items.length === 0) return null;
   return /* @__PURE__ */ jsxs(
     "button",
     {

package/dist/{chunk-PANZDSP6.mjs → chunk-WBR34V4L.mjs}

@@ -13,7 +13,7 @@ import { NODE_DEFINITIONS, NodeStatusEnum } from '@genfeedai/types';
 import { useUpdateNodeInternals, NodeResizer, Handle, Position } from '@xyflow/react';
 import { clsx } from 'clsx';
 import { GitBranch, ArrowLeftFromLine, ArrowRightToLine, Subtitles, Pencil, Columns2, LayoutGrid, Grid3X3, Puzzle, Navigation, Volume2, AudioLines, Mic, Maximize, Crop, RefreshCw, AtSign, Download, Eye, CheckCircle, Share2, Scissors, Layers, Wand2, Maximize2, Brain, Video, Sparkles, Film, FileVideo, FileText, MessageSquare, Image as Image$1, Square, Lock, Unlock, Copy, RotateCcw, Loader2, ChevronDown, ChevronRight, AlertCircle, ImageIcon, Expand, Play, AlertTriangle, CheckCircle2, Upload, Link, X, Music, Save, Clock, Shapes, ChevronLeft, SplitSquareHorizontal, Zap, ZoomOut, ZoomIn } from 'lucide-react';
-import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, useLayoutEffect, Component } from 'react';
+import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, Component, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Image4 from 'next/image';
 import { createPortal } from 'react-dom';

package/dist/{hooks.d.mts → hooks.d.ts}

@@ -1,6 +1,6 @@
-export { C as CommentNavigation, e as useAIGenNode, f as useAIGenNodeHeader, i as useAutoLoadModelSchema, b as useCanGenerate, u as useCanvasKeyboardShortcuts, j as useCommentNavigation, h as useMediaUpload, d as useModelSelection, c as useNodeExecution, g as usePromptAutocomplete, a as useRequiredInputs } from './useCommentNavigation-NzJjkaj2.mjs';
+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 { WorkflowNode, WorkflowEdge } from '@genfeedai/types';
-import { a as ContextMenuPosition, C as ContextMenuType } from './contextMenuStore-DMg0hJQ1.mjs';
+import { a as ContextMenuPosition, C as ContextMenuType } from './contextMenuStore-DMg0hJQ1.js';
 import '@xyflow/react';
 import 'react';
 import 'zustand';

package/dist/{index.d.mts → index.d.ts}

@@ -1,14 +1,14 @@
-export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './canvas.mjs';
-export { BaseNode, nodeTypes } from './nodes.mjs';
-export { DebugPanel, NodePalette, PanelContainer } from './panels.mjs';
-export { BottomBar, CostIndicator, DropdownItem, OverflowMenu, OverflowMenuProps, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown, ToolbarDropdownProps } from './toolbar.mjs';
-export { C as CommentNavigation, e as useAIGenNode, f as useAIGenNodeHeader, i as useAutoLoadModelSchema, b as useCanGenerate, u as useCanvasKeyboardShortcuts, j as useCommentNavigation, h as useMediaUpload, d as useModelSelection, c as useNodeExecution, g as usePromptAutocomplete, a as useRequiredInputs } from './useCommentNavigation-NzJjkaj2.mjs';
+export { ConnectionDropMenu, EdgeToolbar, EditableEdge, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './canvas.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, p as configurePromptLibrary, j as useAnnotationStore, b as useExecutionStore, i as usePromptEditorStore, o as usePromptLibraryStore, c as useSettingsStore, a as useUIStore, u as useWorkflowStore } from './promptLibraryStore-Bgw5LzvD.mjs';
-export { WorkflowUIProvider, useWorkflowUIConfig } from './provider.mjs';
-export { M as ModelBrowserModalProps, P as PromptLibraryService, a as PromptPickerProps, W as WorkflowUIConfig } from './types-CF6DPx0P.mjs';
+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 { 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';
 import 'zustand';

package/dist/index.mjs

@@ -1,10 +1,10 @@
-export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-O5II6BOJ.mjs';
-export { BaseNode, nodeTypes } from './chunk-PANZDSP6.mjs';
+export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas } from './chunk-4VEN4UN7.mjs';
+export { BaseNode, nodeTypes } from './chunk-WBR34V4L.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-AUQGOJOQ.mjs';
-import './chunk-JTPADIUO.mjs';
+export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-JT4Y5H3U.mjs';
+import './chunk-2JQSKIWR.mjs';
 import './chunk-OY7BRSGG.mjs';
 export { useCommentNavigation } from './chunk-7H3WJJYS.mjs';
 export { useCanvasKeyboardShortcuts } from './chunk-ZD2BADZO.mjs';

package/dist/{lib.d.mts → lib.d.ts}

@@ -1,4 +1,5 @@
-import { HandleDefinition, NodeType, WorkflowNodeData, EasingPreset, CubicBezier, WorkflowNode, ImageModel, VideoModel, LipSyncModel, TextModel } from '@genfeedai/types';
+import { HandleDefinition, NodeType, WorkflowNodeData, CubicBezier, EasingPreset, WorkflowNode, CostBreakdown, ImageModel, LipSyncModel, TextModel, VideoModel } from '@genfeedai/types';
+export { CostBreakdown, NodeCostEstimate } from '@genfeedai/types';
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -324,18 +325,6 @@ declare function deduplicatedFetch(url: string, options?: RequestInit): Promise<
  */
 declare function clearFetchCache(): void;
 
-interface NodeCostEstimate {
-    nodeId: string;
-    nodeLabel: string;
-    nodeType: string;
-    model: string;
-    unit: string;
-    cost: number;
-}
-interface CostBreakdown {
-    total: number;
-    nodes: NodeCostEstimate[];
-}
 declare function calculateWorkflowCost(nodes: WorkflowNode[]): CostBreakdown;
 declare function formatCost(amount: number): string;
 
@@ -407,4 +396,4 @@ declare function getLipSyncModelLabel(model: LipSyncModel): string;
 declare function getLLMModelLabel(model: TextModel): string;
 declare function lipSyncModelSupportsImage(model: LipSyncModel): boolean;
 
-export { CONNECTION_FIELDS, type CostBreakdown, CubicBezierEditor, DEFAULT_CUSTOM_BEZIER, DEFAULT_IMAGE_MODEL, DEFAULT_LIPSYNC_MODEL, DEFAULT_LLM_MODEL, DEFAULT_VIDEO_MODEL, EASING_BEZIER_MAP, EASING_PRESETS, type EasingFunction, type EasingPresetName, type GridCandidate, type GridCell, type GridDetectionResult, IMAGE_MODELS, IMAGE_MODEL_ID_MAP, IMAGE_MODEL_MAP, type ImageModelConfig, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, LLM_MODELS, LLM_MODEL_ID_MAP, LLM_MODEL_MAP, type LipSyncModelConfig, type MediaInfo, type NodeCostEstimate, PRESET_BEZIERS, type TextModelConfig, VIDEO_MODELS, VIDEO_MODEL_ID_MAP, VIDEO_MODEL_MAP, type VideoModelConfig, analyzeWarpCurve, applySpeedCurve, calculateNodeSize, calculateNodeSizePreservingHeight, calculateWarpedDuration, calculateWorkflowCost, clearFetchCache, createAsymmetricEase, createBezierEasing, createGridForDimensions, deduplicatedFetch, detectAndSplitGrid, detectGrid, detectGridWithDimensions, easing, evaluateBezier, extractEnumValues, formatCost, generateHandlesFromSchema, getAllEasingNames, getEasingBezier, getEasingDisplayName, getEasingFunction, getGridCandidates, getImageDimensions$1 as getImageDimensions, getImageDimensions as getImageDimensionsFromDataUrl, getImageModelLabel, getLLMModelLabel, getLipSyncModelLabel, getMediaFromNode, getPresetBezier, getSchemaDefaults, getVideoDimensions as getVideoDimensionsFromUrl, getVideoMetadata, getVideoModelLabel, isSchemaHandle, lipSyncModelSupportsImage, splitImage, splitWithDimensions, supportsImageInput, validateRequiredSchemaFields, validateWarpFunction, warpTime };
+export { CONNECTION_FIELDS, CubicBezierEditor, DEFAULT_CUSTOM_BEZIER, DEFAULT_IMAGE_MODEL, DEFAULT_LIPSYNC_MODEL, DEFAULT_LLM_MODEL, DEFAULT_VIDEO_MODEL, EASING_BEZIER_MAP, EASING_PRESETS, type EasingFunction, type EasingPresetName, type GridCandidate, type GridCell, type GridDetectionResult, IMAGE_MODELS, IMAGE_MODEL_ID_MAP, IMAGE_MODEL_MAP, type ImageModelConfig, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, LLM_MODELS, LLM_MODEL_ID_MAP, LLM_MODEL_MAP, type LipSyncModelConfig, type MediaInfo, PRESET_BEZIERS, type TextModelConfig, VIDEO_MODELS, VIDEO_MODEL_ID_MAP, VIDEO_MODEL_MAP, type VideoModelConfig, analyzeWarpCurve, applySpeedCurve, calculateNodeSize, calculateNodeSizePreservingHeight, calculateWarpedDuration, calculateWorkflowCost, clearFetchCache, createAsymmetricEase, createBezierEasing, createGridForDimensions, deduplicatedFetch, detectAndSplitGrid, detectGrid, detectGridWithDimensions, easing, evaluateBezier, extractEnumValues, formatCost, generateHandlesFromSchema, getAllEasingNames, getEasingBezier, getEasingDisplayName, getEasingFunction, getGridCandidates, getImageDimensions$1 as getImageDimensions, getImageDimensions as getImageDimensionsFromDataUrl, getImageModelLabel, getLLMModelLabel, getLipSyncModelLabel, getMediaFromNode, getPresetBezier, getSchemaDefaults, getVideoDimensions as getVideoDimensionsFromUrl, getVideoMetadata, getVideoModelLabel, isSchemaHandle, lipSyncModelSupportsImage, splitImage, splitWithDimensions, supportsImageInput, validateRequiredSchemaFields, validateWarpFunction, warpTime };

package/dist/lib.mjs

@@ -1,6 +1,6 @@
 import { easing, getEasingFunction } from './chunk-6PSJTBNV.mjs';
 export { CubicBezierEditor, DEFAULT_CUSTOM_BEZIER, DEFAULT_IMAGE_MODEL, DEFAULT_LIPSYNC_MODEL, DEFAULT_LLM_MODEL, DEFAULT_VIDEO_MODEL, EASING_BEZIER_MAP, EASING_PRESETS, IMAGE_MODELS, IMAGE_MODEL_ID_MAP, IMAGE_MODEL_MAP, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, LLM_MODELS, LLM_MODEL_ID_MAP, LLM_MODEL_MAP, PRESET_BEZIERS, VIDEO_MODELS, VIDEO_MODEL_ID_MAP, VIDEO_MODEL_MAP, applySpeedCurve, createAsymmetricEase, createBezierEasing, easing, evaluateBezier, generateHandlesFromSchema, getAllEasingNames, getEasingBezier, getEasingDisplayName, getEasingFunction, getImageModelLabel, getLLMModelLabel, getLipSyncModelLabel, getMediaFromNode, getPresetBezier, getVideoModelLabel, isSchemaHandle, lipSyncModelSupportsImage } from './chunk-6PSJTBNV.mjs';
-export { calculateWorkflowCost, formatCost } from './chunk-JTPADIUO.mjs';
+export { calculateWorkflowCost, formatCost } from './chunk-2JQSKIWR.mjs';
 import './chunk-OY7BRSGG.mjs';
 export { CONNECTION_FIELDS, extractEnumValues, getImageDimensions, getSchemaDefaults, getVideoMetadata, supportsImageInput, validateRequiredSchemaFields } from './chunk-EFXQT23N.mjs';
 

package/dist/nodes.mjs

@@ -1,4 +1,4 @@
-export { AnimationNode, AnnotationNode, AudioInputNode, BaseNode, DownloadNode, ImageCompareNode, ImageGenNode, ImageGridSplitNode, ImageInputNode, LLMNode, LipSyncNode, MotionControlNode, NodeDetailModal, OutputGalleryNode, OutputNode, PromptConstructorNode, PromptNode, ReframeNode, ResizeNode, SubtitleNode, TextToSpeechNode, TranscribeNode, UpscaleNode, VideoFrameExtractNode, VideoGenNode, VideoInputNode, VideoStitchNode, VideoTrimNode, VoiceChangeNode, WorkflowInputNode, WorkflowOutputNode, WorkflowRefNode, nodeTypes, setWorkflowRefApi } from './chunk-PANZDSP6.mjs';
+export { AnimationNode, AnnotationNode, AudioInputNode, BaseNode, DownloadNode, ImageCompareNode, ImageGenNode, ImageGridSplitNode, ImageInputNode, LLMNode, LipSyncNode, MotionControlNode, NodeDetailModal, OutputGalleryNode, OutputNode, PromptConstructorNode, PromptNode, ReframeNode, ResizeNode, SubtitleNode, TextToSpeechNode, TranscribeNode, UpscaleNode, VideoFrameExtractNode, VideoGenNode, VideoInputNode, VideoStitchNode, VideoTrimNode, VoiceChangeNode, WorkflowInputNode, WorkflowOutputNode, WorkflowRefNode, nodeTypes, setWorkflowRefApi } from './chunk-WBR34V4L.mjs';
 import './chunk-ZJD5WMR3.mjs';
 import './chunk-6PSJTBNV.mjs';
 import './chunk-OY7BRSGG.mjs';

package/dist/{promptLibraryStore-Bgw5LzvD.d.mts → promptLibraryStore-Dl3Q3cP6.d.ts}

@@ -3,7 +3,7 @@ import * as _genfeedai_types from '@genfeedai/types';
 import { HandleType, WorkflowNode, WorkflowEdge, NodeGroup, EdgeStyle, NodeType, WorkflowNodeData, GroupColor, WorkflowFile, ValidationResult, ProviderType, IPrompt, PromptCategory, IQueryPrompts, ICreatePrompt } from '@genfeedai/types';
 import * as zundo from 'zundo';
 import { XYPosition, NodeChange, EdgeChange, Connection } from '@xyflow/react';
-import { P as PromptLibraryService } from './types-CF6DPx0P.mjs';
+import { P as PromptLibraryService } from './types-IEKYuYhu.js';
 
 type ModalType = 'templates' | 'cost' | 'welcome' | 'settings' | 'promptLibrary' | 'modelBrowser' | 'nodeDetail' | 'shortcutHelp' | 'nodeSearch' | null;
 type NodeDetailTab = 'preview' | 'history';
@@ -489,4 +489,4 @@ interface PromptLibraryStore {
 }
 declare const usePromptLibraryStore: zustand.UseBoundStore<zustand.StoreApi<PromptLibraryStore>>;
 
-export { type AnnotationTool as A, type BaseShape as B, type CircleShape as C, type DebugPayload as D, type ExecutionStore as E, type FreehandShape as F, type ImageHistoryItem as I, type Job as J, type ModalType as M, type NodeDetailTab as N, type ProviderConfig as P, type RecentModel as R, type ToolOptions as T, type WorkflowStore as W, useUIStore as a, useExecutionStore as b, useSettingsStore as c, type WorkflowData as d, type WorkflowState as e, type ProviderSettings as f, type DefaultModelSettings as g, PROVIDER_INFO as h, usePromptEditorStore as i, useAnnotationStore as j, type RectangleShape as k, type ArrowShape as l, type TextShape as m, type AnnotationShape as n, usePromptLibraryStore as o, configurePromptLibrary as p, useWorkflowStore as u };
+export { type AnnotationShape as A, type BaseShape as B, type CircleShape as C, type DebugPayload as D, type ExecutionStore as E, type FreehandShape as F, type ImageHistoryItem as I, type Job as J, type ModalType as M, type NodeDetailTab as N, PROVIDER_INFO as P, type RecentModel as R, type TextShape as T, type WorkflowStore as W, type AnnotationTool as a, type ArrowShape as b, type DefaultModelSettings as c, type ProviderConfig as d, type ProviderSettings as e, type RectangleShape as f, type ToolOptions as g, type WorkflowData as h, type WorkflowState as i, configurePromptLibrary as j, useExecutionStore as k, usePromptEditorStore as l, usePromptLibraryStore as m, useSettingsStore as n, useUIStore as o, useWorkflowStore as p, useAnnotationStore as u };

package/dist/{provider.d.mts → provider.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { W as WorkflowUIConfig } from './types-CF6DPx0P.mjs';
-export { F as FileUploadService, M as ModelBrowserModalProps, b as ModelSchemaService, P as PromptLibraryService, a as PromptPickerProps, c as WorkflowsApiService } from './types-CF6DPx0P.mjs';
+import { W as WorkflowUIConfig } from './types-IEKYuYhu.js';
+export { F as FileUploadService, M as ModelBrowserModalProps, b as ModelSchemaService, P as PromptLibraryService, a as PromptPickerProps, c as WorkflowsApiService } from './types-IEKYuYhu.js';
 import '@genfeedai/types';
 
 /**

package/dist/{stores.d.mts → stores.d.ts}

@@ -1,11 +1,11 @@
-import { W as WorkflowStore } from './promptLibraryStore-Bgw5LzvD.mjs';
-export { n as AnnotationShape, A as AnnotationTool, l as ArrowShape, B as BaseShape, C as CircleShape, D as DebugPayload, g as DefaultModelSettings, E as ExecutionStore, F as FreehandShape, J as Job, M as ModalType, N as NodeDetailTab, h as PROVIDER_INFO, P as ProviderConfig, f as ProviderSettings, R as RecentModel, k as RectangleShape, m as TextShape, T as ToolOptions, d as WorkflowData, e as WorkflowState, p as configurePromptLibrary, j as useAnnotationStore, b as useExecutionStore, i as usePromptEditorStore, o as usePromptLibraryStore, c as useSettingsStore, a as useUIStore, u as useWorkflowStore } from './promptLibraryStore-Bgw5LzvD.mjs';
+import { W as WorkflowStore } from './promptLibraryStore-Dl3Q3cP6.js';
+export { A as AnnotationShape, a as AnnotationTool, b as ArrowShape, B as BaseShape, C as CircleShape, D as DebugPayload, c as DefaultModelSettings, E as ExecutionStore, F as FreehandShape, J as Job, M as ModalType, N as NodeDetailTab, P as PROVIDER_INFO, d as ProviderConfig, e as ProviderSettings, R as RecentModel, f as RectangleShape, T as TextShape, g as ToolOptions, h as WorkflowData, i as WorkflowState, 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';
 import * as _xyflow_react from '@xyflow/react';
 import * as _genfeedai_types from '@genfeedai/types';
-export { C as ContextMenuType, u as useContextMenuStore } from './contextMenuStore-DMg0hJQ1.mjs';
+export { C as ContextMenuType, u as useContextMenuStore } from './contextMenuStore-DMg0hJQ1.js';
 import 'zustand';
 import 'zundo';
-import './types-CF6DPx0P.mjs';
+import './types-IEKYuYhu.js';
 import 'react';
 
 /**

package/dist/toolbar.mjs

@@ -1,5 +1,5 @@
-export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-AUQGOJOQ.mjs';
-import './chunk-JTPADIUO.mjs';
+export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown } from './chunk-JT4Y5H3U.mjs';
+import './chunk-2JQSKIWR.mjs';
 import './chunk-OY7BRSGG.mjs';
 import './chunk-LDN7IX4Y.mjs';
 import './chunk-LT3ZJJL6.mjs';

package/dist/{types-CF6DPx0P.d.mts → types-IEKYuYhu.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { IQueryPrompts, IPrompt, ICreatePrompt, ProviderModel, ModelCapability } from '@genfeedai/types';
+import { ProviderModel, ModelCapability, IQueryPrompts, IPrompt, ICreatePrompt } from '@genfeedai/types';
 
 interface FileUploadService {
     uploadFile: (path: string, file: File) => Promise<{

package/dist/{useCommentNavigation-NzJjkaj2.d.mts → useCommentNavigation-BakbiiIc.d.ts}

@@ -265,4 +265,4 @@ interface CommentNavigation {
  */
 declare function useCommentNavigation(nodeId: string): CommentNavigation | null;
 
-export { type CommentNavigation as C, useRequiredInputs as a, useCanGenerate as b, useNodeExecution as c, useModelSelection as d, useAIGenNode as e, useAIGenNodeHeader as f, usePromptAutocomplete as g, useMediaUpload as h, useAutoLoadModelSchema as i, useCommentNavigation as j, useCanvasKeyboardShortcuts as u };
+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 };

package/package.json

@@ -1,70 +1,60 @@
 {
   "name": "@genfeedai/workflow-ui",
-  "version": "0.1.5",
+  "version": "0.2.1",
+  "type": "module",
   "license": "AGPL-3.0",
   "description": "Shared UI components for Genfeed workflow editor",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/genfeedai/core.git",
-    "directory": "packages/workflow-ui"
+    "url": "git+https://github.com/genfeedai/packages.git",
+    "directory": "workflow-ui"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.mjs"
     },
     "./canvas": {
       "types": "./dist/canvas.d.ts",
-      "import": "./dist/canvas.mjs",
-      "require": "./dist/canvas.js"
+      "import": "./dist/canvas.mjs"
     },
     "./nodes": {
       "types": "./dist/nodes.d.ts",
-      "import": "./dist/nodes.mjs",
-      "require": "./dist/nodes.js"
+      "import": "./dist/nodes.mjs"
     },
     "./panels": {
       "types": "./dist/panels.d.ts",
-      "import": "./dist/panels.mjs",
-      "require": "./dist/panels.js"
+      "import": "./dist/panels.mjs"
     },
     "./toolbar": {
       "types": "./dist/toolbar.d.ts",
-      "import": "./dist/toolbar.mjs",
-      "require": "./dist/toolbar.js"
+      "import": "./dist/toolbar.mjs"
     },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
-      "import": "./dist/hooks.mjs",
-      "require": "./dist/hooks.js"
+      "import": "./dist/hooks.mjs"
     },
     "./stores": {
       "types": "./dist/stores.d.ts",
-      "import": "./dist/stores.mjs",
-      "require": "./dist/stores.js"
+      "import": "./dist/stores.mjs"
     },
     "./provider": {
       "types": "./dist/provider.d.ts",
-      "import": "./dist/provider.mjs",
-      "require": "./dist/provider.js"
+      "import": "./dist/provider.mjs"
     },
     "./ui": {
       "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.mjs",
-      "require": "./dist/ui.js"
+      "import": "./dist/ui.mjs"
     },
     "./lib": {
       "types": "./dist/lib.d.ts",
-      "import": "./dist/lib.mjs",
-      "require": "./dist/lib.js"
+      "import": "./dist/lib.mjs"
     },
     "./styles": "./src/styles/workflow-ui.css"
   },
@@ -85,7 +75,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^2.0.4",
-    "@genfeedai/types": "0.1.1",
+    "@genfeedai/types": "workspace:*",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",
@@ -98,21 +88,22 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@genfeedai/core": "workspace:*",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
-    "@genfeedai/core": "0.1.1",
-    "jsdom": "26.0.0",
-    "react-compare-slider": "^3.1.0",
+    "@types/node": "^25.2.3",
     "@types/react": "19.2.4",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.3",
     "@xyflow/react": "12.10.0",
+    "jsdom": "26.0.0",
     "react": "19.2.4",
+    "react-compare-slider": "^3.1.0",
     "react-dom": "19.2.4",
     "tsup": "8.4.0",
     "typescript": "5.9.3",
     "vitest": "3.0.4",
-    "zustand": "5.0.3",
-    "zundo": "2.3.0"
+    "zundo": "2.3.0",
+    "zustand": "5.0.3"
   },
   "scripts": {
     "build": "tsup",