@flowdrop/flowdrop 1.4.0 → 1.6.0

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 { SvelteSet } from "svelte/reactivity";
-  import { getUiSettings } from "../stores/settingsStore.svelte.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,13 +43,25 @@
   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());
 
+  /** Group already-filtered results by category in a single pass */
+  let filteredNodesByCategory = $derived.by(() => {
+    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);
+      }
+      list.push(node);
+    }
+    return map;
+  });
+
   /**
    * Get all unique categories from node types, preserving API order
    * Categories appear in the order their first node appears in the API response
@@ -61,7 +69,7 @@
   function getCategories(): NodeCategory[] {
     if (formatCompatibleNodes.length === 0) return [];
     // Use a Set to track uniqueness while preserving insertion order
-    const seen = new SvelteSet<NodeCategory>();
+    const seen = new Set<NodeCategory>();
     const orderedCategories: NodeCategory[] = [];
     for (const node of formatCompatibleNodes) {
       if (!seen.has(node.category)) {
@@ -81,7 +89,7 @@
     let filtered = formatCompatibleNodes;
 
     // Filter by category
-    if (selectedCategory !== "all") {
+    if (selectedCategory !== 'all') {
       filtered = filtered.filter((node) => node.category === selectedCategory);
     }
 
@@ -92,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))
       );
     }
 
@@ -106,50 +114,28 @@
   function handleNodeDragStart(event: DragEvent, nodeType: NodeMetadata): void {
     if (!event.dataTransfer) return;
 
-    // Extract initial config from configSchema with proper null checks
-    let initialConfig: Record<string, unknown> = {};
-    if (
-      nodeType.configSchema &&
-      typeof nodeType.configSchema === "object" &&
-      nodeType.configSchema.properties &&
-      typeof nodeType.configSchema.properties === "object"
-    ) {
-      // JSON Schema format - extract defaults
-      Object.entries(nodeType.configSchema.properties).forEach(
-        ([key, prop]) => {
-          if (prop && typeof prop === "object" && "default" in prop) {
-            initialConfig[key] = prop.default;
-          }
-        },
-      );
-    }
-
     // Create a new node instance from the node type
     const newNodeData = {
-      type: "node",
+      type: 'node',
       nodeType: nodeType.id,
       nodeData: {
         label: nodeType.name,
-        config: initialConfig,
-        metadata: nodeType,
-      },
+        config: extractConfigDefaults(nodeType.configSchema),
+        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);
     }
   }
 
@@ -174,34 +160,6 @@
   function getCategoryDisplayName(category: NodeCategory): string {
     return getCategoryLabel(category);
   }
-
-  /**
-   * Get node types for category
-   * Preserves the API order - no client-side sorting applied
-   */
-  function getNodesForCategory(category: NodeCategory): NodeMetadata[] {
-    return formatCompatibleNodes.filter((node) => node.category === category);
-  }
-
-  /**
-   * Get filtered nodes for category
-   */
-  function getFilteredNodesForCategory(category: NodeCategory): NodeMetadata[] {
-    let nodes = getNodesForCategory(category);
-
-    // Filter by search query
-    if (searchInput.trim()) {
-      const query = searchInput.toLowerCase();
-      nodes = nodes.filter(
-        (node) =>
-          node.name.toLowerCase().includes(query) ||
-          node.description.toLowerCase().includes(query) ||
-          node.tags?.some((tag) => tag.toLowerCase().includes(query)),
-      );
-    }
-
-    return nodes;
-  }
 </script>
 
 <!-- Components Sidebar -->
@@ -224,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>
@@ -264,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>
@@ -296,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..." />
@@ -317,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 -->
@@ -356,7 +301,7 @@
         <!-- Category-specific details -->
         <div class="flowdrop-category-list">
           {#each categories as category (category)}
-            {@const categoryNodes = getFilteredNodesForCategory(category)}
+            {@const categoryNodes = filteredNodesByCategory.get(category) ?? []}
             {#if categoryNodes.length > 0}
               <!-- Flat style: label + dot+name rows (shown/hidden via CSS token) -->
               <div class="fd-sidebar-flat-section">
@@ -373,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);
                         }
@@ -381,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>
@@ -396,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)}"
@@ -422,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 -->
@@ -479,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>
@@ -498,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;
@@ -631,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;

package/dist/components/NodeStatusOverlay.svelte

@@ -6,80 +6,78 @@
 -->
 
 <script lang="ts">
-  import type { NodeExecutionInfo } from "../types/index.js";
-  import Icon from "@iconify/svelte";
-  import StatusLabel from "./StatusLabel.svelte";
+  import type { NodeExecutionInfo } from '../types/index.js';
+  import Icon from '@iconify/svelte';
+  import StatusLabel from './StatusLabel.svelte';
   import {
     getStatusColor,
     getStatusIcon,
     getStatusLabel,
     getStatusBackgroundColor,
     formatExecutionDuration,
-    formatLastExecuted,
-  } from "../utils/nodeStatus.js";
+    formatLastExecuted
+  } from '../utils/nodeStatus.js';
 
   interface Props {
     nodeId?: string;
     executionInfo?: NodeExecutionInfo;
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    size?: "sm" | "md" | "lg";
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'sm' | 'md' | 'lg';
     showDetails?: boolean;
   }
 
   let props: Props = $props();
 
   // Default values
-  let position = $derived(props.position || "top-right");
-  let size = $derived(props.size || "md");
+  let position = $derived(props.position || 'top-right');
+  let size = $derived(props.size || 'md');
   let showDetails = $derived(props.showDetails || false);
   let isHovered = $state(false);
 
   // Size configurations - optimized for larger, centered overlay
   const sizeConfig = {
     sm: {
-      statusSize: "18px",
-      iconSize: "10px",
-      labelSize: "0.75rem",
-      padding: "6px 12px",
+      statusSize: '18px',
+      iconSize: '10px',
+      labelSize: '0.75rem',
+      padding: '6px 12px'
     },
     md: {
-      statusSize: "24px",
-      iconSize: "14px",
-      labelSize: "0.875rem",
-      padding: "8px 16px",
+      statusSize: '24px',
+      iconSize: '14px',
+      labelSize: '0.875rem',
+      padding: '8px 16px'
     },
     lg: {
-      statusSize: "28px",
-      iconSize: "16px",
-      labelSize: "1rem",
-      padding: "10px 20px",
-    },
+      statusSize: '28px',
+      iconSize: '16px',
+      labelSize: '1rem',
+      padding: '10px 20px'
+    }
   };
 
   const config = $derived(sizeConfig[size]);
 
   // Position styles - horizontal center aligned with top edge of node
   const positionStyles = {
-    "top-left": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "top-right": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "bottom-left": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "bottom-right": "top: -24px; left: 50%; transform: translateX(-50%);",
+    'top-left': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'top-right': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'bottom-left': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'bottom-right': 'top: -24px; left: 50%; transform: translateX(-50%);'
   };
 
   // Get execution info or default
   let executionInfo = $derived(
     props.executionInfo || {
-      status: "idle" as const,
+      status: 'idle' as const,
       executionCount: 0,
-      isExecuting: false,
-    },
+      isExecuting: false
+    }
   );
 
   // Show overlay if there's meaningful status information
   let shouldShow = $derived(
-    executionInfo.status !== "idle" ||
-      executionInfo.executionCount > 0 ||
-      executionInfo.isExecuting,
+    executionInfo.status !== 'idle' || executionInfo.executionCount > 0 || executionInfo.isExecuting
   );
 </script>
 
@@ -88,9 +86,9 @@
     class="node-status-overlay"
     class:node-status-overlay--hovered={isHovered}
     class:node-status-overlay--top-left={true}
-    class:node-status-overlay--sm={size === "sm"}
-    class:node-status-overlay--md={size === "md"}
-    class:node-status-overlay--lg={size === "lg"}
+    class:node-status-overlay--sm={size === 'sm'}
+    class:node-status-overlay--md={size === 'md'}
+    class:node-status-overlay--lg={size === 'lg'}
     style="
 			{positionStyles[position]}
 			--status-size: {config.statusSize};
@@ -100,9 +98,7 @@
 		"
     onmouseenter={() => (isHovered = true)}
     onmouseleave={() => (isHovered = false)}
-    title="{getStatusLabel(
-      executionInfo.status,
-    )} - Executed {executionInfo.executionCount} times"
+    title="{getStatusLabel(executionInfo.status)} - Executed {executionInfo.executionCount} times"
     role="status"
     aria-label="Node execution status: {getStatusLabel(executionInfo.status)}"
   >
@@ -115,10 +111,7 @@
         class="node-status-overlay__status-icon"
         style="background-color: {getStatusColor(executionInfo.status)}"
       >
-        <Icon
-          icon={getStatusIcon(executionInfo.status)}
-          class="node-status-overlay__icon"
-        />
+        <Icon icon={getStatusIcon(executionInfo.status)} class="node-status-overlay__icon" />
       </div>
       <StatusLabel
         label={getStatusLabel(executionInfo.status)}
@@ -144,9 +137,7 @@
         </div>
         <div class="node-status-overlay__detail-item">
           <span class="node-status-overlay__detail-label">Executions:</span>
-          <span class="node-status-overlay__detail-value"
-            >{executionInfo.executionCount}</span
-          >
+          <span class="node-status-overlay__detail-value">{executionInfo.executionCount}</span>
         </div>
         {#if executionInfo.lastExecuted}
           <div class="node-status-overlay__detail-item">
@@ -160,20 +151,14 @@
           <div class="node-status-overlay__detail-item">
             <span class="node-status-overlay__detail-label">Duration:</span>
             <span class="node-status-overlay__detail-value"
-              >{formatExecutionDuration(
-                executionInfo.lastExecutionDuration,
-              )}</span
+              >{formatExecutionDuration(executionInfo.lastExecutionDuration)}</span
             >
           </div>
         {/if}
         {#if executionInfo.lastError}
-          <div
-            class="node-status-overlay__detail-item node-status-overlay__detail-item--error"
-          >
+          <div class="node-status-overlay__detail-item node-status-overlay__detail-item--error">
             <span class="node-status-overlay__detail-label">Error:</span>
-            <span class="node-status-overlay__detail-value"
-              >{executionInfo.lastError}</span
-            >
+            <span class="node-status-overlay__detail-value">{executionInfo.lastError}</span>
           </div>
         {/if}
       </div>
@@ -326,7 +311,7 @@
   }
 
   /* Animation for running status */
-  .node-status-overlay__status-icon[style*="running"] {
+  .node-status-overlay__status-icon[style*='running'] {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }