@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/form/FormToggle.svelte

@@ -9,118 +9,118 @@
 -->
 
 <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;
-	}
+  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();
+  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);
-	}
+  /**
+   * 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>
+  <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 {
+    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__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__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__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 {
+    background-color: var(--fd-primary);
+  }
 
-	.form-toggle__input:checked + .form-toggle__track .form-toggle__thumb {
-		transform: translateX(1.25rem);
-	}
+  .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__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__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);
-	}
+  .form-toggle__input:checked ~ .form-toggle__label {
+    color: var(--fd-primary-hover);
+  }
 </style>

package/dist/components/form/FormUISchemaRenderer.svelte

@@ -12,125 +12,132 @@
 -->
 
 <script lang="ts">
-	import type { UISchemaElement } from '../../types/uischema.js';
-	import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
-	import type { FieldSchema } from './types.js';
-	import { resolveScopeToKey } from '../../utils/uischema.js';
-	import FormField from './FormField.svelte';
-	import FormFieldset from './FormFieldset.svelte';
-	import Self from './FormUISchemaRenderer.svelte';
+  import type { UISchemaElement } from "../../types/uischema.js";
+  import type {
+    ConfigSchema,
+    WorkflowNode,
+    WorkflowEdge,
+    AuthProvider,
+  } from "../../types/index.js";
+  import type { FieldSchema } from "./types.js";
+  import { resolveScopeToKey } from "../../utils/uischema.js";
+  import FormField from "./FormField.svelte";
+  import FormFieldset from "./FormFieldset.svelte";
+  import Self from "./FormUISchemaRenderer.svelte";
 
-	interface Props {
-		/** The UISchema element to render */
-		element: UISchemaElement;
-		/** The data schema (for resolving field definitions) */
-		schema: ConfigSchema;
-		/** Current form values */
-		values: Record<string, unknown>;
-		/** Required field keys from the schema */
-		requiredFields?: string[];
-		/** Base animation index for staggered animations */
-		animationIndexBase?: number;
-		/** Callback when a field value changes */
-		onFieldChange: (key: string, value: unknown) => void;
-		/** Convert a property to FieldSchema (handles template variable injection etc.) */
-		toFieldSchema: (property: Record<string, unknown>) => FieldSchema;
-		/** Current workflow node (optional, passed through to FormField) */
-		node?: WorkflowNode;
-		/** All workflow nodes (optional, passed through to FormField) */
-		nodes?: WorkflowNode[];
-		/** All workflow edges (optional, passed through to FormField) */
-		edges?: WorkflowEdge[];
-		/** Workflow ID (optional, passed through to FormField) */
-		workflowId?: string;
-		/** Auth provider (optional, passed through to FormField) */
-		authProvider?: AuthProvider;
-	}
+  interface Props {
+    /** The UISchema element to render */
+    element: UISchemaElement;
+    /** The data schema (for resolving field definitions) */
+    schema: ConfigSchema;
+    /** Current form values */
+    values: Record<string, unknown>;
+    /** Required field keys from the schema */
+    requiredFields?: string[];
+    /** Base animation index for staggered animations */
+    animationIndexBase?: number;
+    /** Callback when a field value changes */
+    onFieldChange: (key: string, value: unknown) => void;
+    /** Convert a property to FieldSchema (handles template variable injection etc.) */
+    toFieldSchema: (property: Record<string, unknown>) => FieldSchema;
+    /** Current workflow node (optional, passed through to FormField) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, passed through to FormField) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, passed through to FormField) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, passed through to FormField) */
+    workflowId?: string;
+    /** Auth provider (optional, passed through to FormField) */
+    authProvider?: AuthProvider;
+  }
 
-	let {
-		element,
-		schema,
-		values,
-		requiredFields = [],
-		animationIndexBase = 0,
-		onFieldChange,
-		toFieldSchema,
-		node,
-		nodes,
-		edges,
-		workflowId,
-		authProvider
-	}: Props = $props();
+  let {
+    element,
+    schema,
+    values,
+    requiredFields = [],
+    animationIndexBase = 0,
+    onFieldChange,
+    toFieldSchema,
+    node,
+    nodes,
+    edges,
+    workflowId,
+    authProvider,
+  }: Props = $props();
 
-	function isRequired(key: string): boolean {
-		return requiredFields.includes(key);
-	}
+  function isRequired(key: string): boolean {
+    return requiredFields.includes(key);
+  }
 </script>
 
-{#if element.type === 'Control'}
-	{@const key = resolveScopeToKey(element.scope)}
-	{#if key && schema.properties[key]}
-		{@const fieldSchema = toFieldSchema(schema.properties[key] as Record<string, unknown>)}
-		<FormField
-			fieldKey={key}
-			schema={fieldSchema}
-			value={values[key]}
-			required={isRequired(key)}
-			animationIndex={animationIndexBase}
-			{node}
-			{nodes}
-			{edges}
-			{workflowId}
-			{authProvider}
-			onChange={(val) => onFieldChange(key, val)}
-		/>
-	{/if}
-{:else if element.type === 'VerticalLayout'}
-	<div class="form-uischema-layout form-uischema-layout--vertical">
-		{#each element.elements as child, idx (idx)}
-			<Self
-				element={child}
-				{schema}
-				{values}
-				{requiredFields}
-				animationIndexBase={animationIndexBase + idx}
-				{onFieldChange}
-				{toFieldSchema}
-				{node}
-				{nodes}
-				{edges}
-				{workflowId}
-				{authProvider}
-			/>
-		{/each}
-	</div>
-{:else if element.type === 'Group'}
-	<FormFieldset group={element}>
-		<div class="form-uischema-layout form-uischema-layout--vertical">
-			{#each element.elements as child, idx (idx)}
-				<Self
-					element={child}
-					{schema}
-					{values}
-					{requiredFields}
-					animationIndexBase={animationIndexBase + idx}
-					{onFieldChange}
-					{toFieldSchema}
-					{node}
-					{nodes}
-					{edges}
-					{workflowId}
-					{authProvider}
-				/>
-			{/each}
-		</div>
-	</FormFieldset>
+{#if element.type === "Control"}
+  {@const key = resolveScopeToKey(element.scope)}
+  {#if key && schema.properties[key]}
+    {@const fieldSchema = toFieldSchema(
+      schema.properties[key] as Record<string, unknown>,
+    )}
+    <FormField
+      fieldKey={key}
+      schema={fieldSchema}
+      value={values[key]}
+      required={isRequired(key)}
+      animationIndex={animationIndexBase}
+      {node}
+      {nodes}
+      {edges}
+      {workflowId}
+      {authProvider}
+      onChange={(val) => onFieldChange(key, val)}
+    />
+  {/if}
+{:else if element.type === "VerticalLayout"}
+  <div class="form-uischema-layout form-uischema-layout--vertical">
+    {#each element.elements as child, idx (idx)}
+      <Self
+        element={child}
+        {schema}
+        {values}
+        {requiredFields}
+        animationIndexBase={animationIndexBase + idx}
+        {onFieldChange}
+        {toFieldSchema}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
+      />
+    {/each}
+  </div>
+{:else if element.type === "Group"}
+  <FormFieldset group={element}>
+    <div class="form-uischema-layout form-uischema-layout--vertical">
+      {#each element.elements as child, idx (idx)}
+        <Self
+          element={child}
+          {schema}
+          {values}
+          {requiredFields}
+          animationIndexBase={animationIndexBase + idx}
+          {onFieldChange}
+          {toFieldSchema}
+          {node}
+          {nodes}
+          {edges}
+          {workflowId}
+          {authProvider}
+        />
+      {/each}
+    </div>
+  </FormFieldset>
 {/if}
 
 <style>
-	.form-uischema-layout--vertical {
-		display: flex;
-		flex-direction: column;
-		gap: var(--fd-space-2xl);
-	}
+  .form-uischema-layout--vertical {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-2xl);
+  }
 </style>

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

@@ -1,6 +1,6 @@
-import type { UISchemaElement } from '../../types/uischema.js';
-import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
-import type { FieldSchema } from './types.js';
+import type { UISchemaElement } from "../../types/uischema.js";
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from "../../types/index.js";
+import type { FieldSchema } from "./types.js";
 interface Props {
     /** The UISchema element to render */
     element: UISchemaElement;

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

@@ -29,22 +29,22 @@
  * />
  * ```
  */
-export type { FieldType, FieldFormat, FieldOption, OneOfItem, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, CodeEditorFieldProps, MarkdownEditorFieldProps, TemplateEditorFieldProps, AutocompleteFieldProps, FieldSchema, FormFieldFactoryProps, FormFieldWrapperProps, SchemaFormProps, AutocompleteConfig } from './types.js';
-export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } from './types.js';
-export { default as FormField } from './FormField.svelte';
-export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
-export { default as FormTextField } from './FormTextField.svelte';
-export { default as FormTextarea } from './FormTextarea.svelte';
-export { default as FormNumberField } from './FormNumberField.svelte';
-export { default as FormRangeField } from './FormRangeField.svelte';
-export { default as FormToggle } from './FormToggle.svelte';
-export { default as FormSelect } from './FormSelect.svelte';
-export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
-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';
-export { default as FormFieldset } from './FormFieldset.svelte';
-export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
-export { createTemplateAutocomplete } from './templateAutocomplete.js';
+export type { FieldType, FieldFormat, FieldOption, OneOfItem, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, CodeEditorFieldProps, MarkdownEditorFieldProps, TemplateEditorFieldProps, AutocompleteFieldProps, FieldSchema, FormFieldFactoryProps, FormFieldWrapperProps, SchemaFormProps, AutocompleteConfig, } from "./types.js";
+export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions, } from "./types.js";
+export { default as FormField } from "./FormField.svelte";
+export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+export { default as FormTextField } from "./FormTextField.svelte";
+export { default as FormTextarea } from "./FormTextarea.svelte";
+export { default as FormNumberField } from "./FormNumberField.svelte";
+export { default as FormRangeField } from "./FormRangeField.svelte";
+export { default as FormToggle } from "./FormToggle.svelte";
+export { default as FormSelect } from "./FormSelect.svelte";
+export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
+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";
+export { default as FormFieldset } from "./FormFieldset.svelte";
+export { default as FormUISchemaRenderer } from "./FormUISchemaRenderer.svelte";
+export { createTemplateAutocomplete } from "./templateAutocomplete.js";

package/dist/components/form/index.js

@@ -29,26 +29,26 @@
  * />
  * ```
  */
-export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } from './types.js';
+export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions, } from "./types.js";
 // Main factory component
-export { default as FormField } from './FormField.svelte';
+export { default as FormField } from "./FormField.svelte";
 // Wrapper component
-export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
+export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
 // Individual field components
-export { default as FormTextField } from './FormTextField.svelte';
-export { default as FormTextarea } from './FormTextarea.svelte';
-export { default as FormNumberField } from './FormNumberField.svelte';
-export { default as FormRangeField } from './FormRangeField.svelte';
-export { default as FormToggle } from './FormToggle.svelte';
-export { default as FormSelect } from './FormSelect.svelte';
-export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
-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';
+export { default as FormTextField } from "./FormTextField.svelte";
+export { default as FormTextarea } from "./FormTextarea.svelte";
+export { default as FormNumberField } from "./FormNumberField.svelte";
+export { default as FormRangeField } from "./FormRangeField.svelte";
+export { default as FormToggle } from "./FormToggle.svelte";
+export { default as FormSelect } from "./FormSelect.svelte";
+export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
+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";
 // UISchema rendering components
-export { default as FormFieldset } from './FormFieldset.svelte';
-export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
+export { default as FormFieldset } from "./FormFieldset.svelte";
+export { default as FormUISchemaRenderer } from "./FormUISchemaRenderer.svelte";
 // Template autocomplete utilities
-export { createTemplateAutocomplete } from './templateAutocomplete.js';
+export { createTemplateAutocomplete } from "./templateAutocomplete.js";

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

@@ -10,8 +10,8 @@
  *
  * @module components/form/templateAutocomplete
  */
-import type { Extension } from '@codemirror/state';
-import type { VariableSchema } from '../../types/index.js';
+import type { Extension } from "@codemirror/state";
+import type { VariableSchema } from "../../types/index.js";
 /**
  * Creates a CodeMirror extension for template variable autocomplete.
  *