@d34dman/flowdrop 0.0.61 → 0.0.62

package/dist/components/interrupt/ReviewPrompt.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ReviewConfig, ReviewResolution } from '../../types/interrupt.js';
+/**
+ * Component props
+ */
+interface Props {
+    /** Review configuration from the interrupt */
+    config: ReviewConfig;
+    /** Whether this interrupt has been resolved */
+    isResolved: boolean;
+    /** The resolved value if resolved */
+    resolvedValue?: ReviewResolution;
+    /** Whether the form is currently submitting */
+    isSubmitting: boolean;
+    /** Error message if submission failed */
+    error?: string;
+    /** Username of the person who resolved the interrupt */
+    resolvedByUserName?: string;
+    /** Callback when user submits review */
+    onSubmit: (value: ReviewResolution) => void;
+}
+declare const ReviewPrompt: import("svelte").Component<Props, {}, "">;
+type ReviewPrompt = ReturnType<typeof ReviewPrompt>;
+export default ReviewPrompt;

package/dist/components/interrupt/TextInputPrompt.stories.svelte

@@ -0,0 +1,34 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import TextInputPrompt from "./TextInputPrompt.svelte";
+	import { fn } from "storybook/test";
+	import { createTextConfig } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Interrupt/TextInputPrompt",
+		component: TextInputPrompt,
+		tags: ["autodocs"],
+		args: {
+			config: createTextConfig(),
+			isResolved: false,
+			isSubmitting: false,
+			onSubmit: fn(),
+		},
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Multiline" args={{
+	config: createTextConfig({ message: "Describe the issue in detail:", multiline: true, placeholder: "Type your description..." }),
+}} />
+
+<Story name="With Constraints" args={{
+	config: createTextConfig({ message: "Enter a short summary:", minLength: 10, maxLength: 100 }),
+}} />
+
+<Story name="Resolved" args={{
+	isResolved: true,
+	resolvedValue: "The workflow completed successfully with all checks passed.",
+	resolvedByUserName: "Charlie",
+}} />

package/dist/components/interrupt/TextInputPrompt.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default TextInputPrompt;
+type TextInputPrompt = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TextInputPrompt: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import TextInputPrompt from "./TextInputPrompt.svelte";
+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/interrupt/TextInputPrompt.svelte

@@ -188,7 +188,7 @@
 	.text-prompt {
 		display: flex;
 		flex-direction: column;
-		gap: 0.75rem;
+		gap: var(--fd-space-md);
 	}
 
 	.text-prompt--resolved {
@@ -201,20 +201,20 @@
 
 	.text-prompt__message {
 		margin: 0;
-		font-size: 0.9375rem;
-		line-height: 1.5;
+		font-size: var(--fd-interrupt-font-message);
+		line-height: var(--fd-interrupt-line-height);
 		color: var(--fd-foreground);
 	}
 
 	.text-prompt__error {
 		display: flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.5rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		background-color: var(--fd-error-muted);
 		border-radius: var(--fd-radius-md);
 		color: var(--fd-error);
-		font-size: 0.8125rem;
+		font-size: var(--fd-interrupt-font-error);
 	}
 
 	.text-prompt__input-wrapper {
@@ -225,10 +225,10 @@
 	.text-prompt__input,
 	.text-prompt__textarea {
 		width: 100%;
-		padding: 0.75rem 1rem;
-		font-size: 0.9375rem;
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		font-size: var(--fd-interrupt-font-message);
 		font-family: inherit;
-		line-height: 1.5;
+		line-height: var(--fd-interrupt-line-height);
 		color: var(--fd-foreground);
 		background-color: var(--fd-background);
 		border: 1px solid var(--fd-border-strong);
@@ -270,7 +270,7 @@
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 		text-align: right;
-		padding-right: 0.25rem;
+		padding-right: var(--fd-space-3xs);
 	}
 
 	.text-prompt__char-count--warning {
@@ -279,23 +279,23 @@
 
 	.text-prompt__actions {
 		display: flex;
-		gap: 0.75rem;
+		gap: var(--fd-space-md);
 	}
 
 	.text-prompt__submit {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
-		padding: 0.625rem 1.25rem;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
 		font-weight: 600;
 		font-family: inherit;
 		cursor: pointer;
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all var(--fd-transition-normal);
 		border: none;
-		min-height: 2.5rem;
+		min-height: var(--fd-interrupt-btn-min-height);
 		background: var(--fd-interrupt-btn-primary-bg);
 		color: var(--fd-primary-foreground);
 		box-shadow: 0 1px 3px var(--fd-interrupt-btn-primary-shadow);
@@ -315,8 +315,8 @@
 	}
 
 	.text-prompt__spinner {
-		width: 1rem;
-		height: 1rem;
+		width: var(--fd-interrupt-spinner-size);
+		height: var(--fd-interrupt-spinner-size);
 		border: 2px solid var(--fd-border);
 		border-top-color: currentColor;
 		border-radius: 50%;
@@ -333,12 +333,12 @@
 	.text-prompt__resolved-badge {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.75rem;
+		gap: var(--fd-space-2xs);
+		padding: var(--fd-space-2xs) var(--fd-space-md);
 		background-color: var(--fd-interrupt-badge-completed-bg);
-		border-radius: 9999px;
+		border-radius: var(--fd-radius-full);
 		color: var(--fd-interrupt-badge-completed-text);
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 		align-self: flex-start;
 	}

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

@@ -0,0 +1,76 @@
+<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/GatewayNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={createSampleNodeData({
+		label: "If/Else",
+		config: {
+			textInput: "",
+			matchText: "",
+			operator: "equals",
+			caseSensitive: false,
+			branches: [
+				{ name: "True", value: true },
+				{ name: "False", value: false },
+			],
+		},
+		metadata: {
+			id: "if_else",
+			name: "If/Else",
+			description: "Simple conditional logic with text input, match text, and operator",
+			category: "logic",
+			version: "1.0.0",
+			type: "gateway",
+			supportedTypes: ["gateway"],
+			icon: "mdi:code-braces",
+			color: "#8b5cf6",
+			inputs: [
+				{ id: "data", name: "Input Data", type: "input", dataType: "mixed", required: false, description: "Optional input data (if not using textInput config)" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [],
+		},
+	})} />
+</Story>
+
+<Story name="Multiple Branches">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Switch",
+		config: {
+			defaultBranch: "default",
+			caseSensitive: false,
+			branches: [
+				{ name: "case_1", label: "Case 1", value: "option1" },
+				{ name: "case_2", label: "Case 2", value: "option2" },
+				{ name: "default", label: "Default", value: "" },
+			],
+		},
+		metadata: {
+			id: "switch",
+			name: "Switch",
+			description: "Multi-branch routing based on configurable case values",
+			category: "logic",
+			version: "1.0.0",
+			type: "gateway",
+			supportedTypes: ["gateway"],
+			icon: "mdi:source-branch-sync",
+			color: "#8b5cf6",
+			inputs: [
+				{ id: "value", name: "Value", type: "input", dataType: "string", required: true, description: "The value to match against branch cases" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [],
+		},
+	})} />
+</Story>

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

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

@@ -18,7 +18,7 @@
 		getCategoryColorToken,
 		getPortBackgroundColor
 	} from '../../utils/colors.js';
-	import { connectedHandles } from '../../stores/workflowStore.js';
+	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
 	interface Props {
 		data: WorkflowNode['data'] & {
@@ -75,7 +75,7 @@
 
 		// Check if port is connected
 		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	/**
@@ -98,12 +98,14 @@
 
 		// Check if branch output is connected
 		const handleId = `${props.data.nodeId}-output-${branchName}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	// Gateway-specific data - branches are calculated at runtime from config
 	let branches = $derived((props.data.config?.branches as Branch[]) || []);
-	let activeBranches = $derived((props.data.executionInfo as any)?.output?.active_branches || []);
+	let activeBranches = $derived(
+		(props.data.executionInfo?.output?.active_branches as string[]) || []
+	);
 
 	/**
 	 * Derived list of visible branches based on hideUnconnectedHandles setting
@@ -200,7 +202,7 @@
 							position={Position.Left}
 							id={`${props.data.nodeId}-input-${port.id}`}
 							class="flowdrop-workflow-node__handle"
-							style="top: 50%; transform: translateY(-50%); left: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {getDataTypeColorToken(
+							style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
 								port.dataType
 							)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
@@ -286,7 +288,7 @@
 							position={Position.Right}
 							id={`${props.data.nodeId}-output-${branch.name}`}
 							class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
-							style="top: 50%; transform: translateY(-50%); right: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {isActive
+							style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {isActive
 								? getDataTypeColorToken('trigger')
 								: getDataTypeColorToken(
 										'trigger'
@@ -363,7 +365,7 @@
 
 	.flowdrop-workflow-node__header {
 		box-sizing: border-box;
-		padding: var(--fd-node-header-gap) var(--fd-space-4);
+		padding: var(--fd-node-header-gap) var(--fd-space-xl);
 		border-bottom: 1px solid var(--fd-border-muted);
 		background: var(--fd-header);
 		border-top-left-radius: var(--fd-radius-xl);
@@ -380,7 +382,7 @@
 	.flowdrop-workflow-node__header-title {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 		min-height: var(--fd-node-header-title-height);
 		flex-shrink: 0;
 	}
@@ -449,16 +451,16 @@
 		align-items: center;
 		gap: 0;
 		min-height: var(--fd-node-port-row-height);
-		padding: var(--fd-space-1) 0;
+		padding: var(--fd-space-3xs) 0;
 		position: relative;
 	}
 
 	.flowdrop-workflow-node__port-content {
-		padding: 0 var(--fd-space-4);
+		padding: 0 var(--fd-space-xl);
 	}
 
 	.flowdrop-badge {
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 		border-radius: var(--fd-radius-sm);
 		font-size: 0.625rem;
 		font-weight: 500;
@@ -473,14 +475,14 @@
 
 	.flowdrop-badge--sm {
 		font-size: 0.625rem;
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 	}
 
 	.workflow-node__no-branches {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md);
 		background: var(--fd-warning-muted);
 		border: 1px solid var(--fd-warning);
 		border-radius: var(--fd-radius-lg);
@@ -508,7 +510,7 @@
 	}
 
 	.flowdrop-gap--2 {
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 	}
 
 	.flowdrop-items--center {
@@ -558,8 +560,8 @@
 
 	.flowdrop-workflow-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);

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

@@ -0,0 +1,48 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+
+	const { Story } = defineMeta({
+		title: "Nodes/IdeaNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={{
+		label: "Idea",
+		config: {},
+		metadata: {
+			id: "idea",
+			name: "Idea",
+			description: "Planning node",
+			category: "helpers",
+			version: "1.0.0",
+			type: "idea",
+			inputs: [],
+			outputs: [],
+		},
+	}} />
+</Story>
+
+<Story name="With Content">
+	<NodeDecorator data={{
+		label: "Feature Idea",
+		config: {
+			content: "Add batch processing support to handle multiple items in parallel.",
+		},
+		metadata: {
+			id: "idea",
+			name: "Idea",
+			description: "Planning node",
+			category: "helpers",
+			version: "1.0.0",
+			type: "idea",
+			inputs: [],
+			outputs: [],
+		},
+	}} />
+</Story>

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

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

@@ -151,7 +151,7 @@
 			position={Position.Left}
 			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
 			id={`${props.data.nodeId}-input-left`}
 		/>
 	{/if}
@@ -163,7 +163,7 @@
 			position={Position.Top}
 			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); margin-top: -10px; z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
 			id={`${props.data.nodeId}-input-top`}
 		/>
 	{/if}
@@ -215,7 +215,7 @@
 			position={Position.Right}
 			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
 			id={`${props.data.nodeId}-output-right`}
 		/>
 	{/if}
@@ -227,7 +227,7 @@
 			position={Position.Bottom}
 			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); margin-bottom: -10px; z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
 			id={`${props.data.nodeId}-output-bottom`}
 		/>
 	{/if}
@@ -286,7 +286,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.625rem;
-		padding: var(--fd-space-3) var(--fd-space-4) var(--fd-space-2);
+		padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xs);
 	}
 
 	.flowdrop-idea-node__icon-wrapper {
@@ -323,7 +323,7 @@
 
 	/* Body section */
 	.flowdrop-idea-node__body {
-		padding: 0 var(--fd-space-4) var(--fd-space-3);
+		padding: 0 var(--fd-space-xl) var(--fd-space-md);
 	}
 
 	.flowdrop-idea-node__description {
@@ -342,8 +342,8 @@
 	.flowdrop-idea-node__processing {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-xl);
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 		border-top: 1px solid var(--fd-border-muted);
@@ -362,8 +362,8 @@
 	.flowdrop-idea-node__error {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-xl);
 		font-size: var(--fd-text-xs);
 		color: var(--fd-error);
 		border-top: 1px solid color-mix(in srgb, var(--fd-error) 30%, transparent);
@@ -420,22 +420,6 @@
 		pointer-events: auto !important;
 	}
 
-	:global(.flowdrop-idea-node .svelte-flow__handle-left) {
-		left: -10px !important;
-	}
-
-	:global(.flowdrop-idea-node .svelte-flow__handle-right) {
-		right: -10px !important;
-	}
-
-	:global(.flowdrop-idea-node .svelte-flow__handle-top) {
-		top: -10px !important;
-	}
-
-	:global(.flowdrop-idea-node .svelte-flow__handle-bottom) {
-		bottom: -10px !important;
-	}
-
 	:global(.flowdrop-idea-node .svelte-flow__handle-left:hover),
 	:global(.flowdrop-idea-node .svelte-flow__handle-right:hover) {
 		transform: translateY(-50%) scale(1.2) !important;

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

@@ -0,0 +1,69 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+
+	const { Story } = defineMeta({
+		title: "Nodes/NotesNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={{
+		label: "Notes",
+		config: {},
+		metadata: {
+			id: "notes",
+			name: "Notes",
+			description: "Documentation node",
+			category: "helpers",
+			version: "1.0.0",
+			type: "note",
+			inputs: [],
+			outputs: [],
+		},
+	}} />
+</Story>
+
+<Story name="With Content">
+	<NodeDecorator data={{
+		label: "Notes",
+		config: {
+			content: "## Important\n\nThis workflow handles **user onboarding**.\n\n- Step 1: Validate email\n- Step 2: Create account\n- Step 3: Send welcome email",
+			noteType: "info",
+		},
+		metadata: {
+			id: "notes",
+			name: "Notes",
+			description: "Documentation node",
+			category: "helpers",
+			version: "1.0.0",
+			type: "note",
+			inputs: [],
+			outputs: [],
+		},
+	}} />
+</Story>
+
+<Story name="Warning">
+	<NodeDecorator data={{
+		label: "Warning",
+		config: {
+			content: "Rate limiting is applied to this API call. Max 100 requests/minute.",
+			noteType: "warning",
+		},
+		metadata: {
+			id: "notes",
+			name: "Notes",
+			description: "Documentation node",
+			category: "helpers",
+			version: "1.0.0",
+			type: "note",
+			inputs: [],
+			outputs: [],
+		},
+	}} />
+</Story>