@fluxo-dev/shell-workflow 26.2.1 → 26.2.3

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, createElement as createElement$2, useState, useEffect, memo, useMemo, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';
-import { Box, Group, Text, Tooltip, ActionIcon, ScrollArea, Stack, UnstyledButton, Modal, Button, Menu, Select, TextInput, Checkbox, NumberInput, Textarea, JsonInput, Collapse, Badge, Paper, Divider, SimpleGrid, Center, Table, Accordion, Alert, Loader, Switch, PasswordInput, CloseButton } from '@mantine/core';
+import { Box, Group, Text, Tooltip, ActionIcon, ScrollArea, Stack, UnstyledButton, Modal, Button, Menu, Select, TextInput, Checkbox, NumberInput, Textarea, JsonInput, Collapse, Badge, Paper, Accordion, Divider, SimpleGrid, Center, Table, Alert, Loader, Switch, PasswordInput, CloseButton } from '@mantine/core';
 import { WorkflowStatus, FluxoClientSys, PointerStatus, ActionInputTypeEnum, NodeTypeEnum, FluxoStateDispatcher, DynamicPortType, BlockConfigFieldType, EmbeddedModule } from '@fluxo-dev/api-client-base';
 import { notifications } from '@mantine/notifications';
 import { WaitData, SlidingPanel, ShellSessionContext, DataCard, NoData } from '@fluxo-dev/ui-components';
@@ -100012,35 +100012,387 @@ const useTriggerDefinitions = () => {
   };
 };
 
+var anObject$a = anObject$r;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags$1 = function () {
+  var that = anObject$a(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var call$c = functionCall;
+var hasOwn$2 = hasOwnProperty_1;
+var isPrototypeOf$1 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$4 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$4) && !hasOwn$2(R, 'flags') && isPrototypeOf$1(RegExpPrototype$4, R)
+    ? call$c(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$4 = defineBuiltIn$9;
+var anObject$9 = anObject$r;
+var $toString = toString$h;
+var fails$c = fails$x;
+var getRegExpFlags$2 = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype$3 = RegExp.prototype;
+var nativeToString = RegExpPrototype$3[TO_STRING];
+
+var NOT_GENERIC = fails$c(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$4(RegExpPrototype$3, TO_STRING, function toString() {
+    var R = anObject$9(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags$2(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 /**
- * Get handle color based on handle ID/outcome
+ * Create a new action node with optional position
  */
-const getHandleColor = handleId => {
-  if (!handleId) return COLORS.handle.default;
-  const lowerHandle = handleId.toLowerCase();
-  if (lowerHandle.includes('success') || lowerHandle === 'true') {
-    return COLORS.handle.success;
+const createActionNode = (action, position) => {
+  // Determine source handles from outcomes
+  const sourceHandles = action.outcomes && action.outcomes.length > 0 ? action.outcomes.filter(outcome => outcome && outcome.trim() !== '') : ['default'];
+  return {
+    id: `node-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    type: 'action',
+    position: position || {
+      x: Math.random() * 400,
+      y: Math.random() * 400
+    },
+    data: {
+      label: action.name,
+      nodeType: NodeTypeEnum.Action,
+      stepType: action.id,
+      inputs: {},
+      outputs: {},
+      handles: {
+        source: sourceHandles,
+        target: ['default']
+      }
+    }
+  };
+};
+/**
+ * Create a new primitive node
+ */
+const createPrimitiveNode = (primitiveType, label, position) => {
+  const handles = getPrimitiveHandles(primitiveType);
+  return {
+    id: `node-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    type: 'default',
+    position: position || {
+      x: Math.random() * 400 + 100,
+      y: Math.random() * 400 + 100
+    },
+    data: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+      label,
+      nodeType: primitiveType,
+      inputs: {},
+      outputs: {},
+      handles
+    }, primitiveType === NodeTypeEnum.While && {
+      condition: ''
+    }), primitiveType === NodeTypeEnum.ForEach && {
+      collection: ''
+    }), primitiveType === NodeTypeEnum.Decision && {
+      condition: ''
+    }), primitiveType === NodeTypeEnum.Delay && {
+      interval: '00:00:10'
+    }), primitiveType === NodeTypeEnum.Schedule && {
+      interval: '00:01:00'
+    }), primitiveType === NodeTypeEnum.WaitForEvent && {
+      eventName: ''
+    })
+  };
+};
+/**
+ * Create trigger node (replaces Start node)
+ * Triggers are always initial nodes and can have inputs/outputs like actions
+ */
+const createTriggerNode = (trigger, position, workflowId) => {
+  return {
+    id: `trigger-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    type: 'trigger',
+    position: position || {
+      x: 250,
+      y: 50
+    },
+    data: {
+      label: trigger.name,
+      nodeType: NodeTypeEnum.Action,
+      // Triggers are treated as actions with no incoming connections
+      stepType: trigger.id,
+      // Trigger ID (e.g., "manual-trigger", "http-trigger")
+      inputs: {},
+      // Can be populated like action inputs
+      outputs: {},
+      // Can have outputs like actions
+      handles: {
+        source: ['default'],
+        // Triggers always have output
+        target: [] // Triggers NEVER have input (always root nodes)
+      },
+      // Pass trigger metadata for runtime execution
+      triggerInputs: trigger.inputs || [],
+      // Input definitions for modal
+      workflowId: workflowId // Workflow ID for execution
+    } // Use 'as any' to extend NodeData with custom props
+  };
+};
+/**
+ * Create start node (DEPRECATED - use createTriggerNode instead)
+ * Kept for backward compatibility
+ */
+const createStartNode = () => {
+  return {
+    id: 'start',
+    type: 'start',
+    position: {
+      x: 250,
+      y: 50
+    },
+    data: {
+      label: 'Start (Manual)',
+      nodeType: NodeTypeEnum.Start,
+      stepType: 'manual-trigger',
+      // Map to manual trigger
+      inputs: {},
+      outputs: {},
+      handles: {
+        source: ['default'],
+        target: []
+      }
+    }
+  };
+};
+
+/**
+ * Hook for node operations (add, update, delete)
+ */
+const useNodeOperations$1 = (nodes, setNodes, workflowId) => {
+  const addActionNode = useCallback((action, position) => {
+    console.log('➕ Adding action node:', action.name, 'at position:', position);
+    const newNode = createActionNode(action, position);
+    setNodes(nds => [...nds, newNode]);
+  }, [setNodes]);
+  const addPrimitiveNode = useCallback((primitiveType, label, position) => {
+    console.log('➕ Adding primitive node:', label, 'at position:', position);
+    const newNode = createPrimitiveNode(primitiveType, label, position);
+    setNodes(nds => [...nds, newNode]);
+  }, [setNodes]);
+  const addTriggerNode = useCallback((trigger, position) => {
+    console.log('➕ Adding trigger node:', trigger.name, 'at position:', position, 'workflowId:', workflowId);
+    // If no position provided, find a position for the new trigger (stack them vertically)
+    let finalPosition = position;
+    if (!finalPosition) {
+      const existingTriggers = nodes.filter(n => {
+        var _a, _b;
+        return ((_b = (_a = n.data.handles) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.length) === 0;
+      });
+      const yPosition = 50 + existingTriggers.length * 150;
+      finalPosition = {
+        x: 250,
+        y: yPosition
+      };
+    }
+    const newNode = createTriggerNode(trigger, finalPosition, workflowId);
+    setNodes(nds => [...nds, newNode]);
+  }, [setNodes, nodes, workflowId]);
+  const addStartNode = useCallback(() => {
+    console.log('➕ Adding start node');
+    const startNode = createStartNode();
+    setNodes([startNode]);
+  }, [setNodes]);
+  const updateNodeData = useCallback((nodeId, data) => {
+    console.log('🔄 Updating node data:', nodeId, data);
+    setNodes(nds => nds.map(node => node.id === nodeId ? Object.assign(Object.assign({}, node), {
+      data: Object.assign(Object.assign({}, node.data), data)
+    }) : node));
+  }, [setNodes]);
+  const deleteNode = useCallback(nodeId => {
+    console.log('🗑️ Deleting node:', nodeId);
+    setNodes(nds => nds.filter(node => node.id !== nodeId));
+  }, [setNodes]);
+  return {
+    addActionNode,
+    addPrimitiveNode,
+    addTriggerNode,
+    addStartNode,
+    updateNodeData,
+    deleteNode
+  };
+};
+
+var isArray$1 = isArray$4;
+var lengthOfArrayLike$1 = lengthOfArrayLike$7;
+var doesNotExceedSafeInteger = doesNotExceedSafeInteger$2;
+var bind$3 = functionBindContext;
+
+// `FlattenIntoArray` abstract operation
+// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
+var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
+  var targetIndex = start;
+  var sourceIndex = 0;
+  var mapFn = mapper ? bind$3(mapper, thisArg) : false;
+  var element, elementLen;
+
+  while (sourceIndex < sourceLen) {
+    if (sourceIndex in source) {
+      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
+
+      if (depth > 0 && isArray$1(element)) {
+        elementLen = lengthOfArrayLike$1(element);
+        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
+      } else {
+        doesNotExceedSafeInteger(targetIndex + 1);
+        target[targetIndex] = element;
+      }
+
+      targetIndex++;
+    }
+    sourceIndex++;
   }
-  if (lowerHandle.includes('fail') || lowerHandle.includes('error') || lowerHandle === 'false') {
-    return COLORS.handle.fail;
+  return targetIndex;
+};
+
+var flattenIntoArray_1 = flattenIntoArray$1;
+
+var uncurryThis$c = functionUncurryThis;
+var fails$b = fails$x;
+var isCallable$8 = isCallable$s;
+var classof$2 = classof$9;
+var getBuiltIn$3 = getBuiltIn$a;
+var inspectSource$1 = inspectSource$3;
+
+var noop = function () { /* empty */ };
+var construct = getBuiltIn$3('Reflect', 'construct');
+var constructorRegExp = /^\s*(?:class|function)\b/;
+var exec$3 = uncurryThis$c(constructorRegExp.exec);
+var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
+
+var isConstructorModern = function isConstructor(argument) {
+  if (!isCallable$8(argument)) return false;
+  try {
+    construct(noop, [], argument);
+    return true;
+  } catch (error) {
+    return false;
   }
-  if (lowerHandle.includes('timeout') || lowerHandle.includes('warning')) {
-    return COLORS.handle.timeout;
+};
+
+var isConstructorLegacy = function isConstructor(argument) {
+  if (!isCallable$8(argument)) return false;
+  switch (classof$2(argument)) {
+    case 'AsyncFunction':
+    case 'GeneratorFunction':
+    case 'AsyncGeneratorFunction': return false;
   }
-  if (lowerHandle.includes('default') || lowerHandle.includes('parallel')) {
-    return COLORS.handle.default;
+  try {
+    // we can't check .prototype since constructors produced by .bind haven't it
+    // `Function#toString` throws on some built-it function in some legacy engines
+    // (for example, `DOMQuad` and similar in FF41-)
+    return INCORRECT_TO_STRING || !!exec$3(constructorRegExp, inspectSource$1(argument));
+  } catch (error) {
+    return true;
   }
-  return COLORS.handle.neutral;
 };
-/**
- * Check if handle is an outcome (not default)
- */
-const isOutcomeHandle = handleId => {
-  return handleId !== null && handleId !== undefined && handleId !== 'default';
+
+isConstructorLegacy.sham = true;
+
+// `IsConstructor` abstract operation
+// https://tc39.es/ecma262/#sec-isconstructor
+var isConstructor$2 = !construct || fails$b(function () {
+  var called;
+  return isConstructorModern(isConstructorModern.call)
+    || !isConstructorModern(Object)
+    || !isConstructorModern(function () { called = true; })
+    || called;
+}) ? isConstructorLegacy : isConstructorModern;
+
+var isArray = isArray$4;
+var isConstructor$1 = isConstructor$2;
+var isObject$4 = isObject$g;
+var wellKnownSymbol$8 = wellKnownSymbol$n;
+
+var SPECIES$4 = wellKnownSymbol$8('species');
+var $Array = Array;
+
+// a part of `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesConstructor$1 = function (originalArray) {
+  var C;
+  if (isArray(originalArray)) {
+    C = originalArray.constructor;
+    // cross-realm fallback
+    if (isConstructor$1(C) && (C === $Array || isArray(C.prototype))) C = undefined;
+    else if (isObject$4(C)) {
+      C = C[SPECIES$4];
+      if (C === null) C = undefined;
+    }
+  } return C === undefined ? $Array : C;
+};
+
+var arraySpeciesConstructor = arraySpeciesConstructor$1;
+
+// `ArraySpeciesCreate` abstract operation
+// https://tc39.es/ecma262/#sec-arrayspeciescreate
+var arraySpeciesCreate$1 = function (originalArray, length) {
+  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
 };
 
 var $$i = _export;
-var uncurryThis$c = functionUncurryThisClause;
+var flattenIntoArray = flattenIntoArray_1;
+var aCallable$6 = aCallable$k;
+var toObject$1 = toObject$8;
+var lengthOfArrayLike = lengthOfArrayLike$7;
+var arraySpeciesCreate = arraySpeciesCreate$1;
+
+// `Array.prototype.flatMap` method
+// https://tc39.es/ecma262/#sec-array.prototype.flatmap
+$$i({ target: 'Array', proto: true }, {
+  flatMap: function flatMap(callbackfn /* , thisArg */) {
+    var O = toObject$1(this);
+    var sourceLen = lengthOfArrayLike(O);
+    var A;
+    aCallable$6(callbackfn);
+    A = arraySpeciesCreate(O, 0);
+    A.length = flattenIntoArray(A, O, O, sourceLen, 0, 1, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
+    return A;
+  }
+});
+
+// this method was added to unscopables after implementation
+// in popular engines, so it's moved to a separate module
+var addToUnscopables = addToUnscopables$3;
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables('flatMap');
+
+var $$h = _export;
+var uncurryThis$b = functionUncurryThisClause;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var toLength$2 = toLength$4;
 var toString$a = toString$h;
@@ -100048,7 +100400,7 @@ var notARegExp = notARegexp;
 var requireObjectCoercible$5 = requireObjectCoercible$b;
 var correctIsRegExpLogic = correctIsRegexpLogic;
 
-var stringSlice$8 = uncurryThis$c(''.slice);
+var stringSlice$8 = uncurryThis$b(''.slice);
 var min$2 = Math.min;
 
 var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
@@ -100060,7 +100412,7 @@ var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
 
 // `String.prototype.startsWith` method
 // https://tc39.es/ecma262/#sec-string.prototype.startswith
-$$i({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+$$h({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
   startsWith: function startsWith(searchString /* , position = 0 */) {
     var that = toString$a(requireObjectCoercible$5(this));
     notARegExp(searchString);
@@ -100070,6 +100422,89 @@ $$i({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
   }
 });
 
+var call$b = functionCall;
+var anObject$8 = anObject$r;
+var getIteratorDirect$2 = getIteratorDirect$a;
+var getIteratorMethod = getIteratorMethod$3;
+
+var getIteratorFlattenable$1 = function (obj, stringHandling) {
+  if (!stringHandling || typeof obj !== 'string') anObject$8(obj);
+  var method = getIteratorMethod(obj);
+  return getIteratorDirect$2(anObject$8(method !== undefined ? call$b(method, obj) : obj));
+};
+
+var $$g = _export;
+var call$a = functionCall;
+var aCallable$5 = aCallable$k;
+var anObject$7 = anObject$r;
+var getIteratorDirect$1 = getIteratorDirect$a;
+var getIteratorFlattenable = getIteratorFlattenable$1;
+var createIteratorProxy = iteratorCreateProxy;
+var iteratorClose = iteratorClose$6;
+var IS_PURE = isPure;
+
+var IteratorProxy = createIteratorProxy(function () {
+  var iterator = this.iterator;
+  var mapper = this.mapper;
+  var result, inner;
+
+  while (true) {
+    if (inner = this.inner) try {
+      result = anObject$7(call$a(inner.next, inner.iterator));
+      if (!result.done) return result.value;
+      this.inner = null;
+    } catch (error) { iteratorClose(iterator, 'throw', error); }
+
+    result = anObject$7(call$a(this.next, iterator));
+
+    if (this.done = !!result.done) return;
+
+    try {
+      this.inner = getIteratorFlattenable(mapper(result.value, this.counter++), false);
+    } catch (error) { iteratorClose(iterator, 'throw', error); }
+  }
+});
+
+// `Iterator.prototype.flatMap` method
+// https://github.com/tc39/proposal-iterator-helpers
+$$g({ target: 'Iterator', proto: true, real: true, forced: IS_PURE }, {
+  flatMap: function flatMap(mapper) {
+    anObject$7(this);
+    aCallable$5(mapper);
+    return new IteratorProxy(getIteratorDirect$1(this), {
+      mapper: mapper,
+      inner: null
+    });
+  }
+});
+
+/**
+ * Get handle color based on handle ID/outcome
+ */
+const getHandleColor = handleId => {
+  if (!handleId) return COLORS.handle.default;
+  const lowerHandle = handleId.toLowerCase();
+  if (lowerHandle.includes('success') || lowerHandle === 'true') {
+    return COLORS.handle.success;
+  }
+  if (lowerHandle.includes('fail') || lowerHandle.includes('error') || lowerHandle === 'false') {
+    return COLORS.handle.fail;
+  }
+  if (lowerHandle.includes('timeout') || lowerHandle.includes('warning')) {
+    return COLORS.handle.timeout;
+  }
+  if (lowerHandle.includes('default') || lowerHandle.includes('parallel')) {
+    return COLORS.handle.default;
+  }
+  return COLORS.handle.neutral;
+};
+/**
+ * Check if handle is an outcome (not default)
+ */
+const isOutcomeHandle = handleId => {
+  return handleId !== null && handleId !== undefined && handleId !== 'default';
+};
+
 /**
  * Validate that all outcomes are connected
  */
@@ -100123,31 +100558,13 @@ const cleanRecord = record => {
   return cleaned;
 };
 
-var anObject$a = anObject$r;
-
-// `RegExp.prototype.flags` getter implementation
-// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
-var regexpFlags$1 = function () {
-  var that = anObject$a(this);
-  var result = '';
-  if (that.hasIndices) result += 'd';
-  if (that.global) result += 'g';
-  if (that.ignoreCase) result += 'i';
-  if (that.multiline) result += 'm';
-  if (that.dotAll) result += 's';
-  if (that.unicode) result += 'u';
-  if (that.unicodeSets) result += 'v';
-  if (that.sticky) result += 'y';
-  return result;
-};
-
-var fails$c = fails$x;
+var fails$a = fails$x;
 var global$d = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
 var $RegExp$2 = global$d.RegExp;
 
-var UNSUPPORTED_Y$3 = fails$c(function () {
+var UNSUPPORTED_Y$3 = fails$a(function () {
   var re = $RegExp$2('a', 'y');
   re.lastIndex = 2;
   return re.exec('abcd') !== null;
@@ -100155,11 +100572,11 @@ var UNSUPPORTED_Y$3 = fails$c(function () {
 
 // UC Browser bug
 // https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY$1 = UNSUPPORTED_Y$3 || fails$c(function () {
+var MISSED_STICKY$1 = UNSUPPORTED_Y$3 || fails$a(function () {
   return !$RegExp$2('a', 'y').sticky;
 });
 
-var BROKEN_CARET = UNSUPPORTED_Y$3 || fails$c(function () {
+var BROKEN_CARET = UNSUPPORTED_Y$3 || fails$a(function () {
   // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
   var re = $RegExp$2('^r', 'gy');
   re.lastIndex = 2;
@@ -100172,24 +100589,24 @@ var regexpStickyHelpers = {
   UNSUPPORTED_Y: UNSUPPORTED_Y$3
 };
 
-var fails$b = fails$x;
+var fails$9 = fails$x;
 var global$c = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
 var $RegExp$1 = global$c.RegExp;
 
-var regexpUnsupportedDotAll = fails$b(function () {
+var regexpUnsupportedDotAll = fails$9(function () {
   var re = $RegExp$1('.', 's');
   return !(re.dotAll && re.test('\n') && re.flags === 's');
 });
 
-var fails$a = fails$x;
+var fails$8 = fails$x;
 var global$b = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
 var $RegExp = global$b.RegExp;
 
-var regexpUnsupportedNcg = fails$a(function () {
+var regexpUnsupportedNcg = fails$8(function () {
   var re = $RegExp('(?<a>b)', 'g');
   return re.exec('b').groups.a !== 'b' ||
     'b'.replace(re, '$<a>c') !== 'bc';
@@ -100197,8 +100614,8 @@ var regexpUnsupportedNcg = fails$a(function () {
 
 /* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
 /* eslint-disable regexp/no-useless-quantifier -- testing */
-var call$c = functionCall;
-var uncurryThis$b = functionUncurryThis;
+var call$9 = functionCall;
+var uncurryThis$a = functionUncurryThis;
 var toString$9 = toString$h;
 var regexpFlags = regexpFlags$1;
 var stickyHelpers$2 = regexpStickyHelpers;
@@ -100211,16 +100628,16 @@ var UNSUPPORTED_NCG$1 = regexpUnsupportedNcg;
 var nativeReplace = shared('native-string-replace', String.prototype.replace);
 var nativeExec = RegExp.prototype.exec;
 var patchedExec = nativeExec;
-var charAt$5 = uncurryThis$b(''.charAt);
-var indexOf$1 = uncurryThis$b(''.indexOf);
-var replace$2 = uncurryThis$b(''.replace);
-var stringSlice$7 = uncurryThis$b(''.slice);
+var charAt$5 = uncurryThis$a(''.charAt);
+var indexOf$1 = uncurryThis$a(''.indexOf);
+var replace$2 = uncurryThis$a(''.replace);
+var stringSlice$7 = uncurryThis$a(''.slice);
 
 var UPDATES_LAST_INDEX_WRONG = (function () {
   var re1 = /a/;
   var re2 = /b*/g;
-  call$c(nativeExec, re1, 'a');
-  call$c(nativeExec, re2, 'a');
+  call$9(nativeExec, re1, 'a');
+  call$9(nativeExec, re2, 'a');
   return re1.lastIndex !== 0 || re2.lastIndex !== 0;
 })();
 
@@ -100241,14 +100658,14 @@ if (PATCH) {
 
     if (raw) {
       raw.lastIndex = re.lastIndex;
-      result = call$c(patchedExec, raw, str);
+      result = call$9(patchedExec, raw, str);
       re.lastIndex = raw.lastIndex;
       return result;
     }
 
     var groups = state.groups;
     var sticky = UNSUPPORTED_Y$2 && re.sticky;
-    var flags = call$c(regexpFlags, re);
+    var flags = call$9(regexpFlags, re);
     var source = re.source;
     var charsAdded = 0;
     var strCopy = str;
@@ -100276,7 +100693,7 @@ if (PATCH) {
     }
     if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
 
-    match = call$c(nativeExec, sticky ? reCopy : re, strCopy);
+    match = call$9(nativeExec, sticky ? reCopy : re, strCopy);
 
     if (sticky) {
       if (match) {
@@ -100291,7 +100708,7 @@ if (PATCH) {
     if (NPCG_INCLUDED && match && match.length > 1) {
       // Fix browsers whose `exec` methods don't consistently return `undefined`
       // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
-      call$c(nativeReplace, match[0], reCopy, function () {
+      call$9(nativeReplace, match[0], reCopy, function () {
         for (i = 1; i < arguments.length - 2; i++) {
           if (arguments[i] === undefined) match[i] = undefined;
         }
@@ -100312,77 +100729,38 @@ if (PATCH) {
 
 var regexpExec$2 = patchedExec;
 
-var $$h = _export;
-var exec$3 = regexpExec$2;
+var $$f = _export;
+var exec$2 = regexpExec$2;
 
 // `RegExp.prototype.exec` method
 // https://tc39.es/ecma262/#sec-regexp.prototype.exec
-$$h({ target: 'RegExp', proto: true, forced: /./.exec !== exec$3 }, {
-  exec: exec$3
+$$f({ target: 'RegExp', proto: true, forced: /./.exec !== exec$2 }, {
+  exec: exec$2
 });
 
-var call$b = functionCall;
-var hasOwn$2 = hasOwnProperty_1;
-var isPrototypeOf$1 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$4 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$4) && !hasOwn$2(R, 'flags') && isPrototypeOf$1(RegExpPrototype$4, R)
-    ? call$b(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$4 = defineBuiltIn$9;
-var anObject$9 = anObject$r;
-var $toString = toString$h;
-var fails$9 = fails$x;
-var getRegExpFlags$2 = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype$3 = RegExp.prototype;
-var nativeToString = RegExpPrototype$3[TO_STRING];
-
-var NOT_GENERIC = fails$9(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$4(RegExpPrototype$3, TO_STRING, function toString() {
-    var R = anObject$9(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags$2(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 // TODO: Remove from `core-js@4` since it's moved to entry points
 
-var call$a = functionCall;
+var call$8 = functionCall;
 var defineBuiltIn$3 = defineBuiltIn$9;
 var regexpExec$1 = regexpExec$2;
-var fails$8 = fails$x;
-var wellKnownSymbol$8 = wellKnownSymbol$n;
+var fails$7 = fails$x;
+var wellKnownSymbol$7 = wellKnownSymbol$n;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$a;
 
-var SPECIES$4 = wellKnownSymbol$8('species');
+var SPECIES$3 = wellKnownSymbol$7('species');
 var RegExpPrototype$2 = RegExp.prototype;
 
 var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
-  var SYMBOL = wellKnownSymbol$8(KEY);
+  var SYMBOL = wellKnownSymbol$7(KEY);
 
-  var DELEGATES_TO_SYMBOL = !fails$8(function () {
+  var DELEGATES_TO_SYMBOL = !fails$7(function () {
     // String methods call symbol-named RegExp methods
     var O = {};
     O[SYMBOL] = function () { return 7; };
     return ''[KEY](O) !== 7;
   });
 
-  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$8(function () {
+  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$7(function () {
     // Symbol-named RegExp methods call .exec
     var execCalled = false;
     var re = /a/;
@@ -100395,7 +100773,7 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
       // RegExp[@@split] doesn't call the regex's exec method, but first creates
       // a new one. We need to return the patched regex when creating the new one.
       re.constructor = {};
-      re.constructor[SPECIES$4] = function () { return re; };
+      re.constructor[SPECIES$3] = function () { return re; };
       re.flags = '';
       re[SYMBOL] = /./[SYMBOL];
     }
@@ -100422,9 +100800,9 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
           // The native String method already delegates to @@method (this
           // polyfilled function), leasing to infinite recursion.
           // We avoid it by directly calling the native @@method method.
-          return { done: true, value: call$a(nativeRegExpMethod, regexp, str, arg2) };
+          return { done: true, value: call$8(nativeRegExpMethod, regexp, str, arg2) };
         }
-        return { done: true, value: call$a(nativeMethod, str, regexp, arg2) };
+        return { done: true, value: call$8(nativeMethod, str, regexp, arg2) };
       }
       return { done: false };
     });
@@ -100436,14 +100814,14 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
   if (SHAM) createNonEnumerableProperty$1(RegExpPrototype$2[SYMBOL], 'sham', true);
 };
 
-var uncurryThis$a = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 var toIntegerOrInfinity$3 = toIntegerOrInfinity$7;
 var toString$8 = toString$h;
 var requireObjectCoercible$4 = requireObjectCoercible$b;
 
-var charAt$4 = uncurryThis$a(''.charAt);
-var charCodeAt = uncurryThis$a(''.charCodeAt);
-var stringSlice$6 = uncurryThis$a(''.slice);
+var charAt$4 = uncurryThis$9(''.charAt);
+var charCodeAt = uncurryThis$9(''.charCodeAt);
+var stringSlice$6 = uncurryThis$9(''.slice);
 
 var createMethod = function (CONVERT_TO_STRING) {
   return function ($this, pos) {
@@ -100478,13 +100856,13 @@ var advanceStringIndex$2 = function (S, index, unicode) {
   return index + (unicode ? charAt$3(S, index).length : 1);
 };
 
-var uncurryThis$9 = functionUncurryThis;
-var toObject$1 = toObject$8;
+var uncurryThis$8 = functionUncurryThis;
+var toObject = toObject$8;
 
 var floor$1 = Math.floor;
-var charAt$2 = uncurryThis$9(''.charAt);
-var replace$1 = uncurryThis$9(''.replace);
-var stringSlice$5 = uncurryThis$9(''.slice);
+var charAt$2 = uncurryThis$8(''.charAt);
+var replace$1 = uncurryThis$8(''.replace);
+var stringSlice$5 = uncurryThis$8(''.slice);
 // eslint-disable-next-line redos/no-vulnerable -- safe
 var SUBSTITUTION_SYMBOLS = /\$([$&'`]|\d{1,2}|<[^>]*>)/g;
 var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&'`]|\d{1,2})/g;
@@ -100496,7 +100874,7 @@ var getSubstitution$2 = function (matched, str, position, captures, namedCapture
   var m = captures.length;
   var symbols = SUBSTITUTION_SYMBOLS_NO_NAMED;
   if (namedCaptures !== undefined) {
-    namedCaptures = toObject$1(namedCaptures);
+    namedCaptures = toObject(namedCaptures);
     symbols = SUBSTITUTION_SYMBOLS;
   }
   return replace$1(replacement, symbols, function (match, ch) {
@@ -100524,10 +100902,10 @@ var getSubstitution$2 = function (matched, str, position, captures, namedCapture
   });
 };
 
-var call$9 = functionCall;
-var anObject$8 = anObject$r;
-var isCallable$8 = isCallable$s;
-var classof$2 = classofRaw$2;
+var call$7 = functionCall;
+var anObject$6 = anObject$r;
+var isCallable$7 = isCallable$s;
+var classof$1 = classofRaw$2;
 var regexpExec = regexpExec$2;
 
 var $TypeError$5 = TypeError;
@@ -100536,22 +100914,22 @@ var $TypeError$5 = TypeError;
 // https://tc39.es/ecma262/#sec-regexpexec
 var regexpExecAbstract = function (R, S) {
   var exec = R.exec;
-  if (isCallable$8(exec)) {
-    var result = call$9(exec, R, S);
-    if (result !== null) anObject$8(result);
+  if (isCallable$7(exec)) {
+    var result = call$7(exec, R, S);
+    if (result !== null) anObject$6(result);
     return result;
   }
-  if (classof$2(R) === 'RegExp') return call$9(regexpExec, R, S);
+  if (classof$1(R) === 'RegExp') return call$7(regexpExec, R, S);
   throw new $TypeError$5('RegExp#exec called on incompatible receiver');
 };
 
 var apply$1 = functionApply;
-var call$8 = functionCall;
-var uncurryThis$8 = functionUncurryThis;
+var call$6 = functionCall;
+var uncurryThis$7 = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic$1 = fixRegexpWellKnownSymbolLogic;
-var fails$7 = fails$x;
-var anObject$7 = anObject$r;
-var isCallable$7 = isCallable$s;
+var fails$6 = fails$x;
+var anObject$5 = anObject$r;
+var isCallable$6 = isCallable$s;
 var isNullOrUndefined$3 = isNullOrUndefined$7;
 var toIntegerOrInfinity$2 = toIntegerOrInfinity$7;
 var toLength$1 = toLength$4;
@@ -100561,15 +100939,15 @@ var advanceStringIndex$1 = advanceStringIndex$2;
 var getMethod$2 = getMethod$7;
 var getSubstitution$1 = getSubstitution$2;
 var regExpExec$1 = regexpExecAbstract;
-var wellKnownSymbol$7 = wellKnownSymbol$n;
+var wellKnownSymbol$6 = wellKnownSymbol$n;
 
-var REPLACE$1 = wellKnownSymbol$7('replace');
+var REPLACE$1 = wellKnownSymbol$6('replace');
 var max$1 = Math.max;
 var min$1 = Math.min;
-var concat = uncurryThis$8([].concat);
-var push$1 = uncurryThis$8([].push);
-var stringIndexOf$1 = uncurryThis$8(''.indexOf);
-var stringSlice$4 = uncurryThis$8(''.slice);
+var concat = uncurryThis$7([].concat);
+var push$1 = uncurryThis$7([].push);
+var stringIndexOf$1 = uncurryThis$7(''.indexOf);
+var stringSlice$4 = uncurryThis$7(''.slice);
 
 var maybeToString = function (it) {
   return it === undefined ? it : String(it);
@@ -100590,7 +100968,7 @@ var REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE = (function () {
   return false;
 })();
 
-var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$7(function () {
+var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$6(function () {
   var re = /./;
   re.exec = function () {
     var result = [];
@@ -100612,13 +100990,13 @@ fixRegExpWellKnownSymbolLogic$1('replace', function (_, nativeReplace, maybeCall
       var O = requireObjectCoercible$3(this);
       var replacer = isNullOrUndefined$3(searchValue) ? undefined : getMethod$2(searchValue, REPLACE$1);
       return replacer
-        ? call$8(replacer, searchValue, O, replaceValue)
-        : call$8(nativeReplace, toString$7(O), searchValue, replaceValue);
+        ? call$6(replacer, searchValue, O, replaceValue)
+        : call$6(nativeReplace, toString$7(O), searchValue, replaceValue);
     },
     // `RegExp.prototype[@@replace]` method
     // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
     function (string, replaceValue) {
-      var rx = anObject$7(this);
+      var rx = anObject$5(this);
       var S = toString$7(string);
 
       if (
@@ -100630,7 +101008,7 @@ fixRegExpWellKnownSymbolLogic$1('replace', function (_, nativeReplace, maybeCall
         if (res.done) return res.value;
       }
 
-      var functionalReplace = isCallable$7(replaceValue);
+      var functionalReplace = isCallable$6(replaceValue);
       if (!functionalReplace) replaceValue = toString$7(replaceValue);
 
       var global = rx.global;
@@ -100808,126 +101186,6 @@ const generateGuid = () => {
   });
 };
 
-/**
- * Create a new action node
- */
-const createActionNode = action => {
-  // Determine source handles from outcomes
-  const sourceHandles = action.outcomes && action.outcomes.length > 0 ? action.outcomes.filter(outcome => outcome && outcome.trim() !== '') : ['default'];
-  return {
-    id: `node-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-    type: 'action',
-    position: {
-      x: Math.random() * 400,
-      y: Math.random() * 400
-    },
-    data: {
-      label: action.name,
-      nodeType: NodeTypeEnum.Action,
-      stepType: action.id,
-      inputs: {},
-      outputs: {},
-      handles: {
-        source: sourceHandles,
-        target: ['default']
-      }
-    }
-  };
-};
-/**
- * Create a new primitive node
- */
-const createPrimitiveNode = (primitiveType, label) => {
-  const handles = getPrimitiveHandles(primitiveType);
-  return {
-    id: `node-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-    type: 'default',
-    position: {
-      x: Math.random() * 400 + 100,
-      y: Math.random() * 400 + 100
-    },
-    data: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
-      label,
-      nodeType: primitiveType,
-      inputs: {},
-      outputs: {},
-      handles
-    }, primitiveType === NodeTypeEnum.While && {
-      condition: ''
-    }), primitiveType === NodeTypeEnum.ForEach && {
-      collection: ''
-    }), primitiveType === NodeTypeEnum.Decision && {
-      condition: ''
-    }), primitiveType === NodeTypeEnum.Delay && {
-      interval: '00:00:10'
-    }), primitiveType === NodeTypeEnum.Schedule && {
-      interval: '00:01:00'
-    }), primitiveType === NodeTypeEnum.WaitForEvent && {
-      eventName: ''
-    })
-  };
-};
-/**
- * Create trigger node (replaces Start node)
- * Triggers are always initial nodes and can have inputs/outputs like actions
- */
-const createTriggerNode = (trigger, position, workflowId) => {
-  return {
-    id: `trigger-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-    type: 'trigger',
-    position: position || {
-      x: 250,
-      y: 50
-    },
-    data: {
-      label: trigger.name,
-      nodeType: NodeTypeEnum.Action,
-      // Triggers are treated as actions with no incoming connections
-      stepType: trigger.id,
-      // Trigger ID (e.g., "manual-trigger", "http-trigger")
-      inputs: {},
-      // Can be populated like action inputs
-      outputs: {},
-      // Can have outputs like actions
-      handles: {
-        source: ['default'],
-        // Triggers always have output
-        target: [] // Triggers NEVER have input (always root nodes)
-      },
-      // Pass trigger metadata for runtime execution
-      triggerInputs: trigger.inputs || [],
-      // Input definitions for modal
-      workflowId: workflowId // Workflow ID for execution
-    } // Use 'as any' to extend NodeData with custom props
-  };
-};
-/**
- * Create start node (DEPRECATED - use createTriggerNode instead)
- * Kept for backward compatibility
- */
-const createStartNode = () => {
-  return {
-    id: 'start',
-    type: 'start',
-    position: {
-      x: 250,
-      y: 50
-    },
-    data: {
-      label: 'Start (Manual)',
-      nodeType: NodeTypeEnum.Start,
-      stepType: 'manual-trigger',
-      // Map to manual trigger
-      inputs: {},
-      outputs: {},
-      handles: {
-        source: ['default'],
-        target: []
-      }
-    }
-  };
-};
-
 /**
  * Find all parallel executions in the workflow
  * @param edges - All edges in the workflow
@@ -101207,19 +101465,19 @@ const getIconComponent = (iconName, size = 16) => {
   });
 };
 
-var $$g = _export;
+var $$e = _export;
 var iterate$3 = iterate$a;
-var aCallable$6 = aCallable$k;
-var anObject$6 = anObject$r;
-var getIteratorDirect$2 = getIteratorDirect$a;
+var aCallable$4 = aCallable$k;
+var anObject$4 = anObject$r;
+var getIteratorDirect = getIteratorDirect$a;
 
 // `Iterator.prototype.every` method
 // https://github.com/tc39/proposal-iterator-helpers
-$$g({ target: 'Iterator', proto: true, real: true }, {
+$$e({ target: 'Iterator', proto: true, real: true }, {
   every: function every(predicate) {
-    anObject$6(this);
-    aCallable$6(predicate);
-    var record = getIteratorDirect$2(this);
+    anObject$4(this);
+    aCallable$4(predicate);
+    var record = getIteratorDirect(this);
     var counter = 0;
     return !iterate$3(record, function (value, stop) {
       if (!predicate(value, counter++)) return stop();
@@ -101307,260 +101565,6 @@ const computeWhileReturnVisualEdges = (nodes, edges) => {
   return visualEdges;
 };
 
-/**
- * Hook for node operations (add, update, delete)
- */
-const useNodeOperations$1 = (nodes, setNodes, workflowId) => {
-  const addActionNode = useCallback(action => {
-    console.log('➕ Adding action node:', action.name);
-    const newNode = createActionNode(action);
-    setNodes(nds => [...nds, newNode]);
-  }, [setNodes]);
-  const addPrimitiveNode = useCallback((primitiveType, label) => {
-    console.log('➕ Adding primitive node:', label);
-    const newNode = createPrimitiveNode(primitiveType, label);
-    setNodes(nds => [...nds, newNode]);
-  }, [setNodes]);
-  const addTriggerNode = useCallback(trigger => {
-    console.log('➕ Adding trigger node:', trigger.name, 'workflowId:', workflowId);
-    // Find a position for the new trigger (stack them vertically)
-    const existingTriggers = nodes.filter(n => {
-      var _a, _b;
-      return ((_b = (_a = n.data.handles) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.length) === 0;
-    });
-    const yPosition = 50 + existingTriggers.length * 150;
-    const newNode = createTriggerNode(trigger, {
-      x: 250,
-      y: yPosition
-    }, workflowId);
-    setNodes(nds => [...nds, newNode]);
-  }, [setNodes, nodes, workflowId]);
-  const addStartNode = useCallback(() => {
-    console.log('➕ Adding start node');
-    const startNode = createStartNode();
-    setNodes([startNode]);
-  }, [setNodes]);
-  const updateNodeData = useCallback((nodeId, data) => {
-    console.log('🔄 Updating node data:', nodeId, data);
-    setNodes(nds => nds.map(node => node.id === nodeId ? Object.assign(Object.assign({}, node), {
-      data: Object.assign(Object.assign({}, node.data), data)
-    }) : node));
-  }, [setNodes]);
-  const deleteNode = useCallback(nodeId => {
-    console.log('🗑️ Deleting node:', nodeId);
-    setNodes(nds => nds.filter(node => node.id !== nodeId));
-  }, [setNodes]);
-  return {
-    addActionNode,
-    addPrimitiveNode,
-    addTriggerNode,
-    addStartNode,
-    updateNodeData,
-    deleteNode
-  };
-};
-
-var isArray$1 = isArray$4;
-var lengthOfArrayLike$1 = lengthOfArrayLike$7;
-var doesNotExceedSafeInteger = doesNotExceedSafeInteger$2;
-var bind$3 = functionBindContext;
-
-// `FlattenIntoArray` abstract operation
-// https://tc39.github.io/proposal-flatMap/#sec-FlattenIntoArray
-var flattenIntoArray$1 = function (target, original, source, sourceLen, start, depth, mapper, thisArg) {
-  var targetIndex = start;
-  var sourceIndex = 0;
-  var mapFn = mapper ? bind$3(mapper, thisArg) : false;
-  var element, elementLen;
-
-  while (sourceIndex < sourceLen) {
-    if (sourceIndex in source) {
-      element = mapFn ? mapFn(source[sourceIndex], sourceIndex, original) : source[sourceIndex];
-
-      if (depth > 0 && isArray$1(element)) {
-        elementLen = lengthOfArrayLike$1(element);
-        targetIndex = flattenIntoArray$1(target, original, element, elementLen, targetIndex, depth - 1) - 1;
-      } else {
-        doesNotExceedSafeInteger(targetIndex + 1);
-        target[targetIndex] = element;
-      }
-
-      targetIndex++;
-    }
-    sourceIndex++;
-  }
-  return targetIndex;
-};
-
-var flattenIntoArray_1 = flattenIntoArray$1;
-
-var uncurryThis$7 = functionUncurryThis;
-var fails$6 = fails$x;
-var isCallable$6 = isCallable$s;
-var classof$1 = classof$9;
-var getBuiltIn$3 = getBuiltIn$a;
-var inspectSource$1 = inspectSource$3;
-
-var noop = function () { /* empty */ };
-var construct = getBuiltIn$3('Reflect', 'construct');
-var constructorRegExp = /^\s*(?:class|function)\b/;
-var exec$2 = uncurryThis$7(constructorRegExp.exec);
-var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
-
-var isConstructorModern = function isConstructor(argument) {
-  if (!isCallable$6(argument)) return false;
-  try {
-    construct(noop, [], argument);
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-
-var isConstructorLegacy = function isConstructor(argument) {
-  if (!isCallable$6(argument)) return false;
-  switch (classof$1(argument)) {
-    case 'AsyncFunction':
-    case 'GeneratorFunction':
-    case 'AsyncGeneratorFunction': return false;
-  }
-  try {
-    // we can't check .prototype since constructors produced by .bind haven't it
-    // `Function#toString` throws on some built-it function in some legacy engines
-    // (for example, `DOMQuad` and similar in FF41-)
-    return INCORRECT_TO_STRING || !!exec$2(constructorRegExp, inspectSource$1(argument));
-  } catch (error) {
-    return true;
-  }
-};
-
-isConstructorLegacy.sham = true;
-
-// `IsConstructor` abstract operation
-// https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$2 = !construct || fails$6(function () {
-  var called;
-  return isConstructorModern(isConstructorModern.call)
-    || !isConstructorModern(Object)
-    || !isConstructorModern(function () { called = true; })
-    || called;
-}) ? isConstructorLegacy : isConstructorModern;
-
-var isArray = isArray$4;
-var isConstructor$1 = isConstructor$2;
-var isObject$4 = isObject$g;
-var wellKnownSymbol$6 = wellKnownSymbol$n;
-
-var SPECIES$3 = wellKnownSymbol$6('species');
-var $Array = Array;
-
-// a part of `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesConstructor$1 = function (originalArray) {
-  var C;
-  if (isArray(originalArray)) {
-    C = originalArray.constructor;
-    // cross-realm fallback
-    if (isConstructor$1(C) && (C === $Array || isArray(C.prototype))) C = undefined;
-    else if (isObject$4(C)) {
-      C = C[SPECIES$3];
-      if (C === null) C = undefined;
-    }
-  } return C === undefined ? $Array : C;
-};
-
-var arraySpeciesConstructor = arraySpeciesConstructor$1;
-
-// `ArraySpeciesCreate` abstract operation
-// https://tc39.es/ecma262/#sec-arrayspeciescreate
-var arraySpeciesCreate$1 = function (originalArray, length) {
-  return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length);
-};
-
-var $$f = _export;
-var flattenIntoArray = flattenIntoArray_1;
-var aCallable$5 = aCallable$k;
-var toObject = toObject$8;
-var lengthOfArrayLike = lengthOfArrayLike$7;
-var arraySpeciesCreate = arraySpeciesCreate$1;
-
-// `Array.prototype.flatMap` method
-// https://tc39.es/ecma262/#sec-array.prototype.flatmap
-$$f({ target: 'Array', proto: true }, {
-  flatMap: function flatMap(callbackfn /* , thisArg */) {
-    var O = toObject(this);
-    var sourceLen = lengthOfArrayLike(O);
-    var A;
-    aCallable$5(callbackfn);
-    A = arraySpeciesCreate(O, 0);
-    A.length = flattenIntoArray(A, O, O, sourceLen, 0, 1, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
-    return A;
-  }
-});
-
-// this method was added to unscopables after implementation
-// in popular engines, so it's moved to a separate module
-var addToUnscopables = addToUnscopables$3;
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('flatMap');
-
-var call$7 = functionCall;
-var anObject$5 = anObject$r;
-var getIteratorDirect$1 = getIteratorDirect$a;
-var getIteratorMethod = getIteratorMethod$3;
-
-var getIteratorFlattenable$1 = function (obj, stringHandling) {
-  if (!stringHandling || typeof obj !== 'string') anObject$5(obj);
-  var method = getIteratorMethod(obj);
-  return getIteratorDirect$1(anObject$5(method !== undefined ? call$7(method, obj) : obj));
-};
-
-var $$e = _export;
-var call$6 = functionCall;
-var aCallable$4 = aCallable$k;
-var anObject$4 = anObject$r;
-var getIteratorDirect = getIteratorDirect$a;
-var getIteratorFlattenable = getIteratorFlattenable$1;
-var createIteratorProxy = iteratorCreateProxy;
-var iteratorClose = iteratorClose$6;
-var IS_PURE = isPure;
-
-var IteratorProxy = createIteratorProxy(function () {
-  var iterator = this.iterator;
-  var mapper = this.mapper;
-  var result, inner;
-
-  while (true) {
-    if (inner = this.inner) try {
-      result = anObject$4(call$6(inner.next, inner.iterator));
-      if (!result.done) return result.value;
-      this.inner = null;
-    } catch (error) { iteratorClose(iterator, 'throw', error); }
-
-    result = anObject$4(call$6(this.next, iterator));
-
-    if (this.done = !!result.done) return;
-
-    try {
-      this.inner = getIteratorFlattenable(mapper(result.value, this.counter++), false);
-    } catch (error) { iteratorClose(iterator, 'throw', error); }
-  }
-});
-
-// `Iterator.prototype.flatMap` method
-// https://github.com/tc39/proposal-iterator-helpers
-$$e({ target: 'Iterator', proto: true, real: true, forced: IS_PURE }, {
-  flatMap: function flatMap(mapper) {
-    anObject$4(this);
-    aCallable$4(mapper);
-    return new IteratorProxy(getIteratorDirect(this), {
-      mapper: mapper,
-      inner: null
-    });
-  }
-});
-
 /**
  * Hook to manage workflow state (nodes and edges)
  * Loads workflow from backend if workflowId is provided
@@ -104387,318 +104391,401 @@ const NodeConfigPanel = /*#__PURE__*/React.memo(({
 });
 NodeConfigPanel.displayName = 'NodeConfigPanel';
 
+const categoryIcons$1 = {
+  'Control Flow': jsx(IconTopologyStar3, {
+    size: 16
+  }),
+  'Triggers': jsx(IconBolt, {
+    size: 16
+  })
+};
 const ActionsPanel = /*#__PURE__*/React.memo(({
   actions,
   triggers,
   onAddAction,
   onAddTrigger,
   onAddPrimitive,
+  onActionDragStart,
+  onTriggerDragStart,
+  onPrimitiveDragStart,
   triggersLoading
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
-  const [expandedCategories, setExpandedCategories] = useState(new Set(['Primitives']));
-  const toggleCategory = categoryName => {
-    setExpandedCategories(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(categoryName)) {
-        newSet.delete(categoryName);
-      } else {
-        newSet.add(categoryName);
-      }
-      return newSet;
-    });
+  // Filtra primitives basandosi sulla ricerca
+  const filteredPrimitives = WORKFLOW_PRIMITIVES.filter(primitive => {
+    const searchLower = searchTerm.toLowerCase();
+    return primitive.label.toLowerCase().includes(searchLower) || primitive.description.toLowerCase().includes(searchLower);
+  });
+  // Filtra triggers basandosi sulla ricerca
+  const filteredTriggers = triggers.map(category => Object.assign(Object.assign({}, category), {
+    triggers: category.triggers.filter(trigger => {
+      var _a;
+      const searchLower = searchTerm.toLowerCase();
+      return trigger.name.toLowerCase().includes(searchLower) || ((_a = trigger.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLower));
+    })
+  })).filter(category => category.triggers.length > 0);
+  // Filtra actions basandosi sulla ricerca
+  const filteredActions = actions.map(category => Object.assign(Object.assign({}, category), {
+    actions: category.actions.filter(action => {
+      var _a, _b;
+      const searchLower = searchTerm.toLowerCase();
+      return action.name.toLowerCase().includes(searchLower) || ((_a = action.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLower)) || ((_b = action.tags) === null || _b === void 0 ? void 0 : _b.some(tag => tag.toLowerCase().includes(searchLower)));
+    })
+  })).filter(category => category.actions.length > 0);
+  // Accordion items da visualizzare di default
+  const defaultAccordionValues = ['primitives'];
+  const handlePrimitiveInteraction = (e, primitive) => {
+    if (e.type === 'dragstart' && onPrimitiveDragStart) {
+      onPrimitiveDragStart(e, primitive.type, primitive.label);
+    } else if (e.type === 'click') {
+      onAddPrimitive(primitive.type, primitive.label);
+    }
   };
-  return jsx(Paper, {
-    shadow: "none",
-    p: 0,
+  const handleTriggerInteraction = (e, trigger) => {
+    if (e.type === 'dragstart' && onTriggerDragStart) {
+      onTriggerDragStart(e, trigger);
+    } else if (e.type === 'click') {
+      onAddTrigger(trigger);
+    }
+  };
+  const handleActionInteraction = (e, action) => {
+    if (e.type === 'dragstart' && onActionDragStart) {
+      onActionDragStart(e, action);
+    } else if (e.type === 'click') {
+      onAddAction(action);
+    }
+  };
+  return jsxs(Box, {
     style: {
       width: 280,
-      overflowY: 'auto',
+      height: '100%',
       borderRight: '1px solid #e5e7eb',
-      background: 'white'
+      background: '#f9fafb',
+      display: 'flex',
+      flexDirection: 'column'
     },
-    children: jsxs(Stack, {
-      gap: 0,
-      children: [jsx(Box, {
-        p: "md",
-        style: {
-          borderBottom: '1px solid #f3f4f6'
-        },
-        children: jsx(TextInput, {
-          placeholder: "Ricerca...",
-          leftSection: jsx(IconSearch, {
-            size: 14
-          }),
-          value: searchTerm,
-          onChange: e => setSearchTerm(e.currentTarget.value),
-          size: "sm",
+    children: [jsxs(Box, {
+      p: 16,
+      style: {
+        borderBottom: '1px solid #e5e7eb'
+      },
+      children: [jsx(Text, {
+        size: "xs",
+        c: "dimmed",
+        tt: "uppercase",
+        fw: 600,
+        mb: 8,
+        children: "Azioni & Trigger"
+      }), jsx(TextInput, {
+        placeholder: "Cerca...",
+        leftSection: jsx(IconSearch, {
+          size: 14
+        }),
+        size: "xs",
+        value: searchTerm,
+        onChange: e => setSearchTerm(e.currentTarget.value)
+      })]
+    }), jsx(ScrollArea, {
+      style: {
+        flex: 1
+      },
+      children: jsxs(Box, {
+        p: 12,
+        children: [jsxs(Accordion, {
+          multiple: true,
+          defaultValue: defaultAccordionValues,
           styles: {
-            input: {
-              border: '1px solid #e5e7eb',
+            item: {
+              border: 'none',
+              marginBottom: 8
+            },
+            control: {
+              padding: '8px 12px',
               borderRadius: 6,
-              fontSize: 13
+              '&:hover': {
+                background: 'white'
+              }
             }
-          }
-        })
-      }), jsxs(Box, {
-        children: [jsx(Box, {
-          px: "md",
-          py: "sm",
-          style: {
-            cursor: 'pointer',
-            borderBottom: '1px solid #f3f4f6'
           },
-          onClick: () => toggleCategory('Primitives'),
-          children: jsxs(Group, {
-            justify: "space-between",
-            children: [jsx(Text, {
-              size: "xs",
-              fw: 600,
-              c: "#374151",
-              tt: "uppercase",
-              children: "Control Flow"
-            }), jsx(Text, {
-              size: "xs",
-              c: "#9ca3af",
-              fw: 500,
-              children: expandedCategories.has('Primitives') ? '−' : '+'
-            })]
-          })
-        }), expandedCategories.has('Primitives') && jsx(Box, {
-          p: "md",
-          pt: "sm",
-          children: jsx(Stack, {
-            gap: 6,
-            children: WORKFLOW_PRIMITIVES.map(primitive => jsxs(Box, {
-              p: "sm",
-              style: {
-                cursor: 'pointer',
-                border: '1px solid #f3f4f6',
-                borderRadius: 6,
-                transition: 'all 0.15s ease',
-                background: 'white'
-              },
-              onClick: () => onAddPrimitive(primitive.type, primitive.label),
-              children: [jsxs(Group, {
+          children: [filteredPrimitives.length > 0 && jsxs(Accordion.Item, {
+            value: "primitives",
+            children: [jsx(Accordion.Control, {
+              children: jsxs(Group, {
                 gap: 8,
-                mb: 4,
-                children: [jsx(Box, {
-                  style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    color: '#6b7280'
-                  },
-                  children: getIconComponent(primitive.icon, 16)
-                }), jsx(Text, {
+                children: [categoryIcons$1['Control Flow'], jsx(Text, {
                   size: "sm",
-                  fw: 500,
-                  c: "#111827",
-                  children: primitive.label
+                  fw: 600,
+                  children: "Control Flow"
+                }), jsx(Badge, {
+                  size: "xs",
+                  color: "gray",
+                  variant: "light",
+                  children: filteredPrimitives.length
                 })]
-              }), jsx(Text, {
-                size: "xs",
-                c: "#6b7280",
-                style: {
-                  fontSize: 11
-                },
-                children: primitive.description
-              })]
-            }, primitive.type))
-          })
-        })]
-      }), jsxs(Box, {
-        children: [jsx(Box, {
-          px: "md",
-          py: "sm",
-          style: {
-            cursor: 'pointer',
-            borderBottom: '1px solid #f3f4f6'
-          },
-          onClick: () => toggleCategory('Triggers'),
-          children: jsxs(Group, {
-            justify: "space-between",
-            children: [jsx(Text, {
-              size: "xs",
-              fw: 600,
-              c: "#374151",
-              tt: "uppercase",
-              children: "Triggers"
-            }), jsx(Text, {
-              size: "xs",
-              c: "#9ca3af",
-              fw: 500,
-              children: expandedCategories.has('Triggers') ? '−' : '+'
-            })]
-          })
-        }), expandedCategories.has('Triggers') && jsx(Box, {
-          p: "md",
-          pt: "sm",
-          children: triggersLoading ? jsx(Text, {
-            size: "xs",
-            c: "dimmed",
-            ta: "center",
-            children: "Loading triggers..."
-          }) : jsx(Stack, {
-            gap: 8,
-            children: triggers.map(category => jsxs(Box, {
-              children: [jsx(Text, {
-                size: "xs",
-                fw: 600,
-                c: "#6b7280",
-                mb: 6,
-                children: category.name
-              }), jsx(Stack, {
+              })
+            }), jsx(Accordion.Panel, {
+              children: jsx(Stack, {
                 gap: 6,
-                children: category.triggers.map(trigger => jsxs(Box, {
-                  p: "sm",
+                children: filteredPrimitives.map(primitive => jsx(UnstyledButton, {
+                  draggable: !!onPrimitiveDragStart,
+                  onDragStart: e => handlePrimitiveInteraction(e, primitive),
+                  onClick: e => handlePrimitiveInteraction(e, primitive),
                   style: {
-                    cursor: 'pointer',
-                    border: '1px solid #f3f4f6',
+                    padding: '8px 12px',
                     borderRadius: 6,
-                    transition: 'all 0.15s ease',
-                    background: 'white'
+                    border: '1px solid #e5e7eb',
+                    background: 'white',
+                    cursor: onPrimitiveDragStart ? 'grab' : 'pointer',
+                    transition: 'all 0.15s ease'
                   },
-                  onClick: () => onAddTrigger(trigger),
-                  children: [jsxs(Group, {
+                  styles: {
+                    root: {
+                      '&:hover': {
+                        borderColor: '#6b7280',
+                        boxShadow: '0 2px 8px rgba(107, 114, 128, 0.15)',
+                        transform: 'translateY(-1px)'
+                      },
+                      '&:active': {
+                        cursor: onPrimitiveDragStart ? 'grabbing' : 'pointer'
+                      }
+                    }
+                  },
+                  children: jsxs(Group, {
                     gap: 8,
-                    mb: 4,
+                    wrap: "nowrap",
                     children: [jsx(Box, {
                       style: {
                         display: 'flex',
                         alignItems: 'center',
-                        color: '#10b981'
+                        color: '#6b7280',
+                        flexShrink: 0
                       },
-                      children: getIconComponent(getTriggerIcon(trigger), 16)
-                    }), jsx(Text, {
-                      size: "sm",
-                      fw: 500,
-                      c: "#111827",
-                      children: trigger.name
+                      children: getIconComponent(primitive.icon, 16)
+                    }), jsxs(Box, {
+                      style: {
+                        flex: 1,
+                        minWidth: 0
+                      },
+                      children: [jsx(Text, {
+                        size: "xs",
+                        fw: 500,
+                        truncate: true,
+                        children: primitive.label
+                      }), jsx(Text, {
+                        size: "xs",
+                        c: "dimmed",
+                        lineClamp: 1,
+                        children: primitive.description
+                      })]
                     })]
-                  }), jsx(Text, {
+                  })
+                }, primitive.type))
+              })
+            })]
+          }), !triggersLoading && filteredTriggers.length > 0 && jsxs(Accordion.Item, {
+            value: "triggers",
+            children: [jsx(Accordion.Control, {
+              children: jsxs(Group, {
+                gap: 8,
+                children: [categoryIcons$1['Triggers'], jsx(Text, {
+                  size: "sm",
+                  fw: 600,
+                  children: "Triggers"
+                }), jsx(Badge, {
+                  size: "xs",
+                  color: "gray",
+                  variant: "light",
+                  children: filteredTriggers.reduce((acc, cat) => acc + cat.triggers.length, 0)
+                })]
+              })
+            }), jsx(Accordion.Panel, {
+              children: jsx(Stack, {
+                gap: 12,
+                children: filteredTriggers.map(category => jsxs(Box, {
+                  children: [jsx(Text, {
                     size: "xs",
+                    fw: 600,
                     c: "#6b7280",
-                    style: {
-                      fontSize: 11
-                    },
-                    children: trigger.description
+                    mb: 6,
+                    tt: "uppercase",
+                    children: category.name
+                  }), jsx(Stack, {
+                    gap: 6,
+                    children: category.triggers.map(trigger => jsx(UnstyledButton, {
+                      draggable: !!onTriggerDragStart,
+                      onDragStart: e => handleTriggerInteraction(e, trigger),
+                      onClick: e => handleTriggerInteraction(e, trigger),
+                      style: {
+                        padding: '8px 12px',
+                        borderRadius: 6,
+                        border: '1px solid #e5e7eb',
+                        background: 'white',
+                        cursor: onTriggerDragStart ? 'grab' : 'pointer',
+                        transition: 'all 0.15s ease'
+                      },
+                      styles: {
+                        root: {
+                          '&:hover': {
+                            borderColor: '#10b981',
+                            boxShadow: '0 2px 8px rgba(16, 185, 129, 0.15)',
+                            transform: 'translateY(-1px)'
+                          },
+                          '&:active': {
+                            cursor: onTriggerDragStart ? 'grabbing' : 'pointer'
+                          }
+                        }
+                      },
+                      children: jsxs(Group, {
+                        gap: 8,
+                        wrap: "nowrap",
+                        children: [jsx(Box, {
+                          style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            color: '#10b981',
+                            flexShrink: 0
+                          },
+                          children: getIconComponent(getTriggerIcon(trigger), 16)
+                        }), jsxs(Box, {
+                          style: {
+                            flex: 1,
+                            minWidth: 0
+                          },
+                          children: [jsx(Text, {
+                            size: "xs",
+                            fw: 500,
+                            truncate: true,
+                            children: trigger.name
+                          }), jsx(Text, {
+                            size: "xs",
+                            c: "dimmed",
+                            lineClamp: 1,
+                            children: trigger.description
+                          })]
+                        })]
+                      })
+                    }, trigger.id))
                   })]
-                }, trigger.id))
-              })]
-            }, category.name))
-          })
-        })]
-      }), actions.map(category => {
-        const filteredActions = category.actions.filter(action => {
-          var _a, _b;
-          const searchLower = searchTerm.toLowerCase();
-          return action.name.toLowerCase().includes(searchLower) || ((_a = action.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLower)) || ((_b = action.tags) === null || _b === void 0 ? void 0 : _b.some(tag => tag.toLowerCase().includes(searchLower)));
-        });
-        if (filteredActions.length === 0 && searchTerm) return null;
-        const categoryKey = `Actions-${category.name}`;
-        const isExpanded = expandedCategories.has(categoryKey);
-        return jsxs(Box, {
-          children: [jsx(Box, {
-            px: "md",
-            py: "sm",
-            style: {
-              cursor: 'pointer',
-              borderBottom: '1px solid #f3f4f6'
-            },
-            onClick: () => toggleCategory(categoryKey),
-            children: jsxs(Group, {
-              justify: "space-between",
-              children: [jsxs(Group, {
+                }, category.name))
+              })
+            })]
+          }), filteredActions.map(category => jsxs(Accordion.Item, {
+            value: `action-${category.name}`,
+            children: [jsx(Accordion.Control, {
+              children: jsxs(Group, {
                 gap: 8,
-                children: [jsx(Text, {
-                  size: "xs",
+                children: [jsx(IconPlaystationCircle, {
+                  size: 16
+                }), jsx(Text, {
+                  size: "sm",
                   fw: 600,
-                  c: "#374151",
-                  tt: "uppercase",
                   children: category.name
-                }), jsx(Text, {
+                }), jsx(Badge, {
                   size: "xs",
-                  c: "#9ca3af",
-                  fw: 500,
-                  children: filteredActions.length
+                  color: "gray",
+                  variant: "light",
+                  children: category.actions.length
                 })]
-              }), jsx(Text, {
-                size: "xs",
-                c: "#9ca3af",
-                fw: 500,
-                children: isExpanded ? '−' : '+'
-              })]
-            })
-          }), isExpanded && jsx(Box, {
-            p: "md",
-            pt: "sm",
-            children: jsx(Stack, {
-              gap: 6,
-              children: filteredActions.map(action => jsxs(Box, {
-                p: "sm",
-                style: {
-                  cursor: 'pointer',
-                  border: `1px solid ${action.color || '#f3f4f6'}`,
-                  borderRadius: 6,
-                  transition: 'all 0.15s ease',
-                  background: 'white',
-                  borderLeftWidth: action.color ? 3 : 1
-                },
-                onClick: () => onAddAction(action),
-                children: [jsxs(Group, {
-                  gap: 8,
-                  mb: 4,
-                  children: [action.icon && jsx(Box, {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center',
-                      color: action.color || '#6b7280'
-                    },
-                    children: getIconComponent(action.icon, 16)
-                  }), jsx(Text, {
-                    size: "sm",
-                    fw: 500,
-                    c: "#111827",
-                    children: action.name
-                  })]
-                }), action.description && jsx(Text, {
-                  size: "xs",
-                  c: "#6b7280",
-                  mb: 4,
+              })
+            }), jsx(Accordion.Panel, {
+              children: jsx(Stack, {
+                gap: 6,
+                children: category.actions.map(action => jsx(UnstyledButton, {
+                  draggable: !!onActionDragStart,
+                  onDragStart: e => handleActionInteraction(e, action),
+                  onClick: e => handleActionInteraction(e, action),
                   style: {
-                    fontSize: 11
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    border: `1px solid ${action.color || '#e5e7eb'}`,
+                    background: 'white',
+                    cursor: onActionDragStart ? 'grab' : 'pointer',
+                    transition: 'all 0.15s ease',
+                    borderLeftWidth: action.color ? 3 : 1
                   },
-                  children: action.description
-                }), action.tags && action.tags.length > 0 && jsx(Group, {
-                  gap: 4,
-                  mb: 4,
-                  children: action.tags.map(tag => jsx(Badge, {
-                    size: "xs",
-                    variant: "light",
-                    color: "gray",
-                    children: tag
-                  }, tag))
-                }), action.outcomes && action.outcomes.length > 0 && jsx(Group, {
-                  gap: 4,
-                  children: action.outcomes.map(outcome => jsx(Text, {
-                    size: "xs",
-                    style: {
-                      fontSize: 10,
-                      color: '#6b7280',
-                      padding: '2px 6px',
-                      borderRadius: 3,
-                      background: '#f3f4f6',
-                      fontWeight: 500
-                    },
-                    children: outcome
-                  }, outcome))
-                })]
-              }, action.id))
-            })
-          })]
-        }, category.name);
-      })]
-    })
+                  styles: {
+                    root: {
+                      '&:hover': {
+                        borderColor: action.color || '#6b7280',
+                        boxShadow: `0 2px 8px ${action.color ? `${action.color}30` : 'rgba(107, 114, 128, 0.15)'}`,
+                        transform: 'translateY(-1px)'
+                      },
+                      '&:active': {
+                        cursor: onActionDragStart ? 'grabbing' : 'pointer'
+                      }
+                    }
+                  },
+                  children: jsxs(Box, {
+                    children: [jsxs(Group, {
+                      gap: 8,
+                      wrap: "nowrap",
+                      mb: action.description ? 4 : 0,
+                      children: [action.icon && jsx(Box, {
+                        style: {
+                          display: 'flex',
+                          alignItems: 'center',
+                          color: action.color || '#6b7280',
+                          flexShrink: 0
+                        },
+                        children: getIconComponent(action.icon, 16)
+                      }), jsx(Text, {
+                        size: "xs",
+                        fw: 500,
+                        style: {
+                          flex: 1,
+                          minWidth: 0
+                        },
+                        truncate: true,
+                        children: action.name
+                      })]
+                    }), action.description && jsx(Text, {
+                      size: "xs",
+                      c: "dimmed",
+                      lineClamp: 2,
+                      mb: 4,
+                      children: action.description
+                    }), action.tags && action.tags.length > 0 && jsx(Group, {
+                      gap: 4,
+                      mb: 4,
+                      children: action.tags.slice(0, 3).map(tag => jsx(Badge, {
+                        size: "xs",
+                        variant: "light",
+                        color: "gray",
+                        children: tag
+                      }, tag))
+                    }), action.outcomes && action.outcomes.length > 0 && jsx(Group, {
+                      gap: 4,
+                      children: action.outcomes.map(outcome => jsx(Text, {
+                        size: "xs",
+                        style: {
+                          fontSize: 10,
+                          color: '#6b7280',
+                          padding: '2px 6px',
+                          borderRadius: 3,
+                          background: '#f3f4f6',
+                          fontWeight: 500
+                        },
+                        children: outcome
+                      }, outcome))
+                    })]
+                  })
+                }, action.id))
+              })
+            })]
+          }, category.name))]
+        }), filteredPrimitives.length === 0 && filteredTriggers.length === 0 && filteredActions.length === 0 && jsx(Box, {
+          p: 16,
+          style: {
+            textAlign: 'center'
+          },
+          children: jsx(Text, {
+            size: "sm",
+            c: "dimmed",
+            children: "Nessun elemento trovato"
+          })
+        })]
+      })
+    })]
   });
 });
 ActionsPanel.displayName = 'ActionsPanel';
@@ -105310,6 +105397,8 @@ function WorkflowDesignerV2({
   const [settingsDraft, setSettingsDraft] = useState(metadata);
   const [persistedSnapshot, setPersistedSnapshot] = useState(null);
   const nameInputRef = useRef(null);
+  const reactFlowWrapper = useRef(null);
+  const [reactFlowInstance, setReactFlowInstance] = useState(null);
   const currentSnapshot = useMemo(() => createWorkflowDesignerSnapshot(nodes, edges, metadata), [nodes, edges, metadata]);
   const hasPendingNameEdit = isEditingName && tempName.trim() !== metadata.name;
   const hasPendingSettingsChanges = showSettingsModal && JSON.stringify(normalizeForComparison$1(settingsDraft)) !== JSON.stringify(normalizeForComparison$1(metadata));
@@ -105361,8 +105450,68 @@ function WorkflowDesignerV2({
   const getAvailableOutputs = useAvailableOutputs(nodes, edges, actions, triggers);
   const visualWhileEdges = useMemo(() => computeWhileReturnVisualEdges(nodes, edges), [nodes, edges]);
   const displayEdges = useMemo(() => [...edges, ...visualWhileEdges], [edges, visualWhileEdges]);
+  // Wrapper functions to call addNode with position from drag and drop
+  const onAddAction = useCallback((action, position) => {
+    addActionNode(action, position);
+  }, [addActionNode]);
+  const onAddTrigger = useCallback((trigger, position) => {
+    addTriggerNode(trigger, position);
+  }, [addTriggerNode]);
+  const onAddPrimitive = useCallback((primitiveType, label, position) => {
+    addPrimitiveNode(primitiveType, label, position);
+  }, [addPrimitiveNode]);
   const selectedNode = nodes.find(n => n.id === selectedNodeId);
   // Handlers
+  const handleFlowInit = useCallback(instance => {
+    setReactFlowInstance(instance);
+  }, []);
+  const handleDragOver = useCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+  const handleDrop = useCallback(event => {
+    event.preventDefault();
+    const itemType = event.dataTransfer.getData('application/reactflow-itemtype');
+    const itemDataJson = event.dataTransfer.getData('application/reactflow-itemdata');
+    if (!itemType || !itemDataJson) return;
+    if (!reactFlowInstance) return;
+    const position = reactFlowInstance.screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY
+    });
+    try {
+      const itemData = JSON.parse(itemDataJson);
+      if (itemType === 'action') {
+        const action = itemData;
+        onAddAction(action, position);
+      } else if (itemType === 'trigger') {
+        const trigger = itemData;
+        onAddTrigger(trigger, position);
+      } else if (itemType === 'primitive') {
+        onAddPrimitive(itemData.type, itemData.label, position);
+      }
+    } catch (error) {
+      console.error('Error parsing dropped item:', error);
+    }
+  }, [reactFlowInstance, onAddAction, onAddTrigger, onAddPrimitive]);
+  const handleActionDragStart = (event, action) => {
+    event.dataTransfer.setData('application/reactflow-itemtype', 'action');
+    event.dataTransfer.setData('application/reactflow-itemdata', JSON.stringify(action));
+    event.dataTransfer.effectAllowed = 'move';
+  };
+  const handleTriggerDragStart = (event, trigger) => {
+    event.dataTransfer.setData('application/reactflow-itemtype', 'trigger');
+    event.dataTransfer.setData('application/reactflow-itemdata', JSON.stringify(trigger));
+    event.dataTransfer.effectAllowed = 'move';
+  };
+  const handlePrimitiveDragStart = (event, primitiveType, label) => {
+    event.dataTransfer.setData('application/reactflow-itemtype', 'primitive');
+    event.dataTransfer.setData('application/reactflow-itemdata', JSON.stringify({
+      type: primitiveType,
+      label
+    }));
+    event.dataTransfer.effectAllowed = 'move';
+  };
   const handleNodeClick = useCallback((_, node) => {
     setSelectedNodeId(node.id);
     setShowConfigPanel(true);
@@ -105626,12 +105775,16 @@ function WorkflowDesignerV2({
       children: [jsx(ActionsPanel, {
         actions: actions,
         triggers: triggers,
-        onAddAction: addActionNode,
-        onAddTrigger: addTriggerNode,
-        onAddPrimitive: addPrimitiveNode,
+        onAddAction: onAddAction,
+        onAddTrigger: onAddTrigger,
+        onAddPrimitive: onAddPrimitive,
+        onActionDragStart: handleActionDragStart,
+        onTriggerDragStart: handleTriggerDragStart,
+        onPrimitiveDragStart: handlePrimitiveDragStart,
         loading: actionsLoading,
         triggersLoading: triggersLoading
       }), jsx(Box, {
+        ref: reactFlowWrapper,
         style: {
           flex: 1,
           background: COLORS.background.canvas
@@ -105639,11 +105792,14 @@ function WorkflowDesignerV2({
         children: jsxs(index$2, {
           nodes: nodes,
           edges: displayEdges,
+          onInit: handleFlowInit,
           onNodesChange: onNodesChange,
           onEdgesChange: onEdgesChange,
           onConnect: onConnect,
           onNodeClick: handleNodeClick,
           onNodesDelete: onNodesDelete,
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
           nodeTypes: nodeTypes$1,
           edgeTypes: edgeTypes,
           fitView: true,
@@ -106551,7 +106707,7 @@ function generateCountBasedPorts(descriptor, config) {
       const i = index + 1;
       return {
         id: applyTemplate(portNamePattern, {
-          i: i === 1 ? '' : String(i),
+          i: i === 1 ? '1' : String(i),
           index: String(i)
         }),
         label: applyTemplate(labelPattern, {
@@ -106567,7 +106723,7 @@ function generateCountBasedPorts(descriptor, config) {
   const ports = [];
   for (let i = 1; i <= count; i++) {
     const portName = applyTemplate(portNamePattern, {
-      i: i === 1 ? '' : String(i),
+      i: i === 1 ? '1' : String(i),
       index: String(i)
     });
     const label = applyTemplate(labelPattern, {
@@ -112707,6 +112863,7 @@ function BlockConfigPanel({
         });
       case BlockConfigFieldType.TextArea:
       case BlockConfigFieldType.Expression:
+      case BlockConfigFieldType.Sql:
         return jsx(Textarea, {
           label: field.label,
           description: field.description,
@@ -113923,6 +114080,7 @@ function EtlDesigner({
   const nameInputRef = useRef(null);
   const reactFlowWrapper = useRef(null);
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
+  const [editorLoaded, setEditorLoaded] = useState(false);
   const closeConfigPanel = useCallback(() => {
     setShowConfigPanel(false);
     setSelectedNodeId(null);
@@ -113977,7 +114135,15 @@ function EtlDesigner({
     setShowSettingsModal(false);
   };
   useEffect(() => {
-    if (!pipelineId || blockDescriptors.size === 0) return;
+    if (!pipelineId && blockDescriptors.size === 0) {
+      return;
+    }
+    if (!pipelineId && blockDescriptors.size > 0) {
+      setEditorLoaded(true);
+    }
+    if (!pipelineId || blockDescriptors.size === 0) {
+      return;
+    }
     const loadPipeline = () => __awaiter(this, void 0, void 0, function* () {
       try {
         const pipeline = yield FluxoClientSys.Instance.workflow.getEtlPipeline(pipelineId);
@@ -114004,6 +114170,7 @@ function EtlDesigner({
           customMetadata: pipeline.metadata
         })));
         setTempName(pipeline.name);
+        setEditorLoaded(true);
       } catch (error) {
         console.error('Failed to load ETL pipeline:', error);
         notifications.show({
@@ -114250,7 +114417,7 @@ function EtlDesigner({
             size: "xs",
             variant: "light",
             color: pipelineDebug.isStopping ? 'yellow' : pipelineDebug.status === 'running' || pipelineDebug.status === 'subscribed' ? 'green' : pipelineDebug.status === 'failed' ? 'red' : pipelineDebug.status === 'completed' ? 'teal' : pipelineDebug.status === 'cancelled' ? 'gray' : pipelineDebug.status === 'connecting' ? 'yellow' : 'gray',
-            children: ["Debug: ", pipelineDebug.isStopping ? 'stopping' : pipelineDebug.status]
+            children: ["Debug:", ' ', pipelineDebug.isStopping ? 'stopping' : pipelineDebug.status]
           }), jsx(Tooltip, {
             label: "Impostazioni",
             children: jsx(ActionIcon, {
@@ -114354,7 +114521,7 @@ function EtlDesigner({
             flex: 1,
             background: '#fafafa'
           },
-          children: jsxs(index$2, {
+          children: editorLoaded && jsxs(index$2, {
             nodes: nodes,
             edges: displayEdges,
             onInit: handleFlowInit,
@@ -115320,7 +115487,7 @@ function EtlBrowse({
             fw: 600,
             children: "Metriche blocchi"
           }), jsx(ScrollArea, {
-            h: 260,
+            h: 'calc(100vh - 260px)',
             children: jsxs(Table, {
               highlightOnHover: true,
               bg: "white",