@flowdrop/flowdrop 1.5.0 → 1.7.0

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;

package/dist/components/NodeSidebar.svelte

@@ -5,18 +5,14 @@
 -->
 
 <script lang="ts">
-  import type {
-    NodeMetadata,
-    NodeCategory,
-    WorkflowFormat,
-  } from "../types/index.js";
-  import LoadingSpinner from "./LoadingSpinner.svelte";
-  import Icon from "@iconify/svelte";
-  import { getNodeIcon, getCategoryIcon } from "../utils/icons.js";
-  import { getCategoryColorToken } from "../utils/colors.js";
-  import { getCategoryLabel } from "../stores/categoriesStore.svelte.js";
-  import { getUiSettings } from "../stores/settingsStore.svelte.js";
-  import { extractConfigDefaults } from "../utils/nodeIds.js";
+  import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
+  import LoadingSpinner from './LoadingSpinner.svelte';
+  import Icon from '@iconify/svelte';
+  import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
+  import { getCategoryColorToken } from '../utils/colors.js';
+  import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
+  import { getUiSettings } from '../stores/settingsStore.svelte.js';
+  import { extractConfigDefaults } from '../utils/nodeIds.js';
 
   interface Props {
     nodes: NodeMetadata[];
@@ -29,9 +25,9 @@
   }
 
   let props: Props = $props();
-  let searchInput = $state("");
+  let searchInput = $state('');
   // svelte-ignore state_referenced_locally — initial default, user selects interactively
-  let selectedCategory = $state(props.selectedCategory || "all");
+  let selectedCategory = $state(props.selectedCategory || 'all');
 
   /**
    * Check if a node is compatible with the active workflow format.
@@ -47,9 +43,7 @@
   let isCollapsed = $derived(getUiSettings().sidebarCollapsed);
 
   /** Nodes filtered by format compatibility */
-  let formatCompatibleNodes = $derived(
-    (props.nodes || []).filter(isNodeCompatibleWithFormat),
-  );
+  let formatCompatibleNodes = $derived((props.nodes || []).filter(isNodeCompatibleWithFormat));
 
   let filteredNodes = $derived(getFilteredNodes());
   let categories = $derived(getCategories());
@@ -59,7 +53,10 @@
     const map = new Map<string, NodeMetadata[]>();
     for (const node of filteredNodes) {
       let list = map.get(node.category);
-      if (!list) { list = []; map.set(node.category, list); }
+      if (!list) {
+        list = [];
+        map.set(node.category, list);
+      }
       list.push(node);
     }
     return map;
@@ -92,7 +89,7 @@
     let filtered = formatCompatibleNodes;
 
     // Filter by category
-    if (selectedCategory !== "all") {
+    if (selectedCategory !== 'all') {
       filtered = filtered.filter((node) => node.category === selectedCategory);
     }
 
@@ -103,7 +100,7 @@
         (node) =>
           node.name.toLowerCase().includes(query) ||
           node.description.toLowerCase().includes(query) ||
-          node.tags?.some((tag) => tag.toLowerCase().includes(query)),
+          node.tags?.some((tag) => tag.toLowerCase().includes(query))
       );
     }
 
@@ -119,30 +116,26 @@
 
     // Create a new node instance from the node type
     const newNodeData = {
-      type: "node",
+      type: 'node',
       nodeType: nodeType.id,
       nodeData: {
         label: nodeType.name,
         config: extractConfigDefaults(nodeType.configSchema),
-        metadata: nodeType,
-      },
+        metadata: nodeType
+      }
     };
 
     const jsonData = JSON.stringify(newNodeData);
 
     // Set the data that SvelteFlow will receive
-    event.dataTransfer.setData("application/json", jsonData);
-    event.dataTransfer.setData("text/plain", nodeType.name);
-    event.dataTransfer.effectAllowed = "copy";
+    event.dataTransfer.setData('application/json', jsonData);
+    event.dataTransfer.setData('text/plain', nodeType.name);
+    event.dataTransfer.effectAllowed = 'copy';
 
     // Set drag image
     if (event.target) {
       const rect = (event.target as HTMLElement).getBoundingClientRect();
-      event.dataTransfer.setDragImage(
-        event.target as HTMLElement,
-        rect.width / 2,
-        rect.height / 2,
-      );
+      event.dataTransfer.setDragImage(event.target as HTMLElement, rect.width / 2, rect.height / 2);
     }
   }
 
@@ -167,7 +160,6 @@
   function getCategoryDisplayName(category: NodeCategory): string {
     return getCategoryLabel(category);
   }
-
 </script>
 
 <!-- Components Sidebar -->
@@ -190,10 +182,7 @@
           oninput={handleSearchChange}
         />
       </div>
-      <button
-        class="flowdrop-btn flowdrop-join__item"
-        aria-label="Search components"
-      >
+      <button class="flowdrop-btn flowdrop-join__item" aria-label="Search components">
         <Icon icon="mdi:magnify" class="flowdrop-icon" />
       </button>
     </div>
@@ -230,9 +219,7 @@
               </svg>
             </div>
             <h3 class="flowdrop-hero__title">No node types available</h3>
-            <p class="flowdrop-hero__description">
-              Node type definitions will appear here
-            </p>
+            <p class="flowdrop-hero__description">Node type definitions will appear here</p>
           {/if}
         </div>
       </div>
@@ -262,9 +249,7 @@
                 </svg>
               </div>
               <h3 class="flowdrop-hero__title">No components found</h3>
-              <p class="flowdrop-hero__description">
-                Try adjusting your search
-              </p>
+              <p class="flowdrop-hero__description">Try adjusting your search</p>
               {#if props.loading}
                 <div class="flowdrop-mb--4">
                   <LoadingSpinner size="sm" text="Loading components..." />
@@ -283,19 +268,13 @@
                 tabindex="0"
               >
                 <div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
-                  <div
-                    class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
-                  >
+                  <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
                     <!-- Node Type Icon with Squircle Background -->
                     <span
                       class="flowdrop-node-icon"
-                      style="--_icon-color: {getCategoryColorToken(
-                        nodeType.category,
-                      )}"
+                      style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
                     >
-                      <Icon
-                        icon={getNodeIcon(nodeType.icon, nodeType.category)}
-                      />
+                      <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
                     </span>
 
                     <!-- Node Type Info - Icon and Title only -->
@@ -339,7 +318,7 @@
                       role="button"
                       tabindex="0"
                       onkeydown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
+                        if (e.key === 'Enter' || e.key === ' ') {
                           e.preventDefault();
                           handleNodeClick(nodeType);
                         }
@@ -347,9 +326,7 @@
                     >
                       <span
                         class="fd-sidebar-flat-dot"
-                        style="background: {getCategoryColorToken(
-                          nodeType.category,
-                        )}"
+                        style="background: {getCategoryColorToken(nodeType.category)}"
                       ></span>
                       <span class="fd-sidebar-flat-name">{nodeType.name}</span>
                     </div>
@@ -362,9 +339,7 @@
                 open={props.categoriesDefaultOpen || undefined}
               >
                 <summary class="flowdrop-details__summary">
-                  <div
-                    class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
-                  >
+                  <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
                     <span
                       class="flowdrop-node-icon"
                       style="--_icon-color: {getCategoryColorToken(category)}"
@@ -388,31 +363,20 @@
                         role="button"
                         tabindex="0"
                         onkeydown={(e) => {
-                          if (e.key === "Enter" || e.key === " ") {
+                          if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             handleNodeClick(nodeType);
                           }
                         }}
                       >
-                        <div
-                          class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1"
-                        >
-                          <div
-                            class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"
-                          >
+                        <div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
+                          <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
                             <!-- Node Type Icon with Squircle Background -->
                             <span
                               class="flowdrop-node-icon"
-                              style="--_icon-color: {getCategoryColorToken(
-                                nodeType.category,
-                              )}"
+                              style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
                             >
-                              <Icon
-                                icon={getNodeIcon(
-                                  nodeType.icon,
-                                  nodeType.category,
-                                )}
-                              />
+                              <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
                             </span>
 
                             <!-- Node Type Info - Icon and Title only -->
@@ -445,16 +409,12 @@
     <div class="flowdrop-flex flowdrop-gap--4">
       <div class="flowdrop-flex flowdrop-gap--4">
         {#if props.loading && props.nodes?.length === 0}
-          <span class="flowdrop-text--xs flowdrop-text--gray"
-            >Loading components...</span
-          >
+          <span class="flowdrop-text--xs flowdrop-text--gray">Loading components...</span>
         {:else}
           <span class="flowdrop-text--xs flowdrop-text--gray"
             >Total: {props.nodes?.length || 0} components</span
           >
-          <span class="flowdrop-text--xs flowdrop-text--gray"
-            >Showing: {filteredNodes.length}</span
-          >
+          <span class="flowdrop-text--xs flowdrop-text--gray">Showing: {filteredNodes.length}</span>
         {/if}
       </div>
     </div>
@@ -464,9 +424,7 @@
 <style>
   /* Components Sidebar - Always Visible */
   .flowdrop-sidebar {
-    height: calc(
-      100vh - var(--fd-navbar-height)
-    ); /* Account for navbar height */
+    height: calc(100vh - var(--fd-navbar-height)); /* Account for navbar height */
     background-color: var(--fd-background);
     border-right: 1px solid var(--fd-border);
     display: flex;
@@ -597,11 +555,7 @@
     width: 2rem;
     height: 2rem;
     border-radius: 0.5rem;
-    background: color-mix(
-      in srgb,
-      var(--_icon-color) var(--fd-node-icon-bg-opacity),
-      transparent
-    );
+    background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     color: var(--fd-node-icon);
     font-size: var(--fd-text-sm);
     display: flex;

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

@@ -1,4 +1,4 @@
-import type { NodeMetadata, NodeCategory, WorkflowFormat } from "../types/index.js";
+import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
 interface Props {
     nodes: NodeMetadata[];
     /** Whether node types are still being fetched. Default: false */

package/dist/components/NodeStatusOverlay.stories.svelte

@@ -1,13 +1,13 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NodeStatusOverlay from './NodeStatusOverlay.svelte';
 
   const { Story } = defineMeta({
-    title: "Editor/NodeStatusOverlay",
-    tags: ["autodocs"],
+    title: 'Editor/NodeStatusOverlay',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 </script>
 
@@ -17,16 +17,14 @@
   >
     <NodeStatusOverlay
       executionInfo={{
-        status: "idle",
+        status: 'idle',
         executionCount: 3,
         isExecuting: false,
-        lastExecuted: new Date().toISOString(),
+        lastExecuted: new Date().toISOString()
       }}
       showDetails
     />
-    <div
-      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
-    >
+    <div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
       Node Content
     </div>
   </div>
@@ -38,14 +36,12 @@
   >
     <NodeStatusOverlay
       executionInfo={{
-        status: "running",
+        status: 'running',
         executionCount: 1,
-        isExecuting: true,
+        isExecuting: true
       }}
     />
-    <div
-      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
-    >
+    <div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
       Processing...
     </div>
   </div>
@@ -57,19 +53,15 @@
   >
     <NodeStatusOverlay
       executionInfo={{
-        status: "completed",
+        status: 'completed',
         executionCount: 5,
         isExecuting: false,
         lastExecuted: new Date().toISOString(),
-        lastExecutionDuration: 1250,
+        lastExecutionDuration: 1250
       }}
       showDetails
     />
-    <div
-      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
-    >
-      Done!
-    </div>
+    <div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Done!</div>
   </div>
 </Story>
 
@@ -79,19 +71,15 @@
   >
     <NodeStatusOverlay
       executionInfo={{
-        status: "failed",
+        status: 'failed',
         executionCount: 2,
         isExecuting: false,
-        lastError: "Connection timeout",
+        lastError: 'Connection timeout',
         lastExecuted: new Date().toISOString(),
-        lastExecutionDuration: 30000,
+        lastExecutionDuration: 30000
       }}
       showDetails
     />
-    <div
-      style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);"
-    >
-      Error
-    </div>
+    <div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Error</div>
   </div>
 </Story>

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

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