@d34dman/flowdrop 0.0.61 → 0.0.63

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

@@ -0,0 +1,31 @@
+<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/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/FormUISchemaRenderer.svelte

@@ -131,6 +131,6 @@
 	.form-uischema-layout--vertical {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-5);
+		gap: var(--fd-space-2xl);
 	}
 </style>

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

@@ -76,11 +76,11 @@ export interface OneOfItem {
 /**
  * Base properties shared by all form fields
  */
-export interface BaseFieldProps {
+export interface BaseFieldProps<T = unknown> {
     /** Unique identifier for the field (used for id and name attributes) */
     id: string;
     /** Current value of the field */
-    value: unknown;
+    value: T;
     /** Whether the field is required */
     required?: boolean;
     /** Whether the field is disabled */
@@ -90,84 +90,69 @@ export interface BaseFieldProps {
     /** ARIA description ID for accessibility */
     ariaDescribedBy?: string;
     /** Callback when the field value changes */
-    onChange: (value: unknown) => void;
+    onChange: (value: T) => void;
 }
 /**
  * Properties for text input fields
  */
-export interface TextFieldProps extends BaseFieldProps {
-    value: string;
-    onChange: (value: string) => void;
+export interface TextFieldProps extends BaseFieldProps<string> {
 }
 /**
  * Properties for multiline text fields (textarea)
  */
-export interface TextareaFieldProps extends BaseFieldProps {
-    value: string;
+export interface TextareaFieldProps extends BaseFieldProps<string> {
     /** Number of visible rows */
     rows?: number;
-    onChange: (value: string) => void;
 }
 /**
  * Properties for number input fields
  */
-export interface NumberFieldProps extends BaseFieldProps {
-    value: number | string;
+export interface NumberFieldProps extends BaseFieldProps<number | string> {
     /** Minimum allowed value */
     min?: number;
     /** Maximum allowed value */
     max?: number;
     /** Step increment for the input */
     step?: number;
-    onChange: (value: number | string) => void;
 }
 /**
  * Properties for boolean toggle fields
  */
-export interface ToggleFieldProps extends BaseFieldProps {
-    value: boolean;
+export interface ToggleFieldProps extends BaseFieldProps<boolean> {
     /** Label shown when toggle is on */
     onLabel?: string;
     /** Label shown when toggle is off */
     offLabel?: string;
-    onChange: (value: boolean) => void;
 }
 /**
  * Properties for range slider fields
  */
-export interface RangeFieldProps extends BaseFieldProps {
-    value: number | string;
+export interface RangeFieldProps extends BaseFieldProps<number | string> {
     /** Minimum allowed value */
     min?: number;
     /** Maximum allowed value */
     max?: number;
     /** Step increment for the slider */
     step?: number;
-    onChange: (value: number) => void;
 }
 /**
  * Properties for select dropdown fields
  */
-export interface SelectFieldProps extends BaseFieldProps {
-    value: string;
+export interface SelectFieldProps extends BaseFieldProps<string> {
     /** Available options for selection */
     options: FieldOption[] | string[];
-    onChange: (value: string) => void;
 }
 /**
  * Properties for checkbox group fields (multiple selection)
  */
-export interface CheckboxGroupFieldProps extends BaseFieldProps {
-    value: string[];
+export interface CheckboxGroupFieldProps extends BaseFieldProps<string[]> {
     /** Available options for selection */
     options: string[];
-    onChange: (value: string[]) => void;
 }
 /**
  * Properties for array fields (dynamic lists)
  */
-export interface ArrayFieldProps extends BaseFieldProps {
-    value: unknown[];
+export interface ArrayFieldProps extends BaseFieldProps<unknown[]> {
     /** Schema for array items */
     itemSchema: FieldSchema;
     /** Minimum number of items required */
@@ -176,29 +161,22 @@ export interface ArrayFieldProps extends BaseFieldProps {
     maxItems?: number;
     /** Label for the add button */
     addLabel?: string;
-    onChange: (value: unknown[]) => void;
 }
 /**
  * Properties for code editor fields (CodeMirror-based)
  */
-export interface CodeEditorFieldProps extends BaseFieldProps {
-    /** Current value - can be string (raw JSON) or object */
-    value: unknown;
+export interface CodeEditorFieldProps extends BaseFieldProps<unknown> {
     /** 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;
-    /** Callback when value changes */
-    onChange: (value: unknown) => void;
 }
 /**
  * Properties for markdown editor fields (CodeMirror 6-based)
  */
-export interface MarkdownEditorFieldProps extends BaseFieldProps {
-    /** Current value (markdown string) */
-    value: string;
+export interface MarkdownEditorFieldProps extends BaseFieldProps<string> {
     /** Editor height in pixels or CSS value */
     height?: string;
     /** Whether to show the toolbar */
@@ -207,15 +185,11 @@ export interface MarkdownEditorFieldProps extends BaseFieldProps {
     showStatusBar?: boolean;
     /** Whether to enable spell checking */
     spellChecker?: boolean;
-    /** Callback when value changes */
-    onChange: (value: string) => void;
 }
 /**
  * Properties for template editor fields (CodeMirror with Twig/Liquid syntax)
  */
-export interface TemplateEditorFieldProps extends BaseFieldProps {
-    /** Current template value */
-    value: string;
+export interface TemplateEditorFieldProps extends BaseFieldProps<string> {
     /** Whether to use dark theme */
     darkTheme?: boolean;
     /** Editor height in pixels or CSS value */
@@ -233,22 +207,16 @@ export interface TemplateEditorFieldProps extends BaseFieldProps {
     variableSchema?: VariableSchema;
     /** Placeholder variable example for the hint */
     placeholderExample?: string;
-    /** 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[];
+export interface AutocompleteFieldProps extends BaseFieldProps<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

package/dist/components/interrupt/ChoicePrompt.stories.svelte

@@ -0,0 +1,43 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ChoicePrompt from "./ChoicePrompt.svelte";
+	import { fn } from "storybook/test";
+	import { createChoiceConfig } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Interrupt/ChoicePrompt",
+		component: ChoicePrompt,
+		tags: ["autodocs"],
+		args: {
+			config: createChoiceConfig(),
+			isResolved: false,
+			isSubmitting: false,
+			onSubmit: fn(),
+		},
+	});
+</script>
+
+<Story name="Single Select" />
+
+<Story name="Multi Select" args={{
+	config: createChoiceConfig({
+		message: "Select the features to enable:",
+		multiple: true,
+		options: [
+			{ value: "auth", label: "Authentication", description: "User login and signup" },
+			{ value: "analytics", label: "Analytics", description: "Usage tracking and metrics" },
+			{ value: "notifications", label: "Notifications", description: "Email and push alerts" },
+			{ value: "export", label: "Data Export", description: "CSV and JSON export" },
+		],
+	}),
+}} />
+
+<Story name="Resolved" args={{
+	isResolved: true,
+	resolvedValue: "high",
+	resolvedByUserName: "Bob",
+}} />
+
+<Story name="Submitting" args={{
+	isSubmitting: true,
+}} />

package/dist/components/interrupt/ChoicePrompt.stories.svelte.d.ts

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

@@ -211,7 +211,7 @@
 	.choice-prompt {
 		display: flex;
 		flex-direction: column;
-		gap: 0.75rem;
+		gap: var(--fd-space-md);
 	}
 
 	.choice-prompt--resolved {
@@ -224,33 +224,33 @@
 
 	.choice-prompt__message {
 		margin: 0;
-		font-size: 0.9375rem;
-		line-height: 1.5;
+		font-size: var(--fd-interrupt-font-message);
+		line-height: var(--fd-interrupt-line-height);
 		color: var(--fd-foreground);
 	}
 
 	.choice-prompt__error {
 		display: flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		background-color: var(--fd-error-muted);
 		border-radius: var(--fd-radius-md);
 		color: var(--fd-error);
-		font-size: 0.8125rem;
+		font-size: var(--fd-interrupt-font-error);
 	}
 
 	.choice-prompt__options {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--fd-space-xs);
 	}
 
 	.choice-prompt__option {
 		display: flex;
 		align-items: flex-start;
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
+		gap: var(--fd-space-md);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		background-color: var(--fd-muted);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-lg);
@@ -321,37 +321,37 @@
 	}
 
 	.choice-prompt__option-description {
-		font-size: 0.8125rem;
+		font-size: var(--fd-interrupt-font-error);
 		color: var(--fd-muted-foreground);
-		line-height: 1.4;
+		line-height: var(--fd-leading-tight);
 	}
 
 	.choice-prompt__info {
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
-		padding-left: 0.25rem;
+		padding-left: var(--fd-space-3xs);
 	}
 
 	.choice-prompt__actions {
 		display: flex;
-		gap: 0.75rem;
-		margin-top: 0.25rem;
+		gap: var(--fd-space-md);
+		margin-top: var(--fd-space-3xs);
 	}
 
 	.choice-prompt__submit {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
-		padding: 0.625rem 1.25rem;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all var(--fd-transition-normal);
 		border: none;
-		min-height: 2.5rem;
+		min-height: var(--fd-interrupt-btn-min-height);
 		background: var(--fd-interrupt-btn-primary-bg);
 		color: var(--fd-primary-foreground);
 		box-shadow: 0 1px 3px var(--fd-interrupt-btn-primary-shadow);
@@ -371,8 +371,8 @@
 	}
 
 	.choice-prompt__spinner {
-		width: 1rem;
-		height: 1rem;
+		width: var(--fd-interrupt-spinner-size);
+		height: var(--fd-interrupt-spinner-size);
 		border: 2px solid var(--fd-border);
 		border-top-color: currentColor;
 		border-radius: 50%;
@@ -389,12 +389,12 @@
 	.choice-prompt__resolved-badge {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-2xs) var(--fd-space-md);
 		background-color: var(--fd-interrupt-badge-completed-bg);
-		border-radius: 9999px;
+		border-radius: var(--fd-radius-full);
 		color: var(--fd-interrupt-badge-completed-text);
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		align-self: flex-start;
 	}

package/dist/components/interrupt/ConfirmationPrompt.stories.svelte

@@ -0,0 +1,49 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ConfirmationPrompt from "./ConfirmationPrompt.svelte";
+	import { fn } from "storybook/test";
+	import { createConfirmationConfig } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Interrupt/ConfirmationPrompt",
+		component: ConfirmationPrompt,
+		tags: ["autodocs"],
+		args: {
+			config: createConfirmationConfig(),
+			isResolved: false,
+			isSubmitting: false,
+			onConfirm: fn(),
+			onDecline: fn(),
+		},
+	});
+</script>
+
+<Story name="Pending" />
+
+<Story name="Custom Labels" args={{
+	config: createConfirmationConfig({ message: "Deploy to production?", confirmLabel: "Deploy", cancelLabel: "Abort" }),
+}} />
+
+<Story name="Confirmed" args={{
+	isResolved: true,
+	resolvedValue: true,
+}} />
+
+<Story name="Declined" args={{
+	isResolved: true,
+	resolvedValue: false,
+}} />
+
+<Story name="Submitting" args={{
+	isSubmitting: true,
+}} />
+
+<Story name="With Error" args={{
+	error: "Network error: Failed to submit response",
+}} />
+
+<Story name="Resolved By User" args={{
+	isResolved: true,
+	resolvedValue: true,
+	resolvedByUserName: "Alice",
+}} />

package/dist/components/interrupt/ConfirmationPrompt.stories.svelte.d.ts

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

@@ -129,7 +129,7 @@
 	.confirmation-prompt {
 		display: flex;
 		flex-direction: column;
-		gap: 0.75rem;
+		gap: var(--fd-space-md);
 	}
 
 	.confirmation-prompt--resolved {
@@ -142,25 +142,25 @@
 
 	.confirmation-prompt__message {
 		margin: 0;
-		font-size: 0.9375rem;
-		line-height: 1.5;
+		font-size: var(--fd-interrupt-font-message);
+		line-height: var(--fd-interrupt-line-height);
 		color: var(--fd-foreground);
 	}
 
 	.confirmation-prompt__error {
 		display: flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		background-color: var(--fd-error-muted);
 		border-radius: var(--fd-radius-md);
 		color: var(--fd-error);
-		font-size: 0.8125rem;
+		font-size: var(--fd-interrupt-font-error);
 	}
 
 	.confirmation-prompt__actions {
 		display: flex;
-		gap: 0.75rem;
+		gap: var(--fd-space-md);
 		flex-wrap: wrap;
 	}
 
@@ -168,16 +168,16 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
-		padding: 0.625rem 1.25rem;
-		border-radius: 0.5rem;
-		font-size: 0.875rem;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all var(--fd-transition-normal);
 		border: 1px solid transparent;
-		min-height: 2.5rem;
+		min-height: var(--fd-interrupt-btn-min-height);
 		min-width: 100px;
 	}
 
@@ -257,8 +257,8 @@
 	}
 
 	.confirmation-prompt__spinner {
-		width: 1rem;
-		height: 1rem;
+		width: var(--fd-interrupt-spinner-size);
+		height: var(--fd-interrupt-spinner-size);
 		border: 2px solid var(--fd-border);
 		border-top-color: currentColor;
 		border-radius: 50%;
@@ -280,12 +280,12 @@
 	.confirmation-prompt__resolved-badge {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-2xs) var(--fd-space-md);
 		background-color: var(--fd-interrupt-badge-completed-bg);
-		border-radius: 9999px;
+		border-radius: var(--fd-radius-full);
 		color: var(--fd-interrupt-badge-completed-text);
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		align-self: flex-start;
 	}