@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.1

package/dist/form/full.js

@@ -14,8 +14,8 @@
  * // Single import that sets up everything
  * import { SchemaForm, initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
  *
- * // Call once at app startup
- * initializeAllFieldTypes();
+ * // Call once at app startup, against an instance's field registry
+ * initializeAllFieldTypes(fd.fields);
  *
  * // Now all field types are available
  * ```
@@ -26,7 +26,7 @@ export { SchemaForm, FormField, FormFieldFull, FormFieldWrapper, FormTextField,
 // Utility functions
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from './index.js';
 // Field Registry
-export { fieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './index.js';
+export { FieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './index.js';
 // Import registration functions
 import { registerCodeEditorField, registerTemplateEditorField } from './code.js';
 import { registerMarkdownEditorField } from './markdown.js';
@@ -36,45 +36,40 @@ export { FormMarkdownEditor } from './markdown.js';
 // Re-export registration functions
 export { registerCodeEditorField, registerTemplateEditorField, registerAllCodeEditors, isCodeEditorRegistered, isTemplateEditorRegistered, codeEditorFieldMatcher, templateEditorFieldMatcher } from './code.js';
 export { registerMarkdownEditorField, isMarkdownEditorRegistered, markdownEditorFieldMatcher } from './markdown.js';
-/**
- * Track if all field types have been initialized
- */
-let allFieldTypesInitialized = false;
 /**
  * Initialize all form field types including heavy editors
  *
- * Call this once at application startup to enable all field types.
- * This includes:
+ * Call this once at application startup to enable all field types in the
+ * given instance's field registry. This includes:
  * - Code/JSON editor (CodeMirror)
  * - Template editor (CodeMirror with Twig/Liquid syntax)
  * - Markdown editor (CodeMirror 6)
  *
+ * Registration is idempotent per registry — each `register*Field` is a no-op
+ * if its field type is already present (see `FieldComponentRegistry.has`).
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
+ *
  * @example
  * ```typescript
  * import { initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
  *
  * // In your app's entry point
- * initializeAllFieldTypes();
+ * initializeAllFieldTypes(fd.fields);
  * ```
  */
-export function initializeAllFieldTypes() {
-    if (allFieldTypesInitialized) {
-        return;
-    }
-    registerCodeEditorField();
-    registerTemplateEditorField();
-    registerMarkdownEditorField();
-    allFieldTypesInitialized = true;
+export function initializeAllFieldTypes(registry) {
+    registerCodeEditorField(registry);
+    registerTemplateEditorField(registry);
+    registerMarkdownEditorField(registry);
 }
 /**
- * Check if all field types have been initialized
- */
-export function areAllFieldTypesInitialized() {
-    return allFieldTypesInitialized;
-}
-/**
- * Reset initialization state (useful for testing)
+ * Check if all heavy field types are registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export function resetFieldTypeInitialization() {
-    allFieldTypesInitialized = false;
+export function areAllFieldTypesInitialized(registry) {
+    return (registry.has('code-editor') &&
+        registry.has('template-editor') &&
+        registry.has('markdown-editor'));
 }

package/dist/form/index.d.ts

@@ -71,13 +71,13 @@ export { default as FormCheckboxGroup } from '../components/form/FormCheckboxGro
 export { default as FormArray } from '../components/form/FormArray.svelte';
 export { default as FormFieldset } from '../components/form/FormFieldset.svelte';
 export { default as FormUISchemaRenderer } from '../components/form/FormUISchemaRenderer.svelte';
-export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, SchemaFormProps, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, FormFieldFactoryProps, FormFieldWrapperProps } from '../components/form/types.js';
+export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, SchemaFormProps, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, FormFieldFactoryProps, FormFieldWrapperProps, AutocompleteConfig } from '../components/form/types.js';
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from '../components/form/types.js';
-export { fieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
+export { FieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
 export type { FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './fieldRegistry.js';
 /**
  * Use with Svelte's `getContext` inside custom field components registered
- * via `fieldComponentRegistry` to read sibling form field values.
+ * via `fd.fields` to read sibling form field values.
  *
  * @example
  * ```svelte

package/dist/form/index.js

@@ -85,8 +85,8 @@ export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, get
 // Field Registry (for dynamic field registration)
 // ============================================================================
 export { 
-// Registry singleton
-fieldComponentRegistry, 
+// Registry class (instances live on `fd.fields`)
+FieldComponentRegistry, 
 // Built-in matchers for custom components
 hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
 // ============================================================================
@@ -94,7 +94,7 @@ hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, ra
 // ============================================================================
 /**
  * Use with Svelte's `getContext` inside custom field components registered
- * via `fieldComponentRegistry` to read sibling form field values.
+ * via `fd.fields` to read sibling form field values.
  *
  * @example
  * ```svelte

package/dist/form/markdown.d.ts

@@ -12,7 +12,7 @@
  * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
  *
  * // Register markdown editor support (call once at app startup)
- * registerMarkdownEditorField();
+ * registerMarkdownEditorField(fd.fields);
  *
  * // Now SchemaForm will render markdown editors for format: "markdown"
  * const schema = {
@@ -23,7 +23,7 @@
  * };
  * ```
  */
-import type { FieldComponent } from './fieldRegistry.js';
+import type { FieldComponent, FieldComponentRegistry } from './fieldRegistry.js';
 import type { FieldSchema } from '../components/form/types.js';
 export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEditor.svelte';
 export type { MarkdownEditorFieldProps } from '../components/form/types.js';
@@ -38,6 +38,7 @@ export declare function markdownEditorFieldMatcher(schema: FieldSchema): boolean
  * Call this function once at application startup to enable
  * markdown editor fields in SchemaForm.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -45,25 +46,29 @@ export declare function markdownEditorFieldMatcher(schema: FieldSchema): boolean
  * // In your app's entry point:
  * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
  *
- * registerMarkdownEditorField();
+ * registerMarkdownEditorField(fd.fields);
  * ```
  */
-export declare function registerMarkdownEditorField(priority?: number): void;
+export declare function registerMarkdownEditorField(registry: FieldComponentRegistry, priority?: number): void;
 /**
  * Synchronously register markdown editor field using the imported component
  *
  * Use this when you've already imported the component and want immediate registration.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
+ * @param component - The pre-imported markdown editor component
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
  * ```typescript
  * import { registerMarkdownEditorFieldWithComponent, FormMarkdownEditor } from "@flowdrop/flowdrop/form/markdown";
- * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * registerMarkdownEditorFieldWithComponent(fd.fields, FormMarkdownEditor);
  * ```
  */
-export declare function registerMarkdownEditorFieldWithComponent(component: FieldComponent, priority?: number): void;
+export declare function registerMarkdownEditorFieldWithComponent(registry: FieldComponentRegistry, component: FieldComponent, priority?: number): void;
 /**
- * Check if markdown editor field is registered
+ * Check if markdown editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export declare function isMarkdownEditorRegistered(): boolean;
+export declare function isMarkdownEditorRegistered(registry: FieldComponentRegistry): boolean;

package/dist/form/markdown.js

@@ -12,7 +12,7 @@
  * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
  *
  * // Register markdown editor support (call once at app startup)
- * registerMarkdownEditorField();
+ * registerMarkdownEditorField(fd.fields);
  *
  * // Now SchemaForm will render markdown editors for format: "markdown"
  * const schema = {
@@ -23,7 +23,6 @@
  * };
  * ```
  */
-import { fieldComponentRegistry } from './fieldRegistry.js';
 // Re-export the component for direct usage if needed
 export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEditor.svelte';
 /**
@@ -33,20 +32,13 @@ export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEd
 export function markdownEditorFieldMatcher(schema) {
     return schema.format === 'markdown';
 }
-/**
- * Track if markdown editor is registered
- */
-let markdownEditorRegistered = false;
-// Sync registration flag with registry.clear() for test isolation
-fieldComponentRegistry.onClear(() => {
-    markdownEditorRegistered = false;
-});
 /**
  * Register the markdown editor field component
  *
  * Call this function once at application startup to enable
  * markdown editor fields in SchemaForm.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -54,21 +46,25 @@ fieldComponentRegistry.onClear(() => {
  * // In your app's entry point:
  * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
  *
- * registerMarkdownEditorField();
+ * registerMarkdownEditorField(fd.fields);
  * ```
  */
-export function registerMarkdownEditorField(priority = 100) {
-    if (markdownEditorRegistered) {
+export function registerMarkdownEditorField(registry, priority = 100) {
+    if (registry.has('markdown-editor')) {
         return;
     }
     // Dynamic import to ensure proper code splitting
     import('../components/form/FormMarkdownEditor.svelte').then((module) => {
-        fieldComponentRegistry.register('markdown-editor', {
+        // Re-check inside the async callback: two rapid synchronous calls both pass
+        // the guard above before either import resolves, so guard again here.
+        if (registry.has('markdown-editor')) {
+            return;
+        }
+        registry.register('markdown-editor', {
             component: module.default,
             matcher: markdownEditorFieldMatcher,
             priority
         });
-        markdownEditorRegistered = true;
     });
 }
 /**
@@ -76,28 +72,31 @@ export function registerMarkdownEditorField(priority = 100) {
  *
  * Use this when you've already imported the component and want immediate registration.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
+ * @param component - The pre-imported markdown editor component
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
  * ```typescript
  * import { registerMarkdownEditorFieldWithComponent, FormMarkdownEditor } from "@flowdrop/flowdrop/form/markdown";
- * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * registerMarkdownEditorFieldWithComponent(fd.fields, FormMarkdownEditor);
  * ```
  */
-export function registerMarkdownEditorFieldWithComponent(component, priority = 100) {
-    if (markdownEditorRegistered) {
+export function registerMarkdownEditorFieldWithComponent(registry, component, priority = 100) {
+    if (registry.has('markdown-editor')) {
         return;
     }
-    fieldComponentRegistry.register('markdown-editor', {
+    registry.register('markdown-editor', {
         component,
         matcher: markdownEditorFieldMatcher,
         priority
     });
-    markdownEditorRegistered = true;
 }
 /**
- * Check if markdown editor field is registered
+ * Check if markdown editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export function isMarkdownEditorRegistered() {
-    return markdownEditorRegistered;
+export function isMarkdownEditorRegistered(registry) {
+    return registry.has('markdown-editor');
 }

package/dist/helpers/proximityConnect.d.ts

@@ -6,6 +6,7 @@
  * compatible port pair and creates a preview/permanent edge.
  */
 import type { WorkflowNode as WorkflowNodeType, WorkflowEdge, NodePort, PortCoordinateMap } from '../types/index.js';
+import type { PortCompatibilityChecker } from '../utils/connections.js';
 /** A candidate proximity edge before it is finalized */
 export interface ProximityEdgeCandidate {
     id: string;
@@ -61,7 +62,7 @@ export declare class ProximityConnectHelper {
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
-    static findCompatibleEdges(draggedNode: WorkflowNodeType, allNodes: WorkflowNodeType[], existingEdges: WorkflowEdge[], minDistance: number): ProximityEdgeCandidate[];
+    static findCompatibleEdges(checker: PortCompatibilityChecker, draggedNode: WorkflowNodeType, allNodes: WorkflowNodeType[], existingEdges: WorkflowEdge[], minDistance: number): ProximityEdgeCandidate[];
     /**
      * Find the single best compatible edge using port-to-port distance.
      *
@@ -77,7 +78,7 @@ export declare class ProximityConnectHelper {
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
-    static findCompatibleEdgesByPortCoordinates(draggedNodeId: string, portCoordinates: PortCoordinateMap, existingEdges: WorkflowEdge[], maxDistance: number): ProximityEdgeCandidate[];
+    static findCompatibleEdgesByPortCoordinates(checker: PortCompatibilityChecker, draggedNodeId: string, portCoordinates: PortCoordinateMap, existingEdges: WorkflowEdge[], maxDistance: number): ProximityEdgeCandidate[];
     /**
      * Convert candidates to temporary (preview) WorkflowEdge objects with dashed styling.
      */

package/dist/helpers/proximityConnect.js

@@ -6,7 +6,6 @@
  * compatible port pair and creates a preview/permanent edge.
  */
 import { dynamicPortToNodePort } from '../types/index.js';
-import { getPortCompatibilityChecker } from '../utils/connections.js';
 import { v4 as uuidv4 } from 'uuid';
 /** CSS class applied to proximity preview edges */
 const PROXIMITY_EDGE_CLASS = 'flowdrop--edge--proximity-preview';
@@ -86,8 +85,7 @@ export class ProximityConnectHelper {
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
-    static findCompatibleEdges(draggedNode, allNodes, existingEdges, minDistance) {
-        const checker = getPortCompatibilityChecker();
+    static findCompatibleEdges(checker, draggedNode, allNodes, existingEdges, minDistance) {
         // Build lookup set for O(1) duplicate checks
         const existingEdgeSet = new Set(existingEdges.map((e) => `${e.source}:${e.sourceHandle}->${e.target}:${e.targetHandle}`));
         // Find the closest node within distance
@@ -198,8 +196,7 @@ export class ProximityConnectHelper {
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
-    static findCompatibleEdgesByPortCoordinates(draggedNodeId, portCoordinates, existingEdges, maxDistance) {
-        const checker = getPortCompatibilityChecker();
+    static findCompatibleEdgesByPortCoordinates(checker, draggedNodeId, portCoordinates, existingEdges, maxDistance) {
         // Build lookup set for O(1) duplicate checks
         const existingEdgeSet = new Set(existingEdges.map((e) => `${e.source}:${e.sourceHandle}->${e.target}:${e.targetHandle}`));
         // Partition ports by owner and direction, group other-node ports by dataType

package/dist/helpers/workflowEditorHelper.d.ts

@@ -3,6 +3,8 @@
  * Contains business logic for workflow operations
  */
 import type { WorkflowNode as WorkflowNodeType, NodeMetadata, Workflow, WorkflowEdge, NodeExecutionInfo } from '../types/index.js';
+import { type FlowDropInstance } from '../stores/instanceContainer.svelte.js';
+import type { ApiContext } from '../stores/apiContext.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 export { generateNodeId, extractConfigDefaults } from '../utils/nodeIds.js';
 /**
@@ -33,11 +35,11 @@ export declare class NodeOperationsHelper {
     /**
      * Load nodes from API
      */
-    static loadNodesFromApi(providedNodes?: NodeMetadata[]): Promise<NodeMetadata[]>;
+    static loadNodesFromApi(api: ApiContext, providedNodes?: NodeMetadata[]): Promise<NodeMetadata[]>;
     /**
      * Load node execution information for all nodes in the workflow
      */
-    static loadNodeExecutionInfo(workflow: Workflow | null, pipelineId?: string): Promise<Record<string, NodeExecutionInfo>>;
+    static loadNodeExecutionInfo(api: ApiContext, workflow: Workflow | null, pipelineId?: string): Promise<Record<string, NodeExecutionInfo>>;
     /**
      * Create a new node from dropped data
      */
@@ -72,8 +74,13 @@ export declare class WorkflowOperationsHelper {
     static addNode(workflow: Workflow, node: WorkflowNodeType): Workflow;
     /**
      * Save workflow to backend
+     *
+     * @param api - The instance's API context (endpoints + client)
+     * @param workflow - The workflow to save
+     * @param instance - The FlowDrop instance whose store should be synced when
+     *   the server assigns a new ID; defaults to the page-default instance
      */
-    static saveWorkflow(workflow: Workflow | null): Promise<Workflow | null>;
+    static saveWorkflow(api: ApiContext, workflow: Workflow | null, instance?: FlowDropInstance): Promise<Workflow | null>;
     /**
      * Export workflow as JSON file
      */
@@ -127,7 +134,7 @@ export declare class WorkflowOperationsHelper {
  */
 export declare class ConfigurationHelper {
     /**
-     * Configure API endpoints
+     * Configure API endpoints on the given instance's API context.
      */
-    static configureEndpoints(config: EndpointConfig): void;
+    static configureEndpoints(api: ApiContext, config: EndpointConfig): void;
 }

package/dist/helpers/workflowEditorHelper.js

@@ -3,9 +3,8 @@
  * Contains business logic for workflow operations
  */
 import { hasCycles, hasInvalidCycles } from '../utils/connections.js';
-import { workflowApi, nodeApi, setEndpointConfig } from '../services/api.js';
 import { v4 as uuidv4 } from 'uuid';
-import { workflowActions } from '../stores/workflowStore.svelte.js';
+import { getDefaultInstance } from '../stores/instanceContainer.svelte.js';
 import { nodeExecutionService } from '../services/nodeExecutionService.js';
 import { WorkflowAdapter } from '../adapters/WorkflowAdapter.js';
 import { AgentSpecAdapter } from '../adapters/agentspec/AgentSpecAdapter.js';
@@ -49,14 +48,14 @@ export class NodeOperationsHelper {
     /**
      * Load nodes from API
      */
-    static async loadNodesFromApi(providedNodes) {
+    static async loadNodesFromApi(api, providedNodes) {
         // If nodes are provided via props, use them
         if (providedNodes && providedNodes.length > 0) {
             return providedNodes;
         }
         // Otherwise, load from API
         try {
-            const fetchedNodes = await nodeApi.getNodes();
+            const fetchedNodes = await api.client.getAvailableNodes();
             return fetchedNodes;
         }
         catch (error) {
@@ -89,7 +88,7 @@ export class NodeOperationsHelper {
     /**
      * Load node execution information for all nodes in the workflow
      */
-    static async loadNodeExecutionInfo(workflow, pipelineId) {
+    static async loadNodeExecutionInfo(api, workflow, pipelineId) {
         if (!workflow?.nodes)
             return {};
         // Only load execution info if we have a pipelineId (for pipeline status mode)
@@ -97,7 +96,7 @@ export class NodeOperationsHelper {
             return {};
         try {
             const nodeIds = workflow.nodes.map((node) => node.id);
-            const executionInfo = await nodeExecutionService.getMultipleNodeExecutionInfo(nodeIds, pipelineId);
+            const executionInfo = await nodeExecutionService.getMultipleNodeExecutionInfo(api.config, nodeIds, pipelineId);
             return executionInfo;
         }
         catch (error) {
@@ -160,7 +159,7 @@ export class WorkflowOperationsHelper {
     static generateMetadata(existingMetadata) {
         const now = new Date().toISOString();
         return {
-            version: '1.0.0',
+            schemaVersion: '1.0.0',
             createdAt: now,
             ...(existingMetadata ?? {}),
             updatedAt: now,
@@ -217,38 +216,41 @@ export class WorkflowOperationsHelper {
     }
     /**
      * Save workflow to backend
+     *
+     * @param api - The instance's API context (endpoints + client)
+     * @param workflow - The workflow to save
+     * @param instance - The FlowDrop instance whose store should be synced when
+     *   the server assigns a new ID; defaults to the page-default instance
      */
-    static async saveWorkflow(workflow) {
+    static async saveWorkflow(api, workflow, instance) {
         if (!workflow) {
             logger.warn('No workflow data available to save');
             return null;
         }
         try {
-            // Determine the workflow ID based on whether we have an existing workflow
-            let workflowId;
-            if (workflow.id) {
-                // Use the existing workflow ID
-                workflowId = workflow.id;
-            }
-            else {
-                // Generate a new UUID for a new workflow
-                workflowId = uuidv4();
-            }
+            // Determine new vs existing BEFORE the uuidv4() fallback: a present id (any
+            // format) means the workflow came from a backend and must be updated. Only
+            // a missing id means "truly new".
+            const isExistingWorkflow = !!workflow.id;
+            const workflowId = workflow.id || uuidv4();
             const workflowToSave = {
                 id: workflowId,
                 name: workflow.name || 'Untitled Workflow',
                 nodes: workflow.nodes || [],
                 edges: workflow.edges || [],
                 metadata: {
-                    version: '1.0.0',
+                    schemaVersion: workflow.metadata?.schemaVersion || '1.0.0',
                     createdAt: workflow.metadata?.createdAt || new Date().toISOString(),
                     updatedAt: new Date().toISOString()
                 }
             };
-            const savedWorkflow = await workflowApi.saveWorkflow(workflowToSave);
+            const savedWorkflow = isExistingWorkflow
+                ? await api.client.updateWorkflow(workflowToSave.id, workflowToSave)
+                : await api.client.saveWorkflow(workflowToSave);
             // Update the workflow ID if it changed (new workflow)
             if (savedWorkflow.id && savedWorkflow.id !== workflowToSave.id) {
-                workflowActions.batchUpdate({
+                const fd = instance ?? getDefaultInstance();
+                fd.workflow.batchUpdate({
                     nodes: workflowToSave.nodes,
                     edges: workflowToSave.edges,
                     name: workflowToSave.name,
@@ -281,7 +283,7 @@ export class WorkflowOperationsHelper {
             nodes: workflow.nodes || [],
             edges: workflow.edges || [],
             metadata: {
-                version: '1.0.0',
+                schemaVersion: workflow.metadata?.schemaVersion || '1.0.0',
                 createdAt: workflow.metadata?.createdAt || new Date().toISOString(),
                 updatedAt: new Date().toISOString()
             }
@@ -380,9 +382,9 @@ export class WorkflowOperationsHelper {
  */
 export class ConfigurationHelper {
     /**
-     * Configure API endpoints
+     * Configure API endpoints on the given instance's API context.
      */
-    static configureEndpoints(config) {
-        setEndpointConfig(config);
+    static configureEndpoints(api, config) {
+        api.configure(config);
     }
 }

package/dist/index.d.ts

@@ -1,37 +1,41 @@
 /**
  * FlowDrop - Visual Workflow Editor Library
  *
- * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors.
+ * A Svelte 5 component library built on @xyflow/svelte for creating node-based
+ * workflow editors.
  *
- * ## Module Structure (Tree-Shakable)
+ * ## The main entry is a minimal front door
  *
- * For optimal bundle size, import from specific sub-modules:
+ * This entry point intentionally exposes only the small surface most apps need
+ * to get started: the `App` component, the `mountFlowDropApp` / `unmountFlowDropApp`
+ * mount helpers, instance plumbing (`createFlowDropInstance` / `getInstance` /
+ * `provideInstance`), endpoint + auth helpers, and the core public types. It does
+ * NOT re-export the entire library.
  *
- * - `@flowdrop/flowdrop/core` - Types and utilities only (no heavy deps)
- * - `@flowdrop/flowdrop/editor` - WorkflowEditor with @xyflow/svelte
+ * Everything else lives in focused sub-modules — import from the one you need:
+ *
+ * - `@flowdrop/flowdrop/core` - Types, utilities, theme/skin, messages helpers (no heavy deps)
+ * - `@flowdrop/flowdrop/editor` - WorkflowEditor, registries, stores, services (adds @xyflow/svelte)
  * - `@flowdrop/flowdrop/form` - SchemaForm with basic fields
- * - `@flowdrop/flowdrop/form/code` - Code editor support (adds CodeMirror)
- * - `@flowdrop/flowdrop/form/markdown` - Markdown editor support (CodeMirror 6)
+ * - `@flowdrop/flowdrop/form/code` - Code editor field (adds CodeMirror)
+ * - `@flowdrop/flowdrop/form/markdown` - Markdown editor field (CodeMirror 6)
  * - `@flowdrop/flowdrop/display` - MarkdownDisplay (adds marked)
  * - `@flowdrop/flowdrop/playground` - Playground for interactive workflow testing
+ * - `@flowdrop/flowdrop/settings` - Settings stores, services, components
  * - `@flowdrop/flowdrop/styles` - CSS styles
  *
- * ## Legacy Import (Full Bundle)
- *
- * Importing from the main entry point includes everything:
- *
- * ```typescript
- * import { WorkflowEditor, SchemaForm } from "@flowdrop/flowdrop";
- * ```
- *
- * **Note**: This will bundle ALL dependencies including @xyflow/svelte,
- * CodeMirror and marked. For smaller bundles, use sub-modules.
- *
  * @module flowdrop
  */
-export * from './core/index.js';
-export * from './form/index.js';
-export * from './display/index.js';
-export * from './playground/index.js';
-export * from './editor/index.js';
-export * from './settings/index.js';
+export { default as App } from './components/App.svelte';
+export { mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
+export { createFlowDropInstance } from './stores/instanceContainer.svelte.js';
+export { getInstance, provideInstance } from './stores/getInstance.svelte.js';
+export { createEndpointConfig, defaultEndpointConfig } from './config/endpoints.js';
+export { NoAuthProvider, StaticAuthProvider, CallbackAuthProvider } from './types/auth.js';
+export type { Workflow, WorkflowNode, WorkflowEdge, NodeMetadata, ConfigSchema } from './types/index.js';
+export type { EndpointConfig } from './config/endpoints.js';
+export type { AuthProvider } from './types/auth.js';
+export type { FlowDropInstance } from './stores/instanceContainer.svelte.js';
+export type { FlowDropMountOptions, MountedFlowDropApp } from './svelte-app.js';
+export type { FlowDropEventHandlers } from './types/events.js';
+export type { Messages, MessagesOverride } from './messages/index.js';