@flowdrop/flowdrop 1.2.1 → 1.3.0

package/dist/schemas/v1/workflow.schema.json

@@ -38,13 +38,7 @@
       "$ref": "#/$defs/WorkflowMetadata"
     }
   },
-  "required": [
-    "id",
-    "name",
-    "nodes",
-    "edges",
-    "metadata"
-  ],
+  "required": ["id", "name", "nodes", "edges", "metadata"],
   "$defs": {
     "AutocompleteConfig": {
       "type": "object",
@@ -95,9 +89,7 @@
           "description": "Whether to allow multiple selections.\nWhen true, users can select multiple values displayed as tags.\n"
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Branch": {
       "type": "object",
@@ -125,10 +117,7 @@
           "description": "Whether this is the default/fallback branch"
         }
       },
-      "required": [
-        "name",
-        "label"
-      ]
+      "required": ["name", "label"]
     },
     "ConfigProperty": {
       "type": "object",
@@ -136,14 +125,7 @@
       "properties": {
         "type": {
           "type": "string",
-          "enum": [
-            "string",
-            "number",
-            "boolean",
-            "array",
-            "object",
-            "integer"
-          ],
+          "enum": ["string", "number", "boolean", "array", "object", "integer"],
           "description": "JSON Schema type"
         },
         "title": {
@@ -269,18 +251,14 @@
           ]
         }
       },
-      "required": [
-        "type"
-      ]
+      "required": ["type"]
     },
     "ConfigSchema": {
       "type": "object",
       "properties": {
         "type": {
           "type": "string",
-          "enum": [
-            "object"
-          ]
+          "enum": ["object"]
         },
         "properties": {
           "type": "object",
@@ -301,10 +279,7 @@
           "default": false
         }
       },
-      "required": [
-        "type",
-        "properties"
-      ]
+      "required": ["type", "properties"]
     },
     "DynamicPort": {
       "type": "object",
@@ -338,11 +313,7 @@
           "description": "Whether this port is required for execution"
         }
       },
-      "required": [
-        "name",
-        "label",
-        "dataType"
-      ]
+      "required": ["name", "label", "dataType"]
     },
     "NodeCategory": {
       "type": "string",
@@ -433,11 +404,7 @@
           "description": "Whether the node is currently being executed"
         }
       },
-      "required": [
-        "status",
-        "executionCount",
-        "isExecuting"
-      ]
+      "required": ["status", "executionCount", "isExecuting"]
     },
     "NodeExecutionStatus": {
       "type": "string",
@@ -581,11 +548,7 @@
         },
         "type": {
           "type": "string",
-          "enum": [
-            "input",
-            "output",
-            "metadata"
-          ],
+          "enum": ["input", "output", "metadata"],
           "description": "Port direction (input receives data, output sends data)"
         },
         "dataType": {
@@ -614,12 +577,7 @@
           ]
         }
       },
-      "required": [
-        "id",
-        "name",
-        "type",
-        "dataType"
-      ]
+      "required": ["id", "name", "type", "dataType"]
     },
     "NodeType": {
       "type": "string",
@@ -677,9 +635,7 @@
           "description": "Optional description for this option"
         }
       },
-      "required": [
-        "const"
-      ]
+      "required": ["const"]
     },
     "PortDataSchema": {
       "type": "object",
@@ -687,14 +643,7 @@
       "properties": {
         "type": {
           "type": "string",
-          "enum": [
-            "object",
-            "array",
-            "string",
-            "number",
-            "integer",
-            "boolean"
-          ],
+          "enum": ["object", "array", "string", "number", "integer", "boolean"],
           "description": "The JSON Schema type. Use `object` for nested properties,\n`array` for lists with `items` schema.\n"
         },
         "title": {
@@ -743,10 +692,7 @@
           "description": "Y coordinate"
         }
       },
-      "required": [
-        "x",
-        "y"
-      ]
+      "required": ["x", "y"]
     },
     "TemplateVariable": {
       "type": "object",
@@ -804,10 +750,7 @@
           "description": "Source node ID"
         }
       },
-      "required": [
-        "name",
-        "type"
-      ]
+      "required": ["name", "type"]
     },
     "TemplateVariablesConfig": {
       "type": "object",
@@ -854,9 +797,7 @@
           "description": "Map of available variables keyed by variable name"
         }
       },
-      "required": [
-        "variables"
-      ]
+      "required": ["variables"]
     },
     "WorkflowEdge": {
       "type": "object",
@@ -887,12 +828,7 @@
         "type": {
           "type": "string",
           "description": "Connection line type",
-          "enum": [
-            "default",
-            "straight",
-            "step",
-            "smoothstep"
-          ]
+          "enum": ["default", "straight", "step", "smoothstep"]
         },
         "selectable": {
           "type": "boolean",
@@ -919,11 +855,7 @@
               "properties": {
                 "edgeType": {
                   "type": "string",
-                  "enum": [
-                    "trigger",
-                    "tool",
-                    "data"
-                  ],
+                  "enum": ["trigger", "tool", "data"],
                   "description": "Edge type for visual styling"
                 },
                 "sourcePortDataType": {
@@ -947,11 +879,7 @@
           }
         }
       },
-      "required": [
-        "id",
-        "source",
-        "target"
-      ]
+      "required": ["id", "source", "target"]
     },
     "WorkflowMetadata": {
       "type": "object",
@@ -995,11 +923,7 @@
           "default": "flowdrop"
         }
       },
-      "required": [
-        "version",
-        "createdAt",
-        "updatedAt"
-      ]
+      "required": ["version", "createdAt", "updatedAt"]
     },
     "WorkflowNode": {
       "type": "object",
@@ -1060,19 +984,10 @@
               ]
             }
           },
-          "required": [
-            "label",
-            "config",
-            "metadata"
-          ]
+          "required": ["label", "config", "metadata"]
         }
       },
-      "required": [
-        "id",
-        "type",
-        "position",
-        "data"
-      ]
+      "required": ["id", "type", "position", "data"]
     }
   }
 }

package/dist/stores/portCoordinateStore.svelte.js

@@ -13,6 +13,7 @@
  * CSS positioning logic and stays automatically accurate.
  */
 import { SvelteMap } from "svelte/reactivity";
+import { untrack } from "svelte";
 import { ProximityConnectHelper } from "../helpers/proximityConnect.js";
 /** Reactive state holding all port absolute coordinates, keyed by handleId */
 let coordinates = $state(new SvelteMap());
@@ -125,11 +126,21 @@ export function updateNodePortCoordinates(node, getInternalNode) {
     const internalNode = getInternalNode(node.id);
     if (!internalNode)
         return;
-    // Remove old entries for this node
-    for (const [key, coord] of coordinates) {
-        if (coord.nodeId === node.id) {
-            coordinates.delete(key);
+    // Remove old entries for this node.
+    // untrack prevents this read from creating a reactive dependency on `coordinates`
+    // inside any $effect that calls this function — otherwise the effect would re-run
+    // every time we mutate `coordinates`, creating an infinite reactive loop during drag.
+    const keysToDelete = untrack(() => {
+        const keys = [];
+        for (const [key, coord] of coordinates) {
+            if (coord.nodeId === node.id) {
+                keys.push(key);
+            }
         }
+        return keys;
+    });
+    for (const key of keysToDelete) {
+        coordinates.delete(key);
     }
     // Add new entries
     const coords = computeNodePortCoordinates(node, internalNode);
@@ -143,10 +154,17 @@ export function updateNodePortCoordinates(node, getInternalNode) {
  * @param nodeId - ID of the node to remove
  */
 export function removeNodePortCoordinates(nodeId) {
-    for (const [key, coord] of coordinates) {
-        if (coord.nodeId === nodeId) {
-            coordinates.delete(key);
+    const keysToDelete = untrack(() => {
+        const keys = [];
+        for (const [key, coord] of coordinates) {
+            if (coord.nodeId === nodeId) {
+                keys.push(key);
+            }
         }
+        return keys;
+    });
+    for (const key of keysToDelete) {
+        coordinates.delete(key);
     }
 }
 /**

package/dist/types/index.d.ts

@@ -484,6 +484,23 @@ export interface ConfigEditOptions {
 export interface NodeUIExtensions {
     /** Show/hide unconnected handles (ports) to reduce visual noise */
     hideUnconnectedHandles?: boolean;
+    /**
+     * Visual-only port display order (no effect on execution).
+     * Arrays of port IDs in the desired render order.
+     * Ports not listed appear at the end in metadata order.
+     */
+    portOrder?: {
+        inputs?: string[];
+        outputs?: string[];
+    };
+    /**
+     * Manually hidden ports (visual only, no effect on execution).
+     * Required ports cannot be added here — enforced in the UI.
+     */
+    hiddenPorts?: {
+        inputs?: string[];
+        outputs?: string[];
+    };
     /** Custom styles or theme overrides */
     style?: Record<string, unknown>;
     /** Any other UI-specific settings */

package/dist/utils/portUtils.d.ts

@@ -0,0 +1,24 @@
+import type { NodePort } from "../types/index.js";
+/**
+ * Sort ports by an ordered array of port IDs.
+ * Ports not listed appear at the end in their original order.
+ */
+export declare function applyPortOrder(ports: NodePort[], orderedIds: string[] | undefined): NodePort[];
+/**
+ * Compute the CSS `top` offset (px) for a port handle.
+ * - 1 port: centered at 40px
+ * - N ports: 20px start, 40px gap between each
+ */
+export declare function getPortTop(index: number, count: number): number;
+/**
+ * Determine whether a port should be rendered.
+ *
+ * Priority:
+ * 1. Manual hide (`hiddenPorts`) — always wins, regardless of connections
+ * 2. `hideUnconnectedHandles` — hide if not present in the connected handles set
+ * 3. Default — visible
+ */
+export declare function isPortVisible(port: NodePort, direction: "input" | "output", hiddenPorts: {
+    inputs?: string[];
+    outputs?: string[];
+}, hideUnconnectedHandles: boolean, connectedHandles: Set<string>, nodeId: string | undefined): boolean;

package/dist/utils/portUtils.js

@@ -0,0 +1,42 @@
+/**
+ * Sort ports by an ordered array of port IDs.
+ * Ports not listed appear at the end in their original order.
+ */
+export function applyPortOrder(ports, orderedIds) {
+    if (!orderedIds || orderedIds.length === 0)
+        return ports;
+    const orderMap = new Map(orderedIds.map((id, i) => [id, i]));
+    return [...ports].sort((a, b) => {
+        const aIdx = orderMap.get(a.id) ?? Infinity;
+        const bIdx = orderMap.get(b.id) ?? Infinity;
+        // Guard: Infinity - Infinity = NaN, which corrupts sort for two unlisted ports
+        return aIdx === bIdx ? 0 : aIdx - bIdx;
+    });
+}
+/**
+ * Compute the CSS `top` offset (px) for a port handle.
+ * - 1 port: centered at 40px
+ * - N ports: 20px start, 40px gap between each
+ */
+export function getPortTop(index, count) {
+    if (count === 1)
+        return 40;
+    return 20 + index * 40;
+}
+/**
+ * Determine whether a port should be rendered.
+ *
+ * Priority:
+ * 1. Manual hide (`hiddenPorts`) — always wins, regardless of connections
+ * 2. `hideUnconnectedHandles` — hide if not present in the connected handles set
+ * 3. Default — visible
+ */
+export function isPortVisible(port, direction, hiddenPorts, hideUnconnectedHandles, connectedHandles, nodeId) {
+    const hiddenList = direction === "input" ? hiddenPorts.inputs : hiddenPorts.outputs;
+    if (hiddenList?.includes(port.id))
+        return false;
+    if (hideUnconnectedHandles) {
+        return connectedHandles.has(`${nodeId}-${direction}-${port.id}`);
+    }
+    return true;
+}

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"
@@ -172,7 +172,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
-    "@xyflow/svelte": "^1.2",
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/commands": "^6.10.2",
     "@codemirror/lang-json": "^6.0.2",
@@ -182,7 +181,6 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.14",
-    "codemirror": "^6.0.2",
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
     "@iconify/svelte": "^5.0.0",
@@ -204,6 +202,8 @@
     "@vitest/browser": "^3.2.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
+    "@xyflow/svelte": "^1.2",
+    "codemirror": "^6.0.2",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-storybook": "^10.2.15",