@flowdrop/flowdrop 1.4.0 → 1.6.0

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,19 +102,19 @@
    */
   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
     });
   }
 
   /**
    * Filter logs by selected node
    */
-  let filteredLogs = $derived(() => {
+  let filteredLogs = $derived.by(() => {
     if (props.selectedNode) {
       return props.logs.filter((log) => log.nodeId === props.selectedNode?.id);
     }
@@ -132,18 +132,18 @@
    * Export logs
    */
   function exportLogs(): void {
-    const logText = filteredLogs()
+    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);
   }
@@ -198,15 +198,15 @@
   <!-- Content -->
   <div class="logs-sidebar__content">
     <!-- Logs List -->
-    {#if filteredLogs().length > 0}
+    {#if filteredLogs.length > 0}
       <div class="logs-sidebar__logs" bind:this={logsContainer}>
-        {#each filteredLogs() as log, index (index)}
+        {#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
@@ -276,7 +271,7 @@
 
     {#if props.logs.length > 0}
       <p class="logs-sidebar__info-text">
-        {filteredLogs().length} of {props.logs.length} log entries
+        {filteredLogs.length} of {props.logs.length} log entries
       </p>
     {/if}
   </div>
@@ -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;

package/dist/components/Navbar.svelte

@@ -7,16 +7,16 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import Logo from "./Logo.svelte";
-  import SettingsModal from "./SettingsModal.svelte";
-  import type { SettingsCategory } from "../types/settings.js";
+  import Icon from '@iconify/svelte';
+  import Logo from './Logo.svelte';
+  import SettingsModal from './SettingsModal.svelte';
+  import type { SettingsCategory } from '../types/settings.js';
 
   interface NavbarAction {
     label: string;
     href: string;
     icon?: string;
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
     onclick?: (event: Event) => void;
     /** If true, opens link in new tab with proper security attributes */
     external?: boolean;
@@ -55,7 +55,7 @@
     showSettings = true,
     settingsCategories,
     showSettingsSyncButton,
-    showSettingsResetButton,
+    showSettingsResetButton
   }: Props = $props();
 
   // Dropdown state
@@ -67,16 +67,16 @@
   // Close dropdown when clicking outside
   function handleClickOutside(event: MouseEvent) {
     const target = event.target as HTMLElement;
-    if (!target.closest(".flowdrop-navbar__dropdown")) {
+    if (!target.closest('.flowdrop-navbar__dropdown')) {
       isDropdownOpen = false;
     }
   }
 
   // Add event listener for click outside with proper cleanup
   $effect(() => {
-    document.addEventListener("click", handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
     return () => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     };
   });
 </script>
@@ -91,9 +91,7 @@
         </div>
         <div>
           <h1 class="flowdrop-text--logo flowdrop-font--bold">FlowDrop</h1>
-          <p class="flowdrop-text--tagline flowdrop-text--gray">
-            Visual Workflow Manager
-          </p>
+          <p class="flowdrop-text--tagline flowdrop-text--gray">Visual Workflow Manager</p>
         </div>
       </div>
     </div>
@@ -119,40 +117,24 @@
               {#each breadcrumbs as breadcrumb, index (index)}
                 <li class="flowdrop-navbar__breadcrumb-item">
                   {#if breadcrumb.href && index < breadcrumbs.length - 1}
-                    <a
-                      href={breadcrumb.href}
-                      class="flowdrop-navbar__breadcrumb-link"
-                    >
+                    <a href={breadcrumb.href} class="flowdrop-navbar__breadcrumb-link">
                       {#if breadcrumb.icon}
-                        <Icon
-                          icon={breadcrumb.icon}
-                          class="flowdrop-navbar__breadcrumb-icon"
-                        />
+                        <Icon icon={breadcrumb.icon} class="flowdrop-navbar__breadcrumb-icon" />
                       {/if}
-                      <span class="flowdrop-navbar__breadcrumb-text"
-                        >{breadcrumb.label}</span
-                      >
+                      <span class="flowdrop-navbar__breadcrumb-text">{breadcrumb.label}</span>
                     </a>
                   {:else}
                     <span class="flowdrop-navbar__breadcrumb-current">
                       {#if breadcrumb.icon}
-                        <Icon
-                          icon={breadcrumb.icon}
-                          class="flowdrop-navbar__breadcrumb-icon"
-                        />
+                        <Icon icon={breadcrumb.icon} class="flowdrop-navbar__breadcrumb-icon" />
                       {/if}
-                      <span class="flowdrop-navbar__breadcrumb-text"
-                        >{breadcrumb.label}</span
-                      >
+                      <span class="flowdrop-navbar__breadcrumb-text">{breadcrumb.label}</span>
                     </span>
                   {/if}
                 </li>
                 {#if index < breadcrumbs.length - 1}
                   <li class="flowdrop-navbar__breadcrumb-separator">
-                    <Icon
-                      icon="mdi:chevron-right"
-                      class="flowdrop-navbar__breadcrumb-chevron"
-                    />
+                    <Icon icon="mdi:chevron-right" class="flowdrop-navbar__breadcrumb-chevron" />
                   </li>
                 {/if}
               {/each}
@@ -176,11 +158,10 @@
         {#each primaryActions as action (action.label)}
           <a
             href={action.href}
-            class="flowdrop-navbar__action flowdrop-navbar__action--{action.variant ||
-              'primary'}"
+            class="flowdrop-navbar__action flowdrop-navbar__action--{action.variant || 'primary'}"
             onclick={action.onclick}
-            target={action.external ? "_blank" : undefined}
-            rel={action.external ? "noopener noreferrer" : undefined}
+            target={action.external ? '_blank' : undefined}
+            rel={action.external ? 'noopener noreferrer' : undefined}
           >
             {#if action.icon}
               <span class="flowdrop-navbar__action-icon">
@@ -201,17 +182,15 @@
             class="flowdrop-navbar__primary-action flowdrop-navbar__action--{primaryAction.variant ||
               'primary'}"
             onclick={primaryAction.onclick}
-            target={primaryAction.external ? "_blank" : undefined}
-            rel={primaryAction.external ? "noopener noreferrer" : undefined}
+            target={primaryAction.external ? '_blank' : undefined}
+            rel={primaryAction.external ? 'noopener noreferrer' : undefined}
           >
             {#if primaryAction.icon}
               <span class="flowdrop-navbar__action-icon">
                 <Icon icon={primaryAction.icon} class="w-4 h-4" />
               </span>
             {/if}
-            <span class="flowdrop-navbar__action-label"
-              >{primaryAction.label}</span
-            >
+            <span class="flowdrop-navbar__action-label">{primaryAction.label}</span>
           </a>
         {/if}
 
@@ -237,8 +216,8 @@
                       action.onclick?.(e);
                       isDropdownOpen = false;
                     }}
-                    target={action.external ? "_blank" : undefined}
-                    rel={action.external ? "noopener noreferrer" : undefined}
+                    target={action.external ? '_blank' : undefined}
+                    rel={action.external ? 'noopener noreferrer' : undefined}
                   >
                     {#if action.icon}
                       <Icon icon={action.icon} class="w-4 h-4" />
@@ -276,11 +255,11 @@
   {@const settingsModalProps = {
     ...(settingsCategories !== undefined && { categories: settingsCategories }),
     ...(showSettingsSyncButton !== undefined && {
-      showSyncButton: showSettingsSyncButton,
+      showSyncButton: showSettingsSyncButton
     }),
     ...(showSettingsResetButton !== undefined && {
-      showResetButton: showSettingsResetButton,
-    }),
+      showResetButton: showSettingsResetButton
+    })
   }}
   <SettingsModal bind:open={isSettingsOpen} {...settingsModalProps} />
 {/if}
@@ -546,7 +525,7 @@
     color: var(--fd-foreground);
   }
 
-  .flowdrop-navbar__dropdown-trigger[aria-expanded="true"] {
+  .flowdrop-navbar__dropdown-trigger[aria-expanded='true'] {
     background-color: var(--fd-subtle);
     color: var(--fd-foreground);
   }

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

@@ -1,9 +1,9 @@
-import type { SettingsCategory } from "../types/settings.js";
+import type { SettingsCategory } from '../types/settings.js';
 interface NavbarAction {
     label: string;
     href: string;
     icon?: string;
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
     onclick?: (event: Event) => void;
     /** If true, opens link in new tab with proper security attributes */
     external?: boolean;