@flowdrop/flowdrop 1.0.0 → 1.0.1

package/dist/components/FlowDropEdge.stories.svelte

@@ -0,0 +1,161 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import EdgeDecorator from '../../lib/stories/EdgeDecorator.svelte';
+	import { createSampleNodeData } from '../../lib/stories/utils.js';
+	import { EDGE_MARKER_SIZES } from '../../lib/config/constants.js';
+
+	const { Story } = defineMeta({
+		title: 'Edges/FlowDropEdge',
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	const sourceNode = createSampleNodeData({
+		label: 'Text Input',
+		metadata: {
+			id: 'text_input',
+			name: 'Text Input',
+			description: 'Simple text input',
+			category: 'inputs',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:text',
+			color: '#22c55e',
+			inputs: [],
+			outputs: [
+				{ id: 'output', name: 'Output', type: 'output', dataType: 'string', required: false }
+			]
+		}
+	});
+
+	const targetNode = createSampleNodeData({
+		label: 'Text Output',
+		metadata: {
+			id: 'text_output',
+			name: 'Text Output',
+			description: 'Display text output',
+			category: 'outputs',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:text-box',
+			color: '#ef4444',
+			inputs: [
+				{ id: 'input', name: 'Input', type: 'input', dataType: 'string', required: false }
+			],
+			outputs: []
+		}
+	});
+
+	const triggerSource = createSampleNodeData({
+		label: 'Trigger Source',
+		metadata: {
+			id: 'trigger_source',
+			name: 'Trigger Source',
+			description: 'Emits a trigger signal',
+			category: 'processing',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:play',
+			color: '#3b82f6',
+			inputs: [],
+			outputs: [
+				{ id: 'trigger', name: 'Trigger', type: 'output', dataType: 'trigger', required: false }
+			]
+		}
+	});
+
+	const triggerTarget = createSampleNodeData({
+		label: 'Trigger Target',
+		metadata: {
+			id: 'trigger_target',
+			name: 'Trigger Target',
+			description: 'Receives a trigger signal',
+			category: 'processing',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:lightning-bolt',
+			color: '#8b5cf6',
+			inputs: [
+				{ id: 'trigger', name: 'Trigger', type: 'input', dataType: 'trigger', required: false }
+			],
+			outputs: []
+		}
+	});
+
+	const toolSource = createSampleNodeData({
+		label: 'Tool Provider',
+		metadata: {
+			id: 'tool_provider',
+			name: 'Tool Provider',
+			description: 'Provides a tool',
+			category: 'processing',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:wrench',
+			color: '#f59e0b',
+			inputs: [],
+			outputs: [
+				{ id: 'tool', name: 'Tool', type: 'output', dataType: 'tool', required: false }
+			]
+		}
+	});
+
+	const toolTarget = createSampleNodeData({
+		label: 'Tool Consumer',
+		metadata: {
+			id: 'tool_consumer',
+			name: 'Tool Consumer',
+			description: 'Consumes a tool',
+			category: 'processing',
+			version: '1.0.0',
+			type: 'simple',
+			icon: 'mdi:cog',
+			color: '#f59e0b',
+			inputs: [
+				{ id: 'tool', name: 'Tool', type: 'input', dataType: 'tool', required: false }
+			],
+			outputs: []
+		}
+	});
+</script>
+
+<Story name="Data Edge">
+	<EdgeDecorator
+		sourceData={sourceNode}
+		targetData={targetNode}
+		edgeStyle="stroke: var(--fd-edge-data, #64748b);"
+		edgeClass="flowdrop--edge--data"
+		edgeMarkerColor="#64748b"
+		edgeMarkerSize={EDGE_MARKER_SIZES.data}
+		sourceHandleId="output"
+		targetHandleId="input"
+	/>
+</Story>
+
+<Story name="Trigger Edge">
+	<EdgeDecorator
+		sourceData={triggerSource}
+		targetData={triggerTarget}
+		edgeStyle="stroke: var(--fd-edge-trigger, #1e293b); stroke-width: 2px;"
+		edgeClass="flowdrop--edge--trigger"
+		edgeMarkerColor="#1e293b"
+		edgeMarkerSize={EDGE_MARKER_SIZES.trigger}
+		sourceHandleId="trigger"
+		targetHandleId="trigger"
+	/>
+</Story>
+
+<Story name="Tool Edge">
+	<EdgeDecorator
+		sourceData={toolSource}
+		targetData={toolTarget}
+		edgeStyle="stroke: var(--fd-edge-tool, #f59e0b); stroke-dasharray: 5 3;"
+		edgeClass="flowdrop--edge--tool"
+		edgeMarkerColor="#f59e0b"
+		edgeMarkerSize={EDGE_MARKER_SIZES.tool}
+		sourceHandleId="tool"
+		targetHandleId="tool"
+	/>
+</Story>

package/dist/components/FlowDropEdge.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FlowDropEdge;
+type FlowDropEdge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FlowDropEdge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/FlowDropEdge.svelte

@@ -0,0 +1,168 @@
+<!--
+  FlowDropEdge Component
+  Custom bezier edge that draws its own arrowhead so the line stroke ends
+  at the arrow base instead of poking through to the tip.
+
+  Approach:
+  1. Compute the full bezier path (xyflow's getBezierPath)
+  2. Parse the SVG path to extract the cubic bezier control points
+  3. Evaluate the curve near the end to get the true visual tangent
+  4. Shorten the path along that tangent and draw the arrowhead at the target
+-->
+
+<script lang="ts">
+	import { getBezierPath } from '@xyflow/svelte';
+	import { BaseEdge } from '@xyflow/svelte';
+	import type { BezierEdgeProps } from '@xyflow/svelte';
+	import { ARROW_LENGTH_PX, ARROW_HALF_WIDTH_PX } from '../config/constants.js';
+
+	let {
+		id,
+		interactionWidth,
+		label,
+		labelStyle,
+		markerEnd: _markerEnd,
+		markerStart,
+		pathOptions,
+		sourcePosition,
+		sourceX,
+		sourceY,
+		style,
+		targetPosition,
+		targetX,
+		targetY
+	}: BezierEdgeProps = $props();
+
+	/**
+	 * Extract stroke color from the edge's inline style for the arrowhead fill.
+	 */
+	let strokeColor = $derived.by(() => {
+		if (!style) return 'var(--fd-edge-data, #64748b)';
+		const match = style.match(/stroke:\s*([^;]+)/);
+		return match ? match[1].trim() : 'var(--fd-edge-data, #64748b)';
+	});
+
+	/**
+	 * Evaluate a cubic bezier at parameter t.
+	 * P(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3
+	 */
+	function bezierAt(
+		p0x: number,
+		p0y: number,
+		p1x: number,
+		p1y: number,
+		p2x: number,
+		p2y: number,
+		p3x: number,
+		p3y: number,
+		t: number
+	): { x: number; y: number } {
+		const u = 1 - t;
+		const uu = u * u;
+		const uuu = uu * u;
+		const tt = t * t;
+		const ttt = tt * t;
+		return {
+			x: uuu * p0x + 3 * uu * t * p1x + 3 * u * tt * p2x + ttt * p3x,
+			y: uuu * p0y + 3 * uu * t * p1y + 3 * u * tt * p2y + ttt * p3y
+		};
+	}
+
+	/**
+	 * Parse the SVG cubic bezier path "M x0,y0 C x1,y1 x2,y2 x3,y3"
+	 * into the four control points.
+	 */
+	function parseCubicBezier(d: string) {
+		const nums = d.match(/-?[\d.]+/g)?.map(Number);
+		if (!nums || nums.length < 8) return null;
+		return {
+			p0x: nums[0],
+			p0y: nums[1],
+			p1x: nums[2],
+			p1y: nums[3],
+			p2x: nums[4],
+			p2y: nums[5],
+			p3x: nums[6],
+			p3y: nums[7]
+		};
+	}
+
+	// Parameter near the end of the curve for tangent sampling
+	const T_SAMPLE = 0.9;
+
+	let computed = $derived.by(() => {
+		// 1. Get the full bezier path from xyflow
+		const [fullPath, lx, ly] = getBezierPath({
+			sourceX,
+			sourceY,
+			targetX,
+			targetY,
+			sourcePosition,
+			targetPosition,
+			curvature: pathOptions?.curvature
+		});
+
+		// 2. Parse control points from SVG path
+		const cp = parseCubicBezier(fullPath);
+		if (!cp) {
+			return { path: fullPath, labelX: lx, labelY: ly, angleDeg: 0 };
+		}
+
+		// 3. Evaluate the curve at T_SAMPLE to get a reference point
+		const ref = bezierAt(
+			cp.p0x,
+			cp.p0y,
+			cp.p1x,
+			cp.p1y,
+			cp.p2x,
+			cp.p2y,
+			cp.p3x,
+			cp.p3y,
+			T_SAMPLE
+		);
+
+		// 4. Tangent direction: from reference point to the target
+		const dx = targetX - ref.x;
+		const dy = targetY - ref.y;
+		const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
+		const angleRad = Math.atan2(dy, dx);
+
+		// 5. Shorten: move the endpoint back along the tangent
+		const adjX = targetX - Math.cos(angleRad) * ARROW_LENGTH_PX;
+		const adjY = targetY - Math.sin(angleRad) * ARROW_LENGTH_PX;
+
+		// 6. Recompute the bezier path with the shortened target
+		const [shortenedPath] = getBezierPath({
+			sourceX,
+			sourceY,
+			targetX: adjX,
+			targetY: adjY,
+			sourcePosition,
+			targetPosition,
+			curvature: pathOptions?.curvature
+		});
+
+		return { path: shortenedPath, labelX: lx, labelY: ly, angleDeg };
+	});
+</script>
+
+<BaseEdge
+	{id}
+	path={computed.path}
+	labelX={computed.labelX}
+	labelY={computed.labelY}
+	{label}
+	{labelStyle}
+	{markerStart}
+	{interactionWidth}
+	{style}
+/>
+
+<!-- Manual arrowhead: tip at origin pointing right, rotated to the bezier tangent -->
+<polygon
+	points="0,0 {-ARROW_LENGTH_PX},{-ARROW_HALF_WIDTH_PX} {-ARROW_LENGTH_PX},{ARROW_HALF_WIDTH_PX}"
+	fill={strokeColor}
+	stroke="none"
+	transform="translate({targetX},{targetY}) rotate({computed.angleDeg})"
+	class="flowdrop-edge-arrow"
+/>

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

@@ -0,0 +1,4 @@
+import type { BezierEdgeProps } from '@xyflow/svelte';
+declare const FlowDropEdge: import("svelte").Component<BezierEdgeProps, {}, "">;
+type FlowDropEdge = ReturnType<typeof FlowDropEdge>;
+export default FlowDropEdge;

package/dist/components/WorkflowEditor.svelte

@@ -33,6 +33,7 @@
 	import { tick, untrack } from 'svelte';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
+	import FlowDropEdge from './FlowDropEdge.svelte';
 	import { getWorkflowStore, workflowActions } from '../stores/workflowStore.svelte.js';
 	import { historyActions, setOnRestoreCallback } from '../stores/historyStore.svelte.js';
 	import UniversalNode from './UniversalNode.svelte';
@@ -331,6 +332,11 @@
 		universalNode: UniversalNode
 	};
 
+	// Use custom edge that shortens the path so the stroke ends at the arrow base
+	const edgeTypes = {
+		default: FlowDropEdge
+	};
+
 	// Handle arrows in our custom connection handler
 	const defaultEdgeOptions = {};
 
@@ -759,6 +765,7 @@
 							bind:nodes={flowNodes}
 							bind:edges={flowEdges}
 							{nodeTypes}
+							{edgeTypes}
 							{defaultEdgeOptions}
 							onconnect={(connection) =>
 								void handleConnect({

package/dist/config/constants.d.ts

@@ -14,6 +14,14 @@ export declare const NODE_EXECUTION_CACHE_TIMEOUT_MS = 30000;
 export declare const PIPELINE_API_UNAVAILABLE_DURATION_MS: number;
 /** Default cache TTL for schema and variable data in milliseconds (5 minutes) */
 export declare const DEFAULT_CACHE_TTL_MS: number;
+/**
+ * Custom arrowhead dimensions (in pixels) drawn by FlowDropEdge.
+ * The edge path is shortened by ARROW_LENGTH_PX so the stroke ends
+ * at the arrow base, and the arrowhead polygon is rendered separately
+ * at the target handle position.
+ */
+export declare const ARROW_LENGTH_PX = 8;
+export declare const ARROW_HALF_WIDTH_PX = 4;
 /** Edge marker arrow sizes by category */
 export declare const EDGE_MARKER_SIZES: {
     readonly loopback: {

package/dist/config/constants.js

@@ -14,6 +14,14 @@ export const NODE_EXECUTION_CACHE_TIMEOUT_MS = 30_000;
 export const PIPELINE_API_UNAVAILABLE_DURATION_MS = 5 * 60 * 1000;
 /** Default cache TTL for schema and variable data in milliseconds (5 minutes) */
 export const DEFAULT_CACHE_TTL_MS = 5 * 60 * 1000;
+/**
+ * Custom arrowhead dimensions (in pixels) drawn by FlowDropEdge.
+ * The edge path is shortened by ARROW_LENGTH_PX so the stroke ends
+ * at the arrow base, and the arrowhead polygon is rendered separately
+ * at the target handle position.
+ */
+export const ARROW_LENGTH_PX = 8;
+export const ARROW_HALF_WIDTH_PX = 4;
 /** Edge marker arrow sizes by category */
 export const EDGE_MARKER_SIZES = {
     loopback: { width: 14, height: 14 },

package/dist/services/api.d.ts

@@ -59,7 +59,14 @@ export declare const workflowApi: {
      */
     deleteWorkflow(id: string): Promise<void>;
     /**
-     * Save workflow (create or update)
+     * Save workflow (create or update).
+     *
+     * A workflow is considered existing when it already has an id (any format —
+     * integer, UUID, slug). Only a missing/empty id means "truly new".
+     *
+     * Note: globalSave.ts bypasses this method and calls createWorkflow /
+     * updateWorkflow directly so it can capture the new/existing decision before
+     * the uuidv4() fallback. This method is kept for external callers.
      */
     saveWorkflow(workflow: Workflow): Promise<Workflow>;
 };
@@ -108,7 +115,14 @@ export declare const api: {
          */
         deleteWorkflow(id: string): Promise<void>;
         /**
-         * Save workflow (create or update)
+         * Save workflow (create or update).
+         *
+         * A workflow is considered existing when it already has an id (any format —
+         * integer, UUID, slug). Only a missing/empty id means "truly new".
+         *
+         * Note: globalSave.ts bypasses this method and calls createWorkflow /
+         * updateWorkflow directly so it can capture the new/existing decision before
+         * the uuidv4() fallback. This method is kept for external callers.
          */
         saveWorkflow(workflow: Workflow): Promise<Workflow>;
     };

package/dist/services/api.js

@@ -185,14 +185,17 @@ export const workflowApi = {
         await apiRequest('workflows.delete', endpointConfig.endpoints.workflows.delete, { id }, { method: 'DELETE' });
     },
     /**
-     * Save workflow (create or update)
+     * Save workflow (create or update).
+     *
+     * A workflow is considered existing when it already has an id (any format —
+     * integer, UUID, slug). Only a missing/empty id means "truly new".
+     *
+     * Note: globalSave.ts bypasses this method and calls createWorkflow /
+     * updateWorkflow directly so it can capture the new/existing decision before
+     * the uuidv4() fallback. This method is kept for external callers.
      */
     async saveWorkflow(workflow) {
-        // Check if this is an existing workflow by looking for a valid ID
-        // Valid IDs should not be a UUID (which indicates a new workflow)
-        const isExistingWorkflow = workflow.id &&
-            workflow.id.length > 0 &&
-            !workflow.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
+        const isExistingWorkflow = !!(workflow.id && workflow.id.length > 0);
         if (isExistingWorkflow) {
             // Update existing workflow
             return this.updateWorkflow(workflow.id, workflow);

package/dist/services/globalSave.js

@@ -110,6 +110,11 @@ export async function globalSaveWorkflow(options = {}) {
         await ensureApiConfiguration();
         // Step 3 — Build the canonical workflow object.
         // Preserve all existing metadata fields (format, tags, etc.) so nothing is dropped.
+        //
+        // Determine new vs existing BEFORE the uuidv4() fallback: if the store already
+        // has an id (any format — integer, UUID, slug), the workflow came from a backend
+        // and must be updated. Only a missing id means "truly new".
+        const isExistingWorkflow = !!currentWorkflow.id;
         const workflowId = currentWorkflow.id || uuidv4();
         const finalWorkflow = {
             id: workflowId,
@@ -128,9 +133,6 @@ export async function globalSaveWorkflow(options = {}) {
         // Step 4 — Persist
         let savedWorkflow;
         if (apiClient) {
-            // Enhanced client path — detects existing workflows by non-UUID ID
-            const isExistingWorkflow = finalWorkflow.id.length > 0 &&
-                !finalWorkflow.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
             if (isExistingWorkflow) {
                 savedWorkflow = await apiClient.updateWorkflow(finalWorkflow.id, finalWorkflow);
             }
@@ -140,7 +142,13 @@ export async function globalSaveWorkflow(options = {}) {
         }
         else {
             // Legacy path
-            savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
+            if (isExistingWorkflow) {
+                savedWorkflow = await workflowApi.updateWorkflow(finalWorkflow.id, finalWorkflow);
+            }
+            else {
+                const { id: _id, ...workflowData } = finalWorkflow;
+                savedWorkflow = await workflowApi.createWorkflow(workflowData);
+            }
         }
         // Step 5 — If the server assigned a new ID, sync the store
         if (savedWorkflow.id && savedWorkflow.id !== finalWorkflow.id) {

package/dist/stories/EdgeDecorator.svelte

@@ -0,0 +1,122 @@
+<!--
+  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/package.json

@@ -1,292 +1,297 @@
 {
-	"name": "@flowdrop/flowdrop",
-	"license": "MIT",
-	"private": false,
-	"version": "1.0.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && pnpm run prepack",
-		"build:drupal": "vite build --config vite.config.drupal.ts",
-		"build:production": "vite build --config vite.config.production.ts",
-		"watch:build:drupal": "npm-watch build:drupal",
-		"watch:build:production": "npm-watch build:production",
-		"watch:build": "npm-watch build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "eslint . && prettier --check .",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"test:ui": "vitest --ui",
-		"test:coverage": "vitest run --coverage",
-		"test:e2e": "playwright test",
-		"test:e2e:ui": "playwright test --ui",
-		"test:e2e:debug": "playwright test --debug",
-		"test:all": "pnpm run test && pnpm run test:e2e",
-		"format": "prettier --write .",
-		"storybook": "storybook dev -p 6006",
-		"storybook:build": "storybook build",
-		"schema:generate": "node scripts/generate-schema.mjs",
-		"schema:check": "node scripts/generate-schema.mjs --check",
-		"api:lint": "pnpm --dir ../../apps/api-docs run lint",
-		"api:bundle": "pnpm --dir ../../apps/api-docs run bundle"
-	},
-	"watch": {
-		"build": {
-			"ignore": "build",
-			"patterns": [
-				"src"
-			],
-			"extensions": "js,ts,svelte,html,css,svg",
-			"quiet": true,
-			"legacyWatch": true,
-			"delay": 2500,
-			"runOnChangeOnly": false
-		},
-		"build:drupal": {
-			"ignore": "build",
-			"patterns": [
-				"src"
-			],
-			"extensions": "js,ts,svelte,html,css,svg",
-			"quiet": true,
-			"legacyWatch": true,
-			"delay": 2500,
-			"runOnChangeOnly": false
-		},
-		"build:production": {
-			"ignore": "build",
-			"patterns": [
-				"src"
-			],
-			"extensions": "js,ts,svelte,html,css,svg",
-			"quiet": true,
-			"legacyWatch": true,
-			"delay": 2500,
-			"runOnChangeOnly": false
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css",
-		"./dist/styles/base.css",
-		"./dist/editor/index.js"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./core": {
-			"types": "./dist/core/index.d.ts",
-			"svelte": "./dist/core/index.js",
-			"default": "./dist/core/index.js"
-		},
-		"./editor": {
-			"types": "./dist/editor/index.d.ts",
-			"svelte": "./dist/editor/index.js",
-			"default": "./dist/editor/index.js"
-		},
-		"./form": {
-			"types": "./dist/form/index.d.ts",
-			"svelte": "./dist/form/index.js",
-			"default": "./dist/form/index.js"
-		},
-		"./form/code": {
-			"types": "./dist/form/code.d.ts",
-			"svelte": "./dist/form/code.js",
-			"default": "./dist/form/code.js"
-		},
-		"./form/markdown": {
-			"types": "./dist/form/markdown.d.ts",
-			"svelte": "./dist/form/markdown.js",
-			"default": "./dist/form/markdown.js"
-		},
-		"./form/full": {
-			"types": "./dist/form/full.d.ts",
-			"svelte": "./dist/form/full.js",
-			"default": "./dist/form/full.js"
-		},
-		"./display": {
-			"types": "./dist/display/index.d.ts",
-			"svelte": "./dist/display/index.js",
-			"default": "./dist/display/index.js"
-		},
-		"./playground": {
-			"types": "./dist/playground/index.d.ts",
-			"svelte": "./dist/playground/index.js",
-			"default": "./dist/playground/index.js"
-		},
-		"./settings": {
-			"types": "./dist/settings/index.d.ts",
-			"svelte": "./dist/settings/index.js",
-			"default": "./dist/settings/index.js"
-		},
-		"./styles": "./dist/styles/base.css",
-		"./styles/*": "./dist/styles/*",
-		"./schema": {
-			"default": "./dist/schemas/v1/workflow.schema.json"
-		},
-		"./schema/v1": {
-			"default": "./dist/schemas/v1/workflow.schema.json"
-		}
-	},
-	"peerDependencies": {
-		"@codemirror/autocomplete": "^6.20.0",
-		"@codemirror/commands": "^6.10.2",
-		"@codemirror/lang-json": "^6.0.2",
-		"@codemirror/lang-markdown": "^6.5.0",
-		"@codemirror/language": "^6.12.1",
-		"@codemirror/lint": "^6.9.2",
-		"@codemirror/state": "^6.5.4",
-		"@codemirror/theme-one-dark": "^6.1.3",
-		"@codemirror/view": "^6.39.14",
-		"@iconify/svelte": "^5.0.0",
-		"@xyflow/svelte": "^1.2",
-		"codemirror": "^6.0.2",
-		"svelte": "^5.0.0"
-	},
-	"peerDependenciesMeta": {
-		"@codemirror/autocomplete": {
-			"optional": true
-		},
-		"@codemirror/commands": {
-			"optional": true
-		},
-		"@codemirror/lang-json": {
-			"optional": true
-		},
-		"@codemirror/lang-markdown": {
-			"optional": true
-		},
-		"@codemirror/language": {
-			"optional": true
-		},
-		"@codemirror/lint": {
-			"optional": true
-		},
-		"@codemirror/state": {
-			"optional": true
-		},
-		"@codemirror/theme-one-dark": {
-			"optional": true
-		},
-		"@codemirror/view": {
-			"optional": true
-		},
-		"@iconify/svelte": {
-			"optional": true
-		},
-		"codemirror": {
-			"optional": true
-		}
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/flowdrop-io/flowdrop.git"
-	},
-	"devDependencies": {
-		"@chromatic-com/storybook": "^5.0.1",
-		"@xyflow/svelte": "^1.2",
-		"@codemirror/autocomplete": "^6.20.0",
-		"@codemirror/commands": "^6.10.2",
-		"@codemirror/lang-json": "^6.0.2",
-		"@codemirror/lang-markdown": "^6.5.0",
-		"@codemirror/language": "^6.12.1",
-		"@codemirror/lint": "^6.9.2",
-		"@codemirror/state": "^6.5.4",
-		"@codemirror/theme-one-dark": "^6.1.3",
-		"@codemirror/view": "^6.39.14",
-		"codemirror": "^6.0.2",
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@iconify/svelte": "^5.0.0",
-		"@playwright/test": "^1.49.1",
-		"@storybook/addon-docs": "^10.2.15",
-		"@storybook/addon-svelte-csf": "^5.0.11",
-		"@storybook/addon-themes": "^10.2.15",
-		"@storybook/addon-vitest": "^10.2.15",
-		"@storybook/sveltekit": "^10.2.15",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/adapter-node": "^5.4.0",
-		"@sveltejs/kit": "^2.49.2",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@types/dompurify": "^3.2.0",
-		"@types/marked": "^6.0.0",
-		"@types/node": "^20",
-		"@types/uuid": "^10.0.0",
-		"@vitest/browser": "^3.2.3",
-		"@vitest/coverage-v8": "^3.2.4",
-		"@vitest/ui": "^3.2.4",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-storybook": "^10.2.15",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"happy-dom": "^20.0.11",
-		"msw": "^2.12.7",
-		"npm-watch": "^0.13.0",
-		"picomatch": "^4.0.3",
-		"playwright": "^1.53.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
-		"storybook": "^10.2.15",
-		"storybook-addon-tag-badges": "^3.0.6",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"terser": "^5.43.1",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.6",
-		"vite-plugin-devtools-json": "^0.2.1",
-		"vitest": "^3.2.3",
-		"vitest-browser-svelte": "^0.1.0",
-		"yaml": "^2.8.2"
-	},
-	"overrides": {
-		"@sveltejs/kit": {
-			"cookie": "0.7.2"
-		}
-	},
-	"keywords": [
-		"svelte",
-		"svelte5",
-		"workflow",
-		"editor",
-		"node-editor",
-		"graph-editor",
-		"visual-programming",
-		"xyflow",
-		"flowchart",
-		"dag"
-	],
-	"dependencies": {
-		"diff": "^8.0.3",
-		"dompurify": "^3.3.1",
-		"marked": "^16.1.1",
-		"svelte-5-french-toast": "^2.0.6",
-		"uuid": "^11.1.0"
-	},
-	"pnpm": {
-		"overrides": {
-			"cookie@<0.7.0": "0.7.2"
-		}
-	},
-	"msw": {
-		"workerDirectory": [
-			"static"
-		]
-	}
-}
+  "name": "@flowdrop/flowdrop",
+  "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
+  "license": "MIT",
+  "private": false,
+  "version": "1.0.1",
+  "author": "Shibin Das (D34dMan)",
+  "bugs": {
+    "url": "https://github.com/flowdrop-io/flowdrop/issues"
+  },
+  "watch": {
+    "build": {
+      "ignore": "build",
+      "patterns": [
+        "src"
+      ],
+      "extensions": "js,ts,svelte,html,css,svg",
+      "quiet": true,
+      "legacyWatch": true,
+      "delay": 2500,
+      "runOnChangeOnly": false
+    },
+    "build:drupal": {
+      "ignore": "build",
+      "patterns": [
+        "src"
+      ],
+      "extensions": "js,ts,svelte,html,css,svg",
+      "quiet": true,
+      "legacyWatch": true,
+      "delay": 2500,
+      "runOnChangeOnly": false
+    },
+    "build:production": {
+      "ignore": "build",
+      "patterns": [
+        "src"
+      ],
+      "extensions": "js,ts,svelte,html,css,svg",
+      "quiet": true,
+      "legacyWatch": true,
+      "delay": 2500,
+      "runOnChangeOnly": false
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles/base.css",
+    "./dist/editor/index.js"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "svelte": "./dist/core/index.js",
+      "default": "./dist/core/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/index.d.ts",
+      "svelte": "./dist/editor/index.js",
+      "default": "./dist/editor/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "svelte": "./dist/form/index.js",
+      "default": "./dist/form/index.js"
+    },
+    "./form/code": {
+      "types": "./dist/form/code.d.ts",
+      "svelte": "./dist/form/code.js",
+      "default": "./dist/form/code.js"
+    },
+    "./form/markdown": {
+      "types": "./dist/form/markdown.d.ts",
+      "svelte": "./dist/form/markdown.js",
+      "default": "./dist/form/markdown.js"
+    },
+    "./form/full": {
+      "types": "./dist/form/full.d.ts",
+      "svelte": "./dist/form/full.js",
+      "default": "./dist/form/full.js"
+    },
+    "./display": {
+      "types": "./dist/display/index.d.ts",
+      "svelte": "./dist/display/index.js",
+      "default": "./dist/display/index.js"
+    },
+    "./playground": {
+      "types": "./dist/playground/index.d.ts",
+      "svelte": "./dist/playground/index.js",
+      "default": "./dist/playground/index.js"
+    },
+    "./settings": {
+      "types": "./dist/settings/index.d.ts",
+      "svelte": "./dist/settings/index.js",
+      "default": "./dist/settings/index.js"
+    },
+    "./styles": "./dist/styles/base.css",
+    "./styles/*": "./dist/styles/*",
+    "./schema": {
+      "default": "./dist/schemas/v1/workflow.schema.json"
+    },
+    "./schema/v1": {
+      "default": "./dist/schemas/v1/workflow.schema.json"
+    }
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/lint": "^6.9.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.14",
+    "@iconify/svelte": "^5.0.0",
+    "@xyflow/svelte": "^1.2",
+    "codemirror": "^6.0.2",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/autocomplete": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/lint": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@iconify/svelte": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flowdrop-io/flowdrop.git"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@xyflow/svelte": "^1.2",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/lint": "^6.9.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.14",
+    "codemirror": "^6.0.2",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@iconify/svelte": "^5.0.0",
+    "@playwright/test": "^1.49.1",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-svelte-csf": "^5.0.11",
+    "@storybook/addon-themes": "^10.2.15",
+    "@storybook/addon-vitest": "^10.2.15",
+    "@storybook/sveltekit": "^10.2.15",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-node": "^5.4.0",
+    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/dompurify": "^3.2.0",
+    "@types/marked": "^6.0.0",
+    "@types/node": "^20",
+    "@types/uuid": "^10.0.0",
+    "@vitest/browser": "^3.2.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-storybook": "^10.2.15",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "happy-dom": "^20.0.11",
+    "msw": "^2.12.7",
+    "npm-watch": "^0.13.0",
+    "picomatch": "^4.0.3",
+    "playwright": "^1.53.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "storybook": "^10.2.15",
+    "storybook-addon-tag-badges": "^3.0.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "terser": "^5.43.1",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6",
+    "vite-plugin-devtools-json": "^0.2.1",
+    "vitest": "^3.2.3",
+    "vitest-browser-svelte": "^0.1.0",
+    "yaml": "^2.8.2"
+  },
+  "overrides": {
+    "@sveltejs/kit": {
+      "cookie": "0.7.2"
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "workflow",
+    "workflow-editor",
+    "editor",
+    "node-editor",
+    "graph-editor",
+    "visual-programming",
+    "xyflow",
+    "flowchart",
+    "dag",
+    "agent",
+    "ai-workflow",
+    "embeddable"
+  ],
+  "dependencies": {
+    "diff": "^8.0.3",
+    "dompurify": "^3.3.1",
+    "marked": "^16.1.1",
+    "svelte-5-french-toast": "^2.0.6",
+    "uuid": "^11.1.0"
+  },
+  "msw": {
+    "workerDirectory": [
+      "static"
+    ]
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm run prepack",
+    "build:drupal": "vite build --config vite.config.drupal.ts",
+    "build:production": "vite build --config vite.config.production.ts",
+    "watch:build:drupal": "npm-watch build:drupal",
+    "watch:build:production": "npm-watch build:production",
+    "watch:build": "npm-watch build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint . && prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:all": "pnpm run test && pnpm run test:e2e",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "schema:generate": "node scripts/generate-schema.mjs",
+    "schema:check": "node scripts/generate-schema.mjs --check",
+    "api:lint": "pnpm --dir ../../apps/api-docs run lint",
+    "api:bundle": "pnpm --dir ../../apps/api-docs run bundle"
+  }
+}