@flowdrop/flowdrop 1.6.0 → 1.7.0

package/dist/components/App.svelte

@@ -57,7 +57,8 @@
   import { getUiSettings, updateSettings } from '../stores/settingsStore.svelte.js';
   import {
     initializePortCompatibility,
-    getPortCompatibilityChecker
+    getPortCompatibilityChecker,
+    isPortCompatibilityInitialized
   } from '../utils/connections.js';
   import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
   import { workflowFormatRegistry } from '../registry/workflowFormatRegistry.js';
@@ -121,6 +122,8 @@
     showSettingsResetButton?: boolean;
     /** Pluggable swap strategies — instance-scoped, checked in order */
     swapStrategies?: SwapStrategy[];
+    /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
+    workflowSettingsSchema?: ConfigSchema;
   }
 
   let {
@@ -146,7 +149,8 @@
     settingsCategories,
     showSettingsSyncButton,
     showSettingsResetButton,
-    swapStrategies
+    swapStrategies,
+    workflowSettingsSchema
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
@@ -223,39 +227,60 @@
   let swapTargetMetadata = $state<NodeMetadata | null>(null);
   let swapInteractiveState = $state<InteractiveSwapState | null>(null);
 
+  // Built-in workflow settings field names — consumer schemas must not reuse these.
+  const WORKFLOW_SETTINGS_RESERVED = new Set(['name', 'description', 'format']);
+
   // Workflow configuration schema (derived to pick up dynamic format options)
-  let workflowConfigSchema: ConfigSchema = $derived({
-    type: 'object' as const,
-    properties: {
-      name: {
-        type: 'string',
-        title: 'Workflow Name',
-        description: 'The name of the workflow',
-        default: ''
-      },
-      description: {
-        type: 'string',
-        title: 'Description',
-        description: 'A description of the workflow',
-        format: 'multiline',
-        default: ''
+  let workflowConfigSchema: ConfigSchema = $derived.by(() => {
+    const extraProps = Object.fromEntries(
+      Object.entries(workflowSettingsSchema?.properties ?? {}).filter(([k]) => {
+        if (WORKFLOW_SETTINGS_RESERVED.has(k)) {
+          logger.warn(
+            `workflowSettingsSchema: property "${k}" is reserved and will be ignored. Choose a different key.`
+          );
+          return false;
+        }
+        return true;
+      })
+    );
+    const extraRequired = (workflowSettingsSchema?.required ?? []).filter(
+      (k) => !WORKFLOW_SETTINGS_RESERVED.has(k)
+    );
+    return {
+      type: 'object' as const,
+      properties: {
+        name: {
+          type: 'string',
+          title: 'Workflow Name',
+          description: 'The name of the workflow',
+          default: ''
+        },
+        description: {
+          type: 'string',
+          title: 'Description',
+          description: 'A description of the workflow',
+          format: 'multiline',
+          default: ''
+        },
+        format: {
+          type: 'string',
+          title: 'Workflow Format',
+          description: 'The specification format for this workflow',
+          oneOf: workflowFormatRegistry.getOneOfOptions(),
+          default: 'flowdrop'
+        },
+        ...extraProps
       },
-      format: {
-        type: 'string',
-        title: 'Workflow Format',
-        description: 'The specification format for this workflow',
-        oneOf: workflowFormatRegistry.getOneOfOptions(),
-        default: 'flowdrop'
-      }
-    },
-    required: ['name']
+      required: ['name', ...extraRequired]
+    };
   });
 
   // Workflow configuration values
   let workflowConfigValues = $derived({
     name: getWorkflowName() || '',
     description: getWorkflowStore()?.description || '',
-    format: getWorkflowStore()?.metadata?.format || 'flowdrop'
+    format: getWorkflowStore()?.metadata?.format || 'flowdrop',
+    ...(getWorkflowStore()?.config ?? {})
   });
 
   // Get the current node from the workflow store
@@ -727,7 +752,10 @@
 
         // Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
         // mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
-        initializePortCompatibility(DEFAULT_PORT_CONFIG);
+        // Only initialize with defaults if not already set — preserves custom port configs.
+        if (!isPortCompatibilityInitialized()) {
+          initializePortCompatibility(DEFAULT_PORT_CONFIG);
+        }
 
         await fetchNodeTypes();
 
@@ -1055,13 +1083,16 @@
                   }
                 }
 
+                // Extract built-in fields; everything else belongs in workflow.config
+                const { name, description, format: _format, ...customConfig } = config;
                 workflowActions.batchUpdate({
-                  name: config.name as string,
-                  description: config.description as string | undefined,
+                  name: name as string,
+                  description: description as string | undefined,
                   metadata: {
                     ...wf.metadata,
                     format: newFormat
-                  }
+                  },
+                  ...(workflowSettingsSchema && { config: customConfig as Record<string, unknown> })
                 });
               }
             }}

package/dist/components/App.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { NodeMetadata, Workflow } from '../types/index.js';
+import type { NodeMetadata, Workflow, ConfigSchema } from '../types/index.js';
 import type { SwapStrategy } from '../utils/nodeSwap.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
@@ -61,6 +61,8 @@ interface Props {
     showSettingsResetButton?: boolean;
     /** Pluggable swap strategies — instance-scoped, checked in order */
     swapStrategies?: SwapStrategy[];
+    /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
+    workflowSettingsSchema?: ConfigSchema;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/form/FormCodeEditor.svelte

@@ -91,13 +91,14 @@
       return '';
     }
     if (typeof val === 'string') {
-      // Check if it's already a valid JSON string
+      // If the string is already a valid JSON representation (e.g. '{"a":1}' or '"foo"'),
+      // use it as-is to avoid double-encoding
       try {
         JSON.parse(val);
         return val;
       } catch {
-        // Not valid JSON, return as-is
-        return val;
+        // Plain JS string value — serialize it as a JSON string literal (adds quotes)
+        return JSON.stringify(val);
       }
     }
     // Convert object to formatted JSON string

package/dist/components/nodes/SimpleNode.svelte

@@ -82,9 +82,7 @@
    * This allows users to customize the node description per-instance via config.
    */
   const displayDescription = $derived(
-    (props.data.config?.instanceDescription as string) ||
-      props.data.metadata?.description ||
-      'A configurable simple node'
+    (props.data.config?.instanceDescription as string) || props.data.metadata?.description || null
   );
 
   // Handle configuration sidebar - now using global ConfigSidebar
@@ -226,9 +224,11 @@
     </div>
 
     <!-- Node Description -->
-    <p class="flowdrop-simple-node__description">
-      {displayDescription}
-    </p>
+    {#if displayDescription}
+      <p class="flowdrop-simple-node__description">
+        {displayDescription}
+      </p>
+    {/if}
   </div>
 
   <!-- Processing indicator -->
@@ -281,7 +281,7 @@
     cursor: pointer;
     transition: all var(--fd-transition-fast);
     box-shadow: var(--fd-shadow-md);
-    overflow: visible; /* Changed from hidden to visible to allow handles to be properly accessible */
+    overflow: hidden;
     z-index: 10;
     color: var(--fd-foreground);
   }
@@ -328,7 +328,7 @@
   .flowdrop-simple-node__header {
     padding: var(--fd-space-xl);
     background: var(--fd-header);
-    border-radius: var(--fd-radius-xl);
+    flex: 1;
   }
 
   .flowdrop-simple-node__header-content {

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

@@ -36,6 +36,11 @@
     },
     "metadata": {
       "$ref": "#/$defs/WorkflowMetadata"
+    },
+    "config": {
+      "type": "object",
+      "description": "Custom workflow-level configuration values. Populated when a workflowSettingsSchema is provided to the editor.",
+      "additionalProperties": true
     }
   },
   "required": [

package/dist/stores/workflowStore.svelte.d.ts

@@ -263,6 +263,7 @@ export declare const workflowActions: {
         name?: string;
         description?: string;
         metadata?: Partial<Workflow["metadata"]>;
+        config?: Record<string, unknown>;
     }) => void;
     /**
      * Swap a node — atomically replaces nodes and edges with a descriptive history entry.

package/dist/stores/workflowStore.svelte.js

@@ -632,6 +632,7 @@ export const workflowActions = {
             ...(updates.description !== undefined && {
                 description: updates.description
             }),
+            ...(updates.config !== undefined && { config: updates.config }),
             metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined)
         };
         bumpVersion();

package/dist/types/index.d.ts

@@ -1150,6 +1150,8 @@ export interface Workflow {
         /** Workflow format. Determines sidebar filtering and export behavior. */
         format?: WorkflowFormat;
     };
+    /** Custom workflow-level configuration values, populated via workflowSettingsSchema. */
+    config?: Record<string, unknown>;
 }
 /**
  * API response types

package/dist/utils/connections.d.ts

@@ -57,6 +57,10 @@ export declare class PortCompatibilityChecker {
  * Initialize the global port compatibility checker
  */
 export declare function initializePortCompatibility(portConfig: PortConfig): void;
+/**
+ * Returns true if the port compatibility checker has been initialized.
+ */
+export declare function isPortCompatibilityInitialized(): boolean;
 /**
  * Get the global port compatibility checker
  */

package/dist/utils/connections.js

@@ -114,6 +114,12 @@ let globalCompatibilityChecker = null;
 export function initializePortCompatibility(portConfig) {
     globalCompatibilityChecker = new PortCompatibilityChecker(portConfig);
 }
+/**
+ * Returns true if the port compatibility checker has been initialized.
+ */
+export function isPortCompatibilityInitialized() {
+    return globalCompatibilityChecker !== null;
+}
 /**
  * Get the global port compatibility checker
  */

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