@flowdrop/flowdrop 1.3.0 → 1.4.0

package/dist/components/nodes/SimpleNode.stories.svelte

@@ -158,3 +158,67 @@
     })}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "param_a",
+            label: "Parameter A",
+            description: "First parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "param_b",
+            label: "Parameter B",
+            description: "Second parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "result",
+            label: "Result",
+            description: "Function result",
+            dataType: "json",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom_function",
+        name: "Custom Function",
+        description: "A node with dynamic input and output ports",
+        category: "processing",
+        version: "1.0.0",
+        type: "simple",
+        supportedTypes: ["simple", "square", "default"],
+        icon: "mdi:function-variant",
+        color: "#8b5cf6",
+        inputs: [
+          {
+            id: "trigger",
+            name: "Trigger",
+            type: "input",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+        outputs: [
+          {
+            id: "done",
+            name: "Done",
+            type: "output",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+      },
+    })}
+  />
+</Story>

package/dist/components/nodes/SimpleNode.svelte

@@ -16,7 +16,9 @@
     NodeMetadata,
     NodeExtensions,
     NodePort,
+    DynamicPort,
   } from "../../types/index.js";
+  import { dynamicPortToNodePort } from "../../types/index.js";
   import Icon from "@iconify/svelte";
   import {
     getDataTypeColor,
@@ -133,20 +135,34 @@
     }
   }
 
+  const dynamicInputs = $derived(
+    ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "input"),
+    ),
+  );
+
+  const dynamicOutputs = $derived(
+    ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "output"),
+    ),
+  );
+
   /**
    * All visible input ports in user-defined order.
    */
   const visibleInputPorts = $derived(
-    applyPortOrder(props.data.metadata?.inputs ?? [], portOrder.inputs).filter(
-      (p: NodePort) =>
-        isPortVisible(
-          p,
-          "input",
-          hiddenPorts,
-          hideUnconnectedHandles,
-          getConnectedHandles(),
-          props.data.nodeId,
-        ),
+    applyPortOrder(
+      [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
+      portOrder.inputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "input",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
@@ -155,7 +171,7 @@
    */
   const visibleOutputPorts = $derived(
     applyPortOrder(
-      props.data.metadata?.outputs ?? [],
+      [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
       portOrder.outputs,
     ).filter((p: NodePort) =>
       isPortVisible(

package/dist/components/nodes/SquareNode.stories.svelte

@@ -80,3 +80,48 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Data Mapper",
+      config: {
+        dynamicInputs: [
+          {
+            name: "source",
+            label: "Source Data",
+            dataType: "json",
+            required: true,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "mapped",
+            label: "Mapped Output",
+            dataType: "json",
+            required: false,
+          },
+          {
+            name: "errors",
+            label: "Errors",
+            dataType: "string",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "data_mapper",
+        name: "Data Mapper",
+        description: "Map data between formats",
+        category: "processing",
+        version: "1.0.0",
+        type: "square",
+        supportedTypes: ["square"],
+        icon: "mdi:swap-horizontal",
+        color: "#0ea5e9",
+        inputs: [],
+        outputs: [],
+      },
+    })}
+  />
+</Story>

package/dist/components/nodes/SquareNode.svelte

@@ -16,7 +16,9 @@
     NodeMetadata,
     NodeExtensions,
     NodePort,
+    DynamicPort,
   } from "../../types/index.js";
+  import { dynamicPortToNodePort } from "../../types/index.js";
   import Icon from "@iconify/svelte";
   import {
     getDataTypeColor,
@@ -117,20 +119,34 @@
       openConfigSidebar();
     }
   }
+  const dynamicInputs = $derived(
+    ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "input"),
+    ),
+  );
+
+  const dynamicOutputs = $derived(
+    ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "output"),
+    ),
+  );
+
   /**
    * All visible input ports in user-defined order.
    */
   const visibleInputPorts = $derived(
-    applyPortOrder(props.data.metadata?.inputs ?? [], portOrder.inputs).filter(
-      (p: NodePort) =>
-        isPortVisible(
-          p,
-          "input",
-          hiddenPorts,
-          hideUnconnectedHandles,
-          getConnectedHandles(),
-          props.data.nodeId,
-        ),
+    applyPortOrder(
+      [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
+      portOrder.inputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "input",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
@@ -139,7 +155,7 @@
    */
   const visibleOutputPorts = $derived(
     applyPortOrder(
-      props.data.metadata?.outputs ?? [],
+      [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
       portOrder.outputs,
     ).filter((p: NodePort) =>
       isPortVisible(

package/dist/components/nodes/WorkflowNode.stories.svelte

@@ -77,3 +77,66 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "input_1",
+            label: "First Input",
+            description: "The first input parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "input_2",
+            label: "Second Input",
+            description: "The second input parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "output_1",
+            label: "Primary Output",
+            description: "The main output value",
+            dataType: "string",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom-function",
+        name: "Custom Function",
+        description:
+          "Execute a custom function with dynamic inputs and outputs",
+        category: "processing",
+        version: "1.0.0",
+        type: "workflow",
+        icon: "mdi:function-variant",
+        inputs: [
+          {
+            id: "trigger",
+            name: "Trigger",
+            type: "input",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+        outputs: [
+          {
+            id: "done",
+            name: "Done",
+            type: "output",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+      },
+    })}
+  />
+</Story>

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/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.3.0",
+  "version": "1.4.0",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"