@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/stores/workflowStore.svelte.js

@@ -10,14 +10,14 @@
  *
  * @module stores/workflowStore
  */
-import { DEFAULT_WORKFLOW_FORMAT } from "../types/index.js";
-import { historyService } from "../services/historyService.js";
+import { DEFAULT_WORKFLOW_FORMAT } from '../types/index.js';
+import { historyService } from '../services/historyService.js';
 /**
  * Safely build updated workflow metadata, providing defaults for required fields.
  */
 function buildMetadata(existing, updates) {
     return {
-        version: existing?.version ?? "1.0",
+        version: existing?.version ?? '1.0',
         createdAt: existing?.createdAt ?? new Date().toISOString(),
         updatedAt: new Date().toISOString(),
         author: existing?.author,
@@ -25,7 +25,7 @@ function buildMetadata(existing, updates) {
         versionId: existing?.versionId,
         updateNumber: existing?.updateNumber,
         format: existing?.format,
-        ...updates,
+        ...updates
     };
 }
 // =========================================================================
@@ -112,7 +112,7 @@ export function getWorkflowId() {
  * @returns The workflow name or 'Untitled Workflow'
  */
 export function getWorkflowName() {
-    return workflowState?.name ?? "Untitled Workflow";
+    return workflowState?.name ?? 'Untitled Workflow';
 }
 /**
  * Get the workflow nodes reactively
@@ -137,11 +137,11 @@ export function getWorkflowEdges() {
  */
 export function getWorkflowMetadata() {
     return (workflowState?.metadata ?? {
-        version: "1.0.0",
+        version: '1.0.0',
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
         versionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        updateNumber: 0,
+        updateNumber: 0
     });
 }
 /**
@@ -161,7 +161,7 @@ export function getWorkflowChanged() {
     return {
         nodes: getWorkflowNodes(),
         edges: getWorkflowEdges(),
-        name: getWorkflowName(),
+        name: getWorkflowName()
     };
 }
 /**
@@ -177,7 +177,7 @@ export function getWorkflowValidation() {
         hasEdges: edges.length > 0,
         nodeCount: nodes.length,
         edgeCount: edges.length,
-        isValid: nodes.length > 0 && edges.length >= 0,
+        isValid: nodes.length > 0 && edges.length >= 0
     };
 }
 /**
@@ -190,7 +190,7 @@ export function getWorkflowMetadataChanged() {
     return {
         createdAt: metadata.createdAt,
         updatedAt: metadata.updatedAt,
-        version: metadata.version ?? "1.0.0",
+        version: metadata.version ?? '1.0.0'
     };
 }
 /**
@@ -392,8 +392,7 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
             return true;
         if (currentEdge.id !== newEdge.id)
             return true;
-        if (currentEdge.source !== newEdge.source ||
-            currentEdge.target !== newEdge.target)
+        if (currentEdge.source !== newEdge.source || currentEdge.target !== newEdge.target)
             return true;
     }
     return false;
@@ -433,7 +432,7 @@ export const workflowActions = {
     updateWorkflow: (workflow) => {
         workflowState = workflow;
         bumpVersion();
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     },
     /**
      * Restore workflow from history (undo/redo)
@@ -444,7 +443,7 @@ export const workflowActions = {
         isRestoringFromHistory = true;
         workflowState = workflow;
         bumpVersion();
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
         isRestoringFromHistory = false;
     },
     /**
@@ -464,11 +463,11 @@ export const workflowActions = {
             nodes,
             metadata: buildMetadata(workflowState.metadata, {
                 versionId,
-                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
-            }),
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
+            })
         };
         bumpVersion();
-        notifyWorkflowChange("node_move");
+        notifyWorkflowChange('node_move');
     },
     /**
      * Update edges
@@ -487,11 +486,11 @@ export const workflowActions = {
             edges,
             metadata: buildMetadata(workflowState.metadata, {
                 versionId,
-                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
-            }),
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
+            })
         };
         bumpVersion();
-        notifyWorkflowChange("edge_add");
+        notifyWorkflowChange('edge_add');
     },
     /**
      * Update workflow name
@@ -502,25 +501,25 @@ export const workflowActions = {
         workflowState = {
             ...workflowState,
             name,
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("name");
+        notifyWorkflowChange('name');
     },
     /**
      * Add a node
      */
     addNode: (node) => {
-        pushToHistory("Add node");
+        pushToHistory('Add node');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             nodes: [...workflowState.nodes, node],
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("node_add");
+        notifyWorkflowChange('node_add');
     },
     /**
      * Remove a node
@@ -529,47 +528,47 @@ export const workflowActions = {
      * A single undo will restore both the node and its edges.
      */
     removeNode: (nodeId) => {
-        pushToHistory("Delete node");
+        pushToHistory('Delete node');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             nodes: workflowState.nodes.filter((node) => node.id !== nodeId),
             edges: workflowState.edges.filter((edge) => edge.source !== nodeId && edge.target !== nodeId),
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("node_remove");
+        notifyWorkflowChange('node_remove');
     },
     /**
      * Add an edge
      */
     addEdge: (edge) => {
-        pushToHistory("Add connection");
+        pushToHistory('Add connection');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             edges: [...workflowState.edges, edge],
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("edge_add");
+        notifyWorkflowChange('edge_add');
     },
     /**
      * Remove an edge
      */
     removeEdge: (edgeId) => {
-        pushToHistory("Delete connection");
+        pushToHistory('Delete connection');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             edges: workflowState.edges.filter((edge) => edge.id !== edgeId),
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("edge_remove");
+        notifyWorkflowChange('edge_remove');
     },
     /**
      * Update a specific node
@@ -577,16 +576,16 @@ export const workflowActions = {
      * Used for config changes. Pushes to history for undo support.
      */
     updateNode: (nodeId, updates) => {
-        pushToHistory("Update node config");
+        pushToHistory('Update node config');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             nodes: workflowState.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("node_config");
+        notifyWorkflowChange('node_config');
     },
     /**
      * Clear the workflow
@@ -610,10 +609,10 @@ export const workflowActions = {
             return;
         workflowState = {
             ...workflowState,
-            metadata: buildMetadata(workflowState.metadata, metadata),
+            metadata: buildMetadata(workflowState.metadata, metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     },
     /**
      * Batch update nodes and edges
@@ -622,7 +621,7 @@ export const workflowActions = {
      * Creates a single history entry for the entire batch.
      */
     batchUpdate: (updates) => {
-        pushToHistory("Batch update");
+        pushToHistory('Batch update');
         if (!workflowState)
             return;
         workflowState = {
@@ -631,12 +630,13 @@ export const workflowActions = {
             ...(updates.edges && { edges: updates.edges }),
             ...(updates.name && { name: updates.name }),
             ...(updates.description !== undefined && {
-                description: updates.description,
+                description: updates.description
             }),
-            metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined),
+            ...(updates.config !== undefined && { config: updates.config }),
+            metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined)
         };
         bumpVersion();
-        notifyWorkflowChange("metadata");
+        notifyWorkflowChange('metadata');
     },
     /**
      * Swap a node — atomically replaces nodes and edges with a descriptive history entry.
@@ -645,17 +645,17 @@ export const workflowActions = {
      * records a meaningful description for the undo history.
      */
     swapNode: (updates) => {
-        pushToHistory(updates.description ?? "Swap node");
+        pushToHistory(updates.description ?? 'Swap node');
         if (!workflowState)
             return;
         workflowState = {
             ...workflowState,
             nodes: updates.nodes,
             edges: updates.edges,
-            metadata: buildMetadata(workflowState.metadata),
+            metadata: buildMetadata(workflowState.metadata)
         };
         bumpVersion();
-        notifyWorkflowChange("node_swap");
+        notifyWorkflowChange('node_swap');
     },
     /**
      * Push current state to history manually
@@ -668,5 +668,5 @@ export const workflowActions = {
      */
     pushHistory: (description, workflow) => {
         pushToHistory(description, workflow);
-    },
+    }
 };

package/dist/stories/CanvasDecorator.svelte

@@ -3,28 +3,25 @@
   matching how overlay components (e.g. CanvasBanner) appear in the workflow editor.
 -->
 <script lang="ts">
-  import { SvelteFlow, Controls } from "@xyflow/svelte";
-  import type { ColorMode } from "@xyflow/svelte";
-  import "@xyflow/svelte/dist/style.css";
-  import type { Snippet } from "svelte";
+  import { SvelteFlow, Controls } from '@xyflow/svelte';
+  import type { ColorMode } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  import type { Snippet } from 'svelte';
 
   let { children }: { children: Snippet } = $props();
 
   // Watch the data-theme attribute set by Storybook's addon-themes
   let colorMode = $state<ColorMode>(
-    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-      "light",
+    (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
   );
 
   $effect(() => {
     const observer = new MutationObserver(() => {
-      colorMode =
-        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-        "light";
+      colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ['data-theme']
     });
     return () => observer.disconnect();
   });

package/dist/stories/CanvasDecorator.svelte.d.ts

@@ -1,5 +1,5 @@
-import "@xyflow/svelte/dist/style.css";
-import type { Snippet } from "svelte";
+import '@xyflow/svelte/dist/style.css';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children: Snippet;
 };

package/dist/stories/EdgeDecorator.svelte

@@ -3,13 +3,13 @@
   to showcase edge rendering with arrowhead markers.
 -->
 <script lang="ts">
-  import { SvelteFlow, Controls, MarkerType } from "@xyflow/svelte";
-  import type { Node, Edge, ColorMode } from "@xyflow/svelte";
-  import "@xyflow/svelte/dist/style.css";
-  import UniversalNode from "../components/UniversalNode.svelte";
-  import FlowDropEdge from "../components/FlowDropEdge.svelte";
-  import { registerBuiltinNodes } from "../registry/builtinNodes.js";
-  import { EDGE_MARKER_SIZES } from "../config/constants.js";
+  import { SvelteFlow, Controls, MarkerType } from '@xyflow/svelte';
+  import type { Node, Edge, ColorMode } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  import UniversalNode from '../components/UniversalNode.svelte';
+  import FlowDropEdge from '../components/FlowDropEdge.svelte';
+  import { registerBuiltinNodes } from '../registry/builtinNodes.js';
+  import { EDGE_MARKER_SIZES } from '../config/constants.js';
 
   interface Props {
     sourceData: Record<string, unknown>;
@@ -25,46 +25,46 @@
   let {
     sourceData,
     targetData,
-    edgeStyle = "stroke: #64748b;",
-    edgeClass = "flowdrop--edge--data",
-    edgeMarkerColor = "#64748b",
+    edgeStyle = 'stroke: #64748b;',
+    edgeClass = 'flowdrop--edge--data',
+    edgeMarkerColor = '#64748b',
     edgeMarkerSize = EDGE_MARKER_SIZES.data,
-    sourceHandleId = "output",
-    targetHandleId = "input",
+    sourceHandleId = 'output',
+    targetHandleId = 'input'
   }: Props = $props();
 
   registerBuiltinNodes();
 
   const nodeTypes = {
-    universalNode: UniversalNode,
+    universalNode: UniversalNode
   };
 
   const edgeTypes = {
-    default: FlowDropEdge,
+    default: FlowDropEdge
   };
 
-  const SOURCE_ID = "source-node";
-  const TARGET_ID = "target-node";
+  const SOURCE_ID = 'source-node';
+  const TARGET_ID = 'target-node';
 
   let nodes = $derived<Node[]>([
     {
       id: SOURCE_ID,
-      type: "universalNode",
+      type: 'universalNode',
       position: { x: 0, y: 0 },
-      data: { ...sourceData, nodeId: SOURCE_ID },
+      data: { ...sourceData, nodeId: SOURCE_ID }
     },
     {
       id: TARGET_ID,
-      type: "universalNode",
+      type: 'universalNode',
       position: { x: 350, y: 0 },
-      data: { ...targetData, nodeId: TARGET_ID },
-    },
+      data: { ...targetData, nodeId: TARGET_ID }
+    }
   ]);
 
   // Handle IDs follow the format: {nodeId}-{input|output}-{portId}
   let edges = $derived<Edge[]>([
     {
-      id: "edge-1",
+      id: 'edge-1',
       source: SOURCE_ID,
       target: TARGET_ID,
       sourceHandle: `${SOURCE_ID}-output-${sourceHandleId}`,
@@ -74,25 +74,22 @@
       markerEnd: {
         type: MarkerType.ArrowClosed,
         ...edgeMarkerSize,
-        color: edgeMarkerColor,
-      },
-    },
+        color: edgeMarkerColor
+      }
+    }
   ]);
 
   let colorMode = $state<ColorMode>(
-    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-      "light",
+    (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
   );
 
   $effect(() => {
     const observer = new MutationObserver(() => {
-      colorMode =
-        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-        "light";
+      colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ['data-theme']
     });
     return () => observer.disconnect();
   });

package/dist/stories/EdgeDecorator.svelte.d.ts

@@ -1,4 +1,4 @@
-import "@xyflow/svelte/dist/style.css";
+import '@xyflow/svelte/dist/style.css';
 interface Props {
     sourceData: Record<string, unknown>;
     targetData: Record<string, unknown>;

package/dist/stories/NodeDecorator.svelte

@@ -3,49 +3,43 @@
   inside a canvas, matching how they appear in the workflow editor.
 -->
 <script lang="ts">
-  import { SvelteFlow, Controls } from "@xyflow/svelte";
-  import type { Node, ColorMode } from "@xyflow/svelte";
-  import "@xyflow/svelte/dist/style.css";
-  import UniversalNode from "../components/UniversalNode.svelte";
-  import { registerBuiltinNodes } from "../registry/builtinNodes.js";
+  import { SvelteFlow, Controls } from '@xyflow/svelte';
+  import type { Node, ColorMode } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  import UniversalNode from '../components/UniversalNode.svelte';
+  import { registerBuiltinNodes } from '../registry/builtinNodes.js';
 
-  let {
-    data,
-    selected = false,
-  }: { data: Record<string, unknown>; selected?: boolean } = $props();
+  let { data, selected = false }: { data: Record<string, unknown>; selected?: boolean } = $props();
 
   // Ensure built-in node components are registered
   registerBuiltinNodes();
 
   const nodeTypes = {
-    universalNode: UniversalNode,
+    universalNode: UniversalNode
   };
 
   let nodes = $derived<Node[]>([
     {
-      id: "story-node",
-      type: "universalNode",
+      id: 'story-node',
+      type: 'universalNode',
       position: { x: 0, y: 0 },
       selected,
-      data,
-    },
+      data
+    }
   ]);
 
   // Watch the data-theme attribute set by Storybook's addon-themes
   let colorMode = $state<ColorMode>(
-    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-      "light",
+    (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
   );
 
   $effect(() => {
     const observer = new MutationObserver(() => {
-      colorMode =
-        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-        "light";
+      colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ['data-theme']
     });
     return () => observer.disconnect();
   });

package/dist/stories/NodeDecorator.svelte.d.ts

@@ -1,4 +1,4 @@
-import "@xyflow/svelte/dist/style.css";
+import '@xyflow/svelte/dist/style.css';
 type $$ComponentProps = {
     data: Record<string, unknown>;
     selected?: boolean;

package/dist/stories/utils.d.ts

@@ -2,7 +2,7 @@
  * Shared story utilities
  * Reusable mock data factories for Storybook stories
  */
-import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from "../types/interrupt.js";
+import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from '../types/interrupt.js';
 export declare function createSampleNodeData(overrides?: Record<string, unknown>): {
     label: string;
     config: {};
@@ -28,7 +28,7 @@ export declare function createSampleNodeData(overrides?: Record<string, unknown>
         }[];
     };
 };
-export declare function createTerminalNodeData(variant?: "start" | "end" | "exit"): {
+export declare function createTerminalNodeData(variant?: 'start' | 'end' | 'exit'): {
     label: string;
     config: {};
     metadata: {