@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/nodes/NotesNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default NotesNode;
+type NotesNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const NotesNode: $$__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/nodes/NotesNode.svelte

@@ -231,7 +231,7 @@
 
 	/* Display Mode Styles */
 	.flowdrop-notes-node__content {
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		height: 100%;
 		display: flex;
 		flex-direction: column;
@@ -248,7 +248,7 @@
 	.flowdrop-notes-node__header-left {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 	}
 
 	/* Squircle icon wrapper - Apple-style rounded square background */
@@ -286,7 +286,7 @@
 	}
 
 	.flowdrop-notes-node__body {
-		margin-bottom: var(--fd-space-2);
+		margin-bottom: var(--fd-space-xs);
 		flex: 1;
 		overflow-y: auto;
 		color: var(--fd-muted-foreground);
@@ -300,7 +300,7 @@
 	.flowdrop-notes-node__processing {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 	}
@@ -317,7 +317,7 @@
 	.flowdrop-notes-node__error-indicator {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		font-size: var(--fd-text-xs);
 		color: var(--fd-error);
 	}
@@ -335,8 +335,8 @@
 
 	.flowdrop-notes-node__config-btn {
 		position: absolute;
-		top: var(--fd-space-2);
-		right: var(--fd-space-2);
+		top: var(--fd-space-xs);
+		right: var(--fd-space-xs);
 		width: 1.5rem;
 		height: 1.5rem;
 		background-color: var(--fd-backdrop);
@@ -372,7 +372,7 @@
 		}
 
 		.flowdrop-notes-node__content {
-			padding: var(--fd-space-3);
+			padding: var(--fd-space-md);
 		}
 	}
 </style>

package/dist/components/nodes/SimpleNode.stories.svelte

@@ -0,0 +1,101 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+	import { createSampleNodeData } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Nodes/SimpleNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Text Input",
+		metadata: {
+			id: "text_input",
+			name: "Text Input",
+			description: "Simple text input for user data",
+			category: "inputs",
+			version: "1.0.0",
+			type: "simple",
+			supportedTypes: ["simple", "square", "default"],
+			icon: "mdi:text",
+			color: "#22c55e",
+			inputs: [],
+			outputs: [
+				{ id: "text", name: "text", type: "output", dataType: "string", required: false, description: "The input text value" },
+			],
+		},
+	})} />
+</Story>
+
+<Story name="With Icon">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Notification Template",
+		metadata: {
+			id: "notification_template",
+			name: "Notification Template",
+			description: "Create notification templates with API-driven variable suggestions",
+			category: "outputs",
+			version: "1.0.0",
+			type: "simple",
+			supportedTypes: ["simple", "default"],
+			icon: "mdi:bell-ring",
+			color: "#f59e0b",
+			inputs: [
+				{ id: "event", name: "Event Data", type: "input", dataType: "json", required: false, description: "Event that triggered notification" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "Execution trigger" },
+			],
+			outputs: [
+				{ id: "notification", name: "Notification", type: "output", dataType: "json", required: false, description: "Formatted notification object" },
+			],
+		},
+	})} />
+</Story>
+
+<Story name="Selected">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Text Input",
+		metadata: {
+			id: "text_input",
+			name: "Text Input",
+			description: "Simple text input for user data",
+			category: "inputs",
+			version: "1.0.0",
+			type: "simple",
+			supportedTypes: ["simple", "square", "default"],
+			icon: "mdi:text",
+			color: "#22c55e",
+			inputs: [],
+			outputs: [
+				{ id: "text", name: "text", type: "output", dataType: "string", required: false, description: "The input text value" },
+			],
+		},
+	})} selected={true} />
+</Story>
+
+<Story name="Multiple Ports">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Text Output",
+		metadata: {
+			id: "text_output",
+			name: "Text Output",
+			description: "Simple text output for displaying data",
+			category: "outputs",
+			version: "1.0.0",
+			type: "simple",
+			supportedTypes: ["square", "simple", "default"],
+			icon: "mdi:text-box",
+			color: "#ef4444",
+			inputs: [
+				{ id: "text", name: "Text Input", type: "input", dataType: "string", required: false, description: "The text to output" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [],
+		},
+	})} />
+</Story>

package/dist/components/nodes/SimpleNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SimpleNode;
+type SimpleNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SimpleNode: $$__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/nodes/SimpleNode.svelte

@@ -9,10 +9,10 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
+	import type { ConfigValues, NodeMetadata, NodeExtensions, NodePort } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor } from '../../utils/colors.js';
-	import { connectedHandles } from '../../stores/workflowStore.js';
+	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
 	const props = $props<{
 		data: {
@@ -107,7 +107,7 @@
 	 */
 	function isPortConnected(portId: string, type: 'input' | 'output'): boolean {
 		const handleId = `${props.data.nodeId}-${type}-${portId}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	/**
@@ -124,30 +124,30 @@
 	// Get first input/output ports for simple node representation
 	// Special handling for trigger ports - they should always be shown if present
 	let triggerInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType === 'trigger')
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType === 'trigger')
 	);
 	let triggerOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType === 'trigger')
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType === 'trigger')
 	);
 
 	// Get first non-trigger ports for data connections
 	let firstConnectedDataInputPort = $derived(
 		props.data.metadata?.inputs?.find(
-			(port) => port.dataType !== 'trigger' && isPortConnected(port.id, 'input')
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'input')
 		)
 	);
 
 	let firstDataInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType !== 'trigger')
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType !== 'trigger')
 	);
 
 	let firstConnectedDataOutputPort = $derived(
 		props.data.metadata?.outputs?.find(
-			(port) => port.dataType !== 'trigger' && isPortConnected(port.id, 'output')
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'output')
 		)
 	);
 	let firstDataOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType !== 'trigger')
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType !== 'trigger')
 	);
 
 	let inputPorts = $derived.by(() => {
@@ -187,7 +187,7 @@
 			? index === 0
 				? 20
 				: 60
-			: 40}px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
+			: 40}px; transform: translateY(-50%); z-index: 30;"
 		id={`${props.data.nodeId}-input-${port.id}`}
 	/>
 {/each}
@@ -258,7 +258,7 @@
 			? index === 0
 				? 20
 				: 60
-			: 40}px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
+			: 40}px; transform: translateY(-50%); z-index: 30;"
 		id={`${props.data.nodeId}-output-${port.id}`}
 	/>
 {/each}
@@ -319,7 +319,7 @@
 	}
 
 	.flowdrop-simple-node__header {
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 		background: var(--fd-header);
 		border-radius: var(--fd-radius-xl);
 	}
@@ -327,7 +327,7 @@
 	.flowdrop-simple-node__header-content {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 	}
 
 	/* Squircle icon wrapper - Apple-style rounded square background */
@@ -365,7 +365,7 @@
 	.flowdrop-simple-node__description {
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
-		margin: var(--fd-space-1) 0 0 0;
+		margin: var(--fd-space-3xs) 0 0 0;
 		line-height: 1.3;
 	}
 
@@ -404,8 +404,8 @@
 
 	.flowdrop-simple-node__config-btn {
 		position: absolute;
-		top: var(--fd-space-2);
-		right: var(--fd-space-2);
+		top: var(--fd-space-xs);
+		right: var(--fd-space-xs);
 		width: 1.5rem;
 		height: 1.5rem;
 		background-color: var(--fd-backdrop);
@@ -445,14 +445,6 @@
 		pointer-events: auto !important;
 	}
 
-	:global(.svelte-flow__node-simple .svelte-flow__handle-left) {
-		left: -10px !important;
-	}
-
-	:global(.svelte-flow__node-simple .svelte-flow__handle-right) {
-		right: -10px !important;
-	}
-
 	:global(.svelte-flow__node-simple .svelte-flow__handle:hover) {
 		transform: translateY(-50%) scale(1.2) !important;
 	}

package/dist/components/nodes/SquareNode.stories.svelte

@@ -0,0 +1,56 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+	import { createSampleNodeData } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Nodes/SquareNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Text Input",
+		metadata: {
+			id: "text_input",
+			name: "Text Input",
+			description: "Simple text input for user data",
+			category: "inputs",
+			version: "1.0.0",
+			type: "square",
+			supportedTypes: ["simple", "square", "default"],
+			icon: "mdi:text",
+			color: "#22c55e",
+			inputs: [],
+			outputs: [
+				{ id: "text", name: "text", type: "output", dataType: "string", required: false, description: "The input text value" },
+			],
+		},
+	})} />
+</Story>
+
+<Story name="Selected">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Text Output",
+		metadata: {
+			id: "text_output",
+			name: "Text Output",
+			description: "Simple text output for displaying data",
+			category: "outputs",
+			version: "1.0.0",
+			type: "square",
+			supportedTypes: ["square", "simple", "default"],
+			icon: "mdi:text-box",
+			color: "#ef4444",
+			inputs: [
+				{ id: "text", name: "Text Input", type: "input", dataType: "string", required: false, description: "The text to output" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [],
+		},
+	})} selected={true} />
+</Story>

package/dist/components/nodes/SquareNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SquareNode;
+type SquareNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SquareNode: $$__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/nodes/SquareNode.svelte

@@ -9,11 +9,11 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
+	import type { ConfigValues, NodeMetadata, NodeExtensions, NodePort } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
 	import { getNodeIcon } from '../../utils/icons.js';
-	import { connectedHandles } from '../../stores/workflowStore.js';
+	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
 	const props = $props<{
 		data: {
@@ -93,7 +93,7 @@
 	 */
 	function isPortConnected(portId: string, type: 'input' | 'output'): boolean {
 		const handleId = `${props.data.nodeId}-${type}-${portId}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	/**
@@ -110,30 +110,30 @@
 	// Get first input/output ports for square node representation
 	// Special handling for trigger ports - they should always be shown if present
 	let triggerInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType === 'trigger')
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType === 'trigger')
 	);
 	let triggerOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType === 'trigger')
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType === 'trigger')
 	);
 
 	// Get first non-trigger ports for data connections
 	let firstConnectedDataInputPort = $derived(
 		props.data.metadata?.inputs?.find(
-			(port) => port.dataType !== 'trigger' && isPortConnected(port.id, 'input')
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'input')
 		)
 	);
 
 	let firstDataInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType !== 'trigger')
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType !== 'trigger')
 	);
 
 	let firstConnectedDataOutputPort = $derived(
 		props.data.metadata?.outputs?.find(
-			(port) => port.dataType !== 'trigger' && isPortConnected(port.id, 'output')
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'output')
 		)
 	);
 	let firstDataOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType !== 'trigger')
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType !== 'trigger')
 	);
 
 	let inputPorts = $derived.by(() => {
@@ -173,7 +173,7 @@
 			? index === 0
 				? 20
 				: 60
-			: 40}px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
+			: 40}px; transform: translateY(-50%); z-index: 30;"
 		id={`${props.data.nodeId}-input-${port.id}`}
 	/>
 {/each}
@@ -232,7 +232,7 @@
 			? index === 0
 				? 20
 				: 60
-			: 40}px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
+			: 40}px; transform: translateY(-50%); z-index: 30;"
 		id={`${props.data.nodeId}-output-${port.id}`}
 	/>
 {/each}
@@ -360,8 +360,8 @@
 
 	.flowdrop-square-node__config-btn {
 		position: absolute;
-		top: var(--fd-space-2);
-		right: var(--fd-space-2);
+		top: var(--fd-space-xs);
+		right: var(--fd-space-xs);
 		width: 1.5rem;
 		height: 1.5rem;
 		background-color: var(--fd-backdrop);
@@ -401,14 +401,6 @@
 		pointer-events: auto !important;
 	}
 
-	:global(.svelte-flow__node-square .svelte-flow__handle-left) {
-		left: -10px !important;
-	}
-
-	:global(.svelte-flow__node-square .svelte-flow__handle-right) {
-		right: -10px !important;
-	}
-
 	:global(.svelte-flow__node-square .svelte-flow__handle:hover) {
 		transform: translateY(-50%) scale(1.2) !important;
 	}

package/dist/components/nodes/TerminalNode.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+	import { createTerminalNodeData } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Nodes/TerminalNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Start">
+	<NodeDecorator data={createTerminalNodeData("start")} />
+</Story>
+
+<Story name="End">
+	<NodeDecorator data={createTerminalNodeData("end")} />
+</Story>
+
+<Story name="Exit">
+	<NodeDecorator data={createTerminalNodeData("exit")} />
+</Story>

package/dist/components/nodes/TerminalNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default TerminalNode;
+type TerminalNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TerminalNode: $$__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/nodes/TerminalNode.svelte

@@ -15,7 +15,7 @@
 	import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
 	import { getNodeIcon } from '../../utils/icons.js';
 	import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
-	import { connectedHandles } from '../../stores/workflowStore.js';
+	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
 	/**
 	 * Terminal node variant types
@@ -156,7 +156,7 @@
 			return true;
 		}
 		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	/**
@@ -267,12 +267,12 @@
 	/**
 	 * Visible input ports filtered by hideUnconnectedHandles setting
 	 */
-	let visibleInputPorts = $derived(inputPorts.filter((port) => isPortVisible(port, 'input')));
+	let visibleInputPorts = $derived(inputPorts.filter((port: NodePort) => isPortVisible(port, 'input')));
 
 	/**
 	 * Visible output ports filtered by hideUnconnectedHandles setting
 	 */
-	let visibleOutputPorts = $derived(outputPorts.filter((port) => isPortVisible(port, 'output')));
+	let visibleOutputPorts = $derived(outputPorts.filter((port: NodePort) => isPortVisible(port, 'output')));
 
 	/**
 	 * Determine if we should show inputs based on visible ports
@@ -422,7 +422,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		cursor: pointer;
 		transition: all var(--fd-transition-normal);
 		z-index: 10;
@@ -558,7 +558,7 @@
 		align-items: center;
 		gap: 0.125rem;
 		background-color: var(--fd-backdrop);
-		padding: var(--fd-space-1) var(--fd-space-2);
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
 		border-radius: var(--fd-radius-sm);
 		box-shadow: var(--fd-shadow-sm);
 		max-width: 140px;