@flowdrop/flowdrop 1.0.0

package/dist/components/FlowDropZone.svelte

@@ -0,0 +1,83 @@
+<!--
+  Flow Drop Zone Component
+  Handles drag and drop with proper coordinate transformation
+  Must be used inside SvelteFlowProvider
+-->
+
+<script lang="ts">
+	import { useSvelteFlow } from '@xyflow/svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+		/** Optional callback invoked when a JSON file is dropped onto the canvas. */
+		onfiledrop?: (file: File) => void;
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+
+	// Access SvelteFlow instance for coordinate transformation
+	const { screenToFlowPosition } = useSvelteFlow();
+
+	/**
+	 * Handle drag over event
+	 */
+	function handleDragOver(e: DragEvent): void {
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = 'copy';
+		}
+	}
+
+	/**
+	 * Handle drop event with proper coordinate transformation.
+	 *
+	 * If the drag event carries a JSON file (e.g. a workflow file dragged from the OS),
+	 * the `onfiledrop` callback is invoked with the file.
+	 * Otherwise the node-type drop path is used as before.
+	 */
+	function handleDrop(e: DragEvent): void {
+		e.preventDefault();
+
+		// Check if the drop contains files (e.g. a workflow JSON file from the OS)
+		const files = e.dataTransfer?.files;
+		if (files && files.length > 0) {
+			const file = files[0];
+			if (props.onfiledrop && (file.type === 'application/json' || file.name.endsWith('.json'))) {
+				props.onfiledrop(file);
+			}
+			return;
+		}
+
+		// Get the data from the drag event (node type dropped from sidebar)
+		const nodeTypeData = e.dataTransfer?.getData('application/json');
+		if (nodeTypeData) {
+			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
+			const position = screenToFlowPosition({
+				x: e.clientX,
+				y: e.clientY
+			});
+
+			// Call the parent handler with the converted position
+			props.ondrop(nodeTypeData, position);
+		}
+	}
+</script>
+
+<div
+	class="flow-drop-zone"
+	role="application"
+	aria-label="Workflow canvas"
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+>
+	{@render props.children()}
+</div>
+
+<style>
+	.flow-drop-zone {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    ondrop: (nodeTypeData: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Optional callback invoked when a JSON file is dropped onto the canvas. */
+    onfiledrop?: (file: File) => void;
+    children: Snippet;
+}
+declare const FlowDropZone: import("svelte").Component<Props, {}, "">;
+type FlowDropZone = ReturnType<typeof FlowDropZone>;
+export default FlowDropZone;

package/dist/components/LoadingSpinner.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import LoadingSpinner from './LoadingSpinner.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/LoadingSpinner',
+		component: LoadingSpinner,
+		tags: ['autodocs'],
+		argTypes: {
+			size: {
+				control: { type: 'select' },
+				options: ['xs', 'sm', 'md', 'lg']
+			},
+			text: { control: 'text' },
+			showText: { control: 'boolean' }
+		}
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Extra Small" args={{ size: 'xs' }} />
+
+<Story name="Small" args={{ size: 'sm' }} />
+
+<Story name="Large" args={{ size: 'lg' }} />
+
+<Story name="Custom Text" args={{ text: 'Processing...' }} />
+
+<Story name="No Text" args={{ showText: false }} />

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

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

@@ -0,0 +1,36 @@
+<!--
+  Loading Spinner Component
+  Reusable loading indicator with customizable size and text
+-->
+
+<script lang="ts">
+	interface Props {
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		text?: string;
+		showText?: boolean;
+	}
+
+	let props: Props = $props();
+
+	// Default values
+	let size = $derived(props.size || 'md');
+	let text = $derived(props.text || 'Loading...');
+	let showText = $derived(props.showText !== false);
+</script>
+
+<div class="flowdrop-loading">
+	<div class="flowdrop-spinner flowdrop-spinner--{size}"></div>
+	{#if showText}
+		<p class="flowdrop-text--xs flowdrop-text--gray">{text}</p>
+	{/if}
+</div>
+
+<style>
+	.flowdrop-loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    text?: string;
+    showText?: boolean;
+}
+declare const LoadingSpinner: import("svelte").Component<Props, {}, "">;
+type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
+export default LoadingSpinner;

package/dist/components/Logo.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logo from './Logo.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/Logo',
+		component: Logo,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default">
+	<div style="width: 64px; height: 64px;">
+		<Logo />
+	</div>
+</Story>
+
+<Story name="Large">
+	<div style="width: 128px; height: 128px;">
+		<Logo />
+	</div>
+</Story>

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

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

@@ -0,0 +1,102 @@
+<div class="flowdrop-logo">
+	<svg
+		viewBox="0 0 500 499.99999"
+		version="1.1"
+		id="svg47"
+		width="500"
+		height="500"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<defs id="defs2"></defs>
+		<g id="g6669-7-7-3-3" transform="translate(472.2413,571.30469)">
+			<rect
+				style="fill:var(--logo-bg);stroke:var(--logo-stroke);stroke-width:10px"
+				x="-462.2413"
+				y="-561.30469"
+				width="480"
+				height="480"
+				rx="20"
+				ry="20"
+				id="rect15-5-0-8-9-7"
+			/>
+			<g id="g6893-4-9-5-2" transform="matrix(1.2053353,0,0,1.2053353,-1246.7763,-599.46548)">
+				<path
+					style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:10;stroke-dasharray:none;stroke-opacity:1"
+					d="M 849.61489,153.69711 850,298.31429 Z"
+					id="path1152-1-7-1-4"
+				/>
+				<path
+					style="fill:var(--logo-line-fill);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none;stroke-opacity:1"
+					d="m 849.08332,152.77665 0.82965,145.18782"
+					id="path1160-08-5-7-1"
+				/>
+				<path
+					style="fill:none;stroke:var(--logo-stroke);stroke-width:7.49273;stroke-dasharray:none;stroke-opacity:1"
+					d="m 850,158.973 v 36.70355 8.15635 c 0,0 1.19184,39.5038 -36.01255,65.25076 -29.46481,20.39086 -52.3819,16.31269 -55.65576,65.25076 l -0.50928,5.11228"
+					id="path6610-14-5-4-8"
+				/>
+				<path
+					style="fill:none;stroke:var(--logo-stroke);stroke-width:7.5253;stroke-dasharray:none;stroke-opacity:1"
+					d="m 850,158.973 v 37.02335 8.22741 c 0,0 -1.19184,39.84799 36.01255,65.81929 29.46481,20.56853 52.3819,16.45482 55.65576,65.81929 l -0.49443,4.414"
+					id="path6610-14-7-2-5-2"
+				/>
+				<path
+					d="m 849.41763,64.456369 25.36824,31.087262 c 6.23336,6.364119 10.06921,15.063569 10.06921,24.656839 0,19.50109 -15.85132,35.30988 -35.42373,35.30988 -19.57241,0 -35.43242,-15.80879 -35.43242,-35.30988 0,-9.49405 3.75813,-18.11351 9.87536,-24.458879 z"
+					style="fill:var(--logo-drop);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none;paint-order:fill"
+					id="path21-6-4-4-1-6"
+				/>
+				<circle
+					style="fill:var(--logo-circle);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
+					cx="849.427"
+					cy="326.5929"
+					id="ellipse23-6-57-9-4-0"
+					r="30"
+				/>
+				<ellipse
+					style="fill:var(--logo-left);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
+					cx="759.99994"
+					cy="369.44669"
+					id="ellipse25-7-9-4-6-3"
+					rx="29.999952"
+					ry="30.000004"
+				/>
+				<ellipse
+					style="fill:var(--logo-right);stroke:var(--logo-stroke);stroke-width:8.29645;stroke-dasharray:none"
+					cx="939.99963"
+					cy="369.44669"
+					id="ellipse27-8-8-4-0-9"
+					rx="29.999952"
+					ry="30.000004"
+				/>
+			</g>
+		</g>
+		<g id="g6663-4" transform="matrix(0.87890795,0,0,0.87890795,3770.6486,2734.4692)" />
+	</svg>
+</div>
+
+<style>
+	.flowdrop-logo {
+		--logo-bg: #f9f9f9;
+		--logo-stroke: #000000;
+		--logo-line-fill: #000000;
+		--logo-drop: #009cde;
+		--logo-circle: #f46351;
+		--logo-left: #ccbaf4;
+		--logo-right: #ffc423;
+	}
+
+	:global([data-theme='dark']) .flowdrop-logo {
+		--logo-bg: none;
+		--logo-stroke: #ffffff;
+		--logo-line-fill: none;
+		--logo-drop: none;
+		--logo-circle: none;
+		--logo-left: none;
+		--logo-right: none;
+	}
+
+	.flowdrop-logo :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

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