@d34dman/flowdrop 0.0.28 → 0.0.30

package/dist/form/fieldRegistry.d.ts

@@ -0,0 +1,163 @@
+/**
+ * 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
+ *
+ * @module form/fieldRegistry
+ *
+ * @example Basic usage with light fields only (no codemirror/easymde):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * // Uses only basic fields - small bundle size
+ * ```
+ *
+ * @example Adding code editor support:
+ * ```typescript
+ * import { SchemaForm, registerFieldComponent } from "@d34dman/flowdrop/form";
+ * import { FormCodeEditor, codeEditorFieldMatcher } from "@d34dman/flowdrop/form/code";
+ *
+ * registerFieldComponent("code-editor", FormCodeEditor, codeEditorFieldMatcher);
+ * ```
+ */
+import type { Component } from "svelte";
+import type { FieldSchema } from "../components/form/types.js";
+/**
+ * Base field component props that all registered field components should accept.
+ * Components may have additional specific props.
+ */
+export interface FieldComponentProps {
+    /** Field identifier */
+    id: string;
+    /** Current field value */
+    value: unknown;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Change callback */
+    onChange: (value: unknown) => void;
+    /** Additional schema-derived props */
+    [key: string]: unknown;
+}
+/**
+ * Function type for determining if a field schema should use a specific component
+ */
+export type FieldMatcher = (schema: FieldSchema) => boolean;
+/**
+ * Generic component type that accepts any props
+ * This is needed because different field components have different prop requirements
+ */
+export type FieldComponent = Component<any, any, any>;
+/**
+ * Registration entry for a field component
+ */
+export interface FieldComponentRegistration {
+    /** The Svelte component to render */
+    component: FieldComponent;
+    /** Function to determine if this component should handle a given schema */
+    matcher: FieldMatcher;
+    /** Priority for matching (higher = checked first) */
+    priority: number;
+}
+/**
+ * Register a field component for a specific field type
+ *
+ * @param type - Unique identifier for this field type
+ * @param component - Svelte component to render for matching fields
+ * @param matcher - Function to determine if a schema matches this type
+ * @param priority - Priority for matching (default: 0, higher = checked first)
+ *
+ * @example
+ * ```typescript
+ * registerFieldComponent(
+ *   "code-editor",
+ *   FormCodeEditor,
+ *   (schema) => schema.format === "json" || schema.format === "code",
+ *   100 // High priority to override default
+ * );
+ * ```
+ */
+export declare function registerFieldComponent(type: string, component: FieldComponent, matcher: FieldMatcher, priority?: number): void;
+/**
+ * Unregister a field component
+ *
+ * @param type - The field type to unregister
+ * @returns true if the component was registered and removed
+ */
+export declare function unregisterFieldComponent(type: string): boolean;
+/**
+ * Get all registered field types
+ *
+ * @returns Array of registered field type identifiers
+ */
+export declare function getRegisteredFieldTypes(): string[];
+/**
+ * Check if a field type is registered
+ *
+ * @param type - Field type to check
+ * @returns true if the type is registered
+ */
+export declare function isFieldTypeRegistered(type: string): boolean;
+/**
+ * Resolve which component should render a given field schema
+ * Checks registered matchers in priority order
+ *
+ * @param schema - The field schema to resolve
+ * @returns The matching registration or null if no match
+ */
+export declare function resolveFieldComponent(schema: FieldSchema): FieldComponentRegistration | null;
+/**
+ * Clear all registered field components
+ * Useful for testing or reset scenarios
+ */
+export declare function clearFieldRegistry(): void;
+/**
+ * Get the registry size
+ * @returns Number of registered field components
+ */
+export declare function getFieldRegistrySize(): number;
+/**
+ * Matcher for hidden fields (should not render)
+ */
+export declare const hiddenFieldMatcher: FieldMatcher;
+/**
+ * Matcher for checkbox group fields (enum with multiple)
+ */
+export declare const checkboxGroupMatcher: FieldMatcher;
+/**
+ * Matcher for enum select fields
+ */
+export declare const enumSelectMatcher: FieldMatcher;
+/**
+ * Matcher for multiline textarea fields
+ */
+export declare const textareaMatcher: FieldMatcher;
+/**
+ * Matcher for range slider fields
+ */
+export declare const rangeMatcher: FieldMatcher;
+/**
+ * Matcher for string text fields
+ */
+export declare const textFieldMatcher: FieldMatcher;
+/**
+ * Matcher for number fields
+ */
+export declare const numberFieldMatcher: FieldMatcher;
+/**
+ * Matcher for boolean toggle fields
+ */
+export declare const toggleMatcher: FieldMatcher;
+/**
+ * Matcher for select fields with options
+ */
+export declare const selectOptionsMatcher: FieldMatcher;
+/**
+ * Matcher for array fields
+ */
+export declare const arrayMatcher: FieldMatcher;

package/dist/form/fieldRegistry.js

@@ -0,0 +1,175 @@
+/**
+ * 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
+ *
+ * @module form/fieldRegistry
+ *
+ * @example Basic usage with light fields only (no codemirror/easymde):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * // Uses only basic fields - small bundle size
+ * ```
+ *
+ * @example Adding code editor support:
+ * ```typescript
+ * import { SchemaForm, registerFieldComponent } from "@d34dman/flowdrop/form";
+ * import { FormCodeEditor, codeEditorFieldMatcher } from "@d34dman/flowdrop/form/code";
+ *
+ * registerFieldComponent("code-editor", FormCodeEditor, codeEditorFieldMatcher);
+ * ```
+ */
+/**
+ * Field component registry
+ * Stores registered field components with their matchers
+ */
+const fieldRegistry = new Map();
+/**
+ * Ordered list of field type keys by priority (highest first)
+ * Cached and invalidated when registry changes
+ */
+let orderedKeys = null;
+/**
+ * Register a field component for a specific field type
+ *
+ * @param type - Unique identifier for this field type
+ * @param component - Svelte component to render for matching fields
+ * @param matcher - Function to determine if a schema matches this type
+ * @param priority - Priority for matching (default: 0, higher = checked first)
+ *
+ * @example
+ * ```typescript
+ * registerFieldComponent(
+ *   "code-editor",
+ *   FormCodeEditor,
+ *   (schema) => schema.format === "json" || schema.format === "code",
+ *   100 // High priority to override default
+ * );
+ * ```
+ */
+export function registerFieldComponent(type, component, matcher, priority = 0) {
+    fieldRegistry.set(type, { component, matcher, priority });
+    orderedKeys = null; // Invalidate cache
+}
+/**
+ * Unregister a field component
+ *
+ * @param type - The field type to unregister
+ * @returns true if the component was registered and removed
+ */
+export function unregisterFieldComponent(type) {
+    const removed = fieldRegistry.delete(type);
+    if (removed) {
+        orderedKeys = null; // Invalidate cache
+    }
+    return removed;
+}
+/**
+ * Get all registered field types
+ *
+ * @returns Array of registered field type identifiers
+ */
+export function getRegisteredFieldTypes() {
+    return Array.from(fieldRegistry.keys());
+}
+/**
+ * Check if a field type is registered
+ *
+ * @param type - Field type to check
+ * @returns true if the type is registered
+ */
+export function isFieldTypeRegistered(type) {
+    return fieldRegistry.has(type);
+}
+/**
+ * Get ordered keys by priority (cached)
+ */
+function getOrderedKeys() {
+    if (orderedKeys === null) {
+        orderedKeys = Array.from(fieldRegistry.entries())
+            .sort((a, b) => b[1].priority - a[1].priority)
+            .map(([key]) => key);
+    }
+    return orderedKeys;
+}
+/**
+ * Resolve which component should render a given field schema
+ * Checks registered matchers in priority order
+ *
+ * @param schema - The field schema to resolve
+ * @returns The matching registration or null if no match
+ */
+export function resolveFieldComponent(schema) {
+    const keys = getOrderedKeys();
+    for (const key of keys) {
+        const registration = fieldRegistry.get(key);
+        if (registration && registration.matcher(schema)) {
+            return registration;
+        }
+    }
+    return null;
+}
+/**
+ * Clear all registered field components
+ * Useful for testing or reset scenarios
+ */
+export function clearFieldRegistry() {
+    fieldRegistry.clear();
+    orderedKeys = null;
+}
+/**
+ * Get the registry size
+ * @returns Number of registered field components
+ */
+export function getFieldRegistrySize() {
+    return fieldRegistry.size;
+}
+// ============================================================================
+// 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 options
+ */
+export const selectOptionsMatcher = (schema) => schema.type === "select" || Boolean(schema.options);
+/**
+ * Matcher for array fields
+ */
+export const arrayMatcher = (schema) => schema.type === "array" && Boolean(schema.items);

package/dist/form/full.d.ts

@@ -0,0 +1,53 @@
+/**
+ * FlowDrop Form Full Module
+ *
+ * Convenience module that imports and registers all form field types,
+ * including heavy editors (CodeMirror, EasyMDE).
+ *
+ * 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 "@d34dman/flowdrop/form/full";
+ *
+ * // Call once at app startup
+ * initializeAllFieldTypes();
+ *
+ * // Now all field types are available
+ * ```
+ */
+export * 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 (EasyMDE)
+ *
+ * @example
+ * ```typescript
+ * import { initializeAllFieldTypes } from "@d34dman/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,75 @@
+/**
+ * FlowDrop Form Full Module
+ *
+ * Convenience module that imports and registers all form field types,
+ * including heavy editors (CodeMirror, EasyMDE).
+ *
+ * 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 "@d34dman/flowdrop/form/full";
+ *
+ * // Call once at app startup
+ * initializeAllFieldTypes();
+ *
+ * // Now all field types are available
+ * ```
+ */
+// Re-export everything from the light form module
+export * 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 (EasyMDE)
+ *
+ * @example
+ * ```typescript
+ * import { initializeAllFieldTypes } from "@d34dman/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,57 @@
+/**
+ * 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 "@d34dman/flowdrop/form/code"
+ * For markdown editor support (EasyMDE), import from "@d34dman/flowdrop/form/markdown"
+ *
+ * @module form
+ *
+ * @example Basic usage (small bundle - ~20KB):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     name: { type: "string", title: "Name" },
+ *     age: { type: "number", title: "Age" }
+ *   }
+ * };
+ * ```
+ *
+ * @example With code editor support (adds ~300KB):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * import { registerCodeEditorField } from "@d34dman/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 type { FieldSchema, FieldType, FieldFormat, FieldOption, SchemaFormProps, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, FormFieldFactoryProps, FormFieldWrapperProps } from "../components/form/types.js";
+export { isFieldOptionArray, normalizeOptions } from "../components/form/types.js";
+export { registerFieldComponent, unregisterFieldComponent, resolveFieldComponent, getRegisteredFieldTypes, isFieldTypeRegistered, clearFieldRegistry, getFieldRegistrySize, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from "./fieldRegistry.js";
+export type { FieldComponentProps, FieldMatcher, FieldComponent, FieldComponentRegistration } from "./fieldRegistry.js";

package/dist/form/index.js

@@ -0,0 +1,68 @@
+/**
+ * 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 "@d34dman/flowdrop/form/code"
+ * For markdown editor support (EasyMDE), import from "@d34dman/flowdrop/form/markdown"
+ *
+ * @module form
+ *
+ * @example Basic usage (small bundle - ~20KB):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ *
+ * const schema = {
+ *   type: "object",
+ *   properties: {
+ *     name: { type: "string", title: "Name" },
+ *     age: { type: "number", title: "Age" }
+ *   }
+ * };
+ * ```
+ *
+ * @example With code editor support (adds ~300KB):
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * import { registerCodeEditorField } from "@d34dman/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";
+export { isFieldOptionArray, normalizeOptions } from "../components/form/types.js";
+// ============================================================================
+// Field Registry (for dynamic field registration)
+// ============================================================================
+export { registerFieldComponent, unregisterFieldComponent, resolveFieldComponent, getRegisteredFieldTypes, isFieldTypeRegistered, clearFieldRegistry, getFieldRegistrySize, 
+// 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,68 @@
+/**
+ * FlowDrop Form Markdown Editor Module
+ *
+ * Adds EasyMDE-based markdown editor support to SchemaForm.
+ * This module bundles EasyMDE dependencies (~200KB).
+ *
+ * @module form/markdown
+ *
+ * @example
+ * ```typescript
+ * import { SchemaForm } from "@d34dman/flowdrop/form";
+ * import { registerMarkdownEditorField } from "@d34dman/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 { 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. This loads EasyMDE dependencies.
+ *
+ * @param priority - Priority for field matching (default: 100)
+ *
+ * @example
+ * ```typescript
+ * // In your app's entry point:
+ * import { registerMarkdownEditorField } from "@d34dman/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 "@d34dman/flowdrop/form/markdown";
+ * registerMarkdownEditorFieldWithComponent(FormMarkdownEditor);
+ * ```
+ */
+export declare function registerMarkdownEditorFieldWithComponent(component: any, priority?: number): void;
+/**
+ * Check if markdown editor field is registered
+ */
+export declare function isMarkdownEditorRegistered(): boolean;