@d34dman/flowdrop 0.0.63 → 0.0.64

package/dist/components/WorkflowEditor.svelte

@@ -16,7 +16,11 @@
 		type ColorMode
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
-	import { getResolvedTheme, getEditorSettings, getBehaviorSettings } from '../stores/settingsStore.svelte.js';
+	import {
+		getResolvedTheme,
+		getEditorSettings,
+		getBehaviorSettings
+	} from '../stores/settingsStore.svelte.js';
 	import type {
 		WorkflowNode as WorkflowNodeType,
 		NodeMetadata,
@@ -40,7 +44,11 @@
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
 	import { Toaster } from 'svelte-5-french-toast';
-	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS, apiToasts } from '../services/toastService.js';
+	import {
+		flowdropToastOptions,
+		FLOWDROP_TOASTER_CLASS,
+		apiToasts
+	} from '../services/toastService.js';
 	import {
 		ProximityConnectHelper,
 		type ProximityEdgeCandidate
@@ -351,7 +359,12 @@
 		nodes: WorkflowNodeType[];
 		event: MouseEvent | TouchEvent;
 	}): void {
-		if (!getEditorSettings().proximityConnect || !targetNode || props.readOnly || props.lockWorkflow) {
+		if (
+			!getEditorSettings().proximityConnect ||
+			!targetNode ||
+			props.readOnly ||
+			props.lockWorkflow
+		) {
 			if (currentProximityCandidates.length > 0) {
 				flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
 				currentProximityCandidates = [];
@@ -747,7 +760,13 @@
 							bind:edges={flowEdges}
 							{nodeTypes}
 							{defaultEdgeOptions}
-							onconnect={(connection) => void handleConnect({ source: connection.source, target: connection.target, sourceHandle: connection.sourceHandle ?? undefined, targetHandle: connection.targetHandle ?? undefined })}
+							onconnect={(connection) =>
+								void handleConnect({
+									source: connection.source,
+									target: connection.target,
+									sourceHandle: connection.sourceHandle ?? undefined,
+									targetHandle: connection.targetHandle ?? undefined
+								})}
 							onbeforedelete={handleBeforeDelete}
 							ondelete={handleNodesDelete}
 							onnodedragstart={handleNodeDragStart}
@@ -905,7 +924,6 @@
 		cursor: pointer;
 	}
 
-
 	/* Handle size/position only; colors come from inline --fd-handle-fill and base.css ::before */
 	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
 		width: var(--fd-handle-size);

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

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

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

@@ -11,7 +11,7 @@ declare const FormCheckboxGroup: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
+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;

package/dist/components/form/FormField.svelte

@@ -146,9 +146,9 @@
 			return 'select-enum';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// oneOf with labeled options (standard JSON Schema) -> select
 		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+		if (schema.oneOf && schema.oneOf.length > 0) {
 			return 'select-options';
 		}
 

package/dist/components/form/FormFieldLight.svelte

@@ -42,7 +42,7 @@
 	import FormSelect from './FormSelect.svelte';
 	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
 	import FormArray from './FormArray.svelte';
-	import { resolveFieldComponent } from '../../form/fieldRegistry.js';
+	import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
 	import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
@@ -84,7 +84,7 @@
 	/**
 	 * Check if there's a registered custom component for this schema
 	 */
-	const registeredComponent = $derived(resolveFieldComponent(schema));
+	const registeredComponent = $derived(fieldComponentRegistry.resolveFieldComponent(schema));
 
 	/**
 	 * Determine the field type to render (for non-registered components)
@@ -128,9 +128,9 @@
 			return 'select-enum';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// oneOf with labeled options (standard JSON Schema) -> select
 		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+		if (schema.oneOf && schema.oneOf.length > 0) {
 			return 'select-options';
 		}
 

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

@@ -1,31 +1,53 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import FormFieldWrapper from "./FormFieldWrapper.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormFieldWrapper from './FormFieldWrapper.svelte';
 
 	const { Story } = defineMeta({
-		title: "Form/FormFieldWrapper",
+		title: 'Form/FormFieldWrapper',
 		component: FormFieldWrapper,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			label: { control: "text" },
-			required: { control: "boolean" },
-			description: { control: "text" },
+			label: { control: 'text' },
+			required: { control: 'boolean' },
+			description: { control: 'text' }
 		},
 		args: {
-			id: "demo-wrapper",
-			label: "Field Label",
-		},
+			id: 'demo-wrapper',
+			label: 'Field Label'
+		}
 	});
 </script>
 
-<Story name="Default" args={{ label: "Username" }}>
-	<input type="text" id="demo-wrapper" placeholder="Enter username" style="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);" />
+<Story name="Default" args={{ label: 'Username' }}>
+	<input
+		type="text"
+		id="demo-wrapper"
+		placeholder="Enter username"
+		style="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);"
+	/>
 </Story>
 
-<Story name="With Description" args={{ label: "Email", description: "We'll never share your email with anyone.", required: true }}>
-	<input type="email" id="demo-wrapper" placeholder="email@example.com" style="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);" />
+<Story
+	name="With Description"
+	args={{
+		label: 'Email',
+		description: "We'll never share your email with anyone.",
+		required: true
+	}}
+>
+	<input
+		type="email"
+		id="demo-wrapper"
+		placeholder="email@example.com"
+		style="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);"
+	/>
 </Story>
 
-<Story name="Required" args={{ label: "Password", required: true }}>
-	<input type="password" id="demo-wrapper" placeholder="Enter password" style="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);" />
+<Story name="Required" args={{ label: 'Password', required: true }}>
+	<input
+		type="password"
+		id="demo-wrapper"
+		placeholder="Enter password"
+		style="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);"
+	/>
 </Story>

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

@@ -11,7 +11,7 @@ declare const FormFieldWrapper: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormFieldWrapper from "./FormFieldWrapper.svelte";
+import FormFieldWrapper from './FormFieldWrapper.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;

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

@@ -1,33 +1,36 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import FormNumberField from "./FormNumberField.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormNumberField from './FormNumberField.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Form/FormNumberField",
+		title: 'Form/FormNumberField',
 		component: FormNumberField,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			value: { control: "number" },
-			placeholder: { control: "text" },
-			min: { control: "number" },
-			max: { control: "number" },
-			step: { control: "number" },
-			required: { control: "boolean" },
-			disabled: { control: "boolean" },
+			value: { control: 'number' },
+			placeholder: { control: 'text' },
+			min: { control: 'number' },
+			max: { control: 'number' },
+			step: { control: 'number' },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
 		},
 		args: {
-			id: "demo-number-field",
-			value: "",
-			onChange: fn(),
-		},
+			id: 'demo-number-field',
+			value: '',
+			onChange: fn()
+		}
 	});
 </script>
 
-<Story name="Default" args={{ placeholder: "Enter a number..." }} />
+<Story name="Default" args={{ placeholder: 'Enter a number...' }} />
 
 <Story name="With Value" args={{ value: 42 }} />
 
-<Story name="With Constraints" args={{ value: 50, min: 0, max: 100, step: 5, placeholder: "0-100, step 5" }} />
+<Story
+	name="With Constraints"
+	args={{ value: 50, min: 0, max: 100, step: 5, placeholder: '0-100, step 5' }}
+/>
 
 <Story name="Disabled" args={{ value: 10, disabled: true }} />

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

@@ -11,7 +11,7 @@ declare const FormNumberField: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormNumberField from "./FormNumberField.svelte";
+import FormNumberField from './FormNumberField.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;

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

@@ -1,24 +1,24 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import FormRangeField from "./FormRangeField.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormRangeField from './FormRangeField.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Form/FormRangeField",
+		title: 'Form/FormRangeField',
 		component: FormRangeField,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			value: { control: { type: "number" } },
-			min: { control: "number" },
-			max: { control: "number" },
-			step: { control: "number" },
-			disabled: { control: "boolean" },
+			value: { control: { type: 'number' } },
+			min: { control: 'number' },
+			max: { control: 'number' },
+			step: { control: 'number' },
+			disabled: { control: 'boolean' }
 		},
 		args: {
-			id: "demo-range-field",
+			id: 'demo-range-field',
 			value: 50,
-			onChange: fn(),
-		},
+			onChange: fn()
+		}
 	});
 </script>
 

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

@@ -11,7 +11,7 @@ declare const FormRangeField: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormRangeField from "./FormRangeField.svelte";
+import FormRangeField from './FormRangeField.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;

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

@@ -1,30 +1,30 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import FormSelect from "./FormSelect.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormSelect from './FormSelect.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Form/FormSelect",
+		title: 'Form/FormSelect',
 		component: FormSelect,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			value: { control: "text" },
-			required: { control: "boolean" },
-			disabled: { control: "boolean" },
+			value: { control: 'text' },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
 		},
 		args: {
-			id: "demo-select",
-			value: "",
-			onChange: fn(),
-		},
+			id: 'demo-select',
+			value: '',
+			onChange: fn()
+		}
 	});
 </script>
 
 <Story
 	name="String Options"
 	args={{
-		options: ["Option A", "Option B", "Option C"],
-		value: "Option A",
+		options: ['Option A', 'Option B', 'Option C'],
+		value: 'Option A'
 	}}
 />
 
@@ -32,19 +32,19 @@
 	name="FieldOption Objects"
 	args={{
 		options: [
-			{ value: "gpt-4", label: "GPT-4" },
-			{ value: "gpt-3.5", label: "GPT-3.5 Turbo" },
-			{ value: "claude-3", label: "Claude 3 Opus" },
+			{ value: 'gpt-4', label: 'GPT-4' },
+			{ value: 'gpt-3.5', label: 'GPT-3.5 Turbo' },
+			{ value: 'claude-3', label: 'Claude 3 Opus' }
 		],
-		value: "gpt-4",
+		value: 'gpt-4'
 	}}
 />
 
 <Story
 	name="Disabled"
 	args={{
-		options: ["Read", "Write", "Admin"],
-		value: "Read",
-		disabled: true,
+		options: ['Read', 'Write', 'Admin'],
+		value: 'Read',
+		disabled: true
 	}}
 />

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

@@ -11,7 +11,7 @@ declare const FormSelect: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormSelect from "./FormSelect.svelte";
+import FormSelect from './FormSelect.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;

package/dist/components/form/FormTemplateEditor.svelte

@@ -65,12 +65,6 @@
 		 * Controls which variables are available and how they are displayed.
 		 */
 		variables?: TemplateVariablesConfig;
-		/**
-		 * Variable schema for advanced autocomplete with nested drilling.
-		 * When provided, enables dot notation (user.name) and array access (items[0]).
-		 * @deprecated Use `variables.schema` instead
-		 */
-		variableSchema?: VariableSchema;
 		/** Placeholder variable example for the hint */
 		placeholderExample?: string;
 		/** Whether the field is disabled (read-only) */
@@ -99,7 +93,6 @@
 		darkTheme = false,
 		height = '250px',
 		variables,
-		variableSchema,
 		placeholderExample = 'Hello {{ name }}, your order #{{ order_id }} is ready!',
 		disabled = false,
 		ariaDescribedBy,
@@ -128,12 +121,6 @@
 		// Reset error state
 		variableLoadError = null;
 
-		// If we have deprecated variableSchema prop, use it directly
-		if (variableSchema && Object.keys(variableSchema.variables).length > 0) {
-			effectiveVariableSchema = variableSchema;
-			return;
-		}
-
 		// If no variables config, clear schema
 		if (!variables) {
 			effectiveVariableSchema = undefined;

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

@@ -1,4 +1,4 @@
-import type { VariableSchema, TemplateVariablesConfig, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+import type { TemplateVariablesConfig, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
 interface Props {
     /** Field identifier */
     id: string;
@@ -17,12 +17,6 @@ interface Props {
      * Controls which variables are available and how they are displayed.
      */
     variables?: TemplateVariablesConfig;
-    /**
-     * Variable schema for advanced autocomplete with nested drilling.
-     * When provided, enables dot notation (user.name) and array access (items[0]).
-     * @deprecated Use `variables.schema` instead
-     */
-    variableSchema?: VariableSchema;
     /** Placeholder variable example for the hint */
     placeholderExample?: string;
     /** Whether the field is disabled (read-only) */

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

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

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

@@ -11,7 +11,7 @@ declare const FormTextField: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormTextField from "./FormTextField.svelte";
+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;

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

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

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

@@ -11,7 +11,7 @@ declare const FormTextarea: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormTextarea from "./FormTextarea.svelte";
+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;