@genfeedai/workflow-ui 0.2.2 → 0.2.4

package/dist/{chunk-PCIWWD37.mjs → chunk-7LV4UAUS.mjs}

@@ -1,34 +1,39 @@
 import { create } from 'zustand';
 
 var useContextMenuStore = create((set) => ({
+  close: () => {
+    set({
+      isOpen: false,
+      menuType: null,
+      targetId: null,
+      targetIds: null
+    });
+  },
   isOpen: false,
-  position: { x: 0, y: 0 },
   menuType: null,
-  targetId: null,
-  targetIds: null,
-  openNodeMenu: (nodeId, x, y) => {
+  openEdgeMenu: (edgeId, x, y) => {
     set({
       isOpen: true,
+      menuType: "edge",
       position: { x, y },
-      menuType: "node",
-      targetId: nodeId,
+      targetId: edgeId,
       targetIds: null
     });
   },
-  openEdgeMenu: (edgeId, x, y) => {
+  openNodeMenu: (nodeId, x, y) => {
     set({
       isOpen: true,
+      menuType: "node",
       position: { x, y },
-      menuType: "edge",
-      targetId: edgeId,
+      targetId: nodeId,
       targetIds: null
     });
   },
   openPaneMenu: (x, y) => {
     set({
       isOpen: true,
-      position: { x, y },
       menuType: "pane",
+      position: { x, y },
       targetId: null,
       targetIds: null
     });
@@ -36,20 +41,15 @@ var useContextMenuStore = create((set) => ({
   openSelectionMenu: (nodeIds, x, y) => {
     set({
       isOpen: true,
-      position: { x, y },
       menuType: "selection",
+      position: { x, y },
       targetId: null,
       targetIds: nodeIds
     });
   },
-  close: () => {
-    set({
-      isOpen: false,
-      menuType: null,
-      targetId: null,
-      targetIds: null
-    });
-  }
+  position: { x: 0, y: 0 },
+  targetId: null,
+  targetIds: null
 }));
 
 // src/stores/workflow/selectors.ts

package/dist/{chunk-7SKSRSS7.mjs → chunk-B4EAAKYF.mjs}

@@ -10,27 +10,27 @@ function cn(...inputs) {
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
     variants: {
-      variant: {
-        default: "bg-white text-black hover:bg-white/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-lg": "size-10",
         "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"
+      },
+      variant: {
+        default: "bg-white text-black hover:bg-white/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
     }
   }
 );
@@ -48,7 +48,7 @@ function Button({
       "data-slot": "button",
       "data-variant": variant,
       "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
+      className: cn(buttonVariants({ className, size, variant })),
       ...props
     }
   );

package/dist/{chunk-ZJD5WMR3.mjs → chunk-C6MQBJFC.mjs}

@@ -1,14 +1,17 @@
-import { cn } from './chunk-7SKSRSS7.mjs';
+import { cn } from './chunk-B4EAAKYF.mjs';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as React from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
-function Checkbox({ className, ...props }) {
+function Checkbox({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
@@ -29,13 +32,19 @@ function Checkbox({ className, ...props }) {
     }
   );
 }
-function Select({ ...props }) {
+function Select({
+  ...props
+}) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
-function SelectGroup({ ...props }) {
+function SelectGroup({
+  ...props
+}) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
 }
-function SelectValue({ ...props }) {
+function SelectValue({
+  ...props
+}) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
@@ -97,7 +106,10 @@ function SelectContent({
     }
   ) });
 }
-function SelectLabel({ className, ...props }) {
+function SelectLabel({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
     {
@@ -156,7 +168,10 @@ function SelectScrollUpButton({
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: cn("flex cursor-default items-center justify-center py-1", className),
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
       ...props,
       children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
     }
@@ -170,7 +185,10 @@ function SelectScrollDownButton({
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: cn("flex cursor-default items-center justify-center py-1", className),
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
       ...props,
       children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
     }
@@ -232,7 +250,10 @@ function Slider({
     }
   );
 }
-function Label2({ className, ...props }) {
+function Label2({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     LabelPrimitive.Root,
     {
@@ -272,8 +293,16 @@ var GRID_POSITIONS = [
   { x: 0.5, y: 1 },
   { x: 1, y: 1 }
 ];
-var X_LABELS = { 0: "left", 0.5: "center", 1: "right" };
-var Y_LABELS = { 0: "top", 0.5: "middle", 1: "bottom" };
+var X_LABELS = {
+  0: "left",
+  0.5: "center",
+  1: "right"
+};
+var Y_LABELS = {
+  0: "top",
+  0.5: "middle",
+  1: "bottom"
+};
 function getPositionTitle(pos) {
   return `Position: ${X_LABELS[pos.x] ?? "center"}, ${Y_LABELS[pos.y] ?? "middle"}`;
 }
@@ -363,7 +392,10 @@ function ComparisonSliderComponent({
     "div",
     {
       ref: containerRef,
-      className: cn("relative overflow-hidden rounded-md cursor-ew-resize select-none", className),
+      className: cn(
+        "relative overflow-hidden rounded-md cursor-ew-resize select-none",
+        className
+      ),
       style: { height },
       onMouseDown: handleMouseDown,
       onMouseMove: handleMouseMove,

package/dist/{chunk-7H3WJJYS.mjs → chunk-ESVULCFY.mjs}

@@ -1,11 +1,17 @@
-import { useWorkflowStore } from './chunk-R727OFBR.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
 import { useMemo, useCallback } from 'react';
 
 function useCommentNavigation(nodeId) {
   const nodes = useWorkflowStore((state) => state.nodes);
-  const getNodesWithComments = useWorkflowStore((state) => state.getNodesWithComments);
-  const markCommentViewed = useWorkflowStore((state) => state.markCommentViewed);
-  const setNavigationTarget = useWorkflowStore((state) => state.setNavigationTarget);
+  const getNodesWithComments = useWorkflowStore(
+    (state) => state.getNodesWithComments
+  );
+  const markCommentViewed = useWorkflowStore(
+    (state) => state.markCommentViewed
+  );
+  const setNavigationTarget = useWorkflowStore(
+    (state) => state.setNavigationTarget
+  );
   const nodeComment = useMemo(() => {
     const node = nodes.find((n) => n.id === nodeId);
     const data = node?.data;
@@ -43,9 +49,9 @@ function useCommentNavigation(nodeId) {
   return {
     currentIndex: currentIndex + 1,
     // 1-based for display
-    totalCount: nodesWithComments.length,
+    onNext,
     onPrevious,
-    onNext
+    totalCount: nodesWithComments.length
   };
 }
 

package/dist/{chunk-GWBGK3KL.mjs → chunk-FWJIAW2E.mjs}

@@ -1,8 +1,8 @@
-import { Button } from './chunk-7SKSRSS7.mjs';
-import { extractEnumValues, supportsImageInput, validateRequiredSchemaFields, CONNECTION_FIELDS, getSchemaDefaults, getImageDimensions, getVideoMetadata } from './chunk-EFXQT23N.mjs';
-import { useExecutionStore } from './chunk-LT3ZJJL6.mjs';
-import { useWorkflowStore } from './chunk-R727OFBR.mjs';
-import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
+import { Button } from './chunk-B4EAAKYF.mjs';
+import { extractEnumValues, supportsImageInput, validateRequiredSchemaFields, CONNECTION_FIELDS, getSchemaDefaults, getImageDimensions, getVideoMetadata } from './chunk-VVQ4CH77.mjs';
+import { useWorkflowUIConfig } from './chunk-YUIK4AHM.mjs';
+import { useExecutionStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
 import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
 import { ChevronDown, Expand, Square, Play } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -44,11 +44,11 @@ function useAIGenNode({
     [nodeId, updateNodeData]
   );
   return {
-    schemaProperties,
+    componentSchemas,
     enumValues,
-    modelSupportsImageInput,
     handleSchemaParamChange,
-    componentSchemas
+    modelSupportsImageInput,
+    schemaProperties
   };
 }
 function useAIGenNodeHeader({
@@ -79,7 +79,16 @@ function useAIGenNodeHeader({
   );
   const headerActions = useMemo(
     () => /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasOutput && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }),
+      hasOutput && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: onExpand,
+          title: "Expand preview",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+        }
+      ),
       isProcessing ? /* @__PURE__ */ jsxs(Button, { variant: "destructive", size: "sm", onClick: onStop, children: [
         /* @__PURE__ */ jsx(Square, { className: "h-4 w-4 fill-current" }),
         "Generating"
@@ -99,7 +108,7 @@ function useAIGenNodeHeader({
     ] }),
     [hasOutput, isProcessing, canGenerate, onGenerate, onStop, onExpand]
   );
-  return { titleElement, headerActions };
+  return { headerActions, titleElement };
 }
 function useAutoLoadModelSchema({
   currentModel,
@@ -119,7 +128,10 @@ function useAutoLoadModelSchema({
     let isCancelled = false;
     const loadSchema = async () => {
       try {
-        const model = await modelSchema.fetchModelSchema(modelId, controller.signal);
+        const model = await modelSchema.fetchModelSchema(
+          modelId,
+          controller.signal
+        );
         if (model && !isCancelled) {
           hasAttemptedSchemaLoad.current = true;
           onModelSelect(model);
@@ -139,10 +151,16 @@ function useRequiredInputs(nodeId, nodeType) {
   return useMemo(() => {
     const nodeDef = NODE_DEFINITIONS[nodeType];
     if (!nodeDef) {
-      return { hasRequiredInputs: true, missingInputs: [], connectionStatus: /* @__PURE__ */ new Map() };
+      return {
+        connectionStatus: /* @__PURE__ */ new Map(),
+        hasRequiredInputs: true,
+        missingInputs: []
+      };
     }
     const incomingEdges = edges.filter((e) => e.target === nodeId);
-    const connectedHandles = new Set(incomingEdges.map((e) => e.targetHandle).filter(Boolean));
+    const connectedHandles = new Set(
+      incomingEdges.map((e) => e.targetHandle).filter(Boolean)
+    );
     const connectionStatus = /* @__PURE__ */ new Map();
     const missingInputs = [];
     for (const input of nodeDef.inputs) {
@@ -153,9 +171,9 @@ function useRequiredInputs(nodeId, nodeType) {
       }
     }
     return {
+      connectionStatus,
       hasRequiredInputs: missingInputs.length === 0,
-      missingInputs,
-      connectionStatus
+      missingInputs
     };
   }, [nodeId, nodeType, edges]);
 }
@@ -178,8 +196,13 @@ function useCanGenerate({
   inputSchema,
   schemaParams
 }) {
-  const { hasRequiredInputs, missingInputs } = useRequiredInputs(nodeId, nodeType);
-  const getConnectedInputs = useWorkflowStore((state) => state.getConnectedInputs);
+  const { hasRequiredInputs, missingInputs } = useRequiredInputs(
+    nodeId,
+    nodeType
+  );
+  const getConnectedInputs = useWorkflowStore(
+    (state) => state.getConnectedInputs
+  );
   const incomingEdgesSelector = useCallback(
     (state) => state.edges.filter((e) => e.target === nodeId),
     [nodeId]
@@ -191,7 +214,10 @@ function useCanGenerate({
       for (const edge of incomingEdges) {
         const sourceNode = state.nodes.find((n) => n.id === edge.source);
         if (sourceNode) {
-          outputs[edge.source] = extractOutputValue(sourceNode, edge.sourceHandle);
+          outputs[edge.source] = extractOutputValue(
+            sourceNode,
+            edge.sourceHandle
+          );
         }
       }
       return outputs;
@@ -203,9 +229,9 @@ function useCanGenerate({
     const missingItems = [];
     for (const inputId of missingInputs) {
       missingItems.push({
-        type: "connection",
         field: inputId,
-        message: `Missing connection: ${inputId}`
+        message: `Missing connection: ${inputId}`,
+        type: "connection"
       });
     }
     const connectedInputs = getConnectedInputs(nodeId);
@@ -234,18 +260,18 @@ function useCanGenerate({
     );
     for (const field of schemaValidation.missingFields) {
       missingItems.push({
-        type: "schema",
         field,
-        message: `Required field: ${field}`
+        message: `Required field: ${field}`,
+        type: "schema"
       });
     }
     const canGenerate = hasRequiredInputs && hasRequiredData && schemaValidation.isValid;
     return {
       canGenerate,
-      missingItems,
-      hasRequiredConnections: hasRequiredInputs,
       hasConnectedData,
-      hasRequiredSchemaFields: schemaValidation.isValid
+      hasRequiredConnections: hasRequiredInputs,
+      hasRequiredSchemaFields: schemaValidation.isValid,
+      missingItems
     };
   }, [
     nodeId,
@@ -265,17 +291,17 @@ function useModelSelection({ nodeId, modelMap, fallbackModel }) {
       const internalModel = modelMap[model.id] ?? fallbackModel;
       const schemaDefaults = getSchemaDefaults(model.inputSchema);
       const selectedModel = {
-        provider: model.provider,
-        modelId: model.id,
+        componentSchemas: model.componentSchemas,
         displayName: model.displayName,
         inputSchema: model.inputSchema,
-        componentSchemas: model.componentSchemas
+        modelId: model.id,
+        provider: model.provider
       };
       updateNodeData(nodeId, {
         model: internalModel,
         provider: model.provider,
-        selectedModel,
-        schemaParams: schemaDefaults
+        schemaParams: schemaDefaults,
+        selectedModel
       });
     },
     [nodeId, modelMap, fallbackModel, updateNodeData]
@@ -285,7 +311,9 @@ function useModelSelection({ nodeId, modelMap, fallbackModel }) {
 function useNodeExecution(nodeId) {
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const executeNode = useExecutionStore((state) => state.executeNode);
-  const stopNodeExecution = useExecutionStore((state) => state.stopNodeExecution);
+  const stopNodeExecution = useExecutionStore(
+    (state) => state.stopNodeExecution
+  );
   const handleGenerate = useCallback(() => {
     updateNodeData(nodeId, { status: NodeStatusEnum.PROCESSING });
     executeNode(nodeId);
@@ -381,8 +409,8 @@ function useMediaUpload({
         const meta = await getVideoMetadata(urlValue);
         metadata = {
           duration: meta.duration,
-          width: meta.dimensions.width,
-          height: meta.dimensions.height
+          height: meta.dimensions.height,
+          width: meta.dimensions.width
         };
       }
       updateNodeData(nodeId, buildUrlUpdateRef.current(urlValue, metadata));
@@ -404,15 +432,15 @@ function useMediaUpload({
   );
   return {
     fileInputRef,
-    showUrlInput,
-    setShowUrlInput,
-    urlValue,
-    setUrlValue,
-    isUploading,
     handleFileSelect,
     handleRemove,
+    handleUrlKeyDown,
     handleUrlSubmit,
-    handleUrlKeyDown
+    isUploading,
+    setShowUrlInput,
+    setUrlValue,
+    showUrlInput,
+    urlValue
   };
 }
 function usePromptAutocomplete({
@@ -423,7 +451,10 @@ function usePromptAutocomplete({
   onTemplateCommit
 }) {
   const [showAutocomplete, setShowAutocomplete] = useState(false);
-  const [autocompletePosition, setAutocompletePosition] = useState({ top: 0, left: 0 });
+  const [autocompletePosition, setAutocompletePosition] = useState({
+    left: 0,
+    top: 0
+  });
   const [autocompleteFilter, setAutocompleteFilter] = useState("");
   const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = useState(0);
   const filteredAutocompleteVars = useMemo(() => {
@@ -469,7 +500,7 @@ function usePromptAutocomplete({
         const currentLine = lines.length - 1;
         const top = currentLine * lineHeight + 30;
         const left = 10;
-        setAutocompletePosition({ top, left });
+        setAutocompletePosition({ left, top });
         setShowAutocomplete(true);
       } else {
         setShowAutocomplete(false);
@@ -482,7 +513,9 @@ function usePromptAutocomplete({
       if (!showAutocomplete) return;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedAutocompleteIndex((prev) => (prev + 1) % filteredAutocompleteVars.length);
+        setSelectedAutocompleteIndex(
+          (prev) => (prev + 1) % filteredAutocompleteVars.length
+        );
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedAutocompleteIndex(
@@ -491,7 +524,9 @@ function usePromptAutocomplete({
       } else if (e.key === "Enter" || e.key === "Tab") {
         if (filteredAutocompleteVars.length > 0) {
           e.preventDefault();
-          handleAutocompleteSelect(filteredAutocompleteVars[selectedAutocompleteIndex].name);
+          handleAutocompleteSelect(
+            filteredAutocompleteVars[selectedAutocompleteIndex].name
+          );
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
@@ -510,14 +545,14 @@ function usePromptAutocomplete({
     setShowAutocomplete(false);
   }, []);
   return {
-    showAutocomplete,
     autocompletePosition,
+    closeAutocomplete,
     filteredAutocompleteVars,
-    selectedAutocompleteIndex,
+    handleAutocompleteSelect,
     handleChange,
     handleKeyDown,
-    handleAutocompleteSelect,
-    closeAutocomplete
+    selectedAutocompleteIndex,
+    showAutocomplete
   };
 }