@flowdrop/flowdrop 1.0.0 → 1.1.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,
     };
 }
 // =========================================================================
@@ -106,7 +106,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
@@ -131,11 +131,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,
     });
 }
 /**
@@ -155,7 +155,7 @@ export function getWorkflowChanged() {
     return {
         nodes: getWorkflowNodes(),
         edges: getWorkflowEdges(),
-        name: getWorkflowName()
+        name: getWorkflowName(),
     };
 }
 /**
@@ -171,7 +171,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,
     };
 }
 /**
@@ -184,7 +184,7 @@ export function getWorkflowMetadataChanged() {
     return {
         createdAt: metadata.createdAt,
         updatedAt: metadata.updatedAt,
-        version: metadata.version ?? '1.0.0'
+        version: metadata.version ?? "1.0.0",
     };
 }
 /**
@@ -256,16 +256,16 @@ function createSnapshot(workflow) {
             position: n.position,
             data: {
                 label: n.data.label,
-                config: n.data.config
-            }
+                config: n.data.config,
+            },
         })),
         edges: workflow.edges.map((e) => ({
             id: e.id,
             source: e.source,
             target: e.target,
             sourceHandle: e.sourceHandle,
-            targetHandle: e.targetHandle
-        }))
+            targetHandle: e.targetHandle,
+        })),
     };
     return JSON.stringify(toSnapshot);
 }
@@ -403,7 +403,8 @@ 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;
@@ -442,7 +443,7 @@ export const workflowActions = {
      */
     updateWorkflow: (workflow) => {
         workflowState = workflow;
-        notifyWorkflowChange('metadata');
+        notifyWorkflowChange("metadata");
     },
     /**
      * Restore workflow from history (undo/redo)
@@ -452,7 +453,7 @@ export const workflowActions = {
     restoreFromHistory: (workflow) => {
         isRestoringFromHistory = true;
         workflowState = workflow;
-        notifyWorkflowChange('metadata');
+        notifyWorkflowChange("metadata");
         isRestoringFromHistory = false;
     },
     /**
@@ -472,10 +473,10 @@ export const workflowActions = {
             nodes,
             metadata: buildMetadata(workflowState.metadata, {
                 versionId,
-                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
-            })
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
+            }),
         };
-        notifyWorkflowChange('node_move');
+        notifyWorkflowChange("node_move");
     },
     /**
      * Update edges
@@ -494,10 +495,10 @@ export const workflowActions = {
             edges,
             metadata: buildMetadata(workflowState.metadata, {
                 versionId,
-                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1
-            })
+                updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
+            }),
         };
-        notifyWorkflowChange('edge_add');
+        notifyWorkflowChange("edge_add");
     },
     /**
      * Update workflow name
@@ -508,23 +509,23 @@ export const workflowActions = {
         workflowState = {
             ...workflowState,
             name,
-            metadata: buildMetadata(workflowState.metadata)
+            metadata: buildMetadata(workflowState.metadata),
         };
-        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),
         };
-        notifyWorkflowChange('node_add');
+        notifyWorkflowChange("node_add");
     },
     /**
      * Remove a node
@@ -533,44 +534,44 @@ 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),
         };
-        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),
         };
-        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),
         };
-        notifyWorkflowChange('edge_remove');
+        notifyWorkflowChange("edge_remove");
     },
     /**
      * Update a specific node
@@ -578,15 +579,15 @@ 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),
         };
-        notifyWorkflowChange('node_config');
+        notifyWorkflowChange("node_config");
     },
     /**
      * Clear the workflow
@@ -610,9 +611,9 @@ export const workflowActions = {
             return;
         workflowState = {
             ...workflowState,
-            metadata: buildMetadata(workflowState.metadata, metadata)
+            metadata: buildMetadata(workflowState.metadata, metadata),
         };
-        notifyWorkflowChange('metadata');
+        notifyWorkflowChange("metadata");
     },
     /**
      * Batch update nodes and edges
@@ -621,7 +622,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 = {
@@ -629,10 +630,12 @@ export const workflowActions = {
             ...(updates.nodes && { nodes: updates.nodes }),
             ...(updates.edges && { edges: updates.edges }),
             ...(updates.name && { name: updates.name }),
-            ...(updates.description !== undefined && { description: updates.description }),
-            metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined)
+            ...(updates.description !== undefined && {
+                description: updates.description,
+            }),
+            metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined),
         };
-        notifyWorkflowChange('metadata');
+        notifyWorkflowChange("metadata");
     },
     /**
      * Push current state to history manually
@@ -645,5 +648,5 @@ export const workflowActions = {
      */
     pushHistory: (description, workflow) => {
         pushToHistory(description, workflow);
-    }
+    },
 };

package/dist/stories/CanvasDecorator.svelte

@@ -3,47 +3,50 @@
   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();
+  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'
-	);
+  // Watch the data-theme attribute set by Storybook's addon-themes
+  let colorMode = $state<ColorMode>(
+    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+      "light",
+  );
 
-	$effect(() => {
-		const observer = new MutationObserver(() => {
-			colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
-		});
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ['data-theme']
-		});
-		return () => observer.disconnect();
-	});
+  $effect(() => {
+    const observer = new MutationObserver(() => {
+      colorMode =
+        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+        "light";
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  });
 </script>
 
 <div class="canvas-decorator-wrapper">
-	<SvelteFlow nodes={[]} edges={[]} {colorMode}>
-		<Controls />
-		{@render children()}
-	</SvelteFlow>
+  <SvelteFlow nodes={[]} edges={[]} {colorMode}>
+    <Controls />
+    {@render children()}
+  </SvelteFlow>
 </div>
 
 <style>
-	.canvas-decorator-wrapper {
-		width: 800px;
-		height: 400px;
-		position: relative;
-	}
+  .canvas-decorator-wrapper {
+    width: 800px;
+    height: 400px;
+    position: relative;
+  }
 
-	/* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
+  /* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
 	   which doesn't update with colorMode="dark". Map the --xy- themed value. */
-	.canvas-decorator-wrapper :global(.svelte-flow.dark) {
-		--background-color-default: var(--xy-background-color-default);
-	}
+  .canvas-decorator-wrapper :global(.svelte-flow.dark) {
+    --background-color-default: var(--xy-background-color-default);
+  }
 </style>

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

@@ -0,0 +1,125 @@
+<!--
+  EdgeDecorator: Renders two connected nodes inside a SvelteFlow canvas
+  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";
+
+  interface Props {
+    sourceData: Record<string, unknown>;
+    targetData: Record<string, unknown>;
+    edgeStyle?: string;
+    edgeClass?: string;
+    edgeMarkerColor?: string;
+    edgeMarkerSize?: { width: number; height: number };
+    sourceHandleId?: string;
+    targetHandleId?: string;
+  }
+
+  let {
+    sourceData,
+    targetData,
+    edgeStyle = "stroke: #64748b;",
+    edgeClass = "flowdrop--edge--data",
+    edgeMarkerColor = "#64748b",
+    edgeMarkerSize = EDGE_MARKER_SIZES.data,
+    sourceHandleId = "output",
+    targetHandleId = "input",
+  }: Props = $props();
+
+  registerBuiltinNodes();
+
+  const nodeTypes = {
+    universalNode: UniversalNode,
+  };
+
+  const edgeTypes = {
+    default: FlowDropEdge,
+  };
+
+  const SOURCE_ID = "source-node";
+  const TARGET_ID = "target-node";
+
+  let nodes = $state<Node[]>([
+    {
+      id: SOURCE_ID,
+      type: "universalNode",
+      position: { x: 0, y: 0 },
+      data: { ...sourceData, nodeId: SOURCE_ID },
+    },
+    {
+      id: TARGET_ID,
+      type: "universalNode",
+      position: { x: 350, y: 0 },
+      data: { ...targetData, nodeId: TARGET_ID },
+    },
+  ]);
+
+  // Handle IDs follow the format: {nodeId}-{input|output}-{portId}
+  let edges = $state<Edge[]>([
+    {
+      id: "edge-1",
+      source: SOURCE_ID,
+      target: TARGET_ID,
+      sourceHandle: `${SOURCE_ID}-output-${sourceHandleId}`,
+      targetHandle: `${TARGET_ID}-input-${targetHandleId}`,
+      style: edgeStyle,
+      class: edgeClass,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        ...edgeMarkerSize,
+        color: edgeMarkerColor,
+      },
+    },
+  ]);
+
+  let colorMode = $state<ColorMode>(
+    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+      "light",
+  );
+
+  $effect(() => {
+    const observer = new MutationObserver(() => {
+      colorMode =
+        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+        "light";
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="edge-decorator-wrapper">
+  <SvelteFlow
+    bind:nodes
+    bind:edges
+    {nodeTypes}
+    {edgeTypes}
+    fitView
+    fitViewOptions={{ maxZoom: 0.85, padding: 0.3 }}
+    {colorMode}
+  >
+    <Controls />
+  </SvelteFlow>
+</div>
+
+<style>
+  .edge-decorator-wrapper {
+    width: 900px;
+    height: 400px;
+    position: relative;
+  }
+
+  .edge-decorator-wrapper :global(.svelte-flow.dark) {
+    --background-color-default: var(--xy-background-color-default);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import "@xyflow/svelte/dist/style.css";
+interface Props {
+    sourceData: Record<string, unknown>;
+    targetData: Record<string, unknown>;
+    edgeStyle?: string;
+    edgeClass?: string;
+    edgeMarkerColor?: string;
+    edgeMarkerSize?: {
+        width: number;
+        height: number;
+    };
+    sourceHandleId?: string;
+    targetHandleId?: string;
+}
+declare const EdgeDecorator: import("svelte").Component<Props, {}, "">;
+type EdgeDecorator = ReturnType<typeof EdgeDecorator>;
+export default EdgeDecorator;

package/dist/stories/NodeDecorator.svelte

@@ -3,71 +3,77 @@
   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();
+  // Ensure built-in node components are registered
+  registerBuiltinNodes();
 
-	const nodeTypes = {
-		universalNode: UniversalNode
-	};
+  const nodeTypes = {
+    universalNode: UniversalNode,
+  };
 
-	let nodes = $derived<Node[]>([
-		{
-			id: 'story-node',
-			type: 'universalNode',
-			position: { x: 0, y: 0 },
-			selected,
-			data
-		}
-	]);
+  let nodes = $derived<Node[]>([
+    {
+      id: "story-node",
+      type: "universalNode",
+      position: { x: 0, y: 0 },
+      selected,
+      data,
+    },
+  ]);
 
-	// Watch the data-theme attribute set by Storybook's addon-themes
-	let colorMode = $state<ColorMode>(
-		(document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
-	);
+  // Watch the data-theme attribute set by Storybook's addon-themes
+  let colorMode = $state<ColorMode>(
+    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+      "light",
+  );
 
-	$effect(() => {
-		const observer = new MutationObserver(() => {
-			colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
-		});
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ['data-theme']
-		});
-		return () => observer.disconnect();
-	});
+  $effect(() => {
+    const observer = new MutationObserver(() => {
+      colorMode =
+        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
+        "light";
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  });
 </script>
 
 <div class="node-decorator-wrapper">
-	<SvelteFlow
-		{nodes}
-		edges={[]}
-		{nodeTypes}
-		fitView
-		fitViewOptions={{ maxZoom: 0.85, padding: 0.2 }}
-		{colorMode}
-	>
-		<Controls />
-	</SvelteFlow>
+  <SvelteFlow
+    {nodes}
+    edges={[]}
+    {nodeTypes}
+    fitView
+    fitViewOptions={{ maxZoom: 0.85, padding: 0.2 }}
+    {colorMode}
+  >
+    <Controls />
+  </SvelteFlow>
 </div>
 
 <style>
-	.node-decorator-wrapper {
-		width: 800px;
-		height: 400px;
-		position: relative;
-	}
+  .node-decorator-wrapper {
+    width: 800px;
+    height: 400px;
+    position: relative;
+  }
 
-	/* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
+  /* Fix: SvelteFlow's scoped styles use non-prefixed --background-color-default
 	   which doesn't update with colorMode="dark". Map the --xy- themed value. */
-	.node-decorator-wrapper :global(.svelte-flow.dark) {
-		--background-color-default: var(--xy-background-color-default);
-	}
+  .node-decorator-wrapper :global(.svelte-flow.dark) {
+    --background-color-default: var(--xy-background-color-default);
+  }
 </style>

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;