@d34dman/flowdrop 0.0.45 → 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/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,
@@ -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}

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 */

package/dist/components/form/FormField.svelte

@@ -61,6 +61,11 @@
 
 	let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
 
+	/**
+	 * When schema.readOnly is true, disable all inputs (no editing).
+	 */
+	const isReadOnly = $derived(schema.readOnly === true);
+
 	/**
 	 * Computed description ID for ARIA association
 	 */
@@ -204,7 +209,7 @@
 			}
 			return value ? [String(value)] : [];
 		}
-		return String(value ?? "");
+		return String(value ?? '');
 	});
 </script>
 
@@ -222,6 +227,7 @@
 				value={arrayValue}
 				options={enumOptions}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'select-enum'}
@@ -231,6 +237,7 @@
 				options={enumOptions}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'textarea'}
@@ -240,6 +247,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'text'}
@@ -249,6 +257,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'number'}
@@ -261,6 +270,7 @@
 				step={schema.step}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'range'}
@@ -272,6 +282,7 @@
 				step={schema.step}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'toggle'}
@@ -279,6 +290,7 @@
 				id={fieldKey}
 				value={booleanValue}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'select-options'}
@@ -288,6 +300,7 @@
 				options={selectOptions}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'array' && schema.items}
@@ -298,6 +311,7 @@
 				minItems={schema.minItems}
 				maxItems={schema.maxItems}
 				addLabel={`Add ${schema.items.title ?? 'Item'}`}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'code-editor'}
@@ -310,6 +324,7 @@
 				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
 				autoFormat={(schema.autoFormat as boolean | undefined) ?? true}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'markdown-editor'}
@@ -323,6 +338,7 @@
 				showStatusBar={(schema.showStatusBar as boolean | undefined) ?? true}
 				spellChecker={(schema.spellChecker as boolean | undefined) ?? false}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'template-editor'}
@@ -338,6 +354,7 @@
 				placeholderExample={(schema.placeholderExample as string | undefined) ??
 					'Hello {{ name }}, your order #{{ order_id }} is ready!'}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'autocomplete' && schema.autocomplete}
@@ -348,6 +365,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else}
@@ -357,6 +375,7 @@
 				value={stringValue}
 				placeholder={schema.placeholder ?? ''}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{/if}