@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/FlowDropZone.svelte

@@ -5,79 +5,82 @@
 -->
 
 <script lang="ts">
-	import { useSvelteFlow } from '@xyflow/svelte';
-	import type { Snippet } from 'svelte';
+  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;
-	}
+  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();
+  let props: Props = $props();
 
-	// Access SvelteFlow instance for coordinate transformation
-	const { screenToFlowPosition } = useSvelteFlow();
+  // 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 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();
+  /**
+   * 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;
-		}
+    // 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
-			});
+    // 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);
-		}
-	}
+      // 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}
+  class="flow-drop-zone"
+  role="application"
+  aria-label="Workflow canvas"
+  ondragover={handleDragOver}
+  ondrop={handleDrop}
 >
-	{@render props.children()}
+  {@render props.children()}
 </div>
 
 <style>
-	.flow-drop-zone {
-		width: 100%;
-		height: 100%;
-	}
+  .flow-drop-zone {
+    width: 100%;
+    height: 100%;
+  }
 </style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 interface Props {
     ondrop: (nodeTypeData: string, position: {
         x: number;

package/dist/components/LoadingSpinner.stories.svelte

@@ -1,30 +1,30 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import LoadingSpinner from './LoadingSpinner.svelte';
+  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' }
-		}
-	});
+  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="Extra Small" args={{ size: "xs" }} />
 
-<Story name="Small" args={{ size: 'sm' }} />
+<Story name="Small" args={{ size: "sm" }} />
 
-<Story name="Large" args={{ size: 'lg' }} />
+<Story name="Large" args={{ size: "lg" }} />
 
-<Story name="Custom Text" args={{ text: 'Processing...' }} />
+<Story name="Custom Text" args={{ text: "Processing..." }} />
 
 <Story name="No Text" args={{ showText: false }} />

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

@@ -11,7 +11,7 @@ declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import LoadingSpinner from './LoadingSpinner.svelte';
+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;

package/dist/components/LoadingSpinner.svelte

@@ -4,33 +4,33 @@
 -->
 
 <script lang="ts">
-	interface Props {
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		text?: string;
-		showText?: boolean;
-	}
+  interface Props {
+    size?: "xs" | "sm" | "md" | "lg";
+    text?: string;
+    showText?: boolean;
+  }
 
-	let props: Props = $props();
+  let props: Props = $props();
 
-	// Default values
-	let size = $derived(props.size || 'md');
-	let text = $derived(props.text || 'Loading...');
-	let showText = $derived(props.showText !== false);
+  // 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 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;
-	}
+  .flowdrop-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
 </style>

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

@@ -1,5 +1,5 @@
 interface Props {
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: "xs" | "sm" | "md" | "lg";
     text?: string;
     showText?: boolean;
 }

package/dist/components/Logo.stories.svelte

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

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

@@ -11,7 +11,7 @@ declare const Logo: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Logo from './Logo.svelte';
+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;

package/dist/components/Logo.svelte

@@ -1,102 +1,108 @@
 <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>
+  <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;
-	}
+  .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;
-	}
+  :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%;
-	}
+  .flowdrop-logo :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>