@flowdrop/flowdrop 1.3.0 → 1.5.0

package/dist/stores/portCoordinateStore.svelte.js

@@ -126,27 +126,19 @@ export function updateNodePortCoordinates(node, getInternalNode) {
     const internalNode = getInternalNode(node.id);
     if (!internalNode)
         return;
-    // Remove old entries for this node.
-    // untrack prevents this read from creating a reactive dependency on `coordinates`
-    // inside any $effect that calls this function — otherwise the effect would re-run
-    // every time we mutate `coordinates`, creating an infinite reactive loop during drag.
-    const keysToDelete = untrack(() => {
-        const keys = [];
+    // Build a new map with all entries except this node's, then add recomputed entries.
+    // Single assignment fires one reactive notification instead of N deletes + M sets.
+    const newMap = new SvelteMap();
+    untrack(() => {
         for (const [key, coord] of coordinates) {
-            if (coord.nodeId === node.id) {
-                keys.push(key);
-            }
+            if (coord.nodeId !== node.id)
+                newMap.set(key, coord);
         }
-        return keys;
     });
-    for (const key of keysToDelete) {
-        coordinates.delete(key);
-    }
-    // Add new entries
-    const coords = computeNodePortCoordinates(node, internalNode);
-    for (const coord of coords) {
-        coordinates.set(coord.handleId, coord);
+    for (const coord of computeNodePortCoordinates(node, internalNode)) {
+        newMap.set(coord.handleId, coord);
     }
+    coordinates = newMap;
 }
 /**
  * Remove all coordinates for a node (on node delete).
@@ -154,18 +146,20 @@ export function updateNodePortCoordinates(node, getInternalNode) {
  * @param nodeId - ID of the node to remove
  */
 export function removeNodePortCoordinates(nodeId) {
-    const keysToDelete = untrack(() => {
-        const keys = [];
+    const newMap = new SvelteMap();
+    untrack(() => {
         for (const [key, coord] of coordinates) {
-            if (coord.nodeId === nodeId) {
-                keys.push(key);
-            }
+            if (coord.nodeId !== nodeId)
+                newMap.set(key, coord);
         }
-        return keys;
     });
-    for (const key of keysToDelete) {
-        coordinates.delete(key);
-    }
+    coordinates = newMap;
+}
+/**
+ * Clear all port coordinates (lifecycle cleanup).
+ */
+export function clearPortCoordinates() {
+    coordinates = new SvelteMap();
 }
 /**
  * Get coordinates for a specific handle.

package/dist/stores/workflowStore.svelte.d.ts

@@ -22,6 +22,10 @@ export declare function getWorkflowStore(): Workflow | null;
 /**
  * Get the current dirty state reactively
  *
+ * Reads both _editVersion and _savedVersion, so Svelte tracks them
+ * as reactive dependencies — any component using this will re-render
+ * when dirty state changes.
+ *
  * @returns true if there are unsaved changes
  */
 export declare function getIsDirty(): boolean;
@@ -121,9 +125,10 @@ export declare function setOnDirtyStateChange(callback: ((isDirty: boolean) => v
  */
 export declare function setOnWorkflowChange(callback: ((workflow: Workflow, changeType: WorkflowChangeType) => void) | null): void;
 /**
- * Mark the current workflow state as saved
+ * Mark the current workflow state as saved.
  *
- * Clears the dirty state by updating the saved snapshot.
+ * Captures the current edit version so isDirty becomes false.
+ * Call this after a successful backend save.
  */
 export declare function markAsSaved(): void;
 /**
@@ -132,6 +137,19 @@ export declare function markAsSaved(): void;
  * @returns true if there are unsaved changes
  */
 export declare function isDirty(): boolean;
+/**
+ * Get the current edit version.
+ *
+ * Use this for the save verification protocol:
+ * 1. Before save: `const v = getEditVersion()`
+ * 2. Include `v` in the save request payload
+ * 3. Backend echoes `v` in the response
+ * 4. If echoed version matches: `markAsSaved()`
+ * 5. If not: the save didn't persist the version you submitted — reset from backend response
+ *
+ * @returns The current monotonic edit version
+ */
+export declare function getEditVersion(): number;
 /**
  * Enable or disable history recording
  *
@@ -246,6 +264,17 @@ export declare const workflowActions: {
         description?: string;
         metadata?: Partial<Workflow["metadata"]>;
     }) => void;
+    /**
+     * Swap a node — atomically replaces nodes and edges with a descriptive history entry.
+     *
+     * Unlike batchUpdate, this uses `"node_swap"` as the change type and
+     * records a meaningful description for the undo history.
+     */
+    swapNode: (updates: {
+        nodes: WorkflowNode[];
+        edges: WorkflowEdge[];
+        description?: string;
+    }) => void;
     /**
      * Push current state to history manually
      *

package/dist/stores/workflowStore.svelte.js

@@ -34,21 +34,23 @@ function buildMetadata(existing, updates) {
 /** Global workflow state */
 let workflowState = $state(null);
 // =========================================================================
-// Dirty State Tracking
+// Dirty State Tracking (Version Counter)
 // =========================================================================
 /**
- * State for tracking if there are unsaved changes
+ * Monotonic edit version — bumps on every mutation action.
  *
- * This is set to true whenever the workflow changes after initialization.
- * It can be reset to false by calling markAsSaved().
+ * Used for two purposes:
+ * 1. O(1) dirty detection: isDirty = _editVersion !== _savedVersion
+ * 2. Save verification protocol: include the version in the save request,
+ *    backend echoes it back. If the echoed version doesn't match, the save
+ *    didn't persist the version the client submitted.
  */
-let isDirtyState = $state(false);
+let _editVersion = $state(0);
 /**
- * Snapshot of the workflow when it was last saved
- *
- * Used to compare current state with saved state.
+ * Edit version captured at the last successful save.
+ * When _editVersion === _savedVersion, the workflow is clean.
  */
-let savedSnapshot = null;
+let _savedVersion = $state(0);
 /**
  * Callback for dirty state changes
  *
@@ -87,10 +89,14 @@ export function getWorkflowStore() {
 /**
  * Get the current dirty state reactively
  *
+ * Reads both _editVersion and _savedVersion, so Svelte tracks them
+ * as reactive dependencies — any component using this will re-render
+ * when dirty state changes.
+ *
  * @returns true if there are unsaved changes
  */
 export function getIsDirty() {
-    return isDirtyState;
+    return _editVersion !== _savedVersion;
 }
 /**
  * Get the workflow ID reactively
@@ -239,53 +245,21 @@ export function setOnWorkflowChange(callback) {
 // Internal Helpers
 // =========================================================================
 /**
- * Create a snapshot of the workflow for comparison
- *
- * @param workflow - The workflow to snapshot
- * @returns A JSON string representation for comparison
- */
-function createSnapshot(workflow) {
-    if (!workflow)
-        return null;
-    // Only include the parts that matter for "dirty" detection
-    const toSnapshot = {
-        name: workflow.name,
-        description: workflow.description,
-        nodes: workflow.nodes.map((n) => ({
-            id: n.id,
-            position: n.position,
-            data: {
-                label: n.data.label,
-                config: n.data.config,
-            },
-        })),
-        edges: workflow.edges.map((e) => ({
-            id: e.id,
-            source: e.source,
-            target: e.target,
-            sourceHandle: e.sourceHandle,
-            targetHandle: e.targetHandle,
-        })),
-    };
-    return JSON.stringify(toSnapshot);
-}
-/**
- * Update dirty state based on current workflow
- *
- * Compares current workflow with saved snapshot.
+ * Bump the edit version and notify dirty state change if needed.
+ * Called by every mutation action.
  */
-function updateDirtyState() {
-    const currentSnapshot = createSnapshot(workflowState);
-    const newIsDirty = currentSnapshot !== savedSnapshot;
-    if (newIsDirty !== isDirtyState) {
-        isDirtyState = newIsDirty;
+function bumpVersion() {
+    _editVersion++;
+    // Dirty state just flipped from clean → dirty
+    if (_editVersion - 1 === _savedVersion) {
         if (onDirtyStateChangeCallback) {
-            onDirtyStateChangeCallback(newIsDirty);
+            onDirtyStateChangeCallback(true);
         }
     }
 }
 /**
- * Mark the workflow change and update dirty state
+ * Notify external listeners of a workflow change.
+ * Does NOT bump the version — callers that mutate must call bumpVersion() explicitly.
  *
  * @param changeType - The type of change that occurred
  */
@@ -293,17 +267,17 @@ function notifyWorkflowChange(changeType) {
     if (workflowState && onWorkflowChangeCallback) {
         onWorkflowChangeCallback(workflowState, changeType);
     }
-    updateDirtyState();
 }
 /**
- * Mark the current workflow state as saved
+ * Mark the current workflow state as saved.
  *
- * Clears the dirty state by updating the saved snapshot.
+ * Captures the current edit version so isDirty becomes false.
+ * Call this after a successful backend save.
  */
 export function markAsSaved() {
-    savedSnapshot = createSnapshot(workflowState);
-    isDirtyState = false;
-    if (onDirtyStateChangeCallback) {
+    const wasDirty = _editVersion !== _savedVersion;
+    _savedVersion = _editVersion;
+    if (wasDirty && onDirtyStateChangeCallback) {
         onDirtyStateChangeCallback(false);
     }
 }
@@ -313,7 +287,22 @@ export function markAsSaved() {
  * @returns true if there are unsaved changes
  */
 export function isDirty() {
-    return isDirtyState;
+    return _editVersion !== _savedVersion;
+}
+/**
+ * Get the current edit version.
+ *
+ * Use this for the save verification protocol:
+ * 1. Before save: `const v = getEditVersion()`
+ * 2. Include `v` in the save request payload
+ * 3. Backend echoes `v` in the response
+ * 4. If echoed version matches: `markAsSaved()`
+ * 5. If not: the save didn't persist the version you submitted — reset from backend response
+ *
+ * @returns The current monotonic edit version
+ */
+export function getEditVersion() {
+    return _editVersion;
 }
 /**
  * Enable or disable history recording
@@ -390,7 +379,7 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
         if (currentNode.position.x !== newNode.position.x ||
             currentNode.position.y !== newNode.position.y)
             return true;
-        if (JSON.stringify(currentNode.data) !== JSON.stringify(newNode.data))
+        if (currentNode.data !== newNode.data)
             return true;
     }
     // Check if edges have changed
@@ -426,9 +415,9 @@ export const workflowActions = {
      */
     initialize: (workflow) => {
         workflowState = workflow;
-        // Set the saved snapshot - workflow is "clean" after initialization
-        savedSnapshot = createSnapshot(workflow);
-        isDirtyState = false;
+        // Reset version counters — workflow is "clean" after initialization
+        _editVersion = 0;
+        _savedVersion = 0;
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
         }
@@ -443,6 +432,7 @@ export const workflowActions = {
      */
     updateWorkflow: (workflow) => {
         workflowState = workflow;
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
     /**
@@ -453,6 +443,7 @@ export const workflowActions = {
     restoreFromHistory: (workflow) => {
         isRestoringFromHistory = true;
         workflowState = workflow;
+        bumpVersion();
         notifyWorkflowChange("metadata");
         isRestoringFromHistory = false;
     },
@@ -476,6 +467,7 @@ export const workflowActions = {
                 updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
             }),
         };
+        bumpVersion();
         notifyWorkflowChange("node_move");
     },
     /**
@@ -498,6 +490,7 @@ export const workflowActions = {
                 updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
             }),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_add");
     },
     /**
@@ -511,6 +504,7 @@ export const workflowActions = {
             name,
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("name");
     },
     /**
@@ -525,6 +519,7 @@ export const workflowActions = {
             nodes: [...workflowState.nodes, node],
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_add");
     },
     /**
@@ -543,6 +538,7 @@ export const workflowActions = {
             edges: workflowState.edges.filter((edge) => edge.source !== nodeId && edge.target !== nodeId),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_remove");
     },
     /**
@@ -557,6 +553,7 @@ export const workflowActions = {
             edges: [...workflowState.edges, edge],
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_add");
     },
     /**
@@ -571,6 +568,7 @@ export const workflowActions = {
             edges: workflowState.edges.filter((edge) => edge.id !== edgeId),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_remove");
     },
     /**
@@ -587,6 +585,7 @@ export const workflowActions = {
             nodes: workflowState.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_config");
     },
     /**
@@ -596,8 +595,8 @@ export const workflowActions = {
      */
     clear: () => {
         workflowState = null;
-        savedSnapshot = null;
-        isDirtyState = false;
+        _editVersion = 0;
+        _savedVersion = 0;
         historyService.clear();
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
@@ -613,6 +612,7 @@ export const workflowActions = {
             ...workflowState,
             metadata: buildMetadata(workflowState.metadata, metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
     /**
@@ -635,8 +635,28 @@ export const workflowActions = {
             }),
             metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined),
         };
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
+    /**
+     * Swap a node — atomically replaces nodes and edges with a descriptive history entry.
+     *
+     * Unlike batchUpdate, this uses `"node_swap"` as the change type and
+     * records a meaningful description for the undo history.
+     */
+    swapNode: (updates) => {
+        pushToHistory(updates.description ?? "Swap node");
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            nodes: updates.nodes,
+            edges: updates.edges,
+            metadata: buildMetadata(workflowState.metadata),
+        };
+        bumpVersion();
+        notifyWorkflowChange("node_swap");
+    },
     /**
      * Push current state to history manually
      *

package/dist/stories/EdgeDecorator.svelte

@@ -46,7 +46,7 @@
   const SOURCE_ID = "source-node";
   const TARGET_ID = "target-node";
 
-  let nodes = $state<Node[]>([
+  let nodes = $derived<Node[]>([
     {
       id: SOURCE_ID,
       type: "universalNode",
@@ -62,7 +62,7 @@
   ]);
 
   // Handle IDs follow the format: {nodeId}-{input|output}-{portId}
-  let edges = $state<Edge[]>([
+  let edges = $derived<Edge[]>([
     {
       id: "edge-1",
       source: SOURCE_ID,
@@ -100,8 +100,8 @@
 
 <div class="edge-decorator-wrapper">
   <SvelteFlow
-    bind:nodes
-    bind:edges
+    {nodes}
+    {edges}
     {nodeTypes}
     {edgeTypes}
     fitView

package/dist/styles/base.css

@@ -30,6 +30,54 @@
   box-shadow: var(--fd-shadow-md);
 }
 
+/* xyflow Controls & MiniMap: wire up to skin tokens so themes can restyle them */
+.svelte-flow {
+  --xy-controls-button-background-color: var(
+    --fd-controls-button-bg,
+    var(--fd-card)
+  );
+  --xy-controls-button-background-color-hover: var(
+    --fd-controls-button-bg-hover,
+    var(--fd-muted)
+  );
+  --xy-controls-button-color: var(
+    --fd-controls-button-color,
+    var(--fd-foreground)
+  );
+  --xy-controls-button-color-hover: var(
+    --fd-controls-button-color-hover,
+    var(--fd-foreground)
+  );
+  --xy-controls-button-border-color: var(
+    --fd-controls-button-border,
+    var(--fd-border)
+  );
+  --xy-controls-box-shadow: var(
+    --fd-controls-box-shadow,
+    0 0 2px 1px rgba(0, 0, 0, 0.08)
+  );
+
+  --xy-minimap-background-color: var(--fd-minimap-bg, var(--fd-card));
+  --xy-minimap-mask-background-color: var(
+    --fd-minimap-mask-bg,
+    var(--fd-backdrop)
+  );
+  --xy-minimap-mask-stroke-color: var(
+    --fd-minimap-mask-stroke,
+    var(--fd-border)
+  );
+  --xy-minimap-mask-stroke-width: var(--fd-minimap-mask-stroke-width, 1);
+  --xy-minimap-node-background-color: var(
+    --fd-minimap-node-bg,
+    var(--fd-muted)
+  );
+  --xy-minimap-node-stroke-color: var(
+    --fd-minimap-node-stroke,
+    var(--fd-border-muted)
+  );
+  --xy-minimap-node-stroke-width: var(--fd-minimap-node-stroke-width, 2);
+}
+
 /* Flow node handles: 20px connection area, 12px visible circle (::before)
    Override xyflow's default background so port color (--fd-handle-fill from inline style) shows.
    Use `.svelte-flow` parent for higher specificity (0-2-0) to beat xyflow defaults (0-1-0). */

package/dist/svelte-app.d.ts

@@ -13,7 +13,7 @@ import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js"
 import type { FlowDropTheme, FlowDropThemeName } from "./types/theme.js";
 import type { WorkflowFormatAdapter } from "./registry/workflowFormatRegistry.js";
 import "./registry/builtinFormats.js";
-import type { PartialSettings } from "./types/settings.js";
+import type { PartialSettings, SettingsCategory } from "./types/settings.js";
 /**
  * Navbar action configuration
  */
@@ -74,6 +74,12 @@ export interface FlowDropMountOptions {
     formatAdapters?: WorkflowFormatAdapter[];
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal (defaults to all) */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
 }
 /**
  * Return type for mounted FlowDrop app

package/dist/svelte-app.js

@@ -47,7 +47,7 @@ import { globalSaveWorkflow, globalExportWorkflow, } from "./services/globalSave
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, theme, } = options;
+    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, theme, settingsCategories, showSettingsSyncButton, showSettingsResetButton, } = options;
     // Register custom format adapters before mounting
     if (formatAdapters) {
         for (const adapter of formatAdapters) {
@@ -137,6 +137,9 @@ export async function mountFlowDropApp(container, options = {}) {
             eventHandlers,
             features,
             theme,
+            settingsCategories,
+            showSettingsSyncButton,
+            showSettingsResetButton,
         },
     });
     // Set up draft auto-save manager

package/dist/types/chat.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Chat Types for FlowDrop LLM Chat Interface
+ *
+ * Provides type definitions for the chat panel's communication
+ * with backend LLM integrations.
+ *
+ * @module types/chat
+ */
+/**
+ * Role for chat history messages
+ */
+export type ChatMessageRole = "user" | "assistant";
+/**
+ * A single message in the chat history
+ */
+export interface ChatHistoryMessage {
+    role: ChatMessageRole;
+    content: string;
+}
+/**
+ * Request payload sent to the chat endpoint
+ */
+export interface ChatRequest {
+    /** The user's natural language message */
+    message: string;
+    /** Serialized current workflow state (nodes + edges) */
+    workflowState: unknown;
+    /** Optional conversation history for context */
+    history?: ChatHistoryMessage[];
+}
+/**
+ * Response payload from the chat endpoint
+ */
+export interface ChatResponse {
+    /** The LLM's response content (may contain markdown and code blocks) */
+    content: string;
+    /** Optional conversation ID for backend session tracking */
+    conversationId?: string;
+}
+/**
+ * Result of parsing an LLM response to extract DSL commands
+ */
+export interface ExtractedCommands {
+    /** The full explanation text (content outside code blocks) */
+    explanation: string;
+    /** Extracted DSL command strings */
+    commands: string[];
+}
+/**
+ * Status of a single command in the preview
+ */
+export type CommandExecutionStatus = "pending" | "executing" | "success" | "error";
+/**
+ * A single command shown in the command preview UI
+ */
+export interface CommandPreviewItem {
+    /** The raw DSL command string */
+    raw: string;
+    /** Current execution status */
+    status: CommandExecutionStatus;
+    /** Optional result or error message after execution */
+    result?: string;
+}

package/dist/types/chat.js

@@ -0,0 +1,9 @@
+/**
+ * Chat Types for FlowDrop LLM Chat Interface
+ *
+ * Provides type definitions for the chat panel's communication
+ * with backend LLM integrations.
+ *
+ * @module types/chat
+ */
+export {};