@runtypelabs/react-flow 0.1.4 → 0.1.6

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @runtypelabs/react-flow@0.1.4 build /home/runner/work/core/core/packages/react-flow
+> @runtypelabs/react-flow@0.1.6 build /home/runner/_work/core/core/packages/react-flow
 > tsup
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.1
-CLI Using tsup config: /home/runner/work/core/core/packages/react-flow/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/core/core/packages/react-flow/tsup.config.ts
 CLI Target: es2020
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     104.29 KB
-CJS dist/index.js.map 224.04 KB
-CJS ⚡️ Build success in 2183ms
-ESM dist/index.mjs     100.24 KB
-ESM dist/index.mjs.map 223.72 KB
-ESM ⚡️ Build success in 2183ms
+CJS dist/index.js     105.20 KB
+CJS dist/index.js.map 224.71 KB
+CJS ⚡️ Build success in 402ms
+ESM dist/index.mjs     101.15 KB
+ESM dist/index.mjs.map 224.39 KB
+ESM ⚡️ Build success in 402ms

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @runtypelabs/react-flow
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [0140d17]
+  - @runtypelabs/sdk@0.5.0
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [cf6fcdc]
+  - @runtypelabs/sdk@0.4.0
+
 ## 0.1.4
 
 ### Patch Changes

package/README.md

@@ -54,13 +54,13 @@ function MyFlowEditor() {
 
 ## Supported Step Types
 
-| Step Type | Node Component | Description |
-|-----------|---------------|-------------|
-| `prompt` | PromptNode | AI text generation with model selection |
-| `fetch-url` | FetchUrlNode | HTTP requests to fetch data |
-| `transform-data` | CodeNode | JavaScript code execution |
-| `conditional` | ConditionalNode | Branch execution based on conditions |
-| `send-email` | SendEmailNode | Send emails |
+| Step Type        | Node Component  | Description                             |
+| ---------------- | --------------- | --------------------------------------- |
+| `prompt`         | PromptNode      | AI text generation with model selection |
+| `fetch-url`      | FetchUrlNode    | HTTP requests to fetch data             |
+| `transform-data` | CodeNode        | JavaScript code execution               |
+| `conditional`    | ConditionalNode | Branch execution based on conditions    |
+| `send-email`     | SendEmailNode   | Send emails                             |
 
 ## Components
 
@@ -86,19 +86,19 @@ The main editor component that wraps React Flow with Runtype integration.
 
 **Props:**
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `client` | `RuntypeClient` | Required. Runtype API client instance |
-| `flowId` | `string` | ID of an existing flow to load |
-| `initialName` | `string` | Initial flow name for new flows |
-| `initialDescription` | `string` | Initial flow description |
-| `initialSteps` | `FlowStep[]` | Initial steps to populate |
-| `onSave` | `(flow) => void` | Callback when flow is saved |
-| `onChange` | `(nodes, edges) => void` | Callback when flow changes |
-| `onStepSelect` | `(step) => void` | Callback when a step is selected |
-| `showToolbar` | `boolean` | Whether to show the toolbar (default: true) |
-| `readOnly` | `boolean` | Whether the editor is read-only (default: false) |
-| `className` | `string` | Custom class name for the container |
+| Prop                 | Type                     | Description                                      |
+| -------------------- | ------------------------ | ------------------------------------------------ |
+| `client`             | `RuntypeClient`          | Required. Runtype API client instance            |
+| `flowId`             | `string`                 | ID of an existing flow to load                   |
+| `initialName`        | `string`                 | Initial flow name for new flows                  |
+| `initialDescription` | `string`                 | Initial flow description                         |
+| `initialSteps`       | `FlowStep[]`             | Initial steps to populate                        |
+| `onSave`             | `(flow) => void`         | Callback when flow is saved                      |
+| `onChange`           | `(nodes, edges) => void` | Callback when flow changes                       |
+| `onStepSelect`       | `(step) => void`         | Callback when a step is selected                 |
+| `showToolbar`        | `boolean`                | Whether to show the toolbar (default: true)      |
+| `readOnly`           | `boolean`                | Whether the editor is read-only (default: false) |
+| `className`          | `string`                 | Custom class name for the container              |
 
 ## Hooks
 
@@ -273,6 +273,7 @@ This package exports TypeScript types directly from source files to ensure compa
 ### Peer Dependencies
 
 This package requires the following peer dependencies:
+
 - `react` ^18.0.0
 - `react-dom` ^18.0.0
 - `@xyflow/react` ^12.0.0
@@ -288,4 +289,3 @@ import '@xyflow/react/dist/style.css'
 ## License
 
 MIT
-

package/dist/index.js

@@ -95,7 +95,9 @@ function flowStepsToNodes(steps, options) {
       }
       if (maxBranchLength > 0) {
         const advance = BRANCH_OFFSET_X + maxBranchLength * (NODE_WIDTH + NODE_SPACING_X);
-        console.log(`[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`);
+        console.log(
+          `[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`
+        );
         currentX += advance;
         console.log(`[flowStepsToNodes] After conditional, currentX = ${currentX}`);
       } else {
@@ -108,7 +110,9 @@ function flowStepsToNodes(steps, options) {
   return nodes;
 }
 function nodesToFlowSteps(nodes) {
-  const topLevelNodes = nodes.filter((n) => !n.parentId && !n.id.includes("-true-") && !n.id.includes("-false-"));
+  const topLevelNodes = nodes.filter(
+    (n) => !n.parentId && !n.id.includes("-true-") && !n.id.includes("-false-")
+  );
   const sortedNodes = [...topLevelNodes].sort((a, b) => a.position.x - b.position.x);
   return sortedNodes.map((node, index) => {
     const step = node.data.step;
@@ -160,7 +164,9 @@ function createEdgesFromNodes(nodes) {
       data: { stepOrder: i }
     });
   }
-  const conditionalNodes = nodes.filter((n) => n.data.step.type === "conditional" && !isBranchNode(n));
+  const conditionalNodes = nodes.filter(
+    (n) => n.data.step.type === "conditional" && !isBranchNode(n)
+  );
   for (const conditionalNode of conditionalNodes) {
     const conditionalId = conditionalNode.id;
     const conditionalIndex = topLevelNodes.findIndex((n) => n.id === conditionalId);
@@ -290,13 +296,13 @@ function createEdgesFromNodes(nodes) {
 }
 function getDefaultStepName(type) {
   const names = {
-    "prompt": "AI Prompt",
+    prompt: "AI Prompt",
     "fetch-url": "Fetch URL",
     "retrieve-record": "Retrieve Record",
     "fetch-github": "Fetch GitHub",
     "api-call": "API Call",
     "transform-data": "Transform Data",
-    "conditional": "Conditional",
+    conditional: "Conditional",
     "set-variable": "Set Variable",
     "upsert-record": "Upsert Record",
     "send-email": "Send Email",
@@ -304,7 +310,7 @@ function getDefaultStepName(type) {
     "send-event": "Send Event",
     "send-stream": "Send Stream",
     "update-record": "Update Record",
-    "search": "Search",
+    search: "Search",
     "generate-embedding": "Generate Embedding",
     "vector-search": "Vector Search",
     "tool-call": "Tool Call",
@@ -624,9 +630,7 @@ function useRuntypeFlow(options) {
   const handleStepDelete = react.useCallback(
     (stepId) => {
       setNodes((nds) => nds.filter((node) => node.id !== stepId));
-      setEdges(
-        (eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId)
-      );
+      setEdges((eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId));
       setHasUnsavedChanges(true);
     },
     [setNodes, setEdges]
@@ -1085,10 +1089,7 @@ function useFlowValidation(options) {
       warnings
     };
   }, [steps]);
-  const validateStepFn = react.useCallback(
-    (step) => validateStep(step, steps),
-    [steps]
-  );
+  const validateStepFn = react.useCallback((step) => validateStep(step, steps), [steps]);
   const isStepValid = react.useCallback(
     (stepId) => {
       return !result.errors.some((e) => e.stepId === stepId);
@@ -1542,10 +1543,21 @@ var PromptNode = react.memo(function PromptNode2(props) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles2.field, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles2.label, children: "Mode" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles2.modeBadge(isAgentMode), children: isAgentMode ? "Agent" : "Instruction" })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles2.label, children: "Mode" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles2.modeBadge(isAgentMode), children: isAgentMode ? "Agent" : "Instruction" })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "select",
             {
@@ -1821,10 +1833,21 @@ var FetchUrlNode = react.memo(function FetchUrlNode2(props) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles3.field, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles3.label, children: "Method" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.methodBadge(method), children: method })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles3.label, children: "Method" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.methodBadge(method), children: method })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "select",
             {
@@ -2103,10 +2126,21 @@ var CodeNode = react.memo(function CodeNode2(props) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles4.field, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles4.label, children: "Code" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.languageBadge(language), children: language })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles4.label, children: "Code" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.languageBadge(language), children: language })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
@@ -3176,43 +3210,109 @@ function RuntypeFlowEditor({
   ] });
 }
 function PlusIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      ]
+    }
+  );
 }
 function PromptIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" })
+      ]
+    }
+  );
 }
 function GlobeIcon2() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" })
+      ]
+    }
+  );
 }
 function CodeIcon2() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 18 22 12 16 6" }),
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "8 6 2 12 8 18" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "8 6 2 12 8 18" })
+      ]
+    }
+  );
 }
 function BranchIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "6", r: "3" }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "18", r: "3" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "6", r: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "18", r: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
+      ]
+    }
+  );
 }
 function MailIcon2() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+      ]
+    }
+  );
 }
 
 exports.BaseNode = BaseNode;