@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/nodes/GatewayNode.svelte

@@ -9,25 +9,21 @@
 -->
 
 <script lang="ts">
-  import { Position, Handle } from "@xyflow/svelte";
-  import type { WorkflowNode, NodePort, Branch } from "../../types/index.js";
-  import Icon from "@iconify/svelte";
-  import { getNodeIcon } from "../../utils/icons.js";
+  import { Position, Handle } from '@xyflow/svelte';
+  import type { WorkflowNode, NodePort, Branch } from '../../types/index.js';
+  import Icon from '@iconify/svelte';
+  import { getNodeIcon } from '../../utils/icons.js';
   import {
     getDataTypeColorToken,
     getCategoryColorToken,
-    getPortBackgroundColor,
-  } from "../../utils/colors.js";
-  import { getConnectedHandles } from "../../stores/workflowStore.svelte.js";
+    getPortBackgroundColor
+  } from '../../utils/colors.js';
+  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
   interface Props {
-    data: WorkflowNode["data"] & {
+    data: WorkflowNode['data'] & {
       nodeId?: string;
-      onConfigOpen?: (node: {
-        id: string;
-        type: string;
-        data: WorkflowNode["data"];
-      }) => void;
+      onConfigOpen?: (node: { id: string; type: string; data: WorkflowNode['data'] }) => void;
     };
     selected?: boolean;
   }
@@ -39,9 +35,7 @@
    * Falls back to the original label if not set.
    * This allows users to customize the node title per-instance via config.
    */
-  const displayTitle = $derived(
-    (props.data.config?.instanceTitle as string) || props.data.label,
-  );
+  const displayTitle = $derived((props.data.config?.instanceTitle as string) || props.data.label);
 
   /**
    * Instance-specific description override from config.
@@ -49,8 +43,7 @@
    * This allows users to customize the node description per-instance via config.
    */
   const displayDescription = $derived(
-    (props.data.config?.instanceDescription as string) ||
-      props.data.metadata.description,
+    (props.data.config?.instanceDescription as string) || props.data.metadata.description
   );
 
   /**
@@ -60,7 +53,7 @@
   const hideUnconnectedHandles = $derived(
     props.data.extensions?.ui?.hideUnconnectedHandles ??
       props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
-      false,
+      false
   );
 
   /**
@@ -69,7 +62,7 @@
    * @param type - Whether this is an 'input' or 'output' port
    * @returns true if the port should be visible
    */
-  function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
+  function isPortVisible(port: NodePort, type: 'input' | 'output'): boolean {
     // Always show if hideUnconnectedHandles is disabled
     if (!hideUnconnectedHandles) {
       return true;
@@ -89,7 +82,7 @@
    * Derived list of visible input ports based on hideUnconnectedHandles setting
    */
   const visibleInputPorts = $derived(
-    props.data.metadata.inputs.filter((port) => isPortVisible(port, "input")),
+    props.data.metadata.inputs.filter((port) => isPortVisible(port, 'input'))
   );
 
   /**
@@ -111,15 +104,13 @@
   // Gateway-specific data - branches are calculated at runtime from config
   let branches = $derived((props.data.config?.branches as Branch[]) || []);
   let activeBranches = $derived(
-    (props.data.executionInfo?.output?.active_branches as string[]) || [],
+    (props.data.executionInfo?.output?.active_branches as string[]) || []
   );
 
   /**
    * Derived list of visible branches based on hideUnconnectedHandles setting
    */
-  const visibleBranches = $derived(
-    branches.filter((branch) => isBranchVisible(branch.name)),
-  );
+  const visibleBranches = $derived(branches.filter((branch) => isBranchVisible(branch.name)));
 
   /**
    * Handle node click - only handle selection, no config opening
@@ -134,9 +125,9 @@
   function handleNodeDoubleClick(): void {
     if (props.data.onConfigOpen) {
       props.data.onConfigOpen({
-        id: props.data.nodeId || "",
-        type: "gateway",
-        data: props.data,
+        id: props.data.nodeId || '',
+        type: 'gateway',
+        data: props.data
       });
     }
   }
@@ -145,7 +136,7 @@
    * Handle keyboard events for accessibility
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       handleNodeClick();
     }
@@ -177,23 +168,16 @@
       <!-- Node Icon with Squircle Background -->
       <div
         class="flowdrop-workflow-node__icon-wrapper"
-        style="--_icon-color: {getCategoryColorToken(
-          props.data.metadata.category,
-        )}"
+        style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
       >
         <Icon
-          icon={getNodeIcon(
-            props.data.metadata.icon,
-            props.data.metadata.category,
-          )}
+          icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)}
           class="flowdrop-workflow-node__icon"
         />
       </div>
 
       <!-- Node Title - uses instanceTitle override if set -->
-      <h3
-        class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1"
-      >
+      <h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1">
         {displayTitle}
       </h3>
     </div>
@@ -219,7 +203,7 @@
               id={`${props.data.nodeId}-input-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
-                port.dataType,
+                port.dataType
               )}; --fd-handle-border-color: var(--fd-handle-border);"
               role="button"
               tabindex={0}
@@ -227,38 +211,28 @@
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
-            <div
-              class="flowdrop-workflow-node__port-content flowdrop-flex--1 flowdrop-min-w--0"
-            >
+            <div class="flowdrop-workflow-node__port-content flowdrop-flex--1 flowdrop-min-w--0">
               <div class="flowdrop-flex flowdrop-gap--2">
-                <span class="flowdrop-text--xs flowdrop-font--medium"
-                  >{port.name}</span
-                >
+                <span class="flowdrop-text--xs flowdrop-font--medium">{port.name}</span>
                 <span
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
                     port.dataType,
-                    15,
+                    15
                   )}; color: {getDataTypeColorToken(
-                    port.dataType,
-                  )}; border: 1px solid {getPortBackgroundColor(
-                    port.dataType,
-                    30,
-                  )};"
+                    port.dataType
+                  )}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
                 >
                   {port.dataType}
                 </span>
                 {#if port.required}
-                  <span
-                    class="flowdrop-badge flowdrop-badge--error flowdrop-badge--sm"
+                  <span class="flowdrop-badge flowdrop-badge--error flowdrop-badge--sm"
                     >Required</span
                   >
                 {/if}
               </div>
               {#if port.description}
-                <p
-                  class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate"
-                >
+                <p class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate">
                   {port.description}
                 </p>
               {/if}
@@ -298,13 +272,10 @@
                   class="flowdrop-badge flowdrop-badge--sm"
                   style="background-color: {getPortBackgroundColor(
                     'trigger',
-                    15,
+                    15
                   )}; color: {getDataTypeColorToken(
-                    'trigger',
-                  )}; border: 1px solid {getPortBackgroundColor(
-                    'trigger',
-                    30,
-                  )};"
+                    'trigger'
+                  )}; border: 1px solid {getPortBackgroundColor('trigger', 30)};"
                 >
                   trigger
                 </span>
@@ -316,11 +287,11 @@
               type="source"
               position={Position.Right}
               id={`${props.data.nodeId}-output-${branch.name}`}
-              class={`flowdrop-workflow-node__handle ${isActive ? "flowdrop-workflow-node__handle--active" : ""}`}
+              class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {isActive
                 ? getDataTypeColorToken('trigger')
                 : getDataTypeColorToken(
-                    'trigger',
+                    'trigger'
                   )}; --fd-handle-border-color: var(--fd-handle-border);"
               role="button"
               tabindex={0}
@@ -438,11 +409,7 @@
     width: 2.25rem;
     height: 2.25rem;
     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);
     flex-shrink: 0;
     transition: all var(--fd-transition-normal);
   }

package/dist/components/nodes/GatewayNode.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { WorkflowNode } from "../../types/index.js";
+import type { WorkflowNode } from '../../types/index.js';
 interface Props {
-    data: WorkflowNode["data"] & {
+    data: WorkflowNode['data'] & {
         nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;
-            data: WorkflowNode["data"];
+            data: WorkflowNode['data'];
         }) => void;
     };
     selected?: boolean;

package/dist/components/nodes/IdeaNode.stories.svelte

@@ -1,31 +1,31 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import NodeDecorator from "../../stories/NodeDecorator.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NodeDecorator from '../../stories/NodeDecorator.svelte';
 
   const { Story } = defineMeta({
-    title: "Nodes/IdeaNode",
-    tags: ["autodocs"],
+    title: 'Nodes/IdeaNode',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 </script>
 
 <Story name="Default">
   <NodeDecorator
     data={{
-      label: "Idea",
+      label: 'Idea',
       config: {},
       metadata: {
-        id: "idea",
-        name: "Idea",
-        description: "Planning node",
-        category: "helpers",
-        version: "1.0.0",
-        type: "idea",
+        id: 'idea',
+        name: 'Idea',
+        description: 'Planning node',
+        category: 'helpers',
+        version: '1.0.0',
+        type: 'idea',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     }}
   />
 </Story>
@@ -33,21 +33,20 @@
 <Story name="With Content">
   <NodeDecorator
     data={{
-      label: "Feature Idea",
+      label: 'Feature Idea',
       config: {
-        content:
-          "Add batch processing support to handle multiple items in parallel.",
+        content: 'Add batch processing support to handle multiple items in parallel.'
       },
       metadata: {
-        id: "idea",
-        name: "Idea",
-        description: "Planning node",
-        category: "helpers",
-        version: "1.0.0",
-        type: "idea",
+        id: 'idea',
+        name: 'Idea',
+        description: 'Planning node',
+        category: 'helpers',
+        version: '1.0.0',
+        type: 'idea',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     }}
   />
 </Story>

package/dist/components/nodes/IdeaNode.svelte

@@ -7,10 +7,10 @@
 -->
 
 <script lang="ts">
-  import { Position, Handle } from "@xyflow/svelte";
-  import type { ConfigValues, NodeMetadata } from "../../types/index.js";
-  import Icon from "@iconify/svelte";
-  import { getDataTypeColor } from "../../utils/colors.js";
+  import { Position, Handle } from '@xyflow/svelte';
+  import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+  import Icon from '@iconify/svelte';
+  import { getDataTypeColor } from '../../utils/colors.js';
 
   /**
    * IdeaNode component props
@@ -44,7 +44,7 @@
       (props.data.config?.title as string) ||
       props.data.label ||
       props.data.metadata?.name ||
-      "New Idea",
+      'New Idea'
   );
 
   /**
@@ -57,7 +57,7 @@
     (props.data.config?.instanceDescription as string) ||
       (props.data.config?.description as string) ||
       props.data.metadata?.description ||
-      "Click to add description...",
+      'Click to add description...'
   );
 
   /**
@@ -66,39 +66,29 @@
   const ideaIcon = $derived(
     (props.data.config?.icon as string) ||
       (props.data.metadata?.icon as string) ||
-      "mdi:lightbulb-outline",
+      'mdi:lightbulb-outline'
   );
 
   /**
    * Get accent color from config or metadata, with fallback
    */
   const ideaColor = $derived(
-    (props.data.config?.color as string) ||
-      (props.data.metadata?.color as string) ||
-      "#6366f1",
+    (props.data.config?.color as string) || (props.data.metadata?.color as string) || '#6366f1'
   );
 
   /**
    * Port visibility configuration from config
    * Left and Right are enabled by default, Top and Bottom are disabled by default
    */
-  const enableLeftPort = $derived(
-    (props.data.config?.enableLeftPort as boolean) ?? true,
-  );
-  const enableRightPort = $derived(
-    (props.data.config?.enableRightPort as boolean) ?? true,
-  );
-  const enableTopPort = $derived(
-    (props.data.config?.enableTopPort as boolean) ?? false,
-  );
-  const enableBottomPort = $derived(
-    (props.data.config?.enableBottomPort as boolean) ?? false,
-  );
+  const enableLeftPort = $derived((props.data.config?.enableLeftPort as boolean) ?? true);
+  const enableRightPort = $derived((props.data.config?.enableRightPort as boolean) ?? true);
+  const enableTopPort = $derived((props.data.config?.enableTopPort as boolean) ?? false);
+  const enableBottomPort = $derived((props.data.config?.enableBottomPort as boolean) ?? false);
 
   /**
    * Data type for idea flow connections
    */
-  const IDEA_DATA_TYPE = "idea";
+  const IDEA_DATA_TYPE = 'idea';
 
   /**
    * Opens the configuration sidebar for editing idea properties
@@ -106,9 +96,9 @@
   function openConfigSidebar(): void {
     if (props.data.onConfigOpen) {
       const nodeForConfig = {
-        id: props.data.nodeId || "unknown",
-        type: "idea",
-        data: props.data,
+        id: props.data.nodeId || 'unknown',
+        type: 'idea',
+        data: props.data
       };
       props.data.onConfigOpen(nodeForConfig);
     }
@@ -133,7 +123,7 @@
    * @param event - The keyboard event
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       handleDoubleClick();
     }
@@ -160,7 +150,7 @@
       type="target"
       position={Position.Left}
       style="--fd-handle-fill: {getDataTypeColor(
-        IDEA_DATA_TYPE,
+        IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
       id={`${props.data.nodeId}-input-left`}
     />
@@ -172,7 +162,7 @@
       type="target"
       position={Position.Top}
       style="--fd-handle-fill: {getDataTypeColor(
-        IDEA_DATA_TYPE,
+        IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-input-top`}
     />
@@ -214,11 +204,7 @@
   </div>
 
   <!-- Config button -->
-  <button
-    class="flowdrop-idea-node__config-btn"
-    onclick={openConfigSidebar}
-    title="Configure idea"
-  >
+  <button class="flowdrop-idea-node__config-btn" onclick={openConfigSidebar} title="Configure idea">
     <Icon icon="mdi:cog" />
   </button>
 
@@ -228,7 +214,7 @@
       type="source"
       position={Position.Right}
       style="--fd-handle-fill: {getDataTypeColor(
-        IDEA_DATA_TYPE,
+        IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
       id={`${props.data.nodeId}-output-right`}
     />
@@ -240,7 +226,7 @@
       type="source"
       position={Position.Bottom}
       style="--fd-handle-fill: {getDataTypeColor(
-        IDEA_DATA_TYPE,
+        IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); z-index: 30;"
       id={`${props.data.nodeId}-output-bottom`}
     />

package/dist/components/nodes/IdeaNode.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;

package/dist/components/nodes/NotesNode.stories.svelte

@@ -1,31 +1,31 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import NodeDecorator from "../../stories/NodeDecorator.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NodeDecorator from '../../stories/NodeDecorator.svelte';
 
   const { Story } = defineMeta({
-    title: "Nodes/NotesNode",
-    tags: ["autodocs"],
+    title: 'Nodes/NotesNode',
+    tags: ['autodocs'],
     parameters: {
-      layout: "centered",
-    },
+      layout: 'centered'
+    }
   });
 </script>
 
 <Story name="Default">
   <NodeDecorator
     data={{
-      label: "Notes",
+      label: 'Notes',
       config: {},
       metadata: {
-        id: "notes",
-        name: "Notes",
-        description: "Documentation node",
-        category: "helpers",
-        version: "1.0.0",
-        type: "note",
+        id: 'notes',
+        name: 'Notes',
+        description: 'Documentation node',
+        category: 'helpers',
+        version: '1.0.0',
+        type: 'note',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     }}
   />
 </Story>
@@ -33,22 +33,22 @@
 <Story name="With Content">
   <NodeDecorator
     data={{
-      label: "Notes",
+      label: 'Notes',
       config: {
         content:
-          "## Important\n\nThis workflow handles **user onboarding**.\n\n- Step 1: Validate email\n- Step 2: Create account\n- Step 3: Send welcome email",
-        noteType: "info",
+          '## Important\n\nThis workflow handles **user onboarding**.\n\n- Step 1: Validate email\n- Step 2: Create account\n- Step 3: Send welcome email',
+        noteType: 'info'
       },
       metadata: {
-        id: "notes",
-        name: "Notes",
-        description: "Documentation node",
-        category: "helpers",
-        version: "1.0.0",
-        type: "note",
+        id: 'notes',
+        name: 'Notes',
+        description: 'Documentation node',
+        category: 'helpers',
+        version: '1.0.0',
+        type: 'note',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     }}
   />
 </Story>
@@ -56,22 +56,21 @@
 <Story name="Warning">
   <NodeDecorator
     data={{
-      label: "Warning",
+      label: 'Warning',
       config: {
-        content:
-          "Rate limiting is applied to this API call. Max 100 requests/minute.",
-        noteType: "warning",
+        content: 'Rate limiting is applied to this API call. Max 100 requests/minute.',
+        noteType: 'warning'
       },
       metadata: {
-        id: "notes",
-        name: "Notes",
-        description: "Documentation node",
-        category: "helpers",
-        version: "1.0.0",
-        type: "note",
+        id: 'notes',
+        name: 'Notes',
+        description: 'Documentation node',
+        category: 'helpers',
+        version: '1.0.0',
+        type: 'note',
         inputs: [],
-        outputs: [],
-      },
+        outputs: []
+      }
     }}
   />
 </Story>