@flowdrop/flowdrop 1.5.0 → 1.6.0

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",
+    title: 'Display/LoadingSpinner',
     component: LoadingSpinner,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
       size: {
-        control: { type: "select" },
-        options: ["xs", "sm", "md", "lg"],
+        control: { type: 'select' },
+        options: ['xs', 'sm', 'md', 'lg']
       },
-      text: { control: "text" },
-      showText: { control: "boolean" },
-    },
+      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

@@ -5,7 +5,7 @@
 
 <script lang="ts">
   interface Props {
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     text?: string;
     showText?: boolean;
   }
@@ -13,8 +13,8 @@
   let props: Props = $props();
 
   // Default values
-  let size = $derived(props.size || "md");
-  let text = $derived(props.text || "Loading...");
+  let size = $derived(props.size || 'md');
+  let text = $derived(props.text || 'Loading...');
   let showText = $derived(props.showText !== false);
 </script>
 

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,11 +1,11 @@
 <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",
+    title: 'Display/Logo',
     component: Logo,
-    tags: ["autodocs"],
+    tags: ['autodocs']
   });
 </script>
 

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

@@ -19,10 +19,7 @@
         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)"
-      >
+      <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"
@@ -73,10 +70,7 @@
         />
       </g>
     </g>
-    <g
-      id="g6663-4"
-      transform="matrix(0.87890795,0,0,0.87890795,3770.6486,2734.4692)"
-    />
+    <g id="g6663-4" transform="matrix(0.87890795,0,0,0.87890795,3770.6486,2734.4692)" />
   </svg>
 </div>
 
@@ -91,7 +85,7 @@
     --logo-right: var(--fd-logo-right, #ffc423);
   }
 
-  :global([data-theme="dark"]) .flowdrop-logo {
+  :global([data-theme='dark']) .flowdrop-logo {
     --logo-bg: var(--fd-logo-bg, none);
     --logo-stroke: var(--fd-logo-stroke, #ffffff);
     --logo-line-fill: var(--fd-logo-line-fill, none);

package/dist/components/LogsSidebar.svelte

@@ -6,8 +6,8 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+  import Icon from '@iconify/svelte';
+  import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 
   interface LogEntry {
     timestamp: string;
@@ -37,10 +37,10 @@
       }, 100);
 
       // Prevent body scroll
-      document.body.style.overflow = "hidden";
+      document.body.style.overflow = 'hidden';
     } else {
       // Restore body scroll
-      document.body.style.overflow = "";
+      document.body.style.overflow = '';
     }
   });
 
@@ -55,7 +55,7 @@
    * Handle keyboard shortcuts
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       handleClose();
     }
   }
@@ -66,16 +66,16 @@
    */
   function getLogLevelColor(level: string): string {
     switch (level) {
-      case "error":
-        return "var(--fd-error)";
-      case "warning":
-        return "var(--fd-warning)";
-      case "success":
-        return "var(--fd-success)";
-      case "info":
-        return "var(--fd-info)";
+      case 'error':
+        return 'var(--fd-error)';
+      case 'warning':
+        return 'var(--fd-warning)';
+      case 'success':
+        return 'var(--fd-success)';
+      case 'info':
+        return 'var(--fd-info)';
       default:
-        return "var(--fd-muted-foreground)";
+        return 'var(--fd-muted-foreground)';
     }
   }
 
@@ -84,16 +84,16 @@
    */
   function getLogLevelIcon(level: string): string {
     switch (level) {
-      case "error":
-        return "mdi:alert-circle";
-      case "warning":
-        return "mdi:alert";
-      case "success":
-        return "mdi:check-circle";
-      case "info":
-        return "mdi:information";
+      case 'error':
+        return 'mdi:alert-circle';
+      case 'warning':
+        return 'mdi:alert';
+      case 'success':
+        return 'mdi:check-circle';
+      case 'info':
+        return 'mdi:information';
       default:
-        return "mdi:circle";
+        return 'mdi:circle';
     }
   }
 
@@ -102,12 +102,12 @@
    */
   function formatTimestamp(timestamp: string): string {
     const date = new Date(timestamp);
-    return date.toLocaleTimeString("en-US", {
+    return date.toLocaleTimeString('en-US', {
       hour12: false,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      fractionalSecondDigits: 3,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3
     });
   }
 
@@ -135,15 +135,15 @@
     const logText = filteredLogs
       .map(
         (log) =>
-          `[${formatTimestamp(log.timestamp)}] ${log.level.toUpperCase()}: ${log.message}${log.nodeId ? ` (Node: ${log.nodeId})` : ""}`,
+          `[${formatTimestamp(log.timestamp)}] ${log.level.toUpperCase()}: ${log.message}${log.nodeId ? ` (Node: ${log.nodeId})` : ''}`
       )
-      .join("\n");
+      .join('\n');
 
-    const blob = new Blob([logText], { type: "text/plain" });
+    const blob = new Blob([logText], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
+    const link = document.createElement('a');
     link.href = url;
-    link.download = `pipeline-logs-${new Date().toISOString().split("T")[0]}.txt`;
+    link.download = `pipeline-logs-${new Date().toISOString().split('T')[0]}.txt`;
     link.click();
     URL.revokeObjectURL(url);
   }
@@ -203,10 +203,10 @@
         {#each filteredLogs as log, index (index)}
           <div
             class="logs-sidebar__log-entry"
-            class:logs-sidebar__log-entry--error={log.level === "error"}
-            class:logs-sidebar__log-entry--warning={log.level === "warning"}
-            class:logs-sidebar__log-entry--success={log.level === "success"}
-            class:logs-sidebar__log-entry--info={log.level === "info"}
+            class:logs-sidebar__log-entry--error={log.level === 'error'}
+            class:logs-sidebar__log-entry--warning={log.level === 'warning'}
+            class:logs-sidebar__log-entry--success={log.level === 'success'}
+            class:logs-sidebar__log-entry--info={log.level === 'info'}
           >
             <div class="logs-sidebar__log-header">
               <div class="logs-sidebar__log-level">
@@ -214,9 +214,7 @@
                   icon={getLogLevelIcon(log.level)}
                   style="color: {getLogLevelColor(log.level)}"
                 />
-                <span class="logs-sidebar__log-level-text"
-                  >{log.level.toUpperCase()}</span
-                >
+                <span class="logs-sidebar__log-level-text">{log.level.toUpperCase()}</span>
               </div>
               <div class="logs-sidebar__log-timestamp">
                 {formatTimestamp(log.timestamp)}
@@ -236,10 +234,7 @@
       </div>
     {:else}
       <div class="logs-sidebar__empty">
-        <Icon
-          icon="mdi:file-document-outline"
-          class="logs-sidebar__empty-icon"
-        />
+        <Icon icon="mdi:file-document-outline" class="logs-sidebar__empty-icon" />
         <p class="logs-sidebar__empty-text">
           {#if props.selectedNode}
             No logs available for this node
@@ -288,9 +283,7 @@
     top: var(--fd-navbar-height); /* Start below navbar */
     right: 0;
     width: 400px;
-    height: calc(
-      100vh - var(--fd-navbar-height)
-    ); /* Account for navbar height */
+    height: calc(100vh - var(--fd-navbar-height)); /* Account for navbar height */
     background-color: #ffffff;
     border-left: 1px solid #e5e7eb;
     box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
@@ -445,7 +438,7 @@
   .logs-sidebar__log-timestamp {
     font-size: 0.75rem;
     color: #6b7280;
-    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   }
 
   .logs-sidebar__log-message {

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

@@ -1,4 +1,4 @@
-import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 interface LogEntry {
     timestamp: string;
     level: string;

package/dist/components/MarkdownDisplay.stories.svelte

@@ -1,27 +1,23 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import MarkdownDisplay from "./MarkdownDisplay.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MarkdownDisplay from './MarkdownDisplay.svelte';
 
   const { Story } = defineMeta({
-    title: "Display/MarkdownDisplay",
+    title: 'Display/MarkdownDisplay',
     component: MarkdownDisplay,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      content: { control: "text" },
-    },
+      content: { control: 'text' }
+    }
   });
 </script>
 
-<Story
-  name="Simple"
-  args={{ content: "Hello **world**! This is *italic* and `inline code`." }}
-/>
+<Story name="Simple" args={{ content: 'Hello **world**! This is *italic* and `inline code`.' }} />
 
 <Story
   name="Headings"
   args={{
-    content:
-      "# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings.",
+    content: '# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings.'
   }}
 />
 
@@ -29,7 +25,7 @@
   name="Code Block"
   args={{
     content:
-      'Here is a code example:\n\n```javascript\nconst greeting = "Hello";\nconsole.log(greeting);\n```\n\nAnd some text after.',
+      'Here is a code example:\n\n```javascript\nconst greeting = "Hello";\nconsole.log(greeting);\n```\n\nAnd some text after.'
   }}
 />
 
@@ -37,6 +33,6 @@
   name="Full Document"
   args={{
     content:
-      "# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com).",
+      '# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com).'
   }}
 />

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

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

@@ -5,8 +5,8 @@
 -->
 
 <script lang="ts">
-  import { marked } from "marked";
-  import { sanitizeHtml } from "../utils/sanitize.js";
+  import { marked } from 'marked';
+  import { sanitizeHtml } from '../utils/sanitize.js';
 
   interface Props {
     content: string;
@@ -16,12 +16,10 @@
   let props: Props = $props();
 
   // Parse markdown content and sanitize to prevent XSS
-  let renderedContent = $derived(
-    sanitizeHtml(marked.parse(props.content || "") as string),
-  );
+  let renderedContent = $derived(sanitizeHtml(marked.parse(props.content || '') as string));
 
   // Default class name if none provided
-  let displayClass = $derived(props.className || "markdown-display");
+  let displayClass = $derived(props.className || 'markdown-display');
 </script>
 
 <div class={displayClass}>

package/dist/components/Navbar.stories.svelte

@@ -1,40 +1,40 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Navbar from "./Navbar.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Navbar from './Navbar.svelte';
 
   const { Story } = defineMeta({
-    title: "Editor/Navbar",
+    title: 'Editor/Navbar',
     component: Navbar,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     parameters: {
-      layout: "fullscreen",
-    },
+      layout: 'fullscreen'
+    }
   });
 </script>
 
 <Story
   name="Default"
   args={{
-    title: "My Workflow",
+    title: 'My Workflow',
     showStatus: true,
-    showSettings: true,
+    showSettings: true
   }}
 />
 
 <Story
   name="With Actions"
   args={{
-    title: "Workflow Editor",
+    title: 'Workflow Editor',
     primaryActions: [
       {
-        label: "Save",
-        href: "#",
-        icon: "mdi:content-save",
-        variant: "primary",
+        label: 'Save',
+        href: '#',
+        icon: 'mdi:content-save',
+        variant: 'primary'
       },
-      { label: "Export", href: "#", icon: "mdi:download", variant: "outline" },
+      { label: 'Export', href: '#', icon: 'mdi:download', variant: 'outline' }
     ],
-    showStatus: true,
+    showStatus: true
   }}
 />
 
@@ -42,10 +42,10 @@
   name="With Breadcrumbs"
   args={{
     breadcrumbs: [
-      { label: "Workflows", href: "#", icon: "mdi:folder" },
-      { label: "My Workflow", href: "#" },
+      { label: 'Workflows', href: '#', icon: 'mdi:folder' },
+      { label: 'My Workflow', href: '#' }
     ],
-    showSettings: true,
+    showSettings: true
   }}
 />
 
@@ -53,6 +53,6 @@
   name="Minimal"
   args={{
     showStatus: false,
-    showSettings: false,
+    showSettings: false
   }}
 />

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

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