@flowdrop/flowdrop 1.0.0

package/dist/stories/NodeDecorator.svelte

@@ -0,0 +1,73 @@
+<!--
+  NodeDecorator: Renders node components as real SvelteFlow nodes
+  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';
+
+	let { data, selected = false }: { data: Record<string, unknown>; selected?: boolean } = $props();
+
+	// Ensure built-in node components are registered
+	registerBuiltinNodes();
+
+	const nodeTypes = {
+		universalNode: UniversalNode
+	};
+
+	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'
+	);
+
+	$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>
+</div>
+
+<style>
+	.node-decorator-wrapper {
+		width: 800px;
+		height: 400px;
+		position: relative;
+	}
+
+	/* 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);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import '@xyflow/svelte/dist/style.css';
+type $$ComponentProps = {
+    data: Record<string, unknown>;
+    selected?: boolean;
+};
+declare const NodeDecorator: import("svelte").Component<$$ComponentProps, {}, "">;
+type NodeDecorator = ReturnType<typeof NodeDecorator>;
+export default NodeDecorator;

package/dist/stories/utils.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Shared story utilities
+ * Reusable mock data factories for Storybook stories
+ */
+import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from '../types/interrupt.js';
+export declare function createSampleNodeData(overrides?: Record<string, unknown>): {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+        }[];
+    };
+};
+export declare function createTerminalNodeData(variant?: 'start' | 'end' | 'exit'): {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: never[];
+        outputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+        }[];
+    };
+} | {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: never[];
+    };
+} | {
+    label: string;
+    config: {};
+    metadata: {
+        id: string;
+        name: string;
+        description: string;
+        category: string;
+        version: string;
+        type: string;
+        subType: string;
+        inputs: {
+            id: string;
+            name: string;
+            type: string;
+            dataType: string;
+            required: boolean;
+        }[];
+        outputs: never[];
+    };
+};
+export declare function createConfirmationConfig(overrides?: Partial<ConfirmationConfig>): ConfirmationConfig;
+export declare function createChoiceConfig(overrides?: Partial<ChoiceConfig>): ChoiceConfig;
+export declare function createTextConfig(overrides?: Partial<TextConfig>): TextConfig;
+export declare function createReviewConfig(overrides?: Partial<ReviewConfig>): ReviewConfig;
+export declare function createReviewChange(overrides?: Partial<ReviewChange>): ReviewChange;

package/dist/stories/utils.js

@@ -0,0 +1,122 @@
+/**
+ * Shared story utilities
+ * Reusable mock data factories for Storybook stories
+ */
+export function createSampleNodeData(overrides) {
+    return {
+        label: 'Sample Node',
+        config: {},
+        metadata: {
+            id: 'sample-node',
+            name: 'Sample Node',
+            description: 'A sample node for stories',
+            category: 'processing',
+            version: '1.0.0',
+            type: 'default',
+            inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
+            outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
+        },
+        ...overrides
+    };
+}
+export function createTerminalNodeData(variant = 'start') {
+    const configs = {
+        start: {
+            label: 'Start',
+            config: {},
+            metadata: {
+                id: 'start',
+                name: 'Start',
+                description: 'Workflow start point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
+                inputs: [],
+                outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
+            }
+        },
+        end: {
+            label: 'End',
+            config: {},
+            metadata: {
+                id: 'end',
+                name: 'End',
+                description: 'Workflow end point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
+                inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
+                outputs: []
+            }
+        },
+        exit: {
+            label: 'Exit',
+            config: {},
+            metadata: {
+                id: 'exit',
+                name: 'Exit',
+                description: 'Early exit point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
+                subType: 'exit',
+                inputs: [{ id: 'input', name: 'Input', type: 'input', dataType: 'any', required: false }],
+                outputs: []
+            }
+        }
+    };
+    return configs[variant];
+}
+export function createConfirmationConfig(overrides) {
+    return {
+        message: 'Are you sure you want to proceed with this action?',
+        confirmLabel: 'Yes, proceed',
+        cancelLabel: 'Cancel',
+        ...overrides
+    };
+}
+export function createChoiceConfig(overrides) {
+    return {
+        message: 'Select a priority level for this task:',
+        options: [
+            { value: 'low', label: 'Low', description: 'Non-urgent task' },
+            { value: 'medium', label: 'Medium', description: 'Normal priority' },
+            { value: 'high', label: 'High', description: 'Urgent task' }
+        ],
+        multiple: false,
+        ...overrides
+    };
+}
+export function createTextConfig(overrides) {
+    return {
+        message: 'Please provide additional details:',
+        placeholder: 'Enter your response here...',
+        multiline: false,
+        ...overrides
+    };
+}
+export function createReviewConfig(overrides) {
+    return {
+        message: 'Review the following changes before submitting:',
+        changes: [
+            { field: 'title', label: 'Title', original: 'Old Title', proposed: 'New Title' },
+            {
+                field: 'description',
+                label: 'Description',
+                original: 'Old description text',
+                proposed: 'Updated description text'
+            },
+            { field: 'status', label: 'Status', original: 'draft', proposed: 'published' }
+        ],
+        ...overrides
+    };
+}
+export function createReviewChange(overrides) {
+    return {
+        field: 'title',
+        label: 'Title',
+        original: 'Original value',
+        proposed: 'Proposed value',
+        ...overrides
+    };
+}