@flowdrop/flowdrop 1.2.2 → 1.4.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/skins/slate.js

@@ -42,6 +42,14 @@ export const slateSkin = {
         "sidebar-category-color": "#c0c0d8",
         // Flat item text: dark for light bg readability
         "sidebar-flat-item-color": "#4a4a6a",
+        // Logo: monochrome purple-grey to match skin
+        "logo-bg": "#eeeef8",
+        "logo-stroke": "#5a5a7a",
+        "logo-line-fill": "#5a5a7a",
+        "logo-drop": "#009cde",
+        "logo-circle": "#f46351",
+        "logo-left": "#ccbaf4",
+        "logo-right": "#ffc423",
     },
     darkTokens: {
         // --- Dark mode color palette (deep navy / original slate) ---
@@ -74,5 +82,13 @@ export const slateSkin = {
         "sidebar-category-color": "#3a3a55",
         // Flat item text: muted, not full-brightness white
         "sidebar-flat-item-color": "#8888aa",
+        // Logo: monochrome purple-grey to match dark skin
+        "logo-bg": "none",
+        "logo-stroke": "#9898b8",
+        "logo-line-fill": "none",
+        "logo-drop": "none",
+        "logo-circle": "none",
+        "logo-left": "none",
+        "logo-right": "none",
     },
 };

package/dist/stories/EdgeDecorator.svelte

@@ -46,7 +46,7 @@
   const SOURCE_ID = "source-node";
   const TARGET_ID = "target-node";
 
-  let nodes = $state<Node[]>([
+  let nodes = $derived<Node[]>([
     {
       id: SOURCE_ID,
       type: "universalNode",
@@ -62,7 +62,7 @@
   ]);
 
   // Handle IDs follow the format: {nodeId}-{input|output}-{portId}
-  let edges = $state<Edge[]>([
+  let edges = $derived<Edge[]>([
     {
       id: "edge-1",
       source: SOURCE_ID,
@@ -100,8 +100,8 @@
 
 <div class="edge-decorator-wrapper">
   <SvelteFlow
-    bind:nodes
-    bind:edges
+    {nodes}
+    {edges}
     {nodeTypes}
     {edgeTypes}
     fitView

package/dist/styles/base.css

@@ -30,6 +30,54 @@
   box-shadow: var(--fd-shadow-md);
 }
 
+/* xyflow Controls & MiniMap: wire up to skin tokens so themes can restyle them */
+.svelte-flow {
+  --xy-controls-button-background-color: var(
+    --fd-controls-button-bg,
+    var(--fd-card)
+  );
+  --xy-controls-button-background-color-hover: var(
+    --fd-controls-button-bg-hover,
+    var(--fd-muted)
+  );
+  --xy-controls-button-color: var(
+    --fd-controls-button-color,
+    var(--fd-foreground)
+  );
+  --xy-controls-button-color-hover: var(
+    --fd-controls-button-color-hover,
+    var(--fd-foreground)
+  );
+  --xy-controls-button-border-color: var(
+    --fd-controls-button-border,
+    var(--fd-border)
+  );
+  --xy-controls-box-shadow: var(
+    --fd-controls-box-shadow,
+    0 0 2px 1px rgba(0, 0, 0, 0.08)
+  );
+
+  --xy-minimap-background-color: var(--fd-minimap-bg, var(--fd-card));
+  --xy-minimap-mask-background-color: var(
+    --fd-minimap-mask-bg,
+    var(--fd-backdrop)
+  );
+  --xy-minimap-mask-stroke-color: var(
+    --fd-minimap-mask-stroke,
+    var(--fd-border)
+  );
+  --xy-minimap-mask-stroke-width: var(--fd-minimap-mask-stroke-width, 1);
+  --xy-minimap-node-background-color: var(
+    --fd-minimap-node-bg,
+    var(--fd-muted)
+  );
+  --xy-minimap-node-stroke-color: var(
+    --fd-minimap-node-stroke,
+    var(--fd-border-muted)
+  );
+  --xy-minimap-node-stroke-width: var(--fd-minimap-node-stroke-width, 2);
+}
+
 /* Flow node handles: 20px connection area, 12px visible circle (::before)
    Override xyflow's default background so port color (--fd-handle-fill from inline style) shows.
    Use `.svelte-flow` parent for higher specificity (0-2-0) to beat xyflow defaults (0-1-0). */

package/dist/svelte-app.d.ts

@@ -13,7 +13,7 @@ import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js"
 import type { FlowDropTheme, FlowDropThemeName } from "./types/theme.js";
 import type { WorkflowFormatAdapter } from "./registry/workflowFormatRegistry.js";
 import "./registry/builtinFormats.js";
-import type { PartialSettings } from "./types/settings.js";
+import type { PartialSettings, SettingsCategory } from "./types/settings.js";
 /**
  * Navbar action configuration
  */
@@ -74,6 +74,12 @@ export interface FlowDropMountOptions {
     formatAdapters?: WorkflowFormatAdapter[];
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal (defaults to all) */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
 }
 /**
  * Return type for mounted FlowDrop app

package/dist/svelte-app.js

@@ -47,7 +47,7 @@ import { globalSaveWorkflow, globalExportWorkflow, } from "./services/globalSave
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, theme, } = options;
+    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, theme, settingsCategories, showSettingsSyncButton, showSettingsResetButton, } = options;
     // Register custom format adapters before mounting
     if (formatAdapters) {
         for (const adapter of formatAdapters) {
@@ -137,6 +137,9 @@ export async function mountFlowDropApp(container, options = {}) {
             eventHandlers,
             features,
             theme,
+            settingsCategories,
+            showSettingsSyncButton,
+            showSettingsResetButton,
         },
     });
     // Set up draft auto-save manager

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.2",
+  "version": "1.4.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",