@d34dman/flowdrop 0.0.44 → 0.0.46

package/README.md

@@ -66,8 +66,8 @@ You get a production-ready workflow UI. You keep full control of everything else
 
 ## Features
 
-|                             |                                                                           |
-| --------------------------- | ------------------------------------------------------------------------- |
+|                              |                                                                           |
+| ---------------------------- | ------------------------------------------------------------------------- |
 | 🎨 **Visual Editor Only**    | Pure UI component. No hidden backend, no external dependencies            |
 | 🔐 **You Own Everything**    | Your data, your servers, your orchestration logic, your security policies |
 | 🔌 **Backend Agnostic**      | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own        |

package/dist/components/ConfigForm.svelte

@@ -670,11 +670,7 @@
 	}
 
 	.config-form__button--primary {
-		background: linear-gradient(
-			135deg,
-			var(--fd-primary) 0%,
-			var(--fd-primary-hover) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
 		color: var(--fd-primary-foreground);
 		box-shadow:
 			0 1px 3px rgba(59, 130, 246, 0.3),
@@ -682,11 +678,7 @@
 	}
 
 	.config-form__button--primary:hover {
-		background: linear-gradient(
-			135deg,
-			var(--fd-primary-hover) 0%,
-			var(--fd-primary-hover) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary-hover) 100%);
 		box-shadow:
 			0 4px 12px rgba(59, 130, 246, 0.35),
 			inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -1006,11 +998,7 @@
 	   ============================================ */
 
 	.config-form__button--external {
-		background: linear-gradient(
-			135deg,
-			var(--fd-accent) 0%,
-			var(--fd-primary) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-accent) 0%, var(--fd-primary) 100%);
 		color: var(--fd-accent-foreground);
 		box-shadow:
 			0 1px 3px rgba(99, 102, 241, 0.3),
@@ -1018,11 +1006,7 @@
 	}
 
 	.config-form__button--external:hover {
-		background: linear-gradient(
-			135deg,
-			var(--fd-accent-hover) 0%,
-			var(--fd-primary-hover) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-accent-hover) 0%, var(--fd-primary-hover) 100%);
 		box-shadow:
 			0 4px 12px rgba(99, 102, 241, 0.35),
 			inset 0 1px 0 rgba(255, 255, 255, 0.1);

package/dist/components/Navbar.svelte

@@ -377,12 +377,11 @@
 	}
 
 	.flowdrop-navbar__status {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		gap: 0.375rem;
-		padding: 0.125rem 0.5rem;
+		padding: var(--fd-space-1) var(--fd-space-2);
 		background-color: var(--fd-success-muted);
-		border: 1px solid var(--fd-success);
 		border-radius: var(--fd-radius-md);
 		font-size: var(--fd-text-xs);
 		font-weight: 500;
@@ -391,13 +390,13 @@
 	.flowdrop-navbar__status-indicator {
 		width: 0.375rem;
 		height: 0.375rem;
-		background-color: var(--fd-success);
+		background-color: var(--fd-success-hover);
 		border-radius: 50%;
 		animation: pulse 2s infinite;
 	}
 
 	.flowdrop-navbar__status-text {
-		color: var(--fd-success);
+		color: var(--fd-success-hover);
 		font-size: var(--fd-text-xs);
 		font-weight: 500;
 	}
@@ -705,8 +704,8 @@
 		}
 
 		.flowdrop-navbar__status {
-			font-size: 0.625rem;
-			padding: 0.125rem 0.375rem;
+			font-size: var(--fd-text-xs);
+			padding: var(--fd-space-1) var(--fd-space-2);
 		}
 	}
 

package/dist/components/NodeSidebar.svelte

@@ -598,7 +598,7 @@
 		width: 2rem;
 		height: 2rem;
 		border-radius: 0.5rem;
-		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
 		color: var(--fd-node-icon);
 		font-size: var(--fd-text-sm);
 		display: flex;
@@ -610,7 +610,11 @@
 
 	.flowdrop-node-item:hover .flowdrop-node-icon,
 	.flowdrop-details__summary:hover .flowdrop-node-icon {
-		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 		transform: scale(1.05);
 	}
 

package/dist/components/SchemaForm.svelte

@@ -427,11 +427,7 @@
 	}
 
 	.schema-form__button--primary {
-		background: linear-gradient(
-			135deg,
-			var(--fd-primary) 0%,
-			var(--fd-primary-hover) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
 		color: var(--fd-primary-foreground);
 		box-shadow:
 			0 1px 3px rgba(59, 130, 246, 0.3),
@@ -439,11 +435,7 @@
 	}
 
 	.schema-form__button--primary:hover:not(:disabled) {
-		background: linear-gradient(
-			135deg,
-			var(--fd-primary-hover) 0%,
-			var(--fd-primary-hover) 100%
-		);
+		background: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary-hover) 100%);
 		box-shadow:
 			0 4px 12px rgba(59, 130, 246, 0.35),
 			inset 0 1px 0 rgba(255, 255, 255, 0.1);

package/dist/components/WorkflowEditor.svelte

@@ -30,6 +30,7 @@
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
 	import { workflowStore, workflowActions } from '../stores/workflowStore.js';
+	import { historyActions, setOnRestoreCallback } from '../stores/historyStore.js';
 	import UniversalNode from './UniversalNode.svelte';
 	import {
 		EdgeStylingHelper,
@@ -39,8 +40,8 @@
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
 	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
-	import { Toaster } from "svelte-5-french-toast";
-	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS } from "../services/toastService.js";
+	import { Toaster } from 'svelte-5-french-toast';
+	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS } from '../services/toastService.js';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -65,13 +66,45 @@
 	// Create a local currentWorkflow variable that we can control directly
 	let currentWorkflow = $state<Workflow | null>(null);
 
+	// Track if we're currently dragging a node (for history debouncing)
+	let isDraggingNode = $state(false);
+
+	// Track the workflow ID we're currently editing to detect workflow switches
+	let currentWorkflowId: string | null = null;
+
 	// Initialize currentWorkflow from global store
+	// Only sync when workflow ID changes (new workflow loaded) or on initial load
 	$effect(() => {
 		if ($workflowStore) {
-			currentWorkflow = $workflowStore;
+			const storeWorkflowId = $workflowStore.id;
+
+			// Sync on initial load or when a different workflow is loaded
+			if (currentWorkflowId !== storeWorkflowId) {
+				currentWorkflow = $workflowStore;
+				currentWorkflowId = storeWorkflowId;
+			}
+		} else if (currentWorkflow !== null) {
+			// Store was cleared
+			currentWorkflow = null;
+			currentWorkflowId = null;
 		}
 	});
 
+	// Set up the history restore callback to update workflow when undo/redo is triggered
+	$effect(() => {
+		setOnRestoreCallback((restoredWorkflow: Workflow) => {
+			// Directly update local state (bypass store sync effect)
+			currentWorkflow = restoredWorkflow;
+			// Also update the store without triggering history
+			workflowActions.restoreFromHistory(restoredWorkflow);
+		});
+
+		// Cleanup on unmount
+		return () => {
+			setOnRestoreCallback(null);
+		};
+	});
+
 	// Create local reactive variables that sync with currentWorkflow
 	let flowNodes = $state<WorkflowNodeType[]>([]);
 	let flowEdges = $state<WorkflowEdge[]>([]);
@@ -282,6 +315,29 @@
 	// Handle arrows in our custom connection handler
 	const defaultEdgeOptions = {};
 
+	/**
+	 * Handle node drag start
+	 *
+	 * Marks the beginning of a drag operation.
+	 */
+	function handleNodeDragStart(): void {
+		isDraggingNode = true;
+	}
+
+	/**
+	 * Handle node drag stop
+	 *
+	 * Push the NEW state (after drag) to history.
+	 * Undo will then restore to the previous state (before drag).
+	 */
+	function handleNodeDragStop(): void {
+		isDraggingNode = false;
+		// Push the current state AFTER the drag completed
+		if (currentWorkflow) {
+			workflowActions.pushHistory('Move node', currentWorkflow);
+		}
+	}
+
 	/**
 	 * Handle new connections between nodes
 	 * Let SvelteFlow handle edge creation, styling will be applied via reactive effects
@@ -303,6 +359,12 @@
 		if (currentWorkflow) {
 			updateCurrentWorkflowFromSvelteFlow();
 		}
+
+		// Push to history AFTER the connection is made
+		// This way undo will restore to the state before the connection
+		if (currentWorkflow) {
+			workflowActions.pushHistory('Add connection', currentWorkflow);
+		}
 	}
 
 	/**
@@ -338,15 +400,18 @@
 
 			// Show native confirmation dialog
 			const confirmed = window.confirm(message);
-			return confirmed;
+			if (!confirmed) {
+				return false;
+			}
 		}
 
-		// If confirmDelete is disabled, proceed with deletion
+		// Don't push to history here - we'll push AFTER deletion in handleNodesDelete
+		// This ensures undo will restore the state before deletion
 		return true;
 	}
 
 	/**
-	 * Handle node deletion - automatically remove connected edges
+	 * Handle node deletion - automatically remove connected edges and push to history
 	 */
 	function handleNodesDelete(params: { nodes: WorkflowNodeType[]; edges: WorkflowEdge[] }): void {
 		const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
@@ -360,6 +425,21 @@
 		if (currentWorkflow) {
 			updateCurrentWorkflowFromSvelteFlow();
 		}
+
+		// Push to history AFTER the deletion so undo restores the previous state
+		const nodeCount = params.nodes.length;
+		const edgeCount = params.edges.length;
+		let description = 'Delete';
+		if (nodeCount > 0 && edgeCount > 0) {
+			description = `Delete ${nodeCount} node${nodeCount > 1 ? 's' : ''} and ${edgeCount} connection${edgeCount > 1 ? 's' : ''}`;
+		} else if (nodeCount > 0) {
+			description = `Delete ${nodeCount} node${nodeCount > 1 ? 's' : ''}`;
+		} else if (edgeCount > 0) {
+			description = `Delete ${edgeCount} connection${edgeCount > 1 ? 's' : ''}`;
+		}
+		if (currentWorkflow) {
+			workflowActions.pushHistory(description, currentWorkflow);
+		}
 	}
 
 	/**
@@ -413,6 +493,7 @@
 		const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position, flowNodes);
 
 		if (newNode && currentWorkflow) {
+			// Add the node first
 			currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
 
 			// Update the global store
@@ -420,6 +501,10 @@
 
 			// Wait for DOM update to ensure SvelteFlow updates
 			await tick();
+
+			// Push to history AFTER adding the node
+			// This way undo will restore to the state before the add
+			workflowActions.pushHistory('Add node', currentWorkflow);
 		} else if (!currentWorkflow) {
 			console.warn('No currentWorkflow available for new node');
 		}
@@ -450,8 +535,49 @@
 	function handleEdgeRefreshComplete(): void {
 		nodeIdToRefresh = null;
 	}
+
+	/**
+	 * Handle keyboard shortcuts for undo/redo
+	 *
+	 * - Ctrl+Z (or Cmd+Z on Mac): Undo
+	 * - Ctrl+Shift+Z (or Cmd+Shift+Z): Redo
+	 * - Ctrl+Y (or Cmd+Y): Redo (Windows convention)
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		// Check for Ctrl (Windows/Linux) or Cmd (Mac)
+		const isModifierPressed = event.ctrlKey || event.metaKey;
+
+		if (!isModifierPressed) {
+			return;
+		}
+
+		// Don't handle shortcuts if user is typing in an input, textarea, or contenteditable
+		const target = event.target as HTMLElement;
+		const isInputElement =
+			target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+		if (isInputElement) {
+			return;
+		}
+
+		// Undo: Ctrl+Z (without Shift)
+		if (event.key === 'z' && !event.shiftKey) {
+			event.preventDefault();
+			historyActions.undo();
+			return;
+		}
+
+		// Redo: Ctrl+Shift+Z or Ctrl+Y
+		if ((event.key === 'z' && event.shiftKey) || event.key === 'y') {
+			event.preventDefault();
+			historyActions.redo();
+			return;
+		}
+	}
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 <SvelteFlowProvider>
 	<!-- EdgeRefresher component - handles updateNodeInternals calls -->
 	<EdgeRefresher {nodeIdToRefresh} onRefreshComplete={handleEdgeRefreshComplete} />
@@ -471,6 +597,8 @@
 							onconnect={handleConnect}
 							onbeforedelete={handleBeforeDelete}
 							ondelete={handleNodesDelete}
+							onnodedragstart={handleNodeDragStart}
+							onnodedragstop={handleNodeDragStop}
 							minZoom={0.2}
 							maxZoom={3}
 							clickConnect={true}
@@ -530,10 +658,10 @@
 
 <!-- Toast notifications container -->
 <Toaster
-		position="bottom-center"
-		containerClassName={FLOWDROP_TOASTER_CLASS}
-		toastOptions={flowdropToastOptions}
-	/>
+	position="bottom-center"
+	containerClassName={FLOWDROP_TOASTER_CLASS}
+	toastOptions={flowdropToastOptions}
+/>
 
 <style>
 	.flowdrop-workflow-editor {
@@ -625,10 +753,10 @@
 		fill: currentColor;
 	}
 
+	/* Handle size/position only; colors come from inline --fd-handle-fill and base.css ::before */
 	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
-		width: 18px;
-		height: 18px;
-		border: 2px solid white;
+		width: var(--fd-handle-size);
+		height: var(--fd-handle-size);
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 		z-index: 20;
 	}
@@ -637,6 +765,8 @@
 	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
 		pointer-events: all;
 		cursor: crosshair;
+		background-color: var(--fd-handle-fill);
+		border-color: var(--fd-handle-border-color);
 	}
 
 	/**

package/dist/components/form/FormAutocomplete.svelte

@@ -262,7 +262,7 @@
 	function handleInput(event: Event): void {
 		const target = event.currentTarget as HTMLInputElement;
 		inputValue = target.value;
-		
+
 		// Open dropdown
 		showDropdown();
 
@@ -493,9 +493,9 @@
 	 */
 	function showDropdown(): void {
 		if (!popoverElement || disabled) return;
-		
+
 		updatePopoverPosition();
-		
+
 		try {
 			popoverElement.showPopover();
 			isOpen = true;
@@ -510,7 +510,7 @@
 	 */
 	function hideDropdown(): void {
 		if (!popoverElement) return;
-		
+
 		try {
 			popoverElement.hidePopover();
 		} catch {
@@ -658,11 +658,7 @@
 		style={popoverStyle}
 		onmousedown={(e) => e.preventDefault()}
 	>
-		<ul
-			class="form-autocomplete__listbox"
-			role="listbox"
-			aria-label="Suggestions"
-		>
+		<ul class="form-autocomplete__listbox" role="listbox" aria-label="Suggestions">
 			{#if isLoading}
 				<li class="form-autocomplete__status form-autocomplete__status--loading">
 					<Icon icon="heroicons:arrow-path" class="form-autocomplete__status-icon" />

package/dist/components/form/FormCheckboxGroup.svelte

@@ -18,13 +18,22 @@
 		value: string[];
 		/** Available options */
 		options: string[];
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
 		onChange: (value: string[]) => void;
 	}
 
-	let { id, value = [], options = [], ariaDescribedBy, onChange }: Props = $props();
+	let {
+		id,
+		value = [],
+		options = [],
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
 
 	/**
 	 * Handle checkbox toggle
@@ -56,6 +65,7 @@
 				class="form-checkbox__input"
 				value={option}
 				checked={isChecked}
+				{disabled}
 				onchange={(e) => handleCheckboxChange(option, e.currentTarget.checked)}
 			/>
 			<span class="form-checkbox__custom" aria-hidden="true">

package/dist/components/form/FormCheckboxGroup.svelte.d.ts

@@ -5,6 +5,8 @@ interface Props {
     value: string[];
     /** Available options */
     options: string[];
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormCodeEditor.svelte

@@ -47,6 +47,8 @@
 		height?: string;
 		/** Whether to auto-format JSON on blur */
 		autoFormat?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -61,6 +63,7 @@
 		darkTheme = false,
 		height = '200px',
 		autoFormat = true,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -167,6 +170,7 @@
 	/**
 	 * Create editor extensions array
 	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
+	 * When disabled is true, adds readOnly/editable so the editor cannot be modified
 	 */
 	function createExtensions() {
 		const extensions = [
@@ -177,22 +181,27 @@
 			highlightActiveLine(),
 			drawSelection(),
 
-			// Editing features
-			history(),
-			indentOnInput(),
+			// Editing features (skip when read-only)
+			...(disabled
+				? []
+				: [
+						history(),
+						indentOnInput(),
+						keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+					]),
+
+			// Read-only: prevent document changes and mark content as non-editable
+			...(disabled ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
 
 			// Syntax highlighting
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 
-			// Keymaps for basic editing
-			keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-
 			// JSON-specific features
 			json(),
 			linter(jsonParseLinter()),
 			lintGutter(),
 
-			// Update listener
+			// Update listener (only fires on user edit when not disabled)
 			EditorView.updateListener.of(handleUpdate),
 
 			// Custom theme

package/dist/components/form/FormCodeEditor.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     height?: string;
     /** Whether to auto-format JSON on blur */
     autoFormat?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */