@d34dman/flowdrop 0.0.16 → 0.0.17

package/dist/registry/plugin.js

@@ -0,0 +1,249 @@
+/**
+ * FlowDrop Plugin System
+ * Provides APIs for external libraries to register custom node components.
+ *
+ * This enables a plugin ecosystem where:
+ * - Third-party libraries can provide custom node types
+ * - Custom nodes are namespaced to avoid conflicts
+ * - Registration is simplified with a clean API
+ */
+import { nodeComponentRegistry, createNamespacedType } from './nodeComponentRegistry.js';
+/**
+ * Register a FlowDrop plugin with custom node components.
+ * All node types are automatically namespaced with the plugin namespace.
+ *
+ * @param config - Plugin configuration with namespace and node definitions
+ * @returns Result object with registered types and any errors
+ *
+ * @example
+ * ```typescript
+ * import { registerFlowDropPlugin } from "@flowdrop/lib";
+ * import FancyNode from "./FancyNode.svelte";
+ * import GlowNode from "./GlowNode.svelte";
+ *
+ * const result = registerFlowDropPlugin({
+ *     namespace: "awesome",
+ *     name: "Awesome Nodes",
+ *     version: "1.0.0",
+ *     nodes: [
+ *         {
+ *             type: "fancy",
+ *             displayName: "Fancy Node",
+ *             component: FancyNode,
+ *             icon: "mdi:sparkles"
+ *         },
+ *         {
+ *             type: "glow",
+ *             displayName: "Glowing Node",
+ *             component: GlowNode,
+ *             icon: "mdi:lightbulb"
+ *         }
+ *     ]
+ * });
+ *
+ * // Result:
+ * // {
+ * //     success: true,
+ * //     namespace: "awesome",
+ * //     registeredTypes: ["awesome:fancy", "awesome:glow"],
+ * //     errors: []
+ * // }
+ * ```
+ */
+export function registerFlowDropPlugin(config) {
+    const result = {
+        success: true,
+        namespace: config.namespace,
+        registeredTypes: [],
+        errors: []
+    };
+    // Validate namespace
+    if (!isValidNamespace(config.namespace)) {
+        result.success = false;
+        result.errors.push(`Invalid namespace "${config.namespace}". ` +
+            `Namespace must be lowercase alphanumeric with optional hyphens.`);
+        return result;
+    }
+    // Register each node
+    for (const nodeDef of config.nodes) {
+        try {
+            const namespacedType = createNamespacedType(config.namespace, nodeDef.type);
+            const registration = {
+                type: namespacedType,
+                displayName: nodeDef.displayName,
+                description: nodeDef.description,
+                component: nodeDef.component,
+                icon: nodeDef.icon,
+                category: nodeDef.category ?? 'custom',
+                source: config.namespace,
+                statusPosition: nodeDef.statusPosition,
+                statusSize: nodeDef.statusSize
+            };
+            nodeComponentRegistry.register(registration);
+            result.registeredTypes.push(namespacedType);
+        }
+        catch (error) {
+            result.success = false;
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            result.errors.push(`Failed to register ${config.namespace}:${nodeDef.type}: ${errorMessage}`);
+        }
+    }
+    return result;
+}
+/**
+ * Unregister all nodes from a plugin by namespace.
+ *
+ * @param namespace - The plugin namespace to unregister
+ * @returns Array of unregistered type identifiers
+ *
+ * @example
+ * ```typescript
+ * const removed = unregisterFlowDropPlugin("awesome");
+ * // Returns ["awesome:fancy", "awesome:glow"]
+ * ```
+ */
+export function unregisterFlowDropPlugin(namespace) {
+    const unregistered = [];
+    const types = nodeComponentRegistry.getTypes();
+    for (const type of types) {
+        if (type.startsWith(`${namespace}:`)) {
+            if (nodeComponentRegistry.unregister(type)) {
+                unregistered.push(type);
+            }
+        }
+    }
+    return unregistered;
+}
+/**
+ * Check if a namespace is valid.
+ * Must be lowercase alphanumeric with optional hyphens.
+ *
+ * @param namespace - The namespace to validate
+ * @returns true if valid
+ */
+export function isValidNamespace(namespace) {
+    return /^[a-z][a-z0-9-]*$/.test(namespace);
+}
+/**
+ * Get all registered plugins (unique namespaces).
+ *
+ * @returns Array of namespace strings
+ */
+export function getRegisteredPlugins() {
+    const sources = new Set();
+    const registrations = nodeComponentRegistry.getAll();
+    for (const reg of registrations) {
+        if (reg.source && reg.source !== 'flowdrop') {
+            sources.add(reg.source);
+        }
+    }
+    return Array.from(sources);
+}
+/**
+ * Get the count of nodes registered by a plugin.
+ *
+ * @param namespace - The plugin namespace
+ * @returns Number of nodes registered by this plugin
+ */
+export function getPluginNodeCount(namespace) {
+    return nodeComponentRegistry.getBySource(namespace).length;
+}
+/**
+ * Register a single custom node without a full plugin.
+ * Useful for project-specific custom nodes.
+ *
+ * @param type - Type identifier (can be namespaced or plain)
+ * @param displayName - Display name for UI
+ * @param component - Svelte component
+ * @param options - Additional options
+ *
+ * @example
+ * ```typescript
+ * import { registerCustomNode } from "@flowdrop/lib";
+ * import MyNode from "./MyNode.svelte";
+ *
+ * registerCustomNode("myproject:special", "Special Node", MyNode, {
+ *     icon: "mdi:star",
+ *     description: "A special node for my project"
+ * });
+ * ```
+ */
+export function registerCustomNode(type, displayName, component, options = {}) {
+    nodeComponentRegistry.register({
+        type,
+        displayName,
+        component,
+        description: options.description,
+        icon: options.icon,
+        category: options.category ?? 'custom',
+        source: options.source ?? 'custom',
+        statusPosition: options.statusPosition,
+        statusSize: options.statusSize
+    });
+}
+/**
+ * Create a plugin builder for a fluent API experience.
+ *
+ * @param namespace - Plugin namespace
+ * @param name - Plugin name
+ * @returns Plugin builder with chainable methods
+ *
+ * @example
+ * ```typescript
+ * import { createPlugin } from "@flowdrop/lib";
+ *
+ * createPlugin("awesome", "Awesome Nodes")
+ *     .version("1.0.0")
+ *     .node("fancy", "Fancy Node", FancyNode)
+ *     .node("glow", "Glowing Node", GlowNode, { icon: "mdi:lightbulb" })
+ *     .register();
+ * ```
+ */
+export function createPlugin(namespace, name) {
+    const config = {
+        namespace,
+        name,
+        nodes: []
+    };
+    const builder = {
+        /**
+         * Set plugin version
+         */
+        version(v) {
+            config.version = v;
+            return builder;
+        },
+        /**
+         * Set plugin description
+         */
+        description(desc) {
+            config.description = desc;
+            return builder;
+        },
+        /**
+         * Add a node to the plugin
+         */
+        node(type, displayName, component, options = {}) {
+            config.nodes.push({
+                type,
+                displayName,
+                component,
+                ...options
+            });
+            return builder;
+        },
+        /**
+         * Register the plugin
+         */
+        register() {
+            return registerFlowDropPlugin(config);
+        },
+        /**
+         * Get the config without registering (for testing/inspection)
+         */
+        getConfig() {
+            return { ...config };
+        }
+    };
+    return builder;
+}

package/dist/services/draftStorage.d.ts

@@ -6,7 +6,7 @@
  *
  * @module services/draftStorage
  */
-import type { Workflow } from "../types/index.js";
+import type { Workflow } from '../types/index.js';
 /**
  * Draft metadata stored alongside the workflow
  */

package/dist/services/draftStorage.js

@@ -9,7 +9,7 @@
 /**
  * Default storage key prefix
  */
-const STORAGE_KEY_PREFIX = "flowdrop:draft";
+const STORAGE_KEY_PREFIX = 'flowdrop:draft';
 /**
  * Generate a storage key for a workflow
  *
@@ -51,7 +51,7 @@ export function saveDraft(workflow, storageKey) {
     }
     catch (error) {
         // localStorage might be full or disabled
-        console.warn("Failed to save draft to localStorage:", error);
+        console.warn('Failed to save draft to localStorage:', error);
         return false;
     }
 }
@@ -70,13 +70,13 @@ export function loadDraft(storageKey) {
         const draft = JSON.parse(stored);
         // Validate the draft structure
         if (!draft.workflow || !draft.metadata) {
-            console.warn("Invalid draft structure in localStorage");
+            console.warn('Invalid draft structure in localStorage');
             return null;
         }
         return draft;
     }
     catch (error) {
-        console.warn("Failed to load draft from localStorage:", error);
+        console.warn('Failed to load draft from localStorage:', error);
         return null;
     }
 }
@@ -90,7 +90,7 @@ export function deleteDraft(storageKey) {
         localStorage.removeItem(storageKey);
     }
     catch (error) {
-        console.warn("Failed to delete draft from localStorage:", error);
+        console.warn('Failed to delete draft from localStorage:', error);
     }
 }
 /**

package/dist/stores/workflowStore.d.ts

@@ -5,8 +5,8 @@
  *
  * @module stores/workflowStore
  */
-import type { Workflow, WorkflowNode, WorkflowEdge } from "../types";
-import type { WorkflowChangeType } from "../types/events.js";
+import type { Workflow, WorkflowNode, WorkflowEdge } from '../types';
+import type { WorkflowChangeType } from '../types/events.js';
 /** Global workflow state */
 export declare const workflowStore: import("svelte/store").Writable<Workflow>;
 /**

package/dist/stores/workflowStore.js

@@ -5,7 +5,7 @@
  *
  * @module stores/workflowStore
  */
-import { writable, derived, get } from "svelte/store";
+import { writable, derived, get } from 'svelte/store';
 // =========================================================================
 // Core Workflow Store
 // =========================================================================
@@ -150,14 +150,14 @@ export function getWorkflow() {
 /** Derived store for workflow ID */
 export const workflowId = derived(workflowStore, ($workflow) => $workflow?.id ?? null);
 /** Derived store for workflow name */
-export const workflowName = derived(workflowStore, ($workflow) => $workflow?.name ?? "Untitled Workflow");
+export const workflowName = derived(workflowStore, ($workflow) => $workflow?.name ?? 'Untitled Workflow');
 /** Derived store for workflow nodes */
 export const workflowNodes = derived(workflowStore, ($workflow) => $workflow?.nodes ?? []);
 /** Derived store for workflow edges */
 export const workflowEdges = derived(workflowStore, ($workflow) => $workflow?.edges ?? []);
 /** Derived store for workflow metadata */
 export const workflowMetadata = derived(workflowStore, ($workflow) => $workflow?.metadata ?? {
-    version: "1.0.0",
+    version: '1.0.0',
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     versionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
@@ -234,7 +234,7 @@ export const workflowActions = {
      */
     updateWorkflow: (workflow) => {
         workflowStore.set(workflow);
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     },
     /**
      * Update nodes
@@ -260,7 +260,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("node_move");
+        notifyWorkflowChange('node_move');
     },
     /**
      * Update edges
@@ -286,7 +286,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("edge_add");
+        notifyWorkflowChange('edge_add');
     },
     /**
      * Update workflow name
@@ -304,7 +304,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("name");
+        notifyWorkflowChange('name');
     },
     /**
      * Add a node
@@ -322,7 +322,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("node_add");
+        notifyWorkflowChange('node_add');
     },
     /**
      * Remove a node
@@ -341,7 +341,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("node_remove");
+        notifyWorkflowChange('node_remove');
     },
     /**
      * Add an edge
@@ -359,7 +359,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("edge_add");
+        notifyWorkflowChange('edge_add');
     },
     /**
      * Remove an edge
@@ -377,7 +377,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("edge_remove");
+        notifyWorkflowChange('edge_remove');
     },
     /**
      * Update a specific node
@@ -388,14 +388,14 @@ export const workflowActions = {
                 return null;
             return {
                 ...$workflow,
-                nodes: $workflow.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
+                nodes: $workflow.nodes.map((node) => (node.id === nodeId ? { ...node, ...updates } : node)),
                 metadata: {
                     ...$workflow.metadata,
                     updatedAt: new Date().toISOString()
                 }
             };
         });
-        notifyWorkflowChange("node_config");
+        notifyWorkflowChange('node_config');
     },
     /**
      * Clear the workflow
@@ -424,7 +424,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     },
     /**
      * Batch update nodes and edges
@@ -448,7 +448,7 @@ export const workflowActions = {
                 }
             };
         });
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     }
 };
 // =========================================================================
@@ -468,5 +468,5 @@ export const workflowValidation = derived([workflowNodes, workflowEdges], ([node
 export const workflowMetadataChanged = derived(workflowMetadata, (metadata) => ({
     createdAt: metadata.createdAt,
     updatedAt: metadata.updatedAt,
-    version: metadata.version ?? "1.0.0"
+    version: metadata.version ?? '1.0.0'
 }));

package/dist/styles/base.css

@@ -1141,6 +1141,21 @@
 	--cmp-node-color-slate: var(--color-ref-slate-500);
 	--cmp-node-color-purple: var(--color-ref-purple-600);
 
+	/* Edge styling tokens */
+	--flowdrop-edge-trigger-color: var(--color-ref-gray-900);
+	--flowdrop-edge-trigger-color-hover: var(--color-ref-gray-900);
+	--flowdrop-edge-trigger-color-selected: var(--color-ref-violet-600);
+	--flowdrop-edge-trigger-width: 2px;
+	--flowdrop-edge-trigger-width-hover: 3px;
+
+	--flowdrop-edge-tool-color: var(--color-ref-amber-500);
+	--flowdrop-edge-tool-color-hover: var(--color-ref-amber-600);
+	--flowdrop-edge-tool-color-selected: var(--color-ref-violet-600);
+
+	--flowdrop-edge-data-color: var(--color-ref-gray-400);
+	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
+	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
+
 	/* NotesNode component variables */
 	--notes-node-width: 500px;
 	--notes-node-min-width: 250px;

package/dist/svelte-app.d.ts

@@ -6,10 +6,10 @@
  *
  * @module svelte-app
  */
-import type { Workflow, NodeMetadata, PortConfig } from "./types/index.js";
-import type { EndpointConfig } from "./config/endpoints.js";
-import type { AuthProvider } from "./types/auth.js";
-import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js";
+import type { Workflow, NodeMetadata, PortConfig } from './types/index.js';
+import type { EndpointConfig } from './config/endpoints.js';
+import type { AuthProvider } from './types/auth.js';
+import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
 declare global {
     interface Window {
         flowdropSave?: () => Promise<void>;
@@ -23,7 +23,7 @@ export interface NavbarAction {
     label: string;
     href: string;
     icon?: string;
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
     onclick?: (event: Event) => void;
 }
 /**
@@ -53,7 +53,7 @@ export interface FlowDropMountOptions {
     /** Pipeline ID for status display */
     pipelineId?: string;
     /** Node execution statuses */
-    nodeStatuses?: Record<string, "pending" | "running" | "completed" | "error">;
+    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */

package/dist/svelte-app.js

@@ -6,15 +6,15 @@
  *
  * @module svelte-app
  */
-import { mount, unmount } from "svelte";
-import WorkflowEditor from "./components/WorkflowEditor.svelte";
-import App from "./components/App.svelte";
-import { initializePortCompatibility } from "./utils/connections.js";
-import { DEFAULT_PORT_CONFIG } from "./config/defaultPortConfig.js";
-import { fetchPortConfig } from "./services/portConfigApi.js";
-import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from "./stores/workflowStore.js";
-import { DraftAutoSaveManager, getDraftStorageKey } from "./services/draftStorage.js";
-import { mergeFeatures } from "./types/events.js";
+import { mount, unmount } from 'svelte';
+import WorkflowEditor from './components/WorkflowEditor.svelte';
+import App from './components/App.svelte';
+import { initializePortCompatibility } from './utils/connections.js';
+import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
+import { fetchPortConfig } from './services/portConfigApi.js';
+import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
+import { DraftAutoSaveManager, getDraftStorageKey } from './services/draftStorage.js';
+import { mergeFeatures } from './types/events.js';
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
  *
@@ -40,14 +40,14 @@ import { mergeFeatures } from "./types/events.js";
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, authProvider, eventHandlers, features: userFeatures, draftStorageKey: customDraftKey } = options;
+    const { workflow, nodes, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, authProvider, eventHandlers, features: userFeatures, draftStorageKey: customDraftKey } = options;
     // Merge features with defaults
     const features = mergeFeatures(userFeatures);
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
         // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import("./config/endpoints.js");
+        const { defaultEndpointConfig } = await import('./config/endpoints.js');
         config = {
             ...defaultEndpointConfig,
             ...endpointConfig,
@@ -59,7 +59,7 @@ export async function mountFlowDropApp(container, options = {}) {
     }
     else {
         // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import("./config/endpoints.js");
+        const { defaultEndpointConfig } = await import('./config/endpoints.js');
         config = defaultEndpointConfig;
     }
     // Initialize port configuration
@@ -70,7 +70,7 @@ export async function mountFlowDropApp(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            console.warn("Failed to fetch port config from API, using default:", error);
+            console.warn('Failed to fetch port config from API, using default:', error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -160,19 +160,19 @@ export async function mountFlowDropApp(container, options = {}) {
         },
         getWorkflow: () => getWorkflowFromStore(),
         save: async () => {
-            if (typeof window !== "undefined" && window.flowdropSave) {
+            if (typeof window !== 'undefined' && window.flowdropSave) {
                 await window.flowdropSave();
             }
             else {
-                console.warn("⚠️ Save functionality not available");
+                console.warn('⚠️ Save functionality not available');
             }
         },
         export: () => {
-            if (typeof window !== "undefined" && window.flowdropExport) {
+            if (typeof window !== 'undefined' && window.flowdropExport) {
                 window.flowdropExport();
             }
             else {
-                console.warn("⚠️ Export functionality not available");
+                console.warn('⚠️ Export functionality not available');
             }
         }
     };
@@ -193,7 +193,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     let config;
     if (endpointConfig) {
         // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import("./config/endpoints.js");
+        const { defaultEndpointConfig } = await import('./config/endpoints.js');
         config = {
             ...defaultEndpointConfig,
             ...endpointConfig,
@@ -205,7 +205,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     }
     else {
         // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import("./config/endpoints.js");
+        const { defaultEndpointConfig } = await import('./config/endpoints.js');
         config = defaultEndpointConfig;
     }
     // Initialize port configuration
@@ -216,7 +216,7 @@ export async function mountWorkflowEditor(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            console.warn("Failed to fetch port config from API, using default:", error);
+            console.warn('Failed to fetch port config from API, using default:', error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -241,19 +241,19 @@ export async function mountWorkflowEditor(container, options = {}) {
         markAsSaved: () => markAsSaved(),
         getWorkflow: () => getWorkflowFromStore(),
         save: async () => {
-            if (typeof window !== "undefined" && window.flowdropSave) {
+            if (typeof window !== 'undefined' && window.flowdropSave) {
                 await window.flowdropSave();
             }
             else {
-                console.warn("⚠️ Save functionality not available");
+                console.warn('⚠️ Save functionality not available');
             }
         },
         export: () => {
-            if (typeof window !== "undefined" && window.flowdropExport) {
+            if (typeof window !== 'undefined' && window.flowdropExport) {
                 window.flowdropExport();
             }
             else {
-                console.warn("⚠️ Export functionality not available");
+                console.warn('⚠️ Export functionality not available');
             }
         }
     };
@@ -265,7 +265,7 @@ export async function mountWorkflowEditor(container, options = {}) {
  * @param app - The mounted app to unmount
  */
 export function unmountFlowDropApp(app) {
-    if (app && typeof app.destroy === "function") {
+    if (app && typeof app.destroy === 'function') {
         app.destroy();
     }
 }

package/dist/types/auth.d.ts

@@ -63,7 +63,7 @@ export interface AuthProvider {
  */
 export interface StaticAuthConfig {
     /** Authentication type */
-    type: "none" | "bearer" | "api_key" | "custom";
+    type: 'none' | 'bearer' | 'api_key' | 'custom';
     /** Bearer token (used when type is "bearer") */
     token?: string;
     /** API key (used when type is "api_key") */
@@ -271,7 +271,7 @@ export declare class NoAuthProvider implements AuthProvider {
  * @returns AuthProvider instance
  */
 export declare function createAuthProviderFromLegacyConfig(authConfig?: {
-    type: "none" | "bearer" | "api_key" | "custom";
+    type: 'none' | 'bearer' | 'api_key' | 'custom';
     token?: string;
     apiKey?: string;
     headers?: Record<string, string>;