@flowdrop/flowdrop 1.0.0

package/dist/editor/index.js

@@ -0,0 +1,138 @@
+/**
+ * FlowDrop Editor Module
+ *
+ * Provides the WorkflowEditor component and related functionality for
+ * building visual workflow editors. This module includes @xyflow/svelte
+ * and all node components.
+ *
+ * **Important: Single-instance only.** FlowDrop uses module-level singleton
+ * stores for state management. Only one FlowDrop editor instance per page
+ * is supported. This is a known architectural limitation.
+ *
+ * @module editor
+ *
+ * @example Mounting a standalone workflow editor:
+ * ```typescript
+ * import { mountFlowDropApp, WorkflowEditor } from "@flowdrop/flowdrop/editor";
+ * import "@flowdrop/flowdrop/styles";
+ *
+ * const app = await mountFlowDropApp(document.getElementById("editor"), {
+ *   workflow: myWorkflow,
+ *   nodes: availableNodes
+ * });
+ * ```
+ *
+ * @example Using WorkflowEditor in Svelte:
+ * ```svelte
+ * <script>
+ *   import { WorkflowEditor } from "@flowdrop/flowdrop/editor";
+ * </script>
+ *
+ * <WorkflowEditor nodes={availableNodes} />
+ * ```
+ */
+// ============================================================================
+// Initialize Built-in Nodes
+// This side effect is intentional for the editor module - users importing
+// the editor expect all node types to be available.
+// ============================================================================
+import '../registry/builtinNodes.js';
+// ============================================================================
+// Main Editor Components
+// ============================================================================
+export { default as WorkflowEditor } from '../components/WorkflowEditor.svelte';
+export { default as App } from '../components/App.svelte';
+// ============================================================================
+// Node Components
+// ============================================================================
+export { default as WorkflowNodeComponent } from '../components/nodes/WorkflowNode.svelte';
+export { default as SimpleNode } from '../components/nodes/SimpleNode.svelte';
+export { default as ToolNode } from '../components/nodes/ToolNode.svelte';
+export { default as NotesNode } from '../components/nodes/NotesNode.svelte';
+export { default as GatewayNode } from '../components/nodes/GatewayNode.svelte';
+export { default as SquareNode } from '../components/nodes/SquareNode.svelte';
+export { default as TerminalNode } from '../components/nodes/TerminalNode.svelte';
+export { default as UniversalNode } from '../components/UniversalNode.svelte';
+// ============================================================================
+// Supporting Editor Components
+// ============================================================================
+export { default as NodeSidebar } from '../components/NodeSidebar.svelte';
+export { default as CanvasBanner } from '../components/CanvasBanner.svelte';
+export { default as LoadingSpinner } from '../components/LoadingSpinner.svelte';
+export { default as StatusIcon } from '../components/StatusIcon.svelte';
+export { default as StatusLabel } from '../components/StatusLabel.svelte';
+export { default as NodeStatusOverlay } from '../components/NodeStatusOverlay.svelte';
+export { default as ConfigForm } from '../components/ConfigForm.svelte';
+export { default as ConfigModal } from '../components/ConfigModal.svelte';
+export { default as ConfigPanel } from '../components/ConfigPanel.svelte';
+export { default as ReadOnlyDetails } from '../components/ReadOnlyDetails.svelte';
+export { default as ConnectionLine } from '../components/ConnectionLine.svelte';
+export { default as LogsSidebar } from '../components/LogsSidebar.svelte';
+export { default as PipelineStatus } from '../components/PipelineStatus.svelte';
+export { default as Navbar } from '../components/Navbar.svelte';
+export { default as Logo } from '../components/Logo.svelte';
+// Playground Components
+export { default as Playground } from '../components/playground/Playground.svelte';
+export { default as PlaygroundModal } from '../components/playground/PlaygroundModal.svelte';
+export { default as ChatPanel } from '../components/playground/ChatPanel.svelte';
+export { default as SessionManager } from '../components/playground/SessionManager.svelte';
+export { default as InputCollector } from '../components/playground/InputCollector.svelte';
+export { default as ExecutionLogs } from '../components/playground/ExecutionLogs.svelte';
+export { default as MessageBubble } from '../components/playground/MessageBubble.svelte';
+// ============================================================================
+// Mount Functions
+// ============================================================================
+export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from '../svelte-app.js';
+// ============================================================================
+// Node Component Registry
+// ============================================================================
+export { 
+// Core registry
+nodeComponentRegistry, createNamespacedType, parseNamespacedType, 
+// Built-in nodes
+BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, 
+// Plugin system
+registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from '../registry/index.js';
+// ============================================================================
+// Editor Helpers
+// ============================================================================
+export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from '../helpers/workflowEditorHelper.js';
+// ============================================================================
+// Stores
+// ============================================================================
+export { getWorkflowStore, workflowActions, getWorkflowId, getWorkflowName, getWorkflowNodes, getWorkflowEdges, getWorkflowMetadata, getWorkflowFormat, getWorkflowChanged, getWorkflowValidation, getWorkflowMetadataChanged, getConnectedHandles, 
+// Dirty state tracking
+getIsDirty, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, 
+// History control
+setHistoryEnabled, isHistoryEnabled, setRestoringFromHistory } from '../stores/workflowStore.svelte.js';
+// Port Coordinate Store (Svelte 5 runes-based)
+export { rebuildAllPortCoordinates, updateNodePortCoordinates, removeNodePortCoordinates, getPortCoordinate, getNodePortCoordinates, getPortCoordinateSnapshot, getPortCoordinates } from '../stores/portCoordinateStore.svelte.js';
+// History Store and Service
+export { getHistoryState, getCanUndo, getCanRedo, historyActions, setOnRestoreCallback, cleanupHistorySubscription, historyService, HistoryService } from '../stores/historyStore.svelte.js';
+// ============================================================================
+// Services
+// ============================================================================
+export { setEndpointConfig, getEndpointConfig, nodeApi, workflowApi, api } from '../services/api.js';
+export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } from '../services/toastService.js';
+export { NodeExecutionService, nodeExecutionService } from '../services/nodeExecutionService.js';
+// Playground Service and Store
+export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
+export { getCurrentSession, getSessions, getMessages, getIsExecuting, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollTimestamp, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, createPollingCallback, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestMessageTimestamp } from '../stores/playgroundStore.svelte.js';
+export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
+export { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave.js';
+export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
+export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
+export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
+// ============================================================================
+// API Clients
+// ============================================================================
+export { EnhancedFlowDropApiClient, ApiError } from '../api/enhanced-client.js';
+// ============================================================================
+// Connection Utilities
+// ============================================================================
+export { isLoopbackEdge, isValidLoopbackCycle, PortCompatibilityChecker, initializePortCompatibility, getPortCompatibilityChecker, getPossibleConnections, validateConnection, getConnectionSuggestions, hasCycles, hasInvalidCycles, getExecutionOrder } from '../utils/connections.js';
+// ============================================================================
+// Runtime Configuration
+// ============================================================================
+export { fetchRuntimeConfig, getRuntimeConfig, clearRuntimeConfigCache, initRuntimeConfig } from '../config/runtimeConfig.js';

package/dist/form/code.d.ts

@@ -0,0 +1,101 @@
+/**
+ * FlowDrop Form Code Editor Module
+ *
+ * Adds CodeMirror-based code/JSON editor support to SchemaForm.
+ * This module bundles CodeMirror dependencies (~300KB).
+ *
+ * @module form/code
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerCodeEditorField, registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * // Register code editor support (call once at app startup)
+ * registerCodeEditorField();
+ *
+ * // Optionally also register template editor
+ * registerTemplateEditorField();
+ *
+ * // Now SchemaForm will render code editors for format: "json", "code", or "template"
+ * ```
+ */
+import type { FieldComponent } from './fieldRegistry.js';
+import type { FieldSchema } from '../components/form/types.js';
+export { default as FormCodeEditor } from '../components/form/FormCodeEditor.svelte';
+export { default as FormTemplateEditor } from '../components/form/FormTemplateEditor.svelte';
+export type { CodeEditorFieldProps, TemplateEditorFieldProps } from '../components/form/types.js';
+/**
+ * Matcher for code/JSON editor fields
+ * Matches: format "json", "code", or type "object" without specific format
+ */
+export declare function codeEditorFieldMatcher(schema: FieldSchema): boolean;
+/**
+ * Matcher for template editor fields
+ * Matches: format "template" (Twig/Liquid-style templates)
+ */
+export declare function templateEditorFieldMatcher(schema: FieldSchema): boolean;
+/**
+ * Register the code/JSON editor field component
+ *
+ * Call this function once at application startup to enable
+ * code editor fields in SchemaForm. This loads CodeMirror dependencies.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * registerCodeEditorField();
+ * ```
+ */
+export declare function registerCodeEditorField(priority?: number): void;
+/**
+ * Register the template editor field component
+ *
+ * Call this function once at application startup to enable
+ * template editor fields (Twig/Liquid syntax) in SchemaForm.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * registerTemplateEditorField();
+ * ```
+ */
+export declare function registerTemplateEditorField(priority?: number): void;
+/**
+ * Register all code-related editor fields (code + template)
+ *
+ * Convenience function to register both code editor types at once.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ */
+export declare function registerAllCodeEditors(priority?: number): void;
+/**
+ * Synchronously register code editor field using the imported component
+ *
+ * Use this when you've already imported the component and want immediate registration.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * import { registerCodeEditorFieldWithComponent, FormCodeEditor } from "@flowdrop/flowdrop/form/code";
+ * registerCodeEditorFieldWithComponent(FormCodeEditor);
+ * ```
+ */
+export declare function registerCodeEditorFieldWithComponent(component: FieldComponent, priority?: number): void;
+/**
+ * Check if code editor field is registered
+ */
+export declare function isCodeEditorRegistered(): boolean;
+/**
+ * Check if template editor field is registered
+ */
+export declare function isTemplateEditorRegistered(): boolean;

package/dist/form/code.js

@@ -0,0 +1,168 @@
+/**
+ * FlowDrop Form Code Editor Module
+ *
+ * Adds CodeMirror-based code/JSON editor support to SchemaForm.
+ * This module bundles CodeMirror dependencies (~300KB).
+ *
+ * @module form/code
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerCodeEditorField, registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * // Register code editor support (call once at app startup)
+ * registerCodeEditorField();
+ *
+ * // Optionally also register template editor
+ * registerTemplateEditorField();
+ *
+ * // Now SchemaForm will render code editors for format: "json", "code", or "template"
+ * ```
+ */
+import { fieldComponentRegistry } from './fieldRegistry.js';
+// Re-export the components for direct usage if needed
+export { default as FormCodeEditor } from '../components/form/FormCodeEditor.svelte';
+export { default as FormTemplateEditor } from '../components/form/FormTemplateEditor.svelte';
+/**
+ * Matcher for code/JSON editor fields
+ * Matches: format "json", "code", or type "object" without specific format
+ */
+export function codeEditorFieldMatcher(schema) {
+    // JSON/code format
+    if (schema.format === 'json' || schema.format === 'code') {
+        return true;
+    }
+    // Object type without specific format (render as JSON editor)
+    if (schema.type === 'object' && !schema.format) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Matcher for template editor fields
+ * Matches: format "template" (Twig/Liquid-style templates)
+ */
+export function templateEditorFieldMatcher(schema) {
+    return schema.format === 'template';
+}
+/**
+ * Track if code editor is registered
+ */
+let codeEditorRegistered = false;
+/**
+ * Track if template editor is registered
+ */
+let templateEditorRegistered = false;
+// Sync registration flags with registry.clear() for test isolation
+fieldComponentRegistry.onClear(() => {
+    codeEditorRegistered = false;
+    templateEditorRegistered = false;
+});
+/**
+ * Register the code/JSON editor field component
+ *
+ * Call this function once at application startup to enable
+ * code editor fields in SchemaForm. This loads CodeMirror dependencies.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * registerCodeEditorField();
+ * ```
+ */
+export function registerCodeEditorField(priority = 100) {
+    if (codeEditorRegistered) {
+        return;
+    }
+    // Dynamic import to ensure proper code splitting
+    import('../components/form/FormCodeEditor.svelte').then((module) => {
+        fieldComponentRegistry.register('code-editor', {
+            component: module.default,
+            matcher: codeEditorFieldMatcher,
+            priority
+        });
+        codeEditorRegistered = true;
+    });
+}
+/**
+ * Register the template editor field component
+ *
+ * Call this function once at application startup to enable
+ * template editor fields (Twig/Liquid syntax) in SchemaForm.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * registerTemplateEditorField();
+ * ```
+ */
+export function registerTemplateEditorField(priority = 100) {
+    if (templateEditorRegistered) {
+        return;
+    }
+    // Dynamic import to ensure proper code splitting
+    import('../components/form/FormTemplateEditor.svelte').then((module) => {
+        fieldComponentRegistry.register('template-editor', {
+            component: module.default,
+            matcher: templateEditorFieldMatcher,
+            priority
+        });
+        templateEditorRegistered = true;
+    });
+}
+/**
+ * Register all code-related editor fields (code + template)
+ *
+ * Convenience function to register both code editor types at once.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ */
+export function registerAllCodeEditors(priority = 100) {
+    registerCodeEditorField(priority);
+    registerTemplateEditorField(priority);
+}
+/**
+ * Synchronously register code editor field using the imported component
+ *
+ * Use this when you've already imported the component and want immediate registration.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * import { registerCodeEditorFieldWithComponent, FormCodeEditor } from "@flowdrop/flowdrop/form/code";
+ * registerCodeEditorFieldWithComponent(FormCodeEditor);
+ * ```
+ */
+export function registerCodeEditorFieldWithComponent(component, priority = 100) {
+    if (codeEditorRegistered) {
+        return;
+    }
+    fieldComponentRegistry.register('code-editor', {
+        component,
+        matcher: codeEditorFieldMatcher,
+        priority
+    });
+    codeEditorRegistered = true;
+}
+/**
+ * Check if code editor field is registered
+ */
+export function isCodeEditorRegistered() {
+    return codeEditorRegistered;
+}
+/**
+ * Check if template editor field is registered
+ */
+export function isTemplateEditorRegistered() {
+    return templateEditorRegistered;
+}

package/dist/form/fieldRegistry.d.ts

@@ -0,0 +1,169 @@
+/**
+ * Form Field Component Registry
+ *
+ * Provides a registry system for form field components that enables:
+ * - Tree-shaking: Heavy components (code editor, markdown) are only bundled when registered
+ * - Dynamic field types: Users can add custom field renderers
+ * - Lazy loading: Components can be registered at runtime
+ *
+ * Extends BaseRegistry for shared mechanics (subscribe, onClear, etc.).
+ *
+ * @module form/fieldRegistry
+ *
+ * @example Basic usage with light fields only (no codemirror):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * // Uses only basic fields - small bundle size
+ * ```
+ *
+ * @example Adding code editor support:
+ * ```typescript
+ * import { fieldComponentRegistry } from "@flowdrop/flowdrop/form";
+ * import { FormCodeEditor, codeEditorFieldMatcher } from "@flowdrop/flowdrop/form/code";
+ *
+ * fieldComponentRegistry.register("code-editor", {
+ *   component: FormCodeEditor,
+ *   matcher: codeEditorFieldMatcher,
+ *   priority: 100
+ * });
+ * ```
+ */
+import type { Component } from 'svelte';
+import type { FieldSchema } from '../components/form/types.js';
+import { BaseRegistry } from '../registry/BaseRegistry.js';
+/**
+ * Base field component props that all registered field components should accept.
+ * Components may have additional specific props.
+ */
+export interface FieldComponentProps {
+    /** Field identifier */
+    id: string;
+    /** Current field value */
+    value: unknown;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Change callback */
+    onChange: (value: unknown) => void;
+    /** Additional schema-derived props */
+    [key: string]: unknown;
+}
+/**
+ * Function type for determining if a field schema should use a specific component
+ */
+export type FieldMatcher = (schema: FieldSchema) => boolean;
+/**
+ * Generic component type that accepts any props
+ * This is needed because different field components have different prop requirements
+ */
+export type FieldComponent = Component<any, any, any>;
+/**
+ * Framework-agnostic matcher registration (no Svelte dependency).
+ * Contains the matching logic and priority without the component.
+ */
+export interface FieldMatcherRegistration {
+    /** Function to determine if this registration should handle a given schema */
+    matcher: FieldMatcher;
+    /** Priority for matching (higher = checked first) */
+    priority: number;
+}
+/**
+ * Full registration entry for a field component.
+ * Extends FieldMatcherRegistration with the Svelte component needed for rendering.
+ */
+export interface FieldComponentRegistration extends FieldMatcherRegistration {
+    /** The Svelte component to render */
+    component: FieldComponent;
+}
+/**
+ * Class-based field component registry.
+ * Extends BaseRegistry with priority-based field resolution.
+ */
+declare class FieldComponentRegistry extends BaseRegistry<string, FieldComponentRegistration> {
+    /** Cached ordered keys by priority (highest first), invalidated on mutation */
+    private orderedKeys;
+    /**
+     * Register a field component.
+     * Silently overwrites existing registrations (preserves legacy behavior).
+     *
+     * @param type - Unique identifier for this field type
+     * @param registration - The field component registration
+     */
+    register(type: string, registration: FieldComponentRegistration): void;
+    /**
+     * Override unregister to invalidate the priority cache.
+     */
+    unregister(key: string): boolean;
+    /**
+     * Override clear to invalidate the priority cache.
+     */
+    clear(): void;
+    /**
+     * Resolve which component should render a given field schema.
+     * Checks registered matchers in priority order (highest first).
+     *
+     * @param schema - The field schema to resolve
+     * @returns The matching registration or null if no match
+     */
+    resolveFieldComponent(schema: FieldSchema): FieldComponentRegistration | null;
+    /**
+     * Get keys ordered by priority (cached).
+     */
+    private getOrderedKeys;
+}
+/** Singleton instance of the field component registry */
+export declare const fieldComponentRegistry: FieldComponentRegistry;
+/**
+ * Matcher for hidden fields (should not render)
+ */
+export declare const hiddenFieldMatcher: FieldMatcher;
+/**
+ * Matcher for checkbox group fields (enum with multiple)
+ */
+export declare const checkboxGroupMatcher: FieldMatcher;
+/**
+ * Matcher for enum select fields
+ */
+export declare const enumSelectMatcher: FieldMatcher;
+/**
+ * Matcher for multiline textarea fields
+ */
+export declare const textareaMatcher: FieldMatcher;
+/**
+ * Matcher for range slider fields
+ */
+export declare const rangeMatcher: FieldMatcher;
+/**
+ * Matcher for string text fields
+ */
+export declare const textFieldMatcher: FieldMatcher;
+/**
+ * Matcher for number fields
+ */
+export declare const numberFieldMatcher: FieldMatcher;
+/**
+ * Matcher for boolean toggle fields
+ */
+export declare const toggleMatcher: FieldMatcher;
+/**
+ * Matcher for select fields with labeled options (JSON Schema oneOf pattern)
+ *
+ * @example
+ * ```json
+ * { "type": "string", "oneOf": [{ "const": "a", "title": "Option A" }] }
+ * ```
+ */
+export declare const selectOptionsMatcher: FieldMatcher;
+/**
+ * Matcher for array fields
+ */
+export declare const arrayMatcher: FieldMatcher;
+/**
+ * Matcher for autocomplete fields
+ * Matches when format is "autocomplete" and autocomplete config with URL is provided
+ */
+export declare const autocompleteMatcher: FieldMatcher;
+export {};