@d34dman/flowdrop 0.0.20 → 0.0.21

package/README.md

@@ -4,6 +4,14 @@
 
 <h1 align="center">FlowDrop</h1>
 
+<p align="center">
+  <img src="https://img.shields.io/github/actions/workflow/status/d34dman/flowdrop/docker-publish.yml?style=flat-square&label=Build" alt="GitHub pages build status" />
+  <a href="https://www.npmjs.com/package/@d34dman/flowdrop"><img src="https://img.shields.io/npm/v/@d34dman/flowdrop?style=flat-square" alt="npm" /></a>
+  <img src="https://img.shields.io/npm/unpacked-size/%40d34dman%2Fflowdrop?style=flat-square" alt="NPM Unpacked Size" />
+  <img src="https://img.shields.io/npm/types/@d34dman/flowdrop?style=flat-square" alt="npm type definitions" />
+  <a href="http://npmjs.com/package/@d34dman/flowdrop"><img src="https://img.shields.io/npm/dt/@d34dman/flowdrop.svg?maxAge=2592000&style=flat-square" alt="npm downloads" /></a>
+</p>
+
 <p align="center">
   <strong>Build beautiful workflow editors in minutes, not months.</strong>
 </p>

package/dist/components/App.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
 	import { page } from '$app/stores';
+	import MainLayout from './layouts/MainLayout.svelte';
 	import WorkflowEditor from './WorkflowEditor.svelte';
 	import NodeSidebar from './NodeSidebar.svelte';
 	import ConfigSidebar from './ConfigSidebar.svelte';
@@ -563,15 +564,25 @@
 	<meta name="description" content="A modern drag-and-drop workflow editor for LLM applications" />
 </svelte:head>
 
-<div
-	class="flowdrop-app"
-	style="height: {typeof height === 'number' ? `${height}px` : height}; width: {typeof width ===
-	'number'
-		? `${width}px`
-		: width};"
+<!-- MainLayout wrapper for workflow editor -->
+<MainLayout
+	showHeader={showNavbar && !$page.url.pathname.includes('/edit')}
+	showLeftSidebar={!disableSidebar}
+	showRightSidebar={!disableSidebar && (isWorkflowSettingsOpen || !!selectedNodeForConfig())}
+	showFooter={false}
+	headerHeight={60}
+	leftSidebarWidth={320}
+	rightSidebarWidth={400}
+	leftSidebarMinWidth={280}
+	leftSidebarMaxWidth={450}
+	rightSidebarMinWidth={320}
+	rightSidebarMaxWidth={550}
+	enableLeftSplitPane={false}
+	enableRightSplitPane={true}
+	class="flowdrop-app-layout"
 >
-	<!-- Navbar (conditionally rendered) - hide on workflow edit pages -->
-	{#if showNavbar && !$page.url.pathname.includes('/edit')}
+	<!-- Header: Navbar -->
+	{#snippet header()}
 		<Navbar
 			title={breadcrumbTitle()}
 			primaryActions={navbarActions.length > 0
@@ -610,231 +621,225 @@
 					]}
 			showStatus={true}
 		/>
-	{/if}
-
-	<!-- Main Content -->
-	<main class="flowdrop-main">
-		<!-- Status Display -->
-		{#if error}
-			<div class="flowdrop-status flowdrop-status--error">
-				<div class="flowdrop-status__content">
-					<div class="flowdrop-flex flowdrop-gap--3">
-						<div class="flowdrop-status__indicator flowdrop-status__indicator--error"></div>
-						<span class="flowdrop-text--sm flowdrop-font--medium">Error: {error}</span>
-					</div>
-					<div class="flowdrop-flex flowdrop-gap--2">
-						<button
-							class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-							onclick={retryLoad}
-							type="button"
-						>
-							Retry
-						</button>
-						<button
-							class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--primary"
-							onclick={() => {
-								nodes = sampleNodes;
-								error = null;
-							}}
-							type="button"
-						>
-							Use Sample Data
-						</button>
-						<button
-							class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-							onclick={() => {
-								const defaultUrl = '/api/flowdrop';
-								const newUrl = prompt('Enter Backend API URL:', defaultUrl);
-								if (newUrl) {
-									const endpointConfig = createEndpointConfig(newUrl);
-									setEndpointConfig(endpointConfig);
-									fetchNodeTypes();
-								}
-							}}
-							type="button"
-						>
-							Set API URL
-						</button>
-						<button
-							class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-							onclick={testApiConnection}
-							type="button"
-						>
-							Test API
-						</button>
-						<button
-							class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
-							onclick={() => (error = null)}
-							type="button"
-						>
-							✕
-						</button>
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<!-- Workflow Editor with Sidebars -->
-		<div class="flowdrop-editor-container">
-			<!-- Left Sidebar - Node Components (conditionally rendered) -->
-			{#if !disableSidebar}
-				<div class="flowdrop-sidebar flowdrop-sidebar--left">
-					<NodeSidebar {nodes} />
+	{/snippet}
+
+	<!-- Left Sidebar: Node Components -->
+	{#snippet leftSidebar()}
+		<NodeSidebar {nodes} />
+	{/snippet}
+
+	<!-- Right Sidebar: Configuration or Workflow Settings -->
+	{#snippet rightSidebar()}
+		{#if isWorkflowSettingsOpen}
+			<ConfigSidebar
+				isOpen={isWorkflowSettingsOpen}
+				title="Workflow Settings"
+				configSchema={workflowConfigSchema}
+				configValues={workflowConfigValues}
+				onSave={handleWorkflowSave}
+				onClose={() => (isWorkflowSettingsOpen = false)}
+			/>
+		{:else if selectedNodeForConfig()}
+			<div class="flowdrop-config-sidebar">
+				<!-- Header -->
+				<div class="flowdrop-config-sidebar__header">
+					<h2 class="flowdrop-config-sidebar__title">{selectedNodeForConfig().data.label}</h2>
+					<button
+						class="flowdrop-config-sidebar__close"
+						onclick={closeConfigSidebar}
+						aria-label="Close configuration sidebar"
+					>
+						×
+					</button>
 				</div>
-			{/if}
-
-			<!-- Main Editor Area -->
-			<div
-				class="flowdrop-editor-main"
-				class:pipeline-view={!!pipelineId}
-				onclick={handleCanvasClick}
-				onkeydown={(e) => e.key === 'Escape' && closeConfigSidebar()}
-				role="button"
-				tabindex="0"
-				aria-label="Workflow canvas - click to close sidebar"
-			>
-				<WorkflowEditor
-					bind:this={workflowEditorRef}
-					{nodes}
-					{height}
-					{width}
-					{endpointConfig}
-					{isConfigSidebarOpen}
-					selectedNodeForConfig={selectedNodeForConfig()}
-					{openConfigSidebar}
-					{closeConfigSidebar}
-					{lockWorkflow}
-					{readOnly}
-					{nodeStatuses}
-					{pipelineId}
-				/>
-			</div>
 
-			<!-- Right Sidebar - Configuration or Workflow Settings (conditionally rendered) -->
-			{#if !disableSidebar && isWorkflowSettingsOpen}
-				<ConfigSidebar
-					isOpen={isWorkflowSettingsOpen}
-					title="Workflow Settings"
-					configSchema={workflowConfigSchema}
-					configValues={workflowConfigValues}
-					onSave={handleWorkflowSave}
-					onClose={() => (isWorkflowSettingsOpen = false)}
-				/>
-			{:else if !disableSidebar && selectedNodeForConfig()}
-				<div class="flowdrop-sidebar flowdrop-sidebar--right">
-					<div class="flowdrop-config-sidebar">
-						<!-- Header -->
-						<div class="flowdrop-config-sidebar__header">
-							<h2 class="flowdrop-config-sidebar__title">{selectedNodeForConfig().data.label}</h2>
-							<button
-								class="flowdrop-config-sidebar__close"
-								onclick={closeConfigSidebar}
-								aria-label="Close configuration sidebar"
-							>
-								×
-							</button>
-						</div>
-
-						<!-- Content -->
-						<div class="flowdrop-config-sidebar__content">
-							<!-- Node Details -->
-							<div class="flowdrop-config-sidebar__section">
-								<h3 class="flowdrop-config-sidebar__section-title">Node Details</h3>
-								<div class="flowdrop-config-sidebar__details">
-									<div class="flowdrop-config-sidebar__detail">
-										<span class="flowdrop-config-sidebar__detail-label">Node ID:</span>
-										<div class="flowdrop-config-sidebar__detail-value-with-copy">
-											<span
-												class="flowdrop-config-sidebar__detail-value"
-												style="font-family: monospace;"
-											>
-												{selectedNodeForConfig().id}
-											</span>
-											<button
-												class="flowdrop-config-sidebar__copy-btn"
-												onclick={() => {
-													navigator.clipboard.writeText(selectedNodeForConfig().id);
-												}}
-												title="Copy Node ID"
-												aria-label="Copy node ID to clipboard"
-											>
-												📋
-											</button>
-										</div>
-									</div>
-									<div class="flowdrop-config-sidebar__detail">
-										<span class="flowdrop-config-sidebar__detail-label">Type:</span>
-										<span class="flowdrop-config-sidebar__detail-value"
-											>{selectedNodeForConfig().data.metadata?.type ||
-												selectedNodeForConfig().type}</span
-										>
-									</div>
-									<div class="flowdrop-config-sidebar__detail">
-										<span class="flowdrop-config-sidebar__detail-label">Category:</span>
-										<span class="flowdrop-config-sidebar__detail-value"
-											>{selectedNodeForConfig().data.metadata?.category || 'general'}</span
+				<!-- Content -->
+				<div class="flowdrop-config-sidebar__content">
+					<!-- Node Details -->
+					<div class="flowdrop-config-sidebar__section">
+						<h3 class="flowdrop-config-sidebar__section-title">Node Details</h3>
+						<div class="flowdrop-config-sidebar__details">
+							<div class="flowdrop-config-sidebar__detail">
+								<span class="flowdrop-config-sidebar__detail-label">Node ID:</span>
+								<div class="flowdrop-config-sidebar__detail-value-with-copy">
+									<span
+										class="flowdrop-config-sidebar__detail-value"
+										style="font-family: monospace;"
+									>
+										{selectedNodeForConfig().id}
+									</span>
+									<button
+										class="flowdrop-config-sidebar__copy-btn"
+										onclick={() => {
+											navigator.clipboard.writeText(selectedNodeForConfig().id);
+										}}
+										title="Copy Node ID"
+										aria-label="Copy node ID to clipboard"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											role="img"
+											width="1em"
+											height="1em"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="size-6"
 										>
-									</div>
-									<div class="flowdrop-config-sidebar__detail">
-										<span class="flowdrop-config-sidebar__detail-label">Description:</span>
-										<p class="flowdrop-config-sidebar__detail-description">
-											{selectedNodeForConfig().data.metadata?.description || 'Node configuration'}
-										</p>
-									</div>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"
+											/>
+										</svg>
+									</button>
 								</div>
 							</div>
+							<div class="flowdrop-config-sidebar__detail">
+								<span class="flowdrop-config-sidebar__detail-label">Type:</span>
+								<span class="flowdrop-config-sidebar__detail-value"
+									>{selectedNodeForConfig().data.metadata?.type ||
+										selectedNodeForConfig().type}</span
+								>
+							</div>
+							<div class="flowdrop-config-sidebar__detail">
+								<span class="flowdrop-config-sidebar__detail-label">Category:</span>
+								<span class="flowdrop-config-sidebar__detail-value"
+									>{selectedNodeForConfig().data.metadata?.category || 'general'}</span
+								>
+							</div>
+							<div class="flowdrop-config-sidebar__detail">
+								<span class="flowdrop-config-sidebar__detail-label">Description:</span>
+								<p class="flowdrop-config-sidebar__detail-description">
+									{selectedNodeForConfig().data.metadata?.description || 'Node configuration'}
+								</p>
+							</div>
+						</div>
+					</div>
 
-							<!-- Configuration Form -->
-							<div class="flowdrop-config-sidebar__section">
-								<h3 class="flowdrop-config-sidebar__section-title">Configuration</h3>
-								<ConfigForm
-									node={selectedNodeForConfig()}
-									onSave={(updatedConfig) => {
-										const currentNode = selectedNodeForConfig();
-										if (selectedNodeId && currentNode) {
-											// Handle nodeType switching if nodeType is in the config
-											let nodeUpdates: Record<string, unknown> = {
-												data: {
-													...currentNode.data,
-													config: updatedConfig
-												}
-											};
-
-											// NOTE: We do NOT change the node's type field anymore
-											// All nodes use 'universalNode' and UniversalNode handles internal switching
-											workflowActions.updateNode(selectedNodeId, nodeUpdates);
+					<!-- Configuration Form -->
+					<div class="flowdrop-config-sidebar__section">
+						<h3 class="flowdrop-config-sidebar__section-title">Configuration</h3>
+						<ConfigForm
+							node={selectedNodeForConfig()}
+							onSave={(updatedConfig) => {
+								const currentNode = selectedNodeForConfig();
+								if (selectedNodeId && currentNode) {
+									// Handle nodeType switching if nodeType is in the config
+									let nodeUpdates: Record<string, unknown> = {
+										data: {
+											...currentNode.data,
+											config: updatedConfig
 										}
+									};
 
-										closeConfigSidebar();
-									}}
-									onCancel={closeConfigSidebar}
-								/>
-							</div>
-						</div>
+									// NOTE: We do NOT change the node's type field anymore
+									// All nodes use 'universalNode' and UniversalNode handles internal switching
+									workflowActions.updateNode(selectedNodeId, nodeUpdates);
+								}
+
+								closeConfigSidebar();
+							}}
+							onCancel={closeConfigSidebar}
+						/>
 					</div>
 				</div>
-			{/if}
+			</div>
+		{/if}
+	{/snippet}
+
+	<!-- Main Content: Workflow Editor with Error Status -->
+	<!-- Status Display -->
+	{#if error}
+		<div class="flowdrop-status flowdrop-status--error">
+			<div class="flowdrop-status__content">
+				<div class="flowdrop-flex flowdrop-gap--3">
+					<div class="flowdrop-status__indicator flowdrop-status__indicator--error"></div>
+					<span class="flowdrop-text--sm flowdrop-font--medium">Error: {error}</span>
+				</div>
+				<div class="flowdrop-flex flowdrop-gap--2">
+					<button
+						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+						onclick={retryLoad}
+						type="button"
+					>
+						Retry
+					</button>
+					<button
+						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--primary"
+						onclick={() => {
+							nodes = sampleNodes;
+							error = null;
+						}}
+						type="button"
+					>
+						Use Sample Data
+					</button>
+					<button
+						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+						onclick={() => {
+							const defaultUrl = '/api/flowdrop';
+							const newUrl = prompt('Enter Backend API URL:', defaultUrl);
+							if (newUrl) {
+								const endpointConfig = createEndpointConfig(newUrl);
+								setEndpointConfig(endpointConfig);
+								fetchNodeTypes();
+							}
+						}}
+						type="button"
+					>
+						Set API URL
+					</button>
+					<button
+						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+						onclick={testApiConnection}
+						type="button"
+					>
+						Test API
+					</button>
+					<button
+						class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
+						onclick={() => (error = null)}
+						type="button"
+					>
+						✕
+					</button>
+				</div>
+			</div>
 		</div>
-	</main>
-</div>
-
-<style>
-	.flowdrop-app {
-		background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
+	{/if}
 
-	.flowdrop-main {
-		flex: 1;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: hidden;
-	}
+	<!-- Main Editor Area -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class="flowdrop-editor-main"
+		class:pipeline-view={!!pipelineId}
+		onclick={handleCanvasClick}
+		onkeydown={(e) => e.key === 'Escape' && closeConfigSidebar()}
+		role="region"
+		aria-label="Workflow canvas"
+	>
+		<WorkflowEditor
+			bind:this={workflowEditorRef}
+			{nodes}
+			{height}
+			{width}
+			{endpointConfig}
+			{isConfigSidebarOpen}
+			selectedNodeForConfig={selectedNodeForConfig()}
+			{openConfigSidebar}
+			{closeConfigSidebar}
+			{lockWorkflow}
+			{readOnly}
+			{nodeStatuses}
+			{pipelineId}
+		/>
+	</div>
+</MainLayout>
 
+<style>
+	/* Status bar styles */
 	.flowdrop-status {
 		background-color: #eff6ff;
 		border-bottom: 1px solid #bfdbfe;
@@ -864,6 +869,7 @@
 		background-color: #ef4444;
 	}
 
+	/* Button styles */
 	.flowdrop-btn {
 		padding: 0.375rem 0.75rem;
 		border-radius: 0.375rem;
@@ -912,6 +918,7 @@
 		color: #374151;
 	}
 
+	/* Utility classes */
 	.flowdrop-flex {
 		display: flex;
 	}
@@ -933,72 +940,12 @@
 		font-weight: 500;
 	}
 
-	@keyframes spin {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-
-	.flowdrop-editor-container {
-		flex: 1;
-		position: relative;
-		min-height: 0;
-		overflow: hidden;
-		display: flex;
-	}
-
-	.flowdrop-sidebar {
-		background-color: #ffffff;
-		border: 1px solid #e5e7eb;
-		overflow-y: auto;
-		overflow-x: hidden;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		/* Custom scrollbar styling */
-		scrollbar-width: thin;
-		scrollbar-color: #cbd5e1 #f1f5f9;
-	}
-
-	.flowdrop-sidebar::-webkit-scrollbar {
-		width: 8px;
-	}
-
-	.flowdrop-sidebar::-webkit-scrollbar-track {
-		background: #f1f5f9;
-		border-radius: 4px;
-	}
-
-	.flowdrop-sidebar::-webkit-scrollbar-thumb {
-		background: #cbd5e1;
-		border-radius: 4px;
-	}
-
-	.flowdrop-sidebar::-webkit-scrollbar-thumb:hover {
-		background: #94a3b8;
-	}
-
-	.flowdrop-sidebar--left {
-		width: 320px;
-		min-width: 320px;
-		border-right: 1px solid #e5e7eb;
-		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
-		display: flex;
-		flex-direction: column;
-	}
-
-	.flowdrop-sidebar--right {
-		border-left: 1px solid #e5e7eb;
-		box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
-	}
-
+	/* Main editor area */
 	.flowdrop-editor-main {
 		flex: 1;
 		position: relative;
 		min-width: 0;
+		height: 100%;
 		overflow: hidden;
 		background-color: #1f2937;
 	}

package/dist/components/ConfigForm.svelte

@@ -335,9 +335,6 @@
 	}
 
 	.flowdrop-config-sidebar__footer {
-		padding: 1rem;
-		border-top: 1px solid #e5e7eb;
-		background-color: #f9fafb;
 		display: flex;
 		gap: 0.75rem;
 		justify-content: flex-end;

package/dist/components/ConfigSidebar.svelte

@@ -450,6 +450,9 @@
 
 	<!-- Footer -->
 	<div class="config-sidebar__footer">
+		{#if hasChanges}
+			<p class="config-sidebar__changes-text">You have unsaved changes</p>
+		{/if}
 		<div class="config-sidebar__actions">
 			<button
 				type="button"
@@ -471,10 +474,6 @@
 				Save Changes
 			</button>
 		</div>
-
-		{#if hasChanges}
-			<p class="config-sidebar__changes-text">You have unsaved changes</p>
-		{/if}
 	</div>
 </div>
 
@@ -482,16 +481,6 @@
 	/* Overlay styles removed to avoid darkening the canvas */
 
 	.config-sidebar {
-		position: fixed;
-		top: var(--flowdrop-navbar-height, 60px); /* Start below navbar */
-		right: 0;
-		width: 400px;
-		height: calc(100vh - var(--flowdrop-navbar-height, 60px)); /* Account for navbar height */
-		background-color: #ffffff;
-		border-left: 1px solid #e5e7eb;
-		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
-		transform: translateX(100%);
-		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 		z-index: -1;
 		display: flex;
 		flex-direction: column;
@@ -835,19 +824,13 @@
 	}
 
 	.config-sidebar__footer {
-		padding: 1rem 1.5rem;
-		border-top: 1px solid #e5e7eb;
-		background-color: #f9fafb;
 		flex-shrink: 0;
-		position: sticky;
-		bottom: 0;
-		z-index: 10; /* Ensure footer stays on top */
-		height: 80px; /* Increased height for footer */
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 		gap: 0.75rem;
-		min-height: 80px; /* Ensure minimum height */
+		height: 40px;
+		align-items: center;
 	}
 
 	.config-sidebar__actions {
@@ -860,7 +843,6 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.5rem 1rem;
 		border: 1px solid;
 		border-radius: 0.375rem;
 		font-size: 0.875rem;

package/dist/components/Navbar.svelte

@@ -184,13 +184,14 @@
 <style>
 	.flowdrop-navbar {
 		height: var(--flowdrop-navbar-height, 60px);
+		width: 100%;
+		max-width: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 1rem;
 		background-color: #ffffff;
 		border-bottom: 1px solid #e5e7eb;
-		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 		z-index: 10;
 	}