@flowdrop/flowdrop 1.0.0

package/dist/form/fieldRegistry.js

@@ -0,0 +1,152 @@
+/**
+ * Form Field Component Registry
+ *
+ * Provides a registry system for form field components that enables:
+ * - Tree-shaking: Heavy components (code editor, markdown) are only bundled when registered
+ * - Dynamic field types: Users can add custom field renderers
+ * - Lazy loading: Components can be registered at runtime
+ *
+ * Extends BaseRegistry for shared mechanics (subscribe, onClear, etc.).
+ *
+ * @module form/fieldRegistry
+ *
+ * @example Basic usage with light fields only (no codemirror):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * // Uses only basic fields - small bundle size
+ * ```
+ *
+ * @example Adding code editor support:
+ * ```typescript
+ * import { fieldComponentRegistry } from "@flowdrop/flowdrop/form";
+ * import { FormCodeEditor, codeEditorFieldMatcher } from "@flowdrop/flowdrop/form/code";
+ *
+ * fieldComponentRegistry.register("code-editor", {
+ *   component: FormCodeEditor,
+ *   matcher: codeEditorFieldMatcher,
+ *   priority: 100
+ * });
+ * ```
+ */
+import { BaseRegistry } from '../registry/BaseRegistry.js';
+/**
+ * Class-based field component registry.
+ * Extends BaseRegistry with priority-based field resolution.
+ */
+class FieldComponentRegistry extends BaseRegistry {
+    /** Cached ordered keys by priority (highest first), invalidated on mutation */
+    orderedKeys = null;
+    /**
+     * Register a field component.
+     * Silently overwrites existing registrations (preserves legacy behavior).
+     *
+     * @param type - Unique identifier for this field type
+     * @param registration - The field component registration
+     */
+    register(type, registration) {
+        this.items.set(type, registration);
+        this.orderedKeys = null;
+        this.notifyListeners();
+    }
+    /**
+     * Override unregister to invalidate the priority cache.
+     */
+    unregister(key) {
+        const result = super.unregister(key);
+        if (result) {
+            this.orderedKeys = null;
+        }
+        return result;
+    }
+    /**
+     * Override clear to invalidate the priority cache.
+     */
+    clear() {
+        super.clear();
+        this.orderedKeys = null;
+    }
+    /**
+     * Resolve which component should render a given field schema.
+     * Checks registered matchers in priority order (highest first).
+     *
+     * @param schema - The field schema to resolve
+     * @returns The matching registration or null if no match
+     */
+    resolveFieldComponent(schema) {
+        const keys = this.getOrderedKeys();
+        for (const key of keys) {
+            const registration = this.items.get(key);
+            if (registration && registration.matcher(schema)) {
+                return registration;
+            }
+        }
+        return null;
+    }
+    /**
+     * Get keys ordered by priority (cached).
+     */
+    getOrderedKeys() {
+        if (this.orderedKeys === null) {
+            this.orderedKeys = Array.from(this.items.entries())
+                .sort((a, b) => b[1].priority - a[1].priority)
+                .map(([key]) => key);
+        }
+        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
+// ============================================================================
+/**
+ * Matcher for hidden fields (should not render)
+ */
+export const hiddenFieldMatcher = (schema) => schema.format === 'hidden';
+/**
+ * Matcher for checkbox group fields (enum with multiple)
+ */
+export const checkboxGroupMatcher = (schema) => Boolean(schema.enum && schema.multiple);
+/**
+ * Matcher for enum select fields
+ */
+export const enumSelectMatcher = (schema) => Boolean(schema.enum && !schema.multiple);
+/**
+ * Matcher for multiline textarea fields
+ */
+export const textareaMatcher = (schema) => schema.type === 'string' && schema.format === 'multiline';
+/**
+ * Matcher for range slider fields
+ */
+export const rangeMatcher = (schema) => (schema.type === 'number' || schema.type === 'integer') && schema.format === 'range';
+/**
+ * Matcher for string text fields
+ */
+export const textFieldMatcher = (schema) => schema.type === 'string' && !schema.format;
+/**
+ * Matcher for number fields
+ */
+export const numberFieldMatcher = (schema) => (schema.type === 'number' || schema.type === 'integer') && schema.format !== 'range';
+/**
+ * Matcher for boolean toggle fields
+ */
+export const toggleMatcher = (schema) => schema.type === 'boolean';
+/**
+ * Matcher for select fields with labeled options (JSON Schema oneOf pattern)
+ *
+ * @example
+ * ```json
+ * { "type": "string", "oneOf": [{ "const": "a", "title": "Option A" }] }
+ * ```
+ */
+export const selectOptionsMatcher = (schema) => Boolean(schema.oneOf && schema.oneOf.length > 0);
+/**
+ * Matcher for array fields
+ */
+export const arrayMatcher = (schema) => schema.type === 'array' && Boolean(schema.items);
+/**
+ * Matcher for autocomplete fields
+ * Matches when format is "autocomplete" and autocomplete config with URL is provided
+ */
+export const autocompleteMatcher = (schema) => schema.format === 'autocomplete' && Boolean(schema.autocomplete?.url);

package/dist/form/full.d.ts

@@ -0,0 +1,56 @@
+/**
+ * FlowDrop Form Full Module
+ *
+ * Convenience module that imports and registers all form field types,
+ * including heavy editors (CodeMirror).
+ *
+ * This is equivalent to importing from the light form module and manually
+ * registering all editor types.
+ *
+ * @module form/full
+ *
+ * @example
+ * ```typescript
+ * // Single import that sets up everything
+ * import { SchemaForm, initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
+ *
+ * // Call once at app startup
+ * initializeAllFieldTypes();
+ *
+ * // Now all field types are available
+ * ```
+ */
+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 { FormCodeEditor, FormTemplateEditor } from './code.js';
+export { FormMarkdownEditor } from './markdown.js';
+export { registerCodeEditorField, registerTemplateEditorField, registerAllCodeEditors, isCodeEditorRegistered, isTemplateEditorRegistered, codeEditorFieldMatcher, templateEditorFieldMatcher } from './code.js';
+export { registerMarkdownEditorField, isMarkdownEditorRegistered, markdownEditorFieldMatcher } from './markdown.js';
+/**
+ * Initialize all form field types including heavy editors
+ *
+ * Call this once at application startup to enable all field types.
+ * This includes:
+ * - Code/JSON editor (CodeMirror)
+ * - Template editor (CodeMirror with Twig/Liquid syntax)
+ * - Markdown editor (CodeMirror 6)
+ *
+ * @example
+ * ```typescript
+ * import { initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
+ *
+ * // In your app's entry point
+ * initializeAllFieldTypes();
+ * ```
+ */
+export declare function initializeAllFieldTypes(): void;
+/**
+ * Check if all field types have been initialized
+ */
+export declare function areAllFieldTypesInitialized(): boolean;
+/**
+ * Reset initialization state (useful for testing)
+ */
+export declare function resetFieldTypeInitialization(): void;

package/dist/form/full.js

@@ -0,0 +1,80 @@
+/**
+ * FlowDrop Form Full Module
+ *
+ * Convenience module that imports and registers all form field types,
+ * including heavy editors (CodeMirror).
+ *
+ * This is equivalent to importing from the light form module and manually
+ * registering all editor types.
+ *
+ * @module form/full
+ *
+ * @example
+ * ```typescript
+ * // Single import that sets up everything
+ * import { SchemaForm, initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
+ *
+ * // Call once at app startup
+ * initializeAllFieldTypes();
+ *
+ * // Now all field types are available
+ * ```
+ */
+// Re-export everything from the light form module
+// Components
+export { SchemaForm, FormField, FormFieldFull, FormFieldWrapper, FormTextField, FormTextarea, FormNumberField, FormRangeField, FormToggle, FormSelect, FormCheckboxGroup, FormArray, FormFieldset, FormUISchemaRenderer } from './index.js';
+// 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';
+// Import registration functions
+import { registerCodeEditorField, registerTemplateEditorField } from './code.js';
+import { registerMarkdownEditorField } from './markdown.js';
+// Re-export heavy editor components for direct access
+export { FormCodeEditor, FormTemplateEditor } from './code.js';
+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:
+ * - Code/JSON editor (CodeMirror)
+ * - Template editor (CodeMirror with Twig/Liquid syntax)
+ * - Markdown editor (CodeMirror 6)
+ *
+ * @example
+ * ```typescript
+ * import { initializeAllFieldTypes } from "@flowdrop/flowdrop/form/full";
+ *
+ * // In your app's entry point
+ * initializeAllFieldTypes();
+ * ```
+ */
+export function initializeAllFieldTypes() {
+    if (allFieldTypesInitialized) {
+        return;
+    }
+    registerCodeEditorField();
+    registerTemplateEditorField();
+    registerMarkdownEditorField();
+    allFieldTypesInitialized = true;
+}
+/**
+ * Check if all field types have been initialized
+ */
+export function areAllFieldTypesInitialized() {
+    return allFieldTypesInitialized;
+}
+/**
+ * Reset initialization state (useful for testing)
+ */
+export function resetFieldTypeInitialization() {
+    allFieldTypesInitialized = false;
+}

package/dist/form/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * FlowDrop Form Module
+ *
+ * Provides SchemaForm and form field components for building dynamic forms
+ * from JSON Schema definitions. This is the "light" version that includes
+ * only basic field types (text, number, select, checkbox, etc.).
+ *
+ * For code editor support (CodeMirror), import from "@flowdrop/flowdrop/form/code"
+ * For markdown editor support (CodeMirror 6), import from "@flowdrop/flowdrop/form/markdown"
+ *
+ * @module form
+ *
+ * @example Basic usage (small bundle - ~20KB):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     name: { type: "string", title: "Name" },
+ *     age: { type: "number", title: "Age" }
+ *   }
+ * };
+ * ```
+ *
+ * @example Select field with labeled options (JSON Schema standard):
+ * ```typescript
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     status: {
+ *       type: "string",
+ *       title: "Status",
+ *       oneOf: [
+ *         { const: "draft", title: "Draft" },
+ *         { const: "published", title: "Published" },
+ *         { const: "archived", title: "Archived" }
+ *       ]
+ *     }
+ *   }
+ * };
+ * ```
+ *
+ * @example With code editor support (adds ~300KB):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * // Register code editor support before using
+ * registerCodeEditorField();
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     config: { type: "object", format: "json", title: "Configuration" }
+ *   }
+ * };
+ * ```
+ */
+export { default as SchemaForm } from '../components/SchemaForm.svelte';
+export { default as FormField } from '../components/form/FormFieldLight.svelte';
+export { default as FormFieldFull } from '../components/form/FormField.svelte';
+export { default as FormFieldWrapper } from '../components/form/FormFieldWrapper.svelte';
+export { default as FormTextField } from '../components/form/FormTextField.svelte';
+export { default as FormTextarea } from '../components/form/FormTextarea.svelte';
+export { default as FormNumberField } from '../components/form/FormNumberField.svelte';
+export { default as FormRangeField } from '../components/form/FormRangeField.svelte';
+export { default as FormToggle } from '../components/form/FormToggle.svelte';
+export { default as FormSelect } from '../components/form/FormSelect.svelte';
+export { default as FormCheckboxGroup } from '../components/form/FormCheckboxGroup.svelte';
+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 { 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 type { FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './fieldRegistry.js';

package/dist/form/index.js

@@ -0,0 +1,91 @@
+/**
+ * FlowDrop Form Module
+ *
+ * Provides SchemaForm and form field components for building dynamic forms
+ * from JSON Schema definitions. This is the "light" version that includes
+ * only basic field types (text, number, select, checkbox, etc.).
+ *
+ * For code editor support (CodeMirror), import from "@flowdrop/flowdrop/form/code"
+ * For markdown editor support (CodeMirror 6), import from "@flowdrop/flowdrop/form/markdown"
+ *
+ * @module form
+ *
+ * @example Basic usage (small bundle - ~20KB):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     name: { type: "string", title: "Name" },
+ *     age: { type: "number", title: "Age" }
+ *   }
+ * };
+ * ```
+ *
+ * @example Select field with labeled options (JSON Schema standard):
+ * ```typescript
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     status: {
+ *       type: "string",
+ *       title: "Status",
+ *       oneOf: [
+ *         { const: "draft", title: "Draft" },
+ *         { const: "published", title: "Published" },
+ *         { const: "archived", title: "Archived" }
+ *       ]
+ *     }
+ *   }
+ * };
+ * ```
+ *
+ * @example With code editor support (adds ~300KB):
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerCodeEditorField } from "@flowdrop/flowdrop/form/code";
+ *
+ * // Register code editor support before using
+ * registerCodeEditorField();
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     config: { type: "object", format: "json", title: "Configuration" }
+ *   }
+ * };
+ * ```
+ */
+// ============================================================================
+// Main Components
+// ============================================================================
+export { default as SchemaForm } from '../components/SchemaForm.svelte';
+// ============================================================================
+// Form Field Components (Light - no heavy dependencies)
+// ============================================================================
+// Use the light version of FormField that uses the registry for heavy editors
+export { default as FormField } from '../components/form/FormFieldLight.svelte';
+// Also export the original (full) version for users who want everything
+export { default as FormFieldFull } from '../components/form/FormField.svelte';
+export { default as FormFieldWrapper } from '../components/form/FormFieldWrapper.svelte';
+export { default as FormTextField } from '../components/form/FormTextField.svelte';
+export { default as FormTextarea } from '../components/form/FormTextarea.svelte';
+export { default as FormNumberField } from '../components/form/FormNumberField.svelte';
+export { default as FormRangeField } from '../components/form/FormRangeField.svelte';
+export { default as FormToggle } from '../components/form/FormToggle.svelte';
+export { default as FormSelect } from '../components/form/FormSelect.svelte';
+export { default as FormCheckboxGroup } from '../components/form/FormCheckboxGroup.svelte';
+export { default as FormArray } from '../components/form/FormArray.svelte';
+// UISchema rendering components
+export { default as FormFieldset } from '../components/form/FormFieldset.svelte';
+export { default as FormUISchemaRenderer } from '../components/form/FormUISchemaRenderer.svelte';
+export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from '../components/form/types.js';
+// ============================================================================
+// Field Registry (for dynamic field registration)
+// ============================================================================
+export { 
+// Registry singleton
+fieldComponentRegistry, 
+// Built-in matchers for custom components
+hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';

package/dist/form/markdown.d.ts

@@ -0,0 +1,69 @@
+/**
+ * FlowDrop Form Markdown Editor Module
+ *
+ * Adds CodeMirror 6-based markdown editor support to SchemaForm.
+ * Uses @codemirror/lang-markdown for syntax highlighting and marked for preview.
+ *
+ * @module form/markdown
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
+ *
+ * // Register markdown editor support (call once at app startup)
+ * registerMarkdownEditorField();
+ *
+ * // Now SchemaForm will render markdown editors for format: "markdown"
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     content: { type: "string", format: "markdown", title: "Content" }
+ *   }
+ * };
+ * ```
+ */
+import type { FieldComponent } 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';
+/**
+ * Matcher for markdown editor fields
+ * Matches: format "markdown"
+ */
+export declare function markdownEditorFieldMatcher(schema: FieldSchema): boolean;
+/**
+ * Register the markdown editor field component
+ *
+ * Call this function once at application startup to enable
+ * markdown editor fields in SchemaForm.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
+ *
+ * registerMarkdownEditorField();
+ * ```
+ */
+export declare function registerMarkdownEditorField(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 priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * import { registerMarkdownEditorFieldWithComponent, FormMarkdownEditor } from "@flowdrop/flowdrop/form/markdown";
+ * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * ```
+ */
+export declare function registerMarkdownEditorFieldWithComponent(component: FieldComponent, priority?: number): void;
+/**
+ * Check if markdown editor field is registered
+ */
+export declare function isMarkdownEditorRegistered(): boolean;

package/dist/form/markdown.js

@@ -0,0 +1,103 @@
+/**
+ * FlowDrop Form Markdown Editor Module
+ *
+ * Adds CodeMirror 6-based markdown editor support to SchemaForm.
+ * Uses @codemirror/lang-markdown for syntax highlighting and marked for preview.
+ *
+ * @module form/markdown
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@flowdrop/flowdrop/form";
+ * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
+ *
+ * // Register markdown editor support (call once at app startup)
+ * registerMarkdownEditorField();
+ *
+ * // Now SchemaForm will render markdown editors for format: "markdown"
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     content: { type: "string", format: "markdown", title: "Content" }
+ *   }
+ * };
+ * ```
+ */
+import { fieldComponentRegistry } from './fieldRegistry.js';
+// Re-export the component for direct usage if needed
+export { default as FormMarkdownEditor } from '../components/form/FormMarkdownEditor.svelte';
+/**
+ * Matcher for markdown editor fields
+ * Matches: format "markdown"
+ */
+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 priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerMarkdownEditorField } from "@flowdrop/flowdrop/form/markdown";
+ *
+ * registerMarkdownEditorField();
+ * ```
+ */
+export function registerMarkdownEditorField(priority = 100) {
+    if (markdownEditorRegistered) {
+        return;
+    }
+    // Dynamic import to ensure proper code splitting
+    import('../components/form/FormMarkdownEditor.svelte').then((module) => {
+        fieldComponentRegistry.register('markdown-editor', {
+            component: module.default,
+            matcher: markdownEditorFieldMatcher,
+            priority
+        });
+        markdownEditorRegistered = true;
+    });
+}
+/**
+ * Synchronously register markdown editor field using the imported component
+ *
+ * Use this when you've already imported the component and want immediate registration.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * import { registerMarkdownEditorFieldWithComponent, FormMarkdownEditor } from "@flowdrop/flowdrop/form/markdown";
+ * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * ```
+ */
+export function registerMarkdownEditorFieldWithComponent(component, priority = 100) {
+    if (markdownEditorRegistered) {
+        return;
+    }
+    fieldComponentRegistry.register('markdown-editor', {
+        component,
+        matcher: markdownEditorFieldMatcher,
+        priority
+    });
+    markdownEditorRegistered = true;
+}
+/**
+ * Check if markdown editor field is registered
+ */
+export function isMarkdownEditorRegistered() {
+    return markdownEditorRegistered;
+}

package/dist/helpers/nodeLayoutHelper.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Node layout helper
+ * Utilities for node dimensions and port positions aligned to a 10px grid.
+ * Used so edge connection points (handle centers) land on multiples of 10.
+ */
+/**
+ * Y position (in px) for the center of a port handle in a list-based node
+ * (WorkflowNode, GatewayNode). Layout: header 60px, then section title row 20px,
+ * then port rows 20px each. First port center = 90px, then 110, 130, … (multiples of 10).
+ *
+ * @param portIndex - Zero-based index in the combined list (section title counts as row 0; first port is index 0)
+ * @returns Y coordinate in px for the handle center (use with transform: translateY(-50%))
+ */
+export declare function getPortCenterY(portIndex: number): number;

package/dist/helpers/nodeLayoutHelper.js

@@ -0,0 +1,19 @@
+/**
+ * Node layout helper
+ * Utilities for node dimensions and port positions aligned to a 10px grid.
+ * Used so edge connection points (handle centers) land on multiples of 10.
+ */
+/**
+ * Y position (in px) for the center of a port handle in a list-based node
+ * (WorkflowNode, GatewayNode). Layout: header 60px, then section title row 20px,
+ * then port rows 20px each. First port center = 90px, then 110, 130, … (multiples of 10).
+ *
+ * @param portIndex - Zero-based index in the combined list (section title counts as row 0; first port is index 0)
+ * @returns Y coordinate in px for the handle center (use with transform: translateY(-50%))
+ */
+export function getPortCenterY(portIndex) {
+    const headerHeight = 60;
+    const sectionTitleHeight = 20;
+    const rowHeight = 20;
+    return headerHeight + sectionTitleHeight + (portIndex + 0.5) * rowHeight;
+}