@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

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 { 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 {};

package/dist/form/fieldRegistry.js

@@ -18,34 +18,55 @@
  *
  * @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 { BaseRegistry } from '../registry/BaseRegistry.js';
+import { DEV } from 'esm-env';
+import { BaseRegistry } from '../registry/BaseRegistry.svelte.js';
 /**
  * Class-based field component registry.
  * Extends BaseRegistry with priority-based field resolution.
  */
-class FieldComponentRegistry extends BaseRegistry {
+export class FieldComponentRegistry extends BaseRegistry {
     /** Cached ordered keys by priority (highest first), invalidated on mutation */
     orderedKeys = null;
+    /**
+     * @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) {
+        super();
+        if (seed) {
+            for (const [type, registration] of Object.entries(seed)) {
+                this.register(type, registration);
+            }
+        }
+    }
     /**
      * 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
      */
     register(type, registration) {
+        if (DEV && this.items.has(type)) {
+            // eslint-disable-next-line no-console -- intentional dev diagnostic for accidental duplicate registrations
+            console.warn(`[flowdrop] Field type "${type}" is already registered — overwriting. ` +
+                'If this is intentional (replacing a built-in field), ignore this warning.');
+        }
         this.items.set(type, registration);
         this.orderedKeys = null;
+        this.touch();
         this.notifyListeners();
     }
     /**
@@ -73,6 +94,7 @@ class FieldComponentRegistry extends BaseRegistry {
      * @returns The matching registration or null if no match
      */
     resolveFieldComponent(schema) {
+        this.trackVersion(); // reactive dependency — cached orderedKeys path still tracks mutations
         const keys = this.getOrderedKeys();
         for (const key of keys) {
             const registration = this.items.get(key);
@@ -94,8 +116,6 @@ class FieldComponentRegistry extends BaseRegistry {
         return this.orderedKeys;
     }
 }
-/** Singleton instance of the field component registry */
-export const fieldComponentRegistry = new FieldComponentRegistry();
 // ============================================================================
 // Built-in Field Matchers (for light fields)
 // These are always available and used by the base FormField component

package/dist/form/full.d.ts

@@ -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
  * ```
@@ -23,7 +23,8 @@
 export { SchemaForm, FormField, FormFieldFull, FormFieldWrapper, FormTextField, FormTextarea, FormNumberField, FormRangeField, FormToggle, FormSelect, FormCheckboxGroup, FormArray, FormFieldset, FormUISchemaRenderer } from './index.js';
 export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, SchemaFormProps, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, FormFieldFactoryProps, FormFieldWrapperProps, FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './index.js';
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from './index.js';
-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 type { FieldComponentRegistry } from './fieldRegistry.js';
 export { FormCodeEditor, FormTemplateEditor } from './code.js';
 export { FormMarkdownEditor } from './markdown.js';
 export { registerCodeEditorField, registerTemplateEditorField, registerAllCodeEditors, isCodeEditorRegistered, isTemplateEditorRegistered, codeEditorFieldMatcher, templateEditorFieldMatcher } from './code.js';
@@ -31,26 +32,29 @@ export { registerMarkdownEditorField, isMarkdownEditorRegistered, markdownEditor
 /**
  * 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 declare function initializeAllFieldTypes(): void;
+export declare function initializeAllFieldTypes(registry: FieldComponentRegistry): void;
 /**
- * Check if all field types have been initialized
- */
-export declare function areAllFieldTypesInitialized(): boolean;
-/**
- * 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 declare function resetFieldTypeInitialization(): void;
+export declare function areAllFieldTypesInitialized(registry: FieldComponentRegistry): boolean;