@d34dman/flowdrop 0.0.63 → 0.0.64

package/README.md

@@ -49,6 +49,8 @@ No vendor lock-in. No data leaving your walls. No surprise bills.
 npm install @d34dman/flowdrop
 ```
 
+> **Note:** FlowDrop supports **one editor instance per page** (module-level singleton stores). See [Architecture Notes](#architecture-notes) for details.
+
 You get a production-ready workflow UI. You keep full control of everything else.
 
 ## Quickstart

package/dist/adapters/agentspec/AgentSpecAdapter.js

@@ -13,46 +13,7 @@ import { getComponentTypeDefaults, extractComponentType, AGENTSPEC_NAMESPACE } f
 import { computeAutoLayout } from './autoLayout.js';
 import { v4 as uuidv4 } from 'uuid';
 import { logger } from '../../utils/logger.js';
-// ============================================================================
-// Handle ID Helpers
-// ============================================================================
-/**
- * Build a FlowDrop handle ID from node ID, direction, and port ID.
- * Format: `${nodeId}-${direction}-${portId}`
- */
-function buildHandleId(nodeId, direction, portId) {
-    return `${nodeId}-${direction}-${portId}`;
-}
-/**
- * Extract port ID from a FlowDrop handle ID.
- * Handles format: `${nodeId}-output-${portId}` or `${nodeId}-input-${portId}`
- */
-function extractPortId(handleId) {
-    if (!handleId)
-        return null;
-    const outputMatch = handleId.lastIndexOf('-output-');
-    if (outputMatch !== -1) {
-        return handleId.substring(outputMatch + '-output-'.length);
-    }
-    const inputMatch = handleId.lastIndexOf('-input-');
-    if (inputMatch !== -1) {
-        return handleId.substring(inputMatch + '-input-'.length);
-    }
-    // Short format: the handleId IS the port ID
-    return handleId;
-}
-/**
- * Extract direction from a FlowDrop handle ID.
- */
-function extractDirection(handleId) {
-    if (!handleId)
-        return null;
-    if (handleId.lastIndexOf('-output-') !== -1)
-        return 'output';
-    if (handleId.lastIndexOf('-input-') !== -1)
-        return 'input';
-    return null;
-}
+import { buildHandleId, extractPortId, extractDirection } from '../../utils/handleIds.js';
 // ============================================================================
 // Property ↔ Port Conversion
 // ============================================================================

package/dist/api/enhanced-client.d.ts

@@ -161,4 +161,23 @@ export declare class EnhancedFlowDropApiClient {
         version: string;
         build: string;
     }>;
+    /**
+     * Fetch pipeline data including job information and status
+     */
+    getPipelineData(pipelineId: string): Promise<{
+        status: string;
+        jobs: Array<Record<string, unknown>>;
+        node_statuses: Record<string, {
+            status: string;
+            [key: string]: unknown;
+        }>;
+        job_status_summary: {
+            total: number;
+            pending: number;
+            running: number;
+            completed: number;
+            failed: number;
+            cancelled: number;
+        };
+    }>;
 }

package/dist/api/enhanced-client.js

@@ -418,4 +418,13 @@ export class EnhancedFlowDropApiClient {
         }
         return response.data;
     }
+    // =========================================================================
+    // Pipeline API Methods
+    // =========================================================================
+    /**
+     * Fetch pipeline data including job information and status
+     */
+    async getPipelineData(pipelineId) {
+        return this.request('pipelines.get', this.config.endpoints.pipelines.get, { id: pipelineId }, {}, 'get pipeline data');
+    }
 }

package/dist/components/App.svelte

@@ -507,38 +507,42 @@
 	// Load node types on mount
 	onMount(() => {
 		(async () => {
-			await initializeApiEndpoints();
+			try {
+				await initializeApiEndpoints();
 
-			// Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
-			// mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
-			initializePortCompatibility(DEFAULT_PORT_CONFIG);
+				// Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
+				// mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
+				initializePortCompatibility(DEFAULT_PORT_CONFIG);
 
-			await fetchNodeTypes();
+				await fetchNodeTypes();
 
-			// Initialize the workflow store
-			if (initialWorkflow) {
-				workflowActions.initialize(initialWorkflow);
+				// Initialize the workflow store
+				if (initialWorkflow) {
+					workflowActions.initialize(initialWorkflow);
 
-				// Emit onWorkflowLoad event
-				if (eventHandlers?.onWorkflowLoad) {
-					eventHandlers.onWorkflowLoad(initialWorkflow);
-				}
-			} else {
-				// Initialize with a default empty workflow so the editor is functional
-				// (e.g., drag-and-drop requires a non-null workflow in the store)
-				const defaultWorkflow: Workflow = {
-					id: '',
-					name: 'Untitled Workflow',
-					nodes: [],
-					edges: [],
-					metadata: {
-						version: '1.0.0',
-						format: DEFAULT_WORKFLOW_FORMAT,
-						createdAt: new Date().toISOString(),
-						updatedAt: new Date().toISOString()
+					// Emit onWorkflowLoad event
+					if (eventHandlers?.onWorkflowLoad) {
+						eventHandlers.onWorkflowLoad(initialWorkflow);
 					}
-				};
-				workflowActions.initialize(defaultWorkflow);
+				} else {
+					// Initialize with a default empty workflow so the editor is functional
+					// (e.g., drag-and-drop requires a non-null workflow in the store)
+					const defaultWorkflow: Workflow = {
+						id: '',
+						name: 'Untitled Workflow',
+						nodes: [],
+						edges: [],
+						metadata: {
+							version: '1.0.0',
+							format: DEFAULT_WORKFLOW_FORMAT,
+							createdAt: new Date().toISOString(),
+							updatedAt: new Date().toISOString()
+						}
+					};
+					workflowActions.initialize(defaultWorkflow);
+				}
+			} catch (error) {
+				logger.error('Failed to initialize editor:', error);
 			}
 		})();
 
@@ -569,14 +573,6 @@
 		};
 	});
 
-	// Monitor workflow store changes for testing node drag updates
-	$effect(() => {
-		const currentWorkflow = getWorkflowStore();
-		if (currentWorkflow) {
-			// Workflow store updated
-		}
-	});
-
 	/**
 	 * Derived value for showing the right config panel
 	 * Config panel always appears on the right side

package/dist/components/CanvasBanner.stories.svelte

@@ -1,20 +1,24 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import CanvasBanner from "./CanvasBanner.svelte";
-	import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import CanvasBanner from './CanvasBanner.svelte';
+	import CanvasDecorator from '../stories/CanvasDecorator.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/CanvasBanner",
-		tags: ["autodocs"],
+		title: 'Display/CanvasBanner',
+		tags: ['autodocs'],
 		parameters: {
-			layout: "centered",
-		},
+			layout: 'centered'
+		}
 	});
 </script>
 
 <Story name="Default">
 	<CanvasDecorator>
-		<CanvasBanner title="Empty Canvas" description="Drag nodes from the sidebar to get started" iconName="heroicons:squares-plus" />
+		<CanvasBanner
+			title="Empty Canvas"
+			description="Drag nodes from the sidebar to get started"
+			iconName="heroicons:squares-plus"
+		/>
 	</CanvasDecorator>
 </Story>
 

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

@@ -11,7 +11,7 @@ declare const CanvasBanner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import CanvasBanner from "./CanvasBanner.svelte";
+import CanvasBanner from './CanvasBanner.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;

package/dist/components/ConfigPanel.stories.svelte

@@ -1,38 +1,47 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import ConfigPanel from "./ConfigPanel.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ConfigPanel from './ConfigPanel.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Editor/ConfigPanel",
+		title: 'Editor/ConfigPanel',
 		component: ConfigPanel,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		parameters: {
-			layout: "padded",
+			layout: 'padded'
 		},
 		args: {
-			onClose: fn(),
-		},
+			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="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="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",
-}} />
+<Story
+	name="Minimal"
+	args={{
+		title: 'Start Node'
+	}}
+/>

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

@@ -11,7 +11,7 @@ declare const ConfigPanel: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ConfigPanel from "./ConfigPanel.svelte";
+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;

package/dist/components/LoadingSpinner.stories.svelte

@@ -1,30 +1,30 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import LoadingSpinner from "./LoadingSpinner.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import LoadingSpinner from './LoadingSpinner.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/LoadingSpinner",
+		title: 'Display/LoadingSpinner',
 		component: LoadingSpinner,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
 			size: {
-				control: { type: "select" },
-				options: ["xs", "sm", "md", "lg"],
+				control: { type: 'select' },
+				options: ['xs', 'sm', 'md', 'lg']
 			},
-			text: { control: "text" },
-			showText: { control: "boolean" },
-		},
+			text: { control: 'text' },
+			showText: { control: 'boolean' }
+		}
 	});
 </script>
 
 <Story name="Default" />
 
-<Story name="Extra Small" args={{ size: "xs" }} />
+<Story name="Extra Small" args={{ size: 'xs' }} />
 
-<Story name="Small" args={{ size: "sm" }} />
+<Story name="Small" args={{ size: 'sm' }} />
 
-<Story name="Large" args={{ size: "lg" }} />
+<Story name="Large" args={{ size: 'lg' }} />
 
-<Story name="Custom Text" args={{ text: "Processing..." }} />
+<Story name="Custom Text" args={{ text: 'Processing...' }} />
 
 <Story name="No Text" args={{ showText: false }} />

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

@@ -11,7 +11,7 @@ declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import LoadingSpinner from "./LoadingSpinner.svelte";
+import LoadingSpinner from './LoadingSpinner.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;

package/dist/components/Logo.stories.svelte

@@ -1,11 +1,11 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Logo from "./Logo.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logo from './Logo.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/Logo",
+		title: 'Display/Logo',
 		component: Logo,
-		tags: ["autodocs"],
+		tags: ['autodocs']
 	});
 </script>
 

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

@@ -11,7 +11,7 @@ declare const Logo: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Logo from "./Logo.svelte";
+import Logo from './Logo.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;

package/dist/components/MarkdownDisplay.stories.svelte

@@ -1,21 +1,36 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import MarkdownDisplay from "./MarkdownDisplay.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import MarkdownDisplay from './MarkdownDisplay.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/MarkdownDisplay",
+		title: 'Display/MarkdownDisplay',
 		component: MarkdownDisplay,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			content: { control: "text" },
-		},
+			content: { control: 'text' }
+		}
 	});
 </script>
 
-<Story name="Simple" args={{ content: "Hello **world**! This is *italic* and `inline code`." }} />
+<Story name="Simple" args={{ content: 'Hello **world**! This is *italic* and `inline code`.' }} />
 
-<Story name="Headings" args={{ content: "# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings." }} />
+<Story
+	name="Headings"
+	args={{ content: '# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings.' }}
+/>
 
-<Story name="Code Block" args={{ content: "Here is a code example:\n\n```javascript\nconst greeting = \"Hello\";\nconsole.log(greeting);\n```\n\nAnd some text after." }} />
+<Story
+	name="Code Block"
+	args={{
+		content:
+			'Here is a code example:\n\n```javascript\nconst greeting = "Hello";\nconsole.log(greeting);\n```\n\nAnd some text after.'
+	}}
+/>
 
-<Story name="Full Document" args={{ content: "# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com)." }} />
+<Story
+	name="Full Document"
+	args={{
+		content:
+			'# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com).'
+	}}
+/>

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

@@ -11,7 +11,7 @@ declare const MarkdownDisplay: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import MarkdownDisplay from "./MarkdownDisplay.svelte";
+import MarkdownDisplay from './MarkdownDisplay.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;

package/dist/components/Navbar.stories.svelte

@@ -1,41 +1,53 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Navbar from "./Navbar.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
 
 	const { Story } = defineMeta({
-		title: "Editor/Navbar",
+		title: 'Editor/Navbar',
 		component: Navbar,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		parameters: {
-			layout: "fullscreen",
-		},
+			layout: 'fullscreen'
+		}
 	});
 </script>
 
-<Story name="Default" args={{
-	title: "My Workflow",
-	showStatus: true,
-	showSettings: true,
-}} />
+<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 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="With Breadcrumbs"
+	args={{
+		breadcrumbs: [
+			{ label: 'Workflows', href: '#', icon: 'mdi:folder' },
+			{ label: 'My Workflow', href: '#' }
+		],
+		showSettings: true
+	}}
+/>
 
-<Story name="Minimal" args={{
-	showStatus: false,
-	showSettings: false,
-}} />
+<Story
+	name="Minimal"
+	args={{
+		showStatus: false,
+		showSettings: false
+	}}
+/>

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

@@ -11,7 +11,7 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Navbar from "./Navbar.svelte";
+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;

package/dist/components/Navbar.svelte

@@ -62,10 +62,13 @@
 		}
 	}
 
-	// Add event listener for click outside
-	if (typeof window !== 'undefined') {
+	// Add event listener for click outside with proper cleanup
+	$effect(() => {
 		document.addEventListener('click', handleClickOutside);
-	}
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
 </script>
 
 <div class="flowdrop-navbar">