@d34dman/flowdrop 0.0.13 → 0.0.15

package/README.md

@@ -7,10 +7,12 @@ A visual workflow editor component library built with Svelte 5 and @xyflow/svelt
 - **Visual Workflow Editor**: Drag-and-drop interface for building node-based workflows
 - **Svelte 5 Components**: Modern, reactive components with runes
 - **Configurable API Client**: Flexible endpoint configuration for backend integration
+- **Runtime Configuration**: Build once, deploy anywhere with environment variables
 - **Node System**: Extensible node types with customizable configuration
 - **Real-time Updates**: Live workflow state management with stores
 - **Framework Agnostic**: Can be integrated into any web application
 - **TypeScript Support**: Full type definitions included
+- **Docker Ready**: Production-ready Dockerfile and Docker Compose configuration
 
 ## 📦 Installation
 
@@ -325,6 +327,53 @@ MIT
 - Create an issue in the project repository
 - Review the examples in `src/lib/examples/`
 
+## 🚢 Deployment
+
+FlowDrop uses **runtime configuration** instead of build-time environment variables, allowing you to build once and deploy to multiple environments.
+
+### Quick Start with Docker
+
+```bash
+# Copy environment file
+cp env.example .env
+
+# Edit .env with your configuration
+# Set FLOWDROP_API_BASE_URL to your backend API URL
+
+# Start with Docker Compose
+docker-compose up -d
+```
+
+### Environment Variables
+
+**Production (Runtime):**
+- `FLOWDROP_API_BASE_URL` - Backend API URL
+- `FLOWDROP_THEME` - UI theme (light/dark/auto)
+- `FLOWDROP_TIMEOUT` - Request timeout in milliseconds
+- `FLOWDROP_AUTH_TYPE` - Authentication type (none/bearer/api_key/custom)
+- `FLOWDROP_AUTH_TOKEN` - Authentication token
+
+**Development (Build-time):**
+- `VITE_API_BASE_URL` - Dev API URL (used only during `npm run dev`)
+
+### Build for Production
+
+```bash
+# Install dependencies
+npm ci
+
+# Build the application
+npm run build
+
+# Set environment variables and start
+export FLOWDROP_API_BASE_URL=http://your-backend:8080/api/flowdrop
+node build
+```
+
+For detailed deployment instructions, see:
+- [DEPLOYMENT.md](./DEPLOYMENT.md) - Complete deployment guide
+- [DOCKER.md](./DOCKER.md) - Docker quick start
+
 ---
 
 **FlowDrop** - Visual workflow editing for modern web applications

package/dist/components/FlowDropZone.svelte

@@ -0,0 +1,68 @@
+<!--
+  Flow Drop Zone Component
+  Handles drag and drop with proper coordinate transformation
+  Must be used inside SvelteFlowProvider
+-->
+
+<script lang="ts">
+	import { useSvelteFlow } from "@xyflow/svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+
+	// Access SvelteFlow instance for coordinate transformation
+	const { screenToFlowPosition } = useSvelteFlow();
+
+	/**
+	 * Handle drag over event
+	 */
+	function handleDragOver(e: DragEvent): void {
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = "copy";
+		}
+	}
+
+	/**
+	 * Handle drop event with proper coordinate transformation
+	 */
+	function handleDrop(e: DragEvent): void {
+		e.preventDefault();
+
+		// Get the data from the drag event
+		const nodeTypeData = e.dataTransfer?.getData("application/json");
+		if (nodeTypeData) {
+			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
+			const position = screenToFlowPosition({
+				x: e.clientX,
+				y: e.clientY
+			});
+
+			// Call the parent handler with the converted position
+			props.ondrop(nodeTypeData, position);
+		}
+	}
+</script>
+
+<div
+	class="flow-drop-zone"
+	role="application"
+	aria-label="Workflow canvas"
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+>
+	{@render props.children()}
+</div>
+
+<style>
+	.flow-drop-zone {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    ondrop: (nodeTypeData: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    children: Snippet;
+}
+declare const FlowDropZone: import("svelte").Component<Props, {}, "">;
+type FlowDropZone = ReturnType<typeof FlowDropZone>;
+export default FlowDropZone;

package/dist/components/WorkflowEditor.svelte

@@ -22,6 +22,7 @@
 		WorkflowEdge
 	} from '../types/index.js';
 	import CanvasBanner from './CanvasBanner.svelte';
+	import FlowDropZone from './FlowDropZone.svelte';
 	import { tick } from 'svelte';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
@@ -277,8 +278,8 @@
 	/**
 	 * Handle node deletion - automatically remove connected edges
 	 */
-	function handleNodesDelete(event: { detail: { nodes: WorkflowNodeType[] } }): void {
-		const deletedNodeIds = new Set(event.detail.nodes.map((node) => node.id));
+	function handleNodesDelete(params: { nodes: WorkflowNodeType[]; edges: WorkflowEdge[] }): void {
+		const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
 
 		// Filter out edges connected to deleted nodes
 		flowEdges = flowEdges.filter(
@@ -329,6 +330,30 @@
 	function checkWorkflowCycles(): boolean {
 		return WorkflowOperationsHelper.checkWorkflowCycles(flowNodes, flowEdges);
 	}
+
+	/**
+	 * Handle drop event and add new node to canvas
+	 * This will be called from the inner DropZone component
+	 */
+	async function handleNodeDrop(
+		nodeTypeData: string,
+		position: { x: number; y: number }
+	): Promise<void> {
+		// Create the node using the helper, passing existing nodes for ID generation
+		const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position, flowNodes);
+
+		if (newNode && currentWorkflow) {
+			currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
+
+			// Update the global store
+			updateGlobalStore();
+
+			// Wait for DOM update to ensure SvelteFlow updates
+			await tick();
+		} else if (!currentWorkflow) {
+			console.warn('No currentWorkflow available for new node');
+		}
+	}
 </script>
 
 <SvelteFlowProvider>
@@ -336,80 +361,41 @@
 		<!-- Main Editor Area -->
 		<div class="flowdrop-workflow-editor__main">
 			<!-- Flow Canvas -->
-			<div
-				class="flowdrop-canvas"
-				role="application"
-				aria-label="Workflow canvas"
-				ondragover={(e: DragEvent) => {
-					e.preventDefault();
-					e.dataTransfer!.dropEffect = 'copy';
-				}}
-				ondrop={async (e: DragEvent) => {
-					e.preventDefault();
-
-					// Get the data from the drag event
-					const nodeTypeData = e.dataTransfer?.getData('application/json');
-					if (nodeTypeData) {
-						// Get the position relative to the canvas
-						const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-						const position = {
-							x: e.clientX - rect.left,
-							y: e.clientY - rect.top
-						};
-
-						// Create the node using the helper, passing existing nodes for ID generation
-						const newNode = NodeOperationsHelper.createNodeFromDrop(
-							nodeTypeData,
-							position,
-							flowNodes
-						);
-
-						if (newNode && currentWorkflow) {
-							currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
-
-							// Update the global store
-							updateGlobalStore();
-
-							// Wait for DOM update to ensure SvelteFlow updates
-							await tick();
-						} else if (!currentWorkflow) {
-							console.warn('No currentWorkflow available for new node');
-						}
-					}
-				}}
-			>
-				<SvelteFlow
-					bind:nodes={flowNodes}
-					bind:edges={flowEdges}
-					{nodeTypes}
-					{defaultEdgeOptions}
-					onconnect={handleConnect}
-					onnodesdelete={handleNodesDelete}
-					minZoom={0.2}
-					maxZoom={3}
-					clickConnect={true}
-					elevateEdgesOnSelect={true}
-					connectionLineType={ConnectionLineType.Bezier}
-					connectionLineComponent={ConnectionLine}
-					snapGrid={[10, 10]}
-					fitView
-				>
-					<Controls />
-					<Background
-						gap={10}
-						bgColor="var(--flowdrop-background-color)"
-						variant={BackgroundVariant.Dots}
-					/>
-					<MiniMap />
-				</SvelteFlow>
-				<!-- Drop Zone Indicator -->
-				{#if flowNodes.length === 0}
-					<CanvasBanner
-						title="Drag components here to start building"
-						description="Use the sidebar to add components to your workflow"
-						iconName="mdi:graph"
-					/>
-				{/if}
+			<div class="flowdrop-canvas">
+				<FlowDropZone ondrop={handleNodeDrop}>
+					<SvelteFlow
+						bind:nodes={flowNodes}
+						bind:edges={flowEdges}
+						{nodeTypes}
+						{defaultEdgeOptions}
+						onconnect={handleConnect}
+						ondelete={handleNodesDelete}
+						minZoom={0.2}
+						maxZoom={3}
+						clickConnect={true}
+						elevateEdgesOnSelect={true}
+						connectionLineType={ConnectionLineType.Bezier}
+						connectionLineComponent={ConnectionLine}
+						snapGrid={[10, 10]}
+						fitView
+					>
+						<Controls />
+						<Background
+							gap={10}
+							bgColor="var(--flowdrop-background-color)"
+							variant={BackgroundVariant.Dots}
+						/>
+						<MiniMap />
+					</SvelteFlow>
+					<!-- Drop Zone Indicator -->
+					{#if flowNodes.length === 0}
+						<CanvasBanner
+							title="Drag components here to start building"
+							description="Use the sidebar to add components to your workflow"
+							iconName="mdi:graph"
+						/>
+					{/if}
+				</FlowDropZone>
 			</div>
 
 			<!-- Status Bar -->

package/dist/config/runtimeConfig.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Runtime Configuration Service
+ *
+ * Provides runtime configuration fetched from the server.
+ * This allows the application to use environment variables set at deployment
+ * time rather than build time.
+ */
+export interface RuntimeConfig {
+    /** Base URL for the FlowDrop API */
+    apiBaseUrl: string;
+    /** Theme preference */
+    theme: "light" | "dark" | "auto";
+    /** Request timeout in milliseconds */
+    timeout: number;
+    /** Authentication type */
+    authType: "none" | "bearer" | "api_key" | "custom";
+    /** Authentication token */
+    authToken?: string;
+    /** Application version */
+    version: string;
+    /** Environment name */
+    environment: string;
+}
+/**
+ * Fetch runtime configuration from the server
+ *
+ * @param force - Force fetch even if cached
+ * @returns Promise resolving to runtime configuration
+ */
+export declare function fetchRuntimeConfig(force?: boolean): Promise<RuntimeConfig>;
+/**
+ * Get runtime configuration synchronously from cache
+ *
+ * @returns Cached runtime configuration or null if not loaded
+ */
+export declare function getRuntimeConfig(): RuntimeConfig | null;
+/**
+ * Clear the runtime configuration cache
+ */
+export declare function clearRuntimeConfigCache(): void;
+/**
+ * Initialize runtime configuration
+ * Should be called once when the application starts
+ *
+ * @returns Promise resolving to runtime configuration
+ */
+export declare function initRuntimeConfig(): Promise<RuntimeConfig>;

package/dist/config/runtimeConfig.js

@@ -0,0 +1,79 @@
+/**
+ * Runtime Configuration Service
+ *
+ * Provides runtime configuration fetched from the server.
+ * This allows the application to use environment variables set at deployment
+ * time rather than build time.
+ */
+/** Cached runtime configuration */
+let cachedConfig = null;
+/** Cache timestamp */
+let cacheTimestamp = 0;
+/** Cache duration in milliseconds (5 minutes) */
+const CACHE_DURATION = 5 * 60 * 1000;
+/**
+ * Fetch runtime configuration from the server
+ *
+ * @param force - Force fetch even if cached
+ * @returns Promise resolving to runtime configuration
+ */
+export async function fetchRuntimeConfig(force = false) {
+    const now = Date.now();
+    // Return cached config if available and not expired
+    if (!force && cachedConfig && now - cacheTimestamp < CACHE_DURATION) {
+        return cachedConfig;
+    }
+    try {
+        const response = await fetch("/api/config");
+        if (!response.ok) {
+            throw new Error(`Failed to fetch runtime config: ${response.statusText}`);
+        }
+        const config = (await response.json());
+        // Update cache
+        cachedConfig = config;
+        cacheTimestamp = now;
+        return config;
+    }
+    catch (error) {
+        console.error("Failed to fetch runtime configuration:", error);
+        // Return default configuration if fetch fails
+        const defaultConfig = {
+            apiBaseUrl: "/api/flowdrop",
+            theme: "auto",
+            timeout: 30000,
+            authType: "none",
+            version: "1.0.0",
+            environment: "production",
+        };
+        // Cache the default config to avoid repeated failed requests
+        if (!cachedConfig) {
+            cachedConfig = defaultConfig;
+            cacheTimestamp = now;
+        }
+        return cachedConfig || defaultConfig;
+    }
+}
+/**
+ * Get runtime configuration synchronously from cache
+ *
+ * @returns Cached runtime configuration or null if not loaded
+ */
+export function getRuntimeConfig() {
+    return cachedConfig;
+}
+/**
+ * Clear the runtime configuration cache
+ */
+export function clearRuntimeConfigCache() {
+    cachedConfig = null;
+    cacheTimestamp = 0;
+}
+/**
+ * Initialize runtime configuration
+ * Should be called once when the application starts
+ *
+ * @returns Promise resolving to runtime configuration
+ */
+export async function initRuntimeConfig() {
+    return fetchRuntimeConfig(true);
+}

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
 export type { ApiConfig } from './config/apiConfig.js';
 export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
+export * from './config/runtimeConfig.js';
 export * from './adapters/WorkflowAdapter.js';
 export * from './clients/ApiClient.js';
 export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';

package/dist/index.js

@@ -56,6 +56,7 @@ export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes
 export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
 export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
+export * from './config/runtimeConfig.js';
 // Export adapters
 export * from './adapters/WorkflowAdapter.js';
 // Export API client

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -99,6 +99,7 @@
 		"@storybook/addon-vitest": "^9.0.15",
 		"@storybook/sveltekit": "^9.0.15",
 		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -136,4 +137,4 @@
 		"svelte-5-french-toast": "^2.0.6",
 		"uuid": "^11.1.0"
 	}
-}
+}