@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/components/form/FormTemplateEditor.svelte

@@ -343,25 +343,25 @@
 	}
 
 	.form-template-editor__container {
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
 		overflow: hidden;
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
 	}
 
 	.form-template-editor__container:hover {
-		border-color: var(--color-ref-gray-300, #d1d5db);
-		background-color: #ffffff;
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.form-template-editor__container:focus-within {
-		border-color: var(--color-ref-purple-500, #a855f7);
-		background-color: #ffffff;
+		border-color: var(--fd-accent);
+		background-color: var(--fd-background);
 		box-shadow:
 			0 0 0 3px rgba(168, 85, 247, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 
 	/* Dark theme overrides */
@@ -376,13 +376,13 @@
 
 	/* CodeMirror styling overrides */
 	.form-template-editor__container :global(.cm-editor) {
-		border-radius: 0.5rem;
+		border-radius: var(--fd-radius-lg);
 	}
 
 	.form-template-editor__container :global(.cm-gutters) {
-		background-color: var(--color-ref-gray-100, #f3f4f6);
-		border-right: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem 0 0 0.5rem;
+		background-color: var(--fd-subtle);
+		border-right: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg) 0 0 var(--fd-radius-lg);
 	}
 
 	.form-template-editor__container--dark :global(.cm-gutters) {
@@ -394,16 +394,16 @@
 	.form-template-editor__hints {
 		margin-top: 0.625rem;
 		padding: 0.625rem;
-		background-color: var(--color-ref-purple-50, #faf5ff);
-		border: 1px solid var(--color-ref-purple-200, #e9d5ff);
-		border-radius: 0.375rem;
+		background-color: var(--fd-accent-muted);
+		border: 1px solid var(--fd-accent);
+		border-radius: var(--fd-radius-md);
 	}
 
 	.form-template-editor__hints-label {
 		display: block;
 		font-size: 0.6875rem;
 		font-weight: 500;
-		color: var(--color-ref-purple-700, #7e22ce);
+		color: var(--fd-accent-hover);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		margin-bottom: 0.375rem;
@@ -417,16 +417,16 @@
 
 	.form-template-editor__hint-btn {
 		padding: 0.25rem 0.5rem;
-		background-color: var(--color-ref-purple-100, #f3e8ff);
-		border: 1px solid var(--color-ref-purple-300, #d8b4fe);
-		border-radius: 0.25rem;
+		background-color: var(--fd-accent-muted);
+		border: 1px solid var(--fd-accent);
+		border-radius: var(--fd-radius-sm);
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.form-template-editor__hint-btn:hover {
-		background-color: var(--color-ref-purple-200, #e9d5ff);
-		border-color: var(--color-ref-purple-400, #c084fc);
+		background-color: var(--fd-accent);
+		border-color: var(--fd-accent-hover);
 	}
 
 	.form-template-editor__hint-btn:active {
@@ -436,23 +436,23 @@
 	.form-template-editor__hint-btn code {
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-size: 0.6875rem;
-		color: var(--color-ref-purple-800, #6b21a8);
+		color: var(--fd-accent-hover);
 	}
 
 	/* Placeholder hint */
 	.form-template-editor__placeholder {
 		margin-top: 0.5rem;
 		padding: 0.5rem 0.75rem;
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		border: 1px dashed var(--color-ref-gray-300, #d1d5db);
-		border-radius: 0.375rem;
+		background-color: var(--fd-muted);
+		border: 1px dashed var(--fd-border-strong);
+		border-radius: var(--fd-radius-md);
 	}
 
 	.form-template-editor__placeholder-label {
 		display: block;
 		font-size: 0.6875rem;
 		font-weight: 500;
-		color: var(--color-ref-gray-500, #6b7280);
+		color: var(--fd-muted-foreground);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		margin-bottom: 0.25rem;
@@ -461,8 +461,8 @@
 	.form-template-editor__placeholder-example {
 		display: block;
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: 0.75rem;
-		color: var(--color-ref-gray-700, #374151);
+		font-size: var(--fd-text-xs);
+		color: var(--fd-foreground);
 		word-break: break-all;
 	}
 
@@ -473,7 +473,7 @@
 		gap: 0.375rem;
 		margin-top: 0.5rem;
 		font-size: 0.6875rem;
-		color: var(--color-ref-gray-500, #6b7280);
+		color: var(--fd-muted-foreground);
 	}
 
 	.form-template-editor__help-icon {
@@ -485,8 +485,8 @@
 
 	.form-template-editor__help code {
 		padding: 0.0625rem 0.25rem;
-		background-color: var(--color-ref-gray-100, #f3f4f6);
-		border-radius: 0.1875rem;
+		background-color: var(--fd-subtle);
+		border-radius: var(--fd-radius-sm);
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-size: 0.625rem;
 	}

package/dist/components/form/FormTextField.svelte

@@ -57,31 +57,31 @@
 	.form-text-field {
 		width: 100%;
 		padding: 0.625rem 0.875rem;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-family: inherit;
-		color: var(--color-ref-gray-900, #111827);
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
 	}
 
 	.form-text-field::placeholder {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 	}
 
 	.form-text-field:hover {
-		border-color: var(--color-ref-gray-300, #d1d5db);
-		background-color: #ffffff;
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.form-text-field:focus {
 		outline: none;
-		border-color: var(--color-ref-blue-500, #3b82f6);
-		background-color: #ffffff;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
 		box-shadow:
 			0 0 0 3px rgba(59, 130, 246, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 </style>

package/dist/components/form/FormTextarea.svelte

@@ -60,34 +60,34 @@
 	.form-textarea {
 		width: 100%;
 		padding: 0.625rem 0.875rem;
-		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-family: inherit;
-		color: var(--color-ref-gray-900, #111827);
-		background-color: var(--color-ref-gray-50, #f9fafb);
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
 		resize: vertical;
 		min-height: 5rem;
 		line-height: 1.5;
 	}
 
 	.form-textarea::placeholder {
-		color: var(--color-ref-gray-400, #9ca3af);
+		color: var(--fd-muted-foreground);
 	}
 
 	.form-textarea:hover {
-		border-color: var(--color-ref-gray-300, #d1d5db);
-		background-color: #ffffff;
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
 	}
 
 	.form-textarea:focus {
 		outline: none;
-		border-color: var(--color-ref-blue-500, #3b82f6);
-		background-color: #ffffff;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
 		box-shadow:
 			0 0 0 3px rgba(59, 130, 246, 0.12),
-			0 1px 2px rgba(0, 0, 0, 0.04);
+			var(--fd-shadow-sm);
 	}
 </style>

package/dist/components/form/FormToggle.svelte

@@ -79,9 +79,9 @@
 		position: relative;
 		width: 2.75rem;
 		height: 1.5rem;
-		background-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: var(--fd-border-strong);
 		border-radius: 0.75rem;
-		transition: background-color 0.2s;
+		transition: background-color var(--fd-transition-normal);
 		flex-shrink: 0;
 	}
 
@@ -91,14 +91,14 @@
 		left: 0.125rem;
 		width: 1.25rem;
 		height: 1.25rem;
-		background-color: #ffffff;
+		background-color: var(--fd-background);
 		border-radius: 50%;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		box-shadow: var(--fd-shadow-sm);
 		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	.form-toggle__input:checked + .form-toggle__track {
-		background-color: var(--color-ref-blue-500, #3b82f6);
+		background-color: var(--fd-primary);
 	}
 
 	.form-toggle__input:checked + .form-toggle__track .form-toggle__thumb {
@@ -110,13 +110,13 @@
 	}
 
 	.form-toggle__label {
-		font-size: 0.875rem;
-		color: var(--color-ref-gray-600, #4b5563);
+		font-size: var(--fd-text-sm);
+		color: var(--fd-muted-foreground);
 		font-weight: 500;
 		min-width: 4.5rem;
 	}
 
 	.form-toggle__input:checked ~ .form-toggle__label {
-		color: var(--color-ref-blue-600, #2563eb);
+		color: var(--fd-primary-hover);
 	}
 </style>

package/dist/components/form/index.d.ts

@@ -43,3 +43,4 @@ export { default as FormArray } from './FormArray.svelte';
 export { default as FormCodeEditor } from './FormCodeEditor.svelte';
 export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
 export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';

package/dist/components/form/index.js

@@ -47,3 +47,4 @@ export { default as FormArray } from './FormArray.svelte';
 export { default as FormCodeEditor } from './FormCodeEditor.svelte';
 export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
 export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';

package/dist/components/form/types.d.ts

@@ -5,11 +5,16 @@
  * These types provide a foundation for dynamic form rendering based on JSON Schema
  * and support extensibility for complex field types like arrays and objects.
  */
+import type { AutocompleteConfig } from '../../types/index.js';
 /**
  * Supported field types for form rendering
- * Can be extended to support complex types like 'array' and 'object'
+ * Aligned with JSON Schema specification (draft-07)
+ *
+ * Note: 'select' type was removed in favor of using standard JSON Schema patterns:
+ * - Use `enum` for simple value lists
+ * - Use `oneOf` with `const`/`title` for labeled options
  */
-export type FieldType = 'string' | 'number' | 'integer' | 'boolean' | 'select' | 'array' | 'object';
+export type FieldType = 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
 /**
  * Field format for specialized rendering
  * - multiline: Renders as textarea
@@ -19,10 +24,25 @@ export type FieldType = 'string' | 'number' | 'integer' | 'boolean' | 'select' |
  * - code: Alias for json, renders as CodeMirror editor
  * - markdown: Renders as SimpleMDE Markdown editor
  * - template: Renders as CodeMirror editor with Twig/Liquid syntax highlighting
+ * - autocomplete: Renders as text input with autocomplete suggestions from callback URL
  */
-export type FieldFormat = 'multiline' | 'hidden' | 'range' | 'json' | 'code' | 'markdown' | 'template' | string;
+export type FieldFormat = 'multiline' | 'hidden' | 'range' | 'json' | 'code' | 'markdown' | 'template' | 'autocomplete' | string;
 /**
  * Option type for select and checkbox group fields
+ *
+ * @deprecated Use JSON Schema `oneOf` with `const`/`title` instead for labeled options.
+ * This type is kept for backwards compatibility but will be removed in a future version.
+ *
+ * @example Standard JSON Schema approach:
+ * ```json
+ * {
+ *   "type": "string",
+ *   "oneOf": [
+ *     { "const": "draft", "title": "Draft" },
+ *     { "const": "published", "title": "Published" }
+ *   ]
+ * }
+ * ```
  */
 export interface FieldOption {
     /** The value stored when this option is selected */
@@ -30,6 +50,29 @@ export interface FieldOption {
     /** The display label for this option */
     label: string;
 }
+/**
+ * JSON Schema oneOf item for labeled options
+ * This is the standard JSON Schema way to define labeled select options
+ *
+ * @example
+ * ```json
+ * {
+ *   "type": "string",
+ *   "oneOf": [
+ *     { "const": "draft", "title": "Draft" },
+ *     { "const": "published", "title": "Published" }
+ *   ]
+ * }
+ * ```
+ */
+export interface OneOfItem {
+    /** The constant value for this option (JSON Schema `const` keyword) */
+    const: string | number | boolean;
+    /** Human-readable label for this option (JSON Schema `title` keyword) */
+    title?: string;
+    /** Optional description for this option */
+    description?: string;
+}
 /**
  * Base properties shared by all form fields
  */
@@ -184,9 +227,33 @@ export interface TemplateEditorFieldProps extends BaseFieldProps {
     /** Callback when value changes */
     onChange: (value: string) => void;
 }
+/**
+ * Properties for autocomplete fields
+ * Fetches suggestions from a callback URL with support for debouncing and keyboard navigation
+ */
+export interface AutocompleteFieldProps extends BaseFieldProps {
+    /** Current value (single string or array of strings for multiple selection) */
+    value: string | string[];
+    /** Autocomplete configuration from schema */
+    autocomplete: AutocompleteConfig;
+    /** Base URL for resolving relative callback URLs */
+    baseUrl?: string;
+    /** Callback when value changes */
+    onChange: (value: string | string[]) => void;
+}
+/**
+ * Autocomplete configuration imported from main types
+ * Re-exported here for convenience
+ */
+export type { AutocompleteConfig } from '../../types/index.js';
 /**
  * Field schema definition derived from JSON Schema property
  * Used to determine which field component to render
+ *
+ * FlowDrop follows JSON Schema draft-07 specification for field definitions.
+ * For select/dropdown fields, use standard JSON Schema patterns:
+ * - `enum` for simple value lists (no labels)
+ * - `oneOf` with `const`/`title` for labeled options
  */
 export interface FieldSchema {
     /** The field type from JSON Schema */
@@ -197,13 +264,33 @@ export interface FieldSchema {
     description?: string;
     /** Default value for the field */
     default?: unknown;
-    /** Enum values for select/checkbox fields */
+    /** Enum values for select/checkbox fields (simple values without labels) */
     enum?: unknown[];
-    /** Whether multiple values can be selected */
+    /**
+     * JSON Schema oneOf for labeled options (standard approach)
+     * Use this instead of the deprecated `options` property
+     *
+     * @example
+     * ```json
+     * {
+     *   "type": "string",
+     *   "oneOf": [
+     *     { "const": "draft", "title": "Draft" },
+     *     { "const": "published", "title": "Published" }
+     *   ]
+     * }
+     * ```
+     */
+    oneOf?: OneOfItem[];
+    /** Whether multiple values can be selected (for enum/oneOf) */
     multiple?: boolean;
     /** Format hint for specialized rendering */
     format?: FieldFormat;
-    /** Options for select type fields (alternative to enum) */
+    /**
+     * Options for select type fields
+     * @deprecated Use JSON Schema `oneOf` with `const`/`title` instead.
+     * This property is kept for backwards compatibility but will be removed in a future version.
+     */
     options?: FieldOption[];
     /** Placeholder text */
     placeholder?: string;
@@ -229,6 +316,8 @@ export interface FieldSchema {
     properties?: Record<string, FieldSchema>;
     /** Required properties for object fields (future use) */
     required?: string[];
+    /** Autocomplete configuration for fetching suggestions from callback URL */
+    autocomplete?: AutocompleteConfig;
     /** Allow additional properties not defined by the schema */
     [key: string]: unknown;
 }
@@ -270,11 +359,37 @@ export interface FormFieldWrapperProps {
  * Type guard to check if options are FieldOption objects
  */
 export declare function isFieldOptionArray(options: FieldOption[] | string[]): options is FieldOption[];
+/**
+ * Type guard to check if items are OneOfItem objects (JSON Schema oneOf pattern)
+ */
+export declare function isOneOfArray(items: unknown[]): items is OneOfItem[];
+/**
+ * Convert JSON Schema oneOf items to FieldOption format
+ * This bridges the standard oneOf pattern to the internal FieldOption structure
+ *
+ * @param oneOfItems - Array of JSON Schema oneOf items with const/title
+ * @returns Array of FieldOption objects
+ */
+export declare function oneOfToOptions(oneOfItems: OneOfItem[]): FieldOption[];
 /**
  * Normalize options to FieldOption format
- * Converts string arrays to FieldOption arrays for consistent handling
+ * Handles multiple input formats for consistent internal handling:
+ * - JSON Schema oneOf items (standard) -> converted to FieldOption
+ * - FieldOption array (legacy) -> passed through
+ * - String array -> converted to FieldOption
+ *
+ * @param options - Options in various formats
+ * @returns Normalized FieldOption array
+ */
+export declare function normalizeOptions(options: FieldOption[] | string[] | OneOfItem[] | unknown[]): FieldOption[];
+/**
+ * Get options from a schema, handling both oneOf (standard) and options (legacy) patterns
+ * Prefers oneOf if both are present
+ *
+ * @param schema - Field schema that may contain oneOf or options
+ * @returns Normalized FieldOption array
  */
-export declare function normalizeOptions(options: FieldOption[] | string[] | unknown[]): FieldOption[];
+export declare function getSchemaOptions(schema: FieldSchema): FieldOption[];
 /**
  * Props interface for the SchemaForm component
  *
@@ -370,4 +485,14 @@ export interface SchemaFormProps {
      * Use for additional styling customization.
      */
     class?: string;
+    /**
+     * Authentication provider for autocomplete fields.
+     * Used to add authentication headers when fetching suggestions from callback URLs.
+     */
+    authProvider?: import('../../types/index.js').AuthProvider;
+    /**
+     * Base URL for resolving relative autocomplete callback URLs.
+     * @default ""
+     */
+    baseUrl?: string;
 }

package/dist/components/form/types.js

@@ -11,19 +11,68 @@
 export function isFieldOptionArray(options) {
     return options.length > 0 && typeof options[0] === 'object' && 'value' in options[0];
 }
+/**
+ * Type guard to check if items are OneOfItem objects (JSON Schema oneOf pattern)
+ */
+export function isOneOfArray(items) {
+    return items.length > 0 && typeof items[0] === 'object' && items[0] !== null && 'const' in items[0];
+}
+/**
+ * Convert JSON Schema oneOf items to FieldOption format
+ * This bridges the standard oneOf pattern to the internal FieldOption structure
+ *
+ * @param oneOfItems - Array of JSON Schema oneOf items with const/title
+ * @returns Array of FieldOption objects
+ */
+export function oneOfToOptions(oneOfItems) {
+    return oneOfItems.map((item) => ({
+        value: String(item.const),
+        label: item.title ?? String(item.const)
+    }));
+}
 /**
  * Normalize options to FieldOption format
- * Converts string arrays to FieldOption arrays for consistent handling
+ * Handles multiple input formats for consistent internal handling:
+ * - JSON Schema oneOf items (standard) -> converted to FieldOption
+ * - FieldOption array (legacy) -> passed through
+ * - String array -> converted to FieldOption
+ *
+ * @param options - Options in various formats
+ * @returns Normalized FieldOption array
  */
 export function normalizeOptions(options) {
     if (!options || options.length === 0) {
         return [];
     }
+    // Handle JSON Schema oneOf pattern (standard)
+    if (isOneOfArray(options)) {
+        return oneOfToOptions(options);
+    }
+    // Handle FieldOption array (legacy, deprecated)
     if (isFieldOptionArray(options)) {
         return options;
     }
+    // Handle string array (simple enum values)
     return options.map((opt) => ({
         value: String(opt),
         label: String(opt)
     }));
 }
+/**
+ * Get options from a schema, handling both oneOf (standard) and options (legacy) patterns
+ * Prefers oneOf if both are present
+ *
+ * @param schema - Field schema that may contain oneOf or options
+ * @returns Normalized FieldOption array
+ */
+export function getSchemaOptions(schema) {
+    // Prefer standard oneOf pattern
+    if (schema.oneOf && schema.oneOf.length > 0) {
+        return oneOfToOptions(schema.oneOf);
+    }
+    // Fall back to deprecated options property
+    if (schema.options && schema.options.length > 0) {
+        return schema.options;
+    }
+    return [];
+}