@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.2

package/dist/display/index.d.ts

@@ -2,13 +2,16 @@
  * FlowDrop Display Module
  *
  * Provides display components for rendering content.
- * This module includes the marked library for markdown rendering.
  *
  * @module display
  *
+ * This entry renders user/API-provided HTML, so it pulls in the HTML sanitizer
+ * (DOMPurify). `sanitizeHtml` is exposed here — rather than from
+ * `@flowdrop/flowdrop/core` — to keep `core` free of that heavier dependency.
+ *
  * @example
  * ```typescript
- * import { MarkdownDisplay } from "@flowdrop/flowdrop/display";
+ * import { MarkdownDisplay, sanitizeHtml } from "@flowdrop/flowdrop/display";
  * ```
  *
  * @example In Svelte:
@@ -26,4 +29,4 @@
  * ```
  */
 export { default as MarkdownDisplay } from '../components/MarkdownDisplay.svelte';
-export { marked } from 'marked';
+export { sanitizeHtml } from '../utils/sanitize.js';

package/dist/display/index.js

@@ -2,13 +2,16 @@
  * FlowDrop Display Module
  *
  * Provides display components for rendering content.
- * This module includes the marked library for markdown rendering.
  *
  * @module display
  *
+ * This entry renders user/API-provided HTML, so it pulls in the HTML sanitizer
+ * (DOMPurify). `sanitizeHtml` is exposed here — rather than from
+ * `@flowdrop/flowdrop/core` — to keep `core` free of that heavier dependency.
+ *
  * @example
  * ```typescript
- * import { MarkdownDisplay } from "@flowdrop/flowdrop/display";
+ * import { MarkdownDisplay, sanitizeHtml } from "@flowdrop/flowdrop/display";
  * ```
  *
  * @example In Svelte:
@@ -30,7 +33,6 @@
 // ============================================================================
 export { default as MarkdownDisplay } from '../components/MarkdownDisplay.svelte';
 // ============================================================================
-// Re-export marked for advanced usage
+// HTML Sanitization (DOMPurify-backed — lives here, not in core)
 // ============================================================================
-// Users can use marked directly if they need more control
-export { marked } from 'marked';
+export { sanitizeHtml } from '../utils/sanitize.js';

package/dist/editor/index.d.ts

@@ -5,9 +5,14 @@
  * 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.
+ * **Multi-instance support.** Each mount gets its own `FlowDropInstance`
+ * state container (workflow, undo/redo, playground, …), so multiple editors
+ * can coexist on one page. Pass `instanceId` to the mount options to scope
+ * draft/panel storage keys per editor; in Svelte, pass `instance` to <App>
+ * or resolve it in components via `getInstance()`. State is addressed through
+ * the instance — there is no page-default module-level store API.
+ * Page-global by design: theme/settings, port-compatibility config, and API
+ * endpoint config.
  *
  * @module editor
  *
@@ -31,7 +36,6 @@
  * <WorkflowEditor nodes={availableNodes} />
  * ```
  */
-import '../registry/builtinNodes.js';
 export { default as WorkflowEditor } from '../components/WorkflowEditor.svelte';
 export { default as App } from '../components/App.svelte';
 export { default as WorkflowNodeComponent } from '../components/nodes/WorkflowNode.svelte';
@@ -58,33 +62,28 @@ export { default as PipelineStatus } from '../components/PipelineStatus.svelte';
 export { default as Navbar } from '../components/Navbar.svelte';
 export { default as Logo } from '../components/Logo.svelte';
 export { default as CommandConsole } from '../components/console/CommandConsole.svelte';
-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';
 export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from '../svelte-app.js';
-export { nodeComponentRegistry, createNamespacedType, parseNamespacedType, BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from '../registry/index.js';
+export { NodeComponentRegistry, createNamespacedType, parseNamespacedType, BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, createPlugin, isValidNamespace } from '../registry/index.js';
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from '../helpers/workflowEditorHelper.js';
-export { getWorkflowStore, workflowActions, getWorkflowId, getWorkflowName, getWorkflowNodes, getWorkflowEdges, getWorkflowMetadata, getWorkflowFormat, getWorkflowChanged, getWorkflowValidation, getWorkflowMetadataChanged, getConnectedHandles, getIsDirty, isDirty, markAsSaved, getEditVersion, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, setHistoryEnabled, isHistoryEnabled, setRestoringFromHistory } from '../stores/workflowStore.svelte.js';
-export { rebuildAllPortCoordinates, updateNodePortCoordinates, removeNodePortCoordinates, getPortCoordinate, getNodePortCoordinates, getPortCoordinateSnapshot, getPortCoordinates } from '../stores/portCoordinateStore.svelte.js';
-export { getHistoryState, getCanUndo, getCanRedo, historyActions, setOnRestoreCallback, cleanupHistorySubscription, historyService, HistoryService } from '../stores/historyStore.svelte.js';
+export { createFlowDropInstance, getDefaultInstance, type FlowDropInstance, type CreateInstanceOptions } from '../stores/instanceContainer.svelte.js';
+export { getInstance, provideInstance, FLOWDROP_INSTANCE_KEY } from '../stores/getInstance.svelte.js';
+export { WorkflowStore, type WorkflowStoreActions } from '../stores/workflowStore.svelte.js';
+export { HistoryStore, type HistoryStoreActions } from '../stores/historyStore.svelte.js';
+export { ApiContext } from '../stores/apiContext.js';
+export { PortCoordinateStore } from '../stores/portCoordinateStore.svelte.js';
+export { HistoryService } from '../services/historyService.js';
 export type { HistoryEntry, HistoryState, PushOptions } from '../stores/historyStore.svelte.js';
-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';
-export { PlaygroundService, playgroundService } from '../services/playgroundService.js';
-export { getCurrentSession, getSessions, getMessages, getIsExecuting, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+export { NodeExecutionService } from '../services/nodeExecutionService.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, clearAllDrafts, DraftAutoSaveManager } from '../services/draftStorage.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, clearAllDrafts, setDraftStorage, getDraftStorage, resolveDraftStorage, DraftAutoSaveManager } from '../services/draftStorage.js';
+export type { DraftStorageAdapter, DraftStorageType, DraftStorageOption } from '../services/draftStorage.js';
 export { EnhancedFlowDropApiClient, ApiError } from '../api/enhanced-client.js';
-export { isLoopbackEdge, isValidLoopbackCycle, PortCompatibilityChecker, initializePortCompatibility, getPortCompatibilityChecker, getPossibleConnections, validateConnection, getConnectionSuggestions, hasCycles, hasInvalidCycles, getExecutionOrder } from '../utils/connections.js';
+export { isLoopbackEdge, isValidLoopbackCycle, PortCompatibilityChecker, getPossibleConnections, validateConnection, getConnectionSuggestions, hasCycles, hasInvalidCycles, getExecutionOrder } from '../utils/connections.js';
 export { fetchRuntimeConfig, getRuntimeConfig, clearRuntimeConfigCache, initRuntimeConfig } from '../config/runtimeConfig.js';
 export type { RuntimeConfig } from '../config/runtimeConfig.js';
 export type { Workflow, WorkflowNode, WorkflowEdge, NodeMetadata, NodePort, DynamicPort, Branch, ExecutionStatus, ExecutionResult, FlowDropConfig, PortConfig, ConfigSchema, ConfigProperty, ConfigEditOptions } from '../types/index.js';

package/dist/editor/index.js

@@ -5,9 +5,14 @@
  * 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.
+ * **Multi-instance support.** Each mount gets its own `FlowDropInstance`
+ * state container (workflow, undo/redo, playground, …), so multiple editors
+ * can coexist on one page. Pass `instanceId` to the mount options to scope
+ * draft/panel storage keys per editor; in Svelte, pass `instance` to <App>
+ * or resolve it in components via `getInstance()`. State is addressed through
+ * the instance — there is no page-default module-level store API.
+ * Page-global by design: theme/settings, port-compatibility config, and API
+ * endpoint config.
  *
  * @module editor
  *
@@ -32,12 +37,6 @@
  * ```
  */
 // ============================================================================
-// 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';
@@ -73,14 +72,6 @@ export { default as Navbar } from '../components/Navbar.svelte';
 export { default as Logo } from '../components/Logo.svelte';
 // Console Components
 export { default as CommandConsole } from '../components/console/CommandConsole.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
 // ============================================================================
@@ -89,12 +80,12 @@ export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from '../sv
 // Node Component Registry
 // ============================================================================
 export { 
-// Core registry
-nodeComponentRegistry, createNamespacedType, parseNamespacedType, 
+// Core registry (the class — instances live on `fd.nodes`)
+NodeComponentRegistry, createNamespacedType, parseNamespacedType, 
 // Built-in nodes
-BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, 
+BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, 
 // Plugin system
-registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from '../registry/index.js';
+createPlugin, isValidNamespace } from '../registry/index.js';
 // ============================================================================
 // Editor Helpers
 // ============================================================================
@@ -102,30 +93,29 @@ export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, Conf
 // ============================================================================
 // Stores
 // ============================================================================
-export { getWorkflowStore, workflowActions, getWorkflowId, getWorkflowName, getWorkflowNodes, getWorkflowEdges, getWorkflowMetadata, getWorkflowFormat, getWorkflowChanged, getWorkflowValidation, getWorkflowMetadataChanged, getConnectedHandles, 
-// Dirty state tracking & version counter
-getIsDirty, isDirty, markAsSaved, getEditVersion, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, 
-// History control
-setHistoryEnabled, isHistoryEnabled, setRestoringFromHistory } from '../stores/workflowStore.svelte.js';
+// Multi-instance support: per-instance state containers + context helpers.
+// All workflow/history/playground state is addressed through an instance.
+export { createFlowDropInstance, getDefaultInstance } from '../stores/instanceContainer.svelte.js';
+export { getInstance, provideInstance, FLOWDROP_INSTANCE_KEY } from '../stores/getInstance.svelte.js';
+export { WorkflowStore } from '../stores/workflowStore.svelte.js';
+export { HistoryStore } from '../stores/historyStore.svelte.js';
+// Per-instance API context (endpoints + auth provider + lazily-built client).
+export { ApiContext } from '../stores/apiContext.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';
+export { PortCoordinateStore } from '../stores/portCoordinateStore.svelte.js';
+// History Service (the undo/redo engine class)
+export { HistoryService } from '../services/historyService.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, getCanSendMessage, getIsLoading, getError as getPlaygroundError, getCurrentWorkflow, getLastPollSequenceNumber, getSessionStatus, getMessageCount, getChatMessages, getLogMessages, getLatestMessage, getInputFields, getHasChatInput, getSessionCount, playgroundActions, applyServerResponse, subscribeToSessionStatus, getCurrentSessionId, isSessionSelected, getMessagesSnapshot, getLatestSequenceNumber } from '../stores/playgroundStore.svelte.js';
+export { NodeExecutionService } from '../services/nodeExecutionService.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, clearAllDrafts, DraftAutoSaveManager } from '../services/draftStorage.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, clearAllDrafts, setDraftStorage, getDraftStorage, resolveDraftStorage, DraftAutoSaveManager } from '../services/draftStorage.js';
 // ============================================================================
 // API Clients
 // ============================================================================
@@ -133,7 +123,7 @@ 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';
+export { isLoopbackEdge, isValidLoopbackCycle, PortCompatibilityChecker, getPossibleConnections, validateConnection, getConnectionSuggestions, hasCycles, hasInvalidCycles, getExecutionOrder } from '../utils/connections.js';
 // ============================================================================
 // Runtime Configuration
 // ============================================================================

package/dist/form/code.d.ts

@@ -11,16 +11,17 @@
  * import { SchemaForm } from "@flowdrop/flowdrop/form";
  * import { registerCodeEditorField, registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * // Register code editor support (call once at app startup)
- * registerCodeEditorField();
+ * // Register code editor support into an instance's field registry
+ * // (call once at app startup)
+ * registerCodeEditorField(fd.fields);
  *
  * // Optionally also register template editor
- * registerTemplateEditorField();
+ * registerTemplateEditorField(fd.fields);
  *
  * // Now SchemaForm will render code editors for format: "json", "code", or "template"
  * ```
  */
-import type { FieldComponent } from './fieldRegistry.js';
+import type { FieldComponent, FieldComponentRegistry } 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';
@@ -41,6 +42,7 @@ export declare function templateEditorFieldMatcher(schema: FieldSchema): boolean
  * Call this function once at application startup to enable
  * code editor fields in SchemaForm. This loads CodeMirror dependencies.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -48,16 +50,17 @@ export declare function templateEditorFieldMatcher(schema: FieldSchema): boolean
  * // In your app's entry point:
  * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * registerCodeEditorField();
+ * registerCodeEditorField(fd.fields);
  * ```
  */
-export declare function registerCodeEditorField(priority?: number): void;
+export declare function registerCodeEditorField(registry: FieldComponentRegistry, 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 registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -65,37 +68,44 @@ export declare function registerCodeEditorField(priority?: number): void;
  * // In your app's entry point:
  * import { registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * registerTemplateEditorField();
+ * registerTemplateEditorField(fd.fields);
  * ```
  */
-export declare function registerTemplateEditorField(priority?: number): void;
+export declare function registerTemplateEditorField(registry: FieldComponentRegistry, priority?: number): void;
 /**
  * Register all code-related editor fields (code + template)
  *
  * Convenience function to register both code editor types at once.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  */
-export declare function registerAllCodeEditors(priority?: number): void;
+export declare function registerAllCodeEditors(registry: FieldComponentRegistry, 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 registry - The instance's field registry (e.g. `fd.fields`)
+ * @param component - The pre-imported code editor component
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
  * ```typescript
  * import { registerCodeEditorFieldWithComponent, FormCodeEditor } from "@flowdrop/flowdrop/form/code";
- * registerCodeEditorFieldWithComponent(FormCodeEditor);
+ * registerCodeEditorFieldWithComponent(fd.fields, FormCodeEditor);
  * ```
  */
-export declare function registerCodeEditorFieldWithComponent(component: FieldComponent, priority?: number): void;
+export declare function registerCodeEditorFieldWithComponent(registry: FieldComponentRegistry, component: FieldComponent, priority?: number): void;
 /**
- * Check if code editor field is registered
+ * Check if code editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export declare function isCodeEditorRegistered(): boolean;
+export declare function isCodeEditorRegistered(registry: FieldComponentRegistry): boolean;
 /**
- * Check if template editor field is registered
+ * Check if template editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export declare function isTemplateEditorRegistered(): boolean;
+export declare function isTemplateEditorRegistered(registry: FieldComponentRegistry): boolean;

package/dist/form/code.js

@@ -11,16 +11,16 @@
  * import { SchemaForm } from "@flowdrop/flowdrop/form";
  * import { registerCodeEditorField, registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * // Register code editor support (call once at app startup)
- * registerCodeEditorField();
+ * // Register code editor support into an instance's field registry
+ * // (call once at app startup)
+ * registerCodeEditorField(fd.fields);
  *
  * // Optionally also register template editor
- * registerTemplateEditorField();
+ * registerTemplateEditorField(fd.fields);
  *
  * // 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';
@@ -46,25 +46,13 @@ export function codeEditorFieldMatcher(schema) {
 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 registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -72,21 +60,25 @@ fieldComponentRegistry.onClear(() => {
  * // In your app's entry point:
  * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * registerCodeEditorField();
+ * registerCodeEditorField(fd.fields);
  * ```
  */
-export function registerCodeEditorField(priority = 100) {
-    if (codeEditorRegistered) {
+export function registerCodeEditorField(registry, priority = 100) {
+    if (registry.has('code-editor')) {
         return;
     }
     // Dynamic import to ensure proper code splitting
     import('../components/form/FormCodeEditor.svelte').then((module) => {
-        fieldComponentRegistry.register('code-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('code-editor')) {
+            return;
+        }
+        registry.register('code-editor', {
             component: module.default,
             matcher: codeEditorFieldMatcher,
             priority
         });
-        codeEditorRegistered = true;
     });
 }
 /**
@@ -95,6 +87,7 @@ export function registerCodeEditorField(priority = 100) {
  * Call this function once at application startup to enable
  * template editor fields (Twig/Liquid syntax) in SchemaForm.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
@@ -102,21 +95,25 @@ export function registerCodeEditorField(priority = 100) {
  * // In your app's entry point:
  * import { registerTemplateEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * registerTemplateEditorField();
+ * registerTemplateEditorField(fd.fields);
  * ```
  */
-export function registerTemplateEditorField(priority = 100) {
-    if (templateEditorRegistered) {
+export function registerTemplateEditorField(registry, priority = 100) {
+    if (registry.has('template-editor')) {
         return;
     }
     // Dynamic import to ensure proper code splitting
     import('../components/form/FormTemplateEditor.svelte').then((module) => {
-        fieldComponentRegistry.register('template-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('template-editor')) {
+            return;
+        }
+        registry.register('template-editor', {
             component: module.default,
             matcher: templateEditorFieldMatcher,
             priority
         });
-        templateEditorRegistered = true;
     });
 }
 /**
@@ -124,45 +121,51 @@ export function registerTemplateEditorField(priority = 100) {
  *
  * Convenience function to register both code editor types at once.
  *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  * @param priority - Priority for field matching (default: 100)
  */
-export function registerAllCodeEditors(priority = 100) {
-    registerCodeEditorField(priority);
-    registerTemplateEditorField(priority);
+export function registerAllCodeEditors(registry, priority = 100) {
+    registerCodeEditorField(registry, priority);
+    registerTemplateEditorField(registry, priority);
 }
 /**
  * Synchronously register code 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 code editor component
  * @param priority - Priority for field matching (default: 100)
  *
  * @example
  * ```typescript
  * import { registerCodeEditorFieldWithComponent, FormCodeEditor } from "@flowdrop/flowdrop/form/code";
- * registerCodeEditorFieldWithComponent(FormCodeEditor);
+ * registerCodeEditorFieldWithComponent(fd.fields, FormCodeEditor);
  * ```
  */
-export function registerCodeEditorFieldWithComponent(component, priority = 100) {
-    if (codeEditorRegistered) {
+export function registerCodeEditorFieldWithComponent(registry, component, priority = 100) {
+    if (registry.has('code-editor')) {
         return;
     }
-    fieldComponentRegistry.register('code-editor', {
+    registry.register('code-editor', {
         component,
         matcher: codeEditorFieldMatcher,
         priority
     });
-    codeEditorRegistered = true;
 }
 /**
- * Check if code editor field is registered
+ * Check if code editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export function isCodeEditorRegistered() {
-    return codeEditorRegistered;
+export function isCodeEditorRegistered(registry) {
+    return registry.has('code-editor');
 }
 /**
- * Check if template editor field is registered
+ * Check if template editor field is registered in the given registry.
+ *
+ * @param registry - The instance's field registry (e.g. `fd.fields`)
  */
-export function isTemplateEditorRegistered() {
-    return templateEditorRegistered;
+export function isTemplateEditorRegistered(registry) {
+    return registry.has('template-editor');
 }

package/dist/form/fieldRegistry.d.ts

@@ -18,19 +18,15 @@
  *
  * @example Adding code editor support:
  * ```typescript
- * import { fieldComponentRegistry } from "@flowdrop/flowdrop/form";
- * import { FormCodeEditor, codeEditorFieldMatcher } from "@flowdrop/flowdrop/form/code";
+ * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
  *
- * fieldComponentRegistry.register("code-editor", {
- *   component: FormCodeEditor,
- *   matcher: codeEditorFieldMatcher,
- *   priority: 100
- * });
+ * // Registers the code editor into this instance's field registry.
+ * registerCodeEditorField(fd.fields);
  * ```
  */
 import type { Component } from 'svelte';
 import type { FieldSchema } from '../components/form/types.js';
-import { BaseRegistry } from '../registry/BaseRegistry.js';
+import { BaseRegistry } from '../registry/BaseRegistry.svelte.js';
 /**
  * Base field component props that all registered field components should accept.
  * Components may have additional specific props.
@@ -82,12 +78,23 @@ export interface FieldComponentRegistration extends FieldMatcherRegistration {
  * Class-based field component registry.
  * Extends BaseRegistry with priority-based field resolution.
  */
-declare class FieldComponentRegistry extends BaseRegistry<string, FieldComponentRegistration> {
+export declare class FieldComponentRegistry extends BaseRegistry<string, FieldComponentRegistration> {
     /** Cached ordered keys by priority (highest first), invalidated on mutation */
     private orderedKeys;
+    /**
+     * @param seed - Optional initial field registrations keyed by type. The
+     *   registry starts empty by default — the built-in light fields are
+     *   resolved inline by FormField/FormFieldLight, and heavy editors are
+     *   registered on demand via `form/code`, `form/markdown`, etc.
+     */
+    constructor(seed?: Record<string, FieldComponentRegistration>);
     /**
      * Register a field component.
-     * Silently overwrites existing registrations (preserves legacy behavior).
+     *
+     * Re-registering an existing type overwrites it — useful for hosts
+     * replacing a built-in field — but warns in dev, since an *accidental*
+     * duplicate registration silently swallowing a field implementation is a
+     * miserable bug to track down.
      *
      * @param type - Unique identifier for this field type
      * @param registration - The field component registration
@@ -114,8 +121,6 @@ declare class FieldComponentRegistry extends BaseRegistry<string, FieldComponent
      */
     private getOrderedKeys;
 }
-/** Singleton instance of the field component registry */
-export declare const fieldComponentRegistry: FieldComponentRegistry;
 /**
  * Matcher for hidden fields (should not render)
  */
@@ -166,4 +171,3 @@ export declare const arrayMatcher: FieldMatcher;
  * Matches when format is "autocomplete" and autocomplete config with URL is provided
  */
 export declare const autocompleteMatcher: FieldMatcher;
-export {};