@xtr-dev/payload-automation 0.0.38 → 0.0.39

package/dist/components/WorkflowBuilder/WorkflowBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/WorkflowBuilder/WorkflowBuilder.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useMemo, useState } from 'react'\nimport { \n  ReactFlow,\n  Node,\n  Edge,\n  addEdge,\n  Connection,\n  useNodesState,\n  useEdgesState,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel\n} from '@xyflow/react'\nimport '@xyflow/react/dist/style.css'\n\n// Import custom node types\nimport { StepNode } from './nodes/StepNode.js'\nimport { WorkflowToolbar } from './WorkflowToolbar.js'\nimport { StepConfigurationForm } from './StepConfigurationForm.js'\n\n// Define node types for React Flow\nconst nodeTypes = {\n  stepNode: StepNode,\n}\n\ninterface WorkflowData {\n  id: string\n  name: string\n  steps?: Array<{\n    name: string\n    type: string\n    position?: { x: number; y: number }\n    visual?: { color?: string; icon?: string }\n    dependencies?: string[]\n  }>\n  layout?: {\n    viewport?: { x: number; y: number; zoom: number }\n  }\n}\n\ninterface StepType {\n  slug: string\n  label?: string\n  inputSchema?: any[]\n  outputSchema?: any[]\n}\n\ninterface WorkflowBuilderProps {\n  workflow?: WorkflowData\n  availableStepTypes?: StepType[]\n  onSave?: (workflow: WorkflowData) => void\n  readonly?: boolean\n}\n\nexport const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({\n  workflow,\n  availableStepTypes = [],\n  onSave,\n  readonly = false\n}) => {\n  const [selectedNode, setSelectedNode] = useState<Node | null>(null)\n\n  // Convert workflow steps to React Flow nodes\n  const initialNodes: Node[] = useMemo(() => {\n    if (!workflow?.steps) return []\n\n    return workflow.steps.map((step, index) => ({\n      id: step.name || `step-${index}`,\n      type: 'stepNode',\n      position: step.position || { x: 100 + index * 200, y: 100 },\n      data: {\n        label: step.name || 'Unnamed Step',\n        stepType: step.type,\n        color: step.visual?.color || '#3b82f6',\n        icon: step.visual?.icon,\n        dependencies: step.dependencies || []\n      }\n    }))\n  }, [workflow?.steps])\n\n  // Convert dependencies to React Flow edges\n  const initialEdges: Edge[] = useMemo(() => {\n    if (!workflow?.steps) return []\n\n    const edges: Edge[] = []\n    \n    workflow.steps.forEach((step, index) => {\n      const targetId = step.name || `step-${index}`\n      \n      if (step.dependencies) {\n        step.dependencies.forEach((depName) => {\n          // Find the source step\n          const sourceStep = workflow.steps?.find(s => s.name === depName)\n          if (sourceStep) {\n            const sourceId = sourceStep.name || `step-${workflow.steps?.indexOf(sourceStep)}`\n            edges.push({\n              id: `${sourceId}-${targetId}`,\n              source: sourceId,\n              target: targetId,\n              type: 'smoothstep'\n            })\n          }\n        })\n      }\n    })\n\n    return edges\n  }, [workflow?.steps])\n\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)\n\n  // Handle new connections\n  const onConnect = useCallback((params: Connection) => {\n    if (readonly) return\n    \n    setEdges((eds) => addEdge({\n      ...params,\n      type: 'smoothstep'\n    }, eds))\n  }, [setEdges, readonly])\n\n  // Handle node selection\n  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {\n    console.log('Node clicked:', node.id, node.data.label)\n    setSelectedNode(node)\n  }, [])\n\n  // Handle adding new step\n  const onAddStep = useCallback((stepType: string) => {\n    if (readonly) return\n\n    const newStep: Node = {\n      id: `step-${Date.now()}`,\n      type: 'stepNode',\n      position: { x: 100, y: 100 },\n      data: {\n        label: 'New Step',\n        stepType,\n        color: '#3b82f6',\n        dependencies: []\n      }\n    }\n\n    setNodes((nds) => [...nds, newStep])\n  }, [setNodes, readonly])\n\n  // Handle updating a node's data\n  const handleNodeUpdate = useCallback((nodeId: string, newData: Partial<Node['data']>) => {\n    setNodes((nds) => \n      nds.map((node) => \n        node.id === nodeId \n          ? { ...node, data: { ...node.data, ...newData } }\n          : node\n      )\n    )\n  }, [setNodes])\n\n  // Handle saving workflow\n  const handleSave = useCallback(() => {\n    if (!workflow || !onSave) return\n\n    // Convert nodes and edges back to workflow format\n    const updatedSteps = nodes.map((node) => {\n      // Find dependencies from edges\n      const dependencies = edges\n        .filter(edge => edge.target === node.id)\n        .map(edge => edge.source)\n\n      return {\n        name: node.id,\n        type: node.data.stepType as string,\n        position: node.position,\n        visual: {\n          color: node.data.color as string,\n          icon: node.data.icon as string\n        },\n        dependencies: dependencies.length > 0 ? dependencies : undefined\n      }\n    })\n\n    const updatedWorkflow: WorkflowData = {\n      ...workflow,\n      steps: updatedSteps\n    }\n\n    onSave(updatedWorkflow)\n  }, [workflow, nodes, edges, onSave])\n\n  return (\n    <div style={{ \n      width: '100%', \n      height: '600px',\n      display: 'flex',\n      background: 'var(--theme-bg)',\n      borderRadius: '4px',\n      border: '1px solid var(--theme-elevation-100)'\n    }}>\n      {/* Main canvas area */}\n      <div style={{ \n        flex: selectedNode ? '1 1 70%' : '1 1 100%',\n        transition: 'flex 0.3s ease'\n      }}>\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onConnect={onConnect}\n          onNodeClick={onNodeClick}\n          nodeTypes={nodeTypes}\n          fitView\n          attributionPosition=\"top-right\"\n        >\n          <Controls />\n          <MiniMap />\n          <Background variant={BackgroundVariant.Dots} gap={12} size={1} />\n          \n          {!readonly && (\n            <Panel position=\"top-left\">\n              <WorkflowToolbar \n                availableStepTypes={availableStepTypes}\n                onAddStep={onAddStep}\n                onSave={handleSave}\n              />\n            </Panel>\n          )}\n        </ReactFlow>\n      </div>\n\n      {/* Side panel for step configuration */}\n      {selectedNode && !readonly && (\n        <div style={{\n          flex: '0 0 30%',\n          borderLeft: '1px solid var(--theme-elevation-100)',\n          background: 'var(--theme-elevation-0)',\n          display: 'flex',\n          flexDirection: 'column'\n        }}>\n          <StepConfigurationForm\n            selectedNode={selectedNode}\n            availableStepTypes={availableStepTypes}\n            availableSteps={nodes.map(node => node.id)}\n            onNodeUpdate={handleNodeUpdate}\n            onClose={() => setSelectedNode(null)}\n          />\n        </div>\n      )}\n    </div>\n  )\n}"],"names":["React","useCallback","useMemo","useState","ReactFlow","addEdge","useNodesState","useEdgesState","Controls","Background","BackgroundVariant","MiniMap","Panel","StepNode","WorkflowToolbar","StepConfigurationForm","nodeTypes","stepNode","WorkflowBuilder","workflow","availableStepTypes","onSave","readonly","selectedNode","setSelectedNode","initialNodes","steps","map","step","index","id","name","type","position","x","y","data","label","stepType","color","visual","icon","dependencies","initialEdges","edges","forEach","targetId","depName","sourceStep","find","s","sourceId","indexOf","push","source","target","nodes","setNodes","onNodesChange","setEdges","onEdgesChange","onConnect","params","eds","onNodeClick","_event","node","console","log","onAddStep","newStep","Date","now","nds","handleNodeUpdate","nodeId","newData","handleSave","updatedSteps","filter","edge","length","undefined","updatedWorkflow","div","style","width","height","display","background","borderRadius","border","flex","transition","fitView","attributionPosition","variant","Dots","gap","size","borderLeft","flexDirection","availableSteps","onNodeUpdate","onClose"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAC7D,SACEC,SAAS,EAGTC,OAAO,EAEPC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,iBAAiB,EACjBC,OAAO,EACPC,KAAK,QACA,gBAAe;AACtB,OAAO,+BAA8B;AAErC,2BAA2B;AAC3B,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,SAASC,eAAe,QAAQ,uBAAsB;AACtD,SAASC,qBAAqB,QAAQ,6BAA4B;AAElE,mCAAmC;AACnC,MAAMC,YAAY;IAChBC,UAAUJ;AACZ;AA+BA,OAAO,MAAMK,kBAAkD,CAAC,EAC9DC,QAAQ,EACRC,qBAAqB,EAAE,EACvBC,MAAM,EACNC,WAAW,KAAK,EACjB;IACC,MAAM,CAACC,cAAcC,gBAAgB,GAAGrB,SAAsB;IAE9D,6CAA6C;IAC7C,MAAMsB,eAAuBvB,QAAQ;QACnC,IAAI,CAACiB,UAAUO,OAAO,OAAO,EAAE;QAE/B,OAAOP,SAASO,KAAK,CAACC,GAAG,CAAC,CAACC,MAAMC,QAAW,CAAA;gBAC1CC,IAAIF,KAAKG,IAAI,IAAI,CAAC,KAAK,EAAEF,OAAO;gBAChCG,MAAM;gBACNC,UAAUL,KAAKK,QAAQ,IAAI;oBAAEC,GAAG,MAAML,QAAQ;oBAAKM,GAAG;gBAAI;gBAC1DC,MAAM;oBACJC,OAAOT,KAAKG,IAAI,IAAI;oBACpBO,UAAUV,KAAKI,IAAI;oBACnBO,OAAOX,KAAKY,MAAM,EAAED,SAAS;oBAC7BE,MAAMb,KAAKY,MAAM,EAAEC;oBACnBC,cAAcd,KAAKc,YAAY,IAAI,EAAE;gBACvC;YACF,CAAA;IACF,GAAG;QAACvB,UAAUO;KAAM;IAEpB,2CAA2C;IAC3C,MAAMiB,eAAuBzC,QAAQ;QACnC,IAAI,CAACiB,UAAUO,OAAO,OAAO,EAAE;QAE/B,MAAMkB,QAAgB,EAAE;QAExBzB,SAASO,KAAK,CAACmB,OAAO,CAAC,CAACjB,MAAMC;YAC5B,MAAMiB,WAAWlB,KAAKG,IAAI,IAAI,CAAC,KAAK,EAAEF,OAAO;YAE7C,IAAID,KAAKc,YAAY,EAAE;gBACrBd,KAAKc,YAAY,CAACG,OAAO,CAAC,CAACE;oBACzB,uBAAuB;oBACvB,MAAMC,aAAa7B,SAASO,KAAK,EAAEuB,KAAKC,CAAAA,IAAKA,EAAEnB,IAAI,KAAKgB;oBACxD,IAAIC,YAAY;wBACd,MAAMG,WAAWH,WAAWjB,IAAI,IAAI,CAAC,KAAK,EAAEZ,SAASO,KAAK,EAAE0B,QAAQJ,aAAa;wBACjFJ,MAAMS,IAAI,CAAC;4BACTvB,IAAI,GAAGqB,SAAS,CAAC,EAAEL,UAAU;4BAC7BQ,QAAQH;4BACRI,QAAQT;4BACRd,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QAEA,OAAOY;IACT,GAAG;QAACzB,UAAUO;KAAM;IAEpB,MAAM,CAAC8B,OAAOC,UAAUC,cAAc,GAAGpD,cAAcmB;IACvD,MAAM,CAACmB,OAAOe,UAAUC,cAAc,GAAGrD,cAAcoC;IAEvD,yBAAyB;IACzB,MAAMkB,YAAY5D,YAAY,CAAC6D;QAC7B,IAAIxC,UAAU;QAEdqC,SAAS,CAACI,MAAQ1D,QAAQ;gBACxB,GAAGyD,MAAM;gBACT9B,MAAM;YACR,GAAG+B;IACL,GAAG;QAACJ;QAAUrC;KAAS;IAEvB,wBAAwB;IACxB,MAAM0C,cAAc/D,YAAY,CAACgE,QAA0BC;QACzDC,QAAQC,GAAG,CAAC,iBAAiBF,KAAKpC,EAAE,EAAEoC,KAAK9B,IAAI,CAACC,KAAK;QACrDb,gBAAgB0C;IAClB,GAAG,EAAE;IAEL,yBAAyB;IACzB,MAAMG,YAAYpE,YAAY,CAACqC;QAC7B,IAAIhB,UAAU;QAEd,MAAMgD,UAAgB;YACpBxC,IAAI,CAAC,KAAK,EAAEyC,KAAKC,GAAG,IAAI;YACxBxC,MAAM;YACNC,UAAU;gBAAEC,GAAG;gBAAKC,GAAG;YAAI;YAC3BC,MAAM;gBACJC,OAAO;gBACPC;gBACAC,OAAO;gBACPG,cAAc,EAAE;YAClB;QACF;QAEAe,SAAS,CAACgB,MAAQ;mBAAIA;gBAAKH;aAAQ;IACrC,GAAG;QAACb;QAAUnC;KAAS;IAEvB,gCAAgC;IAChC,MAAMoD,mBAAmBzE,YAAY,CAAC0E,QAAgBC;QACpDnB,SAAS,CAACgB,MACRA,IAAI9C,GAAG,CAAC,CAACuC,OACPA,KAAKpC,EAAE,KAAK6C,SACR;oBAAE,GAAGT,IAAI;oBAAE9B,MAAM;wBAAE,GAAG8B,KAAK9B,IAAI;wBAAE,GAAGwC,OAAO;oBAAC;gBAAE,IAC9CV;IAGV,GAAG;QAACT;KAAS;IAEb,yBAAyB;IACzB,MAAMoB,aAAa5E,YAAY;QAC7B,IAAI,CAACkB,YAAY,CAACE,QAAQ;QAE1B,kDAAkD;QAClD,MAAMyD,eAAetB,MAAM7B,GAAG,CAAC,CAACuC;YAC9B,+BAA+B;YAC/B,MAAMxB,eAAeE,MAClBmC,MAAM,CAACC,CAAAA,OAAQA,KAAKzB,MAAM,KAAKW,KAAKpC,EAAE,EACtCH,GAAG,CAACqD,CAAAA,OAAQA,KAAK1B,MAAM;YAE1B,OAAO;gBACLvB,MAAMmC,KAAKpC,EAAE;gBACbE,MAAMkC,KAAK9B,IAAI,CAACE,QAAQ;gBACxBL,UAAUiC,KAAKjC,QAAQ;gBACvBO,QAAQ;oBACND,OAAO2B,KAAK9B,IAAI,CAACG,KAAK;oBACtBE,MAAMyB,KAAK9B,IAAI,CAACK,IAAI;gBACtB;gBACAC,cAAcA,aAAauC,MAAM,GAAG,IAAIvC,eAAewC;YACzD;QACF;QAEA,MAAMC,kBAAgC;YACpC,GAAGhE,QAAQ;YACXO,OAAOoD;QACT;QAEAzD,OAAO8D;IACT,GAAG;QAAChE;QAAUqC;QAAOZ;QAAOvB;KAAO;IAEnC,qBACE,MAAC+D;QAAIC,OAAO;YACVC,OAAO;YACPC,QAAQ;YACRC,SAAS;YACTC,YAAY;YACZC,cAAc;YACdC,QAAQ;QACV;;0BAEE,KAACP;gBAAIC,OAAO;oBACVO,MAAMrE,eAAe,YAAY;oBACjCsE,YAAY;gBACd;0BACE,cAAA,MAACzF;oBACCoD,OAAOA;oBACPZ,OAAOA;oBACPc,eAAeA;oBACfE,eAAeA;oBACfC,WAAWA;oBACXG,aAAaA;oBACbhD,WAAWA;oBACX8E,OAAO;oBACPC,qBAAoB;;sCAEpB,KAACvF;sCACD,KAACG;sCACD,KAACF;4BAAWuF,SAAStF,kBAAkBuF,IAAI;4BAAEC,KAAK;4BAAIC,MAAM;;wBAE3D,CAAC7E,0BACA,KAACV;4BAAMqB,UAAS;sCACd,cAAA,KAACnB;gCACCM,oBAAoBA;gCACpBiD,WAAWA;gCACXhD,QAAQwD;;;;;;YAQjBtD,gBAAgB,CAACD,0BAChB,KAAC8D;gBAAIC,OAAO;oBACVO,MAAM;oBACNQ,YAAY;oBACZX,YAAY;oBACZD,SAAS;oBACTa,eAAe;gBACjB;0BACE,cAAA,KAACtF;oBACCQ,cAAcA;oBACdH,oBAAoBA;oBACpBkF,gBAAgB9C,MAAM7B,GAAG,CAACuC,CAAAA,OAAQA,KAAKpC,EAAE;oBACzCyE,cAAc7B;oBACd8B,SAAS,IAAMhF,gBAAgB;;;;;AAM3C,EAAC"}

package/dist/components/WorkflowBuilder/WorkflowToolbar.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export const WorkflowToolbar = ({ availableStepTypes, onAddStep, onSave })=>{
+    const getStepTypeLabel = (stepType)=>{
+        return stepType.label || stepType.slug.replace(/-/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
+    };
+    const getStepTypeIcon = (stepType)=>{
+        // Simple icon mapping based on step type
+        switch(stepType.slug){
+            case 'http-request-step':
+                return '🌐';
+            case 'create-document-step':
+                return '📄';
+            case 'read-document-step':
+                return '👁️';
+            case 'update-document-step':
+                return '✏️';
+            case 'delete-document-step':
+                return '🗑️';
+            case 'send-email-step':
+                return '📧';
+            default:
+                return '⚡';
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            background: 'var(--theme-elevation-0)',
+            padding: '12px',
+            borderRadius: '4px',
+            border: '1px solid var(--theme-elevation-150)',
+            minWidth: '200px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("h4", {
+                style: {
+                    margin: '0 0 12px 0',
+                    fontSize: '14px',
+                    fontWeight: '600',
+                    color: 'var(--theme-text)'
+                },
+                children: "Add Step"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginBottom: '16px'
+                },
+                children: availableStepTypes.map((stepType)=>/*#__PURE__*/ _jsxs("button", {
+                        onClick: ()=>onAddStep(stepType.slug),
+                        style: {
+                            display: 'block',
+                            width: '100%',
+                            padding: '8px 12px',
+                            margin: '4px 0',
+                            background: 'var(--theme-elevation-50)',
+                            border: '1px solid var(--theme-elevation-100)',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            fontSize: '12px',
+                            color: 'var(--theme-text)',
+                            transition: 'background-color 0.2s'
+                        },
+                        onMouseEnter: (e)=>{
+                            e.currentTarget.style.backgroundColor = 'var(--theme-elevation-100)';
+                        },
+                        onMouseLeave: (e)=>{
+                            e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    marginRight: '8px'
+                                },
+                                children: getStepTypeIcon(stepType)
+                            }),
+                            getStepTypeLabel(stepType)
+                        ]
+                    }, stepType.slug))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    borderTop: '1px solid var(--theme-elevation-100)',
+                    paddingTop: '12px'
+                },
+                children: /*#__PURE__*/ _jsx("button", {
+                    onClick: onSave,
+                    style: {
+                        width: '100%',
+                        padding: '8px 16px',
+                        background: 'var(--theme-success-500)',
+                        color: 'var(--theme-base-0)',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        fontSize: '12px',
+                        fontWeight: '500'
+                    },
+                    children: "💾 Save Workflow"
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=WorkflowToolbar.js.map

package/dist/components/WorkflowBuilder/WorkflowToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/WorkflowBuilder/WorkflowToolbar.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\ninterface AvailableStepType {\n  slug: string\n  label?: string\n  inputSchema?: any[]\n  outputSchema?: any[]\n}\n\ninterface WorkflowToolbarProps {\n  availableStepTypes: AvailableStepType[]\n  onAddStep: (stepType: string) => void\n  onSave: () => void\n}\n\nexport const WorkflowToolbar: React.FC<WorkflowToolbarProps> = ({\n  availableStepTypes,\n  onAddStep,\n  onSave\n}) => {\n  const getStepTypeLabel = (stepType: AvailableStepType) => {\n    return stepType.label || stepType.slug.replace(/-/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())\n  }\n\n  const getStepTypeIcon = (stepType: AvailableStepType) => {\n    // Simple icon mapping based on step type\n    switch (stepType.slug) {\n      case 'http-request-step':\n        return '🌐'\n      case 'create-document-step':\n        return '📄'\n      case 'read-document-step':\n        return '👁️'\n      case 'update-document-step':\n        return '✏️'\n      case 'delete-document-step':\n        return '🗑️'\n      case 'send-email-step':\n        return '📧'\n      default:\n        return '⚡'\n    }\n  }\n\n  return (\n    <div style={{\n      background: 'var(--theme-elevation-0)',\n      padding: '12px',\n      borderRadius: '4px',\n      border: '1px solid var(--theme-elevation-150)',\n      minWidth: '200px'\n    }}>\n      <h4 style={{ \n        margin: '0 0 12px 0', \n        fontSize: '14px', \n        fontWeight: '600',\n        color: 'var(--theme-text)'\n      }}>\n        Add Step\n      </h4>\n      \n      <div style={{ marginBottom: '16px' }}>\n        {availableStepTypes.map((stepType) => (\n          <button\n            key={stepType.slug}\n            onClick={() => onAddStep(stepType.slug)}\n            style={{\n              display: 'block',\n              width: '100%',\n              padding: '8px 12px',\n              margin: '4px 0',\n              background: 'var(--theme-elevation-50)',\n              border: '1px solid var(--theme-elevation-100)',\n              borderRadius: '4px',\n              cursor: 'pointer',\n              textAlign: 'left',\n              fontSize: '12px',\n              color: 'var(--theme-text)',\n              transition: 'background-color 0.2s'\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--theme-elevation-100)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n            }}\n          >\n            <span style={{ marginRight: '8px' }}>\n              {getStepTypeIcon(stepType)}\n            </span>\n            {getStepTypeLabel(stepType)}\n          </button>\n        ))}\n      </div>\n\n      <div style={{ borderTop: '1px solid var(--theme-elevation-100)', paddingTop: '12px' }}>\n        <button\n          onClick={onSave}\n          style={{\n            width: '100%',\n            padding: '8px 16px',\n            background: 'var(--theme-success-500)',\n            color: 'var(--theme-base-0)',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: '500'\n          }}\n        >\n          💾 Save Workflow\n        </button>\n      </div>\n    </div>\n  )\n}"],"names":["React","WorkflowToolbar","availableStepTypes","onAddStep","onSave","getStepTypeLabel","stepType","label","slug","replace","l","toUpperCase","getStepTypeIcon","div","style","background","padding","borderRadius","border","minWidth","h4","margin","fontSize","fontWeight","color","marginBottom","map","button","onClick","display","width","cursor","textAlign","transition","onMouseEnter","e","currentTarget","backgroundColor","onMouseLeave","span","marginRight","borderTop","paddingTop"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAezB,OAAO,MAAMC,kBAAkD,CAAC,EAC9DC,kBAAkB,EAClBC,SAAS,EACTC,MAAM,EACP;IACC,MAAMC,mBAAmB,CAACC;QACxB,OAAOA,SAASC,KAAK,IAAID,SAASE,IAAI,CAACC,OAAO,CAAC,MAAM,KAAKA,OAAO,CAAC,SAASC,CAAAA,IAAKA,EAAEC,WAAW;IAC/F;IAEA,MAAMC,kBAAkB,CAACN;QACvB,yCAAyC;QACzC,OAAQA,SAASE,IAAI;YACnB,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT;gBACE,OAAO;QACX;IACF;IAEA,qBACE,MAACK;QAAIC,OAAO;YACVC,YAAY;YACZC,SAAS;YACTC,cAAc;YACdC,QAAQ;YACRC,UAAU;QACZ;;0BACE,KAACC;gBAAGN,OAAO;oBACTO,QAAQ;oBACRC,UAAU;oBACVC,YAAY;oBACZC,OAAO;gBACT;0BAAG;;0BAIH,KAACX;gBAAIC,OAAO;oBAAEW,cAAc;gBAAO;0BAChCvB,mBAAmBwB,GAAG,CAAC,CAACpB,yBACvB,MAACqB;wBAECC,SAAS,IAAMzB,UAAUG,SAASE,IAAI;wBACtCM,OAAO;4BACLe,SAAS;4BACTC,OAAO;4BACPd,SAAS;4BACTK,QAAQ;4BACRN,YAAY;4BACZG,QAAQ;4BACRD,cAAc;4BACdc,QAAQ;4BACRC,WAAW;4BACXV,UAAU;4BACVE,OAAO;4BACPS,YAAY;wBACd;wBACAC,cAAc,CAACC;4BACbA,EAAEC,aAAa,CAACtB,KAAK,CAACuB,eAAe,GAAG;wBAC1C;wBACAC,cAAc,CAACH;4BACbA,EAAEC,aAAa,CAACtB,KAAK,CAACuB,eAAe,GAAG;wBAC1C;;0CAEA,KAACE;gCAAKzB,OAAO;oCAAE0B,aAAa;gCAAM;0CAC/B5B,gBAAgBN;;4BAElBD,iBAAiBC;;uBA1BbA,SAASE,IAAI;;0BA+BxB,KAACK;gBAAIC,OAAO;oBAAE2B,WAAW;oBAAwCC,YAAY;gBAAO;0BAClF,cAAA,KAACf;oBACCC,SAASxB;oBACTU,OAAO;wBACLgB,OAAO;wBACPd,SAAS;wBACTD,YAAY;wBACZS,OAAO;wBACPN,QAAQ;wBACRD,cAAc;wBACdc,QAAQ;wBACRT,UAAU;wBACVC,YAAY;oBACd;8BACD;;;;;AAMT,EAAC"}

package/dist/components/WorkflowBuilder/index.js

@@ -0,0 +1,6 @@
+export { WorkflowBuilder } from './WorkflowBuilder.js';
+export { WorkflowToolbar } from './WorkflowToolbar.js';
+export { StepConfigurationForm } from './StepConfigurationForm.js';
+export { StepNode } from './nodes/StepNode.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/WorkflowBuilder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/WorkflowBuilder/index.ts"],"sourcesContent":["export { WorkflowBuilder } from './WorkflowBuilder.js'\nexport { WorkflowToolbar } from './WorkflowToolbar.js'\nexport { StepConfigurationForm } from './StepConfigurationForm.js'\nexport { StepNode } from './nodes/StepNode.js'"],"names":["WorkflowBuilder","WorkflowToolbar","StepConfigurationForm","StepNode"],"mappings":"AAAA,SAASA,eAAe,QAAQ,uBAAsB;AACtD,SAASC,eAAe,QAAQ,uBAAsB;AACtD,SAASC,qBAAqB,QAAQ,6BAA4B;AAClE,SAASC,QAAQ,QAAQ,sBAAqB"}

package/dist/components/WorkflowBuilder/nodes/StepNode.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+export const StepNode = /*#__PURE__*/ memo(({ data, selected })=>{
+    const { label, stepType, color = '#3b82f6', icon, dependencies = [] } = data;
+    const getStepTypeIcon = (type)=>{
+        // Return icon from data or default based on type
+        if (icon) return icon;
+        switch(type){
+            case 'http-request-step':
+                return '🌐';
+            case 'create-document-step':
+                return '📄';
+            case 'read-document-step':
+                return '👁️';
+            case 'update-document-step':
+                return '✏️';
+            case 'delete-document-step':
+                return '🗑️';
+            case 'send-email-step':
+                return '📧';
+            default:
+                return '⚡';
+        }
+    };
+    const getStepTypeLabel = (type)=>{
+        return type.replace(/-/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            background: color,
+            color: 'white',
+            borderRadius: '8px',
+            padding: '12px 16px',
+            minWidth: '150px',
+            border: selected ? '2px solid #1e40af' : '1px solid rgba(255, 255, 255, 0.2)',
+            boxShadow: selected ? '0 8px 25px rgba(0, 0, 0, 0.15)' : '0 4px 15px rgba(0, 0, 0, 0.1)',
+            transition: 'all 0.2s ease',
+            cursor: 'pointer',
+            position: 'relative'
+        },
+        title: "Click to configure this step",
+        children: [
+            dependencies.length > 0 && /*#__PURE__*/ _jsx(Handle, {
+                type: "target",
+                position: Position.Top,
+                style: {
+                    background: '#fff',
+                    border: '2px solid #3b82f6',
+                    width: '10px',
+                    height: '10px'
+                }
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    marginBottom: '4px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontSize: '16px'
+                        },
+                        children: getStepTypeIcon(stepType)
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        children: /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontWeight: '600',
+                                fontSize: '14px',
+                                lineHeight: '1.2'
+                            },
+                            children: label
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    fontSize: '11px',
+                    opacity: 0.9,
+                    fontWeight: '400'
+                },
+                children: getStepTypeLabel(stepType)
+            }),
+            dependencies.length > 0 && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: 'absolute',
+                    top: '4px',
+                    right: '20px',
+                    background: 'rgba(255, 255, 255, 0.2)',
+                    borderRadius: '50%',
+                    width: '16px',
+                    height: '16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '8px',
+                    fontWeight: 'bold',
+                    pointerEvents: 'none' // Allow clicks to pass through to parent
+                },
+                children: dependencies.length
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: 'absolute',
+                    top: '4px',
+                    right: '4px',
+                    background: 'rgba(255, 255, 255, 0.3)',
+                    borderRadius: '50%',
+                    width: '16px',
+                    height: '16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '10px',
+                    pointerEvents: 'none' // Allow clicks to pass through to parent
+                },
+                children: "⚙️"
+            }),
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "source",
+                position: Position.Bottom,
+                style: {
+                    background: '#fff',
+                    border: '2px solid #3b82f6',
+                    width: '10px',
+                    height: '10px'
+                }
+            })
+        ]
+    });
+});
+StepNode.displayName = 'StepNode';
+
+//# sourceMappingURL=StepNode.js.map

package/dist/components/WorkflowBuilder/nodes/StepNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/WorkflowBuilder/nodes/StepNode.tsx"],"sourcesContent":["'use client'\n\nimport React, { memo } from 'react'\nimport { Handle, Position, NodeProps } from '@xyflow/react'\n\ninterface StepNodeData {\n  label: string\n  stepType: string\n  color?: string\n  icon?: string\n  dependencies?: string[]\n}\n\nexport const StepNode: React.FC<NodeProps> = memo(({ data, selected }) => {\n  const { label, stepType, color = '#3b82f6', icon, dependencies = [] } = data as unknown as StepNodeData\n\n  const getStepTypeIcon = (type: string) => {\n    // Return icon from data or default based on type\n    if (icon) return icon\n    \n    switch (type) {\n      case 'http-request-step':\n        return '🌐'\n      case 'create-document-step':\n        return '📄'\n      case 'read-document-step':\n        return '👁️'\n      case 'update-document-step':\n        return '✏️'\n      case 'delete-document-step':\n        return '🗑️'\n      case 'send-email-step':\n        return '📧'\n      default:\n        return '⚡'\n    }\n  }\n\n  const getStepTypeLabel = (type: string) => {\n    return type.replace(/-/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())\n  }\n\n  return (\n    <div\n      style={{\n        background: color,\n        color: 'white',\n        borderRadius: '8px',\n        padding: '12px 16px',\n        minWidth: '150px',\n        border: selected ? '2px solid #1e40af' : '1px solid rgba(255, 255, 255, 0.2)',\n        boxShadow: selected \n          ? '0 8px 25px rgba(0, 0, 0, 0.15)' \n          : '0 4px 15px rgba(0, 0, 0, 0.1)',\n        transition: 'all 0.2s ease',\n        cursor: 'pointer',\n        position: 'relative'\n      }}\n      title=\"Click to configure this step\"\n    >\n      {/* Input Handle - only show if this step has dependencies */}\n      {dependencies.length > 0 && (\n        <Handle\n          type=\"target\"\n          position={Position.Top}\n          style={{\n            background: '#fff',\n            border: '2px solid #3b82f6',\n            width: '10px',\n            height: '10px'\n          }}\n        />\n      )}\n\n      <div style={{ \n        display: 'flex', \n        alignItems: 'center', \n        gap: '8px',\n        marginBottom: '4px'\n      }}>\n        <span style={{ fontSize: '16px' }}>\n          {getStepTypeIcon(stepType)}\n        </span>\n        <div>\n          <div style={{ \n            fontWeight: '600', \n            fontSize: '14px',\n            lineHeight: '1.2'\n          }}>\n            {label}\n          </div>\n        </div>\n      </div>\n\n      <div style={{ \n        fontSize: '11px', \n        opacity: 0.9,\n        fontWeight: '400'\n      }}>\n        {getStepTypeLabel(stepType)}\n      </div>\n\n      {/* Status indicator for dependencies */}\n      {dependencies.length > 0 && (\n        <div style={{\n          position: 'absolute',\n          top: '4px',\n          right: '20px',\n          background: 'rgba(255, 255, 255, 0.2)',\n          borderRadius: '50%',\n          width: '16px',\n          height: '16px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          fontSize: '8px',\n          fontWeight: 'bold',\n          pointerEvents: 'none' // Allow clicks to pass through to parent\n        }}>\n          {dependencies.length}\n        </div>\n      )}\n\n      {/* Configuration indicator */}\n      <div style={{\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        background: 'rgba(255, 255, 255, 0.3)',\n        borderRadius: '50%',\n        width: '16px',\n        height: '16px',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fontSize: '10px',\n        pointerEvents: 'none' // Allow clicks to pass through to parent\n      }}>\n        ⚙️\n      </div>\n\n      {/* Output Handle - always show for potential connections */}\n      <Handle\n        type=\"source\"\n        position={Position.Bottom}\n        style={{\n          background: '#fff',\n          border: '2px solid #3b82f6',\n          width: '10px',\n          height: '10px'\n        }}\n      />\n    </div>\n  )\n})\n\nStepNode.displayName = 'StepNode'"],"names":["React","memo","Handle","Position","StepNode","data","selected","label","stepType","color","icon","dependencies","getStepTypeIcon","type","getStepTypeLabel","replace","l","toUpperCase","div","style","background","borderRadius","padding","minWidth","border","boxShadow","transition","cursor","position","title","length","Top","width","height","display","alignItems","gap","marginBottom","span","fontSize","fontWeight","lineHeight","opacity","top","right","justifyContent","pointerEvents","Bottom","displayName"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,IAAI,QAAQ,QAAO;AACnC,SAASC,MAAM,EAAEC,QAAQ,QAAmB,gBAAe;AAU3D,OAAO,MAAMC,yBAAgCH,KAAK,CAAC,EAAEI,IAAI,EAAEC,QAAQ,EAAE;IACnE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,SAAS,EAAEC,IAAI,EAAEC,eAAe,EAAE,EAAE,GAAGN;IAExE,MAAMO,kBAAkB,CAACC;QACvB,iDAAiD;QACjD,IAAIH,MAAM,OAAOA;QAEjB,OAAQG;YACN,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT,KAAK;gBACH,OAAO;YACT;gBACE,OAAO;QACX;IACF;IAEA,MAAMC,mBAAmB,CAACD;QACxB,OAAOA,KAAKE,OAAO,CAAC,MAAM,KAAKA,OAAO,CAAC,SAASC,CAAAA,IAAKA,EAAEC,WAAW;IACpE;IAEA,qBACE,MAACC;QACCC,OAAO;YACLC,YAAYX;YACZA,OAAO;YACPY,cAAc;YACdC,SAAS;YACTC,UAAU;YACVC,QAAQlB,WAAW,sBAAsB;YACzCmB,WAAWnB,WACP,mCACA;YACJoB,YAAY;YACZC,QAAQ;YACRC,UAAU;QACZ;QACAC,OAAM;;YAGLlB,aAAamB,MAAM,GAAG,mBACrB,KAAC5B;gBACCW,MAAK;gBACLe,UAAUzB,SAAS4B,GAAG;gBACtBZ,OAAO;oBACLC,YAAY;oBACZI,QAAQ;oBACRQ,OAAO;oBACPC,QAAQ;gBACV;;0BAIJ,MAACf;gBAAIC,OAAO;oBACVe,SAAS;oBACTC,YAAY;oBACZC,KAAK;oBACLC,cAAc;gBAChB;;kCACE,KAACC;wBAAKnB,OAAO;4BAAEoB,UAAU;wBAAO;kCAC7B3B,gBAAgBJ;;kCAEnB,KAACU;kCACC,cAAA,KAACA;4BAAIC,OAAO;gCACVqB,YAAY;gCACZD,UAAU;gCACVE,YAAY;4BACd;sCACGlC;;;;;0BAKP,KAACW;gBAAIC,OAAO;oBACVoB,UAAU;oBACVG,SAAS;oBACTF,YAAY;gBACd;0BACG1B,iBAAiBN;;YAInBG,aAAamB,MAAM,GAAG,mBACrB,KAACZ;gBAAIC,OAAO;oBACVS,UAAU;oBACVe,KAAK;oBACLC,OAAO;oBACPxB,YAAY;oBACZC,cAAc;oBACdW,OAAO;oBACPC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZU,gBAAgB;oBAChBN,UAAU;oBACVC,YAAY;oBACZM,eAAe,OAAO,yCAAyC;gBACjE;0BACGnC,aAAamB,MAAM;;0BAKxB,KAACZ;gBAAIC,OAAO;oBACVS,UAAU;oBACVe,KAAK;oBACLC,OAAO;oBACPxB,YAAY;oBACZC,cAAc;oBACdW,OAAO;oBACPC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZU,gBAAgB;oBAChBN,UAAU;oBACVO,eAAe,OAAO,yCAAyC;gBACjE;0BAAG;;0BAKH,KAAC5C;gBACCW,MAAK;gBACLe,UAAUzB,SAAS4C,MAAM;gBACzB5B,OAAO;oBACLC,YAAY;oBACZI,QAAQ;oBACRQ,OAAO;oBACPC,QAAQ;gBACV;;;;AAIR,GAAE;AAEF7B,SAAS4C,WAAW,GAAG"}