@d34dman/flowdrop 0.0.45 → 0.0.47

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/App.svelte

@@ -756,6 +756,8 @@
 				<ConfigForm
 					node={currentNode}
 					workflowId={$workflowStore?.id}
+					workflowNodes={$workflowStore?.nodes}
+					workflowEdges={$workflowStore?.edges}
 					onChange={async (updatedConfig, uiExtensions) => {
 						// Sync config changes to workflow immediately on field blur
 						if (selectedNodeId && currentNode) {
@@ -780,6 +782,10 @@
 
 							workflowActions.updateNode(selectedNodeId, nodeUpdates);
 
+							// Update the local editor state to reflect config changes immediately
+							// This is needed for nodeType changes to take effect visually
+							workflowEditorRef.updateNodeData(selectedNodeId, updatedData);
+
 							// Refresh edge positions in case config changes affect handles
 							await workflowEditorRef.refreshEdgePositions(selectedNodeId);
 						}

package/dist/components/ConfigForm.svelte

@@ -22,6 +22,7 @@
 	import type {
 		ConfigSchema,
 		WorkflowNode,
+		WorkflowEdge,
 		NodeUIExtensions,
 		ConfigEditOptions
 	} from '../types/index.js';
@@ -35,6 +36,7 @@
 		type DynamicSchemaResult
 	} from '../services/dynamicSchemaService.js';
 	import { globalSaveWorkflow } from '../services/globalSave.js';
+	import { getAvailableVariables } from '../services/variableService.js';
 
 	interface Props {
 		/** Optional workflow node (if provided, schema and values are derived from it) */
@@ -49,6 +51,16 @@
 		workflowId?: string;
 		/** Whether to also save the workflow when saving config */
 		saveWorkflowWhenSavingConfig?: boolean;
+		/**
+		 * All workflow nodes (used for deriving template variables from connected nodes).
+		 * When provided along with workflowEdges, enables autocomplete for template fields.
+		 */
+		workflowNodes?: WorkflowNode[];
+		/**
+		 * All workflow edges (used for finding connections to derive template variables).
+		 * When provided along with workflowNodes, enables autocomplete for template fields.
+		 */
+		workflowEdges?: WorkflowEdge[];
 		/** Callback when any field value changes (fired on blur for immediate sync) */
 		onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
 		/** Callback when form is saved (includes both config and extensions if enabled) */
@@ -64,6 +76,8 @@
 		showUIExtensions = true,
 		workflowId,
 		saveWorkflowWhenSavingConfig = false,
+		workflowNodes = [],
+		workflowEdges = [],
 		onChange,
 		onSave,
 		onCancel
@@ -364,10 +378,46 @@
 	}
 
 	/**
-	 * Convert ConfigProperty to FieldSchema for FormField component
+	 * Convert ConfigProperty to FieldSchema for FormField component.
+	 * Processes template fields to inject computed variable schema.
+	 *
+	 * For template fields, the `variables` config controls which input ports
+	 * provide variables for autocomplete.
 	 */
 	function toFieldSchema(property: Record<string, unknown>): FieldSchema {
-		return property as FieldSchema;
+		const fieldSchema = property as FieldSchema;
+
+		// Process template fields to compute variable schema
+		if (fieldSchema.format === 'template' && node && workflowNodes.length > 0 && workflowEdges.length > 0) {
+			// Get the variables config (may be undefined or partially defined)
+			const variablesConfig = fieldSchema.variables;
+
+			// Compute the variable schema with optional port filtering and port name prefixing
+			const computedSchema = getAvailableVariables(node, workflowNodes, workflowEdges, {
+				targetPortIds: variablesConfig?.ports,
+				includePortName: variablesConfig?.includePortName
+			});
+
+			// Merge computed schema with any pre-defined schema
+			const mergedSchema = variablesConfig?.schema
+				? {
+						variables: {
+							...computedSchema.variables,
+							...variablesConfig.schema.variables
+						}
+					}
+				: computedSchema;
+
+			return {
+				...fieldSchema,
+				variables: {
+					...variablesConfig,
+					schema: mergedSchema
+				}
+			} as FieldSchema;
+		}
+
+		return fieldSchema;
 	}
 </script>
 
@@ -670,11 +720,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 +728,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 +1048,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 +1056,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/ConfigForm.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigSchema, WorkflowNode, NodeUIExtensions } from '../types/index.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions } from '../types/index.js';
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;
@@ -12,6 +12,16 @@ interface Props {
     workflowId?: string;
     /** Whether to also save the workflow when saving config */
     saveWorkflowWhenSavingConfig?: boolean;
+    /**
+     * All workflow nodes (used for deriving template variables from connected nodes).
+     * When provided along with workflowEdges, enables autocomplete for template fields.
+     */
+    workflowNodes?: WorkflowNode[];
+    /**
+     * All workflow edges (used for finding connections to derive template variables).
+     * When provided along with workflowNodes, enables autocomplete for template fields.
+     */
+    workflowEdges?: WorkflowEdge[];
     /** Callback when any field value changes (fired on blur for immediate sync) */
     onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
     /** Callback when form is saved (includes both config and extensions if enabled) */

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/SettingsPanel.svelte

@@ -89,8 +89,11 @@
 					type: 'string',
 					title: 'Theme Preference',
 					description: 'Choose your preferred color scheme',
-					enum: ['light', 'dark', 'auto'],
-					enumLabels: ['Light', 'Dark', 'Auto (System)'],
+					oneOf: [
+						{ const: 'light', title: 'Light' },
+						{ const: 'dark', title: 'Dark' },
+						{ const: 'auto', title: 'Auto (System)' }
+					],
 					default: 'auto'
 				}
 			}

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');
 		}
@@ -430,6 +515,32 @@
 	 */
 	let nodeIdToRefresh = $state<string | null>(null);
 
+	/**
+	 * Update a node's data in the local editor state.
+	 * This should be called after updating the node in the global store to ensure
+	 * the visual representation is updated immediately (e.g., for nodeType changes).
+	 *
+	 * @param nodeId - The ID of the node to update
+	 * @param dataUpdates - Partial data updates to merge into the node's data
+	 */
+	export function updateNodeData(
+		nodeId: string,
+		dataUpdates: Partial<WorkflowNodeType['data']>
+	): void {
+		flowNodes = flowNodes.map((node) => {
+			if (node.id === nodeId) {
+				return {
+					...node,
+					data: {
+						...node.data,
+						...dataUpdates
+					}
+				};
+			}
+			return node;
+		});
+	}
+
 	/**
 	 * Force edge position recalculation after node config changes
 	 * This should be called after saving gateway/switch node configs where branches are reordered
@@ -450,8 +561,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 +623,8 @@
 							onconnect={handleConnect}
 							onbeforedelete={handleBeforeDelete}
 							ondelete={handleNodesDelete}
+							onnodedragstart={handleNodeDragStart}
+							onnodedragstop={handleNodeDragStop}
 							minZoom={0.2}
 							maxZoom={3}
 							clickConnect={true}

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

@@ -16,6 +16,7 @@ interface Props {
     pipelineId?: string;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
+    updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;
     refreshEdgePositions: (nodeId: string) => Promise<void>;
 }, "">;
 type WorkflowEditor = ReturnType<typeof WorkflowEditor>;

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