@flowdrop/flowdrop 1.0.0

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

@@ -0,0 +1,41 @@
+import type { TemplateVariablesConfig, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current template value */
+    value: string;
+    /** 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;
+    /**
+     * Configuration for template variable autocomplete.
+     * Controls which variables are available and how they are displayed.
+     */
+    variables?: TemplateVariablesConfig;
+    /** Placeholder variable example for the hint */
+    placeholderExample?: string;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Current workflow node (required for API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (required for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (required for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (required for API mode) */
+    workflowId?: string;
+    /** Auth provider for API requests */
+    authProvider?: AuthProvider;
+}
+declare const FormTemplateEditor: import("svelte").Component<Props, {}, "">;
+type FormTemplateEditor = ReturnType<typeof FormTemplateEditor>;
+export default FormTemplateEditor;

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

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormTextField from './FormTextField.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormTextField',
+		component: FormTextField,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: 'text' },
+			placeholder: { control: 'text' },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-text-field',
+			value: '',
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{ placeholder: 'Enter text...' }} />
+
+<Story name="With Value" args={{ value: 'Hello World', placeholder: 'Enter text...' }} />
+
+<Story name="Required" args={{ required: true, placeholder: 'Required field' }} />
+
+<Story name="Disabled" args={{ value: 'Cannot edit this', disabled: true }} />

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

@@ -0,0 +1,27 @@
+export default FormTextField;
+type FormTextField = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormTextField: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import FormTextField from './FormTextField.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/FormTextField.svelte

@@ -0,0 +1,91 @@
+<!--
+  FormTextField Component
+  Text input field for string values
+  
+  Features:
+  - Standard text input with focus and hover states
+  - Proper ARIA attributes for accessibility
+  - Placeholder support
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** 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 = '',
+		placeholder = '',
+		required = false,
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle input changes
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		onChange(target.value);
+	}
+</script>
+
+<input
+	{id}
+	type="text"
+	class="form-text-field"
+	value={value ?? ''}
+	{placeholder}
+	{disabled}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+/>
+
+<style>
+	.form-text-field {
+		width: 100%;
+		padding: 0.625rem 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(--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(--fd-muted-foreground);
+	}
+
+	.form-text-field:hover {
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
+	}
+
+	.form-text-field:focus {
+		outline: none;
+		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);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormTextField: import("svelte").Component<Props, {}, "">;
+type FormTextField = ReturnType<typeof FormTextField>;
+export default FormTextField;

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

@@ -0,0 +1,34 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormTextarea from './FormTextarea.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormTextarea',
+		component: FormTextarea,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: 'text' },
+			placeholder: { control: 'text' },
+			rows: { control: { type: 'number', min: 1, max: 20 } },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-textarea',
+			value: '',
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{ placeholder: 'Enter your message...' }} />
+
+<Story name="Custom Rows" args={{ rows: 8, placeholder: 'Larger text area...' }} />
+
+<Story
+	name="With Value"
+	args={{ value: 'This is a multiline\ntext content\nwith several lines.' }}
+/>
+
+<Story name="Disabled" args={{ value: 'Read-only content', disabled: true }} />

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

@@ -0,0 +1,27 @@
+export default FormTextarea;
+type FormTextarea = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormTextarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import FormTextarea from './FormTextarea.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/FormTextarea.svelte

@@ -0,0 +1,97 @@
+<!--
+  FormTextarea Component
+  Multiline text input field for longer string values
+  
+  Features:
+  - Resizable textarea with minimum height
+  - Focus and hover states
+  - Proper ARIA attributes for accessibility
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Number of visible rows */
+		rows?: number;
+		/** Whether the field is required */
+		required?: boolean;
+		/** 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 = '',
+		placeholder = '',
+		rows = 4,
+		required = false,
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle textarea changes
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLTextAreaElement;
+		onChange(target.value);
+	}
+</script>
+
+<textarea
+	{id}
+	class="form-textarea"
+	value={value ?? ''}
+	{placeholder}
+	{rows}
+	{disabled}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+></textarea>
+
+<style>
+	.form-textarea {
+		width: 100%;
+		padding: 0.625rem 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(--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(--fd-muted-foreground);
+	}
+
+	.form-textarea:hover {
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
+	}
+
+	.form-textarea:focus {
+		outline: none;
+		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);
+	}
+</style>

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

@@ -0,0 +1,21 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Number of visible rows */
+    rows?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormTextarea: import("svelte").Component<Props, {}, "">;
+type FormTextarea = ReturnType<typeof FormTextarea>;
+export default FormTextarea;

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

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormToggle from './FormToggle.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormToggle',
+		component: FormToggle,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: 'boolean' },
+			onLabel: { control: 'text' },
+			offLabel: { control: 'text' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-toggle',
+			value: false,
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="Off" args={{ value: false }} />
+
+<Story name="On" args={{ value: true }} />
+
+<Story name="Custom Labels" args={{ value: true, onLabel: 'Yes', offLabel: 'No' }} />
+
+<Story name="Disabled" args={{ value: true, disabled: true }} />

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

@@ -0,0 +1,27 @@
+export default FormToggle;
+type FormToggle = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormToggle: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import FormToggle from './FormToggle.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/FormToggle.svelte

@@ -0,0 +1,126 @@
+<!--
+  FormToggle Component
+  Toggle switch for boolean values
+  
+  Features:
+  - Smooth toggle animation
+  - On/Off labels with state-based coloring
+  - Focus-visible states for keyboard navigation
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: boolean;
+		/** Label shown when toggle is on */
+		onLabel?: string;
+		/** Label shown when toggle is off */
+		offLabel?: string;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: boolean) => void;
+	}
+
+	let {
+		id,
+		value = false,
+		onLabel = 'Enabled',
+		offLabel = 'Disabled',
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle toggle changes
+	 */
+	function handleChange(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		onChange(target.checked);
+	}
+</script>
+
+<label class="form-toggle">
+	<input
+		{id}
+		type="checkbox"
+		class="form-toggle__input"
+		checked={value}
+		{disabled}
+		aria-describedby={ariaDescribedBy}
+		onchange={handleChange}
+	/>
+	<span class="form-toggle__track">
+		<span class="form-toggle__thumb"></span>
+	</span>
+	<span class="form-toggle__label">
+		{value ? onLabel : offLabel}
+	</span>
+</label>
+
+<style>
+	.form-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		cursor: pointer;
+		padding: 0.5rem 0;
+	}
+
+	.form-toggle__input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.form-toggle__track {
+		position: relative;
+		width: 2.75rem;
+		height: 1.5rem;
+		background-color: var(--fd-border-strong);
+		border-radius: 0.75rem;
+		transition: background-color var(--fd-transition-normal);
+		flex-shrink: 0;
+	}
+
+	.form-toggle__thumb {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.125rem;
+		width: 1.25rem;
+		height: 1.25rem;
+		background-color: var(--fd-background);
+		border-radius: 50%;
+		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(--fd-primary);
+	}
+
+	.form-toggle__input:checked + .form-toggle__track .form-toggle__thumb {
+		transform: translateX(1.25rem);
+	}
+
+	.form-toggle__input:focus-visible + .form-toggle__track {
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+	}
+
+	.form-toggle__label {
+		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(--fd-primary-hover);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: boolean;
+    /** Label shown when toggle is on */
+    onLabel?: string;
+    /** Label shown when toggle is off */
+    offLabel?: string;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: boolean) => void;
+}
+declare const FormToggle: import("svelte").Component<Props, {}, "">;
+type FormToggle = ReturnType<typeof FormToggle>;
+export default FormToggle;