@d34dman/flowdrop 0.0.22 → 0.0.24

package/dist/types/index.d.ts

@@ -70,6 +70,61 @@ export interface NodePort {
     description?: string;
     defaultValue?: unknown;
 }
+/**
+ * Dynamic port configuration for user-defined inputs/outputs
+ * These are defined in the node's config and allow users to create
+ * custom input/output handles at runtime similar to gateway branches
+ */
+export interface DynamicPort {
+    /** Unique identifier for the port (used for handle IDs and connections) */
+    name: string;
+    /** Display label shown in the UI */
+    label: string;
+    /** Description of what this port accepts/provides */
+    description?: string;
+    /** Data type for the port (affects color and connection validation) */
+    dataType: NodeDataType;
+    /** Whether this port is required for execution */
+    required?: boolean;
+}
+/**
+ * Branch configuration for gateway nodes
+ *
+ * Branches define conditional output paths in gateway/switch nodes.
+ * Each branch creates an output handle that can be connected to downstream nodes.
+ * Branches are stored in `config.branches` array and support dynamic addition/removal
+ * through the node configuration panel.
+ *
+ * @example
+ * ```typescript
+ * const branches: Branch[] = [
+ *   { name: "high", label: "High Priority", condition: "priority > 8" },
+ *   { name: "medium", label: "Medium Priority", condition: "priority >= 4" },
+ *   { name: "default", label: "Default", isDefault: true }
+ * ];
+ * ```
+ */
+export interface Branch {
+    /** Unique identifier for the branch (used as handle ID and for connections) */
+    name: string;
+    /** Display label shown in the UI (optional, defaults to name) */
+    label?: string;
+    /** Description of when this branch is activated */
+    description?: string;
+    /** Optional value associated with the branch (e.g., for Switch matching) */
+    value?: string;
+    /** Optional condition expression for this branch */
+    condition?: string;
+    /** Whether this is the default/fallback branch */
+    isDefault?: boolean;
+}
+/**
+ * Convert a DynamicPort to a NodePort
+ * @param port - The dynamic port configuration
+ * @param portType - Whether this is an input or output port
+ * @returns A NodePort compatible with the rendering system
+ */
+export declare function dynamicPortToNodePort(port: DynamicPort, portType: 'input' | 'output'): NodePort;
 /**
  * Built-in node types for explicit component rendering.
  * These are the node types that ship with FlowDrop.
@@ -92,6 +147,48 @@ export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway'
  * ```
  */
 export type NodeType = BuiltinNodeType | (string & Record<never, never>);
+/**
+ * UI-related extension settings for nodes
+ * Used to control visual behavior in the workflow editor
+ */
+export interface NodeUIExtensions {
+    /** Show/hide unconnected handles (ports) to reduce visual noise */
+    hideUnconnectedHandles?: boolean;
+    /** Custom styles or theme overrides */
+    style?: Record<string, unknown>;
+    /** Any other UI-specific settings */
+    [key: string]: unknown;
+}
+/**
+ * Custom extension properties for 3rd party integrations
+ * Allows storing additional configuration and UI state data
+ *
+ * @example
+ * ```typescript
+ * const extensions: NodeExtensions = {
+ *   ui: {
+ *     hideUnconnectedHandles: true,
+ *     style: { opacity: 0.8 }
+ *   },
+ *   "myapp:analytics": {
+ *     trackUsage: true,
+ *     customField: "value"
+ *   }
+ * };
+ * ```
+ */
+export interface NodeExtensions {
+    /**
+     * UI-related settings for the node
+     * Used to control visual behavior in the workflow editor
+     */
+    ui?: NodeUIExtensions;
+    /**
+     * Namespaced extension data from 3rd party integrations
+     * Use your package/organization name as the key (e.g., "myapp", "acme:analyzer")
+     */
+    [namespace: string]: unknown;
+}
 /**
  * Node configuration metadata
  */
@@ -114,7 +211,14 @@ export interface NodeMetadata {
     inputs: NodePort[];
     outputs: NodePort[];
     configSchema?: ConfigSchema;
+    /** Default configuration values for this node type */
+    config?: Record<string, unknown>;
     tags?: string[];
+    /**
+     * Custom extension properties for 3rd party integrations
+     * Allows storing additional configuration and UI state data at the node type level
+     */
+    extensions?: NodeExtensions;
 }
 /**
  * Common base interface for all schema properties
@@ -243,13 +347,59 @@ export type SchemaProperty<T extends SchemaType> = T extends 'config' ? ConfigPr
 export type SchemaTypeMap<T extends SchemaType> = T extends 'config' ? ConfigSchema : T extends 'input' ? InputSchema : T extends 'output' ? OutputSchema : never;
 /**
  * Node configuration values
- * Key-value pairs of user-entered configuration values
+ *
+ * Key-value pairs of user-entered configuration values based on the node's configSchema.
+ * This is where all node-specific settings are stored, including:
+ *
+ * **Standard Properties:**
+ * - Any property defined in the node's `configSchema` (e.g., model, temperature, apiKey)
+ *
+ * **Special Properties (Dynamic Ports):**
+ * - `dynamicInputs`: Array of DynamicPort for user-defined input handles
+ * - `dynamicOutputs`: Array of DynamicPort for user-defined output handles
+ * - `branches`: Array of Branch for gateway node conditional output paths
+ *
+ * The backend uses this object to:
+ * - Store and retrieve node configuration
+ * - Pass configuration values to node processors during execution
+ * - Persist node state across sessions
+ *
+ * @example
+ * ```typescript
+ * const config: ConfigValues = {
+ *   // Standard configuration from configSchema
+ *   model: "gpt-4o-mini",
+ *   temperature: 0.7,
+ *   maxTokens: 1000,
+ *
+ *   // Dynamic input ports
+ *   dynamicInputs: [
+ *     { name: "extra_data", label: "Extra Data", dataType: "json" }
+ *   ],
+ *
+ *   // Gateway branches
+ *   branches: [
+ *     { name: "success", label: "Success", condition: "status === 200" },
+ *     { name: "error", label: "Error", isDefault: true }
+ *   ]
+ * };
+ * ```
  */
 export interface ConfigValues {
+    /** Dynamic input ports for user-defined input handles */
+    dynamicInputs?: DynamicPort[];
+    /** Dynamic output ports for user-defined output handles */
+    dynamicOutputs?: DynamicPort[];
+    /** Branches for gateway node conditional output paths */
+    branches?: Branch[];
+    /** Any other configuration properties defined in configSchema */
     [key: string]: unknown;
 }
 /**
  * Extended node type for workflows
+ *
+ * Represents a node instance in a workflow, containing position, display data,
+ * configuration values, and metadata from the node type definition.
  */
 export interface WorkflowNode extends Node {
     id: string;
@@ -257,14 +407,39 @@ export interface WorkflowNode extends Node {
     position: XYPosition;
     deletable?: boolean;
     data: {
+        /** Display label for the node instance */
         label: string;
+        /**
+         * Node configuration values
+         *
+         * Contains all user-configured settings for this node instance based on the
+         * node type's configSchema. This includes standard properties defined in the
+         * schema as well as special dynamic port configurations.
+         *
+         * The backend uses this object to:
+         * - Store and retrieve node configuration
+         * - Pass configuration values to node processors during execution
+         * - Persist node state across sessions
+         *
+         * @see ConfigValues for detailed documentation of available properties
+         */
         config: ConfigValues;
+        /** Node type metadata (inputs, outputs, configSchema, etc.) */
         metadata: NodeMetadata;
+        /** Whether the node is currently processing/executing */
         isProcessing?: boolean;
+        /** Error message if the node execution failed */
         error?: string;
+        /** Alternative node identifier */
         nodeId?: string;
         /** Node execution tracking information */
         executionInfo?: NodeExecutionInfo;
+        /**
+         * Per-instance extension properties for 3rd party integrations
+         * Overrides or extends the node type extensions defined in metadata.extensions
+         * Use for instance-specific UI states or custom data
+         */
+        extensions?: NodeExtensions;
     };
 }
 /**

package/dist/types/index.js

@@ -2,3 +2,19 @@
  * Core types for the Workflow Library
  */
 import { ConnectionLineType } from '@xyflow/svelte';
+/**
+ * Convert a DynamicPort to a NodePort
+ * @param port - The dynamic port configuration
+ * @param portType - Whether this is an input or output port
+ * @returns A NodePort compatible with the rendering system
+ */
+export function dynamicPortToNodePort(port, portType) {
+    return {
+        id: port.name,
+        name: port.label,
+        type: portType,
+        dataType: port.dataType,
+        required: port.required ?? false,
+        description: port.description
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@d34dman/flowdrop",
   "license": "MIT",
   "private": false,
-  "version": "0.0.22",
+  "version": "0.0.24",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -125,7 +125,8 @@
     "vite": "^6.2.6",
     "vite-plugin-devtools-json": "^0.2.1",
     "vitest": "^3.2.3",
-    "vitest-browser-svelte": "^0.1.0"
+    "vitest-browser-svelte": "^0.1.0",
+    "@types/uuid": "^10.0.0"
   },
   "overrides": {
     "@sveltejs/kit": {
@@ -136,7 +137,6 @@
     "svelte"
   ],
   "dependencies": {
-    "@types/uuid": "^10.0.0",
     "@xyflow/svelte": "~1.2",
     "marked": "^16.1.1",
     "svelte-5-french-toast": "^2.0.6",

package/dist/config/demo.d.ts

@@ -1,58 +0,0 @@
-/**
- * Demo configuration for FlowDrop UI
- * Controls which nodes and workflows are shown in demo mode
- */
-import type { DemoConfig } from '../data/samples.js';
-/**
- * Default demo configuration
- * Change this to enable/disable demo mode and control what's shown
- */
-export declare const defaultDemoConfig: DemoConfig;
-/**
- * Demo mode presets for different scenarios
- */
-export declare const demoPresets: Record<string, DemoConfig>;
-/**
- * Get the current demo configuration
- * You can modify this function to read from localStorage, URL params, etc.
- */
-export declare function getCurrentDemoConfig(): DemoConfig;
-/**
- * Set demo configuration (for future use with UI controls)
- */
-export declare function setDemoConfig(config: DemoConfig): void;
-/**
- * Load demo configuration from localStorage
- */
-export declare function loadDemoConfig(): DemoConfig;
-/**
- * Demo workflow configuration
- */
-export declare const demoWorkflowConfig: {
-    defaultWorkflow: string;
-    autoLoadDemo: boolean;
-    sampleWorkflowName: string;
-    sampleWorkflowDescription: string;
-};
-/**
- * Demo instructions for non-technical users
- */
-export declare const demoInstructions: {
-    title: string;
-    description: string;
-    steps: ({
-        step: number;
-        title: string;
-        description: string;
-        example: string;
-        note?: undefined;
-    } | {
-        step: number;
-        title: string;
-        description: string;
-        note: string;
-        example?: undefined;
-    })[];
-    benefits: string[];
-    useCases: string[];
-};

package/dist/config/demo.js

@@ -1,142 +0,0 @@
-/**
- * Demo configuration for FlowDrop UI
- * Controls which nodes and workflows are shown in demo mode
- */
-/**
- * Default demo configuration
- * Change this to enable/disable demo mode and control what's shown
- */
-export const defaultDemoConfig = {
-    enabled: true, // Set to true to enable demo mode
-    mode: 'content-management' // Show only whitelisted content management nodes
-};
-/**
- * Demo mode presets for different scenarios
- */
-export const demoPresets = {
-    // Content management demo mode - show only whitelisted nodes
-    'content-management': {
-        enabled: true,
-        mode: 'content-management'
-    },
-    // Show all nodes (disable demo filtering)
-    'all-nodes': {
-        enabled: false,
-        mode: 'all'
-    }
-};
-/**
- * Get the current demo configuration
- * You can modify this function to read from localStorage, URL params, etc.
- */
-export function getCurrentDemoConfig() {
-    // For now, return the default config
-    // In the future, this could check localStorage or URL parameters
-    return defaultDemoConfig;
-}
-/**
- * Set demo configuration (for future use with UI controls)
- */
-export function setDemoConfig(config) {
-    // Store in localStorage for persistence
-    if (typeof localStorage !== 'undefined') {
-        localStorage.setItem('flowdrop-demo-config', JSON.stringify(config));
-    }
-}
-/**
- * Load demo configuration from localStorage
- */
-export function loadDemoConfig() {
-    if (typeof localStorage !== 'undefined') {
-        const stored = localStorage.getItem('flowdrop-demo-config');
-        if (stored) {
-            try {
-                return JSON.parse(stored);
-            }
-            catch {
-                // Fall back to default if parsing fails
-                return defaultDemoConfig;
-            }
-        }
-    }
-    return defaultDemoConfig;
-}
-/**
- * Demo workflow configuration
- */
-export const demoWorkflowConfig = {
-    // Which workflow to show by default in demo mode
-    defaultWorkflow: 'sample', // Use sample workflow for now
-    // Whether to auto-load a workflow on startup
-    autoLoadDemo: false,
-    // Sample workflow is used in demo mode
-    sampleWorkflowName: 'Simple Chat Workflow',
-    sampleWorkflowDescription: 'A basic workflow demonstrating direct text input to AI model response'
-};
-/**
- * Demo instructions for non-technical users
- */
-export const demoInstructions = {
-    title: 'Multi-Agent Workflow Demo',
-    description: 'This demo shows how FlowDrop uses multiple AI agents working together to process and manage data workflows.',
-    steps: [
-        {
-            step: 1,
-            title: 'User Input',
-            description: 'Start by providing input data or instructions to the main agent.',
-            example: 'Analyze and process the provided dataset'
-        },
-        {
-            step: 2,
-            title: 'Main Agent Orchestration',
-            description: 'The main conversational agent understands your request and coordinates with specialized sub-agents.',
-            note: 'Acts as the intelligent orchestrator of the entire workflow'
-        },
-        {
-            step: 3,
-            title: 'Data Analysis Agent',
-            description: 'Specialized agent analyzes data using search and processing tools to find and examine relevant information.',
-            note: 'Uses connected data sources and search tools for intelligent data discovery'
-        },
-        {
-            step: 4,
-            title: 'Data Processing Agent',
-            description: 'Specialized agent processes and transforms data using available tools and formatters.',
-            note: 'Has access to multiple tools and makes tracked transformations'
-        },
-        {
-            step: 5,
-            title: 'Tool Integration',
-            description: 'Sub-agents use specialized tools for data processing, formatting, and transformation.',
-            note: "Tools are connected via special 'tool' interface ports"
-        },
-        {
-            step: 6,
-            title: 'Agent Collaboration',
-            description: 'Sub-agents report back to the main agent with their findings and completed work.',
-            note: 'Multi-agent coordination ensures comprehensive task completion'
-        },
-        {
-            step: 7,
-            title: 'Orchestrated Response',
-            description: 'Main agent compiles results from all sub-agents and provides a comprehensive response.',
-            note: 'Includes summaries, results, and next steps for review'
-        }
-    ],
-    benefits: [
-        'Multi-agent collaboration for complex tasks',
-        'Specialized agents for specific data processing functions',
-        'Intelligent task orchestration and coordination',
-        'Tool-based architecture for extensibility',
-        'Human oversight through review process',
-        'Scalable agent-to-agent communication patterns'
-    ],
-    useCases: [
-        'Multi-agent data analysis and processing',
-        'Coordinated data transformation workflows',
-        'Agent-orchestrated data quality checks',
-        'Collaborative data processing pipelines',
-        'Tool-assisted bulk data operations',
-        'Intelligent workflow automation'
-    ]
-};

package/dist/data/samples.d.ts

@@ -1,51 +0,0 @@
-/**
- * Sample data for FlowDrop development and testing
- * Includes sample nodes and workflows for demonstration and testing purposes
- */
-import type { NodeMetadata, Workflow } from '../types/index.js';
-import { CATEGORY_ICONS } from '../utils/icons.js';
-/**
- * Sample node data for development and testing
- * These represent the available node types in the workflow editor
- */
-export declare const sampleNodes: NodeMetadata[];
-export { CATEGORY_ICONS as categoryIcons };
-/**
- * Demo mode configuration
- */
-export interface DemoConfig {
-    enabled: boolean;
-    mode: 'content-management' | 'all';
-}
-/**
- * Filter nodes based on demo configuration
- * @param nodes - All available nodes
- * @param config - Demo configuration
- * @returns Filtered array of nodes
- */
-export declare function filterNodesForDemo(nodes: NodeMetadata[], config: DemoConfig): NodeMetadata[];
-/**
- * Get the list of allowed demo node IDs
- */
-export declare function getDemoAllowedNodeIds(): string[];
-/**
- * Check if a node is allowed in demo mode
- */
-export declare function isNodeAllowedInDemo(nodeId: string): boolean;
-/**
- * Get demo-specific nodes only
- */
-export declare function getDemoNodes(): NodeMetadata[];
-/**
- * Get nodes by category with demo filtering
- */
-export declare function getNodesByCategory(category: string, demoConfig?: DemoConfig): NodeMetadata[];
-/**
- * Search nodes with demo filtering
- */
-export declare function searchNodes(query: string, demoConfig?: DemoConfig): NodeMetadata[];
-/**
- * Sample workflow for development
- * Updated to use the new node types
- */
-export declare const sampleWorkflow: Workflow;