@d34dman/flowdrop 0.0.61 → 0.0.63

package/dist/components/Navbar.stories.svelte

@@ -0,0 +1,41 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Navbar from "./Navbar.svelte";
+
+	const { Story } = defineMeta({
+		title: "Editor/Navbar",
+		component: Navbar,
+		tags: ["autodocs"],
+		parameters: {
+			layout: "fullscreen",
+		},
+	});
+</script>
+
+<Story name="Default" args={{
+	title: "My Workflow",
+	showStatus: true,
+	showSettings: true,
+}} />
+
+<Story name="With Actions" args={{
+	title: "Workflow Editor",
+	primaryActions: [
+		{ label: "Save", href: "#", icon: "mdi:content-save", variant: "primary" },
+		{ label: "Export", href: "#", icon: "mdi:download", variant: "outline" },
+	],
+	showStatus: true,
+}} />
+
+<Story name="With Breadcrumbs" args={{
+	breadcrumbs: [
+		{ label: "Workflows", href: "#", icon: "mdi:folder" },
+		{ label: "My Workflow", href: "#" },
+	],
+	showSettings: true,
+}} />
+
+<Story name="Minimal" args={{
+	showStatus: false,
+	showSettings: false,
+}} />

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

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

@@ -380,7 +380,7 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 0.375rem;
-		padding: var(--fd-space-1) var(--fd-space-2);
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
 		background-color: var(--fd-success-muted);
 		border-radius: var(--fd-radius-md);
 		font-size: var(--fd-text-xs);
@@ -589,8 +589,8 @@
 	.flowdrop-navbar__end {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		margin-left: var(--fd-space-3);
+		gap: var(--fd-space-xs);
+		margin-left: var(--fd-space-md);
 	}
 
 	.flowdrop-navbar__settings-btn {
@@ -705,7 +705,7 @@
 
 		.flowdrop-navbar__status {
 			font-size: var(--fd-text-xs);
-			padding: var(--fd-space-1) var(--fd-space-2);
+			padding: var(--fd-space-3xs) var(--fd-space-xs);
 		}
 	}
 

package/dist/components/NodeSidebar.svelte

@@ -10,9 +10,9 @@
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
 	import { getCategoryColorToken } from '../utils/colors.js';
-	import { getCategoryLabel } from '../stores/categoriesStore.js';
+	import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
 	import { SvelteSet } from 'svelte/reactivity';
-	import { uiSettings, updateSettings } from '../stores/settingsStore.js';
+	import { getUiSettings, updateSettings } from '../stores/settingsStore.svelte.js';
 
 	interface Props {
 		nodes: NodeMetadata[];
@@ -29,7 +29,7 @@
 	 * Persists the new state to settings
 	 */
 	function toggleSidebar(): void {
-		updateSettings({ ui: { sidebarCollapsed: !$uiSettings.sidebarCollapsed } });
+		updateSettings({ ui: { sidebarCollapsed: !getUiSettings().sidebarCollapsed } });
 	}
 
 	/**
@@ -101,7 +101,7 @@
 		if (!event.dataTransfer) return;
 
 		// Extract initial config from configSchema with proper null checks
-		let initialConfig = {};
+		let initialConfig: Record<string, unknown> = {};
 		if (
 			nodeType.configSchema &&
 			typeof nodeType.configSchema === 'object' &&
@@ -195,9 +195,9 @@
 <!-- Components Sidebar - Always Visible -->
 <aside
 	class="flowdrop-sidebar flowdrop-sidebar--container"
-	class:flowdrop-sidebar--collapsed={$uiSettings.sidebarCollapsed}
-	class:flowdrop-sidebar--compact={$uiSettings.compactMode}
-	style:width="{$uiSettings.sidebarCollapsed ? 48 : $uiSettings.sidebarWidth}px"
+	class:flowdrop-sidebar--collapsed={getUiSettings().sidebarCollapsed}
+	class:flowdrop-sidebar--compact={getUiSettings().compactMode}
+	style:width="{getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth}px"
 	aria-label="Components sidebar"
 >
 	<!-- Header -->
@@ -205,19 +205,19 @@
 		<button
 			class="flowdrop-sidebar__toggle"
 			onclick={toggleSidebar}
-			aria-label={$uiSettings.sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-			title={$uiSettings.sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+			aria-label={getUiSettings().sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+			title={getUiSettings().sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
 		>
-			<Icon icon={$uiSettings.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'} />
+			<Icon icon={getUiSettings().sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'} />
 		</button>
-		{#if !$uiSettings.sidebarCollapsed}
+		{#if !getUiSettings().sidebarCollapsed}
 			<div class="flowdrop-sidebar__title">
 				<h2 class="flowdrop-text--lg flowdrop-font--bold">Components</h2>
 			</div>
 		{/if}
 	</div>
 
-	{#if !$uiSettings.sidebarCollapsed}
+	{#if !getUiSettings().sidebarCollapsed}
 		<!-- Search Section -->
 		<div class="flowdrop-sidebar__search">
 			<div class="flowdrop-join flowdrop-w--full">

package/dist/components/NodeStatusOverlay.stories.svelte

@@ -0,0 +1,74 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
+
+	const { Story } = defineMeta({
+		title: "Editor/NodeStatusOverlay",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+{#snippet nodeBox(label)}
+	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
+		<NodeStatusOverlay executionInfo={{
+			status: "idle",
+			executionCount: 3,
+			isExecuting: false,
+			lastExecuted: new Date().toISOString(),
+		}} />
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">{label}</div>
+	</div>
+{/snippet}
+
+<Story name="Idle (with history)">
+	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
+		<NodeStatusOverlay executionInfo={{
+			status: "idle",
+			executionCount: 3,
+			isExecuting: false,
+			lastExecuted: new Date().toISOString(),
+		}} showDetails />
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Node Content</div>
+	</div>
+</Story>
+
+<Story name="Running">
+	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
+		<NodeStatusOverlay executionInfo={{
+			status: "running",
+			executionCount: 1,
+			isExecuting: true,
+		}} />
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Processing...</div>
+	</div>
+</Story>
+
+<Story name="Completed">
+	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
+		<NodeStatusOverlay executionInfo={{
+			status: "completed",
+			executionCount: 5,
+			isExecuting: false,
+			lastExecuted: new Date().toISOString(),
+			lastExecutionDuration: 1250,
+		}} showDetails />
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Done!</div>
+	</div>
+</Story>
+
+<Story name="Failed">
+	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
+		<NodeStatusOverlay executionInfo={{
+			status: "failed",
+			executionCount: 2,
+			isExecuting: false,
+			lastError: "Connection timeout",
+			lastExecuted: new Date().toISOString(),
+			lastExecutionDuration: 30000,
+		}} showDetails />
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Error</div>
+	</div>
+</Story>

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

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

@@ -11,6 +11,7 @@
 	import { FlowDropApiClient } from '../api/client.js';
 	import type { Workflow } from '../types/index.js';
 	import type { EndpointConfig } from '../config/endpoints.js';
+	import { logger } from '../utils/logger.js';
 
 	interface Props {
 		pipelineId: string;
@@ -38,9 +39,14 @@
 
 	// Pipeline status and job data
 	let pipelineStatus = $state<string>('unknown');
+	interface PipelineNodeStatus {
+		status: string;
+		[key: string]: unknown;
+	}
+
 	let jobStatusData = $state<{
-		jobs: any[];
-		node_statuses: Record<string, any>;
+		jobs: Record<string, unknown>[];
+		node_statuses: Record<string, PipelineNodeStatus>;
 		status_summary: {
 			total: number;
 			pending: number;
@@ -111,7 +117,8 @@
 				for (const nodeId in jobStatusData.node_statuses) {
 					const status = jobStatusData.node_statuses[nodeId].status;
 					if (['pending', 'running', 'completed', 'failed', 'cancelled'].includes(status)) {
-						newNodeStatuses[nodeId] = status === 'failed' ? 'error' : status;
+						newNodeStatuses[nodeId] =
+							status === 'failed' ? 'error' : (status as 'pending' | 'running' | 'completed');
 					}
 				}
 				nodeStatuses = newNodeStatuses;
@@ -119,7 +126,7 @@
 
 			addLog('info', `Job status updated: ${jobStatusData.status_summary.total} total jobs`);
 		} catch (error) {
-			console.error('Failed to fetch pipeline data:', error);
+			logger.error('Failed to fetch pipeline data:', error);
 			addLog(
 				'error',
 				`Failed to fetch pipeline data: ${error instanceof Error ? error.message : 'Unknown error'}`

package/dist/components/PortCoordinateTracker.svelte

@@ -13,7 +13,7 @@
 	import {
 		rebuildAllPortCoordinates,
 		updateNodePortCoordinates
-	} from '../stores/portCoordinateStore.js';
+	} from '../stores/portCoordinateStore.svelte.js';
 
 	interface Props {
 		/** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */

package/dist/components/SchemaForm.stories.svelte

@@ -0,0 +1,101 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SchemaForm from "./SchemaForm.svelte";
+	import { fn } from "storybook/test";
+
+	const { Story } = defineMeta({
+		title: "Form/SchemaForm",
+		component: SchemaForm,
+		tags: ["autodocs"],
+		args: {
+			onChange: fn(),
+			onSave: fn(),
+			onCancel: fn(),
+		},
+	});
+</script>
+
+<Story name="Simple Form" args={{
+	schema: {
+		type: "object",
+		properties: {
+			name: { type: "string", title: "Name", description: "Enter your full name" },
+			age: { type: "number", title: "Age", minimum: 0, maximum: 120 },
+			active: { type: "boolean", title: "Active", default: true },
+		},
+		required: ["name"],
+	},
+	values: { name: "Alice", age: 30, active: true },
+}} />
+
+<Story name="Select Fields" args={{
+	schema: {
+		type: "object",
+		properties: {
+			model: {
+				type: "string",
+				title: "AI Model",
+				oneOf: [
+					{ const: "gpt-4", title: "GPT-4" },
+					{ const: "gpt-3.5", title: "GPT-3.5 Turbo" },
+					{ const: "claude-3", title: "Claude 3" },
+				],
+			},
+			temperature: {
+				type: "number",
+				title: "Temperature",
+				format: "range",
+				minimum: 0,
+				maximum: 2,
+				step: 0.1,
+				default: 0.7,
+			},
+			prompt: {
+				type: "string",
+				title: "System Prompt",
+				format: "multiline",
+				description: "The system prompt for the AI model",
+			},
+		},
+	},
+	values: { model: "gpt-4", temperature: 0.7, prompt: "You are a helpful assistant." },
+}} />
+
+<Story name="With Actions" args={{
+	schema: {
+		type: "object",
+		properties: {
+			email: { type: "string", title: "Email" },
+			notifications: { type: "boolean", title: "Enable Notifications" },
+		},
+		required: ["email"],
+	},
+	values: { email: "", notifications: true },
+	showActions: true,
+	saveLabel: "Save Settings",
+	cancelLabel: "Reset",
+}} />
+
+<Story name="Loading" args={{
+	schema: {
+		type: "object",
+		properties: {
+			name: { type: "string", title: "Name" },
+		},
+	},
+	values: { name: "Test" },
+	showActions: true,
+	loading: true,
+}} />
+
+<Story name="Disabled" args={{
+	schema: {
+		type: "object",
+		properties: {
+			name: { type: "string", title: "Name" },
+			role: { type: "string", title: "Role" },
+		},
+	},
+	values: { name: "Admin", role: "Super User" },
+	disabled: true,
+}} />

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

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

@@ -173,6 +173,11 @@
 	setContext<() => AuthProvider | undefined>('flowdrop:getAuthProvider', () => authProvider);
 	setContext<() => string>('flowdrop:getBaseUrl', () => baseUrl);
 
+	/**
+	 * Reference to this component's form element
+	 */
+	let formRef: HTMLFormElement | undefined = $state();
+
 	/**
 	 * Internal reactive state for form values
 	 */
@@ -231,11 +236,10 @@
 		}
 
 		// Collect all form values including hidden fields
-		const form = document.querySelector('.schema-form');
 		const updatedValues: Record<string, unknown> = { ...formValues };
 
-		if (form) {
-			const inputs = form.querySelectorAll('input, select, textarea');
+		if (formRef) {
+			const inputs = formRef.querySelectorAll('input, select, textarea');
 			inputs.forEach((input: Element) => {
 				const inputEl = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 				if (inputEl.id) {
@@ -299,6 +303,7 @@
 
 {#if schema?.properties}
 	<form
+		bind:this={formRef}
 		class="schema-form {className}"
 		class:schema-form--loading={loading}
 		class:schema-form--disabled={disabled}
@@ -377,7 +382,7 @@
 	.schema-form {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-6);
+		gap: var(--fd-space-3xl);
 	}
 
 	.schema-form--loading,
@@ -389,7 +394,7 @@
 	.schema-form__fields {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-5);
+		gap: var(--fd-space-2xl);
 	}
 
 	/* ============================================
@@ -398,19 +403,19 @@
 
 	.schema-form__footer {
 		display: flex;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 		justify-content: flex-end;
-		padding-top: var(--fd-space-4);
+		padding-top: var(--fd-space-xl);
 		border-top: 1px solid var(--fd-border-muted);
-		margin-top: var(--fd-space-2);
+		margin-top: var(--fd-space-xs);
 	}
 
 	.schema-form__button {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-2);
-		padding: 0.625rem var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: 0.625rem var(--fd-space-xl);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
 		font-weight: 600;
@@ -501,14 +506,14 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: var(--fd-space-12) var(--fd-space-6);
+		padding: var(--fd-space-6xl) var(--fd-space-3xl);
 		text-align: center;
 	}
 
 	.schema-form__empty-icon {
 		width: 3rem;
 		height: 3rem;
-		margin-bottom: var(--fd-space-4);
+		margin-bottom: var(--fd-space-xl);
 		color: var(--fd-border);
 	}
 

package/dist/components/SettingsModal.svelte

@@ -117,7 +117,7 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions — native <dialog> backdrop click-to-close pattern -->
 <dialog
 	bind:this={dialogRef}
 	class="flowdrop-settings-modal {className}"
@@ -213,7 +213,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		border-bottom: 1px solid var(--fd-border);
 		flex-shrink: 0;
 	}
@@ -221,7 +221,7 @@
 	.flowdrop-settings-modal__title {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		margin: 0;
 		font-size: var(--fd-text-lg);
 		font-weight: 600;