@d34dman/flowdrop 0.0.23 → 0.0.24

package/dist/components/ConfigForm.svelte

@@ -131,7 +131,7 @@
 				if (inputEl.id && !inputEl.id.startsWith('ext-')) {
 					if (inputEl instanceof HTMLInputElement && inputEl.type === 'checkbox') {
 						updatedConfig[inputEl.id] = inputEl.checked;
-					} else if (inputEl instanceof HTMLInputElement && inputEl.type === 'number') {
+					} else if (inputEl instanceof HTMLInputElement && (inputEl.type === 'number' || inputEl.type === 'range')) {
 						updatedConfig[inputEl.id] = inputEl.value ? Number(inputEl.value) : inputEl.value;
 					} else if (inputEl instanceof HTMLInputElement && inputEl.type === 'hidden') {
 						// Parse hidden field values that might be JSON

package/dist/components/form/FormField.svelte

@@ -5,7 +5,7 @@
   Features:
   - Automatically selects the correct field component based on schema
   - Wraps fields with FormFieldWrapper for consistent layout
-  - Supports all current field types (string, number, boolean, select, checkbox group)
+  - Supports all current field types (string, number, boolean, select, checkbox group, range)
   - Extensible architecture for future complex types (array, object)
   
   Type Resolution Order:
@@ -13,11 +13,12 @@
   2. enum with multiple: true -> FormCheckboxGroup
   3. enum -> FormSelect
   4. format: 'multiline' -> FormTextarea
-  5. type: 'string' -> FormTextField
-  6. type: 'number' or 'integer' -> FormNumberField
-  7. type: 'boolean' -> FormToggle
-  8. type: 'select' or has options -> FormSelect
-  9. fallback -> FormTextField
+  5. format: 'range' (number/integer) -> FormRangeField
+  6. type: 'string' -> FormTextField
+  7. type: 'number' or 'integer' -> FormNumberField
+  8. type: 'boolean' -> FormToggle
+  9. type: 'select' or has options -> FormSelect
+  10. fallback -> FormTextField
 -->
 
 <script lang="ts">
@@ -25,6 +26,7 @@
 	import FormTextField from "./FormTextField.svelte";
 	import FormTextarea from "./FormTextarea.svelte";
 	import FormNumberField from "./FormNumberField.svelte";
+	import FormRangeField from "./FormRangeField.svelte";
 	import FormToggle from "./FormToggle.svelte";
 	import FormSelect from "./FormSelect.svelte";
 	import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
@@ -94,6 +96,11 @@
 			return "textarea";
 		}
 
+		// Range slider for number/integer with format: "range"
+		if ((schema.type === "number" || schema.type === "integer") && schema.format === "range") {
+			return "range";
+		}
+
 		// String -> text field
 		if (schema.type === "string") {
 			return "text";
@@ -218,6 +225,17 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
+		{:else if fieldType === "range"}
+			<FormRangeField
+				id={fieldKey}
+				value={numberValue}
+				min={schema.minimum}
+				max={schema.maximum}
+				step={schema.step}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
 		{:else if fieldType === "toggle"}
 			<FormToggle
 				id={fieldKey}

package/dist/components/form/FormRangeField.svelte

@@ -0,0 +1,252 @@
+<!--
+  FormRangeField Component
+  Range slider input field for numeric values
+  
+  Features:
+  - Modern styled range slider with custom track and thumb
+  - Min/max/step support for value constraints
+  - Real-time value display with tabular numeric font
+  - Proper ARIA attributes for accessibility
+  - Visual feedback for current value position
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: number | string;
+		/** Minimum allowed value */
+		min?: number;
+		/** Maximum allowed value */
+		max?: number;
+		/** Step increment */
+		step?: number;
+		/** Whether the field is required */
+		required?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: number) => void;
+	}
+
+	let {
+		id,
+		value = 0,
+		min = 0,
+		max = 100,
+		step = 1,
+		required = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Compute the current numeric value
+	 * Handles string values and defaults
+	 */
+	const numericValue = $derived.by((): number => {
+		if (typeof value === "number") {
+			return value;
+		}
+		const parsed = Number(value);
+		return isNaN(parsed) ? min : parsed;
+	});
+
+	/**
+	 * Compute the percentage position for the filled track
+	 * Used to show visual progress of the slider
+	 */
+	const progressPercentage = $derived.by((): number => {
+		const range = max - min;
+		if (range === 0) return 0;
+		return ((numericValue - min) / range) * 100;
+	});
+
+	/**
+	 * Handle input changes
+	 * Converts the value to a number and triggers onChange
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		const numValue = Number(target.value);
+		onChange(numValue);
+	}
+</script>
+
+<div class="form-range-container">
+	<div class="form-range-slider">
+		<input
+			{id}
+			type="range"
+			class="form-range-field"
+			value={numericValue}
+			{min}
+			{max}
+			{step}
+			aria-describedby={ariaDescribedBy}
+			aria-required={required}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={numericValue}
+			oninput={handleInput}
+			style="--progress: {progressPercentage}%"
+		/>
+	</div>
+	<div class="form-range-values">
+		<span class="form-range-min">{min}</span>
+		<span class="form-range-current">{numericValue}</span>
+		<span class="form-range-max">{max}</span>
+	</div>
+</div>
+
+<style>
+	.form-range-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+	}
+
+	.form-range-slider {
+		position: relative;
+		width: 100%;
+		padding: 0.25rem 0;
+	}
+
+	.form-range-field {
+		width: 100%;
+		height: 6px;
+		border-radius: 3px;
+		appearance: none;
+		-webkit-appearance: none;
+		background: linear-gradient(
+			to right,
+			var(--color-ref-blue-500, #3b82f6) 0%,
+			var(--color-ref-blue-500, #3b82f6) var(--progress, 0%),
+			var(--color-ref-gray-200, #e5e7eb) var(--progress, 0%),
+			var(--color-ref-gray-200, #e5e7eb) 100%
+		);
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	/* Webkit (Chrome, Safari, Edge) - Track */
+	.form-range-field::-webkit-slider-runnable-track {
+		height: 6px;
+		border-radius: 3px;
+	}
+
+	/* Webkit - Thumb */
+	.form-range-field::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: linear-gradient(
+			135deg,
+			#ffffff 0%,
+			var(--color-ref-gray-50, #f9fafb) 100%
+		);
+		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		box-shadow:
+			0 2px 6px rgba(59, 130, 246, 0.25),
+			0 1px 2px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		margin-top: -6px;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.form-range-field::-webkit-slider-thumb:hover {
+		transform: scale(1.1);
+		box-shadow:
+			0 4px 12px rgba(59, 130, 246, 0.35),
+			0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.form-range-field:focus::-webkit-slider-thumb {
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.2),
+			0 4px 12px rgba(59, 130, 246, 0.35);
+	}
+
+	/* Firefox - Track */
+	.form-range-field::-moz-range-track {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--color-ref-gray-200, #e5e7eb);
+	}
+
+	.form-range-field::-moz-range-progress {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--color-ref-blue-500, #3b82f6);
+	}
+
+	/* Firefox - Thumb */
+	.form-range-field::-moz-range-thumb {
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: linear-gradient(
+			135deg,
+			#ffffff 0%,
+			var(--color-ref-gray-50, #f9fafb) 100%
+		);
+		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		box-shadow:
+			0 2px 6px rgba(59, 130, 246, 0.25),
+			0 1px 2px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.form-range-field::-moz-range-thumb:hover {
+		transform: scale(1.1);
+		box-shadow:
+			0 4px 12px rgba(59, 130, 246, 0.35),
+			0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.form-range-field:focus::-moz-range-thumb {
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.2),
+			0 4px 12px rgba(59, 130, 246, 0.35);
+	}
+
+	/* Focus styles */
+	.form-range-field:focus {
+		outline: none;
+	}
+
+	.form-range-field:focus-visible {
+		outline: none;
+	}
+
+	/* Value display row */
+	.form-range-values {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.form-range-min,
+	.form-range-max {
+		color: var(--color-ref-gray-400, #9ca3af);
+		font-weight: 400;
+	}
+
+	.form-range-current {
+		font-weight: 600;
+		color: var(--color-ref-blue-600, #2563eb);
+		background-color: var(--color-ref-blue-50, #eff6ff);
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
+		min-width: 2.5rem;
+		text-align: center;
+	}
+</style>
+

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

@@ -0,0 +1,21 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: number | string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+}
+declare const FormRangeField: import("svelte").Component<Props, {}, "">;
+type FormRangeField = ReturnType<typeof FormRangeField>;
+export default FormRangeField;

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

@@ -35,6 +35,7 @@ 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";

package/dist/components/form/index.js

@@ -39,6 +39,7 @@ 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";

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

@@ -14,8 +14,9 @@ export type FieldType = "string" | "number" | "integer" | "boolean" | "select" |
  * Field format for specialized rendering
  * - multiline: Renders as textarea
  * - hidden: Field is hidden from UI but included in form submission
+ * - range: Renders as range slider for numeric values
  */
-export type FieldFormat = "multiline" | "hidden" | string;
+export type FieldFormat = "multiline" | "hidden" | "range" | string;
 /**
  * Option type for select and checkbox group fields
  */
@@ -84,6 +85,19 @@ export interface ToggleFieldProps extends BaseFieldProps {
     offLabel?: string;
     onChange: (value: boolean) => void;
 }
+/**
+ * Properties for range slider fields
+ */
+export interface RangeFieldProps extends BaseFieldProps {
+    value: 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
  */
@@ -144,6 +158,8 @@ export interface FieldSchema {
     minimum?: number;
     /** Maximum value for numbers */
     maximum?: number;
+    /** Step increment for number/range inputs */
+    step?: number;
     /** Minimum length for strings */
     minLength?: number;
     /** Maximum length for strings */

package/dist/components/nodes/GatewayNode.svelte

@@ -10,24 +10,12 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { WorkflowNode, NodePort } from '../../types/index.js';
+	import type { WorkflowNode, NodePort, Branch } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon } from '../../utils/icons.js';
 	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
 	import { connectedHandles } from '../../stores/workflowStore.js';
 
-	/**
-	 * Branch interface for gateway nodes
-	 * - name: Internal identifier used for handle IDs and connections
-	 * - label: Display label shown in the UI (optional, defaults to name)
-	 * - value: Optional value associated with the branch (e.g., for Switch matching)
-	 */
-	interface Branch {
-		name: string;
-		label?: string;
-		value?: string;
-	}
-
 	interface Props {
 		data: WorkflowNode['data'] & {
 			nodeId?: string;

package/dist/index.d.ts

@@ -4,7 +4,7 @@
  */
 import './styles/base.css';
 import './registry/builtinNodes.js';
-export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } from './types/index.js';
+export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } from './types/index.js';
 export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from './types/config.js';
 export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from './types/auth.js';
 export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './types/auth.js';

package/dist/types/index.d.ts

@@ -87,6 +87,37 @@ export interface DynamicPort {
     /** Whether this port is required for execution */
     required?: boolean;
 }
+/**
+ * Branch configuration for gateway nodes
+ *
+ * Branches define conditional output paths in gateway/switch nodes.
+ * Each branch creates an output handle that can be connected to downstream nodes.
+ * Branches are stored in `config.branches` array and support dynamic addition/removal
+ * through the node configuration panel.
+ *
+ * @example
+ * ```typescript
+ * const branches: Branch[] = [
+ *   { name: "high", label: "High Priority", condition: "priority > 8" },
+ *   { name: "medium", label: "Medium Priority", condition: "priority >= 4" },
+ *   { name: "default", label: "Default", isDefault: true }
+ * ];
+ * ```
+ */
+export interface Branch {
+    /** Unique identifier for the branch (used as handle ID and for connections) */
+    name: string;
+    /** Display label shown in the UI (optional, defaults to name) */
+    label?: string;
+    /** Description of when this branch is activated */
+    description?: string;
+    /** Optional value associated with the branch (e.g., for Switch matching) */
+    value?: string;
+    /** Optional condition expression for this branch */
+    condition?: string;
+    /** Whether this is the default/fallback branch */
+    isDefault?: boolean;
+}
 /**
  * Convert a DynamicPort to a NodePort
  * @param port - The dynamic port configuration
@@ -180,6 +211,8 @@ export interface NodeMetadata {
     inputs: NodePort[];
     outputs: NodePort[];
     configSchema?: ConfigSchema;
+    /** Default configuration values for this node type */
+    config?: Record<string, unknown>;
     tags?: string[];
     /**
      * Custom extension properties for 3rd party integrations
@@ -314,13 +347,59 @@ export type SchemaProperty<T extends SchemaType> = T extends 'config' ? ConfigPr
 export type SchemaTypeMap<T extends SchemaType> = T extends 'config' ? ConfigSchema : T extends 'input' ? InputSchema : T extends 'output' ? OutputSchema : never;
 /**
  * Node configuration values
- * Key-value pairs of user-entered configuration values
+ *
+ * Key-value pairs of user-entered configuration values based on the node's configSchema.
+ * This is where all node-specific settings are stored, including:
+ *
+ * **Standard Properties:**
+ * - Any property defined in the node's `configSchema` (e.g., model, temperature, apiKey)
+ *
+ * **Special Properties (Dynamic Ports):**
+ * - `dynamicInputs`: Array of DynamicPort for user-defined input handles
+ * - `dynamicOutputs`: Array of DynamicPort for user-defined output handles
+ * - `branches`: Array of Branch for gateway node conditional output paths
+ *
+ * The backend uses this object to:
+ * - Store and retrieve node configuration
+ * - Pass configuration values to node processors during execution
+ * - Persist node state across sessions
+ *
+ * @example
+ * ```typescript
+ * const config: ConfigValues = {
+ *   // Standard configuration from configSchema
+ *   model: "gpt-4o-mini",
+ *   temperature: 0.7,
+ *   maxTokens: 1000,
+ *
+ *   // Dynamic input ports
+ *   dynamicInputs: [
+ *     { name: "extra_data", label: "Extra Data", dataType: "json" }
+ *   ],
+ *
+ *   // Gateway branches
+ *   branches: [
+ *     { name: "success", label: "Success", condition: "status === 200" },
+ *     { name: "error", label: "Error", isDefault: true }
+ *   ]
+ * };
+ * ```
  */
 export interface ConfigValues {
+    /** Dynamic input ports for user-defined input handles */
+    dynamicInputs?: DynamicPort[];
+    /** Dynamic output ports for user-defined output handles */
+    dynamicOutputs?: DynamicPort[];
+    /** Branches for gateway node conditional output paths */
+    branches?: Branch[];
+    /** Any other configuration properties defined in configSchema */
     [key: string]: unknown;
 }
 /**
  * Extended node type for workflows
+ *
+ * Represents a node instance in a workflow, containing position, display data,
+ * configuration values, and metadata from the node type definition.
  */
 export interface WorkflowNode extends Node {
     id: string;
@@ -328,11 +407,30 @@ export interface WorkflowNode extends Node {
     position: XYPosition;
     deletable?: boolean;
     data: {
+        /** Display label for the node instance */
         label: string;
+        /**
+         * Node configuration values
+         *
+         * Contains all user-configured settings for this node instance based on the
+         * node type's configSchema. This includes standard properties defined in the
+         * schema as well as special dynamic port configurations.
+         *
+         * The backend uses this object to:
+         * - Store and retrieve node configuration
+         * - Pass configuration values to node processors during execution
+         * - Persist node state across sessions
+         *
+         * @see ConfigValues for detailed documentation of available properties
+         */
         config: ConfigValues;
+        /** Node type metadata (inputs, outputs, configSchema, etc.) */
         metadata: NodeMetadata;
+        /** Whether the node is currently processing/executing */
         isProcessing?: boolean;
+        /** Error message if the node execution failed */
         error?: string;
+        /** Alternative node identifier */
         nodeId?: string;
         /** Node execution tracking information */
         executionInfo?: NodeExecutionInfo;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@d34dman/flowdrop",
   "license": "MIT",
   "private": false,
-  "version": "0.0.23",
+  "version": "0.0.24",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",