@flowdrop/flowdrop 1.0.0

package/dist/components/form/FormAutocomplete.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AutocompleteConfig } from '../../types/index.js';
+/**
+ * Props interface for FormAutocomplete component
+ */
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current selected value (string for single, string[] for multiple) */
+    value: string | string[];
+    /** Autocomplete configuration */
+    autocomplete: AutocompleteConfig;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string | string[]) => void;
+}
+declare const FormAutocomplete: import("svelte").Component<Props, {}, "">;
+type FormAutocomplete = ReturnType<typeof FormAutocomplete>;
+export default FormAutocomplete;

package/dist/components/form/FormCheckboxGroup.stories.svelte

@@ -0,0 +1,28 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormCheckboxGroup',
+		component: FormCheckboxGroup,
+		tags: ['autodocs'],
+		argTypes: {
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-checkbox-group',
+			options: ['Email', 'SMS', 'Push Notification', 'Webhook'],
+			value: [],
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="No Selection" args={{ value: [] }} />
+
+<Story name="Pre-selected" args={{ value: ['Email', 'Push Notification'] }} />
+
+<Story name="All Selected" args={{ value: ['Email', 'SMS', 'Push Notification', 'Webhook'] }} />
+
+<Story name="Disabled" args={{ value: ['Email'], disabled: true }} />

package/dist/components/form/FormCheckboxGroup.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default FormCheckboxGroup;
+type FormCheckboxGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormCheckboxGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import FormCheckboxGroup from './FormCheckboxGroup.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/form/FormCheckboxGroup.svelte

@@ -0,0 +1,155 @@
+<!--
+  FormCheckboxGroup Component
+  Checkbox group for multiple value selection (enum with multiple=true)
+  
+  Features:
+  - Custom styled checkboxes with check icon
+  - Animated checkbox state transitions
+  - Focus-visible states for keyboard navigation
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	interface Props {
+		/** Field identifier (used for ARIA) */
+		id: string;
+		/** Current selected values */
+		value: string[];
+		/** Available options */
+		options: string[];
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string[]) => void;
+	}
+
+	let {
+		id,
+		value = [],
+		options = [],
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle checkbox toggle
+	 */
+	function handleCheckboxChange(option: string, checked: boolean): void {
+		const currentValues = Array.isArray(value) ? [...value] : [];
+
+		if (checked) {
+			if (!currentValues.includes(option)) {
+				onChange([...currentValues, option]);
+			}
+		} else {
+			onChange(currentValues.filter((v) => v !== option));
+		}
+	}
+</script>
+
+<div
+	class="form-checkbox-group"
+	role="group"
+	aria-labelledby="{id}-label"
+	aria-describedby={ariaDescribedBy}
+>
+	{#each options as option (option)}
+		{@const isChecked = Array.isArray(value) && value.includes(option)}
+		<label class="form-checkbox-item">
+			<input
+				type="checkbox"
+				class="form-checkbox__input"
+				value={option}
+				checked={isChecked}
+				{disabled}
+				onchange={(e) => handleCheckboxChange(option, e.currentTarget.checked)}
+			/>
+			<span class="form-checkbox__custom" aria-hidden="true">
+				<Icon icon="heroicons:check" />
+			</span>
+			<span class="form-checkbox__label">
+				{option}
+			</span>
+		</label>
+	{/each}
+</div>
+
+<style>
+	.form-checkbox-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		padding: 0.75rem;
+		background-color: var(--fd-muted);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+	}
+
+	.form-checkbox-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		cursor: pointer;
+		padding: 0.375rem;
+		margin: -0.375rem;
+		border-radius: var(--fd-radius-md);
+		transition: background-color var(--fd-transition-fast);
+	}
+
+	.form-checkbox-item:hover {
+		background-color: var(--fd-subtle);
+	}
+
+	.form-checkbox__input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.form-checkbox__custom {
+		width: 1.125rem;
+		height: 1.125rem;
+		border: 1.5px solid var(--fd-border-strong);
+		border-radius: var(--fd-radius-sm);
+		background-color: var(--fd-background);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all var(--fd-transition-fast);
+		flex-shrink: 0;
+	}
+
+	.form-checkbox__custom :global(svg) {
+		width: 0.75rem;
+		height: 0.75rem;
+		color: var(--fd-primary-foreground);
+		opacity: 0;
+		transform: scale(0.5);
+		transition: all var(--fd-transition-fast);
+	}
+
+	.form-checkbox__input:checked + .form-checkbox__custom {
+		background-color: var(--fd-primary);
+		border-color: var(--fd-primary);
+	}
+
+	.form-checkbox__input:checked + .form-checkbox__custom :global(svg) {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	.form-checkbox__input:focus-visible + .form-checkbox__custom {
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+	}
+
+	.form-checkbox__label {
+		font-size: var(--fd-text-sm);
+		color: var(--fd-foreground);
+		line-height: 1.4;
+	}
+</style>

package/dist/components/form/FormCheckboxGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Field identifier (used for ARIA) */
+    id: string;
+    /** Current selected values */
+    value: string[];
+    /** Available options */
+    options: string[];
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string[]) => void;
+}
+declare const FormCheckboxGroup: import("svelte").Component<Props, {}, "">;
+type FormCheckboxGroup = ReturnType<typeof FormCheckboxGroup>;
+export default FormCheckboxGroup;

package/dist/components/form/FormCodeEditor.svelte

@@ -0,0 +1,458 @@
+<!--
+  FormCodeEditor Component
+  CodeMirror-based code editor for JSON and other structured data
+  
+  Features:
+  - JSON syntax highlighting with CodeMirror 6
+  - Real-time JSON validation with error display
+  - Auto-formatting on blur (optional)
+  - Dark/light theme support
+  - Consistent styling with other form components
+  - Proper ARIA attributes for accessibility
+  
+  Usage:
+  Use with schema format: "json" or format: "code" to render this editor
+-->
+
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import {
+		EditorView,
+		lineNumbers,
+		highlightActiveLineGutter,
+		drawSelection
+	} from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+	import { history, historyKeymap } from '@codemirror/commands';
+	import { highlightSpecialChars, highlightActiveLine } from '@codemirror/view';
+	import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+	import { keymap } from '@codemirror/view';
+	import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+	import { json, jsonParseLinter } from '@codemirror/lang-json';
+	import { oneDark } from '@codemirror/theme-one-dark';
+	import { linter } from '@codemirror/lint';
+
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value - can be string (raw JSON) or object */
+		value: unknown;
+		/** Placeholder text shown when empty */
+		placeholder?: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether to use dark theme */
+		darkTheme?: boolean;
+		/** Editor height in pixels or CSS value */
+		height?: string;
+		/** Whether to auto-format JSON on blur */
+		autoFormat?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: unknown) => void;
+	}
+
+	let {
+		id,
+		value = '',
+		placeholder = '{}',
+		required = false,
+		darkTheme = false,
+		height = '200px',
+		autoFormat = true,
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/** Reference to the container element */
+	let containerRef: HTMLDivElement | undefined = $state(undefined);
+
+	/** CodeMirror editor instance */
+	let editorView: EditorView | undefined = $state(undefined);
+
+	/** Current validation error message */
+	let validationError: string | undefined = $state(undefined);
+
+	/** Flag to prevent update loops */
+	let isInternalUpdate = false;
+
+	/** Flag to skip $effect when change originated from the editor */
+	let isEditorUpdate = false;
+
+	/**
+	 * Convert value to JSON string for editor display
+	 */
+	function valueToString(val: unknown): string {
+		if (val === undefined || val === null) {
+			return '';
+		}
+		if (typeof val === 'string') {
+			// Check if it's already a valid JSON string
+			try {
+				JSON.parse(val);
+				return val;
+			} catch {
+				// Not valid JSON, return as-is
+				return val;
+			}
+		}
+		// Convert object to formatted JSON string
+		return JSON.stringify(val, null, 2);
+	}
+
+	/**
+	 * Validate JSON and return parsed value or undefined if invalid
+	 */
+	function validateAndParse(content: string): { valid: boolean; value?: unknown; error?: string } {
+		if (!content.trim()) {
+			return { valid: true, value: undefined };
+		}
+
+		try {
+			const parsed = JSON.parse(content);
+			return { valid: true, value: parsed };
+		} catch (e) {
+			const error = e instanceof Error ? e.message : 'Invalid JSON';
+			return { valid: false, error };
+		}
+	}
+
+	/**
+	 * Handle editor content changes
+	 */
+	function handleUpdate(update: { docChanged: boolean; state: EditorState }): void {
+		if (!update.docChanged || isInternalUpdate) {
+			return;
+		}
+
+		const content = update.state.doc.toString();
+		const result = validateAndParse(content);
+
+		isEditorUpdate = true;
+		if (result.valid) {
+			validationError = undefined;
+			// Emit the parsed value (object) not the string
+			onChange(result.value);
+		} else {
+			validationError = result.error;
+			// Still emit the raw string so user can continue editing
+			onChange(content);
+		}
+	}
+
+	/**
+	 * Format JSON content (used on blur if autoFormat is enabled)
+	 */
+	function formatContent(): void {
+		if (!editorView || !autoFormat) {
+			return;
+		}
+
+		const content = editorView.state.doc.toString();
+		const result = validateAndParse(content);
+
+		if (result.valid && result.value !== undefined) {
+			const formatted = JSON.stringify(result.value, null, 2);
+			if (formatted !== content) {
+				isInternalUpdate = true;
+				editorView.dispatch({
+					changes: {
+						from: 0,
+						to: editorView.state.doc.length,
+						insert: formatted
+					}
+				});
+				isInternalUpdate = false;
+			}
+		}
+	}
+
+	/**
+	 * Create editor extensions array
+	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
+	 * When disabled is true, adds readOnly/editable so the editor cannot be modified
+	 */
+	function createExtensions() {
+		const extensions = [
+			// Essential visual features
+			lineNumbers(),
+			highlightActiveLineGutter(),
+			highlightSpecialChars(),
+			highlightActiveLine(),
+			drawSelection(),
+
+			// Editing features (skip when read-only)
+			...(disabled
+				? []
+				: [history(), keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])]),
+
+			// Read-only: prevent document changes and mark content as non-editable
+			...(disabled ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
+
+			// Syntax highlighting - use default for light mode, oneDark handles dark mode
+			...(darkTheme ? [oneDark] : [syntaxHighlighting(defaultHighlightStyle, { fallback: true })]),
+
+			// JSON-specific features
+			json(),
+			linter(jsonParseLinter(), { delay: 1000 }),
+
+			// Update listener (only fires on user edit when not disabled)
+			EditorView.updateListener.of(handleUpdate),
+
+			// Custom theme
+			EditorView.theme({
+				'&': {
+					height: height,
+					fontSize: '0.8125rem',
+					fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace"
+				},
+				'.cm-scroller': {
+					overflow: 'auto'
+				},
+				'.cm-content': {
+					minHeight: '100px'
+				},
+				'&.cm-focused': {
+					outline: 'none'
+				}
+			}),
+			EditorView.lineWrapping
+		];
+
+		return extensions;
+	}
+
+	/**
+	 * Initialize CodeMirror editor on mount
+	 */
+	onMount(() => {
+		if (!containerRef) {
+			return;
+		}
+
+		const initialContent = valueToString(value);
+
+		editorView = new EditorView({
+			state: EditorState.create({
+				doc: initialContent,
+				extensions: createExtensions()
+			}),
+			parent: containerRef
+		});
+
+		// Validate initial content
+		if (initialContent) {
+			const result = validateAndParse(initialContent);
+			if (!result.valid) {
+				validationError = result.error;
+			}
+		}
+	});
+
+	/**
+	 * Clean up editor on destroy
+	 */
+	onDestroy(() => {
+		if (editorView) {
+			editorView.destroy();
+		}
+	});
+
+	/**
+	 * Update editor content when value prop changes externally
+	 */
+	$effect(() => {
+		if (!editorView) {
+			return;
+		}
+
+		const newContent = valueToString(value);
+
+		// Skip if the change originated from the editor itself
+		if (isEditorUpdate) {
+			isEditorUpdate = false;
+			return;
+		}
+
+		const currentContent = editorView.state.doc.toString();
+
+		// Only update if content actually changed and wasn't from internal edit
+		if (newContent !== currentContent && !isInternalUpdate) {
+			isInternalUpdate = true;
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: editorView.state.doc.length,
+					insert: newContent
+				}
+			});
+			isInternalUpdate = false;
+
+			// Validate new content
+			const result = validateAndParse(newContent);
+			validationError = result.valid ? undefined : result.error;
+		}
+	});
+</script>
+
+<div class="form-code-editor" class:form-code-editor--error={validationError}>
+	<!-- Hidden input for form submission compatibility -->
+	<input
+		type="hidden"
+		{id}
+		name={id}
+		value={typeof value === 'string' ? value : JSON.stringify(value)}
+		aria-describedby={ariaDescribedBy}
+		aria-required={required}
+	/>
+
+	<!-- CodeMirror container -->
+	<div
+		bind:this={containerRef}
+		class="form-code-editor__container"
+		class:form-code-editor__container--dark={darkTheme}
+		role="textbox"
+		aria-multiline="true"
+		aria-label="JSON editor"
+		onblur={formatContent}
+	></div>
+
+	<!-- Validation error display -->
+	{#if validationError}
+		<div class="form-code-editor__error" role="alert">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="form-code-editor__error-icon"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+			<span>{validationError}</span>
+		</div>
+	{/if}
+
+	<!-- Placeholder hint when empty -->
+	{#if !value && placeholder}
+		<div class="form-code-editor__placeholder">
+			Start typing or paste JSON. Example: <code>{placeholder}</code>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.form-code-editor {
+		position: relative;
+		width: 100%;
+	}
+
+	.form-code-editor__container {
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		overflow: hidden;
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
+	}
+
+	.form-code-editor__container:hover {
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
+	}
+
+	.form-code-editor__container:focus-within {
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			var(--fd-shadow-sm);
+	}
+
+	.form-code-editor--error .form-code-editor__container {
+		border-color: var(--fd-error);
+	}
+
+	.form-code-editor--error .form-code-editor__container:focus-within {
+		border-color: var(--fd-error);
+		box-shadow:
+			0 0 0 3px rgba(239, 68, 68, 0.12),
+			var(--fd-shadow-sm);
+	}
+
+	/* Dark theme overrides */
+	.form-code-editor__container--dark {
+		background-color: #282c34;
+	}
+
+	.form-code-editor__container--dark:hover,
+	.form-code-editor__container--dark:focus-within {
+		background-color: #282c34;
+	}
+
+	/* CodeMirror styling overrides */
+	.form-code-editor__container :global(.cm-editor) {
+		border-radius: var(--fd-radius-lg);
+	}
+
+	.form-code-editor__container :global(.cm-gutters) {
+		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-code-editor__container--dark :global(.cm-gutters) {
+		background-color: #21252b;
+		border-right-color: #3e4451;
+	}
+
+	/* Error message */
+	.form-code-editor__error {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.375rem;
+		margin-top: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--fd-error-muted);
+		border: 1px solid var(--fd-error);
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-error-hover);
+		font-size: var(--fd-text-xs);
+		line-height: 1.4;
+	}
+
+	.form-code-editor__error-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		margin-top: 0.0625rem;
+	}
+
+	.form-code-editor__error span {
+		word-break: break-word;
+	}
+
+	/* Placeholder hint */
+	.form-code-editor__placeholder {
+		margin-top: 0.5rem;
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
+		font-style: italic;
+	}
+
+	.form-code-editor__placeholder code {
+		padding: 0.125rem 0.375rem;
+		background-color: var(--fd-subtle);
+		border-radius: var(--fd-radius-sm);
+		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+		font-size: 0.6875rem;
+		font-style: normal;
+	}
+</style>