@flowdrop/flowdrop 1.0.0

package/dist/components/ConfigForm.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
+interface Props {
+    /** Optional workflow node (if provided, schema and values are derived from it) */
+    node?: WorkflowNode;
+    /** Direct config schema (used when node is not provided) */
+    schema?: ConfigSchema;
+    /**
+     * Optional UI Schema that controls field layout and grouping.
+     * When provided, fields render according to the UISchema tree structure.
+     * When absent, falls back to node.data.metadata.uiSchema, then flat rendering.
+     * @see https://jsonforms.io/docs/uischema
+     */
+    uiSchema?: UISchemaElement;
+    /** Direct config values (used when node is not provided) */
+    values?: Record<string, unknown>;
+    /** Whether to show UI extension settings section */
+    showUIExtensions?: boolean;
+    /** Optional workflow ID for context in external links */
+    workflowId?: string;
+    /** Whether to also save the workflow when saving config */
+    saveWorkflowWhenSavingConfig?: boolean;
+    /**
+     * All workflow nodes (used for deriving template variables from connected nodes).
+     * When provided along with workflowEdges, enables autocomplete for template fields.
+     */
+    workflowNodes?: WorkflowNode[];
+    /**
+     * All workflow edges (used for finding connections to derive template variables).
+     * When provided along with workflowNodes, enables autocomplete for template fields.
+     */
+    workflowEdges?: WorkflowEdge[];
+    /** Auth provider for API requests (used for template variable API mode) */
+    authProvider?: AuthProvider;
+    /** Callback when any field value changes (fired on blur for immediate sync) */
+    onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
+    /** Callback when form is saved (includes both config and extensions if enabled) */
+    onSave?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
+    /** Callback when form is cancelled */
+    onCancel?: () => void;
+}
+declare const ConfigForm: import("svelte").Component<Props, {}, "">;
+type ConfigForm = ReturnType<typeof ConfigForm>;
+export default ConfigForm;

package/dist/components/ConfigModal.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { ConfigSchema, ConfigValues } from '../types';
+	import ConfigForm from './ConfigForm.svelte';
+
+	interface Props {
+		isOpen: boolean;
+		nodeLabel: string;
+		configSchema: ConfigSchema;
+		configValues: ConfigValues;
+		onClose?: () => void;
+		onSave?: (values: ConfigValues) => void;
+		onCancel?: () => void;
+	}
+
+	let { onClose, onSave, onCancel, ...props }: Props = $props();
+	let localConfigValues = $derived.by(() => ({ ...props.configValues }));
+
+	function handleCancel() {
+		onCancel?.();
+	}
+
+	function handleClose() {
+		onClose?.();
+	}
+
+	// Close modal on escape key
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			handleClose();
+		}
+	}
+
+	// Close modal when clicking outside
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			handleClose();
+		}
+	}
+</script>
+
+{#if props.isOpen}
+	<!-- Modal Backdrop -->
+	<div
+		class="config-modal-backdrop"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="config-modal-title"
+		tabindex="-1"
+	>
+		<!-- Modal Container -->
+		<div class="config-modal">
+			<!-- Modal Header -->
+			<div class="config-modal__header">
+				<h2 id="config-modal-title" class="config-modal__title">
+					Configure: {props.nodeLabel}
+				</h2>
+				<button
+					type="button"
+					class="config-modal__close-btn"
+					onclick={handleClose}
+					aria-label="Close configuration modal"
+				>
+					<span aria-hidden="true">×</span>
+				</button>
+			</div>
+
+			<!-- Modal Content -->
+			<div class="config-modal__content">
+				<ConfigForm
+					schema={props.configSchema}
+					values={localConfigValues}
+					showUIExtensions={false}
+					onSave={(config) => {
+						onSave?.(config);
+					}}
+					onCancel={handleCancel}
+				/>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.config-modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+		padding: 1rem;
+	}
+
+	.config-modal {
+		background: white;
+		border-radius: 0.75rem;
+		box-shadow:
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+		width: 100%;
+		max-width: 80vw;
+		min-width: 40rem;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.config-modal__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.5rem 1.5rem 1rem 1.5rem;
+		border-bottom: 1px solid #e5e7eb;
+	}
+
+	.config-modal__title {
+		margin: 0;
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: #111827;
+	}
+
+	.config-modal__close-btn {
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		background: transparent;
+		border-radius: 0.375rem;
+		color: #6b7280;
+		font-size: 1.5rem;
+		font-weight: 400;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s;
+	}
+
+	.config-modal__close-btn:hover {
+		background-color: #f3f4f6;
+		color: #374151;
+	}
+
+	.config-modal__content {
+		padding: 1.5rem;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 1024px) {
+		.config-modal {
+			max-width: 90vw;
+			min-width: 32rem;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.config-modal {
+			max-width: 95vw;
+			min-width: 24rem;
+		}
+
+		.config-modal__header {
+			padding: 1rem 1rem 0.75rem 1rem;
+		}
+
+		.config-modal__content {
+			padding: 1rem;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.config-modal {
+			max-width: 100%;
+			min-width: auto;
+			margin: 0.5rem;
+		}
+	}
+</style>

package/dist/components/ConfigModal.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ConfigSchema, ConfigValues } from '../types';
+interface Props {
+    isOpen: boolean;
+    nodeLabel: string;
+    configSchema: ConfigSchema;
+    configValues: ConfigValues;
+    onClose?: () => void;
+    onSave?: (values: ConfigValues) => void;
+    onCancel?: () => void;
+}
+declare const ConfigModal: import("svelte").Component<Props, {}, "">;
+type ConfigModal = ReturnType<typeof ConfigModal>;
+export default ConfigModal;

package/dist/components/ConfigPanel.stories.svelte

@@ -0,0 +1,47 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ConfigPanel from './ConfigPanel.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Editor/ConfigPanel',
+		component: ConfigPanel,
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'padded'
+		},
+		args: {
+			onClose: fn()
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		title: 'HTTP Request',
+		id: 'node-abc-123',
+		description: 'Send HTTP requests to external APIs',
+		configTitle: 'Configuration'
+	}}
+/>
+
+<Story
+	name="With Details"
+	args={{
+		title: 'OpenAI Chat',
+		id: 'node-def-456',
+		description: 'Chat completion using OpenAI models',
+		details: [
+			{ label: 'Category', value: 'AI' },
+			{ label: 'Version', value: '1.2.0' }
+		]
+	}}
+/>
+
+<Story
+	name="Minimal"
+	args={{
+		title: 'Start Node'
+	}}
+/>

package/dist/components/ConfigPanel.stories.svelte.d.ts

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

@@ -0,0 +1,182 @@
+<!--
+  ConfigPanel Component
+  A generic panel for displaying details and configuration
+  Can be used for node config, workflow settings, or any entity with an ID
+  Accepts a slot for custom form content
+  Styled with BEM syntax
+-->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ReadOnlyDetails from './ReadOnlyDetails.svelte';
+	import { getUiSettings } from '../stores/settingsStore.svelte.js';
+
+	/**
+	 * A single detail item with label and value
+	 */
+	interface DetailItem {
+		/** The label to display */
+		label: string;
+		/** The value to display */
+		value: string;
+	}
+
+	/**
+	 * Props interface for ConfigPanel component
+	 */
+	interface Props {
+		/** Panel title displayed in the header */
+		title: string;
+		/** Unique identifier to display with copy button */
+		id?: string;
+		/** Optional description text */
+		description?: string;
+		/** Array of label-value pairs to display */
+		details?: DetailItem[];
+		/** Title for the configuration section */
+		configTitle?: string;
+		/** Callback function when the panel is closed */
+		onClose: () => void;
+		/** Slot content for the configuration form */
+		children?: Snippet;
+	}
+
+	const {
+		title,
+		id,
+		description,
+		details = [],
+		configTitle = 'Configuration',
+		onClose,
+		children
+	}: Props = $props();
+
+	/**
+	 * Check if details section should be shown
+	 */
+	const hasDetails = $derived(id !== undefined || details.length > 0 || description !== undefined);
+</script>
+
+<div class="config-panel" class:config-panel--compact={getUiSettings().compactMode}>
+	<!-- Header -->
+	<div class="config-panel__header">
+		<h2 class="config-panel__title">{title}</h2>
+		<button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
+	</div>
+
+	<!-- Details Section (between header and content) -->
+	{#if hasDetails && id}
+		<div class="config-panel__details">
+			<ReadOnlyDetails {id} {description} {details} />
+		</div>
+	{/if}
+
+	<!-- Content -->
+	<div class="config-panel__content">
+		{#if children}
+			<div class="config-panel__section">
+				<h3 class="config-panel__section-title">{configTitle}</h3>
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.config-panel {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: var(--fd-background);
+	}
+
+	.config-panel__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.875rem 1rem;
+		border-bottom: 1px solid var(--fd-border);
+		background-color: var(--fd-muted);
+		flex-shrink: 0;
+	}
+
+	.config-panel__title {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--fd-foreground);
+	}
+
+	.config-panel__close {
+		background: none;
+		border: none;
+		font-size: 1.25rem;
+		line-height: 1;
+		cursor: pointer;
+		color: var(--fd-muted-foreground);
+		padding: 0.25rem;
+		border-radius: var(--fd-radius-sm);
+		transition:
+			color var(--fd-transition-fast),
+			background-color var(--fd-transition-fast);
+	}
+
+	.config-panel__close:hover {
+		color: var(--fd-foreground);
+		background-color: var(--fd-subtle);
+	}
+
+	.config-panel__details {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--fd-border-muted);
+		background-color: var(--fd-muted);
+		flex-shrink: 0;
+	}
+
+	.config-panel__content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 1rem;
+	}
+
+	.config-panel__section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.config-panel__section-title {
+		margin: 0;
+		font-size: var(--fd-text-xs);
+		font-weight: 600;
+		color: var(--fd-muted-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	/* Compact Mode Styles */
+	.config-panel--compact .config-panel__header {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__title {
+		font-size: 0.875rem;
+	}
+
+	.config-panel--compact .config-panel__close {
+		font-size: 1rem;
+		padding: 0.125rem;
+	}
+
+	.config-panel--compact .config-panel__details {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__content {
+		padding: 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__section {
+		gap: 0.5rem;
+	}
+</style>

package/dist/components/ConfigPanel.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/**
+ * A single detail item with label and value
+ */
+interface DetailItem {
+    /** The label to display */
+    label: string;
+    /** The value to display */
+    value: string;
+}
+/**
+ * Props interface for ConfigPanel component
+ */
+interface Props {
+    /** Panel title displayed in the header */
+    title: string;
+    /** Unique identifier to display with copy button */
+    id?: string;
+    /** Optional description text */
+    description?: string;
+    /** Array of label-value pairs to display */
+    details?: DetailItem[];
+    /** Title for the configuration section */
+    configTitle?: string;
+    /** Callback function when the panel is closed */
+    onClose: () => void;
+    /** Slot content for the configuration form */
+    children?: Snippet;
+}
+declare const ConfigPanel: import("svelte").Component<Props, {}, "">;
+type ConfigPanel = ReturnType<typeof ConfigPanel>;
+export default ConfigPanel;

package/dist/components/ConnectionLine.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getDataTypeColor } from '../utils/colors';
+	import { useConnection } from '@xyflow/svelte';
+
+	const connection = useConnection();
+
+	let path: string | null = $derived.by(() => {
+		if (connection.current.inProgress) {
+			const { from, to } = connection.current;
+			return `M${from.x},${from.y} C ${from.x} ${to.y} ${from.x} ${to.y} ${to.x},${to.y}`;
+		}
+		return null;
+	});
+</script>
+
+{#if connection.current.inProgress}
+	<path
+		fill="none"
+		stroke-width={1.5}
+		class="animated"
+		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
+		d={path}
+	/>
+	<circle
+		cx={connection.current.to.x}
+		cy={connection.current.to.y}
+		fill="#fff"
+		r={3}
+		stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
+		stroke-width={1.5}
+	/>
+{/if}

package/dist/components/ConnectionLine.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConnectionLine: import("svelte").Component<Record<string, never>, {}, "">;
+type ConnectionLine = ReturnType<typeof ConnectionLine>;
+export default ConnectionLine;

package/dist/components/EdgeRefresher.svelte

@@ -0,0 +1,41 @@
+<!--
+  EdgeRefresher Component
+  Helper component that uses useUpdateNodeInternals to force edge recalculation
+  Must be rendered inside SvelteFlowProvider context
+-->
+
+<script lang="ts">
+	import { useUpdateNodeInternals } from '@xyflow/svelte';
+
+	interface Props {
+		/** Node ID to refresh - when this changes, edges are recalculated */
+		nodeIdToRefresh: string | null;
+		/** Callback when refresh is complete */
+		onRefreshComplete?: () => void;
+	}
+
+	let { nodeIdToRefresh, onRefreshComplete }: Props = $props();
+
+	/**
+	 * Get the updateNodeInternals function from Svelte Flow context
+	 * This recalculates handle positions and forces edge path updates
+	 */
+	const updateNodeInternals = useUpdateNodeInternals();
+
+	/**
+	 * Watch for nodeIdToRefresh changes and trigger edge recalculation
+	 */
+	$effect(() => {
+		if (nodeIdToRefresh) {
+			// Tell Svelte Flow to recalculate node internals (handle positions)
+			updateNodeInternals(nodeIdToRefresh);
+
+			// Notify parent that refresh is complete
+			if (onRefreshComplete) {
+				onRefreshComplete();
+			}
+		}
+	});
+</script>
+
+<!-- This component renders nothing - it's just for the hook logic -->

package/dist/components/EdgeRefresher.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Node ID to refresh - when this changes, edges are recalculated */
+    nodeIdToRefresh: string | null;
+    /** Callback when refresh is complete */
+    onRefreshComplete?: () => void;
+}
+declare const EdgeRefresher: import("svelte").Component<Props, {}, "">;
+type EdgeRefresher = ReturnType<typeof EdgeRefresher>;
+export default EdgeRefresher;