@flowdrop/flowdrop 1.0.1 → 1.1.0

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

@@ -1,4 +1,4 @@
-import type { SettingsCategory } from '../types/settings.js';
+import type { SettingsCategory } from "../types/settings.js";
 /**
  * Props interface for SettingsPanel component
  */

package/dist/components/StatusIcon.stories.svelte

@@ -1,60 +1,73 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import StatusIcon from './StatusIcon.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import StatusIcon from "./StatusIcon.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/StatusIcon',
-		component: StatusIcon,
-		tags: ['autodocs'],
-		argTypes: {
-			status: {
-				control: { type: 'select' },
-				options: ['idle', 'pending', 'running', 'completed', 'failed', 'cancelled', 'skipped']
-			},
-			size: {
-				control: { type: 'select' },
-				options: ['sm', 'md', 'lg', 'xl']
-			},
-			showBackground: { control: 'boolean' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Display/StatusIcon",
+    component: StatusIcon,
+    tags: ["autodocs"],
+    argTypes: {
+      status: {
+        control: { type: "select" },
+        options: [
+          "idle",
+          "pending",
+          "running",
+          "completed",
+          "failed",
+          "cancelled",
+          "skipped",
+        ],
+      },
+      size: {
+        control: { type: "select" },
+        options: ["sm", "md", "lg", "xl"],
+      },
+      showBackground: { control: "boolean" },
+    },
+  });
 </script>
 
-<Story name="Idle" args={{ status: 'idle' }} />
+<Story name="Idle" args={{ status: "idle" }} />
 
-<Story name="Running" args={{ status: 'running' }} />
+<Story name="Running" args={{ status: "running" }} />
 
-<Story name="Completed" args={{ status: 'completed' }} />
+<Story name="Completed" args={{ status: "completed" }} />
 
-<Story name="Failed" args={{ status: 'failed' }} />
+<Story name="Failed" args={{ status: "failed" }} />
 
-<Story name="With Background" args={{ status: 'completed', showBackground: true }} />
+<Story
+  name="With Background"
+  args={{ status: "completed", showBackground: true }}
+/>
 
 <Story name="All Statuses">
-	<div style="display: flex; flex-direction: column; gap: 1.5rem;">
-		<div>
-			<div style="margin-bottom: 0.5rem; font-weight: 600;">Icon Only</div>
-			<div style="display: flex; gap: 1rem; align-items: center;">
-				<StatusIcon status="idle" />
-				<StatusIcon status="pending" />
-				<StatusIcon status="running" />
-				<StatusIcon status="completed" />
-				<StatusIcon status="failed" />
-				<StatusIcon status="cancelled" />
-				<StatusIcon status="skipped" />
-			</div>
-		</div>
-		<div>
-			<div style="margin-bottom: 0.5rem; font-weight: 600;">With Background</div>
-			<div style="display: flex; gap: 1rem; align-items: center;">
-				<StatusIcon status="idle" showBackground />
-				<StatusIcon status="pending" showBackground />
-				<StatusIcon status="running" showBackground />
-				<StatusIcon status="completed" showBackground />
-				<StatusIcon status="failed" showBackground />
-				<StatusIcon status="cancelled" showBackground />
-				<StatusIcon status="skipped" showBackground />
-			</div>
-		</div>
-	</div>
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <div>
+      <div style="margin-bottom: 0.5rem; font-weight: 600;">Icon Only</div>
+      <div style="display: flex; gap: 1rem; align-items: center;">
+        <StatusIcon status="idle" />
+        <StatusIcon status="pending" />
+        <StatusIcon status="running" />
+        <StatusIcon status="completed" />
+        <StatusIcon status="failed" />
+        <StatusIcon status="cancelled" />
+        <StatusIcon status="skipped" />
+      </div>
+    </div>
+    <div>
+      <div style="margin-bottom: 0.5rem; font-weight: 600;">
+        With Background
+      </div>
+      <div style="display: flex; gap: 1rem; align-items: center;">
+        <StatusIcon status="idle" showBackground />
+        <StatusIcon status="pending" showBackground />
+        <StatusIcon status="running" showBackground />
+        <StatusIcon status="completed" showBackground />
+        <StatusIcon status="failed" showBackground />
+        <StatusIcon status="cancelled" showBackground />
+        <StatusIcon status="skipped" showBackground />
+      </div>
+    </div>
+  </div>
 </Story>

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

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

@@ -5,115 +5,115 @@
 -->
 
 <script lang="ts">
-	import type { NodeExecutionStatus } from '../types/index.js';
-	import Icon from '@iconify/svelte';
-	import { getStatusColor, getStatusIcon } from '../utils/nodeStatus.js';
+  import type { NodeExecutionStatus } from "../types/index.js";
+  import Icon from "@iconify/svelte";
+  import { getStatusColor, getStatusIcon } from "../utils/nodeStatus.js";
 
-	interface Props {
-		status: NodeExecutionStatus;
-		size?: 'sm' | 'md' | 'lg' | 'xl';
-		showBackground?: boolean;
-		class?: string;
-	}
+  interface Props {
+    status: NodeExecutionStatus;
+    size?: "sm" | "md" | "lg" | "xl";
+    showBackground?: boolean;
+    class?: string;
+  }
 
-	let props: Props = $props();
+  let props: Props = $props();
 
-	// Size configurations
-	const sizeConfig = {
-		sm: {
-			iconSize: '12px',
-			backgroundSize: '20px',
-			backgroundRadius: '0.25rem'
-		},
-		md: {
-			iconSize: '16px',
-			backgroundSize: '24px',
-			backgroundRadius: '0.375rem'
-		},
-		lg: {
-			iconSize: '24px',
-			backgroundSize: '48px',
-			backgroundRadius: '0.5rem'
-		},
-		xl: {
-			iconSize: '28px',
-			backgroundSize: '56px',
-			backgroundRadius: '0.75rem'
-		}
-	};
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      iconSize: "12px",
+      backgroundSize: "20px",
+      backgroundRadius: "0.25rem",
+    },
+    md: {
+      iconSize: "16px",
+      backgroundSize: "24px",
+      backgroundRadius: "0.375rem",
+    },
+    lg: {
+      iconSize: "24px",
+      backgroundSize: "48px",
+      backgroundRadius: "0.5rem",
+    },
+    xl: {
+      iconSize: "28px",
+      backgroundSize: "56px",
+      backgroundRadius: "0.75rem",
+    },
+  };
 
-	const config = $derived(sizeConfig[props.size || 'md']);
-	const statusColor = $derived(getStatusColor(props.status));
-	const statusIcon = $derived(getStatusIcon(props.status));
+  const config = $derived(sizeConfig[props.size || "md"]);
+  const statusColor = $derived(getStatusColor(props.status));
+  const statusIcon = $derived(getStatusIcon(props.status));
 </script>
 
 {#if props.showBackground}
-	<div
-		class="status-icon status-icon--with-background {props.class || ''}"
-		style="
+  <div
+    class="status-icon status-icon--with-background {props.class || ''}"
+    style="
 			--icon-size: {config.iconSize};
 			--background-size: {config.backgroundSize};
 			--background-radius: {config.backgroundRadius};
 			--status-color: {statusColor};
 		"
-		title={props.status}
-	>
-		<Icon icon={statusIcon} class="status-icon__icon" />
-	</div>
+    title={props.status}
+  >
+    <Icon icon={statusIcon} class="status-icon__icon" />
+  </div>
 {:else}
-	<Icon
-		icon={statusIcon}
-		class="status-icon status-icon--icon-only {props.class || ''}"
-		style="
+  <Icon
+    icon={statusIcon}
+    class="status-icon status-icon--icon-only {props.class || ''}"
+    style="
 			--icon-size: {config.iconSize};
 			--status-color: {statusColor};
 		"
-	/>
+  />
 {/if}
 
 <style>
-	.status-icon {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--status-color);
-		transition: all 0.2s ease-in-out;
-	}
+  .status-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--status-color);
+    transition: all 0.2s ease-in-out;
+  }
 
-	.status-icon--with-background {
-		width: var(--background-size);
-		height: var(--background-size);
-		background-color: var(--status-color);
-		color: #fff;
-		border-radius: var(--background-radius);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		position: relative;
-	}
+  .status-icon--with-background {
+    width: var(--background-size);
+    height: var(--background-size);
+    background-color: var(--status-color);
+    color: #fff;
+    border-radius: var(--background-radius);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: relative;
+  }
 
-	.status-icon--with-background :global(.status-icon__icon) {
-		width: var(--icon-size);
-		height: var(--icon-size);
-		font-size: var(--icon-size);
-	}
+  .status-icon--with-background :global(.status-icon__icon) {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    font-size: var(--icon-size);
+  }
 
-	.status-icon--icon-only {
-		width: var(--icon-size);
-		height: var(--icon-size);
-		font-size: var(--icon-size);
-	}
+  .status-icon--icon-only {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    font-size: var(--icon-size);
+  }
 
-	/* Animation for running status */
-	.status-icon--with-background[title='running'] {
-		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	}
+  /* Animation for running status */
+  .status-icon--with-background[title="running"] {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
 
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.7;
-		}
-	}
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.7;
+    }
+  }
 </style>

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

@@ -1,7 +1,7 @@
-import type { NodeExecutionStatus } from '../types/index.js';
+import type { NodeExecutionStatus } from "../types/index.js";
 interface Props {
     status: NodeExecutionStatus;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: "sm" | "md" | "lg" | "xl";
     showBackground?: boolean;
     class?: string;
 }

package/dist/components/StatusLabel.stories.svelte

@@ -1,17 +1,17 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import StatusLabel from './StatusLabel.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import StatusLabel from "./StatusLabel.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/StatusLabel',
-		component: StatusLabel,
-		tags: ['autodocs'],
-		argTypes: {
-			label: { control: 'text' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Display/StatusLabel",
+    component: StatusLabel,
+    tags: ["autodocs"],
+    argTypes: {
+      label: { control: "text" },
+    },
+  });
 </script>
 
-<Story name="Default" args={{ label: 'Ready' }} />
+<Story name="Default" args={{ label: "Ready" }} />
 
-<Story name="Long Text" args={{ label: 'Processing workflow execution...' }} />
+<Story name="Long Text" args={{ label: "Processing workflow execution..." }} />

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

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

@@ -4,30 +4,30 @@
 -->
 
 <script lang="ts">
-	interface Props {
-		label: string;
-		class?: string;
-	}
+  interface Props {
+    label: string;
+    class?: string;
+  }
 
-	let props: Props = $props();
+  let props: Props = $props();
 </script>
 
 <span class="status-label {props.class || ''}">
-	{props.label}
+  {props.label}
 </span>
 
 <style>
-	.status-label {
-		font-size: 16px;
-		font-weight: 600;
-		color: #000000;
-		white-space: nowrap;
-		line-height: 1.2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
-		letter-spacing: 0.025em;
-		display: flex;
-		align-items: center;
-	}
+  .status-label {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000000;
+    white-space: nowrap;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
+    letter-spacing: 0.025em;
+    display: flex;
+    align-items: center;
+  }
 </style>

package/dist/components/ThemeToggle.stories.svelte

@@ -1,25 +1,25 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ThemeToggle from './ThemeToggle.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ThemeToggle from "./ThemeToggle.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Display/ThemeToggle',
-		component: ThemeToggle,
-		tags: ['autodocs'],
-		argTypes: {
-			size: {
-				control: { type: 'select' },
-				options: ['sm', 'md', 'lg']
-			},
-			showLabel: { control: 'boolean' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Display/ThemeToggle",
+    component: ThemeToggle,
+    tags: ["autodocs"],
+    argTypes: {
+      size: {
+        control: { type: "select" },
+        options: ["sm", "md", "lg"],
+      },
+      showLabel: { control: "boolean" },
+    },
+  });
 </script>
 
 <Story name="Default" />
 
-<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="With Label" args={{ showLabel: true }} />

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

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